wealth-alpha-chat-widget 1.0.4 → 1.0.6

package/dist/index.cjs

@@ -701,6 +701,13 @@ var chat_default = {
   bubbleBot: "chat_bubbleBot",
   bubbleUser: "chat_bubbleUser",
   bubbleCard: "chat_bubbleCard",
+  disclaimer: "chat_disclaimer",
+  feedbackRow: "chat_feedbackRow",
+  feedbackLabel: "chat_feedbackLabel",
+  feedbackBtn: "chat_feedbackBtn",
+  feedbackBtnUp: "chat_feedbackBtnUp",
+  feedbackBtnDown: "chat_feedbackBtnDown",
+  feedbackIcon: "chat_feedbackIcon",
   bubbleMeta: "chat_bubbleMeta",
   chipRow: "chat_chipRow",
   chip: "chat_chip",
@@ -813,7 +820,7 @@ var ALLOWED_TAGS = [
   "span",
   "div"
 ];
-var ALLOWED_ATTR = ["href", "target", "rel", "class", "style", "data-wa-gauge-pct"];
+var ALLOWED_ATTR = ["href", "target", "rel", "class", "style", "data-wa-gauge-pct", "data-chip"];
 var SANITIZE_CFG = {
   ALLOWED_TAGS,
   ALLOWED_ATTR,
@@ -883,11 +890,27 @@ var MENU_ICON_SVG = {
 function isRootMenuChips(chips) {
   return chips.length > 0 && chips.every((c) => ROOT_MENU_CHIP_IDS.has(c.id));
 }
-function MessageBubble({ message, onChipClick }) {
+var CARD_DISCLAIMER = "AI-assisted, educational only. Not financial advice. Consult a SEBI-registered advisor.";
+function MessageBubble({ message, onChipClick, onFeedback }) {
   const isBot = message.role === "bot";
+  const [rating, setRating] = react.useState(null);
+  const rate = (value) => {
+    setRating(value);
+    onFeedback?.(message.id, value);
+  };
   const isCard = isBot && message.content.includes("<div");
   const bubbleClass = isBot ? `${chat_default.bubble} ${isCard ? chat_default.bubbleCard : chat_default.bubbleBot}` : `${chat_default.bubble} ${chat_default.bubbleUser}`;
   const handleMarkdownClick = (e) => {
+    const row = e.target.closest(".srow[data-chip]");
+    if (row) {
+      e.preventDefault();
+      const chipId = row.getAttribute("data-chip");
+      if (chipId) {
+        const label = row.querySelector(".nm")?.textContent?.trim() ?? "";
+        onChipClick({ id: chipId, label });
+      }
+      return;
+    }
     const anchor = e.target.closest("a");
     if (!anchor?.href) return;
     e.preventDefault();
@@ -904,6 +927,42 @@ function MessageBubble({ message, onChipClick }) {
         onClick: handleMarkdownClick
       }
     ) : message.content }),
+    isCard ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chat_default.feedbackRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: chat_default.feedbackLabel, children: "Was this helpful?" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: `${chat_default.feedbackBtn} ${rating === "up" ? chat_default.feedbackBtnUp : ""}`,
+          "aria-label": "Helpful",
+          "aria-pressed": rating === "up",
+          onClick: () => rate("up"),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: chat_default.feedbackIcon, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10v12" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 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" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: `${chat_default.feedbackBtn} ${rating === "down" ? chat_default.feedbackBtnDown : ""}`,
+          "aria-label": "Not helpful",
+          "aria-pressed": rating === "down",
+          onClick: () => rate("down"),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: chat_default.feedbackIcon, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 14V2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 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" })
+          ] })
+        }
+      )
+    ] }) : null,
+    isCard ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chat_default.disclaimer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Disclaimer:" }),
+      " ",
+      CARD_DISCLAIMER
+    ] }) : null,
     showMenuGrid ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: chat_default.menuGrid, children: chips.map((chip) => {
       const iconKey = MENU_ICON_KEY[chip.id];
       const iconClass = iconKey && chat_default[iconKey] || "";
@@ -956,7 +1015,8 @@ function ChatBody({
   loginUrl,
   error,
   onChipClick,
-  onLoginClick
+  onLoginClick,
+  onFeedback
 }) {
   const endRef = react.useRef(null);
   react.useEffect(() => {
@@ -976,7 +1036,7 @@ function ChatBody({
     ) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chat_default.body, children: [
-    messages.map((m) => /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { message: m, onChipClick }, m.id)),
+    messages.map((m) => /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { message: m, onChipClick, onFeedback }, m.id)),
     isTyping ? /* @__PURE__ */ jsxRuntime.jsx(TypingIndicator, {}) : null,
     error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: chat_default.errorBanner, children: error }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: endRef })
@@ -1138,7 +1198,8 @@ function WealthChat(props) {
     onLogin,
     onLogout,
     onSessionExpire,
-    onError
+    onError,
+    onFeedback
   } = props;
   const [mounted, setMounted] = react.useState(false);
   const [open, setOpen] = react.useState(defaultOpen);
@@ -1341,7 +1402,8 @@ function WealthChat(props) {
               loginUrl,
               error: chatState.error,
               onChipClick: handleChipClick,
-              onLoginClick: handleLoginClick
+              onLoginClick: handleLoginClick,
+              onFeedback
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(