@botonic/webchat-react 2.23.1

package/lib/components/message/carousel-message/carousel-message.d.ts

@@ -0,0 +1,18 @@
+import { BotonicButtonContent, BotonicCarouselElement } from '@botonic/shared';
+import { MessageProps } from '../message';
+export interface CarouselElement extends BotonicCarouselElement {
+    id: string;
+}
+export interface CarouselMessageProps extends Omit<MessageProps, 'children'> {
+    /** The carousel elements to display. */
+    elements: CarouselElement[];
+    /** Callback when a button is clicked. */
+    onButtonClick?: (button: BotonicButtonContent) => void;
+    /** Callback when an element image loads. */
+    onElementImageLoad?: (elementIndex: number) => void;
+    /** Additional CSS class names. */
+    className?: string;
+}
+/** Carousel message component displaying a list of elements with images and buttons. */
+export declare const CarouselMessage: import('react').ForwardRefExoticComponent<CarouselMessageProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CarouselMessage;

package/lib/components/message/carousel-message/index.d.ts

@@ -0,0 +1 @@
+export { type CarouselElement, type CarouselMessageProps, } from './carousel-message';

package/lib/components/message/document-message/document-message.d.ts

@@ -0,0 +1,22 @@
+import { MessageProps } from '../message';
+export interface DocumentMessageProps extends Omit<MessageProps, 'children'> {
+    /** The document URL. */
+    src: string;
+    /** The filename of the document. */
+    filename?: string;
+    /** The MIME type of the document. */
+    mimeType?: string;
+    /** The file size in bytes. */
+    size?: number;
+    /** Alt text for the document (for accessibility). */
+    alt?: string;
+    /** Callback when document loads (useful for scroll adjustment). */
+    onDocumentLoad?: () => void;
+    /** Callback when document is downloaded. */
+    onDownload?: () => void;
+    /** Additional CSS class names to apply to the message. */
+    className?: string;
+}
+/** Document message component for displaying document messages. */
+export declare const DocumentMessage: import('react').ForwardRefExoticComponent<DocumentMessageProps & import('react').RefAttributes<HTMLDivElement>>;
+export default DocumentMessage;

package/lib/components/message/document-message/index.d.ts

@@ -0,0 +1 @@
+export { default, DocumentMessage, type DocumentMessageProps, } from './document-message';

package/lib/components/message/image-message/image-message.d.ts

@@ -0,0 +1,14 @@
+import { MessageProps } from '../message';
+export interface ImageMessageProps extends Omit<MessageProps, 'children'> {
+    /** The image URL. */
+    src: string;
+    /** Alt text for the image. */
+    alt?: string;
+    /** Callback when image loads (useful for scroll adjustment). */
+    onImageLoad?: () => void;
+    /** Additional CSS class names to apply to the message. */
+    className?: string;
+}
+/** Image message component for displaying image messages. */
+export declare const ImageMessage: import('react').ForwardRefExoticComponent<ImageMessageProps & import('react').RefAttributes<HTMLDivElement>>;
+export default ImageMessage;

package/lib/components/message/image-message/index.d.ts

@@ -0,0 +1 @@
+export { default, ImageMessage, type ImageMessageProps } from './image-message';

package/lib/components/message/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Message Components
+ *
+ * All message components now support custom CSS classes via the `className` prop.
+ * Each message type has its own CSS module with a base class that can be extended:
+ *
+ * - TextMessage: `.textMessageBase` class for text-specific styling
+ * - ImageMessage: `.imageMessageBase` class for image-specific styling
+ * - AudioMessage: `.audioMessageBase` class for audio-specific styling
+ * - VideoMessage: `.videoMessageBase` class for video-specific styling
+ * - DocumentMessage: `.documentMessageBase` class for document-specific styling
+ * - LocationMessage: `.locationMessageBase` class for location-specific styling
+ * - CarouselMessage: `.carouselMessageBase` class for carousel-specific styling
+ * - ButtonMessage: `.buttonMessageBase` class for button-specific styling
+ *
+ * Usage example:
+ * ```tsx
+ * <TextMessage
+ *   text="Hello world"
+ *   className="my-custom-text-style"
+ *   variant="bot"
+ * />
+ * ```
+ */
+export { Message, type MessageProps } from './message';
+export { AudioMessage, type AudioMessageProps } from './audio-message';
+export { ButtonMessage, type ButtonMessageProps, type MessageButton, } from './button-message';
+export { type CarouselElement, type CarouselMessageProps, } from './carousel-message';
+export { DocumentMessage, type DocumentMessageProps } from './document-message';
+export { ImageMessage, type ImageMessageProps } from './image-message';
+export { LocationMessage, type LocationMessageProps } from './location-message';
+export { TextMessage, type TextMessageProps } from './text-message';
+export { VideoMessage, type VideoMessageProps } from './video-message';

package/lib/components/message/location-message/index.d.ts

@@ -0,0 +1 @@
+export { default, LocationMessage, type LocationMessageProps, } from './location-message';

package/lib/components/message/location-message/location-message.d.ts

@@ -0,0 +1,16 @@
+import { MessageProps } from '../message';
+export interface LocationMessageProps extends Omit<MessageProps, 'children'> {
+    /** The latitude coordinate. */
+    latitude: number;
+    /** The longitude coordinate. */
+    longitude: number;
+    /** Alt text for accessibility. */
+    alt?: string;
+    /** Callback when location loads. */
+    onLocationLoad?: () => void;
+    /** Additional CSS class names. */
+    className?: string;
+}
+/** Location message component for displaying location coordinates. */
+export declare const LocationMessage: import('react').ForwardRefExoticComponent<LocationMessageProps & import('react').RefAttributes<HTMLDivElement>>;
+export default LocationMessage;

package/lib/components/message/message/index.d.ts

@@ -0,0 +1,5 @@
+export { Message, type MessageProps } from './message';
+export { MessageAvatar, type MessageAvatarProps } from './message-avatar';
+export { MessageBubble, type MessageBubbleProps } from './message-bubble';
+export { MessageInfo, type MessageInfoProps } from './message-info';
+export { useMessage, type UseMessageProps, type UseMessageReturn, } from './use-message';

package/lib/components/message/message/message-avatar/index.d.ts

@@ -0,0 +1 @@
+export { MessageAvatar, type MessageAvatarProps } from './message-avatar';

package/lib/components/message/message/message-avatar/message-avatar.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface MessageAvatarProps {
+    /** The variant of the message indicating who sent it. */
+    variant?: 'user' | 'bot' | 'system' | 'agent';
+    /** The size of the avatar. */
+    size?: 'small' | 'medium' | 'large';
+    /** The source URL for the avatar image. */
+    src?: string;
+    /** Alt text for the avatar image. */
+    alt?: string;
+    /** SVG content as a string (alternative to src). */
+    svg?: string;
+    /** Whether to show sender name. */
+    showName?: boolean;
+    /** The sender name to display. */
+    name?: string;
+    /** Fallback content when no image is provided. */
+    fallback?: React.ReactNode;
+    /** A class name to apply to the avatar. */
+    className?: string;
+}
+/** Message avatar component that displays the sender's avatar. */
+export declare const MessageAvatar: React.ForwardRefExoticComponent<MessageAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export default MessageAvatar;

package/lib/components/message/message/message-bubble/index.d.ts

@@ -0,0 +1 @@
+export { MessageBubble, type MessageBubbleProps } from './message-bubble';

package/lib/components/message/message/message-bubble/message-bubble.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { MessageAvatarProps } from '../message-avatar';
+export interface MessageBubbleProps {
+    /** The variant of the message indicating who sent it. */
+    variant?: 'user' | 'bot' | 'system' | 'agent';
+    /** The status of the message. */
+    status?: 'sending' | 'sent' | 'error';
+    /** Avatar props when avatar should be rendered inside the bubble. */
+    avatarProps?: MessageAvatarProps;
+    /** A class name to apply to the bubble. */
+    className?: string;
+    /** The content to render inside the bubble. */
+    children: React.ReactNode;
+}
+/** Message bubble component that contains the actual message content. */
+export declare const MessageBubble: React.ForwardRefExoticComponent<MessageBubbleProps & React.RefAttributes<HTMLDivElement>>;
+export default MessageBubble;

package/lib/components/message/message/message-info/index.d.ts

@@ -0,0 +1 @@
+export { MessageInfo, type MessageInfoProps } from './message-info';

package/lib/components/message/message/message-info/message-info.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { MessageAvatarProps } from '../message-avatar';
+export interface MessageInfoProps {
+    /** The variant of the message indicating who sent it. */
+    variant?: 'user' | 'bot' | 'system' | 'agent';
+    /** Position of the info relative to the bubble. */
+    position?: 'top' | 'bottom';
+    /** Whether to show timestamp. */
+    showTimestamp?: boolean;
+    /** The timestamp to display. */
+    timestamp?: string | Date;
+    /** Whether to show message status. */
+    showStatus?: boolean;
+    /** The status of the message. */
+    status?: 'sending' | 'sent' | 'error';
+    /** Avatar props when avatar should be rendered in the info area. */
+    avatarProps?: MessageAvatarProps;
+    /** A class name to apply to the info container. */
+    className?: string;
+    /** Additional content to render in the info area. */
+    children?: React.ReactNode;
+}
+/** Message info component that displays timestamp, status, and other metadata. */
+export declare const MessageInfo: React.ForwardRefExoticComponent<MessageInfoProps & React.RefAttributes<HTMLDivElement>>;
+export default MessageInfo;

package/lib/components/message/message/message.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { AvatarConfigResult } from '../../message-machine-renderer/use-avatar';
+export interface MessageProps {
+    /** The variant of the message indicating who sent it. */
+    variant?: 'user' | 'bot' | 'system' | 'agent';
+    /** The status of the message. */
+    status?: 'sending' | 'sent' | 'error';
+    /** Whether to show timestamp. */
+    showTimestamp?: boolean;
+    /** The timestamp to display. */
+    timestamp?: string | Date;
+    /** Whether to show message status. */
+    showStatus?: boolean;
+    /** Pre-computed avatar configuration from useAvatar hook. */
+    avatarConfig?: AvatarConfigResult;
+    /** A class name to apply to the message. */
+    className?: string;
+    /** The content to render inside the message bubble. */
+    children: React.ReactNode;
+}
+/** Message component with common functionality for all message types. */
+export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
+export default Message;

package/lib/components/message/message/use-message.d.ts

@@ -0,0 +1,43 @@
+import { AvatarConfigResult } from '../../message-machine-renderer/use-avatar';
+import { MessageAvatarProps } from './message-avatar';
+import { MessageBubbleProps } from './message-bubble';
+import { MessageInfoProps } from './message-info';
+export interface UseMessageProps {
+    /** The variant of the message indicating who sent it. */
+    variant?: 'user' | 'bot' | 'system' | 'agent';
+    /** The status of the message. */
+    status?: 'sending' | 'sent' | 'error';
+    /** Whether to show timestamp. */
+    showTimestamp?: boolean;
+    /** The timestamp to display. */
+    timestamp?: string | Date;
+    /** Whether to show message status. */
+    showStatus?: boolean;
+    /** Pre-computed avatar configuration from useAvatar hook. */
+    avatarConfig?: AvatarConfigResult;
+    /** A class name to apply to the message. */
+    className?: string;
+    /** The content to render inside the bubble. */
+    children: React.ReactNode;
+    /** Additional props to pass through. */
+    [key: string]: any;
+}
+export interface UseMessageReturn {
+    /** CSS classes for the message container */
+    messageClasses: string;
+    /** Props to spread into MessageBubble component */
+    bubbleProps: MessageBubbleProps & {
+        avatarProps?: MessageAvatarProps;
+    };
+    /** Props to spread into MessageInfo component */
+    infoProps: MessageInfoProps & {
+        avatarProps?: MessageAvatarProps;
+    };
+    /** Props for standalone MessageAvatar component (null if integrated) */
+    standaloneAvatarProps: MessageAvatarProps | null;
+}
+/**
+ * Hook for Message component that handles avatar placement and prop distribution
+ * This hook receives pre-computed avatar configs for performance optimization
+ */
+export declare function useMessage(props: UseMessageProps): UseMessageReturn;

package/lib/components/message/text-message/index.d.ts

@@ -0,0 +1 @@
+export { default, TextMessage, type TextMessageProps } from './text-message';

package/lib/components/message/text-message/text-message.d.ts

@@ -0,0 +1,10 @@
+import { MessageProps } from '../message';
+export interface TextMessageProps extends Omit<MessageProps, 'children'> {
+    /** The text content of the message. */
+    text: string;
+    /** Additional CSS class names to apply to the message. */
+    className?: string;
+}
+/** Text message component for displaying plain text messages. */
+export declare const TextMessage: import('react').ForwardRefExoticComponent<TextMessageProps & import('react').RefAttributes<HTMLDivElement>>;
+export default TextMessage;

package/lib/components/message/video-message/index.d.ts

@@ -0,0 +1 @@
+export { default, VideoMessage, type VideoMessageProps } from './video-message';

package/lib/components/message/video-message/video-message.d.ts

@@ -0,0 +1,20 @@
+import { MessageProps } from '../message';
+export interface VideoMessageProps extends Omit<MessageProps, 'children'> {
+    /** The video URL. */
+    src: string;
+    /** Alt text for the video (for accessibility). */
+    alt?: string;
+    /** Callback when video loads (useful for scroll adjustment). */
+    onVideoLoad?: () => void;
+    /** Callback when video starts playing. */
+    onPlay?: () => void;
+    /** Callback when video pauses. */
+    onPause?: () => void;
+    /** Callback when video ends. */
+    onEnded?: () => void;
+    /** Additional CSS class names to apply to the message. */
+    className?: string;
+}
+/** Video message component for displaying video messages. */
+export declare const VideoMessage: import('react').ForwardRefExoticComponent<VideoMessageProps & import('react').RefAttributes<HTMLDivElement>>;
+export default VideoMessage;

package/lib/components/message-machine-renderer/index.d.ts

@@ -0,0 +1,3 @@
+export { MessageMachineRenderer, type MessageMachineRendererProps, } from './message-machine-renderer';
+export { type AvatarConfig, type AvatarConfigResult, useAvatar, type UseAvatarReturn, } from './use-avatar';
+export { type MessageMachineData, useMessageMachineRenderer, type UseMessageMachineRendererOptions, } from './use-message-machine-renderer';

package/lib/components/message-machine-renderer/message-machine-renderer.d.ts

@@ -0,0 +1,28 @@
+import { BotonicButtonContent } from '@botonic/shared';
+import { WebchatMessageMachine } from '@botonic/webchat-core';
+import { default as React } from 'react';
+import { ActorRefFrom } from 'xstate';
+import { MessageProps } from '../message/message';
+import { AvatarConfig } from './use-avatar';
+export interface MessageMachineRendererProps {
+    /** The XState message machine actor */
+    messageActor: ActorRefFrom<typeof WebchatMessageMachine>;
+    /** Custom renderer for custom message types */
+    customMessageRenderer?: (message: unknown, messageData: unknown, onButtonClick: (button: BotonicButtonContent) => void) => React.ReactNode;
+    /** Additional props to pass to all message components */
+    baseProps?: Partial<MessageProps> & {
+        avatarConfig?: AvatarConfig;
+        customMessages?: any;
+    };
+    /** Callback when content (like images) finishes loading */
+    onContentLoad?: () => void;
+    /** Callback when image starts loading */
+    onImageLoadStart?: (imageId: string) => void;
+    /** Callback when image finishes loading */
+    onImageLoadComplete?: (imageId: string) => void;
+}
+/**
+ * Pure UI component that renders a message machine state to UI components
+ * Uses the useMessageMachineRenderer hook from @botonic/webchat for all XState logic
+ */
+export declare const MessageMachineRenderer: React.FC<MessageMachineRendererProps>;

package/lib/components/message-machine-renderer/use-avatar.d.ts

@@ -0,0 +1,34 @@
+import { MessageAvatarProps } from '../message/message/message-avatar';
+export interface AvatarConfig {
+    bot?: {
+        placement: 'standalone' | 'bubble' | 'info';
+        src?: string;
+        alt?: string;
+        showName?: boolean;
+        name?: string;
+        /** SVG content as a string (alternative to src) */
+        svg?: string;
+    };
+    agent?: {
+        placement: 'standalone' | 'bubble' | 'info';
+        src?: string;
+        alt?: string;
+        showName?: boolean;
+        name?: string;
+        /** SVG content as a string (alternative to src) */
+        svg?: string;
+    };
+}
+export interface AvatarConfigResult {
+    placement: 'standalone' | 'bubble' | 'info';
+    avatarProps: MessageAvatarProps;
+}
+export interface UseAvatarReturn {
+    bot: AvatarConfigResult | null;
+    agent: AvatarConfigResult | null;
+}
+/**
+ * Hook that computes avatar configurations once for all messages
+ * This is a performance optimization to avoid recomputing avatar props for each message
+ */
+export declare function useAvatar(avatarConfig?: AvatarConfig): UseAvatarReturn;

package/lib/components/message-machine-renderer/use-message-machine-renderer.d.ts

@@ -0,0 +1,31 @@
+import { BotonicButtonContent, WebchatMessage } from '@botonic/shared';
+import { WebchatMessageMachine } from '@botonic/webchat-core';
+import { ActorRefFrom } from 'xstate';
+import { AvatarConfigResult } from './use-avatar';
+export interface MessageMachineData {
+    message: WebchatMessage;
+    status: 'unsent' | 'sent' | 'failed';
+    canRetry: boolean;
+    messageProps: {
+        variant: 'user' | 'bot' | 'agent';
+        status: 'sending' | 'sent' | 'error';
+        timestamp?: Date;
+        showTimestamp: boolean;
+        isClickable: boolean;
+        onPress?: () => void;
+        avatarConfig?: AvatarConfigResult;
+    };
+    handleButtonClick: (button: BotonicButtonContent) => void;
+}
+export interface UseMessageMachineRendererOptions {
+    messageActor: ActorRefFrom<typeof WebchatMessageMachine>;
+    baseProps?: Record<string, any> & {
+        botAvatarConfig?: AvatarConfigResult | null;
+        agentAvatarConfig?: AvatarConfigResult | null;
+    };
+}
+/**
+ * Hook that abstracts all XState machine logic for message rendering
+ * This handles machine state subscription, prop transformation, and interactions
+ */
+export declare function useMessageMachineRenderer({ messageActor, baseProps, }: UseMessageMachineRendererOptions): MessageMachineData;

package/lib/components/shared/button-component/button-component.d.ts

@@ -0,0 +1,24 @@
+import { BotonicButtonContent } from '@botonic/shared';
+export interface ButtonComponentProps {
+    /** The button text. */
+    text: string;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Handler for button click. */
+    onClick?: (button: BotonicButtonContent | {
+        text: string;
+        value: string;
+    }) => void;
+    /** The button data (either BotonicButtonContent or simple button data). */
+    button: BotonicButtonContent | {
+        text: string;
+        value: string;
+    };
+    /** Additional CSS class names to apply to the button. */
+    className?: string;
+    /** Button variant - 'primary' for carousel-style, 'secondary' for button-message-style. */
+    variant?: 'primary' | 'secondary';
+}
+/** Shared button component for use in button messages and carousel messages. */
+export declare const ButtonComponent: import('react').ForwardRefExoticComponent<ButtonComponentProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default ButtonComponent;

package/lib/components/shared/button-component/index.d.ts

@@ -0,0 +1,2 @@
+export type { ButtonComponentProps } from './button-component';
+export { ButtonComponent } from './button-component';

package/lib/components/shared/index.d.ts

@@ -0,0 +1,2 @@
+export type { ButtonComponentProps } from './button-component';
+export { ButtonComponent } from './button-component';

package/lib/components/typing-indicator/index.d.ts

@@ -0,0 +1 @@
+export { TypingIndicator, type TypingIndicatorProps } from './typing-indicator';

package/lib/components/typing-indicator/typing-indicator.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface TypingIndicatorProps {
+    /** Whether the typing indicator should be visible */
+    isVisible?: boolean;
+    /** Custom class name for styling */
+    className?: string;
+}
+/**
+ * Typing indicator component that shows animated dots when the bot is typing
+ */
+export declare const TypingIndicator: React.FC<TypingIndicatorProps>;

package/lib/components/webchat-app/index.d.ts

@@ -0,0 +1 @@
+export { WebchatApp, type WebchatAppProps } from './webchat-app';

package/lib/components/webchat-app/webchat-app.d.ts

@@ -0,0 +1,41 @@
+import { WebchatController } from '@botonic/webchat-core';
+import { WebchatStateProps } from '../../hooks/use-webchat-state';
+import { CoverComponentRegistry } from '../webchat-overlay';
+export interface WebchatAppProps extends Omit<WebchatStateProps, 'customMessages'> {
+    /** Whether the webchat is open */
+    isOpen: boolean;
+    /** Callback when webchat is closed */
+    onClose?: () => void;
+    /** Callback when controller is ready - passes the controller instance */
+    onControllerReady?: (controller: WebchatController) => void;
+    /** Whether to show the trigger button (false when used with external trigger) */
+    showTrigger?: boolean;
+    /** Title for the header */
+    title?: string;
+    /** Placeholder text for input */
+    placeholder?: string;
+    /** Custom messages registry */
+    customMessages?: Record<string, React.ComponentType<any>>;
+    /** Cover components registry */
+    coverRegistry?: CoverComponentRegistry;
+}
+/**
+ * WebchatApp - Complete webchat component for lazy loading
+ *
+ * This component wraps WebchatProvider and all UI components,
+ * designed to be lazy-loaded by WebchatTrigger.
+ *
+ * @example
+ * ```tsx
+ * // Used internally by WebchatTrigger via lazy loading
+ * // Used internally by WebchatTrigger via relative lazy import
+ *
+ * <WebchatApp
+ *   appId="your-app-id"
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   onControllerReady={(ctrl) => console.log('Ready!', ctrl)}
+ * />
+ * ```
+ */
+export declare function WebchatApp({ appId, isOpen, onClose, onControllerReady, title, placeholder, customMessages, avatarConfig, coverRegistry, ...restConfig }: WebchatAppProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-container/use-webchat-container.d.ts

@@ -0,0 +1,26 @@
+import { AnimationEvent, RefObject } from 'react';
+import { WebchatState } from '../../hooks/use-webchat-state';
+import { WebchatContainerProps } from '../../types/webchat-props';
+export declare function useWebchatContainer(props: Omit<WebchatContainerProps, 'children'>, state: WebchatState, ref: RefObject<HTMLDivElement>): {
+    shouldRender: boolean;
+    containerProps: {
+        ref: RefObject<HTMLDivElement>;
+        role: string;
+        'aria-label': string;
+        'aria-live': "polite";
+        'data-testid': string;
+        'data-layout': "default";
+        'data-size': "large" | "compact" | "normal";
+        tabIndex: number;
+        onAnimationEnd: (e: AnimationEvent<HTMLDivElement>) => void;
+    };
+    variants: {
+        layout: "default";
+        size: "large" | "compact" | "normal";
+        position: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+        isOpen: any;
+        isOpening: boolean;
+        isClosing: boolean;
+        className: string | undefined;
+    };
+};

package/lib/components/webchat-container/webchat-container.d.ts

@@ -0,0 +1,2 @@
+import { WebchatContainerProps } from '../../types/webchat-props';
+export declare function WebchatContainer(props: WebchatContainerProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/webchat-header/use-webchat-header.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from 'react';
+import { WebchatState } from '../../hooks/use-webchat-state';
+import { WebchatHeaderProps } from '../../types/webchat-props';
+export declare function useWebchatHeader(props: WebchatHeaderProps, state: WebchatState, ref: RefObject<HTMLElement>): {
+    headerProps: {
+        ref: RefObject<HTMLElement>;
+        'aria-label': string;
+    };
+    title: string;
+    showStatus: boolean;
+    statusText: string | undefined;
+    showClose: boolean;
+    onClose: () => void;
+    connectionStatus: any;
+    variants: {
+        variant: "default";
+        className: string | undefined;
+    };
+};

package/lib/components/webchat-header/webchat-header.d.ts

@@ -0,0 +1,2 @@
+import { WebchatHeaderProps } from '../../types/webchat-props';
+export declare function WebchatHeader(props: WebchatHeaderProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-input/use-webchat-input.d.ts

@@ -0,0 +1,31 @@
+import { RefObject } from 'react';
+import { WebchatState } from '../../hooks/use-webchat-state';
+import { WebchatInputProps } from '../../types/webchat-props';
+export declare function useWebchatInput(props: WebchatInputProps, state: WebchatState, ref: RefObject<HTMLDivElement>): {
+    inputProps: {
+        ref: RefObject<HTMLDivElement>;
+        'aria-label': string;
+        'data-webchat-input': string;
+    };
+    inputValue: string;
+    handleSubmit: (e: React.FormEvent) => void;
+    handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    fieldProps: {
+        value: string;
+        onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+        onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+        placeholder: string;
+        disabled: boolean | undefined;
+        rows: number;
+    };
+    submitProps: {
+        type: "submit";
+        disabled: boolean | undefined;
+        'aria-label': string;
+    };
+    variants: {
+        variant: "default";
+        className: string | undefined;
+    };
+};

package/lib/components/webchat-input/webchat-input.d.ts

@@ -0,0 +1,2 @@
+import { WebchatInputProps } from '../../types/webchat-props';
+export declare function WebchatInput(props: WebchatInputProps): import("react/jsx-runtime").JSX.Element;