@schlenkr/quassel 0.6.0 → 0.7.0

package/index.js

@@ -42,6 +42,11 @@ var englishTexts = {
   send: "Send",
   sendIntoRun: "Feed into the running turn",
   stop: "Stop work",
+  microphone: "Speak",
+  microphoneHint: "Hold to speak or click to start recording",
+  microphonePreparing: "Connecting microphone ...",
+  microphoneRecording: "Finish recording",
+  microphoneTranscribing: "Transcribing ...",
   placeholder: "Write a message ...",
   steeringPlaceholder: "Interject ...",
   steered: "Fed into the running turn",
@@ -112,6 +117,11 @@ var germanTexts = {
   send: "Senden",
   sendIntoRun: "In die laufende Antwort einreihen",
   stop: "Bearbeitung stoppen",
+  microphone: "Sprechen",
+  microphoneHint: "Zum Sprechen halten oder zum Aufnehmen antippen",
+  microphonePreparing: "Mikrofon wird verbunden ...",
+  microphoneRecording: "Aufnahme beenden",
+  microphoneTranscribing: "Wird transkribiert ...",
   placeholder: "Nachricht schreiben ...",
   steeringPlaceholder: "Nachsteuern ...",
   steered: "In die laufende Antwort eingereiht",
@@ -1860,18 +1870,20 @@ function MessageAttachments({ message, texts }) {
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
     /* @__PURE__ */ jsx13("ul", { className: "qsl:mt-2.5 qsl:flex qsl:flex-wrap qsl:gap-2", "aria-label": texts.attachments, children: message.attachments.map((attachment, index) => {
       const isImage = attachment.mediaType.startsWith("image/");
-      return /* @__PURE__ */ jsxs6("li", { className: cn("qsl:relative qsl:flex qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-small", isImage ? "qsl:w-[320px]" : "qsl:w-[190px]"), children: [
-        isImage && /* @__PURE__ */ jsx13(
+      if (isImage)
+        return /* @__PURE__ */ jsx13("li", { className: "qsl:relative qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border", children: /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
-            className: "qsl:block qsl:w-full qsl:cursor-zoom-in qsl:bg-secondary",
+            className: "qsl:block qsl:cursor-zoom-in qsl:bg-secondary",
             "aria-label": fillText(texts.enlargeImage ?? defaultTexts.enlargeImage, { name: attachment.name }),
+            title: attachment.name,
             onClick: () => setEnlarged(attachment),
             "data-chat": "attachment-image",
-            children: /* @__PURE__ */ jsx13("img", { className: "qsl:mx-auto qsl:block qsl:max-h-[240px] qsl:max-w-full qsl:object-contain", src: attachment.url, alt: attachment.name, loading: "lazy" })
+            children: /* @__PURE__ */ jsx13("img", { className: "qsl:block qsl:size-24 qsl:object-cover", src: attachment.url, alt: attachment.name, loading: "lazy" })
           }
-        ),
+        ) }, `${attachment.url}-${index}`);
+      return /* @__PURE__ */ jsxs6("li", { className: "qsl:relative qsl:flex qsl:w-[190px] qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-small", children: [
         attachment.mediaType.startsWith("video/") && /* @__PURE__ */ jsx13("video", { className: "qsl:block qsl:h-[112px] qsl:w-full qsl:bg-secondary qsl:object-contain", src: attachment.url, controls: true, preload: "metadata", "aria-label": attachment.name }),
         /* @__PURE__ */ jsxs6("div", { className: "qsl:flex qsl:flex-col qsl:gap-1 qsl:p-2 qsl:[overflow-wrap:anywhere]", children: [
           /* @__PURE__ */ jsx13("a", { className: "qsl:font-medium", href: attachmentDownloadUrl(attachment.url), download: attachment.name, children: attachment.name }),
@@ -1986,7 +1998,7 @@ function ChatPanel({
 }
 
 // packages/quassel/src/ChatInputToolbar.tsx
-import { PaperclipIcon, SendIcon, XIcon as XIcon3 } from "lucide-react";
+import { PaperclipIcon, SendIcon as SendIcon2, XIcon as XIcon3 } from "lucide-react";
 
 // packages/quassel/src/ui/useFileInput.ts
 import { useRef as useRef5, useState as useState6 } from "react";
@@ -2037,9 +2049,214 @@ function useFileInput({ disabled, onFiles, onPasteText }) {
 }
 
 // packages/quassel/src/ChatInputToolbar.tsx
-import { useCallback as useCallback3, useContext as useContext4, useEffect as useEffect5, useImperativeHandle, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback3, useContext as useContext4, useEffect as useEffect6, useImperativeHandle, useLayoutEffect as useLayoutEffect5, useRef as useRef8, useState as useState8 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+
+// packages/quassel/src/ComposerPrimaryAction.tsx
+import { LoaderCircleIcon, MicIcon, SendIcon, SquareIcon as SquareIcon2 } from "lucide-react";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect4, useRef as useRef7, useState as useState7 } from "react";
+
+// packages/quassel/src/RecordingAura.tsx
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function RecordingAura({ anchor, level = 0 }) {
+  const aura = useRef6(null);
+  const volume = Number.isFinite(level) ? Math.max(0, Math.min(1, level)) : 0;
+  useLayoutEffect3(() => {
+    const element = aura.current;
+    const view = anchor.ownerDocument.defaultView;
+    if (!element || !view) return;
+    let frame = 0;
+    let visible = true;
+    const observer = new view.IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+    });
+    observer.observe(anchor);
+    const update = () => {
+      const rect = anchor.getBoundingClientRect();
+      const style = view.getComputedStyle(anchor);
+      element.style.left = `${rect.left}px`;
+      element.style.top = `${rect.top}px`;
+      element.style.width = `${rect.width}px`;
+      element.style.height = `${rect.height}px`;
+      element.style.visibility = visible && rect.width && rect.height && anchor.checkVisibility() ? "visible" : "hidden";
+      element.style.setProperty("--qsl-pill-aura-color", style.getPropertyValue("--qsl-pill-aura-color") || style.getPropertyValue("--qsl-destructive"));
+      element.style.setProperty("--qsl-pill-aura-ring-color", style.getPropertyValue("--qsl-pill-aura-ring-color") || style.getPropertyValue("--qsl-pill-aura-color") || style.getPropertyValue("--qsl-destructive"));
+      element.style.zIndex = style.getPropertyValue("--qsl-pill-aura-z-index") || "1000";
+      frame = view.requestAnimationFrame(update);
+    };
+    update();
+    return () => {
+      view.cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [anchor]);
+  return createPortal2(/* @__PURE__ */ jsx15(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "qsl:recording-aura",
+      "data-quassel": "",
+      "data-recording-aura": "",
+      ref: aura,
+      style: { transform: `scale(${1.2 + volume * 0.65})`, opacity: 0.4 + volume * 0.4 }
+    }
+  ), anchor.ownerDocument.body);
+}
+
+// packages/quassel/src/ComposerPrimaryAction.tsx
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+function ComposerPrimaryAction({ hasContent, running: running2, sending, disabled, sendDisabled, microphone, texts, onSend, onStop }) {
+  const state = microphone && microphone.state !== "idle" ? microphone.state : hasContent ? "send" : running2 ? "stop" : microphone && !sending ? "microphone" : "send";
+  const voice = state === "microphone" || state === "preparing" || state === "recording";
+  const busy = state === "preparing" || state === "transcribing";
+  const blocked = disabled || state === "transcribing" || state === "send" && (sendDisabled || sending || !hasContent) || state === "stop" && !onStop;
+  const label = state === "microphone" ? microphone?.label ?? texts.microphone : state === "preparing" ? texts.microphonePreparing : state === "recording" ? texts.microphoneRecording : state === "transcribing" ? texts.microphoneTranscribing : state === "stop" ? texts.stop : running2 ? texts.sendIntoRun : texts.send;
+  const [button, setButton] = useState7(null);
+  const press = useRef7(null);
+  const suppressClick = useRef7(false);
+  const clickReset = useRef7(void 0);
+  const currentMicrophone = useRef7(microphone);
+  const resetClick = () => {
+    clearTimeout(clickReset.current);
+    clickReset.current = setTimeout(() => {
+      suppressClick.current = false;
+    }, 0);
+  };
+  const cancel = () => {
+    const active = press.current;
+    press.current = null;
+    if (active) resetClick();
+    const current = currentMicrophone.current;
+    if (active) active.microphone.onCancel();
+    else if (current?.state === "recording" || current?.state === "preparing") current.onCancel();
+  };
+  useLayoutEffect4(() => {
+    currentMicrophone.current = microphone;
+  }, [microphone]);
+  useEffect5(() => {
+    if (disabled) cancel();
+  }, [disabled]);
+  useEffect5(() => {
+    if (!button) return;
+    const document2 = button.ownerDocument;
+    const view = document2.defaultView;
+    const onVisibility = () => {
+      if (document2.hidden) cancel();
+    };
+    const onEscape = (event) => {
+      if (event.key === "Escape" && (press.current || currentMicrophone.current?.state === "recording" || currentMicrophone.current?.state === "preparing")) {
+        event.preventDefault();
+        cancel();
+      }
+    };
+    view.addEventListener("blur", cancel);
+    document2.addEventListener("visibilitychange", onVisibility);
+    document2.addEventListener("keydown", onEscape);
+    return () => {
+      view.removeEventListener("blur", cancel);
+      document2.removeEventListener("visibilitychange", onVisibility);
+      document2.removeEventListener("keydown", onEscape);
+      cancel();
+      clearTimeout(clickReset.current);
+    };
+  }, [button]);
+  const start = (source, timeStamp, pointerId, key) => {
+    if (!voice || state === "preparing" || blocked || !microphone || press.current) return;
+    press.current = { source, pointerId, key, microphone };
+    clearTimeout(clickReset.current);
+    suppressClick.current = true;
+    microphone.onPressStart({ source, timeStamp });
+  };
+  const end = (timeStamp) => {
+    const active = press.current;
+    press.current = null;
+    resetClick();
+    active?.microphone.onPressEnd({ source: active.source, timeStamp });
+  };
+  const activationKey = (event) => (event.key === " " || event.key === "Enter") && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229;
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    state === "recording" && button && /* @__PURE__ */ jsx16(RecordingAura, { anchor: button, level: microphone?.level }),
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        "aria-busy": busy || void 0,
+        "aria-label": label,
+        "aria-pressed": voice ? state === "recording" : void 0,
+        className: "qsl:primary-action",
+        "data-primary-action": state,
+        disabled: blocked,
+        onBlur: () => {
+          if (press.current?.source === "keyboard") cancel();
+        },
+        onClick: (event) => {
+          if (suppressClick.current) {
+            suppressClick.current = false;
+            return;
+          }
+          if (voice && event.detail === 0) {
+            start("virtual", event.timeStamp);
+            end(event.timeStamp);
+            suppressClick.current = false;
+          } else if (state === "send") onSend();
+          else if (state === "stop") onStop?.();
+        },
+        onContextMenu: (event) => {
+          if (voice) event.preventDefault();
+        },
+        onKeyDown: (event) => {
+          if (activationKey(event) && event.repeat) {
+            event.preventDefault();
+            return;
+          }
+          if (!voice) {
+            suppressClick.current = false;
+            return;
+          }
+          if (activationKey(event)) {
+            event.preventDefault();
+            start("keyboard", event.timeStamp, void 0, event.key);
+          }
+        },
+        onKeyUp: (event) => {
+          if (activationKey(event) && (voice || press.current?.source === "keyboard")) {
+            event.preventDefault();
+            if (press.current?.source === "keyboard" && press.current.key === event.key) end(event.timeStamp);
+          }
+        },
+        onLostPointerCapture: (event) => {
+          if (press.current?.pointerId === event.pointerId) cancel();
+        },
+        onPointerCancel: (event) => {
+          if (press.current?.pointerId === event.pointerId) cancel();
+        },
+        onPointerDown: (event) => {
+          suppressClick.current = false;
+          if (event.button !== 0 || event.isPrimary === false) return;
+          start("pointer", event.timeStamp, event.pointerId);
+          if (press.current?.pointerId === event.pointerId) event.currentTarget.setPointerCapture?.(event.pointerId);
+        },
+        onPointerUp: (event) => {
+          if (press.current?.source === "pointer" && press.current.pointerId === event.pointerId) end(event.timeStamp);
+        },
+        ref: setButton,
+        title: state === "microphone" ? texts.microphoneHint : label,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "qsl:primary-icon", "data-active": state === "microphone" || state === "recording", children: /* @__PURE__ */ jsx16(MicIcon, {}) }),
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "qsl:primary-icon", "data-active": state === "send", children: /* @__PURE__ */ jsx16(SendIcon, {}) }),
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "qsl:primary-icon", "data-active": state === "stop", children: /* @__PURE__ */ jsx16(SquareIcon2, { fill: "currentColor" }) }),
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "qsl:primary-icon", "data-active": busy, children: /* @__PURE__ */ jsx16(LoaderCircleIcon, { className: "qsl:motion-safe:animate-spin" }) }),
+          state === "recording" && /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "qsl:recording-dot" })
+        ]
+      }
+    )
+  ] });
+}
+
+// packages/quassel/src/ChatInputToolbar.tsx
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var COMPACT_WIDTH_PX = 480;
 var errorClasses = "qsl:px-3 qsl:py-2 qsl:text-small qsl:text-destructive";
 var attachmentItemClasses = "qsl:relative qsl:flex qsl:w-[190px] qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-small";
@@ -2059,6 +2276,8 @@ function ChatInputToolbar({
   actions,
   toolbarLeft,
   toolbarRight,
+  microphone,
+  replaceInput,
   texts,
   handleRef,
   attachments: attachmentsEnabled = true,
@@ -2074,21 +2293,21 @@ function ChatInputToolbar({
   const sendScope = useContext4(ChatSendContext);
   const allTexts = { ...defaultTexts, ...texts };
   const { Button: Button2, StopButton: StopButton2, Toggle: Toggle2 } = useQuasselComponents();
-  const [draft, setDraft] = useState7(initialValue);
-  const [sending, setSending] = useState7(false);
-  const [sendError, setSendError] = useState7();
-  const [failedSubmissions, setFailedSubmissions] = useState7([]);
-  const nextFailedId = useRef6(0);
-  const pendingSend = useRef6(false);
-  const generation = useRef6(0);
-  useLayoutEffect3(() => () => {
+  const [draft, setDraft] = useState8(initialValue);
+  const [sending, setSending] = useState8(false);
+  const [sendError, setSendError] = useState8();
+  const [failedSubmissions, setFailedSubmissions] = useState8([]);
+  const nextFailedId = useRef8(0);
+  const pendingSend = useRef8(false);
+  const generation = useRef8(0);
+  useLayoutEffect5(() => () => {
     generation.current += 1;
   }, []);
-  const draftRevision = useRef6(0);
-  const [attachments, setAttachments] = useState7([]);
-  const attachmentsRef = useRef6([]);
-  const nextAttachmentId = useRef6(0);
-  const [attachmentError, setAttachmentError] = useState7();
+  const draftRevision = useRef8(0);
+  const [attachments, setAttachments] = useState8([]);
+  const attachmentsRef = useRef8([]);
+  const nextAttachmentId = useRef8(0);
+  const [attachmentError, setAttachmentError] = useState8();
   const updateAttachments = (update) => {
     attachmentsRef.current = update(attachmentsRef.current);
     setAttachments(attachmentsRef.current);
@@ -2119,10 +2338,11 @@ function ChatInputToolbar({
       );
     }
   };
-  const rootRef = useRef6(null);
-  const textareaRef = useRef6(null);
-  const autoFocusSettled = useRef6(false);
-  useEffect5(() => {
+  const rootRef = useRef8(null);
+  const textareaRef = useRef8(null);
+  const composing = useRef8(false);
+  const autoFocusSettled = useRef8(false);
+  useEffect6(() => {
     if (!autoFocus || autoFocusSettled.current) return;
     const input2 = textareaRef.current;
     if (!input2) return;
@@ -2167,8 +2387,8 @@ function ChatInputToolbar({
       window.removeEventListener("blur", settle);
     };
   }, [autoFocus, disabled, onAutoFocusSettled]);
-  const [compact, setCompact] = useState7(false);
-  const pendingFocus = useRef6(false);
+  const [compact, setCompact] = useState8(false);
+  const pendingFocus = useRef8(false);
   const fileInput = useFileInput({
     disabled: disabled || sending,
     onFiles: addFiles,
@@ -2184,17 +2404,21 @@ function ChatInputToolbar({
   });
   const toolbar = layout === "toolbar";
   const inline = layout === "inline";
-  const inputRows = inline || toolbar ? 1 : rows;
-  const inputMaxRows = toolbar ? 1 : inline ? maxRows ?? 1 : maxRows;
+  const pill = layout === "pill";
+  const inputRows = inline || toolbar || pill ? 1 : rows;
+  const inputMaxRows = toolbar ? 1 : pill ? maxRows ?? 6 : inline ? maxRows ?? 1 : maxRows;
+  const microphoneBusy = pill && !!microphone && microphone.state !== "idle";
+  const replacingInput = pill && replaceInput !== void 0 && replaceInput !== null && typeof replaceInput !== "boolean";
   const rootClasses = cn(
-    "qsl:flex qsl:shrink-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-[var(--qsl-input-card-radius,--theme(--radius-xl))] qsl:border qsl:border-border-strong qsl:bg-background qsl:shadow-bar qsl:transition-colors qsl:focus-within:border-primary",
-    "qsl:in-data-[tone=material]:rounded-xl qsl:in-data-[tone=material]:border-glass-edge/50 qsl:in-data-[tone=material]:bg-background",
+    "qsl:flex qsl:shrink-0 qsl:flex-col",
+    pill ? "qsl:min-w-0" : "qsl:overflow-hidden qsl:rounded-[var(--qsl-input-card-radius,--theme(--radius-xl))] qsl:border qsl:border-border-strong qsl:bg-background qsl:shadow-bar qsl:transition-colors qsl:focus-within:border-primary qsl:in-data-[tone=material]:rounded-xl qsl:in-data-[tone=material]:border-glass-edge/50 qsl:in-data-[tone=material]:bg-background",
     toolbar && "qsl:h-full qsl:min-w-0 qsl:flex-row qsl:items-center qsl:rounded-lg qsl:data-[working=true]:animate-working-pulse qsl:data-[working=true]:border-primary qsl:motion-reduce:data-[working=true]:animate-none",
     fileInput.dragging && "qsl:outline-2 qsl:outline-offset-[3px] qsl:outline-dashed qsl:outline-primary"
   );
   const textareaClasses = cn(
-    "qsl:resize-none qsl:overscroll-contain qsl:border-0 qsl:bg-transparent qsl:text-body qsl:text-foreground qsl:placeholder:text-muted-foreground qsl:focus:outline-none",
-    inline ? "qsl:min-w-0 qsl:flex-1 qsl:px-2.5 qsl:py-2" : toolbar ? "qsl:w-full qsl:min-w-0 qsl:flex-auto qsl:px-2 qsl:py-[3px]" : "qsl:px-3 qsl:pt-3 qsl:pb-2"
+    "qsl:resize-none qsl:overscroll-contain qsl:border-0 qsl:bg-transparent qsl:text-foreground qsl:placeholder:text-muted-foreground",
+    !pill && "qsl:text-body qsl:focus:outline-none",
+    pill ? "qsl:pill-input" : inline ? "qsl:min-w-0 qsl:flex-1 qsl:px-2.5 qsl:py-2" : toolbar ? "qsl:w-full qsl:min-w-0 qsl:flex-auto qsl:px-2 qsl:py-[3px]" : "qsl:px-3 qsl:pt-3 qsl:pb-2"
   );
   const toolbarRowClasses = cn(
     "qsl:flex qsl:items-center qsl:gap-2 qsl:border-t qsl:border-border-soft qsl:px-2 qsl:py-1.5 qsl:in-data-[tone=overseer-details]:flex-nowrap",
@@ -2229,10 +2453,10 @@ function ChatInputToolbar({
       fileInput.clearDragging();
     }
   }));
-  useEffect5(() => {
+  useEffect6(() => {
     onDraftChange?.(draft);
   }, [draft, onDraftChange]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!pendingFocus.current) {
       return;
     }
@@ -2257,10 +2481,10 @@ function ChatInputToolbar({
     element.style.height = `${Math.min(contentHeight, maximum)}px`;
     element.style.overflowY = contentHeight > maximum ? "auto" : "hidden";
   }, [inputMaxRows, inputRows]);
-  useEffect5(() => {
+  useEffect6(() => {
     applyAutoGrow();
-  }, [draft, applyAutoGrow]);
-  useEffect5(() => {
+  }, [draft, replacingInput, applyAutoGrow]);
+  useEffect6(() => {
     const element = textareaRef.current;
     if (!element || inputMaxRows === void 0) {
       return;
@@ -2274,8 +2498,8 @@ function ChatInputToolbar({
     });
     observer.observe(element);
     return () => observer.disconnect();
-  }, [inputMaxRows, applyAutoGrow]);
-  useEffect5(() => {
+  }, [inputMaxRows, replacingInput, applyAutoGrow]);
+  useEffect6(() => {
     const element = rootRef.current;
     if (!element) {
       return;
@@ -2287,7 +2511,7 @@ function ChatInputToolbar({
     return () => observer.disconnect();
   }, []);
   const hasAttachments = attachments.length > 0;
-  useEffect5(() => {
+  useEffect6(() => {
     onAttachmentsChange?.(hasAttachments);
   }, [hasAttachments, onAttachmentsChange]);
   const capabilityError = hasAttachments && attachmentCapabilitiesError ? attachmentCapabilitiesError : attachmentCapabilities ? attachmentCapabilityError(attachments.map((entry) => ({
@@ -2298,13 +2522,13 @@ function ChatInputToolbar({
   const preparing = attachments.some((entry) => entry.status === "reading");
   const attachmentBlocked = attachments.some((entry) => entry.status !== "ready");
   const currentError = sendError ?? attachmentError ?? capabilityError ?? attachments.find((entry) => entry.status === "error")?.error;
-  useEffect5(() => {
+  useEffect6(() => {
     onErrorChange?.(currentError);
   }, [currentError, onErrorChange]);
   const send = async (onSubmit = onSend, allowEmpty = false) => {
     const text = draft.trim();
     const snapshot = attachmentsRef.current;
-    if (!allowEmpty && !text && !snapshot.length || disabled || sendDisabled || pendingSend.current || capabilityError || snapshot.some((entry) => entry.status !== "ready")) {
+    if (!allowEmpty && !text && !snapshot.length || disabled || sendDisabled || microphoneBusy || replacingInput || pendingSend.current || capabilityError || snapshot.some((entry) => entry.status !== "ready")) {
       return;
     }
     pendingSend.current = true;
@@ -2349,21 +2573,21 @@ function ChatInputToolbar({
     }
   };
   const onKeyDown = (event) => {
-    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229 && (sendShortcut === "enter" || event.metaKey || event.ctrlKey)) {
+    if (event.key === "Enter" && !event.shiftKey && !composing.current && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229 && (sendShortcut === "enter" || event.metaKey || event.ctrlKey)) {
       event.preventDefault();
       if (!event.repeat) void send();
     }
   };
-  const attachmentPreviews = attachments.length > 0 && /* @__PURE__ */ jsx15("ul", { className: "qsl:flex qsl:max-h-[240px] qsl:flex-wrap qsl:gap-2 qsl:overflow-y-auto qsl:overscroll-contain qsl:px-3 qsl:pt-2.5 qsl:in-data-[tone=overseer-details]:max-h-40 qsl:in-data-[tone=overseer-details]:overflow-y-auto", "aria-label": allTexts.attachments, children: attachments.map((entry) => /* @__PURE__ */ jsxs8("li", { className: attachmentItemClasses, children: [
-    entry.status === "ready" && entry.input.mediaType.startsWith("image/") && /* @__PURE__ */ jsx15("img", { className: attachmentMediaClasses, src: `data:${entry.input.mediaType};base64,${entry.input.data}`, alt: entry.file.name }),
-    entry.status === "ready" && entry.input.mediaType.startsWith("video/") && /* @__PURE__ */ jsx15("video", { className: attachmentMediaClasses, controls: true, preload: "metadata", "aria-label": entry.file.name, src: `data:${entry.input.mediaType};base64,${entry.input.data}` }),
-    /* @__PURE__ */ jsxs8("div", { className: "qsl:flex qsl:flex-col qsl:gap-1 qsl:p-2 qsl:pr-8 qsl:[overflow-wrap:anywhere]", children: [
-      /* @__PURE__ */ jsx15("span", { className: "qsl:font-medium", title: entry.file.name, children: entry.file.name }),
-      /* @__PURE__ */ jsx15("small", { children: formatAttachmentSize(entry.file.size) }),
-      entry.status === "reading" && /* @__PURE__ */ jsx15("small", { role: "status", children: allTexts.attachmentPreparing }),
-      entry.status === "error" && /* @__PURE__ */ jsx15("small", { role: "alert", children: entry.error })
+  const attachmentPreviews = attachments.length > 0 && /* @__PURE__ */ jsx17("ul", { className: "qsl:flex qsl:max-h-[240px] qsl:flex-wrap qsl:gap-2 qsl:overflow-y-auto qsl:overscroll-contain qsl:px-3 qsl:pt-2.5 qsl:in-data-[tone=overseer-details]:max-h-40 qsl:in-data-[tone=overseer-details]:overflow-y-auto", "aria-label": allTexts.attachments, children: attachments.map((entry) => /* @__PURE__ */ jsxs9("li", { className: attachmentItemClasses, children: [
+    entry.status === "ready" && entry.input.mediaType.startsWith("image/") && /* @__PURE__ */ jsx17("img", { className: attachmentMediaClasses, src: `data:${entry.input.mediaType};base64,${entry.input.data}`, alt: entry.file.name }),
+    entry.status === "ready" && entry.input.mediaType.startsWith("video/") && /* @__PURE__ */ jsx17("video", { className: attachmentMediaClasses, controls: true, preload: "metadata", "aria-label": entry.file.name, src: `data:${entry.input.mediaType};base64,${entry.input.data}` }),
+    /* @__PURE__ */ jsxs9("div", { className: "qsl:flex qsl:flex-col qsl:gap-1 qsl:p-2 qsl:pr-8 qsl:[overflow-wrap:anywhere]", children: [
+      /* @__PURE__ */ jsx17("span", { className: "qsl:font-medium", title: entry.file.name, children: entry.file.name }),
+      /* @__PURE__ */ jsx17("small", { children: formatAttachmentSize(entry.file.size) }),
+      entry.status === "reading" && /* @__PURE__ */ jsx17("small", { role: "status", children: allTexts.attachmentPreparing }),
+      entry.status === "error" && /* @__PURE__ */ jsx17("small", { role: "alert", children: entry.error })
     ] }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx17(
       Button2,
       {
         "aria-label": fillText(allTexts.removeAttachment, { name: entry.file.name }),
@@ -2377,16 +2601,16 @@ function ChatInputToolbar({
         size: "icon-sm",
         title: fillText(allTexts.removeAttachment, { name: entry.file.name }),
         variant: "outline",
-        children: /* @__PURE__ */ jsx15(XIcon3, {})
+        children: /* @__PURE__ */ jsx17(XIcon3, {})
       }
     )
   ] }, entry.id)) });
-  const errors = /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    capabilityError && /* @__PURE__ */ jsx15("p", { className: errorClasses, role: "alert", children: capabilityError }),
-    attachmentError && /* @__PURE__ */ jsx15("p", { className: errorClasses, role: "alert", children: attachmentError }),
-    sendError && /* @__PURE__ */ jsx15("p", { className: errorClasses, role: "alert", children: sendError }),
-    failedSubmissions.map((failed) => /* @__PURE__ */ jsxs8("div", { className: cn(errorClasses, "qsl:flex qsl:flex-wrap qsl:items-center qsl:gap-2"), role: "status", children: [
-      /* @__PURE__ */ jsxs8("span", { children: [
+  const errors = /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    capabilityError && /* @__PURE__ */ jsx17("p", { className: errorClasses, role: "alert", children: capabilityError }),
+    attachmentError && /* @__PURE__ */ jsx17("p", { className: errorClasses, role: "alert", children: attachmentError }),
+    sendError && /* @__PURE__ */ jsx17("p", { className: errorClasses, role: "alert", children: sendError }),
+    failedSubmissions.map((failed) => /* @__PURE__ */ jsxs9("div", { className: cn(errorClasses, "qsl:flex qsl:flex-wrap qsl:items-center qsl:gap-2"), role: "status", children: [
+      /* @__PURE__ */ jsxs9("span", { children: [
         allTexts.notSent,
         " ",
         failed.draft.slice(0, 100),
@@ -2394,7 +2618,7 @@ function ChatInputToolbar({
         failed.attachments.length > 0 ? ` ${fillText(allTexts.notSentAttachments, { count: failed.attachments.length })}` : "",
         " "
       ] }),
-      /* @__PURE__ */ jsx15(Button2, { disabled: disabled || sending, size: "sm", variant: "outline", onClick: () => {
+      /* @__PURE__ */ jsx17(Button2, { disabled: disabled || sending, size: "sm", variant: "outline", onClick: () => {
         try {
           validateAttachmentSelection(attachmentsRef.current.map((entry) => entry.file), failed.attachments.map((entry) => entry.file), allTexts);
         } catch (error) {
@@ -2410,9 +2634,9 @@ function ChatInputToolbar({
       }, children: allTexts.insertUnsent })
     ] }, failed.id))
   ] });
-  const sendButtons = /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    running2 && onStop && !hasContent && /* @__PURE__ */ jsx15(StopButton2, { className: "qsl:flex-none", label: allTexts.stop, onClick: onStop, size: "icon-sm" }),
-    (!running2 || !onStop || hasContent) && /* @__PURE__ */ jsx15(
+  const sendButtons = /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    running2 && onStop && !hasContent && /* @__PURE__ */ jsx17(StopButton2, { className: "qsl:flex-none", label: allTexts.stop, onClick: onStop, size: "icon-sm" }),
+    (!running2 || !onStop || hasContent) && /* @__PURE__ */ jsx17(
       Button2,
       {
         "aria-label": allTexts.send,
@@ -2423,53 +2647,62 @@ function ChatInputToolbar({
         },
         size: "icon-sm",
         title: running2 ? allTexts.sendIntoRun : allTexts.send,
-        children: /* @__PURE__ */ jsx15(SendIcon, { size: 14 })
+        children: /* @__PURE__ */ jsx17(SendIcon2, { size: 14 })
       }
     )
   ] });
-  const detailToolbar = /* @__PURE__ */ jsxs8("div", { className: toolbarRowClasses, "data-input": "controls", children: [
-    /* @__PURE__ */ jsxs8("div", { className: cn(toolbarSideClasses, "qsl:in-data-[tone=overseer-details]:flex-none", inline || toolbar ? "qsl:flex-none" : "qsl:flex-auto"), children: [
-      attachmentsEnabled && /* @__PURE__ */ jsx15(
-        Button2,
-        {
-          "aria-label": allTexts.attachFiles,
-          disabled: disabled || sending,
-          onClick: () => fileInput.inputRef.current?.click(),
-          size: "icon-sm",
-          title: fillText(allTexts.attachFilesHint, { count: MAX_CHAT_ATTACHMENTS, size: maxAttachmentSizeLabel }),
-          variant: "ghost",
-          children: /* @__PURE__ */ jsx15(PaperclipIcon, {})
-        }
-      ),
-      preparing && /* @__PURE__ */ jsx15("span", { className: cn("qsl:text-small qsl:text-muted-foreground", inline && "qsl:sr-only"), role: "status", children: allTexts.attachmentsPreparing }),
-      actions?.map((action, index) => action.active === void 0 ? /* @__PURE__ */ jsxs8(Button2, { disabled: action.disabled, onClick: action.onClick, size: "sm", title: action.title ?? action.label, variant: "ghost", children: [
-        action.icon,
-        action.label && /* @__PURE__ */ jsx15("span", { className: action.icon ? "qsl:in-data-[compact=true]:hidden" : void 0, children: action.label })
-      ] }, index) : /* @__PURE__ */ jsxs8(Toggle2, { disabled: action.disabled, onPressedChange: () => action.onClick(), pressed: action.active, size: "sm", title: action.title ?? action.label, children: [
-        action.icon,
-        action.label && /* @__PURE__ */ jsx15("span", { className: action.icon ? "qsl:in-data-[compact=true]:hidden" : void 0, children: action.label })
-      ] }, index)),
+  const actionButtons = actions?.map((action, index) => action.active === void 0 ? /* @__PURE__ */ jsxs9(Button2, { "aria-label": action.label ?? action.title, disabled: action.disabled, onClick: action.onClick, size: "sm", title: action.title ?? action.label, variant: "ghost", children: [
+    action.icon,
+    action.label && /* @__PURE__ */ jsx17("span", { className: action.icon ? "qsl:in-data-[compact=true]:hidden" : void 0, children: action.label })
+  ] }, index) : /* @__PURE__ */ jsxs9(Toggle2, { "aria-label": action.label ?? action.title, disabled: action.disabled, onPressedChange: () => action.onClick(), pressed: action.active, size: "sm", title: action.title ?? action.label, children: [
+    action.icon,
+    action.label && /* @__PURE__ */ jsx17("span", { className: action.icon ? "qsl:in-data-[compact=true]:hidden" : void 0, children: action.label })
+  ] }, index));
+  const attachButton = attachmentsEnabled && /* @__PURE__ */ jsx17(
+    Button2,
+    {
+      "aria-label": allTexts.attachFiles,
+      disabled: disabled || sending,
+      onClick: () => fileInput.inputRef.current?.click(),
+      size: "icon-sm",
+      title: fillText(allTexts.attachFilesHint, { count: MAX_CHAT_ATTACHMENTS, size: maxAttachmentSizeLabel }),
+      variant: "ghost",
+      children: /* @__PURE__ */ jsx17(PaperclipIcon, {})
+    }
+  );
+  const detailToolbar = /* @__PURE__ */ jsxs9("div", { className: toolbarRowClasses, "data-input": "controls", children: [
+    /* @__PURE__ */ jsxs9("div", { className: cn(toolbarSideClasses, "qsl:in-data-[tone=overseer-details]:flex-none", inline || toolbar ? "qsl:flex-none" : "qsl:flex-auto"), children: [
+      attachButton,
+      preparing && /* @__PURE__ */ jsx17("span", { className: cn("qsl:text-small qsl:text-muted-foreground", inline && "qsl:sr-only"), role: "status", children: allTexts.attachmentsPreparing }),
+      actionButtons,
       toolbarLeft
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: cn(toolbarSideClasses, "qsl:in-data-[tone=overseer-details]:flex-1", inline || toolbar ? "qsl:flex-none" : "qsl:flex-[0_1_auto]"), children: [
+    /* @__PURE__ */ jsxs9("div", { className: cn(toolbarSideClasses, "qsl:in-data-[tone=overseer-details]:flex-1", inline || toolbar ? "qsl:flex-none" : "qsl:flex-[0_1_auto]"), children: [
       toolbarRight,
       !toolbar && sendButtons
     ] })
   ] });
-  const details = /* @__PURE__ */ jsxs8("div", { className: "qsl:min-w-0", "data-compact": compact, "data-quassel": "", children: [
+  const details = /* @__PURE__ */ jsxs9("div", { className: "qsl:min-w-0", "data-compact": compact, "data-quassel": "", children: [
     attachmentPreviews,
     errors,
     detailToolbar
   ] });
-  const input = /* @__PURE__ */ jsx15(
+  const input = /* @__PURE__ */ jsx17(
     "textarea",
     {
       "aria-controls": inputAriaControls,
       className: textareaClasses,
       "aria-label": allTexts.placeholder,
-      disabled: !toolbar && disabled,
+      disabled: !toolbar && (disabled || microphoneBusy),
+      hidden: replacingInput,
       readOnly: toolbar && disabled,
       onChange: (event) => changeDraft(event.target.value),
+      onCompositionStart: () => {
+        composing.current = true;
+      },
+      onCompositionEnd: () => {
+        composing.current = false;
+      },
       onKeyDown,
       placeholder: running2 ? allTexts.steeringPlaceholder : allTexts.placeholder,
       ref: textareaRef,
@@ -2477,7 +2710,7 @@ function ChatInputToolbar({
       value: draft
     }
   );
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: rootClasses,
@@ -2488,7 +2721,7 @@ function ChatInputToolbar({
       ref: rootRef,
       ...attachmentsEnabled ? fileInput.dropProps : {},
       children: [
-        attachmentsEnabled && /* @__PURE__ */ jsx15(
+        attachmentsEnabled && /* @__PURE__ */ jsx17(
           "input",
           {
             "aria-label": allTexts.attachFiles,
@@ -2499,17 +2732,48 @@ function ChatInputToolbar({
           }
         ),
         !toolbar && attachmentPreviews,
-        inline ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        pill ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
           errors,
-          /* @__PURE__ */ jsxs8("div", { className: "qsl:flex qsl:min-w-0 qsl:items-end", children: [
+          preparing && /* @__PURE__ */ jsx17("span", { className: "qsl:sr-only", role: "status", children: allTexts.attachmentsPreparing }),
+          /* @__PURE__ */ jsxs9("div", { className: "qsl:pill-row", "data-input": "pill", children: [
+            (actionButtons?.length || toolbarLeft) && /* @__PURE__ */ jsxs9("div", { className: "qsl:pill-slot", "data-input": "left", children: [
+              actionButtons,
+              toolbarLeft
+            ] }),
+            input,
+            replacingInput && /* @__PURE__ */ jsx17("div", { className: "qsl:pill-replacement", "data-input": "replacement", children: replaceInput }),
+            (toolbarRight || attachmentsEnabled) && /* @__PURE__ */ jsxs9("div", { className: "qsl:pill-slot", "data-input": "right", children: [
+              toolbarRight,
+              attachButton
+            ] }),
+            /* @__PURE__ */ jsx17(
+              ComposerPrimaryAction,
+              {
+                disabled,
+                hasContent,
+                microphone,
+                onSend: () => {
+                  void send();
+                },
+                onStop,
+                running: running2,
+                sendDisabled: sendDisabled || attachmentBlocked || !!capabilityError || replacingInput,
+                sending,
+                texts: allTexts
+              }
+            )
+          ] })
+        ] }) : inline ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          errors,
+          /* @__PURE__ */ jsxs9("div", { className: "qsl:flex qsl:min-w-0 qsl:items-end", children: [
             input,
             detailToolbar
           ] })
         ] }) : input,
-        toolbar ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx15("div", { className: "qsl:flex qsl:flex-none qsl:items-center qsl:gap-1 qsl:p-1", children: sendButtons }),
-          detailsContainer && createPortal2(details, detailsContainer)
-        ] }) : !inline && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        toolbar ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx17("div", { className: "qsl:flex qsl:flex-none qsl:items-center qsl:gap-1 qsl:p-1", children: sendButtons }),
+          detailsContainer && createPortal3(details, detailsContainer)
+        ] }) : !inline && !pill && /* @__PURE__ */ jsxs9(Fragment4, { children: [
           errors,
           detailToolbar
         ] })
@@ -2520,7 +2784,7 @@ function ChatInputToolbar({
 
 // packages/quassel/src/DetailModeSwitch.tsx
 import { CircleDotIcon, EyeOffIcon, ListCollapseIcon, ListIcon, ShapesIcon, TagsIcon, TextAlignJustifyIcon } from "lucide-react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var DETAIL_MODES = ["off", "current", "icons", "chips", "grouped", "compact", "full"];
 var TEXT_KEYS = {
   off: "detailModeOff",
@@ -2554,18 +2818,18 @@ function DetailModeSwitch({
   const next2 = modes[(current < 0 ? 0 : current + 1) % modes.length];
   const Icon = ICONS[mode];
   const title = `${allTexts.detailModeTitle}: ${detailModeLabel(mode, texts)}`;
-  return /* @__PURE__ */ jsx16(Button2, { "aria-label": title, className, onClick: () => onChange(next2), size: "icon-sm", title, variant: "ghost", children: /* @__PURE__ */ jsx16(Icon, {}) });
+  return /* @__PURE__ */ jsx18(Button2, { "aria-label": title, className, onClick: () => onChange(next2), size: "icon-sm", title, variant: "ghost", children: /* @__PURE__ */ jsx18(Icon, {}) });
 }
 
 // packages/quassel/src/TranscriptModeSwitch.tsx
 import { MessagesSquareIcon, MessageSquareIcon } from "lucide-react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function TranscriptModeSwitch({ mode, onChange, texts, className }) {
   const labels = { ...defaultTexts, ...texts };
   const { Button: Button2 } = useQuasselComponents();
   const latest = mode === "latest";
   const title = latest ? labels.showAllMessages : labels.showLatestExchange;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     Button2,
     {
       "aria-label": title,
@@ -2575,19 +2839,19 @@ function TranscriptModeSwitch({ mode, onChange, texts, className }) {
       size: "icon-sm",
       title,
       variant: "ghost",
-      children: latest ? /* @__PURE__ */ jsx17(MessageSquareIcon, {}) : /* @__PURE__ */ jsx17(MessagesSquareIcon, {})
+      children: latest ? /* @__PURE__ */ jsx19(MessageSquareIcon, {}) : /* @__PURE__ */ jsx19(MessagesSquareIcon, {})
     }
   );
 }
 
 // packages/quassel/src/TimestampSwitch.tsx
 import { ClockFadingIcon, ClockIcon } from "lucide-react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function TimestampSwitch({ showTimestamps, onChange, texts, className }) {
   const labels = { ...defaultTexts, ...texts };
   const { Button: Button2 } = useQuasselComponents();
   const title = showTimestamps ? labels.hideTimestamps : labels.showTimestamps;
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     Button2,
     {
       "aria-label": title,
@@ -2597,7 +2861,7 @@ function TimestampSwitch({ showTimestamps, onChange, texts, className }) {
       size: "icon-sm",
       title,
       variant: "ghost",
-      children: showTimestamps ? /* @__PURE__ */ jsx18(ClockIcon, {}) : /* @__PURE__ */ jsx18(ClockFadingIcon, {})
+      children: showTimestamps ? /* @__PURE__ */ jsx20(ClockIcon, {}) : /* @__PURE__ */ jsx20(ClockFadingIcon, {})
     }
   );
 }