+ {/* Sidebar */}
+
+ {/* Logo */}
+
+
+
+
+
AgenticRAG
+
+
setSidebarOpen(false)}
+ >
+
+
+ {navigation.map((item) => {
+ const isActive = location.pathname === item.href;
+ const Icon = item.icon;
+
+ return (
+ {item.name}
+
+ );
+ })}
+
+
+ {/* Bottom Actions */}
+
+
+
+
+
+
+ {/* Main Content */}
+
+ {/* Top Bar */}
+
+ setSidebarOpen(true)}
+ >
+
+
+ {/* Toggle Sidebar Button (Desktop) */}
+
+ {sidebarOpen ? (
+
+
+
+
+ {/* User Menu */}
+
+
+ Welcome back
+
+
+
+
+ {/* Page Content */}
+
+
+ {children}
+
+
+
+
+ {/* Mobile Overlay */}
+ {sidebarOpen && (
+
setSidebarOpen(false)}
+ />
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
new file mode 100644
index 0000000..c9c71de
--- /dev/null
+++ b/frontend/src/components/ui/button.tsx
@@ -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
,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
\ No newline at end of file
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
new file mode 100644
index 0000000..522915b
--- /dev/null
+++ b/frontend/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+ extends React.InputHTMLAttributes {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+ {
+ orientation?: "horizontal" | "vertical"
+ decorative?: boolean
+}
+
+const Separator = React.forwardRef(
+ (
+ { className, orientation = "horizontal", decorative = true, ...props },
+ ref
+ ) => (
+
+ )
+)
+Separator.displayName = "Separator"
+
+export { Separator }
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..00b08e3
--- /dev/null
+++ b/frontend/src/index.css
@@ -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;
+ }
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -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(
+
+ ,
+)
diff --git a/frontend/src/pages/Chat.tsx b/frontend/src/pages/Chat.tsx
new file mode 100644
index 0000000..e597fd3
--- /dev/null
+++ b/frontend/src/pages/Chat.tsx
@@ -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(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 (
+
+ {/* Header */}
+
+
+
Chat
+
+ Ask questions about your documents
+
+
+
+
+
+
+ {/* Chat Container */}
+
+ {/* Messages */}
+
+ {messages.length === 0 ? (
+
+
+
Start a conversation
+
Ask questions about your uploaded documents
+
+ {[
+ 'What are the main topics in my documents?',
+ 'Summarize the key points',
+ 'Find information about...',
+ 'Explain the concept of...',
+ ].map((suggestion) => (
+ setInput(suggestion)}
+ >
+ {suggestion}
+
+ ))}
+
+
+ Thinking...
+
+ )}
+
+
+ )}
+
+
+ {/* Input */}
+
+
+
+ Using {defaultProvider} • {defaultModel}
+
+
+
+
+ {/* Avatar */}
+
+ {isUser ? (
+
+
+ {/* Message Content */}
+
+
+
+ {/* Sources */}
+ {!isUser && message.sources && message.sources.length > 0 && (
+
+
Sources:
+
+ {message.sources.map((source, index) => (
+
+
+ )}
+
+ {/* Timestamp */}
+
+ {new Date(message.timestamp).toLocaleTimeString()}
+
+
+
+
+ {source.document_name}
+ ({(source.score * 100).toFixed(0)}%)
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..35938f1
--- /dev/null
+++ b/frontend/src/pages/Dashboard.tsx
@@ -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([]);
+ const [config, setConfig] = useState(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 (
+
+
+ );
+ }
+
+ return (
+
+ {/* Header */}
+
+
Dashboard
+
+ Overview of your AgenticRAG system
+
+
+
+ {/* Stats Cards */}
+
+
+
+ Total Documents
+
+
+ {documents.length}
+
+ Documents in your knowledge base
+
+
+
+
+
+
+ Active Provider
+
+
+
+ {config?.default_llm_provider || 'N/A'}
+
+
+ {config?.default_llm_model || ''}
+
+
+
+
+
+
+ System Status
+
+
+ Active
+
+ All systems operational
+
+
+
+
+
+ {/* Quick Actions */}
+
+
navigate('/documents')}>
+
+
+ Upload Documents
+
+
+ Add new documents to your knowledge base
+
+
+
+
+ Go to Upload
+
+
+
+
+
navigate('/chat')}>
+
+
+ Start Chat
+
+
+ Ask questions about your documents
+
+
+
+
+ Open Chat
+
+
+
+
+
+ {/* Recent Documents */}
+
+
+
+
+ Recent Documents
+ Recently uploaded documents
+
+
navigate('/documents')}>
+ View All
+
+
+
+ {documents.length === 0 ? (
+
+
+
No documents yet
+
Upload your first document to get started
+
+ {documents.map((doc) => (
+
+
+
+
+
{doc.filename}
+
+ {new Date(doc.created_at).toLocaleDateString()} • {(doc.size / 1024).toFixed(1)} KB
+
+
+
+
+ {doc.status}
+
+
+ ))}
+
+
+
([]);
+ 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) => {
+ 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
+ {/* Header */}
+
+
Documents
+
+ Manage your knowledge base documents
+
+
+
+ {/* Upload Zone */}
+
+
+
+ {isUploading ? 'Uploading...' : 'Drag & drop your documents here'}
+
+
+ Supports PDF, DOCX, TXT, and MD files
+
+ document.getElementById('file-upload')?.click()}
+ >
+ {isUploading ? (
+ <>
+
+
+
+
+ {/* Search */}
+
+ setSearchQuery('')}
+ >
+
+ )}
+
+
+ {/* Documents List */}
+
+
+ Your Documents ({filteredDocuments.length})
+
+ {documents.length === 0
+ ? 'No documents uploaded yet'
+ : 'Click the trash icon to delete a document'}
+
+
+
+ {isLoading ? (
+
+
+ ) : filteredDocuments.length === 0 ? (
+
+
+ {searchQuery ? (
+
No documents match your search
+ ) : (
+ <>
+
No documents yet
+
Upload documents to get started
+
+ )}
+
+ {filteredDocuments.map((doc) => (
+
+
+
+
+
{doc.filename}
+
+ {new Date(doc.created_at).toLocaleDateString()} • {(doc.size / 1024).toFixed(1)} KB
+
+
+
+
+
+ {getStatusIcon(doc.status)}
+ {doc.status}
+
+
handleDelete(doc.id)}
+ >
+
+
+
+ ))}
+
+
+
+
+
+
+ Welcome to AgenticRAG
+
+ Enter your API key to access the system
+
+
+
+
+
([]);
+ const [models, setModels] = useState([]);
+ const [config, setConfig] = useState(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 (
+
+
+ );
+ }
+
+ // Filter configured providers for display
+ providers.filter((p) => p.configured);
+
+ return (
+
+ {/* Header */}
+
+
Settings
+
+ Configure your AgenticRAG preferences
+
+
+
+ {/* Appearance */}
+
+
+
+
+
+ Customize the look and feel of the application
+
+
+
+
+
Theme
+
+ setTheme('light')}
+ className="flex-1"
+ >
+
+ setTheme('dark')}
+ className="flex-1"
+ >
+
+ setTheme('system')}
+ className="flex-1"
+ >
+
+
+
+
+
+ {/* LLM Provider */}
+
+
+
+
+
+ Select your preferred language model provider
+
+
+
+ {/* Provider Selection */}
+
+
Provider
+
+ {providers.map((provider) => (
+
handleProviderChange(provider.id)}
+ disabled={!provider.configured}
+ className="justify-start"
+ >
+
+ {provider.configured ? (
+ {provider.name}
+
+
+ ))}
+
+
+
Model
+
+ {models.map((model) => (
+ setDefaultModel(model.id)}
+ className="justify-start"
+ >
+ {model.name}
+
+ ))}
+
+
+ {isSaving ? (
+ <>
+
+
+
+
+ {/* System Info */}
+ {config && (
+
+
+ System Information
+
+ Current system configuration
+
+
+
+
+ Embedding Provider
+ {config.embedding_provider}
+
+
+ Embedding Model
+ {config.embedding_model}
+
+
+ Vector Store
+ Qdrant ({config.qdrant_host}:{config.qdrant_port})
+
+
+ Configured Providers
+ {config.configured_providers.length}
+
+
+
+ )}
+
+
+
+ {/* Account */}
+
+
+
+
+
+ Manage your account settings
+
+
+
+
+
+
API Key
+
+ {apiKey ? `${apiKey.substring(0, 8)}...` : 'Not set'}
+
+
+
+
+
+
+
()(
+ 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
+ }),
+ }
+ )
+);
\ No newline at end of file
diff --git a/frontend/src/stores/chatStore.ts b/frontend/src/stores/chatStore.ts
new file mode 100644
index 0000000..ba208ba
--- /dev/null
+++ b/frontend/src/stores/chatStore.ts
@@ -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()(
+ 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
+ }),
+ }
+ )
+);
\ No newline at end of file
diff --git a/frontend/src/stores/index.ts b/frontend/src/stores/index.ts
new file mode 100644
index 0000000..15d30b7
--- /dev/null
+++ b/frontend/src/stores/index.ts
@@ -0,0 +1,3 @@
+export { useAuthStore } from './authStore';
+export { useChatStore } from './chatStore';
+export { useSettingsStore } from './settingsStore';
\ No newline at end of file
diff --git a/frontend/src/stores/settingsStore.ts b/frontend/src/stores/settingsStore.ts
new file mode 100644
index 0000000..a49f863
--- /dev/null
+++ b/frontend/src/stores/settingsStore.ts
@@ -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()(
+ 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',
+ }
+ )
+);
\ No newline at end of file
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..7319ab2
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -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;
+}
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..6695da6
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ darkMode: ["class"],
+ content: [
+ "./pages/**/*.{ts,tsx}",
+ "./components/**/*.{ts,tsx}",
+ "./app/**/*.{ts,tsx}",
+ "./src/**/*.{ts,tsx}",
+ ],
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: "0" },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
+}
\ No newline at end of file
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
new file mode 100644
index 0000000..d932263
--- /dev/null
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,32 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023", "DOM", "DOM.Iterable"],
+ "module": "esnext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+ "ignoreDeprecations": "6.0",
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Path aliases */
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000..d3c52ea
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023"],
+ "module": "esnext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000..77532d5
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
+ },
+ },
+ server: {
+ port: 3000,
+ proxy: {
+ '/api': {
+ target: 'http://localhost:8000',
+ changeOrigin: true,
+ },
+ },
+ },
+})
\ No newline at end of file