Frontend architecture

{
  "dependencies": {
    "react": "^19.1.0",
    "react-router-dom": "^7.6.2",
    "@humeai/voice-react": "^0.2.11",
    "framer-motion": "^12.18.1",
    "tailwindcss": "^4.1.10",
    "lucide-react": "^0.522.0"
  }
}

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/navbar";
import Hero from "./pages";
import Playground from "./pages/playground";
import Insights from "./pages/insights";

function AppContent() {
  const location = useLocation();
  // Hide navbar on playground and insights pages
  const hideNavbar = ["/playground", "/insights"].includes(location.pathname);

  return (
    <>
      {!hideNavbar && <Navbar />}
      <div className="min-h-screen bg-gradient-to-b from-[#efb1ae] via-[#FED5C7] to-[#FFE4C6]">
        <Routes>
          <Route path="/" element={<Hero />} />
          <Route path="/playground" element={<Playground />} />
          <Route path="/insights" element={<Insights />} />
        </Routes>
      </div>
    </>
  );
}

import { VoiceProvider } from "@humeai/voice-react";
import Messages from "./message";
import Controls from "./controls";
import StartCall from "./startCall";

export default function ChatInterface() {
  const apiKey = import.meta.env.VITE_HUME_API_KEY || "";
  const configId = import.meta.env.VITE_HUME_CONFIG_ID || "";

  return (
    <div className="relative grow flex flex-col mx-auto w-full overflow-hidden h-screen">
      <VoiceProvider>
        <Messages />
        <Controls />
        <StartCall apiKey={apiKey} configId={configId} />
      </VoiceProvider>
    </div>
  );
}

import { useVoice, type ConnectOptions } from "@humeai/voice-react";

export default function StartCall({ apiKey, configId }: StartCallProps) {
  const { status, connect } = useVoice();
  const [isConnecting, setIsConnecting] = useState(false);

  const handleConnect = async () => {
    setIsConnecting(true);
    const connectOptions: ConnectOptions = {
      auth: { type: "apiKey", value: apiKey },
      configId: configId,
    };

    try {
      await connect(connectOptions);
    } catch {
      alert("Unable to connect. Please check microphone permissions.");
    } finally {
      setIsConnecting(false);
    }
  };

  // Shows connection button when not connected
  return status.value !== "connected" ? (
    <CallButton onClick={handleConnect} disabled={isConnecting} />
  ) : null;
}

import { useVoice } from "@humeai/voice-react";
import Expressions from "./expressions";

export default function Messages() {
  const { messages } = useVoice();

  return (
    <div className="overflow-auto p-6">
      {messages.map((msg, index) => {
        if (msg.type === "user_message" || msg.type === "assistant_message") {
          const isUser = msg.type === "user_message";
          
          return (
            <div className={isUser ? "ml-auto" : "mr-auto"}>
              <div className="text-sm">{msg.message.content}</div>
              
              {/* Show emotion scores if available */}
              {msg.models.prosody?.scores && (
                <Expressions values={msg.models.prosody.scores} />
              )}
            </div>
          );
        }
      })}
    </div>
  );
}