@lobehub/chat 1.15.34 → 1.15.35

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.15.35](https://github.com/lobehub/lobe-chat/compare/v1.15.34...v1.15.35)
+
+<sup>Released on **2024-09-10**</sup>
+
+#### 💄 Styles
+
+- **misc**: Update CustomLogo.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Update CustomLogo, closes [#3874](https://github.com/lobehub/lobe-chat/issues/3874) ([dd7c8df](https://github.com/lobehub/lobe-chat/commit/dd7c8df))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.15.34](https://github.com/lobehub/lobe-chat/compare/v1.15.33...v1.15.34)
 
 <sup>Released on **2024-09-10**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.15.34",
+  "version": "1.15.35",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/components/Branding/CustomLogo.tsx

@@ -1,72 +1,125 @@
-import { LobeChatProps } from '@lobehub/ui/brand';
-import Image from 'next/image';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import type { DivProps, SvgProps } from '@lobehub/ui';
+import type { LobeChatProps } from '@lobehub/ui/brand';
+import { createStyles, useTheme } from 'antd-style';
+import Image, { ImageProps } from 'next/image';
+import { ReactNode, memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import { BRANDING_LOGO_URL, BRANDING_NAME } from '@/const/branding';
 
-interface ProductLogoProps {
-  className?: string;
-  extra?: string;
-  size?: number;
-  type?: LobeChatProps['type'];
-}
+const useStyles = createStyles(({ css }) => {
+  return {
+    extraTitle: css`
+      font-weight: 300;
+      white-space: nowrap;
+    `,
+  };
+});
 
-const CustomLogo = memo<ProductLogoProps>(({ size = 32, className, type }) => {
-  const textNode = (
+const CustomTextLogo = memo<FlexboxProps & { size: number }>(({ size, style, ...rest }) => {
+  return (
     <Flexbox
-      className={className}
       height={size}
       style={{
         fontSize: size / 1.5,
-        fontWeight: 'bold',
+        fontWeight: 'bolder',
         userSelect: 'none',
+        ...style,
       }}
+      {...rest}
     >
       {BRANDING_NAME}
     </Flexbox>
   );
+});
+
+const CustomImageLogo = memo<Omit<ImageProps, 'alt' | 'src'> & { size: number }>(
+  ({ size, ...rest }) => {
+    return (
+      <Image
+        alt={BRANDING_NAME}
+        height={size}
+        src={BRANDING_LOGO_URL}
+        unoptimized={true}
+        width={size}
+        {...rest}
+      />
+    );
+  },
+);
 
-  const imageNode = (
-    <Image
-      alt={BRANDING_NAME}
-      className={className}
+const Divider = memo<SvgProps & DivProps & { size?: number }>(
+  ({ size = '1em', style, ...rest }) => (
+    <svg
+      fill="none"
       height={size}
-      src={BRANDING_LOGO_URL}
-      unoptimized={true}
+      shapeRendering="geometricPrecision"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
       width={size}
-    />
-  );
+      {...rest}
+    >
+      <path d="M16.88 3.549L7.12 20.451" />
+    </svg>
+  ),
+);
+
+const CustomLogo = memo<LobeChatProps>(({ extra, size = 32, className, style, type, ...rest }) => {
+  const theme = useTheme();
+  const { styles } = useStyles();
+  let logoComponent: ReactNode;
+
   switch (type) {
+    case '3d':
+    case 'flat': {
+      logoComponent = <CustomImageLogo size={size} style={style} {...rest} />;
+      break;
+    }
+    case 'mono': {
+      logoComponent = (
+        <CustomImageLogo size={size} style={{ filter: 'grayscale(100%)', ...style }} {...rest} />
+      );
+      break;
+    }
     case 'text': {
-      return textNode;
+      logoComponent = <CustomTextLogo size={size} style={style} {...rest} />;
+      break;
     }
-
     case 'combine': {
-      return (
-        <Flexbox align={'center'} gap={4} horizontal>
-          {imageNode}
-          {textNode}
-        </Flexbox>
+      logoComponent = (
+        <>
+          <CustomImageLogo size={size} />
+          <CustomTextLogo size={size} style={{ marginLeft: Math.round(size / 4) }} />
+        </>
       );
-    }
 
-    default:
-    case 'flat':
-    case 'mono':
-    case '3d': {
-      return (
-        <Image
-          alt={BRANDING_NAME}
-          className={className}
-          height={size}
-          src={BRANDING_LOGO_URL}
-          unoptimized={true}
-          width={size}
-        />
-      );
+      if (!extra)
+        logoComponent = (
+          <Flexbox align={'center'} flex={'none'} horizontal {...rest}>
+            {logoComponent}
+          </Flexbox>
+        );
+
+      break;
     }
   }
+
+  if (!extra) return logoComponent;
+
+  const extraSize = Math.round((size / 3) * 1.9);
+
+  return (
+    <Flexbox align={'center'} className={className} flex={'none'} horizontal {...rest}>
+      {logoComponent}
+      <Divider size={extraSize} style={{ color: theme.colorFill }} />
+      <div className={styles.extraTitle} style={{ fontSize: extraSize }}>
+        {extra}
+      </div>
+    </Flexbox>
+  );
 });
 
 export default CustomLogo;

package/src/components/Branding/index.tsx

@@ -5,17 +5,10 @@ import { isCustomBranding } from '@/const/version';
 
 import CustomLogo from './CustomLogo';
 
-interface ProductLogoProps {
-  className?: string;
-  extra?: string;
-  size?: number;
-  type?: LobeChatProps['type'];
-}
-
-export const ProductLogo = memo<ProductLogoProps>(({ size, className, extra, type }) => {
+export const ProductLogo = memo<LobeChatProps>((props) => {
   if (isCustomBranding) {
-    return <CustomLogo className={className} extra={extra} size={size} type={type} />;
+    return <CustomLogo {...props} />;
   }
 
-  return <LobeChat className={className} extra={extra} size={size} type={type} />;
+  return <LobeChat {...props} />;
 });

package/src/features/Conversation/Error/APIKeyForm/index.tsx

@@ -1,3 +1,4 @@
+import { ProviderIcon } from '@lobehub/icons';
 import { Button } from 'antd';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +10,6 @@ import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import BedrockForm from './Bedrock';
 import ProviderApiKeyForm from './ProviderApiKeyForm';
-import ProviderAvatar from './ProviderAvatar';
 
 interface APIKeyFormProps {
   id: string;
@@ -64,7 +64,7 @@ const APIKeyForm = memo<APIKeyFormProps>(({ id, provider }) => {
       ) : (
         <ProviderApiKeyForm
           apiKeyPlaceholder={apiKeyPlaceholder}
-          avatar={<ProviderAvatar provider={provider as ModelProvider} />}
+          avatar={<ProviderIcon provider={provider} size={80} type={'avatar'} />}
           provider={provider as GlobalLLMProviderKey}
           showEndpoint={provider === ModelProvider.OpenAI}
         />

package/src/features/Conversation/Error/APIKeyForm/ProviderAvatar.tsx

@@ -1,118 +0,0 @@
-import {
-  Ai360,
-  AiMass,
-  Anthropic,
-  Baichuan,
-  DeepSeek,
-  Google,
-  Groq,
-  Minimax,
-  Mistral,
-  Moonshot,
-  Novita,
-  OpenAI,
-  OpenRouter,
-  Perplexity,
-  Stepfun,
-  Together,
-  Tongyi,
-  Upstage,
-  ZeroOne,
-  Zhipu,
-} from '@lobehub/icons';
-import { useTheme } from 'antd-style';
-import { memo } from 'react';
-
-import { ModelProvider } from '@/libs/agent-runtime';
-
-interface ProviderAvatarProps {
-  provider: ModelProvider;
-}
-
-const ProviderAvatar = memo<ProviderAvatarProps>(({ provider }) => {
-  const theme = useTheme();
-
-  switch (provider as ModelProvider) {
-    case ModelProvider.Google: {
-      return <Google.Color size={56} />;
-    }
-
-    case ModelProvider.ZhiPu: {
-      return <Zhipu.Color size={64} />;
-    }
-
-    case ModelProvider.Minimax: {
-      return <Minimax.Color size={56} />;
-    }
-
-    case ModelProvider.Mistral: {
-      return <Mistral.Color size={56} />;
-    }
-
-    case ModelProvider.Moonshot: {
-      return <Moonshot size={56} />;
-    }
-
-    case ModelProvider.Perplexity: {
-      return <Perplexity.Color size={56} />;
-    }
-
-    case ModelProvider.Anthropic: {
-      return <Anthropic color={Anthropic.colorPrimary} size={52} />;
-    }
-
-    case ModelProvider.Baichuan: {
-      return <Baichuan color={Baichuan.colorPrimary} size={56} />;
-    }
-
-    case ModelProvider.DeepSeek: {
-      return <DeepSeek color={DeepSeek.colorPrimary} size={56} />;
-    }
-
-    case ModelProvider.Groq: {
-      return <Groq color={Groq.colorPrimary} size={56} />;
-    }
-
-    case ModelProvider.OpenRouter: {
-      return <OpenRouter color={OpenRouter.colorPrimary} size={56} />;
-    }
-
-    case ModelProvider.Qwen: {
-      return <Tongyi color={Tongyi.colorPrimary} size={56} />;
-    }
-
-    case ModelProvider.Stepfun: {
-      return <Stepfun color={Stepfun.colorPrimary} size={56} />;
-    }
-
-    case ModelProvider.Taichu: {
-      return <AiMass.Color size={56} />;
-    }
-
-    case ModelProvider.TogetherAI: {
-      return <Together color={Together.colorPrimary} size={56} />;
-    }
-
-    case ModelProvider.ZeroOne: {
-      return <ZeroOne color={ZeroOne.colorPrimary} size={56} />;
-    }
-    case ModelProvider.Novita: {
-      return <Novita color={Novita.colorPrimary} size={56} />;
-    }
-
-    case ModelProvider.Ai360: {
-      return <Ai360 color={Ai360.colorPrimary} size={56} />;
-    }
-
-    case ModelProvider.Upstage: {
-      return <Upstage color={Upstage.colorPrimary} size={56} />;
-    }
-
-    default:
-    case ModelProvider.OpenAI: {
-      return <OpenAI color={theme.colorText} size={64} />;
-    }
-  }
-});
-
-export default ProviderAvatar;