dify

dify/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx

@@ -0,0 +1,175 @@
+'use client'
+
+import type { Area } from 'react-easy-crop'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { RiDeleteBin5Line, RiPencilLine } from '@remixicon/react'
+import { updateUserProfile } from '@/service/common'
+import { ToastContext } from '@/app/components/base/toast'
+import ImageInput, { type OnImageInput } from '@/app/components/base/app-icon-picker/ImageInput'
+import Modal from '@/app/components/base/modal'
+import Divider from '@/app/components/base/divider'
+import Button from '@/app/components/base/button'
+import Avatar, { type AvatarProps } from '@/app/components/base/avatar'
+import { useLocalFileUploader } from '@/app/components/base/image-uploader/hooks'
+import type { ImageFile } from '@/types/app'
+import getCroppedImg from '@/app/components/base/app-icon-picker/utils'
+import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
+
+type InputImageInfo = { file: File } | { tempUrl: string; croppedAreaPixels: Area; fileName: string }
+type AvatarWithEditProps = AvatarProps & { onSave?: () => void }
+
+const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+
+  const [inputImageInfo, setInputImageInfo] = useState<InputImageInfo>()
+  const [isShowAvatarPicker, setIsShowAvatarPicker] = useState(false)
+  const [uploading, setUploading] = useState(false)
+  const [isShowDeleteConfirm, setIsShowDeleteConfirm] = useState(false)
+  const [hoverArea, setHoverArea] = useState<string>('left')
+
+  const [onAvatarError, setOnAvatarError] = useState(false)
+
+  const handleImageInput: OnImageInput = useCallback(async (isCropped: boolean, fileOrTempUrl: string | File, croppedAreaPixels?: Area, fileName?: string) => {
+    setInputImageInfo(
+      isCropped
+        ? { tempUrl: fileOrTempUrl as string, croppedAreaPixels: croppedAreaPixels!, fileName: fileName! }
+        : { file: fileOrTempUrl as File },
+    )
+  }, [setInputImageInfo])
+
+  const handleSaveAvatar = useCallback(async (uploadedFileId: string) => {
+    try {
+      await updateUserProfile({ url: 'account/avatar', body: { avatar: uploadedFileId } })
+      setIsShowAvatarPicker(false)
+      onSave?.()
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+    }
+  }, [notify, onSave, t])
+
+  const handleDeleteAvatar = useCallback(async () => {
+    try {
+      await updateUserProfile({ url: 'account/avatar', body: { avatar: '' } })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      setIsShowDeleteConfirm(false)
+      onSave?.()
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+    }
+  }, [notify, onSave, t])
+
+  const { handleLocalFileUpload } = useLocalFileUploader({
+    limit: 3,
+    disabled: false,
+    onUpload: (imageFile: ImageFile) => {
+      if (imageFile.progress === 100) {
+        setUploading(false)
+        setInputImageInfo(undefined)
+        handleSaveAvatar(imageFile.fileId)
+      }
+
+      // Error
+      if (imageFile.progress === -1)
+        setUploading(false)
+    },
+  })
+
+  const handleSelect = useCallback(async () => {
+    if (!inputImageInfo)
+      return
+    setUploading(true)
+    if ('file' in inputImageInfo) {
+      handleLocalFileUpload(inputImageInfo.file)
+      return
+    }
+    const blob = await getCroppedImg(inputImageInfo.tempUrl, inputImageInfo.croppedAreaPixels, inputImageInfo.fileName)
+    const file = new File([blob], inputImageInfo.fileName, { type: blob.type })
+    handleLocalFileUpload(file)
+  }, [handleLocalFileUpload, inputImageInfo])
+
+  if (DISABLE_UPLOAD_IMAGE_AS_ICON)
+    return <Avatar {...props} />
+
+  return (
+    <>
+      <div>
+        <div className="group relative">
+          <Avatar {...props} onError={(x: boolean) => setOnAvatarError(x)} />
+          <div
+            className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={() => {
+              if (hoverArea === 'right' && !onAvatarError)
+                setIsShowDeleteConfirm(true)
+              else
+                setIsShowAvatarPicker(true)
+            }}
+            onMouseMove={(e) => {
+              const rect = e.currentTarget.getBoundingClientRect()
+              const x = e.clientX - rect.left
+              const isRight = x > rect.width / 2
+              setHoverArea(isRight ? 'right' : 'left')
+            }}
+          >
+            {hoverArea === 'right' && !onAvatarError ? (
+              <span className="text-xs text-white">
+                <RiDeleteBin5Line />
+              </span>
+            ) : (
+              <span className="text-xs text-white">
+                <RiPencilLine />
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <Modal
+        closable
+        className="!w-[362px] !p-0"
+        isShow={isShowAvatarPicker}
+        onClose={() => setIsShowAvatarPicker(false)}
+      >
+        <ImageInput onImageInput={handleImageInput} cropShape='round' />
+        <Divider className='m-0' />
+
+        <div className='flex w-full items-center justify-center gap-2 p-3'>
+          <Button className='w-full' onClick={() => setIsShowAvatarPicker(false)}>
+            {t('app.iconPicker.cancel')}
+          </Button>
+
+          <Button variant="primary" className='w-full' disabled={uploading || !inputImageInfo} loading={uploading} onClick={handleSelect}>
+            {t('app.iconPicker.ok')}
+          </Button>
+        </div>
+      </Modal>
+
+      <Modal
+        closable
+        className="!w-[362px] !p-6"
+        isShow={isShowDeleteConfirm}
+        onClose={() => setIsShowDeleteConfirm(false)}
+      >
+        <div className="title-2xl-semi-bold mb-3 text-text-primary">{t('common.avatar.deleteTitle')}</div>
+        <p className="mb-8 text-text-secondary">{t('common.avatar.deleteDescription')}</p>
+
+        <div className="flex w-full items-center justify-center gap-2">
+          <Button className="w-full" onClick={() => setIsShowDeleteConfirm(false)}>
+            {t('common.operation.cancel')}
+          </Button>
+
+          <Button variant="warning" className="w-full" onClick={handleDeleteAvatar}>
+            {t('common.operation.delete')}
+          </Button>
+        </div>
+      </Modal>
+    </>
+  )
+}
+
+export default AvatarWithEdit

dify/web/app/account/(commonLayout)/account-page/email-change-modal.tsx

@@ -0,0 +1,382 @@
+import React, { useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { useRouter } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import { ToastContext } from '@/app/components/base/toast'
+import { RiCloseLine } from '@remixicon/react'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import {
+  checkEmailExisted,
+  resetEmail,
+  sendVerifyCode,
+  verifyEmail,
+} from '@/service/common'
+import { noop } from 'lodash-es'
+import { asyncRunSafe } from '@/utils'
+import type { ResponseError } from '@/service/fetch'
+import { useLogout } from '@/service/use-common'
+
+type Props = {
+  show: boolean
+  onClose: () => void
+  email: string
+}
+
+enum STEP {
+  start = 'start',
+  verifyOrigin = 'verifyOrigin',
+  newEmail = 'newEmail',
+  verifyNew = 'verifyNew',
+}
+
+const EmailChangeModal = ({ onClose, email, show }: Props) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const router = useRouter()
+  const [step, setStep] = useState<STEP>(STEP.start)
+  const [code, setCode] = useState<string>('')
+  const [mail, setMail] = useState<string>('')
+  const [time, setTime] = useState<number>(0)
+  const [stepToken, setStepToken] = useState<string>('')
+  const [newEmailExited, setNewEmailExited] = useState<boolean>(false)
+  const [unAvailableEmail, setUnAvailableEmail] = useState<boolean>(false)
+  const [isCheckingEmail, setIsCheckingEmail] = useState<boolean>(false)
+
+  const startCount = () => {
+    setTime(60)
+    const timer = setInterval(() => {
+      setTime((prev) => {
+        if (prev <= 0) {
+          clearInterval(timer)
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+  }
+
+  const sendEmail = async (email: string, isOrigin: boolean, token?: string) => {
+    try {
+      const res = await sendVerifyCode({
+        email,
+        phase: isOrigin ? 'old_email' : 'new_email',
+        token,
+      })
+      startCount()
+      if (res.data)
+        setStepToken(res.data)
+    }
+    catch (error) {
+      notify({
+        type: 'error',
+        message: `Error sending verification code: ${error ? (error as any).message : ''}`,
+      })
+    }
+  }
+
+  const verifyEmailAddress = async (email: string, code: string, token: string, callback?: (data?: any) => void) => {
+    try {
+      const res = await verifyEmail({
+        email,
+        code,
+        token,
+      })
+      if (res.is_valid) {
+        setStepToken(res.token)
+        callback?.(res.token)
+      }
+      else {
+        notify({
+          type: 'error',
+          message: 'Verifying email failed',
+        })
+      }
+    }
+    catch (error) {
+      notify({
+        type: 'error',
+        message: `Error verifying email: ${error ? (error as any).message : ''}`,
+      })
+    }
+  }
+
+  const sendCodeToOriginEmail = async () => {
+    await sendEmail(
+      email,
+      true,
+    )
+    setStep(STEP.verifyOrigin)
+  }
+
+  const handleVerifyOriginEmail = async () => {
+    await verifyEmailAddress(email, code, stepToken, () => setStep(STEP.newEmail))
+    setCode('')
+  }
+
+  const isValidEmail = (email: string): boolean => {
+    const rfc5322emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+    return rfc5322emailRegex.test(email) && email.length <= 254
+  }
+
+  const checkNewEmailExisted = async (email: string) => {
+    setIsCheckingEmail(true)
+    try {
+      await checkEmailExisted({
+        email,
+      })
+      setNewEmailExited(false)
+      setUnAvailableEmail(false)
+    }
+    catch (e: any) {
+      if (e.status === 400) {
+        const [, errRespData] = await asyncRunSafe<ResponseError>(e.json())
+        const { code } = errRespData || {}
+        if (code === 'email_already_in_use')
+          setNewEmailExited(true)
+        if (code === 'account_in_freeze')
+          setUnAvailableEmail(true)
+      }
+    }
+    finally {
+      setIsCheckingEmail(false)
+    }
+  }
+
+  const handleNewEmailValueChange = (mailAddress: string) => {
+    setMail(mailAddress)
+    setNewEmailExited(false)
+    if (isValidEmail(mailAddress))
+      checkNewEmailExisted(mailAddress)
+  }
+
+  const sendCodeToNewEmail = async () => {
+    if (!isValidEmail(mail)) {
+      notify({
+        type: 'error',
+        message: 'Invalid email format',
+      })
+      return
+    }
+    await sendEmail(
+      mail,
+      false,
+      stepToken,
+    )
+    setStep(STEP.verifyNew)
+  }
+
+  const { mutateAsync: logout } = useLogout()
+  const handleLogout = async () => {
+    await logout()
+
+    localStorage.removeItem('setup_status')
+    // Tokens are now stored in cookies and cleared by backend
+
+    router.push('/signin')
+  }
+
+  const updateEmail = async (lastToken: string) => {
+    try {
+      await resetEmail({
+        new_email: mail,
+        token: lastToken,
+      })
+      handleLogout()
+    }
+    catch (error) {
+      notify({
+        type: 'error',
+        message: `Error changing email: ${error ? (error as any).message : ''}`,
+      })
+    }
+  }
+
+  const submitNewEmail = async () => {
+    await verifyEmailAddress(mail, code, stepToken, updateEmail)
+  }
+
+  return (
+    <Modal
+      isShow={show}
+      onClose={noop}
+      className='!w-[420px] !p-6'
+    >
+      <div className='absolute right-5 top-5 cursor-pointer p-1.5' onClick={onClose}>
+        <RiCloseLine className='h-5 w-5 text-text-tertiary' />
+      </div>
+      {step === STEP.start && (
+        <>
+          <div className='title-2xl-semi-bold pb-3 text-text-primary'>{t('common.account.changeEmail.title')}</div>
+          <div className='space-y-0.5 pb-2 pt-1'>
+            <div className='body-md-medium text-text-warning'>{t('common.account.changeEmail.authTip')}</div>
+            <div className='body-md-regular text-text-secondary'>
+              <Trans
+                i18nKey="common.account.changeEmail.content1"
+                components={{ email: <span className='body-md-medium text-text-primary'></span> }}
+                values={{ email }}
+              />
+            </div>
+          </div>
+          <div className='pt-3'></div>
+          <div className='space-y-2'>
+            <Button
+              className='!w-full'
+              variant='primary'
+              onClick={sendCodeToOriginEmail}
+            >
+              {t('common.account.changeEmail.sendVerifyCode')}
+            </Button>
+            <Button
+              className='!w-full'
+              onClick={onClose}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+          </div>
+        </>
+      )}
+      {step === STEP.verifyOrigin && (
+        <>
+          <div className='title-2xl-semi-bold pb-3 text-text-primary'>{t('common.account.changeEmail.verifyEmail')}</div>
+          <div className='space-y-0.5 pb-2 pt-1'>
+            <div className='body-md-regular text-text-secondary'>
+              <Trans
+                i18nKey="common.account.changeEmail.content2"
+                components={{ email: <span className='body-md-medium text-text-primary'></span> }}
+                values={{ email }}
+              />
+            </div>
+          </div>
+          <div className='pt-3'>
+            <div className='system-sm-medium mb-1 flex h-6 items-center text-text-secondary'>{t('common.account.changeEmail.codeLabel')}</div>
+            <Input
+              className='!w-full'
+              placeholder={t('common.account.changeEmail.codePlaceholder')}
+              value={code}
+              onChange={e => setCode(e.target.value)}
+              maxLength={6}
+            />
+          </div>
+          <div className='mt-3 space-y-2'>
+            <Button
+              disabled={code.length !== 6}
+              className='!w-full'
+              variant='primary'
+              onClick={handleVerifyOriginEmail}
+            >
+              {t('common.account.changeEmail.continue')}
+            </Button>
+            <Button
+              className='!w-full'
+              onClick={onClose}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+          </div>
+          <div className='system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary'>
+            <span>{t('common.account.changeEmail.resendTip')}</span>
+            {time > 0 && (
+              <span>{t('common.account.changeEmail.resendCount', { count: time })}</span>
+            )}
+            {!time && (
+              <span onClick={sendCodeToOriginEmail} className='system-xs-medium cursor-pointer text-text-accent-secondary'>{t('common.account.changeEmail.resend')}</span>
+            )}
+          </div>
+        </>
+      )}
+      {step === STEP.newEmail && (
+        <>
+          <div className='title-2xl-semi-bold pb-3 text-text-primary'>{t('common.account.changeEmail.newEmail')}</div>
+          <div className='space-y-0.5 pb-2 pt-1'>
+            <div className='body-md-regular text-text-secondary'>{t('common.account.changeEmail.content3')}</div>
+          </div>
+          <div className='pt-3'>
+            <div className='system-sm-medium mb-1 flex h-6 items-center text-text-secondary'>{t('common.account.changeEmail.emailLabel')}</div>
+            <Input
+              className='!w-full'
+              placeholder={t('common.account.changeEmail.emailPlaceholder')}
+              value={mail}
+              onChange={e => handleNewEmailValueChange(e.target.value)}
+              destructive={newEmailExited || unAvailableEmail}
+            />
+            {newEmailExited && (
+              <div className='body-xs-regular mt-1 py-0.5 text-text-destructive'>{t('common.account.changeEmail.existingEmail')}</div>
+            )}
+            {unAvailableEmail && (
+              <div className='body-xs-regular mt-1 py-0.5 text-text-destructive'>{t('common.account.changeEmail.unAvailableEmail')}</div>
+            )}
+          </div>
+          <div className='mt-3 space-y-2'>
+            <Button
+              disabled={!mail || newEmailExited || unAvailableEmail || isCheckingEmail || !isValidEmail(mail)}
+              className='!w-full'
+              variant='primary'
+              onClick={sendCodeToNewEmail}
+            >
+              {t('common.account.changeEmail.sendVerifyCode')}
+            </Button>
+            <Button
+              className='!w-full'
+              onClick={onClose}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+          </div>
+        </>
+      )}
+      {step === STEP.verifyNew && (
+        <>
+          <div className='title-2xl-semi-bold pb-3 text-text-primary'>{t('common.account.changeEmail.verifyNew')}</div>
+          <div className='space-y-0.5 pb-2 pt-1'>
+            <div className='body-md-regular text-text-secondary'>
+              <Trans
+                i18nKey="common.account.changeEmail.content4"
+                components={{ email: <span className='body-md-medium text-text-primary'></span> }}
+                values={{ email: mail }}
+              />
+            </div>
+          </div>
+          <div className='pt-3'>
+            <div className='system-sm-medium mb-1 flex h-6 items-center text-text-secondary'>{t('common.account.changeEmail.codeLabel')}</div>
+            <Input
+              className='!w-full'
+              placeholder={t('common.account.changeEmail.codePlaceholder')}
+              value={code}
+              onChange={e => setCode(e.target.value)}
+              maxLength={6}
+            />
+          </div>
+          <div className='mt-3 space-y-2'>
+            <Button
+              disabled={code.length !== 6}
+              className='!w-full'
+              variant='primary'
+              onClick={submitNewEmail}
+            >
+              {t('common.account.changeEmail.changeTo', { email: mail })}
+            </Button>
+            <Button
+              className='!w-full'
+              onClick={onClose}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+          </div>
+          <div className='system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary'>
+            <span>{t('common.account.changeEmail.resendTip')}</span>
+            {time > 0 && (
+              <span>{t('common.account.changeEmail.resendCount', { count: time })}</span>
+            )}
+            {!time && (
+              <span onClick={sendCodeToNewEmail} className='system-xs-medium cursor-pointer text-text-accent-secondary'>{t('common.account.changeEmail.resend')}</span>
+            )}
+          </div>
+        </>
+      )}
+    </Modal>
+  )
+}
+
+export default EmailChangeModal

dify/web/app/account/(commonLayout)/account-page/index.tsx

@@ -0,0 +1,344 @@
+'use client'
+import { useState } from 'react'
+import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
+import {
+  RiGraduationCapFill,
+} from '@remixicon/react'
+import { useContext } from 'use-context-selector'
+import DeleteAccount from '../delete-account'
+import AvatarWithEdit from './AvatarWithEdit'
+import Collapse from '@/app/components/header/account-setting/collapse'
+import type { IItem } from '@/app/components/header/account-setting/collapse'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import { updateUserProfile } from '@/service/common'
+import { useAppContext } from '@/context/app-context'
+import { useProviderContext } from '@/context/provider-context'
+import { ToastContext } from '@/app/components/base/toast'
+import AppIcon from '@/app/components/base/app-icon'
+import { IS_CE_EDITION } from '@/config'
+import Input from '@/app/components/base/input'
+import PremiumBadge from '@/app/components/base/premium-badge'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import EmailChangeModal from './email-change-modal'
+import { validPassword } from '@/config'
+import { fetchAppList } from '@/service/apps'
+import type { App } from '@/types/app'
+
+const titleClassName = `
+  system-sm-semibold text-text-secondary
+`
+const descriptionClassName = `
+  mt-1 body-xs-regular text-text-tertiary
+`
+
+export default function AccountPage() {
+  const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()
+  const { data: appList } = useSWR({ url: '/apps', params: { page: 1, limit: 100, name: '' } }, fetchAppList)
+  const apps = appList?.data || []
+  const { mutateUserProfile, userProfile } = useAppContext()
+  const { isEducationAccount } = useProviderContext()
+  const { notify } = useContext(ToastContext)
+  const [editNameModalVisible, setEditNameModalVisible] = useState(false)
+  const [editName, setEditName] = useState('')
+  const [editing, setEditing] = useState(false)
+  const [editPasswordModalVisible, setEditPasswordModalVisible] = useState(false)
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false)
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+  const [showUpdateEmail, setShowUpdateEmail] = useState(false)
+
+  const handleEditName = () => {
+    setEditNameModalVisible(true)
+    setEditName(userProfile.name)
+  }
+  const handleSaveName = async () => {
+    try {
+      setEditing(true)
+      await updateUserProfile({ url: 'account/name', body: { name: editName } })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      mutateUserProfile()
+      setEditNameModalVisible(false)
+      setEditing(false)
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+      setEditing(false)
+    }
+  }
+
+  const showErrorMessage = (message: string) => {
+    notify({
+      type: 'error',
+      message,
+    })
+  }
+  const valid = () => {
+    if (!password.trim()) {
+      showErrorMessage(t('login.error.passwordEmpty'))
+      return false
+    }
+    if (!validPassword.test(password)) {
+      showErrorMessage(t('login.error.passwordInvalid'))
+      return false
+    }
+    if (password !== confirmPassword) {
+      showErrorMessage(t('common.account.notEqual'))
+      return false
+    }
+
+    return true
+  }
+  const resetPasswordForm = () => {
+    setCurrentPassword('')
+    setPassword('')
+    setConfirmPassword('')
+  }
+  const handleSavePassword = async () => {
+    if (!valid())
+      return
+    try {
+      setEditing(true)
+      await updateUserProfile({
+        url: 'account/password',
+        body: {
+          password: currentPassword,
+          new_password: password,
+          repeat_new_password: confirmPassword,
+        },
+      })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      mutateUserProfile()
+      setEditPasswordModalVisible(false)
+      resetPasswordForm()
+      setEditing(false)
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+      setEditPasswordModalVisible(false)
+      setEditing(false)
+    }
+  }
+
+  const renderAppItem = (item: IItem) => {
+    const { icon, icon_background, icon_type, icon_url } = item as any
+    return (
+      <div className='flex px-3 py-1'>
+        <div className='mr-3'>
+          <AppIcon
+            size='tiny'
+            iconType={icon_type}
+            icon={icon}
+            background={icon_background}
+            imageUrl={icon_url}
+          />
+        </div>
+        <div className='system-sm-medium mt-[3px] text-text-secondary'>{item.name}</div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className='pb-3 pt-2'>
+        <h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
+      </div>
+      <div className='mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6'>
+        <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size={64} />
+        <div className='ml-4'>
+          <p className='system-xl-semibold text-text-primary'>
+            {userProfile.name}
+            {isEducationAccount && (
+              <PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
+                <RiGraduationCapFill className='mr-1 h-3 w-3' />
+                <span className='system-2xs-medium'>EDU</span>
+              </PremiumBadge>
+            )}
+          </p>
+          <p className='system-xs-regular text-text-tertiary'>{userProfile.email}</p>
+        </div>
+      </div>
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.account.name')}</div>
+        <div className='mt-2 flex w-full items-center justify-between gap-2'>
+          <div className='system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled '>
+            <span className='pl-1'>{userProfile.name}</span>
+          </div>
+          <div className='system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text' onClick={handleEditName}>
+            {t('common.operation.edit')}
+          </div>
+        </div>
+      </div>
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.account.email')}</div>
+        <div className='mt-2 flex w-full items-center justify-between gap-2'>
+          <div className='system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled '>
+            <span className='pl-1'>{userProfile.email}</span>
+          </div>
+          {systemFeatures.enable_change_email && (
+            <div className='system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text' onClick={() => setShowUpdateEmail(true)}>
+              {t('common.operation.change')}
+            </div>
+          )}
+        </div>
+      </div>
+      {
+        systemFeatures.enable_email_password_login && (
+          <div className='mb-8 flex justify-between gap-2'>
+            <div>
+              <div className='system-sm-semibold mb-1 text-text-secondary'>{t('common.account.password')}</div>
+              <div className='body-xs-regular mb-2 text-text-tertiary'>{t('common.account.passwordTip')}</div>
+            </div>
+            <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
+          </div>
+        )
+      }
+      <div className='mb-6 border-[1px] border-divider-subtle' />
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
+        <div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
+        {!!apps.length && (
+          <Collapse
+            title={`${t('common.account.showAppLength', { length: apps.length })}`}
+            items={apps.map((app: App) => ({ ...app, key: app.id, name: app.name }))}
+            renderItem={renderAppItem}
+            wrapperClassName='mt-2'
+          />
+        )}
+        {!IS_CE_EDITION && <Button className='mt-2 text-components-button-destructive-secondary-text' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
+      </div>
+      {
+        editNameModalVisible && (
+          <Modal
+            isShow
+            onClose={() => setEditNameModalVisible(false)}
+            className='!w-[420px] !p-6'
+          >
+            <div className='title-2xl-semi-bold mb-6 text-text-primary'>{t('common.account.editName')}</div>
+            <div className={titleClassName}>{t('common.account.name')}</div>
+            <Input className='mt-2'
+              value={editName}
+              onChange={e => setEditName(e.target.value)}
+            />
+            <div className='mt-10 flex justify-end'>
+              <Button className='mr-2' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
+              <Button
+                disabled={editing || !editName}
+                variant='primary'
+                onClick={handleSaveName}
+              >
+                {t('common.operation.save')}
+              </Button>
+            </div>
+          </Modal>
+        )
+      }
+      {
+        editPasswordModalVisible && (
+          <Modal
+            isShow
+            onClose={() => {
+              setEditPasswordModalVisible(false)
+              resetPasswordForm()
+            }}
+            className='!w-[420px] !p-6'
+          >
+            <div className='title-2xl-semi-bold mb-6 text-text-primary'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
+            {userProfile.is_password_set && (
+              <>
+                <div className={titleClassName}>{t('common.account.currentPassword')}</div>
+                <div className='relative mt-2'>
+                  <Input
+                    type={showCurrentPassword ? 'text' : 'password'}
+                    value={currentPassword}
+                    onChange={e => setCurrentPassword(e.target.value)}
+                  />
+
+                  <div className="absolute inset-y-0 right-0 flex items-center">
+                    <Button
+                      type="button"
+                      variant='ghost'
+                      onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                    >
+                      {showCurrentPassword ? '👀' : '😝'}
+                    </Button>
+                  </div>
+                </div>
+              </>
+            )}
+            <div className='system-sm-semibold mt-8 text-text-secondary'>
+              {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
+            </div>
+            <div className='relative mt-2'>
+              <Input
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+              />
+              <div className="absolute inset-y-0 right-0 flex items-center">
+                <Button
+                  type="button"
+                  variant='ghost'
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? '👀' : '😝'}
+                </Button>
+              </div>
+            </div>
+            <div className='system-sm-semibold mt-8 text-text-secondary'>{t('common.account.confirmPassword')}</div>
+            <div className='relative mt-2'>
+              <Input
+                type={showConfirmPassword ? 'text' : 'password'}
+                value={confirmPassword}
+                onChange={e => setConfirmPassword(e.target.value)}
+              />
+              <div className="absolute inset-y-0 right-0 flex items-center">
+                <Button
+                  type="button"
+                  variant='ghost'
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                >
+                  {showConfirmPassword ? '👀' : '😝'}
+                </Button>
+              </div>
+            </div>
+            <div className='mt-10 flex justify-end'>
+              <Button className='mr-2' onClick={() => {
+                setEditPasswordModalVisible(false)
+                resetPasswordForm()
+              }}>{t('common.operation.cancel')}</Button>
+              <Button
+                disabled={editing}
+                variant='primary'
+                onClick={handleSavePassword}
+              >
+                {userProfile.is_password_set ? t('common.operation.reset') : t('common.operation.save')}
+              </Button>
+            </div>
+          </Modal>
+        )
+      }
+      {
+        showDeleteAccountModal && (
+          <DeleteAccount
+            onCancel={() => setShowDeleteAccountModal(false)}
+            onConfirm={() => setShowDeleteAccountModal(false)}
+          />
+        )
+      }
+      {showUpdateEmail && (
+        <EmailChangeModal
+          show={showUpdateEmail}
+          onClose={() => setShowUpdateEmail(false)}
+          email={userProfile.email}
+        />
+      )}
+    </>
+  )
+}