@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/components/diff-editor.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { type MonacoApi, MonacoLoader, MonacoUtil } from '../editor/monaco-loader';
+import type { DiffEditorProps } from '../extension/web-extension-api';
+import { useT } from '../i18n/use-t';
+import type { TaSettings } from '../settings/settings-protocol';
+
+type Editor = ReturnType<MonacoApi['editor']['createDiffEditor']>;
+
+let models = 0;
+
+/**
+ * Monaco's diff editor on two texts of a file, in the theme of `settings`: side by side (inline when
+ * narrow, or with `inline`), the unchanged regions folded, as the diffs of an IDE.
+ */
+export function DiffEditor({
+    settings: store,
+    path,
+    original,
+    modified,
+    inline = false,
+    readOnly = true,
+    onChange,
+    onSave,
+    onDiff,
+}: DiffEditorProps & { settings: TaSettings }) {
+    const t = useT();
+    const settings = React.useSyncExternalStore(
+        listener => store.subscribe(listener),
+        () => store.state,
+    );
+    const host = React.useRef<HTMLDivElement>(null);
+    const [monaco, setMonaco] = React.useState<MonacoApi>();
+    const [error, setError] = React.useState<string>();
+    const [editor, setEditor] = React.useState<Editor>();
+    const callbacks = React.useRef({ onChange, onSave, onDiff });
+    callbacks.current = { onChange, onSave, onDiff };
+    const applying = React.useRef(false);
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Monaco loads once, in the language of that time
+    React.useEffect(() => {
+        let live = true;
+        MonacoLoader.load(settings.language).then(
+            loaded => live && setMonaco(() => loaded),
+            failure => live && setError(failure instanceof Error ? failure.message : String(failure)),
+        );
+        return () => {
+            live = false;
+        };
+    }, []);
+
+    React.useEffect(() => {
+        if (monaco) {
+            MonacoUtil.applyTheme(monaco, settings.theme);
+        }
+    }, [monaco, settings.theme]);
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: later texts and options are applied by the effects below, without a new editor
+    React.useEffect(() => {
+        if (!monaco || !host.current) {
+            return;
+        }
+        const id = ++models;
+        const name = path.replace(/^\/+/, '');
+        const left = monaco.editor.createModel(original, undefined, monaco.Uri.from({ scheme: 'ta-diff', path: `/${id}/original/${name}` }));
+        const right = monaco.editor.createModel(modified, undefined, monaco.Uri.from({ scheme: 'ta-diff', path: `/${id}/modified/${name}` }));
+        const created = monaco.editor.createDiffEditor(host.current, {
+            ...MonacoUtil.editorOptions(),
+            readOnly,
+            originalEditable: false,
+            renderSideBySide: !inline,
+            useInlineViewWhenSpaceIsLimited: true,
+            renderSideBySideInlineBreakpoint: 560,
+            renderOverviewRuler: false,
+            enableSplitViewResizing: true,
+            ignoreTrimWhitespace: false,
+            hideUnchangedRegions: { enabled: true, contextLineCount: 3, minimumLineCount: 3, revealLineCount: 20 },
+            renderIndicators: true,
+            diffWordWrap: 'off',
+        });
+        created.setModel({ original: left, modified: right });
+        const changes = right.onDidChangeContent(() => {
+            if (!applying.current) {
+                callbacks.current.onChange?.(right.getValue());
+            }
+        });
+        const updated = created.onDidUpdateDiff(() =>
+            callbacks.current.onDiff?.({
+                changes: created.getLineChanges()?.length ?? 0,
+                next: () => created.goToDiff('next'),
+                previous: () => created.goToDiff('previous'),
+            }),
+        );
+        created.getModifiedEditor().addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => callbacks.current.onSave?.(right.getValue()));
+        setEditor(created);
+        return () => {
+            changes.dispose();
+            updated.dispose();
+            created.dispose();
+            left.dispose();
+            right.dispose();
+            setEditor(undefined);
+        };
+    }, [monaco, path]);
+
+    React.useEffect(() => {
+        const model = editor?.getModel();
+        if (!model) {
+            return;
+        }
+        if (model.original.getValue() !== original) {
+            model.original.setValue(original);
+        }
+        if (model.modified.getValue() !== modified) {
+            applying.current = true;
+            try {
+                model.modified.pushEditOperations([], [{ range: model.modified.getFullModelRange(), text: modified }], () => null);
+            } finally {
+                applying.current = false;
+            }
+        }
+    }, [editor, original, modified]);
+
+    React.useEffect(() => editor?.updateOptions({ readOnly, renderSideBySide: !inline }), [editor, readOnly, inline]);
+
+    return (
+        <div className="ta-code-editor">
+            <div ref={host} className="ta-code-editor-host" />
+            {!editor && <div className="ta-code-editor-state">{error ? t('ta.editor.failed', { message: error }) : t('ta.editor.loading')}</div>}
+        </div>
+    );
+}

package/src/browser/components/diff-view.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { DiffUtil } from '../util/diff';
+
+const SIGNS = { add: '+', remove: '-', context: ' ', gap: '' };
+
+export function DiffView({ diff }: { diff: string }) {
+    const lines = React.useMemo(() => DiffUtil.parse(diff), [diff]);
+    return (
+        <div className="ta-diff">
+            {lines.map((line, index) => (
+                <div key={index} className={`ta-diff-line ta-diff-${line.kind}`}>
+                    <span className="ta-diff-number">{line.line ?? ''}</span>
+                    <span className="ta-diff-sign">{SIGNS[line.kind]}</span>
+                    <span className="ta-diff-text">{line.kind === 'gap' ? '⋯' : line.text}</span>
+                </div>
+            ))}
+        </div>
+    );
+}

package/src/browser/components/dino.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { LOGO_PATH } from '../avatar/dino-avatar';
+
+export const DINO_GREEN = '#10B981';
+
+/** Cell's dinosaur as assets/logo.svg draws it: the mark of ta. */
+export function Dino({ size = 32 }: { size?: number }) {
+    return (
+        <svg width={size} height={size} viewBox="0 0 256 256" aria-label="ta" role="img">
+            <path d={LOGO_PATH} fill={DINO_GREEN} fillRule="evenodd" />
+        </svg>
+    );
+}
+
+/** The same picture as the icon of the tab. */
+export function dinoFavicon(): string {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="${LOGO_PATH}" fill="${DINO_GREEN}" fill-rule="evenodd"/></svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}

package/src/browser/components/editor-area.tsx

@@ -0,0 +1,234 @@
+import { Maximize2, Minimize2, PanelTop, Plus, X } from 'lucide-react';
+import * as React from 'react';
+import { Widget } from '../chat/chat-view';
+import { ExtensionBoundary } from '../extension/extension-view';
+import { type WebEditorEntry, WebLabelUtil, type WebViewEntry } from '../extension/web-extension-protocol';
+import { useWebExtensions } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { useDismiss } from './account-menu';
+import { type ContextMenuItem, useContextMenu } from './context-menu';
+import { Icon, IconButton, SidebarRight } from './icon';
+
+export interface EditorAreaProps {
+    editors: WebEditorEntry[];
+    active?: string;
+    /** The `panel` views: what `+` and the empty workbench open. */
+    views: WebViewEntry[];
+    onShow(id: string): void;
+    /** Closes tabs: one, or several at once from the menu of a tab. */
+    onClose(ids: string[]): void;
+    /** Keeps a preview tab (a double click on it). */
+    onPin(id: string): void;
+    onOpenView(id: string): void;
+    onHide(): void;
+    /** Whether the workbench takes the place of the conversation too; none on narrow screens, where it always does. */
+    maximized?: boolean;
+    onMaximize?(): void;
+    style?: React.CSSProperties;
+}
+
+function ViewGlyph({ view, size }: { view: WebViewEntry; size: number }) {
+    const Glyph = view.icon ?? PanelTop;
+    return <Glyph size={size} strokeWidth={1.6} />;
+}
+
+/** `+` of the workbench: the tools it opens. */
+function OpenMenu({ views, onOpenView }: Pick<EditorAreaProps, 'views' | 'onOpenView'>) {
+    const t = useT();
+    const [open, setOpen] = React.useState(false);
+    const root = React.useRef<HTMLDivElement>(null);
+    const button = React.useRef<HTMLButtonElement>(null);
+    const menu = React.useRef<HTMLDivElement>(null);
+    const id = React.useId();
+    const close = React.useCallback(() => setOpen(false), []);
+    useDismiss(open, close, root, button);
+    React.useEffect(() => {
+        if (open) {
+            menu.current?.querySelector<HTMLButtonElement>('[role="menuitem"]')?.focus();
+        }
+    }, [open]);
+    const onKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+            return;
+        }
+        event.preventDefault();
+        const items = [...(menu.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]') ?? [])];
+        const at = items.indexOf(document.activeElement as HTMLButtonElement);
+        items[(at + (event.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length]?.focus();
+    };
+    return (
+        <div className="ta-workbench-open" ref={root}>
+            <button
+                ref={button}
+                type="button"
+                className={`ta-icon-button ${open ? 'ta-on' : ''}`}
+                title={t('ta.workbench.open')}
+                aria-label={t('ta.workbench.open')}
+                aria-haspopup="menu"
+                aria-expanded={open}
+                aria-controls={open ? id : undefined}
+                onClick={() => setOpen(!open)}
+            >
+                <Icon icon={Plus} />
+            </button>
+            {open && (
+                <div className="ta-workbench-menu" id={id} role="menu" ref={menu} aria-label={t('ta.workbench.open')} onKeyDown={onKeyDown}>
+                    {views.map(view => (
+                        <button
+                            key={view.id}
+                            type="button"
+                            role="menuitem"
+                            className="ta-account-item"
+                            onClick={() => {
+                                close();
+                                onOpenView(view.id);
+                            }}
+                        >
+                            <ViewGlyph view={view} size={15} />
+                            <span className="ta-ellipsis">{WebLabelUtil.text(view.title)}</span>
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+/** What an empty workbench shows: the tools it opens. */
+function Launcher({ views, onOpenView }: Pick<EditorAreaProps, 'views' | 'onOpenView'>) {
+    const t = useT();
+    return (
+        <div className="ta-workbench-launcher">
+            <div className="ta-workbench-launcher-head">
+                <span className="ta-workbench-launcher-title">{t('ta.workbench.empty')}</span>
+                <span className="ta-workbench-launcher-hint">{t('ta.workbench.emptyHint')}</span>
+            </div>
+            {views.map(view => (
+                <button key={view.id} type="button" className="ta-workbench-launch" onClick={() => onOpenView(view.id)}>
+                    <ViewGlyph view={view} size={16} />
+                    <span className="ta-ellipsis">{WebLabelUtil.text(view.title)}</span>
+                </button>
+            ))}
+        </div>
+    );
+}
+
+/**
+ * The workbench beside the conversation: the tools of web extensions (`panel` views, such as the
+ * explorer or a terminal) and what they open (files, diffs), as tabs. Every tab stays rendered while
+ * open, hidden when not shown, so that what it holds (a scroll position, a page in a frame) survives
+ * switching.
+ */
+export function EditorArea({ editors, active, views, onShow, onClose, onPin, onOpenView, onHide, maximized, onMaximize, style }: EditorAreaProps) {
+    const t = useT();
+    const [menu, openMenu] = useContextMenu();
+    const menuFor = (editor: WebEditorEntry): ContextMenuItem[] => {
+        const at = editors.indexOf(editor);
+        const ids = (list: WebEditorEntry[]) => list.map(candidate => candidate.id);
+        const others = editors.filter(candidate => candidate !== editor);
+        const left = editors.slice(0, at);
+        const right = editors.slice(at + 1);
+        const saved = editors.filter(candidate => !candidate.dirty);
+        const items: ContextMenuItem[] = [
+            { label: t('ta.tab.close'), run: () => onClose([editor.id]) },
+            { label: t('ta.tab.closeOthers'), run: () => onClose(ids(others)), disabled: others.length === 0 },
+            { label: t('ta.tab.closeLeft'), run: () => onClose(ids(left)), disabled: left.length === 0 },
+            { label: t('ta.tab.closeRight'), run: () => onClose(ids(right)), disabled: right.length === 0 },
+            '-',
+            { label: t('ta.tab.closeSaved'), run: () => onClose(ids(saved)), disabled: saved.length === 0 },
+            { label: t('ta.tab.closeAll'), run: () => onClose(ids(editors)) },
+        ];
+        if (editor.preview) {
+            items.push('-', { label: t('ta.tab.keepOpen'), run: () => onPin(editor.id) });
+        }
+        return items;
+    };
+    return (
+        <section className="ta-editors" style={style} aria-label={t('ta.workbench')}>
+            <header className="ta-editor-tabs">
+                <div className="ta-editor-tablist" role="tablist">
+                    {editors.length === 0 && <span className="ta-workbench-title">{t('ta.workbench')}</span>}
+                    {editors.map(editor => {
+                        const title = WebLabelUtil.text(editor.title);
+                        const Glyph = editor.icon;
+                        const selected = editor.id === active;
+                        return (
+                            <div
+                                key={editor.id}
+                                className={`ta-editor-tab ${selected ? 'ta-active' : ''} ${editor.preview ? 'ta-preview' : ''} ${editor.dirty ? 'ta-dirty' : ''}`}
+                                title={title}
+                            >
+                                <button
+                                    type="button"
+                                    role="tab"
+                                    aria-selected={selected}
+                                    className="ta-editor-tab-button"
+                                    onClick={() => onShow(editor.id)}
+                                    onDoubleClick={() => onPin(editor.id)}
+                                    onAuxClick={event => event.button === 1 && onClose([editor.id])}
+                                    onContextMenu={event => openMenu(event, menuFor(editor))}
+                                >
+                                    {Glyph && <Glyph size={14} />}
+                                    <span>{title}</span>
+                                </button>
+                                <button
+                                    type="button"
+                                    className="ta-editor-tab-close"
+                                    aria-label={t('ta.editor.close', { title })}
+                                    onClick={() => onClose([editor.id])}
+                                    onContextMenu={event => openMenu(event, menuFor(editor))}
+                                >
+                                    <Icon icon={X} size={13} />
+                                    {editor.dirty && <span className="ta-editor-tab-dirty" aria-hidden="true" />}
+                                </button>
+                            </div>
+                        );
+                    })}
+                </div>
+                {menu}
+                <div className="ta-workbench-actions">
+                    {views.length > 0 && <OpenMenu views={views} onOpenView={onOpenView} />}
+                    {onMaximize && (
+                        <IconButton
+                            icon={maximized ? Minimize2 : Maximize2}
+                            label={t(maximized ? 'ta.workbench.restore' : 'ta.workbench.maximize')}
+                            className="ta-wide-only"
+                            aria-pressed={maximized}
+                            onClick={onMaximize}
+                        />
+                    )}
+                    <IconButton icon={SidebarRight} label={t('ta.panel.hide')} onClick={onHide} />
+                </div>
+            </header>
+            {editors.length === 0 && <Launcher views={views} onOpenView={onOpenView} />}
+            {editors.map(editor => {
+                const Content = editor.render;
+                return (
+                    <div key={editor.id} className="ta-editor-body" role="tabpanel" hidden={editor.id !== active}>
+                        <ExtensionBoundary name={WebLabelUtil.text(editor.title)} resetKey={Content}>
+                            <Content />
+                        </ExtensionBoundary>
+                    </div>
+                );
+            })}
+        </section>
+    );
+}
+
+/** The cards of web extensions (`setWidget` with `placement: 'panel'`): a tab of the workbench. */
+export function WorkbenchCards() {
+    const t = useT();
+    const [{ widgets }] = useWebExtensions();
+    const cards = widgets.filter(widget => widget.placement === 'panel');
+    return (
+        <div className="ta-panel-cards">
+            {cards.length === 0 && <div className="ta-side-empty">{t('ta.workbench.noCards')}</div>}
+            {cards.map(widget => (
+                <section key={widget.id} className="ta-card-widget">
+                    {widget.title && <h2 className="ta-hud">{WebLabelUtil.text(widget.title)}</h2>}
+                    <Widget widget={widget} />
+                </section>
+            ))}
+        </div>
+    );
+}

package/src/browser/components/folder-picker.spec.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'bun:test';
+import { FolderPickerUtil } from './folder-picker';
+
+describe('FolderPickerUtil', () => {
+    it('goes up to the root and no further', () => {
+        expect(FolderPickerUtil.parent('/a/b')).toBe('/a');
+        expect(FolderPickerUtil.parent('/a/b/')).toBe('/a');
+        expect(FolderPickerUtil.parent('/a')).toBe('/');
+        expect(FolderPickerUtil.parent('/')).toBeUndefined();
+        expect(FolderPickerUtil.parent('C:\\a\\b')).toBe('C:\\a');
+        expect(FolderPickerUtil.parent('C:\\a')).toBe('C:\\');
+        expect(FolderPickerUtil.parent('C:\\')).toBeUndefined();
+    });
+
+    it('goes down with the separator of the path', () => {
+        expect(FolderPickerUtil.child('/a', 'b')).toBe('/a/b');
+        expect(FolderPickerUtil.child('/', 'b')).toBe('/b');
+        expect(FolderPickerUtil.child('C:\\a', 'b')).toBe('C:\\a\\b');
+    });
+
+    it('offers folders only, without the hidden ones', () => {
+        expect(
+            FolderPickerUtil.folders([
+                { name: 'src', path: 'src', kind: 'directory' },
+                { name: '.cache', path: '.cache', kind: 'directory' },
+                { name: 'README.md', path: 'README.md', kind: 'file' },
+            ]).map(entry => entry.name),
+        ).toEqual(['src']);
+    });
+});

package/src/browser/components/folder-picker.tsx

@@ -0,0 +1,177 @@
+import type { TaDirEntry } from '@celljs/ta-protocol';
+import { ChevronDown, ChevronRight, CornerLeftUp, Folder, X } from 'lucide-react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { useT } from '../i18n/use-t';
+import { MessageUtil } from '../util/message';
+import { Icon, IconButton } from './icon';
+
+export namespace FolderPickerUtil {
+    /** The directory above `path`; undefined at a root (`/`, `C:\\`). */
+    export function parent(path: string): string | undefined {
+        const trimmed = path.replace(/[\\/]+$/, '');
+        const at = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'));
+        if (at < 0) {
+            return undefined;
+        }
+        const head = trimmed.slice(0, at);
+        return head === '' || /^[A-Za-z]:$/.test(head) ? head + trimmed[at] : head;
+    }
+
+    export function child(path: string, name: string): string {
+        const separator = path.includes('/') || !path.includes('\\') ? '/' : '\\';
+        return path.endsWith(separator) ? path + name : path + separator + name;
+    }
+
+    /** The folders to offer: no files, no hidden ones (a path typed in still opens those). */
+    export function folders(entries: TaDirEntry[]): TaDirEntry[] {
+        return entries.filter(entry => entry.kind === 'directory' && !entry.name.startsWith('.'));
+    }
+}
+
+export interface FolderPickerProps {
+    /** The entries of a directory of the server. */
+    list(directory: string): Promise<TaDirEntry[]>;
+    /** Where it opens. */
+    initial: string;
+    onPick(path: string): Promise<void>;
+    onClose(): void;
+}
+
+/** Picks a directory of the server, folder by folder or by a path typed in, to open a conversation there. */
+export function FolderPicker({ list, initial, onPick, onClose }: FolderPickerProps): React.ReactElement {
+    const t = useT();
+    const [path, setPath] = React.useState(initial);
+    const [input, setInput] = React.useState(initial);
+    const [folders, setFolders] = React.useState<TaDirEntry[]>();
+    const [failed, setFailed] = React.useState<string>();
+    const [busy, setBusy] = React.useState(false);
+    /** A directory is being read: picking now would take the one before. */
+    const [loading, setLoading] = React.useState(true);
+    const latest = React.useRef(0);
+    const go = React.useCallback(
+        (next: string) => {
+            const request = ++latest.current;
+            setFailed(undefined);
+            setLoading(true);
+            list(next)
+                .then(
+                    entries => {
+                        if (request === latest.current) {
+                            setPath(next);
+                            setInput(next);
+                            setFolders(FolderPickerUtil.folders(entries));
+                        }
+                    },
+                    () => request === latest.current && setFailed(next),
+                )
+                .finally(() => request === latest.current && setLoading(false));
+        },
+        [list],
+    );
+    React.useEffect(() => go(initial), [go, initial]);
+    const up = FolderPickerUtil.parent(path);
+    const pick = () => {
+        setBusy(true);
+        onPick(path).finally(() => setBusy(false));
+    };
+    return createPortal(
+        <div className="ta-modal-scrim">
+            <button type="button" className="ta-overlay-close" aria-label={t('ta.close')} tabIndex={-1} onClick={onClose} />
+            <div
+                className="ta-modal ta-folder"
+                role="dialog"
+                aria-modal="true"
+                aria-label={t('ta.folder.title')}
+                onKeyDown={event => event.key === 'Escape' && onClose()}
+            >
+                <div className="ta-modal-head">
+                    <span className="ta-modal-title">{t('ta.folder.title')}</span>
+                    <IconButton icon={X} label={t('ta.close')} onClick={onClose} />
+                </div>
+                <form
+                    className="ta-folder-bar"
+                    onSubmit={event => {
+                        event.preventDefault();
+                        if (input.trim()) {
+                            go(input.trim());
+                        }
+                    }}
+                >
+                    <IconButton icon={CornerLeftUp} label={t('ta.folder.up')} disabled={!up} onClick={() => up && go(up)} />
+                    <label className="ta-field ta-field-small">
+                        <input
+                            autoFocus
+                            spellCheck={false}
+                            value={input}
+                            aria-label={t('ta.folder.path')}
+                            title={t('ta.folder.path')}
+                            onChange={event => setInput(event.target.value)}
+                        />
+                    </label>
+                </form>
+                <ul className="ta-folder-list">
+                    {folders === undefined && !failed && (
+                        <li className="ta-folder-note">
+                            <span className="ta-spinner" />
+                        </li>
+                    )}
+                    {folders?.map(folder => (
+                        <li key={folder.name}>
+                            <button type="button" className="ta-folder-item" onClick={() => go(FolderPickerUtil.child(path, folder.name))}>
+                                <Icon icon={Folder} size={16} />
+                                <span className="ta-folder-name">{folder.name}</span>
+                                <Icon icon={ChevronRight} size={14} className="ta-folder-chevron" />
+                            </button>
+                        </li>
+                    ))}
+                    {folders?.length === 0 && <li className="ta-folder-note">{t('ta.folder.empty')}</li>}
+                </ul>
+                {failed && <div className="ta-folder-failed">{t('ta.folder.failed', { path: failed })}</div>}
+                <div className="ta-dialog-actions">
+                    <button type="button" className="ta-button" onClick={onClose}>
+                        {t('ta.cancel')}
+                    </button>
+                    <button type="button" className="ta-button ta-primary" disabled={busy || loading || folders === undefined} onClick={pick}>
+                        {t('ta.folder.open')}
+                    </button>
+                </div>
+            </div>
+        </div>,
+        document.body,
+    );
+}
+
+export interface DirectoryButtonProps {
+    /** The directory now. */
+    cwd: string;
+    /** The entries of a directory of the server, the same function from one render to the next. */
+    list(directory: string): Promise<TaDirEntry[]>;
+    onPick(cwd: string): void | Promise<void>;
+}
+
+/** The directory a new conversation will work in, beside the + of its message box: a click picks another. */
+export function DirectoryButton({ cwd, list, onPick }: DirectoryButtonProps): React.ReactElement {
+    const t = useT();
+    const [picking, setPicking] = React.useState(false);
+    return (
+        <>
+            <button type="button" className="ta-cwd-chip" title={t('ta.chat.cwdTitle', { path: cwd })} onClick={() => setPicking(true)}>
+                <Icon icon={Folder} size={14} />
+                <span className="ta-ellipsis">{MessageUtil.basename(cwd) || cwd}</span>
+                <Icon icon={ChevronDown} size={13} />
+            </button>
+            {picking && (
+                <FolderPicker
+                    list={list}
+                    initial={cwd}
+                    onClose={() => setPicking(false)}
+                    onPick={async path => {
+                        await onPick(path);
+                        setPicking(false);
+                    }}
+                />
+            )}
+        </>
+    );
+}