open-chat-studio-widget 0.4.0 → 0.4.2

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { XMarkIcon, ChevronDownIcon, ChevronUpIcon, GripDotsVerticalIcon, PencilSquare, } from "./heroicons";
+import { XMarkIcon, GripDotsVerticalIcon, PencilSquare, ArrowsPointingOutIcon, ArrowsPointingInIcon, } from "./heroicons";
 import { renderMarkdownSync as renderMarkdownComplete } from "../../utils/markdown";
 export class OcsChat {
     constructor() {
@@ -19,10 +19,6 @@ export class OcsChat {
          * The initial position of the chat widget on the screen.
          */
         this.position = 'right';
-        /**
-         * 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.
          */
@@ -32,6 +28,10 @@ export class OcsChat {
          * `0` to never expire.
          */
         this.persistentSessionExpire = 60 * 24;
+        /**
+         * Allow the user to make the chat window full screen.
+         */
+        this.allowFullScreen = true;
         this.loaded = false;
         this.error = "";
         this.messages = [];
@@ -42,11 +42,13 @@ export class OcsChat {
         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.handleMouseDown = (event) => {
-            if (window.innerWidth < OcsChat.MOBILE_BREAKPOINT)
+            if (!this.isFullscreen && window.innerWidth < OcsChat.MOBILE_BREAKPOINT)
                 return;
             if (event.target.closest('button'))
                 return;
@@ -164,18 +166,24 @@ export class OcsChat {
         try {
             this.isLoading = true;
             this.error = '';
+            const userId = this.getOrGenerateUserId();
+            const requestBody = {
+                chatbot_id: this.chatbotId,
+                session_data: {
+                    source: 'widget',
+                    page_url: window.location.href
+                },
+                participant_remote_id: userId
+            };
+            if (this.userName) {
+                requestBody.participant_name = this.userName;
+            }
             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
-                    }
-                })
+                body: JSON.stringify(requestBody)
             });
             if (!response.ok) {
                 throw new Error(`Failed to start session: ${response.statusText}`);
@@ -398,13 +406,31 @@ export class OcsChat {
             return;
         this.position = position;
     }
-    toggleSize() {
-        this.expanded = !this.expanded;
-    }
     getPositionClasses() {
-        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`;
+        if (this.isFullscreen) {
+            return 'chat-window-fullscreen';
+        }
+        const baseClasses = 'chat-window-normal';
+        const draggingClass = this.isDragging ? ' chat-window-dragging' : '';
+        return baseClasses + draggingClass;
+    }
+    getFullscreenBounds() {
+        const windowWidth = window.innerWidth;
+        const actualChatWidth = Math.min(windowWidth, OcsChat.CHAT_MAX_WIDTH);
+        const centeredX = (windowWidth - actualChatWidth) / 2;
+        const maxOffset = (windowWidth - actualChatWidth) / 2;
+        return { windowWidth, actualChatWidth, centeredX, maxOffset };
     }
     getPositionStyles() {
+        if (this.isFullscreen) {
+            const { centeredX } = this.getFullscreenBounds();
+            const finalX = centeredX + this.fullscreenPosition.x;
+            return {
+                left: `${finalX}px`,
+                top: '0px',
+                transform: 'none',
+            };
+        }
         return {
             left: `${this.windowPosition.x}px`,
             top: `${this.windowPosition.y}px`,
@@ -414,9 +440,7 @@ export class OcsChat {
         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 chatHeight = windowHeight * OcsChat.CHAT_HEIGHT_EXPANDED_RATIO;
         const isMobile = windowWidth < OcsChat.MOBILE_BREAKPOINT;
         if (isMobile) {
             this.windowPosition = { x: 0, y: 0 };
@@ -457,28 +481,45 @@ export class OcsChat {
         if (!this.chatWindowRef)
             return;
         this.isDragging = true;
-        const rect = this.chatWindowRef.getBoundingClientRect();
-        this.dragOffset = {
-            x: pointer.clientX - rect.left,
-            y: pointer.clientY - rect.top
-        };
+        if (this.isFullscreen) {
+            // For fullscreen, track relative to current position
+            this.dragOffset = {
+                x: pointer.clientX,
+                y: pointer.clientY
+            };
+        }
+        else {
+            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))
-        };
+        if (this.isFullscreen) {
+            // In fullscreen, only allow horizontal dragging
+            const { maxOffset } = this.getFullscreenBounds();
+            const deltaX = pointer.clientX - this.dragOffset.x;
+            this.fullscreenPosition = {
+                x: Math.max(-maxOffset, Math.min(maxOffset, deltaX))
+            };
+        }
+        else {
+            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 = windowHeight * OcsChat.CHAT_HEIGHT_EXPANDED_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;
@@ -576,6 +617,27 @@ export class OcsChat {
             return { messages: [] };
         }
     }
+    getOrGenerateUserId() {
+        if (this.userId) {
+            return this.userId;
+        }
+        if (this.generatedUserId) {
+            return this.generatedUserId;
+        }
+        const storageKey = `ocs-user-id`;
+        const stored = localStorage.getItem(storageKey);
+        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 newUserId = `ocs:${Date.now()}_${randomString}`;
+        this.generatedUserId = newUserId;
+        localStorage.setItem(storageKey, newUserId);
+        return newUserId;
+    }
     clearSessionStorage() {
         const keys = this.getStorageKeys();
         try {
@@ -607,24 +669,22 @@ export class OcsChat {
         this.cleanup();
         await this.startSession();
     }
+    toggleFullscreen() {
+        this.isFullscreen = !this.isFullscreen;
+        // Reset fullscreen position when toggling
+        this.fullscreenPosition = { x: 0 };
+    }
     render() {
         if (this.error) {
-            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")))))))));
+            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" }, h(GripDotsVerticalIcon, null))), h("div", { class: "drag-spacer" }), 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'
+                ? '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()
+                ? 'send-button-enabled'
+                : 'send-button-disabled'}`, 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"; }
@@ -777,27 +837,26 @@ export class OcsChat {
                 "reflect": false,
                 "defaultValue": "'right'"
             },
-            "expanded": {
-                "type": "boolean",
-                "mutable": true,
+            "welcomeMessages": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the chat widget is initially expanded."
+                    "text": "Welcome messages to display above starter questions (JSON array of strings)"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expanded",
-                "reflect": false,
-                "defaultValue": "false"
+                "attribute": "welcome-messages",
+                "reflect": false
             },
-            "welcomeMessages": {
+            "starterQuestions": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -809,14 +868,14 @@ export class OcsChat {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Welcome messages to display above starter questions (JSON array of strings)"
+                    "text": "Array of starter questions that users can click to send (JSON array of strings)"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "welcome-messages",
+                "attribute": "starter-questions",
                 "reflect": false
             },
-            "starterQuestions": {
+            "userId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -828,11 +887,30 @@ export class OcsChat {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Array of starter questions that users can click to send (JSON array of strings)"
+                    "text": "Used to associate chat sessions with a specific user across multiple visits/sessions"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "starter-questions",
+                "attribute": "user-id",
+                "reflect": false
+            },
+            "userName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Display name for the user."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "user-name",
                 "reflect": false
             },
             "persistentSession": {
@@ -874,6 +952,26 @@ export class OcsChat {
                 "attribute": "persistent-session-expire",
                 "reflect": false,
                 "defaultValue": "60 * 24"
+            },
+            "allowFullScreen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow the user to make the chat window full screen."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "allow-full-screen",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -892,9 +990,12 @@ export class OcsChat {
             "isDragging": {},
             "dragOffset": {},
             "windowPosition": {},
+            "fullscreenPosition": {},
             "showStarterQuestions": {},
             "parsedWelcomeMessages": {},
-            "parsedStarterQuestions": {}
+            "parsedStarterQuestions": {},
+            "generatedUserId": {},
+            "isFullscreen": {}
         };
     }
 }
@@ -904,8 +1005,8 @@ 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.CHAT_MAX_WIDTH = 1024;
+OcsChat.CHAT_HEIGHT_EXPANDED_RATIO = 0.83; // 83% of window height (h-5/6)
 OcsChat.MOBILE_BREAKPOINT = 640;
 OcsChat.WINDOW_MARGIN = 20;
 OcsChat.LOCALSTORAGE_TEST_KEY = '__ocs_test__';