@lobehub/chat 1.141.3 → 1.141.4

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.141.4](https://github.com/lobehub/lobe-chat/compare/v1.141.3...v1.141.4)
+
+<sup>Released on **2025-10-22**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Fix model runtime cost calculate with CNY.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Fix model runtime cost calculate with CNY, closes [#9834](https://github.com/lobehub/lobe-chat/issues/9834) ([2e911ea](https://github.com/lobehub/lobe-chat/commit/2e911ea))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.141.3](https://github.com/lobehub/lobe-chat/compare/v1.141.2...v1.141.3)
 
 <sup>Released on **2025-10-22**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Fix model runtime cost calculate with CNY."
+      ]
+    },
+    "date": "2025-10-22",
+    "version": "1.141.4"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.141.3",
+  "version": "1.141.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/packages/agent-runtime/src/core/runtime.ts

@@ -256,15 +256,11 @@ export class AgentRuntime {
   }
 
   /**
-   * Create a new agent state with flexible initialization
-   * @param partialState - Partial state to override defaults
-   * @returns Complete AgentState with defaults filled in
+   * Create default usage statistics structure
+   * @returns Default Usage object with all counters set to 0
    */
-  static createInitialState(partialState: Partial<AgentState> & { sessionId: string }): AgentState {
-    const now = new Date().toISOString();
-
-    // Default usage statistics
-    const defaultUsage: Usage = {
+  static createDefaultUsage(): Usage {
+    return {
       humanInteraction: {
         approvalRequests: 0,
         promptRequests: 0,
@@ -282,9 +278,15 @@ export class AgentRuntime {
         totalTimeMs: 0,
       },
     };
+  }
 
-    // Default cost structure
-    const defaultCost: Cost = {
+  /**
+   * Create default cost structure
+   * @returns Default Cost object with all costs set to 0
+   */
+  static createDefaultCost(): Cost {
+    const now = new Date().toISOString();
+    return {
       calculatedAt: now,
       currency: 'USD',
       llm: {
@@ -299,16 +301,25 @@ export class AgentRuntime {
       },
       total: 0,
     };
+  }
+
+  /**
+   * Create a new agent state with flexible initialization
+   * @param partialState - Partial state to override defaults
+   * @returns Complete AgentState with defaults filled in
+   */
+  static createInitialState(partialState: Partial<AgentState> & { sessionId: string }): AgentState {
+    const now = new Date().toISOString();
 
     return {
-      cost: defaultCost,
+      cost: AgentRuntime.createDefaultCost(),
       // Default values
       createdAt: now,
       lastModified: now,
       messages: [],
       status: 'idle',
       stepCount: 0,
-      usage: defaultUsage,
+      usage: AgentRuntime.createDefaultUsage(),
       // User provided values override defaults
       ...partialState,
     };

package/packages/agent-runtime/src/types/instruction.ts

@@ -1,3 +1,5 @@
+import type { ModelUsage } from '@lobechat/types';
+
 import type { FinishReason } from './event';
 import { AgentState, ToolRegistry, ToolsCalling } from './state';
 import type { Cost, CostCalculationContext, Usage } from './usage';
@@ -26,6 +28,8 @@ export interface AgentRuntimeContext {
     status: AgentState['status'];
     stepCount: number;
   };
+  /** Usage statistics from the current step (if applicable) */
+  stepUsage?: ModelUsage;
 }
 
 /**

package/packages/const/src/currency.ts

@@ -1,4 +1,4 @@
-// in 2025.01.26
-export const USD_TO_CNY = 7.24;
+// in 2025.10.22
+export const USD_TO_CNY = 7.12;
 
 export const CREDITS_PER_DOLLAR = 1_000_000;

package/packages/model-runtime/src/core/usageConverters/utils/computeChatCost.test.ts

@@ -1,3 +1,4 @@
+import { Pricing } from 'model-bank';
 import anthropicChatModels from 'model-bank/anthropic';
 import googleChatModels from 'model-bank/google';
 import lobehubChatModels from 'model-bank/lobehub';
@@ -157,13 +158,13 @@ describe('computeChatPricing', () => {
       // Verify cached tokens (over 200k threshold, use higher tier rate)
       const cached = breakdown.find((item) => item.unit.name === 'textInput_cacheRead');
       expect(cached?.quantity).toBe(253_891);
-      expect(cached?.credits).toBeCloseTo(158_681.875, 6);
+      expect(cached?.credits).toBe(158_682); // ceil(158681.875) = 158682
       expect(cached?.segments).toEqual([{ quantity: 253_891, rate: 0.625, credits: 158_681.875 }]);
 
       // Verify input cache miss tokens (calculated as totalInputTokens - inputCachedTokens = 4275)
       const input = breakdown.find((item) => item.unit.name === 'textInput');
       expect(input?.quantity).toBe(4_275); // 258_166 - 253_891 = 4_275 (cache miss)
-      expect(input?.credits).toBeCloseTo(5_343.75, 6);
+      expect(input?.credits).toBe(5_344); // ceil(5343.75) = 5344
       expect(input?.segments).toEqual([{ quantity: 4_275, rate: 1.25, credits: 5_343.75 }]);
 
       // Verify output tokens include reasoning tokens (under 200k threshold, use lower tier rate)
@@ -173,7 +174,7 @@ describe('computeChatPricing', () => {
       expect(output?.segments).toEqual([{ quantity: 3_063, rate: 10, credits: 30_630 }]);
 
       // Verify corrected totals (no double counting of cached tokens)
-      expect(totalCredits).toBe(194_656); // ceil(158681.875 + 5343.75 + 30630) = 194656
+      expect(totalCredits).toBe(194_656); // 158682 + 5344 + 30630 = 194656
       expect(totalCost).toBeCloseTo(0.194656, 6); // 194656 credits = $0.194656
     });
 
@@ -274,13 +275,13 @@ describe('computeChatPricing', () => {
       const cached = breakdown.find((item) => item.unit.name === 'textInput_cacheRead');
       expect(cached?.quantity).toBe(257_955);
 
-      expect(cached?.credits).toBeCloseTo(161_221.875, 6);
+      expect(cached?.credits).toBe(161_222); // ceil(161221.875) = 161222
       expect(cached?.segments).toEqual([{ quantity: 257_955, rate: 0.625, credits: 161_221.875 }]);
 
       // Verify input cache miss tokens (under 200k tier, use lower rate)
       const input = breakdown.find((item) => item.unit.name === 'textInput');
       expect(input?.quantity).toBe(5_005);
-      expect(input?.credits).toBeCloseTo(6_256.25, 6);
+      expect(input?.credits).toBe(6_257); // ceil(6256.25) = 6257
       expect(input?.segments).toEqual([{ quantity: 5_005, rate: 1.25, credits: 6_256.25 }]);
 
       // Verify output tokens (under 200k threshold, use lower tier rate)
@@ -290,7 +291,7 @@ describe('computeChatPricing', () => {
       expect(output?.segments).toEqual([{ quantity: 1_744, rate: 10, credits: 17_440 }]);
 
       // Verify totals match actual billing log
-      expect(totalCredits).toBe(184_919); // ceil(161221.875 + 6256.25 + 17440) = 184919
+      expect(totalCredits).toBe(184_919); // 161222 + 6257 + 17440 = 184919
       expect(totalCost).toBeCloseTo(0.184919, 6); // 184919 credits = $0.184919
     });
   });
@@ -468,16 +469,16 @@ describe('computeChatPricing', () => {
       // Verify cached tokens (discounted rate)
       const cached = breakdown.find((item) => item.unit.name === 'textInput_cacheRead');
       expect(cached?.quantity).toBe(1183);
-      expect(cached?.credits).toBeCloseTo(354.9, 6);
+      expect(cached?.credits).toBe(355); // 354.9 rounded = 355
 
       // Verify cache write tokens
       const cacheWrite = breakdown.find((item) => item.unit.name === 'textInput_cacheWrite');
       expect(cacheWrite?.quantity).toBe(458);
       expect(cacheWrite?.lookupKey).toBe('5m');
-      expect(cacheWrite?.credits).toBeCloseTo(1_717.5, 6);
+      expect(cacheWrite?.credits).toBe(1_718); // 1717.5 rounded = 1718
 
       // Verify totals match the actual billing log
-      expect(totalCredits).toBe(9_915); // ceil(12 + 7830 + 354.9 + 1717.5) = 9915
+      expect(totalCredits).toBe(9_915); // 12 + 7830 + 355 + 1718 = 9915
       expect(totalCost).toBeCloseTo(0.009915, 6); // 9915 credits = $0.009915
     });
 
@@ -516,15 +517,15 @@ describe('computeChatPricing', () => {
       // Verify cached tokens (discounted rate)
       const cached = breakdown.find((item) => item.unit.name === 'textInput_cacheRead');
       expect(cached?.quantity).toBe(3021);
-      expect(cached?.credits).toBeCloseTo(906.3, 6);
+      expect(cached?.credits).toBe(907); // ceil(906.3) = 907
 
       // Verify cache write tokens (fixed strategy in lobehub model)
       const cacheWrite = breakdown.find((item) => item.unit.name === 'textInput_cacheWrite');
       expect(cacheWrite?.quantity).toBe(1697);
-      expect(cacheWrite?.credits).toBeCloseTo(6_363.75, 6);
+      expect(cacheWrite?.credits).toBe(6_364); // ceil(6363.75) = 6364
 
       // Verify totals match the actual billing log
-      expect(totalCredits).toBe(49_916); // ceil(30 + 42615 + 906.3 + 6363.75) = 49916
+      expect(totalCredits).toBe(49_916); // 30 + 42615 + 907 + 6364 = 49916
       expect(totalCost).toBeCloseTo(0.049916, 6); // 49916 credits = $0.049916
     });
   });
@@ -682,4 +683,196 @@ describe('computeChatPricing', () => {
       expect(result?.totalCost).toBe(0);
     });
   });
+
+  describe('Currency Conversion', () => {
+    describe('DeepSeek (CNY pricing)', () => {
+      it('converts CNY to USD for deepseek-chat without cache', () => {
+        // DeepSeek pricing in CNY
+        const pricing = {
+          currency: 'CNY',
+          units: [
+            { name: 'textInput', rate: 2, strategy: 'fixed', unit: 'millionTokens' },
+            { name: 'textOutput', rate: 3, strategy: 'fixed', unit: 'millionTokens' },
+          ],
+        };
+
+        const usage: ModelTokensUsage = {
+          inputCacheMissTokens: 1000,
+          inputTextTokens: 1000,
+          outputTextTokens: 500,
+          totalInputTokens: 1000,
+          totalOutputTokens: 500,
+          totalTokens: 1500,
+        };
+
+        // Use fixed exchange rate for testing
+        const result = computeChatCost(pricing as any, usage, { usdToCnyRate: 5 });
+        expect(result).toBeDefined();
+        expect(result?.issues).toHaveLength(0);
+
+        const { breakdown, totalCost, totalCredits } = result!;
+        expect(breakdown).toHaveLength(2); // Input and output
+
+        // Verify input tokens
+        // 1000 tokens * 2 CNY/M = 2000 raw CNY-credits
+        // 2000 / 5 = 400 USD-credits
+        const input = breakdown.find((item) => item.unit.name === 'textInput');
+        expect(input?.quantity).toBe(1000);
+        expect(input?.credits).toBe(400); // USD credits
+
+        // Verify output tokens
+        // 500 tokens * 3 CNY/M = 1500 raw CNY-credits
+        // 1500 / 5 = 300 USD-credits
+        const output = breakdown.find((item) => item.unit.name === 'textOutput');
+        expect(output?.quantity).toBe(500);
+        expect(output?.credits).toBe(300); // USD credits
+
+        // Verify totals with CNY to USD conversion
+        // Total USD credits = 400 + 300 = 700
+        // totalCredits = ceil(700) = 700
+        expect(totalCredits).toBe(700);
+
+        // totalCost = 700 / 1_000_000 = 0.0007 USD
+        expect(totalCost).toBeCloseTo(0.0007, 6);
+      });
+
+      it('converts CNY to USD for deepseek-chat with cache tokens', () => {
+        const pricing = {
+          currency: 'CNY',
+          units: [
+            { name: 'textInput_cacheRead', rate: 0.2, strategy: 'fixed', unit: 'millionTokens' },
+            { name: 'textInput', rate: 2, strategy: 'fixed', unit: 'millionTokens' },
+            { name: 'textOutput', rate: 3, strategy: 'fixed', unit: 'millionTokens' },
+          ],
+        } satisfies Pricing;
+
+        const usage: ModelTokensUsage = {
+          inputCacheMissTokens: 785,
+          inputCachedTokens: 2752,
+          inputTextTokens: 3537,
+          outputTextTokens: 77,
+          totalInputTokens: 3537,
+          totalOutputTokens: 77,
+          totalTokens: 3614,
+        };
+
+        const result = computeChatCost(pricing, usage, { usdToCnyRate: 5 });
+        expect(result).toBeDefined();
+        expect(result?.issues).toHaveLength(0);
+
+        const { breakdown, totalCost, totalCredits } = result!;
+        expect(breakdown).toHaveLength(3); // Cache read, input, and output
+
+        // Verify cache miss tokens
+        // 785 tokens * 2 CNY/M = 1570 raw CNY-credits
+        // 1570 / 5 = 314 USD-credits
+        const input = breakdown.find((item) => item.unit.name === 'textInput');
+        expect(input?.quantity).toBe(785);
+        expect(input?.credits).toBe(314); // USD credits
+
+        // Verify cached tokens
+        // 2752 tokens * 0.2 CNY/M = 550.4 raw CNY-credits
+        // 550.4 / 5 = 110.08 -> ceil(110.08) = 111 USD-credits
+        const cached = breakdown.find((item) => item.unit.name === 'textInput_cacheRead');
+        expect(cached?.quantity).toBe(2752);
+        expect(cached?.credits).toBe(111); // USD credits
+
+        // Verify output tokens
+        // 77 tokens * 3 CNY/M = 231 raw CNY-credits
+        // 231 / 5 = 46.2 -> ceil(46.2) = 47 USD-credits
+        const output = breakdown.find((item) => item.unit.name === 'textOutput');
+        expect(output?.quantity).toBe(77);
+        expect(output?.credits).toBe(47); // USD credits
+
+        // Verify totals with CNY to USD conversion
+        // Total USD credits = 314 + 111 + 47 = 472
+        expect(totalCredits).toBe(472);
+
+        // totalCost = 472 / 1_000_000 = 0.000472 USD
+        expect(totalCost).toBe(0.000472);
+      });
+
+      it('converts CNY to USD for large token usage', () => {
+        const pricing = {
+          currency: 'CNY',
+          units: [
+            { name: 'textInput', rate: 2, strategy: 'fixed', unit: 'millionTokens' },
+            { name: 'textOutput', rate: 3, strategy: 'fixed', unit: 'millionTokens' },
+          ],
+        };
+
+        const usage: ModelTokensUsage = {
+          inputTextTokens: 1_000_000, // 1M input tokens
+          outputTextTokens: 500_000, // 500K output tokens
+        };
+
+        const result = computeChatCost(pricing as any, usage, { usdToCnyRate: 5 });
+        expect(result).toBeDefined();
+
+        const { totalCost, totalCredits } = result!;
+
+        // Input: 1M * 2 CNY = 2M CNY-credits = 2M / 5 = 400000 USD-credits
+        // Output: 500K * 3 CNY = 1.5M CNY-credits = 1.5M / 5 = 300000 USD-credits
+        // Total: 700000 USD-credits
+        expect(totalCredits).toBe(700_000);
+
+        // totalCost = 700000 / 1_000_000 = 0.7 USD
+        expect(totalCost).toBe(0.7);
+      });
+    });
+
+    describe('USD pricing (no conversion)', () => {
+      it('does not convert USD pricing', () => {
+        const pricing = {
+          currency: 'USD',
+          units: [
+            { name: 'textInput', rate: 2, strategy: 'fixed', unit: 'millionTokens' },
+            { name: 'textOutput', rate: 8, strategy: 'fixed', unit: 'millionTokens' },
+          ],
+        };
+
+        const usage: ModelTokensUsage = {
+          inputTextTokens: 1000,
+          outputTextTokens: 500,
+        };
+
+        const result = computeChatCost(pricing as any, usage);
+        expect(result).toBeDefined();
+
+        const { totalCost, totalCredits } = result!;
+
+        // Input: 1000 * 2 = 2000 USD-credits
+        // Output: 500 * 8 = 4000 USD-credits
+        // Total: 6000 USD-credits
+        expect(totalCredits).toBe(6000);
+
+        // totalCost = 6000 / 1_000_000 = 0.006 USD
+        expect(totalCost).toBeCloseTo(0.006, 6);
+      });
+
+      it('defaults to USD when currency is not specified', () => {
+        const pricing = {
+          // No currency field
+          units: [
+            { name: 'textInput', rate: 2, strategy: 'fixed', unit: 'millionTokens' },
+            { name: 'textOutput', rate: 8, strategy: 'fixed', unit: 'millionTokens' },
+          ],
+        };
+
+        const usage: ModelTokensUsage = {
+          inputTextTokens: 1000,
+          outputTextTokens: 500,
+        };
+
+        const result = computeChatCost(pricing as any, usage);
+        expect(result).toBeDefined();
+
+        const { totalCost, totalCredits } = result!;
+
+        // Should be treated as USD (no conversion)
+        expect(totalCredits).toBe(6000);
+        expect(totalCost).toBeCloseTo(0.006, 6);
+      });
+    });
+  });
 });

package/packages/model-runtime/src/core/usageConverters/utils/computeChatCost.ts

@@ -1,5 +1,5 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
-import { CREDITS_PER_DOLLAR } from '@lobechat/const/currency';
+import { CREDITS_PER_DOLLAR, USD_TO_CNY } from '@lobechat/const/currency';
 import debug from 'debug';
 import {
   FixedPricingUnit,
@@ -17,6 +17,7 @@ const log = debug('lobe-cost:computeChatPricing');
 export interface PricingUnitBreakdown {
   cost: number;
   credits: number;
+  currency: string | 'USD' | 'CNY';
   /**
    * For lookup strategies we expose the resolved key.
    */
@@ -39,6 +40,11 @@ export interface ComputeChatCostOptions {
    * Input parameters used by lookup strategies (e.g. ttl, thinkingMode).
    */
   lookupParams?: Record<string, string | number | boolean>;
+  /**
+   * Exchange rate for CNY to USD conversion. Defaults to USD_TO_CNY constant.
+   * Useful for testing with fixed exchange rates.
+   */
+  usdToCnyRate?: number;
 }
 
 export interface PricingComputationResult {
@@ -98,6 +104,27 @@ const UNIT_QUANTITY_RESOLVERS: Partial<Record<PricingUnitName, UnitQuantityResol
   audioOutput: (usage) => usage.outputAudioTokens,
 };
 
+/**
+ * Convert currency-specific credits to USD credits and ceil to integer
+ * @param credits - Credits in the original currency
+ * @param currency - The currency of the credits ('USD' or 'CNY')
+ * @param usdToCnyRate - Exchange rate for CNY to USD conversion (defaults to USD_TO_CNY constant)
+ * @returns USD-equivalent credits (ceiled to integer)
+ */
+const toUSDCredits = (
+  credits: number,
+  currency: string = 'USD',
+  usdToCnyRate = USD_TO_CNY,
+): number => {
+  const usdCredits = currency === 'CNY' ? credits / usdToCnyRate : credits;
+  return Math.ceil(usdCredits);
+};
+
+/**
+ * Convert credits to USD dollar amount
+ * @param credits - USD credits
+ * @returns USD dollar amount
+ */
 const creditsToUSD = (credits: number) => credits / CREDITS_PER_DOLLAR;
 
 /**
@@ -221,6 +248,8 @@ export const computeChatCost = (
 
   const breakdown: PricingUnitBreakdown[] = [];
   const issues: PricingComputationIssue[] = [];
+  const currency = pricing.currency || 'USD';
+  const usdToCnyRate = options?.usdToCnyRate ?? USD_TO_CNY;
 
   for (const unit of pricing.units) {
     const quantity = resolveQuantity(unit, usage);
@@ -231,11 +260,13 @@ export const computeChatCost = (
         throw new Error(`Unsupported chat pricing unit: ${unit.unit}`);
 
       const fixedUnit = unit as FixedPricingUnit;
-      const credits = computeFixedCredits(fixedUnit, quantity);
+      const rawCredits = computeFixedCredits(fixedUnit, quantity);
+      const usdCredits = toUSDCredits(rawCredits, currency, usdToCnyRate);
       breakdown.push({
-        cost: creditsToUSD(credits),
-        credits,
+        cost: creditsToUSD(usdCredits),
+        credits: usdCredits,
         quantity,
+        currency,
         unit,
       });
       continue;
@@ -243,11 +274,13 @@ export const computeChatCost = (
 
     if (unit.strategy === 'tiered') {
       const tieredUnit = unit as TieredPricingUnit;
-      const { credits, segments } = computeTieredCredits(tieredUnit, quantity);
+      const { credits: rawCredits, segments } = computeTieredCredits(tieredUnit, quantity);
+      const usdCredits = toUSDCredits(rawCredits, currency, usdToCnyRate);
       breakdown.push({
-        cost: creditsToUSD(credits),
-        credits,
+        cost: creditsToUSD(usdCredits),
+        credits: usdCredits,
         quantity,
+        currency,
         segments,
         unit,
       });
@@ -257,18 +290,20 @@ export const computeChatCost = (
     if (unit.strategy === 'lookup') {
       const lookupUnit = unit as LookupPricingUnit;
       const {
-        credits,
+        credits: rawCredits,
         key,
         issues: lookupIssue,
       } = computeLookupCredits(lookupUnit, quantity, options);
 
       if (lookupIssue) issues.push(lookupIssue);
 
+      const usdCredits = toUSDCredits(rawCredits, currency, usdToCnyRate);
       breakdown.push({
-        cost: creditsToUSD(credits),
-        credits,
+        cost: creditsToUSD(usdCredits),
+        credits: usdCredits,
         lookupKey: key,
         quantity,
+        currency,
         unit,
       });
       continue;
@@ -277,9 +312,10 @@ export const computeChatCost = (
     issues.push({ reason: 'Unsupported pricing strategy', unit });
   }
 
+  // Sum up USD credits from all breakdown items
   const rawTotalCredits = breakdown.reduce((sum, item) => sum + item.credits, 0);
   const totalCredits = Math.ceil(rawTotalCredits);
-  // !: totalCredits has been uniformly rounded up to integer credits, divided by CREDITS_PER_DOLLAR naturally retains only 6 decimal places, no additional processing needed
+  // !: totalCredits has been uniformly rounded up to integer USD credits, divided by CREDITS_PER_DOLLAR naturally retains only 6 decimal places, no additional processing needed
   const totalCost = creditsToUSD(totalCredits);
 
   log(`computeChatPricing breakdown: ${JSON.stringify(breakdown, null, 2)}`);

package/src/app/__tests__/desktop.routes.test.ts

@@ -0,0 +1,18 @@
+import fs from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+describe('Desktop Routes', () => {
+  const appRootDir = resolve(__dirname, '..');
+
+  const desktopRoutes = [
+    '(backend)/trpc/desktop/[trpc]/route.ts',
+    'desktop/devtools/page.tsx',
+    'desktop/layout.tsx',
+  ];
+
+  it.each(desktopRoutes)('should have file: %s', (route) => {
+    const filePath = resolve(appRootDir, route);
+    expect(fs.existsSync(filePath)).toBe(true);
+  });
+});

package/src/features/FileManager/FileList/MasonryFileItem/index.tsx

@@ -4,7 +4,7 @@ import { createStyles } from 'antd-style';
 import { isNull } from 'lodash-es';
 import { FileBoxIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { memo, useEffect, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -304,9 +304,37 @@ const MasonryFileItem = memo<MasonryFileItemProps>(
     const isImage = fileType && IMAGE_TYPES.has(fileType);
     const isMarkdown = isMarkdownFile(name, fileType);
 
-    // Fetch markdown content
+    const cardRef = useRef<HTMLDivElement>(null);
+    const [isInView, setIsInView] = useState(false);
+
+    // Use Intersection Observer to detect when card enters viewport
+    useEffect(() => {
+      if (!cardRef.current) return;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && !isInView) {
+              setIsInView(true);
+            }
+          });
+        },
+        {
+          rootMargin: '50px', // Start loading slightly before entering viewport
+          threshold: 0.1,
+        },
+      );
+
+      observer.observe(cardRef.current);
+
+      return () => {
+        observer.disconnect();
+      };
+    }, [isInView]);
+
+    // Fetch markdown content only when in viewport
     useEffect(() => {
-      if (isMarkdown && url) {
+      if (isMarkdown && url && isInView && !markdownContent) {
         setIsLoadingMarkdown(true);
         fetch(url)
           .then((res) => res.text())
@@ -323,10 +351,10 @@ const MasonryFileItem = memo<MasonryFileItemProps>(
             setIsLoadingMarkdown(false);
           });
       }
-    }, [isMarkdown, url]);
+    }, [isMarkdown, url, isInView, markdownContent]);
 
     return (
-      <div className={cx(styles.card, selected && styles.selected)}>
+      <div className={cx(styles.card, selected && styles.selected)} ref={cardRef}>
         <div
           className={cx('checkbox', styles.checkbox)}
           onClick={(e) => {
@@ -355,26 +383,29 @@ const MasonryFileItem = memo<MasonryFileItemProps>(
                     <FileIcon fileName={name} fileType={fileType} size={64} />
                   </div>
                 )}
-                <Image
-                  alt={name}
-                  onError={() => setImageLoaded(false)}
-                  onLoad={() => setImageLoaded(true)}
-                  preview={{
-                    src: url,
-                  }}
-                  src={url}
-                  style={{
-                    display: 'block',
-                    height: 'auto',
-                    opacity: imageLoaded ? 1 : 0,
-                    transition: 'opacity 0.3s',
-                    width: '100%',
-                  }}
-                  wrapperStyle={{
-                    display: 'block',
-                    width: '100%',
-                  }}
-                />
+                {isInView && (
+                  <Image
+                    alt={name}
+                    loading="lazy"
+                    onError={() => setImageLoaded(false)}
+                    onLoad={() => setImageLoaded(true)}
+                    preview={{
+                      src: url,
+                    }}
+                    src={url}
+                    style={{
+                      display: 'block',
+                      height: 'auto',
+                      opacity: imageLoaded ? 1 : 0,
+                      transition: 'opacity 0.3s',
+                      width: '100%',
+                    }}
+                    wrapperStyle={{
+                      display: 'block',
+                      width: '100%',
+                    }}
+                  />
+                )}
                 {/* Hover overlay */}
                 <div className={styles.hoverOverlay}>
                   <div className={styles.overlayTitle}>{name}</div>

package/src/features/FileManager/FileList/index.tsx

@@ -5,7 +5,7 @@ import { VirtuosoMasonry } from '@virtuoso.dev/masonry';
 import { createStyles } from 'antd-style';
 import { useQueryState } from 'nuqs';
 import { rgba } from 'polished';
-import React, { memo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 import { Virtuoso } from 'react-virtuoso';
@@ -118,6 +118,16 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category }) => {
     }
   }, [data]);
 
+  // Memoize context object to avoid recreating on every render
+  const masonryContext = useMemo(
+    () => ({
+      knowledgeBaseId,
+      selectFileIds,
+      setSelectedFileIds,
+    }),
+    [knowledgeBaseId, selectFileIds],
+  );
+
   return !isLoading && data?.length === 0 ? (
     <EmptyStatus knowledgeBaseId={knowledgeBaseId} showKnowledgeBase={!knowledgeBaseId} />
   ) : (
@@ -195,9 +205,8 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category }) => {
               <VirtuosoMasonry
                 ItemContent={MasonryItemWrapper}
                 columnCount={columnCount}
-                context={{ knowledgeBaseId, selectFileIds, setSelectedFileIds }}
+                context={masonryContext}
                 data={data || []}
-                key={`masonry-${query || 'all'}-${data?.length || 0}`}
                 style={{
                   gap: '16px',
                 }}

package/src/store/file/slices/fileManager/action.test.ts

@@ -234,6 +234,7 @@ describe('FileManagerActions', () => {
         .mockResolvedValue({ id: 'file-1', url: 'http://example.com/file-1' });
       const refreshSpy = vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
       const dispatchSpy = vi.spyOn(result.current, 'dispatchDockFileList');
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
 
       await act(async () => {
         await result.current.pushDockFileList([validFile, blacklistedFile]);
@@ -252,6 +253,8 @@ describe('FileManagerActions', () => {
         onStatusUpdate: expect.any(Function),
       });
       expect(refreshSpy).toHaveBeenCalled();
+      // Should auto-parse text files
+      expect(parseSpy).toHaveBeenCalledWith(['file-1'], { skipExist: false });
     });
 
     it('should upload files with knowledgeBaseId', async () => {
@@ -263,6 +266,7 @@ describe('FileManagerActions', () => {
         .spyOn(result.current, 'uploadWithProgress')
         .mockResolvedValue({ id: 'file-1', url: 'http://example.com/file-1' });
       vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
 
       await act(async () => {
         await result.current.pushDockFileList([file], 'kb-123');
@@ -287,6 +291,7 @@ describe('FileManagerActions', () => {
           return { id: 'file-1', url: 'http://example.com/file-1' };
         });
       vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
       const dispatchSpy = vi.spyOn(result.current, 'dispatchDockFileList');
 
       await act(async () => {
@@ -302,6 +307,7 @@ describe('FileManagerActions', () => {
 
       const uploadSpy = vi.spyOn(result.current, 'uploadWithProgress');
       const refreshSpy = vi.spyOn(result.current, 'refreshFileList');
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks');
 
       await act(async () => {
         await result.current.pushDockFileList([]);
@@ -309,6 +315,88 @@ describe('FileManagerActions', () => {
 
       expect(uploadSpy).not.toHaveBeenCalled();
       expect(refreshSpy).not.toHaveBeenCalled();
+      expect(parseSpy).not.toHaveBeenCalled();
+    });
+
+    it('should auto-embed files that support chunking', async () => {
+      const { result } = renderHook(() => useStore());
+
+      const textFile = new File(['text content'], 'doc.txt', { type: 'text/plain' });
+      const pdfFile = new File(['pdf content'], 'doc.pdf', { type: 'application/pdf' });
+
+      vi.spyOn(result.current, 'uploadWithProgress')
+        .mockResolvedValueOnce({ id: 'file-1', url: 'http://example.com/file-1' })
+        .mockResolvedValueOnce({ id: 'file-2', url: 'http://example.com/file-2' });
+      vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
+
+      await act(async () => {
+        await result.current.pushDockFileList([textFile, pdfFile]);
+      });
+
+      // Should auto-parse both files that support chunking
+      expect(parseSpy).toHaveBeenCalledWith(['file-1', 'file-2'], { skipExist: false });
+    });
+
+    it('should skip auto-embed for unsupported file types (images/videos/audio)', async () => {
+      const { result } = renderHook(() => useStore());
+
+      const imageFile = new File(['image content'], 'image.png', { type: 'image/png' });
+      const videoFile = new File(['video content'], 'video.mp4', { type: 'video/mp4' });
+      const audioFile = new File(['audio content'], 'audio.mp3', { type: 'audio/mpeg' });
+
+      vi.spyOn(result.current, 'uploadWithProgress')
+        .mockResolvedValueOnce({ id: 'file-1', url: 'http://example.com/file-1' })
+        .mockResolvedValueOnce({ id: 'file-2', url: 'http://example.com/file-2' })
+        .mockResolvedValueOnce({ id: 'file-3', url: 'http://example.com/file-3' });
+      vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
+
+      await act(async () => {
+        await result.current.pushDockFileList([imageFile, videoFile, audioFile]);
+      });
+
+      // Should not auto-parse unsupported files
+      expect(parseSpy).not.toHaveBeenCalled();
+    });
+
+    it('should auto-embed only supported files in mixed upload', async () => {
+      const { result } = renderHook(() => useStore());
+
+      const textFile = new File(['text content'], 'doc.txt', { type: 'text/plain' });
+      const imageFile = new File(['image content'], 'image.png', { type: 'image/png' });
+      const pdfFile = new File(['pdf content'], 'doc.pdf', { type: 'application/pdf' });
+
+      vi.spyOn(result.current, 'uploadWithProgress')
+        .mockResolvedValueOnce({ id: 'file-1', url: 'http://example.com/file-1' })
+        .mockResolvedValueOnce({ id: 'file-2', url: 'http://example.com/file-2' })
+        .mockResolvedValueOnce({ id: 'file-3', url: 'http://example.com/file-3' });
+      vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
+
+      await act(async () => {
+        await result.current.pushDockFileList([textFile, imageFile, pdfFile]);
+      });
+
+      // Should only auto-parse text and pdf files, skip image
+      expect(parseSpy).toHaveBeenCalledWith(['file-1', 'file-3'], { skipExist: false });
+    });
+
+    it('should skip auto-embed when upload fails', async () => {
+      const { result } = renderHook(() => useStore());
+
+      const textFile = new File(['text content'], 'doc.txt', { type: 'text/plain' });
+
+      vi.spyOn(result.current, 'uploadWithProgress').mockResolvedValue(undefined);
+      vi.spyOn(result.current, 'refreshFileList').mockResolvedValue();
+      const parseSpy = vi.spyOn(result.current, 'parseFilesToChunks').mockResolvedValue();
+
+      await act(async () => {
+        await result.current.pushDockFileList([textFile]);
+      });
+
+      // Should not auto-parse when upload returns undefined
+      expect(parseSpy).not.toHaveBeenCalled();
     });
   });
 

package/src/store/file/slices/fileManager/action.ts

@@ -11,6 +11,7 @@ import {
   uploadFileListReducer,
 } from '@/store/file/reducers/uploadFileList';
 import { FileListItem, QueryFileListParams } from '@/types/files';
+import { isChunkingUnsupported } from '@/utils/isChunkingUnsupported';
 
 import { FileStore } from '../../store';
 import { fileManagerSelectors } from './selectors';
@@ -98,17 +99,28 @@ export const createFileManageSlice: StateCreator<
       type: 'addFiles',
     });
 
-    const pools = files.map(async (file) => {
-      await get().uploadWithProgress({
-        file,
-        knowledgeBaseId,
-        onStatusUpdate: dispatchDockFileList,
-      });
+    const uploadResults = await Promise.all(
+      files.map(async (file) => {
+        const result = await get().uploadWithProgress({
+          file,
+          knowledgeBaseId,
+          onStatusUpdate: dispatchDockFileList,
+        });
 
-      await get().refreshFileList();
-    });
+        await get().refreshFileList();
 
-    await Promise.all(pools);
+        return { file, fileId: result?.id, fileType: file.type };
+      }),
+    );
+
+    // 2. auto-embed files that support chunking
+    const fileIdsToEmbed = uploadResults
+      .filter(({ fileType, fileId }) => fileId && !isChunkingUnsupported(fileType))
+      .map(({ fileId }) => fileId!);
+
+    if (fileIdsToEmbed.length > 0) {
+      await get().parseFilesToChunks(fileIdsToEmbed, { skipExist: false });
+    }
   },
 
   reEmbeddingChunks: async (id) => {