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.
This commit is contained in:
Jason
2026-04-14 16:50:22 +08:00
parent 0383c13e66
commit 8b851dc602
+11 -5
View File
@@ -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"
>