@botpress/webchat 4.3.2 → 4.4.0

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import { ComponentProps as ComponentProps_2 } from '../../node_modules/@types/re
 import { ComponentPropsWithRef } from '../../node_modules/@types/react';
 import { LatestWebchatConfig as Configuration } from '@bpinternal/shared';
 import { Context } from '../../node_modules/@types/react';
+import { createEventEmitter } from '@bpinternal/shared';
 import { CSSProperties } from '../../node_modules/@types/react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { Dispatch } from '../../node_modules/@types/react';
@@ -19,6 +20,7 @@ import { IntegrationError } from '@botpress/webchat-client';
 import { JSX } from '../../node_modules/@types/react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LatestWebchatTheme } from '@bpinternal/shared';
+import { ListConversationsResponse } from '@botpress/webchat-client';
 import { MemoExoticComponent } from '../../../node_modules/@types/react';
 import { Message as Message_2 } from '@botpress/webchat-client';
 import { NamedExoticComponent } from '../../../node_modules/@types/react';
@@ -140,7 +142,7 @@ export declare type CarouselBlock = {
     blocks: GenericBlock[];
 };
 
-export declare const Chat: ({ connected, configuration, isTyping, messages, user, isLoading, renderers, isReadOnly, disableComposer, allowFileUpload, error, participants, closeWindow, sendMessage, uploadFile, addMessageFeedback, restartConversation, clientId, storageKey, soundOn, toggleSound, disableSendButton, ...props }: Props) => JSX_2.Element;
+export declare const Chat: ({ connected, configuration, isTyping, messages, user, isLoading, renderers, isReadOnly, disableComposer, error, participants, closeWindow, sendMessage, uploadFile, addMessageFeedback, listConversations, restartConversation, clientId, storageKey, soundOn, toggleSound, disableSendButton, conversationId, ...props }: Props) => JSX_2.Element;
 
 declare type ChatSoundStore = {
     soundOn: boolean;
@@ -148,6 +150,10 @@ declare type ChatSoundStore = {
     toggleSound: () => void;
 };
 
+export declare type ClientStates = 'connecting' | 'connected' | 'error' | 'disconnected';
+
+declare type ClientStates_2 = 'connecting' | 'connected' | 'error' | 'disconnected';
+
 export declare type ColumnBlock = {
     type: 'column';
     blocks: GenericBlock[];
@@ -172,6 +178,17 @@ export declare type CommonBlockProps = Pick<RichBlockMessage, 'direction' | 'sen
     addMessageFeedback?: (messageId: string, feedback: Feedback) => void;
 };
 
+declare type CommonWebchatProps = {
+    on: EventEmitter<Events>['on'];
+    messages: BlockMessage[];
+    newConversation: (conversationId?: string) => void;
+    participants: User[];
+    soundOn: boolean;
+    toggleSound: () => void;
+    disableSendButton: boolean;
+    error?: WebchatError;
+};
+
 export declare type ComposableIntegrationMessagePayload = Extract<IntegrationMessage['payload'], ToPayloadType<ComposableIntegrationMessageTypes>>;
 
 declare type ComposableIntegrationMessageTypes = 'audio' | 'bloc' | 'file' | 'image' | 'location' | 'markdown' | 'text' | 'video';
@@ -183,10 +200,36 @@ export declare const CONFIG_ACCESS_DENIED = "Access denied to configuration file
 export { Configuration }
 
 export declare const Container: {
-    ({ children, className, uploadFile, allowFileUpload, storageKey, ...props }: Props_4): JSX_2.Element;
+    ({ children, className, uploadFile, allowFileUpload, storageKey, conversationId, ...props }: Props_4): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const ConversationHistory: {
+    ({ className, onConversationClick, onNewConversation, onClose, currentConversationId, isLoading, conversations, botAvatar, botName, ...props }: ComponentProps<"div"> & ConversationHistoryProps): JSX_2.Element;
     displayName: string;
 };
 
+declare type ConversationHistoryProps = {
+    onConversationClick?: (conversationId: string) => void;
+    onNewConversation?: () => void;
+    onClose?: () => void;
+    currentConversationId?: string;
+    isLoading?: boolean;
+    conversations: Conversations;
+    botAvatar?: string;
+    botName?: string;
+};
+
+declare type Conversations = ConversationWithLastMessage[];
+
+declare type ConversationWithLastMessage = ListConversationsResponse['conversations'][number] & {
+    lastMessage: NonNullable<ListConversationsResponse['conversations'][number]['lastMessage']> & {
+        author: {
+            type: 'bot' | 'user';
+        };
+    };
+};
+
 declare const createChatSoundStore: (storeName: string) => UseBoundStore<Omit<Omit<StoreApi<ChatSoundStore>, "setState"> & {
 setState<A extends string | {
 type: unknown;
@@ -288,12 +331,13 @@ export declare const getUseChatSoundStore: (name?: string) => BoundChatSoundStor
 
 export declare const getUseWebchatClientStore: (name?: string, storageLocation?: StorageLocation) => BoundWebchatClientStore;
 
-export declare const Header: ({ defaultOpen, closeWindow, configuration, restartConversation, disabled, soundOn, toggleSound, clientId, ...props }: HeaderProps) => JSX_2.Element;
+export declare const Header: ({ defaultOpen, closeWindow, configuration, restartConversation, showConversationHistory, disabled, soundOn, toggleSound, clientId, ...props }: HeaderProps) => JSX_2.Element;
 
 declare type HeaderProps = {
     defaultOpen?: boolean;
     open?: boolean;
     disabled?: boolean;
+    showConversationHistory?: () => void;
     onOpenChange?(open: boolean): void;
     restartConversation?: () => void;
     closeWindow?: () => void;
@@ -472,22 +516,20 @@ export declare type Props = {
     isReadOnly?: boolean;
     isLoading?: boolean;
     isTyping?: boolean;
-    lastTypingHeartbeat?: Date | null;
-    allowFileUpload?: boolean;
     clientId?: string;
     closeWindow?: () => void;
-    restartConversation?: () => void;
-    user?: {
-        id: string;
-    } & Record<string, unknown>;
+    restartConversation?: (conversationid?: string) => void;
+    user?: UserCredentials;
     sendMessage?: ScopedClient['sendMessage'];
     uploadFile?: ScopedClient['uploadFile'];
     addMessageFeedback?: ScopedClient['addMessageFeedback'];
+    listConversations?: ScopedClient['listConversations'];
     error?: WebchatError;
     soundOn?: boolean;
     toggleSound?: () => void;
-    disableSendButton?: boolean;
     storageKey?: string;
+    disableSendButton?: boolean;
+    conversationId?: string;
 };
 
 declare type Props_2 = {
@@ -500,6 +542,7 @@ declare type Props_2 = {
     storageKey?: string;
     storageLocation?: StorageLocation;
     soundEnabled?: boolean;
+    clientHeaders?: Record<string, string>;
 };
 
 declare type Props_3 = ComponentProps<'div'> & {
@@ -512,6 +555,7 @@ declare type Props_3 = ComponentProps<'div'> & {
     sendMessage?: ScopedClient['sendMessage'];
     uploadFile?: ScopedClient['uploadFile'];
     storageKey?: string;
+    conversationId?: string;
 } & Pick<Configuration, 'composerPlaceholder' | 'footer'>;
 
 declare type Props_4 = ComponentProps<'div'> & {
@@ -519,6 +563,7 @@ declare type Props_4 = ComponentProps<'div'> & {
     uploadFile?: ScopedClient['uploadFile'];
     allowFileUpload?: boolean;
     storageKey?: string;
+    conversationId?: string;
 };
 
 declare type Props_5 = {
@@ -534,7 +579,10 @@ declare type Props_6 = {
     configuration?: Configuration;
     soundOn?: boolean;
     toggleSound?: () => void;
-} & Pick<ComponentProps_2<typeof Chat>, 'allowFileUpload' | 'renderers'> & ComponentProps_2<'div'>;
+    /** @deprecated This prop is no longer used, pass the allowFileUpload via the configuration object */
+    allowFileUpload?: boolean;
+    renderers?: Partial<Renderers>;
+} & ComponentProps_2<'div'>;
 
 declare type Props_7 = Partial<LatestWebchatTheme>;
 
@@ -569,7 +617,7 @@ export declare type RowOf<T extends GenericBlock> = Omit<RowBlock, 'blocks'> & {
     blocks: T[];
 };
 
-declare type ScopedClient = {
+export declare type ScopedClient = {
     sendMessage: (payload: IntegrationMessage['payload']) => Promise<void>;
     sendEvent: (event: Record<string, any>, options?: {
         bindConversation?: boolean;
@@ -584,15 +632,20 @@ declare type ScopedClient = {
     addMessageFeedback: (messageId: string, feedback: Feedback) => Promise<void>;
     getUser: () => Promise<UserResponse>;
     updateUser: (user: UserProfile) => Promise<User>;
+    listConversations: () => ReturnType<Client['listConversations']>;
 };
 
+export declare const _setDebugEnabled: (enabled: boolean) => void;
+
+export declare const _setTrackFn: (fn: typeof _trackFn) => void;
+
 export declare const SOUND_EFFECTS: {
     readonly chatMessageNotification: string;
 };
 
 export declare const SSE_DISCONNECTED_ERROR = "You've been disconnected from the conversation.\nPlease refresh the page.";
 
-declare type StorageLocation = 'sessionStorage' | 'localStorage';
+export declare type StorageLocation = 'sessionStorage' | 'localStorage';
 
 export declare type StyleOptions = {
     className?: string;
@@ -616,8 +669,57 @@ declare type ToPayloadType<T extends IntegrationMessageTypes> = {
     };
 }[T];
 
+declare let _trackFn: ((event: string, properties?: Record<string, unknown>) => void) | null;
+
 export declare const TypingIndicator: MemoExoticComponent<({ ...props }: ComponentProps<"div">) => JSX_2.Element>;
 
+export declare function useActiveConversation(): UseActiveConversationReturn;
+
+declare type UseActiveConversationReturn = {
+    conversationId?: string;
+    messages: BlockMessage[];
+    participants: User[];
+    sendMessage: (payload: IntegrationMessage['payload']) => Promise<void>;
+    saveMessageFeedback: (messageId: string, feedback: Feedback) => Promise<void>;
+    sendEvent: (event: Record<string, unknown>, options?: {
+        bindConversation?: boolean;
+        bindUser?: boolean;
+    }) => Promise<void>;
+    uploadFile: (file: File) => Promise<{
+        fileUrl: string;
+        name: string;
+        type: FileType;
+        fileId: string;
+    }>;
+    status: ClientStates;
+    on: ReturnType<typeof createEventEmitter<Events>>['on'];
+    error?: WebchatError;
+    isTyping: boolean;
+    isAwaitingResponse: boolean;
+};
+
+export declare function useConversationList({ userCredentials, listConversations, clientId, }: UseConversationListParams): UseConversationListReturn;
+
+declare type UseConversationListParams = {
+    userCredentials?: UserCredentials;
+    listConversations?: Client['listConversations'];
+    clientId?: string;
+};
+
+declare type UseConversationListReturn = {
+    conversations: Conversations;
+    isLoading: boolean;
+    error?: WebchatError;
+    refresh: () => Promise<Conversations | undefined>;
+};
+
+export declare function useConversations(): UseConversationsReturn;
+
+declare type UseConversationsReturn = {
+    listConversations?: () => Promise<ListConversationsResponse>;
+    openConversation: (conversationId?: string) => void;
+};
+
 export declare type UseImageSizeResult = [Dimensions | null, {
     loading: boolean;
     error: string | null;
@@ -627,41 +729,56 @@ export declare function useMessageContext(): MessageContextVaue;
 
 export declare function useModalContext(): ModalContextValue;
 
-declare type UserProfile = Omit<User, 'id' | 'createdAt' | 'updatedAt'>;
+export { User }
+
+export declare type UserProfile = Omit<User, 'id' | 'createdAt' | 'updatedAt'>;
+
+export declare type UserResponse = Awaited<ReturnType<Client['getUser']>>['user'];
+
+export declare const useUser: () => UseUserReturn;
 
-declare type UserResponse = Awaited<ReturnType<Client['getUser']>>['user'];
+declare type UseUserReturn = {
+    getUser?: () => Promise<UserResponse>;
+    updateUser?: (user: UserProfile) => Promise<User>;
+    userCredentials?: UserCredentials;
+};
 
-export declare function useWebchat({ apiUrl, clientId, storageKey, storageLocation, adminSecret, soundEnabled, ...props }: Props_2): UseWebchatReturn;
+/**
+ * @deprecated This hook is deprecated. Use WebchatProvider with useActiveConversation, useConversations, and useUser instead.
+ *
+ * Migration guide:
+ * ```typescript
+ * // Old:
+ * const { messages, sendMessage, client } = useWebchat({ clientId, ... })
+ *
+ * // New:
+ * <WebchatProvider clientId={clientId} ...>
+ *   const { messages, sendMessage } = useActiveConversation()
+ *   const { listConversations, openConversation } = useConversations()
+ *   const { getUser, updateUser } = useUser()
+ * </WebchatProvider>
+ * ```
+ */
+export declare function useWebchat({ apiUrl, clientId, storageKey, storageLocation, adminSecret, soundEnabled, clientHeaders, ...props }: Props_2): UseWebchatReturn;
 
-declare type UseWebchatReturn = {
+export declare function useWebchatContext(): WebchatContextValue;
+
+/**
+ * @deprecated Use WebchatProvider with useActiveConversation, useConversations, and useUser instead
+ */
+declare type UseWebchatReturn = (CommonWebchatProps & {
     clientState: 'connected';
-    on: EventEmitter<Events>['on'];
     client: ScopedClient;
-    messages: BlockMessage[];
     conversationId: string;
-    newConversation: () => Promise<void>;
     user?: UserCredentials;
     isTyping: boolean;
-    participants: User[];
-    soundOn: boolean;
-    toggleSound: () => void;
-    disableSendButton: boolean;
-    error?: WebchatError;
-} | {
+}) | (CommonWebchatProps & {
     clientState: 'connecting' | 'error' | 'disconnected';
-    on: EventEmitter<Events>['on'];
     client: undefined;
-    messages: BlockMessage[];
     conversationId: undefined;
-    newConversation: () => Promise<void>;
     user: undefined;
     isTyping: undefined;
-    participants: User[];
-    soundOn: boolean;
-    toggleSound: () => void;
-    disableSendButton: boolean;
-    error?: WebchatError;
-};
+});
 
 export declare const useWebchatStore: UseBoundStore<Omit<StoreApi<WebchatStore>, "setState"> & {
 setState<A extends string | {
@@ -676,7 +793,7 @@ export declare type VideoBlock = {
     url: string;
 };
 
-export declare const Webchat: ({ clientId, storageKey, configuration, allowFileUpload, apiUrl, user, conversationId, ...props }: Props_6) => JSX_2.Element;
+export declare const Webchat: ({ clientId, storageKey, configuration, apiUrl, user: userCredentials, conversationId, ...props }: Props_6) => JSX_2.Element;
 
 export declare const webchatClasses: {
     readonly container: {
@@ -786,6 +903,9 @@ export declare const webchatClasses: {
             readonly container: {
                 readonly className: "bpReset bpHeaderContentContainer";
             };
+            readonly conversationHistory: {
+                readonly className: "bpHeaderConversationHistoryButton";
+            };
             readonly title: {
                 readonly className: "bpHeaderContentTitle";
             };
@@ -1202,12 +1322,69 @@ export declare const webchatClasses: {
             readonly className: "bpProactiveBubbleArrow";
         };
     };
+    readonly conversationHistory: {
+        readonly container: {
+            readonly className: "bpReset bpConversationHistoryContainer bpFont";
+        };
+        readonly header: {
+            readonly className: "bpConversationHistoryHeader";
+        };
+        readonly closeButton: {
+            readonly className: "bpConversationHistoryCloseButton";
+        };
+        readonly scrollContainer: {
+            readonly className: "bpConversationHistoryScrollContainer";
+        };
+        readonly loaderContainer: {
+            readonly className: "bpConversationHistoryLoaderContainer";
+        };
+        readonly conversation: {
+            readonly container: {
+                readonly className: "bpConversationHistoryConversationContainer";
+            };
+            readonly chevron: {
+                readonly className: "bpConversationHistoryConversationChevron";
+            };
+            readonly userAvatar: {
+                readonly className: {
+                    readonly className: "bpConversationHistoryConversationUserAvatarFallback";
+                };
+            };
+            readonly avatar: {
+                readonly container: {
+                    readonly className: "bpReset bpConversationHistoryConversationAvatarContainer";
+                };
+                readonly image: {
+                    readonly className: "bpConversationHistoryConversationAvatarImage";
+                };
+                readonly fallback: {
+                    readonly className: "bpConversationHistoryConversationAvatarFallback";
+                };
+            };
+            readonly content: {
+                readonly className: "bpConversationHistoryConversationContent";
+            };
+            readonly name: {
+                readonly className: "bpConversationHistoryConversationName";
+            };
+            readonly timestamp: {
+                readonly className: "bpConversationHistoryConversationTimestamp";
+            };
+        };
+        readonly newConversation: {
+            readonly button: {
+                readonly className: "bpConversationHistoryNewConversationButton";
+            };
+            readonly icon: {
+                readonly className: "bpConversationHistoryNewConversationButtonIcon";
+            };
+        };
+    };
 };
 
 declare type WebchatClientActions = {
     setUser: (userId?: UserCredentials) => void;
-    setConversationId: (conversationId: string) => void;
-    clearConversationId: () => void;
+    setConversationId: (conversationId?: string) => void;
     clearAll: () => void;
 };
 
@@ -1218,6 +1395,24 @@ export declare type WebchatClientState = {
 
 declare type WebchatClientStore = WebchatClientState & WebchatClientActions;
 
+export declare type WebchatContextValue = {
+    client: Client | undefined;
+    userCredentials: UserCredentials | undefined;
+    conversationId: string | undefined;
+    openConversation: (params: {
+        conversationId?: string;
+        userToken?: string;
+    }) => Promise<void>;
+    clientState: ClientStates_2;
+    setClientState: (state: ClientStates_2) => void;
+    error: WebchatError | undefined;
+    setError: (error?: WebchatError) => void;
+    isTyping: boolean;
+    isAwaitingResponse: boolean;
+    setAwaitingResponse: (state: boolean, timeout?: number) => void;
+    emitter: ReturnType<typeof createEventEmitter<Events>>;
+};
+
 export declare type WebchatError = ({
     type: 'configuration';
     message: typeof MISSING_CLIENT_ID | typeof MISSING_API_URL | typeof MISSING_BOT_ID | typeof INVALID_CLIENT_ID | typeof INVALID_CONFIGURATION | typeof MISSING_CONFIG_URL;
@@ -1250,6 +1445,20 @@ export declare type WebchatEvents = {
     participantRemoved: string;
 };
 
+export declare function WebchatProvider({ clientId, apiUrl, storageKey, storageLocation, adminSecret, clientHeaders, children, ...props }: WebchatProviderProps): JSX_2.Element;
+
+declare type WebchatProviderProps = {
+    clientId: string;
+    apiUrl?: string;
+    userCredentials?: UserCredentials;
+    conversationId?: string;
+    adminSecret?: string;
+    storageKey?: string;
+    storageLocation?: StorageLocation;
+    clientHeaders?: Record<string, string>;
+    children: ReactNode_2;
+};
+
 declare type WebchatStore = {
     messageContainerRef: RefObject<HTMLDivElement | null>;
     setMessageContainerRef: (ref: RefObject<HTMLDivElement | null>) => void;