1import { splitThreadSearchText } from "@t3tools/shared/threadSearch";
2import type { EnvironmentThreadSearchMatch } from "@t3tools/client-runtime/state/thread-search";
3
4import { AppText as Text } from "../../components/AppText";
5import { cn } from "../../lib/cn";
6
7export function ThreadSearchMatchExcerpt(props: {
8 readonly match: EnvironmentThreadSearchMatch;
9 readonly query: string;
10 readonly selected?: boolean;
11 readonly compact?: boolean;
12 readonly sidebar?: boolean;
13}) {
14 const isUser = props.match.source === "user";
15 const parts = splitThreadSearchText(props.match.snippet, props.query);
16 return (
17 <Text
18 className={cn(
19 props.compact ? "text-sm" : "text-xs",
20 props.selected
21 ? "text-thread-selected-foreground-muted"
22 : props.sidebar
23 ? "text-drawer-foreground-muted"
24 : "text-foreground-muted",
25 )}
26 numberOfLines={1}
27 >
28 <Text
29 className={cn(
30 props.compact ? "text-sm font-t3-medium" : "text-xs font-t3-medium",
31 props.selected
32 ? "text-thread-selected-foreground"
33 : isUser
34 ? props.sidebar
35 ? "text-drawer-foreground-muted"
36 : "text-foreground-secondary"
37 : "text-adaptive-emerald-600-400",
38 )}
39 >
40 {isUser ? "You:" : "Agent:"}{" "}
41 </Text>
42 {parts.map((part) => (
43 <Text
44 className={cn(
45 props.compact ? "text-sm" : "text-xs",
46 part.highlighted && "font-t3-bold",
47 props.selected
48 ? "text-thread-selected-foreground"
49 : part.highlighted
50 ? props.sidebar
51 ? "text-drawer-foreground"
52 : "text-foreground"
53 : props.sidebar
54 ? "text-drawer-foreground-muted"
55 : "text-foreground-muted",
56 )}
57 key={part.start}
58 >
59 {part.text}
60 </Text>
61 ))}
62 </Text>
63 );
64}