orchid-ai 1.3.6 → 1.3.8

package/dist/cli/components/ChatPanel.d.ts

@@ -60,6 +60,12 @@ interface ChatPanelProps {
      * (e.g. MUI AppBar ~1100, custom sidebars ~999). Default Tailwind z-50 is too low for many shells.
      */
     overlayZIndex?: number;
+    /**
+     * When true (default) and `showHistory` is on, only the chat history column is a narrow strip
+     * until hover (or tap) expands it; the main conversation area stays full width.
+     * Set to false to keep the history sidebar always fully expanded (~150px).
+     */
+    expandOnHover?: boolean;
 }
 /**
  * ChatPanel component
@@ -98,7 +104,7 @@ showHistory, // Default to hidden
 showProfileBubbles, // Default to hidden
 modalPosition, // Default to left position
 serverConfig, models, defaultModel, showUsageStats, maxFileSize, features, showFloatingButton, floatingButtonIcon, floatingButtonPosition, floatingButtonSize, floatingButtonClassName, chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, headerIcon, // Default to bot icon
-headerTitle, headerSubtitle, onSuggestionSelect, overlayZIndex, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
+headerTitle, headerSubtitle, onSuggestionSelect, overlayZIndex, expandOnHover, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ChatInput component
  * @param query - The current query

package/dist/cli/components/Conversation.d.ts

@@ -61,6 +61,10 @@ interface ConversationProps {
     showClearChat?: boolean;
     onClearChat?: () => void;
     additionalContext?: string | Record<string, unknown>;
+    /** Optional ref to the main chat textarea (for parent focus control). */
+    chatInputRef?: React.RefObject<HTMLTextAreaElement | null>;
+    /** Increment to move focus to the main input (panel open, chat switch, new chat). */
+    focusChatNonce?: number;
 }
 /**
  * Conversation component - displays a single chat conversation
@@ -72,5 +76,5 @@ interface ConversationProps {
  * @param autoScroll - Whether to auto-scroll to bottom on new messages
  * @param maxHeight - Maximum height of the conversation container
  */
-export declare function Conversation({ chat: externalChat, onSuggestionClick, theme, showProfileBubbles, className, autoScroll, maxHeight, userId, serverConfig, formData, chatLevel, chats: externalChats, setChats: externalSetChats, currentChatId: externalCurrentChatId, setCurrentChatId: externalSetCurrentChatId, query: externalQuery, setQuery: externalSetQuery, onSend: externalOnSend, isLoading: externalIsLoading, attachedFiles: externalAttachedFiles, setAttachedFiles: externalSetAttachedFiles, models, defaultModel, showUsageStats, maxFileSize, features, currentModelSelection: externalCurrentModelSelection, onModelSelectionChange: externalOnModelSelectionChange, showInput, initialQuery, setInitialQuery, showClearChat, onClearChat, additionalContext, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Conversation({ chat: externalChat, onSuggestionClick, theme, showProfileBubbles, className, autoScroll, maxHeight, userId, serverConfig, formData, chatLevel, chats: externalChats, setChats: externalSetChats, currentChatId: externalCurrentChatId, setCurrentChatId: externalSetCurrentChatId, query: externalQuery, setQuery: externalSetQuery, onSend: externalOnSend, isLoading: externalIsLoading, attachedFiles: externalAttachedFiles, setAttachedFiles: externalSetAttachedFiles, models, defaultModel, showUsageStats, maxFileSize, features, currentModelSelection: externalCurrentModelSelection, onModelSelectionChange: externalOnModelSelectionChange, showInput, initialQuery, setInitialQuery, showClearChat, onClearChat, additionalContext, chatInputRef: externalChatInputRef, focusChatNonce, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ChatPanel.d.ts

@@ -60,6 +60,12 @@ interface ChatPanelProps {
      * (e.g. MUI AppBar ~1100, custom sidebars ~999). Default Tailwind z-50 is too low for many shells.
      */
     overlayZIndex?: number;
+    /**
+     * When true (default) and `showHistory` is on, only the chat history column is a narrow strip
+     * until hover (or tap) expands it; the main conversation area stays full width.
+     * Set to false to keep the history sidebar always fully expanded (~150px).
+     */
+    expandOnHover?: boolean;
 }
 /**
  * ChatPanel component
@@ -98,7 +104,7 @@ showHistory, // Default to hidden
 showProfileBubbles, // Default to hidden
 modalPosition, // Default to left position
 serverConfig, models, defaultModel, showUsageStats, maxFileSize, features, showFloatingButton, floatingButtonIcon, floatingButtonPosition, floatingButtonSize, floatingButtonClassName, chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, headerIcon, // Default to bot icon
-headerTitle, headerSubtitle, onSuggestionSelect, overlayZIndex, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
+headerTitle, headerSubtitle, onSuggestionSelect, overlayZIndex, expandOnHover, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ChatInput component
  * @param query - The current query

package/dist/components/Conversation.d.ts

@@ -61,6 +61,10 @@ interface ConversationProps {
     showClearChat?: boolean;
     onClearChat?: () => void;
     additionalContext?: string | Record<string, unknown>;
+    /** Optional ref to the main chat textarea (for parent focus control). */
+    chatInputRef?: React.RefObject<HTMLTextAreaElement | null>;
+    /** Increment to move focus to the main input (panel open, chat switch, new chat). */
+    focusChatNonce?: number;
 }
 /**
  * Conversation component - displays a single chat conversation
@@ -72,5 +76,5 @@ interface ConversationProps {
  * @param autoScroll - Whether to auto-scroll to bottom on new messages
  * @param maxHeight - Maximum height of the conversation container
  */
-export declare function Conversation({ chat: externalChat, onSuggestionClick, theme, showProfileBubbles, className, autoScroll, maxHeight, userId, serverConfig, formData, chatLevel, chats: externalChats, setChats: externalSetChats, currentChatId: externalCurrentChatId, setCurrentChatId: externalSetCurrentChatId, query: externalQuery, setQuery: externalSetQuery, onSend: externalOnSend, isLoading: externalIsLoading, attachedFiles: externalAttachedFiles, setAttachedFiles: externalSetAttachedFiles, models, defaultModel, showUsageStats, maxFileSize, features, currentModelSelection: externalCurrentModelSelection, onModelSelectionChange: externalOnModelSelectionChange, showInput, initialQuery, setInitialQuery, showClearChat, onClearChat, additionalContext, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Conversation({ chat: externalChat, onSuggestionClick, theme, showProfileBubbles, className, autoScroll, maxHeight, userId, serverConfig, formData, chatLevel, chats: externalChats, setChats: externalSetChats, currentChatId: externalCurrentChatId, setCurrentChatId: externalSetCurrentChatId, query: externalQuery, setQuery: externalSetQuery, onSend: externalOnSend, isLoading: externalIsLoading, attachedFiles: externalAttachedFiles, setAttachedFiles: externalSetAttachedFiles, models, defaultModel, showUsageStats, maxFileSize, features, currentModelSelection: externalCurrentModelSelection, onModelSelectionChange: externalOnModelSelectionChange, showInput, initialQuery, setInitialQuery, showClearChat, onClearChat, additionalContext, chatInputRef: externalChatInputRef, focusChatNonce, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.esm.js

@@ -2807,8 +2807,10 @@ initialQuery, setInitialQuery,
 // Clear chat functionality
 showClearChat = false, onClearChat, 
 // Additional context for AI requests
-additionalContext, }) {
+additionalContext, chatInputRef: externalChatInputRef, focusChatNonce, }) {
     const chatRef = useRef(null);
+    const fallbackInputRef = useRef(null);
+    const inputRef = externalChatInputRef ?? fallbackInputRef;
     // Internal state for AI functionality
     const [query, setQuery] = useState(externalQuery);
     const [attachedFiles, setAttachedFiles] = useState(externalAttachedFiles);
@@ -2994,6 +2996,15 @@ additionalContext, }) {
             initialQuerySentRef.current = false;
         }
     }, [initialQuery]);
+    // Focus main input when parent signals (open panel, new chat, switch chat)
+    useEffect(() => {
+        if (focusChatNonce === undefined || focusChatNonce < 1)
+            return;
+        const id = window.setTimeout(() => {
+            inputRef.current?.focus({ preventScroll: true });
+        }, 0);
+        return () => clearTimeout(id);
+    }, [focusChatNonce, inputRef]);
     // Scrollbar styles - dynamically themed
     const scrollbarStyles = `
     .custom-scrollbar::-webkit-scrollbar {
@@ -3035,7 +3046,7 @@ additionalContext, }) {
                                 e.currentTarget.style.color = theme.colors.text.secondary;
                                 e.currentTarget.style.backgroundColor = theme.colors.surface.primary;
                                 e.currentTarget.style.borderColor = theme.colors.border.primary;
-                            }, title: "Clear chat history", "aria-label": "Clear chat", children: [jsx(Icon, { name: "trash", size: "sm" }), "Clear Chat History"] }) })), showInput && (jsx("div", { style: { flexShrink: 0 }, children: jsx(ChatInput, { query: finalQuery, setQuery: finalSetQuery, onSend: finalOnSend, isLoading: isLoading, inputRef: useRef(null), attachedFiles: finalAttachedFiles, setAttachedFiles: finalSetAttachedFiles, models: models, defaultModel: defaultModel, showUsageStats: showUsageStats, maxFileSize: maxFileSize, features: features, currentModelSelection: currentModelSelection, onModelSelectionChange: handleModelSelectionChange, theme: theme, isOpen: true }) }))] })] }));
+                            }, title: "Clear chat history", "aria-label": "Clear chat", children: [jsx(Icon, { name: "trash", size: "sm" }), "Clear Chat History"] }) })), showInput && (jsx("div", { style: { flexShrink: 0 }, children: jsx(ChatInput, { query: finalQuery, setQuery: finalSetQuery, onSend: finalOnSend, isLoading: isLoading, inputRef: inputRef, attachedFiles: finalAttachedFiles, setAttachedFiles: finalSetAttachedFiles, models: models, defaultModel: defaultModel, showUsageStats: showUsageStats, maxFileSize: maxFileSize, features: features, currentModelSelection: currentModelSelection, onModelSelectionChange: handleModelSelectionChange, theme: theme, isOpen: true }) }))] })] }));
 }
 /**
  * ErrorDisplay component - used to display error messages
@@ -3365,6 +3376,14 @@ theme, isOpen, }) {
             onModelSelectionChange(modelInfo);
         }
     }, [onModelSelectionChange]);
+    /** Ghost icon buttons — explicit reset so host app (e.g. MUI) button styles don’t add light fills. */
+    const ghostIconBtnClass = 'inline-flex items-center justify-center w-9 h-9 shrink-0 rounded-md p-0 border-0 shadow-none !bg-transparent appearance-none transition-colors';
+    const ghostIconBtnStyle = {
+        backgroundColor: 'transparent',
+        border: 'none',
+        boxShadow: 'none',
+        color: theme.colors.text.secondary,
+    };
     return (jsxs("div", { className: `px-3 py-2 border-t flex flex-col gap-2 transition-all duration-500 delay-500 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`, style: { borderColor: theme.colors.border.primary }, children: [attachedFiles.length > 0 && (jsx("div", { className: "flex flex-wrap gap-2 mb-2", children: attachedFiles.map((file, index) => (jsxs("div", { className: "relative group", children: [jsx("div", { className: "w-16 h-16 rounded-lg border border-gray-200 bg-gray-50 flex items-center justify-center overflow-hidden", children: file.type.startsWith('image/') ? (jsx("img", { src: URL.createObjectURL(file), alt: `Attached ${index + 1}`, className: "w-full h-full object-cover" })) : (jsx("div", { className: "flex items-center justify-center", children: FileHandler.getFileIcon(file) })) }), jsx("button", { onClick: () => removeFile(index), className: "absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center text-xs hover:bg-red-600 transition-colors", title: "Remove file", children: "\u00D7" }), jsx("div", { className: "absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 mt-2", children: jsxs("div", { className: "bg-gray-900 text-white text-xs rounded-lg px-2 py-1 whitespace-nowrap shadow-lg", children: [jsx("div", { className: "font-medium truncate max-w-32", title: file.name, children: file.name }), jsxs("div", { className: "text-gray-300", children: [FileHandler.getFileTypeDescription(file), " \u2022", ' ', FileHandler.formatFileSize(file.size)] }), jsx("div", { className: "absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-gray-900 rotate-45" })] }) })] }, index))) })), incompatibleFiles.length > 0 && (jsxs("div", { className: "relative flex flex-col gap-1 text-sm text-orange-700 bg-orange-50 border border-orange-200 rounded px-3 py-2 mb-2", children: [jsx("button", { onClick: () => setIncompatibleFiles([]), className: "absolute top-1 right-1 w-5 h-5 flex items-center justify-center text-orange-500 hover:text-orange-700 hover:bg-orange-200 rounded-full transition-colors", title: "Dismiss", type: "button", children: "\u00D7" }), jsxs("div", { className: "flex items-center gap-2 pr-6", children: [jsx("span", { children: "\u26A0\uFE0F" }), jsx("span", { className: "font-medium", children: incompatibleFiles.length === 1
                                     ? 'File not supported'
                                     : 'Some files not supported' })] }), jsxs("div", { className: "text-xs", children: [jsx("div", { className: "mb-1", children: "These files were skipped:" }), jsxs("ul", { className: "list-disc list-inside ml-2 space-y-0.5", children: [incompatibleFiles.slice(0, 3).map((fileName, index) => (jsx("li", { className: "truncate", children: fileName }, index))), incompatibleFiles.length > 3 && (jsxs("li", { children: ["... and ", incompatibleFiles.length - 3, " more"] }))] }), jsxs("div", { className: "mt-1 text-orange-600", children: ["\uD83D\uDCA1 Only ", FileHandler.getAcceptedTypesDescription(), " are supported", incompatibleFiles.some((name) => name.includes('images not supported by current model')) && (jsx("div", { className: "mt-1", children: "\uD83D\uDD04 Switch to a model showing the image icon in the model switcher to enable image uploads" }))] })] })] })), jsxs("div", { className: `relative flex flex-col gap-1 rounded border px-2 pt-1 pb-1 cursor-text transition-all duration-200 border-2 focus-within:shadow-sm ${isDragOver ? 'border-dashed bg-opacity-20' : 'border-transparent'}`, style: {
@@ -3381,21 +3400,30 @@ theme, isOpen, }) {
                     }
                 }, onClick: handleContainerClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [isDragOver && (jsx("div", { className: "absolute top-2 left-2 right-2 bottom-2 flex items-center justify-center py-1 bg-blue-100 rounded text-blue-600 text-sm font-medium z-10 pointer-events-none", children: "\uD83D\uDCC2 Drop files here" })), jsx("textarea", { ref: inputRef, value: query, onChange: (e) => setQuery(e.target.value), onFocus: () => setFocused(true), onBlur: () => setFocused(false), onKeyDown: (e) => e.key === 'Enter' && !e.shiftKey && (e.preventDefault(), onSend()), onPaste: handlePaste, placeholder: "Describe what you need... (Try: 'I want to know how much time has been updated')", className: "w-full outline-none resize-none min-h-[3.5rem] max-h-32 border-none px-0 bg-transparent", style: {
                             color: theme.colors.text.primary,
-                        }, rows: 3 }), jsxs("div", { className: "flex gap-2 items-center justify-between", children: [jsxs("div", { className: "flex gap-1", children: [features.fileUploads !== false && (jsx("button", { className: "p-1 cursor-pointer disabled:opacity-50 disabled:cursor-default transition-colors", style: { color: theme.colors.text.tertiary }, onMouseEnter: (e) => {
-                                            e.currentTarget.style.color = theme.colors.primary[500];
+                        }, rows: 3 }), jsxs("div", { className: "flex gap-2 items-center justify-between", children: [jsxs("div", { className: "flex gap-1", children: [features.fileUploads !== false && (jsx("button", { type: "button", className: `${ghostIconBtnClass} cursor-pointer disabled:cursor-not-allowed disabled:opacity-50`, style: ghostIconBtnStyle, onMouseEnter: (e) => {
+                                            e.currentTarget.style.color = theme.colors.primary[400];
+                                            e.currentTarget.style.backgroundColor = theme.colors.surface.secondary;
                                         }, onMouseLeave: (e) => {
-                                            e.currentTarget.style.color = theme.colors.text.tertiary;
-                                        }, title: `Attach files - Supports: ${FileHandler.getAcceptedTypesDescription()}`, tabIndex: -1, type: "button", onClick: () => fileInputRef.current?.click(), children: jsx(Icon, { name: "paperclip", size: "sm" }) })), features.enableImageUploads !== false &&
-                                        features.imageAnalysis !== false && (jsx("button", { className: `p-1 cursor-pointer disabled:opacity-50 disabled:cursor-default transition-colors ${!imageSupported ? 'opacity-50 cursor-not-allowed' : ''}`, style: { color: theme.colors.text.tertiary }, onMouseEnter: (e) => {
+                                            e.currentTarget.style.color = theme.colors.text.secondary;
+                                            e.currentTarget.style.backgroundColor = 'transparent';
+                                        }, title: `Attach files - Supports: ${FileHandler.getAcceptedTypesDescription()}`, tabIndex: -1, onClick: () => fileInputRef.current?.click(), children: jsx(Icon, { name: "paperclip", size: "sm" }) })), features.enableImageUploads !== false &&
+                                        features.imageAnalysis !== false && (jsx("button", { type: "button", className: `${ghostIconBtnClass} cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${!imageSupported ? 'opacity-50' : ''}`, style: ghostIconBtnStyle, onMouseEnter: (e) => {
                                             if (imageSupported) {
-                                                e.currentTarget.style.color = theme.colors.primary[500];
+                                                e.currentTarget.style.color = theme.colors.primary[400];
+                                                e.currentTarget.style.backgroundColor =
+                                                    theme.colors.surface.secondary;
                                             }
                                         }, onMouseLeave: (e) => {
-                                            e.currentTarget.style.color = theme.colors.text.tertiary;
+                                            e.currentTarget.style.color = theme.colors.text.secondary;
+                                            e.currentTarget.style.backgroundColor = 'transparent';
                                         }, title: imageSupported
                                             ? 'Attach images - AI can analyze image content'
-                                            : "Current model doesn't support images. Switch to GPT-4O, Claude, or Gemini to use image attachments.", tabIndex: -1, type: "button", onClick: () => imageSupported && imageInputRef.current?.click(), disabled: !imageSupported, children: jsx(Icon, { name: "image", size: "sm" }) })), jsx("button", { className: "p-1 cursor-pointer disabled:opacity-50 disabled:cursor-default transition-colors", style: { color: theme.colors.text.tertiary }, title: "Record audio (coming soon)", tabIndex: -1, type: "button", onClick: handleAudioRecord, disabled: true, children: jsx(Icon, { name: "microphone", size: "sm" }) })] }), jsx("button", { onClick: () => onSend(), disabled: (!query.trim() && attachedFiles.length === 0) || isLoading, className: "rounded-full transition disabled:opacity-50 p-2", style: {
+                                            : "Current model doesn't support images. Switch to GPT-4O, Claude, or Gemini to use image attachments.", tabIndex: -1, onClick: () => imageSupported && imageInputRef.current?.click(), disabled: !imageSupported, children: jsx(Icon, { name: "image", size: "sm" }) })), jsx("button", { type: "button", className: `${ghostIconBtnClass} cursor-not-allowed opacity-50`, style: {
+                                            ...ghostIconBtnStyle,
+                                            color: theme.colors.text.tertiary,
+                                        }, title: "Record audio (coming soon)", tabIndex: -1, onClick: handleAudioRecord, disabled: true, children: jsx(Icon, { name: "microphone", size: "sm" }) })] }), jsx("button", { type: "button", onClick: () => onSend(), disabled: (!query.trim() && attachedFiles.length === 0) || isLoading, className: "inline-flex shrink-0 items-center justify-center rounded-full border-0 p-2 shadow-none !bg-transparent transition-colors disabled:cursor-not-allowed disabled:opacity-50", style: {
                                     color: theme.colors.text.primary,
+                                    backgroundColor: 'transparent',
                                 }, onMouseEnter: (e) => {
                                     if (!e.currentTarget.disabled) {
                                         e.currentTarget.style.backgroundColor =
@@ -3405,7 +3433,7 @@ theme, isOpen, }) {
                                     if (!e.currentTarget.disabled) {
                                         e.currentTarget.style.backgroundColor = 'transparent';
                                     }
-                                }, title: "Send", tabIndex: -1, type: "button", children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_892_5571)", children: jsx("path", { d: "M13.3334 10.0001L10.0001 6.66675M10.0001 6.66675L6.66675 10.0001M10.0001 6.66675V13.3334M18.3334 10.0001C18.3334 14.6025 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6025 1.66675 10.0001C1.66675 5.39771 5.39771 1.66675 10.0001 1.66675C14.6025 1.66675 18.3334 5.39771 18.3334 10.0001Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_892_5571", children: jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }) })] })] }), jsx("input", { ref: fileInputRef, type: "file", accept: FileHandler.getInputAcceptAttribute(), multiple: true, onChange: handleAllFileUpload, className: "hidden", "aria-label": "Upload any file" }), jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", multiple: true, onChange: handleImageUpload, className: "hidden", "aria-label": "Upload images" }), features.modelSwitching !== false &&
+                                }, title: "Send", tabIndex: -1, children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_892_5571)", children: jsx("path", { d: "M13.3334 10.0001L10.0001 6.66675M10.0001 6.66675L6.66675 10.0001M10.0001 6.66675V13.3334M18.3334 10.0001C18.3334 14.6025 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6025 1.66675 10.0001C1.66675 5.39771 5.39771 1.66675 10.0001 1.66675C14.6025 1.66675 18.3334 5.39771 18.3334 10.0001Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_892_5571", children: jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }) })] })] }), jsx("input", { ref: fileInputRef, type: "file", accept: FileHandler.getInputAcceptAttribute(), multiple: true, onChange: handleAllFileUpload, className: "hidden", "aria-label": "Upload any file" }), jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", multiple: true, onChange: handleImageUpload, className: "hidden", "aria-label": "Upload images" }), features.modelSwitching !== false &&
                 features.imageAnalysis !== false &&
                 features.enableImageUploads !== false &&
                 !imageSupported &&
@@ -3508,7 +3536,37 @@ showHistory = false, // Default to hidden
 showProfileBubbles = false, // Default to hidden
 modalPosition = 'left', // Default to left position
 serverConfig, models, defaultModel, showUsageStats, maxFileSize, features = {}, showFloatingButton = false, floatingButtonIcon, floatingButtonPosition = 'bottom-right', floatingButtonSize = 'md', floatingButtonClassName = '', chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, headerIcon = 'command', // Default to bot icon
-headerTitle = 'AI Logistics & Customs Expert', headerSubtitle = 'Ready to assist you with your queries', onSuggestionSelect, overlayZIndex, }) {
+headerTitle = 'AI Logistics & Customs Expert', headerSubtitle = 'Ready to assist you with your queries', onSuggestionSelect, overlayZIndex, expandOnHover = true, }) {
+    const chatInputRef = useRef(null);
+    const [focusChatNonce, setFocusChatNonce] = useState(0);
+    /** Match original slide-out sizing (not the temporary wider caps). */
+    const expandedWidthClass = showHistory
+        ? 'w-[min(90vw,700px)] max-w-[700px]'
+        : 'w-[min(80vw,550px)] max-w-[550px]';
+    const panelRoundedClass = modalPosition === 'right' ? 'rounded-l-lg' : 'rounded-r-lg';
+    // Focus the main input when the panel opens, chat switches, or new chat is selected
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        setFocusChatNonce((n) => n + 1);
+    }, [isOpen, currentChatId]);
+    const handleCloseChat = useCallback((chatId) => {
+        setChats?.((prev) => {
+            const next = { ...prev };
+            delete next[chatId];
+            setCurrentChatId?.((cur) => {
+                if (cur !== chatId)
+                    return cur;
+                const keys = Object.keys(next).sort((a, b) => Number(b) - Number(a));
+                if (keys.length)
+                    return keys[0];
+                const nid = Date.now().toString();
+                setChats?.((p) => ({ ...p, [nid]: [] }));
+                return nid;
+            });
+            return next;
+        });
+    }, [setChats, setCurrentChatId]);
     const handleSuggestionClick = (s) => {
         if (onSuggestionSelect) {
             onSuggestionSelect(s);
@@ -3544,6 +3602,16 @@ headerTitle = 'AI Logistics & Customs Expert', headerSubtitle = 'Ready to assist
             });
         }
     }, [isOpen, isVisible]);
+    // If parent sets isOpen false without calling our handleClose, isVisible can stay true and
+    // shouldRenderPanel keeps the fixed overlay mounted (e.g. stray strip during app loading).
+    useEffect(() => {
+        if (!isOpen && isVisible) {
+            const id = window.setTimeout(() => {
+                setIsVisible(false);
+            }, 300);
+            return () => window.clearTimeout(id);
+        }
+    }, [isOpen, isVisible]);
     // Handle closing animation
     const handleClose = useCallback(() => {
         if (!isAnimating) {
@@ -3678,105 +3746,143 @@ headerTitle = 'AI Logistics & Customs Expert', headerSubtitle = 'Ready to assist
       transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
     }
   `;
-    return (jsxs(Fragment, { children: [jsx("style", { children: scrollbarStyles }), jsxs(ErrorBoundary, { children: [!isOpen && showFloatingButton && (jsx(FloatingChatButton, { onClick: handleOpen, theme: theme, icon: floatingButtonIcon, position: floatingButtonPosition, size: floatingButtonSize, className: floatingButtonClassName, zIndex: overlayZIndex })), shouldRenderPanel && (jsxs("div", { className: "fixed inset-0 z-50", style: overlayZIndex !== undefined ? { zIndex: overlayZIndex } : undefined, children: [jsx("div", { className: `absolute inset-0 bg-black/20 transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`, onClick: handleClose }), jsx("div", { className: `fixed z-[60] top-6 transition-all duration-300 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-75'}`, style: { ...(modalPosition === 'left'
-                                        ? { left: showHistory ? 'min(90vw, 700px)' : 'min(80vw, 550px)', marginLeft: '16px' }
-                                        : { right: showHistory ? 'min(90vw, 700px)' : 'min(80vw, 550px)', marginRight: '16px' }) }, children: jsx("button", { onClick: handleClose, className: "w-10 h-10 rounded-full shadow-lg transition-all duration-200 flex items-center justify-center text-xl font-bold hover:scale-110", style: {
-                                        backgroundColor: finalTheme.colors.surface.elevated,
-                                        color: finalTheme.colors.text.secondary,
-                                        border: `2px solid ${finalTheme.colors.border.primary}`,
-                                        boxShadow: finalTheme.shadows.lg,
-                                    }, onMouseEnter: (e) => {
-                                        e.currentTarget.style.backgroundColor =
-                                            finalTheme.colors.surface.secondary;
-                                        e.currentTarget.style.color = finalTheme.colors.text.primary;
-                                        e.currentTarget.style.borderColor =
-                                            finalTheme.colors.border.secondary;
-                                        e.currentTarget.style.transform = 'scale(1.05)';
-                                    }, onMouseLeave: (e) => {
-                                        e.currentTarget.style.backgroundColor =
-                                            finalTheme.colors.surface.elevated;
-                                        e.currentTarget.style.color =
-                                            finalTheme.colors.text.secondary;
-                                        e.currentTarget.style.borderColor =
-                                            finalTheme.colors.border.primary;
-                                        e.currentTarget.style.transform = 'scale(1)';
-                                    }, title: "Close", children: "\u00D7" }) }), jsxs("div", { className: `fixed top-0 h-full w-full z-50 flex flex-col relative
-                ${modalPosition === 'left' ? 'left-0 rounded-r-lg' : 'right-0 rounded-l-lg'}
-                ${showHistory ? 'sm:w-[90vw] md:w-[700px]' : 'sm:w-[80vw] md:w-[550px]'}
+    return (jsxs(Fragment, { children: [jsx("style", { children: scrollbarStyles }), jsxs(ErrorBoundary, { children: [!isOpen && showFloatingButton && (jsx(FloatingChatButton, { onClick: handleOpen, theme: theme, icon: floatingButtonIcon, position: floatingButtonPosition, size: floatingButtonSize, className: floatingButtonClassName, zIndex: overlayZIndex })), shouldRenderPanel && (jsxs("div", { className: "fixed inset-0 z-50", style: overlayZIndex !== undefined ? { zIndex: overlayZIndex } : undefined, children: [jsx("div", { className: `absolute inset-0 bg-black/20 transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`, onClick: handleClose }), jsx("div", { className: `fixed top-0 z-50 flex h-full min-h-0 flex-col overflow-hidden ${panelRoundedClass}
+                ${expandedWidthClass}
                 transition-all duration-300 ease-out
                 ${getAnimationClasses()}
+                ${modalPosition === 'left' ? 'left-0' : 'right-0'}
               `, style: {
-                                    backgroundColor: finalTheme.colors.background.primary,
+                                    /* Chrome shell matches header + history; main chat column uses primary below */
+                                    backgroundColor: finalTheme.colors.background.secondary,
                                     color: finalTheme.colors.text.primary,
                                     boxShadow: modalPosition === 'left'
                                         ? '8px 0 32px rgba(0, 0, 0, 0.3), 4px 0 16px rgba(0, 0, 0, 0.2)'
                                         : '-8px 0 32px rgba(0, 0, 0, 0.3), -4px 0 16px rgba(0, 0, 0, 0.2)',
-                                }, ref: containerRef, onClick: (e) => e.stopPropagation(), children: [jsx("div", { className: `flex items-center justify-between px-6 py-4 border-b min-h-[72px] transition-all duration-500 delay-100 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`, style: {
-                                            borderColor: finalTheme.colors.border.primary,
-                                            backgroundColor: finalTheme.colors.background.primary,
-                                        }, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: `inline-flex items-center justify-center rounded-full w-8 h-8 transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-75 rotate-12'}`, style: { backgroundColor: finalTheme.colors.primary[600] }, children: typeof headerIcon === 'string' ? (jsx(Icon, { name: headerIcon, size: "sm", style: { color: finalTheme.colors.text.primary } })) : (headerIcon || (jsx(Icon, { name: "command", size: "sm", style: { color: finalTheme.colors.text.primary } }))) }), jsxs("div", { className: `transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2'}`, children: [jsx("div", { className: "font-bold text-lg leading-tight", style: { color: finalTheme.colors.text.primary }, children: headerTitle }), jsx("div", { className: "text-xs", style: { color: finalTheme.colors.text.tertiary }, children: headerSubtitle })] })] }) }), jsxs("div", { className: `flex flex-1 min-h-0 h-full transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`, children: [showHistory && (jsx(ChatHistorySidebar, { chats: chats || {}, currentChatId: currentChatId || 'default', switchChat: handleHistorySwitchChat, newChat: handleHistoryNewChat, theme: finalTheme, isOpen: isOpen })), jsx("div", { className: "flex-1 flex flex-col min-h-0 h-full", children: jsx("div", { className: `flex-1 px-6 py-4 min-h-0 transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`, style: {
+                                }, ref: containerRef, onClick: (e) => e.stopPropagation(), children: jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [jsxs("div", { className: `flex min-h-[72px] items-center justify-between border-b px-6 py-4 transition-all duration-500 delay-100 ${isOpen ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'}`, style: {
+                                                borderColor: finalTheme.colors.border.primary,
+                                                backgroundColor: finalTheme.colors.background.secondary,
+                                            }, children: [jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [jsx("span", { className: `inline-flex h-8 w-8 items-center justify-center rounded-full transition-all duration-500 delay-200 ${isOpen ? 'rotate-0 scale-100 opacity-100' : 'rotate-12 scale-75 opacity-0'}`, style: {
+                                                                backgroundColor: finalTheme.colors.surface.tertiary,
+                                                                border: `1px solid ${finalTheme.colors.border.secondary}`,
+                                                            }, children: typeof headerIcon === 'string' ? (jsx(Icon, { name: headerIcon, size: "sm", style: { color: finalTheme.colors.primary[400] } })) : (headerIcon || (jsx(Icon, { name: "command", size: "sm", style: { color: finalTheme.colors.primary[400] } }))) }), jsxs("div", { className: `min-w-0 transition-all duration-500 delay-300 ${isOpen ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-0'}`, children: [jsx("div", { className: "text-lg font-bold leading-tight", style: { color: finalTheme.colors.text.primary }, children: headerTitle }), jsx("div", { className: "text-xs", style: { color: finalTheme.colors.text.tertiary }, children: headerSubtitle })] })] }), jsx("button", { type: "button", onClick: handleClose, className: "ml-2 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full text-xl font-bold transition-transform hover:scale-105", style: {
+                                                        backgroundColor: finalTheme.colors.surface.elevated,
+                                                        color: finalTheme.colors.text.secondary,
+                                                        border: `2px solid ${finalTheme.colors.border.primary}`,
+                                                        boxShadow: finalTheme.shadows?.lg,
+                                                    }, title: "Close", "aria-label": "Close chat panel", children: "\u00D7" })] }), jsxs("div", { className: `flex min-h-0 flex-1 flex-row transition-all duration-500 delay-200 ${isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}`, children: [showHistory && (jsx(ChatHistorySidebar, { chats: chats || {}, currentChatId: currentChatId || 'default', switchChat: handleHistorySwitchChat, newChat: handleHistoryNewChat, onCloseChat: handleCloseChat, expandOnHover: expandOnHover, theme: finalTheme, isOpen: isOpen })), jsx("div", { className: `flex min-h-0 min-w-0 flex-1 flex-col ${showHistory ? 'border-l' : ''}`, style: {
+                                                        borderColor: showHistory
+                                                            ? finalTheme.colors.border.primary
+                                                            : undefined,
                                                         backgroundColor: finalTheme.colors.background.primary,
-                                                    }, children: jsx(Conversation, { onSuggestionClick: handleSuggestionClick, theme: finalTheme, showProfileBubbles: showProfileBubbles, autoScroll: true, showInput: true, 
-                                                        // AI functionality props
-                                                        userId: userId, serverConfig: serverConfig, formData: formData, setFormState: setFormState, onNavigate: onNavigate, chatLevel: chatLevel, 
-                                                        // External chat management
-                                                        chats: chats, setChats: setChats, currentChatId: currentChatId, setCurrentChatId: setCurrentChatId, 
-                                                        // Model configuration
-                                                        models: models, defaultModel: defaultModel, showUsageStats: showUsageStats, maxFileSize: maxFileSize, features: features, 
-                                                        // Initial query handling
-                                                        initialQuery: initialQuery, setInitialQuery: setInitialQuery }) }) })] })] })] }))] })] }));
+                                                    }, children: jsx("div", { className: `min-h-0 flex-1 px-6 py-4 transition-all duration-500 delay-300 ${isOpen ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`, children: jsx(Conversation, { onSuggestionClick: handleSuggestionClick, theme: finalTheme, showProfileBubbles: showProfileBubbles, autoScroll: true, showInput: true, userId: userId, serverConfig: serverConfig, formData: formData, setFormState: setFormState, onNavigate: onNavigate, chatLevel: chatLevel, chats: chats, setChats: setChats, currentChatId: currentChatId, setCurrentChatId: setCurrentChatId, models: models, defaultModel: defaultModel, showUsageStats: showUsageStats, maxFileSize: maxFileSize, features: features, initialQuery: initialQuery, setInitialQuery: setInitialQuery, chatInputRef: chatInputRef, focusChatNonce: focusChatNonce }) }) })] })] }) })] }))] })] }));
 }
 /**
- * ChatHistorySidebar component with animation support
+ * ChatHistorySidebar — optional collapsed strip; expands on hover (or tap) for more room for the main chat.
  */
-function ChatHistorySidebar({ chats, currentChatId, switchChat, newChat, theme, isOpen, }) {
-    return (jsx("div", { className: `flex-shrink-0 flex-grow-0 border-r flex flex-col h-full p-2 w-[150px] transition-all duration-500 delay-400 ${isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-4'}`, style: {
+function ChatHistorySidebar({ chats, currentChatId, switchChat, newChat, onCloseChat, expandOnHover = true, theme, isOpen, }) {
+    const [historyExpanded, setHistoryExpanded] = useState(false);
+    const leaveTimerRef = useRef(null);
+    useEffect(() => {
+        if (!isOpen)
+            setHistoryExpanded(false);
+    }, [isOpen]);
+    const clearLeaveTimer = useCallback(() => {
+        if (leaveTimerRef.current != null) {
+            clearTimeout(leaveTimerRef.current);
+            leaveTimerRef.current = null;
+        }
+    }, []);
+    useEffect(() => () => clearLeaveTimer(), [clearLeaveTimer]);
+    const handleSidebarEnter = useCallback(() => {
+        clearLeaveTimer();
+        if (expandOnHover)
+            setHistoryExpanded(true);
+    }, [expandOnHover, clearLeaveTimer]);
+    const handleSidebarLeave = useCallback(() => {
+        if (!expandOnHover)
+            return;
+        clearLeaveTimer();
+        leaveTimerRef.current = setTimeout(() => {
+            setHistoryExpanded(false);
+            leaveTimerRef.current = null;
+        }, 220);
+    }, [expandOnHover, clearLeaveTimer]);
+    const listExpanded = !expandOnHover || historyExpanded;
+    const widthClass = expandOnHover
+        ? listExpanded
+            ? 'w-[min(52vw,220px)] max-w-[220px]'
+            : 'w-14'
+        : 'w-[150px]';
+    const chatRows = Object.keys(chats)
+        .sort((a, b) => Number(b) - Number(a))
+        .map((chatId) => (jsxs("div", { className: "flex w-full cursor-pointer items-center gap-1 rounded-full px-2 py-2 transition-colors", style: {
+            backgroundColor: chatId === currentChatId
+                ? theme.colors.primary[900]
+                : 'transparent',
+            color: chatId === currentChatId
+                ? theme.colors.primary[100]
+                : theme.colors.text.secondary,
+            fontWeight: chatId === currentChatId ? 'bold' : 'normal',
+        }, onMouseEnter: (e) => {
+            if (chatId !== currentChatId) {
+                e.currentTarget.style.backgroundColor = theme.colors.surface.secondary;
+            }
+        }, onMouseLeave: (e) => {
+            if (chatId !== currentChatId) {
+                e.currentTarget.style.backgroundColor = 'transparent';
+            }
+        }, onClick: () => switchChat(chatId), title: (chats[chatId]?.[0]
+            ? getTextFromMessage(chats[chatId][0])
+            : '')?.slice(0, 30) ||
+            `Chat started at ${new Date(Number(chatId)).toLocaleString()}`, children: [jsx("span", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full", style: {
+                    backgroundColor: theme.colors.surface.secondary,
+                    color: theme.colors.primary[400],
+                }, children: jsx("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("div", { className: "truncate font-semibold", children: (chats[chatId]?.[0]
+                            ? getTextFromMessage(chats[chatId][0])
+                            : '')?.slice(0, 18) || 'New chat' }), jsx("div", { className: "text-xs", style: { color: theme.colors.text.tertiary }, children: (() => {
+                            const now = Date.now();
+                            const diff = Math.floor((now - Number(chatId)) / 1000);
+                            if (diff < 60)
+                                return 'Just now';
+                            if (diff < 3600)
+                                return `${Math.floor(diff / 60)}m ago`;
+                            if (diff < 86400)
+                                return `${Math.floor(diff / 3600)}h ago`;
+                            return `${Math.floor(diff / 86400)}d ago`;
+                        })() })] }), onCloseChat && (jsx("button", { type: "button", className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md text-base font-semibold leading-none transition-colors", style: {
+                    color: theme.colors.text.primary,
+                    backgroundColor: theme.colors.surface.secondary,
+                    border: `1px solid ${theme.colors.border.secondary}`,
+                }, title: "Close chat", "aria-label": "Close chat", onClick: (e) => {
+                    e.stopPropagation();
+                    onCloseChat(chatId);
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = theme.colors.surface.tertiary;
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = theme.colors.surface.secondary;
+                }, children: "\u00D7" }))] }, chatId)));
+    return (jsx("div", { className: `flex h-full flex-shrink-0 flex-grow-0 flex-col overflow-hidden border-r transition-[width] duration-300 ease-out ${isOpen ? 'translate-x-0 opacity-100' : 'translate-x-4 opacity-0'} ${widthClass}`, style: {
             backgroundColor: theme.colors.background.secondary,
             borderColor: theme.colors.border.primary,
-        }, children: jsxs("div", { className: "flex-1 overflow-y-auto flex flex-col items-center gap-2 p-2 custom-scrollbar", children: [jsx("button", { className: "rounded-lg w-full py-2 font-bold text-xl mb-2 shadow transition-colors", style: {
-                        backgroundColor: theme.colors.primary[600],
-                        color: theme.colors.text.inverse,
-                        borderColor: theme.colors.primary[700],
-                    }, onMouseEnter: (e) => {
-                        e.currentTarget.style.backgroundColor = theme.colors.primary[700];
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = theme.colors.primary[600];
-                    }, onClick: newChat, children: "+" }), Object.keys(chats)
-                    .sort((a, b) => Number(b) - Number(a))
-                    .map((chatId) => (jsxs("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors w-full", style: {
-                        backgroundColor: chatId === currentChatId
-                            ? theme.colors.primary[900]
-                            : theme.colors.surface.primary,
-                        color: chatId === currentChatId
-                            ? theme.colors.primary[100]
-                            : theme.colors.text.secondary,
-                        fontWeight: chatId === currentChatId ? 'bold' : 'normal',
-                    }, onMouseEnter: (e) => {
-                        if (chatId !== currentChatId) {
-                            e.currentTarget.style.backgroundColor =
-                                theme.colors.surface.secondary;
-                        }
-                    }, onMouseLeave: (e) => {
-                        if (chatId !== currentChatId) {
-                            e.currentTarget.style.backgroundColor =
-                                theme.colors.surface.primary;
-                        }
-                    }, onClick: () => switchChat(chatId), title: (chats[chatId]?.[0]
-                        ? getTextFromMessage(chats[chatId][0])
-                        : '')?.slice(0, 30) ||
-                        `Chat started at ${new Date(Number(chatId)).toLocaleString()}`, children: [jsx("span", { className: "flex items-center justify-center w-7 h-7 rounded-full bg-blue-50", children: jsx("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "truncate font-semibold", children: (chats[chatId]?.[0]
-                                        ? getTextFromMessage(chats[chatId][0])
-                                        : '')?.slice(0, 18) || 'New chat' }), jsx("div", { className: "text-xs text-gray-400", children: (() => {
-                                        const now = Date.now();
-                                        const diff = Math.floor((now - Number(chatId)) / 1000);
-                                        if (diff < 60)
-                                            return 'Just now';
-                                        if (diff < 3600)
-                                            return `${Math.floor(diff / 60)}m ago`;
-                                        if (diff < 86400)
-                                            return `${Math.floor(diff / 3600)}h ago`;
-                                        return `${Math.floor(diff / 86400)}d ago`;
-                                    })() })] })] }, chatId)))] }) }));
+        }, onMouseEnter: handleSidebarEnter, onMouseLeave: handleSidebarLeave, children: expandOnHover && !listExpanded ? (jsxs("div", { className: "flex flex-1 flex-col items-center gap-2 px-1 py-3", children: [jsx("button", { type: "button", className: "inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full text-xl font-bold transition-colors", style: {
+                        backgroundColor: theme.colors.surface.tertiary,
+                        color: theme.colors.primary[400],
+                        border: `1px solid ${theme.colors.border.secondary}`,
+                    }, title: "New chat", "aria-label": "New chat", onClick: () => {
+                        newChat();
+                        setHistoryExpanded(true);
+                    }, children: "+" }), jsx("button", { type: "button", className: "inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full transition-transform hover:scale-105", style: {
+                        backgroundColor: theme.colors.surface.tertiary,
+                        border: `1px solid ${theme.colors.border.secondary}`,
+                    }, title: "Open chat history", "aria-label": "Open chat history", onClick: () => setHistoryExpanded(true), children: jsx("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", style: { color: theme.colors.primary[400] }, children: jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) })] })) : (jsx("div", { className: "flex min-h-0 flex-1 flex-col p-2", children: jsxs("div", { className: "custom-scrollbar flex flex-1 flex-col items-center gap-2 overflow-y-auto p-2", children: [jsx("button", { className: "mb-2 w-full rounded-full py-2 text-xl font-bold shadow transition-colors", style: {
+                            backgroundColor: theme.colors.primary[600],
+                            color: theme.colors.text.inverse,
+                            borderColor: theme.colors.primary[700],
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = theme.colors.primary[700];
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = theme.colors.primary[600];
+                        }, onClick: newChat, children: "+" }), chatRows] }) })) }));
 }
 /**
  * FloatingChatButton component

package/dist/index.js

@@ -2809,8 +2809,10 @@ initialQuery, setInitialQuery,
 // Clear chat functionality
 showClearChat = false, onClearChat, 
 // Additional context for AI requests
-additionalContext, }) {
+additionalContext, chatInputRef: externalChatInputRef, focusChatNonce, }) {
     const chatRef = React.useRef(null);
+    const fallbackInputRef = React.useRef(null);
+    const inputRef = externalChatInputRef ?? fallbackInputRef;
     // Internal state for AI functionality
     const [query, setQuery] = React.useState(externalQuery);
     const [attachedFiles, setAttachedFiles] = React.useState(externalAttachedFiles);
@@ -2996,6 +2998,15 @@ additionalContext, }) {
             initialQuerySentRef.current = false;
         }
     }, [initialQuery]);
+    // Focus main input when parent signals (open panel, new chat, switch chat)
+    React.useEffect(() => {
+        if (focusChatNonce === undefined || focusChatNonce < 1)
+            return;
+        const id = window.setTimeout(() => {
+            inputRef.current?.focus({ preventScroll: true });
+        }, 0);
+        return () => clearTimeout(id);
+    }, [focusChatNonce, inputRef]);
     // Scrollbar styles - dynamically themed
     const scrollbarStyles = `
     .custom-scrollbar::-webkit-scrollbar {
@@ -3037,7 +3048,7 @@ additionalContext, }) {
                                 e.currentTarget.style.color = theme.colors.text.secondary;
                                 e.currentTarget.style.backgroundColor = theme.colors.surface.primary;
                                 e.currentTarget.style.borderColor = theme.colors.border.primary;
-                            }, title: "Clear chat history", "aria-label": "Clear chat", children: [jsxRuntime.jsx(Icon, { name: "trash", size: "sm" }), "Clear Chat History"] }) })), showInput && (jsxRuntime.jsx("div", { style: { flexShrink: 0 }, children: jsxRuntime.jsx(ChatInput, { query: finalQuery, setQuery: finalSetQuery, onSend: finalOnSend, isLoading: isLoading, inputRef: React.useRef(null), attachedFiles: finalAttachedFiles, setAttachedFiles: finalSetAttachedFiles, models: models, defaultModel: defaultModel, showUsageStats: showUsageStats, maxFileSize: maxFileSize, features: features, currentModelSelection: currentModelSelection, onModelSelectionChange: handleModelSelectionChange, theme: theme, isOpen: true }) }))] })] }));
+                            }, title: "Clear chat history", "aria-label": "Clear chat", children: [jsxRuntime.jsx(Icon, { name: "trash", size: "sm" }), "Clear Chat History"] }) })), showInput && (jsxRuntime.jsx("div", { style: { flexShrink: 0 }, children: jsxRuntime.jsx(ChatInput, { query: finalQuery, setQuery: finalSetQuery, onSend: finalOnSend, isLoading: isLoading, inputRef: inputRef, attachedFiles: finalAttachedFiles, setAttachedFiles: finalSetAttachedFiles, models: models, defaultModel: defaultModel, showUsageStats: showUsageStats, maxFileSize: maxFileSize, features: features, currentModelSelection: currentModelSelection, onModelSelectionChange: handleModelSelectionChange, theme: theme, isOpen: true }) }))] })] }));
 }
 /**
  * ErrorDisplay component - used to display error messages
@@ -3367,6 +3378,14 @@ theme, isOpen, }) {
             onModelSelectionChange(modelInfo);
         }
     }, [onModelSelectionChange]);
+    /** Ghost icon buttons — explicit reset so host app (e.g. MUI) button styles don’t add light fills. */
+    const ghostIconBtnClass = 'inline-flex items-center justify-center w-9 h-9 shrink-0 rounded-md p-0 border-0 shadow-none !bg-transparent appearance-none transition-colors';
+    const ghostIconBtnStyle = {
+        backgroundColor: 'transparent',
+        border: 'none',
+        boxShadow: 'none',
+        color: theme.colors.text.secondary,
+    };
     return (jsxRuntime.jsxs("div", { className: `px-3 py-2 border-t flex flex-col gap-2 transition-all duration-500 delay-500 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`, style: { borderColor: theme.colors.border.primary }, children: [attachedFiles.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mb-2", children: attachedFiles.map((file, index) => (jsxRuntime.jsxs("div", { className: "relative group", children: [jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-lg border border-gray-200 bg-gray-50 flex items-center justify-center overflow-hidden", children: file.type.startsWith('image/') ? (jsxRuntime.jsx("img", { src: URL.createObjectURL(file), alt: `Attached ${index + 1}`, className: "w-full h-full object-cover" })) : (jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: FileHandler.getFileIcon(file) })) }), jsxRuntime.jsx("button", { onClick: () => removeFile(index), className: "absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center text-xs hover:bg-red-600 transition-colors", title: "Remove file", children: "\u00D7" }), jsxRuntime.jsx("div", { className: "absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 mt-2", children: jsxRuntime.jsxs("div", { className: "bg-gray-900 text-white text-xs rounded-lg px-2 py-1 whitespace-nowrap shadow-lg", children: [jsxRuntime.jsx("div", { className: "font-medium truncate max-w-32", title: file.name, children: file.name }), jsxRuntime.jsxs("div", { className: "text-gray-300", children: [FileHandler.getFileTypeDescription(file), " \u2022", ' ', FileHandler.formatFileSize(file.size)] }), jsxRuntime.jsx("div", { className: "absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-gray-900 rotate-45" })] }) })] }, index))) })), incompatibleFiles.length > 0 && (jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-1 text-sm text-orange-700 bg-orange-50 border border-orange-200 rounded px-3 py-2 mb-2", children: [jsxRuntime.jsx("button", { onClick: () => setIncompatibleFiles([]), className: "absolute top-1 right-1 w-5 h-5 flex items-center justify-center text-orange-500 hover:text-orange-700 hover:bg-orange-200 rounded-full transition-colors", title: "Dismiss", type: "button", children: "\u00D7" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pr-6", children: [jsxRuntime.jsx("span", { children: "\u26A0\uFE0F" }), jsxRuntime.jsx("span", { className: "font-medium", children: incompatibleFiles.length === 1
                                     ? 'File not supported'
                                     : 'Some files not supported' })] }), jsxRuntime.jsxs("div", { className: "text-xs", children: [jsxRuntime.jsx("div", { className: "mb-1", children: "These files were skipped:" }), jsxRuntime.jsxs("ul", { className: "list-disc list-inside ml-2 space-y-0.5", children: [incompatibleFiles.slice(0, 3).map((fileName, index) => (jsxRuntime.jsx("li", { className: "truncate", children: fileName }, index))), incompatibleFiles.length > 3 && (jsxRuntime.jsxs("li", { children: ["... and ", incompatibleFiles.length - 3, " more"] }))] }), jsxRuntime.jsxs("div", { className: "mt-1 text-orange-600", children: ["\uD83D\uDCA1 Only ", FileHandler.getAcceptedTypesDescription(), " are supported", incompatibleFiles.some((name) => name.includes('images not supported by current model')) && (jsxRuntime.jsx("div", { className: "mt-1", children: "\uD83D\uDD04 Switch to a model showing the image icon in the model switcher to enable image uploads" }))] })] })] })), jsxRuntime.jsxs("div", { className: `relative flex flex-col gap-1 rounded border px-2 pt-1 pb-1 cursor-text transition-all duration-200 border-2 focus-within:shadow-sm ${isDragOver ? 'border-dashed bg-opacity-20' : 'border-transparent'}`, style: {
@@ -3383,21 +3402,30 @@ theme, isOpen, }) {
                     }
                 }, onClick: handleContainerClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [isDragOver && (jsxRuntime.jsx("div", { className: "absolute top-2 left-2 right-2 bottom-2 flex items-center justify-center py-1 bg-blue-100 rounded text-blue-600 text-sm font-medium z-10 pointer-events-none", children: "\uD83D\uDCC2 Drop files here" })), jsxRuntime.jsx("textarea", { ref: inputRef, value: query, onChange: (e) => setQuery(e.target.value), onFocus: () => setFocused(true), onBlur: () => setFocused(false), onKeyDown: (e) => e.key === 'Enter' && !e.shiftKey && (e.preventDefault(), onSend()), onPaste: handlePaste, placeholder: "Describe what you need... (Try: 'I want to know how much time has been updated')", className: "w-full outline-none resize-none min-h-[3.5rem] max-h-32 border-none px-0 bg-transparent", style: {
                             color: theme.colors.text.primary,
-                        }, rows: 3 }), jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex gap-1", children: [features.fileUploads !== false && (jsxRuntime.jsx("button", { className: "p-1 cursor-pointer disabled:opacity-50 disabled:cursor-default transition-colors", style: { color: theme.colors.text.tertiary }, onMouseEnter: (e) => {
-                                            e.currentTarget.style.color = theme.colors.primary[500];
+                        }, rows: 3 }), jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex gap-1", children: [features.fileUploads !== false && (jsxRuntime.jsx("button", { type: "button", className: `${ghostIconBtnClass} cursor-pointer disabled:cursor-not-allowed disabled:opacity-50`, style: ghostIconBtnStyle, onMouseEnter: (e) => {
+                                            e.currentTarget.style.color = theme.colors.primary[400];
+                                            e.currentTarget.style.backgroundColor = theme.colors.surface.secondary;
                                         }, onMouseLeave: (e) => {
-                                            e.currentTarget.style.color = theme.colors.text.tertiary;
-                                        }, title: `Attach files - Supports: ${FileHandler.getAcceptedTypesDescription()}`, tabIndex: -1, type: "button", onClick: () => fileInputRef.current?.click(), children: jsxRuntime.jsx(Icon, { name: "paperclip", size: "sm" }) })), features.enableImageUploads !== false &&
-                                        features.imageAnalysis !== false && (jsxRuntime.jsx("button", { className: `p-1 cursor-pointer disabled:opacity-50 disabled:cursor-default transition-colors ${!imageSupported ? 'opacity-50 cursor-not-allowed' : ''}`, style: { color: theme.colors.text.tertiary }, onMouseEnter: (e) => {
+                                            e.currentTarget.style.color = theme.colors.text.secondary;
+                                            e.currentTarget.style.backgroundColor = 'transparent';
+                                        }, title: `Attach files - Supports: ${FileHandler.getAcceptedTypesDescription()}`, tabIndex: -1, onClick: () => fileInputRef.current?.click(), children: jsxRuntime.jsx(Icon, { name: "paperclip", size: "sm" }) })), features.enableImageUploads !== false &&
+                                        features.imageAnalysis !== false && (jsxRuntime.jsx("button", { type: "button", className: `${ghostIconBtnClass} cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${!imageSupported ? 'opacity-50' : ''}`, style: ghostIconBtnStyle, onMouseEnter: (e) => {
                                             if (imageSupported) {
-                                                e.currentTarget.style.color = theme.colors.primary[500];
+                                                e.currentTarget.style.color = theme.colors.primary[400];
+                                                e.currentTarget.style.backgroundColor =
+                                                    theme.colors.surface.secondary;
                                             }
                                         }, onMouseLeave: (e) => {
-                                            e.currentTarget.style.color = theme.colors.text.tertiary;
+                                            e.currentTarget.style.color = theme.colors.text.secondary;
+                                            e.currentTarget.style.backgroundColor = 'transparent';
                                         }, title: imageSupported
                                             ? 'Attach images - AI can analyze image content'
-                                            : "Current model doesn't support images. Switch to GPT-4O, Claude, or Gemini to use image attachments.", tabIndex: -1, type: "button", onClick: () => imageSupported && imageInputRef.current?.click(), disabled: !imageSupported, children: jsxRuntime.jsx(Icon, { name: "image", size: "sm" }) })), jsxRuntime.jsx("button", { className: "p-1 cursor-pointer disabled:opacity-50 disabled:cursor-default transition-colors", style: { color: theme.colors.text.tertiary }, title: "Record audio (coming soon)", tabIndex: -1, type: "button", onClick: handleAudioRecord, disabled: true, children: jsxRuntime.jsx(Icon, { name: "microphone", size: "sm" }) })] }), jsxRuntime.jsx("button", { onClick: () => onSend(), disabled: (!query.trim() && attachedFiles.length === 0) || isLoading, className: "rounded-full transition disabled:opacity-50 p-2", style: {
+                                            : "Current model doesn't support images. Switch to GPT-4O, Claude, or Gemini to use image attachments.", tabIndex: -1, onClick: () => imageSupported && imageInputRef.current?.click(), disabled: !imageSupported, children: jsxRuntime.jsx(Icon, { name: "image", size: "sm" }) })), jsxRuntime.jsx("button", { type: "button", className: `${ghostIconBtnClass} cursor-not-allowed opacity-50`, style: {
+                                            ...ghostIconBtnStyle,
+                                            color: theme.colors.text.tertiary,
+                                        }, title: "Record audio (coming soon)", tabIndex: -1, onClick: handleAudioRecord, disabled: true, children: jsxRuntime.jsx(Icon, { name: "microphone", size: "sm" }) })] }), jsxRuntime.jsx("button", { type: "button", onClick: () => onSend(), disabled: (!query.trim() && attachedFiles.length === 0) || isLoading, className: "inline-flex shrink-0 items-center justify-center rounded-full border-0 p-2 shadow-none !bg-transparent transition-colors disabled:cursor-not-allowed disabled:opacity-50", style: {
                                     color: theme.colors.text.primary,
+                                    backgroundColor: 'transparent',
                                 }, onMouseEnter: (e) => {
                                     if (!e.currentTarget.disabled) {
                                         e.currentTarget.style.backgroundColor =
@@ -3407,7 +3435,7 @@ theme, isOpen, }) {
                                     if (!e.currentTarget.disabled) {
                                         e.currentTarget.style.backgroundColor = 'transparent';
                                     }
-                                }, title: "Send", tabIndex: -1, type: "button", children: jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_892_5571)", children: jsxRuntime.jsx("path", { d: "M13.3334 10.0001L10.0001 6.66675M10.0001 6.66675L6.66675 10.0001M10.0001 6.66675V13.3334M18.3334 10.0001C18.3334 14.6025 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6025 1.66675 10.0001C1.66675 5.39771 5.39771 1.66675 10.0001 1.66675C14.6025 1.66675 18.3334 5.39771 18.3334 10.0001Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_892_5571", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }) })] })] }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: FileHandler.getInputAcceptAttribute(), multiple: true, onChange: handleAllFileUpload, className: "hidden", "aria-label": "Upload any file" }), jsxRuntime.jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", multiple: true, onChange: handleImageUpload, className: "hidden", "aria-label": "Upload images" }), features.modelSwitching !== false &&
+                                }, title: "Send", tabIndex: -1, children: jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_892_5571)", children: jsxRuntime.jsx("path", { d: "M13.3334 10.0001L10.0001 6.66675M10.0001 6.66675L6.66675 10.0001M10.0001 6.66675V13.3334M18.3334 10.0001C18.3334 14.6025 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6025 1.66675 10.0001C1.66675 5.39771 5.39771 1.66675 10.0001 1.66675C14.6025 1.66675 18.3334 5.39771 18.3334 10.0001Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_892_5571", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }) })] })] }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: FileHandler.getInputAcceptAttribute(), multiple: true, onChange: handleAllFileUpload, className: "hidden", "aria-label": "Upload any file" }), jsxRuntime.jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", multiple: true, onChange: handleImageUpload, className: "hidden", "aria-label": "Upload images" }), features.modelSwitching !== false &&
                 features.imageAnalysis !== false &&
                 features.enableImageUploads !== false &&
                 !imageSupported &&
@@ -3510,7 +3538,37 @@ showHistory = false, // Default to hidden
 showProfileBubbles = false, // Default to hidden
 modalPosition = 'left', // Default to left position
 serverConfig, models, defaultModel, showUsageStats, maxFileSize, features = {}, showFloatingButton = false, floatingButtonIcon, floatingButtonPosition = 'bottom-right', floatingButtonSize = 'md', floatingButtonClassName = '', chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, headerIcon = 'command', // Default to bot icon
-headerTitle = 'AI Logistics & Customs Expert', headerSubtitle = 'Ready to assist you with your queries', onSuggestionSelect, overlayZIndex, }) {
+headerTitle = 'AI Logistics & Customs Expert', headerSubtitle = 'Ready to assist you with your queries', onSuggestionSelect, overlayZIndex, expandOnHover = true, }) {
+    const chatInputRef = React.useRef(null);
+    const [focusChatNonce, setFocusChatNonce] = React.useState(0);
+    /** Match original slide-out sizing (not the temporary wider caps). */
+    const expandedWidthClass = showHistory
+        ? 'w-[min(90vw,700px)] max-w-[700px]'
+        : 'w-[min(80vw,550px)] max-w-[550px]';
+    const panelRoundedClass = modalPosition === 'right' ? 'rounded-l-lg' : 'rounded-r-lg';
+    // Focus the main input when the panel opens, chat switches, or new chat is selected
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        setFocusChatNonce((n) => n + 1);
+    }, [isOpen, currentChatId]);
+    const handleCloseChat = React.useCallback((chatId) => {
+        setChats?.((prev) => {
+            const next = { ...prev };
+            delete next[chatId];
+            setCurrentChatId?.((cur) => {
+                if (cur !== chatId)
+                    return cur;
+                const keys = Object.keys(next).sort((a, b) => Number(b) - Number(a));
+                if (keys.length)
+                    return keys[0];
+                const nid = Date.now().toString();
+                setChats?.((p) => ({ ...p, [nid]: [] }));
+                return nid;
+            });
+            return next;
+        });
+    }, [setChats, setCurrentChatId]);
     const handleSuggestionClick = (s) => {
         if (onSuggestionSelect) {
             onSuggestionSelect(s);
@@ -3546,6 +3604,16 @@ headerTitle = 'AI Logistics & Customs Expert', headerSubtitle = 'Ready to assist
             });
         }
     }, [isOpen, isVisible]);
+    // If parent sets isOpen false without calling our handleClose, isVisible can stay true and
+    // shouldRenderPanel keeps the fixed overlay mounted (e.g. stray strip during app loading).
+    React.useEffect(() => {
+        if (!isOpen && isVisible) {
+            const id = window.setTimeout(() => {
+                setIsVisible(false);
+            }, 300);
+            return () => window.clearTimeout(id);
+        }
+    }, [isOpen, isVisible]);
     // Handle closing animation
     const handleClose = React.useCallback(() => {
         if (!isAnimating) {
@@ -3680,105 +3748,143 @@ headerTitle = 'AI Logistics & Customs Expert', headerSubtitle = 'Ready to assist
       transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
     }
   `;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: scrollbarStyles }), jsxRuntime.jsxs(ErrorBoundary, { children: [!isOpen && showFloatingButton && (jsxRuntime.jsx(FloatingChatButton, { onClick: handleOpen, theme: theme, icon: floatingButtonIcon, position: floatingButtonPosition, size: floatingButtonSize, className: floatingButtonClassName, zIndex: overlayZIndex })), shouldRenderPanel && (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50", style: overlayZIndex !== undefined ? { zIndex: overlayZIndex } : undefined, children: [jsxRuntime.jsx("div", { className: `absolute inset-0 bg-black/20 transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`, onClick: handleClose }), jsxRuntime.jsx("div", { className: `fixed z-[60] top-6 transition-all duration-300 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-75'}`, style: { ...(modalPosition === 'left'
-                                        ? { left: showHistory ? 'min(90vw, 700px)' : 'min(80vw, 550px)', marginLeft: '16px' }
-                                        : { right: showHistory ? 'min(90vw, 700px)' : 'min(80vw, 550px)', marginRight: '16px' }) }, children: jsxRuntime.jsx("button", { onClick: handleClose, className: "w-10 h-10 rounded-full shadow-lg transition-all duration-200 flex items-center justify-center text-xl font-bold hover:scale-110", style: {
-                                        backgroundColor: finalTheme.colors.surface.elevated,
-                                        color: finalTheme.colors.text.secondary,
-                                        border: `2px solid ${finalTheme.colors.border.primary}`,
-                                        boxShadow: finalTheme.shadows.lg,
-                                    }, onMouseEnter: (e) => {
-                                        e.currentTarget.style.backgroundColor =
-                                            finalTheme.colors.surface.secondary;
-                                        e.currentTarget.style.color = finalTheme.colors.text.primary;
-                                        e.currentTarget.style.borderColor =
-                                            finalTheme.colors.border.secondary;
-                                        e.currentTarget.style.transform = 'scale(1.05)';
-                                    }, onMouseLeave: (e) => {
-                                        e.currentTarget.style.backgroundColor =
-                                            finalTheme.colors.surface.elevated;
-                                        e.currentTarget.style.color =
-                                            finalTheme.colors.text.secondary;
-                                        e.currentTarget.style.borderColor =
-                                            finalTheme.colors.border.primary;
-                                        e.currentTarget.style.transform = 'scale(1)';
-                                    }, title: "Close", children: "\u00D7" }) }), jsxRuntime.jsxs("div", { className: `fixed top-0 h-full w-full z-50 flex flex-col relative
-                ${modalPosition === 'left' ? 'left-0 rounded-r-lg' : 'right-0 rounded-l-lg'}
-                ${showHistory ? 'sm:w-[90vw] md:w-[700px]' : 'sm:w-[80vw] md:w-[550px]'}
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: scrollbarStyles }), jsxRuntime.jsxs(ErrorBoundary, { children: [!isOpen && showFloatingButton && (jsxRuntime.jsx(FloatingChatButton, { onClick: handleOpen, theme: theme, icon: floatingButtonIcon, position: floatingButtonPosition, size: floatingButtonSize, className: floatingButtonClassName, zIndex: overlayZIndex })), shouldRenderPanel && (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50", style: overlayZIndex !== undefined ? { zIndex: overlayZIndex } : undefined, children: [jsxRuntime.jsx("div", { className: `absolute inset-0 bg-black/20 transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`, onClick: handleClose }), jsxRuntime.jsx("div", { className: `fixed top-0 z-50 flex h-full min-h-0 flex-col overflow-hidden ${panelRoundedClass}
+                ${expandedWidthClass}
                 transition-all duration-300 ease-out
                 ${getAnimationClasses()}
+                ${modalPosition === 'left' ? 'left-0' : 'right-0'}
               `, style: {
-                                    backgroundColor: finalTheme.colors.background.primary,
+                                    /* Chrome shell matches header + history; main chat column uses primary below */
+                                    backgroundColor: finalTheme.colors.background.secondary,
                                     color: finalTheme.colors.text.primary,
                                     boxShadow: modalPosition === 'left'
                                         ? '8px 0 32px rgba(0, 0, 0, 0.3), 4px 0 16px rgba(0, 0, 0, 0.2)'
                                         : '-8px 0 32px rgba(0, 0, 0, 0.3), -4px 0 16px rgba(0, 0, 0, 0.2)',
-                                }, ref: containerRef, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsx("div", { className: `flex items-center justify-between px-6 py-4 border-b min-h-[72px] transition-all duration-500 delay-100 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`, style: {
-                                            borderColor: finalTheme.colors.border.primary,
-                                            backgroundColor: finalTheme.colors.background.primary,
-                                        }, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("span", { className: `inline-flex items-center justify-center rounded-full w-8 h-8 transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-75 rotate-12'}`, style: { backgroundColor: finalTheme.colors.primary[600] }, children: typeof headerIcon === 'string' ? (jsxRuntime.jsx(Icon, { name: headerIcon, size: "sm", style: { color: finalTheme.colors.text.primary } })) : (headerIcon || (jsxRuntime.jsx(Icon, { name: "command", size: "sm", style: { color: finalTheme.colors.text.primary } }))) }), jsxRuntime.jsxs("div", { className: `transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2'}`, children: [jsxRuntime.jsx("div", { className: "font-bold text-lg leading-tight", style: { color: finalTheme.colors.text.primary }, children: headerTitle }), jsxRuntime.jsx("div", { className: "text-xs", style: { color: finalTheme.colors.text.tertiary }, children: headerSubtitle })] })] }) }), jsxRuntime.jsxs("div", { className: `flex flex-1 min-h-0 h-full transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`, children: [showHistory && (jsxRuntime.jsx(ChatHistorySidebar, { chats: chats || {}, currentChatId: currentChatId || 'default', switchChat: handleHistorySwitchChat, newChat: handleHistoryNewChat, theme: finalTheme, isOpen: isOpen })), jsxRuntime.jsx("div", { className: "flex-1 flex flex-col min-h-0 h-full", children: jsxRuntime.jsx("div", { className: `flex-1 px-6 py-4 min-h-0 transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`, style: {
+                                }, ref: containerRef, onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [jsxRuntime.jsxs("div", { className: `flex min-h-[72px] items-center justify-between border-b px-6 py-4 transition-all duration-500 delay-100 ${isOpen ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'}`, style: {
+                                                borderColor: finalTheme.colors.border.primary,
+                                                backgroundColor: finalTheme.colors.background.secondary,
+                                            }, children: [jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [jsxRuntime.jsx("span", { className: `inline-flex h-8 w-8 items-center justify-center rounded-full transition-all duration-500 delay-200 ${isOpen ? 'rotate-0 scale-100 opacity-100' : 'rotate-12 scale-75 opacity-0'}`, style: {
+                                                                backgroundColor: finalTheme.colors.surface.tertiary,
+                                                                border: `1px solid ${finalTheme.colors.border.secondary}`,
+                                                            }, children: typeof headerIcon === 'string' ? (jsxRuntime.jsx(Icon, { name: headerIcon, size: "sm", style: { color: finalTheme.colors.primary[400] } })) : (headerIcon || (jsxRuntime.jsx(Icon, { name: "command", size: "sm", style: { color: finalTheme.colors.primary[400] } }))) }), jsxRuntime.jsxs("div", { className: `min-w-0 transition-all duration-500 delay-300 ${isOpen ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-0'}`, children: [jsxRuntime.jsx("div", { className: "text-lg font-bold leading-tight", style: { color: finalTheme.colors.text.primary }, children: headerTitle }), jsxRuntime.jsx("div", { className: "text-xs", style: { color: finalTheme.colors.text.tertiary }, children: headerSubtitle })] })] }), jsxRuntime.jsx("button", { type: "button", onClick: handleClose, className: "ml-2 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full text-xl font-bold transition-transform hover:scale-105", style: {
+                                                        backgroundColor: finalTheme.colors.surface.elevated,
+                                                        color: finalTheme.colors.text.secondary,
+                                                        border: `2px solid ${finalTheme.colors.border.primary}`,
+                                                        boxShadow: finalTheme.shadows?.lg,
+                                                    }, title: "Close", "aria-label": "Close chat panel", children: "\u00D7" })] }), jsxRuntime.jsxs("div", { className: `flex min-h-0 flex-1 flex-row transition-all duration-500 delay-200 ${isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}`, children: [showHistory && (jsxRuntime.jsx(ChatHistorySidebar, { chats: chats || {}, currentChatId: currentChatId || 'default', switchChat: handleHistorySwitchChat, newChat: handleHistoryNewChat, onCloseChat: handleCloseChat, expandOnHover: expandOnHover, theme: finalTheme, isOpen: isOpen })), jsxRuntime.jsx("div", { className: `flex min-h-0 min-w-0 flex-1 flex-col ${showHistory ? 'border-l' : ''}`, style: {
+                                                        borderColor: showHistory
+                                                            ? finalTheme.colors.border.primary
+                                                            : undefined,
                                                         backgroundColor: finalTheme.colors.background.primary,
-                                                    }, children: jsxRuntime.jsx(Conversation, { onSuggestionClick: handleSuggestionClick, theme: finalTheme, showProfileBubbles: showProfileBubbles, autoScroll: true, showInput: true, 
-                                                        // AI functionality props
-                                                        userId: userId, serverConfig: serverConfig, formData: formData, setFormState: setFormState, onNavigate: onNavigate, chatLevel: chatLevel, 
-                                                        // External chat management
-                                                        chats: chats, setChats: setChats, currentChatId: currentChatId, setCurrentChatId: setCurrentChatId, 
-                                                        // Model configuration
-                                                        models: models, defaultModel: defaultModel, showUsageStats: showUsageStats, maxFileSize: maxFileSize, features: features, 
-                                                        // Initial query handling
-                                                        initialQuery: initialQuery, setInitialQuery: setInitialQuery }) }) })] })] })] }))] })] }));
+                                                    }, children: jsxRuntime.jsx("div", { className: `min-h-0 flex-1 px-6 py-4 transition-all duration-500 delay-300 ${isOpen ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`, children: jsxRuntime.jsx(Conversation, { onSuggestionClick: handleSuggestionClick, theme: finalTheme, showProfileBubbles: showProfileBubbles, autoScroll: true, showInput: true, userId: userId, serverConfig: serverConfig, formData: formData, setFormState: setFormState, onNavigate: onNavigate, chatLevel: chatLevel, chats: chats, setChats: setChats, currentChatId: currentChatId, setCurrentChatId: setCurrentChatId, models: models, defaultModel: defaultModel, showUsageStats: showUsageStats, maxFileSize: maxFileSize, features: features, initialQuery: initialQuery, setInitialQuery: setInitialQuery, chatInputRef: chatInputRef, focusChatNonce: focusChatNonce }) }) })] })] }) })] }))] })] }));
 }
 /**
- * ChatHistorySidebar component with animation support
+ * ChatHistorySidebar — optional collapsed strip; expands on hover (or tap) for more room for the main chat.
  */
-function ChatHistorySidebar({ chats, currentChatId, switchChat, newChat, theme, isOpen, }) {
-    return (jsxRuntime.jsx("div", { className: `flex-shrink-0 flex-grow-0 border-r flex flex-col h-full p-2 w-[150px] transition-all duration-500 delay-400 ${isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-4'}`, style: {
+function ChatHistorySidebar({ chats, currentChatId, switchChat, newChat, onCloseChat, expandOnHover = true, theme, isOpen, }) {
+    const [historyExpanded, setHistoryExpanded] = React.useState(false);
+    const leaveTimerRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!isOpen)
+            setHistoryExpanded(false);
+    }, [isOpen]);
+    const clearLeaveTimer = React.useCallback(() => {
+        if (leaveTimerRef.current != null) {
+            clearTimeout(leaveTimerRef.current);
+            leaveTimerRef.current = null;
+        }
+    }, []);
+    React.useEffect(() => () => clearLeaveTimer(), [clearLeaveTimer]);
+    const handleSidebarEnter = React.useCallback(() => {
+        clearLeaveTimer();
+        if (expandOnHover)
+            setHistoryExpanded(true);
+    }, [expandOnHover, clearLeaveTimer]);
+    const handleSidebarLeave = React.useCallback(() => {
+        if (!expandOnHover)
+            return;
+        clearLeaveTimer();
+        leaveTimerRef.current = setTimeout(() => {
+            setHistoryExpanded(false);
+            leaveTimerRef.current = null;
+        }, 220);
+    }, [expandOnHover, clearLeaveTimer]);
+    const listExpanded = !expandOnHover || historyExpanded;
+    const widthClass = expandOnHover
+        ? listExpanded
+            ? 'w-[min(52vw,220px)] max-w-[220px]'
+            : 'w-14'
+        : 'w-[150px]';
+    const chatRows = Object.keys(chats)
+        .sort((a, b) => Number(b) - Number(a))
+        .map((chatId) => (jsxRuntime.jsxs("div", { className: "flex w-full cursor-pointer items-center gap-1 rounded-full px-2 py-2 transition-colors", style: {
+            backgroundColor: chatId === currentChatId
+                ? theme.colors.primary[900]
+                : 'transparent',
+            color: chatId === currentChatId
+                ? theme.colors.primary[100]
+                : theme.colors.text.secondary,
+            fontWeight: chatId === currentChatId ? 'bold' : 'normal',
+        }, onMouseEnter: (e) => {
+            if (chatId !== currentChatId) {
+                e.currentTarget.style.backgroundColor = theme.colors.surface.secondary;
+            }
+        }, onMouseLeave: (e) => {
+            if (chatId !== currentChatId) {
+                e.currentTarget.style.backgroundColor = 'transparent';
+            }
+        }, onClick: () => switchChat(chatId), title: (chats[chatId]?.[0]
+            ? getTextFromMessage(chats[chatId][0])
+            : '')?.slice(0, 30) ||
+            `Chat started at ${new Date(Number(chatId)).toLocaleString()}`, children: [jsxRuntime.jsx("span", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full", style: {
+                    backgroundColor: theme.colors.surface.secondary,
+                    color: theme.colors.primary[400],
+                }, children: jsxRuntime.jsx("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) }), jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("div", { className: "truncate font-semibold", children: (chats[chatId]?.[0]
+                            ? getTextFromMessage(chats[chatId][0])
+                            : '')?.slice(0, 18) || 'New chat' }), jsxRuntime.jsx("div", { className: "text-xs", style: { color: theme.colors.text.tertiary }, children: (() => {
+                            const now = Date.now();
+                            const diff = Math.floor((now - Number(chatId)) / 1000);
+                            if (diff < 60)
+                                return 'Just now';
+                            if (diff < 3600)
+                                return `${Math.floor(diff / 60)}m ago`;
+                            if (diff < 86400)
+                                return `${Math.floor(diff / 3600)}h ago`;
+                            return `${Math.floor(diff / 86400)}d ago`;
+                        })() })] }), onCloseChat && (jsxRuntime.jsx("button", { type: "button", className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md text-base font-semibold leading-none transition-colors", style: {
+                    color: theme.colors.text.primary,
+                    backgroundColor: theme.colors.surface.secondary,
+                    border: `1px solid ${theme.colors.border.secondary}`,
+                }, title: "Close chat", "aria-label": "Close chat", onClick: (e) => {
+                    e.stopPropagation();
+                    onCloseChat(chatId);
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = theme.colors.surface.tertiary;
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = theme.colors.surface.secondary;
+                }, children: "\u00D7" }))] }, chatId)));
+    return (jsxRuntime.jsx("div", { className: `flex h-full flex-shrink-0 flex-grow-0 flex-col overflow-hidden border-r transition-[width] duration-300 ease-out ${isOpen ? 'translate-x-0 opacity-100' : 'translate-x-4 opacity-0'} ${widthClass}`, style: {
             backgroundColor: theme.colors.background.secondary,
             borderColor: theme.colors.border.primary,
-        }, children: jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto flex flex-col items-center gap-2 p-2 custom-scrollbar", children: [jsxRuntime.jsx("button", { className: "rounded-lg w-full py-2 font-bold text-xl mb-2 shadow transition-colors", style: {
-                        backgroundColor: theme.colors.primary[600],
-                        color: theme.colors.text.inverse,
-                        borderColor: theme.colors.primary[700],
-                    }, onMouseEnter: (e) => {
-                        e.currentTarget.style.backgroundColor = theme.colors.primary[700];
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = theme.colors.primary[600];
-                    }, onClick: newChat, children: "+" }), Object.keys(chats)
-                    .sort((a, b) => Number(b) - Number(a))
-                    .map((chatId) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors w-full", style: {
-                        backgroundColor: chatId === currentChatId
-                            ? theme.colors.primary[900]
-                            : theme.colors.surface.primary,
-                        color: chatId === currentChatId
-                            ? theme.colors.primary[100]
-                            : theme.colors.text.secondary,
-                        fontWeight: chatId === currentChatId ? 'bold' : 'normal',
-                    }, onMouseEnter: (e) => {
-                        if (chatId !== currentChatId) {
-                            e.currentTarget.style.backgroundColor =
-                                theme.colors.surface.secondary;
-                        }
-                    }, onMouseLeave: (e) => {
-                        if (chatId !== currentChatId) {
-                            e.currentTarget.style.backgroundColor =
-                                theme.colors.surface.primary;
-                        }
-                    }, onClick: () => switchChat(chatId), title: (chats[chatId]?.[0]
-                        ? getTextFromMessage(chats[chatId][0])
-                        : '')?.slice(0, 30) ||
-                        `Chat started at ${new Date(Number(chatId)).toLocaleString()}`, children: [jsxRuntime.jsx("span", { className: "flex items-center justify-center w-7 h-7 rounded-full bg-blue-50", children: jsxRuntime.jsx("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx("div", { className: "truncate font-semibold", children: (chats[chatId]?.[0]
-                                        ? getTextFromMessage(chats[chatId][0])
-                                        : '')?.slice(0, 18) || 'New chat' }), jsxRuntime.jsx("div", { className: "text-xs text-gray-400", children: (() => {
-                                        const now = Date.now();
-                                        const diff = Math.floor((now - Number(chatId)) / 1000);
-                                        if (diff < 60)
-                                            return 'Just now';
-                                        if (diff < 3600)
-                                            return `${Math.floor(diff / 60)}m ago`;
-                                        if (diff < 86400)
-                                            return `${Math.floor(diff / 3600)}h ago`;
-                                        return `${Math.floor(diff / 86400)}d ago`;
-                                    })() })] })] }, chatId)))] }) }));
+        }, onMouseEnter: handleSidebarEnter, onMouseLeave: handleSidebarLeave, children: expandOnHover && !listExpanded ? (jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center gap-2 px-1 py-3", children: [jsxRuntime.jsx("button", { type: "button", className: "inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full text-xl font-bold transition-colors", style: {
+                        backgroundColor: theme.colors.surface.tertiary,
+                        color: theme.colors.primary[400],
+                        border: `1px solid ${theme.colors.border.secondary}`,
+                    }, title: "New chat", "aria-label": "New chat", onClick: () => {
+                        newChat();
+                        setHistoryExpanded(true);
+                    }, children: "+" }), jsxRuntime.jsx("button", { type: "button", className: "inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full transition-transform hover:scale-105", style: {
+                        backgroundColor: theme.colors.surface.tertiary,
+                        border: `1px solid ${theme.colors.border.secondary}`,
+                    }, title: "Open chat history", "aria-label": "Open chat history", onClick: () => setHistoryExpanded(true), children: jsxRuntime.jsx("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", style: { color: theme.colors.primary[400] }, children: jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) })] })) : (jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col p-2", children: jsxRuntime.jsxs("div", { className: "custom-scrollbar flex flex-1 flex-col items-center gap-2 overflow-y-auto p-2", children: [jsxRuntime.jsx("button", { className: "mb-2 w-full rounded-full py-2 text-xl font-bold shadow transition-colors", style: {
+                            backgroundColor: theme.colors.primary[600],
+                            color: theme.colors.text.inverse,
+                            borderColor: theme.colors.primary[700],
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = theme.colors.primary[700];
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = theme.colors.primary[600];
+                        }, onClick: newChat, children: "+" }), chatRows] }) })) }));
 }
 /**
  * FloatingChatButton component

package/dist/server/components/ChatPanel.d.ts

@@ -60,6 +60,12 @@ interface ChatPanelProps {
      * (e.g. MUI AppBar ~1100, custom sidebars ~999). Default Tailwind z-50 is too low for many shells.
      */
     overlayZIndex?: number;
+    /**
+     * When true (default) and `showHistory` is on, only the chat history column is a narrow strip
+     * until hover (or tap) expands it; the main conversation area stays full width.
+     * Set to false to keep the history sidebar always fully expanded (~150px).
+     */
+    expandOnHover?: boolean;
 }
 /**
  * ChatPanel component
@@ -98,7 +104,7 @@ showHistory, // Default to hidden
 showProfileBubbles, // Default to hidden
 modalPosition, // Default to left position
 serverConfig, models, defaultModel, showUsageStats, maxFileSize, features, showFloatingButton, floatingButtonIcon, floatingButtonPosition, floatingButtonSize, floatingButtonClassName, chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, headerIcon, // Default to bot icon
-headerTitle, headerSubtitle, onSuggestionSelect, overlayZIndex, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
+headerTitle, headerSubtitle, onSuggestionSelect, overlayZIndex, expandOnHover, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ChatInput component
  * @param query - The current query

package/dist/server/components/Conversation.d.ts

@@ -61,6 +61,10 @@ interface ConversationProps {
     showClearChat?: boolean;
     onClearChat?: () => void;
     additionalContext?: string | Record<string, unknown>;
+    /** Optional ref to the main chat textarea (for parent focus control). */
+    chatInputRef?: React.RefObject<HTMLTextAreaElement | null>;
+    /** Increment to move focus to the main input (panel open, chat switch, new chat). */
+    focusChatNonce?: number;
 }
 /**
  * Conversation component - displays a single chat conversation
@@ -72,5 +76,5 @@ interface ConversationProps {
  * @param autoScroll - Whether to auto-scroll to bottom on new messages
  * @param maxHeight - Maximum height of the conversation container
  */
-export declare function Conversation({ chat: externalChat, onSuggestionClick, theme, showProfileBubbles, className, autoScroll, maxHeight, userId, serverConfig, formData, chatLevel, chats: externalChats, setChats: externalSetChats, currentChatId: externalCurrentChatId, setCurrentChatId: externalSetCurrentChatId, query: externalQuery, setQuery: externalSetQuery, onSend: externalOnSend, isLoading: externalIsLoading, attachedFiles: externalAttachedFiles, setAttachedFiles: externalSetAttachedFiles, models, defaultModel, showUsageStats, maxFileSize, features, currentModelSelection: externalCurrentModelSelection, onModelSelectionChange: externalOnModelSelectionChange, showInput, initialQuery, setInitialQuery, showClearChat, onClearChat, additionalContext, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Conversation({ chat: externalChat, onSuggestionClick, theme, showProfileBubbles, className, autoScroll, maxHeight, userId, serverConfig, formData, chatLevel, chats: externalChats, setChats: externalSetChats, currentChatId: externalCurrentChatId, setCurrentChatId: externalSetCurrentChatId, query: externalQuery, setQuery: externalSetQuery, onSend: externalOnSend, isLoading: externalIsLoading, attachedFiles: externalAttachedFiles, setAttachedFiles: externalSetAttachedFiles, models, defaultModel, showUsageStats, maxFileSize, features, currentModelSelection: externalCurrentModelSelection, onModelSelectionChange: externalOnModelSelectionChange, showInput, initialQuery, setInitialQuery, showClearChat, onClearChat, additionalContext, chatInputRef: externalChatInputRef, focusChatNonce, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/styles.css

@@ -1,2 +1,2 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-right-2{right:-.5rem}.-top-1{top:-.25rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.bottom-2{bottom:.5rem}.bottom-4{bottom:1rem}.bottom-6{bottom:1.5rem}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:.5rem}.left-6{left:1.5rem}.left-\[0\.5px\]{left:.5px}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-4{right:1rem}.right-6{right:1.5rem}.right-\[-4px\]{right:-4px}.right-full{right:100%}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-4{top:1rem}.top-6{top:1.5rem}.z-10{z-index:10}.z-50{z-index:50}.z-\[10000\]{z-index:10000}.z-\[60\]{z-index:60}.mx-auto{margin-left:auto;margin-right:auto}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.contents{display:contents}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-full{height:100%}.max-h-32{max-height:8rem}.max-h-64{max-height:16rem}.max-h-80{max-height:20rem}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-\[3\.5rem\]{min-height:3.5rem}.min-h-\[72px\]{min-height:72px}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-\[150px\]{width:150px}.w-full{width:100%}.min-w-0{min-width:0}.min-w-80{min-width:20rem}.max-w-32{max-width:8rem}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow-0{flex-grow:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-2{--tw-translate-x:0.5rem}.translate-x-4{--tw-translate-x:1rem}.translate-x-4,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-2{--tw-translate-y:0.5rem}.translate-y-4{--tw-translate-y:1rem}.translate-y-4,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-12{--tw-rotate:12deg}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-75{--tw-scale-x:.75;--tw-scale-y:.75}.scale-75,.scale-95{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.resize-none{resize:none}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.125rem*var(--tw-space-y-reverse));margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-l-lg{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem}.rounded-r-lg{border-bottom-right-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-current{border-color:currentColor}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-orange-200{--tw-border-opacity:1;border-color:rgb(254 215 170/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity,1))}.border-opacity-50{--tw-border-opacity:0.5}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-black\/20{background-color:rgba(0,0,0,.2)}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-black\/70{background-color:rgba(0,0,0,.7)}.bg-black\/80{background-color:rgba(0,0,0,.8)}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity,1))}.bg-opacity-20{--tw-bg-opacity:0.2}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pr-4{padding-right:1rem}.pr-6{padding-right:1.5rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-wide{letter-spacing:.025em}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18/var(--tw-text-opacity,1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4/var(--tw-text-opacity,1))}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity,1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.line-through{text-decoration-line:line-through}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.delay-100{transition-delay:.1s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.delay-500{transition-delay:.5s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.focus-within\:shadow-sm:focus-within{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:bg-amber-200:hover{--tw-bg-opacity:1;background-color:rgb(253 230 138/var(--tw-bg-opacity,1))}.hover\:bg-black\/70:hover{background-color:rgba(0,0,0,.7)}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-orange-200:hover{--tw-bg-opacity:1;background-color:rgb(254 215 170/var(--tw-bg-opacity,1))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.hover\:bg-white\/20:hover{background-color:hsla(0,0%,100%,.2)}.hover\:text-amber-700:hover{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.hover\:text-orange-700:hover{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.hover\:opacity-80:hover{opacity:.8}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(191 219 254/var(--tw-ring-opacity,1))}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:w-\[80vw\]{width:80vw}.sm\:w-\[90vw\]{width:90vw}}@media (min-width:768px){.md\:w-\[550px\]{width:550px}.md\:w-\[700px\]{width:700px}}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-right-2{right:-.5rem}.-top-1{top:-.25rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.bottom-2{bottom:.5rem}.bottom-4{bottom:1rem}.bottom-6{bottom:1.5rem}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:.5rem}.left-6{left:1.5rem}.left-\[0\.5px\]{left:.5px}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-4{right:1rem}.right-6{right:1.5rem}.right-\[-4px\]{right:-4px}.right-full{right:100%}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-4{top:1rem}.top-6{top:1.5rem}.z-10{z-index:10}.z-50{z-index:50}.z-\[10000\]{z-index:10000}.mx-auto{margin-left:auto;margin-right:auto}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.contents{display:contents}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.max-h-32{max-height:8rem}.max-h-64{max-height:16rem}.max-h-80{max-height:20rem}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-\[3\.5rem\]{min-height:3.5rem}.min-h-\[72px\]{min-height:72px}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[150px\]{width:150px}.w-\[min\(52vw\2c 220px\)\]{width:min(52vw,220px)}.w-\[min\(80vw\2c 550px\)\]{width:min(80vw,550px)}.w-\[min\(90vw\2c 700px\)\]{width:min(90vw,700px)}.w-full{width:100%}.min-w-0{min-width:0}.min-w-80{min-width:20rem}.max-w-32{max-width:8rem}.max-w-\[220px\]{max-width:220px}.max-w-\[550px\]{max-width:550px}.max-w-\[700px\]{max-width:700px}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow-0{flex-grow:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-2{--tw-translate-x:0.5rem}.translate-x-4{--tw-translate-x:1rem}.translate-x-4,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-2{--tw-translate-y:0.5rem}.translate-y-4{--tw-translate-y:1rem}.translate-y-4,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-12{--tw-rotate:12deg}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-75{--tw-scale-x:.75;--tw-scale-y:.75}.scale-75,.scale-95{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.resize-none{resize:none}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.125rem*var(--tw-space-y-reverse));margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-l-lg{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem}.rounded-r-lg{border-bottom-right-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-current{border-color:currentColor}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-orange-200{--tw-border-opacity:1;border-color:rgb(254 215 170/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity,1))}.border-opacity-50{--tw-border-opacity:0.5}.\!bg-transparent{background-color:transparent!important}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-black\/20{background-color:rgba(0,0,0,.2)}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-black\/70{background-color:rgba(0,0,0,.7)}.bg-black\/80{background-color:rgba(0,0,0,.8)}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity,1))}.bg-opacity-20{--tw-bg-opacity:0.2}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pr-4{padding-right:1rem}.pr-6{padding-right:1.5rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-wide{letter-spacing:.025em}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18/var(--tw-text-opacity,1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4/var(--tw-text-opacity,1))}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity,1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.line-through{text-decoration-line:line-through}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\[width\]{transition-duration:.15s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.delay-100{transition-delay:.1s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.delay-500{transition-delay:.5s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.focus-within\:shadow-sm:focus-within{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-amber-200:hover{--tw-bg-opacity:1;background-color:rgb(253 230 138/var(--tw-bg-opacity,1))}.hover\:bg-black\/70:hover{background-color:rgba(0,0,0,.7)}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-orange-200:hover{--tw-bg-opacity:1;background-color:rgb(254 215 170/var(--tw-bg-opacity,1))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.hover\:bg-white\/20:hover{background-color:hsla(0,0%,100%,.2)}.hover\:text-amber-700:hover{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.hover\:text-orange-700:hover{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.hover\:opacity-80:hover{opacity:.8}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(191 219 254/var(--tw-ring-opacity,1))}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\:opacity-100{opacity:1}
 /*# sourceMappingURL=styles.css.map */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orchid-ai",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "type": "module",
   "description": "AI-powered command processing and chat interface for React applications",
   "main": "dist/index.js",