From 9646da833bc3d94564c10649b62a378d0190471e Mon Sep 17 00:00:00 2001 From: blackhao <13851610112@163.com> Date: Wed, 10 Dec 2025 20:12:21 -0600 Subject: user data --- frontend/src/App.tsx | 56 +++++- frontend/src/components/LeftSidebar.tsx | 43 ++++- frontend/src/components/Sidebar.tsx | 45 +++-- frontend/src/pages/AuthPage.tsx | 303 ++++++++++++++++++++++++++++++++ frontend/src/store/authStore.ts | 157 +++++++++++++++++ frontend/src/store/flowStore.ts | 42 ++++- 6 files changed, 616 insertions(+), 30 deletions(-) create mode 100644 frontend/src/pages/AuthPage.tsx create mode 100644 frontend/src/store/authStore.ts (limited to 'frontend/src') diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 5477ff2..cfbb141 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -12,12 +12,14 @@ import ReactFlow, { } from 'reactflow'; import 'reactflow/dist/style.css'; import useFlowStore from './store/flowStore'; +import { useAuthStore } from './store/authStore'; import LLMNode from './components/nodes/LLMNode'; import MergedEdge from './components/edges/MergedEdge'; import Sidebar from './components/Sidebar'; import LeftSidebar from './components/LeftSidebar'; import { ContextMenu } from './components/ContextMenu'; -import { Plus, Sun, Moon, LayoutGrid } from 'lucide-react'; +import { Plus, Sun, Moon, LayoutGrid, Loader2 } from 'lucide-react'; +import AuthPage from './pages/AuthPage'; const nodeTypes = { llmNode: LLMNode, @@ -397,10 +399,60 @@ function Flow() { ); } -export default function App() { +function AuthWrapper() { + const { isAuthenticated, checkAuth, user } = useAuthStore(); + const { refreshProjectTree, refreshFiles, loadArchivedNodes, clearBlueprint } = useFlowStore(); + const [checking, setChecking] = useState(true); + const [initializing, setInitializing] = useState(false); + const prevUserRef = useRef(null); + + useEffect(() => { + checkAuth().finally(() => setChecking(false)); + }, [checkAuth]); + + // When user changes (login/logout), refresh all user-specific data + useEffect(() => { + const currentUsername = user?.username || null; + + // If user changed, reload everything + if (isAuthenticated && currentUsername && currentUsername !== prevUserRef.current) { + setInitializing(true); + prevUserRef.current = currentUsername; + + // Clear old data and load new user's data + clearBlueprint(); + Promise.all([ + refreshProjectTree(), + refreshFiles(), + loadArchivedNodes() + ]).finally(() => setInitializing(false)); + } else if (!isAuthenticated) { + prevUserRef.current = null; + } + }, [isAuthenticated, user, refreshProjectTree, refreshFiles, loadArchivedNodes, clearBlueprint]); + + if (checking || initializing) { + return ( +
+
+ +

{initializing ? 'Loading workspace...' : 'Loading...'}

+
+
+ ); + } + + if (!isAuthenticated) { + return ; + } + return ( ); } + +export default function App() { + return ; +} diff --git a/frontend/src/components/LeftSidebar.tsx b/frontend/src/components/LeftSidebar.tsx index aff2df8..1df63fe 100644 --- a/frontend/src/components/LeftSidebar.tsx +++ b/frontend/src/components/LeftSidebar.tsx @@ -2,9 +2,10 @@ import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react' import { useReactFlow } from 'reactflow'; import { Folder, FileText, Archive, ChevronLeft, ChevronRight, Trash2, MessageSquare, - MoreVertical, Download, Upload, Plus, RefreshCw, Edit3, Loader2 + MoreVertical, Download, Upload, Plus, RefreshCw, Edit3, Loader2, LogOut, User } from 'lucide-react'; import useFlowStore, { type FSItem, type BlueprintDocument, type FileMeta } from '../store/flowStore'; +import { useAuthStore } from '../store/authStore'; interface LeftSidebarProps { isOpen: boolean; @@ -39,6 +40,7 @@ const LeftSidebar: React.FC = ({ isOpen, onToggle }) => { serializeBlueprint, clearBlueprint } = useFlowStore(); + const { user, logout } = useAuthStore(); const { setViewport, getViewport } = useReactFlow(); const isDark = theme === 'dark'; const fileInputRef = useRef(null); @@ -443,13 +445,38 @@ const LeftSidebar: React.FC = ({ isOpen, onToggle }) => {
-

Workspace

- +
+

Workspace

+ {user && ( + + + {user.username} + + )} +
+
+ {user && ( + + )} + +
{/* Tabs */} diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index a8dd82e..17050aa 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1,9 +1,10 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'; import { useReactFlow } from 'reactflow'; import useFlowStore from '../store/flowStore'; +import { useAuthStore } from '../store/authStore'; import type { NodeData, Trace, Message, MergedTrace, MergeStrategy, FileMeta } from '../store/flowStore'; import ReactMarkdown from 'react-markdown'; -import { Play, Settings, Info, Save, ChevronLeft, ChevronRight, Maximize2, Edit3, X, Check, FileText, MessageCircle, Send, GripVertical, GitMerge, Trash2, AlertCircle, Loader2, Navigation, Upload, Search, Link } from 'lucide-react'; +import { Play, Settings, Info, Save, ChevronLeft, ChevronRight, Maximize2, Edit3, X, Check, FileText, MessageCircle, Send, GripVertical, GitMerge, Trash2, AlertCircle, Loader2, Navigation, Upload, Search, Link, LogOut } from 'lucide-react'; interface SidebarProps { isOpen: boolean; @@ -19,6 +20,7 @@ const Sidebar: React.FC = ({ isOpen, onToggle, onInteract }) => { files, uploadFile, refreshFiles, addFileScope, removeFileScope, currentBlueprintPath, saveCurrentBlueprint } = useFlowStore(); + const { getAuthHeader, user, logout } = useAuthStore(); const { setCenter, getViewport } = useReactFlow(); const isDark = theme === 'dark'; const [activeTab, setActiveTab] = useState<'interact' | 'settings' | 'debug'>('interact'); @@ -295,7 +297,7 @@ const Sidebar: React.FC = ({ isOpen, onToggle, onInteract }) => { try { const response = await fetch('http://localhost:8000/api/run_node_stream', { method: 'POST', - headers: { 'Content-Type': 'application/json' }, + headers: { 'Content-Type': 'application/json', ...getAuthHeader() }, body: JSON.stringify({ node_id: runningNodeId, incoming_contexts: [{ messages: context }], @@ -386,7 +388,7 @@ const Sidebar: React.FC = ({ isOpen, onToggle, onInteract }) => { try { const res = await fetch('http://localhost:8000/api/summarize', { method: 'POST', - headers: { 'Content-Type': 'application/json' }, + headers: { 'Content-Type': 'application/json', ...getAuthHeader() }, body: JSON.stringify({ content: selectedNode.data.response, model: summaryModel @@ -412,7 +414,7 @@ const Sidebar: React.FC = ({ isOpen, onToggle, onInteract }) => { try { const res = await fetch('http://localhost:8000/api/generate_title', { method: 'POST', - headers: { 'Content-Type': 'application/json' }, + headers: { 'Content-Type': 'application/json', ...getAuthHeader() }, body: JSON.stringify({ user_prompt: userPrompt, response }) }); @@ -489,7 +491,7 @@ const Sidebar: React.FC = ({ isOpen, onToggle, onInteract }) => { const res = await fetch('http://localhost:8000/api/summarize', { method: 'POST', - headers: { 'Content-Type': 'application/json' }, + headers: { 'Content-Type': 'application/json', ...getAuthHeader() }, body: JSON.stringify({ content, model_name: 'gpt-5-nano', @@ -1003,7 +1005,7 @@ const Sidebar: React.FC = ({ isOpen, onToggle, onInteract }) => { // Call LLM API with current messages as context const response = await fetch('http://localhost:8000/api/run_node_stream', { method: 'POST', - headers: { 'Content-Type': 'application/json' }, + headers: { 'Content-Type': 'application/json', ...getAuthHeader() }, body: JSON.stringify({ node_id: 'quick_chat_temp', incoming_contexts: [{ messages: messagesBeforeSend }], @@ -1835,17 +1837,30 @@ const Sidebar: React.FC = ({ isOpen, onToggle, onInteract }) => { {activeTab === 'settings' && (
{/* Attachments Section */} + {(() => { + const isGemini = selectedNode.data.model.startsWith('gemini'); + return (
+ {isGemini && ( +

+ File attachments are not supported for Gemini models. +

+ )} +
)}
+ ); + })()}
@@ -2562,7 +2583,8 @@ const Sidebar: React.FC = ({ isOpen, onToggle, onInteract }) => { )} - {/* File Attachment Buttons */} + {/* File Attachment Buttons - Hidden for Gemini */} + {!quickChatModel.startsWith('gemini') && (
+ )}
{/* Input Area */} diff --git a/frontend/src/pages/AuthPage.tsx b/frontend/src/pages/AuthPage.tsx new file mode 100644 index 0000000..d213190 --- /dev/null +++ b/frontend/src/pages/AuthPage.tsx @@ -0,0 +1,303 @@ +import React, { useState, useCallback } from 'react'; +import { useAuthStore } from '../store/authStore'; +import { Loader2, User, Mail, Lock, AlertCircle, CheckCircle, XCircle } from 'lucide-react'; + +const API_BASE = 'http://localhost:8000'; + +interface AuthPageProps { + onSuccess?: () => void; +} + +const AuthPage: React.FC = ({ onSuccess }) => { + const [isLogin, setIsLogin] = useState(true); + const [username, setUsername] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [localError, setLocalError] = useState(''); + + // Real-time availability checks + const [usernameStatus, setUsernameStatus] = useState<'idle' | 'checking' | 'available' | 'taken'>('idle'); + const [emailStatus, setEmailStatus] = useState<'idle' | 'checking' | 'available' | 'taken'>('idle'); + + const { login, register, isLoading, error, clearError } = useAuthStore(); + + // Check username availability + const checkUsername = useCallback(async (value: string) => { + if (!value.trim() || value.length < 2) { + setUsernameStatus('idle'); + return; + } + setUsernameStatus('checking'); + try { + const res = await fetch(`${API_BASE}/api/auth/check-username/${encodeURIComponent(value)}`); + const data = await res.json(); + setUsernameStatus(data.available ? 'available' : 'taken'); + } catch { + setUsernameStatus('idle'); + } + }, []); + + // Check email availability + const checkEmail = useCallback(async (value: string) => { + if (!value.trim() || !value.includes('@')) { + setEmailStatus('idle'); + return; + } + setEmailStatus('checking'); + try { + const res = await fetch(`${API_BASE}/api/auth/check-email/${encodeURIComponent(value)}`); + const data = await res.json(); + setEmailStatus(data.available ? 'available' : 'taken'); + } catch { + setEmailStatus('idle'); + } + }, []); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setLocalError(''); + clearError(); + + // Validation + if (!username.trim()) { + setLocalError('Username is required'); + return; + } + if (!password) { + setLocalError('Password is required'); + return; + } + + if (!isLogin) { + if (!email.trim()) { + setLocalError('Email is required'); + return; + } + if (password !== confirmPassword) { + setLocalError('Passwords do not match'); + return; + } + if (password.length < 6) { + setLocalError('Password must be at least 6 characters'); + return; + } + if (usernameStatus === 'taken') { + setLocalError('Username is already taken'); + return; + } + if (emailStatus === 'taken') { + setLocalError('Email is already registered'); + return; + } + } + + try { + if (isLogin) { + await login(username, password); + onSuccess?.(); + } else { + await register(username, email, password); + // Auto-login after successful registration + await login(username, password); + onSuccess?.(); + } + } catch (err) { + // Error is handled by the store + } + }; + + const switchMode = () => { + setIsLogin(!isLogin); + setLocalError(''); + clearError(); + setPassword(''); + setConfirmPassword(''); + setUsernameStatus('idle'); + setEmailStatus('idle'); + }; + + const displayError = localError || error; + + return ( +
+ {/* Background pattern */} +
+
+
+
+ +
+ {/* Logo/Brand */} +
+

+ ContextFlow +

+

+ {isLogin ? 'Welcome back!' : 'Create your account'} +

+
+ + {/* Card */} +
+ {/* Error Message */} + {displayError && ( +
+ +

{displayError}

+
+ )} + +
+ {/* Username */} +
+ +
+ + { + setUsername(e.target.value); + if (!isLogin) setUsernameStatus('idle'); + }} + onBlur={() => !isLogin && checkUsername(username)} + placeholder="Enter your username" + className={`w-full pl-10 pr-10 py-3 bg-gray-900/50 border rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all ${ + !isLogin && usernameStatus === 'taken' ? 'border-red-500' : + !isLogin && usernameStatus === 'available' ? 'border-green-500' : 'border-gray-700' + }`} + autoComplete="username" + /> + {!isLogin && usernameStatus !== 'idle' && ( +
+ {usernameStatus === 'checking' && } + {usernameStatus === 'available' && } + {usernameStatus === 'taken' && } +
+ )} +
+ {!isLogin && usernameStatus === 'taken' && ( +

This username is already taken

+ )} +
+ + {/* Email (only for register) */} + {!isLogin && ( +
+ +
+ + { + setEmail(e.target.value); + setEmailStatus('idle'); + }} + onBlur={() => checkEmail(email)} + placeholder="Enter your email" + className={`w-full pl-10 pr-10 py-3 bg-gray-900/50 border rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all ${ + emailStatus === 'taken' ? 'border-red-500' : + emailStatus === 'available' ? 'border-green-500' : 'border-gray-700' + }`} + autoComplete="email" + /> + {emailStatus !== 'idle' && ( +
+ {emailStatus === 'checking' && } + {emailStatus === 'available' && } + {emailStatus === 'taken' && } +
+ )} +
+ {emailStatus === 'taken' && ( +

This email is already registered

+ )} +
+ )} + + {/* Password */} +
+ +
+ + setPassword(e.target.value)} + placeholder="Enter your password" + className="w-full pl-10 pr-4 py-3 bg-gray-900/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" + autoComplete={isLogin ? "current-password" : "new-password"} + /> +
+
+ + {/* Confirm Password (only for register) */} + {!isLogin && ( +
+ +
+ + setConfirmPassword(e.target.value)} + placeholder="Confirm your password" + className="w-full pl-10 pr-4 py-3 bg-gray-900/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" + autoComplete="new-password" + /> +
+
+ )} + + {/* Submit Button */} + +
+ + {/* Switch Mode */} +
+

+ {isLogin ? "Don't have an account? " : "Already have an account? "} + +

+
+
+ + {/* Footer */} +

+ Visual LLM Conversation Graph Editor +

+
+
+ ); +}; + +export default AuthPage; + diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts new file mode 100644 index 0000000..652256c --- /dev/null +++ b/frontend/src/store/authStore.ts @@ -0,0 +1,157 @@ +import { create } from 'zustand'; +import { persist } from 'zustand/middleware'; + +const API_BASE = 'http://localhost:8000'; + +interface UserInfo { + id: number; + username: string; + email: string; + created_at: string; +} + +interface AuthState { + token: string | null; + user: UserInfo | null; + isAuthenticated: boolean; + isLoading: boolean; + error: string | null; + + // Actions + login: (username: string, password: string) => Promise; + register: (username: string, email: string, password: string) => Promise; + logout: () => void; + checkAuth: () => Promise; + clearError: () => void; + getAuthHeader: () => { Authorization: string } | {}; +} + +export const useAuthStore = create()( + persist( + (set, get) => ({ + token: null, + user: null, + isAuthenticated: false, + isLoading: false, + error: null, + + login: async (username: string, password: string) => { + set({ isLoading: true, error: null }); + + try { + // Use JSON login endpoint + const res = await fetch(`${API_BASE}/api/auth/login/json`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ username, password }), + }); + + if (!res.ok) { + const errorData = await res.json().catch(() => ({})); + throw new Error(errorData.detail || 'Login failed'); + } + + const data = await res.json(); + set({ + token: data.access_token, + isAuthenticated: true, + isLoading: false + }); + + // Fetch user info + await get().checkAuth(); + } catch (err) { + set({ + isLoading: false, + error: (err as Error).message, + isAuthenticated: false, + token: null, + user: null + }); + throw err; + } + }, + + register: async (username: string, email: string, password: string) => { + set({ isLoading: true, error: null }); + + try { + const res = await fetch(`${API_BASE}/api/auth/register`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ username, email, password }), + }); + + if (!res.ok) { + const errorData = await res.json().catch(() => ({})); + throw new Error(errorData.detail || 'Registration failed'); + } + + set({ isLoading: false }); + } catch (err) { + set({ isLoading: false, error: (err as Error).message }); + throw err; + } + }, + + logout: () => { + set({ + token: null, + user: null, + isAuthenticated: false, + error: null + }); + }, + + checkAuth: async () => { + const token = get().token; + if (!token) { + set({ isAuthenticated: false, user: null }); + return false; + } + + try { + const res = await fetch(`${API_BASE}/api/auth/me`, { + headers: { Authorization: `Bearer ${token}` }, + }); + + if (res.ok) { + const user = await res.json(); + set({ user, isAuthenticated: true }); + return true; + } else { + // Token is invalid + set({ token: null, user: null, isAuthenticated: false }); + return false; + } + } catch { + set({ token: null, user: null, isAuthenticated: false }); + return false; + } + }, + + clearError: () => { + set({ error: null }); + }, + + getAuthHeader: () => { + const token = get().token; + if (token) { + return { Authorization: `Bearer ${token}` }; + } + return {}; + }, + }), + { + name: 'contextflow-auth', + partialize: (state) => ({ + token: state.token, + user: state.user, + isAuthenticated: state.isAuthenticated + }), + } + ) +); + +export default useAuthStore; + diff --git a/frontend/src/store/flowStore.ts b/frontend/src/store/flowStore.ts index 498937e..de23c95 100644 --- a/frontend/src/store/flowStore.ts +++ b/frontend/src/store/flowStore.ts @@ -250,11 +250,35 @@ const getStableColor = (str: string) => { return `hsl(${hue}, 70%, 60%)`; }; +import { useAuthStore } from './authStore'; + const API_BASE = import.meta.env.VITE_BACKEND_URL || 'http://localhost:8000'; -const DEFAULT_USER = 'test'; +const DEFAULT_USER = 'test'; // Fallback for unauthenticated requests + +// Get current username directly from authStore +const getCurrentUser = () => { + const authState = useAuthStore.getState(); + return authState.user?.username || DEFAULT_USER; +}; + +// Get auth headers directly from authStore +const getAuthHeaders = (): Record => { + const authState = useAuthStore.getState(); + if (authState.token) { + return { Authorization: `Bearer ${authState.token}` }; + } + return {}; +}; const jsonFetch = async (url: string, options?: RequestInit): Promise => { - const res = await fetch(url, options); + const authHeaders = getAuthHeaders(); + const res = await fetch(url, { + ...options, + headers: { + ...options?.headers, + ...authHeaders, + }, + }); if (!res.ok) { const detail = await res.text(); throw new Error(detail || `Request failed: ${res.status}`); @@ -1474,7 +1498,7 @@ const useFlowStore = create((set, get) => { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ - user: DEFAULT_USER, + user: getCurrentUser(), path, content: payload, }), @@ -1485,14 +1509,14 @@ const useFlowStore = create((set, get) => { readBlueprintFile: async (path: string): Promise => { const res = await jsonFetch<{ content: BlueprintDocument }>( - `${API_BASE}/api/projects/file?user=${encodeURIComponent(DEFAULT_USER)}&path=${encodeURIComponent(path)}` + `${API_BASE}/api/projects/file?user=${encodeURIComponent(getCurrentUser())}&path=${encodeURIComponent(path)}` ); return validateBlueprint(res.content); }, refreshProjectTree: async () => { const tree = await jsonFetch( - `${API_BASE}/api/projects/tree?user=${encodeURIComponent(DEFAULT_USER)}` + `${API_BASE}/api/projects/tree?user=${encodeURIComponent(getCurrentUser())}` ); set({ projectTree: tree }); return tree; @@ -1557,7 +1581,7 @@ const useFlowStore = create((set, get) => { loadArchivedNodes: async () => { const res = await jsonFetch<{ archived: ArchivedNode[] }>( - `${API_BASE}/api/projects/archived?user=${encodeURIComponent(DEFAULT_USER)}` + `${API_BASE}/api/projects/archived?user=${encodeURIComponent(getCurrentUser())}` ); set({ archivedNodes: res.archived || [] }); }, @@ -1574,7 +1598,7 @@ const useFlowStore = create((set, get) => { // Files management refreshFiles: async () => { const res = await jsonFetch<{ files: FileMeta[] }>( - `${API_BASE}/api/files?user=${encodeURIComponent(DEFAULT_USER)}` + `${API_BASE}/api/files?user=${encodeURIComponent(getCurrentUser())}` ); set({ files: res.files || [] }); }, @@ -1592,7 +1616,7 @@ const useFlowStore = create((set, get) => { form.append('purpose', purpose); } try { - const res = await fetch(`${API_BASE}/api/files/upload?user=${encodeURIComponent(DEFAULT_USER)}`, { + const res = await fetch(`${API_BASE}/api/files/upload?user=${encodeURIComponent(getCurrentUser())}`, { method: 'POST', body: form, }); @@ -1611,7 +1635,7 @@ const useFlowStore = create((set, get) => { }, deleteFile: async (fileId: string) => { - const res = await fetch(`${API_BASE}/api/files/delete?user=${encodeURIComponent(DEFAULT_USER)}&file_id=${encodeURIComponent(fileId)}`, { + const res = await fetch(`${API_BASE}/api/files/delete?user=${encodeURIComponent(getCurrentUser())}&file_id=${encodeURIComponent(fileId)}`, { method: 'POST', }); if (!res.ok) { -- cgit v1.2.3