@botonic/webchat-react 2.35.0 → 2.37.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 2.37.0 (2026-09-03)
+
+This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
+
+## 2.36.0 (2026-09-02)
+
+### 🚀 Features
+
+- ts6 typecheck pass ([#1090](https://github.com/metis-ai/hubtype-product/pull/1090))
+
+### ❤️ Thank You
+
+- Oriol Raventós @Iru89
+
 ## 2.35.0 (2026-08-03)
 
 ### 🚀 Features

package/lib/components/preview-events/hooks/use-knowledge-base-info.d.ts

@@ -1,4 +1,4 @@
-import { ChunkIdsGroupedBySourceData, HubtypeChunk, HubtypeSource, PreviewUtils } from '@botonic/shared';
+import { ChunkIdsGroupedBySourceData, HubtypeSource, PreviewUtils } from '@botonic/shared';
 import { default as React } from 'react';
 interface UseKnowledgeBaseInfoParams {
     sourceIds: string[];

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

@@ -12,6 +12,6 @@ export declare function usePreviewEventMessage({ debugEvent, messageId, previewU
     eventConfig: DebugEventConfig | undefined;
     wrapperRef: React.RefObject<HTMLDivElement>;
     messageId: string | undefined;
-    previewUtils: PreviewUtils | undefined;
+    previewUtils: any;
     handleContainerClick: (e: React.MouseEvent) => void;
 };

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

@@ -11,57 +11,7 @@ export declare function useWebchatMessages(props: WebchatMessagesProps, state: W
         style?: import('react').CSSProperties;
     };
     messageListProps: {
-        messageActors: import('xstate').ActorRef<import('xstate').MachineSnapshot<{
-            message: import('@botonic/webchat-core').WebchatMessage;
-            user: import('@botonic/shared').HubtypeUser;
-            status: import('@botonic/webchat-core').WebchatMessageStatus;
-            file?: File;
-            postMessageActor?: any;
-        }, {
-            type: "RETRY";
-        } | {
-            type: "UPDATE_MESSAGE_INFO";
-            message: {
-                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, {
-            states: {
-                readonly checkStatus: {};
-                readonly sending: {};
-                readonly idle: {};
-                readonly performingPostback: {};
-                readonly errorSendingMessage: {};
-            };
-        }>, {
-            type: "RETRY";
-        } | {
-            type: "UPDATE_MESSAGE_INFO";
-            message: {
-                id: string;
-                data: Record<string, string>;
-            };
-        } | {
-            type: "UPDATE_CUSTOM_PROPS";
-            props: Record<string, unknown>;
-        } | {
-            type: "BUTTON_CLICKED";
-            button: import('@botonic/shared').BotonicButtonContent;
-        }, {
-            type: "PERSISTENCE.SAVE_MESSAGE";
-        } | {
-            type: "WEBVIEW.OPEN";
-            url: string;
-            title: string;
-        }>[];
+        messageActors: any[];
         isTyping: any;
         hasUserInteracted: boolean;
         customMessageRenderer: undefined;

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

@@ -1,4 +1,3 @@
-import { WebchatController } from '@botonic/webchat-core';
 import { default as React } from 'react';
 import { WebchatStateProps } from '../../hooks/use-webchat-state';
 export interface WebchatProviderProps extends WebchatStateProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/webchat-react",
-  "version": "2.35.0",
+  "version": "2.37.0",
   "type": "module",
   "types": "./index.d.ts",
   "module": "./index.js",
@@ -30,9 +30,9 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@botonic/webchat-core": "2.35.0",
-    "@botonic/shared": "2.35.0",
-    "@lilara/ui-web-react": ">=0.11.1"
+    "@botonic/webchat-core": "2.37.0",
+    "@botonic/shared": "2.37.0",
+    "@lilara/ui-web-react": ">=0.11.2"
   },
   "publishConfig": {
     "access": "public"

package/CLAUDE.md

@@ -1,174 +0,0 @@
----
-description: webchat-react conventions — hook/component split, CSS layers, webchat tokens, message components, inline SVGs, and animation patterns
-globs: libs/botonic/webchat-react/**
-alwaysApply: false
----
-
-# webchat-react
-
-Conventions specific to `libs/botonic/webchat-react`. Base rules in the root `CLAUDE.md` apply here too.
-
-## Hook / Component Split
-
-Every non-trivial component is split into:
-
-- **`use-[component].ts`** — all state, refs, callbacks, derived values; returns named prop bundles
-- **`[component].tsx`** — pure render only; spreads prop bundles from the hook
-
-```
-webchat-input/
-├── use-webchat-input.ts
-├── webchat-input.tsx
-├── webchat-input.module.css
-├── webchat-input.spec.tsx
-└── index.ts
-```
-
-**Before touching any component, check:**
-
-1. Does a `use-[component].ts` already exist? If not, create it as part of your change.
-2. Is all state, refs, callbacks, and derived values in the hook — not in the `.tsx` file?
-3. Does the `.tsx` file only render — no `useState`, `useRef`, `useCallback`, or business logic?
-
-Violating this in a PR is a blocker. When adding a feature or fixing a bug in a component that lacks a hook, refactor it in the same PR.
-
-Hook return shape uses named bundles, not flat props:
-
-```ts
-return {
-  inputProps: { value, onChange: handleChange, onKeyDown: handleKeyDown },
-  primaryActionProps: { onClick: handleSubmit, 'aria-label': submitLabel },
-  variants: { isDisabled, hasError, isEmpty },
-}
-```
-
-## CSS Layers
-
-The cascade stack, from lowest to highest priority:
-
-| Layer                       | Who writes it             | Purpose                                                      |
-| --------------------------- | ------------------------- | ------------------------------------------------------------ |
-| `@layer components`         | webchat-react             | Base component styles                                        |
-| `@layer component-variants` | webchat-react             | Visual variants of components (e.g. different bubble styles) |
-| `@layer overrides`          | `webchat-tokens.css` only | Library-default token values                                 |
-| _(unlayered)_               | Bot app consumers         | Final consumer customizations — always wins                  |
-
-**Component styles → `@layer components`.**
-
-```css
-@layer components {
-  .documentMessage {
-    width: auto;
-  }
-}
-```
-
-**CSS animations:** declare `@keyframes` outside any layer (global scope), use them inside `@layer components`. Add `@media (prefers-reduced-motion: reduce)` outside any layer too.
-
-**Token default values → `@layer overrides`** in `webchat-tokens.css` only. Bot apps override tokens with unlayered CSS in their own `webchat-tokens-overrides.css`.
-
-```css
-/* webchat-tokens.css */
-@layer overrides {
-  :root {
-    --webchat-input-bg: var(--lilara-surface-foreground);
-    --webchat-send-button-color: var(--lilara-primary-500);
-  }
-}
-```
-
-> **Never add end-consumer override CSS in library code.** The `@layer overrides` in `webchat-tokens.css` is for library defaults only. Bot apps write their own overrides in `webchat-tokens-overrides.css`.
-
-## Webchat Tokens (`--webchat-*`)
-
-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 semantic foundations token:
-
-```css
---webchat-input-bg: var(--lilara-surface-foreground);
---webchat-send-button-color: var(--lilara-primary-500);
---webchat-bubble-bot-bg: var(--lilara-primary-50);
-```
-
-Prefer `--lilara-primary-*` / `--lilara-secondary-*` over raw `--lilara-color-purple-*` / `--lilara-color-aqua-*`.
-Prefer `--lilara-color-focus` over `--lilara-secondary-600` directly.
-
-## Message Components
-
-```
-components/message/[message-type]/
-├── [message-type]-message.tsx     # forwardRef, extends MessageProps
-├── [message-type]-message.module.css
-├── [message-type]-message.stories.tsx
-└── index.ts
-```
-
-See the `create-new-message-type` skill for the full step-by-step guide.
-
-## Inline SVGs
-
-No external icon library. Rules:
-
-1. Extract each SVG into a **React function component** in `webchat-input/icons/` (e.g. `play-icon.tsx`)
-2. Use `currentColor` for fill/stroke
-3. Set `role='img'` and `aria-hidden={true}` on decorative SVGs
-4. Import and render as `<PlayIcon />` — never inline SVG markup inside a component
-
-```tsx
-// Good — dedicated icon component
-// webchat-input/icons/play-icon.tsx
-export function PlayIcon() {
-  return (
-    <svg viewBox='0 0 24 24' fill='currentColor' role='img' aria-hidden={true}>
-      <polygon points='5,3 19,12 5,21' />
-    </svg>
-  )
-}
-
-// Good — import and use
-import { PlayIcon } from '../icons/play-icon'
-const MyButton = () => (
-  <button>
-    <PlayIcon />
-  </button>
-)
-
-// Bad — SVG inlined directly inside a component
-const MyButton = () => (
-  <button>
-    <svg viewBox='0 0 24 24'>...</svg>
-  </button>
-)
-```
-
-## Animations
-
-Prefer CSS keyframes over JS animation libraries. Define keyframes **outside any layer**, use them inside `@layer component-variants`. Always add `prefers-reduced-motion`.
-
-```css
-@keyframes webchat-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@layer component-variants {
-  .messageEnter {
-    animation: webchat-fade-in var(--webchat-animation-duration, var(--lilara-transition-duration-fast)) var(--webchat-animation-easing, ease-out) both;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .messageEnter {
-    animation: none;
-  }
-}
-```
-
-See the `webchat-animations` skill for token naming conventions and keyframe architecture.