@botonic/webchat-react 2.26.0 → 2.27.0

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

@@ -1,11 +1,13 @@
 import { WebchatController } from '@botonic/webchat-core';
+import { ComponentType } from 'react';
+import { WebchatHeroHeaderLayoutConfig } from '../../hero-header-layout';
 import { WebchatStateProps } from '../../hooks/use-webchat-state';
 import { WebchatInputIcons } from '../../types/webchat-props';
 import { CoverComponentRegistry } from '../webchat-overlay';
 export interface WebchatAppProps extends Omit<WebchatStateProps, 'customMessages'> {
     /** Whether the webchat is open */
     isOpen: boolean;
-    /** Callback when webchat is closed */
+    /** Callback when the webchat is closed */
     onClose?: () => void;
     /** Callback when controller is ready - passes the controller instance */
     onControllerReady?: (controller: WebchatController) => void;
@@ -21,11 +23,16 @@ export interface WebchatAppProps extends Omit<WebchatStateProps, 'customMessages
      */
     showBranding?: boolean;
     /** Custom messages registry */
-    customMessages?: Record<string, React.ComponentType<any>>;
+    customMessages?: Record<string, ComponentType<any>>;
     /** Cover components registry */
     coverRegistry?: CoverComponentRegistry;
     /** Override default icons for the input action bar. */
     icons?: WebchatInputIcons;
+    /**
+     * Optional overrides for hero ↔ compact header behavior (merged with defaults).
+     * Same object can be passed inside `WebchatTrigger` → `webchatConfig.heroHeaderLayout`.
+     */
+    heroHeaderLayout?: Partial<WebchatHeroHeaderLayoutConfig>;
 }
 /**
  * WebchatApp - Complete webchat component for lazy loading
@@ -46,4 +53,4 @@ export interface WebchatAppProps extends Omit<WebchatStateProps, 'customMessages
  * />
  * ```
  */
-export declare function WebchatApp({ appId, isOpen, onClose, onControllerReady, title, placeholder, showBranding, customMessages, avatarConfig, coverRegistry, icons, ...restConfig }: WebchatAppProps): import("react/jsx-runtime").JSX.Element;
+export declare function WebchatApp({ appId, isOpen, onClose, onControllerReady, title, placeholder, showBranding, customMessages, avatarConfig, coverRegistry, icons, heroHeaderLayout, ...restConfig }: WebchatAppProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,7 @@ import { WebchatContainerProps } from '../../types/webchat-props';
 export declare function useWebchatContainer(props: Omit<WebchatContainerProps, 'children'>, state: WebchatState, ref: RefObject<HTMLDivElement>): {
     shouldRender: boolean;
     containerProps: {
+        style?: import('react').CSSProperties | undefined;
         ref: RefObject<HTMLDivElement>;
         role: string;
         'aria-label': string;

package/lib/components/webchat-header/icons/close-icon.d.ts

@@ -0,0 +1 @@
+export declare function CloseIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-header/icons/download-icon.d.ts

@@ -0,0 +1 @@
+export declare function DownloadIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-header/icons/leave-icon.d.ts

@@ -0,0 +1 @@
+export declare function LeaveIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-header/icons/menu-icon.d.ts

@@ -0,0 +1 @@
+export declare function MenuIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-header/icons/sounds-icon.d.ts

@@ -0,0 +1 @@
+export declare function SoundsIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-header/icons/start-over-icon.d.ts

@@ -0,0 +1 @@
+export declare function StartOverIcon(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,19 +1,28 @@
-import { RefObject } from 'react';
+import { CSSProperties, RefObject } from 'react';
 import { WebchatState } from '../../hooks/use-webchat-state';
 import { WebchatHeaderProps } from '../../types/webchat-props';
+type HeaderStyle = CSSProperties & Record<`--${string}`, string>;
 export declare function useWebchatHeader(props: WebchatHeaderProps, state: WebchatState, ref: RefObject<HTMLElement>): {
     headerProps: {
         ref: RefObject<HTMLElement>;
         'aria-label': string;
+        style: HeaderStyle;
+        'data-webchat-responsive-hero': string;
+        children?: import('react').ReactNode;
     };
     title: string;
+    avatarSrc: string | undefined;
+    avatarSvg: string | undefined;
+    avatarAlt: string | undefined;
     showStatus: boolean;
     statusText: string | undefined;
     showClose: boolean;
     onClose: () => void;
     connectionStatus: any;
     variants: {
-        variant: "default";
+        variant: "expanded" | "collapsed" | "default";
+        hasShadow: boolean;
         className: string | undefined;
     };
 };
+export {};

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

@@ -1,2 +1,5 @@
+import { AriaButtonProps } from 'react-aria';
 import { WebchatHeaderProps } from '../../types/webchat-props';
-export declare function WebchatHeader(props: WebchatHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare const MenuTriggerButton: import('react').ForwardRefExoticComponent<AriaButtonProps<"button"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare function CloseButton(props: AriaButtonProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function WebchatHeader({ children, ...propsWithoutSlots }: WebchatHeaderProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-header/webchat-menu/dropdown-menu-item-download-transcript.d.ts

@@ -0,0 +1,5 @@
+export interface DropdownMenuItemDownloadTranscriptProps {
+    onClose?: () => void;
+    children?: React.ReactNode;
+}
+export declare function DropdownMenuItemDownloadTranscript({ onClose, children, }: DropdownMenuItemDownloadTranscriptProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-header/webchat-menu/dropdown-menu-item-reset-conversation.d.ts

@@ -0,0 +1,5 @@
+export interface DropdownMenuItemResetConversationProps {
+    onClose?: () => void;
+    children?: React.ReactNode;
+}
+export declare function DropdownMenuItemResetConversation({ onClose, children, }: DropdownMenuItemResetConversationProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-header/webchat-menu/dropdown-menu-item-reset-session.d.ts

@@ -0,0 +1,5 @@
+export interface DropdownMenuItemResetSessionProps {
+    onClose?: () => void;
+    children?: React.ReactNode;
+}
+export declare function DropdownMenuItemResetSession({ onClose, children, }: DropdownMenuItemResetSessionProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-header/webchat-menu/dropdown-menu-item-sounds.d.ts

@@ -0,0 +1,5 @@
+export interface DropdownMenuItemSoundsProps {
+    onClose?: () => void;
+    children?: React.ReactNode;
+}
+export declare function DropdownMenuItemSounds({ onClose: _onClose, children, }: DropdownMenuItemSoundsProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-header/webchat-menu/use-dropdown-menu-item-reset-session.d.ts

@@ -0,0 +1,9 @@
+interface UseDropdownMenuItemResetSessionProps {
+    onClose?: () => void;
+}
+export declare function useDropdownMenuItemResetSession({ onClose, }: UseDropdownMenuItemResetSessionProps): {
+    menuItemProps: {
+        onPress: () => void;
+    };
+};
+export {};

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

@@ -0,0 +1,2 @@
+import { AttachmentListProps } from './use-attachment-preview';
+export declare function AttachmentPreview({ attachments, onRemove, }: AttachmentListProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/webchat-input/attachment-preview/index.d.ts

@@ -0,0 +1,3 @@
+export { AttachmentPreview } from './attachment-preview';
+export type { AttachmentListProps, PendingAttachment, } from './use-attachment-preview';
+export { useAttachmentPreview } from './use-attachment-preview';

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

@@ -0,0 +1,23 @@
+import { ChangeEvent } from 'react';
+export interface PendingAttachment {
+    id: string;
+    file: File;
+    previewUrl: string;
+    fileType: 'image' | 'video' | 'document';
+}
+export interface AttachmentListProps {
+    attachments: PendingAttachment[];
+    onRemove: (id: string) => void;
+}
+export declare function useAttachmentPreview(): {
+    attachments: PendingAttachment[];
+    hasAttachments: boolean;
+    attachmentError: string | undefined;
+    fileInputRef: import('react').RefObject<HTMLInputElement>;
+    handleFileInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleRemoveAttachment: (id: string) => void;
+    clearAttachments: () => void;
+    handleOpenFilePicker: () => void;
+    sendAttachments: () => void;
+    attachmentListProps: AttachmentListProps;
+};

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

@@ -0,0 +1,2 @@
+import { AudioInputOverlayProps } from './use-audio-input';
+export declare function AudioInput({ showControls, recordingControlsClassName, frozenIsRecording, frozenIsPreview, analyserNode, audioBlob, audioProgress, isPlaying, isPreview, handlePlayPause, handleSeekPreview, handleCancelRecording, timerDisplay, objectUrl, audioRef, handleAudioPlay, handleAudioPause, handleAudioEnded, handleAudioLoadedMetadata, handleAudioTimeUpdate, }: AudioInputOverlayProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export { AudioInput } from './audio-input';
+export type { AudioInputOverlayProps } from './use-audio-input';
+export { useAudioInput } from './use-audio-input';

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

@@ -0,0 +1,34 @@
+import { RefObject } from 'react';
+import { WebchatState } from '../../../hooks/use-webchat-state';
+export interface AudioInputOverlayProps {
+    showControls: boolean;
+    recordingControlsClassName: string;
+    frozenIsRecording: boolean;
+    frozenIsPreview: boolean;
+    analyserNode: AnalyserNode | undefined;
+    audioBlob: Blob | undefined;
+    audioProgress: number;
+    isPlaying: boolean;
+    isPreview: boolean;
+    handlePlayPause: () => void;
+    handleSeekPreview: (progress: number) => void;
+    handleCancelRecording: () => void;
+    timerDisplay: string;
+    objectUrl: string;
+    audioRef: RefObject<HTMLAudioElement>;
+    handleAudioPlay: () => void;
+    handleAudioPause: () => void;
+    handleAudioEnded: () => void;
+    handleAudioLoadedMetadata: (e: React.SyntheticEvent<HTMLAudioElement>) => void;
+    handleAudioTimeUpdate: (e: React.SyntheticEvent<HTMLAudioElement>) => void;
+}
+export declare function useAudioInput(state: WebchatState, disabled?: boolean): {
+    audioRecordingAvailable: boolean;
+    hideBaseContent: boolean;
+    isPreview: boolean;
+    isRecording: boolean;
+    handleMicrophoneClick: () => void;
+    handleConfirmRecording: () => void;
+    handleSendRecording: () => void;
+    overlayProps: AudioInputOverlayProps;
+};

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

@@ -0,0 +1,5 @@
+interface AudioWaveformProps {
+    analyserNode: AnalyserNode;
+}
+export declare function AudioWaveform({ analyserNode }: AudioWaveformProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/webchat-input/audio-waveform/index.d.ts

@@ -0,0 +1 @@
+export { AudioWaveform } from './audio-waveform';

package/lib/components/webchat-input/audio-waveform/static-waveform.d.ts

@@ -0,0 +1,9 @@
+interface StaticWaveformProps {
+    audioBlob: Blob;
+    /** Playback progress 0–1; bars before this point render at full opacity */
+    progress: number;
+    /** Called with a 0–1 seek position when the user clicks or drags the waveform */
+    onSeek?: (progress: number) => void;
+}
+export declare function StaticWaveform({ audioBlob, progress, onSeek, }: StaticWaveformProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+export declare const MAX_ATTACHMENT_SIZE_BYTES: number;
+export declare const ACCEPTED_DOCUMENT_EXTENSION_SET: Set<string>;
+export declare const ATTACHMENT_ACCEPT_STRING: string;

package/lib/components/webchat-input/icons/cancel-icon.d.ts

@@ -0,0 +1 @@
+export declare function CancelIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-input/icons/close-icon.d.ts

@@ -0,0 +1 @@
+export declare function CloseIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-input/icons/confirm-icon.d.ts

@@ -0,0 +1 @@
+export declare function ConfirmIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-input/icons/file-icon.d.ts

@@ -0,0 +1,2 @@
+/** Generic file / document icon */
+export declare function FileIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-input/icons/file-pdf-icon.d.ts

@@ -0,0 +1,2 @@
+/** PDF file icon */
+export declare function FilePdfIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-input/icons/pause-icon.d.ts

@@ -0,0 +1 @@
+export declare function PauseIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-input/icons/play-icon.d.ts

@@ -0,0 +1 @@
+export declare function PlayIcon(): import("react/jsx-runtime").JSX.Element;

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

@@ -7,32 +7,43 @@ export declare function useWebchatInput(props: WebchatInputProps, state: Webchat
         'aria-label': string;
         'data-webchat-input': string;
         icons?: import('../../..').WebchatInputIcons;
+        style?: import('react').CSSProperties;
     };
     inputValue: string;
     hasText: boolean;
     handleSubmit: (e: React.FormEvent) => void;
-    handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    handleKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onEmojiClick: (() => void) | undefined;
-    onAttachmentClick: (() => void) | undefined;
-    onMicrophoneClick: (() => void) | undefined;
+    onAttachmentClick: () => void;
+    hasAttachments: boolean;
+    attachmentError: string | undefined;
+    fileInputRef: RefObject<HTMLInputElement>;
+    handleFileInputChange: (e: import('react').ChangeEvent<HTMLInputElement>) => void;
+    attachmentListProps: import('./attachment-preview').AttachmentListProps;
     fieldProps: {
         value: string;
         onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
         onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
         placeholder: string;
-        disabled: boolean | undefined;
-        rows: number;
-    };
-    primaryActionProps: {
-        type: "submit" | "button";
         disabled: boolean;
-        'aria-label': string;
+        rows: 1;
     };
     variants: {
         variant: "default";
         className: string | undefined;
     };
+    isInputEnabled: boolean;
     isInputDisabled: boolean | undefined;
+    inputBehavior: import('../../hooks/webchat-client-settings-behaviors').WebchatInputBehavior;
     showBranding: boolean;
+    overlayProps: import('./audio-input').AudioInputOverlayProps;
+    hideBaseContent: boolean;
+    audioRecordingAvailable: boolean;
+    primaryBgClass: string;
+    primaryType: "button" | "submit";
+    isPrimaryDisabled: boolean;
+    primaryHandler: (() => void) | undefined;
+    primaryLabel: string;
+    showMic: boolean;
+    showConfirm: boolean;
+    showSend: boolean;
 };

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

@@ -1,2 +1,7 @@
 import { WebchatInputProps } from '../../types/webchat-props';
-export declare function WebchatInput(props: WebchatInputProps): import("react/jsx-runtime").JSX.Element;
+declare module 'react' {
+    interface HTMLAttributes<T> {
+        inert?: '' | undefined;
+    }
+}
+export declare function WebchatInput(props: WebchatInputProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/webchat-messages/use-webchat-messages-list-scroll.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+export interface UseWebchatMessagesListScrollParams {
+    scrollRef: RefObject<HTMLDivElement | null>;
+    hasUserInteracted: boolean;
+    messageActorsLength: number;
+    isTyping: boolean;
+    onScrollDepthChange?: (hasDepth: boolean) => void;
+    onMessagesScrollAtTopChange?: (isAtTop: boolean) => void;
+}
+/**
+ * Scroll depth (header shadow), hero “at top” sync, and auto-scroll-to-bottom when the thread grows.
+ */
+export declare function useWebchatMessagesListScroll({ scrollRef, hasUserInteracted, messageActorsLength, isTyping, onScrollDepthChange, onMessagesScrollAtTopChange, }: UseWebchatMessagesListScrollParams): {
+    handleScrollState: () => void;
+};

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

@@ -8,15 +8,23 @@ export declare function useWebchatMessages(props: WebchatMessagesProps, state: W
         'aria-live': "polite";
         'data-webchat-messages': string;
         enableScrollToBottom?: boolean;
+        style?: import('react').CSSProperties;
     };
     messageListProps: {
         messageActors: import('xstate').ActorRef<import('xstate').MachineSnapshot<{
             message: import('@botonic/shared').WebchatMessage;
             user: import('@botonic/shared').HubtypeUser;
             status: import('@botonic/webchat-core').WebchatMessageStatus;
+            file?: File;
             postMessageActor?: any;
         }, {
             type: "RETRY";
+        } | {
+            type: "UPDATE_MESSAGE_INFO";
+            message: {
+                id: string;
+                data: Record<string, string>;
+            };
         } | {
             type: "BUTTON_CLICKED";
             button: import('@botonic/shared').BotonicButtonContent;
@@ -32,6 +40,12 @@ export declare function useWebchatMessages(props: WebchatMessagesProps, state: W
             };
         }>, {
             type: "RETRY";
+        } | {
+            type: "UPDATE_MESSAGE_INFO";
+            message: {
+                id: string;
+                data: Record<string, string>;
+            };
         } | {
             type: "BUTTON_CLICKED";
             button: import('@botonic/shared').BotonicButtonContent;
@@ -43,9 +57,13 @@ export declare function useWebchatMessages(props: WebchatMessagesProps, state: W
             title: string;
         }>[];
         isTyping: any;
+        hasUserInteracted: boolean;
         customMessageRenderer: undefined;
         botAvatarConfig: import('../message-machine-renderer').AvatarConfigResult | null;
         agentAvatarConfig: import('../message-machine-renderer').AvatarConfigResult | null;
+        onScrollDepthChange: ((hasDepth: boolean) => void) | undefined;
+        onMessagesScrollAtTopChange: ((isAtTop: boolean) => void) | undefined;
+        onUserInteraction: (() => void) | undefined;
     };
     variants: {
         variant: "default";

package/lib/components/webchat-provider/webchat-context.d.ts

@@ -0,0 +1,8 @@
+import { WebchatController } from '@botonic/webchat-core';
+import { WebchatState } from '../../hooks/use-webchat-state';
+export interface WebchatContextValue {
+    state: WebchatState;
+    controller: WebchatController;
+}
+export declare const WebchatContext: import('react').Context<WebchatContextValue | null>;
+export declare function useWebchatContext(): WebchatContextValue;

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

@@ -1,10 +1,6 @@
 import { WebchatController } from '@botonic/webchat-core';
 import { default as React } from 'react';
-import { WebchatState, WebchatStateProps } from '../../hooks/use-webchat-state';
-interface WebchatContextValue {
-    state: WebchatState;
-    controller: WebchatController;
-}
+import { WebchatStateProps } from '../../hooks/use-webchat-state';
 export interface WebchatProviderProps extends WebchatStateProps {
     children: React.ReactNode;
 }
@@ -15,8 +11,3 @@ export interface WebchatProviderProps extends WebchatStateProps {
  * It provides better state management, persistence, and error handling.
  */
 export declare const WebchatProvider: React.ForwardRefExoticComponent<WebchatProviderProps & React.RefAttributes<WebchatController>>;
-/**
- * Hook to access webchat context
- */
-export declare function useWebchatContext(): WebchatContextValue;
-export {};

package/lib/components/webchat-trigger/icons/chat-icon.d.ts

@@ -0,0 +1 @@
+export declare function ChatIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/components/webchat-trigger/icons/chevron-down-icon.d.ts

@@ -0,0 +1 @@
+export declare function ChevronDownIcon(): import("react/jsx-runtime").JSX.Element;

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

@@ -34,5 +34,15 @@ export interface WebchatTriggerHookReturn {
     handleLoadError: (error: Error) => void;
     /** Increments on retry; use as key for Error Boundary so it resets */
     retryKey: number;
+    /** True when new bot messages arrived while the chat was closed */
+    hasNewMessages: boolean;
+    /** True when the proactive pop-up should be visible */
+    isPopupVisible: boolean;
+    /** True while the pop-up is fading out */
+    isPopupDismissing: boolean;
+    /** The proactive message text (forwarded from props for render layer) */
+    proactiveMessage: string | undefined;
+    /** Call on animationend of the popup element to complete dismissal */
+    onPopupAnimationEnd: () => void;
 }
 export declare function useWebchatTrigger(props: WebchatTriggerProps, ref: RefObject<HTMLButtonElement>): WebchatTriggerHookReturn;

package/lib/contexts/media-playback-context.d.ts

@@ -0,0 +1,11 @@
+interface MediaPlaybackContextValue {
+    activeId: string | undefined;
+    setActive: (id: string) => void;
+    clearActive: (id: string) => void;
+    pauseAll: () => void;
+}
+export declare function MediaPlaybackProvider({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useMediaPlayback(): MediaPlaybackContextValue;
+export {};

package/lib/hero-header-layout/index.d.ts

@@ -0,0 +1,3 @@
+export { useWebchatHeroHeaderLayout, type UseWebchatHeroHeaderLayoutParams, type WebchatHeroHeaderLayoutResult, } from './use-webchat-hero-header-layout';
+export { DEFAULT_WEBCHAT_HERO_HEADER_LAYOUT_CONFIG, mergeWebchatHeroHeaderLayoutConfig, type WebchatHeroHeaderLayoutConfig, } from './webchat-hero-header-layout-config';
+export { getMessageActorCount } from './webchat-hero-header-layout-utils';

package/lib/hero-header-layout/use-webchat-hero-header-layout.d.ts

@@ -0,0 +1,40 @@
+import { WebchatController } from '@botonic/webchat-core';
+import { WebchatHeroHeaderLayoutConfig } from './webchat-hero-header-layout-config';
+export interface UseWebchatHeroHeaderLayoutParams {
+    controller: WebchatController;
+    isOpen: boolean;
+    /** Partial overrides; merged with {@link DEFAULT_WEBCHAT_HERO_HEADER_LAYOUT_CONFIG}. */
+    layout?: Partial<WebchatHeroHeaderLayoutConfig>;
+    /**
+     * Mirrors `WebchatConfig.enableResponsiveHeroHeader`. When false, the responsive hero
+     * and related scroll/engagement syncing are skipped (fixed compact header).
+     */
+    enableResponsiveHeroHeader?: boolean;
+}
+export interface WebchatHeroHeaderLayoutResult {
+    /** Pass to {@link WebchatHeader}: `variant`, `collapseProgress`, `hasShadow`. */
+    header: {
+        variant: 'expanded' | 'collapsed';
+        collapseProgress: 0 | 1;
+        hasShadow: boolean;
+    };
+    /**
+     * Spread onto {@link WebchatMessages}: scroll / interaction wiring for header sync.
+     */
+    messages: {
+        hasUserInteracted: boolean;
+        onScrollDepthChange: (hasDepth: boolean) => void;
+        onMessagesScrollAtTopChange: (isAtTop: boolean) => void;
+        onUserInteraction: () => void;
+    };
+    /**
+     * Single callback for “user engaged” surfaces (composer send, quick replies, etc.).
+     * Wire to {@link WebchatInput} `onUserMessageSent` and any other engagement hooks you add.
+     */
+    onUserEngagement: () => void;
+}
+/**
+ * Encapsulates hero ↔ compact header state for the default app: conversation length, panel open,
+ * scroll-at-top, and user engagement. Tune via {@link WebchatHeroHeaderLayoutConfig} or CSS tokens.
+ */
+export declare function useWebchatHeroHeaderLayout({ controller, isOpen, layout: layoutPartial, enableResponsiveHeroHeader, }: UseWebchatHeroHeaderLayoutParams): WebchatHeroHeaderLayoutResult;

package/lib/hero-header-layout/webchat-hero-header-layout-config.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Controls hero vs compact header behavior for the default bundled webchat layout (`WebchatApp`).
+ * Pass via the `heroHeaderLayout` prop or `WebchatTrigger` → `webchatConfig.heroHeaderLayout`.
+ *
+ * Turn off the responsive hero header via `WebchatConfig.enableResponsiveHeroHeader` / `webchatConfig.enableResponsiveHeroHeader`.
+ *
+ * Transition speed / easing use CSS tokens (e.g. `--webchat-header-collapse-duration` in `webchat-tokens.css`).
+ */
+export interface WebchatHeroHeaderLayoutConfig {
+    /**
+     * When true (default), a thread that already has messages uses the compact header on load
+     * (persisted history, reopen after lazy load, first batch after restore).
+     */
+    collapsedByDefaultWhenConversationHasMessages: boolean;
+    /**
+     * When true (default), collapse the hero after the user engages (composer send, message actions, etc.).
+     */
+    collapseOnUserEngagement: boolean;
+    /**
+     * When true (default), scrolling back to the top of the message list restores the expanded hero,
+     * after the list has left the top at least once (avoids collapse→expand flicker on first tap).
+     */
+    expandHeroWhenReturningToScrollTop: boolean;
+}
+export declare const DEFAULT_WEBCHAT_HERO_HEADER_LAYOUT_CONFIG: WebchatHeroHeaderLayoutConfig;
+export declare function mergeWebchatHeroHeaderLayoutConfig(partial?: Partial<WebchatHeroHeaderLayoutConfig>): WebchatHeroHeaderLayoutConfig;

package/lib/hero-header-layout/webchat-hero-header-layout-utils.d.ts

@@ -0,0 +1,2 @@
+import { WebchatController } from '@botonic/webchat-core';
+export declare function getMessageActorCount(snapshot: ReturnType<WebchatController['machine']['getSnapshot']>): number;

package/lib/hooks/use-audio-recorder.d.ts

@@ -0,0 +1,20 @@
+export type AudioRecorderState = 'idle' | 'recording' | 'preview';
+export interface UseAudioRecorderResult {
+    /** Current state in the recording flow */
+    recorderState: AudioRecorderState;
+    /** The recorded audio blob — available in preview state */
+    audioBlob: Blob | undefined;
+    /** AnalyserNode for waveform visualisation — available while recording */
+    analyserNode: AnalyserNode | undefined;
+    /** Whether the browser supports getUserMedia + MediaRecorder */
+    isSupported: boolean;
+    /** Set when getUserMedia throws NotAllowedError */
+    permissionError: boolean;
+    /** Start recording — transitions idle → recording */
+    startRecording: () => Promise<void>;
+    /** Stop and keep the recording — transitions recording → preview */
+    confirmRecording: () => void;
+    /** Discard current recording — transitions recording|preview → idle */
+    cancelRecording: () => void;
+}
+export declare function useAudioRecorder(): UseAudioRecorderResult;

package/lib/hooks/use-webchat-state.d.ts

@@ -1,6 +1,8 @@
+import { WebchatClientSettings } from '@botonic/shared';
 import { OverlayState, WebchatConfig, WebchatController, WebchatMessageMachine } from '@botonic/webchat-core';
 import { ActorRefFrom } from 'xstate';
 import { AvatarConfig } from '../components/message-machine-renderer/use-avatar';
+import { WebchatClientSettingsBehaviors } from './webchat-client-settings-behaviors';
 export type WebchatStateProps = WebchatConfig & {
     avatarConfig?: AvatarConfig;
     customMessages: any;
@@ -14,8 +16,13 @@ export interface WebchatState {
     initializationError: boolean;
     messageActors: ActorRefFrom<typeof WebchatMessageMachine>[];
     connectionStatus: string;
+    webchatClientSettings: WebchatClientSettings;
+    webchatClientSettingsBehaviors: WebchatClientSettingsBehaviors;
     overlayState: OverlayState | null;
+    soundsEnabled: boolean;
     avatarConfig?: AvatarConfig;
+    /** Mirrors `WebchatConfig.enableResponsiveHeroHeader`; default true. */
+    enableResponsiveHeroHeader: boolean;
     customMessages: any;
 }
 export declare function useWebchatState(stateProps: WebchatStateProps): WebchatState;

package/lib/hooks/webchat-client-settings-behaviors.d.ts

@@ -0,0 +1,13 @@
+import { WebchatClientSettings } from '@botonic/shared';
+export interface WebchatInputBehavior {
+    isComposerVisible: boolean;
+    isTextInputEnabled: boolean;
+    areAttachmentsVisible: boolean;
+    isEmojiPickerVisible: boolean;
+    isAudioRecordingVisible: boolean;
+    blockInputs: WebchatClientSettings['block_inputs'];
+}
+export interface WebchatClientSettingsBehaviors {
+    input: WebchatInputBehavior;
+}
+export declare function createWebchatClientSettingsBehaviors(settings: WebchatClientSettings): WebchatClientSettingsBehaviors;