@lobehub/lobehub 2.0.0-next.3 → 2.0.0-next.31

package/src/features/Conversation/Messages/Group/index.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { UIChatMessage } from '@lobechat/types';
+import { useResponsive } from 'antd-style';
+import { memo, useCallback } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Avatar from '@/features/ChatItem/components/Avatar';
+import BorderSpacing from '@/features/ChatItem/components/BorderSpacing';
+import Title from '@/features/ChatItem/components/Title';
+import { useStyles } from '@/features/ChatItem/style';
+import GroupChildren from '@/features/Conversation/Messages/Group/GroupChildren';
+import Usage from '@/features/Conversation/components/Extras/Usage';
+import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
+import { useAgentStore } from '@/store/agent';
+import { agentChatConfigSelectors } from '@/store/agent/selectors';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors, messageStateSelectors } from '@/store/chat/slices/message/selectors';
+import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
+import { GroupActionsBar } from './Actions';
+import EditState from './EditState';
+
+const MOBILE_AVATAR_SIZE = 32;
+
+interface GroupMessageProps extends UIChatMessage {
+  disableEditing?: boolean;
+  index: number;
+  showTitle?: boolean;
+}
+
+const GroupMessage = memo<GroupMessageProps>((props) => {
+  const {
+    showTitle,
+    id,
+    disableEditing,
+    usage,
+    index,
+    createdAt,
+    meta,
+    children,
+    performance,
+    model,
+    provider,
+  } = props;
+  const avatar = meta;
+  const { mobile } = useResponsive();
+  const placement = 'left';
+  const type = useAgentStore(agentChatConfigSelectors.displayMode);
+  const variant = type === 'chat' ? 'bubble' : 'docs';
+
+  const { styles } = useStyles({
+    editing: false,
+    placement,
+    primary: false,
+    showTitle,
+    time: createdAt,
+    title: avatar.title,
+    variant,
+  });
+
+  const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
+  const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
+  const openChatSettings = useOpenChatSettings();
+  const lastAssistantMsg = useChatStore(chatSelectors.getGroupLatestMessageWithoutTools(id));
+
+  const contentId = lastAssistantMsg?.id;
+
+  const isEditing = useChatStore(messageStateSelectors.isMessageEditing(contentId || ''));
+
+  // ======================= Performance Optimization ======================= //
+  // these useMemo/useCallback are all for the performance optimization
+  // maybe we can remove it in React 19
+  // ======================================================================== //
+  const onAvatarClick = useCallback(() => {
+    if (!isInbox) {
+      toggleSystemRole(true);
+    } else {
+      openChatSettings();
+    }
+  }, [isInbox]);
+
+  return (
+    <Flexbox className={styles.container} gap={mobile ? 6 : 12}>
+      <Flexbox gap={4} horizontal>
+        <Avatar
+          alt={avatar.title || 'avatar'}
+          avatar={avatar}
+          onClick={onAvatarClick}
+          placement={placement}
+          size={mobile ? MOBILE_AVATAR_SIZE : undefined}
+          style={{ marginTop: 6 }}
+        />
+        <Title avatar={avatar} placement={placement} showTitle time={createdAt} />
+      </Flexbox>
+      {isEditing && contentId ? (
+        <EditState content={lastAssistantMsg?.content} id={contentId} />
+      ) : (
+        <Flexbox
+          align={'flex-start'}
+          className={styles.messageContent}
+          data-layout={'vertical'}
+          direction={'vertical'}
+          gap={8}
+          width={'100%'}
+        >
+          {children && children.length > 0 && (
+            <GroupChildren
+              blocks={children}
+              contentId={contentId}
+              disableEditing={disableEditing}
+              messageIndex={index}
+            />
+          )}
+
+          {model && (
+            <Usage metadata={{ ...performance, ...usage }} model={model} provider={provider!} />
+          )}
+          {!disableEditing && (
+            <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
+              <GroupActionsBar
+                contentBlock={lastAssistantMsg}
+                contentId={contentId}
+                data={props}
+                id={id}
+                index={index}
+              />
+            </Flexbox>
+          )}
+        </Flexbox>
+      )}
+
+      {mobile && <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />}
+    </Flexbox>
+  );
+});
+
+export default GroupMessage;

package/src/features/Conversation/Messages/User/Extra.tsx

@@ -5,7 +5,7 @@ import ExtraContainer from '@/features/Conversation/components/Extras/ExtraConta
 import TTS from '@/features/Conversation/components/Extras/TTS';
 import Translate from '@/features/Conversation/components/Extras/Translate';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 interface UserMessageExtraProps {
   content: string;
@@ -13,7 +13,7 @@ interface UserMessageExtraProps {
   id: string;
 }
 export const UserMessageExtra = memo<UserMessageExtraProps>(({ extra, id, content }) => {
-  const loading = useChatStore(chatSelectors.isMessageGenerating(id));
+  const loading = useChatStore(messageStateSelectors.isMessageGenerating(id));
 
   const showTranslate = !!extra?.translate;
   const showTTS = !!extra?.tts;

package/src/features/Conversation/Messages/User/index.tsx

@@ -15,7 +15,7 @@ import { useUserAvatar } from '@/hooks/useUserAvatar';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { useUserStore } from '@/store/user';
@@ -55,9 +55,9 @@ const UserMessage = memo<UserMessageProps>((props) => {
   const displayMode = useAgentStore(agentChatConfigSelectors.displayMode);
 
   const [editing, generating, isInRAGFlow] = useChatStore((s) => [
-    chatSelectors.isMessageEditing(id)(s),
-    chatSelectors.isMessageGenerating(id)(s),
-    chatSelectors.isMessageInRAGFlow(id)(s),
+    messageStateSelectors.isMessageEditing(id)(s),
+    messageStateSelectors.isMessageGenerating(id)(s),
+    messageStateSelectors.isMessageInRAGFlow(id)(s),
   ]);
 
   const loading = isInRAGFlow || generating;

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

@@ -1,21 +1,22 @@
 'use client';
 
+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 { Flexbox } from 'react-layout-kit';
 
-import { isDesktop } from '@/const/version';
 import {
   removeVirtuosoVisibleItem,
   upsertVirtuosoVisibleItem,
 } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { chatSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import History from '../components/History';
 import { InPortalThreadContext } from '../context/InPortalThreadContext';
 import AssistantMessage from './Assistant';
+import GroupMessage from './Group';
 import SupervisorMessage from './Supervisor';
 import UserMessage from './User';
 
@@ -57,7 +58,7 @@ const Item = memo<ChatListItemProps>(
 
     const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
 
-    const [isMessageLoading] = useChatStore((s) => [chatSelectors.isMessageLoading(id)(s)]);
+    const [isMessageLoading] = useChatStore((s) => [messageStateSelectors.isMessageLoading(id)(s)]);
 
     // ======================= Performance Optimization ======================= //
     // these useMemo/useCallback are all for the performance optimization
@@ -132,6 +133,17 @@ const Item = memo<ChatListItemProps>(
           );
         }
 
+        case 'group': {
+          return (
+            <GroupMessage
+              {...item}
+              disableEditing={disableEditing}
+              index={index}
+              showTitle={item.groupId ? true : false}
+            />
+          );
+        }
+
         case 'supervisor': {
           return <SupervisorMessage {...item} disableEditing={disableEditing} index={index} />;
         }

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

@@ -1,7 +1,7 @@
 import { memo, useEffect } from 'react';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { chatSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import BackBottom from './BackBottom';
 
@@ -11,7 +11,7 @@ interface AutoScrollProps {
   onScrollToBottom: (type: 'auto' | 'click') => void;
 }
 const AutoScroll = memo<AutoScrollProps>(({ atBottom, isScrolling, onScrollToBottom }) => {
-  const trackVisibility = useChatStore(chatSelectors.isAIGenerating);
+  const trackVisibility = useChatStore(messageStateSelectors.isAIGenerating);
   const str = useChatStore(chatSelectors.mainAIChatsMessageString);
   const reasoningStr = useChatStore(chatSelectors.mainAILatestMessageReasoningContent);
 

package/src/features/Conversation/components/Extras/Usage/UsageDetail/index.tsx

@@ -11,7 +11,7 @@ import InfoTooltip from '@/components/InfoTooltip';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
-import { formatNumber } from '@/utils/format';
+import { formatNumber, formatShortenNumber } from '@/utils/format';
 
 import ModelCard from './ModelCard';
 import TokenProgress, { TokenProgressItem } from './TokenProgress';
@@ -111,10 +111,13 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
     },
   ].filter(Boolean) as TokenProgressItem[];
 
-  const displayTotal =
+  const totalCount =
     isShowCredit && !!detailTokens.totalTokens
-      ? formatNumber(detailTokens.totalTokens.credit)
-      : formatNumber(detailTokens.totalTokens!.token);
+      ? detailTokens.totalTokens.credit
+      : detailTokens.totalTokens!.token;
+
+  const shortTotal = (formatShortenNumber(totalCount) as string).toLowerCase?.();
+  const detailTotal = formatNumber(totalCount);
 
   const averagePricing = formatNumber(
     detailTokens.totalTokens!.credit / detailTokens.totalTokens!.token,
@@ -171,7 +174,7 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
                 <div style={{ color: theme.colorTextSecondary }}>
                   {t('messages.tokenDetails.total')}
                 </div>
-                <div style={{ fontWeight: 500 }}>{displayTotal}</div>
+                <div style={{ fontWeight: 500 }}>{detailTotal}</div>
               </Flexbox>
               {isShowCredit && (
                 <Flexbox align={'center'} gap={4} horizontal justify={'space-between'}>
@@ -212,7 +215,7 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
     >
       <Center gap={2} horizontal style={{ cursor: 'default' }}>
         <Icon icon={isShowCredit ? BadgeCent : CoinsIcon} />
-        {displayTotal}
+        {shortTotal}
       </Center>
     </Popover>
   );

package/src/features/Conversation/components/ShareMessageModal/ShareImage/Preview.tsx

@@ -1,3 +1,4 @@
+import { OFFICIAL_DOMAIN } from '@lobechat/const';
 import { UIChatMessage } from '@lobechat/types';
 import { ModelTag } from '@lobehub/icons';
 import { Avatar } from '@lobehub/ui';
@@ -14,7 +15,6 @@ import { agentSelectors } from '@/store/agent/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
 
-import pkg from '../../../../../../package.json';
 import { useContainerStyles } from '../style';
 import { useStyles } from './style';
 import { FieldType } from './type';
@@ -75,7 +75,7 @@ const Preview = memo<PreviewProps>(
             {withFooter ? (
               <Flexbox align={'center'} className={styles.footer} gap={4}>
                 <ProductLogo type={'combine'} />
-                <div className={styles.url}>{pkg.homepage}</div>
+                <div className={styles.url}>{OFFICIAL_DOMAIN}</div>
               </Flexbox>
             ) : (
               <div />

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);