@lobehub/lobehub 2.0.0-next.72 → 2.0.0-next.74

package/src/hooks/useQueryParam.ts

@@ -0,0 +1,322 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+type HistoryMode = 'push' | 'replace';
+
+// options 接口，用于 useQueryParam hook
+interface QueryParamOptions<T> {
+  clearOnDefault?: boolean;
+  defaultValue?: T;
+  history?: HistoryMode;
+  throttleMs?: number;
+}
+
+// 解析器接口
+interface Parser<T> {
+  parse: (value: string | null) => T;
+  serialize: (value: T) => string | null;
+}
+
+// 带默认值的解析器接口
+interface ParserWithDefault<T> extends Parser<T> {
+  // nuqs has an optional default value on parsers
+  defaultValue?: T;
+  parse: (value: string | null) => T;
+}
+
+/**
+ * 核心钩子，用于管理单个查询参数
+ * 为 react-router-dom 替换 nuqs 的 useQueryState 功能
+ */
+export function useQueryParam<T>(
+  key: string,
+  parser: Parser<T> | ParserWithDefault<T>,
+  options: QueryParamOptions<T> = {},
+): [T, (value: T | ((prev: T) => T)) => void] {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // 从 options 或 parser 本身提取 defaultValue
+  const {
+    clearOnDefault = false,
+    defaultValue = (parser as ParserWithDefault<T>)?.defaultValue,
+    history = 'push',
+    throttleMs = 0,
+  } = options;
+
+  // eslint-disable-next-line no-undef
+  const throttleTimer = useRef<NodeJS.Timeout | null>(null);
+  const lastExecuteTime = useRef<number>(0);
+
+  // 使用 ref 存储最新的值，让 setValue 保持稳定
+  const searchParamsRef = useRef(searchParams);
+  const parserRef = useRef(parser);
+  const defaultValueRef = useRef(defaultValue);
+  const clearOnDefaultRef = useRef(clearOnDefault);
+  const historyRef = useRef(history);
+
+  // 每次渲染时更新 ref
+  useEffect(() => {
+    searchParamsRef.current = searchParams;
+    parserRef.current = parser;
+    defaultValueRef.current = defaultValue;
+    clearOnDefaultRef.current = clearOnDefault;
+    historyRef.current = history;
+  });
+
+  // 从 URL 解析当前值
+  const currentValue = parser.parse(searchParams.get(key));
+  const value = currentValue ?? (defaultValue as T);
+
+  // setValue 现在是稳定的，不会因为 searchParams 变化而重新创建
+  const setValue = useCallback(
+    (newValue: T | ((prev: T) => T)) => {
+      // 从 ref 读取最新值，避免闭包陈旧值问题
+      const currentSearchParams = searchParamsRef.current;
+      const currentParser = parserRef.current;
+      const currentDefaultValue = defaultValueRef.current;
+      const currentClearOnDefault = clearOnDefaultRef.current;
+      const currentHistory = historyRef.current;
+
+      // 通过函数形式获取最新值
+      const currentVal =
+        currentParser.parse(currentSearchParams.get(key)) ?? (currentDefaultValue as T);
+      const actualValue =
+        typeof newValue === 'function' ? (newValue as (prev: T) => T)(currentVal) : newValue;
+
+      const updateParams = () => {
+        // 使用函数式更新，确保基于最新的 searchParams
+        setSearchParams((prevParams) => {
+          const newSearchParams = new URLSearchParams(prevParams);
+          console.log('updateParams', newSearchParams.toString());
+          const serialized = currentParser.serialize(actualValue);
+
+          // 处理 clearOnDefault 选项
+          if (
+            currentClearOnDefault &&
+            currentDefaultValue !== undefined &&
+            serialized === currentParser.serialize(currentDefaultValue as T)
+          ) {
+            newSearchParams.delete(key);
+          } else if (serialized === null || serialized === undefined) {
+            newSearchParams.delete(key);
+          } else {
+            newSearchParams.set(key, serialized);
+          }
+
+          console.log('updateParams', newSearchParams.toString());
+
+          return newSearchParams;
+        }, { replace: currentHistory === 'replace' });
+      };
+
+      // 处理节流
+      if (throttleMs > 0) {
+        const now = Date.now();
+        const timeSinceLastExecute = now - lastExecuteTime.current;
+
+        if (timeSinceLastExecute >= throttleMs) {
+          // 距离上次执行已超过节流时间，立即执行
+          lastExecuteTime.current = now;
+          updateParams();
+          // 清理可能存在的定时器
+          if (throttleTimer.current) {
+            clearTimeout(throttleTimer.current);
+            throttleTimer.current = null;
+          }
+        } else {
+          // 还在节流期内，设置定时器在剩余时间后执行最后一次
+          if (throttleTimer.current) {
+            clearTimeout(throttleTimer.current);
+          }
+          const remainingTime = throttleMs - timeSinceLastExecute;
+          throttleTimer.current = setTimeout(() => {
+            lastExecuteTime.current = Date.now();
+            updateParams();
+            throttleTimer.current = null;
+          }, remainingTime);
+        }
+      } else {
+        updateParams();
+      }
+    },
+    [key, setSearchParams, throttleMs], // 只依赖不会频繁变化的值
+  );
+
+  // 组件卸载时清理节流计时器
+  useEffect(() => {
+    return () => {
+      if (throttleTimer.current) {
+        clearTimeout(throttleTimer.current);
+      }
+    };
+  }, []);
+
+  return [value, setValue];
+}
+
+// ===== 解析器 (Parsers) =====
+
+/**
+ * 字符串解析器 - 默认行为
+ */
+export const parseAsString: Parser<string | null> & {
+  withDefault: (defaultValue: string) => ParserWithDefault<string>;
+} = {
+  parse: (value: string | null) => value,
+  serialize: (value: string | null) => value,
+  withDefault: (defaultValue: string) => ({
+    defaultValue,
+    parse: (value: string | null) => value ?? defaultValue,
+    serialize: (value: string) => value,
+  }),
+};
+
+/**
+ * 布尔值解析器
+ */
+export const parseAsBoolean: Parser<boolean | null> & {
+  withDefault: (defaultValue: boolean) => ParserWithDefault<boolean>;
+} = {
+  parse: (value: string | null) => {
+    if (value === null) return null;
+    return value === 'true' || value === '1';
+  },
+  serialize: (value: boolean | null) => {
+    if (value === null) return null;
+    return value ? 'true' : 'false';
+  },
+  withDefault: (defaultValue: boolean) => ({
+    defaultValue,
+    parse: (value: string | null) => {
+      if (value === null) return defaultValue;
+      return value === 'true' || value === '1';
+    },
+    serialize: (value: boolean) => (value ? 'true' : 'false'),
+  }),
+};
+
+/**
+ * 整数解析器
+ */
+export const parseAsInteger: Parser<number | null> & {
+  withDefault: (defaultValue: number) => ParserWithDefault<number>;
+} = {
+  parse: (value: string | null) => {
+    if (value === null) return null;
+    const parsed = Number.parseInt(value, 10);
+    return Number.isNaN(parsed) ? null : parsed;
+  },
+  serialize: (value: number | null) => {
+    if (value === null) return null;
+    return value.toString();
+  },
+  withDefault: (defaultValue: number) => ({
+    defaultValue,
+    parse: (value: string | null) => {
+      if (value === null) return defaultValue;
+      const parsed = Number.parseInt(value, 10);
+      return Number.isNaN(parsed) ? defaultValue : parsed;
+    },
+    serialize: (value: number) => value.toString(),
+  }),
+};
+
+/**
+ * 字符串枚举解析器
+ */
+export function parseAsStringEnum<T extends string>(validValues: readonly T[]) {
+  const parser: Parser<T | null> = {
+    parse: (value: string | null): T | null => {
+      if (value === null) return null;
+      return validValues.includes(value as T) ? (value as T) : null;
+    },
+    serialize: (value: T | null) => value,
+  };
+
+  const withDefault = (defaultValue: T): ParserWithDefault<T> => ({
+    defaultValue,
+    parse: (value: string | null): T => {
+      if (value === null) return defaultValue;
+      return validValues.includes(value as T) ? (value as T) : defaultValue;
+    },
+    serialize: (value: T) => value,
+  });
+
+  return Object.assign(parser, { withDefault });
+}
+
+// ===== 简化的 API (Simplified API) =====
+
+// --- 重载签名 ---
+
+// 字符串 (无解析器或仅有 options)
+export function useQueryState(
+  key: string,
+  options?: QueryParamOptions<string | null>,
+): [string | null, (value: string | null | ((prev: string | null) => string | null)) => void];
+
+// 带默认值的字符串解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState(
+  key: string,
+  parserWithDefault: ParserWithDefault<string>,
+): [string, (value: string | ((prev: string) => string)) => void];
+
+// 布尔值解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState(
+  key: string,
+  parser: typeof parseAsBoolean,
+): [boolean | null, (value: boolean | null | ((prev: boolean | null) => boolean | null)) => void];
+
+// 带默认值的布尔值解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState(
+  key: string,
+  parserWithDefault: ParserWithDefault<boolean>,
+): [boolean, (value: boolean | ((prev: boolean) => boolean)) => void];
+
+// 整数解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState(
+  key: string,
+  parser: typeof parseAsInteger,
+): [number | null, (value: number | null | ((prev: number | null) => number | null)) => void];
+
+// 带默认值的整数解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState(
+  key: string,
+  parserWithDefault: ParserWithDefault<number>,
+): [number, (value: number | ((prev: number) => number)) => void];
+
+// 带默认值的字符串枚举解析器
+// eslint-disable-next-line no-redeclare
+export function useQueryState<T extends string>(
+  key: string,
+  parserWithDefault: ParserWithDefault<T>,
+): [T, (value: T | ((prev: T) => T)) => void];
+
+// --- 单一实现 ---
+// eslint-disable-next-line no-redeclare
+export function useQueryState(key: string, parserOrOptions?: any): any {
+  // 修复了逻辑分派问题
+  let parser: Parser<any>;
+  let options: QueryParamOptions<any> = {};
+
+  if (!parserOrOptions) {
+    // 场景 1: useQueryState('key')
+    parser = parseAsString;
+  } else if (typeof parserOrOptions.parse === 'function') {
+    // 场景 2: useQueryState('key', parseAsInteger) 或 useQueryState('key', parseAsInteger.withDefault(10))
+    parser = parserOrOptions;
+    // 从解析器自身提取 options (例如 defaultValue)
+    options = parserOrOptions;
+  } else {
+    // 场景 3: useQueryState('key', { defaultValue: 'foo', throttleMs: 500 })
+    parser = parseAsString;
+    options = parserOrOptions;
+  }
+
+  return useQueryParam(key, parser, options);
+}

package/src/hooks/useQueryRoute.test.ts

@@ -4,18 +4,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useQueryRoute } from './useQueryRoute';
 
 // Mocks
-vi.mock('next/navigation', () => ({
-  useRouter: vi.fn(() => ({
-    push: vi.fn((href) => href),
-    replace: vi.fn((href) => href),
-  })),
-}));
-
-vi.mock('nextjs-toploader/app', () => ({
-  useRouter: vi.fn(() => ({
-    push: vi.fn((href) => href),
-    replace: vi.fn((href) => href),
-  })),
+vi.mock('react-router-dom', () => ({
+  useNavigate: vi.fn(() => vi.fn((href) => href)),
 }));
 
 vi.mock('@/utils/env', () => ({

package/src/hooks/useQueryRoute.ts

@@ -1,6 +1,6 @@
-import { useRouter } from 'nextjs-toploader/app';
 import qs, { type ParsedQuery } from 'query-string';
 import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { isOnServerSide } from '@/utils/env';
 
@@ -31,19 +31,19 @@ const genHref = ({ hash, replace, url, prevQuery = {}, query = {} }: GenHrefOpti
 };
 
 export const useQueryRoute = () => {
-  const router = useRouter();
+  const navigate = useNavigate();
 
   return useMemo(
     () => ({
       push: (url: string, options: QueryRouteOptions = {}) => {
         const prevQuery = qs.parse(window.location.search);
-        return router.push(genHref({ prevQuery, url, ...options }));
+        return navigate(genHref({ prevQuery, url, ...options }));
       },
       replace: (url: string, options: QueryRouteOptions = {}) => {
         const prevQuery = qs.parse(window.location.search);
-        return router.replace(genHref({ prevQuery, url, ...options }));
+        return navigate(genHref({ prevQuery, url, ...options }), { replace: true });
       },
     }),
-    [],
+    [navigate],
   );
 };

package/src/hooks/useShowMobileWorkspace.ts

@@ -1,4 +1,4 @@
-import { parseAsBoolean, useQueryState } from 'nuqs';
+import { parseAsBoolean, useQueryState } from './useQueryParam';
 
 export const useShowMobileWorkspace = () => {
   const [showMobileWorkspace] = useQueryState('showMobileWorkspace', parseAsBoolean);

package/src/hooks/useSwitchSession.ts

@@ -1,5 +1,5 @@
-import { usePathname } from 'next/navigation';
 import { useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useChatStore } from '@/store/chat';
@@ -11,7 +11,8 @@ export const useSwitchSession = () => {
   const togglePortal = useChatStore((s) => s.togglePortal);
   const mobile = useServerConfigStore((s) => s.isMobile);
   const router = useQueryRoute();
-  const pathname = usePathname();
+  const location = useLocation();
+  const pathname = location.pathname;
 
   return useCallback(
     (id: string) => {
@@ -27,6 +28,6 @@ export const useSwitchSession = () => {
         }, 50);
       }
     },
-    [mobile, pathname],
+    [mobile, pathname, switchSession, togglePortal, router],
   );
 };

package/src/layout/GlobalProvider/ImportSettings.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
-import { memo, useEffect } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import { LOBE_URL_IMPORT_NAME } from '@/const/url';
 import { useUserStore } from '@/store/user';
@@ -12,17 +11,31 @@ const ImportSettings = memo(() => {
     s.isUserStateInit,
   ]);
 
-  // Import settings from the url
-  const [searchParam] = useQueryState(LOBE_URL_IMPORT_NAME, {
-    clearOnDefault: true,
-    defaultValue: '',
-  });
+  // Read initial URL param using browser API (not router-dependent)
+  const [searchParam, setSearchParam] = useState<string>('');
+
+  useEffect(() => {
+    // Read from URL on mount
+    if (typeof window !== 'undefined') {
+      const params = new URLSearchParams(window.location.search);
+      const param = params.get(LOBE_URL_IMPORT_NAME);
+      if (param) {
+        setSearchParam(param);
+        // Clear the param from URL after reading
+        params.delete(LOBE_URL_IMPORT_NAME);
+        const newUrl = `${window.location.pathname}${params.toString() ? `?${params.toString()}` : ''}${window.location.hash}`;
+        window.history.replaceState({}, '', newUrl);
+      }
+    }
+  }, []);
 
   useEffect(() => {
     // Why use `usUserStateInit`,
     // see: https://github.com/lobehub/lobe-chat/pull/4072
-    if (searchParam && isUserStateInit) importUrlShareSettings(searchParam);
-  }, [searchParam, isUserStateInit]);
+    if (searchParam && isUserStateInit) {
+      importUrlShareSettings(searchParam);
+    }
+  }, [searchParam, isUserStateInit, importUrlShareSettings]);
 
   return null;
 });

package/src/layout/GlobalProvider/StoreInitialization.tsx

@@ -63,7 +63,16 @@ const StoreInitialization = memo(() => {
 
   // init user state
   useInitUserState(isLoginOnInit, serverConfig, {
+    onError: () => {
+      // 即使失败也要设置标志，避免应用卡住
+      useGlobalStore.setState({ isAppHydrated: true });
+      console.warn('[Hydration] Client state initialization failed.');
+    },
     onSuccess: (state) => {
+      // 设置水合完成标志
+      useGlobalStore.setState({ isAppHydrated: true });
+      console.log('[Hydration] Client state initialized successfully.');
+
       if (state.isOnboard === false) {
         router.push('/onboard');
       }
@@ -75,7 +84,6 @@ const StoreInitialization = memo(() => {
   const mobile = useIsMobile();
 
   useStoreUpdater('isMobile', mobile);
-  useStoreUpdater('router', router);
 
   return null;
 });

package/src/locales/default/tool.ts

@@ -15,6 +15,12 @@ export default {
     prompt: '提示词',
   },
   localFiles: {
+    editFile: {
+      newString: '替换为',
+      oldString: '查找内容',
+      replaceAll: '替换全部匹配项',
+      replaceFirst: '仅替换第一个匹配项',
+    },
     file: '文件',
     folder: '文件夹',
     moveFiles: {
@@ -35,6 +41,11 @@ export default {
     readFileError: '读取文件失败，请检查文件路径是否正确',
     readFiles: '读取文件',
     readFilesError: '读取文件失败，请检查文件路径是否正确',
+    writeFile: {
+      characters: '字符',
+      preview: '内容预览',
+      truncated: '已截断',
+    },
   },
   search: {
     createNewSearch: '创建新的搜索记录',

package/src/proxy.ts

@@ -128,11 +128,23 @@ const defaultMiddleware = (request: NextRequest) => {
   // new handle segment rewrite: /${route}${originalPathname}
   // / -> /zh-CN__0__dark
   // /discover -> /zh-CN__0__dark/discover
-  const nextPathname = `/${route}` + (url.pathname === '/' ? '' : url.pathname);
+  // All SPA routes that use react-router-dom should be rewritten to just /${route}
+  const spaRoutes = ['/chat', '/discover', '/knowledge', '/settings', '/image', '/labs', '/changelog', '/profile', '/me'];
+  const isSpaRoute = spaRoutes.some(route => url.pathname.startsWith(route));
+
+  let nextPathname: string;
+  if (isSpaRoute) {
+    nextPathname = `/${route}`;
+  } else {
+    nextPathname = `/${route}` + (url.pathname === '/' ? '' : url.pathname);
+  }
   const nextURL = appEnv.MIDDLEWARE_REWRITE_THROUGH_LOCAL
     ? urlJoin(url.origin, nextPathname)
     : nextPathname;
 
+
+  console.log('nextURL', nextURL);
+
   logDefault('URL rewrite: %O', {
     isLocalRewrite: appEnv.MIDDLEWARE_REWRITE_THROUGH_LOCAL,
     nextPathname: nextPathname,

package/src/services/message/index.ts

@@ -77,12 +77,21 @@ export class MessageService {
     return lambdaClient.message.getHeatmaps.query();
   };
 
-  updateMessageError = async (id: string, value: ChatMessageError) => {
+  updateMessageError = async (
+    id: string,
+    value: ChatMessageError,
+    options?: { sessionId?: string | null; topicId?: string | null },
+  ) => {
     const error = value.type
       ? value
       : { body: value, message: value.message, type: 'ApplicationRuntimeError' };
 
-    return lambdaClient.message.update.mutate({ id, value: { error } });
+    return lambdaClient.message.update.mutate({
+      id,
+      sessionId: options?.sessionId,
+      topicId: options?.topicId,
+      value: { error },
+    });
   };
 
   updateMessagePluginArguments = async (id: string, value: string | Record<string, any>) => {

package/src/store/chat/agents/createAgentExecutors.ts

@@ -15,6 +15,7 @@ import type { ChatToolPayload, CreateMessageParams } from '@lobechat/types';
 import debug from 'debug';
 import pMap from 'p-map';
 
+import { LOADING_FLAT } from '@/const/message';
 import type { ChatStore } from '@/store/chat/store';
 
 const log = debug('lobe-store:agent-executors');
@@ -36,7 +37,9 @@ export const createAgentExecutors = (context: {
     inPortalThread?: boolean;
     inSearchWorkflow?: boolean;
     ragQuery?: string;
+    sessionId?: string;
     threadId?: string;
+    topicId?: string | null;
     traceId?: string;
   };
   parentId: string;
@@ -75,16 +78,22 @@ export const createAgentExecutors = (context: {
           llmPayload.parentMessageId = context.parentId;
         }
         // Create assistant message (following server-side pattern)
-        const assistantMessageItem = await context.get().optimisticCreateMessage({
-          content: '',
-          model: llmPayload.model,
-          parentId: llmPayload.parentMessageId,
-          provider: llmPayload.provider,
-          role: 'assistant',
-          sessionId: state.metadata!.sessionId!,
-          threadId: state.metadata?.threadId,
-          topicId: state.metadata?.topicId,
-        });
+        const assistantMessageItem = await context.get().optimisticCreateMessage(
+          {
+            content: LOADING_FLAT,
+            model: llmPayload.model,
+            parentId: llmPayload.parentMessageId,
+            provider: llmPayload.provider,
+            role: 'assistant',
+            sessionId: state.metadata!.sessionId!,
+            threadId: state.metadata?.threadId,
+            topicId: state.metadata?.topicId,
+          },
+          {
+            sessionId: state.metadata!.sessionId!,
+            topicId: state.metadata?.topicId,
+          },
+        );
 
         if (!assistantMessageItem) {
           throw new Error('Failed to create assistant message');
@@ -269,13 +278,16 @@ export const createAgentExecutors = (context: {
             parentId: payload.parentMessageId,
             plugin: chatToolPayload,
             role: 'tool',
-            sessionId: context.get().activeId,
+            sessionId: state.metadata!.sessionId!,
             threadId: context.params.threadId,
             tool_call_id: chatToolPayload.id,
-            topicId: context.get().activeTopicId,
+            topicId: state.metadata?.topicId,
           };
 
-          const createResult = await context.get().optimisticCreateMessage(toolMessageParams);
+          const createResult = await context.get().optimisticCreateMessage(toolMessageParams, {
+            sessionId: state.metadata!.sessionId!,
+            topicId: state.metadata?.topicId,
+          });
 
           if (!createResult) {
             log(
@@ -450,13 +462,16 @@ export const createAgentExecutors = (context: {
             },
             pluginIntervention: { status: 'pending' },
             role: 'tool',
-            sessionId: context.get().activeId,
+            sessionId: state.metadata!.sessionId!,
             threadId: context.params.threadId,
             tool_call_id: toolPayload.id,
-            topicId: context.get().activeTopicId,
+            topicId: state.metadata?.topicId,
           };
 
-          const createResult = await context.get().optimisticCreateMessage(toolMessageParams);
+          const createResult = await context.get().optimisticCreateMessage(toolMessageParams, {
+            sessionId: state.metadata!.sessionId!,
+            topicId: state.metadata?.topicId,
+          });
 
           if (!createResult) {
             log(