@xbrain-swe/nova-chat-widget 0.1.8 → 0.1.10

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, reason) {
+    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, reason: rating === "down" ? reason ?? null : null })
+        }
+      );
+      if (!res.ok) throw new Error(`${res.status}`);
+      options?.onFeedback?.({ conversationId, messageId, rating, reason });
+    } 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,7 +1593,8 @@ 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)
@@ -1776,31 +1823,41 @@ function XbNovaChat({
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [
             showDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rounded-lg bg-neutral-50 px-3 py-2 text-[11px] text-neutral-400 dark:bg-neutral-800", children: "\uC9C0\uAE08 \uBCF4\uACE0 \uACC4\uC2E0 \uD654\uBA74\uACFC \uB9E4\uBB3C \uC815\uBCF4\uB97C \uAE30\uC900\uC73C\uB85C \uC548\uB0B4\uD574 \uB4DC\uB824\uC694." }) : null,
             firstBubble ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Bubble, { role: "assistant", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AssistantMarkdown, { text: firstBubble }) }) : null,
-            messages.map((message, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: message.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Bubble, { role: "user", children: message.parts.map((p) => p.kind === "text" ? p.text : "").join("") }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1", children: [
-              message.parts.map((part, j) => {
-                if (part.kind === "text") {
-                  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, 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)),
+            messages.map((message, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: message.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Bubble, { role: "user", children: message.parts.map((p) => p.kind === "text" ? p.text : "").join("") }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              AnswerActionsFrame,
+              {
+                enabled: feedbackEnabled && !busy && !!message.id && message.parts.some((p) => p.kind === "text" && p.text.trim()),
+                text: message.parts.filter((p) => p.kind === "text").map((p) => p.kind === "text" ? p.text : "").join("\n\n"),
+                rating: message.id ? feedback[message.id] ?? null : null,
+                isLast: i === messages.length - 1,
+                onRate: (r, reason) => void setFeedback(message.id, r, reason),
+                children: [
+                  message.parts.map((part, j) => {
+                    if (part.kind === "text") {
+                      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, 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 })
           ] }),
@@ -1901,6 +1958,196 @@ function Avatar({
   const text = branding?.avatar_text?.trim() || "AI";
   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";
+var COPY_PATH = "M9 9h11v11H9zM5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1";
+var CHECK_PATH = "m5 12 5 5L20 7";
+var FEEDBACK_REASONS = [
+  { code: "inaccurate", label: "\uC815\uD655\uD558\uC9C0 \uC54A\uC544\uC694" },
+  { code: "irrelevant", label: "\uC9C8\uBB38\uACFC \uB2EC\uB77C\uC694" },
+  { code: "too_long", label: "\uB108\uBB34 \uAE38\uC5B4\uC694" },
+  { code: "unclear", label: "\uC774\uD574\uD558\uAE30 \uC5B4\uB824\uC6CC\uC694" }
+];
+var LONG_PRESS_MS = 420;
+function ActionIcon({ path, filled }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: filled ? "currentColor" : "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: path })
+    }
+  );
+}
+async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    try {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      const ok = document.execCommand("copy");
+      ta.remove();
+      return ok;
+    } catch {
+      return false;
+    }
+  }
+}
+function AnswerActions({
+  text,
+  rating,
+  isLast,
+  onRate,
+  children
+}) {
+  const rootRef = (0, import_react9.useRef)(null);
+  const timerRef = (0, import_react9.useRef)(null);
+  const [menuOpen, setMenuOpen] = (0, import_react9.useState)(false);
+  const [reasonOpen, setReasonOpen] = (0, import_react9.useState)(false);
+  const [copied, setCopied] = (0, import_react9.useState)(false);
+  const [entered, setEntered] = (0, import_react9.useState)(false);
+  const clearTimer = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+  };
+  (0, import_react9.useEffect)(() => clearTimer, []);
+  (0, import_react9.useEffect)(() => {
+    if (!menuOpen) {
+      setEntered(false);
+      return;
+    }
+    const raf = requestAnimationFrame(() => setEntered(true));
+    const onDown = (e) => {
+      if (!e.composedPath().includes(rootRef.current)) setMenuOpen(false);
+    };
+    document.addEventListener("pointerdown", onDown, true);
+    return () => {
+      cancelAnimationFrame(raf);
+      document.removeEventListener("pointerdown", onDown, true);
+    };
+  }, [menuOpen]);
+  const startPress = (e) => {
+    if (e.pointerType === "mouse" || isLast) return;
+    clearTimer();
+    timerRef.current = setTimeout(() => {
+      setMenuOpen(true);
+      if (typeof navigator.vibrate === "function") navigator.vibrate(10);
+    }, LONG_PRESS_MS);
+  };
+  const handleCopy = async () => {
+    if (await copyText(text)) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1400);
+    }
+  };
+  const handleRate = (kind) => {
+    if (rating === kind) {
+      onRate(null);
+      setReasonOpen(false);
+      return;
+    }
+    onRate(kind);
+    setReasonOpen(kind === "down");
+    if (kind === "up") setMenuOpen(false);
+  };
+  const barVisible = isLast || menuOpen;
+  const floating = menuOpen && !isLast;
+  const btn = (label, onClick, selected, color, icon) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      "aria-pressed": selected,
+      onClick,
+      className: `flex items-center justify-center gap-1 rounded-full text-neutral-400 transition-colors hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 ${floating ? "h-9 px-3 text-xs font-semibold" : "h-7 w-7"}`,
+      style: color ? { color } : void 0,
+      children: [
+        icon,
+        floating ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      ref: rootRef,
+      className: "group space-y-1",
+      onPointerDown: startPress,
+      onPointerUp: clearTimer,
+      onPointerCancel: clearTimer,
+      onPointerLeave: clearTimer,
+      onPointerMove: (e) => {
+        if (Math.abs(e.movementX) + Math.abs(e.movementY) > 6) clearTimer();
+      },
+      onContextMenu: (e) => {
+        if (!isLast && e.nativeEvent.pointerType !== "mouse") e.preventDefault();
+      },
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            className: `flex pl-1 ${barVisible ? "" : "hidden md:group-hover:flex"}`,
+            style: { transition: "opacity 140ms, transform 140ms", opacity: floating && !entered ? 0 : 1, transform: floating && !entered ? "scale(0.94)" : "none" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "div",
+              {
+                className: `flex items-center ${floating ? "gap-0.5 rounded-full border border-neutral-200 bg-white p-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800" : "gap-0.5"}`,
+                children: [
+                  btn(copied ? "\uBCF5\uC0AC\uB428" : "\uBCF5\uC0AC", handleCopy, false, copied ? "var(--xbnova-accent-1, #4f46e5)" : void 0, /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionIcon, { path: copied ? CHECK_PATH : COPY_PATH })),
+                  btn(
+                    "\uC88B\uC544\uC694",
+                    () => handleRate("up"),
+                    rating === "up",
+                    rating === "up" ? "var(--xbnova-accent-1, #4f46e5)" : void 0,
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionIcon, { path: THUMB_UP_PATH, filled: rating === "up" })
+                  ),
+                  btn(
+                    "\uBCC4\uB85C\uC608\uC694",
+                    () => handleRate("down"),
+                    rating === "down",
+                    rating === "down" ? "#dc2626" : void 0,
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionIcon, { path: THUMB_DOWN_PATH, filled: rating === "down" })
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        rating === "down" && reasonOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5 pl-1 pt-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[11px] text-neutral-400", children: "\uC5B4\uB5A4 \uC810\uC774 \uC544\uC26C\uC6E0\uB098\uC694?" }),
+          FEEDBACK_REASONS.map((r) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onRate("down", r.code);
+                setReasonOpen(false);
+                setMenuOpen(false);
+              },
+              className: "xbnova-chip rounded-full border px-2.5 py-1 text-[11px] font-semibold transition",
+              children: r.label
+            },
+            r.code
+          ))
+        ] }) : null
+      ]
+    }
+  );
+}
 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)(
@@ -1914,6 +2161,14 @@ function Bubble({ role, children }) {
 function AssistantMarkdown({ text }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "space-y-1.5 text-sm leading-relaxed [&_ol]:list-decimal [&_ul]:list-disc [&_ol]:pl-5 [&_ul]:pl-5 [&_li]:pl-0.5 [&_strong]:font-semibold [&_a]:underline [&_code]:rounded [&_code]:bg-black/10 [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[0.85em] [&_p]:mb-1.5 last:[&_p]:mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], children: text }) });
 }
+function AnswerActionsFrame({
+  enabled,
+  children,
+  ...rest
+}) {
+  if (!enabled) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "space-y-1", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AnswerActions, { ...rest, children });
+}
 
 // src/facts.ts
 var import_react10 = require("react");