@abot-ai/runtime 1.0.0 → 1.1.0

package/dist/src/web-ui/app/components/conversation-activity.d.ts

@@ -6,6 +6,12 @@ export type ConversationActivityInput = {
   streaming?: boolean;
 };
 
+export type ConversationActivityEvent = Record<string, unknown> & {
+  eventName: string;
+  name: string;
+  tone: string;
+};
+
 export type ConversationContextWindowModel = {
   invocationId: string;
   modelStep: string;
@@ -39,7 +45,7 @@ export declare function buildConversationActivityModel(
   input?: ConversationActivityInput,
 ): {
   requestId: string;
-  events: unknown[];
+  events: ConversationActivityEvent[];
   progress: unknown;
   contextWindow: ConversationContextWindowModel | null;
   eventCount: number;

package/dist/src/web-ui/app/components/long-term-memory/icons.js

@@ -0,0 +1,16 @@
+const MEMORY_ICONS = Object.freeze({
+  add: '<path d="M12 5v14M5 12h14" />',
+  close: '<path d="m6 6 12 12M18 6 6 18" />',
+  delete: '<path d="M4 7h16M9 7V4h6v3M7 7l1 13h8l1-13M10 11v5M14 11v5" />',
+  edit: '<path d="M12 20h9" /><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z" />',
+  expand: '<path d="m7 10 5 5 5-5" />',
+  refresh:
+    '<path d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5" />',
+  search: '<circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" />',
+});
+
+export function renderMemoryIcon(name) {
+  const paths = MEMORY_ICONS[name];
+  if (!paths) return "";
+  return `<svg viewBox="0 0 24 24" aria-hidden="true">${paths}</svg>`;
+}

package/dist/src/web-ui/app/components/long-term-memory/manager.js

@@ -0,0 +1,192 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+import {
+  readMemoryEditorInput,
+  renderMemoryRecordEditor,
+} from "./record-editor.js";
+import { renderMemoryIcon } from "./icons.js";
+import { renderMemoryRecordList } from "./record-list.js";
+import {
+  buildMemoryDeleteConfirmation,
+  createMemoryManagerView,
+} from "./view-model.js";
+
+export function createLongTermMemoryManager({
+  actions,
+  confirmDelete = (message) => window.confirm(message),
+}) {
+  let root = null;
+  let view = null;
+  let focusedEditor = "";
+
+  function mount(nextRoot) {
+    if (root === nextRoot) return;
+    unbind();
+    root = nextRoot;
+    root?.addEventListener("click", handleClick);
+    root?.addEventListener("submit", handleSubmit);
+    root?.addEventListener("keydown", handleKeydown);
+    render(actions.snapshot());
+  }
+
+  function unbind() {
+    root?.removeEventListener("click", handleClick);
+    root?.removeEventListener("submit", handleSubmit);
+    root?.removeEventListener("keydown", handleKeydown);
+  }
+
+  function render(snapshot) {
+    view = createMemoryManagerView(snapshot);
+    if (!root) return;
+    root.innerHTML = managerMarkup(view);
+    focusEditorWhenOpened();
+  }
+
+  function handleClick(event) {
+    const button = event.target.closest("[data-memory-management-action]");
+    if (!button) return;
+    const action = button.dataset.memoryManagementAction;
+    const recordId = button.dataset.memoryId || "";
+    if (action === "toggle-content") {
+      toggleMemoryContent(button);
+      return;
+    }
+    if (action === "refresh") void actions.refresh();
+    if (action === "create") actions.beginCreate();
+    if (action === "edit") actions.beginEdit(recordId);
+    if (action === "cancel-edit") actions.cancelEdit();
+    if (action === "clear-search") void actions.search("");
+    if (action === "previous-page") void actions.changePage(-1);
+    if (action === "next-page") void actions.changePage(1);
+    if (action === "delete") confirmAndDelete(recordId);
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    if (event.target.matches("[data-memory-search-form]")) {
+      const input = root.querySelector("[data-memory-search-input]");
+      void actions.search(input?.value || "");
+      return;
+    }
+    if (!event.target.matches("[data-memory-editor]")) return;
+    const input = readMemoryEditorInput(root);
+    if (input) void actions.save(input);
+  }
+
+  function handleKeydown(event) {
+    if (event.key !== "Escape" || !view?.editor || view.mutation) return;
+    actions.cancelEdit();
+  }
+
+  function confirmAndDelete(recordId) {
+    const record = view?.items.find((item) => item.id === recordId);
+    if (!record) return;
+    if (!confirmDelete(buildMemoryDeleteConfirmation(record))) return;
+    void actions.deleteMemory(record.id);
+  }
+
+  function toggleMemoryContent(button) {
+    const record = button.closest("[data-memory-record-id]");
+    if (!record) return;
+    const expanded = record.classList.toggle("expanded");
+    const label = expanded ? "Collapse memory" : "Expand memory";
+    button.setAttribute("aria-expanded", String(expanded));
+    button.setAttribute("aria-label", label);
+    button.setAttribute("title", label);
+  }
+
+  function focusEditorWhenOpened() {
+    const editorKey = view?.editor
+      ? `${view.editor.mode}:${view.editor.recordId}`
+      : "";
+    if (!editorKey) {
+      focusedEditor = "";
+      return;
+    }
+    if (editorKey === focusedEditor) return;
+    focusedEditor = editorKey;
+    queueMicrotask(() =>
+      root?.querySelector("[data-memory-editor-content]")?.focus(),
+    );
+  }
+
+  return Object.freeze({ mount, render });
+}
+
+function managerMarkup(view) {
+  return `
+    <section class="memory-management-card" aria-busy="${view.loading || view.mutation ? "true" : "false"}">
+      <div class="memory-management-heading">
+        <div>
+          <h4>Stored memories</h4>
+          <p>Review and control the information ABot can recall across conversations.</p>
+        </div>
+        <span class="memory-status ${escapeAttribute(view.status.tone)}">${escapeHtml(view.status.label)}</span>
+      </div>
+      ${availabilityMarkup(view)}
+      <div class="memory-management-toolbar">
+        <form class="memory-search" role="search" data-memory-search-form>
+          <label class="sr-only" for="memoryManagementSearch">Search stored memories</label>
+          <div class="memory-search-shell">
+            <span class="memory-search-icon">${renderMemoryIcon("search")}</span>
+            <input
+              id="memoryManagementSearch"
+              data-memory-search-input
+              type="search"
+              value="${escapeAttribute(view.query)}"
+              placeholder="Search memories by meaning"
+              autocomplete="off"
+              ${!view.canWrite || view.busy ? "disabled" : ""}
+            />
+            <button class="memory-search-submit" type="submit" ${!view.canWrite || view.busy ? "disabled" : ""}>Search</button>
+          </div>
+          ${view.query ? `<button class="memory-clear-search" type="button" data-memory-management-action="clear-search" ${view.busy ? "disabled" : ""}>Clear</button>` : ""}
+        </form>
+        <div class="memory-management-primary-actions">
+          <button class="memory-icon-button" type="button" data-memory-management-action="refresh" aria-label="Refresh memories" title="Refresh memories" ${view.busy ? "disabled" : ""}>${renderMemoryIcon("refresh")}</button>
+          <button class="primary-button memory-add-button" type="button" data-memory-management-action="create" ${!view.canWrite || view.mutation ? "disabled" : ""}>${renderMemoryIcon("add")}<span>Add memory</span></button>
+        </div>
+      </div>
+      ${feedbackMarkup(view)}
+      ${detachedEditorMarkup(view)}
+      ${renderMemoryRecordList(view)}
+      ${paginationMarkup(view)}
+    </section>
+  `;
+}
+
+function detachedEditorMarkup(view) {
+  const editorBelongsInList =
+    view.editor?.mode === "edit" && Boolean(view.editorRecord);
+  return editorBelongsInList ? "" : renderMemoryRecordEditor(view);
+}
+
+function availabilityMarkup(view) {
+  if (view.enabled === false) {
+    return '<p class="memory-management-notice">Memory is disabled. You can still review and delete stored memories.</p>';
+  }
+  if (view.available === false) {
+    return '<p class="memory-management-notice error-text">Memory storage or its embedding provider is unavailable. Existing records remain visible when storage can be read.</p>';
+  }
+  return "";
+}
+
+function feedbackMarkup(view) {
+  if (view.error) {
+    return `<p class="memory-management-feedback error-text" role="alert">${escapeHtml(view.error)}</p>`;
+  }
+  return view.message
+    ? `<p class="memory-management-feedback" role="status">${escapeHtml(view.message)}</p>`
+    : '<div class="sr-only" role="status" aria-live="polite"></div>';
+}
+
+function paginationMarkup(view) {
+  return `
+    <div class="memory-pagination" aria-label="Memory pages">
+      <span>${escapeHtml(view.pageLabel)}</span>
+      <div>
+        <button type="button" data-memory-management-action="previous-page" ${!view.hasPreviousPage || view.busy ? "disabled" : ""}>Previous</button>
+        <button type="button" data-memory-management-action="next-page" ${!view.hasNextPage || view.busy ? "disabled" : ""}>Next</button>
+      </div>
+    </div>
+  `;
+}

package/dist/src/web-ui/app/components/long-term-memory/record-editor.d.ts

@@ -0,0 +1,9 @@
+import type { LongTermMemoryManagerView } from "./view-model.js";
+
+export declare function renderMemoryRecordEditor(
+  view: LongTermMemoryManagerView,
+): string;
+export declare function readMemoryEditorInput(root: ParentNode): Readonly<{
+  content: string;
+  tags: readonly string[];
+}> | null;

package/dist/src/web-ui/app/components/long-term-memory/record-editor.js

@@ -0,0 +1,62 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+import { renderMemoryIcon } from "./icons.js";
+import { parseMemoryTags } from "./view-model.js";
+
+export function renderMemoryRecordEditor(view) {
+  if (!view.editor) return "";
+  const editing = view.editor.mode === "edit";
+  const record = editing ? view.editorRecord : null;
+  if (editing && !record) {
+    return `
+      <section class="memory-editor-card" role="alert">
+        <p>This memory is no longer in the current result set.</p>
+        <button class="memory-editor-dismiss" type="button" data-memory-management-action="cancel-edit">Close</button>
+      </section>
+    `;
+  }
+  const busy = view.mutation === view.editor.mode;
+  const content = view.editor.draft?.content ?? record?.content ?? "";
+  const tags = view.editor.draft?.tags ?? record?.tags ?? [];
+  return `
+    <form class="memory-editor-card" data-memory-editor>
+      <div class="memory-editor-heading">
+        <div>
+          <h5>${editing ? "Update stored memory" : "Add a memory"}</h5>
+          <p>${editing ? "Refine what ABot should recall." : "Store a fact that should be available in future conversations."}</p>
+        </div>
+        <button class="memory-icon-button" type="button" data-memory-management-action="cancel-edit" aria-label="Close memory editor" title="Close memory editor" ${busy ? "disabled" : ""}>${renderMemoryIcon("close")}</button>
+      </div>
+      <label>
+        <span>What should ABot remember?</span>
+        <textarea data-memory-editor-content rows="3" required ${busy ? "disabled" : ""}>${escapeHtml(content)}</textarea>
+      </label>
+      <label>
+        <span>Tags <small>Separate with commas</small></span>
+        <input data-memory-editor-tags type="text" value="${escapeAttribute(
+          Array.isArray(tags) ? tags.join(", ") : "",
+        )}" ${busy ? "disabled" : ""} />
+      </label>
+      <div class="memory-editor-actions">
+        <button class="primary-button" type="submit" ${busy ? "disabled" : ""}>
+          ${busy ? "Saving…" : editing ? "Save changes" : "Add memory"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+export function readMemoryEditorInput(root) {
+  const contentInput = root.querySelector("[data-memory-editor-content]");
+  const tagsInput = root.querySelector("[data-memory-editor-tags]");
+  const content = String(contentInput?.value ?? "").trim();
+  if (!content) {
+    contentInput?.setCustomValidity("Enter something for ABot to remember.");
+    contentInput?.reportValidity();
+    return null;
+  }
+  contentInput?.setCustomValidity("");
+  return Object.freeze({
+    content,
+    tags: Object.freeze(parseMemoryTags(tagsInput?.value)),
+  });
+}

package/dist/src/web-ui/app/components/long-term-memory/record-list.d.ts

@@ -0,0 +1,5 @@
+import type { LongTermMemoryManagerView } from "./view-model.js";
+
+export declare function renderMemoryRecordList(
+  view: LongTermMemoryManagerView,
+): string;

package/dist/src/web-ui/app/components/long-term-memory/record-list.js

@@ -0,0 +1,97 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+import { renderMemoryIcon } from "./icons.js";
+import { renderMemoryRecordEditor } from "./record-editor.js";
+import { formatMemoryTimestamp, memoryOriginLabel } from "./view-model.js";
+
+const MEMORY_CONTENT_PREVIEW_CHARACTER_LIMIT = 120;
+
+export function renderMemoryRecordList(view) {
+  if (view.loading && view.items.length === 0) {
+    return '<div class="memory-management-empty" role="status">Loading memories…</div>';
+  }
+  if (view.items.length === 0) {
+    return `<div class="memory-management-empty">${escapeHtml(view.emptyMessage)}</div>`;
+  }
+  return `<div class="memory-record-list">${view.items
+    .map((record) => renderMemoryRecordWithEditor(record, view))
+    .join("")}</div>`;
+}
+
+function renderMemoryRecordWithEditor(record, view) {
+  const recordMarkup = renderMemoryRecord(record, view);
+  const editorMarkup =
+    view.editor?.mode === "edit" && view.editor.recordId === record.id
+      ? renderMemoryRecordEditor(view)
+      : "";
+  return `${recordMarkup}${editorMarkup}`;
+}
+
+function renderMemoryRecord(record, view) {
+  const editing = view.editor?.recordId === record.id;
+  const deleting = view.mutation === `delete:${record.id}`;
+  const mutationActive = Boolean(view.mutation);
+  return `
+    <article class="memory-record${editing ? " editing" : ""}" data-memory-record-id="${escapeAttribute(record.id)}">
+      <div class="memory-record-copy">
+        ${renderContent(record.content)}
+        <div class="memory-record-details">
+          ${renderTags(record.tags)}
+          <div class="memory-record-meta">
+            <span>${escapeHtml(memoryOriginLabel(record.origin))}</span>
+            <span aria-hidden="true">·</span>
+            <time datetime="${escapeAttribute(record.updatedAt)}" title="Created ${escapeAttribute(formatMemoryTimestamp(record.createdAt))}">
+              Updated ${escapeHtml(formatMemoryTimestamp(record.updatedAt))}
+            </time>
+          </div>
+        </div>
+      </div>
+      <div class="memory-record-actions">
+        <button
+          class="memory-icon-button"
+          type="button"
+          data-memory-management-action="edit"
+          data-memory-id="${escapeAttribute(record.id)}"
+          aria-label="Edit memory"
+          title="Edit memory"
+          ${!view.canWrite || mutationActive ? "disabled" : ""}
+        >${renderMemoryIcon("edit")}</button>
+        <button
+          class="memory-icon-button danger-button"
+          type="button"
+          data-memory-management-action="delete"
+          data-memory-id="${escapeAttribute(record.id)}"
+          aria-label="${deleting ? "Deleting memory" : "Delete memory"}"
+          title="${deleting ? "Deleting memory" : "Delete memory"}"
+          ${mutationActive ? "disabled" : ""}
+        >${renderMemoryIcon("delete")}</button>
+      </div>
+    </article>
+  `;
+}
+
+function renderContent(content) {
+  const collapsible = memoryContentNeedsExpansion(content);
+  return `
+    <div class="memory-record-content${collapsible ? " collapsible" : ""}">
+      <div class="memory-record-content-text">${escapeHtml(content)}</div>
+      ${
+        collapsible
+          ? `<button class="memory-content-toggle" type="button" data-memory-management-action="toggle-content" aria-expanded="false" aria-label="Expand memory" title="Expand memory">${renderMemoryIcon("expand")}</button>`
+          : ""
+      }
+    </div>
+  `;
+}
+
+function memoryContentNeedsExpansion(content) {
+  const value = String(content ?? "");
+  const lineCount = value.split(/\r?\n/u).length;
+  return lineCount > 2 || value.length > MEMORY_CONTENT_PREVIEW_CHARACTER_LIMIT;
+}
+
+function renderTags(tags) {
+  if (!Array.isArray(tags) || tags.length === 0) return "";
+  return `<div class="memory-record-tags" aria-label="Tags">${tags
+    .map((tag) => `<span>${escapeHtml(tag)}</span>`)
+    .join("")}</div>`;
+}

package/dist/src/web-ui/app/components/long-term-memory/view-model.d.ts

@@ -0,0 +1,29 @@
+import type {
+  LongTermMemoryRecord,
+  LongTermMemorySnapshot,
+} from "../../controllers/long-term-memory/controller.js";
+
+export type LongTermMemoryManagerView = LongTermMemorySnapshot &
+  Readonly<{
+    editorRecord: LongTermMemoryRecord | null;
+    canWrite: boolean;
+    busy: boolean;
+    status: Readonly<{
+      tone: "enabled" | "disabled" | "unavailable";
+      label: "Enabled" | "Disabled" | "Unavailable";
+    }>;
+    emptyMessage: string;
+    pageLabel: string;
+    hasPreviousPage: boolean;
+    hasNextPage: boolean;
+  }>;
+
+export declare function createMemoryManagerView(
+  snapshot: LongTermMemorySnapshot,
+): LongTermMemoryManagerView;
+export declare function parseMemoryTags(value: unknown): string[];
+export declare function formatMemoryTimestamp(value: unknown): string;
+export declare function memoryOriginLabel(origin: unknown): string;
+export declare function buildMemoryDeleteConfirmation(
+  record: Pick<LongTermMemoryRecord, "content">,
+): string;

package/dist/src/web-ui/app/components/long-term-memory/view-model.js

@@ -0,0 +1,69 @@
+export function createMemoryManagerView(snapshot) {
+  const editorRecord = snapshot.editor?.recordId
+    ? snapshot.items.find((record) => record.id === snapshot.editor.recordId) ||
+      null
+    : null;
+  const canWrite = snapshot.enabled === true && snapshot.available === true;
+  return Object.freeze({
+    ...snapshot,
+    editorRecord,
+    canWrite,
+    busy: snapshot.loading || Boolean(snapshot.mutation),
+    status: memoryStatus(snapshot),
+    emptyMessage: snapshot.query
+      ? "No memories match this search."
+      : "No long-term memories have been stored yet.",
+    pageLabel: pageLabel(snapshot),
+    hasPreviousPage: snapshot.offset > 0,
+    hasNextPage: snapshot.offset + snapshot.items.length < snapshot.total,
+  });
+}
+
+export function parseMemoryTags(value) {
+  return String(value ?? "")
+    .split(/[\n,]/u)
+    .map((tag) => tag.trim())
+    .filter(Boolean);
+}
+
+export function formatMemoryTimestamp(value) {
+  const timestamp = Date.parse(String(value ?? ""));
+  if (!Number.isFinite(timestamp)) return "Unknown time";
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(timestamp));
+}
+
+export function memoryOriginLabel(origin) {
+  const labels = {
+    passive_response: "Learned from conversation",
+    web_ui: "Added in Web UI",
+    management_api: "Added through API",
+  };
+  return labels[origin] || "Stored memory";
+}
+
+export function buildMemoryDeleteConfirmation(record) {
+  return `Delete this memory?\n\n${record.content}`;
+}
+
+function memoryStatus(snapshot) {
+  if (snapshot.enabled === null) {
+    return Object.freeze({ tone: "unavailable", label: "Unavailable" });
+  }
+  if (!snapshot.enabled) {
+    return Object.freeze({ tone: "disabled", label: "Disabled" });
+  }
+  if (!snapshot.available) {
+    return Object.freeze({ tone: "unavailable", label: "Unavailable" });
+  }
+  return Object.freeze({ tone: "enabled", label: "Enabled" });
+}
+
+function pageLabel(snapshot) {
+  if (snapshot.total === 0) return "0 memories";
+  const start = snapshot.offset + 1;
+  const end = Math.min(snapshot.total, snapshot.offset + snapshot.items.length);
+  return `${start}–${end} of ${snapshot.total}`;
+}