@konce-pt/react 0.12.0 → 0.14.0

package/dist/chat/llms.txt

@@ -6,13 +6,13 @@ Import: `import { KptChat } from '@konce-pt/react/chat';`
 
 ## DOM
     <div class="kpt-chat-host">
-      <p class="kpt-chat__offline" role="status">…</p>
+      <p class="kpt-chat__offline" role="status">...</p>
       <div class="kpt-chat__body">
         <div class="kpt-chat__viewport" role="log" aria-live="polite">
           <p class="kpt-chat__date" role="separator">Today</p>
-          <div class="kpt-chat-message-host">…</div>
-          <p class="kpt-chat__unread" role="separator">…</p>
-          <div class="kpt-chat-typing-host">…</div>
+          <div class="kpt-chat-message-host">...</div>
+          <p class="kpt-chat__unread" role="separator">...</p>
+          <div class="kpt-chat-typing-host">...</div>
         </div>
         <p class="kpt-chat__day" aria-hidden="true">Today</p>
         <button class="kpt-chat__jump">3 new messages</button>
@@ -20,31 +20,32 @@ Import: `import { KptChat } from '@konce-pt/react/chat';`
     </div>
 
 ## Props
-- `messages`: `KptChatMessage<T>[]` — **in chronological order**; the component does not sort
-- `currentUser`: string — the author id treated as "me"
+- `messages`: `KptChatMessage<T>[]` - **in chronological order**; the component does not sort
+- `currentUser`: string - the author id treated as "me"
 - `groupGapMs`: number (default `KPT_CHAT_GROUP_GAP_MS`, 5 min)
-- `unreadFrom`: string | null — the id of the first unread message
+- `unreadFrom`: string | null - the id of the first unread message
 - `offline`: boolean, `typing`: `KptChatAuthor[]`, `autoScroll`: boolean (default true)
-- `actions`: boolean — reply and react buttons on hover; `emptyLabel`: string
-- `reactionOptions`: `readonly KptChatReactionOption[]` (default `KPT_CHAT_REACTIONS`) — passed to the bubbles
-- `onRetry` / `onReply` — `(message) => void`; `onReact` — `(event: KptChatReactEvent) => void`
-  (`{ message, emoji }`); `onQuoted` — `(quote) => void`
-- `onLoadMore` — fired once when the viewport reaches the top, not on every scroll event
-- `renderMessage(message, row)` — the equivalent of `<ng-template let-message>`; it replaces the
+- `actions`: boolean - reply and react buttons on hover; `emptyLabel`: string
+- `reactionOptions`: `readonly KptChatReactionOption[]` (default `KPT_CHAT_REACTIONS`) - passed to the bubbles
+- `enterMotion`: `'spring' | 'fade' | 'none'` (default from `KptMotionProvider`, else `spring`) - see "Motion"
+- `onRetry` / `onReply` - `(message) => void`; `onReact` - `(event: KptChatReactEvent) => void`
+  (`{ message, emoji }`); `onQuoted` - `(quote) => void`
+- `onLoadMore` - fired once when the viewport reaches the top, not on every scroll event
+- `renderMessage(message, row)` - the equivalent of `<ng-template let-message>`; it replaces the
   bubble's text, and the bubble, its grouping and its meta row stay in place
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The composer is a sibling, not a slot
 A read-only conversation (an archive, a preview) should not have to carry a text field it never
 shows, so `KptChatComposer` is placed next to the list rather than inside it. The parent is what
-gives the list its height — `.kpt-chat-host` is a column flexbox with `min-height: 0`.
+gives the list its height - `.kpt-chat-host` is a column flexbox with `min-height: 0`.
 
 ## Transport stays in the application
 The component takes messages and only reports. Retrying a send is a status change the application
 makes; `mergeStatus()` from `@konce-pt/chat` is there for out-of-order acks.
 
 ## Bubble actions: reply and react
-`actions` puts two buttons beside the bubble. The arrow emits `onReply` with the message —
+`actions` puts two buttons beside the bubble. The arrow emits `onReply` with the message -
 `replyRefFrom()` from `@konce-pt/chat` turns it into the `replyTo` the composer's quote bar wants.
 The smiley opens a picker of five reactions (`KPT_CHAT_REACTIONS`) and emits `onReact` with the
 chosen emoji; `toggleReaction(message.reactions, emoji)` is the arithmetic that puts it in the
@@ -57,6 +58,20 @@ re-render and resize) the component measures the separators, the unread divider
 notices, hands the rectangles to `chatDayIndicator()` from `@konce-pt/chat` and swaps the pill's
 text; a centred label driving into the pill's band puts the pill out, never the content.
 
+## Motion
+`enterMotion` (`spring | fade | none`) on the chat, the bubble and the dock:
+- a new message at the bottom - your own grows from the composer side, someone else's comes in from
+  the sender's side, sharpening out of a blur; the first load and older messages loaded at the top
+  (`loadMore`) do not move - they are not news;
+- a new reaction pops in, a changed count rolls in like a drum, a new status icon turns into place
+  (only after the bubble's first render, so loaded history stays still);
+- the dock: `spring` grows the window out of the button (a capsule the size of the FAB opens into
+  the panel), `fade` slides and fades it as before.
+
+With no value it takes `enter` from `KptMotionProvider` (default `spring`); `enabled: false` and the system
+"reduce motion" setting always win. The typing dots are a state indicator - with motion off they
+pulse slower instead of stopping.
+
 ## Examples
     <KptChat messages={messages} currentUser="me" typing={typing} onRetry={resend} />
     <KptChat messages={messages} currentUser="me" offline unreadFrom="m-42" onLoadMore={loadOlder} />
@@ -81,7 +96,7 @@ read. Separators are `role="separator"` with a label. Auto-scroll uses `behavior
 The scrolling history (`role="log"`) is a Tab stop named "Conversation history" (`chat.history`), so the
 keyboard can scroll it even when no bubble holds a focusable element. The "new messages" button counts
 the messages that actually arrived (a batch of five gives "5"). The typing indicator sits inside the log
-but with `aria-live="off"`, so "X is typing…" is not announced like a message. Older messages loaded at
+but with `aria-live="off"`, so "X is typing..." is not announced like a message. Older messages loaded at
 the top keep the view on the same message, also in Safari (no `overflow-anchor`). The composer reports
 typing on the first keystroke and then at most every 3 s (`KPT_CHAT_TYPING_THROTTLE_MS`). A custom
-reaction option may carry `label` — its accessible name.
+reaction option may carry `label` - its accessible name.

package/dist/chat-composer/chat-composer.d.ts

@@ -1,7 +1,8 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type KptChatReplyRef } from '@konce-pt/chat';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
-/** Ładunek wysyłki. Kompozytor niczego nie wysyła — pakuje dane i oddaje aplikacji. */
+import { type KptSpeechColor } from '../speech/speech-button.tsx';
+/** Ładunek wysyłki. Kompozytor niczego nie wysyła - pakuje dane i oddaje aplikacji. */
 export interface KptChatComposerSubmit {
     text: string;
     files: readonly File[];
@@ -14,31 +15,40 @@ export interface KptChatComposerProps extends Omit<ComponentPropsWithRef<'div'>,
     /** Podpowiedź w pustym polu; bez niej etykieta ze słownika. */
     placeholder?: string;
     disabled?: boolean;
-    /** Brak połączenia — przycisk mówi o kolejkowaniu, nie o wysyłce. */
+    /** Brak połączenia - przycisk mówi o kolejkowaniu, nie o wysyłce. */
     offline?: boolean;
     allowAttachments?: boolean;
     /** Ile wierszy pole może urosnąć, zanim zacznie się przewijać. */
     maxRows?: number;
     enterToSend?: boolean;
+    /**
+     * Mikrofon do dyktowania (Web Speech API) między polem a przyciskiem wysyłki. Bez wsparcia
+     * przeglądarki się nie pokazuje. Wysyłka w trakcie dyktowania zatwierdza to, co widać w polu.
+     */
+    speech?: boolean;
+    /** Język dyktowania (BCP 47); bez niego z `KptI18nProvider`. */
+    speechLang?: string;
+    /** Kolor "stop" i fali w trakcie nasłuchu; domyślnie kolor motywu. */
+    speechColor?: KptSpeechColor;
     /** Wiadomość, na którą odpowiadamy. Po wysłaniu czyści się razem z treścią. */
     replyTo?: KptChatReplyRef | null;
     defaultReplyTo?: KptChatReplyRef | null;
     onReplyToChange?: (replyTo: KptChatReplyRef | null) => void;
     onSend?: (payload: KptChatComposerSubmit) => void;
     /**
-     * Sygnał „piszę” dla drugiej strony: przy pierwszym znaku, a w trakcie pisania najwyżej raz na
-     * `KPT_CHAT_TYPING_THROTTLE_MS` (3 s) — nie przy każdym znaku.
+     * Sygnał "piszę" dla drugiej strony: przy pierwszym znaku, a w trakcie pisania najwyżej raz na
+     * `KPT_CHAT_TYPING_THROTTLE_MS` (3 s) - nie przy każdym znaku.
      */
     onTyping?: () => void;
 }
 /**
- * Pole pisania wiadomości — autorosnące, z załącznikami i paskiem cytatu.
+ * Pole pisania wiadomości - autorosnące, z załącznikami i paskiem cytatu.
  *
  * `Enter` wysyła, `Shift+Enter` łamie linię (`enterToSend={false}` odwraca układ).
- * Przy `offline` przycisk zmienia etykietę na kolejkowanie — wiadomość dalej da się napisać
+ * Przy `offline` przycisk zmienia etykietę na kolejkowanie - wiadomość dalej da się napisać
  * i oddać aplikacji, bo to ona decyduje, co zrobić z kolejką.
  *
  * @example
  * <KptChatComposer allowAttachments onSend={(payload) => send(payload)} />
  */
-export declare function KptChatComposer({ value, defaultValue, onValueChange, placeholder, disabled, offline, allowAttachments, maxRows, enterToSend, replyTo, defaultReplyTo, onReplyToChange, onSend, onTyping, locale, dictionary, className, ...rest }: Readonly<KptChatComposerProps>): import("react").JSX.Element;
+export declare function KptChatComposer({ value, defaultValue, onValueChange, placeholder, disabled, offline, allowAttachments, maxRows, enterToSend, speech, speechLang, speechColor, replyTo, defaultReplyTo, onReplyToChange, onSend, onTyping, locale, dictionary, className, ...rest }: Readonly<KptChatComposerProps>): import("react").JSX.Element;

package/dist/chat-composer/chat-composer.js

@@ -7,17 +7,19 @@ import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
 import { KptIconButton } from "../icon-button/icon-button.js";
+import { KptSpeechButton } from "../speech/speech-button.js";
+import { useKptSpeechRecognition } from "../speech/use-speech-recognition.js";
 /**
- * Pole pisania wiadomości — autorosnące, z załącznikami i paskiem cytatu.
+ * Pole pisania wiadomości - autorosnące, z załącznikami i paskiem cytatu.
  *
  * `Enter` wysyła, `Shift+Enter` łamie linię (`enterToSend={false}` odwraca układ).
- * Przy `offline` przycisk zmienia etykietę na kolejkowanie — wiadomość dalej da się napisać
+ * Przy `offline` przycisk zmienia etykietę na kolejkowanie - wiadomość dalej da się napisać
  * i oddać aplikacji, bo to ona decyduje, co zrobić z kolejką.
  *
  * @example
  * <KptChatComposer allowAttachments onSend={(payload) => send(payload)} />
  */
-export function KptChatComposer({ value, defaultValue = '', onValueChange, placeholder = '', disabled = false, offline = false, allowAttachments = false, maxRows = 6, enterToSend = true, replyTo, defaultReplyTo = null, onReplyToChange, onSend, onTyping, locale, dictionary, className, ...rest }) {
+export function KptChatComposer({ value, defaultValue = '', onValueChange, placeholder = '', disabled = false, offline = false, allowAttachments = false, maxRows = 6, enterToSend = true, speech = false, speechLang, speechColor, replyTo, defaultReplyTo = null, onReplyToChange, onSend, onTyping, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [text, setText] = useControllableState({
         value,
@@ -32,9 +34,13 @@ export function KptChatComposer({ value, defaultValue = '', onValueChange, place
     const [files, setFiles] = useState([]);
     const fieldRef = useRef(null);
     const pickerRef = useRef(null);
-    /** Kiedy ostatnio zgłoszono „piszę” — dławienie `onTyping`. */
+    // Dyktowanie: tekst zatwierdzony wchodzi przez `onChange` pola - rośnie ono i zgłasza "piszę"
+    // jak przy klawiaturze. Bez `speech` kontroler nie tworzy sesji.
+    const mic = useKptSpeechRecognition({ enabled: speech, target: fieldRef, lang: speechLang, disabled });
+    /** Kiedy ostatnio zgłoszono "piszę" - dławienie `onTyping`. */
     const lastTyping = useRef(0);
-    const canSend = !disabled && (text.trim().length > 0 || files.length > 0);
+    // W trakcie dyktowania słowa mogą być jeszcze tylko tymczasowe - wysyłka i tak je zatwierdzi.
+    const canSend = !disabled && (text.trim().length > 0 || files.length > 0 || mic.listening);
     const sendLabel = offline ? t('chat.queue') : t('chat.send');
     /**
      * Wysokość liczona od treści. Zerowanie przed odczytem `scrollHeight` jest konieczne:
@@ -52,7 +58,14 @@ export function KptChatComposer({ value, defaultValue = '', onValueChange, place
     const submit = () => {
         if (!canSend)
             return;
-        onSend?.({ text: text.trim(), files, replyTo: quote });
+        // Tekst tymczasowy dyktowania widać w polu, ale nie ma go w stanie - `flush()` zatwierdza go
+        // synchronicznie przez zdarzenie `input`, więc DOM ma go od razu, a stan dopiero po renderze.
+        // Dlatego treść do wysyłki czytamy z pola: wysyła się dokładnie to, co widać.
+        mic.flush();
+        const current = (fieldRef.current?.value ?? text).trim();
+        if (!current && !files.length)
+            return;
+        onSend?.({ text: current, files, replyTo: quote });
         setText('');
         setFiles([]);
         setQuote(null);
@@ -80,11 +93,11 @@ export function KptChatComposer({ value, defaultValue = '', onValueChange, place
                                 } }), _jsx(KptIconButton, { size: "sm", disabled: disabled, "aria-label": t('chat.attach'), onClick: () => pickerRef.current?.click(), children: _jsx(KptIcon, { name: "paperclip" }) })] })) : null, _jsx("textarea", { ref: fieldRef, className: "kpt-chat-composer__field", rows: 1, style: { '--_max-rows': maxRows }, value: text, disabled: disabled, placeholder: placeholder || t('chat.placeholder'), "aria-label": placeholder || t('chat.placeholder'), onChange: (event) => {
                             setText(event.currentTarget.value);
                             grow(event.currentTarget);
-                            // „Piszę” przy pierwszym znaku i potem najwyżej raz na KPT_CHAT_TYPING_THROTTLE_MS — nie przy każdym.
+                            // "Piszę" przy pierwszym znaku i potem najwyżej raz na KPT_CHAT_TYPING_THROTTLE_MS - nie przy każdym.
                             const now = Date.now();
                             if (now - lastTyping.current >= KPT_CHAT_TYPING_THROTTLE_MS) {
                                 lastTyping.current = now;
                                 onTyping?.();
                             }
-                        }, onKeyDown: onKeyDown }), _jsx(KptIconButton, { variant: "filled", disabled: !canSend, "aria-label": sendLabel, onClick: submit, children: _jsx(KptIcon, { name: offline ? 'clock' : 'send' }) })] })] }));
+                        }, onKeyDown: onKeyDown }), speech ? (_jsx(KptSpeechButton, { listeningColor: speechColor, speech: mic, size: "sm", unsupported: "hide", disabled: disabled, hostProps: { className: 'kpt-chat-composer__speech' } })) : null, _jsx(KptIconButton, { variant: "filled", disabled: !canSend, "aria-label": sendLabel, onClick: submit, children: _jsx(KptIcon, { name: offline ? 'clock' : 'send' }) })] })] }));
 }

package/dist/chat-composer/llms.txt

@@ -1,12 +1,12 @@
 # KptChatComposer (@konce-pt/react/chat)
 
-The message field — auto-growing, with attachments and a quote strip.
+The message field - auto-growing, with attachments and a quote strip.
 Import: `import { KptChatComposer } from '@konce-pt/react/chat';`
 
 ## DOM
     <div class="kpt-chat-composer-host">
-      <div class="kpt-chat-composer__reply">…the quoted message…</div>
-      <ul class="kpt-chat-composer__files">…picked files…</ul>
+      <div class="kpt-chat-composer__reply">...the quoted message...</div>
+      <ul class="kpt-chat-composer__files">...picked files...</ul>
       <div class="kpt-chat-composer">
         <input type="file" class="kpt-chat-composer__picker" hidden />
         <!-- KptIconButton: attach -->
@@ -16,26 +16,26 @@ Import: `import { KptChatComposer } from '@konce-pt/react/chat';`
     </div>
 
 ## Props
-- `value` / `defaultValue` / `onValueChange` — the text
-- `replyTo` / `defaultReplyTo` / `onReplyToChange` — `KptChatReplyRef | null`
+- `value` / `defaultValue` / `onValueChange` - the text
+- `replyTo` / `defaultReplyTo` / `onReplyToChange` - `KptChatReplyRef | null`
 - `placeholder`, `disabled`, `offline`, `allowAttachments`
 - `maxRows`: number (default 6), `enterToSend`: boolean (default true)
-- `onSend(payload)` — `{ text, files, replyTo }`; the text is trimmed
-- `onTyping()` — every keystroke, for the "is typing" signal
+- `onSend(payload)` - `{ text, files, replyTo }`; the text is trimmed
+- `onTyping()` - every keystroke, for the "is typing" signal
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Enter sends, Shift+Enter breaks the line
-`enterToSend={false}` swaps the two. A keystroke arriving mid-composition (an IME) never sends —
+`enterToSend={false}` swaps the two. A keystroke arriving mid-composition (an IME) never sends -
 `isComposing` is checked, otherwise picking a candidate would fire the message.
 
 ## The height comes from the content
 The field grows with the text and then scrolls. The script sets `height` to `scrollHeight`, having
-zeroed it first — without that reset the field can only grow, because `scrollHeight` never drops
+zeroed it first - without that reset the field can only grow, because `scrollHeight` never drops
 below the height already set. The ceiling is CSS: `--_max-rows`.
 
 ## Offline does not lock the field
 The button changes its label to queueing and the payload still reaches `onSend`. What to do with a
-queue is the application's decision — the component has no transport to hold it back with.
+queue is the application's decision - the component has no transport to hold it back with.
 
 ## Examples
     <KptChatComposer allowAttachments onSend={send} />
@@ -51,6 +51,15 @@ The field `--kpt-color-surface-variant` + `--kpt-radius-lg`, the top edge `--kpt
 the quote strip `--kpt-color-primary`.
 
 ## Accessibility
-The textarea carries an `aria-label` equal to the placeholder — a field without a label is
+The textarea carries an `aria-label` equal to the placeholder - a field without a label is
 invisible to a screen reader. Both icon buttons are labelled from the dictionary. It is not a
 form control: no `touched`/`invalid` state, and the value disappears on send.
+
+## Dictation
+`speech`: boolean = false puts a microphone between the field and the send button (`KptSpeechButton`);
+`speechLang` sets the language and `speechColor` the listening colour (theme colour by default). Words appear in the field live. Enter or "Send" during dictation
+commits what is visible (`flush()`) and stops listening, so exactly the visible text is sent - the send
+button is enabled while listening even if only interim words exist. Final text comes through the
+field's `onChange`: the field grows and `onTyping` fires as with a keyboard.
+
+    <KptChatComposer speech onSend={({ text }) => askAgent(text)} />

package/dist/chat-dock/chat-dock.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import { type KptEnterMotion } from '@konce-pt/motion';
 export type KptChatDockPosition = 'bottom-end' | 'bottom-start';
 export interface KptChatDockProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
     open?: boolean;
@@ -15,17 +16,23 @@ export interface KptChatDockProps extends Omit<ComponentPropsWithRef<'div'>, 'ch
     width?: string;
     /**
      * Odsunięcie od rogu ekranu (dowolna długość CSS), wspólne dla obu osi.
-     * Domyślnie `--kpt-space-6`. Przydaje się, gdy w tym samym rogu stoi już inny widget —
+     * Domyślnie `--kpt-space-6`. Przydaje się, gdy w tym samym rogu stoi już inny widget -
      * `KptScrollTop` przykleja się dokładnie tam samo i bez tego oba się nakładają.
      */
     offset?: string;
     children?: ReactNode;
+    /**
+     * Ruch otwarcia: `spring` - okno wyrasta z przycisku (kapsuła rośnie w panel na sprężynie),
+     * `fade` - panel wjeżdża i się przenika, `none` - bez ruchu. Bez wartości bierze `enter`
+     * z `KptMotionProvider` (domyślnie `spring`); `enabled={false}` i systemowe "ogranicz ruch" wyłączają go zawsze.
+     */
+    enterMotion?: KptEnterMotion;
 }
 /**
- * Pływający czat w rogu ekranu — FAB z licznikiem nieprzeczytanych i panel z rozmową.
+ * Pływający czat w rogu ekranu - FAB z licznikiem nieprzeczytanych i panel z rozmową.
  *
  * Zawartość panelu jest dzieckiem, więc dock nie wie nic o wiadomościach: wkłada się do niego
- * `KptChat` i `KptChatComposer` (albo cokolwiek innego). Sam FAB to `KptFab` — dock go używa,
+ * `KptChat` i `KptChatComposer` (albo cokolwiek innego). Sam FAB to `KptFab` - dock go używa,
  * nie zastępuje.
  *
  * Poniżej `--kpt-breakpoint-sm` panel wchodzi na pełny ekran: 22,5 rem szerokości na telefonie
@@ -37,4 +44,4 @@ export interface KptChatDockProps extends Omit<ComponentPropsWithRef<'div'>, 'ch
  *   <KptChatComposer onSend={send} />
  * </KptChatDock>
  */
-export declare function KptChatDock({ open, defaultOpen, onOpenChange, position, unread, header, icon, width, offset, locale, dictionary, className, children, ...rest }: Readonly<KptChatDockProps>): import("react").JSX.Element;
+export declare function KptChatDock({ open, defaultOpen, onOpenChange, position, unread, header, icon, width, offset, enterMotion, locale, dictionary, className, children, ...rest }: Readonly<KptChatDockProps>): import("react").JSX.Element;

package/dist/chat-dock/chat-dock.js

@@ -8,11 +8,13 @@ import { KptBadge } from "../badge/badge.js";
 import { KptFab } from "../fab/fab.js";
 import { KptIcon } from "../icon/icon.js";
 import { KptIconButton } from "../icon-button/icon-button.js";
+import { resolveEnterMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 /**
- * Pływający czat w rogu ekranu — FAB z licznikiem nieprzeczytanych i panel z rozmową.
+ * Pływający czat w rogu ekranu - FAB z licznikiem nieprzeczytanych i panel z rozmową.
  *
  * Zawartość panelu jest dzieckiem, więc dock nie wie nic o wiadomościach: wkłada się do niego
- * `KptChat` i `KptChatComposer` (albo cokolwiek innego). Sam FAB to `KptFab` — dock go używa,
+ * `KptChat` i `KptChatComposer` (albo cokolwiek innego). Sam FAB to `KptFab` - dock go używa,
  * nie zastępuje.
  *
  * Poniżej `--kpt-breakpoint-sm` panel wchodzi na pełny ekran: 22,5 rem szerokości na telefonie
@@ -24,7 +26,8 @@ import { KptIconButton } from "../icon-button/icon-button.js";
  *   <KptChatComposer onSend={send} />
  * </KptChatDock>
  */
-export function KptChatDock({ open, defaultOpen = false, onOpenChange, position = 'bottom-end', unread = 0, header = '', icon = 'message-circle', width = '22.5rem', offset = '', locale, dictionary, className, children, ...rest }) {
+export function KptChatDock({ open, defaultOpen = false, onOpenChange, position = 'bottom-end', unread = 0, header = '', icon = 'message-circle', width = '22.5rem', offset = '', enterMotion, locale, dictionary, className, children, ...rest }) {
+    const motion = resolveEnterMotion(enterMotion, useKptMotion());
     const { t } = useKptMessages({ locale, dictionary });
     const [isOpen, setOpen] = useControllableState({
         value: open,
@@ -34,7 +37,7 @@ export function KptChatDock({ open, defaultOpen = false, onOpenChange, position
     const panelRef = useRef(null);
     const triggerRef = useRef(null);
     /*
-     * Fokus ląduje na polu pisania, jeśli w panelu jest — po to się czat otwiera.
+     * Fokus ląduje na polu pisania, jeśli w panelu jest - po to się czat otwiera.
      * Bez pola bierze pierwszy element interaktywny, a w ostateczności sam panel.
      */
     useEffect(() => {
@@ -55,7 +58,7 @@ export function KptChatDock({ open, defaultOpen = false, onOpenChange, position
         if (!isOpen)
             return;
         setOpen(false);
-        // Fokus wraca na FAB — po zamknięciu panelu nie może zostać na elemencie,
+        // Fokus wraca na FAB - po zamknięciu panelu nie może zostać na elemencie,
         // który przed chwilą zniknął z drzewa dostępności.
         triggerRef.current?.querySelector('button')?.focus();
     };
@@ -64,5 +67,5 @@ export function KptChatDock({ open, defaultOpen = false, onOpenChange, position
             close();
     };
     const fab = (_jsx(KptFab, { "aria-label": isOpen ? t('chat.close') : t('chat.open'), onClick: () => setOpen(!isOpen), children: _jsx(KptIcon, { name: isOpen ? 'x' : icon }) }));
-    return (_jsxs("div", { className: cn('kpt-chat-dock-host', className), onKeyDown: onKeyDown, ...rest, children: [_jsxs("div", { ref: panelRef, className: cn('kpt-chat-dock__panel', isOpen && 'is-open'), "data-position": position, role: "dialog", tabIndex: -1, style: { '--_width': width, ...(offset ? { '--_offset': offset } : {}) }, "aria-label": header || t('chat.open'), "aria-hidden": isOpen ? undefined : true, inert: !isOpen, children: [_jsxs("header", { className: "kpt-chat-dock__header", children: [_jsx("span", { className: "kpt-chat-dock__title", children: header }), _jsx(KptIconButton, { size: "sm", "aria-label": t('chat.close'), onClick: close, children: _jsx(KptIcon, { name: "x" }) })] }), _jsx("div", { className: "kpt-chat-dock__content", children: children })] }), _jsx("span", { ref: triggerRef, className: "kpt-chat-dock__trigger", "data-position": position, style: offset ? { '--_offset': offset } : undefined, children: unread > 0 ? (_jsx(KptBadge, { value: unread, variant: "danger", size: "sm", overlay: true, "aria-label": t('chat.unreadBadge', { count: unread }), children: fab })) : (fab) })] }));
+    return (_jsxs("div", { className: cn('kpt-chat-dock-host', className), onKeyDown: onKeyDown, ...rest, children: [_jsxs("div", { ref: panelRef, className: cn('kpt-chat-dock__panel', isOpen && 'is-open'), "data-position": position, "data-motion": motion, role: "dialog", tabIndex: -1, style: { '--_width': width, ...(offset ? { '--_offset': offset } : {}) }, "aria-label": header || t('chat.open'), "aria-hidden": isOpen ? undefined : true, inert: !isOpen, children: [_jsxs("header", { className: "kpt-chat-dock__header", children: [_jsx("span", { className: "kpt-chat-dock__title", children: header }), _jsx(KptIconButton, { size: "sm", "aria-label": t('chat.close'), onClick: close, children: _jsx(KptIcon, { name: "x" }) })] }), _jsx("div", { className: "kpt-chat-dock__content", children: children })] }), _jsx("span", { ref: triggerRef, className: "kpt-chat-dock__trigger", "data-position": position, style: offset ? { '--_offset': offset } : undefined, children: unread > 0 ? (_jsx(KptBadge, { value: unread, variant: "danger", size: "sm", overlay: true, "aria-label": t('chat.unreadBadge', { count: unread }), children: fab })) : (fab) })] }));
 }

package/dist/chat-dock/llms.txt

@@ -1,6 +1,6 @@
 # KptChatDock (@konce-pt/react/chat)
 
-A floating chat in the corner of the screen — a FAB with an unread badge plus a panel holding the
+A floating chat in the corner of the screen - a FAB with an unread badge plus a panel holding the
 conversation.
 Import: `import { KptChatDock } from '@konce-pt/react/chat';`
 
@@ -11,31 +11,32 @@ Import: `import { KptChatDock } from '@konce-pt/react/chat';`
           <span class="kpt-chat-dock__title">Support</span>
           <!-- KptIconButton: close -->
         </header>
-        <div class="kpt-chat-dock__content">…children…</div>
+        <div class="kpt-chat-dock__content">...children...</div>
       </div>
       <span class="kpt-chat-dock__trigger" data-position="bottom-end">
-        <!-- KptBadge overlay → KptFab -->
+        <!-- KptBadge overlay -> KptFab -->
       </span>
     </div>
 
 ## Props
-- `open` / `defaultOpen` / `onOpenChange` — works controlled and uncontrolled
+- `open` / `defaultOpen` / `onOpenChange` - works controlled and uncontrolled
 - `position`: `'bottom-end' | 'bottom-start'` (logical, so RTL flips the corner on its own)
-- `unread`: number — 0 hides the badge; `header`: string
-- `icon`: string (default `message-circle`) — the closed FAB; open always shows a cross
-- `width`: string (default `22.5rem`) — above `--kpt-breakpoint-sm`
-- `offset`: string — distance from the corner, both axes (default `--kpt-space-6`)
-- `children` — the panel content
+- `unread`: number - 0 hides the badge; `header`: string
+- `icon`: string (default `message-circle`) - the closed FAB; open always shows a cross
+- `width`: string (default `22.5rem`) - above `--kpt-breakpoint-sm`
+- `offset`: string - distance from the corner, both axes (default `--kpt-space-6`)
+- `enterMotion`: `'spring' | 'fade' | 'none'` - `spring` grows the window out of the button, `fade` slides it in (default from `KptMotionProvider`, else `spring`)
+- `children` - the panel content
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The FAB is KptFab, not a copy of it
-The dock composes the existing components — `KptFab`, `KptBadge`, `KptIconButton` — so a change to
+The dock composes the existing components - `KptFab`, `KptBadge`, `KptIconButton` - so a change to
 the FAB reaches the chat as well. The content is `children`, which means the dock knows nothing
 about messages: put `KptChat` and `KptChatComposer` inside, or anything else.
 
 ## Sharing the corner with KptScrollTop
 `KptScrollTop` pins itself to the same spot with the same `--kpt-z-overlay`, and it would swallow the
-chat FAB whole — only the unread badge would stick out. The stylesheet resolves it by itself: when a
+chat FAB whole - only the unread badge would stick out. The stylesheet resolves it by itself: when a
 `bottom-end` dock is on the page, the scroll-top button steps **aside**, not up, because the
 conversation panel stands above the FAB. It applies to `bottom-end` only and measures from the
 default offset, so an application that sets `offset` positions the scroll-top button itself.
@@ -45,7 +46,7 @@ default offset, so an application that sets `offset` positions the scroll-top bu
 Dropped in the middle of an application's layout the dock takes no space in the flow.
 
 ## Closed is not removed
-The panel stays in the DOM with `visibility: hidden` and a delayed transition — a transition
+The panel stays in the DOM with `visibility: hidden` and a delayed transition - a transition
 cannot animate out of `display: none`. It also carries `inert` and `aria-hidden` while closed, so
 a hidden panel never catches the tab order.
 
@@ -55,7 +56,7 @@ a hidden panel never catches the tab order.
       <KptChatComposer onSend={send} />
     </KptChatDock>
 
-    <KptChatDock open={open} onOpenChange={setOpen} position="bottom-start" width="26rem">…</KptChatDock>
+    <KptChatDock open={open} onOpenChange={setOpen} position="bottom-start" width="26rem">...</KptChatDock>
 
 ## i18n
 `open`, `close`, `unreadBadge` (`{count}`) from the `chat` namespace.
@@ -65,7 +66,7 @@ The panel `--kpt-radius-lg` + `--kpt-elevation-3`, the corner offsets `--kpt-spa
 the stack `--kpt-z-overlay`.
 
 ## Accessibility
-Opening moves focus to the composer inside the panel — that is what the chat is opened for; with no
+Opening moves focus to the composer inside the panel - that is what the chat is opened for; with no
 field it takes the first interactive element. `Escape` closes and returns focus to the FAB, because
 focus must not stay on an element that just left the accessibility tree. Below 640px the panel goes
 full-screen.

package/dist/chat-entry/public-api.js

@@ -1,5 +1,5 @@
 /*
- * @konce-pt/react/chat — rozmowa. Osobny subpath, bo dock i logika listy są ciężkie
+ * @konce-pt/react/chat - rozmowa. Osobny subpath, bo dock i logika listy są ciężkie
  * względem rdzenia biblioteki i nie każda aplikacja ich potrzebuje.
  */
 export { KptChat } from "../chat/chat.js";

package/dist/chat-message/chat-message.d.ts

@@ -1,7 +1,8 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptEnterMotion } from '@konce-pt/motion';
 import type { KptChatAttachment, KptChatAuthor, KptChatGroupPosition, KptChatMessage as KptChatMessageModel, KptChatReaction, KptChatReactionOption, KptChatReplyRef, KptChatStatus } from '@konce-pt/chat';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
-/** Wygląd bąbla. `system` nie rysuje bąbla w ogóle — to komunikat, nie wypowiedź. */
+/** Wygląd bąbla. `system` nie rysuje bąbla w ogóle - to komunikat, nie wypowiedź. */
 export type KptChatMessageVariant = 'neutral' | 'primary' | 'solid' | 'ghost' | 'system';
 export interface KptChatMessageProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
     /** Cała wiadomość naraz. Pojedyncze propsy poniżej mają nad nią priorytet. */
@@ -29,15 +30,21 @@ export interface KptChatMessageProps extends Omit<ComponentPropsWithRef<'div'>,
     reactionOptions?: readonly KptChatReactionOption[];
     onRetry?: () => void;
     onReply?: () => void;
-    /** Wybrana reakcja (emoji). Biblioteka niczego nie dopisuje do modelu — robi to aplikacja. */
+    /** Wybrana reakcja (emoji). Biblioteka niczego nie dopisuje do modelu - robi to aplikacja. */
     onReact?: (emoji: string) => void;
-    /** Kliknięcie w cytat — aplikacja może przewinąć listę do oryginału. */
+    /** Kliknięcie w cytat - aplikacja może przewinąć listę do oryginału. */
     onQuoted?: (quote: KptChatReplyRef) => void;
     /** Treść bąbla. Wygrywa z `text`, więc bąbel przyjmuje cokolwiek. */
     children?: ReactNode;
+    /**
+     * Ruch pojawiania się (reakcja, zmiana statusu): `spring` - wyrasta z miejsca, z którego przychodzi, na sprężynie;
+     * `fade` - tylko się przenika; `none` - bez ruchu. Bez wartości bierze `enter` z `KptMotionProvider`
+     * (domyślnie `spring`); `enabled={false}` i systemowe "ogranicz ruch" wyłączają go zawsze.
+     */
+    enterMotion?: KptEnterMotion;
 }
 /**
- * Pojedyncza wiadomość czatu — bąbel z treścią, godziną, statusem wysyłki i opcjonalnym
+ * Pojedyncza wiadomość czatu - bąbel z treścią, godziną, statusem wysyłki i opcjonalnym
  * awatarem, cytatem, załącznikami i reakcjami.
  *
  * Działa na dwa sposoby: dostaje gotowy obiekt przez `message` (tak używa go `KptChat`)
@@ -50,4 +57,4 @@ export interface KptChatMessageProps extends Omit<ComponentPropsWithRef<'div'>,
  * <KptChatMessage message={msg} align="end" position="last" />
  * <KptChatMessage align="end" status="failed" onRetry={resend}>Nie poszło</KptChatMessage>
  */
-export declare function KptChatMessage({ message, author, text, time, attachments, reactions, replyTo, status, align, variant, position, system, showAuthor, showAvatar, showMeta, tail, actions, reactionOptions, onRetry, onReply, onReact, onQuoted, children, locale, dictionary, className, ...rest }: Readonly<KptChatMessageProps>): import("react").JSX.Element;
+export declare function KptChatMessage({ message, author, text, time, attachments, reactions, replyTo, status, align, variant, position, system, showAuthor, showAvatar, showMeta, tail, actions, reactionOptions, enterMotion, ref, onRetry, onReply, onReact, onQuoted, children, locale, dictionary, className, ...rest }: Readonly<KptChatMessageProps>): import("react").JSX.Element;

package/dist/chat-message/chat-message.js

@@ -1,12 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+import { resolveEnterMotion } from '@konce-pt/motion';
 import { KPT_CHAT_REACTIONS, canRetry, toDate } from '@konce-pt/chat';
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptAvatar } from "../avatar/avatar.js";
 import { KptIcon } from "../icon/icon.js";
 import { KptIconButton } from "../icon-button/icon-button.js";
+import { useKptMotion } from "../motion/motion-context.js";
+import { composeRefs } from "../internal/compose-refs.js";
 /** Ikona statusu wysyłki. `read` używa tej samej ikony co `delivered`, różni je kolor. */
 const STATUS_ICONS = {
     sending: 'clock',
@@ -16,7 +19,7 @@ const STATUS_ICONS = {
     failed: 'alert-triangle',
 };
 /**
- * Pojedyncza wiadomość czatu — bąbel z treścią, godziną, statusem wysyłki i opcjonalnym
+ * Pojedyncza wiadomość czatu - bąbel z treścią, godziną, statusem wysyłki i opcjonalnym
  * awatarem, cytatem, załącznikami i reakcjami.
  *
  * Działa na dwa sposoby: dostaje gotowy obiekt przez `message` (tak używa go `KptChat`)
@@ -29,14 +32,21 @@ const STATUS_ICONS = {
  * <KptChatMessage message={msg} align="end" position="last" />
  * <KptChatMessage align="end" status="failed" onRetry={resend}>Nie poszło</KptChatMessage>
  */
-export function KptChatMessage({ message = null, author = null, text = null, time = null, attachments = null, reactions = null, replyTo = null, status = null, align = 'start', variant = null, position = 'single', system = false, showAuthor = false, showAvatar = false, showMeta = true, tail = true, actions = false, reactionOptions = KPT_CHAT_REACTIONS, onRetry, onReply, onReact, onQuoted, children, locale, dictionary, className, ...rest }) {
+export function KptChatMessage({ message = null, author = null, text = null, time = null, attachments = null, reactions = null, replyTo = null, status = null, align = 'start', variant = null, position = 'single', system = false, showAuthor = false, showAvatar = false, showMeta = true, tail = true, actions = false, reactionOptions = KPT_CHAT_REACTIONS, enterMotion, ref, onRetry, onReply, onReact, onQuoted, children, locale, dictionary, className, ...rest }) {
     const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
     const rowRef = useRef(null);
     /** Czy wybierak reakcji jest otwarty. */
     const [pickerOpen, setPickerOpen] = useState(false);
+    const motion = resolveEnterMotion(enterMotion, useKptMotion());
+    const hostRef = useRef(null);
+    // Reakcje i status wskakują dopiero po pierwszym renderze - wczytana historia się nie rusza.
+    // Klasa idzie wprost na element: osobny stan dałby drugi przebieg renderu tylko po to.
+    useEffect(() => {
+        hostRef.current?.classList.add('is-live');
+    }, []);
     // Kliknięcie obok zamyka wybierak. Sam `onBlur` nie wystarcza: w Safari kliknięcie w przycisk
     // nie przenosi na niego fokusu, więc wybierak zostawałby otwarty na zawsze. Faza przechwytywania
-    // i `pointerdown` (nie `click`) — własne `onClick` opcji zdąży się wykonać przed zamknięciem.
+    // i `pointerdown` (nie `click`) - własne `onClick` opcji zdąży się wykonać przed zamknięciem.
     useEffect(() => {
         if (!pickerOpen)
             return;
@@ -76,7 +86,7 @@ export function KptChatMessage({ message = null, author = null, text = null, tim
     const statusIcon = resolvedStatus ? STATUS_ICONS[resolvedStatus] : null;
     const retryable = canRetry(resolvedStatus);
     /*
-     * Etykieta dla czytnika ekranu. Bez niej z bąbla płynie sama treść — bez nadawcy,
+     * Etykieta dla czytnika ekranu. Bez niej z bąbla płynie sama treść - bez nadawcy,
      * godziny i informacji, że wiadomość się nie wysłała.
      */
     const ariaLabel = isSystem
@@ -85,9 +95,9 @@ export function KptChatMessage({ message = null, author = null, text = null, tim
             .filter(Boolean)
             .join(', ');
     if (isSystem) {
-        return (_jsx("div", { className: cn('kpt-chat-message-host', className), role: "note", "aria-label": ariaLabel, ...rest, children: _jsx("p", { className: "kpt-chat-message__system", children: resolvedText }) }));
+        return (_jsx("div", { ref: composeRefs(hostRef, ref), className: cn('kpt-chat-message-host', className), role: "note", "aria-label": ariaLabel, "data-motion": motion, ...rest, children: _jsx("p", { className: "kpt-chat-message__system", children: resolvedText }) }));
     }
-    return (_jsx("div", { className: cn('kpt-chat-message-host', className), role: "article", "aria-label": ariaLabel, ...rest, children: _jsxs("div", { ref: rowRef, className: "kpt-chat-message__row", "data-align": align, children: [align === 'start' ? (_jsx("span", { className: "kpt-chat-message__avatar", "aria-hidden": "true", children: showAvatar ? (_jsx(KptAvatar, { size: "sm", src: resolvedAuthor?.avatar ?? null, name: resolvedAuthor?.name ?? '' })) : null })) : null, _jsxs("div", { className: "kpt-chat-message__stack", children: [showAuthor && resolvedAuthor ? (_jsx("span", { className: "kpt-chat-message__author", children: resolvedAuthor.name })) : null, _jsxs("div", { className: "kpt-chat-message__bubble", "data-variant": resolvedVariant, "data-align": align, "data-position": position, "data-status": resolvedStatus ?? undefined, "data-tail": hasTail ? '' : undefined, children: [resolvedReplyTo ? (_jsxs("button", { type: "button", className: "kpt-chat-message__quote", onClick: () => onQuoted?.(resolvedReplyTo), children: [_jsx("span", { className: "kpt-chat-message__quote-author", children: resolvedReplyTo.author }), _jsx("span", { className: "kpt-chat-message__quote-text", children: resolvedReplyTo.excerpt })] })) : null, resolvedText ? _jsx("p", { className: "kpt-chat-message__text", children: resolvedText }) : null, children, resolvedAttachments.length ? (_jsx("ul", { className: "kpt-chat-message__files", children: resolvedAttachments.map((file) => (_jsxs("li", { className: "kpt-chat-message__file", children: [file.thumbnail ? (_jsx("img", { className: "kpt-chat-message__file-thumb", src: file.thumbnail, alt: file.name })) : (_jsx(KptIcon, { name: "paperclip" })), _jsx("a", { className: "kpt-chat-message__file-name", href: file.url, download: file.url ? file.name : undefined, children: file.name }), file.size ? (_jsx("span", { className: "kpt-chat-message__file-size", children: fileSize(file.size) })) : null] }, file.id))) })) : null, showMeta ? (_jsxs("span", { className: "kpt-chat-message__meta", children: [timeLabel ? (_jsx("time", { className: "kpt-chat-message__time", dateTime: sentAt?.toISOString(), children: timeLabel })) : null, statusIcon ? (_jsx(KptIcon, { className: "kpt-chat-message__status", name: statusIcon })) : null] })) : null, resolvedReactions.length ? (_jsx("ul", { className: "kpt-chat-message__reactions", "data-align": align, children: resolvedReactions.map((reaction) => (_jsxs("li", { className: "kpt-chat-message__reaction", "data-reacted": reaction.reacted ? '' : undefined, children: [_jsx("span", { "aria-hidden": "true", children: reaction.emoji }), _jsx("span", { className: "kpt-chat-message__reaction-count", children: reaction.count })] }, reaction.emoji))) })) : null] })] }), _jsx("span", { className: "kpt-chat-message__actions", "data-open": pickerOpen ? '' : undefined, children: retryable ? (_jsx(KptIconButton, { hostProps: { className: 'kpt-chat-message__retry' }, size: "sm", "aria-label": t('chat.retry'), onClick: () => onRetry?.(), children: _jsx(KptIcon, { name: "refresh" }) })) : actions ? (_jsxs(_Fragment, { children: [_jsx(KptIconButton, { size: "sm", "aria-label": t('chat.replyTo', { author: resolvedAuthor?.name ?? '' }), onClick: () => onReply?.(), children: _jsx(KptIcon, { name: "corner-up-left" }) }), _jsxs("span", { className: "kpt-chat-message__react", onKeyDown: (event) => {
+    return (_jsx("div", { ref: composeRefs(hostRef, ref), className: cn('kpt-chat-message-host', className), role: "article", "aria-label": ariaLabel, "data-motion": motion, ...rest, children: _jsxs("div", { ref: rowRef, className: "kpt-chat-message__row", "data-align": align, children: [align === 'start' ? (_jsx("span", { className: "kpt-chat-message__avatar", "aria-hidden": "true", children: showAvatar ? (_jsx(KptAvatar, { size: "sm", src: resolvedAuthor?.avatar ?? null, name: resolvedAuthor?.name ?? '' })) : null })) : null, _jsxs("div", { className: "kpt-chat-message__stack", children: [showAuthor && resolvedAuthor ? (_jsx("span", { className: "kpt-chat-message__author", children: resolvedAuthor.name })) : null, _jsxs("div", { className: "kpt-chat-message__bubble", "data-variant": resolvedVariant, "data-align": align, "data-position": position, "data-status": resolvedStatus ?? undefined, "data-tail": hasTail ? '' : undefined, children: [resolvedReplyTo ? (_jsxs("button", { type: "button", className: "kpt-chat-message__quote", onClick: () => onQuoted?.(resolvedReplyTo), children: [_jsx("span", { className: "kpt-chat-message__quote-author", children: resolvedReplyTo.author }), _jsx("span", { className: "kpt-chat-message__quote-text", children: resolvedReplyTo.excerpt })] })) : null, resolvedText ? _jsx("p", { className: "kpt-chat-message__text", children: resolvedText }) : null, children, resolvedAttachments.length ? (_jsx("ul", { className: "kpt-chat-message__files", children: resolvedAttachments.map((file) => (_jsxs("li", { className: "kpt-chat-message__file", children: [file.thumbnail ? (_jsx("img", { className: "kpt-chat-message__file-thumb", src: file.thumbnail, alt: file.name })) : (_jsx(KptIcon, { name: "paperclip" })), _jsx("a", { className: "kpt-chat-message__file-name", href: file.url, download: file.url ? file.name : undefined, children: file.name }), file.size ? (_jsx("span", { className: "kpt-chat-message__file-size", children: fileSize(file.size) })) : null] }, file.id))) })) : null, showMeta ? (_jsxs("span", { className: "kpt-chat-message__meta", children: [timeLabel ? (_jsx("time", { className: "kpt-chat-message__time", dateTime: sentAt?.toISOString(), children: timeLabel })) : null, statusIcon ? (_jsx(KptIcon, { className: "kpt-chat-message__status", name: statusIcon }, statusIcon)) : null] })) : null, resolvedReactions.length ? (_jsx("ul", { className: "kpt-chat-message__reactions", "data-align": align, children: resolvedReactions.map((reaction) => (_jsxs("li", { className: "kpt-chat-message__reaction", "data-reacted": reaction.reacted ? '' : undefined, children: [_jsx("span", { "aria-hidden": "true", children: reaction.emoji }), _jsx("span", { className: "kpt-chat-message__reaction-count", children: _jsx("span", { className: "kpt-chat-message__reaction-digit", children: reaction.count }, reaction.count) })] }, reaction.emoji))) })) : null] })] }), _jsx("span", { className: "kpt-chat-message__actions", "data-open": pickerOpen ? '' : undefined, children: retryable ? (_jsx(KptIconButton, { hostProps: { className: 'kpt-chat-message__retry' }, size: "sm", "aria-label": t('chat.retry'), onClick: () => onRetry?.(), children: _jsx(KptIcon, { name: "refresh" }) })) : actions ? (_jsxs(_Fragment, { children: [_jsx(KptIconButton, { size: "sm", "aria-label": t('chat.replyTo', { author: resolvedAuthor?.name ?? '' }), onClick: () => onReply?.(), children: _jsx(KptIcon, { name: "corner-up-left" }) }), _jsxs("span", { className: "kpt-chat-message__react", onKeyDown: (event) => {
                                     if (event.key === 'Escape')
                                         setPickerOpen(false);
                                 }, onBlur: (event) => {
@@ -103,7 +113,7 @@ export function KptChatMessage({ message = null, author = null, text = null, tim
                                                 }, children: _jsx("span", { "aria-hidden": "true", children: option.emoji }) }, option.kind));
                                         }) })) : null] })] })) : null })] }) }));
 }
-/** Rozmiar załącznika w kB/MB — surowe bajty nic nie mówią przy pliku obok nazwy. */
+/** Rozmiar załącznika w kB/MB - surowe bajty nic nie mówią przy pliku obok nazwy. */
 function fileSize(bytes) {
     if (bytes < 1024)
         return bytes + ' B';