From 708d02730b4058d7966be9ddf9bf996444afca1e Mon Sep 17 00:00:00 2001
From: Simon Farshid <simon.farshid@outlook.com>
Date: Thu, 10 Oct 2024 13:56:31 -0700
Subject: [PATCH] fix: ActionBarSpeak / StopSpeaking handlers (#969)

---
 packages/react/src/api/MessageRuntime.ts      |  1 +
 .../actionBar/useActionBarSpeak.tsx           | 35 ++++++-------------
 .../actionBar/useActionBarStopSpeaking.tsx    | 12 +++----
 3 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/packages/react/src/api/MessageRuntime.ts b/packages/react/src/api/MessageRuntime.ts
index 559955730..595a7ee2e 100644
--- a/packages/react/src/api/MessageRuntime.ts
+++ b/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,
diff --git a/packages/react/src/primitive-hooks/actionBar/useActionBarSpeak.tsx b/packages/react/src/primitive-hooks/actionBar/useActionBarSpeak.tsx
index d5230d670..831e6aaae 100644
--- a/packages/react/src/primitive-hooks/actionBar/useActionBarSpeak.tsx
+++ b/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;
diff --git a/packages/react/src/primitive-hooks/actionBar/useActionBarStopSpeaking.tsx b/packages/react/src/primitive-hooks/actionBar/useActionBarStopSpeaking.tsx
index 3dac96193..1dc49d676 100644
--- a/packages/react/src/primitive-hooks/actionBar/useActionBarStopSpeaking.tsx
+++ b/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;