mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-05-27 08:32:32 +08:00
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:
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user