feat: add external api from the create external knowledge page

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

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