@mordn/chat-widget 0.4.2 → 0.5.0

package/dist/index.mjs

@@ -490,7 +490,11 @@ var PromptInput = ({
       "form",
       {
         className: cn(
-          "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",
+          // The form border + horizontal divider colour both come from
+          // the styles.src.css `.chat-widget-container form ...` rules so
+          // there's a single token (--chat-divider) controlling both.
+          // No utility classes for border colour here.
+          "w-full overflow-hidden rounded-xl bg-background transition-colors",
           "[&:focus-within]:shadow-none [&:focus]:shadow-none shadow-none",
           className
         ),
@@ -1174,7 +1178,7 @@ var CodeBlock = ({
   "div",
   {
     className: cn(
-      "relative w-full overflow-hidden rounded-lg bg-[hsl(var(--chat-text)/0.03)] border border-[hsl(var(--chat-text)/0.1)]",
+      "relative w-full overflow-hidden rounded-lg bg-[hsl(var(--chat-text)/0.03)] border border-[var(--chat-divider)]",
       className
     ),
     ...props,
@@ -1241,7 +1245,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 border-[hsl(var(--chat-text)/0.1)]", className),
+    className: cn("not-prose w-full rounded-md border border-[var(--chat-divider)]", className),
     ...props
   }
 );
@@ -1267,6 +1271,7 @@ var ToolHeader = ({
   className,
   title,
   type,
+  toolName,
   state,
   ...props
 }) => /* @__PURE__ */ jsxs10(
@@ -1280,7 +1285,7 @@ var ToolHeader = ({
     children: [
       /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx17(WrenchIcon, { className: "size-4 text-muted-foreground" }),
-        /* @__PURE__ */ jsx17("span", { className: "font-medium text-sm", children: title ?? type.split("-").slice(1).join("-") }),
+        /* @__PURE__ */ jsx17("span", { className: "font-medium text-sm", children: title ?? toolName ?? type.split("-").slice(1).join("-") }),
         getStatusBadge(state)
       ] }),
       /* @__PURE__ */ jsx17(ChevronDownIcon4, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
@@ -1359,7 +1364,10 @@ function StarterMessages({
             onClick: () => onPromptSelect(prompt)
           }
         ),
-        index < prompts.length - 1 && /* @__PURE__ */ jsx18("div", { className: "h-px bg-[hsl(var(--chat-text)/0.08)] mx-3" })
+        index < prompts.length - 1 && // 1px-tall element used as a divider — same --chat-divider token
+        // every other separator in the widget uses, so consumers only
+        // need to override one variable to recolour all of them.
+        /* @__PURE__ */ jsx18("div", { className: "h-px mx-3", style: { backgroundColor: "var(--chat-divider)" } })
       ] }, index))
     }
   );
@@ -1432,6 +1440,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   const [activeTabId, setActiveTabId] = useState4("");
   const [initialTabCreated, setInitialTabCreated] = useState4(false);
   const [isInitializing, setIsInitializing] = useState4(true);
+  const [isLoadingMessages, setIsLoadingMessages] = useState4(false);
   const lastSyncedTabId = useRef3("");
   const hasInitialized = useRef3(false);
   const { messages, sendMessage, status, setMessages } = useChat({
@@ -1611,7 +1620,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       }))
     );
     setActiveTabId(tabId);
-    await loadConversation(tabId);
+    setIsLoadingMessages(true);
+    try {
+      await loadConversation(tabId);
+    } finally {
+      setIsLoadingMessages(false);
+    }
   };
   const closeTab = (tabId) => {
     if (tabs.length <= 1) return;
@@ -1836,7 +1850,14 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
             if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
               const toolPart = part;
               return /* @__PURE__ */ jsxs12(Tool, { children: [
-                /* @__PURE__ */ jsx20(ToolHeader, { type: part.type, state: toolPart.state }),
+                /* @__PURE__ */ jsx20(
+                  ToolHeader,
+                  {
+                    type: part.type,
+                    toolName: toolPart.toolName,
+                    state: toolPart.state
+                  }
+                ),
                 /* @__PURE__ */ jsxs12(ToolContent, { children: [
                   /* @__PURE__ */ jsx20(ToolInput, { input: toolPart.input }),
                   /* @__PURE__ */ jsx20(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
@@ -1902,7 +1923,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       ),
       children: [
         /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 px-3 py-2 border-b backdrop-blur-sm relative z-20", style: {
-          borderColor: "var(--chat-border-soft)",
+          borderColor: "var(--chat-divider)",
           backgroundColor: "var(--chat-header-bg)"
         }, children: [
           /* @__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(
@@ -2004,10 +2025,10 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               ),
               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: "hsl(var(--chat-background))",
-                border: `1px solid ${"var(--chat-border-medium)"}`
+                border: `1px solid ${"var(--chat-divider)"}`
               }, children: [
                 /* @__PURE__ */ jsx20("div", { className: "p-2.5 border-b", style: {
-                  borderColor: "var(--chat-border-soft)",
+                  borderColor: "var(--chat-divider)",
                   backgroundColor: "var(--chat-overlay)"
                 }, children: /* @__PURE__ */ jsx20("div", { className: "relative", children: /* @__PURE__ */ jsx20(
                   "input",
@@ -2019,7 +2040,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     className: "w-full h-7 px-2.5 text-[13px] rounded-lg focus:outline-none transition-all",
                     style: {
                       backgroundColor: "hsl(var(--chat-surface-deep))",
-                      border: `1px solid ${"var(--chat-border-medium)"}`,
+                      border: `1px solid ${"var(--chat-divider)"}`,
                       color: "hsl(var(--chat-text))"
                     }
                   }
@@ -2116,7 +2137,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         ] }),
         /* @__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 }),
-          isInitializing ? /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center py-8", role: "status", "aria-label": "Loading conversation", children: /* @__PURE__ */ jsx20("div", { className: "h-4 w-4 rounded-full border-2 border-current border-t-transparent animate-spin", style: { color: "hsl(var(--chat-text-muted))" } }) }) : messages.length === 0 && status !== "submitted" && config?.starterPrompts && /* @__PURE__ */ jsx20(
+          isInitializing || isLoadingMessages ? /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center py-8", role: "status", "aria-label": "Loading conversation", children: /* @__PURE__ */ jsx20("div", { className: "h-4 w-4 rounded-full border-2 border-current border-t-transparent animate-spin", style: { color: "hsl(var(--chat-text-muted))" } }) }) : messages.length === 0 && status !== "submitted" && config?.starterPrompts && /* @__PURE__ */ jsx20(
             StarterMessages,
             {
               prompts: config.starterPrompts,
@@ -2200,15 +2221,26 @@ function ChatWidget({
   display,
   starterPrompts,
   onClose,
-  headerActions
+  headerActions,
+  open,
+  onOpenChange
 }) {
   const layout = display?.layout || "popup";
-  const showToggleButton = display?.showToggleButton !== false;
+  const isControlled = open !== void 0;
+  const showToggleButton = !isControlled && display?.showToggleButton !== false;
   const resizable = layout === "popup" && display?.resizable !== false;
   const size = display?.size || "default";
-  const [isOpen, setIsOpen] = useState5(
+  const [internalIsOpen, setInternalIsOpen] = useState5(
     layout !== "popup" ? true : display?.defaultOpen || false
   );
+  const isOpen = isControlled ? open : internalIsOpen;
+  const setIsOpen = (next) => {
+    if (isControlled) {
+      onOpenChange?.(next);
+    } else {
+      setInternalIsOpen(next);
+    }
+  };
   const [isResizing, setIsResizing] = useState5(false);
   const containerRef = useRef4(null);
   const customStyles = useMemo3(() => {