mirror of
https://github.com/langgenius/dify.git
synced 2026-07-23 20:18:40 +08:00
255 lines
9.9 KiB
TypeScript
255 lines
9.9 KiB
TypeScript
import type { FC } from 'react'
|
|
import type { CreateExternalAPIReq, FormSchema } from '../declarations'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogActions,
|
|
AlertDialogCancelButton,
|
|
AlertDialogConfirmButton,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogTitle,
|
|
} from '@langgenius/dify-ui/alert-dialog'
|
|
import { Button } from '@langgenius/dify-ui/button'
|
|
import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
|
|
import { toast } from '@langgenius/dify-ui/toast'
|
|
import { RiBook2Line, RiCloseLine, RiInformation2Line, RiLock2Fill } from '@remixicon/react'
|
|
import { memo, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import ActionButton from '@/app/components/base/action-button'
|
|
import { createExternalAPI } from '@/service/datasets'
|
|
import Form from './Form'
|
|
|
|
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 emptyExternalAPIFormData: CreateExternalAPIReq = {
|
|
name: '',
|
|
settings: {
|
|
endpoint: '',
|
|
api_key: '',
|
|
},
|
|
}
|
|
|
|
const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({
|
|
data,
|
|
onSave,
|
|
onCancel,
|
|
datasetBindings,
|
|
isEditMode,
|
|
onEdit,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
const [loading, setLoading] = useState(false)
|
|
const [showConfirm, setShowConfirm] = useState(false)
|
|
const [formData, setFormData] = useState<CreateExternalAPIReq>(() =>
|
|
isEditMode && data ? data : emptyExternalAPIFormData,
|
|
)
|
|
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) {
|
|
toast.error(t(($) => $['apiBasedExtension.modal.apiKey.lengthError'], { ns: 'common' }))
|
|
setLoading(false)
|
|
return
|
|
}
|
|
try {
|
|
setLoading(true)
|
|
if (isEditMode && onEdit) {
|
|
// Only send [__HIDDEN__] when the user has not changed the key, otherwise
|
|
// send the actual api_key so updated tokens are persisted.
|
|
const apiKeyToSend =
|
|
formData.settings.api_key === '[__HIDDEN__]' ? '[__HIDDEN__]' : formData.settings.api_key
|
|
await onEdit({
|
|
...formData,
|
|
settings: { ...formData.settings, api_key: apiKeyToSend },
|
|
})
|
|
toast.success('External API updated successfully')
|
|
} else {
|
|
const res = await createExternalAPI({ body: formData })
|
|
if (res && res.id) {
|
|
toast.success('External API saved successfully')
|
|
onSave(res)
|
|
}
|
|
}
|
|
onCancel()
|
|
} catch (error) {
|
|
console.error('Error saving/updating external API:', error)
|
|
toast.error('Failed to save/update External API')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
return (
|
|
<Dialog
|
|
open
|
|
disablePointerDismissal
|
|
onOpenChange={(open) => {
|
|
if (!open) onCancel()
|
|
}}
|
|
>
|
|
<DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[480px]! max-w-none! flex-col overflow-hidden! rounded-2xl! border-[0.5px]! border-components-panel-border! bg-components-panel-bg! p-0! shadow-xl!">
|
|
<div className="relative flex min-h-0 w-full flex-1 flex-col items-start">
|
|
<div className="flex shrink-0 flex-col items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
|
|
<DialogTitle className="grow self-stretch title-2xl-semi-bold text-text-primary">
|
|
{isEditMode
|
|
? t(($) => $.editExternalAPIFormTitle, { ns: 'dataset' })
|
|
: t(($) => $.createExternalAPI, { ns: 'dataset' })}
|
|
</DialogTitle>
|
|
{isEditMode && (datasetBindings?.length ?? 0) > 0 && (
|
|
<div className="flex items-center system-xs-regular text-text-tertiary">
|
|
{t(($) => $['editExternalAPIFormWarning.front'], { ns: 'dataset' })}
|
|
<span className="flex cursor-pointer items-center text-text-accent">
|
|
|
|
{datasetBindings?.length}{' '}
|
|
{t(($) => $['editExternalAPIFormWarning.end'], { ns: 'dataset' })}
|
|
|
|
<Popover>
|
|
<PopoverTrigger
|
|
openOnHover
|
|
aria-label={t(($) => $['editExternalAPIFormWarning.end'], { ns: 'dataset' })}
|
|
render={
|
|
<button
|
|
type="button"
|
|
className="flex size-3.5 items-center justify-center rounded-sm outline-hidden hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
|
|
>
|
|
<RiInformation2Line className="size-3.5" />
|
|
</button>
|
|
}
|
|
/>
|
|
<PopoverContent
|
|
placement="bottom"
|
|
popupClassName="flex w-[320px] items-center self-stretch px-3 py-2"
|
|
>
|
|
<div className="p-1">
|
|
<div className="flex items-start self-stretch pt-1 pr-3 pb-0.5 pl-2">
|
|
<div className="system-xs-medium-uppercase text-text-tertiary">{`${datasetBindings?.length} ${t(($) => $.editExternalAPITooltipTitle, { ns: 'dataset' })}`}</div>
|
|
</div>
|
|
{datasetBindings?.map((binding) => (
|
|
<div
|
|
key={binding.id}
|
|
className="flex items-center gap-1 self-stretch px-2 py-1"
|
|
>
|
|
<RiBook2Line className="size-4 text-text-secondary" />
|
|
<div className="system-sm-medium text-text-secondary">
|
|
{binding.name}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<ActionButton className="absolute top-5 right-5" onClick={onCancel}>
|
|
<RiCloseLine className="h-[18px] w-[18px] shrink-0 text-text-tertiary" />
|
|
</ActionButton>
|
|
<Form
|
|
value={formData}
|
|
onChange={handleDataChange}
|
|
formSchemas={formSchemas}
|
|
className="min-h-0 w-full flex-1 overflow-y-auto px-6 py-3"
|
|
/>
|
|
<div className="flex shrink-0 items-center justify-end gap-2 self-stretch p-6 pt-5">
|
|
<Button type="button" variant="secondary" onClick={onCancel}>
|
|
{t(($) => $['externalAPIForm.cancel'], { ns: 'dataset' })}
|
|
</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(($) => $['externalAPIForm.save'], { ns: 'dataset' })}
|
|
</Button>
|
|
</div>
|
|
<div className="flex shrink-0 items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 system-xs-regular text-text-tertiary">
|
|
<RiLock2Fill className="size-3 text-text-quaternary" />
|
|
{t(($) => $['externalAPIForm.encrypted.front'], { ns: 'dataset' })}
|
|
<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(($) => $['externalAPIForm.encrypted.end'], { ns: 'dataset' })}
|
|
</div>
|
|
</div>
|
|
<AlertDialog
|
|
open={showConfirm && (datasetBindings?.length ?? 0) > 0}
|
|
onOpenChange={(open) => !open && setShowConfirm(false)}
|
|
>
|
|
<AlertDialogContent>
|
|
<div className="flex flex-col gap-2 px-6 pt-6 pb-4">
|
|
<AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
|
|
Warning
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
|
|
{`${t(($) => $['editExternalAPIConfirmWarningContent.front'], { ns: 'dataset' })} ${datasetBindings?.length} ${t(($) => $['editExternalAPIConfirmWarningContent.end'], { ns: 'dataset' })}`}
|
|
</AlertDialogDescription>
|
|
</div>
|
|
<AlertDialogActions>
|
|
<AlertDialogCancelButton>
|
|
{t(($) => $['operation.cancel'], { ns: 'common' })}
|
|
</AlertDialogCancelButton>
|
|
<AlertDialogConfirmButton onClick={handleSave}>
|
|
{t(($) => $['operation.confirm'], { ns: 'common' })}
|
|
</AlertDialogConfirmButton>
|
|
</AlertDialogActions>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|
|
export default memo(AddExternalAPIModal)
|