@xbrain-swe/nova-chat-widget 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -1057,6 +1057,9 @@ async function consumeSse(response, handlers) {
         continue;
       }
       switch (event.type) {
+        case "start":
+          if (typeof event.messageId === "string" && event.messageId) handlers.onMessageId?.(event.messageId);
+          break;
         case "text-start": {
           const id = String(event.id);
           textIndex.set(id, parts.length);
@@ -1133,7 +1136,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 { auth, trackRegistry, clientActionHandlers, visitorId } = useXbNovaInternal();
   const botId = options?.botId ?? auth.botId;
   const nudgeNodeId = options?.nudgeNodeId;
   const { apiKey, apiBaseUrl } = auth;
@@ -1142,6 +1145,9 @@ function useXbNovaChat(options) {
   const [busy, setBusy] = (0, import_react8.useState)(false);
   const [error, setError] = (0, import_react8.useState)(null);
   const [clientResults, setClientResults] = (0, import_react8.useState)({});
+  const [feedback, setFeedbackState] = (0, import_react8.useState)({});
+  const feedbackRef = (0, import_react8.useRef)(feedback);
+  feedbackRef.current = feedback;
   const dispatchedClientActionsRef = (0, import_react8.useRef)(/* @__PURE__ */ new Set());
   const nudgeNodeIdRef = (0, import_react8.useRef)(nudgeNodeId);
   nudgeNodeIdRef.current = nudgeNodeId;
@@ -1150,6 +1156,7 @@ function useXbNovaChat(options) {
     setMessages([]);
     setError(null);
     setClientResults({});
+    setFeedbackState({});
     dispatchedClientActionsRef.current = /* @__PURE__ */ new Set();
     fetch(`${apiBaseUrl}/v1/conversations`, {
       method: "POST",
@@ -1159,9 +1166,42 @@ function useXbNovaChat(options) {
   }, [apiBaseUrl, apiKey, botId]);
   const appendToLastAssistant = (existingParts, newParts) => setMessages((prev) => {
     const next = [...prev];
-    next[next.length - 1] = { role: "assistant", parts: [...existingParts, ...newParts] };
+    next[next.length - 1] = { ...next[next.length - 1], role: "assistant", parts: [...existingParts, ...newParts] };
+    return next;
+  });
+  const setLastAssistantId = (id) => setMessages((prev) => {
+    if (prev.length === 0) return prev;
+    const next = [...prev];
+    next[next.length - 1] = { ...next[next.length - 1], id };
     return next;
   });
+  async function setFeedback(messageId, rating) {
+    const conversationId = onboarding?.conversation_id;
+    if (!conversationId || !messageId) return;
+    const prevRating = feedbackRef.current[messageId] ?? null;
+    const apply = (r) => setFeedbackState((prev) => {
+      const next = { ...prev };
+      if (r === null) delete next[messageId];
+      else next[messageId] = r;
+      return next;
+    });
+    apply(rating);
+    try {
+      const res = await fetch(
+        `${apiBaseUrl}/v1/conversations/${encodeURIComponent(conversationId)}/messages/${encodeURIComponent(messageId)}/feedback`,
+        {
+          method: "PUT",
+          headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}` },
+          body: JSON.stringify({ rating, visitor_id: visitorId })
+        }
+      );
+      if (!res.ok) throw new Error(`${res.status}`);
+      options?.onFeedback?.({ conversationId, messageId, rating });
+    } catch (e) {
+      console.warn("[xbnova] \uD53C\uB4DC\uBC31 \uC800\uC7A5 \uC2E4\uD328", e);
+      apply(prevRating);
+    }
+  }
   async function runClientAction(spec, part, existingParts) {
     if (spec.dismissSheet) options?.onDismissSheet?.();
     let result;
@@ -1207,7 +1247,11 @@ function useXbNovaChat(options) {
           tool_call_id: part.toolCallId,
           result_text: resultText
         },
-        { onPart: (newParts) => appendToLastAssistant(existingParts, newParts), onError: setError }
+        {
+          onPart: (newParts) => appendToLastAssistant(existingParts, newParts),
+          onMessageId: setLastAssistantId,
+          onError: setError
+        }
       );
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
@@ -1240,7 +1284,7 @@ function useXbNovaChat(options) {
     ]);
     const replaceLast = (parts) => setMessages((prev) => {
       const next = [...prev];
-      next[next.length - 1] = { role: "assistant", parts };
+      next[next.length - 1] = { ...next[next.length - 1], role: "assistant", parts };
       return next;
     });
     const focused = getFocusedTrackEntry(trackRegistry);
@@ -1256,7 +1300,7 @@ function useXbNovaChat(options) {
           context,
           nudge_node_id: nudgeNodeId ?? null
         },
-        { onPart: replaceLast, onError: setError }
+        { onPart: replaceLast, onMessageId: setLastAssistantId, onError: setError }
       );
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
@@ -1264,7 +1308,7 @@ function useXbNovaChat(options) {
       setBusy(false);
     }
   }
-  return { onboarding, messages, busy, error, send, clientResults };
+  return { onboarding, messages, busy, error, send, clientResults, feedback, setFeedback };
 }
 
 // src/views.tsx
@@ -1524,7 +1568,9 @@ function XbNovaChat({
   defaultOpen = false,
   idleText = "AI\uC5D0\uAC8C \uC774 \uCC28 \uBB3C\uC5B4\uBCF4\uAE30",
   avatarSize = 28,
-  onVerdictAction
+  onVerdictAction,
+  feedback: feedbackEnabled = true,
+  onFeedback
 }) {
   const { auth, trackRegistry, factsRegistry, visitorId, clientActionHandlers, theme } = useXbNovaInternal();
   const themeVars = {
@@ -1547,11 +1593,34 @@ 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, clientResults } = useXbNovaChat({
+  const { onboarding, messages, busy, error, send, clientResults, feedback, setFeedback } = useXbNovaChat({
+    onFeedback,
     botId: activeBotId ?? botId,
     nudgeNodeId: activeNudgeNodeId,
     onDismissSheet: () => setOpen(false)
   });
+  const effectiveBotId = activeBotId ?? botId;
+  const [cachedBranding, setCachedBranding] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
+    try {
+      const raw = window.localStorage.getItem(`xbnova_branding:${effectiveBotId}`);
+      setCachedBranding(raw ? JSON.parse(raw) : null);
+    } catch {
+      setCachedBranding(null);
+    }
+  }, [effectiveBotId]);
+  (0, import_react9.useEffect)(() => {
+    if (!onboarding?.branding) return;
+    try {
+      window.localStorage.setItem(
+        `xbnova_branding:${effectiveBotId}`,
+        JSON.stringify({ logo_url: onboarding.branding.logo_url, avatar_text: onboarding.branding.avatar_text })
+      );
+    } catch {
+    }
+  }, [onboarding?.branding, effectiveBotId]);
+  const branding = onboarding?.branding ?? cachedBranding ?? void 0;
+  const brandingReady = Boolean(onboarding) || cachedBranding !== null || Boolean(error);
   (0, import_react9.useEffect)(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
@@ -1679,7 +1748,8 @@ function XbNovaChat({
                         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                           Avatar,
                           {
-                            branding: onboarding?.branding,
+                            branding,
+                            ready: brandingReady,
                             size: avatarSize,
                             className: "shadow-md",
                             gradient: avatarGradientStyle
@@ -1728,7 +1798,8 @@ function XbNovaChat({
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Avatar,
               {
-                branding: onboarding?.branding,
+                branding,
+                ready: brandingReady,
                 size: headerAvatarSize,
                 className: "shrink-0",
                 gradient: avatarGradientStyle
@@ -1775,7 +1846,14 @@ function XbNovaChat({
                 }
                 return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolView, { part, viewRenderers, onVerdictAction }, j);
               }),
-              !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
+              !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,
+              feedbackEnabled && !busy && message.id && message.parts.some((p) => p.kind === "text" && p.text.trim()) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                FeedbackButtons,
+                {
+                  rating: feedback[message.id] ?? null,
+                  onChange: (r) => void setFeedback(message.id, r)
+                }
+              ) : 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 })
@@ -1848,6 +1926,7 @@ function XbNovaChat({
 }
 function Avatar({
   branding,
+  ready,
   size,
   className = "",
   gradient
@@ -1855,27 +1934,67 @@ function Avatar({
   const box = { width: size, height: size };
   const logoUrl = branding?.logo_url?.trim() ?? "";
   const [failedUrl, setFailedUrl] = (0, import_react9.useState)("");
+  const [loadedUrl, setLoadedUrl] = (0, import_react9.useState)("");
+  const base = `${className} relative flex flex-none items-center justify-center overflow-hidden rounded-full font-bold text-white`;
+  if (!ready) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: base, style: { ...gradient, ...box }, "aria-hidden": true });
+  }
   if (logoUrl && failedUrl !== logoUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: base, style: { ...gradient, ...box }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "img",
       {
         src: logoUrl,
         alt: "",
+        onLoad: () => setLoadedUrl(logoUrl),
         onError: () => setFailedUrl(logoUrl),
-        style: box,
-        className: `${className} flex-none rounded-full bg-white object-cover`
+        className: "absolute inset-0 h-full w-full rounded-full bg-white object-cover transition-opacity duration-200",
+        style: { opacity: loadedUrl === logoUrl ? 1 : 0 }
       }
-    );
+    ) });
   }
   const text = branding?.avatar_text?.trim() || "AI";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "span",
-    {
-      className: `${className} flex flex-none items-center justify-center rounded-full font-bold text-white`,
-      style: { ...gradient, ...box, fontSize: Math.max(10, Math.round(size * 0.4)) },
-      children: text
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: base, style: { ...gradient, ...box, fontSize: Math.max(10, Math.round(size * 0.4)) }, children: text });
+}
+var THUMB_UP_PATH = "M7 10v12M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z";
+var THUMB_DOWN_PATH = "M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z";
+function FeedbackButtons({
+  rating,
+  onChange
+}) {
+  const item = (kind, label, path) => {
+    const selected = rating === kind;
+    const color = selected ? kind === "up" ? "var(--xbnova-accent-1, #4f46e5)" : "#dc2626" : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        "aria-pressed": selected,
+        onClick: () => onChange(selected ? null : kind),
+        className: "flex h-6 w-6 items-center justify-center rounded-md text-neutral-400 transition-colors hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300",
+        style: color ? { color } : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: selected ? "currentColor" : "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: path })
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-0.5 pl-1", children: [
+    item("up", "\uB3C4\uC6C0\uC774 \uB410\uC5B4\uC694", THUMB_UP_PATH),
+    item("down", "\uB3C4\uC6C0\uC774 \uC548 \uB410\uC5B4\uC694", THUMB_DOWN_PATH)
+  ] });
 }
 function Bubble({ role, children }) {
   const mine = role === "user";