@botpress/webchat 4.2.0 → 4.2.1

package/.storybook/main.ts

@@ -1,4 +1,5 @@
-import { dirname, join } from 'path'
+import { join, dirname } from 'path'
+import { withoutVitePlugins } from '@storybook/builder-vite'
 /**
  * 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.
@@ -20,8 +21,9 @@ const config = {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
-  viteFinal(config) {
-    config.plugins = (config.plugins ?? []).filter((plugin) => plugin && 'name' in plugin && plugin.name !== 'vite:dts')
+  async viteFinal(config) {
+    config.plugins = await withoutVitePlugins(config.plugins, ['vite:dts'])
+
     return config
   },
 }

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @botpress/webchat@4.2.0 build /home/runner/work/genisys/genisys/packages/webchat-components
+> @botpress/webchat@4.2.1 build /home/runner/work/genisys/genisys/packages/webchat-components
 > vite build
 
 vite v5.4.8 building for production...
@@ -10,12 +10,12 @@ rendering chunks...
 [vite:dts] Start generate declaration files...
 computing gzip size...
 dist/style.css   54.01 kB │ gzip:   9.07 kB
-dist/index.js   681.72 kB │ gzip: 183.56 kB
+dist/index.js   679.73 kB │ gzip: 183.94 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 18681ms.
+[vite:dts] Declaration files built in 19038ms.
 
 dist/style.css       54.01 kB │ gzip:   9.07 kB
-dist/index.umd.cjs  451.60 kB │ gzip: 148.63 kB
-✓ built in 28.70s
+dist/index.umd.cjs  451.76 kB │ gzip: 148.76 kB
+✓ built in 23.74s

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,12 +11,14 @@ 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 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LatestWebchatTheme } from '@bpinternal/shared';
 import { MemoExoticComponent } from 'react';
 import { Message as Message_2 } from '@botpress/webchat-client';
+import { NamedExoticComponent } from 'react';
 import { PersistOptions } from 'zustand/middleware';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
@@ -39,13 +41,9 @@ declare type AnyEvent = ValueOf<{
 export declare type AudioBlock = {
     type: 'audio';
     url: string;
-    ref?: Ref<HTMLAudioElement>;
 };
 
-export declare const Avatar: {
-    ({ userId, src, container, image, fallback, ...props }: AvatarProps): JSX.Element;
-    displayName: string;
-};
+export declare const Avatar: ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & RefAttributes<HTMLSpanElement>>;
 
 declare type AvatarProps = {
     userId?: string;
@@ -65,7 +63,7 @@ export declare type BlocIntegrationMessageItems = Extract<IntegrationMessage['pa
     type: 'bloc';
 }>['items'];
 
-export declare const Block: <T extends GenericBlock["type"]>({ block, renderers, ...props }: BlockProps<T>) => JSX_2.Element;
+export declare const Block: <T extends GenericBlock["type"]>({ block, renderers, ...props }: BlockProps<T>) => JSX.Element;
 
 export declare type BlockMessage<T = GenericBlock> = {
     id: string;
@@ -136,7 +134,7 @@ export declare type CarouselBlock = {
     blocks: GenericBlock[];
 };
 
-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;
+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;
 
 declare type ChatSoundStore = {
     soundOn: boolean;
@@ -178,14 +176,14 @@ export declare type ComposableIntegrationMessagePayload = Extract<IntegrationMes
 
 declare type ComposableIntegrationMessageTypes = 'audio' | 'bloc' | 'file' | 'image' | 'location' | 'markdown' | 'text' | 'video';
 
-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 Composer: NamedExoticComponent<Omit<Props_3, "ref"> & RefAttributes<HTMLDivElement>>;
 
 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: {
-    ({ ref, children, className, uploadFile, allowFileUpload, storageKey, connected: _, ...props }: Props_4): JSX.Element;
+    ({ children, className, uploadFile, allowFileUpload, storageKey, connected: _, ...props }: Props_4): JSX_2.Element;
     displayName: string;
 };
 
@@ -250,7 +248,7 @@ declare type ErrorProps = {
     closeWindow?: () => void;
 };
 
-export declare function ErrorState({ error, restartConversation, closeWindow }: ErrorProps): JSX.Element;
+export declare function ErrorState({ error, restartConversation, closeWindow }: ErrorProps): JSX_2.Element;
 
 declare type EventError = Error & {
     type: 'error';
@@ -264,15 +262,9 @@ declare type Events_2 = {
     [key: string]: string;
 };
 
-export declare const Fab: {
-    ({ ref, onClick, imgUrl, ...props }: FabProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type FabProps = ComponentProps<'div'> & {
-    onClick?: () => void;
+export declare const Fab: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
     imgUrl?: string;
-};
+}, "ref"> & RefAttributes<HTMLDivElement>>;
 
 export declare type Feedback = AddMessageFeedbackBody;
 
@@ -296,9 +288,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.Element;
+export declare const Header: ({ defaultOpen, closeWindow, configuration, restartConversation, disabled, soundOn, toggleSound, clientId, ...props }: HeaderProps) => JSX_2.Element;
 
-declare type HeaderProps = ComponentProps<typeof Collapsible.Root> & {
+declare type HeaderProps = {
     defaultOpen?: boolean;
     open?: boolean;
     disabled?: boolean;
@@ -372,7 +364,21 @@ export declare type LocationBlock = {
 
 export declare const mapToWebchatError: (thrown: unknown) => WebchatError;
 
-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 Message: NamedExoticComponent<{
+    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 MessageContext: Context<MessageContextVaue | null>;
 
@@ -381,9 +387,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 }: MessageListProps) => JSX.Element>;
+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_2.Element>;
 
-declare type MessageListProps = ComponentProps<'div'> & {
+declare type MessageListProps = {
     messages?: RichBlockMessage[];
     isTyping?: boolean;
     headerMessage?: string;
@@ -400,27 +406,12 @@ declare type MessageListProps = ComponentProps<'div'> & {
     showOutgoingMessageAvatar?: boolean;
 };
 
-export declare const MessagePreview: {
-    ({ ref, children, onClick, avatarUrl, botName, description, onClose, ...props }: MessagePreviewProps): JSX.Element;
-    displayName: string;
-};
-
-declare type MessagePreviewProps = ComponentProps<'div'> & {
+export declare const MessagePreview: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
     avatarUrl?: string;
     botName?: string;
     description?: string;
     onClose?: () => void;
-};
-
-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;
+}, "ref"> & RefAttributes<HTMLDivElement>>;
 
 export declare const MISSING_API_URL = "The API url is required to initialize the webchat.";
 
@@ -434,7 +425,7 @@ export declare function Modal({ open, onOpenChange, children, }: {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
-}): JSX.Element;
+}): JSX_2.Element;
 
 export declare namespace Modal {
     var Button: ForwardRefExoticComponent<Dialog.DialogTriggerProps & RefAttributes<HTMLButtonElement>>;
@@ -450,7 +441,7 @@ declare function ModalContent({ title, description, onConfirm, onCancel, confirm
     confirmButtonText?: string;
     cancelButtonText?: string;
     children: ReactNode;
-}): JSX.Element;
+}): JSX_2.Element;
 
 export declare const ModalContext: Context<ModalContextValue>;
 
@@ -460,7 +451,7 @@ declare type ModalContextValue = {
 
 export declare const ModalProvider: ({ children }: {
     children: ReactNode;
-}) => JSX.Element;
+}) => JSX_2.Element;
 
 export declare const NETWORK_ERROR = "Please check your internet connection and refresh the page.";
 
@@ -471,7 +462,6 @@ export declare type Options = {
 };
 
 export declare type Props = {
-    ref?: Ref<HTMLDivElement>;
     className?: string;
     renderers?: Partial<Renderers>;
     configuration: Configuration;
@@ -569,12 +559,11 @@ export declare type Renderers = {
 
 export declare const renderers: Renderers;
 
-export declare const RestartConversationButton: ({ restartConversation, ...props }: Props_5) => JSX.Element;
+export declare const RestartConversationButton: ({ restartConversation, ...props }: Props_5) => JSX_2.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;
@@ -625,7 +614,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.Element;
+export declare const StylesheetProvider: ({ color, fontFamily, radius, themeMode, variant, headerVariant, additionalStylesheetUrl, }: Props_7) => JSX_2.Element;
 
 export declare type TextBlock = {
     type: 'text';
@@ -639,7 +628,7 @@ declare type ToPayloadType<T extends IntegrationMessageTypes> = {
     };
 }[T];
 
-export declare const TypingIndicator: MemoExoticComponent<({ ...props }: ComponentProps<"div">) => JSX.Element>;
+export declare const TypingIndicator: MemoExoticComponent<({ ...props }: ComponentProps<"div">) => JSX_2.Element>;
 
 export declare type UseImageSizeResult = [Dimensions | null, {
     loading: boolean;
@@ -699,7 +688,7 @@ export declare type VideoBlock = {
     url: string;
 };
 
-export declare const Webchat: ({ clientId, storageKey, configuration, allowFileUpload, apiUrl, user, conversationId, ...props }: Props_6) => JSX.Element;
+export declare const Webchat: ({ clientId, storageKey, configuration, allowFileUpload, apiUrl, user, conversationId, ...props }: Props_6) => JSX_2.Element;
 
 export declare const webchatClasses: {
     readonly container: {