@moldable-ai/ui 0.2.5 → 0.2.7

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

@@ -1,35 +1,55 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AlertCircle, ChevronDown, MessageCircle, Plus } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState, } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, ChevronDown, Code2, CornerDownRight, Image as ImageIcon, ListPlus, MessageCircle, X, } 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../ui/tooltip';
-import { ChatInput } from './chat-input';
-import { Messages } from './chat-messages';
+import { ChatInput, } from './chat-input';
+import { ThinkingMessage } from './chat-message';
+import { MessageRow, computeIsThinking, } from './chat-messages';
 import { ConversationHistory, } from './conversation-history';
 import { ModelSelector } from './model-selector';
 import { ReasoningEffortSelector, } from './reasoning-effort-selector';
 import { ToolApprovalProvider, } from './tool-approval-context';
 import { ToolProgressProvider } from './tool-progress-context';
 import { AnimatePresence, motion } from 'framer-motion';
+import { Virtualizer } from 'virtua';
 /**
  * Floating chat panel with model selector
  */
-export function ChatPanel({ messages, status, input, onInputChange, onSubmit, onStop, onNewChat, models, selectedModel, onModelChange, reasoningEffortOptions, selectedReasoningEffort, onReasoningEffortChange, conversations, currentConversationId, onSelectConversation, onDeleteConversation, placeholder = 'Ask anything...', welcomeMessage, isExpanded, onExpandedChange, isMinimized = false, onMinimizedChange, className, error, missingApiKey, onAddApiKey, toolProgress = {}, onApprovalResponse, }) {
+export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChange, onSubmit, onStop, onNewChat, models, selectedModel, onModelChange, reasoningEffortOptions, selectedReasoningEffort, onReasoningEffortChange, conversations, currentConversationId, onSelectConversation, onDeleteConversation, placeholder = 'Ask anything...', welcomeMessage, isExpanded, onExpandedChange, isMinimized = false, onMinimizedChange, className, error, missingApiKey, onAddApiKey, toolProgress = {}, onApprovalResponse, isEditingApp = true, onEditingAppChange, showEditingAppToggle = false, checkpoints, restoringMessageId, onRestoreCheckpoint, imageAttachments = [], onRemoveImageAttachment, isImageDropActive = false, queuedMessages = [], onRemoveQueuedMessage, onRetryQueuedMessage, onSteerQueuedMessage, }) {
     const inputRef = useRef(null);
-    const messagesEndRef = useRef(null);
     const scrollAreaRef = useRef(null);
+    const viewportRef = useRef(null);
+    const virtualizerRef = useRef(null);
+    const prevMessageCountRef = useRef(messages.length);
+    const scrollRafRef = useRef(null);
+    const [viewportVersion, setViewportVersion] = useState(0);
     const [isAtBottom, setIsAtBottom] = useState(true);
     const isResponding = status === 'streaming' || status === 'submitted';
-    // Track scroll position to detect if user is at bottom
+    const controlsDisabled = isTurnInFlight ?? isResponding;
+    const composerControls = (_jsxs(_Fragment, { children: [_jsx(ModelSelector, { models: models, selectedModel: selectedModel, onModelChange: onModelChange, disabled: controlsDisabled, dropdownAlign: "end", dropdownSide: "top" }), reasoningEffortOptions &&
+                selectedReasoningEffort &&
+                onReasoningEffortChange && (_jsx(ReasoningEffortSelector, { options: reasoningEffortOptions, selectedEffort: selectedReasoningEffort, onEffortChange: onReasoningEffortChange, disabled: controlsDisabled, showLabel: true, dropdownAlign: "end", dropdownSide: "top" }))] }));
+    // Capture the Radix viewport element so virtua can use it as the scroll container
     useEffect(() => {
         const scrollArea = scrollAreaRef.current;
         if (!scrollArea)
             return;
-        // Radix ScrollArea puts the viewport as first child element
         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 = () => {
@@ -38,9 +58,10 @@ export function ChatPanel({ messages, status, input, onInputChange, onSubmit, on
             const atBottom = scrollHeight - scrollTop - clientHeight < 50;
             setIsAtBottom(atBottom);
         };
+        handleScroll();
         viewport.addEventListener('scroll', handleScroll);
         return () => viewport.removeEventListener('scroll', handleScroll);
-    }, [isExpanded]);
+    }, [viewportVersion]);
     // Focus input when expanded
     useEffect(() => {
         if (isExpanded) {
@@ -50,18 +71,13 @@ export function ChatPanel({ messages, status, input, onInputChange, onSubmit, on
             return () => clearTimeout(timer);
         }
     }, [isExpanded]);
-    // Scroll to bottom on new messages only if user is already at bottom
-    useEffect(() => {
-        if (isExpanded && messagesEndRef.current && isAtBottom) {
-            messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
-        }
-    }, [messages, isExpanded, isAtBottom]);
-    const handleSubmit = useCallback((e) => {
+    const handleSubmit = useCallback((e, mode) => {
         e?.preventDefault();
-        if (!input.trim())
+        if (!input.trim() && imageAttachments.length === 0)
             return;
-        // If streaming, stop the current response first
-        if (isResponding && onStop) {
+        const submitMode = mode ?? (isResponding ? 'steer' : 'send');
+        // Steer interrupts the current response and sends the new instruction now.
+        if (submitMode === 'steer' && isResponding && onStop) {
             onStop();
         }
         if (!isExpanded) {
@@ -69,26 +85,44 @@ export function ChatPanel({ messages, status, input, onInputChange, onSubmit, on
         }
         // Reset to bottom when user sends a message
         setIsAtBottom(true);
-        onSubmit(e);
-    }, [input, isResponding, isExpanded, onExpandedChange, onSubmit, onStop]);
+        onSubmit(e, submitMode);
+    }, [
+        imageAttachments.length,
+        input,
+        isResponding,
+        isExpanded,
+        onExpandedChange,
+        onSubmit,
+        onStop,
+    ]);
     const handleNewChat = useCallback(() => {
         onNewChat?.();
         inputRef.current?.focus();
     }, [onNewChat]);
+    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)' }) })] }) }))] }));
     // 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 not currently streaming and panel is expanded
-                if (!isResponding && isExpanded) {
+                // Only create new chat if conversation controls are currently available.
+                if (!controlsDisabled && isExpanded) {
                     handleNewChat();
                 }
             }
         };
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [isResponding, isExpanded, handleNewChat]);
+    }, [controlsDisabled, isExpanded, handleNewChat]);
     // Handle clicking the minimized flap
     const handleFlapClick = useCallback(() => {
         onMinimizedChange?.(false);
@@ -100,11 +134,110 @@ export function ChatPanel({ messages, status, input, onInputChange, onSubmit, on
         }
         onMinimizedChange?.(true);
     }, [isExpanded, onExpandedChange, onMinimizedChange]);
+    const isStreaming = status === 'streaming' || status === 'submitted';
+    const isThinking = useMemo(() => computeIsThinking(messages, status), [messages, status]);
+    const showMissingApiKeyPrompt = missingApiKey ||
+        (error &&
+            (error.message?.includes('API_KEY not configured') ||
+                error.message?.includes('credential required in Vault') ||
+                error.message?.includes('credential not configured in Vault')));
+    const showErrorMessage = Boolean(error) && status === 'error' && !showMissingApiKeyPrompt;
+    const lastMessageId = messages[messages.length - 1]?.id;
+    const listItems = useMemo(() => {
+        const items = [];
+        if (messages.length === 0 && welcomeMessage) {
+            items.push({ key: 'welcome', kind: 'welcome' });
+        }
+        for (const message of messages) {
+            items.push({ key: message.id, kind: 'message', message });
+        }
+        if (isThinking) {
+            items.push({ key: 'thinking', kind: 'thinking' });
+        }
+        if (showMissingApiKeyPrompt) {
+            items.push({ key: 'missing-api-key', kind: 'missing-api-key' });
+        }
+        if (showErrorMessage) {
+            items.push({ key: 'error', kind: 'error' });
+        }
+        return items;
+    }, [
+        isThinking,
+        messages,
+        showErrorMessage,
+        showMissingApiKeyPrompt,
+        welcomeMessage,
+    ]);
+    const renderVirtualItem = useCallback((item) => {
+        switch (item.kind) {
+            case 'welcome':
+                return (_jsx("div", { className: "px-2 pb-4", children: messages.length === 0 && welcomeMessage && (_jsx("div", { className: "bg-muted/50 text-muted-foreground mx-2 rounded-2xl p-4 text-sm", children: welcomeMessage })) }));
+            case 'message': {
+                const checkpoint = checkpoints?.get(item.message.id);
+                return (_jsx("div", { className: "px-2 pb-4", children: _jsx(MessageRow, { message: item.message, isLast: item.message.id === lastMessageId, isStreaming: isStreaming, checkpoint: checkpoint, restoringMessageId: restoringMessageId, onRestoreCheckpoint: onRestoreCheckpoint }) }));
+            }
+            case 'thinking':
+                return (_jsx("div", { className: "px-2 pb-4", children: _jsx(ThinkingMessage, {}) }));
+            case 'missing-api-key':
+                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", { children: [_jsx("p", { className: "text-foreground font-medium", children: "API key required" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Add an API key to Vault to start chatting with AI" })] }), onAddApiKey && (_jsx(Button, { onClick: onAddApiKey, size: "sm", className: "cursor-pointer", children: "Add API key" }))] }) }));
+            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' })] })] })) }));
+        }
+    }, [
+        checkpoints,
+        error,
+        isStreaming,
+        lastMessageId,
+        messages.length,
+        onAddApiKey,
+        onRestoreCheckpoint,
+        restoringMessageId,
+        welcomeMessage,
+    ]);
+    // 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;
+        }
+        const lastIndex = listItems.length - 1;
+        if (lastIndex < 0)
+            return;
+        if (scrollRafRef.current !== null) {
+            cancelAnimationFrame(scrollRafRef.current);
+        }
+        scrollRafRef.current = requestAnimationFrame(() => {
+            virtualizerRef.current?.scrollToIndex(lastIndex, {
+                align: 'end',
+                smooth: hasNewMessage,
+            });
+            scrollRafRef.current = null;
+        });
+        return () => {
+            if (scrollRafRef.current !== null) {
+                cancelAnimationFrame(scrollRafRef.current);
+                scrollRafRef.current = null;
+            }
+        };
+    }, [isAtBottom, isExpanded, listItems.length, messages.length]);
     return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { children: isExpanded && !isMinimized && (_jsx(motion.div, { 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(AnimatePresence, { children: isMinimized && (_jsx(motion.div, { initial: { y: 20, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: 20, opacity: 0 }, transition: { type: 'tween', duration: 0.2, ease: 'easeOut' }, className: "fixed bottom-0 left-[calc(50%+var(--sidebar-width,0px)/2)] z-50 -translate-x-1/2", children: _jsxs("button", { onClick: handleFlapClick, className: cn('bg-background/95 hover:bg-background group flex cursor-pointer items-center gap-2 rounded-t-xl border border-b-0 px-4 py-2 shadow-lg backdrop-blur transition-colors', 'text-muted-foreground hover:text-foreground'), children: [_jsx(MessageCircle, { className: "size-4" }), _jsx("span", { className: "text-sm font-medium", children: "Chat" }), _jsx("span", { className: "bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary rounded px-1.5 py-0.5 text-xs transition-colors", children: "\u2318M" })] }) })) }), _jsx(motion.div, { initial: false, animate: {
                     width: isExpanded ? 'min(90vw, 640px)' : '400px',
                     y: isMinimized ? 'calc(100% + 24px)' : 0,
                     opacity: isMinimized ? 0 : 1,
-                }, transition: { type: 'tween', duration: 0.25, ease: 'easeOut' }, className: cn('pointer-events-none fixed bottom-6 left-[calc(50%+var(--sidebar-width,0px)/2)] z-50 flex -translate-x-1/2 justify-center', isMinimized && 'pointer-events-none', className), children: _jsxs("div", { className: cn('bg-background pointer-events-auto relative w-full border shadow-lg', 'supports-[backdrop-filter]:bg-background/95 backdrop-blur', 'rounded-4xl', isExpanded ? 'overflow-hidden' : 'overflow-visible'), children: [!isExpanded && (_jsx(motion.div, { className: "rounded-4xl pointer-events-none absolute inset-0 z-0", animate: {
+                }, transition: { type: 'tween', duration: 0.25, ease: 'easeOut' }, className: cn('pointer-events-none fixed bottom-6 left-[calc(50%+var(--sidebar-width,0px)/2)] z-50 flex -translate-x-1/2 justify-center', isMinimized && 'pointer-events-none', className), children: _jsxs("div", { "data-chat-drop-target": true, className: cn('bg-background/80 pointer-events-auto relative w-full shadow-[0_8px_40px_-12px_rgba(0,0,0,0.15)]', isExpanded
+                        ? 'bg-background'
+                        : 'bg-background/80 supports-[backdrop-filter]:backdrop-blur-xl', 'rounded-[28px]', isExpanded ? 'overflow-hidden' : 'overflow-visible'), children: [!isExpanded && (_jsx("div", { className: "pointer-events-none absolute inset-0 z-0 rounded-[inherit]", style: {
+                                background: 'linear-gradient(134deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 50%, transparent 55%)',
+                            } })), isImageDropActive && (_jsxs("div", { className: "bg-background/90 border-primary/50 text-foreground absolute inset-0 z-[70] 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" })] })] })), _jsx("div", { className: "pointer-events-none absolute inset-0 z-50 rounded-[inherit]", style: {
+                                padding: '1px',
+                                background: 'linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.25) 100%)',
+                                mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                                WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                                maskComposite: 'exclude',
+                                WebkitMaskComposite: 'xor',
+                            } }), !isExpanded && (_jsx(motion.div, { className: "rounded-4xl pointer-events-none absolute inset-0 z-0", animate: {
                                 boxShadow: [
                                     '0 0 0px 0px color-mix(in oklch, var(--primary) 0%, #ff8800 00%)',
                                     '0 0 20px 0px color-mix(in oklch, var(--primary) 20%, #ff8800 30%)',
@@ -118,17 +251,21 @@ export function ChatPanel({ messages, status, input, onInputChange, onSubmit, on
                             } })), _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: "relative z-10 flex flex-col overflow-hidden", style: { pointerEvents: isExpanded ? 'auto' : 'none' }, children: [_jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ModelSelector, { models: models, selectedModel: selectedModel, onModelChange: onModelChange, disabled: isResponding }), reasoningEffortOptions &&
-                                                    selectedReasoningEffort &&
-                                                    onReasoningEffortChange && (_jsx(ReasoningEffortSelector, { options: reasoningEffortOptions, selectedEffort: selectedReasoningEffort, onEffortChange: onReasoningEffortChange, disabled: isResponding }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [conversations &&
-                                                    conversations.length > 0 &&
-                                                    onSelectConversation && (_jsx(ConversationHistory, { conversations: conversations, currentConversationId: currentConversationId, onSelect: onSelectConversation, onDelete: onDeleteConversation, disabled: isResponding })), _jsxs(TooltipProvider, { children: [messages.length > 0 && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleNewChat, disabled: isResponding, className: "text-muted-foreground hover:text-foreground", children: _jsx(Plus, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: "New chat" }) })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleMinimize, className: "text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: "Minimize" }) })] })] })] })] }), _jsx(ScrollArea, { ref: scrollAreaRef, className: "min-w-0 flex-1 px-2", children: _jsxs("div", { className: "min-w-0 max-w-full space-y-4 overflow-hidden py-4", children: [messages.length === 0 && welcomeMessage && (_jsx("div", { className: "bg-muted/50 text-muted-foreground mx-2 rounded-2xl p-4 text-sm", children: welcomeMessage })), _jsx(ToolProgressProvider, { value: toolProgress, children: _jsx(ToolApprovalProvider, { onApprovalResponse: onApprovalResponse ?? null, children: _jsx(Messages, { messages: messages, status: status }) }) }), (missingApiKey ||
-                                                (error &&
-                                                    error.message?.includes('API_KEY not configured'))) && (_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", { children: [_jsx("p", { className: "text-foreground font-medium", children: "API key required" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Add an API key to start chatting with AI" })] }), onAddApiKey && (_jsx(Button, { onClick: onAddApiKey, size: "sm", className: "cursor-pointer", children: "Add API key" }))] })), error &&
-                                                status === 'error' &&
-                                                !error.message?.includes('API_KEY not configured') && (_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' })] })] })), _jsx("div", { ref: messagesEndRef })] }) })] }), _jsx("div", { className: "relative z-10", onClick: () => {
+                            }, transition: { type: 'tween', duration: 0.2, ease: 'easeOut' }, className: "relative z-10 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" }) })] }) }) }), _jsx(ScrollArea, { ref: scrollAreaRef, className: "min-h-0 min-w-0 flex-1 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)))) }) }) }) })] }), _jsxs("div", { className: "relative z-10", onClick: () => {
                                 if (!isExpanded) {
                                     onExpandedChange(true);
                                 }
-                            }, children: _jsx(ChatInput, { input: input, onInputChange: onInputChange, onSubmit: handleSubmit, isResponding: isResponding, placeholder: placeholder, inputRef: inputRef, onStop: onStop, compact: !isExpanded }) })] }) })] }));
+                            }, children: [queuedMessages.length > 0 && (_jsxs("div", { className: "border-border/70 bg-background/95 border-t px-4 py-2", 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("div", { className: "space-y-1.5", children: queuedMessages.map((message) => (_jsxs("div", { className: "bg-muted/60 text-foreground flex min-h-9 items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [message.preview, message.attachmentCount > 0 &&
+                                                                ` (${message.attachmentCount} image${message.attachmentCount === 1 ? '' : 's'})`] }), message.status === 'failed' &&
+                                                        message.error &&
+                                                        onRetryQueuedMessage && (_jsxs("button", { type: "button", onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            onRetryQueuedMessage(message.id);
+                                                        }, className: "text-muted-foreground hover:bg-accent hover:text-foreground flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-2 text-xs transition-colors", "aria-label": "Retry queued follow-up", children: [_jsx(CornerDownRight, { className: "size-3.5" }), _jsx("span", { children: "Retry" })] })), isResponding && onSteerQueuedMessage && (_jsxs("button", { type: "button", onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            onSteerQueuedMessage(message.id);
+                                                        }, className: "text-muted-foreground hover:bg-accent hover:text-foreground flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-2 text-xs transition-colors", "aria-label": "Steer active response with queued follow-up", children: [_jsx(CornerDownRight, { className: "size-3.5" }), _jsx("span", { children: "Steer" })] })), onRemoveQueuedMessage && (_jsx("button", { type: "button", onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            onRemoveQueuedMessage(message.id);
+                                                        }, className: "text-muted-foreground hover:bg-accent hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors", "aria-label": "Remove queued follow-up", children: _jsx(X, { className: "size-3.5" }) }))] }, message.id))) })] })), _jsx(ChatInput, { input: input, onInputChange: onInputChange, onSubmit: handleSubmit, isResponding: isResponding, placeholder: placeholder, inputRef: inputRef, onStop: onStop, compact: !isExpanded, imageAttachments: imageAttachments, onRemoveImageAttachment: onRemoveImageAttachment, footerStartControls: isExpanded ? composerStartControls : null, footerControls: isExpanded ? composerControls : null })] })] }) })] }));
 }

package/dist/components/chat/checkpoint-badge.d.ts

@@ -0,0 +1,20 @@
+export interface CheckpointBadgeProps {
+    /** Message ID this checkpoint belongs to */
+    messageId: string;
+    /** Number of files in the checkpoint */
+    fileCount: number;
+    /** Total bytes of the checkpoint */
+    totalBytes?: number;
+    /** Whether a restore is in progress */
+    isRestoring?: boolean;
+    /** Callback when restore is requested */
+    onRestore: () => void;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Badge shown on messages that have a checkpoint restore point.
+ * Clicking triggers the restore confirmation dialog.
+ */
+export declare function CheckpointBadge({ isRestoring, onRestore, className, }: CheckpointBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkpoint-badge.d.ts.map

package/dist/components/chat/checkpoint-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkpoint-badge.d.ts","sourceRoot":"","sources":["../../../src/components/chat/checkpoint-badge.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,oBAAoB;IACnC,4CAA4C;IAC5C,SAAS,EAAE,MAAM,CAAA;IACjB,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAA;IACjB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yCAAyC;IACzC,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,SAAS,EACT,SAAS,GACV,EAAE,oBAAoB,2CAiCtB"}

package/dist/components/chat/checkpoint-badge.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { History, Loader2 } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../ui/tooltip';
+/**
+ * Badge shown on messages that have a checkpoint restore point.
+ * Clicking triggers the restore confirmation dialog.
+ */
+export function CheckpointBadge({ isRestoring, onRestore, className, }) {
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: (e) => {
+                            e.stopPropagation();
+                            onRestore();
+                        }, disabled: isRestoring, className: cn('text-muted-foreground hover:text-foreground hover:bg-muted/50 size-6', !isRestoring && 'cursor-pointer', isRestoring && 'cursor-wait', className), children: isRestoring ? (_jsx(Loader2, { className: "size-3.5 animate-spin" })) : (_jsx(History, { className: "size-3.5" })) }) }), _jsx(TooltipContent, { side: "top", children: _jsx("p", { children: "Undo all changes from this point onwards" }) })] }) }));
+}

package/dist/components/chat/conversation-history.d.ts

@@ -10,9 +10,14 @@ interface ConversationHistoryProps {
     currentConversationId?: string | null;
     onSelect: (id: string) => void;
     onDelete?: (id: string) => void;
+    onNewChat?: () => void;
+    newChatDisabled?: boolean;
     disabled?: boolean;
     className?: string;
+    dropdownAlign?: 'start' | 'center' | 'end';
+    dropdownSide?: 'top' | 'right' | 'bottom' | 'left';
+    tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
 }
-export declare function ConversationHistory({ conversations, currentConversationId, onSelect, onDelete, disabled, className, }: ConversationHistoryProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ConversationHistory({ conversations, currentConversationId, onSelect, onDelete, onNewChat, newChatDisabled, disabled, className, dropdownAlign, dropdownSide, tooltipSide, }: ConversationHistoryProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=conversation-history.d.ts.map

package/dist/components/chat/conversation-history.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-history.d.ts","sourceRoot":"","sources":["../../../src/components/chat/conversation-history.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,UAAU,wBAAwB;IAChC,aAAa,EAAE,gBAAgB,EAAE,CAAA;IACjC,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiBD,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,qBAAqB,EACrB,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,SAAS,GACV,EAAE,wBAAwB,kDAsE1B"}
+{"version":3,"file":"conversation-history.d.ts","sourceRoot":"","sources":["../../../src/components/chat/conversation-history.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,UAAU,wBAAwB;IAChC,aAAa,EAAE,gBAAgB,EAAE,CAAA;IACjC,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAC1C,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;CAClD;AAiBD,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,qBAAqB,EACrB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,QAAgB,EAChB,SAAS,EACT,aAAuB,EACvB,YAAuB,EACvB,WAAsB,GACvB,EAAE,wBAAwB,kDA6F1B"}

package/dist/components/chat/conversation-history.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Clock, Trash2 } from 'lucide-react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Clock, Plus, Trash2 } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from '../ui/dropdown-menu';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../ui/tooltip';
 function formatRelativeTime(dateStr) {
     const date = new Date(dateStr);
@@ -21,11 +21,11 @@ function formatRelativeTime(dateStr) {
         return `${diffDays}d ago`;
     return date.toLocaleDateString();
 }
-export function ConversationHistory({ conversations, currentConversationId, onSelect, onDelete, disabled = false, className, }) {
-    if (conversations.length === 0) {
+export function ConversationHistory({ conversations, currentConversationId, onSelect, onDelete, onNewChat, newChatDisabled = false, disabled = false, className, dropdownAlign = 'start', dropdownSide = 'bottom', tooltipSide = 'bottom', }) {
+    if (conversations.length === 0 && !onNewChat) {
         return null;
     }
-    return (_jsx(TooltipProvider, { children: _jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", disabled: disabled, className: cn('text-muted-foreground hover:text-foreground', className), children: _jsx(Clock, { className: "size-4" }) }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: "Conversation history" }) })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [_jsx("div", { className: "text-muted-foreground px-2 py-1.5 text-xs font-medium", children: "Recent conversations" }), _jsx(DropdownMenuSeparator, {}), _jsx("div", { className: "max-h-64 overflow-y-auto", children: conversations.slice(0, 20).map((conv) => (_jsxs(DropdownMenuItem, { onClick: () => onSelect(conv.id), className: cn('group flex cursor-pointer items-start gap-2 py-2', conv.id === currentConversationId && 'bg-accent'), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm", children: conv.title }), _jsxs("p", { className: "text-muted-foreground text-xs", children: [formatRelativeTime(conv.updatedAt), " \u00B7 ", conv.messageCount, ' ', "messages"] })] }), onDelete && (_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: (e) => {
+    return (_jsx(TooltipProvider, { children: _jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", disabled: disabled, className: cn('text-muted-foreground hover:text-foreground cursor-pointer', className), children: _jsx(Clock, { className: "size-4" }) }) }) }), _jsx(TooltipContent, { side: tooltipSide, children: _jsx("p", { children: "Conversation history" }) })] }), _jsxs(DropdownMenuContent, { align: dropdownAlign, side: dropdownSide, className: "w-64", children: [onNewChat && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onClick: onNewChat, disabled: newChatDisabled, title: "New conversation (Cmd+Shift+O)", className: "flex cursor-pointer items-center gap-2", children: [_jsx(Plus, { className: "size-4" }), _jsx("span", { children: "New conversation" }), _jsx(DropdownMenuShortcut, { children: "\u2318\u21E7O" })] }), conversations.length > 0 && _jsx(DropdownMenuSeparator, {})] })), conversations.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground px-2 py-1.5 text-xs font-medium", children: "Recent conversations" }), _jsx(DropdownMenuSeparator, {})] })), _jsx("div", { className: "max-h-64 overflow-y-auto", children: conversations.slice(0, 20).map((conv) => (_jsxs(DropdownMenuItem, { onClick: () => onSelect(conv.id), className: cn('group flex cursor-pointer items-start gap-2 py-2', conv.id === currentConversationId && 'bg-accent'), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm", children: conv.title }), _jsxs("p", { className: "text-muted-foreground text-xs", children: [formatRelativeTime(conv.updatedAt), " \u00B7 ", conv.messageCount, ' ', "messages"] })] }), onDelete && (_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: (e) => {
                                             e.stopPropagation();
                                             onDelete(conv.id);
                                         }, className: "text-muted-foreground hover:text-destructive size-6 shrink-0 opacity-0 group-hover:opacity-100", children: _jsx(Trash2, { className: "size-3" }) }))] }, conv.id))) })] })] }) }));

package/dist/components/chat/index.d.ts

@@ -1,10 +1,12 @@
-export { ChatInput } from './chat-input';
+export { ChatInput, type ChatImageAttachment, type ChatSubmitMode, } from './chat-input';
 export { Message, ThinkingMessage, type ChatMessage, type ChatMessagePart, } from './chat-message';
-export { Messages } from './chat-messages';
+export { Messages, type MessageCheckpoint } from './chat-messages';
+export { CheckpointBadge, type CheckpointBadgeProps } from './checkpoint-badge';
+export { RestoreDialog, type CheckpointInfo, type RestoreDialogProps, } from './restore-dialog';
 export { ModelSelector, type ModelOption } from './model-selector';
 export { ReasoningEffortSelector, type ReasoningEffortOption, } from './reasoning-effort-selector';
 export { ConversationHistory, type ConversationMeta, } from './conversation-history';
-export { ChatPanel, type ChatPanelProps, type ToolProgressData, } from './chat-panel';
+export { ChatPanel, type ChatPanelProps, type QueuedChatMessage, type ToolProgressData, } from './chat-panel';
 export { ThinkingTimeline, ThinkingTimelineMarker, type ThinkingTimelineItem, type ThinkingTimelineProps, } from './thinking-timeline';
 export { getToolHandler, DEFAULT_TOOL_HANDLERS, type ToolHandler, } from './tool-handlers';
 export { ToolProgressProvider, useToolProgress, useToolCallProgress, } from './tool-progress-context';

package/dist/components/chat/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EACL,OAAO,EACP,eAAe,EACf,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EACL,uBAAuB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,mBAAmB,EACnB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,gBAAgB,GACtB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,KAAK,WAAW,GACjB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACpB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,mBAAmB,EACxB,KAAK,cAAc,GACpB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,OAAO,EACP,eAAe,EACf,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC/E,OAAO,EACL,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EACL,uBAAuB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,mBAAmB,EACnB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,KAAK,WAAW,GACjB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACpB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAA"}

package/dist/components/chat/index.js

@@ -1,6 +1,8 @@
-export { ChatInput } from './chat-input';
+export { ChatInput, } from './chat-input';
 export { Message, ThinkingMessage, } from './chat-message';
 export { Messages } from './chat-messages';
+export { CheckpointBadge } from './checkpoint-badge';
+export { RestoreDialog, } from './restore-dialog';
 export { ModelSelector } from './model-selector';
 export { ReasoningEffortSelector, } from './reasoning-effort-selector';
 export { ConversationHistory, } from './conversation-history';

package/dist/components/chat/markdown.d.ts

@@ -0,0 +1,9 @@
+type MarkdownProps = {
+    markdown: string;
+    className?: string;
+    proseSize?: 'sm' | 'base' | 'lg';
+};
+declare function NonMemoizedMarkdown({ markdown, className, proseSize }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+export declare const Markdown: import("react").MemoExoticComponent<typeof NonMemoizedMarkdown>;
+export {};
+//# sourceMappingURL=markdown.d.ts.map

package/dist/components/chat/markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../src/components/chat/markdown.tsx"],"names":[],"mappings":"AAMA,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;CACjC,CAAA;AAwFD,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAgB,EAAE,EAAE,aAAa,2CAyBpF;AAED,eAAO,MAAM,QAAQ,iEAMpB,CAAA"}

package/dist/components/chat/markdown.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { cn } from '../../lib/utils';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+const components = {
+    img({ src, alt }) {
+        if (!src)
+            return null;
+        return (_jsx("span", { className: "flex justify-center", children: _jsx("img", { src: src, alt: alt ?? '', className: "h-auto max-w-full rounded-lg" }) }));
+    },
+    table({ children }) {
+        return (_jsx("table", { className: "border-collapse border px-3 py-1", children: children }));
+    },
+    th({ children }) {
+        return (_jsx("th", { className: "bg-muted border px-3 py-1 break-words", children: children }));
+    },
+    td({ children }) {
+        return _jsx("td", { className: "border px-3 py-1 break-words", children: children });
+    },
+    ol: ({ children, ...props }) => (_jsx("ol", { className: "ml-4 list-outside list-decimal", ...props, children: children })),
+    ul: ({ children, ...props }) => (_jsx("ul", { className: "ml-4 list-outside list-disc", ...props, children: children })),
+    li: ({ children, ...props }) => (_jsx("li", { className: "py-1", ...props, children: children })),
+    strong: ({ children, ...props }) => (_jsx("span", { className: "font-semibold", ...props, children: children })),
+    a: ({ children, href, ...props }) => (_jsx("a", { className: "font-bold hover:underline", href: href ?? '#', target: "_blank", rel: "noreferrer", ...props, children: children })),
+    pre: ({ children, ...props }) => (_jsx("pre", { className: "overflow-x-auto rounded-lg bg-muted/50 p-3 text-sm", ...props, children: children })),
+    code: ({ children, className, ...props }) => {
+        // Check if this is an inline code block (no className means inline)
+        const isInline = !className;
+        if (isInline) {
+            return (_jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 text-sm font-mono", ...props, children: children }));
+        }
+        return (_jsx("code", { className: cn('font-mono text-sm', className), ...props, children: children }));
+    },
+};
+function NonMemoizedMarkdown({ markdown, className, proseSize = 'sm' }) {
+    const proseSizeClass = {
+        sm: 'prose-sm',
+        base: 'prose-base',
+        lg: 'prose-lg',
+    }[proseSize];
+    return (_jsx("div", { className: cn('prose w-full max-w-none dark:prose-invert', proseSizeClass, 'text-foreground', className), children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw], components: components, children: markdown }) }));
+}
+export const Markdown = memo(NonMemoizedMarkdown, (prevProps, nextProps) => prevProps.markdown === nextProps.markdown &&
+    prevProps.className === nextProps.className &&
+    prevProps.proseSize === nextProps.proseSize);

package/dist/components/chat/model-selector.d.ts

@@ -10,7 +10,9 @@ type ModelSelectorProps = {
     onModelChange: (modelId: string) => void;
     disabled?: boolean;
     className?: string;
+    dropdownAlign?: 'start' | 'center' | 'end';
+    dropdownSide?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function ModelSelector({ models, selectedModel, onModelChange, disabled, className, }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModelSelector({ models, selectedModel, onModelChange, disabled, className, dropdownAlign, dropdownSide, }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=model-selector.d.ts.map

package/dist/components/chat/model-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model-selector.d.ts","sourceRoot":"","sources":["../../../src/components/chat/model-selector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUtC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,aAAa,EACb,aAAa,EACb,QAAgB,EAChB,SAAS,GACV,EAAE,kBAAkB,2CAqCpB"}
+{"version":3,"file":"model-selector.d.ts","sourceRoot":"","sources":["../../../src/components/chat/model-selector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUtC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAC1C,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;CACnD,CAAA;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,aAAa,EACb,aAAa,EACb,QAAgB,EAChB,SAAS,EACT,aAAuB,EACvB,YAAuB,GACxB,EAAE,kBAAkB,2CAyCpB"}

package/dist/components/chat/model-selector.js

@@ -3,7 +3,7 @@ import { Check, ChevronDown } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../ui/dropdown-menu';
-export function ModelSelector({ models, selectedModel, onModelChange, disabled = false, className, }) {
+export function ModelSelector({ models, selectedModel, onModelChange, disabled = false, className, dropdownAlign = 'start', dropdownSide = 'bottom', }) {
     const currentModel = models.find((m) => m.id === selectedModel) ?? models[0];
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", disabled: disabled, className: cn('text-muted-foreground hover:text-foreground h-7 gap-1.5 rounded-full px-2.5 text-xs font-medium', className), children: [_jsx("span", { children: currentModel?.icon }), _jsx("span", { children: currentModel?.name }), _jsx(ChevronDown, { className: "size-3 opacity-50" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-[160px]", children: models.map((model) => (_jsxs(DropdownMenuItem, { onClick: () => onModelChange(model.id), className: "flex items-center gap-2", children: [_jsx("span", { children: model.icon }), _jsx("span", { className: "flex-1", children: model.name }), model.id === selectedModel && (_jsx(Check, { className: "text-primary size-4" }))] }, model.id))) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", disabled: disabled, className: cn('text-muted-foreground hover:text-foreground h-8 min-w-0 max-w-[180px] cursor-pointer gap-1.5 rounded-full px-2.5 text-xs font-medium', className), children: [_jsx("span", { children: currentModel?.icon }), _jsx("span", { className: "min-w-0 truncate", children: currentModel?.name }), _jsx(ChevronDown, { className: "size-3 opacity-50" })] }) }), _jsx(DropdownMenuContent, { align: dropdownAlign, side: dropdownSide, className: "min-w-[160px]", children: models.map((model) => (_jsxs(DropdownMenuItem, { onClick: () => onModelChange(model.id), className: "flex cursor-pointer items-center gap-2", children: [_jsx("span", { children: model.icon }), _jsx("span", { className: "flex-1", children: model.name }), model.id === selectedModel && (_jsx(Check, { className: "text-primary size-4" }))] }, model.id))) })] }));
 }

package/dist/components/chat/reasoning-effort-selector.d.ts

@@ -8,7 +8,10 @@ type ReasoningEffortSelectorProps = {
     onEffortChange: (effort: string) => void;
     disabled?: boolean;
     className?: string;
+    showLabel?: boolean;
+    dropdownAlign?: 'start' | 'center' | 'end';
+    dropdownSide?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function ReasoningEffortSelector({ options, selectedEffort, onEffortChange, disabled, className, }: ReasoningEffortSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReasoningEffortSelector({ options, selectedEffort, onEffortChange, disabled, className, showLabel, dropdownAlign, dropdownSide, }: ReasoningEffortSelectorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=reasoning-effort-selector.d.ts.map

package/dist/components/chat/reasoning-effort-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reasoning-effort-selector.d.ts","sourceRoot":"","sources":["../../../src/components/chat/reasoning-effort-selector.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,qBAAqB,EAAE,CAAA;IAChC,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,EACP,cAAc,EACd,cAAc,EACd,QAAgB,EAChB,SAAS,GACV,EAAE,4BAA4B,2CA6C9B"}
+{"version":3,"file":"reasoning-effort-selector.d.ts","sourceRoot":"","sources":["../../../src/components/chat/reasoning-effort-selector.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,qBAAqB,EAAE,CAAA;IAChC,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAC1C,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;CACnD,CAAA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,EACP,cAAc,EACd,cAAc,EACd,QAAgB,EAChB,SAAS,EACT,SAAiB,EACjB,aAAuB,EACvB,YAAuB,GACxB,EAAE,4BAA4B,2CAoD9B"}

package/dist/components/chat/reasoning-effort-selector.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Brain, Check } from 'lucide-react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Brain, Check, ChevronDown } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../ui/dropdown-menu';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../ui/tooltip';
-export function ReasoningEffortSelector({ options, selectedEffort, onEffortChange, disabled = false, className, }) {
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from '../ui/dropdown-menu';
+export function ReasoningEffortSelector({ options, selectedEffort, onEffortChange, disabled = false, className, showLabel = false, dropdownAlign = 'start', dropdownSide = 'bottom', }) {
     const currentOption = options.find((o) => o.value === selectedEffort) ?? options[1]; // Default to medium
-    return (_jsx(TooltipProvider, { children: _jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", disabled: disabled, className: cn('text-muted-foreground hover:text-foreground', className), children: _jsx(Brain, { className: "size-4" }) }) }) }), _jsx(TooltipContent, { side: "bottom", children: _jsxs("p", { children: ["Reasoning: ", currentOption?.label] }) })] }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-[140px]", children: options.map((option) => (_jsxs(DropdownMenuItem, { onClick: () => onEffortChange(option.value), className: "flex items-center gap-2", children: [_jsx(Brain, { className: "text-muted-foreground size-3.5" }), _jsx("span", { className: "flex-1", children: option.label }), option.value === selectedEffort && (_jsx(Check, { className: "text-primary size-4" }))] }, option.value))) })] }) }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", disabled: disabled, className: cn('text-muted-foreground hover:text-foreground cursor-pointer', showLabel &&
+                        'h-8 w-auto gap-1.5 rounded-full px-3 text-xs font-medium', className), children: showLabel ? (_jsxs(_Fragment, { children: [_jsx("span", { children: currentOption?.label }), _jsx(ChevronDown, { className: "size-3 opacity-50" })] })) : (_jsx(Brain, { className: "size-4" })) }) }), _jsxs(DropdownMenuContent, { align: dropdownAlign, side: dropdownSide, className: "min-w-[140px]", children: [_jsx(DropdownMenuLabel, { className: "text-muted-foreground font-normal", children: "Reasoning" }), options.map((option) => (_jsxs(DropdownMenuItem, { onClick: () => onEffortChange(option.value), className: "flex cursor-pointer items-center gap-2", children: [!showLabel && _jsx(Brain, { className: "text-muted-foreground size-3.5" }), _jsx("span", { className: "flex-1", children: option.label }), option.value === selectedEffort && (_jsx(Check, { className: "text-primary size-4" }))] }, option.value)))] })] }));
 }