fix: update document title with system features config

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 (
     <>

web/app/(commonLayout)/apps/Apps.tsx

@@ -26,7 +26,6 @@ import { useStore as useTagStore } from '@/app/components/base/tag-management/st
 import TagManagementModal from '@/app/components/base/tag-management'
 import TagFilter from '@/app/components/base/tag-management/filter'
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
-import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const getKey = (
   pageIndex: number,
@@ -56,7 +55,6 @@ const Apps = () => {
   const { t } = useTranslation()
   const router = useRouter()
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
-  const { systemFeatures } = useGlobalPublicStore()
   const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
   const [activeTab, setActiveTab] = useTabSearchParams({
     defaultTab: 'all',
@@ -87,16 +85,11 @@ const Apps = () => {
   ]
 
   useEffect(() => {
-    if (systemFeatures.branding.enabled)
-      document.title = `${t('common.menus.apps')} -  ${systemFeatures.branding.application_title}`
-    else
-      document.title = `${t('common.menus.apps')} -  Dify`
-
     if (localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
       localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
       mutate()
     }
-  }, [mutate, t, systemFeatures])
+  }, [mutate, t])
 
   useEffect(() => {
     if (isCurrentWorkspaceDatasetOperator)

web/app/(commonLayout)/apps/page.tsx

@@ -4,17 +4,17 @@ import { RiDiscordFill, RiGithubFill } from '@remixicon/react'
 import Link from 'next/link'
 import style from '../list.module.css'
 import Apps from './Apps'
-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 } = 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'>

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} />
           )}

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} />),
       ))}

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

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 = {
+import useDocumentTitle from '@/hooks/use-document-title'
-  children: React.ReactNode
-}
 
-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)

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'
-
+import useDocumentTitle from '@/hooks/use-document-title'
-const Layout: FC = () => {
+const ToolsList: FC = () => {
-  const { t } = useTranslation()
   const router = useRouter()
   const { isCurrentWorkspaceDatasetOperator } = useAppContext()
-
+  const { t } = useTranslation()
-  useEffect(() => {
+  useDocumentTitle(t('common.menus.tools'))
-    if (typeof window !== 'undefined')
-      document.title = `${t('tools.title')} - Dify`
-    if (isCurrentWorkspaceDatasetOperator)
-      return router.replace('/datasets')
-  }, [isCurrentWorkspaceDatasetOperator, router, t])
 
   useEffect(() => {
     if (isCurrentWorkspaceDatasetOperator)
@@ -25,4 +19,4 @@ const Layout: FC = () => {
 
   return <ToolProviderList />
 }
-export default React.memo(Layout)
+export default React.memo(ToolsList)

web/app/account/layout.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import type { ReactNode } from 'react'
+import { t } from 'i18next'
 import Header from './header'
 import SwrInitor from '@/app/components/swr-initor'
 import { AppContextProvider } from '@/context/app-context'
@@ -34,7 +35,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
 }
 
 export const metadata = {
-  title: 'Dify',
+  title: t('common.menus.account'),
 }
 
 export default Layout

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)

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,6 +124,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         <div>{t('common.userProfile.settings')}</div>
                       </div>}
                     </Menu.Item>
+                    {!systemFeatures.branding.enabled && <>
                       {canEmailSupport && <Menu.Item>
                         {({ active }) => <a
                           className={classNames(itemClassName, 'group justify-between',
@@ -194,6 +197,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                           </Menu.Item>
                         )
                       }
+                    </>}
                   </div>
                   <Menu.Item>
                     {({ active }) => <div className='p-1' onClick={() => handleLogout()}>

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

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='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='-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'>

web/app/layout.tsx

@@ -7,7 +7,9 @@ import { TanstackQueryIniter } from '@/context/query-client'
 import './styles/globals.css'
 import './styles/markdown.scss'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
-import { fetchSystemFeatures } from '@/service/share'
+import type { SystemFeatures } from '@/types/feature'
+import { defaultSystemFeatures } from '@/types/feature'
+import { API_PREFIX } from '@/config'
 
 export const viewport: Viewport = {
   width: 'device-width',
@@ -18,12 +20,19 @@ export const viewport: Viewport = {
 }
 
 export async function generateMetadata(): Promise<Metadata> {
-  const config = await fetchSystemFeatures()
+  const ret = await fetch(`${API_PREFIX}/system-features`, { cache: 'no-cache' }).then(res => res.json())
-  if (config.branding.enabled)
+  const config: SystemFeatures = { ...defaultSystemFeatures, ...ret.data }
-    return { title: config.branding.application_title ?? '-', icons: config.branding.favicon }
+  if (config.branding.enabled) {
-
+    return {
+      title: { template: `%s - ${config.branding.application_title}`, default: config.branding.application_title },
+      icons: config.branding.favicon,
+    }
+  }
   return {
-    title: 'Dify',
+    title: {
+      template: '%s - Dify',
+      default: 'Dify',
+    },
   }
 }
 

web/app/signin/layout.tsx

@@ -1,3 +1,4 @@
+'use client'
 import Header from './_header'
 import style from './page.module.css'
 

web/context/global-public-context.tsx

@@ -5,7 +5,7 @@ import type { FC, PropsWithChildren } from 'react'
 import { useEffect } from 'react'
 import type { SystemFeatures } from '@/types/feature'
 import { defaultSystemFeatures } from '@/types/feature'
-import { fetchSystemFeatures } from '@/service/share'
+import { getSystemFeatures } from '@/service/common'
 
 type GlobalPublicStore = {
   systemFeatures: SystemFeatures
@@ -22,7 +22,7 @@ const GlobalPublicStoreProvider: FC<PropsWithChildren> = ({
 }) => {
   const { data } = useQuery({
     queryKey: ['systemFeatures'],
-    queryFn: fetchSystemFeatures,
+    queryFn: getSystemFeatures,
   })
   const { setSystemFeatures } = useGlobalPublicStore()
   useEffect(() => {

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])
+}

web/i18n/en-US/common.ts

@@ -131,6 +131,7 @@ const translation = {
     status: 'beta',
     explore: 'Explore',
     apps: 'Studio',
+    appDetail: 'App Detail',
     plugins: 'Plugins',
     pluginsTips: 'Integrate third-party plugins or create ChatGPT-compatible AI-Plugins.',
     datasets: 'Knowledge',

web/i18n/ja-JP/common.ts

@@ -131,6 +131,7 @@ const translation = {
     status: 'ベータ版',
     explore: '探索',
     apps: 'スタジオ',
+    appDetail: 'アプリの詳細',
     plugins: 'プラグイン',
     pluginsTips: 'サードパーティのプラグインを統合するか、ChatGPT互換のAIプラグインを作成します。',
     datasets: 'ナレッジ',

web/i18n/zh-Hans/common.ts

@@ -131,6 +131,7 @@ const translation = {
     status: 'beta',
     explore: '探索',
     apps: '工作室',
+    appDetail: '应用详情',
     plugins: '插件',
     pluginsTips: '集成第三方插件或创建与 ChatGPT 兼容的 AI 插件。',
     datasets: '知识库',

web/i18n/zh-Hant/common.ts

@@ -127,6 +127,7 @@ const translation = {
     status: 'beta',
     explore: '探索',
     apps: '工作室',
+    appDetail: '應用詳情',
     plugins: '外掛',
     pluginsTips: '整合第三方外掛或建立與 ChatGPT 相容的 AI 外掛。',
     datasets: '知識庫',

web/service/common.ts

@@ -36,6 +36,7 @@ import type {
   ModelTypeEnum,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { RETRIEVE_METHOD } from '@/types/app'
+import type { SystemFeatures } from '@/types/feature'
 
 type LoginSuccess = {
   result: 'success'
@@ -303,6 +304,10 @@ export const fetchSupportRetrievalMethods: Fetcher<RetrievalMethodsRes, string>
   return get<RetrievalMethodsRes>(url)
 }
 
+export const getSystemFeatures = () => {
+  return get<SystemFeatures>('/system-features')
+}
+
 export const enableModel = (url: string, body: { model: string; model_type: ModelTypeEnum }) =>
   patch<CommonResponse>(url, { body })
 

web/types/feature.ts

@@ -61,6 +61,6 @@ export const defaultSystemFeatures: SystemFeatures = {
     login_page_logo: '',
     workspace_logo: '',
     favicon: '',
-    application_title: '',
+    application_title: 'test title',
   },
 }