@lobehub/chat 1.133.6 → 1.134.0

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx

@@ -1,12 +1,14 @@
 import { ModelTag } from '@lobehub/icons';
-import { memo, useMemo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import { isDesktop } from '@/const/version';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
@@ -24,6 +26,8 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [createGroupModalOpen, setCreateGroupModalOpen] = useState(false);
   const [defaultModel] = useAgentStore((s) => [agentSelectors.inboxAgentModel(s)]);
 
+  const openSessionInNewWindow = useGlobalStore((s) => s.openSessionInNewWindow);
+
   const [active] = useSessionStore((s) => [s.activeId === id]);
   const [loading] = useChatStore((s) => [chatSelectors.isAIGenerating(s) && id === s.activeId]);
 
@@ -46,6 +50,24 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
 
   const showModel = model !== defaultModel;
 
+  const handleDoubleClick = () => {
+    if (isDesktop) {
+      openSessionInNewWindow(id);
+    }
+  };
+
+  const handleDragStart = (e: React.DragEvent) => {
+    // Set drag data to identify the session being dragged
+    e.dataTransfer.setData('text/plain', id);
+  };
+
+  const handleDragEnd = (e: React.DragEvent) => {
+    // If drag ends without being dropped in a valid target, open in new window
+    if (isDesktop && e.dataTransfer.dropEffect === 'none') {
+      openSessionInNewWindow(id);
+    }
+  };
+
   const actions = useMemo(
     () => (
       <Actions
@@ -78,8 +100,12 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
         avatarBackground={avatarBackground}
         date={updateAt?.valueOf()}
         description={description}
+        draggable={isDesktop}
         key={id}
         loading={loading}
+        onDoubleClick={handleDoubleClick}
+        onDragEnd={handleDragEnd}
+        onDragStart={handleDragStart}
         pin={pin}
         showAction={open}
         styles={{

package/src/app/[variants]/(main)/chat/_layout/Desktop/SessionPanel.tsx

@@ -7,6 +7,7 @@ import { PropsWithChildren, memo, useEffect, useMemo, useState } from 'react';
 
 import { withSuspense } from '@/components/withSuspense';
 import { FOLDER_WIDTH } from '@/const/layoutTokens';
+import { useIsSingleMode } from '@/hooks/useIsSingleMode';
 import { usePinnedAgentState } from '@/hooks/usePinnedAgentState';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
@@ -33,11 +34,14 @@ export const useStyles = createStyles(({ css, token }) => ({
 }));
 
 const SessionPanel = memo<PropsWithChildren>(({ children }) => {
+  const isSingleMode = useIsSingleMode();
+
   const { md = true } = useResponsive();
 
   const [isPinned] = usePinnedAgentState();
 
   const { styles } = useStyles();
+
   const [sessionsWidth, sessionExpandable, updatePreference] = useGlobalStore((s) => [
     systemStatusSelectors.sessionWidth(s),
     systemStatusSelectors.showSessionPanel(s),
@@ -72,6 +76,12 @@ const SessionPanel = memo<PropsWithChildren>(({ children }) => {
   const { appearance } = useThemeMode();
 
   const SessionPanel = useMemo(() => {
+    if (isSingleMode) {
+      // 在单一模式下，仍然渲染 children 以确保 SessionHydration 等逻辑组件正常工作
+      // 但使用隐藏样式而不是 return null
+      return <div style={{ display: 'none' }}>{children}</div>;
+    }
+
     return (
       <DraggablePanel
         className={styles.panel}
@@ -92,7 +102,7 @@ const SessionPanel = memo<PropsWithChildren>(({ children }) => {
         </DraggablePanelContainer>
       </DraggablePanel>
     );
-  }, [sessionsWidth, md, isPinned, sessionExpandable, tmpWidth, appearance]);
+  }, [sessionsWidth, md, isPinned, sessionExpandable, tmpWidth, appearance, isSingleMode]);
 
   return SessionPanel;
 });

package/src/app/[variants]/(main)/chat/features/TogglePanelButton.tsx

@@ -6,6 +6,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useIsSingleMode } from '@/hooks/useIsSingleMode';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 import { useUserStore } from '@/store/user';
@@ -15,6 +16,7 @@ import { HotkeyEnum } from '@/types/hotkey';
 export const TOOGLE_PANEL_BUTTON_ID = 'toggle-panel-button';
 
 const TogglePanelButton = memo(() => {
+  const isSingleMode = useIsSingleMode();
   const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ToggleLeftPanel));
 
   const { t } = useTranslation(['chat', 'hotkey']);
@@ -22,6 +24,10 @@ const TogglePanelButton = memo(() => {
   const showSessionPanel = useGlobalStore(systemStatusSelectors.showSessionPanel);
   const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
 
+  if (isSingleMode) {
+    return null
+  }
+
   return (
     <Tooltip hotkey={hotkey} title={t('toggleLeftPanel.title', { ns: 'hotkey' })}>
       <ActionIcon

package/src/config/featureFlags/index.ts

@@ -22,10 +22,10 @@ export const getServerFeatureFlagsValue = () => {
   return merge(DEFAULT_FEATURE_FLAGS, flags);
 };
 
-export const serverFeatureFlags = () => {
+export const serverFeatureFlags = (userId?: string) => {
   const serverConfig = getServerFeatureFlagsValue();
 
-  return mapFeatureFlagsEnvToState(serverConfig);
+  return mapFeatureFlagsEnvToState(serverConfig, userId);
 };
 
 export * from './schema';

package/src/config/featureFlags/schema.test.ts

@@ -1,11 +1,10 @@
 import { describe, expect, it } from 'vitest';
 
-import { FeatureFlagsSchema, mapFeatureFlagsEnvToState } from './schema';
+import { FeatureFlagsSchema, evaluateFeatureFlag, mapFeatureFlagsEnvToState } from './schema';
 
 describe('FeatureFlagsSchema', () => {
-  it('should validate correct feature flags', () => {
+  it('should validate correct feature flags with boolean values', () => {
     const result = FeatureFlagsSchema.safeParse({
-      webrtc_sync: true,
       language_model_settings: false,
       openai_api_key: true,
       openai_proxy_url: false,
@@ -18,20 +17,89 @@ describe('FeatureFlagsSchema', () => {
     expect(result.success).toBe(true);
   });
 
-  it('should reject invalid feature flags', () => {
+  it('should validate correct feature flags with user ID arrays', () => {
     const result = FeatureFlagsSchema.safeParse({
-      edit_agent: 'yes', // Invalid type, should be boolean
+      edit_agent: ['user-123', 'user-456'],
+      create_session: ['user-789'],
+      dalle: true,
+      ai_image: false,
+    });
+
+    expect(result.success).toBe(true);
+  });
+
+  it('should validate mixed boolean and array values', () => {
+    const result = FeatureFlagsSchema.safeParse({
+      edit_agent: ['user-123'],
+      create_session: true,
+      dalle: false,
+      knowledge_base: ['user-456', 'user-789'],
+    });
+
+    expect(result.success).toBe(true);
+  });
+
+  it('should reject invalid feature flags with wrong types', () => {
+    const result = FeatureFlagsSchema.safeParse({
+      edit_agent: 'yes', // Invalid type, should be boolean or array
+    });
+
+    expect(result.success).toBe(false);
+  });
+
+  it('should reject invalid feature flags with non-string array elements', () => {
+    const result = FeatureFlagsSchema.safeParse({
+      edit_agent: [123, 456], // Invalid, array should contain strings
     });
 
     expect(result.success).toBe(false);
   });
 });
 
+describe('evaluateFeatureFlag', () => {
+  it('should return true for boolean true value', () => {
+    expect(evaluateFeatureFlag(true)).toBe(true);
+    expect(evaluateFeatureFlag(true, 'user-123')).toBe(true);
+  });
+
+  it('should return false for boolean false value', () => {
+    expect(evaluateFeatureFlag(false)).toBe(false);
+    expect(evaluateFeatureFlag(false, 'user-123')).toBe(false);
+  });
+
+  it('should return undefined for undefined value', () => {
+    expect(evaluateFeatureFlag(undefined)).toBe(undefined);
+    expect(evaluateFeatureFlag(undefined, 'user-123')).toBe(undefined);
+  });
+
+  it('should return true if user ID is in the allowlist', () => {
+    const allowlist = ['user-123', 'user-456'];
+    expect(evaluateFeatureFlag(allowlist, 'user-123')).toBe(true);
+    expect(evaluateFeatureFlag(allowlist, 'user-456')).toBe(true);
+  });
+
+  it('should return false if user ID is not in the allowlist', () => {
+    const allowlist = ['user-123', 'user-456'];
+    expect(evaluateFeatureFlag(allowlist, 'user-789')).toBe(false);
+  });
+
+  it('should return false if no user ID provided with array value', () => {
+    const allowlist = ['user-123', 'user-456'];
+    expect(evaluateFeatureFlag(allowlist)).toBe(false);
+    expect(evaluateFeatureFlag(allowlist, undefined)).toBe(false);
+  });
+
+  it('should handle empty array', () => {
+    expect(evaluateFeatureFlag([], 'user-123')).toBe(false);
+    expect(evaluateFeatureFlag([])).toBe(false);
+  });
+});
+
 describe('mapFeatureFlagsEnvToState', () => {
-  it('should correctly map feature flags to state', () => {
+  it('should correctly map boolean feature flags to state', () => {
     const config = {
-      webrtc_sync: true,
       language_model_settings: false,
+      provider_settings: true,
       openai_api_key: true,
       openai_proxy_url: false,
       create_session: true,
@@ -40,22 +108,110 @@ describe('mapFeatureFlagsEnvToState', () => {
       ai_image: true,
       check_updates: true,
       welcome_suggest: true,
+      plugins: true,
+      knowledge_base: false,
+      rag_eval: true,
+      clerk_sign_up: false,
+      market: true,
+      speech_to_text: true,
+      changelog: false,
+      pin_list: true,
+      api_key_manage: false,
+      cloud_promotion: true,
+      commercial_hide_github: false,
+      commercial_hide_docs: true,
     };
 
-    const expectedState = {
+    const mappedState = mapFeatureFlagsEnvToState(config);
+
+    expect(mappedState).toMatchObject({
       isAgentEditable: false,
       showCreateSession: true,
       showLLM: false,
+      showProvider: true,
       showOpenAIApiKey: true,
       showOpenAIProxyUrl: false,
       showDalle: true,
       showAiImage: true,
       enableCheckUpdates: true,
       showWelcomeSuggest: true,
+      enablePlugins: true,
+      enableKnowledgeBase: false,
+      enableRAGEval: true,
+      enableClerkSignUp: false,
+      showMarket: true,
+      enableSTT: true,
+      showChangelog: false,
+      showPinList: true,
+      showApiKeyManage: false,
+      showCloudPromotion: true,
+      hideGitHub: false,
+      hideDocs: true,
+    });
+  });
+
+  it('should correctly evaluate user-specific flags with allowlist', () => {
+    const userId = 'user-123';
+    const config = {
+      edit_agent: ['user-123', 'user-456'],
+      create_session: ['user-789'],
+      dalle: true,
+      knowledge_base: ['user-123'],
+    };
+
+    const mappedState = mapFeatureFlagsEnvToState(config, userId);
+
+    expect(mappedState.isAgentEditable).toBe(true); // user-123 is in allowlist
+    expect(mappedState.showCreateSession).toBe(false); // user-123 is not in allowlist
+    expect(mappedState.showDalle).toBe(true); // boolean true
+    expect(mappedState.enableKnowledgeBase).toBe(true); // user-123 is in allowlist
+  });
+
+  it('should return false for array flags when user ID is not in allowlist', () => {
+    const userId = 'user-999';
+    const config = {
+      edit_agent: ['user-123', 'user-456'],
+      create_session: ['user-789'],
+      dalle: true,
+    };
+
+    const mappedState = mapFeatureFlagsEnvToState(config, userId);
+
+    expect(mappedState.isAgentEditable).toBe(false);
+    expect(mappedState.showCreateSession).toBe(false);
+    expect(mappedState.showDalle).toBe(true);
+  });
+
+  it('should return false for array flags when no user ID provided', () => {
+    const config = {
+      edit_agent: ['user-123', 'user-456'],
+      create_session: true,
     };
 
     const mappedState = mapFeatureFlagsEnvToState(config);
 
-    expect(mappedState).toEqual(expectedState);
+    expect(mappedState.isAgentEditable).toBe(false);
+    expect(mappedState.showCreateSession).toBe(true);
+  });
+
+  it('should handle mixed boolean and array values correctly', () => {
+    const userId = 'user-123';
+    const config = {
+      edit_agent: ['user-123'],
+      create_session: true,
+      dalle: false,
+      ai_image: ['user-456'],
+      knowledge_base: ['user-123', 'user-789'],
+      rag_eval: true,
+    };
+
+    const mappedState = mapFeatureFlagsEnvToState(config, userId);
+
+    expect(mappedState.isAgentEditable).toBe(true);
+    expect(mappedState.showCreateSession).toBe(true);
+    expect(mappedState.showDalle).toBe(false);
+    expect(mappedState.showAiImage).toBe(false);
+    expect(mappedState.enableKnowledgeBase).toBe(true);
+    expect(mappedState.enableRAGEval).toBe(true);
   });
 });

package/src/config/featureFlags/schema.ts

@@ -1,51 +1,71 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 import { z } from 'zod';
 
+// Define a union type for feature flag values: either boolean or array of user IDs
+const FeatureFlagValue = z.union([z.boolean(), z.array(z.string())]);
+
 export const FeatureFlagsSchema = z.object({
-  check_updates: z.boolean().optional(),
-  pin_list: z.boolean().optional(),
+  check_updates: FeatureFlagValue.optional(),
+  pin_list: FeatureFlagValue.optional(),
 
   // settings
-  language_model_settings: z.boolean().optional(),
-  provider_settings: z.boolean().optional(),
+  language_model_settings: FeatureFlagValue.optional(),
+  provider_settings: FeatureFlagValue.optional(),
 
-  openai_api_key: z.boolean().optional(),
-  openai_proxy_url: z.boolean().optional(),
+  openai_api_key: FeatureFlagValue.optional(),
+  openai_proxy_url: FeatureFlagValue.optional(),
 
   // profile
-  api_key_manage: z.boolean().optional(),
+  api_key_manage: FeatureFlagValue.optional(),
 
-  create_session: z.boolean().optional(),
-  edit_agent: z.boolean().optional(),
+  create_session: FeatureFlagValue.optional(),
+  edit_agent: FeatureFlagValue.optional(),
 
-  plugins: z.boolean().optional(),
-  dalle: z.boolean().optional(),
-  ai_image: z.boolean().optional(),
-  speech_to_text: z.boolean().optional(),
-  token_counter: z.boolean().optional(),
+  plugins: FeatureFlagValue.optional(),
+  dalle: FeatureFlagValue.optional(),
+  ai_image: FeatureFlagValue.optional(),
+  speech_to_text: FeatureFlagValue.optional(),
+  token_counter: FeatureFlagValue.optional(),
 
-  welcome_suggest: z.boolean().optional(),
-  changelog: z.boolean().optional(),
+  welcome_suggest: FeatureFlagValue.optional(),
+  changelog: FeatureFlagValue.optional(),
 
-  clerk_sign_up: z.boolean().optional(),
+  clerk_sign_up: FeatureFlagValue.optional(),
 
-  market: z.boolean().optional(),
-  knowledge_base: z.boolean().optional(),
+  market: FeatureFlagValue.optional(),
+  knowledge_base: FeatureFlagValue.optional(),
 
-  rag_eval: z.boolean().optional(),
+  rag_eval: FeatureFlagValue.optional(),
 
   // internal flag
-  cloud_promotion: z.boolean().optional(),
+  cloud_promotion: FeatureFlagValue.optional(),
 
   // the flags below can only be used with commercial license
   // if you want to use it in the commercial usage
   // please contact us for more information: hello@lobehub.com
-  commercial_hide_github: z.boolean().optional(),
-  commercial_hide_docs: z.boolean().optional(),
+  commercial_hide_github: FeatureFlagValue.optional(),
+  commercial_hide_docs: FeatureFlagValue.optional(),
 });
 
 export type IFeatureFlags = z.infer<typeof FeatureFlagsSchema>;
 
+/**
+ * Evaluate a feature flag value against a user ID
+ * @param flagValue - The feature flag value (boolean or array of user IDs)
+ * @param userId - The current user ID
+ * @returns boolean indicating if the feature is enabled for the user
+ */
+export const evaluateFeatureFlag = (
+  flagValue: boolean | string[] | undefined,
+  userId?: string,
+): boolean | undefined => {
+  if (typeof flagValue === 'boolean') return flagValue;
+
+  if (Array.isArray(flagValue)) {
+    return userId ? flagValue.includes(userId) : false;
+  }
+};
+
 export const DEFAULT_FEATURE_FLAGS: IFeatureFlags = {
   pin_list: false,
 
@@ -86,39 +106,41 @@ export const DEFAULT_FEATURE_FLAGS: IFeatureFlags = {
   commercial_hide_docs: false,
 };
 
-export const mapFeatureFlagsEnvToState = (config: IFeatureFlags) => {
+export const mapFeatureFlagsEnvToState = (config: IFeatureFlags, userId?: string) => {
   return {
-    isAgentEditable: config.edit_agent,
+    isAgentEditable: evaluateFeatureFlag(config.edit_agent, userId),
 
-    showCreateSession: config.create_session,
-    showLLM: config.language_model_settings,
-    showProvider: config.provider_settings,
-    showPinList: config.pin_list,
+    showCreateSession: evaluateFeatureFlag(config.create_session, userId),
+    showLLM: evaluateFeatureFlag(config.language_model_settings, userId),
+    showProvider: evaluateFeatureFlag(config.provider_settings, userId),
+    showPinList: evaluateFeatureFlag(config.pin_list, userId),
 
-    showOpenAIApiKey: config.openai_api_key,
-    showOpenAIProxyUrl: config.openai_proxy_url,
+    showOpenAIApiKey: evaluateFeatureFlag(config.openai_api_key, userId),
+    showOpenAIProxyUrl: evaluateFeatureFlag(config.openai_proxy_url, userId),
 
-    showApiKeyManage: config.api_key_manage,
+    showApiKeyManage: evaluateFeatureFlag(config.api_key_manage, userId),
 
-    enablePlugins: config.plugins,
-    showDalle: config.dalle,
-    showAiImage: config.ai_image,
-    showChangelog: config.changelog,
+    enablePlugins: evaluateFeatureFlag(config.plugins, userId),
+    showDalle: evaluateFeatureFlag(config.dalle, userId),
+    showAiImage: evaluateFeatureFlag(config.ai_image, userId),
+    showChangelog: evaluateFeatureFlag(config.changelog, userId),
 
-    enableCheckUpdates: config.check_updates,
-    showWelcomeSuggest: config.welcome_suggest,
+    enableCheckUpdates: evaluateFeatureFlag(config.check_updates, userId),
+    showWelcomeSuggest: evaluateFeatureFlag(config.welcome_suggest, userId),
 
-    enableClerkSignUp: config.clerk_sign_up,
+    enableClerkSignUp: evaluateFeatureFlag(config.clerk_sign_up, userId),
 
-    enableKnowledgeBase: config.knowledge_base,
-    enableRAGEval: config.rag_eval,
+    enableKnowledgeBase: evaluateFeatureFlag(config.knowledge_base, userId),
+    enableRAGEval: evaluateFeatureFlag(config.rag_eval, userId),
 
-    showCloudPromotion: config.cloud_promotion,
+    showCloudPromotion: evaluateFeatureFlag(config.cloud_promotion, userId),
 
-    showMarket: config.market,
-    enableSTT: config.speech_to_text,
+    showMarket: evaluateFeatureFlag(config.market, userId),
+    enableSTT: evaluateFeatureFlag(config.speech_to_text, userId),
 
-    hideGitHub: config.commercial_hide_github,
-    hideDocs: config.commercial_hide_docs,
+    hideGitHub: evaluateFeatureFlag(config.commercial_hide_github, userId),
+    hideDocs: evaluateFeatureFlag(config.commercial_hide_docs, userId),
   };
 };
+
+export type IFeatureFlagsState = ReturnType<typeof mapFeatureFlagsEnvToState>;

package/src/features/ElectronTitlebar/Connection/index.tsx

@@ -20,7 +20,6 @@ const useStyles = createStyles(({ css }) => {
 
 const Connection = () => {
   const { styles, theme } = useStyles();
-
   const [isOpen, setIsOpen] = useState(false);
   const [isWaiting, setWaiting] = useState(false);
 

package/src/hooks/useIsSingleMode.test.ts

@@ -0,0 +1,66 @@
+import { renderHook } from '@testing-library/react';
+import { ReadonlyURLSearchParams } from 'next/navigation';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useIsSingleMode } from './useIsSingleMode';
+
+// Mock next/navigation
+const mockUseSearchParams = vi.hoisted(() => vi.fn());
+vi.mock('next/navigation', () => ({
+  useSearchParams: mockUseSearchParams,
+}));
+
+describe('useIsSingleMode', () => {
+
+  it('should return false initially (during SSR)', () => {
+    const mockSearchParams = {
+      get: vi.fn(() => 'single'),
+    } as unknown as ReadonlyURLSearchParams;
+
+    mockUseSearchParams.mockReturnValue(mockSearchParams);
+
+    const { result } = renderHook(() => useIsSingleMode());
+
+    // In test environment, useEffect runs synchronously, so it will immediately detect single mode
+    expect(result.current).toBe(true);
+  });
+
+  it('should return true when mode=single', () => {
+    const mockSearchParams = {
+      get: vi.fn((key: string) => (key === 'mode' ? 'single' : null)),
+    } as unknown as ReadonlyURLSearchParams;
+
+    mockUseSearchParams.mockReturnValue(mockSearchParams);
+
+    const { result } = renderHook(() => useIsSingleMode());
+
+    // Should immediately detect single mode in test environment
+    expect(result.current).toBe(true);
+  });
+
+  it('should return false when mode is not single', () => {
+    const mockSearchParams = {
+      get: vi.fn((key: string) => (key === 'mode' ? 'normal' : null)),
+    } as unknown as ReadonlyURLSearchParams;
+
+    mockUseSearchParams.mockReturnValue(mockSearchParams);
+
+    const { result } = renderHook(() => useIsSingleMode());
+
+    // Should return false for non-single mode
+    expect(result.current).toBe(false);
+  });
+
+  it('should return false when no mode parameter exists', () => {
+    const mockSearchParams = {
+      get: vi.fn(() => null),
+    } as unknown as ReadonlyURLSearchParams;
+
+    mockUseSearchParams.mockReturnValue(mockSearchParams);
+
+    const { result } = renderHook(() => useIsSingleMode());
+
+    // Should return false when no mode parameter
+    expect(result.current).toBe(false);
+  });
+});

package/src/hooks/useIsSingleMode.ts

@@ -0,0 +1,29 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+/**
+ * Hook to check if the current page is in single mode
+ * Single mode is used for standalone windows in desktop app
+ * @returns boolean indicating if the current page is in single mode
+ */
+export const useIsSingleMode = (): boolean => {
+  const [isSingleMode, setIsSingleMode] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (mounted) {
+      setIsSingleMode(searchParams.get('mode') === 'single');
+    }
+  }, [searchParams, mounted]);
+
+  // Return false during SSR or before hydration
+  return mounted ? isSingleMode : false;
+};