inline-chat-kit 0.57.0 → 0.59.0

package/CHANGELOG.md

@@ -8,6 +8,85 @@ 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.59.0 — 2026-09-24
+
+From integrating 0.58 into a host app. Nothing changes for a host that passes
+none of the new props, with one visible difference, below.
+
+### Added
+
+- **`fill="window" | "container"` on `ChatExperience`.** `"container"` makes
+  the chat as tall as its parent instead of the window — both the workspace and
+  the page. Embedded in a card inset 12px top and bottom, the window's height
+  overran the card by 24px and a docked composer lost half of itself to the
+  card's clip. `"window"` is the default and is what the kit did before.
+- **Parts sit in the prose where they arrived.** A part carries `at`, how much
+  prose had arrived when it did, stamped by `useChatTurns` on its first
+  appearance, and the row draws the answer in that order. "I suggest this
+  change:" is drawn before the change it introduces rather than under it. The
+  prose is still one string — Copy, the screen reader and versions read `ai` as
+  before; only the drawing is cut. Hosts can set `at` themselves; a part without
+  one sits before the prose, as every part did.
+
+### Changed
+
+- **Prose sent after a part is now drawn after it.** This is the point of the
+  above, and it is the one thing an existing host will see: a stream that sent
+  text, then a card, then more text used to draw the card on top and all the
+  text under it. Streams that send their parts before their prose — the usual
+  shape, and every stream in the demo — draw exactly as before. The one story
+  that changes is `Localized`, whose sentence now stands above its cards.
+- **The row of actions follows the whole answer.** It lived inside the prose
+  block, so an answer made only of parts had no regenerate and no thumbs.
+  Copy is offered only when there is prose to copy.
+
+### Fixed
+
+- **`highlights={false}` still cut the prose into a span per word.** The spans
+  exist for marking — hit-testing, the keyboard cursor, the dimming — and with
+  marking off they were 82 elements for four sentences. The answer is text now.
+
+## 0.58.0 — 2026-09-23
+
+The composer at the bottom, as an alternative to the inline one — roadmap I2.
+One prop; nothing changes for a host that does not pass it.
+
+### Added
+
+- **`composer="inline" | "docked"` on `ChatExperience`.** `"docked"` keeps the
+  input at the bottom edge and stacks the conversation above it. The live
+  input is still the last turn, so a sent message still becomes its bubble —
+  the same element, carried up into the conversation by its layout animation
+  as a fresh composer takes its place. A sent message is still brought to the
+  top of the view and held there while its answer is written, as it is inline;
+  the composer stays on the bottom edge while that happens, and the workspace
+  gives up whatever a phone's keyboard covers.
+- **`nextTurn: "after-answer" | "at-send"` on `useChatTurns`.** `"at-send"`
+  opens the next input the moment a message goes, so it can be typed into
+  while the answer arrives. A send while one is in flight is now refused in
+  either mode: it used to start a second run and take the first one's abort
+  away.
+- **`busy` on `ChatInput` and `ChatTurnRow`.** Open to type into, closed to
+  send from: Enter does nothing, the send glyph is a stop when there is an
+  `onStop` and inert when there is not.
+- **`dock` on `Conversation`.** The last child is pinned to the bottom of the
+  view — an auto margin while the content is short, `sticky` once it is long —
+  and the room an anchor needs is put above it rather than below, where
+  `sticky` could not hold it.
+
+- **`highlights` and `bookmarks` on `ChatExperience`, `highlights` on
+  `ChatTurnRow`, `marking` on `TextHighlighter`.** `highlights={false}` draws
+  answers as prose — no marker layer, nothing over the text in the tab order,
+  no highlight menu — and takes the saved highlights and the selection-mode
+  pair with it. `bookmarks={false}` keeps marking and drops the keeping. Both
+  are decided in code rather than offered in the interface, which is also how
+  `composer`, `pane`, `surface`, `headerActions` and `composerMenu` work.
+
+### Fixed
+
+- **A responding bubble drew a stop with nothing behind it** when the host
+  had not passed `onStop`. It is drawn only with somewhere to report to.
+
 ## 0.57.0 — 2026-09-22
 
 A pane the host draws itself. `ChatExperience` placed its artifact pane beside

package/README.md

@@ -216,6 +216,7 @@ input that morphs into its own bubble rather than a record of what was typed.
 | `onDraft` | `(id, value) => void` | | |
 | `onSubmit` | `(id, value) => void` | | |
 | `onStop` | `() => void` | | |
+| `busy` | `boolean` | | An answer is arriving elsewhere: the composer offers a stop, not a send |
 | `onEdit` | `(id) => void` | | |
 | `onCancelEdit` | `(id) => void` | | |
 | `onCopy` | `(value) => void` | writes to the clipboard | |
@@ -250,6 +251,53 @@ Every callback is optional; a row with none of them renders and can be marked.
 The row carries `id="turn-<id>"` so a host can scroll to one, and `aria-busy`
 while its answer is arriving.
 
+### The composer at the bottom
+
+The kit's argument is that the input is the message: it stands at the end of
+the conversation and becomes the bubble where you typed it. Some products want
+the shape every other chat has instead — the box at the bottom, the
+conversation stacking above it. That is one prop, not a second kit:
+
+```tsx
+<ChatExperience onSend={send} composer="docked" />
+```
+
+What changes, and what does not:
+
+- **The box stays at the bottom.** `Conversation` pins its last child there —
+  pushed down by an auto margin while the conversation is shorter than the
+  view, held by `position: sticky` once it is longer. Both put its bottom on
+  the same edge, so nothing moves when the conversation crosses from one to
+  the other.
+- **It still becomes the bubble.** The live input *is* the last turn, as it
+  always was, so the morph is the one the kit already has. What is new is the
+  travel: a fresh composer takes the last place, the sent one is no longer
+  last and no longer sticky, and its `layout` animation carries it up into the
+  conversation where it now belongs.
+- **The next question can be typed while this one is answered.**
+  `useChatTurns` opens the next input at send rather than at settle
+  (`nextTurn: "at-send"`), the composer is `busy` while the answer arrives —
+  Enter does nothing and the send glyph is a stop — and a send while an answer
+  is in flight is refused rather than started on top of it. Queueing it is a
+  separate thing.
+- **A sent message still goes to the top.** The same anchor the inline
+  composer uses: your question is brought to the top of the view and held
+  there while its answer is written underneath. The composer does not move
+  with it — it is `sticky`, so the room the anchor scrolls into passes behind
+  it. The room itself goes *above* the dock rather than below: `sticky` only
+  ever pulls an element up, so room underneath would leave the composer
+  stranded in the middle of the view.
+- **The keyboard is allowed for.** On a phone the software keyboard comes up
+  over the bottom edge; the workspace gives up what `visualViewport` says is
+  covered, so the composer rides on the keyboard's top edge.
+- Everything else is the same: the parts, the pane, the highlighter, editing
+  a sent message in place, `labels`, `surface="panes"`.
+
+With a `chat` of your own, give its hook `nextTurn: "at-send"`. Assembling the
+rows by hand, the same shape is `<Conversation dock>` with the live row last,
+`busy={isStreaming}` on it, and `onStop` on it rather than on the bubble being
+answered.
+
 ### Two rules everything follows
 
 **Surfaces nest in three steps.** A **ground** is what a group of things sits
@@ -432,6 +480,31 @@ component that owns it.
 steps that follow from one another. Sending both for one stretch of thinking
 says it twice.
 
+#### Where a part sits in the prose
+
+The answer is drawn in the order the stream sent it. A part remembers how much
+prose had arrived when it did — `at`, in characters of `ai` — and is drawn at
+that point, so a sentence that introduces a card comes before the card:
+
+```tsx
+yield "I suggest this change:";                                   // prose
+yield { kind: "custom", id: "change", type: "plan-diff", data };  // at: 22
+yield " Tell me if it looks right.";                              // prose, after the card
+```
+
+`useChatTurns` stamps `at` on a part's **first** appearance and nothing moves it
+afterwards: an update to a part is not a new part, and a card a host adds with
+`updatePart` after the answer lands at the end. Give `at` yourself to place a
+part — `at: 0` puts it before all the prose. A part with no `at` sits before the
+prose, which is where every part sat before this existed, so turns built by
+hand look as they always have.
+
+The prose is still one string: `ai` is what Copy copies, what a screen reader
+hears and what a version keeps. Only the drawing is cut, at the points the
+parts arrived — each run is its own block of markdown, and a highlight cannot
+cross a card. The row of actions goes after whatever the answer ends with, so an
+answer made only of parts has one too, without a Copy of nothing.
+
 #### Your own cards: `custom`
 
 Every other kind is a component in this package. `custom` is the host's: `type`
@@ -951,6 +1024,7 @@ instant the reader scrolls away, with a button offering the way back.
 | `scrollButton` | `boolean` | `true` | The way back |
 | `scrollButtonLabel` | `string` | `"Jump to the latest"` | |
 | `follow` | `boolean` | `true` | `false` makes it a plain scroll container |
+| `dock` | `boolean` | `false` | The last child is pinned to the bottom edge — see [The composer at the bottom](#the-composer-at-the-bottom) |
 | `className` | `string` | | Goes on the root, which is the box you lay out |
 | `viewportClassName` | `string` | | Goes on the element that scrolls — padding belongs here |
 
@@ -1436,17 +1510,46 @@ for that one instance.
 
 ### Turning off what you do not use
 
-`ChatExperience` draws a theme toggle and Share in the header and a "+" menu in
-the composer. A host that has none of those says so:
+Everything here is decided **in code**, not offered in the interface. A
+product either marks passages or it does not, keeps a theme toggle or does
+not; a control for choosing is a question nobody asked.
 
 ```tsx
 <ChatExperience
   onSend={send}
+  composer="docked"              // or "inline", the default
+  highlights={false}             // no marker layer, no highlight menu, no saved ones
+  bookmarks={false}              // marking stays, keeping goes
   headerActions={false}          // or ["theme"], or ["share"]
   composerMenu={false}           // or your own: [{ id, label, icon?, onSelect }]
+  pane="none"                    // draw the artifact pane yourself
+  surface="panes"                // the conversation as a card of its own
+  fill="container"               // as tall as its parent, not the window
 />
 ```
 
+**Embedded, use `fill="container"`.** By default the chat is as tall as the
+window, which is what a page that is nothing but the chat wants. Anywhere
+smaller — a card in a shell, a sidebar, a split — it has to take its parent's
+height instead, or it hangs past the bottom of it: measured in a card inset 12px
+top and bottom, the default overran it by 24px and a docked composer lost half
+of itself to the card's clip. The parent has to have a height to give. The
+software keyboard is then the host's to handle, because the chat no longer
+knows where the window's edge is.
+
+| Prop | Off means |
+| --- | --- |
+| `highlights={false}` | Answers are prose: no marker layer, nothing over the text in the tab order, no highlight menu — and no saved highlights or selection-mode pair, since both are about marking |
+| `bookmarks={false}` | A passage can still be marked and replied to; nothing is kept. Use `onHighlight` to keep them yourself |
+| `onThreadReply` omitted | No threads. A thread is opened from a highlight, so `highlights={false}` takes them too |
+| `headerActions={false}` | No theme toggle, no Share. Your own `actions` are unaffected |
+| `composerMenu={false}` | No "+" in the composer |
+| `selectionToggle` omitted | No marker/precise pair in the header (the default) |
+| `cursor` omitted | No pointer-following cursor (the default) |
+
+Assembling the rows by hand, the same switch is `highlights` on
+`<ChatTurnRow>`, which is `marking` on `<TextHighlighter>`.
+
 The saved highlights button is not one of the header's actions — it appears
 only once there is a highlight, and it is the only way back to them. An entry in
 your own menu with id `"attach"` and no `onSelect` opens the file picker.

package/dist/ChatExperience/ChatExperience.d.ts

@@ -150,6 +150,40 @@ export interface ChatExperienceProps {
      * `ChatLayout`.
      */
     surface?: "flush" | "panes";
+    /**
+     * Where the composer lives.
+     *
+     * `"inline"` (the default): the input is the message. It stands at the end
+     * of the conversation, and what you type becomes the bubble where you typed
+     * it — the argument this kit makes.
+     *
+     * `"docked"`: the input stays at the bottom of the view, the way most chats
+     * keep it, and the conversation stacks above it. Sent, it still becomes the
+     * bubble — the same element, travelling into the conversation — and a fresh
+     * one takes its place at the bottom straight away, so the next question can
+     * be typed while this one is being answered. Everything else is the same:
+     * the parts, the pane, the highlighter, editing in place.
+     *
+     * With a `chat` of your own, give its `useChatTurns` `nextTurn: "at-send"`.
+     */
+    composer?: "inline" | "docked";
+    /**
+     * What the chat is as tall as.
+     *
+     * `"window"` (the default): the whole window, which is what a page that is
+     * nothing but the chat wants, and why it needs no height from its host.
+     *
+     * `"container"`: whatever its parent gives it. For a chat embedded in a
+     * card, a sidebar, a split — anywhere smaller than the window, which is
+     * nearly every embed. The parent has to have a height to give; the chat
+     * fills it and scrolls inside it. Measured in a host whose card was inset
+     * 12px top and bottom, `"window"` hung 24px past the card and a docked
+     * composer lost half of itself to the card's clip.
+     *
+     * The software keyboard is the host's to handle here: the chat no longer
+     * knows where the window's bottom edge is relative to itself.
+     */
+    fill?: "window" | "container";
     /** The theme, if the host keeps it. Left off, this manages its own and puts
         a toggle in the header; `data-theme` on the root element either way, and
         unset until somebody chooses, so the kit follows the system preference —
@@ -159,8 +193,32 @@ export interface ChatExperienceProps {
     /** The pointer-following cursor, and the rule that hides the real one. Only
         ever where there is a pointer to replace. */
     cursor?: boolean;
-    /** The freeform-marker / precise-selection pair in the header. */
+    /** The freeform-marker / precise-selection pair in the header. Drawn only
+        where there is marking to choose a mode for. */
     selectionToggle?: boolean;
+    /**
+     * Whether an answer can be marked at all.
+     *
+     * On by default: a marker over a passage is how a reader asks about one
+     * sentence rather than the whole answer. `false` draws answers as prose —
+     * no marker layer, no highlight menu, nothing in the tab order over the
+     * text — and takes the saved highlights and the selection-mode pair with
+     * it, because both are about marking. A thread is opened from a highlight,
+     * so `onThreadReply` has nothing to open it from either.
+     *
+     * Set in code, not offered in the interface: a product either works this
+     * way or it does not.
+     */
+    highlights?: boolean;
+    /**
+     * Whether marked passages are kept.
+     *
+     * On by default, and only ever visible once there is one: the header grows
+     * a button with the count, and it opens the sheet that lists them.
+     * `false` keeps marking and threads and drops the keeping — for a host that
+     * would rather store them itself, through `onHighlight`.
+     */
+    bookmarks?: boolean;
     /** How far below the top edge a sent message comes to rest. Sets the
         conversation's own top padding too — the two have to agree, so one number
         writes both. */
@@ -177,4 +235,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, theme: themeProp, onThemeChange, cursor, selectionToggle, anchorOffset, endOffset, animationConfig, foldMotion, feedDelay, onAnswerQuestion, onEditQuestion, onDecideApproval, className, }: ChatExperienceProps): import("react").JSX.Element;
+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;