@artooi/ag-ui-web-component 0.16.0 → 0.18.0

package/CHANGELOG.md

@@ -7,6 +7,135 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.18.0] — 2026-08-10
+
+### Added
+
+- **A copy button on code blocks in agent answers.** An agent answering with
+  code is answering with something the reader means to *use*, and selecting it
+  by hand out of a scrolling transcript — inside a shadow root, in a narrow
+  sidebar — was the one interaction the chat surface made harder than the page
+  around it.
+
+  Revealed on hover **and keyboard focus** (hidden-until-hover is invisible to a
+  keyboard user), styleable via the `code-copy` part, with `copyCode` /
+  `copied` / `copyFailed` in `UiStrings`.
+
+  ⚠ **It reports failure rather than always claiming success.** The Clipboard
+  API needs a secure context and is simply absent in some embeddings; a button
+  that always says "Copied" sends the reader off to paste stale clipboard
+  content and find out somewhere else entirely.
+
+### Fixed
+
+- **A bare `data-prompt-chips` or `data-slash-commands` now enables the
+  feature**, instead of silently disabling it. Both were compared against the
+  string `"true"`, so writing the attribute bare — the spelling every native
+  boolean attribute uses, and the one a reader reaches for first — turned off
+  the thing it names, with nothing to indicate why the chips never appeared.
+  `="false"` still turns them off.
+
+- **The checkpoint panel manages focus.** It declared `role="dialog"` and took
+  no focus at all, so a keyboard user was left behind an open dialog; the thread
+  drawer had done this correctly all along. Focus now moves in on open, is
+  restored on close, and Tab is trapped while it is open.
+
+  ⚠ **With no continuable runs the panel holds no controls**, so the panel
+  itself is focusable as the fallback — otherwise "move focus to the first
+  control" silently does nothing in exactly the case where the user has least to
+  go on.
+
+- **The README described a `dist/ag-ui-web-component.bundle.css` that the build
+  has never emitted.** The styles are a template literal injected into the
+  shadow root, so there is no sidecar to load — and a reader looking for the
+  file to override was looking for the wrong seam. Documented as CSS custom
+  properties and `part` attributes instead.
+
+## [0.17.0] — 2026-08-10
+
+### Added
+
+- **`sendMessage(content, attachments?)`** — send as if the user had typed it:
+  user bubble, `ag-ui-submit`, run started. The programmatic half of the
+  composer, for an "Ask about this order" button, a command palette, or a
+  composer of your own replacing the built-in one. The built-in Send now reads
+  the composer, clears it, and calls this, so the two paths cannot drift.
+
+  It no-ops while a run is in flight — a second concurrent run would orphan the
+  first — and for an entirely empty message. ⚠ Unlike the built-in Send it does
+  **not** consult the attachment tray: what you pass is what is sent, so a host
+  composer stays in charge of its own state.
+
+- **`attachFile(file)`** — queue a file into the tray exactly as the picker and
+  drag-and-drop do, with the same validation and progress chip. Returns `false`
+  when uploads are not configured (no `data-attachments-url`, no
+  `uploadHandler`), which is the only way for a host to tell: with no tray there
+  is nothing to report through, and silence would read as a queued file that
+  never uploads.
+
+- **`ag-ui-attachments` event**, dispatched whenever the tray changes — a file
+  queued, an upload finishing or failing, a chip removed, the tray cleared after
+  a send. `detail` carries `{ attachments, pending }`: the durable refs of
+  everything settled, and how many are still in flight.
+
+  ⭐ **This is what makes `sendMessage` usable with files at all.** The tray only
+  ever spoke to the built-in Send button, so a host composer had no way to tell a
+  settled upload from one still uploading — the same information the built-in
+  Send needs, which was simply not exposed. The tray's `onChange` hook already
+  existed and nothing was wired to it.
+
+### Changed
+
+- **Assigning a connect-time-only attribute after the element has connected now
+  warns**, instead of being silently ignored: `data-attachments-url`,
+  `data-attachment-accept`, `data-attachment-max-bytes`, `data-transcribe-url`,
+  `data-threads-url`, `data-tools-url`, `data-skills-url`, `data-skills`,
+  `data-prompt-chips`, `data-slash-commands`, `data-theme-toggle`,
+  `data-strings`, `data-icon-url`.
+
+  Each is read once while connecting, to decide what chrome exists at all, and
+  no later read revisits the decision. ⚠ **The symptom is an affordance that
+  simply never appears** — which reads as a broken component rather than a
+  mis-timed assignment, and it is the common React/Vue shape: the element mounts
+  on the first render pass and the framework patches attributes in on the next.
+
+  Set them before the element enters the DOM, or remove and re-insert it to
+  apply a new value. ⭐ The attributes that genuinely *are* re-read per use —
+  `data-runs-url`, `data-page-actions`, `data-text-animation`,
+  `data-tool-display`, `endpoint`, and CSS-reactive `theme` / `collapsed` — are
+  deliberately excluded, since a late change works there and a warning would be
+  wrong.
+
+### Fixed
+
+- **The checkpoint panel now follows the theme.** Its rules read `--agui-surface`
+  / `--agui-border` / `--agui-hover` — note `--agui-`, not the `--ag-ui-`
+  namespace every other rule uses — each with a hardcoded light-mode fallback.
+  So the panel ignored `theme="dark"` entirely and rendered light-on-dark unless
+  a host happened to set three variables documented nowhere. Now derived from the
+  real theme tokens, with a new theme-aware `--ag-ui-hover` defined in every
+  theme block. ⭐ The fallbacks are what hid it: they made an unthemed panel look
+  deliberate.
+
+  `checkpoints-title` and `checkpoint-label` also gain `part` attributes — they
+  carried classes only, so neither could be styled from outside the shadow root.
+
+- **Markdown tables are styled.** `table` / `thead` / `tbody` / `tr` / `th` /
+  `td` are all in the sanitizer's `ALLOWED_TAGS`, so an agent emitting a table
+  rendered it — completely unstyled, overflowing its bubble. Wide tables now
+  scroll inside their own box rather than pushing the layout sideways.
+
+- **Sending while a file is still uploading now says so.** `readyRefs()` returns
+  only settled uploads and `clearReady()` deliberately keeps the rest for a
+  follow-up message — so the file was never lost, but the message went without
+  it and nothing indicated that. Attachments are frequently the entire point of
+  the message, which is what made the silence the defect. An inline notice now
+  names how many are still uploading and that they remain attached.
+
+  Send is deliberately **not** disabled while uploads are pending: that would
+  fight the tray's documented "keep for a follow-up" behaviour and could wedge
+  on an upload that never settles.
+
 ## [0.16.0] — 2026-08-09
 
 ### Added
@@ -748,7 +877,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.16.0...HEAD
+[Unreleased]: https://github.com/Artui/ag-ui-web-component/compare/v0.18.0...HEAD
+[0.18.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.17.0...v0.18.0
+[0.17.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.16.0...v0.17.0
 [0.16.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.15.0...v0.16.0
 [0.15.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.14.1...v0.15.0
 [0.14.1]: https://github.com/Artui/ag-ui-web-component/compare/v0.14.0...v0.14.1

package/README.md

@@ -150,8 +150,8 @@ That's the whole integration: an `endpoint` attribute pointing at your AG-UI ser
 | `title-text` | — | Header label; defaults to `"Assistant"`. The only **observed** attribute (live-updates the header). |
 | `data-tool-display` | `toolDisplay` | Tool-call card detail: `inline` / `minimal` / `compact` / `full` (default `full`). |
 | `data-text-animation` | — | Incoming-text reveal: `none` (default) / `fade` / `word`. |
-| `data-prompt-chips` | — | `"true"` to surface skills as chips. |
-| `data-slash-commands` | — | `"true"` to enable the `/`-command palette. |
+| `data-prompt-chips` | — | Present (bare, or any value but `"false"`) to surface skills as chips. |
+| `data-slash-commands` | — | Present (bare, or any value but `"false"`) to enable the `/`-command palette. |
 | `data-skills` | — | Inline JSON skill catalog. |
 | `data-skills-url` | — | URL of a JSON skill catalog (fetched with `headers`). |
 | `data-tools-url` | — | URL of a server tool-label catalog (`[{ name, summary, description? }]`), fetched with `headers`; labels tool-call cards for server-side tools. |
@@ -194,8 +194,39 @@ labels are fetched automatically — per card, `x-summary` → an explicit
 
 **Properties** (selected): `sharedState` — AG-UI shared state (documented under Tools & state).
 
-**Methods**: `registerTool`, `registerPageState`, `setSkills`, `appendMessage`, `newChat`,
-`setCollapsed`, `toggleCollapsed`.
+Code blocks in an agent's answer carry a **copy button**, revealed on hover or
+keyboard focus and styleable via the `code-copy` part. Override its labels with
+the `copyCode` / `copied` / `copyFailed` strings.
+
+**Methods**: `registerTool`, `registerPageState`, `setSkills`, `sendMessage`, `attachFile`,
+`appendMessage`, `newChat`, `setCollapsed`, `toggleCollapsed`.
+
+### Sending from your own UI
+
+`sendMessage(content, attachments?)` sends as if the user had typed it — user bubble,
+`ag-ui-submit` event, run started. Use it for an "Ask about this order" button, a command
+palette, or a composer of your own replacing the built-in one. It no-ops while a run is in
+flight and for an entirely empty message, and unlike the built-in Send it does **not** consult
+the attachment tray: what you pass is what is sent, so your composer stays in charge of its
+own state.
+
+`attachFile(file)` queues a file into the tray exactly as the picker and drag-and-drop do, with
+the same validation and progress chip. It returns `false` when uploads are not configured
+(no `data-attachments-url` and no `uploadHandler`) — the only way to tell, since with no tray
+there is nothing to report through.
+
+Uploading is asynchronous, so watch `ag-ui-attachments` for the result. Its `detail` carries
+`{ attachments, pending }`: the durable refs of everything that has finished, and how many are
+still in flight. Send once `pending` is `0`, or you will leave files behind.
+
+```js
+chat.addEventListener("ag-ui-attachments", (e) => {
+  const { attachments, pending } = e.detail;
+  sendButton.disabled = pending > 0;
+  sendButton.onclick = () => chat.sendMessage(input.value, attachments);
+});
+chat.attachFile(fileInput.files[0]);
+```
 
 A self-contained live playground lives in [`demo/`](demo/) — run `make demo` to serve it against a
 mock AG-UI server.
@@ -1162,10 +1193,14 @@ This produces, into `dist/`:
   them.
 - `ag-ui-web-component.bundle.js` — the **vendored** ESM bundle, every dependency inlined and
   minified, suitable for direct `<script type="module">` embedding.
-- `ag-ui-web-component.bundle.css` — the extracted CSS sidecar.
 - `index.d.ts` (+ source maps) — type declarations; emitted `.js` import specifiers are preserved
   so consumers resolve types without extra flags.
 
+There is **no CSS file to load**. The styles are a template literal injected into
+the shadow root at construction, so they ship inside the JS and cannot leak into
+the host page. Restyle through the [CSS custom properties](#theming-density-and-placement) and the
+`part` attributes, not a stylesheet override.
+
 Other workflow targets (all identical in name to the sibling Python packages):
 
 | Target | What it does |