@schlenkr/ragents 0.1.5 → 0.1.6

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

@@ -1,61 +0,0 @@
-import { useEffect, useRef, type ReactNode, type Ref } from "react";
-import { cn } from "cn";
-
-/**
- * Verlauf mit ueberlagerter Eingabe. Der Rahmen misst die Eingabe selbst und
- * gibt dem Verlauf den noetigen Fussraum, damit kein Host Innenmasse setzen muss.
- */
-export function ChatPanel({
-  children,
-  composer,
-  className,
-  nodeRef,
-}: {
-  children: ReactNode;
-  /** Die Eingabe; sie liegt ueber dem Verlauf, nicht darunter. */
-  composer?: ReactNode;
-  className?: string;
-  nodeRef?: Ref<HTMLDivElement>;
-}) {
-  const wurzel = useRef<HTMLDivElement>(null);
-  const eingabe = useRef<HTMLDivElement>(null);
-  const hasComposer = composer !== undefined;
-
-  useEffect(() => {
-    const element = eingabe.current;
-    const rahmen = wurzel.current;
-    if (!element || !rahmen) {
-      return;
-    }
-    const messen = () => rahmen.style.setProperty("--composer-height", `${element.offsetHeight}px`);
-    const beobachter = new ResizeObserver(messen);
-    beobachter.observe(element);
-    messen();
-    return () => {
-      beobachter.disconnect();
-      rahmen.style.removeProperty("--composer-height");
-    };
-  }, [hasComposer]);
-
-  return (
-    <div
-      className={cn("relative flex min-h-0 min-w-0 flex-col overflow-hidden", className)}
-      data-chat="panel"
-      ref={(element) => {
-        wurzel.current = element;
-        if (typeof nodeRef === "function") {
-          nodeRef(element);
-        } else if (nodeRef) {
-          nodeRef.current = element;
-        }
-      }}
-    >
-      {children}
-      {hasComposer && (
-        <div className="absolute inset-x-0 bottom-0 z-[5] px-6 pb-3.5 *:mx-auto *:max-w-composer" data-chat="composer" ref={eingabe}>
-          {composer}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,58 +0,0 @@
-import { SparklesIcon } from "lucide-react";
-import { Button } from "../ui";
-import { DetailMode } from "./types";
-import { ChatTexts, defaultTexts } from "./texts";
-
-export const DETAIL_MODES: readonly DetailMode[] = ["off", "current", "icons", "chips", "grouped", "compact", "full"];
-
-const TEXT_KEYS: Record<DetailMode, keyof ChatTexts> = {
-  off: "detailModeOff",
-  current: "detailModeCurrent",
-  icons: "detailModeIcons",
-  chips: "detailModeChips",
-  grouped: "detailModeGrouped",
-  compact: "detailModeCompact",
-  full: "detailModeFull",
-};
-
-export const detailModeLabel = (mode: DetailMode, texts?: Partial<ChatTexts>): string =>
-  ({ ...defaultTexts, ...texts })[TEXT_KEYS[mode]];
-
-/**
- * Ein Knopf, der den Detailgrad der Denk- und Werkzeug-Schritte weiterschaltet. Die
- * Reihenfolge kommt aus `modes`, der aktuelle Wert steht als Beschriftung daneben.
- */
-export function DetailModeSwitch({
-  mode,
-  onChange,
-  modes = DETAIL_MODES,
-  collapsible = true,
-  texts,
-  className,
-}: {
-  mode: DetailMode;
-  onChange: (mode: DetailMode) => void;
-  /** Auswahl und Reihenfolge des Weiterschaltens; Default sind alle Modi. */
-  modes?: readonly DetailMode[];
-  /** false = die Beschriftung bleibt auch in einer schmalen Eingabe-Karte stehen. */
-  collapsible?: boolean;
-  texts?: Partial<ChatTexts>;
-  className?: string;
-}) {
-  const alleTexte = { ...defaultTexts, ...texts };
-  const aktuell = modes.indexOf(mode);
-  const naechster = modes[(aktuell < 0 ? 0 : aktuell + 1) % modes.length];
-  return (
-    <Button
-      aria-label={`${alleTexte.detailModeTitle}: ${detailModeLabel(mode, texts)}`}
-      className={className}
-      onClick={() => onChange(naechster)}
-      size="sm"
-      title={`${alleTexte.detailModeTitle}: ${detailModeLabel(mode, texts)}`}
-      variant="ghost"
-    >
-      <SparklesIcon />
-      <span className={collapsible ? "in-data-[compact=true]:hidden" : undefined}>{detailModeLabel(mode, texts)}</span>
-    </Button>
-  );
-}

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

@@ -1,104 +0,0 @@
-import { createContext, ReactNode, useContext } from "react";
-import { cn } from "cn";
-import { Streamdown, type Components } from "streamdown";
-
-export type LinkClickHandler = (href: string, label: string) => boolean;
-
-const LinkClickContext = createContext<LinkClickHandler | undefined>(undefined);
-
-export function MarkdownLinks({ children, onLinkClick }: { children: ReactNode; onLinkClick?: LinkClickHandler }) {
-  return <LinkClickContext.Provider value={onLinkClick}>{children}</LinkClickContext.Provider>;
-}
-
-function MarkdownLink({ href, children }: { href?: string; children?: ReactNode }) {
-  const onLinkClick = useContext(LinkClickContext);
-  if (!href || href === "streamdown:incomplete-link") {
-    return <span>{children}</span>;
-  }
-  return (
-    <a
-      className="text-primary [text-underline-offset:2px] in-data-[tone=on-color]:text-inherit in-data-[tone=on-color]:underline"
-      href={href}
-      onClick={(event) => {
-        if (href && onLinkClick?.(href, event.currentTarget.textContent ?? "")) {
-          event.preventDefault();
-        }
-      }}
-      rel="noreferrer"
-      target="_blank"
-    >
-      {children}
-    </a>
-  );
-}
-
-// Waagerechte Rollbalken bleiben sichtbar - sonst ist der Ueberlauf nicht auffindbar.
-const scrollbar = "[scrollbar-width:thin] [&::-webkit-scrollbar]:block [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border";
-
-// Die Deckstreifen verbergen den Umbruch am Rand; --scroll-cover kommt aus der umgebenden Blase.
-const scrollCover = "bg-[linear-gradient(to_right,var(--scroll-cover,var(--background))_50%,transparent)_left/20px_100%_no-repeat_local,linear-gradient(to_left,var(--scroll-cover,var(--background))_50%,transparent)_right/20px_100%_no-repeat_local,linear-gradient(to_right,#00000047,transparent)_left/14px_100%_no-repeat_scroll,linear-gradient(to_left,#00000047,transparent)_right/14px_100%_no-repeat_scroll]";
-
-const headingClasses = "mt-3 mb-1 text-[15px] font-medium";
-const cellClasses = "max-w-[44ch] border border-border px-2 py-1 text-left align-top in-data-[tone=on-color]:border-white/35";
-
-const components: Components = {
-  h1: ({ children }) => <h1 className="mt-3 mb-1 text-lg font-semibold">{children}</h1>,
-  h2: ({ children }) => <h2 className={headingClasses}>{children}</h2>,
-  h3: ({ children }) => <h3 className={headingClasses}>{children}</h3>,
-  h4: ({ children }) => <h4 className="mt-2 mb-1 text-base font-medium">{children}</h4>,
-  h5: ({ children }) => <h5 className="mt-2 mb-1 text-base font-medium">{children}</h5>,
-  h6: ({ children }) => <h6 className="mt-2 mb-1 text-base font-medium">{children}</h6>,
-  p: ({ children }) => <p className="[p+&]:mt-2">{children}</p>,
-  ul: ({ children }) => <ul className="my-2 list-disc pl-6 [li>&]:my-0">{children}</ul>,
-  ol: ({ children }) => <ol className="my-2 list-decimal pl-6 [li>&]:my-0">{children}</ol>,
-  li: ({ children }) => <li className="marker:text-muted-foreground in-data-[tone=on-color]:marker:text-inherit">{children}</li>,
-  hr: () => <hr className="my-3 border-t border-border" />,
-  img: ({ src, alt }) => <img alt={alt} className="h-auto max-w-full" src={typeof src === "string" ? src : undefined} />,
-  blockquote: ({ children }) => (
-    <blockquote className="my-1 border-l-2 border-border pl-3 text-muted-foreground in-data-[tone=on-color]:border-white/50 in-data-[tone=on-color]:text-inherit">{children}</blockquote>
-  ),
-  strong: ({ children }) => <strong className="font-medium">{children}</strong>,
-  em: ({ children }) => <em>{children}</em>,
-  a: ({ href, children }) => <MarkdownLink href={href}>{children}</MarkdownLink>,
-  pre: ({ children }) => (
-    <pre className={cn(scrollbar, "my-2 overflow-x-auto rounded-lg bg-secondary px-3 py-2 font-mono text-sm leading-relaxed in-data-[tone=on-color]:bg-black/30 in-data-[tone=on-color]:text-inherit")}>{children}</pre>
-  ),
-  code: ({ children, className }) => (
-    <code className={cn(className, "rounded-sm bg-secondary px-1 py-0.5 font-mono text-sm [overflow-wrap:anywhere] in-data-[tone=on-color]:bg-white/20 in-data-[tone=on-color]:text-inherit", "[pre>&]:bg-transparent [pre>&]:p-0")}>{children}</code>
-  ),
-  // Ohne max-content schrumpft die Tabelle auf den Container und stapelt Buchstaben.
-  table: ({ children }) => (
-    <div className={cn(scrollbar, scrollCover, "my-2 overflow-x-auto")}>
-      <table className="w-max min-w-full border-collapse text-sm">{children}</table>
-    </div>
-  ),
-  thead: ({ children }) => <thead>{children}</thead>,
-  tbody: ({ children }) => <tbody>{children}</tbody>,
-  tr: ({ children }) => <tr>{children}</tr>,
-  th: ({ children }) => <th className={cn(cellClasses, "bg-secondary font-medium in-data-[tone=on-color]:bg-white/15 in-data-[tone=on-color]:text-inherit")}>{children}</th>,
-  td: ({ children }) => <td className={cellClasses}>{children}</td>,
-};
-
-function transformUrl(url: string) {
-  if (/^ablauf:(actor|input|turn|subscription|action|artifact)\/.+/.test(url)) return url;
-  const scheme = /^[^/?#]*:/.exec(url);
-  return !scheme || /^(https?|mailto|tel|ftp|irc|ircs|xmpp):$/i.test(scheme[0]) ? url : "";
-}
-
-export function Markdown({ text, streaming = false }: { text: string; streaming?: boolean }) {
-  return (
-    <Streamdown
-      className="space-y-0 text-inherit"
-      mode={streaming ? "streaming" : "static"}
-      isAnimating={streaming}
-      parseIncompleteMarkdown={streaming}
-      components={components}
-      controls={false}
-      rehypePlugins={[]}
-      urlTransform={transformUrl}
-      skipHtml
-    >
-      {text}
-    </Streamdown>
-  );
-}

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

@@ -1,82 +0,0 @@
-import { useMemo } from "react";
-import { SparklesIcon, WrenchIcon, XIcon } from "lucide-react";
-import { Button, cn, Popover, PopoverContent } from "../ui";
-import { Message, prettyJson } from "./types";
-import { ChatTexts } from "./texts";
-
-const preClasses = "rounded-lg bg-secondary p-3 font-mono text-[11px] leading-[1.625] break-all whitespace-pre-wrap";
-
-export function StepPopover({
-  message,
-  position,
-  texts,
-  toolArgumentsText,
-  onClose,
-}: {
-  message: Message;
-  position: { x: number; y: number };
-  texts: ChatTexts;
-  toolArgumentsText: (tool: NonNullable<Message["tool"]>) => string;
-  onClose: () => void;
-}) {
-  const anchor = useMemo(() => ({
-    getBoundingClientRect: () => new DOMRect(position.x, position.y, 0, 0),
-    contextElement: document.documentElement,
-  }), [position]);
-  const tool = message.tool;
-  const thinking = message.role === "thinking";
-  const title = thinking ? texts.thinkingTitle : texts.toolTitle;
-
-  return (
-    <Popover open onOpenChange={(open) => { if (!open) onClose(); }}>
-      <PopoverContent
-        align="start"
-        anchor={anchor}
-        aria-label={title}
-        className={cn(
-          "w-[min(680px,calc(100vw-32px))] gap-0 overflow-hidden p-0 text-[13px] shadow-pop",
-          thinking ? "max-h-none" : "max-h-[min(70vh,620px)]",
-        )}
-        collisionPadding={16}
-        side="bottom"
-        sideOffset={10}
-      >
-        <div className="flex flex-none items-center gap-2 border-b border-border-soft px-4 py-2.5">
-          {thinking ? (
-            <SparklesIcon className="text-muted-foreground" size={14} />
-          ) : (
-            <WrenchIcon className={tool?.isError ? "text-destructive" : "text-muted-foreground"} size={14} />
-          )}
-          <span className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-medium">{title}</span>
-          <Button aria-label={texts.close} className="flex-none" onClick={onClose} size="icon-sm" title={texts.close} variant="ghost">
-            <XIcon />
-          </Button>
-        </div>
-        <div className={cn("min-h-0 p-4", thinking ? "overflow-visible" : "overflow-auto")}>
-          {thinking ? (
-            <div className="text-sm leading-[1.625] whitespace-pre-wrap">{message.text}</div>
-          ) : tool ? (
-            <div className="flex flex-col gap-4">
-              <div className="font-mono text-sm">{message.text}</div>
-              <PopoverSection label={texts.argumentsLabel} value={toolArgumentsText(tool)} />
-              {tool.result === undefined ? (
-                <div className="text-sm text-muted-foreground">{texts.toolStillRunning}</div>
-              ) : (
-                <PopoverSection error={tool.isError} label={texts.resultLabel} value={prettyJson(tool.result)} />
-              )}
-            </div>
-          ) : null}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function PopoverSection({ label, value, error = false }: { label: string; value: string; error?: boolean }) {
-  return (
-    <section>
-      <h3 className="mb-1.5 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground uppercase">{label}</h3>
-      <pre className={cn(preClasses, error && "text-destructive")}>{value}</pre>
-    </section>
-  );
-}

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

@@ -1,235 +0,0 @@
-import { useEffect, useState } from "react";
-import { cn } from "cn";
-
-const SPUR = 13;
-const GRUNDTAKT_MS = 90;
-const SZENENWECHSEL_MS = 2600;
-
-/** Eine Zelle je Figur: Emoji und Satzzeichen teilen sich kein Raster, geschobener Text ruckelt. */
-function bahn(figuren: Record<number, string>, breite = SPUR): string[] {
-  return Array.from({ length: breite }, (_, x) => figuren[x] ?? " ");
-}
-
-interface Szene {
-  id: string;
-  takt: number;
-  laufend?: true;
-  compact?: true;
-  zeichne: (schritt: number) => string | string[];
-}
-
-/**
- * Kleine Szenen, in denen etwas Erkennbares passiert - der Zustand aendert sich sichtbar,
- * statt dass nur eine Figur vorbeilaeuft. Szenen mit Bewegung geben ihre Bahn als Zellen
- * zurueck, alle anderen als schlichten Text.
- */
-const SZENEN: Szene[] = [
-  {
-    id: "denken",
-    takt: 2,
-    zeichne: (schritt) => {
-      const takt = schritt % 10;
-      if (takt >= 8) return "\u{1F929}\u{1F4A1}";
-      return "\u{1F914}" + "\u{1F4AD}".repeat(Math.min(takt, 3));
-    },
-  },
-  {
-    // Fliegt nach rechts und zieht ihren Schweif hinterher.
-    id: "rakete",
-    takt: 2,
-    laufend: true,
-    zeichne: (schritt) => {
-      const x = schritt % SPUR;
-      return bahn({ [x - 2]: "·", [x - 1]: "\u{1F4A8}", [x]: "\u{1F680}" });
-    },
-  },
-  {
-    // Die Punkte bleiben stehen und werden einzeln gefressen.
-    id: "pacman",
-    takt: 2,
-    laufend: true,
-    zeichne: (schritt) => {
-      const x = schritt % SPUR;
-      const figuren: Record<number, string> = {};
-      for (let i = x + 1; i < SPUR; i++) {
-        figuren[i] = "·";
-      }
-      figuren[x] = schritt % 2 === 0 ? "\u{1F7E1}" : "\u{1F315}";
-      return bahn(figuren);
-    },
-  },
-  {
-    // Aus einem Samen wird ein Baum, dann von vorn.
-    id: "wachsen",
-    compact: true,
-    takt: 2,
-    zeichne: (schritt) => {
-      const stufen = ["\u{1F331}", "\u{1F331}", "\u{1F33F}", "\u{1F33F}", "\u{1F343}", "\u{1F333}", "\u{1F333}", "\u{1F333}"];
-      return stufen[schritt % stufen.length];
-    },
-  },
-  {
-    // Das Ei bekommt Risse, das Kueken schluepft.
-    id: "schluepfen",
-    compact: true,
-    takt: 2,
-    zeichne: (schritt) => {
-      const takt = schritt % 12;
-      if (takt < 4) return "\u{1F95A}";
-      if (takt < 6) return "\u{1F95A}*";
-      if (takt < 9) return "\u{1F423}";
-      return "\u{1F425}";
-    },
-  },
-  {
-    // Morse-artiges Signal, das sich zu einem OK aufloest.
-    id: "signal",
-    takt: 2,
-    zeichne: (schritt) => {
-      const takt = schritt % 14;
-      if (takt >= 11) return "\u{1F4E1} OK";
-      const muster = ["·", "··", "·-", "-·", "··-", "-··"];
-      return "\u{1F4E1} " + muster[takt % muster.length];
-    },
-  },
-  {
-    // Sanduhr: der Sand laeuft durch, dann wird gedreht.
-    id: "sanduhr",
-    takt: 2,
-    zeichne: (schritt) => {
-      const takt = schritt % 12;
-      const koerner = "·".repeat(Math.max(0, 5 - Math.floor(takt / 2)));
-      return (takt < 10 ? "⏳" : "⌛") + " " + koerner;
-    },
-  },
-  {
-    // Ei, Kueken, Henne - und die legt das naechste Ei.
-    id: "huhn-kreislauf",
-    compact: true,
-    takt: 3,
-    zeichne: (schritt) => {
-      const takt = schritt % 16;
-      if (takt < 3) return "\u{1F95A}";
-      if (takt < 5) return "\u{1F95A}*";
-      if (takt < 8) return "\u{1F423}";
-      if (takt < 11) return "\u{1F424}";
-      if (takt < 14) return "\u{1F414}";
-      return "\u{1F414}\u{1F95A}";
-    },
-  },
-  {
-    // Hut, Funken - und das Kaninchen tuermt.
-    id: "zauberhut",
-    compact: true,
-    takt: 3,
-    zeichne: (schritt) => {
-      const takt = schritt % 14;
-      if (takt < 4) return "\u{1F3A9}";
-      if (takt < 7) return "\u{1F3A9}*";
-      if (takt < 11) return "\u{1F3A9}\u{1F407}";
-      return "\u{1F407}\u{1F4A8}";
-    },
-  },
-  {
-    // Rot, Gelb, Gruen - und ab.
-    id: "ampel",
-    compact: true,
-    takt: 3,
-    zeichne: (schritt) => {
-      const takt = schritt % 12;
-      if (takt < 4) return "\u{1F534}";
-      if (takt < 6) return "\u{1F7E1}";
-      if (takt < 8) return "\u{1F7E2}";
-      return "\u{1F697}\u{1F4A8}";
-    },
-  },
-  {
-    // Klingeln, verschlafen, losrennen.
-    id: "wecker",
-    compact: true,
-    takt: 2,
-    zeichne: (schritt) => {
-      const takt = schritt % 14;
-      if (takt < 5) return takt % 2 === 0 ? "⏰" : "\u{1F514}";
-      if (takt < 8) return "\u{1F634}";
-      if (takt < 10) return "\u{1F633}";
-      return "\u{1F3C3}\u{1F4A8}";
-    },
-  },
-  {
-    // Schnecke kriecht zur Flagge - und feiert.
-    id: "schnecke",
-    takt: 4,
-    zeichne: (schritt) => {
-      const takt = schritt % 8;
-      if (takt < 5) return bahn({ [takt]: "\u{1F40C}", 4: "\u{1F3C1}" }, 5);
-      return bahn({ 4: "\u{1F389}" }, 5);
-    },
-  },
-];
-
-const COMPACT_SCENES = SZENEN.filter((scene) => scene.compact);
-
-export interface WorkingScenesProps {
-  /** Limits scenes to one or two visible characters for small status fields. */
-  compact?: boolean;
-  /** Text fuer Screenreader, Default "Arbeitet ...". */
-  label?: string;
-}
-
-/**
- * Der Default-Working-Indikator: zufaellig rotierende Mini-Szenen. Zufaellige Reihenfolge
- * und Startphase, damit dieselben Szenen nie wie eine Schleife wirken. Ueber die
- * working-Prop von ChatMessages laesst er sich komplett ersetzen.
- */
-export function WorkingScenes({ label = "Arbeitet ...", compact = false }: WorkingScenesProps) {
-  const scenes = compact ? COMPACT_SCENES : SZENEN;
-  const [sceneIndex, setSceneIndex] = useState(() => Math.floor(Math.random() * scenes.length));
-  const [offset, setOffset] = useState(() => Math.floor(Math.random() * 20));
-  const [frameTick, setFrameTick] = useState(0);
-  const [reducedMotion, setReducedMotion] = useState(() => typeof window !== "undefined"
-    && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
-  const scene = scenes[sceneIndex % scenes.length];
-
-  useEffect(() => {
-    const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const update = () => setReducedMotion(preference.matches);
-    preference.addEventListener("change", update);
-    update();
-    return () => preference.removeEventListener("change", update);
-  }, []);
-
-  useEffect(() => {
-    if (reducedMotion) return;
-    const timer = window.setInterval(() => {
-      setSceneIndex((previous) => (previous + 1 + Math.floor(Math.random() * (scenes.length - 1))) % scenes.length);
-      setOffset(Math.floor(Math.random() * 20));
-      setFrameTick(0);
-    }, SZENENWECHSEL_MS);
-    return () => window.clearInterval(timer);
-  }, [reducedMotion, scenes]);
-
-  useEffect(() => {
-    if (reducedMotion) return;
-    const timer = window.setInterval(() => setFrameTick((value) => value + 1), GRUNDTAKT_MS);
-    return () => window.clearInterval(timer);
-  }, [reducedMotion]);
-
-  const frame = scene.zeichne(Math.floor(frameTick / scene.takt) + (scene.laufend ? offset : 0));
-  return (
-    <span aria-label={label} className={cn("flex items-center gap-2.5 text-[13px]", compact ? "text-inherit" : "mt-4 text-foreground")} data-chat="working" role="status">
-      {!compact && <span aria-hidden="true" className="text-muted-foreground opacity-70">&gt;</span>}
-      <span aria-hidden="true" className={cn("inline-block flex-none font-mono [font-variant-ligatures:none]", compact ? "w-[2.4em] text-center" : "w-[15rem]")} key={scene.id}>
-        <span className="tracking-[0.02em] whitespace-pre motion-reduce:opacity-60">
-          {typeof frame === "string"
-            ? frame
-            : frame.map((cell, index) => (
-                <span className="inline-block w-[1.35em] text-center" key={index}>
-                  {cell}
-                </span>
-              ))}
-        </span>
-      </span>
-    </span>
-  );
-}

package/apps/web/src/chat/attachments.ts

@@ -1,53 +0,0 @@
-import type { ChatAttachmentInput } from "../../../server/src/chat-events";
-
-import { chatAttachmentMediaType, MAX_CHAT_ATTACHMENTS, MAX_CHAT_ATTACHMENT_BYTES } from "../../../server/src/chat-attachments";
-
-export { MAX_CHAT_ATTACHMENTS, MAX_CHAT_ATTACHMENT_BYTES };
-
-export function attachmentMediaType(file: { name: string; type: string }): string {
-  return chatAttachmentMediaType(file.name, file.type);
-}
-
-export function attachmentCapabilityError(
-  files: readonly { name: string; mediaType: string }[],
-  capabilities: { input: readonly string[]; model: string },
-): string | undefined {
-  for (const file of files) {
-    const required = file.mediaType.startsWith("image/") ? "image"
-      : file.mediaType.startsWith("video/") ? "video" : file.mediaType === "application/pdf" ? "file" : undefined;
-    if (required && !capabilities.input.includes(required)) {
-      if (!capabilities.model) return `Dieser Chat unterstützt ${file.name} nicht als ${required === "image" ? "Bild" : required === "video" ? "Video" : "PDF"}. Entferne den Anhang.`;
-      return `Das Modell ${capabilities.model} unterstützt ${file.name} nicht als ${required === "image" ? "Bild" : required === "video" ? "Video" : "PDF"}. Wähle ein passendes Modell oder entferne den Anhang.`;
-    }
-  }
-}
-
-export function validateAttachmentSelection(existing: readonly { size: number }[], incoming: readonly { size: number }[]): void {
-  if (existing.length + incoming.length > MAX_CHAT_ATTACHMENTS) {
-    throw new Error(`Höchstens ${MAX_CHAT_ATTACHMENTS} Anhänge pro Nachricht. Entferne zuerst einen Anhang.`);
-  }
-  if ([...existing, ...incoming].reduce((total, file) => total + file.size, 0) > MAX_CHAT_ATTACHMENT_BYTES) {
-    throw new Error("Anhänge dürfen zusammen höchstens 20 MiB groß sein. Wähle kleinere Dateien.");
-  }
-}
-
-export async function encodeAttachment(file: File): Promise<ChatAttachmentInput> {
-  const bytes = new Uint8Array(await file.arrayBuffer());
-  const chunks: string[] = [];
-  for (let offset = 0; offset < bytes.length; offset += 8192) {
-    chunks.push(String.fromCharCode(...bytes.subarray(offset, offset + 8192)));
-  }
-  return { name: file.name, mediaType: attachmentMediaType(file), data: btoa(chunks.join("")) };
-}
-
-export function formatAttachmentSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MiB`;
-}
-
-export function attachmentDownloadUrl(url: string): string {
-  if (/^(data|blob):/i.test(url)) return url;
-  const [resource, fragment] = url.split(/#(.*)/s);
-  return `${resource}${resource.includes("?") ? "&" : "?"}download=1${fragment === undefined ? "" : `#${fragment}`}`;
-}

package/apps/web/src/chat/chat-scroll.ts

@@ -1,41 +0,0 @@
-interface ScrollViewport {
-  scrollTop: number;
-  readonly scrollHeight: number;
-  readonly clientHeight: number;
-}
-
-const atEnd = (viewport: ScrollViewport) => viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <= 24;
-
-export function createChatScroll(onFollowChange: (following: boolean) => void) {
-  let following = true;
-  let lastTop = 0;
-
-  const follow = (value: boolean) => {
-    if (following === value) return;
-    following = value;
-    onFollowChange(value);
-  };
-  const layout = (viewport: ScrollViewport, dragging = false) => {
-    if (viewport.clientHeight <= 0) return;
-    if (dragging && viewport.scrollTop < lastTop && !atEnd(viewport)) follow(false);
-    if (following) viewport.scrollTop = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
-    else if (viewport.scrollHeight <= viewport.clientHeight) follow(true);
-    lastTop = viewport.scrollTop;
-  };
-  return {
-    layout,
-    pause(viewport: ScrollViewport) {
-      if (viewport.scrollTop > 0) follow(false);
-    },
-    scroll(viewport: ScrollViewport, dragging = false) {
-      if (viewport.clientHeight <= 0) return;
-      if (atEnd(viewport)) follow(true);
-      else if (dragging && viewport.scrollTop < lastTop) follow(false);
-      lastTop = viewport.scrollTop;
-    },
-    jump(viewport: ScrollViewport) {
-      follow(true);
-      layout(viewport);
-    },
-  };
-}