@schlenkr/ragents 0.1.5 → 0.1.6

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

@@ -1,666 +0,0 @@
-import { Button, cn } from "../ui";
-import { ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { createChatScroll } from "./chat-scroll";
-import { DetailMode, Message, prettyJson, stepState, ToolInfo } from "./types";
-import { ChatTexts, defaultTexts } from "./texts";
-import { Markdown, MarkdownLinks, type LinkClickHandler } from "./Markdown";
-import { StepPopover } from "./StepPopover";
-import { QuestionCard } from "./QuestionCard";
-import { WorkingScenes } from "./WorkingScenes";
-import { attachmentDownloadUrl, formatAttachmentSize } from "./attachments";
-import { CheckIcon, ChevronDownIcon, ChevronRightIcon, CopyIcon, LayersIcon, SparklesIcon, WrenchIcon, XIcon } from "lucide-react";
-
-const stepClasses = "mt-4";
-const denseStepClasses = "mt-2";
-
-const traceClasses = "flex w-full gap-2 pl-6 text-left text-[11px] leading-[1.375] text-muted-foreground";
-const traceButtonClasses = "cursor-pointer rounded-md py-1 pr-2 transition-colors hover:bg-secondary hover:text-foreground focus-visible:bg-secondary focus-visible:text-foreground focus-visible:outline-none";
-const traceIconClasses = "mt-0.5 flex-none opacity-60";
-const traceErrorIconClasses = "mt-0.5 flex-none text-destructive opacity-100";
-const traceLineClasses = "min-w-0 font-mono [overflow-wrap:anywhere]";
-const traceRunningClasses = "ml-1.5 opacity-60";
-
-const chipClasses = cn(
-  "inline-flex max-w-[220px] items-center gap-[5px] rounded-full border border-border-soft px-2.5 py-0.5",
-  "font-mono text-[10.5px] leading-[1.6] text-muted-foreground transition-colors",
-  "data-[state=running]:border-[color-mix(in_srgb,var(--primary)_40%,var(--border-soft))]",
-  "data-[state=thinking]:border-[color-mix(in_srgb,var(--primary)_40%,var(--border-soft))]",
-  "data-[state=error]:border-[color-mix(in_srgb,var(--destructive)_45%,var(--border-soft))]",
-  "data-[state=done]:opacity-85",
-);
-const chipInteractiveClasses = "cursor-pointer hover:border-border hover:bg-secondary hover:text-foreground focus-visible:border-border focus-visible:bg-secondary focus-visible:text-foreground focus-visible:outline-none data-[state=done]:hover:opacity-100 data-[state=done]:focus-visible:opacity-100";
-
-const bubbleBodyClasses = "relative max-w-[86%] px-3 py-2 leading-[1.625] [overflow-wrap:anywhere] @max-[620px]/chat:max-w-full";
-
-// Die Aktionen liegen ueber der Nachricht und erscheinen erst beim Zeigen; ohne Zeiger bleiben sie sichtbar.
-const messageActionsClasses = cn(
-  "absolute top-1 right-1 z-[1] flex rounded-sm bg-secondary opacity-0",
-  "shadow-[0_2px_6px_color-mix(in_srgb,var(--foreground)_15%,transparent)]",
-  "pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100",
-  "[@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100",
-);
-
-function istSchritt(message?: Message): boolean {
-  return !!message && (message.role === "thinking" || message.role === "tool");
-}
-
-function defaultArgumentsText(tool: ToolInfo): string {
-  return prettyJson(tool.arguments);
-}
-
-/**
- * Der Verlauf: eigener Scroll-Container mit Autoscroll, solange man unten ist,
- * und einem Zum-Ende-Knopf, sobald man liest. Ohne Eingabe read-only nutzbar.
- */
-export function ChatMessages({
-  messages,
-  owner,
-  detailMode = "current",
-  running = false,
-  working,
-  stepsExpandable = true,
-  texts,
-  toolArgumentsText = defaultArgumentsText,
-  renderTool,
-  onAnswerQuestion,
-  onLinkClick,
-  emptyState,
-  className,
-  showTimestamps = false,
-  announceMessages = true,
-  scrollerRef,
-}: {
-  messages: Message[];
-  /** Beiträge mit diesem Message.sender erscheinen ohne Sprechblase; null behält die Nachrichtenvorgaben. */
-  owner?: string | null;
-  detailMode?: DetailMode;
-  running?: boolean;
-  working?: ReactNode;
-  /** false = Denk- und Werkzeug-Schritte lassen sich nicht aufklappen (kein Popover). */
-  stepsExpandable?: boolean;
-  texts?: Partial<ChatTexts>;
-  toolArgumentsText?: (tool: ToolInfo) => string;
-  /** Eigene Darstellung fuer einzelne Werkzeuge; undefined = Standarddarstellung. */
-  renderTool?: (tool: ToolInfo) => ReactNode | undefined;
-  onAnswerQuestion?: (callId: string, text: string) => void;
-  /** Faengt Klicks auf Markdown-Links ab; true = behandelt, der Browser folgt nicht. */
-  onLinkClick?: LinkClickHandler;
-  emptyState?: ReactNode;
-  className?: string;
-  /** true = dezente HH:MM-Spalte links an jedem Block (Message.at). */
-  showTimestamps?: boolean;
-  announceMessages?: boolean;
-  /** Exposes the scroll container so hosts can scroll without querying the DOM. */
-  scrollerRef?: (element: HTMLDivElement | null) => void;
-}) {
-  const alleTexte = { ...defaultTexts, ...texts };
-  const scrollBereich = useRef<HTMLDivElement>(null);
-  const threadRef = useRef<HTMLDivElement>(null);
-  const scrollbarDragging = useRef(false);
-  const touchY = useRef<number | undefined>(undefined);
-  const [amEnde, setAmEnde] = useState(true);
-  const [scroll] = useState(() => createChatScroll(setAmEnde));
-
-  const pauseUp = (viewport: HTMLDivElement, target: EventTarget) => {
-    let element = target instanceof Element ? target : null;
-    while (element && element !== viewport) {
-      if (element.scrollTop > 0 && /auto|scroll/.test(getComputedStyle(element).overflowY)) return;
-      element = element.parentElement;
-    }
-    scroll.pause(viewport);
-  };
-
-  const pruefeEnde = useCallback(() => {
-    const bereich = scrollBereich.current;
-    if (bereich) scroll.scroll(bereich, scrollbarDragging.current);
-  }, [scroll]);
-
-  useEffect(() => {
-    const finishDrag = () => {
-      if (scrollbarDragging.current && scrollBereich.current) scroll.scroll(scrollBereich.current, true);
-      scrollbarDragging.current = false;
-    };
-    window.addEventListener("pointerup", finishDrag);
-    window.addEventListener("pointercancel", finishDrag);
-    return () => {
-      window.removeEventListener("pointerup", finishDrag);
-      window.removeEventListener("pointercancel", finishDrag);
-    };
-  }, [scroll]);
-
-  // Inhaltswachstum ändert den Folgemodus nicht; auch nachgeladene Medien und die Eingabe zählen.
-  useLayoutEffect(() => {
-    const bereich = scrollBereich.current;
-    if (!bereich) return;
-    const align = () => scroll.layout(bereich, scrollbarDragging.current);
-    align();
-    const beobachter = new ResizeObserver(align);
-    beobachter.observe(bereich);
-    if (threadRef.current) beobachter.observe(threadRef.current, { box: "border-box" });
-    return () => beobachter.disconnect();
-  });
-
-  const visible = useMemo(
-    () => {
-      // Eigene Eingaben hinter dem laufenden Schritt beenden ihn nicht; jede andere Nachricht schon.
-      const letzterFremder = messages.reduce((last, message, index) => message.role === "user" ? last : index, -1);
-      return messages.filter((message, index) => {
-        if (detailMode === "current" && istSchritt(message)) {
-          return running && index === letzterFremder
-            && (message.role === "thinking" ? !message.closed : stepState(message) === "running");
-        }
-        if ((message.role === "thinking" || message.role === "assistant") && message.text.trim() === "" && !message.attachments?.length) {
-          return false;
-        }
-        if (message.role === "thinking" || message.role === "tool") {
-          return detailMode !== "off";
-        }
-        return true;
-      });
-    },
-    [messages, detailMode, running],
-  );
-
-  // Dezente HH:MM-Spalte links; ohne Zeitstempel bleibt der Block unverpackt.
-  const zeitVon = (at: string | undefined) => {
-    if (!at) return "";
-    const zeit = new Date(at);
-    if (Number.isNaN(zeit.getTime())) return "";
-    return `${String(zeit.getHours()).padStart(2, "0")}:${String(zeit.getMinutes()).padStart(2, "0")}`;
-  };
-  const mitZeit = (inhalt: ReactNode, key: string, at: string | undefined, dicht = false): ReactNode =>
-    showTimestamps
-      ? (
-        <div className={cn("flex items-start gap-2", dicht ? denseStepClasses : stepClasses)} key={`zeit-${key}`}>
-          <time className="w-[34px] flex-none pt-0.5 text-[10.5px] tabular-nums text-muted-foreground opacity-85">{zeitVon(at)}</time>
-          <div className="min-w-0 flex-1 [&>*:first-child]:mt-0">{inhalt}</div>
-        </div>
-      )
-      : inhalt;
-
-  // In den Chip-Modi ruecken aufeinanderfolgende Schritte in eine umbrechende Zeile zusammen, gruppiert in eine aufklappbare Zeile.
-  const chipModus = detailMode === "current" || detailMode === "chips" || detailMode === "icons";
-  const gruppenModus = detailMode === "grouped";
-  const bloecke: ReactNode[] = [];
-  let gruppe: Message[] = [];
-  const schliesseGruppe = () => {
-    if (gruppe.length > 0) {
-      const letzterZustand = stepState(gruppe[gruppe.length - 1]);
-      bloecke.push(mitZeit(
-        gruppenModus ? (
-          <StepGroup
-            aktiv={running && (letzterZustand === "running" || letzterZustand === "thinking")}
-            expandierbar={stepsExpandable}
-            key={gruppe[0].key}
-            messages={gruppe}
-            texts={alleTexte}
-            toolArgumentsText={toolArgumentsText}
-          />
-        ) : (
-          <StepRow
-            expandierbar={stepsExpandable}
-            key={gruppe[0].key}
-            messages={gruppe}
-            mitText={detailMode !== "icons"}
-            texts={alleTexte}
-            toolArgumentsText={toolArgumentsText}
-            toolLabel={detailMode === "current" && !stepsExpandable ? alleTexte.currentTool : undefined}
-          />
-        ),
-        gruppe[0].key,
-        gruppe[0].at,
-      ));
-      gruppe = [];
-    }
-  };
-  visible.forEach((message, index) => {
-    const eigeneDarstellung = message.role === "tool" && message.tool && detailMode !== "current" ? renderTool?.(message.tool) : undefined;
-    if (eigeneDarstellung !== undefined) {
-      schliesseGruppe();
-      bloecke.push(mitZeit(
-        <div className={stepClasses} key={message.key}>
-          {eigeneDarstellung}
-        </div>,
-        message.key,
-        message.at,
-      ));
-      return;
-    }
-    if ((chipModus || gruppenModus) && istSchritt(message)) {
-      gruppe = [...gruppe, message];
-      return;
-    }
-    schliesseGruppe();
-    const dicht = istSchritt(message) && istSchritt(visible[index - 1]);
-    bloecke.push(mitZeit(
-      <Bubble
-        detailMode={detailMode}
-        dicht={dicht}
-        expandierbar={stepsExpandable}
-        key={message.key}
-        message={message}
-        plain={owner != null && message.sender === owner}
-        texts={alleTexte}
-        toolArgumentsText={toolArgumentsText}
-        onAnswerQuestion={onAnswerQuestion}
-      />,
-      message.key,
-      message.at,
-      dicht,
-    ));
-  });
-  schliesseGruppe();
-
-  const verlauf = (
-    <div className={cn("@container/chat relative flex min-h-0 flex-1 flex-col", className)}>
-      <div
-        aria-label="Chatverlauf"
-        className={cn(
-          "min-h-0 flex-1 cursor-default overflow-y-auto text-[13px] text-foreground",
-          "[--fade-edge:calc(100%_-_var(--composer-height,0px))]",
-          "[-webkit-mask-image:linear-gradient(to_bottom,#000_calc(var(--fade-edge)_-_40px),transparent_calc(var(--fade-edge)_+_16px))]",
-          "[mask-image:linear-gradient(to_bottom,#000_calc(var(--fade-edge)_-_40px),transparent_calc(var(--fade-edge)_+_16px))]",
-          "in-data-[surface=material]:p-0",
-        )}
-        onScroll={pruefeEnde}
-        onWheel={(event) => { if (!event.ctrlKey && event.deltaY < 0) pauseUp(event.currentTarget, event.target); }}
-        onKeyDown={(event) => {
-          const editable = event.target instanceof Element && event.target.closest("input, textarea, select, [contenteditable=true]");
-          if (!editable && (["ArrowUp", "PageUp", "Home"].includes(event.key) || event.target === event.currentTarget && event.key === " " && event.shiftKey)) pauseUp(event.currentTarget, event.target);
-        }}
-        onPointerDown={(event) => {
-          const viewport = event.currentTarget;
-          scrollbarDragging.current = event.clientX >= viewport.getBoundingClientRect().right - Math.max(16, viewport.offsetWidth - viewport.clientWidth);
-        }}
-        onTouchStart={(event) => { touchY.current = event.touches[0]?.clientY; }}
-        onTouchMove={(event) => {
-          const next = event.touches[0]?.clientY;
-          if (next !== undefined && touchY.current !== undefined && next > touchY.current) pauseUp(event.currentTarget, event.target);
-          touchY.current = next;
-        }}
-        role="region"
-        tabIndex={0}
-        ref={(element) => {
-          scrollBereich.current = element;
-          scrollerRef?.(element);
-        }}
-      >
-        {visible.length === 0 && !running ? (
-          emptyState ?? null
-        ) : (
-          <div
-            aria-live={announceMessages ? "polite" : "off"}
-            className={cn(
-              "mx-auto w-full max-w-[760px] px-5 pt-2 @max-[620px]/chat:px-3",
-              "pb-[calc(var(--composer-height,0px)_+_max(3.25em,40px))]",
-              "in-data-[surface=material]:px-3 in-data-[surface=material]:[&>*:first-child]:mt-0",
-            )}
-            ref={threadRef}
-          >
-            {bloecke}
-            {running && (working ?? <WorkingScenes label={alleTexte.working} />)}
-          </div>
-        )}
-      </div>
-      {!amEnde && (
-        <div className="pointer-events-none absolute inset-x-0 bottom-[calc(var(--composer-height,0px)_+_12px)] z-10 flex justify-center">
-          <Button aria-label={alleTexte.jumpToEnd} className="pointer-events-auto rounded-full border border-primary-foreground/20 shadow-md" size="icon" title={alleTexte.jumpToEnd} variant="default" onClick={() => {
-            if (scrollBereich.current) scroll.jump(scrollBereich.current);
-          }}>
-            <ChevronDownIcon />
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-
-  return <MarkdownLinks onLinkClick={onLinkClick}>{verlauf}</MarkdownLinks>;
-}
-
-/** Aufeinanderfolgende Schritte als Chips nebeneinander; bei Platzmangel bricht die Zeile um. */
-function StepRow({
-  messages,
-  mitText,
-  expandierbar,
-  texts,
-  toolArgumentsText,
-  toolLabel,
-}: {
-  messages: Message[];
-  mitText: boolean;
-  expandierbar: boolean;
-  texts: ChatTexts;
-  toolArgumentsText: (tool: ToolInfo) => string;
-  toolLabel?: string;
-}) {
-  const [detail, setDetail] = useState<{ key: string; position: { x: number; y: number } }>();
-  const offen = expandierbar && detail && messages.find((message) => message.key === detail.key);
-
-  return (
-    <div className={cn(stepClasses, "flex flex-wrap items-center gap-x-1.5 gap-y-1 pl-6")} data-step="row">
-      {messages.map((message) => {
-        const thinking = message.role === "thinking";
-        const tool = message.tool;
-        const state = stepState(message);
-        const running = state === "running" || state === "thinking";
-        const label = thinking ? texts.thinkingChip : toolLabel ?? (tool?.name || message.text || texts.toolChip);
-        const content = (
-          <>
-            {thinking ? (
-              <SparklesIcon size={11} />
-            ) : (
-              <WrenchIcon className={tool?.isError ? "text-destructive" : undefined} size={11} />
-            )}
-            {mitText && <span className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{label}</span>}
-            {mitText && <span className="inline-flex w-2.5 flex-none items-center justify-center text-success">{state === "done" && <CheckIcon size={10} />}</span>}
-          </>
-        );
-        const classes = cn(chipClasses, !mitText && "p-1", running && "animate-fade-pulse motion-reduce:animate-none");
-        if (!expandierbar) {
-          return (
-            <span className={classes} data-kind={thinking ? "thinking" : "tool"} data-state={state} data-step="chip" key={message.key} title={label}>
-              {content}
-            </span>
-          );
-        }
-        return (
-          <button
-            aria-haspopup="dialog"
-            className={cn(classes, chipInteractiveClasses)}
-            data-kind={thinking ? "thinking" : "tool"}
-            data-state={state}
-            data-step="chip"
-            key={message.key}
-            onClick={(event) => setDetail({ key: message.key, position: { x: event.clientX, y: event.clientY } })}
-            title={label}
-            type="button"
-          >
-            {content}
-          </button>
-        );
-      })}
-      {offen && detail && (
-        <StepPopover
-          message={offen}
-          position={detail.position}
-          texts={texts}
-          toolArgumentsText={toolArgumentsText}
-          onClose={() => setDetail(undefined)}
-        />
-      )}
-    </div>
-  );
-}
-
-/** Aufeinanderfolgende Schritte hinter einer Kopfzeile; aufgeklappt stehen sie als einzeilige Zeilen darunter. */
-function StepGroup({
-  messages,
-  aktiv,
-  expandierbar,
-  texts,
-  toolArgumentsText,
-}: {
-  messages: Message[];
-  aktiv: boolean;
-  expandierbar: boolean;
-  texts: ChatTexts;
-  toolArgumentsText: (tool: ToolInfo) => string;
-}) {
-  const [offen, setOffen] = useState(false);
-  const letzte = messages[messages.length - 1];
-  const fehler = messages.some((message) => message.tool?.isError);
-  const anzahl = messages.length === 1 ? texts.stepGroupOne : texts.stepGroupMany.replace("{count}", String(messages.length));
-  const laufend = aktiv ? (letzte.role === "thinking" ? texts.thinkingChip : letzte.tool?.name || letzte.text || texts.toolChip) : undefined;
-
-  return (
-    <div className={stepClasses} data-step="group">
-      <button
-        aria-expanded={offen}
-        className={cn(traceClasses, traceButtonClasses, "items-center pl-1", aktiv && "animate-fade-pulse motion-reduce:animate-none")}
-        onClick={() => setOffen((wert) => !wert)}
-        type="button"
-      >
-        <ChevronRightIcon className={cn("flex-none opacity-60 transition-transform", offen && "rotate-90")} size={12} />
-        <LayersIcon className={fehler ? traceErrorIconClasses : traceIconClasses} size={12} />
-        <span className={cn(traceLineClasses, "overflow-hidden text-ellipsis whitespace-nowrap")}>
-          {anzahl}
-          {laufend && <span className={traceRunningClasses}>{laufend} {texts.toolRunning}</span>}
-        </span>
-      </button>
-      {offen && (
-        <div className="mt-0.5 flex flex-col gap-0.5 pl-3">
-          {messages.map((message) => (
-            <TraceLine className="pl-3" expandierbar={expandierbar} key={message.key} message={message} texts={texts} toolArgumentsText={toolArgumentsText} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/** Ein Schritt als eine Zeile; mit Freigabe oeffnet ein Klick die Details im Popover. */
-function TraceLine({
-  message,
-  className,
-  expandierbar,
-  texts,
-  toolArgumentsText,
-}: {
-  message: Message;
-  className: string;
-  expandierbar: boolean;
-  texts: ChatTexts;
-  toolArgumentsText: (tool: ToolInfo) => string;
-}) {
-  const [detailPosition, setDetailPosition] = useState<{ x: number; y: number }>();
-  const thinking = message.role === "thinking";
-  const tool = message.tool;
-  const classes = cn(traceClasses, className);
-  const zeile = cn(traceLineClasses, thinking && "font-sans italic whitespace-pre-wrap", "overflow-hidden text-ellipsis whitespace-nowrap");
-  const inhalt = (
-    <>
-      {thinking ? (
-        <SparklesIcon className={traceIconClasses} size={12} />
-      ) : (
-        <WrenchIcon className={tool?.isError ? traceErrorIconClasses : traceIconClasses} size={12} />
-      )}
-      <span className={zeile}>
-        {message.text}
-        {tool && tool.result === undefined && <span className={traceRunningClasses}>{texts.toolRunning}</span>}
-      </span>
-    </>
-  );
-  const marks = { "data-compact": "true", "data-kind": thinking ? "thinking" : "tool", "data-step": "line" } as const;
-  if (!expandierbar) {
-    return <div className={classes} {...marks}>{inhalt}</div>;
-  }
-  return (
-    <>
-      <button
-        aria-expanded={detailPosition !== undefined}
-        aria-haspopup="dialog"
-        className={cn(classes, traceButtonClasses)}
-        {...marks}
-        onClick={(event) => setDetailPosition({ x: event.clientX, y: event.clientY })}
-        type="button"
-      >
-        {inhalt}
-      </button>
-      {detailPosition && (
-        <StepPopover
-          message={message}
-          position={detailPosition}
-          texts={texts}
-          toolArgumentsText={toolArgumentsText}
-          onClose={() => setDetailPosition(undefined)}
-        />
-      )}
-    </>
-  );
-}
-
-function Bubble({
-  message,
-  plain,
-  detailMode,
-  dicht,
-  expandierbar,
-  texts,
-  toolArgumentsText,
-  onAnswerQuestion,
-}: {
-  message: Message;
-  plain: boolean;
-  detailMode: DetailMode;
-  dicht: boolean;
-  expandierbar: boolean;
-  texts: ChatTexts;
-  toolArgumentsText: (tool: ToolInfo) => string;
-  onAnswerQuestion?: (callId: string, text: string) => void;
-}) {
-  const schritt = dicht ? denseStepClasses : stepClasses;
-
-  if (message.role === "thinking" || (message.role === "tool" && message.tool)) {
-    if (detailMode === "compact") {
-      return <TraceLine className={schritt} expandierbar={expandierbar} message={message} texts={texts} toolArgumentsText={toolArgumentsText} />;
-    }
-    const thinking = message.role === "thinking";
-    const tool = message.tool;
-    const icon = thinking ? (
-      <SparklesIcon className={traceIconClasses} size={12} />
-    ) : (
-      <WrenchIcon className={tool?.isError ? traceErrorIconClasses : traceIconClasses} size={12} />
-    );
-    const zeile = (
-      <>
-        {message.text}
-        {tool && tool.result === undefined && <span className={traceRunningClasses}>{texts.toolRunning}</span>}
-      </>
-    );
-    return (
-      <div className={cn(traceClasses, schritt)} data-kind={thinking ? "thinking" : "tool"} data-step="detail">
-        {icon}
-        <div className="min-w-0 flex-1">
-          <div className={cn(traceLineClasses, thinking && "font-sans italic whitespace-pre-wrap")}>{zeile}</div>
-          {tool && (
-            <div className="mt-0.5 border-l-2 border-border-soft pl-2">
-              <pre className="mb-0.5 max-h-[208px] overflow-auto font-mono text-[10.5px] leading-[1.375] break-all whitespace-pre-wrap opacity-80">{toolArgumentsText(tool)}</pre>
-              {tool.result !== undefined && (
-                <pre className={cn("mb-0.5 max-h-[208px] overflow-auto font-mono text-[10.5px] leading-[1.375] break-all whitespace-pre-wrap opacity-80",
-                  tool.isError && "text-destructive opacity-100")}>{prettyJson(tool.result)}</pre>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  if (message.role === "question" && message.question) {
-    return (
-      <div className={schritt}>
-        <QuestionCard
-          question={message.question}
-          text={message.text}
-          onAnswer={onAnswerQuestion ? (text) => onAnswerQuestion(message.question!.callId, text) : undefined}
-        />
-      </div>
-    );
-  }
-
-  if (message.role === "system") {
-    return (
-      <div className={cn(schritt, "border-l-2 border-destructive/50 pl-3 text-sm text-muted-foreground")} data-message="system">
-        <Markdown text={message.text} />
-        <MessageAttachments message={message} />
-      </div>
-    );
-  }
-
-  if (message.role === "user" && !message.bubble && !plain) {
-    return (
-      <div className={cn(schritt, "flex justify-end")} data-message="user">
-        <div className={cn(bubbleBodyClasses, "group rounded-[10px_10px_4px_10px] border border-border bg-secondary text-foreground [--scroll-cover:var(--secondary)]",
-          "in-data-[surface=material]:rounded-[9px] in-data-[surface=material]:border-glass-edge/20 in-data-[surface=material]:bg-primary/15 in-data-[surface=material]:text-foreground")}>
-          <Markdown text={message.text} />
-          <MessageAttachments message={message} />
-          <MessageCopy message={message} />
-        </div>
-      </div>
-    );
-  }
-
-  const inhalt = message.text.trim();
-  if (!inhalt && !message.attachments?.length) {
-    return null;
-  }
-
-  if (message.bubble && !plain) {
-    return (
-      <div data-chat-text-cursor={message.role === "assistant" && message.textCursor ? JSON.stringify(message.textCursor) : undefined}
-        className={cn(schritt, "flex", message.bubble.side === "end" ? "justify-end" : "justify-start")}
-        data-message="bubble" data-side={message.bubble.side === "end" ? "end" : "start"}>
-        <div className={cn(bubbleBodyClasses, "group rounded-lg text-white [--scroll-cover:var(--primary)]")} data-tone="on-color" style={{ background: message.bubble.color }}>
-          {message.bubble.label && <span className="mb-[5px] table rounded-full border border-white/30 bg-black/15 px-[7px] py-px text-[0.72rem] leading-[1.45] font-semibold tracking-[0.02em]">{message.bubble.label}</span>}
-          <Markdown text={message.text} streaming={message.role === "assistant" && !message.closed} />
-          <MessageAttachments message={message} />
-          <MessageCopy message={message} />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div data-chat-text-cursor={message.role === "assistant" && message.textCursor ? JSON.stringify(message.textCursor) : undefined}
-      className={cn(schritt, "group relative max-w-[92%] leading-[1.625] text-foreground @max-[620px]/chat:max-w-full")} data-message="answer">
-      <Markdown text={message.text} streaming={message.role === "assistant" && !message.closed} />
-      <MessageAttachments message={message} />
-      <MessageCopy message={message} />
-    </div>
-  );
-}
-
-function MessageCopy({ message }: { message: Message }) {
-  const [status, setStatus] = useState<"idle" | "copied" | "failed">("idle");
-  useEffect(() => {
-    if (status === "idle") return;
-    const timer = window.setTimeout(() => setStatus("idle"), 1800);
-    return () => window.clearTimeout(timer);
-  }, [status]);
-  if (message.role !== "user" || !message.text.trim()) return null;
-  const label = status === "copied" ? "Kopiert" : status === "failed" ? "Nachricht konnte nicht kopiert werden" : "Nachricht kopieren";
-  const copy = () => {
-    if (!navigator.clipboard) {
-      setStatus("failed");
-      return;
-    }
-    void navigator.clipboard.writeText(message.text)
-      .then(() => setStatus("copied"))
-      .catch(() => setStatus("failed"));
-  };
-  return (
-    <div className={messageActionsClasses}>
-      <Button aria-label={label} className="text-inherit" size="icon-sm" title={label} variant="ghost" onClick={copy}>
-        {status === "copied" ? <CheckIcon /> : status === "failed" ? <XIcon /> : <CopyIcon />}
-      </Button>
-    </div>
-  );
-}
-
-function MessageAttachments({ message }: { message: Message }) {
-  if (!message.attachments?.length) return null;
-  return (
-    <ul className="mt-2.5 flex flex-wrap gap-2" aria-label="Anhänge">
-      {message.attachments.map((attachment, index) => (
-        <li className="relative flex w-[190px] max-w-full min-w-0 flex-col overflow-hidden rounded-lg border border-border text-sm" key={`${attachment.url}-${index}`}>
-          {attachment.mediaType.startsWith("image/") && <a href={attachmentDownloadUrl(attachment.url)} download={attachment.name}><img className="block h-[112px] w-full bg-secondary object-contain" src={attachment.url} alt={attachment.name} loading="lazy" /></a>}
-          {attachment.mediaType.startsWith("video/") && <video className="block h-[112px] w-full bg-secondary object-contain" src={attachment.url} controls preload="metadata" aria-label={attachment.name} />}
-          <div className="flex flex-col gap-1 p-2 [overflow-wrap:anywhere]">
-            <a className="font-medium" href={attachmentDownloadUrl(attachment.url)} download={attachment.name}>{attachment.name}</a>
-            <small>{formatAttachmentSize(attachment.size)}</small>
-          </div>
-        </li>
-      ))}
-    </ul>
-  );
-}