@botonic/webchat-react 2.28.0 → 2.29.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 2.29.0 (2026-05-12)
+
+### 🚀 Features
+
+- **botonic:** v2 refinements - update skills, serve-bot defaults, staging bot warning ([#888](https://github.com/metis-ai/hubtype-product/pull/888))
+- rating component ([#882](https://github.com/metis-ai/hubtype-product/pull/882))
+
+### ❤️ Thank You
+
+- David Hidalgo @Davidhidalgo
+- Marc Rabat @vanbasten17
+
 ## 2.28.0 (2026-05-06)
 
 ### 🚀 Features

package/index.d.ts

@@ -51,15 +51,18 @@ export { useWebchatContainer } from './lib/components/webchat-container/use-webc
 export { useWebchatHeader } from './lib/components/webchat-header/use-webchat-header';
 export { useWebchatInput } from './lib/components/webchat-input/use-webchat-input';
 export { useWebchatMessages } from './lib/components/webchat-messages/use-webchat-messages';
-export { useWebchatState } from './lib/hooks/use-webchat-state';
+export { useUpdateCustomMessageProps } from './lib/hooks/use-update-custom-message-props';
+export { useWebchatState, type WebchatCustomMessageComponents, type WebchatStateProps, } from './lib/hooks/use-webchat-state';
+export { WEBCHAT_OUTPUT_RENDERERS } from './lib/hooks/webchat-output-renderers';
 export { DEFAULT_WEBCHAT_HERO_HEADER_LAYOUT_CONFIG, getMessageActorCount, mergeWebchatHeroHeaderLayoutConfig, useWebchatHeroHeaderLayout, type UseWebchatHeroHeaderLayoutParams, type WebchatHeroHeaderLayoutConfig, type WebchatHeroHeaderLayoutResult, } from './lib/hero-header-layout';
 export { Message, type MessageProps } from './lib/components/message/message';
 export { MessageBubble, type MessageBubbleProps, } from './lib/components/message/message/message-bubble';
+export { RatingMessage, type RatingMessageProps, } from './lib/components/message/rating-message';
 export { TypingIndicator } from './lib/components/message/typing-message';
 export { MessageMachineRenderer } from './lib/components/message-machine-renderer/message-machine-renderer';
 export { Backdrop, Dialog, type DialogAction, DialogContext, type DialogControls, type DialogOpenProps, DialogProvider, type DialogState, type DialogVariant, useDialog, } from './lib/components/dialog';
-export { type CoverComponentRegistry, Overlay, OverlayConfirmModal, type OverlayConfirmModalProps, OverlayContent, type OverlayContentProps, OverlayContext, type OverlayContextValue, OverlayCoverFrame, type OverlayCoverFrameProps, OverlayHeader, type OverlayHeaderProps, type OverlayProps, OverlayWebviewFrame, type OverlayWebviewFrameProps, useOverlay, useOverlayContext, useOverlayHeader, } from './lib/components/webchat-overlay';
-export { ButtonComponent, type ButtonComponentProps, } from './lib/components/shared';
+export { type CoverComponentRegistry, Overlay, OverlayContent, type OverlayContentProps, OverlayContext, type OverlayContextValue, OverlayCoverFrame, type OverlayCoverFrameProps, OverlayHeader, type OverlayHeaderProps, type OverlayProps, OverlayWebviewFrame, type OverlayWebviewFrameProps, useOverlay, useOverlayContext, useOverlayHeader, } from './lib/components/webchat-overlay';
+export { QuickReply, type QuickReplyProps } from './lib/components/shared';
 export * from './lib/types/primitives';
 export * from './lib/types/webchat-props';
 export type { WebchatConfig, WebchatController, WebchatEmittedEvent, } from '@botonic/webchat-core';

package/index.js

@@ -1,61 +1,63 @@
-import { B as s, a as t, C as o, D as r, b as n, c as u, d as i, e as c, f as l, g as d, h, M as b, i as g, j as W, k as p, O as C, l as v, m as M, n as y, o as O, p as m, q as D, T as H, W as T, r as x, s as B, t as I, u as S, v as w, w as A, x as E, y as f, z as F, A as L, E as R, F as _, G as k, H as G, I as P, J as U, K as j, L as q } from "./webchat-app-I5AArwfY.js";
-import { Badge as J, Banner as K, Button as N, Checkbox as Y, Multiselect as Q, MultiselectWithSections as V, Select as X, SelectWithSections as Z, Slider as $, Spinner as ee, Switch as ae, Tag as se, TextArea as te, TextInput as oe, Tooltip as re } from "@lilara/ui-web-react";
+import { B as s, C as t, D as o, a as r, b as n, c as u, d as i, e as c, f as l, g, M as d, h, i as p, j as W, O as b, k as C, l as M, m as v, n as y, o as O, Q as T, R as D, T as H, W as m, p as R, q as S, r as x, s as B, t as E, u as I, v as A, w, x as _, y as F, z as L, A as U, E as f, F as k, G as P, H as G, I as N, J as Q, K as j, L as q } from "./webchat-app-C3YH_yqx.js";
+import { Badge as J, Banner as K, Button as Y, Checkbox as V, Multiselect as X, MultiselectWithSections as Z, Select as $, SelectWithSections as ee, Slider as ae, Spinner as se, Switch as te, Tag as oe, TextArea as re, TextInput as ne, Tooltip as ue } from "@lilara/ui-web-react";
 export {
   s as Backdrop,
   J as Badge,
   K as Banner,
-  N as Button,
-  t as ButtonComponent,
-  Y as Checkbox,
-  o as CloseButton,
-  r as DEFAULT_WEBCHAT_HERO_HEADER_LAYOUT_CONFIG,
-  n as Dialog,
-  u as DialogContext,
-  i as DialogProvider,
-  c as DropdownMenuItemDownloadTranscript,
-  l as DropdownMenuItemResetConversation,
-  d as DropdownMenuItemResetSession,
-  h as DropdownMenuItemSounds,
-  b as MenuTriggerButton,
-  g as Message,
-  W as MessageBubble,
-  p as MessageMachineRenderer,
-  Q as Multiselect,
-  V as MultiselectWithSections,
-  C as Overlay,
-  v as OverlayConfirmModal,
-  M as OverlayContent,
-  y as OverlayContext,
-  O as OverlayCoverFrame,
-  m as OverlayHeader,
-  D as OverlayWebviewFrame,
-  X as Select,
-  Z as SelectWithSections,
-  $ as Slider,
-  ee as Spinner,
-  ae as Switch,
-  se as Tag,
-  te as TextArea,
-  oe as TextInput,
-  re as Tooltip,
+  Y as Button,
+  V as Checkbox,
+  t as CloseButton,
+  o as DEFAULT_WEBCHAT_HERO_HEADER_LAYOUT_CONFIG,
+  r as Dialog,
+  n as DialogContext,
+  u as DialogProvider,
+  i as DropdownMenuItemDownloadTranscript,
+  c as DropdownMenuItemResetConversation,
+  l as DropdownMenuItemResetSession,
+  g as DropdownMenuItemSounds,
+  d as MenuTriggerButton,
+  h as Message,
+  p as MessageBubble,
+  W as MessageMachineRenderer,
+  X as Multiselect,
+  Z as MultiselectWithSections,
+  b as Overlay,
+  C as OverlayContent,
+  M as OverlayContext,
+  v as OverlayCoverFrame,
+  y as OverlayHeader,
+  O as OverlayWebviewFrame,
+  T as QuickReply,
+  D as RatingMessage,
+  $ as Select,
+  ee as SelectWithSections,
+  ae as Slider,
+  se as Spinner,
+  te as Switch,
+  oe as Tag,
+  re as TextArea,
+  ne as TextInput,
+  ue as Tooltip,
   H as TypingIndicator,
-  T as WebchatApp,
-  x as WebchatContainer,
-  B as WebchatHeader,
-  I as WebchatInput,
-  S as WebchatMessages,
-  w as WebchatProvider,
+  m as WEBCHAT_OUTPUT_RENDERERS,
+  R as WebchatApp,
+  S as WebchatContainer,
+  x as WebchatHeader,
+  B as WebchatInput,
+  E as WebchatMessages,
+  I as WebchatProvider,
   A as getMessageActorCount,
-  E as mergeWebchatHeroHeaderLayoutConfig,
-  f as useDialog,
+  w as mergeWebchatHeroHeaderLayoutConfig,
+  _ as useDialog,
   F as useOverlay,
   L as useOverlayContext,
-  R as useOverlayHeader,
-  _ as useWebchatContainer,
-  k as useWebchatContext,
+  U as useOverlayHeader,
+  f as useUpdateCustomMessageProps,
+  k as useWebchatContainer,
+  P as useWebchatContext,
   G as useWebchatHeader,
-  P as useWebchatHeroHeaderLayout,
-  U as useWebchatInput,
+  N as useWebchatHeroHeaderLayout,
+  Q as useWebchatInput,
   j as useWebchatMessages,
   q as useWebchatState
 };

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

@@ -29,6 +29,7 @@ export { type CarouselElement, CarouselMessage, type CarouselMessageProps, } fro
 export { DocumentMessage, type DocumentMessageProps } from './document-message';
 export { ImageMessage, type ImageMessageProps } from './image-message';
 export { LocationMessage, type LocationMessageProps } from './location-message';
+export { RatingMessage, type RatingMessageProps } from './rating-message';
 export { TextMessage, type TextMessageProps } from './text-message';
 export { TypingIndicator, type TypingIndicatorProps } from './typing-message';
 export { VideoMessage, type VideoMessageProps } from './video-message';

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

@@ -17,6 +17,8 @@ export interface MessageProps {
     senderName?: string;
     /** A class name to apply to the message. */
     className?: string;
+    /** Class name merged onto the inner {@link MessageBubble} (e.g. rating card overrides). */
+    bubbleClassName?: string;
     /** The content to render inside the message bubble. */
     children: React.ReactNode;
     /** Hide the footer when the next message belongs to the same group. */

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

@@ -19,6 +19,8 @@ export interface UseMessageProps {
     senderName?: string;
     /** A class name to apply to the message. */
     className?: string;
+    /** Class name merged onto {@link MessageBubble}. */
+    bubbleClassName?: string;
     /** The content to render inside the bubble. */
     children: React.ReactNode;
     /** Hide the footer when this message is grouped with the next. */

package/lib/components/message/rating-message/icons/face-angry.d.ts

@@ -0,0 +1,2 @@
+import { RatingIconProps } from './rating-icon-types';
+export declare const FaceAngrySvg: ({ color, selected }: RatingIconProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/message/rating-message/icons/face-frown.d.ts

@@ -0,0 +1,2 @@
+import { RatingIconProps } from './rating-icon-types';
+export declare const FaceFrownSvg: ({ color, selected }: RatingIconProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/message/rating-message/icons/face-grin-beam.d.ts

@@ -0,0 +1,2 @@
+import { RatingIconProps } from './rating-icon-types';
+export declare const FaceGrinBeamSvg: ({ color, selected }: RatingIconProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/message/rating-message/icons/face-meh.d.ts

@@ -0,0 +1,2 @@
+import { RatingIconProps } from './rating-icon-types';
+export declare const FaceMehSvg: ({ color, selected }: RatingIconProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/message/rating-message/icons/face-smile.d.ts

@@ -0,0 +1,2 @@
+import { RatingIconProps } from './rating-icon-types';
+export declare const FaceSmileSvg: ({ color, selected }: RatingIconProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/message/rating-message/icons/index.d.ts

@@ -0,0 +1,7 @@
+export { FaceAngrySvg } from './face-angry';
+export { FaceFrownSvg } from './face-frown';
+export { FaceGrinBeamSvg } from './face-grin-beam';
+export { FaceMehSvg } from './face-meh';
+export { FaceSmileSvg } from './face-smile';
+export type { RatingIconProps } from './rating-icon-types';
+export { StarSvg } from './star';

package/lib/components/message/rating-message/icons/rating-icon-types.d.ts

@@ -0,0 +1,5 @@
+/** Mirrors hubtype/botonic `RatingIconProps` (packages/botonic-react rating icons). */
+export interface RatingIconProps {
+    color: string;
+    selected?: boolean;
+}

package/lib/components/message/rating-message/icons/star.d.ts

@@ -0,0 +1,2 @@
+import { RatingIconProps } from './rating-icon-types';
+export declare const StarSvg: ({ color, selected }: RatingIconProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { RatingMessage, type RatingMessageProps } from './rating-message';

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { RatingMessageProps } from './use-rating-message';
+export type { RatingMessageProps };
+export declare const RatingMessage: React.FC<RatingMessageProps>;

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

@@ -0,0 +1,31 @@
+import { WebchatOutputRatingProps } from '@botonic/shared';
+export interface RatingMessageProps extends WebchatOutputRatingProps {
+    messageId?: string;
+    messageProps?: Record<string, unknown>;
+    /** Persisted state — populated from message.data.props after interaction */
+    selected?: number;
+    comment?: string;
+    submitted?: boolean;
+}
+export interface UseRatingMessageReturn {
+    state: {
+        selected: number | undefined;
+        hovered: number | undefined;
+        comment: string;
+        submitted: boolean;
+        isSubmitting: boolean;
+    };
+    handlers: {
+        handleSelect: (value: number) => void;
+        handleHover: (value: number | undefined) => void;
+        handleCommentChange: (value: string) => void;
+        handleSubmit: () => Promise<void>;
+    };
+    resolved: {
+        messageText: string;
+        buttonText: string;
+        messageProps: Record<string, unknown>;
+        ratingType: 'stars' | 'smileys';
+    };
+}
+export declare function useRatingMessage(props: RatingMessageProps): UseRatingMessageReturn;

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

@@ -8,7 +8,7 @@ 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;
+    customMessageRenderer?: (message: unknown, messageData: unknown, onButtonClick: (button: BotonicButtonContent) => void, messageProps: Partial<MessageProps>) => React.ReactNode;
     /** Additional props to pass to all message components */
     baseProps?: Partial<MessageProps> & {
         avatarConfig?: AvatarConfig;

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

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

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,12 +25,15 @@ 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;
         }, {
             [x: string]: import('xstate').ActorRefFromLogic<import('@botonic/webchat-core').PostMessageActor> | undefined;
-        }, "checkStatus" | "sending" | "idle" | "errorSendingMessage" | "performingPostback", string, import('xstate').NonReducibleUnknown, import('xstate').MetaObject, {
+        }, "sending" | "idle" | "checkStatus" | "errorSendingMessage" | "performingPostback", string, import('xstate').NonReducibleUnknown, import('xstate').MetaObject, {
             states: {
                 readonly checkStatus: {};
                 readonly sending: {};
@@ -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/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,18 @@
 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';
+/** Embedder registry merged with `WEBCHAT_OUTPUT_RENDERERS` (rating UI, …). */
+export type WebchatCustomMessageComponents = Record<string, ComponentType<Record<string, unknown>>>;
 export type WebchatStateProps = WebchatConfig & {
     avatarConfig?: AvatarConfig;
-    customMessages: any;
+    /**
+     * Extra or replacement custom message components. Framework defaults from
+     * {@link WEBCHAT_OUTPUT_RENDERERS} are applied first; matching keys here override.
+     */
+    customMessages?: WebchatCustomMessageComponents;
 };
 export interface WebchatState {
     controller: WebchatController;
@@ -23,6 +30,7 @@ export interface WebchatState {
     avatarConfig?: AvatarConfig;
     /** Mirrors `WebchatConfig.enableResponsiveHeroHeader`; default true. */
     enableResponsiveHeroHeader: boolean;
-    customMessages: any;
+    /** Merged `WEBCHAT_OUTPUT_RENDERERS` + embedder `customMessages`. */
+    customMessages: WebchatCustomMessageComponents;
 }
 export declare function useWebchatState(stateProps: WebchatStateProps): WebchatState;

package/lib/hooks/webchat-output-renderers.d.ts

@@ -0,0 +1,6 @@
+import { ComponentType } from 'react';
+/**
+ * Default webchat output renderers merged ahead of embedder `customMessages`.
+ * Embedder keys override when they use the same message name.
+ */
+export declare const WEBCHAT_OUTPUT_RENDERERS: Record<string, ComponentType<Record<string, unknown>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/webchat-react",
-  "version": "2.28.0",
+  "version": "2.29.0",
   "type": "module",
   "types": "./index.d.ts",
   "module": "./index.js",
@@ -26,9 +26,9 @@
   "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.29.0",
+    "@botonic/shared": "2.29.0",
+    "@lilara/ui-web-react": ">=0.8.0"
   },
   "publishConfig": {
     "access": "public"