open-chat-studio-widget 0.3.1 → 0.4.0

package/dist/types/components/ocs-chat/heroicons.d.ts

@@ -1,7 +1,5 @@
-export declare const ArrowLeftEndOnRectangleIcon: () => any;
-export declare const ArrowRightEndOnRectangleIcon: () => any;
-export declare const ArrowDownOnSquareIcon: () => any;
-export declare const ViewfinderCircleIcon: () => any;
 export declare const XMarkIcon: () => any;
 export declare const ChevronUpIcon: () => any;
 export declare const ChevronDownIcon: () => any;
+export declare const GripDotsVerticalIcon: () => any;
+export declare const PencilSquare: () => any;

package/dist/types/components/ocs-chat/ocs-chat.d.ts

@@ -1,12 +1,48 @@
+interface ChatMessage {
+    created_at: string;
+    role: 'system' | 'user' | 'assistant';
+    content: string;
+    metadata?: any;
+    attachments?: ChatAttachment[];
+}
+interface ChatAttachment {
+    name: string;
+    content_type: string;
+    size: number;
+    content_url: string;
+}
 export declare class OcsChat {
+    private static readonly TASK_POLLING_MAX_ATTEMPTS;
+    private static readonly TASK_POLLING_INTERVAL_MS;
+    private static readonly MESSAGE_POLLING_INTERVAL_MS;
+    private static readonly SCROLL_DELAY_MS;
+    private static readonly FOCUS_DELAY_MS;
+    private static readonly CHAT_WIDTH_DESKTOP;
+    private static readonly CHAT_HEIGHT_EXPANDED_RATIO;
+    private static readonly CHAT_HEIGHT_COLLAPSED_RATIO;
+    private static readonly MOBILE_BREAKPOINT;
+    private static readonly WINDOW_MARGIN;
+    private static readonly LOCALSTORAGE_TEST_KEY;
+    /**
+     * The ID of the chatbot to connect to.
+     */
+    chatbotId: string;
     /**
-     * The URL of the bot to connect to.
+     * The base URL for the API (defaults to current origin).
      */
-    botUrl: string;
+    apiBaseUrl?: string;
     /**
      * The text to display on the button.
      */
-    buttonText: string;
+    buttonText?: string;
+    /**
+     * URL of the icon to display on the button. If not provided, uses the default OCS logo.
+     */
+    iconUrl?: string;
+    /**
+     * The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
+     */
+    buttonShape: 'round' | 'square';
     /**
      * Whether the chat widget is visible on load.
      */
@@ -19,12 +55,101 @@ export declare class OcsChat {
      * Whether the chat widget is initially expanded.
      */
     expanded: boolean;
+    /**
+     * Welcome messages to display above starter questions (JSON array of strings)
+     */
+    welcomeMessages?: string;
+    /**
+     * Array of starter questions that users can click to send (JSON array of strings)
+     */
+    starterQuestions?: string;
+    /**
+     * Whether to persist session data to local storage to allow resuming previous conversations after page reload.
+     */
+    persistentSession: boolean;
+    /**
+     * Minutes since the most recent message after which the session data in local storage will expire. Set this to
+     * `0` to never expire.
+     */
+    persistentSessionExpire: number;
     loaded: boolean;
     error: string;
+    messages: ChatMessage[];
+    sessionId?: string;
+    isLoading: boolean;
+    isTyping: boolean;
+    messageInput: string;
+    pollingInterval?: any;
+    lastPollTime?: Date;
+    isTaskPolling: boolean;
+    isDragging: boolean;
+    dragOffset: {
+        x: number;
+        y: number;
+    };
+    windowPosition: {
+        x: number;
+        y: number;
+    };
+    showStarterQuestions: boolean;
+    parsedWelcomeMessages: string[];
+    parsedStarterQuestions: string[];
+    private messageListRef?;
+    private textareaRef?;
+    private chatWindowRef?;
     componentWillLoad(): void;
-    load(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private parseJSONProp;
+    private parseWelcomeMessages;
+    private parseStarterQuestions;
+    private cleanup;
+    private getApiBaseUrl;
+    private startSession;
+    private sendMessage;
+    private handleStarterQuestionClick;
+    private pollTaskResponse;
+    private startPolling;
+    private pauseMessagePolling;
+    private resumeMessagePolling;
+    private pollForMessages;
+    private clearError;
+    private scrollToBottom;
+    private focusInput;
+    private handleKeyPress;
+    private handleInputChange;
+    private formatTime;
+    load(): Promise<void>;
     setPosition(position: 'left' | 'center' | 'right'): void;
     toggleSize(): void;
     getPositionClasses(): string;
+    getPositionStyles(): {
+        left: string;
+        top: string;
+    };
+    private initializePosition;
+    private getPointerCoordinates;
+    private startDrag;
+    private updateDragPosition;
+    private endDrag;
+    private addEventListeners;
+    private removeEventListeners;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private handleTouchStart;
+    private handleTouchMove;
+    private handleTouchEnd;
+    private handleWindowResize;
+    private getDefaultIconUrl;
+    private getButtonClasses;
+    private renderButton;
+    private getStorageKeys;
+    private saveSessionToStorage;
+    private loadSessionFromStorage;
+    private clearSessionStorage;
+    private isLocalStorageAvailable;
+    private startNewChat;
     render(): any;
 }
+export {};

package/dist/types/components.d.ts

@@ -8,25 +8,53 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
     interface OpenChatStudioWidget {
         /**
-          * The URL of the bot to connect to.
+          * The base URL for the API (defaults to current origin).
          */
-        "botUrl": string;
+        "apiBaseUrl"?: string;
+        /**
+          * The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
+         */
+        "buttonShape": 'round' | 'square';
         /**
           * The text to display on the button.
          */
-        "buttonText": string;
+        "buttonText"?: string;
+        /**
+          * The ID of the chatbot to connect to.
+         */
+        "chatbotId": string;
         /**
           * Whether the chat widget is initially expanded.
          */
         "expanded": boolean;
+        /**
+          * URL of the icon to display on the button. If not provided, uses the default OCS logo.
+         */
+        "iconUrl"?: string;
+        /**
+          * Whether to persist session data to local storage to allow resuming previous conversations after page reload.
+         */
+        "persistentSession": boolean;
+        /**
+          * Minutes since the most recent message after which the session data in local storage will expire. Set this to `0` to never expire.
+         */
+        "persistentSessionExpire": number;
         /**
           * The initial position of the chat widget on the screen.
          */
         "position": 'left' | 'center' | 'right';
+        /**
+          * Array of starter questions that users can click to send (JSON array of strings)
+         */
+        "starterQuestions"?: string;
         /**
           * Whether the chat widget is visible on load.
          */
         "visible": boolean;
+        /**
+          * Welcome messages to display above starter questions (JSON array of strings)
+         */
+        "welcomeMessages"?: string;
     }
 }
 declare global {
@@ -43,25 +71,53 @@ declare global {
 declare namespace LocalJSX {
     interface OpenChatStudioWidget {
         /**
-          * The URL of the bot to connect to.
+          * The base URL for the API (defaults to current origin).
          */
-        "botUrl": string;
+        "apiBaseUrl"?: string;
+        /**
+          * The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
+         */
+        "buttonShape"?: 'round' | 'square';
         /**
           * The text to display on the button.
          */
         "buttonText"?: string;
+        /**
+          * The ID of the chatbot to connect to.
+         */
+        "chatbotId": string;
         /**
           * Whether the chat widget is initially expanded.
          */
         "expanded"?: boolean;
+        /**
+          * URL of the icon to display on the button. If not provided, uses the default OCS logo.
+         */
+        "iconUrl"?: string;
+        /**
+          * Whether to persist session data to local storage to allow resuming previous conversations after page reload.
+         */
+        "persistentSession"?: boolean;
+        /**
+          * Minutes since the most recent message after which the session data in local storage will expire. Set this to `0` to never expire.
+         */
+        "persistentSessionExpire"?: number;
         /**
           * The initial position of the chat widget on the screen.
          */
         "position"?: 'left' | 'center' | 'right';
+        /**
+          * Array of starter questions that users can click to send (JSON array of strings)
+         */
+        "starterQuestions"?: string;
         /**
           * Whether the chat widget is visible on load.
          */
         "visible"?: boolean;
+        /**
+          * Welcome messages to display above starter questions (JSON array of strings)
+         */
+        "welcomeMessages"?: string;
     }
     interface IntrinsicElements {
         "open-chat-studio-widget": OpenChatStudioWidget;

package/dist/types/utils/markdown.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Post-processes rendered HTML to add additional attributes
+ * This is called after DOMPurify to ensure external links open in new tabs
+ */
+export declare function postProcessMarkdownHTML(html: string): string;
+export declare function renderMarkdownSync(content: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "open-chat-studio-widget",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Chat component for Open Chat Studio",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -21,8 +21,6 @@
   "scripts": {
     "build": "stencil build --docs",
     "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "use:npmReadme": "mv 'README.md' 'git.README.md' && cp 'src/components/ocs-chat/readme.md' 'README.md'",
     "use:gitReadme": "mv 'git.README.md' 'README.md'",
@@ -31,10 +29,13 @@
   },
   "dependencies": {
     "@stencil/core": "^4.26.0",
+    "dompurify": "^3.0.5",
+    "marked": "^4.3.0",
     "npmrc": "^1.1.1"
   },
   "devDependencies": {
     "@stencil-community/postcss": "^2.2.0",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.13.4",
     "autoprefixer": "^10.4.20",