open-chat-studio-widget 0.6.0 → 0.7.0

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

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Host, h, Env } from "@stencil/core";
-import { XMarkIcon, GripDotsVerticalIcon, PlusWithCircleIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, PaperClipIcon, CheckDocumentIcon, XIcon, OcsWidgetAvatar } from "./icons";
+import { XMarkIcon, GripDotsVerticalIcon, PlusWithCircleIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, PaperClipIcon, CheckDocumentIcon, XIcon, OcsWidgetAvatar, } from "./icons";
 import { renderMarkdownSync as renderMarkdownComplete } from "../../utils/markdown";
 import { varToPixels } from "../../utils/utils";
 import { TranslationManager, defaultTranslations } from "../../utils/translations";
@@ -11,11 +11,23 @@ export class OcsChat {
         /**
          * The base URL for the API.
          */
-        this.apiBaseUrl = "https://www.openchatstudio.com";
+        this.apiBaseUrl = 'https://www.openchatstudio.com';
         /**
          * The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
          */
         this.buttonShape = 'square';
+        /**
+         * Whether to show the launcher button. Set to false to hide the button
+         * and open the chat window programmatically via the `visible` property.
+         */
+        this.showButton = true;
+        /**
+         * The operating mode of the widget.
+         * - 'standard': Default floating window with launcher button.
+         * - 'kiosk': Fills parent container, always visible, no header or launcher button.
+         *   The parent element must establish a containing block (e.g. `position: relative`).
+         */
+        this.mode = 'standard';
         /**
          * Whether the chat widget is visible on load.
          */
@@ -41,12 +53,13 @@ export class OcsChat {
          * Allow the user to attach files to their messages.
          */
         this.allowAttachments = false;
-        this.error = "";
+        this.error = '';
         this.messages = [];
         this.isLoading = false;
         this.isTyping = false;
-        this.messageInput = "";
-        this.currentPollTaskId = "";
+        this.typingProgressMessage = '';
+        this.messageInput = '';
+        this.currentPollTaskId = '';
         this.isDragging = false;
         this.dragOffset = { x: 0, y: 0 };
         this.windowPosition = { x: 0, y: 0 };
@@ -75,6 +88,7 @@ export class OcsChat {
         this.chatWindowWidth = 450;
         this.chatWindowFullscreenWidth = 1024;
         this.positionInitialized = false;
+        this.sessionEpoch = 0;
         this.handleMouseDown = (event) => {
             if (!this.isFullscreen && window.innerWidth < OcsChat.MOBILE_BREAKPOINT)
                 return;
@@ -120,6 +134,8 @@ export class OcsChat {
         };
         this.handleWindowResize = () => {
             var _a, _b;
+            if (this.isKioskMode())
+                return;
             this.positionInitialized = false;
             this.initializePosition();
             // Revalidate button position after resize to keep it within viewport bounds
@@ -131,7 +147,7 @@ export class OcsChat {
                 const minPadding = 10;
                 this.buttonPosition = {
                     x: Math.max(minPadding, Math.min(this.buttonPosition.x, windowWidth - buttonWidth - minPadding)),
-                    y: Math.max(minPadding, Math.min(this.buttonPosition.y, windowHeight - buttonHeight - minPadding))
+                    y: Math.max(minPadding, Math.min(this.buttonPosition.y, windowHeight - buttonHeight - minPadding)),
                 };
                 this.updateHostPosition();
             }
@@ -149,7 +165,7 @@ export class OcsChat {
             const rect = this.host.getBoundingClientRect();
             this.buttonDragOffset = {
                 x: pointer.clientX - rect.left,
-                y: pointer.clientY - rect.top
+                y: pointer.clientY - rect.top,
             };
             this.addButtonEventListeners();
         };
@@ -166,7 +182,7 @@ export class OcsChat {
             const rect = this.host.getBoundingClientRect();
             this.buttonDragOffset = {
                 x: pointer.clientX - rect.left,
-                y: pointer.clientY - rect.top
+                y: pointer.clientY - rect.top,
             };
             this.addButtonEventListeners();
         };
@@ -213,6 +229,9 @@ export class OcsChat {
             this.error = 'Chatbot ID is required';
             return;
         }
+        if (this.isKioskMode()) {
+            this.visible = true;
+        }
         await this.initializeTranslations();
         // Always try to load existing session if localStorage is available
         if (this.persistentSession && this.isLocalStorageAvailable()) {
@@ -235,11 +254,20 @@ export class OcsChat {
         this.chatWindowWidth = varToPixels(windowWidthVar, window.innerWidth, this.chatWindowWidth);
         this.chatWindowFullscreenWidth = varToPixels(fullscreenWidthVar, window.innerWidth, this.chatWindowFullscreenWidth);
         // Initialize button position from computed styles
-        this.initializeButtonPosition();
-        // Defer position initialization to avoid state changes during componentDidLoad
+        if (this.showButton && !this.isKioskMode()) {
+            this.initializeButtonPosition();
+        }
+        // Defer state changes to avoid triggering them during componentDidLoad
         setTimeout(() => {
+            // Restore visible state after dimensions are read so initializePosition
+            // uses the correct CSS-derived chatWindowWidth/chatWindowHeight.
+            if (!this.isKioskMode() && this.showButton && this.persistentSession && this.isLocalStorageAvailable()) {
+                this.restoreVisibleState();
+            }
             if (this.visible) {
-                this.initializePosition();
+                if (!this.isKioskMode()) {
+                    this.initializePosition();
+                }
             }
             // Resume polling for existing session (don't auto-start new sessions)
             if (this.visible && this.sessionId) {
@@ -272,7 +300,7 @@ export class OcsChat {
             created_at: new Date().toISOString(),
             role: 'system',
             content: `**Error:** ${errorText}\nPlease try again.`,
-            attachments: []
+            attachments: [],
         };
         this.messages = [...this.messages, errorMessage];
         this.saveSessionToStorage();
@@ -322,7 +350,7 @@ export class OcsChat {
             return;
         }
         if (typeof this.pageContext !== 'object' || Array.isArray(this.pageContext)) {
-            console.error("pageContext is expected to be a plain JavaScript object.");
+            console.error('pageContext is expected to be a plain JavaScript object.');
             return;
         }
         this.internalPageContext = this.pageContext;
@@ -350,6 +378,7 @@ export class OcsChat {
         this.currentPollTaskId = '';
     }
     async startSession() {
+        const epoch = this.sessionEpoch;
         try {
             this.isLoading = true;
             const userId = this.getOrGenerateUserId();
@@ -357,19 +386,26 @@ export class OcsChat {
                 chatbot_id: this.chatbotId,
                 session_data: {
                     source: 'widget',
-                    page_url: window.location.href
+                    page_url: window.location.href,
                 },
-                participant_remote_id: userId
+                participant_remote_id: userId,
             };
             if (this.userName) {
                 requestBody.participant_name = this.userName;
             }
+            if (this.versionNumber != null) {
+                requestBody.version_number = this.versionNumber;
+            }
             const data = await this.getChatService().startSession(requestBody);
+            if (epoch !== this.sessionEpoch)
+                return;
             this.sessionId = data.session_id;
             this.saveSessionToStorage();
             this.startMessagePolling();
         }
         catch (_error) {
+            if (epoch !== this.sessionEpoch)
+                return;
             this.handleError('Failed to start chat session');
         }
         finally {
@@ -398,6 +434,7 @@ export class OcsChat {
     async sendMessage(message) {
         if (!message.trim())
             return;
+        const epoch = this.sessionEpoch;
         // Start session if we don't have one yet
         if (!this.sessionId) {
             // Prevent concurrent session initialization
@@ -431,7 +468,7 @@ export class OcsChat {
                     created_at: new Date(now.getTime() - (welcomeMessagesToAdd.length - index) * 1000).toISOString(),
                     role: 'assistant',
                     content: welcomeMsg,
-                    attachments: []
+                    attachments: [],
                 }));
                 this.messages = [...this.messages, ...welcomeMessages];
             }
@@ -440,13 +477,15 @@ export class OcsChat {
                 created_at: new Date().toISOString(),
                 role: 'user',
                 content: message.trim(),
-                attachments: this.allowAttachments ? this.selectedFiles
-                    .filter(sf => !sf.error && sf.uploaded)
-                    .map(sf => ({
-                    name: sf.file.name,
-                    content_type: sf.file.type,
-                    size: sf.file.size,
-                })) : []
+                attachments: this.allowAttachments
+                    ? this.selectedFiles
+                        .filter(sf => !sf.error && sf.uploaded)
+                        .map(sf => ({
+                        name: sf.file.name,
+                        content_type: sf.file.type,
+                        size: sf.file.size,
+                    }))
+                    : [],
             };
             this.messages = [...this.messages, userMessage];
             this.saveSessionToStorage();
@@ -462,7 +501,12 @@ export class OcsChat {
             if (this.internalPageContext) {
                 requestBody.context = this.internalPageContext;
             }
+            if (this.versionNumber != null) {
+                requestBody.version_number = this.versionNumber;
+            }
             const data = await this.getChatService().sendMessage(this.sessionId, requestBody);
+            if (epoch !== this.sessionEpoch)
+                return;
             if (data.status === 'error') {
                 throw new Error(data.error || 'Failed to send message');
             }
@@ -470,6 +514,8 @@ export class OcsChat {
             this.startTaskPolling(data.task_id);
         }
         catch (error) {
+            if (epoch !== this.sessionEpoch)
+                return;
             const errorText = error instanceof Error ? error.message : 'Failed to send message';
             this.handleError(errorText);
         }
@@ -492,10 +538,10 @@ export class OcsChat {
                     const childRect = lastChild.getBoundingClientRect();
                     const currentScrollTop = this.messageListRef.scrollTop;
                     const childTopRelativeToParent = childRect.top - parentRect.top;
-                    const targetScroll = currentScrollTop + childTopRelativeToParent - (parentRect.height / 2);
+                    const targetScroll = currentScrollTop + childTopRelativeToParent - parentRect.height / 2;
                     this.messageListRef.scrollTo({
                         top: targetScroll,
-                        behavior: 'smooth'
+                        behavior: 'smooth',
                     });
                 }
                 else {
@@ -540,10 +586,10 @@ export class OcsChat {
         const k = 1024;
         if (bytes < k * k) {
             // Less than 1MB, show in KB
-            return Math.round(bytes / k * 100) / 100 + ' KB';
+            return Math.round((bytes / k) * 100) / 100 + ' KB';
         }
         else {
-            return Math.round(bytes / (k * k) * 100) / 100 + ' MB';
+            return Math.round((bytes / (k * k)) * 100) / 100 + ' MB';
         }
     }
     formatTime(dateString) {
@@ -561,19 +607,30 @@ export class OcsChat {
     pageContextHandler() {
         this.loadInternalPageContext();
     }
+    async chatbotConfigHandler() {
+        await this.clearSession();
+    }
     /**
      * Watch for changes to the `visible` attribute and update accordingly.
      *
      * @param visible - The new value for the field.
      */
     async visibilityHandler(visible) {
+        // Kiosk mode is always visible
+        if (this.isKioskMode() && !visible) {
+            this.visible = true;
+            return;
+        }
+        this.saveVisibleState(visible);
         if (this.isButtonDragging) {
             this.isButtonDragging = false;
             this.buttonWasDragged = false;
             this.removeButtonEventListeners();
         }
         if (visible) {
-            this.initializePosition();
+            if (!this.isKioskMode()) {
+                this.initializePosition();
+            }
             // Resume polling for existing session (don't auto-start new sessions)
             if (this.sessionId) {
                 this.scrollToBottom(true);
@@ -594,37 +651,43 @@ export class OcsChat {
             this.taskPollingHandle.cancel();
         }
         this.taskPollingHandle = this.getChatService().pollTask(this.sessionId, taskId, {
-            onMessage: (message) => {
+            onMessage: message => {
                 this.messages = [...this.messages, message];
                 this.saveSessionToStorage();
                 this.scrollToBottom();
                 this.isTyping = false;
+                this.typingProgressMessage = '';
                 this.currentPollTaskId = '';
                 this.taskPollingHandle = undefined;
                 this.startMessagePolling();
                 this.focusInput();
             },
+            onProgress: message => {
+                this.typingProgressMessage = message;
+            },
             onTimeout: () => {
                 const timeoutMessage = {
                     created_at: new Date().toISOString(),
                     role: 'system',
                     content: 'The response is taking longer than expected. The system may be experiencing delays. Please try sending your message again.',
-                    attachments: []
+                    attachments: [],
                 };
                 this.messages = [...this.messages, timeoutMessage];
                 this.saveSessionToStorage();
                 this.scrollToBottom();
                 this.isTyping = false;
+                this.typingProgressMessage = '';
                 this.currentPollTaskId = '';
                 this.taskPollingHandle = undefined;
                 this.startMessagePolling();
                 this.focusInput();
             },
-            onError: (error) => {
+            onError: error => {
+                this.typingProgressMessage = '';
                 this.handleError(error.message);
                 this.taskPollingHandle = undefined;
                 this.startMessagePolling();
-            }
+            },
         });
     }
     startMessagePolling() {
@@ -635,8 +698,8 @@ export class OcsChat {
             return;
         }
         this.messagePollingHandle = this.getChatService().startMessagePolling(this.sessionId, {
-            getSince: () => { var _a; return this.messages.length > 0 ? (_a = this.messages.at(-1)) === null || _a === void 0 ? void 0 : _a.created_at : undefined; },
-            onMessages: (messages) => {
+            getSince: () => { var _a; return (this.messages.length > 0 ? (_a = this.messages.at(-1)) === null || _a === void 0 ? void 0 : _a.created_at : undefined); },
+            onMessages: messages => {
                 if (messages.length === 0)
                     return;
                 this.messages = [...this.messages, ...messages];
@@ -646,7 +709,7 @@ export class OcsChat {
             },
             onError: () => {
                 // Silently ignore polling errors to match previous behaviour
-            }
+            },
         });
     }
     stopMessagePolling() {
@@ -665,6 +728,9 @@ export class OcsChat {
         this.position = position;
     }
     getPositionClasses() {
+        if (this.isKioskMode()) {
+            return 'chat-window-kiosk';
+        }
         if (this.isFullscreen) {
             return 'chat-window-fullscreen';
         }
@@ -680,6 +746,9 @@ export class OcsChat {
         return { windowWidth, actualChatWidth, centeredX, maxOffset };
     }
     getPositionStyles() {
+        if (this.isKioskMode()) {
+            return {};
+        }
         if (this.isFullscreen) {
             const { centeredX } = this.getFullscreenBounds();
             const finalX = centeredX + this.fullscreenPosition.x;
@@ -711,19 +780,19 @@ export class OcsChat {
             case 'left':
                 this.windowPosition = {
                     x: OcsChat.WINDOW_MARGIN,
-                    y: windowHeight - this.chatWindowHeight - OcsChat.WINDOW_MARGIN
+                    y: windowHeight - this.chatWindowHeight - OcsChat.WINDOW_MARGIN,
                 };
                 break;
             case 'right':
                 this.windowPosition = {
                     x: windowWidth - chatWidth - OcsChat.WINDOW_MARGIN,
-                    y: windowHeight - this.chatWindowHeight - OcsChat.WINDOW_MARGIN
+                    y: windowHeight - this.chatWindowHeight - OcsChat.WINDOW_MARGIN,
                 };
                 break;
             case 'center':
                 this.windowPosition = {
                     x: (windowWidth - chatWidth) / 2,
-                    y: (windowHeight - this.chatWindowHeight) / 2
+                    y: (windowHeight - this.chatWindowHeight) / 2,
                 };
                 break;
         }
@@ -746,14 +815,14 @@ export class OcsChat {
             // For fullscreen, track relative to current position
             this.dragOffset = {
                 x: pointer.clientX,
-                y: pointer.clientY
+                y: pointer.clientY,
             };
         }
         else {
             const rect = this.chatWindowRef.getBoundingClientRect();
             this.dragOffset = {
                 x: pointer.clientX - rect.left,
-                y: pointer.clientY - rect.top
+                y: pointer.clientY - rect.top,
             };
         }
     }
@@ -765,7 +834,7 @@ export class OcsChat {
             const { maxOffset } = this.getFullscreenBounds();
             const deltaX = pointer.clientX - this.dragOffset.x;
             this.fullscreenPosition = {
-                x: Math.max(-maxOffset, Math.min(maxOffset, deltaX))
+                x: Math.max(-maxOffset, Math.min(maxOffset, deltaX)),
             };
         }
         else {
@@ -778,7 +847,7 @@ export class OcsChat {
             const chatHeight = this.chatWindowRef.offsetHeight;
             this.windowPosition = {
                 x: Math.max(0, Math.min(newX, windowWidth - chatWidth)),
-                y: Math.max(0, Math.min(newY, windowHeight - chatHeight))
+                y: Math.max(0, Math.min(newY, windowHeight - chatHeight)),
             };
         }
     }
@@ -825,7 +894,7 @@ export class OcsChat {
         const verticalValue = this.buttonVerticalSide === 'top' ? resolvedTop : resolvedBottom;
         this.buttonPosition = {
             x: horizontalValue,
-            y: verticalValue
+            y: verticalValue,
         };
         // Apply the position to the host
         this.updateHostPosition();
@@ -868,12 +937,8 @@ export class OcsChat {
         const maxTop = windowHeight - buttonHeight - minPadding;
         const constrainedLeft = Math.max(minLeft, Math.min(candidateLeft, maxLeft));
         const constrainedTop = Math.max(minTop, Math.min(candidateTop, maxTop));
-        const newHorizontalValue = this.buttonHorizontalSide === 'left'
-            ? constrainedLeft
-            : Math.max(minPadding, windowWidth - (constrainedLeft + buttonWidth));
-        const newVerticalValue = this.buttonVerticalSide === 'top'
-            ? constrainedTop
-            : Math.max(minPadding, windowHeight - (constrainedTop + buttonHeight));
+        const newHorizontalValue = this.buttonHorizontalSide === 'left' ? constrainedLeft : Math.max(minPadding, windowWidth - (constrainedLeft + buttonWidth));
+        const newVerticalValue = this.buttonVerticalSide === 'top' ? constrainedTop : Math.max(minPadding, windowHeight - (constrainedTop + buttonHeight));
         if (newHorizontalValue !== this.buttonPosition.x || newVerticalValue !== this.buttonPosition.y) {
             this.buttonWasDragged = true;
             this.buttonPosition = { x: newHorizontalValue, y: newVerticalValue };
@@ -936,16 +1001,12 @@ export class OcsChat {
         return fallback;
     }
     getWelcomeMessages() {
-        const translated = this.translationManager.getArray("content.welcomeMessages");
-        return translated && translated.length > 0
-            ? translated
-            : this.parsedWelcomeMessages;
+        const translated = this.translationManager.getArray('content.welcomeMessages');
+        return translated && translated.length > 0 ? translated : this.parsedWelcomeMessages;
     }
     getStarterQuestions() {
-        const translated = this.translationManager.getArray("content.starterQuestions");
-        return translated && translated.length > 0
-            ? translated
-            : this.parsedStarterQuestions;
+        const translated = this.translationManager.getArray('content.starterQuestions');
+        return translated && translated.length > 0 ? translated : this.parsedStarterQuestions;
     }
     getButtonClasses() {
         const buttonText = this.translationManager.get('branding.buttonText', this.buttonText);
@@ -956,6 +1017,9 @@ export class OcsChat {
     }
     renderButton() {
         var _a;
+        if (!this.showButton || this.isKioskMode()) {
+            return null;
+        }
         const buttonText = this.translationManager.get('branding.buttonText', this.buttonText);
         const hasText = !!(buttonText && buttonText.trim());
         const hasCustomIcon = this.iconUrl && this.iconUrl.trim();
@@ -965,21 +1029,24 @@ export class OcsChat {
         const buttonAriaLabel = finalButtonText ? `${openLabel} - ${finalButtonText}` : openLabel;
         // Only show drag cursor if button is draggable
         const isDraggable = this.isButtonDraggable();
-        const buttonStyle = isDraggable ? {
-            cursor: this.isButtonDragging ? 'grabbing' : 'grab',
-        } : {};
+        const buttonStyle = isDraggable
+            ? {
+                cursor: this.isButtonDragging ? 'grabbing' : 'grab',
+            }
+            : {};
         if (hasText) {
-            return (h("button", { ref: (el) => this.buttonRef = el, class: buttonClasses, "aria-label": buttonAriaLabel, title: finalButtonText || openLabel, style: buttonStyle, onClick: () => this.handleButtonClick(), onMouseDown: (e) => this.handleButtonMouseDown(e), onTouchStart: (e) => this.handleButtonTouchStart(e), "aria-grabbed": this.isButtonDragging, "aria-describedby": isDraggable ? "chat-button-drag-hint" : undefined }, hasCustomIcon ? h("img", { src: this.iconUrl, alt: "" }) : h(OcsWidgetAvatar, null), h("span", null, finalButtonText), isDraggable && (h("span", { id: "chat-button-drag-hint", style: { display: 'none' } }, "Draggable. Use mouse or touch to reposition."))));
+            return (h("button", { ref: el => (this.buttonRef = el), class: buttonClasses, "aria-label": buttonAriaLabel, title: finalButtonText || openLabel, style: buttonStyle, onClick: () => this.handleButtonClick(), onMouseDown: e => this.handleButtonMouseDown(e), onTouchStart: e => this.handleButtonTouchStart(e), "aria-grabbed": this.isButtonDragging, "aria-describedby": isDraggable ? 'chat-button-drag-hint' : undefined }, hasCustomIcon ? h("img", { src: this.iconUrl, alt: "" }) : h(OcsWidgetAvatar, null), h("span", null, finalButtonText), isDraggable && (h("span", { id: "chat-button-drag-hint", style: { display: 'none' } }, "Draggable. Use mouse or touch to reposition."))));
         }
         else {
-            return (h("button", { ref: (el) => this.buttonRef = el, class: buttonClasses, "aria-label": openLabel, title: openLabel, style: buttonStyle, onClick: () => this.handleButtonClick(), onMouseDown: (e) => this.handleButtonMouseDown(e), onTouchStart: (e) => this.handleButtonTouchStart(e), "aria-grabbed": this.isButtonDragging, "aria-describedby": isDraggable ? "chat-button-drag-hint" : undefined }, hasCustomIcon ? h("img", { src: this.iconUrl, alt: "" }) : h(OcsWidgetAvatar, null), isDraggable && (h("span", { id: "chat-button-drag-hint", style: { display: 'none' } }, "Draggable. Use mouse or touch to reposition."))));
+            return (h("button", { ref: el => (this.buttonRef = el), class: buttonClasses, "aria-label": openLabel, title: openLabel, style: buttonStyle, onClick: () => this.handleButtonClick(), onMouseDown: e => this.handleButtonMouseDown(e), onTouchStart: e => this.handleButtonTouchStart(e), "aria-grabbed": this.isButtonDragging, "aria-describedby": isDraggable ? 'chat-button-drag-hint' : undefined }, hasCustomIcon ? h("img", { src: this.iconUrl, alt: "" }) : h(OcsWidgetAvatar, null), isDraggable && (h("span", { id: "chat-button-drag-hint", style: { display: 'none' } }, "Draggable. Use mouse or touch to reposition."))));
         }
     }
     getStorageKeys() {
         return {
             sessionId: `ocs-chat-session-${this.chatbotId}`,
             messages: `ocs-chat-messages-${this.chatbotId}`,
-            lastActivity: `ocs-chat-activity-${this.chatbotId}`
+            lastActivity: `ocs-chat-activity-${this.chatbotId}`,
+            visible: `ocs-chat-visible-${this.chatbotId}`,
         };
     }
     saveSessionToStorage() {
@@ -1042,30 +1109,70 @@ export class OcsChat {
             return this.generatedUserId;
         }
         const storageKey = `ocs-user-id`;
-        const stored = localStorage.getItem(storageKey);
+        let stored = null;
+        try {
+            stored = localStorage.getItem(storageKey);
+        }
+        catch (_a) {
+            // localStorage blocked; fall through to in-memory id generation
+        }
         if (stored) {
             this.generatedUserId = stored;
             return stored;
         }
         const array = new Uint8Array(9);
         window.crypto.getRandomValues(array);
-        const randomString = Array.from(array, byte => byte.toString(36)).join('').substr(0, 9);
+        const randomString = Array.from(array, byte => byte.toString(36))
+            .join('')
+            .substr(0, 9);
         const newUserId = `ocs:${Date.now()}_${randomString}`;
         this.generatedUserId = newUserId;
-        localStorage.setItem(storageKey, newUserId);
+        try {
+            localStorage.setItem(storageKey, newUserId);
+        }
+        catch (_b) {
+            // localStorage blocked; the generated id lives in component state for this page
+        }
         return newUserId;
     }
+    saveVisibleState(visible) {
+        if (!this.persistentSession)
+            return;
+        try {
+            const keys = this.getStorageKeys();
+            localStorage.setItem(keys.visible, visible ? '1' : '0');
+        }
+        catch (_a) {
+            // ignore
+        }
+    }
+    restoreVisibleState() {
+        try {
+            const keys = this.getStorageKeys();
+            const stored = localStorage.getItem(keys.visible);
+            if (stored === '1') {
+                this.visible = true;
+            }
+        }
+        catch (_a) {
+            // ignore
+        }
+    }
     clearSessionStorage() {
         const keys = this.getStorageKeys();
         try {
             localStorage.removeItem(keys.sessionId);
             localStorage.removeItem(keys.messages);
             localStorage.removeItem(keys.lastActivity);
+            localStorage.removeItem(keys.visible);
         }
         catch (error) {
             console.warn('Failed to clear chat session from localStorage:', error);
         }
     }
+    isKioskMode() {
+        return this.mode === 'kiosk';
+    }
     isLocalStorageAvailable() {
         try {
             localStorage.setItem(OcsChat.LOCALSTORAGE_TEST_KEY, 'test');
@@ -1091,6 +1198,7 @@ export class OcsChat {
      * will start when the user sends a message.
      */
     async clearSession() {
+        this.sessionEpoch += 1;
         this.clearSessionStorage();
         this.sessionId = undefined;
         this.messages = [];
@@ -1111,18 +1219,12 @@ export class OcsChat {
         if (this.error && !this.sessionId) {
             return (h(Host, null, h("p", { class: "error-message" }, this.error)));
         }
-        return (h(Host, null, this.renderButton(), this.visible && (h("div", { ref: (el) => this.chatWindowRef = el, id: "ocs-chat-window", class: this.getPositionClasses(), style: this.getPositionStyles() }, h("div", { class: `chat-header ${this.isDragging ? 'chat-header-dragging' : 'chat-header-draggable'}`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { class: "drag-indicator" }, h("div", { class: "drag-dots header-button" }, h(GripDotsVerticalIcon, null))), h("div", { class: "header-text" }, this.translationManager.get('branding.headerText', this.headerText)), h("div", { class: "header-buttons" }, this.messages.length > 0 && (h("button", { class: "header-button", onClick: () => this.showConfirmationDialog(), title: this.translationManager.get('window.newChat'), "aria-label": this.translationManager.get('window.newChat') }, h(PlusWithCircleIcon, null))), this.allowFullScreen && h("button", { class: "header-button fullscreen-button", onClick: () => this.toggleFullscreen(), title: this.isFullscreen ? this.translationManager.get('window.exitFullscreen') : this.translationManager.get('window.fullscreen'), "aria-label": this.isFullscreen ? this.translationManager.get('window.exitFullscreen') : this.translationManager.get('window.fullscreen') }, this.isFullscreen ? h(ArrowsPointingInIcon, null) : h(ArrowsPointingOutIcon, null)), h("button", { class: "header-button", onClick: () => this.visible = false, "aria-label": this.translationManager.get('window.close') }, h(XMarkIcon, null)))), this.showNewChatConfirmation && (h("div", { class: "confirmation-overlay" }, h("div", { class: "confirmation-dialog" }, h("div", { class: "confirmation-content" }, h("h3", { class: "confirmation-title" }, this.translationManager.get('modal.newChatTitle')), h("p", { class: "confirmation-message" }, this.translationManager.get('modal.newChatBody', this.newChatConfirmationMessage)), h("div", { class: "confirmation-buttons" }, h("button", { class: "confirmation-button confirmation-button-cancel", onClick: () => this.hideConfirmationDialog() }, this.translationManager.get('modal.cancel')), h("button", { class: "confirmation-button confirmation-button-confirm", onClick: () => this.confirmNewChat() }, this.translationManager.get('modal.confirm'))))))), h("div", { class: "chat-content" }, this.isLoading && !this.sessionId && (h("div", { class: "loading-container" }, h("div", { class: "loading-spinner" }), h("span", { class: "loading-text" }, this.translationManager.get('status.starting')))), (h("div", { ref: (el) => this.messageListRef = el, class: "messages-container" }, this.messages.length === 0 && this.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.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 && (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 => {
                 // 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" }, "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, 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"))))))));
     }
     static get is() { return "open-chat-studio-widget"; }
     static get encapsulation() { return "shadow"; }
@@ -1175,7 +1277,7 @@ export class OcsChat {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "\"https://www.openchatstudio.com\""
+                "defaultValue": "'https://www.openchatstudio.com'"
             },
             "buttonText": {
                 "type": "string",
@@ -1254,6 +1356,46 @@ export class OcsChat {
                 "reflect": false,
                 "defaultValue": "'square'"
             },
+            "showButton": {
+                "type": "boolean",
+                "attribute": "show-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the launcher button. Set to false to hide the button\nand open the chat window programmatically via the `visible` property."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "mode": {
+                "type": "string",
+                "attribute": "mode",
+                "mutable": false,
+                "complexType": {
+                    "original": "'standard' | 'kiosk'",
+                    "resolved": "\"kiosk\" | \"standard\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The operating mode of the widget.\n- 'standard': Default floating window with launcher button.\n- 'kiosk': Fills parent container, always visible, no header or launcher button.\n  The parent element must establish a containing block (e.g. `position: relative`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'standard'"
+            },
             "headerText": {
                 "type": "string",
                 "attribute": "header-text",
@@ -1567,6 +1709,28 @@ export class OcsChat {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "versionNumber": {
+                "type": "number",
+                "attribute": "version-number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Optional version number of the chatbot to use. Requires authentication.\nThis is for internal use only and is not intended for public-facing widgets."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
@@ -1577,6 +1741,7 @@ export class OcsChat {
             "sessionId": {},
             "isLoading": {},
             "isTyping": {},
+            "typingProgressMessage": {},
             "messageInput": {},
             "currentPollTaskId": {},
             "isDragging": {},
@@ -1599,6 +1764,12 @@ export class OcsChat {
         return [{
                 "propName": "pageContext",
                 "methodName": "pageContextHandler"
+            }, {
+                "propName": "chatbotId",
+                "methodName": "chatbotConfigHandler"
+            }, {
+                "propName": "versionNumber",
+                "methodName": "chatbotConfigHandler"
             }, {
                 "propName": "visible",
                 "methodName": "visibilityHandler"
@@ -1615,7 +1786,39 @@ OcsChat.WINDOW_MARGIN = 20;
 OcsChat.LOCALSTORAGE_TEST_KEY = '__ocs_test__';
 OcsChat.MAX_FILE_SIZE_MB = 50;
 OcsChat.MAX_TOTAL_SIZE_MB = 50;
-OcsChat.SUPPORTED_FILE_EXTENSIONS = ['.txt', '.pdf', '.doc', '.docx', '.xls', '.xlsx', '.csv', '.jpg',
-    '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.mp4', '.mov', '.avi', '.mp3', '.wav', '.html', '.htm', '.css',
-    '.js', '.xml', '.md', '.ics', '.vcf', '.rtf', '.tsv', '.yaml', '.yml', '.py', '.c'];
+OcsChat.SUPPORTED_FILE_EXTENSIONS = [
+    '.txt',
+    '.pdf',
+    '.doc',
+    '.docx',
+    '.xls',
+    '.xlsx',
+    '.csv',
+    '.jpg',
+    '.jpeg',
+    '.png',
+    '.gif',
+    '.bmp',
+    '.webp',
+    '.svg',
+    '.mp4',
+    '.mov',
+    '.avi',
+    '.mp3',
+    '.wav',
+    '.html',
+    '.htm',
+    '.css',
+    '.js',
+    '.xml',
+    '.md',
+    '.ics',
+    '.vcf',
+    '.rtf',
+    '.tsv',
+    '.yaml',
+    '.yml',
+    '.py',
+    '.c',
+];
 //# sourceMappingURL=ocs-chat.js.map