From b798d9cd42ae66f7e59642fa0fbd21996e4e63a6 Mon Sep 17 00:00:00 2001
From: Jon Taylor <heyjtaylor@gmail.com>
Date: Thu, 16 May 2024 19:35:10 +0100
Subject: [PATCH] added open mic config

---
 examples/simple-chatbot/bot_runner.py            |  7 +++++--
 examples/web-ui/src/App.tsx                      |  5 +++--
 examples/web-ui/src/components/Session/index.tsx | 16 +++++++++++++---
 .../src/components/Session/styles.module.css     |  9 +++++++++
 .../src/components/UserMicBubble/index.tsx       | 15 ++++++++-------
 .../components/UserMicBubble/styles.module.css   | 15 +++++++++++----
 6 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/examples/simple-chatbot/bot_runner.py b/examples/simple-chatbot/bot_runner.py
index 209f18b11..e4fce47b8 100644
--- a/examples/simple-chatbot/bot_runner.py
+++ b/examples/simple-chatbot/bot_runner.py
@@ -1,6 +1,5 @@
 from daily_helpers import create_room, get_token, check_room_url
 import os
-import sys
 import argparse
 import subprocess
 import atexit
@@ -129,7 +128,11 @@ async def start_bot(request: Request) -> JSONResponse:
      # Grab a token for the user to join with
     user_token = get_token(room_url)
 
-    return JSONResponse({"bot_id": proc.pid, "room_url": room_url, "token": user_token})
+    return JSONResponse({
+        "bot_id": proc.pid,
+        "room_url": room_url,
+        "token": user_token,
+        "config": {"open_mic": True}})
 
 
 # ----------------- Main ----------------- #
diff --git a/examples/web-ui/src/App.tsx b/examples/web-ui/src/App.tsx
index 46a18640c..17bb450dc 100644
--- a/examples/web-ui/src/App.tsx
+++ b/examples/web-ui/src/App.tsx
@@ -23,7 +23,7 @@ export default function App() {
 
   const [state, setState] = useState<State>("idle");
   const [error, setError] = useState<string | null>(null);
-  //const [room, setRoom] = useState<string | null>(null);
+  const [config, setConfig] = useState<{ open_mic?: boolean }>({});
 
   async function start() {
     if (!daily) return;
@@ -45,6 +45,7 @@ export default function App() {
       });
 
       data = await res.json();
+      setConfig(data.config || {});
 
       if (!res.ok) {
         setError(data.detail);
@@ -85,7 +86,7 @@ export default function App() {
   }
 
   if (state === "connected") {
-    return <Session onLeave={() => leave()} />;
+    return <Session onLeave={() => leave()} openMic={config?.open_mic} />;
   }
 
   const status_text = {
diff --git a/examples/web-ui/src/components/Session/index.tsx b/examples/web-ui/src/components/Session/index.tsx
index 609ef8b44..4428a0f5b 100644
--- a/examples/web-ui/src/components/Session/index.tsx
+++ b/examples/web-ui/src/components/Session/index.tsx
@@ -9,11 +9,21 @@ import UserMicBubble from "../UserMicBubble";
 
 import styles from "./styles.module.css";
 
-export const Session: React.FC<{ onLeave: () => void }> = ({ onLeave }) => {
+interface SessionProps {
+  onLeave: () => void;
+  openMic?: boolean;
+}
+
+export const Session: React.FC<SessionProps> = ({
+  onLeave,
+  openMic = false,
+}) => {
   const daily = useDaily();
   const [showDevices, setShowDevices] = useState(false);
   const modalRef = useRef<HTMLDialogElement>(null);
-  const [talkState, setTalkState] = useState<"user" | "assistant">("assistant");
+  const [talkState, setTalkState] = useState<"user" | "assistant" | "open">(
+    openMic ? "open" : "assistant"
+  );
 
   useAppMessage({
     onAppMessage: (e) => {
@@ -52,7 +62,7 @@ export const Session: React.FC<{ onLeave: () => void }> = ({ onLeave }) => {
 
       <div className={styles.agentContainer}>
         <Agent />
-        <UserMicBubble active={talkState === "user"} />
+        <UserMicBubble openMic={openMic} active={talkState !== "assistant"} />
         <DailyAudio />
       </div>
 
diff --git a/examples/web-ui/src/components/Session/styles.module.css b/examples/web-ui/src/components/Session/styles.module.css
index 1e09fb5ef..4909ed143 100644
--- a/examples/web-ui/src/components/Session/styles.module.css
+++ b/examples/web-ui/src/components/Session/styles.module.css
@@ -108,3 +108,12 @@
     background: var(--color-orange-400);
   }
 }
+
+.statusGreen {
+  color: var(--color-green-800);
+  background: var(--color-green-100);
+
+  > span {
+    background: var(--color-green-400);
+  }
+}
diff --git a/examples/web-ui/src/components/UserMicBubble/index.tsx b/examples/web-ui/src/components/UserMicBubble/index.tsx
index 0891092cb..126cefc58 100644
--- a/examples/web-ui/src/components/UserMicBubble/index.tsx
+++ b/examples/web-ui/src/components/UserMicBubble/index.tsx
@@ -35,9 +35,10 @@ const AudioIndicatorBubble: React.FC = () => {
 
 interface Props {
   active: boolean;
+  openMic: boolean;
 }
 
-export default function UserMicBubble({ active }: Props) {
+export default function UserMicBubble({ active, openMic = false }: Props) {
   /*
   const [transcription, setTranscription] = useState<string[]>([]);
   useAppMessage({
@@ -56,13 +57,13 @@ export default function UserMicBubble({ active }: Props) {
     return () => clearTimeout(t);
   }, [active]);*/
 
+  const cx = openMic ? styles.micIconOpen : active && styles.micIconActive;
+
   return (
-    <div className={`${styles.bubbleContainer} ${active ? styles.active : ""}`}>
-      <div
-        className={`${styles.micIcon} ${active ? styles.micIconActive : ""}`}
-      >
-        {active ? <Mic size={42} /> : <MicOff size={42} />}
-        {active && <AudioIndicatorBubble />}
+    <div className={`${styles.bubbleContainer}`}>
+      <div className={`${styles.micIcon} ${cx}`}>
+        {!openMic && !active ? <MicOff size={42} /> : <Mic size={42} />}
+        {(openMic || active) && <AudioIndicatorBubble />}
       </div>
       <footer className={styles.transcript}></footer>
     </div>
diff --git a/examples/web-ui/src/components/UserMicBubble/styles.module.css b/examples/web-ui/src/components/UserMicBubble/styles.module.css
index d4049a653..08cd9fd7a 100644
--- a/examples/web-ui/src/components/UserMicBubble/styles.module.css
+++ b/examples/web-ui/src/components/UserMicBubble/styles.module.css
@@ -1,7 +1,3 @@
-.active::after {
-  opacity: 1;
-}
-
 .bubbleContainer {
   color: #ffffff;
   position: relative;
@@ -56,6 +52,16 @@
   }
 }
 
+.micIconOpen {
+  background-color: var(--color-gray-500);
+  background-image: radial-gradient(
+    var(--color-gray-500),
+    var(--color-gray-600)
+  );
+  border: 6px solid color-mix(in srgb, var(--color-gray-200), transparent 60%);
+  outline: 6px solid color-mix(in srgb, var(--color-gray-400), transparent 70%);
+}
+
 .micIconActive {
   background-color: var(--color-green-500);
   background-image: radial-gradient(
@@ -67,6 +73,7 @@
   animation: pulse 2s infinite ease-in-out;
 }
 
+.micIconOpen svg,
 .micIconActive svg {
   opacity: 1;
 }