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

package/dist/src/medassist-widget.js

@@ -26043,21 +26043,12 @@ var MedAssistWidget = (function(exports) {
     Component.displayName = toPascalCase(iconName);
     return Component;
   };
-  const __iconNode$h = [
+  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$h);
-  const __iconNode$g = [
-    ["path", { d: "M12 8V4H8", key: "hb8ula" }],
-    ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
-    ["path", { d: "M2 14h2", key: "vft8re" }],
-    ["path", { d: "M20 14h2", key: "4cs60a" }],
-    ["path", { d: "M15 13v2", key: "1xurst" }],
-    ["path", { d: "M9 13v2", key: "rq6x2g" }]
-  ];
-  const Bot = createLucideIcon("bot", __iconNode$g);
-  const __iconNode$f = [
+  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" }],
@@ -26070,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$f);
-  const __iconNode$e = [
+  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$e);
-  const __iconNode$d = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-  const Check = createLucideIcon("check", __iconNode$d);
-  const __iconNode$c = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-  const ChevronDown = createLucideIcon("chevron-down", __iconNode$c);
-  const __iconNode$b = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-  const ChevronLeft = createLucideIcon("chevron-left", __iconNode$b);
-  const __iconNode$a = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-  const ChevronRight = createLucideIcon("chevron-right", __iconNode$a);
-  const __iconNode$9 = [
+  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$9);
-  const __iconNode$8 = [
+  const Clock = createLucideIcon("clock", __iconNode$d);
+  const __iconNode$c = [
     [
       "path",
       {
@@ -26104,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$8);
-  const __iconNode$7 = [
+  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" }],
@@ -26113,10 +26104,38 @@ 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$7);
-  const __iconNode$6 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-  const LoaderCircle = createLucideIcon("loader-circle", __iconNode$6);
-  const __iconNode$5 = [
+  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$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",
+      {
+        d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0",
+        key: "1r0f0z"
+      }
+    ],
+    ["circle", { cx: "12", cy: "10", r: "3", key: "ilqhr7" }]
+  ];
+  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",
       {
@@ -26127,38 +26146,52 @@ var MedAssistWidget = (function(exports) {
     ["path", { d: "M12 8v6", key: "1ib9pf" }],
     ["path", { d: "M9 11h6", key: "1fldmi" }]
   ];
-  const MessageSquarePlus = createLucideIcon("message-square-plus", __iconNode$5);
-  const __iconNode$4 = [
+  const MessageSquarePlus = createLucideIcon("message-square-plus", __iconNode$6);
+  const __iconNode$5 = [
     ["path", { d: "M12 19v3", key: "npa21l" }],
     ["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
     ["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
   ];
-  const Mic = createLucideIcon("mic", __iconNode$4);
+  const Mic = createLucideIcon("mic", __iconNode$5);
+  const __iconNode$4 = [
+    ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
+  ];
+  const Square = createLucideIcon("square", __iconNode$4);
   const __iconNode$3 = [
+    ["path", { d: "M7 10v12", key: "1qc93n" }],
     [
       "path",
       {
-        d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551",
-        key: "1miecu"
+        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",
+        key: "emmmcr"
       }
     ]
   ];
-  const Paperclip = createLucideIcon("paperclip", __iconNode$3);
+  const ThumbsUp = createLucideIcon("thumbs-up", __iconNode$3);
   const __iconNode$2 = [
+    ["path", { d: "M17 14V2", key: "8ymqnk" }],
     [
       "path",
       {
-        d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z",
-        key: "1ffxy3"
+        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",
+        key: "m61m77"
       }
-    ],
-    ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
+    ]
   ];
-  const Send = createLucideIcon("send", __iconNode$2);
+  const ThumbsDown = createLucideIcon("thumbs-down", __iconNode$2);
   const __iconNode$1 = [
-    ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
+    [
+      "path",
+      {
+        d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z",
+        key: "qn84l0"
+      }
+    ],
+    ["path", { d: "M13 5v2", key: "dyzc3o" }],
+    ["path", { d: "M13 17v2", key: "1ont0d" }],
+    ["path", { d: "M13 11v2", key: "1wjjxi" }]
   ];
-  const Square = createLucideIcon("square", __iconNode$1);
+  const Ticket = createLucideIcon("ticket", __iconNode$1);
   const __iconNode = [
     ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
     ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
@@ -26169,7 +26202,8 @@ var MedAssistWidget = (function(exports) {
     {
       ref,
       className: cn(
-        "rounded-xl border bg-card text-card-foreground shadow",
+        "rounded-xl bg-card text-card-foreground shadow",
+        // Border removed by default - add it explicitly if needed with border-border-subtle
         className
       ),
       ...props
@@ -27437,7 +27471,7 @@ var MedAssistWidget = (function(exports) {
         });
       }
       async feedback(sessionId, messageId, feedback, feedback_reason) {
-        return this.patch(`${this.basePath}/${sessionId}/${messageId}`, {
+        return this.put(`${this.basePath}/${sessionId}/message/${messageId}/feedback`, {
           feedback,
           feedback_reason
         });
@@ -27467,7 +27501,8 @@ var MedAssistWidget = (function(exports) {
       MOBILE_VERIFICATION: "mobile_verification",
       PILL: "pills",
       MULTI: "multi",
-      DOCTOR_CARD: "doctor_card"
+      DOCTOR_CARD: "doctor_card",
+      CARD: "card"
     };
     var SYNAPSE_TOOL_CALLBACK_NAME;
     (function(SYNAPSE_TOOL_CALLBACK_NAME2) {
@@ -27535,6 +27570,23 @@ var MedAssistWidget = (function(exports) {
     ToolCall.ToolCall = ToolCall$1;
     return ToolCall;
   }
+  var Config = {};
+  var hasRequiredConfig;
+  function requireConfig() {
+    if (hasRequiredConfig) return Config;
+    hasRequiredConfig = 1;
+    Object.defineProperty(Config, "__esModule", { value: true });
+    Config.Config = void 0;
+    const BaseResource_1 = /* @__PURE__ */ requireBaseResource();
+    let Config$1 = class Config extends BaseResource_1.BaseResource {
+      basePath = "/med-assist/agent-config";
+      async retrieve(agentId) {
+        return this.get(`${this.basePath}/${agentId}`);
+      }
+    };
+    Config.Config = Config$1;
+    return Config;
+  }
   var hasRequiredResources;
   function requireResources() {
     if (hasRequiredResources) return resources;
@@ -27545,11 +27597,13 @@ var MedAssistWidget = (function(exports) {
     const Session_1 = /* @__PURE__ */ requireSession();
     const Error_1 = /* @__PURE__ */ require_Error$1();
     const ToolCall_1 = /* @__PURE__ */ requireToolCall();
+    const Config_1 = /* @__PURE__ */ requireConfig();
     class ResourceManager {
       resourceConfig;
       httpClient;
       session;
       toolCall = null;
+      config;
       constructor(config) {
         this.resourceConfig = config;
         this.httpClient = new HttpClient_1.HttpClient({
@@ -27561,6 +27615,7 @@ var MedAssistWidget = (function(exports) {
           }
           // authorization: config.authorization,
         });
+        this.config = new Config_1.Config(this.httpClient);
         this.session = new Session_1.Session(this.httpClient);
       }
       /**
@@ -27570,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: {
@@ -27594,6 +27649,16 @@ var MedAssistWidget = (function(exports) {
           throw new Error_1.APIError("Failed to start session.", 500, void 0, void 0);
         }
       }
+      async getAgentConfig() {
+        if (!this.config) {
+          this.config = new Config_1.Config(this.httpClient);
+        }
+        try {
+          return await this.config.retrieve(this.resourceConfig.agentId);
+        } catch (error) {
+          throw new Error_1.APIError("Failed to get agent config.", 500, void 0, void 0);
+        }
+      }
       /**
        * Validate a session if it's still active or not
        * GET /med-assist/session/:sessionId
@@ -28486,9 +28551,6 @@ var MedAssistWidget = (function(exports) {
           case types_1.SYNAPSE_REALTIME_ERROR_CODES.SESSION_EXPIRED:
             connection.emit(types_1.SYNAPSE_REALTIME_RESERVED_EVENTS.SESSION_EXPIRED);
             break;
-          case types_1.SYNAPSE_REALTIME_ERROR_CODES.INVALID_EVENT:
-            console.log("invalid event error", message);
-            break;
           default:
             const error = new Error_1.MessageError(message?.data?.msg || "Socket error received", {
               context: {
@@ -28844,6 +28906,32 @@ var MedAssistWidget = (function(exports) {
             throw error;
         }
       }
+      /**
+       * Send feedback on a message
+       */
+      async sendFeedback(messageId, feedback, reason) {
+        if (!this.connection) {
+          const error = new Error_2.ConnectionError("Connection not established. Session may not be initialized.", {
+            context: { stage: "sendFeedback" },
+            hint: "Call startSession() before attempting to send feedback."
+          });
+          this.emitError(error);
+          throw error;
+        }
+        if (!this.sessionConfig?.session_id) {
+          const error = new Error_2.SessionError("Session ID not found", {
+            context: { stage: "sendFeedback" },
+            hint: "Call startSession() before attempting to send feedback."
+          });
+          this.emitError(error);
+          throw error;
+        }
+        switch (this.connectionType) {
+          case ConnectionFactory_1.ConnectionType.SOCKET:
+            this.resourceManager.sendFeedback(this.sessionConfig?.session_id, messageId, feedback, reason);
+            break;
+        }
+      }
       /**
        * Register a listener for a specific event
        */
@@ -28972,9 +29060,9 @@ var MedAssistWidget = (function(exports) {
       // /**
       //  * Get the agent configuration
       //  */
-      // public getAgentConfig(): AgentConfig | null {
-      //   return this.agentConfig;
-      // }
+      async getAgentConfig() {
+        return this.resourceManager.getAgentConfig();
+      }
       isConnected() {
         return this.connection?.isConnected() ?? false;
       }
@@ -29084,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
@@ -29784,6 +29872,7 @@ var MedAssistWidget = (function(exports) {
   function ProfileHeader({
     onClose,
     title,
+    titleImg,
     iconUrl,
     startNewConversation
   }) {
@@ -29810,24 +29899,24 @@ var MedAssistWidget = (function(exports) {
           };
         default:
           return {
-            dotColor: "bg-gray-400",
+            dotColor: "bg-text-tertiary",
             text: "Not Connected",
-            textColor: "text-gray-600"
+            textColor: "text-text-secondary"
           };
       }
     };
     const statusConfig = getStatusConfig();
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-lavender-100/95 backdrop-blur-md shadow-lg border-b border-lavender-200/60 px-6 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-6 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, { className: "w-12 h-12 bg-gradient-to-br from-lavender-400 to-lavender-500 flex-shrink-0 shadow-md ring-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AvatarFallback, { className: "text-white font-bold text-lg bg-transparent", children: iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, { className: "w-12 h-12 bg-gradient-to-br from-primary to-primary flex-shrink-0 shadow-md ring-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AvatarFallback, { className: "text-primary-foreground font-bold text-lg bg-transparent", children: iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             "img",
             {
               src: iconUrl,
               alt: "Bot Icon",
               className: "w-12 h-12 rounded-full object-cover"
             }
-          ) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-lg bg-transparent", children: "MC" }) }) }),
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-primary-foreground font-bold text-lg bg-transparent", children: "MC" }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
@@ -29840,7 +29929,7 @@ var MedAssistWidget = (function(exports) {
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold text-slate-900", children: title || "Health Assist" }),
+          titleImg ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: titleImg, alt: "", className: "h-6 object-contain" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold text-foreground", children: title || "Health Assist" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
@@ -29859,7 +29948,7 @@ var MedAssistWidget = (function(exports) {
             size: "icon",
             title: "Start New Chat",
             onClick: startNewConversation,
-            className: "h-8 w-8 text-slate-600 hover:text-slate-900 hover:bg-white/60 active:bg-white/80 rounded-xl transition-all duration-200",
+            className: "h-8 w-8 text-foreground hover:bg-secondary rounded-xl transition-all duration-200",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquarePlus, { className: "w-8 h-8" })
           }
         ),
@@ -29871,7 +29960,7 @@ var MedAssistWidget = (function(exports) {
             variant: "ghost",
             size: "icon",
             title: "Close",
-            className: "h-8 w-8 text-slate-600 hover:text-slate-900 hover:bg-white/60 active:bg-white/80 rounded-xl transition-all duration-200",
+            className: "h-8 w-8 text-foreground hover:bg-secondary rounded-xl transition-all duration-200",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-8 h-8" })
           }
         )
@@ -29989,6 +30078,307 @@ var MedAssistWidget = (function(exports) {
       setPosition
     };
   }
+  const DEFAULT_PRIMARY_HEX = "#6B5CE0";
+  const DEFAULT_BACKGROUND_HEX = "#F0F0F0";
+  const DEFAULT_THEME = {
+    background: DEFAULT_BACKGROUND_HEX,
+    // base-50 (#F0F0F0)
+    backgroundImage: void 0,
+    primary: DEFAULT_PRIMARY_HEX,
+    textColor: "black"
+  };
+  const BACKGROUND_OVERLAY = "rgba(0, 0, 0, 0.4)";
+  const BACKGROUND_BLUR = "24px";
+  function textColorFromMode(mode) {
+    if (mode === "dark") return "white";
+    if (mode === "light") return "black";
+    return void 0;
+  }
+  function mergeTheme(userTheme) {
+    const primary = userTheme?.primary ?? userTheme?.primaryColor ?? DEFAULT_THEME.primary;
+    const derivedTextColor = userTheme?.textColor ?? textColorFromMode(userTheme?.mode);
+    return {
+      background: userTheme?.background ?? DEFAULT_THEME.background,
+      backgroundImage: userTheme?.backgroundImage ?? DEFAULT_THEME.backgroundImage,
+      primary,
+      primaryColor: primary,
+      textColor: derivedTextColor ?? DEFAULT_THEME.textColor,
+      secondaryColor: userTheme?.secondaryColor,
+      tertiaryColor: userTheme?.tertiaryColor
+    };
+  }
+  function hexToHSL(hex) {
+    hex = hex.replace("#", "");
+    const r2 = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
+    const max = Math.max(r2, g, b);
+    const min = Math.min(r2, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r2:
+          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+          break;
+        case g:
+          h = ((b - r2) / d + 2) / 6;
+          break;
+        case b:
+          h = ((r2 - g) / d + 4) / 6;
+          break;
+      }
+    }
+    h = Math.round(h * 360);
+    s = Math.round(s * 100);
+    const lPercent = Math.round(l * 100);
+    return `${h} ${s}% ${lPercent}%`;
+  }
+  function rgbToHSL(rgb) {
+    const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (!match) throw new Error("Invalid RGB format");
+    const r2 = parseInt(match[1], 10) / 255;
+    const g = parseInt(match[2], 10) / 255;
+    const b = parseInt(match[3], 10) / 255;
+    const max = Math.max(r2, g, b);
+    const min = Math.min(r2, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r2:
+          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+          break;
+        case g:
+          h = ((b - r2) / d + 2) / 6;
+          break;
+        case b:
+          h = ((r2 - g) / d + 4) / 6;
+          break;
+      }
+    }
+    h = Math.round(h * 360);
+    s = Math.round(s * 100);
+    const lPercent = Math.round(l * 100);
+    return `${h} ${s}% ${lPercent}%`;
+  }
+  function extractHSL(hsl) {
+    const match = hsl.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
+    if (!match) throw new Error("Invalid HSL format");
+    return `${match[1]} ${match[2]}% ${match[3]}%`;
+  }
+  function normalizeColorToHSL(color2) {
+    if (!color2 || typeof color2 !== "string") throw new Error("Color must be a non-empty string");
+    const trimmedColor = color2.trim();
+    if (trimmedColor.startsWith("#")) return hexToHSL(trimmedColor);
+    if (trimmedColor.startsWith("rgb")) return rgbToHSL(trimmedColor);
+    if (trimmedColor.startsWith("hsl")) return extractHSL(trimmedColor);
+    if (/^\d+\s+\d+%\s+\d+%$/.test(trimmedColor)) return trimmedColor;
+    throw new Error(`Unsupported color format: ${color2}`);
+  }
+  function getLuminance(hsl) {
+    const match = hsl.match(/(\d+)\s+(\d+)%\s+(\d+)%/);
+    if (!match) return 0.5;
+    return parseInt(match[3], 10) / 100;
+  }
+  function calculateForegroundColor(backgroundColor) {
+    const luminance = getLuminance(backgroundColor);
+    return luminance > 0.5 ? "0 0% 9%" : "0 0% 98%";
+  }
+  function calculateBorderFromText(textColor) {
+    const match = textColor.match(/(\d+)\s+(\d+)%\s+(\d+)%/);
+    if (!match) return "0 0% 96%";
+    const h = match[1];
+    const s = Math.max(0, parseInt(match[2], 10) - 5);
+    return `${h} ${s}% 96%`;
+  }
+  function generateColorScale(baseHsl) {
+    const match = baseHsl.match(/(\d+)\s+(\d+)%\s+(\d+)%/);
+    if (!match) {
+      return {
+        50: "262 83% 98%",
+        100: "262 83% 96%",
+        200: "262 83% 92%",
+        300: "262 83% 85%",
+        400: "262 83% 75%",
+        500: "262 83% 58%",
+        600: "262 83% 50%",
+        700: "262 83% 40%",
+        800: "262 83% 30%",
+        900: "262 83% 20%"
+      };
+    }
+    const h = parseInt(match[1], 10);
+    const s = parseInt(match[2], 10);
+    const l = parseInt(match[3], 10);
+    return {
+      50: `${h} ${Math.max(0, s - 20)}% ${Math.min(98, l + 40)}%`,
+      100: `${h} ${Math.max(0, s - 15)}% ${Math.min(96, l + 35)}%`,
+      200: `${h} ${Math.max(0, s - 10)}% ${Math.min(92, l + 30)}%`,
+      300: `${h} ${Math.max(0, s - 5)}% ${Math.min(85, l + 20)}%`,
+      400: `${h} ${s}% ${Math.min(75, l + 10)}%`,
+      500: `${h} ${s}% ${l}%`,
+      // Base color
+      600: `${h} ${Math.min(100, s + 5)}% ${Math.max(50, l - 10)}%`,
+      700: `${h} ${Math.min(100, s + 10)}% ${Math.max(40, l - 20)}%`,
+      800: `${h} ${Math.min(100, s + 15)}% ${Math.max(30, l - 30)}%`,
+      900: `${h} ${Math.min(100, s + 20)}% ${Math.max(20, l - 40)}%`
+    };
+  }
+  function applyTheme(rootElement, theme) {
+    const primaryInput = theme.primary ?? DEFAULT_PRIMARY_HEX;
+    const textColor = theme.textColor ?? "black";
+    const hasBackgroundImage = Boolean(theme.backgroundImage);
+    const setProperty = (property, value) => {
+      const el = rootElement instanceof ShadowRoot ? rootElement.host : rootElement;
+      if (el instanceof HTMLElement) el.style.setProperty(property, value);
+    };
+    if (hasBackgroundImage) {
+      setProperty("--background", "0 0% 0% / 0");
+    } else {
+      const bgColor = theme.background ?? DEFAULT_BACKGROUND_HEX;
+      try {
+        setProperty("--background", normalizeColorToHSL(bgColor));
+      } catch (e) {
+        console.warn("Failed to apply background color:", e);
+        setProperty("--background", "0 0% 94.1%");
+      }
+    }
+    let primaryHsl;
+    try {
+      primaryHsl = normalizeColorToHSL(primaryInput);
+      setProperty("--primary", primaryHsl);
+      setProperty("--primary-foreground", calculateForegroundColor(primaryHsl));
+      setProperty("--ring", primaryHsl);
+      setProperty("--border-primary", primaryHsl);
+      const primaryScale = generateColorScale(primaryHsl);
+      for (const [step, hslValue] of Object.entries(primaryScale)) {
+        setProperty(`--primary-${step}`, hslValue);
+      }
+    } catch (e) {
+      console.warn("Failed to apply primary color:", e);
+      primaryHsl = normalizeColorToHSL(DEFAULT_PRIMARY_HEX);
+      setProperty("--primary", primaryHsl);
+      setProperty("--primary-foreground", calculateForegroundColor(primaryHsl));
+      setProperty("--ring", primaryHsl);
+      setProperty("--border-primary", primaryHsl);
+      const defaultScale = generateColorScale(primaryHsl);
+      for (const [step, hslValue] of Object.entries(defaultScale)) {
+        setProperty(`--primary-${step}`, hslValue);
+      }
+    }
+    if (textColor === "white") {
+      setProperty("--foreground", "0 0% 100%");
+      setProperty("--card-foreground", "0 0% 100%");
+      setProperty("--popover-foreground", "0 0% 100%");
+      setProperty("--muted-foreground", "0 0% 70%");
+    } else {
+      setProperty("--foreground", "0 0% 9%");
+      setProperty("--card-foreground", "0 0% 9%");
+      setProperty("--popover-foreground", "0 0% 9%");
+      setProperty("--muted-foreground", "0 0% 30%");
+    }
+    const host = rootElement instanceof ShadowRoot ? rootElement.host : rootElement;
+    if (host instanceof HTMLElement) {
+      host.setAttribute("data-text-color", textColor);
+    }
+    if (hasBackgroundImage) {
+      if (textColor === "white") {
+        setProperty("--bot-message-bg", "rgba(0, 0, 0, 0.6)");
+      } else {
+        setProperty("--bot-message-bg", "rgba(255, 255, 255, 0.6)");
+      }
+    } else {
+      if (textColor === "white") {
+        setProperty("--bot-message-bg", "rgba(0, 0, 0, 0.6)");
+      } else {
+        setProperty("--bot-message-bg", "rgba(255, 255, 255, 0.6)");
+      }
+    }
+    if (textColor === "white") {
+      setProperty("--card", "0 0% 0% / 0.6");
+    } else {
+      setProperty("--card", "0 0% 100% / 0.6");
+    }
+    setProperty("--bot-message-border", calculateBorderFromText(textColor === "white" ? "0 0% 100%" : "0 0% 9%"));
+    if (hasBackgroundImage) {
+      setProperty("--popover", textColor === "white" ? "0 0% 0% / 0.5" : "0 0% 100% / 0.5");
+    } else {
+      if (textColor === "white") {
+        setProperty("--popover", "0 0% 0%");
+      } else {
+        setProperty("--popover", "0 0% 100%");
+      }
+    }
+    const popoverScale = textColor === "white" ? "white" : "black";
+    for (const step of [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1e3]) {
+      setProperty(`--popover-${step}`, `var(--${popoverScale}-${step})`);
+    }
+    setProperty("--secondary", "0 0% 96.1%");
+    setProperty("--surface-secondary", "0 0% 96.1%");
+    setProperty("--secondary-foreground", textColor === "white" ? "0 0% 98%" : "0 0% 9%");
+    setProperty("--muted", "0 0% 96.1%");
+    setProperty("--accent", primaryInput ? normalizeColorToHSL(primaryInput) : "0 0% 96.1%");
+    setProperty("--accent-foreground", primaryInput ? calculateForegroundColor(normalizeColorToHSL(primaryInput)) : "0 0% 9%");
+    if (hasBackgroundImage) {
+      if (textColor === "white") {
+        setProperty("--surface", "0 0% 0% / 0.6");
+      } else {
+        setProperty("--surface", "0 0% 100% / 0.6");
+      }
+    } else {
+      const bgColor = theme.background ?? DEFAULT_BACKGROUND_HEX;
+      try {
+        setProperty("--surface", normalizeColorToHSL(bgColor));
+      } catch (e) {
+        setProperty("--surface", "0 0% 94.1%");
+      }
+    }
+    setProperty("--surface-tertiary", "0 0% 98%");
+    setProperty("--border-subtle", "0 0% 89.8%");
+    setProperty("--border-medium", "0 0% 80%");
+    setProperty("--text-primary", textColor === "white" ? "0 0% 100%" : "0 0% 3.9%");
+    setProperty("--text-secondary", textColor === "white" ? "0 0% 70%" : "0 0% 45.1%");
+    setProperty("--text-tertiary", textColor === "white" ? "0 0% 60%" : "0 0% 63.9%");
+    setProperty("--text-muted", textColor === "white" ? "0 0% 70%" : "0 0% 45.1%");
+    setProperty("--border", "0 0% 89.8%");
+    setProperty("--input", "0 0% 89.8%");
+    if (hasBackgroundImage) {
+      setProperty("--theme-background-image", `url(${theme.backgroundImage})`);
+      setProperty("--theme-background-blur", BACKGROUND_BLUR);
+      setProperty("--theme-background-overlay", BACKGROUND_OVERLAY);
+      const host2 = rootElement instanceof ShadowRoot ? rootElement.host : rootElement;
+      if (host2 instanceof HTMLElement) host2.classList.add("theme-with-background");
+    } else {
+      setProperty("--theme-background-image", "none");
+      setProperty("--theme-background-blur", "0px");
+      setProperty("--theme-background-overlay", "rgba(0, 0, 0, 0)");
+      const host2 = rootElement instanceof ShadowRoot ? rootElement.host : rootElement;
+      if (host2 instanceof HTMLElement) host2.classList.remove("theme-with-background");
+    }
+  }
+  const EkaCareLogo = ({ className }) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "42", height: "12", viewBox: "0 0 42 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_988_2228)", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M10.3286 7.50625C10.2316 7.32816 10.1101 7.1655 9.96865 7.02251L9.20362 6.25748L8.46797 6.99311L9.22391 7.74906C9.42548 7.95041 9.55007 8.22876 9.55007 8.53631C9.55007 8.84384 9.43437 9.10189 9.24548 9.30156L9.24486 9.30219C9.23787 9.30939 9.23089 9.31658 9.22391 9.32376C8.73595 9.82378 8.13758 10.2159 7.46836 10.4609C6.96306 10.6457 6.41714 10.7466 5.84796 10.7466C5.3655 10.7466 4.90017 10.6743 4.46193 10.5395C4.10277 10.4296 3.76225 10.2775 3.44539 10.0897C2.06021 9.26793 1.13147 7.75751 1.13147 6.03011C1.13147 4.30269 2.06021 2.79208 3.44539 1.97035C3.76331 1.78189 4.10531 1.6296 4.46575 1.51939C4.90293 1.38529 5.36719 1.31338 5.84817 1.31338C6.41588 1.31338 6.96011 1.41363 7.46414 1.59745C8.13483 1.84217 8.73447 2.23451 9.22328 2.73559C9.22983 2.74214 9.23618 2.74871 9.24254 2.75526C9.43309 2.95514 9.55007 3.22566 9.55007 3.52369C9.55007 3.8217 9.42548 4.10935 9.22391 4.31092L9.0528 4.48225L8.24059 5.29424L6.4698 3.52348C6.41166 3.46593 6.35032 3.41179 6.28601 3.36104C5.91987 3.07337 5.45793 2.90163 4.95603 2.90163C4.77794 2.90163 4.60492 2.9232 4.43929 2.96422C4.32147 2.99299 4.20747 3.03169 4.09833 3.07929C4.08987 3.08289 4.08142 3.0867 4.07318 3.09049C3.32378 3.42745 2.80197 4.18064 2.80197 5.05566C2.80197 5.10917 2.80388 5.16227 2.80789 5.21493C2.80789 5.21706 2.80811 5.21916 2.80833 5.2215C2.80917 5.2344 2.81046 5.2473 2.81171 5.2602C2.83879 5.49074 2.97987 5.68661 3.177 5.78962C3.27218 5.83931 3.38046 5.86746 3.49533 5.86746H3.49637C3.69922 5.86724 3.88176 5.77904 4.0074 5.63902C4.11696 5.51738 4.18358 5.35623 4.18358 5.17939C4.18358 5.11784 4.17554 5.05841 4.16054 5.00174C4.12181 4.85684 4.03699 4.73057 3.92277 4.64005C4.08756 4.23098 4.48795 3.94228 4.95603 3.94228C5.26356 3.94228 5.5419 4.06686 5.74347 4.26843L7.50497 6.02989L7.04747 6.48739L5.73396 7.80088C5.53323 7.99697 5.2587 8.11773 4.95603 8.11773C4.79528 8.11773 4.64234 8.08367 4.50423 8.02233C4.50338 8.02192 4.50232 8.02149 4.50128 8.02108C4.239 7.90348 4.03045 7.6875 3.92277 7.42015C4.03699 7.32941 4.12181 7.20336 4.16054 7.05827C4.17554 7.00179 4.18358 6.94214 4.18358 6.8808C4.18358 6.70397 4.11696 6.54281 4.0074 6.42099C3.88176 6.28116 3.69963 6.19296 3.4968 6.19255H3.49533C3.38046 6.19255 3.27218 6.22067 3.177 6.27039C2.97922 6.3738 2.83795 6.57052 2.81149 6.8019C2.8113 6.80488 2.81087 6.80763 2.81065 6.81036C2.8098 6.81969 2.80896 6.82877 2.80833 6.83807C2.80833 6.8406 2.80833 6.84295 2.80789 6.84527C2.80388 6.89774 2.80197 6.95081 2.80197 7.0041C2.80197 7.87915 3.32378 8.63256 4.07318 8.96948L4.09833 8.98069C4.20747 9.02828 4.32147 9.06699 4.43929 9.09576C4.60492 9.1368 4.77794 9.15838 4.95603 9.15838C5.45921 9.15838 5.922 8.98598 6.28855 8.69684C6.32346 8.66935 6.35749 8.64058 6.39071 8.61077L6.39156 8.60992L7.99165 7.00983L8.23827 6.7632L8.9739 6.02758L9.19176 5.80991L9.38275 5.61892L9.95722 5.04426C10.103 4.89851 10.228 4.73185 10.3274 4.54931C10.4936 4.24367 10.5882 3.8934 10.5882 3.52116C10.5882 3.34432 10.5668 3.17259 10.5266 3.00824C10.4359 2.63659 10.2489 2.30283 9.99338 2.03507C9.98556 2.0268 9.97776 2.01879 9.96949 2.01074C9.96843 2.00968 9.96758 2.00883 9.96674 2.00777C9.96019 2.00144 9.95384 1.99487 9.94748 1.98854C9.94601 1.98685 9.94454 1.98557 9.94307 1.98429C8.89945 0.927795 7.45039 0.272949 5.84817 0.272949C5.07066 0.272949 4.3293 0.426931 3.65269 0.70634C3.31448 0.845949 2.99256 1.01684 2.69029 1.21525C1.12448 2.24447 0.0908203 4.01651 0.0908203 6.03011C0.0908203 8.04368 1.12448 9.81576 2.69029 10.8448C2.99149 11.0425 3.31236 11.213 3.64931 11.3522C4.32677 11.6326 5.0694 11.7872 5.84817 11.7872C7.45885 11.7872 8.9151 11.1256 9.95976 10.0594L9.96464 10.0546C9.96802 10.0511 9.9714 10.0476 9.97478 10.0442C9.98133 10.0376 9.9879 10.0309 9.99423 10.0241C9.99677 10.0217 9.99911 10.0192 10.0014 10.0165C10.2531 9.7506 10.4378 9.42044 10.5281 9.05302C10.5691 8.88742 10.5907 8.7144 10.5907 8.53631C10.5907 8.16319 10.4955 7.8123 10.3286 7.50625Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M16.9927 5.24012C16.9027 5.11131 16.7871 4.99534 16.6586 4.89231C16.5301 4.78924 16.4015 4.71195 16.2602 4.64753C16.1188 4.58312 15.9775 4.5316 15.8233 4.49295C15.6691 4.45431 15.5149 4.44141 15.3607 4.44141C15.1807 4.44141 14.988 4.46718 14.7952 4.5187C14.6282 4.57024 14.4611 4.63463 14.3069 4.72482C14.0113 4.90518 13.7543 5.16282 13.5872 5.45912C13.4973 5.6137 13.433 5.78118 13.3816 5.94866C13.3303 6.12901 13.3174 6.30937 13.3174 6.48972C13.3174 6.67005 13.3431 6.85041 13.3945 7.03076C13.4459 7.19824 13.5101 7.36572 13.613 7.52031C13.7929 7.8166 14.0499 8.07424 14.3583 8.2546C14.5125 8.34479 14.6796 8.42208 14.8466 8.46072C15.0137 8.51224 15.1936 8.53801 15.3735 8.53801H15.3863C15.502 8.53801 15.6305 8.52514 15.7462 8.49937C15.8618 8.4736 15.9775 8.44782 16.0803 8.40918C16.1831 8.37053 16.2859 8.31901 16.3887 8.2546C16.4787 8.20308 16.5815 8.13866 16.6586 8.07424C16.6971 8.0356 16.7357 7.99695 16.7742 7.95831C16.8128 7.90676 16.8256 7.85524 16.8385 7.79082C16.8385 7.75218 16.8256 7.72643 16.8128 7.68776C16.7999 7.66201 16.7871 7.63624 16.7742 7.62337L16.7228 7.55895C16.71 7.54608 16.6971 7.52031 16.6843 7.49453C16.6586 7.45589 16.6329 7.41724 16.5943 7.3786C16.5686 7.33995 16.5429 7.31418 16.5044 7.28841C16.4658 7.26266 16.4273 7.24976 16.3887 7.24976H16.3759H16.363C16.3116 7.24976 16.2602 7.26266 16.2217 7.30131C16.1959 7.31418 16.1702 7.33995 16.1574 7.35282C16.106 7.39147 16.0546 7.44302 15.9903 7.48166C15.9389 7.52031 15.8747 7.55895 15.8233 7.58472C15.759 7.61047 15.6948 7.63624 15.6177 7.64911C15.5406 7.66201 15.4634 7.67489 15.3735 7.67489H15.3607C15.2321 7.67489 15.1036 7.64911 14.988 7.5976C14.8595 7.54608 14.7567 7.48166 14.6539 7.39147C14.5511 7.30131 14.4611 7.19824 14.384 7.08231C14.3455 7.01789 14.3069 6.95347 14.2812 6.88905H17.1083C17.2754 6.88905 17.3911 6.77311 17.3911 6.60566C17.4039 6.34801 17.3654 6.07747 17.3011 5.8327C17.2497 5.6266 17.134 5.42047 16.9927 5.24012ZM16.4915 6.0517H14.2812C14.3197 5.96153 14.3583 5.88424 14.4226 5.79405C14.5125 5.66524 14.6282 5.54931 14.7567 5.45912C14.8466 5.3947 14.9623 5.35605 15.0651 5.33031C15.1679 5.30453 15.2836 5.29166 15.3992 5.29166C15.5406 5.29166 15.6691 5.31741 15.7976 5.35605C15.9261 5.3947 16.0417 5.45912 16.1446 5.54931C16.2473 5.6266 16.3373 5.72966 16.4015 5.8456C16.4401 5.91001 16.4658 5.97441 16.4915 6.0517Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20.7832 8.04849L19.2925 6.27072L20.6033 4.9052C20.6418 4.85366 20.6675 4.77637 20.6675 4.72485C20.6675 4.6862 20.6675 4.66043 20.6547 4.63466C20.6418 4.60891 20.6161 4.58314 20.5904 4.54449C20.539 4.50585 20.4876 4.49298 20.4362 4.49298H20.0122C19.9479 4.49298 19.8965 4.50585 19.8451 4.53162C19.8065 4.55737 19.7808 4.58314 19.7423 4.60891L18.5086 5.92291V3.68137C18.5086 3.64272 18.5086 3.60408 18.4829 3.56543C18.4701 3.52679 18.4444 3.48814 18.4187 3.47527C18.3673 3.42372 18.303 3.39795 18.2259 3.39795H17.9303C17.8918 3.39795 17.8532 3.39795 17.8147 3.41085C17.7761 3.42372 17.7376 3.44949 17.7119 3.47527C17.6605 3.52679 17.6348 3.5912 17.6348 3.66849V8.16446C17.6348 8.2031 17.6348 8.24175 17.6476 8.26749C17.6605 8.30614 17.6862 8.34481 17.7119 8.37056C17.7376 8.39633 17.7761 8.4221 17.8147 8.43498C17.8404 8.44785 17.8661 8.44785 17.9046 8.44785C17.9175 8.44785 17.9175 8.44785 17.9303 8.44785H18.2002C18.3673 8.44785 18.4829 8.33191 18.4829 8.16446V7.0952L18.7014 6.8762L19.8708 8.29327C19.8965 8.33191 19.9222 8.38346 19.9736 8.4092C20.025 8.43498 20.0764 8.46075 20.1278 8.46075H20.6161C20.6675 8.46075 20.7061 8.46075 20.7446 8.43498L20.7575 8.4221C20.7832 8.4092 20.8603 8.35769 20.8603 8.24175C20.8603 8.21598 20.8603 8.1902 20.8474 8.16446C20.8474 8.12578 20.8217 8.08714 20.7832 8.04849Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M24.3442 4.49264H24.0615C24.0229 4.49264 23.9844 4.49264 23.9587 4.50551C23.9201 4.51839 23.8816 4.54416 23.8559 4.56993C23.8302 4.59568 23.8045 4.63435 23.7916 4.673C23.7788 4.71164 23.7788 4.75029 23.7788 4.77603V4.78893C23.6631 4.71164 23.5474 4.63435 23.4189 4.5828C23.1748 4.47974 22.9178 4.42822 22.6608 4.42822C22.6479 4.42822 22.6479 4.42822 22.6351 4.42822C22.4551 4.42822 22.2752 4.454 22.0953 4.50551C21.9283 4.55703 21.7612 4.62145 21.607 4.71164C21.4528 4.8018 21.3114 4.90487 21.1958 5.0337C21.0673 5.16251 20.9645 5.29135 20.8745 5.44593C20.7846 5.60051 20.7075 5.76799 20.6689 5.93545C20.5661 6.29616 20.5661 6.66977 20.6689 7.01758C20.7203 7.18506 20.7846 7.35251 20.8745 7.50712C21.0544 7.80341 21.3114 8.06106 21.607 8.24141C21.7612 8.33158 21.9283 8.40887 22.0953 8.44751C22.2752 8.49906 22.4551 8.52483 22.6351 8.52483C22.6479 8.52483 22.6479 8.52483 22.6608 8.52483C22.9178 8.52483 23.1748 8.47329 23.4189 8.37022C23.5474 8.3187 23.6631 8.24141 23.7788 8.16412V8.18987C23.7788 8.22851 23.7788 8.26716 23.8045 8.30583C23.8173 8.34448 23.843 8.37022 23.8687 8.396C23.8944 8.42177 23.933 8.44751 23.9715 8.46041C24.0101 8.47329 24.0486 8.48616 24.0743 8.47329H24.3699C24.447 8.47329 24.5113 8.44751 24.5626 8.396C24.5884 8.37022 24.6141 8.33158 24.6269 8.29293C24.6398 8.25429 24.6526 8.21564 24.6398 8.18987V4.77603C24.6398 4.673 24.6012 4.60858 24.5626 4.56993C24.5241 4.53129 24.4599 4.49264 24.3442 4.49264ZM23.7916 6.46364C23.7916 6.61822 23.7659 6.7728 23.7017 6.92741C23.6374 7.06912 23.5603 7.19793 23.4447 7.31387C23.3418 7.4298 23.2133 7.51999 23.072 7.58441C22.9306 7.6488 22.7764 7.68748 22.6222 7.68748C22.468 7.68748 22.3138 7.6488 22.1853 7.58441C22.0439 7.51999 21.9283 7.4298 21.8126 7.31387C21.7098 7.19793 21.6199 7.06912 21.5685 6.92741C21.4528 6.6311 21.4528 6.30906 21.5685 6.01274C21.6327 5.87106 21.7098 5.74222 21.8126 5.62629C21.9154 5.51035 22.0439 5.43303 22.1853 5.36864C22.3266 5.30422 22.4808 5.26558 22.6222 5.26558C22.7764 5.26558 22.9306 5.30422 23.072 5.36864C23.2133 5.43303 23.3418 5.52322 23.4447 5.62629C23.5474 5.74222 23.6374 5.87106 23.7017 6.01274C23.7659 6.15445 23.7916 6.30906 23.7916 6.46364Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M29.7915 7.67488C29.7787 7.662 29.7658 7.63623 29.753 7.62336L29.6246 7.45588C29.6115 7.4301 29.5858 7.40436 29.573 7.37859C29.5474 7.32704 29.4958 7.3013 29.4317 7.27552C29.3802 7.26265 29.3289 7.26265 29.2774 7.27552C29.2389 7.2884 29.2133 7.3013 29.1746 7.32704L29.1361 7.36571C29.0848 7.40436 29.0333 7.45588 28.9689 7.49452C28.9177 7.53317 28.8533 7.57181 28.802 7.59759C28.7377 7.62336 28.6736 7.6491 28.5964 7.662C28.5192 7.67488 28.4423 7.68775 28.3523 7.68775H28.3395C28.1979 7.68775 28.0438 7.6491 27.9154 7.59759C27.7738 7.53317 27.6454 7.443 27.5426 7.33994C27.4269 7.224 27.3497 7.09517 27.2856 6.95346C27.2213 6.81175 27.1957 6.65717 27.1957 6.48969C27.1957 6.3351 27.2341 6.16765 27.2985 6.02594C27.3628 5.88423 27.4526 5.74252 27.5554 5.63946C27.6582 5.52352 27.7869 5.43333 27.9282 5.36894C28.0566 5.30452 28.2107 5.26588 28.3523 5.26588C28.4292 5.26588 28.4936 5.27875 28.5707 5.29162C28.712 5.3174 28.8533 5.38181 28.9689 5.4591C29.0205 5.49775 29.0717 5.5364 29.1233 5.58794C29.1877 5.65233 29.2646 5.69098 29.3417 5.69098C29.393 5.69098 29.4702 5.66523 29.5346 5.57504L29.753 5.29162C29.7915 5.2401 29.7915 5.17569 29.7915 5.12417C29.7915 5.08552 29.7658 5.03398 29.7402 4.99533C29.7143 4.96959 29.6886 4.94381 29.663 4.91804L29.6115 4.8794C29.5346 4.81498 29.4446 4.76346 29.3546 4.71194C29.2517 4.6604 29.1617 4.60888 29.0589 4.57023C28.9561 4.53159 28.8405 4.50581 28.7248 4.48004C28.6092 4.45427 28.4936 4.4414 28.3779 4.45427C28.1979 4.45427 28.0182 4.48004 27.8382 4.53159C27.671 4.5831 27.5041 4.64752 27.3497 4.73769C27.0416 4.91804 26.7972 5.17569 26.6047 5.47198C26.5147 5.62659 26.4375 5.79404 26.3862 5.96152C26.2834 6.32223 26.2834 6.69581 26.3862 7.04365C26.4375 7.2111 26.5018 7.37859 26.6047 7.53317C26.7844 7.82946 27.0416 8.0871 27.3497 8.26746C27.5041 8.35765 27.671 8.43494 27.8382 8.47359C28.0182 8.5251 28.1851 8.55088 28.3651 8.55088H28.3779C28.4936 8.55088 28.622 8.538 28.7377 8.51223C28.8533 8.48646 28.9689 8.46071 29.0717 8.42207C29.1746 8.38342 29.2774 8.33188 29.3802 8.26746C29.4702 8.21594 29.5602 8.15152 29.6502 8.0871C29.6887 8.06136 29.7274 8.02271 29.753 7.98407C29.7787 7.9454 29.8043 7.90675 29.8171 7.8681C29.8299 7.81659 29.8299 7.76504 29.8171 7.72639L29.7915 7.67488Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M33.6473 4.49264H33.3645C33.326 4.49264 33.2873 4.49264 33.2616 4.50551C33.2232 4.51839 33.1847 4.54416 33.1588 4.56993C33.1332 4.59568 33.1076 4.63435 33.0947 4.673C33.0819 4.71164 33.0819 4.75029 33.0819 4.77603V4.78893C32.966 4.71164 32.8504 4.63435 32.7219 4.5828C32.4778 4.47974 32.2209 4.42822 31.9509 4.42822C31.7709 4.42822 31.5912 4.454 31.4112 4.50551C31.2443 4.55703 31.0771 4.62145 30.923 4.71164C30.7686 4.8018 30.6274 4.90487 30.5117 5.0337C30.3833 5.16251 30.2805 5.29135 30.1905 5.44593C30.1005 5.60051 30.0361 5.76799 29.9848 5.93545C29.882 6.29616 29.882 6.66977 29.9848 7.01758C30.1261 7.53287 30.473 7.97087 30.923 8.24141C31.0771 8.33158 31.2443 8.40887 31.4112 8.44751C31.5912 8.49906 31.7709 8.52483 31.9509 8.52483C31.9637 8.52483 31.9637 8.52483 31.9766 8.52483C32.2337 8.52483 32.4906 8.47329 32.7347 8.37022C32.8635 8.3187 32.9791 8.24141 33.0947 8.16412V8.18987C33.0947 8.22851 33.0947 8.26716 33.1204 8.30583C33.1332 8.34448 33.1588 8.37022 33.1847 8.396C33.2104 8.42177 33.2488 8.44751 33.2873 8.46041C33.326 8.47329 33.3645 8.48616 33.3901 8.47329H33.6857C33.7629 8.47329 33.827 8.44751 33.8786 8.396C33.9042 8.37022 33.9298 8.33158 33.9429 8.29293C33.9557 8.25429 33.9686 8.21564 33.9686 8.18987V4.77603C33.9686 4.673 33.9298 4.60858 33.8914 4.56993C33.827 4.53129 33.7629 4.49264 33.6473 4.49264ZM33.1076 6.46364C33.1076 6.61822 33.0819 6.7728 33.0176 6.92741C32.9532 7.06912 32.8763 7.2108 32.7606 7.31387C32.6578 7.4298 32.5291 7.51999 32.3878 7.58441C32.2466 7.6488 32.0922 7.68748 31.9381 7.68748C31.784 7.68748 31.6296 7.6488 31.5012 7.58441C31.3599 7.51999 31.2443 7.4298 31.1284 7.31387C31.0256 7.19793 30.9358 7.06912 30.8843 6.92741C30.7686 6.6311 30.7686 6.30906 30.8843 6.01274C30.9486 5.87106 31.0256 5.74222 31.1284 5.62629C31.2312 5.51035 31.3599 5.43303 31.5012 5.36864C31.6425 5.30422 31.7968 5.26558 31.9381 5.26558C32.0922 5.26558 32.2466 5.30422 32.3878 5.36864C32.5291 5.43303 32.6578 5.52322 32.7606 5.62629C32.8635 5.74222 32.9532 5.87106 33.0176 6.01274C33.0688 6.15445 33.1076 6.30906 33.1076 6.46364Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M37.0006 5.03399C37.0006 4.99534 36.9878 4.9567 36.975 4.91805C36.9622 4.87941 36.9363 4.85363 36.9106 4.82789C36.885 4.80212 36.8594 4.77634 36.8206 4.76347C36.7437 4.71195 36.6665 4.66041 36.5765 4.60889C36.4994 4.57024 36.4225 4.5316 36.3325 4.50582C36.2425 4.48005 36.1525 4.46718 36.0625 4.45431C35.9596 4.44141 35.8568 4.44141 35.7671 4.44141C35.6512 4.44141 35.5484 4.45431 35.4458 4.49295C35.3558 4.5316 35.2786 4.57024 35.2015 4.62176C35.1886 4.63463 35.1758 4.64753 35.163 4.64753C35.1502 4.62176 35.1374 4.59599 35.1115 4.57024C35.0858 4.54447 35.0474 4.5187 35.0086 4.50582C34.9702 4.49295 34.9317 4.48005 34.9061 4.49295H34.6105C34.5717 4.49295 34.5333 4.49295 34.5076 4.5187C34.4689 4.5316 34.4433 4.55734 34.4176 4.57024C34.392 4.59599 34.3664 4.63463 34.3533 4.67331C34.3405 4.71195 34.3276 4.7506 34.3276 4.77634V8.19018C34.3276 8.35766 34.4433 8.4736 34.6105 8.4736H34.9061C34.9189 8.4736 34.9189 8.4736 34.9317 8.4736C34.9574 8.4736 34.9958 8.4736 35.0217 8.46072C35.0602 8.44782 35.0986 8.42208 35.1245 8.39631C35.1502 8.37053 35.1758 8.33189 35.1886 8.29324C35.2015 8.2546 35.2015 8.21595 35.2015 8.19018V5.93576C35.2015 5.8327 35.2143 5.74253 35.253 5.65234C35.2786 5.57505 35.3299 5.51066 35.3815 5.44624C35.4327 5.3947 35.4971 5.35605 35.5615 5.31741C35.6255 5.29166 35.7027 5.27876 35.7799 5.27876C35.8827 5.27876 35.9855 5.29166 36.0881 5.33031C36.204 5.36895 36.3068 5.42047 36.3965 5.48489L36.4353 5.51066C36.4737 5.54931 36.5253 5.56218 36.5894 5.56218C36.6278 5.56218 36.6665 5.54931 36.6922 5.52353C36.7306 5.49776 36.7565 5.47199 36.7822 5.44624L36.9622 5.16282C36.9878 5.12418 37.0006 5.08553 37.0006 5.03399Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M40.9076 5.84529C40.8436 5.62629 40.7536 5.40729 40.6123 5.22693C40.5095 5.0981 40.4066 4.98216 40.2782 4.8791C40.1495 4.77603 40.021 4.69874 39.8797 4.63435C39.7385 4.56993 39.5969 4.51839 39.4428 4.47974C39.2885 4.4411 39.1344 4.42822 38.9803 4.42822H38.9672C38.7875 4.42822 38.5946 4.454 38.4146 4.50551C38.2477 4.55703 38.0806 4.62145 37.9265 4.71164C37.7721 4.8018 37.6308 4.90487 37.5152 5.0337C37.2711 5.29135 37.0911 5.60051 37.0011 5.93545C36.9498 6.1158 36.937 6.29616 36.937 6.47651C36.937 6.65687 36.9626 6.85009 37.0139 7.01758C37.0655 7.18506 37.1296 7.35251 37.2196 7.50712C37.3096 7.6617 37.4252 7.80341 37.5408 7.91935C37.6693 8.04816 37.8108 8.15122 37.9521 8.24141C38.1062 8.33158 38.2734 8.40887 38.4406 8.44751C38.6203 8.49906 38.7875 8.52483 38.9672 8.52483C38.9672 8.52483 38.9672 8.52483 38.9803 8.52483C39.1087 8.52483 39.2244 8.51193 39.34 8.48619C39.4556 8.46041 39.5713 8.43464 39.6741 8.396C39.7769 8.35735 39.8797 8.30583 39.9826 8.24141C40.0726 8.18987 40.1623 8.12548 40.2523 8.06106C40.291 8.02241 40.3423 7.98377 40.3679 7.94512C40.4066 7.90648 40.4195 7.85493 40.4195 7.77764C40.4195 7.73899 40.4066 7.71322 40.3938 7.67458C40.381 7.6488 40.3679 7.62306 40.3551 7.61016L40.3166 7.55864C40.3038 7.54577 40.291 7.51999 40.2651 7.49422L40.1754 7.37829C40.1623 7.35251 40.1366 7.32677 40.111 7.31387C40.0854 7.28812 40.0466 7.27522 40.0082 7.26235C39.9697 7.24945 39.931 7.24945 39.9054 7.26235C39.8669 7.27522 39.841 7.28812 39.8154 7.30099C39.7897 7.31387 39.7641 7.33964 39.7513 7.35251C39.6997 7.39116 39.6485 7.4427 39.5841 7.48135C39.5328 7.51999 39.4685 7.55864 39.4172 7.58441C39.3528 7.61016 39.2885 7.63593 39.2116 7.6488C39.1344 7.6617 39.0444 7.67458 38.9672 7.67458H38.9544C38.8259 7.67458 38.6975 7.6488 38.5818 7.59729C38.4534 7.54577 38.3506 7.48135 38.2477 7.39116C38.1449 7.301 38.0549 7.19793 37.9906 7.082C37.9521 7.01758 37.9136 6.95316 37.8877 6.88877H40.7151C40.882 6.88877 40.9976 6.7728 40.9976 6.60535C41.0105 6.36058 40.972 6.10293 40.9076 5.84529ZM40.0982 6.05141H37.8877C37.9265 5.96122 37.9649 5.88393 38.0293 5.79374C38.1193 5.66493 38.2349 5.549 38.3634 5.4588C38.4534 5.39439 38.5562 5.35574 38.6718 5.33C38.7746 5.30422 38.8903 5.29135 39.0059 5.29135C39.1472 5.29135 39.2756 5.3171 39.4041 5.35574C39.5328 5.39439 39.6485 5.4588 39.7513 5.549C39.8541 5.62629 39.9438 5.72935 40.0082 5.84529C40.0338 5.9097 40.0726 5.9741 40.0982 6.05141Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M25.7828 7.50791C25.6928 7.46926 25.59 7.45639 25.4872 7.48216C25.3845 7.50791 25.2945 7.54658 25.2174 7.62387C25.1403 7.70116 25.0889 7.79133 25.076 7.89439C25.0503 8.0361 25.076 8.16494 25.1531 8.28087C25.2302 8.39681 25.3459 8.4741 25.4744 8.49987C25.5131 8.51275 25.5387 8.51274 25.5772 8.51274C25.6415 8.51274 25.7056 8.49987 25.77 8.4741C25.86 8.43545 25.95 8.37104 26.0013 8.28087C26.0528 8.19068 26.0913 8.10052 26.0913 7.99745C26.0913 7.89439 26.0656 7.79133 26.0013 7.71404C25.9628 7.61097 25.8856 7.54658 25.7828 7.50791Z", fill: "currentColor" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_988_2228", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "42", height: "12", fill: "currentColor" }) }) })
+    ] });
+  };
   const ChatComposer$2 = reactExports.lazy(() => Promise.resolve().then(() => ChatComposer$1));
   function WidgetContainer({
     isOpen,
@@ -29997,13 +30387,21 @@ var MedAssistWidget = (function(exports) {
     onStartNewSession,
     children,
     title,
+    titleImg,
     sessionId,
     chatComposer,
     environment,
-    displayMode
+    displayMode,
+    theme
   }) {
     const [isMobile, setIsMobile] = reactExports.useState(false);
     const containerRef = reactExports.useRef(null);
+    const mergedTheme = reactExports.useMemo(() => mergeTheme(theme), [theme]);
+    reactExports.useEffect(() => {
+      if (containerRef.current) {
+        applyTheme(containerRef.current, mergedTheme);
+      }
+    }, [mergedTheme]);
     reactExports.useEffect(() => {
       const checkMobile = () => {
         const width = window?.innerWidth ?? 0;
@@ -30133,12 +30531,13 @@ var MedAssistWidget = (function(exports) {
       isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none scale-95"
     );
     const cardStyles = cn(
-      "w-full h-full",
-      isMobile ? "bg-white" : "bg-white/90 backdrop-blur-2xl",
+      "w-full h-full relative",
+      "bg-background",
       "shadow-2xl",
       "flex flex-col",
       "overflow-hidden",
-      "border border-white/50 ring-1 ring-white/60",
+      "border-0",
+      mergedTheme.backgroundImage ? "theme-with-background" : "",
       isMobile ? "rounded-none" : "rounded-3xl"
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -30178,8 +30577,7 @@ var MedAssistWidget = (function(exports) {
             width: "100vw",
             maxHeight: "100svh",
             height: "100svh",
-            backgroundColor: "white"
-            // Ensure full coverage of background
+            backgroundColor: mergedTheme.backgroundImage ? "transparent" : "hsl(var(--background))"
           }
           // Ensure proper font rendering
           // WebkitFontSmoothing: "antialiased",
@@ -30220,18 +30618,43 @@ var MedAssistWidget = (function(exports) {
           }
         }
       ` }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: cardStyles, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 sticky top-0 z-50", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: cn(cardStyles, "border-0"), "data-text-color": mergedTheme.textColor, children: [
+            mergedTheme.backgroundImage && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "absolute inset-0 -z-10",
+                style: {
+                  backgroundImage: `url(${mergedTheme.backgroundImage})`,
+                  backgroundSize: "cover",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  // filter: `blur(3px)`,
+                  transform: "scale(1.1)"
+                  // Scale up to cover blur edges
+                }
+              }
+            ),
+            mergedTheme.backgroundImage && mergedTheme.textColor === "black" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "absolute inset-0 -z-10",
+                style: {
+                  backgroundColor: "rgba(0, 0, 0, 0.4)"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex-shrink-0 sticky top-0 z-50 synapse-chat-widget-header", mergedTheme.backgroundImage ? "" : "bg-popover"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               ProfileHeader,
               {
                 onClose,
                 title,
+                titleImg,
                 iconUrl,
                 startNewConversation: onStartNewSession
               }
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 overflow-hidden flex flex-col", children }),
-            chatComposer && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0 sticky bottom-0 z-50", children: [
+            chatComposer && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex-shrink-0 sticky bottom-0 z-50 synapse-chat-widget-footer", mergedTheme.backgroundImage ? "" : "bg-popover"), children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ChatComposer$2,
                 {
@@ -30247,13 +30670,28 @@ var MedAssistWidget = (function(exports) {
                   isDisabled: chatComposer.isDisabled,
                   isMobile,
                   placeholder: chatComposer.placeholder,
-                  recordingStatus: chatComposer.recordingStatus
+                  recordingStatus: chatComposer.recordingStatus,
+                  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-gray-600 font-mono opacity-50", children: [
+              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: [
                 "Session ID: ",
                 sessionId
-              ] }) })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-6 py-2 flex justify-center items-center gap-1.5 text-foreground opacity-90", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "span",
+                  {
+                    className: "text-[10px] leading-[14px] font-medium",
+                    style: {
+                      fontFamily: "Inter, system-ui, -apple-system, sans-serif"
+                    },
+                    children: "Powered by"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(EkaCareLogo, {})
+              ] })
             ] })
           ] })
         ]
@@ -30316,6 +30754,7 @@ var MedAssistWidget = (function(exports) {
       updateMessageInSession,
       setInitialMessage,
       userId,
+      setUserId,
       fileUploadPerSession,
       setFileUploadPerSession
     } = useMedAssistStore();
@@ -30332,10 +30771,37 @@ var MedAssistWidget = (function(exports) {
     reactExports.useEffect(() => {
       if (sessionId) {
         const messages2 = getMessagesForSession(sessionId) || [];
-        setMessages(messages2);
+        if (messages2.length <= 0 && initialMessage?.text) {
+          setMessages([{
+            id: Date.now().toString(),
+            content: initialMessage.text,
+            role: MessageSender.ASSISTANT,
+            timestamp: formatMessageTimestamp(Date.now()),
+            isStored: false,
+            ...initialMessage.suggestions?.length && {
+              toolEscalationData: {
+                tool_id: initialMessage.suggestions[0].value ?? null,
+                tool_name: "elicitation",
+                details: {
+                  component: distExports.SYNAPSE_COMPONENTS.PILL,
+                  input: {
+                    options: initialMessage.suggestions.map((suggestion) => ({
+                      id: suggestion.value || "",
+                      label: suggestion.label || "",
+                      value: suggestion.value || ""
+                    }))
+                  }
+                },
+                isResponded: false
+              }
+            }
+          }]);
+        } else {
+          setMessages(messages2);
+        }
         setInitialPrompts([]);
       }
-    }, [sessionId]);
+    }, [sessionId, initialMessage]);
     reactExports.useEffect(() => {
       setIsReady(false);
       if (!agentId) {
@@ -30515,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);
@@ -30583,6 +31052,7 @@ var MedAssistWidget = (function(exports) {
       synapseRef.current?.on(distExports.SYNAPSE_REALTIME_EVENTS.END_OF_STREAM, () => {
         setIsStreaming(false);
         setProgressMessage(null);
+        setIsWaitingForResponse(false);
       });
       synapseRef.current?.on(distExports.SYNAPSE_REALTIME_EVENTS.CONNECTED, () => {
         resetConnectionStates();
@@ -31039,6 +31509,16 @@ var MedAssistWidget = (function(exports) {
       );
       setInitialPrompts([{ role: "user", text: message }, { role: "assistant", text: selectedMessage.response }]);
     };
+    const handleToggleFeedback = async (feedback, messageId, reason) => {
+      if (!isConnected()) {
+        return;
+      }
+      try {
+        await synapseRef.current?.sendFeedback(messageId, feedback, reason);
+      } catch (error) {
+        console.log("Error sending feedback", error);
+      }
+    };
     return {
       sendMessage,
       startSession,
@@ -31052,11 +31532,11 @@ var MedAssistWidget = (function(exports) {
       isValidFile,
       handleStartNewConnection,
       callTool,
-      handleInitialTaskClick
+      handleInitialTaskClick,
+      handleToggleFeedback
     };
   };
   const ChatMessages$2 = reactExports.lazy(() => Promise.resolve().then(() => ChatMessages$1));
-  const EmptyChatState$2 = reactExports.lazy(() => Promise.resolve().then(() => EmptyChatState$1));
   const ConnectionStatusBanner = reactExports.lazy(
     () => Promise.resolve().then(() => ConnectionStatus$1).then((module) => ({
       default: module.ConnectionStatus
@@ -31086,10 +31566,8 @@ var MedAssistWidget = (function(exports) {
       isWaitingForResponse,
       isStreaming,
       setError,
-      initialMessage,
+      // initialMessage,
       sessionId,
-      setUserId,
-      userId,
       setContext
     } = useMedAssistStore();
     const {
@@ -31104,7 +31582,8 @@ var MedAssistWidget = (function(exports) {
       handleStartNewConnection,
       isValidFile,
       callTool,
-      handleInitialTaskClick
+      // handleInitialTaskClick,
+      handleToggleFeedback
     } = useChat({
       environment: "production",
       baseUrl: config.environment === "development" && config.baseUrl ? config.baseUrl : void 0,
@@ -31117,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);
       }
@@ -31144,17 +31619,24 @@ var MedAssistWidget = (function(exports) {
         setShowScrollButton(false);
       }
     };
-    reactExports.useEffect(() => {
-      scrollToBottom();
-    }, [incomingMessages, isStreaming]);
     const inConversation = incomingMessages.length > 0;
+    const isFirstMessage = incomingMessages.length === 1;
+    reactExports.useEffect(() => {
+      if (isFirstMessage) {
+        setTimeout(() => {
+          scrollToBottom();
+        }, 0);
+      } else {
+        scrollToBottom();
+      }
+    }, [incomingMessages, isStreaming, isFirstMessage]);
     const isConnected = connectionStatus === distExports.ConnectionStatus.CONNECTED;
     const isComposerDisabled = loading || !isConnected || isWaitingForResponse || isStreaming;
     const isConnectionDisabled = loading || !isConnected;
     const recordingStatusPlaceholder = reactExports.useMemo(() => {
       return recordingStatus === AudioRecordingStatus.IDLE ? null : recordingStatus === AudioRecordingStatus.LISTENING ? "Listening..." : recordingStatus === AudioRecordingStatus.PROCESSING ? "Processing..." : recordingStatus === AudioRecordingStatus.TRANSCRIBING ? "Transcribing..." : null;
     }, [recordingStatus]);
-    const composerPlaceholder = isConnectionDisabled ? "Connecting..." : recordingStatusPlaceholder && recordingStatus !== AudioRecordingStatus.IDLE ? recordingStatusPlaceholder : isWaitingForResponse || isStreaming ? "Please wait for the response..." : "Ask me anything…";
+    const composerPlaceholder = isConnectionDisabled ? "Connecting..." : recordingStatusPlaceholder && recordingStatus !== AudioRecordingStatus.IDLE ? recordingStatusPlaceholder : isWaitingForResponse || isStreaming ? "Please wait for the response..." : "Type a reply…";
     const handleSendMessage = async () => {
       if (isComposerDisabled) {
         return;
@@ -31180,10 +31662,6 @@ var MedAssistWidget = (function(exports) {
         }, 100);
       }
     };
-    const handleTaskClick = async (task) => {
-      if (!task) return;
-      await handleInitialTaskClick(task);
-    };
     const handleFileChange = (files) => {
       if (files && files.length > 0) {
         const validFiles = files.filter((file) => {
@@ -31247,11 +31725,13 @@ var MedAssistWidget = (function(exports) {
         isOpen,
         onClose: config.onClose,
         title: config.title,
+        titleImg: config.theme?.titleImg,
         iconUrl: config.iconUrl,
         onStartNewSession: () => startSession(true),
         sessionId,
         environment: config.environment,
         displayMode: config.displayMode ?? "widget",
+        theme: config.theme,
         chatComposer: {
           value: inputValue,
           onChange: setInputValue,
@@ -31264,46 +31744,61 @@ 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: "flex-1 flex flex-col min-h-0 overflow-hidden bg-white backdrop-blur-2xl relative", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { ref: scrollAreaRef, className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
+        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(
+            ScrollArea,
             {
+              ref: scrollAreaRef,
               className: cn(
-                "transition-all duration-300",
-                inConversation ? "p-4 space-y-3" : "p-6 space-y-6"
+                "flex-1 min-h-0",
+                isFirstMessage ? "[&>[data-radix-scroll-area-viewport]]:flex [&>[data-radix-scroll-area-viewport]]:flex-col [&>[data-radix-scroll-area-viewport]]:justify-end [&>[data-radix-scroll-area-viewport]]:min-h-full" : ""
               ),
-              children: [
-                !inConversation && initialMessage?.text ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  EmptyChatState$2,
-                  {
-                    profile: config.context?.profile,
-                    tasks: initialMessage.suggestions,
-                    initialPrompt: initialMessage.text,
-                    onTaskClick: handleTaskClick,
-                    disabled: isComposerDisabled
-                  }
-                ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  ChatMessages$2,
-                  {
-                    messages: incomingMessages,
-                    onSendMessage: sendMessage,
-                    iconUrl: config.iconUrl,
-                    callTool
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: messagesEndRef })
-              ]
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "transition-all duration-300 min-w-0 overflow-x-hidden",
+                    inConversation ? "p-4 space-y-3" : "p-4 space-y-4"
+                  ),
+                  children: [
+                    isFirstMessage && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-[var(--color-muted-foreground)] text-center mb-2", children: "Just now" }),
+                    !isFirstMessage && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-[var(--color-muted-foreground)] text-center", children: (() => {
+                      const now = /* @__PURE__ */ new Date();
+                      return now.toLocaleString("en-US", {
+                        weekday: "long",
+                        // month: "short",
+                        // day: "numeric",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                        hour12: true
+                      });
+                    })() }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      ChatMessages$2,
+                      {
+                        messages: incomingMessages,
+                        onSendMessage: sendMessage,
+                        iconUrl: config.iconUrl,
+                        callTool,
+                        onToggleFeedback: handleToggleFeedback
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: messagesEndRef })
+                  ]
+                }
+              )
             }
-          ) }),
+          ),
           showScrollButton && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-[10px] left-1/2 transform -translate-x-1/2 z-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Button,
             {
               onClick: scrollToBottom,
               size: "icon",
-              className: "h-10 w-10 rounded-full bg-white/90 backdrop-blur-sm shadow-lg border border-lavender-200/60 hover:bg-white hover:shadow-xl transition-all duration-200",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-5 h-5 text-slate-700" })
+              className: "h-10 w-10 rounded-full bg-surface/90 backdrop-blur-sm shadow-lg border border-border-subtle hover:bg-surface hover:shadow-xl transition-all duration-200",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-5 h-5 text-text-primary" })
             }
           ) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -31324,13 +31819,13 @@ var MedAssistWidget = (function(exports) {
     );
   }
   function WidgetContentFallback() {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden bg-white backdrop-blur-2xl animate-pulse", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden bg-surface backdrop-blur-2xl animate-pulse", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 p-6 space-y-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-16 bg-gray-100 rounded-2xl" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-16 bg-gray-100 rounded-2xl" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-16 bg-gray-100 rounded-2xl" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-16 bg-surface/80 rounded-2xl border border-border-subtle/50" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-16 bg-surface/80 rounded-2xl border border-border-subtle/50" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-16 bg-surface/80 rounded-2xl border border-border-subtle/50" })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-24 border-t border-gray-100 bg-gray-50" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-24 border-t border-border-subtle bg-surface/80" })
     ] });
   }
   function App({ agentId, config }) {
@@ -31347,7 +31842,14 @@ var MedAssistWidget = (function(exports) {
       {
         isOpen,
         agentId,
-        config: { ...config, environment: config.environment ?? "production", onClose: handleClose, title: config.title ?? "Medi Clinic", iconUrl: config.iconUrl ?? "https://cdn.eka.care/bot-icon.svg" }
+        config: {
+          ...config,
+          environment: config.environment ?? "production",
+          onClose: handleClose,
+          title: config.title ?? "Medi Clinic",
+          iconUrl: config.iconUrl ?? "https://cdn.eka.care/bot-icon.svg",
+          theme: config.theme
+        }
       }
     );
   }
@@ -31395,8 +31897,8 @@ var MedAssistWidget = (function(exports) {
     }, [file]);
     const getFileTypeColor = () => {
       if (isImage2) return "text-green-600";
-      if (isPDF) return "text-gray-600";
-      return "text-gray-600";
+      if (isPDF) return "text-text-secondary";
+      return "text-text-secondary";
     };
     const formatFileSize = (bytes) => {
       if (bytes === 0) return "0 B";
@@ -31493,6 +31995,9 @@ var MedAssistWidget = (function(exports) {
       }) })
     ] });
   }
+  const SendIcon = ({ className }) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M1.46875 0.09375L16.3125 6.9375C16.75 7.125 17 7.53125 17 8C17 8.46875 16.75 8.875 16.3125 9.0625L1.46875 15.9062C1.3125 15.9688 1.1875 16 1.03125 16C0.46875 16 0 15.5312 0 14.9688C0 14.8125 0.03125 14.6875 0.09375 14.5625L2.34375 9.5C2.5 9.15625 2.8125 8.9375 3.15625 8.90625L8.0625 8.46875C8.3125 8.46875 8.5 8.25 8.5 8C8.5 7.75 8.3125 7.5625 8.0625 7.53125L3.15625 7.09375C2.8125 7.0625 2.5 6.84375 2.34375 6.5L0.09375 1.4375C0.03125 1.3125 0 1.1875 0 1.03125C0 0.46875 0.46875 0 1.03125 0C1.1875 0 1.3125 0.03125 1.46875 0.09375Z", fill: "currentColor" }) });
+  };
   function ChatComposer({
     value,
     onChange,
@@ -31506,15 +32011,19 @@ var MedAssistWidget = (function(exports) {
     isDisabled,
     placeholder,
     isMobile,
-    recordingStatus
+    recordingStatus,
+    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 ",
-      isRecording ? "bg-gradient-to-r from-rose-400 via-lavender-500 to-indigo-500 text-white ring-2 ring-white/60 animate-pulse shadow-[0_0_20px_rgba(139,92,246,0.45)]" : isMicDisabled ? "text-lavender-300 cursor-not-allowed shadow-none" : "text-lavender-600 hover:bg-gray-100"
+      isRecording ? "bg-gradient-to-r from-rose-400 via-primary to-indigo-500 text-white ring-2 ring-white/60 animate-pulse shadow-[0_0_20px_rgba(139,92,246,0.45)]" : isMicDisabled ? "text-primary/50 cursor-not-allowed shadow-none" : "text-foreground hover:bg-secondary"
     );
     const handleFileChange = (e) => {
       const files = Array.from(e.target.files || []);
@@ -31561,8 +32070,8 @@ var MedAssistWidget = (function(exports) {
         textareaRef.current?.focus();
       }
     }, [isDisabled]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-white/20 bg-white/70 backdrop-blur-xl px-4 py-2", children: [
-      hasAttachment && attachmentFiles.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2 pb-2 border-b border-white/20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-2 py-2", children: [
+      hasAttachment && attachmentFiles.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2 pb-2 border-b border-border-subtle", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         FilePreviewList,
         {
           files: attachmentFiles,
@@ -31585,94 +32094,106 @@ var MedAssistWidget = (function(exports) {
           "aria-label": "Attach file"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: cn(
-            "flex items-center gap-2 bg-white/70 backdrop-blur rounded-xl px-4 py-2 shadow-md focus-within:border-lavender-100/50 focus-within:ring-2 focus-within:ring-lavender-400/50 transition-all",
-            isRecording || hasAttachment ? "ring-2 ring-lavender-200/40" : "ring-2 ring-lavender-300/40 backdrop-blur-xl",
-            isDisabled && "opacity-60"
-          ),
-          children: [
-            hasAttachment && attachmentFiles.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-lavender-600 mr-2", children: [
-              attachmentFiles.length,
-              " file(s)"
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Textarea,
-              {
-                ref: textareaRef,
-                onInput: handleTextareaInput,
-                placeholder,
-                value,
-                onChange: (e) => onChange(e.target.value),
-                rows: 1,
-                maxLength: 1e3,
-                autoFocus: !isDisabled,
-                style: {
-                  wordBreak: "break-word",
-                  overflowWrap: "anywhere",
-                  minHeight: "40px",
-                  maxHeight: "120px",
-                  fontSize: window.innerWidth <= 768 ? "16px" : "14px"
-                  // Prevent iOS zoom
-                },
-                onKeyPress: handleKeyPress,
-                disabled: isDisabled,
-                title: "Enter your message",
-                className: "flex-1 border-0 outline-none focus-visible:ring-0 focus-visible:ring-offset-0 text-sm !placeholder:text-gray-400 bg-transparent disabled:cursor-not-allowed rounded-none break-words overflow-wrap-anywhere whitespace-pre-wrap"
-              }
-            ),
-            recordingStatus === AudioRecordingStatus.IDLE && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "icon",
-                onClick: handleAttachmentClick,
-                disabled: isDisabled,
-                className: `rounded-full transition-all ${hasAttachment ? "bg-lavender-200/30 text-lavender-600 hover:bg-lavender-200/40" : "hover:bg-gray-100 text-lavender-600 hover:text-gray-700"}`,
-                title: "Attach file",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Paperclip, { className: "w-5 h-5" })
-              }
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+        showFileAttachment && recordingStatus === AudioRecordingStatus.IDLE && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            onClick: handleAttachmentClick,
+            disabled: isDisabled,
+            className: cn(
+              "rounded-full transition-all shrink-0",
+              hasAttachment ? "bg-primary text-foreground hover:bg-primary/15" : "hover:bg-secondary text-foreground"
             ),
-            isRecording ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "icon",
-                onClick: onRecording,
-                className: "rounded-full bg-gradient-to-r from-red-400 to-rose-500 text-white hover:from-red-500 hover:to-rose-600 shadow-lg transition-all duration-200 hover:scale-105 active:scale-95",
-                title: "Stop recording",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Square, { className: "w-4 h-4" })
-              }
-            ) : !showSendButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "icon",
-                onClick: onRecording,
-                disabled: isMicDisabled,
-                className: micButtonClasses,
-                title: "Start recording",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mic, { className: "w-5 h-5" })
-              }
+            title: "Attach file",
+            "aria-label": "Attach file",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { className: "w-5 h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-1 rounded-full px-2 py-2 flex-1 min-w-0",
+              isDisabled && "opacity-60",
+              // if text color is white, use bg-black-100/10, otherwise use bg-white-100/10
+              theme?.textColor === "white" ? "bg-white-100" : "bg-black-100"
             ),
-            showSendButton && !isDisabled && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
-              {
-                type: "button",
-                size: "icon",
-                onClick: onSend,
-                className: "h-10 w-10 bg-gradient-to-r from-lavender-400 to-lavender-500 hover:from-lavender-500 hover:to-lavender-600 rounded-full text-white transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105 active:scale-95",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-4 h-4" })
-              }
-            )
-          ]
-        }
-      )
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 relative min-w-0", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Textarea,
+                {
+                  ref: textareaRef,
+                  onInput: handleTextareaInput,
+                  placeholder,
+                  value,
+                  onChange: (e) => onChange(e.target.value),
+                  rows: 1,
+                  maxLength: 1e3,
+                  autoFocus: !isDisabled && !isMobile,
+                  style: {
+                    wordBreak: "break-word",
+                    overflowWrap: "anywhere",
+                    minHeight: "40px",
+                    maxHeight: "120px",
+                    fontSize: isMobile ? "16px" : "14px",
+                    // Prevent iOS zoom
+                    lineHeight: "1.5"
+                  },
+                  onKeyPress: handleKeyPress,
+                  disabled: isDisabled,
+                  title: "Enter your message",
+                  "aria-label": "Enter your message",
+                  className: "w-full shadow-none border-0 outline-none focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-muted-foreground bg-transparent disabled:cursor-not-allowed rounded-none break-words overflow-wrap-anywhere whitespace-pre-wrap text-foreground resize-none pr-11"
+                }
+              ),
+              isRecording ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: onRecording,
+                  className: "absolute right-0.5 top-1/2 -translate-y-1/2 rounded-full bg-gradient-to-r from-red-400 to-rose-500 text-white hover:from-red-500 hover:to-rose-600 shadow-lg transition-all duration-200 hover:scale-105 active:scale-95 shrink-0",
+                  title: "Stop recording",
+                  "aria-label": "Stop recording",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Square, { className: "w-4 h-4" })
+                }
+              ) : showMic && !showSendButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: onRecording,
+                  disabled: isMicDisabled,
+                  className: cn(
+                    "absolute right-0.5 top-1/2 -translate-y-1/2 shrink-0",
+                    micButtonClasses
+                  ),
+                  title: "Start recording",
+                  "aria-label": "Start recording",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mic, { className: "w-5 h-5" })
+                }
+              ),
+              showSendButton && !isDisabled && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "icon",
+                  onClick: onSend,
+                  className: "absolute right-0.5 top-1/2 -translate-y-1/2 h-10 w-10 bg-primary hover:bg-primary/90 rounded-full text-primary-foreground transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 shrink-0",
+                  title: "Send message",
+                  "aria-label": "Send message",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(SendIcon, { className: "w-4 h-4 text-primary-foreground" })
+                }
+              )
+            ] })
+          }
+        )
+      ] })
     ] });
   }
   const ChatComposer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -38470,8 +38991,9 @@ var MedAssistWidget = (function(exports) {
   function code(state, node2) {
     const value = node2.value ? node2.value + "\n" : "";
     const properties = {};
-    if (node2.lang) {
-      properties.className = ["language-" + node2.lang];
+    const language = node2.lang ? node2.lang.split(/\s+/) : [];
+    if (language.length > 0) {
+      properties.className = ["language-" + language[0]];
     }
     let result = {
       type: "element",
@@ -41323,14 +41845,14 @@ var MedAssistWidget = (function(exports) {
         ref: containerRef,
         onClick: disabled ? void 0 : onClick,
         className: cn(
-          "inline-flex items-center gap-2 rounded-full border border-lavender-200/60 bg-white/80 px-3 py-1 shadow-sm text-xs text-slate-700 hover: cursor-pointer",
+          "inline-flex items-center gap-2 rounded-lg border border-primary bg-popover px-3 py-2 shadow-sm text-xs text-primary hover:bg-primary hover:text-primary-foreground cursor-pointer transition-colors",
           className,
           disabled ? "opacity-50 cursor-not-allowed" : ""
         ),
         style: { maxWidth },
         title: text2,
         children: [
-          icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lavender-500", children: icon }),
+          icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-primary", children: icon }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pill-marquee-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
@@ -41743,7 +42265,7 @@ var MedAssistWidget = (function(exports) {
     className,
     required = true,
     maxSelections,
-    error,
+    // error,
     disabled
   }) {
     const extraOption = additionalOption ? {
@@ -41758,7 +42280,6 @@ var MedAssistWidget = (function(exports) {
     const handleExtraOptionChange = (checked) => {
       if (!extraOption) return selectedValues;
       if (additionalOption === "none_of_the_above") {
-        console.log("extraOption.value", extraOption.value);
         return checked ? [extraOption.value] : [];
       }
       if (additionalOption === "all_of_the_above") {
@@ -41791,40 +42312,30 @@ var MedAssistWidget = (function(exports) {
       if (!isValidSelection(newSelection)) {
         return;
       }
-      console.log("newSelection", newSelection);
       onSelectionChange(newSelection);
     };
-    const isValid = !required || selectedValues.length > 0;
     const currentNonExtraSelections = extraOption ? selectedValues.filter((value) => value !== extraOption.value).length : selectedValues.length;
     if (!options.length) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         className: cn(
-          // Container styling matching the image and other components
-          "bg-gray-50",
-          // Light grey background like the image
-          "rounded-lg",
-          // Rounded corners
-          "p-4",
-          // Padding inside
-          "border border-gray-200",
-          // Subtle border
           className
         ),
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
             options.map((option) => {
               const isDisabled = disabled || maxSelections && currentNonExtraSelections >= maxSelections && !selectedValues.includes(option.value);
+              let isSelected = selectedValues.includes(option.value);
               return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Checkbox,
                   {
                     id: option.id,
-                    checked: !!selectedValues.includes(option.value),
+                    checked: isSelected,
                     disabled: !!isDisabled,
                     onCheckedChange: (checked) => handleOptionChange(option.value, Boolean(checked)),
-                    className: "mt-0.5 border border-muted-foreground"
+                    className: "mt-0.5 border border-muted-foreground text-primary-foreground"
                   }
                 ),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -41833,8 +42344,8 @@ var MedAssistWidget = (function(exports) {
                     htmlFor: option.id,
                     className: cn(
                       // Using the same muted color scheme as your other components
-                      "text-sm font-medium leading-none cursor-pointer",
-                      isDisabled ? "text-muted-foreground cursor-not-allowed" : "text-secondary-foreground"
+                      "text-sm font-normal leading-4 cursor-pointer",
+                      isDisabled ? "text-muted-foreground cursor-not-allowed" : isSelected ? "text-primary" : "text-secondary-foreground"
                       // Dark grey like other components
                     ),
                     children: option.label
@@ -41843,7 +42354,7 @@ var MedAssistWidget = (function(exports) {
               ] }, option.id);
             }),
             extraOption && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-gray-300 my-3" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-border-medium my-3" }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Checkbox,
@@ -41865,8 +42376,6 @@ var MedAssistWidget = (function(exports) {
               ] })
             ] })
           ] }),
-          error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-red-500 mt-3", children: error }),
-          required && !isValid && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-red-500 mt-3", children: "Please select at least one option" }),
           maxSelections && currentNonExtraSelections >= maxSelections && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-blue-600 mt-3", children: maxSelections === 1 ? "You can select only 1 option" : `Maximum ${maxSelections} selections allowed` })
         ]
       }
@@ -42150,11 +42659,11 @@ var MedAssistWidget = (function(exports) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Card,
       {
-        className: "max-w-md rounded-xl border-lavender-200 shadow-md p-0 bg-white overflow-hidden",
+        className: "max-w-md rounded-xl border-primary/20 shadow-md p-0 bg-surface overflow-hidden",
         "aria-label": "Appointment card",
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "flex flex-row items-center justify-between gap-3 bg-lavender-50 rounded-t-xl p-4 border-b border-lavender-100 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-            doctorDetails.profile_pic && /* @__PURE__ */ jsxRuntimeExports.jsxs(Avatar, { className: "h-12 w-12 ring-2 ring-lavender-200", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "flex flex-row items-center justify-between gap-3 bg-secondary rounded-t-xl p-4 border-b border-border-subtle overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+            doctorDetails.profile_pic && /* @__PURE__ */ jsxRuntimeExports.jsxs(Avatar, { className: "h-12 w-12 ring-2 ring-primary/20", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 AvatarImage,
                 {
@@ -42163,7 +42672,7 @@ var MedAssistWidget = (function(exports) {
                   crossOrigin: "anonymous"
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(AvatarFallback, { className: "bg-lavender-100 text-lavender-700", children: getInitials(doctorDetails.name) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(AvatarFallback, { className: "bg-secondary text-primary", children: getInitials(doctorDetails.name) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-baseline gap-2", children: [
@@ -42174,7 +42683,7 @@ var MedAssistWidget = (function(exports) {
                     href: doctorDetails.profile_link,
                     target: "_blank",
                     rel: "noreferrer",
-                    className: "text-xs font-semibold text-lavender-600 hover:text-lavender-700 hover:underline",
+                    className: "text-xs font-semibold text-primary hover:text-primary/90 hover:underline",
                     children: "View profile"
                   }
                 ) : null
@@ -42189,26 +42698,26 @@ var MedAssistWidget = (function(exports) {
             ] })
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "px-4 py-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-2 border-b border-lavender-100 pb-3", children: [
-              doctorDetails?.timings && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 text-sm text-slate-900", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-2 border-b border-border-subtle pb-3", children: [
+              doctorDetails?.timings && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 text-sm text-text-primary", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Clock,
                   {
-                    className: "h-4 w-4 text-lavender-600 mt-0.5 flex-shrink-0",
+                    className: "h-4 w-4 text-primary mt-0.5 flex-shrink-0",
                     "aria-hidden": true
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-slate-600 text-xs", children: doctorDetails?.timings })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-text-secondary text-xs", children: doctorDetails?.timings })
               ] }),
-              doctorDetails.languages ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-slate-900", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Languages, { className: "h-4 w-4 text-lavender-600", "aria-hidden": true }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-slate-600", children: doctorDetails.languages })
+              doctorDetails.languages ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-text-primary", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Languages, { className: "h-4 w-4 text-primary", "aria-hidden": true }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-text-secondary", children: doctorDetails.languages })
               ] }) : null,
-              doctorDetails?.hospitals && doctorDetails.hospitals?.length > 1 ? selectedHospital && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-slate-900", children: [
+              doctorDetails?.hospitals && doctorDetails.hospitals?.length > 1 ? selectedHospital && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-text-primary", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Building2,
                   {
-                    className: "h-4 w-4 text-lavender-600",
+                    className: "h-4 w-4 text-primary",
                     "aria-hidden": true
                   }
                 ),
@@ -42222,15 +42731,15 @@ var MedAssistWidget = (function(exports) {
                     value: selectedHospital
                   }
                 )
-              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-slate-900", children: [
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-text-primary", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Building2,
                   {
-                    className: "h-4 w-4 text-lavender-600",
+                    className: "h-4 w-4 text-primary",
                     "aria-hidden": true
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-slate-600", children: doctorDetails.hospitals?.[0].name || "" })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-text-secondary", children: doctorDetails.hospitals?.[0].name || "" })
               ] })
             ] }),
             availabilityForSelectedHospital.length > 0 || loadingAvailabilityDates ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -42242,7 +42751,7 @@ var MedAssistWidget = (function(exports) {
                 "aria-controls": "ap-slots",
                 onClick: () => setOpen((o) => !o),
                 disabled: loadingAvailabilityDates,
-                className: "mt-3 w-full border-lavender-500 text-lavender-600 hover:bg-lavender-50 hover:border-lavender-600 disabled:opacity-50",
+                className: "mt-3 w-full border-primary text-primary hover:bg-secondary hover:border-primary/80 disabled:opacity-50",
                 children: loadingAvailabilityDates ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" }),
                   "Loading availability..."
@@ -42257,7 +42766,7 @@ var MedAssistWidget = (function(exports) {
                   )
                 ] })
               }
-            ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3 w-full flex items-center justify-center py-3 px-4 bg-lavender-50 border border-lavender-200 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-slate-600 font-medium", children: "No details available" }) }),
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3 w-full flex items-center justify-center py-3 px-4 bg-secondary border border-primary/20 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-slate-600 font-medium", children: "No details available" }) }),
             open && availabilityForSelectedHospital.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
@@ -42276,7 +42785,7 @@ var MedAssistWidget = (function(exports) {
                         onClick: prevCalendar,
                         "aria-label": "Previous 3 days",
                         disabled: disabled || !canGoPrevious,
-                        className: "h-8 w-8 flex-shrink-0 rounded-md border-lavender-200 bg-white text-lavender-700 hover:bg-lavender-50 hover:border-lavender-300 disabled:opacity-50",
+                        className: "h-8 w-8 flex-shrink-0 rounded-md border-primary/20 bg-surface text-primary hover:bg-secondary hover:border-primary/30 disabled:opacity-50",
                         children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "h-4 w-4" })
                       }
                     ),
@@ -42293,9 +42802,9 @@ var MedAssistWidget = (function(exports) {
                           "aria-current": isSelected ? "date" : void 0,
                           className: cn(
                             "flex flex-col items-center justify-center h-12 rounded-lg border-2 p-2 gap-0.5 min-w-0 transition-all",
-                            isSelected && "border-lavender-500 ring-2 ring-lavender-200 bg-lavender-50 shadow-sm",
-                            isDisabled && "border-slate-200 bg-slate-50 text-slate-300 cursor-not-allowed",
-                            !isSelected && !isDisabled && "border-slate-200 bg-white hover:bg-lavender-50 hover:border-lavender-300"
+                            isSelected && "border-primary ring-2 ring-primary/20 bg-secondary shadow-sm",
+                            isDisabled && "border-border-subtle bg-surface-secondary text-text-tertiary cursor-not-allowed",
+                            !isSelected && !isDisabled && "border-border-subtle bg-surface hover:bg-secondary hover:border-primary/30"
                           ),
                           children: [
                             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -42303,9 +42812,9 @@ var MedAssistWidget = (function(exports) {
                               {
                                 className: cn(
                                   "text-[10px] tracking-wide w-full text-center font-medium",
-                                  isSelected && "text-lavender-700",
-                                  isDisabled && "text-slate-300",
-                                  !isSelected && !isDisabled && "text-slate-600"
+                                  isSelected && "text-primary",
+                                  isDisabled && "text-text-tertiary",
+                                  !isSelected && !isDisabled && "text-text-secondary"
                                 ),
                                 children: day.weekday
                               }
@@ -42315,9 +42824,9 @@ var MedAssistWidget = (function(exports) {
                               {
                                 className: cn(
                                   "text-xs font-bold w-full text-center",
-                                  isSelected && "text-lavender-700",
-                                  isDisabled && "text-slate-300",
-                                  !isSelected && !isDisabled && "text-slate-900"
+                                  isSelected && "text-primary",
+                                  isDisabled && "text-text-tertiary",
+                                  !isSelected && !isDisabled && "text-text-primary"
                                 ),
                                 children: day.dayNum
                               }
@@ -42336,14 +42845,14 @@ var MedAssistWidget = (function(exports) {
                         onClick: nextCalendar,
                         "aria-label": "Next 3 days",
                         disabled: disabled || !canGoNext,
-                        className: "h-8 w-8 flex-shrink-0 rounded-md border-lavender-200 bg-white text-lavender-700 hover:bg-lavender-50 hover:border-lavender-300 disabled:opacity-50",
+                        className: "h-8 w-8 flex-shrink-0 rounded-md border-primary/20 bg-surface text-primary hover:bg-secondary hover:border-primary/30 disabled:opacity-50",
                         children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-4 w-4" })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-0.5 py-3", children: loadingAvailabilitySlots ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center py-4", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-lavender-600 mr-2" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-slate-600", children: "Loading slots..." })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-primary mr-2" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-text-secondary", children: "Loading slots..." })
                   ] }) : selectedDateData?.slots?.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-2 max-h-48 overflow-y-auto", children: selectedDateData.slots.map((t, index2) => {
                     const selected = selectedSlot === t;
                     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -42356,7 +42865,7 @@ var MedAssistWidget = (function(exports) {
                         disabled,
                         className: cn(
                           "inline-flex h-9 items-center justify-center gap-2 rounded-lg px-3 text-xs font-semibold transition-all",
-                          selected ? "border-lavender-600 bg-lavender-600 text-white shadow-sm hover:bg-lavender-700 hover:border-lavender-700" : "border-lavender-200 bg-white text-slate-900 hover:bg-lavender-50 hover:border-lavender-300"
+                          selected ? "border-primary bg-primary text-white shadow-sm hover:bg-primary/90 hover:border-primary/90" : "border-primary/20 bg-surface text-text-primary hover:bg-secondary hover:border-primary/30"
                         ),
                         children: [
                           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -42364,7 +42873,7 @@ var MedAssistWidget = (function(exports) {
                             {
                               className: cn(
                                 "h-3.5 w-3.5 flex-shrink-0",
-                                selected ? "text-white" : "text-lavender-600"
+                                selected ? "text-white" : "text-primary"
                               )
                             }
                           ),
@@ -42373,7 +42882,7 @@ var MedAssistWidget = (function(exports) {
                       },
                       t || `slot-${index2}`
                     );
-                  }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "px-1 text-sm text-slate-600", children: "No slots available for this day." }) }),
+                  }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "px-1 text-sm text-text-secondary", children: "No slots available for this day." }) }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-0.5 pb-1.5", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                     Button,
                     {
@@ -42381,14 +42890,14 @@ var MedAssistWidget = (function(exports) {
                       onClick: handleBook,
                       disabled: !selectedSlot || disabled,
                       "aria-disabled": !selectedSlot,
-                      className: "w-full h-10 gap-2 bg-lavender-600 text-white hover:bg-lavender-700 disabled:opacity-60 shadow-sm font-semibold",
+                      className: "w-full h-10 gap-2 bg-primary text-white hover:bg-primary/90 disabled:opacity-60 shadow-sm font-semibold",
                       children: [
                         "Book appointment",
                         /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { className: "h-4 w-4" })
                       ]
                     }
                   ) })
-                ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-1 pb-2 pt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-slate-600", children: error ? error : "No availability provided." }) })
+                ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-1 pb-2 pt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-text-secondary", children: error ? error : "No availability provided." }) })
               }
             )
           ] })
@@ -42485,11 +42994,11 @@ var MedAssistWidget = (function(exports) {
     if (loading && loadedCount === 0) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--color-primary)] mx-auto mb-3" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "Loading doctor details..." })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-text-tertiary", children: "Loading doctor details..." })
       ] }) });
     }
     if (loadedCount === 0) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "No doctor details available." }) });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-text-tertiary", children: "No doctor details available." }) });
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: doctorAvailabilities.map(
@@ -42534,21 +43043,196 @@ var MedAssistWidget = (function(exports) {
       ] })
     ] });
   }
+  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 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(
+      "img",
+      {
+        src: cdnUrl,
+        alt: "",
+        className,
+        width: size,
+        height: size,
+        "aria-hidden": true,
+        onError: (e) => {
+          e.target.style.display = "none";
+        }
+      }
+    );
+  }
+  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 (!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 ?? "flex flex-col gap-3 mt-3", children: cards.map((card, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      GenericCard,
+      {
+        card,
+        onSendMessage,
+        disabled
+      },
+      index2
+    )) });
+  }
   function ChatMessage({
     role,
     content: content2,
-    timestamp,
-    iconUrl,
+    // timestamp,
     files,
     isLastMessage,
     progressMessage,
     toolEscalationData,
     toolCallStatus,
     callTool,
-    onSendMessage
+    onSendMessage,
+    onToggleFeedback
   }) {
     const isUser = role === "user";
     const [selectedValues, setSelectedValues] = reactExports.useState([]);
+    const [userFeedback, setUserFeedback] = reactExports.useState(distExports.USER_FEEDBACK.NONE);
     const { isStreaming } = useMedAssistStore();
     const handlePillClick = async (choice) => {
       const messageId = Date.now().toString();
@@ -42564,6 +43248,10 @@ var MedAssistWidget = (function(exports) {
         toolCalled: true
       });
     };
+    const handleToggleFeedback = (feedback) => {
+      setUserFeedback(feedback);
+      onToggleFeedback(feedback);
+    };
     const handleMultiSelectChange = (values) => {
       setSelectedValues(values);
       console.log("Multi-select changed:", values);
@@ -42615,101 +43303,153 @@ var MedAssistWidget = (function(exports) {
         });
       }
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex", isUser ? "justify-end" : "justify-start"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: cn(
-          "flex gap-3",
-          isUser ? "flex-row-reverse" : "flex-row",
-          toolEscalationData?.details?.component === distExports.SYNAPSE_COMPONENTS.MULTI ? "max-w-md" : isUser ? "max-w-[60%]" : "max-w-xs"
-        ),
-        children: [
-          !isUser && /* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, { className: "w-8 h-8 bg-gradient-to-br from-lavender-400 to-lavender-500 text-white text-xs font-bold flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AvatarFallback, { className: "bg-transparent text-white text-xs font-bold", children: iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: iconUrl, alt: "Bot Icon", className: "w-full h-full" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { className: "w-full h-full" }) }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            Card,
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex", isUser ? "justify-end" : "justify-start"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: cn(
+            "flex gap-3",
+            isUser ? "flex-row-reverse" : "flex-row",
+            toolEscalationData?.details?.component === distExports.SYNAPSE_COMPONENTS.MULTI ? "max-w-md" : isUser ? "max-w-[60%]" : "max-w-xs"
+          ),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Card,
+              {
+                className: cn(
+                  "px-4 py-2 rounded-lg shadow-none break-words overflow-wrap-anywhere whitespace-pre-wrap",
+                  isUser ? "bg-primary text-primary-foreground shadow-sm" : cn(
+                    "text-foreground shadow-sm bg-botMessage blur-xs"
+                  ),
+                  toolEscalationData && "w-full"
+                ),
+                children: [
+                  toolCallStatus && !isUser && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground mb-2 pb-2 border-b border-border-subtle", children: toolCallStatus }),
+                  !toolCallStatus && progressMessage && !isUser && isLastMessage && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-muted-foreground pb-2", children: progressMessage }),
+                  content2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm markdown-content mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { children: `${content2} ${!isUser && isStreaming && isLastMessage ? "..." : ""}` }) }),
+                  files && files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FilePreviewList, { files, isPreview: false, className: "" }) }),
+                  progressMessage && !isUser && isLastMessage && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-muted-foreground", children: progressMessage })
+                ]
+              }
+            ),
+            !isUser && !isStreaming && isLastMessage && userFeedback === distExports.USER_FEEDBACK.NONE && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 self-start mt-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-6 w-6 p-0 hover:bg-muted text-muted-foreground",
+                  onClick: () => handleToggleFeedback(distExports.USER_FEEDBACK.LIKE),
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThumbsUp, { className: "h-3 w-3" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-6 w-6 p-0 hover:bg-muted text-muted-foreground",
+                  onClick: () => handleToggleFeedback(distExports.USER_FEEDBACK.DISLIKE),
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThumbsDown, { className: "h-3 w-3" })
+                }
+              )
+            ] }),
+            !isUser && !isStreaming && isLastMessage && userFeedback === distExports.USER_FEEDBACK.LIKE && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-6 w-6 p-0 self-start mt-1 hover:bg-muted text-primary",
+                disabled: true,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThumbsUp, { className: "h-3 w-3" })
+              }
+            ),
+            !isUser && !isStreaming && isLastMessage && userFeedback === distExports.USER_FEEDBACK.DISLIKE && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-6 w-6 p-0 self-start mt-1 hover:bg-muted text-primary",
+                disabled: true,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThumbsDown, { className: "h-3 w-3" })
+              }
+            )
+          ] })
+        }
+      ) }),
+      !toolEscalationData?.isResponded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end", children: [
+        toolEscalationData?.details?.component === distExports.SYNAPSE_COMPONENTS.PILL && toolEscalationData?.details?.input?.options && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2 mt-3", children: toolEscalationData.details?.input?.options.map(
+          (choice, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Pills,
+            {
+              disabled: toolEscalationData?.isResponded,
+              text: choice?.label || "",
+              onClick: () => handlePillClick(choice?.value || ""),
+              className: "cursor-pointer"
+            },
+            index2
+          )
+        ) }),
+        toolEscalationData?.details?.component === distExports.SYNAPSE_COMPONENTS.MULTI && toolEscalationData?.details?.input?.options && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 space-y-3 break-words overflow-wrap-anywhere whitespace-pre-wrap bg-popover border border-primary/40 rounded-xl p-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Select multiple options:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            MultiSelectGroup,
+            {
+              options: getMultiSelectOptions(),
+              selectedValues,
+              onSelectionChange: handleMultiSelectChange,
+              additionalOption: getAdditionalOption(),
+              disabled: toolEscalationData?.isResponded
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
             {
+              onClick: handleConfirm,
+              disabled: selectedValues.length === 0 || toolEscalationData?.isResponded,
               className: cn(
-                "px-4 py-2 rounded-2xl shadow-none break-words overflow-wrap-anywhere whitespace-pre-wrap",
-                isUser ? "bg-lavender-100/95 backdrop-blur-md text-slate-900 rounded-br-none border border-lavender-200/60" : "bg-white/80 backdrop-blur-md text-slate-800 shadow-sm rounded-bl-none border border-lavender-200/40",
-                toolEscalationData && "w-full"
+                "w-full rounded-lg px-4 py-2 text-sm font-medium transition-all",
+                "bg-primary hover:bg-primary/90 text-primary-foreground",
+                "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-secondary disabled:text-text-tertiary",
+                "shadow-sm hover:shadow-md active:scale-[0.98] "
               ),
-              children: [
-                toolCallStatus && !isUser && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-slate-500 mb-2 pb-2 border-b border-slate-200", children: toolCallStatus }),
-                !toolCallStatus && progressMessage && !isUser && isLastMessage && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-slate-500 pb-2", children: progressMessage }),
-                content2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm markdown-content mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { children: `${content2} ${!isUser && isStreaming && isLastMessage ? "..." : ""}` }) }),
-                files && files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FilePreviewList, { files, isPreview: false, className: "" }) }),
-                toolEscalationData?.details?.component === distExports.SYNAPSE_COMPONENTS.PILL && toolEscalationData?.details?.input?.options && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2 mt-3", children: toolEscalationData.details?.input?.options.map(
-                  (choice, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    Pills,
-                    {
-                      disabled: toolEscalationData?.isResponded,
-                      text: choice?.label || "",
-                      onClick: () => handlePillClick(choice?.value || ""),
-                      className: "cursor-pointer hover:bg-lavender-100/80 transition-colors"
-                    },
-                    index2
-                  )
-                ) }),
-                toolEscalationData?.details?.component === distExports.SYNAPSE_COMPONENTS.MULTI && toolEscalationData?.details?.input?.options && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 space-y-3 break-words overflow-wrap-anywhere whitespace-pre-wrap", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-gray-700 mb-2", children: "Select multiple options:" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    MultiSelectGroup,
-                    {
-                      options: getMultiSelectOptions(),
-                      selectedValues,
-                      onSelectionChange: handleMultiSelectChange,
-                      additionalOption: getAdditionalOption(),
-                      disabled: toolEscalationData?.isResponded
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    Button,
-                    {
-                      onClick: handleConfirm,
-                      disabled: selectedValues.length === 0 || toolEscalationData?.isResponded,
-                      className: cn(
-                        "w-full rounded-lg px-4 py-2 text-sm font-medium transition-all",
-                        "bg-blue-100 hover:bg-blue-200 text-blue-600 border border-blue-200",
-                        "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 disabled:border-gray-200",
-                        "shadow-sm hover:shadow-md active:scale-[0.98] "
-                      ),
-                      children: "Confirm"
-                    }
-                  )
-                ] }),
-                toolEscalationData?.details?.component === distExports.SYNAPSE_COMPONENTS.DOCTOR_CARD && toolEscalationData?.details?.input?.doctors && callTool ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  DoctorCardList,
-                  {
-                    doctorAvailabilities: toolEscalationData?.details?.input?.doctors,
-                    doctorDetails: toolEscalationData?.details?.input?.doctor_details,
-                    callTool,
-                    callbacks: toolEscalationData?.details?._meta?.callbacks,
-                    onBook: handleBook,
-                    disabled: toolEscalationData?.isResponded
-                  }
-                ) }) : null,
-                progressMessage && !isUser && isLastMessage && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-teal-600", children: progressMessage }),
-                timestamp && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "text-xs mt-2 text-right",
-                      isUser ? "text-slate-500" : "text-slate-500"
-                    ),
-                    children: timestamp
-                  }
-                )
-              ]
+              children: "Confirm"
             }
           )
-        ]
-      }
-    ) });
+        ] }),
+        toolEscalationData?.details?.component === distExports.SYNAPSE_COMPONENTS.DOCTOR_CARD && toolEscalationData?.details?.input?.doctors && callTool ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DoctorCardList,
+          {
+            doctorAvailabilities: toolEscalationData?.details?.input?.doctors,
+            doctorDetails: toolEscalationData?.details?.input?.doctor_details,
+            callTool,
+            callbacks: toolEscalationData?.details?._meta?.callbacks,
+            onBook: handleBook,
+            disabled: toolEscalationData?.isResponded
+          }
+        ) }) : null,
+        toolEscalationData?.details?.component === distExports.SYNAPSE_COMPONENTS.CARD && toolEscalationData?.details?.input?.cards && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          CardList,
+          {
+            cards: toolEscalationData.details.input.cards,
+            onSendMessage: async (message) => {
+              const messageId = Date.now().toString();
+              await onSendMessage({
+                message,
+                messageId,
+                toolCalled: true
+              });
+            },
+            disabled: toolEscalationData?.isResponded
+          }
+        )
+      ] })
+    ] });
   }
   function ChatMessages({
     messages,
     onSendMessage,
-    iconUrl,
+    onToggleFeedback,
     callTool
   }) {
     const isWaitingForResponse = useMedAssistStore(
@@ -42720,7 +43460,7 @@ var MedAssistWidget = (function(exports) {
       (messages && messages.length > 0 || progressMessage) && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: messages.map((message, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: "animate-slideUp scroll-mt-[80px]",
+          className: "animate-slideUp scroll-mt-[80px] min-w-0 overflow-hidden",
           id: index2 === messages.length - 1 ? "last-message" : void 0,
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             ChatMessage,
@@ -42728,101 +43468,43 @@ var MedAssistWidget = (function(exports) {
               role: message.role,
               content: message.content,
               files: message.files || [],
-              iconUrl,
               toolEscalationData: message.toolEscalationData,
               timestamp: message.timestamp,
               onSendMessage,
               isLastMessage: index2 === messages.length - 1,
               progressMessage,
               toolCallStatus: message.toolCallStatus,
-              callTool
+              callTool,
+              onToggleFeedback: (feedback) => onToggleFeedback(feedback, message.id)
             }
           )
         },
         message.id
       )) }),
-      isWaitingForResponse && /* @__PURE__ */ jsxRuntimeExports.jsx(TypingIndicator, { iconUrl })
+      isWaitingForResponse && /* @__PURE__ */ jsxRuntimeExports.jsx(TypingIndicator, {})
     ] });
   }
-  function TypingIndicator({ iconUrl }) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-slideUp", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-start", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, { className: "w-8 h-8 bg-gradient-to-br from-lavender-400 to-lavender-500 text-white text-xs font-bold flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AvatarFallback, { className: "bg-transparent text-white text-xs font-bold", children: iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: iconUrl, alt: "Bot Icon", className: "w-4 h-4", loading: "lazy" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { className: "w-4 h-4" }) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "px-4 py-2 rounded-2xl shadow-none bg-white/80 backdrop-blur-md text-slate-800 shadow-sm rounded-bl-none border border-lavender-200/40", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: "flex items-center gap-1.5",
-          "aria-label": "Bot is typing",
-          children: [0, 1, 2].map((index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "span",
-            {
-              className: "w-2 h-2 rounded-full bg-slate-400 animate-pulse",
-              style: { animationDelay: `${index2 * 150}ms` }
-            },
-            index2
-          ))
-        }
-      ) })
-    ] }) }) });
+  function TypingIndicator() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-slideUp", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-start", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "px-4 py-2 rounded-lg shadow-none bg-botMessage backdrop-blur-sm text-text-primary shadow-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "flex items-center gap-1.5",
+        "aria-label": "Bot is typing",
+        children: [0, 1, 2].map((index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            className: "w-2 h-2 rounded-full bg-foreground animate-pulse",
+            style: { animationDelay: `${index2 * 150}ms` }
+          },
+          index2
+        ))
+      }
+    ) }) }) }) });
   }
   const ChatMessages$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     default: ChatMessages
   }, Symbol.toStringTag, { value: "Module" }));
-  function TaskCards({
-    onTaskClick,
-    disabled,
-    tasks
-  }) {
-    if (!tasks?.length) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-3", children: tasks.map((task) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          disabled,
-          onClick: () => onTaskClick(task.value || ""),
-          className: "h-auto w-full flex flex-col items-start bg-white shadow-lg ring-1 ring-lavender-100 backdrop-blur-sm rounded-2xl p-4 hover:bg-white/95 hover:border-lavender-300 hover:shadow-lg transition-all text-left group",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-start justify-between gap-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold text-sm text-slate-900 text-wrap group-hover:text-lavender-600 transition-colors", children: task.label || "" }) })
-        },
-        task.value
-      );
-    }) });
-  }
-  function EmptyChatState({
-    initialPrompt,
-    tasks,
-    onTaskClick,
-    disabled,
-    profile
-  }) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 animate-fadeIn", children: [
-        profile?.name && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-base font-medium bg-gradient-to-r from-lavender-500 via-lavender-400 to-lavender-500 bg-clip-text text-transparent tracking-wide", children: [
-            "Hello, ",
-            profile.name.split(" ")[0]
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lavender-400 text-lg", children: "👋" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-xl-minus font-semibold text-slate-900", children: initialPrompt ? initialPrompt : "How can I assist you today?" })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        TaskCards,
-        {
-          onTaskClick,
-          disabled,
-          tasks
-        }
-      )
-    ] });
-  }
-  const EmptyChatState$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-    __proto__: null,
-    default: EmptyChatState
-  }, Symbol.toStringTag, { value: "Module" }));
   function ConnectionStatus({
     className = "",
     onRetry,
@@ -42855,8 +43537,8 @@ var MedAssistWidget = (function(exports) {
           children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 bg-[#F7B500] rounded-full flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white text-sm font-bold", children: "!" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-slate-700 font-semibold text-sm", children: error?.title ?? "Something went wrong" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[#666666] text-xs mt-1", children: "Start a new session." })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-text-primary font-semibold text-sm", children: error?.title ?? "Something went wrong" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-text-secondary text-xs mt-1", children: "Start a new session." })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "button",
@@ -42865,7 +43547,7 @@ var MedAssistWidget = (function(exports) {
                   clearError();
                   onStartNewSession?.();
                 },
-                className: "p-2 bg-[#3B71F7] text-white text-xs font-semibold rounded-lg hover:bg-[#2E5CD9] transition-colors flex items-center gap-2 flex-shrink-0",
+                className: "p-2 bg-primary text-primary-foreground text-xs font-semibold rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2 flex-shrink-0",
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "svg",
@@ -42899,14 +43581,14 @@ var MedAssistWidget = (function(exports) {
         "div",
         {
           className: cn(
-            "mx-4 mb-3 p-2 bg-[#FFFBEB] border border-[#FEE39B] rounded-lg",
+            "mx-4 mb-3 p-2 bg-surface border border-[#F7B500] rounded-lg",
             className
           ),
           children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 h-5 bg-[#F7B500] rounded-full flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white text-sm font-bold", children: "!" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 h-5 bg-[#F7B500] rounded-full flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-primary-foreground text-sm font-bold", children: "!" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-slate-700 font-semibold text-sm", children: error?.title }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-slate-500 text-xs mt-1", children: error?.description ?? "Please check your connection and try again" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-text-primary font-semibold text-sm", children: error?.title }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-text-secondary text-xs mt-1", children: error?.description ?? "Please check your connection and try again" })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "button",
@@ -42915,7 +43597,7 @@ var MedAssistWidget = (function(exports) {
                   clearError();
                   onRetry?.();
                 },
-                className: "px-4 py-2 bg-lavender-600 text-white text-sm font-semibold rounded-lg hover:bg-lavender-700 transition-colors flex items-center gap-2 flex-shrink-0",
+                className: "px-4 py-2 bg-primary text-white text-sm font-semibold rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2 flex-shrink-0",
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "svg",
@@ -42954,16 +43636,16 @@ var MedAssistWidget = (function(exports) {
       "div",
       {
         className: cn(
-          "mx-4 mb-3 p-2 bg-[#FFFBEB] border border-[#FDD835] rounded-lg transition-opacity duration-500",
+          "mx-4 mb-3 p-2 bg-surface border border-border-subtle rounded-lg transition-opacity duration-500",
           className
         ),
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 h-5 bg-[#FDD835] rounded-full flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white text-sm font-bold", children: "!" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 h-5 bg-primary rounded-full flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-primary-foreground text-sm font-bold", children: "!" }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-slate-700 font-semibold text-sm", children: !isOnline ? "No internet connection" : error?.title || "Connecting..." }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-slate-500 text-xs mt-1", children: !isOnline ? "Please check your internet connection" : error?.description ?? "Please wait while we try to connect" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-text-primary font-semibold text-sm", children: !isOnline ? "No internet connection" : error?.title || "Connecting..." }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-text-secondary text-xs mt-1", children: !isOnline ? "Please check your internet connection" : error?.description ?? "Please wait while we try to connect" })
           ] }),
-          !isConnected && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6 h-6 border-2 border-[#FDD835] border-t-transparent rounded-full animate-spin" }) })
+          !isConnected && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" }) })
         ] })
       }
     );