@lobehub/chat 0.147.21 → 0.148.0

package/src/app/api/chat/agentRuntime.ts

@@ -7,25 +7,7 @@ import {
   TracePayload,
   TraceTagMap,
 } from '@/const/trace';
-import {
-  ChatStreamPayload,
-  LobeAnthropicAI,
-  LobeAzureOpenAI,
-  LobeBedrockAI,
-  LobeGoogleAI,
-  LobeGroq,
-  LobeMistralAI,
-  LobeMoonshotAI,
-  LobeOllamaAI,
-  LobeOpenAI,
-  LobeOpenRouterAI,
-  LobePerplexityAI,
-  LobeRuntimeAI,
-  LobeTogetherAI,
-  LobeZeroOneAI,
-  LobeZhipuAI,
-  ModelProvider,
-} from '@/libs/agent-runtime';
+import { AgentRuntime, ChatStreamPayload, ModelProvider } from '@/libs/agent-runtime';
 import { TraceClient } from '@/libs/traces';
 
 import apiKeyManager from './apiKeyManager';
@@ -36,272 +18,207 @@ export interface AgentChatOptions {
   trace?: TracePayload;
 }
 
-class AgentRuntime {
-  private _runtime: LobeRuntimeAI;
-
-  constructor(runtime: LobeRuntimeAI) {
-    this._runtime = runtime;
-  }
-
-  async chat(
-    payload: ChatStreamPayload,
-    { trace: tracePayload, provider, enableTrace }: AgentChatOptions,
-  ) {
-    const { messages, model, tools, ...parameters } = payload;
-
-    // if not enabled trace then just call the runtime
-    if (!enableTrace) return this._runtime.chat(payload);
-
-    // create a trace to monitor the completion
-    const traceClient = new TraceClient();
-    const trace = traceClient.createTrace({
-      id: tracePayload?.traceId,
-      input: messages,
-      metadata: { provider },
-      name: tracePayload?.traceName,
-      sessionId: `${tracePayload?.sessionId || INBOX_SESSION_ID}@${tracePayload?.topicId || 'start'}`,
-      tags: tracePayload?.tags,
-      userId: tracePayload?.userId,
-    });
-
-    const generation = trace?.generation({
-      input: messages,
-      metadata: { provider },
-      model,
-      modelParameters: parameters as any,
-      name: `Chat Completion (${provider})`,
-      startTime: new Date(),
-    });
-
-    return this._runtime.chat(payload, {
-      callback: {
-        experimental_onToolCall: async () => {
-          trace?.update({
-            tags: [...(tracePayload?.tags || []), TraceTagMap.ToolsCall],
-          });
-        },
-
-        onCompletion: async (completion) => {
-          generation?.update({
-            endTime: new Date(),
-            metadata: { provider, tools },
-            output: completion,
-          });
-
-          trace?.update({ output: completion });
-        },
-
-        onFinal: async () => {
-          await traceClient.shutdownAsync();
-        },
-
-        onStart: () => {
-          generation?.update({ completionStartTime: new Date() });
-        },
-      },
-      headers: {
-        [LOBE_CHAT_OBSERVATION_ID]: generation?.id,
-        [LOBE_CHAT_TRACE_ID]: trace?.id,
-      },
-    });
-  }
-
-  async models() {
-    return this._runtime.models?.();
-  }
-
-  static async initializeWithUserPayload(provider: string, payload: JWTPayload) {
-    let runtimeModel: LobeRuntimeAI;
-
-    switch (provider) {
-      default:
-      case 'oneapi':
-      case ModelProvider.OpenAI: {
-        runtimeModel = this.initOpenAI(payload);
-        break;
-      }
-
-      case ModelProvider.Azure: {
-        runtimeModel = this.initAzureOpenAI(payload);
-        break;
-      }
-
-      case ModelProvider.ZhiPu: {
-        runtimeModel = await this.initZhipu(payload);
-        break;
-      }
-
-      case ModelProvider.Google: {
-        runtimeModel = this.initGoogle(payload);
-        break;
-      }
-
-      case ModelProvider.Moonshot: {
-        runtimeModel = this.initMoonshot(payload);
-        break;
-      }
-
-      case ModelProvider.Bedrock: {
-        runtimeModel = this.initBedrock(payload);
-        break;
-      }
-
-      case ModelProvider.Ollama: {
-        runtimeModel = this.initOllama(payload);
-        break;
-      }
-
-      case ModelProvider.Perplexity: {
-        runtimeModel = this.initPerplexity(payload);
-        break;
-      }
-
-      case ModelProvider.Anthropic: {
-        runtimeModel = this.initAnthropic(payload);
-        break;
-      }
-
-      case ModelProvider.Mistral: {
-        runtimeModel = this.initMistral(payload);
-        break;
-      }
-
-      case ModelProvider.Groq: {
-        runtimeModel = this.initGroq(payload);
-        break;
-      }
-
-      case ModelProvider.OpenRouter: {
-        runtimeModel = this.initOpenRouter(payload);
-        break;
-      }
-
-      case ModelProvider.TogetherAI: {
-        runtimeModel = this.initTogetherAI(payload);
-        break;
-      }
-
-      case ModelProvider.ZeroOne: {
-        runtimeModel = this.initZeroOne(payload);
-        break;
+/**
+ * Retrieves the options object from environment and apikeymanager
+ * based on the provider and payload.
+ *
+ * @param provider - The model provider.
+ * @param payload - The JWT payload.
+ * @returns The options object.
+ */
+const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
+  switch (provider) {
+    default: // Use Openai options as default
+    case ModelProvider.OpenAI: {
+      const { OPENAI_API_KEY, OPENAI_PROXY_URL } = getServerConfig();
+      const openaiApiKey = payload?.apiKey || OPENAI_API_KEY;
+      const baseURL = payload?.endpoint || OPENAI_PROXY_URL;
+      const apiKey = apiKeyManager.pick(openaiApiKey);
+      return {
+        apiKey,
+        baseURL,
+      };
+    }
+    case ModelProvider.Azure: {
+      const { AZURE_API_KEY, AZURE_API_VERSION, AZURE_ENDPOINT } = getServerConfig();
+      const apiKey = apiKeyManager.pick(payload?.apiKey || AZURE_API_KEY);
+      const endpoint = payload?.endpoint || AZURE_ENDPOINT;
+      const apiVersion = payload?.azureApiVersion || AZURE_API_VERSION;
+      return {
+        apiVersion,
+        apikey: apiKey,
+        endpoint,
+      };
+    }
+    case ModelProvider.ZhiPu: {
+      const { ZHIPU_API_KEY } = getServerConfig();
+      const apiKey = apiKeyManager.pick(payload?.apiKey || ZHIPU_API_KEY);
+      return {
+        apiKey,
+      };
+    }
+    case ModelProvider.Google: {
+      const { GOOGLE_API_KEY, GOOGLE_PROXY_URL } = getServerConfig();
+      const apiKey = apiKeyManager.pick(payload?.apiKey || GOOGLE_API_KEY);
+      const baseURL = payload?.endpoint || GOOGLE_PROXY_URL;
+      return {
+        apiKey,
+        baseURL,
+      };
+    }
+    case ModelProvider.Moonshot: {
+      const { MOONSHOT_API_KEY, MOONSHOT_PROXY_URL } = getServerConfig();
+      const apiKey = apiKeyManager.pick(payload?.apiKey || MOONSHOT_API_KEY);
+      return {
+        apiKey,
+        baseURL: MOONSHOT_PROXY_URL,
+      };
+    }
+    case ModelProvider.Bedrock: {
+      const { AWS_SECRET_ACCESS_KEY, AWS_ACCESS_KEY_ID, AWS_REGION } = getServerConfig();
+      let accessKeyId: string | undefined = AWS_ACCESS_KEY_ID;
+      let accessKeySecret: string | undefined = AWS_SECRET_ACCESS_KEY;
+      let region = AWS_REGION;
+      // if the payload has the api key, use user
+      if (payload.apiKey) {
+        accessKeyId = payload?.awsAccessKeyId;
+        accessKeySecret = payload?.awsSecretAccessKey;
+        region = payload?.awsRegion;
       }
+      return {
+        accessKeyId,
+        accessKeySecret,
+        region,
+      };
     }
-
-    return new AgentRuntime(runtimeModel);
-  }
-
-  private static initOpenAI(payload: JWTPayload) {
-    const { OPENAI_API_KEY, OPENAI_PROXY_URL } = getServerConfig();
-    const openaiApiKey = payload?.apiKey || OPENAI_API_KEY;
-    const baseURL = payload?.endpoint || OPENAI_PROXY_URL;
-
-    const apiKey = apiKeyManager.pick(openaiApiKey);
-
-    return new LobeOpenAI({ apiKey, baseURL });
-  }
-
-  private static initAzureOpenAI(payload: JWTPayload) {
-    const { AZURE_API_KEY, AZURE_API_VERSION, AZURE_ENDPOINT } = getServerConfig();
-    const apiKey = apiKeyManager.pick(payload?.apiKey || AZURE_API_KEY);
-    const endpoint = payload?.endpoint || AZURE_ENDPOINT;
-    const apiVersion = payload?.azureApiVersion || AZURE_API_VERSION;
-
-    return new LobeAzureOpenAI(endpoint, apiKey, apiVersion);
-  }
-
-  private static async initZhipu(payload: JWTPayload) {
-    const { ZHIPU_API_KEY } = getServerConfig();
-    const apiKey = apiKeyManager.pick(payload?.apiKey || ZHIPU_API_KEY);
-
-    return LobeZhipuAI.fromAPIKey({ apiKey });
-  }
-
-  private static initMoonshot(payload: JWTPayload) {
-    const { MOONSHOT_API_KEY, MOONSHOT_PROXY_URL } = getServerConfig();
-    const apiKey = apiKeyManager.pick(payload?.apiKey || MOONSHOT_API_KEY);
-
-    return new LobeMoonshotAI({ apiKey, baseURL: MOONSHOT_PROXY_URL });
-  }
-
-  private static initGoogle(payload: JWTPayload) {
-    const { GOOGLE_API_KEY, GOOGLE_PROXY_URL } = getServerConfig();
-    const apiKey = apiKeyManager.pick(payload?.apiKey || GOOGLE_API_KEY);
-    const baseURL = payload?.endpoint || GOOGLE_PROXY_URL;
-
-    return new LobeGoogleAI({ apiKey, baseURL });
-  }
-
-  private static initBedrock(payload: JWTPayload) {
-    const { AWS_SECRET_ACCESS_KEY, AWS_ACCESS_KEY_ID, AWS_REGION } = getServerConfig();
-
-    let accessKeyId: string | undefined = AWS_ACCESS_KEY_ID;
-    let accessKeySecret: string | undefined = AWS_SECRET_ACCESS_KEY;
-    let region = AWS_REGION;
-    // if the payload has the api key, use user
-    if (payload.apiKey) {
-      accessKeyId = payload?.awsAccessKeyId;
-      accessKeySecret = payload?.awsSecretAccessKey;
-      region = payload?.awsRegion;
+    case ModelProvider.Ollama: {
+      const { OLLAMA_PROXY_URL } = getServerConfig();
+      const baseURL = payload?.endpoint || OLLAMA_PROXY_URL;
+      return {
+        baseURL,
+      };
+    }
+    case ModelProvider.Perplexity: {
+      const { PERPLEXITY_API_KEY } = getServerConfig();
+      const apiKey = apiKeyManager.pick(payload?.apiKey || PERPLEXITY_API_KEY);
+      return {
+        apiKey,
+      };
+    }
+    case ModelProvider.Anthropic: {
+      const { ANTHROPIC_API_KEY, ANTHROPIC_PROXY_URL } = getServerConfig();
+      const apiKey = apiKeyManager.pick(payload?.apiKey || ANTHROPIC_API_KEY);
+      const baseURL = payload?.endpoint || ANTHROPIC_PROXY_URL;
+      return {
+        apiKey,
+        baseURL,
+      };
+    }
+    case ModelProvider.Mistral: {
+      const { MISTRAL_API_KEY } = getServerConfig();
+      const apiKey = apiKeyManager.pick(payload?.apiKey || MISTRAL_API_KEY);
+      return {
+        apiKey,
+      };
+    }
+    case ModelProvider.Groq: {
+      const { GROQ_API_KEY } = getServerConfig();
+      const apiKey = apiKeyManager.pick(payload?.apiKey || GROQ_API_KEY);
+      return {
+        apiKey,
+      };
+    }
+    case ModelProvider.OpenRouter: {
+      const { OPENROUTER_API_KEY } = getServerConfig();
+      const apiKey = apiKeyManager.pick(payload?.apiKey || OPENROUTER_API_KEY);
+      return {
+        apiKey,
+      };
+    }
+    case ModelProvider.TogetherAI: {
+      const { TOGETHERAI_API_KEY } = getServerConfig();
+      const apiKey = apiKeyManager.pick(payload?.apiKey || TOGETHERAI_API_KEY);
+      return {
+        apiKey,
+      };
+    }
+    case ModelProvider.ZeroOne: {
+      const { ZEROONE_API_KEY } = getServerConfig();
+      const apiKey = apiKeyManager.pick(payload?.apiKey || ZEROONE_API_KEY);
+      return {
+        apiKey,
+      };
     }
-
-    return new LobeBedrockAI({ accessKeyId, accessKeySecret, region });
-  }
-
-  private static initOllama(payload: JWTPayload) {
-    const { OLLAMA_PROXY_URL } = getServerConfig();
-    const baseURL = payload?.endpoint || OLLAMA_PROXY_URL;
-
-    return new LobeOllamaAI({ baseURL });
-  }
-
-  private static initPerplexity(payload: JWTPayload) {
-    const { PERPLEXITY_API_KEY } = getServerConfig();
-    const apiKey = apiKeyManager.pick(payload?.apiKey || PERPLEXITY_API_KEY);
-
-    return new LobePerplexityAI({ apiKey });
-  }
-
-  private static initAnthropic(payload: JWTPayload) {
-    const { ANTHROPIC_API_KEY, ANTHROPIC_PROXY_URL } = getServerConfig();
-    const apiKey = apiKeyManager.pick(payload?.apiKey || ANTHROPIC_API_KEY);
-    const baseURL = payload?.endpoint || ANTHROPIC_PROXY_URL;
-    return new LobeAnthropicAI({ apiKey, baseURL });
-  }
-
-  private static initMistral(payload: JWTPayload) {
-    const { MISTRAL_API_KEY } = getServerConfig();
-    const apiKey = apiKeyManager.pick(payload?.apiKey || MISTRAL_API_KEY);
-
-    return new LobeMistralAI({ apiKey });
-  }
-
-  private static initGroq(payload: JWTPayload) {
-    const { GROQ_API_KEY } = getServerConfig();
-    const apiKey = apiKeyManager.pick(payload?.apiKey || GROQ_API_KEY);
-
-    return new LobeGroq({ apiKey });
-  }
-
-  private static initOpenRouter(payload: JWTPayload) {
-    const { OPENROUTER_API_KEY } = getServerConfig();
-    const apiKey = apiKeyManager.pick(payload?.apiKey || OPENROUTER_API_KEY);
-
-    return new LobeOpenRouterAI({ apiKey });
   }
+};
+
+/**
+ * Initializes the agent runtime with the user payload in backend
+ * @param provider - The provider name.
+ * @param payload - The JWT payload.
+ * @returns A promise that resolves when the agent runtime is initialized.
+ */
+export const initAgentRuntimeWithUserPayload = (provider: string, payload: JWTPayload) => {
+  return AgentRuntime.initializeWithProviderOptions(provider, {
+    [provider]: getLlmOptionsFromPayload(provider, payload),
+  });
+};
+
+export const createTraceOptions = (
+  payload: ChatStreamPayload,
+  { trace: tracePayload, provider }: AgentChatOptions,
+) => {
+  const { messages, model, tools, ...parameters } = payload;
+  // create a trace to monitor the completion
+  const traceClient = new TraceClient();
+  const trace = traceClient.createTrace({
+    id: tracePayload?.traceId,
+    input: messages,
+    metadata: { provider },
+    name: tracePayload?.traceName,
+    sessionId: `${tracePayload?.sessionId || INBOX_SESSION_ID}@${tracePayload?.topicId || 'start'}`,
+    tags: tracePayload?.tags,
+    userId: tracePayload?.userId,
+  });
+
+  const generation = trace?.generation({
+    input: messages,
+    metadata: { provider },
+    model,
+    modelParameters: parameters as any,
+    name: `Chat Completion (${provider})`,
+    startTime: new Date(),
+  });
+
+  return {
+    callback: {
+      experimental_onToolCall: async () => {
+        trace?.update({
+          tags: [...(tracePayload?.tags || []), TraceTagMap.ToolsCall],
+        });
+      },
 
-  private static initTogetherAI(payload: JWTPayload) {
-    const { TOGETHERAI_API_KEY } = getServerConfig();
-    const apiKey = apiKeyManager.pick(payload?.apiKey || TOGETHERAI_API_KEY);
-
-    return new LobeTogetherAI({ apiKey });
-  }
+      onCompletion: async (completion: string) => {
+        generation?.update({
+          endTime: new Date(),
+          metadata: { provider, tools },
+          output: completion,
+        });
 
-  private static initZeroOne(payload: JWTPayload) {
-    const { ZEROONE_API_KEY } = getServerConfig();
-    const apiKey = apiKeyManager.pick(payload?.apiKey || ZEROONE_API_KEY);
+        trace?.update({ output: completion });
+      },
 
-    return new LobeZeroOneAI({ apiKey });
-  }
-}
+      onFinal: async () => {
+        await traceClient.shutdownAsync();
+      },
 
-export default AgentRuntime;
+      onStart: () => {
+        generation?.update({ completionStartTime: new Date() });
+      },
+    },
+    headers: {
+      [LOBE_CHAT_OBSERVATION_ID]: generation?.id,
+      [LOBE_CHAT_TRACE_ID]: trace?.id,
+    },
+  };
+};

package/src/app/api/chat/models/[provider]/route.ts

@@ -5,7 +5,7 @@ import { createErrorResponse } from '@/app/api/errorResponse';
 import { ChatCompletionErrorPayload, ModelProvider } from '@/libs/agent-runtime';
 import { ChatErrorType } from '@/types/fetch';
 
-import AgentRuntime from '../../agentRuntime';
+import { initAgentRuntimeWithUserPayload } from '../../agentRuntime';
 import { checkAuth } from '../../auth';
 
 export const runtime = 'edge';
@@ -21,7 +21,7 @@ export const GET = checkAuth(async (req, { params, jwtPayload }) => {
   try {
     const hasDefaultApiKey = jwtPayload.apiKey || 'dont-need-api-key-for-model-list';
 
-    const agentRuntime = await AgentRuntime.initializeWithUserPayload(provider, {
+    const agentRuntime = await initAgentRuntimeWithUserPayload(provider, {
       ...jwtPayload,
       apiKey: noNeedAPIKey(provider) ? hasDefaultApiKey : jwtPayload.apiKey,
     });

package/src/app/chat/features/TopicListContent/Topic/TopicContent.tsx

@@ -114,8 +114,8 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
           modal.confirm({
             centered: true,
             okButtonProps: { danger: true },
-            onOk: () => {
-              removeTopic(id);
+            onOk: async () => {
+              await removeTopic(id);
             },
             title: t('topic.confirmRemoveTopic', { ns: 'chat' }),
           });

package/src/app/metadata.ts

@@ -22,11 +22,9 @@ const metadata: Metadata = {
   },
   description,
   icons: {
-    apple:
-      'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/apple-touch-icon.png',
-    icon: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon-32x32.png',
-    shortcut:
-      'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon.ico',
+    apple:'icons/apple-touch-icon.png',
+    icon:'favicon.ico',
+    shortcut:'favicon-32x32.ico',
   },
   manifest: noManifest ? undefined : '/manifest.json',
   metadataBase: new URL(SITE_URL),

package/src/app/settings/llm/components/ProviderConfig/index.tsx

@@ -51,10 +51,18 @@ const ProviderConfig = memo<ProviderConfigProps>(
     const { t } = useTranslation('setting');
     const { t: modelT } = useTranslation('modelProvider');
     const [form] = AntForm.useForm();
-    const [toggleProviderEnabled, setSettings, enabled] = useGlobalStore((s) => [
+    const [
+      toggleProviderEnabled,
+      setSettings,
+      enabled,
+      isFetchOnClient,
+      isProviderEndpointNotEmpty,
+    ] = useGlobalStore((s) => [
       s.toggleProviderEnabled,
       s.setSettings,
       modelConfigSelectors.isProviderEnabled(provider)(s),
+      modelConfigSelectors.isProviderFetchOnClient(provider)(s),
+      modelConfigSelectors.isProviderEndpointNotEmpty(provider)(s),
     ]);
 
     useSyncSettings(form);
@@ -99,6 +107,20 @@ const ProviderConfig = memo<ProviderConfigProps>(
         label: t('llm.modelList.title'),
         name: [LLMProviderConfigKey, provider, LLMProviderModelListKey],
       },
+      showEndpoint &&
+        isProviderEndpointNotEmpty && {
+          children: (
+            <Switch
+              onChange={(enabled) => {
+                setSettings({ [LLMProviderConfigKey]: { [provider]: { fetchOnClient: enabled } } });
+              }}
+              value={isFetchOnClient}
+            />
+          ),
+          desc: t('llm.fetchOnClient.desc'),
+          label: t('llm.fetchOnClient.title'),
+          minWidth: undefined,
+        },
       checkerItem ?? {
         children: <Checker model={checkModel!} provider={provider} />,
         desc: t('llm.checker.desc'),

package/src/app/settings/llm/index.tsx

@@ -23,7 +23,7 @@ import TogetherAI from './TogetherAI';
 import ZeroOne from './ZeroOne';
 import Zhipu from './Zhipu';
 
-export default memo<{ showOllama: boolean }>(({ showOllama }) => {
+export default memo(() => {
   const { t } = useTranslation('setting');
 
   return (
@@ -31,7 +31,7 @@ export default memo<{ showOllama: boolean }>(({ showOllama }) => {
       <PageTitle title={t('tab.llm')} />
       <OpenAI />
       <Azure />
-      {showOllama && <Ollama />}
+      <Ollama />
       <Google />
       <Anthropic />
       <Bedrock />

package/src/app/settings/llm/page.tsx

@@ -1,9 +1,5 @@
-import { getServerConfig } from '@/config/server';
-
 import Page from './index';
 
 export default () => {
-  const { ENABLE_OLLAMA } = getServerConfig();
-
-  return <Page showOllama={ENABLE_OLLAMA} />;
+  return <Page />;
 };

package/src/features/ChatInput/Topic/index.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import HotKeys from '@/components/HotKeys';
 import { PREFIX_KEY, SAVE_TOPIC_KEY } from '@/const/hotkeys';
+import { useActionSWR } from '@/libs/swr';
 import { useChatStore } from '@/store/chat';
 
 const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
@@ -16,20 +17,23 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
     s.openNewTopicOrSaveTopic,
   ]);
 
+  const { mutate, isValidating } = useActionSWR('openNewTopicOrSaveTopic', openNewTopicOrSaveTopic);
+
   const icon = hasTopic ? LucideMessageSquarePlus : LucideGalleryVerticalEnd;
   const Render = mobile ? ActionIcon : Button;
   const iconRender: any = mobile ? icon : <Icon icon={icon} />;
   const desc = t(hasTopic ? 'topic.openNewTopic' : 'topic.saveCurrentMessages');
 
   const hotkeys = [PREFIX_KEY, SAVE_TOPIC_KEY].join('+');
-  useHotkeys(hotkeys, openNewTopicOrSaveTopic, {
+
+  useHotkeys(hotkeys, () => mutate(), {
     enableOnFormTags: true,
     preventDefault: true,
   });
 
   return (
     <Tooltip title={<HotKeys desc={desc} keys={hotkeys} />}>
-      <Render aria-label={desc} icon={iconRender} onClick={openNewTopicOrSaveTopic} />
+      <Render aria-label={desc} icon={iconRender} loading={isValidating} onClick={() => mutate()} />
     </Tooltip>
   );
 });