@kieksme/csp-plugin-chat 0.13.0 → 0.13.2

package/README.md

@@ -33,3 +33,5 @@ The assistant asks one short clarifying question for vague requests (for example
 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).
 
 Both chat modes share a service-chat header and composer. Visitor messages align to the right, assistant and human replies to the left with visible sender labels. Customer theme colours, dark mode and mobile layouts apply throughout. See [chat design](../../docs/chat.md#gestaltung).
+
+Dictation uses an icon-only microphone button with the accessible name and tooltip “Nachricht diktieren”. The microphone sits directly beside Send in the composer toolbar. Its privacy notice stays visible underneath, and mobile touch targets remain 44 × 44 px.

package/dist/browser.js

@@ -1,6 +1,6 @@
 import {
   cspPlugin
-} from "./chunk-W5TFART7.js";
+} from "./chunk-OGWLCI3O.js";
 
 // src/tools.ts
 import {
@@ -404,7 +404,8 @@ function VoiceInput({
   setValue,
   disabled,
   token,
-  onBusy
+  onBusy,
+  children
 }) {
   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);
@@ -573,68 +574,75 @@ function VoiceInput({
       }
     }
   }
-  if (!enabled) return null;
-  return /* @__PURE__ */ jsxs2("div", { className: "chat-voice", "data-recording": state === "recording", children: [
-    state === "idle" ? /* @__PURE__ */ jsxs2(
+  if (!enabled) return children(null, null);
+  const controls = state === "idle" ? /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      className: "chat-voice-button chat-microphone",
+      "aria-label": "Nachricht diktieren",
+      title: "Nachricht diktieren",
+      disabled,
+      onClick: () => void start(),
+      children: /* @__PURE__ */ jsxs2(
+        "svg",
+        {
+          "aria-hidden": "true",
+          viewBox: "0 0 24 24",
+          width: "16",
+          height: "16",
+          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" })
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+    state === "recording" && /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
         className: "chat-voice-button",
-        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"
-        ]
+        onClick: () => recorder.current?.stop(),
+        children: "Aufnahme stoppen"
       }
-    ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2("span", { role: "status", className: "chat-voice-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: "chat-voice-button",
-          onClick: () => recorder.current?.stop(),
-          children: "Aufnahme stoppen"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          className: "chat-voice-cancel",
-          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: "chat-voice-notice", 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 })
+    ),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: "chat-voice-cancel",
+        onClick: () => {
+          operation.current++;
+          cancelled.current = true;
+          request.current?.abort();
+          if (recorder.current?.state === "recording")
+            recorder.current.stop();
+          release();
+          idle();
+        },
+        children: "Abbrechen"
+      }
+    )
   ] });
+  const details = /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "chat-voice",
+      "data-state": state,
+      "data-recording": state === "recording",
+      children: [
+        state !== "idle" && /* @__PURE__ */ jsx2("span", { role: "status", className: "chat-voice-status", children: state === "recording" ? "\u25CF Aufnahme l\xE4uft \xB7 maximal 60 Sekunden" : state === "starting" ? "Mikrofon wird gestartet \u2026" : "Sprache wird in Text umgewandelt \u2026" }),
+        /* @__PURE__ */ jsx2("p", { className: "chat-voice-notice", 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 })
+      ]
+    }
+  );
+  return children(controls, details);
 }
 
 // src/support-chat.tsx
@@ -920,48 +928,61 @@ function SupportChat(ctx) {
         children: anonymous ? "Chat neu verbinden" : ctx.config.chatSupport?.auth === "session" ? "Portal-Anmeldung erneuern" : "Mit Microsoft anmelden"
       }
     ),
-    ready && /* @__PURE__ */ jsxs3("div", { className: "chat-composer", 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: "chat-send",
-            disabled: blocked || !input.trim(),
-            children: "Senden"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx3(Shortcut, { id: "support-chat-shortcut" }),
-      /* @__PURE__ */ jsx3(
-        VoiceInput,
-        {
-          ctx,
-          value: input,
-          setValue: setInput,
-          disabled: current?.status === "closed",
-          token: auth?.token,
-          onBusy: setVoiceBusy
-        }
-      )
-    ] }),
+    ready && /* @__PURE__ */ jsx3("div", { className: "chat-composer", children: /* @__PURE__ */ jsx3(
+      VoiceInput,
+      {
+        ctx,
+        value: input,
+        setValue: setInput,
+        disabled: current?.status === "closed",
+        token: auth?.token,
+        onBusy: setVoiceBusy,
+        children: (controls, details) => /* @__PURE__ */ jsxs3(Fragment2, { 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__ */ jsxs3("div", { className: "chat-compose-toolbar", children: [
+                  /* @__PURE__ */ jsx3(Shortcut, { id: "support-chat-shortcut" }),
+                  /* @__PURE__ */ jsxs3("div", { className: "chat-compose-actions", children: [
+                    controls,
+                    /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "submit",
+                        className: "chat-send",
+                        disabled: blocked || !input.trim(),
+                        children: "Senden"
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          details
+        ] })
+      }
+    ) }),
     ready && (!current || current.status === "bot") && /* @__PURE__ */ jsxs3(
       "button",
       {
@@ -1056,7 +1077,7 @@ function SupportChat(ctx) {
 }
 
 // src/browser.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function resizeInput(field) {
   if (!field) return;
   field.style.height = "auto";
@@ -1240,56 +1261,67 @@ function LegacyChat(ctx) {
             }
           ),
           /* @__PURE__ */ jsx4(NewMessages, { visible: scroll.unread, follow: scroll.follow }),
-          /* @__PURE__ */ jsxs4("div", { className: "chat-composer", children: [
-            /* @__PURE__ */ jsxs4("form", { className: "chat-form flex gap-2.5 items-end", onSubmit: submit, children: [
-              /* @__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",
+          /* @__PURE__ */ jsx4("div", { className: "chat-composer", children: /* @__PURE__ */ jsx4(
+            VoiceInput,
+            {
+              ctx,
+              value: input,
+              setValue: setInput,
+              disabled: resolved,
+              onBusy: setVoiceBusy,
+              children: (controls, details) => /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                /* @__PURE__ */ jsxs4(
+                  "form",
                   {
-                    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 max-h-[180px] overflow-auto",
-                    value: input,
-                    disabled: resolved,
-                    maxLength: 4e3,
-                    onChange: (e) => setInput(e.target.value),
-                    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
+                    className: "chat-form flex gap-2.5 items-end",
+                    onSubmit: submit,
+                    children: [
+                      /* @__PURE__ */ jsx4("label", { className: "sr-only", htmlFor: "chat-input", children: "Ihre Frage" }),
+                      /* @__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 max-h-[180px] overflow-auto",
+                          value: input,
+                          disabled: resolved,
+                          maxLength: 4e3,
+                          onChange: (e) => setInput(e.target.value),
+                          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__ */ jsxs4("div", { className: "chat-compose-toolbar", children: [
+                        /* @__PURE__ */ jsx4(Shortcut, { id: "chat-shortcut" }),
+                        /* @__PURE__ */ jsxs4("div", { className: "chat-compose-actions", children: [
+                          controls,
+                          /* @__PURE__ */ jsx4(
+                            "button",
+                            {
+                              type: "submit",
+                              disabled: busy || voiceBusy || resolved || !input.trim(),
+                              className: "chat-send",
+                              "aria-label": "Frage senden",
+                              children: "Senden"
+                            }
+                          )
+                        ] })
+                      ] })
+                    ]
                   }
                 ),
-                /* @__PURE__ */ jsx4(Shortcut, { id: "chat-shortcut" })
-              ] }),
-              /* @__PURE__ */ jsx4(
-                "button",
-                {
-                  type: "submit",
-                  disabled: busy || voiceBusy || resolved || !input.trim(),
-                  className: "chat-send",
-                  "aria-label": "Frage senden",
-                  children: "Senden"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx4(
-              VoiceInput,
-              {
-                ctx,
-                value: input,
-                setValue: setInput,
-                disabled: resolved,
-                onBusy: setVoiceBusy
-              }
-            )
-          ] }),
+                details
+              ] })
+            }
+          ) }),
           messages.length > 0 && !resolved && /* @__PURE__ */ jsx4(
             "button",
             {

package/dist/{chunk-W5TFART7.js → chunk-OGWLCI3O.js}

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

package/dist/server.js

@@ -1,6 +1,6 @@
 import {
   cspPlugin
-} from "./chunk-W5TFART7.js";
+} from "./chunk-OGWLCI3O.js";
 
 // src/server.ts
 import { z as z2 } from "zod";

package/package.json

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