@eshal-bot/chat-widget 0.1.3 → 0.1.4

package/dist/chat-widget.js

@@ -644,19 +644,145 @@
     return null;
   };
 
+  /**
+   * Initializes the PCM audio player worklet that streams inline PCM chunks
+   * coming from the ADK websocket events.
+   */
+  async function startAudioPlayerWorklet() {
+    if (typeof window === 'undefined') {
+      throw new Error('Audio player can only be initialized in the browser');
+    }
+    const audioContext = new AudioContext({
+      sampleRate: 24000
+    });
+
+    // For webpack/vite, we need to use a different approach
+    // We'll inline the worklet code or use a blob URL
+    const workletCode = "\n    class PCMPlayerProcessor extends AudioWorkletProcessor {\n      constructor() {\n        super();\n        this.bufferSize = 24000 * 180;\n        this.buffer = new Float32Array(this.bufferSize);\n        this.writeIndex = 0;\n        this.readIndex = 0;\n        this.port.onmessage = (event) => {\n          if (event.data?.command === 'endOfAudio') {\n            this.readIndex = this.writeIndex;\n            return;\n          }\n          const int16Samples = new Int16Array(event.data);\n          this.enqueue(int16Samples);\n        };\n      }\n\n      enqueue(samples) {\n        for (let i = 0; i < samples.length; i += 1) {\n          const floatVal = samples[i] / 32768;\n          this.buffer[this.writeIndex] = floatVal;\n          this.writeIndex = (this.writeIndex + 1) % this.bufferSize;\n          if (this.writeIndex === this.readIndex) {\n            this.readIndex = (this.readIndex + 1) % this.bufferSize;\n          }\n        }\n      }\n\n      process(inputs, outputs) {\n        const output = outputs[0];\n        const framesPerBlock = output[0].length;\n        for (let frame = 0; frame < framesPerBlock; frame += 1) {\n          output[0][frame] = this.buffer[this.readIndex];\n          if (output.length > 1) {\n            output[1][frame] = this.buffer[this.readIndex];\n          }\n          if (this.readIndex !== this.writeIndex) {\n            this.readIndex = (this.readIndex + 1) % this.bufferSize;\n          }\n        }\n        return true;\n      }\n    }\n\n    registerProcessor('pcm-player-processor', PCMPlayerProcessor);\n  ";
+    const blob = new Blob([workletCode], {
+      type: 'application/javascript'
+    });
+    const workletUrl = URL.createObjectURL(blob);
+    await audioContext.audioWorklet.addModule(workletUrl);
+    const audioPlayerNode = new AudioWorkletNode(audioContext, 'pcm-player-processor');
+    audioPlayerNode.connect(audioContext.destination);
+    URL.revokeObjectURL(workletUrl);
+    return [audioPlayerNode, audioContext];
+  }
+
+  /**
+   * Bootstraps the PCM recorder audio worklet, captures mic audio at 16kHz
+   * mono, and forwards buffers through the provided handler.
+   */
+  async function startAudioRecorderWorklet(onPcmChunk) {
+    if (typeof window === 'undefined') {
+      throw new Error('Audio recorder can only run in the browser');
+    }
+    const audioRecorderContext = new AudioContext({
+      sampleRate: 16000
+    });
+    const workletCode = "\n    class PCMRecorderProcessor extends AudioWorkletProcessor {\n      process(inputs) {\n        if (!inputs.length || !inputs[0].length) {\n          return true;\n        }\n        const inputChannel = inputs[0][0];\n        this.port.postMessage(new Float32Array(inputChannel));\n        return true;\n      }\n    }\n\n    registerProcessor('pcm-recorder-processor', PCMRecorderProcessor);\n  ";
+    const blob = new Blob([workletCode], {
+      type: 'application/javascript'
+    });
+    const workletUrl = URL.createObjectURL(blob);
+    await audioRecorderContext.audioWorklet.addModule(workletUrl);
+    const micStream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        channelCount: 1
+      }
+    });
+    const source = audioRecorderContext.createMediaStreamSource(micStream);
+    const audioRecorderNode = new AudioWorkletNode(audioRecorderContext, 'pcm-recorder-processor');
+    audioRecorderNode.port.onmessage = event => {
+      const pcmData = convertFloat32ToPCM(event.data);
+      onPcmChunk(pcmData);
+    };
+    source.connect(audioRecorderNode);
+    URL.revokeObjectURL(workletUrl);
+    return [audioRecorderNode, audioRecorderContext, micStream];
+  }
+
+  /**
+   * Stops all microphone tracks.
+   */
+  function stopMicrophone(stream) {
+    if (!stream) {
+      return;
+    }
+    stream.getTracks().forEach(track => track.stop());
+  }
+  const INT16_MAX = 0x7fff;
+  function convertFloat32ToPCM(float32Array) {
+    const pcm16Array = new Int16Array(float32Array.length);
+    for (let i = 0; i < float32Array.length; i += 1) {
+      pcm16Array[i] = Math.max(-1, Math.min(1, float32Array[i])) * INT16_MAX;
+    }
+    return pcm16Array.buffer;
+  }
+
+  var _process$env;
+
+  // BIDI WebSocket base URL - can be overridden via config
+  const BIDI_WS_BASE = typeof process !== 'undefined' && (_process$env = process.env) !== null && _process$env !== void 0 && _process$env.NEXT_PUBLIC_BIDI_WS_BASE ? process.env.NEXT_PUBLIC_BIDI_WS_BASE : 'wss://dev.eshal.ai/knowledge-api/ws';
+
+  /**
+   * Clean CJK (Chinese, Japanese, Korean) spaces
+   */
+  const cleanCJKSpaces = value => {
+    return value.replace(/([\u3000-\u303f\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uff00-\uffef])\s+([\u3000-\u303f\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uff00-\uffef])/g, '$1$2');
+  };
+
+  /**
+   * Convert base64 to ArrayBuffer
+   */
+  const base64ToArrayBuffer = base64 => {
+    if (typeof window === 'undefined') {
+      return new ArrayBuffer(0);
+    }
+    let normalized = base64.replace(/-/g, '+').replace(/_/g, '/');
+    while (normalized.length % 4 !== 0) {
+      normalized += '=';
+    }
+    const binary = window.atob(normalized);
+    const len = binary.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i += 1) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes.buffer;
+  };
+
+  /**
+   * Sanitize WebSocket base URL
+   */
+  const sanitizeWsBase = value => value.replace(/\/$/, '');
+
+  /**
+   * CN utility for conditional class names
+   */
+  const cn = function () {
+    for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
+      classes[_key] = arguments[_key];
+    }
+    return classes.filter(Boolean).join(' ');
+  };
+
   const createMessage = _ref => {
     let {
       id,
       role,
       content,
-      isProcessing = false
+      isProcessing = false,
+      metadata
     } = _ref;
     return {
       id,
       role,
       content,
       timestamp: new Date(),
-      isProcessing
+      isProcessing,
+      metadata
     };
   };
   const useChatState = _ref2 => {
@@ -668,7 +794,8 @@
       organizationId,
       autoOpen,
       openDelay,
-      darkMode
+      darkMode,
+      enableVoiceInteraction = false
     } = _ref2;
     const [isOpen, setIsOpen] = reactExports.useState(autoOpen);
     const [isMinimized, setIsMinimized] = reactExports.useState(false);
@@ -689,6 +816,31 @@
     const [isLoading, setIsLoading] = reactExports.useState(false);
     const widgetRef = reactExports.useRef(null);
     const messageIdRef = reactExports.useRef(1);
+
+    // Bidi/Voice state
+    const [isVoiceSessionActive, setIsVoiceSessionActive] = reactExports.useState(false);
+    const [bidiMessages, setBidiMessages] = reactExports.useState([]);
+    const [voiceStatus, setVoiceStatus] = reactExports.useState("idle"); // 'idle' | 'connecting' | 'connected' | 'error'
+    const [voiceError, setVoiceError] = reactExports.useState(null);
+    const [bidiSessionId] = reactExports.useState(() => "widget-session-".concat(Math.random().toString(36).slice(2, 9)));
+
+    // Bidi refs
+    const websocketRef = reactExports.useRef(null);
+    const audioPlayerNodeRef = reactExports.useRef(null);
+    const audioPlayerContextRef = reactExports.useRef(null);
+    const audioRecorderNodeRef = reactExports.useRef(null);
+    const audioRecorderContextRef = reactExports.useRef(null);
+    const micStreamRef = reactExports.useRef(null);
+    const currentInputMessageIdRef = reactExports.useRef(null);
+    const currentAssistantMessageIdRef = reactExports.useRef(null);
+    const isAudioReadyRef = reactExports.useRef(false);
+    const isVoiceSessionActiveRef = reactExports.useRef(false);
+    reactExports.useRef(null);
+    const websocketUrl = reactExports.useMemo(() => {
+      if (!organizationId) return null;
+      const normalizedBase = sanitizeWsBase(BIDI_WS_BASE);
+      return "".concat(normalizedBase, "/").concat(organizationId, "/").concat(bidiSessionId);
+    }, [organizationId, bidiSessionId]);
     const getNextMessageId = reactExports.useCallback(() => {
       const id = "msg-".concat(messageIdRef.current);
       messageIdRef.current += 1;
@@ -840,17 +992,386 @@
     const handleQuickQuestion = question => {
       void sendMessage(question);
     };
+
+    /**
+     * Handle user decision for HITL (Human-in-the-Loop)
+     */
+    const handleDecision = reactExports.useCallback(async (decisionId, optionId, optionValue) => {
+      // Remove the decision message from the list
+      setMessages(prev => prev.filter(msg => {
+        var _msg$decisionData;
+        return ((_msg$decisionData = msg.decisionData) === null || _msg$decisionData === void 0 ? void 0 : _msg$decisionData.decisionId) !== decisionId;
+      }));
+
+      // Handle the decision based on the selected option
+      if (optionValue === "connect_agent") {
+        // User wants to connect with a human agent
+        const responseMessage = createMessage({
+          id: getNextMessageId(),
+          role: "assistant",
+          content: "Great! I'm setting up a connection with a live customer service agent. Please hold on for a moment while I transfer you."
+        });
+        setMessages(prev => [...prev, responseMessage]);
+      } else if (optionValue === "decline") {
+        // User declined to connect with a human agent
+        const responseMessage = createMessage({
+          id: getNextMessageId(),
+          role: "assistant",
+          content: "I understand. I apologize that I don't have specific information about your query in my knowledge base. Is there anything else I can help you with?"
+        });
+        setMessages(prev => [...prev, responseMessage]);
+      }
+    }, [getNextMessageId]);
+
+    // Bidi/Voice functions
+    const finalizePendingInputMessage = reactExports.useCallback(() => {
+      if (!currentInputMessageIdRef.current) {
+        return;
+      }
+      setBidiMessages(prev => prev.map(message => message.id === currentInputMessageIdRef.current ? _objectSpread2(_objectSpread2({}, message), {}, {
+        isProcessing: false
+      }) : message));
+      currentInputMessageIdRef.current = null;
+    }, []);
+    const appendUserTranscription = reactExports.useCallback(function (text) {
+      let finished = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (!text) {
+        return;
+      }
+      const chunk = cleanCJKSpaces(text);
+      setBidiMessages(prev => {
+        if (!currentInputMessageIdRef.current) {
+          const newId = "bidi-input-".concat(Date.now());
+          currentInputMessageIdRef.current = newId;
+          const userMessage = createMessage({
+            id: newId,
+            role: "user",
+            content: chunk,
+            isProcessing: !finished,
+            metadata: {
+              source: "bidi",
+              transcriptionType: "input"
+            }
+          });
+          return [...prev, userMessage];
+        }
+        return prev.map(message => {
+          if (message.id !== currentInputMessageIdRef.current) {
+            return message;
+          }
+          const combined = cleanCJKSpaces("".concat(message.content || "").concat(chunk));
+          return _objectSpread2(_objectSpread2({}, message), {}, {
+            content: combined,
+            timestamp: new Date(),
+            isProcessing: !finished,
+            metadata: _objectSpread2(_objectSpread2({}, message.metadata), {}, {
+              transcriptionType: "input"
+            })
+          });
+        });
+      });
+      if (finished) {
+        currentInputMessageIdRef.current = null;
+      }
+    }, []);
+    const appendAssistantContent = reactExports.useCallback(function (text) {
+      let finished = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (!text) {
+        return;
+      }
+      finalizePendingInputMessage();
+      setBidiMessages(prev => {
+        if (!currentAssistantMessageIdRef.current) {
+          const newId = "bidi-assistant-".concat(Date.now());
+          currentAssistantMessageIdRef.current = newId;
+          const assistantMessage = createMessage({
+            id: newId,
+            role: "assistant",
+            content: text,
+            isProcessing: !finished,
+            metadata: {
+              source: "bidi"
+            }
+          });
+          return [...prev, assistantMessage];
+        }
+        return prev.map(message => {
+          if (message.id !== currentAssistantMessageIdRef.current) {
+            return message;
+          }
+          return _objectSpread2(_objectSpread2({}, message), {}, {
+            content: "".concat(message.content || "").concat(text),
+            timestamp: new Date(),
+            isProcessing: !finished
+          });
+        });
+      });
+      if (finished) {
+        currentAssistantMessageIdRef.current = null;
+      }
+    }, [finalizePendingInputMessage]);
+    const handleContentParts = reactExports.useCallback(parts => {
+      parts.forEach(part => {
+        var _part$inlineData, _part$inlineData$mime;
+        if ((_part$inlineData = part.inlineData) !== null && _part$inlineData !== void 0 && _part$inlineData.data && (_part$inlineData$mime = part.inlineData.mimeType) !== null && _part$inlineData$mime !== void 0 && _part$inlineData$mime.startsWith("audio/pcm")) {
+          if (audioPlayerNodeRef.current) {
+            audioPlayerNodeRef.current.port.postMessage(base64ToArrayBuffer(part.inlineData.data));
+          }
+        }
+        if (part.text) {
+          appendAssistantContent(part.text, false);
+        }
+      });
+    }, [appendAssistantContent]);
+    const handleTurnComplete = reactExports.useCallback(() => {
+      currentAssistantMessageIdRef.current = null;
+      currentInputMessageIdRef.current = null;
+      setBidiMessages(prev => prev.map(message => {
+        var _message$metadata;
+        return ((_message$metadata = message.metadata) === null || _message$metadata === void 0 ? void 0 : _message$metadata.source) === "bidi" && message.isProcessing ? _objectSpread2(_objectSpread2({}, message), {}, {
+          isProcessing: false
+        }) : message;
+      }));
+    }, []);
+    const handleInterrupted = reactExports.useCallback(() => {
+      if (audioPlayerNodeRef.current) {
+        audioPlayerNodeRef.current.port.postMessage({
+          command: "endOfAudio"
+        });
+      }
+      currentAssistantMessageIdRef.current = null;
+      currentInputMessageIdRef.current = null;
+      setBidiMessages(prev => prev.map(message => {
+        var _message$metadata2;
+        return ((_message$metadata2 = message.metadata) === null || _message$metadata2 === void 0 ? void 0 : _message$metadata2.source) === "bidi" ? _objectSpread2(_objectSpread2({}, message), {}, {
+          isProcessing: false,
+          metadata: _objectSpread2(_objectSpread2({}, message.metadata), {}, {
+            interrupted: true
+          })
+        }) : message;
+      }));
+    }, []);
+    const handleBidiEvent = reactExports.useCallback(event => {
+      var _event$inputTranscrip, _event$outputTranscri, _event$content;
+      if (!event) {
+        return;
+      }
+      if (event.turnComplete) {
+        handleTurnComplete();
+        return;
+      }
+      if (event.interrupted) {
+        handleInterrupted();
+        return;
+      }
+      if ((_event$inputTranscrip = event.inputTranscription) !== null && _event$inputTranscrip !== void 0 && _event$inputTranscrip.text) {
+        appendUserTranscription(event.inputTranscription.text, Boolean(event.inputTranscription.finished));
+      }
+      if ((_event$outputTranscri = event.outputTranscription) !== null && _event$outputTranscri !== void 0 && _event$outputTranscri.text) {
+        appendAssistantContent(event.outputTranscription.text, Boolean(event.outputTranscription.finished));
+      }
+      if ((_event$content = event.content) !== null && _event$content !== void 0 && _event$content.parts) {
+        handleContentParts(event.content.parts);
+      }
+    }, [appendAssistantContent, appendUserTranscription, handleContentParts, handleInterrupted, handleTurnComplete]);
+    const handleRecorderAudio = reactExports.useCallback(pcmData => {
+      const ws = websocketRef.current;
+      if (!isVoiceSessionActiveRef.current || !ws || ws.readyState !== WebSocket.OPEN) {
+        return;
+      }
+      ws.send(pcmData);
+    }, []);
+    const initializeAudioPipeline = reactExports.useCallback(async () => {
+      if (isAudioReadyRef.current || typeof window === "undefined") {
+        return;
+      }
+      try {
+        const [playerNode, playerContext] = await startAudioPlayerWorklet();
+        audioPlayerNodeRef.current = playerNode;
+        audioPlayerContextRef.current = playerContext;
+        await playerContext.resume();
+        const [recorderNode, recorderContext, micStream] = await startAudioRecorderWorklet(handleRecorderAudio);
+        audioRecorderNodeRef.current = recorderNode;
+        audioRecorderContextRef.current = recorderContext;
+        micStreamRef.current = micStream;
+        await recorderContext.resume();
+        isAudioReadyRef.current = true;
+      } catch (error) {
+        console.error("Failed to initialize audio pipeline", error);
+        throw error;
+      }
+    }, [handleRecorderAudio]);
+    const connectWebsocket = reactExports.useCallback(() => {
+      if (typeof window === "undefined" || !websocketUrl) {
+        return;
+      }
+      if (websocketRef.current && websocketRef.current.readyState === WebSocket.OPEN) {
+        return;
+      }
+      setVoiceStatus("connecting");
+      setVoiceError(null);
+      try {
+        const ws = new WebSocket(websocketUrl);
+        websocketRef.current = ws;
+        ws.onopen = () => {
+          setVoiceStatus("connected");
+        };
+        ws.onmessage = event => {
+          try {
+            const payload = JSON.parse(event.data);
+            handleBidiEvent(payload);
+          } catch (error) {
+            console.error("Failed to parse ADK event", error);
+          }
+        };
+        ws.onerror = () => {
+          setVoiceStatus("error");
+          setVoiceError("Voice session connection error");
+        };
+        ws.onclose = () => {
+          websocketRef.current = null;
+          setVoiceStatus("idle");
+          if (isVoiceSessionActiveRef.current) {
+            setTimeout(() => {
+              connectWebsocket();
+            }, 5000);
+          }
+        };
+      } catch (error) {
+        console.error("Failed to open voice websocket", error);
+        setVoiceStatus("error");
+        setVoiceError(error instanceof Error ? error.message : "Unable to start voice session");
+      }
+    }, [handleBidiEvent, websocketUrl]);
+    const startVoiceSession = reactExports.useCallback(async () => {
+      if (!enableVoiceInteraction || !organizationId) {
+        return;
+      }
+      setVoiceError(null);
+      setVoiceStatus(prev => prev === "connected" ? prev : "connecting");
+      setIsVoiceSessionActive(true);
+      isVoiceSessionActiveRef.current = true;
+      setBidiMessages(prev => {
+        if (prev.length > 0) {
+          return prev;
+        }
+        if (!welcomeMessage || welcomeMessage.trim() === "") {
+          return [];
+        }
+        const welcomeMsg = createMessage({
+          id: "bidi-welcome-".concat(Date.now()),
+          role: "assistant",
+          content: welcomeMessage,
+          metadata: {
+            source: "bidi"
+          }
+        });
+        return [welcomeMsg];
+      });
+      connectWebsocket();
+      try {
+        await initializeAudioPipeline();
+      } catch (error) {
+        console.error("Failed to start audio pipeline", error);
+        setVoiceError(error instanceof Error ? error.message : "Unable to access microphone");
+        setVoiceStatus("error");
+      }
+    }, [enableVoiceInteraction, organizationId, welcomeMessage, connectWebsocket, initializeAudioPipeline]);
+    const stopVoiceSession = reactExports.useCallback(() => {
+      var _audioPlayerNodeRef$c, _audioPlayerContextRe, _audioRecorderNodeRef, _audioRecorderContext;
+      setIsVoiceSessionActive(false);
+      isVoiceSessionActiveRef.current = false;
+      setVoiceStatus("idle");
+      setVoiceError(null);
+      if (websocketRef.current && websocketRef.current.readyState === WebSocket.OPEN) {
+        websocketRef.current.close();
+      }
+      websocketRef.current = null;
+      (_audioPlayerNodeRef$c = audioPlayerNodeRef.current) === null || _audioPlayerNodeRef$c === void 0 || _audioPlayerNodeRef$c.disconnect();
+      (_audioPlayerContextRe = audioPlayerContextRef.current) === null || _audioPlayerContextRe === void 0 || _audioPlayerContextRe.close();
+      audioPlayerNodeRef.current = null;
+      audioPlayerContextRef.current = null;
+      (_audioRecorderNodeRef = audioRecorderNodeRef.current) === null || _audioRecorderNodeRef === void 0 || _audioRecorderNodeRef.disconnect();
+      (_audioRecorderContext = audioRecorderContextRef.current) === null || _audioRecorderContext === void 0 || _audioRecorderContext.close();
+      audioRecorderNodeRef.current = null;
+      audioRecorderContextRef.current = null;
+      stopMicrophone(micStreamRef.current);
+      micStreamRef.current = null;
+      isAudioReadyRef.current = false;
+    }, []);
+    const handleVoiceToggle = reactExports.useCallback(() => {
+      if (isVoiceSessionActive) {
+        stopVoiceSession();
+        return;
+      }
+      if (voiceStatus === "connecting") {
+        return;
+      }
+      void startVoiceSession();
+    }, [isVoiceSessionActive, startVoiceSession, stopVoiceSession, voiceStatus]);
+    const sendBidiTextMessage = reactExports.useCallback(text => {
+      const trimmed = text.trim();
+      if (!trimmed) {
+        return;
+      }
+      const ws = websocketRef.current;
+      if (!ws || ws.readyState !== WebSocket.OPEN) {
+        setVoiceError("Voice session is not connected yet");
+        return;
+      }
+      ws.send(JSON.stringify({
+        type: "text",
+        text: trimmed
+      }));
+      const userMessage = createMessage({
+        id: "bidi-user-".concat(Date.now()),
+        role: "user",
+        content: trimmed,
+        metadata: {
+          source: "bidi"
+        }
+      });
+      setBidiMessages(prev => [...prev, userMessage]);
+      setInputValue("");
+    }, []);
+
+    // Cleanup on unmount
+    reactExports.useEffect(() => {
+      isVoiceSessionActiveRef.current = isVoiceSessionActive;
+    }, [isVoiceSessionActive]);
+    reactExports.useEffect(() => {
+      return () => {
+        var _audioPlayerNodeRef$c2, _audioPlayerContextRe2, _audioRecorderNodeRef2, _audioRecorderContext2;
+        if (websocketRef.current && websocketRef.current.readyState === WebSocket.OPEN) {
+          websocketRef.current.close();
+        }
+        (_audioPlayerNodeRef$c2 = audioPlayerNodeRef.current) === null || _audioPlayerNodeRef$c2 === void 0 || _audioPlayerNodeRef$c2.disconnect();
+        (_audioPlayerContextRe2 = audioPlayerContextRef.current) === null || _audioPlayerContextRe2 === void 0 || _audioPlayerContextRe2.close();
+        (_audioRecorderNodeRef2 = audioRecorderNodeRef.current) === null || _audioRecorderNodeRef2 === void 0 || _audioRecorderNodeRef2.disconnect();
+        (_audioRecorderContext2 = audioRecorderContextRef.current) === null || _audioRecorderContext2 === void 0 || _audioRecorderContext2.close();
+        stopMicrophone(micStreamRef.current);
+        micStreamRef.current = null;
+        isAudioReadyRef.current = false;
+      };
+    }, []);
     const memoizedQuickQuestions = reactExports.useMemo(() => quickQuestions, [quickQuestions]);
+
+    // Determine which messages to use
+    const activeMessages = isVoiceSessionActive ? bidiMessages : messages;
     return {
       // State
       isOpen,
       isMinimized,
       isDark,
-      messages,
+      messages: activeMessages,
       inputValue,
       isLoading,
       widgetRef,
       quickQuestions: memoizedQuickQuestions,
+      // Bidi/Voice state
+      isVoiceSessionActive,
+      voiceStatus,
+      voiceError,
       // Actions
       setInputValue,
       handleSend,
@@ -859,7 +1380,11 @@
       toggleChat,
       toggleTheme,
       toggleMinimize,
-      closeChat
+      closeChat,
+      handleDecision,
+      // Bidi/Voice actions
+      handleVoiceToggle,
+      sendBidiTextMessage
     };
   };
 
@@ -923,13 +1448,13 @@
    */
 
 
-  const Bot = createLucideIcon("Bot", [
-    ["path", { d: "M12 8V4H8", key: "hb8ula" }],
-    ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
-    ["path", { d: "M2 14h2", key: "vft8re" }],
-    ["path", { d: "M20 14h2", key: "4cs60a" }],
-    ["path", { d: "M15 13v2", key: "1xurst" }],
-    ["path", { d: "M9 13v2", key: "rq6x2g" }]
+  const AudioLines = createLucideIcon("AudioLines", [
+    ["path", { d: "M2 10v3", key: "1fnikh" }],
+    ["path", { d: "M6 6v11", key: "11sgs0" }],
+    ["path", { d: "M10 3v18", key: "yhl04a" }],
+    ["path", { d: "M14 8v7", key: "3a1oy3" }],
+    ["path", { d: "M18 5v13", key: "123xd1" }],
+    ["path", { d: "M22 10v3", key: "154ddg" }]
   ]);
 
   /**
@@ -940,11 +1465,8 @@
    */
 
 
-  const Maximize2 = createLucideIcon("Maximize2", [
-    ["polyline", { points: "15 3 21 3 21 9", key: "mznyad" }],
-    ["polyline", { points: "9 21 3 21 3 15", key: "1avn1i" }],
-    ["line", { x1: "21", x2: "14", y1: "3", y2: "10", key: "ota7mn" }],
-    ["line", { x1: "3", x2: "10", y1: "21", y2: "14", key: "1atl0r" }]
+  const Loader2 = createLucideIcon("Loader2", [
+    ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
   ]);
 
   /**
@@ -955,10 +1477,11 @@
    */
 
 
-  const MessageCircleQuestion = createLucideIcon("MessageCircleQuestion", [
-    ["path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z", key: "vv11sd" }],
-    ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
-    ["path", { d: "M12 17h.01", key: "p32p05" }]
+  const Maximize2 = createLucideIcon("Maximize2", [
+    ["polyline", { points: "15 3 21 3 21 9", key: "mznyad" }],
+    ["polyline", { points: "9 21 3 21 3 15", key: "1avn1i" }],
+    ["line", { x1: "21", x2: "14", y1: "3", y2: "10", key: "ota7mn" }],
+    ["line", { x1: "3", x2: "10", y1: "21", y2: "14", key: "1atl0r" }]
   ]);
 
   /**
@@ -1059,323 +1582,6 @@
     ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
   ]);
 
-  var jsxRuntime = {exports: {}};
-
-  var reactJsxRuntime_production_min = {};
-
-  /**
-   * @license React
-   * react-jsx-runtime.production.min.js
-   *
-   * Copyright (c) Facebook, Inc. and its affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  var f=reactExports,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
-  function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
-
-  {
-    jsxRuntime.exports = reactJsxRuntime_production_min;
-  }
-
-  var jsxRuntimeExports = jsxRuntime.exports;
-
-  const LOGO_MAX_HEIGHT = "3.5rem";
-  const LOGO_MAX_HEIGHT_COMPACT = "2.5rem";
-  const LOGO_MAX_WIDTH_DEFAULT = "4.5rem";
-  const LOGO_MAX_WIDTH_DEFAULT_COMPACT = "3rem";
-  const LOGO_MAX_WIDTH_WIDE = "9rem";
-  const LOGO_MAX_WIDTH_WIDE_COMPACT = "5.5rem";
-  const STATUS_DOT_SIZE = "0.8rem";
-  const STATUS_DOT_SIZE_COMPACT = "0.65rem";
-  const STATUS_DOT_BORDER_WIDTH = "2px";
-  const STATUS_DOT_BORDER_WIDTH_COMPACT = "1.5px";
-  const STATUS_DOT_DEFAULT_COLOR = "#34d399";
-  const STATUS_DOT_OFFSET = "38%";
-  const STATUS_DOT_OFFSET_COMPACT = "22%";
-  const LogoImage = _ref => {
-    let {
-      src,
-      showStatusDot = false,
-      statusColor = STATUS_DOT_DEFAULT_COLOR,
-      size = "default"
-    } = _ref;
-    const [aspect, setAspect] = reactExports.useState("square");
-    const isCompact = size === "compact";
-    reactExports.useEffect(() => {
-      if (typeof window === "undefined" || !src) {
-        return;
-      }
-      const img = new Image();
-      img.src = src;
-      img.onload = () => {
-        if (img.width > img.height) {
-          setAspect("wide");
-        } else if (img.height > img.width) {
-          setAspect("tall");
-        } else {
-          setAspect("square");
-        }
-      };
-    }, [src]);
-    const containerStyle = {
-      position: "relative",
-      display: "inline-flex"
-    };
-    const imageStyle = {
-      display: "block",
-      objectFit: "contain",
-      height: "auto",
-      width: "auto",
-      maxHeight: isCompact ? LOGO_MAX_HEIGHT_COMPACT : LOGO_MAX_HEIGHT,
-      maxWidth: isCompact ? LOGO_MAX_WIDTH_DEFAULT_COMPACT : LOGO_MAX_WIDTH_DEFAULT
-    };
-    if (aspect === "wide") {
-      imageStyle.maxWidth = isCompact ? LOGO_MAX_WIDTH_WIDE_COMPACT : LOGO_MAX_WIDTH_WIDE;
-    }
-    if (aspect === "tall") {
-      imageStyle.maxHeight = isCompact ? "3rem" : "4rem";
-      imageStyle.maxWidth = isCompact ? "3rem" : "4rem";
-    }
-    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-      style: containerStyle,
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx("img", {
-        src: src,
-        alt: "Logo",
-        style: imageStyle,
-        loading: "lazy"
-      }), showStatusDot && /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-        style: {
-          position: "absolute",
-          bottom: 0,
-          right: 0,
-          width: isCompact ? STATUS_DOT_SIZE_COMPACT : STATUS_DOT_SIZE,
-          height: isCompact ? STATUS_DOT_SIZE_COMPACT : STATUS_DOT_SIZE,
-          borderRadius: "9999px",
-          backgroundColor: statusColor,
-          border: "".concat(isCompact ? STATUS_DOT_BORDER_WIDTH_COMPACT : STATUS_DOT_BORDER_WIDTH, " solid #ffffff"),
-          transform: "translate(".concat(isCompact ? STATUS_DOT_OFFSET_COMPACT : STATUS_DOT_OFFSET, ", ").concat(isCompact ? STATUS_DOT_OFFSET_COMPACT : STATUS_DOT_OFFSET, ")"),
-          pointerEvents: "none"
-        }
-      })]
-    });
-  };
-
-  const IS_BROWSER = typeof window !== "undefined";
-  const SYSTEM_FONT_FAMILIES = new Set(["Arial", "Helvetica", "Times New Roman", "Georgia", "Courier New", "Verdana", "Trebuchet MS", "Palatino", "Garamond", "Tahoma", "Lucida Sans", "Lucida Grande", "Lucida Console", "Gill Sans", "Impact", "Comic Sans MS", "system-ui"].map(font => font.toLowerCase()));
-  const GENERIC_FONT_KEYWORDS = ["sans-serif", "serif", "monospace", "cursive", "fantasy"];
-  const GOOGLE_FONT_WEIGHTS = "300,400,500,600,700";
-  const loadedFonts = new Set();
-  let webFontLoaderPromise = null;
-  const shouldSkipLoading = fontFamily => {
-    const normalized = fontFamily.trim().toLowerCase();
-    if (!normalized) return true;
-    if (SYSTEM_FONT_FAMILIES.has(normalized)) return true;
-    return GENERIC_FONT_KEYWORDS.some(keyword => normalized.includes(keyword));
-  };
-  const toGoogleFontQuery = fontFamily => fontFamily.trim().replace(/\s+/g, "+");
-  function useGoogleFont(fontFamily) {
-    reactExports.useEffect(() => {
-      var _fontFamily$split$;
-      if (!IS_BROWSER || !fontFamily) {
-        return;
-      }
-      const baseFont = (_fontFamily$split$ = fontFamily.split(",")[0]) === null || _fontFamily$split$ === void 0 ? void 0 : _fontFamily$split$.trim();
-      if (!baseFont || loadedFonts.has(baseFont)) {
-        return;
-      }
-      if (shouldSkipLoading(baseFont)) {
-        loadedFonts.add(baseFont);
-        return;
-      }
-      let isMounted = true;
-      const loadFont = async () => {
-        try {
-          if (!webFontLoaderPromise) {
-            webFontLoaderPromise = Promise.resolve().then(function () { return webfontloader; });
-          }
-          const webFontModule = await webFontLoaderPromise;
-          const WebFont = webFontModule && "default" in webFontModule ? webFontModule.default : webFontModule;
-          const googleQuery = toGoogleFontQuery(baseFont);
-          WebFont.load({
-            google: {
-              families: ["".concat(googleQuery, ":").concat(GOOGLE_FONT_WEIGHTS)]
-            },
-            fontactive: family => {
-              if (isMounted) {
-                loadedFonts.add(family);
-              }
-            },
-            fontinactive: family => {
-              if (isMounted) {
-                loadedFonts.add(family);
-              }
-              console.warn("Warning: failed to load Google Font: ".concat(family));
-            }
-          });
-        } catch (error) {
-          console.error("Warning: WebFont loader error:", error);
-        }
-      };
-      void loadFont();
-      return () => {
-        isMounted = false;
-      };
-    }, [fontFamily]);
-  }
-
-  const lightenColor = function (color) {
-    let amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.12;
-    if (!color) {
-      return color;
-    }
-    const hexMatch = color.trim().match(/^#([0-9a-f]{3,8})$/i);
-    if (!hexMatch) {
-      return color;
-    }
-    let hex = hexMatch[1];
-    if (hex.length === 3) {
-      hex = hex.split("").map(char => char + char).join("");
-    }
-    if (hex.length === 8) {
-      hex = hex.slice(0, 6);
-    }
-    if (hex.length !== 6) {
-      return color;
-    }
-    const num = parseInt(hex, 16);
-    const r = num >> 16 & 255;
-    const g = num >> 8 & 255;
-    const b = num & 255;
-    const mix = channel => {
-      const mixed = Math.round(channel + (255 - channel) * amount);
-      return Math.min(255, Math.max(0, mixed));
-    };
-    const [lr, lg, lb] = [mix(r), mix(g), mix(b)];
-    const toHex = channel => channel.toString(16).padStart(2, "0");
-    return "#".concat(toHex(lr)).concat(toHex(lg)).concat(toHex(lb));
-  };
-  const ChatHeader = _ref => {
-    let {
-      conciergeName,
-      companyName,
-      companyLogo,
-      primaryColor,
-      isDark,
-      isMinimized = false,
-      textColor,
-      fontFamily,
-      fontSize,
-      onToggleTheme,
-      onMinimize,
-      onClose
-    } = _ref;
-    useGoogleFont(fontFamily);
-    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-      className: "text-white ".concat(isMinimized ? "px-4 py-2.5" : "px-5 py-4", " flex items-center justify-between relative overflow-hidden rounded-t-2xl"),
-      style: {
-        background: "linear-gradient(135deg, ".concat(primaryColor, " 0%, ").concat(lightenColor(primaryColor, 0.2), " 100%)"),
-        fontFamily
-      },
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
-        className: "absolute inset-0 pointer-events-none transition-opacity duration-200 ".concat(isMinimized ? "opacity-0" : "opacity-100", " bg-gradient-to-br from-white/10 to-transparent")
-      }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-        className: "flex items-center ".concat(isMinimized ? "gap-1.5" : "gap-3", " relative z-10 min-w-0"),
-        children: [companyLogo ? /*#__PURE__*/jsxRuntimeExports.jsx(LogoImage, {
-          src: companyLogo,
-          showStatusDot: true,
-          statusColor: "#34d399",
-          size: isMinimized ? "compact" : "default"
-        }) : /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-          className: "relative",
-          children: [/*#__PURE__*/jsxRuntimeExports.jsx(MessageCircle, {
-            className: "transition-all ".concat(isMinimized ? "w-8 h-8" : "w-10 h-10")
-          }), /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-            className: "absolute rounded-full",
-            style: {
-              bottom: 0,
-              right: 0,
-              width: isMinimized ? "0.65rem" : "0.8rem",
-              height: isMinimized ? "0.65rem" : "0.8rem",
-              backgroundColor: "#34d399",
-              border: isMinimized ? "1.5px solid #ffffff" : "2px solid #ffffff",
-              transform: "translate(".concat(isMinimized ? "22%" : "38%", ", ").concat(isMinimized ? "22%" : "38%", ")"),
-              pointerEvents: "none"
-            }
-          })]
-        }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-          className: "flex items-center gap-2 min-w-0",
-          children: /*#__PURE__*/jsxRuntimeExports.jsx("h3", {
-            className: "font-semibold leading-tight truncate",
-            style: {
-              fontSize: fontSize ? "calc(".concat(fontSize, " + ").concat(isMinimized ? "6px" : "10px", ")") : isMinimized ? "13px" : "15px",
-              color: textColor || "#FFFFFF"
-            },
-            children: conciergeName
-          })
-        })]
-      }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-        className: "flex items-center ".concat(isMinimized ? "gap-3" : "gap-4", " relative z-10 text-white"),
-        children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
-          role: "button",
-          tabIndex: 0,
-          "aria-label": "Toggle theme",
-          onClick: onToggleTheme,
-          onKeyDown: event => {
-            if (event.key === "Enter" || event.key === " ") {
-              event.preventDefault();
-              onToggleTheme === null || onToggleTheme === void 0 || onToggleTheme(event);
-            }
-          },
-          className: "inline-flex h-8 w-8 items-center justify-center cursor-pointer transition-opacity duration-200 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 rounded-full",
-          children: isDark ? /*#__PURE__*/jsxRuntimeExports.jsx(Sun, {
-            className: "w-4 h-4",
-            strokeWidth: 1.6
-          }) : /*#__PURE__*/jsxRuntimeExports.jsx(Moon, {
-            className: "w-4 h-4",
-            strokeWidth: 1.6
-          })
-        }), onMinimize && /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-          role: "button",
-          tabIndex: 0,
-          "aria-label": isMinimized ? "Expand" : "Minimize",
-          onClick: onMinimize,
-          onKeyDown: event => {
-            if (event.key === "Enter" || event.key === " ") {
-              event.preventDefault();
-              onMinimize === null || onMinimize === void 0 || onMinimize(event);
-            }
-          },
-          className: "inline-flex h-8 w-8 items-center justify-center cursor-pointer transition-opacity duration-200 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 rounded-full",
-          children: isMinimized ? /*#__PURE__*/jsxRuntimeExports.jsx(Maximize2, {
-            className: "w-4 h-4",
-            strokeWidth: 1.6
-          }) : /*#__PURE__*/jsxRuntimeExports.jsx(Minimize2, {
-            className: "w-4 h-4",
-            strokeWidth: 1.6
-          })
-        }), /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-          role: "button",
-          tabIndex: 0,
-          "aria-label": "Close",
-          onClick: onClose,
-          onKeyDown: event => {
-            if (event.key === "Enter" || event.key === " ") {
-              event.preventDefault();
-              onClose === null || onClose === void 0 || onClose(event);
-            }
-          },
-          className: "inline-flex h-8 w-8 items-center justify-center cursor-pointer transition-opacity duration-200 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 rounded-full",
-          children: /*#__PURE__*/jsxRuntimeExports.jsx(X, {
-            className: "w-4 h-4",
-            strokeWidth: 1.6
-          })
-        })]
-      })]
-    });
-  };
-
   function ok$2() {}
 
   function unreachable() {}
@@ -4508,6 +4714,28 @@
     ]
   };
 
+  var jsxRuntime = {exports: {}};
+
+  var reactJsxRuntime_production_min = {};
+
+  /**
+   * @license React
+   * react-jsx-runtime.production.min.js
+   *
+   * Copyright (c) Facebook, Inc. and its affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  var f=reactExports,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
+  function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+
+  {
+    jsxRuntime.exports = reactJsxRuntime_production_min;
+  }
+
+  var jsxRuntimeExports = jsxRuntime.exports;
+
   /**
    * @typedef {import('mdast').Nodes} Nodes
    *
@@ -55074,24 +55302,91 @@
     }
   };
 
+  const IS_BROWSER = typeof window !== "undefined";
+  const SYSTEM_FONT_FAMILIES = new Set(["Arial", "Helvetica", "Times New Roman", "Georgia", "Courier New", "Verdana", "Trebuchet MS", "Palatino", "Garamond", "Tahoma", "Lucida Sans", "Lucida Grande", "Lucida Console", "Gill Sans", "Impact", "Comic Sans MS", "system-ui"].map(font => font.toLowerCase()));
+  const GENERIC_FONT_KEYWORDS = ["sans-serif", "serif", "monospace", "cursive", "fantasy"];
+  const GOOGLE_FONT_WEIGHTS = "300,400,500,600,700";
+  const loadedFonts = new Set();
+  let webFontLoaderPromise = null;
+  const shouldSkipLoading = fontFamily => {
+    const normalized = fontFamily.trim().toLowerCase();
+    if (!normalized) return true;
+    if (SYSTEM_FONT_FAMILIES.has(normalized)) return true;
+    return GENERIC_FONT_KEYWORDS.some(keyword => normalized.includes(keyword));
+  };
+  const toGoogleFontQuery = fontFamily => fontFamily.trim().replace(/\s+/g, "+");
+  function useGoogleFont(fontFamily) {
+    reactExports.useEffect(() => {
+      var _fontFamily$split$;
+      if (!IS_BROWSER || !fontFamily) {
+        return;
+      }
+      const baseFont = (_fontFamily$split$ = fontFamily.split(",")[0]) === null || _fontFamily$split$ === void 0 ? void 0 : _fontFamily$split$.trim();
+      if (!baseFont || loadedFonts.has(baseFont)) {
+        return;
+      }
+      if (shouldSkipLoading(baseFont)) {
+        loadedFonts.add(baseFont);
+        return;
+      }
+      let isMounted = true;
+      const loadFont = async () => {
+        try {
+          if (!webFontLoaderPromise) {
+            webFontLoaderPromise = Promise.resolve().then(function () { return webfontloader; });
+          }
+          const webFontModule = await webFontLoaderPromise;
+          const WebFont = webFontModule && "default" in webFontModule ? webFontModule.default : webFontModule;
+          const googleQuery = toGoogleFontQuery(baseFont);
+          WebFont.load({
+            google: {
+              families: ["".concat(googleQuery, ":").concat(GOOGLE_FONT_WEIGHTS)]
+            },
+            fontactive: family => {
+              if (isMounted) {
+                loadedFonts.add(family);
+              }
+            },
+            fontinactive: family => {
+              if (isMounted) {
+                loadedFonts.add(family);
+              }
+              console.warn("Warning: failed to load Google Font: ".concat(family));
+            }
+          });
+        } catch (error) {
+          console.error("Warning: WebFont loader error:", error);
+        }
+      };
+      void loadFont();
+      return () => {
+        isMounted = false;
+      };
+    }, [fontFamily]);
+  }
+
   const _excluded = ["node", "children"],
     _excluded2 = ["node", "children"],
     _excluded3 = ["node", "children"],
     _excluded4 = ["node", "children"],
-    _excluded5 = ["className", "children"],
+    _excluded5 = ["node", "children"],
     _excluded6 = ["node", "children"],
     _excluded7 = ["node", "children"],
     _excluded8 = ["node", "children"],
     _excluded9 = ["node", "children"],
     _excluded0 = ["node", "children"],
     _excluded1 = ["node", "children"],
-    _excluded10 = ["node", "children"];
+    _excluded10 = ["node", "children"],
+    _excluded11 = ["className", "children"];
   const StreamingMarkdown = _ref => {
     let {
       content,
       isStreaming,
       isDark = false,
-      isRtl = false
+      isRtl = false,
+      textColor,
+      fontFamily,
+      fontSize
     } = _ref;
     const [displayedContent, setDisplayedContent] = reactExports.useState("");
     const [showCursor, setShowCursor] = reactExports.useState(false);
@@ -55100,19 +55395,23 @@
     const animationFrameRef = reactExports.useRef(null);
     const lastUpdateRef = reactExports.useRef(0);
     reactExports.useEffect(() => {
+      // Reset if content changes significantly
       if (content !== contentRef.current) {
         contentRef.current = content;
+        // If we're already past the new content length, show it all
         if (indexRef.current >= content.length) {
           setDisplayedContent(content);
           setShowCursor(false);
           return;
         }
+        // If new content is shorter, reset
         if (content.length < displayedContent.length) {
           indexRef.current = 0;
           setDisplayedContent("");
         }
       }
       if (!isStreaming) {
+        // Not streaming - show full content immediately
         setDisplayedContent(content);
         setShowCursor(false);
         if (animationFrameRef.current) {
@@ -55120,20 +55419,25 @@
         }
         return;
       }
+
+      // Streaming mode - animate character by character
       setShowCursor(true);
       const animate = timestamp => {
+        // Throttle updates for smooth 60fps animation
         if (timestamp - lastUpdateRef.current < 16) {
           animationFrameRef.current = requestAnimationFrame(animate);
           return;
         }
         lastUpdateRef.current = timestamp;
         if (indexRef.current < content.length) {
+          // Add 2-5 characters per frame for natural speed
           const charsToAdd = Math.max(2, Math.floor(Math.random() * 4));
           const newIndex = Math.min(indexRef.current + charsToAdd, content.length);
           setDisplayedContent(content.slice(0, newIndex));
           indexRef.current = newIndex;
           animationFrameRef.current = requestAnimationFrame(animate);
         } else {
+          // Finished streaming
           setShowCursor(false);
         }
       };
@@ -55143,7 +55447,7 @@
           cancelAnimationFrame(animationFrameRef.current);
         }
       };
-    }, [content, displayedContent.length, isStreaming]);
+    }, [content, isStreaming]);
     return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
       className: "relative",
       style: {
@@ -55152,126 +55456,142 @@
       },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(Markdown, {
         remarkPlugins: [remarkGfm],
-        className: "markdown-body text-sm leading-relaxed space-y-3 ".concat(isDark ? "text-gray-100" : "text-gray-800"),
+        className: "prose prose-sm max-w-none [&>*:last-child]:!mb-0 [&>*:first-child]:!mt-0",
+        style: {
+          color: textColor || (isDark ? "#f3f4f6" : "#1A1A1A"),
+          fontFamily: fontFamily || "Inter",
+          fontSize: fontSize || "14px",
+          margin: 0,
+          padding: 0
+        },
         components: {
-          p(_ref2) {
+          a(_ref2) {
             let {
                 node,
                 children
               } = _ref2,
               props = _objectWithoutProperties$1(_ref2, _excluded);
-            return /*#__PURE__*/jsxRuntimeExports.jsx("p", _objectSpread2(_objectSpread2({
-              className: "mb-2 leading-relaxed ".concat(isDark ? "text-gray-100" : "text-gray-800")
+            return /*#__PURE__*/jsxRuntimeExports.jsx("a", _objectSpread2(_objectSpread2({
+              className: isDark ? "text-blue-400 hover:text-blue-300 hover:underline" : "text-blue-600 hover:underline",
+              target: "_blank",
+              rel: "noopener noreferrer"
             }, props), {}, {
               children: children
             }));
           },
-          h1(_ref3) {
+          p(_ref3) {
             let {
                 node,
                 children
               } = _ref3,
               props = _objectWithoutProperties$1(_ref3, _excluded2);
-            return /*#__PURE__*/jsxRuntimeExports.jsx("h1", _objectSpread2(_objectSpread2({
-              className: "text-xl font-semibold mt-3 mb-2 ".concat(isDark ? "text-gray-100" : "text-gray-900")
+            return /*#__PURE__*/jsxRuntimeExports.jsx("p", _objectSpread2(_objectSpread2({
+              className: "leading-relaxed [&:not(:last-child)]:mb-2 [&:first-child]:!mt-0",
+              style: {
+                color: textColor || (isDark ? "#f3f4f6" : "#1A1A1A"),
+                fontFamily: fontFamily || "Inter",
+                fontSize: fontSize || "14px",
+                margin: 0,
+                marginTop: 0,
+                padding: 0
+              }
             }, props), {}, {
               children: children
             }));
           },
-          h2(_ref4) {
+          ul(_ref4) {
             let {
                 node,
                 children
               } = _ref4,
               props = _objectWithoutProperties$1(_ref4, _excluded3);
-            return /*#__PURE__*/jsxRuntimeExports.jsx("h2", _objectSpread2(_objectSpread2({
-              className: "text-lg font-semibold mt-3 mb-2 ".concat(isDark ? "text-gray-100" : "text-gray-900")
+            return /*#__PURE__*/jsxRuntimeExports.jsx("ul", _objectSpread2(_objectSpread2({
+              className: "list-disc pl-5 space-y-1 [&:first-child]:!mt-0",
+              style: {
+                marginTop: 0
+              }
             }, props), {}, {
               children: children
             }));
           },
-          h3(_ref5) {
+          ol(_ref5) {
             let {
                 node,
                 children
               } = _ref5,
               props = _objectWithoutProperties$1(_ref5, _excluded4);
-            return /*#__PURE__*/jsxRuntimeExports.jsx("h3", _objectSpread2(_objectSpread2({
-              className: "text-base font-semibold mt-3 mb-2 ".concat(isDark ? "text-gray-100" : "text-gray-900")
+            return /*#__PURE__*/jsxRuntimeExports.jsx("ol", _objectSpread2(_objectSpread2({
+              className: "list-decimal pl-5 space-y-1 [&:first-child]:!mt-0",
+              style: {
+                marginTop: 0
+              }
             }, props), {}, {
               children: children
             }));
           },
-          code(_ref6) {
+          li(_ref6) {
             let {
-                className,
+                node,
                 children
               } = _ref6,
               props = _objectWithoutProperties$1(_ref6, _excluded5);
-            const match = /language-(\w+)/.exec(className || "");
-            if (match) {
-              return /*#__PURE__*/jsxRuntimeExports.jsx(SyntaxHighlighter, _objectSpread2(_objectSpread2({
-                style: oneDark,
-                language: match[1],
-                PreTag: "div",
-                wrapLines: true
-              }, props), {}, {
-                children: String(children).replace(/\n$/, "")
-              }));
-            }
-            return /*#__PURE__*/jsxRuntimeExports.jsx("code", _objectSpread2(_objectSpread2({
-              className: className
+            return /*#__PURE__*/jsxRuntimeExports.jsx("li", _objectSpread2(_objectSpread2({
+              className: "mb-1",
+              style: {
+                color: textColor || (isDark ? "#f3f4f6" : "#1A1A1A"),
+                fontFamily: fontFamily || "Inter",
+                fontSize: fontSize || "14px"
+              }
             }, props), {}, {
               children: children
             }));
           },
-          a(_ref7) {
+          h1(_ref7) {
             let {
                 node,
                 children
               } = _ref7,
               props = _objectWithoutProperties$1(_ref7, _excluded6);
-            return /*#__PURE__*/jsxRuntimeExports.jsx("a", _objectSpread2(_objectSpread2({
-              className: isDark ? "text-blue-400 hover:text-blue-300 hover:underline" : "text-blue-600 hover:underline",
-              target: "_blank",
-              rel: "noopener noreferrer"
+            return /*#__PURE__*/jsxRuntimeExports.jsx("h1", _objectSpread2(_objectSpread2({
+              className: "text-xl font-bold mb-2 [&:first-child]:!mt-0",
+              style: {
+                color: textColor || (isDark ? "#f3f4f6" : "#1A1A1A"),
+                fontFamily: fontFamily || "Inter",
+                marginTop: "0.75rem"
+              }
             }, props), {}, {
               children: children
             }));
           },
-          ul(_ref8) {
+          h2(_ref8) {
             let {
                 node,
                 children
               } = _ref8,
               props = _objectWithoutProperties$1(_ref8, _excluded7);
-            return /*#__PURE__*/jsxRuntimeExports.jsx("ul", _objectSpread2(_objectSpread2({
-              className: "list-disc space-y-1",
+            return /*#__PURE__*/jsxRuntimeExports.jsx("h2", _objectSpread2(_objectSpread2({
+              className: "text-lg font-semibold mb-2 [&:first-child]:!mt-0",
               style: {
-                listStyleType: "disc",
-                paddingInlineStart: isRtl ? undefined : "1.25rem",
-                paddingInlineEnd: isRtl ? "1.25rem" : undefined,
-                marginTop: "0.5rem",
-                marginBottom: "0.5rem"
+                color: textColor || (isDark ? "#f3f4f6" : "#1A1A1A"),
+                fontFamily: fontFamily || "Inter",
+                marginTop: "0.75rem"
               }
             }, props), {}, {
               children: children
             }));
           },
-          ol(_ref9) {
+          h3(_ref9) {
             let {
                 node,
                 children
               } = _ref9,
               props = _objectWithoutProperties$1(_ref9, _excluded8);
-            return /*#__PURE__*/jsxRuntimeExports.jsx("ol", _objectSpread2(_objectSpread2({
-              className: "list-decimal space-y-1",
+            return /*#__PURE__*/jsxRuntimeExports.jsx("h3", _objectSpread2(_objectSpread2({
+              className: "text-base font-semibold mb-2 [&:first-child]:!mt-0",
               style: {
-                listStyleType: "decimal",
-                paddingInlineStart: isRtl ? undefined : "1.25rem",
-                paddingInlineEnd: isRtl ? "1.25rem" : undefined,
-                marginTop: "0.5rem",
-                marginBottom: "0.5rem"
+                color: textColor || (isDark ? "#f3f4f6" : "#1A1A1A"),
+                fontFamily: fontFamily || "Inter",
+                marginTop: "0.75rem"
               }
             }, props), {}, {
               children: children
@@ -55327,6 +55647,29 @@
             }, props), {}, {
               children: children
             }));
+          },
+          code(_ref12) {
+            let {
+                className,
+                children
+              } = _ref12,
+              props = _objectWithoutProperties$1(_ref12, _excluded11);
+            const match = /language-(\w+)/.exec(className || "");
+            if (match) {
+              return /*#__PURE__*/jsxRuntimeExports.jsx(SyntaxHighlighter, _objectSpread2(_objectSpread2({
+                style: oneDark,
+                language: match[1],
+                PreTag: "div",
+                wrapLines: true
+              }, props), {}, {
+                children: String(children).replace(/\n$/, "")
+              }));
+            }
+            return /*#__PURE__*/jsxRuntimeExports.jsx("code", _objectSpread2(_objectSpread2({
+              className: className
+            }, props), {}, {
+              children: children
+            }));
           }
         },
         children: displayedContent
@@ -55338,34 +55681,54 @@
       })]
     });
   };
-  const TypingIndicator = _ref12 => {
-    let {
-      isDark
-    } = _ref12;
+  const TypingIndicator = _ref13 => {
     return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
       className: "flex gap-1.5",
       children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
         className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
         style: {
-          animationDelay: "0ms",
-          backgroundColor: isDark ? "#9CA3AF" : "#9CA3AF"
+          animationDelay: "0ms"
         }
       }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
         className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
         style: {
-          animationDelay: "150ms",
-          backgroundColor: isDark ? "#9CA3AF" : "#9CA3AF"
+          animationDelay: "150ms"
         }
       }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
         className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
         style: {
-          animationDelay: "300ms",
-          backgroundColor: isDark ? "#9CA3AF" : "#9CA3AF"
+          animationDelay: "300ms"
         }
       })]
     });
   };
-  const AssistantMessage = _ref13 => {
+
+  // Decision widget component for HITL (Human-in-the-Loop)
+  const DecisionWidget = _ref14 => {
+    let {
+      question,
+      options,
+      onDecision,
+      disabled,
+      isDark = false
+    } = _ref14;
+    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      className: "mt-3 p-3 rounded-lg border ".concat(isDark ? "bg-blue-900/30 border-blue-700/50" : "bg-blue-50 border-blue-200"),
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx("p", {
+        className: "text-sm font-medium mb-2 ".concat(isDark ? "text-gray-100" : "text-gray-900"),
+        children: question
+      }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        className: "space-y-2",
+        children: options.map(option => /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+          onClick: () => onDecision(option.id, option.label),
+          disabled: disabled,
+          className: "w-full text-left px-3 py-2 text-sm rounded transition-all ".concat(isDark ? "bg-gray-800 border border-gray-700 hover:bg-blue-900/50 hover:border-blue-600 disabled:opacity-50 disabled:cursor-not-allowed" : "bg-white border border-gray-300 hover:bg-blue-50 hover:border-blue-400 disabled:opacity-50 disabled:cursor-not-allowed"),
+          children: option.label
+        }, option.id))
+      })]
+    });
+  };
+  const AssistantMessage = _ref15 => {
     let {
       message,
       formatTime,
@@ -55373,28 +55736,47 @@
       primaryColor,
       agentMessageBubbleColor,
       textColor,
+      assistantTextColor,
       fontFamily,
       fontSize,
-      isRtl
-    } = _ref13;
+      isRtl,
+      onDecision,
+      companyLogo,
+      conciergeName,
+      companyName
+    } = _ref15;
     const displayContent = typeof message.content === "string" ? message.content : "";
     const isTypingMessage = message.isProcessing && (!displayContent || displayContent.length === 0);
-    const bubbleColor = agentMessageBubbleColor || (isDark ? "#1f2937" : "#FFFFFF");
-    const messageTextColor = textColor || (isDark ? "#f3f4f6" : "#1f2937");
-    const messageFontFamily = fontFamily || "Inter";
-    const messageFontSize = fontSize || "14px";
+    const bubbleColor = agentMessageBubbleColor !== undefined && agentMessageBubbleColor !== null ? agentMessageBubbleColor : isDark ? "#1f2937" : "#FFFFFF";
+    const messageTextColor = assistantTextColor !== undefined && assistantTextColor !== null ? assistantTextColor : textColor !== undefined && textColor !== null ? textColor : isDark ? "#f3f4f6" : "#1A1A1A";
+    const messageFontFamily = fontFamily !== undefined && fontFamily !== null ? fontFamily : "Inter";
+    const messageFontSize = fontSize !== undefined && fontSize !== null ? fontSize : "14px";
     useGoogleFont(messageFontFamily);
     return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
       className: "flex gap-3 flex-row animate-in",
       children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
         className: "flex-shrink-0 mt-1",
         children: /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-          className: "w-8 h-8 rounded-full flex items-center justify-center ".concat(isDark ? "bg-gray-700" : "bg-gray-200"),
-          children: /*#__PURE__*/jsxRuntimeExports.jsx(Bot, {
-            className: "w-4 h-4",
+          className: "w-8 h-8 rounded-full flex items-center justify-center overflow-hidden ".concat(isDark ? "bg-gray-700" : "bg-gray-200"),
+          children: companyLogo ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+            className: "w-full h-full flex items-center justify-center",
+            children: /*#__PURE__*/jsxRuntimeExports.jsx("img", {
+              src: companyLogo,
+              alt: "Company logo",
+              className: "w-full h-full object-cover rounded-full",
+              style: {
+                maxWidth: "100%",
+                maxHeight: "100%"
+              }
+            })
+          }) : /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+            className: "w-full h-full flex items-center justify-center text-white font-semibold",
             style: {
-              color: primaryColor
-            }
+              backgroundColor: primaryColor,
+              fontSize: "14px",
+              fontFamily: fontFamily || "Inter"
+            },
+            children: (conciergeName || companyName || "A").charAt(0).toUpperCase()
           })
         })
       }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
@@ -55411,35 +55793,64 @@
           },
           children: isTypingMessage ? /*#__PURE__*/jsxRuntimeExports.jsx(TypingIndicator, {
             isDark: isDark
-          }) : displayContent ? /*#__PURE__*/jsxRuntimeExports.jsx(StreamingMarkdown, {
-            content: displayContent,
-            isStreaming: message.isProcessing,
-            isDark: isDark,
-            isRtl: isRtl
-          }) : null
+          }) : /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
+            children: message.requiresDecision && message.decisionData && onDecision ? /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+              children: [displayContent && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                className: "mb-3",
+                children: /*#__PURE__*/jsxRuntimeExports.jsx(StreamingMarkdown, {
+                  content: displayContent,
+                  isStreaming: message.isProcessing,
+                  isDark: isDark,
+                  isRtl: isRtl,
+                  textColor: messageTextColor,
+                  fontFamily: messageFontFamily,
+                  fontSize: messageFontSize
+                })
+              }), /*#__PURE__*/jsxRuntimeExports.jsx(DecisionWidget, {
+                question: message.decisionData.question,
+                options: message.decisionData.options,
+                onDecision: (optionId, optionValue) => onDecision(message.decisionData.decisionId, optionId, optionValue),
+                disabled: !!message.decisionResponse,
+                isDark: isDark
+              }), message.decisionResponse && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                className: "mt-2 text-xs ".concat(isDark ? "text-gray-400" : "text-gray-500"),
+                children: ["Selected: ", message.decisionResponse.selectedOption]
+              })]
+            }) : displayContent ? /*#__PURE__*/jsxRuntimeExports.jsx(StreamingMarkdown, {
+              content: displayContent,
+              isStreaming: message.isProcessing,
+              isDark: isDark,
+              isRtl: isRtl,
+              textColor: messageTextColor,
+              fontFamily: messageFontFamily,
+              fontSize: messageFontSize
+            }) : null
+          })
         }), /*#__PURE__*/jsxRuntimeExports.jsx("p", {
           className: "text-[11px] mt-1.5 px-1 ".concat(isDark ? "text-gray-500" : "text-gray-400"),
+          dir: "ltr",
           children: formatTime(message.timestamp)
         })]
       })]
     });
   };
-  const UserMessage = _ref14 => {
+  const UserMessage = _ref16 => {
     let {
       message,
       formatTime,
       userMessageBoxColor,
       primaryColor,
       textColor,
+      userTextColor,
       fontFamily,
       fontSize,
       isDark,
       isRtl
-    } = _ref14;
-    const primary = userMessageBoxColor || primaryColor || "#2563eb";
-    const messageTextColor = textColor || "#FFFFFF";
-    const messageFontFamily = fontFamily || "Inter";
-    const messageFontSize = fontSize || "14px";
+    } = _ref16;
+    const primary = userMessageBoxColor !== undefined && userMessageBoxColor !== null ? userMessageBoxColor : primaryColor !== undefined && primaryColor !== null ? primaryColor : "#2563eb";
+    const messageTextColor = userTextColor !== undefined && userTextColor !== null ? userTextColor : textColor !== undefined && textColor !== null ? textColor : "#FFFFFF";
+    const messageFontFamily = fontFamily !== undefined && fontFamily !== null ? fontFamily : "Inter";
+    const messageFontSize = fontSize !== undefined && fontSize !== null ? fontSize : "14px";
     useGoogleFont(messageFontFamily);
     return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
       className: "flex gap-3 flex-row-reverse animate-in",
@@ -55458,26 +55869,31 @@
           style: {
             background: "linear-gradient(135deg, ".concat(primary, " 0%, ").concat(primary, "dd 100%)"),
             fontFamily: messageFontFamily,
-            fontSize: messageFontSize,
             textAlign: isRtl ? "right" : "left",
             direction: isRtl ? "rtl" : "ltr"
           },
           children: /*#__PURE__*/jsxRuntimeExports.jsx("p", {
-            className: "leading-relaxed whitespace-pre-wrap break-words",
+            className: "whitespace-pre-wrap break-words",
             style: {
               color: messageTextColor,
-              textAlign: isRtl ? "right" : "left"
+              fontFamily: messageFontFamily,
+              fontSize: messageFontSize,
+              lineHeight: "1.5",
+              textAlign: isRtl ? "right" : "left",
+              margin: 0,
+              padding: 0
             },
             children: message.content
           })
         }), /*#__PURE__*/jsxRuntimeExports.jsx("p", {
           className: "text-[11px] mt-1.5 px-1 ".concat(isDark ? "text-gray-500" : "text-gray-400"),
+          dir: "ltr",
           children: formatTime(message.timestamp)
         })]
       })]
     });
   };
-  const MessageBubble = _ref15 => {
+  const MessageBubble = _ref17 => {
     let {
       message,
       isDark,
@@ -55485,11 +55901,17 @@
       agentMessageBubbleColor,
       userMessageBoxColor,
       textColor,
+      assistantTextColor,
+      userTextColor,
       fontFamily,
       fontSize,
       formatTime,
-      isRtl
-    } = _ref15;
+      isRtl,
+      onDecision,
+      companyLogo,
+      conciergeName,
+      companyName
+    } = _ref17;
     if (!message) {
       return null;
     }
@@ -55500,6 +55922,7 @@
         userMessageBoxColor: userMessageBoxColor,
         primaryColor: primaryColor,
         textColor: textColor,
+        userTextColor: userTextColor,
         fontFamily: fontFamily,
         fontSize: fontSize,
         isDark: isDark,
@@ -55513,9 +55936,14 @@
       primaryColor: primaryColor,
       agentMessageBubbleColor: agentMessageBubbleColor,
       textColor: textColor,
+      assistantTextColor: assistantTextColor,
       fontFamily: fontFamily,
       fontSize: fontSize,
-      isRtl: isRtl
+      isRtl: isRtl,
+      onDecision: onDecision,
+      companyLogo: companyLogo,
+      conciergeName: conciergeName,
+      companyName: companyName
     });
   };
 
@@ -55696,6 +56124,7 @@
     };
   };
   const QuickQuestions = _ref3 => {
+    var _ref4;
     let {
       questions = [],
       isDark = false,
@@ -55706,12 +56135,15 @@
       fontFamily = "Inter",
       fontSize = "14px",
       textColor,
-      isRtl = false
+      isRtl = false,
+      questionTextColor,
+      questionBoxColor
     } = _ref3;
     if (!questions.length || isTyping) {
       return null;
     }
-    const resolvedTextColor = textColor !== null && textColor !== void 0 ? textColor : isDark ? "#f3f4f6" : "#111827";
+    const resolvedTextColor = (_ref4 = questionTextColor !== null && questionTextColor !== void 0 ? questionTextColor : textColor) !== null && _ref4 !== void 0 ? _ref4 : isDark ? "#f3f4f6" : "#111827";
+    const resolvedQuestionBoxColor = questionBoxColor !== null && questionBoxColor !== void 0 ? questionBoxColor : isDark ? "#374151" : "#e5e7eb";
     const palette = reactExports.useMemo(() => getQuickQuestionPalette(resolvedTextColor, isDark), [resolvedTextColor, isDark]);
     const applyHoverState = (element, isHover) => {
       element.style.backgroundColor = isHover ? palette.hoverBackground : palette.background;
@@ -55760,11 +56192,19 @@
         })]
       });
     }
-    return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-      className: "space-y-3 flex flex-col items-start",
+
+    // Vertical layout (default)
+    return /*#__PURE__*/jsxRuntimeExports.jsx("div", _objectSpread2(_objectSpread2({
+      className: "space-y-3 flex flex-col items-start pl-[50px]"
+    }, isRtl && {
+      style: {
+        paddingLeft: "0",
+        paddingRight: "50px"
+      }
+    }), {}, {
       children: questions.map((question, index) => /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
         onClick: () => onQuestionClick === null || onQuestionClick === void 0 ? void 0 : onQuestionClick(question),
-        className: "group relative text-sm px-5 py-3 rounded-2xl font-medium transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] whitespace-normal max-w-[85%] overflow-hidden backdrop-blur-sm ".concat(isRtl ? "text-right" : "text-left"),
+        className: "group relative text-sm px-3 py-3 rounded-2xl font-medium transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] whitespace-normal max-w-[85%] overflow-hidden backdrop-blur-sm ".concat(isRtl ? "text-right" : "text-left"),
         style: {
           direction: isRtl ? "rtl" : "ltr",
           backgroundColor: palette.background,
@@ -55778,26 +56218,61 @@
           applyHoverState(e.currentTarget, false);
         },
         children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
-          className: "absolute inset-0 bg-gradient-to-br from-white/0 via-white/0 to-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"
-        }), /*#__PURE__*/jsxRuntimeExports.jsxs("span", {
+          style: {
+            backgroundColor: "#F5F5F5",
+            border: "1px solid ".concat(resolvedQuestionBoxColor)
+          },
+          className: "absolute inset-0 transition-opacity duration-300 rounded-2xl"
+        }), /*#__PURE__*/jsxRuntimeExports.jsx("span", {
           className: "relative z-10 flex items-center gap-2.5 text-left",
-          children: [/*#__PURE__*/jsxRuntimeExports.jsx(MessageCircleQuestion, {
-            className: "h-4 w-4 opacity-60 group-hover:opacity-100 transition-opacity duration-300 flex-shrink-0",
-            style: {
-              color: primaryColor
-            }
-          }), /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+          children: /*#__PURE__*/jsxRuntimeExports.jsx("span", {
             className: "flex-1 leading-snug ".concat(isRtl ? "text-right" : "text-left"),
             style: {
               direction: isRtl ? "rtl" : "ltr",
-              color: resolvedTextColor,
+              color: "#1A1A1A",
               fontFamily,
               fontSize
             },
             children: question
-          })]
+          })
         })]
       }, index))
+    }));
+  };
+
+  const LoadingState = _ref => {
+    let {
+      title,
+      description,
+      isAnimated = false
+    } = _ref;
+    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      className: "flex flex-col items-center justify-center py-12 px-4",
+      children: [isAnimated && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+        className: "flex gap-1.5 mb-4",
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
+          style: {
+            animationDelay: "0ms"
+          }
+        }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
+          style: {
+            animationDelay: "150ms"
+          }
+        }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
+          style: {
+            animationDelay: "300ms"
+          }
+        })]
+      }), title && /*#__PURE__*/jsxRuntimeExports.jsx("h3", {
+        className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
+        children: title
+      }), description && /*#__PURE__*/jsxRuntimeExports.jsx("p", {
+        className: "text-xs text-gray-500 dark:text-gray-400 text-center max-w-xs",
+        children: description
+      })]
     });
   };
 
@@ -55810,6 +56285,8 @@
       agentMessageBubbleColor,
       userMessageBoxColor,
       textColor,
+      assistantTextColor,
+      userTextColor,
       fontFamily,
       fontSize,
       formatTime,
@@ -55817,9 +56294,20 @@
       quickQuestions = [],
       shouldShowQuickQuestions = false,
       onQuickQuestion,
-      quickQuestionsLayout = "vertical"
+      quickQuestionsLayout = "vertical",
+      onDecision,
+      disclaimerText,
+      disclaimerPosition = "top",
+      resolvedAgentBubbleColor,
+      resolvedUserMessageColor,
+      resolvedTextColor,
+      isVoiceSessionActive = false,
+      voiceStatus = "idle",
+      messagesContainerRef,
+      companyLogo,
+      conciergeName,
+      companyName
     } = _ref;
-    const containerRef = reactExports.useRef(null);
     const messagesEndRef = reactExports.useRef(null);
     const shouldAutoScrollRef = reactExports.useRef(true);
     const autoScrollKey = reactExports.useMemo(() => messages.map(message => {
@@ -55827,15 +56315,15 @@
       return "".concat(message.id, ":").concat((_message$content$leng = (_message$content = message.content) === null || _message$content === void 0 ? void 0 : _message$content.length) !== null && _message$content$leng !== void 0 ? _message$content$leng : 0, ":").concat(message.isProcessing ? 1 : 0);
     }).join("|"), [messages]);
     const updateAutoScrollIntent = reactExports.useCallback(() => {
-      const container = containerRef.current;
+      const container = messagesContainerRef === null || messagesContainerRef === void 0 ? void 0 : messagesContainerRef.current;
       if (!container) {
         return;
       }
       const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
       shouldAutoScrollRef.current = distanceFromBottom < 160;
-    }, []);
+    }, [messagesContainerRef]);
     reactExports.useEffect(() => {
-      const container = containerRef.current;
+      const container = messagesContainerRef === null || messagesContainerRef === void 0 ? void 0 : messagesContainerRef.current;
       if (!container) {
         return undefined;
       }
@@ -55846,7 +56334,7 @@
       return () => {
         container.removeEventListener("scroll", updateAutoScrollIntent);
       };
-    }, [updateAutoScrollIntent]);
+    }, [updateAutoScrollIntent, messagesContainerRef]);
     reactExports.useEffect(() => {
       if (!shouldAutoScrollRef.current) {
         return undefined;
@@ -55865,20 +56353,55 @@
         window.cancelAnimationFrame(frame);
       };
     }, [autoScrollKey, isLoading]);
-    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-      ref: containerRef,
-      className: "chat-messages flex-1 overflow-y-auto px-5 py-4 space-y-4 min-h-0 ".concat(isDark ? "bg-gray-900" : "bg-gradient-to-b from-gray-50/50 to-white", " break-words"),
-      children: [messages.map(message => /*#__PURE__*/jsxRuntimeExports.jsx(MessageBubble, {
+    return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+      children: [isVoiceSessionActive && messages.length === 0 && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        className: "flex flex-col items-center justify-center h-full",
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(LoadingState, {
+          title: "Starting voice session...",
+          description: "Allow microphone access or begin speaking to continue.",
+          isAnimated: true
+        })
+      }), disclaimerText && disclaimerPosition === "top" && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        className: "flex justify-center",
+        children: /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          className: "rounded-lg px-2 py-1 max-w-[85%] border",
+          style: {
+            backgroundColor: agentMessageBubbleColor !== undefined && agentMessageBubbleColor !== null ? agentMessageBubbleColor : resolvedAgentBubbleColor || "#F5F5F5",
+            color: assistantTextColor !== undefined && assistantTextColor !== null ? assistantTextColor : "#1A1A1A",
+            fontFamily: fontFamily !== undefined && fontFamily !== null ? fontFamily : "Inter",
+            fontSize: fontSize !== undefined && fontSize !== null ? "calc(".concat(fontSize, " - 2px)") : "12px",
+            direction: isRtl ? "rtl" : "ltr",
+            textAlign: "center",
+            borderColor: isDark ? "#374151" : "#e5e7eb"
+          },
+          children: /*#__PURE__*/jsxRuntimeExports.jsx("p", {
+            className: "leading-relaxed whitespace-pre-wrap break-words",
+            dir: isRtl ? "rtl" : "ltr",
+            style: {
+              color: assistantTextColor !== undefined && assistantTextColor !== null ? assistantTextColor : "#1A1A1A",
+              fontFamily: fontFamily !== undefined && fontFamily !== null ? fontFamily : "Inter",
+              fontSize: fontSize !== undefined && fontSize !== null ? "calc(".concat(fontSize, " - 2px)") : "12px"
+            },
+            children: disclaimerText
+          })
+        })
+      }), messages.map(message => /*#__PURE__*/jsxRuntimeExports.jsx(MessageBubble, {
         message: message,
         isDark: isDark,
         primaryColor: primaryColor,
         agentMessageBubbleColor: agentMessageBubbleColor,
         userMessageBoxColor: userMessageBoxColor,
         textColor: textColor,
+        assistantTextColor: assistantTextColor,
+        userTextColor: userTextColor,
         fontFamily: fontFamily,
         fontSize: fontSize,
         formatTime: formatTime,
-        isRtl: isRtl
+        isRtl: isRtl,
+        onDecision: onDecision,
+        companyLogo: companyLogo,
+        conciergeName: conciergeName,
+        companyName: companyName
       }, message.id)), shouldShowQuickQuestions && quickQuestions.length > 0 && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
         className: "pt-1",
         children: /*#__PURE__*/jsxRuntimeExports.jsx(QuickQuestions, {
@@ -55891,7 +56414,9 @@
           fontFamily: fontFamily,
           fontSize: fontSize,
           textColor: textColor,
-          isRtl: isRtl
+          isRtl: isRtl,
+          questionTextColor: assistantTextColor,
+          questionBoxColor: agentMessageBubbleColor
         })
       }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
         ref: messagesEndRef,
@@ -55914,7 +56439,15 @@
       textColor,
       fontFamily,
       fontSize,
-      isRtl = false
+      isRtl = false,
+      enableVoiceInteraction = false,
+      isVoiceSessionActive = false,
+      voiceStatus = "idle",
+      voiceError = null,
+      onVoiceToggle,
+      onBidiSubmit,
+      disclaimerText,
+      disclaimerPosition = "top"
     } = _ref;
     const textareaRef = reactExports.useRef(null);
     useGoogleFont(fontFamily);
@@ -55924,17 +56457,29 @@
         (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 || _textareaRef$current.focus();
       }
     }, [isOpen, isMinimized]);
+
+    // Auto-resize textarea
     reactExports.useEffect(() => {
       const textarea = textareaRef.current;
       if (textarea) {
+        // Reset height to auto to get accurate scrollHeight
         textarea.style.height = "auto";
-        textarea.style.height = "".concat(Math.min(textarea.scrollHeight, 120), "px");
+        // Calculate new height based on scrollHeight
+        const scrollHeight = textarea.scrollHeight;
+        // Ensure minimum height when there's text (lineHeight 1.4 means we need at least ~20px per line)
+        const minHeightWithText = inputValue.trim().length > 0 ? 20 : 48;
+        const newHeight = Math.max(minHeightWithText, Math.min(scrollHeight, 120));
+        textarea.style.height = "".concat(newHeight, "px");
       }
     }, [inputValue]);
     const handleKeyPress = event => {
       if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
-        onSend();
+        if (isVoiceSessionActive && onBidiSubmit) {
+          onBidiSubmit();
+        } else {
+          onSend();
+        }
       }
     };
     const handleChange = event => {
@@ -55942,15 +56487,15 @@
     };
     const isDisabled = !inputValue.trim() || isLoading;
     const separatorColor = isDark ? "#374151" : "#e5e7eb";
-    return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
       className: "px-5 py-4 border-t flex-shrink-0 ".concat(isDark ? "border-gray-700 bg-gray-900" : "border-gray-200 bg-white"),
       style: {
         borderTopColor: separatorColor,
         borderTopWidth: "1px",
         borderTopStyle: "solid"
       },
-      children: /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-        className: "flex gap-2.5 items-end",
+      children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+        className: "flex items-center gap-1.5",
         children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
           className: "flex-1 flex items-center min-h-[48px] ".concat(isDark ? "bg-gray-800" : "bg-gray-50", " rounded-2xl border transition-all duration-200"),
           style: {
@@ -55965,35 +56510,316 @@
             onKeyDown: handleKeyPress,
             placeholder: placeholder || "Type your message...",
             rows: 1,
-            disabled: isLoading,
+            disabled: isLoading || isVoiceSessionActive && voiceStatus !== "connected",
             dir: isRtl ? "rtl" : "ltr",
-            className: "w-full px-4 py-0 bg-transparent rounded-xl leading-normal ".concat(isDark ? "text-gray-100" : "text-gray-900", " placeholder-gray-400 resize-none outline-none scrollbar-hide"),
+            className: "w-full px-4 bg-transparent rounded-xl leading-normal ".concat(isDark ? "text-gray-100" : "text-gray-900", " placeholder-gray-400 resize-none outline-none scrollbar-hide"),
             style: {
+              height: "auto",
               maxHeight: "120px",
-              lineHeight: "48px",
+              minHeight: "48px",
+              paddingTop: inputValue.trim().length > 0 ? "12px" : "0px",
+              paddingBottom: inputValue.trim().length > 0 ? "12px" : "0px",
+              lineHeight: inputValue.trim().length > 0 ? "1.4" : "48px",
               fontFamily: fontFamily || "Inter",
               fontSize: fontSize || "14px",
-              color: textColor || (isDark ? "#f3f4f6" : "#111827"),
-              textAlign: isRtl ? "right" : "left"
+              color: textColor || (isDark ? "#F5F5F5" : "#1A1A1A"),
+              textAlign: isRtl ? "right" : "left",
+              direction: isRtl ? "rtl" : "ltr",
+              wordSpacing: "0",
+              letterSpacing: "0"
             }
           })
+        }), enableVoiceInteraction && /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+          type: "button",
+          onClick: onVoiceToggle,
+          className: "h-10 w-10 rounded-xl flex items-center justify-center transition-all duration-200 shadow-md ".concat(isVoiceSessionActive ? "bg-red-500 text-white hover:bg-red-600" : isDark ? "bg-gray-800 text-gray-200 hover:bg-gray-700" : "bg-white text-gray-600 hover:bg-gray-100", " ").concat(voiceStatus === "connecting" ? "opacity-60 cursor-not-allowed shadow-none" : ""),
+          disabled: voiceStatus === "connecting",
+          children: voiceStatus === "connecting" ? /*#__PURE__*/jsxRuntimeExports.jsx(Loader2, {
+            className: "w-4 h-4 animate-spin"
+          }) : /*#__PURE__*/jsxRuntimeExports.jsx(AudioLines, {
+            className: "w-4 h-4"
+          })
         }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
-          onClick: onSend,
-          disabled: isDisabled,
-          className: "h-12 w-12 p-0 rounded-xl transition-all duration-200 flex items-center justify-center shadow-lg disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none ".concat(!isDisabled ? "scale-100" : "scale-95"),
+          onClick: isVoiceSessionActive && onBidiSubmit ? onBidiSubmit : onSend,
+          disabled: isDisabled || isVoiceSessionActive && voiceStatus !== "connected",
+          className: "h-10 w-10 rounded-xl transition-all duration-200 flex items-center justify-center shadow-md disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none ".concat(inputValue.trim() ? "scale-100" : "scale-95"),
           style: {
-            backgroundColor: !isDisabled ? primaryColor : isDark ? "#374151" : "#e5e7eb",
-            color: !isDisabled ? "white" : "#9ca3af"
+            backgroundColor: inputValue.trim() ? primaryColor : isDark ? "#374151" : "#e5e7eb",
+            color: inputValue.trim() ? "white" : "#9ca3af"
           },
           "aria-label": "Send message",
           children: /*#__PURE__*/jsxRuntimeExports.jsx(Send, {
-            className: "w-5 h-5"
+            className: "w-4 h-4 transition-transform",
+            style: isRtl ? {
+              transform: "rotate(-90deg)"
+            } : undefined
           })
         })]
-      })
+      }), isVoiceSessionActive && /*#__PURE__*/jsxRuntimeExports.jsxs("p", {
+        className: "text-[11px] mt-2 px-1 ".concat(voiceStatus === "connected" ? "text-green-500" : "text-gray-500", " flex items-center gap-1"),
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+          className: "w-1.5 h-1.5 rounded-full bg-current inline-flex"
+        }), voiceStatus === "connected" ? "Voice session live — speak or type to converse." : "Connecting to voice session..."]
+      }), voiceError && /*#__PURE__*/jsxRuntimeExports.jsx("p", {
+        className: "text-[11px] mt-1 px-1 text-red-500",
+        children: voiceError
+      }), disclaimerText && disclaimerPosition === "footer" && /*#__PURE__*/jsxRuntimeExports.jsx("p", {
+        className: "text-xs mt-2 text-center",
+        style: {
+          color: isDark ? "#FFFFFF" : "#000000",
+          fontFamily: fontFamily || "Inter",
+          fontSize: fontSize ? "calc(".concat(fontSize, " - 2px)") : "12px",
+          direction: isRtl ? "rtl" : "ltr"
+        },
+        dir: isRtl ? "rtl" : "ltr",
+        children: disclaimerText
+      })]
     });
   };
 
+  const LOGO_MAX_HEIGHT = "3.5rem";
+  const LOGO_MAX_HEIGHT_COMPACT = "2.5rem";
+  const LOGO_MAX_WIDTH_DEFAULT = "4.5rem";
+  const LOGO_MAX_WIDTH_DEFAULT_COMPACT = "3rem";
+  const LOGO_MAX_WIDTH_WIDE = "9rem";
+  const LOGO_MAX_WIDTH_WIDE_COMPACT = "5.5rem";
+  const STATUS_DOT_SIZE = "0.8rem";
+  const STATUS_DOT_SIZE_COMPACT = "0.65rem";
+  const STATUS_DOT_BORDER_WIDTH = "2px";
+  const STATUS_DOT_BORDER_WIDTH_COMPACT = "1.5px";
+  const STATUS_DOT_DEFAULT_COLOR = "#34d399";
+  const STATUS_DOT_OFFSET = "38%";
+  const STATUS_DOT_OFFSET_COMPACT = "22%";
+  const LogoImage = _ref => {
+    let {
+      src,
+      showStatusDot = false,
+      statusColor = STATUS_DOT_DEFAULT_COLOR,
+      size = "default"
+    } = _ref;
+    const [aspect, setAspect] = reactExports.useState("square");
+    const isCompact = size === "compact";
+    reactExports.useEffect(() => {
+      if (typeof window === "undefined" || !src) {
+        return;
+      }
+      const img = new Image();
+      img.src = src;
+      img.onload = () => {
+        if (img.width > img.height) {
+          setAspect("wide");
+        } else if (img.height > img.width) {
+          setAspect("tall");
+        } else {
+          setAspect("square");
+        }
+      };
+    }, [src]);
+    const containerStyle = {
+      position: "relative",
+      display: "inline-flex"
+    };
+    const imageStyle = {
+      display: "block",
+      objectFit: "cover",
+      height: "100%",
+      width: "100%",
+      // borderRadius:'50%',
+      maxHeight: isCompact ? LOGO_MAX_HEIGHT_COMPACT : LOGO_MAX_HEIGHT,
+      maxWidth: isCompact ? LOGO_MAX_WIDTH_DEFAULT_COMPACT : LOGO_MAX_WIDTH_DEFAULT
+    };
+    if (aspect === "wide") {
+      imageStyle.maxWidth = isCompact ? LOGO_MAX_WIDTH_WIDE_COMPACT : LOGO_MAX_WIDTH_WIDE;
+    }
+    if (aspect === "tall") {
+      imageStyle.maxHeight = isCompact ? "3rem" : "4rem";
+      imageStyle.maxWidth = isCompact ? "3rem" : "4rem";
+    }
+    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      style: containerStyle,
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx("img", {
+        src: src,
+        alt: "Logo",
+        style: imageStyle,
+        loading: "lazy"
+      }), showStatusDot && /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+        style: {
+          position: "absolute",
+          bottom: 0,
+          right: 0,
+          width: isCompact ? STATUS_DOT_SIZE_COMPACT : STATUS_DOT_SIZE,
+          height: isCompact ? STATUS_DOT_SIZE_COMPACT : STATUS_DOT_SIZE,
+          borderRadius: "9999px",
+          backgroundColor: statusColor,
+          border: "".concat(isCompact ? STATUS_DOT_BORDER_WIDTH_COMPACT : STATUS_DOT_BORDER_WIDTH, " solid #ffffff"),
+          transform: "translate(".concat(isCompact ? STATUS_DOT_OFFSET_COMPACT : STATUS_DOT_OFFSET, ", ").concat(isCompact ? STATUS_DOT_OFFSET_COMPACT : STATUS_DOT_OFFSET, ")"),
+          pointerEvents: "none"
+        }
+      })]
+    });
+  };
+
+  const ChatHeader = _ref => {
+    let {
+      conciergeName,
+      companyName,
+      companyLogo,
+      primaryColor,
+      isDark,
+      isMinimized = false,
+      textColor,
+      fontFamily,
+      fontSize,
+      onToggleTheme,
+      onMinimize,
+      onClose,
+      headerTextBold = false,
+      headerTextItalic = false
+    } = _ref;
+    useGoogleFont(fontFamily);
+    const agentData = {
+      fontFamily,
+      fontSize,
+      headerTextBold,
+      headerTextItalic,
+      textColor
+    };
+    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      className: "text-white ".concat(isMinimized ? "px-4 py-2.5" : "px-5 py-4", " flex items-center justify-between relative overflow-hidden rounded-t-2xl"),
+      style: {
+        background: "linear-gradient(135deg, ".concat(primaryColor, " 0%, ").concat(primaryColor, "dd 100%)"),
+        fontFamily
+      },
+      children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+        className: "flex gap-2 w-96",
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          className: "absolute inset-0 bg-gradient-to-br from-white/10 to-transparent pointer-events-none"
+        }), companyLogo && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          className: "w-[48px] h-[48px] rounded-full overflow-hidden flex items-center justify-center bg-white/10",
+          children: /*#__PURE__*/jsxRuntimeExports.jsx(LogoImage, {
+            src: companyLogo
+          })
+        }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          className: "flex items-center gap-2 ".concat(!companyLogo ? "px-3" : ""),
+          style: {
+            fontFamily: (agentData === null || agentData === void 0 ? void 0 : agentData.fontFamily) || "Inter"
+          },
+          children: /*#__PURE__*/jsxRuntimeExports.jsx("h3", {
+            className: cn("font-semibold leading-tight", (agentData === null || agentData === void 0 ? void 0 : agentData.headerTextBold) && "font-bold", (agentData === null || agentData === void 0 ? void 0 : agentData.headerTextItalic) && "italic"),
+            style: {
+              fontSize: agentData !== null && agentData !== void 0 && agentData.fontSize ? "calc(".concat(agentData.fontSize, " + 2px)") : "15px",
+              color: (agentData === null || agentData === void 0 ? void 0 : agentData.textColor) || "#FFFFFF"
+            },
+            children: companyName
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+        className: "flex items-center gap-0 relative z-10 text-white flex-shrink-0 ml-1",
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "Toggle theme",
+          onClick: onToggleTheme,
+          onKeyDown: event => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              onToggleTheme === null || onToggleTheme === void 0 || onToggleTheme(event);
+            }
+          },
+          className: "inline-flex h-7 w-7 items-center justify-center cursor-pointer transition-opacity duration-200 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 rounded-full",
+          children: isDark ? /*#__PURE__*/jsxRuntimeExports.jsx(Sun, {
+            className: "w-3.5 h-3.5",
+            strokeWidth: 1.6
+          }) : /*#__PURE__*/jsxRuntimeExports.jsx(Moon, {
+            className: "w-3.5 h-3.5",
+            strokeWidth: 1.6
+          })
+        }), onMinimize && /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+          role: "button",
+          tabIndex: 0,
+          "aria-label": isMinimized ? "Expand" : "Minimize",
+          onClick: onMinimize,
+          onKeyDown: event => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              onMinimize === null || onMinimize === void 0 || onMinimize(event);
+            }
+          },
+          className: "inline-flex h-7 w-7 items-center justify-center cursor-pointer transition-opacity duration-200 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 rounded-full",
+          children: isMinimized ? /*#__PURE__*/jsxRuntimeExports.jsx(Maximize2, {
+            className: "w-3.5 h-3.5",
+            strokeWidth: 1.6
+          }) : /*#__PURE__*/jsxRuntimeExports.jsx(Minimize2, {
+            className: "w-3.5 h-3.5",
+            strokeWidth: 1.6
+          })
+        }), /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "Close",
+          onClick: onClose,
+          onKeyDown: event => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              onClose === null || onClose === void 0 || onClose(event);
+            }
+          },
+          className: "inline-flex h-7 w-7 items-center justify-center cursor-pointer transition-opacity duration-200 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 rounded-full",
+          children: /*#__PURE__*/jsxRuntimeExports.jsx(X, {
+            className: "w-3.5 h-3.5",
+            strokeWidth: 1.6
+          })
+        })]
+      })]
+    });
+  };
+
+  /**
+   * Auto-scroll hook that scrolls to bottom when dependencies change
+   */
+  function useAutoScroll(containerRef) {
+    let dependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    const {
+      enabled = true,
+      threshold = 30,
+      behavior = "smooth",
+      delay = 0
+    } = options;
+    const shouldScrollRef = reactExports.useRef(true);
+    reactExports.useRef(0);
+    reactExports.useEffect(() => {
+      if (!enabled || !containerRef.current) {
+        return;
+      }
+      const container = containerRef.current;
+      const checkScrollPosition = () => {
+        const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+        shouldScrollRef.current = distanceFromBottom < threshold;
+      };
+      const handleScroll = () => {
+        checkScrollPosition();
+      };
+      container.addEventListener("scroll", handleScroll, {
+        passive: true
+      });
+      checkScrollPosition();
+      const scrollToBottom = () => {
+        if (shouldScrollRef.current && container) {
+          container.scrollTo({
+            top: container.scrollHeight,
+            behavior
+          });
+        }
+      };
+      const timeoutId = setTimeout(scrollToBottom, delay);
+      return () => {
+        container.removeEventListener("scroll", handleScroll);
+        clearTimeout(timeoutId);
+      };
+    }, [containerRef, enabled, threshold, behavior, delay, ...dependencies]);
+  }
+
   const DEFAULT_AGENT_BUBBLE_COLOR = "#ffffff";
   const DEFAULT_USER_MESSAGE_COLOR = "#f5f5f5";
   const DEFAULT_TEXT_COLOR = "#000000";
@@ -56039,23 +56865,38 @@
       quickQuestionsLayout = "vertical",
       agentMessageBubbleColor,
       userMessageBoxColor,
+      assistantTextColor,
+      userTextColor,
       fontFamily = "Inter",
       fontSize = "14px",
-      defaultLanguage = "en"
+      defaultLanguage = "en",
+      onDecision,
+      headerTextBold = false,
+      headerTextItalic = false,
+      enableVoiceInteraction = false,
+      isVoiceSessionActive = false,
+      voiceStatus = "idle",
+      voiceError = null,
+      onVoiceToggle,
+      onBidiSubmit,
+      disclaimerText,
+      disclaimerPosition = "top",
+      apiBaseUrl,
+      apiKey,
+      organizationId
     } = _ref;
     useGoogleFont(fontFamily);
+    const messagesContainerRef = reactExports.useRef(null);
+
+    // Auto-scroll hook
+    useAutoScroll(messagesContainerRef, [messages, isLoading], {
+      enabled: true,
+      threshold: 30,
+      behavior: "smooth",
+      delay: 0
+    });
     const defaultLanguageCode = defaultLanguage === null || defaultLanguage === void 0 || (_defaultLanguage$toLo = defaultLanguage.toLowerCase) === null || _defaultLanguage$toLo === void 0 ? void 0 : _defaultLanguage$toLo.call(defaultLanguage);
     const isRtlLanguage = Boolean(defaultLanguageCode && defaultLanguageCode.startsWith("ar"));
-    const basePrimaryColor = primaryColor || "#2563eb";
-    const containerStyle = reactExports.useMemo(() => {
-      if (isDark) {
-        return undefined;
-      }
-      return {
-        backgroundColor: basePrimaryColor
-        // borderColor: basePrimaryColor,
-      };
-    }, [basePrimaryColor, isDark]);
     const resolvedAgentBubbleColor = reactExports.useMemo(() => {
       if (isDark) {
         if (isDefaultColor(agentMessageBubbleColor, DEFAULT_AGENT_BUBBLE_COLOR)) {
@@ -56090,42 +56931,57 @@
       return null;
     }
     return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-      className: "mb-4 ".concat(isDark ? "bg-gray-900 border-gray-700" : "border-transparent", " rounded-2xl shadow-2xl border transition-all duration-300 ").concat(isMinimized ? "w-80" : "w-[380px] h-[650px]", " flex flex-col overflow-hidden min-h-0"),
-      style: containerStyle,
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
-        className: "flex-shrink-0",
-        children: /*#__PURE__*/jsxRuntimeExports.jsx(ChatHeader, {
-          conciergeName: conciergeName,
-          companyName: companyName,
-          companyLogo: companyLogo,
-          primaryColor: primaryColor,
-          isDark: isDark,
-          isMinimized: isMinimized,
-          textColor: resolvedTextColor,
-          fontFamily: fontFamily,
-          fontSize: fontSize,
-          onToggleTheme: onToggleTheme,
-          onMinimize: onMinimize,
-          onClose: onClose
-        })
-      }), !isMinimized && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-        className: "flex-1 flex flex-col ".concat(isDark ? "bg-gray-900" : "bg-white", " min-h-0"),
-        children: [/*#__PURE__*/jsxRuntimeExports.jsx(MessageList, {
-          messages: messages,
-          isDark: isDark,
-          primaryColor: primaryColor,
-          isLoading: isLoading,
-          agentMessageBubbleColor: resolvedAgentBubbleColor,
-          userMessageBoxColor: resolvedUserMessageColor,
-          textColor: resolvedTextColor,
-          fontFamily: fontFamily,
-          fontSize: fontSize,
-          formatTime: formatTime,
-          isRtl: isRtlLanguage,
-          quickQuestions: quickQuestions,
-          shouldShowQuickQuestions: shouldShowQuickQuestions,
-          onQuickQuestion: onQuickQuestion !== null && onQuickQuestion !== void 0 ? onQuickQuestion : onDirectSend,
-          quickQuestionsLayout: quickQuestionsLayout
+      className: "".concat(isMinimized ? "w-80" : "w-[380px]", " max-w-[92vw] flex-shrink-0 border rounded-2xl shadow-2xl bg-white border-gray-200 flex flex-col ").concat(isMinimized ? "h-auto" : "h-[650px] max-h-[85vh]", " overflow-hidden z-50 ").concat(isDark ? "bg-gray-900 border-gray-700" : ""),
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(ChatHeader, {
+        conciergeName: conciergeName,
+        companyName: companyName,
+        companyLogo: companyLogo,
+        primaryColor: primaryColor,
+        isDark: isDark,
+        isMinimized: isMinimized,
+        textColor: resolvedTextColor,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        onToggleTheme: onToggleTheme,
+        onMinimize: onMinimize,
+        onClose: onClose,
+        headerTextBold: headerTextBold,
+        headerTextItalic: headerTextItalic
+      }), !isMinimized && /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+          ref: messagesContainerRef,
+          className: "chat-messages flex-1 overflow-y-auto px-5 py-4 space-y-4 ".concat(isDark ? "bg-gray-900" : "bg-gradient-to-b from-gray-50/50 to-white", " break-words"),
+          children: /*#__PURE__*/jsxRuntimeExports.jsx(MessageList, {
+            messages: messages,
+            isDark: isDark,
+            primaryColor: primaryColor,
+            isLoading: isLoading,
+            agentMessageBubbleColor: agentMessageBubbleColor,
+            userMessageBoxColor: userMessageBoxColor,
+            textColor: textColor,
+            assistantTextColor: assistantTextColor,
+            userTextColor: userTextColor,
+            fontFamily: fontFamily,
+            fontSize: fontSize,
+            formatTime: formatTime,
+            isRtl: isRtlLanguage,
+            quickQuestions: quickQuestions,
+            shouldShowQuickQuestions: shouldShowQuickQuestions,
+            onQuickQuestion: onQuickQuestion !== null && onQuickQuestion !== void 0 ? onQuickQuestion : onDirectSend,
+            quickQuestionsLayout: quickQuestionsLayout,
+            onDecision: onDecision,
+            disclaimerText: disclaimerText,
+            disclaimerPosition: disclaimerPosition,
+            resolvedAgentBubbleColor: resolvedAgentBubbleColor,
+            resolvedUserMessageColor: resolvedUserMessageColor,
+            resolvedTextColor: resolvedTextColor,
+            isVoiceSessionActive: isVoiceSessionActive,
+            voiceStatus: voiceStatus,
+            messagesContainerRef: messagesContainerRef,
+            companyLogo: companyLogo,
+            conciergeName: conciergeName,
+            companyName: companyName
+          })
         }), /*#__PURE__*/jsxRuntimeExports.jsx(ChatInput, {
           inputValue: inputValue,
           setInputValue: setInputValue,
@@ -56139,7 +56995,15 @@
           textColor: resolvedTextColor,
           fontFamily: fontFamily,
           fontSize: fontSize,
-          isRtl: isRtlLanguage
+          isRtl: isRtlLanguage,
+          enableVoiceInteraction: enableVoiceInteraction,
+          isVoiceSessionActive: isVoiceSessionActive,
+          voiceStatus: voiceStatus,
+          voiceError: voiceError,
+          onVoiceToggle: onVoiceToggle,
+          onBidiSubmit: onBidiSubmit,
+          disclaimerText: disclaimerText,
+          disclaimerPosition: disclaimerPosition
         })]
       })]
     });
@@ -56150,7 +57014,8 @@
       isOpen,
       isDark,
       primaryColor,
-      onToggle
+      onToggle,
+      textColor
     } = _ref;
     return /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
       onClick: onToggle,
@@ -56168,7 +57033,10 @@
           className: "w-7 h-7"
         }) : /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
           children: [/*#__PURE__*/jsxRuntimeExports.jsx(MessageCircle, {
-            className: "w-7 h-7"
+            className: "w-7 h-7",
+            style: {
+              color: textColor
+            }
           }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
             className: "absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-[10px] font-bold border-2 border-white animate-pulse",
             children: "1"
@@ -56192,6 +57060,8 @@
       textColor = "#000000",
       agentMessageBubbleColor,
       userMessageBoxColor,
+      assistantTextColor,
+      userTextColor,
       fontFamily = "Inter",
       fontSize = "14px",
       defaultLanguage = "en",
@@ -56201,7 +57071,12 @@
       autoOpen = false,
       openDelay = 0,
       locale = "en",
-      className = ""
+      className = "",
+      headerTextBold = false,
+      headerTextItalic = false,
+      enableVoiceInteraction = false,
+      disclaimerText,
+      disclaimerPosition = "top"
     } = _ref;
     const {
       isOpen,
@@ -56218,7 +57093,13 @@
       toggleChat,
       toggleTheme,
       toggleMinimize,
-      closeChat
+      closeChat,
+      handleDecision,
+      isVoiceSessionActive,
+      voiceStatus,
+      voiceError,
+      handleVoiceToggle,
+      sendBidiTextMessage
     } = useChatState({
       welcomeMessage,
       quickQuestions,
@@ -56227,7 +57108,8 @@
       organizationId,
       autoOpen,
       openDelay,
-      darkMode
+      darkMode,
+      enableVoiceInteraction
     });
 
     // Set CSS variables for theming
@@ -56274,14 +57156,31 @@
         quickQuestionsLayout: quickQuestionsLayout,
         agentMessageBubbleColor: agentMessageBubbleColor,
         userMessageBoxColor: userMessageBoxColor,
+        assistantTextColor: assistantTextColor,
+        userTextColor: userTextColor,
         fontFamily: fontFamily,
         fontSize: fontSize,
-        defaultLanguage: defaultLanguage || locale
-      }), /*#__PURE__*/jsxRuntimeExports.jsx(ToggleButton, {
+        defaultLanguage: defaultLanguage || locale,
+        onDecision: handleDecision,
+        headerTextBold: headerTextBold,
+        headerTextItalic: headerTextItalic,
+        enableVoiceInteraction: enableVoiceInteraction,
+        isVoiceSessionActive: isVoiceSessionActive,
+        voiceStatus: voiceStatus,
+        voiceError: voiceError,
+        onVoiceToggle: handleVoiceToggle,
+        onBidiSubmit: () => sendBidiTextMessage(inputValue),
+        disclaimerText: disclaimerText,
+        disclaimerPosition: disclaimerPosition,
+        apiBaseUrl: apiBaseUrl,
+        apiKey: apiKey,
+        organizationId: organizationId
+      }), !isOpen && /*#__PURE__*/jsxRuntimeExports.jsx(ToggleButton, {
         isOpen: isOpen,
         isDark: isDark,
         primaryColor: primaryColor,
-        onToggle: toggleChat
+        onToggle: toggleChat,
+        textColor: textColor
       })]
     });
   };
@@ -56301,9 +57200,11 @@
       welcomeMessage: 'Hi! How can we help?',
       quickQuestions: [],
       quickQuestionsLayout: 'vertical',
-      textColor: '#000000',
+      textColor: '#fcfcfc',
       agentMessageBubbleColor: undefined,
       userMessageBoxColor: undefined,
+      assistantTextColor: undefined,
+      userTextColor: undefined,
       fontFamily: 'Inter',
       fontSize: '14px',
       defaultLanguage: 'en',
@@ -56311,18 +57212,24 @@
       openDelay: 0,
       apiBaseUrl: null,
       apiKey: null,
+      organizationId: null,
       sessionUrl: null,
       userId: null,
       userName: null,
       userEmail: null,
       locale: 'en',
+      headerTextBold: false,
+      headerTextItalic: false,
+      enableVoiceInteraction: false,
+      disclaimerText: undefined,
+      disclaimerPosition: 'top',
       onOpen: null,
       onClose: null
     };
     const API = {
-      /**
-       * Initialize the chat widget
-       * @param {Object} options - Configuration options
+      /**
+       * Initialize the chat widget
+       * @param {Object} options - Configuration options
        */
       init: async function () {
         let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -56362,17 +57269,17 @@
         }
         return API;
       },
-      /**
-       * Update configuration
-       * @param {Object} newConfig - New configuration options
+      /**
+       * Update configuration
+       * @param {Object} newConfig - New configuration options
        */
       updateConfig: function (newConfig) {
         config = _objectSpread2(_objectSpread2({}, config), newConfig);
         this.init(config);
         return API;
       },
-      /**
-       * Open the chat widget
+      /**
+       * Open the chat widget
        */
       open: function () {
         // Trigger open by updating config
@@ -56383,8 +57290,8 @@
         if (config.onOpen) config.onOpen();
         return API;
       },
-      /**
-       * Close the chat widget
+      /**
+       * Close the chat widget
        */
       close: function () {
         this.updateConfig({
@@ -56393,8 +57300,8 @@
         if (config.onClose) config.onClose();
         return API;
       },
-      /**
-       * Toggle dark mode
+      /**
+       * Toggle dark mode
        */
       toggleTheme: function () {
         config.darkMode = !config.darkMode;
@@ -56403,8 +57310,8 @@
         });
         return API;
       },
-      /**
-       * Destroy the widget
+      /**
+       * Destroy the widget
        */
       destroy: function () {
         if (root) {
@@ -56419,8 +57326,8 @@
         config = {};
         return API;
       },
-      /**
-       * Get current configuration
+      /**
+       * Get current configuration
        */
       getConfig: function () {
         return _objectSpread2({}, config);