@kieksme/csp-plugin-chat 0.13.1 → 0.13.3

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 below 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 inside the text field at the bottom right; 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.
 
@@ -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. All composer buttons stay in one row and share a 44 px height. Stop and cancel use accessible icons during recording. The shortcut sits inside the field at the bottom right, with space reserved below editable text. Its privacy notice stays visible underneath.

package/dist/browser.js

@@ -1,6 +1,6 @@
 import {
   cspPlugin
-} from "./chunk-B7EKNOQK.js";
+} from "./chunk-VM2Y3GL7.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,101 @@ 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",
+        "aria-label": "Aufnahme stoppen",
+        title: "Aufnahme stoppen",
+        onClick: () => recorder.current?.stop(),
+        children: /* @__PURE__ */ jsx2(
+          "svg",
+          {
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            children: /* @__PURE__ */ jsx2("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: "chat-voice-cancel",
+        "aria-label": "Abbrechen",
+        title: "Abbrechen",
+        onClick: () => {
+          operation.current++;
+          cancelled.current = true;
+          request.current?.abort();
+          if (recorder.current?.state === "recording")
+            recorder.current.stop();
+          release();
+          idle();
+        },
+        children: /* @__PURE__ */ jsx2(
+          "svg",
+          {
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            width: "16",
+            height: "16",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            children: /* @__PURE__ */ jsx2("path", { d: "m6 6 12 12M18 6 6 18" })
+          }
+        )
+      }
+    )
+  ] });
+  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 +954,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__ */ jsxs3("div", { className: "chat-compose-field", children: [
+                  /* @__PURE__ */ jsx3(
+                    "textarea",
+                    {
+                      id: "support-chat-input",
+                      value: input,
+                      rows: 1,
+                      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(Shortcut, { id: "support-chat-shortcut" })
+                ] }),
+                /* @__PURE__ */ jsx3("div", { className: "chat-compose-toolbar", children: /* @__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 +1103,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 +1287,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__ */ jsxs4("div", { className: "chat-compose-field", 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 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__ */ jsx4(Shortcut, { id: "chat-shortcut" })
+                      ] }),
+                      /* @__PURE__ */ jsx4("div", { className: "chat-compose-toolbar", children: /* @__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-VM2Y3GL7.js}

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

package/dist/server.js

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