@fusioni/client-sdk 1.1.5 → 1.1.8

package/dist/index.esm.js

@@ -1,7 +1,232 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 
+const en = {
+    // Chat Interface
+    chat: {
+        title: 'Fusioni AI',
+        subtitle: 'AI Assistant',
+        welcome: {
+            title: 'Welcome to Fusioni',
+            description: 'Start a new conversation to begin chatting with AI',
+            startButton: 'Start New Conversation',
+            creating: 'Creating...'
+        },
+        input: {
+            placeholder: 'Type your message...',
+            send: 'Send',
+            upload: 'Upload',
+            record: 'Record'
+        },
+        conversations: {
+            title: 'Conversations',
+            search: 'Search conversations...',
+            newConversation: 'New Conversation',
+            noConversations: 'No conversations yet',
+            delete: 'Delete conversation',
+            newIndicator: 'New conversation - will be saved when you send a message',
+            deleteConfirm: {
+                title: 'Delete Conversation',
+                message: 'Are you sure you want to delete this conversation? This action cannot be undone.',
+                confirm: 'Delete',
+                cancel: 'Cancel'
+            }
+        },
+        attachedImages: 'Images',
+        attachedVideos: 'Videos',
+        messages: {
+            loading: 'Working on it...',
+            error: 'Oops! Something went wrong. Please try again later.',
+            delete: 'Delete message',
+            deleteConfirm: {
+                title: 'Delete Message',
+                message: 'Are you sure you want to delete this message? This action cannot be undone.',
+                confirm: 'Delete',
+                cancel: 'Cancel'
+            }
+        },
+        connection: {
+            connected: 'Real-time updates connected',
+            disconnected: 'Real-time updates disconnected'
+        },
+        fullscreen: {
+            enter: 'Enter fullscreen',
+            exit: 'Exit fullscreen'
+        },
+        theme: {
+            light: 'Switch to light theme',
+            dark: 'Switch to dark theme'
+        },
+        errors: {
+            failedToCreateConversation: 'Failed to create conversation',
+            failedToLoadConversation: 'Failed to load conversation',
+            failedToDeleteConversation: 'Failed to delete conversation',
+            failedToSendMessage: 'Failed to send message',
+            failedToDeleteMessage: 'Failed to delete message',
+            failedToUploadFile: 'Failed to upload file',
+            failedToInitialize: 'Failed to initialize chat service',
+            retry: 'Retry'
+        }
+    },
+    // Language Switcher
+    language: {
+        english: 'English',
+        greek: 'Ελληνικά',
+        switchLanguage: 'Switch Language'
+    },
+    // Common
+    common: {
+        close: 'Close',
+        open: 'Open',
+        cancel: 'Cancel',
+        confirm: 'Confirm',
+        save: 'Save',
+        delete: 'Delete',
+        edit: 'Edit',
+        search: 'Search',
+        clear: 'Clear',
+        loading: 'Loading...',
+        error: 'Error',
+        success: 'Success',
+        warning: 'Warning',
+        info: 'Info',
+        yes: 'Yes',
+        no: 'No'
+    }
+};
+
+const el = {
+    // Chat Interface
+    chat: {
+        title: 'Fusioni AI',
+        subtitle: 'AI Βοηθός',
+        welcome: {
+            title: 'Καλώς ήρθατε στο Fusioni AI',
+            description: 'Ξεκινήστε μια νέα συνομιλία για να αρχίσετε να συνομιλείτε με AI',
+            startButton: 'Ξεκινήστε Νέα Συνομιλία',
+            creating: 'Δημιουργία...'
+        },
+        input: {
+            placeholder: 'Πληκτρολογήστε το μήνυμά σας...',
+            send: 'Αποστολή',
+            upload: 'Ανέβασμα',
+            record: 'Εγγραφή'
+        },
+        conversations: {
+            title: 'Συνομιλίες',
+            search: 'Αναζήτηση συνομιλιών...',
+            newConversation: 'Νέα Συνομιλία',
+            noConversations: 'Δεν υπάρχουν συνομιλίες ακόμα',
+            delete: 'Διαγραφή συνομιλίας',
+            newIndicator: 'Νέα συνομιλία - θα αποθηκευτεί όταν στείλετε μήνυμα',
+            deleteConfirm: {
+                title: 'Διαγραφή Συνομιλίας',
+                message: 'Είστε σίγουροι ότι θέλετε να διαγράψετε αυτή τη συνομιλία; Αυτή η ενέργεια δεν μπορεί να αναιρεθεί.',
+                confirm: 'Διαγραφή',
+                cancel: 'Ακύρωση'
+            }
+        },
+        attachedImages: 'Εικόνες',
+        attachedVideos: 'Βίντεο',
+        messages: {
+            loading: 'Εργάζομαι...',
+            error: 'Ουπς! Κάτι πήγε στραβά. Παρακαλώ δοκιμάστε ξανά αργότερα.',
+            delete: 'Διαγραφή μηνύματος',
+            deleteConfirm: {
+                title: 'Διαγραφή Μηνύματος',
+                message: 'Είστε σίγουροι ότι θέλετε να διαγράψετε αυτό το μήνυμα; Αυτή η ενέργεια δεν μπορεί να αναιρεθεί.',
+                confirm: 'Διαγραφή',
+                cancel: 'Ακύρωση'
+            }
+        },
+        connection: {
+            connected: 'Συνδεδεμένο για ενημερώσεις σε πραγματικό χρόνο',
+            disconnected: 'Αποσυνδεδεμένο από ενημερώσεις σε πραγματικό χρόνο'
+        },
+        fullscreen: {
+            enter: 'Πλήρης οθόνη',
+            exit: 'Έξοδος από πλήρη οθόνη'
+        },
+        theme: {
+            light: 'Εναλλαγή σε φωτεινό θέμα',
+            dark: 'Εναλλαγή σε σκοτεινό θέμα'
+        },
+        errors: {
+            failedToCreateConversation: 'Αποτυχία δημιουργίας συνομιλίας',
+            failedToLoadConversation: 'Αποτυχία φόρτωσης συνομιλίας',
+            failedToDeleteConversation: 'Αποτυχία διαγραφής συνομιλίας',
+            failedToSendMessage: 'Αποτυχία αποστολής μηνύματος',
+            failedToDeleteMessage: 'Αποτυχία διαγραφής μηνύματος',
+            failedToUploadFile: 'Αποτυχία ανεβάσματος αρχείου',
+            failedToInitialize: 'Αποτυχία αρχικοποίησης υπηρεσίας συνομιλίας',
+            retry: 'Επανάληψη'
+        }
+    },
+    // Language Switcher
+    language: {
+        english: 'English',
+        greek: 'Ελληνικά',
+        switchLanguage: 'Αλλαγή Γλώσσας'
+    },
+    // Common
+    common: {
+        close: 'Κλείσιμο',
+        open: 'Άνοιγμα',
+        cancel: 'Ακύρωση',
+        confirm: 'Επιβεβαίωση',
+        save: 'Αποθήκευση',
+        delete: 'Διαγραφή',
+        edit: 'Επεξεργασία',
+        search: 'Αναζήτηση',
+        clear: 'Εκκαθάριση',
+        loading: 'Φόρτωση...',
+        error: 'Σφάλμα',
+        success: 'Επιτυχία',
+        warning: 'Προειδοποίηση',
+        info: 'Πληροφορία',
+        yes: 'Ναι',
+        no: 'Όχι'
+    }
+};
+
+const translations = {
+    en,
+    el
+};
+const getTranslation = (language, key) => {
+    const keys = key.split('.');
+    let value = translations[language];
+    for (const k of keys) {
+        if (value && typeof value === 'object' && k in value) {
+            value = value[k];
+        }
+        else {
+            // Fallback to English if key not found
+            value = translations.en;
+            for (const fallbackKey of keys) {
+                if (value && typeof value === 'object' && fallbackKey in value) {
+                    value = value[fallbackKey];
+                }
+                else {
+                    return key; // Return the key if not found in fallback
+                }
+            }
+            break;
+        }
+    }
+    return typeof value === 'string' ? value : key;
+};
+const getAvailableLanguages = () => {
+    return [
+        { code: 'en', name: 'English' },
+        { code: 'el', name: 'Ελληνικά' }
+    ];
+};
+const isValidLanguage = (language) => {
+    return language === 'en' || language === 'el';
+};
+
 function bind(fn, thisArg) {
   return function wrap() {
     return fn.apply(thisArg, arguments);
@@ -1359,12 +1584,12 @@ const hasStandardBrowserWebWorkerEnv = (() => {
 const origin = hasBrowserEnv && window.location.href || 'http://localhost';
 
 var utils = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  hasBrowserEnv: hasBrowserEnv,
-  hasStandardBrowserEnv: hasStandardBrowserEnv,
-  hasStandardBrowserWebWorkerEnv: hasStandardBrowserWebWorkerEnv,
-  navigator: _navigator,
-  origin: origin
+    __proto__: null,
+    hasBrowserEnv: hasBrowserEnv,
+    hasStandardBrowserEnv: hasStandardBrowserEnv,
+    hasStandardBrowserWebWorkerEnv: hasStandardBrowserWebWorkerEnv,
+    navigator: _navigator,
+    origin: origin
 });
 
 var platform = {
@@ -4264,19 +4489,28 @@ class SDKClientService {
             theme: serverConfig.theme !== null && serverConfig.theme !== undefined
                 ? serverConfig.theme
                 : userConfig.theme,
+            showThemeToggle: serverConfig.show_theme_toggle !== undefined
+                ? serverConfig.show_theme_toggle
+                : userConfig.showThemeToggle,
+            showFullscreenToggle: serverConfig.show_fullscreen_toggle !== undefined
+                ? serverConfig.show_fullscreen_toggle
+                : userConfig.showFullscreenToggle,
+            showLanguageSwitcher: serverConfig.show_language_switcher !== undefined
+                ? serverConfig.show_language_switcher
+                : userConfig.showLanguageSwitcher,
             position: serverConfig.position !== null && serverConfig.position !== undefined
                 ? serverConfig.position
                 : userConfig.position,
             primaryColor: serverConfig.primary_color !== null && serverConfig.primary_color !== undefined
                 ? serverConfig.primary_color
                 : userConfig.primaryColor,
-            showConversationList: serverConfig.show_conversation_list !== undefined
+            showConversationList: typeof serverConfig.show_conversation_list === 'boolean'
                 ? serverConfig.show_conversation_list
                 : userConfig.showConversationList,
-            enableAudioRecording: serverConfig.enable_audio_recording !== undefined
+            enableAudioRecording: typeof serverConfig.enable_audio_recording === 'boolean'
                 ? serverConfig.enable_audio_recording
                 : userConfig.enableAudioRecording,
-            enableFileUpload: serverConfig.enable_file_upload !== undefined
+            enableFileUpload: typeof serverConfig.enable_file_upload === 'boolean'
                 ? serverConfig.enable_file_upload
                 : userConfig.enableFileUpload,
             maxFileSize: serverConfig.max_file_size !== null && serverConfig.max_file_size !== undefined
@@ -4303,231 +4537,6 @@ const getSDKClientService = () => {
     return sdkClientServiceInstance;
 };
 
-const en = {
-    // Chat Interface
-    chat: {
-        title: 'Fusioni AI',
-        subtitle: 'AI Assistant',
-        welcome: {
-            title: 'Welcome to Fusioni',
-            description: 'Start a new conversation to begin chatting with AI',
-            startButton: 'Start New Conversation',
-            creating: 'Creating...'
-        },
-        input: {
-            placeholder: 'Type your message...',
-            send: 'Send',
-            upload: 'Upload',
-            record: 'Record'
-        },
-        conversations: {
-            title: 'Conversations',
-            search: 'Search conversations...',
-            newConversation: 'New Conversation',
-            noConversations: 'No conversations yet',
-            delete: 'Delete conversation',
-            newIndicator: 'New conversation - will be saved when you send a message',
-            deleteConfirm: {
-                title: 'Delete Conversation',
-                message: 'Are you sure you want to delete this conversation? This action cannot be undone.',
-                confirm: 'Delete',
-                cancel: 'Cancel'
-            }
-        },
-        attachedImages: 'Images',
-        attachedVideos: 'Videos',
-        messages: {
-            loading: 'Working on it...',
-            error: 'Oops! Something went wrong. Please try again later.',
-            delete: 'Delete message',
-            deleteConfirm: {
-                title: 'Delete Message',
-                message: 'Are you sure you want to delete this message? This action cannot be undone.',
-                confirm: 'Delete',
-                cancel: 'Cancel'
-            }
-        },
-        connection: {
-            connected: 'Real-time updates connected',
-            disconnected: 'Real-time updates disconnected'
-        },
-        fullscreen: {
-            enter: 'Enter fullscreen',
-            exit: 'Exit fullscreen'
-        },
-        theme: {
-            light: 'Switch to light theme',
-            dark: 'Switch to dark theme'
-        },
-        errors: {
-            failedToCreateConversation: 'Failed to create conversation',
-            failedToLoadConversation: 'Failed to load conversation',
-            failedToDeleteConversation: 'Failed to delete conversation',
-            failedToSendMessage: 'Failed to send message',
-            failedToDeleteMessage: 'Failed to delete message',
-            failedToUploadFile: 'Failed to upload file',
-            failedToInitialize: 'Failed to initialize chat service',
-            retry: 'Retry'
-        }
-    },
-    // Language Switcher
-    language: {
-        english: 'English',
-        greek: 'Ελληνικά',
-        switchLanguage: 'Switch Language'
-    },
-    // Common
-    common: {
-        close: 'Close',
-        open: 'Open',
-        cancel: 'Cancel',
-        confirm: 'Confirm',
-        save: 'Save',
-        delete: 'Delete',
-        edit: 'Edit',
-        search: 'Search',
-        clear: 'Clear',
-        loading: 'Loading...',
-        error: 'Error',
-        success: 'Success',
-        warning: 'Warning',
-        info: 'Info',
-        yes: 'Yes',
-        no: 'No'
-    }
-};
-
-const el = {
-    // Chat Interface
-    chat: {
-        title: 'Fusioni AI',
-        subtitle: 'AI Βοηθός',
-        welcome: {
-            title: 'Καλώς ήρθατε στο Fusioni AI',
-            description: 'Ξεκινήστε μια νέα συνομιλία για να αρχίσετε να συνομιλείτε με AI',
-            startButton: 'Ξεκινήστε Νέα Συνομιλία',
-            creating: 'Δημιουργία...'
-        },
-        input: {
-            placeholder: 'Πληκτρολογήστε το μήνυμά σας...',
-            send: 'Αποστολή',
-            upload: 'Ανέβασμα',
-            record: 'Εγγραφή'
-        },
-        conversations: {
-            title: 'Συνομιλίες',
-            search: 'Αναζήτηση συνομιλιών...',
-            newConversation: 'Νέα Συνομιλία',
-            noConversations: 'Δεν υπάρχουν συνομιλίες ακόμα',
-            delete: 'Διαγραφή συνομιλίας',
-            newIndicator: 'Νέα συνομιλία - θα αποθηκευτεί όταν στείλετε μήνυμα',
-            deleteConfirm: {
-                title: 'Διαγραφή Συνομιλίας',
-                message: 'Είστε σίγουροι ότι θέλετε να διαγράψετε αυτή τη συνομιλία; Αυτή η ενέργεια δεν μπορεί να αναιρεθεί.',
-                confirm: 'Διαγραφή',
-                cancel: 'Ακύρωση'
-            }
-        },
-        attachedImages: 'Εικόνες',
-        attachedVideos: 'Βίντεο',
-        messages: {
-            loading: 'Εργάζομαι...',
-            error: 'Ουπς! Κάτι πήγε στραβά. Παρακαλώ δοκιμάστε ξανά αργότερα.',
-            delete: 'Διαγραφή μηνύματος',
-            deleteConfirm: {
-                title: 'Διαγραφή Μηνύματος',
-                message: 'Είστε σίγουροι ότι θέλετε να διαγράψετε αυτό το μήνυμα; Αυτή η ενέργεια δεν μπορεί να αναιρεθεί.',
-                confirm: 'Διαγραφή',
-                cancel: 'Ακύρωση'
-            }
-        },
-        connection: {
-            connected: 'Συνδεδεμένο για ενημερώσεις σε πραγματικό χρόνο',
-            disconnected: 'Αποσυνδεδεμένο από ενημερώσεις σε πραγματικό χρόνο'
-        },
-        fullscreen: {
-            enter: 'Πλήρης οθόνη',
-            exit: 'Έξοδος από πλήρη οθόνη'
-        },
-        theme: {
-            light: 'Εναλλαγή σε φωτεινό θέμα',
-            dark: 'Εναλλαγή σε σκοτεινό θέμα'
-        },
-        errors: {
-            failedToCreateConversation: 'Αποτυχία δημιουργίας συνομιλίας',
-            failedToLoadConversation: 'Αποτυχία φόρτωσης συνομιλίας',
-            failedToDeleteConversation: 'Αποτυχία διαγραφής συνομιλίας',
-            failedToSendMessage: 'Αποτυχία αποστολής μηνύματος',
-            failedToDeleteMessage: 'Αποτυχία διαγραφής μηνύματος',
-            failedToUploadFile: 'Αποτυχία ανεβάσματος αρχείου',
-            failedToInitialize: 'Αποτυχία αρχικοποίησης υπηρεσίας συνομιλίας',
-            retry: 'Επανάληψη'
-        }
-    },
-    // Language Switcher
-    language: {
-        english: 'English',
-        greek: 'Ελληνικά',
-        switchLanguage: 'Αλλαγή Γλώσσας'
-    },
-    // Common
-    common: {
-        close: 'Κλείσιμο',
-        open: 'Άνοιγμα',
-        cancel: 'Ακύρωση',
-        confirm: 'Επιβεβαίωση',
-        save: 'Αποθήκευση',
-        delete: 'Διαγραφή',
-        edit: 'Επεξεργασία',
-        search: 'Αναζήτηση',
-        clear: 'Εκκαθάριση',
-        loading: 'Φόρτωση...',
-        error: 'Σφάλμα',
-        success: 'Επιτυχία',
-        warning: 'Προειδοποίηση',
-        info: 'Πληροφορία',
-        yes: 'Ναι',
-        no: 'Όχι'
-    }
-};
-
-const translations = {
-    en,
-    el
-};
-const getTranslation = (language, key) => {
-    const keys = key.split('.');
-    let value = translations[language];
-    for (const k of keys) {
-        if (value && typeof value === 'object' && k in value) {
-            value = value[k];
-        }
-        else {
-            // Fallback to English if key not found
-            value = translations.en;
-            for (const fallbackKey of keys) {
-                if (value && typeof value === 'object' && fallbackKey in value) {
-                    value = value[fallbackKey];
-                }
-                else {
-                    return key; // Return the key if not found in fallback
-                }
-            }
-            break;
-        }
-    }
-    return typeof value === 'string' ? value : key;
-};
-const getAvailableLanguages = () => {
-    return [
-        { code: 'en', name: 'English' },
-        { code: 'el', name: 'Ελληνικά' }
-    ];
-};
-const isValidLanguage = (language) => {
-    return language === 'en' || language === 'el';
-};
-
 const useTranslation = (defaultLanguage = 'en') => {
     const [currentLanguage, setCurrentLanguage] = useState(defaultLanguage);
     // Update internal language state when defaultLanguage prop changes
@@ -4938,7 +4947,7 @@ const DocumentVideoGrid = ({ videos, attachedVideosLabel, }) => {
 // Module-level Set to track which message IDs have been animated
 // This persists across component unmounts/remounts (e.g., when chat closes and reopens)
 const animatedMessageIds = new Set();
-const Message = ({ message, showThoughts = false, fontSize = 'text-sm', onDelete, onConfirmation, enableButtons = true, streamLoading, apiBaseUrl, apiKey, agencyId, currentLanguage = 'en', onOpenGallery }) => {
+const Message = ({ message, showThoughts = false, fontSize = 'text-sm', onDelete, onConfirmation, enableButtons = true, apiBaseUrl, apiKey, agencyId, currentLanguage = 'en', onOpenGallery }) => {
     const { t } = useTranslation(currentLanguage);
     const [displayedContent, setDisplayedContent] = useState('');
     const typingIntervalRef = useRef(null);
@@ -5171,9 +5180,13 @@ const Message = ({ message, showThoughts = false, fontSize = 'text-sm', onDelete
         ? displayedContent
         : message.content;
     const extractedUrls = useMemo(() => extractUrlsFromContent(message.content), [message.content]);
-    return (jsxs("div", { className: getMessageClasses(), children: [message.content && !message.loading && (jsx("div", { className: "fusioni-message-text", dangerouslySetInnerHTML: {
+    const hasVisibleWhileLoading = Boolean(message.extra_data) ||
+        (showThoughts && Boolean(message.thoughts)) ||
+        Boolean(message.has_error);
+    const collapseEmptyLoadingBubble = Boolean(message.loading) && !hasVisibleWhileLoading;
+    return (jsxs("div", { className: `${getMessageClasses()}${collapseEmptyLoadingBubble ? ' fusioni-message-bubble--loading-empty' : ''}`.trim(), children: [message.content && !message.loading && (jsx("div", { className: "fusioni-message-text", dangerouslySetInnerHTML: {
                     __html: enhanceMessageContent(contentToDisplay)
-                } })), message.loading && streamLoading, !message.loading && extractedUrls.length > 0 && message.role !== 'user' && (jsx("div", { className: "fusioni-message-url-previews", children: extractedUrls.map((url) => (jsx(UrlPreview, { url: url, agencyId: agencyId, showCloseButton: false, compact: true, autoFetch: true, apiBaseUrl: apiBaseUrl, apiKey: apiKey }, url))) })), message.extra_data && (jsxs("div", { className: "fusioni-message-extra m2", children: [message.extra_data.document_images &&
+                } })), !message.loading && extractedUrls.length > 0 && message.role !== 'user' && (jsx("div", { className: "fusioni-message-url-previews", children: extractedUrls.map((url) => (jsx(UrlPreview, { url: url, agencyId: agencyId, showCloseButton: false, compact: true, autoFetch: true, apiBaseUrl: apiBaseUrl, apiKey: apiKey }, url))) })), message.extra_data && (jsxs("div", { className: "fusioni-message-extra m2", children: [message.extra_data.document_images &&
                         message.extra_data.document_images.length > 0 &&
                         onOpenGallery && (jsx(DocumentImageGrid, { images: message.extra_data.document_images, onOpenGallery: onOpenGallery, attachedImagesLabel: t('chat.attachedImages') })), message.extra_data.document_videos &&
                         message.extra_data.document_videos.length > 0 && (jsx(DocumentVideoGrid, { videos: message.extra_data.document_videos, attachedVideosLabel: t('chat.attachedVideos') })), message.extra_data.image && renderImage(message.extra_data.image), message.extra_data.image_ref && renderImage(message.extra_data.image_ref), message.extra_data.audio_ref && renderAudio(message.extra_data.audio_ref, message.extra_data.duration), message.extra_data.coordinates && renderMap(message.extra_data.coordinates), message.extra_data.map && (jsx("div", { className: "fusioni-message-map", children: jsx(Map$1, { lat: message.extra_data.map.lat, lng: message.extra_data.map.lng, zoom: message.extra_data.map.zoom, staticMap: true, width: 600, height: 400, apiBaseUrl: apiBaseUrl, apiKey: apiKey, agencyId: agencyId }) }))] })), message.extra_data?.widget === 'Confirmation' && (jsxs("div", { className: "fusioni-confirmation-widget", children: [jsx("button", { type: "button", disabled: !enableButtons, onClick: () => sendConfirmation('Confirmed', message.extra_data?.key), className: "fusioni-btn fusioni-btn-primary fusioni-btn-confirm", children: t('common.yes') }), jsx("button", { type: "button", disabled: !enableButtons, onClick: () => sendConfirmation('NotConfirmed', message.extra_data?.key), className: "fusioni-btn fusioni-btn-secondary fusioni-btn-cancel", children: t('common.no') })] })), showThoughts && message.thoughts && (jsx("div", { className: "fusioni-message-thoughts", children: jsxs("details", { children: [jsx("summary", { children: "AI Thoughts" }), jsx("p", { children: message.thoughts })] }) })), message.has_error && (jsxs("div", { className: "fusioni-message-error-indicator", children: [jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2" }), jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2" })] }), jsx("span", { children: "Error occurred" })] }))] }));
@@ -5426,12 +5439,12 @@ const MessageList = ({ messages, streamMessages, showThoughts = false, onDeleteM
                                 const isLastMessage = index === messages.length - 1;
                                 const messageKey = message.id ??
                                     `msg-fallback-${index}-${message.role}-${message.created instanceof Date ? message.created.getTime() : 0}`;
-                                return (jsx("div", { className: "fusioni-message-wrapper", children: jsxs("div", { className: `fusioni-message ${message.role}`, children: [jsx("div", { className: "fusioni-message-avatar", children: message.role === 'user' ? (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [jsx("path", { d: "M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("circle", { cx: "12", cy: "7", r: "4", stroke: "currentColor", strokeWidth: "2" })] })) : (jsx("img", { src: FUSIONI_LOGO_BASE64, alt: "Fusioni Logo", width: "24", height: "24" })) }), jsxs("div", { className: "fusioni-message-content", children: [jsx("div", { className: "fusioni-message-body", children: message.role === 'user' && editingMessageId === message.id ? (jsx("div", { ref: editRef, className: "fusioni-message-text", contentEditable: true, suppressContentEditableWarning: true, spellCheck: true, onKeyDown: (event) => {
+                                return (jsx("div", { className: "fusioni-message-wrapper", children: jsxs("div", { className: `fusioni-message ${message.role}`, children: [!(message.role === 'assistant' && message.loading) && (jsx("div", { className: "fusioni-message-avatar", children: message.role === 'user' ? (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [jsx("path", { d: "M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("circle", { cx: "12", cy: "7", r: "4", stroke: "currentColor", strokeWidth: "2" })] })) : (jsx("img", { src: FUSIONI_LOGO_BASE64, alt: "Fusioni Logo", width: "24", height: "24" })) })), jsxs("div", { className: "fusioni-message-content", children: [jsx("div", { className: "fusioni-message-body", children: message.role === 'user' && editingMessageId === message.id ? (jsx("div", { ref: editRef, className: "fusioni-message-text", contentEditable: true, suppressContentEditableWarning: true, spellCheck: true, onKeyDown: (event) => {
                                                                 if (event.key === 'Escape') {
                                                                     event.preventDefault();
                                                                     cancelEdit();
                                                                 }
-                                                            } })) : (jsx(Message, { message: message, showThoughts: showThoughts, onDelete: onDeleteMessage, onConfirmation: onConfirmation, enableButtons: enableButtons && isLastMessage, streamLoading: message.loading ? (jsx(MessageStreamLoading, { streamMessages: streamMessages, loadingLabel: t('chat.messages.loading') })) : undefined, apiBaseUrl: apiBaseUrl, apiKey: apiKey, agencyId: agencyId, currentLanguage: currentLanguage, onOpenGallery: openGallery })) }), jsxs("div", { className: "fusioni-message-footer", children: [jsx("span", { className: "fusioni-message-time", children: formatDate(message.created) }), message.id && (onDeleteMessage || (message.role === 'user' && onEditMessage)) && (jsx("div", { className: "fusioni-message-actions", children: message.role === 'user' && editingMessageId === message.id ? (jsxs(Fragment, { children: [jsx("button", { onClick: confirmEdit, className: "fusioni-btn fusioni-btn-icon", title: "Save edit", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: jsx("polyline", { points: "20 6 9 17 4 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), jsx("button", { onClick: cancelEdit, className: "fusioni-btn fusioni-btn-icon", title: "Cancel edit", children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) })] })) : (jsxs(Fragment, { children: [message.role === 'user' && onEditMessage && (jsx("button", { onClick: () => startEdit(message), className: "fusioni-btn fusioni-btn-icon", title: "Edit message", children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsx("path", { d: "M12 20H21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M16.5 3.5C16.8978 3.10218 17.4374 2.87868 18 2.87868C18.5626 2.87868 19.1022 3.10218 19.5 3.5C19.8978 3.89782 20.1213 4.43739 20.1213 5C20.1213 5.56261 19.8978 6.10218 19.5 6.5L7 19L3 20L4 16L16.5 3.5Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) })), onDeleteMessage && (jsx("button", { onClick: () => onDeleteMessage(message.id), className: "fusioni-btn fusioni-btn-icon", title: "Delete message", children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsx("path", { d: "M3 6H5H21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }))] })) }))] }), showThoughts && message.thoughts && (jsx("div", { className: "fusioni-message-thoughts", children: jsxs("details", { children: [jsx("summary", { children: "Thoughts" }), jsx("p", { children: message.thoughts })] }) }))] })] }) }, messageKey));
+                                                            } })) : (jsxs(Fragment, { children: [message.loading && (jsx(MessageStreamLoading, { streamMessages: streamMessages, loadingLabel: t('chat.messages.loading') })), !message.loading && (jsx(Message, { message: message, showThoughts: showThoughts, onDelete: onDeleteMessage, onConfirmation: onConfirmation, enableButtons: enableButtons && isLastMessage, apiBaseUrl: apiBaseUrl, apiKey: apiKey, agencyId: agencyId, currentLanguage: currentLanguage, onOpenGallery: openGallery }))] })) }), !message.loading && (jsxs("div", { className: "fusioni-message-footer", children: [jsx("span", { className: "fusioni-message-time", children: formatDate(message.created) }), message.id && (onDeleteMessage || (message.role === 'user' && onEditMessage)) && (jsx("div", { className: "fusioni-message-actions", children: message.role === 'user' && editingMessageId === message.id ? (jsxs(Fragment, { children: [jsx("button", { onClick: confirmEdit, className: "fusioni-btn fusioni-btn-icon", title: "Save edit", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: jsx("polyline", { points: "20 6 9 17 4 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), jsx("button", { onClick: cancelEdit, className: "fusioni-btn fusioni-btn-icon", title: "Cancel edit", children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) })] })) : (jsxs(Fragment, { children: [message.role === 'user' && onEditMessage && (jsx("button", { onClick: () => startEdit(message), className: "fusioni-btn fusioni-btn-icon", title: "Edit message", children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsx("path", { d: "M12 20H21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M16.5 3.5C16.8978 3.10218 17.4374 2.87868 18 2.87868C18.5626 2.87868 19.1022 3.10218 19.5 3.5C19.8978 3.89782 20.1213 4.43739 20.1213 5C20.1213 5.56261 19.8978 6.10218 19.5 6.5L7 19L3 20L4 16L16.5 3.5Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) })), onDeleteMessage && (jsx("button", { onClick: () => onDeleteMessage(message.id), className: "fusioni-btn fusioni-btn-icon", title: "Delete message", children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsx("path", { d: "M3 6H5H21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }))] })) }))] })), showThoughts && message.thoughts && (jsx("div", { className: "fusioni-message-thoughts", children: jsxs("details", { children: [jsx("summary", { children: "Thoughts" }), jsx("p", { children: message.thoughts })] }) }))] })] }) }, messageKey));
                             }) })), jsx("div", { ref: messagesEndRef })] }) }), gallerySession &&
                 typeof document !== 'undefined' &&
                 createPortal(jsx(ImageGallery, { images: gallerySession.images, initialIndex: gallerySession.index, theme: theme, onClose: () => setGallerySession(null) }, gallerySession.key), document.body)] }));
@@ -5949,56 +5962,90 @@ const useSSE = (agencyId, onMessage, isConnected = true, accessToken) => {
 };
 
 const THEME_STORAGE_KEY = 'fusioni-chat-theme';
+function resolveDisplayTheme(setting) {
+    if (setting === 'auto') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    if (setting === 'dark' || setting === 'light') {
+        return setting;
+    }
+    return 'light';
+}
 const useTheme = (initialTheme) => {
     const [currentTheme, setCurrentTheme] = useState('light');
     const [isManualOverride, setIsManualOverride] = useState(false);
-    // Load theme from localStorage on initialization
+    const [programmaticTheme, setProgrammaticTheme] = useState(null);
+    const persistThemeSetting = useCallback((setting) => {
+        try {
+            if (setting === 'auto') {
+                localStorage.removeItem(THEME_STORAGE_KEY);
+            }
+            else {
+                localStorage.setItem(THEME_STORAGE_KEY, setting);
+            }
+        }
+        catch (error) {
+            console.warn('Failed to persist theme to localStorage:', error);
+        }
+    }, []);
+    const setTheme = useCallback((theme) => {
+        setProgrammaticTheme(theme);
+        setCurrentTheme(resolveDisplayTheme(theme));
+        setIsManualOverride(true);
+        persistThemeSetting(theme);
+    }, [persistThemeSetting]);
+    // Load theme from localStorage on initialization (unless SDK / caller already set a theme)
     useEffect(() => {
+        if (programmaticTheme != null) {
+            return;
+        }
         try {
             const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
             if (savedTheme === 'light' || savedTheme === 'dark') {
                 setCurrentTheme(savedTheme);
                 setIsManualOverride(true);
-                return;
             }
         }
         catch (error) {
             console.warn('Failed to load theme from localStorage:', error);
         }
+    }, [programmaticTheme]);
+    const toggleTheme = useCallback(() => {
+        setCurrentTheme((prev) => {
+            const next = prev === 'light' ? 'dark' : 'light';
+            setProgrammaticTheme(next);
+            setIsManualOverride(true);
+            try {
+                localStorage.setItem(THEME_STORAGE_KEY, next);
+            }
+            catch (error) {
+                console.warn('Failed to save theme to localStorage:', error);
+            }
+            return next;
+        });
     }, []);
-    const toggleTheme = () => {
-        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-        setCurrentTheme(newTheme);
-        setIsManualOverride(true);
-        // Save to localStorage
-        try {
-            localStorage.setItem(THEME_STORAGE_KEY, newTheme);
-        }
-        catch (error) {
-            console.warn('Failed to save theme to localStorage:', error);
-        }
-    };
     useEffect(() => {
-        // Check if we have a saved theme first
+        if (programmaticTheme != null) {
+            if (programmaticTheme === 'auto') {
+                const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+                const handleChange = () => {
+                    setCurrentTheme(resolveDisplayTheme('auto'));
+                };
+                handleChange();
+                mediaQuery.addEventListener('change', handleChange);
+                return () => mediaQuery.removeEventListener('change', handleChange);
+            }
+            return;
+        }
         const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
         if (savedTheme === 'light' || savedTheme === 'dark') {
-            return; // Don't override saved theme
+            return;
+        }
+        if (isManualOverride) {
+            return;
         }
-        if (isManualOverride)
-            return; // Don't auto-update if user manually changed theme
         const updateTheme = () => {
-            if (initialTheme === 'auto') {
-                // Check system preference
-                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                setCurrentTheme(prefersDark ? 'dark' : 'light');
-            }
-            else if (initialTheme === 'dark' || initialTheme === 'light') {
-                setCurrentTheme(initialTheme);
-            }
-            else {
-                // Default to light theme
-                setCurrentTheme('light');
-            }
+            setCurrentTheme(resolveDisplayTheme(initialTheme));
         };
         updateTheme();
         if (initialTheme === 'auto') {
@@ -6007,11 +6054,12 @@ const useTheme = (initialTheme) => {
             mediaQuery.addEventListener('change', handleChange);
             return () => mediaQuery.removeEventListener('change', handleChange);
         }
-    }, [initialTheme, isManualOverride]);
+    }, [initialTheme, isManualOverride, programmaticTheme]);
     return {
         theme: currentTheme,
         toggleTheme,
-        isManualOverride
+        setTheme,
+        isManualOverride,
     };
 };
 
@@ -6033,7 +6081,8 @@ function useIsMobileLayout() {
     return isMobile;
 }
 
-const ChatWidget = ({ config, onMessageSent, onMessageReceived, onConversationCreated, onConversationDeleted, onError }) => {
+const ChatWidget = forwardRef(function ChatWidget({ config, onMessageSent, onMessageReceived, onConversationCreated, onConversationDeleted, onError }, ref) {
+    const [languageOverride, setLanguageOverride] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
@@ -6048,11 +6097,26 @@ const ChatWidget = ({ config, onMessageSent, onMessageReceived, onConversationCr
     const [isDeleteMessageDialogOpen, setIsDeleteMessageDialogOpen] = useState(false);
     // Refs
     const floatingButtonRef = useRef(null);
+    const translationDefault = languageOverride ?? mergedConfig?.language ?? config.language ?? 'en';
     // Translation and language management - use merged config or fallback to user config
-    const { t, currentLanguage, changeLanguage } = useTranslation(mergedConfig?.language || config.language || 'en');
+    const { t, currentLanguage, changeLanguage } = useTranslation(translationDefault);
     const { conversations, currentConversation, messages, streamMessages, setCurrentConversation, setStreamMessages, addMessage, updateMessage, removeMessage, removeOptimisticUserMessages, truncateMessagesAt, addConversation, updateConversation, removeConversation, loadConversations, loadMessages, clearMessages } = useChatState(mergedConfig?.agencyId || config.agencyId);
-    const { theme, toggleTheme } = useTheme(mergedConfig?.theme || config.theme);
+    const { theme, toggleTheme, setTheme } = useTheme(mergedConfig?.theme || config.theme);
     const isMobileLayout = useIsMobileLayout();
+    const handleLanguageChange = useCallback((language) => {
+        setLanguageOverride(language);
+        changeLanguage(language);
+    }, [changeLanguage]);
+    useImperativeHandle(ref, () => ({
+        setLanguage: (language) => {
+            if (!isValidLanguage(language)) {
+                return;
+            }
+            setLanguageOverride(language);
+            changeLanguage(language);
+        },
+        setTheme,
+    }), [changeLanguage, setTheme]);
     // Initialize API client and fetch server configuration
     useEffect(() => {
         const initializeAndFetchConfig = async () => {
@@ -6540,8 +6604,9 @@ const ChatWidget = ({ config, onMessageSent, onMessageReceived, onConversationCr
     // Debug: Log the primary color and button variant being applied
     console.log('Primary color being applied:', mergedConfig.primaryColor || '#6366f1');
     console.log('Button variant being applied:', mergedConfig.buttonVariant || 'glass');
-    return (jsxs("div", { className: `fusioni-chat-widget ${theme}`, style: { '--primary-color': mergedConfig.primaryColor || '#6366f1' }, children: [jsx(FloatingButton, { isOpen: isOpen, onClick: handleToggleChat, position: mergedConfig.position || 'bottom-right', primaryColor: mergedConfig.primaryColor, buttonRef: floatingButtonRef, variant: mergedConfig.buttonVariant || 'glass', shouldDisplay: !hasConfigError && (!isMobileLayout || !isOpen) }), isOpen && (jsx(ChatPanel, { isOpen: isOpen, onClose: () => setIsOpen(false), position: mergedConfig.position || 'bottom-right', isFullscreen: isFullscreen, floatingButtonRef: floatingButtonRef, children: jsxs("div", { className: "fusioni-chat-container", children: [mergedConfig.showConversationList !== false && (jsxs(Fragment, { children: [jsx("div", { className: `fusioni-conversation-backdrop ${isConversationListOpen ? 'open' : ''}`, onClick: () => setIsConversationListOpen(false) }), jsx(ConversationList, { conversations: conversations, selectedConversationId: currentConversation?.id || undefined, onSelectConversation: handleSelectConversation, onDeleteConversation: handleDeleteConversation, onCreateConversation: handleCreateConversation, isOpen: isConversationListOpen, currentLanguage: currentLanguage })] })), jsxs("div", { className: "fusioni-chat-main", children: [jsxs("div", { className: "fusioni-chat-main-header", children: [mergedConfig.showConversationList !== false ? (jsxs("button", { type: "button", onClick: handleToggleConversationList, className: `fusioni-conversation-toggle ${isConversationListOpen ? 'open' : ''}`, children: [jsx("svg", { className: "fusioni-conversation-toggle-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M3 12h18M3 6h18M3 18h18" }) }), t('chat.conversations.title')] })) : (jsx("span", { className: "fusioni-chat-main-header-title", children: t('chat.title') })), jsxs("div", { className: "fusioni-header-actions", children: [isMobileLayout && (jsx("button", { type: "button", onClick: () => setIsOpen(false), className: "fusioni-btn fusioni-btn-icon fusioni-chat-toolbar-close-mobile", title: t('common.close'), "aria-label": t('common.close'), children: jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: jsx("path", { d: "M18 6L6 18M6 6L18 18", strokeLinecap: "round", strokeLinejoin: "round" }) }) })), jsx("button", { type: "button", onClick: toggleTheme, className: "fusioni-btn fusioni-btn-icon", title: theme === 'dark' ? t('chat.theme.light') : t('chat.theme.dark'), children: theme === 'dark' ? (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("circle", { cx: "12", cy: "12", r: "5" }), jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })] })) : (jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) })) }), jsx("button", { type: "button", onClick: handleToggleFullscreen, className: "fusioni-btn fusioni-btn-icon", title: isFullscreen ? t('chat.fullscreen.exit') : t('chat.fullscreen.enter'), children: isFullscreen ? (jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M8 3V5M8 3H5M8 3L3 8M16 3V5M16 3H19M16 3L21 8M8 21V19M8 21H5M8 21L3 16M16 21V19M16 21H19M16 21L21 16" }) })) : (jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M8 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V8M21 8V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H16M16 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V16M3 16V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H8" }) })) }), jsx(LanguageSwitcher, { currentLanguage: currentLanguage, onLanguageChange: changeLanguage })] })] }), currentConversation ? (jsxs(Fragment, { children: [jsx(MessageList, { messages: messages, streamMessages: streamMessages, showThoughts: false, onDeleteMessage: handleDeleteMessage, onEditMessage: handleEditMessage, onConfirmation: handleConfirmation, enableButtons: !isLoading, apiBaseUrl: mergedConfig.apiBaseUrl, apiKey: mergedConfig.accessToken, agencyId: mergedConfig.agencyId, currentLanguage: currentLanguage, theme: theme }), jsx(ChatInput, { onSendMessage: handleSendMessage, onFileUpload: handleFileUpload, disabled: isLoading, placeholder: t('chat.input.placeholder'), enableAudioRecording: mergedConfig.enableAudioRecording !== false, enableFileUpload: mergedConfig.enableFileUpload !== false, maxFileSize: mergedConfig.maxFileSize || 10, allowedFileTypes: mergedConfig.allowedFileTypes || ['image/*'], currentLanguage: currentLanguage })] })) : (jsx("div", { className: "fusioni-chat-welcome", children: jsxs("div", { className: "fusioni-chat-welcome-content", children: [jsx("h3", { children: t('chat.welcome.title') }), jsx("p", { children: t('chat.welcome.description') }), jsx("button", { onClick: handleCreateConversation, disabled: isLoading, className: "fusioni-btn fusioni-btn-primary", children: isLoading ? t('chat.welcome.creating') : t('chat.welcome.startButton') })] }) }))] })] }) })), jsx(ConfirmationDialog, { isOpen: isDeleteDialogOpen, title: t('chat.conversations.deleteConfirm.title'), message: t('chat.conversations.deleteConfirm.message'), confirmText: t('chat.conversations.deleteConfirm.confirm'), cancelText: t('chat.conversations.deleteConfirm.cancel'), onConfirm: confirmDeleteConversation, onCancel: cancelDeleteConversation, currentLanguage: currentLanguage, variant: "danger" }), jsx(ConfirmationDialog, { isOpen: isDeleteMessageDialogOpen, title: t('chat.messages.deleteConfirm.title'), message: t('chat.messages.deleteConfirm.message'), confirmText: t('chat.messages.deleteConfirm.confirm'), cancelText: t('chat.messages.deleteConfirm.cancel'), onConfirm: confirmDeleteMessage, onCancel: cancelDeleteMessage, currentLanguage: currentLanguage, variant: "danger" })] }));
-};
+    return (jsxs("div", { className: `fusioni-chat-widget ${theme}`, style: { '--primary-color': mergedConfig.primaryColor || '#6366f1' }, children: [jsx(FloatingButton, { isOpen: isOpen, onClick: handleToggleChat, position: mergedConfig.position || 'bottom-right', primaryColor: mergedConfig.primaryColor, buttonRef: floatingButtonRef, variant: mergedConfig.buttonVariant || 'glass', shouldDisplay: !hasConfigError && (!isMobileLayout || !isOpen) }), isOpen && (jsx(ChatPanel, { isOpen: isOpen, onClose: () => setIsOpen(false), position: mergedConfig.position || 'bottom-right', isFullscreen: isFullscreen, floatingButtonRef: floatingButtonRef, children: jsxs("div", { className: "fusioni-chat-container", children: [mergedConfig.showConversationList !== false && (jsxs(Fragment, { children: [jsx("div", { className: `fusioni-conversation-backdrop ${isConversationListOpen ? 'open' : ''}`, onClick: () => setIsConversationListOpen(false) }), jsx(ConversationList, { conversations: conversations, selectedConversationId: currentConversation?.id || undefined, onSelectConversation: handleSelectConversation, onDeleteConversation: handleDeleteConversation, onCreateConversation: handleCreateConversation, isOpen: isConversationListOpen, currentLanguage: currentLanguage })] })), jsxs("div", { className: "fusioni-chat-main", children: [jsxs("div", { className: "fusioni-chat-main-header", children: [mergedConfig.showConversationList !== false ? (jsxs("button", { type: "button", onClick: handleToggleConversationList, className: `fusioni-conversation-toggle ${isConversationListOpen ? 'open' : ''}`, children: [jsx("svg", { className: "fusioni-conversation-toggle-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M3 12h18M3 6h18M3 18h18" }) }), t('chat.conversations.title')] })) : (jsx("span", { className: "fusioni-chat-main-header-title", children: t('chat.title') })), jsxs("div", { className: "fusioni-header-actions", children: [isMobileLayout && (jsx("button", { type: "button", onClick: () => setIsOpen(false), className: "fusioni-btn fusioni-btn-icon fusioni-chat-toolbar-close-mobile", title: t('common.close'), "aria-label": t('common.close'), children: jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: jsx("path", { d: "M18 6L6 18M6 6L18 18", strokeLinecap: "round", strokeLinejoin: "round" }) }) })), mergedConfig.showThemeToggle !== false && (jsx("button", { type: "button", onClick: toggleTheme, className: "fusioni-btn fusioni-btn-icon", title: theme === 'dark' ? t('chat.theme.light') : t('chat.theme.dark'), children: theme === 'dark' ? (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("circle", { cx: "12", cy: "12", r: "5" }), jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })] })) : (jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) })) })), mergedConfig.showFullscreenToggle !== false && (jsx("button", { type: "button", onClick: handleToggleFullscreen, className: "fusioni-btn fusioni-btn-icon", title: isFullscreen ? t('chat.fullscreen.exit') : t('chat.fullscreen.enter'), children: isFullscreen ? (jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M8 3V5M8 3H5M8 3L3 8M16 3V5M16 3H19M16 3L21 8M8 21V19M8 21H5M8 21L3 16M16 21V19M16 21H19M16 21L21 16" }) })) : (jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M8 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V8M21 8V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H16M16 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V16M3 16V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H8" }) })) })), mergedConfig.showLanguageSwitcher !== false && (jsx(LanguageSwitcher, { currentLanguage: currentLanguage, onLanguageChange: handleLanguageChange }))] })] }), currentConversation ? (jsxs(Fragment, { children: [jsx(MessageList, { messages: messages, streamMessages: streamMessages, showThoughts: false, onDeleteMessage: handleDeleteMessage, onEditMessage: handleEditMessage, onConfirmation: handleConfirmation, enableButtons: !isLoading, apiBaseUrl: mergedConfig.apiBaseUrl, apiKey: mergedConfig.accessToken, agencyId: mergedConfig.agencyId, currentLanguage: currentLanguage, theme: theme }), jsx(ChatInput, { onSendMessage: handleSendMessage, onFileUpload: handleFileUpload, disabled: isLoading, placeholder: t('chat.input.placeholder'), enableAudioRecording: mergedConfig.enableAudioRecording !== false, enableFileUpload: mergedConfig.enableFileUpload !== false, maxFileSize: mergedConfig.maxFileSize || 10, allowedFileTypes: mergedConfig.allowedFileTypes || ['image/*'], currentLanguage: currentLanguage })] })) : (jsx("div", { className: "fusioni-chat-welcome", children: jsxs("div", { className: "fusioni-chat-welcome-content", children: [jsx("h3", { children: t('chat.welcome.title') }), jsx("p", { children: t('chat.welcome.description') }), jsx("button", { onClick: handleCreateConversation, disabled: isLoading, className: "fusioni-btn fusioni-btn-primary", children: isLoading ? t('chat.welcome.creating') : t('chat.welcome.startButton') })] }) }))] })] }) })), jsx(ConfirmationDialog, { isOpen: isDeleteDialogOpen, title: t('chat.conversations.deleteConfirm.title'), message: t('chat.conversations.deleteConfirm.message'), confirmText: t('chat.conversations.deleteConfirm.confirm'), cancelText: t('chat.conversations.deleteConfirm.cancel'), onConfirm: confirmDeleteConversation, onCancel: cancelDeleteConversation, currentLanguage: currentLanguage, variant: "danger" }), jsx(ConfirmationDialog, { isOpen: isDeleteMessageDialogOpen, title: t('chat.messages.deleteConfirm.title'), message: t('chat.messages.deleteConfirm.message'), confirmText: t('chat.messages.deleteConfirm.confirm'), cancelText: t('chat.messages.deleteConfirm.cancel'), onConfirm: confirmDeleteMessage, onCancel: cancelDeleteMessage, currentLanguage: currentLanguage, variant: "danger" })] }));
+});
+ChatWidget.displayName = 'ChatWidget';
 
 const FileUpload = ({ onFileSelect, accept = 'image/*', maxSize = 10, disabled = false, className = '' }) => {
     const fileInputRef = useRef(null);