From c9e3a9e56adc63e86395f340c3c56ca9e34aa2fc Mon Sep 17 00:00:00 2001
From: Yi <yxiaoisme@gmail.com>
Date: Fri, 27 Sep 2024 17:44:01 +0800
Subject: [PATCH] feat: add external api from the create external knowledge
 page

---
 web/app/(commonLayout)/datasets/Container.tsx | 83 ++++++++++---------
 .../(commonLayout)/datasets/connect/page.tsx  |  5 +-
 .../connector/index.tsx                       |  4 +-
 .../create/ExternalApiSelect.tsx              | 73 ++++++++++++++++
 .../create/ExternalApiSelection.tsx           | 34 ++++++--
 web/context/external-api-panel-context.tsx    | 28 +++++++
 web/i18n/en-US/dataset.ts                     |  4 +
 web/i18n/zh-Hans/dataset.ts                   |  4 +
 8 files changed, 188 insertions(+), 47 deletions(-)
 create mode 100644 web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
 create mode 100644 web/context/external-api-panel-context.tsx

diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/Container.tsx
index 3fbbf12d4e..44d898adc4 100644
--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/Container.tsx
@@ -28,13 +28,14 @@ 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'
 
-const Container = () => {
+const ContainerContent = () => {
   const { t } = useTranslation()
   const router = useRouter()
   const { currentWorkspace } = useAppContext()
   const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
-  const [showExternalApiPanel, setShowExternalApiPanel] = useState(false)
+  const { showExternalApiPanel, setShowExternalApiPanel } = useExternalApiPanel()
 
   const options = useMemo(() => {
     return [
@@ -74,45 +75,51 @@ const Container = () => {
   }, [currentWorkspace, router])
 
   return (
-    <ExternalKnowledgeApiProvider>
-      <div ref={containerRef} className='grow relative flex flex-col bg-gray-100 overflow-y-auto'>
-        <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-gray-100 z-10 flex-wrap gap-y-2'>
-          <TabSliderNew
-            value={activeTab}
-            onChange={newActiveTab => setActiveTab(newActiveTab)}
-            options={options}
-          />
-          {activeTab === 'dataset' && (
-            <div className='flex items-center gap-2'>
-              <TagFilter type='knowledge' value={tagFilterValue} onChange={handleTagsChange} />
-              <SearchInput className='w-[200px]' value={keywords} onChange={handleKeywordsChange} />
-              <div className="w-[1px] h-4 bg-divider-regular" />
-              <Button
-                className='gap-0.5 shadows-shadow-xs'
-                onClick={() => setShowExternalApiPanel(true)}
-              >
-                <ApiConnectionMod className='w-4 h-4 text-components-button-secondary-text' />
-                <div className='flex px-0.5 justify-center items-center gap-1 text-components-button-secondary-text system-sm-medium'>{t('dataset.externalAPI')}</div>
-              </Button>
-            </div>
-          )}
-          {activeTab === 'api' && data && <ApiServer apiBaseUrl={data.api_base_url || ''} />}
-        </div>
-
+    <div ref={containerRef} className='grow relative flex flex-col bg-gray-100 overflow-y-auto'>
+      <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-gray-100 z-10 flex-wrap gap-y-2'>
+        <TabSliderNew
+          value={activeTab}
+          onChange={newActiveTab => setActiveTab(newActiveTab)}
+          options={options}
+        />
         {activeTab === 'dataset' && (
-          <>
-            <Datasets containerRef={containerRef} tags={tagIDs} keywords={searchKeywords} />
-            <DatasetFooter />
-            {showTagManagementModal && (
-              <TagManagementModal type='knowledge' show={showTagManagementModal} />
-            )}
-          </>
+          <div className='flex items-center gap-2'>
+            <TagFilter type='knowledge' value={tagFilterValue} onChange={handleTagsChange} />
+            <SearchInput className='w-[200px]' value={keywords} onChange={handleKeywordsChange} />
+            <div className="w-[1px] h-4 bg-divider-regular" />
+            <Button
+              className='gap-0.5 shadows-shadow-xs'
+              onClick={() => setShowExternalApiPanel(true)}
+            >
+              <ApiConnectionMod className='w-4 h-4 text-components-button-secondary-text' />
+              <div className='flex px-0.5 justify-center items-center gap-1 text-components-button-secondary-text system-sm-medium'>{t('dataset.externalAPI')}</div>
+            </Button>
+          </div>
         )}
-
-        {activeTab === 'api' && data && <Doc apiBaseUrl={data.api_base_url || ''} />}
-
-        {showExternalApiPanel && <ExternalAPIPanel onClose={() => setShowExternalApiPanel(false)} isShow={showExternalApiPanel} datasetBindings={[]} />}
+        {activeTab === 'api' && data && <ApiServer apiBaseUrl={data.api_base_url || ''} />}
       </div>
+      {activeTab === 'dataset' && (
+        <>
+          <Datasets containerRef={containerRef} tags={tagIDs} keywords={searchKeywords} />
+          <DatasetFooter />
+          {showTagManagementModal && (
+            <TagManagementModal type='knowledge' show={showTagManagementModal} />
+          )}
+        </>
+      )}
+      {activeTab === 'api' && data && <Doc apiBaseUrl={data.api_base_url || ''} />}
+
+      {showExternalApiPanel && <ExternalAPIPanel onClose={() => setShowExternalApiPanel(false)} isShow={showExternalApiPanel} datasetBindings={[]} />}
+    </div>
+  )
+}
+
+const Container = () => {
+  return (
+    <ExternalKnowledgeApiProvider>
+      <ExternalApiPanelProvider>
+        <ContainerContent />
+      </ExternalApiPanelProvider>
     </ExternalKnowledgeApiProvider>
   )
 }
diff --git a/web/app/(commonLayout)/datasets/connect/page.tsx b/web/app/(commonLayout)/datasets/connect/page.tsx
index 2a66837585..78647e874b 100644
--- a/web/app/(commonLayout)/datasets/connect/page.tsx
+++ b/web/app/(commonLayout)/datasets/connect/page.tsx
@@ -1,11 +1,14 @@
 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 (
     <ExternalKnowledgeApiProvider>
-      <ExternalKnowledgeBaseConnector />
+      <ExternalApiPanelProvider>
+        <ExternalKnowledgeBaseConnector />
+      </ExternalApiPanelProvider>
     </ExternalKnowledgeApiProvider>
   )
 }
diff --git a/web/app/components/datasets/external-knowledge-base/connector/index.tsx b/web/app/components/datasets/external-knowledge-base/connector/index.tsx
index b1a1ab9b3f..33f57d0b47 100644
--- a/web/app/components/datasets/external-knowledge-base/connector/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/connector/index.tsx
@@ -28,7 +28,9 @@ const ExternalKnowledgeBaseConnector = () => {
     }
     setLoading(false)
   }
-  return <ExternalKnowledgeBaseCreate onConnect={handleConnect} loading={loading} />
+  return (
+    <ExternalKnowledgeBaseCreate onConnect={handleConnect} loading={loading} />
+  )
 }
 
 export default ExternalKnowledgeBaseConnector
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
new file mode 100644
index 0000000000..1cc88fb872
--- /dev/null
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
+
+type ApiItem = {
+  value: string
+  name: string
+  url: string
+}
+
+type ExternalApiSelectProps = {
+  items: ApiItem[]
+  defaultValue?: string
+  onSelect: (item: ApiItem) => void
+}
+
+const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, defaultValue, onSelect }) => {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedItem, setSelectedItem] = useState<ApiItem | null>(
+    items.find(item => item.value === defaultValue) || null,
+  )
+
+  const handleSelect = (item: ApiItem) => {
+    setSelectedItem(item)
+    onSelect(item)
+    setIsOpen(false)
+  }
+
+  return (
+    <div className="relative w-full">
+      <div
+        className={`flex items-center justify-between cursor-point px-2 py-1 gap-0.5 self-stretch rounded-lg 
+        bg-components-input-bg-normal hover:bg-state-base-hover-alt ${isOpen && 'bg-state-base-hover-alt'}`}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {selectedItem
+          ? (
+            <div className="flex px-2 py-1 items-center gap-0.5 self-stretch rounded-lg">
+              <ApiConnectionMod className='text-text-secondary w-4 h-4' />
+              <div className='flex p-1 items-center flex-grow'>
+                <span className='text-components-input-text-filled text-ellipsis system-sm-regular overflow-hidden'>{selectedItem.name}</span>
+              </div>
+            </div>
+          )
+          : (
+            <span className='text-components-input-text-placeholder system-sm-regular'>{t('dataset.selectExternalKnowledgeAPI.placeholder')}</span>
+          )}
+        <RiArrowDownSLine className={`w-4 h-4 text-text-quaternary transition-transform ${isOpen ? 'text-text-secondary' : ''}`} />
+      </div>
+      {isOpen && (
+        <div className="absolute z-10 w-full mt-1 bg-components-panel-bg-blur border rounded-xl shadow-lg">
+          {items.map(item => (
+            <div
+              key={item.value}
+              className="flex p-1 items-center cursor-pointer"
+              onClick={() => handleSelect(item)}
+            >
+              <div className="flex p-2 items-center gap-2 self-stretch rounded-lg hover:bg-state-base-hover w-full">
+                <ApiConnectionMod className='text-text-secondary w-4 h-4' />
+                <span className='text-text-secondary text-ellipsis system-sm-medium overflow-hidden flex-grow'>{item.name}</span>
+                <span className='text-text-tertiary overflow-hidden text-right text-ellipsis system-xs-regular'>{item.url}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ExternalApiSelect
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 b353f6e237..d785d8aec8 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
@@ -1,8 +1,13 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import Select from '@/app/components/base/select'
+import { RiAddLine } from '@remixicon/react'
+import { useRouter } from 'next/navigation'
+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
   external_knowledge_id: string
@@ -11,13 +16,23 @@ type ExternalApiSelectionProps = {
 
 const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_knowledge_api_id, external_knowledge_id, onChange }) => {
   const { t } = useTranslation()
+  const router = useRouter()
   const { externalKnowledgeApiList } = useExternalKnowledgeApi()
+  // const { setShowExternalApiPanel } = useExternalApiPanel()
 
   const apiItems = externalKnowledgeApiList.map(api => ({
     value: api.id,
     name: api.name,
+    url: api.settings.endpoint,
   }))
 
+  const { showExternalApiPanel, setShowExternalApiPanel } = useExternalApiPanel()
+
+  const handleAddNewAPI = () => {
+    router.back()
+    setShowExternalApiPanel(true)
+  }
+
   useEffect(() => {
     if (!external_knowledge_api_id && apiItems.length > 0)
       onChange({ external_knowledge_api_id: apiItems[0].value, external_knowledge_id })
@@ -29,12 +44,17 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
         <div className='flex flex-col self-stretch'>
           <label className='text-text-secondary system-sm-semibold'>{t('dataset.externalAPIPanelTitle')}</label>
         </div>
-        <Select
-          className='w-full'
-          items={apiItems}
-          defaultValue={apiItems.length > 0 ? apiItems[0].value : ''}
-          onSelect={e => onChange({ external_knowledge_api_id: e.value as string, external_knowledge_id })}
-        />
+        {apiItems.length > 0
+          ? <ExternalApiSelect
+            items={apiItems}
+            defaultValue={apiItems[0].value}
+            onSelect={e => onChange({ external_knowledge_api_id: e.value as string, external_knowledge_id })}
+          />
+          : <Button variant={'tertiary'} onClick={handleAddNewAPI} className='justify-start gap-0.5'>
+            <RiAddLine className='w-4 h-4 text-text-tertiary' />
+            <span className='text-text-tertiary system-sm-regular'>{t('dataset.noExternalKnowledge')}</span>
+          </Button>
+        }
       </div>
       <div className='flex flex-col gap-1 self-stretch'>
         <div className='flex flex-col self-stretch'>
diff --git a/web/context/external-api-panel-context.tsx b/web/context/external-api-panel-context.tsx
new file mode 100644
index 0000000000..05ae5c45c1
--- /dev/null
+++ b/web/context/external-api-panel-context.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import React, { createContext, useContext, useState } from 'react'
+
+type ExternalApiPanelContextType = {
+  showExternalApiPanel: boolean
+  setShowExternalApiPanel: (show: boolean) => void
+}
+
+const ExternalApiPanelContext = createContext<ExternalApiPanelContextType | undefined>(undefined)
+
+export const ExternalApiPanelProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [showExternalApiPanel, setShowExternalApiPanel] = useState(false)
+
+  return (
+    <ExternalApiPanelContext.Provider value={{ showExternalApiPanel, setShowExternalApiPanel }}>
+      {children}
+    </ExternalApiPanelContext.Provider>
+  )
+}
+
+export const useExternalApiPanel = () => {
+  const context = useContext(ExternalApiPanelContext)
+  if (context === undefined)
+    throw new Error('useExternalApiPanel must be used within an ExternalApiPanelProvider')
+
+  return context
+}
diff --git a/web/i18n/en-US/dataset.ts b/web/i18n/en-US/dataset.ts
index 6ad68ff8e5..b4f149df5a 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',
+  noExternalKnowledge: 'There is no External Knowledge API yet, click here to create',
   createExternalAPI: 'Add an External Knowledge API',
   editExternalAPIFormTitle: 'Edit the External Knowledge API',
   editExternalAPITooltipTitle: 'LINKED KNOWLEDGE',
@@ -38,6 +39,9 @@ const translation = {
     },
     noConnectionContent: 'Are you sure to delete this API?',
   },
+  selectExternalKnowledgeAPI: {
+    placeholder: 'Choose an External Knowledge API',
+  },
   connectDataset: 'Connect to an External Knowledge Base',
   connectDatasetIntro: {
     title: 'How to Connect to an External Knowledge Base',
diff --git a/web/i18n/zh-Hans/dataset.ts b/web/i18n/zh-Hans/dataset.ts
index 5b8616c402..792365967d 100644
--- a/web/i18n/zh-Hans/dataset.ts
+++ b/web/i18n/zh-Hans/dataset.ts
@@ -16,6 +16,7 @@ const translation = {
   wordCount: ' 千字符',
   appCount: ' 关联应用',
   createDataset: '创建知识库',
+  noExternalKnowledge: '还没有外部知识库 API，点击此处创建',
   createExternalAPI: '添加外部知识库 API',
   editExternalAPIFormTitle: '编辑外部知识库 API',
   editExternalAPITooltipTitle: '个关联知识库',
@@ -55,6 +56,9 @@ const translation = {
   datasetUsedByApp: '某些应用正在使用该知识库。应用将无法再使用该知识库,所有的提示配置和日志将被永久删除。',
   datasetDeleted: '知识库已删除',
   datasetDeleteFailed: '删除知识库失败',
+  selectExternalKnowledgeAPI: {
+    placeholder: '选择一个外部知识 API',
+  },
   didYouKnow: '你知道吗？',
   intro1: '知识库可以被集成到 Dify 应用中',
   intro2: '作为上下文',