@@ -12,17 +19,29 @@ export function Header() {
StudyAI
-
);
-}
+};
+
+export { Sidebar };
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
new file mode 100644
index 0000000..edc1736
--- /dev/null
+++ b/src/contexts/AuthContext.tsx
@@ -0,0 +1,72 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { Session, User, AuthError } from '@supabase/supabase-js';
+import { auth } from '../lib/supabase';
+
+interface AuthContextType {
+ session: Session | null;
+ user: User | null;
+ loading: boolean;
+ signIn: (email: string, password: string) => Promise<{ error: AuthError | null }>;
+ signUp: (email: string, password: string) => Promise<{ error: AuthError | null }>;
+ signOut: () => Promise<{ error: AuthError | null }>;
+}
+
+const AuthContext = createContext(undefined);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+ const [session, setSession] = useState(null);
+ const [user, setUser] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ // Get initial session
+ auth.getSession().then(({ session: initialSession }) => {
+ setSession(initialSession);
+ setUser(initialSession?.user ?? null);
+ setLoading(false);
+ });
+
+ // Listen for auth changes
+ const { data: { subscription } } = auth.onAuthStateChange((_event, session) => {
+ setSession(session);
+ setUser(session?.user ?? null);
+ setLoading(false);
+ });
+
+ return () => {
+ subscription.unsubscribe();
+ };
+ }, []);
+
+ const value = {
+ session,
+ user,
+ loading,
+ signIn: async (email: string, password: string) => {
+ const { error } = await auth.signIn(email, password);
+ return { error };
+ },
+ signUp: async (email: string, password: string) => {
+ const { error } = await auth.signUp(email, password);
+ return { error };
+ },
+ signOut: async () => {
+ const { error } = await auth.signOut();
+ return { error };
+ },
+ };
+
+ return (
+
+ {!loading && children}
+
+ );
+}
+
+export function useAuth() {
+ const context = useContext(AuthContext);
+ if (context === undefined) {
+ throw new Error('useAuth must be used within an AuthProvider');
+ }
+ return context;
+}
diff --git a/src/lib/chat-service.ts b/src/lib/chat-service.ts
new file mode 100644
index 0000000..c018361
--- /dev/null
+++ b/src/lib/chat-service.ts
@@ -0,0 +1,143 @@
+import { supabase } from './supabase';
+import type { ChatInstance, ChatMessage } from '../types/supabase';
+
+export const chatService = {
+ async createChatInstance(userId: string, title: string): Promise {
+ const { data, error } = await supabase
+ .from('chat_instances')
+ .insert({
+ user_id: userId,
+ title,
+ last_message_at: new Date().toISOString(),
+ })
+ .select()
+ .single();
+
+ if (error) {
+ console.error('Error creating chat instance:', error);
+ return null;
+ }
+
+ return data;
+ },
+
+ async getChatInstance(chatId: string): Promise {
+ const { data, error } = await supabase
+ .from('chat_instances')
+ .select()
+ .eq('id', chatId)
+ .single();
+
+ if (error) {
+ console.error('Error fetching chat instance:', error);
+ return null;
+ }
+
+ return data;
+ },
+
+ async updateChatTitle(chatId: string, title: string): Promise {
+ const { error } = await supabase
+ .from('chat_instances')
+ .update({ title })
+ .eq('id', chatId);
+
+ if (error) {
+ console.error('Error updating chat title:', error);
+ return false;
+ }
+
+ return true;
+ },
+
+ async getChatInstances(userId: string): Promise {
+ const { data, error } = await supabase
+ .from('chat_instances')
+ .select()
+ .eq('user_id', userId)
+ .order('last_message_at', { ascending: false });
+
+ if (error) {
+ console.error('Error fetching chat instances:', error);
+ return [];
+ }
+
+ return data;
+ },
+
+ async getChatMessages(chatId: string): Promise {
+ const { data, error } = await supabase
+ .from('chat_messages')
+ .select()
+ .eq('chat_id', chatId)
+ .order('created_at', { ascending: true });
+
+ if (error) {
+ console.error('Error fetching chat messages:', error);
+ return [];
+ }
+
+ return data;
+ },
+
+ async addMessage(
+ chatId: string,
+ content: string,
+ role: 'user' | 'assistant',
+ metadata?: ChatMessage['metadata']
+ ): Promise {
+ const { data: message, error: messageError } = await supabase
+ .from('chat_messages')
+ .insert({
+ chat_id: chatId,
+ content,
+ role,
+ metadata,
+ })
+ .select()
+ .single();
+
+ if (messageError) {
+ console.error('Error adding message:', messageError);
+ return null;
+ }
+
+ // Update last_message_at in chat instance
+ const { error: updateError } = await supabase
+ .from('chat_instances')
+ .update({ last_message_at: new Date().toISOString() })
+ .eq('id', chatId);
+
+ if (updateError) {
+ console.error('Error updating chat instance:', updateError);
+ }
+
+ return message;
+ },
+
+ async deleteChatInstance(chatId: string): Promise {
+ // Delete all messages first
+ const { error: messagesError } = await supabase
+ .from('chat_messages')
+ .delete()
+ .eq('chat_id', chatId);
+
+ if (messagesError) {
+ console.error('Error deleting chat messages:', messagesError);
+ return false;
+ }
+
+ // Then delete the chat instance
+ const { error: instanceError } = await supabase
+ .from('chat_instances')
+ .delete()
+ .eq('id', chatId);
+
+ if (instanceError) {
+ console.error('Error deleting chat instance:', instanceError);
+ return false;
+ }
+
+ return true;
+ },
+};
diff --git a/src/lib/supabase.ts b/src/lib/supabase.ts
new file mode 100644
index 0000000..d62c64a
--- /dev/null
+++ b/src/lib/supabase.ts
@@ -0,0 +1,44 @@
+import { createClient, AuthError, Session, AuthResponse } from '@supabase/supabase-js';
+import type { Database } from '../types/supabase';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseAnonKey) {
+ throw new Error('Missing Supabase environment variables');
+}
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);
+
+// Auth helper functions
+export const auth = {
+ signUp: async (email: string, password: string): Promise<{ data: AuthResponse | null; error: AuthError | null }> => {
+ const { data, error } = await supabase.auth.signUp({
+ email,
+ password,
+ });
+ return { data: data as AuthResponse | null, error };
+ },
+
+ signIn: async (email: string, password: string): Promise<{ data: AuthResponse | null; error: AuthError | null }> => {
+ const { data, error } = await supabase.auth.signInWithPassword({
+ email,
+ password,
+ });
+ return { data: data as AuthResponse | null, error };
+ },
+
+ signOut: async (): Promise<{ error: AuthError | null }> => {
+ const { error } = await supabase.auth.signOut();
+ return { error };
+ },
+
+ getSession: async (): Promise<{ session: Session | null; error: AuthError | null }> => {
+ const { data: { session }, error } = await supabase.auth.getSession();
+ return { session, error };
+ },
+
+ onAuthStateChange: (callback: (event: string, session: Session | null) => void) => {
+ return supabase.auth.onAuthStateChange(callback);
+ },
+};
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 8d3f599..cfdd69b 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,69 +1,53 @@
import React from 'react';
-import { ArrowRight, Brain, Sparkles, Users } from 'lucide-react';
+import { ArrowRight, Brain, Sparkles, Users, BookOpen } from 'lucide-react';
import { Link } from 'react-router-dom';
import { Button } from '../components/ui/Button';
import { Header } from '../components/layout/Header';
function Home() {
return (
-
-
+
-
-
-
+
-
- - Your AI Study Buddy -
-- Get instant help with your coursework using advanced AI. Upload your materials, - ask questions, and receive detailed explanations. -
-
-
-
-
-
-
+
+
-
- (null);
+ const [message, setMessage] = useState(
+ (location.state as LocationState)?.message || null
+ );
+ const [formData, setFormData] = useState({
+ email: '',
+ password: '',
+ });
+
+ const from = (location.state as LocationState)?.from || '/dashboard';
+
+ const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
- // Handle login
+ setError(null);
+ setMessage(null);
+ setLoading(true);
+
+ try {
+ const { error } = await signIn(formData.email, formData.password);
+ if (error) throw error;
+ navigate(from, { replace: true });
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Failed to sign in');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleChange = (e: React.ChangeEvent) => {
+ setFormData(prev => ({
+ ...prev,
+ [e.target.name]: e.target.value
+ }));
};
return (
-
+
+
+
-
);
diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
index ca118f3..e745e80 100644
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@@ -1,76 +1,116 @@
import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
import { Button } from '../../components/ui/Button';
+import { useAuth } from '../../contexts/AuthContext';
-function Login() {
- const [email, setEmail] = useState('');
- const [password, setPassword] = useState('');
+interface LocationState {
+ from?: string;
+ message?: string;
+}
- const handleSubmit = (e: React.FormEvent) => {
+export default function Login() {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const { signIn } = useAuth();
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useStateWhy Choose StudyAI?
-
- {[
- {
- icon: Brain,
- title: 'Smart Learning',
- description:
- 'Our AI understands your questions and provides detailed, accurate answers.',
- },
- {
- icon: Sparkles,
- title: 'Instant Help',
- description:
- 'Get immediate assistance with your coursework, available 24/7.',
- },
- {
- icon: Users,
- title: 'Personalized Experience',
- description:
- 'The more you use StudyAI, the better it understands your learning style.',
- },
- ].map((feature) => (
-
+
-
- ))}
+ {feature.title}
-{feature.description}
-
+
+
-
+
+
+
- + Learn Smarter with AI +
++ Enhance your learning experience with personalized AI assistance. + Ask questions, get instant feedback, and track your progress. +
+
+
+
+
+
+
+
+
-
- (null);
+ const [formData, setFormData] = useState({
+ email: '',
+ password: '',
+ confirmPassword: '',
+ });
- const handleSubmit = (e: React.FormEvent) => {
+ const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
- // Handle signup
+ setError(null);
+
+ if (formData.password !== formData.confirmPassword) {
+ setError("Passwords don't match");
+ return;
+ }
+
+ setLoading(true);
+
+ try {
+ const { error } = await signUp(formData.email, formData.password);
+ if (error) throw error;
+
+ // Redirect to login page with a success message
+ navigate('/auth/login', {
+ state: { message: 'Please check your email to confirm your account' }
+ });
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Failed to create account');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleChange = (e: React.ChangeEvent) => {
+ setFormData(prev => ({
+ ...prev,
+ [e.target.name]: e.target.value
+ }));
};
return (
-
-
-
-
- - Sign in to your account -
-- Don't have an account?{' '} - - Sign up - -
+
+
);
}
-
-export default Login;
diff --git a/src/pages/auth/Signup.tsx b/src/pages/auth/Signup.tsx
index 5d1c0f2..1a57eff 100644
--- a/src/pages/auth/Signup.tsx
+++ b/src/pages/auth/Signup.tsx
@@ -1,92 +1,125 @@
import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
import { Button } from '../../components/ui/Button';
+import { useAuth } from '../../contexts/AuthContext';
-function Signup() {
- const [email, setEmail] = useState('');
- const [password, setPassword] = useState('');
- const [name, setName] = useState('');
+export default function Signup() {
+ const navigate = useNavigate();
+ const { signUp } = useAuth();
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState
+
+
+ {message && (
+ Welcome Back
+Enter your credentials to access your account
+ {message}
+
+ )}
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+ + Don't have an account?{' '} + + Sign up + +
-
- ([]);
+ const [error, setError] = useState(null);
+ const [chat, setChat] = useState(null);
+ const [isNewChat, setIsNewChat] = useState(false);
+ const [hasExistingChats, setHasExistingChats] = useState(null);
- const handleSubmit = (e: React.FormEvent) => {
- e.preventDefault();
- // Handle question submission
+ // Check for existing chats and redirect to most recent if on base path
+ useEffect(() => {
+ if (!user) return;
+
+ const checkExistingChats = async () => {
+ try {
+ const chats = await chatService.getChatInstances(user.id);
+ const hasChats = chats.length > 0;
+ setHasExistingChats(hasChats);
+
+ // If we're on the base ask page and there are existing chats,
+ // redirect to the most recent one
+ if (hasChats && !chatId && !isNewChat) {
+ const mostRecentChat = chats[0]; // Chats are already sorted by last_message_at desc
+ navigate(`/dashboard/ask/${mostRecentChat.id}`);
+ }
+ } catch (err) {
+ console.error('Error checking existing chats:', err);
+ setHasExistingChats(false);
+ }
+ };
+
+ checkExistingChats();
+ }, [user, chatId, navigate, isNewChat]);
+
+ useEffect(() => {
+ if (!user || !chatId) return;
+
+ const loadChat = async () => {
+ try {
+ // Don't try to load chat if we're using a temporary ID
+ if (chatId.startsWith('temp-')) {
+ return;
+ }
+
+ // Load chat instance
+ const chatInstance = await chatService.getChatInstance(chatId);
+ if (!chatInstance) {
+ setError('Chat not found');
+ return;
+ }
+ setChat(chatInstance);
+
+ // Load messages
+ const messages = await chatService.getChatMessages(chatId);
+ setMessages(messages);
+ } catch (err) {
+ setError('Failed to load chat');
+ console.error('Error loading chat:', err);
+ }
+ };
+
+ loadChat();
+ }, [chatId, user]);
+
+ const handleNewChat = () => {
+ setIsNewChat(true);
+ setChat(null);
+ setMessages([]);
+ setError(null);
+ // Generate a temporary ID for the new chat
+ const tempId = 'temp-' + Date.now();
+ navigate(`/dashboard/ask/${tempId}`);
};
+ const generateChatTitle = (message: string) => {
+ // Split into words and take first 5
+ const words = message.split(/\s+/).slice(0, 5);
+
+ // Join words and add ellipsis if we truncated
+ const title = words.join(' ');
+ return words.length < message.split(/\s+/).length ? `${title}...` : title;
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!question.trim() || loading || !user) return;
+
+ setLoading(true);
+ setError(null);
+
+ try {
+ let currentChatId: string;
+
+ // If this is a new chat, create it first with the title from the first message
+ if (isNewChat) {
+ const title = generateChatTitle(question.trim());
+ const newChat = await chatService.createChatInstance(user.id, title);
+ if (!newChat) {
+ throw new Error('Failed to create chat instance');
+ }
+ currentChatId = newChat.id;
+ setChat(newChat);
+ setIsNewChat(false);
+ // Update URL with the real chat ID
+ navigate(`/dashboard/ask/${newChat.id}`, { replace: true });
+ } else if (!chatId) {
+ throw new Error('No chat ID available');
+ } else {
+ currentChatId = chatId;
+ }
+
+ // Add user message
+ const userMessage = await chatService.addMessage(currentChatId, question.trim(), 'user');
+ if (userMessage) {
+ setMessages(prev => [...prev, userMessage]);
+ }
+
+ setQuestion('');
+
+ // TODO: Integrate with Make.com for AI response
+ // For now, using a placeholder response
+ const aiMessage = await chatService.addMessage(
+ currentChatId,
+ 'This is a placeholder response. AI integration coming soon!',
+ 'assistant',
+ { make_response_id: 'placeholder' }
+ );
+ if (aiMessage) {
+ setMessages(prev => [...prev, aiMessage]);
+ }
+ } catch (err) {
+ setError('Failed to send message');
+ console.error('Failed to process message:', err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const clearChat = async () => {
+ if (!chatId || isNewChat) return;
+
+ try {
+ setError(null);
+ const success = await chatService.deleteChatInstance(chatId);
+ if (success) {
+ // After deleting, check if there are other chats to navigate to
+ const remainingChats = await chatService.getChatInstances(user!.id);
+ if (remainingChats.length > 0) {
+ navigate(`/dashboard/ask/${remainingChats[0].id}`);
+ } else {
+ navigate('/dashboard/ask');
+ }
+ }
+ } catch (err) {
+ setError('Failed to clear chat');
+ console.error('Error clearing chat:', err);
+ }
+ };
+
+ // Show loading state while checking for existing chats
+ if (hasExistingChats === null) {
+ return (
+
-
-
-
- - Create your account -
-- Already have an account?{' '} - - Sign in - -
+
+
);
}
-
-export default Signup;
diff --git a/src/pages/dashboard/ask.tsx b/src/pages/dashboard/ask.tsx
index 60f801d..8d0aee8 100644
--- a/src/pages/dashboard/ask.tsx
+++ b/src/pages/dashboard/ask.tsx
@@ -1,53 +1,291 @@
-import React, { useState } from 'react';
-import { Send, Upload } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { Send, Loader2, X, History, MessageSquarePlus, AlertCircle } from 'lucide-react';
+import { Link, useParams, useNavigate } from 'react-router-dom';
import { Button } from '../../components/ui/Button';
+import { cn } from '../../lib/utils';
+import { useAuth } from '../../contexts/AuthContext';
+import { chatService } from '../../lib/chat-service';
+import type { ChatMessage, ChatInstance } from '../../types/supabase';
-function AskQuestion() {
+export default function AskQuestion() {
+ const { chatId } = useParams();
+ const navigate = useNavigate();
+ const { user } = useAuth();
const [question, setQuestion] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [messages, setMessages] = useState
+
+
+ {error && (
+ Create an Account
+Enter your details to create your account
+ {error}
+
+ )}
+
+
+
+ + Already have an account?{' '} + + Sign in + +
+
+ );
+ }
+
return (
-
-