open-chat-studio-widget 0.4.8 → 0.5.1

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,45 @@ 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.
@@ -183,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;
@@ -209,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;
@@ -225,4 +242,3 @@ export declare class OcsChat {
     private toggleFullscreen;
     render(): any;
 }
-export {};

package/dist/types/components.d.ts

@@ -18,8 +18,8 @@ export namespace Components {
          */
         "allowFullScreen": boolean;
         /**
-          * The base URL for the API (defaults to current origin).
-          * @default "https://chatbots.dimagi.com"
+          * The base URL for the API.
+          * @default "https://www.openchatstudio.com"
          */
         "apiBaseUrl"?: string;
         /**
@@ -35,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.
          */
@@ -43,9 +47,12 @@ 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.
-          * @default "Starting a new chat will clear your current conversation. Continue?"
          */
         "newChatConfirmationMessage"?: string;
         /**
@@ -67,9 +74,9 @@ export namespace Components {
           * 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.
-          * @default "Preparing response"
          */
         "typingIndicatorText"?: string;
         /**
@@ -115,8 +122,8 @@ declare namespace LocalJSX {
          */
         "allowFullScreen"?: boolean;
         /**
-          * The base URL for the API (defaults to current origin).
-          * @default "https://chatbots.dimagi.com"
+          * The base URL for the API.
+          * @default "https://www.openchatstudio.com"
          */
         "apiBaseUrl"?: string;
         /**
@@ -132,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.
          */
@@ -140,9 +151,12 @@ 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.
-          * @default "Starting a new chat will clear your current conversation. Continue?"
          */
         "newChatConfirmationMessage"?: string;
         /**
@@ -164,9 +178,9 @@ declare namespace LocalJSX {
           * 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.
-          * @default "Preparing response"
          */
         "typingIndicatorText"?: string;
         /**

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/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.8",
+  "version": "0.5.1",
   "description": "Chat component for Open Chat Studio",
   "main": "dist/index.cjs.js",
   "exports": "./dist/esm/open-chat-studio-widget.js",
@@ -20,13 +20,16 @@
     "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.27.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"