Co-authored-by: zxhlyh <jasonapring2015@outlook.com>tags/1.4.2
| @@ -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> | |||
| @@ -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' /> | |||
| ) : ( | |||
| <DifyLogo size='small' />) | |||
| { | |||
| 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 | |||
| ? <img src={`${appData?.custom_config?.replace_webapp_logo}`} alt='logo' className='block h-5 w-auto' /> | |||
| : <DifyLogo size='small' /> | |||
| } | |||
| </div> | |||
| )} | |||
| @@ -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' /> | |||
| )} | |||
| {!appData?.custom_config?.replace_webapp_logo && ( | |||
| <DifyLogo size='small' /> | |||
| )} | |||
| { | |||
| 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 | |||
| ? <img src={`${appData?.custom_config?.replace_webapp_logo}`} alt='logo' className='block h-5 w-auto' /> | |||
| : <DifyLogo size='small' /> | |||
| } | |||
| </div> | |||
| )} | |||
| </div> | |||
| @@ -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' /> | |||
| )} | |||
| {!appData?.custom_config?.replace_webapp_logo && ( | |||
| <DifyLogo size='small' /> | |||
| )} | |||
| { | |||
| 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 | |||
| ? <img src={`${appData?.custom_config?.replace_webapp_logo}`} alt='logo' className='block h-5 w-auto' /> | |||
| : <DifyLogo size='small' /> | |||
| } | |||
| </div> | |||
| )} | |||
| </div> | |||
| @@ -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} | |||
| className={classNames('block object-contain', logoSizeMap[size], hasBrandingLogo && 'w-auto', className)} | |||
| alt={hasBrandingLogo ? 'Logo' : 'Dify logo'} | |||
| src={`${basePath}${logoPathMap[themedStyle]}`} | |||
| className={classNames('block object-contain', logoSizeMap[size], className)} | |||
| alt='Dify logo' | |||
| /> | |||
| ) | |||
| } | |||
| @@ -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' /> | |||
| : <DifyLogo size='small' /> | |||
| { | |||
| systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo | |||
| ? <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' /> | |||
| : <DifyLogo size='small' /> | |||
| { | |||
| systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo | |||
| ? <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' /> | |||
| } | |||
| </> | |||
| )} | |||
| @@ -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> | |||
| @@ -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 />} | |||
| @@ -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' /> | |||
| ) : ( | |||
| <DifyLogo size='small' /> | |||
| )} | |||
| { | |||
| systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo | |||
| ? <img src={systemFeatures.branding.workspace_logo} alt='logo' className='block h-5 w-auto' /> | |||
| : customConfig?.replace_webapp_logo | |||
| ? <img src={`${customConfig?.replace_webapp_logo}`} alt='logo' className='block h-5 w-auto' /> | |||
| : <DifyLogo size='small' /> | |||
| } | |||
| </div> | |||
| )} | |||
| </div> | |||
| @@ -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} | |||