@schlenkr/ragents 0.1.5 → 0.1.7

package/apps/web/src/chat/ChatInputToolbar.tsx

@@ -1,488 +0,0 @@
-import { PaperclipIcon, SendIcon, SquareIcon, XIcon } from "lucide-react";
-import { Button, cn, Toggle, useFileInput } from "../ui";
-import { KeyboardEvent, ReactNode, Ref, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { ChatTexts, defaultTexts } from "./texts";
-import type { ChatAttachmentInput } from "../../../server/src/chat-events";
-import { attachmentCapabilityError, attachmentMediaType, encodeAttachment, formatAttachmentSize, validateAttachmentSelection } from "./attachments";
-
-type DraftAttachment = { id: number; file: File } & (
-  | { status: "reading" }
-  | { status: "ready"; input: ChatAttachmentInput }
-  | { status: "error"; error: string }
-);
-
-// Unter dieser Panel-Breite klappen mitlaufende Beschriftungen zu ihren Symbolen.
-const COMPACT_WIDTH_PX = 480;
-
-const errorClasses = "px-3 py-2 text-sm text-destructive";
-const attachmentItemClasses = "relative flex w-[190px] max-w-full min-w-0 flex-col overflow-hidden rounded-lg border border-border text-sm";
-const attachmentMediaClasses = "block h-[112px] w-full bg-secondary object-contain";
-
-/** Ein Toolbar-Knopf, deklarativ: Symbol, Text oder beides - plus Klick-Handler. */
-export interface ToolbarAction {
-  icon?: ReactNode;
-  label?: string;
-  title?: string;
-  disabled?: boolean;
-  active?: boolean;
-  onClick: () => void;
-}
-
-/** Hosts steuern den Entwurf von aussen, z.B. um eine Vorlage zum Bearbeiten einzusetzen. */
-export interface ChatInputHandle {
-  /** Ersetzt den Entwurf, fokussiert die Eingabe und stellt die Schreibmarke ans Ende. */
-  insert: (text: string) => void;
-  focus: () => void;
-  reset: () => void;
-  submit: (onSubmit?: (text: string, attachments?: ChatAttachmentInput[]) => void | Promise<void>, options?: { allowEmpty?: boolean }) => Promise<void>;
-}
-
-/**
- * Die Eingabe-Karte: rahmenlose Textarea oben, Toolbar unter einer Haarlinie. Eigene
- * Knöpfe kommen deklarativ über `actions` oder frei über die Slots links/rechts; im Lauf
- * bleibt der Stop-Knopf sichtbar, und Tippen zeigt daneben den Senden-Knopf, der zum
- * Dazwischenfunken wird. `rows` bestimmt die Starthöhe; mit `maxRows` wächst die Textarea
- * mit dem Inhalt bis zu dieser Zeilenzahl und scrollt danach.
- */
-export function ChatInputToolbar({
-  onSend,
-  onStop,
-  running = false,
-  disabled = false,
-  sendDisabled = false,
-  layout = "card",
-  detailsContainer,
-  onErrorChange,
-  inputAriaControls,
-  rows = 3,
-  maxRows,
-  actions,
-  toolbarLeft,
-  toolbarRight,
-  texts,
-  handleRef,
-  attachmentCapabilities,
-  attachmentCapabilitiesError,
-  onAttachmentsChange,
-  initialValue = "",
-  onDraftChange,
-}: {
-  onSend: (text: string, attachments?: ChatAttachmentInput[]) => void | Promise<void>;
-  onStop?: () => void;
-  running?: boolean;
-  disabled?: boolean;
-  sendDisabled?: boolean;
-  layout?: "card" | "toolbar" | "inline";
-  detailsContainer?: HTMLElement | null;
-  onErrorChange?: (error: string | undefined) => void;
-  inputAriaControls?: string;
-  rows?: number;
-  maxRows?: number;
-  actions?: ToolbarAction[];
-  toolbarLeft?: ReactNode;
-  toolbarRight?: ReactNode;
-  texts?: Partial<ChatTexts>;
-  handleRef?: Ref<ChatInputHandle>;
-  attachmentCapabilities?: { input: readonly string[]; model: string };
-  attachmentCapabilitiesError?: string;
-  onAttachmentsChange?: (hasAttachments: boolean) => void;
-  initialValue?: string;
-  onDraftChange?: (text: string) => void;
-}) {
-  const alleTexte = { ...defaultTexts, ...texts };
-  const [draft, setDraft] = useState(initialValue);
-  const [sending, setSending] = useState(false);
-  const [sendError, setSendError] = useState<string>();
-  const [failedSubmissions, setFailedSubmissions] = useState<{ id: number; draft: string; attachments: DraftAttachment[] }[]>([]);
-  const nextFailedId = useRef(0);
-  const pendingSend = useRef(false);
-  const generation = useRef(0);
-  const draftRevision = useRef(0);
-  const [attachments, setAttachments] = useState<DraftAttachment[]>([]);
-  const attachmentsRef = useRef<DraftAttachment[]>([]);
-  const nextAttachmentId = useRef(0);
-  const [attachmentError, setAttachmentError] = useState<string>();
-  const updateAttachments = (update: (current: DraftAttachment[]) => DraftAttachment[]) => {
-    attachmentsRef.current = update(attachmentsRef.current);
-    setAttachments(attachmentsRef.current);
-  };
-  const addFiles = (files: File[]) => {
-    if (!files.length) return;
-    if (disabled || pendingSend.current) {
-      setAttachmentError("Warte, bis die Eingabe wieder bereit ist, und füge die Dateien dann erneut hinzu.");
-      return;
-    }
-    try {
-      validateAttachmentSelection(attachmentsRef.current.map((entry) => entry.file), files);
-    } catch (error) {
-      setAttachmentError(error instanceof Error ? error.message : String(error));
-      return;
-    }
-    setAttachmentError(undefined);
-    const entries: DraftAttachment[] = files.map((file) => ({ id: ++nextAttachmentId.current, file, status: "reading" }));
-    updateAttachments((current) => [...current, ...entries]);
-    for (const entry of entries) {
-      void encodeAttachment(entry.file).then(
-        (input) => updateAttachments((current) => current.map((item) => item.id === entry.id ? { ...entry, status: "ready", input } : item)),
-        () => updateAttachments((current) => current.map((item) => item.id === entry.id ? {
-          ...entry, status: "error", error: "Datei konnte nicht gelesen werden. Entferne sie und füge sie erneut hinzu.",
-        } : item)),
-      );
-    }
-  };
-  const rootRef = useRef<HTMLDivElement>(null);
-  const eingabeRef = useRef<HTMLTextAreaElement>(null);
-  const [compact, setCompact] = useState(false);
-  const pendingFocus = useRef(false);
-  const fileInput = useFileInput({
-    disabled: disabled || sending,
-    onFiles: addFiles,
-    onPasteText: (text) => {
-      const input = eingabeRef.current;
-      if (!input || disabled || pendingSend.current) return;
-      const start = input.selectionStart;
-      const end = input.selectionEnd;
-      draftRevision.current += 1;
-      setDraft((current) => current.slice(0, start) + text + current.slice(end));
-      pendingFocus.current = true;
-    },
-  });
-  const toolbar = layout === "toolbar";
-  const inline = layout === "inline";
-  const inputRows = inline || toolbar ? 1 : rows;
-  const inputMaxRows = inline || toolbar ? 1 : maxRows;
-  // Die Toolbar-Fassung pulsiert waehrend der Arbeit; der Host gibt nur den Radius vor.
-  const rootClasses = cn(
-    "flex shrink-0 flex-col overflow-hidden rounded-[var(--input-card-radius,var(--radius-xl))] border border-border-strong bg-background shadow-bar transition-colors focus-within:border-primary",
-    "in-data-[surface=material]:rounded-xl in-data-[surface=material]:border-glass-edge/50 in-data-[surface=material]:bg-background",
-    toolbar && "h-full min-w-0 flex-row items-center rounded-lg data-[working=true]:animate-working-pulse data-[working=true]:border-primary motion-reduce:data-[working=true]:animate-none",
-    fileInput.dragging && "outline-2 outline-offset-[3px] outline-dashed outline-primary",
-  );
-  const textareaClasses = cn(
-    "resize-none border-0 bg-transparent text-[13px] leading-normal text-foreground placeholder:text-muted-foreground focus:outline-none",
-    inline ? "min-w-0 flex-1 px-2.5 py-2" : toolbar ? "w-full min-w-0 flex-auto px-2 py-[3px] leading-[1.3]" : "px-3 pt-3 pb-2",
-  );
-  const toolbarRowClasses = cn(
-    "flex items-center gap-2 border-t border-border-soft px-2 py-1.5 in-data-[surface=overseer-details]:flex-nowrap",
-    inline && "flex-none gap-1 border-t-0 p-1",
-    toolbar && "flex-wrap border-t-0",
-  );
-  const toolbarSideClasses = "flex min-w-0 items-center gap-2 in-data-[surface=overseer-details]:flex-nowrap";
-  const changeDraft = useCallback((text: string) => {
-    draftRevision.current += 1;
-    setDraft(text);
-  }, []);
-
-  useImperativeHandle(handleRef, () => ({
-    insert: (text: string) => {
-      pendingFocus.current = true;
-      changeDraft(text);
-      const element = eingabeRef.current;
-      element?.focus();
-      if (element?.value === text) element.setSelectionRange(text.length, text.length);
-    },
-    focus: () => eingabeRef.current?.focus(),
-    submit: (onSubmit, options) => send(onSubmit, options?.allowEmpty),
-    reset: () => {
-      generation.current += 1;
-      pendingSend.current = false;
-      pendingFocus.current = false;
-      changeDraft("");
-      updateAttachments(() => []);
-      setSendError(undefined);
-      setFailedSubmissions([]);
-      setAttachmentError(undefined);
-      setSending(false);
-      fileInput.clearDragging();
-    },
-  }));
-
-  useEffect(() => { onDraftChange?.(draft); }, [draft, onDraftChange]);
-
-  useEffect(() => {
-    if (!pendingFocus.current) {
-      return;
-    }
-    pendingFocus.current = false;
-    const element = eingabeRef.current;
-    if (element) {
-      element.focus();
-      element.setSelectionRange(element.value.length, element.value.length);
-    }
-  }, [draft, sending]);
-
-  // Auto-Wachstum: Hoehe folgt dem Inhalt zwischen rows und maxRows, danach scrollt die Textarea.
-  const applyAutoGrow = useCallback(() => {
-    const element = eingabeRef.current;
-    if (!element || inputMaxRows === undefined) {
-      return;
-    }
-    const stil = getComputedStyle(element);
-    const zeilenhoehe = Number.parseFloat(stil.lineHeight) || Number.parseFloat(stil.fontSize) * 1.4;
-    const polster = Number.parseFloat(stil.paddingTop) + Number.parseFloat(stil.paddingBottom);
-    const maximum = zeilenhoehe * Math.max(inputMaxRows, inputRows) + polster;
-    element.style.height = "auto";
-    const inhalt = element.scrollHeight;
-    element.style.height = `${Math.min(inhalt, maximum)}px`;
-    element.style.overflowY = inhalt > maximum ? "auto" : "hidden";
-  }, [inputMaxRows, inputRows]);
-
-  useEffect(() => {
-    applyAutoGrow();
-  }, [draft, applyAutoGrow]);
-
-  // Hosts may lay the composer out a frame later; re-measure once the width settles.
-  useEffect(() => {
-    const element = eingabeRef.current;
-    if (!element || inputMaxRows === undefined) {
-      return;
-    }
-    let lastWidth = element.clientWidth;
-    const observer = new ResizeObserver(() => {
-      if (element.clientWidth !== lastWidth) {
-        lastWidth = element.clientWidth;
-        applyAutoGrow();
-      }
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, [inputMaxRows, applyAutoGrow]);
-
-  // Panel-Breite statt Viewport-Breite: die Chat-Spalte kann im Host beliebig schmal sein.
-  useEffect(() => {
-    const element = rootRef.current;
-    if (!element) {
-      return;
-    }
-    const update = () => setCompact(element.clientWidth < COMPACT_WIDTH_PX);
-    update();
-    const beobachter = new ResizeObserver(update);
-    beobachter.observe(element);
-    return () => beobachter.disconnect();
-  }, []);
-
-  const hasAttachments = attachments.length > 0;
-  useEffect(() => { onAttachmentsChange?.(hasAttachments); }, [hasAttachments, onAttachmentsChange]);
-  const capabilityError = hasAttachments && attachmentCapabilitiesError ? attachmentCapabilitiesError : attachmentCapabilities ? attachmentCapabilityError(attachments.map((entry) => ({
-    name: entry.file.name, mediaType: attachmentMediaType(entry.file),
-  })), attachmentCapabilities) : undefined;
-  const hasContent = draft.trim().length > 0 || attachments.length > 0;
-  const preparing = attachments.some((entry) => entry.status === "reading");
-  const attachmentBlocked = attachments.some((entry) => entry.status !== "ready");
-  const currentError = sendError ?? attachmentError ?? capabilityError ?? attachments.find((entry) => entry.status === "error")?.error;
-  useEffect(() => { onErrorChange?.(currentError); }, [currentError, onErrorChange]);
-
-  const send = async (onSubmit = onSend, allowEmpty = false) => {
-    const text = draft.trim();
-    const snapshot = attachmentsRef.current;
-    if ((!allowEmpty && !text && !snapshot.length) || disabled || sendDisabled || pendingSend.current || capabilityError || snapshot.some((entry) => entry.status !== "ready")) {
-      return;
-    }
-    pendingSend.current = true;
-    const sentGeneration = generation.current;
-    const sentRevision = draftRevision.current;
-    const sentDraft = draft;
-    const focusOrigin = document.activeElement;
-    const startedFocused = focusOrigin === eingabeRef.current || rootRef.current?.contains(focusOrigin);
-    let leftComposer = false;
-    const observeFocus = (event: Event) => {
-      const target = event.target;
-      if (target instanceof Node && !rootRef.current?.contains(target) && !detailsContainer?.contains(target)) leftComposer = true;
-    };
-    document.addEventListener("focusin", observeFocus);
-    document.addEventListener("pointerdown", observeFocus);
-    setSending(true);
-    setSendError(undefined);
-    setDraft("");
-    updateAttachments(() => []);
-    try {
-      const inputs = snapshot.flatMap((entry) => entry.status === "ready" ? [entry.input] : []);
-      await onSubmit(text, inputs.length ? inputs : undefined);
-    } catch (error) {
-      if (generation.current !== sentGeneration) return;
-      if (draftRevision.current === sentRevision) {
-        setDraft(sentDraft);
-        updateAttachments((current) => [...snapshot, ...current]);
-      } else if (sentDraft || snapshot.length) {
-        const failed = { id: ++nextFailedId.current, draft: sentDraft, attachments: snapshot };
-        setFailedSubmissions((current) => [...current, failed]);
-      }
-      setSendError(error instanceof Error ? error.message : String(error));
-    } finally {
-      document.removeEventListener("focusin", observeFocus);
-      document.removeEventListener("pointerdown", observeFocus);
-      if (generation.current === sentGeneration) {
-        pendingSend.current = false;
-        pendingFocus.current = !!startedFocused && !leftComposer && document.hasFocus()
-          && (!toolbar || focusOrigin !== eingabeRef.current) && (document.activeElement === focusOrigin
-            || (!toolbar && document.activeElement === document.body));
-        setSending(false);
-      }
-    }
-  };
-
-  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229) {
-      event.preventDefault();
-      if (!event.repeat) void send();
-    }
-  };
-
-  const attachmentPreviews = (
-    attachments.length > 0 && (
-        <ul className="flex max-h-[240px] flex-wrap gap-2 overflow-y-auto px-3 pt-2.5 in-data-[surface=overseer-details]:max-h-40 in-data-[surface=overseer-details]:overflow-y-auto" aria-label="Anhänge">
-          {attachments.map((entry) => (
-            <li className={attachmentItemClasses} key={entry.id}>
-              {entry.status === "ready" && entry.input.mediaType.startsWith("image/") && (
-                <img className={attachmentMediaClasses} src={`data:${entry.input.mediaType};base64,${entry.input.data}`} alt={entry.file.name} />
-              )}
-              {entry.status === "ready" && entry.input.mediaType.startsWith("video/") && (
-                <video className={attachmentMediaClasses} controls preload="metadata" aria-label={entry.file.name} src={`data:${entry.input.mediaType};base64,${entry.input.data}`} />
-              )}
-              <div className="flex flex-col gap-1 p-2 pr-8 [overflow-wrap:anywhere]">
-                <span className="font-medium" title={entry.file.name}>{entry.file.name}</span>
-                <small>{formatAttachmentSize(entry.file.size)}</small>
-                {entry.status === "reading" && <small role="status">Wird vorbereitet ...</small>}
-                {entry.status === "error" && <small role="alert">{entry.error}</small>}
-              </div>
-              <Button
-                aria-label={`${entry.file.name} entfernen`}
-                className="absolute top-1 right-1"
-                disabled={disabled || sending}
-                onClick={() => {
-                  updateAttachments((current) => current.filter((item) => item.id !== entry.id));
-                  setAttachmentError(undefined);
-                  eingabeRef.current?.focus();
-                }}
-                size="icon-sm"
-                title={`${entry.file.name} entfernen`}
-                variant="outline"
-              ><XIcon /></Button>
-            </li>
-          ))}
-        </ul>
-      )
-  );
-  const errors = <>
-      {capabilityError && <p className={errorClasses} role="alert">{capabilityError}</p>}
-      {attachmentError && <p className={errorClasses} role="alert">{attachmentError}</p>}
-      {sendError && <p className={errorClasses} role="alert">{sendError}</p>}
-      {failedSubmissions.map((failed) => <div className={cn(errorClasses, "flex flex-wrap items-center gap-2")} key={failed.id} role="status">
-        <span>Nicht gesendet: {failed.draft.slice(0, 100)}{failed.draft.length > 100 ? " ..." : ""}{failed.attachments.length > 0 ? ` (${failed.attachments.length} Anhänge)` : ""} </span>
-        <Button disabled={disabled || sending} size="sm" variant="outline" onClick={() => {
-          try {
-            validateAttachmentSelection(attachmentsRef.current.map((entry) => entry.file), failed.attachments.map((entry) => entry.file));
-          } catch (error) {
-            setAttachmentError(error instanceof Error ? error.message : String(error));
-            return;
-          }
-          draftRevision.current += 1;
-          setDraft((current) => [current, failed.draft].filter(Boolean).join("\n\n"));
-          updateAttachments((current) => [...current, ...failed.attachments]);
-          setFailedSubmissions((current) => current.filter((entry) => entry.id !== failed.id));
-          setAttachmentError(undefined);
-          pendingFocus.current = true;
-        }}>Nicht gesendete Eingabe einfügen</Button>
-      </div>)}
-  </>;
-  const sendButtons = <>
-          {running && onStop && !hasContent && (
-            <Button aria-label={alleTexte.stop} className="flex-none" onClick={onStop} size="icon-sm" title={alleTexte.stop} variant="secondary">
-              <SquareIcon fill="currentColor" size={14} />
-            </Button>
-          )}
-          {(!running || !onStop || hasContent) && (
-            <Button
-              aria-label={alleTexte.send}
-              className="flex-none"
-              disabled={disabled || sendDisabled || sending || attachmentBlocked || !!capabilityError || !hasContent}
-              onClick={() => { void send(); }}
-              size="icon-sm"
-              title={running ? alleTexte.sendIntoRun : alleTexte.send}
-            >
-              <SendIcon size={14} />
-            </Button>
-          )}
-  </>;
-  const detailToolbar = (
-      <div className={toolbarRowClasses} data-input="controls">
-        <div className={cn(toolbarSideClasses, "in-data-[surface=overseer-details]:flex-none", inline || toolbar ? "flex-none" : "flex-auto")}>
-          <Button
-            aria-label="Dateien anhängen"
-            disabled={disabled || sending}
-            onClick={() => fileInput.inputRef.current?.click()}
-            size="icon-sm"
-            title="Dateien anhängen (bis zu 8 Dateien, insgesamt 20 MiB)"
-            variant="ghost"
-          >
-            <PaperclipIcon />
-          </Button>
-          {preparing && <span className={cn("text-xs text-muted-foreground", inline && "sr-only")} role="status">Anhänge werden vorbereitet ...</span>}
-          {actions?.map((action, index) => action.active === undefined ? (
-            <Button disabled={action.disabled} key={index} onClick={action.onClick} size="sm" title={action.title ?? action.label} variant="ghost">
-              {action.icon}
-              {action.label && <span className={action.icon ? "in-data-[compact=true]:hidden" : undefined}>{action.label}</span>}
-            </Button>
-          ) : (
-            <Toggle disabled={action.disabled} key={index} onPressedChange={() => action.onClick()} pressed={action.active} size="sm" title={action.title ?? action.label}>
-              {action.icon}
-              {action.label && <span className={action.icon ? "in-data-[compact=true]:hidden" : undefined}>{action.label}</span>}
-            </Toggle>
-          ))}
-          {toolbarLeft}
-        </div>
-        <div className={cn(toolbarSideClasses, "in-data-[surface=overseer-details]:flex-1", inline || toolbar ? "flex-none" : "flex-[0_1_auto]")}>
-          {toolbarRight}
-          {!toolbar && sendButtons}
-        </div>
-      </div>
-  );
-  const details = <div className="min-w-0" data-compact={compact}>
-    {attachmentPreviews}
-    {errors}
-    {detailToolbar}
-  </div>;
-
-  const input = (
-      <textarea
-        aria-controls={inputAriaControls}
-        className={textareaClasses}
-        aria-label={alleTexte.placeholder}
-        disabled={!toolbar && disabled}
-        readOnly={toolbar && disabled}
-        onChange={(event) => changeDraft(event.target.value)}
-        onKeyDown={onKeyDown}
-        placeholder={running ? alleTexte.steeringPlaceholder : alleTexte.placeholder}
-        ref={eingabeRef}
-        rows={inputRows}
-        value={draft}
-      />
-  );
-
-  return (
-    <div
-      className={rootClasses}
-      data-compact={compact}
-      data-layout={layout}
-      data-working={running || sending}
-      ref={rootRef}
-      {...fileInput.dropProps}
-    >
-      <input
-        aria-label="Dateien anhängen"
-        hidden
-        multiple
-        type="file"
-        {...fileInput.inputProps}
-      />
-      {!toolbar && attachmentPreviews}
-      {inline ? <>{errors}<div className="flex min-w-0 items-center">{input}{detailToolbar}</div></> : input}
-      {toolbar ? <>
-        <div className="flex flex-none items-center gap-1 p-1">{sendButtons}</div>
-        {detailsContainer && createPortal(details, detailsContainer)}
-      </> : !inline && <>{errors}{detailToolbar}</>}
-
-    </div>
-  );
-}