@lobehub/lobehub 2.0.0-next.4 → 2.0.0-next.40

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

@@ -1,16 +1,29 @@
 'use client';
 
-import { ReactNode, forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ReactNode,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import WideScreenContainer from '@/features/Conversation/components/WideScreenContainer';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { displayMessageSelectors } from '@/store/chat/selectors';
 
 import AutoScroll from '../AutoScroll';
 import SkeletonList from '../SkeletonList';
-import { VirtuosoContext, resetVirtuosoVisibleItems, setVirtuosoGlobalRef } from './VirtuosoContext';
+import {
+  VirtuosoContext,
+  resetVirtuosoVisibleItems,
+  setVirtuosoGlobalRef,
+} from './VirtuosoContext';
 
 interface VirtualizedListProps {
   dataSource: string[];
@@ -32,10 +45,9 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
   const [atBottom, setAtBottom] = useState(true);
   const [isScrolling, setIsScrolling] = useState(false);
 
-  const [id, isFirstLoading, isCurrentChatLoaded] = useChatStore((s) => [
-    chatSelectors.currentChatKey(s),
-    chatSelectors.currentChatLoadingState(s),
-    chatSelectors.isCurrentChatLoaded(s),
+  const [isFirstLoading, isCurrentChatLoaded] = useChatStore((s) => [
+    displayMessageSelectors.currentChatLoadingState(s),
+    displayMessageSelectors.isCurrentDisplayChatLoaded(s),
   ]);
 
   const getFollowOutput = useCallback(() => {
@@ -53,9 +65,8 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
     [atBottom],
   );
 
-  useEffect(() => {
-    scrollToBottom();
-  }, [id]);
+  const components = useMemo(() => ({ List }), []);
+  const computeItemKey = useCallback((index: number, item: string) => item, []);
 
   useEffect(() => {
     setVirtuosoGlobalRef(virtuosoRef);
@@ -71,8 +82,8 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
     };
   }, []);
 
-  // overscan should be 3 times the height of the window
-  const overscan = typeof window !== 'undefined' ? window.innerHeight * 3 : 0;
+  // overscan should be 2 times the height of the window
+  const overscan = typeof window !== 'undefined' ? window.innerHeight * 2 : 0;
 
   // first time loading or not loaded
   if (isFirstLoading || !isCurrentChatLoaded) return <SkeletonList mobile={mobile} />;
@@ -81,12 +92,9 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
     <VirtuosoContext value={virtuosoRef}>
       <Virtuoso
         atBottomStateChange={setAtBottom}
-        atBottomThreshold={50 * (mobile ? 2 : 1)}
-        components={{
-          List,
-        }}
-
-        computeItemKey={(_, item) => item}
+        atBottomThreshold={200 * (mobile ? 2 : 1)}
+        components={components}
+        computeItemKey={computeItemKey}
         data={dataSource}
         followOutput={getFollowOutput}
         increaseViewportBy={overscan}
@@ -108,13 +116,14 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
           atBottom={atBottom}
           isScrolling={isScrolling}
           onScrollToBottom={(type) => {
+            const virtuoso = virtuosoRef.current;
             switch (type) {
               case 'auto': {
-                scrollToBottom();
+                virtuoso?.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
                 break;
               }
               case 'click': {
-                scrollToBottom('smooth');
+                virtuoso?.scrollToIndex({ align: 'end', behavior: 'smooth', index: 'LAST' });
                 break;
               }
             }

package/src/features/Conversation/hooks/useChatListActionsBar.tsx

@@ -1,6 +1,7 @@
 import type { ActionIconGroupItemType } from '@lobehub/ui';
 import { css, cx } from 'antd-style';
 import {
+  ArrowDownFromLine,
   Copy,
   DownloadIcon,
   Edit,
@@ -15,7 +16,6 @@ import {
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { isDeprecatedEdition } from '@/const/version';
 import { localeOptions } from '@/locales/resources';
 
 const translateStyle = css`
@@ -27,6 +27,7 @@ const translateStyle = css`
 
 interface ChatListActionsBar {
   branching: ActionIconGroupItemType;
+  continueGeneration: ActionIconGroupItemType;
   copy: ActionIconGroupItemType;
   del: ActionIconGroupItemType;
   delAndRegenerate: ActionIconGroupItemType;
@@ -41,18 +42,28 @@ interface ChatListActionsBar {
 
 export const useChatListActionsBar = ({
   hasThread,
-}: { hasThread?: boolean } = {}): ChatListActionsBar => {
+  isContinuing,
+  isRegenerating,
+}: {
+  hasThread?: boolean;
+  isContinuing?: boolean;
+  isRegenerating?: boolean;
+} = {}): ChatListActionsBar => {
   const { t } = useTranslation(['common', 'chat']);
 
-  return useMemo(
+  return useMemo<ChatListActionsBar>(
     () => ({
       branching: {
-        disable: isDeprecatedEdition || undefined,
         icon: Split,
         key: 'branching',
-        label: !isDeprecatedEdition
-          ? t('branching', { defaultValue: 'Create Sub Topic' })
-          : t('branchingDisable'),
+        label: t('branching'),
+      },
+      continueGeneration: {
+        disabled: isContinuing,
+        icon: ArrowDownFromLine,
+        key: 'continueGeneration',
+        label: t('messageAction.continueGeneration', { ns: 'chat' }),
+        spin: isContinuing,
       },
       copy: {
         icon: Copy,
@@ -61,17 +72,16 @@ export const useChatListActionsBar = ({
       },
       del: {
         danger: true,
-        disable: hasThread || undefined,
+        disabled: hasThread,
         icon: Trash,
         key: 'del',
         label: hasThread ? t('messageAction.deleteDisabledByThreads', { ns: 'chat' }) : t('delete'),
       },
       delAndRegenerate: {
-        disable: hasThread || undefined,
+        disabled: hasThread || isRegenerating,
         icon: ListRestart,
         key: 'delAndRegenerate',
         label: t('messageAction.delAndRegenerate', {
-          defaultValue: 'Delete and regenerate',
           ns: 'chat',
         }),
       },
@@ -81,7 +91,7 @@ export const useChatListActionsBar = ({
       edit: {
         icon: Edit,
         key: 'edit',
-        label: t('edit', { defaultValue: 'Edit' }),
+        label: t('edit'),
       },
       export: {
         icon: DownloadIcon,
@@ -89,14 +99,16 @@ export const useChatListActionsBar = ({
         label: '导出为 PDF',
       },
       regenerate: {
+        disabled: isRegenerating,
         icon: RotateCcw,
         key: 'regenerate',
-        label: t('regenerate', { defaultValue: 'Regenerate' }),
+        label: t('regenerate'),
+        spin: isRegenerating,
       },
       share: {
         icon: Share2,
         key: 'share',
-        label: t('share', { defaultValue: 'Share' }),
+        label: t('share'),
       },
       translate: {
         children: localeOptions.map((i) => ({
@@ -114,6 +126,6 @@ export const useChatListActionsBar = ({
         label: t('tts.action', { ns: 'chat' }),
       },
     }),
-    [hasThread],
+    [hasThread, isContinuing, isRegenerating],
   );
 };

package/src/features/DataImporter/index.tsx

@@ -9,21 +9,32 @@ import { Center } from 'react-layout-kit';
 
 import DataStyleModal from '@/components/DataStyleModal';
 import { importService } from '@/services/import';
-import { ImportResult, ImportResults } from '@/services/import/_deprecated';
 import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 import { ImportPgDataStructure } from '@/types/export';
-import { ConfigFile } from '@/types/exportConfig';
-import { ErrorShape, FileUploadState, ImportStage, OnImportCallbacks } from '@/types/importer';
+import { ErrorShape, FileUploadState, ImportStage } from '@/types/importer';
 
 import ImportError from './Error';
 import { FileUploading } from './FileUploading';
 import ImportPreviewModal from './ImportDetail';
 import DataLoading from './Loading';
 import SuccessResult from './SuccessResult';
-import { importConfigFile } from './_deprecated';
 import { parseConfigFile } from './config';
 
+export interface ImportResult {
+  added: number;
+  errors: number;
+  skips: number;
+  updated?: number;
+}
+export interface ImportResults {
+  messages?: ImportResult;
+  sessionGroups?: ImportResult;
+  sessions?: ImportResult;
+  topics?: ImportResult;
+  type?: string;
+}
+
 const useStyles = createStyles(({ css }) => ({
   children: css`
     &::before {
@@ -157,62 +168,6 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
           const config = await parseConfigFile(file);
           if (!config) return false;
 
-          if (!('schemaHash' in config)) {
-            // TODO: remove in V2
-            await importConfigFile(file, async (config) => {
-              setImportState(ImportStage.Preparing);
-              console.log(config);
-
-              const importConfigState = async (
-                config: ConfigFile,
-                callbacks?: OnImportCallbacks,
-              ): Promise<void> => {
-                if (config.exportType === 'settings') {
-                  await importService.importSettings(config.state.settings);
-                  callbacks?.onStageChange?.(ImportStage.Success);
-                  return;
-                }
-
-                if (config.exportType === 'all') {
-                  await importService.importSettings(config.state.settings);
-                }
-
-                await importService.importData(
-                  {
-                    messages: (config.state as any).messages || [],
-                    sessionGroups: (config.state as any).sessionGroups || [],
-                    sessions: (config.state as any).sessions || [],
-                    topics: (config.state as any).topics || [],
-                    version: config.version,
-                  },
-                  callbacks,
-                );
-              };
-
-              await importConfigState(config, {
-                onError: (error) => {
-                  setImportError(error);
-                },
-                onFileUploading: (state) => {
-                  setUploadingState(state);
-                },
-                onStageChange: (stage) => {
-                  setImportState(stage);
-                },
-                onSuccess: (data, duration) => {
-                  if (data) setImportResults(data);
-                  setDuration(duration);
-                },
-              });
-
-              await refreshSessions();
-              await refreshMessages();
-              await refreshTopics();
-            });
-
-            return false;
-          }
-
           setImportPgData(config);
           setShowImportModal(true);
 

package/src/features/DevPanel/PostgresViewer/usePgTable.ts

@@ -25,7 +25,8 @@ export const useTableColumns = (tableName?: string) => {
 export const usePgTable = (tableName?: string) => {
   const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
 
-  return useSWR(isDBInited && tableName ? FETCH_TABLE_DATA_KEY(tableName) : null, ([, table]) =>
-    tableViewerService.getTableData(table),
+  return useSWR(
+    isDBInited && tableName ? FETCH_TABLE_DATA_KEY(tableName) : null,
+    ([, table]) => tableViewerService.getTableData(table) as any,
   );
 };

package/src/features/MCP/utils.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, it } from 'vitest';
+
+import { genServerConfig } from './utils';
+
+describe('genServerConfig', () => {
+  it('should generate HTTP MCP server config with url', () => {
+    const result = genServerConfig('context7', {
+      type: 'http',
+      url: 'https://mcp.context7.com/mcp',
+    } as any);
+
+    const config = JSON.parse(result);
+
+    expect(config).toEqual({
+      mcpServers: {
+        context7: {
+          url: 'https://mcp.context7.com/mcp',
+        },
+      },
+    });
+  });
+
+  it('should generate stdio MCP server config with command and args', () => {
+    const result = genServerConfig('github', {
+      args: ['-y', '@modelcontextprotocol/server-github'],
+      command: 'npx',
+      type: 'stdio',
+    } as any);
+
+    const config = JSON.parse(result);
+
+    expect(config).toEqual({
+      mcpServers: {
+        github: {
+          args: ['-y', '@modelcontextprotocol/server-github'],
+          command: 'npx',
+        },
+      },
+    });
+  });
+
+  it('should handle empty connection config', () => {
+    const result = genServerConfig('test-plugin', {} as any);
+
+    const config = JSON.parse(result);
+
+    expect(config).toEqual({
+      mcpServers: {
+        'test-plugin': {
+          args: [],
+          command: {},
+        },
+      },
+    });
+  });
+
+  it('should handle undefined connection', () => {
+    const result = genServerConfig('test-plugin', undefined);
+
+    const config = JSON.parse(result);
+
+    expect(config).toEqual({
+      mcpServers: {
+        'test-plugin': {
+          args: [],
+          command: {},
+        },
+      },
+    });
+  });
+
+  it('should prioritize url over command/args when both exist', () => {
+    const result = genServerConfig('hybrid', {
+      args: ['arg1'],
+      command: 'cmd',
+      type: 'http',
+      url: 'https://example.com/mcp',
+    } as any);
+
+    const config = JSON.parse(result);
+
+    // Should only include url, not command/args
+    expect(config).toEqual({
+      mcpServers: {
+        hybrid: {
+          url: 'https://example.com/mcp',
+        },
+      },
+    });
+  });
+});

package/src/features/MCP/utils.ts

@@ -1,7 +1,24 @@
 import { ConnectionConfig, DeploymentOption } from '@lobehub/market-types';
 
-export const genServerConfig = (identifier?: string, connection?: ConnectionConfig) =>
-  JSON.stringify(
+export const genServerConfig = (identifier?: string, connection?: ConnectionConfig) => {
+  // 检查是否为 HTTP 类型
+  if (connection?.url) {
+    // HTTP 类型配置
+    return JSON.stringify(
+      {
+        mcpServers: {
+          [String(identifier)]: {
+            url: connection.url,
+          },
+        },
+      },
+      null,
+      2,
+    );
+  }
+
+  // stdio 类型配置
+  return JSON.stringify(
     {
       mcpServers: {
         [String(identifier)]: {
@@ -13,6 +30,7 @@ export const genServerConfig = (identifier?: string, connection?: ConnectionConf
     null,
     2,
   );
+};
 
 export const getRecommendedDeployment = (deploymentOptions: DeploymentOption[]) =>
   deploymentOptions?.find((item) => item.isRecommended) || deploymentOptions?.[0];

package/src/features/PluginStore/Content.tsx

@@ -4,7 +4,6 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { isDesktop } from '@/const/version';
 import { useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 import { PluginStoreTabs } from '@/store/tool/slices/oldStore';
@@ -22,7 +21,7 @@ export const Content = memo(() => {
   const [keywords] = useState<string>();
 
   const options = [
-    isDesktop ? { label: t('store.tabs.mcp'), value: PluginStoreTabs.MCP } : undefined,
+    { label: t('store.tabs.mcp'), value: PluginStoreTabs.MCP },
     { label: t('store.tabs.old'), value: PluginStoreTabs.Plugin },
     { label: t('store.tabs.installed'), value: PluginStoreTabs.Installed },
   ].filter(Boolean) as SegmentedOptions;
@@ -45,7 +44,7 @@ export const Content = memo(() => {
             value={listType}
             variant={'filled'}
           />
-          <AddPluginButton />
+         {mobile ? null : <AddPluginButton />}
         </Flexbox>
         <Search />
       </Flexbox>

package/src/features/PluginStore/McpList/index.tsx

@@ -5,7 +5,7 @@ import { memo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useToolStore } from '@/store/tool';
-
+import { useServerConfigStore } from '@/store/serverConfig';
 import DetailLoading from './Detail/Loading';
 import List from './List';
 
@@ -15,6 +15,8 @@ export const MCPPluginList = memo(() => {
   const ref = useRef<HTMLDivElement>(null);
   const theme = useTheme();
 
+  const mobile = useServerConfigStore((s) => s.isMobile);
+
   return (
     <Flexbox
       height={'75vh'}
@@ -26,7 +28,9 @@ export const MCPPluginList = memo(() => {
       }}
       width={'100%'}
     >
-      <DraggablePanel maxWidth={1024} minWidth={420} placement={'left'}>
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore */}
+      <DraggablePanel maxWidth={1024} minWidth={mobile ? '100vw' : 420} placement={'left'}>
         <List
           setIdentifier={(identifier) => {
             useToolStore.setState({ activeMCPIdentifier: identifier });

package/src/features/PluginTag/index.tsx

@@ -7,7 +7,6 @@ import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 
 import Avatar from '@/components/Plugins/PluginAvatar';
-import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 
@@ -18,8 +17,7 @@ export interface PluginTagProps {
 }
 
 const PluginTag = memo<PluginTagProps>(({ plugins }) => {
-  const { showDalle } = useServerConfigStore(featureFlagsSelectors);
-  const list = useToolStore(toolSelectors.metaList(showDalle), isEqual);
+  const list = useToolStore(toolSelectors.metaList, isEqual);
 
   const displayPlugin = useToolStore(toolSelectors.getMetaById(plugins[0]), isEqual);
 

package/src/features/PluginsUI/Render/BuiltinType/index.test.tsx

@@ -1,22 +1,19 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { DalleManifest } from '@/tools/dalle';
-import { BuiltinToolsRenders } from '@/tools/renders';
-
 import BuiltinType from './index';
 
-// Mock Render component and useParseContent hook
+// Mock renders module
 vi.mock('@/tools/renders', () => ({
   BuiltinToolsRenders: {
-    dalle3: vi.fn(() => <div>Test Renderer</div>),
-    [DalleManifest.identifier]: vi.fn(() => <div>{DalleManifest.identifier}</div>),
+    'lobe-web-browsing': vi.fn(({ content }) => <div>WebBrowsingRender: {content}</div>),
+    'lobe-code-interpreter': vi.fn(({ content }) => <div>CodeInterpreterRender: {content}</div>),
   },
 }));
 
-// Mock Loading component
-vi.mock('../Loading', () => ({
-  default: vi.fn(() => <div>Loading...</div>),
+// Mock useParseContent hook
+vi.mock('../useParseContent', () => ({
+  useParseContent: vi.fn((content) => ({ data: content })),
 }));
 
 describe('BuiltinType', () => {
@@ -25,29 +22,41 @@ describe('BuiltinType', () => {
     expect(container).toBeEmptyDOMElement();
   });
 
-  it('should not render anything if content is not JSON and no identifier', () => {
-    const { container } = render(<BuiltinType content="..." id="123" />);
-    expect(container).toBeEmptyDOMElement();
-  });
-
   it('should not render anything if identifier is unknown', () => {
     const { container } = render(<BuiltinType content="{}" id="123" identifier="unknown" />);
     expect(container).toBeEmptyDOMElement();
   });
 
-  describe('DALL·E', () => {
-    it('should render the correct renderer if identifier is dalle3', () => {
-      render(<BuiltinType content='{"some":"data"}' id="123" identifier="dalle3" />);
-      expect(BuiltinToolsRenders.dalle3).toHaveBeenCalled();
-      expect(screen.getByText('Test Renderer')).toBeInTheDocument();
-    });
-
-    it('should render the correct renderer if is DALL·E ', () => {
-      render(
-        <BuiltinType content='{"some":"data"}' id="123" identifier={DalleManifest.identifier} />,
-      );
-      expect(BuiltinToolsRenders.dalle3).toHaveBeenCalled();
-      expect(screen.getByText(DalleManifest.identifier)).toBeInTheDocument();
-    });
+  it('should render the correct renderer for web browsing', () => {
+    const content = '{"query":"test"}';
+    render(<BuiltinType content={content} id="123" identifier="lobe-web-browsing" />);
+    expect(screen.getByText(`WebBrowsingRender: ${content}`)).toBeInTheDocument();
+  });
+
+  it('should render the correct renderer for code interpreter', () => {
+    const content = '{"code":"print(1)"}';
+    render(<BuiltinType content={content} id="123" identifier="lobe-code-interpreter" />);
+    expect(screen.getByText(`CodeInterpreterRender: ${content}`)).toBeInTheDocument();
+  });
+
+  it('should pass correct props to renderer', () => {
+    const content = '{"test":"data"}';
+    const args = '{"arg":"value"}';
+    const pluginState = { state: 'value' };
+    const pluginError = { error: 'test' };
+
+    render(
+      <BuiltinType
+        content={content}
+        id="msg-123"
+        identifier="lobe-web-browsing"
+        arguments={args}
+        pluginState={pluginState}
+        pluginError={pluginError}
+        apiName="testApi"
+      />,
+    );
+
+    expect(screen.getByText(`WebBrowsingRender: ${content}`)).toBeInTheDocument();
   });
 });

package/src/features/PluginsUI/Render/BuiltinType/index.tsx

@@ -1,7 +1,7 @@
+import { safeParseJSON } from '@lobechat/utils';
 import { memo } from 'react';
 
 import { BuiltinToolsRenders } from '@/tools/renders';
-import { safeParseJSON } from '@/utils/safeParseJSON';
 
 import { useParseContent } from '../useParseContent';
 

package/src/features/PluginsUI/Render/MCPType/index.tsx

@@ -0,0 +1,52 @@
+import { Markdown } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Arguments from '@/features/Conversation/Messages/Group/Tool/Render/Arguments';
+import { ToolCallResult } from '@/libs/mcp';
+
+export interface MCPTypeProps {
+  apiName?: string;
+  arguments?: string;
+  content: string;
+  id: string;
+  identifier?: string;
+  loading?: boolean;
+  pluginError?: any;
+  pluginState?: ToolCallResult;
+}
+
+const MCPType = memo<MCPTypeProps>(({ pluginState, arguments: args }) => {
+  if (!pluginState) return;
+
+  const { content } = pluginState;
+
+  return (
+    <Flexbox gap={8} style={{ maxHeight: 400, overflow: 'scroll', padding: 8, width: '100%' }}>
+      <div>
+        <Arguments arguments={args} />
+      </div>
+      <Flexbox>
+        <Flexbox>
+          {content.map((item) => {
+            switch (item.type) {
+              case 'text': {
+                return (
+                  <Markdown key={item.text} variant={'chat'}>
+                    {item.text}
+                  </Markdown>
+                );
+              }
+
+              default: {
+                return null;
+              }
+            }
+          })}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default MCPType;