external knowledge api (#8913)

Co-authored-by: Yi <yxiaoisme@gmail.com>

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
+}

web/context/external-knowledge-api-context.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { createContext, useContext, useMemo } from 'react'
+import type { FC, ReactNode } from 'react'
+import useSWR from 'swr'
+import type { ExternalAPIItem, ExternalAPIListResponse } from '@/models/datasets'
+import { fetchExternalAPIList } from '@/service/datasets'
+
+type ExternalKnowledgeApiContextType = {
+  externalKnowledgeApiList: ExternalAPIItem[]
+  mutateExternalKnowledgeApis: () => Promise<ExternalAPIListResponse | undefined>
+  isLoading: boolean
+}
+
+const ExternalKnowledgeApiContext = createContext<ExternalKnowledgeApiContextType | undefined>(undefined)
+
+export type ExternalKnowledgeApiProviderProps = {
+  children: ReactNode
+}
+
+export const ExternalKnowledgeApiProvider: FC<ExternalKnowledgeApiProviderProps> = ({ children }) => {
+  const { data, mutate: mutateExternalKnowledgeApis, isLoading } = useSWR<ExternalAPIListResponse>(
+    { url: '/datasets/external-knowledge-api' },
+    fetchExternalAPIList,
+  )
+
+  const contextValue = useMemo<ExternalKnowledgeApiContextType>(() => ({
+    externalKnowledgeApiList: data?.data || [],
+    mutateExternalKnowledgeApis,
+    isLoading,
+  }), [data, mutateExternalKnowledgeApis, isLoading])
+
+  return (
+    <ExternalKnowledgeApiContext.Provider value={contextValue}>
+      {children}
+    </ExternalKnowledgeApiContext.Provider>
+  )
+}
+
+export const useExternalKnowledgeApi = () => {
+  const context = useContext(ExternalKnowledgeApiContext)
+  if (context === undefined)
+    throw new Error('useExternalKnowledgeApi must be used within a ExternalKnowledgeApiProvider')
+
+  return context
+}

web/context/modal-context.tsx

@@ -10,6 +10,7 @@ import ModerationSettingModal from '@/app/components/app/configuration/toolbox/m
 import ExternalDataToolModal from '@/app/components/app/configuration/tools/external-data-tool-modal'
 import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import ModelModal from '@/app/components/header/account-setting/model-provider-page/model-modal'
+import ExternalAPIModal from '@/app/components/datasets/external-api/external-api-modal'
 import type {
   ConfigurationMethodEnum,
   CustomConfigurationModelFixedFields,
@@ -23,6 +24,7 @@ import type {
   ApiBasedExtension,
   ExternalDataTool,
 } from '@/models/common'
+import type { CreateExternalAPIReq } from '@/app/components/datasets/external-api/declarations'
 import ModelLoadBalancingEntryModal from '@/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal'
 import type { ModelLoadBalancingModalProps } from '@/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal'
 import ModelLoadBalancingModal from '@/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal'
@@ -32,7 +34,10 @@ export type ModalState<T> = {
   onCancelCallback?: () => void
   onSaveCallback?: (newPayload: T) => void
   onRemoveCallback?: (newPayload: T) => void
+  onEditCallback?: (newPayload: T) => void
   onValidateBeforeSaveCallback?: (newPayload: T) => boolean
+  isEditMode?: boolean
+  datasetBindings?: { id: string; name: string }[]
 }
 
 export type ModelModalType = {
@@ -52,6 +57,7 @@ export type ModalContextState = {
   setShowPricingModal: () => void
   setShowAnnotationFullModal: () => void
   setShowModelModal: Dispatch<SetStateAction<ModalState<ModelModalType> | null>>
+  setShowExternalKnowledgeAPIModal: Dispatch<SetStateAction<ModalState<CreateExternalAPIReq> | null>>
   setShowModelLoadBalancingModal: Dispatch<SetStateAction<ModelLoadBalancingModalProps | null>>
   setShowModelLoadBalancingEntryModal: Dispatch<SetStateAction<ModalState<LoadBalancingEntryModalType> | null>>
 }
@@ -63,6 +69,7 @@ const ModalContext = createContext<ModalContextState>({
   setShowPricingModal: () => { },
   setShowAnnotationFullModal: () => { },
   setShowModelModal: () => { },
+  setShowExternalKnowledgeAPIModal: () => { },
   setShowModelLoadBalancingModal: () => { },
   setShowModelLoadBalancingEntryModal: () => { },
 })
@@ -86,6 +93,7 @@ export const ModalContextProvider = ({
   const [showModerationSettingModal, setShowModerationSettingModal] = useState<ModalState<ModerationConfig> | null>(null)
   const [showExternalDataToolModal, setShowExternalDataToolModal] = useState<ModalState<ExternalDataTool> | null>(null)
   const [showModelModal, setShowModelModal] = useState<ModalState<ModelModalType> | null>(null)
+  const [showExternalKnowledgeAPIModal, setShowExternalKnowledgeAPIModal] = useState<ModalState<CreateExternalAPIReq> | null>(null)
   const [showModelLoadBalancingModal, setShowModelLoadBalancingModal] = useState<ModelLoadBalancingModalProps | null>(null)
   const [showModelLoadBalancingEntryModal, setShowModelLoadBalancingEntryModal] = useState<ModalState<LoadBalancingEntryModalType> | null>(null)
   const searchParams = useSearchParams()
@@ -122,6 +130,24 @@ export const ModalContextProvider = ({
     setShowModelModal(null)
   }, [showModelModal])
 
+  const handleCancelExternalApiModal = useCallback(() => {
+    setShowExternalKnowledgeAPIModal(null)
+    if (showExternalKnowledgeAPIModal?.onCancelCallback)
+      showExternalKnowledgeAPIModal.onCancelCallback()
+  }, [showExternalKnowledgeAPIModal])
+
+  const handleSaveExternalApiModal = useCallback(async (updatedFormValue: CreateExternalAPIReq) => {
+    if (showExternalKnowledgeAPIModal?.onSaveCallback)
+      showExternalKnowledgeAPIModal.onSaveCallback(updatedFormValue)
+    setShowExternalKnowledgeAPIModal(null)
+  }, [showExternalKnowledgeAPIModal])
+
+  const handleEditExternalApiModal = useCallback(async (updatedFormValue: CreateExternalAPIReq) => {
+    if (showExternalKnowledgeAPIModal?.onEditCallback)
+      showExternalKnowledgeAPIModal.onEditCallback(updatedFormValue)
+    setShowExternalKnowledgeAPIModal(null)
+  }, [showExternalKnowledgeAPIModal])
+
   const handleCancelModelLoadBalancingEntryModal = useCallback(() => {
     showModelLoadBalancingEntryModal?.onCancelCallback?.()
     setShowModelLoadBalancingEntryModal(null)
@@ -173,6 +199,7 @@ export const ModalContextProvider = ({
       setShowPricingModal: () => setShowPricingModal(true),
       setShowAnnotationFullModal: () => setShowAnnotationFullModal(true),
       setShowModelModal,
+      setShowExternalKnowledgeAPIModal,
       setShowModelLoadBalancingModal,
       setShowModelLoadBalancingEntryModal,
     }}>
@@ -245,6 +272,18 @@ export const ModalContextProvider = ({
             />
           )
         }
+        {
+          !!showExternalKnowledgeAPIModal && (
+            <ExternalAPIModal
+              data={showExternalKnowledgeAPIModal.payload}
+              datasetBindings={showExternalKnowledgeAPIModal.datasetBindings ?? []}
+              onSave={handleSaveExternalApiModal}
+              onCancel={handleCancelExternalApiModal}
+              onEdit={handleEditExternalApiModal}
+              isEditMode={showExternalKnowledgeAPIModal.isEditMode ?? false}
+            />
+          )
+        }
         {
           Boolean(showModelLoadBalancingModal) && (
             <ModelLoadBalancingModal {...showModelLoadBalancingModal!} />