+
+
+ );
+};
+
+export default Header;
\ No newline at end of file
diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx
new file mode 100644
index 0000000..c2a9978
--- /dev/null
+++ b/frontend/src/components/layout/Layout.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import Sidebar from "./Sidebar";
+import Header from "./Header";
+
+interface LayoutProps {
+ children: React.ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+ return (
+
+
+
+
+ {children}
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..4e98a04
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,63 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Home, LineChart, FileText, LogIn} from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export default function Sidebar() {
+ const router = useRouter();
+
+ // Helper to add custom active styles
+ const activeClass =
+ "bg-blue-50 border-l-4 border-blue-600 text-blue-700 font-semibold shadow-sm";
+
+ return (
+
+
+
LiteWebAgent
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..0a6a9a5
--- /dev/null
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+
+
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
new file mode 100644
index 0000000..683faa7
--- /dev/null
+++ b/frontend/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index 79d6857..b40dd0d 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -1,15 +1,26 @@
import { DeepgramContextProvider } from '@/context/DeepgramContextProvider';
import { MicrophoneContextProvider } from '@/context/MicrophoneContextProvider';
import { MantineProvider } from '@mantine/core';
+import { Inter } from "next/font/google";
+import Layout from "@/components/layout/Layout";
import '@mantine/core/styles.css';
import type { AppProps } from 'next/app';
+const inter = Inter({
+ subsets: ["latin"],
+ variable: "--font-inter",
+});
+
export default function App({ Component, pageProps }: AppProps) {
return (
-
+
+
+
+
+
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 1511b46..076d109 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,41 +1,56 @@
-import { useState } from "react"
-import Playground from "./playground"
-import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogTitle } from '@/components/ui/alert-dialog'
-import { Button } from "@/components/ui/button"
-import { AlertCircle } from 'lucide-react'
+import type { GetServerSidePropsContext } from "next";
+import { useRouter } from "next/router";
+import { createClient } from "@/utils/supabase/server-props";
+import { BrainCircuit } from "lucide-react";
-export default function Page() {
- const [showWelcomeModal, setShowWelcomeModal] = useState(true)
+interface PageProps {
+ user?: any;
+}
+
+export default function Page({ user }: PageProps) {
+ const router = useRouter();
return (
- <>
- console.log('done')}
- />
-
-
-
-
-
-
- Important Notice
-
-
- We are using the BrowserBase hobby plan 🔄, which only supports 3 concurrent browsers. If you are not able to get the web agent up and running ⚠️, it is most likely because someone else is using a remote BrowserBase browser 💻. The BrowserBase startup and scale plans 💰 are too expensive for our open source project 🔓.
-
-
-
-
-
-
-
-
- )
+
+ {/* Enlarged Logo and Title Section */}
+
+
+
+
+
+ Web Agent Demo
+
Interactive Browser Assistant
+
+
+ {user ? (
+
+ ) : (
+
+
Please log in to view this page.
+
+
+ )}
+
+ );
+}
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ const supabase = createClient(context);
+ const { data } = await supabase.auth.getUser();
+
+ return {
+ props: {
+ user: data?.user || null,
+ },
+ };
}
\ No newline at end of file
diff --git a/frontend/src/pages/login/index.tsx b/frontend/src/pages/login/index.tsx
new file mode 100644
index 0000000..2e67fd6
--- /dev/null
+++ b/frontend/src/pages/login/index.tsx
@@ -0,0 +1,178 @@
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import type { User } from '@supabase/supabase-js';
+import type { GetServerSidePropsContext } from 'next';
+import { createClient } from '@/utils/supabase/component';
+import { createClient as createServerClient } from '@/utils/supabase/server-props';
+import { Lock, Mail, LogOut, User as UserIcon } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface LoginPageProps {
+ user: User | null;
+}
+
+export default function LoginPage({ user: initialUser }: LoginPageProps) {
+ const router = useRouter();
+ const supabase = createClient();
+
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [rememberMe, setRememberMe] = useState(false);
+
+ async function logIn() {
+ const { error } = await supabase.auth.signInWithPassword({ email, password });
+ if (error) {
+ console.error(error);
+ return;
+ }
+ router.push('/');
+ }
+
+ async function signUp() {
+ const { error } = await supabase.auth.signUp({
+ email,
+ password,
+ options: {
+ emailRedirectTo: `${window.location.origin}/auth/callback`,
+ },
+ });
+
+ if (error) {
+ console.error(error);
+ return;
+ }
+
+ // Show a message that verification email has been sent
+ alert("Check your email for a verification link");
+ }
+
+ async function logOut() {
+ const { error } = await supabase.auth.signOut();
+ if (error) {
+ console.error(error);
+ return;
+ }
+
+ setEmail('');
+ setPassword('');
+ router.push('/login');
+ }
+
+ return (
+
+
+
+
+ {initialUser ? 'Account' : 'Welcome back'}
+
+
+ {initialUser ? 'You are currently signed in' : 'Enter your email to sign in to your account'}
+
+
+
+ {initialUser ? (
+
+
+
+ {initialUser.email}
+
+
+
+ ) : (
+
+ )}
+
+
+
+ );
+}
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ const supabase = createServerClient(context);
+
+ const { data, error } = await supabase.auth.getUser();
+
+ if (error) {
+ return {
+ props: {
+ user: null,
+ },
+ };
+ }
+
+ return {
+ props: {
+ user: data.user,
+ },
+ };
+}
\ No newline at end of file
diff --git a/frontend/src/pages/playground.tsx b/frontend/src/pages/playground.tsx
index 7033a38..614b2db 100644
--- a/frontend/src/pages/playground.tsx
+++ b/frontend/src/pages/playground.tsx
@@ -46,6 +46,8 @@ import {
import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogTitle } from '@/components/ui/alert-dialog';
import { useRouter } from 'next/router';
+import type { GetServerSidePropsContext } from "next";
+import { createClient } from "@/utils/supabase/server-props";
type MessageType =
| 'status'
@@ -89,15 +91,30 @@ interface PlaygroundStep {
interface PlaygroundProps {
initialSteps_: PlaygroundStep[];
processId: string;
- onSessionEnd: () => void;
+ user?: any;
+}
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ const supabase = createClient(context);
+ const { data } = await supabase.auth.getUser();
+
+ return {
+ props: {
+ user: data?.user || null,
+ initialSteps_: [],
+ processId: "x",
+ },
+ };
}
export default function Playground({
initialSteps_,
processId,
- onSessionEnd
+ user,
}: PlaygroundProps) {
+ const router = useRouter();
+ // All hooks at the top!
const [startingUrl, setStartingUrl] = useState('');
const [command, setCommand] = useState('');
const [longTermMemory, setLongTermMemory] = useState(false);
@@ -128,7 +145,10 @@ export default function Playground({
const captionTimeout = useRef();
const keepAliveInterval = useRef();
- // Set up Deepgram when microphone is ready
+ // Add welcome modal state
+ const [showWelcomeModal, setShowWelcomeModal] = useState(true);
+
+ // All useEffect hooks here
useEffect(() => {
if (microphoneState === MicrophoneState.Ready) {
connectToDeepgram({
@@ -141,7 +161,6 @@ export default function Playground({
}
}, [microphoneState]);
- // Handle microphone data streaming
useEffect(() => {
if (!microphone || !connection) return;
@@ -178,7 +197,6 @@ export default function Playground({
}, [connectionState]);
- // Keep-alive connection management
useEffect(() => {
if (!connection) return;
@@ -196,7 +214,6 @@ export default function Playground({
};
}, [microphoneState, connectionState]);
- // Handle Microphone Toggle
const handleMicrophoneToggle = async () => {
if (transcriber === null) {
if (firstTimeListening === null) {
@@ -226,7 +243,6 @@ export default function Playground({
};
}, [initialSteps_]);
- // Function to speak text and return a promise
const speakText = async (text: string): Promise => {
setIsSpeaking(true);
@@ -265,7 +281,6 @@ export default function Playground({
}
};
- // Process message queue
const processMessageQueue = async () => {
if (isProcessingQueue.current || messageQueue.current.length === 0) return;
@@ -318,7 +333,6 @@ export default function Playground({
return null; // Return null if "at " is not found
}
- // Modified handleNewMessage to use queue
const handleNewMessage = (message: string) => {
try {
const parsedMessage: WebAgentMessage = JSON.parse(message);
@@ -397,8 +411,6 @@ export default function Playground({
}
};
- const router = useRouter();
-
const handleReset = async () => {
setIsResetting(true);
@@ -427,7 +439,6 @@ export default function Playground({
setBrowserUrl('');
setSessionId('');
setStartingUrl('');
- onSessionEnd();
setIsResetting(false);
@@ -600,38 +611,23 @@ export default function Playground({
setIsSpeaking(false);
};
+ // Now, after all hooks, check for user
+ if (!user) {
+ return (
+
+
Please log in to view this page.
+
+
+ );
+ }
return (
-
-
-
-
-
-
-
- Web Agent Demo
-
Interactive Browser Assistant
-
-
-
-
-
-
-
-
-
@@ -822,6 +818,29 @@ export default function Playground({
+
+ {/* Add Welcome Modal */}
+
+
+
+
+
+ Important Notice
+
+
+ We are using the BrowserBase hobby plan 🔄, which only supports 3 concurrent browsers. If you are not able to get the web agent up and running ⚠️, it is most likely because someone else is using a remote BrowserBase browser 💻. The BrowserBase startup and scale plans 💰 are too expensive for our open source project 🔓.
+
+
+ PathOnAI
+
+
+