open-chat-studio-widget 0.4.8 → 0.5.1

package/dist/collection/components/ocs-chat/ocs-chat.js

@@ -1,23 +1,21 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Host, h } from "@stencil/core";
-import { XMarkIcon, GripDotsVerticalIcon, PlusWithCircleIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, PaperClipIcon, CheckDocumentIcon, XIcon } from "./heroicons";
+import { Host, h, Env } from "@stencil/core";
+import { XMarkIcon, GripDotsVerticalIcon, PlusWithCircleIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, PaperClipIcon, CheckDocumentIcon, XIcon, OcsWidgetAvatar } from "./icons";
 import { renderMarkdownSync as renderMarkdownComplete } from "../../utils/markdown";
-import { getCSRFToken } from "../../utils/cookies";
 import { varToPixels } from "../../utils/utils";
+import { TranslationManager, defaultTranslations } from "../../utils/translations";
+import { ChatSessionService } from "../../services/chat-session-service";
+import { FileAttachmentManager } from "../../services/file-attachment-manager";
 export class OcsChat {
     constructor() {
         /**
-         * The base URL for the API (defaults to current origin).
+         * The base URL for the API.
          */
-        this.apiBaseUrl = "https://chatbots.dimagi.com";
+        this.apiBaseUrl = "https://www.openchatstudio.com";
         /**
          * The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
          */
         this.buttonShape = 'square';
-        /**
-         * The message to display in the new chat confirmation dialog.
-         */
-        this.newChatConfirmationMessage = "Starting a new chat will clear your current conversation. Continue?";
         /**
          * Whether the chat widget is visible on load.
          */
@@ -43,10 +41,6 @@ export class OcsChat {
          * Allow the user to attach files to their messages.
          */
         this.allowAttachments = false;
-        /**
-         * The text to display while the assistant is typing/preparing a response.
-         */
-        this.typingIndicatorText = "Preparing response";
         this.error = "";
         this.messages = [];
         this.isLoading = false;
@@ -63,6 +57,20 @@ export class OcsChat {
         this.showNewChatConfirmation = false;
         this.selectedFiles = [];
         this.isUploadingFiles = false;
+        this.buttonPosition = { x: 30, y: 30 };
+        this.buttonHorizontalSide = 'right';
+        this.buttonVerticalSide = 'bottom';
+        this.isButtonDragging = false;
+        this.buttonWasDragged = false;
+        this.translationManager = new TranslationManager();
+        this.attachmentManager = new FileAttachmentManager({
+            supportedExtensions: OcsChat.SUPPORTED_FILE_EXTENSIONS,
+            maxFileSizeMb: OcsChat.MAX_FILE_SIZE_MB,
+            maxTotalSizeMb: OcsChat.MAX_TOTAL_SIZE_MB,
+        });
+        this.buttonDragOffset = { x: 0, y: 0 };
+        this.rafId = null;
+        this.buttonListenersAttached = false;
         this.chatWindowHeight = 600;
         this.chatWindowWidth = 450;
         this.chatWindowFullscreenWidth = 1024;
@@ -111,15 +119,101 @@ export class OcsChat {
             this.endDrag();
         };
         this.handleWindowResize = () => {
+            var _a, _b;
             this.positionInitialized = false;
             this.initializePosition();
+            // Revalidate button position after resize to keep it within viewport bounds
+            if (this.isButtonDraggable()) {
+                const windowWidth = window.innerWidth;
+                const windowHeight = window.innerHeight;
+                const buttonWidth = ((_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 60;
+                const buttonHeight = ((_b = this.buttonRef) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 60;
+                const minPadding = 10;
+                this.buttonPosition = {
+                    x: Math.max(minPadding, Math.min(this.buttonPosition.x, windowWidth - buttonWidth - minPadding)),
+                    y: Math.max(minPadding, Math.min(this.buttonPosition.y, windowHeight - buttonHeight - minPadding))
+                };
+                this.updateHostPosition();
+            }
+        };
+        this.handleButtonMouseDown = (event) => {
+            if (!this.buttonRef || !this.isButtonDraggable())
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const pointer = this.getPointerCoordinates(event);
+            if (!pointer)
+                return;
+            this.isButtonDragging = true;
+            this.buttonWasDragged = false; // Reset the drag flag
+            const rect = this.host.getBoundingClientRect();
+            this.buttonDragOffset = {
+                x: pointer.clientX - rect.left,
+                y: pointer.clientY - rect.top
+            };
+            this.addButtonEventListeners();
+        };
+        this.handleButtonTouchStart = (event) => {
+            if (!this.buttonRef || !this.isButtonDraggable())
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const pointer = this.getPointerCoordinates(event);
+            if (!pointer)
+                return;
+            this.isButtonDragging = true;
+            this.buttonWasDragged = false; // Reset the drag flag
+            const rect = this.host.getBoundingClientRect();
+            this.buttonDragOffset = {
+                x: pointer.clientX - rect.left,
+                y: pointer.clientY - rect.top
+            };
+            this.addButtonEventListeners();
+        };
+        this.handleButtonMouseMove = (event) => {
+            if (!this.isButtonDragging)
+                return;
+            const pointer = this.getPointerCoordinates(event);
+            if (!pointer)
+                return;
+            this.updateButtonPosition(pointer);
+        };
+        this.handleButtonTouchMove = (event) => {
+            if (!this.isButtonDragging)
+                return;
+            event.preventDefault();
+            const pointer = this.getPointerCoordinates(event);
+            if (!pointer)
+                return;
+            this.updateButtonPosition(pointer);
+        };
+        this.handleButtonMouseUp = () => {
+            if (this.isButtonDragging) {
+                this.isButtonDragging = false;
+                this.removeButtonEventListeners();
+            }
+        };
+        this.handleButtonTouchEnd = () => {
+            if (this.isButtonDragging) {
+                this.isButtonDragging = false;
+                this.removeButtonEventListeners();
+            }
+        };
+        this.handleButtonClick = () => {
+            // Only toggle visibility if the button wasn't dragged
+            if (!this.buttonWasDragged) {
+                this.toggleWindowVisibility();
+            }
+            // Reset the flag after handling the click
+            this.buttonWasDragged = false;
         };
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         if (!this.chatbotId) {
             this.error = 'Chatbot ID is required';
             return;
         }
+        await this.initializeTranslations();
         // Always try to load existing session if localStorage is available
         if (this.persistentSession && this.isLocalStorageAvailable()) {
             const { sessionId, messages } = this.loadSessionFromStorage();
@@ -139,6 +233,8 @@ export class OcsChat {
         this.chatWindowHeight = varToPixels(windowHeightVar, window.innerHeight, this.chatWindowHeight);
         this.chatWindowWidth = varToPixels(windowWidthVar, window.innerWidth, this.chatWindowWidth);
         this.chatWindowFullscreenWidth = varToPixels(fullscreenWidthVar, window.innerWidth, this.chatWindowFullscreenWidth);
+        // Initialize button position from computed styles
+        this.initializeButtonPosition();
         if (this.visible) {
             this.initializePosition();
         }
@@ -148,15 +244,29 @@ export class OcsChat {
         }
         else if (this.visible && this.sessionId) {
             // Resume polling for existing session
-            this.startPolling();
+            this.startMessagePolling();
         }
         window.addEventListener('resize', this.handleWindowResize);
     }
     disconnectedCallback() {
         this.cleanup();
         this.removeEventListeners();
+        this.removeButtonEventListeners();
         window.removeEventListener('resize', this.handleWindowResize);
     }
+    getChatService() {
+        if (!this.chatService) {
+            this.chatService = new ChatSessionService({
+                apiBaseUrl: this.apiBaseUrl || 'https://www.openchatstudio.com',
+                embedKey: this.embedKey,
+                widgetVersion: Env.version,
+                taskPollingIntervalMs: OcsChat.TASK_POLLING_INTERVAL_MS,
+                taskPollingMaxAttempts: OcsChat.TASK_POLLING_MAX_ATTEMPTS,
+                messagePollingIntervalMs: OcsChat.MESSAGE_POLLING_INTERVAL_MS,
+            });
+        }
+        return this.chatService;
+    }
     addErrorMessage(errorText) {
         const errorMessage = {
             created_at: new Date().toISOString(),
@@ -200,25 +310,34 @@ export class OcsChat {
     parseStarterQuestions() {
         this.parsedStarterQuestions = this.parseJSONProp(this.starterQuestions, 'starter questions');
     }
-    cleanup() {
-        if (this.pollingIntervalRef) {
-            clearInterval(this.pollingIntervalRef);
-            this.pollingIntervalRef = undefined;
+    async initializeTranslations() {
+        let customTranslationsObj;
+        if (this.translationsUrl) {
+            customTranslationsObj = await this.loadTranslationsFromUrl(this.translationsUrl);
         }
-        this.currentPollTaskId = '';
+        this.translationManager = new TranslationManager(this.language, customTranslationsObj);
     }
-    getApiBaseUrl() {
-        return this.apiBaseUrl || window.location.origin;
+    async loadTranslationsFromUrl(url) {
+        try {
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            const translations = await response.json();
+            return translations;
+        }
+        catch (error) {
+            console.error('Error loading translations from URL:', error);
+            return defaultTranslations;
+        }
     }
-    getApiHeaders() {
-        const headers = {
-            'Content-Type': 'application/json',
-        };
-        const csrfToken = getCSRFToken(this.getApiBaseUrl());
-        if (csrfToken) {
-            headers['X-CSRFToken'] = csrfToken;
+    cleanup() {
+        this.stopMessagePolling();
+        if (this.taskPollingHandle) {
+            this.taskPollingHandle.cancel();
+            this.taskPollingHandle = undefined;
         }
-        return headers;
+        this.currentPollTaskId = '';
     }
     async startSession() {
         try {
@@ -235,94 +354,38 @@ export class OcsChat {
             if (this.userName) {
                 requestBody.participant_name = this.userName;
             }
-            const response = await fetch(`${this.getApiBaseUrl()}/api/chat/start/`, {
-                method: 'POST',
-                headers: this.getApiHeaders(),
-                body: JSON.stringify(requestBody)
-            });
-            if (!response.ok) {
-                this.handleError(`Failed to start session: ${response.statusText}`);
-                return;
-            }
-            const data = await response.json();
+            const data = await this.getChatService().startSession(requestBody);
             this.sessionId = data.session_id;
             this.saveSessionToStorage();
             // Handle seed message if present
             if (data.seed_message_task_id) {
-                this.isTyping = true; // Show typing indicator for seed message
-                this.currentPollTaskId = data.seed_message_task_id;
-                await this.pollTaskResponse();
+                this.startTaskPolling(data.seed_message_task_id);
+            }
+            else {
+                this.startMessagePolling();
             }
-            // Start polling for messages
-            this.startPolling();
         }
-        catch (error) {
+        catch (_error) {
             this.handleError('Failed to start chat session');
         }
         finally {
             this.isLoading = false;
         }
     }
-    markPendingFilesWithError(errorMessage) {
-        this.selectedFiles = this.selectedFiles.map(sf => {
-            if (!sf.error && !sf.uploaded) {
-                return Object.assign(Object.assign({}, sf), { error: errorMessage });
-            }
-            return sf;
-        });
-    }
     async uploadFiles() {
         if (this.selectedFiles.length === 0 || !this.sessionId || !this.allowAttachments) {
             return [];
         }
         this.isUploadingFiles = true;
-        const uploadedIds = [];
         try {
-            const formData = new FormData();
-            // Add all files to form data
-            for (const selectedFile of this.selectedFiles) {
-                if (!selectedFile.error && !selectedFile.uploaded) {
-                    formData.append('files', selectedFile.file);
-                }
-                else if (selectedFile.uploaded) {
-                    uploadedIds.push(selectedFile.uploaded.id);
-                }
-            }
-            // Add user ID and name to the form data
-            const userId = this.getOrGenerateUserId();
-            formData.append('participant_remote_id', userId);
-            if (this.userName) {
-                formData.append('participant_name', this.userName);
-            }
-            // Only upload if there are new files
-            if (formData.has('files')) {
-                const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/upload/`, {
-                    method: 'POST',
-                    body: formData,
-                });
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    const errorMessage = errorData.error || 'Failed to upload files';
-                    this.markPendingFilesWithError(errorMessage);
-                    return uploadedIds;
-                }
-                const data = await response.json();
-                // Update selected files with upload results
-                let fileIndex = 0;
-                this.selectedFiles = this.selectedFiles.map(sf => {
-                    if (!sf.error && !sf.uploaded) {
-                        return Object.assign(Object.assign({}, sf), { uploaded: data.files[fileIndex++] });
-                    }
-                    return sf;
-                });
-                uploadedIds.push(...data.files.map((f) => f.id));
-            }
-            return uploadedIds;
-        }
-        catch (error) {
-            const errorMessage = error instanceof Error ? error.message : 'Failed to upload files';
-            this.markPendingFilesWithError(errorMessage);
-            return uploadedIds;
+            const uploadResult = await this.attachmentManager.uploadPendingFiles(this.selectedFiles, {
+                apiBaseUrl: this.apiBaseUrl || 'https://www.openchatstudio.com',
+                sessionId: this.sessionId,
+                participantId: this.getOrGenerateUserId(),
+                participantName: this.userName,
+            });
+            this.selectedFiles = uploadResult.selectedFiles;
+            return uploadResult.uploadedIds;
         }
         finally {
             this.isUploadingFiles = false;
@@ -375,27 +438,15 @@ export class OcsChat {
                 this.selectedFiles = []; // Clear selected files after sending
             }
             this.scrollToBottom();
-            // Start typing indicator - it will stay on during task polling
-            this.isTyping = true;
             const requestBody = { message: message.trim() };
             if (this.allowAttachments && attachmentIds.length > 0) {
                 requestBody.attachment_ids = attachmentIds;
             }
-            const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/message/`, {
-                method: 'POST',
-                headers: this.getApiHeaders(),
-                body: JSON.stringify(requestBody)
-            });
-            if (!response.ok) {
-                throw new Error(`Failed to send message: ${response.statusText}`);
-            }
-            const data = await response.json();
+            const data = await this.getChatService().sendMessage(this.sessionId, requestBody);
             if (data.status === 'error') {
                 throw new Error(data.error || 'Failed to send message');
             }
-            // Poll for the response - typing indicator will be managed in pollTaskResponse
-            this.currentPollTaskId = data.task_id;
-            await this.pollTaskResponse();
+            this.startTaskPolling(data.task_id);
         }
         catch (error) {
             const errorText = error instanceof Error ? error.message : 'Failed to send message';
@@ -405,110 +456,6 @@ export class OcsChat {
     handleStarterQuestionClick(question) {
         this.sendMessage(question);
     }
-    async pollTaskResponse() {
-        if (!this.sessionId || !this.currentPollTaskId)
-            return;
-        // Stop message polling while task polling is active
-        this.pauseMessagePolling();
-        let attempts = 0;
-        const poll = async () => {
-            if (!this.sessionId || !this.currentPollTaskId)
-                return;
-            try {
-                const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/${this.currentPollTaskId}/poll/`);
-                if (!response.ok) {
-                    throw new Error(`Failed to poll task: ${response.statusText}`);
-                }
-                const data = await response.json();
-                if (data.error) {
-                    throw new Error(data.error);
-                }
-                if (data.status === 'complete' && data.message) {
-                    this.messages = [...this.messages, data.message];
-                    this.saveSessionToStorage();
-                    this.scrollToBottom();
-                    // Task polling complete, clear typing indicator and resume message polling
-                    this.isTyping = false;
-                    this.currentPollTaskId = '';
-                    this.resumeMessagePolling();
-                    this.focusInput();
-                    return;
-                }
-                if (data.status === 'processing' && attempts < OcsChat.TASK_POLLING_MAX_ATTEMPTS) {
-                    attempts++;
-                    setTimeout(poll, OcsChat.TASK_POLLING_INTERVAL_MS);
-                }
-                else if (attempts >= OcsChat.TASK_POLLING_MAX_ATTEMPTS) {
-                    // Task polling timed out - add timeout message and resume polling
-                    const timeoutMessage = {
-                        created_at: new Date().toISOString(),
-                        role: 'system',
-                        content: 'The response is taking longer than expected. The system may be experiencing delays. Please try sending your message again.',
-                        attachments: []
-                    };
-                    this.messages = [...this.messages, timeoutMessage];
-                    this.saveSessionToStorage();
-                    this.scrollToBottom();
-                    // Clear typing indicator and resume message polling
-                    this.isTyping = false;
-                    this.currentPollTaskId = '';
-                    this.resumeMessagePolling();
-                    this.focusInput();
-                }
-            }
-            catch (error) {
-                const errorText = error instanceof Error ? error.message : 'Failed to get response';
-                this.handleError(errorText);
-                // Clear states and resume polling
-                this.currentPollTaskId = '';
-                this.resumeMessagePolling();
-            }
-        };
-        await poll();
-    }
-    startPolling() {
-        if (this.pollingIntervalRef)
-            return;
-        this.pollingIntervalRef = setInterval(async () => {
-            // Only poll for messages if not currently polling for a task
-            if (!this.currentPollTaskId) {
-                await this.pollForMessages();
-            }
-        }, OcsChat.MESSAGE_POLLING_INTERVAL_MS);
-    }
-    pauseMessagePolling() {
-        if (this.pollingIntervalRef) {
-            clearInterval(this.pollingIntervalRef);
-            this.pollingIntervalRef = undefined;
-        }
-    }
-    resumeMessagePolling() {
-        // Resume message polling after task polling is complete
-        this.startPolling();
-    }
-    async pollForMessages() {
-        if (!this.sessionId)
-            return;
-        try {
-            const url = new URL(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/poll/`);
-            if (this.messages && this.messages.length > 0) {
-                url.searchParams.set('since', this.messages.at(-1).created_at);
-            }
-            const response = await fetch(url.toString());
-            if (!response.ok)
-                return; // Silently fail for polling
-            const data = await response.json();
-            if (data.messages.length > 0) {
-                this.messages = [...this.messages, ...data.messages];
-                this.saveSessionToStorage();
-                this.scrollToBottom();
-                this.focusInput();
-            }
-        }
-        catch (_a) {
-            // Silently fail for polling
-        }
-    }
     /**
      * Scroll the message container to the bottom.
      * @param forceEnd When `false`, scroll the top of the last message into view.
@@ -553,50 +500,18 @@ export class OcsChat {
         this.messageInput = event.target.value;
     }
     handleFileSelect(event) {
-        var _a;
         if (!this.allowAttachments)
             return;
         const input = event.target;
         if (!input.files || input.files.length === 0)
             return;
-        const newFiles = [];
-        let totalSize = this.selectedFiles.reduce((sum, f) => sum + f.file.size, 0);
-        for (let i = 0; i < input.files.length; i++) {
-            const file = input.files[i];
-            const ext = '.' + ((_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
-            if (!OcsChat.SUPPORTED_FILE_EXTENSIONS.includes(ext)) {
-                newFiles.push({
-                    file,
-                    error: `File type ${ext} not supported`
-                });
-                continue;
-            }
-            const fileSizeMB = file.size / (1024 * 1024);
-            if (fileSizeMB > OcsChat.MAX_FILE_SIZE_MB) {
-                newFiles.push({
-                    file,
-                    error: `File exceeds ${OcsChat.MAX_FILE_SIZE_MB}MB limit`
-                });
-                continue;
-            }
-            totalSize += file.size;
-            const totalSizeMB = totalSize / (1024 * 1024);
-            if (totalSizeMB > OcsChat.MAX_TOTAL_SIZE_MB) {
-                newFiles.push({
-                    file,
-                    error: `Total size exceeds ${OcsChat.MAX_TOTAL_SIZE_MB}MB limit`
-                });
-                continue;
-            }
-            newFiles.push({ file });
-        }
-        this.selectedFiles = [...this.selectedFiles, ...newFiles];
+        this.selectedFiles = this.attachmentManager.addFiles(this.selectedFiles, input.files);
         input.value = '';
     }
     removeSelectedFile(index) {
         if (!this.allowAttachments)
             return;
-        this.selectedFiles = this.selectedFiles.filter((_, i) => i !== index);
+        this.selectedFiles = this.attachmentManager.removeFile(this.selectedFiles, index);
     }
     formatFileSize(bytes) {
         if (bytes === 0)
@@ -623,6 +538,11 @@ export class OcsChat {
      * @param visible - The new value for the field.
      */
     async visibilityHandler(visible) {
+        if (this.isButtonDragging) {
+            this.isButtonDragging = false;
+            this.buttonWasDragged = false;
+            this.removeButtonEventListeners();
+        }
         if (visible) {
             this.initializePosition();
         }
@@ -630,11 +550,86 @@ export class OcsChat {
             await this.startSession();
         }
         else if (!visible) {
-            this.pauseMessagePolling();
+            this.stopMessagePolling();
         }
         else {
             this.scrollToBottom(true);
-            this.resumeMessagePolling();
+            this.startMessagePolling();
+        }
+    }
+    startTaskPolling(taskId) {
+        if (!this.sessionId)
+            return;
+        this.currentPollTaskId = taskId;
+        this.isTyping = true;
+        this.stopMessagePolling();
+        if (this.taskPollingHandle) {
+            this.taskPollingHandle.cancel();
+        }
+        this.taskPollingHandle = this.getChatService().pollTask(this.sessionId, taskId, {
+            onMessage: (message) => {
+                this.messages = [...this.messages, message];
+                this.saveSessionToStorage();
+                this.scrollToBottom();
+                this.isTyping = false;
+                this.currentPollTaskId = '';
+                this.taskPollingHandle = undefined;
+                this.startMessagePolling();
+                this.focusInput();
+            },
+            onTimeout: () => {
+                const timeoutMessage = {
+                    created_at: new Date().toISOString(),
+                    role: 'system',
+                    content: 'The response is taking longer than expected. The system may be experiencing delays. Please try sending your message again.',
+                    attachments: []
+                };
+                this.messages = [...this.messages, timeoutMessage];
+                this.saveSessionToStorage();
+                this.scrollToBottom();
+                this.isTyping = false;
+                this.currentPollTaskId = '';
+                this.taskPollingHandle = undefined;
+                this.startMessagePolling();
+                this.focusInput();
+            },
+            onError: (error) => {
+                this.handleError(error.message);
+                this.taskPollingHandle = undefined;
+                this.startMessagePolling();
+            }
+        });
+    }
+    startMessagePolling() {
+        if (!this.sessionId || this.currentPollTaskId || !this.visible) {
+            return;
+        }
+        if (this.messagePollingHandle) {
+            return;
+        }
+        this.messagePollingHandle = this.getChatService().startMessagePolling(this.sessionId, {
+            getSince: () => { var _a; return this.messages.length > 0 ? (_a = this.messages.at(-1)) === null || _a === void 0 ? void 0 : _a.created_at : undefined; },
+            onMessages: (messages) => {
+                if (messages.length === 0)
+                    return;
+                this.messages = [...this.messages, ...messages];
+                this.saveSessionToStorage();
+                this.scrollToBottom();
+                this.focusInput();
+            },
+            onError: () => {
+                // Silently ignore polling errors to match previous behaviour
+            }
+        });
+    }
+    stopMessagePolling() {
+        var _a;
+        if (this.messagePollingHandle) {
+            this.messagePollingHandle.stop();
+            this.messagePollingHandle = undefined;
+        }
+        else {
+            (_a = this.chatService) === null || _a === void 0 ? void 0 : _a.stopMessagePolling();
         }
     }
     setPosition(position) {
@@ -655,7 +650,6 @@ export class OcsChat {
         const actualChatWidth = Math.min(windowWidth, this.chatWindowFullscreenWidth);
         const centeredX = (windowWidth - actualChatWidth) / 2;
         const maxOffset = (windowWidth - actualChatWidth) / 2;
-        console.log(windowWidth, actualChatWidth, centeredX, maxOffset);
         return { windowWidth, actualChatWidth, centeredX, maxOffset };
     }
     getPositionStyles() {
@@ -777,25 +771,181 @@ export class OcsChat {
         document.removeEventListener('touchmove', this.handleTouchMove);
         document.removeEventListener('touchend', this.handleTouchEnd);
     }
-    getDefaultIconUrl() {
-        return `${this.getApiBaseUrl()}/static/images/favicons/favicon.svg`;
+    // Button positioning and drag handlers
+    initializeButtonPosition() {
+        const computedStyle = getComputedStyle(this.host);
+        const position = computedStyle.getPropertyValue('position');
+        // Only enable dragging if the host element is positioned fixed
+        if (position !== 'fixed') {
+            return;
+        }
+        const rect = this.host.getBoundingClientRect();
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const left = computedStyle.getPropertyValue('left');
+        const right = computedStyle.getPropertyValue('right');
+        const top = computedStyle.getPropertyValue('top');
+        const bottom = computedStyle.getPropertyValue('bottom');
+        const hasLeft = !this.isAutoPosition(left);
+        const hasTop = !this.isAutoPosition(top);
+        this.buttonHorizontalSide = hasLeft ? 'left' : 'right';
+        this.buttonVerticalSide = hasTop ? 'top' : 'bottom';
+        const resolvedRight = this.getNumericPositionValue(right, Math.max(0, windowWidth - rect.right));
+        const resolvedLeft = this.getNumericPositionValue(left, Math.max(0, rect.left));
+        const resolvedBottom = this.getNumericPositionValue(bottom, Math.max(0, windowHeight - rect.bottom));
+        const resolvedTop = this.getNumericPositionValue(top, Math.max(0, rect.top));
+        const horizontalValue = this.buttonHorizontalSide === 'left' ? resolvedLeft : resolvedRight;
+        const verticalValue = this.buttonVerticalSide === 'top' ? resolvedTop : resolvedBottom;
+        this.buttonPosition = {
+            x: horizontalValue,
+            y: verticalValue
+        };
+        // Apply the position to the host
+        this.updateHostPosition();
+    }
+    updateHostPosition() {
+        this.host.style.position = 'fixed';
+        if (this.buttonHorizontalSide === 'left') {
+            this.host.style.left = `${this.buttonPosition.x}px`;
+            this.host.style.right = 'auto';
+        }
+        else {
+            this.host.style.right = `${this.buttonPosition.x}px`;
+            this.host.style.left = 'auto';
+        }
+        if (this.buttonVerticalSide === 'top') {
+            this.host.style.top = `${this.buttonPosition.y}px`;
+            this.host.style.bottom = 'auto';
+        }
+        else {
+            this.host.style.bottom = `${this.buttonPosition.y}px`;
+            this.host.style.top = 'auto';
+        }
+    }
+    isButtonDraggable() {
+        const computedStyle = getComputedStyle(this.host);
+        return computedStyle.getPropertyValue('position') === 'fixed';
+    }
+    updateButtonPosition(pointer) {
+        var _a, _b;
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const buttonWidth = ((_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 60;
+        const buttonHeight = ((_b = this.buttonRef) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 60;
+        const minPadding = 10;
+        const candidateLeft = pointer.clientX - this.buttonDragOffset.x;
+        const candidateTop = pointer.clientY - this.buttonDragOffset.y;
+        const minLeft = minPadding;
+        const maxLeft = windowWidth - buttonWidth - minPadding;
+        const minTop = minPadding;
+        const maxTop = windowHeight - buttonHeight - minPadding;
+        const constrainedLeft = Math.max(minLeft, Math.min(candidateLeft, maxLeft));
+        const constrainedTop = Math.max(minTop, Math.min(candidateTop, maxTop));
+        const newHorizontalValue = this.buttonHorizontalSide === 'left'
+            ? constrainedLeft
+            : Math.max(minPadding, windowWidth - (constrainedLeft + buttonWidth));
+        const newVerticalValue = this.buttonVerticalSide === 'top'
+            ? constrainedTop
+            : Math.max(minPadding, windowHeight - (constrainedTop + buttonHeight));
+        if (newHorizontalValue !== this.buttonPosition.x || newVerticalValue !== this.buttonPosition.y) {
+            this.buttonWasDragged = true;
+            this.buttonPosition = { x: newHorizontalValue, y: newVerticalValue };
+            if (this.rafId === null) {
+                this.rafId = requestAnimationFrame(() => {
+                    this.updateHostPosition();
+                    this.rafId = null;
+                });
+            }
+        }
+    }
+    addButtonEventListeners() {
+        if (this.buttonListenersAttached) {
+            return;
+        }
+        document.addEventListener('mousemove', this.handleButtonMouseMove);
+        document.addEventListener('mouseup', this.handleButtonMouseUp);
+        document.addEventListener('touchmove', this.handleButtonTouchMove, { passive: false });
+        document.addEventListener('touchend', this.handleButtonTouchEnd);
+        this.buttonListenersAttached = true;
+    }
+    removeButtonEventListeners() {
+        if (!this.buttonListenersAttached) {
+            return;
+        }
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        document.removeEventListener('mousemove', this.handleButtonMouseMove);
+        document.removeEventListener('mouseup', this.handleButtonMouseUp);
+        document.removeEventListener('touchmove', this.handleButtonTouchMove);
+        document.removeEventListener('touchend', this.handleButtonTouchEnd);
+        this.buttonListenersAttached = false;
+    }
+    isAutoPosition(value) {
+        const trimmed = value.trim();
+        return trimmed === '' || trimmed === 'auto';
+    }
+    parsePixelValue(value) {
+        const trimmed = value.trim();
+        if (trimmed === '' || trimmed === 'auto') {
+            return null;
+        }
+        if (trimmed.endsWith('px')) {
+            const parsed = parseFloat(trimmed);
+            return Number.isFinite(parsed) ? parsed : null;
+        }
+        const numeric = Number(trimmed);
+        if (Number.isFinite(numeric)) {
+            return numeric;
+        }
+        return null;
+    }
+    getNumericPositionValue(value, fallback) {
+        const parsed = this.parsePixelValue(value);
+        if (parsed !== null) {
+            return parsed;
+        }
+        return fallback;
+    }
+    getWelcomeMessages() {
+        const translated = this.translationManager.getArray("content.welcomeMessages");
+        return translated && translated.length > 0
+            ? translated
+            : this.parsedWelcomeMessages;
+    }
+    getStarterQuestions() {
+        const translated = this.translationManager.getArray("content.starterQuestions");
+        return translated && translated.length > 0
+            ? translated
+            : this.parsedStarterQuestions;
     }
     getButtonClasses() {
-        const hasText = this.buttonText && this.buttonText.trim();
+        const buttonText = this.translationManager.get('branding.buttonText', this.buttonText);
+        const hasText = !!(buttonText && buttonText.trim());
         const baseClass = hasText ? 'chat-btn-text' : 'chat-btn-icon';
         const shapeClass = this.buttonShape === 'round' ? 'round' : '';
         return `${baseClass} ${shapeClass}`.trim();
     }
     renderButton() {
-        const hasText = this.buttonText && this.buttonText.trim();
+        var _a;
+        const buttonText = this.translationManager.get('branding.buttonText', this.buttonText);
+        const hasText = !!(buttonText && buttonText.trim());
         const hasCustomIcon = this.iconUrl && this.iconUrl.trim();
-        const iconSrc = hasCustomIcon ? this.iconUrl : this.getDefaultIconUrl();
         const buttonClasses = this.getButtonClasses();
+        const finalButtonText = buttonText !== null && buttonText !== void 0 ? buttonText : '';
+        const openLabel = (_a = this.translationManager.get('launcher.open')) !== null && _a !== void 0 ? _a : '';
+        const buttonAriaLabel = finalButtonText ? `${openLabel} - ${finalButtonText}` : openLabel;
+        // Only show drag cursor if button is draggable
+        const isDraggable = this.isButtonDraggable();
+        const buttonStyle = isDraggable ? {
+            cursor: this.isButtonDragging ? 'grabbing' : 'grab',
+        } : {};
         if (hasText) {
-            return (h("button", { class: buttonClasses, onClick: () => this.toggleWindowVisibility(), "aria-label": `Open chat - ${this.buttonText}`, title: this.buttonText }, h("img", { src: iconSrc, alt: "" }), h("span", null, this.buttonText)));
+            return (h("button", { ref: (el) => this.buttonRef = el, class: buttonClasses, "aria-label": buttonAriaLabel, title: finalButtonText || openLabel, style: buttonStyle, onClick: () => this.handleButtonClick(), onMouseDown: (e) => this.handleButtonMouseDown(e), onTouchStart: (e) => this.handleButtonTouchStart(e), "aria-grabbed": this.isButtonDragging, "aria-describedby": isDraggable ? "chat-button-drag-hint" : undefined }, hasCustomIcon ? h("img", { src: this.iconUrl, alt: "" }) : h(OcsWidgetAvatar, null), h("span", null, finalButtonText), isDraggable && (h("span", { id: "chat-button-drag-hint", style: { display: 'none' } }, "Draggable. Use mouse or touch to reposition."))));
         }
         else {
-            return (h("button", { class: buttonClasses, onClick: () => this.toggleWindowVisibility(), "aria-label": "Open chat", title: "Open chat" }, h("img", { src: iconSrc, alt: "Chat" })));
+            return (h("button", { ref: (el) => this.buttonRef = el, class: buttonClasses, "aria-label": openLabel, title: openLabel, style: buttonStyle, onClick: () => this.handleButtonClick(), onMouseDown: (e) => this.handleButtonMouseDown(e), onTouchStart: (e) => this.handleButtonTouchStart(e), "aria-grabbed": this.isButtonDragging, "aria-describedby": isDraggable ? "chat-button-drag-hint" : undefined }, hasCustomIcon ? h("img", { src: this.iconUrl, alt: "" }) : h(OcsWidgetAvatar, null), isDraggable && (h("span", { id: "chat-button-drag-hint", style: { display: 'none' } }, "Draggable. Use mouse or touch to reposition."))));
         }
     }
     getStorageKeys() {
@@ -931,18 +1081,18 @@ export class OcsChat {
         if (this.error && !this.sessionId) {
             return (h(Host, null, h("p", { class: "error-message" }, this.error)));
         }
-        return (h(Host, null, this.renderButton(), this.visible && (h("div", { ref: (el) => this.chatWindowRef = el, id: "ocs-chat-window", class: this.getPositionClasses(), style: this.getPositionStyles() }, h("div", { class: `chat-header ${this.isDragging ? 'chat-header-dragging' : 'chat-header-draggable'}`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { class: "drag-indicator" }, h("div", { class: "drag-dots header-button" }, h(GripDotsVerticalIcon, null))), h("div", { class: "header-text" }, this.headerText), h("div", { class: "header-buttons" }, this.messages.length > 0 && (h("button", { class: "header-button", onClick: () => this.showConfirmationDialog(), title: "Start new chat", "aria-label": "Start new chat" }, h(PlusWithCircleIcon, null))), this.allowFullScreen && h("button", { class: "header-button fullscreen-button", onClick: () => this.toggleFullscreen(), title: this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen", "aria-label": this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen" }, this.isFullscreen ? h(ArrowsPointingInIcon, null) : h(ArrowsPointingOutIcon, null)), h("button", { class: "header-button", onClick: () => this.visible = false, "aria-label": "Close" }, h(XMarkIcon, null)))), this.showNewChatConfirmation && (h("div", { class: "confirmation-overlay" }, h("div", { class: "confirmation-dialog" }, h("div", { class: "confirmation-content" }, h("h3", { class: "confirmation-title" }, "Start New Chat"), h("p", { class: "confirmation-message" }, this.newChatConfirmationMessage), h("div", { class: "confirmation-buttons" }, h("button", { class: "confirmation-button confirmation-button-cancel", onClick: () => this.hideConfirmationDialog() }, "Cancel"), h("button", { class: "confirmation-button confirmation-button-confirm", onClick: () => this.confirmNewChat() }, "Continue")))))), h("div", { class: "chat-content" }, this.isLoading && !this.sessionId && (h("div", { class: "loading-container" }, h("div", { class: "loading-spinner" }), h("span", { class: "loading-text" }, "Starting chat..."))), (h("div", { ref: (el) => this.messageListRef = el, class: "messages-container" }, this.messages.length === 0 && this.parsedWelcomeMessages.length > 0 && (h("div", { class: "welcome-messages" }, this.parsedWelcomeMessages.map((message, index) => (h("div", { key: `welcome-${index}`, class: "message-row message-row-assistant" }, h("div", { class: "message-bubble message-bubble-assistant" }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message) }))))))), this.messages.map((message, index) => (h("div", { key: index, class: `message-row ${message.role === 'user' ? 'message-row-user' : 'message-row-assistant'}` }, h("div", { class: `message-bubble ${message.role === 'user'
+        return (h(Host, null, this.renderButton(), this.visible && (h("div", { ref: (el) => this.chatWindowRef = el, id: "ocs-chat-window", class: this.getPositionClasses(), style: this.getPositionStyles() }, h("div", { class: `chat-header ${this.isDragging ? 'chat-header-dragging' : 'chat-header-draggable'}`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { class: "drag-indicator" }, h("div", { class: "drag-dots header-button" }, h(GripDotsVerticalIcon, null))), h("div", { class: "header-text" }, this.translationManager.get('branding.headerText', this.headerText)), h("div", { class: "header-buttons" }, this.messages.length > 0 && (h("button", { class: "header-button", onClick: () => this.showConfirmationDialog(), title: this.translationManager.get('window.newChat'), "aria-label": this.translationManager.get('window.newChat') }, h(PlusWithCircleIcon, null))), this.allowFullScreen && h("button", { class: "header-button fullscreen-button", onClick: () => this.toggleFullscreen(), title: this.isFullscreen ? this.translationManager.get('window.exitFullscreen') : this.translationManager.get('window.fullscreen'), "aria-label": this.isFullscreen ? this.translationManager.get('window.exitFullscreen') : this.translationManager.get('window.fullscreen') }, this.isFullscreen ? h(ArrowsPointingInIcon, null) : h(ArrowsPointingOutIcon, null)), h("button", { class: "header-button", onClick: () => this.visible = false, "aria-label": this.translationManager.get('window.close') }, h(XMarkIcon, null)))), this.showNewChatConfirmation && (h("div", { class: "confirmation-overlay" }, h("div", { class: "confirmation-dialog" }, h("div", { class: "confirmation-content" }, h("h3", { class: "confirmation-title" }, this.translationManager.get('modal.newChatTitle')), h("p", { class: "confirmation-message" }, this.translationManager.get('modal.newChatBody', this.newChatConfirmationMessage)), h("div", { class: "confirmation-buttons" }, h("button", { class: "confirmation-button confirmation-button-cancel", onClick: () => this.hideConfirmationDialog() }, this.translationManager.get('modal.cancel')), h("button", { class: "confirmation-button confirmation-button-confirm", onClick: () => this.confirmNewChat() }, this.translationManager.get('modal.confirm'))))))), h("div", { class: "chat-content" }, this.isLoading && !this.sessionId && (h("div", { class: "loading-container" }, h("div", { class: "loading-spinner" }), h("span", { class: "loading-text" }, this.translationManager.get('status.starting')))), (h("div", { ref: (el) => this.messageListRef = el, class: "messages-container" }, this.messages.length === 0 && this.parsedWelcomeMessages.length > 0 && (h("div", { class: "welcome-messages" }, this.getWelcomeMessages().map((message, index) => (h("div", { key: `welcome-${index}`, class: "message-row message-row-assistant" }, h("div", { class: "message-bubble message-bubble-assistant" }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message) }))))))), this.messages.map((message, index) => (h("div", { key: index, class: `message-row ${message.role === 'user' ? 'message-row-user' : 'message-row-assistant'}` }, h("div", { class: `message-bubble ${message.role === 'user'
                 ? 'message-bubble-user'
                 : message.role === 'assistant'
                     ? 'message-bubble-assistant'
-                    : 'message-bubble-system'}` }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message.content) }), message.attachments && message.attachments.length > 0 && (h("div", { class: "message-attachments" }, message.attachments.map((attachment, attachmentIndex) => (h("div", { key: attachmentIndex, class: "flex items-center gap-[0.5em]" }, h("span", { class: "message-attachment-icon" }, h(PaperClipIcon, null)), h("span", { class: "message-attachment-name" }, attachment.name)))))), h("div", { class: "message-timestamp" }, this.formatTime(message.created_at)))))), this.isTyping && (h("div", null, h("div", { class: "typing-indicator" }, h("div", { class: "typing-progress" })), h("div", { class: "typing-text" }, h("span", null, this.typingIndicatorText), h("span", { class: "typing-dots" })))))), this.messages.length === 0 && this.parsedStarterQuestions.length > 0 && (h("div", { class: "starter-questions" }, this.parsedStarterQuestions.map((question, index) => (h("div", { key: `starter-${index}`, class: "starter-question-row" }, h("button", { class: "starter-question", onClick: () => this.handleStarterQuestionClick(question) }, question)))))), this.allowAttachments && this.selectedFiles.length > 0 && (h("div", { class: "selected-files-container" }, h("div", { class: "space-y-[0.25em]" }, this.selectedFiles.map((selectedFile, index) => (h("div", { key: index, class: "selected-file-item" }, h("div", { class: "flex items-center gap-[0.5em]" }, h("span", { class: "selected-file-icon" }, h(PaperClipIcon, null)), h("span", null, selectedFile.file.name), h("span", { class: "selected-file-size" }, "(", this.formatFileSize(selectedFile.file.size), ")"), selectedFile.error && (h("span", { class: "selected-file-error" }, selectedFile.error)), selectedFile.uploaded && (h("span", { class: "selected-file-success-icon" }, h(CheckDocumentIcon, null)))), h("button", { onClick: () => this.removeSelectedFile(index), class: "selected-file-remove-button", "aria-label": "Remove file" }, h(XIcon, null)))))))), this.sessionId && (h("div", { class: "input-area" }, h("div", { class: "input-container" }, h("textarea", { ref: (el) => this.textareaRef = el, class: "message-textarea", rows: 1, placeholder: "Type your message...", value: this.messageInput, onInput: (e) => this.handleInputChange(e), onKeyPress: (e) => this.handleKeyPress(e), disabled: this.isTyping || this.isUploadingFiles }), this.allowAttachments && (h("input", { ref: (el) => {
+                    : 'message-bubble-system'}` }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message.content) }), message.attachments && message.attachments.length > 0 && (h("div", { class: "message-attachments" }, message.attachments.map((attachment, attachmentIndex) => (h("div", { key: attachmentIndex, class: "flex items-center gap-[0.5em]" }, h("span", { class: "message-attachment-icon" }, h(PaperClipIcon, null)), h("span", { class: "message-attachment-name" }, attachment.name)))))), h("div", { class: "message-timestamp" }, this.formatTime(message.created_at)))))), this.isTyping && (h("div", null, h("div", { class: "typing-indicator" }, h("div", { class: "typing-progress" })), h("div", { class: "typing-text" }, h("span", null, this.translationManager.get('status.typing', this.typingIndicatorText)), h("span", { class: "typing-dots loading" })))))), this.messages.length === 0 && this.parsedStarterQuestions.length > 0 && (h("div", { class: "starter-questions" }, this.getStarterQuestions().map((question, index) => (h("div", { key: `starter-${index}`, class: "starter-question-row" }, h("button", { class: "starter-question", onClick: () => this.handleStarterQuestionClick(question) }, question)))))), this.allowAttachments && this.selectedFiles.length > 0 && (h("div", { class: "selected-files-container" }, h("div", { class: "space-y-[0.25em]" }, this.selectedFiles.map((selectedFile, index) => (h("div", { key: index, class: "selected-file-item" }, h("div", { class: "flex items-center gap-[0.5em]" }, h("span", { class: "selected-file-icon" }, h(PaperClipIcon, null)), h("span", null, selectedFile.file.name), h("span", { class: "selected-file-size" }, "(", this.formatFileSize(selectedFile.file.size), ")"), selectedFile.error && (h("span", { class: "selected-file-error" }, selectedFile.error)), selectedFile.uploaded && (h("span", { class: "selected-file-success-icon" }, h(CheckDocumentIcon, null)))), h("button", { onClick: () => this.removeSelectedFile(index), class: "selected-file-remove-button", "aria-label": this.translationManager.get('attach.remove') }, h(XIcon, null)))))))), this.sessionId && (h("div", { class: "input-area" }, h("div", { class: "input-container" }, h("textarea", { ref: (el) => this.textareaRef = el, class: "message-textarea", rows: 1, placeholder: this.translationManager.get('composer.placeholder'), value: this.messageInput, onInput: (e) => this.handleInputChange(e), onKeyPress: (e) => this.handleKeyPress(e), disabled: this.isTyping || this.isUploadingFiles }), this.allowAttachments && (h("input", { ref: (el) => {
                 // Unclear why but after removing all attachments this is being set to `null`.
                 if (el) {
                     this.fileInputRef = el;
                 }
-            }, id: "ocs-file-input", type: "file", multiple: true, accept: OcsChat.SUPPORTED_FILE_EXTENSIONS.join(','), onChange: (e) => this.handleFileSelect(e), class: "hidden" })), this.allowAttachments && (h("button", { class: "file-attachment-button", onClick: () => { var _a; return (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click(); }, disabled: this.isTyping || this.isUploadingFiles, title: "Attach files", "aria-label": "Attach files" }, h(PaperClipIcon, null))), h("button", { class: `send-button ${!this.isTyping && !!this.messageInput.trim()
+            }, id: "ocs-file-input", type: "file", multiple: true, accept: OcsChat.SUPPORTED_FILE_EXTENSIONS.join(','), onChange: (e) => this.handleFileSelect(e), class: "hidden" })), this.allowAttachments && (h("button", { class: "file-attachment-button", onClick: () => { var _a; return (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click(); }, disabled: this.isTyping || this.isUploadingFiles, title: this.translationManager.get('attach.add'), "aria-label": this.translationManager.get('attach.add') }, h(PaperClipIcon, null))), h("button", { class: `send-button ${!this.isTyping && !!this.messageInput.trim()
                 ? 'send-button-enabled'
-                : 'send-button-disabled'}`, onClick: () => this.sendMessage(this.messageInput), disabled: this.isTyping || this.isUploadingFiles || !this.messageInput.trim() }, this.isUploadingFiles ? 'Uploading...' : 'Send')))), h("div", { class: "flex items-center justify-center text-[0.8em] font-light w-full text-slate-500 py-[2px]" }, h("p", null, "Powered by ", h("a", { class: "underline", href: "https://www.dimagi.com", target: "_blank" }, "Dimagi"))))))));
+                : 'send-button-disabled'}`, onClick: () => this.sendMessage(this.messageInput), disabled: this.isTyping || this.isUploadingFiles || !this.messageInput.trim() }, this.isUploadingFiles ? `${this.translationManager.get('status.uploading')}...` : this.translationManager.get('composer.send'))))), h("div", { class: "flex items-center justify-center text-[0.8em] font-light w-full text-slate-500 py-[2px]" }, h("p", null, this.translationManager.get('branding.poweredBy'), ' ', " ", h("a", { class: "underline", href: "https://www.dimagi.com", target: "_blank" }, "Dimagi"))))))));
     }
     static get is() { return "open-chat-studio-widget"; }
     static get encapsulation() { return "shadow"; }
@@ -990,12 +1140,12 @@ export class OcsChat {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The base URL for the API (defaults to current origin)."
+                    "text": "The base URL for the API."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "\"https://chatbots.dimagi.com\""
+                "defaultValue": "\"https://www.openchatstudio.com\""
             },
             "buttonText": {
                 "type": "string",
@@ -1035,6 +1185,25 @@ export class OcsChat {
                 "setter": false,
                 "reflect": false
             },
+            "embedKey": {
+                "type": "string",
+                "attribute": "embed-key",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Authentication key for embedded channels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "buttonShape": {
                 "type": "string",
                 "attribute": "button-shape",
@@ -1091,8 +1260,7 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "\"Starting a new chat will clear your current conversation. Continue?\""
+                "reflect": false
             },
             "visible": {
                 "type": "boolean",
@@ -1307,8 +1475,45 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "\"Preparing response\""
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "attribute": "language",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The language code for the widget UI (e.g., 'en', 'es', 'fr'). Defaults to en"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "translationsUrl": {
+                "type": "string",
+                "attribute": "translations-url",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
@@ -1331,7 +1536,9 @@ export class OcsChat {
             "isFullscreen": {},
             "showNewChatConfirmation": {},
             "selectedFiles": {},
-            "isUploadingFiles": {}
+            "isUploadingFiles": {},
+            "isButtonDragging": {},
+            "buttonWasDragged": {}
         };
     }
     static get elementRef() { return "host"; }