Merge branch 'e-0154' into deploy/enterprise

2025-07-13 02:21:47 +08:00 · 2025-03-14 20:49:17 +08:00 · 2025-03-14 20:49:17 +08:00 · 083045f45c
commit 083045f45c
parent 8ba969f67d fe237802c9
41 changed files with 320 additions and 226 deletions
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
@ -15,17 +15,17 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
-import { useContextSelector } from 'use-context-selector'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
 import { useStore } from '@/app/components/app/store'
 import AppSideBar from '@/app/components/app-sidebar'
 import type { NavIcon } from '@/app/components/app-sidebar/navLink'
 import { fetchAppDetail, fetchAppSSO } from '@/service/apps'
-import AppContext, { useAppContext } from '@/context/app-context'
+import { useAppContext } from '@/context/app-context'
 import Loading from '@/app/components/base/loading'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import type { App } from '@/types/app'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 export type IAppDetailLayoutProps = {
  children: React.ReactNode
@ -56,7 +56,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
    icon: NavIcon
    selectedIcon: NavIcon
  }>>([])
-  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
+  const { systemFeatures } = useGlobalPublicStore()

  const getNavigations = useCallback((appId: string, isCurrentWorkspaceEditor: boolean, mode: string) => {
    const navs = [
@ -98,7 +98,11 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {

  useEffect(() => {
    if (appDetail) {
-      document.title = `${(appDetail.name || 'App')} - Dify`
+      if (systemFeatures.branding.enabled)
+        document.title = `${(appDetail.name || 'App')} - ${systemFeatures.branding.application_title}`
+      else
+        document.title = `${(appDetail.name || 'App')} - Dify`
+
      const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
      const mode = isMobile ? 'collapse' : 'expand'
      setAppSiderbarExpand(isMobile ? mode : localeMode)
@ -106,7 +110,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
      // if ((appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (pathname).endsWith('workflow'))
      //   setAppSiderbarExpand('collapse')
    }
-  }, [appDetail, isMobile])
+  }, [appDetail, isMobile, pathname, setAppSiderbarExpand, systemFeatures])

  useEffect(() => {
    setAppDetail()
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext, useContextSelector } from 'use-context-selector'
+import { useContext } from 'use-context-selector'
 import AppCard from '@/app/components/app/overview/appCard'
 import Loading from '@/app/components/base/loading'
 import { ToastContext } from '@/app/components/base/toast'
@ -20,7 +20,7 @@ import { asyncRunSafe } from '@/utils'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import type { IAppCardProps } from '@/app/components/app/overview/appCard'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import AppContext from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 export type ICardViewProps = {
  appId: string
@ -31,7 +31,7 @@ const CardView: FC<ICardViewProps> = ({ appId }) => {
  const { notify } = useContext(ToastContext)
  const appDetail = useAppStore(state => state.appDetail)
  const setAppDetail = useAppStore(state => state.setAppDetail)
-  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
+  const { systemFeatures } = useGlobalPublicStore()

  const updateAppDetail = async () => {
    try {
--- a/web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx
@ -2,7 +2,9 @@
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useRouter } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
 import { useAppContext } from '@/context/app-context'
+import useDocumentTitle from '@/hooks/use-document-title'

 export type IAppDetail = {
  children: React.ReactNode
@ -11,11 +13,13 @@ export type IAppDetail = {
 const AppDetail: FC<IAppDetail> = ({ children }) => {
  const router = useRouter()
  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.appDetail'))

  useEffect(() => {
    if (isCurrentWorkspaceDatasetOperator)
      return router.replace('/datasets')
-  }, [isCurrentWorkspaceDatasetOperator])
+  }, [isCurrentWorkspaceDatasetOperator, router])

  return (
    <>
--- a/web/app/(commonLayout)/apps/Apps.tsx
+++ b/web/app/(commonLayout)/apps/Apps.tsx
@ -85,7 +85,6 @@ const Apps = () => {
  ]

  useEffect(() => {
-    document.title = `${t('common.menus.apps')} -  Dify`
    if (localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
      localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
      mutate()
--- a/web/app/(commonLayout)/apps/page.tsx
+++ b/web/app/(commonLayout)/apps/page.tsx
@ -1,21 +1,20 @@
 'use client'
-import { useContextSelector } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { RiDiscordFill, RiGithubFill } from '@remixicon/react'
 import Link from 'next/link'
 import style from '../list.module.css'
 import Apps from './Apps'
-import AppContext from '@/context/app-context'
-import { LicenseStatus } from '@/types/feature'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import useDocumentTitle from '@/hooks/use-document-title'

 const AppList = () => {
  const { t } = useTranslation()
-  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
-
+  const { systemFeatures } = useGlobalPublicStore()
+  useDocumentTitle(t('common.menus.apps'))
  return (
    <div className='relative flex flex-col overflow-y-auto bg-background-body shrink-0 h-0 grow'>
      <Apps />
-      {systemFeatures.license.status === LicenseStatus.NONE && <footer className='px-12 py-6 grow-0 shrink-0'>
+      {!systemFeatures.branding.enabled && <footer className='px-12 py-6 grow-0 shrink-0'>
        <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('app.join')}</h3>
        <p className='mt-1 system-sm-regular text-text-tertiary'>{t('app.communityIntro')}</p>
        <div className='flex items-center gap-2 mt-3'>
--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/Container.tsx
@ -29,9 +29,11 @@ import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
 import { useAppContext } from '@/context/app-context'
 import { useExternalApiPanel } from '@/context/external-api-panel-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 const Container = () => {
  const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()
  const router = useRouter()
  const { currentWorkspace, isCurrentWorkspaceOwner } = useAppContext()
  const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
@ -123,7 +125,7 @@ const Container = () => {
      {activeTab === 'dataset' && (
        <>
          <Datasets containerRef={containerRef} tags={tagIDs} keywords={searchKeywords} includeAll={includeAll} />
-          <DatasetFooter />
+          {!systemFeatures.branding.enabled && <DatasetFooter />}
          {showTagManagementModal && (
            <TagManagementModal type='knowledge' show={showTagManagementModal} />
          )}
--- a/web/app/(commonLayout)/datasets/Datasets.tsx
+++ b/web/app/(commonLayout)/datasets/Datasets.tsx
@ -3,7 +3,6 @@
 import { useEffect, useRef } from 'react'
 import useSWRInfinite from 'swr/infinite'
 import { debounce } from 'lodash-es'
-import { useTranslation } from 'react-i18next'
 import NewDatasetCard from './NewDatasetCard'
 import DatasetCard from './DatasetCard'
 import type { DataSetListResponse, FetchDatasetsParams } from '@/models/datasets'
@ -57,11 +56,8 @@ const Datasets = ({
  const loadingStateRef = useRef(false)
  const anchorRef = useRef<HTMLAnchorElement>(null)

-  const { t } = useTranslation()
-
  useEffect(() => {
    loadingStateRef.current = isLoading
-    document.title = `${t('dataset.knowledge')} - Dify`
  }, [isLoading])

  useEffect(() => {
@ -80,7 +76,7 @@ const Datasets = ({

  return (
    <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
-      { isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} /> }
+      {isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} />}
      {data?.map(({ data: datasets }) => datasets.map(dataset => (
        <DatasetCard key={dataset.id} dataset={dataset} onSuccess={mutate} />),
      ))}
--- a/web/app/(commonLayout)/datasets/page.tsx
+++ b/web/app/(commonLayout)/datasets/page.tsx
@ -1,11 +1,12 @@
+'use client'
+import { useTranslation } from 'react-i18next'
 import Container from './Container'
+import useDocumentTitle from '@/hooks/use-document-title'

-const AppList = async () => {
+const AppList = () => {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.datasets'))
  return <Container />
 }

-export const metadata = {
-  title: 'Datasets - Dify',
-}
-
 export default AppList
--- a/web/app/(commonLayout)/datasets/template/template.en.mdx
+++ b/web/app/(commonLayout)/datasets/template/template.en.mdx
@ -6,7 +6,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
 <div>
  ### Authentication

-  Service API of Dify authenticates using an `API-Key`.
+  Service API authenticates using an `API-Key`.

  It is suggested that developers store the `API-Key` in the backend instead of sharing or storing it in the client side to avoid the leakage of the `API-Key`, which may lead to property loss.

--- a/web/app/(commonLayout)/explore/layout.tsx
+++ b/web/app/(commonLayout)/explore/layout.tsx
@ -1,11 +1,13 @@
-import type { FC } from 'react'
+'use client'
+import type { FC, PropsWithChildren } from 'react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import ExploreClient from '@/app/components/explore'
-export type IAppDetail = {
-  children: React.ReactNode
-}
+import useDocumentTitle from '@/hooks/use-document-title'

-const AppDetail: FC<IAppDetail> = ({ children }) => {
+const ExploreLayout: FC<PropsWithChildren> = ({ children }) => {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.explore'))
  return (
    <ExploreClient>
      {children}
@ -13,4 +15,4 @@ const AppDetail: FC<IAppDetail> = ({ children }) => {
  )
 }

-export default React.memo(AppDetail)
+export default React.memo(ExploreLayout)
--- a/web/app/(commonLayout)/layout.tsx
+++ b/web/app/(commonLayout)/layout.tsx
@ -30,9 +30,4 @@ const Layout = ({ children }: { children: ReactNode }) => {
    </>
  )
 }
-
-export const metadata = {
-  title: 'Dify',
-}
-
 export default Layout
--- a/web/app/(commonLayout)/tools/page.tsx
+++ b/web/app/(commonLayout)/tools/page.tsx
@ -1,22 +1,16 @@
 'use client'
 import type { FC } from 'react'
 import { useRouter } from 'next/navigation'
-import { useTranslation } from 'react-i18next'
 import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import ToolProviderList from '@/app/components/tools/provider-list'
 import { useAppContext } from '@/context/app-context'
-
-const Layout: FC = () => {
-  const { t } = useTranslation()
+import useDocumentTitle from '@/hooks/use-document-title'
+const ToolsList: FC = () => {
  const router = useRouter()
  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
-
-  useEffect(() => {
-    if (typeof window !== 'undefined')
-      document.title = `${t('tools.title')} - Dify`
-    if (isCurrentWorkspaceDatasetOperator)
-      return router.replace('/datasets')
-  }, [isCurrentWorkspaceDatasetOperator, router, t])
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.tools'))

  useEffect(() => {
    if (isCurrentWorkspaceDatasetOperator)
@ -25,4 +19,4 @@ const Layout: FC = () => {

  return <ToolProviderList />
 }
-export default React.memo(Layout)
+export default React.memo(ToolsList)
--- a/web/app/account/account-page/index.tsx
+++ b/web/app/account/account-page/index.tsx
@ -16,6 +16,7 @@ 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 { useGlobalPublicStore } from '@/context/global-public-context'

 const titleClassName = `
  system-sm-semibold text-text-secondary
@ -28,7 +29,7 @@ const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/

 export default function AccountPage() {
  const { t } = useTranslation()
-  const { systemFeatures } = useAppContext()
+  const { systemFeatures } = useGlobalPublicStore()
  const { mutateUserProfile, userProfile, apps } = useAppContext()
  const { notify } = useContext(ToastContext)
  const [editNameModalVisible, setEditNameModalVisible] = useState(false)
@ -133,7 +134,7 @@ export default function AccountPage() {
        <h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
      </div>
      <div className='mb-8 p-6 rounded-xl flex items-center bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1'>
-        <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={ mutateUserProfile } size={64} />
+        <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}</p>
          <p className='system-xs-regular text-text-tertiary'>{userProfile.email}</p>
--- a/web/app/account/header.tsx
+++ b/web/app/account/header.tsx
@ -5,9 +5,11 @@ import { useRouter } from 'next/navigation'
 import Button from '../components/base/button'
 import Avatar from './avatar'
 import LogoSite from '@/app/components/base/logo/logo-site'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 const Header = () => {
  const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()
  const router = useRouter()

  const back = () => {
@ -25,7 +27,7 @@ const Header = () => {
      <div className='flex items-center flex-shrink-0 gap-3'>
        <Button className='gap-2 py-2 px-3 system-sm-medium' onClick={back}>
          <RiRobot2Line className='w-4 h-4' />
-          <p>{t('common.account.studio')}</p>
+          <p>{!systemFeatures.branding.enabled && 'Dify '}{t('common.account.studio')}</p>
          <RiArrowRightUpLine className='w-4 h-4' />
        </Button>
        <div className='w-[1px] h-4 bg-divider-regular' />
--- a/web/app/account/layout.tsx
+++ b/web/app/account/layout.tsx
@ -32,9 +32,4 @@ const Layout = ({ children }: { children: ReactNode }) => {
    </>
  )
 }
-
-export const metadata = {
-  title: 'Dify',
-}
-
 export default Layout
--- a/web/app/account/page.tsx
+++ b/web/app/account/page.tsx
@ -1,6 +1,11 @@
+'use client'
+import { useTranslation } from 'react-i18next'
 import AccountPage from './account-page'
+import useDocumentTitle from '@/hooks/use-document-title'

 export default function Account() {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.account'))
  return <div className='max-w-[640px] w-full mx-auto pt-12 px-6'>
    <AccountPage />
  </div>
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { RiArrowRightSLine, RiCloseLine } from '@remixicon/react'
 import Link from 'next/link'
 import { Trans, useTranslation } from 'react-i18next'
-import { useContext, useContextSelector } from 'use-context-selector'
+import { useContext } from 'use-context-selector'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import Modal from '@/app/components/base/modal'
 import ActionButton from '@/app/components/base/action-button'
@ -21,13 +21,14 @@ import type { AppIconType, AppSSO, Language } from '@/types/app'
 import { useToastContext } from '@/app/components/base/toast'
 import { LanguagesSupported, languages } from '@/i18n/language'
 import Tooltip from '@/app/components/base/tooltip'
-import AppContext, { useAppContext } from '@/context/app-context'
+import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
 import I18n from '@/context/i18n'
 import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 export type ISettingsModalProps = {
  isChat: boolean
@ -65,7 +66,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
  onClose,
  onSave,
 }) => {
-  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
+  const { systemFeatures } = useGlobalPublicStore()
  const { isCurrentWorkspaceEditor } = useAppContext()
  const { notify } = useToastContext()
  const [isShowMore, setIsShowMore] = useState(false)
@ -354,7 +355,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.entry`)}</div>
                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.more.copyRightPlaceholder`)} & {t(`${prefixSettings}.more.privacyPolicyPlaceholder`)}</p>
              </div>
-              <RiArrowRightSLine className='shrink-0 ml-1 w-4 h-4 text-text-secondary'/>
+              <RiArrowRightSLine className='shrink-0 ml-1 w-4 h-4 text-text-secondary' />
            </div>
          )}
          {/* more settings */}
--- a/web/app/components/base/logo/logo-site.tsx
+++ b/web/app/components/base/logo/logo-site.tsx
@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import classNames from '@/utils/classnames'
 import { useSelector } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 type LogoSiteProps = {
  className?: string
@ -10,13 +11,17 @@ type LogoSiteProps = {
 const LogoSite: FC<LogoSiteProps> = ({
  className,
 }) => {
+  const { systemFeatures } = useGlobalPublicStore()
  const { theme } = useSelector((s) => {
    return {
      theme: s.theme,
    }
  })

-  const src = theme === 'light' ? '/logo/logo-site.png' : `/logo/logo-site-${theme}.png`
+  let src = theme === 'light' ? '/logo/logo-site.png' : `/logo/logo-site-${theme}.png`
+  if (systemFeatures.branding.enabled)
+    src = systemFeatures.branding.login_page_logo
+
  return (
    <img
      src={src}
--- a/web/app/components/explore/index.tsx
+++ b/web/app/components/explore/index.tsx
@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { useTranslation } from 'react-i18next'
 import ExploreContext from '@/context/explore-context'
 import Sidebar from '@/app/components/explore/sidebar'
 import { useAppContext } from '@/context/app-context'
@ -16,7 +15,6 @@ export type IExploreProps = {
 const Explore: FC<IExploreProps> = ({
  children,
 }) => {
-  const { t } = useTranslation()
  const router = useRouter()
  const [controlUpdateInstalledApps, setControlUpdateInstalledApps] = useState(0)
  const { userProfile, isCurrentWorkspaceDatasetOperator } = useAppContext()
@ -24,7 +22,6 @@ const Explore: FC<IExploreProps> = ({
  const [installedApps, setInstalledApps] = useState<InstalledApp[]>([])

  useEffect(() => {
-    document.title = `${t('explore.title')} -  Dify`;
    (async () => {
      const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {} })
      if (!accounts)
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@ -20,6 +20,7 @@ import { useModalContext } from '@/context/modal-context'
 import { LanguagesSupported } from '@/i18n/language'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '@/app/components/billing/type'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 export type IAppSelector = {
  isMobile: boolean
@ -32,6 +33,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
  `
  const router = useRouter()
  const [aboutVisible, setAboutVisible] = useState(false)
+  const { systemFeatures } = useGlobalPublicStore()

  const { locale } = useContext(I18n)
  const { t } = useTranslation()
@ -122,78 +124,80 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                        <div>{t('common.userProfile.settings')}</div>
                      </div>}
                    </Menu.Item>
-                    {canEmailSupport && <Menu.Item>
-                      {({ active }) => <a
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.emailSupport')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </a>}
-                    </Menu.Item>}
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.communityFeedback')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href='https://discord.gg/5AEfbxcd9k'
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.community')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href={
-                          locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
-                        }
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.helpCenter')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    <Menu.Item>
-                      {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
-                          active && 'bg-state-base-hover',
-                        )}
-                        href='https://roadmap.dify.ai'
-                        target='_blank' rel='noopener noreferrer'>
-                        <div>{t('common.userProfile.roadmap')}</div>
-                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>}
-                    </Menu.Item>
-                    {
-                      document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
-                        <Menu.Item>
-                          {({ active }) => <div className={classNames(itemClassName, 'justify-between',
+                    {!systemFeatures.branding.enabled && <>
+                      {canEmailSupport && <Menu.Item>
+                        {({ active }) => <a
+                          className={classNames(itemClassName, 'group justify-between',
                            active && 'bg-state-base-hover',
-                          )} onClick={() => setAboutVisible(true)}>
-                            <div>{t('common.userProfile.about')}</div>
-                            <div className='flex items-center'>
-                              <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
-                              <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
-                            </div>
-                          </div>}
-                        </Menu.Item>
-                      )
-                    }
+                          )}
+                          href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.emailSupport')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </a>}
+                      </Menu.Item>}
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.communityFeedback')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href='https://discord.gg/5AEfbxcd9k'
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.community')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href={
+                            locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
+                          }
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.helpCenter')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => <Link
+                          className={classNames(itemClassName, 'group justify-between',
+                            active && 'bg-state-base-hover',
+                          )}
+                          href='https://roadmap.dify.ai'
+                          target='_blank' rel='noopener noreferrer'>
+                          <div>{t('common.userProfile.roadmap')}</div>
+                          <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                        </Link>}
+                      </Menu.Item>
+                      {
+                        document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
+                          <Menu.Item>
+                            {({ active }) => <div className={classNames(itemClassName, 'justify-between',
+                              active && 'bg-state-base-hover',
+                            )} onClick={() => setAboutVisible(true)}>
+                              <div>{t('common.userProfile.about')}</div>
+                              <div className='flex items-center'>
+                                <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
+                                <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
+                              </div>
+                            </div>}
+                          </Menu.Item>
+                        )
+                      }
+                    </>}
                  </div>
                  <Menu.Item>
                    {({ active }) => <div className='p-1' onClick={() => handleLogout()}>
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@ -21,6 +21,7 @@ import { Plan } from '@/app/components/billing/type'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { NUM_INFINITE } from '@/app/components/billing/config'
 import { LanguagesSupported } from '@/i18n/language'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 dayjs.extend(relativeTime)

 const MembersPage = () => {
@ -34,7 +35,8 @@ const MembersPage = () => {
  }
  const { locale } = useContext(I18n)

-  const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager, systemFeatures } = useAppContext()
+  const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager } = useAppContext()
+  const { systemFeatures } = useGlobalPublicStore()
  const { data, mutate } = useSWR({ url: '/workspaces/current/members' }, fetchMembers)
  const [inviteModalVisible, setInviteModalVisible] = useState(false)
  const [invitationResults, setInvitationResults] = useState<InvitationResult[]>([])
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@ -4,7 +4,6 @@ import Link from 'next/link'
 import { useBoolean } from 'ahooks'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import { Bars3Icon } from '@heroicons/react/20/solid'
-import { useContextSelector } from 'use-context-selector'
 import HeaderBillingBtn from '../billing/header-billing-btn'
 import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
@ -15,12 +14,13 @@ import ToolsNav from './tools-nav'
 import GithubStar from './github-star'
 import LicenseNav from './license-env'
 import { WorkspaceProvider } from '@/context/workspace-context'
-import AppContext, { useAppContext } from '@/context/app-context'
+import { useAppContext } from '@/context/app-context'
 import LogoSite from '@/app/components/base/logo/logo-site'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
 import { LicenseStatus } from '@/types/feature'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 const navClassName = `
  flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl
@ -30,7 +30,7 @@ const navClassName = `

 const Header = () => {
  const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
-  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
+  const { systemFeatures } = useGlobalPublicStore()
  const selectedSegment = useSelectedLayoutSegment()
  const media = useBreakpoints()
  const isMobile = media === MediaType.mobile
--- a/web/app/components/header/license-env/index.tsx
+++ b/web/app/components/header/license-env/index.tsx
@ -5,10 +5,11 @@ import { LicenseStatus } from '@/types/feature'
 import { useTranslation } from 'react-i18next'
 import { useContextSelector } from 'use-context-selector'
 import dayjs from 'dayjs'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 const LicenseNav = () => {
  const { t } = useTranslation()
-  const systemFeatures = useContextSelector(AppContext, s => s.systemFeatures)
+  const { systemFeatures } = useGlobalPublicStore()

  if (systemFeatures.license?.status === LicenseStatus.EXPIRING) {
    const expiredAt = systemFeatures.license?.expired_at
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@ -17,9 +17,11 @@ import ProviderCard from '@/app/components/tools/provider/card'
 import ProviderDetail from '@/app/components/tools/provider/detail'
 import Empty from '@/app/components/tools/add-tool-modal/empty'
 import { fetchCollectionList } from '@/service/tools'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 const ProviderList = () => {
  const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()

  const [activeTab, setActiveTab] = useTabSearchParams({
    defaultTab: 'builtin',
@ -98,7 +100,7 @@ const ProviderList = () => {
          'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0',
          currentProvider && 'pr-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
        )}>
-          {activeTab === 'builtin' && <ContributeCard />}
+          {activeTab === 'builtin' && !systemFeatures.branding.enabled && <ContributeCard />}
          {activeTab === 'api' && <CustomCreateCard onRefreshData={getProviderList} />}
          {filteredCollectionList.map(collection => (
            <ProviderCard
--- a/web/app/components/tools/provider/contribute.tsx
+++ b/web/app/components/tools/provider/contribute.tsx
@ -21,8 +21,8 @@ const Contribute: FC = () => {
    >
      <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
        <div className='relative shrink-0 flex items-center'>
-          <div className='z-10 flex p-3 rounded-[10px] bg-white border-[0.5px] border-primary-100 shadow-md'><RiHammerFill className='w-4 h-4 text-primary-600'/></div>
-          <div className='-translate-x-2 flex p-3 rounded-[10px] bg-[#FEF6FB] border-[0.5px] border-[#FCE7F6] shadow-md'><Heart02 className='w-4 h-4 text-[#EE46BC]'/></div>
+          <div className='z-10 flex p-3 rounded-[10px] bg-white border-[0.5px] border-primary-100 shadow-md'><RiHammerFill className='w-4 h-4 text-primary-600' /></div>
+          <div className='-translate-x-2 flex p-3 rounded-[10px] bg-[#FEF6FB] border-[0.5px] border-[#FCE7F6] shadow-md'><Heart02 className='w-4 h-4 text-[#EE46BC]' /></div>
        </div>
      </div>
      <div className='mb-3 px-[14px] text-[15px] leading-5 font-semibold'>
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@ -1,4 +1,4 @@
-import type { Viewport } from 'next'
+import type { Metadata, Viewport } from 'next'
 import I18nServer from './components/i18n-server'
 import BrowserInitor from './components/browser-initor'
 import SentryInitor from './components/sentry-initor'
@ -6,10 +6,10 @@ import { getLocaleOnServer } from '@/i18n/server'
 import { TanstackQueryIniter } from '@/context/query-client'
 import './styles/globals.css'
 import './styles/markdown.scss'
-
-export const metadata = {
-  title: 'Dify',
-}
+import GlobalPublicStoreProvider from '@/context/global-public-context'
+import type { SystemFeatures } from '@/types/feature'
+import { defaultSystemFeatures } from '@/types/feature'
+import { API_PREFIX } from '@/config'

 export const viewport: Viewport = {
  width: 'device-width',
@ -19,6 +19,23 @@ export const viewport: Viewport = {
  userScalable: false,
 }

+export async function generateMetadata(): Promise<Metadata> {
+  const ret = await fetch(`${API_PREFIX}/system-features`, { cache: 'no-cache' }).then(res => res.json())
+  const config: SystemFeatures = { ...defaultSystemFeatures, ...ret.data }
+  if (config.branding.enabled) {
+    return {
+      title: { template: `%s - ${config.branding.application_title}`, default: config.branding.application_title },
+      icons: config.branding.favicon,
+    }
+  }
+  return {
+    title: {
+      template: '%s - Dify',
+      default: 'Dify',
+    },
+  }
+}
+
 const LocaleLayout = ({
  children,
 }: {
@ -50,7 +67,11 @@ const LocaleLayout = ({
        <BrowserInitor>
          <SentryInitor>
            <TanstackQueryIniter>
-              <I18nServer>{children}</I18nServer>
+              <I18nServer>
+                <GlobalPublicStoreProvider>
+                  {children}
+                </GlobalPublicStoreProvider>
+              </I18nServer>
            </TanstackQueryIniter>
          </SentryInitor>
        </BrowserInitor>
--- a/web/app/signin/layout.tsx
+++ b/web/app/signin/layout.tsx
@ -1,9 +1,12 @@
+'use client'
 import Header from './_header'
 import style from './page.module.css'

 import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'

-export default async function SignInLayout({ children }: any) {
+export default function SignInLayout({ children }: any) {
+  const { systemFeatures } = useGlobalPublicStore()
  return <>
    <div className={cn(
      style.background,
@ -30,9 +33,9 @@ export default async function SignInLayout({ children }: any) {
            {children}
          </div>
        </div>
-        <div className='px-8 py-6 system-xs-regular text-text-tertiary'>
+        {systemFeatures.branding.enabled === false && <div className='px-8 py-6 system-xs-regular text-text-tertiary'>
          © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
-        </div>
+        </div>}
      </div>
    </div>
  </>
--- a/web/app/signin/normalForm.tsx
+++ b/web/app/signin/normalForm.tsx
@ -9,10 +9,11 @@ import MailAndPasswordAuth from './components/mail-and-password-auth'
 import SocialAuth from './components/social-auth'
 import SSOAuth from './components/sso-auth'
 import cn from '@/utils/classnames'
-import { getSystemFeatures, invitationCheck } from '@/service/common'
-import { LicenseStatus, defaultSystemFeatures } from '@/types/feature'
+import { invitationCheck } from '@/service/common'
+import { LicenseStatus } from '@/types/feature'
 import Toast from '@/app/components/base/toast'
 import { IS_CE_EDITION } from '@/config'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 const NormalForm = () => {
  const { t } = useTranslation()
@ -23,7 +24,7 @@ const NormalForm = () => {
  const message = decodeURIComponent(searchParams.get('message') || '')
  const invite_token = decodeURIComponent(searchParams.get('invite_token') || '')
  const [isLoading, setIsLoading] = useState(true)
-  const [systemFeatures, setSystemFeatures] = useState(defaultSystemFeatures)
+  const { systemFeatures } = useGlobalPublicStore()
  const [authType, updateAuthType] = useState<'code' | 'password'>('password')
  const [showORLine, setShowORLine] = useState(false)
  const [allMethodsAreDisabled, setAllMethodsAreDisabled] = useState(false)
@ -46,12 +47,9 @@ const NormalForm = () => {
          message,
        })
      }
-      const features = await getSystemFeatures()
-      const allFeatures = { ...defaultSystemFeatures, ...features }
-      setSystemFeatures(allFeatures)
-      setAllMethodsAreDisabled(!allFeatures.enable_social_oauth_login && !allFeatures.enable_email_code_login && !allFeatures.enable_email_password_login && !allFeatures.sso_enforced_for_signin)
-      setShowORLine((allFeatures.enable_social_oauth_login || allFeatures.sso_enforced_for_signin) && (allFeatures.enable_email_code_login || allFeatures.enable_email_password_login))
-      updateAuthType(allFeatures.enable_email_password_login ? 'password' : 'code')
+      setAllMethodsAreDisabled(!systemFeatures.enable_social_oauth_login && !systemFeatures.enable_email_code_login && !systemFeatures.enable_email_password_login && !systemFeatures.sso_enforced_for_signin)
+      setShowORLine((systemFeatures.enable_social_oauth_login || systemFeatures.sso_enforced_for_signin) && (systemFeatures.enable_email_code_login || systemFeatures.enable_email_password_login))
+      updateAuthType(systemFeatures.enable_email_password_login ? 'password' : 'code')
      if (isInviteLink) {
        const checkRes = await invitationCheck({
          url: '/activate/check',
@ -65,10 +63,9 @@ const NormalForm = () => {
    catch (error) {
      console.error(error)
      setAllMethodsAreDisabled(true)
-      setSystemFeatures(defaultSystemFeatures)
    }
    finally { setIsLoading(false) }
-  }, [consoleToken, refreshToken, message, router, invite_token, isInviteLink])
+  }, [consoleToken, refreshToken, message, router, invite_token, isInviteLink, systemFeatures])
  useEffect(() => {
    init()
  }, [init])
@ -83,7 +80,7 @@ const NormalForm = () => {
      <Loading type='area' />
    </div>
  }
-  if (systemFeatures.license?.status === LicenseStatus.LOST) {
+  if (systemFeatures.license.status === LicenseStatus.LOST) {
    return <div className='w-full mx-auto mt-8'>
      <div className='bg-white'>
        <div className="p-4 rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2">
@ -97,7 +94,7 @@ const NormalForm = () => {
      </div>
    </div>
  }
-  if (systemFeatures.license?.status === LicenseStatus.EXPIRED) {
+  if (systemFeatures.license.status === LicenseStatus.EXPIRED) {
    return <div className='w-full mx-auto mt-8'>
      <div className='bg-white'>
        <div className="p-4 rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2">
@ -111,7 +108,7 @@ const NormalForm = () => {
      </div>
    </div>
  }
-  if (systemFeatures.license?.status === LicenseStatus.INACTIVE) {
+  if (systemFeatures.license.status === LicenseStatus.INACTIVE) {
    return <div className='w-full mx-auto mt-8'>
      <div className='bg-white'>
        <div className="p-4 rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2">
@ -132,11 +129,11 @@ const NormalForm = () => {
        {isInviteLink
          ? <div className="w-full mx-auto">
            <h2 className="title-4xl-semi-bold text-text-primary">{t('login.join')}{workspaceName}</h2>
-            <p className='mt-2 body-md-regular text-text-tertiary'>{t('login.joinTipStart')}{workspaceName}{t('login.joinTipEnd')}</p>
+            {!systemFeatures.branding.enabled && <p className='mt-2 body-md-regular text-text-tertiary'>{t('login.joinTipStart')}{workspaceName}{t('login.joinTipEnd')}</p>}
          </div>
          : <div className="w-full mx-auto">
            <h2 className="title-4xl-semi-bold text-text-primary">{t('login.pageTitle')}</h2>
-            <p className='mt-2 body-md-regular text-text-tertiary'>{t('login.welcome')}</p>
+            {!systemFeatures.branding.enabled && <p className='mt-2 body-md-regular text-text-tertiary'>{t('login.welcome')}</p>}
          </div>}
        <div className="bg-white">
          <div className="flex flex-col gap-3 mt-6">
@ -184,29 +181,31 @@ const NormalForm = () => {
              </div>
            </div>
          </>}
-          <div className="w-full block mt-2 system-xs-regular text-text-tertiary">
-            {t('login.tosDesc')}
-            &nbsp;
-            <Link
-              className='system-xs-medium text-text-secondary hover:underline'
-              target='_blank' rel='noopener noreferrer'
-              href='https://dify.ai/terms'
-            >{t('login.tos')}</Link>
-            &nbsp;&&nbsp;
-            <Link
-              className='system-xs-medium text-text-secondary hover:underline'
-              target='_blank' rel='noopener noreferrer'
-              href='https://dify.ai/privacy'
-            >{t('login.pp')}</Link>
-          </div>
-          {IS_CE_EDITION && <div className="w-hull block mt-2 system-xs-regular text-text-tertiary">
-            {t('login.goToInit')}
-            &nbsp;
-            <Link
-              className='system-xs-medium text-text-secondary hover:underline'
-              href='/install'
-            >{t('login.setAdminAccount')}</Link>
-          </div>}
+          {!systemFeatures.branding.enabled && <>
+            <div className="w-full block mt-2 system-xs-regular text-text-tertiary">
+              {t('login.tosDesc')}
+              &nbsp;
+              <Link
+                className='system-xs-medium text-text-secondary hover:underline'
+                target='_blank' rel='noopener noreferrer'
+                href='https://dify.ai/terms'
+              >{t('login.tos')}</Link>
+              &nbsp;&&nbsp;
+              <Link
+                className='system-xs-medium text-text-secondary hover:underline'
+                target='_blank' rel='noopener noreferrer'
+                href='https://dify.ai/privacy'
+              >{t('login.pp')}</Link>
+            </div>
+            {IS_CE_EDITION && <div className="w-hull block mt-2 system-xs-regular text-text-tertiary">
+              {t('login.goToInit')}
+              &nbsp;
+              <Link
+                className='system-xs-medium text-text-secondary hover:underline'
+                href='/install'
+              >{t('login.setAdminAccount')}</Link>
+            </div>}
+          </>}

        </div>
      </div>
--- a/web/context/app-context.tsx
+++ b/web/context/app-context.tsx
@ -6,19 +6,16 @@ import { createContext, useContext, useContextSelector } from 'use-context-selec
 import type { FC, ReactNode } from 'react'
 import { fetchAppList } from '@/service/apps'
 import Loading from '@/app/components/base/loading'
-import { fetchCurrentWorkspace, fetchLanggeniusVersion, fetchUserProfile, getSystemFeatures } from '@/service/common'
+import { fetchCurrentWorkspace, fetchLanggeniusVersion, fetchUserProfile } from '@/service/common'
 import type { App } from '@/types/app'
 import { Theme } from '@/types/app'
 import type { ICurrentWorkspace, LangGeniusVersionResponse, UserProfileResponse } from '@/models/common'
 import MaintenanceNotice from '@/app/components/header/maintenance-notice'
-import type { SystemFeatures } from '@/types/feature'
-import { defaultSystemFeatures } from '@/types/feature'

 export type AppContextValue = {
  theme: Theme
  setTheme: (theme: Theme) => void
  apps: App[]
-  systemFeatures: SystemFeatures
  mutateApps: VoidFunction
  userProfile: UserProfileResponse
  mutateUserProfile: VoidFunction
@ -57,7 +54,6 @@ const initialWorkspaceInfo: ICurrentWorkspace = {

 const AppContext = createContext<AppContextValue>({
  theme: Theme.light,
-  systemFeatures: defaultSystemFeatures,
  setTheme: () => { },
  apps: [],
  mutateApps: () => { },
@ -96,10 +92,6 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
  const { data: userProfileResponse, mutate: mutateUserProfile } = useSWR({ url: '/account/profile', params: {} }, fetchUserProfile)
  const { data: currentWorkspaceResponse, mutate: mutateCurrentWorkspace, isLoading: isLoadingCurrentWorkspace } = useSWR({ url: '/workspaces/current', params: {} }, fetchCurrentWorkspace)

-  const { data: systemFeatures } = useSWR({ url: '/console/system-features' }, getSystemFeatures, {
-    fallbackData: defaultSystemFeatures,
-  })
-
  const [userProfile, setUserProfile] = useState<UserProfileResponse>()
  const [langeniusVersionInfo, setLangeniusVersionInfo] = useState<LangGeniusVersionResponse>(initialLangeniusVersionInfo)
  const [currentWorkspace, setCurrentWorkspace] = useState<ICurrentWorkspace>(initialWorkspaceInfo)
@ -146,7 +138,6 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
      theme,
      setTheme: handleSetTheme,
      apps: appList.data,
-      systemFeatures: { ...defaultSystemFeatures, ...systemFeatures },
      mutateApps,
      userProfile,
      mutateUserProfile,
--- a/web/context/global-public-context.tsx
+++ b/web/context/global-public-context.tsx
@ -0,0 +1,34 @@
+'use client'
+import { create } from 'zustand'
+import { useQuery } from '@tanstack/react-query'
+import type { FC, PropsWithChildren } from 'react'
+import { useEffect } from 'react'
+import type { SystemFeatures } from '@/types/feature'
+import { defaultSystemFeatures } from '@/types/feature'
+import { getSystemFeatures } from '@/service/common'
+
+type GlobalPublicStore = {
+  systemFeatures: SystemFeatures
+  setSystemFeatures: (systemFeatures: SystemFeatures) => void
+}
+
+export const useGlobalPublicStore = create<GlobalPublicStore>(set => ({
+  systemFeatures: defaultSystemFeatures,
+  setSystemFeatures: (systemFeatures: SystemFeatures) => set(() => ({ systemFeatures })),
+}))
+
+const GlobalPublicStoreProvider: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const { data } = useQuery({
+    queryKey: ['systemFeatures'],
+    queryFn: getSystemFeatures,
+  })
+  const { setSystemFeatures } = useGlobalPublicStore()
+  useEffect(() => {
+    if (data)
+      setSystemFeatures({ ...defaultSystemFeatures, ...data })
+  }, [data, setSystemFeatures])
+  return <>{children}</>
+}
+export default GlobalPublicStoreProvider
--- a/web/hooks/use-document-title.ts
+++ b/web/hooks/use-document-title.ts
@ -0,0 +1,13 @@
+'use client'
+import { useLayoutEffect } from 'react'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+
+export default function useDocumentTitle(title: string) {
+  const { systemFeatures } = useGlobalPublicStore()
+  useLayoutEffect(() => {
+    if (systemFeatures.branding.enabled)
+      document.title = `${title} - ${systemFeatures.branding.application_title}`
+    else
+      document.title = `${title} - Dify`
+  }, [systemFeatures, title])
+}
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@ -131,6 +131,8 @@ const translation = {
    status: 'beta',
    explore: 'Explore',
    apps: 'Studio',
+    appDetail: 'App Detail',
+    account: 'Account',
    plugins: 'Plugins',
    pluginsTips: 'Integrate third-party plugins or create ChatGPT-compatible AI-Plugins.',
    datasets: 'Knowledge',
@ -167,7 +169,7 @@ const translation = {
  account: {
    account: 'Account',
    myAccount: 'My Account',
-    studio: 'Dify Studio',
+    studio: 'Studio',
    avatar: 'Avatar',
    name: 'Name',
    email: 'Email',
@ -179,8 +181,8 @@ const translation = {
    newPassword: 'New password',
    confirmPassword: 'Confirm password',
    notEqual: 'Two passwords are different.',
-    langGeniusAccount: 'Dify account',
-    langGeniusAccountTip: 'Your Dify account and associated user data.',
+    langGeniusAccount: 'Account\'s data',
+    langGeniusAccountTip: 'The user data of your account.',
    editName: 'Edit Name',
    showAppLength: 'Show {{length}} apps',
    delete: 'Delete Account',
--- a/web/i18n/en-US/explore.ts
+++ b/web/i18n/en-US/explore.ts
@ -16,7 +16,7 @@ const translation = {
    },
  },
  apps: {
-    title: 'Explore Apps by Dify',
+    title: 'Explore Apps',
    description: 'Use these template apps instantly or customize your own apps based on the templates.',
    allCategories: 'Recommended',
  },
--- a/web/i18n/ja-JP/common.ts
+++ b/web/i18n/ja-JP/common.ts
@ -131,6 +131,8 @@ const translation = {
    status: 'ベータ版',
    explore: '探索',
    apps: 'スタジオ',
+    appDetail: 'アプリの詳細',
+    account: 'アカウント',
    plugins: 'プラグイン',
    pluginsTips: 'サードパーティのプラグインを統合するか、ChatGPT互換のAIプラグインを作成します。',
    datasets: 'ナレッジ',
@ -176,8 +178,8 @@ const translation = {
    newPassword: '新しいパスワード',
    confirmPassword: 'パスワードを確認',
    notEqual: '2つのパスワードが異なります。',
-    langGeniusAccount: 'Difyアカウント',
-    langGeniusAccountTip: 'Difyアカウントと関連するユーザーデータ。',
+    langGeniusAccount: 'アカウント関連データ',
+    langGeniusAccountTip: 'アカウントに関連するユーザーデータ。',
    editName: '名前を編集',
    showAppLength: '{{length}}アプリを表示',
    delete: 'アカウントを削除',
@ -185,7 +187,7 @@ const translation = {
    deleteConfirmTip: '確認のため、登録したメールから次の内容をに送信してください ',
    account: 'アカウント',
    myAccount: 'マイアカウント',
-    studio: 'Difyスタジオ',
+    studio: 'スタジオ',
    deletePrivacyLinkTip: 'お客様のデータの取り扱い方法の詳細については、当社の',
    deletePrivacyLink: 'プライバシーポリシー。',
    deleteSuccessTip: 'アカウントの削除が完了するまでに時間が必要です。すべて完了しましたら、メールでお知らせします。',
--- a/web/i18n/ja-JP/explore.ts
+++ b/web/i18n/ja-JP/explore.ts
@ -16,7 +16,7 @@ const translation = {
    },
  },
  apps: {
-    title: 'Difyによるアプリの探索',
+    title: 'アプリを探索',
    description: 'これらのテンプレートアプリを即座に使用するか、テンプレートに基づいて独自のアプリをカスタマイズしてください。',
    allCategories: '推奨',
  },
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@ -131,6 +131,8 @@ const translation = {
    status: 'beta',
    explore: '探索',
    apps: '工作室',
+    appDetail: '应用详情',
+    account: '账户',
    plugins: '插件',
    pluginsTips: '集成第三方插件或创建与 ChatGPT 兼容的 AI 插件。',
    datasets: '知识库',
@ -167,7 +169,7 @@ const translation = {
  account: {
    account: '账户',
    myAccount: '我的账户',
-    studio: 'Dify 工作室',
+    studio: '工作室',
    avatar: '头像',
    name: '用户名',
    email: '邮箱',
@ -179,8 +181,8 @@ const translation = {
    newPassword: '新密码',
    notEqual: '两个密码不相同',
    confirmPassword: '确认密码',
-    langGeniusAccount: 'Dify 账号',
-    langGeniusAccountTip: '您的 Dify 账号和相关的用户数据。',
+    langGeniusAccount: '账号关联数据',
+    langGeniusAccountTip: '您的账号相关的用户数据。',
    editName: '编辑名字',
    showAppLength: '显示 {{length}} 个应用',
    delete: '删除账户',
--- a/web/i18n/zh-Hans/explore.ts
+++ b/web/i18n/zh-Hans/explore.ts
@ -16,7 +16,7 @@ const translation = {
    },
  },
  apps: {
-    title: '探索 Dify 的应用',
+    title: '探索应用',
    description: '使用这些模板应用程序，或根据模板自定义您自己的应用程序。',
    allCategories: '推荐',
  },
--- a/web/i18n/zh-Hant/common.ts
+++ b/web/i18n/zh-Hant/common.ts
@ -127,6 +127,8 @@ const translation = {
    status: 'beta',
    explore: '探索',
    apps: '工作室',
+    appDetail: '應用詳情',
+    account: '我的帳戶',
    plugins: '外掛',
    pluginsTips: '整合第三方外掛或建立與 ChatGPT 相容的 AI 外掛。',
    datasets: '知識庫',
@ -172,8 +174,8 @@ const translation = {
    newPassword: '新密碼',
    notEqual: '兩個密碼不相同',
    confirmPassword: '確認密碼',
-    langGeniusAccount: 'Dify 賬號',
-    langGeniusAccountTip: '您的 Dify 賬號和相關的使用者資料。',
+    langGeniusAccount: '賬號数据',
+    langGeniusAccountTip: '您的賬號和相關的使用者資料。',
    editName: '編輯名字',
    showAppLength: '顯示 {{length}} 個應用',
    delete: '刪除帳戶',
@ -181,7 +183,7 @@ const translation = {
    deleteConfirmTip: '請將以下內容從您的註冊電子郵件發送至 ',
    account: '帳戶',
    myAccount: '我的帳戶',
-    studio: 'Dify 工作室',
+    studio: '工作室',
    deletePrivacyLinkTip: '有關我們如何處理您的數據的更多資訊，請參閱我們的',
    deletePrivacyLink: '隱私策略。',
    deleteSuccessTip: '您的帳戶需要時間才能完成刪除。完成後，我們會給您發送電子郵件。',
--- a/web/i18n/zh-Hant/explore.ts
+++ b/web/i18n/zh-Hant/explore.ts
@ -16,7 +16,7 @@ const translation = {
    },
  },
  apps: {
-    title: '探索 Dify 的應用',
+    title: '探索應用',
    description: '使用這些模板應用程式，或根據模板自定義您自己的應用程式。',
    allCategories: '推薦',
  },
--- a/web/service/common.ts
+++ b/web/service/common.ts
@ -40,7 +40,7 @@ import type { SystemFeatures } from '@/types/feature'

 type LoginSuccess = {
  result: 'success'
-  data: { access_token: string;refresh_token: string }
+  data: { access_token: string; refresh_token: string }
 }
 type LoginFail = {
  result: 'fail'
@ -331,20 +331,20 @@ export const uploadRemoteFileInfo = (url: string, isPublic?: boolean) => {
 export const sendEMailLoginCode = (email: string, language = 'en-US') =>
  post<CommonResponse & { data: string }>('/email-code-login', { body: { email, language } })

-export const emailLoginWithCode = (data: { email: string;code: string;token: string }) =>
+export const emailLoginWithCode = (data: { email: string; code: string; token: string }) =>
  post<LoginResponse>('/email-code-login/validity', { body: data })

 export const sendResetPasswordCode = (email: string, language = 'en-US') =>
-  post<CommonResponse & { data: string;message?: string ;code?: string }>('/forgot-password', { body: { email, language } })
+  post<CommonResponse & { data: string; message?: string; code?: string }>('/forgot-password', { body: { email, language } })

-export const verifyResetPasswordCode = (body: { email: string;code: string;token: string }) =>
+export const verifyResetPasswordCode = (body: { email: string; code: string; token: string }) =>
  post<CommonResponse & { is_valid: boolean }>('/forgot-password/validity', { body })

 export const sendDeleteAccountCode = () =>
  get<CommonResponse & { data: string }>('/account/delete/verify')

-export const verifyDeleteAccountCode = (body: { code: string;token: string }) =>
+export const verifyDeleteAccountCode = (body: { code: string; token: string }) =>
  post<CommonResponse & { is_valid: boolean }>('/account/delete', { body })

-export const submitDeleteAccountFeedback = (body: { feedback: string;email: string }) =>
+export const submitDeleteAccountFeedback = (body: { feedback: string; email: string }) =>
  post<CommonResponse>('/account/delete/feedback', { body })
--- a/web/types/feature.ts
+++ b/web/types/feature.ts
@ -31,6 +31,13 @@ export type SystemFeatures = {
  is_allow_register: boolean
  is_email_setup: boolean
  license: License
+  branding: {
+    enabled: boolean
+    login_page_logo: string
+    workspace_logo: string
+    favicon: string
+    application_title: string
+  }
 }

 export const defaultSystemFeatures: SystemFeatures = {
@ -49,4 +56,11 @@ export const defaultSystemFeatures: SystemFeatures = {
    status: LicenseStatus.NONE,
    expired_at: '',
  },
+  branding: {
+    enabled: false,
+    login_page_logo: '',
+    workspace_logo: '',
+    favicon: '',
+    application_title: 'test title',
+  },
 }