diff --git a/rag-view/src/pages/HomePage.jsx b/rag-view/src/pages/HomePage.jsx index ee0cefd..20254d2 100644 --- a/rag-view/src/pages/HomePage.jsx +++ b/rag-view/src/pages/HomePage.jsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect, useRef } from "react"; import { useNavigate } from "react-router-dom"; import { useDispatch, useSelector } from "react-redux"; import { @@ -25,6 +25,7 @@ function HomePage() { const [view, setView] = useState(null); const [fileContent, setFileContent] = useState(""); const [uploadingDefault, setUploadingDefault] = useState(false); + const autoUploadedRef = useRef(false); const token = useSelector((state) => state.userDetails.token); const userId = useSelector((state) => state.userDetails.userId); @@ -49,6 +50,22 @@ function HomePage() { const showUploadDefault = isGuest && !hasDefaultFile; const showViewExamples = isGuest && hasDefaultFile; + // Auto-upload default context for guest with no files + useEffect(() => { + if (!isGuest || loading || hasDefaultFile || autoUploadedRef.current) return; + autoUploadedRef.current = true; + (async () => { + try { + const res = await fetch(DEFAULT_CONTEXT_FILE); + const text = await res.text(); + const file = new File([text], "guest-example.txt", { type: "text/plain" }); + dispatch(uploadFilesWithProgress([file])); + } catch (err) { + console.error("Auto-upload failed:", err); + } + })(); + }, [isGuest, loading, hasDefaultFile, dispatch]); + const handleGuestLogin = () => { dispatch(fetchLoginUser({ email: GUEST_EMAIL, password: GUEST_PASSWORD })); }; diff --git a/rag-view/src/pages/RagPageOld.jsx b/rag-view/src/pages/RagPageOld.jsx deleted file mode 100644 index 7d49d19..0000000 --- a/rag-view/src/pages/RagPageOld.jsx +++ /dev/null @@ -1,426 +0,0 @@ -import { useState, useEffect } from "react"; -import { useSelector, useDispatch } from "react-redux"; -import fetchGetChatList from "../features/fetch-async/fetchGetChatList"; -import { - switchSearchMode, - setTopK, - setTopP, -} from "../features/slices/rag-slice"; -import fetchCreateNewChat from "../features/fetch-async/fetchCreateNewChat"; -import { - TOP_K_MIN_VALUE, - TOP_K_DEFAULT_VALUE, - TOP_K_MAX_VALUE, - TOP_P_FAST_VALUE, - TOP_P_DEFAULT_VALUE, - TOP_P_SLOW_VALUE, -} from "../features/constants"; - -// Helper function to format date -const formatDate = (dateString) => { - const date = new Date(dateString); - const now = new Date(); - const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24)); - - if (diffDays === 0) return "Today"; - if (diffDays === 1) return "Yesterday"; - - return date.toLocaleDateString("en-US", { month: "short", day: "numeric" }); -}; - -const RagPage = () => { - const dispatch = useDispatch(); - const [isSettingsOpen, setIsSettingsOpen] = useState(false); - const [isCreatingChat, setIsCreatingChat] = useState(false); - const [newChatTitle, setNewChatTitle] = useState(""); - const chatList = useSelector((state) => state.chats.chatList); - - // Sort chats: newest first (by createdAt descending) - const sortedChats = [...chatList].sort( - (a, b) => new Date(b.createdAt) - new Date(a.createdAt), - ); - - useEffect(() => { - if (chatList.length === 0) { - dispatch(fetchGetChatList()); - } - }, [dispatch, chatList.length]); - - // User details selectors - const { userName, userEmail, loadedFiles, loading } = useSelector( - (state) => state.userDetails, - ); - - // RAG config selectors - const { isUseOnlyContextSearch, topK, topP } = useSelector( - (state) => state.ragConfig, - ); - - const handleSearchModeChange = () => { - dispatch(switchSearchMode()); - }; - - const handleTopKChange = (value) => { - dispatch(setTopK(value)); - }; - - const handleTopPChange = (value) => { - dispatch(setTopP(value)); - }; - - const handleNewChatClick = () => { - setIsCreatingChat(true); - setNewChatTitle(""); - }; - - const handleCreateChat = () => { - if (newChatTitle.trim()) { - dispatch(fetchCreateNewChat(newChatTitle.trim())); - setIsCreatingChat(false); - setNewChatTitle(""); - } - }; - - const handleCancelCreate = () => { - setIsCreatingChat(false); - setNewChatTitle(""); - }; - - const handleKeyDown = (e) => { - if (e.key === "Enter" && newChatTitle.trim()) { - handleCreateChat(); - } else if (e.key === "Escape") { - handleCancelCreate(); - } - }; - - return ( -
- {/* Left Sidebar */} - - - {/* Main Content Area */} -
-
- {/* Header */} -
-

- RAG Query -

-
-
- - {/* User Info Section */} -
-

- - - - User Profile -

- {loading ? ( -

Loading...

- ) : ( -
-
- Username - - {userName || "—"} - -
-
- Email - - {userEmail || "—"} - -
-
- )} -
- - {/* Warning if no files */} - {(!loadedFiles || loadedFiles.length === 0) && ( -
- - - -

- Unable to make RAG query -

-

- Please upload at least one context file first -

-
- )} - - {/* Chat area placeholder */} - {loadedFiles && loadedFiles.length > 0 && ( -
-

Start a conversation...

-
- )} -
-
-
- ); -}; - -export default RagPage; diff --git a/rag-view/src/pages/UploadPageOld.jsx b/rag-view/src/pages/UploadPageOld.jsx deleted file mode 100644 index 5f9cb64..0000000 --- a/rag-view/src/pages/UploadPageOld.jsx +++ /dev/null @@ -1,683 +0,0 @@ -import { useState, useRef, useEffect } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { useNavigate } from "react-router-dom"; -import { - uploadFilesWithProgress, - resetUploadState, - setAreFilesValid, - setQuotaError, - clearQuotaError, - cancelUpload, -} from "../features/uploadFilesSlice"; -import { - MAX_FILE_SIZE_KB, - MAX_FILES_TO_UPLOAD, - PROGRESS_STATUS_PROCESSING, - PROGRESS_STATUS_COMPLETED, - PROGRESS_STATUS_ERROR, - PROGRESS_STATUS_SKIPPED, -} from "../features/constants"; - -export default function UploadPage() { - const dispatch = useDispatch(); - const navigate = useNavigate(); - const { - uploading, - error, - success, - areFilesValid, - quotaError, - progress, - uploadedFiles, - } = useSelector((state) => state.uploadFiles); - - const loadedFiles = useSelector((state) => state.userDetails.loadedFiles); - const maxFilesToLoad = useSelector( - (state) => state.userDetails.maxFilesToLoad - ); - - const loadedCount = loadedFiles?.length || 0; - const remainingSlots = Math.max(0, maxFilesToLoad - loadedCount); - - const [selectedFiles, setSelectedFiles] = useState([]); - const fileInputRef = useRef(null); - - useEffect(() => { - dispatch(resetUploadState()); - }, [dispatch]); - - const handleUploadClick = () => { - if (remainingSlots === 0) { - dispatch(setQuotaError("You have reached the maximum number of files")); - return; - } - if (fileInputRef.current) { - fileInputRef.current.value = null; - fileInputRef.current.click(); - } - }; - - const handleFilesChange = (event) => { - const files = Array.from(event.target.files || []); - dispatch(clearQuotaError()); - - // Check max files per upload - if (files.length > MAX_FILES_TO_UPLOAD) { - dispatch(resetUploadState()); - dispatch(setAreFilesValid(false)); - dispatch( - setQuotaError( - `You can upload maximum ${MAX_FILES_TO_UPLOAD} files at once` - ) - ); - setSelectedFiles([]); - return; - } - - // Check remaining slots - if (files.length > remainingSlots) { - dispatch(resetUploadState()); - dispatch(setAreFilesValid(false)); - dispatch( - setQuotaError( - `You can only upload ${remainingSlots} more file(s). Already loaded: ${loadedCount}/${maxFilesToLoad}` - ) - ); - setSelectedFiles([]); - return; - } - - // Check file size - const isSizeCorrect = files.every( - (file) => file.size <= MAX_FILE_SIZE_KB * 1024 - ); - if (!isSizeCorrect) { - dispatch(resetUploadState()); - dispatch(setAreFilesValid(false)); - dispatch( - setQuotaError(`Each file must be no more than ${MAX_FILE_SIZE_KB} KB`) - ); - setSelectedFiles([]); - return; - } - - dispatch(setAreFilesValid(true)); - setSelectedFiles(files); - }; - - const handleSend = () => { - if (!selectedFiles.length || uploading) return; - dispatch(uploadFilesWithProgress(selectedFiles)); - }; - - const handleClear = () => { - setSelectedFiles([]); - dispatch(clearQuotaError()); - }; - - const handleCancel = () => { - dispatch(cancelUpload()); - setSelectedFiles([]); - }; - - const handleTryAgain = () => { - dispatch(resetUploadState()); - setSelectedFiles([]); - }; - - const handleGoHome = () => { - dispatch(resetUploadState()); - navigate("/"); - }; - - const handleUploadAgain = () => { - dispatch(resetUploadState()); - setSelectedFiles([]); - }; - - const getStatusIcon = (status) => { - switch (status) { - case PROGRESS_STATUS_PROCESSING: - return "⏳"; - case PROGRESS_STATUS_COMPLETED: - return "✅"; - case PROGRESS_STATUS_ERROR: - return "❌"; - case PROGRESS_STATUS_SKIPPED: - return "⏭️"; - default: - return "📄"; - } - }; - - const getStatusText = (status) => { - switch (status) { - case PROGRESS_STATUS_PROCESSING: - return "Processing..."; - case PROGRESS_STATUS_COMPLETED: - return "Completed"; - case PROGRESS_STATUS_ERROR: - return "Error"; - case PROGRESS_STATUS_SKIPPED: - return "Skipped (duplicate)"; - default: - return "Waiting..."; - } - }; - - // Loading state with progress - if (uploading) { - return ( -
-

- Upload text files for context searching in LLM -

- -
-
- 📤 - Uploading files... -
- -
-
-
- -
-
- {progress.percent}% - Complete -
-
- - {progress.currentFile && ( -
- {getStatusIcon(progress.status)} - {progress.currentFile} - - {getStatusText(progress.status)} - -
- )} - -
- -
-
-
- ); - } - - // Error state - if (error.status !== undefined && error.status !== null) { - return ( -
-

- Upload text files for context searching in LLM -

-
- ⚠️ -
-
{error.message}
-
Status: {error.status}
-
-
-
- - -
-
- ); - } - - // Success state - if (success) { - const filesCount = uploadedFiles.length; - return ( -
-

- Upload text files for context searching in LLM -

-
- ✅ -
-
Upload completed!
-
- {filesCount} of {filesCount} files processed -
-
-
-
- - -
-
- ); - } - - // Default state - file selection - return ( -
-

- Upload text files for context searching in LLM -

-

- Each file must be no more than {MAX_FILE_SIZE_KB} KB. You can upload up - to {MAX_FILES_TO_UPLOAD} files at once. -

- - {/* File quota info */} -
-
- Files loaded: - - {loadedCount} / {maxFilesToLoad} - -
-
- Remaining slots: - 0 ? "#38a169" : "#e53e3e", - }} - > - {remainingSlots} - -
-
-
0 ? (loadedCount / maxFilesToLoad) * 100 : 0 - }%`, - }} - /> -
-
- - {!areFilesValid && !quotaError && ( -
- ⚠️ - File requirements not met. Please adjust your selection. -
- )} - - {quotaError && ( -
- ⚠️ - {quotaError} -
- )} - - {remainingSlots === 0 && !quotaError && ( -
- 🚫 -
-
- You have reached the maximum number of files -
-
-
- )} - - - - - - {selectedFiles.length > 0 && ( -
-

- Selected files ({selectedFiles.length}): -

-
    - {selectedFiles.map((file, index) => ( -
  • - 📄 - {file.name} - - {(file.size / 1024).toFixed(1)} KB - -
    • - ))} -
-
- )} - -
- - -
-
- ); -} - -const styles = { - container: { - padding: "2rem", - maxWidth: "600px", - margin: "0 auto", - fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif", - }, - title: { - fontSize: "1.5rem", - fontWeight: 600, - color: "#1a1a2e", - marginBottom: "0.5rem", - }, - subtitle: { - color: "#666", - marginBottom: "1.5rem", - lineHeight: 1.5, - }, - quotaContainer: { - backgroundColor: "#f8f9fa", - borderRadius: "8px", - padding: "1rem", - marginBottom: "1rem", - border: "1px solid #e0e0e0", - }, - quotaRow: { - display: "flex", - justifyContent: "space-between", - marginBottom: "0.5rem", - }, - quotaLabel: { - color: "#666", - fontSize: "0.9rem", - }, - quotaValue: { - fontWeight: 500, - color: "#1a1a2e", - }, - quotaProgressContainer: { - width: "100%", - height: "6px", - backgroundColor: "#e0e0e0", - borderRadius: "3px", - overflow: "hidden", - marginTop: "0.5rem", - }, - quotaProgressFill: { - height: "100%", - backgroundColor: "#667eea", - borderRadius: "3px", - transition: "width 0.3s ease", - }, - progressContainer: { - backgroundColor: "#f8f9fa", - borderRadius: "12px", - padding: "1.5rem", - marginTop: "1.5rem", - }, - progressHeader: { - display: "flex", - alignItems: "center", - gap: "0.5rem", - fontSize: "1.1rem", - fontWeight: 500, - marginBottom: "1rem", - }, - progressIcon: { - fontSize: "1.5rem", - }, - progressBarContainer: { - width: "100%", - height: "8px", - backgroundColor: "#e0e0e0", - borderRadius: "4px", - overflow: "hidden", - marginBottom: "1rem", - }, - progressBarFill: { - height: "100%", - backgroundColor: "#4caf50", - borderRadius: "4px", - transition: "width 0.3s ease", - }, - progressStats: { - display: "flex", - justifyContent: "center", - marginBottom: "1rem", - }, - statItem: { - display: "flex", - flexDirection: "column", - alignItems: "center", - }, - statValue: { - fontSize: "1.5rem", - fontWeight: 600, - color: "#1a1a2e", - }, - statLabel: { - fontSize: "0.85rem", - color: "#666", - }, - currentFile: { - display: "flex", - alignItems: "center", - gap: "0.75rem", - padding: "0.75rem", - backgroundColor: "#fff", - borderRadius: "8px", - border: "1px solid #e0e0e0", - }, - currentFileName: { - flex: 1, - fontWeight: 500, - overflow: "hidden", - textOverflow: "ellipsis", - whiteSpace: "nowrap", - }, - currentFileStatus: { - fontSize: "0.85rem", - color: "#666", - }, - cancelButtonContainer: { - display: "flex", - justifyContent: "center", - marginTop: "1.5rem", - }, - cancelButton: { - padding: "0.75rem 2rem", - fontSize: "1rem", - fontWeight: 500, - color: "#fff", - backgroundColor: "#e53e3e", - border: "none", - borderRadius: "6px", - cursor: "pointer", - transition: "background-color 0.2s", - }, - errorBox: { - display: "flex", - alignItems: "center", - gap: "1rem", - padding: "1rem", - backgroundColor: "#fff5f5", - border: "1px solid #feb2b2", - borderRadius: "8px", - marginTop: "1rem", - marginBottom: "1rem", - }, - errorIcon: { - fontSize: "2rem", - }, - errorMessage: { - color: "#c53030", - fontWeight: 500, - }, - errorStatus: { - color: "#666", - fontSize: "0.85rem", - }, - successBox: { - display: "flex", - alignItems: "center", - gap: "1rem", - padding: "1rem", - backgroundColor: "#f0fff4", - border: "1px solid #9ae6b4", - borderRadius: "8px", - marginTop: "1rem", - }, - successIcon: { - fontSize: "2rem", - }, - successMessage: { - color: "#276749", - fontWeight: 500, - fontSize: "1.1rem", - }, - successStats: { - color: "#666", - fontSize: "0.9rem", - }, - warningBox: { - display: "flex", - alignItems: "center", - gap: "0.5rem", - padding: "0.75rem 1rem", - backgroundColor: "#fffaf0", - border: "1px solid #fbd38d", - borderRadius: "8px", - color: "#c05621", - marginBottom: "1rem", - }, - uploadButton: { - display: "flex", - alignItems: "center", - justifyContent: "center", - gap: "0.5rem", - width: "100%", - padding: "1rem", - fontSize: "1rem", - backgroundColor: "#f8f9fa", - border: "2px dashed #ccc", - borderRadius: "8px", - cursor: "pointer", - transition: "all 0.2s", - }, - uploadIcon: { - fontSize: "1.25rem", - }, - selectedFilesContainer: { - marginTop: "1.5rem", - padding: "1rem", - backgroundColor: "#f8f9fa", - borderRadius: "8px", - }, - selectedFilesTitle: { - margin: "0 0 0.75rem 0", - fontSize: "1rem", - color: "#333", - }, - fileList: { - listStyle: "none", - margin: 0, - padding: 0, - }, - fileItem: { - display: "flex", - alignItems: "center", - gap: "0.5rem", - padding: "0.5rem 0", - borderBottom: "1px solid #e0e0e0", - }, - fileIcon: { - fontSize: "1rem", - }, - fileName: { - flex: 1, - overflow: "hidden", - textOverflow: "ellipsis", - whiteSpace: "nowrap", - }, - fileSize: { - color: "#666", - fontSize: "0.85rem", - }, - buttonGroup: { - display: "flex", - gap: "0.75rem", - marginTop: "1.5rem", - }, - button: { - padding: "0.75rem 1.5rem", - fontSize: "1rem", - fontWeight: 500, - color: "#fff", - backgroundColor: "#4a5568", - border: "none", - borderRadius: "6px", - cursor: "pointer", - transition: "background-color 0.2s", - }, - buttonSecondary: { - padding: "0.75rem 1.5rem", - fontSize: "1rem", - fontWeight: 500, - color: "#4a5568", - backgroundColor: "#e2e8f0", - border: "none", - borderRadius: "6px", - cursor: "pointer", - transition: "background-color 0.2s", - }, - buttonDisabled: { - opacity: 0.5, - cursor: "not-allowed", - }, -};