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

package/src/chat/attachments.ts

@@ -0,0 +1,118 @@
+import i18next from 'i18next';
+import {
+    attachmentBytes,
+    attachmentImageMime,
+    CHAT_ATTACHMENTS_MAX_BYTES,
+    CHAT_ATTACHMENTS_MAX_COUNT,
+    CHAT_ATTACHMENT_MAX_BYTES,
+    type ChatAttachment,
+    type ChatAttachmentUpload
+} from '@adecore/agent-contracts';
+import { formatBytes as bytesOf } from '@adecore/ui/format';
+
+interface IncomingFile {
+    name: string;
+    mime: string;
+    // Decoded size; the base64 the wire carries is a third larger.
+    bytes: number;
+}
+
+interface AttachmentCheck<T extends IncomingFile> {
+    accepted: T[];
+    rejected: Array<{ name: string; reason: string }>;
+}
+
+export function isImageAttachment(mime: string): boolean {
+    return mime.startsWith('image/');
+}
+
+/* The type on a file card: the extension, as long as it is short enough to read as one. */
+export function fileBadge(name: string): string | null {
+    const dot = name.lastIndexOf('.');
+    if (dot <= 0 || dot === name.length - 1) {
+        return null;
+    }
+    const extension = name.slice(dot + 1);
+    return extension.length <= 5 ? extension.toUpperCase() : null;
+}
+
+/* Whole kilobytes, which is all a row under a file name has room for, and a decimal once it runs into megabytes. */
+export function formatBytes(bytes: number): string {
+    return bytesOf(bytes, bytes < 1024 * 1024);
+}
+
+/* Which of the incoming files fit next to what the composer already holds, and why the rest do not. */
+export function checkAttachmentLimits<T extends IncomingFile>(current: number, incoming: T[], currentBytes = 0): AttachmentCheck<T> {
+    const accepted: T[] = [];
+    const rejected: Array<{ name: string; reason: string }> = [];
+    let bytes = currentBytes;
+    for (const file of incoming) {
+        if (file.bytes === 0) {
+            rejected.push({ name: file.name, reason: i18next.t('agent-chat:attachments.rejected.empty') });
+        } else if (file.bytes > CHAT_ATTACHMENT_MAX_BYTES) {
+            rejected.push({ name: file.name, reason: i18next.t('agent-chat:attachments.rejected.tooLarge', { size: formatBytes(CHAT_ATTACHMENT_MAX_BYTES) }) });
+        } else if (current + accepted.length >= CHAT_ATTACHMENTS_MAX_COUNT) {
+            rejected.push({ name: file.name, reason: i18next.t('agent-chat:attachments.rejected.tooMany', { count: CHAT_ATTACHMENTS_MAX_COUNT }) });
+        } else if (bytes + file.bytes > CHAT_ATTACHMENTS_MAX_BYTES) {
+            rejected.push({
+                name: file.name,
+                reason: i18next.t('agent-chat:attachments.rejected.tooHeavy', { size: formatBytes(CHAT_ATTACHMENTS_MAX_BYTES) })
+            });
+        } else {
+            accepted.push(file);
+            bytes += file.bytes;
+        }
+    }
+    return { accepted, rejected };
+}
+
+/* The files in a paste or a drop; a paste of plain text gives none. */
+export function filesOf(transfer: DataTransfer | null): File[] {
+    return transfer ? [...transfer.files] : [];
+}
+
+function readAsBase64(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onerror = () => reject(reader.error ?? new Error(i18next.t('agent-chat:attachments.unreadable', { name: file.name })));
+        reader.onload = () => {
+            const url = String(reader.result);
+            resolve(url.slice(url.indexOf(',') + 1));
+        };
+        reader.readAsDataURL(file);
+    });
+}
+
+// A pasted screenshot has no name; the clock gives it one so the row and the agent can tell them apart.
+function nameFor(file: File, index: number): string {
+    return file.name || `pasted-${Date.now()}-${index + 1}.${file.type.split('/')[1] ?? 'bin'}`;
+}
+
+export async function readAttachments(files: File[]): Promise<ChatAttachmentUpload[]> {
+    return Promise.all(
+        files.map(async (file, index) => ({
+            name: nameFor(file, index),
+            mime: attachmentImageMime({ name: file.name, mime: file.type }) ?? (file.type || 'application/octet-stream'),
+            data: await readAsBase64(file)
+        }))
+    );
+}
+
+/* Files the host already stored for a chat, back as uploads the composer can hold again. */
+export async function readStoredAttachments(
+    read: (attachment: ChatAttachment) => Promise<Blob>,
+    stored: readonly ChatAttachment[]
+): Promise<ChatAttachmentUpload[]> {
+    const files = await Promise.all(stored.map(async (attachment) => new File([await read(attachment)], attachment.name, { type: attachment.mime })));
+    return readAttachments(files);
+}
+
+/* A preview of a file the composer still holds; the bytes have not reached the host yet. */
+export function uploadPreviewUrl(upload: ChatAttachmentUpload): string {
+    return `data:${upload.mime};base64,${upload.data}`;
+}
+
+/* What the file weighs, from the base64 the composer is holding: three bytes per four characters. */
+export function uploadBytes(upload: ChatAttachmentUpload): number {
+    return attachmentBytes(upload.data);
+}

package/src/chat/bookmarks.ts

@@ -0,0 +1,87 @@
+import i18next from 'i18next';
+import { create } from 'zustand';
+import type { ChatBookmark } from '@adecore/agent-contracts';
+import { chatHost } from '../host';
+import type { ChatScope } from '../scope';
+import { jumpToTimelineItem } from './timeline-scroll';
+
+/* The one message in the window whose bookmark has its name field open, by the scope's key of its chat. */
+interface BookmarkNaming {
+    chatKey: string | null;
+    itemId: string | null;
+    open(chatKey: string, itemId: string): void;
+    close(): void;
+}
+
+export const useBookmarkNaming = create<BookmarkNaming>((set) => ({
+    chatKey: null,
+    itemId: null,
+    open: (chatKey, itemId) => set({ chatKey, itemId }),
+    close: () => set({ chatKey: null, itemId: null })
+}));
+
+function failed(title: string, e: unknown): void {
+    chatHost().notify({ title, description: e instanceof Error ? e.message : String(e), kind: 'error' });
+}
+
+async function add(scope: ChatScope, chatId: string, itemId: string, name?: string): Promise<boolean> {
+    try {
+        await scope.chats.addBookmark(chatId, itemId, name);
+        return true;
+    } catch (e) {
+        failed(i18next.t('agent-chat:bookmarks.addFailed'), e);
+        return false;
+    }
+}
+
+/* Marks a message and opens the field for its name at once, before the host answered. */
+export async function placeBookmark(scope: ChatScope, chatId: string, itemId: string): Promise<void> {
+    useBookmarkNaming.getState().open(scope.keyOf(chatId), itemId);
+    if (!(await add(scope, chatId, itemId))) {
+        useBookmarkNaming.getState().close();
+    }
+}
+
+/*
+ * The name a field settles on. A name goes through `addBookmark`, which also names a bookmark that
+ * already stands, so a name typed before the mark itself landed is not refused.
+ */
+export async function nameBookmark(scope: ChatScope, chatId: string, itemId: string, name: string, previous: string | undefined): Promise<void> {
+    const next = name.trim();
+    if (next === (previous ?? '')) {
+        return;
+    }
+    if (next !== '') {
+        await add(scope, chatId, itemId, next);
+        return;
+    }
+    try {
+        await scope.chats.renameBookmark(chatId, itemId, '');
+    } catch (e) {
+        failed(i18next.t('agent-chat:bookmarks.renameFailed'), e);
+    }
+}
+
+/* Takes a bookmark away at once; the toast puts it back, name and all. */
+export async function removeBookmark(scope: ChatScope, chatId: string, bookmark: ChatBookmark): Promise<void> {
+    try {
+        await scope.chats.removeBookmark(chatId, bookmark.itemId);
+    } catch (e) {
+        failed(i18next.t('agent-chat:bookmarks.removeFailed'), e);
+        return;
+    }
+    chatHost().notify({
+        title: i18next.t('agent-chat:bookmarks.removed'),
+        kind: 'deleted',
+        action: { label: i18next.t('agent-chat:common.action.undo'), run: () => void add(scope, chatId, bookmark.itemId, bookmark.name) }
+    });
+}
+
+/* Scrolls the chat's thread to the message, and opens its name field for a rename. False when no thread of it is on screen yet. */
+export function goToBookmark(scope: ChatScope, chatId: string, itemId: string, rename = false): boolean {
+    const key = scope.keyOf(chatId);
+    if (rename) {
+        useBookmarkNaming.getState().open(key, itemId);
+    }
+    return jumpToTimelineItem(key, itemId);
+}

package/src/chat/chat-client.ts

@@ -0,0 +1,345 @@
+import type {
+    AgentKind,
+    ChatAttachmentUpload,
+    ChatAttachResult,
+    ChatBookmark,
+    ChatPreferencesPayload,
+    ChatSkill,
+    ModelSelection,
+    ProviderInfo,
+    RuntimeMode
+} from '@adecore/agent-contracts';
+import { MountedRegistry, type MountedEntry } from '../mounted-registry';
+import type { ChatSink } from '../state/chats';
+import { errorCode, isConnectionError, type ChatTransport, type ChatTransportStatus } from '../transport';
+
+interface ChatOpenOptions {
+    /* Which agent CLI answers; a chat that exists on the host keeps its own. */
+    provider?: AgentKind;
+    /* The account of that CLI; a chat that exists on the host keeps its own. */
+    account?: string;
+    cwd?: string;
+    /* A CLI session to continue, for a chat opened from a terminal that ran the agent. */
+    resume?: string;
+    /* What a fresh chat starts with; an existing chat keeps what it has. */
+    selection?: ModelSelection;
+    runtimeMode?: RuntimeMode;
+}
+
+export interface ChatSendExtras {
+    /* Paths picked with `@`; they also sit in the text, this is what the timeline highlights. */
+    mentions?: string[];
+    /* Skills picked with `$`; they also sit in the text, this is what the timeline chips. */
+    skills?: string[];
+    /* Chats of the project picked with `@`; only their ids travel, the agent reads them itself. */
+    chats?: string[];
+    attachments?: ChatAttachmentUpload[];
+}
+
+interface Mounted extends ChatOpenOptions, MountedEntry {
+    // The last place in the chat's stream the store holds, so a reattach asks only for what came after.
+    seq?: number;
+}
+
+/* How many items a chat reads at once, on attach and for every page before it. */
+const HISTORY_PAGE = 60;
+
+interface ProviderSink {
+    setProviders(providers: ProviderInfo[]): void;
+}
+
+/*
+ * One chat per chat id on one host. A chat opens on mount and detaches on unmount, and every mounted
+ * chat is attached again when the transport comes back. The provider list is fetched once per
+ * connection and handed to its own store. The transport it is given never changes hosts, so a
+ * reattach stays on the host these chats run on.
+ */
+export class ChatClient {
+    private readonly transport: ChatTransport;
+    private readonly sink: ChatSink;
+    private readonly providers: ProviderSink | null;
+    private readonly mounted = new MountedRegistry<Mounted>();
+    private readonly unsubscribe: Array<() => void> = [];
+    private readonly earlier = new Map<string, Promise<void>>();
+    private preferences: ChatPreferencesPayload | null = null;
+
+    constructor(transport: ChatTransport, sink: ChatSink, providers: ProviderSink | null = null) {
+        this.transport = transport;
+        this.sink = sink;
+        this.providers = providers;
+        this.unsubscribe.push(
+            transport.on('chat.event', ({ chatId, event, seq }) => {
+                this.sink.apply(chatId, event);
+                const entry = this.mounted.get(chatId);
+                if (entry && seq !== undefined) {
+                    entry.seq = seq;
+                }
+            }),
+            // Every chat on the machine, attached or not, so a node waiting on a person says so on a view nobody has open.
+            transport.on('chat.status', ({ chatId, info }) => this.sink.status(chatId, info)),
+            transport.on('chat.bookmarks', ({ chatId, bookmarks }) => this.sink.bookmarks(chatId, bookmarks)),
+            transport.subscribeStatus((status) => this.onStatus(status))
+        );
+        if (transport.status === 'open') {
+            void this.loadProviders();
+            void this.loadStatuses();
+        }
+    }
+
+    private readonly inspections = new Map<string, Promise<ChatAttachResult>>();
+
+    inspect(chatId: string): Promise<ChatAttachResult> {
+        const pending = this.inspections.get(chatId);
+        if (pending) {
+            return pending;
+        }
+        const read = this.transport.request('chat.attach', { chatId, historyLimit: 100 }).finally(async () => {
+            this.inspections.delete(chatId);
+            // A visible chat owns its attachment; an inspection must never release it.
+            if (!this.mounted.get(chatId)) {
+                await this.transport.request('chat.detach', { chatId }).catch(() => undefined);
+            }
+        });
+        this.inspections.set(chatId, read);
+        return read;
+    }
+
+    /* Answers false when the transport is not connected; the chat opens once it is. */
+    async open(chatId: string, options: ChatOpenOptions): Promise<boolean> {
+        this.mounted.set(chatId, { ...options, attached: false });
+        try {
+            await this.attach(chatId);
+            return true;
+        } catch (e) {
+            if (isConnectionError(e)) {
+                return false;
+            }
+            throw e;
+        }
+    }
+
+    /*
+     * Points a chat that has not spoken yet at another CLI. The host fixes a chat's provider when
+     * it registers the chat, so the only way over is to drop the empty one and register it again.
+     * The row stays until the attach of the new one replaces it, so a view keeps what it drew.
+     */
+    async retarget(chatId: string, provider: AgentKind, selection: ModelSelection): Promise<void> {
+        const entry = this.mounted.get(chatId);
+        if (!entry) {
+            return;
+        }
+        // The account belonged to the CLI the chat leaves, and the seq to its stream: the new chat's
+        // stream starts over, so offering it the old seq would read as nothing missed and reset nothing.
+        const { attached: _attached, account: _account, seq: _seq, ...options } = entry;
+        this.mounted.delete(chatId);
+        await this.transport.request('chat.kill', { chatId });
+        try {
+            await this.open(chatId, { ...options, provider, selection });
+        } catch (e) {
+            this.sink.forget(chatId);
+            throw e;
+        }
+    }
+
+    /*
+     * Tells the host what a chat it starts on its own is made with while this socket is connected,
+     * since no client mounting that chat sends a composer preference. Said again on every fresh socket.
+     */
+    setPreferences(preferences: ChatPreferencesPayload): void {
+        this.preferences = preferences;
+        this.sendPreferences();
+    }
+
+    async detach(chatId: string): Promise<void> {
+        const entry = this.mounted.get(chatId);
+        this.mounted.delete(chatId);
+        if (!entry?.attached) {
+            return;
+        }
+        try {
+            await this.transport.request('chat.detach', { chatId });
+        } catch {
+            // The socket closing detaches every chat server-side anyway.
+        }
+    }
+
+    /* Current hosts return the stable turn id; older compatible ones only report whether the message queued. */
+    async send(chatId: string, text: string, extras: ChatSendExtras = {}): Promise<{ queued: boolean; turnId?: string }> {
+        return this.transport.request('chat.send', {
+            chatId,
+            text,
+            mentions: extras.mentions,
+            skills: extras.skills,
+            chats: extras.chats,
+            attachments: extras.attachments
+        });
+    }
+
+    /* Marks a message; the list every client of the chat holds comes back as `chat.bookmarks`. */
+    async addBookmark(chatId: string, itemId: string, name?: string): Promise<ChatBookmark[]> {
+        const { bookmarks } = await this.transport.request('chat.addBookmark', { chatId, itemId, ...(name === undefined ? {} : { name }) });
+        return bookmarks;
+    }
+
+    /* An empty name takes the name away. */
+    async renameBookmark(chatId: string, itemId: string, name: string): Promise<ChatBookmark[]> {
+        const { bookmarks } = await this.transport.request('chat.renameBookmark', { chatId, itemId, name });
+        return bookmarks;
+    }
+
+    async removeBookmark(chatId: string, itemId: string): Promise<ChatBookmark[]> {
+        const { bookmarks } = await this.transport.request('chat.removeBookmark', { chatId, itemId });
+        return bookmarks;
+    }
+
+    /* What this chat's CLI would run as a skill, for the composer's `$` picker. */
+    async listSkills(chatId: string): Promise<ChatSkill[]> {
+        const { skills } = await this.transport.request('skills.list', { chatId });
+        return skills;
+    }
+
+    /* Starts the chat over; refused with `chat-busy` while a turn runs, unless `force` stops that turn. */
+    async clear(chatId: string, force = false): Promise<void> {
+        await this.transport.request('chat.clear', { chatId, ...(force ? { force: true } : {}) });
+    }
+
+    async kill(chatId: string): Promise<void> {
+        this.mounted.delete(chatId);
+        this.sink.forget(chatId);
+        await this.transport.request('chat.kill', { chatId });
+    }
+
+    /*
+     * What every chat on this machine is doing right now. `chat.status` only carries a change, so a
+     * window that just opened or came back from a lost socket asks for the standing answer.
+     */
+    async loadStatuses(): Promise<void> {
+        try {
+            const { chats } = await this.transport.request('chat.list', {});
+            for (const info of chats) {
+                this.sink.status(info.chatId, info);
+            }
+        } catch {
+            // The next status event says it instead; an older host never answers this at all.
+        }
+    }
+
+    async loadProviders(): Promise<void> {
+        if (!this.providers) {
+            return;
+        }
+        try {
+            const { providers } = await this.transport.request('provider.list', {});
+            this.providers.setProviders(providers);
+        } catch {
+            // The list comes with the next connection; pickers show what they had.
+        }
+    }
+
+    /*
+     * The page before the oldest one this chat holds, one request per chat at a time. A cursor the
+     * host no longer knows means the thread changed under it, so the chat is read again from its end.
+     */
+    loadEarlier(chatId: string, cursor: string): Promise<void> {
+        const running = this.earlier.get(chatId);
+        if (running) {
+            return running;
+        }
+        const read = this.transport
+            .request('chat.history', { chatId, cursor, limit: HISTORY_PAGE })
+            .then((page) => this.sink.prepend(chatId, cursor, page))
+            .catch(async (e: unknown) => {
+                const entry = this.mounted.get(chatId);
+                if (errorCode(e) !== 'history-expired' || !entry) {
+                    throw e;
+                }
+                delete entry.seq;
+                await this.attach(chatId);
+            })
+            .finally(() => this.earlier.delete(chatId));
+        this.earlier.set(chatId, read);
+        return read;
+    }
+
+    isMounted(chatId: string): boolean {
+        return this.mounted.has(chatId);
+    }
+
+    /* Lets go of the machine; the chats keep running there, the host only stops streaming them here. */
+    dispose(): void {
+        for (const off of this.unsubscribe) {
+            off();
+        }
+        this.unsubscribe.length = 0;
+        for (const chatId of [...this.mounted.keys()]) {
+            void this.detach(chatId);
+        }
+    }
+
+    /*
+     * A reattach offers the last seq the store holds. The host answers only what came after it when
+     * it still has all of that, and the newest page of the thread otherwise, so a short drop costs a
+     * few events.
+     */
+    private async attach(chatId: string): Promise<void> {
+        const entry = this.mounted.get(chatId);
+        if (!entry) {
+            return;
+        }
+        await this.transport.request('chat.create', {
+            chatId,
+            provider: entry.provider,
+            account: entry.account,
+            cwd: entry.cwd,
+            resume: entry.resume,
+            selection: entry.selection,
+            runtimeMode: entry.runtimeMode
+        });
+        // Closed or opened again in the meantime: an opening that is still there attaches itself.
+        if (this.mounted.get(chatId) !== entry) {
+            return;
+        }
+        const since = entry.seq;
+        const result = await this.transport.request('chat.attach', { chatId, historyLimit: HISTORY_PAGE, ...(since === undefined ? {} : { since }) });
+        const current = this.mounted.get(chatId);
+        if (current !== entry) {
+            // Its detach found nothing attached yet, and the host would stream this chat here until the socket closes.
+            if (!current) {
+                await this.transport.request('chat.detach', { chatId }).catch(() => undefined);
+            }
+            return;
+        }
+        entry.attached = true;
+        if (result.seq !== undefined) {
+            entry.seq = result.seq;
+        }
+        if (result.events && since !== undefined) {
+            for (const event of result.events) {
+                this.sink.apply(chatId, event);
+            }
+        } else {
+            const page = result.history === undefined ? undefined : { history: result.history, pending: result.pending ?? [] };
+            this.sink.reset(chatId, result.info, result.items, page);
+        }
+        // A host without bookmarks sends none, and then this chat has none.
+        this.sink.bookmarks(chatId, result.bookmarks ?? []);
+    }
+
+    private sendPreferences(): void {
+        if (this.preferences === null) {
+            return;
+        }
+        void this.transport.request('chat.setPreferences', this.preferences).catch(() => undefined);
+    }
+
+    private onStatus(status: ChatTransportStatus): void {
+        if (status === 'open') {
+            this.sendPreferences();
+            void this.loadProviders();
+            void this.loadStatuses();
+            void this.mounted.reattachAll((chatId) => this.attach(chatId).then(() => undefined));
+            return;
+        }
+        this.mounted.detachAll();
+    }
+}

package/src/chat/chat-references.ts

@@ -0,0 +1,11 @@
+/* Another chat a message may point at, under the name it has right now. */
+export interface ProjectChat {
+    id: string;
+    title: string;
+}
+
+/* The chats an `@query` offers: never the chat typing it or one already attached. */
+export function chatSuggestions(chats: readonly ProjectChat[], query: string, exclude: readonly string[], limit: number): ProjectChat[] {
+    const needle = query.toLowerCase();
+    return chats.filter((chat) => !exclude.includes(chat.id) && chat.title.toLowerCase().includes(needle)).slice(0, limit);
+}