open-chat-studio-widget 0.4.7 → 0.5.0

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

@@ -1,26 +1,6 @@
-interface ChatMessage {
-    created_at: string;
-    role: 'system' | 'user' | 'assistant';
-    content: string;
-    metadata?: any;
-    attachments?: ChatAttachment[];
-}
-interface ChatAttachment {
-    name: string;
-    content_type: string;
-    size: number;
-}
-interface UploadedFile {
-    id: number;
-    name: string;
-    size: number;
-    content_type: string;
-}
-interface SelectedFile {
-    file: File;
-    uploaded?: UploadedFile;
-    error?: string;
-}
+import { TranslationManager } from '../../utils/translations';
+import { ChatMessage } from '../../services/chat-session-service';
+import { SelectedFile } from '../../services/file-attachment-manager';
 export declare class OcsChat {
     private static readonly TASK_POLLING_MAX_ATTEMPTS;
     private static readonly TASK_POLLING_INTERVAL_MS;
@@ -38,7 +18,7 @@ export declare class OcsChat {
      */
     chatbotId: string;
     /**
-     * The base URL for the API (defaults to current origin).
+     * The base URL for the API.
      */
     apiBaseUrl?: string;
     /**
@@ -49,6 +29,10 @@ export declare class OcsChat {
      * URL of the icon to display on the button. If not provided, uses the default OCS logo.
      */
     iconUrl?: string;
+    /**
+     * Authentication key for embedded channels
+     */
+    embedKey?: string;
     /**
      * The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
      */
@@ -106,6 +90,11 @@ export declare class OcsChat {
      * The text to display while the assistant is typing/preparing a response.
      */
     typingIndicatorText?: string;
+    /**
+     * The language code for the widget UI (e.g., 'en', 'es', 'fr'). Defaults to en
+     */
+    language?: string;
+    translationsUrl?: string;
     error: string;
     messages: ChatMessage[];
     sessionId?: string;
@@ -132,37 +121,50 @@ export declare class OcsChat {
     showNewChatConfirmation: boolean;
     selectedFiles: SelectedFile[];
     isUploadingFiles: boolean;
-    private pollingIntervalRef?;
+    private buttonPosition;
+    private buttonHorizontalSide;
+    private buttonVerticalSide;
+    isButtonDragging: boolean;
+    buttonWasDragged: boolean;
+    translationManager: TranslationManager;
+    private chatService?;
+    private messagePollingHandle?;
+    private taskPollingHandle?;
+    private attachmentManager;
     private messageListRef?;
     private textareaRef?;
     private chatWindowRef?;
     private fileInputRef?;
+    private buttonRef?;
+    private buttonDragOffset;
+    private rafId;
+    private buttonListenersAttached;
     private chatWindowHeight;
     private chatWindowWidth;
     private chatWindowFullscreenWidth;
     private positionInitialized;
     host: HTMLElement;
-    componentWillLoad(): void;
+    componentWillLoad(): Promise<void>;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private getChatService;
     private addErrorMessage;
     private handleError;
     private parseJSONProp;
     private parseWelcomeMessages;
     private parseStarterQuestions;
+    private initializeTranslations;
+    private loadTranslationsFromUrl;
     private cleanup;
-    private getApiBaseUrl;
-    private getApiHeaders;
     private startSession;
-    private markPendingFilesWithError;
     private uploadFiles;
     private sendMessage;
     private handleStarterQuestionClick;
-    private pollTaskResponse;
-    private startPolling;
-    private pauseMessagePolling;
-    private resumeMessagePolling;
-    private pollForMessages;
+    /**
+     * Scroll the message container to the bottom.
+     * @param forceEnd When `false`, scroll the top of the last message into view.
+     *    When `true`, scroll all the way to the end of the last message.
+     */
     private scrollToBottom;
     private focusInput;
     private handleKeyPress;
@@ -178,6 +180,9 @@ export declare class OcsChat {
      * @param visible - The new value for the field.
      */
     visibilityHandler(visible: boolean): Promise<void>;
+    private startTaskPolling;
+    private startMessagePolling;
+    private stopMessagePolling;
     setPosition(position: 'left' | 'center' | 'right'): void;
     getPositionClasses(): string;
     private getFullscreenBounds;
@@ -204,7 +209,24 @@ export declare class OcsChat {
     private handleTouchMove;
     private handleTouchEnd;
     private handleWindowResize;
-    private getDefaultIconUrl;
+    private initializeButtonPosition;
+    private updateHostPosition;
+    private isButtonDraggable;
+    private handleButtonMouseDown;
+    private handleButtonTouchStart;
+    private handleButtonMouseMove;
+    private handleButtonTouchMove;
+    private updateButtonPosition;
+    private handleButtonMouseUp;
+    private handleButtonTouchEnd;
+    private handleButtonClick;
+    private addButtonEventListeners;
+    private removeButtonEventListeners;
+    private isAutoPosition;
+    private parsePixelValue;
+    private getNumericPositionValue;
+    private getWelcomeMessages;
+    private getStarterQuestions;
     private getButtonClasses;
     private renderButton;
     private getStorageKeys;
@@ -220,4 +242,3 @@ export declare class OcsChat {
     private toggleFullscreen;
     render(): any;
 }
-export {};

package/dist/types/components.d.ts

@@ -9,18 +9,22 @@ export namespace Components {
     interface OpenChatStudioWidget {
         /**
           * Allow the user to attach files to their messages.
+          * @default false
          */
         "allowAttachments": boolean;
         /**
           * Allow the user to make the chat window full screen.
+          * @default true
          */
         "allowFullScreen": boolean;
         /**
-          * The base URL for the API (defaults to current origin).
+          * The base URL for the API.
+          * @default "https://www.openchatstudio.com"
          */
         "apiBaseUrl"?: string;
         /**
           * The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
+          * @default 'square'
          */
         "buttonShape": 'round' | 'square';
         /**
@@ -31,6 +35,10 @@ export namespace Components {
           * The ID of the chatbot to connect to.
          */
         "chatbotId": string;
+        /**
+          * Authentication key for embedded channels
+         */
+        "embedKey"?: string;
         /**
           * The text to place in the header.
          */
@@ -39,26 +47,34 @@ export namespace Components {
           * URL of the icon to display on the button. If not provided, uses the default OCS logo.
          */
         "iconUrl"?: string;
+        /**
+          * The language code for the widget UI (e.g., 'en', 'es', 'fr'). Defaults to en
+         */
+        "language"?: string;
         /**
           * The message to display in the new chat confirmation dialog.
          */
         "newChatConfirmationMessage"?: string;
         /**
           * Whether to persist session data to local storage to allow resuming previous conversations after page reload.
+          * @default true
          */
         "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.
+          * @default 60 * 24
          */
         "persistentSessionExpire": number;
         /**
           * The initial position of the chat widget on the screen.
+          * @default 'right'
          */
         "position": 'left' | 'center' | 'right';
         /**
           * Array of starter questions that users can click to send (JSON array of strings)
          */
         "starterQuestions"?: string;
+        "translationsUrl"?: string;
         /**
           * The text to display while the assistant is typing/preparing a response.
          */
@@ -73,6 +89,7 @@ export namespace Components {
         "userName"?: string;
         /**
           * Whether the chat widget is visible on load.
+          * @default false
          */
         "visible": boolean;
         /**
@@ -96,18 +113,22 @@ declare namespace LocalJSX {
     interface OpenChatStudioWidget {
         /**
           * Allow the user to attach files to their messages.
+          * @default false
          */
         "allowAttachments"?: boolean;
         /**
           * Allow the user to make the chat window full screen.
+          * @default true
          */
         "allowFullScreen"?: boolean;
         /**
-          * The base URL for the API (defaults to current origin).
+          * The base URL for the API.
+          * @default "https://www.openchatstudio.com"
          */
         "apiBaseUrl"?: string;
         /**
           * The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
+          * @default 'square'
          */
         "buttonShape"?: 'round' | 'square';
         /**
@@ -118,6 +139,10 @@ declare namespace LocalJSX {
           * The ID of the chatbot to connect to.
          */
         "chatbotId": string;
+        /**
+          * Authentication key for embedded channels
+         */
+        "embedKey"?: string;
         /**
           * The text to place in the header.
          */
@@ -126,26 +151,34 @@ declare namespace LocalJSX {
           * URL of the icon to display on the button. If not provided, uses the default OCS logo.
          */
         "iconUrl"?: string;
+        /**
+          * The language code for the widget UI (e.g., 'en', 'es', 'fr'). Defaults to en
+         */
+        "language"?: string;
         /**
           * The message to display in the new chat confirmation dialog.
          */
         "newChatConfirmationMessage"?: string;
         /**
           * Whether to persist session data to local storage to allow resuming previous conversations after page reload.
+          * @default true
          */
         "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.
+          * @default 60 * 24
          */
         "persistentSessionExpire"?: number;
         /**
           * The initial position of the chat widget on the screen.
+          * @default 'right'
          */
         "position"?: 'left' | 'center' | 'right';
         /**
           * Array of starter questions that users can click to send (JSON array of strings)
          */
         "starterQuestions"?: string;
+        "translationsUrl"?: string;
         /**
           * The text to display while the assistant is typing/preparing a response.
          */
@@ -160,6 +193,7 @@ declare namespace LocalJSX {
         "userName"?: string;
         /**
           * Whether the chat widget is visible on load.
+          * @default false
          */
         "visible"?: boolean;
         /**

package/dist/types/services/chat-session-service.d.ts

@@ -0,0 +1,78 @@
+export type ChatRole = 'system' | 'user' | 'assistant';
+export interface ChatAttachment {
+    name: string;
+    content_type: string;
+    size: number;
+}
+export interface ChatMessage {
+    created_at: string;
+    role: ChatRole;
+    content: string;
+    metadata?: unknown;
+    attachments?: ChatAttachment[];
+}
+export interface ChatStartSessionResponse {
+    session_id: string;
+    chatbot: unknown;
+    participant: unknown;
+    seed_message_task_id?: string;
+}
+export interface ChatSendMessageResponse {
+    task_id: string;
+    status: 'processing' | 'completed' | 'error';
+    error?: string;
+}
+export interface ChatTaskPollResponse {
+    message?: ChatMessage;
+    status: 'processing' | 'complete';
+    error?: string;
+}
+export interface ChatPollResponse {
+    messages: ChatMessage[];
+    has_more: boolean;
+    session_status: 'active' | 'ended';
+}
+export interface ChatSessionServiceOptions {
+    apiBaseUrl: string;
+    embedKey?: string;
+    widgetVersion: string;
+    csrfTokenProvider?: (apiBaseUrl: string) => string | undefined;
+    taskPollingIntervalMs?: number;
+    taskPollingMaxAttempts?: number;
+    messagePollingIntervalMs?: number;
+}
+export interface TaskPollingCallbacks {
+    onMessage: (message: ChatMessage) => void;
+    onTimeout?: () => void;
+    onError?: (error: Error) => void;
+}
+export interface TaskPollingHandle {
+    cancel: () => void;
+}
+export interface MessagePollingCallbacks {
+    getSince: () => string | undefined;
+    onMessages: (messages: ChatMessage[]) => void;
+    onError?: (error: Error) => void;
+}
+export interface MessagePollingHandle {
+    stop: () => void;
+}
+export declare class ChatSessionService {
+    private readonly apiBaseUrl;
+    private readonly embedKey?;
+    private readonly widgetVersion;
+    private readonly csrfTokenProvider;
+    private readonly taskPollingIntervalMs;
+    private readonly taskPollingMaxAttempts;
+    private readonly messagePollingIntervalMs;
+    private messagePollingTimer?;
+    constructor(options: ChatSessionServiceOptions);
+    startSession(requestBody: Record<string, unknown>): Promise<ChatStartSessionResponse>;
+    sendMessage(sessionId: string, payload: Record<string, unknown>): Promise<ChatSendMessageResponse>;
+    pollTaskOnce(sessionId: string, taskId: string): Promise<ChatTaskPollResponse>;
+    pollTask(sessionId: string, taskId: string, callbacks: TaskPollingCallbacks): TaskPollingHandle;
+    fetchMessages(sessionId: string, since?: string): Promise<ChatPollResponse>;
+    startMessagePolling(sessionId: string, callbacks: MessagePollingCallbacks): MessagePollingHandle;
+    stopMessagePolling(): void;
+    private getJsonHeaders;
+}

package/dist/types/services/file-attachment-manager.d.ts

@@ -0,0 +1,40 @@
+export interface UploadedFile {
+    id: number;
+    name: string;
+    size: number;
+    content_type: string;
+}
+export interface SelectedFile {
+    file: File;
+    uploaded?: UploadedFile;
+    error?: string;
+}
+export interface AttachmentValidationConfig {
+    supportedExtensions: string[];
+    maxFileSizeMb: number;
+    maxTotalSizeMb: number;
+}
+export interface UploadContext {
+    apiBaseUrl: string;
+    sessionId: string;
+    participantId: string;
+    participantName?: string;
+}
+export interface UploadResult {
+    selectedFiles: SelectedFile[];
+    uploadedIds: number[];
+    errorMessage?: string;
+}
+export declare class FileAttachmentManager {
+    private readonly supportedExtensions;
+    private readonly maxFileSizeMb;
+    private readonly maxTotalSizeMb;
+    constructor(config: AttachmentValidationConfig);
+    addFiles(existingFiles: SelectedFile[], files: FileList | File[]): SelectedFile[];
+    removeFile(existingFiles: SelectedFile[], index: number): SelectedFile[];
+    markPendingFilesWithError(existingFiles: SelectedFile[], errorMessage: string): SelectedFile[];
+    uploadPendingFiles(existingFiles: SelectedFile[], context: UploadContext): Promise<UploadResult>;
+    private bytesToMb;
+    private getFileExtension;
+    private safeJson;
+}

package/dist/types/stencil-public-runtime.d.ts

@@ -260,6 +260,25 @@ export declare function setPlatformHelpers(helpers: {
  * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
+/**
+ * Method to render a virtual DOM tree to a container element.
+ *
+ * @example
+ * ```tsx
+ * import { render } from '@stencil/core';
+ *
+ * const vnode = (
+ *   <div>
+ *     <h1>Hello, world!</h1>
+ *   </div>
+ * );
+ * render(vnode, document.body);
+ * ```
+ *
+ * @param vnode - The virtual DOM tree to render
+ * @param container - The container element to render the virtual DOM tree to
+ */
+export declare function render(vnode: VNode, container: Element): void;
 /**
  * Used to manually set the base path where assets can be found. For lazy-loaded
  * builds the asset path is automatically set and assets copied to the correct
@@ -826,7 +845,8 @@ export declare namespace JSXBase {
     }
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
-        onToggle?: (event: Event) => void;
+        name?: string;
+        onToggle?: (event: ToggleEvent) => void;
     }
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
         cite?: string;
@@ -1532,6 +1552,13 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
+    interface ToggleEvent extends Event {
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+        readonly newState: string;
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+        readonly oldState: string;
+    }
     interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
@@ -1548,6 +1575,10 @@ export declare namespace JSXBase {
         onCompositionstartCapture?: (event: CompositionEvent) => void;
         onCompositionupdate?: (event: CompositionEvent) => void;
         onCompositionupdateCapture?: (event: CompositionEvent) => void;
+        onBeforeToggle?: (event: ToggleEvent) => void;
+        onBeforeToggleCapture?: (event: ToggleEvent) => void;
+        onToggle?: (event: ToggleEvent) => void;
+        onToggleCapture?: (event: ToggleEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1566,10 +1597,6 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
-        onBeforeToggle?: (event: Event) => void;
-        onBeforeToggleCapture?: (event: Event) => void;
-        onToggle?: (event: Event) => void;
-        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;
@@ -1581,7 +1608,7 @@ export declare namespace JSXBase {
         onKeyUp?: (event: KeyboardEvent) => void;
         onKeyUpCapture?: (event: KeyboardEvent) => void;
         onAuxClick?: (event: MouseEvent) => void;
-        onClick?: (event: MouseEvent) => void;
+        onClick?: (event: PointerEvent) => void;
         onClickCapture?: (event: MouseEvent) => void;
         onContextMenu?: (event: MouseEvent) => void;
         onContextMenuCapture?: (event: MouseEvent) => void;
@@ -1661,6 +1688,8 @@ export declare namespace JSXBase {
         onTransitionRunCapture?: (event: TransitionEvent) => void;
         onTransitionStart?: (event: TransitionEvent) => void;
         onTransitionStartCapture?: (event: TransitionEvent) => void;
+        [key: `aria-${string}`]: string | boolean | undefined;
+        [key: `aria${string}`]: string | boolean | undefined;
     }
 }
 export interface JSXAttributes<T = Element> {

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

@@ -0,0 +1,23 @@
+/**
+ * Translation utilities for the chat widget
+ */
+import en from '../assets/translations/en.json';
+export type TranslationStrings = typeof en;
+export declare const defaultTranslations: TranslationStrings;
+export declare function getBrowserLanguage(): string;
+export declare function resolveLanguage(langProp?: string): string;
+export declare function loadTranslations(language: string): Promise<TranslationStrings>;
+/**
+ * Overrides matching keys
+ */
+export declare function mergeTranslations(baseTranslations: TranslationStrings, customTranslations: Partial<TranslationStrings>): TranslationStrings;
+export declare class TranslationManager {
+    private translations;
+    private language;
+    constructor(language?: string, customTranslations?: Partial<TranslationStrings>);
+    private loadTranslations;
+    get(key: keyof TranslationStrings, override?: string | null): string | undefined;
+    getAll(): TranslationStrings;
+    getArray(key: keyof TranslationStrings): string[];
+    getLanguage(): string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "open-chat-studio-widget",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "description": "Chat component for Open Chat Studio",
   "main": "dist/index.cjs.js",
   "exports": "./dist/esm/open-chat-studio-widget.js",
@@ -20,16 +20,19 @@
     "loader/"
   ],
   "scripts": {
+    "test": "stencil test --spec",
     "build": "stencil build --docs",
     "start": "stencil build --dev --watch --serve",
     "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'",
     "prepublishOnly": "run-s build use:npmReadme",
-    "postpublish": "npm run use:gitReadme"
+    "postpublish": "npm run use:gitReadme",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint --fix src"
   },
   "dependencies": {
-    "@stencil/core": "^4.26.0",
+    "@stencil/core": "^4.27.0",
     "dompurify": "^3.0.5",
     "js-cookie": "^3.0.5",
     "marked": "^4.3.0",
@@ -37,6 +40,7 @@
   },
   "devDependencies": {
     "@stencil-community/postcss": "^2.2.0",
+    "@tailwindcss/postcss": "^4.1.12",
     "@tailwindcss/typography": "^0.5.16",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.13.4",
@@ -46,7 +50,8 @@
     "npm-run-all": "^4.1.5",
     "postcss-import": "^16.1.0",
     "puppeteer": "^24.2.0",
-    "tailwindcss": "^3.4.17",
+    "stencil-tailwind-plugin": "^2.0.5",
+    "tailwindcss": "^4.1.12",
     "typescript": "^5.7.3"
   },
   "license": "MIT"

package/dist/cjs/app-globals-3a1e7e63.js

@@ -1,7 +0,0 @@
-'use strict';
-
-const globalScripts = () => {};
-
-exports.globalScripts = globalScripts;
-
-//# sourceMappingURL=app-globals-3a1e7e63.js.map

package/dist/cjs/app-globals-3a1e7e63.js.map

@@ -1 +0,0 @@
-{"file":"app-globals-3a1e7e63.js","mappings":";;AAAY,MAAC,aAAa,GAAG,MAAM;;;;","names":[],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"version":3}