mirror of
https://github.com/harivansh-afk/RAG-ui.git
synced 2026-04-15 06:04:43 +00:00
updated UI
This commit is contained in:
parent
b06ae009cc
commit
171fe6e04f
12 changed files with 653 additions and 385 deletions
|
|
@ -84,7 +84,7 @@ export function Message({ message }: MessageProps) {
|
|||
>
|
||||
{message.role === 'assistant' && (
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback className="bg-gradient-to-br from-blue-400 to-blue-600 text-white text-xs font-medium">
|
||||
<AvatarFallback className="bg-gradient-to-br from-purple-300 to-purple-500 text-white text-xs font-medium">
|
||||
AI
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
|
@ -95,7 +95,7 @@ export function Message({ message }: MessageProps) {
|
|||
className={cn(
|
||||
'relative rounded-2xl px-4 py-3 text-sm',
|
||||
message.role === 'user'
|
||||
? 'bg-blue-500 text-white'
|
||||
? 'bg-gradient-to-r from-purple-400 to-purple-500 text-white'
|
||||
: 'bg-muted/50 shadow-sm border border-border/50'
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@ import { Sidebar } from '../Sidebar/index';
|
|||
|
||||
const DashboardLayout = () => {
|
||||
return (
|
||||
<div className="flex h-screen flex-col overflow-hidden">
|
||||
<div className="flex h-screen flex-col overflow-hidden bg-secondary/20">
|
||||
<Header />
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<div className="flex flex-1 overflow-hidden gap-6 p-6 pt-24">
|
||||
<Sidebar />
|
||||
<main className="flex-1 overflow-y-auto bg-muted/50 p-6">
|
||||
<Outlet />
|
||||
<main className="flex-1 overflow-y-auto rounded-2xl bg-background shadow-sm border">
|
||||
<div className="p-6">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,35 +12,42 @@ const Header = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<header className="border-b bg-background">
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
|
||||
<Link to="/" className="flex items-center gap-2 text-xl font-bold">
|
||||
<BookOpen className="h-6 w-6 text-foreground" />
|
||||
<span>StudyAI</span>
|
||||
</Link>
|
||||
<nav className="flex items-center gap-4">
|
||||
{session ? (
|
||||
<>
|
||||
<Link to="/dashboard">
|
||||
<Button variant="ghost">Dashboard</Button>
|
||||
</Link>
|
||||
<Button variant="ghost" onClick={handleSignOut}>
|
||||
Sign out
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/auth/login">
|
||||
<Button variant="ghost">Log in</Button>
|
||||
</Link>
|
||||
<Link to="/auth/signup">
|
||||
<Button>Sign up</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div className="fixed w-full top-0 z-50">
|
||||
<div className="absolute inset-x-0 -top-4 h-24 bg-gradient-to-b from-background/80 via-background/50 to-background/0 pointer-events-none" />
|
||||
<header className="mt-4 mx-4">
|
||||
<div className="rounded-2xl bg-background/60 backdrop-blur-xl backdrop-saturate-150 shadow-sm shadow-black/5">
|
||||
<div className="h-14 px-4 flex items-center justify-between max-w-7xl mx-auto">
|
||||
<Link to="/" className="flex items-center gap-2 text-xl font-bold">
|
||||
<div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<BookOpen className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<span className="gradient-text">RAG AI</span>
|
||||
</Link>
|
||||
<nav className="flex items-center gap-4">
|
||||
{session ? (
|
||||
<>
|
||||
<Link to="/dashboard">
|
||||
<Button variant="ghost" className="rounded-full">Dashboard</Button>
|
||||
</Link>
|
||||
<Button variant="outline" className="rounded-full" onClick={handleSignOut}>
|
||||
Sign out
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/auth/login">
|
||||
<Button variant="ghost" className="rounded-full">Log in</Button>
|
||||
</Link>
|
||||
<Link to="/auth/signup">
|
||||
<Button className="rounded-full px-8 bg-primary hover:bg-primary/90">Sign up</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const sidebarItems = [
|
|||
icon: MessageSquarePlus,
|
||||
label: 'Ask a Question',
|
||||
path: '/dashboard/ask'
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: History,
|
||||
label: 'Study History',
|
||||
|
|
@ -36,35 +36,42 @@ const Sidebar = () => {
|
|||
|
||||
const isActive = (path: string) => {
|
||||
if (path === '/dashboard/ask') {
|
||||
return location.pathname === '/dashboard' || location.pathname === path;
|
||||
return location.pathname.startsWith('/dashboard/ask') || location.pathname === '/dashboard';
|
||||
}
|
||||
return location.pathname === path;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-64 flex-col border-r bg-background">
|
||||
<nav className="flex-1 space-y-1 px-2 py-4">
|
||||
{sidebarItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
<div className="w-64 shrink-0">
|
||||
<div className="rounded-2xl bg-background border shadow-sm h-full p-4">
|
||||
<nav className="space-y-2">
|
||||
{sidebarItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className={cn(
|
||||
'flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
||||
active
|
||||
? 'bg-muted text-foreground'
|
||||
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<Icon className="mr-3 h-5 w-5" />
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200',
|
||||
active
|
||||
? 'bg-gradient-to-r from-purple-400 to-purple-500 text-white shadow-sm hover:from-purple-500 hover:to-purple-600'
|
||||
: 'text-muted-foreground hover:bg-purple-50/50 hover:text-purple-500'
|
||||
)}
|
||||
>
|
||||
<Icon className={cn(
|
||||
'h-5 w-5',
|
||||
active
|
||||
? 'text-white'
|
||||
: 'text-muted-foreground group-hover:text-purple-500'
|
||||
)} />
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,59 +1,65 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
--foreground: 252 6% 15%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
--card-foreground: 252 6% 15%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--popover-foreground: 252 6% 15%;
|
||||
--primary: 252 87% 48%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 252 16% 95%;
|
||||
--secondary-foreground: 252 6% 15%;
|
||||
--muted: 252 16% 95%;
|
||||
--muted-foreground: 252 6% 45%;
|
||||
--accent: 252 16% 95%;
|
||||
--accent-foreground: 252 6% 15%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--ring: 0 0% 3.9%;
|
||||
--radius: 0.5rem;
|
||||
--border: 252 16% 90%;
|
||||
--input: 252 16% 90%;
|
||||
--ring: 252 87% 48%;
|
||||
--radius: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--background: 252 6% 10%;
|
||||
--foreground: 252 6% 95%;
|
||||
--card: 252 6% 10%;
|
||||
--card-foreground: 252 6% 95%;
|
||||
--popover: 252 6% 10%;
|
||||
--popover-foreground: 252 6% 95%;
|
||||
--primary: 252 87% 48%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 252 6% 15%;
|
||||
--secondary-foreground: 252 6% 95%;
|
||||
--muted: 252 6% 15%;
|
||||
--muted-foreground: 252 6% 65%;
|
||||
--accent: 252 6% 15%;
|
||||
--accent-foreground: 252 6% 95%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--destructive-foreground: 252 6% 95%;
|
||||
--border: 252 6% 15%;
|
||||
--input: 252 6% 15%;
|
||||
--ring: 252 87% 48%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground antialiased;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.gradient-text {
|
||||
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-400;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { ArrowRight, Brain, Sparkles, Users, BookOpen } from 'lucide-react';
|
||||
import { ArrowRight, Brain, Sparkles, Users, FileText, Zap, Shield, MessageSquare } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button } from '../components/ui/Button';
|
||||
import { Header } from '../components/layout/Header';
|
||||
|
|
@ -7,41 +7,150 @@ import { Header } from '../components/layout/Header';
|
|||
function Home() {
|
||||
return (
|
||||
<div className="flex h-screen flex-col overflow-hidden">
|
||||
<header className="border-b bg-background">
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
|
||||
<Link to="/" className="flex items-center gap-2 text-xl font-bold">
|
||||
<BookOpen className="h-6 w-6 text-foreground" />
|
||||
<span>StudyAI</span>
|
||||
</Link>
|
||||
<nav className="flex items-center gap-4">
|
||||
<Link to="/auth/login">
|
||||
<Button variant="ghost">Log in</Button>
|
||||
</Link>
|
||||
<Link to="/auth/signup">
|
||||
<Button>Sign up</Button>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<Header />
|
||||
<main className="flex-1 overflow-y-auto pt-24">
|
||||
<div className="container mx-auto px-4">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold sm:text-6xl">
|
||||
Learn Smarter with AI
|
||||
<div className="max-w-4xl mx-auto text-center space-y-6 animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
||||
|
||||
<h1 className="text-6xl font-bold mb-6 gradient-text leading-tight">
|
||||
Advanced Document Intelligence with RAG AI
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
|
||||
Enhance your learning experience with personalized AI assistance.
|
||||
Ask questions, get instant feedback, and track your progress.
|
||||
<p className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto">
|
||||
Experience the power of Retrieval-Augmented Generation. Process documents, get instant insights, and learn more effectively with our advanced AI system.
|
||||
</p>
|
||||
<div className="mt-10 flex justify-center gap-4">
|
||||
<div className="flex justify-center gap-4">
|
||||
<Link to="/auth/signup">
|
||||
<Button size="lg">Get Started</Button>
|
||||
<Button size="lg" className="rounded-full px-8 hover:scale-105 transition-transform">
|
||||
Get Started <ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/auth/login">
|
||||
<Button variant="outline" size="lg">
|
||||
Learn More
|
||||
<Button size="lg" variant="outline" className="rounded-full px-8 hover:bg-secondary transition-colors">
|
||||
Try Demo
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-5xl mx-auto">
|
||||
<div className="text-center p-6 rounded-2xl bg-card border animate-in fade-in-50 duration-1000 hover:shadow-lg transition-all">
|
||||
<div className="text-4xl font-bold gradient-text mb-2">95%</div>
|
||||
<div className="text-muted-foreground">Query Accuracy</div>
|
||||
</div>
|
||||
<div className="text-center p-6 rounded-2xl bg-card border animate-in fade-in-50 duration-1000 delay-150 hover:shadow-lg transition-all">
|
||||
<div className="text-4xl font-bold gradient-text mb-2">1000+</div>
|
||||
<div className="text-muted-foreground">Daily Queries</div>
|
||||
</div>
|
||||
<div className="text-center p-6 rounded-2xl bg-card border animate-in fade-in-50 duration-1000 delay-300 hover:shadow-lg transition-all">
|
||||
<div className="text-4xl font-bold gradient-text mb-2">90%</div>
|
||||
<div className="text-muted-foreground">Relevance Rate</div>
|
||||
</div>
|
||||
<div className="text-center p-6 rounded-2xl bg-card border animate-in fade-in-50 duration-1000 delay-450 hover:shadow-lg transition-all">
|
||||
<div className="text-4xl font-bold gradient-text mb-2">40%</div>
|
||||
<div className="text-muted-foreground">Time Saved</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-20">
|
||||
<div className="text-center mb-16 animate-in fade-in-50">
|
||||
<h2 className="text-3xl font-bold mb-4">Powered by Advanced RAG Technology</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
Our system combines state-of-the-art retrieval and generation to provide accurate, context-aware responses.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="p-6 rounded-2xl bg-card border hover:shadow-lg transition-all group">
|
||||
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
||||
<Brain className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Intelligent Analysis</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Advanced RAG system processes your documents with 95% accuracy for precise answers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl bg-card border hover:shadow-lg transition-all group">
|
||||
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
||||
<Sparkles className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Smart Retrieval</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Context-aware document retrieval with semantic understanding of your content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl bg-card border hover:shadow-lg transition-all group">
|
||||
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
||||
<Users className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Source Attribution</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Transparent source referencing and attribution for all retrieved information.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works Section */}
|
||||
<section className="py-20 bg-secondary/30 -mx-4 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold mb-4">How RAG AI Works</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
Experience the power of intelligent document processing in four simple steps.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<div className="text-center group">
|
||||
<div className="h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
|
||||
<FileText className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-2">Upload Documents</h3>
|
||||
<p className="text-sm text-muted-foreground">Upload your documents in any format</p>
|
||||
</div>
|
||||
<div className="text-center group">
|
||||
<div className="h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
|
||||
<Zap className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-2">AI Processing</h3>
|
||||
<p className="text-sm text-muted-foreground">Our RAG system analyzes and indexes your content</p>
|
||||
</div>
|
||||
<div className="text-center group">
|
||||
<div className="h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
|
||||
<MessageSquare className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-2">Ask Questions</h3>
|
||||
<p className="text-sm text-muted-foreground">Get instant, accurate answers from your materials</p>
|
||||
</div>
|
||||
<div className="text-center group">
|
||||
<div className="h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
|
||||
<Shield className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-2">Track Progress</h3>
|
||||
<p className="text-sm text-muted-foreground">Monitor insights and document processing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-6">
|
||||
<h2 className="text-3xl font-bold mb-4">Ready to Transform Your Document Processing?</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto mb-8">
|
||||
Join thousands of users who are already using RAG AI for intelligent document analysis.
|
||||
</p>
|
||||
<div className="flex justify-center gap-4">
|
||||
<Link to="/auth/signup">
|
||||
<Button size="lg" className="rounded-full px-8 hover:scale-105 transition-transform">
|
||||
Get Started Now <ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, { useState } from 'react';
|
|||
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { Button } from '../../components/ui/Button';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { BookOpen, ArrowRight } from 'lucide-react';
|
||||
|
||||
interface LocationState {
|
||||
from?: string;
|
||||
|
|
@ -49,68 +50,88 @@ export default function Login() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-md space-y-6 p-6">
|
||||
<div className="space-y-2 text-center">
|
||||
<h1 className="text-3xl font-bold">Welcome Back</h1>
|
||||
<p className="text-muted-foreground">Enter your credentials to access your account</p>
|
||||
<div className="min-h-screen pt-20 flex flex-col">
|
||||
<div className="mx-auto max-w-md space-y-8 p-8 animate-in fade-in-50 duration-500 slide-in-from-bottom-8">
|
||||
<div className="space-y-2 text-center">
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<BookOpen className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-bold gradient-text">Welcome to RAG AI</h1>
|
||||
<p className="text-muted-foreground">Sign in to access intelligent document processing</p>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className="rounded-xl bg-primary/10 p-4 text-sm text-primary animate-in fade-in-50 slide-in-from-top-4">
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-xl bg-destructive/10 p-4 text-sm text-destructive animate-in fade-in-50 slide-in-from-top-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-1.5">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="block w-full rounded-xl border border-input bg-background px-4 py-2.5 transition-colors hover:border-primary/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-foreground mb-1.5">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
className="block w-full rounded-xl border border-input bg-background px-4 py-2.5 transition-colors hover:border-primary/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full rounded-xl h-11 hover:scale-105 transition-transform"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
'Signing in...'
|
||||
) : (
|
||||
<>
|
||||
Sign in <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Don't have an account?{' '}
|
||||
<Link to="/auth/signup" className="font-medium text-primary hover:text-primary/90 transition-colors">
|
||||
Sign up
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className="rounded-lg bg-primary/15 p-3 text-sm text-primary">
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg bg-destructive/15 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-foreground">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-foreground">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? 'Signing in...' : 'Sign in'}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Don't have an account?{' '}
|
||||
<Link to="/auth/signup" className="font-medium text-primary hover:text-primary/90">
|
||||
Sign up
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, { useState } from 'react';
|
|||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { Button } from '../../components/ui/Button';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { BookOpen, ArrowRight } from 'lucide-react';
|
||||
|
||||
export default function Signup() {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -48,78 +49,105 @@ export default function Signup() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-md space-y-6 p-6">
|
||||
<div className="space-y-2 text-center">
|
||||
<h1 className="text-3xl font-bold">Create an Account</h1>
|
||||
<p className="text-muted-foreground">Enter your details to create your account</p>
|
||||
<div className="min-h-screen pt-20 flex flex-col">
|
||||
<div className="mx-auto max-w-md space-y-8 p-8 animate-in fade-in-50 duration-500 slide-in-from-bottom-8">
|
||||
<div className="space-y-2 text-center">
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<BookOpen className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold gradient-text">Join RAG AI</h1>
|
||||
<p className="text-muted-foreground">Experience intelligent document processing with AI</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-xl bg-destructive/10 p-4 text-sm text-destructive animate-in fade-in-50 slide-in-from-top-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-1.5">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="block w-full rounded-xl border border-input bg-background px-4 py-2.5 transition-colors hover:border-primary/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-foreground mb-1.5">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
className="block w-full rounded-xl border border-input bg-background px-4 py-2.5 transition-colors hover:border-primary/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-1.5">
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
required
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleChange}
|
||||
className="block w-full rounded-xl border border-input bg-background px-4 py-2.5 transition-colors hover:border-primary/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full rounded-xl h-11 hover:scale-105 transition-transform"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
'Creating account...'
|
||||
) : (
|
||||
<>
|
||||
Create account <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="space-y-4">
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Already have an account?{' '}
|
||||
<Link to="/auth/login" className="font-medium text-primary hover:text-primary/90 transition-colors">
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
<p className="text-center text-xs text-muted-foreground">
|
||||
By creating an account, you agree to our{' '}
|
||||
<Link to="#" className="underline hover:text-foreground transition-colors">Terms of Service</Link>
|
||||
{' '}and{' '}
|
||||
<Link to="#" className="underline hover:text-foreground transition-colors">Privacy Policy</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg bg-destructive/15 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-foreground">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-foreground">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
required
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? 'Creating account...' : 'Create account'}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Already have an account?{' '}
|
||||
<Link to="/auth/login" className="font-medium text-primary hover:text-primary/90">
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,10 +32,25 @@ function Settings() {
|
|||
<h1 className="text-3xl font-bold">Settings</h1>
|
||||
|
||||
<Tabs defaultValue="chat" className="w-full">
|
||||
<TabsList className="mb-4">
|
||||
<TabsTrigger value="chat">Chat & RAG</TabsTrigger>
|
||||
<TabsTrigger value="ui">UI</TabsTrigger>
|
||||
<TabsTrigger value="privacy">Privacy</TabsTrigger>
|
||||
<TabsList className="mb-4 bg-purple-50">
|
||||
<TabsTrigger
|
||||
value="chat"
|
||||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-400 data-[state=active]:to-purple-500 data-[state=active]:text-white"
|
||||
>
|
||||
Chat & RAG
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="ui"
|
||||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-400 data-[state=active]:to-purple-500 data-[state=active]:text-white"
|
||||
>
|
||||
UI
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="privacy"
|
||||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-400 data-[state=active]:to-purple-500 data-[state=active]:text-white"
|
||||
>
|
||||
Privacy
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="chat">
|
||||
|
|
@ -45,7 +60,11 @@ function Settings() {
|
|||
<Label>Context Retention</Label>
|
||||
<p className="text-sm text-muted-foreground">Keep conversation context for more relevant responses</p>
|
||||
</div>
|
||||
<Switch checked={retainContext} onCheckedChange={setRetainContext} />
|
||||
<Switch
|
||||
checked={retainContext}
|
||||
onCheckedChange={setRetainContext}
|
||||
className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
|
|
@ -57,6 +76,7 @@ function Settings() {
|
|||
max={20}
|
||||
min={1}
|
||||
step={1}
|
||||
className="[&_.SliderTrack]:bg-purple-200 [&_.SliderRange]:bg-gradient-to-r [&_.SliderRange]:from-purple-400 [&_.SliderRange]:to-purple-500 [&_.SliderThumb]:border-purple-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -65,7 +85,11 @@ function Settings() {
|
|||
<Label>Source Attribution</Label>
|
||||
<p className="text-sm text-muted-foreground">Show source documents for responses</p>
|
||||
</div>
|
||||
<Switch checked={showSourceAttribution} onCheckedChange={setShowSourceAttribution} />
|
||||
<Switch
|
||||
checked={showSourceAttribution}
|
||||
onCheckedChange={setShowSourceAttribution}
|
||||
className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
|
|
@ -77,6 +101,7 @@ function Settings() {
|
|||
max={1}
|
||||
min={0}
|
||||
step={0.1}
|
||||
className="[&_.SliderTrack]:bg-purple-200 [&_.SliderRange]:bg-gradient-to-r [&_.SliderRange]:from-purple-400 [&_.SliderRange]:to-purple-500 [&_.SliderThumb]:border-purple-400"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
|
@ -89,7 +114,11 @@ function Settings() {
|
|||
<Label>Dark Mode</Label>
|
||||
<p className="text-sm text-muted-foreground">Enable dark color theme</p>
|
||||
</div>
|
||||
<Switch checked={darkMode} onCheckedChange={setDarkMode} />
|
||||
<Switch
|
||||
checked={darkMode}
|
||||
onCheckedChange={setDarkMode}
|
||||
className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
@ -97,7 +126,11 @@ function Settings() {
|
|||
<Label>Compact View</Label>
|
||||
<p className="text-sm text-muted-foreground">Reduce spacing in chat interface</p>
|
||||
</div>
|
||||
<Switch checked={compactView} onCheckedChange={setCompactView} />
|
||||
<Switch
|
||||
checked={compactView}
|
||||
onCheckedChange={setCompactView}
|
||||
className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
@ -105,7 +138,11 @@ function Settings() {
|
|||
<Label>Message Grouping</Label>
|
||||
<p className="text-sm text-muted-foreground">Group consecutive messages from the same source</p>
|
||||
</div>
|
||||
<Switch checked={messageGrouping} onCheckedChange={setMessageGrouping} />
|
||||
<Switch
|
||||
checked={messageGrouping}
|
||||
onCheckedChange={setMessageGrouping}
|
||||
className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
|
@ -117,7 +154,11 @@ function Settings() {
|
|||
<Label>Save Chat History</Label>
|
||||
<p className="text-sm text-muted-foreground">Store conversation history locally</p>
|
||||
</div>
|
||||
<Switch checked={saveHistory} onCheckedChange={setSaveHistory} />
|
||||
<Switch
|
||||
checked={saveHistory}
|
||||
onCheckedChange={setSaveHistory}
|
||||
className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
@ -125,7 +166,11 @@ function Settings() {
|
|||
<Label>Anonymize Data</Label>
|
||||
<p className="text-sm text-muted-foreground">Remove personal information from logs</p>
|
||||
</div>
|
||||
<Switch checked={anonymizeData} onCheckedChange={setAnonymizeData} />
|
||||
<Switch
|
||||
checked={anonymizeData}
|
||||
onCheckedChange={setAnonymizeData}
|
||||
className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
@ -133,15 +178,19 @@ function Settings() {
|
|||
<Label>Share Analytics</Label>
|
||||
<p className="text-sm text-muted-foreground">Help improve the app by sharing usage data</p>
|
||||
</div>
|
||||
<Switch checked={shareAnalytics} onCheckedChange={setShareAnalytics} />
|
||||
<Switch
|
||||
checked={shareAnalytics}
|
||||
onCheckedChange={setShareAnalytics}
|
||||
className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex justify-end space-x-4">
|
||||
<Button variant="outline">Reset to Defaults</Button>
|
||||
<Button>Save Changes</Button>
|
||||
<Button variant="outline" className="hover:bg-purple-50">Reset to Defaults</Button>
|
||||
<Button className="bg-gradient-to-r from-purple-400 to-purple-500 hover:from-purple-500 hover:to-purple-600 text-white">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -182,62 +182,79 @@ export default function AskQuestion() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="flex h-14 items-center justify-between px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageSquarePlus className="h-5 w-5 text-muted-foreground" />
|
||||
<div>
|
||||
<h1 className="text-sm font-semibold">Ask a Question</h1>
|
||||
{chat && (
|
||||
<p className="text-xs text-muted-foreground line-clamp-1">
|
||||
{chat.title}
|
||||
</p>
|
||||
<div className="h-[calc(100vh-4rem)] flex flex-col">
|
||||
{/* Main Chat Container */}
|
||||
<div className="flex-1 flex flex-col relative">
|
||||
{/* Sticky Subheader */}
|
||||
<div className="sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
|
||||
<div className="flex h-14 items-center justify-between px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
|
||||
<MessageSquarePlus className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-sm font-medium">Ask a Question</h1>
|
||||
{chat && (
|
||||
<p className="text-xs text-muted-foreground line-clamp-1">
|
||||
{chat.title}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleNewChat}
|
||||
className="text-muted-foreground hover:text-primary hover:bg-primary/10"
|
||||
>
|
||||
<MessageSquarePlus className="mr-2 h-4 w-4" />
|
||||
New Chat
|
||||
</Button>
|
||||
{chatId && !isNewChat && messages.length > 0 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={clearChat}
|
||||
className="text-muted-foreground hover:text-primary hover:bg-primary/10"
|
||||
>
|
||||
<X className="mr-2 h-4 w-4" />
|
||||
Clear chat
|
||||
</Button>
|
||||
)}
|
||||
{hasExistingChats && (
|
||||
<Link to="/dashboard/history">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-muted-foreground hover:text-primary hover:bg-primary/10"
|
||||
>
|
||||
<History className="mr-2 h-4 w-4" />
|
||||
History
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={handleNewChat}>
|
||||
<MessageSquarePlus className="mr-2 h-4 w-4" />
|
||||
New Chat
|
||||
</Button>
|
||||
{chatId && !isNewChat && messages.length > 0 && (
|
||||
<Button variant="ghost" size="sm" onClick={clearChat}>
|
||||
<X className="mr-2 h-4 w-4" />
|
||||
Clear chat
|
||||
</Button>
|
||||
)}
|
||||
{hasExistingChats && (
|
||||
<Link to="/dashboard/history">
|
||||
<Button variant="ghost" size="sm">
|
||||
<History className="mr-2 h-4 w-4" />
|
||||
History
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="flex-none mx-4 mt-4 flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{error}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="flex-none mx-4 mt-4 flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Messages Area */}
|
||||
<div className="flex-1 min-h-0 relative">
|
||||
<div className="absolute inset-0 overflow-y-auto">
|
||||
{/* Messages Container */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="flex flex-col space-y-6 p-4">
|
||||
{!isNewChat && !chatId ? (
|
||||
<div className="h-full flex items-center justify-center min-h-[calc(100vh-16rem)]">
|
||||
<div className="h-full flex items-center justify-center min-h-[calc(100vh-12rem)]">
|
||||
<div className="max-w-md w-full space-y-8">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="rounded-full bg-blue-500/20 p-6 mb-8">
|
||||
<div className="h-16 w-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 shadow-lg" />
|
||||
<div className="rounded-full bg-purple-500/20 p-6 mb-8">
|
||||
<div className="h-16 w-16 rounded-full bg-gradient-to-br from-purple-300 to-purple-500 shadow-lg" />
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold mb-2">Welcome to StudyAI Chat</h2>
|
||||
<p className="text-sm text-muted-foreground mb-6">
|
||||
|
|
@ -245,7 +262,7 @@ export default function AskQuestion() {
|
|||
</p>
|
||||
<Button
|
||||
onClick={handleNewChat}
|
||||
className="w-full bg-blue-500 hover:bg-blue-600 mb-8"
|
||||
className="w-full bg-gradient-to-r from-purple-400 to-purple-500 hover:from-purple-500 hover:to-purple-600 text-white mb-8"
|
||||
>
|
||||
<MessageSquarePlus className="mr-2 h-5 w-5" />
|
||||
Start New Chat
|
||||
|
|
@ -289,11 +306,11 @@ export default function AskQuestion() {
|
|||
</div>
|
||||
</div>
|
||||
) : messages.length === 0 ? (
|
||||
<div className="h-full flex items-center justify-center min-h-[calc(100vh-16rem)]">
|
||||
<div className="h-full flex items-center justify-center min-h-[calc(100vh-12rem)]">
|
||||
<div className="max-w-md w-full space-y-8">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="rounded-full bg-blue-500/20 p-6 mb-8">
|
||||
<div className="h-16 w-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 shadow-lg" />
|
||||
<div className="rounded-full bg-purple-500/20 p-6 mb-8">
|
||||
<div className="h-16 w-16 rounded-full bg-gradient-to-br from-purple-300 to-purple-500 shadow-lg" />
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold mb-2">Ask Your First Question</h2>
|
||||
<p className="text-sm text-muted-foreground mb-6">
|
||||
|
|
@ -334,17 +351,17 @@ export default function AskQuestion() {
|
|||
/>
|
||||
))}
|
||||
{isTyping && (
|
||||
<div className="flex w-full items-start gap-3 px-4">
|
||||
<div className="flex w-full items-start gap-3">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback className="bg-gradient-to-br from-blue-400 to-blue-600 text-white text-xs font-medium">
|
||||
<AvatarFallback className="bg-gradient-to-br from-purple-300 to-purple-500 text-white text-xs font-medium">
|
||||
AI
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex max-w-3xl items-center space-x-4 rounded-2xl bg-muted/50 px-4 py-3 text-sm shadow-sm border border-border/50">
|
||||
<div className="flex max-w-3xl items-center space-x-4 rounded-2xl bg-primary/5 px-4 py-3 text-sm shadow-sm">
|
||||
<div className="flex space-x-2">
|
||||
<div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:0ms]" />
|
||||
<div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:150ms]" />
|
||||
<div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:300ms]" />
|
||||
<div className="h-2 w-2 animate-bounce rounded-full bg-primary/40 [animation-delay:0ms]" />
|
||||
<div className="h-2 w-2 animate-bounce rounded-full bg-primary/40 [animation-delay:150ms]" />
|
||||
<div className="h-2 w-2 animate-bounce rounded-full bg-primary/40 [animation-delay:300ms]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -354,42 +371,43 @@ export default function AskQuestion() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input Area */}
|
||||
<div className="flex-none border-t bg-background p-4">
|
||||
<form onSubmit={handleSubmit} className="mx-auto max-w-3xl">
|
||||
<div className="relative flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={question}
|
||||
onChange={(e) => setQuestion(e.target.value)}
|
||||
placeholder="Ask me anything..."
|
||||
className={cn(
|
||||
'w-full rounded-full border bg-background px-4 py-2 text-sm',
|
||||
'focus:outline-none focus:ring-2 focus:ring-blue-500/20',
|
||||
'placeholder:text-muted-foreground'
|
||||
)}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading || !question.trim()}
|
||||
className={cn(
|
||||
'rounded-full bg-blue-500 text-white h-8 w-8 p-0',
|
||||
'hover:bg-blue-600',
|
||||
'focus:outline-none focus:ring-2 focus:ring-blue-500/20',
|
||||
'disabled:bg-blue-500/50'
|
||||
)}
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
{/* Input Box - Fixed at Bottom */}
|
||||
<div className="sticky bottom-0 left-0 right-0 p-3 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<form onSubmit={handleSubmit} className="mx-auto max-w-3xl">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={question}
|
||||
onChange={(e) => setQuestion(e.target.value)}
|
||||
placeholder="Ask me anything..."
|
||||
className={cn(
|
||||
'flex-1 rounded-full px-4 py-2 text-sm',
|
||||
'bg-primary/5 border-primary/10',
|
||||
'focus:outline-none focus:ring-2 focus:ring-primary/20',
|
||||
'placeholder:text-muted-foreground'
|
||||
)}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading || !question.trim()}
|
||||
className={cn(
|
||||
'rounded-full bg-gradient-to-r from-purple-400 to-purple-500 text-white h-8 w-8 p-0',
|
||||
'hover:from-purple-500 hover:to-purple-600',
|
||||
'focus:outline-none focus:ring-2 focus:ring-primary/20',
|
||||
'disabled:opacity-50'
|
||||
)}
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export default function StudyHistory() {
|
|||
<p className="text-muted-foreground">View your past conversations</p>
|
||||
</div>
|
||||
<Link to="/dashboard/ask">
|
||||
<Button>
|
||||
<Button className="bg-gradient-to-r from-purple-400 to-purple-500 hover:from-purple-500 hover:to-purple-600 text-white">
|
||||
<MessageSquare className="mr-2 h-4 w-4" />
|
||||
New Chat
|
||||
</Button>
|
||||
|
|
@ -60,7 +60,9 @@ export default function StudyHistory() {
|
|||
Start a new conversation to see it here
|
||||
</p>
|
||||
<Link to="/dashboard/ask" className="mt-4 inline-block">
|
||||
<Button>Start a new chat</Button>
|
||||
<Button className="bg-gradient-to-r from-purple-400 to-purple-500 hover:from-purple-500 hover:to-purple-600 text-white">
|
||||
Start a new chat
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -68,7 +70,7 @@ export default function StudyHistory() {
|
|||
{chats.map((chat) => (
|
||||
<div
|
||||
key={chat.id}
|
||||
className="group relative rounded-lg border bg-card p-4 transition-colors hover:bg-muted/50"
|
||||
className="group relative rounded-lg border bg-card p-4 transition-colors hover:bg-purple-50/50"
|
||||
>
|
||||
<Link to={`/dashboard/ask/${chat.id}`} className="block">
|
||||
<h3 className="font-medium">{chat.title}</h3>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,47 @@
|
|||
import React from 'react';
|
||||
import { Upload } from 'lucide-react';
|
||||
import { Button } from '../../components/ui/Button';
|
||||
import { Card } from '../../components/ui/card';
|
||||
|
||||
function UploadMaterials() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold">Upload Study Materials</h1>
|
||||
<div className="rounded-lg bg-card p-6 shadow-sm">
|
||||
<div className="flex flex-col items-center justify-center space-y-4 py-12">
|
||||
<Upload className="h-12 w-12 text-muted-foreground" />
|
||||
<div className="text-center">
|
||||
<h2 className="text-lg font-semibold">Drop your files here</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
or click to browse from your computer
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => window.open('https://drive.google.com/drive/folders/1UVn905Gfxh7tCo2bZxjpOtGzwNAquwnI?dmr=1&ec=wgc-drive-globalnav-goto', '_blank')}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
<div className="space-y-6 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Upload Study Materials</h1>
|
||||
<p className="text-muted-foreground">Upload your documents to Google Drive</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="p-12">
|
||||
<div className="flex flex-col items-center justify-center space-y-6 max-w-md mx-auto text-center">
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-1 rounded-full bg-gradient-to-r from-purple-400/25 to-purple-500/25 blur" />
|
||||
<div className="relative rounded-full bg-purple-50 p-6">
|
||||
<Upload className="h-12 w-12 text-purple-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-xl font-semibold">Ready to upload?</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Click below to open Google Drive and upload your study materials
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-purple-400 to-purple-500 hover:from-purple-500 hover:to-purple-600 text-white px-8"
|
||||
onClick={() => window.open('https://drive.google.com/drive/folders/1UVn905Gfxh7tCo2bZxjpOtGzwNAquwnI?dmr=1&ec=wgc-drive-globalnav-goto', '_blank')}
|
||||
>
|
||||
Open Google Drive
|
||||
</Button>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Supported formats: PDF, DOCX, DOC, and TXT files up to 10MB
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue