open-chat-studio-widget 0.9.1 → 0.10.0

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

@@ -69,6 +69,7 @@ export class OcsChat {
         this.parsedStarterQuestions = [];
         this.isFullscreen = false;
         this.showNewChatConfirmation = false;
+        this.sessionEnded = false;
         this.selectedFiles = [];
         this.isUploadingFiles = false;
         this.buttonPosition = { x: 30, y: 30 };
@@ -294,6 +295,23 @@ export class OcsChat {
         this.removeButtonEventListeners();
         window.removeEventListener('resize', this.handleWindowResize);
     }
+    // ---------------------------------------------------------------------------
+    // Public event API
+    // ---------------------------------------------------------------------------
+    /**
+     * Dispatch a composed, bubbling CustomEvent on the host element so that
+     * embedders can listen with plain addEventListener outside the shadow root.
+     *
+     * All events are dispatched synchronously so that handlers can update
+     * reactive props (e.g. `pageContext`) before the calling code reads them.
+     */
+    dispatchWidgetEvent(name, detail = null) {
+        this.host.dispatchEvent(new CustomEvent(name, {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+    }
     applySessionToken(token) {
         var _a;
         this.currentSessionToken = token;
@@ -345,6 +363,38 @@ export class OcsChat {
         this.clearSessionStorage();
         this.addErrorMessage(this.translationManager.get('status.sessionExpired', 'Your chat session expired. Starting a new chat — please resend your message.'));
     }
+    /**
+     * The server reported the session has ended (e.g. closed from another tab or
+     * by the bot). Polling has already stopped; disable the composer and tell the
+     * user. Unbound widgets can recover via the "new chat" button (clearSession).
+     */
+    handleSessionEnded() {
+        var _a;
+        if (this.sessionEnded) {
+            return;
+        }
+        this.sessionEnded = true;
+        this.dispatchWidgetEvent('ocs:session:ended', { sessionId: this.activeSessionId });
+        this.stopMessagePolling();
+        this.isTyping = false;
+        this.typingProgressMessage = '';
+        const content = (_a = this.translationManager.get('status.chatEnded')) !== null && _a !== void 0 ? _a : 'This chat has ended.';
+        // An unbound widget restores persisted messages and re-polls after a reload,
+        // so the notice may already be the last message.
+        const last = this.messages.at(-1);
+        if ((last === null || last === void 0 ? void 0 : last.role) === 'system' && last.content === content) {
+            return;
+        }
+        const notice = {
+            created_at: new Date().toISOString(),
+            role: 'system',
+            content,
+            attachments: [],
+        };
+        this.messages = [...this.messages, notice];
+        this.saveSessionToStorage();
+        this.scrollToBottom();
+    }
     handleError(errorText) {
         // show as system message
         this.addErrorMessage(errorText);
@@ -443,6 +493,7 @@ export class OcsChat {
             this.activeSessionId = data.session_id;
             this.applySessionToken((_a = data.session_token) !== null && _a !== void 0 ? _a : undefined);
             this.saveSessionToStorage();
+            this.dispatchWidgetEvent('ocs:session:started', { sessionId: this.activeSessionId });
             this.startMessagePolling();
         }
         catch (_error) {
@@ -506,7 +557,8 @@ export class OcsChat {
         }
     }
     async sendMessage(message) {
-        if (!message.trim())
+        var _a;
+        if (!message.trim() || this.sessionEnded)
             return;
         const epoch = this.sessionEpoch;
         // Start session if we don't have one yet
@@ -568,6 +620,12 @@ export class OcsChat {
                 this.selectedFiles = []; // Clear selected files after sending
             }
             this.scrollToBottom();
+            // Fire before-send first so handlers can update pageContext synchronously
+            // before we read internalPageContext into the request body.
+            this.dispatchWidgetEvent('ocs:message:before-send', {
+                message: message.trim(),
+                sessionId: (_a = this.activeSessionId) !== null && _a !== void 0 ? _a : '',
+            });
             const requestBody = { message: message.trim() };
             if (this.allowAttachments && attachmentIds.length > 0) {
                 requestBody.attachment_ids = attachmentIds;
@@ -585,6 +643,10 @@ export class OcsChat {
                 throw new Error(data.error || 'Failed to send message');
             }
             this.internalPageContext = undefined;
+            this.dispatchWidgetEvent('ocs:message:sent', {
+                message: message.trim(),
+                sessionId: this.activeSessionId,
+            });
             this.startTaskPolling(data.task_id);
         }
         catch (error) {
@@ -700,6 +762,7 @@ export class OcsChat {
             return;
         }
         this.saveVisibleState(visible);
+        this.dispatchWidgetEvent(visible ? 'ocs:open' : 'ocs:close');
         if (this.isButtonDragging) {
             this.isButtonDragging = false;
             this.buttonWasDragged = false;
@@ -736,8 +799,13 @@ export class OcsChat {
         }
         this.taskPollingHandle = this.getChatService().pollTask(this.activeSessionId, taskId, {
             onMessage: message => {
+                var _a;
                 this.messages = [...this.messages, message];
                 this.saveSessionToStorage();
+                this.dispatchWidgetEvent('ocs:message:received', {
+                    message: Object.assign({}, message),
+                    sessionId: (_a = this.activeSessionId) !== null && _a !== void 0 ? _a : '',
+                });
                 this.scrollToBottom();
                 this.isTyping = false;
                 this.typingProgressMessage = '';
@@ -779,7 +847,7 @@ export class OcsChat {
         });
     }
     startMessagePolling() {
-        if (!this.activeSessionId || this.currentPollTaskId || !this.visible) {
+        if (!this.activeSessionId || this.currentPollTaskId || !this.visible || this.sessionEnded) {
             return;
         }
         if (this.messagePollingHandle) {
@@ -788,13 +856,26 @@ export class OcsChat {
         this.messagePollingHandle = this.getChatService().startMessagePolling(this.activeSessionId, {
             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 => {
+                var _a;
                 if (messages.length === 0)
                     return;
                 this.messages = [...this.messages, ...messages];
                 this.saveSessionToStorage();
+                for (const message of messages) {
+                    if (message.role !== 'user') {
+                        this.dispatchWidgetEvent('ocs:message:received', {
+                            message: Object.assign({}, message),
+                            sessionId: (_a = this.activeSessionId) !== null && _a !== void 0 ? _a : '',
+                        });
+                    }
+                }
                 this.scrollToBottom();
                 this.focusInput();
             },
+            onSessionEnded: () => {
+                this.messagePollingHandle = undefined;
+                this.handleSessionEnded();
+            },
             onError: () => {
                 // Silently ignore polling errors to match previous behaviour
             },
@@ -1233,7 +1314,9 @@ export class OcsChat {
         return newUserId;
     }
     saveVisibleState(visible) {
-        if (!this.persistentSession)
+        // Kiosk visibility is forced, so persisting it would only leak into a
+        // standard-mode widget for the same chatbot on another page.
+        if (!this.persistentSession || this.isKioskMode())
             return;
         try {
             const keys = this.getStorageKeys();
@@ -1307,6 +1390,7 @@ export class OcsChat {
         this.applySessionToken(this.isSessionBound() ? this.sessionToken : undefined);
         this.messages = [];
         this.isTyping = false;
+        this.sessionEnded = false;
         this.currentPollTaskId = '';
         if (this.allowAttachments) {
             this.selectedFiles = [];
@@ -1328,12 +1412,12 @@ export class OcsChat {
         if (this.error && !this.activeSessionId) {
             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() }, !this.isKioskMode() && (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 && !this.isSessionBound() && (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.isKioskMode() && 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.activeSessionId && (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.getWelcomeMessages().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.typingProgressMessage || this.translationManager.get('status.typing', this.typingIndicatorText)), h("span", { class: "typing-dots loading" }))))), this.messages.length === 0 && this.getStarterQuestions().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)))))))), 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.isLoading }), this.allowAttachments && (h("input", { ref: el => {
+        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() }, !this.isKioskMode() && (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 && !this.isSessionBound() && (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.isKioskMode() && 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.activeSessionId && (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.getWelcomeMessages().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.typingProgressMessage || this.translationManager.get('status.typing', this.typingIndicatorText)), h("span", { class: "typing-dots loading" }))))), this.messages.length === 0 && this.getStarterQuestions().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)))))))), h("div", { class: "input-area" }, h("div", { class: "input-container" }, h("textarea", { ref: el => (this.textareaRef = el), class: "message-textarea", rows: 1, placeholder: this.sessionEnded ? this.translationManager.get('status.chatEnded') : 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.sessionEnded }), 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(',') + ',text/*', 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 || this.isLoading, title: this.translationManager.get('attach.add'), "aria-label": this.translationManager.get('attach.add') }, h(PaperClipIcon, null))), 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.isLoading || !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", rel: "noopener noreferrer" }, "Dimagi"))))))));
+            }, id: "ocs-file-input", type: "file", multiple: true, accept: OcsChat.SUPPORTED_FILE_EXTENSIONS.join(',') + ',text/*', 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 || this.isLoading || this.sessionEnded, title: this.translationManager.get('attach.add'), "aria-label": this.translationManager.get('attach.add') }, h(PaperClipIcon, null))), h("button", { class: `send-button ${!this.isTyping && !this.isLoading && !this.sessionEnded && !!this.messageInput.trim() ? 'send-button-enabled' : 'send-button-disabled'}`, onClick: () => this.sendMessage(this.messageInput), disabled: this.isTyping || this.isUploadingFiles || this.isLoading || this.sessionEnded || !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", rel: "noopener noreferrer" }, "Dimagi"))))))));
     }
     static get is() { return "open-chat-studio-widget"; }
     static get encapsulation() { return "shadow"; }
@@ -1900,6 +1984,7 @@ export class OcsChat {
             "generatedUserId": {},
             "isFullscreen": {},
             "showNewChatConfirmation": {},
+            "sessionEnded": {},
             "selectedFiles": {},
             "isUploadingFiles": {},
             "isButtonDragging": {},