fauna-api 0.0.0-stage → 1.0.676

package/dist/src/ui/browser.js

@@ -0,0 +1,470 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { gsap } from "gsap";
+import { Cursor } from "./cursor.js";
+import { DomReplayer } from "../marmot/web.js";
+const DRAG_SLOP = 4;
+const SCROLL_FLUSH_MS = 100;
+/** PointerEvent.button to the click tool's button. */
+const BUTTONS = { 0: "left", 1: "middle", 2: "right" };
+const TYPE_FLUSH_MS = 60;
+const MODIFIERS = new Set(["Shift", "Control", "Alt", "Meta", "CapsLock", "Dead", "Unidentified"]);
+/** A press released at `up`: a click where it went down, or a drag once it moved past the slop. */
+export function pressTool(down, up) {
+    if (Math.hypot(up.x - down.x, up.y - down.y) < DRAG_SLOP)
+        return { kind: "click", x: down.x, y: down.y };
+    return { kind: "drag", from: down, to: up };
+}
+/** Plain printable keys become text to batch, everything else a chord in the key tool's names. */
+export function keyInput(event) {
+    if (event.isComposing || MODIFIERS.has(event.key))
+        return null;
+    const chord = event.ctrlKey || event.altKey || event.metaKey;
+    if (event.key.length === 1 && !chord)
+        return { text: event.key };
+    const key = event.key === " " ? "space" : event.key.length === 1 ? event.key.toLowerCase() : event.key;
+    return {
+        keys: [
+            ...(event.ctrlKey ? ["ctrl"] : []),
+            ...(event.altKey ? ["alt"] : []),
+            ...(event.metaKey ? ["meta"] : []),
+            ...(event.shiftKey ? ["shift"] : []),
+            key,
+        ],
+    };
+}
+/**
+ * Forward a person's pointer, wheel, keyboard, and paste on `layer` to the room.
+ * Tools go out as soon as they're made, without waiting for replies; the host runs
+ * them in the order they arrive, so a click lands before the text typed after it.
+ * Bind it only while you control the room; the server refuses anyone else.
+ */
+export function bindInput(room, layer, opts) {
+    const { toPage } = opts;
+    const invoke = (tool) => room.invokeTool(tool);
+    const send = (tool) => {
+        invoke(tool).catch(() => undefined);
+    };
+    let text = "";
+    let textTimer = 0;
+    const flushText = () => {
+        window.clearTimeout(textTimer);
+        textTimer = 0;
+        if (text)
+            send({ kind: "type", text });
+        text = "";
+    };
+    let wheel = { x: 0, y: 0 };
+    let wheelAt = null;
+    let wheelTimer = 0;
+    const flushWheel = () => {
+        wheelTimer = 0;
+        if (!wheelAt)
+            return;
+        send({ kind: "move", x: wheelAt.x, y: wheelAt.y });
+        send({ kind: "scroll", deltaX: Math.round(wheel.x), deltaY: Math.round(wheel.y) });
+        wheel = { x: 0, y: 0 };
+        wheelAt = null;
+    };
+    let down = null;
+    let downButton = "left";
+    // Left presses click or drag; right and middle presses click with that button. A quick
+    // second click goes out like any other: the host counts it toward a double click.
+    const onPointerDown = (event) => {
+        const button = BUTTONS[event.button];
+        if (!button)
+            return;
+        const point = toPage(event.clientX, event.clientY);
+        if (!point)
+            return;
+        event.preventDefault();
+        layer.focus({ preventScroll: true });
+        layer.setPointerCapture(event.pointerId);
+        down = point;
+        downButton = button;
+    };
+    const onPointerUp = (event) => {
+        if (!down)
+            return;
+        const start = down;
+        down = null;
+        flushText();
+        if (downButton !== "left") {
+            send({ kind: "click", x: start.x, y: start.y, button: downButton });
+            return;
+        }
+        const end = toPage(event.clientX, event.clientY) ?? start;
+        const tool = pressTool(start, end);
+        if (tool.kind === "click" && opts.claimClick?.(start))
+            return;
+        send(tool);
+    };
+    // The page's own menu shows through the right click instead.
+    const onContextMenu = (event) => event.preventDefault();
+    const onPointerMove = (event) => {
+        if (!down)
+            opts.onHover?.(toPage(event.clientX, event.clientY));
+    };
+    const onPointerLeave = () => opts.onHover?.(null);
+    const onWheel = (event) => {
+        const point = toPage(event.clientX, event.clientY);
+        if (!point)
+            return;
+        event.preventDefault();
+        const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? layer.clientHeight : 1;
+        wheel = { x: wheel.x + event.deltaX * unit, y: wheel.y + event.deltaY * unit };
+        wheelAt = point;
+        if (!wheelTimer)
+            wheelTimer = window.setTimeout(flushWheel, SCROLL_FLUSH_MS);
+    };
+    const onKeyDown = (event) => {
+        // Leave paste to the paste event, which carries the clipboard.
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "v")
+            return;
+        const input = keyInput(event);
+        if (!input)
+            return;
+        if ("keys" in input && !opts.keys) {
+            // Enter and Tab still reach a page as typed text.
+            const typed = input.keys.length === 1 ? { Enter: "\n", Tab: "\t" }[input.keys[0]] : undefined;
+            if (!typed)
+                return;
+            event.preventDefault();
+            text += typed;
+            flushText();
+            return;
+        }
+        event.preventDefault();
+        if ("text" in input) {
+            text += input.text;
+            window.clearTimeout(textTimer);
+            textTimer = window.setTimeout(flushText, TYPE_FLUSH_MS);
+            return;
+        }
+        flushText();
+        send({ kind: "key", keys: input.keys });
+    };
+    const onPaste = (event) => {
+        const pasted = event.clipboardData?.getData("text") ?? "";
+        if (!pasted)
+            return;
+        event.preventDefault();
+        flushText();
+        send({ kind: "type", text: pasted });
+    };
+    layer.addEventListener("pointerdown", onPointerDown);
+    layer.addEventListener("pointerup", onPointerUp);
+    layer.addEventListener("pointermove", onPointerMove);
+    layer.addEventListener("pointerleave", onPointerLeave);
+    layer.addEventListener("contextmenu", onContextMenu);
+    layer.addEventListener("wheel", onWheel, { passive: false });
+    layer.addEventListener("keydown", onKeyDown);
+    layer.addEventListener("paste", onPaste);
+    return () => {
+        flushText();
+        window.clearTimeout(wheelTimer);
+        layer.removeEventListener("pointerdown", onPointerDown);
+        layer.removeEventListener("pointerup", onPointerUp);
+        layer.removeEventListener("pointermove", onPointerMove);
+        layer.removeEventListener("pointerleave", onPointerLeave);
+        layer.removeEventListener("contextmenu", onContextMenu);
+        layer.removeEventListener("wheel", onWheel);
+        layer.removeEventListener("keydown", onKeyDown);
+        layer.removeEventListener("paste", onPaste);
+    };
+}
+export function cursorSeed(options) {
+    return options.seed || options.room?.id || "browser";
+}
+export function toolBadge(tool) {
+    switch (tool.kind) {
+        case "move": return { label: "Move", tone: "neutral" };
+        case "click": return { label: "Click", tone: "neutral" };
+        case "drag": return { label: "Drag", tone: "neutral" };
+        case "scroll": return { label: "Scroll", tone: "neutral" };
+        case "type": return { label: "Typing", tone: "neutral" };
+        case "executeJavascript": return { label: "Running JS", tone: "neutral" };
+        case "search": return { label: "Search", tone: "neutral" };
+        case "exit": return tool.answer?.trim()
+            ? { label: "Found it", tone: "good" }
+            : { label: "Stopped", tone: "bad" };
+    }
+}
+function landed(current, x, y, slack = 8) {
+    return Math.hypot(current.x - x, current.y - y) < slack;
+}
+export function playBrowserTool(opts) {
+    const { tool, current, toScreen } = opts;
+    if (opts.badge) {
+        const next = toolBadge(tool);
+        opts.badge.textContent = next.label;
+        opts.badge.dataset.tone = next.tone;
+        opts.badge.style.display = "";
+    }
+    const tl = gsap.timeline();
+    if (tool.kind === "click") {
+        const x = tool.x ?? current.x;
+        const y = tool.y ?? current.y;
+        const screen = toScreen(x, y);
+        if (opts.ripple) {
+            gsap.set(opts.ripple, { left: screen.x, top: screen.y, display: "block" });
+            opts.ripple.classList.remove("is-firing");
+            void opts.ripple.offsetWidth;
+            opts.ripple.classList.add("is-firing");
+        }
+        tl.to(opts.cursor, { scale: 0.86, duration: 0.08, ease: "power2.out" })
+            .to(opts.cursor, { scale: 1, duration: 0.16, ease: "power2.out" });
+        if (!landed(current, x, y)) {
+            tl.to(opts.cursor, { x: screen.x, y: screen.y, duration: 0.18, ease: "power2.out" }, 0);
+        }
+    }
+    else if (tool.kind === "move" && !landed(current, tool.x, tool.y)) {
+        const screen = toScreen(tool.x, tool.y);
+        tl.to(opts.cursor, { x: screen.x, y: screen.y, duration: 0.2, ease: "power2.out" });
+    }
+    else if (tool.kind === "drag") {
+        const dest = tool.to;
+        const start = tool.from ?? { x: current.x, y: current.y };
+        if (!landed(current, dest.x, dest.y)) {
+            const from = toScreen(start.x, start.y);
+            const to = toScreen(dest.x, dest.y);
+            if (!landed({ ...current, x: start.x, y: start.y }, dest.x, dest.y)) {
+                tl.to(opts.cursor, { x: from.x, y: from.y, duration: 0.12, ease: "power2.out" });
+            }
+            tl.to(opts.cursor, { x: to.x, y: to.y, duration: 0.28, ease: "power2.inOut" });
+        }
+    }
+    return tl;
+}
+/** Styles a field lays its text out with, copied onto the mirror that measures it. */
+const MIRRORED = [
+    "box-sizing", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "border-style",
+    "padding-top", "padding-right", "padding-bottom", "padding-left", "font-style", "font-variant", "font-weight",
+    "font-stretch", "font-size", "font-family", "line-height", "letter-spacing", "word-spacing", "text-align",
+    "text-transform", "text-indent", "tab-size", "direction",
+];
+const SELECTION = "rgba(51, 144, 255, 0.38)";
+const BLINK_MS = 1060;
+/**
+ * The host's caret, or its selection, drawn over the focused text field of a replay. The
+ * copy is never focused, so it has neither; the recorder streams them as
+ * `data-fauna-caret="start,end,scrollLeft,scrollTop"`. The marks sit in a layer at the end
+ * of the replay's document, outside every subtree the page mutates.
+ */
+function caretPainter(getDoc) {
+    let layer = null;
+    let painted = "";
+    let frame = 0;
+    const clear = () => {
+        layer?.replaceChildren();
+        painted = "";
+    };
+    const paint = () => {
+        frame = 0;
+        const doc = getDoc();
+        if (!doc?.documentElement || !doc.defaultView)
+            return;
+        if (layer?.ownerDocument !== doc || !layer.isConnected) {
+            layer = doc.createElement("div");
+            layer.setAttribute("aria-hidden", "true");
+            layer.style.cssText = "all:initial;position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2147483647";
+            doc.documentElement.appendChild(layer);
+            painted = "";
+        }
+        const field = doc.querySelector("[data-fauna-caret]");
+        const caret = field?.getAttribute("data-fauna-caret") ?? "";
+        const rect = field?.getBoundingClientRect();
+        if (!field || !caret || !rect?.width || !rect.height)
+            return clear();
+        const [start, end, scrollLeft, scrollTop] = caret.split(",").map((n) => Number(n) || 0);
+        const style = doc.defaultView.getComputedStyle(field);
+        const textarea = field.tagName === "TEXTAREA";
+        const value = field.value;
+        const from = Math.max(0, Math.min(start, value.length));
+        const to = Math.max(from, Math.min(end, value.length));
+        const mirror = doc.createElement("div");
+        mirror.style.cssText = "all:initial;position:fixed;pointer-events:none;visibility:hidden;overflow:hidden";
+        for (const name of MIRRORED)
+            mirror.style.setProperty(name, style.getPropertyValue(name));
+        const px = (name) => parseFloat(style.getPropertyValue(name)) || 0;
+        const inner = {
+            left: rect.left + px("border-left-width"),
+            top: rect.top + px("border-top-width"),
+            right: rect.right - px("border-right-width"),
+            bottom: rect.bottom - px("border-bottom-width"),
+        };
+        mirror.style.boxSizing = "border-box";
+        mirror.style.left = `${rect.left}px`;
+        mirror.style.top = `${rect.top}px`;
+        mirror.style.width = `${rect.width}px`;
+        mirror.style.height = `${rect.height}px`;
+        mirror.style.whiteSpace = textarea ? "pre-wrap" : "pre";
+        mirror.style.overflowWrap = textarea ? "break-word" : "normal";
+        // An input centers its one line in the box.
+        if (!textarea)
+            mirror.style.lineHeight = `${inner.bottom - inner.top - px("padding-top") - px("padding-bottom")}px`;
+        const mark = doc.createElement("span");
+        mark.textContent = from === to ? "\u200b" : value.slice(from, to);
+        mirror.append(value.slice(0, from), mark, value.slice(to) + (textarea ? "\u200b" : ""));
+        layer.appendChild(mirror);
+        mirror.scrollLeft = scrollLeft;
+        mirror.scrollTop = scrollTop;
+        const boxes = Array.from(mark.getClientRects());
+        mirror.remove();
+        const fontSize = px("font-size") || 16;
+        const color = from === to ? (style.caretColor && style.caretColor !== "auto" ? style.caretColor : style.color) : SELECTION;
+        const shapes = [];
+        for (const box of boxes) {
+            const height = Math.min(box.height, fontSize * 1.25);
+            const left = from === to ? box.left : Math.max(box.left, inner.left);
+            const right = from === to ? box.left + Math.max(1, Math.round(fontSize / 16)) : Math.min(box.right, inner.right);
+            const top = Math.max(box.top + (box.height - height) / 2, inner.top);
+            const bottom = Math.min(box.top + (box.height + height) / 2, inner.bottom);
+            if (right <= left || bottom <= top || left < inner.left - 1 || left > inner.right)
+                continue;
+            // A window over the field covers its caret too.
+            const under = doc.elementFromPoint(Math.min(left + 1, right), (top + bottom) / 2);
+            if (under && under !== field && !field.contains(under))
+                continue;
+            shapes.push({ left, top, width: right - left, height: bottom - top });
+        }
+        // Unchanged marks stay, so the caret keeps blinking through unrelated changes.
+        const key = `${color}|${shapes.map((s) => `${s.left},${s.top},${s.width},${s.height}`).join(";")}`;
+        if (key === painted)
+            return;
+        painted = key;
+        const marks = shapes.map((s) => {
+            const el = doc.createElement("div");
+            el.style.cssText = `all:initial;position:fixed;pointer-events:none;left:${s.left}px;top:${s.top}px;width:${s.width}px;height:${s.height}px`;
+            el.style.background = color;
+            return el;
+        });
+        layer.replaceChildren(...marks);
+        if (from === to && marks[0]) {
+            marks[0].animate([{ opacity: 1 }, { opacity: 1, offset: 0.5 }, { opacity: 0, offset: 0.5 }, { opacity: 0 }], {
+                duration: BLINK_MS,
+                iterations: Infinity,
+            });
+        }
+    };
+    return {
+        schedule() {
+            if (!frame)
+                frame = requestAnimationFrame(paint);
+        },
+        destroy() {
+            cancelAnimationFrame(frame);
+            layer?.remove();
+            layer = null;
+        },
+    };
+}
+export function createBrowser(container, options) {
+    const room = options.room;
+    const seed = cursorSeed(options);
+    const root = document.createElement("div");
+    root.className = "fauna-browser";
+    if (options.url)
+        root.dataset.url = options.url;
+    const frame = document.createElement("div");
+    frame.className = "fauna-browser-frame";
+    root.appendChild(frame);
+    const cursorHost = document.createElement("div");
+    cursorHost.className = "fauna-browser-cursor";
+    cursorHost.style.display = "none";
+    root.appendChild(cursorHost);
+    const ripple = document.createElement("div");
+    ripple.className = "fauna-browser-ripple";
+    ripple.style.display = "none";
+    root.appendChild(ripple);
+    const badge = document.createElement("div");
+    badge.className = "fauna-browser-badge";
+    badge.style.display = "none";
+    root.appendChild(badge);
+    container.appendChild(root);
+    const reactRoot = createRoot(cursorHost);
+    let shape;
+    reactRoot.render(_jsx(Cursor, { seed: seed, label: options.label }));
+    gsap.set(cursorHost, { x: 0, y: 0, scale: 1 });
+    const replayer = new DomReplayer(frame);
+    let toolTl = null;
+    // Only a full document replays in its own frame; a fragment shares this page's document.
+    const caret = caretPainter(() => {
+        const doc = replayer.getDocument();
+        return doc === document ? null : doc;
+    });
+    const resized = new ResizeObserver(() => caret.schedule());
+    resized.observe(frame);
+    function viewport() {
+        return replayer.getViewport() ?? { width: 1280, height: 800 };
+    }
+    function toScreen(x, y) {
+        if (options.pagePixels)
+            return { x, y };
+        const vp = viewport();
+        const w = frame.clientWidth || vp.width;
+        const scale = w / vp.width;
+        return { x: x * scale, y: y * scale };
+    }
+    function applyCursor(pointer) {
+        if (pointer.shape !== shape) {
+            shape = pointer.shape;
+            reactRoot.render(_jsx(Cursor, { seed: seed, label: options.label, shape: shape }));
+        }
+        const { x, y } = toScreen(pointer.x, pointer.y);
+        cursorHost.style.display = pointer.visible === false ? "none" : "";
+        gsap.to(cursorHost, { x, y, duration: 0.12, ease: "power2.out", overwrite: "auto" });
+        options.onCursor?.(pointer);
+    }
+    function applyTool(tool) {
+        toolTl?.kill();
+        toolTl = playBrowserTool({
+            cursor: cursorHost,
+            ripple,
+            badge,
+            tool,
+            toScreen,
+            current: room.cursor,
+        });
+    }
+    async function applyBootstrap(html, vp) {
+        if (!html)
+            return;
+        await replayer.applyHtml(html, vp);
+        applyCursor(room.cursor);
+        options.onFrame?.(replayer.getDocument());
+        caret.schedule();
+    }
+    const boot = room.web.getBootstrap();
+    void applyBootstrap(boot?.html, boot?.viewport);
+    applyCursor(room.cursor);
+    room.watch({
+        onCursor: (_r, pointer) => applyCursor(pointer),
+        onTool: (_r, tool) => applyTool(tool),
+        onClosed: () => { badge.style.display = "none"; },
+        web: {
+            onBootstrap: (_web, meta) => { void applyBootstrap(meta.html, meta.viewport); },
+            onMutation: (_web, mutation) => {
+                replayer.mutate(mutation);
+                caret.schedule();
+            },
+        },
+    });
+    return {
+        toPage(clientX, clientY) {
+            const rect = frame.getBoundingClientRect();
+            const vp = options.pagePixels ? { width: frame.clientWidth, height: frame.clientHeight } : viewport();
+            const scale = (rect.width || vp.width) / vp.width;
+            const x = (clientX - rect.left) / scale;
+            const y = (clientY - rect.top) / scale;
+            return x >= 0 && y >= 0 && x <= vp.width && y <= vp.height ? { x, y } : null;
+        },
+        destroy() {
+            toolTl?.kill();
+            resized.disconnect();
+            caret.destroy();
+            reactRoot.unmount();
+            root.remove();
+        },
+    };
+}

package/dist/src/ui/chat.d.ts

@@ -0,0 +1,183 @@
+import React from "react";
+import { Fauna } from "fauna-api";
+import type { ChatRoom, RoomMessage } from "../parrot/room.js";
+import type { Presence } from "../shared/server.js";
+import { type Part, type Trigger, type Token } from "./tokenized.js";
+import { type ChatFile, type ChatMessageBlock, type ToolSession } from "./chatSequence.js";
+import { type RepositoryHolder } from "./chatPanel.js";
+export { RepositoryControl, askForComputer, pickedRepository, type RepositoryHolder } from "./chatPanel.js";
+export { toPlainText } from "./tokenized.js";
+export type Author = {
+    id: string;
+    profile?: Fauna.Authentification.Profile;
+};
+export type ChatMode = 'assistant' | 'thread';
+export type ChatMessage = {
+    role: 'user' | 'model';
+    text: string;
+    createdAt: Date;
+    parts?: Part[];
+    files?: ChatFile[];
+    toolCalls?: {
+        id?: string;
+        name: string;
+        args: Record<string, unknown>;
+        status?: 'running' | 'success' | 'error';
+        result?: string;
+        progress?: unknown;
+        session?: ToolSession;
+    }[];
+    /** Room hydrate only: TEXT / INVOCATION / FILE in persist order. */
+    sequence?: ChatMessageBlock[];
+    author?: Author;
+    /** LLM id that produced a MODEL turn — drives the left avatar icon. */
+    model?: string;
+};
+export type { ChatMessageBlock };
+export type StreamEvent = {
+    event: 'text';
+    delta: string;
+} | {
+    event: 'tool_call';
+    id: string;
+    name: string;
+    args: Record<string, unknown>;
+    server?: boolean;
+} | {
+    event: 'done';
+    usage?: {
+        promptTokens: number;
+        completionTokens: number;
+    };
+} | {
+    event: 'error';
+    message: string;
+    code?: string;
+};
+export type ToolCallView = {
+    id?: string;
+    name: string;
+    args: Record<string, unknown>;
+    status?: 'running' | 'success' | 'error';
+    result?: string;
+    progress?: unknown;
+    /** The live room the tool opened, for a Watch button. */
+    session?: ToolSession;
+};
+export type RenderToolCall = (call: ToolCallView) => HTMLElement | null;
+export declare function toolChip(call: ToolCallView, icon: string, label: string): HTMLElement;
+export type ChatInstance = {
+    sendMessage: (text: string, files?: {
+        mime: string;
+        name: string;
+        data: Uint8Array;
+    }[]) => void;
+    appendMessage: (role: 'user' | 'model', text: string) => void;
+    removeQueuedMessage: (index: number) => void;
+    getQueue: () => {
+        text: string;
+        files?: {
+            mime: string;
+            name: string;
+        }[];
+    }[];
+    clearMessages: () => void;
+    getHistory: () => ChatMessage[];
+    getModel: () => Fauna.Parrot.Generative.Text;
+    setModel: (model: Fauna.Parrot.Generative.Text) => void;
+    getReasoning: () => string | undefined;
+    setReasoning: (reasoning: string | undefined) => void;
+    setMode: (mode: ChatMode) => void;
+    setModels: (models?: Fauna.Parrot.Generative.Text | Fauna.Parrot.Generative.Text[]) => void;
+    insertToken: (token: Token) => void;
+    getParts: () => Part[];
+    watchInput: (handler: (parts: Part[]) => void) => () => void;
+    clearInput: () => void;
+    focusInput: () => void;
+    getElement: () => HTMLElement;
+    destroy: () => void;
+};
+export type LogInstance = {
+    appendMessage: (role: 'user' | 'model', text: string) => void;
+    streamMessage: (iterable: AsyncIterable<StreamEvent>) => Promise<void>;
+    clearMessages: () => void;
+    getHistory: () => ChatMessage[];
+    getElement: () => HTMLElement;
+    destroy: () => void;
+};
+export type ChatOptions = Partial<{
+    generate: (model: Fauna.Parrot.Generative.Text, history: ChatMessage[], attachments: Fauna.Drive.File[], signal?: AbortSignal, reasoning?: string) => AsyncIterable<StreamEvent>;
+    /** One model locks the picker. A list limits it. Omit for the full catalog. */
+    models: Fauna.Parrot.Generative.Text | Fauna.Parrot.Generative.Text[];
+    /** The model the picker starts on, when `models` allows it. Defaults to Auto. */
+    model: Fauna.Parrot.Generative.Text;
+    /** The reasoning level the picker starts on. */
+    reasoning: string;
+    authorization: Fauna.Authentification.Credentials | Fauna.Authentification.ApiKey;
+    onModelChange: (model: Fauna.Parrot.Generative.Text) => void;
+    onReasoningChange: (reasoning: string | undefined) => void;
+    acceptedTypes: Record<string, string>;
+    placeholder: string;
+    triggers: Trigger[];
+    initialHistory: ChatMessage[];
+    callbacks: Partial<{
+        onMessage: (message: ChatMessage) => void;
+        onStreamComplete: (message: ChatMessage) => void;
+        onError: (error: string) => void;
+        onQueueChange: (length: number) => void;
+    }>;
+    room: {
+        room: ChatRoom;
+        self: Presence;
+        /** Called after the widget renders each room message (any member's send or
+         *  the server's model reply). Lets the hosting app run its own side-effects
+         *  (e.g. auto-name, memory extraction) off the shared transcript. */
+        onRoomMessage?: (message: RoomMessage) => void;
+        /** Fires when the room starts or finishes a model reply. */
+        onThinking?: (thinking: boolean) => void;
+        /** Client tools for this originator (schemas on send + local evaluate). */
+        tools?: Fauna.Parrot.Generative.Tool[] | Fauna.Parrot.Generative.Tool;
+        /** Fires after an older transcript page is prepended into the widget. */
+        onOlderLoaded?: () => void;
+    };
+    /**
+     * Optional custom DOM for a finished tool call (history + live stream).
+     * Return null to keep the default chip. Running calls always use the chip.
+     */
+    renderToolCall?: RenderToolCall;
+    /** `assistant` (default): every human on the right. `thread`: only this seat on the right. */
+    mode?: ChatMode;
+    onTokenClick?: (token: Token) => void;
+    /** Show the side panel: the chat's attachments, and a tab for each file opened, each a live file room. */
+    attachments?: boolean;
+    /**
+     * Show the repository button: attach a new or existing repository, or detach it.
+     * `true` binds it to the chat room's own repository; a holder binds it to someone
+     * else's (an app's), and the computer the model asks for is made there.
+     */
+    repositories?: boolean | RepositoryHolder;
+    /** Who asks for a computer in the popup, like "Parrot wants a computer for this". Defaults to Parrot. */
+    computerAsker?: string;
+    /** Opens a repository in Termite, from the repository chip. Without it the chip has no Open in Termite. */
+    onOpenRepository?: (repository: number) => void;
+    /** The chat's repository changed, from this seat or anyone else's. */
+    onRepositoryChange?: (repository: number | null) => void;
+    /** The app's own buttons at the chat's top right, beside the side panel's, in the same style. */
+    actions?: ChatAction[];
+}>;
+/** A button at the chat's top right: a Material Symbols icon, its label, and what it does. */
+export type ChatAction = {
+    icon: string;
+    label: string;
+    onClick: () => void;
+};
+export declare const Chat: React.ForwardRefExoticComponent<{
+    options?: ChatOptions;
+} & React.RefAttributes<ChatInstance>>;
+export declare function createChat(container: HTMLElement, options?: ChatOptions): ChatInstance;
+export declare function createLog(container: HTMLElement, options?: Partial<{
+    initialHistory: ChatMessage[];
+    callbacks: Partial<{
+        onMessage: (message: ChatMessage) => void;
+    }>;
+}>): LogInstance;