@mastra/react 0.5.3-alpha.3 → 0.6.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @mastra/react
 
+## 0.6.0-alpha.4
+
+### Minor Changes
+
+- Added voice helpers to the React SDK and made agent text-to-speech audible. ([#17663](https://github.com/mastra-ai/mastra/pull/17663))
+
+  The React SDK now exposes voice helpers: `useSpeechRecognition` for speech-to-text, `playStreamWithWebAudio` for buffered Web Audio playback from a `ReadableStream`, and `recordMicrophoneToFile` for capturing microphone audio. The `useSpeechRecognition` hook automatically uses an agent's voice provider when one is configured, and falls back to the browser's built-in speech recognition otherwise.
+
+  ```tsx
+  import { useSpeechRecognition } from '@mastra/react';
+
+  function VoiceInput({ agentId }: { agentId?: string }) {
+    const { start, stop, isListening, transcript } = useSpeechRecognition({ agentId });
+    return <button onClick={isListening ? stop : start}>{transcript}</button>;
+  }
+  ```
+
+  Also fixed agent text-to-speech being inaudible. The `voice/speak` route now returns a web-standard audio response (`Content-Type: audio/mpeg`) so server-side adapters pass raw audio bytes through to the client instead of JSON-encoding them. This also resolves `getReader` crashes when an agent speaks using providers like OpenAI voice.
+
+- Show a sent user message instantly as a pending bubble in the chat thread, then settle it in place when the server confirms it — instead of staging it near the composer. The optimistic bubble and the outgoing message share a client-generated correlation id, so the server echo reconciles the exact bubble with no duplicate message. ([#17688](https://github.com/mastra-ai/mastra/pull/17688))
+
+### Patch Changes
+
+- Fixed MessageFactory Reasoning renderer types to expose streaming state metadata. ([#17774](https://github.com/mastra-ai/mastra/pull/17774))
+
+- Fix streamed user messages with attachments in React chat state ([#17774](https://github.com/mastra-ai/mastra/pull/17774))
+
+- Updated dependencies [[`575f815`](https://github.com/mastra-ai/mastra/commit/575f815c5c3567b71c0b83cbb7fa98c8253a9d9c), [`306909a`](https://github.com/mastra-ai/mastra/commit/306909a693de77d709b38706e2673c9547d24a28), [`5191af8`](https://github.com/mastra-ai/mastra/commit/5191af80c799eea25357c545fc05d91b3883531d), [`43bd3d4`](https://github.com/mastra-ai/mastra/commit/43bd3d421987463fdf35386a45199c49499ed069), [`e6fa79e`](https://github.com/mastra-ai/mastra/commit/e6fa79ec72a2ddffdd25e85270398951e9d552a4), [`904bcdf`](https://github.com/mastra-ai/mastra/commit/904bcdf7b8004aa7be823f9f70ca63580e47e470), [`7f5ee1d`](https://github.com/mastra-ai/mastra/commit/7f5ee1dca46daee8d2817f2ebe49e6335da81956), [`1e9aab5`](https://github.com/mastra-ai/mastra/commit/1e9aab50ff11e6e88fde4d7cbf512c44a9fe8d61), [`bf8eb6d`](https://github.com/mastra-ai/mastra/commit/bf8eb6d0ec213a403eb9265a594ad283c44ab3dc), [`493a328`](https://github.com/mastra-ai/mastra/commit/493a328f4346a1deeb9f1e2e44c8f2a3a4d7591b), [`029a414`](https://github.com/mastra-ai/mastra/commit/029a4141719793bd3e898a39eb5a0466a55f5f3a), [`b147b29`](https://github.com/mastra-ai/mastra/commit/b147b2907f0cd1aa812efe6d6e3f58d22e66fc88), [`d371ac1`](https://github.com/mastra-ai/mastra/commit/d371ac1d9820afaaf7cfdbc380a475946a994d8f), [`cf182b7`](https://github.com/mastra-ai/mastra/commit/cf182b7fb495767946d9840ef29f19cfa906f31f), [`a049c2a`](https://github.com/mastra-ai/mastra/commit/a049c2a9dfb41d0ee2e7a28874a88cd64fd5669f), [`b147b29`](https://github.com/mastra-ai/mastra/commit/b147b2907f0cd1aa812efe6d6e3f58d22e66fc88), [`2a96528`](https://github.com/mastra-ai/mastra/commit/2a9652848dfa3c5a2426f952e9d93554c26fd90f), [`61f5491`](https://github.com/mastra-ai/mastra/commit/61f54912e6453cc706bb5d7df9f6c7aad78d428f), [`2656d9c`](https://github.com/mastra-ai/mastra/commit/2656d9c2976d4f3354253bfbbbf9b88a1b2bbf34), [`63e3fe1`](https://github.com/mastra-ai/mastra/commit/63e3fe13cc1ea96f91d7c68aea92f400faf9e4da), [`1d4ce8d`](https://github.com/mastra-ai/mastra/commit/1d4ce8daaa54511f325c1b609d31b8e54009d677), [`8c68372`](https://github.com/mastra-ai/mastra/commit/8c68372e85fe0b066ec12c58bd29ffb93e54c552)]:
+  - @mastra/core@1.42.0-alpha.4
+  - @mastra/client-js@1.24.0-alpha.4
+
 ## 0.5.3-alpha.3
 
 ### Patch Changes

package/dist/agent/hooks.d.ts

@@ -54,6 +54,11 @@ export type StreamArgs = SharedArgs & {
     onChunk?: (chunk: ChunkType) => Promise<void>;
     clientTools?: ClientToolsInput;
     signalId?: string;
+    /**
+     * Client-generated correlation id stamped on the optimistic pending bubble
+     * and the outgoing message metadata so the server echo can reconcile them.
+     */
+    clientMessageId?: string;
 };
 export type NetworkArgs = SharedArgs & {
     onNetworkChunk?: (chunk: NetworkChunkType) => Promise<void>;

package/dist/agent/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/agent/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAY,eAAe,EAA4B,MAAM,iCAAiC,CAAC;AAE3G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAiB,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAYtF,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA4G/D,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,6FAA6F;IAC7F,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;;OAIG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,UAAU,UAAU;IAClB,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,MAAM,MAAM,eAAe,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAA;CAAE,GAAG,CACtF,CAAC;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GAAG,IAAI,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC,GAC/D,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,IAAI,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC,GAC3D,CAAC;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,GAAG,IAAI,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC,GAC7D,CAAC;IAAE,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG,IAAI,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAChE,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IACrC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7D,CAAC;AAoDF,eAAO,MAAM,OAAO,GAAI,qMAWrB,eAAe;;qCA6zByC,eAAe;;;;kCArN7B,MAAM;kCAiDN,MAAM;0CAgDE,MAAM;0CA0BN,MAAM;;;;oBA7sBvB,UAAU,GAAG,UAAU;;;uCAuuBT,MAAM,UAAU,MAAM;uCAgCtB,MAAM,UAAU,MAAM;;;oBApwBtC,UAAU,GAAG,UAAU;;;CA80BxD,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/agent/hooks.ts"],"names":[],"mappings":"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"}

package/dist/index.cjs

@@ -115,6 +115,9 @@ var formatStreamCompletionFeedback = (result, maxIterationReached) => {
   );
 };
 
+// src/lib/mastra-db/types.ts
+var CLIENT_MESSAGE_ID_KEY = "clientMessageId";
+
 // src/lib/mastra-db/accumulator.ts
 var cloneMetadata = (metadata) => metadata ? { ...metadata } : {};
 var withParts = (message, parts) => ({
@@ -131,6 +134,14 @@ var withMetadata = (message, metadata) => ({
     metadata
   }
 });
+var clearPendingStatus = (message) => {
+  const { status: _status, [CLIENT_MESSAGE_ID_KEY]: _clientMessageId, ...rest } = message.content.metadata ?? {};
+  return withMetadata(message, rest);
+};
+var clearPendingStatusKeepClientId = (message) => {
+  const { status: _status, ...rest } = message.content.metadata ?? {};
+  return withMetadata(message, rest);
+};
 var replaceLast = (conversation, message) => [
   ...conversation.slice(0, -1),
   message
@@ -157,6 +168,7 @@ var partState = (part) => part.state;
 var finishStreamingAssistantMessage = (conversation) => {
   const lastMessage = conversation[conversation.length - 1];
   if (!lastMessage || lastMessage.role !== "assistant") return conversation;
+  if (lastMessage.content.parts.length === 0) return conversation.slice(0, -1);
   const nextParts = lastMessage.content.parts.map((part) => {
     if ((part.type === "text" || part.type === "reasoning") && partState(part) === "streaming") {
       return {
@@ -357,8 +369,22 @@ var accumulateChunk = ({ chunk, conversation, metadata }) => {
   if (isDataChunk(chunk)) {
     if (chunk.type === "data-user-message" && "data" in chunk && (chunk.data?.type === "user-message" || chunk.data?.type === "user")) {
       const signalId = chunk.data.id;
+      const echoedClientMessageId = chunk.data?.metadata?.[CLIENT_MESSAGE_ID_KEY];
+      if (typeof echoedClientMessageId === "string" && result.some(
+        (message) => message.content.metadata?.status === "pending" && message.content.metadata[CLIENT_MESSAGE_ID_KEY] === echoedClientMessageId
+      )) {
+        return finishStreamingAssistantMessage(
+          result.map(
+            (message) => message.content.metadata?.status === "pending" && message.content.metadata[CLIENT_MESSAGE_ID_KEY] === echoedClientMessageId ? clearPendingStatusKeepClientId(typeof signalId === "string" ? { ...message, id: signalId } : message) : message
+          )
+        );
+      }
       if (typeof signalId === "string" && result.some((message) => message.id === signalId)) {
-        return result;
+        return finishStreamingAssistantMessage(
+          result.map(
+            (message) => message.id === signalId && message.content.metadata?.status === "pending" ? clearPendingStatus(message) : message
+          )
+        );
       }
       const userMessages = signalContentsToUserMessages(chunk.data.contents, metadata);
       if (!userMessages.length) return result;
@@ -1632,46 +1658,45 @@ var accumulateNetworkChunk = ({
 };
 
 // src/lib/mastra-db/fromCoreUserMessage.ts
-var fromCoreUserMessageToMastraDBMessage = (coreUserMessage) => {
-  const id = `user-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-  const parts = typeof coreUserMessage.content === "string" ? [{ type: "text", text: coreUserMessage.content }] : coreUserMessage.content.map((part) => {
-    switch (part.type) {
-      case "text": {
-        return { type: "text", text: part.text };
-      }
-      case "image": {
-        const url = typeof part.image === "string" ? part.image : part.image instanceof URL ? part.image.toString() : "";
-        return {
-          type: "file",
-          mediaType: part.mimeType ?? "image/*",
-          url
-        };
-      }
-      case "file": {
-        const url = typeof part.data === "string" ? part.data : part.data instanceof URL ? part.data.toString() : "";
-        return {
-          type: "file",
-          mediaType: part.mimeType,
-          url,
-          ...part.filename !== void 0 ? { filename: part.filename } : {}
-        };
-      }
-      default: {
-        const exhaustiveCheck = part;
-        throw new Error(`Unhandled content part type: ${exhaustiveCheck.type}`);
-      }
+var coreUserMessageToParts = (coreUserMessage) => typeof coreUserMessage.content === "string" ? [{ type: "text", text: coreUserMessage.content }] : coreUserMessage.content.map((part) => {
+  switch (part.type) {
+    case "text": {
+      return { type: "text", text: part.text };
     }
-  });
-  return {
-    id,
-    role: "user",
-    createdAt: /* @__PURE__ */ new Date(),
-    content: {
-      format: 2,
-      parts
+    case "image": {
+      const data = typeof part.image === "string" ? part.image : part.image instanceof URL ? part.image.toString() : "";
+      return {
+        type: "file",
+        mimeType: part.mimeType ?? "image/*",
+        data
+      };
     }
-  };
-};
+    case "file": {
+      const data = typeof part.data === "string" ? part.data : part.data instanceof URL ? part.data.toString() : "";
+      return {
+        type: "file",
+        mimeType: part.mimeType,
+        data,
+        ...part.filename !== void 0 ? { filename: part.filename } : {}
+      };
+    }
+    default: {
+      const exhaustiveCheck = part;
+      throw new Error(`Unhandled content part type: ${exhaustiveCheck.type}`);
+    }
+  }
+});
+var newUserMessage = (parts) => ({
+  id: `user-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+  role: "user",
+  createdAt: /* @__PURE__ */ new Date(),
+  content: {
+    format: 2,
+    parts
+  }
+});
+var fromCoreUserMessageToMastraDBMessage = (coreUserMessage) => newUserMessage(coreUserMessageToParts(coreUserMessage));
+var fromCoreUserMessagesToMastraDBMessage = (coreUserMessages) => newUserMessage(coreUserMessages.flatMap(coreUserMessageToParts));
 
 // src/agent/extractRunIdFromMessages.ts
 var isRecord = (value) => value !== null && typeof value === "object";
@@ -1751,21 +1776,33 @@ var resolveInitialMessages = (messages) => messages.filter((message) => {
   return true;
 }).map((message) => {
   const metadata = message.content?.metadata;
-  const pendingToolApprovals = metadata?.pendingToolApprovals;
+  const normalizedMessage = metadata && (metadata.status === "pending" || CLIENT_MESSAGE_ID_KEY in metadata) ? (() => {
+    const { [CLIENT_MESSAGE_ID_KEY]: _omitClientMessageId, ...rest } = metadata;
+    const { status: _omitStatus, ...restWithoutStatus } = rest;
+    return {
+      ...message,
+      content: {
+        ...message.content,
+        metadata: metadata.status === "pending" ? restWithoutStatus : rest
+      }
+    };
+  })() : message;
+  const normalizedMetadata = normalizedMessage.content?.metadata;
+  const pendingToolApprovals = normalizedMetadata?.pendingToolApprovals;
   if (!pendingToolApprovals || typeof pendingToolApprovals !== "object") {
-    return message;
+    return normalizedMessage;
   }
   const stillPending = Object.fromEntries(
     Object.entries(pendingToolApprovals).filter(
-      ([, approval]) => approval && typeof approval === "object" && typeof approval.toolCallId === "string" && !toolCallHasOutput(message.content.parts, approval.toolCallId)
+      ([, approval]) => approval && typeof approval === "object" && typeof approval.toolCallId === "string" && !toolCallHasOutput(normalizedMessage.content.parts, approval.toolCallId)
     )
   );
-  const { pendingToolApprovals: _omit, ...restMetadata } = metadata;
+  const { pendingToolApprovals: _omit, ...restMetadata } = normalizedMetadata;
   const hasStillPending = Object.keys(stillPending).length > 0;
   return {
-    ...message,
+    ...normalizedMessage,
     content: {
-      ...message.content,
+      ...normalizedMessage.content,
       metadata: {
         ...restMetadata,
         mode: "stream",
@@ -2092,7 +2129,8 @@ var useChat = ({
     signal,
     tracingOptions,
     clientTools,
-    signalId
+    signalId,
+    clientMessageId
   }) => {
     const {
       frequencyPenalty,
@@ -2203,7 +2241,7 @@ var useChat = ({
     };
     try {
       const result = await agent.sendMessage({
-        message: messageContents,
+        message: clientMessageId ? { contents: messageContents, metadata: { [CLIENT_MESSAGE_ID_KEY]: clientMessageId } } : messageContents,
         resourceId: resourceId || agentId,
         threadId: threadId2,
         ifIdle: {
@@ -2238,7 +2276,7 @@ var useChat = ({
           onSignalEcho?.(resolvedSignalId);
           if (isThreadSignalUnsupportedError(signalError)) {
             markThreadSignalsUnsupported();
-            setMessages((prev) => [...prev, ...coreUserMessages.map(fromCoreUserMessageToMastraDBMessage)]);
+            setMessages((prev) => [...prev, fromCoreUserMessagesToMastraDBMessage(coreUserMessages)]);
             await streamWithLegacyRoute();
             return;
           }
@@ -2499,15 +2537,26 @@ var useChat = ({
     if (args.coreUserMessages) {
       coreUserMessages.push(...args.coreUserMessages);
     }
-    const dbUserMessages = coreUserMessages.map(fromCoreUserMessageToMastraDBMessage);
-    const signalId = mode === "stream" && args.threadId && !_threadSignalsUnsupportedRef.current && !threadSignalsDisabled ? dbUserMessages[0]?.id : void 0;
-    if (!signalId) {
-      setMessages((s) => [...s, ...dbUserMessages]);
+    const dbUserMessage = fromCoreUserMessagesToMastraDBMessage(coreUserMessages);
+    const clientSetId = mode === "stream" && args.threadId && !_threadSignalsUnsupportedRef.current && !threadSignalsDisabled ? `client-set-${uuid.v4()}` : void 0;
+    const signalId = clientSetId;
+    const clientMessageId = clientSetId;
+    if (signalId) {
+      const metadata = {
+        ...dbUserMessage.content.metadata,
+        mode: "stream",
+        status: "pending",
+        [CLIENT_MESSAGE_ID_KEY]: clientMessageId
+      };
+      const pendingMessage = { ...dbUserMessage, id: clientSetId, content: { ...dbUserMessage.content, metadata } };
+      setMessages((s) => [...s, pendingMessage]);
+    } else {
+      setMessages((s) => [...s, dbUserMessage]);
     }
     if (mode === "generate") {
       await generate({ ...args, coreUserMessages });
     } else if (mode === "stream") {
-      await stream({ ...args, coreUserMessages, signalId });
+      await stream({ ...args, coreUserMessages, signalId, clientMessageId });
     } else if (mode === "network") {
       await network({ ...args, coreUserMessages });
     }
@@ -2926,6 +2975,9 @@ var MessageFactoryComponent = ({ message, roles, status, fallback, ...renderers
     content = status.Error({ text: joinText(parts), message });
   } else {
     content = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts.map((part, index) => /* @__PURE__ */ jsxRuntime.jsx(PartRenderer, { part, renderers, fallback }, getPartKey(part, index))) });
+    if (metadata?.status === "pending" && status?.Pending) {
+      content = status.Pending({ children: content, text: joinText(parts), message });
+    }
     const verdict = resolveTaskVerdict(metadata);
     if (verdict && status?.Task) {
       content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -3352,7 +3404,235 @@ function useCancelWorkflowRun() {
   });
 }
 
+// src/voice/record-mic-to-file.ts
+async function recordMicrophoneToFile(onFinish) {
+  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  const mediaRecorder = new MediaRecorder(stream);
+  let chunks = [];
+  mediaRecorder.ondataavailable = (e) => {
+    chunks.push(e.data);
+  };
+  mediaRecorder.onstop = () => {
+    const blob = new Blob(chunks, { type: "audio/webm" });
+    const file = new File([blob], `recording-${Date.now()}.webm`, {
+      type: "audio/webm",
+      lastModified: Date.now()
+    });
+    stream.getTracks().forEach((track) => track.stop());
+    onFinish(file);
+  };
+  return mediaRecorder;
+}
+
+// src/voice/play-stream-with-web-audio.ts
+async function playStreamWithWebAudio(stream, onEnded) {
+  const audioContext = new window.AudioContext();
+  const reader = stream.getReader();
+  const chunks = [];
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      chunks.push(value);
+    }
+    const totalLength = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+    const combinedBuffer = new Uint8Array(totalLength);
+    let offset = 0;
+    for (const chunk of chunks) {
+      combinedBuffer.set(chunk, offset);
+      offset += chunk.length;
+    }
+    const audioBuffer = await audioContext.decodeAudioData(combinedBuffer.buffer);
+    const source = audioContext.createBufferSource();
+    source.buffer = audioBuffer;
+    source.onended = onEnded ?? null;
+    source.connect(audioContext.destination);
+    source.start();
+    return () => {
+      source.onended = null;
+      source.stop();
+      void audioContext.close();
+    };
+  } catch (error) {
+    await reader.cancel().catch(() => void 0);
+    await audioContext.close().catch(() => void 0);
+    throw error;
+  } finally {
+    reader.releaseLock();
+  }
+}
+var useSpeechRecognition = ({
+  language = "en-US",
+  agentId,
+  requestContext
+}) => {
+  const client = useMastraClient();
+  const [agent, setAgent] = react.useState(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    if (!agentId) {
+      setAgent(null);
+      return () => {
+        cancelled = true;
+      };
+    }
+    const agent2 = client.getAgent(agentId);
+    const check = async () => {
+      try {
+        const speakers = await agent2.voice.getSpeakers(requestContext);
+        if (!cancelled) {
+          setAgent(speakers.length > 0 ? agent2 : null);
+        }
+      } catch {
+        if (!cancelled) {
+          setAgent(null);
+        }
+      }
+    };
+    void check();
+    return () => {
+      cancelled = true;
+    };
+  }, [agentId, client, requestContext]);
+  const browserSpeechRecognition = useBrowserSpeechRecognition({ language });
+  const mastraSpeechRecognition = useMastraSpeechToText({ agent, language });
+  if (!agent) {
+    return browserSpeechRecognition;
+  }
+  return mastraSpeechRecognition;
+};
+var useBrowserSpeechRecognition = ({ language = "en-US" }) => {
+  const speechRecognitionRef = react.useRef(null);
+  const [state, setState] = react.useState({
+    isListening: false,
+    transcript: "",
+    error: null
+  });
+  const start = () => {
+    if (!speechRecognitionRef.current) return;
+    speechRecognitionRef.current.start();
+  };
+  const stop = () => {
+    if (!speechRecognitionRef.current) return;
+    speechRecognitionRef.current.stop();
+  };
+  react.useEffect(() => {
+    if (!("webkitSpeechRecognition" in window) && !("SpeechRecognition" in window)) {
+      setState((prev) => ({ ...prev, error: "Speech Recognition not supported in this browser" }));
+      return;
+    }
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const recognition = new SpeechRecognition();
+    speechRecognitionRef.current = recognition;
+    recognition.continuous = true;
+    recognition.lang = language;
+    recognition.onstart = () => {
+      setState((prev) => ({ ...prev, isListening: true, error: null }));
+    };
+    recognition.onresult = (event) => {
+      let finalTranscript = "";
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const transcript = event.results[i][0].transcript;
+        if (event.results[i].isFinal) {
+          finalTranscript += transcript + " ";
+        }
+      }
+      setState((prev) => ({ ...prev, transcript: finalTranscript }));
+    };
+    recognition.onerror = (event) => {
+      setState((prev) => ({ ...prev, error: `Error: ${event.error}` }));
+    };
+    recognition.onend = () => setState((prev) => ({ ...prev, isListening: false }));
+    return () => {
+      try {
+        recognition.stop();
+      } catch {
+      }
+      recognition.onstart = null;
+      recognition.onresult = null;
+      recognition.onerror = null;
+      recognition.onend = null;
+      speechRecognitionRef.current = null;
+    };
+  }, [language]);
+  return {
+    ...state,
+    start,
+    stop
+  };
+};
+var useMastraSpeechToText = ({
+  agent,
+  language
+}) => {
+  const [state, setState] = react.useState({
+    isListening: false,
+    transcript: "",
+    error: null
+  });
+  const recorderRef = react.useRef(null);
+  const sessionRef = react.useRef(0);
+  const startInFlightRef = react.useRef(false);
+  react.useEffect(() => {
+    return () => {
+      sessionRef.current += 1;
+      startInFlightRef.current = false;
+      recorderRef.current?.stop();
+      recorderRef.current = null;
+    };
+  }, [agent]);
+  const handleFinish = (session) => (file) => {
+    if (!agent || session !== sessionRef.current) return;
+    recorderRef.current = null;
+    setState((prev) => ({ ...prev, isListening: false }));
+    void agent.voice.listen(file, { language }).then((res) => {
+      if (session !== sessionRef.current) return;
+      setState((prev) => ({ ...prev, transcript: res.text, error: null }));
+    }).catch((error) => {
+      if (session !== sessionRef.current) return;
+      const message = error instanceof Error ? error.message : "Failed to transcribe speech";
+      setState((prev) => ({ ...prev, error: message }));
+    });
+  };
+  const start = () => {
+    if (!agent || startInFlightRef.current || recorderRef.current) return;
+    startInFlightRef.current = true;
+    const session = sessionRef.current;
+    void recordMicrophoneToFile(handleFinish(session)).then((recorder) => {
+      startInFlightRef.current = false;
+      if (session !== sessionRef.current) {
+        try {
+          recorder.stop();
+        } catch {
+        }
+        return;
+      }
+      recorderRef.current = recorder;
+      setState((prev) => ({ ...prev, isListening: true, error: null }));
+      recorder.start();
+    }).catch((error) => {
+      startInFlightRef.current = false;
+      if (session !== sessionRef.current) return;
+      const message = error instanceof Error ? error.message : "Failed to start speech recording";
+      setState((prev) => ({ ...prev, isListening: false, error: message }));
+    });
+  };
+  const stop = () => {
+    sessionRef.current += 1;
+    startInFlightRef.current = false;
+    recorderRef.current?.stop();
+    recorderRef.current = null;
+    setState((prev) => ({ ...prev, isListening: false }));
+  };
+  return {
+    ...state,
+    start,
+    stop
+  };
+};
+
 exports.AgentIcon = AgentIcon;
+exports.CLIENT_MESSAGE_ID_KEY = CLIENT_MESSAGE_ID_KEY;
 exports.CodeBlock = CodeBlock;
 exports.CodeBlockClass = CodeBlockClass;
 exports.CodeCopyButton = CodeCopyButton;
@@ -3411,12 +3691,16 @@ exports.accumulateChunk = accumulateChunk;
 exports.accumulateNetworkChunk = accumulateNetworkChunk;
 exports.finishStreamingAssistantMessage = finishStreamingAssistantMessage;
 exports.fromCoreUserMessageToMastraDBMessage = fromCoreUserMessageToMastraDBMessage;
+exports.fromCoreUserMessagesToMastraDBMessage = fromCoreUserMessagesToMastraDBMessage;
 exports.mapWorkflowStreamChunkToWatchResult = mapWorkflowStreamChunkToWatchResult;
+exports.playStreamWithWebAudio = playStreamWithWebAudio;
+exports.recordMicrophoneToFile = recordMicrophoneToFile;
 exports.useCancelWorkflowRun = useCancelWorkflowRun;
 exports.useChat = useChat;
 exports.useCreateWorkflowRun = useCreateWorkflowRun;
 exports.useEntity = useEntity;
 exports.useMastraClient = useMastraClient;
+exports.useSpeechRecognition = useSpeechRecognition;
 exports.useStreamWorkflow = useStreamWorkflow;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map