@artooi/ag-ui-web-component 0.4.0 → 0.5.0

package/src/core/remote_conversation_store.ts

@@ -0,0 +1,147 @@
+import type { Message } from "@ag-ui/core";
+import {
+  type ClientConversationStore,
+  type NavigationCheckpoint,
+  SessionStorageStore,
+  type ThreadMeta,
+} from "./conversation_store.js";
+
+/** One row of the server thread index (django-ag-ui's `ThreadsView` wire shape). */
+interface ServerThreadRow {
+  readonly thread_id: string;
+  readonly title: string;
+  readonly updated_at: string | null;
+  readonly preview: string;
+}
+
+/** Live header source, read per request so rotated tokens / CSRF reach the server. */
+type HeadersProvider = () => Record<string, string>;
+
+/**
+ * A {@link ClientConversationStore} backed by a server thread-index endpoint —
+ * django-ag-ui's owner-scoped `ThreadsView`, the URL passed to `<ag-ui-chat>`
+ * as `data-threads-url`:
+ *
+ * - `GET  <url>`        → list the user's threads (metadata only);
+ * - `GET  <url><id>/`   → that thread's messages;
+ * - `PATCH <url><id>/`  → rename (`{ "title": … }`);
+ * - `DELETE <url><id>/` → delete.
+ *
+ * It wraps a local store (default {@link SessionStorageStore}) for the
+ * client-only concerns — the active thread id, the navigation checkpoint, and a
+ * message cache — and as the graceful fallback when a request fails. Rename and
+ * delete apply **optimistically** (a small local overlay) so the drawer
+ * reflects them at once, before the fire-and-forget server round-trip lands.
+ */
+export class RemoteConversationStore implements ClientConversationStore {
+  readonly #url: string;
+  readonly #headers: HeadersProvider;
+  readonly #local: ClientConversationStore;
+  readonly #dropped = new Set<string>();
+  readonly #renamed = new Map<string, string>();
+
+  constructor(
+    url: string,
+    headers: HeadersProvider = () => ({}),
+    local: ClientConversationStore = new SessionStorageStore(),
+  ) {
+    this.#url = url.endsWith("/") ? url : `${url}/`;
+    this.#headers = headers;
+    this.#local = local;
+  }
+
+  threadId(): string {
+    return this.#local.threadId();
+  }
+
+  setActiveThread(threadId: string): void {
+    this.#local.setActiveThread(threadId);
+  }
+
+  saveMessages(threadId: string, messages: readonly Message[]): void {
+    // The agent run persists server-side; keep a local cache for offline replay.
+    this.#local.saveMessages(threadId, messages);
+  }
+
+  loadCheckpoint(threadId: string): NavigationCheckpoint | null {
+    return this.#local.loadCheckpoint(threadId);
+  }
+
+  saveCheckpoint(threadId: string, checkpoint: NavigationCheckpoint | null): void {
+    this.#local.saveCheckpoint(threadId, checkpoint);
+  }
+
+  renameThread(threadId: string, title: string): void {
+    this.#local.renameThread(threadId, title);
+    this.#renamed.set(threadId, title);
+    void this.#mutate(threadId, "PATCH", { title });
+  }
+
+  clear(threadId: string): void {
+    this.#local.clear(threadId);
+    this.#dropped.add(threadId);
+    void this.#mutate(threadId, "DELETE");
+  }
+
+  async listThreads(): Promise<readonly ThreadMeta[]> {
+    const rows = await this.#fetchThreads();
+    if (rows === null) {
+      return this.#local.listThreads();
+    }
+    return rows.filter((row) => !this.#dropped.has(row.thread_id)).map((row) => this.#toMeta(row));
+  }
+
+  async loadMessages(threadId: string): Promise<readonly Message[] | null> {
+    const response = await this.#get(this.#url + encodeURIComponent(threadId) + "/");
+    if (response === null || !response.ok) {
+      return this.#local.loadMessages(threadId);
+    }
+    const body = (await response.json()) as { messages?: readonly Message[] };
+    return body.messages ?? null;
+  }
+
+  async #fetchThreads(): Promise<readonly ServerThreadRow[] | null> {
+    const response = await this.#get(this.#url);
+    if (response === null || !response.ok) {
+      return null;
+    }
+    const body = (await response.json()) as { threads?: readonly ServerThreadRow[] };
+    return body.threads ?? [];
+  }
+
+  #toMeta(row: ServerThreadRow): ThreadMeta {
+    return {
+      threadId: row.thread_id,
+      title: this.#renamed.get(row.thread_id) ?? row.title,
+      updatedAt: row.updated_at === null ? 0 : Date.parse(row.updated_at),
+      preview: row.preview,
+    };
+  }
+
+  /** GET that resolves to the `Response`, or `null` on a network error. */
+  async #get(url: string): Promise<Response | null> {
+    try {
+      return await fetch(url, { headers: this.#headers() });
+    } catch {
+      return null;
+    }
+  }
+
+  /** Fire a best-effort write to the thread endpoint; failures are tolerated. */
+  async #mutate(
+    threadId: string,
+    method: "PATCH" | "DELETE",
+    body?: { title: string },
+  ): Promise<void> {
+    const headers = this.#headers();
+    try {
+      await fetch(this.#url + encodeURIComponent(threadId) + "/", {
+        method,
+        headers: body === undefined ? headers : { ...headers, "content-type": "application/json" },
+        body: body === undefined ? null : JSON.stringify(body),
+      });
+    } catch {
+      // Best-effort; the optimistic overlay keeps the drawer consistent.
+    }
+  }
+}

package/src/index.ts

@@ -32,6 +32,7 @@ export {
   type ClientConversationStore,
   type NavigationCheckpoint,
   SessionStorageStore,
+  type ThreadMeta,
 } from "./core/conversation_store.js";
 export {
   type AgentFactory,
@@ -39,6 +40,7 @@ export {
   type HttpAgentOptions,
 } from "./core/create_http_agent.js";
 export { defineAgUiChat } from "./core/define_ag_ui_chat.js";
+export { RemoteConversationStore } from "./core/remote_conversation_store.js";
 export {
   type FlashOptions,
   focusWithFlash,

package/src/ui/relative_time.ts

@@ -0,0 +1,28 @@
+/**
+ * A compact relative timestamp for a thread row — e.g. `"just now"`, `"5m ago"`,
+ * `"3h ago"`, `"2d ago"`, `"4w ago"`.
+ *
+ * `now` is injectable so callers (and tests) can pin the reference point; it
+ * defaults to the current time. A timestamp in the future (clock skew) reads as
+ * `"just now"`. Kept locale-independent on purpose so the rendered label is
+ * stable across environments.
+ */
+export function relativeTime(timestamp: number, now: number = Date.now()): string {
+  const seconds = Math.round((now - timestamp) / 1000);
+  if (seconds < 60) {
+    return "just now";
+  }
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  const days = Math.round(hours / 24);
+  if (days < 7) {
+    return `${days}d ago`;
+  }
+  return `${Math.round(days / 7)}w ago`;
+}

package/src/ui/styles.ts

@@ -644,4 +644,188 @@ export const STYLES = `
   font-size: 0.85em;
   color: var(--ag-ui-danger);
 }
+
+/* Chat-history drawer — a slide-over within the chat panel. */
+.drawer {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+}
+
+.drawer[hidden] {
+  display: none;
+}
+
+.drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(20, 20, 50, 0.32);
+}
+
+.drawer-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: min(300px, 85%);
+  height: 100%;
+  background: var(--ag-ui-bg);
+  border-right: 1px solid var(--ag-ui-border);
+  box-shadow: var(--ag-ui-shadow);
+  overflow: hidden;
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ag-ui-space);
+  padding: var(--ag-ui-pad);
+  border-bottom: 1px solid var(--ag-ui-border);
+}
+
+.drawer-title {
+  font-weight: 600;
+}
+
+.drawer-new {
+  border: 1px solid var(--ag-ui-border);
+  border-radius: var(--ag-ui-radius);
+  background: var(--ag-ui-bg);
+  color: var(--ag-ui-accent);
+  padding: 4px 10px;
+  font: inherit;
+  font-size: 0.85em;
+  cursor: pointer;
+}
+
+.drawer-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.drawer-empty {
+  padding: var(--ag-ui-pad);
+  font-size: 0.9em;
+  color: var(--ag-ui-muted);
+}
+
+.drawer-row {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 1px solid var(--ag-ui-border);
+}
+
+.drawer-row--active {
+  background: var(--ag-ui-assistant-bg);
+}
+
+.drawer-row-select {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.drawer-row-title {
+  font-weight: 600;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.drawer-row-time {
+  font-size: 0.72em;
+  color: var(--ag-ui-muted);
+}
+
+.drawer-row-preview {
+  font-size: 0.8em;
+  color: var(--ag-ui-muted);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.drawer-row-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 6px;
+}
+
+.drawer-row-rename,
+.drawer-row-delete {
+  border: none;
+  background: none;
+  color: var(--ag-ui-muted);
+  font-size: 0.9em;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.drawer-rename-input {
+  flex: 1;
+  min-width: 0;
+  margin: 6px 10px;
+  padding: 4px 8px;
+  border: 1px solid var(--ag-ui-accent);
+  border-radius: 6px;
+  background: var(--ag-ui-input-bg);
+  color: var(--ag-ui-fg);
+  font: inherit;
+}
+
+.drawer-confirm {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 0.85em;
+}
+
+.drawer-confirm-label {
+  color: var(--ag-ui-danger);
+}
+
+.drawer-confirm-yes {
+  border: none;
+  border-radius: 6px;
+  background: var(--ag-ui-danger);
+  color: #ffffff;
+  padding: 3px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.drawer-confirm-no {
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  padding: 3px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Embedded placement: an inline, flush side panel rather than a dimmed,
+   floating slide-over. */
+:host([placement="embedded"]) .drawer-backdrop {
+  background: none;
+}
+
+:host([placement="embedded"]) .drawer-panel {
+  width: 100%;
+  border-right: none;
+  box-shadow: none;
+}
 `;

package/src/ui/thread_drawer.ts

@@ -0,0 +1,200 @@
+import type { ThreadMeta } from "../core/conversation_store.js";
+import { relativeTime } from "./relative_time.js";
+
+/** Actions the host ({@link AgUiChat}) wires to the drawer's rows. */
+export interface ThreadDrawerCallbacks {
+  /** A row was picked — load that thread and make it active. */
+  readonly onSelect: (threadId: string) => void;
+  /** The "New chat" action — start a fresh thread. */
+  readonly onNew: () => void;
+  /** A row was renamed to `title`. */
+  readonly onRename: (threadId: string, title: string) => void;
+  /** A row was deleted (after the inline confirm). */
+  readonly onDelete: (threadId: string) => void;
+}
+
+/**
+ * The chat-history drawer: a slide-over listing the user's threads (title,
+ * relative time, preview), with select / new / rename / delete actions and an
+ * empty state. Pure DOM in the spirit of {@link SkillsMenu} — the host appends
+ * {@link element}, toggles it, feeds rows via {@link setThreads}, and acts on
+ * the callbacks. The drawer is a *view*: it does not mutate the store; after a
+ * callback the host updates the store and calls {@link setThreads} to refresh.
+ */
+export class ThreadDrawer {
+  /** The drawer root (backdrop + panel). Append to the chat shell; hidden until opened. */
+  readonly element: HTMLDivElement;
+
+  readonly #callbacks: ThreadDrawerCallbacks;
+  readonly #list: HTMLDivElement;
+  #threads: readonly ThreadMeta[] = [];
+  #activeId = "";
+
+  constructor(callbacks: ThreadDrawerCallbacks) {
+    this.#callbacks = callbacks;
+
+    this.element = document.createElement("div");
+    this.element.className = "drawer";
+    this.element.hidden = true;
+
+    const backdrop = document.createElement("div");
+    backdrop.className = "drawer-backdrop";
+    backdrop.addEventListener("click", () => this.close());
+
+    const panel = document.createElement("div");
+    panel.className = "drawer-panel";
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-label", "Chat history");
+
+    const header = document.createElement("div");
+    header.className = "drawer-header";
+    const heading = document.createElement("span");
+    heading.className = "drawer-title";
+    heading.textContent = "Chats";
+    const newButton = document.createElement("button");
+    newButton.type = "button";
+    newButton.className = "drawer-new";
+    newButton.textContent = "New chat";
+    newButton.addEventListener("click", () => {
+      this.close();
+      this.#callbacks.onNew();
+    });
+    header.append(heading, newButton);
+
+    this.#list = document.createElement("div");
+    this.#list.className = "drawer-list";
+
+    panel.append(header, this.#list);
+    this.element.append(backdrop, panel);
+  }
+
+  isOpen(): boolean {
+    return !this.element.hidden;
+  }
+
+  open(): void {
+    this.element.hidden = false;
+  }
+
+  close(): void {
+    this.element.hidden = true;
+  }
+
+  toggle(): void {
+    this.element.hidden = !this.element.hidden;
+  }
+
+  /** Render the rows (or the empty state), highlighting the active thread. */
+  setThreads(threads: readonly ThreadMeta[], activeId: string): void {
+    this.#threads = threads;
+    this.#activeId = activeId;
+    this.#renderList();
+  }
+
+  #renderList(): void {
+    this.#list.replaceChildren();
+    if (this.#threads.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "drawer-empty";
+      empty.textContent = "No conversations yet.";
+      this.#list.appendChild(empty);
+      return;
+    }
+    for (const meta of this.#threads) {
+      this.#list.appendChild(this.#renderRow(meta));
+    }
+  }
+
+  #renderRow(meta: ThreadMeta): HTMLDivElement {
+    const row = document.createElement("div");
+    row.className = "drawer-row";
+    if (meta.threadId === this.#activeId) {
+      row.classList.add("drawer-row--active");
+    }
+
+    const select = document.createElement("button");
+    select.type = "button";
+    select.className = "drawer-row-select";
+    const title = document.createElement("span");
+    title.className = "drawer-row-title";
+    title.textContent = meta.title;
+    const time = document.createElement("span");
+    time.className = "drawer-row-time";
+    time.textContent = relativeTime(meta.updatedAt);
+    const preview = document.createElement("span");
+    preview.className = "drawer-row-preview";
+    preview.textContent = meta.preview;
+    select.append(title, time, preview);
+    select.addEventListener("click", () => {
+      this.close();
+      this.#callbacks.onSelect(meta.threadId);
+    });
+
+    const rename = document.createElement("button");
+    rename.type = "button";
+    rename.className = "drawer-row-rename";
+    rename.title = "Rename";
+    rename.setAttribute("aria-label", "Rename conversation");
+    rename.textContent = "✎";
+    rename.addEventListener("click", () => this.#startRename(row, meta));
+
+    const remove = document.createElement("button");
+    remove.type = "button";
+    remove.className = "drawer-row-delete";
+    remove.title = "Delete";
+    remove.setAttribute("aria-label", "Delete conversation");
+    remove.textContent = "🗑";
+    remove.addEventListener("click", () => this.#confirmDelete(row, meta));
+
+    const actions = document.createElement("div");
+    actions.className = "drawer-row-actions";
+    actions.append(rename, remove);
+
+    row.append(select, actions);
+    return row;
+  }
+
+  /** Swap a row for an inline rename input; Enter commits, Escape cancels. */
+  #startRename(row: HTMLDivElement, meta: ThreadMeta): void {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "drawer-rename-input";
+    input.value = meta.title;
+    input.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        const value = input.value.trim();
+        if (value === "") {
+          this.#renderList();
+        } else {
+          this.#callbacks.onRename(meta.threadId, value);
+        }
+      } else if (event.key === "Escape") {
+        this.#renderList();
+      }
+    });
+    row.replaceChildren(input);
+    input.focus();
+    input.select();
+  }
+
+  /** Swap a row for an inline "Delete? [Delete] [Cancel]" confirm. */
+  #confirmDelete(row: HTMLDivElement, meta: ThreadMeta): void {
+    const confirm = document.createElement("div");
+    confirm.className = "drawer-confirm";
+    const label = document.createElement("span");
+    label.className = "drawer-confirm-label";
+    label.textContent = "Delete?";
+    const yes = document.createElement("button");
+    yes.type = "button";
+    yes.className = "drawer-confirm-yes";
+    yes.textContent = "Delete";
+    yes.addEventListener("click", () => this.#callbacks.onDelete(meta.threadId));
+    const no = document.createElement("button");
+    no.type = "button";
+    no.className = "drawer-confirm-no";
+    no.textContent = "Cancel";
+    no.addEventListener("click", () => this.#renderList());
+    confirm.append(label, yes, no);
+    row.replaceChildren(confirm);
+  }
+}

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.4.0";
+export const VERSION: string = "0.5.0";