mirror of
https://github.com/langgenius/dify.git
synced 2026-08-02 18:56:34 +08:00
90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
'use client'
|
|
import { Button } from '@langgenius/dify-ui/button'
|
|
import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
|
|
import { Textarea } from '@langgenius/dify-ui/textarea'
|
|
import { toast } from '@langgenius/dify-ui/toast'
|
|
import { useAtomValue } from 'jotai'
|
|
import { useCallback, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { userProfileEmailAtom } from '@/context/account-state'
|
|
import { useRouter } from '@/next/navigation'
|
|
import { useLogout } from '@/service/use-common'
|
|
import { useDeleteAccountFeedback } from '../state'
|
|
|
|
type DeleteAccountProps = {
|
|
onCancel: () => void
|
|
onConfirm: () => void
|
|
}
|
|
|
|
export default function FeedBack(props: DeleteAccountProps) {
|
|
const { t } = useTranslation()
|
|
const userProfileEmail = useAtomValue(userProfileEmailAtom)
|
|
const router = useRouter()
|
|
const [userFeedback, setUserFeedback] = useState('')
|
|
const { isPending, mutateAsync: sendFeedback } = useDeleteAccountFeedback()
|
|
|
|
const { mutateAsync: logout } = useLogout()
|
|
const handleSuccess = useCallback(async () => {
|
|
try {
|
|
await logout()
|
|
// Tokens are now stored in cookies and cleared by backend
|
|
router.push('/signin')
|
|
toast.info(t(($) => $['account.deleteSuccessTip'], { ns: 'common' }))
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}, [router, t])
|
|
|
|
const handleSubmit = useCallback(async () => {
|
|
try {
|
|
await sendFeedback({ feedback: userFeedback, email: userProfileEmail })
|
|
props.onConfirm()
|
|
await handleSuccess()
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}, [handleSuccess, userFeedback, sendFeedback, userProfileEmail, props])
|
|
|
|
const handleSkip = useCallback(() => {
|
|
props.onCancel()
|
|
handleSuccess()
|
|
}, [handleSuccess, props])
|
|
return (
|
|
<Dialog
|
|
open
|
|
onOpenChange={(open) => {
|
|
if (!open) props.onCancel()
|
|
}}
|
|
>
|
|
<DialogContent
|
|
className="max-w-[480px] overflow-hidden!"
|
|
backdropClassName="bg-background-overlay-backdrop backdrop-blur-[6px]"
|
|
>
|
|
<DialogTitle className="pr-8 pb-3 title-2xl-semi-bold text-text-primary">
|
|
{t(($) => $['account.feedbackTitle'], { ns: 'common' })}
|
|
</DialogTitle>
|
|
<label className="mt-3 mb-1 flex items-center system-sm-semibold text-text-secondary">
|
|
{t(($) => $['account.feedbackLabel'], { ns: 'common' })}
|
|
</label>
|
|
<Textarea
|
|
aria-label={t(($) => $['account.feedbackLabel'], { ns: 'common' }) as string}
|
|
rows={6}
|
|
value={userFeedback}
|
|
placeholder={t(($) => $['account.feedbackPlaceholder'], { ns: 'common' }) as string}
|
|
onValueChange={(value) => {
|
|
setUserFeedback(value)
|
|
}}
|
|
/>
|
|
<div className="mt-3 flex w-full flex-col gap-2">
|
|
<Button className="w-full" loading={isPending} variant="primary" onClick={handleSubmit}>
|
|
{t(($) => $['operation.submit'], { ns: 'common' })}
|
|
</Button>
|
|
<Button className="w-full" onClick={handleSkip}>
|
|
{t(($) => $['operation.skip'], { ns: 'common' })}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|