@xcelsior/ui-chat 2.0.3 → 2.0.5

package/dist/index.js

@@ -30,6 +30,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  BookingCancelledCard: () => BookingCancelledCard,
+  BookingConfirmationCard: () => BookingConfirmationCard,
+  BookingSlotPicker: () => BookingSlotPicker,
   Chat: () => Chat,
   ChatHeader: () => ChatHeader,
   ChatInput: () => ChatInput,
@@ -50,7 +53,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/ChatWidget.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/hooks/useWebSocket.ts
 var import_react = require("react");
@@ -63,6 +66,7 @@ function useWebSocket(config, externalWebSocket) {
   const reconnectAttemptsRef = (0, import_react.useRef)(0);
   const messageHandlerRef = (0, import_react.useRef)(null);
   const abortedRef = (0, import_react.useRef)(false);
+  const connectionGenerationRef = (0, import_react.useRef)(0);
   const maxReconnectAttempts = 5;
   const reconnectDelay = 3e3;
   const isUsingExternalWs = !!externalWebSocket;
@@ -74,9 +78,7 @@ function useWebSocket(config, externalWebSocket) {
       try {
         const message = JSON.parse(event.data);
         setLastMessage(message);
-        if (message.type === "message" && message.data) {
-          config.onMessageReceived?.(message.data);
-        } else if (message.type === "error") {
+        if (message.type === "error") {
           const err = new Error(message.data?.message || "WebSocket error");
           setError(err);
           config.onError?.(err);
@@ -96,6 +98,7 @@ function useWebSocket(config, externalWebSocket) {
   }, []);
   const connect = (0, import_react.useCallback)(() => {
     if (abortedRef.current) return;
+    const generation = ++connectionGenerationRef.current;
     console.log("connecting to WebSocket...", config.currentUser, config.conversationId);
     try {
       if (wsRef.current) {
@@ -115,6 +118,7 @@ function useWebSocket(config, externalWebSocket) {
       }
       const ws = new WebSocket(url.toString());
       ws.onopen = () => {
+        if (generation !== connectionGenerationRef.current) return;
         if (abortedRef.current) {
           ws.close(1e3, "Effect cleaned up");
           return;
@@ -126,6 +130,7 @@ function useWebSocket(config, externalWebSocket) {
         config.onConnectionChange?.(true);
       };
       ws.onerror = (event) => {
+        if (generation !== connectionGenerationRef.current) return;
         if (abortedRef.current) return;
         console.error("WebSocket error:", event);
         const err = new Error("WebSocket connection error");
@@ -133,6 +138,7 @@ function useWebSocket(config, externalWebSocket) {
         config.onError?.(err);
       };
       ws.onclose = (event) => {
+        if (generation !== connectionGenerationRef.current) return;
         if (abortedRef.current) return;
         console.log("WebSocket closed:", event.code, event.reason);
         setIsConnected(false);
@@ -234,7 +240,8 @@ async function fetchMessages(baseUrl, params, headers) {
       headers: {
         "Content-Type": "application/json",
         ...headers
-      }
+      },
+      timeout: 8e3
     });
     return {
       data: response.data.data ?? [],
@@ -251,6 +258,8 @@ async function fetchMessages(baseUrl, params, headers) {
 }
 
 // src/hooks/useMessages.ts
+var BOT_THINKING_TIMEOUT = 15e3;
+var AGENT_STATUSES = /* @__PURE__ */ new Set(["agent_active", "pending_agent"]);
 function useMessages(websocket, config) {
   const [messages, setMessages] = (0, import_react2.useState)([]);
   const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
@@ -259,6 +268,8 @@ function useMessages(websocket, config) {
   const [hasMore, setHasMore] = (0, import_react2.useState)(true);
   const [isLoadingMore, setIsLoadingMore] = (0, import_react2.useState)(false);
   const [isBotThinking, setIsBotThinking] = (0, import_react2.useState)(false);
+  const botThinkingTimerRef = (0, import_react2.useRef)(null);
+  const agentActiveRef = (0, import_react2.useRef)(false);
   const { httpApiUrl, conversationId, headers, onError, toast } = config;
   const headersWithApiKey = (0, import_react2.useMemo)(
     () => ({
@@ -267,11 +278,33 @@ function useMessages(websocket, config) {
     }),
     [headers, config.apiKey]
   );
+  const clearBotThinking = (0, import_react2.useCallback)(() => {
+    setIsBotThinking(false);
+    if (botThinkingTimerRef.current) {
+      clearTimeout(botThinkingTimerRef.current);
+      botThinkingTimerRef.current = null;
+    }
+  }, []);
   (0, import_react2.useEffect)(() => {
-    const loadMessages = async () => {
-      if (!httpApiUrl || !conversationId) {
-        return;
+    if (!httpApiUrl || !conversationId) return;
+    const fetchStatus = async () => {
+      try {
+        const url = `${httpApiUrl}/conversation?conversationId=${encodeURIComponent(conversationId)}`;
+        const res = await fetch(url, { headers: headersWithApiKey });
+        if (!res.ok) return;
+        const json = await res.json();
+        const conv = json.data?.conversation ?? json.data;
+        if (conv?.status && AGENT_STATUSES.has(conv.status)) {
+          agentActiveRef.current = true;
+        }
+      } catch {
       }
+    };
+    fetchStatus();
+  }, [httpApiUrl, conversationId, headersWithApiKey]);
+  (0, import_react2.useEffect)(() => {
+    if (!httpApiUrl || !conversationId) return;
+    const loadMessages = async () => {
       setIsLoading(true);
       setError(null);
       try {
@@ -283,6 +316,9 @@ function useMessages(websocket, config) {
         setMessages(result.data);
         setNextPageToken(result.nextPageToken);
         setHasMore(!!result.nextPageToken);
+        if (result.data.some((m) => m.senderType === "agent")) {
+          agentActiveRef.current = true;
+        }
       } catch (err) {
         const error2 = err instanceof Error ? err : new Error("Failed to load messages");
         setError(error2);
@@ -298,30 +334,60 @@ function useMessages(websocket, config) {
   (0, import_react2.useEffect)(() => {
     if (websocket.lastMessage?.type === "message" && websocket.lastMessage.data) {
       const newMessage = websocket.lastMessage.data;
-      if (conversationId && newMessage.conversationId !== conversationId) {
-        return;
-      }
+      if (conversationId && newMessage.conversationId !== conversationId) return;
       setMessages((prev) => {
-        if (prev.some((msg) => msg.id === newMessage.id)) {
-          return prev;
+        if (prev.some((msg) => msg.id === newMessage.id)) return prev;
+        const newMsgTime = new Date(newMessage.createdAt).getTime();
+        const tempIdx = prev.findIndex(
+          (msg) => msg.id.startsWith("temp-") && msg.content === newMessage.content && msg.senderId === newMessage.senderId && Math.abs(new Date(msg.createdAt).getTime() - newMsgTime) < 1e4
+        );
+        if (tempIdx >= 0) {
+          const next = [...prev];
+          next[tempIdx] = newMessage;
+          return next;
         }
         return [...prev, newMessage];
       });
-      if (newMessage.senderType === "bot" || newMessage.senderType === "system") {
-        setIsBotThinking(false);
+      if (newMessage.senderType === "agent") {
+        agentActiveRef.current = true;
+      }
+      if (newMessage.senderType !== "customer") {
+        clearBotThinking();
       }
       onMessageReceived?.(newMessage);
     }
-  }, [websocket.lastMessage, onMessageReceived, conversationId]);
+  }, [websocket.lastMessage, onMessageReceived, conversationId, clearBotThinking]);
+  (0, import_react2.useEffect)(() => {
+    if (!websocket.lastMessage) return;
+    const { type, data } = websocket.lastMessage;
+    if (type === "bot_not_responding") {
+      if (data?.conversationId && conversationId && data.conversationId !== conversationId) return;
+      clearBotThinking();
+      agentActiveRef.current = true;
+    }
+    if (type === "conversation_updated") {
+      if (data?.conversationId && conversationId && data.conversationId !== conversationId) return;
+      if (data?.status && AGENT_STATUSES.has(data.status)) {
+        agentActiveRef.current = true;
+        clearBotThinking();
+      }
+    }
+  }, [websocket.lastMessage, conversationId, clearBotThinking]);
   const addMessage = (0, import_react2.useCallback)((message) => {
+    const isAgentActive = agentActiveRef.current;
     setMessages((prev) => {
-      if (prev.some((msg) => msg.id === message.id)) {
-        return prev;
-      }
+      if (prev.some((msg) => msg.id === message.id)) return prev;
       return [...prev, message];
     });
-    if (message.senderType === "customer") {
+    if (message.senderType === "agent") {
+      agentActiveRef.current = true;
+    }
+    if (message.senderType === "customer" && !isAgentActive) {
       setIsBotThinking(true);
+      if (botThinkingTimerRef.current) clearTimeout(botThinkingTimerRef.current);
+      botThinkingTimerRef.current = setTimeout(() => {
+        setIsBotThinking(false);
+      }, BOT_THINKING_TIMEOUT);
     }
   }, []);
   const updateMessageStatus = (0, import_react2.useCallback)((messageId, status) => {
@@ -329,21 +395,16 @@ function useMessages(websocket, config) {
   }, []);
   const clearMessages = (0, import_react2.useCallback)(() => {
     setMessages([]);
+    agentActiveRef.current = false;
   }, []);
   const loadMore = (0, import_react2.useCallback)(async () => {
-    if (!hasMore || isLoadingMore || !httpApiUrl || !conversationId || !nextPageToken) {
-      return;
-    }
+    if (!hasMore || isLoadingMore || !httpApiUrl || !conversationId || !nextPageToken) return;
     setIsLoadingMore(true);
     setError(null);
     try {
       const result = await fetchMessages(
         httpApiUrl,
-        {
-          conversationId,
-          limit: 20,
-          pageToken: nextPageToken
-        },
+        { conversationId, limit: 20, pageToken: nextPageToken },
         headersWithApiKey
       );
       setMessages((prev) => [...result.data, ...prev]);
@@ -356,15 +417,12 @@ function useMessages(websocket, config) {
     } finally {
       setIsLoadingMore(false);
     }
-  }, [
-    hasMore,
-    isLoadingMore,
-    httpApiUrl,
-    conversationId,
-    nextPageToken,
-    headersWithApiKey,
-    onError
-  ]);
+  }, [hasMore, isLoadingMore, httpApiUrl, conversationId, nextPageToken, headersWithApiKey, onError]);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      if (botThinkingTimerRef.current) clearTimeout(botThinkingTimerRef.current);
+    };
+  }, []);
   return {
     messages,
     addMessage,
@@ -792,24 +850,20 @@ function XcelsiorSymbol({ size = 24, color = "white", className = "", style }) {
     }
   );
 }
-function ChatBubbleIcon({ size = 28, color = "white", className = "", style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className,
-      style,
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
-    }
-  );
+function ChatBubbleIcon({ size = 36, color = "white", className = "", style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, style, "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "16", cy: "3.5", r: "3", fill: "#67e8f9", opacity: 0.4 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "16", cy: "3.5", r: "1.5", fill: "#67e8f9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "15", y: "4.5", width: "2", height: "4", rx: "1", fill: color }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "1", y: "15", width: "4", height: "6", rx: "2", fill: color, opacity: 0.5 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "27", y: "15", width: "4", height: "6", rx: "2", fill: color, opacity: 0.5 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "5", y: "8.5", width: "22", height: "19", rx: "5", fill: color }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "16.5", r: "3", fill: "#1a4fd0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "16.5", r: "3", fill: "#1a4fd0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "13", cy: "15.5", r: "1.2", fill: color }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "21", cy: "15.5", r: "1.2", fill: color }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 22.5q3 2.5 6 0", stroke: "#1a4fd0", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] });
 }
 function XcelsiorAvatar({ size = 40, className = "" }) {
   const iconSize = Math.round(size * 0.55);
@@ -973,7 +1027,7 @@ function ChatHeader({ agent, onClose, onMinimize, theme }) {
 }
 
 // src/components/MessageList.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/Spinner.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -1021,6 +1075,7 @@ function Spinner({ size = "md", color = "currentColor" }) {
 
 // src/components/MessageItem.tsx
 var import_date_fns = require("date-fns");
+var import_lucide_react4 = require("lucide-react");
 
 // src/components/MarkdownMessage.tsx
 var import_react_markdown = __toESM(require("react-markdown"));
@@ -1260,14 +1315,481 @@ function MarkdownMessage({ content, theme }) {
   ) });
 }
 
-// src/components/MessageItem.tsx
+// src/components/BookingSlotPicker.tsx
+var import_react6 = require("react");
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function BookingSlotPicker({ data, theme, onSlotSelected, disabled = false }) {
+  const [selectedDateIndex, setSelectedDateIndex] = (0, import_react6.useState)(0);
+  const [selectedSlot, setSelectedSlot] = (0, import_react6.useState)(null);
+  const bgColor = theme?.background || "#00001a";
+  const isLightTheme = (() => {
+    if (!bgColor.startsWith("#")) return false;
+    const hex = bgColor.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+  })();
+  const primaryColor = theme?.primary || "#337eff";
+  const textColor = theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
+  const textMuted = theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.45)" : "rgba(247,247,248,0.4)");
+  const cardStyle = isLightTheme ? {
+    backgroundColor: "rgba(0,0,0,0.03)",
+    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.08)",
+    borderRadius: "14px",
+    padding: "14px"
+  } : {
+    backgroundColor: "rgba(255,255,255,0.04)",
+    boxShadow: "inset 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 1px 0 0 rgba(255,255,255,0.1)",
+    borderRadius: "14px",
+    padding: "14px"
+  };
+  const activePillStyle = {
+    backgroundColor: primaryColor,
+    color: "#ffffff",
+    borderRadius: "20px",
+    padding: "5px 12px",
+    fontSize: "12px",
+    fontWeight: "600",
+    letterSpacing: "0.01em",
+    cursor: disabled ? "default" : "pointer",
+    border: "none",
+    flexShrink: 0
+  };
+  const inactivePillStyle = isLightTheme ? {
+    backgroundColor: "rgba(0,0,0,0.04)",
+    color: textColor,
+    borderRadius: "20px",
+    padding: "5px 12px",
+    fontSize: "12px",
+    fontWeight: "500",
+    letterSpacing: "0.01em",
+    cursor: disabled ? "default" : "pointer",
+    border: "none",
+    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)",
+    flexShrink: 0
+  } : {
+    backgroundColor: "rgba(255,255,255,0.05)",
+    color: textColor,
+    borderRadius: "20px",
+    padding: "5px 12px",
+    fontSize: "12px",
+    fontWeight: "500",
+    letterSpacing: "0.01em",
+    cursor: disabled ? "default" : "pointer",
+    border: "none",
+    boxShadow: "inset 0 0 0 0.5px rgba(255,255,255,0.1)",
+    flexShrink: 0
+  };
+  const activeSlot = selectedSlot?.date === data.availableDates[selectedDateIndex]?.date ? selectedSlot.time : null;
+  const [confirming, setConfirming] = (0, import_react6.useState)(false);
+  const handleSlotClick = (date, time) => {
+    if (disabled || confirming) return;
+    setSelectedSlot({ date, time });
+  };
+  const handleConfirm = (0, import_react6.useCallback)(() => {
+    if (!selectedSlot || disabled || confirming) return;
+    setConfirming(true);
+    onSlotSelected(selectedSlot.date, selectedSlot.time);
+  }, [selectedSlot, disabled, confirming, onSlotSelected]);
+  const currentDate = data.availableDates[selectedDateIndex];
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: cardStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "p",
+      {
+        style: {
+          fontSize: "11px",
+          fontWeight: "600",
+          letterSpacing: "0.06em",
+          textTransform: "uppercase",
+          color: textMuted,
+          marginBottom: "10px"
+        },
+        children: "Select a date"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "6px",
+          overflowX: "auto",
+          paddingBottom: "2px",
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
+          marginBottom: "14px"
+        },
+        children: data.availableDates.map((dateSlot, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => !disabled && setSelectedDateIndex(index),
+            style: index === selectedDateIndex ? activePillStyle : inactivePillStyle,
+            title: dateSlot.dayName,
+            "aria-pressed": index === selectedDateIndex,
+            disabled,
+            children: dateSlot.dayLabel
+          },
+          dateSlot.date
+        ))
+      }
+    ),
+    currentDate && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "p",
+        {
+          style: {
+            fontSize: "11px",
+            fontWeight: "600",
+            letterSpacing: "0.06em",
+            textTransform: "uppercase",
+            color: textMuted,
+            marginBottom: "8px"
+          },
+          children: currentDate.dayName
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gap: "6px",
+            marginBottom: "14px"
+          },
+          children: currentDate.slots.map((time) => {
+            const isSelected = activeSlot === time;
+            const isConfirmed = selectedSlot?.date === currentDate.date && selectedSlot.time === time;
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSlotClick(currentDate.date, time),
+                disabled: disabled && !isConfirmed,
+                "aria-pressed": isSelected,
+                style: {
+                  ...isSelected ? activePillStyle : inactivePillStyle,
+                  padding: "7px 8px",
+                  borderRadius: "8px",
+                  fontSize: "13px",
+                  fontWeight: isSelected ? "600" : "400",
+                  textAlign: "center",
+                  opacity: disabled && !isConfirmed ? 0.4 : 1,
+                  transition: "opacity 0.15s ease"
+                },
+                children: time
+              },
+              time
+            );
+          })
+        }
+      )
+    ] }),
+    selectedSlot && !disabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: handleConfirm,
+        disabled: confirming,
+        style: {
+          width: "100%",
+          padding: "10px 16px",
+          borderRadius: "10px",
+          border: "none",
+          backgroundColor: confirming ? `${primaryColor}80` : primaryColor,
+          color: "#ffffff",
+          fontSize: "13px",
+          fontWeight: "600",
+          letterSpacing: "0.01em",
+          cursor: confirming ? "default" : "pointer",
+          marginBottom: "12px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px",
+          transition: "background-color 0.15s ease"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Calendar, { size: 14, "aria-hidden": "true" }),
+          confirming ? "Booking..." : `Book ${selectedSlot.time} on ${data.availableDates.find((d) => d.date === selectedSlot.date)?.dayLabel ?? selectedSlot.date}`
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "8px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "5px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Globe, { size: 11, color: textMuted, "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "11px", color: textMuted, letterSpacing: "0.01em" }, children: data.timezone })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "5px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Clock, { size: 11, color: textMuted, "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { fontSize: "11px", color: textMuted, letterSpacing: "0.01em" }, children: [
+              data.meetingDuration,
+              " min"
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/BookingConfirmationCard.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function BookingConfirmationCard({ data, theme }) {
+  const bgColor = theme?.background || "#00001a";
+  const isLightTheme = (() => {
+    if (!bgColor.startsWith("#")) return false;
+    const hex = bgColor.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+  })();
+  const primaryColor = theme?.primary || "#337eff";
+  const successColor = theme?.statusPositive || "#22c55e";
+  const textColor = theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
+  const textMuted = theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.45)" : "rgba(247,247,248,0.4)");
+  const cardStyle = isLightTheme ? {
+    backgroundColor: "rgba(0,0,0,0.03)",
+    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.08)",
+    borderRadius: "14px",
+    padding: "16px",
+    overflow: "hidden"
+  } : {
+    backgroundColor: "rgba(255,255,255,0.04)",
+    boxShadow: "inset 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 1px 0 0 rgba(255,255,255,0.1)",
+    borderRadius: "14px",
+    padding: "16px",
+    overflow: "hidden"
+  };
+  const detailRowStyle = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "8px",
+    marginBottom: "8px"
+  };
+  const dividerStyle = {
+    height: "1px",
+    backgroundColor: isLightTheme ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.06)",
+    margin: "12px 0"
+  };
+  const actionButtonBase = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "6px",
+    flex: 1,
+    padding: "9px 12px",
+    borderRadius: "9px",
+    fontSize: "12px",
+    fontWeight: "600",
+    letterSpacing: "0.01em",
+    cursor: "pointer",
+    textDecoration: "none",
+    border: "none",
+    transition: "opacity 0.15s ease"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: cardStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "14px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.CircleCheck, { size: 22, color: successColor, "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "p",
+          {
+            style: {
+              fontSize: "14px",
+              fontWeight: "700",
+              color: textColor,
+              letterSpacing: "0.006em",
+              lineHeight: 1.3
+            },
+            children: "Meeting Confirmed"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { fontSize: "11px", color: successColor, letterSpacing: "0.01em", marginTop: "1px" }, children: "You'll receive a calendar invite shortly" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Calendar, { size: 14, color: primaryColor, "aria-hidden": "true", style: { marginTop: "1px", flexShrink: 0 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontSize: "13px", color: textColor, lineHeight: 1.4 }, children: [
+          data.meetingDate,
+          " at ",
+          data.meetingTime
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Clock, { size: 14, color: primaryColor, "aria-hidden": "true", style: { marginTop: "1px", flexShrink: 0 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontSize: "13px", color: textColor, lineHeight: 1.4 }, children: [
+          data.meetingDuration,
+          " minutes"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { ...detailRowStyle, marginBottom: "0" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.MessageSquare, { size: 14, color: primaryColor, "aria-hidden": "true", style: { marginTop: "1px", flexShrink: 0 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "13px", color: textColor, lineHeight: 1.4 }, children: data.meetingPurpose })
+      ] })
+    ] }),
+    data.timezone && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "5px", marginTop: "8px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Globe, { size: 11, color: textMuted, "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "11px", color: textMuted, letterSpacing: "0.01em" }, children: data.timezone })
+    ] }),
+    (data.meetLink || data.calendarLink) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: dividerStyle }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+        data.meetLink && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "a",
+          {
+            href: data.meetLink,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+              ...actionButtonBase,
+              background: `linear-gradient(135deg, ${primaryColor}, ${theme?.primaryStrong || "#005eff"})`,
+              color: "#ffffff",
+              boxShadow: `0 2px 8px -2px ${primaryColor}50`
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Video, { size: 13, "aria-hidden": "true" }),
+              "Join Meet"
+            ]
+          }
+        ),
+        data.calendarLink && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "a",
+          {
+            href: data.calendarLink,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+              ...actionButtonBase,
+              backgroundColor: isLightTheme ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.07)",
+              color: textColor,
+              boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.1)" : "inset 0 0 0 0.5px rgba(255,255,255,0.12)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.CalendarPlus, { size: 13, "aria-hidden": "true" }),
+              "Add to Calendar"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/BookingCancelledCard.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function BookingCancelledCard({ data, theme }) {
+  const bgColor = theme?.background || "#00001a";
+  const isLightTheme = (() => {
+    if (!bgColor.startsWith("#")) return false;
+    const hex = bgColor.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+  })();
+  const negativeColor = theme?.statusNegative || "#ef4444";
+  const textColor = theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
+  const textMuted = theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.45)" : "rgba(247,247,248,0.4)");
+  const cardStyle = isLightTheme ? {
+    backgroundColor: "rgba(239,68,68,0.04)",
+    boxShadow: "inset 0 0 0 1px rgba(239,68,68,0.12)",
+    borderRadius: "14px",
+    padding: "16px"
+  } : {
+    backgroundColor: "rgba(239,68,68,0.06)",
+    boxShadow: "inset 0 0 0 0.5px rgba(239,68,68,0.18)",
+    borderRadius: "14px",
+    padding: "16px"
+  };
+  const strikethroughTextStyle = {
+    fontSize: "13px",
+    color: textMuted,
+    lineHeight: 1.4,
+    textDecoration: "line-through",
+    textDecorationColor: isLightTheme ? "rgba(0,0,0,0.25)" : "rgba(255,255,255,0.2)"
+  };
+  const detailRowStyle = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "8px",
+    marginBottom: "8px"
+  };
+  const cancelledByLabel = data.cancelledBy === "visitor" ? "Cancelled by you" : "Cancelled by support";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: cardStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "14px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.CircleX, { size: 22, color: negativeColor, "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "p",
+          {
+            style: {
+              fontSize: "14px",
+              fontWeight: "700",
+              color: textColor,
+              letterSpacing: "0.006em",
+              lineHeight: 1.3
+            },
+            children: "Meeting Cancelled"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "p",
+          {
+            style: {
+              fontSize: "11px",
+              color: negativeColor,
+              letterSpacing: "0.01em",
+              marginTop: "1px",
+              opacity: 0.8
+            },
+            children: cancelledByLabel
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Calendar, { size: 14, color: textMuted, "aria-hidden": "true", style: { marginTop: "1px", flexShrink: 0 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: strikethroughTextStyle, children: [
+          data.meetingDate,
+          " at ",
+          data.meetingTime
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { ...detailRowStyle, marginBottom: "0" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.MessageSquare, { size: 14, color: textMuted, "aria-hidden": "true", style: { marginTop: "1px", flexShrink: 0 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: strikethroughTextStyle, children: data.meetingPurpose })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/MessageItem.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function MessageItem({
   message,
   currentUser,
   showAvatar = true,
   showTimestamp = true,
-  theme
+  theme,
+  onBookingSlotSelected
 }) {
   const isOwnMessage = message.senderType === currentUser.type;
   const isSystemMessage = message.senderType === "system";
@@ -1286,8 +1808,63 @@ function MessageItem({
   const primaryStrong = theme?.primaryStrong || "#005eff";
   const textColor = theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
   const textMuted = theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.35)" : "rgba(247,247,248,0.35)");
+  if (message.messageType === "booking_slots" || message.messageType === "booking_confirmation" || message.messageType === "booking_cancelled") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex gap-2.5 mb-3 flex-row", children: [
+      showAvatar && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(XcelsiorAvatar, { size: 28 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col max-w-[85%] items-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "span",
+          {
+            className: "mb-1 px-1 font-medium",
+            style: {
+              color: isLightTheme ? "rgba(0,0,0,0.45)" : "rgba(247,247,248,0.4)",
+              fontSize: "11px",
+              letterSpacing: "0.019em"
+            },
+            children: "AI Assistant"
+          }
+        ),
+        message.messageType === "booking_slots" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          BookingSlotPicker,
+          {
+            data: message.metadata?.bookingData,
+            theme,
+            onSlotSelected: (date, time) => {
+              onBookingSlotSelected?.(date, time, message.id);
+            },
+            disabled: !!message.metadata?.slotSelected
+          }
+        ),
+        message.messageType === "booking_confirmation" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          BookingConfirmationCard,
+          {
+            data: message.metadata?.bookingConfirmation,
+            theme
+          }
+        ),
+        message.messageType === "booking_cancelled" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          BookingCancelledCard,
+          {
+            data: message.metadata?.bookingCancelled,
+            theme
+          }
+        ),
+        showTimestamp && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-1.5 mt-1 px-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "span",
+          {
+            style: {
+              fontSize: "11px",
+              letterSpacing: "0.019em",
+              color: textMuted
+            },
+            children: (0, import_date_fns.formatDistanceToNow)(new Date(message.createdAt), { addSuffix: true })
+          }
+        ) })
+      ] })
+    ] });
+  }
   if (isSystemMessage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex justify-center my-3", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-center my-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: "px-4 py-1.5 rounded-full",
@@ -1295,7 +1872,7 @@ function MessageItem({
           backgroundColor: isLightTheme ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.03)",
           boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.06)" : "inset 0 0 0 0.5px rgba(255,255,255,0.06)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "p",
           {
             style: {
@@ -1334,12 +1911,12 @@ function MessageItem({
     borderRadius: "18px 18px 18px 4px",
     boxShadow: "inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: `flex gap-2.5 mb-3 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
       children: [
-        showAvatar && !isOwnMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: isBotMessage || isAIMessage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(XcelsiorAvatar, { size: 28 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        showAvatar && !isOwnMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: isBotMessage || isAIMessage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(XcelsiorAvatar, { size: 28 }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             className: "h-7 w-7 rounded-full flex items-center justify-center",
@@ -1347,34 +1924,24 @@ function MessageItem({
               background: isLightTheme ? `linear-gradient(135deg, ${primaryColor}30, rgba(0,0,0,0.04))` : `linear-gradient(135deg, ${primaryColor}60, rgba(255,255,255,0.06))`,
               boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.08)" : "inset 0 0 0 0.5px rgba(255,255,255,0.1)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-              "svg",
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_lucide_react4.Headphones,
               {
-                width: "14",
-                height: "14",
-                viewBox: "0 0 24 24",
-                fill: "none",
+                size: 14,
                 stroke: isLightTheme ? primaryColor : "white",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                "aria-hidden": "true",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: "Agent" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
-                ]
+                strokeWidth: 2,
+                "aria-hidden": "true"
               }
             )
           }
         ) }),
-        showAvatar && isOwnMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-7 flex-shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        showAvatar && isOwnMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-7 flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             className: `flex flex-col max-w-[75%] ${isOwnMessage ? "items-end" : "items-start"}`,
             children: [
-              senderLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              senderLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "span",
                 {
                   className: "mb-1 px-1 font-medium",
@@ -1386,7 +1953,7 @@ function MessageItem({
                   children: senderLabel
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 "div",
                 {
                   className: "px-4 py-2.5",
@@ -1399,12 +1966,12 @@ function MessageItem({
                   children: [
                     message.messageType === "text" && (isOwnMessage ? (
                       // User messages: plain text — no markdown parsing
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: message.content })
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: message.content })
                     ) : (
                       // Bot / agent messages: full markdown rendering
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MarkdownMessage, { content: message.content, theme })
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MarkdownMessage, { content: message.content, theme })
                     )),
-                    message.messageType === "image" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    message.messageType === "image" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "img",
                       {
                         src: message.content,
@@ -1413,26 +1980,9 @@ function MessageItem({
                         loading: "lazy"
                       }
                     ) }),
-                    message.messageType === "file" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-                        "svg",
-                        {
-                          width: "18",
-                          height: "18",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "1.75",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          "aria-hidden": "true",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: "File" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    message.messageType === "file" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.Paperclip, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                         "a",
                         {
                           href: message.content,
@@ -1450,12 +2000,12 @@ function MessageItem({
                   ]
                 }
               ),
-              showTimestamp && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              showTimestamp && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 "div",
                 {
                   className: `flex items-center gap-1.5 mt-1 px-1 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "span",
                       {
                         style: {
@@ -1468,63 +2018,10 @@ function MessageItem({
                         })
                       }
                     ),
-                    isOwnMessage && message.status && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: textMuted }, children: [
-                      message.status === "sent" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-                        "svg",
-                        {
-                          width: "14",
-                          height: "14",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2.5",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          "aria-hidden": "true",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: "Sent" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "20 6 9 17 4 12" })
-                          ]
-                        }
-                      ),
-                      message.status === "delivered" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-                        "svg",
-                        {
-                          width: "14",
-                          height: "14",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2.5",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          "aria-hidden": "true",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: "Delivered" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "18 6 7 17 2 12" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "22 6 11 17" })
-                          ]
-                        }
-                      ),
-                      message.status === "read" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-                        "svg",
-                        {
-                          width: "14",
-                          height: "14",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: primaryColor,
-                          strokeWidth: "2.5",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          "aria-hidden": "true",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: "Read" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "18 6 7 17 2 12" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "22 6 11 17" })
-                          ]
-                        }
-                      )
+                    isOwnMessage && message.status && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: textMuted }, children: [
+                      message.status === "sent" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.Check, { size: 14, strokeWidth: 2.5, "aria-hidden": "true" }),
+                      message.status === "delivered" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.CheckCheck, { size: 14, strokeWidth: 2.5, "aria-hidden": "true" }),
+                      message.status === "read" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.CheckCheck, { size: 14, strokeWidth: 2.5, stroke: primaryColor, "aria-hidden": "true" })
                     ] })
                   ]
                 }
@@ -1538,8 +2035,8 @@ function MessageItem({
 }
 
 // src/components/ThinkingIndicator.tsx
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var PHRASE_POOLS = {
   // ── Greetings & small talk ──
   greeting: [
@@ -1722,17 +2219,17 @@ function ThinkingIndicator({
   const isLightTheme = computeIsLightTheme2(theme?.background);
   const primaryColor = theme?.primary || "#337eff";
   const textMuted = theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.4)" : "rgba(247,247,248,0.45)");
-  const [phraseIndex, setPhraseIndex] = (0, import_react6.useState)(0);
-  const [displayText, setDisplayText] = (0, import_react6.useState)("");
-  const [isDeleting, setIsDeleting] = (0, import_react6.useState)(false);
-  const phrasesRef = (0, import_react6.useRef)(getShuffledPhrases(detectContext(lastUserMessage)));
-  (0, import_react6.useEffect)(() => {
+  const [phraseIndex, setPhraseIndex] = (0, import_react7.useState)(0);
+  const [displayText, setDisplayText] = (0, import_react7.useState)("");
+  const [isDeleting, setIsDeleting] = (0, import_react7.useState)(false);
+  const phrasesRef = (0, import_react7.useRef)(getShuffledPhrases(detectContext(lastUserMessage)));
+  (0, import_react7.useEffect)(() => {
     phrasesRef.current = getShuffledPhrases(detectContext(lastUserMessage));
     setPhraseIndex(0);
     setDisplayText("");
     setIsDeleting(false);
   }, [lastUserMessage]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const phrases = phrasesRef.current;
     const phrase = phrases[phraseIndex % phrases.length];
     let timeout;
@@ -1758,7 +2255,7 @@ function ThinkingIndicator({
     }
     return () => clearTimeout(timeout);
   }, [displayText, isDeleting, phraseIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className: "flex gap-2.5 mb-3",
@@ -1766,8 +2263,8 @@ function ThinkingIndicator({
       "aria-live": "polite",
       "aria-label": "Xcelsior is thinking",
       children: [
-        showAvatar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(XcelsiorAvatar, { size: 28 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        showAvatar && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(XcelsiorAvatar, { size: 28 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             style: {
@@ -1777,8 +2274,8 @@ function ThinkingIndicator({
               padding: "12px 16px",
               minWidth: 160
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "span",
                 {
                   style: {
@@ -1792,7 +2289,7 @@ function ThinkingIndicator({
                 },
                 i
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "span",
                 {
                   style: {
@@ -1803,7 +2300,7 @@ function ThinkingIndicator({
                   },
                   children: [
                     displayText,
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "span",
                       {
                         style: {
@@ -1829,7 +2326,7 @@ function ThinkingIndicator({
 }
 
 // src/components/MessageList.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function MessageList({
   messages,
   currentUser,
@@ -1842,15 +2339,16 @@ function MessageList({
   isLoadingMore = false,
   theme,
   onQuickAction,
-  isBotThinking = false
+  isBotThinking = false,
+  onBookingSlotSelected
 }) {
-  const messagesEndRef = (0, import_react7.useRef)(null);
-  const containerRef = (0, import_react7.useRef)(null);
-  const prevLengthRef = (0, import_react7.useRef)(messages.length);
-  const loadMoreTriggerRef = (0, import_react7.useRef)(null);
-  const prevScrollHeightRef = (0, import_react7.useRef)(0);
-  const hasInitialScrolledRef = (0, import_react7.useRef)(false);
-  const isUserScrollingRef = (0, import_react7.useRef)(false);
+  const messagesEndRef = (0, import_react8.useRef)(null);
+  const containerRef = (0, import_react8.useRef)(null);
+  const prevLengthRef = (0, import_react8.useRef)(messages.length);
+  const loadMoreTriggerRef = (0, import_react8.useRef)(null);
+  const prevScrollHeightRef = (0, import_react8.useRef)(0);
+  const hasInitialScrolledRef = (0, import_react8.useRef)(false);
+  const isUserScrollingRef = (0, import_react8.useRef)(false);
   const bgColor = theme?.background || "#00001a";
   const isLightTheme = (() => {
     if (!bgColor.startsWith("#")) return false;
@@ -1863,7 +2361,7 @@ function MessageList({
   const primaryColor = theme?.primary || "#337eff";
   const textColor = theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
   const textMuted = theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.4)" : "rgba(247,247,248,0.45)");
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (autoScroll && messagesEndRef.current) {
       if (messages.length > prevLengthRef.current && !isLoadingMore) {
         messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
@@ -1871,7 +2369,7 @@ function MessageList({
       prevLengthRef.current = messages.length;
     }
   }, [messages.length, autoScroll, isLoadingMore]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (messages.length > 0 && messagesEndRef.current && !isLoading && !hasInitialScrolledRef.current) {
       setTimeout(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
@@ -1885,7 +2383,7 @@ function MessageList({
       hasInitialScrolledRef.current = true;
     }
   }, [isLoading, messages.length]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (isLoadingMore) {
       prevScrollHeightRef.current = containerRef.current?.scrollHeight || 0;
     } else if (prevScrollHeightRef.current > 0 && containerRef.current) {
@@ -1895,7 +2393,7 @@ function MessageList({
       prevScrollHeightRef.current = 0;
     }
   }, [isLoadingMore]);
-  const handleScroll = (0, import_react7.useCallback)(() => {
+  const handleScroll = (0, import_react8.useCallback)(() => {
     if (!containerRef.current || !onLoadMore || !hasMore || isLoadingMore) return;
     if (!isUserScrollingRef.current) return;
     const { scrollTop } = containerRef.current;
@@ -1903,18 +2401,18 @@ function MessageList({
       onLoadMore();
     }
   }, [onLoadMore, hasMore, isLoadingMore]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     container.addEventListener("scroll", handleScroll);
     return () => container.removeEventListener("scroll", handleScroll);
   }, [handleScroll]);
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { size: "lg" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, { size: "lg" }) });
   }
   if (messages.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-center justify-center h-full text-center", style: { padding: "40px 32px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center justify-center h-full text-center", style: { padding: "40px 32px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "h3",
         {
           className: "font-semibold mb-2",
@@ -1926,7 +2424,7 @@ function MessageList({
           children: "How can we help?"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "p",
         {
           className: "max-w-[240px]",
@@ -1940,11 +2438,11 @@ function MessageList({
           children: "Ask us anything. We are here to help you get the most out of Xcelsior."
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap justify-center gap-2", children: [
         { label: "Our services", message: "What services does Xcelsior offer?" },
         { label: "Get a quote", message: "I would like to get a quote for a project" },
         { label: "Support", message: "I need help with something" }
-      ].map((action) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ].map((action) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
@@ -1976,14 +2474,14 @@ function MessageList({
       )) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       ref: containerRef,
       className: "flex-1 overflow-y-auto px-4 py-3",
       style: { scrollBehavior: "smooth" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: `
                 @keyframes thinkingPulse {
                     0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
                     30% { opacity: 1; transform: scale(1); }
@@ -1993,23 +2491,24 @@ function MessageList({
                     50% { opacity: 0; }
                 }
             ` }),
-        isLoadingMore && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { size: "sm" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: loadMoreTriggerRef }),
-        messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        isLoadingMore && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, { size: "sm" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: loadMoreTriggerRef }),
+        messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           MessageItem,
           {
             message,
             currentUser,
             showAvatar: true,
             showTimestamp: true,
-            theme
+            theme,
+            onBookingSlotSelected
           },
           message.id
         )),
-        isTyping && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2.5 mb-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(XcelsiorAvatar, { size: 28 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-start", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        isTyping && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-2.5 mb-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(XcelsiorAvatar, { size: 28 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "div",
               {
                 className: "px-4 py-3",
@@ -2018,7 +2517,7 @@ function MessageList({
                   borderRadius: "18px 18px 18px 4px",
                   boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.06)" : "inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-1.5 items-center", style: { height: 16 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex gap-1.5 items-center", style: { height: 16 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "span",
                   {
                     className: "rounded-full animate-bounce",
@@ -2034,7 +2533,7 @@ function MessageList({
                 )) })
               }
             ),
-            typingUser && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            typingUser && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "span",
               {
                 className: "mt-1 px-1",
@@ -2051,24 +2550,24 @@ function MessageList({
             )
           ] })
         ] }),
-        isBotThinking && !isTyping && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        isBotThinking && !isTyping && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           ThinkingIndicator,
           {
             theme,
             lastUserMessage: messages.filter((m) => m.senderType === "customer").pop()?.content
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: messagesEndRef })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: messagesEndRef })
       ]
     }
   );
 }
 
 // src/components/ChatInput.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_react_dom = require("react-dom");
-var import_react9 = __toESM(require("@emoji-mart/react"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react10 = __toESM(require("@emoji-mart/react"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function isLightColor(color) {
   let r = 0, g = 0, b = 0;
   if (color.startsWith("#")) {
@@ -2086,18 +2585,18 @@ function ChatInput({
   fileUpload,
   disabled = false
 }) {
-  const [message, setMessage] = (0, import_react8.useState)("");
-  const [showEmojiPicker, setShowEmojiPicker] = (0, import_react8.useState)(false);
-  const [emojiData, setEmojiData] = (0, import_react8.useState)();
-  const [emojiPickerPosition, setEmojiPickerPosition] = (0, import_react8.useState)(null);
-  const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
-  const textAreaRef = (0, import_react8.useRef)(null);
-  const emojiPickerRef = (0, import_react8.useRef)(null);
-  const emojiButtonRef = (0, import_react8.useRef)(null);
-  const fileInputRef = (0, import_react8.useRef)(null);
-  const typingTimeoutRef = (0, import_react8.useRef)(null);
-  const startTypingTimeoutRef = (0, import_react8.useRef)(null);
-  const isTypingRef = (0, import_react8.useRef)(false);
+  const [message, setMessage] = (0, import_react9.useState)("");
+  const [showEmojiPicker, setShowEmojiPicker] = (0, import_react9.useState)(false);
+  const [emojiData, setEmojiData] = (0, import_react9.useState)();
+  const [emojiPickerPosition, setEmojiPickerPosition] = (0, import_react9.useState)(null);
+  const [isFocused, setIsFocused] = (0, import_react9.useState)(false);
+  const textAreaRef = (0, import_react9.useRef)(null);
+  const emojiPickerRef = (0, import_react9.useRef)(null);
+  const emojiButtonRef = (0, import_react9.useRef)(null);
+  const fileInputRef = (0, import_react9.useRef)(null);
+  const typingTimeoutRef = (0, import_react9.useRef)(null);
+  const startTypingTimeoutRef = (0, import_react9.useRef)(null);
+  const isTypingRef = (0, import_react9.useRef)(false);
   const enableEmoji = config.enableEmoji ?? true;
   const enableFileUpload = config.enableFileUpload ?? true;
   const bgColor = config.theme?.background || "#00001a";
@@ -2105,7 +2604,7 @@ function ChatInput({
   const textColor = config.theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
   const textMuted = config.theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.4)" : "rgba(247,247,248,0.45)");
   const primaryColor = config.theme?.primary || "#337eff";
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!enableEmoji) return;
     (async () => {
       try {
@@ -2116,7 +2615,7 @@ function ChatInput({
       }
     })();
   }, [enableEmoji]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target)) {
         setShowEmojiPicker(false);
@@ -2129,7 +2628,7 @@ function ChatInput({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showEmojiPicker]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     return () => {
       if (typingTimeoutRef.current) {
         clearTimeout(typingTimeoutRef.current);
@@ -2139,7 +2638,7 @@ function ChatInput({
       }
     };
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!showEmojiPicker) return;
     const updatePosition = () => {
       if (emojiButtonRef.current) {
@@ -2246,7 +2745,7 @@ ${uploadedFile.markdown}
   };
   const canSend = message.trim().length > 0 && !disabled;
   const placeholderColor = isLightTheme ? "rgba(0,0,0,0.35)" : "rgba(247,247,248,0.3)";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       className: "px-4 py-3",
@@ -2254,7 +2753,7 @@ ${uploadedFile.markdown}
         borderTop: isLightTheme ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.06)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "div",
           {
             className: "relative flex items-center rounded-full transition-all duration-200",
@@ -2266,8 +2765,8 @@ ${uploadedFile.markdown}
               backdropFilter: "blur(32px)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `.xchat-input::placeholder { color: ${placeholderColor}; }` }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { children: `.xchat-input::placeholder { color: ${placeholderColor}; }` }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "textarea",
                 {
                   ref: textAreaRef,
@@ -2296,8 +2795,8 @@ ${uploadedFile.markdown}
                   disabled
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1 px-2 shrink-0", children: [
-                enableEmoji && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1 px-2 shrink-0", children: [
+                enableEmoji && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "button",
                   {
                     ref: emojiButtonRef,
@@ -2327,7 +2826,7 @@ ${uploadedFile.markdown}
                     },
                     disabled,
                     "aria-label": "Add emoji",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                       "svg",
                       {
                         width: "18",
@@ -2340,18 +2839,18 @@ ${uploadedFile.markdown}
                         strokeLinejoin: "round",
                         "aria-hidden": "true",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("title", { children: "Emoji" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("title", { children: "Emoji" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
                         ]
                       }
                     )
                   }
                 ),
-                enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2371,7 +2870,7 @@ ${uploadedFile.markdown}
                       },
                       disabled: disabled || fileUpload.isUploading,
                       "aria-label": "Attach file",
-                      children: fileUpload.isUploading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      children: fileUpload.isUploading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                         "svg",
                         {
                           width: "18",
@@ -2383,11 +2882,11 @@ ${uploadedFile.markdown}
                           className: "animate-spin",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("title", { children: "Uploading" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("title", { children: "Uploading" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
                           ]
                         }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                         "svg",
                         {
                           width: "18",
@@ -2400,14 +2899,14 @@ ${uploadedFile.markdown}
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("title", { children: "Attach file" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("title", { children: "Attach file" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
                           ]
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "input",
                     {
                       ref: fileInputRef,
@@ -2418,7 +2917,7 @@ ${uploadedFile.markdown}
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2433,7 +2932,7 @@ ${uploadedFile.markdown}
                       boxShadow: canSend ? `0 2px 8px -2px ${primaryColor}60` : "none"
                     },
                     "aria-label": "Send message",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                       "svg",
                       {
                         width: "18",
@@ -2446,9 +2945,9 @@ ${uploadedFile.markdown}
                         strokeLinejoin: "round",
                         "aria-hidden": "true",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("title", { children: "Send" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("title", { children: "Send" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
                         ]
                       }
                     )
@@ -2458,8 +2957,8 @@ ${uploadedFile.markdown}
             ]
           }
         ),
-        fileUpload.isUploading && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mt-2 px-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        fileUpload.isUploading && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-2 px-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "div",
             {
               className: "w-full rounded-full overflow-hidden",
@@ -2467,7 +2966,7 @@ ${uploadedFile.markdown}
                 height: 3,
                 backgroundColor: isLightTheme ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.06)"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "div",
                 {
                   className: "h-full rounded-full transition-all duration-300",
@@ -2479,7 +2978,7 @@ ${uploadedFile.markdown}
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "p",
             {
               className: "mt-1",
@@ -2497,7 +2996,7 @@ ${uploadedFile.markdown}
           )
         ] }),
         showEmojiPicker && emojiData && emojiPickerPosition && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "div",
             {
               ref: emojiPickerRef,
@@ -2512,8 +3011,8 @@ ${uploadedFile.markdown}
                   "0 16px 48px -8px rgba(0,0,0,0.5)"
                 ].join(", ")
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                import_react9.default,
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_react10.default,
                 {
                   data: emojiData,
                   onEmojiSelect: (emoji) => {
@@ -2538,7 +3037,7 @@ ${uploadedFile.markdown}
 }
 
 // src/components/ChatWidget.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function getAnonymousUser() {
   let anonId;
   try {
@@ -2584,14 +3083,20 @@ function ChatWidget({
     maxHeight: 900,
     enabled: !isFullPage
   });
-  const handleSendMessage = (0, import_react10.useCallback)(
+  const lastSentRef = (0, import_react11.useRef)(null);
+  const handleSendMessage = (0, import_react11.useCallback)(
     (content) => {
       if (!websocket.isConnected) {
         config.toast?.error("Not connected to chat server");
         return;
       }
+      const now = Date.now();
+      if (lastSentRef.current && lastSentRef.current.content === content && now - lastSentRef.current.time < 1e3) {
+        return;
+      }
+      lastSentRef.current = { content, time: now };
       const optimisticMessage = {
-        id: `temp-${Date.now()}`,
+        id: `temp-${now}`,
         conversationId: config.conversationId || "",
         senderId: effectiveUser.email,
         senderType: effectiveUser.type,
@@ -2610,7 +3115,18 @@ function ChatWidget({
     },
     [websocket, config, addMessage, effectiveUser]
   );
-  const handleTyping = (0, import_react10.useCallback)(
+  const handleBookingSlotSelected = (0, import_react11.useCallback)(
+    (date, time, _messageId) => {
+      if (!websocket.isConnected) return;
+      websocket.sendMessage("bookSlot", {
+        conversationId: config.conversationId,
+        date,
+        time
+      });
+    },
+    [websocket, config]
+  );
+  const handleTyping = (0, import_react11.useCallback)(
     (isTyping2) => {
       if (!websocket.isConnected || config.enableTypingIndicator === false) return;
       websocket.sendMessage("typing", {
@@ -2620,7 +3136,7 @@ function ChatWidget({
     },
     [websocket, config]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (websocket.error) {
       config.toast?.error(websocket.error.message || "An error occurred");
     }
@@ -2640,7 +3156,6 @@ function ChatWidget({
   })();
   const positionClass = resolvedPosition === "left" ? "left-4" : "right-4";
   const containerStyle = isFullPage ? { backgroundColor: bgColor, color: textColor } : {
-    position: "relative",
     width,
     height,
     maxHeight: "calc(100vh - 100px)",
@@ -2672,14 +3187,14 @@ function ChatWidget({
     outlineOffset: -1,
     transition: "outline 150ms ease"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       className: isFullPage ? `flex flex-col h-full ${className}` : `fixed bottom-20 ${positionClass} z-50 flex flex-col overflow-hidden ${className}`,
       style: { ...containerStyle, ...dotGridBg, ...edgeHintStyle },
       ...!isFullPage ? containerResizeProps : {},
       children: [
-        !isFullPage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        !isFullPage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           ChatHeader,
           {
             agent: effectiveUser.type === "customer" ? {
@@ -2693,7 +3208,7 @@ function ChatWidget({
             theme: config.theme
           }
         ),
-        !websocket.isConnected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        !websocket.isConnected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className: "px-4 py-2",
@@ -2701,15 +3216,15 @@ function ChatWidget({
               backgroundColor: isLightTheme ? "rgba(255,169,56,0.08)" : "rgba(255,169,56,0.06)",
               borderBottom: `1px solid rgba(255,169,56,${isLightTheme ? "0.15" : "0.12"})`
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "div",
                 {
                   className: "w-1.5 h-1.5 rounded-full animate-pulse",
                   style: { backgroundColor: config.theme?.statusCaution || "#ffa938" }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "span",
                 {
                   style: {
@@ -2720,7 +3235,7 @@ function ChatWidget({
                   children: "Reconnecting..."
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "button",
                 {
                   type: "button",
@@ -2744,8 +3259,8 @@ function ChatWidget({
             ] })
           }
         ),
-        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "div",
             {
               className: "w-7 h-7 border-2 border-t-transparent rounded-full animate-spin mx-auto mb-3",
@@ -2755,7 +3270,7 @@ function ChatWidget({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "p",
             {
               style: {
@@ -2766,7 +3281,7 @@ function ChatWidget({
               children: "Loading messages..."
             }
           )
-        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           MessageList,
           {
             messages,
@@ -2779,10 +3294,11 @@ function ChatWidget({
             isLoadingMore,
             theme: config.theme,
             onQuickAction: handleSendMessage,
-            isBotThinking
+            isBotThinking,
+            onBookingSlotSelected: handleBookingSlotSelected
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           ChatInput,
           {
             onSend: handleSendMessage,
@@ -2792,7 +3308,7 @@ function ChatWidget({
             disabled: !websocket.isConnected
           }
         ),
-        !isFullPage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        !isFullPage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className: "px-4 py-1.5 text-center",
@@ -2800,7 +3316,7 @@ function ChatWidget({
               borderTop: isLightTheme ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.06)",
               backgroundColor: isLightTheme ? "rgba(0,0,0,0.03)" : "rgba(0,0,0,0.2)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
               "p",
               {
                 style: {
@@ -2811,7 +3327,7 @@ function ChatWidget({
                 children: [
                   "Powered by",
                   " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: {
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: {
                     fontWeight: 600,
                     color: isLightTheme ? "rgba(0,0,0,0.5)" : "rgba(247,247,248,0.45)"
                   }, children: "Xcelsior" })
@@ -2826,11 +3342,11 @@ function ChatWidget({
 }
 
 // src/components/Chat.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/PreChatForm.tsx
-var import_react11 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function PreChatForm({
   onSubmit,
   className = "",
@@ -2839,11 +3355,11 @@ function PreChatForm({
   onMinimize,
   onClose
 }) {
-  const [name, setName] = (0, import_react11.useState)(initialName);
-  const [email, setEmail] = (0, import_react11.useState)(initialEmail);
-  const [errors, setErrors] = (0, import_react11.useState)({});
-  const [isSubmitting, setIsSubmitting] = (0, import_react11.useState)(false);
-  const [focusedField, setFocusedField] = (0, import_react11.useState)(null);
+  const [name, setName] = (0, import_react12.useState)(initialName);
+  const [email, setEmail] = (0, import_react12.useState)(initialEmail);
+  const [errors, setErrors] = (0, import_react12.useState)({});
+  const [isSubmitting, setIsSubmitting] = (0, import_react12.useState)(false);
+  const [focusedField, setFocusedField] = (0, import_react12.useState)(null);
   const validateForm = () => {
     const newErrors = {};
     if (!name.trim()) {
@@ -2891,7 +3407,7 @@ function PreChatForm({
     transition: "box-shadow 0.2s ease",
     caretColor: "#337eff"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: `fixed bottom-4 right-4 z-50 flex flex-col overflow-hidden ${className}`,
@@ -2911,7 +3427,7 @@ function PreChatForm({
         backgroundSize: "24px 24px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             className: "relative text-white overflow-hidden",
@@ -2919,7 +3435,7 @@ function PreChatForm({
               background: "linear-gradient(135deg, #337eff 0%, #005eff 50%, #001a66 100%)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "div",
                 {
                   className: "absolute inset-0 pointer-events-none",
@@ -2928,9 +3444,9 @@ function PreChatForm({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "relative px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-start justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "h2",
                     {
                       className: "font-semibold",
@@ -2941,7 +3457,7 @@ function PreChatForm({
                       children: "Start a Conversation"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "p",
                     {
                       className: "mt-1",
@@ -2954,8 +3470,8 @@ function PreChatForm({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-1 ml-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-1 ml-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2969,7 +3485,7 @@ function PreChatForm({
                         e.currentTarget.style.backgroundColor = "transparent";
                       },
                       "aria-label": "Minimize chat",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                         "svg",
                         {
                           width: "18",
@@ -2978,8 +3494,8 @@ function PreChatForm({
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: "Minimize" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("title", { children: "Minimize" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                               "path",
                               {
                                 strokeLinecap: "round",
@@ -2993,7 +3509,7 @@ function PreChatForm({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3007,7 +3523,7 @@ function PreChatForm({
                         e.currentTarget.style.backgroundColor = "transparent";
                       },
                       "aria-label": "Close chat",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                         "svg",
                         {
                           width: "18",
@@ -3016,8 +3532,8 @@ function PreChatForm({
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: "Close" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("title", { children: "Close" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                               "path",
                               {
                                 strokeLinecap: "round",
@@ -3033,7 +3549,7 @@ function PreChatForm({
                   )
                 ] })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "div",
                 {
                   className: "h-px",
@@ -3045,9 +3561,9 @@ function PreChatForm({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className: "p-5 flex flex-col gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("form", { onSubmit: handleSubmit, className: "p-5 flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               "label",
               {
                 htmlFor: "chat-name",
@@ -3059,11 +3575,11 @@ function PreChatForm({
                 },
                 children: [
                   "Name ",
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#ff6363" }, children: "*" })
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { color: "#ff6363" }, children: "*" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "input",
               {
                 type: "text",
@@ -3083,7 +3599,7 @@ function PreChatForm({
                 autoComplete: "name"
               }
             ),
-            errors.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            errors.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "p",
               {
                 className: "mt-1.5",
@@ -3097,8 +3613,8 @@ function PreChatForm({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               "label",
               {
                 htmlFor: "chat-email",
@@ -3110,11 +3626,11 @@ function PreChatForm({
                 },
                 children: [
                   "Email ",
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#ff6363" }, children: "*" })
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { color: "#ff6363" }, children: "*" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "input",
               {
                 type: "email",
@@ -3134,7 +3650,7 @@ function PreChatForm({
                 autoComplete: "email"
               }
             ),
-            errors.email && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            errors.email && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "p",
               {
                 className: "mt-1.5",
@@ -3148,7 +3664,7 @@ function PreChatForm({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "submit",
@@ -3170,8 +3686,8 @@ function PreChatForm({
               onMouseLeave: (e) => {
                 e.currentTarget.style.boxShadow = "0 4px 16px -4px rgba(51,126,255,0.4)";
               },
-              children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                   "svg",
                   {
                     className: "animate-spin",
@@ -3183,8 +3699,8 @@ function PreChatForm({
                     strokeWidth: "2",
                     "aria-label": "Loading",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: "Loading" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("title", { children: "Loading" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
                     ]
                   }
                 ),
@@ -3192,7 +3708,7 @@ function PreChatForm({
               ] }) : "Start Chat"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "p",
             {
               className: "text-center",
@@ -3205,7 +3721,7 @@ function PreChatForm({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "div",
           {
             className: "px-4 py-1.5 text-center",
@@ -3213,7 +3729,7 @@ function PreChatForm({
               borderTop: "1px solid rgba(255,255,255,0.06)",
               backgroundColor: "rgba(0,0,0,0.2)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               "p",
               {
                 style: {
@@ -3224,7 +3740,7 @@ function PreChatForm({
                 children: [
                   "Powered by",
                   " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontWeight: 600, color: "rgba(247,247,248,0.45)" }, children: "Xcelsior" })
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontWeight: 600, color: "rgba(247,247,248,0.45)" }, children: "Xcelsior" })
                 ]
               }
             )
@@ -3236,8 +3752,15 @@ function PreChatForm({
 }
 
 // src/hooks/useDraggablePosition.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var STORAGE_KEY2 = "xcelsior-chat-position";
+var DRAG_THRESHOLD = 5;
+var FAB_SIZE = 64;
+var MARGIN = 16;
+var BOTTOM = 20;
+var VELOCITY_THRESHOLD = 0.4;
+var SETTLE_DURATION = 400;
+var SETTLE_EASING = "cubic-bezier(0.2, 0.9, 0.3, 1.1)";
 function getStoredPosition() {
   try {
     const stored = localStorage.getItem(STORAGE_KEY2);
@@ -3246,21 +3769,33 @@ function getStoredPosition() {
   }
   return "right";
 }
-function storePosition(position) {
+function storePosition(pos) {
   try {
-    localStorage.setItem(STORAGE_KEY2, position);
+    localStorage.setItem(STORAGE_KEY2, pos);
   } catch {
   }
 }
+function restingX(side) {
+  return side === "left" ? MARGIN : window.innerWidth - MARGIN - FAB_SIZE;
+}
+function restingY() {
+  return window.innerHeight - BOTTOM - FAB_SIZE;
+}
 function useDraggablePosition(configPosition = "auto") {
   const resolvedDefault = configPosition === "auto" ? getStoredPosition() : configPosition;
-  const [position, setPosition] = (0, import_react12.useState)(resolvedDefault);
-  const [isDragging, setIsDragging] = (0, import_react12.useState)(false);
-  const dragStartX = (0, import_react12.useRef)(0);
-  const fabRef = (0, import_react12.useRef)(null);
-  const hasShownHint = (0, import_react12.useRef)(false);
-  const [showHint, setShowHint] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => {
+  const [position, setPosition] = (0, import_react13.useState)(resolvedDefault);
+  const positionRef = (0, import_react13.useRef)(position);
+  positionRef.current = position;
+  const [isDragging, setIsDragging] = (0, import_react13.useState)(false);
+  const containerRef = (0, import_react13.useRef)(null);
+  const draggingRef = (0, import_react13.useRef)(false);
+  const didDragRef = (0, import_react13.useRef)(false);
+  const startPointer = (0, import_react13.useRef)({ x: 0, y: 0 });
+  const startRect = (0, import_react13.useRef)({ x: 0, y: 0 });
+  const samples = (0, import_react13.useRef)([]);
+  const hasShownHint = (0, import_react13.useRef)(false);
+  const [showHint, setShowHint] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
     try {
       const hasVisited = localStorage.getItem("xcelsior-chat-hint-shown");
       if (!hasVisited && !hasShownHint.current) {
@@ -3275,53 +3810,115 @@ function useDraggablePosition(configPosition = "auto") {
     } catch {
     }
   }, []);
-  const handlePointerDown = (0, import_react12.useCallback)((e) => {
-    dragStartX.current = e.clientX;
-    setIsDragging(true);
-    e.target.setPointerCapture(e.pointerId);
+  (0, import_react13.useEffect)(() => {
+    const handleMove = (e) => {
+      if (!draggingRef.current) return;
+      const el = containerRef.current;
+      if (!el) return;
+      const dx = e.clientX - startPointer.current.x;
+      const dy = e.clientY - startPointer.current.y;
+      if (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD) {
+        didDragRef.current = true;
+      }
+      el.style.transition = "none";
+      el.style.transform = `translate(${dx}px, ${dy}px)`;
+      const now = performance.now();
+      samples.current.push({ x: e.clientX, t: now });
+      if (samples.current.length > 5) samples.current.shift();
+    };
+    const handleUp = (e) => {
+      if (!draggingRef.current) return;
+      draggingRef.current = false;
+      const el = containerRef.current;
+      if (!el) return;
+      let velocityX = 0;
+      const s = samples.current;
+      if (s.length >= 2) {
+        const first = s[0];
+        const last = s[s.length - 1];
+        const dt = last.t - first.t;
+        if (dt > 0) velocityX = (last.x - first.x) / dt;
+      }
+      samples.current = [];
+      const currentVisualX = startRect.current.x + (e.clientX - startPointer.current.x);
+      const screenMid = window.innerWidth / 2;
+      let targetSide;
+      if (Math.abs(velocityX) > VELOCITY_THRESHOLD) {
+        targetSide = velocityX < 0 ? "left" : "right";
+      } else {
+        targetSide = currentVisualX + FAB_SIZE / 2 < screenMid ? "left" : "right";
+      }
+      const oldBaseX = restingX(positionRef.current);
+      const oldBaseY = restingY();
+      const currentX = startRect.current.x + (e.clientX - startPointer.current.x);
+      const currentY = startRect.current.y + (e.clientY - startPointer.current.y);
+      const targetX = restingX(targetSide);
+      const targetY = restingY();
+      const fromTx = currentX - oldBaseX;
+      const fromTy = currentY - oldBaseY;
+      const toTx = targetX - oldBaseX;
+      const toTy = targetY - oldBaseY;
+      el.style.transition = "none";
+      el.style.transform = `translate(${fromTx}px, ${fromTy}px)`;
+      void el.offsetHeight;
+      el.style.transition = `transform ${SETTLE_DURATION}ms ${SETTLE_EASING}`;
+      el.style.transform = `translate(${toTx}px, ${toTy}px)`;
+      const finish = () => {
+        el.style.transition = "";
+        el.style.transform = "";
+        el.removeEventListener("transitionend", finish);
+        setIsDragging(false);
+        if (targetSide !== positionRef.current) {
+          setPosition(targetSide);
+          storePosition(targetSide);
+        }
+      };
+      el.addEventListener("transitionend", finish, { once: true });
+      setTimeout(finish, SETTLE_DURATION + 50);
+    };
+    document.addEventListener("pointermove", handleMove);
+    document.addEventListener("pointerup", handleUp);
+    return () => {
+      document.removeEventListener("pointermove", handleMove);
+      document.removeEventListener("pointerup", handleUp);
+    };
   }, []);
-  const handlePointerMove = (0, import_react12.useCallback)((_e) => {
+  const handlePointerDown = (0, import_react13.useCallback)((e) => {
+    e.preventDefault();
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    startPointer.current = { x: e.clientX, y: e.clientY };
+    startRect.current = { x: rect.left, y: rect.top };
+    draggingRef.current = true;
+    didDragRef.current = false;
+    samples.current = [];
+    setIsDragging(true);
   }, []);
-  const handlePointerUp = (0, import_react12.useCallback)(
-    (e) => {
-      setIsDragging(false);
-      e.target.releasePointerCapture(e.pointerId);
-      const deltaX = e.clientX - dragStartX.current;
-      if (Math.abs(deltaX) > 50) {
-        const screenMid = window.innerWidth / 2;
-        const newPosition = e.clientX < screenMid ? "left" : "right";
-        if (newPosition !== position) {
-          setPosition(newPosition);
-          storePosition(newPosition);
-        }
-      }
-    },
-    [position]
-  );
+  const shouldSuppressClick = (0, import_react13.useCallback)(() => didDragRef.current, []);
   return {
     position,
     isDragging,
     showHint,
-    fabRef,
+    containerRef,
+    shouldSuppressClick,
     handlers: {
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp
+      onPointerDown: handlePointerDown
     }
   };
 }
 
 // src/hooks/useChatWidgetState.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useChatWidgetState({
   state: controlledState,
   defaultState = "minimized",
   onStateChange
 }) {
-  const [uncontrolledState, setUncontrolledState] = (0, import_react13.useState)(defaultState);
+  const [uncontrolledState, setUncontrolledState] = (0, import_react14.useState)(defaultState);
   const isControlled = controlledState !== void 0 && controlledState !== "undefined";
   const currentState = isControlled ? controlledState : uncontrolledState;
-  const setState = (0, import_react13.useCallback)(
+  const setState = (0, import_react14.useCallback)(
     (newValue) => {
       if (!isControlled) {
         setUncontrolledState(newValue);
@@ -3338,7 +3935,7 @@ function useChatWidgetState({
 }
 
 // src/components/Chat.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function generateSessionId() {
   if (typeof crypto !== "undefined" && crypto.randomUUID) {
     return crypto.randomUUID();
@@ -3354,62 +3951,39 @@ function Chat({
   defaultState = "minimized",
   onStateChange
 }) {
-  const [userInfo, setUserInfo] = (0, import_react14.useState)(null);
-  const [conversationId, setConversationId] = (0, import_react14.useState)("");
-  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
-  const [isAnimating, setIsAnimating] = (0, import_react14.useState)(false);
-  const [showWidget, setShowWidget] = (0, import_react14.useState)(false);
+  const [userInfo, setUserInfo] = (0, import_react15.useState)(null);
+  const [conversationId, setConversationId] = (0, import_react15.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react15.useState)(true);
   const identityMode = config.identityCollection || "progressive";
-  const { position, isDragging, showHint, handlers } = useDraggablePosition(config.position);
-  const { currentState, setState: setStateRaw } = useChatWidgetState({
+  const { position, isDragging, showHint, containerRef, shouldSuppressClick, handlers } = useDraggablePosition(config.position);
+  const sessionInitializedRef = (0, import_react15.useRef)(false);
+  const { currentState, setState } = useChatWidgetState({
     state,
     defaultState,
     onStateChange
   });
-  const setState = (0, import_react14.useCallback)(
-    (newState) => {
-      if (newState === "open" && currentState === "minimized") {
-        setShowWidget(true);
-        setIsAnimating(true);
-        setStateRaw(newState);
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            setIsAnimating(false);
-          });
-        });
-      } else if ((newState === "minimized" || newState === "closed") && currentState === "open") {
-        setIsAnimating(true);
-        setTimeout(() => {
-          setShowWidget(false);
-          setIsAnimating(false);
-          setStateRaw(newState);
-        }, 200);
-      } else {
-        setStateRaw(newState);
-      }
-    },
-    [currentState, setStateRaw]
-  );
-  (0, import_react14.useEffect)(() => {
-    if (currentState === "open") {
-      setShowWidget(true);
-    }
-  }, [currentState]);
-  (0, import_react14.useEffect)(() => {
+  const configConversationId = config.conversationId;
+  const configUserEmail = config.currentUser?.email;
+  const configUserName = config.currentUser?.name;
+  const configUserAvatar = config.currentUser?.avatar;
+  const configUserStatus = config.currentUser?.status;
+  (0, import_react15.useEffect)(() => {
+    if (sessionInitializedRef.current) return;
     const initializeSession = () => {
       try {
-        if (config.currentUser?.email && config.currentUser?.name) {
-          const convId2 = config.conversationId || generateSessionId();
+        if (configUserEmail && configUserName) {
+          const convId2 = configConversationId || generateSessionId();
           const user = {
-            name: config.currentUser.name,
-            email: config.currentUser.email,
-            avatar: config.currentUser.avatar,
+            name: configUserName,
+            email: configUserEmail,
+            avatar: configUserAvatar,
             type: "customer",
-            status: config.currentUser.status
+            status: configUserStatus
           };
           setUserInfo(user);
           setConversationId(convId2);
           setIsLoading(false);
+          sessionInitializedRef.current = true;
           return;
         }
         const storedDataJson = localStorage.getItem(`${storageKeyPrefix}_user`);
@@ -3426,24 +4000,53 @@ function Chat({
             setUserInfo(user);
             setConversationId(storedData.conversationId);
             setIsLoading(false);
+            sessionInitializedRef.current = true;
             return;
           }
         }
-        const convId = config.conversationId || generateSessionId();
+        const convId = configConversationId || generateSessionId();
         setConversationId(convId);
         if (identityMode === "progressive" || identityMode === "none") {
-          setUserInfo(null);
+          let anonId;
+          try {
+            const stored = localStorage.getItem("xcelsior-chat-anon-id");
+            if (stored) {
+              anonId = stored;
+            } else {
+              anonId = `anon-${crypto.randomUUID?.() || Math.random().toString(36).slice(2)}`;
+              localStorage.setItem("xcelsior-chat-anon-id", anonId);
+            }
+          } catch {
+            anonId = `anon-${Math.random().toString(36).slice(2)}`;
+          }
+          const anonEmail = `${anonId}@anonymous.xcelsior.co`;
+          const anonUser = { name: "Visitor", email: anonEmail, type: "customer", status: "online" };
+          setUserInfo(anonUser);
+          try {
+            localStorage.setItem(
+              `${storageKeyPrefix}_user`,
+              JSON.stringify({
+                name: anonUser.name,
+                email: anonUser.email,
+                conversationId: convId,
+                timestamp: Date.now()
+              })
+            );
+          } catch {
+          }
         }
+        sessionInitializedRef.current = true;
       } catch (error) {
         console.error("Error initializing chat session:", error);
-        setConversationId(config.conversationId || generateSessionId());
+        setConversationId(configConversationId || generateSessionId());
+        sessionInitializedRef.current = true;
       } finally {
         setIsLoading(false);
       }
     };
     initializeSession();
-  }, [config, storageKeyPrefix, identityMode]);
-  const handlePreChatSubmit = (0, import_react14.useCallback)(
+  }, [configConversationId, configUserEmail, configUserName, configUserAvatar, configUserStatus, storageKeyPrefix, identityMode]);
+  const handlePreChatSubmit = (0, import_react15.useCallback)(
     (name, email) => {
       const convId = conversationId || generateSessionId();
       const user = { name, email, type: "customer", status: "online" };
@@ -3469,49 +4072,52 @@ function Chat({
   const primaryColor = config.theme?.primary || "#337eff";
   const primaryStrong = config.theme?.primaryStrong || "#005eff";
   if (currentState === "minimized") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `fixed bottom-5 ${positionClass} z-50 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      "button",
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
       {
-        type: "button",
-        onClick: () => setState("open"),
-        className: `group relative rounded-full text-white transition-all duration-300 flex items-center justify-center touch-none select-none ${showHint ? "animate-bounce" : ""} ${isDragging ? "cursor-grabbing" : "cursor-grab"}`,
-        onMouseEnter: (e) => {
-          e.currentTarget.style.transform = "scale(1.08)";
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.transform = isDragging ? "scale(1.1)" : "scale(1)";
-        },
-        style: {
-          width: 64,
-          height: 64,
-          background: `linear-gradient(135deg, ${primaryColor}, ${primaryStrong})`,
-          boxShadow: [
-            `0 4px 24px 0 ${primaryColor}80`,
-            `0 8px 32px -4px rgba(0,0,0,0.3)`,
-            `inset 0 1px 0 0 rgba(255,255,255,0.2)`
-          ].join(", ")
-        },
-        "aria-label": "Open chat",
-        ...handlers,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChatBubbleIcon, { size: 28, color: "white", className: "pointer-events-none" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            "span",
-            {
-              className: "absolute inset-0 rounded-full animate-ping pointer-events-none",
-              style: {
-                backgroundColor: primaryColor,
-                opacity: 0.15,
-                animationDuration: "2.5s"
-              }
-            }
-          )
-        ]
+        ref: containerRef,
+        className: `fixed bottom-5 ${positionClass} z-50 ${className}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (!shouldSuppressClick()) setState("open");
+            },
+            className: `group relative rounded-full text-white flex items-center justify-center touch-none select-none ${showHint ? "animate-bounce" : ""} ${isDragging ? "cursor-grabbing scale-110" : "cursor-grab hover:scale-[1.08] transition-transform duration-300"}`,
+            style: {
+              width: 64,
+              height: 64,
+              background: `linear-gradient(135deg, ${primaryColor}, ${primaryStrong})`,
+              boxShadow: [
+                `0 4px 24px 0 ${primaryColor}80`,
+                `0 8px 32px -4px rgba(0,0,0,0.3)`,
+                `inset 0 1px 0 0 rgba(255,255,255,0.2)`
+              ].join(", ")
+            },
+            "aria-label": "Open chat",
+            ...handlers,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChatBubbleIcon, { size: 36, className: "pointer-events-none" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "span",
+                {
+                  className: "absolute inset-0 rounded-full animate-ping pointer-events-none",
+                  style: {
+                    backgroundColor: primaryColor,
+                    opacity: 0.15,
+                    animationDuration: "2.5s"
+                  }
+                }
+              )
+            ]
+          }
+        )
       }
-    ) });
+    );
   }
   if (identityMode === "form" && (!userInfo || !userInfo.email || !userInfo.name)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       PreChatForm,
       {
         onSubmit: handlePreChatSubmit,
@@ -3528,16 +4134,7 @@ function Chat({
     conversationId,
     currentUser: userInfo || void 0
   };
-  const widgetAnimationStyle = showWidget && !isAnimating ? {
-    opacity: 1,
-    transform: "translateY(0) scale(1)",
-    transition: "opacity 0.25s ease-out, transform 0.25s ease-out"
-  } : {
-    opacity: 0,
-    transform: "translateY(12px) scale(0.97)",
-    transition: "opacity 0.2s ease-in, transform 0.2s ease-in"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: widgetAnimationStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     ChatWidget,
     {
       config: fullConfig,
@@ -3546,16 +4143,16 @@ function Chat({
       onMinimize: () => setState("minimized"),
       resolvedPosition: position
     }
-  ) });
+  );
 }
 
 // src/components/TypingIndicator.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function TypingIndicator({ isTyping, userName }) {
   if (!isTyping) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       className: "px-4 py-2",
@@ -3563,8 +4160,8 @@ function TypingIndicator({ isTyping, userName }) {
         borderTop: "1px solid rgba(255,255,255,0.06)",
         backgroundColor: "rgba(0,0,0,0.15)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "span",
           {
             className: "rounded-full animate-bounce",
@@ -3578,7 +4175,7 @@ function TypingIndicator({ isTyping, userName }) {
           },
           i
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "span",
           {
             style: {
@@ -3595,6 +4192,9 @@ function TypingIndicator({ isTyping, userName }) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BookingCancelledCard,
+  BookingConfirmationCard,
+  BookingSlotPicker,
   Chat,
   ChatHeader,
   ChatInput,