char-slop/berry

git clone https://git.t4t.associates/char-slop/berry

Charlotte Sombetter code line breakingbc405c32026-10-19

import { Signal } from "@char/aftercare";
import type { ImageContent, UserMessage } from "@earendil-works/pi-ai";
import { decodeBase64, encodeBase64 } from "@std/encoding/base64";
import { type DraftImage, imageDraft } from "./image-drafts.ts";
import type { CommandInfo } from "./conversation.tsx";
import type { Place } from "./tree.tsx";
import { computed, keyed, Scope, swap } from "./ui.ts";

type Completion = { value: string; label: string; description: string; directory?: boolean };
type Query = { kind: "command"; prefix: string } | {
  kind: "reference";
  prefix: string;
  start: number;
  end: number;
};

/** The reference containing the caret, including its unfinished suffix. */
export function referenceAt(text: string, start: number, end = start): Query | null {
  if (start !== end) return null;
  const match = text.slice(0, start).match(/(?:^|\s|[([{])@([^\s]*)$/u);
  if (!match) return null;
  const prefix = match[1];
  return {
    kind: "reference",
    prefix,
    start: start - prefix.length,
    end: start + (text.slice(start).match(/^[^\s]*/u)?.[0].length ?? 0),
  };
}

const EMPTY: readonly never[] = [];
const drafts = new Map<string, string>();
let nextSendMenu = 0;

function savedText(route: string): string {
  if (drafts.has(route)) return drafts.get(route)!;
  try {
    return localStorage.getItem(`berry.draft.${route}`) ?? "";
  } catch {
    return "";
  }
}

function saveText(route: string, text: string) {
  try {
    if (text === "") localStorage.removeItem(`berry.draft.${route}`);
    else localStorage.setItem(`berry.draft.${route}`, text);
    drafts.delete(route);
  } catch {
    // navigation still preserves drafts when browser storage is unavailable
    drafts.set(route, text);
  }
}

/** Text for the composer of the view a choice in the tree opens. */
let handoff: { route: string; text: string } | null = null;

/** Show `place`, and its text in its composer. */
export function go(place: Place, setText: (text: string) => void) {
  const draft = place.at === undefined ? "" : `${place.fork ? "/fork" : ""}@${place.at}`;
  const route = `#/${place.tid}${draft}`;
  if (route === location.hash) {
    if (place.text !== undefined) setText(place.text);
    return;
  }
  handoff = place.text === undefined ? null : { route, text: place.text };
  location.hash = route;
}

/**
 * `send` takes whatever is not a command that runs in the browser; a failure keeps the text. `abort`, where there is
 * something to abort, stops the conversation while it is busy.
 */
export function composer(
  scope: Scope,
  route: string,
  busy: Signal<boolean>,
  commands: Signal<readonly CommandInfo[]>,
  send: (text: string, followUp: boolean, images: readonly ImageContent[]) => Promise<void>,
  notify: (message: string, error?: boolean) => void,
  abort?: () => Promise<unknown>,
  completeReferences?: (prefix: string) => Promise<readonly string[]>,
  shellEnabled = new Signal(false),
): {
  element: Element;
  setText(text: string): void;
  restore(content: UserMessage["content"]): Promise<boolean>;
} {
  const input = (
    <textarea
      rows={1}
      placeholder="message or /command"
    />
  ) as HTMLTextAreaElement;
  // what submit would run as a shell command rather than send as a message
  const inShellMode = () => shellEnabled.get() && input.value.trimStart().startsWith("!");
  const syncShellMode = () => input.classList.toggle("shell", inShellMode());
  scope.add(
    shellEnabled.subscribeImmediate((enabled) => {
      input.placeholder = enabled ? "message, /command, or !shell" : "message or /command";
      syncShellMode();
    }).unsubscribe,
  );
  const draft = imageDraft(route);
  let pasting = 0;
  const attachments = <div class="attachments" /> as HTMLElement;
  const previews = keyed<DraftImage, string>(attachments, (image) => image.id, (image) => {
    const url = URL.createObjectURL(image.blob);
    const status = <span class="attachment-status" role="status" /> as HTMLElement;
    const node = (
      <div class="attachment">
        <img src={url} alt={image.name} />
        <span class="attachment-name">{image.name}</span>
        {status}
        <button
          type="button"
          class="danger"
          aria-label={`Remove ${image.name}`}
          title="Remove image"
          _onclick={() => draft.remove([image.id]).catch((error) => notify(error.message, true))}
        >
          ×
        </button>
      </div>
    ) as HTMLElement;
    const update = (next: DraftImage) => {
      node.dataset.status = next.status;
      status.textContent = next.status === "loading" ? "saving…" : next.error ?? "";
      status.hidden = status.textContent === "";
    };
    update(image);
    return { node, update, dispose: () => URL.revokeObjectURL(url) };
  });
  scope.add(
    draft.items.subscribeImmediate((items) => {
      attachments.hidden = items.length === 0;
      previews.sync(items);
    }).unsubscribe,
  );
  scope.add(previews.dispose);
  const draftError = <div class="attachment-error" role="alert" /> as HTMLElement;
  scope.add(
    draft.error.subscribeImmediate((error) => {
      draftError.hidden = error === null;
      draftError.textContent = error;
    }).unsubscribe,
  );
  let query: Query | null = null;
  let revision = 0;
  let timer: ReturnType<typeof setTimeout> | undefined;
  const matches = new Signal<readonly Completion[]>(EMPTY);
  const sendOptionsOpen = new Signal(false);
  const selected = new Signal(0);
  const dismiss = () => {
    query = null;
    revision++;
    clearTimeout(timer);
    matches.set(EMPTY);
  };
  const refreshMatches = () => {
    revision++;
    clearTimeout(timer);
    if (query?.kind === "command") {
      selected.set(0);
      matches.set(
        commands.get().filter((c) => c.name.startsWith(query!.prefix)).map((c) => ({
          value: `/${c.name} `,
          label: `/${c.name}`,
          description: c.description,
        })),
      );
    } else if (query?.kind === "reference" && completeReferences) {
      const current = revision;
      const prefix = query.prefix;
      timer = setTimeout(() => {
        void completeReferences(prefix).then((paths) => {
          if (current !== revision) return;
          selected.set(0);
          matches.set(paths.map((path) => ({
            value: path,
            label: `@${path}`,
            description: "",
            directory: path.endsWith("/"),
          })));
        }).catch(() => {});
      }, 100);
    } else {
      matches.set(EMPTY);
    }
  };
  const updateQuery = () => {
    const previousKind = query?.kind;
    syncShellMode();
    query = inShellMode()
      ? null
      : input.value.match(/^\/(\S*)$/)
      ? { kind: "command", prefix: input.value.slice(1) }
      : referenceAt(input.value, input.selectionStart, input.selectionEnd);
    if (query?.kind !== previousKind) matches.set(EMPTY);
    refreshMatches();
  };
  scope.add(dismiss);
  scope.add(commands.subscribe(refreshMatches).unsubscribe);

  const resize = () => {
    const frame = input.parentElement!;
    // intermediate measurements must not expand the transcript and clamp its scroll position
    frame.style.minHeight = `${frame.getBoundingClientRect().height}px`;
    frame.classList.remove("stacked");
    input.style.height = "auto";
    input.style.overflowY = "hidden";
    // only soft wrapping should move the controls below the text
    const wrappedHeight = input.scrollHeight;
    input.style.whiteSpace = "pre";
    const wraps = wrappedHeight > input.scrollHeight;
    input.style.whiteSpace = "";
    frame.classList.toggle("stacked", wraps);
    // allow for subpixel rounding in the native textarea
    input.style.height = `${input.scrollHeight + 1}px`;
    input.style.overflowY = "";
    frame.style.minHeight = "";
  };
  const complete = (item: Completion) => {
    if (!query) return;
    const start = query.kind === "reference" ? query.start : 0;
    const end = query.kind === "reference" ? query.end : input.value.length;
    const suffix = query.kind === "reference" && !item.directory && end === input.value.length
      ? " "
      : "";
    const replacement = item.value + suffix;
    input.value = input.value.slice(0, start) + replacement + input.value.slice(end);
    input.setSelectionRange(start + replacement.length, start + replacement.length);
    saveText(route, input.value);
    resize();
    input.focus();
    if (item.directory) updateQuery();
    else dismiss();
  };

  const setText = (text: string) => {
    input.value = text;
    saveText(route, text);
    syncShellMode();
    dismiss();
    // once it is laid out, which a new view is not yet
    requestAnimationFrame(() => {
      resize();
      input.focus();
    });
  };
  const saved = savedText(route);
  if (saved !== "") setText(saved);
  if (handoff?.route === `#/${route}`) {
    setText(handoff.text);
    handoff = null;
  }

  async function submit(followUp: boolean) {
    sendOptionsOpen.set(false);
    const original = input.value;
    const text = original.trim();
    if (
      draft.submitting ||
      (text === "" && !draft.loading.get() && draft.items.get().length === 0 && !pasting)
    ) return;
    draft.submitting = true;
    try {
      if (draft.loading.get()) await draft.ready;
      if (pasting) throw new Error("Wait for pasted images to finish saving");
      const captured = draft.items.get();
      if (text === "" && captured.length === 0) return;
      if (captured.some((image) => image.status !== "ready")) {
        throw new Error("Wait for images to finish saving, or remove images with errors");
      }
      if (captured.length > 0 && draft.error.get()) throw new Error(draft.error.get()!);
      const name = text.match(/^\/(\S+)/)?.[1];
      if (name && captured.length > 0) throw new Error("Slash commands cannot include images");
      if (shellEnabled.get() && text.startsWith("!") && captured.length > 0) {
        throw new Error("Shell commands cannot include images");
      }
      const images: ImageContent[] = captured.length === 0 ? [] : await Promise.all(
        captured.map(async (image) => ({
          type: "image" as const,
          mimeType: image.blob.type,
          data: encodeBase64(await image.blob.arrayBuffer()),
        })),
      );
      const local = commands.get().find((command) => command.run && command.name === name);
      if (local) await local.run!();
      else await send(text, followUp, images);
      if (captured.length > 0) await draft.remove(captured.map((image) => image.id));
      if (input.value === original) {
        input.value = "";
        if (savedText(route) === original) saveText(route, "");
        dismiss();
        syncShellMode();
        resize();
      }
    } catch (error) {
      notify(error instanceof Error ? error.message : String(error), true);
    } finally {
      draft.submitting = false;
    }
  }

  input.addEventListener("paste", (event) => {
    const clipboard = event.clipboardData;
    if (!clipboard) return;
    const files = [...clipboard.items].flatMap((item) => {
      const file = item.kind === "file" && item.type.startsWith("image/") ? item.getAsFile() : null;
      return file ? [file] : [];
    });
    if (files.length === 0) return;
    event.preventDefault();
    const text = clipboard.getData("text/plain");
    if (text) {
      input.setRangeText(text, input.selectionStart, input.selectionEnd, "end");
      saveText(route, input.value);
      resize();
      updateQuery();
    }
    pasting++;
    void draft.add(files).catch((error) => notify(error.message, true)).finally(() => pasting--);
  });
  input.addEventListener("input", () => {
    saveText(route, input.value);
    resize();
    updateQuery();
  });
  input.addEventListener("click", updateQuery);
  input.addEventListener("keyup", (event) => {
    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) updateQuery();
  });
  input.addEventListener("keydown", (event) => {
    if (event.isComposing) return;
    const list = matches.get();
    if (event.key === "Escape" && query) {
      event.preventDefault();
      dismiss();
    } else if (["ArrowDown", "ArrowUp"].includes(event.key) && list.length > 0) {
      event.preventDefault();
      selected.set(
        (selected.get() + (event.key === "ArrowDown" ? 1 : -1) + list.length) % list.length,
      );
      suggestions.querySelectorAll("button")[selected.get()]?.scrollIntoView({ block: "nearest" });
    } else if (
      list.length > 0 && (event.key === "Tab" ||
        (event.key === "Enter" && query?.kind === "reference" && !event.shiftKey && !event.altKey))
    ) {
      event.preventDefault();
      complete(list[selected.get()]);
    } else if (
      event.key === "Enter" && !event.shiftKey && !event.isComposing &&
      // an on-screen keyboard has no shift+enter for a new line; its buttons send instead
      !matchMedia("(pointer: coarse)").matches
    ) {
      event.preventDefault();
      void submit(event.altKey);
    }
  });

  const suggestions = <div class="suggestions" hidden={matches.derive((m) => m.length === 0)} />;
  swap(
    scope,
    suggestions,
    matches,
    (list, scope) =>
      list.map((c, index) => (
        <button
          type="button"
          class={computed(scope, [selected], () => selected.get() === index ? "selected" : "")}
          _onmousedown={(event) => event.preventDefault()}
          _onclick={() => complete(c)}
        >
          <span class="command" title={c.label}>{c.label}</span>
          <span class="description">{c.description}</span>
        </button>
      )),
  );
  const sendMenuId = `composer-send-${++nextSendMenu}`;
  const element = (
    <div class="composer">
      {suggestions}
      {attachments}
      {draftError}
      <div class="composer-input">
        {input}
        <div class="composer-controls">
          <div
            class="actions"
            // keep the keyboard up
            _onmousedown={(event) => event.preventDefault()}
          >
            <button
              type="button"
              class="primary send"
              aria-label="Send message"
              title="Send message"
              hidden={busy}
              _onclick={() => void submit(false)}
            >
              send
            </button>
            <div class="send-options" hidden={computed(scope, [busy], () => !busy.get())}>
              <button type="button" class="primary" _onclick={() => void submit(false)}>
                steer
              </button>
              <button
                type="button"
                class="send-more"
                aria-label="Other send options"
                title="Other send options"
                aria-expanded={sendOptionsOpen.derive(String)}
                aria-controls={sendMenuId}
                _onclick={() => sendOptionsOpen.set(!sendOptionsOpen.get())}
              >
                ▾
              </button>
              <div
                id={sendMenuId}
                class="send-menu"
                role="group"
                aria-label="Other send options"
                hidden={sendOptionsOpen.derive((open) => !open)}
              >
                <button
                  type="button"
                  title="enqueue message for after response"
                  _onclick={() => {
                    void submit(true);
                    input.focus({ preventScroll: true });
                  }}
                >
                  follow up
                </button>
              </div>
            </div>
          </div>
          {abort
            ? (
              <button
                type="button"
                class="abort"
                aria-label="Abort response"
                title="Abort response"
                hidden={busy.derive((b) => !b)}
                _onmousedown={(event) => event.preventDefault()}
                _onclick={() => abort().catch((error) => notify(error.message, true))}
              />
            )
            : ""}
        </div>
      </div>
      <div class="hints">
        <span hidden={busy}>
          <kbd>enter</kbd> send
        </span>
        <span hidden={busy.derive((b) => !b)}>
          <kbd>enter</kbd> steer
        </span>
        <span hidden={busy.derive((b) => !b)}>
          <kbd>alt</kbd>
          <kbd>enter</kbd> follow up
        </span>
        <span>
          <kbd>shift</kbd>
          <kbd>enter</kbd> new line
        </span>
        <span>
          <kbd>/</kbd> commands · <kbd>@</kbd> files
          <span hidden={shellEnabled.derive((enabled) => !enabled)}>
            {" · "}
            <kbd>!</kbd> shell · <kbd>!!</kbd> shell (silent)
          </span>
        </span>
        <span>
          <kbd>tab</kbd> complete
        </span>
      </div>
    </div>
  );
  const sendOptions = element.querySelector(".send-options")!;
  const more = sendOptions.querySelector<HTMLButtonElement>(".send-more")!;
  const dismissSendOptions = (event: Event) => {
    if (!sendOptions.contains(event.target as Node)) sendOptionsOpen.set(false);
  };
  const escapeSendOptions = (event: KeyboardEvent) => {
    if (event.key !== "Escape" || !sendOptionsOpen.get()) return;
    event.preventDefault();
    event.stopPropagation();
    const keyboard = sendOptions.contains(document.activeElement);
    sendOptionsOpen.set(false);
    (keyboard ? more : input).focus({ preventScroll: true });
  };
  document.addEventListener("pointerdown", dismissSendOptions);
  document.addEventListener("focusin", dismissSendOptions);
  document.addEventListener("keydown", escapeSendOptions, true);
  const viewport = input.ownerDocument.defaultView!;
  viewport.addEventListener("resize", resize);
  scope.add(() => {
    document.removeEventListener("pointerdown", dismissSendOptions);
    document.removeEventListener("focusin", dismissSendOptions);
    document.removeEventListener("keydown", escapeSendOptions, true);
    viewport.removeEventListener("resize", resize);
  });
  scope.add(
    busy.subscribe(() => {
      sendOptionsOpen.set(false);
      requestAnimationFrame(resize);
    }).unsubscribe,
  );
  return {
    element,
    setText,
    async restore(content) {
      await draft.ready;
      if (input.value !== "" || draft.items.get().length || draft.submitting || pasting) {
        return false;
      }
      const blocks = typeof content === "string" ? [] : content;
      const files = blocks.flatMap((block, index) =>
        block.type === "image"
          ? [
            new File([decodeBase64(block.data)], `Restored image ${index + 1}`, {
              type: block.mimeType,
            }),
          ]
          : []
      );
      const saving = files.length ? draft.add(files) : Promise.resolve();
      setText(
        typeof content === "string"
          ? content
          : blocks.flatMap((block) => block.type === "text" ? [block.text] : []).join("\n"),
      );
      await saving;
      return true;
    },
  };
}