wealth-alpha-chat-widget 1.0.1 → 1.0.3

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { useState, useRef, useEffect, useCallback, useReducer, useMemo } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import DOMPurify from 'isomorphic-dompurify';
 
 // src/components/WealthChat.tsx
@@ -278,6 +278,50 @@ async function sendMessage(apiBase, message, sessionId, context, signal) {
     signal
   });
 }
+async function uploadPortfolioCsv(apiBase, file, sessionId, signal) {
+  const url = joinUrl(apiBase, "/upload-portfolio-csv");
+  const requestId = generateRequestId();
+  const session = readSession();
+  const form = new FormData();
+  form.append("sessionId", sessionId);
+  form.append("file", file, file.name);
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 6e4);
+  if (signal) {
+    if (signal.aborted) {
+      clearTimeout(timeoutId);
+      throw new DOMException("Aborted", "AbortError");
+    }
+    signal.addEventListener("abort", () => controller.abort(), { once: true });
+  }
+  try {
+    const headers = { "X-Request-Id": requestId };
+    if (session?.token) headers["Authorization"] = `Bearer ${session.token}`;
+    const res = await fetch(url, {
+      method: "POST",
+      headers,
+      body: form,
+      signal: controller.signal,
+      credentials: "same-origin"
+    });
+    if (res.status === 401 || res.status === 403) {
+      clearSession();
+      throw new AuthExpiredError(requestId);
+    }
+    if (!res.ok) {
+      let detail = res.statusText;
+      try {
+        const errBody = await res.json();
+        detail = errBody.message ?? errBody.detail ?? detail;
+      } catch {
+      }
+      throw new ApiError(detail || `HTTP ${res.status}`, res.status, requestId);
+    }
+    return await res.json();
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
 async function logout(apiBase, signal) {
   try {
     await request(apiBase, "/auth/logout", {
@@ -424,6 +468,37 @@ function useChat(opts) {
   const deactivatePriorChips = useCallback((keepId) => {
     dispatch({ type: "DEACTIVATE_CHIPS", payload: { exceptId: keepId } });
   }, []);
+  const uploadCsv = useCallback(
+    async (file) => {
+      if (!sessionId) return;
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      deactivatePriorChips();
+      appendUserMessage(`Uploaded ${file.name}`);
+      dispatch({ type: "SET_TYPING", payload: true });
+      dispatch({ type: "SET_STATUS", payload: "sending" });
+      dispatch({ type: "SET_ERROR", payload: null });
+      try {
+        const resp = await uploadPortfolioCsv(apiBase, file, sessionId, controller.signal);
+        appendBotResponse(resp);
+        dispatch({ type: "SET_STATUS", payload: "idle" });
+      } catch (err) {
+        const error = err;
+        if (error.name === "AbortError") return;
+        if (error instanceof AuthExpiredError) {
+          onAuthExpiredRef.current?.();
+        } else {
+          onErrorRef.current?.(error);
+          dispatch({ type: "SET_ERROR", payload: error.message });
+        }
+        dispatch({ type: "SET_STATUS", payload: "error" });
+      } finally {
+        dispatch({ type: "SET_TYPING", payload: false });
+      }
+    },
+    [apiBase, sessionId, appendUserMessage, appendBotResponse, deactivatePriorChips]
+  );
   const sendText = useCallback(
     async (text) => {
       const trimmed = text.trim();
@@ -470,6 +545,7 @@ function useChat(opts) {
   return {
     state,
     sendText,
+    uploadCsv,
     appendBotResponse,
     appendUserMessage,
     deactivatePriorChips,
@@ -605,6 +681,8 @@ var chat_default = {
   positionRight: "chat_positionRight",
   positionLeft: "chat_positionLeft",
   widget: "chat_widget",
+  popupBubbleLeft: "chat_popupBubbleLeft",
+  popupBubbleRight: "chat_popupBubbleRight",
   header: "chat_header",
   headerTitle: "chat_headerTitle",
   headerMeta: "chat_headerMeta",
@@ -615,15 +693,19 @@ var chat_default = {
   markdown: "chat_markdown",
   bubbleBot: "chat_bubbleBot",
   bubbleUser: "chat_bubbleUser",
+  bubbleMeta: "chat_bubbleMeta",
   chipRow: "chat_chipRow",
   chip: "chat_chip",
   chipActive: "chat_chipActive",
   chipDisabled: "chat_chipDisabled",
   typing: "chat_typing",
   typingDot: "chat_typingDot",
+  wacBlink: "chat_wacBlink",
   input: "chat_input",
   inputBox: "chat_inputBox",
   sendButton: "chat_sendButton",
+  hiddenFileInput: "chat_hiddenFileInput",
+  csvButton: "chat_csvButton",
   authGate: "chat_authGate",
   authGateIcon: "chat_authGateIcon",
   authGateTitle: "chat_authGateTitle",
@@ -631,7 +713,23 @@ var chat_default = {
   authGateButton: "chat_authGateButton",
   authGateDisclaimer: "chat_authGateDisclaimer",
   authGateDisclaimerTitle: "chat_authGateDisclaimerTitle",
-  errorBanner: "chat_errorBanner"
+  errorBanner: "chat_errorBanner",
+  popupBubble: "chat_popupBubble",
+  wacPopIn: "chat_wacPopIn",
+  popupDismiss: "chat_popupDismiss",
+  menuGrid: "chat_menuGrid",
+  menuItem: "chat_menuItem",
+  menuItemIcon: "chat_menuItemIcon",
+  menuItemTitle: "chat_menuItemTitle",
+  menuItemSub: "chat_menuItemSub",
+  menuIconGreen: "chat_menuIconGreen",
+  menuIconBlue: "chat_menuIconBlue",
+  menuIconLeaf: "chat_menuIconLeaf",
+  menuIconRed: "chat_menuIconRed",
+  menuIconOrange: "chat_menuIconOrange",
+  menuIconGold: "chat_menuIconGold",
+  menuIconTeal: "chat_menuIconTeal",
+  menuIconPurple: "chat_menuIconPurple"
 };
 function AuthGate({ brandName, loginUrl, onLoginClick }) {
   const handleClick = () => {
@@ -703,9 +801,10 @@ var ALLOWED_TAGS = [
   "ol",
   "li",
   "blockquote",
-  "span"
+  "span",
+  "div"
 ];
-var ALLOWED_ATTR = ["href", "target", "rel", "class"];
+var ALLOWED_ATTR = ["href", "target", "rel", "class", "style", "data-wa-gauge-pct"];
 var SANITIZE_CFG = {
   ALLOWED_TAGS,
   ALLOWED_ATTR,
@@ -719,25 +818,87 @@ function inlineMarkdownToHtml(text) {
 function renderMarkdown(text) {
   if (!text) return "";
   const inlined = inlineMarkdownToHtml(text);
+  if (/<div[\s>]/i.test(inlined)) {
+    return DOMPurify.sanitize(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);
 }
+var ROOT_MENU_CHIP_IDS = /* @__PURE__ */ new Set([
+  "stock_analysis",
+  "stock_discovery",
+  "new_listings",
+  "portfolio_risk",
+  "market_forecast",
+  "crypto",
+  "tradable_picks",
+  "peer_compare"
+]);
+var MENU_SUBTITLES = {
+  stock_analysis: "Fundamental & technical",
+  stock_discovery: "Find promising stocks",
+  new_listings: "Track IPOs & new stocks",
+  portfolio_risk: "Analyze your portfolio",
+  market_forecast: "Outlook & key events",
+  crypto: "BTC, ETH & trends",
+  tradable_picks: "Short-term setups",
+  peer_compare: "Compare peer stocks"
+};
+var MENU_ICON_KEY = {
+  stock_analysis: "menuIconGreen",
+  stock_discovery: "menuIconBlue",
+  new_listings: "menuIconLeaf",
+  portfolio_risk: "menuIconRed",
+  market_forecast: "menuIconOrange",
+  crypto: "menuIconGold",
+  tradable_picks: "menuIconTeal",
+  peer_compare: "menuIconPurple"
+};
+function isRootMenuChips(chips) {
+  return chips.some((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 handleMarkdownClick = (e) => {
+    const anchor = e.target.closest("a");
+    if (!anchor?.href) return;
+    e.preventDefault();
+    window.location.assign(anchor.href);
+  };
+  const chips = message.chips ?? [];
+  const showMenuGrid = isBot && message.chipsActive && isRootMenuChips(chips);
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ jsx("div", { className: bubbleClass, children: isBot ? /* @__PURE__ */ jsx(
       "div",
       {
         className: chat_default.markdown,
-        dangerouslySetInnerHTML: { __html: renderMarkdown(message.content) }
+        dangerouslySetInnerHTML: { __html: renderMarkdown(message.content) },
+        onClick: handleMarkdownClick
       }
     ) : message.content }),
-    isBot && message.chips && message.chips.length > 0 ? /* @__PURE__ */ jsx(
+    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] || "";
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          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.menuItemTitle, children: chip.label }),
+            /* @__PURE__ */ jsx("div", { className: chat_default.menuItemSub, children: MENU_SUBTITLES[chip.id] ?? "" })
+          ]
+        },
+        chip.id
+      );
+    }) }) : isBot && chips.length > 0 ? /* @__PURE__ */ jsx(
       ChipRow,
       {
-        chips: message.chips,
+        chips,
         disabled: !message.chipsActive,
         onClick: onChipClick
       }
@@ -841,16 +1002,24 @@ function ChatHeader({
 }
 function ChatInput({ disabled, placeholder, onSend }) {
   const [value, setValue] = useState("");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (!disabled) {
+      inputRef.current?.focus();
+    }
+  }, [disabled]);
   const submit = () => {
     const trimmed = value.trim();
     if (!trimmed || disabled) return;
     onSend(trimmed);
     setValue("");
+    inputRef.current?.focus();
   };
   return /* @__PURE__ */ jsxs("div", { className: chat_default.input, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
+        ref: inputRef,
         type: "text",
         className: chat_default.inputBox,
         value,
@@ -878,31 +1047,62 @@ function ChatInput({ disabled, placeholder, onSend }) {
     )
   ] });
 }
-function FloatingButton({ position, onClick, brandColor }) {
+function FloatingButton({ position, onClick, brandColor, showPopup, popupMessage, onPopupDismiss }) {
   const posClass = position === "bottom-left" ? chat_default.positionLeft : chat_default.positionRight;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: `${chat_default.floatingButton} ${posClass}`,
-      onClick,
-      "aria-label": "Open chat",
-      style: brandColor ? { background: brandColor } : void 0,
-      children: "\u{1F4AC}"
-    }
-  );
+  const popupPosClass = position === "bottom-left" ? chat_default.popupBubbleLeft : chat_default.popupBubbleRight;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showPopup && popupMessage ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${chat_default.popupBubble} ${popupPosClass}`,
+        role: "status",
+        "aria-live": "polite",
+        children: [
+          popupMessage,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: chat_default.popupDismiss,
+              onClick: onPopupDismiss,
+              "aria-label": "Dismiss greeting",
+              children: "\u2715"
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `${chat_default.floatingButton} ${posClass}`,
+        onClick,
+        "aria-label": "Open chat",
+        style: brandColor ? { background: brandColor } : void 0,
+        children: "\u{1F4AC}"
+      }
+    )
+  ] });
 }
 var DEFAULT_BRAND_NAME = "Wealth Alpha AI";
 var DEFAULT_BRAND_COLOR = "#1a2d5a";
 var DEFAULT_AUTH_CHECK = "/me";
-var DISCLAIMER_BLOCK = "DISCLAIMER:\n\u2022 AI-assisted analysis for educational purposes only.\n\u2022 Not financial advice. Markets involve risk.\n\u2022 Consult a SEBI-registered advisor before investing.";
-var CTA_LINE = "Select a quick command below \u2014 or type your query to ask our AI Research Analyst directly.";
+var DEFAULT_GREETING = "Hi! I'm your Wealth Alpha AI assistant. How can I help you?";
+var CTA_LINE = "Select a quick command below";
+var PORTFOLIO_CSV_CHIP_ID = "__portfolio_csv_upload";
+var UPGRADE_PREMIUM_CHIP_ID = "__upgrade_premium__";
+function resolvePricingUrl(upgradeUrl) {
+  if (upgradeUrl) return upgradeUrl;
+  if (typeof window !== "undefined") {
+    return `${window.location.origin}/pricing`;
+  }
+  return "";
+}
 function buildWelcome(name, plan) {
   const greeting = name ? `Welcome back, ${name}! You have ${plan ? plan : "Premium"} access.` : `Welcome! You have ${plan ? plan : "Premium"} access.`;
   return `${greeting}
 
-${DISCLAIMER_BLOCK}
-
 ${CTA_LINE}`;
 }
 function WealthChat(props) {
@@ -917,6 +1117,7 @@ function WealthChat(props) {
     position = "bottom-right",
     defaultOpen = false,
     showCountdown = true,
+    greetingMessage = DEFAULT_GREETING,
     onLogin,
     onLogout,
     onSessionExpire,
@@ -924,9 +1125,19 @@ function WealthChat(props) {
   } = props;
   const [mounted, setMounted] = useState(false);
   const [open, setOpen] = useState(defaultOpen);
+  const [showPopup, setShowPopup] = useState(false);
+  const popupShownRef = useRef(defaultOpen);
   useEffect(() => {
     setMounted(true);
   }, []);
+  useEffect(() => {
+    if (!mounted || open || popupShownRef.current) return;
+    const timer = setTimeout(() => {
+      setShowPopup(true);
+      popupShownRef.current = true;
+    }, 1e3);
+    return () => clearTimeout(timer);
+  }, [mounted, open]);
   const {
     session,
     remainingMs,
@@ -954,9 +1165,11 @@ function WealthChat(props) {
     },
     [session, setHistory]
   );
+  const csvFileRef = useRef(null);
   const {
     state: chatState,
     sendText,
+    uploadCsv,
     appendBotResponse,
     appendUserMessage,
     deactivatePriorChips,
@@ -996,16 +1209,46 @@ function WealthChat(props) {
     async (chip) => {
       touch();
       deactivatePriorChips();
+      if (chip.id === PORTFOLIO_CSV_CHIP_ID) {
+        appendUserMessage(chip.label);
+        csvFileRef.current?.click();
+        return;
+      }
+      if (chip.id === UPGRADE_PREMIUM_CHIP_ID) {
+        appendUserMessage(chip.label);
+        const pricingUrl = resolvePricingUrl(user?.upgradeUrl);
+        if (pricingUrl && typeof window !== "undefined") {
+          window.location.assign(pricingUrl);
+        }
+        return;
+      }
       appendUserMessage(chip.label);
       setTyping(true);
       try {
         const resp = await callChip(chip);
-        if (resp) appendBotResponse(resp);
+        if (!resp) return;
+        const redirectUrl = resp.metadata?.redirectUrl;
+        if (typeof redirectUrl === "string" && redirectUrl && typeof window !== "undefined") {
+          window.location.assign(redirectUrl);
+          return;
+        }
+        appendBotResponse(resp);
       } finally {
         setTyping(false);
       }
     },
-    [touch, deactivatePriorChips, appendUserMessage, callChip, setTyping, appendBotResponse]
+    [touch, deactivatePriorChips, appendUserMessage, callChip, setTyping, appendBotResponse, user?.upgradeUrl]
+  );
+  const handleCsvFileSelected = useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      e.target.value = "";
+      if (file) {
+        touch();
+        void uploadCsv(file);
+      }
+    },
+    [touch, uploadCsv]
   );
   const handleSend = useCallback(
     (text) => {
@@ -1014,6 +1257,10 @@ function WealthChat(props) {
     },
     [touch, sendText]
   );
+  const handleFloatingButtonClick = useCallback(() => {
+    setOpen(true);
+    setShowPopup(false);
+  }, []);
   const handleClose = useCallback(() => setOpen(false), []);
   const handleClear = useCallback(() => {
     clearChat();
@@ -1030,7 +1277,17 @@ function WealthChat(props) {
     ["--wac-brand"]: brandColor
   };
   return /* @__PURE__ */ jsxs("div", { className: chat_default.root, style: rootStyle, children: [
-    !open ? /* @__PURE__ */ jsx(FloatingButton, { position, onClick: () => setOpen(true), brandColor }) : null,
+    !open ? /* @__PURE__ */ jsx(
+      FloatingButton,
+      {
+        position,
+        onClick: handleFloatingButtonClick,
+        brandColor,
+        showPopup,
+        popupMessage: greetingMessage,
+        onPopupDismiss: () => setShowPopup(false)
+      }
+    ) : null,
     open ? /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1060,6 +1317,18 @@ function WealthChat(props) {
               onLoginClick: handleLoginClick
             }
           ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: csvFileRef,
+              type: "file",
+              accept: ".csv,text/csv",
+              className: chat_default.hiddenFileInput,
+              onChange: handleCsvFileSelected,
+              "aria-hidden": true,
+              tabIndex: -1
+            }
+          ),
           isLoggedIn ? /* @__PURE__ */ jsx(
             ChatInput,
             {