fix: ActionBarSpeak / StopSpeaking handlers (#969)

packages/react/src/api/MessageRuntime.ts

@@ -115,6 +115,7 @@ export type MessageRuntime = {
   getState(): MessageState;
   reload(): void;
   speak(): void;
+  stopSpeaking(): void;
   submitFeedback({ type }: { type: "positive" | "negative" }): void;
   switchToBranch({
     position,

packages/react/src/primitive-hooks/actionBar/useActionBarSpeak.tsx

@@ -1,34 +1,19 @@
 import { useCallback } from "react";
 
-import { useCombinedStore } from "../../utils/combined/useCombinedStore";
-import {
-  useEditComposerStore,
-  useMessageRuntime,
-  useMessageStore,
-  useMessageUtilsStore,
-} from "../../context";
+import { useMessage, useMessageRuntime } from "../../context";
 
 export const useActionBarSpeak = () => {
-  const messageStore = useMessageStore();
-  const editComposerStore = useEditComposerStore();
   const messageRunime = useMessageRuntime();
-  const messageUtilsStore = useMessageUtilsStore();
-
-  const hasSpeakableContent = useCombinedStore(
-    [messageStore, editComposerStore],
-    (message, c) => {
-      return (
-        !c.isEditing &&
-        (message.role !== "assistant" || message.status.type !== "running") &&
-        message.content.some((c) => c.type === "text" && c.text.length > 0)
-      );
-    },
-  );
-
   const callback = useCallback(async () => {
-    const utt = messageRunime.speak();
-    messageUtilsStore.getState().addUtterance(utt);
-  }, [messageRunime, messageUtilsStore]);
+    messageRunime.speak();
+  }, [messageRunime]);
+
+  const hasSpeakableContent = useMessage((m) => {
+    return (
+      (m.role !== "assistant" || m.status.type !== "running") &&
+      m.content.some((c) => c.type === "text" && c.text.length > 0)
+    );
+  });
 
   if (!hasSpeakableContent) return null;
   return callback;

packages/react/src/primitive-hooks/actionBar/useActionBarStopSpeaking.tsx

@@ -1,16 +1,16 @@
 import { useCallback } from "react";
 import {
-  useMessageUtils,
-  useMessageUtilsStore,
+  useMessage,
+  useMessageRuntime,
 } from "../../context/react/MessageContext";
 
 export const useActionBarStopSpeaking = () => {
-  const messageUtilsStore = useMessageUtilsStore();
-  const isSpeaking = useMessageUtils((u) => u.isSpeaking);
+  const messageRuntime = useMessageRuntime();
+  const isSpeaking = useMessage((u) => u.speech != null);
 
   const callback = useCallback(async () => {
-    messageUtilsStore.getState().stopSpeaking();
-  }, [messageUtilsStore]);
+    messageRuntime.stopSpeaking();
+  }, [messageRuntime]);
 
   if (!isSpeaking) return null;