mirror of https://github.com/langgenius/dify.git
110 lines
3.5 KiB
TypeScript
110 lines
3.5 KiB
TypeScript
import {
|
|
memo,
|
|
useCallback,
|
|
useRef,
|
|
} from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { RiExternalLinkLine } from '@remixicon/react'
|
|
import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
|
|
import Modal from '@/app/components/base/modal/modal'
|
|
import {
|
|
useAddPluginToolCredential,
|
|
useGetPluginToolCredentialSchema,
|
|
useInvalidPluginToolCredentialInfo,
|
|
useUpdatePluginToolCredential,
|
|
} from '@/service/use-plugins-auth'
|
|
import { CredentialTypeEnum } from '../types'
|
|
import AuthForm from '@/app/components/base/form/form-scenarios/auth'
|
|
import type { FromRefObject } from '@/app/components/base/form/types'
|
|
import { useToastContext } from '@/app/components/base/toast'
|
|
|
|
export type ApiKeyModalProps = {
|
|
provider: string
|
|
onClose?: () => void
|
|
editValues?: Record<string, any>
|
|
onRemove?: () => void
|
|
}
|
|
const ApiKeyModal = ({
|
|
provider,
|
|
onClose,
|
|
editValues,
|
|
onRemove,
|
|
}: ApiKeyModalProps) => {
|
|
const { t } = useTranslation()
|
|
const { notify } = useToastContext()
|
|
const { data } = useGetPluginToolCredentialSchema(provider, CredentialTypeEnum.API_KEY)
|
|
const { mutateAsync: addPluginToolCredential } = useAddPluginToolCredential(provider)
|
|
const { mutateAsync: updatePluginToolCredential } = useUpdatePluginToolCredential(provider)
|
|
const invalidatePluginToolCredentialInfo = useInvalidPluginToolCredentialInfo(provider)
|
|
const formRef = useRef<FromRefObject>(null)
|
|
const handleConfirm = useCallback(async () => {
|
|
const store = formRef.current?.getFormStore()
|
|
const values = store?.state.values
|
|
|
|
if (editValues) {
|
|
await updatePluginToolCredential({
|
|
credentials: values,
|
|
type: CredentialTypeEnum.API_KEY,
|
|
})
|
|
}
|
|
else {
|
|
await addPluginToolCredential({
|
|
credentials: values,
|
|
type: CredentialTypeEnum.API_KEY,
|
|
})
|
|
}
|
|
notify({
|
|
type: 'success',
|
|
message: t('common.api.actionSuccess'),
|
|
})
|
|
|
|
onClose?.()
|
|
invalidatePluginToolCredentialInfo()
|
|
}, [addPluginToolCredential, onClose, invalidatePluginToolCredentialInfo, updatePluginToolCredential, notify, t, editValues])
|
|
|
|
return (
|
|
<Modal
|
|
size='md'
|
|
title='API Key Authorization Configuration'
|
|
subTitle='After configuring credentials, all members within the workspace can use this tool when orchestrating applications.'
|
|
onClose={onClose}
|
|
onCancel={onClose}
|
|
footerSlot={
|
|
<a
|
|
className='system-xs-regular flex h-8 grow items-center text-text-accent'
|
|
href=''
|
|
target='_blank'
|
|
>
|
|
Get your API Key from OpenAI
|
|
<RiExternalLinkLine className='ml-1 h-3 w-3' />
|
|
</a>
|
|
}
|
|
bottomSlot={
|
|
<div className='flex items-center justify-center bg-background-section-burn py-3 text-xs text-text-tertiary'>
|
|
<Lock01 className='mr-1 h-3 w-3 text-text-tertiary' />
|
|
{t('common.modelProvider.encrypted.front')}
|
|
<a
|
|
className='mx-1 text-text-accent'
|
|
target='_blank' rel='noopener noreferrer'
|
|
href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
|
|
>
|
|
PKCS1_OAEP
|
|
</a>
|
|
{t('common.modelProvider.encrypted.back')}
|
|
</div>
|
|
}
|
|
onConfirm={handleConfirm}
|
|
showExtraButton={!!editValues}
|
|
onExtraButtonClick={onRemove}
|
|
>
|
|
<AuthForm
|
|
ref={formRef}
|
|
formSchemas={data}
|
|
defaultValues={editValues}
|
|
/>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default memo(ApiKeyModal)
|