E-300 (#19726)

Signed-off-by: -LAN- <laipz8200@outlook.com> Co-authored-by: Hash Brown <hi@xzd.me> Co-authored-by: crazywoola <427733928@qq.com> Co-authored-by: GareArc <chen4851@purdue.edu> Co-authored-by: Byron.wang <byron@dify.ai> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: -LAN- <laipz8200@outlook.com> Co-authored-by: Garfield Dai <dai.hai@foxmail.com> Co-authored-by: KVOJJJin <jzongcode@gmail.com> Co-authored-by: Alexi.F <654973939@qq.com> Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com> Co-authored-by: kautsar_masuara <61046989+izon-masuara@users.noreply.github.com> Co-authored-by: achmad-kautsar <achmad.kautsar@insignia.co.id> Co-authored-by: Xin Zhang <sjhpzx@gmail.com> Co-authored-by: kelvintsim <83445753+kelvintsim@users.noreply.github.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com>
2025-05-20 12:07:50 +08:00
parent 6a8ca8296b
commit d186daa131
199 changed files with 3618 additions and 1000 deletions
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.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 { fetchAppDetail } from '@/service/apps'
+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 useDocumentTitle from '@/hooks/use-document-title'

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

  const getNavigations = useCallback((appId: string, isCurrentWorkspaceEditor: boolean, mode: string) => {
    const navs = [
@@ -96,9 +95,10 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
    return navs
  }, [])

+  useDocumentTitle(appDetail?.name || t('common.menus.appDetail'))
+
  useEffect(() => {
    if (appDetail) {
-      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)
@@ -142,14 +142,9 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
    else {
      setAppDetail({ ...res, enable_sso: false })
      setNavigation(getNavigations(appId, isCurrentWorkspaceEditor, res.mode))
-      if (systemFeatures.enable_web_sso_switch_component && canIEditApp) {
-        fetchAppSSO({ appId }).then((ssoRes) => {
-          setAppDetail({ ...res, enable_sso: ssoRes.enabled })
-        })
-      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appDetailRes, isCurrentWorkspaceEditor, isLoadingAppDetail, isLoadingCurrentWorkspace, systemFeatures.enable_web_sso_switch_component])
+  }, [appDetailRes, isCurrentWorkspaceEditor, isLoadingAppDetail, isLoadingCurrentWorkspace])

  useUnmount(() => {
    setAppDetail()
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
@@ -2,25 +2,22 @@
 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'
 import {
  fetchAppDetail,
-  fetchAppSSO,
-  updateAppSSO,
  updateAppSiteAccessToken,
  updateAppSiteConfig,
  updateAppSiteStatus,
 } from '@/service/apps'
-import type { App, AppSSO } from '@/types/app'
+import type { App } from '@/types/app'
 import type { UpdateAppSiteCodeResponse } from '@/models/app'
 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'

 export type ICardViewProps = {
  appId: string
@@ -33,18 +30,11 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
  const { notify } = useContext(ToastContext)
  const appDetail = useAppStore(state => state.appDetail)
  const setAppDetail = useAppStore(state => state.setAppDetail)
-  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)

  const updateAppDetail = async () => {
    try {
      const res = await fetchAppDetail({ url: '/apps', id: appId })
-      if (systemFeatures.enable_web_sso_switch_component) {
-        const ssoRes = await fetchAppSSO({ appId })
-        setAppDetail({ ...res, enable_sso: ssoRes.enabled })
-      }
-      else {
-        setAppDetail({ ...res })
-      }
+      setAppDetail({ ...res })
    }
    catch (error) { console.error(error) }
  }
@@ -95,16 +85,6 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
    if (!err)
      localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')

-    if (systemFeatures.enable_web_sso_switch_component) {
-      const [sso_err] = await asyncRunSafe<AppSSO>(
-        updateAppSSO({ id: appId, enabled: Boolean(params.enable_sso) }) as Promise<AppSSO>,
-      )
-      if (sso_err) {
-        handleCallbackResult(sso_err)
-        return
-      }
-    }
-
    handleCallbackResult(err)
  }

--- 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,12 +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')
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isCurrentWorkspaceDatasetOperator])
+  }, [isCurrentWorkspaceDatasetOperator, router])

  return (
    <>
--- a/web/app/(commonLayout)/apps/AppCard.tsx
+++ b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -4,7 +4,8 @@ import { useContext, useContextSelector } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiMoreFill } from '@remixicon/react'
+import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import type { App } from '@/types/app'
 import Confirm from '@/app/components/base/confirm'
 import Toast, { ToastContext } from '@/app/components/base/toast'
@@ -30,7 +31,10 @@ import DSLExportConfirmModal from '@/app/components/workflow/dsl-export-confirm-
 import { fetchWorkflowDraft } from '@/service/workflow'
 import { fetchInstalledAppList } from '@/service/explore'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
-import cn from '@/utils/classnames'
+import Tooltip from '@/app/components/base/tooltip'
+import AccessControl from '@/app/components/app/app-access-control'
+import { AccessMode } from '@/models/access-control'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 export type AppCardProps = {
  app: App
@@ -40,6 +44,7 @@ export type AppCardProps = {
 const AppCard = ({ app, onRefresh }: AppCardProps) => {
  const { t } = useTranslation()
  const { notify } = useContext(ToastContext)
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
  const { isCurrentWorkspaceEditor } = useAppContext()
  const { onPlanInfoChanged } = useProviderContext()
  const { push } = useRouter()
@@ -53,6 +58,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
  const [showDuplicateModal, setShowDuplicateModal] = useState(false)
  const [showSwitchModal, setShowSwitchModal] = useState<boolean>(false)
  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const [showAccessControl, setShowAccessControl] = useState(false)
  const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])

  const onConfirmDelete = useCallback(async () => {
@@ -71,8 +77,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
      })
    }
    setShowConfirmDelete(false)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [app.id])
+  }, [app.id, mutateApps, notify, onPlanInfoChanged, onRefresh, t])

  const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({
    name,
@@ -176,6 +181,13 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
    setShowSwitchModal(false)
  }

+  const onUpdateAccessControl = useCallback(() => {
+    if (onRefresh)
+      onRefresh()
+    mutateApps()
+    setShowAccessControl(false)
+  }, [onRefresh, mutateApps, setShowAccessControl])
+
  const Operations = (props: HtmlContentProps) => {
    const onMouseLeave = async () => {
      props.onClose?.()
@@ -198,18 +210,24 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
      e.preventDefault()
      exportCheck()
    }
-    const onClickSwitch = async (e: React.MouseEvent<HTMLDivElement>) => {
+    const onClickSwitch = async (e: React.MouseEvent<HTMLButtonElement>) => {
      e.stopPropagation()
      props.onClick?.()
      e.preventDefault()
      setShowSwitchModal(true)
    }
-    const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
+    const onClickDelete = async (e: React.MouseEvent<HTMLButtonElement>) => {
      e.stopPropagation()
      props.onClick?.()
      e.preventDefault()
      setShowConfirmDelete(true)
    }
+    const onClickAccessControl = async (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      setShowAccessControl(true)
+    }
    const onClickInstalledApp = async (e: React.MouseEvent<HTMLButtonElement>) => {
      e.stopPropagation()
      props.onClick?.()
@@ -226,41 +244,49 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
      }
    }
    return (
-      <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
-        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickSettings}>
+      <div className="relative flex w-full flex-col py-1" onMouseLeave={onMouseLeave}>
+        <button className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickSettings}>
          <span className='system-sm-regular text-text-secondary'>{t('app.editApp')}</span>
        </button>
-        <Divider className="!my-1" />
-        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickDuplicate}>
+        <Divider className="my-1" />
+        <button className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickDuplicate}>
          <span className='system-sm-regular text-text-secondary'>{t('app.duplicate')}</span>
        </button>
-        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickExport}>
+        <button className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickExport}>
          <span className='system-sm-regular text-text-secondary'>{t('app.export')}</span>
        </button>
        {(app.mode === 'completion' || app.mode === 'chat') && (
          <>
-            <Divider className="!my-1" />
-            <div
-              className='mx-1 flex h-9 cursor-pointer items-center rounded-lg px-3 py-2 hover:bg-state-base-hover'
+            <Divider className="my-1" />
+            <button
+              className='mx-1 flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
              onClick={onClickSwitch}
            >
              <span className='text-sm leading-5 text-text-secondary'>{t('app.switch')}</span>
-            </div>
+            </button>
          </>
        )}
-        <Divider className="!my-1" />
-        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickInstalledApp}>
+        <Divider className="my-1" />
+        <button className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickInstalledApp}>
          <span className='system-sm-regular text-text-secondary'>{t('app.openInExplore')}</span>
        </button>
-        <Divider className="!my-1" />
-        <div
-          className='group mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover'
+        <Divider className="my-1" />
+        {
+          systemFeatures.webapp_auth.enabled && isCurrentWorkspaceEditor && <>
+            <button className='mx-1 flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickAccessControl}>
+              <span className='text-sm leading-5 text-text-secondary'>{t('app.accessControl')}</span>
+            </button>
+            <Divider className='my-1' />
+          </>
+        }
+        <button
+          className='group mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover'
          onClick={onClickDelete}
        >
          <span className='system-sm-regular text-text-secondary group-hover:text-text-destructive'>
            {t('common.operation.delete')}
          </span>
-        </div>
+        </button>
      </div>
    )
  }
@@ -302,6 +328,17 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
              {app.mode === 'completion' && <div className='truncate'>{t('app.types.completion').toUpperCase()}</div>}
            </div>
          </div>
+          <div className='flex h-5 w-5 shrink-0 items-center justify-center'>
+            {app.access_mode === AccessMode.PUBLIC && <Tooltip asChild={false} popupContent={t('app.accessItemsDescription.anyone')}>
+              <RiGlobalLine className='h-4 w-4 text-text-accent' />
+            </Tooltip>}
+            {app.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && <Tooltip asChild={false} popupContent={t('app.accessItemsDescription.specific')}>
+              <RiLockLine className='h-4 w-4 text-text-quaternary' />
+            </Tooltip>}
+            {app.access_mode === AccessMode.ORGANIZATION && <Tooltip asChild={false} popupContent={t('app.accessItemsDescription.organization')}>
+              <RiBuildingLine className='h-4 w-4 text-text-quaternary' />
+            </Tooltip>}
+          </div>
        </div>
        <div className='title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary'>
          <div
@@ -358,7 +395,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                  popupClassName={
                    (app.mode === 'completion' || app.mode === 'chat')
                      ? '!w-[256px] translate-x-[-224px]'
-                      : '!w-[160px] translate-x-[-128px]'
+                      : '!w-[216px] translate-x-[-128px]'
                  }
                  className={'!z-20 h-fit'}
                />
@@ -419,6 +456,9 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
          onClose={() => setSecretEnvList([])}
        />
      )}
+      {showAccessControl && (
+        <AccessControl app={app} onConfirm={onUpdateAccessControl} onClose={() => setShowAccessControl(false)} />
+      )}
    </>
  )
 }
--- a/web/app/(commonLayout)/apps/Apps.tsx
+++ b/web/app/(commonLayout)/apps/Apps.tsx
@@ -96,7 +96,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/layout.tsx
+++ b/web/app/(commonLayout)/apps/layout.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import useDocumentTitle from '@/hooks/use-document-title'
+import { useTranslation } from 'react-i18next'
+
+export default function DatasetsLayout({ children }: { children: React.ReactNode }) {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.apps'))
+  return (<>
+    {children}
+  </>)
+}
--- a/web/app/(commonLayout)/apps/page.tsx
+++ b/web/app/(commonLayout)/apps/page.tsx
@@ -1,24 +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 { useEducationInit } from '@/app/education-apply/hooks'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 const AppList = () => {
  const { t } = useTranslation()
  useEducationInit()
-
-  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
-
+  const { systemFeatures } = useGlobalPublicStore()
  return (
    <div className='relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body'>
      <Apps />
-      {systemFeatures.license.status === LicenseStatus.NONE && <footer className='shrink-0 grow-0 px-12 py-6'>
+      {!systemFeatures.branding.enabled && <footer className='shrink-0 grow-0 px-12 py-6'>
        <h3 className='text-gradient text-xl font-semibold leading-tight'>{t('app.join')}</h3>
        <p className='system-sm-regular mt-1 text-text-tertiary'>{t('app.communityIntro')}</p>
        <div className='mt-3 flex items-center gap-2'>
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -31,6 +31,7 @@ import { getLocaleOnClient } from '@/i18n'
 import { useAppContext } from '@/context/app-context'
 import Tooltip from '@/app/components/base/tooltip'
 import LinkedAppsPanel from '@/app/components/base/linked-apps-panel'
+import useDocumentTitle from '@/hooks/use-document-title'

 export type IAppDetailLayoutProps = {
  children: React.ReactNode
@@ -158,10 +159,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
    return baseNavigation
  }, [datasetRes?.provider, datasetId, t])

-  useEffect(() => {
-    if (datasetRes)
-      document.title = `${datasetRes.name || 'Dataset'} - Dify`
-  }, [datasetRes])
+  useDocumentTitle(datasetRes?.name || t('common.menus.datasets'))

  const setAppSiderbarExpand = useStore(state => state.setAppSiderbarExpand)

--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/Container.tsx
@@ -29,16 +29,18 @@ 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'
+import useDocumentTitle from '@/hooks/use-document-title'

 const Container = () => {
  const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()
  const router = useRouter()
  const { currentWorkspace, isCurrentWorkspaceOwner } = useAppContext()
  const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
  const { showExternalApiPanel, setShowExternalApiPanel } = useExternalApiPanel()
  const [includeAll, { toggle: toggleIncludeAll }] = useBoolean(false)
-
-  document.title = `${t('dataset.knowledge')} - Dify`
+  useDocumentTitle(t('dataset.knowledge'))

  const options = useMemo(() => {
    return [
@@ -125,7 +127,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,12 +3,12 @@
 import { useCallback, 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'
 import { fetchDatasets } from '@/service/datasets'
 import { useAppContext } from '@/context/app-context'
+import { useTranslation } from 'react-i18next'

 const getKey = (
  pageIndex: number,
@@ -48,6 +48,7 @@ const Datasets = ({
  keywords,
  includeAll,
 }: Props) => {
+  const { t } = useTranslation()
  const { isCurrentWorkspaceEditor } = useAppContext()
  const { data, isLoading, setSize, mutate } = useSWRInfinite(
    (pageIndex: number, previousPageData: DataSetListResponse) => getKey(pageIndex, previousPageData, tags, keywords, includeAll),
@@ -57,11 +58,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, t])

  const onScroll = useCallback(
@@ -87,7 +85,7 @@ const Datasets = ({

  return (
    <nav className='grid shrink-0 grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
-      { 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,6 +1,11 @@
+'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 />
 }

--- a/web/app/(commonLayout)/datasets/template/template.en.mdx
+++ b/web/app/(commonLayout)/datasets/template/template.en.mdx
@@ -11,7 +11,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)/datasets/template/template.zh.mdx
+++ b/web/app/(commonLayout)/datasets/template/template.zh.mdx
@@ -11,7 +11,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
 <div>
  ### 鉴权

-  Dify Service API 使用 `API-Key` 进行鉴权。
+  Service API 使用 `API-Key` 进行鉴权。

  建议开发者把 `API-Key` 放在后端存储，而非分享或者放在客户端存储，以免 `API-Key` 泄露，导致财产损失。

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