open-chat-studio-widget 0.7.0 → 0.8.0

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

@@ -38,6 +38,7 @@ export class OcsChat {
         this.position = 'right';
         /**
          * Whether to persist session data to local storage to allow resuming previous conversations after page reload.
+         * Ignored when `sessionId` is provided.
          */
         this.persistentSession = true;
         /**
@@ -233,11 +234,15 @@ export class OcsChat {
             this.visible = true;
         }
         await this.initializeTranslations();
-        // Always try to load existing session if localStorage is available
-        if (this.persistentSession && this.isLocalStorageAvailable()) {
+        if (this.isSessionBound()) {
+            // Bound to an externally-managed session: the host page is the source of truth.
+            this.activeSessionId = this.sessionId;
+        }
+        else if (this.persistentSession && this.isLocalStorageAvailable()) {
+            // Always try to load existing session if localStorage is available
             const { sessionId, messages } = this.loadSessionFromStorage();
             if (sessionId && messages) {
-                this.sessionId = sessionId;
+                this.activeSessionId = sessionId;
                 this.messages = messages;
             }
         }
@@ -270,8 +275,13 @@ export class OcsChat {
                 }
             }
             // Resume polling for existing session (don't auto-start new sessions)
-            if (this.visible && this.sessionId) {
-                this.startMessagePolling();
+            if (this.visible && this.activeSessionId) {
+                if (this.isSessionBound()) {
+                    void this.loadBoundSessionHistory();
+                }
+                else {
+                    this.startMessagePolling();
+                }
             }
         }, 0);
         window.addEventListener('resize', this.handleWindowResize);
@@ -399,7 +409,7 @@ export class OcsChat {
             const data = await this.getChatService().startSession(requestBody);
             if (epoch !== this.sessionEpoch)
                 return;
-            this.sessionId = data.session_id;
+            this.activeSessionId = data.session_id;
             this.saveSessionToStorage();
             this.startMessagePolling();
         }
@@ -412,15 +422,39 @@ export class OcsChat {
             this.isLoading = false;
         }
     }
+    /**
+     * Load the full message history for a session provided via the `session-id`
+     * prop, then begin regular polling.
+     */
+    async loadBoundSessionHistory() {
+        const epoch = this.sessionEpoch;
+        try {
+            const history = await this.getChatService().fetchAllMessages(this.activeSessionId);
+            if (epoch !== this.sessionEpoch)
+                return;
+            // Keep messages added while the history was loading (e.g. an optimistic
+            // user message) by appending any that aren't part of the fetched history.
+            const known = new Set(history.map(m => `${m.created_at}|${m.role}|${m.content}`));
+            const pending = this.messages.filter(m => !known.has(`${m.created_at}|${m.role}|${m.content}`));
+            this.messages = [...history, ...pending];
+            this.scrollToBottom(true);
+        }
+        catch (error) {
+            if (epoch !== this.sessionEpoch)
+                return;
+            console.warn('Failed to load chat history:', error);
+        }
+        this.startMessagePolling();
+    }
     async uploadFiles() {
-        if (this.selectedFiles.length === 0 || !this.sessionId || !this.allowAttachments) {
+        if (this.selectedFiles.length === 0 || !this.activeSessionId || !this.allowAttachments) {
             return [];
         }
         this.isUploadingFiles = true;
         try {
             const uploadResult = await this.attachmentManager.uploadPendingFiles(this.selectedFiles, {
                 apiBaseUrl: this.apiBaseUrl || 'https://www.openchatstudio.com',
-                sessionId: this.sessionId,
+                sessionId: this.activeSessionId,
                 participantId: this.getOrGenerateUserId(),
                 participantName: this.userName,
             });
@@ -436,14 +470,14 @@ export class OcsChat {
             return;
         const epoch = this.sessionEpoch;
         // Start session if we don't have one yet
-        if (!this.sessionId) {
+        if (!this.activeSessionId) {
             // Prevent concurrent session initialization
             if (this.isLoading) {
                 return;
             }
             await this.startSession();
             // Check if session started successfully
-            if (!this.sessionId) {
+            if (!this.activeSessionId) {
                 return; // startSession already handled the error
             }
         }
@@ -504,7 +538,7 @@ export class OcsChat {
             if (this.versionNumber != null) {
                 requestBody.version_number = this.versionNumber;
             }
-            const data = await this.getChatService().sendMessage(this.sessionId, requestBody);
+            const data = await this.getChatService().sendMessage(this.activeSessionId, requestBody);
             if (epoch !== this.sessionEpoch)
                 return;
             if (data.status === 'error') {
@@ -632,9 +666,15 @@ export class OcsChat {
                 this.initializePosition();
             }
             // Resume polling for existing session (don't auto-start new sessions)
-            if (this.sessionId) {
+            if (this.activeSessionId) {
                 this.scrollToBottom(true);
-                this.startMessagePolling();
+                if (this.isSessionBound() && this.messages.length === 0) {
+                    // A bound widget that was hidden at load has not fetched its history yet.
+                    void this.loadBoundSessionHistory();
+                }
+                else {
+                    this.startMessagePolling();
+                }
             }
         }
         else {
@@ -642,7 +682,7 @@ export class OcsChat {
         }
     }
     startTaskPolling(taskId) {
-        if (!this.sessionId)
+        if (!this.activeSessionId)
             return;
         this.currentPollTaskId = taskId;
         this.isTyping = true;
@@ -650,7 +690,7 @@ export class OcsChat {
         if (this.taskPollingHandle) {
             this.taskPollingHandle.cancel();
         }
-        this.taskPollingHandle = this.getChatService().pollTask(this.sessionId, taskId, {
+        this.taskPollingHandle = this.getChatService().pollTask(this.activeSessionId, taskId, {
             onMessage: message => {
                 this.messages = [...this.messages, message];
                 this.saveSessionToStorage();
@@ -691,13 +731,13 @@ export class OcsChat {
         });
     }
     startMessagePolling() {
-        if (!this.sessionId || this.currentPollTaskId || !this.visible) {
+        if (!this.activeSessionId || this.currentPollTaskId || !this.visible) {
             return;
         }
         if (this.messagePollingHandle) {
             return;
         }
-        this.messagePollingHandle = this.getChatService().startMessagePolling(this.sessionId, {
+        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 => {
                 if (messages.length === 0)
@@ -1050,13 +1090,13 @@ export class OcsChat {
         };
     }
     saveSessionToStorage() {
-        if (!this.persistentSession) {
+        if (!this.persistentSession || this.isSessionBound()) {
             return;
         }
         const keys = this.getStorageKeys();
         try {
-            if (this.sessionId) {
-                localStorage.setItem(keys.sessionId, this.sessionId);
+            if (this.activeSessionId) {
+                localStorage.setItem(keys.sessionId, this.activeSessionId);
                 localStorage.setItem(keys.lastActivity, new Date().toISOString());
             }
             localStorage.setItem(keys.messages, JSON.stringify(this.messages));
@@ -1173,6 +1213,9 @@ export class OcsChat {
     isKioskMode() {
         return this.mode === 'kiosk';
     }
+    isSessionBound() {
+        return !!this.sessionId;
+    }
     isLocalStorageAvailable() {
         try {
             localStorage.setItem(OcsChat.LOCALSTORAGE_TEST_KEY, 'test');
@@ -1200,7 +1243,9 @@ export class OcsChat {
     async clearSession() {
         this.sessionEpoch += 1;
         this.clearSessionStorage();
-        this.sessionId = undefined;
+        // A session provided by the host page (session-id prop) cannot be cleared;
+        // stay bound to it. Unbound widgets start a new session on the next message.
+        this.activeSessionId = this.sessionId;
         this.messages = [];
         this.isTyping = false;
         this.currentPollTaskId = '';
@@ -1208,6 +1253,11 @@ export class OcsChat {
             this.selectedFiles = [];
         }
         this.cleanup();
+        if (this.isSessionBound()) {
+            // The host-owned session cannot be cleared: reload its history and
+            // resume polling so the widget doesn't end up in a dead state.
+            void this.loadBoundSessionHistory();
+        }
     }
     toggleFullscreen() {
         this.isFullscreen = !this.isFullscreen;
@@ -1216,10 +1266,10 @@ export class OcsChat {
     }
     render() {
         // Only show error state for critical errors that prevent the widget from functioning
-        if (this.error && !this.sessionId) {
+        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 && (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.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.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.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 => {
                 // Unclear why but after removing all attachments this is being set to `null`.
                 if (el) {
                     this.fileInputRef = el;
@@ -1563,7 +1613,7 @@ export class OcsChat {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to persist session data to local storage to allow resuming previous conversations after page reload."
+                    "text": "Whether to persist session data to local storage to allow resuming previous conversations after page reload.\nIgnored when `sessionId` is provided."
                 },
                 "getter": false,
                 "setter": false,
@@ -1731,6 +1781,25 @@ export class OcsChat {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "sessionId": {
+                "type": "string",
+                "attribute": "session-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of an existing chat session to connect to. When provided, the widget\nis bound to that session: local session persistence is disabled and the\nmessage history is loaded from the server. Intended for host pages that\ncreate the session server-side (e.g. the OCS web chat page)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
@@ -1738,7 +1807,7 @@ export class OcsChat {
         return {
             "error": {},
             "messages": {},
-            "sessionId": {},
+            "activeSessionId": {},
             "isLoading": {},
             "isTyping": {},
             "typingProgressMessage": {},