@smartspace/chat-ui 1.14.4-dev.e6584f0 → 1.14.4-dev.f08c0a0

package/dist/index.js

@@ -1,6 +1,6 @@
 import MuiButton from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import { Loader2, ChevronDown, Check, Cpu, SlidersHorizontal, X, Globe, Zap, Paperclip, Mic, Square, Send, Minimize2, AlertTriangle, FileImage, FileVideo, FileAudio, FileArchive, FileCode, FileSpreadsheet, Presentation, FileText, ChevronUp, ExternalLink, Download, ShieldAlert, Copy } from 'lucide-react';
+import IconButton2 from '@mui/material/IconButton';
+import { Loader2, ChevronDown, Check, Cpu, SlidersHorizontal, X, Globe, Zap, Square, Mic, Paperclip, Send, Minimize2, AlertTriangle, FileImage, FileVideo, FileAudio, FileArchive, FileCode, FileSpreadsheet, Presentation, FileText, ChevronUp, ExternalLink, Download, ShieldAlert, Copy } from 'lucide-react';
 import * as React9 from 'react';
 import React9__default, { createContext, forwardRef, useImperativeHandle, useRef, useState, useEffect, useMemo, useCallback, useContext, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
@@ -17,7 +17,7 @@ import { codeBlockSchema, commonmark } from '@milkdown/preset-commonmark';
 import { Slice, NodeType } from '@milkdown/prose/model';
 import { MilkdownProvider, useEditor, Milkdown } from '@milkdown/react';
 import { PluginKey, Plugin } from '@milkdown/prose/state';
-import { Decoration, DecorationSet } from '@milkdown/prose/view';
+import { DecorationSet, Decoration } from '@milkdown/prose/view';
 import 'crypto';
 import '@milkdown/prose';
 import '@milkdown/prose/inputrules';
@@ -842,6 +842,37 @@ function useMessages(threadId) {
   });
 }
 
+// src/domains/speech/queryKeys.ts
+var speechKeys = {
+  all: ["speech"],
+  config: () => [...speechKeys.all, "config"]
+};
+
+// src/domains/speech/queries.ts
+var unavailable = { enabled: false, defaultLocale: "en-US" };
+var isNotFound = (error) => error?.type === "NotFound" || error?.response?.status === 404;
+function useSpeechConfig() {
+  const service = useChatService();
+  const supported = !!service.getSpeechConfig && !!service.getSpeechToken;
+  return useQuery({
+    ...queryOptions({
+      queryKey: speechKeys.config(),
+      queryFn: async () => {
+        try {
+          return await service.getSpeechConfig?.() ?? unavailable;
+        } catch (error) {
+          if (isNotFound(error)) return unavailable;
+          throw error;
+        }
+      },
+      staleTime: Infinity,
+      retry: (failureCount) => failureCount < 2,
+      retryDelay: 1e3
+    }),
+    enabled: supported
+  });
+}
+
 // ../../node_modules/.pnpm/@milkdown+exception@7.20.0/node_modules/@milkdown/exception/lib/index.js
 var ErrorCode = /* @__PURE__ */ (function(ErrorCode2) {
   ErrorCode2["docTypeError"] = "docTypeError";
@@ -975,6 +1006,75 @@ var autolink = $prose(() => {
     }
   });
 });
+var dictationGhostKey = new PluginKey("dictationGhost");
+function buildDecorations2(state, text6) {
+  const doc = state.doc;
+  const from = state.selection.head;
+  const before = from > 0 ? doc.textBetween(from - 1, from, " ") : "";
+  const display = before !== "" && !/\s/.test(before) ? ` ${text6}` : text6;
+  const widget = Decoration.widget(
+    from,
+    () => {
+      const span = document.createElement("span");
+      span.className = "md-editor__dictation-ghost";
+      span.setAttribute("aria-hidden", "true");
+      span.appendChild(document.createTextNode(display));
+      const dots = document.createElement("span");
+      dots.className = "md-editor__dictation-dots";
+      for (let i = 0; i < 3; i += 1)
+        dots.appendChild(document.createElement("span"));
+      span.appendChild(dots);
+      return span;
+    },
+    {
+      // Render after the caret so typing still lands where the user expects.
+      side: 1,
+      // Keyed by content so ProseMirror reuses the node between renders instead
+      // of tearing it down on every interim result.
+      key: `dictation-ghost:${display}`
+    }
+  );
+  const decorations = [widget];
+  const $head = state.selection.$head;
+  if ($head.depth > 0) {
+    decorations.push(
+      Decoration.node($head.before(), $head.after(), {
+        class: "md-editor__has-dictation-ghost"
+      })
+    );
+  }
+  return DecorationSet.create(doc, decorations);
+}
+var dictationGhost = $prose(() => {
+  return new Plugin({
+    key: dictationGhostKey,
+    state: {
+      init: () => "",
+      apply(tr, previous2) {
+        const meta = tr.getMeta(dictationGhostKey);
+        if (meta) return meta.text;
+        if (tr.docChanged || tr.selectionSet) return "";
+        return previous2;
+      }
+    },
+    props: {
+      decorations(state) {
+        const text6 = dictationGhostKey.getState(state) ?? "";
+        if (!text6) return DecorationSet.empty;
+        return buildDecorations2(state, text6);
+      }
+    }
+  });
+});
+function setDictationGhost(view, text6) {
+  const current = dictationGhostKey.getState(view.state) ?? "";
+  if (current === text6) return;
+  const tr = view.state.tr.setMeta(dictationGhostKey, {
+    text: text6
+  });
+  tr.setMeta("addToHistory", false);
+  view.dispatch(tr);
+}
 
 // src/shared/markdown/extensions/fileTag.ts
 var fileTag = $node("fileTag", () => ({
@@ -1884,7 +1984,7 @@ function EditorInner({
           } catch {
           }
         });
-      }).use(commonmark).use(history).use(clipboard).use(listener).use(autolink).use(fileTag).use(ssImageNode).use(ssImageView).use(htmlPreviewView).use(enableMentions ? mention : fileTag);
+      }).use(commonmark).use(history).use(clipboard).use(listener).use(autolink).use(dictationGhost).use(fileTag).use(ssImageNode).use(ssImageView).use(htmlPreviewView).use(enableMentions ? mention : fileTag);
     },
     [isEditable]
   );
@@ -2094,6 +2194,25 @@ function EditorInner({
           return value ?? "";
         }
       },
+      insertText: (text6) => {
+        const view = viewRef.current;
+        if (!view || !isEditable || !text6) return;
+        try {
+          const { from } = view.state.selection;
+          const before = from > 0 ? view.state.doc.textBetween(from - 1, from, " ") : "";
+          const needsSpace = before !== "" && !/\s/.test(before);
+          insertTextAtSelection(view, (needsSpace ? " " : "") + text6);
+        } catch {
+        }
+      },
+      setDictationGhost: (text6) => {
+        const view = viewRef.current;
+        if (!view || !isEditable) return;
+        try {
+          setDictationGhost(view, text6);
+        } catch {
+        }
+      },
       clear: () => {
         const view = viewRef.current;
         if (!view) return;
@@ -2437,6 +2556,326 @@ var MarkdownEditor = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(MilkdownProvider, { children: /* @__PURE__ */ jsx(EditorInner, { ...props, editorHandleRef: ref }) });
 });
 MarkdownEditor.displayName = "MarkdownEditor";
+var TOKEN_EXPIRY_MARGIN_MS = 15e3;
+var noLevelMonitor = () => void 0;
+var SILENCE_HINT_MS = 6e3;
+var SILENCE_LEVEL = 3;
+function monitorInputLevel(stream, onSilent, onSound) {
+  let context;
+  let source;
+  let analyser;
+  try {
+    context = new AudioContext();
+    source = context.createMediaStreamSource(stream);
+    analyser = context.createAnalyser();
+    analyser.fftSize = 512;
+    source.connect(analyser);
+  } catch {
+    return () => void 0;
+  }
+  if (context.state === "suspended")
+    void context.resume().catch(() => void 0);
+  const samples = new Uint8Array(analyser.fftSize);
+  let lastSound = Date.now();
+  let silent = false;
+  let stopped = false;
+  const poll = window.setInterval(() => {
+    if (context.state !== "running") return;
+    analyser.getByteTimeDomainData(samples);
+    let peak = 0;
+    for (const sample of samples) peak = Math.max(peak, Math.abs(sample - 128));
+    if (peak > SILENCE_LEVEL) {
+      lastSound = Date.now();
+      if (silent) {
+        silent = false;
+        onSound();
+      }
+    } else if (!silent && Date.now() - lastSound > SILENCE_HINT_MS) {
+      silent = true;
+      onSilent();
+    }
+  }, 250);
+  return () => {
+    if (stopped) return;
+    stopped = true;
+    window.clearInterval(poll);
+    try {
+      source.disconnect();
+      void context.close().catch(() => void 0);
+    } catch {
+    }
+  };
+}
+var STALE_TOKEN_FLOOR_MS = 6e4;
+function kickOff(fn) {
+  let promise;
+  try {
+    promise = Promise.resolve(fn());
+  } catch (e) {
+    promise = Promise.reject(e);
+  }
+  promise.catch(() => void 0);
+  return promise;
+}
+var isSupported = () => typeof window !== "undefined" && window.isSecureContext && !!navigator.mediaDevices?.getUserMedia;
+function classifyTokenFailure(error) {
+  const code3 = error?.code;
+  if (code3 === "SP500") return "unavailable";
+  if (error?.type === "NotFound") {
+    return "unavailable";
+  }
+  return "unavailable-temporarily";
+}
+function useDictation({
+  region,
+  locale,
+  getToken,
+  onPhrase,
+  onInterim,
+  maxDurationMs = 18e4,
+  idleTimeoutMs = 2e4
+}) {
+  const [state, setState] = useState("idle");
+  const [error, setError] = useState(null);
+  const [deviceLabel, setDeviceLabel] = useState("");
+  const [silent, setSilent] = useState(false);
+  const sessionRef = useRef(null);
+  const generationRef = useRef(0);
+  const onPhraseRef = useRef(onPhrase);
+  const onInterimRef = useRef(onInterim);
+  useEffect(() => {
+    onPhraseRef.current = onPhrase;
+    onInterimRef.current = onInterim;
+  });
+  const clearInterim = useCallback(() => onInterimRef.current?.(""), []);
+  const supported = isSupported();
+  const available = supported && !!region && !!getToken;
+  useEffect(() => {
+    if (!available) return;
+    const nav = navigator;
+    if (nav.connection?.saveData) return;
+    const warm = () => void kickOff(() => import('microsoft-cognitiveservices-speech-sdk'));
+    if (typeof window.requestIdleCallback === "function") {
+      const id2 = window.requestIdleCallback(warm, { timeout: 2e3 });
+      return () => window.cancelIdleCallback(id2);
+    }
+    const id = window.setTimeout(warm, 1500);
+    return () => window.clearTimeout(id);
+  }, [available]);
+  const stop = useCallback(() => {
+    generationRef.current += 1;
+    const session = sessionRef.current;
+    sessionRef.current = null;
+    clearInterim();
+    setState("idle");
+    setSilent(false);
+    setDeviceLabel("");
+    if (!session) return;
+    window.clearTimeout(session.timers.idle);
+    window.clearTimeout(session.timers.max);
+    session.stopLevelMonitor();
+    session.stream.getTracks().forEach((t) => t.stop());
+    session.recognizer.stopContinuousRecognitionAsync(
+      () => session.recognizer.close(),
+      () => session.recognizer.close()
+    );
+  }, [clearInterim]);
+  const start = useCallback(async () => {
+    if (!available || sessionRef.current) return;
+    const generation = ++generationRef.current;
+    const superseded = () => generationRef.current !== generation;
+    setError(null);
+    setSilent(false);
+    setState("starting");
+    const streamPromise = kickOff(
+      () => navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true
+        }
+      })
+    );
+    const tokenPromise = kickOff(getToken);
+    const sdkPromise = kickOff(
+      () => import('microsoft-cognitiveservices-speech-sdk')
+    );
+    let stream;
+    try {
+      stream = await streamPromise;
+    } catch (e) {
+      if (superseded()) return;
+      const name = e?.name;
+      setError(
+        name === "NotAllowedError" || name === "SecurityError" ? "permission-denied" : name === "NotFoundError" || name === "OverconstrainedError" ? "no-microphone" : "unknown"
+      );
+      setState("idle");
+      return;
+    }
+    if (superseded()) {
+      stream.getTracks().forEach((t) => t.stop());
+      return;
+    }
+    let token;
+    try {
+      token = await tokenPromise;
+      if (Date.parse(token.expiresOn) - Date.now() < STALE_TOKEN_FLOOR_MS) {
+        token = await getToken();
+      }
+    } catch (e) {
+      stream.getTracks().forEach((t) => t.stop());
+      if (superseded()) return;
+      setError(classifyTokenFailure(e));
+      setState("idle");
+      return;
+    }
+    if (superseded()) {
+      stream.getTracks().forEach((t) => t.stop());
+      return;
+    }
+    let recognizer = null;
+    let published = null;
+    try {
+      const sdk = await sdkPromise;
+      if (superseded()) {
+        stream.getTracks().forEach((t) => t.stop());
+        return;
+      }
+      const speechConfig = sdk.SpeechConfig.fromAuthorizationToken(
+        token.token,
+        region
+      );
+      speechConfig.speechRecognitionLanguage = locale;
+      speechConfig.setProfanity(sdk.ProfanityOption.Raw);
+      speechConfig.setProperty(
+        sdk.PropertyId.Speech_SegmentationSilenceTimeoutMs,
+        "700"
+      );
+      recognizer = new sdk.SpeechRecognizer(
+        speechConfig,
+        sdk.AudioConfig.fromStreamInput(stream)
+      );
+      const untilExpiry = Date.parse(token.expiresOn) - Date.now() - TOKEN_EXPIRY_MARGIN_MS;
+      const sessionCapMs = Number.isFinite(untilExpiry) && untilExpiry > 0 ? Math.min(maxDurationMs, untilExpiry) : maxDurationMs;
+      const session = {
+        recognizer,
+        stream,
+        timers: {},
+        stopLevelMonitor: noLevelMonitor
+      };
+      const armIdle = () => {
+        window.clearTimeout(session.timers.idle);
+        session.timers.idle = window.setTimeout(stop, idleTimeoutMs);
+      };
+      const isLive = () => sessionRef.current === session;
+      sessionRef.current = session;
+      published = session;
+      const goLive = () => {
+        if (!isLive()) return;
+        session.timers.max ??= window.setTimeout(stop, sessionCapMs);
+        if (session.stopLevelMonitor === noLevelMonitor) {
+          try {
+            setDeviceLabel(stream.getAudioTracks()[0]?.label ?? "");
+            session.stopLevelMonitor = monitorInputLevel(
+              stream,
+              () => {
+                if (isLive()) setSilent(true);
+              },
+              () => {
+                if (isLive()) setSilent(false);
+              }
+            );
+          } catch {
+            session.stopLevelMonitor = noLevelMonitor;
+          }
+        }
+        armIdle();
+        setState("listening");
+      };
+      recognizer.sessionStarted = () => goLive();
+      recognizer.recognizing = (_sender, event) => {
+        if (!isLive()) return;
+        onInterimRef.current?.(event.result.text ?? "");
+        armIdle();
+      };
+      recognizer.recognized = (_sender, event) => {
+        if (!isLive()) return;
+        const text6 = event.result.text?.trim();
+        clearInterim();
+        if (event.result.reason === sdk.ResultReason.RecognizedSpeech && text6) {
+          onPhraseRef.current(text6);
+        }
+        armIdle();
+      };
+      recognizer.canceled = (_sender, event) => {
+        if (!isLive()) return;
+        if (event.reason === sdk.CancellationReason.Error) {
+          console.warn("[dictation] cancelled, errorCode:", event.errorCode);
+          setError(
+            event.errorCode === sdk.CancellationErrorCode.ConnectionFailure ? "network" : event.errorCode === sdk.CancellationErrorCode.AuthenticationFailure ? "unavailable-temporarily" : "unknown"
+          );
+        }
+        stop();
+      };
+      recognizer.sessionStopped = () => {
+        if (isLive()) stop();
+      };
+      try {
+        const connection = sdk.Connection.fromRecognizer(recognizer);
+        connection.connected = () => goLive();
+        connection.openConnection();
+      } catch {
+      }
+      await new Promise(
+        (resolve, reject) => session.recognizer.startContinuousRecognitionAsync(resolve, reject)
+      );
+      goLive();
+    } catch (e) {
+      stream.getTracks().forEach((t) => t.stop());
+      try {
+        recognizer?.close();
+      } catch {
+      }
+      if (published) {
+        window.clearTimeout(published.timers.idle);
+        window.clearTimeout(published.timers.max);
+        published.stopLevelMonitor();
+        if (sessionRef.current === published) sessionRef.current = null;
+      }
+      if (superseded()) return;
+      console.warn("[dictation] failed to start:", e);
+      setError((prev) => prev ?? "unavailable-temporarily");
+      setState("idle");
+    }
+  }, [
+    available,
+    clearInterim,
+    getToken,
+    idleTimeoutMs,
+    locale,
+    maxDurationMs,
+    region,
+    stop
+  ]);
+  useEffect(() => stop, [stop]);
+  const toggle = useCallback(() => {
+    if (state === "idle") void start();
+    else stop();
+  }, [start, state, stop]);
+  return {
+    supported,
+    available,
+    state,
+    error,
+    /** Name of the microphone in use, once a session is live. May be ''. */
+    deviceLabel,
+    /** Listening, but the microphone has produced no sound for a while. */
+    silent,
+    start,
+    stop,
+    toggle
+  };
+}
 function useFlowRunVariables(flowRunId) {
   const service = useChatService();
   return useQuery({
@@ -3742,6 +4181,58 @@ var ChatVariablesForm = forwardRef(({ workspace, threadId, setVariables }, ref)
     ) }) })
   ] });
 });
+var dictationErrorMessages = {
+  "permission-denied": "Microphone access is blocked \u2014 allow it in your browser settings and try again",
+  "no-microphone": "No microphone was found",
+  network: "Could not reach the speech service \u2014 try again",
+  "unavailable-temporarily": "Dictation is starting up \u2014 try again in a moment",
+  unavailable: "Dictation is not available on this workspace",
+  unknown: "Dictation stopped unexpectedly \u2014 try again"
+};
+function DictationButton({
+  state,
+  error,
+  disabled,
+  onToggle,
+  deviceLabel,
+  size = "sm"
+}) {
+  const listening = state === "listening";
+  const starting = state === "starting";
+  const label = listening ? "Stop dictation" : "Dictate a message";
+  const hint = listening && deviceLabel ? `${label} \u2014 ${deviceLabel}` : label;
+  const dims = size === "sm" ? "h-8 w-8" : "h-9 w-9";
+  const icon = size === "sm" ? "h-4 w-4" : "h-5 w-5";
+  return /* @__PURE__ */ jsxs(
+    IconButton2,
+    {
+      type: "button",
+      onClick: onToggle,
+      disabled,
+      "aria-pressed": listening,
+      "aria-label": label,
+      title: error ? dictationErrorMessages[error] : hint,
+      className: `relative ${dims} rounded-full transition-colors ${listening ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "text-muted-foreground hover:bg-secondary"}`,
+      children: [
+        starting && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 animate-spin rounded-full border-2 border-transparent border-t-current opacity-70"
+          }
+        ),
+        listening && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 animate-ping rounded-full bg-destructive/30"
+          }
+        ),
+        listening ? /* @__PURE__ */ jsx(Square, { className: `relative ${icon} fill-current` }) : /* @__PURE__ */ jsx(Mic, { className: `relative ${icon}` })
+      ]
+    }
+  );
+}
 
 // src/domains/workspaces/queryKeys.ts
 var workspaceKeys = {
@@ -3974,6 +4465,40 @@ function MessageComposer(_props = {}) {
       cancelReset();
     }
   }, [isSending, cancelAccepted, cancelErrored, cancelReset]);
+  const attachEditor = useCallback(
+    (handle2) => {
+      if (handle2) editorRef.current = handle2;
+    },
+    // Both flags matter: the portal mounts on `isMobile && isFullscreen`, and
+    // nothing resets isFullscreen when the breakpoint flips, so crossing it
+    // while fullscreen would unmount the portal editor without re-attaching the
+    // inline one — leaving a destroyed handle and silently swallowing phrases.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isFullscreen, isMobile]
+  );
+  const { data: speechConfig, isFetching: speechConfigLoading } = useSpeechConfig();
+  const getSpeechToken = useMemo(
+    () => chatService.getSpeechToken?.bind(chatService),
+    [chatService]
+  );
+  const dictation = useDictation({
+    region: speechConfig?.enabled ? speechConfig.region : null,
+    locale: speechConfig?.defaultLocale ?? "en-US",
+    getToken: getSpeechToken,
+    // Final phrases become real text; provisional ones render as greyed ghost
+    // text at the caret and never enter the document.
+    onPhrase: (text6) => editorRef.current?.insertText(`${text6} `),
+    onInterim: (text6) => editorRef.current?.setDictationGhost(text6)
+  });
+  const { stop: stopDictation } = dictation;
+  const dictationUnavailableReason = speechConfigLoading ? "Checking whether dictation is available" : dictation.supported ? "Dictation is not enabled for this workspace" : "Dictation is not available in this browser";
+  const handleDictationToggle = () => {
+    if (dictation.state === "idle") editorRef.current?.focus();
+    dictation.toggle();
+  };
+  useEffect(() => {
+    if (disabled) stopDictation();
+  }, [disabled, stopDictation]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     window.__ssDownloadFile = (id) => getFileBlobUrl(id);
@@ -4093,6 +4618,7 @@ function MessageComposer(_props = {}) {
     const latestText = editorRef.current?.getMarkdown() ?? newMessage;
     const sent = handleSendMessage(latestText, uploadedAttachments);
     if (!sent) return;
+    stopDictation();
     handleClearAttachments();
     setEditorKey((k) => k + 1);
   };
@@ -4199,7 +4725,7 @@ function MessageComposer(_props = {}) {
           /* @__PURE__ */ jsx("div", { className: "max-h-[400px] w-full overflow-y-auto", children: /* @__PURE__ */ jsx(
             MarkdownEditor,
             {
-              ref: editorRef,
+              ref: attachEditor,
               value: newMessage,
               onChange: (md) => setNewMessage(md),
               onKeyDown: handleComposerKeyDown,
@@ -4216,10 +4742,18 @@ function MessageComposer(_props = {}) {
             },
             `composer-md-${editorKey}`
           ) }),
+          /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: dictation.state === "listening" ? dictation.silent ? `Listening, but not hearing anything from ${dictation.deviceLabel || "your microphone"}` : "Listening" : dictation.state === "starting" ? "Starting dictation" : "" }),
+          dictation.state === "listening" && dictation.silent && /* @__PURE__ */ jsxs("div", { className: "px-5 pb-1 text-xs text-muted-foreground", children: [
+            "Not hearing anything from",
+            " ",
+            dictation.deviceLabel || "your microphone",
+            "."
+          ] }),
+          dictation.error && /* @__PURE__ */ jsx("div", { role: "alert", className: "px-5 pb-1 text-xs text-destructive", children: dictationErrorMessages[dictation.error] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 pb-3", children: [
             /* @__PURE__ */ jsxs("div", { className: "ss-composer__actions flex min-w-0 flex-1 items-center gap-1", children: [
               supportsFiles && /* @__PURE__ */ jsx(
-                IconButton,
+                IconButton2,
                 {
                   type: "button",
                   onClick: handlePickFilesClick,
@@ -4240,19 +4774,39 @@ function MessageComposer(_props = {}) {
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx(
-                IconButton,
+              dictation.available ? /* @__PURE__ */ jsx(
+                DictationButton,
                 {
-                  type: "button",
-                  disabled: true,
-                  "aria-label": "Dictate a message",
-                  title: "Dictation is not available yet",
-                  className: "h-8 w-8 cursor-not-allowed rounded-full text-muted-foreground",
-                  children: /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" })
+                  state: dictation.state,
+                  error: dictation.error,
+                  disabled,
+                  onToggle: handleDictationToggle,
+                  deviceLabel: dictation.deviceLabel
                 }
+              ) : (
+                // A disabled button receives no pointer events, so its own
+                // `title` never renders a tooltip. The wrapper is what the user
+                // actually hovers.
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    title: dictationUnavailableReason,
+                    className: "inline-flex cursor-not-allowed",
+                    children: /* @__PURE__ */ jsx(
+                      IconButton2,
+                      {
+                        type: "button",
+                        disabled: true,
+                        "aria-label": `Dictate a message. ${dictationUnavailableReason}`,
+                        className: "h-8 w-8 rounded-full text-muted-foreground",
+                        children: /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" })
+                      }
+                    )
+                  }
+                )
               ),
               canStop ? /* @__PURE__ */ jsx(
-                IconButton,
+                IconButton2,
                 {
                   onClick: handleStopRun,
                   className: "chat-send h-8 w-8 rounded-full",
@@ -4266,7 +4820,7 @@ function MessageComposer(_props = {}) {
                   )
                 }
               ) : /* @__PURE__ */ jsx(
-                IconButton,
+                IconButton2,
                 {
                   onClick: handleSendMessageAndClear,
                   className: `chat-send h-8 w-8 rounded-full ${sendDisabled ? "cursor-not-allowed" : ""}`,
@@ -4295,7 +4849,7 @@ function MessageComposer(_props = {}) {
                 },
                 children: /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full bg-background border shadow-lg", children: [
                   /* @__PURE__ */ jsx(
-                    IconButton,
+                    IconButton2,
                     {
                       type: "button",
                       size: "small",
@@ -4313,7 +4867,7 @@ function MessageComposer(_props = {}) {
                     /* @__PURE__ */ jsx("div", { className: "flex-1 p-4", children: /* @__PURE__ */ jsx(
                       MarkdownEditor,
                       {
-                        ref: editorRef,
+                        ref: attachEditor,
                         value: newMessage,
                         onChange: (md) => setNewMessage(md),
                         onKeyDown: handleComposerKeyDown,
@@ -4328,10 +4882,18 @@ function MessageComposer(_props = {}) {
                       },
                       `composer-md-${editorKey}`
                     ) }),
+                    dictation.error && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        className: "px-4 pb-1 text-xs text-destructive",
+                        children: dictationErrorMessages[dictation.error]
+                      }
+                    ),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-t bg-background", children: [
                       /* @__PURE__ */ jsx("div", { className: "flex-1" }),
                       supportsFiles && /* @__PURE__ */ jsx(
-                        IconButton,
+                        IconButton2,
                         {
                           type: "button",
                           onClick: handlePickFilesClick,
@@ -4346,8 +4908,19 @@ function MessageComposer(_props = {}) {
                           )
                         }
                       ),
+                      dictation.available && /* @__PURE__ */ jsx(
+                        DictationButton,
+                        {
+                          size: "md",
+                          state: dictation.state,
+                          error: dictation.error,
+                          disabled,
+                          onToggle: handleDictationToggle,
+                          deviceLabel: dictation.deviceLabel
+                        }
+                      ),
                       canStop ? /* @__PURE__ */ jsx(
-                        IconButton,
+                        IconButton2,
                         {
                           onClick: handleStopRun,
                           className: "chat-send h-9 w-9 rounded-full",
@@ -4361,7 +4934,7 @@ function MessageComposer(_props = {}) {
                           )
                         }
                       ) : /* @__PURE__ */ jsx(
-                        IconButton,
+                        IconButton2,
                         {
                           onClick: handleSendMessageAndClear,
                           className: `chat-send h-9 w-9 rounded-full ${sendDisabled ? "cursor-not-allowed" : ""}`,
@@ -20696,6 +21269,6 @@ function getUserPhotoUrl(userId) {
   return `${base2}/users/${userId}/photo`;
 }
 
-export { ChatProvider, ChatVariablesForm, DRAFT_THREAD_PREFIX, DateFromApi, MarkdownEditor, MessageComposer, MessageList, MessageListSkeleton, MessageMarkdown, MessageValueType, NEW_THREAD_ID, THREAD_LIST_PAGE_SIZE, applyDeltaToMessage, applyThreadToCache, createDraftThreadId, createThreadId, downloadFileBlobOptions, filesKeys, flowRunsKeys, getMessageErrorText, getModelIcon, getRetryStatusText, getThreadPlaceholderFromListCache, getUserPhotoUrl, invalidateWorkspaceThreadLists, isDraftThreadId, mapFileInfoDtoToModel, mapMentionUserDtoToModel, mapMessageDtoToModel, mapMessageErrorDtoToModel, mapMessageValueDtoToModel, mapMessagesDtoToModels, mapSignalRThreadSummaryToModel, mapThreadDtoToModel, mapThreadsResponseDtoToModel, mapWorkspaceDtoToModel, mapWorkspacesDtoToModels, markDraftThreadId, messagesKeys, messagesListOptions, messagesMutationsKeys, modelsKeys, parseDateTime, parseDateTimeHuman, parseRetryStatus, randomUUID, setThreadOptimisticRunning, setThreadRunningInLists, taggableUsersOptions, threadDetailOptions, threadsKeys, unmarkDraftThreadId, useAddInputToMessage, useChatContext, useChatIdentity, useChatService, useDownloadFileBlobQuery, useFileMutations, useFlowRunVariables, useIsDraftThreadId, useMessages, useModels, useSendMessage, useTaggableWorkspaceUsers, useThread, useThreadIsRunning, useUpdateFlowRunVariable, useWorkspace, utcDate, workspaceDetailOptions, workspaceKeys };
+export { ChatProvider, ChatVariablesForm, DRAFT_THREAD_PREFIX, DateFromApi, DictationButton, MarkdownEditor, MessageComposer, MessageList, MessageListSkeleton, MessageMarkdown, MessageValueType, NEW_THREAD_ID, THREAD_LIST_PAGE_SIZE, applyDeltaToMessage, applyThreadToCache, createDraftThreadId, createThreadId, downloadFileBlobOptions, filesKeys, flowRunsKeys, getMessageErrorText, getModelIcon, getRetryStatusText, getThreadPlaceholderFromListCache, getUserPhotoUrl, invalidateWorkspaceThreadLists, isDraftThreadId, mapFileInfoDtoToModel, mapMentionUserDtoToModel, mapMessageDtoToModel, mapMessageErrorDtoToModel, mapMessageValueDtoToModel, mapMessagesDtoToModels, mapSignalRThreadSummaryToModel, mapThreadDtoToModel, mapThreadsResponseDtoToModel, mapWorkspaceDtoToModel, mapWorkspacesDtoToModels, markDraftThreadId, messagesKeys, messagesListOptions, messagesMutationsKeys, modelsKeys, parseDateTime, parseDateTimeHuman, parseRetryStatus, randomUUID, setThreadOptimisticRunning, setThreadRunningInLists, speechKeys, taggableUsersOptions, threadDetailOptions, threadsKeys, unmarkDraftThreadId, useAddInputToMessage, useChatContext, useChatIdentity, useChatService, useDictation, useDownloadFileBlobQuery, useFileMutations, useFlowRunVariables, useIsDraftThreadId, useMessages, useModels, useSendMessage, useSpeechConfig, useTaggableWorkspaceUsers, useThread, useThreadIsRunning, useUpdateFlowRunVariable, useWorkspace, utcDate, workspaceDetailOptions, workspaceKeys };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map