@celljs/ta-web 0.0.0-stage → 4.6.1

package/src/browser/components/composer-box.tsx

@@ -0,0 +1,475 @@
+import { ArrowUp, AtSign, Check, ChevronLeft, ChevronRight, ImagePlus, Plus, Slash, Square, X } from 'lucide-react';
+import * as React from 'react';
+import { useT } from '../i18n/use-t';
+import { type ComposerAttachment, type ComposerImage, ComposerUtil, IMAGE_TYPES } from '../util/composer';
+import { ComposerMenu, type ComposerMenuItem } from './composer-menu';
+import { Icon, IconButton } from './icon';
+
+/** An entry of the + menu: an action, or a list to pick one of (a model, a level). */
+export interface ComposerAction {
+    key: string;
+    label: string;
+    /** On the left: an icon of 16 pixels, or an avatar. */
+    icon?: React.ReactNode;
+    /** After the label, quieter: the value now of a list, or what the entry is. */
+    detail?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    /** A list to pick from, which the menu shows in its place. */
+    items?: ComposerAction[];
+    /** Text the entry puts where the caret is, as `@name `. */
+    insert?: string;
+    run?(): void;
+}
+
+/** What `@` lists for what was typed after it, or why it lists nothing. */
+export interface ComposerMentions {
+    items: ComposerMenuItem[];
+    note?: string;
+}
+
+export interface ComposerBoxHandle {
+    text(): string;
+    setText(text: string): void;
+}
+
+export interface ComposerBoxProps {
+    placeholder: string;
+    /** Something runs: with nothing typed, the button stops it. */
+    working?: boolean;
+    onStop?(): void;
+    /** Sends; when it fails, what was sent comes back into the box. `followUp`: Alt+Enter. */
+    onSend(message: string, images: ComposerImage[], followUp: boolean): Promise<unknown>;
+    /** What `/` at the start lists. */
+    commands?: { name: string; description?: string }[];
+    /** What is typed after an `@`, or `undefined` when there is none: the owner looks for `mentions`. Without it, `@` lists nothing. */
+    onMentionQuery?(query: string | undefined): void;
+    /** What `@` lists for the query last given. */
+    mentions?: ComposerMentions;
+    /** The + menu entry that starts an `@`; none without it. */
+    mentionLabel?: string;
+    /** Images can be pasted, dropped and picked. */
+    images?: boolean;
+    /** More sections of the + menu, after that of the box, each set apart by a line. */
+    actions?: ComposerAction[][];
+    /** Above the box: what waits to be sent. */
+    above?: React.ReactNode;
+    /** Controls beside the +, as the directory of a new conversation. */
+    beside?: React.ReactNode;
+    /** Controls on the right, before the send button, as the microphone of the double. */
+    after?: React.ReactNode;
+    autoFocus?: boolean;
+    onError(error: unknown): void;
+}
+
+function readImage(file: File): Promise<ComposerImage | undefined> {
+    return new Promise(resolve => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(ComposerUtil.image(String(reader.result)));
+        reader.onerror = () => resolve(undefined);
+        reader.readAsDataURL(file);
+    });
+}
+
+/**
+ * The images to send, each shown at once from its file while it is read: a placeholder that shimmers until
+ * the thumbnail paints, and a spinner until it can be sent.
+ */
+export function Attachments({ attachments, onRemove }: { attachments: ComposerAttachment[]; onRemove(id: string): void }) {
+    const t = useT();
+    return (
+        <div className="ta-attachments">
+            {attachments.map(attachment => (
+                <div key={attachment.id} className={`ta-attachment ${attachment.image ? '' : 'ta-attachment-loading'}`} aria-busy={!attachment.image}>
+                    {attachment.preview ? <img className="ta-thumb" src={attachment.preview} alt="" decoding="async" /> : <div className="ta-thumb" />}
+                    {!attachment.image && (
+                        <span className="ta-attachment-spinner" role="status" aria-label={t('ta.composer.imageLoading')}>
+                            <span className="ta-spinner" />
+                        </span>
+                    )}
+                    <button
+                        type="button"
+                        className="ta-attachment-remove"
+                        aria-label={t('ta.composer.removeImage')}
+                        title={t('ta.composer.removeImage')}
+                        onClick={() => onRemove(attachment.id)}
+                    >
+                        <Icon icon={X} size={12} />
+                    </button>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+/** The + on the left of the box: what is not typing, in one place. A list opens in place of the menu. */
+function PlusMenu({ sections, onClose }: { sections: ComposerAction[][]; onClose(): void }) {
+    const [open, setOpen] = React.useState<ComposerAction>();
+    const shown = open?.items ? [open.items] : sections;
+    const pick = (action: ComposerAction) => {
+        if (action.items) {
+            setOpen(action);
+            return;
+        }
+        onClose();
+        action.run?.();
+    };
+    return (
+        <div className="ta-plus-menu" role="menu" aria-label={open?.label}>
+            {open && (
+                <button type="button" className="ta-plus-back" onClick={() => setOpen(undefined)}>
+                    <Icon icon={ChevronLeft} size={15} />
+                    <span>{open.label}</span>
+                </button>
+            )}
+            <div className="ta-plus-items">
+                {shown.map((section, index) => (
+                    <React.Fragment key={index}>
+                        {index > 0 && <hr className="ta-plus-line" />}
+                        {section.map(action => (
+                            <button
+                                key={action.key}
+                                type="button"
+                                role="menuitem"
+                                className="ta-plus-item"
+                                disabled={action.disabled}
+                                onClick={() => pick(action)}
+                            >
+                                <span className="ta-plus-icon">{action.icon ?? (action.checked ? <Icon icon={Check} size={15} /> : null)}</span>
+                                <span className="ta-plus-label">{action.label}</span>
+                                {action.detail && <span className="ta-plus-detail">{action.detail}</span>}
+                                {action.items && <Icon icon={ChevronRight} size={14} className="ta-plus-chevron" />}
+                            </button>
+                        ))}
+                    </React.Fragment>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+/**
+ * The message box of every conversation: Enter sends, Shift+Enter is a new line, Alt+Enter a follow-up;
+ * `/` lists commands, `@` the `mentions` its owner finds; images are pasted, dropped or picked. The rest (images,
+ * mentions, commands, the settings of the conversation) is behind the + on its left.
+ */
+export const ComposerBox = React.forwardRef<ComposerBoxHandle, ComposerBoxProps>(function ComposerBox(props, ref) {
+    const {
+        placeholder,
+        working = false,
+        onStop,
+        onSend,
+        commands = [],
+        onMentionQuery,
+        mentions,
+        mentionLabel,
+        images: takesImages,
+        actions = [],
+        above,
+        beside,
+        after,
+        autoFocus,
+        onError,
+    } = props;
+    const t = useT();
+    const [text, setText] = React.useState('');
+    const [caret, setCaret] = React.useState(0);
+    const [attachments, setAttachments] = React.useState<ComposerAttachment[]>([]);
+    const [selected, setSelected] = React.useState(0);
+    const [dismissed, setDismissed] = React.useState<string>();
+    const [dragging, setDragging] = React.useState(false);
+    const [menu, setMenu] = React.useState(false);
+    const input = React.useRef<HTMLTextAreaElement>(null);
+    const picker = React.useRef<HTMLInputElement>(null);
+    const plus = React.useRef<HTMLDivElement>(null);
+    const menuId = React.useId();
+
+    const found = ComposerUtil.trigger(text, caret);
+    const trigger = found && `${found.kind}:${found.start}` !== dismissed ? found : undefined;
+    const query = trigger?.kind === 'file' ? trigger.query : undefined;
+    React.useEffect(() => onMentionQuery?.(query), [onMentionQuery, query]);
+    const items: ComposerMenuItem[] =
+        trigger?.kind === 'command'
+            ? ComposerUtil.commands(commands, trigger.query).map(command => ({ key: command.name, label: `/${command.name}`, detail: command.description }))
+            : trigger?.kind === 'file'
+              ? onMentionQuery
+                  ? (mentions?.items ?? [])
+                  : []
+              : [];
+    const note = trigger?.kind === 'file' && onMentionQuery && !items.length ? mentions?.note : undefined;
+    const sendable = text.trim().length > 0 || attachments.length > 0;
+    const action = ComposerUtil.action(working, sendable);
+    // An image still being read holds the message back, rather than leaving without it.
+    const reading = !ComposerUtil.ready(attachments);
+
+    // Grows with the text, up to a limit; measured again when the text or the width changes (the first
+    // layout of a page can be narrower than the last).
+    const fit = React.useCallback(() => {
+        const element = input.current;
+        if (element) {
+            element.style.height = 'auto';
+            element.style.height = `${Math.min(element.scrollHeight, 240)}px`;
+        }
+    }, []);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the height is measured again whenever the text changes
+    React.useLayoutEffect(fit, [text]);
+    React.useEffect(() => {
+        const element = input.current;
+        if (!element || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        let width = element.clientWidth;
+        const observer = new ResizeObserver(() => {
+            if (element.clientWidth !== width) {
+                width = element.clientWidth;
+                fit();
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [fit]);
+    React.useEffect(() => {
+        if (!menu) {
+            return;
+        }
+        const close = (event: Event) => {
+            if (!plus.current?.contains(event.target as Node)) {
+                setMenu(false);
+            }
+        };
+        const onKey = (event: KeyboardEvent) => event.key === 'Escape' && setMenu(false);
+        document.addEventListener('pointerdown', close);
+        document.addEventListener('keydown', onKey);
+        return () => {
+            document.removeEventListener('pointerdown', close);
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [menu]);
+
+    const edit = (next: string, position: number) => {
+        setText(next);
+        setCaret(position);
+        setSelected(0);
+        setDismissed(undefined);
+        requestAnimationFrame(() => {
+            input.current?.focus();
+            input.current?.setSelectionRange(position, position);
+        });
+    };
+
+    const latest = React.useRef(text);
+    latest.current = text;
+    React.useImperativeHandle(ref, () => ({ text: () => latest.current, setText: next => edit(next, next.length) }));
+
+    const pick = (item: ComposerMenuItem) => {
+        if (!trigger) {
+            return;
+        }
+        const insertion = trigger.kind === 'command' ? item.label : ComposerUtil.reference(item.key);
+        const next = ComposerUtil.replace(text, trigger, insertion);
+        edit(next.text, next.caret);
+    };
+
+    /** A command typed out in full: Enter sends it rather than picking it again. */
+    const typed = (item: ComposerMenuItem | undefined) => trigger?.kind === 'command' && item?.label === text.trim();
+
+    const send = (followUp: boolean) => {
+        const message = text.trim();
+        if ((!message && !attachments.length) || reading) {
+            return;
+        }
+        const attached = attachments;
+        setText('');
+        setCaret(0);
+        setAttachments([]);
+        onSend(message, ComposerUtil.images(attached), followUp).then(
+            () => ComposerUtil.release(attached),
+            error => {
+                setText(message);
+                setAttachments(attached);
+                onError(error);
+            },
+        );
+    };
+
+    const remove = (id: string) => {
+        ComposerUtil.release(attachments.filter(attachment => attachment.id === id));
+        setAttachments(previous => previous.filter(attachment => attachment.id !== id));
+    };
+
+    // The previews of a box that goes away go with it.
+    const shown = React.useRef(attachments);
+    shown.current = attachments;
+    React.useEffect(() => () => ComposerUtil.release(shown.current), []);
+
+    /** Shows each image at once from its file, and reads them all at the same time. */
+    const addFiles = (list: FileList | File[]) => {
+        const added: { attachment: ComposerAttachment; file: File }[] = [];
+        for (const file of Array.from(list)) {
+            const reason = ComposerUtil.rejectImage(file, attachments.length + added.length);
+            if (reason) {
+                onError(new Error(t(`ta.composer.image.${reason}`, { name: file.name })));
+                continue;
+            }
+            added.push({ attachment: { id: crypto.randomUUID(), preview: URL.createObjectURL(file) }, file });
+        }
+        if (!added.length) {
+            return;
+        }
+        setAttachments(previous => [...previous, ...added.map(({ attachment }) => attachment)]);
+        for (const { attachment, file } of added) {
+            void readImage(file).then(image => {
+                if (!image) {
+                    ComposerUtil.release([attachment]);
+                }
+                setAttachments(previous =>
+                    image
+                        ? previous.map(other => (other.id === attachment.id ? { ...other, image } : other))
+                        : previous.filter(other => other.id !== attachment.id),
+                );
+            });
+        }
+    };
+
+    const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        const composing = event.nativeEvent.isComposing || event.keyCode === 229;
+        if (items.length && !composing && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            event.preventDefault();
+            setSelected((selected + (event.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length);
+        } else if (items.length && !composing && (event.key === 'Tab' || (event.key === 'Enter' && !event.shiftKey && !typed(items[selected])))) {
+            event.preventDefault();
+            pick(items[selected] ?? items[0]);
+        } else if (trigger && event.key === 'Escape') {
+            event.preventDefault();
+            setDismissed(`${trigger.kind}:${trigger.start}`);
+        } else if (ComposerUtil.isSend({ key: event.key, shiftKey: event.shiftKey, isComposing: event.nativeEvent.isComposing, keyCode: event.keyCode })) {
+            event.preventDefault();
+            send(event.altKey);
+        } else if (event.key === 'Escape' && working && onStop) {
+            event.preventDefault();
+            onStop();
+        }
+    };
+
+    const onPaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
+        const pasted = takesImages ? Array.from(event.clipboardData.files).filter(file => file.type.startsWith('image/')) : [];
+        if (pasted.length) {
+            event.preventDefault();
+            addFiles(pasted);
+        }
+    };
+
+    const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
+        setDragging(false);
+        if (takesImages && event.dataTransfer.files.length) {
+            event.preventDefault();
+            addFiles(event.dataTransfer.files);
+        }
+    };
+
+    const own: ComposerAction[] = [];
+    if (takesImages) {
+        own.push({ key: 'image', label: t('ta.composer.addImage'), icon: <Icon icon={ImagePlus} size={16} />, run: () => picker.current?.click() });
+    }
+    if (mentionLabel) {
+        own.push({ key: 'mention', label: mentionLabel, icon: <Icon icon={AtSign} size={16} />, run: () => edit(...ComposerUtil.insert(text, caret, '@')) });
+    }
+    if (commands.length) {
+        own.push({
+            key: 'command',
+            label: t('ta.composer.commands'),
+            icon: <Icon icon={Slash} size={16} />,
+            run: () => edit(`/${text.replace(/^\//, '')}`, 1),
+        });
+    }
+    const typing = (action: ComposerAction): ComposerAction =>
+        action.insert === undefined ? action : { ...action, run: () => edit(...ComposerUtil.insert(text, caret, action.insert as string)) };
+    const sections = [own, ...actions.map(section => section.map(typing))].filter(section => section.length > 0);
+
+    return (
+        <div className="ta-console-composer">
+            {(items.length > 0 || note) && <ComposerMenu id={menuId} items={items} selected={selected} note={note} onPick={pick} onHover={setSelected} />}
+            {above}
+            {/* biome-ignore lint/a11y/noStaticElementInteractions: dropping images is a shortcut; the + menu does the same */}
+            <div
+                className={`ta-console-box ${dragging ? 'ta-dragging' : ''}`}
+                onDragOver={event => {
+                    if (takesImages && event.dataTransfer.types.includes('Files')) {
+                        event.preventDefault();
+                        setDragging(true);
+                    }
+                }}
+                onDragLeave={() => setDragging(false)}
+                onDrop={onDrop}
+            >
+                {attachments.length > 0 && <Attachments attachments={attachments} onRemove={remove} />}
+                <div className="ta-console-row">
+                    {sections.length > 0 && (
+                        <div className="ta-plus" ref={plus}>
+                            <IconButton
+                                icon={Plus}
+                                label={t('ta.composer.more')}
+                                className={`ta-attach ta-plus-button ${menu ? 'ta-on' : ''}`}
+                                onClick={() => setMenu(!menu)}
+                            />
+                            {menu && <PlusMenu sections={sections} onClose={() => setMenu(false)} />}
+                        </div>
+                    )}
+                    {beside}
+                    {takesImages && (
+                        <input
+                            ref={picker}
+                            type="file"
+                            accept={IMAGE_TYPES.join(',')}
+                            multiple
+                            hidden
+                            onChange={event => {
+                                if (event.target.files) {
+                                    addFiles(event.target.files);
+                                }
+                                event.target.value = '';
+                            }}
+                        />
+                    )}
+                    <textarea
+                        ref={input}
+                        rows={1}
+                        value={text}
+                        autoFocus={autoFocus}
+                        aria-label={t('ta.composer.label')}
+                        aria-controls={items.length ? menuId : undefined}
+                        aria-activedescendant={items.length ? `${menuId}-${selected}` : undefined}
+                        placeholder={placeholder}
+                        onChange={event => {
+                            setText(event.target.value);
+                            setCaret(event.target.selectionStart);
+                            setSelected(0);
+                        }}
+                        onSelect={event => setCaret(event.currentTarget.selectionStart)}
+                        onKeyDown={onKeyDown}
+                        onPaste={onPaste}
+                    />
+                    {after}
+                    <button
+                        type="button"
+                        className={`ta-send ${action === 'stop' ? 'ta-send-stop' : ''}`}
+                        disabled={action === 'send' && (!sendable || reading)}
+                        title={
+                            action === 'stop'
+                                ? t('ta.composer.stopTitle')
+                                : reading
+                                  ? t('ta.composer.imageLoading')
+                                  : working
+                                    ? t('ta.composer.steerTitle')
+                                    : t('ta.send')
+                        }
+                        aria-label={action === 'stop' ? t('ta.stop') : t('ta.send')}
+                        onClick={() => (action === 'stop' ? onStop?.() : send(false))}
+                    >
+                        <Icon icon={action === 'stop' ? Square : ArrowUp} size={action === 'stop' ? 14 : 18} />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+});

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+export interface ComposerMenuItem {
+    key: string;
+    label: string;
+    detail?: string;
+}
+
+export interface ComposerMenuProps {
+    id: string;
+    items: ComposerMenuItem[];
+    selected: number;
+    /** Instead of the items: why there are none. */
+    note?: string;
+    onPick(item: ComposerMenuItem): void;
+    onHover(index: number): void;
+}
+
+/** The commands or files for what is typed; the keys stay in the message box, which owns the selection. */
+export function ComposerMenu({ id, items, selected, note, onPick, onHover }: ComposerMenuProps) {
+    const list = React.useRef<HTMLDivElement>(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: keeps the selected item in view whenever the selection moves
+    React.useEffect(() => {
+        list.current?.querySelector('.ta-selected')?.scrollIntoView({ block: 'nearest' });
+    }, [selected]);
+    return (
+        <div className={`ta-commands ${items.length ? '' : 'ta-commands-note'}`} id={id} role="listbox" ref={list}>
+            {items.map((item, index) => (
+                <button
+                    key={item.key}
+                    id={`${id}-${index}`}
+                    type="button"
+                    role="option"
+                    aria-selected={index === selected}
+                    tabIndex={-1}
+                    className={`ta-command ${index === selected ? 'ta-selected' : ''}`}
+                    // Keeps the focus in the message box.
+                    onMouseDown={event => event.preventDefault()}
+                    onMouseEnter={() => onHover(index)}
+                    onClick={() => onPick(item)}
+                >
+                    <span className="ta-command-label">{item.label}</span>
+                    {item.detail && <span className="ta-muted">{item.detail}</span>}
+                </button>
+            ))}
+            {!items.length && note && <div className="ta-command-note">{note}</div>}
+        </div>
+    );
+}

package/src/browser/components/composer.spec.tsx

@@ -0,0 +1,130 @@
+import { describe, expect, it } from 'bun:test';
+import type { SessionStore } from '@celljs/ta-client';
+import type { TaServer, TaWorkspaceServer } from '@celljs/ta-protocol';
+import * as React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { ComposerUtil } from '../util/composer';
+import { Composer } from './composer';
+import { Attachments } from './composer-box';
+
+const store = { sessionId: 's1', onEvent: () => () => undefined } as unknown as SessionStore;
+const server = {} as TaServer;
+const workspace = {} as TaWorkspaceServer;
+
+/** React warns that the layout effect (the height of the box) does not run on the server; here it need not. */
+function render(element: React.ReactElement): string {
+    const error = console.error;
+    console.error = () => undefined;
+    try {
+        return renderToStaticMarkup(element);
+    } finally {
+        console.error = error;
+    }
+}
+
+describe('Composer', () => {
+    it('has one button that sends, and stops while the agent works with nothing to send', () => {
+        const idle = render(<Composer store={store} server={server} workspace={workspace} working={false} commands={[]} onError={() => undefined} />);
+        expect(idle).toContain('aria-label="Send"');
+        expect(idle).toContain('disabled=""');
+        expect(idle).toContain('@ for files');
+        const working = render(<Composer store={store} server={server} workspace={workspace} working commands={[]} onError={() => undefined} />);
+        expect(working).toContain('aria-label="Stop"');
+        expect(working).toContain('ta-send-stop');
+        expect(working).not.toContain('aria-label="Send"');
+    });
+
+    it('takes images with a picker that accepts only what pi can send, behind the + on the left', () => {
+        const html = render(<Composer store={store} server={server} workspace={workspace} working={false} commands={[]} onError={() => undefined} />);
+        expect(html).toContain('accept="image/png,image/jpeg,image/gif,image/webp"');
+        expect(html).toContain('aria-label="Add and settings"');
+        // The + comes before the text, the send button after it.
+        expect(html.indexOf('ta-plus-button')).toBeLessThan(html.indexOf('<textarea'));
+        expect(html.indexOf('<textarea')).toBeLessThan(html.indexOf('ta-send'));
+    });
+
+    it('takes the hint, what goes above the box and what goes on its right from its owner, as the double does', () => {
+        const html = render(
+            <Composer
+                store={store}
+                server={server}
+                workspace={workspace}
+                working={false}
+                commands={[]}
+                placeholder="Give Ta something to do"
+                above={<div className="ta-notice-above">waiting</div>}
+                after={<button type="button" className="ta-mic" />}
+                onError={() => undefined}
+            />,
+        );
+        expect(html).toContain('placeholder="Give Ta something to do"');
+        expect(html).not.toContain('@ for files');
+        expect(html.indexOf('ta-notice-above')).toBeLessThan(html.indexOf('<textarea'));
+        // The microphone of the double sits on the right, between the text and the send button.
+        expect(html.indexOf('<textarea')).toBeLessThan(html.indexOf('ta-mic'));
+        expect(html.indexOf('ta-mic')).toBeLessThan(html.indexOf('ta-send'));
+    });
+
+    it('puts what it is given beside the +, in the row of the text, as the directory of a new conversation', () => {
+        const html = render(
+            <Composer
+                server={server}
+                workspace={workspace}
+                working={false}
+                commands={[]}
+                onError={() => undefined}
+                beside={<button type="button" className="ta-cwd-chip" />}
+            />,
+        );
+        expect(html.indexOf('ta-plus-button')).toBeLessThan(html.indexOf('ta-cwd-chip'));
+        expect(html.indexOf('ta-cwd-chip')).toBeLessThan(html.indexOf('<textarea'));
+        expect(html.indexOf('ta-console-row')).toBeLessThan(html.indexOf('ta-cwd-chip'));
+    });
+
+    it('shows an image being read at once, with a spinner until it can be sent', () => {
+        const image = { type: 'image' as const, data: 'AAAA', mimeType: 'image/png' };
+        const html = render(
+            <Attachments
+                attachments={[
+                    { id: 'a', preview: 'blob:a', image },
+                    { id: 'b', preview: 'blob:b' },
+                ]}
+                onRemove={() => undefined}
+            />,
+        );
+        expect(html).toContain('src="blob:a"');
+        expect(html).toContain('src="blob:b"');
+        expect(html.match(/ta-attachment-loading/g)).toHaveLength(1);
+        expect(html.match(/ta-spinner/g)).toHaveLength(1);
+        expect(html).toContain('aria-label="Reading the image…"');
+        expect(html.indexOf('blob:a')).toBeLessThan(html.indexOf('ta-attachment-loading'));
+    });
+
+    it('sends the images once all are read, in their order', () => {
+        const a = { type: 'image' as const, data: 'A', mimeType: 'image/png' };
+        const b = { type: 'image' as const, data: 'B', mimeType: 'image/jpeg' };
+        expect(ComposerUtil.ready([])).toBe(true);
+        expect(ComposerUtil.ready([{ id: '1', image: a }, { id: '2' }])).toBe(false);
+        expect(
+            ComposerUtil.images([
+                { id: '1', image: a },
+                { id: '2', image: b },
+            ]),
+        ).toEqual([a, b]);
+        const revoked: string[] = [];
+        const revoke = URL.revokeObjectURL;
+        URL.revokeObjectURL = url => revoked.push(url);
+        try {
+            ComposerUtil.release([{ id: '1', preview: 'blob:1' }, { id: '2' }]);
+        } finally {
+            URL.revokeObjectURL = revoke;
+        }
+        expect(revoked).toEqual(['blob:1']);
+    });
+
+    it('puts text where the caret is, after a space when it would join a word', () => {
+        expect(ComposerUtil.insert('', 0, '@')).toEqual(['@', 1]);
+        expect(ComposerUtil.insert('hi', 2, '@')).toEqual(['hi @', 4]);
+        expect(ComposerUtil.insert('hi there', 3, '@')).toEqual(['hi @there', 4]);
+    });
+});