@artooi/ag-ui-web-component 0.28.0 → 0.29.0

package/src/ui/styles.ts

@@ -571,6 +571,7 @@ export const STYLES = `
   opacity: 0;
 }
 
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .messages-wrap,
 :host([collapsed]:is([placement="embedded"], [placement="page"])) .messages,
 :host([collapsed]:is([placement="embedded"], [placement="page"])) .input-row,
 :host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-chips,
@@ -579,9 +580,113 @@ export const STYLES = `
   display: none;
 }
 
+/* Jump-to-latest: shown only once the reader has scrolled away *and* missed
+   something. Anchored to the panel rather than the list so it does not scroll
+   with the content it is offering to scroll to. */
+/* The transcript's own box, and the only one whose foot is the transcript's
+   foot. The panel's foot is below the composer, the chips and the footer. */
+.messages-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.jump-latest {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--_pad);
+  z-index: 2;
+  display: none;
+  align-items: center;
+  gap: 0.35em;
+  padding: 0.4em 0.9em;
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  /* A raised surface, not the panel's own background. Reusing --_bg made the
+     pill the same colour as everything behind it, leaving a 1px border and a
+     shadow to carry the whole affordance -- and a dark-on-dark shadow carries
+     nothing. --_hover is the token that already means "lifted off the panel",
+     and it separates in both themes without competing with the accent the send
+     button owns. */
+  background: var(--_hover);
+  color: var(--_text);
+  font: inherit;
+  font-size: 0.85em;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+}
+
+.jump-latest[data-missed="true"] {
+  display: flex;
+}
+
+.jump-latest:hover {
+  border-color: var(--_accent);
+}
+
+/* The offer to quote a selection. Positioned in script against the transcript
+   box, which is the only ancestor whose top and foot are the transcript's --
+   the same reason .jump-latest lives here. The translate is the half the
+   script does not do: script sets the point the offer hangs from, CSS decides
+   which corner of the offer that point is. */
+.quote-selection {
+  position: absolute;
+  z-index: 2;
+  transform: translate(-50%, -100%);
+  padding: 0.25em 0.7em;
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  background: var(--_hover);
+  color: var(--_text);
+  font: inherit;
+  font-size: 0.8em;
+  line-height: 1.6;
+  white-space: nowrap;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+}
+
+/* Flipped under the selection when there was no room above it. Only the
+   vertical half of the translate changes: it still hangs from its own centre
+   horizontally. */
+.quote-selection[data-below="true"] {
+  transform: translate(-50%, 0);
+}
+
+.quote-selection:hover {
+  border-color: var(--_accent);
+}
+
+/* Screen-reader-only status region. Off-screen rather than display:none or
+   visibility:hidden, both of which take the element out of the accessibility
+   tree entirely -- a hidden live region announces nothing at all, which is the
+   classic way this pattern is written wrong.
+
+   The 1px box with clip-path, rather than width/height 0, is the shape that
+   survives: a zero-sized element is dropped from the tree by some engines. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
 .messages {
   flex: 1;
   overflow-y: auto;
+  /* The browser's own scroll anchoring competes with the scroller for the same
+     job and wins unpredictably -- it can hold the view still exactly when we
+     want to follow. Turned off so following is decided in one place. Safari
+     does not implement it, which is itself a reason not to depend on it. */
+  overflow-anchor: none;
   padding: var(--_pad);
   display: flex;
   flex-direction: column;
@@ -1747,6 +1852,7 @@ export const STYLES = `
 
 .confirm-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
 }
@@ -1773,6 +1879,99 @@ export const STYLES = `
   color: #ffffff;
 }
 
+/* The session waiver. Deliberately the quietest of the three: it is the widest
+   decision on the card, so it should be reachable without being the one the eye
+   lands on when the user means to say yes once. */
+.confirm-btn--always {
+  font-weight: 500;
+  opacity: 0.85;
+}
+
+.confirm-btn--always:hover,
+.confirm-btn--always:focus-visible {
+  opacity: 1;
+}
+
+/* Editable arguments on an approval card. A plain field rather than a code
+   editor: it holds the JSON a card already displays, and the only interaction
+   is correcting a value before letting the call run. */
+.approval-edit {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.approval-args {
+  box-sizing: border-box;
+  width: 100%;
+  resize: vertical;
+  border: 1px solid var(--_border);
+  border-radius: 8px;
+  padding: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85em;
+  background: var(--_bg);
+  color: var(--_fg);
+}
+
+.approval-args:focus-visible {
+  border-color: var(--_accent);
+  outline: none;
+}
+
+.approval-error {
+  font-size: 0.85em;
+  color: var(--_danger);
+}
+
+/* Message action row. Sits under a finished assistant bubble.
+
+   The wrap is insurance rather than a fix: these buttons are glyph-only, so at
+   every width tested they fit on one line and removing the wrap changes
+   nothing. It is here because the confirmation row one release earlier did
+   overflow when it gained a third button, off the left edge and outside its own
+   card, and the difference between the two rows is only that this one's labels
+   are icons today. */
+.message-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  /* Negative, and that is the point. The answer group is a flex column with its
+     own gap, so a positive margin here pushes the row further from the message
+     it acts on than the next card is below it -- the buttons then read as
+     belonging to whatever follows. Pulling back inside the gap is what makes
+     them the message's own. */
+  margin-top: -6px;
+}
+
+.message-action {
+  border: none;
+  border-radius: 6px;
+  padding: 2px 6px;
+  font: inherit;
+  line-height: 1.2;
+  cursor: pointer;
+  background: transparent;
+  color: var(--_muted);
+  opacity: 0.75;
+}
+
+.message-action:hover,
+.message-action:focus-visible {
+  opacity: 1;
+  background: var(--_border);
+}
+
+.message-action[aria-pressed="true"] {
+  opacity: 1;
+  color: var(--_accent);
+}
+
+.message-action--confirmed {
+  opacity: 1;
+  color: var(--_accent);
+}
+
 /* Approval card — the server-side-tool gate (approve/deny an interrupt). */
 .approval {
   align-self: stretch;
@@ -1917,6 +2116,34 @@ export const STYLES = `
   border-color: var(--_accent);
 }
 
+/* Follow-up suggestion chips. Deliberately the skill chips' shape rather than a
+   second chip vocabulary -- both are "a question you could ask", and the only
+   difference is who chose it. Inside the transcript, so they scroll with the
+   answer they follow instead of hovering above the composer. */
+.suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-self: stretch;
+}
+
+.suggestion-chip {
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  padding: 4px 12px;
+  font: inherit;
+  font-size: 0.9em;
+  text-align: left;
+  cursor: pointer;
+  background: var(--_assistant-bg);
+  color: var(--_fg);
+}
+
+.suggestion-chip:hover,
+.suggestion-chip:focus-visible {
+  border-color: var(--_accent);
+}
+
 .skill-palette {
   margin: 8px 12px 0;
   display: flex;

package/src/ui/suggestion_chips.ts

@@ -0,0 +1,73 @@
+import type { UiStrings } from "./ui_strings.js";
+
+/**
+ * Most prompts one push may draw.
+ *
+ * **Keep in step with `MAX_SUGGESTIONS` in django-ag-ui's
+ * `agent/suggestions_activity.py`**, which raises past it. Mirroring is the
+ * whole point: this side silently draws no more than its limit and has no
+ * channel to report the difference, so a producer that does not know the same
+ * number ships suggestions that never appear. That is the hole the chart bounds
+ * exist to close, and it was found there by shipping it.
+ */
+export const MAX_SUGGESTIONS = 4;
+
+/** Longest one prompt may be. Mirrored for the same reason as the count. */
+export const MAX_SUGGESTION_CHARS = 120;
+
+/** The `prompts` a `suggestions` activity carries, or `null` when it carries none. */
+export function suggestionPrompts(content: unknown): string[] | null {
+  if (typeof content !== "object" || content === null) {
+    return null;
+  }
+  const raw = (content as { prompts?: unknown }).prompts;
+  if (!Array.isArray(raw)) {
+    return null;
+  }
+  const prompts = raw
+    .filter((prompt): prompt is string => typeof prompt === "string")
+    .map((prompt) => prompt.trim())
+    .filter((prompt) => prompt !== "" && prompt.length <= MAX_SUGGESTION_CHARS)
+    .slice(0, MAX_SUGGESTIONS);
+  return prompts.length === 0 ? null : prompts;
+}
+
+/**
+ * Draw follow-up prompts as chips that send themselves when clicked.
+ *
+ * Returns `null` when nothing survives, which is the registry's signal to draw
+ * nothing rather than an empty row -- the same contract the chart renderer uses
+ * for a spec it cannot draw.
+ *
+ * Buttons rather than links or list items: each one performs an action in the
+ * page, and the thing it sends is the label, so the accessible name is the
+ * prompt itself and needs no `aria-label` restating it.
+ */
+export function renderSuggestionChips(
+  content: unknown,
+  strings: UiStrings,
+  onPick: (prompt: string) => void,
+): HTMLElement | null {
+  const prompts = suggestionPrompts(content);
+  if (prompts === null) {
+    return null;
+  }
+  const row = document.createElement("div");
+  row.className = "suggestions";
+  row.setAttribute("part", "suggestions");
+  // A group, labelled: without it a screen reader meets a row of unrelated
+  // buttons with no hint that they are the assistant's offer rather than the
+  // page's own controls.
+  row.setAttribute("role", "group");
+  row.setAttribute("aria-label", strings.suggestions);
+  for (const prompt of prompts) {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "suggestion-chip";
+    chip.setAttribute("part", "suggestion-chip");
+    chip.textContent = prompt;
+    chip.addEventListener("click", () => onPick(prompt));
+    row.appendChild(chip);
+  }
+  return row;
+}

package/src/ui/thread_drawer.ts

@@ -1,5 +1,5 @@
 import type { ThreadMeta } from "../core/conversation_store.js";
-import { relativeTime } from "./relative_time.js";
+import { type RelativeTimeFormatter, relativeTime } from "./relative_time.js";
 import { DEFAULT_UI_STRINGS, type UiStrings } from "./ui_strings.js";
 
 /** Actions the host ({@link AgUiChat}) wires to the drawer's rows. */
@@ -35,6 +35,7 @@ export class ThreadDrawer {
   readonly #heading: HTMLSpanElement;
   readonly #newButton: HTMLButtonElement;
   readonly #list: HTMLDivElement;
+  #formatRelativeTime: RelativeTimeFormatter | null = null;
   #strings: UiStrings;
   #threads: readonly ThreadMeta[] = [];
   #activeId = "";
@@ -91,6 +92,25 @@ export class ThreadDrawer {
   }
 
   /** Re-localize the drawer's chrome and rows (the host calls this on connect). */
+  /**
+   * Replace the timestamp formatter, or restore the built-in with `null`.
+   *
+   * The built-in is deliberately locale-neutral -- there is no `Intl` anywhere
+   * in this component, so it never disagrees with a host's own formatting by
+   * guessing a locale. That is a defensible default and a poor requirement, so
+   * this is the way out.
+   */
+  setRelativeTimeFormatter(format: RelativeTimeFormatter | null): void {
+    this.#formatRelativeTime = format;
+  }
+
+  /** This row's timestamp, through the host's formatter when it set one. */
+  #formatTime(timestamp: number): string {
+    return this.#formatRelativeTime !== null
+      ? this.#formatRelativeTime(timestamp)
+      : relativeTime(timestamp, undefined, this.#strings);
+  }
+
   setStrings(strings: UiStrings): void {
     this.#strings = strings;
     this.#panel.setAttribute("aria-label", strings.chatHistory);
@@ -202,7 +222,7 @@ export class ThreadDrawer {
     const time = document.createElement("span");
     time.className = "drawer-row-time";
     time.setAttribute("part", "drawer-row-time");
-    time.textContent = relativeTime(meta.updatedAt, undefined, this.#strings);
+    time.textContent = this.#formatTime(meta.updatedAt);
     const preview = document.createElement("span");
     preview.className = "drawer-row-preview";
     preview.setAttribute("part", "drawer-row-preview");

package/src/ui/tool_call_card.ts

@@ -90,6 +90,14 @@ export class ToolCallCard {
   readonly #resultLabel: HTMLSpanElement;
   readonly #resultBody: HTMLPreElement;
   readonly #strings: UiStrings;
+  /**
+   * The arguments this call was made with.
+   *
+   * Retained rather than only rendered, because an approval interrupt names a
+   * `toolCallId` and nothing else -- so this card is the only place the args
+   * still exist when the user is asked to approve, edit or deny the call.
+   */
+  readonly args: Record<string, unknown>;
   #settled = false;
 
   constructor(
@@ -99,6 +107,7 @@ export class ToolCallCard {
     strings: UiStrings = DEFAULT_UI_STRINGS,
   ) {
     this.#strings = strings;
+    this.args = args;
 
     this.element = document.createElement("div");
     this.element.className = "tool-call";

package/src/ui/ui_strings.ts

@@ -33,6 +33,18 @@ export interface UiStrings {
   // ── Messages region ─────────────────────────────────────────────────────────
   /** `aria-label` of the scrolling message log. */
   conversation: string;
+  /** The button offering to return to the foot of the transcript. */
+  jumpToLatest: string;
+  /** Announced when a turn starts. Screen-reader only; never rendered. */
+  announceResponding: string;
+  /** Announced when the answer has finished arriving. Screen-reader only. */
+  announceAnswerReady: string;
+  /** Announced when a card is waiting for the user's decision. Token: `{count}`. */
+  announceAwaitingDecision: string;
+  /** Announced when the user stopped the run. Screen-reader only. */
+  announceStopped: string;
+  /** Announced when the run failed. Screen-reader only. */
+  announceFailed: string;
   /** `aria-label` of the "thinking" pending indicator, and the thoughts region's
    * header while the model is still reasoning. */
   thinking: string;
@@ -48,6 +60,10 @@ export interface UiStrings {
   declinedAction: string;
   /** A navigating tool's card text while the page reloads. */
   navigating: string;
+  /** Notice shown when the server replaced the conversation wholesale. */
+  historyReplaced: string;
+  /** Notice shown when a pushed chart could not be drawn and was removed. */
+  chartUndrawable: string;
   /** Missing-placeholder skill hint. Tokens: `{title}`, `{fields}`. */
   skillNeeds: string;
   /** Notice shown when the agent condensed earlier turns. Token: `{count}`. */
@@ -116,8 +132,32 @@ export interface UiStrings {
   details: string;
 
   // ── Confirmation card ───────────────────────────────────────────────────────
+  /** `aria-label` of the editable arguments field on an approval card. */
+  approvalEditArgs: string;
+  /** Shown when the edited arguments are not valid JSON. */
+  approvalArgsInvalid: string;
+  /** Shown when the edited arguments parse but are not a JSON object. */
+  approvalArgsNotAnObject: string;
+  /** `aria-label` of the follow-up suggestion chips row. */
+  suggestions: string;
+  /** `aria-label` of a message's action row. */
+  messageActions: string;
+  /** The offer that floats beside a selection in the transcript. */
+  quoteSelection: string;
+  /** Copy this message (button `title` / `aria-label`). Its confirmation and
+   * failure text are the code block's `copied` / `copyFailed`, which say the
+   * same thing about the same clipboard. */
+  copyMessage: string;
+  /** Ask for a different answer to the same question. */
+  retryMessage: string;
+  /** Rate this answer as good. */
+  feedbackUp: string;
+  /** Rate this answer as poor. */
+  feedbackDown: string;
   /** `aria-label` of the inline confirmation card. */
   confirmAction: string;
+  /** Waive confirmation for this tool for the rest of the session. Token: `{tool}`. */
+  confirmAlways: string;
   /** Generic confirmation prompt when a tool has no `x-confirm`. Token: `{tool}`. */
   confirmRun: string;
   /** Confirm button. */
@@ -229,6 +269,12 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   forkedRun: "branched",
 
   conversation: "Conversation",
+  jumpToLatest: "Jump to latest",
+  announceResponding: "Assistant is responding",
+  announceAnswerReady: "Assistant answered",
+  announceAwaitingDecision: "{count} action is waiting for your approval",
+  announceStopped: "Response stopped",
+  announceFailed: "The response failed",
   thinking: "Assistant is thinking…",
   thoughts: "Thoughts",
   stopped: "⏹ Stopped",
@@ -236,6 +282,9 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   noResult: "No result returned.",
   declinedAction: "User declined the action.",
   navigating: "Navigating…",
+  historyReplaced:
+    "The server replaced this conversation's history. Reload to see the updated transcript.",
+  chartUndrawable: "A chart could not be drawn from the data sent, so it was removed.",
   historyCompacted: "Earlier turns condensed to fit the context window ({count} removed)",
   usingSkill: "Using skill {name}",
   runInterrupted: "The previous response didn’t finish — the page changed before it arrived.",
@@ -270,7 +319,18 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   declinedLabel: "Declined",
   details: "Details",
 
+  approvalEditArgs: "Edit the arguments before approving",
+  approvalArgsInvalid: "That is not valid JSON, so nothing was sent.",
+  approvalArgsNotAnObject: "Arguments have to be a JSON object.",
+  suggestions: "Suggested follow-ups",
+  messageActions: "Message actions",
+  quoteSelection: "Quote",
+  copyMessage: "Copy message",
+  retryMessage: "Try again",
+  feedbackUp: "Good answer",
+  feedbackDown: "Poor answer",
   confirmAction: "Confirm action",
+  confirmAlways: "Always allow",
   confirmRun: "Run “{tool}”?",
   confirm: "Confirm",
   cancel: "Cancel",

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.28.0";
+export const VERSION: string = "0.29.0";