@moldable-ai/ui 0.2.19 → 0.2.21

package/dist/components/chat/chat-panel.js

@@ -1,15 +1,17 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AlertCircle, ArrowDown, ChevronDown, ClipboardList, Code2, CornerDownRight, ExternalLink, GripVertical, Image as ImageIcon, ListPlus, Pencil, Trash2, } from 'lucide-react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, ChevronDown, ClipboardList, Code2, CornerDownRight, GripVertical, Image as ImageIcon, ListPlus, Loader2, Maximize2, Minimize2, Pencil, RotateCcw, Trash2, } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
-import { ScrollArea } from '../ui/scroll-area';
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerVisibility, } from '../ui/message-scroller';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../ui/tooltip';
 import { ChatInput, } from './chat-input';
-import { CompactingMessage, ThinkingMessage, } from './chat-message';
+import { CompactingMessage, ThinkingMessage, getChatMessageRenderKey, } from './chat-message';
 import { MessageRow, computeIsThinking, } from './chat-messages';
-import { ConversationHistory, } from './conversation-history';
+import { ConversationHistory, ConversationSidebar, } from './conversation-history';
 import { ModelEffortSelector, } from './model-effort-selector';
 import { ToolApprovalProvider, } from './tool-approval-context';
 import { ToolProgressProvider } from './tool-progress-context';
@@ -17,7 +19,6 @@ import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, us
 import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Virtualizer } from 'virtua';
 const CODEX_OAUTH_ERROR_PATTERNS = [
     'codex oauth',
     'codex-oauth',
@@ -34,18 +35,26 @@ const MISSING_API_KEY_ERROR_PATTERNS = [
     'credential required in vault',
     'credential not configured in vault',
 ];
+function isToastInteractionTarget(target) {
+    return (target instanceof Element &&
+        target.closest('[data-sonner-toaster], [data-sonner-toast]') !== null);
+}
 const AUTH_PROMPT_COPY = {
     'missing-api-key': {
-        title: 'API key required',
-        description: 'Add an API key to Vault to start chatting with AI',
-        action: 'Add API key',
+        label: 'Sign in with your ChatGPT account to chat with AI',
+        action: 'Connect ChatGPT',
     },
     'codex-oauth-expired': {
-        title: 'Refresh OpenAI Codex auth',
-        description: 'Open Settings > API Keys and reconnect OpenAI Codex to keep using Codex-backed OpenAI models.',
-        action: 'Reconnect OpenAI Codex',
+        label: 'Sign in again to refresh your ChatGPT connection',
+        action: 'Reconnect ChatGPT',
     },
 };
+export function getChatAuthPromptCopy(issue) {
+    return AUTH_PROMPT_COPY[issue];
+}
+function ChatAuthPrompt({ copy, isConnecting, onConnect, onAdvancedSetup, }) {
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2 py-3 text-center", "data-chat-auth-prompt": true, children: [_jsx("p", { className: "text-muted-foreground max-w-sm text-sm", children: copy.label }), onConnect && (_jsx(Button, { onClick: onConnect, size: "sm", className: "cursor-pointer", disabled: isConnecting, children: isConnecting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 size-4 animate-spin" }), "Waiting for ChatGPT..."] })) : (copy.action) })), onAdvancedSetup && (_jsx(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground hover:text-foreground h-auto cursor-pointer px-2 py-1 text-xs font-normal", onClick: onAdvancedSetup, disabled: isConnecting, children: "Advanced setup" }))] }));
+}
 function messageIncludesAny(message, patterns) {
     const normalized = message.toLowerCase();
     return patterns.some((pattern) => normalized.includes(pattern));
@@ -64,6 +73,81 @@ export function resolveChatAuthIssue({ missingApiKey, authIssue, error, }) {
     }
     return null;
 }
+export function hasPersistedChatError(messages) {
+    const lastMessage = messages.at(-1);
+    return Boolean(lastMessage?.parts?.some((part) => part.type === 'error'));
+}
+function MessageScrollerCommandSync({ signal }) {
+    const { scrollToEnd } = useMessageScroller();
+    const previousSignalRef = useRef(signal);
+    useEffect(() => {
+        if (previousSignalRef.current === signal)
+            return;
+        previousSignalRef.current = signal;
+        scrollToEnd({ behavior: 'auto' });
+    }, [scrollToEnd, signal]);
+    return null;
+}
+function getNavigationLabel(message) {
+    const text = message.content ??
+        message.parts
+            ?.flatMap((part) => (part.type === 'text' ? [part.text] : []))
+            .join(' ');
+    const normalized = text?.replace(/\s+/g, ' ').trim() || 'User message';
+    return normalized.length > 56 ? `${normalized.slice(0, 53)}...` : normalized;
+}
+function MessageNavigationTrail({ items }) {
+    const { scrollToMessage } = useMessageScroller();
+    const { currentAnchorId } = useMessageScrollerVisibility();
+    const anchors = useMemo(() => items.flatMap((item) => item.kind === 'message' && item.message.role === 'user'
+        ? [{ id: item.key, label: getNavigationLabel(item.message) }]
+        : []), [items]);
+    if (anchors.length < 2)
+        return null;
+    return (_jsx("div", { "data-fullscreen-message-navigation": true, className: "absolute bottom-8 left-3 top-8 z-20 flex w-9 items-center", children: _jsx(TooltipProvider, { delayDuration: 250, children: _jsx("nav", { "aria-label": "Conversation turns", className: "flex max-h-full w-full flex-col items-start overflow-y-auto py-2 [scrollbar-width:none]", children: _jsx("div", { "data-message-navigation-list": true, className: "my-auto flex w-full shrink-0 flex-col items-start", children: anchors.map((anchor) => {
+                        const isCurrent = anchor.id === currentAnchorId;
+                        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-current": isCurrent ? 'location' : undefined, "aria-label": `Jump to: ${anchor.label}`, onClick: () => scrollToMessage(anchor.id, {
+                                            align: 'start',
+                                            behavior: 'smooth',
+                                            scrollMargin: 64,
+                                        }), "data-message-navigation-row": true, className: "flex h-2.5 w-9 shrink-0 cursor-pointer items-center outline-none", children: _jsx("span", { className: "flex h-0.5 w-[30px] items-center", children: _jsx("span", { "data-message-navigation-marker": true, className: cn('bg-muted-foreground h-0.5 w-[26px] origin-left rounded-full opacity-40', isCurrent && 'bg-foreground opacity-60') }) }) }) }), _jsx(TooltipContent, { side: "right", className: "max-w-72", children: anchor.label })] }, anchor.id));
+                    }) }) }) }) }));
+}
+function ChatMessageViewport({ items, renderItem, toolProgress, onApprovalResponse, currentConversationId, scrollToBottomSignal, isBusy, hasOlderMessages = false, isLoadingOlderMessages = false, onLoadOlderMessages, showNavigationTrail = false, scrollAreaClassName, contentClassName, scrollButtonClassName, }) {
+    const viewportRef = useRef(null);
+    const loadingOlderRef = useRef(false);
+    const handleViewportScroll = useCallback((event) => {
+        const viewport = event.currentTarget;
+        if (viewport.scrollTop > 64 ||
+            !hasOlderMessages ||
+            isLoadingOlderMessages ||
+            loadingOlderRef.current ||
+            !onLoadOlderMessages) {
+            return;
+        }
+        loadingOlderRef.current = true;
+        // A prepended page is position-preserved by the message scroller
+        // itself, synchronously in the same mutation pass — compensating here
+        // after a paint produced a visible two-step jump. Only a reset (the
+        // cursor raced a history rewrite) still needs an explicit landing.
+        void onLoadOlderMessages()
+            .then((outcome) => {
+            if (outcome !== 'reset')
+                return;
+            window.requestAnimationFrame(() => {
+                if (viewportRef.current !== viewport)
+                    return;
+                viewport.scrollTop = viewport.scrollHeight;
+            });
+        })
+            .finally(() => {
+            window.requestAnimationFrame(() => {
+                loadingOlderRef.current = false;
+            });
+        });
+    }, [hasOlderMessages, isLoadingOlderMessages, onLoadOlderMessages]);
+    return (_jsx(MessageScrollerProvider, { autoScroll: true, defaultScrollPosition: "end", scrollPreviousItemPeek: 64, children: _jsxs(MessageScroller, { className: "relative min-h-0 min-w-0 flex-1", children: [_jsx(MessageScrollerCommandSync, { signal: scrollToBottomSignal }), _jsx(MessageScrollerViewport, { ref: viewportRef, className: scrollAreaClassName, "data-message-scroll-fade": true, "data-has-older-messages": hasOlderMessages ? 'true' : 'false', onScroll: handleViewportScroll, children: _jsx(MessageScrollerContent, { "aria-busy": isBusy || isLoadingOlderMessages, className: contentClassName, children: _jsx(ToolProgressProvider, { value: toolProgress, children: _jsx(ToolApprovalProvider, { onApprovalResponse: onApprovalResponse ?? null, children: items.map((item) => (_jsx(MessageScrollerItem, { messageId: item.key, scrollAnchor: item.kind === 'message' && item.message.role === 'user', children: renderItem(item) }, item.key))) }) }) }) }), items.length > 0 && (_jsx(MessageScrollerButton, { className: scrollButtonClassName })), showNavigationTrail && _jsx(MessageNavigationTrail, { items: items })] }) }, currentConversationId ?? 'new-conversation'));
+}
 function clampPercent(value) {
     if (!Number.isFinite(value))
         return 0;
@@ -77,7 +161,16 @@ function formatTokenCount(tokens) {
     const millions = tokens / 1_000_000;
     return `${Number.isInteger(millions) ? millions.toFixed(0) : millions.toFixed(2)}M`;
 }
-function ContextWindowIndicator({ usage }) {
+function formatUsageReset(resetAt) {
+    if (!resetAt)
+        return null;
+    return new Intl.DateTimeFormat(undefined, {
+        weekday: 'short',
+        hour: 'numeric',
+        minute: '2-digit',
+    }).format(new Date(resetAt * 1_000));
+}
+function ContextWindowIndicator({ usage, planUsage, }) {
     if (!usage || usage.maxTokens <= 0)
         return null;
     const usedPercent = clampPercent(Math.round((usage.usedTokens / usage.maxTokens) * 100));
@@ -86,9 +179,15 @@ function ContextWindowIndicator({ usage }) {
         : usedPercent >= 75
             ? 'var(--warning)'
             : 'var(--muted-foreground)';
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex size-8 cursor-pointer items-center justify-center rounded-full bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2", "aria-label": `Context window ${usedPercent}% full`, children: _jsx("span", { className: "relative size-4 rounded-full", style: {
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex size-8 cursor-pointer items-center justify-center rounded-full bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2", "aria-label": `Context window ${usedPercent}% full`, children: _jsx("span", { className: "relative size-4 rounded-full", style: {
                             background: `conic-gradient(${ringColor} ${usedPercent}%, color-mix(in oklch, var(--muted-foreground) 22%, transparent) 0)`,
-                        }, children: _jsx("span", { className: "bg-background absolute inset-[3px] rounded-full" }) }) }) }), _jsxs(TooltipContent, { align: "end", side: "top", sideOffset: 8, className: "w-56 px-3 py-2.5 text-center shadow-lg", children: [_jsx("div", { className: "opacity-70", children: "Context window:" }), _jsxs("div", { className: "mt-1 text-sm font-medium", children: [usedPercent, "% full"] }), _jsxs("div", { className: "mt-1 text-xs", children: [formatTokenCount(usage.usedTokens), " /", ' ', formatTokenCount(usage.maxTokens), " tokens used"] }), usage.compactsAutomatically && (_jsx("div", { className: "mt-2.5 text-xs font-medium leading-4", children: "Moldable automatically compacts its context" }))] })] }));
+                        }, children: _jsx("span", { className: "bg-background absolute inset-[3px] rounded-full" }) }) }) }), _jsxs(PopoverContent, { align: "end", side: "top", sideOffset: 8, className: "w-80 p-3 shadow-lg", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Context window" }), _jsxs("span", { children: [formatTokenCount(usage.usedTokens), " /", ' ', formatTokenCount(usage.maxTokens), " (", usedPercent, "%)"] })] }), _jsx("div", { className: "bg-muted mt-2 h-1.5 overflow-hidden rounded-full", children: _jsx("div", { className: "bg-primary h-full rounded-full", style: { width: `${usedPercent}%` } }) }), usage.compactsAutomatically && (_jsx("div", { className: "text-muted-foreground mt-2 text-[11px] leading-4", children: "Moldable automatically compacts its context" })), planUsage && planUsage.windows.length > 0 && (_jsxs("div", { className: "border-border mt-3 flex flex-col gap-3 border-t pt-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "text-muted-foreground text-xs", children: ["Plan usage limits", planUsage.planLabel ? ` · ${planUsage.planLabel}` : ''] }), planUsage.accountLabel && (_jsx("div", { className: "mt-0.5 truncate text-xs font-medium", children: planUsage.accountLabel }))] }), planUsage.windows.map((window) => {
+                                const reset = formatUsageReset(window.resetAt);
+                                const percent = clampPercent(window.usedPercent);
+                                return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [_jsx("span", { children: window.label }), _jsxs("span", { className: "text-muted-foreground", children: [reset ? `Resets ${reset} · ` : '', percent, "%"] })] }), _jsx("div", { className: "bg-muted h-1.5 overflow-hidden rounded-full", children: _jsx("div", { className: percent >= 90
+                                                    ? 'bg-destructive h-full rounded-full'
+                                                    : 'bg-primary h-full rounded-full', style: { width: `${percent}%` } }) })] }, window.label));
+                            })] }))] })] }));
 }
 function ContextCompactedDivider() {
     return (_jsx("div", { "data-testid": "context-compacted-divider", className: "text-muted-foreground/80 w-full px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-border h-px min-w-8 flex-1" }), _jsxs("div", { className: "flex select-none items-center gap-2 whitespace-nowrap text-[13px] font-medium leading-5", children: [_jsx(ClipboardList, { className: "size-4" }), _jsx("span", { children: "Context automatically compacted" })] }), _jsx("div", { className: "bg-border h-px min-w-8 flex-1" })] }) }));
@@ -118,19 +217,10 @@ function QueuedMessageRow({ message, isResponding, onRetryQueuedMessage, onSteer
 /**
  * Floating chat panel with model selector
  */
-export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChange, onSubmit, onStop, onNewChat, modelProviders, modelEffortPresets, selectedModel, selectedReasoningEffort, onModelEffortChange, conversations, currentConversationId, scrollToBottomSignal = 0, onSelectConversation, onDeleteConversation, placeholder = 'Ask anything...', welcomeMessage, isExpanded, onExpandedChange, isMinimized = false, onMinimizedChange, className, error, missingApiKey, authIssue, onAddApiKey, toolProgress = {}, onApprovalResponse, isEditingApp = true, onEditingAppChange, showEditingAppToggle = false, checkpoints, restoringMessageId, onRestoreCheckpoint, imageAttachments = [], onRemoveImageAttachment, isImageDropActive = false, queuedMessages = [], onRemoveQueuedMessage, onRetryQueuedMessage, onSteerQueuedMessage, onReorderQueuedMessages, onEditQueuedMessage, slashCommands, onSlashCommandSelect, isCompacting = false, compactedHistoryStartIndex, contextUsage, }) {
+export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChange, onSubmit, onStop, onNewChat, modelProviders, modelEffortPresets, selectedModel, selectedReasoningEffort, onModelEffortChange, conversations, currentConversationId, currentAppId, hasMoreConversations = false, isLoadingMoreConversations = false, onLoadMoreConversations, onResolveMessageContent, scrollToBottomSignal = 0, hasOlderMessages = false, isLoadingOlderMessages = false, onLoadOlderMessages, onSelectConversation, onArchiveConversation, onArchiveConversationGroup, placeholder = 'Ask anything...', welcomeMessage, isExpanded, onExpandedChange, isFullScreen = false, onFullScreenChange, isMinimized = false, onMinimizedChange, className, error, onRetryError, missingApiKey, authIssue, onConnectChatGPT, onAdvancedSetup, toolProgress = {}, onApprovalResponse, isEditingApp = true, onEditingAppChange, showEditingAppToggle = false, checkpoints, restoringMessageId, onRestoreCheckpoint, imageAttachments = [], onRemoveImageAttachment, isImageDropActive = false, queuedMessages = [], onRemoveQueuedMessage, onRetryQueuedMessage, onSteerQueuedMessage, onReorderQueuedMessages, onEditQueuedMessage, slashCommands, onSlashCommandSelect, isCompacting = false, compactedHistoryStartIndex, contextUsage, planUsage, }) {
     const inputRef = useRef(null);
-    const scrollAreaRef = useRef(null);
-    const viewportRef = useRef(null);
-    const virtualizerRef = useRef(null);
-    const prevMessageCountRef = useRef(messages.length);
-    const prevConversationIdRef = useRef(currentConversationId ?? null);
-    const prevScrollToBottomSignalRef = useRef(scrollToBottomSignal);
-    const pendingConversationScrollIdRef = useRef(null);
-    const hasPendingScrollToBottomSignalRef = useRef(false);
-    const scrollRafRef = useRef(null);
-    const [viewportVersion, setViewportVersion] = useState(0);
-    const [isAtBottom, setIsAtBottom] = useState(true);
+    const fullScreenTriggerRef = useRef(null);
+    const [isConnectingChatGPT, setIsConnectingChatGPT] = useState(false);
     const queuedMessageIds = useMemo(() => queuedMessages.map((message) => message.id), [queuedMessages]);
     const queueSensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: {
@@ -141,59 +231,31 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
     }));
     const isResponding = status === 'streaming' || status === 'submitted';
     const controlsDisabled = isTurnInFlight ?? isResponding;
-    const composerControls = (_jsxs(_Fragment, { children: [_jsx(ContextWindowIndicator, { usage: contextUsage }), modelProviders.length > 0 && modelEffortPresets.length > 0 ? (_jsx(ModelEffortSelector, { providers: modelProviders, presets: modelEffortPresets, selectedModel: selectedModel, selectedReasoningEffort: selectedReasoningEffort, onSelectionChange: onModelEffortChange, disabled: controlsDisabled })) : null] }));
-    // Capture the Radix viewport element so virtua can use it as the scroll container
-    useEffect(() => {
-        const scrollArea = scrollAreaRef.current;
-        if (!scrollArea)
-            return;
-        const viewport = scrollArea.querySelector('[data-radix-scroll-area-viewport]');
-        if (!viewport)
-            return;
-        viewport.style.overflowAnchor = 'none';
-        if (viewportRef.current !== viewport) {
-            viewportRef.current = viewport;
-            setViewportVersion((version) => version + 1);
-        }
-    }, [isExpanded]);
-    // Track scroll position to detect if user is at bottom
-    useEffect(() => {
-        const viewport = viewportRef.current;
-        if (!viewport)
-            return;
-        const handleScroll = () => {
-            const { scrollTop, scrollHeight, clientHeight } = viewport;
-            // Consider "at bottom" if within 50px of the bottom
-            const atBottom = scrollHeight - scrollTop - clientHeight < 50;
-            setIsAtBottom(atBottom);
-        };
-        handleScroll();
-        viewport.addEventListener('scroll', handleScroll);
-        return () => viewport.removeEventListener('scroll', handleScroll);
-    }, [viewportVersion]);
+    const isChatOpen = isExpanded || isFullScreen;
+    const composerControls = (_jsxs(_Fragment, { children: [_jsx(ContextWindowIndicator, { usage: contextUsage, planUsage: planUsage }), modelProviders.length > 0 && modelEffortPresets.length > 0 ? (_jsx(ModelEffortSelector, { providers: modelProviders, presets: modelEffortPresets, selectedModel: selectedModel, selectedReasoningEffort: selectedReasoningEffort, onSelectionChange: onModelEffortChange, disabled: controlsDisabled })) : null] }));
     // Focus input when expanded
     useEffect(() => {
-        if (isExpanded) {
+        if (isChatOpen) {
             const timer = setTimeout(() => {
                 inputRef.current?.focus();
             }, 200);
             return () => clearTimeout(timer);
         }
-    }, [isExpanded]);
+    }, [isChatOpen]);
     const resolvedAuthIssue = resolveChatAuthIssue({
         missingApiKey,
         authIssue,
         error,
     });
     const authPromptCopy = resolvedAuthIssue
-        ? AUTH_PROMPT_COPY[resolvedAuthIssue]
+        ? getChatAuthPromptCopy(resolvedAuthIssue)
         : null;
     const showAuthPrompt = Boolean(resolvedAuthIssue);
     const submitDisabled = showAuthPrompt;
     const handleSubmit = useCallback((e, mode) => {
         e?.preventDefault();
         if (submitDisabled) {
-            if (!isExpanded) {
+            if (!isChatOpen) {
                 onExpandedChange(true);
             }
             return;
@@ -201,17 +263,15 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
         if (!input.trim() && imageAttachments.length === 0)
             return;
         const submitMode = mode ?? (isResponding ? 'queue' : 'send');
-        if (!isExpanded) {
+        if (!isChatOpen) {
             onExpandedChange(true);
         }
-        // Reset to bottom when user sends a message
-        setIsAtBottom(true);
         onSubmit(e, submitMode);
     }, [
         imageAttachments.length,
         input,
         isResponding,
-        isExpanded,
+        isChatOpen,
         onExpandedChange,
         onSubmit,
         submitDisabled,
@@ -224,50 +284,79 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
     }, [onReorderQueuedMessages]);
     const handleEditQueuedMessage = useCallback((id) => {
         onEditQueuedMessage?.(id);
-        if (!isExpanded) {
+        if (!isChatOpen) {
             onExpandedChange(true);
         }
         window.setTimeout(() => inputRef.current?.focus(), 0);
-    }, [isExpanded, onEditQueuedMessage, onExpandedChange]);
+    }, [isChatOpen, onEditQueuedMessage, onExpandedChange]);
     const handleNewChat = useCallback(() => {
         onNewChat?.();
         inputRef.current?.focus();
     }, [onNewChat]);
+    const handleConnectChatGPT = useCallback(async () => {
+        if (!onConnectChatGPT || isConnectingChatGPT)
+            return;
+        setIsConnectingChatGPT(true);
+        try {
+            await onConnectChatGPT();
+        }
+        catch (error) {
+            console.error('Failed to connect ChatGPT:', error);
+        }
+        finally {
+            setIsConnectingChatGPT(false);
+        }
+    }, [isConnectingChatGPT, onConnectChatGPT]);
+    const editingAppControl = showEditingAppToggle && onEditingAppChange ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: (event) => {
+                            event.preventDefault();
+                            onEditingAppChange(!isEditingApp);
+                        }, className: cn('cursor-pointer', isEditingApp
+                            ? 'text-primary bg-primary/10 hover:bg-primary/20'
+                            : 'text-muted-foreground hover:text-foreground'), children: _jsx(Code2, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx("p", { children: isEditingApp
+                            ? 'Editing this app (click to disable)'
+                            : 'Not editing app (click to enable)' }) })] }) })) : null;
     const composerStartControls = (_jsxs(_Fragment, { children: [conversations &&
                 (conversations.length > 0 || onNewChat) &&
-                onSelectConversation && (_jsx(ConversationHistory, { conversations: conversations, currentConversationId: currentConversationId, onSelect: onSelectConversation, onDelete: onDeleteConversation, onNewChat: handleNewChat, newChatDisabled: controlsDisabled, disabled: controlsDisabled, dropdownAlign: "start", dropdownSide: "top", tooltipSide: "top" })), showEditingAppToggle && onEditingAppChange && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: (event) => {
-                                    event.preventDefault();
-                                    onEditingAppChange(!isEditingApp);
-                                }, className: cn('cursor-pointer', isEditingApp
-                                    ? 'text-primary bg-primary/10 hover:bg-primary/20'
-                                    : 'text-muted-foreground hover:text-foreground'), children: _jsx(Code2, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx("p", { children: isEditingApp
-                                    ? 'Editing this app (click to disable)'
-                                    : 'Not editing app (click to enable)' }) })] }) }))] }));
+                onSelectConversation && (_jsx(ConversationHistory, { conversations: conversations, currentConversationId: currentConversationId, currentAppId: currentAppId, onSelect: onSelectConversation, onArchive: onArchiveConversation, onArchiveGroup: onArchiveConversationGroup, onNewChat: handleNewChat, newChatDisabled: false, disabled: false, dropdownAlign: "start", dropdownSide: "top", tooltipSide: "top", hasMoreConversations: hasMoreConversations, isLoadingMoreConversations: isLoadingMoreConversations, onLoadMoreConversations: onLoadMoreConversations })), editingAppControl] }));
     // Keyboard shortcut: Cmd+Shift+O for new chat
     useEffect(() => {
         const handleKeyDown = (e) => {
             if (e.key === 'o' && e.metaKey && e.shiftKey) {
                 e.preventDefault();
                 // Only create new chat if conversation controls are currently available.
-                if (!controlsDisabled && isExpanded) {
+                if (isChatOpen) {
                     handleNewChat();
                 }
             }
         };
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [controlsDisabled, isExpanded, handleNewChat]);
+    }, [isChatOpen, handleNewChat]);
     // Handle minimize button - now goes to minimized state
     const handleMinimize = useCallback(() => {
+        if (isFullScreen) {
+            onFullScreenChange?.(false);
+        }
         if (isExpanded) {
             onExpandedChange(false);
         }
         onMinimizedChange?.(true);
-    }, [isExpanded, onExpandedChange, onMinimizedChange]);
+    }, [
+        isExpanded,
+        isFullScreen,
+        onExpandedChange,
+        onFullScreenChange,
+        onMinimizedChange,
+    ]);
     const isStreaming = status === 'streaming' || status === 'submitted';
     const isThinking = useMemo(() => computeIsThinking(messages, status), [messages, status]);
-    const showErrorMessage = Boolean(error) && status === 'error' && !showAuthPrompt;
-    const lastMessageId = messages[messages.length - 1]?.id;
+    const showErrorMessage = Boolean(error) &&
+        status === 'error' &&
+        !showAuthPrompt &&
+        !hasPersistedChatError(messages);
+    const lastMessageKey = messages.length > 0
+        ? getChatMessageRenderKey(messages[messages.length - 1], messages.length - 1)
+        : null;
     const listItems = useMemo(() => {
         const items = [];
         if (messages.length === 0 && welcomeMessage) {
@@ -283,7 +372,11 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
                     kind: 'context-compacted-divider',
                 });
             }
-            items.push({ key: message.id, kind: 'message', message });
+            items.push({
+                key: getChatMessageRenderKey(message, index),
+                kind: 'message',
+                message,
+            });
         }
         if (isThinking && !isCompacting) {
             items.push({ key: 'thinking', kind: 'thinking' });
@@ -291,9 +384,6 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
         if (isCompacting) {
             items.push({ key: 'compacting', kind: 'compacting' });
         }
-        if (showAuthPrompt) {
-            items.push({ key: 'auth-prompt', kind: 'auth-prompt' });
-        }
         if (showErrorMessage) {
             items.push({ key: 'error', kind: 'error' });
         }
@@ -304,7 +394,6 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
         compactedHistoryStartIndex,
         messages,
         showErrorMessage,
-        showAuthPrompt,
         welcomeMessage,
     ]);
     const renderVirtualItem = useCallback((item) => {
@@ -315,99 +404,43 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
                 return (_jsx("div", { className: "px-2 pb-3", children: _jsx(ContextCompactedDivider, {}) }));
             case 'message': {
                 const checkpoint = checkpoints?.get(item.message.id);
-                return (_jsx("div", { className: "px-2 pb-3", children: _jsx(MessageRow, { message: item.message, isLast: item.message.id === lastMessageId, isStreaming: isStreaming, checkpoint: checkpoint, restoringMessageId: restoringMessageId, onRestoreCheckpoint: onRestoreCheckpoint }) }));
+                return (_jsx("div", { className: "px-2 pb-3", children: _jsx(MessageRow, { message: item.message, isLast: item.key === lastMessageKey, isStreaming: isStreaming, checkpoint: checkpoint, restoringMessageId: restoringMessageId, onRestoreCheckpoint: onRestoreCheckpoint, onResolveMessageContent: onResolveMessageContent, onRetryError: item.key === lastMessageKey ? onRetryError : undefined }) }));
             }
             case 'thinking':
                 return (_jsx("div", { className: "px-2 pb-3", children: _jsx(ThinkingMessage, {}) }));
             case 'compacting':
                 return (_jsx("div", { className: "px-2 pb-3", children: _jsx(CompactingMessage, {}) }));
-            case 'auth-prompt':
-                if (resolvedAuthIssue === 'codex-oauth-expired') {
-                    return (_jsx("div", { className: "px-2 pb-4", children: _jsxs("div", { className: "bg-muted/30 mx-2 flex flex-col gap-3 rounded-lg p-4", children: [_jsx("div", { className: "flex items-start justify-between gap-3", children: _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: authPromptCopy?.title ?? 'Refresh OpenAI Codex auth' }), _jsx("p", { className: "text-muted-foreground text-xs", children: authPromptCopy?.description ??
-                                                    'Open Settings > API Keys and reconnect OpenAI Codex.' })] }) }), onAddApiKey && (_jsxs(Button, { variant: "outline", className: "w-full cursor-pointer", onClick: onAddApiKey, children: [_jsx(ExternalLink, { className: "mr-2 size-4" }), authPromptCopy?.action ?? 'Reconnect OpenAI Codex'] }))] }) }));
-                }
-                return (_jsx("div", { className: "px-2 pb-4", children: _jsxs("div", { className: "border-primary/30 bg-primary/5 mx-2 flex flex-col items-center gap-3 rounded-lg border p-4 text-center", children: [_jsx("div", { className: "bg-primary/10 flex size-10 items-center justify-center rounded-full", children: _jsx(AlertCircle, { className: "text-primary size-5" }) }), _jsxs("div", { className: "max-w-sm", children: [_jsx("p", { className: "text-foreground font-medium", children: authPromptCopy?.title ?? 'Authentication required' }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: authPromptCopy?.description ??
-                                            'Open settings to configure chat authentication.' })] }), onAddApiKey && (_jsx(Button, { onClick: onAddApiKey, size: "sm", className: "cursor-pointer", children: authPromptCopy?.action ?? 'Open settings' }))] }) }));
             case 'error':
-                return (_jsx("div", { className: "px-2 pb-4", children: error && (_jsxs("div", { className: "border-destructive/30 bg-destructive/10 text-destructive mx-2 flex items-start gap-2 rounded-lg border p-3 text-sm", children: [_jsx(AlertCircle, { className: "mt-0.5 size-4 shrink-0" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-medium", children: "Request failed" }), _jsx("p", { className: "text-destructive/80 mt-0.5 break-words", children: error.message || 'An unknown error occurred' })] })] })) }));
+                return (_jsx("div", { className: "px-2 pb-4", children: error && (_jsxs("div", { className: "border-destructive/30 bg-destructive/10 text-destructive mx-2 flex items-start gap-2 rounded-lg border p-3 text-sm", children: [_jsx(AlertCircle, { className: "mt-0.5 size-4 shrink-0" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-medium", children: "Request failed" }), _jsx("p", { className: "text-destructive/80 mt-0.5 break-words", children: error.message || 'An unknown error occurred' }), onRetryError && (_jsxs("button", { type: "button", onClick: onRetryError, className: "border-destructive/30 hover:bg-destructive/10 mt-2 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium transition-colors", children: [_jsx(RotateCcw, { className: "size-3.5" }), "Retry"] }))] })] })) }));
         }
     }, [
         checkpoints,
         error,
-        authPromptCopy,
-        resolvedAuthIssue,
         isStreaming,
-        lastMessageId,
+        lastMessageKey,
         messages.length,
-        onAddApiKey,
         onRestoreCheckpoint,
+        onResolveMessageContent,
+        onRetryError,
         restoringMessageId,
         welcomeMessage,
     ]);
-    const scrollToBottom = useCallback((smooth = true) => {
-        const lastIndex = listItems.length - 1;
-        if (lastIndex < 0)
-            return;
-        if (scrollRafRef.current !== null) {
-            cancelAnimationFrame(scrollRafRef.current);
-        }
-        setIsAtBottom(true);
-        scrollRafRef.current = requestAnimationFrame(() => {
-            virtualizerRef.current?.scrollToIndex(lastIndex, {
-                align: 'end',
-                smooth,
-            });
-            scrollRafRef.current = null;
-        });
-    }, [listItems.length]);
-    // New conversations loaded from history should start at the latest message.
-    useEffect(() => {
-        const previousConversationId = prevConversationIdRef.current;
-        const nextConversationId = currentConversationId ?? null;
-        prevConversationIdRef.current = nextConversationId;
-        if (previousConversationId !== nextConversationId) {
-            pendingConversationScrollIdRef.current = nextConversationId;
-            setIsAtBottom(true);
-        }
-        if (!nextConversationId ||
-            pendingConversationScrollIdRef.current !== nextConversationId ||
-            !isExpanded ||
-            listItems.length === 0) {
-            return;
-        }
-        scrollToBottom(false);
-        pendingConversationScrollIdRef.current = null;
-    }, [currentConversationId, isExpanded, listItems.length, scrollToBottom]);
-    useEffect(() => {
-        if (prevScrollToBottomSignalRef.current !== scrollToBottomSignal) {
-            prevScrollToBottomSignalRef.current = scrollToBottomSignal;
-            hasPendingScrollToBottomSignalRef.current = true;
-            setIsAtBottom(true);
-        }
-        if (!hasPendingScrollToBottomSignalRef.current ||
-            !isExpanded ||
-            listItems.length === 0) {
-            return;
-        }
-        scrollToBottom(false);
-        hasPendingScrollToBottomSignalRef.current = false;
-    }, [isExpanded, listItems.length, scrollToBottom, scrollToBottomSignal]);
-    // Scroll to bottom on new messages if the user is already at bottom
-    useEffect(() => {
-        const previousMessageCount = prevMessageCountRef.current;
-        const hasNewMessage = messages.length > previousMessageCount;
-        prevMessageCountRef.current = messages.length;
-        if (!isExpanded || !isAtBottom) {
-            return;
-        }
-        scrollToBottom(hasNewMessage);
-        return () => {
-            if (scrollRafRef.current !== null) {
-                cancelAnimationFrame(scrollRafRef.current);
-                scrollRafRef.current = null;
-            }
-        };
-    }, [isAtBottom, isExpanded, messages.length, scrollToBottom]);
+    if (isFullScreen && !isMinimized) {
+        const selectedConversation = conversations?.find((conversation) => conversation.id === currentConversationId);
+        return (_jsx(Dialog, { open: true, onOpenChange: () => undefined, children: _jsxs(DialogContent, { "data-moldable-chat-fullscreen": true, "data-chat-drop-target": true, showCloseButton: false, "aria-describedby": undefined, onInteractOutside: (event) => {
+                    if (isToastInteractionTarget(event.target)) {
+                        event.preventDefault();
+                    }
+                }, onEscapeKeyDown: (event) => {
+                    event.preventDefault();
+                    onFullScreenChange?.(false);
+                }, onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                    window.requestAnimationFrame(() => {
+                        fullScreenTriggerRef.current?.focus();
+                    });
+                }, className: "bottom-1 left-1 right-1 top-1 z-50 flex h-auto w-auto max-w-none translate-x-0 translate-y-0 gap-0 overflow-hidden rounded-lg border-0 p-0 sm:max-w-none", children: [_jsx("div", { "data-tauri-drag-region": true, className: "absolute inset-x-0 top-0 z-20 h-9", "aria-hidden": "true" }), isImageDropActive && (_jsxs("div", { className: "bg-background/90 border-primary/50 text-foreground absolute inset-0 z-50 flex flex-col items-center justify-center gap-2 rounded-[inherit] border-2 border-dashed backdrop-blur-sm", children: [_jsx(ImageIcon, { className: "text-primary size-7" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm font-medium", children: "Drop images to attach" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "They stay on disk and are read when sent" })] })] })), _jsxs("aside", { className: "border-border bg-muted/50 relative z-10 flex w-[280px] shrink-0 flex-col overflow-hidden rounded-r-lg border-r px-3 pb-4 pt-11", children: [_jsxs("button", { type: "button", onClick: () => onFullScreenChange?.(false), className: "text-muted-foreground hover:text-foreground mb-4 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-2 text-sm transition-colors", children: [_jsx(Minimize2, { className: "size-4" }), "Back to app"] }), _jsx(ConversationSidebar, { conversations: conversations ?? [], currentConversationId: currentConversationId, currentAppId: currentAppId, onSelect: onSelectConversation ?? (() => undefined), onArchive: onArchiveConversation, onArchiveGroup: onArchiveConversationGroup, onNewChat: handleNewChat, newChatDisabled: false, hideScrollbar: true, disabled: false, hasMoreConversations: hasMoreConversations, isLoadingMoreConversations: isLoadingMoreConversations, onLoadMoreConversations: onLoadMoreConversations, className: "min-h-0 flex-1" })] }), _jsxs("section", { className: "relative flex min-w-0 flex-1 flex-col", children: [_jsxs("header", { className: "border-border flex h-14 shrink-0 items-center justify-between border-b px-5", children: [_jsx(DialogTitle, { className: "truncate text-sm font-medium", children: selectedConversation?.title ?? 'New conversation' }), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => onFullScreenChange?.(false), "aria-label": "Exit full screen", className: "text-muted-foreground hover:text-foreground relative z-30 cursor-pointer", children: _jsx(Minimize2, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: "Exit full screen" })] }) })] }), _jsx(ChatMessageViewport, { items: listItems, renderItem: renderVirtualItem, toolProgress: toolProgress, onApprovalResponse: onApprovalResponse, currentConversationId: currentConversationId, scrollToBottomSignal: scrollToBottomSignal, isBusy: isResponding, hasOlderMessages: hasOlderMessages, isLoadingOlderMessages: isLoadingOlderMessages, onLoadOlderMessages: onLoadOlderMessages, showNavigationTrail: true, contentClassName: "mx-auto w-full min-w-0 max-w-3xl overflow-hidden px-6 py-6", scrollButtonClassName: "absolute bottom-3 left-1/2 z-20 size-8 -translate-x-1/2 cursor-pointer rounded-full shadow-lg" }), authPromptCopy && (_jsx("div", { className: "mx-auto w-full max-w-3xl shrink-0 px-6 pb-2", children: _jsx(ChatAuthPrompt, { copy: authPromptCopy, isConnecting: isConnectingChatGPT, onConnect: onConnectChatGPT ? handleConnectChatGPT : undefined, onAdvancedSetup: onAdvancedSetup }) })), _jsxs("div", { className: "mx-auto w-full max-w-3xl shrink-0 px-6 pb-2", children: [queuedMessages.length > 0 && (_jsxs("div", { className: "border-border bg-muted/30 mb-2 rounded-xl border p-3", children: [_jsxs("div", { className: "text-muted-foreground mb-2 flex items-center gap-2 text-xs font-medium", children: [_jsx(ListPlus, { className: "size-3.5" }), _jsx("span", { children: "Queued follow-ups" })] }), _jsx(DndContext, { sensors: queueSensors, collisionDetection: closestCenter, onDragEnd: handleQueuedDragEnd, children: _jsx(SortableContext, { items: queuedMessageIds, strategy: verticalListSortingStrategy, children: _jsx("div", { className: "space-y-1.5", children: queuedMessages.map((message) => (_jsx(QueuedMessageRow, { message: message, isResponding: isResponding, onRetryQueuedMessage: onRetryQueuedMessage, onSteerQueuedMessage: onSteerQueuedMessage, onRemoveQueuedMessage: onRemoveQueuedMessage, onEditQueuedMessage: handleEditQueuedMessage }, message.id))) }) }) })] })), _jsx("div", { className: "bg-background overflow-hidden rounded-[24px] shadow-[0_8px_40px_-12px_rgba(0,0,0,0.2)]", children: _jsx(ChatInput, { input: input, onInputChange: onInputChange, onSubmit: handleSubmit, isResponding: isResponding, placeholder: placeholder, inputRef: inputRef, onStop: onStop, imageAttachments: imageAttachments, onRemoveImageAttachment: onRemoveImageAttachment, footerStartControls: editingAppControl, footerControls: composerControls, submitDisabled: submitDisabled, slashCommands: slashCommands, onSlashCommandSelect: onSlashCommandSelect }) })] })] })] }) }));
+    }
     return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { children: isExpanded && !isMinimized && (_jsx(motion.div, { "data-moldable-chat-backdrop": true, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, className: "fixed inset-0 z-40 bg-black/20", onClick: () => onExpandedChange(false) })) }), _jsx(motion.div, { "data-moldable-chat-panel": true, initial: false, animate: {
                     width: isExpanded ? 'min(90vw, 640px)' : '400px',
                     y: isMinimized ? 'calc(100% + 24px)' : 0,
@@ -437,7 +470,7 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
                             } })), _jsxs("div", { className: "relative z-10 overflow-hidden rounded-[inherit]", children: [_jsxs(motion.div, { initial: false, animate: {
                                         height: isExpanded ? 'min(60vh, 480px)' : '0px',
                                         opacity: isExpanded ? 1 : 0,
-                                    }, transition: { type: 'tween', duration: 0.2, ease: 'easeOut' }, className: "flex flex-col overflow-hidden", style: { pointerEvents: isExpanded ? 'auto' : 'none' }, children: [_jsx("div", { className: "absolute right-3 top-3 z-20", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleMinimize, className: "text-muted-foreground hover:text-foreground cursor-pointer", children: _jsx(ChevronDown, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: "Minimize" }) })] }) }) }), _jsxs("div", { className: "relative min-h-0 min-w-0 flex-1", children: [_jsx(ScrollArea, { ref: scrollAreaRef, className: "h-full px-2", children: _jsx("div", { className: "min-w-0 max-w-full overflow-hidden py-4 pr-10", children: _jsx(ToolProgressProvider, { value: toolProgress, children: _jsx(ToolApprovalProvider, { onApprovalResponse: onApprovalResponse ?? null, children: viewportVersion > 0 ? (_jsx(Virtualizer, { ref: virtualizerRef, data: listItems, scrollRef: viewportRef, bufferSize: 300, children: (item) => renderVirtualItem(item) }, viewportVersion)) : (listItems.map((item) => (_jsx("div", { children: renderVirtualItem(item) }, item.key)))) }) }) }) }), !isAtBottom && listItems.length > 0 && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "secondary", size: "icon-sm", onClick: () => scrollToBottom(true), className: "absolute bottom-3 right-4 z-20 size-8 cursor-pointer rounded-full shadow-lg", children: _jsx(ArrowDown, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "top", children: "Scroll to bottom" })] }) }))] })] }), _jsxs("div", { className: "relative z-10", onClick: () => {
+                                    }, transition: { type: 'tween', duration: 0.2, ease: 'easeOut' }, className: "flex flex-col overflow-hidden", style: { pointerEvents: isExpanded ? 'auto' : 'none' }, children: [isExpanded && !isMinimized && (_jsxs("div", { className: "absolute right-2 top-2 z-20 grid grid-cols-1 gap-0.5", "data-moldable-chat-panel-controls": true, role: "toolbar", "aria-label": "Chat view controls", "aria-orientation": "vertical", children: [onFullScreenChange && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { ref: fullScreenTriggerRef, "data-moldable-chat-enter-fullscreen": true, variant: "ghost", size: "icon-sm", onClick: () => onFullScreenChange(true), "aria-label": "Enter full screen", className: "text-muted-foreground hover:text-foreground cursor-pointer", children: _jsx(Maximize2, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: "Full screen" })] }) })), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleMinimize, className: "text-muted-foreground hover:text-foreground cursor-pointer", children: _jsx(ChevronDown, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: "Minimize" }) })] }) })] })), _jsx(ChatMessageViewport, { items: listItems, renderItem: renderVirtualItem, toolProgress: toolProgress, onApprovalResponse: onApprovalResponse, currentConversationId: currentConversationId, scrollToBottomSignal: scrollToBottomSignal, isBusy: isResponding, hasOlderMessages: hasOlderMessages, isLoadingOlderMessages: isLoadingOlderMessages, onLoadOlderMessages: onLoadOlderMessages, scrollAreaClassName: "px-2", contentClassName: "w-full min-w-0 max-w-full overflow-hidden py-4 pr-12", scrollButtonClassName: "absolute bottom-3 left-auto right-4 z-20 size-8 translate-x-0 cursor-pointer rounded-full shadow-lg" }), authPromptCopy && (_jsx("div", { className: "shrink-0 px-4 pb-2", children: _jsx(ChatAuthPrompt, { copy: authPromptCopy, isConnecting: isConnectingChatGPT, onConnect: onConnectChatGPT ? handleConnectChatGPT : undefined, onAdvancedSetup: onAdvancedSetup }) }))] }), _jsxs("div", { className: "relative z-10", onClick: () => {
                                         if (!isExpanded) {
                                             onExpandedChange(true);
                                         }