@xplor-education/core-stencil-components 2.0.0

package/components/xplor-assistant.js

@@ -0,0 +1,763 @@
+import { h, p as proxyCustomElement, H, c as createEvent, a as Host } from './index.js';
+
+/**
+ * API integration utilities for the xplor-assistant component
+ */
+/**
+ * Generates a unique session ID
+ * Format: session_${timestamp}_${random}
+ */
+function generateSessionId() {
+    const timestamp = Date.now();
+    const random = Math.random().toString(36).substring(2, 11);
+    return `session_${timestamp}_${random}`;
+}
+/**
+ * Formats the current date as YYYY-MM-DD
+ */
+function getCurrentDate() {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+/**
+ * Formats the current time as HH:MM:SS
+ */
+function getCurrentTime() {
+    const now = new Date();
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    const seconds = String(now.getSeconds()).padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+}
+/**
+ * Sends a message to the assistant API
+ *
+ * @param endpoint - The API endpoint URL
+ * @param message - The user's message
+ * @param sessionId - The current session ID
+ * @param userId - The user's ID
+ * @param userEmail - The user's email
+ * @param userName - The user's name
+ * @returns Promise with the API response
+ * @throws Error if the API call fails
+ */
+async function sendMessageToAPI(endpoint, message, sessionId, userId, userEmail, userName) {
+    if (!endpoint) {
+        throw new Error('API endpoint is required');
+    }
+    if (!message || !message.trim()) {
+        throw new Error('Message cannot be empty');
+    }
+    const payload = {
+        message: message.trim(),
+        sessionId,
+        userId,
+        userEmail,
+        userName,
+        currentDate: getCurrentDate(),
+        currentTime: getCurrentTime(),
+    };
+    try {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        });
+        if (!response.ok) {
+            const errorText = await response.text().catch(() => response.statusText);
+            throw new Error(`API error: ${response.status} - ${errorText}`);
+        }
+        const data = await response.json();
+        // Validate response structure
+        if (!data.message || !data.sessionId) {
+            throw new Error('Invalid API response: missing required fields');
+        }
+        return data;
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            // Re-throw with more context if it's a fetch error
+            if (error.name === 'TypeError' && error.message.includes('fetch')) {
+                throw new Error('Network error: Unable to reach the API. Please check your connection.');
+            }
+            throw error;
+        }
+        throw new Error('Unknown error occurred while calling the API');
+    }
+}
+
+/**
+ * Web Speech API helpers for the xplor-assistant component
+ * Handles both Speech Recognition (voice input) and Speech Synthesis (text-to-speech)
+ */
+/**
+ * Detects browser capabilities for speech features
+ */
+function detectBrowserCapabilities() {
+    if (typeof window === 'undefined') {
+        return {
+            voiceInput: false,
+            textToSpeech: false,
+        };
+    }
+    const hasVoiceInput = 'SpeechRecognition' in window ||
+        'webkitSpeechRecognition' in window;
+    const hasTTS = 'speechSynthesis' in window;
+    return {
+        voiceInput: hasVoiceInput,
+        textToSpeech: hasTTS,
+    };
+}
+/**
+ * Speech Recognition Manager
+ * Handles voice-to-text functionality
+ */
+class SpeechRecognitionManager {
+    constructor() {
+        this.recognition = null;
+        this.onResultCallback = null;
+        this.onErrorCallback = null;
+        this.onStartCallback = null;
+        this.onEndCallback = null;
+        if (typeof window === 'undefined')
+            return;
+        const SpeechRecognition = window.SpeechRecognition ||
+            window.webkitSpeechRecognition;
+        if (SpeechRecognition) {
+            this.recognition = new SpeechRecognition();
+            this.recognition.continuous = false;
+            this.recognition.interimResults = false;
+            this.recognition.lang = 'en-US';
+            this.recognition.maxAlternatives = 1;
+            this.recognition.onstart = () => {
+                if (this.onStartCallback) {
+                    this.onStartCallback();
+                }
+            };
+            this.recognition.onresult = (event) => {
+                const transcript = event.results[0][0].transcript;
+                if (this.onResultCallback) {
+                    this.onResultCallback(transcript);
+                }
+            };
+            this.recognition.onerror = (event) => {
+                const errorMessage = this.getErrorMessage(event.error);
+                if (this.onErrorCallback) {
+                    this.onErrorCallback(errorMessage);
+                }
+            };
+            this.recognition.onend = () => {
+                if (this.onEndCallback) {
+                    this.onEndCallback();
+                }
+            };
+        }
+    }
+    /**
+     * Converts speech recognition error codes to user-friendly messages
+     */
+    getErrorMessage(error) {
+        switch (error) {
+            case 'no-speech':
+                return 'No speech detected. Please try again.';
+            case 'audio-capture':
+                return 'No microphone found. Please ensure a microphone is connected.';
+            case 'not-allowed':
+                return 'Microphone permission denied. Please allow microphone access.';
+            case 'network':
+                return 'Network error. Please check your connection.';
+            default:
+                return `Speech recognition error: ${error}`;
+        }
+    }
+    /**
+     * Starts listening for voice input
+     */
+    start() {
+        if (!this.recognition) {
+            console.error('Speech recognition not supported');
+            return;
+        }
+        try {
+            this.recognition.start();
+        }
+        catch (error) {
+            console.error('Failed to start speech recognition:', error);
+            if (this.onErrorCallback) {
+                this.onErrorCallback('Failed to start voice recognition');
+            }
+        }
+    }
+    /**
+     * Stops listening for voice input
+     */
+    stop() {
+        if (this.recognition) {
+            this.recognition.stop();
+        }
+    }
+    /**
+     * Sets the callback for when a result is received
+     */
+    onResult(callback) {
+        this.onResultCallback = callback;
+    }
+    /**
+     * Sets the callback for when an error occurs
+     */
+    onError(callback) {
+        this.onErrorCallback = callback;
+    }
+    /**
+     * Sets the callback for when recognition starts
+     */
+    onStart(callback) {
+        this.onStartCallback = callback;
+    }
+    /**
+     * Sets the callback for when recognition ends
+     */
+    onEnd(callback) {
+        this.onEndCallback = callback;
+    }
+    /**
+     * Checks if speech recognition is available
+     */
+    isAvailable() {
+        return this.recognition !== null;
+    }
+}
+/**
+ * Speech Synthesis Manager
+ * Handles text-to-speech functionality
+ */
+class SpeechSynthesisManager {
+    constructor() {
+        this.currentUtterance = null;
+        this.onStartCallback = null;
+        this.onEndCallback = null;
+    }
+    /**
+     * Speaks the given text
+     */
+    speak(text) {
+        if (typeof window === 'undefined' || !('speechSynthesis' in window)) {
+            console.error('Speech synthesis not supported');
+            return;
+        }
+        // Stop any ongoing speech first
+        this.stop();
+        this.currentUtterance = new SpeechSynthesisUtterance(text);
+        this.currentUtterance.lang = 'en-US';
+        this.currentUtterance.rate = 1.0;
+        this.currentUtterance.pitch = 1.0;
+        this.currentUtterance.volume = 1.0;
+        this.currentUtterance.onstart = () => {
+            if (this.onStartCallback) {
+                this.onStartCallback();
+            }
+        };
+        this.currentUtterance.onend = () => {
+            if (this.onEndCallback) {
+                this.onEndCallback();
+            }
+            this.currentUtterance = null;
+        };
+        this.currentUtterance.onerror = (event) => {
+            console.error('Speech synthesis error:', event);
+            if (this.onEndCallback) {
+                this.onEndCallback();
+            }
+            this.currentUtterance = null;
+        };
+        window.speechSynthesis.speak(this.currentUtterance);
+    }
+    /**
+     * Stops any ongoing speech
+     */
+    stop() {
+        if (typeof window === 'undefined' || !('speechSynthesis' in window)) {
+            return;
+        }
+        if (window.speechSynthesis.speaking) {
+            window.speechSynthesis.cancel();
+            if (this.onEndCallback) {
+                this.onEndCallback();
+            }
+        }
+        this.currentUtterance = null;
+    }
+    /**
+     * Checks if currently speaking
+     */
+    isSpeaking() {
+        if (typeof window === 'undefined' || !('speechSynthesis' in window)) {
+            return false;
+        }
+        return window.speechSynthesis.speaking;
+    }
+    /**
+     * Sets the callback for when speech starts
+     */
+    onStart(callback) {
+        this.onStartCallback = callback;
+    }
+    /**
+     * Sets the callback for when speech ends
+     */
+    onEnd(callback) {
+        this.onEndCallback = callback;
+    }
+    /**
+     * Checks if speech synthesis is available
+     */
+    isAvailable() {
+        return typeof window !== 'undefined' && 'speechSynthesis' in window;
+    }
+}
+
+/**
+ * SVG icon definitions for the xplor-assistant component
+ * Following the pattern used in xplor-button component
+ */
+/**
+ * Microphone icon for voice input button
+ */
+const microphoneIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+  <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+  <line x1="12" y1="19" x2="12" y2="23"></line>
+  <line x1="8" y1="23" x2="16" y2="23"></line>
+</svg>
+`;
+/**
+ * Send arrow icon for send message button
+ */
+const sendIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="22" y1="2" x2="11" y2="13"></line>
+  <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+</svg>
+`;
+/**
+ * Speaker icon for text-to-speech button
+ */
+const speakerIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+  <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+  <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
+</svg>
+`;
+/**
+ * Stop square icon for stopping speech
+ */
+const stopIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+  <rect x="6" y="6" width="12" height="12" rx="2"></rect>
+</svg>
+`;
+
+/**
+ * AssistantMessage - Internal component
+ * Renders a single message bubble with optional text-to-speech functionality
+ */
+const AssistantMessage = (props) => {
+    const { message, enableTextToSpeech, isSpeaking, onSpeak, onStopSpeaking } = props;
+    const messageClasses = {
+        'xplor-assistant__message': true,
+        'xplor-assistant__message--user': message.role === 'user',
+        'xplor-assistant__message--assistant': message.role === 'assistant',
+    };
+    const handleSpeakClick = () => {
+        if (isSpeaking) {
+            onStopSpeaking === null || onStopSpeaking === void 0 ? void 0 : onStopSpeaking();
+        }
+        else {
+            onSpeak === null || onSpeak === void 0 ? void 0 : onSpeak(message.content);
+        }
+    };
+    const formatTime = (timestamp) => {
+        const hours = timestamp.getHours();
+        const minutes = timestamp.getMinutes();
+        const ampm = hours >= 12 ? 'PM' : 'AM';
+        const displayHours = hours % 12 || 12;
+        const displayMinutes = minutes < 10 ? `0${minutes}` : minutes;
+        return `${displayHours}:${displayMinutes} ${ampm}`;
+    };
+    return (h("div", { class: messageClasses },
+        h("div", { class: "xplor-assistant__message-content" }, message.content),
+        h("div", { class: "xplor-assistant__message-footer" },
+            h("span", { class: "xplor-assistant__message-timestamp" }, formatTime(message.timestamp)),
+            message.role === 'assistant' && enableTextToSpeech && (h("button", { class: {
+                    'xplor-assistant__speak-button': true,
+                    'xplor-assistant__speak-button--active': isSpeaking,
+                }, onClick: handleSpeakClick, title: isSpeaking ? 'Stop speaking' : 'Listen to message', type: "button" },
+                h("span", { class: "xplor-assistant__speak-icon", innerHTML: isSpeaking ? stopIcon : speakerIcon }))))));
+};
+
+/**
+ * AssistantInput - Internal component
+ * Renders the input field with voice and send buttons
+ */
+const AssistantInput = (props) => {
+    const { placeholder, disabled, isLoading, enableVoiceInput, isListening, inputValue, onSendMessage, onStartListening, onStopListening, setInputValue, } = props;
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        console.log('[AssistantInput] Submit triggered, inputValue:', inputValue);
+        if (inputValue.trim() && !disabled && !isLoading) {
+            console.log('[AssistantInput] Calling onSendMessage with:', inputValue);
+            onSendMessage(inputValue);
+            setInputValue('');
+        }
+        else {
+            console.log('[AssistantInput] Submit blocked - disabled:', disabled, 'isLoading:', isLoading, 'hasValue:', !!inputValue.trim());
+        }
+    };
+    const handleInputChange = (e) => {
+        const target = e.target;
+        setInputValue(target.value);
+    };
+    const handleVoiceClick = () => {
+        if (isListening) {
+            onStopListening();
+        }
+        else {
+            onStartListening();
+        }
+    };
+    const isSendDisabled = !inputValue.trim() || disabled || isLoading;
+    return (h("div", { class: "xplor-assistant__input-container" },
+        h("form", { onSubmit: handleSubmit, class: "xplor-assistant__input-form" },
+            enableVoiceInput && (h("button", { type: "button", class: {
+                    'xplor-assistant__voice-button': true,
+                    'xplor-assistant__voice-button--listening': isListening,
+                }, onClick: handleVoiceClick, disabled: disabled || isLoading, title: isListening ? 'Stop listening' : 'Start voice input' },
+                h("span", { class: "xplor-assistant__voice-icon", innerHTML: microphoneIcon }))),
+            h("input", { type: "text", class: "xplor-assistant__input", placeholder: placeholder, value: inputValue, onInput: handleInputChange, disabled: disabled || isLoading }),
+            h("button", { type: "submit", class: "xplor-assistant__send-button", disabled: isSendDisabled, title: "Send message" },
+                h("span", { class: "xplor-assistant__send-icon", innerHTML: sendIcon })))));
+};
+
+/**
+ * QuickReplies - Internal component
+ * Renders quick reply suggestion buttons
+ */
+const QuickReplies = (props) => {
+    const { replies, disabled, onReplyClick } = props;
+    if (!replies || replies.length === 0) {
+        return null;
+    }
+    return (h("div", { class: "xplor-assistant__quick-replies" }, replies.map((reply) => (h("button", { class: "xplor-assistant__quick-reply", onClick: () => onReplyClick(reply), disabled: disabled, type: "button" }, reply)))));
+};
+
+/**
+ * TypingIndicator - Internal component
+ * Displays animated dots to indicate the assistant is processing/typing
+ */
+const TypingIndicator = () => {
+    return (h("div", { class: "xplor-assistant__typing-indicator" },
+        h("span", { class: "xplor-assistant__typing-dot" }),
+        h("span", { class: "xplor-assistant__typing-dot" }),
+        h("span", { class: "xplor-assistant__typing-dot" })));
+};
+
+const xplorAssistantCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-assistant {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-assistant {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-assistant {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-assistant {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-assistant {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-assistant {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-assistant, ul.sc-xplor-assistant {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-assistant li.sc-xplor-assistant, ul.sc-xplor-assistant li.sc-xplor-assistant {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-assistant, ul.mdc-list.sc-xplor-assistant {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-assistant li.mdc-list-item.sc-xplor-assistant, ul.mdc-list.sc-xplor-assistant li.mdc-list-item.sc-xplor-assistant {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-assistant {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-assistant {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-assistant {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-assistant {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-assistant .mdc-text-field--outlined.sc-xplor-assistant .mdc-notched-outline__notch.sc-xplor-assistant {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-assistant .mdc-notched-outline__notch.sc-xplor-assistant {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-assistant .mdc-notched-outline.sc-xplor-assistant .mdc-notched-outline__notch.sc-xplor-assistant {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-assistant {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-assistant:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-assistant {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-assistant {\n  margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-assistant {\n  margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-assistant {\n  margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-assistant {\n  margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-assistant {\n  margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-assistant {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-assistant {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-assistant {\n  margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-assistant {\n  margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-assistant {\n  margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-assistant {\n  margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-assistant {\n  margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-assistant {\n  margin-left: 5rem;\n  margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-assistant {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-assistant {\n  margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-assistant {\n  margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-assistant {\n  margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-assistant {\n  margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-assistant {\n  margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-assistant {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-assistant {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-assistant {\n  margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-assistant {\n  margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-assistant {\n  margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-assistant {\n  margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-assistant {\n  margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-assistant {\n  margin-left: 3.5rem;\n  margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-assistant {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-assistant {\n  margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-assistant {\n  margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-assistant {\n  margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-assistant {\n  margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-assistant {\n  margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-assistant {\n  margin-left: 3rem;\n  margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-assistant {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-assistant {\n  margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-assistant {\n  margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-assistant {\n  margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-assistant {\n  margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-assistant {\n  margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-assistant {\n  margin-left: 2.5rem;\n  margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-assistant {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-assistant {\n  margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-assistant {\n  margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-assistant {\n  margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-assistant {\n  margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-assistant {\n  margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-assistant {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-assistant {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-assistant {\n  margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-assistant {\n  margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-assistant {\n  margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-assistant {\n  margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-assistant {\n  margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-assistant {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-assistant {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-assistant {\n  margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-assistant {\n  margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-assistant {\n  margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-assistant {\n  margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-assistant {\n  margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-assistant {\n  margin-left: 1.25rem;\n  margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-assistant {\n  margin-top: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-assistant {\n  margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-assistant {\n  margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-assistant {\n  margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-assistant {\n  margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-assistant {\n  margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-assistant {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-assistant {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-assistant {\n  margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-assistant {\n  margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-assistant {\n  margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-assistant {\n  margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-assistant {\n  margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-assistant {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-assistant {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-assistant {\n  margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-assistant {\n  margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-assistant {\n  margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-assistant {\n  margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-assistant {\n  margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-assistant {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-assistant {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-assistant {\n  margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-assistant {\n  margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-assistant {\n  margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-assistant {\n  margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-assistant {\n  margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-assistant {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-assistant {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-assistant {\n  padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-assistant {\n  padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-assistant {\n  padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-assistant {\n  padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-assistant {\n  padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-assistant {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-assistant {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-assistant {\n  padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-assistant {\n  padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-assistant {\n  padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-assistant {\n  padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-assistant {\n  padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-assistant {\n  padding-left: 5rem;\n  padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-assistant {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-assistant {\n  padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-assistant {\n  padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-assistant {\n  padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-assistant {\n  padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-assistant {\n  padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-assistant {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-assistant {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-assistant {\n  padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-assistant {\n  padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-assistant {\n  padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-assistant {\n  padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-assistant {\n  padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-assistant {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-assistant {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-assistant {\n  padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-assistant {\n  padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-assistant {\n  padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-assistant {\n  padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-assistant {\n  padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-assistant {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-assistant {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-assistant {\n  padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-assistant {\n  padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-assistant {\n  padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-assistant {\n  padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-assistant {\n  padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-assistant {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-assistant {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-assistant {\n  padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-assistant {\n  padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-assistant {\n  padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-assistant {\n  padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-assistant {\n  padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-assistant {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-assistant {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-assistant {\n  padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-assistant {\n  padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-assistant {\n  padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-assistant {\n  padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-assistant {\n  padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-assistant {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-assistant {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-assistant {\n  padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-assistant {\n  padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-assistant {\n  padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-assistant {\n  padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-assistant {\n  padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-assistant {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-assistant {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-assistant {\n  padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-assistant {\n  padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-assistant {\n  padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-assistant {\n  padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-assistant {\n  padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-assistant {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-assistant {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-assistant {\n  padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-assistant {\n  padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-assistant {\n  padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-assistant {\n  padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-assistant {\n  padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-assistant {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-assistant {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-assistant {\n  padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-assistant {\n  padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-assistant {\n  padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-assistant {\n  padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-assistant {\n  padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-assistant {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-assistant {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-assistant {\n  padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-assistant {\n  padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-assistant {\n  padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-assistant {\n  padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-assistant {\n  padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-assistant {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-assistant {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sc-xplor-assistant-h {\n  display: block;\n  --assistant-bot-bg: var(--color-secondary);\n  --assistant-user-bg: #eeeeee;\n  --assistant-accent: var(--color-warning, #ff9800);\n  --assistant-border: #e0e0e0;\n  --assistant-text: #212121;\n  --assistant-text-light: #757575;\n}\n\n.xplor-assistant.sc-xplor-assistant {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background-color: #ffffff;\n  border-radius: 0.75rem;\n  border: 1px solid var(--assistant-border);\n  overflow: hidden;\n}\n.xplor-assistant--disabled.sc-xplor-assistant {\n  opacity: 0.6;\n  pointer-events: none;\n}\n.xplor-assistant--error.sc-xplor-assistant {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1.5rem;\n}\n\n.xplor-assistant__messages.sc-xplor-assistant {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  scroll-behavior: smooth;\n}\n.xplor-assistant__messages.sc-xplor-assistant::-webkit-scrollbar {\n  width: 6px;\n}\n.xplor-assistant__messages.sc-xplor-assistant::-webkit-scrollbar-track {\n  background: #f5f5f5;\n  border-radius: 3px;\n}\n.xplor-assistant__messages.sc-xplor-assistant::-webkit-scrollbar-thumb {\n  background: #bdbdbd;\n  border-radius: 3px;\n}\n.xplor-assistant__messages.sc-xplor-assistant::-webkit-scrollbar-thumb:hover {\n  background: #9e9e9e;\n}\n\n.xplor-assistant__message.sc-xplor-assistant {\n  display: flex;\n  flex-direction: column;\n  max-width: 80%;\n  animation: slideIn 0.3s ease-out;\n}\n.xplor-assistant__message--bot.sc-xplor-assistant {\n  align-self: flex-start;\n}\n.xplor-assistant__message--bot.sc-xplor-assistant .xplor-assistant__message-content.sc-xplor-assistant {\n  background-color: var(--assistant-bot-bg);\n  color: #ffffff;\n  border-radius: 1rem 1rem 1rem 0.25rem;\n}\n.xplor-assistant__message--user.sc-xplor-assistant {\n  align-self: flex-end;\n}\n.xplor-assistant__message--user.sc-xplor-assistant .xplor-assistant__message-content.sc-xplor-assistant {\n  background-color: var(--assistant-user-bg);\n  color: var(--assistant-text);\n  border-radius: 1rem 1rem 0.25rem 1rem;\n}\n\n.xplor-assistant__message-content.sc-xplor-assistant {\n  padding: 0.75rem 1rem;\n  font-size: 0.9375rem;\n  line-height: 1.5;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.xplor-assistant__message-footer.sc-xplor-assistant {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 0.25rem;\n  padding: 0 0.5rem;\n}\n\n.xplor-assistant__message-timestamp.sc-xplor-assistant {\n  font-size: 0.75rem;\n  color: var(--assistant-text-light);\n}\n\n.xplor-assistant__speak-button.sc-xplor-assistant {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.xplor-assistant__speak-button.sc-xplor-assistant:hover {\n  background-color: #eeeeee;\n}\n.xplor-assistant__speak-button--active.sc-xplor-assistant {\n  background-color: #e0e0e0;\n}\n\n.xplor-assistant__speak-icon.sc-xplor-assistant {\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.xplor-assistant__speak-icon.sc-xplor-assistant svg.sc-xplor-assistant {\n  width: 16px;\n  height: 16px;\n  stroke: var(--assistant-text-light);\n}\n\n.xplor-assistant__typing-indicator.sc-xplor-assistant {\n  display: flex;\n  gap: 0.25rem;\n  padding: 0.75rem 1rem;\n}\n\n.xplor-assistant__typing-dot.sc-xplor-assistant {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #bdbdbd;\n  animation: typingBounce 1.4s infinite ease-in-out;\n}\n.xplor-assistant__typing-dot.sc-xplor-assistant:nth-child(1) {\n  animation-delay: 0s;\n}\n.xplor-assistant__typing-dot.sc-xplor-assistant:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.xplor-assistant__typing-dot.sc-xplor-assistant:nth-child(3) {\n  animation-delay: 0.4s;\n}\n\n.xplor-assistant__error-banner.sc-xplor-assistant {\n  background-color: var(--color-error-50, #ffebee);\n  color: var(--color-error-700, #d32f2f);\n  padding: 0.75rem 1rem;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  margin: 0.5rem 0;\n}\n\n.xplor-assistant__error-message.sc-xplor-assistant {\n  color: var(--color-error-700, #d32f2f);\n  font-size: 0.9375rem;\n  text-align: center;\n}\n\n.xplor-assistant__quick-replies.sc-xplor-assistant {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  border-top: 1px solid var(--assistant-border);\n  background-color: #fafafa;\n}\n\n.xplor-assistant__quick-reply.sc-xplor-assistant {\n  padding: 0.5rem 1rem;\n  background-color: #ffffff;\n  border: 2px solid var(--assistant-accent);\n  color: var(--assistant-accent);\n  border-radius: 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n.xplor-assistant__quick-reply.sc-xplor-assistant:hover:not(:disabled) {\n  background-color: var(--assistant-accent);\n  color: #ffffff;\n  transform: translateY(-1px);\n}\n.xplor-assistant__quick-reply.sc-xplor-assistant:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.xplor-assistant__input-container.sc-xplor-assistant {\n  border-top: 1px solid var(--assistant-border);\n  padding: 0.75rem;\n  background-color: #ffffff;\n}\n\n.xplor-assistant__input-form.sc-xplor-assistant {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n}\n\n.xplor-assistant__input.sc-xplor-assistant {\n  flex: 1;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--assistant-border);\n  border-radius: 1.5rem;\n  font-size: 0.9375rem;\n  outline: none;\n  transition: border-color 0.2s;\n}\n.xplor-assistant__input.sc-xplor-assistant:focus {\n  border-color: var(--assistant-bot-bg);\n}\n.xplor-assistant__input.sc-xplor-assistant:disabled {\n  background-color: #f5f5f5;\n  cursor: not-allowed;\n}\n.xplor-assistant__input.sc-xplor-assistant::placeholder {\n  color: #9e9e9e;\n}\n\n.xplor-assistant__voice-button.sc-xplor-assistant {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: none;\n  background-color: #eeeeee;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n  flex-shrink: 0;\n}\n.xplor-assistant__voice-button.sc-xplor-assistant:hover:not(:disabled) {\n  background-color: #e0e0e0;\n  transform: scale(1.05);\n}\n.xplor-assistant__voice-button--listening.sc-xplor-assistant {\n  background-color: var(--color-error, #f44336);\n  animation: pulse 1.5s ease-in-out infinite;\n}\n.xplor-assistant__voice-button--listening.sc-xplor-assistant .xplor-assistant__voice-icon.sc-xplor-assistant svg.sc-xplor-assistant {\n  stroke: #ffffff;\n}\n.xplor-assistant__voice-button.sc-xplor-assistant:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.xplor-assistant__voice-icon.sc-xplor-assistant {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.xplor-assistant__voice-icon.sc-xplor-assistant svg.sc-xplor-assistant {\n  width: 20px;\n  height: 20px;\n  stroke: var(--assistant-text);\n}\n\n.xplor-assistant__send-button.sc-xplor-assistant {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: none;\n  background-color: var(--assistant-bot-bg);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n  flex-shrink: 0;\n}\n.xplor-assistant__send-button.sc-xplor-assistant:hover:not(:disabled) {\n  background-color: var(--color-secondary-700, #7b1fa2);\n  transform: scale(1.05);\n}\n.xplor-assistant__send-button.sc-xplor-assistant:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.xplor-assistant__send-icon.sc-xplor-assistant {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.xplor-assistant__send-icon.sc-xplor-assistant svg.sc-xplor-assistant {\n  width: 20px;\n  height: 20px;\n  stroke: #ffffff;\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes typingBounce {\n  0%, 60%, 100% {\n    transform: translateY(0);\n  }\n  30% {\n    transform: translateY(-8px);\n  }\n}\n@keyframes pulse {\n  0%, 100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.05);\n    opacity: 0.9;\n  }\n}";
+
+const XplorAssistant$1 = /*@__PURE__*/ proxyCustomElement(class XplorAssistant extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.assistantMessageSent = createEvent(this, "assistantMessageSent");
+        this.assistantMessageReceived = createEvent(this, "assistantMessageReceived");
+        this.assistantError = createEvent(this, "assistantError");
+        this.assistantSessionCreated = createEvent(this, "assistantSessionCreated");
+        this.placeholder = 'Type your message...';
+        this.enableVoiceInput = true;
+        this.enableTextToSpeech = true;
+        this.autoSpeak = false;
+        this.maxHeight = '600px';
+        this.disabled = false;
+        // State
+        this.messages = [];
+        this.internalSessionId = '';
+        this.isLoading = false;
+        this.isListening = false;
+        this.isSpeaking = false;
+        this.error = '';
+        this.inputValue = '';
+        this.hasVoiceSupport = false;
+        this.hasTTSSupport = false;
+        this.handleSendMessage = async (messageText) => {
+            console.log('[XplorAssistant] handleSendMessage called with:', messageText);
+            if (this.disabled || this.isLoading || !messageText.trim()) {
+                console.log('[XplorAssistant] Message blocked - disabled:', this.disabled, 'isLoading:', this.isLoading, 'hasValue:', !!messageText.trim());
+                return;
+            }
+            // Clear the input immediately
+            this.inputValue = '';
+            console.log('[XplorAssistant] Input cleared, proceeding with message');
+            const userMessage = {
+                id: `user-${Date.now()}`,
+                role: 'user',
+                content: messageText.trim(),
+                timestamp: new Date(),
+            };
+            // Add user message to the conversation
+            this.messages = [...this.messages, userMessage];
+            this.error = '';
+            this.isLoading = true;
+            // Emit message sent event
+            this.assistantMessageSent.emit({
+                message: userMessage.content,
+                sessionId: this.internalSessionId,
+                timestamp: userMessage.timestamp,
+            });
+            try {
+                // Call the API
+                const response = await sendMessageToAPI(this.apiEndpoint, userMessage.content, this.internalSessionId, this.userId, this.userEmail, this.userName);
+                // Update session ID if changed
+                if (response.sessionId && response.sessionId !== this.internalSessionId) {
+                    this.internalSessionId = response.sessionId;
+                }
+                // Add assistant response to conversation
+                const assistantMessage = {
+                    id: `assistant-${Date.now()}`,
+                    role: 'assistant',
+                    content: response.message,
+                    timestamp: new Date(),
+                };
+                this.messages = [...this.messages, assistantMessage];
+                // Emit message received event
+                this.assistantMessageReceived.emit({
+                    message: assistantMessage.content,
+                    sessionId: this.internalSessionId,
+                    timestamp: assistantMessage.timestamp,
+                });
+                // Auto-speak if enabled
+                if (this.autoSpeak && this.enableTextToSpeech) {
+                    this.speechSynthesis.speak(assistantMessage.content);
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Failed to send message';
+                this.handleError(errorMessage, 'api');
+            }
+            finally {
+                this.isLoading = false;
+            }
+        };
+        this.handleVoiceInput = (transcript) => {
+            if (transcript && transcript.trim()) {
+                this.handleSendMessage(transcript);
+            }
+        };
+        this.handleError = (error, type) => {
+            this.error = error;
+            this.assistantError.emit({
+                error,
+                type,
+                timestamp: new Date(),
+            });
+        };
+        this.handleStartListening = () => {
+            if (this.speechRecognition && this.enableVoiceInput && !this.disabled && !this.isLoading) {
+                this.speechRecognition.start();
+            }
+        };
+        this.handleStopListening = () => {
+            if (this.speechRecognition) {
+                this.speechRecognition.stop();
+            }
+        };
+        this.handleSpeak = (text) => {
+            if (this.speechSynthesis && this.enableTextToSpeech) {
+                this.speechSynthesis.speak(text);
+            }
+        };
+        this.handleStopSpeaking = () => {
+            if (this.speechSynthesis) {
+                this.speechSynthesis.stop();
+            }
+        };
+        this.handleQuickReply = (reply) => {
+            this.handleSendMessage(reply);
+        };
+        this.setInputValue = (value) => {
+            this.inputValue = value;
+        };
+    }
+    componentWillLoad() {
+        // Validate required props
+        if (!this.apiEndpoint) {
+            console.error('xplor-assistant: apiEndpoint prop is required');
+            this.error = 'Configuration error: API endpoint not provided';
+            return;
+        }
+        if (!this.userId || !this.userEmail || !this.userName) {
+            console.error('xplor-assistant: userId, userEmail, and userName props are required');
+            this.error = 'Configuration error: User information not provided';
+            return;
+        }
+        // Initialize session
+        if (this.sessionId) {
+            this.internalSessionId = this.sessionId;
+        }
+        else {
+            this.internalSessionId = generateSessionId();
+            this.assistantSessionCreated.emit({
+                sessionId: this.internalSessionId,
+                timestamp: new Date(),
+            });
+        }
+        // Detect browser capabilities
+        const capabilities = detectBrowserCapabilities();
+        this.hasVoiceSupport = capabilities.voiceInput;
+        this.hasTTSSupport = capabilities.textToSpeech;
+        // Disable features if not supported
+        if (!this.hasVoiceSupport) {
+            this.enableVoiceInput = false;
+        }
+        if (!this.hasTTSSupport) {
+            this.enableTextToSpeech = false;
+        }
+        // Initialize speech managers
+        this.speechRecognition = new SpeechRecognitionManager();
+        this.speechSynthesis = new SpeechSynthesisManager();
+        // Setup speech recognition callbacks
+        this.speechRecognition.onStart(() => {
+            this.isListening = true;
+        });
+        this.speechRecognition.onEnd(() => {
+            this.isListening = false;
+        });
+        this.speechRecognition.onResult((transcript) => {
+            this.handleVoiceInput(transcript);
+        });
+        this.speechRecognition.onError((error) => {
+            this.isListening = false;
+            this.handleError(error, 'voice');
+        });
+        // Setup speech synthesis callbacks
+        this.speechSynthesis.onStart(() => {
+            this.isSpeaking = true;
+        });
+        this.speechSynthesis.onEnd(() => {
+            this.isSpeaking = false;
+        });
+    }
+    handleSessionIdChange(newSessionId) {
+        if (newSessionId && newSessionId !== this.internalSessionId) {
+            this.internalSessionId = newSessionId;
+        }
+    }
+    componentDidUpdate() {
+        // Auto-scroll to bottom when new messages arrive
+        this.scrollToBottom();
+    }
+    disconnectedCallback() {
+        // Cleanup speech synthesis
+        if (this.speechSynthesis) {
+            this.speechSynthesis.stop();
+        }
+    }
+    // Public Methods
+    async sendMessage(message) {
+        if (!message || !message.trim()) {
+            return;
+        }
+        await this.handleSendMessage(message);
+    }
+    async clearHistory() {
+        this.messages = [];
+        this.error = '';
+    }
+    async speak(text) {
+        if (this.enableTextToSpeech && this.speechSynthesis) {
+            this.speechSynthesis.speak(text);
+        }
+    }
+    async stopSpeaking() {
+        if (this.speechSynthesis) {
+            this.speechSynthesis.stop();
+        }
+    }
+    // Private Methods
+    scrollToBottom() {
+        if (this.messagesContainerRef) {
+            setTimeout(() => {
+                this.messagesContainerRef.scrollTop = this.messagesContainerRef.scrollHeight;
+            }, 100);
+        }
+    }
+    render() {
+        // Show error state if critical error
+        if (this.error && !this.apiEndpoint) {
+            return (h(Host, null, h("div", { class: "xplor-assistant xplor-assistant--error" }, h("div", { class: "xplor-assistant__error-message" }, this.error))));
+        }
+        return (h(Host, null, h("div", { class: {
+                'xplor-assistant': true,
+                'xplor-assistant--disabled': this.disabled,
+            }, style: { maxHeight: this.maxHeight } }, h("div", { class: "xplor-assistant__messages", ref: (el) => (this.messagesContainerRef = el) }, this.messages.map((message) => (h(AssistantMessage, { message: message, enableTextToSpeech: this.enableTextToSpeech, autoSpeak: false, isSpeaking: this.isSpeaking, onSpeak: this.handleSpeak, onStopSpeaking: this.handleStopSpeaking }))), this.isLoading && (h("div", { class: "xplor-assistant__message xplor-assistant__message--assistant" }, h(TypingIndicator, null))), this.error && this.apiEndpoint && (h("div", { class: "xplor-assistant__error-banner" }, this.error))), this.quickReplies && this.quickReplies.length > 0 && (h(QuickReplies, { replies: this.quickReplies, disabled: this.disabled || this.isLoading, onReplyClick: this.handleQuickReply })), h(AssistantInput, { placeholder: this.placeholder, disabled: this.disabled, isLoading: this.isLoading, enableVoiceInput: this.enableVoiceInput && this.hasVoiceSupport, isListening: this.isListening, onSendMessage: this.handleSendMessage, onStartListening: this.handleStartListening, onStopListening: this.handleStopListening, inputValue: this.inputValue, setInputValue: this.setInputValue }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "sessionId": ["handleSessionIdChange"]
+    }; }
+    static get style() { return xplorAssistantCss; }
+}, [2, "xplor-assistant", {
+        "apiEndpoint": [1, "api-endpoint"],
+        "userId": [1, "user-id"],
+        "userEmail": [1, "user-email"],
+        "userName": [1, "user-name"],
+        "sessionId": [1, "session-id"],
+        "quickReplies": [16, "quick-replies"],
+        "placeholder": [1],
+        "enableVoiceInput": [4, "enable-voice-input"],
+        "enableTextToSpeech": [4, "enable-text-to-speech"],
+        "autoSpeak": [4, "auto-speak"],
+        "maxHeight": [1, "max-height"],
+        "disabled": [4],
+        "messages": [32],
+        "internalSessionId": [32],
+        "isLoading": [32],
+        "isListening": [32],
+        "isSpeaking": [32],
+        "error": [32],
+        "inputValue": [32],
+        "hasVoiceSupport": [32],
+        "hasTTSSupport": [32],
+        "sendMessage": [64],
+        "clearHistory": [64],
+        "speak": [64],
+        "stopSpeaking": [64]
+    }, undefined, {
+        "sessionId": ["handleSessionIdChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-assistant"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-assistant":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorAssistant$1);
+            }
+            break;
+    } });
+}
+
+const XplorAssistant = XplorAssistant$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorAssistant, defineCustomElement };
+//# sourceMappingURL=xplor-assistant.js.map
+
+//# sourceMappingURL=xplor-assistant.js.map