open-chat-studio-widget 0.3.1 → 0.4.0

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

@@ -1,12 +1,16 @@
-import { Host, h, Build } from "@stencil/core";
-import { ArrowLeftEndOnRectangleIcon, ArrowRightEndOnRectangleIcon, ArrowDownOnSquareIcon, ViewfinderCircleIcon, XMarkIcon, ChevronDownIcon, ChevronUpIcon, } from "./heroicons";
-const allowedHosts = ["chatbots.dimagi.com"];
+import { Host, h } from "@stencil/core";
+import { XMarkIcon, ChevronDownIcon, ChevronUpIcon, GripDotsVerticalIcon, PencilSquare, } from "./heroicons";
+import { renderMarkdownSync as renderMarkdownComplete } from "../../utils/markdown";
 export class OcsChat {
     constructor() {
         /**
-         * The text to display on the button.
+         * The base URL for the API (defaults to current origin).
          */
-        this.buttonText = "Chat";
+        this.apiBaseUrl = "https://chatbots.dimagi.com";
+        /**
+         * The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
+         */
+        this.buttonShape = 'square';
         /**
          * Whether the chat widget is visible on load.
          */
@@ -19,26 +23,375 @@ export class OcsChat {
          * Whether the chat widget is initially expanded.
          */
         this.expanded = false;
+        /**
+         * Whether to persist session data to local storage to allow resuming previous conversations after page reload.
+         */
+        this.persistentSession = true;
+        /**
+         * Minutes since the most recent message after which the session data in local storage will expire. Set this to
+         * `0` to never expire.
+         */
+        this.persistentSessionExpire = 60 * 24;
         this.loaded = false;
         this.error = "";
+        this.messages = [];
+        this.isLoading = false;
+        this.isTyping = false;
+        this.messageInput = "";
+        this.isTaskPolling = false;
+        this.isDragging = false;
+        this.dragOffset = { x: 0, y: 0 };
+        this.windowPosition = { x: 0, y: 0 };
+        this.showStarterQuestions = true;
+        this.parsedWelcomeMessages = [];
+        this.parsedStarterQuestions = [];
+        this.handleMouseDown = (event) => {
+            if (window.innerWidth < OcsChat.MOBILE_BREAKPOINT)
+                return;
+            if (event.target.closest('button'))
+                return;
+            const pointer = this.getPointerCoordinates(event);
+            if (!pointer)
+                return;
+            this.startDrag(pointer);
+            this.addEventListeners();
+            event.preventDefault();
+        };
+        this.handleMouseMove = (event) => {
+            const pointer = this.getPointerCoordinates(event);
+            if (!pointer)
+                return;
+            this.updateDragPosition(pointer);
+        };
+        this.handleMouseUp = () => {
+            this.endDrag();
+        };
+        this.handleTouchStart = (event) => {
+            if (event.target.closest('button'))
+                return;
+            if (!this.chatWindowRef)
+                return;
+            const pointer = this.getPointerCoordinates(event);
+            if (!pointer)
+                return;
+            this.startDrag(pointer);
+            this.addEventListeners();
+            event.preventDefault();
+        };
+        this.handleTouchMove = (event) => {
+            const pointer = this.getPointerCoordinates(event);
+            if (!pointer)
+                return;
+            this.updateDragPosition(pointer);
+            event.preventDefault();
+        };
+        this.handleTouchEnd = () => {
+            this.endDrag();
+        };
+        this.handleWindowResize = () => {
+            this.initializePosition();
+        };
     }
     componentWillLoad() {
         this.loaded = this.visible;
-        if (!Build.isDev) {
+        if (!this.chatbotId) {
+            this.error = 'Chatbot ID is required';
+            return;
+        }
+        // Always try to load existing session if localStorage is available
+        if (this.persistentSession && this.isLocalStorageAvailable()) {
+            const { sessionId, messages } = this.loadSessionFromStorage();
+            if (sessionId && messages) {
+                this.sessionId = sessionId;
+                this.messages = messages;
+                this.showStarterQuestions = messages.length === 0;
+            }
+        }
+        this.parseWelcomeMessages();
+        this.parseStarterQuestions();
+    }
+    componentDidLoad() {
+        // Only auto-start session if we don't have an existing one
+        if (this.visible && !this.sessionId) {
+            this.startSession();
+        }
+        else if (this.visible && this.sessionId) {
+            // Resume polling for existing session
+            this.startPolling();
+        }
+        this.initializePosition();
+        window.addEventListener('resize', this.handleWindowResize);
+    }
+    disconnectedCallback() {
+        this.cleanup();
+        this.removeEventListeners();
+        window.removeEventListener('resize', this.handleWindowResize);
+    }
+    parseJSONProp(propValue, propName) {
+        try {
+            if (propValue) {
+                try {
+                    return JSON.parse(propValue);
+                }
+                catch (_a) {
+                    const fixedValue = propValue.replace(/'/g, '"');
+                    return JSON.parse(fixedValue);
+                }
+            }
+        }
+        catch (error) {
+            console.warn(`Failed to parse ${propName}:`, error);
+        }
+        return [];
+    }
+    parseWelcomeMessages() {
+        this.parsedWelcomeMessages = this.parseJSONProp(this.welcomeMessages, 'welcome messages');
+    }
+    parseStarterQuestions() {
+        this.parsedStarterQuestions = this.parseJSONProp(this.starterQuestions, 'starter questions');
+    }
+    cleanup() {
+        if (this.pollingInterval) {
+            clearInterval(this.pollingInterval);
+            this.pollingInterval = undefined;
+        }
+        this.isTaskPolling = false;
+    }
+    getApiBaseUrl() {
+        return this.apiBaseUrl || window.location.origin;
+    }
+    async startSession() {
+        try {
+            this.isLoading = true;
+            this.error = '';
+            const response = await fetch(`${this.getApiBaseUrl()}/api/chat/start/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    chatbot_id: this.chatbotId,
+                    session_data: {
+                        source: 'widget',
+                        page_url: window.location.href
+                    }
+                })
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to start session: ${response.statusText}`);
+            }
+            const data = await response.json();
+            this.sessionId = data.session_id;
+            this.saveSessionToStorage();
+            // 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);
+            }
+            // Start polling for messages
+            this.startPolling();
+        }
+        catch (error) {
+            this.error = error instanceof Error ? error.message : 'Failed to start chat session';
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async sendMessage(message) {
+        if (!this.sessionId || !message.trim())
+            return;
+        // Hide starter questions on any user interaction
+        this.showStarterQuestions = false;
+        try {
+            // 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) {
+                const now = new Date();
+                const welcomeMessages = this.parsedWelcomeMessages.map((welcomeMsg, index) => ({
+                    created_at: new Date(now.getTime() - (this.parsedWelcomeMessages.length - index) * 1000).toISOString(),
+                    role: 'assistant',
+                    content: welcomeMsg,
+                    attachments: []
+                }));
+                this.messages = [...this.messages, ...welcomeMessages];
+            }
+            // Add user message immediately
+            const userMessage = {
+                created_at: new Date().toISOString(),
+                role: 'user',
+                content: message.trim(),
+                attachments: []
+            };
+            this.messages = [...this.messages, userMessage];
+            this.saveSessionToStorage();
+            this.messageInput = '';
+            this.scrollToBottom();
+            // Start typing indicator - it will stay on during task polling
+            this.isTyping = true;
+            const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/message/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ message: message.trim() })
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to send message: ${response.statusText}`);
+            }
+            const data = await response.json();
+            if (data.status === 'error') {
+                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);
+        }
+        catch (error) {
+            this.error = error instanceof Error ? error.message : 'Failed to send message';
+            // Clear typing indicator on error
+            this.isTyping = false;
+        }
+    }
+    handleStarterQuestionClick(question) {
+        this.sendMessage(question);
+    }
+    async pollTaskResponse(taskId) {
+        if (!this.sessionId)
+            return;
+        // Stop message polling while task polling is active
+        this.isTaskPolling = true;
+        this.pauseMessagePolling();
+        let attempts = 0;
+        const poll = async () => {
             try {
-                const url = new URL(this.botUrl);
-                if (!allowedHosts.includes(url.host)) {
-                    this.error = `Invalid Bot URL: ${this.botUrl}`;
+                const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/${taskId}/poll/`);
+                if (!response.ok) {
+                    throw new Error(`Failed to poll task: ${response.statusText}`);
+                }
+                const data = await response.json();
+                if (data.error) {
+                    throw new Error(data.error);
                 }
+                if (data.status === 'complete' && data.message) {
+                    this.messages = [...this.messages, data.message];
+                    this.saveSessionToStorage();
+                    this.scrollToBottom();
+                    // Task polling complete, clear typing indicator and resume message polling
+                    this.isTyping = false;
+                    this.isTaskPolling = false;
+                    this.resumeMessagePolling();
+                    this.focusInput();
+                    return;
+                }
+                if (data.status === 'processing' && attempts < OcsChat.TASK_POLLING_MAX_ATTEMPTS) {
+                    attempts++;
+                    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
+                    this.isTyping = false;
+                    this.isTaskPolling = false;
+                    this.resumeMessagePolling();
+                }
+            }
+            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;
+                this.resumeMessagePolling();
+            }
+        };
+        await poll();
+    }
+    startPolling() {
+        if (this.pollingInterval)
+            return;
+        this.pollingInterval = setInterval(async () => {
+            // Only poll for messages if not currently polling for a task
+            if (!this.isTaskPolling) {
+                await this.pollForMessages();
+            }
+        }, OcsChat.MESSAGE_POLLING_INTERVAL_MS);
+    }
+    pauseMessagePolling() {
+        if (this.pollingInterval) {
+            clearInterval(this.pollingInterval);
+            this.pollingInterval = undefined;
+        }
+    }
+    resumeMessagePolling() {
+        // Resume message polling after task polling is complete
+        this.startPolling();
+    }
+    async pollForMessages() {
+        if (!this.sessionId)
+            return;
+        try {
+            const url = new URL(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/poll/`);
+            if (this.messages && this.messages.length > 0) {
+                url.searchParams.set('since', this.messages.at(-1).created_at);
             }
-            catch (_a) {
-                this.error = `Invalid Bot URL: ${this.botUrl}`;
+            const response = await fetch(url.toString());
+            if (!response.ok)
+                return; // Silently fail for polling
+            const data = await response.json();
+            if (data.messages.length > 0) {
+                this.messages = [...this.messages, ...data.messages];
+                this.saveSessionToStorage();
+                this.scrollToBottom();
+                this.focusInput();
             }
+            this.lastPollTime = new Date();
+        }
+        catch (error) {
+            // Silently fail for polling
+        }
+    }
+    clearError() {
+        this.error = '';
+    }
+    scrollToBottom() {
+        setTimeout(() => {
+            if (this.messageListRef) {
+                this.messageListRef.scrollTop = this.messageListRef.scrollHeight;
+            }
+        }, OcsChat.SCROLL_DELAY_MS);
+    }
+    focusInput() {
+        setTimeout(() => {
+            if (this.textareaRef && !this.isTyping) {
+                this.textareaRef.focus();
+            }
+        }, OcsChat.FOCUS_DELAY_MS);
+    }
+    handleKeyPress(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.sendMessage(this.messageInput);
         }
     }
-    load() {
+    handleInputChange(event) {
+        this.messageInput = event.target.value;
+        // Hide starter questions when user starts typing
+        if (this.messageInput.trim().length > 0) {
+            this.showStarterQuestions = false;
+        }
+    }
+    formatTime(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    async load() {
         this.visible = !this.visible;
         this.loaded = true;
+        if (this.visible && !this.sessionId) {
+            this.clearError();
+            await this.startSession();
+        }
+        else if (!this.visible) {
+            // Don't reset session when closing, allow resume
+        }
     }
     setPosition(position) {
         if (position === this.position)
@@ -49,31 +402,229 @@ export class OcsChat {
         this.expanded = !this.expanded;
     }
     getPositionClasses() {
-        const baseClasses = `fixed w-full sm:w-[450px] ${this.expanded ? 'h-5/6' : 'h-3/5'} bg-white border border-gray-200 shadow-lg rounded-lg overflow-hidden flex flex-col`;
-        const positionClasses = {
-            left: 'left-0 sm:left-5 bottom-0 sm:bottom-5',
-            right: 'right-0 sm:right-5 bottom-0 sm:bottom-5',
-            center: 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
-        }[this.position];
-        return `${baseClasses} ${positionClasses}`;
+        return `fixed w-full sm:w-[450px] ${this.expanded ? 'h-5/6' : 'h-3/5'} bg-white border border-gray-200 ${this.isDragging ? 'shadow-2xl cursor-grabbing' : 'shadow-lg transition-shadow duration-200'} rounded-lg overflow-hidden flex flex-col`;
+    }
+    getPositionStyles() {
+        return {
+            left: `${this.windowPosition.x}px`,
+            top: `${this.windowPosition.y}px`,
+        };
+    }
+    initializePosition() {
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const chatWidth = windowWidth < OcsChat.MOBILE_BREAKPOINT ? windowWidth : OcsChat.CHAT_WIDTH_DESKTOP;
+        const chatHeight = this.expanded
+            ? (windowHeight * OcsChat.CHAT_HEIGHT_EXPANDED_RATIO)
+            : (windowHeight * OcsChat.CHAT_HEIGHT_COLLAPSED_RATIO);
+        const isMobile = windowWidth < OcsChat.MOBILE_BREAKPOINT;
+        if (isMobile) {
+            this.windowPosition = { x: 0, y: 0 };
+            return;
+        }
+        switch (this.position) {
+            case 'left':
+                this.windowPosition = {
+                    x: OcsChat.WINDOW_MARGIN,
+                    y: windowHeight - chatHeight - OcsChat.WINDOW_MARGIN
+                };
+                break;
+            case 'right':
+                this.windowPosition = {
+                    x: windowWidth - chatWidth - OcsChat.WINDOW_MARGIN,
+                    y: windowHeight - chatHeight - OcsChat.WINDOW_MARGIN
+                };
+                break;
+            case 'center':
+                this.windowPosition = {
+                    x: (windowWidth - chatWidth) / 2,
+                    y: (windowHeight - chatHeight) / 2
+                };
+                break;
+        }
+    }
+    getPointerCoordinates(event) {
+        if (event instanceof MouseEvent) {
+            return { clientX: event.clientX, clientY: event.clientY };
+        }
+        else if (event instanceof TouchEvent && event.touches.length === 1) {
+            const touch = event.touches[0];
+            return { clientX: touch.clientX, clientY: touch.clientY };
+        }
+        return null;
+    }
+    startDrag(pointer) {
+        if (!this.chatWindowRef)
+            return;
+        this.isDragging = true;
+        const rect = this.chatWindowRef.getBoundingClientRect();
+        this.dragOffset = {
+            x: pointer.clientX - rect.left,
+            y: pointer.clientY - rect.top
+        };
+    }
+    updateDragPosition(pointer) {
+        if (!this.isDragging)
+            return;
+        const newX = pointer.clientX - this.dragOffset.x;
+        const newY = pointer.clientY - this.dragOffset.y;
+        // Constrain chatbox to window
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const chatWidth = windowWidth < OcsChat.MOBILE_BREAKPOINT ? windowWidth : OcsChat.CHAT_WIDTH_DESKTOP;
+        const chatHeight = this.expanded
+            ? (windowHeight * OcsChat.CHAT_HEIGHT_EXPANDED_RATIO)
+            : (windowHeight * OcsChat.CHAT_HEIGHT_COLLAPSED_RATIO);
+        this.windowPosition = {
+            x: Math.max(0, Math.min(newX, windowWidth - chatWidth)),
+            y: Math.max(0, Math.min(newY, windowHeight - chatHeight))
+        };
+    }
+    endDrag() {
+        this.isDragging = false;
+        this.removeEventListeners();
+    }
+    addEventListeners() {
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+        document.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+        document.addEventListener('touchend', this.handleTouchEnd);
+    }
+    removeEventListeners() {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+        document.removeEventListener('touchmove', this.handleTouchMove);
+        document.removeEventListener('touchend', this.handleTouchEnd);
+    }
+    getDefaultIconUrl() {
+        return `${this.getApiBaseUrl()}/static/images/favicons/favicon.svg`;
+    }
+    getButtonClasses() {
+        const hasText = this.buttonText && this.buttonText.trim();
+        const baseClass = hasText ? 'chat-btn-text' : 'chat-btn-icon';
+        const shapeClass = this.buttonShape === 'round' ? 'round' : '';
+        return `${baseClass} ${shapeClass}`.trim();
+    }
+    renderButton() {
+        const hasText = this.buttonText && this.buttonText.trim();
+        const hasCustomIcon = this.iconUrl && this.iconUrl.trim();
+        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)));
+        }
+        else {
+            return (h("button", { class: buttonClasses, onClick: () => this.load(), "aria-label": "Open chat", title: "Open chat" }, h("img", { src: iconSrc, alt: "Chat" })));
+        }
+    }
+    getStorageKeys() {
+        return {
+            sessionId: `ocs-chat-session-${this.chatbotId}`,
+            messages: `ocs-chat-messages-${this.chatbotId}`,
+            lastActivity: `ocs-chat-activity-${this.chatbotId}`
+        };
+    }
+    saveSessionToStorage() {
+        if (!this.persistentSession) {
+            return;
+        }
+        const keys = this.getStorageKeys();
+        try {
+            if (this.sessionId) {
+                localStorage.setItem(keys.sessionId, this.sessionId);
+                localStorage.setItem(keys.lastActivity, new Date().toISOString());
+            }
+            localStorage.setItem(keys.messages, JSON.stringify(this.messages));
+        }
+        catch (error) {
+            console.warn('Failed to save chat session to localStorage:', error);
+        }
+    }
+    loadSessionFromStorage() {
+        const keys = this.getStorageKeys();
+        try {
+            if (this.persistentSessionExpire > 0) {
+                const lastActivity = localStorage.getItem(keys.lastActivity);
+                if (lastActivity) {
+                    const lastActivityDate = new Date(lastActivity);
+                    const minutesSinceActivity = (Date.now() - lastActivityDate.getTime()) / (1000 * 60);
+                    if (minutesSinceActivity > this.persistentSessionExpire) {
+                        this.clearSessionStorage();
+                        return { messages: [] };
+                    }
+                }
+            }
+            const storedSessionId = localStorage.getItem(keys.sessionId);
+            const sessionId = storedSessionId ? storedSessionId : undefined;
+            const messagesJson = localStorage.getItem(keys.messages);
+            let messages = [];
+            if (messagesJson) {
+                try {
+                    const parsedMessages = JSON.parse(messagesJson);
+                    messages = Array.isArray(parsedMessages) ? parsedMessages : [];
+                }
+                catch (parseError) {
+                    console.warn('Failed to parse messages from localStorage:', parseError);
+                    messages = [];
+                }
+            }
+            return { sessionId, messages };
+        }
+        catch (error) {
+            // fall back to starting a new session
+            console.warn('Failed to load chat session from localStorage, starting new session:', error);
+            return { messages: [] };
+        }
+    }
+    clearSessionStorage() {
+        const keys = this.getStorageKeys();
+        try {
+            localStorage.removeItem(keys.sessionId);
+            localStorage.removeItem(keys.messages);
+            localStorage.removeItem(keys.lastActivity);
+        }
+        catch (error) {
+            console.warn('Failed to clear chat session from localStorage:', error);
+        }
+    }
+    isLocalStorageAvailable() {
+        try {
+            localStorage.setItem(OcsChat.LOCALSTORAGE_TEST_KEY, 'test');
+            localStorage.removeItem(OcsChat.LOCALSTORAGE_TEST_KEY);
+            return true;
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    async startNewChat() {
+        this.clearSessionStorage();
+        this.sessionId = undefined;
+        this.messages = [];
+        this.showStarterQuestions = true;
+        this.isTyping = false;
+        this.error = '';
+        this.cleanup();
+        await this.startSession();
     }
     render() {
         if (this.error) {
-            return (h(Host, null, h("p", null, this.error)));
-        }
-        return (h(Host, null, h("button", { class: "btn", onClick: () => this.load() }, this.buttonText), this.visible && (h("div", { id: "ocs-chat-window", class: this.getPositionClasses() }, h("div", { class: "flex justify-between items-center px-2 py-2 border-b border-gray-100" }, h("div", { class: "flex gap-1" }, h("button", { class: {
-                'hidden sm:block p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,
-                'text-blue-600': this.position === 'left',
-                'text-gray-500': this.position !== 'left'
-            }, onClick: () => this.setPosition('left'), "aria-label": "Dock to left", title: "Dock to left" }, h(ArrowLeftEndOnRectangleIcon, null)), h("button", { class: {
-                'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,
-                'text-blue-600': this.position === 'center',
-                'text-gray-500': this.position !== 'center'
-            }, onClick: () => this.setPosition('center'), "aria-label": "Center", title: "Center" }, h(ViewfinderCircleIcon, null)), h("button", { class: {
-                'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,
-                'text-blue-600': this.position === 'right',
-                'text-gray-500': this.position !== 'right'
-            }, onClick: () => this.setPosition('right'), "aria-label": "Dock to right", title: "Dock to right" }, h("span", { class: "hidden sm:block" }, h(ArrowRightEndOnRectangleIcon, null)), h("span", { class: "sm:hidden" }, h(ArrowDownOnSquareIcon, null)))), h("div", { class: "flex gap-1" }, h("button", { class: "p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500", onClick: () => this.toggleSize(), "aria-label": this.expanded ? "Collapse" : "Expand", title: this.expanded ? "Collapse" : "Expand" }, this.expanded ? h(ChevronDownIcon, null) : h(ChevronUpIcon, null)), h("button", { class: "p-1.5 hover:bg-gray-100 rounded-md transition-colors duration-200 text-gray-500", onClick: () => this.visible = false, "aria-label": "Close" }, h(XMarkIcon, null)))), this.loaded && (h("iframe", { class: "flex-grow w-full border-none iframe-placeholder", src: this.botUrl }))))));
+            return (h(Host, null, h("p", { class: "text-red-500 p-2" }, 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: `flex justify-between items-center px-2 py-2 border-b border-gray-100 sm:${this.isDragging ? 'cursor-grabbing' : 'cursor-grab'} active:bg-gray-50 sm:hover:bg-gray-25 transition-colors duration-150`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { class: "hidden sm:flex gap-1" }, h("div", { class: "flex gap-0.5 ml-2 pointer-events-none" }, h(GripDotsVerticalIcon, null))), h("div", null), h("div", { class: "flex gap-1 items-center" }, this.sessionId && this.messages.length > 0 && (h("button", { class: "p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500", onClick: () => this.startNewChat(), title: "Start new chat", "aria-label": "Start new chat" }, h(PencilSquare, null))), h("button", { class: "p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500", onClick: () => this.toggleSize(), "aria-label": this.expanded ? "Collapse" : "Expand", title: this.expanded ? "Collapse" : "Expand" }, this.expanded ? h(ChevronDownIcon, null) : h(ChevronUpIcon, null)), h("button", { class: "p-1.5 hover:bg-gray-100 rounded-md transition-colors duration-200 text-gray-500", onClick: () => this.visible = false, "aria-label": "Close" }, h(XMarkIcon, null)))), h("div", { class: "flex flex-col flex-grow overflow-hidden" }, this.isLoading && !this.sessionId && (h("div", { class: "flex items-center justify-center flex-grow" }, h("div", { class: "loading-spinner" }), h("span", { class: "ml-2 text-gray-500" }, "Starting chat..."))), this.sessionId && (h("div", { ref: (el) => this.messageListRef = el, class: "flex-grow overflow-y-auto p-4 space-y-4" }, this.messages.length === 0 && !this.isTyping && this.parsedWelcomeMessages.length > 0 && (h("div", { class: "space-y-4" }, this.parsedWelcomeMessages.map((message, index) => (h("div", { key: `welcome-${index}`, class: "flex justify-start" }, h("div", { class: "bg-gray-200 text-gray-800 max-w-xs lg:max-w-md px-4 py-2 rounded-lg" }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message) }))))))), this.messages.map((message, index) => (h("div", { key: index, class: {
+                'flex': true,
+                'justify-end': message.role === 'user',
+                'justify-start': message.role !== 'user'
+            } }, h("div", { class: {
+                'max-w-xs lg:max-w-md px-4 py-2 rounded-lg': true,
+                'bg-blue-500 text-white': message.role === 'user',
+                'bg-gray-200 text-gray-800': message.role === 'assistant',
+                'bg-gray-100 text-gray-600 text-sm': message.role === 'system'
+            } }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message.content) }), message.attachments && message.attachments.length > 0 && (h("div", { class: "mt-2 space-y-1" }, message.attachments.map((attachment, attachmentIndex) => (h("a", { key: attachmentIndex, href: attachment.content_url, target: "_blank", rel: "noopener noreferrer", class: "block text-sm underline hover:no-underline" }, "\uD83D\uDCCE ", attachment.name))))), h("div", { class: "text-xs opacity-70 mt-1" }, this.formatTime(message.created_at)))))), this.isTyping && (h("div", { class: "flex justify-start" }, h("div", { class: "bg-gray-200 text-gray-800 max-w-xs lg:max-w-md px-2 py-2 rounded-lg" }, h("div", { class: "flex items-center gap-0.5" }, h("span", { class: "inline-block w-2 h-2 rounded-full bg-gray-400 animate-bounce" }), h("span", { class: "inline-block w-2 h-2 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.1s' } }), h("span", { class: "inline-block w-2 h-2 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.2s' } }))))))), this.sessionId && this.showStarterQuestions && this.messages.length === 0 && !this.isTyping && (h("div", { class: "p-4 space-y-2" }, this.parsedStarterQuestions.map((question, index) => (h("div", { key: `starter-${index}`, class: "flex justify-end" }, h("button", { class: "starter-question", onClick: () => this.handleStarterQuestionClick(question) }, question)))))), this.sessionId && (h("div", { class: "border-t border-gray-200 p-4" }, h("div", { class: "flex gap-2" }, h("textarea", { ref: (el) => this.textareaRef = el, class: "flex-grow px-3 py-2 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", 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: {
+                'px-4 py-2 rounded-md font-medium transition-colors duration-200': true,
+                'bg-blue-500 hover:bg-blue-600 text-white': !this.isTyping && !!this.messageInput.trim(),
+                'bg-gray-300 text-gray-500 cursor-not-allowed': this.isTyping || !this.messageInput.trim()
+            }, onClick: () => this.sendMessage(this.messageInput), disabled: this.isTyping || !this.messageInput.trim() }, "Send")))))))));
     }
     static get is() { return "open-chat-studio-widget"; }
     static get encapsulation() { return "shadow"; }
@@ -89,7 +640,7 @@ export class OcsChat {
     }
     static get properties() {
         return {
-            "botUrl": {
+            "chatbotId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -101,13 +652,33 @@ export class OcsChat {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The URL of the bot to connect to."
+                    "text": "The ID of the chatbot to connect to."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "bot-url",
+                "attribute": "chatbot-id",
                 "reflect": false
             },
+            "apiBaseUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The base URL for the API (defaults to current origin)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "api-base-url",
+                "reflect": false,
+                "defaultValue": "\"https://chatbots.dimagi.com\""
+            },
             "buttonText": {
                 "type": "string",
                 "mutable": false,
@@ -117,7 +688,7 @@ export class OcsChat {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The text to display on the button."
@@ -125,8 +696,46 @@ export class OcsChat {
                 "getter": false,
                 "setter": false,
                 "attribute": "button-text",
+                "reflect": false
+            },
+            "iconUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the icon to display on the button. If not provided, uses the default OCS logo."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-url",
+                "reflect": false
+            },
+            "buttonShape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'round' | 'square'",
+                    "resolved": "\"round\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "button-shape",
                 "reflect": false,
-                "defaultValue": "\"Chat\""
+                "defaultValue": "'square'"
             },
             "visible": {
                 "type": "boolean",
@@ -187,14 +796,117 @@ export class OcsChat {
                 "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "welcomeMessages": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Welcome messages to display above starter questions (JSON array of strings)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "welcome-messages",
+                "reflect": false
+            },
+            "starterQuestions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of starter questions that users can click to send (JSON array of strings)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "starter-questions",
+                "reflect": false
+            },
+            "persistentSession": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to persist session data to local storage to allow resuming previous conversations after page reload."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "persistent-session",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "persistentSessionExpire": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minutes since the most recent message after which the session data in local storage will expire. Set this to\n`0` to never expire."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "persistent-session-expire",
+                "reflect": false,
+                "defaultValue": "60 * 24"
             }
         };
     }
     static get states() {
         return {
             "loaded": {},
-            "error": {}
+            "error": {},
+            "messages": {},
+            "sessionId": {},
+            "isLoading": {},
+            "isTyping": {},
+            "messageInput": {},
+            "pollingInterval": {},
+            "lastPollTime": {},
+            "isTaskPolling": {},
+            "isDragging": {},
+            "dragOffset": {},
+            "windowPosition": {},
+            "showStarterQuestions": {},
+            "parsedWelcomeMessages": {},
+            "parsedStarterQuestions": {}
         };
     }
 }
+OcsChat.TASK_POLLING_MAX_ATTEMPTS = 30;
+OcsChat.TASK_POLLING_INTERVAL_MS = 1000;
+OcsChat.MESSAGE_POLLING_INTERVAL_MS = 30000;
+OcsChat.SCROLL_DELAY_MS = 100;
+OcsChat.FOCUS_DELAY_MS = 100;
+OcsChat.CHAT_WIDTH_DESKTOP = 450;
+OcsChat.CHAT_HEIGHT_EXPANDED_RATIO = 0.83; // 83% of window height
+OcsChat.CHAT_HEIGHT_COLLAPSED_RATIO = 0.6; // 60% of window height
+OcsChat.MOBILE_BREAKPOINT = 640;
+OcsChat.WINDOW_MARGIN = 20;
+OcsChat.LOCALSTORAGE_TEST_KEY = '__ocs_test__';
 //# sourceMappingURL=ocs-chat.js.map