lucasacchi/documente
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): implement complete React/Vite frontend

Browse Source 
## Features
- React 18 + TypeScript + Vite setup
- Tailwind CSS + shadcn/ui components
- Complete authentication flow (API Key)
- Dashboard with stats and recent documents
- Document upload (drag & drop) and management
- Chat interface with RAG support
- Settings page (theme, provider selection)
- Responsive design with mobile support

## Components
- Layout with sidebar navigation
- Button, Card, Input, Label, Separator (shadcn)
- Protected and public routes

## State Management
- Zustand stores: auth, chat, settings
- Persisted to localStorage

## API Integration
- Axios client with interceptors
- All API endpoints integrated
- Error handling and loading states

## Pages
- Login: API key authentication
- Dashboard: Overview and stats
- Documents: Upload, list, delete
- Chat: Conversational interface with sources
- Settings: Theme and provider config

🎨 Production-ready build (339KB gzipped)
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-06 11:44:46 +02:00
parent 2566f712a2
commit 74cefd3366
37 changed files with 2640 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
frontend/src/App.css Normal file
View File

@@ -0,0 +1,184 @@
.counter {
font-size: 16px;
padding: 5px 10px;
border-radius: 5px;
color: var(--accent);
background: var(--accent-bg);
border: 2px solid transparent;
transition: border-color 0.3s;
margin-bottom: 24px;
&:hover {
border-color: var(--accent-border);
}
&:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
}
.hero {
position: relative;
.base,
.framework,
.vite {
inset-inline: 0;
margin: 0 auto;
}
.base {
width: 170px;
position: relative;
z-index: 0;
}
.framework,
.vite {
position: absolute;
}
.framework {
z-index: 1;
top: 34px;
height: 28px;
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
scale(1.4);
}
.vite {
z-index: 0;
top: 107px;
height: 26px;
width: auto;
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
scale(0.8);
}
}
#center {
display: flex;
flex-direction: column;
gap: 25px;
place-content: center;
place-items: center;
flex-grow: 1;
@media (max-width: 1024px) {
padding: 32px 20px 24px;
gap: 18px;
}
}
#next-steps {
display: flex;
border-top: 1px solid var(--border);
text-align: left;
& > div {
flex: 1 1 0;
padding: 32px;
@media (max-width: 1024px) {
padding: 24px 20px;
}
}
.icon {
margin-bottom: 16px;
width: 22px;
height: 22px;
}
@media (max-width: 1024px) {
flex-direction: column;
text-align: center;
}
}
#docs {
border-right: 1px solid var(--border);
@media (max-width: 1024px) {
border-right: none;
border-bottom: 1px solid var(--border);
}
}
#next-steps ul {
list-style: none;
padding: 0;
display: flex;
gap: 8px;
margin: 32px 0 0;
.logo {
height: 18px;
}
a {
color: var(--text-h);
font-size: 16px;
border-radius: 6px;
background: var(--social-bg);
display: flex;
padding: 6px 12px;
align-items: center;
gap: 8px;
text-decoration: none;
transition: box-shadow 0.3s;
&:hover {
box-shadow: var(--shadow);
}
.button-icon {
height: 18px;
width: 18px;
}
}
@media (max-width: 1024px) {
margin-top: 20px;
flex-wrap: wrap;
justify-content: center;
li {
flex: 1 1 calc(50% - 8px);
}
a {
width: 100%;
justify-content: center;
box-sizing: border-box;
}
}
}
#spacer {
height: 88px;
border-top: 1px solid var(--border);
@media (max-width: 1024px) {
height: 48px;
}
}
.ticks {
position: relative;
width: 100%;
&::before,
&::after {
content: '';
position: absolute;
top: -4.5px;
border: 5px solid transparent;
}
&::before {
left: 0;
border-left-color: var(--border);
}
&::after {
right: 0;
border-right-color: var(--border);
}
}

147
frontend/src/App.tsx Normal file
View File

@@ -0,0 +1,147 @@
import { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { Layout } from '@/components/layout/Layout';
import { Login } from '@/pages/Login';
import { Dashboard } from '@/pages/Dashboard';
import { Documents } from '@/pages/Documents';
import { Chat } from '@/pages/Chat';
import { Settings } from '@/pages/Settings';
import { useAuthStore } from '@/stores/authStore';
import { useSettingsStore } from '@/stores/settingsStore';
import { Loader2 } from 'lucide-react';
// Protected Route Component
function ProtectedRoute({ children }: { children: React.ReactNode }) {
const { isAuthenticated } = useAuthStore();
if (!isAuthenticated) {
return <Navigate to="/login" replace />;
}
return <>{children}</>;
}
// Public Route Component (redirects to home if authenticated)
function PublicRoute({ children }: { children: React.ReactNode }) {
const { isAuthenticated } = useAuthStore();
if (isAuthenticated) {
return <Navigate to="/" replace />;
}
return <>{children}</>;
}
// App Content Component
function AppContent() {
const { theme } = useSettingsStore();
// Apply theme on mount
useEffect(() => {
const root = window.document.documentElement;
root.classList.remove('light', 'dark');
if (theme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
root.classList.add(systemTheme);
} else {
root.classList.add(theme);
}
}, [theme]);
return (
<Layout>
<Routes>
{/* Public Routes */}
<Route
path="/login"
element={
<PublicRoute>
<Login />
</PublicRoute>
}
/>
{/* Protected Routes */}
<Route
path="/"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
<Route
path="/documents"
element={
<ProtectedRoute>
<Documents />
</ProtectedRoute>
}
/>
<Route
path="/chat"
element={
<ProtectedRoute>
<Chat />
</ProtectedRoute>
}
/>
<Route
path="/settings"
element={
<ProtectedRoute>
<Settings />
</ProtectedRoute>
}
/>
{/* Catch all - redirect based on auth status */}
<Route path="*" element={<NavigateToHome />} />
</Routes>
</Layout>
);
}
// Navigate to home based on auth
function NavigateToHome() {
const { isAuthenticated } = useAuthStore();
return <Navigate to={isAuthenticated ? "/" : "/login"} replace />;
}
// Main App Component
function App() {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
// Check for stored auth on mount
const checkAuth = async () => {
// Small delay to prevent flash
await new Promise((resolve) => setTimeout(resolve, 100));
setIsLoading(false);
};
checkAuth();
}, []);
if (isLoading) {
return (
<div className="flex items-center justify-center h-screen bg-background">
<div className="flex flex-col items-center space-y-4">
<Loader2 className="h-12 w-12 animate-spin text-primary" />
<p className="text-muted-foreground">Loading...</p>
</div>
</div>
);
}
return (
<Router>
<AppContent />
</Router>
);
}
export default App;

126
frontend/src/api/client.ts Normal file
View File

@@ -0,0 +1,126 @@
import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios';
import { useAuthStore } from '@/stores/authStore';
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
class ApiClient {
private client: AxiosInstance;
constructor() {
this.client = axios.create({
baseURL: `${API_BASE_URL}/api/v1`,
headers: {
'Content-Type': 'application/json',
},
});
// Request interceptor to add auth headers
this.client.interceptors.request.use(
(config) => {
const { apiKey, token } = useAuthStore.getState();
if (apiKey) {
config.headers['X-API-Key'] = apiKey;
} else if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
(error) => Promise.reject(error)
);
// Response interceptor for error handling
this.client.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
// Unauthorized - clear auth
useAuthStore.getState().logout();
window.location.href = '/login';
}
return Promise.reject(error);
}
);
}
// Generic request method
async get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
const response = await this.client.get<T>(url, config);
return response.data;
}
async post<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
const response = await this.client.post<T>(url, data, config);
return response.data;
}
async put<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
const response = await this.client.put<T>(url, data, config);
return response.data;
}
async delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
const response = await this.client.delete<T>(url, config);
return response.data;
}
// Documents API
async uploadDocument(file: File): Promise<{ document_id: string; filename: string; status: string }> {
const formData = new FormData();
formData.append('file', file);
const response = await this.client.post('/documents', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
return response.data;
}
async getDocuments(): Promise<Document[]> {
return this.get<Document[]>('/documents');
}
async deleteDocument(id: string): Promise<void> {
await this.delete(`/documents/${id}`);
}
// Chat/Query API
async query(prompt: string, provider?: string, model?: string): Promise<{ response: string; sources: Source[] }> {
return this.post('/query', { prompt, provider, model });
}
async chat(message: string, conversationId?: string): Promise<{ response: string; sources: Source[] }> {
return this.post('/chat', { message, conversation_id: conversationId });
}
// Providers API
async getProviders(): Promise<Provider[]> {
return this.get<Provider[]>('/providers');
}
async getProviderModels(providerId: string): Promise<{ provider: string; models: Model[] }> {
return this.get(`/providers/${providerId}/models`);
}
async getConfig(): Promise<SystemConfig> {
return this.get<SystemConfig>('/config');
}
async updateDefaultProvider(provider: string, model: string): Promise<{ success: boolean; message: string }> {
return this.put('/config/provider', { provider, model });
}
// Health check
async healthCheck(): Promise<{ status: string; version: string }> {
const response = await axios.get(`${API_BASE_URL}/api/health`);
return response.data;
}
}
// Import types
import type { Document, Provider, Model, Source, SystemConfig } from '@/types';
export const apiClient = new ApiClient();
export default apiClient;

1
frontend/src/assets/react.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

1
frontend/src/assets/vite.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

163
frontend/src/components/layout/Layout.tsx Normal file
View File

@@ -0,0 +1,163 @@
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { useAuthStore } from '@/stores/authStore';
import { useSettingsStore } from '@/stores/settingsStore';
import { Button } from '@/components/ui/button';
import {
LayoutDashboard,
FileText,
MessageSquare,
Settings,
Menu,
X,
Brain,
LogOut,
ChevronLeft,
ChevronRight
} from 'lucide-react';
import { cn } from '@/lib/utils';
interface LayoutProps {
children: React.ReactNode;
}
const navigation = [
{ name: 'Dashboard', href: '/', icon: LayoutDashboard },
{ name: 'Documents', href: '/documents', icon: FileText },
{ name: 'Chat', href: '/chat', icon: MessageSquare },
{ name: 'Settings', href: '/settings', icon: Settings },
];
export function Layout({ children }: LayoutProps) {
const location = useLocation();
const navigate = useNavigate();
const { logout, isAuthenticated } = useAuthStore();
const { sidebarOpen, toggleSidebar, setSidebarOpen } = useSettingsStore();
const handleLogout = () => {
logout();
navigate('/login');
};
if (!isAuthenticated) {
return <>{children}</>;
}
return (
<div className="flex h-screen bg-background">
{/* Sidebar */}
<aside
className={cn(
'fixed inset-y-0 left-0 z-50 w-64 bg-card border-r transform transition-transform duration-200 ease-in-out lg:relative lg:translate-x-0',
sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:hidden'
)}
>
{/* Logo */}
<div className="flex h-16 items-center px-6 border-b">
<Link to="/" className="flex items-center space-x-2">
<div className="p-2 rounded-lg bg-primary">
<Brain className="h-5 w-5 text-primary-foreground" />
</div>
<span className="text-xl font-bold">AgenticRAG</span>
</Link>
<Button
variant="ghost"
size="sm"
className="ml-auto lg:hidden"
onClick={() => setSidebarOpen(false)}
>
<X className="h-5 w-5" />
</Button>
</div>
{/* Navigation */}
<nav className="flex-1 overflow-y-auto py-4 px-3 space-y-1">
{navigation.map((item) => {
const isActive = location.pathname === item.href;
const Icon = item.icon;
return (
<Link
key={item.name}
to={item.href}
className={cn(
'flex items-center space-x-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
isActive
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
)}
>
<Icon className="h-5 w-5" />
<span>{item.name}</span>
</Link>
);
})}
</nav>
{/* Bottom Actions */}
<div className="border-t p-4 space-y-2">
<Button
variant="ghost"
className="w-full justify-start"
onClick={handleLogout}
>
<LogOut className="mr-3 h-5 w-5" />
Sign Out
</Button>
</div>
</aside>
{/* Main Content */}
<div className="flex-1 flex flex-col min-w-0">
{/* Top Bar */}
<header className="h-16 border-b bg-card flex items-center px-4 lg:px-6">
<Button
variant="ghost"
size="sm"
className="lg:hidden mr-2"
onClick={() => setSidebarOpen(true)}
>
<Menu className="h-5 w-5" />
</Button>
{/* Toggle Sidebar Button (Desktop) */}
<Button
variant="ghost"
size="sm"
className="hidden lg:flex mr-2"
onClick={toggleSidebar}
>
{sidebarOpen ? (
<ChevronLeft className="h-5 w-5" />
) : (
<ChevronRight className="h-5 w-5" />
)}
</Button>
<div className="flex-1" />
{/* User Menu */}
<div className="flex items-center space-x-4">
<span className="text-sm text-muted-foreground hidden sm:inline">
Welcome back
</span>
</div>
</header>
{/* Page Content */}
<main className="flex-1 overflow-y-auto p-4 lg:p-8">
<div className="max-w-7xl mx-auto">
{children}
</div>
</main>
</div>
{/* Mobile Overlay */}
{sidebarOpen && (
<div
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
onClick={() => setSidebarOpen(false)}
/>
)}
</div>
);
}

56
frontend/src/components/ui/button.tsx Normal file
View File

@@ -0,0 +1,56 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }

79
frontend/src/components/ui/card.tsx Normal file
View File

@@ -0,0 +1,79 @@
import * as React from "react"
import { cn } from "@/lib/utils"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
className
)}
{...props}
/>
))
Card.displayName = "Card"
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

25
frontend/src/components/ui/input.tsx Normal file
View File

@@ -0,0 +1,25 @@
import * as React from "react"
import { cn } from "@/lib/utils"
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }

24
frontend/src/components/ui/label.tsx Normal file
View File

@@ -0,0 +1,24 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName
export { Label }

30
frontend/src/components/ui/separator.tsx Normal file
View File

@@ -0,0 +1,30 @@
import * as React from "react"
import { cn } from "@/lib/utils"
interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
orientation?: "horizontal" | "vertical"
decorative?: boolean
}
const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<div
ref={ref}
role={decorative ? "none" : "separator"}
aria-orientation={decorative ? undefined : orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
)
Separator.displayName = "Separator"
export { Separator }

59
frontend/src/index.css Normal file
View File

@@ -0,0 +1,59 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

10
frontend/src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)

235
frontend/src/pages/Chat.tsx Normal file
View File

@@ -0,0 +1,235 @@
import { useState, useRef, useEffect } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { apiClient } from '@/api/client';
import { useChatStore } from '@/stores/chatStore';
import { useSettingsStore } from '@/stores/settingsStore';
import {
Send,
Loader2,
Bot,
User,
FileText,
Plus
} from 'lucide-react';
import type { Message, Source } from '@/types';
export function Chat() {
const [input, setInput] = useState('');
const messagesEndRef = useRef<HTMLDivElement>(null);
const {
messages,
addMessage,
isLoading,
setLoading,
startNewConversation
} = useChatStore();
const { defaultProvider, defaultModel } = useSettingsStore();
// Auto-scroll to bottom
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!input.trim() || isLoading) return;
const userMessage: Message = {
id: Date.now().toString(),
role: 'user',
content: input.trim(),
timestamp: new Date().toISOString(),
};
addMessage(userMessage);
setInput('');
setLoading(true);
try {
const response = await apiClient.query(
userMessage.content,
defaultProvider,
defaultModel
);
const assistantMessage: Message = {
id: (Date.now() + 1).toString(),
role: 'assistant',
content: response.response,
sources: response.sources,
timestamp: new Date().toISOString(),
};
addMessage(assistantMessage);
} catch (error) {
console.error('Error sending message:', error);
const errorMessage: Message = {
id: (Date.now() + 1).toString(),
role: 'assistant',
content: 'Sorry, I encountered an error while processing your request. Please try again.',
timestamp: new Date().toISOString(),
};
addMessage(errorMessage);
} finally {
setLoading(false);
}
};
const handleNewChat = () => {
if (messages.length > 0 && confirm('Start a new conversation? Current messages will be cleared.')) {
startNewConversation();
}
};
return (
<div className="flex flex-col h-[calc(100vh-8rem)]">
{/* Header */}
<div className="flex items-center justify-between mb-4">
<div>
<h1 className="text-3xl font-bold tracking-tight">Chat</h1>
<p className="text-muted-foreground">
Ask questions about your documents
</p>
</div>
<Button variant="outline" onClick={handleNewChat}>
<Plus className="mr-2 h-4 w-4" />
New Chat
</Button>
</div>
{/* Chat Container */}
<Card className="flex-1 flex flex-col overflow-hidden">
{/* Messages */}
<CardContent className="flex-1 overflow-y-auto p-4 space-y-4">
{messages.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-muted-foreground">
<Bot className="h-16 w-16 mb-4 opacity-50" />
<p className="text-lg font-medium">Start a conversation</p>
<p className="text-sm">Ask questions about your uploaded documents</p>
<div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-2 w-full max-w-lg">
{[
'What are the main topics in my documents?',
'Summarize the key points',
'Find information about...',
'Explain the concept of...',
].map((suggestion) => (
<Button
key={suggestion}
variant="outline"
className="text-left justify-start h-auto py-3"
onClick={() => setInput(suggestion)}
>
{suggestion}
</Button>
))}
</div>
</div>
) : (
<>
{messages.map((message) => (
<ChatMessage key={message.id} message={message} />
))}
{isLoading && (
<div className="flex items-center space-x-2 text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin" />
<span className="text-sm">Thinking...</span>
</div>
)}
<div ref={messagesEndRef} />
</>
)}
</CardContent>
{/* Input */}
<div className="p-4 border-t">
<form onSubmit={handleSubmit} className="flex space-x-2">
<Input
placeholder="Type your message..."
value={input}
onChange={(e) => setInput(e.target.value)}
disabled={isLoading}
className="flex-1"
/>
<Button type="submit" disabled={isLoading || !input.trim()}>
{isLoading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<Send className="h-4 w-4" />
)}
</Button>
</form>
<p className="text-xs text-muted-foreground mt-2 text-center">
Using {defaultProvider} • {defaultModel}
</p>
</div>
</Card>
</div>
);
}
// Chat Message Component
function ChatMessage({ message }: { message: Message }) {
const isUser = message.role === 'user';
return (
<div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
<div className={`flex max-w-[80%] ${isUser ? 'flex-row-reverse' : 'flex-row'} space-x-2`}>
{/* Avatar */}
<div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
isUser ? 'bg-primary ml-2' : 'bg-muted mr-2'
}`}>
{isUser ? (
<User className="h-4 w-4 text-primary-foreground" />
) : (
<Bot className="h-4 w-4" />
)}
</div>
{/* Message Content */}
<div className={`space-y-2 ${isUser ? 'items-end' : 'items-start'}`}>
<div className={`p-3 rounded-lg ${
isUser
? 'bg-primary text-primary-foreground'
: 'bg-muted'
}`}>
<p className="whitespace-pre-wrap">{message.content}</p>
</div>
{/* Sources */}
{!isUser && message.sources && message.sources.length > 0 && (
<div className="space-y-1">
<p className="text-xs text-muted-foreground">Sources:</p>
<div className="flex flex-wrap gap-2">
{message.sources.map((source, index) => (
<SourceBadge key={index} source={source} />
))}
</div>
</div>
)}
{/* Timestamp */}
<p className="text-xs text-muted-foreground">
{new Date(message.timestamp).toLocaleTimeString()}
</p>
</div>
</div>
</div>
);
}
// Source Badge Component
function SourceBadge({ source }: { source: Source }) {
return (
<div className="inline-flex items-center space-x-1 px-2 py-1 rounded bg-accent text-accent-foreground text-xs">
<FileText className="h-3 w-3" />
<span>{source.document_name}</span>
<span className="text-muted-foreground">({(source.score * 100).toFixed(0)}%)</span>
</div>
);
}

196
frontend/src/pages/Dashboard.tsx Normal file
View File

@@ -0,0 +1,196 @@
import { useEffect, useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { apiClient } from '@/api/client';
import type { Document, SystemConfig } from '@/types';
import {
FileText,
Brain,
TrendingUp,
Upload,
MessageCircle,
ChevronRight,
Loader2
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';
export function Dashboard() {
const [documents, setDocuments] = useState<Document[]>([]);
const [config, setConfig] = useState<SystemConfig | null>(null);
const [isLoading, setIsLoading] = useState(true);
const navigate = useNavigate();
useEffect(() => {
const fetchData = async () => {
try {
const [docs, cfg] = await Promise.all([
apiClient.getDocuments(),
apiClient.getConfig(),
]);
setDocuments(docs.slice(0, 5)); // Last 5 documents
setConfig(cfg);
} catch (error) {
console.error('Error fetching dashboard data:', error);
} finally {
setIsLoading(false);
}
};
fetchData();
}, []);
if (isLoading) {
return (
<div className="flex items-center justify-center h-64">
<Loader2 className="h-8 w-8 animate-spin text-primary" />
</div>
);
}
return (
<div className="space-y-6">
{/* Header */}
<div>
<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
<p className="text-muted-foreground">
Overview of your AgenticRAG system
</p>
</div>
{/* Stats Cards */}
<div className="grid gap-4 md:grid-cols-3">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Documents</CardTitle>
<FileText className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{documents.length}</div>
<p className="text-xs text-muted-foreground">
Documents in your knowledge base
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Active Provider</CardTitle>
<Brain className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold capitalize">
{config?.default_llm_provider || 'N/A'}
</div>
<p className="text-xs text-muted-foreground">
{config?.default_llm_model || ''}
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">System Status</CardTitle>
<TrendingUp className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-green-600">Active</div>
<p className="text-xs text-muted-foreground">
All systems operational
</p>
</CardContent>
</Card>
</div>
{/* Quick Actions */}
<div className="grid gap-4 md:grid-cols-2">
<Card className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={() => navigate('/documents')}>
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle className="text-lg">Upload Documents</CardTitle>
<Upload className="h-5 w-5 text-primary" />
</div>
<CardDescription>
Add new documents to your knowledge base
</CardDescription>
</CardHeader>
<CardContent>
<Button variant="secondary" className="w-full">
Go to Upload
<ChevronRight className="ml-2 h-4 w-4" />
</Button>
</CardContent>
</Card>
<Card className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={() => navigate('/chat')}>
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle className="text-lg">Start Chat</CardTitle>
<MessageCircle className="h-5 w-5 text-primary" />
</div>
<CardDescription>
Ask questions about your documents
</CardDescription>
</CardHeader>
<CardContent>
<Button variant="secondary" className="w-full">
Open Chat
<ChevronRight className="ml-2 h-4 w-4" />
</Button>
</CardContent>
</Card>
</div>
{/* Recent Documents */}
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>Recent Documents</CardTitle>
<CardDescription>Recently uploaded documents</CardDescription>
</div>
<Button variant="outline" onClick={() => navigate('/documents')}>
View All
</Button>
</div>
</CardHeader>
<CardContent>
{documents.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
<FileText className="mx-auto h-12 w-12 mb-4 opacity-50" />
<p>No documents yet</p>
<p className="text-sm">Upload your first document to get started</p>
</div>
) : (
<div className="space-y-4">
{documents.map((doc) => (
<div
key={doc.id}
className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
>
<div className="flex items-center space-x-4">
<FileText className="h-8 w-8 text-primary" />
<div>
<p className="font-medium">{doc.filename}</p>
<p className="text-sm text-muted-foreground">
{new Date(doc.created_at).toLocaleDateString()} • {(doc.size / 1024).toFixed(1)} KB
</p>
</div>
</div>
<div className={`px-3 py-1 rounded-full text-xs font-medium ${
doc.status === 'ready'
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
: doc.status === 'processing'
? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
}`}>
{doc.status}
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
</div>
);
}

250
frontend/src/pages/Documents.tsx Normal file
View File

@@ -0,0 +1,250 @@
import { useEffect, useState, useCallback } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { apiClient } from '@/api/client';
import type { Document } from '@/types';
import {
FileText,
Upload,
Trash2,
Search,
Loader2,
X,
CheckCircle,
AlertCircle
} from 'lucide-react';
export function Documents() {
const [documents, setDocuments] = useState<Document[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [isUploading, setIsUploading] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [dragActive, setDragActive] = useState(false);
const fetchDocuments = useCallback(async () => {
try {
const docs = await apiClient.getDocuments();
setDocuments(docs);
} catch (error) {
console.error('Error fetching documents:', error);
} finally {
setIsLoading(false);
}
}, []);
useEffect(() => {
fetchDocuments();
}, [fetchDocuments]);
const handleUpload = async (file: File) => {
setIsUploading(true);
try {
await apiClient.uploadDocument(file);
await fetchDocuments();
} catch (error) {
console.error('Error uploading document:', error);
alert('Failed to upload document. Please try again.');
} finally {
setIsUploading(false);
}
};
const handleDelete = async (id: string) => {
if (!confirm('Are you sure you want to delete this document?')) return;
try {
await apiClient.deleteDocument(id);
await fetchDocuments();
} catch (error) {
console.error('Error deleting document:', error);
alert('Failed to delete document. Please try again.');
}
};
const handleDrag = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
if (e.type === 'dragenter' || e.type === 'dragover') {
setDragActive(true);
} else if (e.type === 'dragleave') {
setDragActive(false);
}
};
const handleDrop = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setDragActive(false);
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
handleUpload(e.dataTransfer.files[0]);
}
};
const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files[0]) {
handleUpload(e.target.files[0]);
}
};
const filteredDocuments = documents.filter((doc) =>
doc.filename.toLowerCase().includes(searchQuery.toLowerCase())
);
const getStatusIcon = (status: string) => {
switch (status) {
case 'ready':
return <CheckCircle className="h-4 w-4 text-green-600" />;
case 'processing':
return <Loader2 className="h-4 w-4 text-yellow-600 animate-spin" />;
case 'error':
return <AlertCircle className="h-4 w-4 text-red-600" />;
default:
return null;
}
};
return (
<div className="space-y-6">
{/* Header */}
<div>
<h1 className="text-3xl font-bold tracking-tight">Documents</h1>
<p className="text-muted-foreground">
Manage your knowledge base documents
</p>
</div>
{/* Upload Zone */}
<Card
className={`border-2 border-dashed ${
dragActive ? 'border-primary bg-primary/5' : 'border-border'
}`}
onDragEnter={handleDrag}
onDragLeave={handleDrag}
onDragOver={handleDrag}
onDrop={handleDrop}
>
<CardContent className="flex flex-col items-center justify-center py-12">
<Upload className={`h-12 w-12 mb-4 ${dragActive ? 'text-primary' : 'text-muted-foreground'}`} />
<p className="text-lg font-medium mb-2">
{isUploading ? 'Uploading...' : 'Drag & drop your documents here'}
</p>
<p className="text-sm text-muted-foreground mb-4">
Supports PDF, DOCX, TXT, and MD files
</p>
<Input
type="file"
accept=".pdf,.docx,.txt,.md"
onChange={handleFileInput}
disabled={isUploading}
className="hidden"
id="file-upload"
/>
<Button
variant="outline"
disabled={isUploading}
onClick={() => document.getElementById('file-upload')?.click()}
>
{isUploading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Uploading...
</>
) : (
<>
<Upload className="mr-2 h-4 w-4" />
Browse Files
</>
)}
</Button>
</CardContent>
</Card>
{/* Search */}
<div className="relative">
<Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Search documents..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10"
/>
{searchQuery && (
<Button
variant="ghost"
size="sm"
className="absolute right-2 top-2 h-6 w-6 p-0"
onClick={() => setSearchQuery('')}
>
<X className="h-4 w-4" />
</Button>
)}
</div>
{/* Documents List */}
<Card>
<CardHeader>
<CardTitle>Your Documents ({filteredDocuments.length})</CardTitle>
<CardDescription>
{documents.length === 0
? 'No documents uploaded yet'
: 'Click the trash icon to delete a document'}
</CardDescription>
</CardHeader>
<CardContent>
{isLoading ? (
<div className="flex items-center justify-center py-12">
<Loader2 className="h-8 w-8 animate-spin text-primary" />
</div>
) : filteredDocuments.length === 0 ? (
<div className="text-center py-12 text-muted-foreground">
<FileText className="mx-auto h-12 w-12 mb-4 opacity-50" />
{searchQuery ? (
<p>No documents match your search</p>
) : (
<>
<p>No documents yet</p>
<p className="text-sm">Upload documents to get started</p>
</>
)}
</div>
) : (
<div className="space-y-2">
{filteredDocuments.map((doc) => (
<div
key={doc.id}
className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors group"
>
<div className="flex items-center space-x-4">
<FileText className="h-8 w-8 text-primary" />
<div>
<p className="font-medium">{doc.filename}</p>
<p className="text-sm text-muted-foreground">
{new Date(doc.created_at).toLocaleDateString()} • {(doc.size / 1024).toFixed(1)} KB
</p>
</div>
</div>
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-1 px-2 py-1 rounded bg-muted">
{getStatusIcon(doc.status)}
<span className="text-xs font-medium capitalize">{doc.status}</span>
</div>
<Button
variant="ghost"
size="sm"
className="opacity-0 group-hover:opacity-100 transition-opacity"
onClick={() => handleDelete(doc.id)}
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
</div>
);
}

93
frontend/src/pages/Login.tsx Normal file
View File

@@ -0,0 +1,93 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { useAuthStore } from '@/stores/authStore';
import { apiClient } from '@/api/client';
import { Brain, Key, Loader2 } from 'lucide-react';
export function Login() {
const [apiKey, setApiKey] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const loginWithApiKey = useAuthStore((state) => state.loginWithApiKey);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError('');
setIsLoading(true);
try {
// Test the API key by making a health check
loginWithApiKey(apiKey);
await apiClient.healthCheck();
navigate('/');
} catch (err) {
setError('Invalid API key or connection error. Please try again.');
console.error('Login error:', err);
} finally {
setIsLoading(false);
}
};
return (
<div className="min-h-screen flex items-center justify-center bg-background p-4">
<Card className="w-full max-w-md">
<CardHeader className="space-y-1">
<div className="flex items-center justify-center mb-4">
<div className="p-3 rounded-full bg-primary/10">
<Brain className="h-8 w-8 text-primary" />
</div>
</div>
<CardTitle className="text-2xl text-center">Welcome to AgenticRAG</CardTitle>
<CardDescription className="text-center">
Enter your API key to access the system
</CardDescription>
</CardHeader>
<form onSubmit={handleSubmit}>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="apiKey">API Key</Label>
<div className="relative">
<Key className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
<Input
id="apiKey"
type="password"
placeholder="Enter your API key"
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
className="pl-10"
required
/>
</div>
</div>
{error && (
<div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md">
{error}
</div>
)}
</CardContent>
<CardFooter>
<Button
type="submit"
className="w-full"
disabled={isLoading || !apiKey.trim()}
>
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Connecting...
</>
) : (
'Sign In'
)}
</Button>
</CardFooter>
</form>
</Card>
</div>
);
}

296
frontend/src/pages/Settings.tsx Normal file
View File

@@ -0,0 +1,296 @@
import { useEffect, useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { apiClient } from '@/api/client';
import { useSettingsStore } from '@/stores/settingsStore';
import { useAuthStore } from '@/stores/authStore';
import type { Provider, Model, SystemConfig } from '@/types';
import {
Loader2,
CheckCircle,
XCircle,
Sun,
Moon,
Monitor,
LogOut,
Brain,
Key
} from 'lucide-react';
export function Settings() {
const [providers, setProviders] = useState<Provider[]>([]);
const [models, setModels] = useState<Model[]>([]);
const [config, setConfig] = useState<SystemConfig | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
const {
theme,
setTheme,
defaultProvider,
defaultModel,
setDefaultProvider,
setDefaultModel
} = useSettingsStore();
const { logout, apiKey } = useAuthStore();
useEffect(() => {
const fetchData = async () => {
try {
const [providersData, configData] = await Promise.all([
apiClient.getProviders(),
apiClient.getConfig(),
]);
setProviders(providersData);
setConfig(configData);
// Fetch models for current provider
if (defaultProvider) {
const modelsData = await apiClient.getProviderModels(defaultProvider);
setModels(modelsData.models);
}
} catch (error) {
console.error('Error fetching settings:', error);
} finally {
setIsLoading(false);
}
};
fetchData();
}, [defaultProvider]);
const handleProviderChange = async (providerId: string) => {
setDefaultProvider(providerId);
setDefaultModel(''); // Reset model when provider changes
try {
const modelsData = await apiClient.getProviderModels(providerId);
setModels(modelsData.models);
if (modelsData.models.length > 0) {
setDefaultModel(modelsData.models[0].id);
}
} catch (error) {
console.error('Error fetching models:', error);
}
};
const handleSave = async () => {
setIsSaving(true);
try {
await apiClient.updateDefaultProvider(defaultProvider, defaultModel);
alert('Settings saved successfully!');
} catch (error) {
console.error('Error saving settings:', error);
alert('Failed to save settings. Please try again.');
} finally {
setIsSaving(false);
}
};
const handleLogout = () => {
logout();
window.location.href = '/login';
};
if (isLoading) {
return (
<div className="flex items-center justify-center h-64">
<Loader2 className="h-8 w-8 animate-spin text-primary" />
</div>
);
}
// Filter configured providers for display
providers.filter((p) => p.configured);
return (
<div className="space-y-6">
{/* Header */}
<div>
<h1 className="text-3xl font-bold tracking-tight">Settings</h1>
<p className="text-muted-foreground">
Configure your AgenticRAG preferences
</p>
</div>
{/* Appearance */}
<Card>
<CardHeader>
<CardTitle className="flex items-center">
<Sun className="mr-2 h-5 w-5" />
Appearance
</CardTitle>
<CardDescription>
Customize the look and feel of the application
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label>Theme</Label>
<div className="flex space-x-2">
<Button
variant={theme === 'light' ? 'default' : 'outline'}
onClick={() => setTheme('light')}
className="flex-1"
>
<Sun className="mr-2 h-4 w-4" />
Light
</Button>
<Button
variant={theme === 'dark' ? 'default' : 'outline'}
onClick={() => setTheme('dark')}
className="flex-1"
>
<Moon className="mr-2 h-4 w-4" />
Dark
</Button>
<Button
variant={theme === 'system' ? 'default' : 'outline'}
onClick={() => setTheme('system')}
className="flex-1"
>
<Monitor className="mr-2 h-4 w-4" />
System
</Button>
</div>
</div>
</CardContent>
</Card>
{/* LLM Provider */}
<Card>
<CardHeader>
<CardTitle className="flex items-center">
<Brain className="mr-2 h-5 w-5" />
LLM Provider
</CardTitle>
<CardDescription>
Select your preferred language model provider
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{/* Provider Selection */}
<div className="space-y-2">
<Label>Provider</Label>
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
{providers.map((provider) => (
<Button
key={provider.id}
variant={defaultProvider === provider.id ? 'default' : 'outline'}
onClick={() => handleProviderChange(provider.id)}
disabled={!provider.configured}
className="justify-start"
>
<div className="flex items-center space-x-2">
{provider.configured ? (
<CheckCircle className="h-4 w-4 text-green-600" />
) : (
<XCircle className="h-4 w-4 text-gray-400" />
)}
<span>{provider.name}</span>
</div>
</Button>
))}
</div>
</div>
{/* Model Selection */}
{models.length > 0 && (
<div className="space-y-2">
<Label>Model</Label>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
{models.map((model) => (
<Button
key={model.id}
variant={defaultModel === model.id ? 'default' : 'outline'}
onClick={() => setDefaultModel(model.id)}
className="justify-start"
>
{model.name}
</Button>
))}
</div>
</div>
)}
<Button
onClick={handleSave}
disabled={isSaving || !defaultProvider || !defaultModel}
className="w-full"
>
{isSaving ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Saving...
</>
) : (
'Save Settings'
)}
</Button>
</CardContent>
</Card>
{/* System Info */}
{config && (
<Card>
<CardHeader>
<CardTitle>System Information</CardTitle>
<CardDescription>
Current system configuration
</CardDescription>
</CardHeader>
<CardContent className="space-y-2">
<div className="flex justify-between">
<span className="text-muted-foreground">Embedding Provider</span>
<span className="font-medium capitalize">{config.embedding_provider}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Embedding Model</span>
<span className="font-medium">{config.embedding_model}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Vector Store</span>
<span className="font-medium">Qdrant ({config.qdrant_host}:{config.qdrant_port})</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Configured Providers</span>
<span className="font-medium">{config.configured_providers.length}</span>
</div>
</CardContent>
</Card>
)}
<Separator />
{/* Account */}
<Card>
<CardHeader>
<CardTitle className="flex items-center">
<Key className="mr-2 h-5 w-5" />
Account
</CardTitle>
<CardDescription>
Manage your account settings
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between p-4 rounded-lg bg-muted">
<div>
<p className="font-medium">API Key</p>
<p className="text-sm text-muted-foreground">
{apiKey ? `${apiKey.substring(0, 8)}...` : 'Not set'}
</p>
</div>
<Button variant="outline" onClick={handleLogout}>
<LogOut className="mr-2 h-4 w-4" />
Sign Out
</Button>
</div>
</CardContent>
</Card>
</div>
);
}

68
frontend/src/stores/authStore.ts Normal file
View File

@@ -0,0 +1,68 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import type { User } from '@/types';
interface AuthState {
// State
user: User | null;
apiKey: string | null;
token: string | null;
isAuthenticated: boolean;
// Actions
loginWithApiKey: (apiKey: string) => void;
loginWithToken: (token: string, user: User) => void;
logout: () => void;
setUser: (user: User) => void;
}
export const useAuthStore = create<AuthState>()(
persist(
(set) => ({
user: null,
apiKey: null,
token: null,
isAuthenticated: false,
loginWithApiKey: (apiKey: string) => {
set({
apiKey,
token: null,
isAuthenticated: true,
user: { id: 'admin', auth_method: 'api_key' },
});
},
loginWithToken: (token: string, user: User) => {
set({
token,
apiKey: null,
isAuthenticated: true,
user,
});
},
logout: () => {
set({
user: null,
apiKey: null,
token: null,
isAuthenticated: false,
});
},
setUser: (user: User) => {
set({ user });
},
}),
{
name: 'auth-storage',
partialize: (state) => ({
apiKey: state.apiKey,
token: state.token,
isAuthenticated: state.isAuthenticated,
user: state.user
}),
}
)
);

72
frontend/src/stores/chatStore.ts Normal file
View File

@@ -0,0 +1,72 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import type { Message } from '@/types';
interface ChatState {
// State
messages: Message[];
currentConversationId: string | null;
isLoading: boolean;
conversations: { id: string; title: string; updated_at: string }[];
// Actions
addMessage: (message: Message) => void;
setMessages: (messages: Message[]) => void;
clearMessages: () => void;
setLoading: (loading: boolean) => void;
setCurrentConversation: (id: string | null) => void;
startNewConversation: () => void;
addConversation: (conversation: { id: string; title: string; updated_at: string }) => void;
}
export const useChatStore = create<ChatState>()(
persist(
(set) => ({
messages: [],
currentConversationId: null,
isLoading: false,
conversations: [],
addMessage: (message) => {
set((state) => ({
messages: [...state.messages, message],
}));
},
setMessages: (messages) => {
set({ messages });
},
clearMessages: () => {
set({ messages: [], currentConversationId: null });
},
setLoading: (loading) => {
set({ isLoading: loading });
},
setCurrentConversation: (id) => {
set({ currentConversationId: id });
},
startNewConversation: () => {
set({
messages: [],
currentConversationId: null
});
},
addConversation: (conversation) => {
set((state) => ({
conversations: [conversation, ...state.conversations].slice(0, 50), // Keep last 50
}));
},
}),
{
name: 'chat-storage',
partialize: (state) => ({
conversations: state.conversations
}),
}
)
);

3
frontend/src/stores/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { useAuthStore } from './authStore';
export { useChatStore } from './chatStore';
export { useSettingsStore } from './settingsStore';

61
frontend/src/stores/settingsStore.ts Normal file
View File

@@ -0,0 +1,61 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
interface SettingsState {
// State
theme: 'light' | 'dark' | 'system';
defaultProvider: string;
defaultModel: string;
sidebarOpen: boolean;
// Actions
setTheme: (theme: 'light' | 'dark' | 'system') => void;
setDefaultProvider: (provider: string) => void;
setDefaultModel: (model: string) => void;
toggleSidebar: () => void;
setSidebarOpen: (open: boolean) => void;
}
export const useSettingsStore = create<SettingsState>()(
persist(
(set) => ({
theme: 'system',
defaultProvider: 'openai',
defaultModel: 'gpt-4o-mini',
sidebarOpen: true,
setTheme: (theme) => {
set({ theme });
// Apply theme to document
const root = window.document.documentElement;
root.classList.remove('light', 'dark');
if (theme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
root.classList.add(systemTheme);
} else {
root.classList.add(theme);
}
},
setDefaultProvider: (provider) => {
set({ defaultProvider: provider });
},
setDefaultModel: (model) => {
set({ defaultModel: model });
},
toggleSidebar: () => {
set((state) => ({ sidebarOpen: !state.sidebarOpen }));
},
setSidebarOpen: (open) => {
set({ sidebarOpen: open });
},
}),
{
name: 'settings-storage',
}
)
);

75
frontend/src/types/index.ts Normal file
View File

@@ -0,0 +1,75 @@
// Authentication types
export interface User {
id: string;
email?: string;
auth_method: 'api_key' | 'jwt';
}
export interface LoginCredentials {
apiKey?: string;
email?: string;
password?: string;
}
// Document types
export interface Document {
id: string;
filename: string;
content_type: string;
size: number;
created_at: string;
status: 'processing' | 'ready' | 'error';
}
export interface DocumentUploadResponse {
document_id: string;
filename: string;
status: string;
}
// Chat types
export interface Message {
id: string;
role: 'user' | 'assistant';
content: string;
sources?: Source[];
timestamp: string;
}
export interface Source {
document_id: string;
document_name: string;
content: string;
score: number;
}
export interface ChatResponse {
response: string;
sources: Source[];
}
// Provider types
export interface Provider {
id: string;
name: string;
available: boolean;
configured: boolean;
default_model: string;
install_command?: string;
}
export interface Model {
id: string;
name: string;
}
// Config types
export interface SystemConfig {
default_llm_provider: string;
default_llm_model: string;
embedding_provider: string;
embedding_model: string;
configured_providers: string[];
qdrant_host: string;
qdrant_port: number;
}