Merge remote-tracking branch 'origin/feat/external-knowledge-api' into feat/external-knowledge-api
jyong
2 years ago
commit
2a1cba9f4d
@ -0,0 +1,13 @@
|
||||
import React from 'react'
|
||||
import ExternalKnowledgeBaseConnector from '@/app/components/datasets/external-knowledge-base/connector'
|
||||
import { ExternalKnowledgeApiProvider } from '@/context/external-knowledge-api-context'
|
||||
|
||||
const ExternalKnowledgeBaseCreation = async () => {
|
||||
return (
|
||||
<ExternalKnowledgeApiProvider>
|
||||
<ExternalKnowledgeBaseConnector />
|
||||
</ExternalKnowledgeApiProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExternalKnowledgeBaseCreation
|
||||
@ -0,0 +1,21 @@
|
||||
import { Corner } from '../icons/src/vender/solid/shapes'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type CornerLabelProps = {
|
||||
label: string
|
||||
className?: string
|
||||
labelClassName?: string
|
||||
}
|
||||
|
||||
const CornerLabel: React.FC<CornerLabelProps> = ({ label, className, labelClassName }) => {
|
||||
return (
|
||||
<div className={cn('group/corner-label inline-flex items-start', className)}>
|
||||
<Corner className='w-[13px] h-5 text-background-section group-hover/corner-label:text-background-section-burn' />
|
||||
<div className={cn('flex py-1 pr-2 items-center gap-0.5 bg-background-section group-hover/corner-label:bg-background-section-burn', labelClassName)}>
|
||||
<div className='text-text-tertiary system-2xs-medium-uppercase'>{label}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CornerLabel
|
||||
@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Icon L">
|
||||
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M7.99996 3.33333C5.42263 3.33333 3.33329 5.42267 3.33329 8C3.33329 10.5773 5.42263 12.6667 7.99996 12.6667C9.72643 12.6667 11.2348 11.7295 12.0427 10.3329C12.227 10.0141 12.6349 9.90523 12.9536 10.0896C13.2723 10.274 13.3812 10.6818 13.1968 11.0005C12.1604 12.7921 10.2216 14 7.99996 14C4.91159 14 2.36821 11.6666 2.03658 8.66667H1.33329C0.965103 8.66667 0.666626 8.36819 0.666626 8C0.666626 7.63181 0.965103 7.33333 1.33329 7.33333H2.03658C2.36821 4.33337 4.91159 2 7.99996 2C10.2216 2 12.1604 3.20785 13.1968 4.99952C13.3812 5.31823 13.2723 5.72605 12.9536 5.91041C12.6349 6.09477 12.227 5.98585 12.0427 5.66714C11.2348 4.27054 9.72643 3.33333 7.99996 3.33333ZM7.99996 6C6.89539 6 5.99996 6.89543 5.99996 8C5.99996 9.10455 6.89539 10 7.99996 10C9.1045 10 9.99996 9.10454 9.99996 8C9.99996 6.89543 9.10451 6 7.99996 6ZM4.66663 8C4.66663 6.15905 6.15901 4.66667 7.99996 4.66667C9.61257 4.66667 10.9578 5.81184 11.2666 7.33333H14.6666C15.0348 7.33333 15.3333 7.63181 15.3333 8C15.3333 8.36819 15.0348 8.66667 14.6666 8.66667H11.2666C10.9578 10.1881 9.61257 11.3333 7.99996 11.3333C6.159 11.3333 4.66663 9.84092 4.66663 8Z" fill="#354052"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="13" height="20" viewBox="0 0 13 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Shape" d="M0 0H13V20C9.98017 20 7.26458 18.1615 6.14305 15.3576L0 0Z" fill="#F9FAFB"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 200 B |
@ -0,0 +1,38 @@
|
||||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "16",
|
||||
"height": "16",
|
||||
"viewBox": "0 0 16 16",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "Icon L"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"id": "Vector",
|
||||
"fill-rule": "evenodd",
|
||||
"clip-rule": "evenodd",
|
||||
"d": "M7.99996 3.33333C5.42263 3.33333 3.33329 5.42267 3.33329 8C3.33329 10.5773 5.42263 12.6667 7.99996 12.6667C9.72643 12.6667 11.2348 11.7295 12.0427 10.3329C12.227 10.0141 12.6349 9.90523 12.9536 10.0896C13.2723 10.274 13.3812 10.6818 13.1968 11.0005C12.1604 12.7921 10.2216 14 7.99996 14C4.91159 14 2.36821 11.6666 2.03658 8.66667H1.33329C0.965103 8.66667 0.666626 8.36819 0.666626 8C0.666626 7.63181 0.965103 7.33333 1.33329 7.33333H2.03658C2.36821 4.33337 4.91159 2 7.99996 2C10.2216 2 12.1604 3.20785 13.1968 4.99952C13.3812 5.31823 13.2723 5.72605 12.9536 5.91041C12.6349 6.09477 12.227 5.98585 12.0427 5.66714C11.2348 4.27054 9.72643 3.33333 7.99996 3.33333ZM7.99996 6C6.89539 6 5.99996 6.89543 5.99996 8C5.99996 9.10455 6.89539 10 7.99996 10C9.1045 10 9.99996 9.10454 9.99996 8C9.99996 6.89543 9.10451 6 7.99996 6ZM4.66663 8C4.66663 6.15905 6.15901 4.66667 7.99996 4.66667C9.61257 4.66667 10.9578 5.81184 11.2666 7.33333H14.6666C15.0348 7.33333 15.3333 7.63181 15.3333 8C15.3333 8.36819 15.0348 8.66667 14.6666 8.66667H11.2666C10.9578 10.1881 9.61257 11.3333 7.99996 11.3333C6.159 11.3333 4.66663 9.84092 4.66663 8Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "ApiConnectionMod"
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './ApiConnectionMod.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
|
||||
props,
|
||||
ref,
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />)
|
||||
|
||||
Icon.displayName = 'ApiConnectionMod'
|
||||
|
||||
export default Icon
|
||||
@ -0,0 +1,27 @@
|
||||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "13",
|
||||
"height": "20",
|
||||
"viewBox": "0 0 13 20",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"id": "Shape",
|
||||
"d": "M0 0H13V20C9.98017 20 7.26458 18.1615 6.14305 15.3576L0 0Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "Corner"
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './Corner.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
|
||||
props,
|
||||
ref,
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />)
|
||||
|
||||
Icon.displayName = 'Corner'
|
||||
|
||||
export default Icon
|
||||
@ -1,2 +1,3 @@
|
||||
export { default as Corner } from './Corner'
|
||||
export { default as Star04 } from './Star04'
|
||||
export { default as Star06 } from './Star06'
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
export type CreateExternalAPIReq = {
|
||||
name: string
|
||||
settings: {
|
||||
endpoint: string
|
||||
api_key: string
|
||||
}
|
||||
}
|
||||
|
||||
export type FormSchema = {
|
||||
variable: string
|
||||
type: 'text' | 'secret'
|
||||
label: {
|
||||
[key: string]: string
|
||||
}
|
||||
required: boolean
|
||||
}
|
||||
@ -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
|
||||
@ -0,0 +1,218 @@
|
||||
import type { FC } from 'react'
|
||||
import {
|
||||
memo,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiBook2Line,
|
||||
RiCloseLine,
|
||||
RiInformation2Line,
|
||||
RiLock2Fill,
|
||||
} from '@remixicon/react'
|
||||
import type { CreateExternalAPIReq, FormSchema } from '../declarations'
|
||||
import Form from './Form'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
import Confirm from '@/app/components/base/confirm'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import { createExternalAPI } from '@/service/datasets'
|
||||
import { useToastContext } from '@/app/components/base/toast'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
|
||||
type AddExternalAPIModalProps = {
|
||||
data?: CreateExternalAPIReq
|
||||
onSave: (formValue: CreateExternalAPIReq) => void
|
||||
onCancel: () => void
|
||||
onEdit?: (formValue: CreateExternalAPIReq) => Promise<void>
|
||||
datasetBindings?: { id: string; name: string }[]
|
||||
isEditMode: boolean
|
||||
}
|
||||
|
||||
const formSchemas: FormSchema[] = [
|
||||
{
|
||||
variable: 'name',
|
||||
type: 'text',
|
||||
label: {
|
||||
en_US: 'Name',
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
variable: 'endpoint',
|
||||
type: 'text',
|
||||
label: {
|
||||
en_US: 'API Endpoint',
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
variable: 'api_key',
|
||||
type: 'secret',
|
||||
label: {
|
||||
en_US: 'API Key',
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
]
|
||||
|
||||
const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCancel, datasetBindings, isEditMode, onEdit }) => {
|
||||
const { t } = useTranslation()
|
||||
const { notify } = useToastContext()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [showConfirm, setShowConfirm] = useState(false)
|
||||
const [formData, setFormData] = useState<CreateExternalAPIReq>({ name: '', settings: { endpoint: '', api_key: '' } })
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditMode && data)
|
||||
setFormData(data)
|
||||
}, [isEditMode, data])
|
||||
|
||||
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,
|
||||
settings: { ...formData.settings, api_key: formData.settings.api_key ? '[__HIDDEN__]' : formData.settings.api_key },
|
||||
},
|
||||
)
|
||||
notify({ type: 'success', message: 'External API updated successfully' })
|
||||
}
|
||||
else {
|
||||
const res = await createExternalAPI({ body: formData })
|
||||
if (res && res.id) {
|
||||
notify({ type: 'success', message: 'External API saved successfully' })
|
||||
onSave(res)
|
||||
}
|
||||
}
|
||||
onCancel()
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error saving/updating external API:', error)
|
||||
notify({ type: 'error', message: 'Failed to save/update External API' })
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<PortalToFollowElem open>
|
||||
<PortalToFollowElemContent className='w-full h-full z-[60]'>
|
||||
<div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
|
||||
<div className='flex relative w-[480px] flex-col items-start bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadows-shadow-xl'>
|
||||
<div className='flex flex-col pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
|
||||
<div className='self-stretch text-text-primary title-2xl-semi-bold flex-grow'>
|
||||
{
|
||||
isEditMode ? t('dataset.editExternalAPIFormTitle') : t('dataset.createExternalAPI')
|
||||
}
|
||||
</div>
|
||||
{isEditMode && (datasetBindings?.length ?? 0) > 0 && (
|
||||
<div className='text-text-tertiary system-xs-regular flex items-center'>
|
||||
{t('dataset.editExternalAPIFormWarning.front')}
|
||||
<span className='text-text-accent cursor-pointer flex items-center'>
|
||||
{datasetBindings?.length} {t('dataset.editExternalAPIFormWarning.end')}
|
||||
<Tooltip
|
||||
popupClassName='flex items-center self-stretch w-[320px]'
|
||||
popupContent={
|
||||
<div className='p-1'>
|
||||
<div className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch'>
|
||||
<div className='text-text-tertiary system-xs-medium-uppercase'>{`${datasetBindings?.length} ${t('dataset.editExternalAPITooltipTitle')}`}</div>
|
||||
</div>
|
||||
{datasetBindings?.map(binding => (
|
||||
<div key={binding.id} className='flex px-2 py-1 items-center gap-1 self-stretch'>
|
||||
<RiBook2Line className='w-4 h-4 text-text-secondary' />
|
||||
<div className='text-text-secondary system-sm-medium'>{binding.name}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
asChild={false}
|
||||
position='bottom'
|
||||
>
|
||||
<RiInformation2Line className='w-3.5 h-3.5' />
|
||||
</Tooltip>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ActionButton className='absolute top-5 right-5' onClick={onCancel}>
|
||||
<RiCloseLine className='w-[18px] h-[18px] text-text-tertiary flex-shrink-0' />
|
||||
</ActionButton>
|
||||
<Form
|
||||
value={formData}
|
||||
onChange={handleDataChange}
|
||||
formSchemas={formSchemas}
|
||||
className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'
|
||||
/>
|
||||
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
|
||||
<Button type='button' variant='secondary' onClick={onCancel}>
|
||||
{t('dataset.externalAPIForm.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
type='submit'
|
||||
variant='primary'
|
||||
onClick={() => {
|
||||
if (isEditMode && (datasetBindings?.length ?? 0) > 0)
|
||||
setShowConfirm(true)
|
||||
else if (isEditMode && onEdit)
|
||||
onEdit(formData)
|
||||
|
||||
else
|
||||
handleSave()
|
||||
}}
|
||||
disabled={hasEmptyInputs || loading}
|
||||
>
|
||||
{t('dataset.externalAPIForm.save')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className='flex px-2 py-3 justify-center items-center gap-1 self-stretch rounded-b-2xl
|
||||
border-t-[0.5px] border-divider-subtle bg-background-soft text-text-tertiary system-xs-regular'
|
||||
>
|
||||
<RiLock2Fill className='w-3 h-3 text-text-quaternary' />
|
||||
{t('dataset.externalAPIForm.encrypted.front')}
|
||||
<a
|
||||
className='text-text-accent'
|
||||
target='_blank' rel='noopener noreferrer'
|
||||
href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
|
||||
>
|
||||
PKCS1_OAEP
|
||||
</a>
|
||||
{t('dataset.externalAPIForm.encrypted.end')}
|
||||
</div>
|
||||
</div>
|
||||
{showConfirm && (datasetBindings?.length ?? 0) > 0 && (
|
||||
<Confirm
|
||||
isShow={showConfirm}
|
||||
type='warning'
|
||||
title='Warning'
|
||||
content={`${t('datasets.editExternalAPIConfirmWarningContent.front')} ${datasetBindings?.length} ${t('datasets.editExternalAPIConfirmWarningContent.end')}`}
|
||||
onCancel={() => setShowConfirm(false)}
|
||||
onConfirm={handleSave}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(AddExternalAPIModal)
|
||||
@ -0,0 +1,92 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
RiAddLine,
|
||||
RiBookOpenLine,
|
||||
RiCloseLine,
|
||||
} from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ExternalKnowledgeAPICard from '../external-knowledge-api-card'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import { useModalContext } from '@/context/modal-context'
|
||||
|
||||
type ExternalAPIPanelProps = {
|
||||
onClose: () => void
|
||||
isShow: boolean
|
||||
datasetBindings: { id: string; name: string }[]
|
||||
}
|
||||
|
||||
const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose, isShow, datasetBindings }) => {
|
||||
const { t } = useTranslation()
|
||||
const { setShowExternalKnowledgeAPIModal } = useModalContext()
|
||||
const { externalKnowledgeApiList, mutateExternalKnowledgeApis, isLoading } = useExternalKnowledgeApi()
|
||||
|
||||
const handleOpenExternalAPIModal = () => {
|
||||
setShowExternalKnowledgeAPIModal({
|
||||
payload: { name: '', settings: { endpoint: '', api_key: '' } },
|
||||
datasetBindings: [],
|
||||
onSaveCallback: () => {
|
||||
mutateExternalKnowledgeApis()
|
||||
},
|
||||
onCancelCallback: () => {
|
||||
mutateExternalKnowledgeApis()
|
||||
},
|
||||
isEditMode: false,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
tabIndex={-1}
|
||||
className={cn('absolute top-14 right-0 bottom-2 flex z-10 outline-none')}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
|
||||
)}
|
||||
>
|
||||
<div className='flex items-start self-stretch p-4 pb-0'>
|
||||
<div className='flex flex-col items-start gap-1 flex-grow'>
|
||||
<div className='self-stretch text-text-primary system-xl-semibold'>{t('dataset.externalAPIPanelTitle')}</div>
|
||||
<div className='self-stretch text-text-tertiary body-xs-regular'>{t('dataset.externalAPIPanelDescription')}</div>
|
||||
<a className='flex justify-center items-center gap-1 self-stretch cursor-pointer' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank'>
|
||||
<RiBookOpenLine className='w-3 h-3 text-text-accent' />
|
||||
<div className='flex-grow text-text-accent body-xs-regular'>{t('dataset.externalAPIPanelDocumentation')}</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<ActionButton onClick={() => onClose()}>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex px-4 py-3 flex-col justify-center items-start gap-2 self-stretch'>
|
||||
<Button
|
||||
variant={'primary'}
|
||||
className='flex justify-center items-center px-3 py-2 gap-0.5'
|
||||
onClick={handleOpenExternalAPIModal}
|
||||
>
|
||||
<RiAddLine className='w-4 h-4 text-components-button-primary-text' />
|
||||
<div className='text-components-button-primary-text system-sm-medium'>{t('dataset.createExternalAPI')}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className='flex py-0 px-4 flex-col items-start gap-1 flex-grow self-stretch'>
|
||||
{isLoading
|
||||
? (
|
||||
<Loading />
|
||||
)
|
||||
: (
|
||||
externalKnowledgeApiList.map(api => (
|
||||
<ExternalKnowledgeAPICard key={api.id} api={api} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExternalAPIPanel
|
||||
@ -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
|
||||
@ -0,0 +1,34 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useToastContext } from '@/app/components/base/toast'
|
||||
import ExternalKnowledgeBaseCreate from '@/app/components/datasets/external-knowledge-base/create'
|
||||
import type { CreateKnowledgeBaseReq } from '@/app/components/datasets/external-knowledge-base/create/declarations'
|
||||
import { createExternalKnowledgeBase } from '@/service/datasets'
|
||||
|
||||
const ExternalKnowledgeBaseConnector = () => {
|
||||
const { notify } = useToastContext()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
const handleConnect = async (formValue: CreateKnowledgeBaseReq) => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const result = await createExternalKnowledgeBase({ body: formValue })
|
||||
if (result && result.id) {
|
||||
notify({ type: 'success', message: 'External Knowledge Base Connected Successfully' })
|
||||
router.back()
|
||||
}
|
||||
else { throw new Error('Failed to create external knowledge base') }
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error creating external knowledge base:', error)
|
||||
notify({ type: 'error', message: 'Failed to connect External Knowledge Base' })
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
return <ExternalKnowledgeBaseCreate onConnect={handleConnect} loading={loading} />
|
||||
}
|
||||
|
||||
export default ExternalKnowledgeBaseConnector
|
||||
@ -0,0 +1,53 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Select from '@/app/components/base/select'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
|
||||
type ExternalApiSelectionProps = {
|
||||
external_knowledge_api_id: string
|
||||
external_knowledge_id: string
|
||||
onChange: (data: { external_knowledge_api_id?: string; external_knowledge_id?: string }) => void
|
||||
}
|
||||
|
||||
const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_knowledge_api_id, external_knowledge_id, onChange }) => {
|
||||
const { t } = useTranslation()
|
||||
const { externalKnowledgeApiList } = useExternalKnowledgeApi()
|
||||
|
||||
const apiItems = externalKnowledgeApiList.map(api => ({
|
||||
value: api.id,
|
||||
name: api.name,
|
||||
}))
|
||||
|
||||
useEffect(() => {
|
||||
if (!external_knowledge_api_id && apiItems.length > 0)
|
||||
onChange({ external_knowledge_api_id: apiItems[0].value, external_knowledge_id })
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<form className='flex flex-col gap-4 self-stretch'>
|
||||
<div className='flex flex-col gap-1 self-stretch'>
|
||||
<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 })}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1 self-stretch'>
|
||||
<div className='flex flex-col self-stretch'>
|
||||
<label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeId')}</label>
|
||||
</div>
|
||||
<Input
|
||||
value={external_knowledge_id}
|
||||
onChange={e => onChange({ external_knowledge_id: e.target.value, external_knowledge_api_id })}
|
||||
placeholder={t('dataset.externalKnowledgeIdPlaceholder') ?? ''}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExternalApiSelection
|
||||
@ -0,0 +1,33 @@
|
||||
import { RiBookOpenLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const InfoPanel = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex w-[360px] pt-[108px] pb-2 pr-8 flex-col items-start'>
|
||||
<div className='flex min-w-[240px] w-full p-6 flex-col items-start gap-3 self-stretch rounded-xl bg-background-section'>
|
||||
<div className='flex p-1 w-10 h-10 justify-center items-center gap-2 flex-grow self-stretch rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg'>
|
||||
<RiBookOpenLine className='w-5 h-5 text-text-accent' />
|
||||
</div>
|
||||
<p className='flex flex-col items-start gap-2 self-stretch'>
|
||||
<span className='self-stretch text-text-secondary system-xl-semibold'>
|
||||
{t('dataset.connectDatasetIntro.title')}
|
||||
</span>
|
||||
<span className='text-text-tertiary system-sm-regular'>
|
||||
{t('dataset.connectDatasetIntro.content.front')}
|
||||
<a className='text-text-accent system-sm-regular ml-1' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank' rel="noopener noreferrer">
|
||||
{t('dataset.connectDatasetIntro.content.link')}
|
||||
</a>
|
||||
{t('dataset.connectDatasetIntro.content.end')}
|
||||
</span>
|
||||
<a className='self-stretch text-text-accent system-sm-regular' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
|
||||
{t('dataset.connectDatasetIntro.learnMore')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InfoPanel
|
||||
@ -0,0 +1,65 @@
|
||||
import React from 'react'
|
||||
import { RiBookOpenLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '@/app/components/base/input'
|
||||
|
||||
type KnowledgeBaseInfoProps = {
|
||||
name: string
|
||||
description?: string
|
||||
onChange: (data: { name?: string; description?: string }) => void
|
||||
}
|
||||
|
||||
const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name, description, onChange }) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
onChange({ name: e.target.value })
|
||||
}
|
||||
|
||||
const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
onChange({ description: e.target.value })
|
||||
}
|
||||
|
||||
return (
|
||||
<form className='flex flex-col gap-4 self-stretch'>
|
||||
<div className='flex flex-col gap-4 self-stretch'>
|
||||
<div className='flex flex-col gap-1 self-stretch'>
|
||||
<div className='flex flex-col justify-center self-stretch'>
|
||||
<label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeName')}</label>
|
||||
</div>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={handleNameChange}
|
||||
placeholder={t('dataset.externalKnowledgeNamePlaceholder') ?? ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1 self-stretch'>
|
||||
<div className='flex flex-col justify-center self-stretch'>
|
||||
<label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeDescription')}</label>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1 self-stretch'>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={ e => handleDescriptionChange(e)}
|
||||
placeholder={t('dataset.externalKnowledgeDescriptionPlaceholder') ?? ''}
|
||||
className={`flex h-20 p-2 self-stretch items-start rounded-lg bg-components-input-bg-normal ${description ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder'} system-sm-regular`}
|
||||
/>
|
||||
<a
|
||||
className='flex py-0.5 gap-1 self-stretch'
|
||||
href='https://docs.dify.ai/features/datasets#how-to-write-a-good-dataset-description'
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className='flex p-0.5 items-center gap-2'>
|
||||
<RiBookOpenLine className='w-3 h-3 text-text-tertiary' />
|
||||
</div>
|
||||
<div className='flex-grow text-text-tertiary body-xs-regular'>{t('dataset.learnHowToWriteGoodKnowledgeDescription')}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default KnowledgeBaseInfo
|
||||
@ -0,0 +1,55 @@
|
||||
import type { FC } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import TopKItem from '@/app/components/base/param-item/top-k-item'
|
||||
import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type RetrievalSettingsProps = {
|
||||
topK: number
|
||||
scoreThreshold: number
|
||||
isInHitTesting?: boolean
|
||||
isInRetrievalSetting?: boolean
|
||||
onChange: (data: { top_k?: number; score_threshold?: number }) => void
|
||||
}
|
||||
|
||||
const RetrievalSettings: FC<RetrievalSettingsProps> = ({ topK, scoreThreshold, onChange, isInHitTesting = false, isInRetrievalSetting = false }) => {
|
||||
const [scoreThresholdEnabled, setScoreThresholdEnabled] = useState(false)
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-2 self-stretch', isInRetrievalSetting && 'w-full max-w-[480px]')}>
|
||||
{!isInHitTesting && !isInRetrievalSetting && <div className='flex h-7 pt-1 flex-col gap-2 self-stretch'>
|
||||
<label className='text-text-secondary system-sm-semibold'>{t('dataset.retrievalSettings')}</label>
|
||||
</div>}
|
||||
<div className={cn(
|
||||
'flex gap-4 self-stretch',
|
||||
{
|
||||
'flex-col': isInHitTesting,
|
||||
'flex-row': isInRetrievalSetting,
|
||||
'flex-col sm:flex-row': !isInHitTesting && !isInRetrievalSetting,
|
||||
},
|
||||
)}>
|
||||
<div className='flex flex-col gap-1 flex-grow'>
|
||||
<TopKItem
|
||||
className='grow'
|
||||
value={topK}
|
||||
onChange={(_key, v) => onChange({ top_k: v })}
|
||||
enable={true}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1 flex-grow'>
|
||||
<ScoreThresholdItem
|
||||
className='grow'
|
||||
value={scoreThreshold}
|
||||
onChange={(_key, v) => onChange({ score_threshold: v })}
|
||||
enable={scoreThresholdEnabled}
|
||||
hasSwitch={true}
|
||||
onSwitchChange={(_key, v) => setScoreThresholdEnabled(v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RetrievalSettings
|
||||
@ -0,0 +1,11 @@
|
||||
export type CreateKnowledgeBaseReq = {
|
||||
name: string
|
||||
description?: string
|
||||
external_knowledge_api_id: string
|
||||
provider: 'external'
|
||||
external_knowledge_id: string
|
||||
external_retrieval_model: {
|
||||
top_k: number
|
||||
score_threshold: number
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,117 @@
|
||||
'use client'
|
||||
|
||||
import { useCallback, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import KnowledgeBaseInfo from './KnowledgeBaseInfo'
|
||||
import ExternalApiSelection from './ExternalApiSelection'
|
||||
import RetrievalSettings from './RetrievalSettings'
|
||||
import InfoPanel from './InfoPanel'
|
||||
import type { CreateKnowledgeBaseReq } from './declarations'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
type ExternalKnowledgeBaseCreateProps = {
|
||||
onConnect: (formValue: CreateKnowledgeBaseReq) => void
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> = ({ onConnect, loading }) => {
|
||||
const { t } = useTranslation()
|
||||
const router = useRouter()
|
||||
const [formData, setFormData] = useState<CreateKnowledgeBaseReq>({
|
||||
name: '',
|
||||
description: '',
|
||||
external_knowledge_api_id: '',
|
||||
external_knowledge_id: '',
|
||||
external_retrieval_model: {
|
||||
top_k: 2,
|
||||
score_threshold: 0.5,
|
||||
},
|
||||
provider: 'external',
|
||||
|
||||
})
|
||||
|
||||
const navBackHandle = useCallback(() => {
|
||||
router.replace('/datasets')
|
||||
}, [router])
|
||||
|
||||
const handleFormChange = (newData: CreateKnowledgeBaseReq) => {
|
||||
setFormData(newData)
|
||||
}
|
||||
|
||||
const isFormValid = formData.name.trim() !== ''
|
||||
&& formData.external_knowledge_api_id !== ''
|
||||
&& formData.external_knowledge_id !== ''
|
||||
&& formData.external_retrieval_model.top_k !== undefined
|
||||
&& formData.external_retrieval_model.score_threshold !== undefined
|
||||
|
||||
return (
|
||||
<div className='flex flex-col flex-grow self-stretch rounded-t-2xl border-t border-effects-highlight bg-components-panel-bg'>
|
||||
<div className='flex justify-center flex-grow self-stretch'>
|
||||
<div className='flex w-full max-w-[960px] px-14 py-0 flex-col items-center'>
|
||||
<div className='flex w-full max-w-[640px] pt-6 pb-8 flex-col grow items-center gap-4'>
|
||||
<div className='relative flex py-2 items-center gap-2 self-stretch'>
|
||||
<div className='flex-grow text-text-primary system-xl-semibold'>{t('dataset.connectDataset')}</div>
|
||||
<Button
|
||||
className='flex w-8 h-8 p-2 items-center justify-center absolute left-[-44px] top-1 rounded-full'
|
||||
variant='tertiary'
|
||||
onClick={navBackHandle}
|
||||
>
|
||||
<RiArrowLeftLine className='w-4 h-4 text-text-tertiary' />
|
||||
</Button>
|
||||
</div>
|
||||
<KnowledgeBaseInfo
|
||||
name={formData.name}
|
||||
description={formData.description ?? ''}
|
||||
onChange={data => handleFormChange({
|
||||
...formData,
|
||||
...data,
|
||||
})}
|
||||
/>
|
||||
<Divider />
|
||||
<ExternalApiSelection
|
||||
external_knowledge_api_id={formData.external_knowledge_api_id}
|
||||
external_knowledge_id={formData.external_knowledge_id}
|
||||
onChange={data => handleFormChange({
|
||||
...formData,
|
||||
...data,
|
||||
})}
|
||||
/>
|
||||
<RetrievalSettings
|
||||
topK={formData.external_retrieval_model.top_k}
|
||||
scoreThreshold={formData.external_retrieval_model.score_threshold}
|
||||
onChange={data => handleFormChange({
|
||||
...formData,
|
||||
external_retrieval_model: {
|
||||
...formData.external_retrieval_model,
|
||||
...data,
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<div className='flex py-2 justify-end items-center gap-2 self-stretch'>
|
||||
<Button variant='secondary' onClick={navBackHandle}>
|
||||
<div className='text-components-button-secondary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.cancel')}</div>
|
||||
</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
onClick={() => {
|
||||
onConnect(formData)
|
||||
}}
|
||||
disabled={!isFormValid}
|
||||
loading={loading}
|
||||
>
|
||||
<div className='text-components-button-primary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.connect')}</div>
|
||||
<RiArrowRightLine className='w-4 h-4 text-components-button-primary-text' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<InfoPanel />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExternalKnowledgeBaseCreate
|
||||
@ -0,0 +1,65 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
RiCloseLine,
|
||||
} from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import RetrievalSettings from '../external-knowledge-base/create/RetrievalSettings'
|
||||
import Button from '@/app/components/base/button'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
|
||||
type ModifyExternalRetrievalModalProps = {
|
||||
onClose: () => void
|
||||
onSave: (data: { top_k: number; score_threshold: number }) => void
|
||||
initialTopK: number
|
||||
initialScoreThreshold: number
|
||||
}
|
||||
|
||||
const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps> = ({
|
||||
onClose,
|
||||
onSave,
|
||||
initialTopK,
|
||||
initialScoreThreshold,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [topK, setTopK] = useState(initialTopK)
|
||||
const [scoreThreshold, setScoreThreshold] = useState(initialScoreThreshold)
|
||||
|
||||
const handleSettingsChange = (data: { top_k?: number; score_threshold?: number }) => {
|
||||
if (data.top_k !== undefined)
|
||||
setTopK(data.top_k)
|
||||
if (data.score_threshold !== undefined)
|
||||
setScoreThreshold(data.score_threshold)
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
onSave({ top_k: topK, score_threshold: scoreThreshold })
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='absolute z-10 top-[36px] right-[14px] flex w-[320px] flex-col items-start rounded-2xl border-[0.5px]
|
||||
border-components-panel-border bg-components-panel-bg shadows-shadow-2xl'
|
||||
>
|
||||
<div className='flex p-4 pb-2 items-center justify-between self-stretch'>
|
||||
<div className='text-text-primary system-xl-semibold flex-grow'>{t('datasetHitTesting.settingTitle')}</div>
|
||||
<ActionButton className='ml-auto' onClick={onClose}>
|
||||
<RiCloseLine className='w-4 h-4 flex-shrink-0' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
<div className='flex p-4 pt-2 flex-col justify-center items-start gap-4 self-stretch'>
|
||||
<RetrievalSettings
|
||||
topK={topK}
|
||||
scoreThreshold={scoreThreshold}
|
||||
onChange={handleSettingsChange}
|
||||
isInHitTesting={true}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex p-4 pt-2 justify-end items-end gap-1 w-full'>
|
||||
<Button className='flex-shrink-0 min-w-[72px]' onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' className='flex-shrink-0 min-w-[72px]' onClick={handleSave}>{t('common.operation.save')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModifyExternalRetrievalModal
|
||||
@ -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
|
||||
}
|
||||
Loading…
Reference in New Issue