@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/chat/ui/composer/editor.js

@@ -0,0 +1,94 @@
+import { history, historyKeymap, standardKeymap } from '@codemirror/commands';
+import { Language, defineLanguageFacet, indentUnit, syntaxHighlighting, syntaxTree } from '@codemirror/language';
+import { Annotation } from '@codemirror/state';
+import { Decoration, EditorView, ViewPlugin, keymap } from '@codemirror/view';
+import { tagHighlighter, tags } from '@lezer/highlight';
+import { Strikethrough, Table, parser } from '@lezer/markdown';
+/* Marks a transaction that brings the editor in line with a value set from outside, so it is not reported back. */
+export const externalChange = Annotation.define();
+/*
+ * The markdown grammar in a Language of our own. `@codemirror/lang-markdown` builds the same thing
+ * but creates the HTML language and autocomplete at module level, which tree shaking cannot drop.
+ */
+export const markdownLanguage = new Language(defineLanguageFacet(), parser.configure([Strikethrough, Table]), [], 'markdown');
+/* Classes rather than generated styles, so the look lives in `styles.css` on the theme's tokens. */
+const markdownClasses = tagHighlighter([
+    { tag: tags.strong, class: 'cm-md-strong' },
+    { tag: tags.emphasis, class: 'cm-md-emphasis' },
+    { tag: tags.strikethrough, class: 'cm-md-strike' },
+    { tag: tags.heading, class: 'cm-md-heading' },
+    { tag: [tags.link, tags.url], class: 'cm-md-link' },
+    { tag: tags.processingInstruction, class: 'cm-md-mark' }
+]);
+/* The code spans and fenced blocks between `from` and `to`, as far as the parser has got. */
+export const codeRanges = (state, from = 0, to = state.doc.length) => {
+    const found = [];
+    syntaxTree(state).iterate({
+        from,
+        to,
+        enter: (node) => {
+            if (node.name === 'InlineCode' || node.name === 'FencedCode') {
+                found.push({ from: node.from, to: node.to, kind: node.name === 'InlineCode' ? 'inline' : 'fence' });
+                return false;
+            }
+            return undefined;
+        }
+    });
+    return found;
+};
+const inlineCodeMark = Decoration.mark({ class: 'cm-md-code' });
+const fenceLine = (first, last) => Decoration.line({ class: ['cm-md-fence', first ? 'cm-md-fence-start' : '', last ? 'cm-md-fence-end' : ''].join(' ').trim() });
+/*
+ * Code is decorated from the tree rather than highlighted per token: the highlighter styles the
+ * backticks apart from what they wrap, and a block's background belongs to its whole lines.
+ */
+const codeDecorations = (view) => {
+    const { state } = view;
+    const decorations = [];
+    const fenceLines = new Set();
+    for (const visible of view.visibleRanges) {
+        for (const range of codeRanges(state, visible.from, visible.to)) {
+            if (range.kind === 'inline') {
+                decorations.push(inlineCodeMark.range(range.from, range.to));
+                continue;
+            }
+            const first = state.doc.lineAt(range.from).number;
+            const last = state.doc.lineAt(range.to).number;
+            const start = state.doc.lineAt(Math.max(range.from, visible.from)).number;
+            const end = state.doc.lineAt(Math.min(range.to, visible.to)).number;
+            for (let number = start; number <= end; number++) {
+                if (!fenceLines.has(number)) {
+                    fenceLines.add(number);
+                    decorations.push(fenceLine(number === first, number === last).range(state.doc.line(number).from));
+                }
+            }
+        }
+    }
+    return Decoration.set(decorations, true);
+};
+const codeDecorationPlugin = ViewPlugin.fromClass(class {
+    decorations;
+    constructor(view) {
+        this.decorations = codeDecorations(view);
+    }
+    update(update) {
+        if (update.docChanged || update.viewportChanged || syntaxTree(update.startState) !== syntaxTree(update.state)) {
+            this.decorations = codeDecorations(update.view);
+        }
+    }
+}, { decorations: (plugin) => plugin.decorations });
+/*
+ * What every composer editor carries. The standard keymap rather than the default one: the default
+ * adds code editor commands (move a line, indent, select the syntax parent) on keys a prompt box
+ * has no business taking.
+ */
+export const composerEditorExtensions = () => [
+    history(),
+    keymap.of([...standardKeymap, ...historyKeymap]),
+    EditorView.lineWrapping,
+    // What Tab and Shift+Tab in a fence add and take away, so a selection indents in the same steps as a caret.
+    indentUnit.of('    '),
+    markdownLanguage,
+    syntaxHighlighting(markdownClasses),
+    codeDecorationPlugin
+];

package/dist/chat/ui/composer/keys.d.ts

@@ -0,0 +1,30 @@
+import type { Tree } from '@lezer/common';
+export type EnterAction = 'send' | 'newline' | 'continue-list' | 'leave-list';
+export interface EnterKeys {
+    shift: boolean;
+    mod: boolean;
+}
+export interface ListItem {
+    prefix: string;
+    next: string;
+    empty: boolean;
+}
+export interface EnterContext {
+    inOpenFence: boolean;
+    list: ListItem | null;
+    column: number;
+}
+export declare const listItemAt: (line: string) => ListItem | null;
+export declare const enterAction: (keys: EnterKeys, { inOpenFence, list, column }: EnterContext) => EnterAction;
+export declare const inOpenFence: (tree: Tree, pos: number) => boolean;
+export declare const inFenceBody: (tree: Tree, text: string, pos: number) => boolean;
+export declare const tabSpaces: (column: number) => string;
+export declare const inCode: (tree: Tree, text: string, pos: number) => boolean;
+export interface RecallContext {
+    key: string;
+    text: string;
+    from: number;
+    to: number;
+    recalled: boolean;
+}
+export declare const recallDirection: ({ key, text, from, to, recalled }: RecallContext) => -1 | 1 | null;

package/dist/chat/ui/composer/keys.js

@@ -0,0 +1,98 @@
+const LIST_ITEM = /^([ \t]*)(?:([-*+])|(\d{1,9})([.)]))([ \t]+)(\[[ xX]\](?:[ \t]+|$))?/;
+/* The list item a line starts, if it starts one. */
+export const listItemAt = (line) => {
+    const match = LIST_ITEM.exec(line);
+    if (match === null) {
+        return null;
+    }
+    const [prefix, indent, bullet, number, delimiter, space, task] = match;
+    const marker = bullet ?? `${Number(number) + 1}${delimiter}`;
+    return { prefix, next: `${indent}${marker}${space}${task ? '[ ] ' : ''}`, empty: line.slice(prefix.length).trim() === '' };
+};
+/*
+ * Enter sends, except where whoever types is still writing: inside a fence nobody has closed yet
+ * it adds a line, and in a list it starts the next item, or leaves the list from an empty one, so
+ * a second Enter breaks out. Shift adds a plain line and Mod sends from anywhere.
+ */
+export const enterAction = (keys, { inOpenFence, list, column }) => {
+    if (keys.mod) {
+        return 'send';
+    }
+    if (keys.shift || inOpenFence) {
+        return 'newline';
+    }
+    if (list === null) {
+        return 'send';
+    }
+    // A caret in front of the marker moves the item down rather than splitting its marker.
+    if (column < list.prefix.length) {
+        return 'newline';
+    }
+    return list.empty ? 'leave-list' : 'continue-list';
+};
+/* Whether `pos` sits inside a fenced code block that has an opening fence and no closing one yet. */
+export const inOpenFence = (tree, pos) => {
+    for (let node = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
+        if (node.name === 'FencedCode') {
+            return pos > node.from && node.getChildren('CodeMark').length < 2;
+        }
+    }
+    return false;
+};
+/* Whether `pos` sits in the body of a fenced code block, open or closed: below its opening line and before its end. */
+export const inFenceBody = (tree, text, pos) => {
+    for (let node = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
+        if (node.name === 'FencedCode') {
+            const openingEnd = text.indexOf('\n', node.from);
+            return openingEnd !== -1 && pos > openingEnd && (pos < node.to || node.getChildren('CodeMark').length < 2);
+        }
+    }
+    return false;
+};
+/* The spaces Tab inserts at `column`, up to the next stop of four, the way a code editor lines up. */
+export const tabSpaces = (column) => ' '.repeat(4 - (column % 4));
+const INLINE_BLOCK = /^(Paragraph|ATXHeading\d|SetextHeading\d)$/;
+/*
+ * Whether `pos` sits inside code: a fence, open or closed, or a code span. The parser only calls a
+ * span code once it is closed, so a backtick nobody has closed yet earlier in the same paragraph
+ * counts as well: whoever types after it is writing code.
+ */
+export const inCode = (tree, text, pos) => {
+    let blockFrom = null;
+    for (let node = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
+        if (node.name === 'FencedCode') {
+            return pos > node.from && (pos < node.to || node.getChildren('CodeMark').length < 2);
+        }
+        if (node.name === 'InlineCode' && pos > node.from && pos < node.to) {
+            return true;
+        }
+        if (blockFrom === null && INLINE_BLOCK.test(node.name)) {
+            blockFrom = node.from;
+        }
+    }
+    let from = blockFrom ?? text.lastIndexOf('\n', pos - 1) + 1;
+    tree.iterate({
+        from,
+        to: pos,
+        enter: (node) => {
+            if (node.name === 'InlineCode' && node.to <= pos) {
+                from = Math.max(from, node.to);
+            }
+        }
+    });
+    return /(^|[^\\])`/.test(text.slice(from, pos));
+};
+/*
+ * Which way the arrow walks through earlier prompts, or null when the arrow just moves the caret.
+ * Only an empty box or an unedited recall walks, so an arrow in a prompt being written never
+ * throws it away.
+ */
+export const recallDirection = ({ key, text, from, to, recalled }) => {
+    if (key === 'ArrowUp' && (text === '' || (recalled && from === 0))) {
+        return -1;
+    }
+    if (key === 'ArrowDown' && recalled && to === text.length) {
+        return 1;
+    }
+    return null;
+};

package/dist/chat/ui/diff-theme.d.ts

@@ -0,0 +1,2 @@
+import { type ThemesType } from '@pierre/diffs';
+export declare const useDiffTheme: () => ThemesType;

package/dist/chat/ui/diff-theme.js

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { registerCustomTheme } from '@pierre/diffs';
+import { chatHost } from '../../host';
+let registered = false;
+/* The library resolves Shiki's bundled themes by id on its own; the app's own it only knows by registration, done once the host is set. */
+const registerThemes = () => {
+    if (registered) {
+        return;
+    }
+    registered = true;
+    for (const theme of chatHost().code.custom) {
+        registerCustomTheme(theme.name, () => Promise.resolve(theme));
+    }
+};
+/* The code themes a diff is drawn in, the same pair a chat's code blocks use. */
+export const useDiffTheme = () => {
+    registerThemes();
+    const { light, dark } = chatHost().code.useThemes();
+    return useMemo(() => ({ light, dark }), [light, dark]);
+};

package/dist/chat/ui/file-links.d.ts

@@ -0,0 +1,5 @@
+import { type FileRef } from '../../host';
+export declare const FileLinkContext: import("react").Context<string | null>;
+export declare const useFileLinkCwd: () => string | null;
+export declare const useFileLinkTarget: (text: string) => FileRef | null;
+export declare const openFileLink: (cwd: string | null, ref: FileRef) => void;

package/dist/chat/ui/file-links.js

@@ -0,0 +1,18 @@
+import { createContext, useContext, useMemo } from 'react';
+import { chatHost } from '../../host';
+/*
+ * The folder a relative reference in rendered text counts from: a chat's own cwd, which is a
+ * worktree as often as it is the project, or the folder of the file an app is drawing. Null where
+ * nobody said, and there only an absolute path is a link.
+ */
+export const FileLinkContext = createContext(null);
+export const useFileLinkCwd = () => useContext(FileLinkContext);
+/* The reference a piece of text names, only where this spot on screen could open it. */
+export const useFileLinkTarget = (text) => {
+    const cwd = useFileLinkCwd();
+    return useMemo(() => chatHost().fileLinks?.target(text, cwd) ?? null, [text, cwd]);
+};
+/* A reference followed, the way the app opens a file or a folder. */
+export const openFileLink = (cwd, ref) => {
+    chatHost().fileLinks?.open(cwd, ref);
+};

package/dist/chat/ui/find-reveal.d.ts

@@ -0,0 +1,7 @@
+export type ChatFindField = 'summary' | 'text' | 'output';
+export interface FindReveal {
+    itemId: string;
+    field: ChatFindField;
+}
+export declare const FindRevealContext: import("react").Context<FindReveal | null>;
+export declare const useOpenForFind: (itemId: string, field: ChatFindField, setOpen: (open: boolean) => void) => void;

package/dist/chat/ui/find-reveal.js

@@ -0,0 +1,13 @@
+import { createContext, useContext, useEffect } from 'react';
+/* The hit the find bar is on, so the row that folds it away can open. */
+export const FindRevealContext = createContext(null);
+/* Opens a fold of this item while the find bar is on a hit inside it; it stays open once the bar moves on, as if a person opened it. */
+export const useOpenForFind = (itemId, field, setOpen) => {
+    const reveal = useContext(FindRevealContext);
+    const wanted = reveal !== null && reveal.itemId === itemId && reveal.field === field;
+    useEffect(() => {
+        if (wanted) {
+            setOpen(true);
+        }
+    }, [wanted, reveal, setOpen]);
+};

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

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare const DOCK_ICON_SIZE = 14;
+export declare const ROW_GUTTER = "grid h-5 w-4 shrink-0 place-items-center";
+export declare const toolIcon: (name: string, size?: number) => ReactNode;

package/dist/chat/ui/icons.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Hammer, Wrench } from 'lucide-react';
+import { toolEntry } from '../logic/tool-catalog';
+import { Icon } from '@ruimte/ui/Icon';
+const SIZE = 12;
+/* A pending dock draws its mark a step up from the lines of a transcript, at the size a sidebar
+   row uses, because it is a thing to answer rather than a thing to read past. */
+export const DOCK_ICON_SIZE = 14;
+/* The gutter every row in the thread opens with: 16 wide, on the line box of its first row of text,
+   so the mark of a tool call, a note and a fold all sit in one column and their labels start at the
+   same x. The same box the menu rows and the toasts use. */
+export const ROW_GUTTER = 'grid h-5 w-4 shrink-0 place-items-center';
+/* The icon that says what a tool call is about; unknown tools get the wrench. */
+export const toolIcon = (name, size = SIZE) => {
+    const known = toolEntry(name);
+    if (known !== undefined) {
+        return _jsx(Icon, { icon: known.icon, size: size });
+    }
+    return name.startsWith('mcp__') ? _jsx(Icon, { icon: Hammer, size: size }) : _jsx(Icon, { icon: Wrench, size: size });
+};

package/dist/chat/ui/markdown-blocks.d.ts

@@ -0,0 +1,6 @@
+export interface MarkdownBlock {
+    text: string;
+    openFence: boolean;
+}
+export declare const splitMarkdownBlocks: (text: string) => MarkdownBlock[];
+export declare const settledBlocksText: (text: string) => string;

package/dist/chat/ui/markdown-blocks.js

@@ -0,0 +1,101 @@
+const FENCE = /^([ \t]*)(`{3,}|~{3,})(.*)$/;
+// Spaces and tabs only: a line that holds a no-break space is text to markdown, not a blank line.
+const BLANK = /^[ \t]*$/;
+// A line that continues what stood before the blank line: an indented paragraph of a list item, or
+// the next item of a loose list. Splitting there would change what the markdown means.
+const CONTINUES = /^([ \t]|[-*+][ \t]|\d+[.)][ \t])/;
+// A reference or footnote definition may be used anywhere in the text, so a block cannot stand alone.
+const DEFINITION = /^ {0,3}\[[^\]]+\]:/m;
+// How much deeper than its opening a closing fence may sit; deeper than that it is a line of code.
+const CLOSING_INDENT = 3;
+// A section title: an ATX heading, or a line of only bold text, which models write as a heading too.
+const HEADING = /^ {0,3}#{1,6}(?:[ \t]|$)/;
+const BOLD_LINE = /^ {0,3}\*\*(?:[^*]|\*(?!\*))+\*\*:?[ \t]*$/;
+/*
+ * A reply cut into blocks at blank lines outside a code fence, so each block parses on its own and
+ * only the one still growing is parsed again. Joined back together the blocks are the text.
+ */
+export const splitMarkdownBlocks = (text) => {
+    if (DEFINITION.test(text)) {
+        return [{ text, openFence: isFenceOpenAtEnd(text) }];
+    }
+    const lines = text.split('\n');
+    const blocks = [];
+    let start = 0;
+    let offset = 0;
+    let fence = null;
+    let afterBlank = false;
+    lines.forEach((line, index) => {
+        if (fence === null && afterBlank && !BLANK.test(line) && !CONTINUES.test(line)) {
+            blocks.push({ text: text.slice(start, offset), openFence: false });
+            start = offset;
+        }
+        fence = nextFence(fence, line);
+        afterBlank = fence === null && BLANK.test(line) && index > 0;
+        offset += line.length + 1;
+    });
+    blocks.push({ text: text.slice(start), openFence: fence !== null });
+    return blocks;
+};
+/*
+ * The blocks of a reply still being written that will not change any more: every block but the last.
+ * A block is only known to be closed once the line after its blank line starts, since that line may
+ * still turn out to continue it (a list item, an indented paragraph). A section title waits for the
+ * block under it, so it never sits alone above a block that is still streaming.
+ */
+export const settledBlocksText = (text) => withoutTrailingTitles(splitMarkdownBlocks(text)
+    .slice(0, -1)
+    .map((block) => block.text)
+    .join(''));
+const withoutTrailingTitles = (text) => {
+    const lines = text.split('\n');
+    let end = lines.length;
+    for (let index = lines.length - 1; index >= 0; index--) {
+        const line = lines[index];
+        if (BLANK.test(line)) {
+            continue;
+        }
+        // A bold line right under a line of text continues that paragraph.
+        const title = HEADING.test(line) || (BOLD_LINE.test(line) && (index === 0 || BLANK.test(lines[index - 1])));
+        if (!title) {
+            break;
+        }
+        end = index;
+    }
+    if (end === lines.length) {
+        return text;
+    }
+    return lines
+        .slice(0, end)
+        .map((line) => `${line}\n`)
+        .join('');
+};
+/* The fence a line leaves open: it opens one, closes the one that is open, or changes nothing. */
+const nextFence = (fence, line) => {
+    const match = FENCE.exec(line);
+    if (!match) {
+        return fence;
+    }
+    const indent = match[1].length;
+    const run = match[2];
+    const rest = match[3];
+    if (fence === null) {
+        // A backtick fence's info string may not hold a backtick, or the line is inline code.
+        if (run[0] === '`' && rest.includes('`')) {
+            return null;
+        }
+        return { marker: run[0], length: run.length, indent };
+    }
+    // A closing fence carries no info string, and a line far deeper than the opening is code.
+    if (run[0] === fence.marker && run.length >= fence.length && BLANK.test(rest) && indent <= fence.indent + CLOSING_INDENT) {
+        return null;
+    }
+    return fence;
+};
+const isFenceOpenAtEnd = (text) => {
+    let fence = null;
+    for (const line of text.split('\n')) {
+        fence = nextFence(fence, line);
+    }
+    return fence !== null;
+};

package/dist/chat/ui/quote-selection.d.ts

@@ -0,0 +1,3 @@
+export type QuoteTaker = (quote: string) => void;
+export declare const QuoteTakerContext: import("react").Context<((take: QuoteTaker) => () => void) | null>;
+export declare const selectedAnswerQuote: (selection: Selection | null, thread: HTMLElement | null) => string | null;

package/dist/chat/ui/quote-selection.js

@@ -0,0 +1,44 @@
+import { createContext } from 'react';
+import { quoteOf } from '../quote';
+/* The text of an answer (`rows/MessageRows.tsx`), the only part of a thread a selection quotes from. */
+const ANSWER = '[data-quote-answer]';
+/* Registers the composer below a thread as the one its quote button hands a quote to, until the returned call. */
+export const QuoteTakerContext = createContext(null);
+const answerAt = (node) => (node instanceof Element ? node : node.parentElement)?.closest(ANSWER) ?? null;
+/*
+ * Whether the range selects text a person can see outside the answer. A triple-click on a paragraph
+ * ends at the start of the next row, past a heading only a screen reader reads, and still means the
+ * paragraph alone.
+ */
+const selectsOutside = (range, answer) => {
+    const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+        if (!range.intersectsNode(node) || answer.contains(node)) {
+            continue;
+        }
+        const text = node.textContent ?? '';
+        const start = node === range.startContainer ? range.startOffset : 0;
+        const end = node === range.endContainer ? range.endOffset : text.length;
+        const parent = node.parentElement;
+        if (text.slice(start, end).trim() !== '' && parent !== null && getComputedStyle(parent).userSelect !== 'none') {
+            return true;
+        }
+    }
+    return false;
+};
+/* The quote the selection makes, when it lies in one answer of this thread. */
+export const selectedAnswerQuote = (selection, thread) => {
+    if (thread === null || selection === null || selection.isCollapsed || selection.rangeCount === 0) {
+        return null;
+    }
+    const range = selection.getRangeAt(0);
+    const answer = answerAt(range.startContainer) ?? answerAt(range.endContainer);
+    if (answer === null || !thread.contains(answer)) {
+        return null;
+    }
+    const inside = answer.contains(range.startContainer) && answer.contains(range.endContainer);
+    if (!inside && selectsOutside(range, answer)) {
+        return null;
+    }
+    return quoteOf(selection.toString());
+};

package/dist/chat/ui/rehype-chips.d.ts

@@ -0,0 +1,23 @@
+interface HastText {
+    type: 'text';
+    value: string;
+}
+interface HastElement {
+    type: 'element';
+    tagName: string;
+    properties: Record<string, unknown>;
+    children: HastNode[];
+}
+type HastNode = HastText | HastElement | {
+    type: 'comment' | 'doctype' | 'raw';
+    value?: string;
+};
+interface HastParent {
+    children: HastNode[];
+}
+export interface ChipOptions {
+    mentions?: string[];
+    skills?: string[];
+}
+export declare const rehypeChips: ({ mentions, skills }?: ChipOptions) => (tree: HastParent) => void;
+export {};

package/dist/chat/ui/rehype-chips.js

@@ -0,0 +1,28 @@
+import { chipText, tokenizeChips } from '../mentions';
+// Inline code overrules a chip: `@a.ts` between backticks is code, not a mention.
+const SKIPPED = new Set(['code', 'pre']);
+/* A chip as an element: the renderer reads `data-chip` and `data-value`, the text keeps the sigil. */
+const chipElement = (segment) => ({
+    type: 'element',
+    tagName: 'span',
+    properties: { dataChip: segment.kind, dataValue: segment.kind === 'mention' ? segment.path : segment.name },
+    children: [{ type: 'text', value: chipText(segment) }]
+});
+const split = (parent, mentions, skills) => {
+    parent.children = parent.children.flatMap((child) => {
+        if (child.type === 'text') {
+            return tokenizeChips(child.value, mentions, skills).map((segment) => segment.kind === 'text' ? { type: 'text', value: segment.text } : chipElement(segment));
+        }
+        if (child.type === 'element' && !SKIPPED.has(child.tagName)) {
+            split(child, mentions, skills);
+        }
+        return [child];
+    });
+};
+/* The `@path` and `$name` tokens a person picked in the composer, cut out of the text as chips. */
+export const rehypeChips = ({ mentions = [], skills = [] } = {}) => (tree) => {
+    if (mentions.length === 0 && skills.length === 0) {
+        return;
+    }
+    split(tree, mentions, skills);
+};

package/dist/chat/ui/rehype-fade.d.ts

@@ -0,0 +1,23 @@
+interface HastText {
+    type: 'text';
+    value: string;
+}
+interface HastElement {
+    type: 'element';
+    tagName: string;
+    properties: Record<string, unknown>;
+    children: HastNode[];
+}
+type HastNode = HastText | HastElement | {
+    type: 'comment' | 'doctype' | 'raw';
+    value?: string;
+};
+interface HastParent {
+    children: HastNode[];
+}
+export declare const FADE_CLASS = "chat-fade";
+export declare const WHOLE_FADE_CLASS = "chat-fade-whole";
+export declare const wordSegments: (text: string) => string[];
+export declare const isWhitespace: (segment: string) => boolean;
+export declare const rehypeFadeWords: () => (tree: HastParent) => void;
+export {};

package/dist/chat/ui/rehype-fade.js

@@ -0,0 +1,30 @@
+export const FADE_CLASS = 'chat-fade';
+// A reply written out of sight, which appears in one piece rather than a word at a time.
+export const WHOLE_FADE_CLASS = 'chat-fade-whole';
+// Code is read as one string by the renderer, so a span inside it would come out as "[object Object]".
+const SKIPPED = new Set(['code', 'pre']);
+const WHITESPACE = /^\s+$/;
+/* A text cut into its words and the whitespace between them, in order. */
+export const wordSegments = (text) => text.split(/(\s+)/).filter((segment) => segment !== '');
+export const isWhitespace = (segment) => WHITESPACE.test(segment);
+const wrap = (parent) => {
+    parent.children = parent.children.flatMap((child) => {
+        if (child.type === 'text') {
+            return wordSegments(child.value).map((segment) => isWhitespace(segment)
+                ? { type: 'text', value: segment }
+                : { type: 'element', tagName: 'span', properties: { className: [FADE_CLASS] }, children: [{ type: 'text', value: segment }] });
+        }
+        if (child.type === 'element' && !SKIPPED.has(child.tagName)) {
+            wrap(child);
+        }
+        return [child];
+    });
+};
+/*
+ * Every word of a reply that is still streaming in a span that fades in. Words only ever arrive at
+ * the end, and the renderer keys a span by its place among the spans beside it, so the spans already
+ * on screen keep their element and their fade does not start again.
+ */
+export const rehypeFadeWords = () => (tree) => {
+    wrap(tree);
+};

package/dist/chat/ui/remark-html-as-text.d.ts

@@ -0,0 +1,8 @@
+interface MdastNode {
+    type: string;
+    value?: string;
+    children?: MdastNode[];
+    position?: unknown;
+}
+export declare const remarkHtmlAsText: () => (tree: MdastNode) => void;
+export {};

package/dist/chat/ui/remark-html-as-text.js

@@ -0,0 +1,24 @@
+// Parents whose children are blocks, where a bare text node would stand outside any paragraph.
+const FLOW_PARENTS = new Set(['root', 'blockquote', 'listItem', 'footnoteDefinition']);
+const literal = (parent) => {
+    if (parent.children === undefined) {
+        return;
+    }
+    const flow = FLOW_PARENTS.has(parent.type);
+    parent.children = parent.children.map((child) => {
+        if (child.type !== 'html') {
+            literal(child);
+            return child;
+        }
+        const text = { ...child, type: 'text' };
+        return flow ? { type: 'paragraph', position: child.position, children: [text] } : text;
+    });
+};
+/*
+ * Raw HTML in a message as the characters a person typed. react-markdown drops an `html` node, so
+ * "the <span> element" without backticks would lose the tag. Runs before `remark-breaks`, so the
+ * newlines of an HTML block still become line breaks.
+ */
+export const remarkHtmlAsText = () => (tree) => {
+    literal(tree);
+};

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

@@ -0,0 +1,13 @@
+export declare const REVEAL_FADE_MS = 300;
+export declare const REVEAL_TAU_MS = 250;
+export declare const REVEAL_MIN_CPS = 40;
+export declare const REVEAL_FINISH_MIN_CPS = 120;
+export declare const REVEAL_MAX_FRAME_MS = 100;
+export declare const REVEAL_MAX_HELD_WORD = 32;
+export declare const advanceReveal: (position: number, target: number, elapsedMs: number, finished: boolean) => number;
+export declare const revealBoundary: (text: string, position: number, complete: boolean) => number;
+export interface RevealedText {
+    text: string;
+    active: boolean;
+}
+export declare const useRevealedText: (text: string, streaming: boolean) => RevealedText;