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-api-modal/Form.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/Form.tsx
@@ -0,0 +1,90 @@
+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'
+
+type FormProps = {
+  className?: string
+  itemClassName?: string
+  fieldLabelClassName?: string
+  value: CreateExternalAPIReq
+  onChange: (val: CreateExternalAPIReq) => void
+  formSchemas: FormSchema[]
+  inputClassName?: string
+}
+
+const Form: FC<FormProps> = React.memo(({
+  className,
+  itemClassName,
+  fieldLabelClassName,
+  value,
+  onChange,
+  formSchemas,
+  inputClassName,
+}) => {
+  const { t, i18n } = useTranslation()
+  const [changeKey, setChangeKey] = useState('')
+
+  const handleFormChange = (key: string, val: string) => {
+    setChangeKey(key)
+    if (key === 'name') {
+      onChange({ ...value, [key]: val })
+    }
+    else {
+      onChange({
+        ...value,
+        settings: {
+          ...value.settings,
+          [key]: val,
+        },
+      })
+    }
+  }
+
+  const renderField = (formSchema: FormSchema) => {
+    const { variable, type, label, required } = formSchema
+    const fieldValue = variable === 'name' ? value[variable] : (value.settings[variable as keyof typeof value.settings] || '')
+
+    return (
+      <div key={variable} className={cn(itemClassName, 'flex flex-col items-start gap-1 self-stretch')}>
+        <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}
+          name={variable}
+          value={fieldValue}
+          onChange={val => handleFormChange(variable, val.target.value)}
+          required={required}
+          className={cn(inputClassName)}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <form className={cn('flex flex-col justify-center items-start gap-4 self-stretch', className)}>
+      {formSchemas.map(formSchema => renderField(formSchema))}
+    </form>
+  )
+})
+
+export default Form