@kieksme/csp-plugin-chat 0.11.0 → 0.12.0

package/README.md

@@ -8,7 +8,7 @@ For local provider testing, set `CSP_DEMO=true` and `CSP_CHAT_DEMO=false`: porta
 
 Langsame lokale Modelle können mit der Runtime-Variable `CSP_CHAT_TIMEOUT_MS` mehr Antwortzeit erhalten (Standard `60000`, Bereich `1000`–`300000` ms).
 
-Send a message with Cmd + Enter on macOS, Ctrl + Enter on other systems, or the send button. The hint displays the system-specific shortcut. Plain Enter inserts a line break. A subtle shortcut hint appears at the bottom right inside the text field; blank messages and shortcuts during an active reply do not send.
+Send a message with Cmd + Enter on macOS, Ctrl + Enter on other systems, or the send button. The hint displays the system-specific shortcut. Plain Enter inserts a line break. A subtle shortcut hint appears below the text field; blank messages and shortcuts during an active reply do not send.
 
 The input starts with one text row and automatically grows with wrapped text or line breaks. It shrinks when text is removed or sent and adjusts when its width changes.
 
@@ -29,3 +29,5 @@ WebMCP tool: `chat_ask` streams one answer from `POST /api/v1/chat` and returns
 Users can mark a chat **Problem gelöst** and start a new chat afterward. With a support transport this is an authenticated, persisted owner action, interrupting generation and updating the channel card; without a transport it applies to the current browser chat only. A resolved conversation is distinct from an ordinary closure.
 
 The assistant asks one short clarifying question for vague requests (for example “Hallo, meine Email”) before offering tickets. It uses supplied help/status facts and reserves ticket links for escalation or an explicit ticket request. Model behaviour requires a real-provider acceptance test.
+
+Long histories follow new messages while the visitor reads at the bottom; scrolling up preserves the reading position and offers **Neue Nachrichten ↓**. Real OpenAI providers expose editable dictation through the server-only transcription API. With a support transport, **Ich möchte mit einer echten Person sprechen** pauses the bot immediately and queues a persistent, directed support request. See [chat behaviour and APIs](../../docs/chat.md) and [runtime options](../../docs/configuration.md#spracheingabe-und-supportanfragen).

package/dist/browser.js

@@ -1,6 +1,6 @@
 import {
   cspPlugin
-} from "./chunk-W5MUDSVD.js";
+} from "./chunk-DZ3YQB4V.js";
 
 // src/tools.ts
 import {
@@ -167,10 +167,10 @@ var chatTools = [
 ];
 
 // src/browser.tsx
-import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState4 } from "react";
 
 // src/support-chat.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 
 // src/support-session.ts
 async function supportSession(ctx) {
@@ -297,14 +297,327 @@ function anonymousSession(ctx) {
   return current;
 }
 
+// src/chat-controls.tsx
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function sendShortcut(event, disabled) {
+  if (event.key !== "Enter" || !(event.ctrlKey || event.metaKey) || event.nativeEvent.isComposing || event.repeat)
+    return;
+  event.preventDefault();
+  if (!disabled) event.currentTarget.form?.requestSubmit();
+}
+function Shortcut({ id }) {
+  const [mac, setMac] = useState(false);
+  useEffect(() => setMac(/Mac|iPhone|iPad/.test(navigator.platform)), []);
+  return /* @__PURE__ */ jsxs("span", { id, className: "block text-[0.6875rem] text-muted mt-2", children: [
+    mac ? "\u2318" : "Strg",
+    " Enter zum Senden"
+  ] });
+}
+function useChatScroll(content, conversation) {
+  const history = useRef(null), pinned = useRef(true);
+  const [unread, setUnread] = useState(false);
+  const follow = () => {
+    pinned.current = true;
+    setUnread(false);
+    const element = history.current;
+    if (element) element.scrollTop = element.scrollHeight;
+  };
+  useLayoutEffect(follow, [conversation]);
+  useLayoutEffect(() => {
+    if (pinned.current) follow();
+    else setUnread(true);
+  }, [content]);
+  useEffect(() => {
+    const element = history.current;
+    if (!element) return;
+    const observer = new ResizeObserver(() => {
+      if (pinned.current) follow();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return {
+    history,
+    follow,
+    unread,
+    onScroll: () => {
+      const element = history.current;
+      if (!element) return;
+      pinned.current = element.scrollHeight - element.scrollTop - element.clientHeight < 80;
+      if (pinned.current) setUnread(false);
+    }
+  };
+}
+function NewMessages({
+  visible,
+  follow
+}) {
+  return visible ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "border border-line rounded-card px-3 py-2 mb-3 text-[0.8125rem]",
+      onClick: follow,
+      children: "Neue Nachrichten \u2193"
+    }
+  ) : null;
+}
+
+// src/voice-input.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function VoiceInput({
+  ctx,
+  value,
+  setValue,
+  disabled,
+  token,
+  onBusy
+}) {
+  const [enabled, setEnabled] = useState2(false), [state, setState] = useState2("idle"), [error, setError] = useState2("");
+  const recorder = useRef2(null), stream = useRef2(null), timer = useRef2(null), request = useRef2(null);
+  const alive = useRef2(true), cancelled = useRef2(false), draft = useRef2(value);
+  const operation = useRef2(0);
+  draft.current = value;
+  const release = () => {
+    if (timer.current) clearTimeout(timer.current);
+    stream.current?.getTracks().forEach((track) => track.stop());
+    stream.current = null;
+  };
+  const idle = () => {
+    if (alive.current) {
+      setState("idle");
+      onBusy(false);
+    }
+  };
+  useEffect2(() => {
+    alive.current = true;
+    const controller = new AbortController();
+    if (typeof MediaRecorder !== "undefined" && typeof navigator.mediaDevices?.getUserMedia === "function") {
+      void (ctx.request ?? fetch)(
+        ctx.config.apiUrl + "/api/v1/chat/capabilities",
+        { signal: controller.signal }
+      ).then((response) => response.ok ? response.json() : null).then((result) => {
+        if (alive.current) setEnabled(result?.transcription === true);
+      }).catch(() => {
+      });
+    }
+    return () => {
+      operation.current++;
+      alive.current = false;
+      cancelled.current = true;
+      controller.abort();
+      request.current?.abort();
+      if (recorder.current?.state === "recording") recorder.current.stop();
+      release();
+    };
+  }, [ctx.config.apiUrl]);
+  useEffect2(() => {
+    if (disabled && state !== "idle") {
+      operation.current++;
+      cancelled.current = true;
+      request.current?.abort();
+      if (recorder.current?.state === "recording") recorder.current.stop();
+      release();
+      idle();
+    }
+  }, [disabled]);
+  async function start() {
+    if (state !== "idle" || disabled) return;
+    const attempt = ++operation.current;
+    setState("starting");
+    onBusy(true);
+    setError("");
+    cancelled.current = false;
+    try {
+      const media = await navigator.mediaDevices.getUserMedia({ audio: true });
+      if (!alive.current || cancelled.current || operation.current !== attempt) {
+        media.getTracks().forEach((track) => track.stop());
+        if (operation.current === attempt) idle();
+        return;
+      }
+      stream.current = media;
+      const mime = [
+        "audio/webm;codecs=opus",
+        "audio/mp4",
+        "audio/ogg;codecs=opus"
+      ].find((type) => MediaRecorder.isTypeSupported(type));
+      if (!mime)
+        throw new Error(
+          "Dieser Browser unterst\xFCtzt keine passende Audioaufnahme."
+        );
+      const capture = new MediaRecorder(media, { mimeType: mime });
+      recorder.current = capture;
+      const chunks = [];
+      let bytes = 0;
+      capture.ondataavailable = (event) => {
+        if (event.data.size) {
+          bytes += event.data.size;
+          chunks.push(event.data);
+          if (bytes > 10 * 1024 * 1024) {
+            cancelled.current = true;
+            if (capture.state === "recording") capture.stop();
+            release();
+            if (alive.current)
+              setError("Die Aufnahme ist zu gro\xDF. Bitte k\xFCrzer diktieren.");
+          }
+        }
+      };
+      capture.onerror = () => {
+        if (operation.current !== attempt) return;
+        cancelled.current = true;
+        release();
+        if (alive.current)
+          setError("Aufnahme fehlgeschlagen. Ihr Entwurf bleibt erhalten.");
+        idle();
+      };
+      capture.onstop = () => {
+        if (operation.current !== attempt) return;
+        release();
+        if (cancelled.current || !alive.current) {
+          idle();
+          return;
+        }
+        void transcribe(new Blob(chunks, { type: mime }));
+      };
+      capture.start(1e3);
+      setState("recording");
+      timer.current = setTimeout(() => {
+        if (capture.state === "recording") capture.stop();
+      }, 6e4);
+    } catch (failure) {
+      if (operation.current !== attempt) return;
+      release();
+      if (alive.current)
+        setError(
+          failure instanceof DOMException && failure.name === "NotAllowedError" ? "Bitte erlauben Sie den Mikrofonzugriff f\xFCr die Spracheingabe." : failure instanceof Error ? failure.message : "Mikrofon nicht verf\xFCgbar."
+        );
+      idle();
+    }
+  }
+  async function transcribe(audio) {
+    const attempt = operation.current;
+    setState("transcribing");
+    const controller = new AbortController();
+    request.current = controller;
+    try {
+      const bearer = await token?.();
+      if (controller.signal.aborted) return;
+      const response = await (ctx.request ?? fetch)(
+        ctx.config.apiUrl + "/api/v1/chat/transcriptions",
+        {
+          method: "POST",
+          body: audio,
+          credentials: "same-origin",
+          signal: controller.signal,
+          headers: {
+            "Content-Type": audio.type,
+            ...bearer ? { Authorization: `Bearer ${bearer}` } : {}
+          }
+        }
+      );
+      const result = await response.json();
+      if (!response.ok)
+        throw new Error(
+          result.error ?? "Spracheingabe derzeit nicht verf\xFCgbar."
+        );
+      if (typeof result.text !== "string" || !result.text.trim())
+        throw new Error("Keine Sprache erkannt.");
+      if (draft.current.length + result.text.length + (draft.current ? 1 : 0) > 4e3)
+        throw new Error(
+          "Der Entwurf w\xE4re zu lang. Bitte k\xFCrzer diktieren. Ihr Text bleibt erhalten."
+        );
+      if (alive.current && !controller.signal.aborted && operation.current === attempt)
+        setValue((previous) => previous + (previous ? "\n" : "") + result.text);
+    } catch (failure) {
+      if (alive.current && !controller.signal.aborted)
+        setError(
+          failure instanceof Error ? failure.message : "Spracheingabe fehlgeschlagen. Ihr Entwurf bleibt erhalten."
+        );
+    } finally {
+      if (operation.current === attempt) {
+        request.current = null;
+        idle();
+      }
+    }
+  }
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsxs2("div", { className: "mt-3 text-[0.8125rem]", children: [
+    state === "idle" ? /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: "border border-line rounded-card px-3 py-2",
+        disabled,
+        onClick: () => void start(),
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "svg",
+            {
+              "aria-hidden": "true",
+              viewBox: "0 0 24 24",
+              width: "16",
+              height: "16",
+              className: "inline mr-2",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [
+                /* @__PURE__ */ jsx2("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }),
+                /* @__PURE__ */ jsx2("path", { d: "M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8" })
+              ]
+            }
+          ),
+          "Nachricht diktieren"
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2("span", { role: "status", children: state === "recording" ? "\u25CF Aufnahme l\xE4uft \xB7 maximal 60 Sekunden" : state === "starting" ? "Mikrofon wird gestartet \u2026" : "Sprache wird in Text umgewandelt \u2026" }),
+      state === "recording" && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "border border-line rounded-card px-3 py-2 ml-2",
+          onClick: () => recorder.current?.stop(),
+          children: "Aufnahme stoppen"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "underline ml-2",
+          onClick: () => {
+            operation.current++;
+            cancelled.current = true;
+            request.current?.abort();
+            if (recorder.current?.state === "recording")
+              recorder.current.stop();
+            release();
+            idle();
+          },
+          children: "Abbrechen"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("p", { className: "text-[0.6875rem] text-muted mt-2", children: "Die Aufnahme wird zur Texterkennung an OpenAI gesendet. Pr\xFCfen Sie den Text vor dem Senden." }),
+    error && /* @__PURE__ */ jsx2("p", { role: "alert", className: "text-danger dark:text-warning mt-2", children: error })
+  ] });
+}
+
 // src/support-chat.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SupportChat(ctx) {
-  const [current, setCurrent] = useState(null), [input, setInput] = useState(""), [error, setError] = useState(""), [busy, setBusy] = useState(false), [ready, setReady] = useState(false), [auth, setAuth] = useState(null);
-  const seq = useRef(0), requestRef = useRef(null);
+  const [current, setCurrent] = useState3(null), [input, setInput] = useState3(""), [error, setError] = useState3(""), [busy, setBusy] = useState3(false), [ready, setReady] = useState3(false), [auth, setAuth] = useState3(null);
+  const [voiceBusy, setVoiceBusy] = useState3(false);
+  const scroll = useChatScroll(current?.messages, current?.id);
+  const sending = useRef3(false);
+  const blocked = busy || voiceBusy || !ready || current?.status === "closed" || !!current?.messages.some((m) => !m.complete);
+  const seq = useRef3(0), requestRef = useRef3(null);
   const anonymous = ctx.config.chatSupport?.auth === "anonymous";
   const demo = ctx.config.chatSupport?.mode === "demo";
-  useEffect(() => {
+  useEffect3(() => {
     let alive = true;
     const controller = new AbortController();
     async function init() {
@@ -358,7 +671,7 @@ function SupportChat(ctx) {
       controller.abort();
     };
   }, [ctx.config.apiUrl]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!current?.id || !ready) return;
     let alive = true;
     const controller = new AbortController();
@@ -418,14 +731,17 @@ function SupportChat(ctx) {
   }, [current?.id, ready]);
   async function newConversation() {
     const c = await (await requestRef.current("", { method: "POST" })).json();
+    scroll.follow();
     seq.current = c.seq;
     setCurrent(c);
     return c;
   }
-  const pending = useRef(null);
+  const pending = useRef3(null);
   async function submit(e) {
     e.preventDefault();
-    if (!input.trim() || busy || !ready) return;
+    if (!input.trim() || blocked || sending.current) return;
+    sending.current = true;
+    scroll.follow();
     setBusy(true);
     setError("");
     try {
@@ -439,10 +755,38 @@ function SupportChat(ctx) {
       pending.current = null;
       setInput("");
       const refreshed = await (await requestRef.current(`/${c.id}`)).json();
-      setCurrent(refreshed);
+      applySnapshot(refreshed);
     } catch (e2) {
       setError(e2 instanceof Error ? e2.message : "Nachricht nicht gesendet.");
     } finally {
+      sending.current = false;
+      setBusy(false);
+    }
+  }
+  function applySnapshot(result) {
+    setCurrent(
+      (previous) => previous?.id === result.id && previous.seq > result.seq ? previous : result
+    );
+  }
+  async function requestHuman() {
+    if (busy || !ready || sending.current) return;
+    sending.current = true;
+    setBusy(true);
+    setError("");
+    try {
+      const c = current ?? await newConversation();
+      const result = await (await requestRef.current(`/${c.id}/request-support`, {
+        method: "POST",
+        body: "{}"
+      })).json();
+      applySnapshot(result);
+      scroll.follow();
+    } catch (error2) {
+      setError(
+        error2 instanceof Error ? error2.message : "Support konnte nicht angefragt werden."
+      );
+    } finally {
+      sending.current = false;
       setBusy(false);
     }
   }
@@ -455,7 +799,7 @@ function SupportChat(ctx) {
         method: "POST",
         body: "{}"
       })).json();
-      setCurrent(result);
+      applySnapshot(result);
       pending.current = null;
       setInput("");
     } catch (e) {
@@ -463,6 +807,7 @@ function SupportChat(ctx) {
         e instanceof Error ? e.message : "Problem konnte nicht als gel\xF6st markiert werden."
       );
     } finally {
+      sending.current = false;
       setBusy(false);
     }
   }
@@ -479,26 +824,28 @@ function SupportChat(ctx) {
       setError(e instanceof Error ? e.message : "Aktion fehlgeschlagen.");
     }
   }
-  return /* @__PURE__ */ jsxs("div", { className: "chat-panel support-chat text-ink bg-card border border-line p-6 rounded-card compact:p-4", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-[0.75rem] text-ink mb-3", children: demo ? "Synthetische Support-Demo. Keine \xDCbertragung an einen Support-Channel." : `Ihre Nachrichten und die Antworten werden an den Support in ${ctx.config.chatSupport?.mode === "slack" ? "Slack" : ctx.config.chatSupport?.mode === "telegram" ? "Telegram" : "Microsoft Teams"} weitergegeben.` }),
-    /* @__PURE__ */ jsxs("p", { role: "status", className: "text-[0.8125rem] mb-3", children: [
-      current?.status === "support" ? `${current.support?.name} \xB7 Support` : current?.status === "closed" ? current.resolution ? "Problem gel\xF6st" : "Gespr\xE4ch abgeschlossen" : "Digitaler Assistent",
+  return /* @__PURE__ */ jsxs3("div", { className: "chat-panel support-chat text-ink bg-card border border-line p-6 rounded-card compact:p-4", children: [
+    /* @__PURE__ */ jsx3("p", { className: "text-[0.75rem] text-ink mb-3", children: demo ? "Synthetische Support-Demo. Keine \xDCbertragung an einen Support-Channel." : `Ihre Nachrichten und die Antworten werden an den Support in ${ctx.config.chatSupport?.mode === "slack" ? "Slack" : ctx.config.chatSupport?.mode === "telegram" ? "Telegram" : "Microsoft Teams"} weitergegeben.` }),
+    /* @__PURE__ */ jsxs3("p", { role: "status", className: "text-[0.8125rem] mb-3", children: [
+      current?.status === "support" ? `${current.support?.name} \xB7 Support` : current?.status === "waiting" ? current.supportRequest?.notification === "sent" ? "Support-Team informiert \xB7 KI pausiert" : current.supportRequest?.notification === "failed" ? "Zustellung verz\xF6gert \xB7 erneuter Versuch l\xE4uft \xB7 KI pausiert" : "Pers\xF6nlicher Support angefragt \xB7 KI pausiert" : current?.status === "closed" ? current.resolution ? "Problem gel\xF6st" : "Gespr\xE4ch abgeschlossen" : "Digitaler Assistent",
       auth && ready && !demo ? anonymous ? ` \xB7 ${auth.name}` : ` \xB7 Angemeldet als ${auth.name}` : ""
     ] }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx3(
       "div",
       {
-        className: "chat-history grid gap-3 max-h-[400px] overflow-auto mb-4",
+        ref: scroll.history,
+        onScroll: scroll.onScroll,
+        className: "chat-history grid gap-3 max-h-[min(400px,45dvh)] overflow-auto overscroll-contain mb-4",
         "aria-live": "polite",
         "aria-label": "Gespr\xE4chsverlauf",
-        children: current?.messages.map((m) => /* @__PURE__ */ jsxs(
+        children: current?.messages.map((m) => /* @__PURE__ */ jsxs3(
           "div",
           {
             className: `message ${m.kind === "user" ? "user bg-soft p-3 rounded-card" : "assistant border-l-2 border-accent pl-4"} text-[0.8125rem] whitespace-pre-wrap [overflow-wrap:anywhere]`,
             children: [
-              /* @__PURE__ */ jsx("span", { className: "block text-[0.6875rem] text-ink mb-1", children: m.kind === "user" ? "Sie" : m.kind === "support" ? `${m.name} \xB7 Support` : m.kind === "bot" ? m.responder?.role === "on-duty" && m.responder.name ? `Digitaler Assistent von ${m.responder.name}` : "Digitaler Assistent des Service-Teams" : "Gespr\xE4ch" }),
+              /* @__PURE__ */ jsx3("span", { className: "block text-[0.6875rem] text-ink mb-1", children: m.kind === "user" ? "Sie" : m.kind === "support" ? `${m.name} \xB7 Support` : m.kind === "bot" ? m.responder?.role === "on-duty" && m.responder.name ? `Digitaler Assistent von ${m.responder.name}` : "Digitaler Assistent des Service-Teams" : "Gespr\xE4ch" }),
               m.kind === "bot" ? answerParts(m.content, m.sources ?? [], !m.complete).map(
-                (part, i) => part.href ? /* @__PURE__ */ jsx(
+                (part, i) => part.href ? /* @__PURE__ */ jsx3(
                   "a",
                   {
                     href: part.href,
@@ -510,14 +857,15 @@ function SupportChat(ctx) {
                   i
                 ) : part.text
               ) : m.content,
-              !m.complete && !m.content && /* @__PURE__ */ jsx("span", { children: "Antwort wird erstellt \u2026" })
+              !m.complete && !m.content && /* @__PURE__ */ jsx3("span", { children: "Antwort wird erstellt \u2026" })
             ]
           },
           m.id
         ))
       }
     ),
-    !ready && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx3(NewMessages, { visible: scroll.unread, follow: scroll.follow }),
+    !ready && /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -531,32 +879,59 @@ function SupportChat(ctx) {
         children: anonymous ? "Chat neu verbinden" : ctx.config.chatSupport?.auth === "session" ? "Portal-Anmeldung erneuern" : "Mit Microsoft anmelden"
       }
     ),
-    ready && /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "chat-form flex gap-2.5 items-end", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "support-chat-input", className: "sr-only", children: "Ihre Nachricht" }),
-      /* @__PURE__ */ jsx(
-        "textarea",
+    ready && /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsxs3("form", { onSubmit: submit, className: "chat-form flex gap-2.5 items-end", children: [
+        /* @__PURE__ */ jsx3("label", { htmlFor: "support-chat-input", className: "sr-only", children: "Ihre Nachricht" }),
+        /* @__PURE__ */ jsx3(
+          "textarea",
+          {
+            id: "support-chat-input",
+            value: input,
+            rows: 2,
+            maxLength: 4e3,
+            disabled: current?.status === "closed",
+            className: "flex-1 min-w-0 max-h-[180px] overflow-auto resize-none border border-line rounded-card bg-card p-3",
+            onChange: (e) => setInput(e.target.value),
+            onKeyDown: (e) => sendShortcut(e, blocked || !input.trim()),
+            "aria-keyshortcuts": "Control+Enter Meta+Enter",
+            "aria-describedby": "support-chat-shortcut",
+            placeholder: "Wie k\xF6nnen wir Ihnen helfen?"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "submit",
+            className: "bg-accent text-accent-ink rounded-card p-3",
+            disabled: blocked || !input.trim(),
+            children: "Senden"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx3(Shortcut, { id: "support-chat-shortcut" }),
+      /* @__PURE__ */ jsx3(
+        VoiceInput,
         {
-          id: "support-chat-input",
+          ctx,
           value: input,
-          rows: 2,
-          maxLength: 4e3,
+          setValue: setInput,
           disabled: current?.status === "closed",
-          className: "flex-1 min-w-0 border border-line rounded-card bg-card p-3",
-          onChange: (e) => setInput(e.target.value),
-          placeholder: "Wie k\xF6nnen wir Ihnen helfen?"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "submit",
-          className: "bg-accent text-accent-ink rounded-card p-3",
-          disabled: busy || !input.trim() || current?.status === "closed" || !!current?.messages.some((m) => !m.complete),
-          children: "Senden"
+          token: auth?.token,
+          onBusy: setVoiceBusy
         }
       )
     ] }),
-    ready && current && current.status !== "closed" && current.messages.some((m) => m.kind === "user") && /* @__PURE__ */ jsx(
+    ready && (!current || current.status === "bot") && /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "border border-line rounded-card px-4 py-2 mt-3",
+        disabled: busy,
+        onClick: () => void requestHuman(),
+        children: "Ich m\xF6chte mit einer echten Person sprechen"
+      }
+    ),
+    ready && current && current.status !== "closed" && current.messages.some((m) => m.kind === "user") && /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -566,7 +941,7 @@ function SupportChat(ctx) {
         children: "Problem gel\xF6st"
       }
     ),
-    ready && current?.status === "closed" && /* @__PURE__ */ jsx(
+    ready && current?.status === "closed" && /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -575,12 +950,12 @@ function SupportChat(ctx) {
         children: "Neuen Chat starten"
       }
     ),
-    demo && current && /* @__PURE__ */ jsx(
+    demo && current && /* @__PURE__ */ jsx3(
       "div",
       {
         className: "flex flex-wrap gap-3 mt-3 text-[0.75rem]",
         "aria-label": "Support-Demo-Steuerung",
-        children: current.status === "bot" ? /* @__PURE__ */ jsx(
+        children: current.status === "bot" || current.status === "waiting" ? /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",
@@ -588,8 +963,8 @@ function SupportChat(ctx) {
             onClick: () => void simulate("take"),
             children: "Lena \xFCbernimmt"
           }
-        ) : current.status === "support" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
+        ) : current.status === "support" ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -598,7 +973,7 @@ function SupportChat(ctx) {
               children: "Lena antwortet"
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -607,7 +982,7 @@ function SupportChat(ctx) {
               children: "Bot freigeben"
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -619,7 +994,7 @@ function SupportChat(ctx) {
         ] }) : null
       }
     ),
-    error && !demo && auth && ready && /* @__PURE__ */ jsx(
+    error && !demo && auth && ready && /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -632,27 +1007,27 @@ function SupportChat(ctx) {
         children: anonymous ? "Chat neu verbinden" : ctx.config.chatSupport?.auth === "session" ? "Portal-Anmeldung erneuern" : "Microsoft-Anmeldung erneuern"
       }
     ),
-    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-danger text-[0.75rem] mt-3", children: error })
+    error && /* @__PURE__ */ jsx3("p", { role: "alert", className: "text-danger text-[0.75rem] mt-3", children: error })
   ] });
 }
 
 // src/browser.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function resizeInput(field) {
   if (!field) return;
   field.style.height = "auto";
   field.style.height = `${field.scrollHeight + field.offsetHeight - field.clientHeight}px`;
 }
 function Chat(ctx) {
-  return ctx.config.chatSupport ? /* @__PURE__ */ jsx2(SupportChat, { ...ctx }) : /* @__PURE__ */ jsx2(LegacyChat, { ...ctx });
+  return ctx.config.chatSupport ? /* @__PURE__ */ jsx4(SupportChat, { ...ctx }) : /* @__PURE__ */ jsx4(LegacyChat, { ...ctx });
 }
 function LegacyChat(ctx) {
-  const [messages, setMessages] = useState2([]);
-  const [input, setInput] = useState2("");
-  const [resolved, setResolved] = useState2(false);
-  const inputField = useRef2(null);
-  useLayoutEffect(() => resizeInput(inputField.current), [input]);
-  useEffect2(() => {
+  const [messages, setMessages] = useState4([]);
+  const [input, setInput] = useState4("");
+  const [resolved, setResolved] = useState4(false);
+  const inputField = useRef4(null);
+  useLayoutEffect2(() => resizeInput(inputField.current), [input]);
+  useEffect4(() => {
     const field = inputField.current;
     if (!field) return;
     let width = field.clientWidth;
@@ -665,15 +1040,19 @@ function LegacyChat(ctx) {
     observer.observe(field);
     return () => observer.disconnect();
   }, []);
-  const [busy, setBusy] = useState2(false);
-  const [isMac, setIsMac] = useState2(false);
-  useEffect2(() => setIsMac(/Mac/.test(navigator.platform)), []);
-  const [error, setError] = useState2("");
-  const abort = useRef2(null);
-  useEffect2(() => () => abort.current?.abort(), []);
+  const [busy, setBusy] = useState4(false);
+  const [voiceBusy, setVoiceBusy] = useState4(false);
+  const scroll = useChatScroll(messages);
+  const sending = useRef4(false);
+  const [error, setError] = useState4("");
+  const abort = useRef4(null);
+  useEffect4(() => () => abort.current?.abort(), []);
   async function submit(e) {
     e.preventDefault();
-    if (!input.trim() || busy || resolved) return;
+    if (!input.trim() || busy || voiceBusy || resolved || sending.current)
+      return;
+    sending.current = true;
+    scroll.follow();
     const history = [
       ...messages.map(({ role, content }) => ({ role, content })),
       { role: "user", content: input.trim() }
@@ -759,45 +1138,49 @@ function LegacyChat(ctx) {
         setError(err instanceof Error ? err.message : "Chat nicht verf\xFCgbar.");
     } finally {
       setBusy(false);
+      sending.current = false;
       abort.current = null;
     }
   }
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: ctx.surface === "hero" ? "chat-layout block" : "chat-layout grid grid-cols-[1fr_1.7fr] gap-13.75 compact:grid-cols-[1fr] compact:gap-3.75",
       children: [
-        ctx.surface !== "hero" && /* @__PURE__ */ jsxs2("div", { className: "chat-intro [&_p]:text-[0.875rem] [&_p]:text-muted [&_p]:leading-[1.8] compact:max-w-[500px]", children: [
-          /* @__PURE__ */ jsx2("h3", { children: "Eine Frage reicht." }),
-          /* @__PURE__ */ jsx2("p", { children: "Unser Assistent kennt die Hilfe-Inhalte, das Team und die aktuellen Meldungen. F\xFCr dringende St\xF6rungen bleibt die Hotline der direkte Weg." }),
-          /* @__PURE__ */ jsx2("p", { className: "data-state font-mono text-[0.625rem] text-muted m-[calc(var(--spacing)_*_3)_0_0] [&.warning]:text-warning", children: "\xD6ffentlicher Chat \xB7 Verlauf nur in dieser Sitzung" })
+        ctx.surface !== "hero" && /* @__PURE__ */ jsxs4("div", { className: "chat-intro [&_p]:text-[0.875rem] [&_p]:text-muted [&_p]:leading-[1.8] compact:max-w-[500px]", children: [
+          /* @__PURE__ */ jsx4("h3", { children: "Eine Frage reicht." }),
+          /* @__PURE__ */ jsx4("p", { children: "Unser Assistent kennt die Hilfe-Inhalte, das Team und die aktuellen Meldungen. F\xFCr dringende St\xF6rungen bleibt die Hotline der direkte Weg." }),
+          /* @__PURE__ */ jsx4("p", { className: "data-state font-mono text-[0.625rem] text-muted m-[calc(var(--spacing)_*_3)_0_0] [&.warning]:text-warning", children: "\xD6ffentlicher Chat \xB7 Verlauf nur in dieser Sitzung" })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "chat-panel text-ink compact:p-4 bg-card border border-line p-6 rounded-card", children: [
-          /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs4("div", { className: "chat-panel text-ink compact:p-4 bg-card border border-line p-6 rounded-card", children: [
+          /* @__PURE__ */ jsxs4(
             "div",
             {
-              className: "chat-history empty:hidden grid gap-3.75 max-h-[400px] overflow-auto mb-4",
+              ref: scroll.history,
+              onScroll: scroll.onScroll,
+              className: "chat-history empty:hidden grid gap-3.75 max-h-[min(400px,45dvh)] overflow-auto overscroll-contain mb-4",
+              "aria-label": "Gespr\xE4chsverlauf",
               "aria-live": "polite",
               "aria-busy": busy,
               children: [
-                !messages.length && ctx.surface !== "hero" && /* @__PURE__ */ jsx2("p", { className: "message assistant text-[0.8125rem] leading-[1.8] whitespace-pre-wrap [overflow-wrap:anywhere] [&.user]:bg-soft [&.user]:pt-3 [&.user]:pb-3 [&.user]:pl-4 [&.user]:pr-4 [&.user]:rounded-card [&.assistant]:[border-left:2px_solid_var(--accent)] [&.assistant]:pt-[0] [&.assistant]:pb-[0] [&.assistant]:pl-4 [&.assistant]:pr-4", children: "Wie kann ich Ihnen helfen?" }),
-                messages.map((m, i) => /* @__PURE__ */ jsxs2(
+                !messages.length && ctx.surface !== "hero" && /* @__PURE__ */ jsx4("p", { className: "message assistant text-[0.8125rem] leading-[1.8] whitespace-pre-wrap [overflow-wrap:anywhere] [&.user]:bg-soft [&.user]:pt-3 [&.user]:pb-3 [&.user]:pl-4 [&.user]:pr-4 [&.user]:rounded-card [&.assistant]:[border-left:2px_solid_var(--accent)] [&.assistant]:pt-[0] [&.assistant]:pb-[0] [&.assistant]:pl-4 [&.assistant]:pr-4", children: "Wie kann ich Ihnen helfen?" }),
+                messages.map((m, i) => /* @__PURE__ */ jsxs4(
                   "div",
                   {
                     className: "message text-[0.8125rem] leading-[1.8] whitespace-pre-wrap [overflow-wrap:anywhere] [&.user]:bg-soft [&.user]:pt-3 [&.user]:pb-3 [&.user]:pl-4 [&.user]:pr-4 [&.user]:rounded-card [&.assistant]:[border-left:2px_solid_var(--accent)] [&.assistant]:pt-[0] [&.assistant]:pb-[0] [&.assistant]:pl-4 [&.assistant]:pr-4 " + m.role,
                     children: [
-                      m.role === "user" ? /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Sie: " }) : /* @__PURE__ */ jsx2("span", { className: "block text-[0.6875rem] text-muted mb-1", children: m.responder?.role === "on-duty" && m.responder.name ? `Digitaler Assistent von ${m.responder.name}` : "Digitaler Assistent des Service-Teams" }),
+                      m.role === "user" ? /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Sie: " }) : /* @__PURE__ */ jsx4("span", { className: "block text-[0.6875rem] text-muted mb-1", children: m.responder?.role === "on-duty" && m.responder.name ? `Digitaler Assistent von ${m.responder.name}` : "Digitaler Assistent des Service-Teams" }),
                       m.role === "user" ? m.content : m.content ? answerParts(m.content, m.sources ?? [], !m.complete).map(
-                        (part, index) => part.href ? /* @__PURE__ */ jsx2("a", { href: part.href, children: part.text }, index) : /* @__PURE__ */ jsx2("span", { children: part.text }, index)
+                        (part, index) => part.href ? /* @__PURE__ */ jsx4("a", { href: part.href, children: part.text }, index) : /* @__PURE__ */ jsx4("span", { children: part.text }, index)
                       ) : "Antwort wird vorbereitet \u2026",
-                      m.role === "assistant" && !!m.sources?.length && /* @__PURE__ */ jsxs2("div", { className: "sources text-[0.6875rem] text-muted mt-3 mb-1 [&_a]:mr-3", children: [
+                      m.role === "assistant" && !!m.sources?.length && /* @__PURE__ */ jsxs4("div", { className: "sources text-[0.6875rem] text-muted mt-3 mb-1 [&_a]:mr-3", children: [
                         "Referenzquellen:",
                         " ",
                         m.sources.map(
-                          (source) => sourceHref(source.href) ? /* @__PURE__ */ jsxs2("a", { href: sourceHref(source.href), children: [
+                          (source) => sourceHref(source.href) ? /* @__PURE__ */ jsxs4("a", { href: sourceHref(source.href), children: [
                             source.title,
                             source.stale ? " (veraltet)" : ""
-                          ] }, source.id) : /* @__PURE__ */ jsxs2("span", { children: [
+                          ] }, source.id) : /* @__PURE__ */ jsxs4("span", { children: [
                             source.title,
                             " "
                           ] }, source.id)
@@ -810,56 +1193,41 @@ function LegacyChat(ctx) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsx4(NewMessages, { visible: scroll.unread, follow: scroll.follow }),
+          /* @__PURE__ */ jsxs4(
             "form",
             {
               className: "chat-form flex gap-2.5 items-end [&_textarea]:resize-none [&_textarea]:min-h-[50px] [&_textarea]:[flex:1] [&_textarea]:min-w-0 [&_button]:bg-accent [&_button]:text-accent-ink [&_button]:[border:0] [&_button]:w-[50px] [&_button]:h-[50px] [&_button]:rounded-card [&_button]:text-[1.25rem] [&_button:disabled]:opacity-[0.5]",
               onSubmit: submit,
               children: [
-                /* @__PURE__ */ jsx2("label", { className: "sr-only", htmlFor: "chat-input", children: "Ihre Frage" }),
-                /* @__PURE__ */ jsxs2("div", { className: "relative flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx4("label", { className: "sr-only", htmlFor: "chat-input", children: "Ihre Frage" }),
+                /* @__PURE__ */ jsxs4("div", { className: "relative flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx4(
                     "textarea",
                     {
                       id: "chat-input",
                       ref: inputField,
                       rows: 1,
                       autoFocus: true,
-                      className: "search bg-card border border-line rounded-card pt-3.5 pb-7 px-4.5 text-ink w-full block overflow-hidden",
+                      className: "search bg-card border border-line rounded-card pt-3.5 pb-7 px-4.5 text-ink w-full block max-h-[180px] overflow-auto",
                       value: input,
                       disabled: resolved,
                       maxLength: 4e3,
                       onChange: (e) => setInput(e.target.value),
-                      onKeyDown: (e) => {
-                        if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && !e.nativeEvent.isComposing && !e.repeat) {
-                          e.preventDefault();
-                          if (!busy && input.trim())
-                            e.currentTarget.form?.requestSubmit();
-                        }
-                      },
+                      onKeyDown: (e) => sendShortcut(e, busy || voiceBusy || resolved || !input.trim()),
                       "aria-keyshortcuts": "Control+Enter Meta+Enter",
                       "aria-describedby": "chat-shortcut",
                       placeholder: "Ihre Frage an unser Team \u2026",
                       required: true
                     }
                   ),
-                  /* @__PURE__ */ jsxs2(
-                    "span",
-                    {
-                      id: "chat-shortcut",
-                      className: "absolute right-4.5 bottom-2 text-[0.625rem] text-muted pointer-events-none",
-                      children: [
-                        isMac ? "\u2318" : "Strg",
-                        " + Enter zum Senden"
-                      ]
-                    }
-                  )
+                  /* @__PURE__ */ jsx4(Shortcut, { id: "chat-shortcut" })
                 ] }),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "submit",
-                    disabled: busy || resolved || !input.trim(),
+                    disabled: busy || voiceBusy || resolved || !input.trim(),
                     "aria-label": "Frage senden",
                     children: "\u2191"
                   }
@@ -867,8 +1235,18 @@ function LegacyChat(ctx) {
               ]
             }
           ),
-          ctx.surface === "hero" && /* @__PURE__ */ jsx2("p", { className: "data-state font-mono text-[0.625rem] text-muted mt-3 mb-0", children: "Digitaler Assistent \xB7 Ihre Frage wird automatisch beantwortet. F\xFCr pers\xF6nlichen Kontakt nutzen Sie die Hotline." }),
-          messages.length > 0 && !resolved && /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx4(
+            VoiceInput,
+            {
+              ctx,
+              value: input,
+              setValue: setInput,
+              disabled: resolved,
+              onBusy: setVoiceBusy
+            }
+          ),
+          ctx.surface === "hero" && /* @__PURE__ */ jsx4("p", { className: "data-state font-mono text-[0.625rem] text-muted mt-3 mb-0", children: "Digitaler Assistent \xB7 Ihre Frage wird automatisch beantwortet. F\xFCr pers\xF6nlichen Kontakt nutzen Sie die Hotline." }),
+          messages.length > 0 && !resolved && /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -891,15 +1269,16 @@ function LegacyChat(ctx) {
               children: "Problem gel\xF6st"
             }
           ),
-          resolved && /* @__PURE__ */ jsxs2("div", { className: "mt-3", children: [
-            /* @__PURE__ */ jsx2("p", { role: "status", children: "Problem gel\xF6st" }),
-            /* @__PURE__ */ jsx2(
+          resolved && /* @__PURE__ */ jsxs4("div", { className: "mt-3", children: [
+            /* @__PURE__ */ jsx4("p", { role: "status", children: "Problem gel\xF6st" }),
+            /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
                 className: "underline mt-2",
                 disabled: busy,
                 onClick: () => {
+                  scroll.follow();
                   setMessages([]);
                   setResolved(false);
                   setInput("");
@@ -909,7 +1288,7 @@ function LegacyChat(ctx) {
               }
             )
           ] }),
-          error && /* @__PURE__ */ jsx2(
+          error && /* @__PURE__ */ jsx4(
             "p",
             {
               className: "chat-error text-danger dark:text-warning text-[0.75rem]",

package/dist/{chunk-W5MUDSVD.js → chunk-DZ3YQB4V.js}

@@ -1,7 +1,7 @@
 // package.json
 var cspPlugin = {
   id: "chat",
-  sdkVersion: "^0.11.0",
+  sdkVersion: "^0.12.0",
   browser: "./browser",
   server: "./server"
 };

package/dist/server.d.ts

@@ -7,6 +7,8 @@ declare const configSchema: z.ZodEffects<z.ZodObject<{
     CSP_CHAT_DEMO: z.ZodOptional<z.ZodEnum<["true", "false"]>>;
     CSP_CHAT_PROVIDER: z.ZodDefault<z.ZodEnum<["openai", "azure", "ollama"]>>;
     CSP_CHAT_MODEL: z.ZodOptional<z.ZodString>;
+    CSP_CHAT_TRANSCRIPTION_ENABLED: z.ZodDefault<z.ZodEnum<["true", "false"]>>;
+    CSP_CHAT_TRANSCRIPTION_MODEL: z.ZodDefault<z.ZodString>;
     CSP_CHAT_OPENAI_API_KEY: z.ZodOptional<z.ZodString>;
     CSP_CHAT_OPENAI_URL: z.ZodOptional<z.ZodString>;
     CSP_CHAT_AZURE_API_KEY: z.ZodOptional<z.ZodString>;
@@ -19,6 +21,8 @@ declare const configSchema: z.ZodEffects<z.ZodObject<{
     CSP_CHAT_CONTEXT_CHARS: z.ZodDefault<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
     CSP_CHAT_PROVIDER: "openai" | "azure" | "ollama";
+    CSP_CHAT_TRANSCRIPTION_ENABLED: "true" | "false";
+    CSP_CHAT_TRANSCRIPTION_MODEL: string;
     CSP_CHAT_RATE_LIMIT: number;
     CSP_CHAT_CONCURRENCY: number;
     CSP_CHAT_MAX_TOKENS: number;
@@ -37,6 +41,8 @@ declare const configSchema: z.ZodEffects<z.ZodObject<{
     CSP_CHAT_DEMO?: "true" | "false" | undefined;
     CSP_CHAT_PROVIDER?: "openai" | "azure" | "ollama" | undefined;
     CSP_CHAT_MODEL?: string | undefined;
+    CSP_CHAT_TRANSCRIPTION_ENABLED?: "true" | "false" | undefined;
+    CSP_CHAT_TRANSCRIPTION_MODEL?: string | undefined;
     CSP_CHAT_OPENAI_API_KEY?: string | undefined;
     CSP_CHAT_OPENAI_URL?: string | undefined;
     CSP_CHAT_AZURE_API_KEY?: string | undefined;
@@ -49,6 +55,8 @@ declare const configSchema: z.ZodEffects<z.ZodObject<{
     CSP_CHAT_CONTEXT_CHARS?: number | undefined;
 }>, {
     CSP_CHAT_PROVIDER: "openai" | "azure" | "ollama";
+    CSP_CHAT_TRANSCRIPTION_ENABLED: "true" | "false";
+    CSP_CHAT_TRANSCRIPTION_MODEL: string;
     CSP_CHAT_RATE_LIMIT: number;
     CSP_CHAT_CONCURRENCY: number;
     CSP_CHAT_MAX_TOKENS: number;
@@ -67,6 +75,8 @@ declare const configSchema: z.ZodEffects<z.ZodObject<{
     CSP_CHAT_DEMO?: "true" | "false" | undefined;
     CSP_CHAT_PROVIDER?: "openai" | "azure" | "ollama" | undefined;
     CSP_CHAT_MODEL?: string | undefined;
+    CSP_CHAT_TRANSCRIPTION_ENABLED?: "true" | "false" | undefined;
+    CSP_CHAT_TRANSCRIPTION_MODEL?: string | undefined;
     CSP_CHAT_OPENAI_API_KEY?: string | undefined;
     CSP_CHAT_OPENAI_URL?: string | undefined;
     CSP_CHAT_AZURE_API_KEY?: string | undefined;
@@ -88,6 +98,8 @@ declare const _default: {
         CSP_CHAT_DEMO: z.ZodOptional<z.ZodEnum<["true", "false"]>>;
         CSP_CHAT_PROVIDER: z.ZodDefault<z.ZodEnum<["openai", "azure", "ollama"]>>;
         CSP_CHAT_MODEL: z.ZodOptional<z.ZodString>;
+        CSP_CHAT_TRANSCRIPTION_ENABLED: z.ZodDefault<z.ZodEnum<["true", "false"]>>;
+        CSP_CHAT_TRANSCRIPTION_MODEL: z.ZodDefault<z.ZodString>;
         CSP_CHAT_OPENAI_API_KEY: z.ZodOptional<z.ZodString>;
         CSP_CHAT_OPENAI_URL: z.ZodOptional<z.ZodString>;
         CSP_CHAT_AZURE_API_KEY: z.ZodOptional<z.ZodString>;
@@ -100,6 +112,8 @@ declare const _default: {
         CSP_CHAT_CONTEXT_CHARS: z.ZodDefault<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         CSP_CHAT_PROVIDER: "openai" | "azure" | "ollama";
+        CSP_CHAT_TRANSCRIPTION_ENABLED: "true" | "false";
+        CSP_CHAT_TRANSCRIPTION_MODEL: string;
         CSP_CHAT_RATE_LIMIT: number;
         CSP_CHAT_CONCURRENCY: number;
         CSP_CHAT_MAX_TOKENS: number;
@@ -118,6 +132,8 @@ declare const _default: {
         CSP_CHAT_DEMO?: "true" | "false" | undefined;
         CSP_CHAT_PROVIDER?: "openai" | "azure" | "ollama" | undefined;
         CSP_CHAT_MODEL?: string | undefined;
+        CSP_CHAT_TRANSCRIPTION_ENABLED?: "true" | "false" | undefined;
+        CSP_CHAT_TRANSCRIPTION_MODEL?: string | undefined;
         CSP_CHAT_OPENAI_API_KEY?: string | undefined;
         CSP_CHAT_OPENAI_URL?: string | undefined;
         CSP_CHAT_AZURE_API_KEY?: string | undefined;
@@ -130,6 +146,8 @@ declare const _default: {
         CSP_CHAT_CONTEXT_CHARS?: number | undefined;
     }>, {
         CSP_CHAT_PROVIDER: "openai" | "azure" | "ollama";
+        CSP_CHAT_TRANSCRIPTION_ENABLED: "true" | "false";
+        CSP_CHAT_TRANSCRIPTION_MODEL: string;
         CSP_CHAT_RATE_LIMIT: number;
         CSP_CHAT_CONCURRENCY: number;
         CSP_CHAT_MAX_TOKENS: number;
@@ -148,6 +166,8 @@ declare const _default: {
         CSP_CHAT_DEMO?: "true" | "false" | undefined;
         CSP_CHAT_PROVIDER?: "openai" | "azure" | "ollama" | undefined;
         CSP_CHAT_MODEL?: string | undefined;
+        CSP_CHAT_TRANSCRIPTION_ENABLED?: "true" | "false" | undefined;
+        CSP_CHAT_TRANSCRIPTION_MODEL?: string | undefined;
         CSP_CHAT_OPENAI_API_KEY?: string | undefined;
         CSP_CHAT_OPENAI_URL?: string | undefined;
         CSP_CHAT_AZURE_API_KEY?: string | undefined;

package/dist/server.js

@@ -1,6 +1,6 @@
 import {
   cspPlugin
-} from "./chunk-W5MUDSVD.js";
+} from "./chunk-DZ3YQB4V.js";
 
 // src/server.ts
 import { z as z2 } from "zod";
@@ -194,12 +194,138 @@ Bieten Sie bei erforderlicher Eskalation belegte pers\xF6nliche Kontaktm\xF6glic
 Nur vorhandene Quellen-IDs zitieren, keine URLs oder technischen Ticketbezeichnungen erfinden. Kein Markdown-Link, kein HTML. Keine Aktionen ausf\xFChren, keine Ticketanlage oder pers\xF6nliche Pr\xFCfung behaupten. Notf\xE4lle: Hotline ${JSON.stringify(phone)}. Automatische Antwort, kein menschlicher Live-Chat.`;
 }
 
+// src/transcription.ts
+import OpenAI2, { toFile } from "openai";
+var limit = 10 * 1024 * 1024;
+var formats = {
+  "audio/webm": "webm",
+  "audio/mp4": "mp4",
+  "video/mp4": "mp4",
+  "audio/ogg": "ogg",
+  "audio/wav": "wav",
+  "audio/mpeg": "mp3"
+};
+function validAudio(bytes, format) {
+  if (format === "webm")
+    return bytes.subarray(0, 4).equals(Buffer.from([26, 69, 223, 163]));
+  if (format === "mp4") return bytes.subarray(4, 8).toString() === "ftyp";
+  if (format === "ogg") return bytes.subarray(0, 4).toString() === "OggS";
+  if (format === "wav")
+    return bytes.subarray(0, 4).toString() === "RIFF" && bytes.subarray(8, 12).toString() === "WAVE";
+  return bytes.subarray(0, 3).toString() === "ID3" || bytes[0] === 255 && (bytes[1] & 224) === 224;
+}
+function setupTranscription(ctx, config, demo) {
+  const enabled = !demo && config.CSP_CHAT_TRANSCRIPTION_ENABLED === "true" && config.CSP_CHAT_PROVIDER === "openai" && Boolean(config.CSP_CHAT_OPENAI_API_KEY);
+  ctx.app.get("/api/v1/chat/capabilities", async () => ({
+    transcription: enabled,
+    maxRecordingSeconds: 60,
+    maxAudioBytes: limit
+  }));
+  const client = enabled ? new OpenAI2({
+    apiKey: config.CSP_CHAT_OPENAI_API_KEY,
+    baseURL: config.CSP_CHAT_OPENAI_URL,
+    fetch: ctx.fetch,
+    maxRetries: 0
+  }) : void 0;
+  const windows = /* @__PURE__ */ new Map();
+  let active = 0;
+  const reservations = /* @__PURE__ */ new WeakSet();
+  const release = (req) => {
+    if (reservations.delete(req)) active--;
+  };
+  const controllers = /* @__PURE__ */ new Set();
+  ctx.app.addHook("preClose", async () => {
+    for (const controller of controllers) controller.abort();
+  });
+  ctx.app.register(async (scope) => {
+    scope.addHook("onResponse", async (req) => release(req));
+    scope.addHook("onRequestAbort", async (req) => release(req));
+    scope.addContentTypeParser(
+      Object.keys(formats),
+      { parseAs: "buffer", bodyLimit: limit },
+      (_req, body, done) => done(null, body)
+    );
+    scope.post(
+      "/api/v1/chat/transcriptions",
+      {
+        bodyLimit: limit,
+        onRequest: async (req, reply) => {
+          if (!enabled)
+            return reply.code(404).send({ error: "Spracheingabe ist nicht verf\xFCgbar." });
+          const identity = ctx.config.chatSupport ? await ctx.authenticateChat?.(req.headers.authorization) : void 0;
+          if (ctx.config.chatSupport && !identity)
+            return reply.code(401).send({ error: "Chat-Anmeldung erforderlich." });
+          const now = Date.now();
+          for (const [key, value] of windows)
+            if (value.until <= now) windows.delete(key);
+          const keys = [
+            "ip:" + req.ip,
+            ...identity ? ["user:" + identity.tenantId + ":" + identity.userId] : []
+          ];
+          if (active >= config.CSP_CHAT_CONCURRENCY || windows.size >= 1e4 || keys.some(
+            (key) => (windows.get(key)?.count ?? 0) >= config.CSP_CHAT_RATE_LIMIT
+          ))
+            return reply.code(429).header("Retry-After", "60").send({ error: "Bitte warten Sie eine Minute." });
+          active++;
+          reservations.add(req);
+          for (const key of keys) {
+            const value = windows.get(key) ?? { count: 0, until: now + 6e4 };
+            value.count++;
+            windows.set(key, value);
+          }
+        }
+      },
+      async (req, reply) => {
+        const mime = req.headers["content-type"]?.split(";")[0].trim() ?? "", format = formats[mime], bytes = req.body;
+        if (!format || !Buffer.isBuffer(bytes) || !bytes.length || !validAudio(bytes, format))
+          return reply.code(400).send({ error: "Ung\xFCltige Audioaufnahme." });
+        const controller = new AbortController();
+        controllers.add(controller);
+        const timeout = setTimeout(
+          () => controller.abort(),
+          config.CSP_CHAT_TIMEOUT_MS
+        ), cancel = () => controller.abort();
+        reply.raw.on("close", cancel);
+        try {
+          const result = await client.audio.transcriptions.create(
+            {
+              file: await toFile(bytes, "recording." + format, { type: mime }),
+              model: config.CSP_CHAT_TRANSCRIPTION_MODEL,
+              response_format: "json"
+            },
+            { signal: controller.signal }
+          );
+          if (typeof result.text !== "string" || !result.text.trim())
+            return reply.code(422).send({
+              error: "Keine Sprache erkannt. Bitte versuchen Sie es erneut."
+            });
+          if (result.text.length > 4e3)
+            return reply.code(422).send({
+              error: "Die Aufnahme enth\xE4lt zu viel Text. Bitte k\xFCrzer diktieren."
+            });
+          return { text: result.text.trim() };
+        } catch {
+          return reply.code(controller.signal.aborted ? 504 : 503).send({
+            error: "Spracheingabe derzeit nicht verf\xFCgbar. Ihr Entwurf bleibt erhalten."
+          });
+        } finally {
+          clearTimeout(timeout);
+          reply.raw.off("close", cancel);
+          controllers.delete(controller);
+        }
+      }
+    );
+  });
+}
+
 // src/server.ts
 var configSchema = z2.object({
   CSP_DEMO: z2.string().optional(),
   CSP_CHAT_DEMO: z2.enum(["true", "false"]).optional(),
   CSP_CHAT_PROVIDER: z2.enum(["openai", "azure", "ollama"]).default("ollama"),
   CSP_CHAT_MODEL: z2.string().optional(),
+  CSP_CHAT_TRANSCRIPTION_ENABLED: z2.enum(["true", "false"]).default("true"),
+  CSP_CHAT_TRANSCRIPTION_MODEL: z2.string().min(1).max(100).default("gpt-4o-mini-transcribe"),
   CSP_CHAT_OPENAI_API_KEY: z2.string().optional(),
   CSP_CHAT_OPENAI_URL: z2.string().url().optional(),
   CSP_CHAT_AZURE_API_KEY: z2.string().optional(),
@@ -286,6 +412,7 @@ var server_default = {
   setup(ctx) {
     const c = configSchema.parse(ctx.env);
     const demo = c.CSP_CHAT_DEMO === "true" || c.CSP_CHAT_DEMO !== "false" && ctx.demo;
+    setupTranscription(ctx, c, demo);
     const provider = demo ? void 0 : createProvider(
       {
         ...ctx.env,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kieksme/csp-plugin-chat",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@azure/msal-browser": "^5.25.0",
-    "@kieksme/csp-sdk": "^0.11.0",
+    "@kieksme/csp-sdk": "^0.12.0",
     "openai": "^6.3.0",
     "zod": "^3.25.76"
   },
@@ -35,7 +35,7 @@
   },
   "cspPlugin": {
     "id": "chat",
-    "sdkVersion": "^0.11.0",
+    "sdkVersion": "^0.12.0",
     "browser": "./browser",
     "server": "./server"
   },