open-chat-studio-widget 0.5.1 → 0.5.3

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Du0PBL6n.js');
+var index = require('./index-D8A4RBzq.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {

package/dist/cjs/open-chat-studio-widget.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Du0PBL6n.js');
+var index = require('./index-D8A4RBzq.js');
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const OcsWidgetAvatar = () => {
@@ -4935,7 +4935,9 @@ class ChatSessionService {
         return response.json();
     }
     async pollTaskOnce(sessionId, taskId) {
-        const response = await fetch(`${this.apiBaseUrl}/api/chat/${sessionId}/${taskId}/poll/`);
+        const response = await fetch(`${this.apiBaseUrl}/api/chat/${sessionId}/${taskId}/poll/`, {
+            headers: this.getCommonHeaders(),
+        });
         if (!response.ok) {
             throw new Error(`Failed to poll task: ${response.statusText}`);
         }
@@ -4993,7 +4995,9 @@ class ChatSessionService {
         if (since) {
             url.searchParams.set('since', since);
         }
-        const response = await fetch(url.toString());
+        const response = await fetch(url.toString(), {
+            headers: this.getCommonHeaders(),
+        });
         if (!response.ok) {
             throw new Error(`Failed to poll messages: ${response.statusText}`);
         }
@@ -5030,14 +5034,18 @@ class ChatSessionService {
         }
     }
     getJsonHeaders() {
-        const headers = {
-            'Content-Type': 'application/json',
-            'x-ocs-widget-version': this.widgetVersion,
-        };
+        const headers = this.getCommonHeaders();
+        headers['Content-Type'] = 'application/json';
         const csrfToken = this.csrfTokenProvider(this.apiBaseUrl);
         if (csrfToken) {
             headers['X-CSRFToken'] = csrfToken;
         }
+        return headers;
+    }
+    getCommonHeaders() {
+        const headers = {
+            'x-ocs-widget-version': this.widgetVersion,
+        };
         if (this.embedKey) {
             headers['X-Embed-Key'] = this.embedKey;
         }
@@ -5402,17 +5410,16 @@ const OcsChat = class {
         this.chatWindowFullscreenWidth = varToPixels(fullscreenWidthVar, window.innerWidth, this.chatWindowFullscreenWidth);
         // Initialize button position from computed styles
         this.initializeButtonPosition();
-        if (this.visible) {
-            this.initializePosition();
-        }
-        // Only auto-start session if we don't have an existing one
-        if (this.visible && !this.sessionId) {
-            this.startSession();
-        }
-        else if (this.visible && this.sessionId) {
-            // Resume polling for existing session
-            this.startMessagePolling();
-        }
+        // Defer position initialization to avoid state changes during componentDidLoad
+        setTimeout(() => {
+            if (this.visible) {
+                this.initializePosition();
+            }
+            // Resume polling for existing session (don't auto-start new sessions)
+            if (this.visible && this.sessionId) {
+                this.startMessagePolling();
+            }
+        }, 0);
         window.addEventListener('resize', this.handleWindowResize);
     }
     disconnectedCallback() {
@@ -5524,13 +5531,7 @@ const OcsChat = class {
             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.startTaskPolling(data.seed_message_task_id);
-            }
-            else {
-                this.startMessagePolling();
-            }
+            this.startMessagePolling();
         }
         catch (_error) {
             this.handleError('Failed to start chat session');
@@ -5559,8 +5560,20 @@ const OcsChat = class {
         }
     }
     async sendMessage(message) {
-        if (!this.sessionId || !message.trim())
+        if (!message.trim())
             return;
+        // Start session if we don't have one yet
+        if (!this.sessionId) {
+            // Prevent concurrent session initialization
+            if (this.isLoading) {
+                return;
+            }
+            await this.startSession();
+            // Check if session started successfully
+            if (!this.sessionId) {
+                return; // startSession already handled the error
+            }
+        }
         try {
             let attachmentIds = [];
             if (this.allowAttachments && this.selectedFiles.length > 0) {
@@ -5575,10 +5588,11 @@ const OcsChat = class {
             }
             // If this is the first user message and there are welcome messages,
             // add them to chat history as assistant messages
-            if (this.messages.length === 0 && this.parsedWelcomeMessages.length > 0) {
+            const welcomeMessagesToAdd = this.getWelcomeMessages();
+            if (this.messages.length === 0 && welcomeMessagesToAdd.length > 0) {
                 const now = new Date();
-                const welcomeMessages = this.parsedWelcomeMessages.map((welcomeMsg, index) => ({
-                    created_at: new Date(now.getTime() - (this.parsedWelcomeMessages.length - index) * 1000).toISOString(),
+                const welcomeMessages = welcomeMessagesToAdd.map((welcomeMsg, index) => ({
+                    created_at: new Date(now.getTime() - (welcomeMessagesToAdd.length - index) * 1000).toISOString(),
                     role: 'assistant',
                     content: welcomeMsg,
                     attachments: []
@@ -5712,16 +5726,14 @@ const OcsChat = class {
         }
         if (visible) {
             this.initializePosition();
-        }
-        if (visible && !this.sessionId) {
-            await this.startSession();
-        }
-        else if (!visible) {
-            this.stopMessagePolling();
+            // Resume polling for existing session (don't auto-start new sessions)
+            if (this.sessionId) {
+                this.scrollToBottom(true);
+                this.startMessagePolling();
+            }
         }
         else {
-            this.scrollToBottom(true);
-            this.startMessagePolling();
+            this.stopMessagePolling();
         }
     }
     startTaskPolling(taskId) {
@@ -6224,9 +6236,13 @@ const OcsChat = class {
     }
     async confirmNewChat() {
         this.hideConfirmationDialog();
-        await this.actuallyStartNewChat();
+        await this.clearSession();
     }
-    async actuallyStartNewChat() {
+    /**
+     * This clears out all data related to the previous session. A new session
+     * will start when the user sends a message.
+     */
+    async clearSession() {
         this.clearSessionStorage();
         this.sessionId = undefined;
         this.messages = [];
@@ -6236,7 +6252,6 @@ const OcsChat = class {
             this.selectedFiles = [];
         }
         this.cleanup();
-        await this.startSession();
     }
     toggleFullscreen() {
         this.isFullscreen = !this.isFullscreen;
@@ -6248,18 +6263,18 @@ const OcsChat = class {
         if (this.error && !this.sessionId) {
             return (index.h(index.Host, null, index.h("p", { class: "error-message" }, this.error)));
         }
-        return (index.h(index.Host, null, this.renderButton(), this.visible && (index.h("div", { ref: (el) => this.chatWindowRef = el, id: "ocs-chat-window", class: this.getPositionClasses(), style: this.getPositionStyles() }, index.h("div", { class: `chat-header ${this.isDragging ? 'chat-header-dragging' : 'chat-header-draggable'}`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, index.h("div", { class: "drag-indicator" }, index.h("div", { class: "drag-dots header-button" }, index.h(GripDotsVerticalIcon, null))), index.h("div", { class: "header-text" }, this.translationManager.get('branding.headerText', this.headerText)), index.h("div", { class: "header-buttons" }, this.messages.length > 0 && (index.h("button", { class: "header-button", onClick: () => this.showConfirmationDialog(), title: this.translationManager.get('window.newChat'), "aria-label": this.translationManager.get('window.newChat') }, index.h(PlusWithCircleIcon, null))), this.allowFullScreen && index.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 ? index.h(ArrowsPointingInIcon, null) : index.h(ArrowsPointingOutIcon, null)), index.h("button", { class: "header-button", onClick: () => this.visible = false, "aria-label": this.translationManager.get('window.close') }, index.h(XMarkIcon, null)))), this.showNewChatConfirmation && (index.h("div", { class: "confirmation-overlay" }, index.h("div", { class: "confirmation-dialog" }, index.h("div", { class: "confirmation-content" }, index.h("h3", { class: "confirmation-title" }, this.translationManager.get('modal.newChatTitle')), index.h("p", { class: "confirmation-message" }, this.translationManager.get('modal.newChatBody', this.newChatConfirmationMessage)), index.h("div", { class: "confirmation-buttons" }, index.h("button", { class: "confirmation-button confirmation-button-cancel", onClick: () => this.hideConfirmationDialog() }, this.translationManager.get('modal.cancel')), index.h("button", { class: "confirmation-button confirmation-button-confirm", onClick: () => this.confirmNewChat() }, this.translationManager.get('modal.confirm'))))))), index.h("div", { class: "chat-content" }, this.isLoading && !this.sessionId && (index.h("div", { class: "loading-container" }, index.h("div", { class: "loading-spinner" }), index.h("span", { class: "loading-text" }, this.translationManager.get('status.starting')))), (index.h("div", { ref: (el) => this.messageListRef = el, class: "messages-container" }, this.messages.length === 0 && this.parsedWelcomeMessages.length > 0 && (index.h("div", { class: "welcome-messages" }, this.getWelcomeMessages().map((message, index$1) => (index.h("div", { key: `welcome-${index$1}`, class: "message-row message-row-assistant" }, index.h("div", { class: "message-bubble message-bubble-assistant" }, index.h("div", { class: "chat-markdown", innerHTML: renderMarkdownSync(message) }))))))), this.messages.map((message, index$1) => (index.h("div", { key: index$1, class: `message-row ${message.role === 'user' ? 'message-row-user' : 'message-row-assistant'}` }, index.h("div", { class: `message-bubble ${message.role === 'user'
+        return (index.h(index.Host, null, this.renderButton(), this.visible && (index.h("div", { ref: (el) => this.chatWindowRef = el, id: "ocs-chat-window", class: this.getPositionClasses(), style: this.getPositionStyles() }, index.h("div", { class: `chat-header ${this.isDragging ? 'chat-header-dragging' : 'chat-header-draggable'}`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, index.h("div", { class: "drag-indicator" }, index.h("div", { class: "drag-dots header-button" }, index.h(GripDotsVerticalIcon, null))), index.h("div", { class: "header-text" }, this.translationManager.get('branding.headerText', this.headerText)), index.h("div", { class: "header-buttons" }, this.messages.length > 0 && (index.h("button", { class: "header-button", onClick: () => this.showConfirmationDialog(), title: this.translationManager.get('window.newChat'), "aria-label": this.translationManager.get('window.newChat') }, index.h(PlusWithCircleIcon, null))), this.allowFullScreen && index.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 ? index.h(ArrowsPointingInIcon, null) : index.h(ArrowsPointingOutIcon, null)), index.h("button", { class: "header-button", onClick: () => this.visible = false, "aria-label": this.translationManager.get('window.close') }, index.h(XMarkIcon, null)))), this.showNewChatConfirmation && (index.h("div", { class: "confirmation-overlay" }, index.h("div", { class: "confirmation-dialog" }, index.h("div", { class: "confirmation-content" }, index.h("h3", { class: "confirmation-title" }, this.translationManager.get('modal.newChatTitle')), index.h("p", { class: "confirmation-message" }, this.translationManager.get('modal.newChatBody', this.newChatConfirmationMessage)), index.h("div", { class: "confirmation-buttons" }, index.h("button", { class: "confirmation-button confirmation-button-cancel", onClick: () => this.hideConfirmationDialog() }, this.translationManager.get('modal.cancel')), index.h("button", { class: "confirmation-button confirmation-button-confirm", onClick: () => this.confirmNewChat() }, this.translationManager.get('modal.confirm'))))))), index.h("div", { class: "chat-content" }, this.isLoading && !this.sessionId && (index.h("div", { class: "loading-container" }, index.h("div", { class: "loading-spinner" }), index.h("span", { class: "loading-text" }, this.translationManager.get('status.starting')))), (index.h("div", { ref: (el) => this.messageListRef = el, class: "messages-container" }, this.messages.length === 0 && this.getWelcomeMessages().length > 0 && (index.h("div", { class: "welcome-messages" }, this.getWelcomeMessages().map((message, index$1) => (index.h("div", { key: `welcome-${index$1}`, class: "message-row message-row-assistant" }, index.h("div", { class: "message-bubble message-bubble-assistant" }, index.h("div", { class: "chat-markdown", innerHTML: renderMarkdownSync(message) }))))))), this.messages.map((message, index$1) => (index.h("div", { key: index$1, class: `message-row ${message.role === 'user' ? 'message-row-user' : 'message-row-assistant'}` }, index.h("div", { class: `message-bubble ${message.role === 'user'
                 ? 'message-bubble-user'
                 : message.role === 'assistant'
                     ? 'message-bubble-assistant'
-                    : 'message-bubble-system'}` }, index.h("div", { class: "chat-markdown", innerHTML: renderMarkdownSync(message.content) }), message.attachments && message.attachments.length > 0 && (index.h("div", { class: "message-attachments" }, message.attachments.map((attachment, attachmentIndex) => (index.h("div", { key: attachmentIndex, class: "flex items-center gap-[0.5em]" }, index.h("span", { class: "message-attachment-icon" }, index.h(PaperClipIcon, null)), index.h("span", { class: "message-attachment-name" }, attachment.name)))))), index.h("div", { class: "message-timestamp" }, this.formatTime(message.created_at)))))), this.isTyping && (index.h("div", null, index.h("div", { class: "typing-indicator" }, index.h("div", { class: "typing-progress" })), index.h("div", { class: "typing-text" }, index.h("span", null, this.translationManager.get('status.typing', this.typingIndicatorText)), index.h("span", { class: "typing-dots loading" })))))), this.messages.length === 0 && this.parsedStarterQuestions.length > 0 && (index.h("div", { class: "starter-questions" }, this.getStarterQuestions().map((question, index$1) => (index.h("div", { key: `starter-${index$1}`, class: "starter-question-row" }, index.h("button", { class: "starter-question", onClick: () => this.handleStarterQuestionClick(question) }, question)))))), this.allowAttachments && this.selectedFiles.length > 0 && (index.h("div", { class: "selected-files-container" }, index.h("div", { class: "space-y-[0.25em]" }, this.selectedFiles.map((selectedFile, index$1) => (index.h("div", { key: index$1, class: "selected-file-item" }, index.h("div", { class: "flex items-center gap-[0.5em]" }, index.h("span", { class: "selected-file-icon" }, index.h(PaperClipIcon, null)), index.h("span", null, selectedFile.file.name), index.h("span", { class: "selected-file-size" }, "(", this.formatFileSize(selectedFile.file.size), ")"), selectedFile.error && (index.h("span", { class: "selected-file-error" }, selectedFile.error)), selectedFile.uploaded && (index.h("span", { class: "selected-file-success-icon" }, index.h(CheckDocumentIcon, null)))), index.h("button", { onClick: () => this.removeSelectedFile(index$1), class: "selected-file-remove-button", "aria-label": this.translationManager.get('attach.remove') }, index.h(XIcon, null)))))))), this.sessionId && (index.h("div", { class: "input-area" }, index.h("div", { class: "input-container" }, index.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 && (index.h("input", { ref: (el) => {
+                    : 'message-bubble-system'}` }, index.h("div", { class: "chat-markdown", innerHTML: renderMarkdownSync(message.content) }), message.attachments && message.attachments.length > 0 && (index.h("div", { class: "message-attachments" }, message.attachments.map((attachment, attachmentIndex) => (index.h("div", { key: attachmentIndex, class: "flex items-center gap-[0.5em]" }, index.h("span", { class: "message-attachment-icon" }, index.h(PaperClipIcon, null)), index.h("span", { class: "message-attachment-name" }, attachment.name)))))), index.h("div", { class: "message-timestamp" }, this.formatTime(message.created_at)))))), this.isTyping && (index.h("div", null, index.h("div", { class: "typing-indicator" }, index.h("div", { class: "typing-progress" })), index.h("div", { class: "typing-text" }, index.h("span", null, this.translationManager.get('status.typing', this.typingIndicatorText)), index.h("span", { class: "typing-dots loading" })))))), this.messages.length === 0 && this.getStarterQuestions().length > 0 && (index.h("div", { class: "starter-questions" }, this.getStarterQuestions().map((question, index$1) => (index.h("div", { key: `starter-${index$1}`, class: "starter-question-row" }, index.h("button", { class: "starter-question", onClick: () => this.handleStarterQuestionClick(question) }, question)))))), this.allowAttachments && this.selectedFiles.length > 0 && (index.h("div", { class: "selected-files-container" }, index.h("div", { class: "space-y-[0.25em]" }, this.selectedFiles.map((selectedFile, index$1) => (index.h("div", { key: index$1, class: "selected-file-item" }, index.h("div", { class: "flex items-center gap-[0.5em]" }, index.h("span", { class: "selected-file-icon" }, index.h(PaperClipIcon, null)), index.h("span", null, selectedFile.file.name), index.h("span", { class: "selected-file-size" }, "(", this.formatFileSize(selectedFile.file.size), ")"), selectedFile.error && (index.h("span", { class: "selected-file-error" }, selectedFile.error)), selectedFile.uploaded && (index.h("span", { class: "selected-file-success-icon" }, index.h(CheckDocumentIcon, null)))), index.h("button", { onClick: () => this.removeSelectedFile(index$1), class: "selected-file-remove-button", "aria-label": this.translationManager.get('attach.remove') }, index.h(XIcon, null)))))))), index.h("div", { class: "input-area" }, index.h("div", { class: "input-container" }, index.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.isLoading }), this.allowAttachments && (index.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 && (index.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') }, index.h(PaperClipIcon, null))), index.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 && (index.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 || this.isLoading, title: this.translationManager.get('attach.add'), "aria-label": this.translationManager.get('attach.add') }, index.h(PaperClipIcon, null))), index.h("button", { class: `send-button ${!this.isTyping && !this.isLoading && !!this.messageInput.trim()
                 ? 'send-button-enabled'
-                : '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'))))), index.h("div", { class: "flex items-center justify-center text-[0.8em] font-light w-full text-slate-500 py-[2px]" }, index.h("p", null, this.translationManager.get('branding.poweredBy'), ' ', " ", index.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.isLoading || !this.messageInput.trim() }, this.isUploadingFiles ? `${this.translationManager.get('status.uploading')}...` : this.translationManager.get('composer.send')))), index.h("div", { class: "flex items-center justify-center text-[0.8em] font-light w-full text-slate-500 py-[2px]" }, index.h("p", null, this.translationManager.get('branding.poweredBy'), ' ', " ", index.h("a", { class: "underline", href: "https://www.dimagi.com", target: "_blank" }, "Dimagi"))))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {