@botonic/webchat-react 2.28.0 → 2.30.0

package/lib/components/preview-events/hooks/use-last-label-position.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+interface UseLastLabelPositionProps {
+    wrapperRef: RefObject<HTMLDivElement | null>;
+    isExpanded: boolean;
+    debugEvent: unknown;
+    isCollapsible: boolean;
+}
+export declare function useLastLabelPosition({ wrapperRef, isExpanded, debugEvent, isCollapsible, }: UseLastLabelPositionProps): void;
+export {};

package/lib/components/preview-events/icons/ai-router-icon.d.ts

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

package/lib/components/preview-events/icons/ai-specialist-icon.d.ts

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

package/lib/components/preview-events/icons/arrow-progress-icon.d.ts

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

package/lib/components/preview-events/icons/brain-icon.d.ts

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

package/lib/components/preview-events/icons/caret-down-icon.d.ts

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

package/lib/components/preview-events/icons/caret-up-icon.d.ts

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

package/lib/components/preview-events/icons/circle-check-icon.d.ts

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

package/lib/components/preview-events/icons/code-icon.d.ts

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

package/lib/components/preview-events/icons/file-pdf-icon.d.ts

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

package/lib/components/preview-events/icons/file-word-icon.d.ts

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

package/lib/components/preview-events/icons/hand-icon.d.ts

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

package/lib/components/preview-events/icons/head-set-icon.d.ts

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

package/lib/components/preview-events/icons/index.d.ts

@@ -0,0 +1,19 @@
+export { AiRouterIcon } from './ai-router-icon';
+export { AiSpecialistIcon } from './ai-specialist-icon';
+export { ArrowProgressIcon } from './arrow-progress-icon';
+export { BrainIcon } from './brain-icon';
+export { CaretDownIcon } from './caret-down-icon';
+export { CaretUpIcon } from './caret-up-icon';
+export { CircleCheckIcon } from './circle-check-icon';
+export { CodeIcon } from './code-icon';
+export { FilePdfIcon } from './file-pdf-icon';
+export { FileWordIcon } from './file-word-icon';
+export { HandIcon } from './hand-icon';
+export { HeadSetIcon } from './head-set-icon';
+export { LifeRingIcon } from './life-ring-icon';
+export { LinkIcon } from './link-icon';
+export { QuoteRightIcon } from './quote-right-icon';
+export { ScrewdriverWrenchIcon } from './screwdriver-wrench-icon';
+export { SplitIcon } from './split-icon';
+export { WandIcon } from './wand-icon';
+export { WindowRestoreIcon } from './window-restore-icon';

package/lib/components/preview-events/icons/life-ring-icon.d.ts

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

package/lib/components/preview-events/icons/link-icon.d.ts

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

package/lib/components/preview-events/icons/quote-right-icon.d.ts

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

package/lib/components/preview-events/icons/screwdriver-wrench-icon.d.ts

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

package/lib/components/preview-events/icons/split-icon.d.ts

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

package/lib/components/preview-events/icons/wand-icon.d.ts

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

package/lib/components/preview-events/icons/window-restore-icon.d.ts

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

package/lib/components/preview-events/index.d.ts

@@ -0,0 +1,3 @@
+export type { DebugEvent } from './events/types';
+export { PreviewEventMessage, type PreviewEventMessageProps, SYSTEM_MESSAGE_ROLE, } from './preview-event-message';
+export type { DebugEventConfig } from './preview-events-types';

package/lib/components/preview-events/preview-event-message/index.d.ts

@@ -0,0 +1 @@
+export { PreviewEventMessage, type PreviewEventMessageProps, SYSTEM_MESSAGE_ROLE, } from './preview-event-message';

package/lib/components/preview-events/preview-event-message/preview-event-message.d.ts

@@ -0,0 +1,20 @@
+import { PreviewUtils } from '@botonic/shared';
+import { DebugEvent } from '../events';
+/**
+ * DOM `role` stamped on every preview debug-event message.
+ *
+ * This is a cross-package contract, not a decorative attribute: the dashboard's
+ * flow-builder preview panel implements its "show debug system events" toggle by
+ * querying `[role="system-message"]` and flipping each match's `display` (see
+ * `usePersistedToggleSystemEvents` / `usePersistedToggleSystemEventsV2` in
+ * feature-flow-builder). Changing this value silently breaks that toggle, so the
+ * dashboard's `SYSTEM_MESSAGE_ROLE` / `SYSTEM_MESSAGE_ROLE_V2` constants must stay
+ * in sync with it.
+ */
+export declare const SYSTEM_MESSAGE_ROLE = "system-message";
+export interface PreviewEventMessageProps {
+    debugEvent: DebugEvent;
+    messageId?: string;
+    previewUtils?: PreviewUtils;
+}
+export declare const PreviewEventMessage: ({ debugEvent, messageId, previewUtils, }: PreviewEventMessageProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/components/preview-events/preview-event-message/use-preview-event-message.d.ts

@@ -0,0 +1,17 @@
+import { PreviewUtils } from '@botonic/shared';
+import { default as React } from 'react';
+import { DebugEvent } from '../events';
+import { DebugEventConfig } from '../preview-events-types';
+export interface UsePreviewEventMessageProps {
+    debugEvent: DebugEvent;
+    messageId?: string;
+    previewUtils?: PreviewUtils;
+}
+export declare function usePreviewEventMessage({ debugEvent, messageId, previewUtils, }: UsePreviewEventMessageProps): {
+    isExpanded: boolean;
+    eventConfig: DebugEventConfig | undefined;
+    wrapperRef: React.RefObject<HTMLDivElement>;
+    messageId: string | undefined;
+    previewUtils: PreviewUtils | undefined;
+    handleContainerClick: (e: React.MouseEvent) => void;
+};

package/lib/components/preview-events/preview-events-types.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface IconProps {
+    color?: string;
+}
+export interface DebugEventConfig {
+    action: string;
+    title: React.ReactNode;
+    component: React.ComponentType<any> | null;
+    icon?: React.ReactNode;
+    collapsible?: boolean;
+}
+export type { DebugEvent } from './events/types';

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

@@ -1,2 +1,4 @@
-export type { ButtonComponentProps } from './button-component';
-export { ButtonComponent } from './button-component';
+export type { MarkdownTextProps } from './markdown-text';
+export { MarkdownText } from './markdown-text';
+export type { QuickReplyProps } from './quick-reply';
+export { QuickReply } from './quick-reply';

package/lib/components/shared/markdown-text/index.d.ts

@@ -0,0 +1,2 @@
+export type { MarkdownTextProps } from './markdown-text';
+export { MarkdownText } from './markdown-text';

package/lib/components/shared/markdown-text/markdown-text.d.ts

@@ -0,0 +1,6 @@
+export interface MarkdownTextProps {
+    text: string;
+    className?: string;
+}
+export declare const MarkdownText: ({ text, className, }: MarkdownTextProps) => JSX.Element;
+export default MarkdownText;

package/lib/components/shared/quick-reply/index.d.ts

@@ -0,0 +1,2 @@
+export type { QuickReplyProps } from './quick-reply';
+export { QuickReply } from './quick-reply';

package/lib/components/shared/{button-component/button-component.d.ts → quick-reply/quick-reply.d.ts}

@@ -1,5 +1,5 @@
 import { BotonicButtonContent } from '@botonic/shared';
-export interface ButtonComponentProps {
+export interface QuickReplyProps {
     /** The button text. */
     text: string;
     /** Whether the button is disabled. */
@@ -19,6 +19,6 @@ export interface ButtonComponentProps {
     /** 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;
+/** Chat message button for quick replies and carousel CTAs. */
+export declare const QuickReply: import('react').ForwardRefExoticComponent<QuickReplyProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default QuickReply;

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

@@ -1,10 +1,9 @@
 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'> {
+export interface WebchatAppProps extends WebchatStateProps {
     /** Whether the webchat is open */
     isOpen: boolean;
     /** Callback when the webchat is closed */
@@ -22,8 +21,6 @@ export interface WebchatAppProps extends Omit<WebchatStateProps, 'customMessages
      * Can also be set via WebchatTrigger `webchatConfig.showBranding`. Default: true.
      */
     showBranding?: boolean;
-    /** Custom messages registry */
-    customMessages?: Record<string, ComponentType<any>>;
     /** Cover components registry */
     coverRegistry?: CoverComponentRegistry;
     /** Override default icons for the input action bar. */

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

@@ -25,6 +25,9 @@ export declare function useWebchatMessages(props: WebchatMessagesProps, state: W
                 id: string;
                 data: Record<string, string>;
             };
+        } | {
+            type: "UPDATE_CUSTOM_PROPS";
+            props: Record<string, unknown>;
         } | {
             type: "BUTTON_CLICKED";
             button: import('@botonic/shared').BotonicButtonContent;
@@ -46,6 +49,9 @@ export declare function useWebchatMessages(props: WebchatMessagesProps, state: W
                 id: string;
                 data: Record<string, string>;
             };
+        } | {
+            type: "UPDATE_CUSTOM_PROPS";
+            props: Record<string, unknown>;
         } | {
             type: "BUTTON_CLICKED";
             button: import('@botonic/shared').BotonicButtonContent;

package/lib/components/webchat-overlay/base/index.d.ts

@@ -2,4 +2,3 @@ export { Overlay, type OverlayProps, useOverlay } from './overlay';
 export { type CoverComponentRegistry, OverlayContext, type OverlayContextValue, useOverlayContext, } from './overlay-context';
 export { OverlayHeader, type OverlayHeaderProps, useOverlayHeader, } from './header';
 export { OverlayContent, type OverlayContentProps } from './content';
-export { OverlayConfirmModal, type OverlayConfirmModalProps, } from './confirm-modal';

package/lib/components/webchat-overlay/base/overlay/use-overlay.d.ts

@@ -11,11 +11,7 @@ export interface OverlayHandlers {
 export interface UseOverlayResult {
     isLoading: boolean;
     setIsLoading: (loading: boolean) => void;
-    showConfirmModal: boolean;
-    setShowConfirmModal: (show: boolean) => void;
     attemptClose: () => void;
-    handleConfirmClose: () => void;
-    handleCancelClose: () => void;
     variants: {
         isLoading: boolean;
     };

package/lib/components/webchat-overlay/base/overlay-context.d.ts

@@ -17,8 +17,6 @@ export interface OverlayContextValue {
     isLoading: boolean;
     setIsLoading: (loading: boolean) => void;
     attemptClose: () => void;
-    showConfirmModal: boolean;
-    setShowConfirmModal: (show: boolean) => void;
     coverRegistry?: CoverComponentRegistry;
 }
 export declare const OverlayContext: import('react').Context<OverlayContextValue | null>;

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

@@ -1,3 +1,3 @@
-export { type CoverComponentRegistry, Overlay, OverlayConfirmModal, type OverlayConfirmModalProps, OverlayContent, type OverlayContentProps, OverlayContext, type OverlayContextValue, OverlayHeader, type OverlayHeaderProps, type OverlayProps, useOverlay, useOverlayContext, useOverlayHeader, } from './base';
+export { type CoverComponentRegistry, Overlay, OverlayContent, type OverlayContentProps, OverlayContext, type OverlayContextValue, OverlayHeader, type OverlayHeaderProps, type OverlayProps, useOverlay, useOverlayContext, useOverlayHeader, } from './base';
 export { OverlayCoverFrame, type OverlayCoverFrameProps } from './cover';
 export { OverlayWebviewFrame, type OverlayWebviewFrameProps } from './webview';

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

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

package/lib/hooks/use-update-custom-message-props.d.ts

@@ -0,0 +1 @@
+export declare function useUpdateCustomMessageProps(messageId: string | undefined): (props: Record<string, unknown>) => void;

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

@@ -1,11 +1,14 @@
 import { WebchatClientSettings } from '@botonic/shared';
 import { OverlayState, WebchatConfig, WebchatController, WebchatMessageMachine } from '@botonic/webchat-core';
+import { ComponentType } from 'react';
 import { ActorRefFrom } from 'xstate';
 import { AvatarConfig } from '../components/message-machine-renderer/use-avatar';
 import { WebchatClientSettingsBehaviors } from './webchat-client-settings-behaviors';
+export type WebchatCustomMessageComponents = Record<string, ComponentType<Record<string, unknown>>>;
 export type WebchatStateProps = WebchatConfig & {
     avatarConfig?: AvatarConfig;
-    customMessages: any;
+    /** Extra or replacement custom message components. */
+    customMessages?: WebchatCustomMessageComponents;
 };
 export interface WebchatState {
     controller: WebchatController;
@@ -23,6 +26,7 @@ export interface WebchatState {
     avatarConfig?: AvatarConfig;
     /** Mirrors `WebchatConfig.enableResponsiveHeroHeader`; default true. */
     enableResponsiveHeroHeader: boolean;
-    customMessages: any;
+    /** Embedder-supplied custom message components. */
+    customMessages: WebchatCustomMessageComponents;
 }
 export declare function useWebchatState(stateProps: WebchatStateProps): WebchatState;

package/lib/types/webchat-props.d.ts

@@ -1,6 +1,8 @@
 import { WebchatController } from '@botonic/webchat-core';
 import { ComponentType, CSSProperties, ReactNode } from 'react';
 import { CoverComponentRegistry } from '../components/webchat-overlay';
+import { WebchatHeroHeaderLayoutConfig } from '../hero-header-layout';
+import { WebchatStateProps } from '../hooks/use-webchat-state';
 export interface WebchatInputIcons {
     emoji?: ReactNode;
     attachment?: ReactNode;
@@ -46,6 +48,23 @@ export interface WebchatCompositionProps {
     /** Additional config passed from WebchatTrigger */
     [key: string]: unknown;
 }
+/**
+ * Optional config a custom webchat composition may read beyond the required
+ * `WebchatCompositionProps`. These arrive through `WebchatCompositionProps`'s
+ * `[key: string]: unknown` index signature (the trigger spreads them in), so a
+ * composition asserts this shape once to read them with concrete types.
+ *
+ * Fields forwarded to `WebchatProvider` are picked from `WebchatStateProps` so
+ * their types stay in lockstep with the provider (no `as any` at the call site);
+ * the remaining fields are composition/layout options consumed by the layout itself.
+ */
+export type WebchatCompositionExtras = Pick<WebchatStateProps, 'avatarConfig' | 'customMessages' | 'storage' | 'webchatClientSettings' | 'enableResponsiveHeroHeader' | 'previewUtils'> & {
+    title?: string;
+    placeholder?: string;
+    showBranding?: boolean;
+    coverRegistry?: CoverComponentRegistry;
+    heroHeaderLayout?: Partial<WebchatHeroHeaderLayoutConfig>;
+};
 /** Loader function type for lazy loading custom webchat compositions */
 export type WebchatLoader = () => Promise<{
     default: ComponentType<WebchatCompositionProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/webchat-react",
-  "version": "2.28.0",
+  "version": "2.30.0",
   "type": "module",
   "types": "./index.d.ts",
   "module": "./index.js",
@@ -21,14 +21,18 @@
   "dependencies": {
     "class-variance-authority": "^0.7.0",
     "react-aria": "3.33.1",
+    "react-markdown": "^9.0.1",
+    "rehype-external-links": "^3.0.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0",
     "@xstate/react": "^5.0.4"
   },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@botonic/webchat-core": "2.28.0",
-    "@botonic/shared": "2.28.0",
-    "@lilara/ui-web-react": ">=0.7.0"
+    "@botonic/webchat-core": "2.30.0",
+    "@botonic/shared": "2.30.0",
+    "@lilara/ui-web-react": ">=0.9.0"
   },
   "publishConfig": {
     "access": "public"