open-chat-studio-widget 0.7.0 → 0.9.0

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

@@ -4,7 +4,7 @@ import { XMarkIcon, GripDotsVerticalIcon, PlusWithCircleIcon, ArrowsPointingOutI
 import { renderMarkdownSync as renderMarkdownComplete } from "../../utils/markdown";
 import { varToPixels } from "../../utils/utils";
 import { TranslationManager, defaultTranslations } from "../../utils/translations";
-import { ChatSessionService } from "../../services/chat-session-service";
+import { ChatSessionService, SessionAccessError } from "../../services/chat-session-service";
 import { FileAttachmentManager } from "../../services/file-attachment-manager";
 export class OcsChat {
     constructor() {
@@ -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,12 +234,18 @@ export class OcsChat {
             this.visible = true;
         }
         await this.initializeTranslations();
-        // Always try to load existing session if localStorage is available
-        if (this.persistentSession && this.isLocalStorageAvailable()) {
-            const { sessionId, messages } = this.loadSessionFromStorage();
+        if (this.isSessionBound()) {
+            // Bound to an externally-managed session: the host page is the source of truth.
+            this.activeSessionId = this.sessionId;
+            this.applySessionToken(this.sessionToken);
+        }
+        else if (this.persistentSession && this.isLocalStorageAvailable()) {
+            // Always try to load existing session if localStorage is available
+            const { sessionId, messages, sessionToken } = this.loadSessionFromStorage();
             if (sessionId && messages) {
-                this.sessionId = sessionId;
+                this.activeSessionId = sessionId;
                 this.messages = messages;
+                this.applySessionToken(sessionToken);
             }
         }
         this.parseWelcomeMessages();
@@ -270,8 +277,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);
@@ -282,6 +294,11 @@ export class OcsChat {
         this.removeButtonEventListeners();
         window.removeEventListener('resize', this.handleWindowResize);
     }
+    applySessionToken(token) {
+        var _a;
+        this.currentSessionToken = token;
+        (_a = this.chatService) === null || _a === void 0 ? void 0 : _a.setSessionToken(token);
+    }
     getChatService() {
         if (!this.chatService) {
             this.chatService = new ChatSessionService({
@@ -291,6 +308,7 @@ export class OcsChat {
                 taskPollingIntervalMs: OcsChat.TASK_POLLING_INTERVAL_MS,
                 taskPollingMaxAttempts: OcsChat.TASK_POLLING_MAX_ATTEMPTS,
                 messagePollingIntervalMs: OcsChat.MESSAGE_POLLING_INTERVAL_MS,
+                sessionToken: this.currentSessionToken,
             });
         }
         return this.chatService;
@@ -306,6 +324,27 @@ export class OcsChat {
         this.saveSessionToStorage();
         this.scrollToBottom();
     }
+    /**
+     * Recover from a rejected session token (403). Unbound widgets discard the
+     * dead session/token, show a notice, and start fresh on the next send; bound
+     * widgets cannot restart a host-owned session, so they surface an error.
+     */
+    handleSessionAccessError() {
+        this.cleanup();
+        this.isLoading = false;
+        this.isTyping = false;
+        this.isUploadingFiles = false;
+        this.typingProgressMessage = '';
+        if (this.isSessionBound()) {
+            this.addErrorMessage(this.translationManager.get('status.sessionError', 'This chat session is no longer available.'));
+            return;
+        }
+        this.sessionEpoch += 1;
+        this.activeSessionId = undefined;
+        this.applySessionToken(undefined);
+        this.clearSessionStorage();
+        this.addErrorMessage(this.translationManager.get('status.sessionExpired', 'Your chat session expired. Starting a new chat — please resend your message.'));
+    }
     handleError(errorText) {
         // show as system message
         this.addErrorMessage(errorText);
@@ -378,12 +417,14 @@ export class OcsChat {
         this.currentPollTaskId = '';
     }
     async startSession() {
+        var _a;
         const epoch = this.sessionEpoch;
         try {
             this.isLoading = true;
             const userId = this.getOrGenerateUserId();
             const requestBody = {
                 chatbot_id: this.chatbotId,
+                use_session_token: true,
                 session_data: {
                     source: 'widget',
                     page_url: window.location.href,
@@ -399,7 +440,8 @@ 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.applySessionToken((_a = data.session_token) !== null && _a !== void 0 ? _a : undefined);
             this.saveSessionToStorage();
             this.startMessagePolling();
         }
@@ -412,19 +454,51 @@ 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;
+            if (error instanceof SessionAccessError) {
+                this.handleSessionAccessError();
+                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,
+                sessionToken: this.currentSessionToken,
             });
             this.selectedFiles = uploadResult.selectedFiles;
+            if (uploadResult.tokenRejected) {
+                throw new SessionAccessError(403, 'session_token_required', uploadResult.errorMessage || 'Session token rejected');
+            }
             return uploadResult.uploadedIds;
         }
         finally {
@@ -436,14 +510,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 +578,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') {
@@ -516,6 +590,10 @@ export class OcsChat {
         catch (error) {
             if (epoch !== this.sessionEpoch)
                 return;
+            if (error instanceof SessionAccessError) {
+                this.handleSessionAccessError();
+                return;
+            }
             const errorText = error instanceof Error ? error.message : 'Failed to send message';
             this.handleError(errorText);
         }
@@ -632,9 +710,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 +726,7 @@ export class OcsChat {
         }
     }
     startTaskPolling(taskId) {
-        if (!this.sessionId)
+        if (!this.activeSessionId)
             return;
         this.currentPollTaskId = taskId;
         this.isTyping = true;
@@ -650,7 +734,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();
@@ -684,20 +768,24 @@ export class OcsChat {
             },
             onError: error => {
                 this.typingProgressMessage = '';
-                this.handleError(error.message);
                 this.taskPollingHandle = undefined;
+                if (error instanceof SessionAccessError) {
+                    this.handleSessionAccessError();
+                    return;
+                }
+                this.handleError(error.message);
                 this.startMessagePolling();
             },
         });
     }
     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)
@@ -1047,17 +1135,24 @@ export class OcsChat {
             messages: `ocs-chat-messages-${this.chatbotId}`,
             lastActivity: `ocs-chat-activity-${this.chatbotId}`,
             visible: `ocs-chat-visible-${this.chatbotId}`,
+            sessionToken: `ocs-chat-token-${this.chatbotId}`,
         };
     }
     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());
+                if (this.currentSessionToken) {
+                    localStorage.setItem(keys.sessionToken, this.currentSessionToken);
+                }
+                else {
+                    localStorage.removeItem(keys.sessionToken);
+                }
             }
             localStorage.setItem(keys.messages, JSON.stringify(this.messages));
         }
@@ -1066,6 +1161,7 @@ export class OcsChat {
         }
     }
     loadSessionFromStorage() {
+        var _a;
         const keys = this.getStorageKeys();
         try {
             if (this.persistentSessionExpire > 0) {
@@ -1093,7 +1189,8 @@ export class OcsChat {
                     messages = [];
                 }
             }
-            return { sessionId, messages };
+            const sessionToken = (_a = localStorage.getItem(keys.sessionToken)) !== null && _a !== void 0 ? _a : undefined;
+            return { sessionId, messages, sessionToken };
         }
         catch (error) {
             // fall back to starting a new session
@@ -1165,6 +1262,7 @@ export class OcsChat {
             localStorage.removeItem(keys.messages);
             localStorage.removeItem(keys.lastActivity);
             localStorage.removeItem(keys.visible);
+            localStorage.removeItem(keys.sessionToken);
         }
         catch (error) {
             console.warn('Failed to clear chat session from localStorage:', error);
@@ -1173,6 +1271,9 @@ export class OcsChat {
     isKioskMode() {
         return this.mode === 'kiosk';
     }
+    isSessionBound() {
+        return !!this.sessionId;
+    }
     isLocalStorageAvailable() {
         try {
             localStorage.setItem(OcsChat.LOCALSTORAGE_TEST_KEY, 'test');
@@ -1200,7 +1301,10 @@ 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.applySessionToken(this.isSessionBound() ? this.sessionToken : undefined);
         this.messages = [];
         this.isTyping = false;
         this.currentPollTaskId = '';
@@ -1208,6 +1312,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 +1325,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 +1672,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 +1840,44 @@ 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
+            },
+            "sessionToken": {
+                "type": "string",
+                "attribute": "session-token",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A session token proving access to the session named by `session-id`. Host\npages that create the session server-side pass a server-minted token here so\nthe widget can authenticate its requests. Only meaningful with `session-id`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
@@ -1738,7 +1885,7 @@ export class OcsChat {
         return {
             "error": {},
             "messages": {},
-            "sessionId": {},
+            "activeSessionId": {},
             "isLoading": {},
             "isTyping": {},
             "typingProgressMessage": {},