From 644ab2df35a0ad0b121bcd6bc3c336e1493e277c Mon Sep 17 00:00:00 2001 From: Yi Date: Fri, 27 Sep 2024 22:38:13 +0800 Subject: [PATCH] feat: add new external knowledge api from the knowledge create page --- web/app/(commonLayout)/datasets/Container.tsx | 30 +++++++++---------- .../(commonLayout)/datasets/connect/page.tsx | 12 ++------ web/app/(commonLayout)/datasets/layout.tsx | 14 +++++++++ web/app/(commonLayout)/datasets/page.tsx | 4 +-- .../external-api/external-api-panel/index.tsx | 4 +-- .../create/ExternalApiSelect.tsx | 20 ++++++++++++- .../create/ExternalApiSelection.tsx | 9 ++---- web/i18n/en-US/dataset.ts | 1 + web/i18n/zh-Hans/dataset.ts | 1 + 9 files changed, 57 insertions(+), 38 deletions(-) create mode 100644 web/app/(commonLayout)/datasets/layout.tsx diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/Container.tsx index 44d898adc4..bfe487a52b 100644 --- a/web/app/(commonLayout)/datasets/Container.tsx +++ b/web/app/(commonLayout)/datasets/Container.tsx @@ -2,7 +2,7 @@ // Libraries import { useEffect, useMemo, useRef, useState } from 'react' -import { useRouter } from 'next/navigation' +import { useRouter, useSearchParams } from 'next/navigation' import { useTranslation } from 'react-i18next' import { useDebounceFn } from 'ahooks' import useSWR from 'swr' @@ -19,7 +19,6 @@ import TagManagementModal from '@/app/components/base/tag-management' import TagFilter from '@/app/components/base/tag-management/filter' import Button from '@/app/components/base/button' import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development' -import { ExternalKnowledgeApiProvider } from '@/context/external-knowledge-api-context' // Services import { fetchDatasetApiBaseUrl } from '@/service/datasets' @@ -28,14 +27,25 @@ import { fetchDatasetApiBaseUrl } from '@/service/datasets' import { useTabSearchParams } from '@/hooks/use-tab-searchparams' import { useStore as useTagStore } from '@/app/components/base/tag-management/store' import { useAppContext } from '@/context/app-context' -import { ExternalApiPanelProvider, useExternalApiPanel } from '@/context/external-api-panel-context' +import { useExternalApiPanel } from '@/context/external-api-panel-context' -const ContainerContent = () => { +const Container = () => { const { t } = useTranslation() const router = useRouter() const { currentWorkspace } = useAppContext() const showTagManagementModal = useTagStore(s => s.showTagManagementModal) const { showExternalApiPanel, setShowExternalApiPanel } = useExternalApiPanel() + const searchParams = useSearchParams() + + useEffect(() => { + const openPanel = searchParams.get('openExternalApiPanel') + if (openPanel === 'true') { + setTimeout(() => { + setShowExternalApiPanel(true) + window.history.replaceState({}, '', '/datasets') + }, 500) + } + }, [searchParams, setShowExternalApiPanel]) const options = useMemo(() => { return [ @@ -109,19 +119,9 @@ const ContainerContent = () => { )} {activeTab === 'api' && data && } - {showExternalApiPanel && setShowExternalApiPanel(false)} isShow={showExternalApiPanel} datasetBindings={[]} />} + {showExternalApiPanel && setShowExternalApiPanel(false)} />} ) } -const Container = () => { - return ( - - - - - - ) -} - export default Container diff --git a/web/app/(commonLayout)/datasets/connect/page.tsx b/web/app/(commonLayout)/datasets/connect/page.tsx index 78647e874b..724c506a7f 100644 --- a/web/app/(commonLayout)/datasets/connect/page.tsx +++ b/web/app/(commonLayout)/datasets/connect/page.tsx @@ -1,16 +1,8 @@ import React from 'react' import ExternalKnowledgeBaseConnector from '@/app/components/datasets/external-knowledge-base/connector' -import { ExternalKnowledgeApiProvider } from '@/context/external-knowledge-api-context' -import { ExternalApiPanelProvider } from '@/context/external-api-panel-context' -const ExternalKnowledgeBaseCreation = async () => { - return ( - - - - - - ) +const ExternalKnowledgeBaseCreation = () => { + return } export default ExternalKnowledgeBaseCreation diff --git a/web/app/(commonLayout)/datasets/layout.tsx b/web/app/(commonLayout)/datasets/layout.tsx new file mode 100644 index 0000000000..aecb537aa6 --- /dev/null +++ b/web/app/(commonLayout)/datasets/layout.tsx @@ -0,0 +1,14 @@ +'use client' + +import { ExternalApiPanelProvider } from '@/context/external-api-panel-context' +import { ExternalKnowledgeApiProvider } from '@/context/external-knowledge-api-context' + +export default function DatasetsLayout({ children }: { children: React.ReactNode }) { + return ( + + + {children} + + + ) +} diff --git a/web/app/(commonLayout)/datasets/page.tsx b/web/app/(commonLayout)/datasets/page.tsx index 5aa11aa275..096a1b8979 100644 --- a/web/app/(commonLayout)/datasets/page.tsx +++ b/web/app/(commonLayout)/datasets/page.tsx @@ -1,9 +1,7 @@ import Container from './Container' const AppList = async () => { - return ( - - ) + return } export const metadata = { diff --git a/web/app/components/datasets/external-api/external-api-panel/index.tsx b/web/app/components/datasets/external-api/external-api-panel/index.tsx index 20d0768867..044c008b12 100644 --- a/web/app/components/datasets/external-api/external-api-panel/index.tsx +++ b/web/app/components/datasets/external-api/external-api-panel/index.tsx @@ -15,11 +15,9 @@ import { useModalContext } from '@/context/modal-context' type ExternalAPIPanelProps = { onClose: () => void - isShow: boolean - datasetBindings: { id: string; name: string }[] } -const ExternalAPIPanel: React.FC = ({ onClose, isShow, datasetBindings }) => { +const ExternalAPIPanel: React.FC = ({ onClose }) => { const { t } = useTranslation() const { setShowExternalKnowledgeAPIModal } = useModalContext() const { externalKnowledgeApiList, mutateExternalKnowledgeApis, isLoading } = useExternalKnowledgeApi() diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx index 1cc88fb872..faddb2593b 100644 --- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx +++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx @@ -1,6 +1,10 @@ import React, { useState } from 'react' -import { RiArrowDownSLine } from '@remixicon/react' +import { + RiAddLine, + RiArrowDownSLine, +} from '@remixicon/react' import { useTranslation } from 'react-i18next' +import { useRouter } from 'next/navigation' import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development' type ApiItem = { @@ -18,10 +22,15 @@ type ExternalApiSelectProps = { const ExternalApiSelect: React.FC = ({ items, defaultValue, onSelect }) => { const { t } = useTranslation() const [isOpen, setIsOpen] = useState(false) + const router = useRouter() const [selectedItem, setSelectedItem] = useState( items.find(item => item.value === defaultValue) || null, ) + const handleAddNewAPI = () => { + router.push('/datasets?openExternalApiPanel=true') + } + const handleSelect = (item: ApiItem) => { setSelectedItem(item) onSelect(item) @@ -64,6 +73,15 @@ const ExternalApiSelect: React.FC = ({ items, defaultVal ))} +
+
+ + {t('dataset.createNewExternalAPI')} +
+
)} diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx index d785d8aec8..9f5b587c6b 100644 --- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx +++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx @@ -1,3 +1,5 @@ +'use client' + import React, { useEffect } from 'react' import { useTranslation } from 'react-i18next' import { RiAddLine } from '@remixicon/react' @@ -6,7 +8,6 @@ import ExternalApiSelect from './ExternalApiSelect' import Input from '@/app/components/base/input' import Button from '@/app/components/base/button' import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context' -import { useExternalApiPanel } from '@/context/external-api-panel-context' type ExternalApiSelectionProps = { external_knowledge_api_id: string @@ -18,7 +19,6 @@ const ExternalApiSelection: React.FC = ({ external_kn const { t } = useTranslation() const router = useRouter() const { externalKnowledgeApiList } = useExternalKnowledgeApi() - // const { setShowExternalApiPanel } = useExternalApiPanel() const apiItems = externalKnowledgeApiList.map(api => ({ value: api.id, @@ -26,11 +26,8 @@ const ExternalApiSelection: React.FC = ({ external_kn url: api.settings.endpoint, })) - const { showExternalApiPanel, setShowExternalApiPanel } = useExternalApiPanel() - const handleAddNewAPI = () => { - router.back() - setShowExternalApiPanel(true) + router.push('/datasets?openExternalApiPanel=true') } useEffect(() => { diff --git a/web/i18n/en-US/dataset.ts b/web/i18n/en-US/dataset.ts index b4f149df5a..ca2d4e8d9d 100644 --- a/web/i18n/en-US/dataset.ts +++ b/web/i18n/en-US/dataset.ts @@ -16,6 +16,7 @@ const translation = { wordCount: ' k words', appCount: ' linked apps', createDataset: 'Create Knowledge', + createNewExternalAPI: 'Create a new External Knowledge API', noExternalKnowledge: 'There is no External Knowledge API yet, click here to create', createExternalAPI: 'Add an External Knowledge API', editExternalAPIFormTitle: 'Edit the External Knowledge API', diff --git a/web/i18n/zh-Hans/dataset.ts b/web/i18n/zh-Hans/dataset.ts index 792365967d..68a570e1a6 100644 --- a/web/i18n/zh-Hans/dataset.ts +++ b/web/i18n/zh-Hans/dataset.ts @@ -18,6 +18,7 @@ const translation = { createDataset: '创建知识库', noExternalKnowledge: '还没有外部知识库 API，点击此处创建', createExternalAPI: '添加外部知识库 API', + createNewExternalAPI: '创建新的外部知识库API', editExternalAPIFormTitle: '编辑外部知识库 API', editExternalAPITooltipTitle: '个关联知识库', editExternalAPIConfirmWarningContent: {