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

package/src/chat/subagent-view.ts

@@ -0,0 +1,137 @@
+import i18next from 'i18next';
+import { useMemo } from 'react';
+import { create } from 'zustand';
+import type { ChatItem, ChatSubagentItem } from '@adecore/agent-contracts';
+import { useChatScope } from '../scope';
+import { useChatRow } from '../state/chats';
+import { useSubagentSupport } from './subagent-support';
+
+/* One conversation on the way down from the chat: the call that opened it and what that call called it. */
+export interface SubagentStep {
+    toolUseId: string;
+    description: string;
+}
+
+/* From the chat down to what is on screen, which is the last step; empty is the main agent. */
+export type SubagentTrail = readonly SubagentStep[];
+
+export interface BreadcrumbStep {
+    label: string;
+    /* How many steps of the trail stay when this crumb is picked; the chat's own title is 0. */
+    depth: number;
+    current: boolean;
+}
+
+export const MAIN_AGENT: SubagentTrail = [];
+
+const NO_ITEMS: readonly string[] = [];
+
+export function crumbOf(item: ChatSubagentItem): SubagentStep {
+    return { toolUseId: item.toolUseId, description: item.description };
+}
+
+function stepLabel(step: SubagentStep): string {
+    return step.description || i18next.t('agent-chat:rows.subagent.label');
+}
+
+/* A row in the main agent's thread or an entry of the flyout opens its conversation straight away. */
+export function openFromMain(step: SubagentStep): SubagentTrail {
+    return [step];
+}
+
+export function openBelow(trail: SubagentTrail, step: SubagentStep): SubagentTrail {
+    return [...trail, step];
+}
+
+export function trailTo(trail: SubagentTrail, depth: number): SubagentTrail {
+    return depth <= 0 ? MAIN_AGENT : trail.slice(0, depth);
+}
+
+export function stepBack(trail: SubagentTrail): SubagentTrail {
+    return trailTo(trail, trail.length - 1);
+}
+
+/*
+ * A sub-agent's conversation is read back, so there is nobody to write to. The composer stays, since
+ * the chat's own approvals and questions are answered there.
+ */
+export function composerWrites(trail: SubagentTrail): boolean {
+    return trail.length === 0;
+}
+
+/* The crumbs after the chat's own title, which the bar draws as the first crumb and the way back. */
+export function breadcrumbOf(trail: SubagentTrail): BreadcrumbStep[] {
+    return trail.map((step, index) => ({ label: stepLabel(step), depth: index + 1, current: index === trail.length - 1 }));
+}
+
+/* A row without a pointer of its own can only be opened by a machine that answers `chat.subagent` for it. */
+export function canOpenSubagent(item: ChatSubagentItem, machineRefused: boolean): boolean {
+    return item.native !== undefined || !machineRefused;
+}
+
+/* The row of the call that opened a conversation, a nested one included, since its row is in the thread too. */
+export function subagentOf(structure: Readonly<Record<string, ChatItem>>, toolUseId: string): ChatSubagentItem | null {
+    return Object.values(structure).find((item): item is ChatSubagentItem => item.kind === 'subagent' && item.toolUseId === toolUseId) ?? null;
+}
+
+/* The subagents a chat can open, in the order the thread has them. */
+export function openableSubagents(order: readonly string[], structure: Record<string, ChatItem>, machineRefused: boolean): ChatSubagentItem[] {
+    return order.flatMap((id) => {
+        const item = structure[id];
+        return item?.kind === 'subagent' && canOpenSubagent(item, machineRefused) ? [item] : [];
+    });
+}
+
+interface SubagentViewStore {
+    /* Keyed with the scope's `keyOf`; a chat on its main agent has no entry. */
+    trails: Record<string, SubagentTrail>;
+    show(key: string, trail: SubagentTrail): void;
+    /* One level up; false when the main agent was already on screen, so the key can mean something else. */
+    back(key: string): boolean;
+}
+
+/*
+ * What a chat shows in its place, for this page's life only: a look into a subagent is a moment
+ * rather than a place, so it is never written to the project or to the host.
+ */
+export const useSubagentView = create<SubagentViewStore>((set, get) => ({
+    trails: {},
+    show(key, trail) {
+        const trails = { ...get().trails };
+        if (trail.length === 0) {
+            delete trails[key];
+        } else {
+            trails[key] = trail;
+        }
+        set({ trails });
+    },
+    back(key) {
+        const trail = get().trails[key];
+        if (trail === undefined || trail.length === 0) {
+            return false;
+        }
+        get().show(key, stepBack(trail));
+        return true;
+    }
+}));
+
+/* The trail of a chat in the scope this is rendered in, and a way to set it. */
+export function useSubagentTrail(chatId: string): { trail: SubagentTrail; show(trail: SubagentTrail): void } {
+    const key = useChatScope().keyOf(chatId);
+    const trail = useSubagentView((s) => s.trails[key] ?? MAIN_AGENT);
+    return { trail, show: (next) => useSubagentView.getState().show(key, next) };
+}
+
+export function useOpenableSubagents(chatId: string): ChatSubagentItem[] {
+    const { id } = useChatScope();
+    const refused = useSubagentSupport((s) => s.unsupported[id] === true);
+    // The structure and not the items, so a delta growing a reply does not walk the thread again.
+    const order = useChatRow(chatId, (row) => row?.order);
+    const structure = useChatRow(chatId, (row) => row?.structure);
+    return useMemo(() => (structure === undefined ? [] : openableSubagents(order ?? NO_ITEMS, structure, refused)), [order, structure, refused]);
+}
+
+export function useSubagentItem(chatId: string, toolUseId: string): ChatSubagentItem | null {
+    const structure = useChatRow(chatId, (row) => row?.structure);
+    return useMemo(() => (structure === undefined ? null : subagentOf(structure, toolUseId)), [structure, toolUseId]);
+}

package/src/chat/thumbnails.ts

@@ -0,0 +1,108 @@
+import i18next from 'i18next';
+import { useEffect, useState } from 'react';
+import type { ChatAttachmentUpload } from '@adecore/agent-contracts';
+import { uploadPreviewUrl } from './attachments';
+
+/* The edge of a composer thumbnail: a few times the 56 px it is drawn at, so a sharp screen still gets a sharp one. */
+export const THUMBNAIL_PX = 256;
+
+export interface ThumbnailCrop {
+    sx: number;
+    sy: number;
+    /* The edge of the square taken from the middle of the image. */
+    size: number;
+    /* The edge the square is drawn at, never larger than it was. */
+    out: number;
+}
+
+/* The square in the middle of an image that a thumbnail shows, the same part `object-cover` would. */
+export function thumbnailCrop(width: number, height: number, max: number = THUMBNAIL_PX): ThumbnailCrop {
+    const size = Math.max(1, Math.min(width, height));
+    return {
+        sx: Math.max(0, Math.floor((width - size) / 2)),
+        sy: Math.max(0, Math.floor((height - size) / 2)),
+        size,
+        out: Math.min(max, size)
+    };
+}
+
+function bytesOf(base64: string): Uint8Array<ArrayBuffer> {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(new ArrayBuffer(binary.length));
+    for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes;
+}
+
+function dataUrlOf(blob: Blob): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onerror = () => reject(reader.error ?? new Error(i18next.t('agent-chat:attachments.unreadableThumbnail')));
+        reader.onload = () => resolve(String(reader.result));
+        reader.readAsDataURL(blob);
+    });
+}
+
+/*
+ * A still of the middle of an image, decoded once. The composer used to draw the full data URL in a
+ * 56 px box, which a browser decodes again for every paint, so a tall screenshot made typing stutter.
+ * An animated image gives its first frame. Whatever cannot be decoded this way (an SVG, a browser
+ * without `OffscreenCanvas`) falls back to the image itself, which is what it was before.
+ */
+async function makeThumbnail(upload: ChatAttachmentUpload): Promise<string> {
+    try {
+        const bitmap = await createImageBitmap(new Blob([bytesOf(upload.data)], { type: upload.mime }));
+        const crop = thumbnailCrop(bitmap.width, bitmap.height);
+        const canvas = new OffscreenCanvas(crop.out, crop.out);
+        const context = canvas.getContext('2d');
+        if (!context) {
+            bitmap.close();
+            return uploadPreviewUrl(upload);
+        }
+        context.drawImage(bitmap, crop.sx, crop.sy, crop.size, crop.size, 0, 0, crop.out, crop.out);
+        bitmap.close();
+        return await dataUrlOf(await canvas.convertToBlob({ type: 'image/png' }));
+    } catch {
+        return uploadPreviewUrl(upload);
+    }
+}
+
+// Keyed by the upload itself, so a composer that mounts again finds it and a removed file lets it go.
+const made = new WeakMap<ChatAttachmentUpload, string>();
+const making = new WeakMap<ChatAttachmentUpload, Promise<string>>();
+
+function thumbnailOf(upload: ChatAttachmentUpload): Promise<string> {
+    let promise = making.get(upload);
+    if (!promise) {
+        promise = makeThumbnail(upload).then((url) => {
+            made.set(upload, url);
+            return url;
+        });
+        making.set(upload, promise);
+    }
+    return promise;
+}
+
+/* The thumbnail of an image the composer holds, or null while it is being made. */
+export function useUploadThumbnail(upload: ChatAttachmentUpload): string | null {
+    const [ready, setReady] = useState<{ upload: ChatAttachmentUpload; url: string } | null>(null);
+    const cached = made.get(upload);
+
+    useEffect(() => {
+        if (made.has(upload)) {
+            return;
+        }
+        let cancelled = false;
+        void thumbnailOf(upload).then((url) => {
+            if (!cancelled) {
+                setReady({ upload, url });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [upload]);
+
+    return cached ?? (ready?.upload === upload ? ready.url : null);
+}

package/src/chat/timeline-flash.ts

@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+
+/* The row of a thread a jump landed on: it lights up once, and a card of changes opens when the jump asked for it. */
+export interface TimelineFlash {
+    /* The scope's key of the chat, so two chats showing the same row id never light up together. */
+    key: string;
+    rowId: string;
+    opens: boolean;
+    /* A second jump to the same row counts. */
+    nonce: number;
+}
+
+interface TimelineFlashStore {
+    target: TimelineFlash | null;
+    flash(key: string, rowId: string, opens: boolean): void;
+}
+
+/* A little longer than the animation of `.chat-flash`, so a row that scrolls into view again later is neither lit nor opened a second time. */
+const FLASH_MS = 2000;
+
+export const useTimelineFlash = create<TimelineFlashStore>((set, get) => ({
+    target: null,
+    flash(key, rowId, opens) {
+        const nonce = (get().target?.nonce ?? 0) + 1;
+        set({ target: { key, rowId, opens, nonce } });
+        const timer = setTimeout(() => {
+            if (get().target?.nonce === nonce) {
+                set({ target: null });
+            }
+        }, FLASH_MS);
+        (timer as { unref?: () => void }).unref?.();
+    }
+}));

package/src/chat/timeline-scroll.ts

@@ -0,0 +1,199 @@
+// A page is a screen minus a little, so the line you were reading is still on it after the jump.
+const PAGE_OVERLAP = 0.9;
+
+type Scroller = {
+    element: HTMLElement;
+    follow: (enabled: boolean) => void;
+    // The height of the composer standing over the end of the scroller, which a page does not count.
+    coveredHeight: () => number;
+};
+
+const scrollers = new Map<string, Scroller>();
+
+/* The timeline hands its scroller over so the composer, which never sees it, can page through it. */
+export function registerTimeline(
+    chatId: string,
+    element: HTMLElement | null,
+    follow: Scroller['follow'],
+    coveredHeight: Scroller['coveredHeight']
+): () => void {
+    if (element === null) {
+        return () => undefined;
+    }
+    scrollers.set(chatId, { element, follow, coveredHeight });
+    return () => {
+        if (scrollers.get(chatId)?.element === element) {
+            scrollers.delete(chatId);
+            ends.delete(chatId);
+        }
+    };
+}
+
+/* The timeline owns following; the composer subscribes here to show its jump-to-end button. */
+const ends = new Map<string, boolean>();
+const listeners = new Set<() => void>();
+
+export function setTimelineAtEnd(chatId: string, atEnd: boolean): void {
+    if (ends.get(chatId) === atEnd) {
+        return;
+    }
+    ends.set(chatId, atEnd);
+    for (const listener of listeners) {
+        listener();
+    }
+}
+
+export function subscribeTimelineEnd(listener: () => void): () => void {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+
+/* A thread nobody has scrolled is at its end, so the button stays away until there is a way back. */
+export function timelineAtEnd(chatId: string): boolean {
+    return ends.get(chatId) ?? true;
+}
+
+export function scrollTimelineToEnd(chatId: string, behavior: ScrollBehavior = 'smooth'): void {
+    const scroller = scrollers.get(chatId);
+    if (scroller) {
+        scroller.follow(true);
+        scroller.element.scrollTo({ top: scroller.element.scrollHeight, behavior });
+    }
+}
+
+/* Pages the thread of this chat up or down; false when it has no timeline on screen. */
+export function pageTimeline(chatId: string, direction: -1 | 1): boolean {
+    const scroller = scrollers.get(chatId);
+    if (!scroller) {
+        return false;
+    }
+    scroller.follow(false);
+    const { element } = scroller;
+    element.scrollBy({ top: direction * Math.max(0, element.clientHeight - scroller.coveredHeight()) * PAGE_OVERLAP, behavior: 'smooth' });
+    return true;
+}
+
+/*
+ * The keyboard steps from one message of the person to the next through the timeline on screen,
+ * which is the only side that knows where its rows start. Keyed with the scope's `keyOf`, the way
+ * the app's shortcuts name the chat that has the focus.
+ */
+const steppers = new Map<string, (direction: -1 | 1) => boolean>();
+
+export function registerMessageStepper(key: string, step: (direction: -1 | 1) => boolean): () => void {
+    steppers.set(key, step);
+    return () => {
+        if (steppers.get(key) === step) {
+            steppers.delete(key);
+        }
+    };
+}
+
+/* False when that chat has no timeline on screen or no message in that direction. */
+export function stepTimelineMessage(key: string, direction: -1 | 1): boolean {
+    return steppers.get(key)?.(direction) ?? false;
+}
+
+/*
+ * A jump to one message of a chat, asked from outside its thread (the chat's menu). A thread that is
+ * not on screen yet gets it when it registers, since the menu may have to show the chat first.
+ * Keyed with the scope's `keyOf`, like the steppers.
+ */
+const jumpers = new Map<string, (itemId: string) => void>();
+const waitingJumps = new Map<string, string>();
+
+export function registerItemJumper(key: string, jump: (itemId: string) => void): () => void {
+    jumpers.set(key, jump);
+    const waiting = waitingJumps.get(key);
+    if (waiting !== undefined) {
+        waitingJumps.delete(key);
+        jump(waiting);
+    }
+    return () => {
+        if (jumpers.get(key) === jump) {
+            jumpers.delete(key);
+        }
+    };
+}
+
+/* False when that chat has no thread on screen; the jump then waits for the next one that registers. */
+export function jumpToTimelineItem(key: string, itemId: string): boolean {
+    const jump = jumpers.get(key);
+    if (jump === undefined) {
+        waitingJumps.set(key, itemId);
+        return false;
+    }
+    jump(itemId);
+    return true;
+}
+
+/*
+ * A jump to the turn of a chat, for a card that says which turn wrote something: the message that opened
+ * it, or the files it changed. Kept like the jump to an item, so a chat that is not on screen yet gets it
+ * when its thread registers.
+ */
+export type TurnTarget = 'prompt' | 'changes';
+
+type TurnJump = (turnId: string, target: TurnTarget) => void;
+const turnJumpers = new Map<string, TurnJump>();
+const waitingTurnJumps = new Map<string, { turnId: string; target: TurnTarget }>();
+
+export function registerTurnJumper(key: string, jump: TurnJump): () => void {
+    turnJumpers.set(key, jump);
+    const waiting = waitingTurnJumps.get(key);
+    if (waiting !== undefined) {
+        waitingTurnJumps.delete(key);
+        jump(waiting.turnId, waiting.target);
+    }
+    return () => {
+        if (turnJumpers.get(key) === jump) {
+            turnJumpers.delete(key);
+        }
+    };
+}
+
+/* False when that chat has no thread on screen; the jump then waits for the next one that registers. */
+export function jumpToTimelineTurn(key: string, turnId: string, target: TurnTarget): boolean {
+    const jump = turnJumpers.get(key);
+    if (jump === undefined) {
+        waitingTurnJumps.set(key, { turnId, target });
+        return false;
+    }
+    jump(turnId, target);
+    return true;
+}
+
+/* How near the top, in screens, the page before is asked for, so it is there before a reader reaches the edge. */
+const EARLIER_SCREENS = 1.5;
+
+export function wantsEarlier(scroller: HTMLElement): boolean {
+    return scroller.clientHeight > 0 && scroller.scrollTop < scroller.clientHeight * EARLIER_SCREENS;
+}
+
+/* A row being read and how far below the top of its scroller it starts, so a page going in above leaves it there. */
+export interface ReadingAnchor {
+    id: string;
+    offset: number;
+}
+
+/* The first row in view, found by the rows' `data-item-id`, for a thread that keeps every row in the document. */
+export function firstRowInView(scroller: HTMLElement): ReadingAnchor | null {
+    const top = scroller.getBoundingClientRect().top;
+    for (const row of scroller.querySelectorAll<HTMLElement>('[data-item-id]')) {
+        const rect = row.getBoundingClientRect();
+        if (rect.bottom > top) {
+            return { id: row.dataset.itemId!, offset: rect.top - top };
+        }
+    }
+    return null;
+}
+
+/* Puts the anchored row back where it was; nothing moves when that row is gone. */
+export function restoreAnchor(scroller: HTMLElement, anchor: ReadingAnchor): void {
+    const row = scroller.querySelector<HTMLElement>(`[data-item-id="${CSS.escape(anchor.id)}"]`);
+    if (row !== null) {
+        scroller.scrollTop += row.getBoundingClientRect().top - scroller.getBoundingClientRect().top - anchor.offset;
+    }
+}

package/src/chat/ui/AccountPill.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next';
+import type { AgentKind } from '@adecore/agent-contracts';
+import { AccountDot } from '../../agents/AccountDot';
+import { useAccountChoice } from '../account-choice';
+import { useChats } from '../../state/chats';
+import { useChatScope } from '../../scope';
+import { Pill, Tooltip } from '@adecore/ui';
+
+function AccountPillOf({ provider, account }: { provider: AgentKind; account: string | undefined }) {
+    const { t } = useTranslation('agent-chat');
+    const choice = useAccountChoice(provider, account);
+    if (choice === null) {
+        return null;
+    }
+    const name = choice.current === null ? choice.currentId : choice.nameOf(choice.current);
+    return (
+        <Tooltip label={t('account.pill', { provider: choice.providerName, account: name })}>
+            <Pill icon={<AccountDot color={choice.current?.account.color} className="size-1.75" />}>
+                <span className="max-w-32 truncate">{name}</span>
+            </Pill>
+        </Tooltip>
+    );
+}
+
+/* Which account a chat node runs under, from the status every client gets; only while its CLI has a choice of accounts. */
+export function AccountPill({ chatId }: { chatId: string }) {
+    const { keyOf } = useChatScope();
+    const provider = useChats((s) => s.statusByKey[keyOf(chatId)]?.info.provider);
+    const account = useChats((s) => s.statusByKey[keyOf(chatId)]?.info.account);
+    return provider === undefined ? null : <AccountPillOf provider={provider} account={account} />;
+}

package/src/chat/ui/AnsiOutput.tsx

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { parseAnsi } from '../logic/ansi';
+
+export function AnsiOutput({ text, limit, tailLines }: { text: string; limit?: number; tailLines?: number }) {
+    const { t } = useTranslation('agent-chat');
+    const { tokens, omitted } = useMemo(() => parseAnsi(text, { limit, tailLines }), [text, limit, tailLines]);
+    return (
+        <>
+            {tokens.map((token, index) => (
+                <span key={index} style={token.style}>
+                    {token.content}
+                </span>
+            ))}
+            {omitted > 0 && `\n${t('work.moreCharacters', { count: omitted })}`}
+        </>
+    );
+}

package/src/chat/ui/BookmarkMarker.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bookmark, Pencil, X } from 'lucide-react';
+import { CHAT_BOOKMARK_LIMITS, type ChatBookmark } from '@adecore/agent-contracts';
+import { nameBookmark, removeBookmark, useBookmarkNaming } from '../bookmarks';
+import { bookmarkLabel } from '../logic/bookmarks';
+import { useChatScope } from '../../scope';
+import { ButtonGroup, Icon, IconButton, Input } from '@adecore/ui';
+
+interface BookmarkMarkerProps {
+    chatId: string;
+    /* The message the bookmark is on, which for a folded turn is not the row it is drawn before. */
+    itemId: string;
+    bookmark: ChatBookmark | null;
+}
+
+/*
+ * A bookmark as a chapter line across the thread, drawn before the message it marks. Without a
+ * bookmark it only stands while the name field of a mark still on its way to the host is open.
+ */
+export function BookmarkMarker({ chatId, itemId, bookmark }: BookmarkMarkerProps) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const chatKey = scope.keyOf(chatId);
+    const naming = useBookmarkNaming((s) => s.chatKey === chatKey && s.itemId === itemId);
+
+    if (bookmark === null && !naming) {
+        return null;
+    }
+
+    return (
+        <div className="group/bookmark mb-2 flex h-7 min-w-0 items-center gap-2 text-xs select-none">
+            <Icon icon={Bookmark} size={14} className="shrink-0 text-accent" />
+            {naming ? (
+                <NameField
+                    initial={bookmark?.name ?? ''}
+                    onDone={(name) => {
+                        useBookmarkNaming.getState().close();
+                        if (name !== null) {
+                            void nameBookmark(scope, chatId, itemId, name, bookmark?.name);
+                        }
+                    }}
+                />
+            ) : (
+                bookmark !== null && (
+                    <span className={clsx('min-w-0 truncate', bookmark.name === undefined ? 'text-text-muted' : 'text-text')}>{bookmarkLabel(bookmark)}</span>
+                )
+            )}
+            <span className="min-w-6 grow border-t border-border" />
+            {bookmark !== null && !naming && (
+                <ButtonGroup
+                    render={<span />}
+                    className="-ml-2 max-w-0 shrink-0 overflow-hidden opacity-0 group-hover/bookmark:ml-0 group-hover/bookmark:max-w-none group-hover/bookmark:opacity-100 group-has-focus-visible/bookmark:ml-0 group-has-focus-visible/bookmark:max-w-none group-has-focus-visible/bookmark:opacity-100"
+                >
+                    <IconButton icon={Pencil} size="xs" label={t('bookmarks.rename')} onClick={() => useBookmarkNaming.getState().open(chatKey, itemId)} />
+                    <IconButton icon={X} size="xs" label={t('bookmarks.remove')} onClick={() => void removeBookmark(scope, chatId, bookmark)} />
+                </ButtonGroup>
+            )}
+        </div>
+    );
+}
+
+/* Settles with the name on Enter or when the focus leaves, and with null on Escape, which keeps the name as it was. */
+function NameField({ initial, onDone }: { initial: string; onDone: (name: string | null) => void }) {
+    const { t } = useTranslation('agent-chat');
+    const ref = useRef<HTMLInputElement>(null);
+    const settled = useRef(false);
+
+    // Again a frame later: the menu the field was opened from hands the focus back as it closes.
+    useEffect(() => {
+        ref.current?.focus();
+        const frame = requestAnimationFrame(() => ref.current?.focus());
+        return () => cancelAnimationFrame(frame);
+    }, []);
+
+    const settle = (name: string | null): void => {
+        if (settled.current) {
+            return;
+        }
+        settled.current = true;
+        onDone(name);
+    };
+
+    return (
+        <Input
+            ref={ref}
+            size="sm"
+            defaultValue={initial}
+            maxLength={CHAT_BOOKMARK_LIMITS.name}
+            placeholder={t('bookmarks.namePlaceholder')}
+            aria-label={t('bookmarks.nameLabel')}
+            className="w-64 max-w-full min-w-0 select-text"
+            onPointerDown={(e) => e.stopPropagation()}
+            onFocus={(e) => e.currentTarget.select()}
+            onBlur={(e) => settle(e.currentTarget.value)}
+            onKeyDown={(e) => {
+                e.stopPropagation();
+                if (e.key === 'Enter') {
+                    settle(e.currentTarget.value);
+                }
+                if (e.key === 'Escape') {
+                    settle(null);
+                }
+            }}
+        />
+    );
+}