@mordn/chat-widget 0.1.1 → 0.1.4

package/dist/index.mjs

@@ -490,7 +490,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
         ),
@@ -553,7 +553,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",
@@ -1174,7 +1174,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,
@@ -1190,12 +1190,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"
           },
@@ -1215,12 +1216,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"
           },
@@ -1239,7 +1241,7 @@ import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx17(
   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
   }
 );
@@ -1332,9 +1334,86 @@ var ToolOutput = ({
   ] });
 };
 
-// src/components/interface.tsx
+// src/components/suggestion2.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function StarterMessages({
+  className,
+  prompts,
+  onPromptSelect,
+  ...props
+}) {
+  if (prompts.length === 0) return null;
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: cn(
+        "mb-3",
+        className
+      ),
+      ...props,
+      children: prompts.map((prompt, index) => /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx18(
+          StarterMessageItem,
+          {
+            prompt,
+            onClick: () => onPromptSelect(prompt)
+          }
+        ),
+        index < prompts.length - 1 && /* @__PURE__ */ jsx18("div", { className: "h-px bg-[hsl(var(--chat-text)/0.08)] mx-3" })
+      ] }, index))
+    }
+  );
+}
+function StarterMessageItem({
+  className,
+  prompt,
+  onClick,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs11(
+    "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__ */ jsx18("span", { className: "text-[13px] text-[hsl(var(--chat-text)/0.7)]", children: prompt.title }),
+        prompt.subtitle && /* @__PURE__ */ jsx18("span", { className: "block text-[11px] text-[hsl(var(--chat-text)/0.4)] mt-0.5", children: prompt.subtitle })
+      ]
+    }
+  );
+}
+
+// src/contexts/chat-storage-context.tsx
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var ChatStorageContext = createContext4({
+  storageKeyPrefix: ""
+});
+function ChatStorageProvider({
+  children,
+  userId
+}) {
+  const storageKeyPrefix = userId || "";
+  return /* @__PURE__ */ jsx19(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
+}
+function useChatStorageKey() {
+  return useContext4(ChatStorageContext);
+}
+
+// src/components/interface.tsx
+import { jsx as jsx20, jsxs as jsxs12 } from "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] = useState4("");
   const [showHistory, setShowHistory] = useState4(false);
@@ -1353,8 +1432,6 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
   const [activeTabId, setActiveTabId] = useState4("");
   const [initialTabCreated, setInitialTabCreated] = useState4(false);
   const [isInitializing, setIsInitializing] = useState4(true);
-  const [componentWidth, setComponentWidth] = useState4(768);
-  const [isResizing, setIsResizing] = useState4(false);
   const lastSyncedTabId = useRef3("");
   const hasInitialized = useRef3(false);
   const { messages, sendMessage, status, setMessages } = useChat({
@@ -1446,12 +1523,12 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
   };
   const AttachButton = () => {
     const attachments = usePromptInputAttachments();
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(
       PromptInputButton,
       {
         variant: "ghost",
         onClick: () => attachments.openFileDialog(),
-        children: /* @__PURE__ */ jsx18(PlusIcon2, { className: "size-4" })
+        children: /* @__PURE__ */ jsx20(PlusIcon2, { className: "size-4" })
       }
     );
   };
@@ -1550,10 +1627,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);
       }
     }
   };
@@ -1593,18 +1670,18 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
   useEffect4(() => {
     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]);
+  }, [tabs, activeTabId, storageKey]);
   useEffect4(() => {
     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);
@@ -1706,10 +1783,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__ */ jsxs11("div", { className: index > 0 ? "mt-6" : "", children: [
-      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ jsxs11(Sources, { children: [
-        /* @__PURE__ */ jsx18(SourcesTrigger, { count: sourceParts.length }),
-        sourceParts.map((part, i) => /* @__PURE__ */ jsx18(SourcesContent, { children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsxs12("div", { className: index > 0 ? "mt-6" : "", children: [
+      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ jsxs12(Sources, { children: [
+        /* @__PURE__ */ jsx20(SourcesTrigger, { count: sourceParts.length }),
+        sourceParts.map((part, i) => /* @__PURE__ */ jsx20(SourcesContent, { children: /* @__PURE__ */ jsx20(
           Source,
           {
             href: part.url,
@@ -1718,10 +1795,10 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
           `${message.id}-${i}`
         ) }, `${message.id}-${i}`))
       ] }),
-      fileParts.length > 0 && /* @__PURE__ */ jsx18("div", { className: cn(
+      fileParts.length > 0 && /* @__PURE__ */ jsx20("div", { className: cn(
         "flex mb-1",
         message.role === "user" ? "justify-end" : "justify-start"
-      ), children: /* @__PURE__ */ jsx18(
+      ), children: /* @__PURE__ */ jsx20(
         MessageAttachments,
         {
           attachments: fileParts.map((part) => ({
@@ -1732,14 +1809,14 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
           }))
         }
       ) }),
-      message.parts ? /* @__PURE__ */ jsx18("div", { className: "space-y-2", children: message.parts.map((part, i) => {
+      message.parts ? /* @__PURE__ */ jsx20("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__ */ jsx18(Fragment5, { children: /* @__PURE__ */ jsx18(Message, { from: message.role, children: /* @__PURE__ */ jsx18(MessageContent, { children: /* @__PURE__ */ jsx18(Response, { isStreaming: isTextStreaming, children: part.text }) }) }) }, `${message.id}-${i}`);
+            return /* @__PURE__ */ jsx20(Fragment5, { children: /* @__PURE__ */ jsx20(Message, { from: message.role, children: /* @__PURE__ */ jsx20(MessageContent, { children: /* @__PURE__ */ jsx20(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__ */ jsxs11(
+            return /* @__PURE__ */ jsxs12(
               Reasoning,
               {
                 className: "w-full",
@@ -1747,8 +1824,8 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 defaultOpen: false,
                 open: isCurrentlyStreaming ? true : void 0,
                 children: [
-                  /* @__PURE__ */ jsx18(ReasoningTrigger, {}),
-                  /* @__PURE__ */ jsx18(ReasoningContent, { children: part.text })
+                  /* @__PURE__ */ jsx20(ReasoningTrigger, {}),
+                  /* @__PURE__ */ jsx20(ReasoningContent, { children: part.text })
                 ]
               },
               `${message.id}-${i}`
@@ -1756,11 +1833,11 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
           default:
             if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
               const toolPart = part;
-              return /* @__PURE__ */ jsxs11(Tool, { children: [
-                /* @__PURE__ */ jsx18(ToolHeader, { type: part.type, state: toolPart.state }),
-                /* @__PURE__ */ jsxs11(ToolContent, { children: [
-                  /* @__PURE__ */ jsx18(ToolInput, { input: toolPart.input }),
-                  /* @__PURE__ */ jsx18(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
+              return /* @__PURE__ */ jsxs12(Tool, { children: [
+                /* @__PURE__ */ jsx20(ToolHeader, { type: part.type, state: toolPart.state }),
+                /* @__PURE__ */ jsxs12(ToolContent, { children: [
+                  /* @__PURE__ */ jsx20(ToolInput, { input: toolPart.input }),
+                  /* @__PURE__ */ jsx20(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
                 ] })
               ] }, `${message.id}-${i}`);
             }
@@ -1768,7 +1845,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
         }
       }) }) : (
         /* Handle standard AI SDK messages with content or text property */
-        /* @__PURE__ */ jsx18(Fragment5, { children: /* @__PURE__ */ jsx18(Message, { from: message.role, children: /* @__PURE__ */ jsx18(MessageContent, { children: /* @__PURE__ */ jsx18(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
+        /* @__PURE__ */ jsx20(Fragment5, { children: /* @__PURE__ */ jsx20(Message, { from: message.role, children: /* @__PURE__ */ jsx20(MessageContent, { children: /* @__PURE__ */ jsx20(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
       )
     ] }, message.id);
   });
@@ -1814,25 +1891,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showHistory]);
-  useEffect4(() => {
-    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__ */ jsx18("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__ */ jsxs11(
+  return /* @__PURE__ */ jsx20("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__ */ jsxs12(
     "div",
     {
       className: cn(
@@ -1840,11 +1899,11 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
         themeMode === "dark" && "dark"
       ),
       children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 px-3 py-2 border-b backdrop-blur-sm relative z-20", style: {
+        /* @__PURE__ */ jsxs12("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__ */ jsx18("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__ */ jsxs11(
+          /* @__PURE__ */ jsx20("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__ */ jsxs12(
             "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",
@@ -1867,8 +1926,8 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 switchToTab(tab.id);
               },
               children: [
-                /* @__PURE__ */ jsx18("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
-                tabs.length > 1 && /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx20("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
+                tabs.length > 1 && /* @__PURE__ */ jsx20(
                   "button",
                   {
                     onClick: (e) => {
@@ -1887,15 +1946,15 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                       e.currentTarget.style.opacity = tab.isActive ? "0.6" : "0";
                       e.currentTarget.style.backgroundColor = "transparent";
                     },
-                    children: /* @__PURE__ */ jsx18(XIcon2, { className: "h-3 w-3", strokeWidth: 2.5 })
+                    children: /* @__PURE__ */ jsx20(XIcon2, { className: "h-3 w-3", strokeWidth: 2.5 })
                   }
                 )
               ]
             },
             tab.id
           )) }),
-          /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
-            /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+            /* @__PURE__ */ jsx20(
               "button",
               {
                 onClick: createNewTab,
@@ -1912,11 +1971,11 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "New Chat",
-                children: /* @__PURE__ */ jsx18(PlusIcon2, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ jsx20(PlusIcon2, { className: "h-4 w-4", strokeWidth: 2 })
               }
             ),
-            /* @__PURE__ */ jsxs11("div", { className: "relative", ref: dropdownRef, children: [
-              /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsxs12("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ jsx20(
                 "button",
                 {
                   onClick: () => setShowHistory(!showHistory),
@@ -1938,21 +1997,21 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                     }
                   },
                   title: "Chat History",
-                  children: /* @__PURE__ */ jsx18(HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                  children: /* @__PURE__ */ jsx20(HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
                 }
               ),
-              showHistory && /* @__PURE__ */ jsxs11("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__ */ jsxs12("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__ */ jsx18("div", { className: "p-2.5 border-b", style: {
+                /* @__PURE__ */ jsx20("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__ */ jsxs11("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsx18(SearchIcon, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5", style: {
+                }, children: /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsx20(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__ */ jsx18(
+                  /* @__PURE__ */ jsx20(
                     "input",
                     {
                       type: "text",
@@ -1968,25 +2027,25 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                     }
                   )
                 ] }) }),
-                /* @__PURE__ */ jsx18("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx18("div", { className: "text-[13px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ jsx18("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                /* @__PURE__ */ jsx20("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx20("div", { className: "text-[13px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ jsx20("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
                     backgroundColor: themeMode === "dark" ? "#333333" : "#f5f5f5"
-                  }, children: /* @__PURE__ */ jsx18(MessageSquareIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ jsx18("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Conversations" }),
-                  /* @__PURE__ */ jsx18("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Start a new chat to begin" })
-                ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ jsx18("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                  }, children: /* @__PURE__ */ jsx20(MessageSquareIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ jsx20("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Conversations" }),
+                  /* @__PURE__ */ jsx20("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Start a new chat to begin" })
+                ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ jsx20("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
                     backgroundColor: themeMode === "dark" ? "#333333" : "#f5f5f5"
-                  }, children: /* @__PURE__ */ jsx18(SearchIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ jsx18("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Results" }),
-                  /* @__PURE__ */ jsx18("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Try a different search" })
-                ] }) : /* @__PURE__ */ jsx18("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ jsxs11("div", { className: "mb-0.5", children: [
-                  /* @__PURE__ */ jsx18("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
+                  }, children: /* @__PURE__ */ jsx20(SearchIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ jsx20("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Results" }),
+                  /* @__PURE__ */ jsx20("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Try a different search" })
+                ] }) : /* @__PURE__ */ jsx20("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ jsxs12("div", { className: "mb-0.5", children: [
+                  /* @__PURE__ */ jsx20("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__ */ jsx18("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: groupName }) }),
-                  /* @__PURE__ */ jsx18("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
+                  }, children: /* @__PURE__ */ jsx20("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: groupName }) }),
+                  /* @__PURE__ */ jsx20("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
                     const isActiveConversation = activeTabId === conversation.id;
-                    return /* @__PURE__ */ jsx18(
+                    return /* @__PURE__ */ jsx20(
                       "button",
                       {
                         className: "w-full px-2 py-1 rounded-md transition-all duration-150 text-left group relative",
@@ -2004,12 +2063,12 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                           }
                         },
                         onClick: () => handleSelectConversation(conversation.id, conversation.title),
-                        children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5", children: [
-                          /* @__PURE__ */ jsx18("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx18("p", { className: "text-[12px] line-clamp-1 transition-colors leading-tight", style: {
+                        children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1.5", children: [
+                          /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx20("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__ */ jsx18(
+                          /* @__PURE__ */ jsx20(
                             ChevronRightIcon2,
                             {
                               className: "h-3 w-3 transition-all duration-150 flex-shrink-0",
@@ -2028,7 +2087,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 ] }, groupName)) }) })
               ] })
             ] }),
-            onClose && /* @__PURE__ */ jsx18(
+            onClose && /* @__PURE__ */ jsx20(
               "button",
               {
                 onClick: onClose,
@@ -2045,24 +2104,33 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "Close Chat",
-                children: /* @__PURE__ */ jsx18(XIcon2, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ jsx20(XIcon2, { className: "h-4 w-4", strokeWidth: 2 })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs11(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
-          /* @__PURE__ */ jsxs11(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
+        /* @__PURE__ */ jsxs12(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
+          /* @__PURE__ */ jsxs12(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
             renderMessages(),
-            status === "submitted" && /* @__PURE__ */ jsx18("div", { className: "mt-6", children: /* @__PURE__ */ jsx18(Message, { from: "assistant", children: /* @__PURE__ */ jsx18(MessageContent, { children: /* @__PURE__ */ jsx18(Loader, { size: 16 }) }) }) })
+            status === "submitted" && /* @__PURE__ */ jsx20("div", { className: "mt-6", children: /* @__PURE__ */ jsx20(Message, { from: "assistant", children: /* @__PURE__ */ jsx20(MessageContent, { children: /* @__PURE__ */ jsx20(Loader, { size: 16 }) }) }) })
           ] }),
-          /* @__PURE__ */ jsx18(ConversationScrollButton, {})
+          /* @__PURE__ */ jsx20(ConversationScrollButton, {})
         ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "px-5 pb-5", children: [
-          uploadError && /* @__PURE__ */ jsx18("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__ */ jsxs11(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
-            /* @__PURE__ */ jsxs11(PromptInputBody, { children: [
-              /* @__PURE__ */ jsx18(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ jsx18(PromptInputAttachment, { data: attachment }) }),
-              /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsxs12("div", { className: "px-5 pb-5", children: [
+          uploadError && /* @__PURE__ */ jsx20("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__ */ jsx20(
+            StarterMessages,
+            {
+              prompts: config.starterPrompts,
+              onPromptSelect: (prompt) => {
+                handleSubmit({ text: prompt.title });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs12(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
+            /* @__PURE__ */ jsxs12(PromptInputBody, { children: [
+              /* @__PURE__ */ jsx20(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ jsx20(PromptInputAttachment, { data: attachment }) }),
+              /* @__PURE__ */ jsx20(
                 PromptInputTextarea,
                 {
                   onChange: (e) => setInput(e.target.value),
@@ -2070,9 +2138,9 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs11(PromptInputToolbar, { children: [
-              /* @__PURE__ */ jsx18(PromptInputTools, { children: config?.features?.fileUpload !== false && /* @__PURE__ */ jsx18(AttachButton, {}) }),
-              /* @__PURE__ */ jsx18(PromptInputSubmit, { disabled: !input, status })
+            /* @__PURE__ */ jsxs12(PromptInputToolbar, { children: [
+              /* @__PURE__ */ jsx20(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ jsx20(AttachButton, {}) }),
+              /* @__PURE__ */ jsx20(PromptInputSubmit, { disabled: !input, status })
             ] })
           ] })
         ] })
@@ -2083,7 +2151,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
 
 // src/ChatWidget.tsx
 import { MessageCircle } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function ChatWidget({
   userId,
   conversationId,
@@ -2094,93 +2162,90 @@ function ChatWidget({
   temperature,
   theme,
   features,
-  display
+  display,
+  starterPrompts
 }) {
-  const initialWidth = display?.width || "30vw";
   const showToggleButton = display?.showToggleButton !== false;
+  const resizable = display?.resizable !== false;
+  const size = display?.size || "default";
   const [isOpen, setIsOpen] = useState5(display?.defaultOpen || false);
-  const [width, setWidth] = useState5(() => {
-    const value = parseInt(initialWidth);
-    if (initialWidth.includes("vw")) {
-      return value / 100 * window.innerWidth;
+  const [isResizing, setIsResizing] = useState5(false);
+  const containerRef = useRef4(null);
+  const customStyles = useMemo3(() => {
+    const styles = {};
+    if (display?.width) {
+      styles["--chat-widget-width"] = display.width;
     }
-    return value || window.innerWidth * 0.3;
-  });
-  const isResizing = useRef4(false);
+    return styles;
+  }, [display?.width]);
   const handleMouseDown = useCallback4((e) => {
+    if (!resizable) return;
     e.preventDefault();
-    isResizing.current = true;
+    setIsResizing(true);
     document.body.style.cursor = "ew-resize";
     document.body.style.userSelect = "none";
-  }, []);
+  }, [resizable]);
   useEffect5(() => {
-    const getConstraints = () => ({
-      minWidth: window.innerWidth * 0.2,
-      maxWidth: window.innerWidth * 0.6
-    });
+    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);
     };
-  }, []);
+  }, [isResizing]);
   const config = useMemo3(() => ({
     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__ */ jsxs12(Fragment6, { children: [
-    showToggleButton && !isOpen && /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs13(ChatStorageProvider, { userId, children: [
+    showToggleButton && !isOpen && /* @__PURE__ */ jsx21(
       "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__ */ jsx19(MessageCircle, { className: "h-6 w-6" })
+        children: /* @__PURE__ */ jsx21(MessageCircle, { className: "h-6 w-6" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs12(
+    isOpen && /* @__PURE__ */ jsxs13(
       "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__ */ jsx19(
+          resizable && /* @__PURE__ */ jsx21(
             "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__ */ jsx19("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx21("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ jsx21(
             ChatInterface,
             {
               id: conversationId,
@@ -2315,6 +2380,8 @@ var defaultSystemPrompt = "You are a helpful AI assistant.";
 var defaultTemperature = 0.7;
 var defaultThemeMode = "light";
 function useChatTheme() {
+  const { storageKeyPrefix } = useChatStorageKey();
+  const keyPrefix = storageKeyPrefix ? `chat-${storageKeyPrefix}-` : "chat-";
   const [theme, setTheme] = useState6(defaultTheme);
   const [conversationStarters, setConversationStarters] = useState6(defaultConversationStarters);
   const [model, setModel] = useState6(defaultModel);
@@ -2322,7 +2389,7 @@ function useChatTheme() {
   const [temperature, setTemperature] = useState6(defaultTemperature);
   const [themeMode, setThemeMode] = useState6(defaultThemeMode);
   useEffect6(() => {
-    const savedTheme = localStorage.getItem("chat-theme");
+    const savedTheme = localStorage.getItem(`${keyPrefix}theme`);
     if (savedTheme) {
       try {
         setTheme(JSON.parse(savedTheme));
@@ -2330,7 +2397,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));
@@ -2338,7 +2405,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);
@@ -2346,7 +2413,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);
@@ -2354,7 +2421,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));
@@ -2362,7 +2429,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);
@@ -2408,9 +2475,9 @@ function useChatTheme() {
       window.removeEventListener("chat-temperature-change", handleTemperatureChange);
       window.removeEventListener("chat-theme-mode-change", handleThemeModeChange);
     };
-  }, []);
+  }, [keyPrefix]);
   useEffect6(() => {
-    localStorage.setItem("chat-theme", JSON.stringify(theme));
+    localStorage.setItem(`${keyPrefix}theme`, JSON.stringify(theme));
     const root = document.documentElement;
     if (themeMode === "light") {
       root.style.setProperty("--chat-primary", hexToHSL(theme.lightPrimary));
@@ -2424,27 +2491,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]);
+  }, [theme, themeMode, keyPrefix]);
   useEffect6(() => {
-    localStorage.setItem("chat-conversation-starters", JSON.stringify(conversationStarters));
+    localStorage.setItem(`${keyPrefix}conversation-starters`, JSON.stringify(conversationStarters));
     window.dispatchEvent(new CustomEvent("chat-starters-change", { detail: conversationStarters }));
-  }, [conversationStarters]);
+  }, [conversationStarters, keyPrefix]);
   useEffect6(() => {
-    localStorage.setItem("chat-model", model);
+    localStorage.setItem(`${keyPrefix}model`, model);
     window.dispatchEvent(new CustomEvent("chat-model-change", { detail: model }));
-  }, [model]);
+  }, [model, keyPrefix]);
   useEffect6(() => {
-    localStorage.setItem("chat-system-prompt", systemPrompt);
+    localStorage.setItem(`${keyPrefix}system-prompt`, systemPrompt);
     window.dispatchEvent(new CustomEvent("chat-system-prompt-change", { detail: systemPrompt }));
-  }, [systemPrompt]);
+  }, [systemPrompt, keyPrefix]);
   useEffect6(() => {
-    localStorage.setItem("chat-temperature", temperature.toString());
+    localStorage.setItem(`${keyPrefix}temperature`, temperature.toString());
     window.dispatchEvent(new CustomEvent("chat-temperature-change", { detail: temperature }));
-  }, [temperature]);
+  }, [temperature, keyPrefix]);
   useEffect6(() => {
-    localStorage.setItem("chat-theme-mode", themeMode);
+    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 }));
   };
@@ -2511,10 +2578,10 @@ function useChatTheme() {
 
 // src/ui/input.tsx
 import * as React from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var Input = React.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx22(
       "input",
       {
         type,
@@ -2533,22 +2600,22 @@ Input.displayName = "Input";
 // src/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon as XIcon3 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx23(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx23(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -2566,9 +2633,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs13(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx21(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx23(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs14(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -2579,14 +2646,14 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs13(
+          showCloseButton && /* @__PURE__ */ jsxs14(
             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__ */ jsx21(XIcon3, {}),
-                /* @__PURE__ */ jsx21("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx23(XIcon3, {}),
+                /* @__PURE__ */ jsx23("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -2596,7 +2663,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       "data-slot": "dialog-header",
@@ -2609,7 +2676,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -2622,7 +2689,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -2633,6 +2700,7 @@ function DialogDescription({
 }
 export {
   Button,
+  ChatStorageProvider,
   ChatWidget,
   Dialog,
   DialogContent,
@@ -2640,8 +2708,11 @@ export {
   DialogHeader,
   DialogTitle,
   Input,
+  StarterMessageItem,
+  StarterMessages,
   ChatWidget_default as default,
   fontOptions,
+  useChatStorageKey,
   useChatTheme
 };
 //# sourceMappingURL=index.mjs.map