@lobehub/lobehub 2.0.0-next.344 → 2.0.0-next.345

package/src/app/[variants]/(mobile)/me/profile/features/Category.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChartColumnBigIcon, LogOut, ShieldCheck, UserCircle } from 'lucide-react';
+import { ChartColumnBigIcon, LogOut, UserCircle } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -11,11 +11,7 @@ import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
 const Category = memo(() => {
-  const [isLogin, isLoginWithClerk, signOut] = useUserStore((s) => [
-    authSelectors.isLogin(s),
-    authSelectors.isLoginWithClerk(s),
-    s.logout,
-  ]);
+  const [isLogin, signOut] = useUserStore((s) => [authSelectors.isLogin(s), s.logout]);
   const navigate = useNavigate();
   const { t } = useTranslation('auth');
   const items: CellProps[] = [
@@ -25,12 +21,6 @@ const Category = memo(() => {
       label: t('tab.profile'),
       onClick: () => navigate('/settings/profile'),
     },
-    isLoginWithClerk && {
-      icon: ShieldCheck,
-      key: ProfileTabs.Security,
-      label: t('tab.security'),
-      onClick: () => navigate('/settings/security'),
-    },
     {
       icon: ChartColumnBigIcon,
       key: ProfileTabs.Stats,
@@ -46,7 +36,7 @@ const Category = memo(() => {
       label: t('signout', { ns: 'auth' }),
       onClick: () => {
         signOut();
-        navigate('/login');
+        navigate('/signin');
       },
     },
   ].filter(Boolean) as CellProps[];

package/src/app/[variants]/(mobile)/settings/_layout/Header.tsx

@@ -6,7 +6,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { enableAuth } from '@/envs/auth';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { type SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
@@ -16,7 +15,7 @@ const Header = memo(() => {
   const { t } = useTranslation('setting');
   const showMobileWorkspace = useShowMobileWorkspace();
   const navigate = useNavigate();
-  const params = useParams<{ providerId?: string, tab?: string; }>();
+  const params = useParams<{ providerId?: string; tab?: string }>();
 
   const isSessionActive = useSessionStore((s) => !!s.activeId);
   const isProvider = params.providerId && params.providerId !== 'all';
@@ -27,7 +26,7 @@ const Header = memo(() => {
     } else if (isProvider) {
       navigate('/settings/provider/all');
     } else {
-      navigate(enableAuth ? '/me/settings' : '/me');
+      navigate('/me/settings');
     }
   };
 

package/src/app/[variants]/share/t/[id]/_layout/index.tsx

@@ -65,7 +65,7 @@ const ShareTopicLayout = memo<PropsWithChildren>(({ children }) => {
                 <UserAvatar size={32} />
               </Link>
             ) : (
-              <NextLink href="/login">
+              <NextLink href="/signin">
                 <ProductLogo size={32} />
               </NextLink>
             )}

package/src/app/[variants]/share/t/[id]/index.tsx

@@ -56,7 +56,7 @@ const ShareTopicPage = memo(() => {
           <NotFound
             desc={t('sharePage.error.unauthorized.subtitle')}
             extra={
-              <Button href="/login" type="primary">
+              <Button href="/signin" type="primary">
                 {t('sharePage.error.unauthorized.action')}
               </Button>
             }

package/src/app/robots.tsx

@@ -26,7 +26,7 @@ const robots = (): MetadataRoute.Robots => {
       },
       {
         allow: ['/'],
-        disallow: ['/api/*', '/login', '/signup', '/knowledge/*', '/share/*'],
+        disallow: ['/api/*', '/signin', '/signup', '/knowledge/*', '/share/*'],
         userAgent: '*',
       },
     ],

package/src/envs/auth.ts

@@ -6,11 +6,6 @@ declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace NodeJS {
     interface ProcessEnv {
-      // ===== Clerk ===== //
-      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY?: string;
-      CLERK_SECRET_KEY?: string;
-      CLERK_WEBHOOK_SECRET?: string;
-
       // ===== Auth (shared by Better Auth / Next Auth) ===== //
       AUTH_SECRET?: string;
       AUTH_EMAIL_VERIFICATION?: string;
@@ -136,10 +131,6 @@ declare global {
 export const getAuthConfig = () => {
   return createEnv({
     client: {
-      // ---------------------------------- clerk ----------------------------------
-      NEXT_PUBLIC_ENABLE_CLERK_AUTH: z.boolean().optional().default(false),
-      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().optional(),
-
       // ---------------------------------- better auth ----------------------------------
       NEXT_PUBLIC_ENABLE_BETTER_AUTH: z.boolean().optional(),
 
@@ -147,10 +138,6 @@ export const getAuthConfig = () => {
       NEXT_PUBLIC_ENABLE_NEXT_AUTH: z.boolean().optional(),
     },
     server: {
-      // ---------------------------------- clerk ----------------------------------
-      CLERK_SECRET_KEY: z.string().optional(),
-      CLERK_WEBHOOK_SECRET: z.string().optional(),
-
       // ---------------------------------- better auth ----------------------------------
       AUTH_SECRET: z.string().optional(),
       AUTH_SSO_PROVIDERS: z.string().optional().default(''),
@@ -261,14 +248,6 @@ export const getAuthConfig = () => {
     },
 
     runtimeEnv: {
-      // Clerk
-      NEXT_PUBLIC_ENABLE_CLERK_AUTH:
-        process.env.NEXT_PUBLIC_ENABLE_CLERK_AUTH === '1' ||
-        !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
-      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
-      CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
-      CLERK_WEBHOOK_SECRET: process.env.CLERK_WEBHOOK_SECRET,
-
       // ---------------------------------- better auth ----------------------------------
       NEXT_PUBLIC_ENABLE_BETTER_AUTH: process.env.NEXT_PUBLIC_ENABLE_BETTER_AUTH === '1',
       // Fallback to NEXT_PUBLIC_* for seamless migration
@@ -396,13 +375,9 @@ export const getAuthConfig = () => {
 export const authEnv = getAuthConfig();
 
 // Auth flags - use process.env directly for build-time dead code elimination
-export const enableClerk =
-  process.env.NEXT_PUBLIC_ENABLE_CLERK_AUTH === '1'
-    ? true
-    : !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
-export const enableBetterAuth = process.env.NEXT_PUBLIC_ENABLE_BETTER_AUTH === '1';
+// Better Auth is the default auth solution when NextAuth is not explicitly enabled
 export const enableNextAuth = process.env.NEXT_PUBLIC_ENABLE_NEXT_AUTH === '1';
-export const enableAuth = enableClerk || enableBetterAuth || enableNextAuth || false;
+export const enableBetterAuth = !enableNextAuth;
 
 // Auth headers and constants
 export const LOBE_CHAT_AUTH_HEADER = 'X-lobe-chat-auth';

package/src/envs/llm.ts

@@ -241,7 +241,7 @@ export const getLLMConfig = () => {
       ENABLED_DEEPSEEK: !!process.env.DEEPSEEK_API_KEY,
       DEEPSEEK_API_KEY: process.env.DEEPSEEK_API_KEY,
 
-      ENABLED_GOOGLE: !!process.env.GOOGLE_API_KEY,
+      ENABLED_GOOGLE: process.env.ENABLED_GOOGLE !== '0',
       GOOGLE_API_KEY: process.env.GOOGLE_API_KEY,
 
       ENABLED_VERTEXAI: !!process.env.VERTEXAI_CREDENTIALS,
@@ -252,7 +252,7 @@ export const getLLMConfig = () => {
       ENABLED_PERPLEXITY: !!process.env.PERPLEXITY_API_KEY,
       PERPLEXITY_API_KEY: process.env.PERPLEXITY_API_KEY,
 
-      ENABLED_ANTHROPIC: !!process.env.ANTHROPIC_API_KEY,
+      ENABLED_ANTHROPIC: process.env.ENABLED_ANTHROPIC !== '0',
       ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY,
 
       ENABLED_MINIMAX: !!process.env.MINIMAX_API_KEY,

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -5,14 +5,14 @@ import { Center, Flexbox } from '@lobehub/ui';
 import { Space, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { LucideTrash2, Plug2, Store } from 'lucide-react';
-import { memo, useState } from 'react';
+import { memo, useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 
 import PluginAvatar from '@/components/Plugins/PluginAvatar';
 import PluginTag from '@/components/Plugins/PluginTag';
 import { FORM_STYLE } from '@/const/layoutTokens';
-import SkillStore from '@/features/SkillStore';
+import { createSkillStoreModal } from '@/features/SkillStore';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
@@ -27,10 +27,12 @@ import PluginAction from './PluginAction';
 const AgentPlugin = memo(() => {
   const { t } = useTranslation('setting');
 
-  const [showStore, setShowStore] = useState(false);
-
   const navigate = useNavigate();
 
+  const handleOpenStore = useCallback(() => {
+    createSkillStoreModal();
+  }, []);
+
   const [userEnabledPlugins, toggleAgentPlugin] = useStore((s) => [
     s.config.plugins || [],
     s.toggleAgentPlugin,
@@ -120,7 +122,7 @@ const AgentPlugin = memo(() => {
             icon={Store}
             onClick={(e) => {
               e.stopPropagation();
-              setShowStore(true);
+              handleOpenStore();
             }}
             size={'small'}
           />
@@ -139,7 +141,7 @@ const AgentPlugin = memo(() => {
               onClick={(e) => {
                 e.stopPropagation();
                 e.preventDefault();
-                setShowStore(true);
+                handleOpenStore();
                 navigate('/community/mcp');
               }}
               to={'/community/mcp'}
@@ -168,12 +170,7 @@ const AgentPlugin = memo(() => {
     title: t('settingPlugin.title'),
   };
 
-  return (
-    <>
-      <SkillStore open={showStore} setOpen={setShowStore} />
-      <Form items={[plugin]} itemsType={'group'} variant={'borderless'} {...FORM_STYLE} />
-    </>
-  );
+  return <Form items={[plugin]} itemsType={'group'} variant={'borderless'} {...FORM_STYLE} />;
 });
 
 export default AgentPlugin;

package/src/features/ChatInput/ActionBar/Tools/index.tsx

@@ -1,8 +1,8 @@
 import { Blocks } from 'lucide-react';
-import { Suspense, memo, useState } from 'react';
+import { Suspense, memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import SkillStore from '@/features/SkillStore';
+import { createSkillStoreModal } from '@/features/SkillStore';
 import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useAgentStore } from '@/store/agent';
 import { agentByIdSelectors } from '@/store/agent/selectors';
@@ -15,7 +15,6 @@ import { useControls } from './useControls';
 
 const Tools = memo(() => {
   const { t } = useTranslation('setting');
-  const [modalOpen, setModalOpen] = useState(false);
   const [updating, setUpdating] = useState(false);
   const { marketItems } = useControls({
     setUpdating,
@@ -29,6 +28,10 @@ const Tools = memo(() => {
 
   const enableFC = useModelSupportToolUse(model, provider);
 
+  const handleOpenStore = useCallback(() => {
+    createSkillStoreModal();
+  }, []);
+
   if (!enableFC)
     return <Action disabled icon={Blocks} showTooltip={true} title={t('tools.disabled')} />;
 
@@ -42,7 +45,7 @@ const Tools = memo(() => {
             <PopoverContent
               enableKlavis={enableKlavis}
               items={marketItems}
-              onOpenStore={() => setModalOpen(true)}
+              onOpenStore={handleOpenStore}
             />
           ),
           maxWidth: 320,
@@ -56,7 +59,6 @@ const Tools = memo(() => {
         showTooltip={false}
         title={t('tools.title')}
       />
-      <SkillStore open={modalOpen} setOpen={setModalOpen} />
     </Suspense>
   );
 });

package/src/features/ChatMiniMap/utils.ts

@@ -1,4 +1,4 @@
-import { markdownToTxt } from 'markdown-to-txt';
+import { markdownToTxt } from '@/utils/markdownToTxt';
 
 const MIN_WIDTH = 12;
 const MAX_WIDTH = 24;

package/src/features/CommandMenu/SearchResults.tsx

@@ -11,12 +11,12 @@ import {
   Puzzle,
   Sparkles,
 } from 'lucide-react';
-import { markdownToTxt } from 'markdown-to-txt';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import type { SearchResult } from '@/database/repositories/search';
+import { markdownToTxt } from '@/utils/markdownToTxt';
 
 import { CommandItem } from './components';
 import { styles } from './styles';

package/src/features/Conversation/ChatList/components/AutoScroll/DebugInspector.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { memo } from 'react';
+import { createPortal } from 'react-dom';
+
+import { messageStateSelectors, useConversationStore, virtuaListSelectors } from '../../../store';
+
+/**
+ * 判断是否在底部的阈值（单位：px）
+ * 当距离底部小于等于此值时，认为在底部
+ */
+export const AT_BOTTOM_THRESHOLD = 300;
+
+/**
+ * 是否开启调试面板
+ * 设为 true 可以显示滚动位置调试信息
+ */
+export const OPEN_DEV_INSPECTOR = false;
+
+const DebugInspector = memo(() => {
+  const atBottom = useConversationStore(virtuaListSelectors.atBottom);
+  const isScrolling = useConversationStore(virtuaListSelectors.isScrolling);
+  const isGenerating = useConversationStore(messageStateSelectors.isAIGenerating);
+  const virtuaScrollMethods = useConversationStore((s) => s.virtuaScrollMethods);
+
+  const shouldAutoScroll = atBottom && isGenerating && !isScrolling;
+  const scrollOffset = virtuaScrollMethods?.getScrollOffset?.() ?? 0;
+  const scrollSize = virtuaScrollMethods?.getScrollSize?.() ?? 0;
+  const viewportSize = virtuaScrollMethods?.getViewportSize?.() ?? 0;
+  const distanceToBottom = scrollSize - scrollOffset - viewportSize;
+  // 可视化计算
+  const visualHeight = 120;
+  const scale = scrollSize > 0 ? visualHeight / scrollSize : 0;
+  const viewportVisualHeight = Math.max(viewportSize * scale, 10);
+  const scrollVisualOffset = scrollOffset * scale;
+  const thresholdVisualHeight = Math.min(AT_BOTTOM_THRESHOLD * scale, visualHeight * 0.3);
+
+  const panel = (
+    <div
+      style={{
+        background: 'rgba(0,0,0,0.9)',
+        borderRadius: 8,
+        bottom: 80,
+        display: 'flex',
+        fontFamily: 'monospace',
+        fontSize: 11,
+        gap: 16,
+        left: 12,
+        padding: '10px 14px',
+        position: 'fixed',
+        zIndex: 9999,
+      }}
+    >
+      {/* 滚动条可视化 */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>Scroll Position</div>
+        <div
+          style={{
+            background: '#374151',
+            borderRadius: 3,
+            height: visualHeight,
+            position: 'relative',
+            width: 24,
+          }}
+        >
+          {/* threshold 区域 (底部 200px) */}
+          <div
+            style={{
+              background: atBottom ? 'rgba(34, 197, 94, 0.3)' : 'rgba(239, 68, 68, 0.3)',
+              borderRadius: '0 0 3px 3px',
+              bottom: 0,
+              height: thresholdVisualHeight,
+              left: 0,
+              position: 'absolute',
+              right: 0,
+            }}
+          />
+          {/* 当前视口位置 */}
+          <div
+            style={{
+              background: atBottom ? '#22c55e' : '#3b82f6',
+              borderRadius: 2,
+              height: viewportVisualHeight,
+              left: 2,
+              position: 'absolute',
+              right: 2,
+              top: scrollVisualOffset,
+              transition: 'top 0.1s',
+            }}
+          />
+          {/* threshold 线 */}
+          <div
+            style={{
+              background: '#f59e0b',
+              bottom: thresholdVisualHeight,
+              height: 1,
+              left: 0,
+              position: 'absolute',
+              right: 0,
+            }}
+          />
+        </div>
+        <div style={{ color: '#f59e0b', fontSize: 9, textAlign: 'center' }}>
+          {AT_BOTTOM_THRESHOLD}px
+        </div>
+      </div>
+
+      {/* 数值信息 */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>
+          scrollSize: <span style={{ color: 'white' }}>{Math.round(scrollSize)}px</span>
+        </div>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>
+          viewport: <span style={{ color: 'white' }}>{Math.round(viewportSize)}px</span>
+        </div>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>
+          offset: <span style={{ color: 'white' }}>{Math.round(scrollOffset)}px</span>
+        </div>
+        <div
+          style={{
+            color: atBottom ? '#22c55e' : '#ef4444',
+            fontSize: 10,
+            fontWeight: 'bold',
+          }}
+        >
+          toBottom: {Math.round(distanceToBottom)}px
+          {distanceToBottom <= AT_BOTTOM_THRESHOLD ? ' ≤' : ' >'} {AT_BOTTOM_THRESHOLD}
+        </div>
+
+        <div style={{ borderTop: '1px solid #374151', marginTop: 4, paddingTop: 4 }}>
+          <div style={{ color: atBottom ? '#22c55e' : '#ef4444', fontSize: 10 }}>
+            atBottom: {atBottom ? 'YES' : 'NO'}
+          </div>
+          <div style={{ color: isGenerating ? '#3b82f6' : '#6b7280', fontSize: 10 }}>
+            generating: {isGenerating ? 'YES' : 'NO'}
+          </div>
+          <div style={{ color: isScrolling ? '#f59e0b' : '#6b7280', fontSize: 10 }}>
+            scrolling: {isScrolling ? 'YES' : 'NO'}
+          </div>
+        </div>
+
+        <div
+          style={{
+            background: shouldAutoScroll ? '#22c55e' : '#ef4444',
+            borderRadius: 3,
+            color: 'white',
+            fontSize: 10,
+            marginTop: 4,
+            padding: '2px 6px',
+            textAlign: 'center',
+          }}
+        >
+          autoScroll: {shouldAutoScroll ? 'YES' : 'NO'}
+        </div>
+      </div>
+    </div>
+  );
+
+  if (typeof document === 'undefined') return null;
+
+  return createPortal(panel, document.body);
+});
+
+DebugInspector.displayName = 'DebugInspector';
+
+export default DebugInspector;

package/src/features/Conversation/ChatList/components/AutoScroll/index.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { memo, useEffect } from 'react';
+
+import {
+  dataSelectors,
+  messageStateSelectors,
+  useConversationStore,
+  virtuaListSelectors,
+} from '../../../store';
+import BackBottom from '../BackBottom';
+import { AT_BOTTOM_THRESHOLD, OPEN_DEV_INSPECTOR } from './DebugInspector';
+
+const AutoScroll = memo(() => {
+  const atBottom = useConversationStore(virtuaListSelectors.atBottom);
+  const isScrolling = useConversationStore(virtuaListSelectors.isScrolling);
+  const isGenerating = useConversationStore(messageStateSelectors.isAIGenerating);
+  const scrollToBottom = useConversationStore((s) => s.scrollToBottom);
+  const dbMessages = useConversationStore(dataSelectors.dbMessages);
+
+  const shouldAutoScroll = atBottom && isGenerating && !isScrolling;
+
+  // 获取最后一条消息的 content 长度，用于监听流式输出
+  const lastMessage = dbMessages.at(-1);
+  const lastMessageContentLength =
+    typeof lastMessage?.content === 'string' ? lastMessage.content.length : 0;
+
+  useEffect(() => {
+    if (shouldAutoScroll) {
+      scrollToBottom(false);
+    }
+  }, [shouldAutoScroll, scrollToBottom, dbMessages.length, lastMessageContentLength]);
+
+  return (
+    <div style={{ position: 'relative', width: '100%' }}>
+      {OPEN_DEV_INSPECTOR && (
+        <>
+          {/* Threshold 区域顶部边界线 */}
+          <div
+            style={{
+              background: atBottom ? '#22c55e' : '#ef4444',
+              height: 2,
+              left: 0,
+              opacity: 0.5,
+              pointerEvents: 'none',
+              position: 'absolute',
+              right: 0,
+              top: -AT_BOTTOM_THRESHOLD,
+            }}
+          />
+
+          {/* Threshold 区域 mask - 显示在指示线上方 */}
+          <div
+            style={{
+              background: atBottom
+                ? 'linear-gradient(to top, rgba(34, 197, 94, 0.15), transparent)'
+                : 'linear-gradient(to top, rgba(239, 68, 68, 0.1), transparent)',
+              height: AT_BOTTOM_THRESHOLD,
+              left: 0,
+              pointerEvents: 'none',
+              position: 'absolute',
+              right: 0,
+              top: -AT_BOTTOM_THRESHOLD,
+            }}
+          />
+
+          {/* AutoScroll 位置指示线（底部） */}
+          <div
+            style={{
+              background: atBottom ? '#22c55e' : '#ef4444',
+              height: 2,
+              position: 'relative',
+              width: '100%',
+            }}
+          />
+        </>
+      )}
+
+      <BackBottom onScrollToBottom={() => scrollToBottom(true)} visible={!atBottom} />
+    </div>
+  );
+});
+
+AutoScroll.displayName = 'ConversationAutoScroll';
+
+export default AutoScroll;

package/src/features/Conversation/ChatList/components/VirtualizedList.tsx

@@ -7,6 +7,10 @@ import { VList, type VListHandle } from 'virtua';
 import WideScreenContainer from '../../../WideScreenContainer';
 import { useConversationStore, virtuaListSelectors } from '../../store';
 import AutoScroll from './AutoScroll';
+import DebugInspector, {
+  AT_BOTTOM_THRESHOLD,
+  OPEN_DEV_INSPECTOR,
+} from './AutoScroll/DebugInspector';
 
 interface VirtualizedListProps {
   dataSource: string[];
@@ -23,15 +27,11 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
   const prevDataLengthRef = useRef(dataSource.length);
   const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const atBottomThreshold = 200;
-
   // Store actions
   const registerVirtuaScrollMethods = useConversationStore((s) => s.registerVirtuaScrollMethods);
   const setScrollState = useConversationStore((s) => s.setScrollState);
   const resetVisibleItems = useConversationStore((s) => s.resetVisibleItems);
-  const scrollToBottom = useConversationStore((s) => s.scrollToBottom);
   const setActiveIndex = useConversationStore((s) => s.setActiveIndex);
-  const atBottom = useConversationStore(virtuaListSelectors.atBottom);
   const activeIndex = useConversationStore(virtuaListSelectors.activeIndex);
 
   // Check if at bottom based on scroll position
@@ -43,8 +43,8 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
     const scrollSize = ref.scrollSize;
     const viewportSize = ref.viewportSize;
 
-    return scrollSize - scrollOffset - viewportSize <= atBottomThreshold;
-  }, [atBottomThreshold]);
+    return scrollSize - scrollOffset - viewportSize <= AT_BOTTOM_THRESHOLD;
+  }, [AT_BOTTOM_THRESHOLD]);
 
   // Handle scroll events
   const handleScroll = useCallback(() => {
@@ -131,6 +131,8 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
 
   return (
     <>
+      {/* Debug Inspector - 放在 VList 外面，不会被虚拟列表回收 */}
+      {OPEN_DEV_INSPECTOR && <DebugInspector />}
       <VList
         bufferSize={typeof window !== 'undefined' ? window.innerHeight : 0}
         data={dataSource}
@@ -142,12 +144,14 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
         {(messageId, index): ReactElement => {
           const isAgentCouncil = messageId.includes('agentCouncil');
           const content = itemContent(index, messageId);
+          const isLast = index === dataSource.length - 1;
 
           if (isAgentCouncil) {
             // AgentCouncil needs full width for horizontal scroll
             return (
               <div key={messageId} style={{ position: 'relative', width: '100%' }}>
                 {content}
+                {isLast && <AutoScroll />}
               </div>
             );
           }
@@ -155,21 +159,11 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
           return (
             <WideScreenContainer key={messageId} style={{ position: 'relative' }}>
               {content}
+              {isLast && <AutoScroll />}
             </WideScreenContainer>
           );
         }}
       </VList>
-      <WideScreenContainer
-        onChange={() => {
-          if (!atBottom) return;
-          setTimeout(() => scrollToBottom(true), 100);
-        }}
-        style={{
-          position: 'relative',
-        }}
-      >
-        <AutoScroll />
-      </WideScreenContainer>
     </>
   );
 }, isEqual);