@opencx/widget 2.0.0

package/dist/react-lib/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useSyncState';
+export * from './useAxiosInstance';
+export * from './useScrollTo';
+export * from './useVote';
+export * from './useUploadFiles';
+export * from './useWidgetContentHeight';

package/dist/react-lib/hooks/socket.d.ts

@@ -0,0 +1,11 @@
+import { DependencyList } from 'react';
+import { ManagerOptions, Socket, SocketOptions } from 'socket.io-client';
+export type SocketState = "connected" | "disconnected" | "connecting" | "reconnecting" | "reconnected" | "disconnecting" | "error";
+type useSocketReturn = {
+    socket: Socket | null;
+    socketState: SocketState;
+    disconnect: () => void;
+    useListen: (event: string, callback: (data: any) => void, deps?: DependencyList) => void;
+};
+export declare function useSocket(url: string, opts: Partial<ManagerOptions & SocketOptions>, _deps?: DependencyList): useSocketReturn;
+export {};

package/dist/react-lib/hooks/socketState.d.ts

@@ -0,0 +1,2 @@
+import { SocketState } from './socket';
+export declare function representSocketState(state: SocketState, getter: Function): any;

package/dist/react-lib/hooks/use-sound.d.ts

@@ -0,0 +1,13 @@
+interface UseAudioOptions {
+    src: string;
+    soundEnabled?: boolean;
+    volume?: number;
+}
+declare function useSound(opts: UseAudioOptions): {
+    play: () => void;
+    stop: () => void;
+    pause: () => void;
+    isPlaying: () => boolean;
+    instance: HTMLAudioElement | null;
+};
+export { useSound };

package/dist/react-lib/hooks/use-sound.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/react-lib/hooks/use-sync-state.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/react-lib/hooks/useAbstractChat.d.ts

@@ -0,0 +1,159 @@
+import { UserObject } from '../types';
+import { ReactNode } from 'react';
+import { AIClosureType, ChatAttachmentType, MessageType, SessionStatus } from '../../core/types';
+type HookState = {
+    state: "loading" | "error" | "idle";
+    error?: any;
+};
+type useChatOptions = {
+    onSessionDestroy?: () => void;
+    defaultHookSettings?: HookSettings;
+};
+type ChatState = {
+    lastUpdated: number | null;
+    messages: MessageType[];
+    /**
+     * Options that the AI provides to the user after a reply, such as "I need more help" or "This is helpful"
+     */
+    keyboard: {
+        options: string[];
+    } | null;
+};
+interface SendMessageInput extends Record<string, unknown> {
+    content: {
+        text: string;
+    };
+    attachments?: Array<ChatAttachmentType>;
+    id?: string;
+    language?: string;
+    user?: UserObject;
+}
+interface HookSettings {
+    persistSession?: boolean;
+    useSoundEffects?: boolean;
+}
+declare function useAbstractChat({ onSessionDestroy }: useChatOptions): {
+    version: string;
+    state: ChatState;
+    session: {
+        isSessionClosed: boolean;
+        isAssignedToAi: boolean;
+        isAssignedToHuman: boolean;
+        isPendingHuman: boolean;
+        id: string;
+        ai_closure_type: AIClosureType | null;
+        assignee_id: number | null;
+        channel: import('../../core/types').SessionChannel;
+        status: SessionStatus;
+        summary: string | null;
+        language: string | null;
+        last_message: string | null;
+        last_message_at: Date | null;
+        sentiment: import('../../core/types').SentimentEnum | null;
+        assignee?: {
+            email: string;
+            name: string;
+            avatar_url?: string | undefined;
+        } | null | undefined;
+    } | null;
+    unstable__canSend: {
+        canSend: boolean;
+        reason: string;
+    } | {
+        canSend: boolean;
+        reason?: undefined;
+    };
+    noMessages: boolean;
+    fetchHistoryState: {
+        loading: boolean;
+        error?: undefined;
+        value?: undefined;
+    } | {
+        loading: false;
+        error: Error;
+        value?: undefined;
+    } | {
+        loading: true;
+        error?: Error | undefined;
+        value?: MessageType[] | undefined;
+    } | {
+        loading: false;
+        error?: undefined;
+        value: MessageType[];
+    };
+    refreshSessionState: {
+        loading: boolean;
+        error?: undefined;
+        value?: undefined;
+    } | {
+        loading: false;
+        error: Error;
+        value?: undefined;
+    } | {
+        loading: true;
+        error?: Error | undefined;
+        value?: {
+            id: string;
+            ai_closure_type: AIClosureType | null;
+            assignee_id: number | null;
+            channel: import('../../core/types').SessionChannel;
+            status: SessionStatus;
+            summary: string | null;
+            language: string | null;
+            last_message: string | null;
+            last_message_at: Date | null;
+            sentiment: import('../../core/types').SentimentEnum | null;
+            assignee?: {
+                email: string;
+                name: string;
+                avatar_url?: string | undefined;
+            } | null | undefined;
+        } | undefined;
+    } | {
+        loading: false;
+        error?: undefined;
+        value: {
+            id: string;
+            ai_closure_type: AIClosureType | null;
+            assignee_id: number | null;
+            channel: import('../../core/types').SessionChannel;
+            status: SessionStatus;
+            summary: string | null;
+            language: string | null;
+            last_message: string | null;
+            last_message_at: Date | null;
+            sentiment: import('../../core/types').SentimentEnum | null;
+            assignee?: {
+                email: string;
+                name: string;
+                avatar_url?: string | undefined;
+            } | null | undefined;
+        };
+    };
+    recreateSession: () => void;
+    clearSession: () => void;
+    sendMessage: ({ content, user, ...data }: SendMessageInput) => Promise<{
+        attachments: Array<ChatAttachmentType>;
+        id: string;
+        language: string;
+        bot_token: string;
+        content: string;
+        session_id: string;
+        headers: Record<string, string>;
+        pathParams: Record<string, string>;
+        query_params: Record<string, string>;
+        queryParams: Record<string, string>;
+        user: {
+            external_id?: string;
+            name?: string;
+            email?: string;
+            phone?: string;
+            customData?: Record<string, string>;
+            avatarUrl?: string;
+        };
+    } | null>;
+    info: ReactNode;
+    handleKeyboard: (option: string) => void;
+    hookState: HookState;
+};
+export { useAbstractChat, type SendMessageInput, type HookState };

package/dist/react-lib/hooks/useAxiosInstance.d.ts

@@ -0,0 +1,121 @@
+import { AxiosRequestConfig } from 'axios';
+import { PreludeData, WorkingHours } from '@core/types/prelude';
+import { UserObject } from '../types';
+type Options = {
+    apiUrl: string;
+    botToken: string;
+};
+export declare function useAxiosInstance(options: Options): {
+    apis: {
+        createSession: (botToken: string) => Promise<import('axios').AxiosResponse<{
+            id: string;
+            ai_closure_type: import('../../core/types').AIClosureType | null;
+            assignee_id: number | null;
+            channel: import('../../core/types').SessionChannel;
+            status: import('../../core/types').SessionStatus;
+            summary: string | null;
+            language: string | null;
+            last_message: string | null;
+            last_message_at: Date | null;
+            sentiment: import('../../core/types').SentimentEnum | null;
+            assignee?: {
+                email: string;
+                name: string;
+                avatar_url?: string | undefined;
+            } | null | undefined;
+        }, any>>;
+        /**
+         * get session data by id
+         * @param sessionId
+         */
+        fetchSession: (sessionId: string) => Promise<import('axios').AxiosResponse<{
+            id: string;
+            ai_closure_type: import('../../core/types').AIClosureType | null;
+            assignee_id: number | null;
+            channel: import('../../core/types').SessionChannel;
+            status: import('../../core/types').SessionStatus;
+            summary: string | null;
+            language: string | null;
+            last_message: string | null;
+            last_message_at: Date | null;
+            sentiment: import('../../core/types').SentimentEnum | null;
+            assignee?: {
+                email: string;
+                name: string;
+                avatar_url?: string | undefined;
+            } | null | undefined;
+        }, any>>;
+        fetchPreludeData: () => Promise<PreludeData | undefined>;
+        /**
+         * get the organization office working hours.
+         */
+        getOfficeHours: () => Promise<import('axios').AxiosResponse<WorkingHours, any>>;
+        fetchHistory: (sessionId: string) => Promise<import('axios').AxiosResponse<{
+            message: string | null;
+            type: string | null;
+            publicId: string;
+            agent_avatar: string | null;
+            agent_id: number | null;
+            agent_name: string | null;
+            created_at: string;
+            from_user: boolean | null;
+            handoff_happened_during_office_hours: boolean | null;
+            session_id: string;
+            updated_at: string | null;
+            attachments?: import('../../core/types').ChatAttachmentType[] | undefined;
+        }[] | undefined, any>>;
+        downvote: (id: string) => Promise<import('axios').AxiosResponse<{
+            message: string;
+        }, any>>;
+        upvote: (id: string) => Promise<import('axios').AxiosResponse<{
+            message: string;
+        }, any>>;
+        /**
+         * given the userData object we will create or update the contact + get the related conversations/tickets/sessions
+         */
+        dumpContact: (userData: UserObject) => Promise<import('axios').AxiosResponse<{
+            email: string | null;
+            id: string;
+            name: string | null;
+            avatar_url: string | null;
+            created_at: string;
+        }, any>>;
+        /**
+         * get the completions for the given input
+         */
+        getCompletions: (input: string) => Promise<import('axios').AxiosResponse<{
+            completions: string[];
+        }, any>>;
+        /**
+         * @param file
+         * @param options
+         */
+        uploadFile: (file: {
+            id: string;
+            file: File;
+        }, _options?: AxiosRequestConfig) => Promise<import('axios').AxiosResponse<{
+            fileName: string;
+            fileUrl: string;
+            clientFileId: string;
+        }, any>>;
+        getHistoryPooling: ({ lastMessageTimestamp, sessionId, }: {
+            lastMessageTimestamp: string;
+            sessionId: string;
+        }) => Promise<import('axios').AxiosResponse<{
+            message: string | null;
+            type: string | null;
+            publicId: string;
+            agent_avatar: string | null;
+            agent_id: number | null;
+            agent_name: string | null;
+            created_at: string;
+            from_user: boolean | null;
+            handoff_happened_during_office_hours: boolean | null;
+            session_id: string;
+            updated_at: string | null;
+            attachments?: import('../../core/types').ChatAttachmentType[] | undefined;
+        }[] | undefined, any>>;
+    };
+    options: Options;
+};
+export {};

package/dist/react-lib/hooks/useBaseClient.d.ts

@@ -0,0 +1,2 @@
+import { ApiClient, CoreOptions } from '../../core/index';
+export declare const useBaseClient: (options: CoreOptions) => ApiClient | null;

package/dist/react-lib/hooks/useScrollTo.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useScrollToPercentage: (elementRef: RefObject<HTMLElement>) => [(percentageX: number, percentageY: number) => void];

package/dist/react-lib/hooks/useSyncState.d.ts

@@ -0,0 +1,4 @@
+type StorageType = "memory" | "local" | "session";
+type DefaultValue<T> = T | (() => T);
+export declare function useSyncedState<TData>(key: string, defaultValue?: DefaultValue<TData>, storage?: StorageType): [TData | null, (newState: TData | null) => void, () => void];
+export {};

package/dist/react-lib/hooks/useTimeoutState.d.ts

@@ -0,0 +1,3 @@
+type DefaultValue<T> = T | (() => T);
+export declare function useTimeoutState<T>(initialValue: DefaultValue<T>, timeout: number): [T, (value: T) => void];
+export {};

package/dist/react-lib/hooks/useUploadFiles.d.ts

@@ -0,0 +1,21 @@
+interface FileWithProgress {
+    status: "pending" | "uploading" | "success" | "error";
+    id: string;
+    file: File;
+    fileUrl?: string;
+    progress: number;
+    error?: string;
+}
+declare function useUploadFiles(): {
+    allFiles: FileWithProgress[];
+    appendFiles: (files: File[]) => void;
+    handleCancelUpload: (fileId: string) => void;
+    successFiles: FileWithProgress[];
+    emptyTheFiles: () => void;
+    getFileById: (id: string) => FileWithProgress | undefined;
+    getUploadProgress: (id: string) => number;
+    getUploadStatus: (id: string) => "error" | "pending" | "uploading" | "success" | undefined;
+    hasErrors: boolean;
+    isUploading: boolean;
+};
+export { useUploadFiles, type FileWithProgress };

package/dist/react-lib/hooks/useVote.d.ts

@@ -0,0 +1,2 @@
+export declare function useUpvote(id: string, onSuccess?: () => void): import('react-use/lib/useAsyncFn').AsyncFnReturn<() => Promise<void>>;
+export declare function useDownvote(id: string, onSuccess?: () => void): import('react-use/lib/useAsyncFn').AsyncFnReturn<() => Promise<void>>;

package/dist/react-lib/hooks/useWidgetContentHeight.d.ts

@@ -0,0 +1,9 @@
+export declare function useWidgetContentHeight({ fallbackHeight: minHeight, }: {
+    /**
+     * unrendered elements have an offset height of 0, this is causes a weird animation when opening the widget.
+     * So, a fallback value equal to the fixed height or min height of the screen's root div solves the issue.
+     */
+    fallbackHeight: number;
+}): {
+    observedElementRef: import('react').RefObject<HTMLDivElement>;
+};

package/dist/react-lib/index.d.ts

@@ -0,0 +1,10 @@
+export * from './types';
+export * from './utils';
+export { useUpvote, useDownvote, useUploadFiles, type FileWithProgress, } from './hooks';
+export { WidgetRoot } from './Root';
+export { useConfigData } from './providers/ConfigDataProvider';
+export { useChat } from './providers/ChatProvider';
+export { useLocale } from './providers/LocalesProvider';
+export { useWidgetSoundEffects } from './providers/use-widget-sfx';
+export { useContact } from './providers/ContactProvider';
+export { usePreludeData } from './providers/usePreludeData';

package/dist/react-lib/locales/ar.locale.d.ts

@@ -0,0 +1,2 @@
+import { TranslatableMessages } from '.';
+export declare const arLocale: TranslatableMessages;

package/dist/react-lib/locales/de.locale.d.ts

@@ -0,0 +1,2 @@
+import { TranslatableMessages } from '.';
+export declare const deLocale: TranslatableMessages;

package/dist/react-lib/locales/en.locale.d.ts

@@ -0,0 +1,55 @@
+export declare const enLocale: {
+    ok: string;
+    yes: string;
+    no: string;
+    agree: string;
+    cancel: string;
+    "yes-exit": string;
+    "yes-reset": string;
+    "no-cancel": string;
+    "are-you-sure": string;
+    recording: string;
+    "thank-you": string;
+    "sorry-try-again": string;
+    "error-occurred": string;
+    "please-try-again": string;
+    "write-a-message": string;
+    "send-message": string;
+    connected: string;
+    connecting: string;
+    reconnecting: string;
+    reconnected: string;
+    disconnecting: string;
+    disconnected: string;
+    error: string;
+    "persist-session": string;
+    settings: string;
+    close: string;
+    help: string;
+    chat: string;
+    send: string;
+    copy: string;
+    copied: string;
+    "sound-effects": string;
+    language: string;
+    select: string;
+    agent: string;
+    user: string;
+    bot: string;
+    "reset-conversation-confirm": string;
+    "close-widget": string;
+    "got-any-questions": string;
+    "typical-response-time": string;
+    "session-closed-lead": string;
+    "create-new-ticket": string;
+    exit: string;
+    "reset-conversation": string;
+    "welcome-title": string;
+    "welcome-description": string;
+    "your-name": string;
+    "your-email": string;
+    "start-chat": string;
+    "starting-chat": string;
+    "hello-greeting": string;
+};
+export type TranslationKeysType = keyof typeof enLocale;

package/dist/react-lib/locales/fr.locale.d.ts

@@ -0,0 +1,2 @@
+import { TranslatableMessages } from '.';
+export declare const frLocale: TranslatableMessages;

package/dist/react-lib/locales/helper.d.ts

@@ -0,0 +1,65 @@
+import { TranslationKeysType } from './en.locale';
+declare const locales: {
+    readonly en: {
+        ok: string;
+        yes: string;
+        no: string;
+        agree: string;
+        cancel: string;
+        "yes-exit": string;
+        "yes-reset": string;
+        "no-cancel": string;
+        "are-you-sure": string;
+        recording: string;
+        "thank-you": string;
+        "sorry-try-again": string;
+        "error-occurred": string;
+        "please-try-again": string;
+        "write-a-message": string;
+        "send-message": string;
+        connected: string;
+        connecting: string;
+        reconnecting: string;
+        reconnected: string;
+        disconnecting: string;
+        disconnected: string;
+        error: string;
+        "persist-session": string;
+        settings: string;
+        close: string;
+        help: string;
+        chat: string;
+        send: string;
+        copy: string;
+        copied: string;
+        "sound-effects": string;
+        language: string;
+        select: string;
+        agent: string;
+        user: string;
+        bot: string;
+        "reset-conversation-confirm": string;
+        "close-widget": string;
+        "got-any-questions": string;
+        "typical-response-time": string;
+        "session-closed-lead": string;
+        "create-new-ticket": string;
+        exit: string;
+        "reset-conversation": string;
+        "welcome-title": string;
+        "welcome-description": string;
+        "your-name": string;
+        "your-email": string;
+        "start-chat": string;
+        "starting-chat": string;
+        "hello-greeting": string;
+    };
+    readonly ar: import('.').TranslatableMessages;
+    readonly nl: import('.').TranslatableMessages;
+    readonly fr: import('.').TranslatableMessages;
+    readonly de: import('.').TranslatableMessages;
+    readonly pt: import('.').TranslatableMessages;
+};
+export type LangType = keyof typeof locales;
+export declare function getStr(key: TranslationKeysType, lang: LangType): string;
+export {};

package/dist/react-lib/locales/index.d.ts

@@ -0,0 +1,3 @@
+import { TranslationKeysType } from './en.locale';
+export * from './helper';
+export type TranslatableMessages = Record<TranslationKeysType, string>;

package/dist/react-lib/locales/nl.locale.d.ts

@@ -0,0 +1,2 @@
+import { TranslatableMessages } from '.';
+export declare const nlLocale: TranslatableMessages;

package/dist/react-lib/locales/pt.locale.d.ts

@@ -0,0 +1,2 @@
+import { TranslatableMessages } from '.';
+export declare const ptLocale: TranslatableMessages;

package/dist/react-lib/providers/ChatProvider.d.ts

@@ -0,0 +1,135 @@
+import { default as React } from 'react';
+declare const useChat: () => {
+    version: string;
+    state: {
+        lastUpdated: number | null;
+        messages: import('../../core/types').MessageType[];
+        keyboard: {
+            options: string[];
+        } | null;
+    };
+    session: {
+        isSessionClosed: boolean;
+        isAssignedToAi: boolean;
+        isAssignedToHuman: boolean;
+        isPendingHuman: boolean;
+        id: string;
+        ai_closure_type: import('../../core/types').AIClosureType | null;
+        assignee_id: number | null;
+        channel: import('../../core/types').SessionChannel;
+        status: import('../../core/types').SessionStatus;
+        summary: string | null;
+        language: string | null;
+        last_message: string | null;
+        last_message_at: Date | null;
+        sentiment: import('../../core/types').SentimentEnum | null;
+        assignee?: {
+            email: string;
+            name: string;
+            avatar_url?: string | undefined;
+        } | null | undefined;
+    } | null;
+    unstable__canSend: {
+        canSend: boolean;
+        reason: string;
+    } | {
+        canSend: boolean;
+        reason?: undefined;
+    };
+    noMessages: boolean;
+    fetchHistoryState: {
+        loading: boolean;
+        error?: undefined;
+        value?: undefined;
+    } | {
+        loading: false;
+        error: Error;
+        value?: undefined;
+    } | {
+        loading: true;
+        error?: Error | undefined;
+        value?: import('../../core/types').MessageType[] | undefined;
+    } | {
+        loading: false;
+        error?: undefined;
+        value: import('../../core/types').MessageType[];
+    };
+    refreshSessionState: {
+        loading: boolean;
+        error?: undefined;
+        value?: undefined;
+    } | {
+        loading: false;
+        error: Error;
+        value?: undefined;
+    } | {
+        loading: true;
+        error?: Error | undefined;
+        value?: {
+            id: string;
+            ai_closure_type: import('../../core/types').AIClosureType | null;
+            assignee_id: number | null;
+            channel: import('../../core/types').SessionChannel;
+            status: import('../../core/types').SessionStatus;
+            summary: string | null;
+            language: string | null;
+            last_message: string | null;
+            last_message_at: Date | null;
+            sentiment: import('../../core/types').SentimentEnum | null;
+            assignee?: {
+                email: string;
+                name: string;
+                avatar_url?: string | undefined;
+            } | null | undefined;
+        } | undefined;
+    } | {
+        loading: false;
+        error?: undefined;
+        value: {
+            id: string;
+            ai_closure_type: import('../../core/types').AIClosureType | null;
+            assignee_id: number | null;
+            channel: import('../../core/types').SessionChannel;
+            status: import('../../core/types').SessionStatus;
+            summary: string | null;
+            language: string | null;
+            last_message: string | null;
+            last_message_at: Date | null;
+            sentiment: import('../../core/types').SentimentEnum | null;
+            assignee?: {
+                email: string;
+                name: string;
+                avatar_url?: string | undefined;
+            } | null | undefined;
+        };
+    };
+    recreateSession: () => void;
+    clearSession: () => void;
+    sendMessage: ({ content, user, ...data }: import('../hooks/useAbstractChat').SendMessageInput) => Promise<{
+        attachments: Array<import('../../core/types').ChatAttachmentType>;
+        id: string;
+        language: string;
+        bot_token: string;
+        content: string;
+        session_id: string;
+        headers: Record<string, string>;
+        pathParams: Record<string, string>;
+        query_params: Record<string, string>;
+        queryParams: Record<string, string>;
+        user: {
+            external_id?: string;
+            name?: string;
+            email?: string;
+            phone?: string;
+            customData?: Record<string, string>;
+            avatarUrl?: string;
+        };
+    } | null>;
+    info: React.ReactNode;
+    handleKeyboard: (option: string) => void;
+    hookState: import('../hooks/useAbstractChat').HookState;
+};
+declare function ChatProvider({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export { useChat, ChatProvider };