VapiAI · damonkost · Jan 17, 2025 · Jan 18, 2025 · Jan 18, 2025 · Jan 18, 2025
diff --git a/public/index.html b/public/index.html
@@ -1,24 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="description" content="Vapi Web Quickstart" />
+  <link rel="icon" href="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/Zf7Uh2x67Yz3nEftEH2i/pub/CGUchpsfP4hSCQZJI1dr.gif" />
+  <meta name="description" content="LegalScout AI" />
 
-    <!-- Inter Font -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
-      rel="stylesheet"
-    />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet" />
 
-    <title>Vapi Web Quickstart</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
+  <link rel="stylesheet" href="index.css" />
+
+  <title>LegalScout AI</title>
+</head>
+<body>
+  <header>
+    <nav>
+      <div class="logo-container">
+        <img class="logo" src="https://res.cloudinary.com/glide/image/fetch/f_auto,c_limit/https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fglide-prod.appspot.com%2Fo%2Ficon-images%252Fanonymous-4ec86c98-f143-4160-851d-892f167b223c.png%3Falt%3Dmedia%26token%3Dcdc26513-26ae-48f6-b085-85b8bb806c4c" alt="LegalScout Logo" />
+      </div>
+      <div class="nav-links">
+        <a href="https://legalscout.ai/dl/Home">Home</a>
+        <a href="https://legalscout.ai/dl/Cases">My Cases</a>
+        <a href="https://legalscout.ai/dl/About">About</a>
+      </div>
+    </nav>
+  </header>
+
+  <main class="hero">
+    <div class="statement">
+      <h1 class="gradient-text">✨ Legal Help, Simplified ✨</h1>
+      <p>Don't navigate the legal system alone! 😓 LegalScout AI is your guide. Tell us about your case, and we'll connect you with the perfect attorney.</p>
+      <p>Get matched with lawyers who are experienced, available, and eager to take your case. 💪</p>
+      <p>See our <a href="https://legalscout.ai/dl/Terms">Terms & Conditions</a>.</p>
+      <button class="call-button">Call Scout</button>
+    </div>
+  </main>
+
+  <script src="index.js"></script>
+</body>
+</html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,63 +6,104 @@ import Vapi from "@vapi-ai/web";
 import { isPublicKeyMissingError } from "./utils";
 
 // Put your Vapi Public Key below.
-const vapi = new Vapi("0000XXXX-XXXX-XXXX-XXXX-XXXXXXXX0000");
+const vapi = new Vapi("310f0d43-27c2-47a5-a76d-e55171d024f7"); // Replace with your actual public key
 
 const App = () => {
   const [connecting, setConnecting] = useState(false);
   const [connected, setConnected] = useState(false);
 
   const [assistantIsSpeaking, setAssistantIsSpeaking] = useState(false);
   const [volumeLevel, setVolumeLevel] = useState(0);
+  const [microphoneAllowed, setMicrophoneAllowed] = useState(false); // Add state for microphone permission
 
   const { showPublicKeyInvalidMessage, setShowPublicKeyInvalidMessage } = usePublicKeyInvalid();
 
   // hook into Vapi events
   useEffect(() => {
-    vapi.on("call-start", () => {
+    const handleCallStart = () => {
       setConnecting(false);
       setConnected(true);
 
       setShowPublicKeyInvalidMessage(false);
-    });
+    };
 
-    vapi.on("call-end", () => {
+    const handleCallEnd = () => {
       setConnecting(false);
       setConnected(false);
 
       setShowPublicKeyInvalidMessage(false);
-    });
+    };
 
-    vapi.on("speech-start", () => {
+    const handleSpeechStart = () => {
       setAssistantIsSpeaking(true);
-    });
+    };
 
-    vapi.on("speech-end", () => {
+    const handleSpeechEnd = () => {
       setAssistantIsSpeaking(false);
-    });
+    };
 
-    vapi.on("volume-level", (level) => {
+    const handleVolumeLevel = (level) => {
       setVolumeLevel(level);
-    });
+    };
 
-    vapi.on("error", (error) => {
+    const handleError = (error) => {
       console.error(error);
 
       setConnecting(false);
       if (isPublicKeyMissingError({ vapiError: error })) {
         setShowPublicKeyInvalidMessage(true);
       }
-    });
-
-    // we only want this to fire on mount
+    };
+
+    // Add event listeners
+    vapi.on("call-start", handleCallStart);
+    vapi.on("call-end", handleCallEnd);
+    vapi.on("speech-start", handleSpeechStart);
+    vapi.on("speech-end", handleSpeechEnd);
+    vapi.on("volume-level", handleVolumeLevel);
+    vapi.on("error", handleError);
+
+    // Clean up event listeners on unmount
+    return () => {
+      vapi.off("call-start", handleCallStart);
+      vapi.off("call-end", handleCallEnd);
+      vapi.off("speech-start", handleSpeechStart);
+      vapi.off("speech-end", handleSpeechEnd);
+      vapi.off("volume-level", handleVolumeLevel);
+      vapi.off("error", handleError);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // call start handler
-  const startCallInline = () => {
+  const startCallInline = async () => { 
     setConnecting(true);
-    vapi.start(assistantOptions);
+
+    try {
+      // Request microphone access
+      await navigator.mediaDevices.getUserMedia({ audio: true });
+      setMicrophoneAllowed(true); 
+
+      const assistantOverrides = {
+        transcriber: {
+          provider: "deepgram",
+          model: "nova-2",
+          language: "en-US",
+        },
+        recordingEnabled: true, 
+        // Add any other overrides you need here, like:
+        // endCallOnNoSpeech: false,  // Disable automatic end on no speech
+        // maxDuration: 3600,        // Set a longer max duration (in seconds) 
+      };
+
+      vapi.start('e3fff1dd-2e82-4cce-ac6c-8c3271eb0865', assistantOverrides); 
+    } catch (error) {
+      console.error("Error accessing microphone:", error);
+      setConnecting(false);
+      // Handle microphone access errors (e.g., display an error message)
+    }
   };
+
   const endCall = () => {
     vapi.stop();
   };
@@ -79,9 +120,11 @@ const App = () => {
     >
       {!connected ? (
         <Button
-          label="Call Vapi’s Pizza Front Desk"
+          label="Call Scout"
           onClick={startCallInline}
           isLoading={connecting}
+          disabled={!microphoneAllowed} // Disable button if mic access is not allowed
+          icon={<LegalScoutIcon />} 
         />
       ) : (
         <ActiveCallDetail
@@ -92,69 +135,18 @@ const App = () => {
       )}
 
       {showPublicKeyInvalidMessage ? <PleaseSetYourPublicKeyMessage /> : null}
-      <ReturnToDocsLink />
     </div>
   );
 };
 
-const assistantOptions = {
-  name: "Vapi’s Pizza Front Desk",
-  firstMessage: "Vappy’s Pizzeria speaking, how can I help you?",
-  transcriber: {
-    provider: "deepgram",
-    model: "nova-2",
-    language: "en-US",
-  },
-  voice: {
-    provider: "playht",
-    voiceId: "jennifer",
-  },
-  model: {
-    provider: "openai",
-    model: "gpt-4",
-    messages: [
-      {
-        role: "system",
-        content: `You are a voice assistant for Vappy’s Pizzeria, a pizza shop located on the Internet.
-
-Your job is to take the order of customers calling in. The menu has only 3 types
-of items: pizza, sides, and drinks. There are no other types of items on the menu.
-
-1) There are 3 kinds of pizza: cheese pizza, pepperoni pizza, and vegetarian pizza
-(often called "veggie" pizza).
-2) There are 3 kinds of sides: french fries, garlic bread, and chicken wings.
-3) There are 2 kinds of drinks: soda, and water. (if a customer asks for a
-brand name like "coca cola", just let them know that we only offer "soda")
-
-Customers can only order 1 of each item. If a customer tries to order more
-than 1 item within each category, politely inform them that only 1 item per
-category may be ordered.
-
-Customers must order 1 item from at least 1 category to have a complete order.
-They can order just a pizza, or just a side, or just a drink.
-
-Be sure to introduce the menu items, don't assume that the caller knows what
-is on the menu (most appropriate at the start of the conversation).
-
-If the customer goes off-topic or off-track and talks about anything but the
-process of ordering, politely steer the conversation back to collecting their order.
-
-Once you have all the information you need pertaining to their order, you can
-end the conversation. You can say something like "Awesome, we'll have that ready
-for you in 10-20 minutes." to naturally let the customer know the order has been
-fully communicated.
-
-It is important that you collect the order in an efficient manner (succinct replies
-& direct questions). You only have 1 task here, and it is to collect the customers
-order, then end the conversation.
-
-- Be sure to be kind of funny and witty!
-- Keep all your responses short and simple. Use casual language, phrases like "Umm...", "Well...", and "I mean" are preferred.
-- This is a voice conversation, so keep your responses short, like in a real conversation. Don't ramble for too long.`,
-      },
-    ],
-  },
-};
+// Make sure the image URL is correct and accessible
+const LegalScoutIcon = () => (
+  <img
+    src="https://res.cloudinary.com/glide/image/fetch/f_auto,w_500,c_limit/https%3A%2F%2Fstorage.googleapis.com%2Fglide-prod.appspot.com%2Fuploads-v2%2FZf7Uh2x67Yz3nEftEH2i%2Fpub%2FipEv2VSSLIL0o0e2ostK.png" 
+    alt="LegalScout Icon"
+    style={{ width: "24px", height: "24px" }}
+  />
+);
 
 const usePublicKeyInvalid = () => {
   const [showPublicKeyInvalidMessage, setShowPublicKeyInvalidMessage] = useState(false);
@@ -177,42 +169,17 @@ const usePublicKeyInvalid = () => {
 const PleaseSetYourPublicKeyMessage = () => {
   return (
     <div
-      style={{
-        position: "fixed",
-        bottom: "25px",
-        left: "25px",
-        padding: "10px",
-        color: "#fff",
-        backgroundColor: "#f03e3e",
-        borderRadius: "5px",
-        boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
-      }}
+     style={{
+    display: "flex",
+    width: "100vw",
+    height: "100vh",
+    justifyContent: "center", // This centers horizontally
+    alignItems: "center",     // This centers vertically
+  }}
     >
       Is your Vapi Public Key missing? (recheck your code)
     </div>
   );
 };
 
-const ReturnToDocsLink = () => {
-  return (
-    <a
-      href="https://docs.vapi.ai"
-      target="_blank"
-      rel="noopener noreferrer"
-      style={{
-        position: "fixed",
-        top: "25px",
-        right: "25px",
-        padding: "5px 10px",
-        color: "#fff",
-        textDecoration: "none",
-        borderRadius: "5px",
-        boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
-      }}
-    >
-      return to docs
-    </a>
-  );
-};
-
 export default App;
diff --git a/src/components/ActiveCallDetail.jsx b/src/components/ActiveCallDetail.jsx
@@ -5,6 +5,9 @@ import VolumeLevel from "./call/VolumeLevel";
 const ActiveCallDetail = ({ assistantIsSpeaking, volumeLevel, onEndCallClick }) => {
   return (
     <div>
+<div style={{ marginTop: "20px", textAlign: "center" }}>
+        <Button label="End Call" onClick={onEndCallClick} />
+      </div>
       <div
         style={{
           display: "flex",
@@ -22,9 +25,7 @@ const ActiveCallDetail = ({ assistantIsSpeaking, volumeLevel, onEndCallClick })
         <AssistantSpeechIndicator isSpeaking={assistantIsSpeaking} />
         <VolumeLevel volume={volumeLevel} />
       </div>
-      <div style={{ marginTop: "20px", textAlign: "center" }}>
-        <Button label="End Call" onClick={onEndCallClick} />
-      </div>
+
     </div>
   );
 };