@xcelsior/ui-chat 2.0.3 → 2.0.5

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/ChatWidget.tsx
-import { useCallback as useCallback5, useEffect as useEffect8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect8, useRef as useRef7 } from "react";
 
 // src/hooks/useWebSocket.ts
 import { useEffect, useRef, useState, useCallback } from "react";
@@ -12,6 +12,7 @@ function useWebSocket(config, externalWebSocket) {
   const reconnectAttemptsRef = useRef(0);
   const messageHandlerRef = useRef(null);
   const abortedRef = useRef(false);
+  const connectionGenerationRef = useRef(0);
   const maxReconnectAttempts = 5;
   const reconnectDelay = 3e3;
   const isUsingExternalWs = !!externalWebSocket;
@@ -23,9 +24,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);
@@ -45,6 +44,7 @@ function useWebSocket(config, externalWebSocket) {
   }, []);
   const connect = useCallback(() => {
     if (abortedRef.current) return;
+    const generation = ++connectionGenerationRef.current;
     console.log("connecting to WebSocket...", config.currentUser, config.conversationId);
     try {
       if (wsRef.current) {
@@ -64,6 +64,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;
@@ -75,6 +76,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");
@@ -82,6 +84,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);
@@ -168,7 +171,7 @@ function useWebSocket(config, externalWebSocket) {
 }
 
 // src/hooks/useMessages.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
 
 // src/utils/api.ts
 import axios from "axios";
@@ -183,7 +186,8 @@ async function fetchMessages(baseUrl, params, headers) {
       headers: {
         "Content-Type": "application/json",
         ...headers
-      }
+      },
+      timeout: 8e3
     });
     return {
       data: response.data.data ?? [],
@@ -200,6 +204,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] = useState2([]);
   const [isLoading, setIsLoading] = useState2(false);
@@ -208,6 +214,8 @@ function useMessages(websocket, config) {
   const [hasMore, setHasMore] = useState2(true);
   const [isLoadingMore, setIsLoadingMore] = useState2(false);
   const [isBotThinking, setIsBotThinking] = useState2(false);
+  const botThinkingTimerRef = useRef2(null);
+  const agentActiveRef = useRef2(false);
   const { httpApiUrl, conversationId, headers, onError, toast } = config;
   const headersWithApiKey = useMemo(
     () => ({
@@ -216,11 +224,33 @@ function useMessages(websocket, config) {
     }),
     [headers, config.apiKey]
   );
+  const clearBotThinking = useCallback2(() => {
+    setIsBotThinking(false);
+    if (botThinkingTimerRef.current) {
+      clearTimeout(botThinkingTimerRef.current);
+      botThinkingTimerRef.current = null;
+    }
+  }, []);
   useEffect2(() => {
-    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]);
+  useEffect2(() => {
+    if (!httpApiUrl || !conversationId) return;
+    const loadMessages = async () => {
       setIsLoading(true);
       setError(null);
       try {
@@ -232,6 +262,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);
@@ -247,30 +280,60 @@ function useMessages(websocket, config) {
   useEffect2(() => {
     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]);
+  useEffect2(() => {
+    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 = useCallback2((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 = useCallback2((messageId, status) => {
@@ -278,21 +341,16 @@ function useMessages(websocket, config) {
   }, []);
   const clearMessages = useCallback2(() => {
     setMessages([]);
+    agentActiveRef.current = false;
   }, []);
   const loadMore = useCallback2(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]);
@@ -305,15 +363,12 @@ function useMessages(websocket, config) {
     } finally {
       setIsLoadingMore(false);
     }
-  }, [
-    hasMore,
-    isLoadingMore,
-    httpApiUrl,
-    conversationId,
-    nextPageToken,
-    headersWithApiKey,
-    onError
-  ]);
+  }, [hasMore, isLoadingMore, httpApiUrl, conversationId, nextPageToken, headersWithApiKey, onError]);
+  useEffect2(() => {
+    return () => {
+      if (botThinkingTimerRef.current) clearTimeout(botThinkingTimerRef.current);
+    };
+  }, []);
   return {
     messages,
     addMessage,
@@ -462,7 +517,7 @@ function useTypingIndicator(websocket) {
 }
 
 // src/hooks/useResizableWidget.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 var STORAGE_KEY = "xcelsior-chat-size";
 var EDGE_ZONE = 8;
 var CURSOR_MAP = {
@@ -530,10 +585,10 @@ function useResizableWidget({
   const [isResizing, setIsResizing] = useState5(false);
   const [isNearEdge, setIsNearEdge] = useState5(false);
   const [activeEdge, setActiveEdge] = useState5(null);
-  const sizeRef = useRef2(size);
+  const sizeRef = useRef3(size);
   sizeRef.current = size;
-  const dragRef = useRef2(null);
-  const containerRef = useRef2(null);
+  const dragRef = useRef3(null);
+  const containerRef = useRef3(null);
   const clamp = useCallback3(
     (w, h) => {
       const mxW = Math.min(maxWidth, window.innerWidth - 24);
@@ -741,24 +796,20 @@ function XcelsiorSymbol({ size = 24, color = "white", className = "", style }) {
     }
   );
 }
-function ChatBubbleIcon({ size = 28, color = "white", className = "", style }) {
-  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("circle", { cx: "16", cy: "3.5", r: "3", fill: "#67e8f9", opacity: 0.4 }),
+    /* @__PURE__ */ jsx("circle", { cx: "16", cy: "3.5", r: "1.5", fill: "#67e8f9" }),
+    /* @__PURE__ */ jsx("rect", { x: "15", y: "4.5", width: "2", height: "4", rx: "1", fill: color }),
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "15", width: "4", height: "6", rx: "2", fill: color, opacity: 0.5 }),
+    /* @__PURE__ */ jsx("rect", { x: "27", y: "15", width: "4", height: "6", rx: "2", fill: color, opacity: 0.5 }),
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "8.5", width: "22", height: "19", rx: "5", fill: color }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16.5", r: "3", fill: "#1a4fd0" }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "16.5", r: "3", fill: "#1a4fd0" }),
+    /* @__PURE__ */ jsx("circle", { cx: "13", cy: "15.5", r: "1.2", fill: color }),
+    /* @__PURE__ */ jsx("circle", { cx: "21", cy: "15.5", r: "1.2", fill: color }),
+    /* @__PURE__ */ 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);
@@ -922,7 +973,7 @@ function ChatHeader({ agent, onClose, onMinimize, theme }) {
 }
 
 // src/components/MessageList.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef5 } from "react";
 
 // src/components/Spinner.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -970,6 +1021,7 @@ function Spinner({ size = "md", color = "currentColor" }) {
 
 // src/components/MessageItem.tsx
 import { formatDistanceToNow } from "date-fns";
+import { Check, CheckCheck, Headphones, Paperclip } from "lucide-react";
 
 // src/components/MarkdownMessage.tsx
 import ReactMarkdown from "react-markdown";
@@ -1209,14 +1261,481 @@ function MarkdownMessage({ content, theme }) {
   ) });
 }
 
+// src/components/BookingSlotPicker.tsx
+import { useState as useState6, useCallback as useCallback4 } from "react";
+import { Calendar, Clock, Globe } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function BookingSlotPicker({ data, theme, onSlotSelected, disabled = false }) {
+  const [selectedDateIndex, setSelectedDateIndex] = useState6(0);
+  const [selectedSlot, setSelectedSlot] = useState6(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] = useState6(false);
+  const handleSlotClick = (date, time) => {
+    if (disabled || confirming) return;
+    setSelectedSlot({ date, time });
+  };
+  const handleConfirm = useCallback4(() => {
+    if (!selectedSlot || disabled || confirming) return;
+    setConfirming(true);
+    onSlotSelected(selectedSlot.date, selectedSlot.time);
+  }, [selectedSlot, disabled, confirming, onSlotSelected]);
+  const currentDate = data.availableDates[selectedDateIndex];
+  return /* @__PURE__ */ jsxs4("div", { style: cardStyle, children: [
+    /* @__PURE__ */ jsx5(
+      "p",
+      {
+        style: {
+          fontSize: "11px",
+          fontWeight: "600",
+          letterSpacing: "0.06em",
+          textTransform: "uppercase",
+          color: textMuted,
+          marginBottom: "10px"
+        },
+        children: "Select a date"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "6px",
+          overflowX: "auto",
+          paddingBottom: "2px",
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
+          marginBottom: "14px"
+        },
+        children: data.availableDates.map((dateSlot, index) => /* @__PURE__ */ jsx5(
+          "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__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(
+        "p",
+        {
+          style: {
+            fontSize: "11px",
+            fontWeight: "600",
+            letterSpacing: "0.06em",
+            textTransform: "uppercase",
+            color: textMuted,
+            marginBottom: "8px"
+          },
+          children: currentDate.dayName
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "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__ */ jsx5(
+              "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__ */ jsxs4(
+      "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__ */ jsx5(Calendar, { size: 14, "aria-hidden": "true" }),
+          confirming ? "Booking..." : `Book ${selectedSlot.time} on ${data.availableDates.find((d) => d.date === selectedSlot.date)?.dayLabel ?? selectedSlot.date}`
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "8px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "5px" }, children: [
+            /* @__PURE__ */ jsx5(Globe, { size: 11, color: textMuted, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx5("span", { style: { fontSize: "11px", color: textMuted, letterSpacing: "0.01em" }, children: data.timezone })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "5px" }, children: [
+            /* @__PURE__ */ jsx5(Clock, { size: 11, color: textMuted, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs4("span", { style: { fontSize: "11px", color: textMuted, letterSpacing: "0.01em" }, children: [
+              data.meetingDuration,
+              " min"
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/BookingConfirmationCard.tsx
+import { CircleCheck, Calendar as Calendar2, Clock as Clock2, MessageSquare, Video, CalendarPlus, Globe as Globe2 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "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__ */ jsxs5("div", { style: cardStyle, children: [
+    /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "14px" }, children: [
+      /* @__PURE__ */ jsx6(CircleCheck, { size: 22, color: successColor, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx6(
+          "p",
+          {
+            style: {
+              fontSize: "14px",
+              fontWeight: "700",
+              color: textColor,
+              letterSpacing: "0.006em",
+              lineHeight: 1.3
+            },
+            children: "Meeting Confirmed"
+          }
+        ),
+        /* @__PURE__ */ jsx6("p", { style: { fontSize: "11px", color: successColor, letterSpacing: "0.01em", marginTop: "1px" }, children: "You'll receive a calendar invite shortly" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ jsx6(Calendar2, { size: 14, color: primaryColor, "aria-hidden": "true", style: { marginTop: "1px", flexShrink: 0 } }),
+        /* @__PURE__ */ jsxs5("span", { style: { fontSize: "13px", color: textColor, lineHeight: 1.4 }, children: [
+          data.meetingDate,
+          " at ",
+          data.meetingTime
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ jsx6(Clock2, { size: 14, color: primaryColor, "aria-hidden": "true", style: { marginTop: "1px", flexShrink: 0 } }),
+        /* @__PURE__ */ jsxs5("span", { style: { fontSize: "13px", color: textColor, lineHeight: 1.4 }, children: [
+          data.meetingDuration,
+          " minutes"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: { ...detailRowStyle, marginBottom: "0" }, children: [
+        /* @__PURE__ */ jsx6(MessageSquare, { size: 14, color: primaryColor, "aria-hidden": "true", style: { marginTop: "1px", flexShrink: 0 } }),
+        /* @__PURE__ */ jsx6("span", { style: { fontSize: "13px", color: textColor, lineHeight: 1.4 }, children: data.meetingPurpose })
+      ] })
+    ] }),
+    data.timezone && /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "5px", marginTop: "8px" }, children: [
+      /* @__PURE__ */ jsx6(Globe2, { size: 11, color: textMuted, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx6("span", { style: { fontSize: "11px", color: textMuted, letterSpacing: "0.01em" }, children: data.timezone })
+    ] }),
+    (data.meetLink || data.calendarLink) && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx6("div", { style: dividerStyle }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "8px" }, children: [
+        data.meetLink && /* @__PURE__ */ jsxs5(
+          "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__ */ jsx6(Video, { size: 13, "aria-hidden": "true" }),
+              "Join Meet"
+            ]
+          }
+        ),
+        data.calendarLink && /* @__PURE__ */ jsxs5(
+          "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__ */ jsx6(CalendarPlus, { size: 13, "aria-hidden": "true" }),
+              "Add to Calendar"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/BookingCancelledCard.tsx
+import { CircleX, Calendar as Calendar3, MessageSquare as MessageSquare2 } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs6 } from "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__ */ jsxs6("div", { style: cardStyle, children: [
+    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "14px" }, children: [
+      /* @__PURE__ */ jsx7(CircleX, { size: 22, color: negativeColor, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx7(
+          "p",
+          {
+            style: {
+              fontSize: "14px",
+              fontWeight: "700",
+              color: textColor,
+              letterSpacing: "0.006em",
+              lineHeight: 1.3
+            },
+            children: "Meeting Cancelled"
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "p",
+          {
+            style: {
+              fontSize: "11px",
+              color: negativeColor,
+              letterSpacing: "0.01em",
+              marginTop: "1px",
+              opacity: 0.8
+            },
+            children: cancelledByLabel
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsxs6("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ jsx7(Calendar3, { size: 14, color: textMuted, "aria-hidden": "true", style: { marginTop: "1px", flexShrink: 0 } }),
+        /* @__PURE__ */ jsxs6("span", { style: strikethroughTextStyle, children: [
+          data.meetingDate,
+          " at ",
+          data.meetingTime
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { style: { ...detailRowStyle, marginBottom: "0" }, children: [
+        /* @__PURE__ */ jsx7(MessageSquare2, { size: 14, color: textMuted, "aria-hidden": "true", style: { marginTop: "1px", flexShrink: 0 } }),
+        /* @__PURE__ */ jsx7("span", { style: strikethroughTextStyle, children: data.meetingPurpose })
+      ] })
+    ] })
+  ] });
+}
+
 // src/components/MessageItem.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "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";
@@ -1235,8 +1754,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__ */ jsxs7("div", { className: "flex gap-2.5 mb-3 flex-row", children: [
+      showAvatar && /* @__PURE__ */ jsx8("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx8(XcelsiorAvatar, { size: 28 }) }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col max-w-[85%] items-start", children: [
+        /* @__PURE__ */ jsx8(
+          "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__ */ jsx8(
+          BookingSlotPicker,
+          {
+            data: message.metadata?.bookingData,
+            theme,
+            onSlotSelected: (date, time) => {
+              onBookingSlotSelected?.(date, time, message.id);
+            },
+            disabled: !!message.metadata?.slotSelected
+          }
+        ),
+        message.messageType === "booking_confirmation" && /* @__PURE__ */ jsx8(
+          BookingConfirmationCard,
+          {
+            data: message.metadata?.bookingConfirmation,
+            theme
+          }
+        ),
+        message.messageType === "booking_cancelled" && /* @__PURE__ */ jsx8(
+          BookingCancelledCard,
+          {
+            data: message.metadata?.bookingCancelled,
+            theme
+          }
+        ),
+        showTimestamp && /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-1.5 mt-1 px-1", children: /* @__PURE__ */ jsx8(
+          "span",
+          {
+            style: {
+              fontSize: "11px",
+              letterSpacing: "0.019em",
+              color: textMuted
+            },
+            children: formatDistanceToNow(new Date(message.createdAt), { addSuffix: true })
+          }
+        ) })
+      ] })
+    ] });
+  }
   if (isSystemMessage) {
-    return /* @__PURE__ */ jsx5("div", { className: "flex justify-center my-3", children: /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx8("div", { className: "flex justify-center my-3", children: /* @__PURE__ */ jsx8(
       "div",
       {
         className: "px-4 py-1.5 rounded-full",
@@ -1244,7 +1818,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__ */ jsx5(
+        children: /* @__PURE__ */ jsx8(
           "p",
           {
             style: {
@@ -1283,12 +1857,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__ */ jsxs4(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: `flex gap-2.5 mb-3 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
       children: [
-        showAvatar && !isOwnMessage && /* @__PURE__ */ jsx5("div", { className: "flex-shrink-0 mt-auto mb-5", children: isBotMessage || isAIMessage ? /* @__PURE__ */ jsx5(XcelsiorAvatar, { size: 28 }) : /* @__PURE__ */ jsx5(
+        showAvatar && !isOwnMessage && /* @__PURE__ */ jsx8("div", { className: "flex-shrink-0 mt-auto mb-5", children: isBotMessage || isAIMessage ? /* @__PURE__ */ jsx8(XcelsiorAvatar, { size: 28 }) : /* @__PURE__ */ jsx8(
           "div",
           {
             className: "h-7 w-7 rounded-full flex items-center justify-center",
@@ -1296,34 +1870,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__ */ jsxs4(
-              "svg",
+            children: /* @__PURE__ */ jsx8(
+              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__ */ jsx5("title", { children: "Agent" }),
-                  /* @__PURE__ */ jsx5("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
-                  /* @__PURE__ */ jsx5("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__ */ jsx5("div", { className: "w-7 flex-shrink-0" }),
-        /* @__PURE__ */ jsxs4(
+        showAvatar && isOwnMessage && /* @__PURE__ */ jsx8("div", { className: "w-7 flex-shrink-0" }),
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             className: `flex flex-col max-w-[75%] ${isOwnMessage ? "items-end" : "items-start"}`,
             children: [
-              senderLabel && /* @__PURE__ */ jsx5(
+              senderLabel && /* @__PURE__ */ jsx8(
                 "span",
                 {
                   className: "mb-1 px-1 font-medium",
@@ -1335,7 +1899,7 @@ function MessageItem({
                   children: senderLabel
                 }
               ),
-              /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsxs7(
                 "div",
                 {
                   className: "px-4 py-2.5",
@@ -1348,12 +1912,12 @@ function MessageItem({
                   children: [
                     message.messageType === "text" && (isOwnMessage ? (
                       // User messages: plain text — no markdown parsing
-                      /* @__PURE__ */ jsx5("span", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: message.content })
+                      /* @__PURE__ */ jsx8("span", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: message.content })
                     ) : (
                       // Bot / agent messages: full markdown rendering
-                      /* @__PURE__ */ jsx5(MarkdownMessage, { content: message.content, theme })
+                      /* @__PURE__ */ jsx8(MarkdownMessage, { content: message.content, theme })
                     )),
-                    message.messageType === "image" && /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5(
+                    message.messageType === "image" && /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(
                       "img",
                       {
                         src: message.content,
@@ -1362,26 +1926,9 @@ function MessageItem({
                         loading: "lazy"
                       }
                     ) }),
-                    message.messageType === "file" && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsxs4(
-                        "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__ */ jsx5("title", { children: "File" }),
-                            /* @__PURE__ */ jsx5("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__ */ jsx5(
+                    message.messageType === "file" && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx8(Paperclip, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx8(
                         "a",
                         {
                           href: message.content,
@@ -1399,12 +1946,12 @@ function MessageItem({
                   ]
                 }
               ),
-              showTimestamp && /* @__PURE__ */ jsxs4(
+              showTimestamp && /* @__PURE__ */ jsxs7(
                 "div",
                 {
                   className: `flex items-center gap-1.5 mt-1 px-1 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
                   children: [
-                    /* @__PURE__ */ jsx5(
+                    /* @__PURE__ */ jsx8(
                       "span",
                       {
                         style: {
@@ -1417,63 +1964,10 @@ function MessageItem({
                         })
                       }
                     ),
-                    isOwnMessage && message.status && /* @__PURE__ */ jsxs4("span", { style: { color: textMuted }, children: [
-                      message.status === "sent" && /* @__PURE__ */ jsxs4(
-                        "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__ */ jsx5("title", { children: "Sent" }),
-                            /* @__PURE__ */ jsx5("polyline", { points: "20 6 9 17 4 12" })
-                          ]
-                        }
-                      ),
-                      message.status === "delivered" && /* @__PURE__ */ jsxs4(
-                        "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__ */ jsx5("title", { children: "Delivered" }),
-                            /* @__PURE__ */ jsx5("polyline", { points: "18 6 7 17 2 12" }),
-                            /* @__PURE__ */ jsx5("polyline", { points: "22 6 11 17" })
-                          ]
-                        }
-                      ),
-                      message.status === "read" && /* @__PURE__ */ jsxs4(
-                        "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__ */ jsx5("title", { children: "Read" }),
-                            /* @__PURE__ */ jsx5("polyline", { points: "18 6 7 17 2 12" }),
-                            /* @__PURE__ */ jsx5("polyline", { points: "22 6 11 17" })
-                          ]
-                        }
-                      )
+                    isOwnMessage && message.status && /* @__PURE__ */ jsxs7("span", { style: { color: textMuted }, children: [
+                      message.status === "sent" && /* @__PURE__ */ jsx8(Check, { size: 14, strokeWidth: 2.5, "aria-hidden": "true" }),
+                      message.status === "delivered" && /* @__PURE__ */ jsx8(CheckCheck, { size: 14, strokeWidth: 2.5, "aria-hidden": "true" }),
+                      message.status === "read" && /* @__PURE__ */ jsx8(CheckCheck, { size: 14, strokeWidth: 2.5, stroke: primaryColor, "aria-hidden": "true" })
                     ] })
                   ]
                 }
@@ -1487,8 +1981,8 @@ function MessageItem({
 }
 
 // src/components/ThinkingIndicator.tsx
-import { useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var PHRASE_POOLS = {
   // ── Greetings & small talk ──
   greeting: [
@@ -1671,10 +2165,10 @@ 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] = useState6(0);
-  const [displayText, setDisplayText] = useState6("");
-  const [isDeleting, setIsDeleting] = useState6(false);
-  const phrasesRef = useRef3(getShuffledPhrases(detectContext(lastUserMessage)));
+  const [phraseIndex, setPhraseIndex] = useState7(0);
+  const [displayText, setDisplayText] = useState7("");
+  const [isDeleting, setIsDeleting] = useState7(false);
+  const phrasesRef = useRef4(getShuffledPhrases(detectContext(lastUserMessage)));
   useEffect5(() => {
     phrasesRef.current = getShuffledPhrases(detectContext(lastUserMessage));
     setPhraseIndex(0);
@@ -1707,7 +2201,7 @@ function ThinkingIndicator({
     }
     return () => clearTimeout(timeout);
   }, [displayText, isDeleting, phraseIndex]);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: "flex gap-2.5 mb-3",
@@ -1715,8 +2209,8 @@ function ThinkingIndicator({
       "aria-live": "polite",
       "aria-label": "Xcelsior is thinking",
       children: [
-        showAvatar && /* @__PURE__ */ jsx6("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx6(XcelsiorAvatar, { size: 28 }) }),
-        /* @__PURE__ */ jsx6("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ jsx6(
+        showAvatar && /* @__PURE__ */ jsx9("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx9(XcelsiorAvatar, { size: 28 }) }),
+        /* @__PURE__ */ jsx9("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -1726,8 +2220,8 @@ function ThinkingIndicator({
               padding: "12px 16px",
               minWidth: 160
             },
-            children: /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-              /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+              /* @__PURE__ */ jsx9("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx9(
                 "span",
                 {
                   style: {
@@ -1741,7 +2235,7 @@ function ThinkingIndicator({
                 },
                 i
               )) }),
-              /* @__PURE__ */ jsxs5(
+              /* @__PURE__ */ jsxs8(
                 "span",
                 {
                   style: {
@@ -1752,7 +2246,7 @@ function ThinkingIndicator({
                   },
                   children: [
                     displayText,
-                    /* @__PURE__ */ jsx6(
+                    /* @__PURE__ */ jsx9(
                       "span",
                       {
                         style: {
@@ -1778,7 +2272,7 @@ function ThinkingIndicator({
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function MessageList({
   messages,
   currentUser,
@@ -1791,15 +2285,16 @@ function MessageList({
   isLoadingMore = false,
   theme,
   onQuickAction,
-  isBotThinking = false
+  isBotThinking = false,
+  onBookingSlotSelected
 }) {
-  const messagesEndRef = useRef4(null);
-  const containerRef = useRef4(null);
-  const prevLengthRef = useRef4(messages.length);
-  const loadMoreTriggerRef = useRef4(null);
-  const prevScrollHeightRef = useRef4(0);
-  const hasInitialScrolledRef = useRef4(false);
-  const isUserScrollingRef = useRef4(false);
+  const messagesEndRef = useRef5(null);
+  const containerRef = useRef5(null);
+  const prevLengthRef = useRef5(messages.length);
+  const loadMoreTriggerRef = useRef5(null);
+  const prevScrollHeightRef = useRef5(0);
+  const hasInitialScrolledRef = useRef5(false);
+  const isUserScrollingRef = useRef5(false);
   const bgColor = theme?.background || "#00001a";
   const isLightTheme = (() => {
     if (!bgColor.startsWith("#")) return false;
@@ -1844,7 +2339,7 @@ function MessageList({
       prevScrollHeightRef.current = 0;
     }
   }, [isLoadingMore]);
-  const handleScroll = useCallback4(() => {
+  const handleScroll = useCallback5(() => {
     if (!containerRef.current || !onLoadMore || !hasMore || isLoadingMore) return;
     if (!isUserScrollingRef.current) return;
     const { scrollTop } = containerRef.current;
@@ -1859,11 +2354,11 @@ function MessageList({
     return () => container.removeEventListener("scroll", handleScroll);
   }, [handleScroll]);
   if (isLoading) {
-    return /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx7(Spinner, { size: "lg" }) });
+    return /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx10(Spinner, { size: "lg" }) });
   }
   if (messages.length === 0) {
-    return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center justify-center h-full text-center", style: { padding: "40px 32px" }, children: [
-      /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center justify-center h-full text-center", style: { padding: "40px 32px" }, children: [
+      /* @__PURE__ */ jsx10(
         "h3",
         {
           className: "font-semibold mb-2",
@@ -1875,7 +2370,7 @@ function MessageList({
           children: "How can we help?"
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx10(
         "p",
         {
           className: "max-w-[240px]",
@@ -1889,11 +2384,11 @@ function MessageList({
           children: "Ask us anything. We are here to help you get the most out of Xcelsior."
         }
       ),
-      /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap justify-center gap-2", children: [
+      /* @__PURE__ */ jsx10("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__ */ jsx7(
+      ].map((action) => /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
@@ -1925,14 +2420,14 @@ function MessageList({
       )) })
     ] });
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: containerRef,
       className: "flex-1 overflow-y-auto px-4 py-3",
       style: { scrollBehavior: "smooth" },
       children: [
-        /* @__PURE__ */ jsx7("style", { children: `
+        /* @__PURE__ */ jsx10("style", { children: `
                 @keyframes thinkingPulse {
                     0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
                     30% { opacity: 1; transform: scale(1); }
@@ -1942,23 +2437,24 @@ function MessageList({
                     50% { opacity: 0; }
                 }
             ` }),
-        isLoadingMore && /* @__PURE__ */ jsx7("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ jsx7(Spinner, { size: "sm" }) }),
-        /* @__PURE__ */ jsx7("div", { ref: loadMoreTriggerRef }),
-        messages.map((message) => /* @__PURE__ */ jsx7(
+        isLoadingMore && /* @__PURE__ */ jsx10("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ jsx10(Spinner, { size: "sm" }) }),
+        /* @__PURE__ */ jsx10("div", { ref: loadMoreTriggerRef }),
+        messages.map((message) => /* @__PURE__ */ jsx10(
           MessageItem,
           {
             message,
             currentUser,
             showAvatar: true,
             showTimestamp: true,
-            theme
+            theme,
+            onBookingSlotSelected
           },
           message.id
         )),
-        isTyping && /* @__PURE__ */ jsxs6("div", { className: "flex gap-2.5 mb-3", children: [
-          /* @__PURE__ */ jsx7("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx7(XcelsiorAvatar, { size: 28 }) }),
-          /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-start", children: [
-            /* @__PURE__ */ jsx7(
+        isTyping && /* @__PURE__ */ jsxs9("div", { className: "flex gap-2.5 mb-3", children: [
+          /* @__PURE__ */ jsx10("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx10(XcelsiorAvatar, { size: 28 }) }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ jsx10(
               "div",
               {
                 className: "px-4 py-3",
@@ -1967,7 +2463,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__ */ jsx7("div", { className: "flex gap-1.5 items-center", style: { height: 16 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx7(
+                children: /* @__PURE__ */ jsx10("div", { className: "flex gap-1.5 items-center", style: { height: 16 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx10(
                   "span",
                   {
                     className: "rounded-full animate-bounce",
@@ -1983,7 +2479,7 @@ function MessageList({
                 )) })
               }
             ),
-            typingUser && /* @__PURE__ */ jsxs6(
+            typingUser && /* @__PURE__ */ jsxs9(
               "span",
               {
                 className: "mt-1 px-1",
@@ -2000,24 +2496,24 @@ function MessageList({
             )
           ] })
         ] }),
-        isBotThinking && !isTyping && /* @__PURE__ */ jsx7(
+        isBotThinking && !isTyping && /* @__PURE__ */ jsx10(
           ThinkingIndicator,
           {
             theme,
             lastUserMessage: messages.filter((m) => m.senderType === "customer").pop()?.content
           }
         ),
-        /* @__PURE__ */ jsx7("div", { ref: messagesEndRef })
+        /* @__PURE__ */ jsx10("div", { ref: messagesEndRef })
       ]
     }
   );
 }
 
 // src/components/ChatInput.tsx
-import { useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
+import { useEffect as useEffect7, useRef as useRef6, useState as useState8 } from "react";
 import { createPortal } from "react-dom";
 import Picker from "@emoji-mart/react";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function isLightColor(color) {
   let r = 0, g = 0, b = 0;
   if (color.startsWith("#")) {
@@ -2035,18 +2531,18 @@ function ChatInput({
   fileUpload,
   disabled = false
 }) {
-  const [message, setMessage] = useState7("");
-  const [showEmojiPicker, setShowEmojiPicker] = useState7(false);
-  const [emojiData, setEmojiData] = useState7();
-  const [emojiPickerPosition, setEmojiPickerPosition] = useState7(null);
-  const [isFocused, setIsFocused] = useState7(false);
-  const textAreaRef = useRef5(null);
-  const emojiPickerRef = useRef5(null);
-  const emojiButtonRef = useRef5(null);
-  const fileInputRef = useRef5(null);
-  const typingTimeoutRef = useRef5(null);
-  const startTypingTimeoutRef = useRef5(null);
-  const isTypingRef = useRef5(false);
+  const [message, setMessage] = useState8("");
+  const [showEmojiPicker, setShowEmojiPicker] = useState8(false);
+  const [emojiData, setEmojiData] = useState8();
+  const [emojiPickerPosition, setEmojiPickerPosition] = useState8(null);
+  const [isFocused, setIsFocused] = useState8(false);
+  const textAreaRef = useRef6(null);
+  const emojiPickerRef = useRef6(null);
+  const emojiButtonRef = useRef6(null);
+  const fileInputRef = useRef6(null);
+  const typingTimeoutRef = useRef6(null);
+  const startTypingTimeoutRef = useRef6(null);
+  const isTypingRef = useRef6(false);
   const enableEmoji = config.enableEmoji ?? true;
   const enableFileUpload = config.enableFileUpload ?? true;
   const bgColor = config.theme?.background || "#00001a";
@@ -2195,7 +2691,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__ */ jsxs7(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: "px-4 py-3",
@@ -2203,7 +2699,7 @@ ${uploadedFile.markdown}
         borderTop: isLightTheme ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.06)"
       },
       children: [
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs10(
           "div",
           {
             className: "relative flex items-center rounded-full transition-all duration-200",
@@ -2215,8 +2711,8 @@ ${uploadedFile.markdown}
               backdropFilter: "blur(32px)"
             },
             children: [
-              /* @__PURE__ */ jsx8("style", { children: `.xchat-input::placeholder { color: ${placeholderColor}; }` }),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx11("style", { children: `.xchat-input::placeholder { color: ${placeholderColor}; }` }),
+              /* @__PURE__ */ jsx11(
                 "textarea",
                 {
                   ref: textAreaRef,
@@ -2245,8 +2741,8 @@ ${uploadedFile.markdown}
                   disabled
                 }
               ),
-              /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1 px-2 shrink-0", children: [
-                enableEmoji && /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1 px-2 shrink-0", children: [
+                enableEmoji && /* @__PURE__ */ jsx11(
                   "button",
                   {
                     ref: emojiButtonRef,
@@ -2276,7 +2772,7 @@ ${uploadedFile.markdown}
                     },
                     disabled,
                     "aria-label": "Add emoji",
-                    children: /* @__PURE__ */ jsxs7(
+                    children: /* @__PURE__ */ jsxs10(
                       "svg",
                       {
                         width: "18",
@@ -2289,18 +2785,18 @@ ${uploadedFile.markdown}
                         strokeLinejoin: "round",
                         "aria-hidden": "true",
                         children: [
-                          /* @__PURE__ */ jsx8("title", { children: "Emoji" }),
-                          /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "10" }),
-                          /* @__PURE__ */ jsx8("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
-                          /* @__PURE__ */ jsx8("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
-                          /* @__PURE__ */ jsx8("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
+                          /* @__PURE__ */ jsx11("title", { children: "Emoji" }),
+                          /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "10" }),
+                          /* @__PURE__ */ jsx11("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+                          /* @__PURE__ */ jsx11("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
+                          /* @__PURE__ */ jsx11("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
                         ]
                       }
                     )
                   }
                 ),
-                enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ jsxs7(Fragment2, { children: [
-                  /* @__PURE__ */ jsx8(
+                enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+                  /* @__PURE__ */ jsx11(
                     "button",
                     {
                       type: "button",
@@ -2320,7 +2816,7 @@ ${uploadedFile.markdown}
                       },
                       disabled: disabled || fileUpload.isUploading,
                       "aria-label": "Attach file",
-                      children: fileUpload.isUploading ? /* @__PURE__ */ jsxs7(
+                      children: fileUpload.isUploading ? /* @__PURE__ */ jsxs10(
                         "svg",
                         {
                           width: "18",
@@ -2332,11 +2828,11 @@ ${uploadedFile.markdown}
                           className: "animate-spin",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ jsx8("title", { children: "Uploading" }),
-                            /* @__PURE__ */ jsx8("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                            /* @__PURE__ */ jsx11("title", { children: "Uploading" }),
+                            /* @__PURE__ */ jsx11("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
                           ]
                         }
-                      ) : /* @__PURE__ */ jsxs7(
+                      ) : /* @__PURE__ */ jsxs10(
                         "svg",
                         {
                           width: "18",
@@ -2349,14 +2845,14 @@ ${uploadedFile.markdown}
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ jsx8("title", { children: "Attach file" }),
-                            /* @__PURE__ */ jsx8("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__ */ jsx11("title", { children: "Attach file" }),
+                            /* @__PURE__ */ jsx11("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__ */ jsx8(
+                  /* @__PURE__ */ jsx11(
                     "input",
                     {
                       ref: fileInputRef,
@@ -2367,7 +2863,7 @@ ${uploadedFile.markdown}
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2382,7 +2878,7 @@ ${uploadedFile.markdown}
                       boxShadow: canSend ? `0 2px 8px -2px ${primaryColor}60` : "none"
                     },
                     "aria-label": "Send message",
-                    children: /* @__PURE__ */ jsxs7(
+                    children: /* @__PURE__ */ jsxs10(
                       "svg",
                       {
                         width: "18",
@@ -2395,9 +2891,9 @@ ${uploadedFile.markdown}
                         strokeLinejoin: "round",
                         "aria-hidden": "true",
                         children: [
-                          /* @__PURE__ */ jsx8("title", { children: "Send" }),
-                          /* @__PURE__ */ jsx8("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-                          /* @__PURE__ */ jsx8("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                          /* @__PURE__ */ jsx11("title", { children: "Send" }),
+                          /* @__PURE__ */ jsx11("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                          /* @__PURE__ */ jsx11("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
                         ]
                       }
                     )
@@ -2407,8 +2903,8 @@ ${uploadedFile.markdown}
             ]
           }
         ),
-        fileUpload.isUploading && /* @__PURE__ */ jsxs7("div", { className: "mt-2 px-1", children: [
-          /* @__PURE__ */ jsx8(
+        fileUpload.isUploading && /* @__PURE__ */ jsxs10("div", { className: "mt-2 px-1", children: [
+          /* @__PURE__ */ jsx11(
             "div",
             {
               className: "w-full rounded-full overflow-hidden",
@@ -2416,7 +2912,7 @@ ${uploadedFile.markdown}
                 height: 3,
                 backgroundColor: isLightTheme ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.06)"
               },
-              children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx11(
                 "div",
                 {
                   className: "h-full rounded-full transition-all duration-300",
@@ -2428,7 +2924,7 @@ ${uploadedFile.markdown}
               )
             }
           ),
-          /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsxs10(
             "p",
             {
               className: "mt-1",
@@ -2446,7 +2942,7 @@ ${uploadedFile.markdown}
           )
         ] }),
         showEmojiPicker && emojiData && emojiPickerPosition && typeof document !== "undefined" && createPortal(
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx11(
             "div",
             {
               ref: emojiPickerRef,
@@ -2461,7 +2957,7 @@ ${uploadedFile.markdown}
                   "0 16px 48px -8px rgba(0,0,0,0.5)"
                 ].join(", ")
               },
-              children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx11(
                 Picker,
                 {
                   data: emojiData,
@@ -2487,7 +2983,7 @@ ${uploadedFile.markdown}
 }
 
 // src/components/ChatWidget.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function getAnonymousUser() {
   let anonId;
   try {
@@ -2533,14 +3029,20 @@ function ChatWidget({
     maxHeight: 900,
     enabled: !isFullPage
   });
-  const handleSendMessage = useCallback5(
+  const lastSentRef = useRef7(null);
+  const handleSendMessage = useCallback6(
     (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,
@@ -2559,7 +3061,18 @@ function ChatWidget({
     },
     [websocket, config, addMessage, effectiveUser]
   );
-  const handleTyping = useCallback5(
+  const handleBookingSlotSelected = useCallback6(
+    (date, time, _messageId) => {
+      if (!websocket.isConnected) return;
+      websocket.sendMessage("bookSlot", {
+        conversationId: config.conversationId,
+        date,
+        time
+      });
+    },
+    [websocket, config]
+  );
+  const handleTyping = useCallback6(
     (isTyping2) => {
       if (!websocket.isConnected || config.enableTypingIndicator === false) return;
       websocket.sendMessage("typing", {
@@ -2589,7 +3102,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)",
@@ -2621,14 +3133,14 @@ function ChatWidget({
     outlineOffset: -1,
     transition: "outline 150ms ease"
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs11(
     "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__ */ jsx9(
+        !isFullPage && /* @__PURE__ */ jsx12(
           ChatHeader,
           {
             agent: effectiveUser.type === "customer" ? {
@@ -2642,7 +3154,7 @@ function ChatWidget({
             theme: config.theme
           }
         ),
-        !websocket.isConnected && /* @__PURE__ */ jsx9(
+        !websocket.isConnected && /* @__PURE__ */ jsx12(
           "div",
           {
             className: "px-4 py-2",
@@ -2650,15 +3162,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__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx9(
+            children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx12(
                 "div",
                 {
                   className: "w-1.5 h-1.5 rounded-full animate-pulse",
                   style: { backgroundColor: config.theme?.statusCaution || "#ffa938" }
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx12(
                 "span",
                 {
                   style: {
@@ -2669,7 +3181,7 @@ function ChatWidget({
                   children: "Reconnecting..."
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx12(
                 "button",
                 {
                   type: "button",
@@ -2693,8 +3205,8 @@ function ChatWidget({
             ] })
           }
         ),
-        isLoading ? /* @__PURE__ */ jsx9("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs8("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx9(
+        isLoading ? /* @__PURE__ */ jsx12("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs11("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx12(
             "div",
             {
               className: "w-7 h-7 border-2 border-t-transparent rounded-full animate-spin mx-auto mb-3",
@@ -2704,7 +3216,7 @@ function ChatWidget({
               }
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx12(
             "p",
             {
               style: {
@@ -2715,7 +3227,7 @@ function ChatWidget({
               children: "Loading messages..."
             }
           )
-        ] }) }) : /* @__PURE__ */ jsx9(
+        ] }) }) : /* @__PURE__ */ jsx12(
           MessageList,
           {
             messages,
@@ -2728,10 +3240,11 @@ function ChatWidget({
             isLoadingMore,
             theme: config.theme,
             onQuickAction: handleSendMessage,
-            isBotThinking
+            isBotThinking,
+            onBookingSlotSelected: handleBookingSlotSelected
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx12(
           ChatInput,
           {
             onSend: handleSendMessage,
@@ -2741,7 +3254,7 @@ function ChatWidget({
             disabled: !websocket.isConnected
           }
         ),
-        !isFullPage && /* @__PURE__ */ jsx9(
+        !isFullPage && /* @__PURE__ */ jsx12(
           "div",
           {
             className: "px-4 py-1.5 text-center",
@@ -2749,7 +3262,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__ */ jsxs8(
+            children: /* @__PURE__ */ jsxs11(
               "p",
               {
                 style: {
@@ -2760,7 +3273,7 @@ function ChatWidget({
                 children: [
                   "Powered by",
                   " ",
-                  /* @__PURE__ */ jsx9("span", { style: {
+                  /* @__PURE__ */ jsx12("span", { style: {
                     fontWeight: 600,
                     color: isLightTheme ? "rgba(0,0,0,0.5)" : "rgba(247,247,248,0.45)"
                   }, children: "Xcelsior" })
@@ -2775,11 +3288,11 @@ function ChatWidget({
 }
 
 // src/components/Chat.tsx
-import { useCallback as useCallback8, useEffect as useEffect10, useState as useState11 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect10, useRef as useRef9, useState as useState12 } from "react";
 
 // src/components/PreChatForm.tsx
-import { useState as useState8 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useState as useState9 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function PreChatForm({
   onSubmit,
   className = "",
@@ -2788,11 +3301,11 @@ function PreChatForm({
   onMinimize,
   onClose
 }) {
-  const [name, setName] = useState8(initialName);
-  const [email, setEmail] = useState8(initialEmail);
-  const [errors, setErrors] = useState8({});
-  const [isSubmitting, setIsSubmitting] = useState8(false);
-  const [focusedField, setFocusedField] = useState8(null);
+  const [name, setName] = useState9(initialName);
+  const [email, setEmail] = useState9(initialEmail);
+  const [errors, setErrors] = useState9({});
+  const [isSubmitting, setIsSubmitting] = useState9(false);
+  const [focusedField, setFocusedField] = useState9(null);
   const validateForm = () => {
     const newErrors = {};
     if (!name.trim()) {
@@ -2840,7 +3353,7 @@ function PreChatForm({
     transition: "box-shadow 0.2s ease",
     caretColor: "#337eff"
   });
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: `fixed bottom-4 right-4 z-50 flex flex-col overflow-hidden ${className}`,
@@ -2860,7 +3373,7 @@ function PreChatForm({
         backgroundSize: "24px 24px"
       },
       children: [
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs12(
           "div",
           {
             className: "relative text-white overflow-hidden",
@@ -2868,7 +3381,7 @@ function PreChatForm({
               background: "linear-gradient(135deg, #337eff 0%, #005eff 50%, #001a66 100%)"
             },
             children: [
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx13(
                 "div",
                 {
                   className: "absolute inset-0 pointer-events-none",
@@ -2877,9 +3390,9 @@ function PreChatForm({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx10("div", { className: "relative px-5 py-4", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between", children: [
-                /* @__PURE__ */ jsxs9("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx13("div", { className: "relative px-5 py-4", children: /* @__PURE__ */ jsxs12("div", { className: "flex items-start justify-between", children: [
+                /* @__PURE__ */ jsxs12("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsx13(
                     "h2",
                     {
                       className: "font-semibold",
@@ -2890,7 +3403,7 @@ function PreChatForm({
                       children: "Start a Conversation"
                     }
                   ),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx13(
                     "p",
                     {
                       className: "mt-1",
@@ -2903,8 +3416,8 @@ function PreChatForm({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "flex gap-1 ml-2", children: [
-                  /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsxs12("div", { className: "flex gap-1 ml-2", children: [
+                  /* @__PURE__ */ jsx13(
                     "button",
                     {
                       type: "button",
@@ -2918,7 +3431,7 @@ function PreChatForm({
                         e.currentTarget.style.backgroundColor = "transparent";
                       },
                       "aria-label": "Minimize chat",
-                      children: /* @__PURE__ */ jsxs9(
+                      children: /* @__PURE__ */ jsxs12(
                         "svg",
                         {
                           width: "18",
@@ -2927,8 +3440,8 @@ function PreChatForm({
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
                           children: [
-                            /* @__PURE__ */ jsx10("title", { children: "Minimize" }),
-                            /* @__PURE__ */ jsx10(
+                            /* @__PURE__ */ jsx13("title", { children: "Minimize" }),
+                            /* @__PURE__ */ jsx13(
                               "path",
                               {
                                 strokeLinecap: "round",
@@ -2942,7 +3455,7 @@ function PreChatForm({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx13(
                     "button",
                     {
                       type: "button",
@@ -2956,7 +3469,7 @@ function PreChatForm({
                         e.currentTarget.style.backgroundColor = "transparent";
                       },
                       "aria-label": "Close chat",
-                      children: /* @__PURE__ */ jsxs9(
+                      children: /* @__PURE__ */ jsxs12(
                         "svg",
                         {
                           width: "18",
@@ -2965,8 +3478,8 @@ function PreChatForm({
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
                           children: [
-                            /* @__PURE__ */ jsx10("title", { children: "Close" }),
-                            /* @__PURE__ */ jsx10(
+                            /* @__PURE__ */ jsx13("title", { children: "Close" }),
+                            /* @__PURE__ */ jsx13(
                               "path",
                               {
                                 strokeLinecap: "round",
@@ -2982,7 +3495,7 @@ function PreChatForm({
                   )
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx13(
                 "div",
                 {
                   className: "h-px",
@@ -2994,9 +3507,9 @@ function PreChatForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: "p-5 flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsxs9("div", { children: [
-            /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs12("form", { onSubmit: handleSubmit, className: "p-5 flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs12("div", { children: [
+            /* @__PURE__ */ jsxs12(
               "label",
               {
                 htmlFor: "chat-name",
@@ -3008,11 +3521,11 @@ function PreChatForm({
                 },
                 children: [
                   "Name ",
-                  /* @__PURE__ */ jsx10("span", { style: { color: "#ff6363" }, children: "*" })
+                  /* @__PURE__ */ jsx13("span", { style: { color: "#ff6363" }, children: "*" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx13(
               "input",
               {
                 type: "text",
@@ -3032,7 +3545,7 @@ function PreChatForm({
                 autoComplete: "name"
               }
             ),
-            errors.name && /* @__PURE__ */ jsx10(
+            errors.name && /* @__PURE__ */ jsx13(
               "p",
               {
                 className: "mt-1.5",
@@ -3046,8 +3559,8 @@ function PreChatForm({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs9("div", { children: [
-            /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsxs12("div", { children: [
+            /* @__PURE__ */ jsxs12(
               "label",
               {
                 htmlFor: "chat-email",
@@ -3059,11 +3572,11 @@ function PreChatForm({
                 },
                 children: [
                   "Email ",
-                  /* @__PURE__ */ jsx10("span", { style: { color: "#ff6363" }, children: "*" })
+                  /* @__PURE__ */ jsx13("span", { style: { color: "#ff6363" }, children: "*" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx13(
               "input",
               {
                 type: "email",
@@ -3083,7 +3596,7 @@ function PreChatForm({
                 autoComplete: "email"
               }
             ),
-            errors.email && /* @__PURE__ */ jsx10(
+            errors.email && /* @__PURE__ */ jsx13(
               "p",
               {
                 className: "mt-1.5",
@@ -3097,7 +3610,7 @@ function PreChatForm({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "submit",
@@ -3119,8 +3632,8 @@ function PreChatForm({
               onMouseLeave: (e) => {
                 e.currentTarget.style.boxShadow = "0 4px 16px -4px rgba(51,126,255,0.4)";
               },
-              children: isSubmitting ? /* @__PURE__ */ jsxs9("span", { className: "flex items-center justify-center gap-2", children: [
-                /* @__PURE__ */ jsxs9(
+              children: isSubmitting ? /* @__PURE__ */ jsxs12("span", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsxs12(
                   "svg",
                   {
                     className: "animate-spin",
@@ -3132,8 +3645,8 @@ function PreChatForm({
                     strokeWidth: "2",
                     "aria-label": "Loading",
                     children: [
-                      /* @__PURE__ */ jsx10("title", { children: "Loading" }),
-                      /* @__PURE__ */ jsx10("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                      /* @__PURE__ */ jsx13("title", { children: "Loading" }),
+                      /* @__PURE__ */ jsx13("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
                     ]
                   }
                 ),
@@ -3141,7 +3654,7 @@ function PreChatForm({
               ] }) : "Start Chat"
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx13(
             "p",
             {
               className: "text-center",
@@ -3154,7 +3667,7 @@ function PreChatForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx13(
           "div",
           {
             className: "px-4 py-1.5 text-center",
@@ -3162,7 +3675,7 @@ function PreChatForm({
               borderTop: "1px solid rgba(255,255,255,0.06)",
               backgroundColor: "rgba(0,0,0,0.2)"
             },
-            children: /* @__PURE__ */ jsxs9(
+            children: /* @__PURE__ */ jsxs12(
               "p",
               {
                 style: {
@@ -3173,7 +3686,7 @@ function PreChatForm({
                 children: [
                   "Powered by",
                   " ",
-                  /* @__PURE__ */ jsx10("span", { style: { fontWeight: 600, color: "rgba(247,247,248,0.45)" }, children: "Xcelsior" })
+                  /* @__PURE__ */ jsx13("span", { style: { fontWeight: 600, color: "rgba(247,247,248,0.45)" }, children: "Xcelsior" })
                 ]
               }
             )
@@ -3185,8 +3698,15 @@ function PreChatForm({
 }
 
 // src/hooks/useDraggablePosition.ts
-import { useState as useState9, useCallback as useCallback6, useRef as useRef6, useEffect as useEffect9 } from "react";
+import { useState as useState10, useCallback as useCallback7, useRef as useRef8, useEffect as useEffect9 } from "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);
@@ -3195,20 +3715,32 @@ 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] = useState9(resolvedDefault);
-  const [isDragging, setIsDragging] = useState9(false);
-  const dragStartX = useRef6(0);
-  const fabRef = useRef6(null);
-  const hasShownHint = useRef6(false);
-  const [showHint, setShowHint] = useState9(false);
+  const [position, setPosition] = useState10(resolvedDefault);
+  const positionRef = useRef8(position);
+  positionRef.current = position;
+  const [isDragging, setIsDragging] = useState10(false);
+  const containerRef = useRef8(null);
+  const draggingRef = useRef8(false);
+  const didDragRef = useRef8(false);
+  const startPointer = useRef8({ x: 0, y: 0 });
+  const startRect = useRef8({ x: 0, y: 0 });
+  const samples = useRef8([]);
+  const hasShownHint = useRef8(false);
+  const [showHint, setShowHint] = useState10(false);
   useEffect9(() => {
     try {
       const hasVisited = localStorage.getItem("xcelsior-chat-hint-shown");
@@ -3224,53 +3756,115 @@ function useDraggablePosition(configPosition = "auto") {
     } catch {
     }
   }, []);
-  const handlePointerDown = useCallback6((e) => {
-    dragStartX.current = e.clientX;
-    setIsDragging(true);
-    e.target.setPointerCapture(e.pointerId);
+  useEffect9(() => {
+    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 = useCallback6((_e) => {
+  const handlePointerDown = useCallback7((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 = useCallback6(
-    (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 = useCallback7(() => didDragRef.current, []);
   return {
     position,
     isDragging,
     showHint,
-    fabRef,
+    containerRef,
+    shouldSuppressClick,
     handlers: {
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp
+      onPointerDown: handlePointerDown
     }
   };
 }
 
 // src/hooks/useChatWidgetState.ts
-import { useCallback as useCallback7, useState as useState10 } from "react";
+import { useCallback as useCallback8, useState as useState11 } from "react";
 function useChatWidgetState({
   state: controlledState,
   defaultState = "minimized",
   onStateChange
 }) {
-  const [uncontrolledState, setUncontrolledState] = useState10(defaultState);
+  const [uncontrolledState, setUncontrolledState] = useState11(defaultState);
   const isControlled = controlledState !== void 0 && controlledState !== "undefined";
   const currentState = isControlled ? controlledState : uncontrolledState;
-  const setState = useCallback7(
+  const setState = useCallback8(
     (newValue) => {
       if (!isControlled) {
         setUncontrolledState(newValue);
@@ -3287,7 +3881,7 @@ function useChatWidgetState({
 }
 
 // src/components/Chat.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function generateSessionId() {
   if (typeof crypto !== "undefined" && crypto.randomUUID) {
     return crypto.randomUUID();
@@ -3303,62 +3897,39 @@ function Chat({
   defaultState = "minimized",
   onStateChange
 }) {
-  const [userInfo, setUserInfo] = useState11(null);
-  const [conversationId, setConversationId] = useState11("");
-  const [isLoading, setIsLoading] = useState11(true);
-  const [isAnimating, setIsAnimating] = useState11(false);
-  const [showWidget, setShowWidget] = useState11(false);
+  const [userInfo, setUserInfo] = useState12(null);
+  const [conversationId, setConversationId] = useState12("");
+  const [isLoading, setIsLoading] = useState12(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 = useRef9(false);
+  const { currentState, setState } = useChatWidgetState({
     state,
     defaultState,
     onStateChange
   });
-  const setState = useCallback8(
-    (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]
-  );
-  useEffect10(() => {
-    if (currentState === "open") {
-      setShowWidget(true);
-    }
-  }, [currentState]);
+  const configConversationId = config.conversationId;
+  const configUserEmail = config.currentUser?.email;
+  const configUserName = config.currentUser?.name;
+  const configUserAvatar = config.currentUser?.avatar;
+  const configUserStatus = config.currentUser?.status;
   useEffect10(() => {
+    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`);
@@ -3375,24 +3946,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 = useCallback8(
+  }, [configConversationId, configUserEmail, configUserName, configUserAvatar, configUserStatus, storageKeyPrefix, identityMode]);
+  const handlePreChatSubmit = useCallback9(
     (name, email) => {
       const convId = conversationId || generateSessionId();
       const user = { name, email, type: "customer", status: "online" };
@@ -3418,49 +4018,52 @@ function Chat({
   const primaryColor = config.theme?.primary || "#337eff";
   const primaryStrong = config.theme?.primaryStrong || "#005eff";
   if (currentState === "minimized") {
-    return /* @__PURE__ */ jsx11("div", { className: `fixed bottom-5 ${positionClass} z-50 ${className}`, children: /* @__PURE__ */ jsxs10(
-      "button",
+    return /* @__PURE__ */ jsx14(
+      "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__ */ jsx11(ChatBubbleIcon, { size: 28, color: "white", className: "pointer-events-none" }),
-          /* @__PURE__ */ jsx11(
-            "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__ */ jsxs13(
+          "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__ */ jsx14(ChatBubbleIcon, { size: 36, className: "pointer-events-none" }),
+              /* @__PURE__ */ jsx14(
+                "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__ */ jsx11(
+    return /* @__PURE__ */ jsx14(
       PreChatForm,
       {
         onSubmit: handlePreChatSubmit,
@@ -3477,16 +4080,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__ */ jsx11("div", { style: widgetAnimationStyle, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     ChatWidget,
     {
       config: fullConfig,
@@ -3495,16 +4089,16 @@ function Chat({
       onMinimize: () => setState("minimized"),
       resolvedPosition: position
     }
-  ) });
+  );
 }
 
 // src/components/TypingIndicator.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function TypingIndicator({ isTyping, userName }) {
   if (!isTyping) {
     return null;
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       className: "px-4 py-2",
@@ -3512,8 +4106,8 @@ function TypingIndicator({ isTyping, userName }) {
         borderTop: "1px solid rgba(255,255,255,0.06)",
         backgroundColor: "rgba(0,0,0,0.15)"
       },
-      children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx12("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx15("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx15(
           "span",
           {
             className: "rounded-full animate-bounce",
@@ -3527,7 +4121,7 @@ function TypingIndicator({ isTyping, userName }) {
           },
           i
         )) }),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx15(
           "span",
           {
             style: {
@@ -3543,6 +4137,9 @@ function TypingIndicator({ isTyping, userName }) {
   );
 }
 export {
+  BookingCancelledCard,
+  BookingConfirmationCard,
+  BookingSlotPicker,
   Chat,
   ChatHeader,
   ChatInput,