feat: add external api from the create external knowledge page

2024-09-27 17:44:01 +08:00 · 2024-09-27 17:44:01 +08:00 · c9e3a9e56a
commit c9e3a9e56a
parent 9c9352bc73
8 changed files with 188 additions and 47 deletions
--- 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>
  )
 }
--- 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>
  )
 }
--- 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
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
+++ 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
--- 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'>
--- a/web/context/external-api-panel-context.tsx
+++ 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
+}
--- 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',
--- 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: '作为上下文',