@lobehub/chat 1.81.7 → 1.81.9

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

@@ -6,10 +6,11 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import InfoTooltip from '@/components/InfoTooltip';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
-import { ModelTokensUsage } from '@/types/message';
+import { MessageMetadata } from '@/types/message';
 import { formatNumber } from '@/utils/format';
 
 import ModelCard from './ModelCard';
@@ -17,19 +18,19 @@ import TokenProgress, { TokenProgressItem } from './TokenProgress';
 import { getDetailsToken } from './tokens';
 
 interface TokenDetailProps {
+  meta: MessageMetadata;
   model: string;
   provider: string;
-  usage: ModelTokensUsage;
 }
 
-const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
+const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
   const { t } = useTranslation('chat');
   const theme = useTheme();
 
   const modelCard = useAiInfraStore(aiModelSelectors.getModelCard(model, provider));
   const isShowCredit = useGlobalStore(systemStatusSelectors.isShowCredit) && !!modelCard?.pricing;
 
-  const detailTokens = getDetailsToken(usage, modelCard);
+  const detailTokens = getDetailsToken(meta, modelCard);
   const inputDetails = [
     !!detailTokens.inputAudio && {
       color: theme.cyan9,
@@ -113,6 +114,10 @@ const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
     detailTokens.totalTokens!.credit / detailTokens.totalTokens!.token,
     2,
   );
+
+  const tps = meta?.tps ? formatNumber(meta.tps, 2) : undefined;
+  const ttft = meta?.ttft ? formatNumber(meta.ttft / 1000, 2) : undefined;
+
   return (
     <Popover
       arrow={false}
@@ -170,6 +175,28 @@ const TokenDetail = memo<TokenDetailProps>(({ usage, model, provider }) => {
                   <div style={{ fontWeight: 500 }}>{averagePricing}</div>
                 </Flexbox>
               )}
+              {tps && (
+                <Flexbox align={'center'} gap={4} horizontal justify={'space-between'}>
+                  <Flexbox gap={8} horizontal>
+                    <div style={{ color: theme.colorTextSecondary }}>
+                      {t('messages.tokenDetails.speed.tps.title')}
+                    </div>
+                    <InfoTooltip title={t('messages.tokenDetails.speed.tps.tooltip')} />
+                  </Flexbox>
+                  <div style={{ fontWeight: 500 }}>{tps}</div>
+                </Flexbox>
+              )}
+              {ttft && (
+                <Flexbox align={'center'} gap={4} horizontal justify={'space-between'}>
+                  <Flexbox gap={8} horizontal>
+                    <div style={{ color: theme.colorTextSecondary }}>
+                      {t('messages.tokenDetails.speed.ttft.title')}
+                    </div>
+                    <InfoTooltip title={t('messages.tokenDetails.speed.ttft.tooltip')} />
+                  </Flexbox>
+                  <div style={{ fontWeight: 500 }}>{ttft}s</div>
+                </Flexbox>
+              )}
             </Flexbox>
           </Flexbox>
         </Flexbox>

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

@@ -31,7 +31,7 @@ const Usage = memo<UsageProps>(({ model, metadata, provider }) => {
       </Center>
 
       {!!metadata.totalTokens && (
-        <TokenDetail model={model as string} provider={provider} usage={metadata} />
+        <TokenDetail meta={metadata} model={model as string} provider={provider} />
       )}
     </Flexbox>
   );

package/src/libs/agent-runtime/anthropic/index.ts

@@ -56,6 +56,7 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
   async chat(payload: ChatStreamPayload, options?: ChatCompetitionOptions) {
     try {
       const anthropicPayload = await this.buildAnthropicPayload(payload);
+      const inputStartAt = Date.now();
 
       if (this.isDebug()) {
         console.log('[requestPayload]');
@@ -79,9 +80,12 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
         debugStream(debug.toReadableStream()).catch(console.error);
       }
 
-      return StreamingResponse(AnthropicStream(prod, options?.callback), {
-        headers: options?.headers,
-      });
+      return StreamingResponse(
+        AnthropicStream(prod, { callbacks: options?.callback, inputStartAt }),
+        {
+          headers: options?.headers,
+        },
+      );
     } catch (error) {
       throw this.handleError(error);
     }

package/src/libs/agent-runtime/perplexity/index.test.ts

@@ -225,7 +225,10 @@ describe('LobePerplexityAI', () => {
         stream.push(decoder.decode(value));
       }
 
-      expect(stream).toEqual(
+      // Slice out speed chunk
+      const noSpeedStream = stream.slice(0, -3);
+
+      expect(noSpeedStream).toEqual(
         [
           'id: 506d64fb-e7f2-4d94-b80f-158369e9446d',
           'event: text',

package/src/libs/agent-runtime/utils/openaiCompatibleFactory/index.ts

@@ -201,6 +201,7 @@ export const LobeOpenAICompatibleFactory = <T extends Record<string, any> = any>
 
     async chat({ responseMode, ...payload }: ChatStreamPayload, options?: ChatCompetitionOptions) {
       try {
+        const inputStartAt = Date.now();
         const postPayload = chatCompletion?.handlePayload
           ? chatCompletion.handlePayload(payload, this._options)
           : ({
@@ -253,10 +254,14 @@ export const LobeOpenAICompatibleFactory = <T extends Record<string, any> = any>
             debugStream(useForDebugStream).catch(console.error);
           }
 
-          const streamHandler = chatCompletion?.handleStream || OpenAIStream;
-          return StreamingResponse(streamHandler(prod, streamOptions), {
-            headers: options?.headers,
-          });
+          return StreamingResponse(
+            chatCompletion?.handleStream
+              ? chatCompletion.handleStream(prod, streamOptions.callbacks)
+              : OpenAIStream(prod, { ...streamOptions, inputStartAt }),
+            {
+              headers: options?.headers,
+            },
+          );
         }
 
         if (debug?.chatCompletion?.()) {
@@ -269,10 +274,14 @@ export const LobeOpenAICompatibleFactory = <T extends Record<string, any> = any>
           chatCompletion?.handleTransformResponseToStream || transformResponseToStream;
         const stream = transformHandler(response as unknown as OpenAI.ChatCompletion);
 
-        const streamHandler = chatCompletion?.handleStream || OpenAIStream;
-        return StreamingResponse(streamHandler(stream, streamOptions), {
-          headers: options?.headers,
-        });
+        return StreamingResponse(
+          chatCompletion?.handleStream
+            ? chatCompletion.handleStream(stream, streamOptions.callbacks)
+            : OpenAIStream(stream, { ...streamOptions, inputStartAt }),
+          {
+            headers: options?.headers,
+          },
+        );
       } catch (error) {
         throw this.handleError(error);
       }

package/src/libs/agent-runtime/utils/streams/anthropic.test.ts

@@ -61,9 +61,11 @@ describe('AnthropicStream', () => {
     const onCompletionMock = vi.fn();
 
     const protocolStream = AnthropicStream(mockAnthropicStream, {
-      onStart: onStartMock,
-      onText: onTextMock,
-      onCompletion: onCompletionMock,
+      callbacks: {
+        onStart: onStartMock,
+        onText: onTextMock,
+        onCompletion: onCompletionMock,
+      },
     });
 
     const decoder = new TextDecoder();
@@ -165,7 +167,9 @@ describe('AnthropicStream', () => {
     const onToolCallMock = vi.fn();
 
     const protocolStream = AnthropicStream(mockReadableStream, {
-      onToolsCalling: onToolCallMock,
+      callbacks: {
+        onToolsCalling: onToolCallMock,
+      },
     });
 
     const decoder = new TextDecoder();
@@ -317,7 +321,9 @@ describe('AnthropicStream', () => {
     const onToolCallMock = vi.fn();
 
     const protocolStream = AnthropicStream(mockReadableStream, {
-      onToolsCalling: onToolCallMock,
+      callbacks: {
+        onToolsCalling: onToolCallMock,
+      },
     });
 
     const decoder = new TextDecoder();

package/src/libs/agent-runtime/utils/streams/anthropic.ts

@@ -12,6 +12,7 @@ import {
   convertIterableToStream,
   createCallbacksTransformer,
   createSSEProtocolTransformer,
+  createTokenSpeedCalculator,
 } from './protocol';
 
 export const transformAnthropicStream = (
@@ -188,9 +189,14 @@ export const transformAnthropicStream = (
   }
 };
 
+export interface AnthropicStreamOptions {
+  callbacks?: ChatStreamCallbacks;
+  inputStartAt?: number;
+}
+
 export const AnthropicStream = (
   stream: Stream<Anthropic.MessageStreamEvent> | ReadableStream,
-  callbacks?: ChatStreamCallbacks,
+  { callbacks, inputStartAt }: AnthropicStreamOptions = {},
 ) => {
   const streamStack: StreamContext = { id: '' };
 
@@ -198,6 +204,9 @@ export const AnthropicStream = (
     stream instanceof ReadableStream ? stream : convertIterableToStream(stream);
 
   return readableStream
-    .pipeThrough(createSSEProtocolTransformer(transformAnthropicStream, streamStack))
+    .pipeThrough(
+      createTokenSpeedCalculator(transformAnthropicStream, { inputStartAt, streamStack }),
+    )
+    .pipeThrough(createSSEProtocolTransformer((c) => c, streamStack))
     .pipeThrough(createCallbacksTransformer(callbacks));
 };

package/src/libs/agent-runtime/utils/streams/openai.ts

@@ -16,6 +16,7 @@ import {
   createCallbacksTransformer,
   createFirstErrorHandleTransformer,
   createSSEProtocolTransformer,
+  createTokenSpeedCalculator,
   generateToolCallId,
 } from './protocol';
 
@@ -218,12 +219,13 @@ export interface OpenAIStreamOptions {
     name: string;
   }) => ILobeAgentRuntimeErrorType | undefined;
   callbacks?: ChatStreamCallbacks;
+  inputStartAt?: number;
   provider?: string;
 }
 
 export const OpenAIStream = (
   stream: Stream<OpenAI.ChatCompletionChunk> | ReadableStream,
-  { callbacks, provider, bizErrorTypeTransformer }: OpenAIStreamOptions = {},
+  { callbacks, provider, bizErrorTypeTransformer, inputStartAt }: OpenAIStreamOptions = {},
 ) => {
   const streamStack: StreamContext = { id: '' };
 
@@ -236,7 +238,8 @@ export const OpenAIStream = (
       // provider like huggingface or minimax will return error in the stream,
       // so in the first Transformer, we need to handle the error
       .pipeThrough(createFirstErrorHandleTransformer(bizErrorTypeTransformer, provider))
-      .pipeThrough(createSSEProtocolTransformer(transformOpenAIStream, streamStack))
+      .pipeThrough(createTokenSpeedCalculator(transformOpenAIStream, { inputStartAt, streamStack }))
+      .pipeThrough(createSSEProtocolTransformer((c) => c, streamStack))
       .pipeThrough(createCallbacksTransformer(callbacks))
   );
 };

package/src/libs/agent-runtime/utils/streams/protocol.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { createSSEDataExtractor } from './protocol';
+import { createSSEDataExtractor, createTokenSpeedCalculator } from './protocol';
 
 describe('createSSEDataExtractor', () => {
   // Helper function to convert string to Uint8Array
@@ -135,3 +135,69 @@ describe('createSSEDataExtractor', () => {
     });
   });
 });
+
+describe('createTokenSpeedCalculator', async () => {
+  // Mock the param from caller - 1000 to avoid div 0
+  const inputStartAt = Date.now() - 1000;
+
+  // Helper function to process chunks through transformer
+  const processChunk = async (transformer: TransformStream, chunk: any) => {
+    const results: any[] = [];
+    const readable = new ReadableStream({
+      start(controller) {
+        controller.enqueue(chunk);
+        controller.close();
+      },
+    });
+
+    const writable = new WritableStream({
+      write(chunk) {
+        results.push(chunk);
+      },
+    });
+
+    await readable.pipeThrough(transformer).pipeTo(writable);
+
+    return results;
+  };
+
+  it('should calculate token speed correctly', async () => {
+    const chunks = [
+      { data: '', id: 'chatcmpl-BKO1bogylHvMaYfETjTAzrCguYwZy', type: 'text' },
+      { data: 'hi', id: 'chatcmpl-BKO1bogylHvMaYfETjTAzrCguYwZy', type: 'text' },
+      { data: 'stop', id: 'chatcmpl-BKO1bogylHvMaYfETjTAzrCguYwZy', type: 'stop' },
+      {
+        data: {
+          inputTextTokens: 9,
+          outputTextTokens: 1,
+          totalInputTokens: 9,
+          totalOutputTokens: 1,
+          totalTokens: 10,
+        },
+        id: 'chatcmpl-BKO1bogylHvMaYfETjTAzrCguYwZy',
+        type: 'usage',
+      },
+    ];
+
+    const transformer = createTokenSpeedCalculator((v) => v, { inputStartAt });
+    const results = await processChunk(transformer, chunks);
+    expect(results).toHaveLength(chunks.length + 1);
+    const speedChunk = results.slice(-1)[0];
+    expect(speedChunk.id).toBe('output_speed');
+    expect(speedChunk.type).toBe('speed');
+    expect(speedChunk.data.tps).not.toBeNaN();
+    expect(speedChunk.data.ttft).not.toBeNaN();
+  });
+
+  it('should not calculate token speed if no usage', async () => {
+    const chunks = [
+      { data: '', id: 'chatcmpl-BKO1bogylHvMaYfETjTAzrCguYwZy', type: 'text' },
+      { data: 'hi', id: 'chatcmpl-BKO1bogylHvMaYfETjTAzrCguYwZy', type: 'text' },
+      { data: 'stop', id: 'chatcmpl-BKO1bogylHvMaYfETjTAzrCguYwZy', type: 'stop' },
+    ];
+
+    const transformer = createTokenSpeedCalculator((v) => v, { inputStartAt });
+    const results = await processChunk(transformer, chunks);
+    expect(results).toHaveLength(chunks.length);
+  });
+});

package/src/libs/agent-runtime/utils/streams/protocol.ts

@@ -1,4 +1,4 @@
-import { ModelTokensUsage } from '@/types/message';
+import { ModelSpeed, ModelTokensUsage } from '@/types/message';
 import { safeParseJSON } from '@/utils/safeParseJSON';
 
 import { AgentRuntimeErrorType } from '../../error';
@@ -52,6 +52,8 @@ export interface StreamProtocolChunk {
     | 'error'
     // token usage
     | 'usage'
+    // performance monitor
+    | 'speed'
     // unknown data result
     | 'data';
 }
@@ -287,3 +289,46 @@ export const createSSEDataExtractor = () =>
       }
     },
   });
+
+export const TOKEN_SPEED_CHUNK_ID = 'output_speed';
+
+/**
+ * Create a middleware to calculate the token generate speed
+ * @requires createSSEProtocolTransformer
+ */
+export const createTokenSpeedCalculator = (
+  transformer: (chunk: any, stack: StreamContext) => StreamProtocolChunk | StreamProtocolChunk[],
+  { streamStack, inputStartAt }: { inputStartAt?: number; streamStack?: StreamContext } = {},
+) => {
+  let outputStartAt: number | undefined;
+
+  const process = (chunk: StreamProtocolChunk) => {
+    let result = [chunk];
+    // if the chunk is the first text chunk, set as output start
+    if (!outputStartAt && chunk.type === 'text') outputStartAt = Date.now();
+    // if the chunk is the stop chunk, set as output finish
+    if (inputStartAt && outputStartAt && chunk.type === 'usage') {
+      const outputTokens = chunk.data?.totalOutputTokens || chunk.data?.outputTextTokens;
+      result.push({
+        data: {
+          tps: (outputTokens / (Date.now() - outputStartAt)) * 1000,
+          ttft: outputStartAt - inputStartAt,
+        } as ModelSpeed,
+        id: TOKEN_SPEED_CHUNK_ID,
+        type: 'speed',
+      });
+    }
+    return result;
+  };
+
+  return new TransformStream({
+    transform(chunk, controller) {
+      let result = transformer(chunk, streamStack || { id: '' });
+      if (!Array.isArray(result)) result = [result];
+      result.forEach((r) => {
+        const processed = process(r);
+        if (processed) processed.forEach((p) => controller.enqueue(p));
+      });
+    },
+  });
+};

package/src/locales/default/chat.ts

@@ -122,6 +122,17 @@ export default {
       outputText: '文本输出',
       outputTitle: '输出明细',
       reasoning: '深度思考',
+      speed: {
+        tps: {
+          title: 'TPS',
+          tooltip:
+            'Tokens Per Second，TPS。指AI生成内容的平均速度（Token/秒），在接收到首个 Token 后开始计算。',
+        },
+        ttft: {
+          title: 'TTFT',
+          tooltip: 'Time To First Token，TTFT。指从您发送消息到客户端接收到首个 Token 的时间间隔。',
+        },
+      },
       title: '生成明细',
       total: '总计消耗',
     },

package/src/services/electron/localFileService.ts

@@ -1,12 +1,15 @@
 import {
   ListLocalFileParams,
   LocalFileItem,
+  LocalMoveFilesResultItem,
   LocalReadFileParams,
   LocalReadFileResult,
   LocalReadFilesParams,
   LocalSearchFilesParams,
+  MoveLocalFilesParams,
   OpenLocalFileParams,
   OpenLocalFolderParams,
+  RenameLocalFileParams,
   dispatch,
 } from '@lobechat/electron-client-ipc';
 
@@ -34,6 +37,22 @@ class LocalFileService {
   async openLocalFolder(params: OpenLocalFolderParams) {
     return dispatch('openLocalFolder', params);
   }
+
+  async moveLocalFiles(params: MoveLocalFilesParams): Promise<LocalMoveFilesResultItem[]> {
+    return dispatch('moveLocalFiles', params);
+  }
+
+  async renameLocalFile(params: RenameLocalFileParams) {
+    return dispatch('renameLocalFile', params);
+  }
+
+  async openLocalFileOrFolder(path: string, isDirectory: boolean) {
+    if (isDirectory) {
+      return this.openLocalFolder({ isDirectory, path });
+    } else {
+      return this.openLocalFile({ path });
+    }
+  }
 }
 
 export const localFileService = new LocalFileService();

package/src/services/electron/system.ts

@@ -0,0 +1,21 @@
+import { ElectronAppState, dispatch } from '@lobechat/electron-client-ipc';
+
+/**
+ * Service class for interacting with Electron's system-level information and actions.
+ */
+class ElectronSystemService {
+  /**
+   * Fetches the application state from the Electron main process.
+   * This includes system information (platform, arch) and user-specific paths.
+   * @returns {Promise<DesktopAppState>} A promise that resolves with the desktop app state.
+   */
+  async getAppState(): Promise<ElectronAppState> {
+    // Calls the underlying IPC function to get data from the main process
+    return dispatch('getDesktopAppState');
+  }
+
+  // Add other system-related service methods here if needed in the future
+}
+
+// Export a singleton instance of the service
+export const electronSystemService = new ElectronSystemService();

package/src/store/chat/slices/aiChat/actions/generateAIChat.ts

@@ -576,7 +576,7 @@ export const generateAIChat: StateCreator<
       },
       onFinish: async (
         content,
-        { traceId, observationId, toolCalls, reasoning, grounding, usage },
+        { traceId, observationId, toolCalls, reasoning, grounding, usage, speed },
       ) => {
         // if there is traceId, update it
         if (traceId) {
@@ -611,8 +611,8 @@ export const generateAIChat: StateCreator<
           toolCalls,
           reasoning: !!reasoning ? { ...reasoning, duration } : undefined,
           search: !!grounding?.citations ? grounding : undefined,
-          metadata: usage,
           imageList: finalImages.length > 0 ? finalImages : undefined,
+          metadata: speed ? { ...usage, ...speed } : usage,
         });
       },
       onMessageHandle: async (chunk) => {

package/src/store/chat/slices/builtinTool/actions/search.ts

@@ -190,9 +190,6 @@ export const searchSlice: StateCreator<
 
     await get().internal_updateMessageContent(id, JSON.stringify(searchContent));
 
-    // 如果没搜索到结果，那么不触发 ai 总结
-    if (searchContent.length === 0) return;
-
     // 如果 aiSummary 为 true，则会自动触发总结
     return aiSummary;
   },

package/src/tools/local-files/Render/ListFiles/index.tsx

@@ -1,12 +1,10 @@
 import { ListLocalFileParams } from '@lobechat/electron-client-ipc';
-import { ActionIcon } from '@lobehub/ui';
 import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
-import { FolderOpen } from 'lucide-react';
 import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import FileIcon from '@/components/FileIcon';
 import { localFileService } from '@/services/electron/localFileService';
 import { LocalFileListState } from '@/tools/local-files/type';
 import { ChatMessagePluginError } from '@/types/message';
@@ -20,8 +18,21 @@ const useStyles = createStyles(({ css, token, cx }) => ({
     opacity: 1;
     transition: opacity 0.2s ${token.motionEaseInOut};
   `),
+  container: css`
+    cursor: pointer;
+
+    padding-block: 2px;
+    padding-inline: 4px;
+    border-radius: 4px;
+
+    color: ${token.colorTextSecondary};
+
+    :hover {
+      color: ${token.colorText};
+      background: ${token.colorFillTertiary};
+    }
+  `,
   path: css`
-    padding-inline-start: 8px;
     color: ${token.colorTextSecondary};
   `,
 }));
@@ -34,25 +45,21 @@ interface ListFilesProps {
 }
 
 const ListFiles = memo<ListFilesProps>(({ messageId, pluginError, args, pluginState }) => {
-  const { t } = useTranslation('tool');
-
   const { styles } = useStyles();
   return (
     <>
-      <Flexbox gap={8} horizontal>
+      <Flexbox
+        className={styles.container}
+        gap={8}
+        horizontal
+        onClick={() => {
+          localFileService.openLocalFolder({ isDirectory: true, path: args.path });
+        }}
+      >
+        <FileIcon fileName={args.path} isDirectory size={22} variant={'pure'} />
         <Typography.Text className={styles.path} ellipsis>
           {args.path}
         </Typography.Text>
-        <Flexbox className={styles.actions} gap={8} horizontal style={{ marginLeft: 8 }}>
-          <ActionIcon
-            icon={FolderOpen}
-            onClick={() => {
-              localFileService.openLocalFolder({ isDirectory: true, path: args.path });
-            }}
-            size="small"
-            title={t('localFiles.openFolder')}
-          />
-        </Flexbox>
       </Flexbox>
       <SearchResult
         listResults={pluginState?.listResults}