dify/web/app/components/header/account-dropdown/default-menu-content.tsx

'use client'

import type { MouseEventHandler, ReactNode } from 'react'
import { Avatar } from '@langgenius/dify-ui/avatar'
import {
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLinkItem,
  DropdownMenuSeparator,
} from '@langgenius/dify-ui/dropdown-menu'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import PremiumBadge from '@/app/components/base/premium-badge'
import ThemeSwitcher from '@/app/components/base/theme-switcher'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
import { IS_CLOUD_EDITION } from '@/config'
import { useAppContext } from '@/context/app-context'
import { useDocLink } from '@/context/i18n'
import { useModalContext } from '@/context/modal-context'
import { useProviderContext } from '@/context/provider-context'
import { env } from '@/env'
import Link from '@/next/link'
import { systemFeaturesQueryOptions } from '@/service/system-features'
import GithubStar from '../github-star'
import Indicator from '../indicator'
import Compliance from './compliance'
import { ExternalLinkIndicator, MenuItemContent } from './menu-item-content'
import Support from './support'

type AccountMenuRouteItemProps = {
  href: string
  iconClassName: string
  label: ReactNode
  trailing?: ReactNode
}

function AccountMenuRouteItem({
  href,
  iconClassName,
  label,
  trailing,
}: AccountMenuRouteItemProps) {
  return (
    <DropdownMenuLinkItem
      className="justify-between"
      render={<Link href={href} />}
    >
      <MenuItemContent iconClassName={iconClassName} label={label} trailing={trailing} />
    </DropdownMenuLinkItem>
  )
}

type AccountMenuExternalItemProps = {
  href: string
  iconClassName: string
  label: ReactNode
  trailing?: ReactNode
}

function AccountMenuExternalItem({
  href,
  iconClassName,
  label,
  trailing,
}: AccountMenuExternalItemProps) {
  return (
    <DropdownMenuLinkItem
      className="justify-between"
      href={href}
      rel="noopener noreferrer"
      target="_blank"
    >
      <MenuItemContent iconClassName={iconClassName} label={label} trailing={trailing} />
    </DropdownMenuLinkItem>
  )
}

type AccountMenuActionItemProps = {
  iconClassName: string
  label: ReactNode
  onClick?: MouseEventHandler<HTMLElement>
  trailing?: ReactNode
}

function AccountMenuActionItem({
  iconClassName,
  label,
  onClick,
  trailing,
}: AccountMenuActionItemProps) {
  return (
    <DropdownMenuItem
      className="justify-between"
      onClick={onClick}
    >
      <MenuItemContent iconClassName={iconClassName} label={label} trailing={trailing} />
    </DropdownMenuItem>
  )
}

type AccountMenuSectionProps = {
  children: ReactNode
}

function AccountMenuSection({ children }: AccountMenuSectionProps) {
  return <DropdownMenuGroup className="py-1">{children}</DropdownMenuGroup>
}

type DefaultMenuContentProps = {
  closeAccountDropdown: () => void
  onShowAbout: () => void
  onLogout: () => Promise<void>
}

export function DefaultMenuContent({
  closeAccountDropdown,
  onShowAbout,
  onLogout,
}: DefaultMenuContentProps) {
  const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
  const { t } = useTranslation()
  const docLink = useDocLink()
  const { userProfile, langGeniusVersionInfo, isCurrentWorkspaceOwner } = useAppContext()
  const { isEducationAccount } = useProviderContext()
  const { setShowAccountSettingModal } = useModalContext()

  return (
    <>
      <DropdownMenuGroup className="py-1">
        <div className="mx-1 flex flex-nowrap items-center py-2 pr-2 pl-3">
          <div className="grow">
            <div className="system-md-medium break-all text-text-primary">
              {userProfile.name}
              {isEducationAccount && (
                <PremiumBadge size="s" color="blue" className="ml-1 px-2!">
                  <span aria-hidden className="mr-1 i-ri-graduation-cap-fill h-3 w-3" />
                  <span className="system-2xs-medium">EDU</span>
                </PremiumBadge>
              )}
            </div>
            <div className="system-xs-regular break-all text-text-tertiary">{userProfile.email}</div>
          </div>
          <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size="lg" />
        </div>
        <AccountMenuRouteItem
          href="/account"
          iconClassName="i-ri-account-circle-line"
          label={t('account.account', { ns: 'common' })}
          trailing={<ExternalLinkIndicator />}
        />
        <AccountMenuActionItem
          iconClassName="i-ri-settings-3-line"
          label={t('userProfile.settings', { ns: 'common' })}
          onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.MEMBERS })}
        />
      </DropdownMenuGroup>
      <DropdownMenuSeparator className="my-0! bg-divider-subtle" />
      {!systemFeatures.branding.enabled && (
        <>
          <AccountMenuSection>
            <AccountMenuExternalItem
              href={docLink('/use-dify/getting-started/introduction')}
              iconClassName="i-ri-book-open-line"
              label={t('userProfile.helpCenter', { ns: 'common' })}
              trailing={<ExternalLinkIndicator />}
            />
            <Support closeAccountDropdown={closeAccountDropdown} />
            {IS_CLOUD_EDITION && isCurrentWorkspaceOwner && <Compliance />}
          </AccountMenuSection>
          <DropdownMenuSeparator className="my-0! bg-divider-subtle" />
          <AccountMenuSection>
            <AccountMenuExternalItem
              href="https://roadmap.dify.ai"
              iconClassName="i-ri-map-2-line"
              label={t('userProfile.roadmap', { ns: 'common' })}
              trailing={<ExternalLinkIndicator />}
            />
            <AccountMenuExternalItem
              href="https://github.com/langgenius/dify"
              iconClassName="i-ri-github-line"
              label={t('userProfile.github', { ns: 'common' })}
              trailing={(
                <div className="flex items-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px]">
                  <span aria-hidden className="i-ri-star-line size-3 shrink-0 text-text-tertiary" />
                  <GithubStar className="system-2xs-medium-uppercase text-text-tertiary" />
                </div>
              )}
            />
            {env.NEXT_PUBLIC_SITE_ABOUT !== 'hide' && (
              <AccountMenuActionItem
                iconClassName="i-ri-information-2-line"
                label={t('userProfile.about', { ns: 'common' })}
                onClick={() => {
                  onShowAbout()
                  closeAccountDropdown()
                }}
                trailing={(
                  <div className="flex shrink-0 items-center">
                    <div className="mr-2 system-xs-regular text-text-tertiary">{langGeniusVersionInfo.current_version}</div>
                    <Indicator color={langGeniusVersionInfo.current_version === langGeniusVersionInfo.latest_version ? 'green' : 'orange'} />
                  </div>
                )}
              />
            )}
          </AccountMenuSection>
          <DropdownMenuSeparator className="my-0! bg-divider-subtle" />
        </>
      )}
      <AccountMenuSection>
        <DropdownMenuItem
          closeOnClick={false}
          className="cursor-default data-highlighted:bg-transparent"
        >
          <MenuItemContent
            iconClassName="i-ri-t-shirt-2-line"
            label={t('theme.theme', { ns: 'common' })}
            trailing={<ThemeSwitcher />}
          />
        </DropdownMenuItem>
      </AccountMenuSection>
      <DropdownMenuSeparator className="my-0! bg-divider-subtle" />
      <AccountMenuSection>
        <AccountMenuActionItem
          iconClassName="i-ri-logout-box-r-line"
          label={t('userProfile.logout', { ns: 'common' })}
          onClick={() => {
            void onLogout()
          }}
        />
      </AccountMenuSection>
    </>
  )
}