feat: update branding (#19719)

Co-authored-by: twwu <twwu@dify.ai>

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

@@ -16,7 +16,7 @@ import List from '@/app/components/base/chat/chat-with-history/sidebar/list'
 import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
 import Confirm from '@/app/components/base/confirm'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
 import type { ConversationItem } from '@/models/share'
 import cn from '@/utils/classnames'
 
@@ -141,14 +141,14 @@ const Sidebar = ({ isPanel }: Props) => {
         <div className='shrink-0'>
           {!appData?.custom_config?.remove_webapp_brand && (
             <div className={cn(
-              'flex shrink-0 items-center gap-1.5 px-2',
+              'flex shrink-0 items-center gap-1.5 px-1',
             )}>
               <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 && (
-                <LogoSite className='!h-5' />
+                <DifyLogo size='small' />
               )}
             </div>
           )}

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

@@ -11,7 +11,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import ActionButton from '@/app/components/base/action-button'
 import Divider from '@/app/components/base/divider'
 import ViewFormDropdown from '@/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
 import cn from '@/utils/classnames'
 
 export type IHeaderProps = {
@@ -89,7 +89,7 @@ const Header: FC<IHeaderProps> = ({
                   <img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
                 )}
                 {!appData?.custom_config?.replace_webapp_logo && (
-                  <LogoSite className='!h-5' />
+                  <DifyLogo size='small' />
                 )}
               </div>
             )}
@@ -132,7 +132,7 @@ const Header: FC<IHeaderProps> = ({
   return (
     <div
       className={cn('flex h-14 shrink-0 items-center justify-between rounded-t-2xl px-3')}
-      style={Object.assign({}, CssTransform(theme?.backgroundHeaderColorStyle ?? ''), CssTransform(theme?.headerBorderBottomStyle ?? '')) }
+      style={Object.assign({}, CssTransform(theme?.backgroundHeaderColorStyle ?? ''), CssTransform(theme?.headerBorderBottomStyle ?? ''))}
     >
       <div className="flex grow items-center space-x-3">
         {customerIcon}

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

@@ -19,7 +19,7 @@ import Loading from '@/app/components/base/loading'
 import LogoHeader from '@/app/components/base/logo/logo-embedded-chat-header'
 import Header from '@/app/components/base/chat/embedded-chatbot/header'
 import ChatWrapper from '@/app/components/base/chat/embedded-chatbot/chat-wrapper'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
 import cn from '@/utils/classnames'
 
 const Chatbot = () => {
@@ -118,7 +118,7 @@ const Chatbot = () => {
                 <img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
               )}
               {!appData?.custom_config?.replace_webapp_logo && (
-                <LogoSite className='!h-5' />
+                <DifyLogo size='small' />
               )}
             </div>
           )}

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

@@ -0,0 +1,45 @@
+'use client'
+import type { FC } from 'react'
+import { WEB_PREFIX } from '@/config'
+import classNames from '@/utils/classnames'
+import useTheme from '@/hooks/use-theme'
+
+export type LogoStyle = 'default' | 'monochromeWhite'
+
+export const logoPathMap: Record<LogoStyle, string> = {
+  default: '/logo/logo.svg',
+  monochromeWhite: '/logo/logo-monochrome-white.svg',
+}
+
+export type LogoSize = 'large' | 'medium' | 'small'
+
+export const logoSizeMap: Record<LogoSize, string> = {
+  large: 'w-16 h-7',
+  medium: 'w-12 h-[22px]',
+  small: 'w-9 h-4',
+}
+
+type DifyLogoProps = {
+  style?: LogoStyle
+  size?: LogoSize
+  className?: string
+}
+
+const DifyLogo: FC<DifyLogoProps> = ({
+  style = 'default',
+  size = 'medium',
+  className,
+}) => {
+  const { theme } = useTheme()
+  const themedStyle = (theme === 'dark' && style === 'default') ? 'monochromeWhite' : style
+
+  return (
+    <img
+      src={`${WEB_PREFIX}${logoPathMap[themedStyle]}`}
+      className={classNames('block object-contain', logoSizeMap[size], className)}
+      alt='Dify logo'
+    />
+  )
+}
+
+export default DifyLogo

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

@@ -1,22 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import { WEB_PREFIX } from '@/config'
-import classNames from '@/utils/classnames'
-
-type LogoSiteProps = {
-  className?: string
-}
-
-const LogoSite: FC<LogoSiteProps> = ({
-  className,
-}) => {
-  return (
-    <img
-      src={`${WEB_PREFIX}/logo/logo.png`}
-      className={classNames('block w-[22.651px] h-[24.5px]', className)}
-      alt='logo'
-    />
-  )
-}
-
-export default LogoSite

web/app/components/base/premium-badge/index.css

@@ -2,7 +2,7 @@
 
 @layer components {
   .premium-badge {
-    @apply shrink-0 relative inline-flex justify-center items-center rounded-md box-border border border-transparent text-white shadow-xs hover:shadow-lg bg-origin-border overflow-hidden;
+    @apply shrink-0 relative inline-flex justify-center items-center rounded-md box-border border border-transparent text-white shadow-xs hover:shadow-lg bg-origin-border overflow-hidden transition-all duration-100 ease-out;
     background-clip: padding-box, border-box;
   }
   .allowHover {