[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "WhatsApp Clone", description: "A WhatsApp-like chat application built with Next.js and Supabase", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="hooks/use-mobile.ts" "use client" import { useEffect, useState } from "react" export function useIsMobile() { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkIfMobile = () => { setIsMobile(window.innerWidth < 768) } // Initial check checkIfMobile() // Add event listener window.addEventListener("resize", checkIfMobile) // Clean up return () => { window.removeEventListener("resize", checkIfMobile) } }, []) return isMobile } [V0_FILE]typescriptreact:file="components/supabase-error.tsx" "use client" import { AlertCircle } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Button } from "@/components/ui/button" export function SupabaseError() { return (

Supabase Configuration Error

The Supabase client could not be initialized. Please check your environment variables:

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY

Make sure these are correctly set in your .env.local file or in your deployment environment.

) } [V0_FILE]plaintext:file=".env.example" # Supabase configuration NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here [V0_FILE]typescriptreact:file="lib/supabase.ts" import { createClient } from "@supabase/supabase-js" // Get the environment variables const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY // Create a function to get the Supabase client export const getSupabaseClient = () => { if (!supabaseUrl || !supabaseAnonKey) { throw new Error("Supabase URL and anon key are required. Please check your environment variables.") } return createClient(supabaseUrl, supabaseAnonKey) } // Create the client export const supabase = getSupabaseClient() [V0_FILE]typescriptreact:file="lib/types.ts" export interface Session { id: string name?: string last_message_at?: string } export interface MessageContent { type: "human" | "ai" | string content: string additional_kwargs: Record response_metadata: Record } export interface ChatMessage { id: string session_id: string created_at?: string message: MessageContent } [V0_FILE]typescriptreact:file="components/message-bubble.tsx" import { cn } from "@/lib/utils" import type { ChatMessage } from "@/lib/types" import { format } from "date-fns" interface MessageBubbleProps { message: ChatMessage } export function MessageBubble({ message }: MessageBubbleProps) { const isHuman = message.message.type === "human" return (

{message.message.content}

{message.created_at ? format(new Date(message.created_at), "HH:mm") : ""}

) } [V0_FILE]typescriptreact:file="hooks/use-chat-store.ts" "use client"; import { create } from "zustand"; import { supabase } from "@/lib/supabase"; import type { ChatMessage, MessageContent, Session } from "@/lib/types"; interface ChatStore { sessions: Session[]; messages: ChatMessage[]; selectedSessionId: string | null; isLoading: boolean; error: string | null; databaseConnected: boolean; fetchSessions: () => Promise; fetchMessages: (sessionId: string) => Promise; selectSession: (sessionId: string) => void; addMessage: (content: string) => void; createNewSession: () => void; clearError: () => void; } export const useChatStore = create((set, get) => ({ sessions: [], messages: [], selectedSessionId: null, isLoading: false, error: null, databaseConnected: false, clearError: () => set({ error: null }), fetchSessions: async () => { set({ isLoading: true, error: null }); try { // First try to fetch from the sessions table let { data: sessions, error: sessionsError } = await supabase .from("n8n_chat_histories") .select("*") .order("id", { ascending: false }); console.log("Fetched sessions:", sessions); set({ sessions: sessions || [], databaseConnected: true, }); // Select the most recent session if none is selected if (sessions && sessions.length > 0 && !get().selectedSessionId) { get().selectSession(sessions[0].session_id); } else if ( (!sessions || sessions.length === 0) && !get().selectedSessionId ) { // Create a default session if none exists get().createNewSession(); } } catch (error) { console.error("Error fetching sessions:", error); set({ ...get(), databaseConnected: false, error: error instanceof Error ? error.message : "Failed to fetch sessions", }); } finally { set({ isLoading: false }); } }, fetchMessages: async (sessionId: string) => { set({ isLoading: true, error: null }); try { // Only try to fetch messages if we're connected to the database if (get().databaseConnected) { const { data, error } = await supabase .from("chat_messages") .select("*") .eq("session_id", sessionId) .order("created_at", { ascending: true }); if (error) { console.error("Error fetching messages:", error); set({ messages: [] }); } else { set({ messages: data as ChatMessage[] }); } } else { // If not connected to database, just use an empty array set({ messages: [] }); } } catch (error) { console.error("Error fetching messages:", error); set({ messages: [], }); } finally { set({ isLoading: false }); } }, selectSession: (sessionId: string) => { set({ selectedSessionId: sessionId }); get().fetchMessages(sessionId); }, createNewSession: () => { const newSessionId = crypto.randomUUID(); set((state) => ({ sessions: [ { session_id: newSessionId, name: `New Chat ${new Date().toLocaleTimeString()}`, last_message_at: new Date().toISOString(), }, ...state.sessions, ], selectedSessionId: newSessionId, messages: [], })); }, addMessage: (content: string) => { if (!content.trim()) return; const messageContent: MessageContent = { type: "human", content: content, additional_kwargs: {}, response_metadata: {}, }; const newMessage: ChatMessage = { id: crypto.randomUUID(), session_id: get().selectedSessionId || "", created_at: new Date().toISOString(), message: messageContent, }; set((state) => ({ messages: [...state.messages, newMessage], })); }, })); [V0_FILE]typescriptreact:file="components/sidebar.tsx" "use client" import { useEffect } from "react" import { useChatStore } from "@/hooks/use-chat-store" import { formatDistanceToNow } from "date-fns" import { MessageSquare, Plus, AlertTriangle } from "lucide-react" import { Sidebar, SidebarContent, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, } from "@/components/ui/sidebar" import { Button } from "@/components/ui/button" import { DbSchemaHelper } from "@/components/db-schema-helper" export function ChatSidebar() { const { sessions, selectedSessionId, fetchSessions, selectSession, createNewSession, error, clearError, databaseConnected, } = useChatStore() useEffect(() => { fetchSessions() }, [fetchSessions]) return (

Chats

{error && (

Database Connection Issue

{!databaseConnected ? "Using local mode. Your messages won't be saved to the database." : "There was an issue connecting to the database."}

)} {sessions.map((session) => ( selectSession(session.id)} className="flex items-center gap-3" >

{session.name || `Session ${session.id.substring(0, 8)}`} {session.last_message_at && ( {formatDistanceToNow(new Date(session.last_message_at), { addSuffix: true })} )}

))} {sessions.length === 0 && !error && (

No sessions found

)} ) } [V0_FILE]typescriptreact:file="components/db-schema-helper.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DialogClose, } from "@/components/ui/dialog" import { AlertCircle, Database, Copy, Check } from "lucide-react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export function DbSchemaHelper() { const [isOpen, setIsOpen] = useState(false) const [copied, setCopied] = useState(false) const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text) setCopied(true) setTimeout(() => setCopied(false), 2000) } const createTablesSQL = `-- Create the sessions table CREATE TABLE public.sessions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name TEXT, last_message_at TIMESTAMP WITH TIME ZONE DEFAULT now() NOT NULL ); -- Create the chat_messages table CREATE TABLE public.chat_messages ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), session_id UUID NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT now() NOT NULL, message JSONB NOT NULL ); -- Add some sample data INSERT INTO public.sessions (id, name, last_message_at) VALUES ('11111111-1111-1111-1111-111111111111', 'General Chat', now()), ('22222222-2222-2222-2222-222222222222', 'Support', now() - interval '1 day'); INSERT INTO public.chat_messages (session_id, message) VALUES ('11111111-1111-1111-1111-111111111111', '{"type": "human", "content": "Hello, how are you?", "additional_kwargs": {}, "response_metadata": {}}'), ('11111111-1111-1111-1111-111111111111', '{"type": "ai", "content": "I''m doing well, thank you! How can I help you today?", "additional_kwargs": {}, "response_metadata": {}}'), ('22222222-2222-2222-2222-222222222222', '{"type": "human", "content": "I need help with my account", "additional_kwargs": {}, "response_metadata": {}}'), ('22222222-2222-2222-2222-222222222222', '{"type": "ai", "content": "I''d be happy to help with your account. What specific issue are you experiencing?", "additional_kwargs": {}, "response_metadata": {}}');` return ( ) } [V0_FILE]typescriptreact:file="components/chat-panel.tsx" "use client" import { useEffect, useRef } from "react" import { useChatStore } from "@/hooks/use-chat-store" import { MessageBubble } from "@/components/message-bubble" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Send, AlertTriangle } from "lucide-react" import { useForm } from "react-hook-form" interface ChatFormValues { message: string } export function ChatPanel() { const { messages, selectedSessionId, addMessage, databaseConnected } = useChatStore() const messagesEndRef = useRef(null) const { register, handleSubmit, reset } = useForm({ defaultValues: { message: "", }, }) const onSubmit = (data: ChatFormValues) => { if (!data.message.trim()) return addMessage(data.message) reset() } useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) if (!selectedSessionId) { return (

Select a chat to start messaging

) } return (

{selectedSessionId && `Session ${selectedSessionId.substring(0, 8)}`}

{!databaseConnected && (

Local mode active. Messages won't be saved to the database.

)}

{messages.length === 0 ? (

Start a new conversation

Type a message below to start chatting

) : ( messages.map((message) => ) )}

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useEffect, useState } from "react" import { ChatSidebar } from "@/components/sidebar" import { ChatPanel } from "@/components/chat-panel" import { SidebarProvider } from "@/components/ui/sidebar" import { useIsMobile } from "@/hooks/use-mobile" import { SupabaseError } from "@/components/supabase-error" import { supabase } from "@/lib/supabase" export default function Home() { const isMobile = useIsMobile() const [isSupabaseConfigured, setIsSupabaseConfigured] = useState(null) useEffect(() => { // Check if Supabase is configured const checkSupabase = async () => { try { // Just check if we can create a client if (supabase) { setIsSupabaseConfigured(true) } else { setIsSupabaseConfigured(false) } } catch (error) { console.error("Supabase configuration error:", error) setIsSupabaseConfigured(false) } } checkSupabase() }, []) // Show loading state while checking Supabase configuration if (isSupabaseConfigured === null) { return (

) } // Show error if Supabase is not configured at all if (isSupabaseConfigured === false) { return } return (

) }

Chats

Required Tables

Common Issues

Environment Variables

{selectedSessionId && `Session ${selectedSessionId.substring(0, 8)}`}

Start a new conversation