@botonic/webchat-react 2.29.0 → 2.31.0

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 { 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/webchat-messages/use-webchat-messages.d.ts

@@ -33,7 +33,7 @@ export declare function useWebchatMessages(props: WebchatMessagesProps, state: W
             button: import('@botonic/shared').BotonicButtonContent;
         }, {
             [x: string]: import('xstate').ActorRefFromLogic<import('@botonic/webchat-core').PostMessageActor> | undefined;
-        }, "sending" | "idle" | "checkStatus" | "errorSendingMessage" | "performingPostback", string, import('xstate').NonReducibleUnknown, import('xstate').MetaObject, {
+        }, "checkStatus" | "sending" | "idle" | "errorSendingMessage" | "performingPostback", string, import('xstate').NonReducibleUnknown, import('xstate').MetaObject, {
             states: {
                 readonly checkStatus: {};
                 readonly sending: {};

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-webchat-state.d.ts

@@ -4,14 +4,10 @@ import { ComponentType } from 'react';
 import { ActorRefFrom } from 'xstate';
 import { AvatarConfig } from '../components/message-machine-renderer/use-avatar';
 import { WebchatClientSettingsBehaviors } from './webchat-client-settings-behaviors';
-/** Embedder registry merged with `WEBCHAT_OUTPUT_RENDERERS` (rating UI, …). */
 export type WebchatCustomMessageComponents = Record<string, ComponentType<Record<string, unknown>>>;
 export type WebchatStateProps = WebchatConfig & {
     avatarConfig?: AvatarConfig;
-    /**
-     * Extra or replacement custom message components. Framework defaults from
-     * {@link WEBCHAT_OUTPUT_RENDERERS} are applied first; matching keys here override.
-     */
+    /** Extra or replacement custom message components. */
     customMessages?: WebchatCustomMessageComponents;
 };
 export interface WebchatState {
@@ -30,7 +26,7 @@ export interface WebchatState {
     avatarConfig?: AvatarConfig;
     /** Mirrors `WebchatConfig.enableResponsiveHeroHeader`; default true. */
     enableResponsiveHeroHeader: boolean;
-    /** Merged `WEBCHAT_OUTPUT_RENDERERS` + embedder `customMessages`. */
+    /** 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.29.0",
+  "version": "2.31.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.29.0",
-    "@botonic/shared": "2.29.0",
-    "@lilara/ui-web-react": ">=0.8.0"
+    "@botonic/webchat-core": "2.31.0",
+    "@botonic/shared": "2.31.0",
+    "@lilara/ui-web-react": ">=0.9.0"
   },
   "publishConfig": {
     "access": "public"