@enjoys/react-chatbot-plugin 1.0.0 → 1.2.0

package/dist/index.d.ts

@@ -1,10 +1,48 @@
+import { ComponentType } from 'react';
 import { Context } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { Property } from 'csstype';
 import { ReactNode } from 'react';
 
-declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle): {
+/** Context object passed to async action handlers */
+export declare interface ActionContext {
+    /** Update the loading/status message text in real-time */
+    updateMessage: (text: string) => void;
+}
+
+/**
+ * Analytics Plugin — tracks message counts, form completions, drop-offs
+ */
+export declare function analyticsPlugin(options?: {
+    onTrack?: (event: string, data?: unknown) => void;
+}): ChatPlugin;
+
+export declare const AttachmentIcon: default_2.FC<IconProps>;
+
+export declare const Branding: default_2.FC<BrandingProps>;
+
+export declare interface BrandingConfig {
+    /** Company/product name shown in footer */
+    poweredBy?: string;
+    /** URL when clicking branding */
+    poweredByUrl?: string;
+    /** Logo URL for header or welcome screen */
+    logo?: string;
+    /** Logo width */
+    logoWidth?: string;
+    /** Show "Powered by" branding footer */
+    showBranding?: boolean;
+}
+
+declare interface BrandingProps {
+    config: BrandingConfig;
+    primaryColor: string;
+}
+
+export declare function buildCSSVariables(theme: Required<ChatTheme>): Record<string, string>;
+
+export declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle): {
     root: {
         fontFamily: string;
         fontSize: string;
@@ -38,7 +76,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         backgroundAttachment?: Property.BackgroundAttachment | undefined;
         backgroundBlendMode?: Property.BackgroundBlendMode | undefined;
         backgroundClip?: Property.BackgroundClip | undefined;
-        backgroundColor: string;
+        backgroundColor?: Property.BackgroundColor | undefined;
         backgroundImage?: Property.BackgroundImage | undefined;
         backgroundOrigin?: Property.BackgroundOrigin | undefined;
         backgroundPositionX?: Property.BackgroundPositionX<string | number> | undefined;
@@ -88,7 +126,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         borderTopWidth?: Property.BorderTopWidth<string | number> | undefined;
         bottom?: Property.Bottom<string | number> | undefined;
         boxDecorationBreak?: Property.BoxDecorationBreak | undefined;
-        boxShadow: "0 4px 12px rgba(0,0,0,0.15)" | Property.BoxShadow;
+        boxShadow: "0 6px 24px rgba(108, 92, 231, 0.4), 0 2px 8px rgba(0,0,0,0.1)" | Property.BoxShadow;
         boxSizing?: Property.BoxSizing | undefined;
         breakAfter?: Property.BreakAfter | undefined;
         breakBefore?: Property.BreakBefore | undefined;
@@ -435,7 +473,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         all?: Property.All | undefined;
         animation?: Property.Animation<string & {}> | undefined;
         animationRange?: Property.AnimationRange<string | number> | undefined;
-        background?: Property.Background<string | number> | undefined;
+        background: Property.Background<string | number>;
         backgroundPosition?: Property.BackgroundPosition<string | number> | undefined;
         border: Property.Border<string | number>;
         borderBlock?: Property.BorderBlock<string | number> | undefined;
@@ -506,7 +544,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         textDecoration?: Property.TextDecoration<string | number> | undefined;
         textEmphasis?: Property.TextEmphasis | undefined;
         textWrap?: Property.TextWrap | undefined;
-        transition: "transform 0.2s ease" | Property.Transition<string & {}>;
+        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)" | Property.Transition<string & {}>;
         viewTimeline?: Property.ViewTimeline | undefined;
         MozAnimationDelay?: Property.AnimationDelay<string & {}> | undefined;
         MozAnimationDirection?: Property.AnimationDirection | undefined;
@@ -892,12 +930,12 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         animationTimingFunction?: Property.AnimationTimingFunction | undefined;
         appearance?: Property.Appearance | undefined;
         aspectRatio?: Property.AspectRatio | undefined;
-        backdropFilter?: Property.BackdropFilter | undefined;
+        backdropFilter: Property.BackdropFilter | "blur(20px)";
         backfaceVisibility?: Property.BackfaceVisibility | undefined;
         backgroundAttachment?: Property.BackgroundAttachment | undefined;
         backgroundBlendMode?: Property.BackgroundBlendMode | undefined;
         backgroundClip?: Property.BackgroundClip | undefined;
-        backgroundColor: "#FFFFFF" | Property.BackgroundColor;
+        backgroundColor: "rgba(22, 22, 40, 0.95)" | Property.BackgroundColor | "rgba(255, 255, 255, 0.95)";
         backgroundImage?: Property.BackgroundImage | undefined;
         backgroundOrigin?: Property.BackgroundOrigin | undefined;
         backgroundPositionX?: Property.BackgroundPositionX<string | number> | undefined;
@@ -947,7 +985,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         borderTopWidth?: Property.BorderTopWidth<string | number> | undefined;
         bottom?: Property.Bottom<string | number> | undefined;
         boxDecorationBreak?: Property.BoxDecorationBreak | undefined;
-        boxShadow: Property.BoxShadow | "0 8px 32px rgba(0,0,0,0.15)";
+        boxShadow: Property.BoxShadow | "0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05)" | "0 20px 60px rgba(108, 92, 231, 0.15), 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04)";
         boxSizing?: Property.BoxSizing | undefined;
         breakAfter?: Property.BreakAfter | undefined;
         breakBefore?: Property.BreakBefore | undefined;
@@ -1292,11 +1330,11 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         zIndex: number | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto";
         zoom?: Property.Zoom | undefined;
         all?: Property.All | undefined;
-        animation?: Property.Animation<string & {}> | undefined;
+        animation: Property.Animation<string & {}> | "cb-window-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1)";
         animationRange?: Property.AnimationRange<string | number> | undefined;
         background?: Property.Background<string | number> | undefined;
         backgroundPosition?: Property.BackgroundPosition<string | number> | undefined;
-        border?: Property.Border<string | number> | undefined;
+        border: Property.Border<string | number>;
         borderBlock?: Property.BorderBlock<string | number> | undefined;
         borderBlockColor?: Property.BorderBlockColor | undefined;
         borderBlockEnd?: Property.BorderBlockEnd<string | number> | undefined;
@@ -1492,7 +1530,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         WebkitAnimationPlayState?: Property.AnimationPlayState | undefined;
         WebkitAnimationTimingFunction?: Property.AnimationTimingFunction | undefined;
         WebkitAppearance?: Property.WebkitAppearance | undefined;
-        WebkitBackdropFilter?: Property.BackdropFilter | undefined;
+        WebkitBackdropFilter: Property.BackdropFilter | "blur(20px)";
         WebkitBackfaceVisibility?: Property.BackfaceVisibility | undefined;
         WebkitBackgroundClip?: Property.BackgroundClip | undefined;
         WebkitBackgroundOrigin?: Property.BackgroundOrigin | undefined;
@@ -1756,7 +1794,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         backgroundAttachment?: Property.BackgroundAttachment | undefined;
         backgroundBlendMode?: Property.BackgroundBlendMode | undefined;
         backgroundClip?: Property.BackgroundClip | undefined;
-        backgroundColor: string;
+        backgroundColor?: Property.BackgroundColor | undefined;
         backgroundImage?: Property.BackgroundImage | undefined;
         backgroundOrigin?: Property.BackgroundOrigin | undefined;
         backgroundPositionX?: Property.BackgroundPositionX<string | number> | undefined;
@@ -2016,7 +2054,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         perspective?: Property.Perspective<string | number> | undefined;
         perspectiveOrigin?: Property.PerspectiveOrigin<string | number> | undefined;
         pointerEvents?: Property.PointerEvents | undefined;
-        position?: Property.Position | undefined;
+        position: Property.Position;
         positionAnchor?: Property.PositionAnchor | undefined;
         positionArea?: Property.PositionArea | undefined;
         positionTryFallbacks?: Property.PositionTryFallbacks | undefined;
@@ -2153,7 +2191,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         all?: Property.All | undefined;
         animation?: Property.Animation<string & {}> | undefined;
         animationRange?: Property.AnimationRange<string | number> | undefined;
-        background?: Property.Background<string | number> | undefined;
+        background: Property.Background<string | number>;
         backgroundPosition?: Property.BackgroundPosition<string | number> | undefined;
         border?: Property.Border<string | number> | undefined;
         borderBlock?: Property.BorderBlock<string | number> | undefined;
@@ -2204,7 +2242,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         motion?: Property.Offset<string | number> | undefined;
         offset?: Property.Offset<string | number> | undefined;
         outline?: Property.Outline<string | number> | undefined;
-        overflow?: Property.Overflow | undefined;
+        overflow: Property.Overflow;
         overscrollBehavior?: Property.OverscrollBehavior | undefined;
         padding: Property.Padding<string | number>;
         paddingBlock?: Property.PaddingBlock<string | number> | undefined;
@@ -3012,7 +3050,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         all?: Property.All | undefined;
         animation?: Property.Animation<string & {}> | undefined;
         animationRange?: Property.AnimationRange<string | number> | undefined;
-        background?: Property.Background<string | number> | undefined;
+        background: Property.Background<string | number>;
         backgroundPosition?: Property.BackgroundPosition<string | number> | undefined;
         border?: Property.Border<string | number> | undefined;
         borderBlock?: Property.BorderBlock<string | number> | undefined;
@@ -3449,7 +3487,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
     inputArea: {
         accentColor?: Property.AccentColor | undefined;
         alignContent?: Property.AlignContent | undefined;
-        alignItems: Property.AlignItems;
+        alignItems?: Property.AlignItems | undefined;
         alignSelf?: Property.AlignSelf | undefined;
         alignTracks?: Property.AlignTracks | undefined;
         alignmentBaseline?: Property.AlignmentBaseline | undefined;
@@ -3469,12 +3507,12 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         animationTimingFunction?: Property.AnimationTimingFunction | undefined;
         appearance?: Property.Appearance | undefined;
         aspectRatio?: Property.AspectRatio | undefined;
-        backdropFilter?: Property.BackdropFilter | undefined;
+        backdropFilter: Property.BackdropFilter | "blur(12px)";
         backfaceVisibility?: Property.BackfaceVisibility | undefined;
         backgroundAttachment?: Property.BackgroundAttachment | undefined;
         backgroundBlendMode?: Property.BackgroundBlendMode | undefined;
         backgroundClip?: Property.BackgroundClip | undefined;
-        backgroundColor?: Property.BackgroundColor | undefined;
+        backgroundColor: Property.BackgroundColor | "rgba(255, 255, 255, 0.95)" | "rgba(20, 20, 38, 0.9)";
         backgroundImage?: Property.BackgroundImage | undefined;
         backgroundOrigin?: Property.BackgroundOrigin | undefined;
         backgroundPositionX?: Property.BackgroundPositionX<string | number> | undefined;
@@ -3564,7 +3602,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         cy?: Property.Cy<string | number> | undefined;
         d?: Property.D | undefined;
         direction?: Property.Direction | undefined;
-        display: Property.Display;
+        display?: Property.Display | undefined;
         dominantBaseline?: Property.DominantBaseline | undefined;
         emptyCells?: Property.EmptyCells | undefined;
         fieldSizing?: Property.FieldSizing | undefined;
@@ -3903,7 +3941,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         flex?: Property.Flex<string | number> | undefined;
         flexFlow?: Property.FlexFlow | undefined;
         font?: Property.Font | undefined;
-        gap: Property.Gap<string | number>;
+        gap?: Property.Gap<string | number> | undefined;
         grid?: Property.Grid | undefined;
         gridArea?: Property.GridArea | undefined;
         gridColumn?: Property.GridColumn | undefined;
@@ -4069,7 +4107,7 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         WebkitAnimationPlayState?: Property.AnimationPlayState | undefined;
         WebkitAnimationTimingFunction?: Property.AnimationTimingFunction | undefined;
         WebkitAppearance?: Property.WebkitAppearance | undefined;
-        WebkitBackdropFilter?: Property.BackdropFilter | undefined;
+        WebkitBackdropFilter: Property.BackdropFilter | "blur(12px)";
         WebkitBackfaceVisibility?: Property.BackfaceVisibility | undefined;
         WebkitBackgroundClip?: Property.BackgroundClip | undefined;
         WebkitBackgroundOrigin?: Property.BackgroundOrigin | undefined;
@@ -4306,17 +4344,24 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         glyphOrientationVertical?: Property.GlyphOrientationVertical | undefined;
     };
     botBubble: {
-        backgroundColor: string;
-        color: string;
+        background: string;
+        color: "#2D3436" | "#E8E8F0";
         padding: string;
         borderRadius: string;
         maxWidth: string;
         alignSelf: "flex-start";
         wordBreak: "break-word";
         whiteSpace: "pre-wrap";
+        backdropFilter: "blur(8px)";
+        WebkitBackdropFilter: "blur(8px)";
+        border: string;
+        boxShadow: "0 2px 8px rgba(0,0,0,0.2)" | "0 2px 8px rgba(0,0,0,0.04)";
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
     };
     userBubble: {
-        backgroundColor: string;
+        background: string;
         color: string;
         padding: string;
         borderRadius: string;
@@ -4324,6 +4369,10 @@ declare function buildStyles(theme: Required<ChatTheme>, overrides?: ChatStyle):
         alignSelf: "flex-end";
         wordBreak: "break-word";
         whiteSpace: "pre-wrap";
+        boxShadow: "0 4px 14px rgba(108, 92, 231, 0.25)";
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
     };
 };
 
@@ -4354,45 +4403,53 @@ declare type ChatAction = {
     payload: boolean;
 } | {
     type: 'CLEAR_QUICK_REPLIES';
+} | {
+    type: 'RESET_CHAT';
+} | {
+    type: 'UPDATE_MESSAGE';
+    payload: {
+        id: string;
+        updates: Partial<ChatMessage>;
+    };
 };
 
 export declare const ChatBot: default_2.FC<ChatBotProps>;
 
 export declare interface ChatBotProps {
-    /** Theme colors and sizing */
     theme?: ChatTheme;
-    /** CSS overrides per section */
     style?: ChatStyle;
-    /** Header configuration */
     header?: HeaderConfig;
-    /** Custom welcome screen — pass JSX or a React component */
+    branding?: BrandingConfig;
     welcomeScreen?: ReactNode;
-    /** JSON-based conversation flow */
     flow?: FlowConfig;
-    /** Custom login form shown before chat */
     loginForm?: FormConfig;
-    /** All event callbacks */
     callbacks?: ChatCallbacks;
-    /** Initial messages to displays */
+    plugins?: ChatPlugin[];
     initialMessages?: ChatMessage[];
-    /** Placeholder text for input */
     inputPlaceholder?: string;
-    /** Position of the launcher */
     position?: 'bottom-right' | 'bottom-left';
-    /** Whether to show the launcher bubble */
     showLauncher?: boolean;
-    /** Custom launcher icon */
     launcherIcon?: ReactNode;
-    /** Custom close icon */
     closeIcon?: ReactNode;
-    /** Open by default */
     defaultOpen?: boolean;
-    /** Custom CSS class for the root element  */
     className?: string;
-    /** z-index */
     zIndex?: number;
+    /** Enable emoji picker */
+    enableEmoji?: boolean;
+    /** File upload configuration */
+    fileUpload?: FileUploadConfig;
+    /** Custom header component — receives ChatRenderContext as props */
+    renderHeader?: (ctx: ChatRenderContext, defaultHeader: ReactNode) => ReactNode;
+    /** Custom input component — receives ChatRenderContext as props */
+    renderInput?: (ctx: ChatRenderContext, defaultInput: ReactNode) => ReactNode;
+    /** Map of custom components that can be rendered in flow steps (key = step.component) */
+    components?: Record<string, ComponentType<StepComponentProps>>;
+    /** Map of async action handlers (key = step.asyncAction.handler) */
+    actionHandlers?: Record<string, (data: Record<string, unknown>, ctx: ActionContext) => Promise<FlowActionResult>>;
 }
 
+export declare const ChatBubbleIcon: default_2.FC<IconProps>;
+
 export declare interface ChatCallbacks {
     onOpen?: () => void;
     onClose?: () => void;
@@ -4402,9 +4459,10 @@ export declare interface ChatCallbacks {
     onLogin?: (data: Record<string, unknown>) => void | Promise<void>;
     onFormSubmit?: (formId: string, data: Record<string, unknown>) => void | Promise<void>;
     onQuickReply?: (value: string, label: string) => void;
-    onFileUpload?: (files: FileList) => void | Promise<void>;
+    onFileUpload?: (files: File[]) => void | Promise<void>;
     onFlowEnd?: (collectedData: Record<string, unknown>) => void;
     onError?: (error: Error) => void;
+    onEvent?: (event: string, payload?: unknown) => void;
 }
 
 export declare const ChatContext: Context<ChatContextValue | null>;
@@ -4421,16 +4479,23 @@ declare interface ChatHeaderProps {
     config: HeaderConfig;
     styles: ChatStyles;
     onClose: () => void;
+    onRestart?: () => void;
+    logo?: string;
+    logoWidth?: string;
 }
 
 export declare const ChatInput: default_2.FC<ChatInputProps>;
 
 declare interface ChatInputProps {
-    onSend: (text: string) => void;
+    onSend: (text: string, files?: File[]) => void;
     placeholder?: string;
     primaryColor: string;
+    isDark?: boolean;
     disabled?: boolean;
     styleOverride?: CSSProperties;
+    enableEmoji?: boolean;
+    fileUpload?: FileUploadConfig;
+    onFileUpload?: (files: File[]) => void;
 }
 
 export declare interface ChatMessage {
@@ -4441,11 +4506,48 @@ export declare interface ChatMessage {
     quickReplies?: FlowQuickReply[];
     form?: FormConfig;
     formData?: Record<string, unknown>;
-    attachment?: {
-        name: string;
-        url: string;
-        type: string;
-    };
+    attachments?: MessageAttachment[];
+    metadata?: Record<string, unknown>;
+    /** Key into components map — renders a custom component for this message */
+    component?: string;
+}
+
+export declare interface ChatPlugin {
+    /** Unique plugin name */
+    name: string;
+    /** Called when chatbot initializes */
+    onInit?: (ctx: PluginContext) => void | Promise<void>;
+    /** Called when a message is sent or received */
+    onMessage?: (message: ChatMessage, ctx: PluginContext) => void | ChatMessage | Promise<void | ChatMessage>;
+    /** Called when form or data is submitted */
+    onSubmit?: (data: Record<string, unknown>, ctx: PluginContext) => void | Promise<void>;
+    /** Called before chatbot unmounts */
+    onDestroy?: (ctx: PluginContext) => void | Promise<void>;
+    /** Called on any event */
+    onEvent?: (event: ChatPluginEvent, ctx: PluginContext) => void;
+}
+
+export declare interface ChatPluginEvent {
+    type: string;
+    payload?: unknown;
+    timestamp: number;
+}
+
+export declare interface ChatRenderContext {
+    /** Current step ID in the flow (null if no active step) */
+    currentStepId: string | null;
+    /** Whether the chat is open */
+    isOpen: boolean;
+    /** All current messages */
+    messages: ChatMessage[];
+    /** Collected form/flow data */
+    collectedData: Record<string, unknown>;
+    /** Toggle/close the chat window */
+    toggleChat: () => void;
+    /** Restart the conversation */
+    restartSession: () => void;
+    /** Send a message programmatically */
+    sendMessage: (text: string) => void;
 }
 
 declare interface ChatState {
@@ -4481,6 +4583,7 @@ export declare interface ChatTheme {
     borderRadius?: string;
     windowWidth?: string;
     windowHeight?: string;
+    mode?: 'light' | 'dark';
 }
 
 export declare const ChatWindow: default_2.FC<ChatWindowProps>;
@@ -4489,6 +4592,7 @@ declare interface ChatWindowProps {
     styles: ChatStyles;
     position: 'bottom-right' | 'bottom-left';
     zIndex?: number;
+    hidden?: boolean;
 }
 
 export declare const CheckboxField: default_2.FC<CheckboxFieldProps>;
@@ -4500,6 +4604,8 @@ declare interface CheckboxFieldProps {
     error?: string;
 }
 
+export declare const CloseIcon: default_2.FC<IconProps>;
+
 export declare const DynamicForm: default_2.FC<DynamicFormProps>;
 
 declare interface DynamicFormProps {
@@ -4508,6 +4614,49 @@ declare interface DynamicFormProps {
     primaryColor: string;
 }
 
+export declare const EmojiIcon: default_2.FC<IconProps>;
+
+export declare const EmojiPicker: default_2.FC<EmojiPickerProps>;
+
+declare interface EmojiPickerProps {
+    onSelect: (emoji: string) => void;
+    onClose: () => void;
+    primaryColor: string;
+}
+
+export declare const FileIcon: default_2.FC<IconProps>;
+
+export declare const FilePreviewList: default_2.FC<FilePreviewListProps>;
+
+declare interface FilePreviewListProps {
+    files: File[];
+    onRemove: (index: number) => void;
+    primaryColor: string;
+}
+
+export declare const FileUploadButton: default_2.FC<FileUploadButtonProps>;
+
+declare interface FileUploadButtonProps {
+    config: FileUploadConfig;
+    onFiles: (files: File[]) => void;
+    selectedFiles: File[];
+    onRemoveFile: (index: number) => void;
+    primaryColor: string;
+}
+
+export declare interface FileUploadConfig {
+    /** Enable file upload in chat input */
+    enabled?: boolean;
+    /** Accepted mime types */
+    accept?: string;
+    /** Allow multiple files */
+    multiple?: boolean;
+    /** Max file size in bytes */
+    maxSize?: number;
+    /** Max number of files */
+    maxFiles?: number;
+}
+
 export declare const FileUploadField: default_2.FC<FileUploadFieldProps>;
 
 declare interface FileUploadFieldProps {
@@ -4518,6 +4667,44 @@ declare interface FileUploadFieldProps {
     primaryColor: string;
 }
 
+/** Result returned by an async action handler */
+export declare interface FlowActionResult {
+    /** Status key — 'success', 'error', or any custom string for route matching */
+    status: string;
+    /** Additional data to merge into collected data */
+    data?: Record<string, unknown>;
+    /** Optional message to display (overrides successMessage/errorMessage) */
+    message?: string;
+    /** Optional explicit next step ID (overrides all routing) */
+    next?: string;
+}
+
+/** Configuration for an async action that runs when a step is entered */
+export declare interface FlowAsyncAction {
+    /** Key into ChatBotProps.actionHandlers */
+    handler: string;
+    /** Message shown while the action is running (default: "Processing...") */
+    loadingMessage?: string;
+    /** Message shown on success */
+    successMessage?: string;
+    /** Message shown on error */
+    errorMessage?: string;
+    /** Next step ID on success */
+    onSuccess?: string;
+    /** Next step ID on error */
+    onError?: string;
+    /** Custom routes: maps result.status string to step IDs */
+    routes?: Record<string, string>;
+}
+
+export declare interface FlowCondition {
+    field: string;
+    operator: 'eq' | 'neq' | 'contains' | 'gt' | 'lt';
+    value: string | number;
+    then: string;
+    else: string;
+}
+
 export declare interface FlowConfig {
     startStep: string;
     steps: FlowStep[];
@@ -4527,13 +4714,30 @@ export declare class FlowEngine {
     private steps;
     private startStep;
     private collectedData;
+    private idCounter;
+    private uid;
+    private stepHistory;
     constructor(flow: FlowConfig);
     getStartStepId(): string;
     getStep(id: string): FlowStep | undefined;
     getData(): Record<string, unknown>;
     setData(key: string, value: unknown): void;
     mergeData(data: Record<string, unknown>): void;
+    /** Push a step onto the history stack (called when entering a step) */
+    pushHistory(stepId: string): void;
+    /** Pop and return the previous step (go back) */
+    popHistory(): string | undefined;
+    /** Check if there's a previous step to go back to */
+    canGoBack(): boolean;
+    /** Reset the engine to initial state */
+    reset(): void;
     resolveNext(step: FlowStep, userValue?: string): string | undefined;
+    /** Returns true if the step expects a quick reply (not free text) */
+    stepExpectsQuickReply(step: FlowStep): boolean;
+    /** Returns true if the step expects a form submission */
+    stepExpectsForm(step: FlowStep): boolean;
+    /** Try to fuzzy-match user text against quick reply labels */
+    matchQuickReply(step: FlowStep, text: string): FlowQuickReply | undefined;
     buildMessages(step: FlowStep): ChatMessage[];
     private evaluate;
 }
@@ -4542,6 +4746,7 @@ export declare interface FlowQuickReply {
     label: string;
     value: string;
     next?: string;
+    icon?: string;
 }
 
 export declare interface FlowStep {
@@ -4553,13 +4758,11 @@ export declare interface FlowStep {
     form?: FormConfig;
     next?: string;
     action?: string;
-    condition?: {
-        field: string;
-        operator: 'eq' | 'neq' | 'contains' | 'gt' | 'lt';
-        value: string | number;
-        then: string;
-        else: string;
-    };
+    condition?: FlowCondition;
+    /** Key into ChatBotProps.components — renders a custom React component in this step */
+    component?: string;
+    /** Async action to run when this step is entered (API calls, verification, etc.) */
+    asyncAction?: FlowAsyncAction;
 }
 
 export declare interface FormConfig {
@@ -4580,14 +4783,7 @@ export declare interface FormFieldConfig {
     accept?: string;
     multiple?: boolean;
     defaultValue?: string | string[];
-    validation?: {
-        pattern?: string;
-        minLength?: number;
-        maxLength?: number;
-        min?: number;
-        max?: number;
-        message?: string;
-    };
+    validation?: FormFieldValidation;
 }
 
 export declare interface FormFieldOption {
@@ -4597,13 +4793,33 @@ export declare interface FormFieldOption {
 
 export declare type FormFieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'textarea' | 'select' | 'multiselect' | 'radio' | 'checkbox' | 'file' | 'date' | 'time' | 'hidden';
 
+export declare interface FormFieldValidation {
+    pattern?: string;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    message?: string;
+}
+
 export declare interface HeaderConfig {
     title?: string;
     subtitle?: string;
     avatar?: string;
     showClose?: boolean;
+    showMinimize?: boolean;
+    /** Show a restart button in the header */
+    showRestart?: boolean;
+}
+
+declare interface IconProps {
+    size?: number;
+    color?: string;
+    className?: string;
 }
 
+export declare const ImageIcon: default_2.FC<IconProps>;
+
 export declare const Launcher: default_2.FC<LauncherProps>;
 
 declare interface LauncherProps {
@@ -4624,6 +4840,14 @@ declare interface LoginScreenProps {
     primaryColor: string;
 }
 
+export declare interface MessageAttachment {
+    name: string;
+    url: string;
+    type: string;
+    size?: number;
+    preview?: string;
+}
+
 export declare const MessageBubble: default_2.FC<MessageBubbleProps>;
 
 declare interface MessageBubbleProps {
@@ -4640,9 +4864,63 @@ declare interface MessageListProps {
     primaryColor: string;
     onQuickReply: (value: string, label: string) => void;
     onFormSubmit: (formId: string, data: Record<string, unknown>) => void;
+    /** Map of custom step components */
+    components?: Record<string, ComponentType<StepComponentProps>>;
+    /** Called when a custom component completes */
+    onComponentComplete?: (result?: FlowActionResult) => void;
+    /** Collected flow data — passed to custom components */
+    collectedData?: Record<string, unknown>;
+    /** Current step ID */
+    currentStepId?: string | null;
 }
 
-export declare type MessageSender = 'bot' | 'user';
+export declare type MessageSender = 'bot' | 'user' | 'system';
+
+export declare const MinimizeIcon: default_2.FC<IconProps>;
+
+/**
+ * Persistence Plugin — saves/restores chat history via localStorage
+ */
+export declare function persistencePlugin(options?: {
+    storageKey?: string;
+    storage?: 'local' | 'session';
+}): ChatPlugin;
+
+export declare interface PluginContext {
+    /** Send a message programmatically */
+    sendMessage: (text: string) => void;
+    /** Add a bot message */
+    addBotMessage: (text: string) => void;
+    /** Get all messages */
+    getMessages: () => ChatMessage[];
+    /** Get collected data */
+    getData: () => Record<string, unknown>;
+    /** Set data */
+    setData: (key: string, value: unknown) => void;
+    /** Subscribe to events */
+    on: (event: string, handler: (...args: unknown[]) => void) => void;
+    /** Emit events */
+    emit: (event: string, ...args: unknown[]) => void;
+}
+
+/**
+ * PluginManager — Manages plugin lifecycle (Open/Closed Principle)
+ * Core is closed for modification, open for extension via plugins.
+ */
+export declare class PluginManager {
+    private plugins;
+    private context;
+    private eventHandlers;
+    register(plugins: ChatPlugin[]): void;
+    setContext(ctx: Omit<PluginContext, 'on' | 'emit'>): void;
+    private on;
+    private emit;
+    init(): Promise<void>;
+    onMessage(message: ChatMessage): Promise<ChatMessage>;
+    onSubmit(data: Record<string, unknown>): Promise<void>;
+    destroy(): Promise<void>;
+    private dispatchEvent;
+}
 
 export declare const QuickReplies: default_2.FC<QuickRepliesProps>;
 
@@ -4661,6 +4939,12 @@ declare interface RadioFieldProps {
     error?: string;
 }
 
+export declare const RemoveIcon: default_2.FC<IconProps>;
+
+export declare function resolveTheme(theme?: ChatTheme): Required<ChatTheme>;
+
+export declare const RestartIcon: default_2.FC<IconProps>;
+
 export declare const SelectField: default_2.FC<SelectFieldProps>;
 
 declare interface SelectFieldProps {
@@ -4670,6 +4954,18 @@ declare interface SelectFieldProps {
     error?: string;
 }
 
+export declare const SendIcon: default_2.FC<IconProps>;
+
+/** Props passed to custom components rendered in flow steps */
+export declare interface StepComponentProps {
+    /** The step ID that owns this component */
+    stepId: string;
+    /** All collected flow/form data */
+    data: Record<string, unknown>;
+    /** Call when the component interaction is complete — routes to next step */
+    onComplete: (result?: FlowActionResult) => void;
+}
+
 export declare const TextField: default_2.FC<TextFieldProps>;
 
 declare interface TextFieldProps {
@@ -4696,10 +4992,22 @@ export declare function useChat(): {
     dismissWelcome: () => void;
     startFlow: () => void;
     processFlowStep: (stepId: string) => Promise<void>;
+    goBack: () => void;
+    restartSession: () => void;
+    handleComponentComplete: (result?: FlowActionResult) => void;
 };
 
 export declare function useChatContext(): ChatContextValue;
 
+/**
+ * Webhook Plugin — sends messages/submissions to an external endpoint
+ */
+export declare function webhookPlugin(options: {
+    url: string;
+    headers?: Record<string, string>;
+    events?: ('message' | 'submit' | 'init' | 'destroy')[];
+}): ChatPlugin;
+
 export declare const WelcomeScreen: default_2.FC<WelcomeScreenProps>;
 
 declare interface WelcomeScreenProps {