@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/components/composer.tsx

@@ -0,0 +1,170 @@
+import type { SessionStore } from '@celljs/ta-client';
+import type { TaCommandResult, TaServer, TaWorkspaceServer } from '@celljs/ta-protocol';
+import { Undo2 } from 'lucide-react';
+import * as React from 'react';
+import { useT } from '../i18n/use-t';
+import { type ComposerImage, type ComposerQueue, ComposerUtil } from '../util/composer';
+import { type ComposerAction, ComposerBox, type ComposerBoxHandle, type ComposerMentions } from './composer-box';
+import { Icon } from './icon';
+
+type Command = TaCommandResult<'get_commands'>['commands'][number];
+
+const FILE_LIMIT = 20;
+const FILE_DELAY_MS = 120;
+const EMPTY_QUEUE: ComposerQueue = { steering: [], followUp: [] };
+
+export interface ComposerProps {
+    /** The session it sends to; none for a new conversation, which sends with `onSubmit`. */
+    store?: SessionStore;
+    onSubmit?(message: string, images?: ComposerImage[]): Promise<unknown>;
+    /** Controls beside the +, as the directory of a new conversation. */
+    beside?: React.ReactNode;
+    /** Controls on the right, before the send button. */
+    after?: React.ReactNode;
+    server: TaServer;
+    /** Where `@` looks for files. */
+    workspace: Pick<TaWorkspaceServer, 'findFiles'>;
+    working: boolean;
+    commands: Command[];
+    /** The directory of the session: where `@` looks for files. */
+    cwd?: string;
+    /** The settings of the conversation, in the + menu. */
+    actions?: ComposerAction[][];
+    /** Instead of the hint of a session. */
+    placeholder?: string;
+    /** Above the box, before what waits to be sent. */
+    above?: React.ReactNode;
+    /** A message goes out (as the double stops reading aloud). */
+    onSending?(): void;
+    onError(error: unknown): void;
+}
+
+/** The files for an `@` being typed; a server without file search answers with an error, and the menu says so. */
+function useFiles(workspace: Pick<TaWorkspaceServer, 'findFiles'>, cwd: string | undefined, query: string | undefined): ComposerMentions | undefined {
+    const t = useT();
+    const [matches, setMatches] = React.useState<{ query: string; paths: string[]; failed?: boolean }>();
+    React.useEffect(() => {
+        if (query === undefined) {
+            return;
+        }
+        let current = true;
+        const timer = setTimeout(() => {
+            workspace.findFiles(query, cwd, FILE_LIMIT).then(
+                paths => current && setMatches({ query, paths }),
+                () => current && setMatches({ query, paths: [], failed: true }),
+            );
+        }, FILE_DELAY_MS);
+        return () => {
+            current = false;
+            clearTimeout(timer);
+        };
+    }, [workspace, cwd, query]);
+    if (query === undefined || !matches) {
+        return undefined;
+    }
+    const note = ComposerUtil.fileNote(matches);
+    return {
+        items: matches.paths.map(path => ({ key: path, label: path })),
+        note: note === 'unavailable' ? t('ta.composer.filesUnavailable') : note === 'none' ? t('ta.composer.noFiles') : undefined,
+    };
+}
+
+/** The messages waiting for the agent, from pi's `queue_update`. */
+function useQueue(store: SessionStore | undefined, working: boolean): [ComposerQueue, (queue: ComposerQueue) => void] {
+    const [queue, setQueue] = React.useState(EMPTY_QUEUE);
+    React.useEffect(
+        () =>
+            store?.onEvent(event => {
+                if (event.type === 'queue_update') {
+                    setQueue({ steering: [...event.steering], followUp: [...event.followUp] });
+                }
+            }),
+        [store],
+    );
+    React.useEffect(() => {
+        if (!working) {
+            setQueue(EMPTY_QUEUE);
+        }
+    }, [working]);
+    return [queue, setQueue];
+}
+
+/**
+ * The message box of a session, with the keys of pi's terminal: while the agent works, Enter steers it
+ * and Alt+Enter queues a follow-up; Escape stops it.
+ */
+export const Composer = React.forwardRef<ComposerBoxHandle, ComposerProps>(function Composer(props, ref) {
+    const { store, onSubmit, beside, after, server, workspace, working, commands, cwd, actions, placeholder, above, onSending, onError } = props;
+    const t = useT();
+    const [queue, setQueue] = useQueue(store, working);
+    const [query, setQuery] = React.useState<string>();
+    const files = useFiles(workspace, cwd, query);
+    const box = React.useRef<ComposerBoxHandle>(null);
+    React.useImperativeHandle(ref, () => ({ text: () => box.current?.text() ?? '', setText: text => box.current?.setText(text) }));
+
+    const stop = () => store && server.abort(store.sessionId).catch(onError);
+
+    const send = (message: string, images: ComposerImage[], followUp: boolean) => {
+        onSending?.();
+        const prompt = { clientMessageId: crypto.randomUUID(), message, images: images.length ? images : undefined };
+        if (!store) {
+            return onSubmit?.(message, prompt.images) ?? Promise.resolve();
+        }
+        return !working
+            ? store.prompt(message, { images: prompt.images })
+            : followUp
+              ? server.followUp(store.sessionId, prompt)
+              : server.steer(store.sessionId, prompt);
+    };
+
+    const takeBack = () => {
+        if (!store) {
+            return;
+        }
+        server.clearQueue(store.sessionId).then(taken => {
+            setQueue(EMPTY_QUEUE);
+            box.current?.setText(ComposerUtil.restore(taken, box.current.text()));
+        }, onError);
+    };
+
+    const waiting = ComposerUtil.queued(queue);
+    return (
+        <ComposerBox
+            ref={box}
+            placeholder={placeholder ?? t(working ? 'ta.composer.steerPlaceholder' : 'ta.composer.placeholder')}
+            working={working}
+            onStop={stop}
+            onSend={send}
+            commands={commands}
+            onMentionQuery={setQuery}
+            mentions={files}
+            mentionLabel={t('ta.composer.mentionFile')}
+            images
+            actions={actions}
+            beside={beside}
+            after={after}
+            autoFocus
+            onError={onError}
+            above={
+                <>
+                    {above}
+                    {waiting.length > 0 && (
+                        <div className="ta-queue" aria-live="polite">
+                            {waiting.map((entry, index) => (
+                                <div key={index} className="ta-queue-row">
+                                    <span className="ta-queue-kind">
+                                        {t(entry.kind === 'steering' ? 'ta.composer.queue.steering' : 'ta.composer.queue.followUp')}
+                                    </span>
+                                    <span className="ta-ellipsis">{entry.text}</span>
+                                </div>
+                            ))}
+                            <button type="button" className="ta-link ta-queue-back" onClick={takeBack} title={t('ta.composer.queue.takeBackTitle')}>
+                                <Icon icon={Undo2} size={13} /> {t('ta.composer.queue.takeBack')}
+                            </button>
+                        </div>
+                    )}
+                </>
+            }
+        />
+    );
+});

package/src/browser/components/connection-bar.tsx

@@ -0,0 +1,85 @@
+import { CircleCheck, RotateCw, WifiOff } from 'lucide-react';
+import * as React from 'react';
+import { useWorkbench } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { Icon } from './icon';
+
+/** A drop shorter than this, which the connection mends by itself, shows nothing. */
+const GRACE_MS = 1000;
+/** How long "connected again" stays. */
+const BACK_MS = 2000;
+
+/** The seconds until `at`, counted down once a second; `undefined` without `at`. */
+function useSecondsUntil(at: number | undefined): number | undefined {
+    const [now, setNow] = React.useState(Date.now);
+    React.useEffect(() => {
+        if (at === undefined) {
+            return;
+        }
+        setNow(Date.now());
+        const timer = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(timer);
+    }, [at]);
+    return at === undefined ? undefined : Math.max(0, Math.ceil((at - now) / 1000));
+}
+
+type Shown = 'none' | 'offline' | 'back';
+
+/** Offline after the grace, and "back" for a moment after it was shown offline. */
+function useShown(offline: boolean): Shown {
+    const [shown, setShown] = React.useState<Shown>('none');
+    const was = React.useRef(false);
+    React.useEffect(() => {
+        if (offline) {
+            const timer = setTimeout(() => {
+                was.current = true;
+                setShown('offline');
+            }, GRACE_MS);
+            return () => clearTimeout(timer);
+        }
+        if (!was.current) {
+            setShown('none');
+            return;
+        }
+        was.current = false;
+        setShown('back');
+        const timer = setTimeout(() => setShown('none'), BACK_MS);
+        return () => clearTimeout(timer);
+    }, [offline]);
+    return shown;
+}
+
+/**
+ * The state of the connection to ta serve, over the top of the main area while it is not online: why,
+ * when the next try is, and a button to try now. Nothing while all is well.
+ */
+export function ConnectionBar() {
+    const t = useT();
+    const [{ status, error, retryAt }, workbench] = useWorkbench();
+    const shown = useShown(status === 'offline');
+    const seconds = useSecondsUntil(shown === 'offline' ? retryAt : undefined);
+    if (shown === 'none') {
+        return null;
+    }
+    if (shown === 'back') {
+        return (
+            <div className="ta-connection ta-connection-back" role="status">
+                <Icon icon={CircleCheck} size={15} className="ta-level-icon" />
+                <span>{t('ta.connection.back')}</span>
+            </div>
+        );
+    }
+    const waiting = seconds !== undefined && seconds > 0;
+    return (
+        <div className="ta-connection" role="status">
+            <Icon icon={WifiOff} size={15} className="ta-level-icon" />
+            <span className="ta-connection-text">{error === 'unreachable' ? t('ta.unreachable') : t('ta.connection.lost')}</span>
+            <span className="ta-connection-when">{waiting ? t('ta.connection.retryIn', { seconds }) : t('ta.connection.retrying')}</span>
+            {waiting && (
+                <button type="button" className="ta-connection-retry" onClick={() => workbench.reconnect()}>
+                    <Icon icon={RotateCw} size={13} /> {t('ta.connection.retryNow')}
+                </button>
+            )}
+        </div>
+    );
+}

package/src/browser/components/context-menu.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+
+/** An entry of a context menu; `'-'` is a line between groups. */
+export type ContextMenuItem = '-' | { label: string; run(): void; disabled?: boolean };
+
+interface MenuState {
+    x: number;
+    y: number;
+    items: ContextMenuItem[];
+}
+
+/**
+ * A context menu at the pointer, as a browser's tabs have: arrows move, Enter runs, Escape or a click
+ * elsewhere closes. `open` takes the event of a right click (or of the menu key) and the entries.
+ */
+export function useContextMenu(): [React.ReactNode, (event: React.MouseEvent, items: ContextMenuItem[]) => void] {
+    const [menu, setMenu] = React.useState<MenuState>();
+    const open = React.useCallback((event: React.MouseEvent, items: ContextMenuItem[]) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const box = (event.currentTarget as HTMLElement).getBoundingClientRect();
+        // The menu key gives no pointer: under the element.
+        const pointer = event.clientX || event.clientY;
+        setMenu({ x: pointer ? event.clientX : box.left + 8, y: pointer ? event.clientY : box.bottom, items });
+    }, []);
+    const close = React.useCallback(() => setMenu(undefined), []);
+    const element = menu ? <ContextMenu {...menu} onClose={close} /> : null;
+    return [element, open];
+}
+
+function ContextMenu({ x, y, items, onClose }: MenuState & { onClose(): void }) {
+    const root = React.useRef<HTMLDivElement>(null);
+    const [place, setPlace] = React.useState({ left: x, top: y, ready: false });
+    React.useLayoutEffect(() => {
+        const box = root.current?.getBoundingClientRect();
+        if (box) {
+            const left = Math.max(4, Math.min(x, window.innerWidth - box.width - 4));
+            const top = y + box.height > window.innerHeight - 4 ? Math.max(4, y - box.height) : y;
+            setPlace({ left, top, ready: true });
+        }
+        root.current?.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();
+    }, [x, y]);
+    React.useEffect(() => {
+        const onPointer = (event: Event) => {
+            if (!root.current?.contains(event.target as Node)) {
+                onClose();
+            }
+        };
+        const onKey = (event: KeyboardEvent) => event.key === 'Escape' && onClose();
+        document.addEventListener('pointerdown', onPointer, true);
+        document.addEventListener('keydown', onKey);
+        window.addEventListener('blur', onClose);
+        window.addEventListener('resize', onClose);
+        return () => {
+            document.removeEventListener('pointerdown', onPointer, true);
+            document.removeEventListener('keydown', onKey);
+            window.removeEventListener('blur', onClose);
+            window.removeEventListener('resize', onClose);
+        };
+    }, [onClose]);
+    const onKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+            return;
+        }
+        event.preventDefault();
+        const buttons = [...(root.current?.querySelectorAll<HTMLButtonElement>('button:not(:disabled)') ?? [])];
+        const at = buttons.indexOf(document.activeElement as HTMLButtonElement);
+        buttons[(at + (event.key === 'ArrowDown' ? 1 : buttons.length - 1)) % buttons.length]?.focus();
+    };
+    return (
+        <div
+            ref={root}
+            className="ta-context-menu"
+            role="menu"
+            style={{ left: place.left, top: place.top, visibility: place.ready ? 'visible' : 'hidden' }}
+            onKeyDown={onKeyDown}
+            onContextMenu={event => event.preventDefault()}
+        >
+            {items.map((item, index) =>
+                item === '-' ? (
+                    <hr key={`-${index}`} className="ta-context-menu-line" />
+                ) : (
+                    <button
+                        key={item.label}
+                        type="button"
+                        role="menuitem"
+                        className="ta-context-menu-item"
+                        disabled={item.disabled}
+                        onClick={() => {
+                            onClose();
+                            item.run();
+                        }}
+                    >
+                        {item.label}
+                    </button>
+                ),
+            )}
+        </div>
+    );
+}

package/src/browser/components/conversation-scroll.ts

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { FrameUtil } from '../util/frame';
+
+/** A message of the user in the thread: where the view goes when one is sent. */
+export const ASK_CLASS = 'ta-thread-ask';
+
+function calm(): boolean {
+    return typeof document !== 'undefined' && document.documentElement.hasAttribute('data-reduce-motion');
+}
+
+/**
+ * The scrolling of a conversation, whose thread is the first child of the element of the returned ref.
+ * A message the user sends goes to the top of the view, and the answer comes in under it: the thread
+ * keeps the room for that until the answer fills it. Past that, the view follows what comes in while it
+ * is at the bottom, after layout, on a change of the size of the thread rather than of the state.
+ * Opened, and when messages of the user go (a rewind), the view goes to the bottom.
+ *
+ * `asked`: how many messages of the user there are; the thread marks them with ASK_CLASS.
+ */
+export function useConversationScroll(asked: number): React.RefObject<HTMLDivElement | null> {
+    const ref = React.useRef<HTMLDivElement>(null);
+    const stuck = React.useRef(true);
+    // Where a smooth scroll to a message goes: the view need not follow a bottom it is on its way to.
+    const heading = React.useRef<number | undefined>(undefined);
+    // The message sent last, kept at the top until the user scrolls: rows above it may still change their height.
+    const anchored = React.useRef<HTMLElement | undefined>(undefined);
+    const before = React.useRef<number | undefined>(undefined);
+
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        const onScroll = () => {
+            if (heading.current === undefined) {
+                stuck.current = FrameUtil.atBottom(element);
+            } else if (Math.abs(element.scrollTop - heading.current) < 1) {
+                // There: from now on the view follows the answer as it grows past the bottom.
+                heading.current = undefined;
+                stuck.current = true;
+            }
+        };
+        // The user scrolls: a smooth scroll on its way stops, and where the view is says whether it follows.
+        const onInput = () => {
+            heading.current = undefined;
+            anchored.current = undefined;
+        };
+        // A smooth scroll that ended short of where it went (the page moved under it) counts as there.
+        const onScrollEnd = () => {
+            if (heading.current !== undefined) {
+                heading.current = undefined;
+                stuck.current = true;
+            }
+        };
+        const inputs = ['wheel', 'touchstart', 'pointerdown', 'keydown'] as const;
+        element.addEventListener('scroll', onScroll, { passive: true });
+        element.addEventListener('scrollend', onScrollEnd);
+        for (const input of inputs) {
+            element.addEventListener(input, onInput, { passive: true });
+        }
+        const content = element.firstElementChild;
+        const observer =
+            content && typeof ResizeObserver !== 'undefined'
+                ? new ResizeObserver(() => {
+                      const message = anchored.current;
+                      if (message && content instanceof HTMLElement) {
+                          const { top, minHeight } = FrameUtil.anchor(message.offsetTop, element.clientHeight);
+                          content.style.minHeight = `${minHeight}px`;
+                          if (heading.current !== undefined && Math.abs(top - heading.current) >= 1) {
+                              heading.current = top;
+                              element.scrollTo({ top, behavior: calm() ? 'auto' : 'smooth' });
+                              return;
+                          }
+                      }
+                      const bottom = element.scrollHeight - element.clientHeight;
+                      if (stuck.current && heading.current === undefined && bottom - element.scrollTop >= 1) {
+                          element.scrollTo({ top: bottom });
+                      }
+                  })
+                : undefined;
+        if (content) {
+            observer?.observe(content);
+        }
+        return () => {
+            element.removeEventListener('scroll', onScroll);
+            element.removeEventListener('scrollend', onScrollEnd);
+            for (const input of inputs) {
+                element.removeEventListener(input, onInput);
+            }
+            observer?.disconnect();
+        };
+    }, []);
+
+    React.useLayoutEffect(() => {
+        const element = ref.current;
+        const content = element?.firstElementChild as HTMLElement | null | undefined;
+        // One more: sent now. More at once is the conversation loaded again, which opens at its bottom.
+        const sent = before.current !== undefined && asked === before.current + 1;
+        before.current = asked;
+        if (!element || !content) {
+            return;
+        }
+        const asks = sent ? content.getElementsByClassName(ASK_CLASS) : undefined;
+        const message = asks?.[asks.length - 1] as HTMLElement | undefined;
+        anchored.current = message;
+        if (!message) {
+            content.style.minHeight = '';
+            heading.current = undefined;
+            stuck.current = true;
+            element.scrollTo({ top: element.scrollHeight });
+            return;
+        }
+        // offsetTop: from the thread, which is positioned; the transform of the message coming in does not count.
+        const { top, minHeight } = FrameUtil.anchor(message.offsetTop, element.clientHeight);
+        content.style.minHeight = `${minHeight}px`;
+        stuck.current = false;
+        if (Math.abs(element.scrollTop - top) < 1) {
+            stuck.current = true;
+            return;
+        }
+        heading.current = top;
+        element.scrollTo({ top, behavior: calm() ? 'auto' : 'smooth' });
+    }, [asked]);
+
+    return ref;
+}

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

@@ -0,0 +1,82 @@
+import type { RpcExtensionUIRequest, RpcExtensionUIResponse } from '@celljs/ta-protocol';
+import * as React from 'react';
+import { useT } from '../i18n/use-t';
+
+type Respond = (response: RpcExtensionUIResponse) => void;
+
+/** The dialog an extension opened, such as the permission gate's question; one at a time, oldest first. */
+export function DialogView({ request, respond }: { request: RpcExtensionUIRequest; respond: Respond }) {
+    const t = useT();
+    const [value, setValue] = React.useState(() => ('prefill' in request ? (request.prefill ?? '') : ''));
+    const cancel = () => respond({ type: 'extension_ui_response', id: request.id, cancelled: true });
+    const answer = (response: Omit<RpcExtensionUIResponse, 'type' | 'id'>) =>
+        respond({ type: 'extension_ui_response', id: request.id, ...response } as RpcExtensionUIResponse);
+    let body: React.ReactNode = null;
+    switch (request.method) {
+        case 'confirm':
+            body = (
+                <>
+                    <p className="ta-dialog-message">{request.message}</p>
+                    <div className="ta-dialog-actions">
+                        <button type="button" className="ta-button" onClick={() => answer({ confirmed: false })}>
+                            {t('ta.no')}
+                        </button>
+                        <button type="button" className="ta-button ta-primary" autoFocus onClick={() => answer({ confirmed: true })}>
+                            {t('ta.yes')}
+                        </button>
+                    </div>
+                </>
+            );
+            break;
+        case 'select':
+            body = (
+                <div className="ta-dialog-options">
+                    {request.options.map((option, index) => (
+                        <button key={option} type="button" className="ta-option" autoFocus={index === 0} onClick={() => answer({ value: option })}>
+                            {option}
+                        </button>
+                    ))}
+                </div>
+            );
+            break;
+        case 'input':
+        case 'editor': {
+            const submit = (event: React.FormEvent) => {
+                event.preventDefault();
+                answer({ value });
+            };
+            body = (
+                <form onSubmit={submit}>
+                    {request.method === 'input' ? (
+                        <input
+                            className="ta-input"
+                            autoFocus
+                            value={value}
+                            placeholder={request.placeholder}
+                            onChange={event => setValue(event.target.value)}
+                        />
+                    ) : (
+                        <textarea className="ta-input ta-editor" autoFocus value={value} onChange={event => setValue(event.target.value)} />
+                    )}
+                    <div className="ta-dialog-actions">
+                        <button type="button" className="ta-button" onClick={cancel}>
+                            {t('ta.cancel')}
+                        </button>
+                        <button type="submit" className="ta-button ta-primary">
+                            {t('ta.ok')}
+                        </button>
+                    </div>
+                </form>
+            );
+            break;
+        }
+        default:
+            return null;
+    }
+    return (
+        <div className="ta-dialog ta-glass" role="dialog" aria-label={request.title} onKeyDown={event => event.key === 'Escape' && cancel()}>
+            <div className="ta-dialog-title">{request.title}</div>
+            {body}
+        </div>
+    );
+}