@botpress/webchat 4.1.0 → 4.2.0

package/.storybook/main.ts

@@ -1,5 +1,4 @@
-import { join, dirname } from 'path'
-import { withoutVitePlugins } from '@storybook/builder-vite'
+import { dirname, join } from 'path'
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
@@ -21,9 +20,8 @@ const config = {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
-  async viteFinal(config) {
-    config.plugins = await withoutVitePlugins(config.plugins, ['vite:dts'])
-
+  viteFinal(config) {
+    config.plugins = (config.plugins ?? []).filter((plugin) => plugin && 'name' in plugin && plugin.name !== 'vite:dts')
     return config
   },
 }

package/.turbo/turbo-build.log

@@ -1,21 +1,21 @@
 
-> @botpress/webchat@4.1.0 build /home/runner/work/genisys/genisys/packages/webchat-components
+> @botpress/webchat@4.2.0 build /home/runner/work/genisys/genisys/packages/webchat-components
 > vite build
 
 vite v5.4.8 building for production...
 transforming...
-✓ 2346 modules transformed.
+✓ 2383 modules transformed.
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
 computing gzip size...
 dist/style.css   54.01 kB │ gzip:   9.07 kB
-dist/index.js   675.87 kB │ gzip: 182.59 kB
+dist/index.js   681.72 kB │ gzip: 183.56 kB
 [vite:dts] Start rollup declaration files...
 Analysis will use the bundled TypeScript version 5.8.2
 *** The target project appears to use TypeScript 5.9.3 which is newer than the bundled compiler engine; consider upgrading API Extractor.
-[vite:dts] Declaration files built in 20130ms.
+[vite:dts] Declaration files built in 18681ms.
 
 dist/style.css       54.01 kB │ gzip:   9.07 kB
-dist/index.umd.cjs  449.08 kB │ gzip: 147.52 kB
-✓ built in 25.01s
+dist/index.umd.cjs  451.60 kB │ gzip: 148.63 kB
+✓ built in 28.70s

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { AddMessageFeedbackBody } from '@botpress/webchat-client';
-import { ClassAttributes } from 'react';
 import { Client } from '@botpress/webchat-client';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { ComponentProps } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import { LatestWebchatConfig as Configuration } from '@bpinternal/shared';
@@ -11,10 +11,9 @@ import { Dispatch } from 'react';
 import { EventEmitter } from '@bpinternal/shared';
 import type { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
-import { HTMLAttributes } from 'react';
 import { IntegrationError } from '@botpress/webchat-client';
+import { JSX } from 'react/jsx-runtime';
 import { JSX as JSX_2 } from 'react';
-import { JSX as JSX_3 } from 'react/jsx-runtime';
 import { LatestWebchatTheme } from '@bpinternal/shared';
 import { MemoExoticComponent } from 'react';
 import { Message as Message_2 } from '@botpress/webchat-client';
@@ -40,9 +39,13 @@ declare type AnyEvent = ValueOf<{
 export declare type AudioBlock = {
     type: 'audio';
     url: string;
+    ref?: Ref<HTMLAudioElement>;
 };
 
-export declare const Avatar: ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & RefAttributes<HTMLSpanElement>>;
+export declare const Avatar: {
+    ({ userId, src, container, image, fallback, ...props }: AvatarProps): JSX.Element;
+    displayName: string;
+};
 
 declare type AvatarProps = {
     userId?: string;
@@ -133,7 +136,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_3.Element;
+export declare const Chat: ({ ref, 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.Element;
 
 declare type ChatSoundStore = {
     soundOn: boolean;
@@ -175,14 +178,14 @@ export declare type ComposableIntegrationMessagePayload = Extract<IntegrationMes
 
 declare type ComposableIntegrationMessageTypes = 'audio' | 'bloc' | 'file' | 'image' | 'location' | 'markdown' | 'text' | 'video';
 
-export declare const Composer: MemoExoticComponent<ForwardRefExoticComponent<Omit<Props_3, "ref"> & RefAttributes<HTMLDivElement>>>;
+export declare const Composer: MemoExoticComponent<({ ref, className, inputRef, disableComposer, isReadOnly, allowFileUpload, disableSendButton, connected, composerPlaceholder, footer, sendMessage, uploadFile, storageKey, children, ...props }: Props_3) => JSX.Element | null>;
 
 export declare const CONFIG_ACCESS_DENIED = "Access denied to configuration file. Please check your credentials or your configuration URL and try again.";
 
 export { Configuration }
 
 export declare const Container: {
-    ({ children, className, uploadFile, allowFileUpload, storageKey, connected: _, ...props }: Props_4): JSX_3.Element;
+    ({ ref, children, className, uploadFile, allowFileUpload, storageKey, connected: _, ...props }: Props_4): JSX.Element;
     displayName: string;
 };
 
@@ -247,7 +250,7 @@ declare type ErrorProps = {
     closeWindow?: () => void;
 };
 
-export declare function ErrorState({ error, restartConversation, closeWindow }: ErrorProps): JSX_3.Element;
+export declare function ErrorState({ error, restartConversation, closeWindow }: ErrorProps): JSX.Element;
 
 declare type EventError = Error & {
     type: 'error';
@@ -261,9 +264,15 @@ declare type Events_2 = {
     [key: string]: string;
 };
 
-export declare const Fab: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
+export declare const Fab: {
+    ({ ref, onClick, imgUrl, ...props }: FabProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type FabProps = ComponentProps<'div'> & {
+    onClick?: () => void;
     imgUrl?: string;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+};
 
 export declare type Feedback = AddMessageFeedbackBody;
 
@@ -287,9 +296,9 @@ export declare const getUseChatSoundStore: typeof ChatSoundStores.getInstance;
 
 export declare const getUseWebchatClientStore: typeof WebchatClientStores.getInstance;
 
-export declare const Header: ({ defaultOpen, closeWindow, configuration, restartConversation, disabled, soundOn, toggleSound, clientId, ...props }: HeaderProps) => JSX_3.Element;
+export declare const Header: ({ defaultOpen, closeWindow, configuration, restartConversation, disabled, soundOn, toggleSound, clientId, ...props }: HeaderProps) => JSX.Element;
 
-declare type HeaderProps = {
+declare type HeaderProps = ComponentProps<typeof Collapsible.Root> & {
     defaultOpen?: boolean;
     open?: boolean;
     disabled?: boolean;
@@ -363,21 +372,7 @@ export declare type LocationBlock = {
 
 export declare const mapToWebchatError: (thrown: unknown) => WebchatError;
 
-export declare const Message: MemoExoticComponent<ForwardRefExoticComponent<{
-    children?: ReactNode;
-    renderers?: Partial<Renderers>;
-    sendMessage?: (payload: IntegrationMessage["payload"]) => void;
-    addMessageFeedback?: (messageId: string, feedback: Feedback) => void;
-    isReadOnly?: boolean;
-    isLastDeliveredMessage?: boolean;
-    showAvatar?: boolean;
-} & BlockMessage<GenericBlock> & {
-    direction: "incoming" | "outgoing" | "system";
-    sender: {
-        name: string;
-        avatar?: string;
-    };
-} & RefAttributes<HTMLDivElement>>>;
+export declare const Message: MemoExoticComponent<({ ref, direction, block, disableInput, children, sender, id, authorId, status, renderers, isReadOnly, isLastDeliveredMessage, feedback, timestamp, metadata, sendMessage, addMessageFeedback, showAvatar, }: MessageProps) => JSX.Element>;
 
 export declare const MessageContext: Context<MessageContextVaue | null>;
 
@@ -386,9 +381,9 @@ declare type MessageContextVaue = {
     setIsLoading: Dispatch<SetStateAction<string[]>>;
 };
 
-export declare const MessageList: MemoExoticComponent<({ className, messages, isTyping, headerMessage, renderers, botAvatar, botDescription, botName, sendMessage, addMessageFeedback, showMarquee, showDateSystemMessage, showMessageStatus, showIncomingMessageAvatar, showOutgoingMessageAvatar, ...props }: ComponentProps<"div"> & MessageListProps) => JSX_3.Element>;
+export declare const MessageList: MemoExoticComponent<({ className, messages, isTyping, headerMessage, renderers, botAvatar, botDescription, botName, sendMessage, addMessageFeedback, showMarquee, showDateSystemMessage, showMessageStatus, showIncomingMessageAvatar, showOutgoingMessageAvatar, ...props }: MessageListProps) => JSX.Element>;
 
-declare type MessageListProps = {
+declare type MessageListProps = ComponentProps<'div'> & {
     messages?: RichBlockMessage[];
     isTyping?: boolean;
     headerMessage?: string;
@@ -405,12 +400,27 @@ declare type MessageListProps = {
     showOutgoingMessageAvatar?: boolean;
 };
 
-export declare const MessagePreview: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
+export declare const MessagePreview: {
+    ({ ref, children, onClick, avatarUrl, botName, description, onClose, ...props }: MessagePreviewProps): JSX.Element;
+    displayName: string;
+};
+
+declare type MessagePreviewProps = ComponentProps<'div'> & {
     avatarUrl?: string;
     botName?: string;
     description?: string;
     onClose?: () => void;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+};
+
+declare type MessageProps = {
+    children?: ReactNode;
+    renderers?: Partial<Renderers>;
+    sendMessage?: (payload: IntegrationMessage['payload']) => void;
+    addMessageFeedback?: (messageId: string, feedback: Feedback) => void;
+    isReadOnly?: boolean;
+    isLastDeliveredMessage?: boolean;
+    showAvatar?: boolean;
+} & RichBlockMessage;
 
 export declare const MISSING_API_URL = "The API url is required to initialize the webchat.";
 
@@ -424,7 +434,7 @@ export declare function Modal({ open, onOpenChange, children, }: {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
-}): JSX_3.Element;
+}): JSX.Element;
 
 export declare namespace Modal {
     var Button: ForwardRefExoticComponent<Dialog.DialogTriggerProps & RefAttributes<HTMLButtonElement>>;
@@ -440,7 +450,7 @@ declare function ModalContent({ title, description, onConfirm, onCancel, confirm
     confirmButtonText?: string;
     cancelButtonText?: string;
     children: ReactNode;
-}): JSX_3.Element;
+}): JSX.Element;
 
 export declare const ModalContext: Context<ModalContextValue>;
 
@@ -450,7 +460,7 @@ declare type ModalContextValue = {
 
 export declare const ModalProvider: ({ children }: {
     children: ReactNode;
-}) => JSX_3.Element;
+}) => JSX.Element;
 
 export declare const NETWORK_ERROR = "Please check your internet connection and refresh the page.";
 
@@ -461,6 +471,7 @@ export declare type Options = {
 };
 
 export declare type Props = {
+    ref?: Ref<HTMLDivElement>;
     className?: string;
     renderers?: Partial<Renderers>;
     configuration: Configuration;
@@ -558,11 +569,12 @@ export declare type Renderers = {
 
 export declare const renderers: Renderers;
 
-export declare const RestartConversationButton: ({ restartConversation, ...props }: Props_5) => JSX_3.Element;
+export declare const RestartConversationButton: ({ restartConversation, ...props }: Props_5) => JSX.Element;
 
 export declare const retryWithBackoff: <T>(fn: () => Promise<T>, maxAttempts?: number, delayMs?: number) => Promise<T>;
 
 export declare type RichBlockMessage<T = GenericBlock> = BlockMessage<T> & {
+    ref?: Ref<HTMLDivElement>;
     direction: 'incoming' | 'outgoing' | 'system';
     sender: {
         name: string;
@@ -613,7 +625,7 @@ export declare type StyleOptions = {
 /**
  * StylesheetProvider component that manages theme styles and font loading
  */
-export declare const StylesheetProvider: ({ color, fontFamily, radius, themeMode, variant, headerVariant, additionalStylesheetUrl, }: Props_7) => JSX_3.Element;
+export declare const StylesheetProvider: ({ color, fontFamily, radius, themeMode, variant, headerVariant, additionalStylesheetUrl, }: Props_7) => JSX.Element;
 
 export declare type TextBlock = {
     type: 'text';
@@ -627,7 +639,7 @@ declare type ToPayloadType<T extends IntegrationMessageTypes> = {
     };
 }[T];
 
-export declare const TypingIndicator: MemoExoticComponent<({ ...props }: ComponentProps<"div">) => JSX_3.Element>;
+export declare const TypingIndicator: MemoExoticComponent<({ ...props }: ComponentProps<"div">) => JSX.Element>;
 
 export declare type UseImageSizeResult = [Dimensions | null, {
     loading: boolean;
@@ -687,7 +699,7 @@ export declare type VideoBlock = {
     url: string;
 };
 
-export declare const Webchat: ({ clientId, storageKey, configuration, allowFileUpload, apiUrl, user, conversationId, ...props }: Props_6) => JSX_3.Element;
+export declare const Webchat: ({ clientId, storageKey, configuration, allowFileUpload, apiUrl, user, conversationId, ...props }: Props_6) => JSX.Element;
 
 export declare const webchatClasses: {
     readonly container: {
@@ -1268,8 +1280,8 @@ export declare type WebchatEvents = {
 };
 
 declare type WebchatStore = {
-    messageContainerRef: RefObject<HTMLDivElement>;
-    setMessageContainerRef: (ref: RefObject<HTMLDivElement>) => void;
+    messageContainerRef: RefObject<HTMLDivElement | null>;
+    setMessageContainerRef: (ref: RefObject<HTMLDivElement | null>) => void;
     portalContainer: HTMLElement | null;
     setPortalContainer: (container: HTMLElement | null) => void;
     eventEmitter: EventEmitter<Events_2>;