@artooi/ag-ui-web-component 0.8.1 → 0.10.0

package/CHANGELOG.md

@@ -7,6 +7,82 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.10.0] — 2026-07-02
+
+### Added
+
+- **Upload cancellation.** `UploadHandler` gains an optional third argument,
+  `signal: AbortSignal`. Removing a pending chip, clearing the tray, or removing
+  the element now aborts the in-flight upload, so a cancelled transfer no longer
+  orphans a server-side file. Non-breaking: existing two-argument handlers keep
+  working; a custom handler that honours the signal should abort its own
+  transport when it fires.
+- **Teardown on disconnect.** `<ag-ui-chat>` now cleans up when it leaves the
+  DOM (a removed node or a client-side route swap): it cancels the in-flight
+  run so the SSE stream closes, aborts in-flight uploads, and releases the
+  microphone so the browser's recording indicator clears.
+- **Accessible history drawer.** The chat-history drawer is now a proper modal
+  dialog — Escape closes it, focus moves into the panel on open and is restored
+  to the opener on close, Tab is trapped within the panel, and an inline rename
+  commits on blur.
+- **Per-instance storage scoping.** The collapsed / theme / active-thread state
+  and the default thread store are now namespaced by the element's `id` (else
+  its `endpoint`), so two `<ag-ui-chat>` instances — or two apps — on the same
+  origin no longer share state. Pre-existing per-tab state migrates into the
+  namespace automatically on first load.
+
+### Fixed
+
+- **Submit while running.** Pressing Enter during a live run no longer starts a
+  second, concurrent SSE run (which orphaned the first and could corrupt its
+  pending tool cards). Enter now matches the Send/Stop button and is ignored
+  while a run is in flight.
+- **Thread-switch race.** Rapidly switching threads against a slow remote store
+  can no longer interleave two replays into one transcript — a stale replay is
+  dropped once a newer switch begins.
+- **Malformed thread responses.** A `200` from the threads endpoint whose body
+  isn't valid JSON (a proxy's HTML error page, a truncated stream) now falls
+  back to the local cache instead of silently failing to load the drawer or
+  history.
+- **Relative timestamps.** An unparseable or missing `updated_at` now renders a
+  neutral "just now" rather than `"NaNw ago"` or `"~2950w ago"`.
+- **Corrupt attachment refs.** Malformed entries in a message's persisted
+  attachments are dropped instead of throwing and aborting the whole history
+  replay.
+- **Retry of a rejected upload.** Retrying a chip that was rejected client-side
+  (oversize / disallowed type) now re-applies the guard instead of uploading the
+  file in full.
+- **Duplicate tool result.** A repeated `TOOL_CALL_RESULT` (or a replayed tool
+  message for an already-settled card) no longer appends a second result
+  section.
+- **Run-error continuation.** A run that ends in an error is now terminal: the
+  loop no longer proceeds into frontend-tool execution or another round, so a
+  failed run can't surface a confusing second error. Pending tool cards still
+  settle.
+
+## [0.9.0] — 2026-06-30
+
+### Added
+
+- **Model thoughts.** When the server forwards a reasoning model's
+  chain-of-thought, the element now renders a muted, collapsible **thoughts
+  region** (part `thoughts`) at the top of the current answer group — it streams
+  while the model reasons and folds away on the answer's first token (the reader
+  can reopen it). `AgUiClientHandlers` gains `onReasoningStart` / `onReasoningDelta`
+  / `onReasoningEnd`, wired from `@ag-ui/client`'s `REASONING_*` subscriber
+  callbacks (which also cover the deprecated `THINKING_*` family).
+- **Voice input.** Set `data-transcribe-url` (django-ag-ui's
+  `TranscribeView`) to reveal a 🎤 mic button in the composer (part
+  `voice-button`): it records via `MediaRecorder`, POSTs the clip, and drops the
+  returned transcript into the textarea. A pluggable `transcribeHandler` —
+  `(audio: Blob) => Promise<string>` — swaps the transport (a different STT
+  endpoint, a Web Speech adapter) and reveals the mic even without the attribute.
+  New exports: `transcribeAudio`, `TranscribeOptions`, `TranscribeHandler`.
+- **Built-in theme toggle.** The boolean `data-theme-toggle` attribute
+  adds an optional light⇄dark toggle to the header (part `theme-toggle`,
+  `toggleTheme()`) that flips `theme` and persists per tab. Off by default, so a
+  host-supplied switch in `slot="header-actions"` stays unaffected.
+
 ## [0.8.1] — 2026-06-30
 
 ### Fixed
@@ -21,7 +97,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- **Per-turn answer group + opt-in well (WELL-1).** Each assistant turn now
+- **Per-turn answer group + opt-in well.** Each assistant turn now
   renders inside one `.answer` group (part `answer`) that holds its streamed
   text, tool cards, and pending indicator — so a turn that calls tools reads as
   a single answer instead of loose siblings. The group spans the whole
@@ -31,12 +107,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   `data-answer-well` attribute to box that group in a bordered, padded "well"
   (themeable via `--ag-ui-well-bg` / `--ag-ui-well-border`); without it the
   layout is the flat stack as before. Pure CSS, turn-scoped, no JS API.
-- **Full-screen page placement (PAGE-1).** New `placement="page"`: a full-bleed
+- **Full-screen page placement.** New `placement="page"`: a full-bleed
   background with the conversation in a centred reading column (default ~820px,
   set via `--ag-ui-content-max-width`). The assistant turn spans the column
   while the user message stays a right-aligned pill — the layout for a dedicated
   chat page (distinct from `full`'s edge-to-edge, left-aligned messages).
-- **Inline tool-display mode + themeable status icons (CARD-1).** New
+- **Inline tool-display mode + themeable status icons.** New
   `data-tool-display="inline"`: the lightest card — a one-line status row (icon
   + summary, no box chrome) with the result behind its own toggle. Every
   tool-call card now leads with a CSS-drawn **status icon** (part
@@ -377,7 +453,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Notes
 - First release — exercising the automated npm OIDC publish pipeline end-to-end.
 
-[Unreleased]: https://github.com/Artui/ag-ui-web-component/compare/v0.8.1...HEAD
+[Unreleased]: https://github.com/Artui/ag-ui-web-component/compare/v0.10.0...HEAD
+[0.10.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.9.0...v0.10.0
+[0.9.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.8.1...v0.9.0
 [0.8.1]: https://github.com/Artui/ag-ui-web-component/compare/v0.8.0...v0.8.1
 [0.8.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.7.0...v0.8.0
 [0.7.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.6.0...v0.7.0

package/README.md

@@ -158,6 +158,8 @@ That's the whole integration: an `endpoint` attribute pointing at your AG-UI ser
 | `data-attachments-url` | — | URL of the file-upload endpoint (django-ag-ui's `AttachmentsView`); reveals the composer's 📎 picker + drag-and-drop. |
 | `data-attachment-accept` | — | `<input accept>` list for client-side type filtering (e.g. `image/*,.pdf`). The server stays authoritative. |
 | `data-attachment-max-bytes` | — | Client-side upload size cap in bytes (default 10 MiB; `0` disables). The server stays authoritative. |
+| `data-transcribe-url` | — | URL of the voice-transcription endpoint (django-ag-ui's `TranscribeView`); reveals the composer's 🎤 mic button. See [Voice input](#voice-input). |
+| `data-theme-toggle` | — | Boolean: show a built-in header light⇄dark toggle (persists per tab). Off by default. See [Theme toggle](#theme-toggle). |
 | `data-strings` | `strings` | Partial JSON override of the UI string table (localization). The property wins key-by-key over the attribute; see [Internationalization](#internationalization-i18n). |
 | `data-icon-url` | — | Header (and sidebar-rail) icon image URL. A slotted `slot="icon"` wins; see [Header & launcher icon](#header-and-launcher-icon). |
 | `data-page-actions` | — | Opt-in built-in page-action tools: a comma list of `scroll` / `drag` (e.g. `"scroll,drag"`). See [Page-action tools](#page-action-tools). |
@@ -170,9 +172,9 @@ That's the whole integration: an `endpoint` attribute pointing at your AG-UI ser
 
 **Properties** (JS only, not attributes): `headers`, `allowImages`, `autoConfirm`,
 `confirmPredicate`, `agentFactory`, `getTools`, `getContext`, `routeMap`, `navigate`,
-`getPageMap`, `autoInjectPageMap`, `conversationStore`, `uploadHandler`, `navigationResult`,
-`skillContext`, `toolSummaries`, `strings`, `resolvePageTarget`, plus the mirrors
-`endpoint` / `toolDisplay` / `collapsed`.
+`getPageMap`, `autoInjectPageMap`, `conversationStore`, `uploadHandler`, `transcribeHandler`,
+`navigationResult`, `skillContext`, `toolSummaries`, `strings`, `resolvePageTarget`, plus the
+mirrors `endpoint` / `toolDisplay` / `collapsed`.
 
 `allowImages` (default `false`) re-enables `<img>` in rendered assistant markdown.
 It is off by default because a model-controlled image URL is fetched by the browser
@@ -772,7 +774,8 @@ have to hand-tune the variables:
 
 See [`src/ui/styles.ts`](src/ui/styles.ts) for the full variable + preset list. The
 [`demo/`](demo/) live playground (`node demo/mock-server.mjs`) flips theme, density, placement,
-text-animation, tool-display, and the answer well live from a single page.
+text-animation, tool-display, and the answer well live from a single page, and demos the
+streamed thoughts region, the 🎤 mic, and the header theme toggle.
 
 ### Parts and slots
 
@@ -788,12 +791,13 @@ ag-ui-chat::part(tool-card) { font-family: var(--my-mono); }
 ```
 
 Available parts: `panel`, `header`, `title`, `icon`, `header-controls`, `header-button`
-(plus `history-button` / `new-button` / `collapse-button`), `messages`, `answer` (the per-turn
-group), `message` (plus `message-user` / `message-assistant`), `empty`, `pending`, `tool-card`
+(plus `history-button` / `new-button` / `collapse-button` / `theme-toggle`), `messages`,
+`answer` (the per-turn group), `thoughts` (plus `thoughts-toggle` / `thoughts-body`), `message`
+(plus `message-user` / `message-assistant`), `empty`, `pending`, `tool-card`
 (plus `tool-card-head` / `-icon` / `-name` / `-status` / `-args` / `-toggle` / `-result`),
 `confirm` (plus `confirm-body` /
 `-args` / `-actions` / `-button` / `-cancel` / `-confirm`), `composer`, `input`, `send`,
-`attach-button`, `attachment-tray`, `launcher`, `launcher-icon`, and the drawer parts
+`attach-button`, `voice-button`, `attachment-tray`, `launcher`, `launcher-icon`, and the drawer parts
 (`drawer`, `drawer-backdrop`, `drawer-panel`, `drawer-header`, `drawer-title`, `drawer-new`,
 `drawer-list`, `drawer-empty`, `drawer-row`, `drawer-row-select`).
 
@@ -865,6 +869,40 @@ pure CSS and turn-scoped — no JS API — and themeable via `--ag-ui-well-bg` /
 <ag-ui-chat endpoint="/agent/" data-answer-well></ag-ui-chat>
 ```
 
+### Model reasoning (thoughts)
+
+When a reasoning model streams its chain-of-thought (django-ag-ui forwards it as AG-UI reasoning
+events — enable a thinking budget via `MODEL_SETTINGS`, see its docs), the element renders a muted,
+collapsible **thoughts region** (part `thoughts`) at the top of the current answer group. It opens
+while the model reasons and folds away on the answer's first token; the reader can reopen it. The
+web component handles the `REASONING_*` event family (and the deprecated `THINKING_*`, which
+`@ag-ui/client` maps onto it), so no client config is needed — the thoughts appear whenever the
+server forwards reasoning.
+
+### Voice input
+
+Set `data-transcribe-url` (django-ag-ui's `TranscribeView`) to reveal a 🎤 mic button in the
+composer (part `voice-button`). Click it to record via `MediaRecorder`, click again to stop — the
+clip is POSTed to the endpoint and the returned transcript is dropped into the textarea. Swap the
+transport with a custom `transcribeHandler` — `(audio: Blob) => Promise<string>` — to use a
+different STT endpoint or a browser Web Speech adapter without touching the button; when set, the
+mic appears even with no `data-transcribe-url`.
+
+```html
+<ag-ui-chat endpoint="/agent/" data-transcribe-url="/agent/transcribe/"></ag-ui-chat>
+```
+
+### Theme toggle
+
+`theme` is a plain attribute you can set yourself, and a host can always drop its own switch into
+`slot="header-actions"`. For convenience, the boolean `data-theme-toggle` attribute adds a built-in
+light⇄dark toggle to the header (part `theme-toggle`) that flips `theme` and persists the choice
+per tab. Off by default so it never competes with a host-supplied control.
+
+```html
+<ag-ui-chat endpoint="/agent/" data-theme-toggle></ag-ui-chat>
+```
+
 ---
 
 ## Internationalization (i18n)