feat: add new external knowledge api from the knowledge create page

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 && <Doc apiBaseUrl={data.api_base_url || ''} />}
 
-      {showExternalApiPanel && <ExternalAPIPanel onClose={() => setShowExternalApiPanel(false)} isShow={showExternalApiPanel} datasetBindings={[]} />}
+      {showExternalApiPanel && <ExternalAPIPanel onClose={() => setShowExternalApiPanel(false)} />}
     </div>
   )
 }
 
-const Container = () => {
-  return (
-    <ExternalKnowledgeApiProvider>
-      <ExternalApiPanelProvider>
-        <ContainerContent />
-      </ExternalApiPanelProvider>
-    </ExternalKnowledgeApiProvider>
-  )
-}
-
 export default Container

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 () => {
+const ExternalKnowledgeBaseCreation = () => {
-  return (
+  return <ExternalKnowledgeBaseConnector />
-    <ExternalKnowledgeApiProvider>
-      <ExternalApiPanelProvider>
-        <ExternalKnowledgeBaseConnector />
-      </ExternalApiPanelProvider>
-    </ExternalKnowledgeApiProvider>
-  )
 }
 
 export default ExternalKnowledgeBaseCreation

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 (
+    <ExternalKnowledgeApiProvider>
+      <ExternalApiPanelProvider>
+        {children}
+      </ExternalApiPanelProvider>
+    </ExternalKnowledgeApiProvider>
+  )
+}

web/app/(commonLayout)/datasets/page.tsx

@@ -1,9 +1,7 @@
 import Container from './Container'
 
 const AppList = async () => {
-  return (
+  return <Container />
-    <Container />
-  )
 }
 
 export const metadata = {

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<ExternalAPIPanelProps> = ({ onClose, isShow, datasetBindings }) => {
+const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
   const { t } = useTranslation()
   const { setShowExternalKnowledgeAPIModal } = useModalContext()
   const { externalKnowledgeApiList, mutateExternalKnowledgeApis, isLoading } = useExternalKnowledgeApi()

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<ExternalApiSelectProps> = ({ items, defaultValue, onSelect }) => {
   const { t } = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
+  const router = useRouter()
   const [selectedItem, setSelectedItem] = useState<ApiItem | null>(
     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<ExternalApiSelectProps> = ({ items, defaultVal
               </div>
             </div>
           ))}
+          <div className='flex p-1 flex-col items-start self-stretch'>
+            <div
+              className='flex p-2 items-center gap-2 self-stretch rounded-lg cursor-pointer hover:bg-state-base-hover'
+              onClick={handleAddNewAPI}
+            >
+              <RiAddLine className='text-text-secondary w-4 h-4' />
+              <span className='flex-grow overflow-hidden text-text-secondary text-ellipsis system-sm-medium'>{t('dataset.createNewExternalAPI')}</span>
+            </div>
+          </div>
         </div>
       )}
     </div>

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<ExternalApiSelectionProps> = ({ 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<ExternalApiSelectionProps> = ({ external_kn
     url: api.settings.endpoint,
   }))
 
-  const { showExternalApiPanel, setShowExternalApiPanel } = useExternalApiPanel()
-
   const handleAddNewAPI = () => {
-    router.back()
+    router.push('/datasets?openExternalApiPanel=true')
-    setShowExternalApiPanel(true)
   }
 
   useEffect(() => {

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',

web/i18n/zh-Hans/dataset.ts

@@ -18,6 +18,7 @@ const translation = {
   createDataset: '创建知识库',
   noExternalKnowledge: '还没有外部知识库 API，点击此处创建',
   createExternalAPI: '添加外部知识库 API',
+  createNewExternalAPI: '创建新的外部知识库API',
   editExternalAPIFormTitle: '编辑外部知识库 API',
   editExternalAPITooltipTitle: '个关联知识库',
   editExternalAPIConfirmWarningContent: {