@mordn/chat-widget 0.1.1 → 0.1.3

package/dist/index.js

@@ -33,6 +33,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Button: () => Button,
+  ChatStorageProvider: () => ChatStorageProvider,
   ChatWidget: () => ChatWidget,
   Dialog: () => Dialog,
   DialogContent: () => DialogContent,
@@ -40,14 +41,17 @@ __export(src_exports, {
   DialogHeader: () => DialogHeader,
   DialogTitle: () => DialogTitle,
   Input: () => Input,
+  StarterMessageItem: () => StarterMessageItem,
+  StarterMessages: () => StarterMessages,
   default: () => ChatWidget_default,
   fontOptions: () => fontOptions,
+  useChatStorageKey: () => useChatStorageKey,
   useChatTheme: () => useChatTheme
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/ChatWidget.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/ui/button.tsx
 var import_react_slot = require("@radix-ui/react-slot");
@@ -516,7 +520,7 @@ var PromptInput = ({
       "form",
       {
         className: cn(
-          "w-full divide-y overflow-hidden rounded-xl border bg-background focus-within:border-ring transition-colors",
+          "w-full divide-y divide-[hsl(var(--chat-text)/0.1)] focus-within:divide-ring overflow-hidden rounded-xl border border-[hsl(var(--chat-text)/0.1)] bg-background focus-within:border-ring transition-colors",
           "[&:focus-within]:shadow-none [&:focus]:shadow-none shadow-none",
           className
         ),
@@ -579,7 +583,7 @@ var PromptInputTextarea = ({
         "w-full resize-none rounded-none border-none p-3 shadow-none outline-none ring-0",
         "field-sizing-content",
         "max-h-48 min-h-16",
-        "focus-visible:ring-0 focus-visible:border-red-500 focus-visible:shadow-none focus:ring-0 focus:shadow-none",
+        "focus-visible:ring-0 focus-visible:shadow-none focus:ring-0 focus:shadow-none",
         className
       ),
       name: "message",
@@ -724,10 +728,10 @@ function MessageAttachments({ attachments, className }) {
 }
 
 // src/components/interface.tsx
-var import_react8 = require("react");
-var import_lucide_react10 = require("lucide-react");
 var import_react9 = require("react");
-var import_react10 = require("@ai-sdk/react");
+var import_lucide_react10 = require("lucide-react");
+var import_react10 = require("react");
+var import_react11 = require("@ai-sdk/react");
 var import_ai = require("ai");
 
 // src/components/response.tsx
@@ -1190,7 +1194,7 @@ var CodeBlock = ({
   "div",
   {
     className: cn(
-      "relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+      "relative w-full overflow-hidden rounded-lg bg-[hsl(var(--chat-text)/0.03)] border border-[hsl(var(--chat-text)/0.1)]",
       className
     ),
     ...props,
@@ -1206,12 +1210,13 @@ var CodeBlock = ({
             margin: 0,
             padding: "1rem",
             fontSize: "0.875rem",
-            background: "hsl(var(--background))",
-            color: "hsl(var(--foreground))"
+            background: "transparent",
+            color: "hsl(var(--chat-text))",
+            border: "none"
           },
           language,
           lineNumberStyle: {
-            color: "hsl(var(--muted-foreground))",
+            color: "hsl(var(--chat-text) / 0.4)",
             paddingRight: "1rem",
             minWidth: "2.5rem"
           },
@@ -1231,12 +1236,13 @@ var CodeBlock = ({
             margin: 0,
             padding: "1rem",
             fontSize: "0.875rem",
-            background: "hsl(var(--background))",
-            color: "hsl(var(--foreground))"
+            background: "transparent",
+            color: "hsl(var(--chat-text))",
+            border: "none"
           },
           language,
           lineNumberStyle: {
-            color: "hsl(var(--muted-foreground))",
+            color: "hsl(var(--chat-text) / 0.4)",
             paddingRight: "1rem",
             minWidth: "2.5rem"
           },
@@ -1255,7 +1261,7 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 var Tool = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   Collapsible,
   {
-    className: cn("not-prose w-full rounded-md border", className),
+    className: cn("not-prose w-full rounded-md border border-[hsl(var(--chat-text)/0.1)]", className),
     ...props
   }
 );
@@ -1348,32 +1354,107 @@ var ToolOutput = ({
   ] });
 };
 
-// src/components/interface.tsx
+// src/components/suggestion2.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
+function StarterMessages({
+  className,
+  prompts,
+  onPromptSelect,
+  ...props
+}) {
+  if (prompts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      className: cn(
+        "mb-3",
+        className
+      ),
+      ...props,
+      children: prompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          StarterMessageItem,
+          {
+            prompt,
+            onClick: () => onPromptSelect(prompt)
+          }
+        ),
+        index < prompts.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "h-px bg-[hsl(var(--chat-text)/0.08)] mx-3" })
+      ] }, index))
+    }
+  );
+}
+function StarterMessageItem({
+  className,
+  prompt,
+  onClick,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "w-full text-left px-3 py-2.5 rounded-lg",
+        "bg-transparent",
+        "hover:bg-[hsl(var(--chat-text)/0.03)]",
+        "transition-colors duration-150 ease-out",
+        "cursor-pointer",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[13px] text-[hsl(var(--chat-text)/0.7)]", children: prompt.title }),
+        prompt.subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "block text-[11px] text-[hsl(var(--chat-text)/0.4)] mt-0.5", children: prompt.subtitle })
+      ]
+    }
+  );
+}
+
+// src/contexts/chat-storage-context.tsx
+var import_react8 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ChatStorageContext = (0, import_react8.createContext)({
+  storageKeyPrefix: ""
+});
+function ChatStorageProvider({
+  children,
+  userId
+}) {
+  const storageKeyPrefix = userId || "";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
+}
+function useChatStorageKey() {
+  return (0, import_react8.useContext)(ChatStorageContext);
+}
+
+// src/components/interface.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ChatInterface({ id, initialMessages, config, onClose } = {}) {
+  const { storageKeyPrefix } = useChatStorageKey();
+  const storageKey = (key) => storageKeyPrefix ? `chat-${storageKeyPrefix}-${key}` : `chat-${key}`;
   const themeMode = config?.theme?.mode || "light";
-  const [input, setInput] = (0, import_react8.useState)("");
-  const [showHistory, setShowHistory] = (0, import_react8.useState)(false);
-  const [conversations, setConversations] = (0, import_react8.useState)([]);
-  const [loadingHistory, setLoadingHistory] = (0, import_react8.useState)(false);
-  const [historyLoaded, setHistoryLoaded] = (0, import_react8.useState)(false);
-  const [searchQuery, setSearchQuery] = (0, import_react8.useState)("");
-  const [uploadError, setUploadError] = (0, import_react8.useState)(null);
-  (0, import_react8.useEffect)(() => {
+  const [input, setInput] = (0, import_react9.useState)("");
+  const [showHistory, setShowHistory] = (0, import_react9.useState)(false);
+  const [conversations, setConversations] = (0, import_react9.useState)([]);
+  const [loadingHistory, setLoadingHistory] = (0, import_react9.useState)(false);
+  const [historyLoaded, setHistoryLoaded] = (0, import_react9.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, import_react9.useState)("");
+  const [uploadError, setUploadError] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
     if (uploadError) {
       const timeoutId = setTimeout(() => setUploadError(null), 5e3);
       return () => clearTimeout(timeoutId);
     }
   }, [uploadError]);
-  const [tabs, setTabs] = (0, import_react8.useState)([]);
-  const [activeTabId, setActiveTabId] = (0, import_react8.useState)("");
-  const [initialTabCreated, setInitialTabCreated] = (0, import_react8.useState)(false);
-  const [isInitializing, setIsInitializing] = (0, import_react8.useState)(true);
-  const [componentWidth, setComponentWidth] = (0, import_react8.useState)(768);
-  const [isResizing, setIsResizing] = (0, import_react8.useState)(false);
-  const lastSyncedTabId = (0, import_react8.useRef)("");
-  const hasInitialized = (0, import_react8.useRef)(false);
-  const { messages, sendMessage, status, setMessages } = (0, import_react10.useChat)({
+  const [tabs, setTabs] = (0, import_react9.useState)([]);
+  const [activeTabId, setActiveTabId] = (0, import_react9.useState)("");
+  const [initialTabCreated, setInitialTabCreated] = (0, import_react9.useState)(false);
+  const [isInitializing, setIsInitializing] = (0, import_react9.useState)(true);
+  const lastSyncedTabId = (0, import_react9.useRef)("");
+  const hasInitialized = (0, import_react9.useRef)(false);
+  const { messages, sendMessage, status, setMessages } = (0, import_react11.useChat)({
     id: activeTabId || "temp-id",
     transport: new import_ai.DefaultChatTransport({
       api: "/api/chat",
@@ -1462,12 +1543,12 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
   };
   const AttachButton = () => {
     const attachments = usePromptInputAttachments();
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       PromptInputButton,
       {
         variant: "ghost",
         onClick: () => attachments.openFileDialog(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.PlusIcon, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.PlusIcon, { className: "size-4" })
       }
     );
   };
@@ -1506,7 +1587,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
     }
     return newTabId;
   };
-  const createNewTab = (0, import_react8.useCallback)(() => {
+  const createNewTab = (0, import_react9.useCallback)(() => {
     if (!initialTabCreated) {
       console.warn("Cannot create new tab while initializing");
       return;
@@ -1533,10 +1614,10 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
     setMessages([]);
     setInput("");
   }, [initialTabCreated]);
-  const startNewConversation = (0, import_react8.useCallback)(() => {
+  const startNewConversation = (0, import_react9.useCallback)(() => {
     createNewTab();
   }, [createNewTab]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     return () => {
     };
   }, []);
@@ -1566,10 +1647,10 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
       setTabs(filteredTabs);
     }
     if (filteredTabs.length > 0) {
-      localStorage.setItem("chat-tabs", JSON.stringify(filteredTabs));
+      localStorage.setItem(storageKey("tabs"), JSON.stringify(filteredTabs));
       if (tabId === activeTabId) {
         const newActiveTab = filteredTabs[0];
-        localStorage.setItem("active-tab-id", newActiveTab.id);
+        localStorage.setItem(storageKey("active-tab-id"), newActiveTab.id);
       }
     }
   };
@@ -1596,31 +1677,31 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
       setLoadingHistory(false);
     }
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (showHistory && !historyLoaded && config?.userId) {
       fetchConversations();
     }
   }, [showHistory, historyLoaded, config?.userId]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!historyLoaded && config?.userId) {
       fetchConversations();
     }
   }, [historyLoaded, config?.userId]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (tabs.length > 0) {
       const timeoutId = setTimeout(() => {
-        localStorage.setItem("chat-tabs", JSON.stringify(tabs));
-        localStorage.setItem("active-tab-id", activeTabId);
+        localStorage.setItem(storageKey("tabs"), JSON.stringify(tabs));
+        localStorage.setItem(storageKey("active-tab-id"), activeTabId);
       }, 500);
       return () => clearTimeout(timeoutId);
     }
-  }, [tabs, activeTabId]);
-  (0, import_react8.useEffect)(() => {
+  }, [tabs, activeTabId, storageKey]);
+  (0, import_react9.useEffect)(() => {
     if (hasInitialized.current) return;
     const loadInitialTabs = () => {
       try {
-        const savedTabs = localStorage.getItem("chat-tabs");
-        const savedActiveTabId = localStorage.getItem("active-tab-id");
+        const savedTabs = localStorage.getItem(storageKey("tabs"));
+        const savedActiveTabId = localStorage.getItem(storageKey("active-tab-id"));
         if (savedTabs && savedTabs !== "[]") {
           const parsedTabs = JSON.parse(savedTabs);
           setTabs(parsedTabs);
@@ -1645,8 +1726,8 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
     loadInitialTabs();
     hasInitialized.current = true;
   }, []);
-  const hasLoadedInitialMessages = (0, import_react8.useRef)(false);
-  (0, import_react8.useEffect)(() => {
+  const hasLoadedInitialMessages = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
     if (hasLoadedInitialMessages.current) return;
     if (!config?.userId) return;
     if (!activeTabId) return;
@@ -1654,14 +1735,14 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
     loadConversation(activeTabId);
     hasLoadedInitialMessages.current = true;
   }, [config?.userId, activeTabId, isInitializing]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (isInitializing) return;
     if (activeTabId && tabs.length > 0 && activeTabId !== lastSyncedTabId.current) {
       lastSyncedTabId.current = activeTabId;
       setInput("");
     }
   }, [activeTabId, isInitializing, tabs.length]);
-  const groupedConversations = (0, import_react8.useMemo)(() => {
+  const groupedConversations = (0, import_react9.useMemo)(() => {
     const filtered = conversations.filter(
       (conv) => searchQuery === "" || conv.title.toLowerCase().includes(searchQuery.toLowerCase())
     );
@@ -1722,10 +1803,10 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
   const renderMessages = () => messages.map((message, index) => {
     const sourceParts = message.parts?.filter((part) => part.type === "source-url") || [];
     const fileParts = message.parts?.filter((part) => part.type === "file") || [];
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: index > 0 ? "mt-6" : "", children: [
-      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Sources, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SourcesTrigger, { count: sourceParts.length }),
-        sourceParts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SourcesContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: index > 0 ? "mt-6" : "", children: [
+      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Sources, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SourcesTrigger, { count: sourceParts.length }),
+        sourceParts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SourcesContent, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           Source,
           {
             href: part.url,
@@ -1734,10 +1815,10 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
           `${message.id}-${i}`
         ) }, `${message.id}-${i}`))
       ] }),
-      fileParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn(
+      fileParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn(
         "flex mb-1",
         message.role === "user" ? "justify-end" : "justify-start"
-      ), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         MessageAttachments,
         {
           attachments: fileParts.map((part) => ({
@@ -1748,14 +1829,14 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
           }))
         }
       ) }),
-      message.parts ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "space-y-2", children: message.parts.map((part, i) => {
+      message.parts ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-2", children: message.parts.map((part, i) => {
         switch (part.type) {
           case "text":
             const isTextStreaming = status === "streaming" && i === message.parts.length - 1 && message.id === messages.at(-1)?.id;
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Response, { isStreaming: isTextStreaming, children: part.text }) }) }) }, `${message.id}-${i}`);
+            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Response, { isStreaming: isTextStreaming, children: part.text }) }) }) }, `${message.id}-${i}`);
           case "reasoning":
             const isCurrentlyStreaming = status === "streaming" && i === message.parts.length - 1 && message.id === messages.at(-1)?.id;
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
               Reasoning,
               {
                 className: "w-full",
@@ -1763,8 +1844,8 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 defaultOpen: false,
                 open: isCurrentlyStreaming ? true : void 0,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReasoningTrigger, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReasoningContent, { children: part.text })
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ReasoningTrigger, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ReasoningContent, { children: part.text })
                 ]
               },
               `${message.id}-${i}`
@@ -1772,11 +1853,11 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
           default:
             if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
               const toolPart = part;
-              return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Tool, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolHeader, { type: part.type, state: toolPart.state }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ToolContent, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolInput, { input: toolPart.input }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
+              return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tool, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolHeader, { type: part.type, state: toolPart.state }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ToolContent, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolInput, { input: toolPart.input }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
                 ] })
               ] }, `${message.id}-${i}`);
             }
@@ -1784,7 +1865,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
         }
       }) }) : (
         /* Handle standard AI SDK messages with content or text property */
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
       )
     ] }, message.id);
   });
@@ -1816,8 +1897,8 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
       console.error("Error loading conversation:", error);
     }
   };
-  const dropdownRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const dropdownRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setShowHistory(false);
@@ -1830,25 +1911,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showHistory]);
-  (0, import_react8.useEffect)(() => {
-    if (!isResizing) return;
-    const handleMouseMove = (e) => {
-      const newWidth = window.innerWidth - e.clientX;
-      const minWidth = 300;
-      const maxWidth = window.innerWidth * 0.8;
-      setComponentWidth(Math.max(minWidth, Math.min(maxWidth, newWidth)));
-    };
-    const handleMouseUp = () => {
-      setIsResizing(false);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isResizing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("w-full h-full flex flex-col bg-white dark:bg-gray-900 overflow-hidden ring-1 ring-black/[0.02] dark:ring-white/[0.03]", themeMode === "dark" && "dark"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("w-full h-full flex flex-col bg-white dark:bg-gray-900 overflow-hidden ring-1 ring-black/[0.02] dark:ring-white/[0.03]", themeMode === "dark" && "dark"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       className: cn(
@@ -1856,11 +1919,11 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
         themeMode === "dark" && "dark"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-b backdrop-blur-sm relative z-20", style: {
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-b backdrop-blur-sm relative z-20", style: {
           borderColor: themeMode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)",
           backgroundColor: themeMode === "dark" ? "rgba(37,37,37,0.8)" : "rgba(255,255,255,0.8)"
         }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center gap-1 flex-1 min-w-0 overflow-x-auto scrollbar-hide py-0.5 scroll-smooth", children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-1 flex-1 min-w-0 overflow-x-auto scrollbar-hide py-0.5 scroll-smooth", children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "div",
             {
               className: "relative flex items-center gap-1.5 px-3 py-1.5 rounded-lg cursor-pointer transition-all duration-150 group flex-shrink-0 min-w-0",
@@ -1883,8 +1946,8 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 switchToTab(tab.id);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
-                tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
+                tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "button",
                   {
                     onClick: (e) => {
@@ -1903,15 +1966,15 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                       e.currentTarget.style.opacity = tab.isActive ? "0.6" : "0";
                       e.currentTarget.style.backgroundColor = "transparent";
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.XIcon, { className: "h-3 w-3", strokeWidth: 2.5 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.XIcon, { className: "h-3 w-3", strokeWidth: 2.5 })
                   }
                 )
               ]
             },
             tab.id
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "button",
               {
                 onClick: createNewTab,
@@ -1928,11 +1991,11 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "New Chat",
-                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.PlusIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.PlusIcon, { className: "h-4 w-4", strokeWidth: 2 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "button",
                 {
                   onClick: () => setShowHistory(!showHistory),
@@ -1954,21 +2017,21 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                     }
                   },
                   title: "Chat History",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
                 }
               ),
-              showHistory && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "absolute right-0 top-full mt-1.5 w-72 rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)] z-50 animate-in fade-in slide-in-from-top-1 duration-150 overflow-hidden", style: {
+              showHistory && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute right-0 top-full mt-1.5 w-72 rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)] z-50 animate-in fade-in slide-in-from-top-1 duration-150 overflow-hidden", style: {
                 backgroundColor: themeMode === "dark" ? "#252525" : "#ffffff",
                 border: `1px solid ${themeMode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"}`
               }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "p-2.5 border-b", style: {
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-2.5 border-b", style: {
                   borderColor: themeMode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)",
                   backgroundColor: themeMode === "dark" ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.02)"
-                }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.SearchIcon, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5", style: {
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.SearchIcon, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5", style: {
                     color: themeMode === "dark" ? "#666666" : "#999999"
                   }, strokeWidth: 2 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                     "input",
                     {
                       type: "text",
@@ -1984,25 +2047,25 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                     }
                   )
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-[13px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-[13px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
                     backgroundColor: themeMode === "dark" ? "#333333" : "#f5f5f5"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.MessageSquareIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Conversations" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Start a new chat to begin" })
-                ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.MessageSquareIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Conversations" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Start a new chat to begin" })
+                ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
                     backgroundColor: themeMode === "dark" ? "#333333" : "#f5f5f5"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.SearchIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Results" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Try a different search" })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mb-0.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.SearchIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Results" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Try a different search" })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mb-0.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
                     backgroundColor: themeMode === "dark" ? "rgba(37,37,37,0.95)" : "rgba(255,255,255,0.95)"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: groupName }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: groupName }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
                     const isActiveConversation = activeTabId === conversation.id;
-                    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       "button",
                       {
                         className: "w-full px-2 py-1 rounded-md transition-all duration-150 text-left group relative",
@@ -2020,12 +2083,12 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                           }
                         },
                         onClick: () => handleSelectConversation(conversation.id, conversation.title),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[12px] line-clamp-1 transition-colors leading-tight", style: {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[12px] line-clamp-1 transition-colors leading-tight", style: {
                             fontWeight: isActiveConversation ? 500 : 400,
                             color: isActiveConversation ? themeMode === "dark" ? "#e5e5e5" : "#171717" : themeMode === "dark" ? "#cccccc" : "#404040"
                           }, children: conversation.title }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                             import_lucide_react10.ChevronRightIcon,
                             {
                               className: "h-3 w-3 transition-all duration-150 flex-shrink-0",
@@ -2044,7 +2107,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 ] }, groupName)) }) })
               ] })
             ] }),
-            onClose && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            onClose && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "button",
               {
                 onClick: onClose,
@@ -2061,24 +2124,33 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "Close Chat",
-                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.XIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.XIcon, { className: "h-4 w-4", strokeWidth: 2 })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
             renderMessages(),
-            status === "submitted" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Message, { from: "assistant", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Loader, { size: 16 }) }) }) })
+            status === "submitted" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Message, { from: "assistant", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loader, { size: 16 }) }) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ConversationScrollButton, {})
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ConversationScrollButton, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "px-5 pb-5", children: [
-          uploadError && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mb-3 px-4 py-3 bg-red-50 dark:bg-red-900/20 border border-red-200/60 dark:border-red-800/60 rounded-2xl text-sm text-red-700 dark:text-red-400 shadow-sm", children: uploadError }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(PromptInputBody, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PromptInputAttachment, { data: attachment }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "px-5 pb-5", children: [
+          uploadError && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-3 px-4 py-3 bg-red-50 dark:bg-red-900/20 border border-red-200/60 dark:border-red-800/60 rounded-2xl text-sm text-red-700 dark:text-red-400 shadow-sm", children: uploadError }),
+          messages.length === 0 && status !== "submitted" && config?.starterPrompts && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            StarterMessages,
+            {
+              prompts: config.starterPrompts,
+              onPromptSelect: (prompt) => {
+                handleSubmit({ text: prompt.title });
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PromptInputBody, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptInputAttachment, { data: attachment }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 PromptInputTextarea,
                 {
                   onChange: (e) => setInput(e.target.value),
@@ -2086,9 +2158,9 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(PromptInputToolbar, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PromptInputTools, { children: config?.features?.fileUpload !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AttachButton, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PromptInputSubmit, { disabled: !input, status })
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PromptInputToolbar, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptInputTools, { children: config?.features?.fileUpload !== false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AttachButton, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptInputSubmit, { disabled: !input, status })
             ] })
           ] })
         ] })
@@ -2099,7 +2171,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
 
 // src/ChatWidget.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function ChatWidget({
   userId,
   conversationId,
@@ -2110,93 +2182,90 @@ function ChatWidget({
   temperature,
   theme,
   features,
-  display
+  display,
+  starterPrompts
 }) {
-  const initialWidth = display?.width || "30vw";
   const showToggleButton = display?.showToggleButton !== false;
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(display?.defaultOpen || false);
-  const [width, setWidth] = (0, import_react11.useState)(() => {
-    const value = parseInt(initialWidth);
-    if (initialWidth.includes("vw")) {
-      return value / 100 * window.innerWidth;
+  const resizable = display?.resizable !== false;
+  const size = display?.size || "default";
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(display?.defaultOpen || false);
+  const [isResizing, setIsResizing] = (0, import_react12.useState)(false);
+  const containerRef = (0, import_react12.useRef)(null);
+  const customStyles = (0, import_react12.useMemo)(() => {
+    const styles = {};
+    if (display?.width) {
+      styles["--chat-widget-width"] = display.width;
     }
-    return value || window.innerWidth * 0.3;
-  });
-  const isResizing = (0, import_react11.useRef)(false);
-  const handleMouseDown = (0, import_react11.useCallback)((e) => {
+    return styles;
+  }, [display?.width]);
+  const handleMouseDown = (0, import_react12.useCallback)((e) => {
+    if (!resizable) return;
     e.preventDefault();
-    isResizing.current = true;
+    setIsResizing(true);
     document.body.style.cursor = "ew-resize";
     document.body.style.userSelect = "none";
-  }, []);
-  (0, import_react11.useEffect)(() => {
-    const getConstraints = () => ({
-      minWidth: window.innerWidth * 0.2,
-      maxWidth: window.innerWidth * 0.6
-    });
+  }, [resizable]);
+  (0, import_react12.useEffect)(() => {
+    if (!isResizing) return;
     const handleMouseMove = (e) => {
-      if (!isResizing.current) return;
-      const { minWidth, maxWidth } = getConstraints();
+      if (!containerRef.current) return;
       const newWidth = window.innerWidth - e.clientX;
-      setWidth(Math.min(maxWidth, Math.max(minWidth, newWidth)));
+      const minWidth = 300;
+      const maxWidth = Math.min(800, window.innerWidth * 0.8);
+      const clampedWidth = Math.min(maxWidth, Math.max(minWidth, newWidth));
+      containerRef.current.style.setProperty("--chat-widget-width", `${clampedWidth}px`);
     };
     const handleMouseUp = () => {
-      if (isResizing.current) {
-        isResizing.current = false;
-        document.body.style.cursor = "";
-        document.body.style.userSelect = "";
-      }
-    };
-    const handleWindowResize = () => {
-      const { minWidth, maxWidth } = getConstraints();
-      setWidth((prev) => Math.min(maxWidth, Math.max(minWidth, prev)));
+      setIsResizing(false);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
     };
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
-    window.addEventListener("resize", handleWindowResize);
     return () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
-      window.removeEventListener("resize", handleWindowResize);
     };
-  }, []);
-  const config = (0, import_react11.useMemo)(() => ({
+  }, [isResizing]);
+  const config = (0, import_react12.useMemo)(() => ({
     userId,
     model,
     systemPrompt,
     temperature,
     theme,
-    features
-  }), [userId, model, systemPrompt, temperature, theme, features]);
+    features,
+    starterPrompts
+  }), [userId, model, systemPrompt, temperature, theme, features, starterPrompts]);
   const togglePosition = display?.toggleButtonPosition || { bottom: "24px", right: "24px" };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    showToggleButton && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ChatStorageProvider, { userId, children: [
+    showToggleButton && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "button",
       {
         onClick: () => setIsOpen(true),
         className: "fixed z-50 rounded-full bg-primary text-primary-foreground shadow-lg hover:opacity-90 transition-all p-4",
         style: togglePosition,
         "aria-label": "Open chat",
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.MessageCircle, { className: "h-6 w-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.MessageCircle, { className: "h-6 w-6" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
-        className: `fixed top-0 right-0 h-screen z-50 border-l border-gray-200 dark:border-gray-800 ${className || ""}`,
-        style: {
-          animation: "chat-slide-in-right 0.3s ease-out forwards",
-          width: `${width}px`
-        },
+        ref: containerRef,
+        className: `chat-widget-container chat-widget-popup chat-widget-content ${theme?.mode === "dark" ? "dark" : ""} ${className || ""}`,
+        "data-size": size,
+        "data-resizing": isResizing,
+        style: customStyles,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          resizable && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               onMouseDown: handleMouseDown,
-              className: "absolute left-0 top-0 h-full w-1 cursor-ew-resize hover:bg-primary/20 active:bg-primary/30 transition-colors z-10"
+              className: "chat-widget-resize-handle",
+              "aria-label": "Resize chat widget"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             ChatInterface,
             {
               id: conversationId,
@@ -2213,7 +2282,7 @@ function ChatWidget({
 var ChatWidget_default = ChatWidget;
 
 // src/hooks/use-chat-theme.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/utils/models.ts
 var MODELS = [
@@ -2331,14 +2400,16 @@ var defaultSystemPrompt = "You are a helpful AI assistant.";
 var defaultTemperature = 0.7;
 var defaultThemeMode = "light";
 function useChatTheme() {
-  const [theme, setTheme] = (0, import_react12.useState)(defaultTheme);
-  const [conversationStarters, setConversationStarters] = (0, import_react12.useState)(defaultConversationStarters);
-  const [model, setModel] = (0, import_react12.useState)(defaultModel);
-  const [systemPrompt, setSystemPrompt] = (0, import_react12.useState)(defaultSystemPrompt);
-  const [temperature, setTemperature] = (0, import_react12.useState)(defaultTemperature);
-  const [themeMode, setThemeMode] = (0, import_react12.useState)(defaultThemeMode);
-  (0, import_react12.useEffect)(() => {
-    const savedTheme = localStorage.getItem("chat-theme");
+  const { storageKeyPrefix } = useChatStorageKey();
+  const keyPrefix = storageKeyPrefix ? `chat-${storageKeyPrefix}-` : "chat-";
+  const [theme, setTheme] = (0, import_react13.useState)(defaultTheme);
+  const [conversationStarters, setConversationStarters] = (0, import_react13.useState)(defaultConversationStarters);
+  const [model, setModel] = (0, import_react13.useState)(defaultModel);
+  const [systemPrompt, setSystemPrompt] = (0, import_react13.useState)(defaultSystemPrompt);
+  const [temperature, setTemperature] = (0, import_react13.useState)(defaultTemperature);
+  const [themeMode, setThemeMode] = (0, import_react13.useState)(defaultThemeMode);
+  (0, import_react13.useEffect)(() => {
+    const savedTheme = localStorage.getItem(`${keyPrefix}theme`);
     if (savedTheme) {
       try {
         setTheme(JSON.parse(savedTheme));
@@ -2346,7 +2417,7 @@ function useChatTheme() {
         console.error("Error loading theme:", error);
       }
     }
-    const savedStarters = localStorage.getItem("chat-conversation-starters");
+    const savedStarters = localStorage.getItem(`${keyPrefix}conversation-starters`);
     if (savedStarters) {
       try {
         setConversationStarters(JSON.parse(savedStarters));
@@ -2354,7 +2425,7 @@ function useChatTheme() {
         console.error("Error loading conversation starters:", error);
       }
     }
-    const savedModel = localStorage.getItem("chat-model");
+    const savedModel = localStorage.getItem(`${keyPrefix}model`);
     if (savedModel) {
       try {
         setModel(savedModel);
@@ -2362,7 +2433,7 @@ function useChatTheme() {
         console.error("Error loading model:", error);
       }
     }
-    const savedSystemPrompt = localStorage.getItem("chat-system-prompt");
+    const savedSystemPrompt = localStorage.getItem(`${keyPrefix}system-prompt`);
     if (savedSystemPrompt) {
       try {
         setSystemPrompt(savedSystemPrompt);
@@ -2370,7 +2441,7 @@ function useChatTheme() {
         console.error("Error loading system prompt:", error);
       }
     }
-    const savedTemperature = localStorage.getItem("chat-temperature");
+    const savedTemperature = localStorage.getItem(`${keyPrefix}temperature`);
     if (savedTemperature) {
       try {
         setTemperature(parseFloat(savedTemperature));
@@ -2378,7 +2449,7 @@ function useChatTheme() {
         console.error("Error loading temperature:", error);
       }
     }
-    const savedThemeMode = localStorage.getItem("chat-theme-mode");
+    const savedThemeMode = localStorage.getItem(`${keyPrefix}theme-mode`);
     if (savedThemeMode) {
       try {
         setThemeMode(savedThemeMode);
@@ -2424,9 +2495,9 @@ function useChatTheme() {
       window.removeEventListener("chat-temperature-change", handleTemperatureChange);
       window.removeEventListener("chat-theme-mode-change", handleThemeModeChange);
     };
-  }, []);
-  (0, import_react12.useEffect)(() => {
-    localStorage.setItem("chat-theme", JSON.stringify(theme));
+  }, [keyPrefix]);
+  (0, import_react13.useEffect)(() => {
+    localStorage.setItem(`${keyPrefix}theme`, JSON.stringify(theme));
     const root = document.documentElement;
     if (themeMode === "light") {
       root.style.setProperty("--chat-primary", hexToHSL(theme.lightPrimary));
@@ -2440,27 +2511,27 @@ function useChatTheme() {
     root.style.setProperty("--chat-font-family", theme.fontFamily);
     root.style.setProperty("--chat-font-size", `${theme.fontSize}px`);
     window.dispatchEvent(new CustomEvent("chat-theme-change", { detail: theme }));
-  }, [theme, themeMode]);
-  (0, import_react12.useEffect)(() => {
-    localStorage.setItem("chat-conversation-starters", JSON.stringify(conversationStarters));
+  }, [theme, themeMode, keyPrefix]);
+  (0, import_react13.useEffect)(() => {
+    localStorage.setItem(`${keyPrefix}conversation-starters`, JSON.stringify(conversationStarters));
     window.dispatchEvent(new CustomEvent("chat-starters-change", { detail: conversationStarters }));
-  }, [conversationStarters]);
-  (0, import_react12.useEffect)(() => {
-    localStorage.setItem("chat-model", model);
+  }, [conversationStarters, keyPrefix]);
+  (0, import_react13.useEffect)(() => {
+    localStorage.setItem(`${keyPrefix}model`, model);
     window.dispatchEvent(new CustomEvent("chat-model-change", { detail: model }));
-  }, [model]);
-  (0, import_react12.useEffect)(() => {
-    localStorage.setItem("chat-system-prompt", systemPrompt);
+  }, [model, keyPrefix]);
+  (0, import_react13.useEffect)(() => {
+    localStorage.setItem(`${keyPrefix}system-prompt`, systemPrompt);
     window.dispatchEvent(new CustomEvent("chat-system-prompt-change", { detail: systemPrompt }));
-  }, [systemPrompt]);
-  (0, import_react12.useEffect)(() => {
-    localStorage.setItem("chat-temperature", temperature.toString());
+  }, [systemPrompt, keyPrefix]);
+  (0, import_react13.useEffect)(() => {
+    localStorage.setItem(`${keyPrefix}temperature`, temperature.toString());
     window.dispatchEvent(new CustomEvent("chat-temperature-change", { detail: temperature }));
-  }, [temperature]);
-  (0, import_react12.useEffect)(() => {
-    localStorage.setItem("chat-theme-mode", themeMode);
+  }, [temperature, keyPrefix]);
+  (0, import_react13.useEffect)(() => {
+    localStorage.setItem(`${keyPrefix}theme-mode`, themeMode);
     window.dispatchEvent(new CustomEvent("chat-theme-mode-change", { detail: themeMode }));
-  }, [themeMode]);
+  }, [themeMode, keyPrefix]);
   const updateColor = (key, value) => {
     setTheme((prev) => ({ ...prev, [key]: value }));
   };
@@ -2527,10 +2598,10 @@ function useChatTheme() {
 
 // src/ui/input.tsx
 var React = __toESM(require("react"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Input = React.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "input",
       {
         type,
@@ -2549,22 +2620,22 @@ Input.displayName = "Input";
 // src/ui/dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -2582,9 +2653,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -2595,14 +2666,14 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.XIcon, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -2612,7 +2683,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       "data-slot": "dialog-header",
@@ -2625,7 +2696,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -2638,7 +2709,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -2650,6 +2721,7 @@ function DialogDescription({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  ChatStorageProvider,
   ChatWidget,
   Dialog,
   DialogContent,
@@ -2657,7 +2729,10 @@ function DialogDescription({
   DialogHeader,
   DialogTitle,
   Input,
+  StarterMessageItem,
+  StarterMessages,
   fontOptions,
+  useChatStorageKey,
   useChatTheme
 });
 //# sourceMappingURL=index.js.map