@moldable-ai/ui 0.1.1

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

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertCircle, Minimize2, Plus } from 'lucide-react';
+import { useCallback, useEffect, 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 { ConversationHistory, } from './conversation-history';
+import { ModelSelector } from './model-selector';
+import { ReasoningEffortSelector, } from './reasoning-effort-selector';
+import { AnimatePresence, motion } from 'framer-motion';
+/**
+ * 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, className, error, }) {
+    const inputRef = useRef(null);
+    const messagesEndRef = useRef(null);
+    const scrollAreaRef = useRef(null);
+    const [isAtBottom, setIsAtBottom] = useState(true);
+    const isResponding = status === 'streaming' || status === 'submitted';
+    // Track scroll position to detect if user is at bottom
+    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;
+        const handleScroll = () => {
+            const { scrollTop, scrollHeight, clientHeight } = viewport;
+            // Consider "at bottom" if within 50px of the bottom
+            const atBottom = scrollHeight - scrollTop - clientHeight < 50;
+            setIsAtBottom(atBottom);
+        };
+        viewport.addEventListener('scroll', handleScroll);
+        return () => viewport.removeEventListener('scroll', handleScroll);
+    }, [isExpanded]);
+    // Focus input when expanded
+    useEffect(() => {
+        if (isExpanded) {
+            const timer = setTimeout(() => {
+                inputRef.current?.focus();
+            }, 200);
+            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) => {
+        e?.preventDefault();
+        if (!input.trim())
+            return;
+        // If streaming, stop the current response first
+        if (isResponding && onStop) {
+            onStop();
+        }
+        if (!isExpanded) {
+            onExpandedChange(true);
+        }
+        // Reset to bottom when user sends a message
+        setIsAtBottom(true);
+        onSubmit(e);
+    }, [input, isResponding, isExpanded, onExpandedChange, onSubmit, onStop]);
+    const handleNewChat = useCallback(() => {
+        onNewChat?.();
+        inputRef.current?.focus();
+    }, [onNewChat]);
+    // 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) {
+                    handleNewChat();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isResponding, isExpanded, handleNewChat]);
+    return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { children: isExpanded && (_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(motion.div, { initial: false, animate: {
+                    width: isExpanded ? 'min(90vw, 640px)' : '400px',
+                }, transition: { type: 'tween', duration: 0.2, 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', 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: {
+                                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%)',
+                                    '0 0 30px 2px color-mix(in oklch, var(--primary) 0%, #ff8800 00%)',
+                                ],
+                            }, transition: {
+                                duration: 4,
+                                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: [_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: () => onExpandedChange(false), className: "text-muted-foreground hover:text-foreground", children: _jsx(Minimize2, { 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 space-y-4 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(Messages, { messages: messages, status: status }), error && status === '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' })] })] })), _jsx("div", { ref: messagesEndRef })] }) })] }), _jsx("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 }) })] }) })] }));
+}

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

@@ -0,0 +1,18 @@
+export interface ConversationMeta {
+    id: string;
+    title: string;
+    createdAt: string;
+    updatedAt: string;
+    messageCount: number;
+}
+interface ConversationHistoryProps {
+    conversations: ConversationMeta[];
+    currentConversationId?: string | null;
+    onSelect: (id: string) => void;
+    onDelete?: (id: string) => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function ConversationHistory({ conversations, currentConversationId, onSelect, onDelete, disabled, className, }: ConversationHistoryProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=conversation-history.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clock, 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../ui/tooltip';
+function formatRelativeTime(dateStr) {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffMins < 1)
+        return 'Just now';
+    if (diffMins < 60)
+        return `${diffMins}m ago`;
+    if (diffHours < 24)
+        return `${diffHours}h ago`;
+    if (diffDays < 7)
+        return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+}
+export function ConversationHistory({ conversations, currentConversationId, onSelect, onDelete, disabled = false, className, }) {
+    if (conversations.length === 0) {
+        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) => {
+                                            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

@@ -0,0 +1,10 @@
+export { ChatInput } from './chat-input';
+export { Message, ThinkingMessage, type ChatMessage, type ChatMessagePart, } from './chat-message';
+export { Messages } from './chat-messages';
+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 } from './chat-panel';
+export { ThinkingTimeline, ThinkingTimelineMarker, type ThinkingTimelineItem, type ThinkingTimelineProps, } from './thinking-timeline';
+export { getToolHandler, DEFAULT_TOOL_HANDLERS, type ToolHandler, } from './tool-handlers';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,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"}

package/dist/components/chat/index.js

@@ -0,0 +1,9 @@
+export { ChatInput } from './chat-input';
+export { Message, ThinkingMessage, } from './chat-message';
+export { Messages } from './chat-messages';
+export { ModelSelector } from './model-selector';
+export { ReasoningEffortSelector, } from './reasoning-effort-selector';
+export { ConversationHistory, } from './conversation-history';
+export { ChatPanel } from './chat-panel';
+export { ThinkingTimeline, ThinkingTimelineMarker, } from './thinking-timeline';
+export { getToolHandler, DEFAULT_TOOL_HANDLERS, } from './tool-handlers';

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export type ModelOption = {
+    id: string;
+    name: string;
+    icon: ReactNode;
+};
+type ModelSelectorProps = {
+    models: ModelOption[];
+    selectedModel: string;
+    onModelChange: (modelId: string) => void;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function ModelSelector({ models, selectedModel, onModelChange, disabled, className, }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=model-selector.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, }) {
+    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))) })] }));
+}

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

@@ -0,0 +1,14 @@
+export type ReasoningEffortOption = {
+    value: string;
+    label: string;
+};
+type ReasoningEffortSelectorProps = {
+    options: ReasoningEffortOption[];
+    selectedEffort: string;
+    onEffortChange: (effort: string) => void;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function ReasoningEffortSelector({ options, selectedEffort, onEffortChange, disabled, className, }: 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

@@ -0,0 +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"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Brain, Check } 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, }) {
+    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))) })] }) }));
+}

package/dist/components/chat/thinking-timeline.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+export declare enum ThinkingTimelineMarker {
+    Default = "default",
+    None = "none",
+    Loading = "loading",
+    Search = "search",
+    Read = "read",
+    File = "file",
+    Terminal = "terminal",
+    Folder = "folder"
+}
+export type ThinkingTimelineItem = {
+    content: ReactNode;
+    marker?: ThinkingTimelineMarker;
+};
+export type ThinkingTimelineProps = {
+    items: ThinkingTimelineItem[];
+    className?: string;
+};
+export declare function ThinkingTimeline({ items, className }: ThinkingTimelineProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=thinking-timeline.d.ts.map

package/dist/components/chat/thinking-timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thinking-timeline.d.ts","sourceRoot":"","sources":["../../../src/components/chat/thinking-timeline.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,oBAAY,sBAAsB;IAChC,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,sBAAsB,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,oBAAoB,EAAE,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,qBAAqB,kDAwC3E"}

package/dist/components/chat/thinking-timeline.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Eye, FileText, FolderOpen, Globe, Loader2, Terminal, } from 'lucide-react';
+import { cn } from '../../lib/utils';
+export var ThinkingTimelineMarker;
+(function (ThinkingTimelineMarker) {
+    ThinkingTimelineMarker["Default"] = "default";
+    ThinkingTimelineMarker["None"] = "none";
+    ThinkingTimelineMarker["Loading"] = "loading";
+    ThinkingTimelineMarker["Search"] = "search";
+    ThinkingTimelineMarker["Read"] = "read";
+    ThinkingTimelineMarker["File"] = "file";
+    ThinkingTimelineMarker["Terminal"] = "terminal";
+    ThinkingTimelineMarker["Folder"] = "folder";
+})(ThinkingTimelineMarker || (ThinkingTimelineMarker = {}));
+export function ThinkingTimeline({ items, className }) {
+    if (!items?.length) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('relative my-1', className), children: _jsx("ol", { className: "relative flex flex-col", children: items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                const marker = item.marker ?? ThinkingTimelineMarker.Default;
+                return (_jsxs("li", { className: cn('relative flex w-full items-start gap-2', !isLast && 'pb-4'), children: [_jsxs("div", { className: "relative flex w-5 shrink-0 justify-center self-stretch", children: [!isLast && (_jsx("div", { className: "bg-border pointer-events-none absolute bottom-[-24px] left-1/2 top-6 w-px -translate-x-1/2" })), _jsx("span", { className: cn('text-muted-foreground flex h-6 w-6 items-center justify-center', marker === ThinkingTimelineMarker.Default ? 'mt-1' : 'mt-0'), children: getMarkerVisual(marker) })] }), _jsx("div", { className: "min-w-0 flex-1", children: item.content })] }, index));
+            }) }) }));
+}
+function getMarkerVisual(marker) {
+    switch (marker) {
+        case ThinkingTimelineMarker.None:
+            return null;
+        case ThinkingTimelineMarker.Loading:
+            return _jsx(Loader2, { className: "size-4 animate-spin" });
+        case ThinkingTimelineMarker.Search:
+            return _jsx(Globe, { className: "size-4" });
+        case ThinkingTimelineMarker.Read:
+            return _jsx(Eye, { className: "size-4" });
+        case ThinkingTimelineMarker.File:
+            return _jsx(FileText, { className: "size-4" });
+        case ThinkingTimelineMarker.Terminal:
+            return _jsx(Terminal, { className: "size-4" });
+        case ThinkingTimelineMarker.Folder:
+            return _jsx(FolderOpen, { className: "size-4" });
+        case ThinkingTimelineMarker.Default:
+        default:
+            return (_jsx("span", { className: "bg-foreground/70 block h-[6px] w-[6px] rounded-full" }));
+    }
+}

package/dist/components/chat/tool-handlers.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import { ThinkingTimelineMarker } from './thinking-timeline';
+/**
+ * Tool handler definition
+ */
+export type ToolHandler = {
+    loadingLabel: string;
+    marker?: ThinkingTimelineMarker;
+    inline?: boolean;
+    renderOutput: (output: unknown, toolCallId: string) => ReactNode;
+    renderLoading?: (args?: unknown) => ReactNode;
+};
+/**
+ * Default tool handlers for Moldable tools
+ */
+export declare const DEFAULT_TOOL_HANDLERS: Record<string, ToolHandler>;
+/**
+ * Get the handler for a tool
+ */
+export declare function getToolHandler(toolName: string): ToolHandler;
+//# sourceMappingURL=tool-handlers.d.ts.map

package/dist/components/chat/tool-handlers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-handlers.d.ts","sourceRoot":"","sources":["../../../src/components/chat/tool-handlers.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAOhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAE5D;;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;CAC9C,CAAA;AAmND;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CA+nC7D,CAAA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAgC5D"}