From d9a46fdff3441715a1d9edc33a96f75da451e5a0 Mon Sep 17 00:00:00 2001 From: shiva raj badu Date: Mon, 4 Aug 2025 14:19:35 +0545 Subject: [PATCH] fix(Nextjs): Header import issue in setting & document preview page --- .../components/DocumentPreviewPage.tsx | 63 ++++++++----- .../documents-preview/loading.tsx | 28 +++--- servers/nextjs/app/settings/SettingPage.tsx | 94 ++++++++++++------- 3 files changed, 111 insertions(+), 74 deletions(-) diff --git a/servers/nextjs/app/(presentation-generator)/documents-preview/components/DocumentPreviewPage.tsx b/servers/nextjs/app/(presentation-generator)/documents-preview/components/DocumentPreviewPage.tsx index 18a0babd..88e08ad7 100644 --- a/servers/nextjs/app/(presentation-generator)/documents-preview/components/DocumentPreviewPage.tsx +++ b/servers/nextjs/app/(presentation-generator)/documents-preview/components/DocumentPreviewPage.tsx @@ -1,13 +1,13 @@ /** * DocumentPreviewPage Component - * + * * A component that displays and manages document previews for presentation generation. * Features: * - Document content preview with markdown support * - Sidebar navigation for documents * - Document content editing and saving * - Presentation generation workflow - * + * * @component */ @@ -27,7 +27,7 @@ import MarkdownRenderer from "./MarkdownRenderer"; import { getIconFromFile } from "../../utils/others"; import { ChevronRight, PanelRightOpen, X } from "lucide-react"; import ToolTip from "@/components/ToolTip"; -import Header from "@/app/dashboard/components/Header"; +import Header from "@/components/Header"; // Types interface LoadingState { @@ -60,7 +60,9 @@ const DocumentsPreviewPage: React.FC = () => { // Local state const [textContents, setTextContents] = useState({}); const [selectedDocument, setSelectedDocument] = useState(null); - const [downloadingDocuments, setDownloadingDocuments] = useState([]); + const [downloadingDocuments, setDownloadingDocuments] = useState( + [] + ); const [isOpen, setIsOpen] = useState(true); const [showLoading, setShowLoading] = useState({ message: "", @@ -72,17 +74,19 @@ const DocumentsPreviewPage: React.FC = () => { // Memoized computed values const fileItems: FileItem[] = useMemo(() => { if (!files || !Array.isArray(files) || files.length === 0) return []; - return files.flat().filter((item: any) => item && item.name && item.file_path); + return files + .flat() + .filter((item: any) => item && item.name && item.file_path); }, [files]); const documentKeys = useMemo(() => { - return fileItems.map(file => file.name); + return fileItems.map((file) => file.name); }, [fileItems]); const updateSelectedDocument = (value: string) => { setSelectedDocument(value); if (textareaRef.current) { - textareaRef.current.value = textContents[value] || ''; + textareaRef.current.value = textContents[value] || ""; } }; @@ -92,7 +96,7 @@ const DocumentsPreviewPage: React.FC = () => { body: JSON.stringify({ filePath }), }); return res.json(); - } + }; const maintainDocumentTexts = async () => { const newDocuments: string[] = []; @@ -102,7 +106,7 @@ const DocumentsPreviewPage: React.FC = () => { documentKeys.forEach((key: string) => { if (!(key in textContents)) { newDocuments.push(key); - const fileItem = fileItems.find(item => item.name === key); + const fileItem = fileItems.find((item) => item.name === key); if (fileItem) { promises.push(readFile(fileItem.file_path)); } @@ -113,7 +117,7 @@ const DocumentsPreviewPage: React.FC = () => { setDownloadingDocuments(newDocuments); try { const results = await Promise.all(promises); - setTextContents(prev => { + setTextContents((prev) => { const newContents = { ...prev }; newDocuments.forEach((key, index) => { newContents[key] = results[index].content || ""; @@ -121,7 +125,7 @@ const DocumentsPreviewPage: React.FC = () => { return newContents; }); } catch (error) { - console.error('Error reading files:', error); + console.error("Error reading files:", error); toast.error("Failed to read document content"); } setDownloadingDocuments([]); @@ -130,7 +134,6 @@ const DocumentsPreviewPage: React.FC = () => { const handleCreatePresentation = async () => { try { - setShowLoading({ message: "Generating presentation outline...", show: true, @@ -138,20 +141,23 @@ const DocumentsPreviewPage: React.FC = () => { progress: true, }); - const documentPaths = fileItems.map((fileItem: FileItem) => fileItem.file_path); - const createResponse = await PresentationGenerationApi.createPresentation({ - prompt: config?.prompt ?? "", - n_slides: config?.slides ? parseInt(config.slides) : null, - file_paths: documentPaths, - language: config?.language ?? "", - - }); + const documentPaths = fileItems.map( + (fileItem: FileItem) => fileItem.file_path + ); + const createResponse = await PresentationGenerationApi.createPresentation( + { + prompt: config?.prompt ?? "", + n_slides: config?.slides ? parseInt(config.slides) : null, + file_paths: documentPaths, + language: config?.language ?? "", + } + ); dispatch(setPresentationId(createResponse.id)); router.push("/outline"); } catch (error: any) { console.error("Error in radar presentation creation:", error); - toast.error('Error', { + toast.error("Error", { description: error.message || "Error in radar presentation creation.", }); setShowLoading({ @@ -194,7 +200,9 @@ const DocumentsPreviewPage: React.FC = () => { {downloadingDocuments.includes(selectedDocument) ? ( ) : ( - + )} @@ -206,8 +214,10 @@ const DocumentsPreviewPage: React.FC = () => { if (!isOpen) return null; return ( -
+
setIsOpen(false)} className="text-black mb-4 ml-auto mr-0 cursor-pointer hover:text-gray-600" @@ -222,8 +232,9 @@ const DocumentsPreviewPage: React.FC = () => {
updateSelectedDocument(key)} - className={`${selectedDocument === key ? 'border border-blue-500' : "" - } flex p-2 rounded-sm gap-2 items-center cursor-pointer`} + className={`${ + selectedDocument === key ? "border border-blue-500" : "" + } flex p-2 rounded-sm gap-2 items-center cursor-pointer`} > { - return ( -
- -
- - + return ( +
+ +
+ + +
+
+ ); +}; -
-
- ) -} - -export default loading +export default loading; diff --git a/servers/nextjs/app/settings/SettingPage.tsx b/servers/nextjs/app/settings/SettingPage.tsx index ece5f16b..9a2ec8f2 100644 --- a/servers/nextjs/app/settings/SettingPage.tsx +++ b/servers/nextjs/app/settings/SettingPage.tsx @@ -1,6 +1,5 @@ "use client"; import React, { useState, useEffect } from "react"; -import Header from "../dashboard/components/Header"; import { Loader2, Download, CheckCircle } from "lucide-react"; import { toast } from "sonner"; import { RootState } from "@/store/store"; @@ -9,10 +8,11 @@ import { handleSaveLLMConfig } from "@/utils/storeHelpers"; import { checkIfSelectedOllamaModelIsPulled, pullOllamaModel, - LLMConfig + LLMConfig, } from "@/utils/providerUtils"; import { useRouter } from "next/navigation"; import LLMProviderSelection from "@/components/LLMSelection"; +import Header from "@/components/Header"; // Button state interface interface ButtonState { @@ -27,14 +27,16 @@ interface ButtonState { const SettingsPage = () => { const router = useRouter(); const userConfigState = useSelector((state: RootState) => state.userConfig); - const [llmConfig, setLlmConfig] = useState(userConfigState.llm_config); + const [llmConfig, setLlmConfig] = useState( + userConfigState.llm_config + ); const canChangeKeys = userConfigState.can_change_keys; const [isLoading, setIsLoading] = useState(false); const [buttonState, setButtonState] = useState({ isLoading: false, isDisabled: false, text: "Save Configuration", - showProgress: false + showProgress: false, }); const [downloadingModel, setDownloadingModel] = useState<{ @@ -47,8 +49,14 @@ const SettingsPage = () => { const [showDownloadModal, setShowDownloadModal] = useState(false); const downloadProgress = React.useMemo(() => { - if (downloadingModel && downloadingModel.downloaded !== null && downloadingModel.size !== null) { - return Math.round((downloadingModel.downloaded / downloadingModel.size) * 100); + if ( + downloadingModel && + downloadingModel.downloaded !== null && + downloadingModel.size !== null + ) { + return Math.round( + (downloadingModel.downloaded / downloadingModel.size) * 100 + ); } return 0; }, [downloadingModel?.downloaded, downloadingModel?.size]); @@ -56,17 +64,19 @@ const SettingsPage = () => { const handleSaveConfig = async () => { try { setIsLoading(true); - setButtonState(prev => ({ + setButtonState((prev) => ({ ...prev, isLoading: true, isDisabled: true, - text: "Saving Configuration..." + text: "Saving Configuration...", })); await handleSaveLLMConfig(llmConfig); if (llmConfig.LLM === "ollama" && llmConfig.OLLAMA_MODEL) { - const isPulled = await checkIfSelectedOllamaModelIsPulled(llmConfig.OLLAMA_MODEL); + const isPulled = await checkIfSelectedOllamaModelIsPulled( + llmConfig.OLLAMA_MODEL + ); if (!isPulled) { setShowDownloadModal(true); await handleModelDownload(); @@ -75,26 +85,24 @@ const SettingsPage = () => { toast.info("Configuration saved successfully"); setIsLoading(false); - setButtonState(prev => ({ + setButtonState((prev) => ({ ...prev, isLoading: false, isDisabled: false, - text: "Save Configuration" + text: "Save Configuration", })); router.back(); } catch (error) { console.error("Error:", error); toast.info( - error instanceof Error - ? error.message - : "Failed to save configuration" + error instanceof Error ? error.message : "Failed to save configuration" ); setIsLoading(false); - setButtonState(prev => ({ + setButtonState((prev) => ({ ...prev, isLoading: false, isDisabled: false, - text: "Save Configuration" + text: "Save Configuration", })); } }; @@ -110,15 +118,21 @@ const SettingsPage = () => { }; useEffect(() => { - if (downloadingModel && downloadingModel.downloaded !== null && downloadingModel.size !== null) { - const percentage = Math.round(((downloadingModel.downloaded / downloadingModel.size) * 100)); + if ( + downloadingModel && + downloadingModel.downloaded !== null && + downloadingModel.size !== null + ) { + const percentage = Math.round( + (downloadingModel.downloaded / downloadingModel.size) * 100 + ); setButtonState({ isLoading: true, isDisabled: true, text: `Downloading Model (${percentage}%)`, showProgress: true, progressPercentage: percentage, - status: downloadingModel.status + status: downloadingModel.status, }); } @@ -162,10 +176,11 @@ const SettingsPage = () => {