whatsapp-ui-react 0.0.3 → 0.0.5

package/README.md

@@ -1,6 +1,16 @@
 # whatsapp-ui-react
 
-React component library with a WhatsApp‑Web–inspired UI. Some components are still placeholders and may not be fully functional yet.
+A React component library that provides a chat window interface inspired by the design and interaction patterns of WhatsApp Web.
+
+**Notice:** Some components are still placeholders and may not be fully functional; breaking changes may occur between releases.
+
+## Goal
+
+This library was created to better understand WhatsApp's design system and interaction patterns. It is intended purely for educational purposes, including studying UI architecture, component composition, and interaction modeling. **It is not intended to be an official client or production-ready replacement.**
+
+## Disclaimer
+
+This project is not affiliated, associated, authorized, endorsed by, or in any way officially connected with WhatsApp or any of its subsidiaries or its affiliates. The official WhatsApp website can be found at whatsapp.com. "WhatsApp" as well as related names, marks, emblems and images are registered trademarks of their respective owners.
 
 ## Install
 
@@ -12,67 +22,87 @@ npm install whatsapp-ui-react
 
 ## Setup
 
-Import the component styles into your CSS entry point:
-
 ```css
+/* global.css */
 @import 'tailwindcss';
-@import 'whatsapp-ui-react/styles';
+@import 'whatsapp-ui-react/css/dark.css';
+@import 'whatsapp-ui-react/css/preset.css';
+```
+
+Use `light.css` instead for a light theme:
+
+```css
+@import 'whatsapp-ui-react/css/light.css';
 ```
 
 ## Usage
 
 ### Chat
 
+<!--prettier-ignore-->
 ```tsx
-import { Chat } from 'whatsapp-ui-react'
-;<Chat name="Alice" subtitle="online" />
+import { Chat } from 'whatsapp-ui-react';
+<Chat name="Alice" subtitle="online" />
 ```
 
 ### Messages
 
+<!--prettier-ignore-->
 ```tsx
-import { Chat, Message, Text } from 'whatsapp-ui-react'
-import type { GroupedMessage } from 'whatsapp-ui-react'
-
-const history: GroupedMessage[] = [
-  {
-    id: '1',
-    senderId: 'alice',
-    timestamp: new Date(),
-    node: (
-      <Message direction="in" mode="neutral" time="09:41">
-        <Text content="Hey! 👋" />
-      </Message>
-    ),
-  },
-]
+import { Chat, History, Message, Text } from 'whatsapp-ui-react';
+
+<Chat name="Alice">
+  <History>
+    <Message direction="in" senderId="alice" timestamp="2026-03-03T09:41:00Z" mode="neutral" time="09:41">
+      <Text content="Hey! 👋" />
+    </Message>
+    <Message direction="out" senderId="me" timestamp="2026-03-03T09:42:00Z" mode="neutral" time="09:42" status="read">
+      <Text content="Hi! How are you?" />
+    </Message>
+  </History>
+</Chat>
+```
+
+### Animated messages
 
-<Chat name="Alice" messageHistory={history} />
+<!--prettier-ignore-->
+```tsx
+import { Chat, History, Message, Text, Animated } from 'whatsapp-ui-react';
+
+<Chat name="Support Bot">
+  <History>
+    <Animated delay={1500}>
+      <Message direction="in" senderId="bot" timestamp="2026-03-03T09:00:00Z" mode="neutral" time="09:00">
+        <Text content="Hello! How can I help you?" />
+      </Message>
+    </Animated>
+  </History>
+</Chat>
 ```
 
 ### Content types
 
-| Component    | Description                   |
-| ------------ | ----------------------------- |
-| `<Text>`     | Plain text                    |
-| `<Image>`    | Image with optional caption   |
-| `<Video>`    | Video with thumbnail          |
-| `<Audio>`    | Audio file attachment         |
-| `<Voice>`    | Voice message with waveform   |
-| `<Sticker>`  | Sticker (frameless image)     |
-| `<Gif>`      | Animated GIF                  |
-| `<File>`     | Generic file attachment       |
-| `<Contact>`  | Contact card                  |
-| `<Location>` | Location pin with map preview |
-| `<Poll>`     | Poll with options             |
-| `<Emoji>`    | Large emoji message           |
-| `<Event>`    | Event card                    |
+| Component    | Description                   | Implemented |
+| ------------ | ----------------------------- | ----------- |
+| `<Text>`     | Plain text                    | ✅          |
+| `<Image>`    | Image with optional caption   |             |
+| `<Video>`    | Video with thumbnail          |             |
+| `<Audio>`    | Audio file attachment         | ✅          |
+| `<Voice>`    | Voice message with waveform   | ✅          |
+| `<Sticker>`  | Sticker (frameless image)     | ✅          |
+| `<Gif>`      | Animated GIF                  |             |
+| `<File>`     | Generic file attachment       |             |
+| `<Contact>`  | Contact card                  |             |
+| `<Location>` | Location pin with map preview |             |
+| `<Poll>`     | Poll with options             |             |
+| `<Emoji>`    | Large emoji message           |             |
+| `<Event>`    | Event card                    |             |
 
 ### Reply rules
 
 Automated replies that fire when an incoming message matches a trigger:
 
-<!-- prettier-ignore -->
+<!--prettier-ignore-->
 ```tsx
 import { Chat, Message, Text, Reply } from 'whatsapp-ui-react';
 
@@ -108,27 +138,60 @@ Set `locked` to disable sending while still allowing typing:
 <Chat name="Read-only" locked />
 ```
 
+## `<History>` props
+
+| Prop        | Type        | Default | Description                                                                                      |
+| ----------- | ----------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `children`  | `ReactNode` |         | `<Message>` elements, optionally wrapped in `<Animated>`. Anything else is passed through as-is. |
+| `className` | `string`    |         | Additional CSS class names applied to the wrapper element                                        |
+
+## `<Animated>` props
+
+| Prop        | Type        | Default | Description                                               |
+| ----------- | ----------- | ------- | --------------------------------------------------------- |
+| `delay`     | `number`    | `0`     | Milliseconds from mount until the content fades in        |
+| `children`  | `ReactNode` |         | Content to reveal                                         |
+| `className` | `string`    |         | Additional CSS class names applied to the wrapper element |
+
+## `<Message>` props
+
+| Prop         | Type                                           | Default    | Description                                                                                          |
+| ------------ | ---------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------- |
+| `direction`  | `'in' \| 'out'`                                |            | Received (`'in'`) or sent (`'out'`) message                                                          |
+| `mode`       | `'neutral' \| 'free' \| 'custom'`              | `'custom'` | Layout mode: `'neutral'` overlays the timestamp; `'free'` floats it below; `'custom'` is unwrapped   |
+| `top`        | `boolean`                                      | `false`    | First message in a consecutive run - renders the bubble tail. Injected automatically by `<History>`. |
+| `group`      | `boolean`                                      | `false`    | Group chat mode - shows sender avatar when `top` is `true`                                           |
+| `avatarUrl`  | `string`                                       |            | Sender avatar URL (group chats)                                                                      |
+| `senderName` | `string`                                       |            | Sender display name (group chats)                                                                    |
+| `time`       | `string`                                       |            | Formatted time string shown in the bubble footer                                                     |
+| `status`     | `'sending' \| 'sent' \| 'delivered' \| 'read'` |            | Delivery status icon (outgoing messages only)                                                        |
+| `senderId`   | `string`                                       |            | Identifies the sender; used by `<History>` for grouping. No visual effect.                           |
+| `timestamp`  | `string \| Date`                               |            | ISO string or `Date` for the message time; used by `<History>` for day dividers. No visual effect.   |
+| `className`  | `string`                                       |            | Additional CSS class names applied to the root element                                               |
+
 ## `<Chat>` props
 
-| Prop                 | Type                  | Default              | Description                                                                                                                              |
-| -------------------- | --------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`               | `string`              |                      | Contact or group name                                                                                                                    |
-| `avatarUrl`          | `string`              |                      | Avatar image URL                                                                                                                         |
-| `subtitle`           | `string`              |                      | Status text below the name                                                                                                               |
-| `messageHistory`     | `GroupedMessage[]`    | `[]`                 | Initial message list                                                                                                                     |
-| `showInputfield`     | `boolean`             | `true`               | Show / hide the input bar                                                                                                                |
-| `locked`             | `boolean`             | `false`              | Allow typing but disable sending                                                                                                         |
-| `inputPlaceholder`   | `string`              | `'Enter a message.'` | Textarea placeholder                                                                                                                     |
-| `inputValue`         | `string`              |                      | Controlled input value                                                                                                                   |
-| `defaultInputValue`  | `string`              |                      | Uncontrolled initial value                                                                                                               |
-| `onInputValueChange` | `(v: string) => void` |                      | Called on every keystroke                                                                                                                |
-| `onSendMessage`      | `(v: string) => void` |                      | Called when a message is sent                                                                                                            |
-| `onReply`            | `ReactNode`           |                      | `<Reply>` rules rendered inside the chat context                                                                                         |
-| `background`         | `string \| null`      | background image     | Message area background. Hex color string for a solid fill; `null` or `'none'` for plain `#0a0a0a`; omit to use the default tiled image. |
-| `onEmojiClick`       | `() => void`          |                      | Emoji button click handler                                                                                                               |
-| `onAttachClick`      | `() => void`          |                      | Attach button click handler                                                                                                              |
-| `onMicClick`         | `() => void`          |                      | Mic button click handler                                                                                                                 |
+| Prop                 | Type                              | Default              | Description                                                                                                                              |
+| -------------------- | --------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`               | `string`                          |                      | Contact or group name                                                                                                                    |
+| `avatarUrl`          | `'online' \| 'typeing' \| string` |                      | Avatar image URL                                                                                                                         |
+| `subtitle`           | `string`                          |                      | Status text below the name                                                                                                               |
+| `children`           | `ReactNode`                       |                      | Static content rendered at the top of the message area. Typically a `<History>` component.                                               |
+| `showInputfield`     | `boolean`                         | `true`               | Show / hide the input bar                                                                                                                |
+| `locked`             | `boolean`                         | `false`              | Allow typing but disable sending                                                                                                         |
+| `inputPlaceholder`   | `string`                          | `'Enter a message.'` | Textarea placeholder                                                                                                                     |
+| `inputValue`         | `string`                          |                      | Controlled input value (use with `onInputValueChange`)                                                                                   |
+| `defaultInputValue`  | `string`                          |                      | Uncontrolled initial value (internal state managed by component)                                                                         |
+| `onInputValueChange` | `(v: string) => void`             |                      | Called on every keystroke                                                                                                                |
+| `onSendMessage`      | `(v: string) => void`             |                      | Called when a message is sent                                                                                                            |
+| `onReply`            | `ReactNode`                       |                      | `<Reply>` rules rendered inside the chat context                                                                                         |
+| `background`         | `string \| null`                  | background image     | Message area background. Hex color string for a solid fill; `null` or `'none'` for plain `#0a0a0a`; omit to use the default tiled image. |
+| `onEmojiClick`       | `() => void`                      |                      | Emoji button click handler                                                                                                               |
+| `onAttachClick`      | `() => void`                      |                      | Attach button click handler                                                                                                              |
+| `onCameraClick`      | `() => void`                      |                      | Camera button click handler                                                                                                              |
+| `onMicClick`         | `() => void`                      |                      | Mic button click handler                                                                                                                 |
+| `theme`              | `'dark' \| 'light'`               |                      | Sets `data-wa-theme` theme for the chat                                                                                                  |
 
 ## License
 
-Apache-2.0 © [2hoch1](https://github.com/2hoch1)
+This project is licensed under the Apache License 2.0.

package/dist/components/Animated/Animated.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+/** Props for the {@link Animated} component. */
+export interface AnimatedProps {
+    /** Delay in milliseconds from mount until the content fades in. @defaultValue `0` */
+    delay?: number;
+    /** Content to reveal. */
+    children: React.ReactNode;
+    /** Additional CSS class names applied to the wrapper element. */
+    className?: string;
+}
+/**
+ * Reveals children with a fade-in transition after `delay` ms from mount.
+ * Returns an empty fragment until the delay fires, so hidden content takes no space.
+ */
+declare function Animated({ delay, children, className }: AnimatedProps): React.JSX.Element;
+export { Animated };
+//# sourceMappingURL=Animated.d.ts.map

package/dist/components/Animated/Animated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Animated.d.ts","sourceRoot":"","sources":["../../../src/components/Animated/Animated.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,gDAAgD;AAChD,MAAM,WAAW,aAAa;IAC5B,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,iBAAS,QAAQ,CAAC,EAAE,KAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiCtF;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/Animated/index.d.ts

@@ -0,0 +1,3 @@
+export type * from './Animated';
+export { Animated } from './Animated';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Animated/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Animated/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/Chat/Chat.d.ts

@@ -15,12 +15,18 @@ export interface ChatProps {
     /** URL of the avatar image. Falls back to initials derived from `name` when omitted. */
     avatarUrl?: string;
     /** Secondary line displayed below `name` in the header (e.g. `"online"` or `"typing..."`). */
-    subtitle?: string;
-    /** Rendered in the message area when no messages exist yet and `messageHistory` is empty. */
+    subtitle?: 'online' | 'typing...' | string;
+    /**
+     * Static content rendered at the top of the message area. Typically a `<History>` component.
+     * Rendered unconditionally above any dynamically added messages.
+     */
     children?: React.ReactNode;
     /** Additional CSS class names applied to the root element. */
     className?: string;
-    /** Initial message list. Copied into internal state on mount; subsequent external changes are ignored. */
+    /**
+     * Initial message list. Copied into internal state on mount; subsequent external changes are ignored.
+     * @deprecated Pass a `<History>` as `children` instead.
+     */
     messageHistory?: GroupedMessage[];
     /** Controls visibility of the input bar. @defaultValue `true` */
     showInputfield?: boolean;
@@ -53,6 +59,12 @@ export interface ChatProps {
     onCameraClick?: () => void;
     /** Handler for the microphone button in the input bar. */
     onMicClick?: () => void;
+    /**
+     * Visual colour theme for the chat window.
+     * - `'dark'` (default): WhatsApp dark style.
+     * - `'light'`: WhatsApp light style.
+     */
+    theme?: 'dark' | 'light';
 }
 /**
  * Top-level chat component. Manages the message list state and composes

package/dist/components/Chat/Chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAKnD,2DAA2D;AAC3D,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,UAAU,EAAE,CAAC,OAAO,EAAE;QAAE,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAC5E;AAED,4CAA4C;AAC5C,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAA;IACZ,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0GAA0G;IAC1G,cAAc,CAAC,EAAE,cAAc,EAAE,CAAA;IACjC,iEAAiE;IACjE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iIAAiI;IACjI,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,sHAAsH;IACtH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,4GAA4G;IAC5G,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED;;;;;;GAMG;AACH,QAAA,MAAM,IAAI,8EA2HR,CAAA;AAEF,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAKnD,2DAA2D;AAC3D,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,UAAU,EAAE,CAAC,OAAO,EAAE;QAAE,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAC5E;AAED,4CAA4C;AAC5C,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAA;IACZ,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,MAAM,CAAA;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,EAAE,CAAA;IACjC,iEAAiE;IACjE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iIAAiI;IACjI,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,sHAAsH;IACtH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,4GAA4G;IAC5G,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACzB;AAED;;;;;;GAMG;AACH,QAAA,MAAM,IAAI,8EA0IR,CAAA;AAEF,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/Chat/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,gBAAgB;AAChB,UAAU,eAAe;IACvB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAA;IACZ,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4BhG;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,gBAAgB;AAChB,UAAU,eAAe;IACvB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAA;IACZ,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2BhG;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/History/History.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+/** Props for the {@link History} component. */
+export interface HistoryProps {
+    /** `<Message>` elements to render, optionally wrapped in `<Animated>`. Manual `<DayDivider>` elements are passed through unchanged. */
+    children?: React.ReactNode;
+    /** Additional CSS class names applied to the wrapper element. */
+    className?: string;
+}
+/**
+ * Renders a static chat history from JSX children.
+ * Automatically injects `top={true}` into the first message of each consecutive sender group,
+ * inserts `<DayDivider>` between calendar days, and shows a "Today" divider when the history is empty.
+ */
+declare function History({ children, className }: HistoryProps): React.JSX.Element;
+export { History };
+//# sourceMappingURL=History.d.ts.map

package/dist/components/History/History.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"History.d.ts","sourceRoot":"","sources":["../../../src/components/History/History.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,+CAA+C;AAC/C,MAAM,WAAW,YAAY;IAC3B,uIAAuI;IACvI,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgHzE;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/History/index.d.ts

@@ -0,0 +1,3 @@
+export type * from './History';
+export { History } from './History';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/History/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/History/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,WAAW,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/Message/Message.d.ts

@@ -4,23 +4,23 @@ import { MessageDirection, MessageStatus } from './MessageContext';
 export interface MessageProps {
     /** `'in'` for received messages, `'out'` for sent. */
     direction: MessageDirection;
-    /** First message in a consecutive run — renders the bubble tail. @defaultValue `false` */
+    /** First message in a consecutive run - renders the bubble tail. @defaultValue `false` */
     top?: boolean;
-    /** Part of a group chat — renders the sender avatar when `top` is `true`. @defaultValue `false` */
+    /** Part of a group chat - renders the sender avatar when `top` is `true`. @defaultValue `false` */
     group?: boolean;
     /** Sender avatar URL (group chats). */
     avatarUrl?: string;
     /** Sender display name (group chats). */
     senderName?: string;
-    /** Message content — typically one of the content components (`<Text>`, `<Image>`, etc.). */
+    /** Message content - typically one of the content components (`<Text>`, `<Image>`, etc.). */
     children: React.ReactNode;
     /** Additional CSS class names applied to the root element. */
     className?: string;
     /**
      * Layout mode.
-     * - `'neutral'` — standard bubble with overlaid timestamp
-     * - `'free'` — content fills the bubble, timestamp floats below
-     * - `'custom'` — children render directly with no wrapper
+     * - `'neutral'` - standard bubble with overlaid timestamp
+     * - `'free'` - content fills the bubble, timestamp floats below
+     * - `'custom'` - children render directly with no wrapper
      * @defaultValue `'custom'`
      */
     mode?: 'neutral' | 'free' | 'custom';
@@ -28,6 +28,17 @@ export interface MessageProps {
     time?: string;
     /** Delivery status icon shown on outgoing messages. */
     status?: MessageStatus;
+    /**
+     * Identifies the sender; used by `<History>` to group consecutive messages.
+     * Use `'me'` for the local user. Has no visual effect on its own.
+     */
+    senderId?: string;
+    /**
+     * ISO string or `Date` marking when the message was sent.
+     * Used by `<History>` to insert day-dividers and detect grouping boundaries.
+     * Has no visual effect on its own.
+     */
+    timestamp?: string | Date;
 }
 declare function Message({ direction, top, group, avatarUrl, senderName, children, className, mode, time, status, }: MessageProps): React.JSX.Element;
 export { Message };

package/dist/components/Message/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAIvE,+CAA+C;AAC/C,MAAM,WAAW,YAAY;IAC3B,sDAAsD;IACtD,SAAS,EAAE,gBAAgB,CAAA;IAC3B,0FAA0F;IAC1F,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,mGAAmG;IACnG,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6FAA6F;IAC7F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAA;IACpC,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB;AAED,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,GAAW,EACX,KAAa,EACb,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EACT,IAAe,EACf,IAAI,EACJ,MAAM,GACP,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6FlC;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAIvE,+CAA+C;AAC/C,MAAM,WAAW,YAAY;IAC3B,sDAAsD;IACtD,SAAS,EAAE,gBAAgB,CAAA;IAC3B,0FAA0F;IAC1F,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,mGAAmG;IACnG,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6FAA6F;IAC7F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAA;IACpC,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAED,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,GAAW,EACX,KAAa,EACb,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EACT,IAAe,EACf,IAAI,EACJ,MAAM,GACP,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6FlC;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/Message/MessageContext.d.ts

@@ -23,10 +23,7 @@ export interface MessageContextValue {
     status?: MessageStatus;
 }
 declare const MessageContext: React.Context<MessageContextValue>;
-/**
- * Returns the context provided by the nearest ancestor {@link Message}.
- * Use inside custom message content components.
- */
+/** Returns the context provided by the nearest ancestor `<Message>`. */
 declare function useMessage(): MessageContextValue;
 export { MessageContext, useMessage };
 //# sourceMappingURL=MessageContext.d.ts.map

package/dist/components/Message/MessageContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageContext.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,CAAA;AAE3C,8CAA8C;AAC9C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAA;AAErE,+CAA+C;AAC/C,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,OAAO,GACP,KAAK,GACL,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,CAAA;AAEZ,iEAAiE;AACjE,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,SAAS,EAAE,gBAAgB,CAAA;IAC3B,gGAAgG;IAChG,GAAG,EAAE,OAAO,CAAA;IACZ,wFAAwF;IACxF,KAAK,EAAE,OAAO,CAAA;IACd,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uBAAuB;IACvB,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB;AAED,QAAA,MAAM,cAAc,oCAIlB,CAAA;AAEF;;;GAGG;AACH,iBAAS,UAAU,IAAI,mBAAmB,CAEzC;AAED,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"MessageContext.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,CAAA;AAE3C,8CAA8C;AAC9C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAA;AAErE,+CAA+C;AAC/C,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,OAAO,GACP,KAAK,GACL,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,CAAA;AAEZ,iEAAiE;AACjE,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,SAAS,EAAE,gBAAgB,CAAA;IAC3B,gGAAgG;IAChG,GAAG,EAAE,OAAO,CAAA;IACZ,wFAAwF;IACxF,KAAK,EAAE,OAAO,CAAA;IACd,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uBAAuB;IACvB,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB;AAED,QAAA,MAAM,cAAc,oCAIlB,CAAA;AAEF,wEAAwE;AACxE,iBAAS,UAAU,IAAI,mBAAmB,CAEzC;AAED,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/Message/Voice/Waveform.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 export declare const CANVAS_WIDTH = 200;
 /** @internal */
 export interface WaveformProps {
-    /** Amplitude bars to render — array of `BAR_COUNT` values in the range `0`–`10`. */
+    /** Amplitude bars to render - array of `BAR_COUNT` values in the range `0`–`10`. */
     bars: number[];
     /** Playback progress in the range `0`–`1`; determines the played/unplayed colour split. */
     progress: number;

package/dist/components/Message/Voice/Waveform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Waveform.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/Voice/Waveform.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,eAAO,MAAM,YAAY,MAAM,CAAA;AAW/B,gBAAgB;AAChB,MAAM,WAAW,aAAa;IAC5B,oFAAoF;IACpF,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,2FAA2F;IAC3F,QAAQ,EAAE,MAAM,CAAA;IAChB,kFAAkF;IAClF,KAAK,EAAE,OAAO,CAAA;IACd,8EAA8E;IAC9E,SAAS,EAAE,OAAO,CAAA;IAClB,+FAA+F;IAC/F,IAAI,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC;AAED,iBAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8D9F;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"Waveform.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/Voice/Waveform.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,eAAO,MAAM,YAAY,MAAM,CAAA;AAc/B,gBAAgB;AAChB,MAAM,WAAW,aAAa;IAC5B,oFAAoF;IACpF,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,2FAA2F;IAC3F,QAAQ,EAAE,MAAM,CAAA;IAChB,kFAAkF;IAClF,KAAK,EAAE,OAAO,CAAA;IACd,8EAA8E;IAC9E,SAAS,EAAE,OAAO,CAAA;IAClB,+FAA+F;IAC/F,IAAI,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC;AAED,iBAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA0D9F;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/hooks/useMessages.d.ts

@@ -1,13 +1,7 @@
 import { GroupedMessage } from '../utils/groupMessages';
 /**
- * Event-listener hook — calls `callback` for every new message that arrives
- * in the nearest <Chat>.
- *
- * Must be rendered inside a component that is a descendant of <Chat>
- * (i.e. inside the `onReply` prop or any other child rendered in context).
- *
- * @example
- * useMessages(msg => console.log(msg.senderId, msg.node))
+ * Calls `callback` for every new message that arrives in the nearest `<Chat>`.
+ * Must be rendered as a descendant of `<Chat>` (e.g. via the `onReply` prop).
  */
 export declare function useMessages(callback: (message: GroupedMessage) => void): void;
 //# sourceMappingURL=useMessages.d.ts.map

package/dist/hooks/useMessages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMessages.d.ts","sourceRoot":"","sources":["../../src/hooks/useMessages.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAI3D;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,GAAG,IAAI,CAW7E"}
+{"version":3,"file":"useMessages.d.ts","sourceRoot":"","sources":["../../src/hooks/useMessages.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAI3D;;;GAGG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,GAAG,IAAI,CAW7E"}