Fix/branding broken (#20375)

Co-authored-by: zxhlyh <jasonapring2015@outlook.com>

web/app/account/header.tsx

@@ -6,10 +6,12 @@ import Button from '../components/base/button'
 import Avatar from './avatar'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import { useCallback } from 'react'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const Header = () => {
   const { t } = useTranslation()
   const router = useRouter()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
 
   const back = useCallback(() => {
     router.back()
@@ -19,7 +21,13 @@ const Header = () => {
     <div className='flex flex-1 items-center justify-between px-4'>
       <div className='flex items-center gap-3'>
         <div className='flex cursor-pointer items-center' onClick={back}>
-          <DifyLogo />
+          {systemFeatures.branding.enabled && systemFeatures.branding.login_page_logo
+            ? <img
+              src={systemFeatures.branding.login_page_logo}
+              className='block h-[22px] w-auto object-contain'
+              alt='Dify logo'
+            />
+            : <DifyLogo />}
         </div>
         <div className='h-4 w-[1px] origin-center rotate-[11.31deg] bg-divider-regular' />
         <p className='title-3xl-semi-bold relative mt-[-2px] text-text-primary'>{t('common.account.account')}</p>

web/app/components/base/chat/chat-with-history/sidebar/index.tsx

@@ -148,10 +148,12 @@ const Sidebar = ({ isPanel }: Props) => {
               'flex shrink-0 items-center gap-1.5 px-1',
             )}>
               <div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
-              {systemFeatures.branding.enabled ? (
+              {
-                <img src={systemFeatures.branding.login_page_logo} alt='logo' className='block h-5 w-auto' />
+                systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
-              ) : (
+                  ? <img src={systemFeatures.branding.workspace_logo} alt='logo' className='block h-5 w-auto' />
-                <DifyLogo size='small' />)
+                  : appData?.custom_config?.replace_webapp_logo
+                    ? <img src={`${appData?.custom_config?.replace_webapp_logo}`} alt='logo' className='block h-5 w-auto' />
+                    : <DifyLogo size='small' />
               }
             </div>
           )}

web/app/components/base/chat/embedded-chatbot/header/index.tsx

@@ -13,6 +13,7 @@ import Divider from '@/app/components/base/divider'
 import ViewFormDropdown from '@/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export type IHeaderProps = {
   isMobile?: boolean
@@ -42,6 +43,7 @@ const Header: FC<IHeaderProps> = ({
   const [parentOrigin, setParentOrigin] = useState('')
   const [showToggleExpandButton, setShowToggleExpandButton] = useState(false)
   const [expanded, setExpanded] = useState(false)
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
 
   const handleMessageReceived = useCallback((event: MessageEvent) => {
     let currentParentOrigin = parentOrigin
@@ -85,12 +87,13 @@ const Header: FC<IHeaderProps> = ({
                 'flex shrink-0 items-center gap-1.5 px-2',
               )}>
                 <div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
-                {appData?.custom_config?.replace_webapp_logo && (
+                {
-                  <img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
+                  systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
-                )}
+                    ? <img src={systemFeatures.branding.workspace_logo} alt='logo' className='block h-5 w-auto' />
-                {!appData?.custom_config?.replace_webapp_logo && (
+                    : appData?.custom_config?.replace_webapp_logo
-                  <DifyLogo size='small' />
+                      ? <img src={`${appData?.custom_config?.replace_webapp_logo}`} alt='logo' className='block h-5 w-auto' />
-                )}
+                      : <DifyLogo size='small' />
+                }
               </div>
             )}
           </div>

web/app/components/base/chat/embedded-chatbot/index.tsx

@@ -22,6 +22,7 @@ import ChatWrapper from '@/app/components/base/chat/embedded-chatbot/chat-wrappe
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import cn from '@/utils/classnames'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const Chatbot = () => {
   const {
@@ -37,6 +38,7 @@ const Chatbot = () => {
     themeBuilder,
   } = useEmbeddedChatbotContext()
   const { t } = useTranslation()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
 
   const customConfig = appData?.custom_config
   const site = appData?.site
@@ -115,12 +117,13 @@ const Chatbot = () => {
               'flex shrink-0 items-center gap-1.5 px-2',
             )}>
               <div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
-              {appData?.custom_config?.replace_webapp_logo && (
+              {
-                <img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
+                systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
-              )}
+                  ? <img src={systemFeatures.branding.workspace_logo} alt='logo' className='block h-5 w-auto' />
-              {!appData?.custom_config?.replace_webapp_logo && (
+                  : appData?.custom_config?.replace_webapp_logo
-                <DifyLogo size='small' />
+                    ? <img src={`${appData?.custom_config?.replace_webapp_logo}`} alt='logo' className='block h-5 w-auto' />
-              )}
+                    : <DifyLogo size='small' />
+              }
             </div>
           )}
         </div>

web/app/components/base/logo/dify-logo.tsx

@@ -3,7 +3,6 @@ import type { FC } from 'react'
 import classNames from '@/utils/classnames'
 import useTheme from '@/hooks/use-theme'
 import { basePath } from '@/utils/var'
-import { useGlobalPublicStore } from '@/context/global-public-context'
 export type LogoStyle = 'default' | 'monochromeWhite'
 
 export const logoPathMap: Record<LogoStyle, string> = {
@@ -32,18 +31,12 @@ const DifyLogo: FC<DifyLogoProps> = ({
 }) => {
   const { theme } = useTheme()
   const themedStyle = (theme === 'dark' && style === 'default') ? 'monochromeWhite' : style
-  const { systemFeatures } = useGlobalPublicStore()
-  const hasBrandingLogo = Boolean(systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo)
-
-  let src = `${basePath}${logoPathMap[themedStyle]}`
-  if (hasBrandingLogo)
-    src = systemFeatures.branding.workspace_logo
 
   return (
     <img
-      src={src}
+      src={`${basePath}${logoPathMap[themedStyle]}`}
-      className={classNames('block object-contain', logoSizeMap[size], hasBrandingLogo && 'w-auto', className)}
+      className={classNames('block object-contain', logoSizeMap[size], className)}
-      alt={hasBrandingLogo ? 'Logo' : 'Dify logo'}
+      alt='Dify logo'
     />
   )
 }

web/app/components/custom/custom-web-app-brand/index.tsx

@@ -24,6 +24,7 @@ import {
 } from '@/service/common'
 import { useAppContext } from '@/context/app-context'
 import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const ALLOW_FILE_EXTENSIONS = ['svg', 'png']
 
@@ -39,6 +40,7 @@ const CustomWebAppBrand = () => {
   const [fileId, setFileId] = useState('')
   const [imgKey, setImgKey] = useState(Date.now())
   const [uploadProgress, setUploadProgress] = useState(0)
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   const isSandbox = enableBilling && plan.type === Plan.sandbox
   const uploading = uploadProgress > 0 && uploadProgress < 100
   const webappLogo = currentWorkspace.custom_config?.replace_webapp_logo || ''
@@ -244,9 +246,12 @@ const CustomWebAppBrand = () => {
                 {!webappBrandRemoved && (
                   <>
                     <div className='system-2xs-medium-uppercase text-text-tertiary'>POWERED BY</div>
-                    {webappLogo
+                    {
-                      ? <img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='block h-5 w-auto' />
+                      systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
-                      : <DifyLogo size='small' />
+                        ? <img src={systemFeatures.branding.workspace_logo} alt='logo' className='block h-5 w-auto' />
+                        : webappLogo
+                          ? <img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='block h-5 w-auto' />
+                          : <DifyLogo size='small' />
                     }
                   </>
                 )}
@@ -303,9 +308,12 @@ const CustomWebAppBrand = () => {
             {!webappBrandRemoved && (
               <>
                 <div className='system-2xs-medium-uppercase text-text-tertiary'>POWERED BY</div>
-                {webappLogo
+                {
-                  ? <img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='block h-5 w-auto' />
+                  systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
-                  : <DifyLogo size='small' />
+                    ? <img src={systemFeatures.branding.workspace_logo} alt='logo' className='block h-5 w-auto' />
+                    : webappLogo
+                      ? <img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='block h-5 w-auto' />
+                      : <DifyLogo size='small' />
                 }
               </>
             )}

web/app/components/header/account-about/index.tsx

@@ -9,6 +9,7 @@ import type { LangGeniusVersionResponse } from '@/models/common'
 import { IS_CE_EDITION } from '@/config'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import { noop } from 'lodash-es'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 type IAccountSettingProps = {
   langeniusVersionInfo: LangGeniusVersionResponse
@@ -21,6 +22,7 @@ export default function AccountAbout({
 }: IAccountSettingProps) {
   const { t } = useTranslation()
   const isLatest = langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
 
   return (
     <Modal
@@ -33,7 +35,14 @@ export default function AccountAbout({
           <RiCloseLine className='h-4 w-4 text-text-tertiary' />
         </div>
         <div className='flex flex-col items-center gap-4 py-8'>
-          <DifyLogo size='large' className='mx-auto' />
+          {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
+            ? <img
+              src={systemFeatures.branding.workspace_logo}
+              className='block h-7 w-auto object-contain'
+              alt='logo'
+            />
+            : <DifyLogo size='large' className='mx-auto' />}
+
           <div className='text-center text-xs font-normal text-text-tertiary'>Version {langeniusVersionInfo?.current_version}</div>
           <div className='flex flex-col items-center gap-2 text-center text-xs font-normal text-text-secondary'>
             <div>© {dayjs().year()} LangGenius, Inc., Contributors.</div>

web/app/components/header/index.tsx

@@ -21,6 +21,7 @@ import { useModalContext } from '@/context/modal-context'
 import PlanBadge from './plan-badge'
 import LicenseNav from './license-env'
 import { Plan } from '../billing/type'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const navClassName = `
   flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl
@@ -36,6 +37,7 @@ const Header = () => {
   const [isShowNavMenu, { toggle, setFalse: hideNavMenu }] = useBoolean(false)
   const { enableBilling, plan } = useProviderContext()
   const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   const isFreePlan = plan.type === Plan.sandbox
   const handlePlanClick = useCallback(() => {
     if (isFreePlan)
@@ -61,7 +63,13 @@ const Header = () => {
           !isMobile
           && <div className='flex shrink-0 items-center gap-1.5 self-stretch pl-3'>
             <Link href="/apps" className='flex h-8 shrink-0 items-center justify-center gap-2 px-0.5'>
-              <DifyLogo />
+              {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
+                ? <img
+                  src={systemFeatures.branding.workspace_logo}
+                  className='block h-[22px] w-auto object-contain'
+                  alt='logo'
+                />
+                : <DifyLogo />}
             </Link>
             <div className='font-light text-divider-deep'>/</div>
             <div className='flex items-center gap-0.5'>
@@ -76,7 +84,13 @@ const Header = () => {
       {isMobile && (
         <div className='flex'>
           <Link href="/apps" className='mr-4 flex items-center'>
-            <DifyLogo />
+            {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
+              ? <img
+                src={systemFeatures.branding.workspace_logo}
+                className='block h-[22px] w-auto object-contain'
+                alt='logo'
+              />
+              : <DifyLogo />}
           </Link>
           <div className='font-light text-divider-deep'>/</div>
           {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}

web/app/components/share/text-generation/index.tsx

@@ -641,11 +641,13 @@ const TextGeneration: FC<IMainProps> = ({
             !isPC && resultExisted && 'rounded-b-2xl border-b-[0.5px] border-divider-regular',
           )}>
             <div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
-            {systemFeatures.branding.enabled ? (
+            {
-              <img src={systemFeatures.branding.login_page_logo} alt='logo' className='block h-5 w-auto' />
+              systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
-            ) : (
+                ? <img src={systemFeatures.branding.workspace_logo} alt='logo' className='block h-5 w-auto' />
-              <DifyLogo size='small' />
+                : customConfig?.replace_webapp_logo
-            )}
+                  ? <img src={`${customConfig?.replace_webapp_logo}`} alt='logo' className='block h-5 w-auto' />
+                  : <DifyLogo size='small' />
+            }
           </div>
         )}
       </div>

web/app/signin/_header.tsx

@@ -7,6 +7,7 @@ import { languages } from '@/i18n/language'
 import type { Locale } from '@/i18n'
 import I18n from '@/context/i18n'
 import dynamic from 'next/dynamic'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 // Avoid rendering the logo and theme selector on the server
 const DifyLogo = dynamic(() => import('@/app/components/base/logo/dify-logo'), {
@@ -20,10 +21,17 @@ const ThemeSelector = dynamic(() => import('@/app/components/base/theme-selector
 
 const Header = () => {
   const { locale, setLocaleOnClient } = useContext(I18n)
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
 
   return (
     <div className='flex w-full items-center justify-between p-6'>
-      <DifyLogo size='large' />
+      {systemFeatures.branding.enabled && systemFeatures.branding.login_page_logo
+        ? <img
+          src={systemFeatures.branding.login_page_logo}
+          className='block h-7 w-auto object-contain'
+          alt='logo'
+        />
+        : <DifyLogo size='large' />}
       <div className='flex items-center gap-1'>
         <Select
           value={locale}