🚧 wip: wip for model select

lobehub · Jan 31, 2024 · 509b064 · 509b064
1 parent 7b024c3
commit 509b064
Show file tree

Hide file tree

Showing 29 changed files with 259 additions and 162 deletions.
diff --git a/.env.example b/.env.example
@@ -33,6 +33,12 @@ OPENAI_API_KEY=sk-xxxxxxxxx
 # Azure's API version, follows the YYYY-MM-DD format
 # AZURE_API_VERSION=2023-08-01-preview
 
+########################################
+############ ZhiPu AI Service ##########
+########################################
+
+# ZHIPU_API_KEY=xxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxx
+
 ########################################
 ############ Market Service ############
 ########################################

diff --git a/src/app/api/chat/[provider]/route.ts b/src/app/api/chat/[provider]/route.ts
@@ -1,5 +1,5 @@
 import { getPreferredRegion } from '@/app/api/config';
-import { createErrorResponse } from '@/app/api/openai/errorResponse';
+import { createErrorResponse } from '@/app/api/errorResponse';
 import {
   CompletionError,
   LobeOpenAI,

diff --git a/src/app/api/config/route.ts b/src/app/api/config/route.ts
@@ -7,10 +7,11 @@ export const runtime = 'edge';
  * get Server config to client
  */
 export const GET = async () => {
-  const { CUSTOM_MODELS } = getServerConfig();
+  const { CUSTOM_MODELS, ENABLED_ZHIPU } = getServerConfig();
 
   const config: GlobalServerConfig = {
     customModelName: CUSTOM_MODELS,
+    languageModel: { zhipu: { enabled: ENABLED_ZHIPU } },
   };
 
   return new Response(JSON.stringify(config));

diff --git a/src/app/chat/(desktop)/features/ChatHeader.tsx b/src/app/chat/(desktop)/features/ChatHeader.tsx
@@ -22,17 +22,27 @@ const Left = memo(() => {
 
   const router = useRouter();
 
-  const [init, isInbox, title, description, avatar, backgroundColor, model, plugins] =
-    useSessionStore((s) => [
-      sessionSelectors.isSomeSessionActive(s),
-      sessionSelectors.isInboxSession(s),
-      agentSelectors.currentAgentTitle(s),
-      agentSelectors.currentAgentDescription(s),
-      agentSelectors.currentAgentAvatar(s),
-      agentSelectors.currentAgentBackgroundColor(s),
-      agentSelectors.currentAgentModel(s),
-      agentSelectors.currentAgentPlugins(s),
-    ]);
+  const [
+    init,
+    isInbox,
+    title,
+    description,
+    avatar,
+    backgroundColor,
+    model,
+    modelProvider,
+    plugins,
+  ] = useSessionStore((s) => [
+    sessionSelectors.isSomeSessionActive(s),
+    sessionSelectors.isInboxSession(s),
+    agentSelectors.currentAgentTitle(s),
+    agentSelectors.currentAgentDescription(s),
+    agentSelectors.currentAgentAvatar(s),
+    agentSelectors.currentAgentBackgroundColor(s),
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentModelProvider(s),
+    agentSelectors.currentAgentPlugins(s),
+  ]);
 
   const displayTitle = isInbox ? t('inbox.title') : title;
   const displayDesc = isInbox ? t('inbox.desc') : description;
@@ -63,7 +73,7 @@ const Left = memo(() => {
         desc={displayDesc}
         tag={
           <>
-            <ModelTag name={model} />
+            <ModelTag name={model} provider={modelProvider} />
             {plugins?.length > 0 && <PluginTag plugins={plugins} />}
           </>
         }

diff --git a/src/app/chat/features/ChatHeader/ShareButton/Preview.tsx b/src/app/chat/features/ChatHeader/ShareButton/Preview.tsx
@@ -15,16 +15,25 @@ import { FieldType } from './type';
 
 const Preview = memo<FieldType & { title?: string }>(
   ({ title, withSystemRole, withBackground, withFooter }) => {
-    const [isInbox, description, avatar, backgroundColor, model, plugins, systemRole] =
-      useSessionStore((s) => [
-        sessionSelectors.isInboxSession(s),
-        agentSelectors.currentAgentDescription(s),
-        agentSelectors.currentAgentAvatar(s),
-        agentSelectors.currentAgentBackgroundColor(s),
-        agentSelectors.currentAgentModel(s),
-        agentSelectors.currentAgentPlugins(s),
-        agentSelectors.currentAgentSystemRole(s),
-      ]);
+    const [
+      isInbox,
+      description,
+      avatar,
+      backgroundColor,
+      model,
+      modelProvider,
+      plugins,
+      systemRole,
+    ] = useSessionStore((s) => [
+      sessionSelectors.isInboxSession(s),
+      agentSelectors.currentAgentDescription(s),
+      agentSelectors.currentAgentAvatar(s),
+      agentSelectors.currentAgentBackgroundColor(s),
+      agentSelectors.currentAgentModel(s),
+      agentSelectors.currentAgentModelProvider(s),
+      agentSelectors.currentAgentPlugins(s),
+      agentSelectors.currentAgentSystemRole(s),
+    ]);
     const { t } = useTranslation('chat');
     const { styles } = useStyles(withBackground);
 
@@ -42,7 +51,7 @@ const Preview = memo<FieldType & { title?: string }>(
                   desc={displayDesc}
                   tag={
                     <>
-                      <ModelTag name={model} />
+                      <ModelTag name={model} provider={modelProvider} />
                       {plugins?.length > 0 && <PluginTag plugins={plugins} />}
                     </>
                   }

diff --git a/src/app/chat/features/SessionListContent/List/Item/index.tsx b/src/app/chat/features/SessionListContent/List/Item/index.tsx
@@ -26,24 +26,35 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [active] = useSessionStore((s) => [s.activeId === id]);
   const [loading] = useChatStore((s) => [!!s.chatLoadingId && id === s.activeId]);
 
-  const [pin, title, description, systemRole, avatar, avatarBackground, updateAt, model, group] =
-    useSessionStore((s) => {
-      const session = sessionSelectors.getSessionById(id)(s);
-      const meta = session.meta;
-      const systemRole = session.config.systemRole;
+  const [
+    pin,
+    title,
+    description,
+    systemRole,
+    avatar,
+    avatarBackground,
+    updateAt,
+    model,
+    provider,
+    group,
+  ] = useSessionStore((s) => {
+    const session = sessionSelectors.getSessionById(id)(s);
+    const meta = session.meta;
+    const systemRole = session.config.systemRole;
 
-      return [
-        sessionHelpers.getSessionPinned(session),
-        agentSelectors.getTitle(meta),
-        agentSelectors.getDescription(meta),
-        systemRole,
-        agentSelectors.getAvatar(meta),
-        meta.backgroundColor,
-        session?.updatedAt,
-        session.config.model,
-        session?.group,
-      ];
-    });
+    return [
+      sessionHelpers.getSessionPinned(session),
+      agentSelectors.getTitle(meta),
+      agentSelectors.getDescription(meta),
+      systemRole,
+      agentSelectors.getAvatar(meta),
+      meta.backgroundColor,
+      session?.updatedAt,
+      session.config.model,
+      session.config.provider,
+      session?.group,
+    ];
+  });
 
   const showModel = model !== defaultModel;
 
@@ -63,7 +74,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
     () =>
       !showModel ? undefined : (
         <Flexbox gap={4} horizontal style={{ flexWrap: 'wrap' }}>
-          {showModel && <ModelTag name={model} />}
+          {showModel && <ModelTag name={model} provider={provider} />}
         </Flexbox>
       ),
     [showModel, model],

diff --git a/src/app/settings/llm/Zhipu/index.tsx b/src/app/settings/llm/Zhipu/index.tsx
@@ -18,7 +18,7 @@ const LLM = memo(() => {
   const [form] = AntForm.useForm();
 
   const [enabledZhipu, setSettings] = useGlobalStore((s) => [
-    modelProviderSelectors.enabledZhipu(s),
+    modelProviderSelectors.enableZhipu(s),
     s.setSettings,
   ]);
 
@@ -28,7 +28,7 @@ const LLM = memo(() => {
     form.setFieldsValue(settings);
   }, []);
 
-  const openAI: ItemGroup = {
+  const model: ItemGroup = {
     children: [
       {
         children: (
@@ -51,8 +51,8 @@ const LLM = memo(() => {
     defaultActive: enabledZhipu,
     extra: (
       <Switch
-        onChange={(e) => {
-          console.log(e);
+        onChange={(enabled) => {
+          setSettings({ languageModel: { zhipu: { enabled } } });
         }}
         value={enabledZhipu}
       />
@@ -62,12 +62,7 @@ const LLM = memo(() => {
   };
 
   return (
-    <Form
-      form={form}
-      items={[openAI]}
-      onValuesChange={debounce(setSettings, 100)}
-      {...FORM_STYLE}
-    />
+    <Form form={form} items={[model]} onValuesChange={debounce(setSettings, 100)} {...FORM_STYLE} />
   );
 });
 

diff --git a/src/components/ModelProviderIcons/index.ts b/src/components/ModelProviderIcons/index.ts
diff --git a/src/components/ModelProviderIcons/index.tsx b/src/components/ModelProviderIcons/index.tsx
@@ -0,0 +1,47 @@
+import { SiAmazonaws, SiOpenai } from '@icons-pack/react-simple-icons';
+import { memo } from 'react';
+
+import { ModelProvider } from '@/libs/agent-runtime';
+
+import { Anthropic } from './Anthropic';
+import { ChatGLM } from './ChatGLM';
+import { GoogleDeepMind } from './GoogleDeepMind';
+import { Mistral } from './Mistral';
+import { Tongyi } from './Tongyi';
+
+interface ModelProviderIconProps {
+  provider?: string;
+}
+
+const ModelProviderIcon = memo<ModelProviderIconProps>(({ provider }) => {
+  switch (provider) {
+    case ModelProvider.Anthropic: {
+      return <Anthropic size={12} />;
+    }
+    case ModelProvider.Tongyi: {
+      return <Tongyi size={12} />;
+    }
+    case ModelProvider.Mistral: {
+      return <Mistral size={11} />;
+    }
+    case ModelProvider.Bedrock: {
+      return <SiAmazonaws size={18} />;
+    }
+
+    case 'zhipu':
+    case ModelProvider.ChatGLM: {
+      return <ChatGLM size={18} />;
+    }
+
+    case ModelProvider.Google: {
+      return <GoogleDeepMind size={12} />;
+    }
+
+    default:
+    case ModelProvider.OpenAI: {
+      return <SiOpenai size={12} />;
+    }
+  }
+});
+
+export default ModelProviderIcon;
diff --git a/src/components/ModelTag/index.tsx b/src/components/ModelTag/index.tsx
@@ -1,50 +1,14 @@
-import { SiAmazonaws, SiOpenai } from '@icons-pack/react-simple-icons';
 import { Tag } from '@lobehub/ui';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
-import {
-  Anthropic,
-  ChatGLM,
-  GoogleDeepMind,
-  Mistral,
-  Tongyi,
-} from '@/components/ModelProviderIcons';
-import { ModelProvider } from '@/libs/agent-runtime';
+import ModelProviderIcon from '@/components/ModelProviderIcons';
 
 interface ModelTagProps {
   name: string;
-  provider?: ModelProvider;
+  provider?: string;
 }
 const ModelTag = memo<ModelTagProps>(({ provider, name }) => {
-  const icon = useMemo(() => {
-    switch (provider) {
-      case ModelProvider.Anthropic: {
-        return <Anthropic size={12} />;
-      }
-      case ModelProvider.Tongyi: {
-        return <Tongyi size={12} />;
-      }
-      case ModelProvider.Mistral: {
-        return <Mistral size={11} />;
-      }
-      case ModelProvider.Bedrock: {
-        return <SiAmazonaws size={18} />;
-      }
-      case ModelProvider.ChatGLM: {
-        return <ChatGLM size={18} />;
-      }
-      case ModelProvider.Google: {
-        return <GoogleDeepMind size={12} />;
-      }
-
-      default:
-      case ModelProvider.OpenAI: {
-        return <SiOpenai size={12} />;
-      }
-    }
-  }, [provider]);
-
-  return <Tag icon={icon}>{name}</Tag>;
+  return <Tag icon={<ModelProviderIcon provider={provider} />}>{name}</Tag>;
 });
 
 export default ModelTag;
diff --git a/src/config/modelProviders.ts b/src/config/modelProviders.ts
@@ -1,24 +1,6 @@
-interface ChatModelCard {
-  description?: string;
-  displayName?: string;
-  /**
-   * 是否支持 Function Call
-   */
-  functionCall?: boolean;
-  id: string;
-  tokens?: number;
-  /**
-   * 是否支持视觉识别
-   */
-  vision?: boolean;
-}
+import { ModelProviderCard } from '@/types/llm';
 
-interface ModelProvider {
-  chatModels: ChatModelCard[];
-  name: string;
-}
-
-export const ZhiPuModelCard: ModelProvider = {
+export const ZhiPuModelCard: ModelProviderCard = {
   chatModels: [
     {
       description: '最新的 GLM-4 、最大支持 128k 上下文、支持 Function Call 、Retreival',
@@ -41,10 +23,10 @@ export const ZhiPuModelCard: ModelProvider = {
       tokens: 128_000,
     },
   ],
-  name: 'zhipu',
+  id: 'zhipu',
 };
 
-export const OpenAIModelCard: ModelProvider = {
+export const OpenAIModelCard: ModelProviderCard = {
   chatModels: [
     {
       description: 'GPT 3.5 Turbo，适用于各种文本生成和理解任务',
@@ -86,5 +68,5 @@ export const OpenAIModelCard: ModelProvider = {
       vision: true, // 支持视觉任务
     },
   ],
-  name: 'openai',
+  id: 'openai',
 };
diff --git a/src/config/server.ts b/src/config/server.ts
@@ -89,5 +89,7 @@ export const getServerConfig = () => {
       : 'https://chat-plugins.lobehub.com',
 
     PLUGIN_SETTINGS: process.env.PLUGIN_SETTINGS,
+
+    DEBUG_CHAT_COMPLETION: process.env.DEBUG_CHAT_COMPLETION === '1',
   };
 };