@xbrain-swe/nova-chat-widget 0.1.3 → 0.1.6

package/dist/index.cjs

@@ -57,7 +57,8 @@ var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var DEFAULT_THEME = {
   accentFrom: "#4f46e5",
-  accentTo: "#7c3aed"
+  accentTo: "#7c3aed",
+  colorScheme: "system"
 };
 var InternalContext = (0, import_react.createContext)(null);
 function useXbNovaInternal() {
@@ -933,6 +934,7 @@ function XbNovaProvider({
         {
           handler: spec.handler,
           awaitResult: spec.awaitResult ?? false,
+          timeoutMs: spec.timeoutMs,
           dismissSheet: spec.dismissSheet ?? false,
           render: spec.render
         }
@@ -968,10 +970,25 @@ function loadCss() {
   }
   return cssPromise;
 }
+function useResolvedScheme(scheme) {
+  const [systemDark, setSystemDark] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
+    if (scheme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setSystemDark(mq.matches);
+    const onChange = (e) => setSystemDark(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [scheme]);
+  if (scheme === "system") return systemDark ? "dark" : "light";
+  return scheme;
+}
 function XbNovaShadowRoot({
   children,
   style
 }) {
+  const { theme } = useXbNovaInternal();
+  const scheme = useResolvedScheme(theme.colorScheme);
   const hostRef = (0, import_react7.useRef)(null);
   const [mountNode, setMountNode] = (0, import_react7.useState)(null);
   const [portalTarget, setPortalTarget] = (0, import_react7.useState)(null);
@@ -993,6 +1010,11 @@ function XbNovaShadowRoot({
     shadow.appendChild(mount);
     setMountNode(mount);
   }, [portalTarget]);
+  (0, import_react7.useEffect)(() => {
+    if (!mountNode) return;
+    mountNode.dataset.xbnovaScheme = scheme;
+    mountNode.style.colorScheme = scheme;
+  }, [mountNode, scheme]);
   if (!portalTarget) return null;
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: hostRef, style, children: mountNode ? (0, import_react_dom.createPortal)(children, mountNode) : null }),
@@ -1109,6 +1131,7 @@ async function resumeToolResult(apiBaseUrl, apiKey, body, handlers) {
 }
 
 // src/use-chat.ts
+var DEFAULT_CLIENT_ACTION_TIMEOUT_MS = 15e3;
 function useXbNovaChat(options) {
   const { auth, trackRegistry, clientActionHandlers } = useXbNovaInternal();
   const botId = options?.botId ?? auth.botId;
@@ -1118,6 +1141,7 @@ function useXbNovaChat(options) {
   const [messages, setMessages] = (0, import_react8.useState)([]);
   const [busy, setBusy] = (0, import_react8.useState)(false);
   const [error, setError] = (0, import_react8.useState)(null);
+  const [clientResults, setClientResults] = (0, import_react8.useState)({});
   const dispatchedClientActionsRef = (0, import_react8.useRef)(/* @__PURE__ */ new Set());
   const nudgeNodeIdRef = (0, import_react8.useRef)(nudgeNodeId);
   nudgeNodeIdRef.current = nudgeNodeId;
@@ -1125,6 +1149,7 @@ function useXbNovaChat(options) {
     setOnboarding(null);
     setMessages([]);
     setError(null);
+    setClientResults({});
     dispatchedClientActionsRef.current = /* @__PURE__ */ new Set();
     fetch(`${apiBaseUrl}/v1/conversations`, {
       method: "POST",
@@ -1141,7 +1166,20 @@ function useXbNovaChat(options) {
     if (spec.dismissSheet) options?.onDismissSheet?.();
     let result;
     try {
-      result = await spec.handler(part.input);
+      if (!spec.awaitResult) {
+        await spec.handler(part.input);
+        return;
+      }
+      const timeoutMs = spec.timeoutMs ?? DEFAULT_CLIENT_ACTION_TIMEOUT_MS;
+      let timer;
+      const timeout = new Promise((resolve) => {
+        timer = setTimeout(() => resolve("\uC624\uB958: \uC751\uB2F5 \uC2DC\uAC04\uC774 \uCD08\uACFC\uB418\uC5C8\uC2B5\uB2C8\uB2E4."), timeoutMs);
+      });
+      try {
+        result = await Promise.race([Promise.resolve(spec.handler(part.input)), timeout]);
+      } finally {
+        clearTimeout(timer);
+      }
     } catch (e) {
       if (!spec.awaitResult) return;
       result = e instanceof Error ? `\uC624\uB958: ${e.message}` : "\uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.";
@@ -1149,7 +1187,15 @@ function useXbNovaChat(options) {
     if (!spec.awaitResult) return;
     const conversationId = onboarding?.conversation_id;
     if (!conversationId) return;
-    const resultText = typeof result === "string" && result.trim() ? result : "\uD578\uB4E4\uB7EC\uAC00 \uACB0\uACFC\uB97C \uBC18\uD658\uD558\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.";
+    const structured = result && typeof result === "object" ? result : null;
+    if (structured?.view) {
+      setClientResults((prev) => ({
+        ...prev,
+        [part.toolCallId]: { view: structured.view, output: structured.output }
+      }));
+    }
+    const rawText = structured ? structured.text : result;
+    const resultText = typeof rawText === "string" && rawText.trim() ? rawText : "\uD578\uB4E4\uB7EC\uAC00 \uACB0\uACFC\uB97C \uBC18\uD658\uD558\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.";
     setBusy(true);
     try {
       await resumeToolResult(
@@ -1218,7 +1264,7 @@ function useXbNovaChat(options) {
       setBusy(false);
     }
   }
-  return { onboarding, messages, busy, error, send };
+  return { onboarding, messages, busy, error, send, clientResults };
 }
 
 // src/views.tsx
@@ -1341,9 +1387,10 @@ function ToolView({
 
 // src/chat.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function hasVisiblePart(parts, clientActionHandlers) {
+function hasVisiblePart(parts, clientActionHandlers, clientResults) {
   return parts.some((part) => {
     if (part.kind === "text") return true;
+    if (clientResults[part.toolCallId]) return true;
     const spec = clientActionHandlers.get(part.toolName);
     return spec ? Boolean(spec.render) : true;
   });
@@ -1498,7 +1545,7 @@ function XbNovaChat({
   const [input, setInput] = (0, import_react9.useState)("");
   const bottomRef = (0, import_react9.useRef)(null);
   const typedHintText = useTypewriter(hint?.text ?? "", hint?.triggerNodeId ?? "");
-  const { onboarding, messages, busy, error, send } = useXbNovaChat({
+  const { onboarding, messages, busy, error, send, clientResults } = useXbNovaChat({
     botId: activeBotId ?? botId,
     nudgeNodeId: activeNudgeNodeId,
     onDismissSheet: () => setOpen(false)
@@ -1628,11 +1675,11 @@ function XbNovaChat({
                         className: "flex shrink-0 items-center justify-center",
                         style: { width: collapsedSize, height: collapsedSize },
                         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                          "span",
+                          Avatar,
                           {
-                            className: "flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-bold text-white shadow-md",
-                            style: avatarGradientStyle,
-                            children: "AI"
+                            branding: onboarding?.branding,
+                            className: "h-7 w-7 text-[11px] shadow-md",
+                            gradient: avatarGradientStyle
                           }
                         )
                       }
@@ -1676,11 +1723,11 @@ function XbNovaChat({
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex h-full w-full flex-col rounded-t-[20px] bg-white shadow-2xl sm:rounded-2xl sm:border sm:border-neutral-200 dark:bg-neutral-900 sm:dark:border-neutral-700", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("header", { className: "flex items-center gap-2 border-b border-neutral-200 px-3.5 py-2.5 dark:border-neutral-700", children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "span",
+              Avatar,
               {
-                className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white",
-                style: avatarGradientStyle,
-                children: "AI"
+                branding: onboarding?.branding,
+                className: "h-6 w-6 shrink-0 text-[10px]",
+                gradient: avatarGradientStyle
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "min-w-0 flex-1", children: [
@@ -1707,12 +1754,24 @@ function XbNovaChat({
                   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Bubble, { role: "assistant", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AssistantMarkdown, { text: part.text }) }, j);
                 }
                 if (clientActionHandlers.has(part.toolName)) {
+                  const result = clientResults[part.toolCallId];
+                  if (result) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      ToolView,
+                      {
+                        part: { ...part, state: "output", view: result.view, output: result.output },
+                        viewRenderers,
+                        onVerdictAction
+                      },
+                      j
+                    );
+                  }
                   const spec = clientActionHandlers.get(part.toolName);
                   return spec?.render ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: spec.render(part.input) }, j) : null;
                 }
                 return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolView, { part, viewRenderers, onVerdictAction }, j);
               }),
-              !hasVisiblePart(message.parts, clientActionHandlers) && busy ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Bubble, { role: "assistant", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-neutral-400", children: "\uC0DD\uAC01\uD558\uB294 \uC911\u2026" }) }) : null
+              !hasVisiblePart(message.parts, clientActionHandlers, clientResults) && busy ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Bubble, { role: "assistant", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-neutral-400", children: "\uC0DD\uAC01\uD558\uB294 \uC911\u2026" }) }) : null
             ] }) }, i)),
             error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rounded-lg bg-red-50 px-3 py-2 text-xs text-red-700 dark:bg-red-950 dark:text-red-300", children: error }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: bottomRef })
@@ -1783,6 +1842,34 @@ function XbNovaChat({
     )
   ] });
 }
+function Avatar({
+  branding,
+  className,
+  gradient
+}) {
+  const logoUrl = branding?.logo_url?.trim() ?? "";
+  const [failedUrl, setFailedUrl] = (0, import_react9.useState)("");
+  if (logoUrl && failedUrl !== logoUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "img",
+      {
+        src: logoUrl,
+        alt: "",
+        onError: () => setFailedUrl(logoUrl),
+        className: `${className} flex-none rounded-full bg-white object-cover`
+      }
+    );
+  }
+  const text = branding?.avatar_text?.trim() || "AI";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      className: `${className} flex items-center justify-center rounded-full font-bold text-white`,
+      style: gradient,
+      children: text
+    }
+  );
+}
 function Bubble({ role, children }) {
   const mine = role === "user";
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: mine ? "flex justify-end" : "flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(