From 171fe6e04f79725e493b4d5aa65a7ff632dd324f Mon Sep 17 00:00:00 2001 From: rathi Date: Sun, 8 Dec 2024 15:12:28 -0500 Subject: [PATCH] updated UI --- src/components/chat/Message.tsx | 4 +- .../layout/DashboardLayout/index.tsx | 10 +- src/components/layout/Header/index.tsx | 65 +++--- src/components/layout/Sidebar/index.tsx | 55 ++--- src/index.css | 84 ++++---- src/pages/Home.tsx | 167 ++++++++++++--- src/pages/auth/Login.tsx | 143 +++++++------ src/pages/auth/Signup.tsx | 170 +++++++++------ src/pages/dashboard/Settings.tsx | 77 +++++-- src/pages/dashboard/ask.tsx | 202 ++++++++++-------- src/pages/dashboard/history.tsx | 8 +- src/pages/dashboard/upload.tsx | 53 +++-- 12 files changed, 653 insertions(+), 385 deletions(-) diff --git a/src/components/chat/Message.tsx b/src/components/chat/Message.tsx index 5fa26f7..fe21b5e 100644 --- a/src/components/chat/Message.tsx +++ b/src/components/chat/Message.tsx @@ -84,7 +84,7 @@ export function Message({ message }: MessageProps) { > {message.role === 'assistant' && ( - + AI @@ -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' )} > diff --git a/src/components/layout/DashboardLayout/index.tsx b/src/components/layout/DashboardLayout/index.tsx index 28dd180..7650ece 100644 --- a/src/components/layout/DashboardLayout/index.tsx +++ b/src/components/layout/DashboardLayout/index.tsx @@ -5,12 +5,14 @@ import { Sidebar } from '../Sidebar/index'; const DashboardLayout = () => { return ( -
+
-
+
-
- +
+
+ +
diff --git a/src/components/layout/Header/index.tsx b/src/components/layout/Header/index.tsx index c7a75ce..aa7efcb 100644 --- a/src/components/layout/Header/index.tsx +++ b/src/components/layout/Header/index.tsx @@ -12,35 +12,42 @@ const Header = () => { }; return ( -
-
- - - StudyAI - - -
-
+
+
+
+
+
+ +
+ +
+ RAG AI + + +
+
+
+
); }; diff --git a/src/components/layout/Sidebar/index.tsx b/src/components/layout/Sidebar/index.tsx index adf7f9c..be5c40a 100644 --- a/src/components/layout/Sidebar/index.tsx +++ b/src/components/layout/Sidebar/index.tsx @@ -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 ( -
- +
); }; diff --git a/src/index.css b/src/index.css index dbd6c48..322b93a 100644 --- a/src/index.css +++ b/src/index.css @@ -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; } -} \ No newline at end of file +} + +@layer utilities { + .gradient-text { + @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-400; + } +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index cfdd69b..5c36988 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -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 (
-
-
- - - StudyAI - - -
-
- -
+
+
+ {/* Hero Section */}
-
-

- Learn Smarter with AI +
+ +

+ Advanced Document Intelligence with RAG AI

-

- Enhance your learning experience with personalized AI assistance. - Ask questions, get instant feedback, and track your progress. +

+ Experience the power of Retrieval-Augmented Generation. Process documents, get instant insights, and learn more effectively with our advanced AI system.

-
+
- + - + +
+
+

+ + {/* Stats Section */} +
+
+
+
95%
+
Query Accuracy
+
+
+
1000+
+
Daily Queries
+
+
+
90%
+
Relevance Rate
+
+
+
40%
+
Time Saved
+
+
+
+ + {/* Features Section */} +
+
+

Powered by Advanced RAG Technology

+

+ Our system combines state-of-the-art retrieval and generation to provide accurate, context-aware responses. +

+
+
+
+
+ +
+

Intelligent Analysis

+

+ Advanced RAG system processes your documents with 95% accuracy for precise answers. +

+
+ +
+
+ +
+

Smart Retrieval

+

+ Context-aware document retrieval with semantic understanding of your content. +

+
+ +
+
+ +
+

Source Attribution

+

+ Transparent source referencing and attribution for all retrieved information. +

+
+
+
+ + {/* How It Works Section */} +
+
+
+

How RAG AI Works

+

+ Experience the power of intelligent document processing in four simple steps. +

+
+
+
+
+ +
+

Upload Documents

+

Upload your documents in any format

+
+
+
+ +
+

AI Processing

+

Our RAG system analyzes and indexes your content

+
+
+
+ +
+

Ask Questions

+

Get instant, accurate answers from your materials

+
+
+
+ +
+

Track Progress

+

Monitor insights and document processing

+
+
+
+
+ + {/* CTA Section */} +
+
+

Ready to Transform Your Document Processing?

+

+ Join thousands of users who are already using RAG AI for intelligent document analysis. +

+
+ +
diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx index e745e80..f9bdd92 100644 --- a/src/pages/auth/Login.tsx +++ b/src/pages/auth/Login.tsx @@ -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 ( -
-
-

Welcome Back

-

Enter your credentials to access your account

+
+
+
+
+
+ +
+
+ +

Welcome to RAG AI

+

Sign in to access intelligent document processing

+
+ + {message && ( +
+ {message} +
+ )} + + {error && ( +
+ {error} +
+ )} + +
+
+
+ + +
+ +
+ + +
+
+ + +
+ +

+ Don't have an account?{' '} + + Sign up + +

- - {message && ( -
- {message} -
- )} - - {error && ( -
- {error} -
- )} - -
-
- - -
- -
- - -
- - -
- -

- Don't have an account?{' '} - - Sign up - -

); } diff --git a/src/pages/auth/Signup.tsx b/src/pages/auth/Signup.tsx index 1a57eff..fc78687 100644 --- a/src/pages/auth/Signup.tsx +++ b/src/pages/auth/Signup.tsx @@ -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 ( -
-
-

Create an Account

-

Enter your details to create your account

+
+
+
+
+
+ +
+
+

Join RAG AI

+

Experience intelligent document processing with AI

+
+ + {error && ( +
+ {error} +
+ )} + +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+ +
+

+ Already have an account?{' '} + + Sign in + +

+

+ By creating an account, you agree to our{' '} + Terms of Service + {' '}and{' '} + Privacy Policy +

+
- - {error && ( -
- {error} -
- )} - -
-
- - -
- -
- - -
- -
- - -
- - -
- -

- Already have an account?{' '} - - Sign in - -

); } diff --git a/src/pages/dashboard/Settings.tsx b/src/pages/dashboard/Settings.tsx index cb5786c..58b3a98 100644 --- a/src/pages/dashboard/Settings.tsx +++ b/src/pages/dashboard/Settings.tsx @@ -32,10 +32,25 @@ function Settings() {

Settings

- - Chat & RAG - UI - Privacy + + + Chat & RAG + + + UI + + + Privacy + @@ -45,7 +60,11 @@ function Settings() {

Keep conversation context for more relevant responses

- +
@@ -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" />
@@ -65,7 +85,11 @@ function Settings() {

Show source documents for responses

- +
@@ -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" />
@@ -89,7 +114,11 @@ function Settings() {

Enable dark color theme

- +
@@ -97,7 +126,11 @@ function Settings() {

Reduce spacing in chat interface

- +
@@ -105,7 +138,11 @@ function Settings() {

Group consecutive messages from the same source

- +
@@ -117,7 +154,11 @@ function Settings() {

Store conversation history locally

- +
@@ -125,7 +166,11 @@ function Settings() {

Remove personal information from logs

- +
@@ -133,15 +178,19 @@ function Settings() {

Help improve the app by sharing usage data

- +
- - + +
); diff --git a/src/pages/dashboard/ask.tsx b/src/pages/dashboard/ask.tsx index 072d954..bffbc71 100644 --- a/src/pages/dashboard/ask.tsx +++ b/src/pages/dashboard/ask.tsx @@ -182,62 +182,79 @@ export default function AskQuestion() { } return ( -
- {/* Header */} -
-
-
- -
-

Ask a Question

- {chat && ( -

- {chat.title} -

+
+ {/* Main Chat Container */} +
+ {/* Sticky Subheader */} +
+
+
+
+ +
+
+

Ask a Question

+ {chat && ( +

+ {chat.title} +

+ )} +
+
+
+ + {chatId && !isNewChat && messages.length > 0 && ( + + )} + {hasExistingChats && ( + + + )}
-
- - {chatId && !isNewChat && messages.length > 0 && ( - - )} - {hasExistingChats && ( - - - - )} +
+ + {/* Error Message */} + {error && ( +
+ + {error}
-
-
+ )} - {/* Error Message */} - {error && ( -
- - {error} -
- )} - - {/* Messages Area */} -
-
+ {/* Messages Container */} +
{!isNewChat && !chatId ? ( -
+
-
-
+
+

Welcome to StudyAI Chat

@@ -245,7 +262,7 @@ export default function AskQuestion() {

) : messages.length === 0 ? ( -
+
-
-
+
+

Ask Your First Question

@@ -334,17 +351,17 @@ export default function AskQuestion() { /> ))} {isTyping && ( -

+
- + AI -
+
-
-
-
+
+
+
@@ -354,42 +371,43 @@ export default function AskQuestion() { )}
-
- {/* Input Area */} -
-
-
- 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} - /> - -
-
+ {/* Input Box - Fixed at Bottom */} +
+
+
+ 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} + /> + +
+
+
); diff --git a/src/pages/dashboard/history.tsx b/src/pages/dashboard/history.tsx index 5a358e9..0accea2 100644 --- a/src/pages/dashboard/history.tsx +++ b/src/pages/dashboard/history.tsx @@ -46,7 +46,7 @@ export default function StudyHistory() {

View your past conversations

- @@ -60,7 +60,9 @@ export default function StudyHistory() { Start a new conversation to see it here

- +
) : ( @@ -68,7 +70,7 @@ export default function StudyHistory() { {chats.map((chat) => (

{chat.title}

diff --git a/src/pages/dashboard/upload.tsx b/src/pages/dashboard/upload.tsx index 84bf267..fca0d4e 100644 --- a/src/pages/dashboard/upload.tsx +++ b/src/pages/dashboard/upload.tsx @@ -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 ( -
-

Upload Study Materials

-
-
- -
-

Drop your files here

-

- or click to browse from your computer -

-
- +
+
+
+

Upload Study Materials

+

Upload your documents to Google Drive

+ + +
+
+
+
+ +
+
+ +
+

Ready to upload?

+

+ Click below to open Google Drive and upload your study materials +

+
+ + + +

+ Supported formats: PDF, DOCX, DOC, and TXT files up to 10MB +

+
+
); }