[V0_FILE]typescriptreact:file="middleware.ts" isMerged="true" import { NextResponse } from "next/server" import type { NextRequest } from "next/server" export function middleware(request: NextRequest) { const currentUser = request.cookies.get("chatbot-user")?.value // If the user is not logged in and trying to access a protected route if (!currentUser && request.nextUrl.pathname.startsWith("/chat")) { return NextResponse.redirect(new URL("/", request.url)) } // If the user is logged in and trying to access login page if (currentUser && request.nextUrl.pathname === "/") { return NextResponse.redirect(new URL("/chat", request.url)) } return NextResponse.next() } export const config = { matcher: ["/", "/chat/:path*"], } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Image from "next/image" import Link from "next/link" import AuthForm from "@/components/auth-form" export default function Home() { return (

AI Chat Bot

Your friendly AI assistant with voice capabilities

By using this service, you agree to our{" "} Terms of Service {" "} and{" "} Privacy Policy

) } [V0_FILE]typescriptreact:file="components/auth-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useAuth } from "@/context/auth-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ReactBits } from "@reactbits/ui" export default function AuthForm() { const [activeTab, setActiveTab] = useState("login") const [loginData, setLoginData] = useState({ email: "", password: "" }) const [signupData, setSignupData] = useState({ name: "", email: "", password: "", confirmPassword: "" }) const { login, signup, isLoading } = useAuth() const handleLoginSubmit = async (e: React.FormEvent) => { e.preventDefault() await login(loginData.email, loginData.password) } const handleSignupSubmit = async (e: React.FormEvent) => { e.preventDefault() if (signupData.password !== signupData.confirmPassword) { alert("Passwords do not match") return } await signup(signupData.name, signupData.email, signupData.password) } return ( Login Create Account

Welcome Back Login to your account to continue chatting with your AI assistant

Email setLoginData({ ...loginData, email: e.target.value })} />

Password

setLoginData({ ...loginData, password: e.target.value })} />

Demo credentials: demo@example.com / password

Create an Account Sign up to start chatting with your personal AI assistant

Full Name setSignupData({ ...signupData, name: e.target.value })} />

Email setSignupData({ ...signupData, email: e.target.value })} />

Password setSignupData({ ...signupData, password: e.target.value })} />

Confirm Password setSignupData({ ...signupData, confirmPassword: e.target.value })} />

) } [V0_FILE]typescriptreact:file="app/chat/page.tsx" isMerged="true" import ChatInterface from "@/components/chat-interface" import ChatNavbar from "@/components/chat-navbar" export default function ChatPage() { return (

) } [V0_FILE]typescriptreact:file="components/chat-navbar.tsx" isMerged="true" "use client" import Link from "next/link" import { useAuth } from "@/context/auth-context" import { useTheme } from "@/context/theme-context" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Settings, LogOut, User } from "lucide-react" import { ReactBits } from "@reactbits/ui" export default function ChatNavbar() { const { user, logout } = useAuth() const { theme } = useTheme() if (!user) return null return (

AI Chat Bot Profile Settings Logout

) } [V0_FILE]typescriptreact:file="types/chat.ts" isMerged="true" export interface MessageUser { name: string avatar?: string } export interface Message { id: string role: "user" | "assistant" content: string timestamp: Date isVoice?: boolean user?: MessageUser } [V0_FILE]typescriptreact:file="components/chat-messages.tsx" isMerged="true" "use client" import type { RefObject } from "react" import type { Message } from "@/types/chat" import { useTheme } from "@/context/theme-context" import { ReactBits } from "@reactbits/ui" interface ChatMessagesProps { messages: Message[] isLoading: boolean messagesEndRef: RefObject } export default function ChatMessages({ messages, isLoading, messagesEndRef }: ChatMessagesProps) { const { theme } = useTheme() return (

{messages.map((message) => (

{message.role === "assistant" && (

)}

{message.isVoice && (

Voice Message

)}

{message.content}

{new Date(message.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", })}

{message.role === "user" && message.user && (

)}

))} {isLoading && (

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import { ThemeProvider } from "@/context/theme-context" import { AuthProvider } from "@/context/auth-context" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "AI Chat Bot", description: "A minimalist, cartoonish chat bot with voice options and customizable AI parameters", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="context/auth-context.tsx" isEdit="true" isQuickEdit="true" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" import { useRouter } from "next/navigation" import { useToast } from "@/components/ui/use-toast" interface User { id: string name: string email: string avatar?: string } interface AuthContextType { user: User | null isLoading: boolean login: (email: string, password: string) => Promise signup: (name: string, email: string, password: string) => Promise logout: () => void } const AuthContext = createContext(undefined) // Mock user data - in a real app, this would come from a database const MOCK_USERS = [ { id: "1", name: "Demo User", email: "demo@example.com", password: "password", avatar: "/placeholder.svg?height=100&width=100", }, { id: "2", name: "Test User", email: "test@example.com", password: "password", avatar: "/placeholder.svg?height=100&width=100", }, ] export function AuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) const router = useRouter() const { toast } = useToast() // Check if user is already logged in useEffect(() => { const storedUser = localStorage.getItem("chatbot-user") if (storedUser) { try { setUser(JSON.parse(storedUser)) } catch (e) { console.error("Error parsing stored user:", e) localStorage.removeItem("chatbot-user") } } setIsLoading(false) }, []) // Login function const login = async (email: string, password: string) => { setIsLoading(true) try { // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Find user by email const foundUser = MOCK_USERS.find((u) => u.email === email) if (!foundUser || foundUser.password !== password) { throw new Error("Invalid email or password") } // Create user object (excluding password) const { password: _, ...userWithoutPassword } = foundUser setUser(userWithoutPassword) // Store user in localStorage localStorage.setItem("chatbot-user", JSON.stringify(userWithoutPassword)) toast({ title: "Login successful", description: `Welcome back, ${foundUser.name}!`, }) // Redirect to chat page router.push("/chat") } catch (error) { console.error("Login error:", error) toast({ title: "Login failed", description: error instanceof Error ? error.message : "Unknown error occurred", variant: "destructive", }) } finally { setIsLoading(false) } } // Signup function const signup = async (name: string, email: string, password: string) => { setIsLoading(true) try { // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Check if email already exists if (MOCK_USERS.some((u) => u.email === email)) { throw new Error("Email already in use") } // Create new user const newUser = { id: (MOCK_USERS.length + 1).toString(), name, email, avatar: "/placeholder.svg?height=100&width=100", } // In a real app, you would save this to your database // For this demo, we'll just set the user as logged in setUser(newUser) // Store user in localStorage localStorage.setItem("chatbot-user", JSON.stringify(newUser)) toast({ title: "Account created", description: `Welcome, ${name}!`, }) // Redirect to chat page router.push("/chat") } catch (error) { console.error("Signup error:", error) toast({ title: "Signup failed", description: error instanceof Error ? error.message : "Unknown error occurred", variant: "destructive", }) } finally { setIsLoading(false) } } // Logout function const logout = () => { setUser(null) localStorage.removeItem("chatbot-user") router.push("/") toast({ title: "Logged out", description: "You have been successfully logged out", }) } return {children} } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="context/theme-context.tsx" "use client" import { createContext, useContext, useState, type ReactNode } from "react" type ThemeType = "dust-black" | "ocean-blue" | "majestic-purple" | "playful-yellow" interface ThemeColors { bgColor: string headerColor: string chatBgColor: string inputBgColor: string settingsBgColor: string textColor: string userTextColor: string botTextColor: string userBubbleColor: string botBubbleColor: string buttonColor: string iconColor: string inputTextColor: string loaderColor: string visualizerColor: string cardBgColor: string } const themeColors: Record = { "dust-black": { bgColor: "bg-gray-900", headerColor: "bg-gray-800", chatBgColor: "bg-gray-900", inputBgColor: "bg-gray-800", settingsBgColor: "bg-gray-800", textColor: "text-gray-100", userTextColor: "text-gray-100", botTextColor: "text-gray-100", userBubbleColor: "bg-gray-700", botBubbleColor: "bg-gray-800", buttonColor: "bg-gray-700 hover:bg-gray-600", iconColor: "text-gray-300 hover:text-gray-100", inputTextColor: "text-gray-100", loaderColor: "gray-400", visualizerColor: "gray-500", cardBgColor: "bg-gray-800", }, "ocean-blue": { bgColor: "bg-blue-900", headerColor: "bg-blue-800", chatBgColor: "bg-blue-50", inputBgColor: "bg-white", settingsBgColor: "bg-blue-50", textColor: "text-blue-900", userTextColor: "text-white", botTextColor: "text-blue-900", userBubbleColor: "bg-blue-600", botBubbleColor: "bg-white", buttonColor: "bg-blue-600 hover:bg-blue-700", iconColor: "text-blue-600 hover:text-blue-800", inputTextColor: "text-blue-900", loaderColor: "blue-600", visualizerColor: "blue-500", cardBgColor: "bg-white", }, "majestic-purple": { bgColor: "bg-purple-900", headerColor: "bg-purple-800", chatBgColor: "bg-purple-50", inputBgColor: "bg-white", settingsBgColor: "bg-purple-50", textColor: "text-purple-900", userTextColor: "text-white", botTextColor: "text-purple-900", userBubbleColor: "bg-purple-600", botBubbleColor: "bg-white", buttonColor: "bg-purple-600 hover:bg-purple-700", iconColor: "text-purple-600 hover:text-purple-800", inputTextColor: "text-purple-900", loaderColor: "purple-600", visualizerColor: "purple-500", cardBgColor: "bg-white", }, "playful-yellow": { bgColor: "bg-yellow-100", headerColor: "bg-yellow-300", chatBgColor: "bg-white", inputBgColor: "bg-yellow-50", settingsBgColor: "bg-yellow-50", textColor: "text-yellow-900", userTextColor: "text-yellow-900", botTextColor: "text-yellow-900", userBubbleColor: "bg-yellow-300", botBubbleColor: "bg-white border border-yellow-200", buttonColor: "bg-yellow-500 hover:bg-yellow-600", iconColor: "text-yellow-700 hover:text-yellow-900", inputTextColor: "text-yellow-900", loaderColor: "yellow-500", visualizerColor: "yellow-400", cardBgColor: "bg-white", }, } interface ThemeContextType { theme: ThemeColors themeType: ThemeType setThemeType: (theme: ThemeType) => void } const ThemeContext = createContext(undefined) export function ThemeProvider({ children }: { children: ReactNode }) { const [themeType, setThemeType] = useState("dust-black") return ( {children} ) } export function useTheme() { const context = useContext(ThemeContext) if (context === undefined) { throw new Error("useTheme must be used within a ThemeProvider") } return context } [V0_FILE]typescriptreact:file="components/chat-interface.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useRef, useEffect } from "react" import { useToast } from "@/components/ui/use-toast" import { useTheme } from "@/context/theme-context" import { useAuth } from "@/context/auth-context" import ChatHeader from "./chat-header" import ChatMessages from "./chat-messages" import ChatInput from "./chat-input" import SettingsPanel from "./settings-panel" import type { Message } from "@/types/chat" import type { AIParameters } from "@/types/settings" export default function ChatInterface() { const [messages, setMessages] = useState([ { id: "1", role: "assistant", content: "Hello! I'm your AI assistant. How can I help you today?", timestamp: new Date(), }, ]) const [isLoading, setIsLoading] = useState(false) const [isSettingsOpen, setIsSettingsOpen] = useState(false) const [aiParameters, setAIParameters] = useState({ mirostat: 0, mirostat_eta: 0.1, mirostat_tau: 5.0, num_ctx: 2048, repeat_last_n: 64, repeat_penalty: 1.1, temperature: 0.8, seed: 0, stop: "AI assistant:", num_predict: -1, top_k: 40, top_p: 0.9, min_p: 0.05, }) const { theme } = useTheme() const { user } = useAuth() const { toast } = useToast() const messagesEndRef = useRef(null) useEffect(() => { scrollToBottom() }, [messages]) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } const handleSendMessage = async (content: string, isVoice = false) => { if (!content.trim()) return // Add user message const userMessage: Message = { id: Date.now().toString(), role: "user", content, timestamp: new Date(), isVoice, user: { name: user?.name || "User", avatar: user?.avatar || "/placeholder.svg?height=40&width=40", }, } setMessages((prev) => [...prev, userMessage]) setIsLoading(true) try { // In a real app, this would be an API call to your Ollama backend // with the aiParameters included in the request await new Promise((resolve) => setTimeout(resolve, 1000)) const botResponse: Message = { id: (Date.now() + 1).toString(), role: "assistant", content: `This is a simulated response. In a real implementation, this would come from your Ollama model with the parameters you've set.`, timestamp: new Date(), } setMessages((prev) => [...prev, botResponse]) } catch (error) { toast({ title: "Error", description: "Failed to get response from AI", variant: "destructive", }) } finally { setIsLoading(false) } } const toggleSettings = () => { setIsSettingsOpen(!isSettingsOpen) } const updateAIParameters = (newParams: Partial) => { setAIParameters((prev) => ({ ...prev, ...newParams })) toast({ title: "Settings Updated", description: "AI parameters have been updated successfully", }) } return (

{isSettingsOpen && ( )}

) } [V0_FILE]typescriptreact:file="components/chat-header.tsx" isQuickEdit="true" "use client"