@moldable-ai/ui 0.2.8 → 0.2.10

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

@@ -1,36 +1,102 @@
 'use client';
-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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertCircle, ArrowDown, ChevronDown, ClipboardList, Code2, CornerDownRight, GripVertical, Image as ImageIcon, ListPlus, MessageCircle, Pencil, 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../ui/tooltip';
 import { ChatInput, } from './chat-input';
-import { ThinkingMessage } from './chat-message';
+import { CompactingMessage, 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 { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
+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';
+function clampPercent(value) {
+    if (!Number.isFinite(value))
+        return 0;
+    return Math.max(0, Math.min(100, value));
+}
+function formatTokenCount(tokens) {
+    if (tokens < 1_000)
+        return `${tokens}`;
+    if (tokens < 1_000_000)
+        return `${Math.round(tokens / 1_000)}k`;
+    const millions = tokens / 1_000_000;
+    return `${Number.isInteger(millions) ? millions.toFixed(0) : millions.toFixed(2)}M`;
+}
+function ContextWindowIndicator({ usage }) {
+    if (!usage || usage.maxTokens <= 0)
+        return null;
+    const usedPercent = clampPercent(Math.round((usage.usedTokens / usage.maxTokens) * 100));
+    const ringColor = usedPercent >= 90
+        ? 'var(--destructive)'
+        : 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: {
+                            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" }))] })] }));
+}
+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" })] }) }));
+}
+function QueuedMessageRow({ message, isResponding, onRetryQueuedMessage, onSteerQueuedMessage, onRemoveQueuedMessage, onEditQueuedMessage, }) {
+    const isSteering = message.status === 'steering';
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: message.id, disabled: isSteering });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (_jsxs("div", { ref: setNodeRef, style: style, className: cn('bg-muted/60 text-foreground flex min-h-9 items-center gap-2 rounded-lg px-2 py-1.5 text-xs', isDragging && 'relative z-20 opacity-80 shadow-lg'), children: [_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-grab items-center justify-center rounded-md transition-colors active:cursor-grabbing disabled:cursor-not-allowed disabled:opacity-40", "aria-label": "Reorder queued follow-up", disabled: isSteering, ...attributes, ...listeners, children: _jsx(GripVertical, { className: "size-3.5" }) }), _jsxs("span", { className: "min-w-0 flex-1 truncate", children: [message.preview, message.attachmentCount > 0 &&
+                        ` (${message.attachmentCount} image${message.attachmentCount === 1 ? '' : 's'})`] }), message.error && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: (event) => event.stopPropagation(), className: "text-destructive hover:bg-destructive/10 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors", "aria-label": "View queued follow-up error", children: _jsx(AlertCircle, { className: "size-3.5" }) }) }), _jsx(TooltipContent, { side: "top", className: "max-w-80", children: _jsx("p", { className: "break-words text-xs", children: message.error }) })] }) })), message.status === 'failed' && 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" })] })), isSteering && (_jsx("span", { className: "text-muted-foreground shrink-0 px-2 text-xs", children: "Steering" })), !isSteering && 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" })] })), !isSteering && onEditQueuedMessage && (_jsx("button", { type: "button", onClick: (event) => {
+                    event.stopPropagation();
+                    onEditQueuedMessage(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": "Edit queued follow-up", children: _jsx(Pencil, { className: "size-3.5" }) })), !isSteering && onRemoveQueuedMessage && (_jsx("button", { type: "button", onClick: (event) => {
+                    event.stopPropagation();
+                    onRemoveQueuedMessage(message.id);
+                }, className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors", "aria-label": "Remove queued follow-up", children: _jsx(Trash2, { className: "size-3.5" }) }))] }));
+}
 /**
  * Floating chat panel with model selector
  */
-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, }) {
+export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChange, onSubmit, onStop, onNewChat, models, selectedModel, onModelChange, reasoningEffortOptions, selectedReasoningEffort, onReasoningEffortChange, conversations, currentConversationId, scrollToBottomSignal = 0, 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, onReorderQueuedMessages, onEditQueuedMessage, slashCommands, onSlashCommandSelect, isCompacting = false, compactedHistoryStartIndex, contextUsage, }) {
     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 queuedMessageIds = useMemo(() => queuedMessages.map((message) => message.id), [queuedMessages]);
+    const queueSensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 6,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
     const isResponding = status === 'streaming' || status === 'submitted';
     const controlsDisabled = isTurnInFlight ?? isResponding;
-    const composerControls = (_jsxs(_Fragment, { children: [_jsx(ModelSelector, { models: models, selectedModel: selectedModel, onModelChange: onModelChange, disabled: controlsDisabled, dropdownAlign: "end", dropdownSide: "top" }), reasoningEffortOptions &&
+    const composerControls = (_jsxs(_Fragment, { children: [_jsx(ContextWindowIndicator, { usage: contextUsage }), _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
@@ -88,10 +154,6 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
         if (!input.trim() && imageAttachments.length === 0)
             return;
         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) {
             onExpandedChange(true);
         }
@@ -105,9 +167,21 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
         isExpanded,
         onExpandedChange,
         onSubmit,
-        onStop,
         submitDisabled,
     ]);
+    const handleQueuedDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        onReorderQueuedMessages?.(String(active.id), String(over.id));
+    }, [onReorderQueuedMessages]);
+    const handleEditQueuedMessage = useCallback((id) => {
+        onEditQueuedMessage?.(id);
+        if (!isExpanded) {
+            onExpandedChange(true);
+        }
+        window.setTimeout(() => inputRef.current?.focus(), 0);
+    }, [isExpanded, onEditQueuedMessage, onExpandedChange]);
     const handleNewChat = useCallback(() => {
         onNewChat?.();
         inputRef.current?.focus();
@@ -156,12 +230,24 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
         if (messages.length === 0 && welcomeMessage) {
             items.push({ key: 'welcome', kind: 'welcome' });
         }
-        for (const message of messages) {
+        const shouldShowCompactedDivider = typeof compactedHistoryStartIndex === 'number' &&
+            compactedHistoryStartIndex >= 0 &&
+            compactedHistoryStartIndex < messages.length;
+        for (const [index, message] of messages.entries()) {
+            if (shouldShowCompactedDivider && index === compactedHistoryStartIndex) {
+                items.push({
+                    key: `context-compacted-${compactedHistoryStartIndex}`,
+                    kind: 'context-compacted-divider',
+                });
+            }
             items.push({ key: message.id, kind: 'message', message });
         }
         if (isThinking) {
             items.push({ key: 'thinking', kind: 'thinking' });
         }
+        if (isCompacting) {
+            items.push({ key: 'compacting', kind: 'compacting' });
+        }
         if (showMissingApiKeyPrompt) {
             items.push({ key: 'missing-api-key', kind: 'missing-api-key' });
         }
@@ -171,6 +257,8 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
         return items;
     }, [
         isThinking,
+        isCompacting,
+        compactedHistoryStartIndex,
         messages,
         showErrorMessage,
         showMissingApiKeyPrompt,
@@ -180,12 +268,16 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
         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 'context-compacted-divider':
+                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 }) }));
             }
             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 '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':
@@ -202,35 +294,71 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
         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 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: hasNewMessage,
+                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, 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: {
+    }, [isAtBottom, isExpanded, messages.length, scrollToBottom]);
+    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(AnimatePresence, { children: isMinimized && (_jsx(motion.div, { "data-moldable-chat-panel": true, 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, { "data-moldable-chat-panel": true, initial: false, animate: {
                     width: isExpanded ? 'min(90vw, 640px)' : '400px',
                     y: isMinimized ? 'calc(100% + 24px)' : 0,
                     opacity: isMinimized ? 0 : 1,
@@ -256,24 +384,12 @@ export function ChatPanel({ messages, status, isTurnInFlight, input, onInputChan
                                 repeat: Infinity,
                                 repeatDelay: 5,
                                 ease: [0.4, 0, 0.2, 1],
-                            } })), _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: [_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: [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, submitDisabled: submitDisabled })] })] }) })] }));
+                            } })), _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: () => {
+                                        if (!isExpanded) {
+                                            onExpandedChange(true);
+                                        }
+                                    }, 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(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(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, submitDisabled: submitDisabled, slashCommands: slashCommands, onSlashCommandSelect: onSlashCommandSelect })] })] })] }) })] }));
 }

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

@@ -1,12 +1,12 @@
-export { ChatInput, type ChatImageAttachment, type ChatSubmitMode, } from './chat-input';
-export { Message, ThinkingMessage, type ChatMessage, type ChatMessagePart, } from './chat-message';
+export { ChatInput, type ChatImageAttachment, type ChatSlashCommandOption, type ChatSubmitMode, } from './chat-input';
+export { CompactingMessage, Message, ThinkingMessage, type ChatMessage, type ChatMessagePart, } from './chat-message';
 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 QueuedChatMessage, type ToolProgressData, } from './chat-panel';
+export { ChatPanel, type ChatContextUsage, 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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC3B,KAAK,cAAc,GACpB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,iBAAiB,EACjB,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,gBAAgB,EACrB,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,5 +1,5 @@
 export { ChatInput, } from './chat-input';
-export { Message, ThinkingMessage, } from './chat-message';
+export { CompactingMessage, Message, ThinkingMessage, } from './chat-message';
 export { Messages } from './chat-messages';
 export { CheckpointBadge } from './checkpoint-badge';
 export { RestoreDialog, } from './restore-dialog';

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;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"}
+{"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,2CAwCpB"}

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

@@ -5,5 +5,5 @@ import { Button } from '../ui/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../ui/dropdown-menu';
 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-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))) })] }));
+    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 rounded-full px-2.5 text-xs font-medium', className), children: [_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/tool-handlers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-handlers.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-handlers.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAW5D,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAEtE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,SAAS,GAAG,UAAU,CAAA;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,OAAO,CAAA;CACd;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IAExB,YAAY,EAAE,MAAM,CAAA;IAEpB,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAE/B,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,SAAS,CAAA;IAGhE,aAAa,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,SAAS,CAAA;IAG7C,eAAe,CAAC,EAAE,CAChB,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,qBAAqB,KAC5B,SAAS,CAAA;IAGd,cAAc,CAAC,EAAE,CACf,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,uBAAuB,KAC/B,SAAS,CAAA;CACf,CAAA;AAoSD;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAg/D7D,CAAA;AAoBD;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAmC5D"}
+{"version":3,"file":"tool-handlers.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-handlers.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAW5D,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAEtE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,SAAS,GAAG,UAAU,CAAA;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,OAAO,CAAA;CACd;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IAExB,YAAY,EAAE,MAAM,CAAA;IAEpB,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAE/B,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,SAAS,CAAA;IAGhE,aAAa,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,SAAS,CAAA;IAG7C,eAAe,CAAC,EAAE,CAChB,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,qBAAqB,KAC5B,SAAS,CAAA;IAGd,cAAc,CAAC,EAAE,CACf,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,uBAAuB,KAC/B,SAAS,CAAA;CACf,CAAA;AAoSD;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAqvE7D,CAAA;AAoBD;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAmC5D"}

package/dist/components/chat/tool-handlers.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertTriangle, BookOpen, Check, CheckCheck, Copy, Database, Download, FileCode, FileText, FolderOpen, Globe, Info, Package, Plus, Search, Sparkles, Terminal, Trash2, X, } from 'lucide-react';
+import { AlertTriangle, BookOpen, Camera, Check, CheckCheck, Copy, Database, Download, FileCode, FileText, FolderOpen, Globe, Info, Package, Plus, Search, Sparkles, Terminal, Trash2, X, } from 'lucide-react';
 import { useState } from 'react';
 import { cn } from '../../lib/utils';
 import { ThinkingTimelineMarker } from './thinking-timeline';
@@ -108,6 +108,94 @@ function appApiItemCount(result) {
  * Default tool handlers for Moldable tools
  */
 export const DEFAULT_TOOL_HANDLERS = {
+    viewImage: {
+        loadingLabel: 'Viewing image...',
+        marker: ThinkingTimelineMarker.Default,
+        inline: false,
+        renderLoading: (args) => {
+            const { imagePath } = (args ?? {});
+            return (_jsx(LoadingIndicator, { icon: Sparkles, children: imagePath
+                    ? `Viewing ${getFileName(imagePath)}...`
+                    : 'Viewing image...' }));
+        },
+        renderOutput: (output, toolCallId) => {
+            const result = output;
+            if (!result) {
+                return (_jsx(LoadingIndicator, { icon: Sparkles, children: "Viewing image..." }, toolCallId));
+            }
+            return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Sparkles, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: result.imagePath
+                            ? `Viewed ${getFileName(result.imagePath)}`
+                            : 'Viewed image' })] }, toolCallId));
+        },
+    },
+    generateImage: {
+        loadingLabel: 'Generating image...',
+        marker: ThinkingTimelineMarker.Default,
+        inline: true,
+        renderLoading: (args) => {
+            const { prompt, aspectRatio } = (args ?? {});
+            const ratioClass = aspectRatio === 'portrait'
+                ? 'aspect-[3/4]'
+                : aspectRatio === 'story'
+                    ? 'aspect-[9/16]'
+                    : aspectRatio === 'landscape'
+                        ? 'aspect-[4/3]'
+                        : aspectRatio === 'widescreen'
+                            ? 'aspect-video'
+                            : 'aspect-square';
+            return (_jsx("figure", { className: "my-2 min-w-0 max-w-2xl", children: _jsxs("div", { className: cn('border-border bg-muted relative w-full overflow-hidden rounded-lg border', ratioClass), children: [_jsx("div", { className: "from-muted via-background/45 to-muted absolute inset-0 animate-pulse bg-gradient-to-br" }), _jsx("div", { className: "bg-foreground/5 absolute inset-0" }), _jsxs("div", { className: "text-muted-foreground absolute inset-0 flex flex-col items-center justify-center gap-2 px-6 text-center", children: [_jsx(Sparkles, { className: "size-5 animate-pulse" }), _jsx("span", { className: "max-w-full truncate text-xs font-medium", children: prompt
+                                        ? `Generating "${prompt.slice(0, 54)}${prompt.length > 54 ? '...' : ''}"`
+                                        : 'Generating image...' })] })] }) }));
+        },
+        renderOutput: (output, toolCallId) => {
+            const result = output;
+            if (!result) {
+                return (_jsx(LoadingIndicator, { icon: Sparkles, children: "Generating image..." }, toolCallId));
+            }
+            const parts = Array.isArray(result.value) ? result.value : [];
+            const image = parts.find((part) => (part.type === 'image-data' || part.type === 'media') &&
+                part.data &&
+                part.mediaType?.startsWith('image/'));
+            const imageSrc = result.imageUrl ??
+                (image?.data && image.mediaType
+                    ? `data:${image.mediaType};base64,${image.data}`
+                    : undefined);
+            if (!imageSrc) {
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 flex max-w-full items-start gap-2 rounded-md px-2 py-1.5 text-xs", children: [_jsx(Sparkles, { className: "mt-0.5 size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 whitespace-normal break-words leading-relaxed", children: result.imagePath
+                                ? `Generated image saved at ${result.imagePath}.`
+                                : 'Generated image saved.' })] }, toolCallId));
+            }
+            return (_jsxs("figure", { className: "my-2 min-w-0 max-w-2xl", children: [_jsx("div", { className: "border-border bg-muted overflow-hidden rounded-lg border", children: _jsx("img", { src: imageSrc, alt: result.prompt || 'Generated image', className: "block max-h-[420px] w-full object-contain" }) }), _jsxs("figcaption", { className: "text-muted-foreground mt-1 flex min-w-0 items-center gap-1 text-xs", children: [_jsx(Sparkles, { className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: result.imagePath
+                                    ? `${getFileName(result.imagePath)}${result.size ? ` - ${result.size}` : ''}`
+                                    : result.size || 'Generated image' })] })] }, toolCallId));
+        },
+    },
+    take_screenshot: {
+        loadingLabel: 'Taking screenshot...',
+        marker: ThinkingTimelineMarker.Default,
+        inline: true,
+        renderLoading: () => (_jsx(LoadingIndicator, { icon: Camera, children: "Taking screenshot..." })),
+        renderOutput: (output, toolCallId) => {
+            const result = output;
+            if (!result) {
+                return (_jsx(LoadingIndicator, { icon: Camera, children: "Taking screenshot..." }, toolCallId));
+            }
+            if (result.type === 'error-text') {
+                return (_jsxs("div", { className: "bg-destructive/10 text-destructive my-1 flex max-w-full items-start gap-2 rounded-md px-2 py-1.5 text-xs", children: [_jsx(Camera, { className: "mt-0.5 size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 whitespace-normal break-words leading-relaxed", children: typeof result.value === 'string'
+                                ? result.value
+                                : 'Screenshot failed' })] }, toolCallId));
+            }
+            const parts = Array.isArray(result.value) ? result.value : [];
+            const image = parts.find((part) => (part.type === 'image-data' || part.type === 'media') &&
+                part.data &&
+                part.mediaType?.startsWith('image/'));
+            const text = parts.find((part) => part.type === 'text')?.text;
+            if (!image?.data || !image.mediaType) {
+                return (_jsxs("div", { className: "bg-muted text-muted-foreground my-1 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-1 text-xs", children: [_jsx(Camera, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: text || 'Screenshot captured' }), _jsx(Check, { className: "size-3 shrink-0 text-green-600" })] }, toolCallId));
+            }
+            return (_jsxs("figure", { className: "my-2 min-w-0 max-w-2xl", children: [_jsx("div", { className: "border-border bg-muted overflow-hidden rounded-lg border", children: _jsx("img", { src: `data:${image.mediaType};base64,${image.data}`, alt: "Current app screenshot", className: "block max-h-[420px] w-full object-contain" }) }), text && (_jsxs("figcaption", { className: "text-muted-foreground mt-1 flex items-center gap-1 text-xs", children: [_jsx(Camera, { className: "size-3" }), _jsx("span", { className: "truncate", children: text })] }))] }, toolCallId));
+        },
+    },
     listMoldableAppApi: {
         loadingLabel: 'Listing app APIs...',
         marker: ThinkingTimelineMarker.Default,

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

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/components/markdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAgF7C,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IACvC,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AAoSD,eAAO,MAAM,QAAQ,uFA5DlB,mBAAmB,6CAmErB,CAAA"}
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/components/markdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAiF7C,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IACvC,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AA8TD,eAAO,MAAM,QAAQ,uFA5DlB,mBAAmB,6CAmErB,CAAA"}

package/dist/components/markdown.js

@@ -4,6 +4,7 @@ import React, { memo, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { cn } from '../lib/utils';
 import { CodeBlock } from './code-block';
+import { RichMediaPlayer } from './rich-media-player';
 import { Button } from './ui/button';
 import { Checkbox } from './ui/checkbox';
 import rehypeRaw from 'rehype-raw';
@@ -62,10 +63,23 @@ function processMentions(text) {
     return parts.length > 0 ? parts : [text];
 }
 const components = {
-    img({ src, alt }) {
+    img({ src, alt, className, style, width }) {
         if (!src || typeof src !== 'string')
             return null;
-        return (_jsx("span", { className: "flex justify-center", children: _jsx("img", { src: src, alt: alt ?? '', className: "h-auto max-w-full rounded-lg" }) }));
+        const imageWidth = typeof width === 'number' || typeof width === 'string'
+            ? width
+            : undefined;
+        return (_jsx("span", { className: "flex justify-center", children: _jsx("img", { src: src, alt: alt ?? '', className: cn('h-auto max-w-full rounded-lg', className), style: style, width: imageWidth }) }));
+    },
+    audio({ src, title }) {
+        if (!src || typeof src !== 'string')
+            return null;
+        return (_jsx(RichMediaPlayer, { kind: "audio", src: src, title: typeof title === 'string' ? title : undefined }));
+    },
+    video({ src, title }) {
+        if (!src || typeof src !== 'string')
+            return null;
+        return (_jsx(RichMediaPlayer, { kind: "video", src: src, title: typeof title === 'string' ? title : undefined }));
     },
     table({ children }) {
         return (_jsx("table", { className: "border-collapse border px-3 py-1", children: children }));

package/dist/components/rich-media-player.d.ts

@@ -0,0 +1,8 @@
+export type RichMediaPlayerProps = {
+    className?: string;
+    kind: 'audio' | 'video';
+    src: string;
+    title?: string;
+};
+export declare function RichMediaPlayer({ className, kind, src, title, }: RichMediaPlayerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=rich-media-player.d.ts.map

package/dist/components/rich-media-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-media-player.d.ts","sourceRoot":"","sources":["../../src/components/rich-media-player.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,OAAO,GAAG,OAAO,CAAA;IACvB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAuBD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,IAAI,EACJ,GAAG,EACH,KAAK,GACN,EAAE,oBAAoB,2CAmNtB"}