@moldable-ai/ui 0.2.18 → 0.2.20

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

@@ -4,20 +4,54 @@ export interface ConversationMeta {
     createdAt: string;
     updatedAt: string;
     messageCount: number;
+    appId?: string | null;
+    appName?: string | null;
+    appIcon?: string | null;
+    /** Optional presentation-only grouping for chats that still use the Chats runtime. */
+    groupId?: string | null;
+    groupName?: string | null;
+    groupIcon?: string | null;
+    isActive?: boolean;
 }
-interface ConversationHistoryProps {
+export interface ConversationGroup {
+    id: string;
+    appId: string | null;
+    label: string;
+    icon?: string | null;
+    conversations: ConversationMeta[];
+}
+export declare function getConversationGroupId(appId: string | null, groupId?: string | null): string;
+export declare function isConversationIconImageSource(icon?: string | null): icon is string;
+interface ConversationListProps {
     conversations: ConversationMeta[];
     currentConversationId?: string | null;
+    currentAppId?: string | null;
     onSelect: (id: string) => void;
-    onDelete?: (id: string) => void;
-    onNewChat?: () => void;
-    newChatDisabled?: boolean;
+    onArchive?: (id: string) => void;
+    onArchiveGroup?: (group: ConversationGroup) => void;
     disabled?: boolean;
     className?: string;
+}
+interface ConversationHistoryProps extends ConversationListProps {
+    onNewChat?: () => void;
+    newChatDisabled?: boolean;
     dropdownAlign?: 'start' | 'center' | 'end';
     dropdownSide?: 'top' | 'right' | 'bottom' | 'left';
     tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
+    hasMoreConversations?: boolean;
+    isLoadingMoreConversations?: boolean;
+    onLoadMoreConversations?: () => void | Promise<unknown>;
+}
+interface ConversationSidebarProps extends ConversationListProps {
+    onNewChat?: () => void;
+    newChatDisabled?: boolean;
+    hideScrollbar?: boolean;
+    hasMoreConversations?: boolean;
+    isLoadingMoreConversations?: boolean;
+    onLoadMoreConversations?: () => void | Promise<unknown>;
 }
-export declare function ConversationHistory({ conversations, currentConversationId, onSelect, onDelete, onNewChat, newChatDisabled, disabled, className, dropdownAlign, dropdownSide, tooltipSide, }: ConversationHistoryProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function groupConversations(conversations: ConversationMeta[], currentAppId?: string | null): ConversationGroup[];
+export declare function ConversationSidebar({ conversations, currentConversationId, currentAppId, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled, hideScrollbar, hasMoreConversations, isLoadingMoreConversations, onLoadMoreConversations, disabled, className, }: ConversationSidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConversationHistory({ conversations, currentConversationId, currentAppId, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled, disabled, className, dropdownAlign, dropdownSide, tooltipSide, hasMoreConversations, isLoadingMoreConversations, onLoadMoreConversations, }: 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":"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"}
+{"version":3,"file":"conversation-history.d.ts","sourceRoot":"","sources":["../../../src/components/chat/conversation-history.tsx"],"names":[],"mappings":"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"}

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

@@ -1,32 +1,198 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Clock, Plus, Trash2 } from 'lucide-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Archive, ChevronDown, Folder, LoaderCircle, MessageCircle, Plus, } from 'lucide-react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { cn } from '../../lib/utils';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../ui/alert-dialog';
 import { Button } from '../ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from '../ui/dropdown-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 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();
+import { getVerticalScrollMask, } from './vertical-scroll-fade';
+const CHATS_GROUP_ID = 'scope:chats';
+const CUSTOM_GROUP_PREFIX = 'scope:group:';
+const COLLAPSED_GROUP_CONVERSATION_LIMIT = 5;
+const IMAGE_ICON_URL_PATTERN = /^(?:asset|https?|blob|data):/i;
+export function getConversationGroupId(appId, groupId) {
+    if (appId !== null)
+        return `scope:app:${appId}`;
+    if (groupId === 'chats')
+        return CHATS_GROUP_ID;
+    return groupId ? `${CUSTOM_GROUP_PREFIX}${groupId}` : CHATS_GROUP_ID;
 }
-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;
+export function isConversationIconImageSource(icon) {
+    return Boolean(icon && (icon.startsWith('/') || IMAGE_ICON_URL_PATTERN.test(icon)));
+}
+export function groupConversations(conversations, currentAppId) {
+    const byScope = new Map();
+    for (const conversation of conversations) {
+        const appId = conversation.appId ?? null;
+        const id = getConversationGroupId(appId, conversation.groupId);
+        const existing = byScope.get(id);
+        if (existing) {
+            existing.conversations.push(conversation);
+            continue;
+        }
+        byScope.set(id, {
+            id,
+            appId,
+            label: appId
+                ? conversation.appName || appId
+                : conversation.groupName || conversation.groupId || 'Chats',
+            icon: id === CHATS_GROUP_ID
+                ? null
+                : appId
+                    ? conversation.appIcon
+                    : conversation.groupIcon,
+            conversations: [conversation],
+        });
+    }
+    const groups = [...byScope.values()];
+    for (const group of groups) {
+        group.conversations.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+    }
+    return groups.sort((a, b) => {
+        const aIsChats = a.id === CHATS_GROUP_ID;
+        const bIsChats = b.id === CHATS_GROUP_ID;
+        if (aIsChats !== bIsChats)
+            return aIsChats ? 1 : -1;
+        if (currentAppId != null) {
+            if (a.appId === currentAppId)
+                return -1;
+            if (b.appId === currentAppId)
+                return 1;
+        }
+        const aUpdated = a.conversations[0]?.updatedAt ?? '';
+        const bUpdated = b.conversations[0]?.updatedAt ?? '';
+        return bUpdated.localeCompare(aUpdated) || a.label.localeCompare(b.label);
+    });
+}
+function AppScopeIcon({ icon, isChats, }) {
+    if (isChats)
+        return _jsx(MessageCircle, { className: "size-4" });
+    if (isConversationIconImageSource(icon)) {
+        return _jsx("img", { src: icon, alt: "", className: "size-4 rounded object-cover" });
     }
-    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))) })] })] }) }));
+    if (icon)
+        return _jsx("span", { className: "text-sm leading-none", children: icon });
+    return _jsx(Folder, { className: "size-4" });
+}
+function ConversationList({ conversations, currentConversationId, currentAppId, onSelect, onArchive, onArchiveGroup, disabled = false, className, }) {
+    const groups = useMemo(() => groupConversations(conversations, currentAppId), [conversations, currentAppId]);
+    const [collapsedGroups, setCollapsedGroups] = useState(() => new Set());
+    const [expandedGroups, setExpandedGroups] = useState(() => new Set());
+    const [groupPendingArchive, setGroupPendingArchive] = useState(null);
+    const listIdPrefix = useId();
+    return (_jsxs("nav", { "aria-label": "Conversations", className: cn('space-y-1', className), children: [groups.map((group) => {
+                const isCollapsed = collapsedGroups.has(group.id);
+                const isShowingAll = expandedGroups.has(group.id);
+                const hasMoreConversations = group.conversations.length > COLLAPSED_GROUP_CONVERSATION_LIMIT;
+                const visibleConversations = isShowingAll
+                    ? group.conversations
+                    : group.conversations.slice(0, COLLAPSED_GROUP_CONVERSATION_LIMIT);
+                const listId = `${listIdPrefix}-${encodeURIComponent(group.id)}`;
+                return (_jsxs("section", { "data-conversation-group": group.id, children: [_jsxs("div", { className: "group/conversation-scope relative flex items-center", children: [_jsxs("button", { type: "button", "aria-expanded": !isCollapsed, "aria-controls": listId, onClick: () => setCollapsedGroups((current) => {
+                                        const next = new Set(current);
+                                        if (next.has(group.id))
+                                            next.delete(group.id);
+                                        else
+                                            next.add(group.id);
+                                        return next;
+                                    }), className: "text-foreground hover:bg-accent/60 flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-lg px-2 pr-9 text-left text-sm font-medium transition-colors", children: [_jsx(ChevronDown, { className: cn('text-muted-foreground size-3.5 shrink-0 transition-transform', isCollapsed && '-rotate-90') }), _jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center", children: _jsx(AppScopeIcon, { icon: group.icon, isChats: group.id === CHATS_GROUP_ID }) }), _jsx("span", { className: "truncate", children: group.label })] }), onArchiveGroup && (_jsx("button", { type: "button", onClick: () => setGroupPendingArchive(group), className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute right-1 flex size-7 cursor-pointer items-center justify-center rounded-md opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 group-focus-within/conversation-scope:opacity-100 group-hover/conversation-scope:opacity-100", "aria-label": `Archive all chats in ${group.label}`, children: _jsx(Archive, { className: "size-3.5" }) }))] }), !isCollapsed && (_jsxs("ul", { id: listId, className: "ml-5 space-y-0.5 py-0.5", children: [visibleConversations.map((conversation) => (_jsxs("li", { "data-conversation-id": conversation.id, className: cn('group/conversation relative flex min-w-0 items-center rounded-lg', conversation.id === currentConversationId && 'bg-accent'), children: [_jsx("button", { type: "button", disabled: disabled, onClick: () => onSelect(conversation.id), "aria-current": conversation.id === currentConversationId
+                                                ? 'page'
+                                                : undefined, className: "min-w-0 flex-1 cursor-pointer truncate rounded-lg py-1.5 pl-3 pr-8 text-left text-sm disabled:cursor-default", children: conversation.title }), conversation.isActive && (_jsx(LoaderCircle, { className: "text-muted-foreground absolute right-2 size-3.5 animate-spin", "aria-label": "Conversation is working" })), onArchive && !conversation.isActive && (_jsx("button", { type: "button", onClick: (event) => {
+                                                event.stopPropagation();
+                                                onArchive(conversation.id);
+                                            }, disabled: disabled, className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute right-1 flex size-7 cursor-pointer items-center justify-center rounded-md opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 disabled:cursor-default group-focus-within/conversation:opacity-100 group-hover/conversation:opacity-100", "aria-label": `Archive ${conversation.title}`, children: _jsx(Archive, { className: "size-3.5" }) }))] }, conversation.id))), hasMoreConversations && (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => setExpandedGroups((current) => {
+                                            const next = new Set(current);
+                                            if (next.has(group.id))
+                                                next.delete(group.id);
+                                            else
+                                                next.add(group.id);
+                                            return next;
+                                        }), className: "text-muted-foreground hover:bg-accent/60 hover:text-foreground flex h-7 w-full cursor-pointer items-center rounded-lg px-3 text-left text-xs transition-colors", "aria-label": `${isShowingAll ? 'Show fewer' : 'Show all'} ${group.label} conversations`, children: isShowingAll ? 'Show less' : 'Show all' }) }))] }))] }, group.id));
+            }), _jsx(AlertDialog, { open: groupPendingArchive !== null, onOpenChange: (open) => {
+                    if (!open)
+                        setGroupPendingArchive(null);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Archive all chats?" }), _jsxs(AlertDialogDescription, { children: ["Archive all ", groupPendingArchive?.conversations.length ?? 0, " chats in \u201C", groupPendingArchive?.label, "\u201D? You can restore them later from Settings."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { className: "cursor-pointer", children: "Cancel" }), _jsx(AlertDialogAction, { className: "cursor-pointer", onClick: () => {
+                                        if (groupPendingArchive) {
+                                            onArchiveGroup?.(groupPendingArchive);
+                                        }
+                                        setGroupPendingArchive(null);
+                                    }, children: "Archive all" })] })] }) })] }));
+}
+export function ConversationSidebar({ conversations, currentConversationId, currentAppId, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled = false, hideScrollbar = false, hasMoreConversations = false, isLoadingMoreConversations = false, onLoadMoreConversations, disabled = false, className, }) {
+    const scrollContainerRef = useRef(null);
+    const [scrollFadeEdges, setScrollFadeEdges] = useState({
+        top: false,
+        bottom: false,
+    });
+    const updateScrollFadeEdges = useCallback((element) => {
+        const scrollElement = element ?? scrollContainerRef.current;
+        if (!scrollElement)
+            return;
+        const next = {
+            top: scrollElement.scrollTop > 1,
+            bottom: scrollElement.scrollTop + scrollElement.clientHeight <
+                scrollElement.scrollHeight - 1,
+        };
+        setScrollFadeEdges((current) => current.top === next.top && current.bottom === next.bottom
+            ? current
+            : next);
+    }, []);
+    useEffect(() => {
+        const scrollElement = scrollContainerRef.current;
+        if (!scrollElement)
+            return;
+        updateScrollFadeEdges(scrollElement);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            updateScrollFadeEdges(scrollElement);
+        });
+        resizeObserver.observe(scrollElement);
+        const content = scrollElement.firstElementChild;
+        if (content instanceof HTMLElement)
+            resizeObserver.observe(content);
+        return () => resizeObserver.disconnect();
+    }, [conversations, updateScrollFadeEdges]);
+    const scrollMask = getVerticalScrollMask(scrollFadeEdges);
+    const handleScroll = useCallback((element) => {
+        updateScrollFadeEdges(element);
+        if (hasMoreConversations &&
+            !isLoadingMoreConversations &&
+            element.scrollHeight - element.scrollTop - element.clientHeight < 120) {
+            void onLoadMoreConversations?.();
+        }
+    }, [
+        hasMoreConversations,
+        isLoadingMoreConversations,
+        onLoadMoreConversations,
+        updateScrollFadeEdges,
+    ]);
+    return (_jsxs("div", { className: cn('flex min-h-0 flex-col', className), children: [onNewChat && (_jsxs(Button, { variant: "ghost", onClick: onNewChat, disabled: newChatDisabled, className: "mb-3 w-full cursor-pointer justify-start gap-2", children: [_jsx(Plus, { className: "size-4" }), "New conversation"] })), _jsxs("div", { ref: scrollContainerRef, className: cn('min-h-0 flex-1 overflow-y-auto pb-8', hideScrollbar &&
+                    '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden'), "data-conversation-scroll-fade": true, "data-scroll-fade-top": scrollFadeEdges.top || undefined, "data-scroll-fade-bottom": scrollFadeEdges.bottom || undefined, onScroll: (event) => handleScroll(event.currentTarget), style: {
+                    maskImage: scrollMask,
+                    WebkitMaskImage: scrollMask,
+                }, children: [_jsx(ConversationList, { conversations: conversations, currentConversationId: currentConversationId, currentAppId: currentAppId, onSelect: onSelect, onArchive: onArchive, onArchiveGroup: hasMoreConversations ? undefined : onArchiveGroup, disabled: disabled }), hasMoreConversations && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: isLoadingMoreConversations, onClick: () => void onLoadMoreConversations?.(), className: "text-muted-foreground mt-1 w-full cursor-pointer", children: [isLoadingMoreConversations && (_jsx(LoaderCircle, { className: "size-3.5 animate-spin" })), "Load older conversations"] }))] })] }));
+}
+export function ConversationHistory({ conversations, currentConversationId, currentAppId, onSelect, onArchive, onArchiveGroup, onNewChat, newChatDisabled = false, disabled = false, className, dropdownAlign = 'start', dropdownSide = 'bottom', tooltipSide = 'bottom', hasMoreConversations = false, isLoadingMoreConversations = false, onLoadMoreConversations, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    if (conversations.length === 0 && !onNewChat)
+        return null;
+    return (_jsx(TooltipProvider, { children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", disabled: disabled, className: cn('text-muted-foreground hover:text-foreground cursor-pointer', className), "aria-label": "Conversations", children: _jsx(MessageCircle, { className: "size-4" }) }) }) }), _jsx(TooltipContent, { side: tooltipSide, children: "Conversations" })] }), _jsxs(PopoverContent, { align: dropdownAlign, side: dropdownSide, className: "w-72 p-2", children: [onNewChat && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => {
+                                onNewChat();
+                                setIsOpen(false);
+                            }, disabled: newChatDisabled, title: "New conversation (Cmd+Shift+O)", className: "mb-1 flex w-full cursor-pointer items-center justify-start gap-2", children: [_jsx(Plus, { className: "size-4" }), _jsx("span", { children: "New conversation" }), _jsx("span", { className: "text-muted-foreground ml-auto text-xs", children: "\u2318\u21E7O" })] })), _jsxs("div", { className: "max-h-80 overflow-y-auto", onScroll: (event) => {
+                                const element = event.currentTarget;
+                                if (hasMoreConversations &&
+                                    !isLoadingMoreConversations &&
+                                    element.scrollHeight -
+                                        element.scrollTop -
+                                        element.clientHeight <
+                                        120) {
+                                    void onLoadMoreConversations?.();
+                                }
+                            }, children: [_jsx(ConversationList, { conversations: conversations, currentConversationId: currentConversationId, currentAppId: currentAppId, onSelect: (id) => {
+                                        onSelect(id);
+                                        setIsOpen(false);
+                                    }, onArchive: onArchive, onArchiveGroup: hasMoreConversations ? undefined : onArchiveGroup, disabled: disabled }), hasMoreConversations && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: isLoadingMoreConversations, onClick: () => void onLoadMoreConversations?.(), className: "text-muted-foreground mt-1 w-full cursor-pointer", children: [isLoadingMoreConversations && (_jsx(LoaderCircle, { className: "size-3.5 animate-spin" })), "Load older conversations"] }))] })] })] }) }));
 }

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

@@ -4,9 +4,10 @@ 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 { ModelEffortSelector, resolveModelEffortPresetIndex, type ModelEffortPresetOption, type ModelProviderOption, } from './model-effort-selector';
 export { ReasoningEffortSelector, type ReasoningEffortOption, } from './reasoning-effort-selector';
-export { ConversationHistory, type ConversationMeta, } from './conversation-history';
-export { ChatPanel, type ChatContextUsage, type ChatPanelProps, type QueuedChatMessage, type ToolProgressData, } from './chat-panel';
+export { ConversationHistory, ConversationSidebar, groupConversations, type ConversationGroup, type ConversationMeta, } from './conversation-history';
+export { ChatPanel, type ChatAuthIssue, type ChatContextUsage, type ChatPlanUsage, type ChatPlanUsageWindow, type ChatPanelProps, type QueuedChatMessage, type ToolProgressData, resolveChatAuthIssue, } 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,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"}
+{"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,mBAAmB,EACnB,6BAA6B,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,uBAAuB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,SAAS,EACT,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,oBAAoB,GACrB,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

@@ -4,9 +4,10 @@ export { Messages } from './chat-messages';
 export { CheckpointBadge } from './checkpoint-badge';
 export { RestoreDialog, } from './restore-dialog';
 export { ModelSelector } from './model-selector';
+export { ModelEffortSelector, resolveModelEffortPresetIndex, } from './model-effort-selector';
 export { ReasoningEffortSelector, } from './reasoning-effort-selector';
-export { ConversationHistory, } from './conversation-history';
-export { ChatPanel, } from './chat-panel';
+export { ConversationHistory, ConversationSidebar, groupConversations, } from './conversation-history';
+export { ChatPanel, resolveChatAuthIssue, } from './chat-panel';
 export { ThinkingTimeline, ThinkingTimelineMarker, } from './thinking-timeline';
 export { getToolHandler, DEFAULT_TOOL_HANDLERS, } from './tool-handlers';
 export { ToolProgressProvider, useToolProgress, useToolCallProgress, } from './tool-progress-context';

package/dist/components/chat/model-effort-power-effects.d.ts

@@ -0,0 +1,7 @@
+export type ModelEffortPowerLevel = 'light' | 'medium' | 'high' | 'xhigh' | 'max';
+export declare function ModelEffortRangeEffects({ level, reveal, }: {
+    level: ModelEffortPowerLevel;
+    reveal: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MaxThumbBurst(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=model-effort-power-effects.d.ts.map

package/dist/components/chat/model-effort-power-effects.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-effort-power-effects.d.ts","sourceRoot":"","sources":["../../../src/components/chat/model-effort-power-effects.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,qBAAqB,GAC7B,OAAO,GACP,QAAQ,GACR,MAAM,GACN,OAAO,GACP,KAAK,CAAA;AAsCT,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,MAAM,GACP,EAAE;IACD,KAAK,EAAE,qBAAqB,CAAA;IAC5B,MAAM,EAAE,OAAO,CAAA;CAChB,2CA+BA;AAED,wBAAgB,aAAa,4CAuB5B"}

package/dist/components/chat/model-effort-power-effects.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STREAM_PARTICLES = [
+    [18, 1.72, -0.22, 0.78, 0.72],
+    [72, 2.28, -1.64, 0.62, 0.9],
+    [42, 1.94, -0.78, 0.88, 0.82],
+    [27, 2.14, -1.92, 0.56, 0.66],
+    [64, 1.82, -0.46, 0.82, 0.94],
+    [83, 2.36, -1.14, 0.68, 0.76],
+    [36, 1.64, -1.42, 0.92, 0.86],
+    [57, 2.06, -0.08, 0.58, 0.7],
+    [21, 2.42, -2.18, 0.74, 0.88],
+    [76, 1.88, -0.96, 0.86, 0.8],
+    [48, 2.22, -1.78, 0.64, 0.96],
+    [31, 1.78, -0.58, 0.9, 0.74],
+    [68, 2.5, -2.36, 0.54, 0.84],
+    [88, 2, -1.28, 0.76, 0.68],
+];
+const BURST_PARTICLES = [
+    [-32, -3],
+    [-28, -17],
+    [-19, -29],
+    [-5, -34],
+    [10, -32],
+    [24, -24],
+    [32, -11],
+    [35, 4],
+    [29, 19],
+    [18, 30],
+    [3, 35],
+    [-12, 32],
+    [-25, 24],
+    [-34, 11],
+    [20, -7],
+    [-16, 9],
+];
+export function ModelEffortRangeEffects({ level, reveal, }) {
+    return (_jsxs("span", { "aria-hidden": "true", className: "model-effort-power-fill", "data-level": level, "data-reveal": level === 'max' && reveal, children: [_jsx("span", { className: "model-effort-power-field" }), _jsx("span", { className: "model-effort-power-particles", children: STREAM_PARTICLES.map(([top, duration, delay, opacity, scale], index) => (_jsx("span", { className: "model-effort-power-particle", style: {
+                        top: `${top}%`,
+                        '--particle-opacity': opacity,
+                        '--particle-scale': scale,
+                        animationDuration: `${duration}s`,
+                        animationDelay: `${delay}s`,
+                    } }, index))) })] }));
+}
+export function MaxThumbBurst() {
+    return (_jsx("span", { "aria-hidden": "true", className: "model-effort-max-burst", children: BURST_PARTICLES.map(([x, y], index) => (_jsx("span", { className: "model-effort-max-burst-particle", style: {
+                '--burst-x': `${x}px`,
+                '--burst-y': `${y}px`,
+                animationDelay: `${(index % 4) * 12}ms`,
+                backgroundColor: index % 3 === 0
+                    ? 'var(--model-effort-blue)'
+                    : 'var(--model-effort-purple)',
+            } }, index))) }));
+}

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

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+export type ModelProviderOption = {
+    id: string;
+    name: string;
+    icon: ReactNode;
+};
+export type ModelEffortPresetOption = {
+    id: string;
+    providerId: string;
+    modelId: string;
+    modelName: string;
+    effort: string;
+    effortLabel: string;
+};
+type ModelEffortSelectorProps = {
+    providers: ModelProviderOption[];
+    presets: ModelEffortPresetOption[];
+    selectedModel: string;
+    selectedReasoningEffort: string;
+    onSelectionChange: (modelId: string, effort: string) => void;
+    disabled?: boolean;
+};
+export declare function resolveModelEffortPresetIndex(presets: ModelEffortPresetOption[], selectedModel: string, selectedEffort: string): number;
+export declare function ModelEffortSelector({ providers, presets, selectedModel, selectedReasoningEffort, onSelectionChange, disabled, }: ModelEffortSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=model-effort-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"model-effort-selector.d.ts","sourceRoot":"","sources":["../../../src/components/chat/model-effort-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAcd,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,mBAAmB,EAAE,CAAA;IAChC,OAAO,EAAE,uBAAuB,EAAE,CAAA;IAClC,aAAa,EAAE,MAAM,CAAA;IACrB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,iBAAiB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,uBAAuB,EAAE,EAClC,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACrB,MAAM,CAWR;AAoCD,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAO,EACP,aAAa,EACb,uBAAuB,EACvB,iBAAiB,EACjB,QAAgB,GACjB,EAAE,wBAAwB,2CAiT1B"}