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

package/src/ui/attach_copy_buttons.ts

@@ -0,0 +1,82 @@
+import type { UiStrings } from "./ui_strings.js";
+
+/** How long the button shows its "copied" confirmation before reverting. */
+const CONFIRM_MS = 1500;
+
+/**
+ * Give every fenced code block in `root` a copy button.
+ *
+ * An agent that answers 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 — is the one interaction the chat surface
+ * made harder than the page around it.
+ *
+ * Applied to **finished** bubbles only. The streaming bubble reassigns its
+ * `innerHTML` on every delta, so a button attached mid-stream would be
+ * discarded and rebuilt for each one; waiting until the turn ends costs
+ * nothing and does that work once.
+ *
+ * Idempotent: a bubble already processed is skipped, so a re-render or a second
+ * call cannot stack buttons.
+ */
+export function attachCopyButtons(root: ParentNode, strings: UiStrings): void {
+  for (const pre of Array.from(root.querySelectorAll("pre"))) {
+    const code = pre.querySelector("code");
+    if (code === null || pre.querySelector(".code-copy") !== null) {
+      continue;
+    }
+    pre.classList.add("has-copy");
+    pre.append(button(code, strings));
+  }
+}
+
+function button(code: Element, strings: UiStrings): HTMLButtonElement {
+  // Never null: `textContent` is nullable only on documents and doctypes,
+  // and this is always the `code` element `querySelector` just returned.
+  const text = code.textContent as string;
+  const copy = document.createElement("button");
+  copy.type = "button";
+  copy.className = "code-copy";
+  copy.setAttribute("part", "code-copy");
+  copy.textContent = strings.copyCode;
+  copy.title = strings.copyCode;
+  copy.setAttribute("aria-label", strings.copyCode);
+  copy.addEventListener("click", () => {
+    void writeText(text).then((ok) => {
+      // Say which of the two happened. A button that always claims success is
+      // worse than no button: the reader pastes stale clipboard content and
+      // finds out somewhere else entirely.
+      confirm(copy, ok ? strings.copied : strings.copyFailed, strings);
+    });
+  });
+  return copy;
+}
+
+/**
+ * Copy `text`, reporting whether it landed.
+ *
+ * The Clipboard API needs a secure context and a user gesture, and is simply
+ * absent in some embeddings, so its absence is an ordinary outcome rather than
+ * an error worth throwing at the host page.
+ */
+async function writeText(text: string): Promise<boolean> {
+  const clipboard = navigator.clipboard;
+  if (clipboard === undefined) {
+    return false;
+  }
+  try {
+    await clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function confirm(copy: HTMLButtonElement, message: string, strings: UiStrings): void {
+  copy.textContent = message;
+  copy.dataset["state"] = message === strings.copied ? "copied" : "failed";
+  setTimeout(() => {
+    copy.textContent = strings.copyCode;
+    delete copy.dataset["state"];
+  }, CONFIRM_MS);
+}

package/src/ui/attachment_tray.ts

@@ -102,6 +102,11 @@ export class AttachmentTray {
     return this.#items.some((item) => item.status === ATTACHMENT_STATUS.UPLOADING);
   }
 
+  /** How many chips are still uploading — the count a send-time notice names. */
+  pendingCount(): number {
+    return this.#items.filter((item) => item.status === ATTACHMENT_STATUS.UPLOADING).length;
+  }
+
   /** Whether the tray holds no chips. */
   isEmpty(): boolean {
     return this.#items.length === 0;

package/src/ui/checkpoint_menu.ts

@@ -26,6 +26,8 @@ export class CheckpointMenu {
   readonly #onPick: (runId: string, verb: CheckpointVerb) => void;
   readonly #list: HTMLDivElement;
   readonly #heading: HTMLSpanElement;
+  /** What had focus before the panel opened, restored on close. */
+  #lastFocused: HTMLElement | null = null;
   #strings: UiStrings;
   #runs: readonly RunRow[] = [];
 
@@ -41,6 +43,10 @@ export class CheckpointMenu {
     this.element.setAttribute("part", "checkpoints");
     this.element.setAttribute("role", "dialog");
     this.element.setAttribute("aria-label", strings.checkpoints);
+    // Focusable as a fallback: with no continuable runs the panel holds no
+    // controls at all, and a dialog that cannot take focus strands the
+    // keyboard user outside it with no way back except Tab-ing blind.
+    this.element.tabIndex = -1;
     this.element.hidden = true;
 
     const header = document.createElement("div");
@@ -48,6 +54,7 @@ export class CheckpointMenu {
     header.setAttribute("part", "checkpoints-header");
     this.#heading = document.createElement("span");
     this.#heading.className = "checkpoints-title";
+    this.#heading.setAttribute("part", "checkpoints-title");
     this.#heading.textContent = strings.checkpoints;
     header.append(this.#heading);
 
@@ -56,12 +63,7 @@ export class CheckpointMenu {
     this.#list.setAttribute("part", "checkpoints-list");
 
     this.element.append(header, this.#list);
-    this.element.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        this.close();
-      }
-    });
+    this.element.addEventListener("keydown", (event) => this.#onKeydown(event));
   }
 
   /** Replace the rows. The host passes only `continuable` runs. */
@@ -79,11 +81,61 @@ export class CheckpointMenu {
   }
 
   open(): void {
+    if (this.open_) {
+      return;
+    }
+    // Remember what had focus so it is restored on close, then move focus into
+    // the panel so a keyboard user lands inside the dialog rather than being
+    // left behind it. The thread drawer already does this; a dialog that takes
+    // no focus is one a keyboard user cannot reach and a screen reader does not
+    // announce, however correct its role and label.
+    this.#lastFocused = this.#activeElement() as HTMLElement | null;
     this.element.hidden = false;
+    (this.#focusables()[0] ?? this.element).focus();
   }
 
   close(): void {
+    if (!this.open_) {
+      return;
+    }
     this.element.hidden = true;
+    this.#lastFocused?.focus();
+    this.#lastFocused = null;
+  }
+
+  /** The focused element within this panel's root (shadow-aware). */
+  #activeElement(): Element | null {
+    return (this.element.getRootNode() as Document | ShadowRoot).activeElement;
+  }
+
+  /** The panel's tabbable controls, in document order. */
+  #focusables(): HTMLElement[] {
+    return Array.from(this.element.querySelectorAll<HTMLElement>("button, [tabindex]")).filter(
+      (el) => !el.hidden,
+    );
+  }
+
+  /** Escape closes; Tab is trapped so focus cannot wander behind the dialog. */
+  #onKeydown(event: KeyboardEvent): void {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      this.close();
+      return;
+    }
+    if (event.key !== "Tab") {
+      return;
+    }
+    const focusables = this.#focusables();
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = this.#activeElement();
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first?.focus();
+    }
   }
 
   get open_(): boolean {
@@ -112,6 +164,7 @@ export class CheckpointMenu {
 
     const label = document.createElement("span");
     label.className = "checkpoint-label";
+    label.setAttribute("part", "checkpoint-label");
     // A run id is opaque to a person, so the time is the identifying detail;
     // the id rides `title` for anyone who needs to correlate with server logs.
     label.textContent =

package/src/ui/styles.ts

@@ -11,6 +11,7 @@ export const STYLES = `
   --ag-ui-user-bg: #4f46e5;
   --ag-ui-user-fg: #ffffff;
   --ag-ui-assistant-bg: #f1f1f6;
+  --ag-ui-hover: #e7e7ee;
   --ag-ui-input-bg: var(--ag-ui-bg);
   --ag-ui-tool-bg: var(--ag-ui-assistant-bg);
   --ag-ui-tool-fg: var(--ag-ui-accent);
@@ -80,6 +81,7 @@ export const STYLES = `
   --ag-ui-bg: #15151f;
   --ag-ui-fg: #e8e8f2;
   --ag-ui-assistant-bg: #25253a;
+  --ag-ui-hover: #303049;
   --ag-ui-header-bg: #1f1f30;
   --ag-ui-header-fg: #e8e8f2;
   --ag-ui-border: #33334a;
@@ -92,6 +94,7 @@ export const STYLES = `
     --ag-ui-bg: #15151f;
     --ag-ui-fg: #e8e8f2;
     --ag-ui-assistant-bg: #25253a;
+    --ag-ui-hover: #303049;
     --ag-ui-header-bg: #1f1f30;
     --ag-ui-header-fg: #e8e8f2;
     --ag-ui-border: #33334a;
@@ -107,6 +110,7 @@ export const STYLES = `
   --ag-ui-accent: #3fb950;
   --ag-ui-user-bg: #238636;
   --ag-ui-assistant-bg: #161b22;
+  --ag-ui-hover: #21262d;
   --ag-ui-header-bg: #010409;
   --ag-ui-header-fg: #c9d1d9;
   --ag-ui-border: #30363d;
@@ -508,12 +512,86 @@ export const STYLES = `
   padding: 0;
 }
 
+/* The copy button sits inside the block, so it scrolls with wide code rather
+   than floating over the bubble. Positioning is on the pre; the button only
+   appears once one has been attached. */
+.message--assistant pre.has-copy {
+  position: relative;
+}
+
+.code-copy {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 2px 8px;
+  font: inherit;
+  font-size: 0.75em;
+  line-height: 1.6;
+  color: var(--ag-ui-muted);
+  background: var(--ag-ui-surface);
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+/* Revealed on hover or keyboard focus. Focus matters as much as hover here:
+   hidden-until-hover is invisible to a keyboard user otherwise. */
+.message--assistant pre.has-copy:hover .code-copy,
+.code-copy:focus-visible {
+  opacity: 1;
+}
+
+.code-copy:hover {
+  color: var(--ag-ui-text);
+  background: var(--ag-ui-hover);
+}
+
+.code-copy[data-state="copied"] {
+  opacity: 1;
+  color: var(--ag-ui-text);
+}
+
+.code-copy[data-state="failed"] {
+  opacity: 1;
+  color: var(--ag-ui-danger, var(--ag-ui-text));
+}
+
 .message--assistant blockquote {
   padding-left: 10px;
   border-left: 3px solid var(--ag-ui-border);
   color: var(--ag-ui-muted);
 }
 
+/* Markdown tables. table/thead/tbody/tr/th/td are all in
+   the sanitizer's ALLOWED_TAGS, so an agent emitting one renders it — and until
+   now rendered it entirely unstyled, overflowing the bubble. A wide table
+   scrolls inside its own box rather than stretching the message: the bubble is
+   width-constrained, so without this the columns either crush or push the
+   layout sideways. */
+.message--assistant table {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: 0.95em;
+}
+
+.message--assistant th,
+.message--assistant td {
+  padding: 6px 10px;
+  border: 1px solid var(--ag-ui-border);
+  text-align: left;
+  vertical-align: top;
+}
+
+.message--assistant th {
+  background: var(--ag-ui-hover);
+  font-weight: 600;
+}
+
 .pending {
   align-self: flex-start;
   display: inline-flex;
@@ -1264,9 +1342,9 @@ export const STYLES = `
   flex-direction: column;
   gap: 0.25rem;
   padding: 0.5rem;
-  border: 1px solid var(--agui-border, #d7d7dc);
+  border: 1px solid var(--ag-ui-border);
   border-radius: 0.5rem;
-  background: var(--agui-surface, #fff);
+  background: var(--ag-ui-assistant-bg);
   box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
   max-height: 60%;
   overflow-y: auto;
@@ -1297,7 +1375,7 @@ export const STYLES = `
 }
 
 .checkpoint-row:hover {
-  background: var(--agui-hover, #f3f3f5);
+  background: var(--ag-ui-hover);
 }
 
 .checkpoint-label {
@@ -1312,7 +1390,7 @@ export const STYLES = `
   font-size: 0.6875rem;
   padding: 0 0.375rem;
   border-radius: 999px;
-  background: var(--agui-hover, #f3f3f5);
+  background: var(--ag-ui-hover);
   opacity: 0.8;
 }
 
@@ -1321,14 +1399,14 @@ export const STYLES = `
   font-size: 0.75rem;
   cursor: pointer;
   padding: 0.125rem 0.5rem;
-  border: 1px solid var(--agui-border, #d7d7dc);
+  border: 1px solid var(--ag-ui-border);
   border-radius: 0.375rem;
   background: transparent;
   color: inherit;
 }
 
 .checkpoint-action:hover {
-  background: var(--agui-hover, #f3f3f5);
+  background: var(--ag-ui-hover);
 }
 
 .drawer-backdrop {

package/src/ui/ui_strings.ts

@@ -57,6 +57,8 @@ export interface UiStrings {
   runInterrupted: string;
   /** Tool-result content (and card text) when the page moved mid-run. */
   pageMoved: string;
+  /** Notice when Send ran while a file was still uploading. Token: `{n}`. */
+  attachmentsStillUploading: string;
 
   // ── Composer ────────────────────────────────────────────────────────────────
   /** `aria-label` of the message textarea. */
@@ -166,6 +168,12 @@ export interface UiStrings {
   /** Hours ago. Token: `{n}`. */
   hoursAgo: string;
   /** Title of the checkpoint panel. */
+  /** Label on a code block's copy button. */
+  copyCode: string;
+  /** Shown on the copy button after the code reached the clipboard. */
+  copied: string;
+  /** Shown when the clipboard was unavailable or refused the write. */
+  copyFailed: string;
   checkpoints: string;
   /** Empty state when no run can be continued. */
   noCheckpoints: string;
@@ -189,6 +197,9 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   collapse: "Collapse",
   expand: "Expand",
   toggleTheme: "Toggle theme",
+  copyCode: "Copy",
+  copied: "Copied",
+  copyFailed: "Copy failed",
   checkpoints: "Continue a run",
   noCheckpoints: "Nothing to continue yet.",
   resumeRun: "Resume",
@@ -208,6 +219,8 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   runInterrupted: "The previous response didn’t finish — the page changed before it arrived.",
   pageMoved:
     "The page changed since you last looked at it. Call read_page to see the current page, then retry.",
+  attachmentsStillUploading:
+    "{n} file still uploading — it was not sent with this message and is still attached.",
   skillNeeds: "“{title}” needs: {fields}",
 
   message: "Message",

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.16.0";
+export const VERSION: string = "0.18.0";