✨ feat: support double-click to open multi agent window on the desktop (#9331)

* feat: add single pannel

* feat: add openTopicInNewWindow to global windows

* feat: use ueIsSingleMode hook to replace useSearchParams judge

* feat: add session pannel double click & drag create new window

* feat: add supensed out in SideBar

* fix: update test.ts

* feat: add ts define

* feat: loading singlemode not render draggablePannel

Author: ONLY-yours

apps/desktop/src/main/appBrowsers.ts

@@ -46,4 +46,55 @@ export const appBrowsers = {
   },
 } satisfies Record<string, BrowserWindowOpts>;
 
+// Window templates for multi-instance windows
+export interface WindowTemplate {
+  allowMultipleInstances: boolean;
+  // Include common BrowserWindow options
+  autoHideMenuBar?: boolean;
+  baseIdentifier: string;
+  basePath: string;
+  devTools?: boolean;
+  height?: number;
+  keepAlive?: boolean;
+  minWidth?: number;
+  parentIdentifier?: string;
+  showOnInit?: boolean;
+  title?: string;
+  titleBarStyle?: 'hidden' | 'default' | 'hiddenInset' | 'customButtonsOnHover';
+  vibrancy?:
+    | 'appearance-based'
+    | 'content'
+    | 'fullscreen-ui'
+    | 'header'
+    | 'hud'
+    | 'menu'
+    | 'popover'
+    | 'selection'
+    | 'sheet'
+    | 'sidebar'
+    | 'titlebar'
+    | 'tooltip'
+    | 'under-page'
+    | 'under-window'
+    | 'window';
+  width?: number;
+}
+
+export const windowTemplates = {
+  chatSingle: {
+    allowMultipleInstances: true,
+    autoHideMenuBar: true,
+    baseIdentifier: 'chatSingle',
+    basePath: '/chat',
+    height: 600,
+    keepAlive: false, // Multi-instance windows don't need to stay alive
+    minWidth: 400,
+    parentIdentifier: 'chat',
+    titleBarStyle: 'hidden',
+    vibrancy: 'under-window',
+    width: 900,
+  },
+} satisfies Record<string, WindowTemplate>;
+
 export type AppBrowsersIdentifiers = keyof typeof appBrowsers;
+export type WindowTemplateIdentifiers = keyof typeof windowTemplates;

apps/desktop/src/main/controllers/BrowserWindowsCtr.ts

@@ -1,7 +1,7 @@
 import { InterceptRouteParams } from '@lobechat/electron-client-ipc';
 import { extractSubPath, findMatchingRoute } from '~common/routes';
 
-import { AppBrowsersIdentifiers, BrowsersIdentifiers } from '@/appBrowsers';
+import { AppBrowsersIdentifiers, BrowsersIdentifiers, WindowTemplateIdentifiers } from '@/appBrowsers';
 import { IpcClientEventSender } from '@/types/ipcClientEvent';
 
 import { ControllerModule, ipcClientEvent, shortcut } from './index';
@@ -100,6 +100,77 @@ export default class BrowserWindowsCtr extends ControllerModule {
     }
   }
 
+  /**
+   * Create a new multi-instance window
+   */
+  @ipcClientEvent('createMultiInstanceWindow')
+  async createMultiInstanceWindow(params: {
+    templateId: WindowTemplateIdentifiers;
+    path: string;
+    uniqueId?: string;
+  }) {
+    try {
+      console.log('[BrowserWindowsCtr] Creating multi-instance window:', params);
+
+      const result = this.app.browserManager.createMultiInstanceWindow(
+        params.templateId,
+        params.path,
+        params.uniqueId,
+      );
+
+      // Show the window
+      result.browser.show();
+
+      return {
+        success: true,
+        windowId: result.identifier,
+      };
+    } catch (error) {
+      console.error('[BrowserWindowsCtr] Failed to create multi-instance window:', error);
+      return {
+        error: error.message,
+        success: false,
+      };
+    }
+  }
+
+  /**
+   * Get all windows by template
+   */
+  @ipcClientEvent('getWindowsByTemplate')
+  async getWindowsByTemplate(templateId: string) {
+    try {
+      const windowIds = this.app.browserManager.getWindowsByTemplate(templateId);
+      return {
+        success: true,
+        windowIds,
+      };
+    } catch (error) {
+      console.error('[BrowserWindowsCtr] Failed to get windows by template:', error);
+      return {
+        error: error.message,
+        success: false,
+      };
+    }
+  }
+
+  /**
+   * Close all windows by template
+   */
+  @ipcClientEvent('closeWindowsByTemplate')
+  async closeWindowsByTemplate(templateId: string) {
+    try {
+      this.app.browserManager.closeWindowsByTemplate(templateId);
+      return { success: true };
+    } catch (error) {
+      console.error('[BrowserWindowsCtr] Failed to close windows by template:', error);
+      return {
+        error: error.message,
+        success: false,
+      };
+    }
+  }
+
   /**
    * Open target window and navigate to specified sub-path
    */

apps/desktop/src/main/core/browser/BrowserManager.ts

@@ -3,7 +3,7 @@ import { WebContents } from 'electron';
 
 import { createLogger } from '@/utils/logger';
 
-import { AppBrowsersIdentifiers, appBrowsers } from '../../appBrowsers';
+import { AppBrowsersIdentifiers, appBrowsers, WindowTemplate, WindowTemplateIdentifiers, windowTemplates } from '../../appBrowsers';
 import type { App } from '../App';
 import type { BrowserWindowOpts } from './Browser';
 import Browser from './Browser';
@@ -14,9 +14,9 @@ const logger = createLogger('core:BrowserManager');
 export class BrowserManager {
   app: App;
 
-  browsers: Map<AppBrowsersIdentifiers, Browser> = new Map();
+  browsers: Map<string, Browser> = new Map();
 
-  private webContentsMap = new Map<WebContents, AppBrowsersIdentifiers>();
+  private webContentsMap = new Map<WebContents, string>();
 
   constructor(app: App) {
     logger.debug('Initializing BrowserManager');
@@ -51,12 +51,12 @@ export class BrowserManager {
   };
 
   broadcastToWindow = <T extends MainBroadcastEventKey>(
-    identifier: AppBrowsersIdentifiers,
+    identifier: string,
     event: T,
     data: MainBroadcastParams<T>,
   ) => {
     logger.debug(`Broadcasting event ${event} to window: ${identifier}`);
-    this.browsers.get(identifier).broadcast(event, data);
+    this.browsers.get(identifier)?.broadcast(event, data);
   };
 
   /**
@@ -87,13 +87,21 @@ export class BrowserManager {
    * @param identifier Window identifier
    * @param subPath Sub-path, such as 'agent', 'about', etc.
    */
-  async redirectToPage(identifier: AppBrowsersIdentifiers, subPath?: string) {
+  async redirectToPage(identifier: string, subPath?: string) {
     try {
       // Ensure window is retrieved or created
       const browser = this.retrieveByIdentifier(identifier);
       browser.hide();
 
-      const baseRoute = appBrowsers[identifier].path;
+      // Handle both static and dynamic windows
+      let baseRoute: string;
+      if (identifier in appBrowsers) {
+        baseRoute = appBrowsers[identifier as AppBrowsersIdentifiers].path;
+      } else {
+        // For dynamic windows, extract base route from the browser options
+        const browserOptions = browser.options;
+        baseRoute = browserOptions.path;
+      }
 
       // Build complete URL path
       const fullPath = subPath ? `${baseRoute}/${subPath}` : baseRoute;
@@ -114,13 +122,75 @@ export class BrowserManager {
   /**
    * get Browser by identifier
    */
-  retrieveByIdentifier(identifier: AppBrowsersIdentifiers) {
+  retrieveByIdentifier(identifier: string) {
     const browser = this.browsers.get(identifier);
 
     if (browser) return browser;
 
-    logger.debug(`Browser ${identifier} not found, initializing new instance`);
-    return this.retrieveOrInitialize(appBrowsers[identifier]);
+    // Check if it's a static browser
+    if (identifier in appBrowsers) {
+      logger.debug(`Browser ${identifier} not found, initializing new instance`);
+      return this.retrieveOrInitialize(appBrowsers[identifier as AppBrowsersIdentifiers]);
+    }
+
+    throw new Error(`Browser ${identifier} not found and is not a static browser`);
+  }
+
+  /**
+   * Create a multi-instance window from template
+   * @param templateId Template identifier
+   * @param path Full path with query parameters
+   * @param uniqueId Optional unique identifier, will be generated if not provided
+   * @returns The window identifier and Browser instance
+   */
+  createMultiInstanceWindow(templateId: WindowTemplateIdentifiers, path: string, uniqueId?: string) {
+    const template = windowTemplates[templateId];
+    if (!template) {
+      throw new Error(`Window template ${templateId} not found`);
+    }
+
+    // Generate unique identifier
+    const windowId = uniqueId || `${template.baseIdentifier}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+    // Create browser options from template
+    const browserOpts: BrowserWindowOpts = {
+      ...template,
+      identifier: windowId,
+      path: path,
+    };
+
+    logger.debug(`Creating multi-instance window: ${windowId} with path: ${path}`);
+
+    const browser = this.retrieveOrInitialize(browserOpts);
+
+    return {
+      identifier: windowId,
+      browser: browser,
+    };
+  }
+
+  /**
+   * Get all windows based on template
+   * @param templateId Template identifier
+   * @returns Array of window identifiers matching the template
+   */
+  getWindowsByTemplate(templateId: string): string[] {
+    const prefix = `${templateId}_`;
+    return Array.from(this.browsers.keys()).filter(id => id.startsWith(prefix));
+  }
+
+  /**
+   * Close all windows based on template
+   * @param templateId Template identifier
+   */
+  closeWindowsByTemplate(templateId: string): void {
+    const windowIds = this.getWindowsByTemplate(templateId);
+    windowIds.forEach(id => {
+      const browser = this.browsers.get(id);
+      if (browser) {
+        browser.close();
+      }
+    });
   }
 
   /**
@@ -144,7 +214,7 @@ export class BrowserManager {
    * @param options Browser window options
    */
   private retrieveOrInitialize(options: BrowserWindowOpts) {
-    let browser = this.browsers.get(options.identifier as AppBrowsersIdentifiers);
+    let browser = this.browsers.get(options.identifier);
     if (browser) {
       logger.debug(`Retrieved existing browser: ${options.identifier}`);
       return browser;
@@ -153,7 +223,7 @@ export class BrowserManager {
     logger.debug(`Creating new browser: ${options.identifier}`);
     browser = new Browser(options, this.app);
 
-    const identifier = options.identifier as AppBrowsersIdentifiers;
+    const identifier = options.identifier;
     this.browsers.set(identifier, browser);
 
     // 记录 WebContents 和 identifier 的映射
@@ -166,32 +236,32 @@ export class BrowserManager {
 
     browser.browserWindow.on('show', () => {
       if (browser.webContents)
-        this.webContentsMap.set(browser.webContents, browser.identifier as AppBrowsersIdentifiers);
+        this.webContentsMap.set(browser.webContents, browser.identifier);
     });
 
     return browser;
   }
 
   closeWindow(identifier: string) {
-    const browser = this.browsers.get(identifier as AppBrowsersIdentifiers);
+    const browser = this.browsers.get(identifier);
     browser?.close();
   }
 
   minimizeWindow(identifier: string) {
-    const browser = this.browsers.get(identifier as AppBrowsersIdentifiers);
+    const browser = this.browsers.get(identifier);
     browser?.browserWindow.minimize();
   }
 
   maximizeWindow(identifier: string) {
-    const browser = this.browsers.get(identifier as AppBrowsersIdentifiers);
-    if (browser.browserWindow.isMaximized()) {
+    const browser = this.browsers.get(identifier);
+    if (browser?.browserWindow.isMaximized()) {
       browser?.browserWindow.unmaximize();
     } else {
       browser?.browserWindow.maximize();
     }
   }
 
-  getIdentifierByWebContents(webContents: WebContents): AppBrowsersIdentifiers | null {
+  getIdentifierByWebContents(webContents: WebContents): string | null {
     return this.webContentsMap.get(webContents) || null;
   }
 

packages/electron-client-ipc/src/events/windows.ts

@@ -1,5 +1,23 @@
 import { InterceptRouteParams, InterceptRouteResponse } from '../types/route';
 
+export interface CreateMultiInstanceWindowParams {
+  templateId: string;
+  path: string;
+  uniqueId?: string;
+}
+
+export interface CreateMultiInstanceWindowResponse {
+  success: boolean;
+  windowId?: string;
+  error?: string;
+}
+
+export interface GetWindowsByTemplateResponse {
+  success: boolean;
+  windowIds?: string[];
+  error?: string;
+}
+
 export interface WindowsDispatchEvents {
   /**
    * 拦截客户端路由导航请求
@@ -14,4 +32,25 @@ export interface WindowsDispatchEvents {
   openDevtools: () => void;
 
   openSettingsWindow: (tab?: string) => void;
+
+  /**
+   * Create a new multi-instance window
+   * @param params Window creation parameters
+   * @returns Creation result
+   */
+  createMultiInstanceWindow: (params: CreateMultiInstanceWindowParams) => CreateMultiInstanceWindowResponse;
+
+  /**
+   * Get all windows by template
+   * @param templateId Template identifier
+   * @returns List of window identifiers
+   */
+  getWindowsByTemplate: (templateId: string) => GetWindowsByTemplateResponse;
+
+  /**
+   * Close all windows by template
+   * @param templateId Template identifier
+   * @returns Operation result
+   */
+  closeWindowsByTemplate: (templateId: string) => { success: boolean; error?: string };
 }