) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleSubmit(inputText);
+ }
+ };
+
+ // Auto-resize textarea
+ useEffect(() => {
+ const ta = textareaRef.current;
+ if (!ta) return;
+ ta.style.height = "auto";
+ ta.style.height = `${Math.min(ta.scrollHeight, 180)}px`;
+ }, [inputText]);
+
+ // Track scroll position to show/hide scroll-to-bottom button
+ useEffect(() => {
+ const el = messagesScrollRef.current;
+ if (!el) return;
+ const onScroll = () => {
+ const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+ setShowScrollButton(distFromBottom > 120);
+ if (streamScrollLock.current !== null) {
+ streamScrollLock.current = el.scrollTop; // track user-initiated scroll
+ }
+ };
+ el.addEventListener("scroll", onScroll, { passive: true });
+ return () => el.removeEventListener("scroll", onScroll);
+ }, [activeConversation]);
+
+ // Start/stop the scroll lock when streaming begins/ends
+ useEffect(() => {
+ const el = messagesScrollRef.current;
+ if (isStreaming) {
+ streamScrollLock.current = el?.scrollTop ?? 0;
+ } else {
+ streamScrollLock.current = null;
+ }
+ }, [isStreaming]);
+
+ // After every render during streaming, restore the locked scroll position
+ useLayoutEffect(() => {
+ if (streamScrollLock.current === null) return;
+ const el = messagesScrollRef.current;
+ if (!el) return;
+ el.scrollTop = streamScrollLock.current;
+ });
+
+ // Scroll to bottom only when message COUNT increases (new message added)
+ const prevMsgCountRef = useRef(0);
+ useLayoutEffect(() => {
+ const count = activeConversation?.messages?.length ?? 0;
+ const prev = prevMsgCountRef.current;
+ prevMsgCountRef.current = count;
+ if (count > prev) {
+ const el = messagesScrollRef.current;
+ if (el) el.scrollTop = el.scrollHeight;
+ }
+ }, [activeConversation?.messages]);
+
+ const showBlankState = !isComparisonMode
+ ? !activeConversation || activeConversation.messages.length === 0
+ : comparisonExchanges.length === 0;
+ const displayName = userEmail?.split("@")[0] ?? userId ?? "";
+ const greeting = displayName ? `${getGreeting()}, ${displayName}` : getGreeting();
+
+ // Filtered models: selected ones float to the top, then alphabetical
+ const filteredModels = (
+ modelSearchText ? models.filter((m) => m.toLowerCase().includes(modelSearchText.toLowerCase())) : models
+ ).sort((a, b) => {
+ const aSelected = selectedModels.includes(a);
+ const bSelected = selectedModels.includes(b);
+ if (aSelected && !bSelected) return -1;
+ if (!aSelected && bSelected) return 1;
+ return 0;
+ });
+
+ const modelSelectorContent = (
+
+
+ setModelSearchText(e.target.value)}
+ placeholder="Search models..."
+ className="w-full px-2.5 py-1.5 border rounded-md text-[13px] outline-none bg-background text-foreground"
+ />
+
+ {selectedModels.length >= MAX_COMPARISON_MODELS && (
+
+ Max {MAX_COMPARISON_MODELS} models selected; deselect one to change
+
+ )}
+
+ {filteredModels.map((m) => {
+ const checked = selectedModels.includes(m);
+ const disabled = !checked && selectedModels.length >= MAX_COMPARISON_MODELS;
+ const provider = getProviderFromModelName(m);
+ const { logo } = provider ? getProviderLogoAndName(provider) : { logo: "" };
+ return (
+
+ );
+ })}
+
+
+