@lobehub/lobehub 2.0.0-next.109 → 2.0.0-next.110

package/locales/pl-PL/setting.json

@@ -293,6 +293,12 @@
       "elegant": "Elegancki",
       "title": "Animacja reakcji"
     },
+    "contextMenuMode": {
+      "default": "Domyślnie",
+      "desc": "Wybierz sposób wyświetlania menu kontekstowego wiadomości czatu",
+      "disabled": "Nie używaj",
+      "title": "Schemat menu kontekstowego"
+    },
     "neutralColor": {
       "desc": "Dostosowanie odcieni szarości w różnych kolorach",
       "title": "Kolor neutralny"
@@ -777,4 +783,4 @@
     },
     "title": "Narzędzia rozszerzeń"
   }
-}
+}

package/locales/pt-BR/setting.json

@@ -293,6 +293,12 @@
       "elegant": "Elegante",
       "title": "Animação de Resposta"
     },
+    "contextMenuMode": {
+      "default": "Padrão",
+      "desc": "Escolha o modo de exibição do menu de contexto ao clicar com o botão direito nas mensagens de chat",
+      "disabled": "Desativado",
+      "title": "Modo do menu de contexto"
+    },
     "neutralColor": {
       "desc": "Personalização de escala de cinza com diferentes inclinações de cor",
       "title": "Cor Neutra"
@@ -777,4 +783,4 @@
     },
     "title": "Ferramentas de Extensão"
   }
-}
+}

package/locales/ru-RU/setting.json

@@ -293,6 +293,12 @@
       "elegant": "Элегантный",
       "title": "Анимация отклика"
     },
+    "contextMenuMode": {
+      "default": "По умолчанию",
+      "desc": "Выберите способ отображения контекстного меню сообщений чата",
+      "disabled": "Не использовать",
+      "title": "Схема контекстного меню"
+    },
     "neutralColor": {
       "desc": "Настройка градаций серого с различными цветовыми наклонами",
       "title": "Нейтральный цвет"
@@ -777,4 +783,4 @@
     },
     "title": "Дополнительные инструменты"
   }
-}
+}

package/locales/tr-TR/setting.json

@@ -293,6 +293,12 @@
       "elegant": "Zarif",
       "title": "Yanıt Animasyonu"
     },
+    "contextMenuMode": {
+      "default": "Varsayılan",
+      "desc": "Sohbet mesajları sağ tıklama menüsünün görüntüleme seçeneğini seçin",
+      "disabled": "Kullanma",
+      "title": "Sağ Tıklama Menüsü Seçeneği"
+    },
     "neutralColor": {
       "desc": "Farklı renk eğilimlerine sahip gri tonları özelleştirme",
       "title": "Nötr Renk"
@@ -777,4 +783,4 @@
     },
     "title": "Uzantı Araçları"
   }
-}
+}

package/locales/vi-VN/setting.json

@@ -293,6 +293,12 @@
       "elegant": "Thanh lịch",
       "title": "Hoạt ảnh phản hồi"
     },
+    "contextMenuMode": {
+      "default": "Mặc định",
+      "desc": "Chọn phương án hiển thị menu chuột phải cho tin nhắn trò chuyện",
+      "disabled": "Không sử dụng",
+      "title": "Phương án menu chuột phải"
+    },
     "neutralColor": {
       "desc": "Tùy chỉnh thang độ xám với các xu hướng màu sắc khác nhau",
       "title": "Màu trung tính"
@@ -777,4 +783,4 @@
     },
     "title": "Công cụ mở rộng"
   }
-}
+}

package/locales/zh-CN/setting.json

@@ -293,6 +293,12 @@
       "elegant": "优雅",
       "title": "响应动画"
     },
+    "contextMenuMode": {
+      "default": "默认",
+      "desc": "选择聊天消息右键菜单的显示方案",
+      "disabled": "不使用",
+      "title": "右键菜单方案"
+    },
     "neutralColor": {
       "desc": "不同色彩倾向的灰阶自定义",
       "title": "中性色"

package/locales/zh-TW/setting.json

@@ -293,6 +293,12 @@
       "elegant": "優雅",
       "title": "回應動畫"
     },
+    "contextMenuMode": {
+      "default": "預設",
+      "desc": "選擇聊天訊息右鍵選單的顯示方案",
+      "disabled": "不使用",
+      "title": "右鍵選單方案"
+    },
     "neutralColor": {
       "desc": "不同色彩傾向的灰階自訂",
       "title": "中性色"
@@ -777,4 +783,4 @@
     },
     "title": "擴展工具"
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.109",
+  "version": "2.0.0-next.110",
   "description": "LobeHub - an open-source,comprehensive AI Agent 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/packages/const/src/settings/common.ts

@@ -2,6 +2,7 @@ import { UserGeneralConfig } from '@lobechat/types';
 
 export const DEFAULT_COMMON_SETTINGS: UserGeneralConfig = {
   animationMode: 'agile',
+  // contextMenuMode not set default value, use env to calc
   fontSize: 14,
   highlighterTheme: 'lobe-theme',
   mermaidTheme: 'lobe-theme',

package/packages/model-bank/src/aiModels/ollamacloud.ts

@@ -23,7 +23,6 @@ const ollamaCloudModels: AIChatModelCard[] = [
     description:
       'Gemini 3 Pro 是 Google 最智能的模型，具有 SOTA 推理和多模式理解，以及强大的代理和氛围编码功能。',
     displayName: 'Gemini 3 Pro Preview',
-    enabled: true,
     id: 'gemini-3-pro-preview',
     releasedAt: '2025-11-20',
     type: 'chat',

package/packages/types/src/user/settings/general.ts

@@ -4,8 +4,11 @@ import type { ResponseAnimationStyle } from '../../aiProvider';
 
 export type AnimationMode = 'disabled' | 'agile' | 'elegant';
 
+export type ContextMenuMode = 'disabled' | 'default';
+
 export interface UserGeneralConfig {
   animationMode?: AnimationMode;
+  contextMenuMode?: ContextMenuMode;
   fontSize: number;
   highlighterTheme?: HighlighterProps['theme'];
   mermaidTheme?: MermaidProps['theme'];

package/src/app/[variants]/(main)/chat/components/topic/features/Topic/TopicListContent/TopicItem/index.tsx

@@ -1,10 +1,13 @@
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
+import qs from 'query-string';
 import { Suspense, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { Link } from 'react-router-dom';
 
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
 
 import ThreadList from '../ThreadList';
 import DefaultContent from './DefaultContent';
@@ -52,32 +55,43 @@ const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav, threadId }) =
   const { styles, cx } = useStyles();
   const toggleConfig = useGlobalStore((s) => s.toggleMobileTopic);
   const [toggleTopic] = useChatStore((s) => [s.switchTopic]);
+  const activeId = useSessionStore((s) => s.activeId);
   const [isHover, setHovering] = useState(false);
 
+  const topicUrl = qs.stringifyUrl({
+    query: id ? { session: activeId, topic: id } : { session: activeId },
+    url: '/chat',
+  });
+
   return (
     <Flexbox style={{ position: 'relative' }}>
-      <Flexbox
-        align={'center'}
-        className={cx(styles.container, 'topic-item', active && !threadId && styles.active)}
-        distribution={'space-between'}
-        horizontal
-        onClick={() => {
+      <Link
+        onClick={(e) => {
+          e.preventDefault();
           toggleTopic(id);
           toggleConfig(false);
         }}
-        onMouseEnter={() => {
-          setHovering(true);
-        }}
-        onMouseLeave={() => {
-          setHovering(false);
-        }}
+        to={topicUrl}
       >
-        {!id ? (
-          <DefaultContent />
-        ) : (
-          <TopicContent fav={fav} id={id} showMore={isHover} title={title} />
-        )}
-      </Flexbox>
+        <Flexbox
+          align={'center'}
+          className={cx(styles.container, 'topic-item', active && !threadId && styles.active)}
+          distribution={'space-between'}
+          horizontal
+          onMouseEnter={() => {
+            setHovering(true);
+          }}
+          onMouseLeave={() => {
+            setHovering(false);
+          }}
+        >
+          {!id ? (
+            <DefaultContent />
+          ) : (
+            <TopicContent fav={fav} id={id} showMore={isHover} title={title} />
+          )}
+        </Flexbox>
+      </Link>
       {active && (
         <Suspense
           fallback={

package/src/app/[variants]/(main)/layouts/desktop/DesktopLayoutContainer.tsx

@@ -1,25 +1,22 @@
 import { useTheme } from 'antd-style';
 import { PropsWithChildren, Suspense, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { useLocation } from 'react-router-dom';
 
 import SideBar from './SideBar';
 
 const DesktopLayoutContainer = memo<PropsWithChildren>(({ children }) => {
   const theme = useTheme();
-  const location = useLocation();
-  const pathname = location.pathname;
-  const hideSideBar = pathname.startsWith('/settings');
+
   return (
     <>
       <Suspense>
-        {!hideSideBar && <SideBar />}
+        <SideBar />
       </Suspense>
       <Flexbox
         style={{
           background: theme.colorBgLayout,
           borderInlineStart: `1px solid ${theme.colorBorderSecondary}`,
-          borderStartStartRadius: !hideSideBar ? 12 : undefined,
+          borderStartStartRadius: 12,
           borderTop: `1px solid ${theme.colorBorderSecondary}`,
           overflow: 'hidden',
         }}

package/src/app/[variants]/(main)/layouts/desktop/SideBar/PinList/index.tsx

@@ -3,7 +3,9 @@ import { Divider } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { Flexbox } from 'react-layout-kit';
+import { Link } from 'react-router-dom';
 
+import { SESSION_CHAT_URL } from '@/const/url';
 import { usePinnedAgentState } from '@/hooks/usePinnedAgentState';
 import { useSwitchSession } from '@/hooks/useSwitchSession';
 import { useSessionStore } from '@/store/session';
@@ -93,21 +95,26 @@ const PinList = () => {
                   placement={'right'}
                   title={sessionHelpers.getTitle(item.meta)}
                 >
-                  <Flexbox
-                    className={cx(
-                      styles.ink,
-                      isPinned && activeId === item.id ? styles.inkActive : undefined,
-                    )}
+                  <Link
+                    onClick={(e) => {
+                      e.preventDefault();
+                      switchAgent(item.id);
+                    }}
+                    to={SESSION_CHAT_URL(item.id)}
                   >
-                    <Avatar
-                      avatar={sessionHelpers.getAvatar(item.meta)}
-                      background={item.meta.backgroundColor}
-                      onClick={() => {
-                        switchAgent(item.id);
-                      }}
-                      size={40}
-                    />
-                  </Flexbox>
+                    <Flexbox
+                      className={cx(
+                        styles.ink,
+                        isPinned && activeId === item.id ? styles.inkActive : undefined,
+                      )}
+                    >
+                      <Avatar
+                        avatar={sessionHelpers.getAvatar(item.meta)}
+                        background={item.meta.backgroundColor}
+                        size={40}
+                      />
+                    </Flexbox>
+                  </Link>
                 </Tooltip>
               </Flexbox>
             ))}

package/src/app/[variants]/(main)/settings/common/features/Common/Common.tsx

@@ -4,7 +4,7 @@ import { Form, type FormGroupItemType, Icon, ImageSelect, InputPassword } from '
 import { Select } from '@lobehub/ui';
 import { Segmented, Skeleton } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { Ban, Gauge, Loader2Icon, Monitor, Moon, Sun, Waves } from 'lucide-react';
+import { Ban, Gauge, Loader2Icon, Monitor, Moon, Mouse, Sun, Waves } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -113,6 +113,28 @@ const Common = memo(() => {
         minWidth: undefined,
         name: 'animationMode',
       },
+      {
+        children: (
+          <Segmented
+            options={[
+              {
+                icon: <Icon icon={Ban} size={16} />,
+                label: t('settingAppearance.contextMenuMode.disabled'),
+                value: 'disabled',
+              },
+              {
+                icon: <Icon icon={Mouse} size={16} />,
+                label: t('settingAppearance.contextMenuMode.default'),
+                value: 'default',
+              },
+            ]}
+          />
+        ),
+        desc: t('settingAppearance.contextMenuMode.desc'),
+        label: t('settingAppearance.contextMenuMode.title'),
+        minWidth: undefined,
+        name: 'contextMenuMode',
+      },
 
       {
         children: (

package/src/features/ChatItem/components/MessageContent.tsx

@@ -5,6 +5,7 @@ import { type ReactNode, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { MessageContentClassName } from '@/features/ChatList/Messages/Default';
 import { useChatStore } from '@/store/chat';
 import { useUserStore } from '@/store/user';
 import { userGeneralSettingsSelectors } from '@/store/user/selectors';
@@ -83,7 +84,7 @@ const MessageContent = memo<MessageContentProps>(
 
     return (
       <Flexbox
-        className={cx(styles.message, editing && styles.editingContainer, className)}
+        className={cx(styles.message, className, editing && styles.editingContainer, MessageContentClassName)}
         onDoubleClick={onDoubleClick}
       >
         {messageContent}

package/src/features/ChatList/Messages/Assistant/Actions/index.tsx

@@ -21,6 +21,7 @@ interface AssistantActionsProps {
   id: string;
   index: number;
 }
+
 export const AssistantActionsBar = memo<AssistantActionsProps>(({ id, data, index }) => {
   const { error, tools } = data;
   const [isThreadMode, hasThread, isRegenerating, isCollapsed] = useChatStore((s) => [

package/src/features/ChatList/Messages/Assistant/index.tsx

@@ -75,7 +75,7 @@ export const useStyles = createStyles(
           justify-content: ${placement === 'left' ? 'flex-end' : 'flex-start'};
         `,
         editing &&
-          css`
+        css`
             pointer-events: none !important;
             opacity: 0 !important;
           `,

package/src/features/ChatList/Messages/Default.tsx

@@ -6,6 +6,8 @@ import { LOADING_FLAT } from '@/const/message';
 import { useChatStore } from '@/store/chat';
 import { messageStateSelectors } from '@/store/chat/selectors';
 
+export const MessageContentClassName = 'msg_content_flag'
+
 export const DefaultMessage = memo<
   UIChatMessage & {
     addIdOnDOM?: boolean;

package/src/features/ChatList/Messages/index.tsx

@@ -3,24 +3,28 @@
 import { isDesktop } from '@lobechat/const';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { MouseEvent, ReactNode, memo, use, useCallback, useEffect, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import {
-  removeVirtuaVisibleItem,
-  upsertVirtuaVisibleItem,
-} from '@/features/ChatList/components/VirtualizedList/VirtuosoContext';
-import { getChatStoreState, useChatStore } from '@/store/chat';
-import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
-
+import ContextMenu from '../components/ContextMenu';
 import History from '../components/History';
 import { InPortalThreadContext } from '../context/InPortalThreadContext';
+import { useChatItemContextMenu } from '../hooks/useChatItemContextMenu';
 import AssistantMessage from './Assistant';
 import GroupMessage from './Group';
 import SupervisorMessage from './Supervisor';
 import ToolMessage from './Tool';
 import UserMessage from './User';
 
+import {
+  VirtuaContext,
+  removeVirtuaVisibleItem,
+  upsertVirtuaVisibleItem,
+} from '@/features/ChatList/components/VirtualizedList/VirtuosoContext';
+import { getChatStoreState, useChatStore } from '@/store/chat';
+import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
+
 const useStyles = createStyles(({ css, prefixCls }) => ({
   loading: css`
     opacity: 0.6;
@@ -58,17 +62,41 @@ const Item = memo<ChatListItemProps>(
   }) => {
     const { styles, cx } = useStyles();
     const containerRef = useRef<HTMLDivElement | null>(null);
+    const virtuaRef = use(VirtuaContext);
+    const searchParams = useSearchParams();
+    const topic = searchParams.get('topic');
+
+    const [role, editing, isMessageCreating] = useChatStore(
+      (s) => {
+        const item = displayMessageSelectors.getDisplayMessageById(id)(s);
+        return [
+          item?.role,
+          messageStateSelectors.isMessageEditing(id)(s),
+          messageStateSelectors.isMessageCreating(id)(s),
+        ];
+      },
+      isEqual,
+    );
 
-    const [role, isMessageCreating] = useChatStore((s) => [
-      displayMessageSelectors.getDisplayMessageById(id)(s)?.role,
-      messageStateSelectors.isMessageCreating(id)(s),
-    ]);
+    const {
+      containerRef: contextMenuContainerRef,
+      contextMenuState,
+      handleContextMenu,
+      hideContextMenu,
+    } = useChatItemContextMenu({
+      editing,
+      onActionClick: () => {},
+    });
+
+    const setContainerRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        containerRef.current = node;
+        contextMenuContainerRef.current = node;
+      },
+      [contextMenuContainerRef],
+    );
 
     // ======================= Performance Optimization ======================= //
-    // these useMemo/useCallback are all for the performance optimization
-    // maybe we can remove it in React 19
-    // ======================================================================== //
-
     useEffect(() => {
       if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') return;
 
@@ -107,22 +135,32 @@ const Item = memo<ChatListItemProps>(
       };
     }, [index]);
 
-    const onContextMenu = useCallback(async () => {
-      const item = displayMessageSelectors.getDisplayMessageById(id)(getChatStoreState());
+    const onContextMenu = useCallback(
+      async (event: MouseEvent<HTMLDivElement>) => {
+        if (!role || (role !== 'user' && role !== 'assistant')) return;
 
-      if (isDesktop && item) {
-        const { electronSystemService } = await import('@/services/electron/system');
+        const item = displayMessageSelectors.getDisplayMessageById(id)(getChatStoreState());
+        if (!item) return;
 
-        electronSystemService.showContextMenu('chat', {
-          content: item.content,
-          hasError: !!item.error,
-          messageId: id,
-          role: item.role,
-        });
-      }
-    }, [id]);
+        if (isDesktop) {
+          const { electronSystemService } = await import('@/services/electron/system');
+
+          electronSystemService.showContextMenu('chat', {
+            content: item.content,
+            hasError: !!item.error,
+            messageId: id,
+            role: item.role,
+          });
+
+          return;
+        }
+
+        handleContextMenu(event);
+      },
+      [handleContextMenu, id, role],
+    );
 
-    const renderContent = useMemo(() => {
+    const renderContent = useCallback(() => {
       switch (role) {
         case 'user': {
           return <UserMessage disableEditing={disableEditing} id={id} index={index} />;
@@ -171,11 +209,22 @@ const Item = memo<ChatListItemProps>(
           className={cx(styles.message, className, isMessageCreating && styles.loading)}
           data-index={index}
           onContextMenu={onContextMenu}
-          ref={containerRef}
+          ref={setContainerRef}
         >
-          {renderContent}
+          {renderContent()}
           {endRender}
         </Flexbox>
+        <ContextMenu
+          id={id}
+          inPortalThread={inPortalThread}
+          index={index}
+          onClose={hideContextMenu}
+          position={contextMenuState.position}
+          selectedText={contextMenuState.selectedText}
+          topic={topic}
+          virtuaRef={virtuaRef}
+          visible={contextMenuState.visible}
+        />
       </InPortalThreadContext.Provider>
     );
   },