| 1 | import { |
| 2 | type ReactNode, |
| 3 | useCallback, |
| 4 | useEffect, |
| 5 | useRef, |
| 6 | useState, |
| 7 | } from "react"; |
| 8 | import { ArrowDown } from "lucide-react"; |
| 9 | import { useTranslation } from "react-i18next"; |
| 10 | |
| 11 | import { ThreadMessages } from "@/components/thread/ThreadMessages"; |
| 12 | import type { NextContinuousControl } from "@/components/thread/MemoryReviewCard"; |
| 13 | import { Button } from "@/components/ui/button"; |
| 14 | import { cn } from "@/lib/utils"; |
| 15 | import type { |
| 16 | MemoryReview, |
| 17 | MemoryWorkspaceAsset, |
| 18 | ShotMemoryAssetCreate, |
| 19 | UIMessage, |
| 20 | } from "@/lib/types"; |
| 21 | |
| 22 | interface ThreadViewportProps { |
| 23 | messages: UIMessage[]; |
| 24 | isStreaming: boolean; |
| 25 | questionsReady?: boolean; |
| 26 | composer: ReactNode; |
| 27 | emptyState?: ReactNode; |
| 28 | actionSlot?: ReactNode; |
| 29 | hideComposer?: boolean; |
| 30 | onAnswerQuestion?: (messageId: string, cardId: string, value: string) => void; |
| 31 | onMemoryReviewAction?: ( |
| 32 | review: MemoryReview, |
| 33 | action: "approve" | "reselect" | "manual_select" | "select_mode", |
| 34 | memoryId?: string, |
| 35 | timestampSec?: number, |
| 36 | selectionMode?: "manual" | "vlm", |
| 37 | retainedMemoryIds?: string[], |
| 38 | ) => void | Promise<void>; |
| 39 | memoryAssets?: MemoryWorkspaceAsset[]; |
| 40 | onCreateMemoryAsset?: ( |
| 41 | shotId: number, |
| 42 | asset: ShotMemoryAssetCreate, |
| 43 | ) => Promise<void>; |
| 44 | getNextContinuous?: ( |
| 45 | review: MemoryReview, |
| 46 | ) => NextContinuousControl | null; |
| 47 | } |
| 48 | |
| 49 | const NEAR_BOTTOM_PX = 48; |
| 50 | |
| 51 | export function ThreadViewport({ |
| 52 | messages, |
| 53 | isStreaming, |
| 54 | questionsReady = true, |
| 55 | composer, |
| 56 | emptyState, |
| 57 | actionSlot, |
| 58 | hideComposer = false, |
| 59 | onAnswerQuestion, |
| 60 | onMemoryReviewAction, |
| 61 | memoryAssets = [], |
| 62 | onCreateMemoryAsset, |
| 63 | getNextContinuous, |
| 64 | }: ThreadViewportProps) { |
| 65 | const { t } = useTranslation(); |
| 66 | const scrollRef = useRef<HTMLDivElement>(null); |
| 67 | const [atBottom, setAtBottom] = useState(true); |
| 68 | const hasMessages = messages.length > 0; |
| 69 | |
| 70 | const scrollToBottom = useCallback((smooth = false) => { |
| 71 | const el = scrollRef.current; |
| 72 | if (!el) return; |
| 73 | el.scrollTo({ |
| 74 | top: el.scrollHeight, |
| 75 | behavior: smooth ? "smooth" : "auto", |
| 76 | }); |
| 77 | }, []); |
| 78 | |
| 79 | useEffect(() => { |
| 80 | if (!atBottom) return; |
| 81 | scrollToBottom(!isStreaming); |
| 82 | }, [messages, isStreaming, atBottom, scrollToBottom]); |
| 83 | |
| 84 | useEffect(() => { |
| 85 | const el = scrollRef.current; |
| 86 | if (!el) return; |
| 87 | |
| 88 | const onScroll = () => { |
| 89 | const distance = el.scrollHeight - el.scrollTop - el.clientHeight; |
| 90 | setAtBottom(distance < NEAR_BOTTOM_PX); |
| 91 | }; |
| 92 | |
| 93 | onScroll(); |
| 94 | el.addEventListener("scroll", onScroll, { passive: true }); |
| 95 | return () => el.removeEventListener("scroll", onScroll); |
| 96 | }, []); |
| 97 | |
| 98 | return ( |
| 99 | <div className="relative flex min-h-0 flex-1 overflow-hidden"> |
| 100 | <div |
| 101 | ref={scrollRef} |
| 102 | className={cn( |
| 103 | "absolute inset-0 overflow-y-auto scroll-smooth scrollbar-thin", |
| 104 | "[&::-webkit-scrollbar]:w-1.5", |
| 105 | "[&::-webkit-scrollbar-thumb]:rounded-full", |
| 106 | "[&::-webkit-scrollbar-thumb]:bg-muted-foreground/30", |
| 107 | "[&::-webkit-scrollbar-track]:bg-transparent", |
| 108 | )} |
| 109 | > |
| 110 | {hasMessages ? ( |
| 111 | <div className="mx-auto flex min-h-full w-full max-w-[64rem] flex-col"> |
| 112 | <div className="flex-1 px-4 pb-20 pt-4"> |
| 113 | <div className="mx-auto w-full max-w-[49.5rem]"> |
| 114 | <ThreadMessages |
| 115 | messages={messages} |
| 116 | questionsReady={questionsReady} |
| 117 | onAnswerQuestion={onAnswerQuestion} |
| 118 | onMemoryReviewAction={onMemoryReviewAction} |
| 119 | memoryAssets={memoryAssets} |
| 120 | onCreateMemoryAsset={onCreateMemoryAsset} |
| 121 | getNextContinuous={getNextContinuous} |
| 122 | /> |
| 123 | {actionSlot ? ( |
| 124 | <div className="flex justify-end text-lg">{actionSlot}</div> |
| 125 | ) : null} |
| 126 | </div> |
| 127 | </div> |
| 128 | |
| 129 | <div className="sticky bottom-0 z-10 mt-auto bg-background"> |
| 130 | <div className="px-4 pb-3">{composer}</div> |
| 131 | </div> |
| 132 | </div> |
| 133 | ) : ( |
| 134 | <div className="mx-auto flex min-h-full w-full max-w-[64rem] flex-col px-4"> |
| 135 | <div className="flex flex-1 items-center justify-center"> |
| 136 | <div className="w-full max-w-[40rem]">{emptyState}</div> |
| 137 | </div> |
| 138 | {!hideComposer ? ( |
| 139 | <div className="sticky bottom-0 z-10 w-full max-w-[40rem] self-center pb-4"> |
| 140 | {composer} |
| 141 | </div> |
| 142 | ) : null} |
| 143 | </div> |
| 144 | )} |
| 145 | </div> |
| 146 | |
| 147 | <div |
| 148 | aria-hidden |
| 149 | className="pointer-events-none absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-background to-transparent" |
| 150 | /> |
| 151 | |
| 152 | {!atBottom && ( |
| 153 | <Button |
| 154 | variant="outline" |
| 155 | size="icon" |
| 156 | onClick={() => scrollToBottom(true)} |
| 157 | className={cn( |
| 158 | "absolute bottom-28 left-1/2 h-8 w-8 -translate-x-1/2 rounded-full shadow-md", |
| 159 | "bg-background/90 backdrop-blur", |
| 160 | "animate-in fade-in-0 zoom-in-95", |
| 161 | )} |
| 162 | aria-label={t("thread.scrollToBottom")} |
| 163 | > |
| 164 | <ArrowDown className="h-4 w-4" /> |
| 165 | </Button> |
| 166 | )} |
| 167 | </div> |
| 168 | ); |
| 169 | } |
| 170 |