Compare commits
31 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b6691b4732 | |||
| a557a85d28 | |||
| eeb5b6a5af | |||
| ad31e2b750 | |||
| e98d80b6a0 | |||
| 93b1e52376 | |||
| 66a85c0dd3 | |||
| 50ce56a4f6 | |||
| 5aeb40abac | |||
| 8c06cdc898 | |||
| dfde89aa70 | |||
| 49b3316a5f | |||
| c35f367b39 | |||
| 3459836a14 | |||
| b7b5b6db30 | |||
| 05d16313c7 | |||
| a3a96d85d5 | |||
| c89042f142 | |||
| 2e18bd862d | |||
| 0bc47a997d | |||
| bcc7dfea2d | |||
| ba242d3a1b | |||
| fe82b11285 | |||
| bdf79b7c10 | |||
| 24eefdef23 | |||
| 252f550c04 | |||
| 628c249d45 | |||
| 61d598142d | |||
| c0510b2235 | |||
| ca0005c825 | |||
| 2f92a9cb32 |
@@ -49,8 +49,8 @@ Fastest way to try PageAgent with our free Demo LLM:
|
||||
|
||||
| Mirrors | URL |
|
||||
| ------- | ---------------------------------------------------------------------------------- |
|
||||
| Global | https://cdn.jsdelivr.net/npm/page-agent@1.5.9/dist/iife/page-agent.demo.js |
|
||||
| China | https://registry.npmmirror.com/page-agent/1.5.9/files/dist/iife/page-agent.demo.js |
|
||||
| Global | https://cdn.jsdelivr.net/npm/page-agent@1.6.0/dist/iife/page-agent.demo.js |
|
||||
| China | https://registry.npmmirror.com/page-agent/1.6.0/files/dist/iife/page-agent.demo.js |
|
||||
|
||||
### NPM Installation
|
||||
|
||||
|
||||
@@ -153,42 +153,6 @@ PageAgent is now ready for production use. The API is stable and breaking change
|
||||
- **Ask User Tool** - Agent can ask users for clarification
|
||||
- **i18n Support** - English and Chinese localization
|
||||
|
||||
### Configuration
|
||||
|
||||
```typescript
|
||||
// Version 1.0.0
|
||||
interface PageAgentConfig {
|
||||
// LLM Configuration (required)
|
||||
baseURL: string
|
||||
apiKey: string
|
||||
model: string
|
||||
temperature?: number
|
||||
maxRetries?: number
|
||||
customFetch?: typeof fetch
|
||||
|
||||
// Agent Configuration
|
||||
language?: 'en-US' | 'zh-CN'
|
||||
maxSteps?: number // default: 20
|
||||
customTools?: Record<string, PageAgentTool> // experimental
|
||||
instructions?: InstructionsConfig
|
||||
transformPageContent?: (content: string) => string | Promise<string>
|
||||
experimentalScriptExecutionTool?: boolean // default: false
|
||||
|
||||
// Lifecycle Hooks (experimental)
|
||||
onBeforeTask?: (agent, result) => void
|
||||
onAfterTask?: (agent, result) => void
|
||||
onBeforeStep?: (agent, stepCount) => void
|
||||
onAfterStep?: (agent, history) => void
|
||||
onDispose?: (agent, reason?) => void
|
||||
|
||||
// Page Controller Configuration
|
||||
enableMask?: boolean // default: true
|
||||
viewportExpansion?: number
|
||||
interactiveBlacklist?: Element[]
|
||||
interactiveWhitelist?: Element[]
|
||||
}
|
||||
```
|
||||
|
||||
### Packages
|
||||
|
||||
| Package | Description |
|
||||
|
||||
+2
-2
@@ -49,8 +49,8 @@
|
||||
|
||||
| Mirrors | URL |
|
||||
| ------- | ---------------------------------------------------------------------------------- |
|
||||
| Global | https://cdn.jsdelivr.net/npm/page-agent@1.5.9/dist/iife/page-agent.demo.js |
|
||||
| China | https://registry.npmmirror.com/page-agent/1.5.9/files/dist/iife/page-agent.demo.js |
|
||||
| Global | https://cdn.jsdelivr.net/npm/page-agent@1.6.0/dist/iife/page-agent.demo.js |
|
||||
| China | https://registry.npmmirror.com/page-agent/1.6.0/files/dist/iife/page-agent.demo.js |
|
||||
|
||||
### NPM 安装
|
||||
|
||||
|
||||
Generated
+20
-21
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "root",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "root",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"packages/page-controller",
|
||||
@@ -11799,11 +11799,11 @@
|
||||
},
|
||||
"packages/core": {
|
||||
"name": "@page-agent/core",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@page-agent/llms": "1.5.9",
|
||||
"@page-agent/page-controller": "1.5.9",
|
||||
"@page-agent/llms": "1.6.0",
|
||||
"@page-agent/page-controller": "1.6.0",
|
||||
"chalk": "^5.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -11815,13 +11815,13 @@
|
||||
},
|
||||
"packages/extension": {
|
||||
"name": "@page-agent/ext",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@page-agent/core": "1.5.9",
|
||||
"@page-agent/llms": "1.5.9",
|
||||
"@page-agent/page-controller": "1.5.9",
|
||||
"@page-agent/ui": "1.5.9",
|
||||
"@page-agent/core": "1.6.0",
|
||||
"@page-agent/llms": "1.6.0",
|
||||
"@page-agent/page-controller": "1.6.0",
|
||||
"@page-agent/ui": "1.6.0",
|
||||
"ai-motion": "^0.4.8",
|
||||
"chalk": "^5.6.2"
|
||||
},
|
||||
@@ -11832,7 +11832,6 @@
|
||||
"@radix-ui/react-separator": "^1.1.8",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-switch": "^1.2.6",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@types/chrome": "^0.1.37",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.1",
|
||||
@@ -11859,7 +11858,7 @@
|
||||
},
|
||||
"packages/llms": {
|
||||
"name": "@page-agent/llms",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"chalk": "^5.6.2"
|
||||
@@ -11873,7 +11872,7 @@
|
||||
},
|
||||
"packages/mcp": {
|
||||
"name": "@page-agent/mcp",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@modelcontextprotocol/sdk": "^1.27.1",
|
||||
@@ -11888,13 +11887,13 @@
|
||||
}
|
||||
},
|
||||
"packages/page-agent": {
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@page-agent/core": "1.5.9",
|
||||
"@page-agent/llms": "1.5.9",
|
||||
"@page-agent/page-controller": "1.5.9",
|
||||
"@page-agent/ui": "1.5.9",
|
||||
"@page-agent/core": "1.6.0",
|
||||
"@page-agent/llms": "1.6.0",
|
||||
"@page-agent/page-controller": "1.6.0",
|
||||
"@page-agent/ui": "1.6.0",
|
||||
"chalk": "^5.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -11906,7 +11905,7 @@
|
||||
},
|
||||
"packages/page-controller": {
|
||||
"name": "@page-agent/page-controller",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ai-motion": "^0.4.8"
|
||||
@@ -11914,12 +11913,12 @@
|
||||
},
|
||||
"packages/ui": {
|
||||
"name": "@page-agent/ui",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"license": "MIT"
|
||||
},
|
||||
"packages/website": {
|
||||
"name": "@page-agent/website",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"devDependencies": {
|
||||
"@radix-ui/react-icons": "^1.3.2",
|
||||
"@radix-ui/react-separator": "^1.1.8",
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "root",
|
||||
"private": true,
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"type": "module",
|
||||
"workspaces": [
|
||||
"packages/page-controller",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@page-agent/core",
|
||||
"private": false,
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"type": "module",
|
||||
"main": "./dist/esm/page-agent-core.js",
|
||||
"module": "./dist/esm/page-agent-core.js",
|
||||
@@ -44,8 +44,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"chalk": "^5.6.2",
|
||||
"@page-agent/llms": "1.5.9",
|
||||
"@page-agent/page-controller": "1.5.9"
|
||||
"@page-agent/llms": "1.6.0",
|
||||
"@page-agent/page-controller": "1.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"zod": "^3.25.0 || ^4.0.0"
|
||||
|
||||
@@ -115,8 +115,8 @@ import type {
|
||||
|
||||
export interface ExecuteConfig {
|
||||
baseURL: string
|
||||
apiKey: string
|
||||
model: string
|
||||
apiKey?: string
|
||||
|
||||
// Include the initial tab where page JS starts. Default: true.
|
||||
includeInitialTab?: boolean
|
||||
@@ -205,8 +205,8 @@ import type {
|
||||
|
||||
interface ExecuteConfig {
|
||||
baseURL: string
|
||||
apiKey: string
|
||||
model: string
|
||||
apiKey?: string
|
||||
includeInitialTab?: boolean
|
||||
onStatusChange?: (status: AgentStatus) => void
|
||||
onActivity?: (activity: AgentActivity) => void
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@page-agent/ext",
|
||||
"private": true,
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "wxt",
|
||||
@@ -16,7 +16,6 @@
|
||||
"@radix-ui/react-separator": "^1.1.8",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-switch": "^1.2.6",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@types/chrome": "^0.1.37",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.1",
|
||||
@@ -38,10 +37,10 @@
|
||||
"wxt": "^0.20.19"
|
||||
},
|
||||
"dependencies": {
|
||||
"@page-agent/core": "1.5.9",
|
||||
"@page-agent/llms": "1.5.9",
|
||||
"@page-agent/page-controller": "1.5.9",
|
||||
"@page-agent/ui": "1.5.9",
|
||||
"@page-agent/core": "1.6.0",
|
||||
"@page-agent/llms": "1.6.0",
|
||||
"@page-agent/page-controller": "1.6.0",
|
||||
"@page-agent/ui": "1.6.0",
|
||||
"ai-motion": "^0.4.8",
|
||||
"chalk": "^5.6.2"
|
||||
},
|
||||
|
||||
@@ -75,6 +75,7 @@ export class MultiPageAgent extends PageAgentCore {
|
||||
},
|
||||
|
||||
onBeforeStep: async (agent) => {
|
||||
if (!tabsController.currentTabId) return
|
||||
// make sure the current tab is loaded before the step starts
|
||||
await tabsController.waitUntilTabLoaded(tabsController.currentTabId!)
|
||||
},
|
||||
|
||||
@@ -58,8 +58,6 @@ export class RemotePageController {
|
||||
}
|
||||
|
||||
async getBrowserState(): Promise<BrowserState> {
|
||||
if (!this.currentTabId) throw new Error('tabsController not initialized.')
|
||||
|
||||
let browserState = {} as BrowserState
|
||||
debug('getBrowserState', this.currentTabId)
|
||||
|
||||
@@ -178,7 +176,7 @@ interface DomActionReturn {
|
||||
/**
|
||||
* Check if a URL can run content scripts.
|
||||
*/
|
||||
function isContentScriptAllowed(url: string | undefined): boolean {
|
||||
export function isContentScriptAllowed(url: string | undefined): boolean {
|
||||
if (!url) return false
|
||||
|
||||
const restrictedPatterns = [
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { isContentScriptAllowed } from './RemotePageController'
|
||||
|
||||
const PREFIX = '[TabsController]'
|
||||
|
||||
function debug(...messages: any[]) {
|
||||
@@ -49,23 +51,25 @@ export class TabsController extends EventTarget {
|
||||
}
|
||||
|
||||
if (includeInitialTab) {
|
||||
this.currentTabId = this.initialTabId
|
||||
|
||||
const info = await sendMessage({
|
||||
type: 'TAB_CONTROL',
|
||||
action: 'get_tab_info',
|
||||
payload: { tabId: this.initialTabId },
|
||||
})
|
||||
|
||||
this.tabs.push({
|
||||
id: result.tabId,
|
||||
isInitial: true,
|
||||
url: info.url,
|
||||
title: info.title,
|
||||
status: info.status,
|
||||
})
|
||||
if (isContentScriptAllowed(info.url)) {
|
||||
this.currentTabId = this.initialTabId
|
||||
|
||||
await this.createTabGroup([this.initialTabId])
|
||||
this.tabs.push({
|
||||
id: result.tabId,
|
||||
isInitial: true,
|
||||
url: info.url,
|
||||
title: info.title,
|
||||
status: info.status,
|
||||
})
|
||||
|
||||
await this.createTabGroup([this.initialTabId])
|
||||
}
|
||||
}
|
||||
|
||||
await this.updateCurrentTabId(this.currentTabId)
|
||||
|
||||
@@ -3,12 +3,12 @@ import type { LLMConfig } from '@page-agent/llms'
|
||||
// Demo LLM for testing
|
||||
export const DEMO_MODEL = 'qwen3.5-plus'
|
||||
export const DEMO_BASE_URL = 'https://page-ag-testing-ohftxirgbn.cn-shanghai.fcapp.run'
|
||||
export const DEMO_API_KEY = 'NA'
|
||||
// export const DEMO_API_KEY = 'NA'
|
||||
|
||||
export const DEMO_CONFIG: LLMConfig = {
|
||||
apiKey: DEMO_API_KEY,
|
||||
baseURL: DEMO_BASE_URL,
|
||||
model: DEMO_MODEL,
|
||||
// apiKey: DEMO_API_KEY,
|
||||
}
|
||||
|
||||
/** Legacy testing endpoints that should be auto-migrated to DEMO_BASE_URL */
|
||||
|
||||
@@ -21,6 +21,7 @@ export interface AdvancedConfig {
|
||||
maxSteps?: number
|
||||
systemInstruction?: string
|
||||
experimentalLlmsTxt?: boolean
|
||||
disableNamedToolChoice?: boolean
|
||||
}
|
||||
|
||||
export interface ExtConfig extends LLMConfig, AdvancedConfig {
|
||||
@@ -124,6 +125,7 @@ export function useAgent(): UseAgentResult {
|
||||
maxSteps,
|
||||
systemInstruction,
|
||||
experimentalLlmsTxt,
|
||||
disableNamedToolChoice,
|
||||
...llmConfig
|
||||
}: ExtConfig) => {
|
||||
await chrome.storage.local.set({ llmConfig })
|
||||
@@ -132,7 +134,12 @@ export function useAgent(): UseAgentResult {
|
||||
} else {
|
||||
await chrome.storage.local.remove('language')
|
||||
}
|
||||
const advancedConfig: AdvancedConfig = { maxSteps, systemInstruction, experimentalLlmsTxt }
|
||||
const advancedConfig: AdvancedConfig = {
|
||||
maxSteps,
|
||||
systemInstruction,
|
||||
experimentalLlmsTxt,
|
||||
disableNamedToolChoice,
|
||||
}
|
||||
await chrome.storage.local.set({ advancedConfig })
|
||||
setConfig({ ...llmConfig, ...advancedConfig, language })
|
||||
},
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
import {
|
||||
ChevronDown,
|
||||
Copy,
|
||||
CornerUpLeft,
|
||||
ExternalLink,
|
||||
Eye,
|
||||
EyeOff,
|
||||
FoldVertical,
|
||||
HatGlasses,
|
||||
Home,
|
||||
Loader2,
|
||||
Scale,
|
||||
UnfoldVertical,
|
||||
} from 'lucide-react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { siGithub } from 'simple-icons'
|
||||
|
||||
import { DEMO_API_KEY, DEMO_BASE_URL, DEMO_MODEL, isTestingEndpoint } from '@/agent/constants'
|
||||
import { DEMO_BASE_URL, DEMO_MODEL, isTestingEndpoint } from '@/agent/constants'
|
||||
import type { ExtConfig, LanguagePreference } from '@/agent/useAgent'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
@@ -25,15 +27,18 @@ interface ConfigPanelProps {
|
||||
}
|
||||
|
||||
export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
||||
const [apiKey, setApiKey] = useState(config?.apiKey || DEMO_API_KEY)
|
||||
const [baseURL, setBaseURL] = useState(config?.baseURL || DEMO_BASE_URL)
|
||||
const [model, setModel] = useState(config?.model || DEMO_MODEL)
|
||||
const [apiKey, setApiKey] = useState(config?.apiKey)
|
||||
const [language, setLanguage] = useState<LanguagePreference>(config?.language)
|
||||
const [maxSteps, setMaxSteps] = useState<number | undefined>(config?.maxSteps)
|
||||
const [systemInstruction, setSystemInstruction] = useState(config?.systemInstruction ?? '')
|
||||
const [experimentalLlmsTxt, setExperimentalLlmsTxt] = useState(
|
||||
config?.experimentalLlmsTxt ?? false
|
||||
)
|
||||
const [disableNamedToolChoice, setDisableNamedToolChoice] = useState(
|
||||
config?.disableNamedToolChoice ?? false
|
||||
)
|
||||
const [advancedOpen, setAdvancedOpen] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [userAuthToken, setUserAuthToken] = useState<string>('')
|
||||
@@ -42,13 +47,14 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
||||
const [showApiKey, setShowApiKey] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setApiKey(config?.apiKey || DEMO_API_KEY)
|
||||
setBaseURL(config?.baseURL || DEMO_BASE_URL)
|
||||
setModel(config?.model || DEMO_MODEL)
|
||||
setApiKey(config?.apiKey)
|
||||
setLanguage(config?.language)
|
||||
setMaxSteps(config?.maxSteps)
|
||||
setSystemInstruction(config?.systemInstruction ?? '')
|
||||
setExperimentalLlmsTxt(config?.experimentalLlmsTxt ?? false)
|
||||
setDisableNamedToolChoice(config?.disableNamedToolChoice ?? false)
|
||||
}, [config])
|
||||
|
||||
// Poll for user auth token every second until found
|
||||
@@ -94,6 +100,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
||||
maxSteps: maxSteps || undefined,
|
||||
systemInstruction: systemInstruction || undefined,
|
||||
experimentalLlmsTxt,
|
||||
disableNamedToolChoice,
|
||||
})
|
||||
} finally {
|
||||
setSaving(false)
|
||||
@@ -153,6 +160,16 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hub link */}
|
||||
<a
|
||||
href="/hub.html"
|
||||
target="_blank"
|
||||
className="flex items-center justify-between p-3 rounded-md border bg-muted/50 text-xs font-medium text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors"
|
||||
>
|
||||
Manage Page Agent Hub
|
||||
<ExternalLink className="size-3" />
|
||||
</a>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-xs text-muted-foreground">Base URL</label>
|
||||
<Input
|
||||
@@ -167,7 +184,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
||||
{isTestingEndpoint(baseURL) && (
|
||||
<div className="p-2.5 rounded-md border border-amber-500/30 bg-amber-500/5 text-[11px] text-muted-foreground leading-relaxed">
|
||||
<Scale className="size-3 inline-block mr-1 -mt-0.5 text-amber-600" />
|
||||
You are using the free testing API. By using this service you agree to the{' '}
|
||||
You are using our testing API. By using this you agree to the{' '}
|
||||
<a
|
||||
href="https://github.com/alibaba/page-agent/blob/main/docs/terms-and-privacy.md"
|
||||
target="_blank"
|
||||
@@ -176,14 +193,13 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
||||
>
|
||||
Terms of Use & Privacy Policy
|
||||
</a>
|
||||
. No sensitive data. No guaranteed availability.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-xs text-muted-foreground">Model</label>
|
||||
<Input
|
||||
placeholder="gpt-5.2"
|
||||
placeholder="gpt-5.1"
|
||||
value={model}
|
||||
onChange={(e) => setModel(e.target.value)}
|
||||
className="text-xs h-8"
|
||||
@@ -195,7 +211,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
||||
<div className="flex gap-2 items-center">
|
||||
<Input
|
||||
type={showApiKey ? 'text' : 'password'}
|
||||
placeholder="sk-..."
|
||||
// placeholder="sk-..."
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
className="text-xs h-8"
|
||||
@@ -212,7 +228,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-xs text-muted-foreground">Language</label>
|
||||
<label className="text-xs text-muted-foreground">Response Language</label>
|
||||
<select
|
||||
value={language ?? ''}
|
||||
onChange={(e) => setLanguage((e.target.value || undefined) as LanguagePreference)}
|
||||
@@ -231,10 +247,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
||||
className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground cursor-pointer mt-1 font-bold"
|
||||
>
|
||||
Advanced
|
||||
<ChevronDown
|
||||
className="size-3 transition-transform"
|
||||
style={{ transform: advancedOpen ? 'rotate(0deg)' : 'rotate(90deg)' }}
|
||||
/>
|
||||
{advancedOpen ? <FoldVertical className="size-3" /> : <UnfoldVertical className="size-3" />}
|
||||
</button>
|
||||
|
||||
{advancedOpen && (
|
||||
@@ -263,6 +276,11 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<span className="text-xs text-muted-foreground">Disable named tool_choice</span>
|
||||
<Switch checked={disableNamedToolChoice} onCheckedChange={setDisableNamedToolChoice} />
|
||||
</label>
|
||||
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<span className="text-xs text-muted-foreground">Experimental llms.txt support</span>
|
||||
<Switch checked={experimentalLlmsTxt} onCheckedChange={setExperimentalLlmsTxt} />
|
||||
|
||||
@@ -1,12 +1,20 @@
|
||||
import { ArrowLeft } from 'lucide-react'
|
||||
import { ArrowLeft, RotateCcw, Trash2 } from 'lucide-react'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { type SessionRecord, getSession } from '@/lib/db'
|
||||
import { type SessionRecord, deleteSession, getSession } from '@/lib/db'
|
||||
|
||||
import { EventCard } from './cards'
|
||||
|
||||
export function HistoryDetail({ sessionId, onBack }: { sessionId: string; onBack: () => void }) {
|
||||
export function HistoryDetail({
|
||||
sessionId,
|
||||
onBack,
|
||||
onRerun,
|
||||
}: {
|
||||
sessionId: string
|
||||
onBack: () => void
|
||||
onRerun: (task: string) => void
|
||||
}) {
|
||||
const [session, setSession] = useState<SessionRecord | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
@@ -37,6 +45,27 @@ export function HistoryDetail({ sessionId, onBack }: { sessionId: string; onBack
|
||||
<div className="text-xs font-medium" title={session.task}>
|
||||
{session.task}
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRerun(session.task)}
|
||||
className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<RotateCcw className="size-3" />
|
||||
Run again
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
await deleteSession(sessionId)
|
||||
onBack()
|
||||
}}
|
||||
className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-destructive transition-colors cursor-pointer"
|
||||
>
|
||||
<Trash2 className="size-3" />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Events (read-only) */}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { ArrowLeft, CheckCircle, Trash2, XCircle } from 'lucide-react'
|
||||
import { ArrowDownToLine, ArrowLeft, CheckCircle, RotateCcw, Trash2, XCircle } from 'lucide-react'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { type SessionRecord, clearSessions, deleteSession, listSessions } from '@/lib/db'
|
||||
import { downloadHistoryExport } from '@/lib/history-export'
|
||||
|
||||
function timeAgo(ts: number): string {
|
||||
const seconds = Math.floor((Date.now() - ts) / 1000)
|
||||
@@ -18,9 +19,11 @@ function timeAgo(ts: number): string {
|
||||
export function HistoryList({
|
||||
onSelect,
|
||||
onBack,
|
||||
onRerun,
|
||||
}: {
|
||||
onSelect: (id: string) => void
|
||||
onBack: () => void
|
||||
onRerun: (task: string) => void
|
||||
}) {
|
||||
const [sessions, setSessions] = useState<SessionRecord[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
@@ -41,6 +44,16 @@ export function HistoryList({
|
||||
setSessions((prev) => prev.filter((s) => s.id !== id))
|
||||
}
|
||||
|
||||
const handleExport = (e: React.MouseEvent, session: SessionRecord) => {
|
||||
e.stopPropagation()
|
||||
downloadHistoryExport(session.task, session.createdAt, session.history)
|
||||
}
|
||||
|
||||
const handleRerun = (e: React.MouseEvent, task: string) => {
|
||||
e.stopPropagation()
|
||||
onRerun(task)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-background">
|
||||
{/* Header */}
|
||||
@@ -85,7 +98,6 @@ export function HistoryList({
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => onSelect(session.id)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && onSelect(session.id)}
|
||||
className="w-full text-left px-3 py-2.5 border-b hover:bg-muted/50 transition-colors cursor-pointer flex items-start gap-2 group"
|
||||
>
|
||||
{/* Status icon */}
|
||||
@@ -98,19 +110,41 @@ export function HistoryList({
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-medium truncate">{session.task}</p>
|
||||
<p className="text-[10px] text-muted-foreground mt-0.5">
|
||||
{timeAgo(session.createdAt)} · {session.history.length} steps
|
||||
</p>
|
||||
<div className="flex items-center mt-0.5">
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
{timeAgo(session.createdAt)} · {session.history.length} steps
|
||||
</p>
|
||||
<div className="flex items-center gap-0.5 ml-auto opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleRerun(e, session.task)}
|
||||
className="p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
|
||||
title="Run task again"
|
||||
aria-label={`Run history task again: ${session.task}`}
|
||||
>
|
||||
<RotateCcw className="size-3" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleExport(e, session)}
|
||||
className="p-1 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
|
||||
title="Export history JSON"
|
||||
aria-label={`Export history for ${session.task}`}
|
||||
>
|
||||
<ArrowDownToLine className="size-3" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleDelete(e, session.id)}
|
||||
className="p-0.5 text-muted-foreground hover:text-destructive transition-colors cursor-pointer"
|
||||
title="Delete history"
|
||||
aria-label={`Delete history for ${session.task}`}
|
||||
>
|
||||
<Trash2 className="size-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delete */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleDelete(e, session.id)}
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:text-destructive cursor-pointer shrink-0"
|
||||
>
|
||||
<Trash2 className="size-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -84,7 +84,7 @@ export function MotionOverlay({ active }: { active: boolean }) {
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="pointer-events-none absolute inset-0 z-10 opacity-60"
|
||||
className="pointer-events-none absolute inset-0 z-10 opacity-60 overflow-hidden"
|
||||
style={{ display: active ? undefined : 'none' }}
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -8,7 +8,7 @@ function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimi
|
||||
<SwitchPrimitive.Root
|
||||
data-slot="switch"
|
||||
className={cn(
|
||||
'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { Plug, PlugZap, Square, Unplug } from 'lucide-react'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { FoldVertical, Plug, PlugZap, Square, UnfoldVertical, Unplug } from 'lucide-react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
|
||||
import { useAgent } from '@/agent/useAgent'
|
||||
import { ActivityCard, EventCard } from '@/components/cards'
|
||||
import { Logo, MotionOverlay, StatusDot } from '@/components/misc'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
|
||||
import { useHubWs } from './hub-ws'
|
||||
|
||||
@@ -25,33 +26,72 @@ export default function App() {
|
||||
const wsLabel = {
|
||||
connected: 'Connected',
|
||||
connecting: 'Connecting…',
|
||||
disconnected: new URLSearchParams(location.search).get('ws') ? 'Disconnected' : 'Standalone',
|
||||
disconnected: new URLSearchParams(location.search).get('ws') ? 'Disconnected' : 'No connection',
|
||||
}[wsState]
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-background">
|
||||
<MotionOverlay active={isRunning} />
|
||||
|
||||
{/* Left — Protocol docs */}
|
||||
<aside className="w-80 shrink-0 border-r flex flex-col bg-muted/20">
|
||||
<div className="flex items-center gap-2 px-5 py-4 border-b">
|
||||
<a
|
||||
href="https://alibaba.github.io/page-agent/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 px-5 h-12 border-b hover:bg-muted/30 transition-colors"
|
||||
>
|
||||
<Logo className="size-5" />
|
||||
<span className="text-sm font-semibold tracking-tight">Page Agent Hub</span>
|
||||
<span className="text-[9px] font-medium uppercase tracking-wider text-amber-600 bg-amber-500/10 border border-amber-500/30 rounded px-1.5 py-0.5">
|
||||
Beta
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-5 py-4 space-y-6">
|
||||
<div className="text-xs text-muted-foreground leading-relaxed space-y-2">
|
||||
<p>
|
||||
Page Agent Hub lets local apps (e.g. MCP servers) control the Page Agent extension via
|
||||
WebSocket.
|
||||
</p>
|
||||
<p>
|
||||
Check out the official{' '}
|
||||
<a
|
||||
href="https://github.com/alibaba/page-agent/tree/main/packages/mcp"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline hover:text-foreground"
|
||||
>
|
||||
MCP server package
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<HubConfig />
|
||||
|
||||
<ProtocolDocsCollapsible />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-5 py-4">
|
||||
<ProtocolDocs />
|
||||
</div>
|
||||
|
||||
<div className="border-t px-5 py-3 text-[11px] text-muted-foreground/60">
|
||||
Connect via <code className="text-[10px]">hub.html?ws=PORT</code>
|
||||
<div className="border-t px-5 py-3 text-[10px] text-muted-foreground/60 flex items-center justify-between">
|
||||
<span className="font-mono">v{__VERSION__}</span>
|
||||
<span>
|
||||
Built with ♥️ by{' '}
|
||||
<a
|
||||
href="https://github.com/gaomeng1900"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline hover:text-foreground"
|
||||
>
|
||||
@Simon
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Right — Live session */}
|
||||
<main className="flex-1 flex flex-col min-w-0">
|
||||
{/* Header bar */}
|
||||
<header className="flex items-center justify-between border-b px-5 py-3">
|
||||
<main className="flex-1 flex flex-col min-w-0 relative">
|
||||
<MotionOverlay active={isRunning} />
|
||||
|
||||
<header className="flex items-center justify-between border-b px-5 h-12">
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<WsIcon className="size-3.5" />
|
||||
<span>{wsLabel}</span>
|
||||
@@ -104,49 +144,108 @@ export default function App() {
|
||||
)
|
||||
}
|
||||
|
||||
function ProtocolDocs() {
|
||||
function HubConfig() {
|
||||
const [allowAll, setAllowAll] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
chrome.storage.local.get('allowAllHubConnection').then((r) => {
|
||||
setAllowAll(r.allowAllHubConnection === true)
|
||||
})
|
||||
}, [])
|
||||
|
||||
const toggle = (checked: boolean) => {
|
||||
setAllowAll(checked)
|
||||
chrome.storage.local.set({ allowAllHubConnection: checked })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-5 text-xs text-muted-foreground">
|
||||
<section>
|
||||
<h3 className="text-[11px] font-semibold text-foreground/80 uppercase tracking-wider mb-2">
|
||||
Caller → Hub
|
||||
</h3>
|
||||
<pre className="bg-muted/50 rounded-md p-3 font-mono text-[10px] leading-relaxed whitespace-pre-wrap">
|
||||
{`{ type: "execute", task: string, config?: object }
|
||||
{ type: "stop" }`}
|
||||
</pre>
|
||||
</section>
|
||||
<div>
|
||||
<h3 className="text-[11px] font-semibold text-foreground/80 uppercase tracking-wider mb-2">
|
||||
Config
|
||||
</h3>
|
||||
<div className="group/hub relative">
|
||||
<label
|
||||
className={`flex items-center justify-between p-3 rounded-md border cursor-pointer text-xs ${allowAll ? 'bg-amber-500/10 border-amber-500/30 text-amber-600' : 'bg-muted/50 text-muted-foreground'}`}
|
||||
>
|
||||
Auto-approve connections
|
||||
<Switch
|
||||
checked={allowAll}
|
||||
onCheckedChange={toggle}
|
||||
className={allowAll ? 'data-[state=checked]:bg-amber-500' : ''}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<section>
|
||||
<h3 className="text-[11px] font-semibold text-foreground/80 uppercase tracking-wider mb-2">
|
||||
Hub → Caller
|
||||
</h3>
|
||||
<pre className="bg-muted/50 rounded-md p-3 font-mono text-[10px] leading-relaxed whitespace-pre-wrap">
|
||||
{`{ type: "ready" }
|
||||
{ type: "result", success: boolean, data: string }
|
||||
{ type: "error", message: string }`}
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-[11px] font-semibold text-foreground/80 uppercase tracking-wider mb-2">
|
||||
Flow
|
||||
</h3>
|
||||
<ol className="list-decimal list-inside space-y-1 text-[11px] leading-relaxed">
|
||||
<li>Hub opens WS to caller's server</li>
|
||||
<li>
|
||||
Sends <code className="text-[10px]">ready</code>
|
||||
</li>
|
||||
<li>
|
||||
Caller sends <code className="text-[10px]">execute</code> with task
|
||||
</li>
|
||||
<li>Hub runs agent, streams events</li>
|
||||
<li>
|
||||
Hub sends <code className="text-[10px]">result</code> or{' '}
|
||||
<code className="text-[10px]">error</code>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
{/* hide with invisible absolute opacity-0*/}
|
||||
<div className="group-hover/hub:visible group-hover/hub:opacity-100 transition-opacity duration-150 left-0 right-0 top-full z-10 pt-2">
|
||||
<div className="relative p-2.5 rounded-md border border-border bg-background/60 backdrop-blur-md shadow-2xl text-muted-foreground text-xs leading-relaxed">
|
||||
<div className="absolute -top-1.5 left-5 size-3 rotate-45 rounded-[1px] border-l border-t border-border bg-background/60 backdrop-blur-md" />
|
||||
By default, each connection requires your approval before running tasks. <br />
|
||||
Enable this to skip per-session approval.
|
||||
<br />
|
||||
<span className="font-semibold">* Use with caution!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ProtocolDocsCollapsible() {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center gap-1 text-[11px] font-semibold text-foreground/80 uppercase tracking-wider cursor-pointer"
|
||||
>
|
||||
Docs
|
||||
{open ? <FoldVertical className="size-3" /> : <UnfoldVertical className="size-3" />}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="mt-3 space-y-4 text-xs text-muted-foreground">
|
||||
<p className="text-[10px]">
|
||||
Connect via <code className="text-[10px]">hub.html?ws=PORT</code>
|
||||
</p>
|
||||
|
||||
<section>
|
||||
<h4 className="text-[11px] font-medium text-foreground/60 mb-1.5">Flow</h4>
|
||||
<ol className="list-decimal list-inside space-y-1 text-[11px] leading-relaxed">
|
||||
<li>Hub opens WS to caller's server</li>
|
||||
<li>
|
||||
Sends <code className="text-[10px]">ready</code>
|
||||
</li>
|
||||
<li>
|
||||
Caller sends <code className="text-[10px]">execute</code> with task
|
||||
</li>
|
||||
<li>Hub runs agent, streams events</li>
|
||||
<li>
|
||||
Hub sends <code className="text-[10px]">result</code> or{' '}
|
||||
<code className="text-[10px]">error</code>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4 className="text-[11px] font-medium text-foreground/60 mb-1.5">Caller → Hub</h4>
|
||||
<pre className="bg-muted/50 rounded-md p-3 font-mono text-[10px] leading-relaxed whitespace-pre-wrap">
|
||||
{`{ type: "execute", task: string, config?: object }
|
||||
{ type: "stop" }`}
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4 className="text-[11px] font-medium text-foreground/60 mb-1.5">Hub → Caller</h4>
|
||||
<pre className="bg-muted/50 rounded-md p-3 font-mono text-[10px] leading-relaxed whitespace-pre-wrap">
|
||||
{`{ type: "ready" }
|
||||
{ type: "result", success: boolean, data: string }
|
||||
{ type: "error", message: string }`}
|
||||
</pre>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -70,6 +70,7 @@ export class HubWs {
|
||||
#ws: WebSocket | null = null
|
||||
#state: HubWsState = 'disconnected'
|
||||
#busy = false
|
||||
#approved = false
|
||||
#handlers: HubWsHandlers
|
||||
#port: number
|
||||
#onStateChange: (state: HubWsState) => void
|
||||
@@ -103,6 +104,7 @@ export class HubWs {
|
||||
ws.addEventListener('close', () => {
|
||||
this.#ws = null
|
||||
this.#busy = false
|
||||
this.#approved = false
|
||||
this.#setState('disconnected')
|
||||
})
|
||||
|
||||
@@ -115,6 +117,7 @@ export class HubWs {
|
||||
this.#ws?.close()
|
||||
this.#ws = null
|
||||
this.#busy = false
|
||||
this.#approved = false
|
||||
this.#setState('disconnected')
|
||||
}
|
||||
|
||||
@@ -130,7 +133,7 @@ export class HubWs {
|
||||
}
|
||||
}
|
||||
|
||||
#handleMessage(raw: string) {
|
||||
async #handleMessage(raw: string) {
|
||||
let msg: InboundMessage
|
||||
try {
|
||||
msg = JSON.parse(raw)
|
||||
@@ -138,6 +141,11 @@ export class HubWs {
|
||||
return
|
||||
}
|
||||
|
||||
if (!(await this.#checkApproval())) {
|
||||
this.#send({ type: 'error', message: 'User denied the connection request.' })
|
||||
return
|
||||
}
|
||||
|
||||
switch (msg.type) {
|
||||
case 'execute':
|
||||
this.#handleExecute(msg)
|
||||
@@ -148,6 +156,22 @@ export class HubWs {
|
||||
}
|
||||
}
|
||||
|
||||
async #checkApproval(): Promise<boolean> {
|
||||
if (this.#approved) return true
|
||||
|
||||
const { allowAllHubConnection } = await chrome.storage.local.get('allowAllHubConnection')
|
||||
if (allowAllHubConnection === true) {
|
||||
this.#approved = true
|
||||
return true
|
||||
}
|
||||
|
||||
const ok = window.confirm(
|
||||
'An external application is requesting to control your browser via Page Agent Ext.\nAllow this session?'
|
||||
)
|
||||
if (ok) this.#approved = true
|
||||
return ok
|
||||
}
|
||||
|
||||
async #handleExecute(msg: ExecuteMessage) {
|
||||
if (this.#busy) {
|
||||
this.#send({ type: 'error', message: 'Hub is busy with another task' })
|
||||
|
||||
@@ -4,8 +4,8 @@ export type Execute = (task: string, config: ExecuteConfig) => Promise<Execution
|
||||
|
||||
export interface ExecuteConfig {
|
||||
baseURL: string
|
||||
apiKey: string
|
||||
model: string
|
||||
apiKey?: string
|
||||
|
||||
/**
|
||||
* Whether to include the initial tab (that holds this main world script) in the task.
|
||||
@@ -30,7 +30,6 @@ export default defineUnlistedScript(() => {
|
||||
if (task.trim().length === 0) throw new Error('Task cannot be empty')
|
||||
if (!config) throw new Error('Config is required')
|
||||
if (!config.baseURL) throw new Error('Config must have a baseURL')
|
||||
if (!config.apiKey) throw new Error('Config must have an apiKey')
|
||||
if (!config.model) throw new Error('Config must have a model')
|
||||
|
||||
const id = getId()
|
||||
@@ -85,8 +84,8 @@ export default defineUnlistedScript(() => {
|
||||
task,
|
||||
config: {
|
||||
baseURL: config.baseURL,
|
||||
apiKey: config.apiKey,
|
||||
model: config.model,
|
||||
apiKey: config.apiKey,
|
||||
includeInitialTab: config.includeInitialTab,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -56,19 +56,27 @@ export default function App() {
|
||||
}
|
||||
}, [history, activity])
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
(e?: React.SyntheticEvent) => {
|
||||
e?.preventDefault()
|
||||
if (!inputValue.trim() || status === 'running') return
|
||||
const runTask = useCallback(
|
||||
(task: string) => {
|
||||
const normalizedTask = task.trim()
|
||||
if (!normalizedTask || status === 'running') return
|
||||
|
||||
const taskToExecute = inputValue.trim()
|
||||
setInputValue('')
|
||||
setView({ name: 'chat' })
|
||||
|
||||
execute(taskToExecute).catch((error) => {
|
||||
execute(normalizedTask).catch((error) => {
|
||||
console.error('[SidePanel] Failed to execute task:', error)
|
||||
})
|
||||
},
|
||||
[inputValue, status, execute]
|
||||
[execute, status]
|
||||
)
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
(e?: React.SyntheticEvent) => {
|
||||
e?.preventDefault()
|
||||
runTask(inputValue)
|
||||
},
|
||||
[inputValue, runTask]
|
||||
)
|
||||
|
||||
const handleStop = useCallback(() => {
|
||||
@@ -103,12 +111,19 @@ export default function App() {
|
||||
<HistoryList
|
||||
onSelect={(id) => setView({ name: 'history-detail', sessionId: id })}
|
||||
onBack={() => setView({ name: 'chat' })}
|
||||
onRerun={runTask}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (view.name === 'history-detail') {
|
||||
return <HistoryDetail sessionId={view.sessionId} onBack={() => setView({ name: 'history' })} />
|
||||
return (
|
||||
<HistoryDetail
|
||||
sessionId={view.sessionId}
|
||||
onBack={() => setView({ name: 'history' })}
|
||||
onRerun={runTask}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Chat view ---
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import type { HistoricalEvent } from '@page-agent/core'
|
||||
|
||||
const EXPORT_FILE_PREFIX = 'page-agent-history'
|
||||
const MAX_TASK_SLUG_LENGTH = 40
|
||||
|
||||
export function serializeHistoryExport(history: HistoricalEvent[]): string {
|
||||
return `${JSON.stringify(history, null, 2)}\n`
|
||||
}
|
||||
|
||||
export function buildHistoryExportFilename(task: string, createdAt: number): string {
|
||||
const taskSlug = sanitizeTaskForFilename(task)
|
||||
const timestamp = formatTimestampForFilename(createdAt)
|
||||
|
||||
return taskSlug
|
||||
? `${EXPORT_FILE_PREFIX}-${taskSlug}-${timestamp}.json`
|
||||
: `${EXPORT_FILE_PREFIX}-${timestamp}.json`
|
||||
}
|
||||
|
||||
export function downloadHistoryExport(
|
||||
task: string,
|
||||
createdAt: number,
|
||||
history: HistoricalEvent[]
|
||||
): void {
|
||||
const filename = buildHistoryExportFilename(task, createdAt)
|
||||
const content = serializeHistoryExport(history)
|
||||
const blob = new Blob([content], { type: 'application/json;charset=utf-8' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
|
||||
link.href = url
|
||||
link.download = filename
|
||||
link.click()
|
||||
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
function sanitizeTaskForFilename(task: string): string {
|
||||
return task
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '')
|
||||
.slice(0, MAX_TASK_SLUG_LENGTH)
|
||||
}
|
||||
|
||||
function formatTimestampForFilename(createdAt: number): string {
|
||||
const date = new Date(createdAt)
|
||||
const year = date.getFullYear()
|
||||
const month = pad(date.getMonth() + 1)
|
||||
const day = pad(date.getDate())
|
||||
const hours = pad(date.getHours())
|
||||
const minutes = pad(date.getMinutes())
|
||||
const seconds = pad(date.getSeconds())
|
||||
|
||||
return `${year}-${month}-${day}_${hours}-${minutes}-${seconds}`
|
||||
}
|
||||
|
||||
function pad(value: number): string {
|
||||
return value.toString().padStart(2, '0')
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@page-agent/llms",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"type": "module",
|
||||
"main": "./dist/lib/page-agent-llms.js",
|
||||
"module": "./dist/lib/page-agent-llms.js",
|
||||
|
||||
@@ -29,16 +29,19 @@ export class OpenAIClient implements LLMClient {
|
||||
const openaiTools = Object.entries(tools).map(([name, t]) => zodToOpenAITool(name, t))
|
||||
|
||||
// Build request body
|
||||
|
||||
let toolChoice: unknown = 'required'
|
||||
if (options?.toolChoiceName && !this.config.disableNamedToolChoice) {
|
||||
toolChoice = { type: 'function', function: { name: options.toolChoiceName } }
|
||||
}
|
||||
|
||||
const requestBody: Record<string, unknown> = {
|
||||
model: this.config.model,
|
||||
temperature: this.config.temperature,
|
||||
messages,
|
||||
tools: openaiTools,
|
||||
parallel_tool_calls: false,
|
||||
// Require tool call: specific tool if provided, otherwise any tool
|
||||
tool_choice: options?.toolChoiceName
|
||||
? { type: 'function', function: { name: options.toolChoiceName } }
|
||||
: 'required',
|
||||
tool_choice: toolChoice,
|
||||
}
|
||||
|
||||
modelPatch(requestBody)
|
||||
@@ -50,7 +53,7 @@ export class OpenAIClient implements LLMClient {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${this.config.apiKey}`,
|
||||
...(this.config.apiKey && { Authorization: `Bearer ${this.config.apiKey}` }),
|
||||
},
|
||||
body: JSON.stringify(requestBody),
|
||||
signal: abortSignal,
|
||||
|
||||
@@ -8,19 +8,20 @@ export type { InvokeOptions, InvokeResult, LLMClient, LLMConfig, Message, Tool }
|
||||
|
||||
export function parseLLMConfig(config: LLMConfig): Required<LLMConfig> {
|
||||
// Runtime validation as defensive programming (types already guarantee these)
|
||||
if (!config.baseURL || !config.apiKey || !config.model) {
|
||||
if (!config.baseURL || !config.model) {
|
||||
throw new Error(
|
||||
'[PageAgent] LLM configuration required. Please provide: baseURL, apiKey, model. ' +
|
||||
'[PageAgent] LLM configuration required. Please provide: baseURL, model. ' +
|
||||
'See: https://alibaba.github.io/page-agent/docs/features/models'
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
baseURL: config.baseURL,
|
||||
apiKey: config.apiKey,
|
||||
model: config.model,
|
||||
apiKey: config.apiKey || '',
|
||||
temperature: config.temperature ?? DEFAULT_TEMPERATURE,
|
||||
maxRetries: config.maxRetries ?? LLM_MAX_RETRIES,
|
||||
disableNamedToolChoice: config.disableNamedToolChoice ?? false,
|
||||
customFetch: (config.customFetch ?? fetch).bind(globalThis), // fetch will be illegal unless bound
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,12 +89,18 @@ export interface InvokeResult<TResult = unknown> {
|
||||
*/
|
||||
export interface LLMConfig {
|
||||
baseURL: string
|
||||
apiKey: string
|
||||
model: string
|
||||
apiKey?: string
|
||||
|
||||
temperature?: number
|
||||
maxRetries?: number
|
||||
|
||||
/**
|
||||
* remove the tool_choice field from the request.
|
||||
* @note fix "Invalid tool_choice type: 'object'" for some LLMs.
|
||||
*/
|
||||
disableNamedToolChoice?: boolean
|
||||
|
||||
/**
|
||||
* Custom fetch function for LLM API requests.
|
||||
* Use this to customize headers, credentials, proxy, etc.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@page-agent/mcp",
|
||||
"private": true,
|
||||
"version": "1.5.9",
|
||||
"private": false,
|
||||
"version": "1.6.0",
|
||||
"type": "module",
|
||||
"bin": {
|
||||
"page-agent-mcp": "src/index.js"
|
||||
|
||||
@@ -12,9 +12,9 @@ const port = parseInt(env.PORT || '38401')
|
||||
|
||||
/** @type {Record<string, string>} */
|
||||
const llmConfig = {}
|
||||
if (env.LLM_API_KEY) llmConfig.apiKey = env.LLM_API_KEY
|
||||
if (env.LLM_BASE_URL) llmConfig.baseURL = env.LLM_BASE_URL
|
||||
if (env.LLM_MODEL_NAME) llmConfig.model = env.LLM_MODEL_NAME
|
||||
if (env.LLM_API_KEY) llmConfig.apiKey = env.LLM_API_KEY
|
||||
|
||||
// --- Hub bridge (HTTP + WebSocket) ---
|
||||
|
||||
|
||||
+148
-40
@@ -1,9 +1,10 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Page Agent – Connecting</title>
|
||||
<link rel="icon" href="https://img.alicdn.com/imgextra/i1/O1CN01mRGret1QrKiu7CFJI_!!6000000002029-2-tps-64-64.png" />
|
||||
<title>Page Agent MCP Launcher</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -15,7 +16,7 @@
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
background: #0a0a0a;
|
||||
background: #09090b;
|
||||
color: #e5e5e5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -24,23 +25,37 @@
|
||||
}
|
||||
.card {
|
||||
text-align: center;
|
||||
max-width: 420px;
|
||||
max-width: 480px;
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
.logo {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 18px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.badge {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
color: #52525b;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
p {
|
||||
.sub {
|
||||
font-size: 0.875rem;
|
||||
color: #a3a3a3;
|
||||
line-height: 1.6;
|
||||
color: #a1a1aa;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid #333;
|
||||
border: 3px solid #27272a;
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
@@ -58,72 +73,165 @@
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.install {
|
||||
display: none;
|
||||
}
|
||||
.install.show {
|
||||
display: block;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
|
||||
.tips {
|
||||
margin-top: 1.75rem;
|
||||
text-align: left;
|
||||
background: #18181b;
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
.tips li {
|
||||
font-size: 0.8125rem;
|
||||
color: #a1a1aa;
|
||||
line-height: 1.7;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.tips li + li {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.store-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
margin-top: 1.5rem;
|
||||
padding: 0.625rem 1.5rem;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.btn:hover {
|
||||
.store-btn:hover {
|
||||
background: #1d4ed8;
|
||||
text-decoration: none;
|
||||
}
|
||||
.store-btn img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-top: 1.75rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.links a {
|
||||
color: #71717a;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.links a:hover {
|
||||
color: #a1a1aa;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<img
|
||||
class="logo"
|
||||
src="https://img.alicdn.com/imgextra/i3/O1CN01JPT4Fj1FJTfmHfNxO_!!6000000000466-49-tps-512-512.webp"
|
||||
alt="Page Agent"
|
||||
/>
|
||||
<div class="badge">Page Agent MCP Launcher</div>
|
||||
|
||||
<div id="connecting">
|
||||
<div class="spinner"></div>
|
||||
<h1>Connecting to Page Agent</h1>
|
||||
<p>Opening the hub in your browser...</p>
|
||||
<h1 data-i18n="connecting_title">Connecting to Page Agent</h1>
|
||||
<p class="sub" data-i18n="connecting_sub">Opening the hub in your browser…</p>
|
||||
</div>
|
||||
|
||||
<div id="install" class="install">
|
||||
<h1>Extension Not Found</h1>
|
||||
<p>The Page Agent browser extension is required.<br />Install it and try again.</p>
|
||||
<a class="btn" href="__STORE_URL__" target="_blank">Install Extension</a>
|
||||
<p style="margin-top: 1.5rem; font-size: 0.75rem">
|
||||
After installing, restart the MCP server or refresh this page.
|
||||
<h1 data-i18n="install_title">Extension Required</h1>
|
||||
<p class="sub" data-i18n="install_sub">
|
||||
Page Agent requires the latest browser extension to work.
|
||||
</p>
|
||||
|
||||
<a class="store-btn" href="__STORE_URL__" target="_blank">
|
||||
<img
|
||||
src="https://img.alicdn.com/imgextra/i3/O1CN01JpW0Vo1sR3FpiZKFM_!!6000000005762-55-tps-192-192.svg"
|
||||
alt=""
|
||||
/>
|
||||
<span data-i18n="install_btn">Install from Chrome Web Store</span>
|
||||
</a>
|
||||
|
||||
<ul class="tips">
|
||||
<li data-i18n="tip_outdated">
|
||||
If the extension is outdated, please update it to the latest version.
|
||||
</li>
|
||||
<li data-i18n="tip_other_browser">
|
||||
If the extension is not installed in this browser, open this page from the
|
||||
browser that has it installed.
|
||||
</li>
|
||||
<li data-i18n="tip_refresh">Refresh this page after installing or updating.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="links">
|
||||
<a href="https://alibaba.github.io/page-agent/docs/introduction/overview" target="_blank" data-i18n="link_docs">Docs</a>
|
||||
<a href="https://github.com/alibaba/page-agent/issues" target="_blank" data-i18n="link_issues">Report an Issue</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
;(function () {
|
||||
var EXT_ID = '__EXT_ID__'
|
||||
var wsPort = __WS_PORT__
|
||||
|
||||
function showInstall() {
|
||||
<script>
|
||||
{
|
||||
const EXT_ID = '__EXT_ID__'
|
||||
const wsPort = __WS_PORT__
|
||||
|
||||
const zh = {
|
||||
connecting_title: '正在连接 Page Agent',
|
||||
connecting_sub: '正在浏览器中打开 Hub…',
|
||||
install_title: '需要安装浏览器插件',
|
||||
install_sub: 'Page Agent 需要安装最新版浏览器插件才能运行。',
|
||||
install_btn: '从 Chrome 应用商店安装',
|
||||
tip_outdated: '如果插件版本过旧,请更新到最新版本。',
|
||||
tip_other_browser:
|
||||
'如果该浏览器中未安装插件,请从装有插件的浏览器打开此页面。',
|
||||
tip_refresh: '安装或更新后,请刷新此页面。',
|
||||
link_docs: '文档',
|
||||
link_issues: '问题反馈',
|
||||
}
|
||||
|
||||
if (/^zh\b/i.test(navigator.language)) {
|
||||
document.querySelectorAll('[data-i18n]').forEach((el) => {
|
||||
const key = el.getAttribute('data-i18n')
|
||||
if (zh[key]) el.textContent = zh[key]
|
||||
})
|
||||
}
|
||||
|
||||
const showInstall = () => {
|
||||
document.getElementById('connecting').style.display = 'none'
|
||||
document.getElementById('install').classList.add('show')
|
||||
}
|
||||
|
||||
try {
|
||||
if (typeof chrome === 'undefined' || !chrome.runtime || !chrome.runtime.sendMessage) {
|
||||
if (!globalThis.chrome?.runtime?.sendMessage) {
|
||||
showInstall()
|
||||
return
|
||||
}
|
||||
chrome.runtime.sendMessage(
|
||||
EXT_ID,
|
||||
{ type: 'OPEN_HUB', wsPort: wsPort },
|
||||
function (response) {
|
||||
if (chrome.runtime.lastError || !response || !response.ok) {
|
||||
showInstall()
|
||||
} else {
|
||||
chrome.runtime.sendMessage(
|
||||
EXT_ID,
|
||||
{ type: 'OPEN_HUB', wsPort },
|
||||
(response) => {
|
||||
if (chrome.runtime.lastError || !response?.ok) showInstall()
|
||||
}
|
||||
}
|
||||
)
|
||||
} catch (e) {
|
||||
)
|
||||
}
|
||||
} catch {
|
||||
showInstall()
|
||||
}
|
||||
})()
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "page-agent",
|
||||
"private": false,
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"type": "module",
|
||||
"main": "./dist/esm/page-agent.js",
|
||||
"module": "./dist/esm/page-agent.js",
|
||||
@@ -44,10 +44,10 @@
|
||||
"postpublish": "node -e \"['README.md','LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@page-agent/core": "1.5.9",
|
||||
"@page-agent/llms": "1.5.9",
|
||||
"@page-agent/page-controller": "1.5.9",
|
||||
"@page-agent/ui": "1.5.9",
|
||||
"@page-agent/core": "1.6.0",
|
||||
"@page-agent/llms": "1.6.0",
|
||||
"@page-agent/page-controller": "1.6.0",
|
||||
"@page-agent/ui": "1.6.0",
|
||||
"chalk": "^5.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@page-agent/page-controller",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"type": "module",
|
||||
"main": "./dist/lib/page-controller.js",
|
||||
"module": "./dist/lib/page-controller.js",
|
||||
|
||||
@@ -18,6 +18,7 @@ import * as dom from './dom'
|
||||
import type { FlatDomTree, InteractiveElementDomNode } from './dom/dom_tree/type'
|
||||
import { getPageInfo } from './dom/getPageInfo'
|
||||
import { patchReact } from './patches/react'
|
||||
import { isAnchorElement } from './utils'
|
||||
|
||||
/**
|
||||
* Configuration for PageController
|
||||
@@ -243,7 +244,7 @@ export class PageController extends EventTarget {
|
||||
await clickElement(element)
|
||||
|
||||
// Handle links that open in new tabs
|
||||
if (element instanceof HTMLAnchorElement && element.target === '_blank') {
|
||||
if (isAnchorElement(element) && element.target === '_blank') {
|
||||
return {
|
||||
success: true,
|
||||
message: `✅ Clicked element (${elemText ?? index}). ⚠️ Link opened in a new tab.`,
|
||||
|
||||
@@ -3,24 +3,15 @@
|
||||
* All rights reserved.
|
||||
*/
|
||||
import type { InteractiveElementDomNode } from './dom/dom_tree/type'
|
||||
|
||||
// ======= general utils =======
|
||||
|
||||
async function waitFor(seconds: number): Promise<void> {
|
||||
await new Promise((resolve) => setTimeout(resolve, seconds * 1000))
|
||||
}
|
||||
|
||||
// ======= dom utils =======
|
||||
|
||||
export async function movePointerToElement(element: HTMLElement) {
|
||||
const rect = element.getBoundingClientRect()
|
||||
const x = rect.left + rect.width / 2
|
||||
const y = rect.top + rect.height / 2
|
||||
|
||||
window.dispatchEvent(new CustomEvent('PageAgent::MovePointerTo', { detail: { x, y } }))
|
||||
|
||||
await waitFor(0.3)
|
||||
}
|
||||
import {
|
||||
getNativeValueSetter,
|
||||
isHTMLElement,
|
||||
isInputElement,
|
||||
isSelectElement,
|
||||
isTextAreaElement,
|
||||
movePointerToElement,
|
||||
waitFor,
|
||||
} from './utils'
|
||||
|
||||
/**
|
||||
* Get the HTMLElement by index from a selectorMap.
|
||||
@@ -39,7 +30,7 @@ export function getElementByIndex(
|
||||
throw new Error(`Element at index ${index} does not have a reference`)
|
||||
}
|
||||
|
||||
if (!(element instanceof HTMLElement)) {
|
||||
if (!isHTMLElement(element)) {
|
||||
throw new Error(`Element at index ${index} is not an HTMLElement`)
|
||||
}
|
||||
|
||||
@@ -54,6 +45,9 @@ function blurLastClickedElement() {
|
||||
lastClickedElement.dispatchEvent(
|
||||
new MouseEvent('mouseout', { bubbles: true, cancelable: true })
|
||||
)
|
||||
lastClickedElement.dispatchEvent(
|
||||
new MouseEvent('mouseleave', { bubbles: false, cancelable: true })
|
||||
)
|
||||
lastClickedElement = null
|
||||
}
|
||||
}
|
||||
@@ -65,9 +59,15 @@ export async function clickElement(element: HTMLElement) {
|
||||
blurLastClickedElement()
|
||||
|
||||
lastClickedElement = element
|
||||
|
||||
await scrollIntoViewIfNeeded(element)
|
||||
// Scroll the iframe element itself into view if needed
|
||||
const frame = element.ownerDocument.defaultView?.frameElement
|
||||
if (frame) await scrollIntoViewIfNeeded(frame)
|
||||
|
||||
await movePointerToElement(element)
|
||||
window.dispatchEvent(new CustomEvent('PageAgent::ClickPointer'))
|
||||
|
||||
await waitFor(0.1)
|
||||
|
||||
// hover it
|
||||
@@ -89,25 +89,9 @@ export async function clickElement(element: HTMLElement) {
|
||||
await waitFor(0.2) // Wait to ensure click event processing completes
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
|
||||
window.HTMLInputElement.prototype,
|
||||
'value'
|
||||
)!.set!
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||
const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(
|
||||
window.HTMLTextAreaElement.prototype,
|
||||
'value'
|
||||
)!.set!
|
||||
|
||||
export async function inputTextElement(element: HTMLElement, text: string) {
|
||||
const isContentEditable = element.isContentEditable
|
||||
if (
|
||||
!(element instanceof HTMLInputElement) &&
|
||||
!(element instanceof HTMLTextAreaElement) &&
|
||||
!isContentEditable
|
||||
) {
|
||||
if (!isInputElement(element) && !isTextAreaElement(element) && !isContentEditable) {
|
||||
throw new Error('Element is not an input, textarea, or contenteditable')
|
||||
}
|
||||
|
||||
@@ -119,9 +103,12 @@ export async function inputTextElement(element: HTMLElement, text: string) {
|
||||
// - Monaco/CodeMirror: Require direct JS instance access. No universal way to obtain.
|
||||
// - Draft.js: Not responsive to synthetic/execCommand/Range/DataTransfer. Unmaintained.
|
||||
//
|
||||
// Strategy: Try Plan A (synthetic events) first, then verify and fall back
|
||||
// to Plan B (execCommand) if the text wasn't actually inserted.
|
||||
//
|
||||
// Plan A: Dispatch synthetic events
|
||||
// Works: LinkedIn, React contenteditable, Quill.
|
||||
// Fails: Slate.js
|
||||
// Works: React contenteditable, Quill.
|
||||
// Fails: Slate.js, some contenteditable editors that ignore synthetic events.
|
||||
// Sequence: beforeinput -> mutation -> input -> change -> blur
|
||||
|
||||
// Dispatch beforeinput + mutation + input for clearing
|
||||
@@ -164,22 +151,37 @@ export async function inputTextElement(element: HTMLElement, text: string) {
|
||||
)
|
||||
}
|
||||
|
||||
// Verify Plan A worked by checking if the text was actually inserted
|
||||
const planASucceeded = element.innerText.trim() === text.trim()
|
||||
|
||||
if (!planASucceeded) {
|
||||
// Plan B: execCommand fallback (deprecated but widely supported)
|
||||
// Works: Quill, Slate.js, react contenteditable components.
|
||||
// This approach integrates with the browser's undo stack and is handled
|
||||
// natively by most rich-text editors.
|
||||
element.focus()
|
||||
|
||||
// Select all existing content and delete it
|
||||
const doc = element.ownerDocument
|
||||
const selection = (doc.defaultView || window).getSelection()
|
||||
const range = doc.createRange()
|
||||
range.selectNodeContents(element)
|
||||
selection?.removeAllRanges()
|
||||
selection?.addRange(range)
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
||||
doc.execCommand('delete', false)
|
||||
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
||||
doc.execCommand('insertText', false, text)
|
||||
}
|
||||
|
||||
// Dispatch change event (for good measure)
|
||||
element.dispatchEvent(new Event('change', { bubbles: true }))
|
||||
|
||||
// Trigger blur for validation
|
||||
element.blur()
|
||||
|
||||
// Plan B: execCommand (deprecated but works better for some editors)
|
||||
// Works: LinkedIn, Quill, Slate.js, react contenteditable components
|
||||
//
|
||||
// document.execCommand('selectAll')
|
||||
// document.execCommand('delete')
|
||||
// document.execCommand('insertText', false, text)
|
||||
} else if (element instanceof HTMLTextAreaElement) {
|
||||
nativeTextAreaValueSetter.call(element, text)
|
||||
} else {
|
||||
nativeInputValueSetter.call(element, text)
|
||||
getNativeValueSetter(element as HTMLInputElement | HTMLTextAreaElement).call(element, text)
|
||||
}
|
||||
|
||||
// Only dispatch shared input event for non-contenteditable (contenteditable has its own)
|
||||
@@ -196,7 +198,7 @@ export async function inputTextElement(element: HTMLElement, text: string) {
|
||||
* @todo browser-use version is very complex and supports menu tags, need to follow up
|
||||
*/
|
||||
export async function selectOptionElement(selectElement: HTMLSelectElement, optionText: string) {
|
||||
if (!(selectElement instanceof HTMLSelectElement)) {
|
||||
if (!isSelectElement(selectElement)) {
|
||||
throw new Error('Element is not a select element')
|
||||
}
|
||||
|
||||
@@ -213,11 +215,11 @@ export async function selectOptionElement(selectElement: HTMLSelectElement, opti
|
||||
await waitFor(0.1) // Wait to ensure change event processing completes
|
||||
}
|
||||
|
||||
interface ScrollableElement extends HTMLElement {
|
||||
interface ScrollableElement extends Element {
|
||||
scrollIntoViewIfNeeded?: (centerIfNeeded?: boolean) => void
|
||||
}
|
||||
|
||||
export async function scrollIntoViewIfNeeded(element: HTMLElement) {
|
||||
export async function scrollIntoViewIfNeeded(element: Element) {
|
||||
const el = element as ScrollableElement
|
||||
if (typeof el.scrollIntoViewIfNeeded === 'function') {
|
||||
el.scrollIntoViewIfNeeded()
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
// ======= type guards =======
|
||||
// @note instanceof fails for elements inside iframes
|
||||
|
||||
export function isHTMLElement(el: unknown): el is HTMLElement {
|
||||
// @todo either specify to HTMLElement or allow Element here.
|
||||
return !!el && (el as Node).nodeType === 1
|
||||
}
|
||||
|
||||
export function isInputElement(el: Element): el is HTMLInputElement {
|
||||
return el?.nodeType === 1 && el.tagName === 'INPUT'
|
||||
}
|
||||
|
||||
export function isTextAreaElement(el: Element): el is HTMLTextAreaElement {
|
||||
return el?.nodeType === 1 && el.tagName === 'TEXTAREA'
|
||||
}
|
||||
|
||||
export function isSelectElement(el: Element): el is HTMLSelectElement {
|
||||
return el?.nodeType === 1 && el.tagName === 'SELECT'
|
||||
}
|
||||
|
||||
export function isAnchorElement(el: Element): el is HTMLAnchorElement {
|
||||
return el?.nodeType === 1 && el.tagName === 'A'
|
||||
}
|
||||
|
||||
// ======= iframe helpers =======
|
||||
|
||||
/** Iframe offset for translating element coordinates to top-frame viewport. */
|
||||
export function getIframeOffset(element: HTMLElement): { x: number; y: number } {
|
||||
const frame = element.ownerDocument.defaultView?.frameElement as HTMLElement | null
|
||||
if (!frame) return { x: 0, y: 0 }
|
||||
const rect = frame.getBoundingClientRect()
|
||||
return { x: rect.left, y: rect.top }
|
||||
}
|
||||
|
||||
/**
|
||||
* Get native value setter from the element's own prototype (iframe-safe).
|
||||
* @note for React
|
||||
*/
|
||||
export function getNativeValueSetter(element: HTMLInputElement | HTMLTextAreaElement) {
|
||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||
return Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element) as object, 'value')!
|
||||
.set as (v: string) => void
|
||||
}
|
||||
|
||||
// ======= general utils =======
|
||||
|
||||
export async function waitFor(seconds: number): Promise<void> {
|
||||
await new Promise((resolve) => setTimeout(resolve, seconds * 1000))
|
||||
}
|
||||
|
||||
// ======= dom utils =======
|
||||
|
||||
export async function movePointerToElement(element: HTMLElement) {
|
||||
const rect = element.getBoundingClientRect()
|
||||
const offset = getIframeOffset(element)
|
||||
const x = rect.left + rect.width / 2 + offset.x
|
||||
const y = rect.top + rect.height / 2 + offset.y
|
||||
|
||||
window.dispatchEvent(new CustomEvent('PageAgent::MovePointerTo', { detail: { x, y } }))
|
||||
|
||||
await waitFor(0.3)
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@page-agent/ui",
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"type": "module",
|
||||
"main": "./dist/lib/page-agent-ui.js",
|
||||
"module": "./dist/lib/page-agent-ui.js",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@page-agent/website",
|
||||
"private": true,
|
||||
"version": "1.5.9",
|
||||
"version": "1.6.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host 0.0.0.0",
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
// Demo build (auto-init with demo LLM, for quick testing)
|
||||
export const CDN_DEMO_URL =
|
||||
'https://cdn.jsdelivr.net/npm/page-agent@1.5.9/dist/iife/page-agent.demo.js'
|
||||
'https://cdn.jsdelivr.net/npm/page-agent@1.6.0/dist/iife/page-agent.demo.js'
|
||||
export const CDN_DEMO_CN_URL =
|
||||
'https://registry.npmmirror.com/page-agent/1.5.9/files/dist/iife/page-agent.demo.js'
|
||||
'https://registry.npmmirror.com/page-agent/1.6.0/files/dist/iife/page-agent.demo.js'
|
||||
|
||||
// Demo LLM for website testing (homepage quick trial uses flash)
|
||||
export const DEMO_MODEL = 'qwen3.5-flash'
|
||||
export const DEMO_BASE_URL = 'https://page-ag-testing-ohftxirgbn.cn-shanghai.fcapp.run'
|
||||
export const DEMO_API_KEY = 'NA'
|
||||
// export const DEMO_API_KEY = ''
|
||||
|
||||
@@ -129,12 +129,6 @@ const result = await agent.execute('Fill in the form with test data')`}
|
||||
? 'LLM API 的基础 URL(如 https://api.openai.com/v1)'
|
||||
: 'Base URL of the LLM API (e.g., https://api.openai.com/v1)',
|
||||
},
|
||||
{
|
||||
name: 'apiKey',
|
||||
type: 'string',
|
||||
required: true,
|
||||
description: isZh ? 'API 密钥' : 'API key for authentication',
|
||||
},
|
||||
{
|
||||
name: 'model',
|
||||
type: 'string',
|
||||
@@ -143,6 +137,12 @@ const result = await agent.execute('Fill in the form with test data')`}
|
||||
? '模型名称(如 gpt-5.2, anthropic/claude-4.5-haiku)'
|
||||
: 'Model name (e.g., gpt-5.2, anthropic/claude-4.5-haiku)',
|
||||
},
|
||||
{
|
||||
name: 'apiKey',
|
||||
type: 'string',
|
||||
required: false,
|
||||
description: 'LLM AK',
|
||||
},
|
||||
{
|
||||
name: 'temperature',
|
||||
type: 'number',
|
||||
@@ -156,6 +156,14 @@ const result = await agent.execute('Fill in the form with test data')`}
|
||||
defaultValue: '3',
|
||||
description: isZh ? 'API 调用失败时的最大重试次数' : 'Maximum retries on API failure',
|
||||
},
|
||||
{
|
||||
name: 'disableNamedToolChoice',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
description: isZh
|
||||
? '禁用命名 tool_choice,始终使用 "required" 字符串。适用于不支持 tool_choice 对象格式的 LLM 服务。'
|
||||
: 'Disable named tool_choice, always use "required" string. For LLM services that don\'t support the object format of tool_choice.',
|
||||
},
|
||||
{
|
||||
name: 'customFetch',
|
||||
type: 'typeof fetch',
|
||||
|
||||
@@ -187,39 +187,7 @@ localStorage.setItem('PageAgentExtUserAuthToken', '<your-token-from-extension>')
|
||||
</p>
|
||||
|
||||
<CodeEditor
|
||||
code={
|
||||
isZh
|
||||
? `import type {
|
||||
AgentActivity,
|
||||
AgentStatus,
|
||||
ExecutionResult,
|
||||
HistoricalEvent
|
||||
} from '@page-agent/core'
|
||||
|
||||
interface ExecuteConfig {
|
||||
baseURL: string // LLM API 端点
|
||||
apiKey: string // API 密钥
|
||||
model: string // 模型名称
|
||||
|
||||
includeInitialTab?: boolean
|
||||
onStatusChange?: (status: AgentStatus) => void
|
||||
onActivity?: (activity: AgentActivity) => void
|
||||
onHistoryUpdate?: (history: HistoricalEvent[]) => void
|
||||
}
|
||||
|
||||
type Execute = (task: string, config: ExecuteConfig) => Promise<ExecutionResult>
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
PAGE_AGENT_EXT_VERSION?: string
|
||||
PAGE_AGENT_EXT?: {
|
||||
version: string
|
||||
execute: Execute
|
||||
stop: () => void
|
||||
}
|
||||
}
|
||||
}`
|
||||
: `import type {
|
||||
code={`import type {
|
||||
AgentActivity,
|
||||
AgentStatus,
|
||||
ExecutionResult,
|
||||
@@ -228,8 +196,8 @@ declare global {
|
||||
|
||||
interface ExecuteConfig {
|
||||
baseURL: string // LLM API endpoint
|
||||
apiKey: string // API key
|
||||
model: string // Model name
|
||||
apiKey?: string // LLM AK
|
||||
|
||||
includeInitialTab?: boolean
|
||||
onStatusChange?: (status: AgentStatus) => void
|
||||
@@ -248,8 +216,7 @@ declare global {
|
||||
stop: () => void
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}`}
|
||||
language="typescript"
|
||||
/>
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@ const MODEL_GROUPS: Record<string, string[]> = {
|
||||
'claude-sonnet-3.5',
|
||||
],
|
||||
xAI: ['grok-4.1-fast', 'grok-4', 'grok-code-fast'],
|
||||
MiniMax: ['MiniMax-M2.5', 'MiniMax-M2.5-highspeed'],
|
||||
MiniMax: ['MiniMax-M2.7', 'MiniMax-M2.7-highspeed', 'MiniMax-M2.5', 'MiniMax-M2.5-highspeed'],
|
||||
MoonshotAI: ['kimi-k2.5'],
|
||||
'Z.AI': ['glm-5', 'glm-4.7'],
|
||||
}
|
||||
@@ -126,13 +126,12 @@ const pageAgent = new PageAgent({
|
||||
const pageAgent = new PageAgent({
|
||||
baseURL: 'https://api.minimax.io/v1',
|
||||
apiKey: 'your-minimax-api-key',
|
||||
model: 'MiniMax-M2.5'
|
||||
model: 'MiniMax-M2.7'
|
||||
});
|
||||
|
||||
// Self-hosted models (e.g., Ollama)
|
||||
// Self-hosted models (e.g., Ollama) — no apiKey needed
|
||||
const pageAgent = new PageAgent({
|
||||
baseURL: 'http://localhost:11434/v1',
|
||||
apiKey: 'NA',
|
||||
model: 'qwen3:14b'
|
||||
});
|
||||
|
||||
@@ -280,7 +279,6 @@ LLM_MODEL_NAME="qwen3:14b"`}
|
||||
<CodeEditor
|
||||
code={`const agent = new PageAgent({
|
||||
baseURL: '/api/llm-proxy',
|
||||
apiKey: 'NA',
|
||||
model: 'gpt-5.1',
|
||||
customFetch: (url, init) =>
|
||||
fetch(url, { ...init, credentials: 'include' }),
|
||||
|
||||
@@ -10,7 +10,7 @@ import { Particles } from '../../components/ui/particles'
|
||||
import {
|
||||
CDN_DEMO_CN_URL,
|
||||
CDN_DEMO_URL,
|
||||
DEMO_API_KEY,
|
||||
// DEMO_API_KEY,
|
||||
DEMO_BASE_URL,
|
||||
DEMO_MODEL,
|
||||
} from '../../constants'
|
||||
@@ -94,7 +94,7 @@ export default function HeroSection() {
|
||||
apiKey:
|
||||
import.meta.env.DEV && import.meta.env.LLM_API_KEY
|
||||
? import.meta.env.LLM_API_KEY
|
||||
: DEMO_API_KEY,
|
||||
: undefined,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user