From 8b851dc60242958916864c70d2a579f0b91df598 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Tue, 14 Apr 2026 16:50:22 +0800
Subject: [PATCH] fix: auto-expand collapsed messages when search matches
 hidden content

When a search query matches text beyond the collapse point, the message
automatically expands to show the highlighted match. Also adds
aria-expanded for accessibility.
---
 src/components/sessions/SessionMessageItem.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/sessions/SessionMessageItem.tsx b/src/components/sessions/SessionMessageItem.tsx
index 88035b830..2975b2760 100644
--- a/src/components/sessions/SessionMessageItem.tsx
+++ b/src/components/sessions/SessionMessageItem.tsx
@@ -37,10 +37,15 @@ export const SessionMessageItem = memo(function SessionMessageItem({
   const [expanded, setExpanded] = useState(false);
 
   const isLong = message.content.length > COLLAPSE_THRESHOLD;
-  const displayContent =
-    isLong && !expanded
-      ? message.content.slice(0, COLLAPSED_LENGTH) + "…"
-      : message.content;
+  const hasSearchMatch =
+    isLong &&
+    !expanded &&
+    !!searchQuery &&
+    message.content.toLowerCase().includes(searchQuery.toLowerCase());
+  const collapsed = isLong && !expanded && !hasSearchMatch;
+  const displayContent = collapsed
+    ? message.content.slice(0, COLLAPSED_LENGTH) + "…"
+    : message.content;
 
   return (
     <div
@@ -86,9 +91,10 @@ export const SessionMessageItem = memo(function SessionMessageItem({
           ? highlightText(displayContent, searchQuery)
           : displayContent}
       </div>
-      {isLong && (
+      {isLong && !hasSearchMatch && (
         <button
           type="button"
+          aria-expanded={expanded}
           onClick={() => setExpanded((v) => !v)}
           className="flex items-center gap-1 mt-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
         >