♻️ refactor: refactor to improve branding customization (lobehub#4061)

* ♻️ refactor: improve customize

* ♻️ refactor: improve customize

* ♻️ refactor: improve customize

* ♻️ refactor: improve customize

* 💄 style: fix size

src/app/(main)/chat/features/PageTitle/index.tsx

@@ -3,15 +3,16 @@
 import { memo } from 'react';
 
 import PageTitle from '@/components/PageTitle';
+import { useChatStore } from '@/store/chat';
+import { topicSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 
 const Title = memo(() => {
-  const [avatar, title] = useSessionStore((s) => [
-    sessionMetaSelectors.currentAgentAvatar(s),
-    sessionMetaSelectors.currentAgentTitle(s),
-  ]);
+  const agentTitle = useSessionStore(sessionMetaSelectors.currentAgentTitle);
 
-  return <PageTitle title={[avatar, title].filter(Boolean).join(' ')} />;
+  const topicTitle = useChatStore((s) => topicSelectors.currentActiveTopic(s)?.title);
+  return <PageTitle title={[topicTitle, agentTitle].filter(Boolean).join(' · ')} />;
 });
+
 export default Title;

src/app/(main)/welcome/_layout/Desktop.tsx

@@ -1,11 +1,12 @@
 import { GridShowcase } from '@lobehub/ui';
-import { LobeHub } from '@lobehub/ui/brand';
 import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { ORG_NAME } from '@/const/branding';
+import { isCustomORG } from '@/const/version';
 import Follow from '@/features/Follow';
 
-const COPYRIGHT = `© ${new Date().getFullYear()} LobeHub, LLC`;
+const COPYRIGHT = `© ${new Date().getFullYear()} ${ORG_NAME}`;
 
 const DesktopLayout = ({ children }: PropsWithChildren) => {
   return (
@@ -18,7 +19,7 @@ const DesktopLayout = ({ children }: PropsWithChildren) => {
         style={{ overflow: 'hidden', position: 'relative' }}
         width={'100%'}
       >
-        <LobeHub size={36} style={{ alignSelf: 'flex-start' }} type={'text'} />
+        <div />
         <GridShowcase
           innerProps={{ gap: 24 }}
           style={{ maxHeight: 'calc(100% - 104px)', maxWidth: 1024 }}
@@ -28,7 +29,7 @@ const DesktopLayout = ({ children }: PropsWithChildren) => {
         </GridShowcase>
         <Flexbox align={'center'} horizontal justify={'space-between'}>
           <span style={{ opacity: 0.5 }}>{COPYRIGHT}</span>
-          <Follow />
+          {isCustomORG ? <div /> : <Follow />}
         </Flexbox>
       </Flexbox>
       {/* ↓ cloud slot ↓ */}

src/app/(main)/welcome/page.tsx

@@ -1,3 +1,4 @@
+import { WelcomeLogo } from '@/components/Branding';
 import StructuredData from '@/components/StructuredData';
 import { BRANDING_NAME } from '@/const/branding';
 import { ldModule } from '@/server/ld';
@@ -7,7 +8,6 @@ import { isMobileDevice } from '@/utils/responsive';
 
 import Actions from './features/Actions';
 import Hero from './features/Hero';
-import Logo from './features/Logo';
 
 export const generateMetadata = async () => {
   const { t } = await translation('metadata');
@@ -30,7 +30,7 @@ const Page = async () => {
   return (
     <>
       <StructuredData ld={ld} />
-      <Logo mobile={mobile} />
+      <WelcomeLogo mobile={mobile} />
       <Hero />
       <Actions mobile={mobile} />
     </>

src/components/BrandWatermark/index.tsx

@@ -6,11 +6,13 @@ import Link from 'next/link';
 import { memo } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
+import { ORG_NAME } from '@/const/branding';
 import { UTM_SOURCE } from '@/const/url';
+import { isCustomORG } from '@/const/version';
 
 const useStyles = createStyles(({ token, css }) => ({
   logoLink: css`
-    height: 20px;
+    line-height: 1;
     color: inherit;
 
     &:hover {
@@ -31,13 +33,17 @@ const BrandWatermark = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest })
       {...rest}
     >
       <span>Powered by</span>
-      <Link
-        className={styles.logoLink}
-        href={`https://lobehub.com?utm_source=${UTM_SOURCE}&utm_content=brand_watermark`}
-        target={'_blank'}
-      >
-        <LobeHub size={20} type={'text'} />
-      </Link>
+      {isCustomORG ? (
+        <span>{ORG_NAME}</span>
+      ) : (
+        <Link
+          className={styles.logoLink}
+          href={`https://lobehub.com?utm_source=${UTM_SOURCE}&utm_content=brand_watermark`}
+          target={'_blank'}
+        >
+          <LobeHub size={20} type={'text'} />
+        </Link>
+      )}
     </Flexbox>
   );
 });

src/components/Branding/OrgBrand/index.tsx

@@ -0,0 +1,13 @@
+import { LobeHub, type LobeHubProps } from '@lobehub/ui/brand';
+import { memo } from 'react';
+
+import { ORG_NAME } from '@/const/branding';
+import { isCustomORG } from '@/const/version';
+
+export const OrgBrand = memo<LobeHubProps>((props) => {
+  if (isCustomORG) {
+    return <span>{ORG_NAME}</span>;
+  }
+
+  return <LobeHub {...props} />;
+});

src/components/Branding/index.tsx → src/components/Branding/ProductLogo/index.tsx

@@ -3,7 +3,7 @@ import { memo } from 'react';
 
 import { isCustomBranding } from '@/const/version';
 
-import CustomLogo from './CustomLogo';
+import CustomLogo from './Custom';
 
 export const ProductLogo = memo<LobeChatProps>((props) => {
   if (isCustomBranding) {

src/components/Branding/WelcomeLogo/Custom.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import Image from 'next/image';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import { BRANDING_LOGO_URL, BRANDING_NAME } from '@/const/branding';
+
+const WelcomeLogo = memo<{ mobile?: boolean }>(({ mobile }) => {
+  return mobile ? (
+    <Center height={240} width={240}>
+      <Image
+        alt={BRANDING_NAME}
+        height={240}
+        src={BRANDING_LOGO_URL}
+        unoptimized={true}
+        width={240}
+      />
+    </Center>
+  ) : (
+    <Center
+      style={{
+        height: `min(482px, 40vw)`,
+        marginBottom: '-10%',
+        marginTop: '-20%',
+        position: 'relative',
+        width: `min(976px, 80vw)`,
+      }}
+    >
+      <Image
+        alt={BRANDING_NAME}
+        height={240}
+        src={BRANDING_LOGO_URL}
+        unoptimized={true}
+        width={240}
+      />
+    </Center>
+  );
+});
+
+export default WelcomeLogo;

src/app/(main)/welcome/features/Logo.tsx → src/components/Branding/WelcomeLogo/LobeChat.tsx

@@ -7,7 +7,7 @@ import { Center } from 'react-layout-kit';
 const LogoThree = dynamic(() => import('@lobehub/ui/es/LogoThree'), { ssr: false });
 const LogoSpline = dynamic(() => import('@lobehub/ui/es/LogoThree/LogoSpline'), { ssr: false });
 
-const Logo = memo<{ mobile?: boolean }>(({ mobile }) => {
+const WelcomeLogo = memo<{ mobile?: boolean }>(({ mobile }) => {
   return mobile ? (
     <Center height={240} width={240}>
       <LogoThree size={240} />
@@ -27,4 +27,4 @@ const Logo = memo<{ mobile?: boolean }>(({ mobile }) => {
   );
 });
 
-export default Logo;
+export default WelcomeLogo;

src/components/Branding/WelcomeLogo/index.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { memo } from 'react';
+
+import { isCustomBranding } from '@/const/version';
+
+import CustomLogo from './Custom';
+import LobeChat from './LobeChat';
+
+export const WelcomeLogo = memo<{ mobile?: boolean }>(({ mobile }) => {
+  if (isCustomBranding) {
+    return <CustomLogo mobile={mobile} />;
+  }
+
+  return <LobeChat mobile={mobile} />;
+});

src/components/Branding/index.ts

@@ -0,0 +1,3 @@
+export { OrgBrand } from './OrgBrand';
+export { ProductLogo } from './ProductLogo';
+export { WelcomeLogo } from './WelcomeLogo';

src/config/app.ts

@@ -43,6 +43,7 @@ export const getAppConfig = () => {
       PLUGIN_SETTINGS: z.string().optional(),
 
       APP_URL: z.string().optional(),
+      CDN_USE_GLOBAL: z.boolean().optional(),
     },
     runtimeEnv: {
       NEXT_PUBLIC_BASE_PATH: process.env.NEXT_PUBLIC_BASE_PATH || '',
@@ -64,7 +65,10 @@ export const getAppConfig = () => {
         : 'https://chat-plugins.lobehub.com',
 
       PLUGIN_SETTINGS: process.env.PLUGIN_SETTINGS,
+
       APP_URL,
+
+      CDN_USE_GLOBAL: process.env.CDN_USE_GLOBAL === '1',
     },
   });
 };

src/const/branding.ts

@@ -1,8 +1,10 @@
-export const LOBE_CHAT_CLOUD = 'LobeChat Cloud';
-
 // the code below can only be modified with commercial license
 // if you want to use it in the commercial usage
 // please contact us for more information: [email protected]
 
+export const LOBE_CHAT_CLOUD = 'LobeChat Cloud';
+
 export const BRANDING_NAME = 'LobeChat';
 export const BRANDING_LOGO_URL = '';
+
+export const ORG_NAME = 'LobeHub';

src/const/meta.ts

@@ -5,5 +5,5 @@ export const DEFAULT_AVATAR = '🤖';
 export const DEFAULT_USER_AVATAR = '😀';
 export const DEFAULT_BACKGROUND_COLOR = 'rgba(0,0,0,0)';
 export const DEFAULT_AGENT_META: MetaData = {};
-export const DEFAULT_INBOX_AVATAR = '🤯';
+export const DEFAULT_INBOX_AVATAR = BRANDING_LOGO_URL || '🤯';
 export const DEFAULT_USER_AVATAR_URL = BRANDING_LOGO_URL || '/icons/icon-192x192.png';

src/const/version.ts

@@ -1,11 +1,13 @@
 import pkg from '@/../package.json';
 import { getServerDBConfig } from '@/config/db';
 
-import { BRANDING_NAME } from './branding';
+import { BRANDING_NAME, ORG_NAME } from './branding';
 
 export const CURRENT_VERSION = pkg.version;
 
 export const isServerMode = getServerDBConfig().NEXT_PUBLIC_ENABLED_SERVER_SERVICE;
 
 // @ts-ignore
 export const isCustomBranding = BRANDING_NAME !== 'LobeChat';
+// @ts-ignore
+export const isCustomORG = ORG_NAME !== 'LobeHub';

src/layout/GlobalProvider/AppTheme.tsx

@@ -79,10 +79,11 @@ export interface AppThemeProps {
   defaultAppearance?: ThemeAppearance;
   defaultNeutralColor?: NeutralColors;
   defaultPrimaryColor?: PrimaryColors;
+  globalCDN?: boolean;
 }
 
 const AppTheme = memo<AppThemeProps>(
-  ({ children, defaultAppearance, defaultPrimaryColor, defaultNeutralColor }) => {
+  ({ children, defaultAppearance, defaultPrimaryColor, defaultNeutralColor, globalCDN }) => {
     // console.debug('server:appearance', defaultAppearance);
     // console.debug('server:primaryColor', defaultPrimaryColor);
     // console.debug('server:neutralColor', defaultNeutralColor);
@@ -116,7 +117,14 @@ const AppTheme = memo<AppThemeProps>(
       >
         <GlobalStyle />
         <AntdStaticMethods />
-        <ConfigProvider config={{ aAs: Link, imgAs: Image, imgUnoptimized: true }}>
+        <ConfigProvider
+          config={{
+            aAs: Link,
+            imgAs: Image,
+            imgUnoptimized: true,
+            proxy: globalCDN ? 'unpkg' : undefined,
+          }}
+        >
           {children}
         </ConfigProvider>
       </ThemeProvider>

src/layout/GlobalProvider/index.tsx

@@ -3,6 +3,7 @@ import { cookies, headers } from 'next/headers';
 import { FC, PropsWithChildren } from 'react';
 import { resolveAcceptLanguage } from 'resolve-accept-language';
 
+import { appEnv } from '@/config/app';
 import { getDebugConfig } from '@/config/debug';
 import { getServerFeatureFlagsValue } from '@/config/featureFlags';
 import { LOBE_LOCALE_COOKIE } from '@/const/locale';
@@ -82,6 +83,7 @@ const GlobalLayout = async ({ children }: PropsWithChildren) => {
           defaultAppearance={appearance?.value}
           defaultNeutralColor={neutralColor?.value as any}
           defaultPrimaryColor={primaryColor?.value as any}
+          globalCDN={appEnv.CDN_USE_GLOBAL}
         >
           <ServerConfigStoreProvider
             featureFlags={serverFeatureFlags}