inline-chat-kit 0.59.2 → 0.61.0

package/CHANGELOG.md

@@ -8,6 +8,135 @@ The versions before 1.0 follow the pre-release convention: **a breaking change
 or new public API bumps the minor**, and the patch is for fixes. Anything that would break an
 existing install is called out under **Breaking**, with what to do about it.
 
+## 0.61.0 — 2026-10-15
+
+A host's own button, which 0.60.0 turned down. The reason it was turned down
+still holds for one button, and only that one is kept back. Nothing changes for
+a host that passes nothing: every story screenshotted against 0.60.0 in both
+themes, 138 stories, identical but for the one that sets its own
+`--ick-btn-radius` — its composer is concentric now, which is the point — and,
+on a touch screen, the composer's "+" and microphone, below.
+
+### Added
+
+- **`components={{ Button }}` on `ChatExperience`**, and `ComponentsProvider`
+  for pieces assembled by hand, in the way of `LabelsProvider`. The host's
+  button is drawn for every role in theming.md's table but one: the
+  composer's send / stop / save, whose glyph morphs between the three inside
+  the button. That one stays the kit's and is themed by the tokens, as before.
+  - The kit keeps the layout and the behaviour, the host's button paints. It
+    is drawn inside a box the kit sizes from `--ick-control-*` (square when
+    it is only an icon), places, animates, and gives the 44px touch area —
+    the ring past the button's edge is the box's, and a press there is handed
+    to the button. The box sets the button's height over the host's own.
+  - `KitButtonProps` is the contract: `kitRole`, `variant`, `size`, `shape`
+    (`square`, `pill`, `default`), `icon`, `iconRight`, `children`,
+    `disabled`, `loading`, `pressed`, `type="button"`, the handlers, the
+    `aria-*` and `data-ick-*` attributes, and the ref. `kitRole` rather than
+    `role`, because a button that spread a `role` of `"send"` onto itself
+    would be an ARIA error — the ARIA `role` still arrives where there is one,
+    `menuitem` in the header's menu.
+  - The header's menu items go through it too. Its back control and an
+    action with an `href` are links and stay `<a>`.
+  - In development, a host's button that does not forward its ref, is not a
+    `<button>`, drops the `aria-*` or `data-ick-*` it was given, or looks no
+    different with keyboard focus is named in the console, once per role.
+    `process.env.NODE_ENV === "production"` returns before any of it.
+- **`--ick-composer-control`**: the composer's send glyph, "+" and
+  microphone, which were 28px written into the component — four widths
+  Motion springs open, and an overlay offset by 36 and 44 — are
+  `--ick-control-s` now, and a host can move them on their own.
+- **The composer's corner is concentric with its buttons**: `--ick-input-radius`
+  is `--ick-btn-radius` plus the surface's 8px padding, up to
+  `--ick-radius-xl`. A pill button leaves it at the 24 it was; a host's 6px
+  button gets a 14px composer instead of a 6px button in a 24px pill.
+- **`BringYourOwnButton` stories** — the chat and the hand-assembled pieces
+  with a shadcn-style button (a 6px corner, 36px tall, its own focus ring),
+  and the same pieces with nothing provided — and "Bring your own button" in
+  theming.md: tokens, then per-role CSS, then the component.
+
+### Fixed
+
+- **On a touch screen the "+" and the microphone are round.** Their boxes
+  were 28 written in and their buttons as wide as `size="s"`, which the touch
+  block raises to 32: a 32 × 28 oval beside a 32 × 32 send, overflowing its
+  slot by 4px. All three are 32 × 32 there now, in 32px slots. On a pointer
+  nothing moves.
+
+## 0.60.0 — 2026-10-15
+
+Reported from a host running the kit in production, each one worked around
+outside the kit there. Each was reproduced here before it was changed.
+
+### Fixed
+
+- **The header's "…" menu closes when "…" is pressed again.** The press
+  moved focus from the menu to the button, the menu closed on that blur, and
+  the click toggled it straight back open. Measured in Chromium and WebKit, by
+  mouse and by touch: it could not be closed that way at all.
+- **And on a press anywhere outside it.** It closed only on a blur, and on iOS
+  a tap on something that takes no focus moves none — so the menu stayed open
+  over whatever was touched next.
+- **`ChatExperience` fits its container on a page with no `box-sizing`
+  reset.** It was `width: 100%` plus 64px of padding, so in a 400px side
+  panel the end of every sent message sat under the panel's edge. A host
+  with a reset saw nothing change; one without now gets the column the
+  playground was designed with — 720px overall, not 784.
+- **A short message is no longer faded, with "Read more" on it, because of
+  the width it had for one frame.** Whether a sent message is long was
+  measured once, a frame after the answer settled. In a host's side panel
+  still opening under an instant answer, that frame had the bubble 27px wide:
+  a one-line message measured 269px tall and stayed faded at 201×25. It is
+  measured again whenever it reflows, and the fade and the button go when it
+  is no longer long. A resting message mounted from history is measured too,
+  so it is clamped the same way a freshly sent one is.
+- **An empty composer is never two lines.** Mounted a few pixels wide in the
+  same panel, the fresh composer decided it needed a second line, and the way
+  back compared against that width, so it never returned: 68px tall, its "+"
+  on a line of its own, for the rest of the session.
+- **A docked composer no longer jumps on a send.** The fresh composer arrived
+  like any new turn — rising 16px into place — so the box at the bottom went
+  up and back every time a message was sent (840 → 824 → 840). It fades in
+  where it is now. A sent message still goes to the top, as before.
+- **Docked, the question lands before its answer starts.** The answer's "…"
+  appeared at the top the moment a message was sent, while the message was
+  still travelling up from the composer — two things moving in opposite
+  directions, an answer begun above a question that had not arrived. The
+  answer now waits, still taking its room so the anchor does not move, until
+  the bubble has stopped: about 0.45s, measured at 1120×700 and 390×844, and
+  for a model that is silent first. Read off the screen rather than from the
+  spring, which rests at 1.2s, and including the scroll that carries a second
+  message most of its way. `ChatTurnRow` takes it as `answerAfterTravel`;
+  `ChatInput` reports it through `onLanded`.
+
+### Added
+
+- **`ChatTurnRow` takes `entrance`** — `"rise"` or `"fade"`.
+- **A host's own buttons.** A host matched the kit's buttons by hashed class
+  name (`[class*='ick-primary-']`), by position (the button in the
+  composer's surface is the send) and by `aria-label` (the stop is the one
+  labelled "Zaustavi"), so translating a label changed its colour.
+  - Every variant is painted from `--ick-btn-<variant>-*` tokens, with
+    `--ick-btn-radius` and `--ick-btn-weight`. The defaults are the values
+    the variants had: compared in both themes, at rest and on hover, 60
+    samples, no difference.
+  - Every button the kit draws says what it is for in `data-ick-role` and
+    what it is in `data-ick-variant`. `send`, `stop` and `save` are three
+    roles, not one button with three labels. A test fails on a `<Button>`
+    drawn without a role.
+  - `ChatHeaderAction` takes `variant`, so one action can be the host's
+    primary.
+  - `HostButtons` story; the tokens and the roles are listed in
+    `theming.md`.
+
+  Not a `components={{ Button }}` slot, though that was asked for: the kit's
+  buttons carry the composer's morphing glyph and its layout animation, and
+  a host component would have to take all of it on to stand in for one.
+- **`OpensWithTheMessage` story**, and `npm run panel-check` in the gate: a
+  card's button opens a side panel and sends from it, the answer is ready at
+  once. Four failures against 0.59.2, none now — and a long message is
+  checked to still be clamped.
+
 ## 0.59.2 — 2026-09-24
 
 ### Fixed

package/README.md

@@ -211,6 +211,8 @@ input that morphs into its own bubble rather than a record of what was typed.
 | `placeholder` | `string` | | |
 | `animationConfig` | `InlineAnimConfig` | | Passed to the input |
 | `entranceDelay` | `number` | `0` | Stagger, in seconds |
+| `entrance` | `"rise" \| "fade"` | `"rise"` | How the row arrives — a docked composer fades in place |
+| `answerAfterTravel` | `boolean` | `false` | The answer waits until the sent question has landed — docked, set by `ChatExperience` |
 | `selectionMode` | `"marker" \| "precise"` | `"marker"` | Passed to the highlighter |
 | `questionAlign` | `"end" \| "stretch"` | `"end"` | Where the composer sits — see below |
 | `onDraft` | `(id, value) => void` | | |
@@ -1393,7 +1395,9 @@ handful of things you can do to the whole thread.
 | `landmark` | `boolean` | `true` | `false` inside a panel, where `banner` would be a lie |
 | `children` | `ReactNode` | | Anything the kit should not manage. Never collapses |
 
-Each action is `{ id, label, icon, onClick?, href?, count?, active?, disabled?, pinned? }`.
+Each action is `{ id, label, icon, onClick?, href?, count?, active?, disabled?, pinned?, variant? }`.
+`variant` is how one action stands out — `"primary"` for the host's own — and
+only applies while it is in the header rather than folded into the menu.
 `label` is required because an icon has no name of its own, and `count` is
 folded into that name — the badge is decorative, so a reader who cannot see it
 still hears "Saved highlights, 3".
@@ -1468,6 +1472,18 @@ existing call sites keep working. Its `s` / `m` / `l` map to `m` / `l` / `xl`.
 Neither takes a dark-mode prop: the theme is a token swap on an ancestor. See
 [theming.md](./theming.md).
 
+**Your own button.** `components={{ Button }}` on `ChatExperience` — or
+`ComponentsProvider` around pieces assembled by hand — draws your button
+wherever the kit draws one, except the composer's send / stop / save glyph,
+which morphs inside its button and stays the kit's. The kit keeps the layout
+(the box, its size from `--ick-control-*`, motion, the 44px touch area) and
+your button paints. It must forward its `ref`, render a `<button>` and spread
+the `aria-*` and `data-*` it is given; the props it receives are
+`KitButtonProps`, and `kitRole` says what each one is for. Set
+`--ick-btn-radius` to your corner too: the kit's glyph and the composer around
+it follow it. Tokens first, per-role CSS second, the component third — see
+"Bring your own button" in [theming.md](./theming.md#bring-your-own-button).
+
 ## Labels: every word the kit says
 
 Every component takes a `labels` prop, and `ChatExperience` and `ChatTurnRow`

package/dist/Button/KitButton.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+import { ButtonProps } from './Button';
+import { KitButtonProps, KitButtonRole, KitButtonShape } from '../components/components';
+export interface KitButtonUse extends Omit<ButtonProps, "type"> {
+    /** What it is for. Written to `data-ick-role`, and handed to a host's button. */
+    kitRole: Exclude<KitButtonRole, "send" | "stop" | "save">;
+    /** Worked out from the content when not given: an icon alone is `square`. */
+    shape?: KitButtonShape;
+    /** The layout box a host's button sits in. The kit's own button ignores it. */
+    boxClassName?: string;
+    boxStyle?: CSSProperties;
+    /** Given to a host's button instead of what the kit's own is given. */
+    hostProps?: Partial<Pick<KitButtonProps, "icon" | "iconRight" | "children">>;
+}
+/**
+ * Every button the kit draws but the composer's morphing glyph.
+ *
+ * With no host button in `ComponentsProvider` this is the kit's `Button`,
+ * given exactly what it was given before the slot existed — the same element,
+ * the same attributes, so nothing about the default changes.
+ *
+ * With one, the host's button is drawn inside a box the kit lays out: the box
+ * has the size, takes the place in the row, and carries the 44px hit area on
+ * a touch screen; the host's button fills it and paints it. `className` and
+ * `style` here are the kit's paint and stay with the kit's button; where they
+ * also place it, the call site says so again as `boxClassName` / `boxStyle`.
+ */
+export declare const KitButton: import('react').ForwardRefExoticComponent<KitButtonUse & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Button/hostButtonChecks.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+/** For tests: forget which roles have been warned about. */
+export declare function resetHostButtonWarnings(): void;
+/**
+ * In development, checks a host's button against the contract in
+ * `KitButtonProps`, and says so once per role when it falls short:
+ *
+ * - its ref is not forwarded (`forwardRef`), so the kit cannot focus it;
+ * - what it renders is not a `<button>`;
+ * - it drops the `aria-*` or `data-ick-*` the kit gave it;
+ * - keyboard focus changes nothing about how it looks.
+ *
+ * `role` is `undefined` for the kit's own button, which is not checked.
+ */
+export declare function useHostButtonChecks(role: string | undefined, box: RefObject<HTMLElement | null>, element: RefObject<HTMLElement | null>, forwarded: RefObject<boolean>, given: Record<string, unknown>): void;

package/dist/ChatExperience/ChatExperience.d.ts

@@ -8,6 +8,7 @@ import { TranscribeHandler } from '../voice/useVoiceInput';
 import { CustomPart, CustomPartContext, TurnPartUpdate } from '../turnParts/turnParts';
 import { ComposerMenuItem } from '../ChatInput/AddCardsOverlay';
 import { ChatLabels } from '../labels/labels';
+import { ChatComponents } from '../components/components';
 import { Answer } from '../QuestionCard/types';
 import { Decision } from '../Approval/Approval';
 /**
@@ -91,6 +92,15 @@ export interface ChatExperienceProps {
      * an inline object costs nothing — it is compared by content.
      */
     labels?: ChatLabels;
+    /**
+     * The host's own components, drawn in place of the kit's. `Button` is used
+     * for every button the chat draws except the composer's send / stop / save
+     * glyph, whose animation lives in the button. The kit keeps the layout —
+     * size, place, motion, hit area — and your button paints. It must forward
+     * its ref and render a `<button>`; see `KitButtonProps`. Keep it stable:
+     * declared outside a render, not inside one.
+     */
+    components?: ChatComponents;
     /**
      * The header's built-in actions. `true` (the default) is the theme toggle
      * and Share; `false` is neither; a list keeps only those named. The saved
@@ -235,4 +245,4 @@ export interface ChatExperienceProps {
     onDecideApproval?: (write: PartWriter, turnId: string, partId: string, decision: Decision) => void;
     className?: string;
 }
-export declare function ChatExperience({ onSend, chat: hostChat, renderPart, labels, headerActions: builtInActions, composerMenu, onTranscribe, onThreadReply, title: titleProp, backHref, backLabel, actions, placeholder, empty, contextTotal, contextBase, artifact, openArtifactId: openArtifactProp, onOpenArtifactChange, pane: paneMode, surface, composer, fill: fillMode, theme: themeProp, onThemeChange, cursor, selectionToggle, highlights: marking, bookmarks, anchorOffset, endOffset, animationConfig, foldMotion, feedDelay, onAnswerQuestion, onEditQuestion, onDecideApproval, className, }: ChatExperienceProps): import("react").JSX.Element;
+export declare function ChatExperience({ onSend, chat: hostChat, renderPart, labels, components, headerActions: builtInActions, composerMenu, onTranscribe, onThreadReply, title: titleProp, backHref, backLabel, actions, placeholder, empty, contextTotal, contextBase, artifact, openArtifactId: openArtifactProp, onOpenArtifactChange, pane: paneMode, surface, composer, fill: fillMode, theme: themeProp, onThemeChange, cursor, selectionToggle, highlights: marking, bookmarks, anchorOffset, endOffset, animationConfig, foldMotion, feedDelay, onAnswerQuestion, onEditQuestion, onDecideApproval, className, }: ChatExperienceProps): import("react").JSX.Element;