wealth-alpha-chat-widget 1.0.9 → 2.0.0

package/dist/index.cjs

@@ -894,40 +894,48 @@ var CARD_DISCLAIMER = "AI-assisted, educational only. Not financial advice. Cons
 var SECTOR_TOGGLE_PREFIX = "__portfolio_sector_toggle:::";
 var SECTORS_DONE_ID = "__portfolio_sectors_done";
 var escapeHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-function collectSelectedSectors(root) {
-  return Array.from(
-    root.querySelectorAll(`.srow[data-chip^="${SECTOR_TOGGLE_PREFIX}"]`)
-  ).filter((row) => row.classList.contains("selected")).map((row) => (row.getAttribute("data-chip") ?? "").slice(SECTOR_TOGGLE_PREFIX.length)).filter(Boolean);
-}
+var sectorNameOf = (row) => (row.getAttribute("data-chip") ?? "").slice(SECTOR_TOGGLE_PREFIX.length);
 function MessageBubble({ message, onChipClick, onFeedback }) {
   const isBot = message.role === "bot";
   const [rating, setRating] = react.useState(null);
   const markdownRef = react.useRef(null);
   const isSectorCard = isBot && message.content.includes(SECTOR_TOGGLE_PREFIX);
+  const [selectedSectors, setSelectedSectors] = react.useState(() => /* @__PURE__ */ new Set());
   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 refreshSectorSummary = () => {
+  const applySelectionToDom = react.useCallback(() => {
     const root = markdownRef.current;
     if (!root) return;
-    const names = collectSelectedSectors(root);
+    root.querySelectorAll(`.srow[data-chip^="${SECTOR_TOGGLE_PREFIX}"]`).forEach((row) => row.classList.toggle("selected", selectedSectors.has(sectorNameOf(row))));
     const summary = root.querySelector(".wa-sel-summary");
     if (summary) {
+      const names = Array.from(selectedSectors);
       const list = names.length ? names.map(escapeHtml).join(", ") : "\u2014";
       summary.innerHTML = `<span class="chk">\u2705</span>Selected (<b>${names.length}</b>): <b>${list}</b>`;
     }
-  };
+  }, [selectedSectors]);
+  react.useLayoutEffect(() => {
+    if (isSectorCard) applySelectionToDom();
+  }, [isSectorCard, applySelectionToDom, message.content]);
   const handleMarkdownClick = (e) => {
     const toggleRow = e.target.closest(
       `.srow[data-chip^="${SECTOR_TOGGLE_PREFIX}"]`
     );
     if (toggleRow) {
       e.preventDefault();
-      toggleRow.classList.toggle("selected");
-      refreshSectorSummary();
+      const name = sectorNameOf(toggleRow);
+      if (name) {
+        setSelectedSectors((prev) => {
+          const next = new Set(prev);
+          if (next.has(name)) next.delete(name);
+          else next.add(name);
+          return next;
+        });
+      }
       return;
     }
     const anchor = e.target.closest("a");
@@ -937,7 +945,7 @@ function MessageBubble({ message, onChipClick, onFeedback }) {
   };
   const handleChipClick = (chip) => {
     if (isSectorCard && chip.id === SECTORS_DONE_ID) {
-      const names = markdownRef.current ? collectSelectedSectors(markdownRef.current) : [];
+      const names = Array.from(selectedSectors);
       const id = names.length ? `${SECTORS_DONE_ID}:::${names.join(",")}` : SECTORS_DONE_ID;
       onChipClick({ ...chip, id });
       return;