diff --git a/.gitignore b/.gitignore index 68ea0f203f..23d8a8531a 100644 --- a/.gitignore +++ b/.gitignore @@ -47,8 +47,13 @@ local .cursorrules .cursor/rules -# test +# vitest coverage .vitest-cache vitest.config.*.timestamp-* + +# playwright +playwright-report +test-results + YOUR_MEMORY_FILE_PATH diff --git a/electron-builder.yml b/electron-builder.yml index bc250df519..5e1f97f001 100644 --- a/electron-builder.yml +++ b/electron-builder.yml @@ -12,9 +12,10 @@ electronLanguages: directories: buildResources: build files: - - '!{.vscode,.yarn,.github}' + - '**/*' + - '!{.vscode,.yarn,.yarn-lock,.github,.cursorrules,.prettierrc}' - '!electron.vite.config.{js,ts,mjs,cjs}' - - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}' + - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,eslint.config.mjs,dev-app-update.yml,CHANGELOG.md,README.md}' - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}' - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}' - '!src' @@ -22,20 +23,28 @@ files: - '!local' - '!docs' - '!packages' + - '!.swc' + - '!.bin' + - '!._*' + - '!*.log' - '!stats.html' - '!*.md' + - '!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}' - '!**/*.{map,ts,tsx,jsx,less,scss,sass,css.d.ts,d.cts,d.mts,md,markdown,yaml,yml}' - - '!**/{test,tests,__tests__,coverage}/**' + - '!**/{test,tests,__tests__,powered-test,coverage}/**' + - '!**/{example,examples}/**' - '!**/*.{spec,test}.{js,jsx,ts,tsx}' - '!**/*.min.*.map' - '!**/*.d.ts' - - '!**/{.DS_Store,Thumbs.db}' - - '!**/{LICENSE,LICENSE.txt,LICENSE-MIT.txt,*.LICENSE.txt,NOTICE.txt,README.md,CHANGELOG.md}' + - '!**/{.DS_Store,Thumbs.db,thumbs.db,__pycache__}' + - '!**/{LICENSE,LICENSE.txt,LICENSE-MIT.txt,*.LICENSE.txt,NOTICE.txt,README.md,readme.md,CHANGELOG.md}' - '!node_modules/rollup-plugin-visualizer' - '!node_modules/js-tiktoken' - '!node_modules/@tavily/core/node_modules/js-tiktoken' - '!node_modules/pdf-parse/lib/pdf.js/{v1.9.426,v1.10.88,v2.0.550}' - '!node_modules/mammoth/{mammoth.browser.js,mammoth.browser.min.js}' + - '!node_modules/selection-hook/prebuilds/**/*' # we rebuild .node, don't use prebuilds + - '!**/*.{h,iobj,ipdb,tlog,recipe,vcxproj,vcxproj.filters}' # filter .node build files asarUnpack: - resources/** - '**/*.{metal,exp,lib}' diff --git a/electron.vite.config.ts b/electron.vite.config.ts index 7364285e7b..b6e0148e81 100644 --- a/electron.vite.config.ts +++ b/electron.vite.config.ts @@ -37,7 +37,7 @@ export default defineConfig({ }, build: { rollupOptions: { - external: ['@libsql/client'] + external: ['@libsql/client', 'bufferutil', 'utf-8-validate'] }, sourcemap: process.env.NODE_ENV === 'development' }, @@ -89,7 +89,9 @@ export default defineConfig({ rollupOptions: { input: { index: resolve(__dirname, 'src/renderer/index.html'), - miniWindow: resolve(__dirname, 'src/renderer/miniWindow.html') + miniWindow: resolve(__dirname, 'src/renderer/miniWindow.html'), + selectionToolbar: resolve(__dirname, 'src/renderer/selectionToolbar.html'), + selectionAction: resolve(__dirname, 'src/renderer/selectionAction.html') } } } diff --git a/package.json b/package.json index f647733196..f2cfcf2402 100644 --- a/package.json +++ b/package.json @@ -45,12 +45,13 @@ "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false", "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false", "check:i18n": "node scripts/check-i18n.js", - "test": "yarn test:renderer", - "test:coverage": "yarn test:renderer:coverage", - "test:node": "npx -y tsx --test src/**/*.test.ts", - "test:renderer": "vitest run", - "test:renderer:ui": "vitest --ui", - "test:renderer:coverage": "vitest run --coverage", + "test": "vitest run --silent", + "test:main": "vitest run --project main", + "test:renderer": "vitest run --project renderer", + "test:coverage": "vitest run --coverage --silent", + "test:ui": "vitest --ui", + "test:watch": "vitest", + "test:e2e": "yarn playwright test", "test:lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts", "format": "prettier --write .", "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix", @@ -69,14 +70,12 @@ "@cherrystudio/embedjs-loader-xml": "^0.1.31", "@cherrystudio/embedjs-openai": "^0.1.31", "@electron-toolkit/utils": "^3.0.0", - "@electron/notarize": "^2.5.0", "@langchain/community": "^0.3.36", "@strongtz/win32-arm64-msvc": "^0.4.7", "@tanstack/react-query": "^5.27.0", "@types/react-infinite-scroll-component": "^5.0.0", "archiver": "^7.0.1", "async-mutex": "^0.5.0", - "color": "^5.0.0", "diff": "^7.0.0", "docx": "^9.0.2", "electron-log": "^5.1.5", @@ -84,22 +83,18 @@ "electron-updater": "6.6.4", "electron-window-state": "^5.0.3", "epub": "patch:epub@npm%3A1.3.0#~/.yarn/patches/epub-npm-1.3.0-8325494ffe.patch", - "fast-diff": "^1.3.0", "fast-xml-parser": "^5.2.0", - "fetch-socks": "^1.3.2", "fs-extra": "^11.2.0", - "got-scraping": "^4.1.1", "jsdom": "^26.0.0", "markdown-it": "^14.1.0", "node-stream-zip": "^1.15.0", "officeparser": "^4.1.1", "os-proxy-config": "^1.1.2", "proxy-agent": "^6.5.0", + "selection-hook": "^0.9.14", "tar": "^7.4.3", "turndown": "^7.2.0", - "turndown-plugin-gfm": "^1.0.2", "webdav": "^5.8.0", - "ws": "^8.18.1", "zipread": "^1.3.3" }, "devDependencies": { @@ -112,6 +107,7 @@ "@electron-toolkit/eslint-config-ts": "^3.0.0", "@electron-toolkit/preload": "^3.0.0", "@electron-toolkit/tsconfig": "^1.0.1", + "@electron/notarize": "^2.5.0", "@emotion/is-prop-valid": "^1.3.1", "@eslint-react/eslint-plugin": "^1.36.1", "@eslint/js": "^9.22.0", @@ -121,9 +117,13 @@ "@modelcontextprotocol/sdk": "^1.11.4", "@mozilla/readability": "^0.6.0", "@notionhq/client": "^2.2.15", + "@playwright/test": "^1.52.0", "@reduxjs/toolkit": "^2.2.5", "@shikijs/markdown-it": "^3.4.2", "@swc/plugin-styled-components": "^7.1.5", + "@testing-library/dom": "^10.4.0", + "@testing-library/jest-dom": "^6.6.3", + "@testing-library/react": "^16.3.0", "@tryfabric/martian": "^1.2.4", "@types/diff": "^7", "@types/fs-extra": "^11", @@ -142,12 +142,15 @@ "@uiw/codemirror-themes-all": "^4.23.12", "@uiw/react-codemirror": "^4.23.12", "@vitejs/plugin-react-swc": "^3.9.0", - "@vitest/ui": "^3.1.1", - "@vitest/web-worker": "^3.1.3", + "@vitest/browser": "^3.1.4", + "@vitest/coverage-v8": "^3.1.4", + "@vitest/ui": "^3.1.4", + "@vitest/web-worker": "^3.1.4", "@xyflow/react": "^12.4.4", "antd": "^5.22.5", "axios": "^1.7.3", "browser-image-compression": "^2.0.2", + "color": "^5.0.0", "dayjs": "^1.11.11", "dexie": "^4.0.8", "dexie-react-hooks": "^1.1.7", @@ -163,9 +166,11 @@ "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-simple-import-sort": "^12.1.1", "eslint-plugin-unused-imports": "^4.1.4", + "fast-diff": "^1.3.0", "html-to-image": "^1.11.13", "husky": "^9.1.7", "i18next": "^23.11.5", + "jest-styled-components": "^7.2.0", "lint-staged": "^15.5.0", "lodash": "^4.17.21", "lru-cache": "^11.1.0", @@ -176,6 +181,7 @@ "npx-scope-finder": "^1.2.0", "openai": "patch:openai@npm%3A4.96.0#~/.yarn/patches/openai-npm-4.96.0-0665b05cb9.patch", "p-queue": "^8.1.0", + "playwright": "^1.52.0", "prettier": "^3.5.3", "rc-virtual-list": "^3.18.6", "react": "^19.0.0", @@ -207,7 +213,7 @@ "typescript": "^5.6.2", "uuid": "^10.0.0", "vite": "6.2.6", - "vitest": "^3.1.1" + "vitest": "^3.1.4" }, "resolutions": { "pdf-parse@npm:1.1.1": "patch:pdf-parse@npm%3A1.1.1#~/.yarn/patches/pdf-parse-npm-1.1.1-04a6109b2a.patch", diff --git a/packages/shared/IpcChannel.ts b/packages/shared/IpcChannel.ts index e8bd965065..528b64c4e4 100644 --- a/packages/shared/IpcChannel.ts +++ b/packages/shared/IpcChannel.ts @@ -176,5 +176,20 @@ export enum IpcChannel { StoreSync_BroadcastSync = 'store-sync:broadcast-sync', // Provider - Provider_AddKey = 'provider:add-key' + Provider_AddKey = 'provider:add-key', + + //Selection Assistant + Selection_TextSelected = 'selection:text-selected', + Selection_ToolbarHide = 'selection:toolbar-hide', + Selection_ToolbarVisibilityChange = 'selection:toolbar-visibility-change', + Selection_ToolbarDetermineSize = 'selection:toolbar-determine-size', + Selection_WriteToClipboard = 'selection:write-to-clipboard', + Selection_SetEnabled = 'selection:set-enabled', + Selection_SetTriggerMode = 'selection:set-trigger-mode', + Selection_SetFollowToolbar = 'selection:set-follow-toolbar', + Selection_ActionWindowClose = 'selection:action-window-close', + Selection_ActionWindowMinimize = 'selection:action-window-minimize', + Selection_ActionWindowPin = 'selection:action-window-pin', + Selection_ProcessAction = 'selection:process-action', + Selection_UpdateActionData = 'selection:update-action-data' } diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000000..e12ce7ab6d --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,42 @@ +import { defineConfig, devices } from '@playwright/test' + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + // Look for test files, relative to this configuration file. + testDir: './tests/e2e', + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Base URL to use in actions like `await page.goto('/')`. */ + // baseURL: 'http://localhost:3000', + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry' + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] } + } + ] + + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'npm run start', + // url: 'http://localhost:3000', + // reuseExistingServer: !process.env.CI, + // }, +}) diff --git a/src/main/index.ts b/src/main/index.ts index 12b1c9c16f..d67a8f0189 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -16,6 +16,7 @@ import { registerProtocolClient, setupAppImageDeepLink } from './services/ProtocolClient' +import selectionService, { initSelectionService } from './services/SelectionService' import { registerShortcuts } from './services/ShortcutService' import { TrayService } from './services/TrayService' import { windowService } from './services/WindowService' @@ -84,6 +85,9 @@ if (!app.requestSingleInstanceLock()) { .then((name) => console.log(`Added Extension: ${name}`)) .catch((err) => console.log('An error occurred: ', err)) } + + //start selection assistant service + initSelectionService() }) registerProtocolClient(app) @@ -110,6 +114,11 @@ if (!app.requestSingleInstanceLock()) { app.on('before-quit', () => { app.isQuitting = true + + // quit selection service + if (selectionService) { + selectionService.quit() + } }) app.on('will-quit', async () => { diff --git a/src/main/ipc.ts b/src/main/ipc.ts index 842b952da3..9c75b514c1 100644 --- a/src/main/ipc.ts +++ b/src/main/ipc.ts @@ -26,6 +26,7 @@ import * as NutstoreService from './services/NutstoreService' import ObsidianVaultService from './services/ObsidianVaultService' import { ProxyConfig, proxyManager } from './services/ProxyManager' import { searchService } from './services/SearchService' +import { SelectionService } from './services/SelectionService' import { registerShortcuts, unregisterAllShortcuts } from './services/ShortcutService' import storeSyncService from './services/StoreSyncService' import { TrayService } from './services/TrayService' @@ -379,4 +380,7 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) { // store sync storeSyncService.registerIpcHandler() + + // selection assistant + SelectionService.registerIpcHandler() } diff --git a/src/main/services/ConfigManager.ts b/src/main/services/ConfigManager.ts index 6242709385..996b976f0c 100644 --- a/src/main/services/ConfigManager.ts +++ b/src/main/services/ConfigManager.ts @@ -5,7 +5,7 @@ import Store from 'electron-store' import { locales } from '../utils/locales' -enum ConfigKeys { +export enum ConfigKeys { Language = 'language', Theme = 'theme', LaunchToTray = 'launchToTray', @@ -16,7 +16,10 @@ enum ConfigKeys { ClickTrayToShowQuickAssistant = 'clickTrayToShowQuickAssistant', EnableQuickAssistant = 'enableQuickAssistant', AutoUpdate = 'autoUpdate', - EnableDataCollection = 'enableDataCollection' + EnableDataCollection = 'enableDataCollection', + SelectionAssistantEnabled = 'selectionAssistantEnabled', + SelectionAssistantTriggerMode = 'selectionAssistantTriggerMode', + SelectionAssistantFollowToolbar = 'selectionAssistantFollowToolbar' } export class ConfigManager { @@ -146,6 +149,36 @@ export class ConfigManager { this.set(ConfigKeys.EnableDataCollection, value) } + // Selection Assistant: is enabled the selection assistant + getSelectionAssistantEnabled(): boolean { + return this.get(ConfigKeys.SelectionAssistantEnabled, true) + } + + setSelectionAssistantEnabled(value: boolean) { + this.set(ConfigKeys.SelectionAssistantEnabled, value) + this.notifySubscribers(ConfigKeys.SelectionAssistantEnabled, value) + } + + // Selection Assistant: trigger mode (selected, ctrlkey) + getSelectionAssistantTriggerMode(): string { + return this.get(ConfigKeys.SelectionAssistantTriggerMode, 'selected') + } + + setSelectionAssistantTriggerMode(value: string) { + this.set(ConfigKeys.SelectionAssistantTriggerMode, value) + this.notifySubscribers(ConfigKeys.SelectionAssistantTriggerMode, value) + } + + // Selection Assistant: if action window position follow toolbar + getSelectionAssistantFollowToolbar(): boolean { + return this.get(ConfigKeys.SelectionAssistantFollowToolbar, true) + } + + setSelectionAssistantFollowToolbar(value: boolean) { + this.set(ConfigKeys.SelectionAssistantFollowToolbar, value) + this.notifySubscribers(ConfigKeys.SelectionAssistantFollowToolbar, value) + } + set(key: string, value: unknown) { this.store.set(key, value) } diff --git a/src/main/services/SelectionService.ts b/src/main/services/SelectionService.ts new file mode 100644 index 0000000000..512240e564 --- /dev/null +++ b/src/main/services/SelectionService.ts @@ -0,0 +1,1022 @@ +import { isDev, isWin } from '@main/constant' +import { IpcChannel } from '@shared/IpcChannel' +import { BrowserWindow, ipcMain, screen } from 'electron' +import Logger from 'electron-log' +import { join } from 'path' +import type { + KeyboardEventData, + MouseEventData, + SelectionHookConstructor, + SelectionHookInstance, + TextSelectionData +} from 'selection-hook' + +import type { ActionItem } from '../../renderer/src/types/selectionTypes' +import { ConfigKeys, configManager } from './ConfigManager' + +let SelectionHook: SelectionHookConstructor | null = null +try { + if (isWin) { + SelectionHook = require('selection-hook') + } +} catch (error) { + Logger.error('Failed to load selection-hook:', error) +} + +// Type definitions +type Point = { x: number; y: number } +type RelativeOrientation = + | 'topLeft' + | 'topRight' + | 'topMiddle' + | 'bottomLeft' + | 'bottomRight' + | 'bottomMiddle' + | 'middleLeft' + | 'middleRight' + | 'center' + +/** SelectionService is a singleton class that manages the selection hook and the toolbar window + * + * Features: + * - Text selection detection and processing + * - Floating toolbar management + * - Action window handling + * - Multiple trigger modes (selection/alt-key) + * - Screen boundary-aware positioning + * + * Usage: + * import selectionService from '/src/main/services/SelectionService' + * selectionService?.start() + */ +export class SelectionService { + private static instance: SelectionService | null = null + private selectionHook: SelectionHookInstance | null = null + + private static isIpcHandlerRegistered = false + + private initStatus: boolean = false + private started: boolean = false + + private triggerMode = 'selected' + private isFollowToolbar = true + + private toolbarWindow: BrowserWindow | null = null + private actionWindows = new Set() + private preloadedActionWindows: BrowserWindow[] = [] + private readonly PRELOAD_ACTION_WINDOW_COUNT = 1 + + private isHideByMouseKeyListenerActive: boolean = false + private isCtrlkeyListenerActive: boolean = false + /** + * Ctrlkey action states: + * 0 - Ready to monitor ctrlkey action + * >0 - Currently monitoring ctrlkey action + * -1 - Ctrlkey action triggered, no need to process again + */ + private lastCtrlkeyDownTime: number = 0 + + private zoomFactor: number = 1 + + private TOOLBAR_WIDTH = 350 + private TOOLBAR_HEIGHT = 43 + + private readonly ACTION_WINDOW_WIDTH = 500 + private readonly ACTION_WINDOW_HEIGHT = 400 + + private constructor() { + try { + if (!SelectionHook) { + throw new Error('module selection-hook not exists') + } + + this.selectionHook = new SelectionHook() + if (this.selectionHook) { + this.initZoomFactor() + + this.initStatus = true + } + } catch (error) { + this.logError('Failed to initialize SelectionService:', error as Error) + } + } + + public static getInstance(): SelectionService | null { + if (!isWin) return null + + if (!SelectionService.instance) { + SelectionService.instance = new SelectionService() + } + + if (SelectionService.instance.initStatus) { + return SelectionService.instance + } + return null + } + + public getSelectionHook(): SelectionHookInstance | null { + return this.selectionHook + } + + /** + * Initialize zoom factor from config and subscribe to changes + * Ensures UI elements scale properly with system DPI settings + */ + private initZoomFactor() { + const zoomFactor = configManager.getZoomFactor() + if (zoomFactor) { + this.setZoomFactor(zoomFactor) + } + + configManager.subscribe('ZoomFactor', this.setZoomFactor) + } + + public setZoomFactor = (zoomFactor: number) => { + this.zoomFactor = zoomFactor + } + + private initConfig() { + this.triggerMode = configManager.getSelectionAssistantTriggerMode() + this.isFollowToolbar = configManager.getSelectionAssistantFollowToolbar() + + configManager.subscribe(ConfigKeys.SelectionAssistantTriggerMode, (triggerMode: string) => { + this.triggerMode = triggerMode + this.processTriggerMode() + }) + + configManager.subscribe(ConfigKeys.SelectionAssistantFollowToolbar, (isFollowToolbar: boolean) => { + this.isFollowToolbar = isFollowToolbar + }) + } + + /** + * Start the selection service and initialize required windows + * @returns {boolean} Success status of service start + */ + public start(): boolean { + if (!this.selectionHook || this.started) { + this.logError(new Error('SelectionService start(): instance is null or already started')) + return false + } + + try { + //init basic configs + this.initConfig() + //make sure the toolbar window is ready + this.createToolbarWindow() + // Initialize preloaded windows + this.initPreloadedActionWindows() + // Handle errors + this.selectionHook.on('error', (error: { message: string }) => { + this.logError('Error in SelectionHook:', error as Error) + }) + // Handle text selection events + this.selectionHook.on('text-selection', this.processTextSelection) + + // Start the hook + if (this.selectionHook.start({ debug: isDev })) { + //init trigger mode configs + this.processTriggerMode() + + this.started = true + this.logInfo('SelectionService Started') + return true + } + + this.logError(new Error('Failed to start text selection hook.')) + return false + } catch (error) { + this.logError('Failed to set up text selection hook:', error as Error) + return false + } + } + + /** + * Stop the selection service and cleanup resources + * Called when user disables selection assistant + * @returns {boolean} Success status of service stop + */ + public stop(): boolean { + if (!this.selectionHook) return false + + this.selectionHook.stop() + this.selectionHook.cleanup() + if (this.toolbarWindow) { + this.toolbarWindow.close() + this.toolbarWindow = null + } + this.started = false + this.logInfo('SelectionService Stopped') + return true + } + + /** + * Completely quit the selection service + * Called when the app is closing + */ + public quit(): void { + if (!this.selectionHook) return + + this.stop() + + this.selectionHook = null + this.initStatus = false + SelectionService.instance = null + this.logInfo('SelectionService Quitted') + } + + /** + * Create and configure the toolbar window + * Sets up window properties, event handlers, and loads the toolbar UI + * @param readyCallback Optional callback when window is ready to show + */ + private createToolbarWindow(readyCallback?: () => void) { + if (this.isToolbarAlive()) return + + const { toolbarWidth, toolbarHeight } = this.getToolbarRealSize() + + this.toolbarWindow = new BrowserWindow({ + width: toolbarWidth, + height: toolbarHeight, + frame: false, + transparent: true, + alwaysOnTop: true, + skipTaskbar: true, + resizable: false, + minimizable: false, + maximizable: false, + movable: true, + focusable: false, + hasShadow: false, + thickFrame: false, + roundedCorners: true, + backgroundMaterial: 'none', + type: 'toolbar', + show: false, + webPreferences: { + preload: join(__dirname, '../preload/index.js'), + contextIsolation: true, + nodeIntegration: false, + sandbox: false, + devTools: isDev ? true : false + } + }) + + // Hide when losing focus + this.toolbarWindow.on('blur', () => { + this.hideToolbar() + }) + + // Clean up when closed + this.toolbarWindow.on('closed', () => { + this.toolbarWindow = null + }) + + // Add show/hide event listeners + this.toolbarWindow.on('show', () => { + this.toolbarWindow?.webContents.send(IpcChannel.Selection_ToolbarVisibilityChange, true) + }) + + this.toolbarWindow.on('hide', () => { + this.toolbarWindow?.webContents.send(IpcChannel.Selection_ToolbarVisibilityChange, false) + }) + + /** uncomment to open dev tools in dev mode */ + // if (isDev) { + // this.toolbarWindow.once('ready-to-show', () => { + // this.toolbarWindow!.webContents.openDevTools({ mode: 'detach' }) + // }) + // } + + if (readyCallback) { + this.toolbarWindow.once('ready-to-show', readyCallback) + } + + /** get ready to load the toolbar window */ + + if (isDev && process.env['ELECTRON_RENDERER_URL']) { + this.toolbarWindow.loadURL(process.env['ELECTRON_RENDERER_URL'] + '/selectionToolbar.html') + } else { + this.toolbarWindow.loadFile(join(__dirname, '../renderer/selectionToolbar.html')) + } + } + + /** + * Show toolbar at specified position with given orientation + * @param point Reference point for positioning, logical coordinates + * @param orientation Preferred position relative to reference point + */ + private showToolbarAtPosition(point: Point, orientation: RelativeOrientation) { + if (!this.isToolbarAlive()) { + this.createToolbarWindow(() => { + this.showToolbarAtPosition(point, orientation) + }) + return + } + + const { x: posX, y: posY } = this.calculateToolbarPosition(point, orientation) + + const { toolbarWidth, toolbarHeight } = this.getToolbarRealSize() + this.toolbarWindow!.setPosition(posX, posY, false) + // Prevent window resize + this.toolbarWindow!.setBounds({ + width: toolbarWidth, + height: toolbarHeight, + x: posX, + y: posY + }) + this.toolbarWindow!.show() + this.toolbarWindow!.setOpacity(1) + this.startHideByMouseKeyListener() + } + + /** + * Hide the toolbar window and cleanup listeners + */ + public hideToolbar(): void { + if (!this.isToolbarAlive()) return + + this.toolbarWindow!.setOpacity(0) + this.toolbarWindow!.hide() + + this.stopHideByMouseKeyListener() + } + + /** + * Check if toolbar window exists and is not destroyed + * @returns {boolean} Toolbar window status + */ + private isToolbarAlive() { + return this.toolbarWindow && !this.toolbarWindow.isDestroyed() + } + + /** + * Update toolbar size based on renderer feedback + * Only updates width if it has changed + * @param width New toolbar width + * @param height New toolbar height + */ + public determineToolbarSize(width: number, height: number) { + const toolbarWidth = Math.ceil(width) + + // only update toolbar width if it's changed + if (toolbarWidth > 0 && toolbarWidth !== this.TOOLBAR_WIDTH && height > 0) { + this.TOOLBAR_WIDTH = toolbarWidth + } + } + + /** + * Get actual toolbar dimensions accounting for zoom factor + * @returns Object containing toolbar width and height + */ + private getToolbarRealSize() { + return { + toolbarWidth: this.TOOLBAR_WIDTH * this.zoomFactor, + toolbarHeight: this.TOOLBAR_HEIGHT * this.zoomFactor + } + } + + /** + * Calculate optimal toolbar position based on selection context + * Ensures toolbar stays within screen boundaries and follows selection direction + * @param point Reference point for positioning, must be INTEGER + * @param orientation Preferred position relative to reference point + * @returns Calculated screen coordinates for toolbar, INTEGER + */ + private calculateToolbarPosition(point: Point, orientation: RelativeOrientation): Point { + // Calculate initial position based on the specified anchor + let posX: number, posY: number + + const { toolbarWidth, toolbarHeight } = this.getToolbarRealSize() + + switch (orientation) { + case 'topLeft': + posX = point.x - toolbarWidth + posY = point.y - toolbarHeight + break + case 'topRight': + posX = point.x + posY = point.y - toolbarHeight + break + case 'topMiddle': + posX = point.x - toolbarWidth / 2 + posY = point.y - toolbarHeight + break + case 'bottomLeft': + posX = point.x - toolbarWidth + posY = point.y + break + case 'bottomRight': + posX = point.x + posY = point.y + break + case 'bottomMiddle': + posX = point.x - toolbarWidth / 2 + posY = point.y + break + case 'middleLeft': + posX = point.x - toolbarWidth + posY = point.y - toolbarHeight / 2 + break + case 'middleRight': + posX = point.x + posY = point.y - toolbarHeight / 2 + break + case 'center': + posX = point.x - toolbarWidth / 2 + posY = point.y - toolbarHeight / 2 + break + default: + // Default to 'topMiddle' if invalid position + posX = point.x - toolbarWidth / 2 + posY = point.y - toolbarHeight / 2 + } + + //use original point to get the display + const display = screen.getDisplayNearestPoint({ x: point.x, y: point.y }) + + // Ensure toolbar stays within screen boundaries + posX = Math.round( + Math.max(display.workArea.x, Math.min(posX, display.workArea.x + display.workArea.width - toolbarWidth)) + ) + posY = Math.round( + Math.max(display.workArea.y, Math.min(posY, display.workArea.y + display.workArea.height - toolbarHeight)) + ) + + return { x: posX, y: posY } + } + + private isSamePoint(point1: Point, point2: Point): boolean { + return point1.x === point2.x && point1.y === point2.y + } + + private isSameLineWithRectPoint(startTop: Point, startBottom: Point, endTop: Point, endBottom: Point): boolean { + return startTop.y === endTop.y && startBottom.y === endBottom.y + } + + /** + * Process text selection data and show toolbar + * Handles different selection scenarios: + * - Single click (cursor position) + * - Mouse selection (single/double line) + * - Keyboard selection (full/detailed) + * @param selectionData Text selection information and coordinates + */ + private processTextSelection = (selectionData: TextSelectionData) => { + // Skip if no text or toolbar already visible + if (!selectionData.text || (this.isToolbarAlive() && this.toolbarWindow!.isVisible())) { + return + } + + // Determine reference point and position for toolbar + let refPoint: { x: number; y: number } = { x: 0, y: 0 } + let isLogical = false + let refOrientation: RelativeOrientation = 'bottomRight' + + switch (selectionData.posLevel) { + case SelectionHook?.PositionLevel.NONE: + { + const cursorPoint = screen.getCursorScreenPoint() + refPoint = { x: cursorPoint.x, y: cursorPoint.y } + refOrientation = 'bottomMiddle' + isLogical = true + } + break + case SelectionHook?.PositionLevel.MOUSE_SINGLE: + { + refOrientation = 'bottomMiddle' + refPoint = { x: selectionData.mousePosEnd.x, y: selectionData.mousePosEnd.y + 16 } + } + break + case SelectionHook?.PositionLevel.MOUSE_DUAL: + { + const yDistance = selectionData.mousePosEnd.y - selectionData.mousePosStart.y + const xDistance = selectionData.mousePosEnd.x - selectionData.mousePosStart.x + + // not in the same line + if (Math.abs(yDistance) > 14) { + if (yDistance > 0) { + refOrientation = 'bottomLeft' + refPoint = { + x: selectionData.mousePosEnd.x, + y: selectionData.mousePosEnd.y + 16 + } + } else { + refOrientation = 'topRight' + refPoint = { + x: selectionData.mousePosEnd.x, + y: selectionData.mousePosEnd.y - 16 + } + } + } else { + // in the same line + if (xDistance > 0) { + refOrientation = 'bottomLeft' + refPoint = { + x: selectionData.mousePosEnd.x, + y: Math.max(selectionData.mousePosEnd.y, selectionData.mousePosStart.y) + 16 + } + } else { + refOrientation = 'bottomRight' + refPoint = { + x: selectionData.mousePosEnd.x, + y: Math.min(selectionData.mousePosEnd.y, selectionData.mousePosStart.y) + 16 + } + } + } + } + break + case SelectionHook?.PositionLevel.SEL_FULL: + case SelectionHook?.PositionLevel.SEL_DETAILED: + { + //some case may not have mouse position, so use the endBottom point as reference + const isNoMouse = + selectionData.mousePosStart.x === 0 && + selectionData.mousePosStart.y === 0 && + selectionData.mousePosEnd.x === 0 && + selectionData.mousePosEnd.y === 0 + + if (isNoMouse) { + refOrientation = 'bottomLeft' + refPoint = { x: selectionData.endBottom.x, y: selectionData.endBottom.y + 4 } + break + } + + const isDoubleClick = this.isSamePoint(selectionData.mousePosStart, selectionData.mousePosEnd) + + const isSameLine = this.isSameLineWithRectPoint( + selectionData.startTop, + selectionData.startBottom, + selectionData.endTop, + selectionData.endBottom + ) + + if (isDoubleClick && isSameLine) { + refOrientation = 'bottomMiddle' + refPoint = { x: selectionData.mousePosEnd.x, y: selectionData.endBottom.y + 4 } + break + } + + if (isSameLine) { + const direction = selectionData.mousePosEnd.x - selectionData.mousePosStart.x + + if (direction > 0) { + refOrientation = 'bottomLeft' + refPoint = { x: selectionData.endBottom.x, y: selectionData.endBottom.y + 4 } + } else { + refOrientation = 'bottomRight' + refPoint = { x: selectionData.startBottom.x, y: selectionData.startBottom.y + 4 } + } + break + } + + const direction = selectionData.mousePosEnd.y - selectionData.mousePosStart.y + + if (direction > 0) { + refOrientation = 'bottomLeft' + refPoint = { x: selectionData.endBottom.x, y: selectionData.endBottom.y + 4 } + } else { + refOrientation = 'topRight' + refPoint = { x: selectionData.startTop.x, y: selectionData.startTop.y - 4 } + } + } + break + } + + if (!isLogical) { + //screenToDipPoint can be float, so we need to round it + refPoint = screen.screenToDipPoint(refPoint) + refPoint = { x: Math.round(refPoint.x), y: Math.round(refPoint.y) } + } + + this.showToolbarAtPosition(refPoint, refOrientation) + this.toolbarWindow?.webContents.send(IpcChannel.Selection_TextSelected, selectionData) + } + + /** + * Global Mouse Event Handling + */ + + // Start monitoring global mouse clicks + private startHideByMouseKeyListener() { + try { + // Register event handlers + this.selectionHook!.on('mouse-down', this.handleMouseDownHide) + this.selectionHook!.on('mouse-wheel', this.handleMouseWheelHide) + this.selectionHook!.on('key-down', this.handleKeyDownHide) + this.isHideByMouseKeyListenerActive = true + } catch (error) { + this.logError('Failed to start global mouse event listener:', error as Error) + } + } + + // Stop monitoring global mouse clicks + private stopHideByMouseKeyListener() { + if (!this.isHideByMouseKeyListenerActive) return + + try { + this.selectionHook!.off('mouse-down', this.handleMouseDownHide) + this.selectionHook!.off('mouse-wheel', this.handleMouseWheelHide) + this.selectionHook!.off('key-down', this.handleKeyDownHide) + this.isHideByMouseKeyListenerActive = false + } catch (error) { + this.logError('Failed to stop global mouse event listener:', error as Error) + } + } + + /** + * Handle mouse wheel events to hide toolbar + * Hides toolbar when user scrolls + * @param data Mouse wheel event data + */ + private handleMouseWheelHide = () => { + this.hideToolbar() + } + + /** + * Handle mouse down events to hide toolbar + * Hides toolbar when clicking outside of it + * @param data Mouse event data + */ + private handleMouseDownHide = (data: MouseEventData) => { + if (!this.isToolbarAlive()) { + return + } + + //data point is physical coordinates, convert to logical coordinates + const mousePoint = screen.screenToDipPoint({ x: data.x, y: data.y }) + + const bounds = this.toolbarWindow!.getBounds() + + // Check if click is outside toolbar + const isInsideToolbar = + mousePoint.x >= bounds.x && + mousePoint.x <= bounds.x + bounds.width && + mousePoint.y >= bounds.y && + mousePoint.y <= bounds.y + bounds.height + + if (!isInsideToolbar) { + this.hideToolbar() + } + } + + /** + * Handle key down events to hide toolbar + * Hides toolbar on any key press except alt key in ctrlkey mode + * @param data Keyboard event data + */ + private handleKeyDownHide = (data: KeyboardEventData) => { + //dont hide toolbar when ctrlkey is pressed + if (this.triggerMode === 'ctrlkey' && this.isCtrlkey(data.vkCode)) { + return + } + + this.hideToolbar() + } + + /** + * Handle key down events in ctrlkey trigger mode + * Processes alt key presses to trigger selection toolbar + * @param data Keyboard event data + */ + private handleKeyDownCtrlkeyMode = (data: KeyboardEventData) => { + if (!this.isCtrlkey(data.vkCode)) { + // reset the lastCtrlkeyDownTime if any other key is pressed + if (this.lastCtrlkeyDownTime > 0) { + this.lastCtrlkeyDownTime = -1 + } + return + } + + if (this.lastCtrlkeyDownTime === -1) { + return + } + + //ctrlkey pressed + if (this.lastCtrlkeyDownTime === 0) { + this.lastCtrlkeyDownTime = Date.now() + return + } + + if (Date.now() - this.lastCtrlkeyDownTime < 350) { + return + } + + this.lastCtrlkeyDownTime = -1 + + const selectionData = this.selectionHook!.getCurrentSelection() + + if (selectionData) { + this.processTextSelection(selectionData) + } + } + + /** + * Handle key up events in ctrlkey trigger mode + * Resets alt key state when key is released + * @param data Keyboard event data + */ + private handleKeyUpCtrlkeyMode = (data: KeyboardEventData) => { + if (!this.isCtrlkey(data.vkCode)) return + this.lastCtrlkeyDownTime = 0 + } + + //check if the key is ctrl key + private isCtrlkey(vkCode: number) { + return vkCode === 162 || vkCode === 163 + } + + /** + * Create a preloaded action window for quick response + * Action windows handle specific operations on selected text + * @returns Configured BrowserWindow instance + */ + private createPreloadedActionWindow(): BrowserWindow { + const preloadedActionWindow = new BrowserWindow({ + width: this.ACTION_WINDOW_WIDTH, + height: this.ACTION_WINDOW_HEIGHT, + minWidth: 300, + minHeight: 200, + frame: false, + transparent: true, + autoHideMenuBar: true, + titleBarStyle: 'hidden', + hasShadow: false, + thickFrame: false, + show: false, + webPreferences: { + preload: join(__dirname, '../preload/index.js'), + contextIsolation: true, + nodeIntegration: false, + sandbox: true, + devTools: true + } + }) + + // Load the base URL without action data + if (isDev && process.env['ELECTRON_RENDERER_URL']) { + preloadedActionWindow.loadURL(process.env['ELECTRON_RENDERER_URL'] + '/selectionAction.html') + } else { + preloadedActionWindow.loadFile(join(__dirname, '../renderer/selectionAction.html')) + } + + return preloadedActionWindow + } + + /** + * Initialize preloaded action windows + * Creates a pool of windows at startup for faster response + */ + private async initPreloadedActionWindows() { + try { + // Create initial pool of preloaded windows + for (let i = 0; i < this.PRELOAD_ACTION_WINDOW_COUNT; i++) { + await this.pushNewActionWindow() + } + } catch (error) { + this.logError('Failed to initialize preloaded windows:', error as Error) + } + } + + /** + * Preload a new action window asynchronously + * This method is called after popping a window to ensure we always have windows ready + */ + private async pushNewActionWindow() { + try { + const actionWindow = this.createPreloadedActionWindow() + this.preloadedActionWindows.push(actionWindow) + } catch (error) { + this.logError('Failed to push new action window:', error as Error) + } + } + + /** + * Pop an action window from the preloadedActionWindows queue + * Immediately returns a window and asynchronously creates a new one + * @returns {BrowserWindow} The action window + */ + private popActionWindow() { + // Get a window from the preloaded queue or create a new one if empty + const actionWindow = this.preloadedActionWindows.pop() || this.createPreloadedActionWindow() + + // Set up event listeners for this instance + actionWindow.on('closed', () => { + this.actionWindows.delete(actionWindow) + if (!actionWindow.isDestroyed()) { + actionWindow.destroy() + } + }) + + this.actionWindows.add(actionWindow) + + // Asynchronously create a new preloaded window + this.pushNewActionWindow() + + return actionWindow + } + + public processAction(actionItem: ActionItem): void { + const actionWindow = this.popActionWindow() + + actionWindow.webContents.send(IpcChannel.Selection_UpdateActionData, actionItem) + + this.showActionWindow(actionWindow) + } + + /** + * Show action window with proper positioning relative to toolbar + * Ensures window stays within screen boundaries + * @param actionWindow Window to position and show + */ + private showActionWindow(actionWindow: BrowserWindow) { + if (!this.isFollowToolbar || !this.toolbarWindow) { + actionWindow.show() + this.hideToolbar() + return + } + + const toolbarBounds = this.toolbarWindow!.getBounds() + const display = screen.getDisplayNearestPoint({ x: toolbarBounds.x, y: toolbarBounds.y }) + const workArea = display.workArea + const GAP = 6 // 6px gap from screen edges + + // Calculate initial position to center action window horizontally below toolbar + let posX = Math.round(toolbarBounds.x + (toolbarBounds.width - this.ACTION_WINDOW_WIDTH) / 2) + let posY = Math.round(toolbarBounds.y) + + // Ensure action window stays within screen boundaries with a small gap + if (posX + this.ACTION_WINDOW_WIDTH > workArea.x + workArea.width) { + posX = workArea.x + workArea.width - this.ACTION_WINDOW_WIDTH - GAP + } else if (posX < workArea.x) { + posX = workArea.x + GAP + } + if (posY + this.ACTION_WINDOW_HEIGHT > workArea.y + workArea.height) { + // If window would go below screen, try to position it above toolbar + posY = workArea.y + workArea.height - this.ACTION_WINDOW_HEIGHT - GAP + } else if (posY < workArea.y) { + posY = workArea.y + GAP + } + + actionWindow.setPosition(posX, posY, false) + //KEY to make window not resize + actionWindow.setBounds({ + width: this.ACTION_WINDOW_WIDTH, + height: this.ACTION_WINDOW_HEIGHT, + x: posX, + y: posY + }) + + actionWindow.show() + } + + public closeActionWindow(actionWindow: BrowserWindow): void { + actionWindow.close() + } + + public minimizeActionWindow(actionWindow: BrowserWindow): void { + actionWindow.minimize() + } + + public pinActionWindow(actionWindow: BrowserWindow, isPinned: boolean): void { + actionWindow.setAlwaysOnTop(isPinned) + } + + /** + * Update trigger mode behavior + * Switches between selection-based and alt-key based triggering + * Manages appropriate event listeners for each mode + */ + private processTriggerMode() { + if (this.triggerMode === 'selected') { + if (this.isCtrlkeyListenerActive) { + this.selectionHook!.off('key-down', this.handleKeyDownCtrlkeyMode) + this.selectionHook!.off('key-up', this.handleKeyUpCtrlkeyMode) + + this.isCtrlkeyListenerActive = false + } + + this.selectionHook!.enableClipboard() + this.selectionHook!.setSelectionPassiveMode(false) + } else if (this.triggerMode === 'ctrlkey') { + if (!this.isCtrlkeyListenerActive) { + this.selectionHook!.on('key-down', this.handleKeyDownCtrlkeyMode) + this.selectionHook!.on('key-up', this.handleKeyUpCtrlkeyMode) + + this.isCtrlkeyListenerActive = true + } + + this.selectionHook!.disableClipboard() + this.selectionHook!.setSelectionPassiveMode(true) + } + } + + public writeToClipboard(text: string): boolean { + return this.selectionHook?.writeToClipboard(text) ?? false + } + + /** + * Register IPC handlers for communication with renderer process + * Handles toolbar, action window, and selection-related commands + */ + public static registerIpcHandler(): void { + if (this.isIpcHandlerRegistered) return + + ipcMain.handle(IpcChannel.Selection_ToolbarHide, () => { + selectionService?.hideToolbar() + }) + + ipcMain.handle(IpcChannel.Selection_WriteToClipboard, (_, text: string) => { + return selectionService?.writeToClipboard(text) ?? false + }) + + ipcMain.handle(IpcChannel.Selection_ToolbarDetermineSize, (_, width: number, height: number) => { + selectionService?.determineToolbarSize(width, height) + }) + + ipcMain.handle(IpcChannel.Selection_SetEnabled, (_, enabled: boolean) => { + configManager.setSelectionAssistantEnabled(enabled) + }) + + ipcMain.handle(IpcChannel.Selection_SetTriggerMode, (_, triggerMode: string) => { + configManager.setSelectionAssistantTriggerMode(triggerMode) + }) + + ipcMain.handle(IpcChannel.Selection_SetFollowToolbar, (_, isFollowToolbar: boolean) => { + configManager.setSelectionAssistantFollowToolbar(isFollowToolbar) + }) + + ipcMain.handle(IpcChannel.Selection_ProcessAction, (_, actionItem: ActionItem) => { + selectionService?.processAction(actionItem) + }) + + ipcMain.handle(IpcChannel.Selection_ActionWindowClose, (event) => { + const actionWindow = BrowserWindow.fromWebContents(event.sender) + if (actionWindow) { + selectionService?.closeActionWindow(actionWindow) + } + }) + + ipcMain.handle(IpcChannel.Selection_ActionWindowMinimize, (event) => { + const actionWindow = BrowserWindow.fromWebContents(event.sender) + if (actionWindow) { + selectionService?.minimizeActionWindow(actionWindow) + } + }) + + ipcMain.handle(IpcChannel.Selection_ActionWindowPin, (event, isPinned: boolean) => { + const actionWindow = BrowserWindow.fromWebContents(event.sender) + if (actionWindow) { + selectionService?.pinActionWindow(actionWindow, isPinned) + } + }) + + this.isIpcHandlerRegistered = true + } + + private logInfo(message: string) { + isDev && Logger.info('[SelectionService] Info: ', message) + } + + private logError(...args: [...string[], Error]) { + Logger.error('[SelectionService] Error: ', ...args) + } +} + +/** + * Initialize selection service when app starts + * Sets up config subscription and starts service if enabled + * @returns {boolean} Success status of initialization + */ +export function initSelectionService(): boolean { + if (!isWin) return false + + configManager.subscribe(ConfigKeys.SelectionAssistantEnabled, (enabled: boolean) => { + //avoid closure + const ss = SelectionService.getInstance() + if (!ss) { + Logger.error('SelectionService not initialized: instance is null') + return + } + + if (enabled) { + ss.start() + } else { + ss.stop() + } + }) + + if (!configManager.getSelectionAssistantEnabled()) return false + + const ss = SelectionService.getInstance() + if (!ss) { + Logger.error('SelectionService not initialized: instance is null') + return false + } + + return ss.start() +} + +const selectionService = SelectionService.getInstance() + +export default selectionService diff --git a/src/main/utils/__tests__/aes.test.ts b/src/main/utils/__tests__/aes.test.ts new file mode 100644 index 0000000000..59fb1d42d3 --- /dev/null +++ b/src/main/utils/__tests__/aes.test.ts @@ -0,0 +1,71 @@ +import { describe, expect, it } from 'vitest' + +import { decrypt, encrypt } from '../aes' + +const key = '12345678901234567890123456789012' // 32字节 +const iv = '1234567890abcdef1234567890abcdef' // 32字节hex，实际应16字节hex + +function getIv16() { + // 取前16字节作为 hex + return iv.slice(0, 32) +} + +describe('aes utils', () => { + it('should encrypt and decrypt normal string', () => { + const text = 'hello world' + const { iv: outIv, encryptedData } = encrypt(text, key, getIv16()) + expect(typeof encryptedData).toBe('string') + expect(outIv).toBe(getIv16()) + const decrypted = decrypt(encryptedData, getIv16(), key) + expect(decrypted).toBe(text) + }) + + it('should support unicode and special chars', () => { + const text = '你好，世界！🌟🚀' + const { encryptedData } = encrypt(text, key, getIv16()) + const decrypted = decrypt(encryptedData, getIv16(), key) + expect(decrypted).toBe(text) + }) + + it('should handle empty string', () => { + const text = '' + const { encryptedData } = encrypt(text, key, getIv16()) + const decrypted = decrypt(encryptedData, getIv16(), key) + expect(decrypted).toBe(text) + }) + + it('should encrypt and decrypt long string', () => { + const text = 'a'.repeat(100_000) + const { encryptedData } = encrypt(text, key, getIv16()) + const decrypted = decrypt(encryptedData, getIv16(), key) + expect(decrypted).toBe(text) + }) + + it('should throw error for wrong key', () => { + const text = 'test' + const { encryptedData } = encrypt(text, key, getIv16()) + expect(() => decrypt(encryptedData, getIv16(), 'wrongkeywrongkeywrongkeywrongkey')).toThrow() + }) + + it('should throw error for wrong iv', () => { + const text = 'test' + const { encryptedData } = encrypt(text, key, getIv16()) + expect(() => decrypt(encryptedData, 'abcdefabcdefabcdefabcdefabcdefab', key)).toThrow() + }) + + it('should throw error for invalid key/iv length', () => { + expect(() => encrypt('test', 'shortkey', getIv16())).toThrow() + expect(() => encrypt('test', key, 'shortiv')).toThrow() + }) + + it('should throw error for invalid encrypted data', () => { + expect(() => decrypt('nothexdata', getIv16(), key)).toThrow() + }) + + it('should throw error for non-string input', () => { + // @ts-expect-error purposely pass wrong type to test error branch + expect(() => encrypt(null, key, getIv16())).toThrow() + // @ts-expect-error purposely pass wrong type to test error branch + expect(() => decrypt(null, getIv16(), key)).toThrow() + }) +}) diff --git a/src/main/utils/__tests__/file.test.ts b/src/main/utils/__tests__/file.test.ts new file mode 100644 index 0000000000..aae00e85d4 --- /dev/null +++ b/src/main/utils/__tests__/file.test.ts @@ -0,0 +1,243 @@ +import * as fs from 'node:fs' +import os from 'node:os' +import path from 'node:path' + +import { FileTypes } from '@types' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + +import { getAllFiles, getAppConfigDir, getConfigDir, getFilesDir, getFileType, getTempDir } from '../file' + +// Mock dependencies +vi.mock('node:fs') +vi.mock('node:os') +vi.mock('node:path') +vi.mock('uuid', () => ({ + v4: () => 'mock-uuid' +})) +vi.mock('electron', () => ({ + app: { + getPath: vi.fn((key) => { + if (key === 'temp') return '/mock/temp' + if (key === 'userData') return '/mock/userData' + return '/mock/unknown' + }) + } +})) + +describe('file', () => { + beforeEach(() => { + vi.clearAllMocks() + + // Mock path.extname + vi.mocked(path.extname).mockImplementation((file) => { + const parts = file.split('.') + return parts.length > 1 ? `.${parts[parts.length - 1]}` : '' + }) + + // Mock path.basename + vi.mocked(path.basename).mockImplementation((file) => { + const parts = file.split('/') + return parts[parts.length - 1] + }) + + // Mock path.join + vi.mocked(path.join).mockImplementation((...args) => args.join('/')) + + // Mock os.homedir + vi.mocked(os.homedir).mockReturnValue('/mock/home') + }) + + afterEach(() => { + vi.resetAllMocks() + }) + + describe('getFileType', () => { + it('should return IMAGE for image extensions', () => { + expect(getFileType('.jpg')).toBe(FileTypes.IMAGE) + expect(getFileType('.jpeg')).toBe(FileTypes.IMAGE) + expect(getFileType('.png')).toBe(FileTypes.IMAGE) + expect(getFileType('.gif')).toBe(FileTypes.IMAGE) + expect(getFileType('.webp')).toBe(FileTypes.IMAGE) + expect(getFileType('.bmp')).toBe(FileTypes.IMAGE) + }) + + it('should return VIDEO for video extensions', () => { + expect(getFileType('.mp4')).toBe(FileTypes.VIDEO) + expect(getFileType('.avi')).toBe(FileTypes.VIDEO) + expect(getFileType('.mov')).toBe(FileTypes.VIDEO) + expect(getFileType('.mkv')).toBe(FileTypes.VIDEO) + expect(getFileType('.flv')).toBe(FileTypes.VIDEO) + }) + + it('should return AUDIO for audio extensions', () => { + expect(getFileType('.mp3')).toBe(FileTypes.AUDIO) + expect(getFileType('.wav')).toBe(FileTypes.AUDIO) + expect(getFileType('.ogg')).toBe(FileTypes.AUDIO) + expect(getFileType('.flac')).toBe(FileTypes.AUDIO) + expect(getFileType('.aac')).toBe(FileTypes.AUDIO) + }) + + it('should return TEXT for text extensions', () => { + expect(getFileType('.txt')).toBe(FileTypes.TEXT) + expect(getFileType('.md')).toBe(FileTypes.TEXT) + expect(getFileType('.html')).toBe(FileTypes.TEXT) + expect(getFileType('.json')).toBe(FileTypes.TEXT) + expect(getFileType('.js')).toBe(FileTypes.TEXT) + expect(getFileType('.ts')).toBe(FileTypes.TEXT) + expect(getFileType('.css')).toBe(FileTypes.TEXT) + expect(getFileType('.java')).toBe(FileTypes.TEXT) + expect(getFileType('.py')).toBe(FileTypes.TEXT) + }) + + it('should return DOCUMENT for document extensions', () => { + expect(getFileType('.pdf')).toBe(FileTypes.DOCUMENT) + expect(getFileType('.pptx')).toBe(FileTypes.DOCUMENT) + expect(getFileType('.docx')).toBe(FileTypes.DOCUMENT) + expect(getFileType('.xlsx')).toBe(FileTypes.DOCUMENT) + expect(getFileType('.odt')).toBe(FileTypes.DOCUMENT) + }) + + it('should return OTHER for unknown extensions', () => { + expect(getFileType('.unknown')).toBe(FileTypes.OTHER) + expect(getFileType('')).toBe(FileTypes.OTHER) + expect(getFileType('.')).toBe(FileTypes.OTHER) + expect(getFileType('...')).toBe(FileTypes.OTHER) + expect(getFileType('.123')).toBe(FileTypes.OTHER) + }) + + it('should handle case-insensitive extensions', () => { + expect(getFileType('.JPG')).toBe(FileTypes.IMAGE) + expect(getFileType('.PDF')).toBe(FileTypes.DOCUMENT) + expect(getFileType('.Mp3')).toBe(FileTypes.AUDIO) + expect(getFileType('.HtMl')).toBe(FileTypes.TEXT) + expect(getFileType('.Xlsx')).toBe(FileTypes.DOCUMENT) + }) + + it('should handle extensions without leading dot', () => { + expect(getFileType('jpg')).toBe(FileTypes.OTHER) + expect(getFileType('pdf')).toBe(FileTypes.OTHER) + expect(getFileType('mp3')).toBe(FileTypes.OTHER) + }) + + it('should handle extreme cases', () => { + expect(getFileType('.averylongfileextensionname')).toBe(FileTypes.OTHER) + expect(getFileType('.tar.gz')).toBe(FileTypes.OTHER) + expect(getFileType('.文件')).toBe(FileTypes.OTHER) + expect(getFileType('.файл')).toBe(FileTypes.OTHER) + }) + }) + + describe('getAllFiles', () => { + it('should return all valid files recursively', () => { + // Mock file system + // @ts-ignore - override type for testing + vi.spyOn(fs, 'readdirSync').mockImplementation((dirPath) => { + if (dirPath === '/test') { + return ['file1.txt', 'file2.pdf', 'subdir'] + } else if (dirPath === '/test/subdir') { + return ['file3.md', 'file4.docx'] + } + return [] + }) + + vi.mocked(fs.statSync).mockImplementation((filePath) => { + const isDir = String(filePath).endsWith('subdir') + return { + isDirectory: () => isDir, + size: 1024 + } as fs.Stats + }) + + const result = getAllFiles('/test') + + expect(result).toHaveLength(4) + expect(result[0].id).toBe('mock-uuid') + expect(result[0].name).toBe('file1.txt') + expect(result[0].type).toBe(FileTypes.TEXT) + expect(result[1].name).toBe('file2.pdf') + expect(result[1].type).toBe(FileTypes.DOCUMENT) + }) + + it('should skip hidden files', () => { + // @ts-ignore - override type for testing + vi.spyOn(fs, 'readdirSync').mockReturnValue(['.hidden', 'visible.txt']) + vi.mocked(fs.statSync).mockReturnValue({ + isDirectory: () => false, + size: 1024 + } as fs.Stats) + + const result = getAllFiles('/test') + + expect(result).toHaveLength(1) + expect(result[0].name).toBe('visible.txt') + }) + + it('should skip unsupported file types', () => { + // @ts-ignore - override type for testing + vi.spyOn(fs, 'readdirSync').mockReturnValue(['image.jpg', 'video.mp4', 'audio.mp3', 'document.pdf']) + vi.mocked(fs.statSync).mockReturnValue({ + isDirectory: () => false, + size: 1024 + } as fs.Stats) + + const result = getAllFiles('/test') + + // Should only include document.pdf as the others are excluded types + expect(result).toHaveLength(1) + expect(result[0].name).toBe('document.pdf') + expect(result[0].type).toBe(FileTypes.DOCUMENT) + }) + + it('should return empty array for empty directory', () => { + // @ts-ignore - override type for testing + vi.spyOn(fs, 'readdirSync').mockReturnValue([]) + + const result = getAllFiles('/empty') + + expect(result).toHaveLength(0) + }) + + it('should handle file system errors', () => { + // @ts-ignore - override type for testing + vi.spyOn(fs, 'readdirSync').mockImplementation(() => { + throw new Error('Directory not found') + }) + + // Since the function doesn't have error handling, we expect it to propagate + expect(() => getAllFiles('/nonexistent')).toThrow('Directory not found') + }) + }) + + describe('getTempDir', () => { + it('should return correct temp directory path', () => { + const tempDir = getTempDir() + expect(tempDir).toBe('/mock/temp/CherryStudio') + }) + }) + + describe('getFilesDir', () => { + it('should return correct files directory path', () => { + const filesDir = getFilesDir() + expect(filesDir).toBe('/mock/userData/Data/Files') + }) + }) + + describe('getConfigDir', () => { + it('should return correct config directory path', () => { + const configDir = getConfigDir() + expect(configDir).toBe('/mock/home/.cherrystudio/config') + }) + }) + + describe('getAppConfigDir', () => { + it('should return correct app config directory path', () => { + const appConfigDir = getAppConfigDir('test-app') + expect(appConfigDir).toBe('/mock/home/.cherrystudio/config/test-app') + }) + + it('should handle empty app name', () => { + const appConfigDir = getAppConfigDir('') + expect(appConfigDir).toBe('/mock/home/.cherrystudio/config/') + }) + }) +}) diff --git a/src/main/utils/__tests__/zip.test.ts b/src/main/utils/__tests__/zip.test.ts new file mode 100644 index 0000000000..6c84b16e93 --- /dev/null +++ b/src/main/utils/__tests__/zip.test.ts @@ -0,0 +1,61 @@ +import { describe, expect, it } from 'vitest' + +import { compress, decompress } from '../zip' + +const jsonStr = JSON.stringify({ foo: 'bar', num: 42, arr: [1, 2, 3] }) + +// 辅助函数：生成大字符串 +function makeLargeString(size: number) { + return 'a'.repeat(size) +} + +describe('zip', () => { + describe('compress & decompress', () => { + it('should compress and decompress a normal JSON string', async () => { + const compressed = await compress(jsonStr) + expect(compressed).toBeInstanceOf(Buffer) + + const decompressed = await decompress(compressed) + expect(decompressed).toBe(jsonStr) + }) + + it('should handle empty string', async () => { + const compressed = await compress('') + expect(compressed).toBeInstanceOf(Buffer) + const decompressed = await decompress(compressed) + expect(decompressed).toBe('') + }) + + it('should handle large string', async () => { + const largeStr = makeLargeString(100_000) + const compressed = await compress(largeStr) + expect(compressed).toBeInstanceOf(Buffer) + expect(compressed.length).toBeLessThan(largeStr.length) + const decompressed = await decompress(compressed) + expect(decompressed).toBe(largeStr) + }) + + it('should throw error when decompressing invalid buffer', async () => { + const invalidBuffer = Buffer.from('not a valid gzip', 'utf-8') + await expect(decompress(invalidBuffer)).rejects.toThrow() + }) + + it('should throw error when compress input is not string', async () => { + // @ts-expect-error purposely pass wrong type to test error branch + await expect(compress(null)).rejects.toThrow() + // @ts-expect-error purposely pass wrong type to test error branch + await expect(compress(undefined)).rejects.toThrow() + // @ts-expect-error purposely pass wrong type to test error branch + await expect(compress(123)).rejects.toThrow() + }) + + it('should throw error when decompress input is not buffer', async () => { + // @ts-expect-error purposely pass wrong type to test error branch + await expect(decompress(null)).rejects.toThrow() + // @ts-expect-error purposely pass wrong type to test error branch + await expect(decompress(undefined)).rejects.toThrow() + // @ts-expect-error purposely pass wrong type to test error branch + await expect(decompress('string')).rejects.toThrow() + }) + }) +}) diff --git a/src/main/utils/zip.ts b/src/main/utils/zip.ts index 177ccba7fe..b2762f7a98 100644 --- a/src/main/utils/zip.ts +++ b/src/main/utils/zip.ts @@ -9,10 +9,10 @@ const gunzipPromise = util.promisify(zlib.gunzip) /** * 压缩字符串 + * @param {string} str 要压缩的 JSON 字符串 * @returns {Promise} 压缩后的 Buffer - * @param str */ -export async function compress(str) { +export async function compress(str: string): Promise { try { const buffer = Buffer.from(str, 'utf-8') return await gzipPromise(buffer) @@ -27,7 +27,7 @@ export async function compress(str) { * @param {Buffer} compressedBuffer - 压缩的 Buffer * @returns {Promise} 解压缩后的 JSON 字符串 */ -export async function decompress(compressedBuffer) { +export async function decompress(compressedBuffer: Buffer): Promise { try { const buffer = await gunzipPromise(compressedBuffer) return buffer.toString('utf-8') diff --git a/src/preload/index.ts b/src/preload/index.ts index e31efbcb2c..51c8dee7a8 100644 --- a/src/preload/index.ts +++ b/src/preload/index.ts @@ -6,6 +6,8 @@ import { contextBridge, ipcRenderer, OpenDialogOptions, shell, webUtils } from ' import { Notification } from 'src/renderer/src/types/notification' import { CreateDirectoryOptions } from 'webdav' +import type { ActionItem } from '../renderer/src/types/selectionTypes' + // Custom APIs for renderer const api = { getAppInfo: () => ipcRenderer.invoke(IpcChannel.App_Info), @@ -205,6 +207,20 @@ const api = { subscribe: () => ipcRenderer.invoke(IpcChannel.StoreSync_Subscribe), unsubscribe: () => ipcRenderer.invoke(IpcChannel.StoreSync_Unsubscribe), onUpdate: (action: any) => ipcRenderer.invoke(IpcChannel.StoreSync_OnUpdate, action) + }, + selection: { + hideToolbar: () => ipcRenderer.invoke(IpcChannel.Selection_ToolbarHide), + writeToClipboard: (text: string) => ipcRenderer.invoke(IpcChannel.Selection_WriteToClipboard, text), + determineToolbarSize: (width: number, height: number) => + ipcRenderer.invoke(IpcChannel.Selection_ToolbarDetermineSize, width, height), + setEnabled: (enabled: boolean) => ipcRenderer.invoke(IpcChannel.Selection_SetEnabled, enabled), + setTriggerMode: (triggerMode: string) => ipcRenderer.invoke(IpcChannel.Selection_SetTriggerMode, triggerMode), + setFollowToolbar: (isFollowToolbar: boolean) => + ipcRenderer.invoke(IpcChannel.Selection_SetFollowToolbar, isFollowToolbar), + processAction: (actionItem: ActionItem) => ipcRenderer.invoke(IpcChannel.Selection_ProcessAction, actionItem), + closeActionWindow: () => ipcRenderer.invoke(IpcChannel.Selection_ActionWindowClose), + minimizeActionWindow: () => ipcRenderer.invoke(IpcChannel.Selection_ActionWindowMinimize), + pinActionWindow: (isPinned: boolean) => ipcRenderer.invoke(IpcChannel.Selection_ActionWindowPin, isPinned) } } diff --git a/src/renderer/__tests__/setup.ts b/src/renderer/__tests__/setup.ts deleted file mode 100644 index 70b9cd70b0..0000000000 --- a/src/renderer/__tests__/setup.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { vi } from 'vitest' - -vi.mock('electron-log/renderer', () => { - return { - default: { - info: console.log, - error: console.error, - warn: console.warn, - debug: console.debug, - verbose: console.log, - silly: console.log, - log: console.log, - transports: { - console: { - level: 'info' - } - } - } - } -}) - -vi.stubGlobal('window', { - electron: { - ipcRenderer: { - on: vi.fn(), // Mocking ipcRenderer.on - send: vi.fn() // Mocking ipcRenderer.send - } - }, - api: { - file: { - read: vi.fn().mockResolvedValue('[]'), // Mock file.read to return an empty array (you can customize this) - writeWithId: vi.fn().mockResolvedValue(undefined) // Mock file.writeWithId to do nothing - } - } -}) - -vi.mock('axios', () => ({ - default: { - get: vi.fn().mockResolvedValue({ data: {} }), // Mocking axios GET request - post: vi.fn().mockResolvedValue({ data: {} }) // Mocking axios POST request - // You can add other axios methods like put, delete etc. as needed - } -})) - -vi.stubGlobal('window', { - ...global.window, // Copy other global properties - addEventListener: vi.fn(), // Mock addEventListener - removeEventListener: vi.fn() // You can also mock removeEventListener if needed -}) diff --git a/src/renderer/selectionAction.html b/src/renderer/selectionAction.html new file mode 100644 index 0000000000..1dd3fa616c --- /dev/null +++ b/src/renderer/selectionAction.html @@ -0,0 +1,41 @@ + + + + + + + + Cherry Studio Selection Assistant + + + + +
+ + + + + \ No newline at end of file diff --git a/src/renderer/selectionToolbar.html b/src/renderer/selectionToolbar.html new file mode 100644 index 0000000000..1a219f6472 --- /dev/null +++ b/src/renderer/selectionToolbar.html @@ -0,0 +1,43 @@ + + + + + + + + Cherry Studio Selection Toolbar + + + + +
+ + + + + \ No newline at end of file diff --git a/src/renderer/src/assets/styles/selection-toolbar.scss b/src/renderer/src/assets/styles/selection-toolbar.scss new file mode 100644 index 0000000000..dfbb6bbd59 --- /dev/null +++ b/src/renderer/src/assets/styles/selection-toolbar.scss @@ -0,0 +1,26 @@ +@use './font.scss'; + +html { + font-family: var(--font-family); +} + +:root { + --color-selection-toolbar-background: rgba(20, 20, 20, 0.95); + --color-selection-toolbar-border: rgba(55, 55, 55, 0.5); + --color-selection-toolbar-shadow: rgba(50, 50, 50, 0.3); + + --color-selection-toolbar-text: rgba(255, 255, 245, 0.9); + --color-selection-toolbar-hover-bg: #222222; + + --color-primary: #00b96b; + --color-error: #f44336; +} + +[theme-mode='light'] { + --color-selection-toolbar-background: rgba(245, 245, 245, 0.95); + --color-selection-toolbar-border: rgba(200, 200, 200, 0.5); + --color-selection-toolbar-shadow: rgba(50, 50, 50, 0.3); + + --color-selection-toolbar-text: rgba(0, 0, 0, 1); + --color-selection-toolbar-hover-bg: rgba(0, 0, 0, 0.04); +} diff --git a/src/renderer/src/components/CopyButton.tsx b/src/renderer/src/components/CopyButton.tsx new file mode 100644 index 0000000000..bdc34a0675 --- /dev/null +++ b/src/renderer/src/components/CopyButton.tsx @@ -0,0 +1,83 @@ +import { Tooltip } from 'antd' +import { Copy } from 'lucide-react' +import { FC } from 'react' +import { useTranslation } from 'react-i18next' +import styled from 'styled-components' + +interface CopyButtonProps { + tooltip?: string + textToCopy: string + label?: string + color?: string + hoverColor?: string + size?: number +} + +interface ButtonContainerProps { + $color: string + $hoverColor: string +} + +const CopyButton: FC = ({ + tooltip, + textToCopy, + label, + color = 'var(--color-text-2)', + hoverColor = 'var(--color-primary)', + size = 14 +}) => { + const { t } = useTranslation() + + const handleCopy = () => { + navigator.clipboard + .writeText(textToCopy) + .then(() => { + window.message?.success(t('message.copy.success')) + }) + .catch(() => { + window.message?.error(t('message.copy.failed')) + }) + } + + const button = ( + + + {label && {label}} + + ) + + if (tooltip) { + return {button} + } + + return button +} + +const ButtonContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; + cursor: pointer; + color: ${(props) => props.$color}; + transition: color 0.2s; + + .copy-icon { + color: ${(props) => props.$color}; + transition: color 0.2s; + } + + &:hover { + color: ${(props) => props.$hoverColor}; + + .copy-icon { + color: ${(props) => props.$hoverColor}; + } + } +` + +const RightText = styled.span<{ size: number }>` + font-size: ${(props) => props.size}px; +` + +export default CopyButton diff --git a/src/renderer/src/components/QuickPanel/view.tsx b/src/renderer/src/components/QuickPanel/view.tsx index 9da3d6ea34..390087d91d 100644 --- a/src/renderer/src/components/QuickPanel/view.tsx +++ b/src/renderer/src/components/QuickPanel/view.tsx @@ -434,7 +434,8 @@ export const QuickPanelView: React.FC = ({ setInputText }) => { $pageSize={ctx.pageSize} $selectedColor={selectedColor} $selectedColorHover={selectedColorHover} - className={ctx.isVisible ? 'visible' : ''}> + className={ctx.isVisible ? 'visible' : ''} + data-testid="quick-panel"> diff --git a/src/renderer/src/components/Scrollbar/index.tsx b/src/renderer/src/components/Scrollbar/index.tsx index 857a8404e2..86f8c4b42a 100644 --- a/src/renderer/src/components/Scrollbar/index.tsx +++ b/src/renderer/src/components/Scrollbar/index.tsx @@ -3,12 +3,12 @@ import { FC, useCallback, useEffect, useRef, useState } from 'react' import styled from 'styled-components' interface Props extends Omit, 'onScroll'> { - right?: boolean ref?: React.RefObject + right?: boolean onScroll?: () => void // Custom onScroll prop for useScrollPosition's handleScroll } -const Scrollbar: FC = ({ ref: passedRef, children, onScroll: externalOnScroll, ...htmlProps }) => { +const Scrollbar: FC = ({ ref: passedRef, right, children, onScroll: externalOnScroll, ...htmlProps }) => { const [isScrolling, setIsScrolling] = useState(false) const timeoutRef = useRef(null) @@ -43,7 +43,8 @@ const Scrollbar: FC = ({ ref: passedRef, children, onScroll: externalOnSc return ( {children} @@ -51,15 +52,15 @@ const Scrollbar: FC = ({ ref: passedRef, children, onScroll: externalOnSc ) } -const Container = styled.div<{ isScrolling: boolean; right?: boolean }>` +const Container = styled.div<{ $isScrolling: boolean; $right?: boolean }>` overflow-y: auto; &::-webkit-scrollbar-thumb { transition: background 2s ease; background: ${(props) => - props.isScrolling ? `var(--color-scrollbar-thumb${props.right ? '-right' : ''})` : 'transparent'}; + props.$isScrolling ? `var(--color-scrollbar-thumb${props.$right ? '-right' : ''})` : 'transparent'}; &:hover { background: ${(props) => - props.isScrolling ? `var(--color-scrollbar-thumb${props.right ? '-right' : ''}-hover)` : 'transparent'}; + props.$isScrolling ? `var(--color-scrollbar-thumb${props.$right ? '-right' : ''}-hover)` : 'transparent'}; } } ` diff --git a/src/renderer/src/components/__tests__/CustomTag.test.tsx b/src/renderer/src/components/__tests__/CustomTag.test.tsx new file mode 100644 index 0000000000..a306fa6494 --- /dev/null +++ b/src/renderer/src/components/__tests__/CustomTag.test.tsx @@ -0,0 +1,44 @@ +import { render, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { describe, expect, it } from 'vitest' + +import CustomTag from '../CustomTag' + +const COLOR = '#ff0000' + +describe('CustomTag', () => { + it('should render children text', () => { + render(content) + expect(screen.getByText('content')).toBeInTheDocument() + }) + + it('should render icon if provided', () => { + render( + cherry}> + content + + ) + expect(screen.getByTestId('icon')).toBeInTheDocument() + expect(screen.getByText('content')).toBeInTheDocument() + }) + + it('should show tooltip if tooltip prop is set', async () => { + render( + + reasoning + + ) + // 鼠标悬停触发 Tooltip + await userEvent.hover(screen.getByText('reasoning')) + expect(await screen.findByText('reasoning model')).toBeInTheDocument() + }) + + it('should not render Tooltip when tooltip is not set', () => { + render(no tooltip) + + expect(screen.getByText('no tooltip')).toBeInTheDocument() + // 不应有 tooltip 相关内容 + expect(document.querySelector('.ant-tooltip')).toBeNull() + expect(screen.queryByRole('tooltip')).not.toBeInTheDocument() + }) +}) diff --git a/src/renderer/src/components/__tests__/DragableList.test.tsx b/src/renderer/src/components/__tests__/DragableList.test.tsx new file mode 100644 index 0000000000..d40849fff8 --- /dev/null +++ b/src/renderer/src/components/__tests__/DragableList.test.tsx @@ -0,0 +1,282 @@ +/// + +import { render, screen } from '@testing-library/react' +import { describe, expect, it, vi } from 'vitest' + +import DragableList from '../DragableList' + +// mock @hello-pangea/dnd 组件 +vi.mock('@hello-pangea/dnd', () => { + return { + __esModule: true, + DragDropContext: ({ children, onDragEnd }: any) => { + // 挂载到 window 以便测试用例直接调用 + window.triggerOnDragEnd = (result = { source: { index: 0 }, destination: { index: 1 } }, provided = {}) => { + onDragEnd && onDragEnd(result, provided) + } + return
{children}
+ }, + Droppable: ({ children }: any) => ( +
+ {children({ droppableProps: {}, innerRef: () => {}, placeholder:
})} +
+ ), + Draggable: ({ children, draggableId, index }: any) => ( +
+ {children({ draggableProps: {}, dragHandleProps: {}, innerRef: () => {} })} +
+ ) + } +}) + +// mock VirtualList 只做简单渲染 +vi.mock('rc-virtual-list', () => ({ + __esModule: true, + default: ({ data, itemKey, children }: any) => ( +
+ {data.map((item: any, idx: number) => ( +
+ {children(item, idx)} +
+ ))} +
+ ) +})) + +declare global { + interface Window { + triggerOnDragEnd: (result?: any, provided?: any) => void + } +} + +describe('DragableList', () => { + describe('rendering', () => { + it('should render all list items', () => { + const list = [ + { id: 'a', name: 'A' }, + { id: 'b', name: 'B' }, + { id: 'c', name: 'C' } + ] + render( + {}}> + {(item) =>
{item.name}
} + + ) + const items = screen.getAllByTestId('item') + expect(items.length).toBe(3) + expect(items[0].textContent).toBe('A') + expect(items[1].textContent).toBe('B') + expect(items[2].textContent).toBe('C') + }) + + it('should render with custom style and listStyle', () => { + const list = [{ id: 'a', name: 'A' }] + const style = { background: 'red' } + const listStyle = { color: 'blue' } + render( + {}}> + {(item) =>
{item.name}
} + + ) + // 检查 style 是否传递到外层容器 + const virtualList = screen.getByTestId('virtual-list') + expect(virtualList.parentElement).toHaveStyle({ background: 'red' }) + }) + + it('should render nothing when list is empty', () => { + render( + {}}> + {(item) =>
{item.name}
} + + ) + // 虚拟列表存在但无内容 + const items = screen.queryAllByTestId('item') + expect(items.length).toBe(0) + }) + }) + + describe('drag and drop', () => { + it('should call onUpdate with new order after drag end', () => { + const list = [ + { id: 'a', name: 'A' }, + { id: 'b', name: 'B' }, + { id: 'c', name: 'C' } + ] + const newOrder = [list[1], list[2], list[0]] + const onUpdate = vi.fn() + + render( + + {(item) =>
{item.name}
} + + ) + + // 直接调用 window.triggerOnDragEnd 模拟拖拽结束 + window.triggerOnDragEnd({ source: { index: 0 }, destination: { index: 2 } }, {}) + + expect(onUpdate).toHaveBeenCalledWith(newOrder) + expect(onUpdate).toHaveBeenCalledTimes(1) + }) + + it('should call onDragStart and onDragEnd', () => { + const list = [ + { id: 'a', name: 'A' }, + { id: 'b', name: 'B' }, + { id: 'c', name: 'C' } + ] + const onDragStart = vi.fn() + const onDragEnd = vi.fn() + + render( + {}} onDragStart={onDragStart} onDragEnd={onDragEnd}> + {(item) =>
{item.name}
} + + ) + + // 先手动调用 onDragStart + onDragStart() + // 再模拟拖拽结束 + window.triggerOnDragEnd({ source: { index: 0 }, destination: { index: 1 } }, {}) + expect(onDragStart).toHaveBeenCalledTimes(1) + expect(onDragEnd).toHaveBeenCalledTimes(1) + }) + + it('should not call onUpdate if dropped at same position', () => { + const list = [ + { id: 'a', name: 'A' }, + { id: 'b', name: 'B' }, + { id: 'c', name: 'C' } + ] + const onUpdate = vi.fn() + + render( + + {(item) =>
{item.name}
} + + ) + + // 模拟拖拽到自身 + window.triggerOnDragEnd({ source: { index: 1 }, destination: { index: 1 } }, {}) + expect(onUpdate).toHaveBeenCalledTimes(1) + expect(onUpdate.mock.calls[0][0]).toEqual(list) + }) + }) + + describe('edge cases', () => { + it('should work with single item', () => { + const list = [{ id: 'a', name: 'A' }] + const onUpdate = vi.fn() + + render( + + {(item) =>
{item.name}
} + + ) + + // 拖拽自身 + window.triggerOnDragEnd({ source: { index: 0 }, destination: { index: 0 } }, {}) + expect(onUpdate).toHaveBeenCalledTimes(1) + expect(onUpdate.mock.calls[0][0]).toEqual(list) + }) + + it('should not crash if callbacks are undefined', () => { + const list = [ + { id: 'a', name: 'A' }, + { id: 'b', name: 'B' } + ] + + // 不传 onDragStart/onDragEnd + expect(() => { + render( + {}}> + {(item) =>
{item.name}
} + + ) + window.triggerOnDragEnd({ source: { index: 0 }, destination: { index: 1 } }, {}) + }).not.toThrow() + }) + + it('should handle items without id', () => { + const list = ['A', 'B', 'C'] + const onUpdate = vi.fn() + + render( + + {(item) =>
{item}
} + + ) + + // 拖拽第0项到第2项 + window.triggerOnDragEnd({ source: { index: 0 }, destination: { index: 2 } }, {}) + expect(onUpdate).toHaveBeenCalledTimes(1) + expect(onUpdate.mock.calls[0][0]).toEqual(['B', 'C', 'A']) + }) + }) + + describe('interaction', () => { + it('should show placeholder during drag', () => { + const list = [ + { id: 'a', name: 'A' }, + { id: 'b', name: 'B' }, + { id: 'c', name: 'C' } + ] + + render( + {}}> + {(item) =>
{item.name}
} + + ) + + // placeholder 应该在初始渲染时就存在 + const placeholder = screen.getByTestId('placeholder') + expect(placeholder).toBeInTheDocument() + }) + + it('should reorder correctly when dragged to first/last', () => { + const list = [ + { id: 'a', name: 'A' }, + { id: 'b', name: 'B' }, + { id: 'c', name: 'C' } + ] + const onUpdate = vi.fn() + render( + + {(item) =>
{item.name}
} + + ) + + // 拖拽第2项到第0项 + window.triggerOnDragEnd({ source: { index: 2 }, destination: { index: 0 } }, {}) + expect(onUpdate).toHaveBeenCalledWith([ + { id: 'c', name: 'C' }, + { id: 'a', name: 'A' }, + { id: 'b', name: 'B' } + ]) + + // 拖拽第0项到第2项 + onUpdate.mockClear() + window.triggerOnDragEnd({ source: { index: 0 }, destination: { index: 2 } }, {}) + expect(onUpdate).toHaveBeenCalledWith([ + { id: 'b', name: 'B' }, + { id: 'c', name: 'C' }, + { id: 'a', name: 'A' } + ]) + }) + }) + + describe('snapshot', () => { + it('should match snapshot', () => { + const list = [ + { id: 'a', name: 'A' }, + { id: 'b', name: 'B' }, + { id: 'c', name: 'C' } + ] + const { container } = render( + {}}> + {(item) =>
{item.name}
} + + ) + expect(container).toMatchSnapshot() + }) + }) +}) diff --git a/src/renderer/src/components/__tests__/ExpandableText.test.tsx b/src/renderer/src/components/__tests__/ExpandableText.test.tsx new file mode 100644 index 0000000000..b2f5a64d76 --- /dev/null +++ b/src/renderer/src/components/__tests__/ExpandableText.test.tsx @@ -0,0 +1,33 @@ +import { render, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { describe, expect, it, vi } from 'vitest' + +import ExpandableText from '../ExpandableText' + +// mock i18n +vi.mock('react-i18next', () => ({ + useTranslation: () => ({ t: (k: string) => k }) +})) + +describe('ExpandableText', () => { + const TEXT = 'This is a long text for testing.' + + it('should render text and expand button', () => { + render() + expect(screen.getByText(TEXT)).toBeInTheDocument() + expect(screen.getByRole('button')).toHaveTextContent('common.expand') + }) + + it('should toggle expand/collapse when button is clicked', async () => { + render() + const button = screen.getByRole('button') + // 初始为收起状态 + expect(button).toHaveTextContent('common.expand') + // 点击展开 + await userEvent.click(button) + expect(button).toHaveTextContent('common.collapse') + // 再次点击收起 + await userEvent.click(button) + expect(button).toHaveTextContent('common.expand') + }) +}) diff --git a/src/renderer/src/components/__tests__/QuickPanelView.test.tsx b/src/renderer/src/components/__tests__/QuickPanelView.test.tsx new file mode 100644 index 0000000000..100f951005 --- /dev/null +++ b/src/renderer/src/components/__tests__/QuickPanelView.test.tsx @@ -0,0 +1,188 @@ +import { render, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { useEffect } from 'react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + +import { QuickPanelListItem, QuickPanelProvider, QuickPanelView, useQuickPanel } from '../QuickPanel' + +function createList(length: number, prefix = 'Item', extra: Partial = {}) { + return Array.from({ length }, (_, i) => ({ + label: `${prefix} ${i + 1}`, + description: `${prefix} Description ${i + 1}`, + icon: `${prefix} Icon ${i + 1}`, + action: () => {}, + ...extra + })) +} + +type KeyStep = { + key: string + ctrlKey?: boolean + expected: string | ((text: string) => boolean) +} + +const PAGE_SIZE = 7 + +// 用于测试 open 行为的组件 +function OpenPanelOnMount({ list }: { list: QuickPanelListItem[] }) { + const quickPanel = useQuickPanel() + useEffect(() => { + quickPanel.open({ + title: 'Test Panel', + list, + symbol: 'test', + pageSize: PAGE_SIZE + }) + }, [list, quickPanel]) + return null +} + +describe('QuickPanelView', () => { + beforeEach(() => { + // 添加一个假的 .inputbar textarea 到 document.body + const inputbar = document.createElement('div') + inputbar.className = 'inputbar' + const textarea = document.createElement('textarea') + inputbar.appendChild(textarea) + document.body.appendChild(inputbar) + }) + + afterEach(() => { + const inputbar = document.querySelector('.inputbar') + if (inputbar) inputbar.remove() + }) + + describe('rendering', () => { + it('should render without crashing when wrapped in QuickPanelProvider', () => { + render( + + + + ) + + // 检查面板容器是否存在且初始不可见 + const panel = screen.getByTestId('quick-panel') + expect(panel.classList.contains('visible')).toBe(false) + }) + + it('should render list after open', async () => { + const list = createList(100) + + render( + + + + + ) + + // 检查面板可见 + const panel = screen.getByTestId('quick-panel') + expect(panel.classList.contains('visible')).toBe(true) + // 检查第一个 item 是否渲染 + expect(screen.getByText('Item 1')).toBeInTheDocument() + }) + }) + + describe('focusing', () => { + // 执行一系列按键，检查 focused item 是否正确 + async function runKeySequenceAndCheck(panel: HTMLElement, sequence: KeyStep[]) { + const user = userEvent.setup() + for (const { key, ctrlKey, expected } of sequence) { + let keyString = '' + if (ctrlKey) keyString += '{Control>}' + keyString += key.length === 1 ? key : `{${key}}` + if (ctrlKey) keyString += '{/Control}' + await user.keyboard(keyString) + + // 检查是否只有一个 focused item + const focused = panel.querySelectorAll('.focused') + expect(focused.length).toBe(1) + // 检查 focused item 是否包含预期文本 + const text = focused[0].textContent || '' + if (typeof expected === 'string') { + expect(text).toContain(expected) + } else { + expect(expected(text)).toBe(true) + } + } + } + + it('should focus on the first item after panel open', () => { + const list = createList(100) + + render( + + + + + ) + + // 检查第一个 item 是否有 focused + const item1 = screen.getByText('Item 1') + const focused = item1.closest('.focused') + expect(focused).not.toBeNull() + expect(item1).toBeInTheDocument() + }) + + it('should focus on the right item using ArrowUp, ArrowDown', async () => { + const list = createList(100, 'Item') + + render( + + + + + ) + + const keySequence = [ + { key: 'ArrowUp', expected: 'Item 100' }, + { key: 'ArrowUp', expected: 'Item 99' }, + { key: 'ArrowDown', expected: 'Item 100' }, + { key: 'ArrowDown', expected: 'Item 1' } + ] + + await runKeySequenceAndCheck(screen.getByTestId('quick-panel'), keySequence) + }) + + it('should focus on the right item using PageUp, PageDown', async () => { + const list = createList(100, 'Item') + + render( + + + + + ) + + const keySequence = [ + { key: 'PageUp', expected: 'Item 1' }, // 停留在顶部 + { key: 'ArrowUp', expected: 'Item 100' }, + { key: 'PageDown', expected: 'Item 100' }, // 停留在底部 + { key: 'PageUp', expected: `Item ${100 - PAGE_SIZE}` }, + { key: 'PageDown', expected: 'Item 100' } + ] + + await runKeySequenceAndCheck(screen.getByTestId('quick-panel'), keySequence) + }) + + it('should focus on the right item using Ctrl+ArrowUp, Ctrl+ArrowDown', async () => { + const list = createList(100, 'Item') + + render( + + + + + ) + + const keySequence = [ + { key: 'ArrowDown', ctrlKey: true, expected: `Item ${PAGE_SIZE + 1}` }, + { key: 'ArrowUp', ctrlKey: true, expected: 'Item 1' }, + { key: 'ArrowUp', ctrlKey: true, expected: 'Item 100' }, + { key: 'ArrowDown', ctrlKey: true, expected: 'Item 1' } + ] + + await runKeySequenceAndCheck(screen.getByTestId('quick-panel'), keySequence) + }) + }) +}) diff --git a/src/renderer/src/components/__tests__/Scrollbar.test.tsx b/src/renderer/src/components/__tests__/Scrollbar.test.tsx new file mode 100644 index 0000000000..2848404f26 --- /dev/null +++ b/src/renderer/src/components/__tests__/Scrollbar.test.tsx @@ -0,0 +1,191 @@ +import { fireEvent, render, screen } from '@testing-library/react' +import { act } from 'react' +import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from 'vitest' + +import Scrollbar from '../Scrollbar' + +// Mock lodash throttle +vi.mock('lodash', async () => { + const actual = await import('lodash') + return { + ...actual, + throttle: vi.fn((fn) => { + // 简单地直接返回函数，不实际执行节流 + const throttled = (...args: any[]) => fn(...args) + throttled.cancel = vi.fn() + return throttled + }) + } +}) + +describe('Scrollbar', () => { + beforeEach(() => { + // 使用 fake timers + vi.useFakeTimers() + }) + + afterEach(() => { + // 恢复真实的 timers + vi.restoreAllMocks() + vi.useRealTimers() + }) + + describe('rendering', () => { + it('should render children correctly', () => { + render( + +
测试内容
+ + ) + + const child = screen.getByTestId('child') + expect(child).toBeDefined() + expect(child.textContent).toBe('测试内容') + }) + + it('should pass custom props to container', () => { + render( + + 内容 + + ) + + const scrollbar = screen.getByTestId('scrollbar') + expect(scrollbar.className).toContain('custom-class') + }) + + it('should match default styled snapshot', () => { + const { container } = render(内容) + expect(container.firstChild).toMatchSnapshot() + }) + }) + + describe('scrolling behavior', () => { + it('should update isScrolling state when scrolled', () => { + render(内容) + + const scrollbar = screen.getByTestId('scrollbar') + + // 初始状态下应该不是滚动状态 + expect(scrollbar.getAttribute('isScrolling')).toBeFalsy() + + // 触发滚动 + fireEvent.scroll(scrollbar) + + // 由于 isScrolling 是组件内部状态，不直接反映在 DOM 属性上 + // 但可以检查模拟的事件处理是否被调用 + expect(scrollbar).toBeDefined() + }) + + it('should reset isScrolling after timeout', () => { + render(内容) + + const scrollbar = screen.getByTestId('scrollbar') + + // 触发滚动 + fireEvent.scroll(scrollbar) + + // 前进时间但不超过timeout + act(() => { + vi.advanceTimersByTime(1000) + }) + + // 前进超过timeout + act(() => { + vi.advanceTimersByTime(600) + }) + + // 不测试样式，这里只检查组件是否存在 + expect(scrollbar).toBeDefined() + }) + + it('should reset timeout on continuous scrolling', () => { + const clearTimeoutSpy = vi.spyOn(global, 'clearTimeout') + + render(内容) + + const scrollbar = screen.getByTestId('scrollbar') + + // 第一次滚动 + fireEvent.scroll(scrollbar) + + // 前进一部分时间 + act(() => { + vi.advanceTimersByTime(800) + }) + + // 再次滚动 + fireEvent.scroll(scrollbar) + + // clearTimeout 应该被调用，因为在第二次滚动时会清除之前的定时器 + expect(clearTimeoutSpy).toHaveBeenCalled() + }) + }) + + describe('throttling', () => { + it('should use throttled scroll handler', async () => { + const { throttle } = await import('lodash') + + render(内容) + + // 验证 throttle 被调用 + expect(throttle).toHaveBeenCalled() + // 验证 throttle 调用时使用了 200ms 延迟 + expect(throttle).toHaveBeenCalledWith(expect.any(Function), 200) + }) + }) + + describe('cleanup', () => { + it('should clear timeout and cancel throttle on unmount', async () => { + const clearTimeoutSpy = vi.spyOn(global, 'clearTimeout') + + const { unmount } = render(内容) + + const scrollbar = screen.getByTestId('scrollbar') + + // 触发滚动设置定时器 + fireEvent.scroll(scrollbar) + + // 卸载组件 + unmount() + + // 验证 clearTimeout 被调用 + expect(clearTimeoutSpy).toHaveBeenCalled() + + // 验证 throttle.cancel 被调用 + const { throttle } = await import('lodash') + const throttledFunction = (throttle as unknown as Mock).mock.results[0].value + expect(throttledFunction.cancel).toHaveBeenCalled() + }) + }) + + describe('props handling', () => { + it('should handle right prop correctly', () => { + const { container } = render( + + 内容 + + ) + + const scrollbar = screen.getByTestId('scrollbar') + + // 验证 right 属性被正确传递 + expect(scrollbar).toBeDefined() + // snapshot 测试 styled-components 样式 + expect(container.firstChild).toMatchSnapshot() + }) + + it('should handle ref forwarding', () => { + const ref = { current: null } + + render( + + 内容 + + ) + + // 验证 ref 被正确设置 + expect(ref.current).not.toBeNull() + }) + }) +}) diff --git a/src/renderer/src/components/__tests__/__snapshots__/DragableList.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/DragableList.test.tsx.snap new file mode 100644 index 0000000000..a7ddaaaf11 --- /dev/null +++ b/src/renderer/src/components/__tests__/__snapshots__/DragableList.test.tsx.snap @@ -0,0 +1,74 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`DragableList > snapshot > should match snapshot 1`] = ` +
+
+
+
+
+
+
+
+
+ A +
+
+
+
+
+
+
+
+ B +
+
+
+
+
+
+
+
+ C +
+
+
+
+
+
+
+
+
+
+`; diff --git a/src/renderer/src/components/__tests__/__snapshots__/Scrollbar.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/Scrollbar.test.tsx.snap new file mode 100644 index 0000000000..63a08d758d --- /dev/null +++ b/src/renderer/src/components/__tests__/__snapshots__/Scrollbar.test.tsx.snap @@ -0,0 +1,45 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Scrollbar > props handling > should handle right prop correctly 1`] = ` +.c0 { + overflow-y: auto; +} + +.c0::-webkit-scrollbar-thumb { + transition: background 2s ease; + background: transparent; +} + +.c0::-webkit-scrollbar-thumb:hover { + background: transparent; +} + +
+ 内容 +
+`; + +exports[`Scrollbar > rendering > should match default styled snapshot 1`] = ` +.c0 { + overflow-y: auto; +} + +.c0::-webkit-scrollbar-thumb { + transition: background 2s ease; + background: transparent; +} + +.c0::-webkit-scrollbar-thumb:hover { + background: transparent; +} + +
+ 内容 +
+`; diff --git a/src/renderer/src/hooks/useSelectionAssistant.ts b/src/renderer/src/hooks/useSelectionAssistant.ts new file mode 100644 index 0000000000..ef168a799c --- /dev/null +++ b/src/renderer/src/hooks/useSelectionAssistant.ts @@ -0,0 +1,48 @@ +import { useAppDispatch, useAppSelector } from '@renderer/store' +import { + setActionItems, + setActionWindowOpacity, + setIsAutoClose, + setIsAutoPin, + setIsCompact, + setIsFollowToolbar, + setSelectionEnabled, + setTriggerMode +} from '@renderer/store/selectionStore' +import { ActionItem, TriggerMode } from '@renderer/types/selectionTypes' + +export function useSelectionAssistant() { + const dispatch = useAppDispatch() + const selectionStore = useAppSelector((state) => state.selectionStore) + + return { + ...selectionStore, + setSelectionEnabled: (enabled: boolean) => { + dispatch(setSelectionEnabled(enabled)) + window.api.selection.setEnabled(enabled) + }, + setTriggerMode: (mode: TriggerMode) => { + dispatch(setTriggerMode(mode)) + window.api.selection.setTriggerMode(mode) + }, + setIsCompact: (isCompact: boolean) => { + dispatch(setIsCompact(isCompact)) + }, + setIsAutoClose: (isAutoClose: boolean) => { + dispatch(setIsAutoClose(isAutoClose)) + }, + setIsAutoPin: (isAutoPin: boolean) => { + dispatch(setIsAutoPin(isAutoPin)) + }, + setIsFollowToolbar: (isFollowToolbar: boolean) => { + dispatch(setIsFollowToolbar(isFollowToolbar)) + window.api.selection.setFollowToolbar(isFollowToolbar) + }, + setActionWindowOpacity: (opacity: number) => { + dispatch(setActionWindowOpacity(opacity)) + }, + setActionItems: (items: ActionItem[]) => { + dispatch(setActionItems(items)) + } + } +} diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json index 2f5361c29b..e4531cac85 100644 --- a/src/renderer/src/i18n/locales/en-us.json +++ b/src/renderer/src/i18n/locales/en-us.json @@ -1780,6 +1780,141 @@ "quit": "Quit", "show_window": "Show Window", "visualization": "Visualization" + }, + "selection": { + "name": "Selection Assistant", + "action": { + "builtin": { + "translate": "Translate", + "explain": "Explain", + "summary": "Summarize", + "search": "Search", + "refine": "Refine", + "copy": "Copy" + }, + "window": { + "pin": "Pin", + "pinned": "Pinned", + "opacity": "Window Opacity", + "original_show": "Show Original", + "original_hide": "Hide Original", + "original_copy": "Copy Original", + "esc_close": "Esc to Close", + "esc_stop": "Esc to Stop", + "c_copy": "C to Copy" + } + }, + "settings": { + "experimental": "Experimental Features", + "enable": { + "title": "Enable", + "description": "Currently only supported on Windows systems" + }, + "toolbar": { + "title": "Toolbar", + "trigger_mode": { + "title": "Trigger Mode", + "description": "Show toolbar immediately when text is selected, or show only when Ctrl key is held after selection.", + "description_note": "The Ctrl key may not work in some apps. If you use AHK or other tools to remap the Ctrl key, it may not work.", + "selected": "Selection", + "ctrlkey": "Ctrl Key" + }, + "compact_mode": { + "title": "Compact Mode", + "description": "In compact mode, only icons are displayed without text" + } + }, + "window": { + "title": "Action Window", + "follow_toolbar": { + "title": "Follow Toolbar", + "description": "Window position will follow the toolbar. When disabled, it will always be centered." + }, + "auto_close": { + "title": "Auto Close", + "description": "Automatically close the window when it's not pinned and loses focus" + }, + "auto_pin": { + "title": "Auto Pin", + "description": "Pin the window by default" + }, + "opacity": { + "title": "Opacity", + "description": "Set the default opacity of the window, 100% is fully opaque" + } + }, + "actions": { + "title": "Actions", + "reset": { + "button": "Reset", + "tooltip": "Reset to default actions. Custom actions will not be deleted.", + "confirm": "Are you sure you want to reset to default actions? Custom actions will not be deleted." + }, + "add_tooltip": { + "enabled": "Add Custom Action", + "disabled": "Maximum number of custom actions reached ({{max}})" + }, + "delete_confirm": "Are you sure you want to delete this custom action?", + "drag_hint": "Drag to reorder. Move above to enable action ({{enabled}}/{{max}})" + }, + "user_modal": { + "title": { + "add": "Add Custom Action", + "edit": "Edit Custom Action" + }, + "name": { + "label": "Name", + "hint": "Please enter action name" + }, + "icon": { + "label": "Icon", + "placeholder": "Enter Lucide icon name", + "error": "Invalid icon name, please check your input", + "tooltip": "Lucide icon names are lowercase, e.g. arrow-right", + "view_all": "View All Icons", + "random": "Random Icon" + }, + "model": { + "label": "Model", + "tooltip": "Using Assistant: Will use both the assistant's system prompt and model parameters", + "default": "Default Model", + "assistant": "Use Assistant" + }, + "assistant": { + "label": "Select Assistant", + "default": "Default" + }, + "prompt": { + "label": "User Prompt", + "tooltip": "User prompt serves as a supplement to user input and won't override the assistant's system prompt", + "placeholder": "Use placeholder {{text}} to represent selected text. When empty, selected text will be appended to this prompt", + "placeholder_text": "Placeholder", + "copy_placeholder": "Copy Placeholder" + } + }, + "search_modal": { + "title": "Set Search Engine", + "engine": { + "label": "Search Engine", + "custom": "Custom" + }, + "custom": { + "name": { + "label": "Custom Name", + "hint": "Please enter search engine name", + "max_length": "Name cannot exceed 16 characters" + }, + "url": { + "label": "Custom Search URL", + "hint": "Use {{queryString}} to represent the search term", + "required": "Please enter search URL", + "invalid_format": "Please enter a valid URL starting with http:// or https://", + "missing_placeholder": "URL must contain {{queryString}} placeholder" + }, + "test": "Test" + } + } + } } } } diff --git a/src/renderer/src/i18n/locales/ja-jp.json b/src/renderer/src/i18n/locales/ja-jp.json index 0362fe44ae..203aba979d 100644 --- a/src/renderer/src/i18n/locales/ja-jp.json +++ b/src/renderer/src/i18n/locales/ja-jp.json @@ -1780,6 +1780,141 @@ "quit": "終了", "show_window": "ウィンドウを表示", "visualization": "可視化" + }, + "selection": { + "name": "テキスト選択ツール", + "action": { + "builtin": { + "translate": "翻訳", + "explain": "解説", + "summary": "要約", + "search": "検索", + "refine": "最適化", + "copy": "コピー" + }, + "window": { + "pin": "最前面に固定", + "pinned": "固定中", + "opacity": "ウィンドウの透過度", + "original_show": "原文を表示", + "original_hide": "原文を非表示", + "original_copy": "原文をコピー", + "esc_close": "Escで閉じる", + "esc_stop": "Escで停止", + "c_copy": "Cでコピー" + } + }, + "settings": { + "experimental": "実験的機能", + "enable": { + "title": "有効化", + "description": "現在Windowsのみ対応" + }, + "toolbar": { + "title": "ツールバー", + "trigger_mode": { + "title": "表示方法", + "description": "テキスト選択時に即時表示、またはCtrlキー押下時のみ表示", + "description_note": "一部のアプリはCtrlキーでのテキスト選択に対応していません。AHKなどでCtrlキーをリマップすると、選択できなくなる場合があります。", + "selected": "選択時", + "ctrlkey": "Ctrlキー" + }, + "compact_mode": { + "title": "コンパクトモード", + "description": "アイコンのみ表示（テキスト非表示）" + } + }, + "window": { + "title": "機能ウィンドウ", + "follow_toolbar": { + "title": "ツールバーに追従", + "description": "ウィンドウ位置をツールバーに連動（無効時は中央表示）" + }, + "auto_close": { + "title": "自動閉じる", + "description": "最前面固定されていない場合、フォーカス喪失時に自動閉じる" + }, + "auto_pin": { + "title": "自動で最前面に固定", + "description": "デフォルトで最前面表示" + }, + "opacity": { + "title": "透明度", + "description": "デフォルトの透明度を設定（100%は完全不透明）" + } + }, + "actions": { + "title": "機能設定", + "reset": { + "button": "リセット", + "tooltip": "デフォルト機能にリセット（カスタム機能は保持）", + "confirm": "デフォルト機能にリセットしますか？\nカスタム機能は削除されません" + }, + "add_tooltip": { + "enabled": "カスタム機能を追加", + "disabled": "カスタム機能の上限に達しました (最大{{max}}個)" + }, + "delete_confirm": "このカスタム機能を削除しますか？", + "drag_hint": "ドラッグで並べ替え (有効{{enabled}}/最大{{max}})" + }, + "user_modal": { + "title": { + "add": "カスタム機能追加", + "edit": "カスタム機能編集" + }, + "name": { + "label": "機能名", + "hint": "機能名を入力" + }, + "icon": { + "label": "アイコン", + "placeholder": "Lucideアイコン名を入力", + "error": "無効なアイコン名です", + "tooltip": "例: arrow-right（小文字で入力）", + "view_all": "全アイコンを表示", + "random": "ランダム選択" + }, + "model": { + "label": "モデル", + "tooltip": "アシスタント使用時はシステムプロンプトとモデルパラメータも適用", + "default": "デフォルトモデル", + "assistant": "アシスタントを使用" + }, + "assistant": { + "label": "アシスタント選択", + "default": "デフォルト" + }, + "prompt": { + "label": "ユーザープロンプト", + "tooltip": "アシスタントのシステムプロンプトを上書きせず、入力補助として機能", + "placeholder": "{{text}}で選択テキストを参照（未入力時は末尾に追加）", + "placeholder_text": "プレースホルダー", + "copy_placeholder": "プレースホルダーをコピー" + } + }, + "search_modal": { + "title": "検索エンジン設定", + "engine": { + "label": "検索エンジン", + "custom": "カスタム" + }, + "custom": { + "name": { + "label": "表示名", + "hint": "検索エンジン名（16文字以内）", + "max_length": "16文字以内で入力" + }, + "url": { + "label": "検索URL", + "hint": "{{queryString}}で検索語を表す", + "required": "URLを入力してください", + "invalid_format": "http:// または https:// で始まるURLを入力", + "missing_placeholder": "{{queryString}}を含めてください" + }, + "test": "テスト" + } + } + } } } } diff --git a/src/renderer/src/i18n/locales/ru-ru.json b/src/renderer/src/i18n/locales/ru-ru.json index 3aac474179..80ae7eead2 100644 --- a/src/renderer/src/i18n/locales/ru-ru.json +++ b/src/renderer/src/i18n/locales/ru-ru.json @@ -1781,6 +1781,141 @@ "quit": "Выйти", "show_window": "Показать окно", "visualization": "Визуализация" + }, + "selection": { + "name": "Помощник выбора", + "action": { + "builtin": { + "translate": "Перевести", + "explain": "Объяснить", + "summary": "Суммаризировать", + "search": "Поиск", + "refine": "Уточнить", + "copy": "Копировать" + }, + "window": { + "pin": "Закрепить", + "pinned": "Закреплено", + "opacity": "Прозрачность окна", + "original_show": "Показать оригинал", + "original_hide": "Скрыть оригинал", + "original_copy": "Копировать оригинал", + "esc_close": "Esc - закрыть", + "esc_stop": "Esc - остановить", + "c_copy": "C - копировать" + } + }, + "settings": { + "experimental": "Экспериментальные функции", + "enable": { + "title": "Включить", + "description": "Поддерживается только в Windows" + }, + "toolbar": { + "title": "Панель инструментов", + "trigger_mode": { + "title": "Режим активации", + "description": "Показывать панель сразу при выделении или только при удержании Ctrl.", + "description_note": "В некоторых приложениях Ctrl может не работать. Если вы используете AHK или другие инструменты для переназначения Ctrl, это может привести к тому, что некоторые приложения не смогут выделить текст.", + "selected": "При выделении", + "ctrlkey": "По Ctrl" + }, + "compact_mode": { + "title": "Компактный режим", + "description": "Отображать только иконки без текста" + } + }, + "window": { + "title": "Окно действий", + "follow_toolbar": { + "title": "Следовать за панелью", + "description": "Окно будет следовать за панелью. Иначе - по центру." + }, + "auto_close": { + "title": "Автозакрытие", + "description": "Закрывать окно при потере фокуса (если не закреплено)" + }, + "auto_pin": { + "title": "Автозакрепление", + "description": "Закреплять окно по умолчанию" + }, + "opacity": { + "title": "Прозрачность", + "description": "Установить прозрачность окна по умолчанию" + } + }, + "actions": { + "title": "Действия", + "reset": { + "button": "Сбросить", + "tooltip": "Сбросить стандартные действия. Пользовательские останутся.", + "confirm": "Сбросить стандартные действия? Пользовательские останутся." + }, + "add_tooltip": { + "enabled": "Добавить действие", + "disabled": "Достигнут лимит ({{max}})" + }, + "delete_confirm": "Удалить это действие?", + "drag_hint": "Перетащите для сортировки. Включено: {{enabled}}/{{max}}" + }, + "user_modal": { + "title": { + "add": "Добавить действие", + "edit": "Редактировать действие" + }, + "name": { + "label": "Название", + "hint": "Введите название" + }, + "icon": { + "label": "Иконка", + "placeholder": "Название иконки Lucide", + "error": "Некорректное название", + "tooltip": "Названия в lowercase, например arrow-right", + "view_all": "Все иконки", + "random": "Случайная" + }, + "model": { + "label": "Модель", + "tooltip": "Использовать ассистента: будут применены его системные настройки", + "default": "По умолчанию", + "assistant": "Ассистент" + }, + "assistant": { + "label": "Ассистент", + "default": "По умолчанию" + }, + "prompt": { + "label": "Промпт", + "tooltip": "Дополняет ввод пользователя, не заменяя системный промпт ассистента", + "placeholder": "Используйте {{text}} для выделенного текста. Если пусто - текст будет добавлен", + "placeholder_text": "Плейсхолдер", + "copy_placeholder": "Копировать плейсхолдер" + } + }, + "search_modal": { + "title": "Поисковая система", + "engine": { + "label": "Поисковик", + "custom": "Свой" + }, + "custom": { + "name": { + "label": "Название", + "hint": "Название поисковика", + "max_length": "Не более 16 символов" + }, + "url": { + "label": "URL поиска", + "hint": "Используйте {{queryString}} для представления поискового запроса", + "required": "Введите URL", + "invalid_format": "URL должен начинаться с http:// или https://", + "missing_placeholder": "Должен содержать {{queryString}}" + }, + "test": "Тест" + } + } + } } } } diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json index 88f1c53b46..e2077e39fa 100644 --- a/src/renderer/src/i18n/locales/zh-cn.json +++ b/src/renderer/src/i18n/locales/zh-cn.json @@ -1780,6 +1780,141 @@ "quit": "退出", "show_window": "显示窗口", "visualization": "可视化" + }, + "selection": { + "name": "划词助手", + "action": { + "builtin": { + "translate": "翻译", + "explain": "解释", + "summary": "总结", + "search": "搜索", + "refine": "优化", + "copy": "复制" + }, + "window": { + "pin": "置顶", + "pinned": "已置顶", + "opacity": "窗口透明度", + "original_show": "显示原文", + "original_hide": "隐藏原文", + "original_copy": "复制原文", + "esc_close": "Esc 关闭", + "esc_stop": "Esc 停止", + "c_copy": "C 复制" + } + }, + "settings": { + "experimental": "实验性功能", + "enable": { + "title": "启用", + "description": "当前仅支持 Windows 系统" + }, + "toolbar": { + "title": "工具栏", + "trigger_mode": { + "title": "触发方式", + "description": "划词立即显示工具栏，或者划词后按住 Ctrl 键才显示工具栏。", + "description_note": "少数应用不支持通过 Ctrl 键划词。若使用了AHK等工具对 Ctrl 键进行了重映射，可能导致部分应用无法划词。", + "selected": "划词", + "ctrlkey": "Ctrl 键" + }, + "compact_mode": { + "title": "紧凑模式", + "description": "紧凑模式下，只显示图标，不显示文字" + } + }, + "window": { + "title": "功能窗口", + "follow_toolbar": { + "title": "跟随工具栏", + "description": "窗口位置将跟随工具栏显示，禁用后则始终居中显示" + }, + "auto_close": { + "title": "自动关闭", + "description": "当窗口未置顶且失去焦点时，将自动关闭该窗口" + }, + "auto_pin": { + "title": "自动置顶", + "description": "默认将窗口置于顶部" + }, + "opacity": { + "title": "透明度", + "description": "设置窗口的默认透明度，100%为完全不透明" + } + }, + "actions": { + "title": "功能", + "reset": { + "button": "重置", + "tooltip": "重置为默认功能，自定义功能不会被删除", + "confirm": "确定要重置为默认功能吗？自定义功能不会被删除。" + }, + "add_tooltip": { + "enabled": "添加自定义功能", + "disabled": "自定义功能已达上限 ({{max}}个)" + }, + "delete_confirm": "确定要删除这个自定义功能吗？", + "drag_hint": "拖拽排序，移动到上方以启用功能 ({{enabled}}/{{max}})" + }, + "user_modal": { + "title": { + "add": "添加自定义功能", + "edit": "编辑自定义功能" + }, + "name": { + "label": "名称", + "hint": "请输入功能名称" + }, + "icon": { + "label": "图标", + "placeholder": "输入 Lucide 图标名称", + "error": "无效的图标名称，请检查输入", + "tooltip": "Lucide图标名称为小写，如 arrow-right", + "view_all": "查看所有图标", + "random": "随机图标" + }, + "model": { + "label": "模型", + "tooltip": "使用助手：会同时使用助手的系统提示词和模型参数", + "default": "默认模型", + "assistant": "使用助手" + }, + "assistant": { + "label": "选择助手", + "default": "默认" + }, + "prompt": { + "label": "用户提示词(Prompt)", + "tooltip": "用户提示词，作为用户输入的补充，不会覆盖助手的系统提示词", + "placeholder": "使用占位符{{text}}代表选中的文本，不填写时，选中的文本将添加到本提示词的末尾", + "placeholder_text": "占位符", + "copy_placeholder": "复制占位符" + } + }, + "search_modal": { + "title": "设置搜索引擎", + "engine": { + "label": "搜索引擎", + "custom": "自定义" + }, + "custom": { + "name": { + "label": "自定义名称", + "hint": "请输入搜索引擎名称", + "max_length": "名称不能超过16个字符" + }, + "url": { + "label": "自定义搜索 URL", + "hint": "用 {{queryString}} 代表搜索词", + "required": "请输入搜索 URL", + "invalid_format": "请输入以 http:// 或 https:// 开头的有效 URL", + "missing_placeholder": "URL 必须包含 {{queryString}} 占位符" + }, + "test": "测试" + } + } + } } } } diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json index 05f599317d..90b4e260c3 100644 --- a/src/renderer/src/i18n/locales/zh-tw.json +++ b/src/renderer/src/i18n/locales/zh-tw.json @@ -1781,6 +1781,141 @@ "quit": "結束", "show_window": "顯示視窗", "visualization": "視覺化" + }, + "selection": { + "name": "劃詞助手", + "action": { + "builtin": { + "translate": "翻譯", + "explain": "解釋", + "summary": "總結", + "search": "搜尋", + "refine": "優化", + "copy": "複製" + }, + "window": { + "pin": "置頂", + "pinned": "已置頂", + "opacity": "視窗透明度", + "original_show": "顯示原文", + "original_hide": "隱藏原文", + "original_copy": "複製原文", + "esc_close": "Esc 關閉", + "esc_stop": "Esc 停止", + "c_copy": "C 複製" + } + }, + "settings": { + "experimental": "實驗性功能", + "enable": { + "title": "啟用", + "description": "目前僅支援 Windows 系統" + }, + "toolbar": { + "title": "工具列", + "trigger_mode": { + "title": "觸發方式", + "description": "劃詞立即顯示工具列，或者劃詞後按住 Ctrl 鍵才顯示工具列。", + "description_note": "在某些應用中可能無法透過 Ctrl 鍵劃詞。若使用了AHK等工具對Ctrl鍵進行了重新對應，可能導致部分應用程式無法劃詞。", + "selected": "劃詞", + "ctrlkey": "Ctrl 鍵" + }, + "compact_mode": { + "title": "緊湊模式", + "description": "緊湊模式下，只顯示圖示，不顯示文字" + } + }, + "window": { + "title": "功能視窗", + "follow_toolbar": { + "title": "跟隨工具列", + "description": "視窗位置將跟隨工具列顯示，停用後則始終置中顯示" + }, + "auto_close": { + "title": "自動關閉", + "description": "當視窗未置頂且失去焦點時，將自動關閉該視窗" + }, + "auto_pin": { + "title": "自動置頂", + "description": "預設將視窗置於頂部" + }, + "opacity": { + "title": "透明度", + "description": "設置視窗的默認透明度，100%為完全不透明" + } + }, + "actions": { + "title": "功能", + "reset": { + "button": "重設", + "tooltip": "重設為預設功能，自訂功能不會被刪除", + "confirm": "確定要重設為預設功能嗎？自訂功能不會被刪除。" + }, + "add_tooltip": { + "enabled": "新增自訂功能", + "disabled": "自訂功能已達上限 ({{max}}個)" + }, + "delete_confirm": "確定要刪除這個自訂功能嗎？", + "drag_hint": "拖曳排序，移動到上方以啟用功能 ({{enabled}}/{{max}})" + }, + "user_modal": { + "title": { + "add": "新增自訂功能", + "edit": "編輯自訂功能" + }, + "name": { + "label": "名稱", + "hint": "請輸入功能名稱" + }, + "icon": { + "label": "圖示", + "placeholder": "輸入 Lucide 圖示名稱", + "error": "無效的圖示名稱，請檢查輸入", + "tooltip": "Lucide圖示名稱為小寫，如 arrow-right", + "view_all": "檢視所有圖示", + "random": "隨機圖示" + }, + "model": { + "label": "模型", + "tooltip": "使用助手：會同時使用助手的系統提示詞和模型參數", + "default": "預設模型", + "assistant": "使用助手" + }, + "assistant": { + "label": "選擇助手", + "default": "預設" + }, + "prompt": { + "label": "使用者提示詞(Prompt)", + "tooltip": "使用者提示詞，作為使用者輸入的補充，不會覆蓋助手的系統提示詞", + "placeholder": "使用佔位符{{text}}代表選取的文字，不填寫時，選取的文字將加到本提示詞的末尾", + "placeholder_text": "佔位符", + "copy_placeholder": "複製佔位符" + } + }, + "search_modal": { + "title": "設定搜尋引擎", + "engine": { + "label": "搜尋引擎", + "custom": "自訂" + }, + "custom": { + "name": { + "label": "自訂名稱", + "hint": "請輸入搜尋引擎名稱", + "max_length": "名稱不能超過16個字元" + }, + "url": { + "label": "自訂搜尋 URL", + "hint": "使用 {{queryString}} 代表搜尋詞", + "required": "請輸入搜尋 URL", + "invalid_format": "請輸入以 http:// 或 https:// 開頭的有效 URL", + "missing_placeholder": "URL 必須包含 {{queryString}} 佔位符" + }, + "test": "測試" + } + } + } } } } diff --git a/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx b/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx index e7826b7e20..b022377f18 100644 --- a/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx +++ b/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx @@ -450,10 +450,6 @@ const MCPToolsButton: FC = ({ ref, setInputValue, resizeTextArea, Toolbar openResourcesList })) - if (activedMcpServers.length === 0) { - return null - } - return ( diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx index 2eb2cbeacf..493d0ac4f7 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx +++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx @@ -12,7 +12,7 @@ import { checkApi, formatApiKeys } from '@renderer/services/ApiService' import { checkModelsHealth, getModelCheckSummary } from '@renderer/services/HealthCheckService' import { isProviderSupportAuth } from '@renderer/services/ProviderService' import { Provider } from '@renderer/types' -import { formatApiHost } from '@renderer/utils/api' +import { formatApiHost, splitApiKeyString } from '@renderer/utils/api' import { lightbulbVariants } from '@renderer/utils/motionVariants' import { Button, Divider, Flex, Input, Space, Switch, Tooltip } from 'antd' import Link from 'antd/es/typography/Link' @@ -127,10 +127,7 @@ const ProviderSetting: FC = ({ provider: _provider }) => { return } - const keys = apiKey - .split(',') - .map((k) => k.trim()) - .filter((k) => k) + const keys = splitApiKeyString(apiKey) // Add an empty key to enable health checks for local models. // Error messages will be shown for each model if a valid key is needed. @@ -215,11 +212,7 @@ const ProviderSetting: FC = ({ provider: _provider }) => { } if (apiKey.includes(',')) { - const keys = apiKey - .split(/(? k.trim()) - .map((k) => k.replace(/\\,/g, ',')) - .filter((k) => k) + const keys = splitApiKeyString(apiKey) const result = await ApiCheckPopup.show({ title: t('settings.provider.check_multiple_keys'), diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionActionSearchModal.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionActionSearchModal.tsx new file mode 100644 index 0000000000..8dfd77d2b8 --- /dev/null +++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionActionSearchModal.tsx @@ -0,0 +1,232 @@ +import type { ActionItem } from '@renderer/types/selectionTypes' +import { Button, Form, Input, Modal, Select } from 'antd' +import { Globe } from 'lucide-react' +import { FC, useEffect } from 'react' +import { useTranslation } from 'react-i18next' + +interface SearchEngineOption { + label: string + value: string + searchEngine: string + icon: React.ReactNode +} + +export const LogoBing = (props) => { + return ( + + + + ) +} +export const LogoBaidu = (props) => { + return ( + + + + ) +} + +export const LogoGoogle = (props) => { + return ( + + + + ) +} + +export const DEFAULT_SEARCH_ENGINES: SearchEngineOption[] = [ + { + label: 'Google', + value: 'Google', + searchEngine: 'Google|https://www.google.com/search?q={{queryString}}', + icon: + }, + { + label: 'Baidu', + value: 'Baidu', + searchEngine: 'Baidu|https://www.baidu.com/s?wd={{queryString}}', + icon: + }, + { + label: 'Bing', + value: 'Bing', + searchEngine: 'Bing|https://www.bing.com/search?q={{queryString}}', + icon: + }, + { + label: '', + value: 'custom', + searchEngine: '', + icon: + } +] + +const EXAMPLE_URL = 'https://example.com/search?q={{queryString}}' + +interface SelectionActionSearchModalProps { + isModalOpen: boolean + onOk: (searchEngine: string) => void + onCancel: () => void + currentAction?: ActionItem +} + +const SelectionActionSearchModal: FC = ({ + isModalOpen, + onOk, + onCancel, + currentAction +}) => { + const { t } = useTranslation() + const [form] = Form.useForm() + + useEffect(() => { + if (isModalOpen && currentAction?.searchEngine) { + form.resetFields() + + const [engine, url] = currentAction.searchEngine.split('|') + const defaultEngine = DEFAULT_SEARCH_ENGINES.find((e) => e.value === engine) + + if (defaultEngine) { + form.setFieldsValue({ + engine: defaultEngine.value, + customName: '', + customUrl: '' + }) + } else { + // Handle custom search engine + form.setFieldsValue({ + engine: 'custom', + customName: engine, + customUrl: url + }) + } + } + }, [isModalOpen, currentAction, form]) + + const handleOk = async () => { + try { + const values = await form.validateFields() + const selectedEngine = DEFAULT_SEARCH_ENGINES.find((e) => e.value === values.engine) + + const searchEngine = + selectedEngine?.value === 'custom' + ? `${values.customName}|${values.customUrl}` + : selectedEngine?.searchEngine || '' + + onOk(searchEngine) + } catch (error) { + console.error('Validation failed:', error) + } + } + + const handleCancel = () => { + onCancel() + } + + const handleTest = () => { + const values = form.getFieldsValue() + if (values.customUrl) { + const testUrl = values.customUrl.replace('{{queryString}}', 'cherry studio') + window.api.openWebsite(testUrl) + } + } + + return ( + +
+ + + + + { + if (value && !value.includes('{{queryString}}')) { + return Promise.reject(t('selection.settings.search_modal.custom.url.missing_placeholder')) + } + return Promise.resolve() + } + } + ]}> + + {t('selection.settings.search_modal.custom.test')} + + } + /> + + + ) : null + } + +
+ + ) +} + +export default SelectionActionSearchModal diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionActionUserModal.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionActionUserModal.tsx new file mode 100644 index 0000000000..e1673e7cf4 --- /dev/null +++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionActionUserModal.tsx @@ -0,0 +1,337 @@ +import ModelAvatar from '@renderer/components/Avatar/ModelAvatar' +import CopyButton from '@renderer/components/CopyButton' +import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant' +import { getDefaultModel } from '@renderer/services/AssistantService' +import type { ActionItem } from '@renderer/types/selectionTypes' +import { Col, Input, Modal, Radio, Row, Select, Space, Tooltip } from 'antd' +import { CircleHelp, Dices, OctagonX } from 'lucide-react' +import { DynamicIcon, iconNames } from 'lucide-react/dynamic' +import { FC, useEffect, useState } from 'react' +import { useTranslation } from 'react-i18next' +import styled from 'styled-components' + +interface SelectionActionUserModalProps { + isModalOpen: boolean + editingAction: ActionItem | null + onOk: (data: ActionItem) => void + onCancel: () => void +} + +const SelectionActionUserModal: FC = ({ + isModalOpen, + editingAction, + onOk, + onCancel +}) => { + const { t } = useTranslation() + const { assistants: userPredefinedAssistants } = useAssistants() + const { defaultAssistant } = useDefaultAssistant() + + const [formData, setFormData] = useState>({}) + const [errors, setErrors] = useState>>({}) + + useEffect(() => { + if (isModalOpen) { + // 如果是编辑模式，使用现有数据；否则使用空数据 + setFormData( + editingAction || { + name: '', + prompt: '', + icon: '', + assistantId: '' + } + ) + setErrors({}) + } + }, [isModalOpen, editingAction]) + + const validateForm = (): boolean => { + const newErrors: Partial> = {} + + if (!formData.name?.trim()) { + newErrors.name = t('selection.settings.user_modal.name.hint') + } + + if (formData.icon && !iconNames.includes(formData.icon as any)) { + newErrors.icon = t('selection.settings.user_modal.icon.error') + } + + setErrors(newErrors) + return Object.keys(newErrors).length === 0 + } + + const handleOk = () => { + if (!validateForm()) { + return + } + + // 构建完整的 ActionItem + const actionItem: ActionItem = { + id: editingAction?.id || `user-${Date.now()}`, + name: formData.name || 'USER', + enabled: editingAction?.enabled || false, + isBuiltIn: editingAction?.isBuiltIn || false, + icon: formData.icon, + prompt: formData.prompt, + assistantId: formData.assistantId + } + + onOk(actionItem) + } + + const handleInputChange = (field: keyof ActionItem, value: string) => { + setFormData((prev) => ({ ...prev, [field]: value })) + // Clear error when user starts typing + if (errors[field]) { + setErrors((prev) => ({ ...prev, [field]: undefined })) + } + } + + return ( + + + +
+ + + {t('selection.settings.user_modal.name.label')} + + handleInputChange('name', e.target.value)} + maxLength={16} + status={errors.name ? 'error' : ''} + /> + {errors.name && {errors.name}} + + + + {t('selection.settings.user_modal.icon.label')} + + + + + + {t('selection.settings.user_modal.icon.view_all')} + + + { + const randomIcon = iconNames[Math.floor(Math.random() * iconNames.length)] + handleInputChange('icon', randomIcon) + }}> + + + + + + handleInputChange('icon', e.target.value)} + style={{ width: '100%' }} + status={errors.icon ? 'error' : ''} + /> + + {formData.icon && + (iconNames.includes(formData.icon as any) ? ( + + ) : ( + + ))} + + + {errors.icon && {errors.icon}} + +
+ + + + + + {t('selection.settings.user_modal.model.label')} + + + + + + + handleInputChange('assistantId', e.target.value === 'default' ? '' : defaultAssistant.id) + } + buttonStyle="solid"> + {t('selection.settings.user_modal.model.default')} + {t('selection.settings.user_modal.model.assistant')} + + + + + {formData.assistantId && ( + + + {t('selection.settings.user_modal.assistant.label')} + + + + )} + + + {t('selection.settings.user_modal.prompt.label')} + + + + +
+ {t('selection.settings.user_modal.prompt.placeholder_text')} {'{{text}}'} + +
+ + handleInputChange('prompt', e.target.value)} + rows={4} + style={{ resize: 'none' }} + /> + + + + ) +} + +const ModalSection = styled.div` + display: flex; + flex-direction: column; + margin-top: 16px; +` + +const ModalSectionTitle = styled.div` + display: flex; + align-items: center; + gap: 4px; + font-weight: 500; + margin-bottom: 8px; +` + +const ModalSectionTitleLabel = styled.div` + font-size: 14px; + font-weight: 500; + color: var(--color-text); +` + +const QuestionIcon = styled(CircleHelp)` + cursor: pointer; + color: var(--color-text-3); +` + +const ErrorText = styled.div` + color: var(--color-error); + font-size: 12px; +` + +const Spacer = styled.div` + flex: 1; +` + +const IconPreview = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + background: var(--color-bg-2); + border-radius: 4px; + border: 1px solid var(--color-border); +` + +const AssistantItem = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + height: 28px; +` + +const AssistantName = styled.span` + max-width: calc(100% - 60px); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +` + +const CurrentTag = styled.span<{ isCurrent: boolean }>` + color: ${(props) => (props.isCurrent ? 'var(--color-primary)' : 'var(--color-text-3)')}; + font-size: 12px; + padding: 2px 4px; + border-radius: 4px; +` + +const DiceButton = styled.div` + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.2s; + margin-left: 4px; + + .btn-icon { + color: var(--color-text-2); + } + + &:hover { + .btn-icon { + color: var(--color-primary); + } + } + + &:active { + transform: rotate(720deg); + } +` + +export default SelectionActionUserModal diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionActionsList.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionActionsList.tsx new file mode 100644 index 0000000000..91106f762d --- /dev/null +++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionActionsList.tsx @@ -0,0 +1,126 @@ +import { DragDropContext } from '@hello-pangea/dnd' +import { defaultActionItems } from '@renderer/store/selectionStore' +import type { ActionItem } from '@renderer/types/selectionTypes' +import SelectionToolbar from '@renderer/windows/selection/toolbar/SelectionToolbar' +import { Row } from 'antd' +import { FC } from 'react' +import styled from 'styled-components' + +import { SettingDivider, SettingGroup } from '..' +import ActionsList from './components/ActionsList' +import ActionsListDivider from './components/ActionsListDivider' +import SettingsActionsListHeader from './components/SettingsActionsListHeader' +import { useActionItems } from './hooks/useSettingsActionsList' +import SelectionActionSearchModal from './SelectionActionSearchModal' +import SelectionActionUserModal from './SelectionActionUserModal' + +// Component for managing selection actions in settings +// Handles drag-and-drop reordering, enabling/disabling actions, and custom action management + +// Props for the main component +interface SelectionActionsListProps { + actionItems: ActionItem[] | undefined // List of all available actions + setActionItems: (items: ActionItem[]) => void // Function to update action items +} + +const SelectionActionsList: FC = ({ actionItems, setActionItems }) => { + const { + enabledItems, + disabledItems, + customItemsCount, + isUserModalOpen, + isSearchModalOpen, + userEditingAction, + setIsUserModalOpen, + setIsSearchModalOpen, + handleEditActionItem, + handleAddNewAction, + handleUserModalOk, + handleSearchModalOk, + handleDeleteActionItem, + handleReset, + onDragEnd, + getSearchEngineInfo, + MAX_CUSTOM_ITEMS, + MAX_ENABLED_ITEMS + } = useActionItems(actionItems, setActionItems) + + if (!actionItems || actionItems.length === 0) { + setActionItems(defaultActionItems) + } + + return ( + + + + + + + + + + + + + + + + + + + + + + setIsUserModalOpen(false)} + /> + + setIsSearchModalOpen(false)} + currentAction={actionItems?.find((item) => item.id === 'search')} + /> + + ) +} + +const ActionsListSection = styled.div` + display: flex; + flex-direction: column; + gap: 16px; +` + +const ActionColumn = styled.div` + width: 100%; +` + +const DemoSection = styled(Row)` + align-items: center; + justify-content: center; + margin: 24px 0; +` + +export default SelectionActionsList diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx new file mode 100644 index 0000000000..c1303496eb --- /dev/null +++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx @@ -0,0 +1,191 @@ +import { isWindows } from '@renderer/config/constant' +import { useTheme } from '@renderer/context/ThemeProvider' +import { useSelectionAssistant } from '@renderer/hooks/useSelectionAssistant' +import { TriggerMode } from '@renderer/types/selectionTypes' +import SelectionToolbar from '@renderer/windows/selection/toolbar/SelectionToolbar' +import { Radio, Row, Slider, Switch, Tooltip } from 'antd' +import { CircleHelp } from 'lucide-react' +import { FC, useEffect } from 'react' +import { useTranslation } from 'react-i18next' +import styled from 'styled-components' + +import { + SettingContainer, + SettingDescription, + SettingDivider, + SettingGroup, + SettingRow, + SettingRowTitle, + SettingTitle +} from '..' +import SelectionActionsList from './SelectionActionsList' + +const SelectionAssistantSettings: FC = () => { + const { theme } = useTheme() + const { t } = useTranslation() + const { + selectionEnabled, + triggerMode, + isCompact, + isAutoClose, + isAutoPin, + isFollowToolbar, + actionItems, + actionWindowOpacity, + setSelectionEnabled, + setTriggerMode, + setIsCompact, + setIsAutoClose, + setIsAutoPin, + setIsFollowToolbar, + setActionWindowOpacity, + setActionItems + } = useSelectionAssistant() + + // force disable selection assistant on non-windows systems + useEffect(() => { + if (!isWindows && selectionEnabled) { + setSelectionEnabled(false) + } + }, [selectionEnabled, setSelectionEnabled]) + + return ( + + + + {t('selection.name')} + + {t('selection.settings.experimental')} + + + + + {t('selection.settings.enable.title')} + {!isWindows && {t('selection.settings.enable.description')}} + + setSelectionEnabled(checked)} + disabled={!isWindows} + /> + + + {!selectionEnabled && ( + + + + )} + + {selectionEnabled && ( + <> + + {t('selection.settings.toolbar.title')} + + + + + +
{t('selection.settings.toolbar.trigger_mode.title')}
+ + + + + {t('selection.settings.toolbar.trigger_mode.description')} + + setTriggerMode(e.target.value as TriggerMode)} + buttonStyle="solid"> + {t('selection.settings.toolbar.trigger_mode.selected')} + {t('selection.settings.toolbar.trigger_mode.ctrlkey')} + + + + + + {t('selection.settings.toolbar.compact_mode.title')} + {t('selection.settings.toolbar.compact_mode.description')} + + setIsCompact(checked)} /> + + + + + {t('selection.settings.window.title')} + + + + + {t('selection.settings.window.follow_toolbar.title')} + {t('selection.settings.window.follow_toolbar.description')} + + setIsFollowToolbar(checked)} /> + + + + + {t('selection.settings.window.auto_close.title')} + {t('selection.settings.window.auto_close.description')} + + setIsAutoClose(checked)} /> + + + + + {t('selection.settings.window.auto_pin.title')} + {t('selection.settings.window.auto_pin.description')} + + setIsAutoPin(checked)} /> + + + + + {t('selection.settings.window.opacity.title')} + {t('selection.settings.window.opacity.description')} + +
{actionWindowOpacity}%
+ + + + + + + )} + + ) +} + +const Spacer = styled.div` + flex: 1; +` +const SettingLabel = styled.div` + flex: 1; +` + +const ExperimentalText = styled.div` + color: var(--color-text-3); + font-size: 12px; +` + +const DemoContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-top: 15px; + margin-bottom: 5px; +` + +const QuestionIcon = styled(CircleHelp)` + cursor: pointer; + color: var(--color-text-3); +` + +export default SelectionAssistantSettings diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsList.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsList.tsx new file mode 100644 index 0000000000..7532232b4c --- /dev/null +++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsList.tsx @@ -0,0 +1,60 @@ +import type { DroppableProvided } from '@hello-pangea/dnd' +import { Draggable, Droppable } from '@hello-pangea/dnd' +import type { ActionItem as ActionItemType } from '@renderer/types/selectionTypes' +import { memo } from 'react' +import styled from 'styled-components' + +import ActionsListItemComponent from './ActionsListItem' + +interface ActionListProps { + droppableId: 'enabled' | 'disabled' + items: ActionItemType[] + isLastEnabledItem: boolean + onEdit: (item: ActionItemType) => void + onDelete: (id: string) => void + getSearchEngineInfo: (engine: string) => { icon: any; name: string } | null +} + +const ActionsList = memo( + ({ droppableId, items, isLastEnabledItem, onEdit, onDelete, getSearchEngineInfo }: ActionListProps) => { + return ( + + {(provided: DroppableProvided) => ( + + + {items.map((item, index) => ( + + {(provided) => ( + + )} + + ))} + {provided.placeholder} + + + )} + + ) + } +) + +const List = styled.div` + background: var(--color-bg-1); + border-radius: 4px; + margin-bottom: 16px; + padding-bottom: 1px; +` + +const ActionsListContent = styled.div` + padding: 10px; +` + +export default ActionsList diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListDivider.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListDivider.tsx new file mode 100644 index 0000000000..4940f2c3fb --- /dev/null +++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListDivider.tsx @@ -0,0 +1,41 @@ +import { memo } from 'react' +import { useTranslation } from 'react-i18next' +import styled from 'styled-components' + +interface DividerProps { + enabledCount: number + maxEnabled: number +} + +const ActionsListDivider = memo(({ enabledCount, maxEnabled }: DividerProps) => { + const { t } = useTranslation() + + return ( + + + {t('selection.settings.actions.drag_hint', { enabled: enabledCount, max: maxEnabled })} + + + ) +}) + +const DividerContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + color: var(--color-text-3); + margin: 16px 12px; +` + +const DividerLine = styled.div` + flex: 1; + height: 2px; + background: var(--color-border); +` + +const DividerText = styled.span` + margin: 0 16px; +` + +export default ActionsListDivider diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListItem.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListItem.tsx new file mode 100644 index 0000000000..64f11f447e --- /dev/null +++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListItem.tsx @@ -0,0 +1,163 @@ +import type { DraggableProvided } from '@hello-pangea/dnd' +import type { ActionItem as ActionItemType } from '@renderer/types/selectionTypes' +import { Button } from 'antd' +import { Pencil, Settings2, Trash } from 'lucide-react' +import { DynamicIcon } from 'lucide-react/dynamic' +import { memo } from 'react' +import { useTranslation } from 'react-i18next' +import styled from 'styled-components' + +interface ActionItemProps { + item: ActionItemType + provided: DraggableProvided + listType: 'enabled' | 'disabled' + isLastEnabledItem: boolean + onEdit: (item: ActionItemType) => void + onDelete: (id: string) => void + getSearchEngineInfo: (engine: string) => { icon: any; name: string } | null +} + +const ActionsListItem = memo( + ({ item, provided, listType, isLastEnabledItem, onEdit, onDelete, getSearchEngineInfo }: ActionItemProps) => { + const { t } = useTranslation() + const isEnabled = listType === 'enabled' + + return ( + + + +
} /> + + {item.isBuiltIn ? t(item.name) : item.name} + {item.id === 'search' && item.searchEngine && ( + + {getSearchEngineInfo(item.searchEngine)?.icon} + {getSearchEngineInfo(item.searchEngine)?.name} + + )} + + + + + ) + } +) + +interface ActionOperationsProps { + item: ActionItemType + onEdit: (item: ActionItemType) => void + onDelete: (id: string) => void +} + +const ActionOperations = memo(({ item, onEdit, onDelete }: ActionOperationsProps) => { + if (!item.isBuiltIn) { + return ( + + + + + ) + } + + if (item.isBuiltIn && item.id === 'search') { + return ( + + + + ) + } + + return null +}) + +const Item = styled.div<{ disabled: boolean }>` + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + margin-bottom: 8px; + background-color: var(--color-bg-1); + border: 1px solid var(--color-border); + border-radius: 6px; + cursor: move; + opacity: ${(props) => (props.disabled ? 0.8 : 1)}; + transition: background-color 0.2s ease; + + &:last-child { + margin-bottom: 0; + } + + &:hover { + background-color: var(--color-bg-2); + } + + &.non-draggable { + cursor: default; + background-color: var(--color-bg-2); + position: relative; + } +` + +const ItemLeft = styled.div` + display: flex; + align-items: center; + flex: 1; +` + +const ItemName = styled.span<{ disabled: boolean }>` + margin-left: 8px; + color: ${(props) => (props.disabled ? 'var(--color-text-3)' : 'var(--color-text-1)')}; +` + +const ItemIcon = styled.div<{ disabled: boolean }>` + margin: 0 8px; + display: flex; + align-items: center; + justify-content: center; + color: ${(props) => (props.disabled ? 'var(--color-text-3)' : 'var(--color-primary)')}; +` + +const ItemDescription = styled.div` + display: flex; + align-items: center; + gap: 4px; + margin-left: 16px; + font-size: 12px; + color: var(--color-text-2); + opacity: 0.8; +` + +const UserActionOpSection = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + + .btn-icon-edit { + color: var(--color-text-3); + + &:hover { + color: var(--color-primary); + } + } + .btn-icon-delete { + color: var(--color-text-3); + + &:hover { + color: var(--color-error); + } + } +` + +export default ActionsListItem diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SettingsActionsListHeader.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SettingsActionsListHeader.tsx new file mode 100644 index 0000000000..69017b36df --- /dev/null +++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SettingsActionsListHeader.tsx @@ -0,0 +1,53 @@ +import { Button, Row, Tooltip } from 'antd' +import { Plus } from 'lucide-react' +import { memo } from 'react' +import { useTranslation } from 'react-i18next' +import styled from 'styled-components' + +import { SettingTitle } from '../..' + +interface HeaderSectionProps { + customItemsCount: number + maxCustomItems: number + onReset: () => void + onAdd: () => void +} + +const SettingsActionsListHeader = memo(({ customItemsCount, maxCustomItems, onReset, onAdd }: HeaderSectionProps) => { + const { t } = useTranslation() + const isCustomItemLimitReached = customItemsCount >= maxCustomItems + + return ( + + {t('selection.settings.actions.title')} + + + + {t('selection.settings.actions.reset.button')} + + + +