Open History to see the last commit
1import { createContext, use, type ReactNode, type ComponentProps } from "react";
2import { useThreadFind } from "./useThreadFind";
3import { ThreadFindBar } from "./ThreadFindBar";
4import { ChatCanvas } from "./ChatCanvas";
5
6type Find = ReturnType<typeof useThreadFind>;
7export const ThreadFindTimelineContext = createContext<Find["timelineProps"] | null>(null);
8const ThreadFindBarContext = createContext<Find["barProps"] | null>(null);
9
10export function ThreadFindCanvas({
11 findOptions,
12 ...canvasProps
13}: ComponentProps<typeof ChatCanvas> & {
14 findOptions: Parameters<typeof useThreadFind>[0];
15}) {
16 return (
17 <ThreadFindProvider {...findOptions}>
18 <ChatCanvas {...canvasProps} />
19 </ThreadFindProvider>
20 );
21}
22
23/** Owns search updates below the chat view so cycling does not rerender the composer and panels. */
24function ThreadFindProvider({
25 children,
26 ...options
27}: Parameters<typeof useThreadFind>[0] & { children: ReactNode }) {
28 const find = useThreadFind(options);
29 return (
30 <ThreadFindBarContext value={find.barProps}>
31 <ThreadFindTimelineContext value={find.timelineProps}>{children}</ThreadFindTimelineContext>
32 </ThreadFindBarContext>
33 );
34}
35
36export function ThreadFind({ onClose }: { onClose: () => void }) {
37 const bar = use(ThreadFindBarContext);
38 if (!bar) return null;
39 return (
40 <ThreadFindBar
41 {...bar}
42 onClose={() => {
43 bar.onClose();
44 onClose();
45 }}
46 />
47 );
48}