@adecore/agents-react 0.0.1 → 0.17.0-beta.1

package/src/chat/ui/composer/keys.ts

@@ -0,0 +1,144 @@
+import type { SyntaxNode, Tree } from '@lezer/common';
+
+export type EnterAction = 'send' | 'newline' | 'continue-list' | 'leave-list';
+
+export interface EnterKeys {
+    shift: boolean;
+    /* Cmd on macOS, Ctrl elsewhere. */
+    mod: boolean;
+}
+
+export interface ListItem {
+    /* The indentation, the marker and the space after it, a task's box included. */
+    prefix: string;
+    /* The prefix the next item starts with: the next number, and an unchecked box for a task. */
+    next: string;
+    /* Nothing but the prefix on the line. */
+    empty: boolean;
+}
+
+export interface EnterContext {
+    inOpenFence: boolean;
+    /* The list item on the caret's line, or null outside a list and in code. */
+    list: ListItem | null;
+    /* The caret's offset in its line. */
+    column: number;
+}
+
+const LIST_ITEM = /^([ \t]*)(?:([-*+])|(\d{1,9})([.)]))([ \t]+)(\[[ xX]\](?:[ \t]+|$))?/;
+
+/* The list item a line starts, if it starts one. */
+export function listItemAt(line: string): ListItem | null {
+    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 function enterAction(keys: EnterKeys, { inOpenFence, list, column }: EnterContext): EnterAction {
+    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 function inOpenFence(tree: Tree, pos: number): boolean {
+    for (let node: SyntaxNode | null = 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 function inFenceBody(tree: Tree, text: string, pos: number): boolean {
+    for (let node: SyntaxNode | null = 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 function tabSpaces(column: number): string {
+    return ' '.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 function inCode(tree: Tree, text: string, pos: number): boolean {
+    let blockFrom: number | null = null;
+    for (let node: SyntaxNode | null = 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));
+}
+
+export interface RecallContext {
+    key: string;
+    text: string;
+    from: number;
+    to: number;
+    /* A prompt taken back from the thread sits in the box and nobody has edited it. */
+    recalled: boolean;
+}
+
+/*
+ * 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 function recallDirection({ key, text, from, to, recalled }: RecallContext): -1 | 1 | null {
+    if (key === 'ArrowUp' && (text === '' || (recalled && from === 0))) {
+        return -1;
+    }
+    if (key === 'ArrowDown' && recalled && to === text.length) {
+        return 1;
+    }
+    return null;
+}

package/src/chat/ui/diff-theme.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { registerCustomTheme, type ThemesType } 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. */
+function registerThemes(): void {
+    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 function useDiffTheme(): ThemesType {
+    registerThemes();
+    const { light, dark } = chatHost().code.useThemes();
+    return useMemo(() => ({ light, dark }), [light, dark]);
+}

package/src/chat/ui/file-links.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext, useMemo } from 'react';
+import { chatHost, type FileRef } 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<string | null>(null);
+
+export function useFileLinkCwd(): string | null {
+    return useContext(FileLinkContext);
+}
+
+/* The reference a piece of text names, only where this spot on screen could open it. */
+export function useFileLinkTarget(text: string): FileRef | null {
+    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 function openFileLink(cwd: string | null, ref: FileRef): void {
+    chatHost().fileLinks?.open(cwd, ref);
+}

package/src/chat/ui/find-reveal.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext, useEffect } from 'react';
+
+/* The line that always shows, the text of a message, or what shows only once a row is opened. */
+export type ChatFindField = 'summary' | 'text' | 'output';
+
+export interface FindReveal {
+    itemId: string;
+    field: ChatFindField;
+}
+
+/* The hit the find bar is on, so the row that folds it away can open. */
+export const FindRevealContext = createContext<FindReveal | null>(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 function useOpenForFind(itemId: string, field: ChatFindField, setOpen: (open: boolean) => void): void {
+    const reveal = useContext(FindRevealContext);
+    const wanted = reveal !== null && reveal.itemId === itemId && reveal.field === field;
+    useEffect(() => {
+        if (wanted) {
+            setOpen(true);
+        }
+    }, [wanted, reveal, setOpen]);
+}

package/src/chat/ui/full-diff.ts

@@ -0,0 +1,25 @@
+import { processFile, type FileDiffMetadata } from '@pierre/diffs';
+
+/* The two whole texts a patch was made between. */
+export interface DiffContents {
+    readonly old: string;
+    readonly new: string;
+}
+
+/*
+ * A patch laid over the two whole texts it was made between, which is what lets a reader unfold
+ * the lines between its hunks. The hunks stay the patch's own, so a patch made without whitespace
+ * keeps its counts. Null when there is no hunk to lay over them, and the patch alone is drawn.
+ */
+export function fullFileDiff(patch: string, name: string, contents: DiffContents): FileDiffMetadata | null {
+    try {
+        const parsed = processFile(patch, {
+            oldFile: { name, contents: contents.old },
+            newFile: { name, contents: contents.new },
+            throwOnError: true
+        });
+        return parsed === undefined || parsed.isPartial || parsed.hunks.length === 0 ? null : parsed;
+    } catch {
+        return null;
+    }
+}

package/src/chat/ui/icons.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { Hammer, Wrench } from 'lucide-react';
+import { toolEntry } from '../logic/tool-catalog';
+import { Icon } from '@adecore/ui';
+
+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 function toolIcon(name: string, size: number = SIZE): ReactNode {
+    const known = toolEntry(name);
+    if (known !== undefined) {
+        return <Icon icon={known.icon} size={size} />;
+    }
+    return name.startsWith('mcp__') ? <Icon icon={Hammer} size={size} /> : <Icon icon={Wrench} size={size} />;
+}

package/src/chat/ui/markdown-blocks.ts

@@ -0,0 +1,123 @@
+export interface MarkdownBlock {
+    text: string;
+    /* The block ends inside a code fence that has not closed yet. */
+    openFence: boolean;
+}
+
+interface OpenFence {
+    marker: string;
+    length: number;
+    indent: number;
+}
+
+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 function splitMarkdownBlocks(text: string): MarkdownBlock[] {
+    if (DEFINITION.test(text)) {
+        return [{ text, openFence: isFenceOpenAtEnd(text) }];
+    }
+    const lines = text.split('\n');
+    const blocks: MarkdownBlock[] = [];
+    let start = 0;
+    let offset = 0;
+    let fence: OpenFence | null = 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 function settledBlocksText(text: string): string {
+    return withoutTrailingTitles(
+        splitMarkdownBlocks(text)
+            .slice(0, -1)
+            .map((block) => block.text)
+            .join('')
+    );
+}
+
+function withoutTrailingTitles(text: string): string {
+    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. */
+function nextFence(fence: OpenFence | null, line: string): OpenFence | null {
+    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;
+}
+
+function isFenceOpenAtEnd(text: string): boolean {
+    let fence: OpenFence | null = null;
+    for (const line of text.split('\n')) {
+        fence = nextFence(fence, line);
+    }
+    return fence !== null;
+}

package/src/chat/ui/quote-selection.ts

@@ -0,0 +1,53 @@
+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]';
+
+export type QuoteTaker = (quote: string) => void;
+
+/* Registers the composer below a thread as the one its quote button hands a quote to, until the returned call. */
+export const QuoteTakerContext = createContext<((take: QuoteTaker) => () => void) | null>(null);
+
+function answerAt(node: Node): Element | null {
+    return (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.
+ */
+function selectsOutside(range: Range, answer: Element): boolean {
+    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 function selectedAnswerQuote(selection: Selection | null, thread: HTMLElement | null): string | null {
+    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/src/chat/ui/rehype-chips.ts

@@ -0,0 +1,62 @@
+import { chipText, tokenizeChips, type ChipSegment } from '../mentions';
+
+/* Just the part of hast this plugin touches; the package's own types are not a dependency of the client. */
+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[];
+}
+
+// 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. */
+function chipElement(segment: Exclude<ChipSegment, { kind: 'text' }>): HastElement {
+    return {
+        type: 'element',
+        tagName: 'span',
+        properties: { dataChip: segment.kind, dataValue: segment.kind === 'mention' ? segment.path : segment.name },
+        children: [{ type: 'text', value: chipText(segment) }]
+    };
+}
+
+function split(parent: HastParent, mentions: string[], skills: string[]): void {
+    parent.children = parent.children.flatMap((child): HastNode[] => {
+        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 function rehypeChips({ mentions = [], skills = [] }: ChipOptions = {}) {
+    return (tree: HastParent) => {
+        if (mentions.length === 0 && skills.length === 0) {
+            return;
+        }
+        split(tree, mentions, skills);
+    };
+}

package/src/chat/ui/rehype-fade.ts

@@ -0,0 +1,64 @@
+/* Just the part of hast this plugin touches; the package's own types are not a dependency of the client. */
+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 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 function wordSegments(text: string): string[] {
+    return text.split(/(\s+)/).filter((segment) => segment !== '');
+}
+
+export function isWhitespace(segment: string): boolean {
+    return WHITESPACE.test(segment);
+}
+
+function wrap(parent: HastParent): void {
+    parent.children = parent.children.flatMap((child): HastNode[] => {
+        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 function rehypeFadeWords() {
+    return (tree: HastParent) => {
+        wrap(tree);
+    };
+}

package/src/chat/ui/remark-html-as-text.ts

@@ -0,0 +1,36 @@
+/* Just the part of mdast this plugin touches; the package's own types are not a dependency of the client. */
+interface MdastNode {
+    type: string;
+    value?: string;
+    children?: MdastNode[];
+    position?: unknown;
+}
+
+// Parents whose children are blocks, where a bare text node would stand outside any paragraph.
+const FLOW_PARENTS = new Set(['root', 'blockquote', 'listItem', 'footnoteDefinition']);
+
+function literal(parent: MdastNode): void {
+    if (parent.children === undefined) {
+        return;
+    }
+    const flow = FLOW_PARENTS.has(parent.type);
+    parent.children = parent.children.map((child): MdastNode => {
+        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 function remarkHtmlAsText() {
+    return (tree: MdastNode) => {
+        literal(tree);
+    };
+}

package/src/chat/ui/reply-context.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import type { ChatInfo } from '@adecore/agent-contracts';
+
+export const ReplyContext = createContext<{ provider: ChatInfo['provider']; chatId?: string } | null>(null);