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

package/dist/index.d.cts

@@ -116,11 +116,15 @@ type ClientResults = Record<string, {
     output: unknown;
 }>;
 type XbNovaFeedbackRating = "up" | "down" | null;
+/** 👎 사유 칩의 코드. */
+type XbNovaFeedbackReason = "inaccurate" | "irrelevant" | "too_long" | "unclear";
 /** 답변 만족도 저장 성공 후 호스트로 전달되는 이벤트. `rating: null`은 평가 취소. */
 type XbNovaFeedbackEvent = {
     conversationId: string;
     messageId: string;
     rating: XbNovaFeedbackRating;
+    /** 👎일 때 사용자가 고른 사유 코드(없으면 undefined). */
+    reason?: XbNovaFeedbackReason;
 };
 type XbNovaOnboarding = {
     conversation_id: string;
@@ -143,7 +147,7 @@ type UseXbNovaChatResult = {
     /** messageId → 현재 평가. 평가 안 한 메시지는 키가 없다. */
     feedback: Record<string, XbNovaFeedbackRating>;
     /** 낙관적으로 반영하고 서버에 저장한다. 실패하면 되돌린다. */
-    setFeedback: (messageId: string, rating: XbNovaFeedbackRating) => Promise<void>;
+    setFeedback: (messageId: string, rating: XbNovaFeedbackRating, reason?: XbNovaFeedbackReason) => Promise<void>;
 };
 /** `botId`를 넘기면 Provider의 기본 봇 대신 그 봇으로 새 대화를 연다 — 넛지 handoff가 쓴다.
  * `nudgeNodeId`를 넘기면 이 대화가 그 넛지에서 시작됐다고 서버에 표시한다 — 넛지 전환
@@ -270,4 +274,4 @@ declare function useXbNovaSettings(): {
     showBar: () => void;
 };
 
-export { type ChatMessage, type FactValue, type MessagePart, type ProductItem, type TextPart, type ToolPart, type UseXbNovaChatResult, type VerdictAction, type VerdictOutput, type ViewKind, type ViewRenderer, type ViewRendererMap, XbNovaChat, type XbNovaClientAction, type XbNovaClientActionResult, type XbNovaClientActions, XbNovaFact, XbNovaFacts, type XbNovaFeedbackEvent, type XbNovaFeedbackRating, type XbNovaOnboarding, XbNovaProvider, type XbNovaTheme, XbNovaTrack, trackXbNovaEvent, useXbNovaChat, useXbNovaFact, useXbNovaFacts, useXbNovaSettings, useXbNovaTrack, useXbNovaVisitor };
+export { type ChatMessage, type FactValue, type MessagePart, type ProductItem, type TextPart, type ToolPart, type UseXbNovaChatResult, type VerdictAction, type VerdictOutput, type ViewKind, type ViewRenderer, type ViewRendererMap, XbNovaChat, type XbNovaClientAction, type XbNovaClientActionResult, type XbNovaClientActions, XbNovaFact, XbNovaFacts, type XbNovaFeedbackEvent, type XbNovaFeedbackRating, type XbNovaFeedbackReason, type XbNovaOnboarding, XbNovaProvider, type XbNovaTheme, XbNovaTrack, trackXbNovaEvent, useXbNovaChat, useXbNovaFact, useXbNovaFacts, useXbNovaSettings, useXbNovaTrack, useXbNovaVisitor };

package/dist/index.d.ts

@@ -116,11 +116,15 @@ type ClientResults = Record<string, {
     output: unknown;
 }>;
 type XbNovaFeedbackRating = "up" | "down" | null;
+/** 👎 사유 칩의 코드. */
+type XbNovaFeedbackReason = "inaccurate" | "irrelevant" | "too_long" | "unclear";
 /** 답변 만족도 저장 성공 후 호스트로 전달되는 이벤트. `rating: null`은 평가 취소. */
 type XbNovaFeedbackEvent = {
     conversationId: string;
     messageId: string;
     rating: XbNovaFeedbackRating;
+    /** 👎일 때 사용자가 고른 사유 코드(없으면 undefined). */
+    reason?: XbNovaFeedbackReason;
 };
 type XbNovaOnboarding = {
     conversation_id: string;
@@ -143,7 +147,7 @@ type UseXbNovaChatResult = {
     /** messageId → 현재 평가. 평가 안 한 메시지는 키가 없다. */
     feedback: Record<string, XbNovaFeedbackRating>;
     /** 낙관적으로 반영하고 서버에 저장한다. 실패하면 되돌린다. */
-    setFeedback: (messageId: string, rating: XbNovaFeedbackRating) => Promise<void>;
+    setFeedback: (messageId: string, rating: XbNovaFeedbackRating, reason?: XbNovaFeedbackReason) => Promise<void>;
 };
 /** `botId`를 넘기면 Provider의 기본 봇 대신 그 봇으로 새 대화를 연다 — 넛지 handoff가 쓴다.
  * `nudgeNodeId`를 넘기면 이 대화가 그 넛지에서 시작됐다고 서버에 표시한다 — 넛지 전환
@@ -270,4 +274,4 @@ declare function useXbNovaSettings(): {
     showBar: () => void;
 };
 
-export { type ChatMessage, type FactValue, type MessagePart, type ProductItem, type TextPart, type ToolPart, type UseXbNovaChatResult, type VerdictAction, type VerdictOutput, type ViewKind, type ViewRenderer, type ViewRendererMap, XbNovaChat, type XbNovaClientAction, type XbNovaClientActionResult, type XbNovaClientActions, XbNovaFact, XbNovaFacts, type XbNovaFeedbackEvent, type XbNovaFeedbackRating, type XbNovaOnboarding, XbNovaProvider, type XbNovaTheme, XbNovaTrack, trackXbNovaEvent, useXbNovaChat, useXbNovaFact, useXbNovaFacts, useXbNovaSettings, useXbNovaTrack, useXbNovaVisitor };
+export { type ChatMessage, type FactValue, type MessagePart, type ProductItem, type TextPart, type ToolPart, type UseXbNovaChatResult, type VerdictAction, type VerdictOutput, type ViewKind, type ViewRenderer, type ViewRendererMap, XbNovaChat, type XbNovaClientAction, type XbNovaClientActionResult, type XbNovaClientActions, XbNovaFact, XbNovaFacts, type XbNovaFeedbackEvent, type XbNovaFeedbackRating, type XbNovaFeedbackReason, type XbNovaOnboarding, XbNovaProvider, type XbNovaTheme, XbNovaTrack, trackXbNovaEvent, useXbNovaChat, useXbNovaFact, useXbNovaFacts, useXbNovaSettings, useXbNovaTrack, useXbNovaVisitor };

package/dist/index.js

@@ -1128,7 +1128,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;
@@ -1145,11 +1145,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);
@@ -1776,38 +1776,41 @@ function XbNovaChat({
           /* @__PURE__ */ jsxs3("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [
             showDisclosure ? /* @__PURE__ */ jsx7("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__ */ jsx7(Bubble, { role: "assistant", children: /* @__PURE__ */ jsx7(AssistantMarkdown, { text: firstBubble }) }) : null,
-            messages.map((message, i) => /* @__PURE__ */ jsx7("div", { children: message.role === "user" ? /* @__PURE__ */ jsx7(Bubble, { role: "user", children: message.parts.map((p) => p.kind === "text" ? p.text : "").join("") }) : /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
-              message.parts.map((part, j) => {
-                if (part.kind === "text") {
-                  return /* @__PURE__ */ jsx7(Bubble, { role: "assistant", children: /* @__PURE__ */ jsx7(AssistantMarkdown, { text: part.text }) }, j);
-                }
-                if (clientActionHandlers.has(part.toolName)) {
-                  const result = clientResults[part.toolCallId];
-                  if (result) {
-                    return /* @__PURE__ */ jsx7(
-                      ToolView,
-                      {
-                        part: { ...part, state: "output", view: result.view, output: result.output },
-                        viewRenderers,
-                        onVerdictAction
-                      },
-                      j
-                    );
-                  }
-                  const spec = clientActionHandlers.get(part.toolName);
-                  return spec?.render ? /* @__PURE__ */ jsx7("div", { children: spec.render(part.input) }, j) : null;
-                }
-                return /* @__PURE__ */ jsx7(ToolView, { part, viewRenderers, onVerdictAction }, j);
-              }),
-              !hasVisiblePart(message.parts, clientActionHandlers, clientResults) && busy ? /* @__PURE__ */ jsx7(Bubble, { role: "assistant", children: /* @__PURE__ */ jsx7("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__ */ jsx7(
-                FeedbackButtons,
-                {
-                  rating: feedback[message.id] ?? null,
-                  onChange: (r) => void setFeedback(message.id, r)
-                }
-              ) : null
-            ] }) }, i)),
+            messages.map((message, i) => /* @__PURE__ */ jsx7("div", { children: message.role === "user" ? /* @__PURE__ */ jsx7(Bubble, { role: "user", children: message.parts.map((p) => p.kind === "text" ? p.text : "").join("") }) : /* @__PURE__ */ jsxs3(
+              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__ */ jsx7(Bubble, { role: "assistant", children: /* @__PURE__ */ jsx7(AssistantMarkdown, { text: part.text }) }, j);
+                    }
+                    if (clientActionHandlers.has(part.toolName)) {
+                      const result = clientResults[part.toolCallId];
+                      if (result) {
+                        return /* @__PURE__ */ jsx7(
+                          ToolView,
+                          {
+                            part: { ...part, state: "output", view: result.view, output: result.output },
+                            viewRenderers,
+                            onVerdictAction
+                          },
+                          j
+                        );
+                      }
+                      const spec = clientActionHandlers.get(part.toolName);
+                      return spec?.render ? /* @__PURE__ */ jsx7("div", { children: spec.render(part.input) }, j) : null;
+                    }
+                    return /* @__PURE__ */ jsx7(ToolView, { part, viewRenderers, onVerdictAction }, j);
+                  }),
+                  !hasVisiblePart(message.parts, clientActionHandlers, clientResults) && busy ? /* @__PURE__ */ jsx7(Bubble, { role: "assistant", children: /* @__PURE__ */ jsx7("span", { className: "text-neutral-400", children: "\uC0DD\uAC01\uD558\uB294 \uC911\u2026" }) }) : null
+                ]
+              }
+            ) }, i)),
             error ? /* @__PURE__ */ jsx7("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__ */ jsx7("div", { ref: bottomRef })
           ] }),
@@ -1910,44 +1913,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__ */ jsx7(
+    "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__ */ jsx7("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__ */ jsx7(
-      "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__ */ jsx7(
-          "svg",
+  const rootRef = useRef8(null);
+  const timerRef = useRef8(null);
+  const [menuOpen, setMenuOpen] = useState4(false);
+  const [reasonOpen, setReasonOpen] = useState4(false);
+  const [copied, setCopied] = useState4(false);
+  const [entered, setEntered] = useState4(false);
+  const clearTimer = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+  };
+  useEffect8(() => clearTimer, []);
+  useEffect8(() => {
+    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__ */ jsxs3(
+    "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__ */ jsx7("span", { children: label }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs3(
+    "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__ */ jsx7(
+          "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__ */ jsx7("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__ */ jsxs3(
+              "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__ */ jsx7(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__ */ jsx7(ActionIcon, { path: THUMB_UP_PATH, filled: rating === "up" })
+                  ),
+                  btn(
+                    "\uBCC4\uB85C\uC608\uC694",
+                    () => handleRate("down"),
+                    rating === "down",
+                    rating === "down" ? "#dc2626" : void 0,
+                    /* @__PURE__ */ jsx7(ActionIcon, { path: THUMB_DOWN_PATH, filled: rating === "down" })
+                  )
+                ]
+              }
+            )
           }
-        )
-      }
-    );
-  };
-  return /* @__PURE__ */ jsxs3("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__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-1.5 pl-1 pt-0.5", children: [
+          /* @__PURE__ */ jsx7("span", { className: "text-[11px] text-neutral-400", children: "\uC5B4\uB5A4 \uC810\uC774 \uC544\uC26C\uC6E0\uB098\uC694?" }),
+          FEEDBACK_REASONS.map((r) => /* @__PURE__ */ jsx7(
+            "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";
@@ -1962,6 +2114,14 @@ function Bubble({ role, children }) {
 function AssistantMarkdown({ text }) {
   return /* @__PURE__ */ jsx7("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__ */ jsx7(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkBreaks], children: text }) });
 }
+function AnswerActionsFrame({
+  enabled,
+  children,
+  ...rest
+}) {
+  if (!enabled) return /* @__PURE__ */ jsx7("div", { className: "space-y-1", children });
+  return /* @__PURE__ */ jsx7(AnswerActions, { ...rest, children });
+}
 
 // src/facts.ts
 import { useEffect as useEffect9, useRef as useRef9 } from "react";