From a20307972c8790bbba3197d3af0a61ee6c9ddc20 Mon Sep 17 00:00:00 2001 From: Michael Louis Date: Mon, 24 Jun 2024 22:01:45 -0400 Subject: [PATCH] Updated code --- README.md | 8 ++++++-- env.example | 1 + src/App.tsx | 25 ++++++++++++++++++++----- src/actions.ts | 8 +++++--- 4 files changed, 32 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 53dc850..0407a6f 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Install deps and build the UI: mv env.example .env.development.local yarn yarn run build - +yarn dev ``` Navigate to https://localhost:5173 @@ -24,7 +24,11 @@ Name of your bot e.g. "Simple Chatbot" (shown in HTML and intro) `VITE_SERVER_URL` -A server URL to trigger when starting a session (e.g. a Pipecat bot_runner) that instantiates a new agent at the specified room URL. Note: If this is not set, the app will assume you will manually start your bot at the same room URL (and show a warning on the config screen in dev mode.) +A server URL to trigger when starting a session (e.g. your Cerebrium function) that instantiates a new agent at the specified room URL. Note: If this is not set, the app will assume you will manually start your bot at the same room URL (and show a warning on the config screen in dev mode.) + +`VITE_SERVER_AUTH` + +The JWT token that authenticates your request to your cerebrium endpoint `VITE_MANUAL_ROOM_ENTRY` diff --git a/env.example b/env.example index d12fd9d..352994f 100644 --- a/env.example +++ b/env.example @@ -1,5 +1,6 @@ VITE_APP_TITLE=Simple Chatbot VITE_SERVER_URL=... #optional: if serving frontend externally from backend, or requesting agent from API +VITE_SERVER_AUTH VITE_MANUAL_ROOM_ENTRY=... #optional: require user to specify a room URL to join VITE_OPEN_MIC= # Can the user speak freely, or do they need to wait their turn? VITE_USER_VIDEO= #Does the app require the user's webcam? diff --git a/src/App.tsx b/src/App.tsx index f280fd3..25a8e7b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,6 +35,7 @@ const status_text = { // Server URL (ensure trailing slash) let serverUrl = import.meta.env.VITE_SERVER_URL; +let serverAuth = import.meta.env.VITE_SERVER_AUTH; if (serverUrl && !serverUrl.endsWith("/")) serverUrl += "/"; // Auto room creation (requires server URL) @@ -43,7 +44,7 @@ const autoRoomCreation = import.meta.env.VITE_MANUAL_ROOM_ENTRY ? false : true; // Query string for room URL const roomQs = new URLSearchParams(window.location.search).get("room_url"); const checkRoomUrl = (url: string | null): boolean => - !!(url && /^(https?:\/\/[^.]+(\.staging)?\.daily\.co\/[^/]+)$/.test(url)); + !!(url && /^(https?:\/\/[^.]+\.daily\.co\/[^/]+)$/.test(url)); // Show config options const showConfigOptions = import.meta.env.VITE_SHOW_CONFIG; @@ -84,8 +85,22 @@ export default function App() { setState("requesting_agent"); try { - data = await fetch_start_agent(roomUrl, serverUrl); - + data = await fetch_start_agent(`${serverUrl}create_room`, serverAuth); + if (data && !data.errror) { + fetch(`${serverUrl}main`, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${serverAuth}` + }, + body: JSON.stringify({ + room_url: data.result.url, + token: data.result.token + }) + }).catch((e) => { + console.error(`Failed to make request to ${serverUrl}/main: ${e}`); + }); + } if (data.error) { setError(data.detail); setState("error"); @@ -103,8 +118,8 @@ export default function App() { try { await daily.join({ - url: data?.room_url || roomUrl, - token: data?.token || "", + url: data.result.url || roomUrl, + token: data.result.token || "", videoSource: false, startAudioOff: startAudioOff, }); diff --git a/src/actions.ts b/src/actions.ts index 0059f4a..bd755fb 100644 --- a/src/actions.ts +++ b/src/actions.ts @@ -1,13 +1,15 @@ export const fetch_start_agent = async ( - roomUrl: string | null, - serverUrl: string + serverUrl: string, + serverAuth: string | null ) => { + console.log(serverUrl) const req = await fetch(`${serverUrl}`, { method: "POST", headers: { "Content-Type": "application/json", + "Authorization": `Bearer ${serverAuth}` }, - body: JSON.stringify({ room_url: roomUrl }), + body: JSON.stringify({}), }); const data = await req.json();