@eka-care/medassist-widget-embed 0.2.5 → 0.2.6

package/src/medassist-widget.js

@@ -26043,12 +26043,12 @@ var MedAssistWidget = (function(exports) {
     Component.displayName = toPascalCase(iconName);
     return Component;
   };
-  const __iconNode$j = [
+  const __iconNode$k = [
     ["path", { d: "M5 12h14", key: "1ays0h" }],
     ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
   ];
-  const ArrowRight = createLucideIcon("arrow-right", __iconNode$j);
-  const __iconNode$i = [
+  const ArrowRight = createLucideIcon("arrow-right", __iconNode$k);
+  const __iconNode$j = [
     ["path", { d: "M10 12h4", key: "a56b0p" }],
     ["path", { d: "M10 8h4", key: "1sr2af" }],
     ["path", { d: "M14 21v-3a2 2 0 0 0-4 0v3", key: "1rgiei" }],
@@ -26061,28 +26061,28 @@ var MedAssistWidget = (function(exports) {
     ],
     ["path", { d: "M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16", key: "16ra0t" }]
   ];
-  const Building2 = createLucideIcon("building-2", __iconNode$i);
-  const __iconNode$h = [
+  const Building2 = createLucideIcon("building-2", __iconNode$j);
+  const __iconNode$i = [
     ["path", { d: "M8 2v4", key: "1cmpym" }],
     ["path", { d: "M16 2v4", key: "4m81vk" }],
     ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
     ["path", { d: "M3 10h18", key: "8toen8" }]
   ];
-  const Calendar = createLucideIcon("calendar", __iconNode$h);
-  const __iconNode$g = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-  const Check = createLucideIcon("check", __iconNode$g);
-  const __iconNode$f = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-  const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
-  const __iconNode$e = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-  const ChevronLeft = createLucideIcon("chevron-left", __iconNode$e);
-  const __iconNode$d = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-  const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
-  const __iconNode$c = [
+  const Calendar = createLucideIcon("calendar", __iconNode$i);
+  const __iconNode$h = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+  const Check = createLucideIcon("check", __iconNode$h);
+  const __iconNode$g = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+  const ChevronDown = createLucideIcon("chevron-down", __iconNode$g);
+  const __iconNode$f = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+  const ChevronLeft = createLucideIcon("chevron-left", __iconNode$f);
+  const __iconNode$e = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+  const ChevronRight = createLucideIcon("chevron-right", __iconNode$e);
+  const __iconNode$d = [
     ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }],
     ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
   ];
-  const Clock = createLucideIcon("clock", __iconNode$c);
-  const __iconNode$b = [
+  const Clock = createLucideIcon("clock", __iconNode$d);
+  const __iconNode$c = [
     [
       "path",
       {
@@ -26095,8 +26095,8 @@ var MedAssistWidget = (function(exports) {
     ["path", { d: "M16 13H8", key: "t4e002" }],
     ["path", { d: "M16 17H8", key: "z1uh3a" }]
   ];
-  const FileText = createLucideIcon("file-text", __iconNode$b);
-  const __iconNode$a = [
+  const FileText = createLucideIcon("file-text", __iconNode$c);
+  const __iconNode$b = [
     ["path", { d: "m5 8 6 6", key: "1wu5hv" }],
     ["path", { d: "m4 14 6-6 2-3", key: "1k1g8d" }],
     ["path", { d: "M2 5h12", key: "or177f" }],
@@ -26104,15 +26104,15 @@ var MedAssistWidget = (function(exports) {
     ["path", { d: "m22 22-5-10-5 10", key: "don7ne" }],
     ["path", { d: "M14 18h6", key: "1m8k6r" }]
   ];
-  const Languages = createLucideIcon("languages", __iconNode$a);
-  const __iconNode$9 = [
+  const Languages = createLucideIcon("languages", __iconNode$b);
+  const __iconNode$a = [
     ["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", key: "1cjeqo" }],
     ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71", key: "19qd67" }]
   ];
-  const Link = createLucideIcon("link", __iconNode$9);
-  const __iconNode$8 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-  const LoaderCircle = createLucideIcon("loader-circle", __iconNode$8);
-  const __iconNode$7 = [
+  const Link = createLucideIcon("link", __iconNode$a);
+  const __iconNode$9 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+  const LoaderCircle = createLucideIcon("loader-circle", __iconNode$9);
+  const __iconNode$8 = [
     [
       "path",
       {
@@ -26122,7 +26122,19 @@ var MedAssistWidget = (function(exports) {
     ],
     ["circle", { cx: "12", cy: "10", r: "3", key: "ilqhr7" }]
   ];
-  const MapPin = createLucideIcon("map-pin", __iconNode$7);
+  const MapPin = createLucideIcon("map-pin", __iconNode$8);
+  const __iconNode$7 = [
+    [
+      "path",
+      {
+        d: "M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z",
+        key: "169xi5"
+      }
+    ],
+    ["path", { d: "M15 5.764v15", key: "1pn4in" }],
+    ["path", { d: "M9 3.236v15", key: "1uimfh" }]
+  ];
+  const Map$1 = createLucideIcon("map", __iconNode$7);
   const __iconNode$6 = [
     [
       "path",
@@ -27490,7 +27502,7 @@ var MedAssistWidget = (function(exports) {
       PILL: "pills",
       MULTI: "multi",
       DOCTOR_CARD: "doctor_card",
-      PHARMACY: "pharmacy"
+      CARD: "card"
     };
     var SYNAPSE_TOOL_CALLBACK_NAME;
     (function(SYNAPSE_TOOL_CALLBACK_NAME2) {
@@ -27613,7 +27625,7 @@ var MedAssistWidget = (function(exports) {
         try {
           const { profile, intent, user_location, referer, ...extraContext } = context || {};
           const sessionRequest = {
-            user_id: userId,
+            ...userId && { user_id: userId },
             ...profile && { user_context: profile },
             ...(intent || Object.keys(extraContext).length > 0) && {
               session_context: {
@@ -29160,7 +29172,7 @@ var MedAssistWidget = (function(exports) {
        * Create a new session
        */
       async createNewSession() {
-        return await this.resourceManager.createSession(this.config.userId || Date.now().toString(), this.config.context);
+        return await this.resourceManager.createSession(this.config.userId, this.config.context);
       }
       /**
        * Set up event handlers for connection and messages
@@ -30659,7 +30671,8 @@ var MedAssistWidget = (function(exports) {
                   isMobile,
                   placeholder: chatComposer.placeholder,
                   recordingStatus: chatComposer.recordingStatus,
-                  theme: mergedTheme
+                  theme: mergedTheme,
+                  allowed: chatComposer.allowed
                 }
               ) }),
               sessionId && environment === "development" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-6 flex justify-center items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-[8px] text-text-secondary font-mono opacity-50", children: [
@@ -30741,6 +30754,7 @@ var MedAssistWidget = (function(exports) {
       updateMessageInSession,
       setInitialMessage,
       userId,
+      setUserId,
       fileUploadPerSession,
       setFileUploadPerSession
     } = useMedAssistStore();
@@ -30967,6 +30981,9 @@ var MedAssistWidget = (function(exports) {
             session
           );
         }
+        if (session?.user_id) {
+          setUserId(session.user_id);
+        }
         setUpEventListeners();
       } catch (error) {
         console.error("useChat: Error starting session", error);
@@ -31551,8 +31568,6 @@ var MedAssistWidget = (function(exports) {
       setError,
       // initialMessage,
       sessionId,
-      setUserId,
-      userId,
       setContext
     } = useMedAssistStore();
     const {
@@ -31581,10 +31596,6 @@ var MedAssistWidget = (function(exports) {
         return;
       }
       setAgentId(agentId);
-      if (!userId) {
-        const uuid = crypto?.randomUUID?.() || Date.now().toString();
-        setUserId(uuid);
-      }
       if (config?.context && Object.keys(config?.context || {}).length) {
         setContext(config.context);
       }
@@ -31733,7 +31744,8 @@ var MedAssistWidget = (function(exports) {
           attachmentFiles,
           isDisabled: isComposerDisabled,
           placeholder: composerPlaceholder,
-          recordingStatus
+          recordingStatus,
+          allowed: config.allowed
         },
         children: !loading && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetContentFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex-1 flex flex-col min-h-0 overflow-hidden relative synapse-chat-window", config.theme?.backgroundImage ? "" : "bg-surface"), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -32000,11 +32012,14 @@ var MedAssistWidget = (function(exports) {
     placeholder,
     isMobile,
     recordingStatus,
-    theme
+    theme,
+    allowed
   }) {
     const fileInputRef = reactExports.useRef(null);
     const textareaRef = reactExports.useRef(null);
     const showSendButton = value.trim().length > 0 || hasAttachment;
+    const showMic = allowed === void 0 || allowed.includes("audio");
+    const showFileAttachment = allowed === void 0 || allowed.includes("file");
     const isMicDisabled = (isDisabled || recordingStatus !== AudioRecordingStatus.IDLE) && !isRecording;
     const micButtonClasses = cn(
       "rounded-full transition-all duration-200 ",
@@ -32080,7 +32095,7 @@ var MedAssistWidget = (function(exports) {
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
-        recordingStatus === AudioRecordingStatus.IDLE && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        showFileAttachment && recordingStatus === AudioRecordingStatus.IDLE && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
             type: "button",
@@ -32146,7 +32161,7 @@ var MedAssistWidget = (function(exports) {
                   "aria-label": "Stop recording",
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(Square, { className: "w-4 h-4" })
                 }
-              ) : !showSendButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ) : showMic && !showSendButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Button,
                 {
                   type: "button",
@@ -43028,128 +43043,178 @@ var MedAssistWidget = (function(exports) {
       ] })
     ] });
   }
-  function formatHours(open_days, open_time) {
-    const parts = [open_days, open_time].filter(Boolean);
-    return parts.join(" • ") || "";
-  }
-  function VoucherCard({
-    pharmacy,
-    variant = "default",
-    onGetVoucher,
-    className
+  const CARD_ICONS = {
+    voucher: Ticket,
+    pharmacy: Building2,
+    hospital: Building2,
+    map: Map$1,
+    location_pin: MapPin,
+    "location pin": MapPin,
+    check: Check,
+    calendar: Calendar
+  };
+  const ICON_CDN_BASE = "https://cdn.jsdelivr.net/npm/lucide-static@0.263.1/icons";
+  function CardIcon({
+    name: name2,
+    className,
+    size = 16
   }) {
-    const hasLink = Boolean(pharmacy.link?.trim());
-    const hoursText = formatHours(pharmacy.open_days, pharmacy.open_time);
-    const subtitleParts = [hoursText, pharmacy.distance_text].filter(Boolean);
-    const subtitle = subtitleParts.join(" • ");
-    const isCustom = variant === "custom";
+    const key = name2?.trim().toLowerCase().replace(/\s+/g, "_");
+    if (!key) return null;
+    const IconComponent = CARD_ICONS[key];
+    if (IconComponent) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(IconComponent, { className, size, "aria-hidden": true });
+    }
+    if (/^https?:\/\//i.test(name2) || name2.startsWith("//")) {
+      const src = name2.startsWith("//") ? `https:${name2}` : name2;
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "img",
+        {
+          src,
+          alt: "",
+          className,
+          width: size,
+          height: size,
+          "aria-hidden": true,
+          onError: (e) => {
+            e.target.style.display = "none";
+          }
+        }
+      );
+    }
+    const kebab2 = key.replace(/_/g, "-");
+    const cdnUrl = `${ICON_CDN_BASE}/${kebab2}.svg`;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Card,
+      "img",
       {
-        className: cn(
-          "overflow-hidden rounded-2xl shadow-sm",
-          isCustom ? "border-l-4 border-l-[var(--accent-400)] bg-[var(--base-900)] text-[var(--white-1000)] border-0" : "bg-card text-card-foreground border border-border-subtle",
-          className
-        ),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: cn("p-4", isCustom && "p-5"), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-2 mb-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "h3",
-              {
-                className: cn(
-                  "font-semibold leading-tight",
-                  isCustom ? "text-base text-white" : "text-foreground text-sm"
-                ),
-                children: pharmacy.name || "Pharmacy"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: cn(
-                  "shrink-0 rounded-lg p-1.5",
-                  isCustom ? "bg-[var(--accent-400)]/20 text-[var(--accent-300)]" : "bg-accent/10 text-[var(--color-primary)]"
-                ),
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Building2, { className: "h-4 w-4", "aria-hidden": true })
-              }
-            )
-          ] }),
-          subtitle ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "p",
-            {
-              className: cn(
-                "text-xs mb-3",
-                isCustom ? "text-[var(--white-600)]" : "text-muted-foreground"
-              ),
-              children: subtitle
-            }
-          ) : null,
-          pharmacy.offer ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: cn(
-                "inline-flex items-center rounded-full px-3 py-1 text-xs font-medium mb-4",
-                isCustom ? "bg-emerald-900/80 text-emerald-300" : "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300"
-              ),
-              children: pharmacy.offer
-            }
-          ) : null,
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                className: cn(
-                  "rounded-lg gap-1.5 font-medium",
-                  isCustom ? "bg-[var(--accent-400)] text-[var(--accent-1000)] hover:bg-[var(--accent-300)]" : "bg-primary text-primary-foreground hover:bg-primary/90"
-                ),
-                onClick: () => onGetVoucher?.(pharmacy),
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Ticket, { className: "h-4 w-4", "aria-hidden": true }),
-                  "Get voucher"
-                ]
-              }
-            ),
-            hasLink && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              Button,
-              {
-                type: "button",
-                variant: "outline",
-                size: "sm",
-                className: cn(
-                  "rounded-lg gap-1.5",
-                  isCustom ? "border-[var(--white-300)] text-[var(--white-900)] hover:bg-[var(--white-100)]" : "border-border bg-background text-foreground hover:bg-accent"
-                ),
-                onClick: () => pharmacy.link && window.open(pharmacy.link, "_blank", "noopener,noreferrer"),
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "h-4 w-4", "aria-hidden": true }),
-                  "View on maps"
-                ]
-              }
-            )
-          ] })
-        ] })
+        src: cdnUrl,
+        alt: "",
+        className,
+        width: size,
+        height: size,
+        "aria-hidden": true,
+        onError: (e) => {
+          e.target.style.display = "none";
+        }
       }
     );
   }
-  function VoucherCardList({
-    pharmacies,
-    variant = "default",
-    onGetVoucher,
+  const BANNER_THEME_CLASSES = {
+    success: "bg-emerald-100 text-emerald-800",
+    warning: "bg-amber-100 text-amber-800",
+    danger: "bg-red-100 text-red-800",
+    primary: "bg-primary/15 text-primary"
+  };
+  const CTA_VARIANT = {
+    primary: "default",
+    success: "default",
+    warning: "default",
+    danger: "destructive"
+  };
+  function GenericCard({
+    card,
+    onSendMessage,
+    disabled = false
+  }) {
+    const {
+      title,
+      tags,
+      icon,
+      description,
+      banner,
+      items,
+      ctas
+    } = card;
+    const handleCtaClick = (cta) => {
+      if (disabled) return;
+      if (cta.link) {
+        window.open(cta.link, "_blank", "noopener,noreferrer");
+      }
+      const action = cta.action?.trim();
+      if (action) {
+        onSendMessage?.(action);
+      }
+    };
+    const bannerTheme = banner?.theme ?? "success";
+    const bannerClass = BANNER_THEME_CLASSES[bannerTheme];
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-sm", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 pb-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [
+          title ? /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-base font-bold leading-tight tracking-tight", children: title }) : null,
+          tags?.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: tags.join(" • ") }) : null
+        ] }),
+        icon ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardIcon, { name: icon, size: 24, className: "text-primary" }) }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-3 pt-0", children: [
+        description ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-foreground leading-snug", children: description }) : null,
+        banner?.text ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: cn(
+              "rounded-full px-4 py-2 text-center text-sm font-semibold",
+              bannerClass
+            ),
+            children: banner.text
+          }
+        ) : null,
+        items?.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: items.map((item, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1.5 text-xs text-foreground",
+            children: [
+              item.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CardIcon,
+                {
+                  name: item.icon,
+                  size: 12,
+                  className: "shrink-0 text-muted-foreground"
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: item.text })
+            ]
+          },
+          i
+        )) }) : null
+      ] }),
+      ctas?.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(CardFooter, { className: "flex justify-center flex-wrap gap-2 pt-0", children: ctas.map((cta, i) => {
+        const variant = cta.theme ? CTA_VARIANT[cta.theme] : "default";
+        const isOutline = i > 0 || cta.link && !cta.action;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            type: "button",
+            variant: isOutline ? "outline" : variant,
+            size: "sm",
+            className: "gap-1.5",
+            disabled,
+            onClick: () => handleCtaClick(cta),
+            children: [
+              cta.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(CardIcon, { name: cta.icon, size: 14, className: "shrink-0" }) : null,
+              cta.title
+            ]
+          },
+          i
+        );
+      }) }) : null
+    ] });
+  }
+  function CardList({
+    cards,
+    onSendMessage,
+    disabled = false,
     className
   }) {
-    if (!pharmacies?.length) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground py-2", children: "No pharmacies available." });
+    if (!cards?.length) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground py-2", children: "No options available." });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: className ?? "space-y-4", children: pharmacies.map((pharmacy, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      VoucherCard,
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: className ?? "flex flex-col gap-3 mt-3", children: cards.map((card, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      GenericCard,
       {
-        pharmacy,
-        variant,
-        onGetVoucher
+        card,
+        onSendMessage,
+        disabled
       },
-      pharmacy.id ?? index2
+      index2
     )) });
   }
   function ChatMessage({
@@ -43169,13 +43234,6 @@ var MedAssistWidget = (function(exports) {
     const [selectedValues, setSelectedValues] = reactExports.useState([]);
     const [userFeedback, setUserFeedback] = reactExports.useState(distExports.USER_FEEDBACK.NONE);
     const { isStreaming } = useMedAssistStore();
-    const [hasBackgroundImage, setHasBackgroundImage] = reactExports.useState(false);
-    reactExports.useEffect(() => {
-      const container = document.querySelector(".synapse-chat-widget-container");
-      if (container) {
-        setHasBackgroundImage(container.classList.contains("theme-with-background"));
-      }
-    }, []);
     const handlePillClick = async (choice) => {
       const messageId = Date.now().toString();
       await onSendMessage({
@@ -43370,13 +43428,21 @@ var MedAssistWidget = (function(exports) {
             disabled: toolEscalationData?.isResponded
           }
         ) }) : null,
-        toolEscalationData?.details?.component === distExports.SYNAPSE_COMPONENTS.PHARMACY && toolEscalationData?.details?.input?.pharmacies && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          VoucherCardList,
+        toolEscalationData?.details?.component === distExports.SYNAPSE_COMPONENTS.CARD && toolEscalationData?.details?.input?.cards && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          CardList,
           {
-            pharmacies: toolEscalationData.details.input.pharmacies,
-            variant: hasBackgroundImage ? "custom" : "default"
+            cards: toolEscalationData.details.input.cards,
+            onSendMessage: async (message) => {
+              const messageId = Date.now().toString();
+              await onSendMessage({
+                message,
+                messageId,
+                toolCalled: true
+              });
+            },
+            disabled: toolEscalationData?.isResponded
           }
-        ) })
+        )
       ] })
     ] });
   }