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

package/dist/index.cjs

@@ -38,6 +38,7 @@ __export(index_exports, {
   XbNovaTrack: () => XbNovaTrack,
   trackXbNovaEvent: () => trackXbNovaEvent,
   useXbNovaChat: () => useXbNovaChat,
+  useXbNovaContext: () => useXbNovaContext,
   useXbNovaFact: () => useXbNovaFact,
   useXbNovaFacts: () => useXbNovaFacts,
   useXbNovaSettings: () => useXbNovaSettings,
@@ -86,6 +87,17 @@ function resolveVisitorId() {
 function resolveFactValue(value) {
   return typeof value === "function" ? value() : value;
 }
+function collectContextEntries(registry) {
+  const out = [];
+  for (const source of registry.values()) {
+    const entries = typeof source === "function" ? source() : source;
+    if (!Array.isArray(entries)) continue;
+    for (const e of entries) {
+      if (e && typeof e.title === "string" && typeof e.description === "string") out.push(e);
+    }
+  }
+  return out;
+}
 function InternalProvider({
   auth,
   clientActionHandlers,
@@ -94,6 +106,7 @@ function InternalProvider({
 }) {
   const trackRegistry = (0, import_react.useRef)(/* @__PURE__ */ new Map()).current;
   const factsRegistry = (0, import_react.useRef)(/* @__PURE__ */ new Map()).current;
+  const contextRegistry = (0, import_react.useRef)(/* @__PURE__ */ new Map()).current;
   const emptyHandlers = (0, import_react.useRef)(/* @__PURE__ */ new Map()).current;
   const visitorIdRef = (0, import_react.useRef)(null);
   if (visitorIdRef.current === null) {
@@ -104,11 +117,12 @@ function InternalProvider({
       auth,
       trackRegistry,
       factsRegistry,
+      contextRegistry,
       clientActionHandlers: clientActionHandlers ?? emptyHandlers,
       visitorId: visitorIdRef.current,
       theme
     }),
-    [auth, trackRegistry, factsRegistry, clientActionHandlers, emptyHandlers, theme]
+    [auth, trackRegistry, factsRegistry, contextRegistry, clientActionHandlers, emptyHandlers, theme]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalContext.Provider, { value, children });
 }
@@ -1136,7 +1150,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, visitorId } = useXbNovaInternal();
+  const { auth, trackRegistry, contextRegistry, clientActionHandlers, visitorId } = useXbNovaInternal();
   const botId = options?.botId ?? auth.botId;
   const nudgeNodeId = options?.nudgeNodeId;
   const { apiKey, apiBaseUrl } = auth;
@@ -1175,7 +1189,7 @@ function useXbNovaChat(options) {
     next[next.length - 1] = { ...next[next.length - 1], id };
     return next;
   });
-  async function setFeedback(messageId, rating) {
+  async function setFeedback(messageId, rating, reason) {
     const conversationId = onboarding?.conversation_id;
     if (!conversationId || !messageId) return;
     const prevRating = feedbackRef.current[messageId] ?? null;
@@ -1192,11 +1206,11 @@ function useXbNovaChat(options) {
         {
           method: "PUT",
           headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}` },
-          body: JSON.stringify({ rating, visitor_id: visitorId })
+          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 });
+      options?.onFeedback?.({ conversationId, messageId, rating, reason });
     } catch (e) {
       console.warn("[xbnova] \uD53C\uB4DC\uBC31 \uC800\uC7A5 \uC2E4\uD328", e);
       apply(prevRating);
@@ -1288,7 +1302,9 @@ function useXbNovaChat(options) {
       return next;
     });
     const focused = getFocusedTrackEntry(trackRegistry);
-    const context = focused ? { region: focused.region, data: resolveFactValue(focused.data) } : void 0;
+    const notes = collectContextEntries(contextRegistry);
+    const screen = focused ? { region: focused.region, data: resolveFactValue(focused.data) } : {};
+    const context = focused || notes.length ? { ...screen, ...notes.length ? { notes } : {} } : void 0;
     try {
       await streamChat(
         apiBaseUrl,
@@ -1298,7 +1314,8 @@ function useXbNovaChat(options) {
           message: trimmed,
           conversation_id: onboarding?.conversation_id ?? null,
           context,
-          nudge_node_id: nudgeNodeId ?? null
+          nudge_node_id: nudgeNodeId ?? null,
+          opening_message: messages.length === 0 ? (options?.openingMessage ?? onboarding?.greeting) || null : null
         },
         { onPart: replaceLast, onMessageId: setLastAssistantId, onError: setError }
       );
@@ -1597,6 +1614,7 @@ function XbNovaChat({
     onFeedback,
     botId: activeBotId ?? botId,
     nudgeNodeId: activeNudgeNodeId,
+    openingMessage: openingLine ?? void 0,
     onDismissSheet: () => setOpen(false)
   });
   const effectiveBotId = activeBotId ?? botId;
@@ -1823,38 +1841,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,
-              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)),
+            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 })
           ] }),
@@ -1957,44 +1978,193 @@ function Avatar({
 }
 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({
+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,
-  onChange
+  isLast,
+  onRate,
+  children
 }) {
-  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",
+  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",
           {
-            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 })
+            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" })
+                  )
+                ]
+              }
+            )
           }
-        )
-      }
-    );
-  };
-  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)
-  ] });
+        ),
+        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";
@@ -2009,6 +2179,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");
@@ -2040,6 +2218,18 @@ function useXbNovaFacts(values) {
     };
   }, [factsRegistry]);
 }
+function useXbNovaContext(entries) {
+  const { contextRegistry } = useXbNovaInternal();
+  const id = (0, import_react10.useId)();
+  (0, import_react10.useEffect)(() => {
+    contextRegistry.set(id, entries);
+  });
+  (0, import_react10.useEffect)(() => {
+    return () => {
+      contextRegistry.delete(id);
+    };
+  }, [id, contextRegistry]);
+}
 function useXbNovaVisitor() {
   const { visitorId } = useXbNovaInternal();
   return visitorId;
@@ -2061,6 +2251,7 @@ function XbNovaFacts({ values }) {
   XbNovaTrack,
   trackXbNovaEvent,
   useXbNovaChat,
+  useXbNovaContext,
   useXbNovaFact,
   useXbNovaFacts,
   useXbNovaSettings,