Storytelling chatbot updates (#1066)

* initial changes for gemini storybot

* storybot updates for gemini

* more storybot updates

* interim interruptible commit

* cleanup

* cleanup

* cleanup

* cleanup

examples/storytelling-chatbot/frontend/components/Story.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   useDaily,
   useParticipantIds,
@@ -33,7 +33,9 @@ const Story: React.FC<StoryProps> = ({ handleLeave }) => {
         setTimeout(() => daily.setLocalAudio(true), 500);
         setStoryState("user");
       } else {
-        daily.setLocalAudio(false);
+        // Uncomment the next line to mute the mic while the 
+        // assistant it talking. Leave it commented to allow for interruptions
+        // daily.setLocalAudio(false);
         setStoryState("assistant");
       }
     },
@@ -58,7 +60,7 @@ const Story: React.FC<StoryProps> = ({ handleLeave }) => {
         {participantIds.length >= 1 ? (
           <VideoTile
             sessionId={participantIds[0]}
-            inactive={storyState === "user"}
+            inactive={false}
           />
         ) : (
           <span className="p-3 rounded-full bg-gray-900/60 animate-pulse">
@@ -71,7 +73,7 @@ const Story: React.FC<StoryProps> = ({ handleLeave }) => {
         )}
         <DailyAudio />
       </div>
-      <UserInputIndicator active={storyState === "user"} />
+      <UserInputIndicator active={true} />
     </div>
   );
 };

examples/storytelling-chatbot/frontend/components/UserInputIndicator/UserInputIndicator.module.css

@@ -43,25 +43,8 @@
     transition: opacity 0.5s ease; 
 }
 
-
-@keyframes pulse {
-    0% {
-        outline-width: 6px;
-        @apply  outline-teal-500/10; 
-    }
-    50% {
-        outline-width: 24px;
-        @apply  outline-teal-500/50; 
-    }
-    100% {
-        outline-width: 6px;
-        @apply  outline-teal-500/10; 
-    }
-}
-
 .micIconActive{
     @apply bg-teal-950 border-teal-500 outline-teal-500/20;
-    animation: pulse 2s infinite ease-in-out;
 }
 
 .micIconActive svg{

examples/storytelling-chatbot/frontend/components/UserInputIndicator/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 
 import { useAppMessage } from "@daily-co/daily-react";
 import { DailyEventObjectAppMessage } from "@daily-co/daily-js";
@@ -13,12 +13,31 @@ interface Props {
 
 export default function UserInputIndicator({ active }: Props) {
   const [transcription, setTranscription] = useState<string[]>([]);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  const resetTimeout = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setTranscription([]);
+    }, 5000);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
 
   useAppMessage({
     onAppMessage: (e: DailyEventObjectAppMessage<any>) => {
       if (e.fromId && e.fromId === "transcription") {
         if (e.data.user_id === "" && e.data.is_final) {
           setTranscription((t) => [...t, ...e.data.text.split(" ")]);
+          resetTimeout();
         }
       }
     },