@botonic/webchat-react 2.23.2 → 2.25.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 2.25.0 (2026-03-27)
+
+### 🚀 Features
+
+- **webchat:** webchat base component refinement #BLT-2274 ([#777](https://github.com/metis-ai/hubtype-product/pull/777))
+
+### ❤️ Thank You
+
+- David Hidalgo @Davidhidalgo
+
+## 2.24.0 (2026-03-27)
+
+### 🚀 Features
+
+- **botonic:** remove webchat-react Lilara gateway and decouple CSS #BLT-2288 ([#770](https://github.com/metis-ai/hubtype-product/pull/770))
+
+### ❤️ Thank You
+
+- David Hidalgo @Davidhidalgo
+
 ## 2.23.2 (2026-03-23)
 
 This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.

package/README.md

@@ -30,19 +30,21 @@ This package requires:
 
 ### Basic Setup
 
-Import the library styles in your CSS or JavaScript:
+Load foundations (reset + tokens), then Lilara component CSS, then webchat overrides (shared CSS layers control cascade):
 
 ```css
-/* In your CSS file (recommended) */
+@import '@lilara/foundations/base.css';
+@import '@lilara/ui-web-react/styles.css';
 @import '@botonic/webchat-react/styles.css';
 ```
 
 ```tsx
-// Or in your JavaScript/TypeScript file
+import '@lilara/foundations/base.css'
+import '@lilara/ui-web-react/styles.css'
 import '@botonic/webchat-react/styles.css'
 ```
 
-This is the standard pattern used by CSS libraries like Tailwind, Bootstrap, etc.
+Import `@lilara/ui-web-react` components from that package, not from `@botonic/webchat-react`.
 
 ### Components
 

package/index.d.ts

@@ -6,6 +6,9 @@
  * ## Embedded Webchat (full control)
  * ```tsx
  * import { WebchatProvider, WebchatContainer, WebchatMessages, WebchatInput } from '@botonic/webchat-react'
+ * import { Button } from '@lilara/ui-web-react'
+ * import '@lilara/foundations/base.css'
+ * import '@lilara/ui-web-react/styles.css'
  * import '@botonic/webchat-react/styles.css'
  *
  * <WebchatProvider appId="your-app-id">
@@ -21,6 +24,8 @@
  * For a floating trigger button that lazy-loads the webchat:
  * ```tsx
  * import { WebchatTrigger } from '@botonic/webchat-react/trigger'
+ * import '@lilara/foundations/base.css'
+ * import '@lilara/ui-web-react/styles.css'
  * import '@botonic/webchat-react/styles.css'
  *
  * <WebchatTrigger appId="your-app-id" />
@@ -52,30 +57,3 @@ export { ButtonComponent, type ButtonComponentProps, } from './lib/components/sh
 export * from './lib/types/primitives';
 export * from './lib/types/webchat-props';
 export type { WebchatConfig, WebchatController, WebchatEmittedEvent, } from '@botonic/webchat-core';
-export { Button, Spinner } from '@lilara/ui-web-react';
-export type { TextInputProps } from '@lilara/ui-web-react';
-export type { TextAreaProps } from '@lilara/ui-web-react';
-export type { CheckboxProps } from '@lilara/ui-web-react';
-export type { SwitchProps } from '@lilara/ui-web-react';
-export type { SelectItem, SelectProps } from '@lilara/ui-web-react';
-export type { SelectWithSectionsProps } from '@lilara/ui-web-react';
-export type { MultiselectProps } from '@lilara/ui-web-react';
-export type { MultiselectWithSectionsProps } from '@lilara/ui-web-react';
-export type { SliderProps } from '@lilara/ui-web-react';
-export { TextInput } from '@lilara/ui-web-react';
-export { TextArea } from '@lilara/ui-web-react';
-export { Checkbox } from '@lilara/ui-web-react';
-export { Switch } from '@lilara/ui-web-react';
-export { Select } from '@lilara/ui-web-react';
-export { SelectWithSections } from '@lilara/ui-web-react';
-export { Multiselect } from '@lilara/ui-web-react';
-export { MultiselectWithSections } from '@lilara/ui-web-react';
-export { Slider } from '@lilara/ui-web-react';
-export type { BannerProps } from '@lilara/ui-web-react';
-export type { TooltipProps } from '@lilara/ui-web-react';
-export { Banner } from '@lilara/ui-web-react';
-export { Tooltip } from '@lilara/ui-web-react';
-export type { BadgeProps } from '@lilara/ui-web-react';
-export type { TagProps } from '@lilara/ui-web-react';
-export { Badge } from '@lilara/ui-web-react';
-export { Tag } from '@lilara/ui-web-react';

package/index.js

@@ -1,46 +1,30 @@
-import { B as s, M as t, a as r, b as n, O as o, c, d as l, e as i, f as h, g as u, h as b, T as W, W as v, i as p, j as d, k as y, l as O, m as C, u as M, n as g, o as x, p as S, q as m, r as B, s as T, t as f, v as H } from "./webchat-app-CtAHJapU.js";
-import { Badge as k, Banner as w, Button as A, Checkbox as F, Multiselect as j, MultiselectWithSections as q, Select as P, SelectWithSections as R, Slider as z, Spinner as D, Switch as E, Tag as G, TextArea as J, TextInput as K, Tooltip as L } from "@lilara/ui-web-react";
+import { B as s, M as t, a as r, b as n, O as o, c as b, d as c, e as h, f as u, g as v, h as W, T as l, W as y, i as O, j as d, k as i, l as C, m as p, u as M, n as g, o as m, p as x, q as H, r as f, s as B, t as I, v as F } from "./webchat-app-BUGnjp8Q.js";
 export {
-  k as Badge,
-  w as Banner,
-  A as Button,
   s as ButtonComponent,
-  F as Checkbox,
   t as Message,
   r as MessageBubble,
   n as MessageMachineRenderer,
-  j as Multiselect,
-  q as MultiselectWithSections,
   o as Overlay,
-  c as OverlayConfirmModal,
-  l as OverlayContent,
-  i as OverlayContext,
-  h as OverlayCoverFrame,
-  u as OverlayHeader,
-  b as OverlayWebviewFrame,
-  P as Select,
-  R as SelectWithSections,
-  z as Slider,
-  D as Spinner,
-  E as Switch,
-  G as Tag,
-  J as TextArea,
-  K as TextInput,
-  L as Tooltip,
-  W as TypingIndicator,
-  v as WebchatApp,
-  p as WebchatContainer,
+  b as OverlayConfirmModal,
+  c as OverlayContent,
+  h as OverlayContext,
+  u as OverlayCoverFrame,
+  v as OverlayHeader,
+  W as OverlayWebviewFrame,
+  l as TypingIndicator,
+  y as WebchatApp,
+  O as WebchatContainer,
   d as WebchatHeader,
-  y as WebchatInput,
-  O as WebchatMessages,
-  C as WebchatProvider,
+  i as WebchatInput,
+  C as WebchatMessages,
+  p as WebchatProvider,
   M as useOverlay,
   g as useOverlayContext,
-  x as useOverlayHeader,
-  S as useWebchatContainer,
-  m as useWebchatContext,
-  B as useWebchatHeader,
-  T as useWebchatInput,
-  f as useWebchatMessages,
-  H as useWebchatState
+  m as useOverlayHeader,
+  x as useWebchatContainer,
+  H as useWebchatContext,
+  f as useWebchatHeader,
+  B as useWebchatInput,
+  I as useWebchatMessages,
+  F as useWebchatState
 };

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

@@ -14,6 +14,11 @@ export interface WebchatAppProps extends Omit<WebchatStateProps, 'customMessages
     title?: string;
     /** Placeholder text for input */
     placeholder?: string;
+    /**
+     * When true, shows "Powered by Hubtype" under the input.
+     * Can also be set via WebchatTrigger `webchatConfig.showBranding`. Default: true.
+     */
+    showBranding?: boolean;
     /** Custom messages registry */
     customMessages?: Record<string, React.ComponentType<any>>;
     /** Cover components registry */
@@ -38,4 +43,4 @@ export interface WebchatAppProps extends Omit<WebchatStateProps, 'customMessages
  * />
  * ```
  */
-export declare function WebchatApp({ appId, isOpen, onClose, onControllerReady, title, placeholder, customMessages, avatarConfig, coverRegistry, ...restConfig }: WebchatAppProps): import("react/jsx-runtime").JSX.Element;
+export declare function WebchatApp({ appId, isOpen, onClose, onControllerReady, title, placeholder, showBranding, customMessages, avatarConfig, coverRegistry, ...restConfig }: WebchatAppProps): import("react/jsx-runtime").JSX.Element;

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

@@ -28,4 +28,5 @@ export declare function useWebchatInput(props: WebchatInputProps, state: Webchat
         variant: "default";
         className: string | undefined;
     };
+    showBranding: boolean;
 };

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

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+export interface CustomScrollbarState {
+    thumbHeight: number;
+    thumbTop: number;
+    isVisible: boolean;
+    trackRef: RefObject<HTMLDivElement>;
+    thumbRef: RefObject<HTMLDivElement>;
+    onTrackMouseDown: (e: React.MouseEvent) => void;
+    onThumbMouseDown: (e: React.MouseEvent) => void;
+}
+export declare function useCustomScrollbar(scrollRef: RefObject<HTMLDivElement>): CustomScrollbarState;

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

@@ -62,6 +62,8 @@ export interface WebchatInputProps extends BaseWebchatProps {
     placeholder?: string;
     variant?: 'default';
     disabled?: boolean;
+    /** When true, shows the "Powered by Hubtype" line below the input. Default: true. */
+    showBranding?: boolean;
 }
 export interface WebchatHeaderProps extends BaseWebchatProps {
     title?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/webchat-react",
-  "version": "2.23.2",
+  "version": "2.25.0",
   "type": "module",
   "types": "./index.d.ts",
   "module": "./index.js",
@@ -19,8 +19,6 @@
     "./styles.css": "./styles.css"
   },
   "dependencies": {
-    "@lilara/foundations": ">=0.3.1",
-    "@lilara/ui-web-react": ">=0.3.1",
     "class-variance-authority": "^0.7.0",
     "react-aria": "3.33.1",
     "@xstate/react": "^5.0.4"
@@ -28,8 +26,8 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@botonic/webchat-core": "2.23.2",
-    "@botonic/shared": "2.23.2"
+    "@botonic/webchat-core": "2.25.0",
+    "@botonic/shared": "2.25.0"
   },
   "publishConfig": {
     "access": "public"