@botonic/webchat-react 2.27.0 → 2.28.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 2.28.0 (2026-05-06)
+
+### 🚀 Features
+
+- **webchat:** message grouping, responsive layout, and token refinements (BLT-2359) ([#880](https://github.com/metis-ai/hubtype-product/pull/880))
+- **lilara:** semantic token layer — primary/secondary scales, text/surface/radius tokens, component CSS migration ([#879](https://github.com/metis-ai/hubtype-product/pull/879))
+- **foundations:** semantic token layer — PR 1 foundations (BLT-2358) ([#874](https://github.com/metis-ai/hubtype-product/pull/874))
+
+### ❤️ Thank You
+
+- David Hidalgo @Davidhidalgo
+
 ## 2.27.0 (2026-04-29)
 
 ### 🚀 Features

package/CLAUDE.md

@@ -71,8 +71,8 @@ The cascade stack, from lowest to highest priority:
 /* webchat-tokens.css */
 @layer overrides {
   :root {
-    --webchat-input-bg: var(--color-neutral-white);
-    --webchat-send-button-color: var(--color-primary-500);
+    --webchat-input-bg: var(--surface-foreground);
+    --webchat-send-button-color: var(--primary-500);
   }
 }
 ```
@@ -83,13 +83,17 @@ The cascade stack, from lowest to highest priority:
 
 Every value a consumer might want to customize must be a `--webchat-*` token defined in `webchat-tokens.css`.
 
-Pattern: `--webchat-{component}-{property}` with fallback to a foundations token:
+Pattern: `--webchat-{component}-{property}` with fallback to a semantic foundations token:
 
 ```css
---webchat-input-bg: var(--color-neutral-white);
---webchat-bubble-bot-bg: var(--color-neutral-100);
+--webchat-input-bg: var(--surface-foreground);
+--webchat-send-button-color: var(--primary-500);
+--webchat-bubble-bot-bg: var(--primary-50);
 ```
 
+Prefer `--primary-*` / `--secondary-*` over raw `--color-purple-*` / `--color-aqua-*`.
+Prefer `--color-focus` over `--secondary-600` directly.
+
 ## Message Components
 
 ```

package/index.js

@@ -1,4 +1,4 @@
-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-DSDMjE-m.js";
+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";
 export {
   s as Backdrop,

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

@@ -4,6 +4,10 @@ export interface MessageBubbleProps {
     variant?: 'user' | 'bot' | 'system' | 'agent';
     /** The status of the message. */
     status?: 'sending' | 'sent' | 'error';
+    /** Flatten the near-side top corner (continuation of a group). */
+    flatTopCorner?: boolean;
+    /** Flatten the near-side bottom corner (more messages follow in the group). */
+    flatBottomCorner?: boolean;
     /** A class name to apply to the bubble. */
     className?: string;
     /** The content to render inside the bubble. */

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

@@ -19,6 +19,14 @@ export interface MessageProps {
     className?: string;
     /** The content to render inside the message bubble. */
     children: React.ReactNode;
+    /** Hide the footer when the next message belongs to the same group. */
+    hideFooter?: boolean;
+    /** Whether this message continues a group started by the previous message. */
+    isContinuation?: boolean;
+    /** Expand the bubble to the full max-width (e.g. carousel, media). */
+    isFullWidth?: boolean;
+    /** Bot interaction ID, rendered as a data attribute for grouping. */
+    botInteractionId?: string;
 }
 /** Message component with common functionality for all message types. */
 export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -21,6 +21,14 @@ export interface UseMessageProps {
     className?: string;
     /** The content to render inside the bubble. */
     children: React.ReactNode;
+    /** Hide the footer when this message is grouped with the next. */
+    hideFooter?: boolean;
+    /** Whether this message continues a group started by the previous message. */
+    isContinuation?: boolean;
+    /** Whether this message has action buttons below the bubble. */
+    hasActions?: boolean;
+    /** Expand the bubble to the full max-width (e.g. carousel, media). */
+    isFullWidth?: boolean;
     /** Additional props to pass through. */
     [key: string]: any;
 }

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

@@ -1,5 +1,5 @@
-import { BotonicButtonContent, WebchatMessage } from '@botonic/shared';
-import { WebchatMessageMachine } from '@botonic/webchat-core';
+import { BotonicButtonContent } from '@botonic/shared';
+import { WebchatMessage, WebchatMessageMachine } from '@botonic/webchat-core';
 import { ActorRefFrom } from 'xstate';
 import { AvatarConfigResult } from './use-avatar';
 export interface MessageMachineData {

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

@@ -12,7 +12,7 @@ export declare function useWebchatMessages(props: WebchatMessagesProps, state: W
     };
     messageListProps: {
         messageActors: import('xstate').ActorRef<import('xstate').MachineSnapshot<{
-            message: import('@botonic/shared').WebchatMessage;
+            message: import('@botonic/webchat-core').WebchatMessage;
             user: import('@botonic/shared').HubtypeUser;
             status: import('@botonic/webchat-core').WebchatMessageStatus;
             file?: File;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/webchat-react",
-  "version": "2.27.0",
+  "version": "2.28.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.27.0",
-    "@botonic/shared": "2.27.0",
-    "@lilara/ui-web-react": ">=0.6.0"
+    "@botonic/webchat-core": "2.28.0",
+    "@botonic/shared": "2.28.0",
+    "@lilara/ui-web-react": ">=0.7.0"
   },
   "publishConfig": {
     "access": "public"