open-chat-studio-widget 0.4.4 → 0.4.6

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

@@ -1,6 +1,8 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Host, h } from "@stencil/core";
-import { XMarkIcon, GripDotsVerticalIcon, PencilSquare, ArrowsPointingOutIcon, ArrowsPointingInIcon, } from "./heroicons";
+import { XMarkIcon, GripDotsVerticalIcon, PlusWithCircleIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, PaperClipIcon, CheckDocumentIcon, XIcon } from "./heroicons";
 import { renderMarkdownSync as renderMarkdownComplete } from "../../utils/markdown";
+import { getCSRFToken } from "../../utils/cookies";
 import { varToPixels } from "../../utils/utils";
 export class OcsChat {
     constructor() {
@@ -12,6 +14,10 @@ export class OcsChat {
          * The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
          */
         this.buttonShape = 'square';
+        /**
+         * The message to display in the new chat confirmation dialog.
+         */
+        this.newChatConfirmationMessage = "Starting a new chat will clear your current conversation. Continue?";
         /**
          * Whether the chat widget is visible on load.
          */
@@ -33,24 +39,34 @@ export class OcsChat {
          * Allow the user to make the chat window full screen.
          */
         this.allowFullScreen = true;
-        this.loaded = false;
+        /**
+         * Allow the user to attach files to their messages.
+         */
+        this.allowAttachments = false;
+        /**
+         * The text to display while the assistant is typing/preparing a response.
+         */
+        this.typingIndicatorText = "Preparing response";
         this.error = "";
         this.messages = [];
         this.isLoading = false;
         this.isTyping = false;
         this.messageInput = "";
-        this.isTaskPolling = false;
+        this.currentPollTaskId = "";
         this.isDragging = false;
         this.dragOffset = { x: 0, y: 0 };
         this.windowPosition = { x: 0, y: 0 };
         this.fullscreenPosition = { x: 0 };
-        this.showStarterQuestions = true;
         this.parsedWelcomeMessages = [];
         this.parsedStarterQuestions = [];
         this.isFullscreen = false;
+        this.showNewChatConfirmation = false;
+        this.selectedFiles = [];
+        this.isUploadingFiles = false;
         this.chatWindowHeight = 600;
         this.chatWindowWidth = 450;
         this.chatWindowFullscreenWidth = 1024;
+        this.positionInitialized = false;
         this.handleMouseDown = (event) => {
             if (!this.isFullscreen && window.innerWidth < OcsChat.MOBILE_BREAKPOINT)
                 return;
@@ -95,11 +111,11 @@ export class OcsChat {
             this.endDrag();
         };
         this.handleWindowResize = () => {
+            this.positionInitialized = false;
             this.initializePosition();
         };
     }
     componentWillLoad() {
-        this.loaded = this.visible;
         if (!this.chatbotId) {
             this.error = 'Chatbot ID is required';
             return;
@@ -110,13 +126,22 @@ export class OcsChat {
             if (sessionId && messages) {
                 this.sessionId = sessionId;
                 this.messages = messages;
-                this.showStarterQuestions = messages.length === 0;
             }
         }
         this.parseWelcomeMessages();
         this.parseStarterQuestions();
     }
     componentDidLoad() {
+        const computedStyle = getComputedStyle(this.host);
+        const windowHeightVar = computedStyle.getPropertyValue('--chat-window-height');
+        const windowWidthVar = computedStyle.getPropertyValue('--chat-window-width');
+        const fullscreenWidthVar = computedStyle.getPropertyValue('--chat-window-fullscreen-width');
+        this.chatWindowHeight = varToPixels(windowHeightVar, window.innerHeight, this.chatWindowHeight);
+        this.chatWindowWidth = varToPixels(windowWidthVar, window.innerWidth, this.chatWindowWidth);
+        this.chatWindowFullscreenWidth = varToPixels(fullscreenWidthVar, window.innerWidth, this.chatWindowFullscreenWidth);
+        if (this.visible) {
+            this.initializePosition();
+        }
         // Only auto-start session if we don't have an existing one
         if (this.visible && !this.sessionId) {
             this.startSession();
@@ -125,14 +150,6 @@ export class OcsChat {
             // Resume polling for existing session
             this.startPolling();
         }
-        const computedStyle = getComputedStyle(this.host);
-        const windowHeightVar = computedStyle.getPropertyValue('--chat-window-height');
-        const windowWidthVar = computedStyle.getPropertyValue('--chat-window-width');
-        const fullscreenWidthVar = computedStyle.getPropertyValue('--chat-window-fullscreen-width');
-        this.chatWindowHeight = varToPixels(windowHeightVar, window.innerHeight, this.chatWindowHeight);
-        this.chatWindowWidth = varToPixels(windowWidthVar, window.innerWidth, this.chatWindowWidth);
-        this.chatWindowFullscreenWidth = varToPixels(fullscreenWidthVar, window.innerWidth, this.chatWindowFullscreenWidth);
-        this.initializePosition();
         window.addEventListener('resize', this.handleWindowResize);
     }
     disconnectedCallback() {
@@ -140,6 +157,26 @@ export class OcsChat {
         this.removeEventListeners();
         window.removeEventListener('resize', this.handleWindowResize);
     }
+    addErrorMessage(errorText) {
+        const errorMessage = {
+            created_at: new Date().toISOString(),
+            role: 'system',
+            content: `**Error:** ${errorText}\nPlease try again.`,
+            attachments: []
+        };
+        this.messages = [...this.messages, errorMessage];
+        this.saveSessionToStorage();
+        this.scrollToBottom();
+    }
+    handleError(errorText) {
+        // show as system message
+        this.addErrorMessage(errorText);
+        // Clear any loading/typing states
+        this.isLoading = false;
+        this.isTyping = false;
+        this.isUploadingFiles = false;
+        this.currentPollTaskId = '';
+    }
     parseJSONProp(propValue, propName) {
         try {
             if (propValue) {
@@ -164,19 +201,28 @@ export class OcsChat {
         this.parsedStarterQuestions = this.parseJSONProp(this.starterQuestions, 'starter questions');
     }
     cleanup() {
-        if (this.pollingInterval) {
-            clearInterval(this.pollingInterval);
-            this.pollingInterval = undefined;
+        if (this.pollingIntervalRef) {
+            clearInterval(this.pollingIntervalRef);
+            this.pollingIntervalRef = undefined;
         }
-        this.isTaskPolling = false;
+        this.currentPollTaskId = '';
     }
     getApiBaseUrl() {
         return this.apiBaseUrl || window.location.origin;
     }
+    getApiHeaders() {
+        const headers = {
+            'Content-Type': 'application/json',
+        };
+        const csrfToken = getCSRFToken(this.getApiBaseUrl());
+        if (csrfToken) {
+            headers['X-CSRFToken'] = csrfToken;
+        }
+        return headers;
+    }
     async startSession() {
         try {
             this.isLoading = true;
-            this.error = '';
             const userId = this.getOrGenerateUserId();
             const requestBody = {
                 chatbot_id: this.chatbotId,
@@ -191,13 +237,12 @@ export class OcsChat {
             }
             const response = await fetch(`${this.getApiBaseUrl()}/api/chat/start/`, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                headers: this.getApiHeaders(),
                 body: JSON.stringify(requestBody)
             });
             if (!response.ok) {
-                throw new Error(`Failed to start session: ${response.statusText}`);
+                this.handleError(`Failed to start session: ${response.statusText}`);
+                return;
             }
             const data = await response.json();
             this.sessionId = data.session_id;
@@ -205,24 +250,99 @@ export class OcsChat {
             // Handle seed message if present
             if (data.seed_message_task_id) {
                 this.isTyping = true; // Show typing indicator for seed message
-                await this.pollTaskResponse(data.seed_message_task_id);
+                this.currentPollTaskId = data.seed_message_task_id;
+                await this.pollTaskResponse();
             }
             // Start polling for messages
             this.startPolling();
         }
         catch (error) {
-            this.error = error instanceof Error ? error.message : 'Failed to start chat session';
+            this.handleError('Failed to start chat session');
         }
         finally {
             this.isLoading = false;
         }
     }
+    markPendingFilesWithError(errorMessage) {
+        this.selectedFiles = this.selectedFiles.map(sf => {
+            if (!sf.error && !sf.uploaded) {
+                return Object.assign(Object.assign({}, sf), { error: errorMessage });
+            }
+            return sf;
+        });
+    }
+    async uploadFiles() {
+        if (this.selectedFiles.length === 0 || !this.sessionId || !this.allowAttachments) {
+            return [];
+        }
+        this.isUploadingFiles = true;
+        const uploadedIds = [];
+        try {
+            const formData = new FormData();
+            // Add all files to form data
+            for (const selectedFile of this.selectedFiles) {
+                if (!selectedFile.error && !selectedFile.uploaded) {
+                    formData.append('files', selectedFile.file);
+                }
+                else if (selectedFile.uploaded) {
+                    uploadedIds.push(selectedFile.uploaded.id);
+                }
+            }
+            // Add user ID and name to the form data
+            const userId = this.getOrGenerateUserId();
+            formData.append('participant_remote_id', userId);
+            if (this.userName) {
+                formData.append('participant_name', this.userName);
+            }
+            // Only upload if there are new files
+            if (formData.has('files')) {
+                const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/upload/`, {
+                    method: 'POST',
+                    body: formData,
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    const errorMessage = errorData.error || 'Failed to upload files';
+                    this.markPendingFilesWithError(errorMessage);
+                    return uploadedIds;
+                }
+                const data = await response.json();
+                // Update selected files with upload results
+                let fileIndex = 0;
+                this.selectedFiles = this.selectedFiles.map(sf => {
+                    if (!sf.error && !sf.uploaded) {
+                        return Object.assign(Object.assign({}, sf), { uploaded: data.files[fileIndex++] });
+                    }
+                    return sf;
+                });
+                uploadedIds.push(...data.files.map((f) => f.id));
+            }
+            return uploadedIds;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to upload files';
+            this.markPendingFilesWithError(errorMessage);
+            return uploadedIds;
+        }
+        finally {
+            this.isUploadingFiles = false;
+        }
+    }
     async sendMessage(message) {
         if (!this.sessionId || !message.trim())
             return;
-        // Hide starter questions on any user interaction
-        this.showStarterQuestions = false;
         try {
+            let attachmentIds = [];
+            if (this.allowAttachments && this.selectedFiles.length > 0) {
+                attachmentIds = await this.uploadFiles();
+                // Check if any files have errors after upload attempt
+                const hasErrors = this.selectedFiles.some(sf => sf.error);
+                if (hasErrors) {
+                    // Don't send the message, let user fix file issues first
+                    this.handleError('Please remove or fix file errors before sending your message.');
+                    return;
+                }
+            }
             // If this is the first user message and there are welcome messages,
             // add them to chat history as assistant messages
             if (this.messages.length === 0 && this.parsedWelcomeMessages.length > 0) {
@@ -235,25 +355,36 @@ export class OcsChat {
                 }));
                 this.messages = [...this.messages, ...welcomeMessages];
             }
-            // Add user message immediately
+            // Add user message immediately with attachments info
             const userMessage = {
                 created_at: new Date().toISOString(),
                 role: 'user',
                 content: message.trim(),
-                attachments: []
+                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();
             this.messageInput = '';
+            if (this.allowAttachments) {
+                this.selectedFiles = []; // Clear selected files after sending
+            }
             this.scrollToBottom();
             // Start typing indicator - it will stay on during task polling
             this.isTyping = true;
+            const requestBody = { message: message.trim() };
+            if (this.allowAttachments && attachmentIds.length > 0) {
+                requestBody.attachment_ids = attachmentIds;
+            }
             const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/message/`, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ message: message.trim() })
+                headers: this.getApiHeaders(),
+                body: JSON.stringify(requestBody)
             });
             if (!response.ok) {
                 throw new Error(`Failed to send message: ${response.statusText}`);
@@ -263,27 +394,28 @@ export class OcsChat {
                 throw new Error(data.error || 'Failed to send message');
             }
             // Poll for the response - typing indicator will be managed in pollTaskResponse
-            await this.pollTaskResponse(data.task_id);
+            this.currentPollTaskId = data.task_id;
+            await this.pollTaskResponse();
         }
         catch (error) {
-            this.error = error instanceof Error ? error.message : 'Failed to send message';
-            // Clear typing indicator on error
-            this.isTyping = false;
+            const errorText = error instanceof Error ? error.message : 'Failed to send message';
+            this.handleError(errorText);
         }
     }
     handleStarterQuestionClick(question) {
         this.sendMessage(question);
     }
-    async pollTaskResponse(taskId) {
-        if (!this.sessionId)
+    async pollTaskResponse() {
+        if (!this.sessionId || !this.currentPollTaskId)
             return;
         // Stop message polling while task polling is active
-        this.isTaskPolling = true;
         this.pauseMessagePolling();
         let attempts = 0;
         const poll = async () => {
+            if (!this.sessionId || !this.currentPollTaskId)
+                return;
             try {
-                const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/${taskId}/poll/`);
+                const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/${this.currentPollTaskId}/poll/`);
                 if (!response.ok) {
                     throw new Error(`Failed to poll task: ${response.statusText}`);
                 }
@@ -297,7 +429,7 @@ export class OcsChat {
                     this.scrollToBottom();
                     // Task polling complete, clear typing indicator and resume message polling
                     this.isTyping = false;
-                    this.isTaskPolling = false;
+                    this.currentPollTaskId = '';
                     this.resumeMessagePolling();
                     this.focusInput();
                     return;
@@ -307,36 +439,47 @@ export class OcsChat {
                     setTimeout(poll, OcsChat.TASK_POLLING_INTERVAL_MS);
                 }
                 else if (attempts >= OcsChat.TASK_POLLING_MAX_ATTEMPTS) {
-                    // Task polling timed out, clear typing indicator and resume message polling
+                    // Task polling timed out - add timeout message and resume polling
+                    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: []
+                    };
+                    this.messages = [...this.messages, timeoutMessage];
+                    this.saveSessionToStorage();
+                    this.scrollToBottom();
+                    // Clear typing indicator and resume message polling
                     this.isTyping = false;
-                    this.isTaskPolling = false;
+                    this.currentPollTaskId = '';
                     this.resumeMessagePolling();
+                    this.focusInput();
                 }
             }
             catch (error) {
-                this.error = error instanceof Error ? error.message : 'Failed to get response';
-                // Error in task polling, clear typing indicator and resume message polling
-                this.isTyping = false;
-                this.isTaskPolling = false;
+                const errorText = error instanceof Error ? error.message : 'Failed to get response';
+                this.handleError(errorText);
+                // Clear states and resume polling
+                this.currentPollTaskId = '';
                 this.resumeMessagePolling();
             }
         };
         await poll();
     }
     startPolling() {
-        if (this.pollingInterval)
+        if (this.pollingIntervalRef)
             return;
-        this.pollingInterval = setInterval(async () => {
+        this.pollingIntervalRef = setInterval(async () => {
             // Only poll for messages if not currently polling for a task
-            if (!this.isTaskPolling) {
+            if (!this.currentPollTaskId) {
                 await this.pollForMessages();
             }
         }, OcsChat.MESSAGE_POLLING_INTERVAL_MS);
     }
     pauseMessagePolling() {
-        if (this.pollingInterval) {
-            clearInterval(this.pollingInterval);
-            this.pollingInterval = undefined;
+        if (this.pollingIntervalRef) {
+            clearInterval(this.pollingIntervalRef);
+            this.pollingIntervalRef = undefined;
         }
     }
     resumeMessagePolling() {
@@ -361,15 +504,11 @@ export class OcsChat {
                 this.scrollToBottom();
                 this.focusInput();
             }
-            this.lastPollTime = new Date();
         }
-        catch (error) {
+        catch (_a) {
             // Silently fail for polling
         }
     }
-    clearError() {
-        this.error = '';
-    }
     scrollToBottom() {
         setTimeout(() => {
             if (this.messageListRef) {
@@ -392,24 +531,89 @@ export class OcsChat {
     }
     handleInputChange(event) {
         this.messageInput = event.target.value;
-        // Hide starter questions when user starts typing
-        if (this.messageInput.trim().length > 0) {
-            this.showStarterQuestions = false;
+    }
+    handleFileSelect(event) {
+        var _a;
+        if (!this.allowAttachments)
+            return;
+        const input = event.target;
+        if (!input.files || input.files.length === 0)
+            return;
+        const newFiles = [];
+        let totalSize = this.selectedFiles.reduce((sum, f) => sum + f.file.size, 0);
+        for (let i = 0; i < input.files.length; i++) {
+            const file = input.files[i];
+            const ext = '.' + ((_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+            if (!OcsChat.SUPPORTED_FILE_EXTENSIONS.includes(ext)) {
+                newFiles.push({
+                    file,
+                    error: `File type ${ext} not supported`
+                });
+                continue;
+            }
+            const fileSizeMB = file.size / (1024 * 1024);
+            if (fileSizeMB > OcsChat.MAX_FILE_SIZE_MB) {
+                newFiles.push({
+                    file,
+                    error: `File exceeds ${OcsChat.MAX_FILE_SIZE_MB}MB limit`
+                });
+                continue;
+            }
+            totalSize += file.size;
+            const totalSizeMB = totalSize / (1024 * 1024);
+            if (totalSizeMB > OcsChat.MAX_TOTAL_SIZE_MB) {
+                newFiles.push({
+                    file,
+                    error: `Total size exceeds ${OcsChat.MAX_TOTAL_SIZE_MB}MB limit`
+                });
+                continue;
+            }
+            newFiles.push({ file });
+        }
+        this.selectedFiles = [...this.selectedFiles, ...newFiles];
+        input.value = '';
+    }
+    removeSelectedFile(index) {
+        if (!this.allowAttachments)
+            return;
+        this.selectedFiles = this.selectedFiles.filter((_, i) => i !== index);
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 KB';
+        const k = 1024;
+        if (bytes < k * k) {
+            // Less than 1MB, show in KB
+            return Math.round(bytes / k * 100) / 100 + ' KB';
+        }
+        else {
+            return Math.round(bytes / (k * k) * 100) / 100 + ' MB';
         }
     }
     formatTime(dateString) {
         const date = new Date(dateString);
         return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
     }
-    async load() {
+    toggleWindowVisibility() {
         this.visible = !this.visible;
-        this.loaded = true;
-        if (this.visible && !this.sessionId) {
-            this.clearError();
+    }
+    /**
+     * Watch for changes to the `visible` attribute and update accordingly.
+     *
+     * @param visible - The new value for the field.
+     */
+    async visibilityHandler(visible) {
+        if (visible) {
+            this.initializePosition();
+        }
+        if (visible && !this.sessionId) {
             await this.startSession();
         }
-        else if (!this.visible) {
-            // Don't reset session when closing, allow resume
+        else if (!visible) {
+            this.pauseMessagePolling();
+        }
+        else {
+            this.resumeMessagePolling();
         }
     }
     setPosition(position) {
@@ -430,6 +634,7 @@ export class OcsChat {
         const actualChatWidth = Math.min(windowWidth, this.chatWindowFullscreenWidth);
         const centeredX = (windowWidth - actualChatWidth) / 2;
         const maxOffset = (windowWidth - actualChatWidth) / 2;
+        console.log(windowWidth, actualChatWidth, centeredX, maxOffset);
         return { windowWidth, actualChatWidth, centeredX, maxOffset };
     }
     getPositionStyles() {
@@ -448,6 +653,10 @@ export class OcsChat {
         };
     }
     initializePosition() {
+        if (this.positionInitialized) {
+            return;
+        }
+        this.positionInitialized = true;
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
         const chatWidth = windowWidth < OcsChat.MOBILE_BREAKPOINT ? windowWidth : this.chatWindowWidth;
@@ -562,10 +771,10 @@ export class OcsChat {
         const iconSrc = hasCustomIcon ? this.iconUrl : this.getDefaultIconUrl();
         const buttonClasses = this.getButtonClasses();
         if (hasText) {
-            return (h("button", { class: buttonClasses, onClick: () => this.load(), "aria-label": `Open chat - ${this.buttonText}`, title: this.buttonText }, h("img", { src: iconSrc, alt: "" }), h("span", null, this.buttonText)));
+            return (h("button", { class: buttonClasses, onClick: () => this.toggleWindowVisibility(), "aria-label": `Open chat - ${this.buttonText}`, title: this.buttonText }, h("img", { src: iconSrc, alt: "" }), h("span", null, this.buttonText)));
         }
         else {
-            return (h("button", { class: buttonClasses, onClick: () => this.load(), "aria-label": "Open chat", title: "Open chat" }, h("img", { src: iconSrc, alt: "Chat" })));
+            return (h("button", { class: buttonClasses, onClick: () => this.toggleWindowVisibility(), "aria-label": "Open chat", title: "Open chat" }, h("img", { src: iconSrc, alt: "Chat" })));
         }
     }
     getStorageKeys() {
@@ -669,13 +878,25 @@ export class OcsChat {
             return false;
         }
     }
-    async startNewChat() {
+    showConfirmationDialog() {
+        this.showNewChatConfirmation = true;
+    }
+    hideConfirmationDialog() {
+        this.showNewChatConfirmation = false;
+    }
+    async confirmNewChat() {
+        this.hideConfirmationDialog();
+        await this.actuallyStartNewChat();
+    }
+    async actuallyStartNewChat() {
         this.clearSessionStorage();
         this.sessionId = undefined;
         this.messages = [];
-        this.showStarterQuestions = true;
         this.isTyping = false;
-        this.error = '';
+        this.currentPollTaskId = '';
+        if (this.allowAttachments) {
+            this.selectedFiles = [];
+        }
         this.cleanup();
         await this.startSession();
     }
@@ -685,16 +906,22 @@ export class OcsChat {
         this.fullscreenPosition = { x: 0 };
     }
     render() {
-        if (this.error) {
+        // Only show error state for critical errors that prevent the widget from functioning
+        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.headerText), h("div", { class: "header-buttons" }, this.allowFullScreen && h("button", { class: "header-button fullscreen-button", onClick: () => this.toggleFullscreen(), title: this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen", "aria-label": this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen" }, this.isFullscreen ? h(ArrowsPointingInIcon, null) : h(ArrowsPointingOutIcon, null)), this.sessionId && this.messages.length > 0 && (h("button", { class: "header-button", onClick: () => this.startNewChat(), title: "Start new chat", "aria-label": "Start new chat" }, h(PencilSquare, null))), h("button", { class: "header-button", onClick: () => this.visible = false, "aria-label": "Close" }, h(XMarkIcon, null)))), h("div", { class: "chat-content" }, this.isLoading && !this.sessionId && (h("div", { class: "loading-container" }, h("div", { class: "loading-spinner" }), h("span", { class: "loading-text" }, "Starting chat..."))), this.sessionId && (h("div", { ref: (el) => this.messageListRef = el, class: "messages-container" }, this.messages.length === 0 && !this.isTyping && this.parsedWelcomeMessages.length > 0 && (h("div", { class: "welcome-messages" }, this.parsedWelcomeMessages.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'
+        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.headerText), h("div", { class: "header-buttons" }, this.messages.length > 0 && (h("button", { class: "header-button", onClick: () => this.showConfirmationDialog(), title: "Start new chat", "aria-label": "Start new chat" }, h(PlusWithCircleIcon, null))), this.allowFullScreen && h("button", { class: "header-button fullscreen-button", onClick: () => this.toggleFullscreen(), title: this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen", "aria-label": this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen" }, this.isFullscreen ? h(ArrowsPointingInIcon, null) : h(ArrowsPointingOutIcon, null)), h("button", { class: "header-button", onClick: () => this.visible = false, "aria-label": "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" }, "Start New Chat"), h("p", { class: "confirmation-message" }, this.newChatConfirmationMessage), h("div", { class: "confirmation-buttons" }, h("button", { class: "confirmation-button confirmation-button-cancel", onClick: () => this.hideConfirmationDialog() }, "Cancel"), h("button", { class: "confirmation-button confirmation-button-confirm", onClick: () => this.confirmNewChat() }, "Continue")))))), h("div", { class: "chat-content" }, this.isLoading && !this.sessionId && (h("div", { class: "loading-container" }, h("div", { class: "loading-spinner" }), h("span", { class: "loading-text" }, "Starting chat..."))), (h("div", { ref: (el) => this.messageListRef = el, class: "messages-container" }, this.messages.length === 0 && this.parsedWelcomeMessages.length > 0 && (h("div", { class: "welcome-messages" }, this.parsedWelcomeMessages.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("a", { key: attachmentIndex, href: attachment.content_url, target: "_blank", rel: "noopener noreferrer", class: "attachment-link" }, "\uD83D\uDCCE ", 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, "Preparing response"), h("span", { class: "typing-dots" })))))), this.sessionId && this.showStarterQuestions && this.messages.length === 0 && !this.isTyping && (h("div", { class: "starter-questions" }, this.parsedStarterQuestions.map((question, index) => (h("div", { key: `starter-${index}`, class: "starter-question-row" }, h("button", { class: "starter-question", onClick: () => this.handleStarterQuestionClick(question) }, question)))))), this.sessionId && (h("div", { class: "input-area" }, h("div", { class: "input-container" }, h("textarea", { ref: (el) => this.textareaRef = el, class: "message-textarea", rows: 1, placeholder: "Type your message...", value: this.messageInput, onInput: (e) => this.handleInputChange(e), onKeyPress: (e) => this.handleKeyPress(e), disabled: this.isTyping }), h("button", { class: `send-button ${!this.isTyping && !!this.messageInput.trim()
+                    : '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.typingIndicatorText), h("span", { class: "typing-dots" })))))), this.messages.length === 0 && this.parsedStarterQuestions.length > 0 && (h("div", { class: "starter-questions" }, this.parsedStarterQuestions.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": "Remove file" }, h(XIcon, null)))))))), this.sessionId && (h("div", { class: "input-area" }, h("div", { class: "input-container" }, h("textarea", { ref: (el) => this.textareaRef = el, class: "message-textarea", rows: 1, placeholder: "Type your message...", value: this.messageInput, onInput: (e) => this.handleInputChange(e), onKeyPress: (e) => this.handleKeyPress(e), disabled: this.isTyping || this.isUploadingFiles }), 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(','), 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, title: "Attach files", "aria-label": "Attach files" }, h(PaperClipIcon, null))), h("button", { class: `send-button ${!this.isTyping && !!this.messageInput.trim()
                 ? 'send-button-enabled'
-                : 'send-button-disabled'}`, onClick: () => this.sendMessage(this.messageInput), disabled: this.isTyping || !this.messageInput.trim() }, "Send")))), h("div", { class: "flex items-center justify-center text-[0.8em] font-light w-full text-slate-500 py-[2px]" }, h("p", null, "Powered by ", h("a", { class: "underline", href: "https://www.dimagi.com", target: "_blank" }, "Dimagi"))))))));
+                : 'send-button-disabled'}`, onClick: () => this.sendMessage(this.messageInput), disabled: this.isTyping || this.isUploadingFiles || !this.messageInput.trim() }, this.isUploadingFiles ? 'Uploading...' : 'Send')))), h("div", { class: "flex items-center justify-center text-[0.8em] font-light w-full text-slate-500 py-[2px]" }, h("p", null, "Powered by ", h("a", { class: "underline", href: "https://www.dimagi.com", target: "_blank" }, "Dimagi"))))))));
     }
     static get is() { return "open-chat-studio-widget"; }
     static get encapsulation() { return "shadow"; }
@@ -826,6 +1053,26 @@ export class OcsChat {
                 "attribute": "header-text",
                 "reflect": false
             },
+            "newChatConfirmationMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The message to display in the new chat confirmation dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "new-chat-confirmation-message",
+                "reflect": false,
+                "defaultValue": "\"Starting a new chat will clear your current conversation. Continue?\""
+            },
             "visible": {
                 "type": "boolean",
                 "mutable": true,
@@ -1001,35 +1248,80 @@ export class OcsChat {
                 "attribute": "allow-full-screen",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "allowAttachments": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow the user to attach files to their messages."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "allow-attachments",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "typingIndicatorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display while the assistant is typing/preparing a response."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "typing-indicator-text",
+                "reflect": false,
+                "defaultValue": "\"Preparing response\""
             }
         };
     }
     static get states() {
         return {
-            "loaded": {},
             "error": {},
             "messages": {},
             "sessionId": {},
             "isLoading": {},
             "isTyping": {},
             "messageInput": {},
-            "pollingInterval": {},
-            "lastPollTime": {},
-            "isTaskPolling": {},
+            "currentPollTaskId": {},
             "isDragging": {},
             "dragOffset": {},
             "windowPosition": {},
             "fullscreenPosition": {},
-            "showStarterQuestions": {},
             "parsedWelcomeMessages": {},
             "parsedStarterQuestions": {},
             "generatedUserId": {},
-            "isFullscreen": {}
+            "isFullscreen": {},
+            "showNewChatConfirmation": {},
+            "selectedFiles": {},
+            "isUploadingFiles": {}
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "visible",
+                "methodName": "visibilityHandler"
+            }];
+    }
 }
-OcsChat.TASK_POLLING_MAX_ATTEMPTS = 30;
+OcsChat.TASK_POLLING_MAX_ATTEMPTS = 120;
 OcsChat.TASK_POLLING_INTERVAL_MS = 1000;
 OcsChat.MESSAGE_POLLING_INTERVAL_MS = 30000;
 OcsChat.SCROLL_DELAY_MS = 100;
@@ -1037,4 +1329,8 @@ OcsChat.FOCUS_DELAY_MS = 100;
 OcsChat.MOBILE_BREAKPOINT = 640;
 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'];
 //# sourceMappingURL=ocs-chat.js.map