💄 style: Move model and provider icon components to @lobehub/icons (l…

…obehub#3634) * 💄 style: Move model and provider icon components to @lobehub/icons * 🐛 fix: Fix review problem * 🔧 chore: Update deps * 💄 style: Rm Google Avatar in Browser options
bentwnghk · Aug 28, 2024 · 5c7e17a · 5c7e17a
1 parent 64eb7c2
commit 5c7e17a
Show file tree

Hide file tree

Showing 22 changed files with 95 additions and 631 deletions.
diff --git a/package.json b/package.json
@@ -119,7 +119,7 @@
     "@langchain/community": "^0.2.31",
     "@lobehub/chat-plugin-sdk": "^1.32.4",
     "@lobehub/chat-plugins-gateway": "^1.9.0",
-    "@lobehub/icons": "^1.28.0",
+    "@lobehub/icons": "^1.30.0",
     "@lobehub/tts": "^1.24.3",
     "@lobehub/ui": "^1.149.2",
     "@neondatabase/serverless": "^0.9.4",

diff --git a/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Tags.tsx b/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Tags.tsx
@@ -1,8 +1,8 @@
+import { ModelTag } from '@lobehub/icons';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ModelTag from '@/components/ModelTag';
 import ModelSwitchPanel from '@/features/ModelSwitchPanel';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';

diff --git a/src/app/(main)/chat/(workspace)/features/ShareButton/Preview.tsx b/src/app/(main)/chat/(workspace)/features/ShareButton/Preview.tsx
@@ -1,11 +1,11 @@
+import { ModelTag } from '@lobehub/icons';
 import { Avatar, ChatHeaderTitle, Markdown } from '@lobehub/ui';
 import { LobeChat } from '@lobehub/ui/brand';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import pkg from '@/../package.json';
-import ModelTag from '@/components/ModelTag';
 import ChatList from '@/features/Conversation/components/ChatList';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';

diff --git a/src/app/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx b/src/app/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx
@@ -1,8 +1,8 @@
+import { ModelTag } from '@lobehub/icons';
 import { memo, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import ModelTag from '@/components/ModelTag';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';

diff --git a/src/app/(main)/settings/llm/ProviderList/Azure/index.tsx b/src/app/(main)/settings/llm/ProviderList/Azure/index.tsx
@@ -1,11 +1,9 @@
 'use client';
 
-import { Azure, OpenAI } from '@lobehub/icons';
 import { Markdown } from '@lobehub/ui';
-import { AutoComplete, Divider, Input } from 'antd';
+import { AutoComplete, Input } from 'antd';
 import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { AzureProviderCard } from '@/config/modelProviders';
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -29,16 +27,6 @@ const useStyles = createStyles(({ css, token }) => ({
 
 const providerKey = ModelProvider.Azure;
 
-const AzureOpenAIBrand = () => {
-  return (
-    <Flexbox align={'center'} gap={8} horizontal>
-      <Azure.Combine size={22} type={'color'}></Azure.Combine>
-      <Divider style={{ margin: '0 4px' }} type={'vertical'} />
-      <OpenAI.Combine size={24}></OpenAI.Combine>
-    </Flexbox>
-  );
-};
-
 export const useAzureProvider = (): ProviderItem => {
   const { t } = useTranslation('modelProvider');
   const { styles } = useStyles();
@@ -105,6 +93,5 @@ export const useAzureProvider = (): ProviderItem => {
       notFoundContent: t('azure.empty'),
       placeholder: t('azure.modelListPlaceholder'),
     },
-    title: <AzureOpenAIBrand />,
   };
 };
diff --git a/src/app/(main)/settings/llm/ProviderList/Bedrock/index.tsx b/src/app/(main)/settings/llm/ProviderList/Bedrock/index.tsx
@@ -1,9 +1,7 @@
 'use client';
 
-import { Aws, Bedrock } from '@lobehub/icons';
-import { Divider, Input, Select } from 'antd';
+import { Input, Select } from 'antd';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { BedrockProviderCard } from '@/config/modelProviders';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
@@ -57,12 +55,5 @@ export const useBedrockProvider = (): ProviderItem => {
         name: [KeyVaultsConfigKey, providerKey, 'region'],
       },
     ],
-    title: (
-      <Flexbox align={'center'} gap={8} horizontal>
-        <Aws.Color size={32} />
-        <Divider style={{ margin: '0 4px' }} type={'vertical'} />
-        <Bedrock.Combine size={26} type={'color'} />
-      </Flexbox>
-    ),
   };
 };
diff --git a/src/app/(main)/settings/llm/ProviderList/Ollama/index.tsx b/src/app/(main)/settings/llm/ProviderList/Ollama/index.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { Ollama } from '@lobehub/icons';
 import { useTranslation } from 'react-i18next';
 
 import { OllamaProviderCard } from '@/config/modelProviders';
@@ -24,6 +23,5 @@ export const useOllamaProvider = (): ProviderItem => {
       placeholder: 'http://127.0.0.1:11434',
       title: t('ollama.endpoint.title'),
     },
-    title: <Ollama.Combine size={28} />,
   };
 };
diff --git a/src/app/(main)/settings/llm/ProviderList/OpenAI/index.tsx b/src/app/(main)/settings/llm/ProviderList/OpenAI/index.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import { OpenAI } from '@lobehub/icons';
-
 import { OpenAIProviderCard } from '@/config/modelProviders';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
@@ -15,6 +13,5 @@ export const useOpenAIProvider = (): ProviderItem => {
       placeholder: 'https://api.openai.com/v1',
     },
     showApiKey: showOpenAIApiKey,
-    title: <OpenAI.Combine size={24} />,
   };
 };
diff --git a/src/app/(main)/settings/llm/ProviderList/providers.tsx b/src/app/(main)/settings/llm/ProviderList/providers.tsx
@@ -1,31 +1,4 @@
-import {
-  Ai360,
-  AiMass,
-  Anthropic,
-  Baichuan,
-  Claude,
-  DeepSeek,
-  Gemini,
-  Google,
-  Groq,
-  Minimax,
-  Mistral,
-  Moonshot,
-  Novita,
-  OpenRouter,
-  Perplexity,
-  SiliconCloud,
-  Stepfun,
-  Together,
-  Tongyi,
-  ZeroOne,
-  Zhipu,
-} from '@lobehub/icons';
-import { Divider } from 'antd';
-import { useTheme } from 'antd-style';
 import { useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import urlJoin from 'url-join';
 
 import {
   Ai360ProviderCard,
@@ -55,157 +28,38 @@ import { useBedrockProvider } from './Bedrock';
 import { useOllamaProvider } from './Ollama';
 import { useOpenAIProvider } from './OpenAI';
 
-const BASE_DOC_URL = 'https://lobehub.com/docs/usage/providers';
-
-const AnthropicBrand = () => {
-  const { isDarkMode } = useTheme();
-  return <Anthropic.Text color={isDarkMode ? undefined : Claude.colorPrimary} size={15} />;
-};
-
-const MoonshotBrand = () => {
-  const theme = useTheme();
-  return (
-    <Moonshot.Combine
-      color={theme.isDarkMode ? theme.colorText : Moonshot.colorPrimary}
-      size={22}
-    />
-  );
-};
-
-const GroqBrand = () => {
-  const theme = useTheme();
-
-  return <Groq.Text color={theme.isDarkMode ? theme.colorText : Groq.colorPrimary} size={20} />;
-};
-
-const GoogleBrand = () => (
-  <Flexbox align={'center'} gap={8} horizontal>
-    <Google.BrandColor size={22} />
-    <Divider style={{ margin: '0 4px' }} type={'vertical'} />
-    <Gemini.Combine size={22} type={'color'} />
-  </Flexbox>
-);
-
 export const useProviderList = (): ProviderItem[] => {
-  const azureProvider = useAzureProvider();
-  const ollamaProvider = useOllamaProvider();
-  const openAIProvider = useOpenAIProvider();
-  const bedrockProvider = useBedrockProvider();
+  const AzureProvider = useAzureProvider();
+  const OllamaProvider = useOllamaProvider();
+  const OpenAIProvider = useOpenAIProvider();
+  const BedrockProvider = useBedrockProvider();
 
   return useMemo(
     () => [
-      {
-        ...openAIProvider,
-        docUrl: urlJoin(BASE_DOC_URL, 'openai'),
-      },
-      {
-        ...ollamaProvider,
-        docUrl: urlJoin(BASE_DOC_URL, 'ollama'),
-      },
-      {
-        ...azureProvider,
-        docUrl: urlJoin(BASE_DOC_URL, 'azure'),
-      },
-      {
-        ...GoogleProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'gemini'),
-        title: <GoogleBrand />,
-      },
-      {
-        ...AnthropicProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'anthropic'),
-        title: <AnthropicBrand />,
-      },
-      {
-        ...bedrockProvider,
-        docUrl: urlJoin(BASE_DOC_URL, 'bedrock'),
-      },
-      {
-        ...GroqProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'groq'),
-        title: <GroqBrand />,
-      },
-      {
-        ...OpenRouterProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'openrouter'),
-        title: <OpenRouter.Combine iconProps={{ color: OpenRouter.colorPrimary }} size={20} />,
-      },
-      {
-        ...NovitaProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'novita'),
-        title: <Novita.Combine size={20} type={'color'} />,
-      },
-      {
-        ...TogetherAIProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'togetherai'),
-        title: <Together.Combine size={26} type={'color'} />,
-      },
-      {
-        ...QwenProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'qwen'),
-        title: <Tongyi.Combine extra={'千问'} size={26} type={'color'} />,
-      },
-      {
-        ...DeepSeekProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'deepseek'),
-        title: <DeepSeek.Combine size={28} type={'color'} />,
-      },
-      {
-        ...MinimaxProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'minimax'),
-        title: <Minimax.Combine size={32} type={'color'} />,
-      },
-      {
-        ...MistralProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'mistral'),
-        title: <Mistral.Combine size={26} type={'color'} />,
-      },
-      {
-        ...MoonshotProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'moonshot'),
-        title: <MoonshotBrand />,
-      },
-      {
-        ...PerplexityProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'perplexity'),
-        title: <Perplexity.Combine size={24} type={'color'} />,
-      },
-      {
-        ...ZhiPuProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'zhipu'),
-        title: <Zhipu.Combine size={32} type={'color'} />,
-      },
-      {
-        ...ZeroOneProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, '01ai'),
-        title: <ZeroOne.Text size={20} />,
-      },
-      {
-        ...StepfunProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'stepfun'),
-        title: <Stepfun.Combine size={20} type={'color'} />,
-      },
-      {
-        ...BaichuanProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'baichuan'),
-        title: <Baichuan.Combine size={20} type={'color'} />,
-      },
-      {
-        ...TaichuProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'taichu'),
-        title: <AiMass.Combine size={28} type={'color'} />,
-      },
-      {
-        ...Ai360ProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'ai360'),
-        title: <Ai360.Combine size={ 20 } type={ 'color' } />,
-      },
-      {
-        ...SiliconCloudProviderCard,
-        docUrl: urlJoin(BASE_DOC_URL, 'siliconcloud'),
-        title: <SiliconCloud.Combine size={20} type={'color'} />,
-      },
+      OpenAIProvider,
+      OllamaProvider,
+      AzureProvider,
+      GoogleProviderCard,
+      AnthropicProviderCard,
+      BedrockProvider,
+      GroqProviderCard,
+      OpenRouterProviderCard,
+      NovitaProviderCard,
+      TogetherAIProviderCard,
+      QwenProviderCard,
+      DeepSeekProviderCard,
+      MinimaxProviderCard,
+      MistralProviderCard,
+      MoonshotProviderCard,
+      PerplexityProviderCard,
+      ZhiPuProviderCard,
+      ZeroOneProviderCard,
+      StepfunProviderCard,
+      BaichuanProviderCard,
+      TaichuProviderCard,
+      Ai360ProviderCard,
+      SiliconCloudProviderCard,
     ],
-    [azureProvider, ollamaProvider, ollamaProvider, bedrockProvider],
+    [AzureProvider, OllamaProvider, OpenAIProvider, BedrockProvider],
   );
 };