feat: connect knowledge base to app

web/app/components/datasets/external-api/external-api-modal/Form.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiBookOpenLine } from '@remixicon/react'
 import type { CreateExternalAPIReq, FormSchema } from '../declarations'
 import Input from '@/app/components/base/input'
 import cn from '@/utils/classnames'
@@ -11,10 +12,6 @@ type FormProps = {
   fieldLabelClassName?: string
   value: CreateExternalAPIReq
   onChange: (val: CreateExternalAPIReq) => void
-  validatingEndpoint: boolean
-  validatedApiKeySuccess?: boolean
-  validatingApiKey: boolean
-  validatedEndpointSuccess?: boolean
   formSchemas: FormSchema[]
   inputClassName?: string
 }
@@ -26,10 +23,6 @@ const Form: FC<FormProps> = React.memo(({
   value,
   onChange,
   formSchemas,
-  validatingEndpoint,
-  validatingApiKey,
-  validatedApiKeySuccess,
-  validatedEndpointSuccess,
   inputClassName,
 }) => {
   const { t, i18n } = useTranslation()
@@ -57,10 +50,23 @@ const Form: FC<FormProps> = React.memo(({
 
     return (
       <div key={variable} className={cn(itemClassName, 'flex flex-col items-start gap-1 self-stretch')}>
-        <label className={cn(fieldLabelClassName, 'text-text-secondary system-sm-semibold')} htmlFor={variable}>
-          {label[i18n.language] || label.en_US}
-          {required && <span className='ml-1 text-red-500'>*</span>}
-        </label>
+        <div className="flex justify-between items-center w-full">
+          <label className={cn(fieldLabelClassName, 'text-text-secondary system-sm-semibold')} htmlFor={variable}>
+            {label[i18n.language] || label.en_US}
+            {required && <span className='ml-1 text-red-500'>*</span>}
+          </label>
+          {variable === 'endpoint' && (
+            <a
+              href={'https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' || '/'}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='text-text-accent body-xs-regular flex items-center'
+            >
+              <RiBookOpenLine className='w-3 h-3 text-text-accent mr-1' />
+              {t('dataset.externalAPIPanelDocumentation')}
+            </a>
+          )}
+        </div>
         <Input
           type={type === 'secret' ? 'password' : 'text'}
           id={variable}

web/app/components/datasets/external-api/external-api-modal/index.tsx

@@ -11,10 +11,6 @@ import {
   RiInformation2Line,
   RiLock2Fill,
 } from '@remixicon/react'
-import { useValidateApiKey } from '../key-validator/hooks'
-import { ValidatedApiKeyStatus } from '../key-validator/declarations'
-import { ValidatedEndpointStatus } from '../endpoint-validator/declarations'
-import { useValidateEndpoint } from '../endpoint-validator/hooks'
 import type { CreateExternalAPIReq, FormSchema } from '../declarations'
 import Form from './Form'
 import ActionButton from '@/app/components/base/action-button'
@@ -76,18 +72,28 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
       setFormData(data)
   }, [isEditMode, data])
 
-  const [, validatingApiKey, validatedApiKeyStatusState] = useValidateApiKey(formData.settings.api_key)
-  const [, validatingEndpoint, validatedEndpointStatusState] = useValidateEndpoint(formData.settings.endpoint)
-  const hasEmptyInputs = Object.values(formData).includes('')
+  const hasEmptyInputs = Object.values(formData).some(value =>
+    typeof value === 'string' ? value.trim() === '' : Object.values(value).some(v => v.trim() === ''),
+  )
   const handleDataChange = (val: CreateExternalAPIReq) => {
     setFormData(val)
   }
 
   const handleSave = async () => {
+    if (formData && formData.settings.api_key && formData.settings.api_key?.length < 5) {
+      notify({ type: 'error', message: t('common.apiBasedExtension.modal.apiKey.lengthError') })
+      setLoading(false)
+      return
+    }
     try {
       setLoading(true)
       if (isEditMode && onEdit) {
-        await onEdit(formData)
+        await onEdit(
+          {
+            ...formData,
+            settings: { ...formData.settings, api_key: formData.settings.api_key ? '[__HIDDEN__]' : formData.settings.api_key },
+          },
+        )
         notify({ type: 'success', message: 'External API updated successfully' })
       }
       else {
@@ -154,10 +160,6 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
             <Form
               value={formData}
               onChange={handleDataChange}
-              validatingApiKey={validatingApiKey}
-              validatedApiKeySuccess={validatedApiKeyStatusState?.status === ValidatedApiKeyStatus.Success}
-              validatingEndpoint={validatingEndpoint}
-              validatedEndpointSuccess={validatedEndpointStatusState?.status === ValidatedEndpointStatus.Success}
               formSchemas={formSchemas}
               className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'
             />