assistant response is replayable

speech-speech/frontend/src/App.tsx

@@ -51,14 +51,15 @@ function playRecord() {
   audio.play();
 }
 
-function playMsg(msg: ChatMsg) {
-  const audio = new Audio(
-    "/speak?" +
-    new URLSearchParams({ text: msg.content }),
-  );
-  console.log("loading audio and playing?");
-  audio.play();
-}
+//function playMsg(msg: ChatMsg) {
+//  const audio = new Audio(
+//    "/speak?" +
+//    new URLSearchParams({ text: msg.content }),
+//  );
+//  console.log("loading audio and playing?");
+//  audio.play();
+//}
+
 function App() {
   const [recordState, setRecordState] = useState(false);
   const [chatState, setChatState] = useState([{
@@ -99,8 +100,8 @@ function App() {
             setChatState((
               curState: Array<ChatMsg>,
             ) => [...curState, res]);
-            console.log("attempting to play result");
-            playMsg(res);
+           // console.log("attempting to play result");
+            //playMsg(res);
           });
       });
   }

speech-speech/frontend/src/components.tsx

@@ -6,10 +6,10 @@ import {
   TbPlayerStop,
 } from "react-icons/tb";
 
-
 export type ChatMsg = {
   role: string;
   content: string;
+  audio: any = null;
 };
 
 export function Header() {
@@ -50,6 +50,18 @@ export function Feed(props: { chat: Array<ChatMsg>; setChatStateFn: any }) {
 }
 
 export function Msg(props: { msg: ChatMsg }) {
+  let audio;
+  if (props.msg.role == "assistant") {
+    audio = (
+      <audio
+        controls
+        autoPlay
+        src={"/speak?" + new URLSearchParams({ text: props.msg.content })}
+      />
+    );
+  } else if (props.msg.audio){
+    <div />;
+  }
   return (
     <div className="Messege text-lg">
       <span className="font-bold">
@@ -59,6 +71,7 @@ export function Msg(props: { msg: ChatMsg }) {
       <span className="ml-8">
         {props.msg.content}
       </span>
+      {audio}
     </div>
   );
 }