external knowledge api (#8913)

Co-authored-by: Yi <yxiaoisme@gmail.com>
2024-09-30 15:38:43 +08:00
parent 77aef9ff1d
commit 9d221a5e19
90 changed files with 4623 additions and 1171 deletions
--- a/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
+++ b/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
@@ -0,0 +1,151 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+  RiEditLine,
+} from '@remixicon/react'
+import type { CreateExternalAPIReq } from '../declarations'
+import type { ExternalAPIItem } from '@/models/datasets'
+import { checkUsageExternalAPI, deleteExternalAPI, fetchExternalAPI, updateExternalAPI } from '@/service/datasets'
+import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
+import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
+import { useModalContext } from '@/context/modal-context'
+import ActionButton from '@/app/components/base/action-button'
+import Confirm from '@/app/components/base/confirm'
+
+type ExternalKnowledgeAPICardProps = {
+  api: ExternalAPIItem
+}
+
+const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api }) => {
+  const { setShowExternalKnowledgeAPIModal } = useModalContext()
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const [usageCount, setUsageCount] = useState(0)
+  const { mutateExternalKnowledgeApis } = useExternalKnowledgeApi()
+
+  const { t } = useTranslation()
+
+  const handleEditClick = async () => {
+    try {
+      const response = await fetchExternalAPI({ apiTemplateId: api.id })
+      const formValue: CreateExternalAPIReq = {
+        name: response.name,
+        settings: {
+          endpoint: response.settings.endpoint,
+          api_key: response.settings.api_key,
+        },
+      }
+
+      setShowExternalKnowledgeAPIModal({
+        payload: formValue,
+        onSaveCallback: () => {
+          mutateExternalKnowledgeApis()
+        },
+        onCancelCallback: () => {
+          mutateExternalKnowledgeApis()
+        },
+        isEditMode: true,
+        datasetBindings: response.dataset_bindings,
+        onEditCallback: async (updatedData: CreateExternalAPIReq) => {
+          try {
+            await updateExternalAPI({
+              apiTemplateId: api.id,
+              body: {
+                ...response,
+                name: updatedData.name,
+                settings: {
+                  ...response.settings,
+                  endpoint: updatedData.settings.endpoint,
+                  api_key: updatedData.settings.api_key,
+                },
+              },
+            })
+            mutateExternalKnowledgeApis()
+          }
+          catch (error) {
+            console.error('Error updating external knowledge API:', error)
+          }
+        },
+      })
+    }
+    catch (error) {
+      console.error('Error fetching external knowledge API data:', error)
+    }
+  }
+
+  const handleDeleteClick = async () => {
+    try {
+      const usage = await checkUsageExternalAPI({ apiTemplateId: api.id })
+      if (usage.is_using)
+        setUsageCount(usage.count)
+
+      setShowConfirm(true)
+    }
+    catch (error) {
+      console.error('Error checking external API usage:', error)
+    }
+  }
+
+  const handleConfirmDelete = async () => {
+    try {
+      const response = await deleteExternalAPI({ apiTemplateId: api.id })
+      if (response && response.result === 'success') {
+        setShowConfirm(false)
+        mutateExternalKnowledgeApis()
+      }
+      else {
+        console.error('Failed to delete external API')
+      }
+    }
+    catch (error) {
+      console.error('Error deleting external knowledge API:', error)
+    }
+  }
+
+  return (
+    <>
+      <div className={`flex p-2 pl-3 items-start self-stretch rounded-lg border-[0.5px] 
+        border-components-panel-border-subtle bg-components-panel-on-panel-item-bg 
+        shadows-shadow-xs ${isHovered ? 'bg-state-destructive-hover border-state-destructive-border' : ''}`}
+      >
+        <div className='flex py-1 flex-col justify-center items-start gap-1.5 flex-grow'>
+          <div className='flex items-center gap-1 self-stretch text-text-secondary'>
+            <ApiConnectionMod className='w-4 h-4' />
+            <div className='system-sm-medium'>{api.name}</div>
+          </div>
+          <div className='self-stretch text-text-tertiary system-xs-regular'>{api.settings.endpoint}</div>
+        </div>
+        <div className='flex items-start gap-1'>
+          <ActionButton onClick={handleEditClick}>
+            <RiEditLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
+          </ActionButton>
+          <ActionButton
+            className='hover:bg-state-destructive-hover'
+            onClick={handleDeleteClick}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
+            <RiDeleteBinLine className='w-4 h-4 text-text-tertiary hover:text-text-destructive' />
+          </ActionButton>
+        </div>
+      </div>
+      {showConfirm && (
+        <Confirm
+          isShow={showConfirm}
+          title={`${t('dataset.deleteExternalAPIConfirmWarningContent.title.front')} ${api.name}${t('dataset.deleteExternalAPIConfirmWarningContent.title.end')}`}
+          content={
+            usageCount > 0
+              ? `${t('dataset.deleteExternalAPIConfirmWarningContent.content.front')} ${usageCount} ${t('dataset.deleteExternalAPIConfirmWarningContent.content.end')}`
+              : t('dataset.deleteExternalAPIConfirmWarningContent.noConnectionContent')
+          }
+          type='warning'
+          onConfirm={handleConfirmDelete}
+          onCancel={() => setShowConfirm(false)}
+        />
+      )}
+    </>
+  )
+}
+
+export default ExternalKnowledgeAPICard