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

package/dist/constants.d.ts

@@ -77,12 +77,17 @@ export declare const DEFAULT_ATTACHMENT_MAX_BYTES: number;
  * How much detail a tool-call card shows. Set via the `data-tool-display`
  * attribute on `<ag-ui-chat>`; defaults to `full` (back-compatible).
  *
+ * - `inline` — the lightest mode: a single status row (icon + summary) with no
+ *   surrounding card chrome, the result tucked behind its own toggle. Reads as
+ *   one line of the answer rather than a boxed card — pairs with the answer
+ *   well (page mode).
  * - `minimal` — just the tool name + status pill. No args, no result body.
  * - `compact` — name + status, with args *and* result tucked behind a single
  *   collapsed "Details" toggle. The light default for dense UIs.
  * - `full` — args shown inline, result behind its own toggle (the original).
  */
 export declare const TOOL_DISPLAY: {
+    readonly INLINE: "inline";
     readonly MINIMAL: "minimal";
     readonly COMPACT: "compact";
     readonly FULL: "full";

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAGA,wEAAwE;AACxE,eAAO,MAAM,WAAW,eAAe,CAAC;AAExC;;;;GAIG;AACH,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C,qCAAqC;AACrC,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,kBAAkB,CAAC;AAEjD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,cAAc,CAAC;AAEzC;;;;GAIG;AACH,eAAO,MAAM,aAAa,cAAc,CAAC;AAEzC;;;;;GAKG;AACH,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,yEAAyE;AACzE,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,QAAmB,CAAC;AAE7D;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY;;;;CAIf,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAGA,wEAAwE;AACxE,eAAO,MAAM,WAAW,eAAe,CAAC;AAExC;;;;GAIG;AACH,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C,qCAAqC;AACrC,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,kBAAkB,CAAC;AAEjD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,cAAc,CAAC;AAEzC;;;;GAIG;AACH,eAAO,MAAM,aAAa,cAAc,CAAC;AAEzC;;;;;GAKG;AACH,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,yEAAyE;AACzE,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,QAAmB,CAAC;AAE7D;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY;;;;;CAKf,CAAC"}

package/dist/core/ag_ui_chat.d.ts

@@ -184,6 +184,10 @@ export declare class AgUiChat extends HTMLElement {
      * Assistant content is rendered as sanitised markdown/HTML; user content
      * stays literal text (no need to parse what the user typed, and it avoids
      * rendering user-authored markup).
+     *
+     * Assistant bubbles land in the current answer group (WELL-1), opening one if
+     * needed; a user bubble closes the prior group and sits directly in the list
+     * (the well wraps the *assistant* turn, the user message precedes it).
      */
     appendMessage(role: MessageRole, content: string): HTMLDivElement;
 }

package/dist/core/ag_ui_chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ag_ui_chat.d.ts","sourceRoot":"","sources":["../../src/core/ag_ui_chat.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ag_ui_chat.d.ts","sourceRoot":"","sources":["../../src/core/ag_ui_chat.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -24,6 +24,7 @@ var ATTACHMENT_STATUS = {
 };
 var DEFAULT_ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
 var TOOL_DISPLAY = {
+  INLINE: "inline",
   MINIMAL: "minimal",
   COMPACT: "compact",
   FULL: "full"
@@ -3488,6 +3489,17 @@ var STYLES = `
   --ag-ui-danger: #b91c1c;
   --ag-ui-muted: #6b7280;
 
+  /* Tool-call status icon glyphs (override to re-theme) + spinner speed.
+     The pending state is the animated ring; the settled states use these. */
+  --ag-ui-tool-icon-done: "\u2713";
+  --ag-ui-tool-icon-error: "\u2715";
+  --ag-ui-tool-icon-declined: "\u2298";
+  --ag-ui-tool-spin-duration: 0.7s;
+
+  /* Answer well (opt-in via data-answer-well) \u2014 boxes a whole assistant turn. */
+  --ag-ui-well-bg: transparent;
+  --ag-ui-well-border: var(--ag-ui-border);
+
   /* Surface \u2014 set --ag-ui-shadow: none for a flush, embedded panel. */
   --ag-ui-shadow: 0 12px 32px rgba(20, 20, 50, 0.18);
   --ag-ui-font: inherit;
@@ -3510,6 +3522,8 @@ var STYLES = `
   --ag-ui-inset: auto 24px 24px auto;
   --ag-ui-max-width: calc(100vw - 48px);
   --ag-ui-max-height: calc(100vh - 48px);
+  /* Reading-column width for placement="page" (full-bleed, centred content). */
+  --ag-ui-content-max-width: 820px;
 
   position: var(--ag-ui-position);
   inset: var(--ag-ui-inset);
@@ -3597,6 +3611,48 @@ var STYLES = `
   --ag-ui-radius: 0;
 }
 
+/* Page (PAGE-1): full-bleed background with a centred reading column. Unlike
+   "full" (edge-to-edge, left-aligned messages) the content sits in a column
+   capped at --ag-ui-content-max-width. The column is produced by symmetric auto
+   padding on the scroll area + composer (no per-row wrapper), so user pills
+   still right-align and the assistant well spans the column. */
+:host([placement="page"]) {
+  --ag-ui-inset: 0;
+  --ag-ui-width: 100vw;
+  --ag-ui-height: 100vh;
+  --ag-ui-max-width: 100vw;
+  --ag-ui-max-height: 100vh;
+  --ag-ui-radius: 0;
+}
+
+:host([placement="page"]) .messages {
+  padding-inline: max(var(--ag-ui-pad), calc((100% - var(--ag-ui-content-max-width)) / 2));
+}
+
+:host([placement="page"]) .input-row {
+  padding-inline: max(12px, calc((100% - var(--ag-ui-content-max-width)) / 2));
+}
+
+/* The rows between the message list and the composer (skill chips, the
+   /-command palette, the missing-placeholder hint, the upload tray) line up
+   with the column too \u2014 chips are padding-based, the palette/hint/tray are
+   margin-based, so each gets its own inline axis nudged by the same gutter. */
+:host([placement="page"]) .skill-chips,
+:host([placement="page"]) .attachment-tray {
+  padding-inline: max(12px, calc((100% - var(--ag-ui-content-max-width)) / 2));
+}
+
+:host([placement="page"]) .skill-palette,
+:host([placement="page"]) .skill-hint {
+  margin-inline: max(12px, calc((100% - var(--ag-ui-content-max-width)) / 2));
+}
+
+/* In the reading column the assistant well uses the full width; the user
+   message stays a right-aligned pill (its default align-self + max-width). */
+:host([placement="page"]) .message--assistant {
+  max-width: 100%;
+}
+
 /* Sidebar (CUST-3): a full-height docked panel that slides open/closed and
    collapses to a slim icon rail (not the floating launcher). Docked right by
    default; data-side="left" docks it left. Overlay by default \u2014 set
@@ -3793,6 +3849,27 @@ var STYLES = `
   display: none;
 }
 
+/* \u2500\u2500 Answer group / well (WELL-1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   One .answer per assistant turn wraps the streamed text, its tool cards,
+   and the pending indicator so a whole answer reads (and can be boxed) as one
+   unit. A flex column on the message-list gap, stretched to the list width so
+   its children keep their own left/right alignment. data-answer-well opts into
+   the bordered "well"; without it the layout is today's flat stack. */
+.answer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ag-ui-space);
+  align-self: stretch;
+  min-width: 0;
+}
+
+:host([data-answer-well]) .answer {
+  padding: var(--ag-ui-pad);
+  background: var(--ag-ui-well-bg);
+  border: 1px solid var(--ag-ui-well-border);
+  border-radius: var(--ag-ui-radius);
+}
+
 .message {
   max-width: 80%;
   padding: var(--ag-ui-msg-pad);
@@ -3965,10 +4042,71 @@ var STYLES = `
 }
 
 .tool-call-name {
+  flex: 1;
+  min-width: 0;
   font-weight: 600;
   word-break: break-word;
 }
 
+/* Leading status icon (CARD-1). Empty in the DOM \u2014 the glyph/spinner is drawn
+   here from the card's data-status, so it stays themeable. */
+.tool-call-icon {
+  flex: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  font-size: 12px;
+  line-height: 1;
+}
+
+/* Pending: a real spinning ring. Speed is tunable; reduced motion stops it. */
+.tool-call[data-status="pending"] .tool-call-icon {
+  border: 2px solid var(--ag-ui-muted);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: ag-ui-tool-spin var(--ag-ui-tool-spin-duration) linear infinite;
+}
+
+@keyframes ag-ui-tool-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Settled: a themeable glyph coloured by outcome. */
+.tool-call[data-status="done"] .tool-call-icon::before {
+  content: var(--ag-ui-tool-icon-done);
+  color: var(--ag-ui-success);
+}
+
+.tool-call[data-status="error"] .tool-call-icon::before {
+  content: var(--ag-ui-tool-icon-error);
+  color: var(--ag-ui-danger);
+}
+
+.tool-call[data-status="declined"] .tool-call-icon::before {
+  content: var(--ag-ui-tool-icon-declined);
+  color: var(--ag-ui-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tool-call[data-status="pending"] .tool-call-icon {
+    animation: none;
+  }
+}
+
+/* Inline display mode (CARD-1): the lightest card \u2014 drop the box chrome so the
+   status row reads as one line of the answer; the result toggle still expands
+   below it. */
+.tool-call[data-display="inline"] {
+  max-width: 100%;
+  background: transparent;
+  border: none;
+  padding: 2px 0;
+  gap: 2px;
+}
+
 .tool-call-status {
   flex: none;
   padding: 1px 8px;
@@ -4740,15 +4878,19 @@ var ToolCallCard = class {
     const head = document.createElement("div");
     head.className = "tool-call-head";
     head.setAttribute("part", "tool-card-head");
+    const icon = document.createElement("span");
+    icon.className = "tool-call-icon";
+    icon.setAttribute("part", "tool-card-icon");
+    icon.setAttribute("aria-hidden", "true");
     const label = document.createElement("span");
     label.className = "tool-call-name";
     label.setAttribute("part", "tool-card-name");
-    label.textContent = `\u{1F527} ${summary ?? name}`;
+    label.textContent = summary ?? name;
     this.#status = document.createElement("span");
     this.#status.className = "tool-call-status";
     this.#status.setAttribute("part", "tool-card-status");
     this.#status.textContent = statusLabels(strings)[TOOL_CALL_STATUS.PENDING];
-    head.append(label, this.#status);
+    head.append(icon, label, this.#status);
     this.element.append(head);
     if (mode === TOOL_DISPLAY.FULL) {
       const argsEl = document.createElement("pre");
@@ -4764,8 +4906,8 @@ var ToolCallCard = class {
   }
   /**
    * Flip the status pill to ``status`` and, unless in `minimal` mode, append a
-   * collapsed body behind a click-to-expand toggle: the result alone (`full`),
-   * or the args + result together (`compact`).
+   * collapsed body behind a click-to-expand toggle: the result alone (`full` /
+   * `inline`), or the args + result together (`compact`).
    */
   settle(status, text2) {
     this.#settled = true;
@@ -5481,6 +5623,13 @@ var AgUiChat = class extends HTMLElement {
   // it; ≤1 ⇒ it arrived at once and the word reveal is appropriate.
   #streamDeltas = 0;
   #pending = null;
+  // The current assistant turn's grouping container (WELL-1). One `.answer`
+  // wraps everything a single answer produces — streamed text, tool cards, the
+  // pending indicator — so it can be boxed as one "well" by CSS. Opened on the
+  // turn's first run start, closed at settle, so it spans the whole multi-round
+  // frontend-tool loop (which is several AG-UI runs), not one run. `null`
+  // between turns; user bubbles never enter it.
+  #currentGroup = null;
   #threadId = "";
   #initialMessages = [];
   // Skill catalog by source; merged backend → embed → client (later wins).
@@ -5614,7 +5763,7 @@ var AgUiChat = class extends HTMLElement {
    */
   get toolDisplay() {
     const attr = this.getAttribute("data-tool-display");
-    if (attr === TOOL_DISPLAY.MINIMAL || attr === TOOL_DISPLAY.COMPACT) {
+    if (attr === TOOL_DISPLAY.INLINE || attr === TOOL_DISPLAY.MINIMAL || attr === TOOL_DISPLAY.COMPACT) {
       return attr;
     }
     return TOOL_DISPLAY.FULL;
@@ -5881,6 +6030,7 @@ Use the read_attachment tool with an id to read a file's contents.`
   #resetState() {
     this.#client = null;
     this.#streamingBubble = null;
+    this.#currentGroup = null;
     this.#hidePending();
     this.#toolCards.clear();
     this.#serverSettled.clear();
@@ -6012,6 +6162,10 @@ Use the read_attachment tool with an id to read a file's contents.`
    * Assistant content is rendered as sanitised markdown/HTML; user content
    * stays literal text (no need to parse what the user typed, and it avoids
    * rendering user-authored markup).
+   *
+   * Assistant bubbles land in the current answer group (WELL-1), opening one if
+   * needed; a user bubble closes the prior group and sits directly in the list
+   * (the well wraps the *assistant* turn, the user message precedes it).
    */
   appendMessage(role, content) {
     const bubble = document.createElement("div");
@@ -6019,14 +6173,34 @@ Use the read_attachment tool with an id to read a file's contents.`
     bubble.setAttribute("part", `message message-${role}`);
     if (role === MESSAGE_ROLE.ASSISTANT) {
       bubble.innerHTML = renderMarkdown(content, { allowImages: this.allowImages });
+      this.#ensureGroup().appendChild(bubble);
     } else {
+      this.#currentGroup = null;
       bubble.textContent = content;
+      this.#messages.appendChild(bubble);
     }
-    this.#messages.appendChild(bubble);
     this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
     return bubble;
   }
+  /**
+   * The open answer group, creating and appending it on first use. Everything a
+   * single assistant turn renders (text, tool cards, the pending indicator)
+   * goes inside it, so the opt-in `data-answer-well` styling can box the whole
+   * turn. Idempotent across the turn's runs — it persists until {@link #handlers}'
+   * `onSettled` nulls it.
+   */
+  #ensureGroup() {
+    if (this.#currentGroup === null) {
+      const group = document.createElement("div");
+      group.className = "answer";
+      group.setAttribute("part", "answer");
+      this.#currentGroup = group;
+      this.#messages.appendChild(group);
+      this.#updateEmptyState();
+    }
+    return this.#currentGroup;
+  }
   #render() {
     const style = document.createElement("style");
     style.textContent = STYLES;
@@ -6332,6 +6506,7 @@ Use the read_attachment tool with an id to read a file's contents.`
     return {
       onRunStart: () => {
         this.#setRunning(true);
+        this.#ensureGroup();
         this.#showPending();
       },
       onTextDelta: (buffer) => {
@@ -6382,6 +6557,11 @@ Use the read_attachment tool with an id to read a file's contents.`
             card.settle(TOOL_CALL_STATUS.DONE, this.#strings.noResult);
           }
         }
+        if (this.#currentGroup !== null && this.#currentGroup.childElementCount === 0) {
+          this.#currentGroup.remove();
+          this.#updateEmptyState();
+        }
+        this.#currentGroup = null;
       }
     };
   }
@@ -6392,7 +6572,7 @@ Use the read_attachment tool with an id to read a file's contents.`
     note.setAttribute("part", "stopped");
     note.setAttribute("role", "status");
     note.textContent = this.#strings.stopped;
-    this.#messages.appendChild(note);
+    this.#ensureGroup().appendChild(note);
     this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
   }
@@ -6416,7 +6596,7 @@ Use the read_attachment tool with an id to read a file's contents.`
       pending.appendChild(dot);
     }
     this.#pending = pending;
-    this.#messages.appendChild(pending);
+    this.#ensureGroup().appendChild(pending);
     this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
   }
@@ -6449,7 +6629,7 @@ Use the read_attachment tool with an id to read a file's contents.`
     const summary = typeof labelled === "string" ? labelled : this.toolSummaries[call.name] ?? this.#toolCatalog[call.name] ?? prettifyToolName(call.name);
     const card = new ToolCallCard(call.name, call.args, this.toolDisplay, summary, this.#strings);
     this.#toolCards.set(call.id, card);
-    this.#messages.appendChild(card.element);
+    this.#ensureGroup().appendChild(card.element);
     this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
     return card;
@@ -6496,7 +6676,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.7.0";
+var VERSION = "0.8.1";
 export {
   AgUiChat,
   AgUiClient,