zidane-ui 9.0.4 → 9.1.3

package/src/chat/composer/Composer.tsx

@@ -1,500 +0,0 @@
-/**
- * The chat composer: the desktop app's prompt box as a component. A Tiptap
- * editor in a raised card set in a tray ring, staged attachments above the
- * text, a controls row under it (an attach button, the `footer` slot for
- * pickers, Send / Stop).
- *
- *   <Composer onSend={({ prompt, attachments }) => send(prompt, attachments)} />
- *
- * Keys: Enter sends, Shift+Enter starts a new line, Escape stops a running
- * agent (with `onStop`), ↑ on the first line recalls earlier prompts and ↓
- * on the last line walks back. While `running`, Enter steers the run
- * (`onSteer`) or else queues the prompt (`onQueue`). A handler that
- * returns `false` (or throws) puts the draft back; a throw is also reported,
- * to `onError` when given, else as a line under the card.
- *
- * Plain text in, plain text out: no Markdown input rules or marks. Picked
- * mentions and commands are badges in the draft and serialise to text
- * (`SuggestionSource.serialize`, default `@label` / `/label`). Uncontrolled
- * by default (`defaultValue`); `value` + `onChange` control the text (a
- * controlled reset drops badges back to their text).
- *
- * `badges` puts the badge strip (`ComposerBadges`) at the top of the tray
- * ring, above the card: what waits around the conversation (todos, queued
- * messages, an extension's status), each opening its panel.
- *
- * The editor loads as its own chunk on mount (`ComposerEditor`): until it
- * lands, a shell with the editor's markup holds the draft (`ComposerShell`),
- * so the page's first load carries no Tiptap and nothing moves or is lost
- * at the swap.
- */
-import type { Editor } from '@tiptap/react';
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactNode,
-} from 'react';
-
-import { IconButton } from '../../components/IconButton';
-import { useLightbox } from '../../components/Lightbox';
-import { useChatLabels } from '../useChatLabels';
-import { attachmentLightboxItems, AttachmentNotices, AttachmentTiles } from './attachments';
-import { ComposerBadges, type ComposerBadge } from './ComposerBadges';
-import { useAttachmentIngest } from './useAttachmentIngest';
-import type { ComposerAttachment } from './attachment-ingest';
-import type { ComposerEditorBridge } from './ComposerEditor';
-import { ComposerShell, type ComposerShellHandle } from './ComposerShell';
-import { loadComposerEditor, loadedComposerEditor } from './load-composer-editor';
-import { isCaretAtEnd, isCaretAtStart, plainTextToDocJson } from './prompt-history-nav';
-import { SendButton, type SendRoute } from './SendButton';
-import { SuggestionPopup, type SuggestionSource, type SuggestionState } from './suggestions';
-
-/** What the composer hands to `onSend`, `onSteer`, and `onQueue`. */
-export interface ComposerSubmit {
-  /** The draft as plain text. Mentions and commands are serialized to text. */
-  prompt: string;
-  /** The staged attachments. */
-  attachments: readonly ComposerAttachment[];
-}
-
-/** `false` (or a rejection) keeps the draft: the composer puts it back. */
-export type ComposerResult = void | boolean | Promise<void | boolean>;
-
-/** Props for {@link Composer}. */
-export interface ComposerProps {
-  /** Called when the user sends the draft with Enter or the Send button. Return `false` or reject to put the draft back. */
-  onSend(input: ComposerSubmit): ComposerResult;
-  /** A run is in flight: Enter steers or queues, Escape and the button stop. */
-  running?: boolean;
-  /** Called when the user stops the running agent with Escape or the Stop button. Without it the composer offers no stop. */
-  onStop?(): void;
-  /** Enter while running adds the draft to the run in flight. */
-  onSteer?(input: ComposerSubmit): ComposerResult;
-  /** Enter while running (without `onSteer`) holds the draft for when the run ends. */
-  onQueue?(input: ComposerSubmit): ComposerResult;
-  /** A send / steer / queue handler threw (the draft is already back). Absent: the composer shows the error itself. */
-  onError?(error: unknown): void;
-  /** Controlled text of the draft. Use with `onChange`. Omit for an uncontrolled draft. */
-  value?: string;
-  /** Initial text of an uncontrolled draft. */
-  defaultValue?: string;
-  /** Called with the draft's text each time it changes. */
-  onChange?(text: string): void;
-  /** Placeholder shown while the draft is empty. Default: the `composerPlaceholder` label. */
-  placeholder?: string;
-  /** The textbox's accessible name (default: the `composerLabel` label). */
-  ariaLabel?: string;
-  /**
-   * Makes the editor read-only and disables sending and attaching.
-   * @default false
-   */
-  disabled?: boolean;
-  /** Paste, drop and pick images, PDFs and text files. */
-  attachments?: boolean;
-  /** Attachments staged on mount (a restored draft). */
-  defaultAttachments?: readonly ComposerAttachment[];
-  /** Controls after the attach button (pickers). */
-  footer?: ReactNode;
-  /** Controls at the end of the controls row, before Send (a context meter). */
-  trailing?: ReactNode;
-  /** A band under the card, inside the tray ring (the desktop app's git bar). */
-  below?: ReactNode;
-  /** The badge strip at the top of the tray ring, above the card, in display order (see `ComposerBadges`). */
-  badges?: readonly ComposerBadge[];
-  /** Makes the badges draggable; receives every badge id in the new order. */
-  onBadgesReorder?: (ids: readonly string[]) => void;
-  /** What the badges belong to (a session id): a new key shows its badges without animating them. */
-  badgesKey?: string;
-  /** `@` completions. */
-  mentions?: SuggestionSource;
-  /** `/` completions, at the start of the prompt. */
-  commands?: SuggestionSource;
-  /**
-   * Focuses the editor on mount, with the caret at the end.
-   * @default false
-   */
-  autoFocus?: boolean;
-  /** Earlier prompts for ↑ / ↓, oldest first. Absent: what this composer sent while mounted. */
-  history?: readonly string[];
-  /** Extra class names for the composer's root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** Imperative handle of the {@link Composer}, reached through its `ref`. */
-export interface ComposerHandle {
-  /** Moves focus to the editor. */
-  focus(): void;
-  /** Empties the draft. */
-  clear(): void;
-  /** Insert text at the caret (a dropped path, a quoted line). */
-  insertText(text: string): void;
-  /** The draft as it would be sent. */
-  getText(): string;
-}
-
-const serialize = (editor: Editor) => editor.getText({ blockSeparator: '\n' });
-
-/** Renders the chat prompt box: a text editor with staged attachments, a controls row, and Send or Stop. Enter sends, Shift+Enter adds a line, Escape stops a running agent, and the arrow keys recall earlier prompts. */
-export const Composer = forwardRef<ComposerHandle, ComposerProps>(function Composer(props, ref) {
-  const { running = false, disabled = false, footer, className = '' } = props;
-  const labels = useChatLabels();
-  const propsRef = useRef(props);
-  propsRef.current = props;
-  const placeholder = props.placeholder ?? labels.composerPlaceholder;
-  const placeholderRef = useRef(placeholder);
-  placeholderRef.current = placeholder;
-  const nameRef = useRef(props.ariaLabel ?? labels.composerLabel);
-  nameRef.current = props.ariaLabel ?? labels.composerLabel;
-
-  const [suggest, setSuggestState] = useState<SuggestionState | null>(null);
-  const suggestRef = useRef<SuggestionState | null>(null);
-  const setSuggest = useCallback((next: SuggestionState | null) => {
-    suggestRef.current = next;
-    setSuggestState(next);
-  }, []);
-  const mentionsRef = useRef(props.mentions);
-  mentionsRef.current = props.mentions;
-  const commandsRef = useRef(props.commands);
-  commandsRef.current = props.commands;
-
-  const [text, setText] = useState(props.value ?? props.defaultValue ?? '');
-  const [sendError, setSendError] = useState<string | null>(null);
-  const ingest = useAttachmentIngest(Boolean(props.attachments) && !disabled, props.defaultAttachments);
-  // The editor is built once: its handlers read the latest ingest through this.
-  const ingestRef = useRef(ingest);
-  ingestRef.current = ingest;
-  const lightbox = useLightbox();
-
-  // History: `index` is the recalled entry (null: the live draft, stashed while recalling).
-  const sent = useRef<string[]>([]);
-  const recall = useRef<{ index: number | null; stash: string; applying: boolean }>({
-    index: null,
-    stash: '',
-    applying: false,
-  });
-  const keyRef = useRef<(event: KeyboardEvent) => boolean>(() => false);
-
-  // The editor's chunk: there already (a composer mounted before), else loading from mount on.
-  const [EditorView, setEditorView] = useState(() => loadedComposerEditor()?.ComposerEditor ?? null);
-  useEffect(() => {
-    if (EditorView) return;
-    let live = true;
-    loadComposerEditor().then(
-      (m) => live && setEditorView(() => m.ComposerEditor),
-      // The shell stays; the next composer mounted retries.
-      () => {},
-    );
-    return () => {
-      live = false;
-    };
-  }, [EditorView]);
-  const [editor, setEditor] = useState<Editor | null>(null);
-  // The shell stands in only until the first editor lands, and only when the chunk had to load.
-  const [shellPhase, setShellPhase] = useState(EditorView === null);
-  const shellRef = useRef<ComposerShellHandle>(null);
-  const shell = useRef({ dirty: false, text: '', focused: false, submit: false, insert: '' });
-
-  const [bridge] = useState<ComposerEditorBridge>(() => ({
-    placeholder: placeholderRef,
-    name: nameRef,
-    mentions: mentionsRef,
-    commands: commandsRef,
-    suggest: suggestRef,
-    setSuggest,
-    keyDown: (event) => keyRef.current(event),
-    paste: (event) => ingestRef.current.paste(event),
-    update: (ed) => {
-      const next = serialize(ed);
-      setText(next);
-      // Editing the draft again answers the failure.
-      setSendError(null);
-      if (!recall.current.applying) recall.current.index = null;
-      propsRef.current.onChange?.(next);
-    },
-  }));
-
-  const shellInput = useCallback((next: string) => {
-    shell.current.dirty = true;
-    shell.current.text = next;
-    setText(next);
-    setSendError(null);
-    propsRef.current.onChange?.(next);
-  }, []);
-
-  const setDraft = useCallback(
-    // Browsing back parks the caret at the start, forward at the end: the next press in the same direction keeps cycling.
-    (value: string, edge: 'start' | 'end' = 'end') => {
-      if (!editor) return;
-      recall.current.applying = true;
-      editor.chain().setContent(plainTextToDocJson(value)).focus(edge).run();
-      recall.current.applying = false;
-    },
-    [editor],
-  );
-
-  useEffect(() => {
-    editor?.setEditable(!disabled);
-  }, [editor, disabled]);
-  // The placeholder decoration repaints on a transaction only.
-  useEffect(() => {
-    if (editor && !editor.isDestroyed) editor.view.dispatch(editor.state.tr);
-  }, [editor, placeholder, props.ariaLabel]);
-  useEffect(() => {
-    if (!editor || props.value === undefined || props.value === serialize(editor)) return;
-    editor.commands.setContent(plainTextToDocJson(props.value), { emitUpdate: false });
-    setText(props.value);
-  }, [editor, props.value]);
-
-  const route: SendRoute = !running ? 'send' : props.onSteer ? 'steer' : props.onQueue ? 'queue' : 'send';
-  const canSend = !disabled && (text.trim() !== '' || ingest.attachments.length > 0) && (!running || route !== 'send');
-
-  const submit = useCallback(async () => {
-    const p = propsRef.current;
-    // Sent from the shell: goes once the editor holds the draft.
-    if (!editor) shell.current.submit = true;
-    if (!editor || p.disabled) return;
-    const prompt = serialize(editor).trim();
-    const { attachments: staged, clear, restore: putBack } = ingestRef.current;
-    if (!prompt && staged.length === 0) return;
-    const handler = p.running ? (p.onSteer ?? p.onQueue) : p.onSend;
-    if (!handler) return;
-    setSendError(null);
-    const draft = editor.getJSON();
-    editor.commands.clearContent(true);
-    clear();
-    if (prompt && sent.current.at(-1) !== prompt) sent.current.push(prompt);
-    recall.current.index = null;
-    const restore = () => {
-      if (editor.isDestroyed || serialize(editor) !== '') return;
-      editor.commands.setContent(draft);
-      putBack(staged);
-    };
-    try {
-      if ((await handler({ prompt, attachments: staged })) === false) restore();
-    } catch (error) {
-      restore();
-      // After the restore: putting the draft back is an edit, which clears the line.
-      if (p.onError) p.onError(error);
-      else setSendError(error instanceof Error && error.message ? error.message : String(error));
-    }
-  }, [editor]);
-
-  // The swap, before paint: the editor takes the shell's draft, focus and a pending send.
-  useLayoutEffect(() => {
-    if (!editor || !shellPhase) return;
-    setShellPhase(false);
-    const s = shell.current;
-    if (s.dirty && serialize(editor) !== s.text) {
-      editor.commands.setContent(plainTextToDocJson(s.text), { emitUpdate: false });
-    }
-    if (s.insert) editor.commands.insertContentAt(editor.state.doc.content.size, s.insert);
-    if (s.focused) {
-      // Now, not on Tiptap's next frame (its `focus` command): keys typed meanwhile must land in the editor.
-      editor.commands.setTextSelection(Math.max(1, editor.state.doc.content.size - 1));
-      editor.view.focus();
-    }
-    if (s.submit) {
-      s.submit = false;
-      void submit();
-    }
-  }, [editor, shellPhase, submit]);
-
-  // Assigned after render (the editor calls it from key events only), so a discarded render never leaks in.
-  useLayoutEffect(() => {
-    keyRef.current = (event) => {
-      // An open popup owns Escape, and Enter, Tab and the arrows while it lists something: with no matches they stay the draft's.
-      const popup = suggestRef.current;
-      if ((popup && (popup.items.length > 0 || event.key === 'Escape')) || !editor || event.isComposing) return false;
-      const p = propsRef.current;
-      if (event.key === 'Enter') {
-        if (event.shiftKey) return editor.commands.splitBlock();
-        event.preventDefault();
-        void submit();
-        return true;
-      }
-      if (event.key === 'Escape' && p.running && p.onStop) {
-        p.onStop();
-        return true;
-      }
-      if (event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return false;
-      const { state } = editor;
-      if (!state.selection.empty) return false;
-      const entries = p.history ?? sent.current;
-      const r = recall.current;
-      if (event.key === 'ArrowUp' && entries.length > 0) {
-        if (!isCaretAtStart(state)) return false;
-        if (r.index === null) {
-          r.stash = serialize(editor);
-          r.index = entries.length - 1;
-        } else if (r.index > 0) r.index -= 1;
-        else return true;
-        setDraft(entries[r.index]!, 'start');
-        return true;
-      }
-      if (event.key === 'ArrowDown' && r.index !== null) {
-        if (!isCaretAtEnd(state)) return false;
-        const next = r.index + 1;
-        if (next < entries.length) {
-          r.index = next;
-          setDraft(entries[next]!);
-        } else {
-          r.index = null;
-          setDraft(r.stash);
-        }
-        return true;
-      }
-      return false;
-    };
-  });
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      focus: () => (editor ? editor.commands.focus() : shellRef.current?.focus()),
-      clear: () => {
-        if (editor) editor.commands.clearContent(true);
-        else {
-          shellRef.current?.setText('');
-          shell.current.insert = '';
-          shellInput('');
-        }
-        ingestRef.current.clear();
-      },
-      insertText: (value: string) => {
-        if (editor) editor.chain().focus().insertContent(value).run();
-        else {
-          // Lands at the end once the editor is there.
-          shell.current.insert += value;
-          shellRef.current?.focus();
-        }
-      },
-      getText: () => (editor ? serialize(editor) : shell.current.dirty ? shell.current.text : text),
-    }),
-    [editor, shellInput, text],
-  );
-
-  return (
-    <div
-      className={`zg-composer zg-tray relative rounded-[28px] p-1 ${className}`}
-      style={props.style}
-      data-testid="composer"
-    >
-      {props.badges && (
-        <ComposerBadges
-          badges={props.badges}
-          resetKey={props.badgesKey ?? null}
-          {...(props.onBadgesReorder ? { onReorder: props.onBadgesReorder } : {})}
-        />
-      )}
-      <input ref={ingest.inputRef} type="file" multiple onChange={ingest.pick} className="hidden" tabIndex={-1} />
-      <div
-        // A pointer convenience over the card's padding; the keyboard reaches the editor and controls directly.
-        role="presentation"
-        onClick={(e) => {
-          // Presses on the card's padding reach the editor; its controls keep their own focus.
-          if ((e.target as HTMLElement).closest('button, a, input, [role="dialog"], [role="menu"]')) return;
-          if (editor) editor.commands.focus();
-          else shellRef.current?.focus();
-        }}
-        onDragOver={ingest.dragOver}
-        onDragLeave={ingest.dragLeave}
-        onDrop={ingest.drop}
-        className="zg-raised relative rounded-3xl border pt-3 pb-2 px-1 flex flex-col cursor-text"
-        data-live={running ? '' : undefined}
-        data-disabled={disabled ? '' : undefined}
-        style={{ borderColor: ingest.dragging ? 'var(--zg-accent)' : 'var(--zg-hairline)' }}
-      >
-        <AttachmentNotices notices={ingest.notices} onDismiss={ingest.dismissNotices} />
-        <AttachmentTiles
-          attachments={ingest.attachments}
-          onRemove={ingest.remove}
-          onOpen={(id, origin) => {
-            const items = attachmentLightboxItems(ingest.attachments);
-            lightbox.open(
-              items,
-              items.findIndex((i) => i.key === id),
-              origin,
-            );
-          }}
-        />
-        <div className="zg-composer-scroll min-w-0">
-          {EditorView && (
-            <EditorView
-              text={props.value ?? props.defaultValue ?? ''}
-              disabled={disabled}
-              autoFocus={Boolean(props.autoFocus)}
-              mentions={Boolean(props.mentions)}
-              commands={Boolean(props.commands)}
-              bridge={bridge}
-              onEditor={setEditor}
-            />
-          )}
-          {shellPhase && !editor && (
-            <ComposerShell
-              ref={shellRef}
-              text={props.value ?? props.defaultValue ?? ''}
-              placeholder={placeholder}
-              ariaLabel={props.ariaLabel ?? labels.composerLabel}
-              disabled={disabled}
-              autoFocus={Boolean(props.autoFocus)}
-              onInput={shellInput}
-              onKeyDown={(event) => {
-                if (event.nativeEvent.isComposing) return;
-                const p = propsRef.current;
-                if (event.key === 'Enter' && !event.shiftKey) {
-                  event.preventDefault();
-                  void submit();
-                } else if (event.key === 'Escape' && p.running && p.onStop) p.onStop();
-              }}
-              onPaste={(event) => ingestRef.current.paste(event)}
-              onFocusChange={(focused) => {
-                shell.current.focused = focused;
-              }}
-            />
-          )}
-        </div>
-        <div className="flex items-center justify-between gap-2 mt-3 min-w-0">
-          <div className="flex items-center gap-1 flex-1 min-w-0">
-            {props.attachments && (
-              <IconButton
-                icon="i-ph-plus"
-                label={labels.attachFile}
-                size="lg"
-                className="!rounded-full"
-                disabled={disabled}
-                onClick={() => ingest.inputRef.current?.click()}
-              />
-            )}
-            {footer}
-          </div>
-          <div className="flex items-center gap-2 shrink-0 pr-1">
-            {props.trailing}
-            <SendButton
-              stoppable={running && Boolean(props.onStop)}
-              route={route}
-              canSend={canSend}
-              onSend={() => void submit()}
-              onStop={() => propsRef.current.onStop?.()}
-            />
-          </div>
-        </div>
-      </div>
-      {sendError && (
-        <p role="alert" className="m-0 px-4 pt-1.5 pb-0.5 text-zg-label text-zg-danger truncate" title={sendError}>
-          {sendError}
-        </p>
-      )}
-      {props.below}
-      <SuggestionPopup state={suggest} />
-      {lightbox.element}
-    </div>
-  );
-});