quassel 0.1.0

package/index.js

@@ -0,0 +1,1661 @@
+import {
+  applyEvent,
+  compactToolLine,
+  prettyJson
+} from "./chunk-DOLTANTM.js";
+
+// packages/quassel/src/types.ts
+function stepState(message) {
+  if (message.tool?.isError) {
+    return "error";
+  }
+  if (message.role === "thinking") {
+    return message.closed ? "done" : "thinking";
+  }
+  return message.tool !== void 0 && message.tool.result === void 0 ? "running" : "done";
+}
+
+// packages/quassel/src/texts.ts
+var defaultTexts = {
+  working: "Arbeitet ...",
+  toolRunning: "l\xE4uft ...",
+  toolStillRunning: "Werkzeug l\xE4uft ...",
+  thinkingChip: "Denken",
+  stepGroupOne: "1 Schritt",
+  stepGroupMany: "{count} Schritte",
+  stepGroupCollapse: "Einklappen",
+  thinkingTitle: "Thinking-Trace",
+  toolTitle: "Tool-Call",
+  argumentsLabel: "Argumente",
+  resultLabel: "Ergebnis",
+  close: "Schlie\xDFen",
+  jumpToEnd: "Zum Ende springen",
+  send: "Senden",
+  sendIntoRun: "In den laufenden Lauf schicken",
+  stop: "Lauf abbrechen",
+  placeholder: "Nachricht schreiben ...",
+  steeringPlaceholder: "Dazwischenfunken ...",
+  timestamps: "Zeitstempel",
+  messageActions: "Nachrichtenaktionen",
+  questionSubmit: "Auswahl \xFCbernehmen",
+  questionPlaceholder: "... oder frei antworten",
+  questionAnswer: "Antworten",
+  copyMessage: "Nachricht kopieren",
+  copyCode: "Code kopieren",
+  copied: "Kopiert",
+  copyFailed: "Kopieren ist nicht verf\xFCgbar.",
+  editMessage: "Nachricht bearbeiten",
+  retryMessage: "Erneut senden",
+  detailModeTitle: "Detailgrad der Schritte",
+  detailModeOff: "nur Antworten",
+  detailModeIcons: "Symbole",
+  detailModeChips: "kompakt",
+  detailModeGrouped: "gruppiert",
+  detailModeCompact: "einzeilig",
+  detailModeFull: "alles"
+};
+
+// packages/quassel/src/useChat.ts
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+function useChat(baseUrl, headers = {}, onEvent) {
+  const [messages, dispatch] = useReducer(applyEvent, []);
+  const [running, setRunning] = useState(false);
+  const [connected, setConnected] = useState(false);
+  const url = useRef(baseUrl);
+  url.current = baseUrl;
+  const zusatz = useRef(headers);
+  zusatz.current = headers;
+  const observer = useRef(onEvent);
+  observer.current = onEvent;
+  useEffect(() => {
+    const controller = new AbortController();
+    let active = true;
+    async function verbinden() {
+      while (active) {
+        try {
+          const response = await fetch(`${url.current}/stream`, {
+            headers: { Accept: "text/event-stream", ...zusatz.current },
+            signal: controller.signal
+          });
+          if (!response.ok || !response.body) {
+            throw new Error(`Stream fehlgeschlagen: ${response.status}`);
+          }
+          setConnected(true);
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          let puffer = "";
+          for (; ; ) {
+            const { done, value } = await reader.read();
+            if (done) {
+              break;
+            }
+            puffer += decoder.decode(value, { stream: true });
+            const teile = puffer.split("\n\n");
+            puffer = teile.pop() ?? "";
+            for (const teil of teile) {
+              const daten = teil.split("\n").filter((zeile) => zeile.startsWith("data:")).map((zeile) => zeile.slice(5).trim()).join("");
+              if (!daten) {
+                continue;
+              }
+              const event = JSON.parse(daten);
+              if (event.kind === "status") {
+                setRunning(event.running);
+              }
+              observer.current?.(event);
+              dispatch(event);
+            }
+          }
+        } catch {
+          if (!active) {
+            return;
+          }
+        }
+        setConnected(false);
+        await new Promise((resolve) => setTimeout(resolve, 3e3));
+      }
+    }
+    void verbinden();
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, []);
+  const send = useCallback(async (text) => {
+    await fetch(`${url.current}/send`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...zusatz.current },
+      body: JSON.stringify({ text })
+    });
+  }, []);
+  const stop = useCallback(async () => {
+    await fetch(`${url.current}/stop`, { method: "POST", headers: { ...zusatz.current } });
+  }, []);
+  return { messages, running, connected, send, stop };
+}
+
+// packages/quassel/src/ChatMessages.tsx
+import { useCallback as useCallback2, useContext as useContext3, useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useMemo, useRef as useRef5, useState as useState7 } from "react";
+
+// packages/quassel/src/options.ts
+var length = (value) => typeof value === "number" ? `${value}px` : value;
+function appearanceStyle(appearance) {
+  return {
+    "--qsl-chat-font-size": length(appearance?.fontSize),
+    "--qsl-chat-line-height": appearance?.lineHeight,
+    "--qsl-message-gap": length(appearance?.messageGap),
+    "--qsl-dense-message-gap": length(appearance?.denseMessageGap)
+  };
+}
+
+// packages/quassel/src/timestamps.ts
+function timestampDate(at) {
+  if (!at) return void 0;
+  const date = new Date(at);
+  return Number.isNaN(date.getTime()) ? void 0 : date;
+}
+function formatTimestamp(date, options = {}, now = Date.now()) {
+  if (options.format === "relative") {
+    const seconds = (date.getTime() - now) / 1e3;
+    const [unit, divisor] = Math.abs(seconds) < 60 ? ["second", 1] : Math.abs(seconds) < 3600 ? ["minute", 60] : Math.abs(seconds) < 86400 ? ["hour", 3600] : ["day", 86400];
+    return new Intl.RelativeTimeFormat(options.locale ?? "de", { numeric: "auto" }).format(Math.round(seconds / divisor), unit);
+  }
+  if (options.format === "date-time") {
+    return new Intl.DateTimeFormat(options.locale ?? "de", {
+      dateStyle: "short",
+      timeStyle: "short",
+      timeZone: options.timeZone
+    }).format(date);
+  }
+  if (!options.locale && !options.timeZone) {
+    return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+  }
+  return new Intl.DateTimeFormat(options.locale ?? "de", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23",
+    timeZone: options.timeZone
+  }).format(date);
+}
+function timestampDay(date, timeZone) {
+  return new Intl.DateTimeFormat("en-CA", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    calendar: "gregory",
+    numberingSystem: "latn",
+    timeZone
+  }).format(date);
+}
+function formatDay(date, options) {
+  return new Intl.DateTimeFormat(options?.locale ?? "de", {
+    dateStyle: "long",
+    timeZone: options?.timeZone
+  }).format(date);
+}
+
+// packages/quassel/src/MessageActions.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ActionButton({ label, icon, disabled, onClick, successLabel }) {
+  const pending = useRef2(false);
+  const [status, setStatus] = useState2("idle");
+  const [error, setError] = useState2();
+  useEffect2(() => {
+    if (status !== "done") return;
+    const timer = window.setTimeout(() => setStatus("idle"), 1800);
+    return () => window.clearTimeout(timer);
+  }, [status]);
+  const run = async () => {
+    if (pending.current) return;
+    pending.current = true;
+    setStatus("pending");
+    setError(void 0);
+    try {
+      await onClick();
+      setStatus("done");
+    } catch (failure) {
+      setStatus("idle");
+      setError(failure instanceof Error ? failure.message : String(failure));
+    } finally {
+      pending.current = false;
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("button", { className: "qsl-icon-button", type: "button", disabled: disabled || status === "pending", onClick: () => void run(), children: [
+      icon,
+      status === "done" && successLabel ? successLabel : label
+    ] }),
+    error && /* @__PURE__ */ jsx("span", { className: "qsl-action-error", role: "alert", children: error })
+  ] });
+}
+async function copyText(text, error) {
+  if (!navigator.clipboard) throw new Error(error);
+  await navigator.clipboard.writeText(text);
+}
+function MessageActions({ message, options, texts }) {
+  if (!options) return null;
+  const copy = typeof options.copy === "function" ? options.copy(message) : options.copy;
+  const edit = message.role === "user" ? options.edit : void 0;
+  const retry = message.role === "assistant" ? options.retry : void 0;
+  const custom = options.custom?.(message) ?? [];
+  if (!copy && !edit && !retry && custom.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "qsl-message-actions", role: "group", "aria-label": texts.messageActions, children: [
+    copy && /* @__PURE__ */ jsx(ActionButton, { label: texts.copyMessage, successLabel: texts.copied, onClick: () => copyText(message.text, texts.copyFailed) }),
+    edit && /* @__PURE__ */ jsx(ActionButton, { label: texts.editMessage, onClick: () => edit(message) }),
+    retry && /* @__PURE__ */ jsx(ActionButton, { label: texts.retryMessage, onClick: () => retry(message) }),
+    custom.map((action) => /* @__PURE__ */ jsx(ActionButton, { label: action.label, icon: action.icon, disabled: action.disabled, onClick: () => action.onClick(message) }, action.id))
+  ] });
+}
+
+// packages/quassel/src/ChatSendContext.ts
+import { createContext, useContext, useLayoutEffect, useRef as useRef3, useState as useState3 } from "react";
+var ChatSendContext = createContext(void 0);
+function isSendKey(event, shortcut) {
+  return event.key === "Enter" && !event.shiftKey && !event.altKey && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229 && (shortcut === "enter" || event.ctrlKey || event.metaKey);
+}
+function useChatSubmit(onSend) {
+  const panel = useContext(ChatSendContext);
+  const pending = useRef3(false);
+  const mounted = useRef3(true);
+  useLayoutEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const [sending, setSending] = useState3(false);
+  const [error, setError] = useState3();
+  const submit = async (text) => {
+    if (pending.current) return false;
+    pending.current = true;
+    setSending(true);
+    setError(void 0);
+    try {
+      await onSend(text);
+      if (!mounted.current) return false;
+      panel?.onSent();
+      return true;
+    } catch (failure) {
+      if (mounted.current) setError(failure instanceof Error ? failure.message : String(failure));
+      return false;
+    } finally {
+      pending.current = false;
+      if (mounted.current) setSending(false);
+    }
+  };
+  return { submit, sending, error };
+}
+
+// packages/quassel/src/Markdown.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CodeBlockContext = createContext2({});
+function MarkdownCodeBlocks({ children, options, texts }) {
+  return /* @__PURE__ */ jsx2(CodeBlockContext.Provider, { value: { options, texts }, children });
+}
+function CodeBlock({ text }) {
+  const { options, texts } = useContext2(CodeBlockContext);
+  const labels = { ...defaultTexts, ...texts };
+  const content = /* @__PURE__ */ jsx2("pre", { style: {
+    whiteSpace: options?.wrap ? "pre-wrap" : void 0,
+    overflowWrap: options?.wrap ? "anywhere" : void 0,
+    maxHeight: options?.maxHeight,
+    overflowY: options?.maxHeight === void 0 ? void 0 : "auto"
+  }, children: /* @__PURE__ */ jsx2("code", { children: text }) });
+  return options?.showCopyButton ? /* @__PURE__ */ jsxs2("div", { className: "qsl-code-block", children: [
+    /* @__PURE__ */ jsx2(ActionButton, { label: labels.copyCode, successLabel: labels.copied, onClick: () => copyText(text, labels.copyFailed) }),
+    content
+  ] }) : content;
+}
+var LinkClickContext = createContext2(void 0);
+function MarkdownLinks({ children, onLinkClick }) {
+  return /* @__PURE__ */ jsx2(LinkClickContext.Provider, { value: onLinkClick, children });
+}
+function MarkdownLink({ href, label }) {
+  const onLinkClick = useContext2(LinkClickContext);
+  return /* @__PURE__ */ jsx2(
+    "a",
+    {
+      href,
+      onClick: (event) => {
+        if (onLinkClick?.(href, label)) {
+          event.preventDefault();
+        }
+      },
+      rel: "noreferrer",
+      target: "_blank",
+      children: label
+    }
+  );
+}
+function Markdown({ text }) {
+  const lines = text.split("\n");
+  const blocks = [];
+  let i = 0;
+  let key = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const fence = line.match(/^\s*```(\w*)\s*$/);
+    if (fence) {
+      const body = [];
+      i++;
+      while (i < lines.length && !/^\s*```\s*$/.test(lines[i])) {
+        body.push(lines[i]);
+        i++;
+      }
+      if (i < lines.length) {
+        i++;
+      }
+      blocks.push(
+        /* @__PURE__ */ jsx2(CodeBlock, { text: body.join("\n") }, key++)
+      );
+      continue;
+    }
+    if (line.includes("|") && i + 1 < lines.length && isTableDivider(lines[i + 1])) {
+      const header = splitTableRow(line);
+      i += 2;
+      const rows = [];
+      while (i < lines.length && lines[i].includes("|") && lines[i].trim() !== "") {
+        rows.push(splitTableRow(lines[i]));
+        i++;
+      }
+      blocks.push(
+        /* @__PURE__ */ jsx2("div", { className: "qsl-md-scroll", children: /* @__PURE__ */ jsxs2("table", { children: [
+          /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: header.map((cell, ci) => /* @__PURE__ */ jsx2("th", { children: renderInline(cell, `th${key}_${ci}`) }, ci)) }) }),
+          /* @__PURE__ */ jsx2("tbody", { children: rows.map((row, ri) => /* @__PURE__ */ jsx2("tr", { children: header.map((_, ci) => /* @__PURE__ */ jsx2("td", { children: renderInline(row[ci] ?? "", `td${key}_${ri}_${ci}`) }, ci)) }, ri)) })
+        ] }) }, key++)
+      );
+      continue;
+    }
+    const heading = line.match(/^(#{1,4})\s+(.*)$/);
+    if (heading) {
+      const level = heading[1].length;
+      blocks.push(
+        level === 1 ? /* @__PURE__ */ jsx2("h3", { children: renderInline(heading[2], `h${key}`) }, key++) : /* @__PURE__ */ jsx2("h4", { children: renderInline(heading[2], `h${key}`) }, key++)
+      );
+      i++;
+      continue;
+    }
+    const quote = line.match(/^\s*>\s?(.*)$/);
+    if (quote) {
+      blocks.push(/* @__PURE__ */ jsx2("blockquote", { children: renderInline(quote[1], `q${key}`) }, key++));
+      i++;
+      continue;
+    }
+    const bullet = line.match(/^\s*[-*]\s+(.*)$/);
+    if (bullet) {
+      blocks.push(
+        /* @__PURE__ */ jsxs2("div", { className: "qsl-md-bullet", children: [
+          /* @__PURE__ */ jsx2("span", { children: "\u2022" }),
+          /* @__PURE__ */ jsx2("span", { children: renderInline(bullet[1], `l${key}`) })
+        ] }, key++)
+      );
+      i++;
+      continue;
+    }
+    const numbered = line.match(/^\s*(\d+)\.\s+(.*)$/);
+    if (numbered) {
+      blocks.push(
+        /* @__PURE__ */ jsxs2("div", { className: "qsl-md-bullet", children: [
+          /* @__PURE__ */ jsxs2("span", { children: [
+            numbered[1],
+            "."
+          ] }),
+          /* @__PURE__ */ jsx2("span", { children: renderInline(numbered[2], `l${key}`) })
+        ] }, key++)
+      );
+      i++;
+      continue;
+    }
+    if (line.trim() === "") {
+      blocks.push(/* @__PURE__ */ jsx2("div", { className: "qsl-md-gap" }, key++));
+      i++;
+      continue;
+    }
+    blocks.push(/* @__PURE__ */ jsx2("p", { children: renderInline(line, `l${key}`) }, key++));
+    i++;
+  }
+  return /* @__PURE__ */ jsx2("div", { className: "qsl-md", children: blocks });
+}
+function renderInline(text, keyPrefix) {
+  const out = [];
+  const pattern = /\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*|\*([^*]+)\*|`([^`]+)`/g;
+  let last = 0;
+  let match;
+  let i = 0;
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > last) {
+      out.push(text.slice(last, match.index));
+    }
+    if (match[1] !== void 0) {
+      out.push(/* @__PURE__ */ jsx2(MarkdownLink, { href: match[2], label: match[1] }, `${keyPrefix}a${i}`));
+    } else if (match[3] !== void 0) {
+      out.push(/* @__PURE__ */ jsx2("strong", { children: match[3] }, `${keyPrefix}b${i}`));
+    } else if (match[4] !== void 0) {
+      out.push(/* @__PURE__ */ jsx2("em", { children: match[4] }, `${keyPrefix}i${i}`));
+    } else if (match[5] !== void 0) {
+      out.push(/* @__PURE__ */ jsx2("code", { children: match[5] }, `${keyPrefix}c${i}`));
+    }
+    last = match.index + match[0].length;
+    i++;
+  }
+  if (last < text.length) {
+    out.push(text.slice(last));
+  }
+  return out;
+}
+function markdownPlainText(text) {
+  return text.split("\n").filter((line) => !/^\s*```\w*\s*$/.test(line) && !isTableDivider(line)).map((line) => (line.trim().startsWith("|") ? splitTableRow(line).join(", ") : line).replace(/^(#{1,4})\s+/, "").replace(/^\s*>\s?/, "").replace(/^\s*[-*]\s+/, "").replace(/\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*|\*([^*]+)\*|`([^`]+)`/g, (_, link, _href, fett, kursiv, code) => link ?? fett ?? kursiv ?? code).trim()).filter((line) => line !== "").join("\n");
+}
+function splitTableRow(line) {
+  let row = line.trim();
+  if (row.startsWith("|")) {
+    row = row.slice(1);
+  }
+  if (row.endsWith("|")) {
+    row = row.slice(0, -1);
+  }
+  return row.split("|").map((cell) => cell.trim());
+}
+function isTableDivider(line) {
+  return /^\s*\|?\s*:?-{1,}:?\s*(\|\s*:?-{1,}:?\s*)*\|?\s*$/.test(line) && line.includes("-");
+}
+
+// packages/quassel/src/announce.ts
+var abstandMs = 400;
+var hoechstensWartend = 5;
+var region;
+var wartend = [];
+var laeuft = false;
+function ansageRegion() {
+  if (region?.isConnected) {
+    return region;
+  }
+  const element = document.createElement("div");
+  element.setAttribute("role", "status");
+  element.setAttribute("aria-live", "polite");
+  element.setAttribute("aria-atomic", "true");
+  Object.assign(element.style, {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    margin: "-1px",
+    padding: "0",
+    border: "0",
+    overflow: "hidden",
+    clipPath: "inset(50%)",
+    whiteSpace: "nowrap"
+  });
+  document.body.append(element);
+  region = element;
+  return element;
+}
+function naechste() {
+  if (wartend.length === 0) {
+    laeuft = false;
+    return;
+  }
+  if (document.visibilityState === "hidden") {
+    document.addEventListener("visibilitychange", naechste, { once: true });
+    return;
+  }
+  const [text, ...rest] = wartend;
+  wartend = rest;
+  const ziel = ansageRegion();
+  ziel.textContent = ziel.textContent === text ? `${text}\xA0` : text;
+  window.setTimeout(naechste, abstandMs);
+}
+function announce(text) {
+  const inhalt = text.trim();
+  if (!inhalt || typeof document === "undefined") {
+    return;
+  }
+  wartend = [...wartend, inhalt].slice(-hoechstensWartend);
+  if (laeuft) {
+    return;
+  }
+  laeuft = true;
+  ansageRegion();
+  window.setTimeout(naechste, abstandMs);
+}
+
+// packages/quassel/src/StepPopover.tsx
+import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+
+// packages/quassel/src/icons.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Svg({ size = 14, className, children }) {
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className,
+      fill: "none",
+      height: size,
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      viewBox: "0 0 24 24",
+      width: size,
+      children
+    }
+  );
+}
+function IconSend(props) {
+  return /* @__PURE__ */ jsxs3(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx3("path", { d: "M22 2 11 13" }),
+    /* @__PURE__ */ jsx3("path", { d: "M22 2 15 22 11 13 2 9Z" })
+  ] });
+}
+function IconStop(props) {
+  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("rect", { fill: "currentColor", height: 12, rx: 2, stroke: "none", width: 12, x: 6, y: 6 }) });
+}
+function IconX(props) {
+  return /* @__PURE__ */ jsxs3(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx3("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx3("path", { d: "m6 6 12 12" })
+  ] });
+}
+function IconChevronDown(props) {
+  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" }) });
+}
+function IconChevronRight(props) {
+  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "m9 18 6-6-6-6" }) });
+}
+function IconLayers(props) {
+  return /* @__PURE__ */ jsxs3(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx3("path", { d: "m12 2 10 5-10 5L2 7Z" }),
+    /* @__PURE__ */ jsx3("path", { d: "m2 17 10 5 10-5" }),
+    /* @__PURE__ */ jsx3("path", { d: "m2 12 10 5 10-5" })
+  ] });
+}
+function IconCheck(props) {
+  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function IconSpark(props) {
+  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M12 3l1.9 6.1L20 11l-6.1 1.9L12 19l-1.9-6.1L4 11l6.1-1.9Z" }) });
+}
+function IconClock(props) {
+  return /* @__PURE__ */ jsxs3(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx3("circle", { cx: 12, cy: 12, r: 9 }),
+    /* @__PURE__ */ jsx3("path", { d: "M12 7v5l3 2" })
+  ] });
+}
+function IconTool(props) {
+  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" }) });
+}
+
+// packages/quassel/src/StepPopover.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function StepPopover({
+  message,
+  position,
+  texts,
+  toolArgumentsText,
+  onClose
+}) {
+  const popover = useRef4(null);
+  const [placement, setPlacement] = useState4();
+  useLayoutEffect2(() => {
+    const element = popover.current;
+    if (!element) {
+      return;
+    }
+    const margin = 16;
+    const gap = 10;
+    const bounds = element.getBoundingClientRect();
+    const preferredLeft = position.x + gap;
+    const preferredTop = position.y + gap;
+    const left = preferredLeft + bounds.width <= window.innerWidth - margin ? preferredLeft : position.x - bounds.width - gap;
+    const top = preferredTop + bounds.height <= window.innerHeight - margin ? preferredTop : position.y - bounds.height - gap;
+    setPlacement({
+      left: Math.max(margin, Math.min(left, window.innerWidth - bounds.width - margin)),
+      top: Math.max(margin, Math.min(top, window.innerHeight - bounds.height - margin))
+    });
+  }, [message.text, message.tool?.result, position]);
+  useEffect3(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  useEffect3(() => {
+    const handlePointerDown = (event) => {
+      if (!popover.current?.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+  }, [onClose]);
+  const tool = message.tool;
+  const title = message.role === "thinking" ? texts.thinkingTitle : texts.toolTitle;
+  return createPortal(
+    /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4("div", { className: "qsl-popover-backdrop", onClick: onClose }),
+      /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          "aria-label": title,
+          className: "qsl-popover",
+          ref: popover,
+          role: "dialog",
+          style: {
+            left: placement?.left ?? position.x,
+            top: placement?.top ?? position.y,
+            visibility: placement ? "visible" : "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsxs4("div", { className: "qsl-popover__head", children: [
+              message.role === "thinking" ? /* @__PURE__ */ jsx4(IconSpark, { className: "qsl-popover__icon" }) : /* @__PURE__ */ jsx4(IconTool, { className: tool?.isError ? "qsl-popover__icon qsl-popover__icon--error" : "qsl-popover__icon" }),
+              /* @__PURE__ */ jsx4("span", { className: "qsl-popover__title", children: title }),
+              /* @__PURE__ */ jsx4("button", { "aria-label": texts.close, className: "qsl-popover__close", onClick: onClose, title: texts.close, type: "button", children: /* @__PURE__ */ jsx4(IconX, {}) })
+            ] }),
+            /* @__PURE__ */ jsx4("div", { className: "qsl-popover__body", children: message.role === "thinking" ? /* @__PURE__ */ jsx4("div", { className: "qsl-popover__thinking", children: message.text }) : tool ? /* @__PURE__ */ jsxs4("div", { className: "qsl-popover__sections", children: [
+              /* @__PURE__ */ jsx4("div", { className: "qsl-popover__toolname", children: message.text }),
+              /* @__PURE__ */ jsx4(PopoverSection, { label: texts.argumentsLabel, value: toolArgumentsText(tool) }),
+              tool.result === void 0 ? /* @__PURE__ */ jsx4("div", { className: "qsl-popover__running", children: texts.toolStillRunning }) : /* @__PURE__ */ jsx4(PopoverSection, { error: tool.isError, label: texts.resultLabel, value: prettyJson(tool.result) })
+            ] }) : null })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function PopoverSection({ label, value, error = false }) {
+  return /* @__PURE__ */ jsxs4("section", { children: [
+    /* @__PURE__ */ jsx4("h3", { children: label }),
+    /* @__PURE__ */ jsx4("pre", { className: error ? "qsl-popover__pre qsl-popover__pre--error" : "qsl-popover__pre", children: value })
+  ] });
+}
+
+// packages/quassel/src/QuestionCard.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function QuestionCard({
+  text,
+  question,
+  texts,
+  onAnswer
+}) {
+  const [gewaehlt, setGewaehlt] = useState5([]);
+  const [frei, setFrei] = useState5("");
+  if (question.answer !== void 0) {
+    return /* @__PURE__ */ jsxs5("div", { className: "qsl-question", children: [
+      /* @__PURE__ */ jsx5("div", { className: "qsl-question__text", children: text }),
+      /* @__PURE__ */ jsxs5("div", { className: "qsl-question__answered", children: [
+        /* @__PURE__ */ jsx5(IconCheck, { className: "qsl-question__check", size: 12 }),
+        question.answer
+      ] })
+    ] });
+  }
+  const umschalten = (option) => setGewaehlt((bisher) => bisher.includes(option) ? bisher.filter((o) => o !== option) : [...bisher, option]);
+  const freiSenden = () => {
+    const wert = frei.trim();
+    if (wert) onAnswer(wert);
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: "qsl-question", children: [
+    /* @__PURE__ */ jsx5("div", { className: "qsl-question__text", children: text }),
+    /* @__PURE__ */ jsx5("div", { className: "qsl-question__options", children: question.options.map(
+      (option) => question.multi ? /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          "aria-pressed": gewaehlt.includes(option),
+          className: gewaehlt.includes(option) ? "qsl-question__option qsl-question__option--gewaehlt" : "qsl-question__option",
+          onClick: () => umschalten(option),
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsx5("span", { className: "qsl-question__kasten", children: gewaehlt.includes(option) && /* @__PURE__ */ jsx5(IconCheck, { size: 10 }) }),
+            option
+          ]
+        },
+        option
+      ) : /* @__PURE__ */ jsx5("button", { className: "qsl-question__option", onClick: () => onAnswer(option), type: "button", children: option }, option)
+    ) }),
+    question.multi && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        className: "qsl-question__uebernehmen",
+        disabled: gewaehlt.length === 0,
+        onClick: () => onAnswer(gewaehlt.join("; ")),
+        type: "button",
+        children: texts.questionSubmit
+      }
+    ),
+    /* @__PURE__ */ jsxs5("div", { className: "qsl-question__frei", children: [
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          className: "qsl-field qsl-question__frei-feld",
+          onChange: (event) => setFrei(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter" && !event.nativeEvent.isComposing) freiSenden();
+          },
+          placeholder: texts.questionPlaceholder,
+          value: frei
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "qsl-question__frei-senden",
+          disabled: frei.trim() === "",
+          onClick: freiSenden,
+          type: "button",
+          children: texts.questionAnswer
+        }
+      )
+    ] })
+  ] });
+}
+
+// packages/quassel/src/WorkingScenes.tsx
+import { useEffect as useEffect4, useState as useState6 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SPUR = 13;
+var GRUNDTAKT_MS = 90;
+var SZENENWECHSEL_MS = 2600;
+function bahn(figuren, breite = SPUR) {
+  return Array.from({ length: breite }, (_, x) => figuren[x] ?? " ");
+}
+var SZENEN = [
+  {
+    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]: "\xB7", [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 = {};
+      for (let i = x + 1; i < SPUR; i++) {
+        figuren[i] = "\xB7";
+      }
+      figuren[x] = schritt % 2 === 0 ? "\u{1F7E1}" : "\u{1F315}";
+      return bahn(figuren);
+    }
+  },
+  {
+    // Aus einem Samen wird ein Baum, dann von vorn.
+    id: "wachsen",
+    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",
+    takt: 2,
+    zeichne: (schritt) => {
+      const takt = schritt % 12;
+      if (takt < 4) return "\u{1F95A}";
+      if (takt < 6) return "\u{1F95A}\u2728";
+      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 = ["\xB7", "\xB7\xB7", "\xB7-", "-\xB7", "\xB7\xB7-", "-\xB7\xB7"];
+      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 = "\xB7".repeat(Math.max(0, 5 - Math.floor(takt / 2)));
+      return (takt < 10 ? "\u23F3" : "\u231B") + " " + koerner;
+    }
+  },
+  {
+    // Ei, Kueken, Henne - und die legt das naechste Ei.
+    id: "huhn-kreislauf",
+    takt: 3,
+    zeichne: (schritt) => {
+      const takt = schritt % 16;
+      if (takt < 3) return "\u{1F95A}";
+      if (takt < 5) return "\u{1F95A}\u2728";
+      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",
+    takt: 3,
+    zeichne: (schritt) => {
+      const takt = schritt % 14;
+      if (takt < 4) return "\u{1F3A9}";
+      if (takt < 7) return "\u{1F3A9}\u2728";
+      if (takt < 11) return "\u{1F3A9}\u{1F407}";
+      return "\u{1F407}\u{1F4A8}";
+    }
+  },
+  {
+    // Rot, Gelb, Gruen - und ab.
+    id: "ampel",
+    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",
+    takt: 2,
+    zeichne: (schritt) => {
+      const takt = schritt % 14;
+      if (takt < 5) return takt % 2 === 0 ? "\u23F0" : "\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);
+    }
+  }
+];
+function WorkingScenes({ label = "Arbeitet ..." }) {
+  const [szene, setSzene] = useState6(() => SZENEN[Math.floor(Math.random() * SZENEN.length)]);
+  const [versatz, setVersatz] = useState6(() => Math.floor(Math.random() * 20));
+  const [frameTick, setFrameTick] = useState6(0);
+  useEffect4(() => {
+    const timer = window.setInterval(() => {
+      setSzene((bisher) => {
+        const andere = SZENEN.filter((s) => s.id !== bisher.id);
+        return andere[Math.floor(Math.random() * andere.length)];
+      });
+      setVersatz(Math.floor(Math.random() * 20));
+      setFrameTick(0);
+    }, SZENENWECHSEL_MS);
+    return () => window.clearInterval(timer);
+  }, []);
+  useEffect4(() => {
+    const timer = window.setInterval(() => setFrameTick((value) => value + 1), GRUNDTAKT_MS);
+    return () => window.clearInterval(timer);
+  }, []);
+  const bild = szene.zeichne(Math.floor(frameTick / szene.takt) + (szene.laufend ? versatz : 0));
+  return /* @__PURE__ */ jsx6("div", { "aria-label": label, className: "qsl-working", role: "img", children: /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "qsl-working__stage", children: /* @__PURE__ */ jsx6("span", { className: "qsl-working__character", children: typeof bild === "string" ? bild : bild.map((zelle, i) => /* @__PURE__ */ jsx6("span", { className: "qsl-working__cell", children: zelle }, i)) }) }, szene.id) });
+}
+
+// packages/quassel/src/ChatMessages.tsx
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var collapseAtBottomFrom = 11;
+var hoechstensAnsagenAufEinmal = 2;
+function istSchritt(message) {
+  return !!message && (message.role === "thinking" || message.role === "tool");
+}
+function defaultArgumentsText(tool) {
+  return prettyJson(tool.arguments);
+}
+function ChatMessages({
+  messages,
+  detailMode = "compact",
+  running = false,
+  working,
+  workingTimeoutMs = 2e4,
+  stepsExpandable = true,
+  texts,
+  toolArgumentsText = defaultArgumentsText,
+  renderTool,
+  onAnswerQuestion,
+  onLinkClick,
+  announce: announce2,
+  emptyState,
+  className,
+  showTimestamps = false,
+  bottomThreshold = 120,
+  scrollerRef,
+  appearance,
+  timestampOptions,
+  codeBlockOptions,
+  bubbleOptions,
+  messageActions
+}) {
+  const alleTexte = { ...defaultTexts, ...texts };
+  const scrollBereich = useRef5(null);
+  const [amEnde, setAmEnde] = useState7(true);
+  const panel = useContext3(ChatSendContext);
+  useLayoutEffect3(() => panel?.registerJump(() => {
+    setAmEnde(true);
+    const viewport = scrollBereich.current;
+    if (viewport) viewport.scrollTop = viewport.scrollHeight;
+  }), [panel]);
+  const [now, setNow] = useState7(Date.now);
+  const relative = showTimestamps && timestampOptions?.format === "relative";
+  useEffect5(() => {
+    if (!relative) return;
+    setNow(Date.now());
+    const timer = window.setInterval(() => setNow(Date.now()), 1e3);
+    return () => window.clearInterval(timer);
+  }, [relative]);
+  const [stromAktiv, setStromAktiv] = useState7(true);
+  useEffect5(() => {
+    setStromAktiv(true);
+    const timer = window.setTimeout(() => setStromAktiv(false), workingTimeoutMs);
+    return () => window.clearTimeout(timer);
+  }, [messages, workingTimeoutMs]);
+  const angesagt = useRef5(new Set(messages.map((message) => message.key)));
+  useEffect5(() => {
+    const faellig = messages.filter((message, index) => !angesagt.current.has(message.key) && (message.role === "question" ? message.question !== void 0 && message.question.answer === void 0 : message.role === "assistant" && message.text.trim() !== "" && (message.closed === true || !running && index === messages.length - 1)));
+    if (faellig.length === 0) {
+      return;
+    }
+    angesagt.current = /* @__PURE__ */ new Set([...angesagt.current, ...faellig.map((message) => message.key)]);
+    if (announce2 === false || faellig.length > hoechstensAnsagenAufEinmal) {
+      return;
+    }
+    faellig.map((message) => announce2 ? announce2({ kind: message.role === "question" ? "question" : "reply", message }) : markdownPlainText(message.text)).forEach((text) => text && announce(text));
+  }, [messages, running, announce2]);
+  const pruefeEnde = useCallback2(() => {
+    const bereich = scrollBereich.current;
+    if (bereich) {
+      const abstandZumEnde = bereich.scrollHeight - bereich.scrollTop - bereich.clientHeight;
+      setAmEnde(abstandZumEnde <= bottomThreshold);
+    }
+  }, [bottomThreshold]);
+  useEffect5(() => {
+    const bereich = scrollBereich.current;
+    if (!bereich) {
+      return;
+    }
+    const beobachter = new ResizeObserver(pruefeEnde);
+    beobachter.observe(bereich);
+    for (const kind of bereich.children) {
+      beobachter.observe(kind);
+    }
+    return () => beobachter.disconnect();
+  }, [pruefeEnde, messages.length]);
+  useEffect5(() => {
+    if (!amEnde) {
+      return;
+    }
+    scrollBereich.current?.scrollTo({ top: scrollBereich.current.scrollHeight, behavior: running ? "auto" : "smooth" });
+  }, [messages, running, amEnde]);
+  const visible = useMemo(
+    () => messages.filter((message) => {
+      if ((message.role === "thinking" || message.role === "assistant") && message.text.trim() === "") {
+        return false;
+      }
+      if (message.role === "thinking" || message.role === "tool") {
+        return detailMode !== "off";
+      }
+      return true;
+    }),
+    [messages, detailMode]
+  );
+  const zeitVon = (at) => {
+    const date = timestampDate(at);
+    return date ? formatTimestamp(date, timestampOptions, now) : "";
+  };
+  const mitZeit = (inhalt, key, at) => showTimestamps ? /* @__PURE__ */ jsxs6("div", { className: "qsl-line", children: [
+    /* @__PURE__ */ jsx7("time", { className: "qsl-time", dateTime: timestampDate(at) ? at : void 0, style: timestampOptions?.format && timestampOptions.format !== "time" ? { width: "auto", maxWidth: "35%" } : void 0, children: zeitVon(at) }),
+    /* @__PURE__ */ jsx7("div", { className: "qsl-line-body", children: inhalt })
+  ] }, `zeit-${key}`) : inhalt;
+  const chipModus = detailMode === "chips" || detailMode === "icons";
+  const gruppenModus = detailMode === "grouped";
+  const bloecke = [];
+  let gruppe = [];
+  const schliesseGruppe = () => {
+    if (gruppe.length > 0) {
+      const letzterZustand = stepState(gruppe[gruppe.length - 1]);
+      bloecke.push(mitZeit(
+        gruppenModus ? /* @__PURE__ */ jsx7(
+          StepGroup,
+          {
+            aktiv: running && (letzterZustand === "running" || letzterZustand === "thinking"),
+            expandierbar: stepsExpandable,
+            messages: gruppe,
+            texts: alleTexte,
+            toolArgumentsText
+          },
+          gruppe[0].key
+        ) : /* @__PURE__ */ jsx7(
+          StepRow,
+          {
+            expandierbar: stepsExpandable,
+            messages: gruppe,
+            mitText: detailMode === "chips",
+            texts: alleTexte,
+            toolArgumentsText
+          },
+          gruppe[0].key
+        ),
+        gruppe[0].key,
+        gruppe[0].at
+      ));
+      gruppe = [];
+    }
+  };
+  let currentDay;
+  visible.forEach((message, index) => {
+    const date = timestampOptions?.showDaySeparators ? timestampDate(message.at) : void 0;
+    if (date) {
+      const day = timestampDay(date, timestampOptions?.timeZone);
+      if (day !== currentDay) {
+        schliesseGruppe();
+        bloecke.push(/* @__PURE__ */ jsx7("div", { className: "qsl-day-separator", role: "separator", "aria-label": formatDay(date, timestampOptions), children: formatDay(date, timestampOptions) }, `day-${message.key}`));
+        currentDay = day;
+      }
+    }
+    const eigeneDarstellung = message.role === "tool" && message.tool ? renderTool?.(message.tool) : void 0;
+    if (eigeneDarstellung !== void 0) {
+      schliesseGruppe();
+      bloecke.push(mitZeit(
+        /* @__PURE__ */ jsx7("div", { className: "qsl-step", children: eigeneDarstellung }, message.key),
+        message.key,
+        message.at
+      ));
+      return;
+    }
+    if ((chipModus || gruppenModus) && istSchritt(message)) {
+      gruppe = [...gruppe, message];
+      return;
+    }
+    schliesseGruppe();
+    bloecke.push(mitZeit(
+      /* @__PURE__ */ jsx7(
+        Bubble,
+        {
+          detailMode,
+          dicht: istSchritt(message) && istSchritt(visible[index - 1]),
+          expandierbar: stepsExpandable,
+          message,
+          bubbleOptions,
+          messageActions,
+          texts: alleTexte,
+          toolArgumentsText,
+          onAnswerQuestion
+        },
+        message.key
+      ),
+      message.key,
+      message.at
+    ));
+  });
+  schliesseGruppe();
+  const verlauf = /* @__PURE__ */ jsxs6("div", { className: className ? `qsl-chat-wrap ${className}` : "qsl-chat-wrap", style: appearanceStyle(appearance), children: [
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: "qsl-chat",
+        onScroll: pruefeEnde,
+        ref: (element) => {
+          scrollBereich.current = element;
+          scrollerRef?.(element);
+        },
+        children: visible.length === 0 && !running ? emptyState ?? null : /* @__PURE__ */ jsxs6("div", { "aria-busy": running || void 0, className: "qsl-thread", children: [
+          bloecke,
+          running && stromAktiv && (working ?? /* @__PURE__ */ jsx7(WorkingScenes, { label: alleTexte.working }))
+        ] })
+      }
+    ),
+    !amEnde && /* @__PURE__ */ jsx7("div", { className: "qsl-jump", children: /* @__PURE__ */ jsx7("button", { "aria-label": alleTexte.jumpToEnd, onClick: () => scrollBereich.current?.scrollTo({ top: scrollBereich.current.scrollHeight, behavior: "smooth" }), type: "button", children: /* @__PURE__ */ jsx7(IconChevronDown, {}) }) })
+  ] });
+  return /* @__PURE__ */ jsx7(MarkdownLinks, { onLinkClick, children: /* @__PURE__ */ jsx7(MarkdownCodeBlocks, { options: codeBlockOptions, texts, children: verlauf }) });
+}
+function StepRow({
+  messages,
+  mitText,
+  expandierbar,
+  texts,
+  toolArgumentsText
+}) {
+  const [detail, setDetail] = useState7();
+  const offen = expandierbar && detail && messages.find((message) => message.key === detail.key);
+  return /* @__PURE__ */ jsxs6("div", { className: "qsl-step qsl-steprow", children: [
+    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 : tool?.name ?? message.text;
+      const content = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        thinking ? /* @__PURE__ */ jsx7(IconSpark, { size: 11 }) : /* @__PURE__ */ jsx7(IconTool, { className: tool?.isError ? "qsl-chip__icon--error" : void 0, size: 11 }),
+        mitText && /* @__PURE__ */ jsx7("span", { className: "qsl-chip__label", children: label }),
+        mitText && /* @__PURE__ */ jsx7("span", { className: "qsl-chip__state", children: state === "done" && /* @__PURE__ */ jsx7(IconCheck, { size: 10 }) })
+      ] });
+      const classes = `${mitText ? "" : " qsl-chip--icon"} qsl-chip--${state}${running ? " qsl-pulse" : ""}`;
+      if (!expandierbar) {
+        return /* @__PURE__ */ jsx7("span", { className: `qsl-chip qsl-chip--still${classes}`, title: label, children: content }, message.key);
+      }
+      return /* @__PURE__ */ jsx7(
+        "button",
+        {
+          "aria-haspopup": "dialog",
+          className: `qsl-chip${classes}`,
+          onClick: (event) => setDetail({ key: message.key, position: { x: event.clientX, y: event.clientY } }),
+          title: label,
+          type: "button",
+          children: content
+        },
+        message.key
+      );
+    }),
+    offen && detail && /* @__PURE__ */ jsx7(
+      StepPopover,
+      {
+        message: offen,
+        position: detail.position,
+        texts,
+        toolArgumentsText,
+        onClose: () => setDetail(void 0)
+      }
+    )
+  ] });
+}
+function StepGroup({
+  messages,
+  aktiv,
+  expandierbar,
+  texts,
+  toolArgumentsText
+}) {
+  const [offen, setOffen] = useState7(false);
+  const kopf = useRef5(null);
+  const vonUntenEingeklappt = useRef5(false);
+  useLayoutEffect3(() => {
+    if (!offen && vonUntenEingeklappt.current) {
+      vonUntenEingeklappt.current = false;
+      kopf.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [offen]);
+  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 : void 0;
+  return /* @__PURE__ */ jsxs6("div", { className: "qsl-step qsl-stepgroup", children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        "aria-expanded": offen,
+        className: `qsl-trace qsl-trace--compact qsl-stepgroup__toggle${aktiv ? " qsl-pulse" : ""}`,
+        onClick: () => setOffen((wert) => !wert),
+        ref: kopf,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx7(IconChevronRight, { className: "qsl-stepgroup__chevron", size: 12 }),
+          /* @__PURE__ */ jsx7(IconLayers, { className: fehler ? "qsl-trace__icon qsl-trace__icon--error" : "qsl-trace__icon", size: 12 }),
+          /* @__PURE__ */ jsxs6("span", { className: "qsl-trace__line", children: [
+            anzahl,
+            laufend && /* @__PURE__ */ jsxs6("span", { className: "qsl-trace__running", children: [
+              laufend,
+              " ",
+              texts.toolRunning
+            ] })
+          ] })
+        ]
+      }
+    ),
+    offen && /* @__PURE__ */ jsxs6("div", { className: "qsl-stepgroup__lines", children: [
+      messages.map((message) => /* @__PURE__ */ jsx7(TraceLine, { expandierbar, message, texts, toolArgumentsText }, message.key)),
+      messages.length >= collapseAtBottomFrom && /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          className: "qsl-trace qsl-trace--compact qsl-stepgroup__toggle qsl-stepgroup__collapse",
+          onClick: () => {
+            vonUntenEingeklappt.current = true;
+            setOffen(false);
+          },
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsx7(IconChevronRight, { className: "qsl-stepgroup__chevron", size: 12 }),
+            /* @__PURE__ */ jsx7("span", { className: "qsl-trace__line", children: texts.stepGroupCollapse })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function TraceLine({
+  message,
+  className,
+  expandierbar,
+  texts,
+  toolArgumentsText
+}) {
+  const [detailPosition, setDetailPosition] = useState7();
+  const classes = `${className ? `${className} ` : ""}qsl-trace qsl-trace--compact${message.role === "thinking" ? " qsl-trace--thinking" : ""}`;
+  const inhalt = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx7(TraceIcon, { message }),
+    /* @__PURE__ */ jsx7("span", { className: "qsl-trace__line", children: /* @__PURE__ */ jsx7(TraceText, { message, texts }) })
+  ] });
+  if (!expandierbar) {
+    return /* @__PURE__ */ jsx7("div", { className: classes, children: inhalt });
+  }
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        "aria-expanded": detailPosition !== void 0,
+        "aria-haspopup": "dialog",
+        className: classes,
+        onClick: (event) => setDetailPosition({ x: event.clientX, y: event.clientY }),
+        type: "button",
+        children: inhalt
+      }
+    ),
+    detailPosition && /* @__PURE__ */ jsx7(
+      StepPopover,
+      {
+        message,
+        position: detailPosition,
+        texts,
+        toolArgumentsText,
+        onClose: () => setDetailPosition(void 0)
+      }
+    )
+  ] });
+}
+function TraceIcon({ message }) {
+  return message.role === "thinking" ? /* @__PURE__ */ jsx7(IconSpark, { className: "qsl-trace__icon", size: 12 }) : /* @__PURE__ */ jsx7(IconTool, { className: message.tool?.isError ? "qsl-trace__icon qsl-trace__icon--error" : "qsl-trace__icon", size: 12 });
+}
+function TraceText({ message, texts }) {
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    message.text,
+    message.tool && message.tool.result === void 0 && /* @__PURE__ */ jsx7("span", { className: "qsl-trace__running", children: texts.toolRunning })
+  ] });
+}
+function Bubble({
+  message,
+  bubbleOptions,
+  messageActions,
+  detailMode,
+  dicht,
+  expandierbar,
+  texts,
+  toolArgumentsText,
+  onAnswerQuestion
+}) {
+  const schritt = dicht ? "qsl-step qsl-step--dense" : "qsl-step";
+  if (message.role === "thinking" || message.role === "tool" && message.tool) {
+    if (detailMode === "compact") {
+      return /* @__PURE__ */ jsx7(TraceLine, { className: schritt, expandierbar, message, texts, toolArgumentsText });
+    }
+    const tool = message.tool;
+    return /* @__PURE__ */ jsxs6("div", { className: `${schritt} qsl-trace${message.role === "thinking" ? " qsl-trace--thinking" : ""}`, children: [
+      /* @__PURE__ */ jsx7(TraceIcon, { message }),
+      /* @__PURE__ */ jsxs6("div", { className: "qsl-trace__body", children: [
+        /* @__PURE__ */ jsx7("div", { className: "qsl-trace__line", children: /* @__PURE__ */ jsx7(TraceText, { message, texts }) }),
+        tool && /* @__PURE__ */ jsxs6("div", { className: "qsl-details", children: [
+          /* @__PURE__ */ jsx7("pre", { children: toolArgumentsText(tool) }),
+          tool.result !== void 0 && /* @__PURE__ */ jsx7("pre", { className: tool.isError ? "qsl-details__pre--error" : void 0, children: prettyJson(tool.result) })
+        ] })
+      ] })
+    ] });
+  }
+  if (message.role === "question" && message.question) {
+    return /* @__PURE__ */ jsx7("div", { className: schritt, children: /* @__PURE__ */ jsx7(
+      QuestionCard,
+      {
+        question: message.question,
+        text: message.text,
+        texts,
+        onAnswer: (text) => onAnswerQuestion?.(message.question.callId, text)
+      }
+    ) });
+  }
+  if (message.role === "system") {
+    return /* @__PURE__ */ jsx7("div", { className: `${schritt} qsl-system`, children: /* @__PURE__ */ jsx7(Markdown, { text: message.text }) });
+  }
+  const content = message.text.trim();
+  if (!content && message.role !== "user") return null;
+  const plain = bubbleOptions?.variant === "plain";
+  const isBubble = !plain && (message.role === "user" || message.bubble || bubbleOptions?.variant === "bubbles");
+  const side = (message.role === "user" ? bubbleOptions?.userSide : bubbleOptions?.assistantSide) ?? message.bubble?.side ?? (message.role === "user" ? "end" : "start");
+  const label = bubbleOptions?.showSender === false ? void 0 : bubbleOptions?.senderLabel?.(message) ?? message.bubble?.label ?? (bubbleOptions?.showSender ? message.role : void 0);
+  const body = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    label && /* @__PURE__ */ jsx7("span", { className: "qsl-bubble__label", children: label }),
+    /* @__PURE__ */ jsx7(Markdown, { text: message.role === "user" ? message.text : content }),
+    /* @__PURE__ */ jsx7(MessageActions, { message, options: messageActions, texts })
+  ] });
+  if (isBubble) {
+    const user = message.role === "user" && !message.bubble;
+    return /* @__PURE__ */ jsx7("div", { className: `${schritt} ${user ? "qsl-user" : "qsl-bubble"}`, style: { justifyContent: side === "end" ? "flex-end" : "flex-start" }, children: /* @__PURE__ */ jsx7("div", { style: { background: message.bubble?.color ?? (user ? void 0 : "var(--qsl-accent)"), maxWidth: bubbleOptions?.maxWidth }, children: body }) });
+  }
+  return /* @__PURE__ */ jsx7("div", { className: `${schritt} qsl-answer`, children: body });
+}
+
+// packages/quassel/src/ChatPanel.tsx
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect4, useMemo as useMemo2, useRef as useRef6 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function ChatPanel({
+  children,
+  composer,
+  className,
+  nodeRef,
+  appearance,
+  scrollOnSend = false
+}) {
+  const jump = useRef6(void 0);
+  const scrollOnSendRef = useRef6(scrollOnSend);
+  useLayoutEffect4(() => {
+    scrollOnSendRef.current = scrollOnSend;
+  }, [scrollOnSend]);
+  const sendContext = useMemo2(() => ({
+    onSent: () => {
+      if (scrollOnSendRef.current) jump.current?.();
+    },
+    registerJump: (callback) => {
+      jump.current = callback;
+      return () => {
+        if (jump.current === callback) jump.current = void 0;
+      };
+    }
+  }), []);
+  const wurzel = useRef6(null);
+  const eingabe = useRef6(null);
+  const mitEingabe = composer !== void 0;
+  useEffect6(() => {
+    const element = eingabe.current;
+    const rahmen = wurzel.current;
+    if (!rahmen) {
+      return;
+    }
+    if (!element) {
+      rahmen.style.removeProperty("--qsl-composer-height");
+      return;
+    }
+    const messen = () => rahmen.style.setProperty("--qsl-composer-height", `${element.offsetHeight}px`);
+    const beobachter = new ResizeObserver(messen);
+    beobachter.observe(element);
+    messen();
+    return () => beobachter.disconnect();
+  }, [mitEingabe]);
+  return /* @__PURE__ */ jsx8(ChatSendContext.Provider, { value: sendContext, children: /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: className ? `qsl-chat-panel ${className}` : "qsl-chat-panel",
+      style: appearanceStyle(appearance),
+      ref: (element) => {
+        wurzel.current = element;
+        if (typeof nodeRef === "function") {
+          nodeRef(element);
+        } else if (nodeRef) {
+          nodeRef.current = element;
+        }
+      },
+      children: [
+        children,
+        composer !== void 0 && /* @__PURE__ */ jsx8("div", { className: "qsl-chat-panel__composer", ref: eingabe, children: composer })
+      ]
+    }
+  ) });
+}
+
+// packages/quassel/src/TimestampSwitch.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function TimestampSwitch({
+  showTimestamps,
+  onChange,
+  collapsible = true,
+  texts,
+  className
+}) {
+  const label = texts?.timestamps ?? defaultTexts.timestamps;
+  const classes = showTimestamps ? "qsl-icon-button qsl-icon-button--active" : "qsl-icon-button";
+  return /* @__PURE__ */ jsxs8(
+    "button",
+    {
+      "aria-label": label,
+      "aria-pressed": showTimestamps,
+      className: className ? `${classes} ${className}` : classes,
+      onClick: () => onChange(!showTimestamps),
+      title: label,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx9(IconClock, {}),
+        /* @__PURE__ */ jsx9("span", { className: collapsible ? "qsl-collapsible" : void 0, children: label })
+      ]
+    }
+  );
+}
+
+// packages/quassel/src/ChatInputToolbar.tsx
+import { useCallback as useCallback3, useEffect as useEffect7, useRef as useRef7, useState as useState8 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var COMPACT_WIDTH_PX = 480;
+function ChatInputToolbar({
+  onSend,
+  onStop,
+  running = false,
+  disabled = false,
+  rows = 3,
+  maxRows,
+  actions,
+  toolbarLeft,
+  toolbarRight,
+  texts,
+  sendShortcut = "enter"
+}) {
+  const alleTexte = { ...defaultTexts, ...texts };
+  const [draft, setDraft] = useState8("");
+  const { submit, sending, error } = useChatSubmit(onSend);
+  const rootRef = useRef7(null);
+  const eingabeRef = useRef7(null);
+  const [compact, setCompact] = useState8(false);
+  const applyAutoGrow = useCallback3(() => {
+    const element = eingabeRef.current;
+    if (!element || maxRows === void 0) {
+      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(maxRows, rows) + polster;
+    element.style.height = "auto";
+    const inhalt = element.scrollHeight;
+    element.style.height = `${Math.min(inhalt, maximum)}px`;
+    element.style.overflowY = inhalt > maximum ? "auto" : "hidden";
+  }, [maxRows, rows]);
+  useEffect7(() => {
+    applyAutoGrow();
+  }, [draft, applyAutoGrow]);
+  useEffect7(() => {
+    const element = eingabeRef.current;
+    if (!element || maxRows === void 0) {
+      return;
+    }
+    let lastWidth = element.clientWidth;
+    const observer = new ResizeObserver(() => {
+      if (element.clientWidth !== lastWidth) {
+        lastWidth = element.clientWidth;
+        applyAutoGrow();
+      }
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [maxRows, applyAutoGrow]);
+  useEffect7(() => {
+    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 hatText = draft.trim().length > 0;
+  const send = async () => {
+    const text = draft.trim();
+    if (!text || disabled || sending) {
+      return;
+    }
+    if (await submit(text)) setDraft((current) => current === draft ? "" : current);
+  };
+  const onKeyDown = (event) => {
+    if (isSendKey(event, sendShortcut)) {
+      event.preventDefault();
+      if (!event.repeat) void send();
+    }
+  };
+  return /* @__PURE__ */ jsxs9("div", { className: compact ? "qsl-input-card qsl-input-card--compact" : "qsl-input-card", ref: rootRef, children: [
+    error && /* @__PURE__ */ jsx10("p", { className: "qsl-action-error", role: "alert", children: error }),
+    /* @__PURE__ */ jsx10(
+      "textarea",
+      {
+        "aria-label": alleTexte.placeholder,
+        disabled,
+        onChange: (event) => setDraft(event.target.value),
+        onKeyDown,
+        placeholder: running ? alleTexte.steeringPlaceholder : alleTexte.placeholder,
+        ref: eingabeRef,
+        rows,
+        value: draft
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "qsl-input-card__toolbar", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "qsl-input-card__left", children: [
+        actions?.map((action, index) => /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            className: action.active ? "qsl-icon-button qsl-icon-button--active" : "qsl-icon-button",
+            disabled: action.disabled,
+            onClick: action.onClick,
+            title: action.title ?? action.label,
+            type: "button",
+            children: [
+              action.icon,
+              action.label && /* @__PURE__ */ jsx10("span", { className: action.icon ? "qsl-collapsible" : void 0, children: action.label })
+            ]
+          },
+          index
+        )),
+        toolbarLeft
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "qsl-input-card__right", children: [
+        toolbarRight,
+        running && onStop && /* @__PURE__ */ jsx10("button", { "aria-label": alleTexte.stop, className: "qsl-send qsl-send--stop", onClick: onStop, title: alleTexte.stop, type: "button", children: /* @__PURE__ */ jsx10(IconStop, {}) }),
+        (!running || !onStop || hatText) && /* @__PURE__ */ jsx10(
+          "button",
+          {
+            "aria-label": alleTexte.send,
+            className: "qsl-send",
+            disabled: disabled || sending || !hatText,
+            onClick: () => void send(),
+            title: running ? alleTexte.sendIntoRun : alleTexte.send,
+            type: "button",
+            children: /* @__PURE__ */ jsx10(IconSend, {})
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// packages/quassel/src/DetailModeSwitch.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var DETAIL_MODES = ["off", "icons", "chips", "grouped", "compact", "full"];
+var TEXT_KEYS = {
+  off: "detailModeOff",
+  icons: "detailModeIcons",
+  chips: "detailModeChips",
+  grouped: "detailModeGrouped",
+  compact: "detailModeCompact",
+  full: "detailModeFull"
+};
+var detailModeLabel = (mode, texts) => ({ ...defaultTexts, ...texts })[TEXT_KEYS[mode]];
+function DetailModeSwitch({
+  mode,
+  onChange,
+  modes = DETAIL_MODES,
+  collapsible = true,
+  texts,
+  className
+}) {
+  const alleTexte = { ...defaultTexts, ...texts };
+  const aktuell = modes.indexOf(mode);
+  const naechster = modes[(aktuell < 0 ? 0 : aktuell + 1) % modes.length];
+  return /* @__PURE__ */ jsxs10(
+    "button",
+    {
+      "aria-label": `${alleTexte.detailModeTitle}: ${detailModeLabel(mode, texts)}`,
+      className: className ? `qsl-icon-button ${className}` : "qsl-icon-button",
+      onClick: () => onChange(naechster),
+      title: `${alleTexte.detailModeTitle}: ${detailModeLabel(mode, texts)}`,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx11(IconSpark, { size: 14 }),
+        /* @__PURE__ */ jsx11("span", { className: collapsible ? "qsl-collapsible" : void 0, children: detailModeLabel(mode, texts) })
+      ]
+    }
+  );
+}
+export {
+  ChatInputToolbar,
+  ChatMessages,
+  ChatPanel,
+  DETAIL_MODES,
+  DetailModeSwitch,
+  IconCheck,
+  IconChevronDown,
+  IconChevronRight,
+  IconClock,
+  IconLayers,
+  IconSend,
+  IconSpark,
+  IconStop,
+  IconTool,
+  IconX,
+  Markdown,
+  TimestampSwitch,
+  announce,
+  applyEvent,
+  compactToolLine,
+  defaultTexts,
+  detailModeLabel,
+  markdownPlainText,
+  prettyJson,
+  stepState,
+  useChat
+};
+//# sourceMappingURL=index.js.map