@lobehub/chat 1.110.0 → 1.110.2

package/src/app/[variants]/(main)/settings/provider/features/ModelList/index.tsx

@@ -1,7 +1,18 @@
 'use client';
 
+import { Icon, Tabs } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
-import { Suspense, memo } from 'react';
+import isEqual from 'fast-deep-equal';
+import {
+  AudioLines,
+  BoltIcon,
+  Grid3x3Icon,
+  ImageIcon,
+  MessageSquareTextIcon,
+  MicIcon,
+} from 'lucide-react';
+import { Suspense, memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useIsMobile } from '@/hooks/useIsMobile';
@@ -20,14 +31,92 @@ interface ContentProps {
 }
 
 const Content = memo<ContentProps>(({ id }) => {
+  const { t } = useTranslation('modelProvider');
+  const [activeTab, setActiveTab] = useState('all');
+
   const [isSearching, isEmpty, useFetchAiProviderModels] = useAiInfraStore((s) => [
     !!s.modelSearchKeyword,
     aiModelSelectors.isEmptyAiProviderModelList(s),
     s.useFetchAiProviderModels,
   ]);
 
+  const allModels = useAiInfraStore(aiModelSelectors.filteredAiProviderModelList, isEqual);
+
   const { isLoading } = useFetchAiProviderModels(id);
 
+  // Count models by type (for all models, not just enabled)
+  const modelCounts = useMemo(() => {
+    const counts = {
+      all: allModels.length,
+      chat: 0,
+      embedding: 0,
+      image: 0,
+      stt: 0,
+      tts: 0,
+    };
+
+    allModels.forEach((model) => {
+      const type = model.type;
+      if (type && Object.prototype.hasOwnProperty.call(counts, type)) {
+        counts[type as keyof typeof counts]++;
+      }
+    });
+
+    return counts;
+  }, [allModels]);
+
+  // Tab definitions with counts (only show tabs with models > 0, except 'all' tab)
+  const tabs = useMemo(() => {
+    const formatTabLabel = (baseLabel: string, count: number) =>
+      count > 0 ? `${baseLabel} (${count})` : baseLabel;
+
+    const allTabs = [
+      {
+        count: modelCounts.all,
+        icon: <Icon icon={Grid3x3Icon} size={16} />,
+        key: 'all',
+        label: formatTabLabel(t('providerModels.tabs.all'), modelCounts.all),
+      },
+      {
+        count: modelCounts.chat,
+        icon: <Icon icon={MessageSquareTextIcon} size={16} />,
+        key: 'chat',
+        label: formatTabLabel(t('providerModels.tabs.chat'), modelCounts.chat),
+      },
+      {
+        count: modelCounts.image,
+        icon: <Icon icon={ImageIcon} size={16} />,
+        key: 'image',
+        label: formatTabLabel(t('providerModels.tabs.image'), modelCounts.image),
+      },
+      {
+        count: modelCounts.embedding,
+        icon: <Icon icon={BoltIcon} size={16} />,
+        key: 'embedding',
+        label: formatTabLabel(t('providerModels.tabs.embedding'), modelCounts.embedding),
+      },
+      {
+        count: modelCounts.stt,
+        icon: <Icon icon={MicIcon} size={16} />,
+        key: 'stt',
+        label: formatTabLabel(t('providerModels.tabs.stt'), modelCounts.stt),
+      },
+      {
+        count: modelCounts.tts,
+        icon: <Icon icon={AudioLines} size={16} />,
+        key: 'tts',
+        label: formatTabLabel(t('providerModels.tabs.tts'), modelCounts.tts),
+      },
+    ];
+
+    // Only show tabs that have models (count > 0), but always show 'all' tab
+    return allTabs.filter((tab) => tab.key === 'all' || tab.count > 0);
+  }, [modelCounts]);
+
+  // Ensure active tab is available, fallback to 'all' if current tab is hidden
+  const availableTabKeys = tabs.map((tab) => tab.key);
+  const currentActiveTab = availableTabKeys.includes(activeTab) ? activeTab : 'all';
+
   if (isLoading) return <SkeletonList />;
 
   if (isSearching) return <SearchResult />;
@@ -36,8 +125,15 @@ const Content = memo<ContentProps>(({ id }) => {
     <EmptyModels provider={id} />
   ) : (
     <Flexbox>
-      <EnabledModelList />
-      <DisabledModels />
+      <Tabs
+        activeKey={currentActiveTab}
+        items={tabs}
+        onChange={setActiveTab}
+        size="small"
+        style={{ marginBottom: 12 }}
+      />
+      <EnabledModelList activeTab={currentActiveTab} />
+      <DisabledModels activeTab={currentActiveTab} />
     </Flexbox>
   );
 });

package/src/config/modelProviders/ai302.ts

@@ -2,6 +2,7 @@ import { ModelProviderCard } from '@/types/llm';
 
 // ref: https://302.ai/pricing/
 const Ai302: ModelProviderCard = {
+  apiKeyUrl: 'https://lobe.li/Oizw5sN',
   chatModels: [
     {
       contextWindowTokens: 32_000,

package/src/config/modelProviders/openai.ts

@@ -2,6 +2,7 @@ import { ModelProviderCard } from '@/types/llm';
 
 // ref: https://platform.openai.com/docs/deprecations
 const OpenAI: ModelProviderCard = {
+  apiKeyUrl: 'https://platform.openai.com/api-keys?utm_source=lobehub',
   chatModels: [
     {
       contextWindowTokens: 1_047_576,

package/src/features/ChatInput/Desktop/InputArea/index.tsx

@@ -5,6 +5,7 @@ import { RefObject, memo, useEffect, useRef } from 'react';
 import { useHotkeysContext } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
+import { isDesktop } from '@/const/version';
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
 import { HotkeyEnum } from '@/types/hotkey';
@@ -86,6 +87,19 @@ const InputArea = memo<InputAreaProps>(({ onSend, value, loading, onChange }) =>
         onCompositionStart={() => {
           isChineseInput.current = true;
         }}
+        onContextMenu={async (e) => {
+          if (isDesktop) {
+            e.preventDefault();
+            const textArea = ref.current?.resizableTextArea?.textArea;
+            const hasSelection = textArea && textArea.selectionStart !== textArea.selectionEnd;
+            const { electronSystemService } = await import('@/services/electron/system');
+
+            electronSystemService.showContextMenu('editor', {
+              hasSelection: !!hasSelection,
+              value: value,
+            });
+          }
+        }}
         onFocus={() => {
           enableScope(HotkeyEnum.AddUserMessage);
         }}

package/src/features/ChatItem/index.tsx

@@ -2,16 +2,39 @@
 
 import { ChatItemProps, ChatItem as ChatItemRaw } from '@lobehub/ui/chat';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
+import { isDesktop } from '@/const/version';
+import { useElectronStore } from '@/store/electron';
+import { electronSyncSelectors } from '@/store/electron/selectors';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
-const ChatItem = memo<ChatItemProps>(({ markdownProps = {}, ...rest }) => {
+const ChatItem = memo<ChatItemProps>(({ markdownProps = {}, avatar, ...rest }) => {
   const { componentProps, ...restMarkdown } = markdownProps;
   const { general } = useUserStore(settingsSelectors.currentSettings, isEqual);
+
+  const remoteServerUrl = useElectronStore(electronSyncSelectors.remoteServerUrl);
+  const processedAvatar = useMemo(() => {
+    // only process avatar in desktop environment and when avatar url starts with /
+    if (
+      !isDesktop ||
+      !remoteServerUrl ||
+      !avatar.avatar ||
+      typeof avatar.avatar !== 'string' ||
+      !avatar.avatar.startsWith('/')
+    )
+      return avatar;
+
+    return {
+      ...avatar,
+      avatar: remoteServerUrl + avatar.avatar, // prepend the remote server URL
+    };
+  }, [avatar, remoteServerUrl]);
+
   return (
     <ChatItemRaw
+      avatar={processedAvatar}
       fontSize={general.fontSize}
       markdownProps={{
         ...restMarkdown,

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

@@ -1,3 +1,4 @@
+import { ChatErrorType, ErrorType } from '@lobechat/types/fetch';
 import { IPluginErrorType } from '@lobehub/chat-plugin-sdk';
 import type { AlertProps } from '@lobehub/ui';
 import { Skeleton } from 'antd';
@@ -7,7 +8,6 @@ import { useTranslation } from 'react-i18next';
 
 import { useProviderName } from '@/hooks/useProviderName';
 import { AgentRuntimeErrorType, ILobeAgentRuntimeErrorType } from '@/libs/model-runtime';
-import { ChatErrorType, ErrorType } from '@/types/fetch';
 import { ChatMessage, ChatMessageError } from '@/types/message';
 
 import ChatInvalidAPIKey from './ChatInvalidApiKey';

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -6,6 +6,7 @@ import { MouseEventHandler, ReactNode, memo, use, useCallback, useMemo } from 'r
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { isDesktop } from '@/const/version';
 import ChatItem from '@/features/ChatItem';
 import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
 import { useAgentStore } from '@/store/agent';
@@ -220,6 +221,19 @@ const Item = memo<ChatListItemProps>(
       toggleMessageEditing(id, edit);
     }, []);
 
+    const onContextMenu = useCallback(async () => {
+      if (isDesktop && item) {
+        const { electronSystemService } = await import('@/services/electron/system');
+
+        electronSystemService.showContextMenu('chat', {
+          content: item.content,
+          hasError: !!item.error,
+          messageId: id,
+          role: item.role,
+        });
+      }
+    }, [id, item]);
+
     const belowMessage = useMemo(() => item && <BelowMessage data={item} />, [item]);
     const errorMessage = useMemo(() => item && <ErrorMessageExtra data={item} />, [item]);
     const messageExtra = useMemo(() => item && <MessageExtra data={item} />, [item]);
@@ -228,7 +242,10 @@ const Item = memo<ChatListItemProps>(
       item && (
         <InPortalThreadContext.Provider value={inPortalThread}>
           {enableHistoryDivider && <History />}
-          <Flexbox className={cx(styles.message, className, isMessageLoading && styles.loading)}>
+          <Flexbox
+            className={cx(styles.message, className, isMessageLoading && styles.loading)}
+            onContextMenu={onContextMenu}
+          >
             <ChatItem
               actions={actionBar}
               avatar={item.meta}

package/src/features/Portal/Artifacts/Header.tsx

@@ -1,3 +1,4 @@
+import { ArtifactType } from '@lobechat/types/artifact';
 import { ActionIcon, Icon, Segmented, Text } from '@lobehub/ui';
 import { ConfigProvider } from 'antd';
 import { cx } from 'antd-style';
@@ -9,7 +10,6 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/selectors';
 import { ArtifactDisplayMode } from '@/store/chat/slices/portal/initialState';
 import { oneLineEllipsis } from '@/styles';
-import { ArtifactType } from '@/types/artifact';
 
 const Header = () => {
   const { t } = useTranslation('portal');

package/src/libs/model-runtime/RouterRuntime/createRuntime.ts

@@ -135,9 +135,9 @@ export const createRouterRuntime = ({
       this._runtimes = routers.map((router) => {
         const providerAI = router.runtime ?? baseRuntimeMap[router.apiType] ?? LobeOpenAI;
 
-        const finalOptions = { ...router.options, ...options };
+        const finalOptions = { ...params, ...options, ...router.options };
         // @ts-ignore
-        const runtime: LobeRuntimeAI = new providerAI({ ...params, ...finalOptions, id });
+        const runtime: LobeRuntimeAI = new providerAI({ ...finalOptions, id });
 
         return { id: router.apiType, models: router.models, runtime };
       });

package/src/locales/default/modelProvider.ts

@@ -310,6 +310,7 @@ export default {
         latestTime: '上次更新时间：{{time}}',
         noLatestTime: '暂未获取列表',
       },
+      noModelsInCategory: '该分类下暂无启用的模型',
       resetAll: {
         conform: '确认重置当前模型的所有修改？重置后当前模型列表将会回到默认状态',
         success: '重置成功',
@@ -321,6 +322,14 @@ export default {
       total: '共 {{count}} 个模型可用',
     },
     searchNotFound: '未找到搜索结果',
+    tabs: {
+      all: '全部',
+      chat: '对话',
+      embedding: '向量化',
+      image: '图片',
+      stt: 'ASR',
+      tts: 'TTS',
+    },
   },
   sortModal: {
     success: '排序更新成功',

package/src/services/__tests__/chat.test.ts

@@ -1,3 +1,4 @@
+import { ChatErrorType } from '@lobechat/types/fetch';
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
 import { act } from '@testing-library/react';
 import { merge } from 'lodash-es';
@@ -35,7 +36,6 @@ import { UserStore } from '@/store/user';
 import { UserSettingsState, initialSettingsState } from '@/store/user/slices/settings/initialState';
 import { DalleManifest } from '@/tools/dalle';
 import { WebBrowsingManifest } from '@/tools/web-browsing';
-import { ChatErrorType } from '@/types/fetch';
 import { ChatImageItem, ChatMessage } from '@/types/message';
 import { ChatStreamPayload, type OpenAIChatMessage } from '@/types/openai/chat';
 import { LobeTool } from '@/types/tool';

package/src/services/chat.ts

@@ -1,3 +1,4 @@
+import { ChatErrorType } from '@lobechat/types/fetch';
 import { PluginRequestPayload, createHeadersWithPluginSettings } from '@lobehub/chat-plugin-sdk';
 import { produce } from 'immer';
 import { merge } from 'lodash-es';
@@ -34,7 +35,6 @@ import {
 } from '@/store/user/selectors';
 import { WebBrowsingManifest } from '@/tools/web-browsing';
 import { WorkingModel } from '@/types/agent';
-import { ChatErrorType } from '@/types/fetch';
 import { ChatImageItem, ChatMessage, MessageToolCall } from '@/types/message';
 import type { ChatStreamPayload, OpenAIChatMessage } from '@/types/openai/chat';
 import { UserMessageContentPart } from '@/types/openai/chat';

package/src/services/electron/system.ts

@@ -26,7 +26,9 @@ class ElectronSystemService {
     return dispatch('minimizeWindow');
   }
 
-  // Add other system-related service methods here if needed in the future
+  showContextMenu = async (type: string, data?: any) => {
+    return dispatch('showContextMenu', { data, type });
+  };
 }
 
 // Export a singleton instance of the service

package/src/store/chat/slices/message/action.ts

@@ -1,5 +1,6 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
 // Disable the auto sort key eslint rule to make the code more logic and readable
+import { ChatErrorType } from '@lobechat/types/fetch';
 import { copyToClipboard } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { SWRResponse, mutate } from 'swr';
@@ -12,7 +13,6 @@ import { topicService } from '@/services/topic';
 import { traceService } from '@/services/trace';
 import { ChatStore } from '@/store/chat/store';
 import { messageMapKey } from '@/store/chat/utils/messageMapKey';
-import { ChatErrorType } from '@/types/fetch';
 import {
   ChatMessage,
   ChatMessageError,

package/src/store/chat/slices/plugin/action.ts

@@ -1,4 +1,5 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
+import { ChatErrorType } from '@lobechat/types/fetch';
 import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
 import isEqual from 'fast-deep-equal';
 import { t } from 'i18next';
@@ -13,7 +14,6 @@ import { ChatStore } from '@/store/chat/store';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 import { builtinTools } from '@/tools';
-import { ChatErrorType } from '@/types/fetch';
 import {
   ChatMessage,
   ChatMessageError,

package/src/utils/errorResponse.test.ts

@@ -1,7 +1,7 @@
+import { ChatErrorType } from '@lobechat/types/fetch';
 import { describe, expect, it, vi } from 'vitest';
 
 import { AgentRuntimeErrorType } from '@/libs/model-runtime';
-import { ChatErrorType } from '@/types/fetch';
 
 import { createErrorResponse } from './errorResponse';
 

package/src/utils/errorResponse.ts

@@ -1,5 +1,6 @@
+import { ChatErrorType, ErrorResponse, ErrorType } from '@lobechat/types/fetch';
+
 import { AgentRuntimeErrorType, ILobeAgentRuntimeErrorType } from '@/libs/model-runtime';
-import { ChatErrorType, ErrorResponse, ErrorType } from '@/types/fetch';
 
 const getStatus = (errorType: ILobeAgentRuntimeErrorType | ErrorType) => {
   // InvalidAccessCode / InvalidAzureAPIKey / InvalidOpenAIAPIKey / InvalidZhipuAPIKey ....

package/src/utils/fetch/__tests__/parseError.test.ts

@@ -1,7 +1,6 @@
+import { ErrorResponse } from '@lobechat/types/fetch';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { ErrorResponse } from '@/types/fetch';
-
 import { getMessageError } from '../parseError';
 
 // 模拟 i18next

package/src/utils/fetch/fetchSSE.ts

@@ -1,7 +1,8 @@
+import { ChatErrorType } from '@lobechat/types/fetch';
+
 import { MESSAGE_CANCEL_FLAT } from '@/const/message';
 import { LOBE_CHAT_OBSERVATION_ID, LOBE_CHAT_TRACE_ID } from '@/const/trace';
 import { parseToolCalls } from '@/libs/model-runtime';
-import { ChatErrorType } from '@/types/fetch';
 import { ResponseAnimation, ResponseAnimationStyle } from '@/types/llm';
 import {
   ChatMessageError,

package/src/utils/fetch/parseError.ts

@@ -1,6 +1,6 @@
+import { ErrorResponse, ErrorType } from '@lobechat/types/fetch';
 import { t } from 'i18next';
 
-import { ErrorResponse, ErrorType } from '@/types/fetch';
 import { ChatMessageError } from '@/types/message';
 
 export const getMessageError = async (response: Response) => {

package/tsconfig.json

@@ -18,7 +18,7 @@
     "baseUrl": ".",
     "types": ["vitest/globals", "@serwist/next/typings"],
     "paths": {
-      "@/types/*": ["./packages/types/src/*"],
+      "@/types/*": ["./packages/types/src/*", "./src/types/*"],
       "@/*": ["./src/*"],
       "~test-utils": ["./tests/utils.tsx"]
     },

package/.dockerignore

@@ -1,9 +0,0 @@
-Dockerfile
-.dockerignore
-node_modules
-npm-debug.log
-.next
-.git
-.github
-*.md
-.env.example