From d89811f238b11d3ff96ffe594d6b193630b314a5 Mon Sep 17 00:00:00 2001 From: chenghh-9609 <55340429+chenghh-9609@users.noreply.github.com> Date: Thu, 30 Oct 2025 21:33:33 +0800 Subject: [PATCH] add knowledgebase page (#39) * feat: Update site name to DataMate and refine text for AI data processing * feat: Refactor settings page and implement model access functionality - Created a new ModelAccess component for managing model configurations. - Removed the old Settings component and replaced it with a new SettingsPage component that integrates ModelAccess, SystemConfig, and WebhookConfig. - Added SystemConfig component for managing system settings. - Implemented WebhookConfig component for managing webhook configurations. - Updated API functions for model management in settings.apis.ts. - Adjusted routing to point to the new SettingsPage component. * feat: Implement Data Collection Page with Task Management and Execution Log - Created DataCollectionPage component to manage data collection tasks. - Added TaskManagement and ExecutionLog components for task handling and logging. - Integrated task operations including start, stop, edit, and delete functionalities. - Implemented filtering and searching capabilities in task management. - Introduced SimpleCronScheduler for scheduling tasks with cron expressions. - Updated CreateTask component to utilize new scheduling and template features. - Enhanced BasicInformation component to conditionally render fields based on visibility settings. - Refactored ImportConfiguration component to remove NAS import section. * feat: Update task creation API endpoint and enhance task creation form with new fields and validation * Refactor file upload and operator management components - Removed unnecessary console logs from file download and export functions. - Added size property to TaskItem interface for better task management. - Simplified TaskUpload component by utilizing useFileSliceUpload hook for file upload logic. - Enhanced OperatorPluginCreate component to handle file uploads and parsing more efficiently. - Updated ConfigureStep component to use Ant Design Form for better data handling and validation. - Improved PreviewStep component to navigate back to the operator market. - Added support for additional file types in UploadStep component. - Implemented delete operator functionality in OperatorMarketPage with confirmation prompts. - Cleaned up unused API functions in operator.api.ts to streamline the codebase. - Fixed number formatting utility to handle zero values correctly. * Refactor Knowledge Generation to Knowledge Base - Created new API service for Knowledge Base operations including querying, creating, updating, and deleting knowledge bases and files. - Added constants for Knowledge Base status and type mappings. - Defined models for Knowledge Base and related files. - Removed obsolete Knowledge Base creation and home components, replacing them with new implementations under the Knowledge Base structure. - Updated routing to reflect the new Knowledge Base paths. - Adjusted menu items to align with the new Knowledge Base terminology. - Modified ModelAccess interface to include modelName and type properties. --- .../Create/KnowledgeBaseCreate.tsx | 582 +++++++++++++++ .../Detail/KnowledgeBaseDetail.tsx | 50 +- .../FileDetail/KnowledgeBaseFileDetail.tsx | 6 +- .../Home/KnowledgeGeneration.tsx | 189 +++++ .../components/AddDataDialog.tsx | 66 ++ .../components/CreateKnowledgeBase.tsx | 136 ++++ .../pages/KnowledgeBase/knowledge-base.api.ts | 49 ++ .../KnowledgeBase/knowledge-base.const.tsx | 61 ++ .../knowledge-base.model.ts | 44 +- .../Create/KnowledgeBaseCreate.tsx | 671 ------------------ .../Home/KnowledgeGeneration.tsx | 409 ----------- .../KnowledgeGeneration/knowledge-base.api.ts | 0 .../knowledge-base.const.ts | 0 frontend/src/pages/Layout/menu.tsx | 2 +- .../src/pages/SettingsPage/ModelAccess.tsx | 5 +- frontend/src/routes/routes.ts | 15 +- 16 files changed, 1119 insertions(+), 1166 deletions(-) create mode 100644 frontend/src/pages/KnowledgeBase/Create/KnowledgeBaseCreate.tsx rename frontend/src/pages/{KnowledgeGeneration => KnowledgeBase}/Detail/KnowledgeBaseDetail.tsx (91%) rename frontend/src/pages/{KnowledgeGeneration => KnowledgeBase}/FileDetail/KnowledgeBaseFileDetail.tsx (99%) create mode 100644 frontend/src/pages/KnowledgeBase/Home/KnowledgeGeneration.tsx create mode 100644 frontend/src/pages/KnowledgeBase/components/AddDataDialog.tsx create mode 100644 frontend/src/pages/KnowledgeBase/components/CreateKnowledgeBase.tsx create mode 100644 frontend/src/pages/KnowledgeBase/knowledge-base.api.ts create mode 100644 frontend/src/pages/KnowledgeBase/knowledge-base.const.tsx rename frontend/src/pages/{KnowledgeGeneration => KnowledgeBase}/knowledge-base.model.ts (67%) delete mode 100644 frontend/src/pages/KnowledgeGeneration/Create/KnowledgeBaseCreate.tsx delete mode 100644 frontend/src/pages/KnowledgeGeneration/Home/KnowledgeGeneration.tsx delete mode 100644 frontend/src/pages/KnowledgeGeneration/knowledge-base.api.ts delete mode 100644 frontend/src/pages/KnowledgeGeneration/knowledge-base.const.ts diff --git a/frontend/src/pages/KnowledgeBase/Create/KnowledgeBaseCreate.tsx b/frontend/src/pages/KnowledgeBase/Create/KnowledgeBaseCreate.tsx new file mode 100644 index 0000000..b2b2d35 --- /dev/null +++ b/frontend/src/pages/KnowledgeBase/Create/KnowledgeBaseCreate.tsx @@ -0,0 +1,582 @@ +import { + sliceOperators, + vectorDatabases, +} from "@/mock/knowledgeBase"; +import { useState } from "react"; +import { + Button, + Card, + Input, + Select, + Checkbox, + Switch, + Tabs, + Divider, + Upload, + message, + Form, +} from "antd"; +import { + BookOpen, + Database, + Brain, + Scissors, + Split, + Upload as UploadIcon, + Folder, + CheckCircle, + File, + ArrowLeft, +} from "lucide-react"; +import { useNavigate } from "react-router"; +import type { Dataset } from "@/pages/DataManagement/dataset.model"; +import RadioCard from "@/components/RadioCard"; +import { KBTypeMap } from "../knowledge-base.const"; +import { KBType, KnowledgeBaseItem } from "../knowledge-base.model"; +import { createKnowledgeBaseUsingPost } from "../knowledge-base.api"; + +const { TextArea } = Input; +const { Option } = Select; + +const KnowledgeBaseCreatePage: React.FC = () => { + const navigate = useNavigate(); + const [form] = Form.useForm(); + const [datasetSearchQuery, setDatasetSearchQuery] = useState(""); + const [selectedDatasetId, setSelectedDatasetId] = useState( + null + ); + const [uploadedFiles, setUploadedFiles] = useState([]); + const [datasets, setDatasets] = useState([]); + const [selectedDatasetFiles, setSelectedDatasetFiles] = useState< + { + datasetId: string; + fileId: string; + name: string; + size: string; + type: string; + }[] + >([]); + const [selectedSliceOperators, setSelectedSliceOperators] = useState< + string[] + >(["semantic-split", "paragraph-split"]); + + // Form initial values + const [newKB, setNewKB] = useState>({ + name: "", + description: "", + type: KBType.STRUCTURED, + embeddingModel: "text-embedding-3-large", + llmModel: "gpt-4o", + chunkSize: 512, + overlap: 50, + sliceMethod: "semantic" as + | "paragraph" + | "length" + | "delimiter" + | "semantic", + delimiter: "", + enableQA: true, + vectorDatabase: "pinecone", + }); + + // Dataset file selection helpers + const handleDatasetFileToggle = ( + datasetId: string, + file: MockDataset["files"][0] + ) => { + setSelectedDatasetFiles((prev) => { + const isSelected = prev.some( + (f) => f.datasetId === datasetId && f.fileId === file.id + ); + if (isSelected) { + return prev.filter( + (f) => !(f.datasetId === datasetId && f.fileId === file.id) + ); + } else { + return [...prev, { datasetId, ...file }]; + } + }); + }; + + const handleSelectAllDatasetFiles = ( + dataset: MockDataset, + checked: boolean + ) => { + setSelectedDatasetFiles((prev) => { + let newSelectedFiles = [...prev]; + if (checked) { + dataset.files.forEach((file) => { + if ( + !newSelectedFiles.some( + (f) => f.datasetId === dataset.id && f.fileId === file.id + ) + ) { + newSelectedFiles.push({ datasetId: dataset.id, ...file }); + } + }); + } else { + newSelectedFiles = newSelectedFiles.filter( + (f) => f.datasetId !== dataset.id + ); + } + return newSelectedFiles; + }); + }; + + const isDatasetFileSelected = (datasetId: string, fileId: string) => { + return selectedDatasetFiles.some( + (f) => f.datasetId === datasetId && f.fileId === fileId + ); + }; + + const isAllDatasetFilesSelected = (dataset: MockDataset) => { + return dataset.files.every((file) => + isDatasetFileSelected(dataset.id, file.id) + ); + }; + + const handleSliceOperatorToggle = (operatorId: string) => { + setSelectedSliceOperators((prev) => + prev.includes(operatorId) + ? prev.filter((id) => id !== operatorId) + : [...prev, operatorId] + ); + }; + + // 文件上传 + const handleFileChange = (info: any) => { + setUploadedFiles(info.fileList.map((f: any) => f.originFileObj)); + }; + + // 提交表单 + const handleCreateKnowledgeBase = async (values: any) => { + await createKnowledgeBaseUsingPost(values); + message.success("知识库创建成功！"); + navigate("/data/knowledge-base"); + }; + + return ( +
+ {/* Header */} +
+
+ +

创建知识库

+
+
+ +
+
+
setNewKB(allValues)} + > + {/* 基本信息 */} +

基本信息

+ + + + +