@abot-ai/runtime 1.0.0

package/dist/src/web-ui/app/components/conversation-view.js

@@ -0,0 +1,278 @@
+import { isNearScrollEnd, pinScrollToEnd } from "../ui-behavior.js";
+import { applyTextDirection, renderMarkdown } from "../lib/text-format.js";
+import {
+  createConversationActivity,
+  createConversationContextWindow,
+} from "./conversation-activity.js";
+import { createMessageAttachments } from "./message-attachments.js";
+import { createMessageTimestamp } from "./message-timestamp.js";
+
+export function createConversationView({
+  dom,
+  getMessages,
+  getActivityForMessage,
+  getPendingApproval,
+  createApprovalCard,
+  copyText,
+  notify,
+  resolveAttachmentUrl = () => "",
+  documentRoot = document,
+  viewport = window,
+}) {
+  const conversationActivity = createConversationActivity({ documentRoot });
+  const conversationContextWindow = createConversationContextWindow({
+    documentRoot,
+  });
+  const messageAttachments = createMessageAttachments({
+    documentRoot,
+    resolveAttachmentUrl,
+  });
+  const viewState = {
+    followMessages: true,
+    collapsedThinkingMessageIds: new Set(),
+    messageRenderTimer: 0,
+    thinkingRenderTimer: 0,
+    scrollSettleVersion: 0,
+    bound: false,
+  };
+
+  function updateJumpToLatest() {
+    const hasOverflow =
+      dom.messagesList.scrollHeight > dom.messagesList.clientHeight + 24;
+    dom.jumpToLatestButton.hidden = viewState.followMessages || !hasOverflow;
+  }
+
+  function scrollToEnd() {
+    viewState.followMessages = true;
+    pinScrollToEnd(dom.messagesList);
+    updateJumpToLatest();
+    const settleVersion = ++viewState.scrollSettleVersion;
+    viewport.requestAnimationFrame(() => {
+      if (
+        !viewState.followMessages ||
+        settleVersion !== viewState.scrollSettleVersion
+      ) {
+        return;
+      }
+      pinScrollToEnd(dom.messagesList);
+      viewport.requestAnimationFrame(() => {
+        if (
+          !viewState.followMessages ||
+          settleVersion !== viewState.scrollSettleVersion
+        ) {
+          return;
+        }
+        pinScrollToEnd(dom.messagesList);
+        updateJumpToLatest();
+      });
+    });
+  }
+
+  function renderEmptyState() {
+    dom.messagesList.innerHTML = `
+      <div class="empty-state chat-empty-state">
+        <div class="mode-empty-title">What would you like to work on?</div>
+        <div class="mode-empty-copy">Ask a question, inspect a project, or start a task.</div>
+      </div>
+    `;
+  }
+
+  function createMessageNode(message) {
+    const row = documentRoot.createElement("article");
+    row.className = `message-row ${message.role === "user" ? "user" : "assistant"}`;
+    row.setAttribute(
+      "aria-label",
+      message.role === "user" ? "Your message" : "ABot response",
+    );
+    if (message.role !== "user") {
+      const avatar = documentRoot.createElement("div");
+      avatar.className = "message-avatar";
+      avatar.setAttribute("aria-hidden", "true");
+      avatar.textContent = "A";
+      row.appendChild(avatar);
+    }
+
+    const bubble = documentRoot.createElement("div");
+    bubble.className = "message-bubble";
+    if (message.requestId) bubble.title = `Request ${message.requestId}`;
+
+    const meta = documentRoot.createElement("div");
+    meta.className = "message-meta";
+    const author = documentRoot.createElement("span");
+    author.textContent = message.role === "user" ? "You" : "ABot";
+    meta.appendChild(author);
+    const timestamp = createMessageTimestamp({
+      documentRoot,
+      value: message.createdAt,
+    });
+    if (timestamp) meta.appendChild(timestamp);
+    if (message.streaming) {
+      const streaming = documentRoot.createElement("span");
+      streaming.className = "streaming-status";
+      streaming.textContent = "Responding";
+      meta.appendChild(streaming);
+    }
+
+    const body = documentRoot.createElement("div");
+    body.className = "markdown-body";
+    applyTextDirection(body, message.text);
+    body.innerHTML = message.text
+      ? renderMarkdown(message.text)
+      : message.streaming
+        ? '<span class="typing-indicator" aria-label="ABot is working"><i></i><i></i><i></i></span>'
+        : "";
+
+    bubble.appendChild(meta);
+    const attachments = messageAttachments.createNode(message.attachments);
+    if (attachments) bubble.appendChild(attachments);
+
+    if (message.role !== "user" && message.requestId) {
+      const activityInput = {
+        requestId: message.requestId,
+        streaming: Boolean(message.streaming),
+        ...getActivityForMessage(message),
+      };
+      const contextWindow = conversationContextWindow.createNode(activityInput);
+      if (contextWindow) bubble.appendChild(contextWindow);
+      const activity = conversationActivity.createNode(activityInput);
+      if (activity) bubble.appendChild(activity);
+    }
+
+    if (message.thinkingText) {
+      const thinking = documentRoot.createElement("details");
+      thinking.className = "thinking-card";
+      thinking.open =
+        Boolean(message.streaming) &&
+        !viewState.collapsedThinkingMessageIds.has(message.id);
+      thinking.addEventListener("toggle", () => {
+        if (!message.streaming) return;
+        if (thinking.open) {
+          viewState.collapsedThinkingMessageIds.delete(message.id);
+        } else {
+          viewState.collapsedThinkingMessageIds.add(message.id);
+        }
+      });
+      const summary = documentRoot.createElement("summary");
+      summary.innerHTML = `<span>Reasoning</span><span>${
+        message.streaming ? "Live" : "View"
+      }</span>`;
+      const thinkingBody = documentRoot.createElement("div");
+      thinkingBody.className = "thinking-body";
+      applyTextDirection(thinkingBody, message.thinkingText);
+      thinkingBody.innerHTML = renderMarkdown(message.thinkingText);
+      thinking.append(summary, thinkingBody);
+      bubble.appendChild(thinking);
+    }
+
+    bubble.appendChild(body);
+    if (message.role !== "user" && message.text && !message.streaming) {
+      const actions = documentRoot.createElement("div");
+      actions.className = "message-actions";
+      const copyButton = documentRoot.createElement("button");
+      copyButton.type = "button";
+      copyButton.className = "message-action-button";
+      copyButton.textContent = "Copy";
+      copyButton.setAttribute("aria-label", "Copy response");
+      copyButton.addEventListener("click", () => {
+        void copyText(message.text)
+          .then(() => notify("Response copied"))
+          .catch(() => notify("Could not copy response", "failed"));
+      });
+      actions.appendChild(copyButton);
+      bubble.appendChild(actions);
+    }
+    row.appendChild(bubble);
+    return row;
+  }
+
+  function render() {
+    const previousScrollTop = dom.messagesList.scrollTop;
+    const shouldFollow =
+      viewState.followMessages || isNearScrollEnd(dom.messagesList);
+    const messages = getMessages();
+    dom.messagesList.innerHTML = "";
+    if (messages.length === 0) {
+      renderEmptyState();
+      viewState.followMessages = true;
+      updateJumpToLatest();
+      return;
+    }
+    for (const message of messages) {
+      dom.messagesList.appendChild(createMessageNode(message));
+    }
+    const pendingApproval = getPendingApproval();
+    if (pendingApproval) {
+      dom.messagesList.appendChild(createApprovalCard(pendingApproval));
+    }
+    if (shouldFollow) {
+      scrollToEnd();
+    } else {
+      dom.messagesList.scrollTop = previousScrollTop;
+      viewState.followMessages = false;
+      updateJumpToLatest();
+    }
+  }
+
+  function scheduleThinkingRender() {
+    if (viewState.thinkingRenderTimer) return;
+    viewState.thinkingRenderTimer = viewport.setTimeout(() => {
+      viewState.thinkingRenderTimer = 0;
+      render();
+    }, 180);
+  }
+
+  function scheduleMessageRender() {
+    if (viewState.messageRenderTimer) return;
+    viewState.messageRenderTimer = viewport.setTimeout(() => {
+      viewState.messageRenderTimer = 0;
+      render();
+    }, 72);
+  }
+
+  function cancelScheduledMessageRender() {
+    if (!viewState.messageRenderTimer) return;
+    viewport.clearTimeout(viewState.messageRenderTimer);
+    viewState.messageRenderTimer = 0;
+  }
+
+  function cancelScheduledThinkingRender() {
+    if (!viewState.thinkingRenderTimer) return;
+    viewport.clearTimeout(viewState.thinkingRenderTimer);
+    viewState.thinkingRenderTimer = 0;
+  }
+
+  function reset() {
+    viewState.followMessages = true;
+    viewState.collapsedThinkingMessageIds.clear();
+    viewState.scrollSettleVersion += 1;
+    cancelScheduledMessageRender();
+    cancelScheduledThinkingRender();
+    conversationActivity.reset();
+  }
+
+  function forgetThinkingDisclosure(messageId) {
+    viewState.collapsedThinkingMessageIds.delete(messageId);
+  }
+
+  function bind() {
+    if (viewState.bound) return;
+    viewState.bound = true;
+    dom.jumpToLatestButton.addEventListener("click", scrollToEnd);
+    dom.messagesList.addEventListener("scroll", () => {
+      viewState.followMessages = isNearScrollEnd(dom.messagesList);
+      if (!viewState.followMessages) viewState.scrollSettleVersion += 1;
+      updateJumpToLatest();
+    });
+  }
+
+  return {
+    bind,
+    cancelScheduledMessageRender,
+    cancelScheduledThinkingRender,
+    forgetThinkingDisclosure,
+    render,
+    reset,
+    scheduleMessageRender,
+    scheduleThinkingRender,
+  };
+}

package/dist/src/web-ui/app/components/menu-navigation.js

@@ -0,0 +1,39 @@
+import { wrappedIndex } from "../ui-behavior.js";
+
+export function focusSelectedMenuItem(menu, fallback = "first") {
+  requestAnimationFrame(() => {
+    const items = [...menu.querySelectorAll('[role="menuitemradio"]')];
+    const selected = items.find(
+      (item) => item.getAttribute("aria-checked") === "true",
+    );
+    const target =
+      selected || (fallback === "last" ? items.at(-1) : items.at(0));
+    target?.focus();
+  });
+}
+
+export function handleMenuNavigation(event, menu) {
+  if (
+    event.key !== "ArrowDown" &&
+    event.key !== "ArrowUp" &&
+    event.key !== "Home" &&
+    event.key !== "End"
+  ) {
+    return;
+  }
+  const items = [...menu.querySelectorAll('[role="menuitemradio"]')];
+  if (items.length === 0) return;
+  event.preventDefault();
+  const currentIndex = items.indexOf(document.activeElement);
+  const nextIndex =
+    event.key === "Home"
+      ? 0
+      : event.key === "End"
+        ? items.length - 1
+        : wrappedIndex(
+            currentIndex < 0 ? 0 : currentIndex,
+            event.key === "ArrowDown" ? 1 : -1,
+            items.length,
+          );
+  items[nextIndex]?.focus();
+}

package/dist/src/web-ui/app/components/message-attachments.d.ts

@@ -0,0 +1,27 @@
+export type MessageAttachmentInput = {
+  id?: unknown;
+  kind?: unknown;
+  mimeType?: unknown;
+  name?: unknown;
+  storageRef?: unknown;
+  [key: string]: unknown;
+};
+
+export type MessageAttachmentItem = {
+  name: string;
+  kind: "image" | "file";
+  imageUrl: string;
+};
+
+export declare function buildMessageAttachmentsModel(input?: {
+  attachments?: unknown;
+  resolveAttachmentUrl?: (attachment: MessageAttachmentInput) => unknown;
+  baseHref?: string;
+}): MessageAttachmentItem[];
+
+export declare function createMessageAttachments(options?: {
+  documentRoot?: Document;
+  resolveAttachmentUrl?: (attachment: MessageAttachmentInput) => unknown;
+}): {
+  createNode(attachments?: unknown): HTMLElement | null;
+};

package/dist/src/web-ui/app/components/message-attachments.js

@@ -0,0 +1,114 @@
+import { isImageAttachmentMimeType } from "../lib/attachment-policy.js";
+
+function attachmentName(attachment) {
+  const name =
+    typeof attachment?.name === "string" ? attachment.name.trim() : "";
+  if (name) return name;
+  const id = typeof attachment?.id === "string" ? attachment.id.trim() : "";
+  return id || "file";
+}
+
+function safeSameOriginImageUrl(value, baseHref) {
+  if (typeof value !== "string" || !value.trim() || !baseHref) return "";
+  try {
+    const base = new URL(baseHref);
+    const resolved = new URL(value, base);
+    if (
+      (resolved.protocol !== "http:" && resolved.protocol !== "https:") ||
+      resolved.origin !== base.origin
+    ) {
+      return "";
+    }
+    return resolved.href;
+  } catch {
+    return "";
+  }
+}
+
+export function buildMessageAttachmentsModel({
+  attachments,
+  resolveAttachmentUrl,
+  baseHref = globalThis.location?.href,
+} = {}) {
+  if (!Array.isArray(attachments)) return [];
+  return attachments
+    .filter(
+      (attachment) =>
+        attachment &&
+        typeof attachment === "object" &&
+        !Array.isArray(attachment),
+    )
+    .map((attachment) => {
+      const name = attachmentName(attachment);
+      const isImage =
+        attachment.kind === "image" &&
+        isImageAttachmentMimeType(attachment.mimeType);
+      let imageUrl = "";
+      if (isImage && typeof resolveAttachmentUrl === "function") {
+        try {
+          imageUrl = safeSameOriginImageUrl(
+            resolveAttachmentUrl(attachment),
+            baseHref,
+          );
+        } catch {
+          imageUrl = "";
+        }
+      }
+      return {
+        name,
+        kind: imageUrl ? "image" : "file",
+        imageUrl,
+      };
+    });
+}
+
+export function createMessageAttachments({
+  documentRoot = document,
+  resolveAttachmentUrl,
+} = {}) {
+  function createNode(attachments) {
+    const items = buildMessageAttachmentsModel({
+      attachments,
+      resolveAttachmentUrl,
+      baseHref: documentRoot.baseURI,
+    });
+    if (items.length === 0) return null;
+
+    const container = documentRoot.createElement("div");
+    container.className = "message-attachments";
+    container.setAttribute("aria-label", "Attachments");
+
+    for (const item of items) {
+      const attachment = documentRoot.createElement(
+        item.kind === "image" ? "figure" : "span",
+      );
+      attachment.className = `message-attachment ${item.kind}`;
+
+      if (item.kind === "image") {
+        const image = documentRoot.createElement("img");
+        image.className = "message-attachment-image";
+        image.src = item.imageUrl;
+        image.alt = item.name;
+        image.loading = "lazy";
+        image.decoding = "async";
+        image.addEventListener("error", () => {
+          image.hidden = true;
+          attachment.classList.add("load-failed");
+        });
+        attachment.appendChild(image);
+      }
+
+      const label = documentRoot.createElement(
+        item.kind === "image" ? "figcaption" : "span",
+      );
+      label.className = "message-attachment-name";
+      label.textContent = item.name;
+      attachment.appendChild(label);
+      container.appendChild(attachment);
+    }
+
+    return container;
+  }
+
+  return { createNode };
+}

package/dist/src/web-ui/app/components/message-timestamp.d.ts

@@ -0,0 +1,22 @@
+export type MessageTimestampPresentation = Readonly<{
+  dateTime: string;
+  label: string;
+  title: string;
+}>;
+
+export function buildMessageTimestamp(
+  value: unknown,
+  options?: Readonly<{
+    locales?: Intl.LocalesArgument;
+    timeZone?: string;
+  }>,
+): MessageTimestampPresentation | null;
+
+export function createMessageTimestamp(
+  options: Readonly<{
+    documentRoot: Document;
+    value: unknown;
+    locales?: Intl.LocalesArgument;
+    timeZone?: string;
+  }>,
+): HTMLTimeElement | null;

package/dist/src/web-ui/app/components/message-timestamp.js

@@ -0,0 +1,44 @@
+function timestampDate(value) {
+  if (value === null || value === undefined || value === "") return null;
+  const normalized =
+    typeof value === "string" && /^\d+$/u.test(value.trim())
+      ? Number(value)
+      : value;
+  const date = new Date(normalized);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+export function buildMessageTimestamp(value, { locales, timeZone } = {}) {
+  const date = timestampDate(value);
+  if (!date) return null;
+  const zoneOptions = timeZone ? { timeZone } : {};
+  return {
+    dateTime: date.toISOString(),
+    label: new Intl.DateTimeFormat(locales, {
+      dateStyle: "short",
+      timeStyle: "short",
+      ...zoneOptions,
+    }).format(date),
+    title: new Intl.DateTimeFormat(locales, {
+      dateStyle: "full",
+      timeStyle: "long",
+      ...zoneOptions,
+    }).format(date),
+  };
+}
+
+export function createMessageTimestamp({
+  documentRoot,
+  value,
+  locales,
+  timeZone,
+}) {
+  const presentation = buildMessageTimestamp(value, { locales, timeZone });
+  if (!presentation) return null;
+  const time = documentRoot.createElement("time");
+  time.className = "message-timestamp";
+  time.dateTime = presentation.dateTime;
+  time.title = presentation.title;
+  time.textContent = presentation.label;
+  return time;
+}

package/dist/src/web-ui/app/components/model-selector.d.ts

@@ -0,0 +1,15 @@
+export function createModelSelector(
+  options: Readonly<{
+    select: HTMLSelectElement;
+    button: HTMLButtonElement;
+    valueLabel: HTMLElement;
+    menu: HTMLElement;
+    documentRoot?: Document;
+    viewport?: Window;
+    onOpen?: () => void;
+  }>,
+): Readonly<{
+  bind: () => void;
+  close: () => void;
+  sync: () => void;
+}>;

package/dist/src/web-ui/app/components/model-selector.js

@@ -0,0 +1,142 @@
+function modelOptions(select) {
+  return [...select.options].map((option) => ({
+    value: option.value,
+    label: option.label || option.textContent || option.value,
+    disabled: option.disabled,
+  }));
+}
+
+export function createModelSelector({
+  select,
+  button,
+  valueLabel,
+  menu,
+  documentRoot = document,
+  viewport = window,
+  onOpen = () => {},
+}) {
+  let open = false;
+  let bound = false;
+
+  function selectedOption() {
+    return modelOptions(select).find((option) => option.value === select.value);
+  }
+
+  function setOpen(next, { restoreFocus = false } = {}) {
+    open = Boolean(next) && !select.disabled && modelOptions(select).length > 0;
+    render();
+    if (open) {
+      onOpen();
+      viewport.requestAnimationFrame(() => {
+        menu
+          .querySelector('[role="menuitemradio"][aria-checked="true"]')
+          ?.focus();
+      });
+    } else if (restoreFocus) {
+      button.focus();
+    }
+  }
+
+  function choose(value) {
+    if (!modelOptions(select).some((option) => option.value === value)) return;
+    select.value = value;
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+    setOpen(false, { restoreFocus: true });
+  }
+
+  function render() {
+    const options = modelOptions(select);
+    const selected = selectedOption() || options[0] || null;
+    button.disabled = select.disabled || options.length === 0;
+    button.setAttribute("aria-expanded", open ? "true" : "false");
+    button.classList.toggle("open", open);
+    valueLabel.textContent = selected?.label || "No models configured";
+    menu.hidden = !open;
+    menu.classList.toggle("open", open);
+    menu.setAttribute("role", "menu");
+    menu.replaceChildren();
+    for (const option of options) {
+      const item = documentRoot.createElement("button");
+      const active = option.value === select.value;
+      item.type = "button";
+      item.className = `model-select-option${active ? " selected" : ""}`;
+      item.setAttribute("role", "menuitemradio");
+      item.setAttribute("aria-checked", active ? "true" : "false");
+      item.tabIndex = active ? 0 : -1;
+      item.disabled = option.disabled;
+      item.dataset.modelId = option.value;
+
+      const label = documentRoot.createElement("span");
+      label.className = "model-select-option-label";
+      label.textContent = option.label;
+      const check = documentRoot.createElement("span");
+      check.className = "model-select-check";
+      check.setAttribute("aria-hidden", "true");
+      check.textContent = active ? "✓" : "";
+      item.append(label, check);
+      item.addEventListener("click", () => choose(option.value));
+      menu.appendChild(item);
+    }
+  }
+
+  function moveFocus(event) {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      return;
+    }
+    const items = [
+      ...menu.querySelectorAll('[role="menuitemradio"]:not(:disabled)'),
+    ];
+    if (items.length === 0) return;
+    event.preventDefault();
+    const current = Math.max(0, items.indexOf(documentRoot.activeElement));
+    const next =
+      event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? items.length - 1
+          : (current + (event.key === "ArrowDown" ? 1 : -1) + items.length) %
+            items.length;
+    items[next]?.focus();
+  }
+
+  function bind() {
+    if (bound) return;
+    bound = true;
+    button.addEventListener("click", (event) => {
+      event.stopPropagation();
+      setOpen(!open);
+    });
+    button.addEventListener("keydown", (event) => {
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      event.preventDefault();
+      setOpen(true);
+    });
+    menu.addEventListener("click", (event) => event.stopPropagation());
+    menu.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setOpen(false, { restoreFocus: true });
+        return;
+      }
+      moveFocus(event);
+    });
+    select.addEventListener("change", render);
+    documentRoot.addEventListener("click", (event) => {
+      if (
+        !open ||
+        button.contains(event.target) ||
+        menu.contains(event.target)
+      ) {
+        return;
+      }
+      setOpen(false);
+    });
+    render();
+  }
+
+  return {
+    bind,
+    close: () => setOpen(false),
+    sync: render,
+  };
+}