wealth-alpha-chat-widget 1.0.3 → 1.0.5

package/dist/index.mjs

@@ -677,6 +677,9 @@ function useSession(opts = {}) {
 // src/styles/chat.module.css
 var chat_default = {
   root: "chat_root",
+  headerTitle: "chat_headerTitle",
+  menuItemTitle: "chat_menuItemTitle",
+  markdown: "chat_markdown",
   floatingButton: "chat_floatingButton",
   positionRight: "chat_positionRight",
   positionLeft: "chat_positionLeft",
@@ -684,15 +687,14 @@ var chat_default = {
   popupBubbleLeft: "chat_popupBubbleLeft",
   popupBubbleRight: "chat_popupBubbleRight",
   header: "chat_header",
-  headerTitle: "chat_headerTitle",
   headerMeta: "chat_headerMeta",
   headerActions: "chat_headerActions",
   iconButton: "chat_iconButton",
   body: "chat_body",
   bubble: "chat_bubble",
-  markdown: "chat_markdown",
   bubbleBot: "chat_bubbleBot",
   bubbleUser: "chat_bubbleUser",
+  bubbleCard: "chat_bubbleCard",
   bubbleMeta: "chat_bubbleMeta",
   chipRow: "chat_chipRow",
   chip: "chat_chip",
@@ -720,7 +722,7 @@ var chat_default = {
   menuGrid: "chat_menuGrid",
   menuItem: "chat_menuItem",
   menuItemIcon: "chat_menuItemIcon",
-  menuItemTitle: "chat_menuItemTitle",
+  menuItemSvg: "chat_menuItemSvg",
   menuItemSub: "chat_menuItemSub",
   menuIconGreen: "chat_menuIconGreen",
   menuIconBlue: "chat_menuIconBlue",
@@ -729,7 +731,8 @@ var chat_default = {
   menuIconOrange: "chat_menuIconOrange",
   menuIconGold: "chat_menuIconGold",
   menuIconTeal: "chat_menuIconTeal",
-  menuIconPurple: "chat_menuIconPurple"
+  menuIconPurple: "chat_menuIconPurple",
+  chat_bubbleBot: "chat_chat_bubbleBot"
 };
 function AuthGate({ brandName, loginUrl, onLoginClick }) {
   const handleClick = () => {
@@ -815,15 +818,21 @@ var SANITIZE_CFG = {
 function inlineMarkdownToHtml(text) {
   return text.replace(/^[ \t]*#{1,6}[ \t]+(.+?)[ \t]*$/gm, "<b>$1</b>").replace(/\*\*([^\n<>]+?)\*\*/g, "<b>$1</b>").replace(/__([^\n<>]+?)__/g, "<b>$1</b>").replace(/(?<!\*)\*([^\n*<>]+?)\*(?!\*)/g, "<b>$1</b>").replace(/(?<![_a-zA-Z0-9])_([^\n_<>]+?)_(?![_a-zA-Z0-9])/g, "<i>$1</i>");
 }
+function stripCardDateTime(html) {
+  return html.replace(
+    /(<span class="wa-card-date">)([^<]*)(<\/span>)/g,
+    (_m, open, content, close) => open + content.replace(/,\s*\d{1,2}:\d{2}.*$/, "").trim() + close
+  );
+}
 function renderMarkdown(text) {
   if (!text) return "";
   const inlined = inlineMarkdownToHtml(text);
   if (/<div[\s>]/i.test(inlined)) {
-    return DOMPurify.sanitize(inlined, SANITIZE_CFG);
+    return DOMPurify.sanitize(stripCardDateTime(inlined), SANITIZE_CFG);
   }
   const paragraphs = inlined.split(/\n{2,}/).map((para) => para.replace(/\n/g, "<br>")).filter((p) => p.length > 0);
   const html = paragraphs.length > 1 ? paragraphs.map((p) => `<p>${p}</p>`).join("") : paragraphs[0] ?? "";
-  return DOMPurify.sanitize(html, SANITIZE_CFG);
+  return DOMPurify.sanitize(stripCardDateTime(html), SANITIZE_CFG);
 }
 var ROOT_MENU_CHIP_IDS = /* @__PURE__ */ new Set([
   "stock_analysis",
@@ -855,12 +864,23 @@ var MENU_ICON_KEY = {
   tradable_picks: "menuIconTeal",
   peer_compare: "menuIconPurple"
 };
+var MENU_ICON_SVG = {
+  stock_analysis: ' <path d="M4 16L9 11L13 15L20 8" /> <path d="M20 8V13" /> <path d="M20 8H15" />',
+  stock_discovery: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
+  new_listings: '<rect x="5" y="5" width="14" height="14" rx="3"/><path d="M12 8v8"/> <path d="M8 12h8"/>',
+  portfolio_risk: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/>',
+  market_forecast: '<path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/>',
+  crypto: '<path d="M4 20V10M10 20V4M16 20v-7M22 20v-4"/>',
+  tradable_picks: '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5"/>',
+  peer_compare: '<path d="M12 3v18"/><path d="M5 8l-3 6h6z"/><path d="M19 8l-3 6h6z"/>'
+};
 function isRootMenuChips(chips) {
-  return chips.some((c) => ROOT_MENU_CHIP_IDS.has(c.id));
+  return chips.length > 0 && chips.every((c) => ROOT_MENU_CHIP_IDS.has(c.id));
 }
 function MessageBubble({ message, onChipClick }) {
   const isBot = message.role === "bot";
-  const bubbleClass = isBot ? `${chat_default.bubble} ${chat_default.bubbleBot}` : `${chat_default.bubble} ${chat_default.bubbleUser}`;
+  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 anchor = e.target.closest("a");
     if (!anchor?.href) return;
@@ -881,6 +901,7 @@ function MessageBubble({ message, onChipClick }) {
     showMenuGrid ? /* @__PURE__ */ jsx("div", { className: chat_default.menuGrid, children: chips.map((chip) => {
       const iconKey = MENU_ICON_KEY[chip.id];
       const iconClass = iconKey && chat_default[iconKey] || "";
+      const svgIcon = MENU_ICON_SVG[chip.id];
       return /* @__PURE__ */ jsxs(
         "button",
         {
@@ -888,7 +909,15 @@ function MessageBubble({ message, onChipClick }) {
           className: chat_default.menuItem,
           onClick: () => onChipClick(chip),
           children: [
-            /* @__PURE__ */ jsx("div", { className: `${chat_default.menuItemIcon} ${iconClass}`, children: chip.icon }),
+            /* @__PURE__ */ jsx("div", { className: `${chat_default.menuItemIcon} ${iconClass}`, children: svgIcon ? /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: chat_default.menuItemSvg,
+                viewBox: "0 0 24 24",
+                "aria-hidden": "true",
+                dangerouslySetInnerHTML: { __html: svgIcon }
+              }
+            ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: chip.icon }) }),
             /* @__PURE__ */ jsx("div", { className: chat_default.menuItemTitle, children: chip.label }),
             /* @__PURE__ */ jsx("div", { className: chat_default.menuItemSub, children: MENU_SUBTITLES[chip.id] ?? "" })
           ]
@@ -947,18 +976,6 @@ function ChatBody({
     /* @__PURE__ */ jsx("div", { ref: endRef })
   ] });
 }
-
-// src/utils/time.ts
-function formatCountdown(remainingMs) {
-  if (remainingMs <= 0) return "expired";
-  const totalSeconds = Math.floor(remainingMs / 1e3);
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor(totalSeconds % 3600 / 60);
-  const seconds = totalSeconds % 60;
-  if (hours > 0) return `${hours}h ${minutes}m left`;
-  if (minutes > 0) return `${minutes}m ${seconds}s left`;
-  return `${seconds}s left`;
-}
 function ChatHeader({
   brandName,
   remainingMs,
@@ -967,13 +984,7 @@ function ChatHeader({
   onClear
 }) {
   return /* @__PURE__ */ jsxs("div", { className: chat_default.header, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { className: chat_default.headerTitle, children: brandName }),
-      showCountdown && remainingMs > 0 ? /* @__PURE__ */ jsxs("div", { className: chat_default.headerMeta, children: [
-        "Session: ",
-        formatCountdown(remainingMs)
-      ] }) : null
-    ] }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: chat_default.headerTitle, children: brandName }) }),
     /* @__PURE__ */ jsxs("div", { className: chat_default.headerActions, children: [
       onClear ? /* @__PURE__ */ jsx(
         "button",
@@ -1130,6 +1141,16 @@ function WealthChat(props) {
   useEffect(() => {
     setMounted(true);
   }, []);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const id = "wac-google-fonts";
+    if (document.getElementById(id)) return;
+    const link = document.createElement("link");
+    link.id = id;
+    link.rel = "stylesheet";
+    link.href = "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap";
+    document.head.appendChild(link);
+  }, []);
   useEffect(() => {
     if (!mounted || open || popupShownRef.current) return;
     const timer = setTimeout(() => {