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

package/dist/index.cjs

@@ -1175,7 +1175,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 +1192,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);
@@ -1823,38 +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,
-              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 +1960,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 +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");