From d1c8ca81975afac4ff6dd1604775eb818aed1891 Mon Sep 17 00:00:00 2001 From: Simon <10131203+gaomeng1900@users.noreply.github.com> Date: Mon, 15 Dec 2025 17:34:12 +0800 Subject: [PATCH] refactor(ui): implement dedicated package `@page-agent/ui` --- package-lock.json | 15 ++++++++- package.json | 1 + packages/page-agent/package.json | 8 ++--- packages/page-agent/src/PageAgent.ts | 3 +- packages/page-agent/src/config/index.ts | 2 +- packages/page-agent/vite.config.js | 1 + packages/page-controller/package.json | 4 +-- packages/ui/package.json | 43 +++++++++++++++++++++++++ packages/ui/src/Panel.ts | 4 +-- packages/ui/src/SimulatorMask.ts | 2 +- packages/ui/src/env.d.ts | 6 ++++ packages/ui/src/index.ts | 4 +++ packages/ui/src/utils.ts | 6 ++++ packages/ui/tsconfig.dts.json | 10 ++++++ packages/ui/tsconfig.json | 13 ++++++++ packages/ui/vite.config.js | 41 +++++++++++++++++++++++ packages/website/vite.config.js | 1 + tsconfig.json | 1 + 18 files changed, 150 insertions(+), 15 deletions(-) create mode 100644 packages/ui/package.json create mode 100644 packages/ui/src/env.d.ts create mode 100644 packages/ui/src/index.ts create mode 100644 packages/ui/src/utils.ts create mode 100644 packages/ui/tsconfig.dts.json create mode 100644 packages/ui/tsconfig.json create mode 100644 packages/ui/vite.config.js diff --git a/package-lock.json b/package-lock.json index fa7fb15..5d8510c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "workspaces": [ "packages/page-controller", + "packages/ui", "packages/page-agent", "packages/website" ], @@ -1560,6 +1561,10 @@ "resolved": "packages/page-controller", "link": true }, + "node_modules/@page-agent/ui": { + "resolved": "packages/ui", + "link": true + }, "node_modules/@page-agent/website": { "resolved": "packages/website", "link": true @@ -7003,7 +7008,7 @@ "license": "MIT", "dependencies": { "@page-agent/page-controller": "0.0.7", - "ai-motion": "^0.4.7", + "@page-agent/ui": "0.0.7", "chalk": "^5.6.2", "zod": "^4.1.12" } @@ -7013,6 +7018,14 @@ "version": "0.0.7", "license": "MIT" }, + "packages/ui": { + "name": "@page-agent/ui", + "version": "0.0.7", + "license": "MIT", + "dependencies": { + "ai-motion": "^0.4.7" + } + }, "packages/website": { "name": "@page-agent/website", "version": "0.0.7", diff --git a/package.json b/package.json index 1555fa7..a1bdc42 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "type": "module", "workspaces": [ "packages/page-controller", + "packages/ui", "packages/page-agent", "packages/website" ], diff --git a/packages/page-agent/package.json b/packages/page-agent/package.json index c5c99a8..96167bd 100644 --- a/packages/page-agent/package.json +++ b/packages/page-agent/package.json @@ -14,9 +14,7 @@ } }, "files": [ - "dist/", - "README.md", - "LICENSE" + "dist/" ], "description": "GUI agent for web applications - add intelligent automation to any webpage with a single script", "keywords": [ @@ -47,9 +45,9 @@ "postpublish": "node -e \"['README.md','LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\"" }, "dependencies": { - "ai-motion": "^0.4.7", "chalk": "^5.6.2", "zod": "^4.1.12", - "@page-agent/page-controller": "0.0.7" + "@page-agent/page-controller": "0.0.7", + "@page-agent/ui": "0.0.7" } } diff --git a/packages/page-agent/src/PageAgent.ts b/packages/page-agent/src/PageAgent.ts index 412d992..ce88ba9 100644 --- a/packages/page-agent/src/PageAgent.ts +++ b/packages/page-agent/src/PageAgent.ts @@ -3,6 +3,7 @@ * All rights reserved. */ import { PageController } from '@page-agent/page-controller' +import { Panel, SimulatorMask } from '@page-agent/ui' import chalk from 'chalk' import zod from 'zod' @@ -11,8 +12,6 @@ import { MAX_STEPS } from './config/constants' import { LLM, type Tool } from './llms' import SYSTEM_PROMPT from './prompts/system_prompt.md?raw' import { tools } from './tools' -import { Panel } from './ui/Panel' -import { SimulatorMask } from './ui/SimulatorMask' import { trimLines, uid, waitUntil } from './utils' import { assert } from './utils/assert' diff --git a/packages/page-agent/src/config/index.ts b/packages/page-agent/src/config/index.ts index e0a5497..6e67e84 100644 --- a/packages/page-agent/src/config/index.ts +++ b/packages/page-agent/src/config/index.ts @@ -1,7 +1,7 @@ import type { PageControllerConfig } from '@page-agent/page-controller' +import type { SupportedLanguage } from '@page-agent/ui' import type { AgentHistory, ExecutionResult, PageAgent } from '../PageAgent' -import type { SupportedLanguage } from '../i18n' import type { PageAgentTool } from '../tools' import { DEFAULT_API_KEY, diff --git a/packages/page-agent/vite.config.js b/packages/page-agent/vite.config.js index 549e73e..24298e0 100644 --- a/packages/page-agent/vite.config.js +++ b/packages/page-agent/vite.config.js @@ -61,6 +61,7 @@ const umdConfig = { resolve: { alias: { '@page-agent/page-controller': resolve(__dirname, '../page-controller/src/PageController.ts'), + '@page-agent/ui': resolve(__dirname, '../ui/src/index.ts'), }, }, build: { diff --git a/packages/page-controller/package.json b/packages/page-controller/package.json index d5136b8..4f8fb63 100644 --- a/packages/page-controller/package.json +++ b/packages/page-controller/package.json @@ -13,9 +13,7 @@ } }, "files": [ - "dist/", - "README.md", - "LICENSE" + "dist/" ], "description": "Page controller for page-agent - DOM operations and element interactions", "keywords": [ diff --git a/packages/ui/package.json b/packages/ui/package.json new file mode 100644 index 0000000..0e05876 --- /dev/null +++ b/packages/ui/package.json @@ -0,0 +1,43 @@ +{ + "name": "@page-agent/ui", + "version": "0.0.7", + "type": "module", + "main": "./dist/lib/page-agent-ui.js", + "module": "./dist/lib/page-agent-ui.js", + "types": "./dist/lib/index.d.ts", + "exports": { + ".": { + "types": "./dist/lib/index.d.ts", + "import": "./dist/lib/page-agent-ui.js", + "default": "./dist/lib/page-agent-ui.js" + } + }, + "files": [ + "dist/" + ], + "description": "UI components for page-agent - Panel, SimulatorMask, and i18n", + "keywords": [ + "page-agent", + "ui", + "panel", + "i18n" + ], + "author": "Simon", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/alibaba/page-agent.git", + "directory": "packages/ui" + }, + "homepage": "https://alibaba.github.io/page-agent/", + "scripts": { + "build": "vite build", + "build:watch": "vite build --watch", + "prepublishOnly": "node -e \"const fs=require('fs');['LICENSE'].forEach(f=>fs.copyFileSync('../../'+f,f))\"", + "postpublish": "node -e \"['LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\"" + }, + "dependencies": { + "ai-motion": "^0.4.7" + } +} + diff --git a/packages/ui/src/Panel.ts b/packages/ui/src/Panel.ts index ab2a748..8c4c110 100644 --- a/packages/ui/src/Panel.ts +++ b/packages/ui/src/Panel.ts @@ -1,6 +1,6 @@ -import { I18n, type SupportedLanguage } from '../i18n' -import { truncate } from '../utils' import { type Step, UIState } from './UIState' +import { I18n, type SupportedLanguage } from './i18n' +import { truncate } from './utils' import styles from './Panel.module.css' diff --git a/packages/ui/src/SimulatorMask.ts b/packages/ui/src/SimulatorMask.ts index c6a126a..26e0a4d 100644 --- a/packages/ui/src/SimulatorMask.ts +++ b/packages/ui/src/SimulatorMask.ts @@ -1,6 +1,6 @@ import { Motion } from 'ai-motion' -import { isPageDark } from '../utils/checkDarkMode' +import { isPageDark } from './checkDarkMode' import styles from './SimulatorMask.module.css' import cursorStyles from './cursor.module.css' diff --git a/packages/ui/src/env.d.ts b/packages/ui/src/env.d.ts new file mode 100644 index 0000000..10798a0 --- /dev/null +++ b/packages/ui/src/env.d.ts @@ -0,0 +1,6 @@ +/// + +declare module '*.module.css' { + const classes: Record + export default classes +} diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts new file mode 100644 index 0000000..5a1608f --- /dev/null +++ b/packages/ui/src/index.ts @@ -0,0 +1,4 @@ +export { Panel, type PanelConfig, type PanelUpdate } from './Panel' +export { SimulatorMask } from './SimulatorMask' +export { UIState, type Step, type AgentStatus } from './UIState' +export { I18n, type SupportedLanguage, type TranslationKey } from './i18n' diff --git a/packages/ui/src/utils.ts b/packages/ui/src/utils.ts new file mode 100644 index 0000000..fe81d23 --- /dev/null +++ b/packages/ui/src/utils.ts @@ -0,0 +1,6 @@ +export function truncate(text: string, maxLength: number): string { + if (text.length > maxLength) { + return text.substring(0, maxLength) + '...' + } + return text +} diff --git a/packages/ui/tsconfig.dts.json b/packages/ui/tsconfig.dts.json new file mode 100644 index 0000000..9f9b906 --- /dev/null +++ b/packages/ui/tsconfig.dts.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + // @workaround DTS bug + // dts do not work with monorepo path mapping + // disable path mapping for it + "paths": {} + } +} + diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json new file mode 100644 index 0000000..7c597c4 --- /dev/null +++ b/packages/ui/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo", + "noEmit": false, + "allowImportingTsExtensions": false, + "baseUrl": ".", + "outDir": "dist" + }, + "include": ["**/*.ts", "**/*.js"], + "exclude": ["dist", "node_modules"] +} + diff --git a/packages/ui/vite.config.js b/packages/ui/vite.config.js new file mode 100644 index 0000000..7828dae --- /dev/null +++ b/packages/ui/vite.config.js @@ -0,0 +1,41 @@ +// @ts-check +import chalk from 'chalk' +import { dirname, resolve } from 'path' +import dts from 'unplugin-dts/vite' +import { fileURLToPath } from 'url' +import { defineConfig } from 'vite' +import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' + +const __dirname = dirname(fileURLToPath(import.meta.url)) + +console.log(chalk.cyan(`📦 Building @page-agent/ui`)) + +export default defineConfig({ + clearScreen: false, + plugins: [ + dts({ tsconfigPath: './tsconfig.dts.json', bundleTypes: true }), + cssInjectedByJsPlugin({ relativeCSSInjection: true }), + ], + publicDir: false, + esbuild: { + keepNames: true, + }, + build: { + lib: { + entry: resolve(__dirname, 'src/index.ts'), + name: 'PageAgentUI', + fileName: 'page-agent-ui', + formats: ['es'], + }, + outDir: resolve(__dirname, 'dist', 'lib'), + rollupOptions: { + external: ['ai-motion'], + }, + minify: false, + sourcemap: true, + cssCodeSplit: true, + }, + define: { + 'process.env.NODE_ENV': '"production"', + }, +}) diff --git a/packages/website/vite.config.js b/packages/website/vite.config.js index 79a7ddc..a925e30 100644 --- a/packages/website/vite.config.js +++ b/packages/website/vite.config.js @@ -20,6 +20,7 @@ export default defineConfig({ // Monorepo packages (always bundle local code instead of npm versions) '@page-agent/page-controller': resolve(__dirname, '../page-controller/src/PageController.ts'), + '@page-agent/ui': resolve(__dirname, '../ui/src/index.ts'), 'page-agent': resolve(__dirname, '../page-agent/src/PageAgent.ts'), }, }, diff --git a/tsconfig.json b/tsconfig.json index ff8b649..96843c8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,7 @@ "extends": "./tsconfig.base.json", "references": [ { "path": "./packages/page-controller" }, + { "path": "./packages/ui" }, { "path": "./packages/page-agent" }, { "path": "./packages/website" } ],