@kieksme/csp-plugin-chat 0.13.1 → 0.13.2

package/README.md

@@ -34,4 +34,4 @@ Long histories follow new messages while the visitor reads at the bottom; scroll
 
 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”. Its privacy notice stays visible alongside the button, and mobile touch targets remain 44 × 44 px.
+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-B7EKNOQK.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,74 +574,75 @@ function VoiceInput({
       }
     }
   }
-  if (!enabled) return null;
-  return /* @__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",
+        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"
+      }
+    )
+  ] });
+  const details = /* @__PURE__ */ jsxs2(
     "div",
     {
       className: "chat-voice",
       "data-state": state,
       "data-recording": state === "recording",
       children: [
-        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: [
-          /* @__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"
-            }
-          )
-        ] }),
+        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
@@ -926,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",
       {
@@ -1062,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";
@@ -1246,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-B7EKNOQK.js → chunk-OGWLCI3O.js}

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

package/dist/server.js

@@ -1,6 +1,6 @@
 import {
   cspPlugin
-} from "./chunk-B7EKNOQK.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.1",
+  "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.1",
+    "@kieksme/csp-sdk": "^0.13.2",
     "openai": "^6.3.0",
     "zod": "^3.25.76"
   },
@@ -35,7 +35,7 @@
   },
   "cspPlugin": {
     "id": "chat",
-    "sdkVersion": "^0.13.1",
+    "sdkVersion": "^0.13.2",
     "browser": "./browser",
     "server": "./server"
   },