page-agent 1.6.1 → 1.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -20
- package/dist/esm/PageAgent.d.ts +2 -1
- package/dist/esm/page-agent.js +2 -1
- package/dist/esm/page-agent.js.map +1 -1
- package/dist/iife/page-agent.demo.js +3 -3
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -26,14 +26,15 @@ The GUI Agent Living in Your Webpage. Control web interfaces with natural langua
|
|
|
26
26
|
- No screenshots. No multi-modal LLMs or special permissions needed.
|
|
27
27
|
- **🧠 Bring your own LLMs**
|
|
28
28
|
- **🐙 Optional [chrome extension](https://alibaba.github.io/page-agent/docs/features/chrome-extension) for multi-page tasks.**
|
|
29
|
-
- [MCP Server (Beta)](https://alibaba.github.io/page-agent/docs/features/mcp-server)
|
|
29
|
+
- And an [MCP Server (Beta)](https://alibaba.github.io/page-agent/docs/features/mcp-server) to control it from outside
|
|
30
30
|
|
|
31
31
|
## 💡 Use Cases
|
|
32
32
|
|
|
33
33
|
- **SaaS AI Copilot** — Ship an AI copilot in your product in lines of code. No backend rewrite.
|
|
34
34
|
- **Smart Form Filling** — Turn 20-click workflows into one sentence. Perfect for ERP, CRM, and admin systems.
|
|
35
35
|
- **Accessibility** — Make any web app accessible through natural language. Voice commands, screen readers, zero barrier.
|
|
36
|
-
- **Multi-page Agent** — Extend your own agent's reach across browser tabs
|
|
36
|
+
- **Multi-page Agent** — Extend your own web agent's reach across browser tabs [chrome extension](https://alibaba.github.io/page-agent/docs/features/chrome-extension).
|
|
37
|
+
- **MCP** - Allow your agent clients to control your browser.
|
|
37
38
|
|
|
38
39
|
## 🚀 Quick Start
|
|
39
40
|
|
|
@@ -49,8 +50,8 @@ Fastest way to try PageAgent with our free Demo LLM:
|
|
|
49
50
|
|
|
50
51
|
| Mirrors | URL |
|
|
51
52
|
| ------- | ---------------------------------------------------------------------------------- |
|
|
52
|
-
| Global | https://cdn.jsdelivr.net/npm/page-agent@1.6.
|
|
53
|
-
| China | https://registry.npmmirror.com/page-agent/1.6.
|
|
53
|
+
| Global | https://cdn.jsdelivr.net/npm/page-agent@1.6.3/dist/iife/page-agent.demo.js |
|
|
54
|
+
| China | https://registry.npmmirror.com/page-agent/1.6.3/files/dist/iife/page-agent.demo.js |
|
|
54
55
|
|
|
55
56
|
### NPM Installation
|
|
56
57
|
|
|
@@ -75,11 +76,15 @@ For more programmatic usage, see [📖 Documentations](https://alibaba.github.io
|
|
|
75
76
|
|
|
76
77
|
## 🤝 Contributing
|
|
77
78
|
|
|
78
|
-
We welcome contributions from the community!
|
|
79
|
+
We welcome contributions from the community! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines and [docs/developer-guide.md](docs/developer-guide.md) for local development workflows.
|
|
79
80
|
|
|
80
|
-
Please read [
|
|
81
|
+
Please read the [maintainer's note](https://github.com/alibaba/page-agent/issues/349) on principles and current state.
|
|
81
82
|
|
|
82
|
-
Contributions generated entirely by bots or
|
|
83
|
+
Contributions generated entirely by **bots or AI** without substantial human involvement will **not be accepted**.
|
|
84
|
+
|
|
85
|
+
## ⚖️ License
|
|
86
|
+
|
|
87
|
+
[MIT License](LICENSE)
|
|
83
88
|
|
|
84
89
|
## 👏 Acknowledgments
|
|
85
90
|
|
|
@@ -97,23 +102,18 @@ Licensed under the MIT License
|
|
|
97
102
|
We gratefully acknowledge the browser-use project and its contributors for their
|
|
98
103
|
excellent work on web automation and DOM interaction patterns that helped make
|
|
99
104
|
this project possible.
|
|
100
|
-
|
|
101
|
-
Third-party dependencies and their licenses can be found in the package.json
|
|
102
|
-
file and in the node_modules directory after installation.
|
|
103
105
|
```
|
|
104
106
|
|
|
105
|
-
##
|
|
107
|
+
## 🌟 Awesome Page Agent
|
|
106
108
|
|
|
107
|
-
|
|
109
|
+
Built something cool with PageAgent? Add it here! Open a PR to share your project.
|
|
110
|
+
|
|
111
|
+
> These are community projects — not maintained or endorsed by us. Use at your own discretion.
|
|
112
|
+
|
|
113
|
+
| Project | Description |
|
|
114
|
+
| -------- | ----------------------------------------------------------- |
|
|
115
|
+
| _Yours?_ | [Open a PR](https://github.com/alibaba/page-agent/pulls) 🙌 |
|
|
108
116
|
|
|
109
117
|
---
|
|
110
118
|
|
|
111
119
|
**⭐ Star this repo if you find PageAgent helpful!**
|
|
112
|
-
|
|
113
|
-
<a href="https://www.star-history.com/?repos=alibaba%2Fpage-agent&type=date">
|
|
114
|
-
<picture>
|
|
115
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/image?repos=alibaba/page-agent&type=date&theme=dark&legend=top-left&v=7" />
|
|
116
|
-
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/image?repos=alibaba/page-agent&type=date&legend=top-left&v=7" />
|
|
117
|
-
<img alt="Star History Chart" src="https://api.star-history.com/image?repos=alibaba/page-agent&type=date&legend=top-left&v=7" />
|
|
118
|
-
</picture>
|
|
119
|
-
</a>
|
package/dist/esm/PageAgent.d.ts
CHANGED
|
@@ -2,13 +2,14 @@ import { AgentConfig } from '@page-agent/core';
|
|
|
2
2
|
import { PageAgentCore } from '@page-agent/core';
|
|
3
3
|
import { PageControllerConfig } from '@page-agent/page-controller';
|
|
4
4
|
import { Panel } from '@page-agent/ui';
|
|
5
|
+
import { PanelConfig } from '@page-agent/ui';
|
|
5
6
|
|
|
6
7
|
export declare class PageAgent extends PageAgentCore {
|
|
7
8
|
panel: Panel;
|
|
8
9
|
constructor(config: PageAgentConfig);
|
|
9
10
|
}
|
|
10
11
|
|
|
11
|
-
export declare type PageAgentConfig = AgentConfig & PageControllerConfig
|
|
12
|
+
export declare type PageAgentConfig = AgentConfig & PageControllerConfig & Omit<PanelConfig, 'language'>;
|
|
12
13
|
|
|
13
14
|
|
|
14
15
|
export * from "@page-agent/core";
|
package/dist/esm/page-agent.js
CHANGED
|
@@ -13,7 +13,8 @@ const _PageAgent = class _PageAgent extends PageAgentCore {
|
|
|
13
13
|
});
|
|
14
14
|
super({ ...config, pageController });
|
|
15
15
|
this.panel = new Panel(this, {
|
|
16
|
-
language: config.language
|
|
16
|
+
language: config.language,
|
|
17
|
+
promptForNextTask: config.promptForNextTask
|
|
17
18
|
});
|
|
18
19
|
}
|
|
19
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-agent.js","sources":["../../src/PageAgent.ts"],"sourcesContent":["/**\n * Copyright (C) 2025 Alibaba Group Holding Limited\n * All rights reserved.\n */\nimport { type AgentConfig, PageAgentCore } from '@page-agent/core'\nimport { PageController, type PageControllerConfig } from '@page-agent/page-controller'\nimport { Panel } from '@page-agent/ui'\n\nexport * from '@page-agent/core'\n\nexport type PageAgentConfig = AgentConfig & PageControllerConfig
|
|
1
|
+
{"version":3,"file":"page-agent.js","sources":["../../src/PageAgent.ts"],"sourcesContent":["/**\n * Copyright (C) 2025 Alibaba Group Holding Limited\n * All rights reserved.\n */\nimport { type AgentConfig, PageAgentCore } from '@page-agent/core'\nimport { PageController, type PageControllerConfig } from '@page-agent/page-controller'\nimport { Panel, type PanelConfig } from '@page-agent/ui'\n\nexport * from '@page-agent/core'\n\nexport type PageAgentConfig = AgentConfig & PageControllerConfig & Omit<PanelConfig, 'language'>\n\nexport class PageAgent extends PageAgentCore {\n\tpanel: Panel\n\n\tconstructor(config: PageAgentConfig) {\n\t\tconst pageController = new PageController({\n\t\t\t...config,\n\t\t\tenableMask: config.enableMask ?? true,\n\t\t})\n\n\t\tsuper({ ...config, pageController })\n\n\t\tthis.panel = new Panel(this, {\n\t\t\tlanguage: config.language,\n\t\t\tpromptForNextTask: config.promptForNextTask,\n\t\t})\n\t}\n}\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,aAAN,MAAM,mBAAkB,cAAc;AAAA,EAC5C;AAAA,EAEA,YAAY,QAAyB;AACpC,UAAM,iBAAiB,IAAI,eAAe;AAAA,MACzC,GAAG;AAAA,MACH,YAAY,OAAO,cAAc;AAAA,IAAA,CACjC;AAED,UAAM,EAAE,GAAG,QAAQ,gBAAgB;AAEnC,SAAK,QAAQ,IAAI,MAAM,MAAM;AAAA,MAC5B,UAAU,OAAO;AAAA,MACjB,mBAAmB,OAAO;AAAA,IAAA,CAC1B;AAAA,EACF;AACD;AAhB6C;AAAtC,IAAM,YAAN;"}
|
|
@@ -252,7 +252,7 @@ ${d}`,g=o.pixels_below>4&&n!==-1?`... ${o.pixels_below} pixels below (${o.pages_
|
|
|
252
252
|
</div>
|
|
253
253
|
${o?`<div class="${styles$1.historyMeta}">${o}</div>`:""}
|
|
254
254
|
</div>
|
|
255
|
-
`}a(createCard,"createCard");function createReflectionLines(e){const t=[];return e.evaluation_previous_goal&&t.push(`🔍 ${e.evaluation_previous_goal}`),e.memory&&t.push(`💾 ${e.memory}`),e.next_goal&&t.push(`🎯 ${e.next_goal}`),t}a(createReflectionLines,"createReflectionLines");const pt=class pt{constructor(t,o={}){Z(this,_);Z(this,ne);Z(this,je);Z(this,ie);Z(this,be);Z(this,Ce);Z(this,we);Z(this,Re);Z(this,ve);Z(this,B);Z(this,Ge);Z(this,xe,!1);Z(this,j);Z(this,Se,null);Z(this,ke,!1);Z(this,Ze,null);Z(this,Q,null);Z(this,Be,!1);Z(this,He,a(()=>b(this,_,Ot).call(this),"#onStatusChange"));Z(this,Je,a(()=>b(this,_,Ct).call(this),"#onHistoryChange"));Z(this,Ye,a(t=>b(this,_,Rt).call(this,t.detail),"#onActivity"));Z(this,qe,a(()=>this.dispose(),"#onAgentDispose"));x(this,B,t),x(this,Ge,o),x(this,j,new I18n(o.language??"en-US")),p(this,B).onAskUser=n=>b(this,_,Zt).call(this,n),x(this,ne,b(this,_,Dt).call(this)),x(this,je,p(this,ne).querySelector(`.${styles$1.indicator}`)),x(this,ie,p(this,ne).querySelector(`.${styles$1.statusText}`)),x(this,be,p(this,ne).querySelector(`.${styles$1.historySection}`)),x(this,Ce,p(this,ne).querySelector(`.${styles$1.expandButton}`)),x(this,we,p(this,ne).querySelector(`.${styles$1.stopButton}`)),x(this,Re,p(this,ne).querySelector(`.${styles$1.inputSectionWrapper}`)),x(this,ve,p(this,ne).querySelector(`.${styles$1.taskInput}`)),p(this,B).addEventListener("statuschange",p(this,He)),p(this,B).addEventListener("historychange",p(this,Je)),p(this,B).addEventListener("activity",p(this,Ye)),p(this,B).addEventListener("dispose",p(this,qe)),b(this,_,Ut).call(this),b(this,_,jt).call(this),b(this,_,tt).call(this),this.hide()}get wrapper(){return p(this,ne)}show(){this.wrapper.style.display="block",this.wrapper.offsetHeight,this.wrapper.style.opacity="1",this.wrapper.style.transform="translateX(-50%) translateY(0)"}hide(){this.wrapper.style.opacity="0",this.wrapper.style.transform="translateX(-50%) translateY(20px)",this.wrapper.style.display="none"}reset(){p(this,ie).textContent=p(this,j).t("ui.panel.ready"),b(this,_,Fe).call(this,"thinking"),b(this,_,kt).call(this),b(this,_,it).call(this),x(this,ke,!1),x(this,Se,null),b(this,_,tt).call(this)}expand(){b(this,_,ot).call(this)}collapse(){b(this,_,it).call(this)}dispose(){p(this,B).removeEventListener("statuschange",p(this,He)),p(this,B).removeEventListener("historychange",p(this,Je)),p(this,B).removeEventListener("activity",p(this,Ye)),p(this,B).removeEventListener("dispose",p(this,qe)),x(this,ke,!1),b(this,_,Bt).call(this),this.wrapper.remove()}};ne=new WeakMap,je=new WeakMap,ie=new WeakMap,be=new WeakMap,Ce=new WeakMap,we=new WeakMap,Re=new WeakMap,ve=new WeakMap,B=new WeakMap,Ge=new WeakMap,xe=new WeakMap,j=new WeakMap,Se=new WeakMap,ke=new WeakMap,Ze=new WeakMap,Q=new WeakMap,Be=new WeakMap,He=new WeakMap,Je=new WeakMap,Ye=new WeakMap,qe=new WeakMap,_=new WeakSet,Ot=a(function(){const t=p(this,B).status,o=t==="running"||t==="idle"?"thinking":t;b(this,_,Fe).call(this,o),t==="running"?(p(this,we).textContent="■",p(this,we).title=p(this,j).t("ui.panel.stop")):(p(this,we).textContent="X",p(this,we).title=p(this,j).t("ui.panel.close")),t==="running"&&(this.show(),b(this,_,bt).call(this)),(t==="completed"||t==="error")&&(p(this,xe)||b(this,_,ot).call(this),b(this,_,Ft).call(this)&&b(this,_,tt).call(this))},"#handleStatusChange"),Ct=a(function(){b(this,_,kt).call(this)},"#handleHistoryChange"),Rt=a(function(t){switch(t.type){case"thinking":x(this,Q,p(this,j).t("ui.panel.thinking")),b(this,_,Fe).call(this,"thinking");break;case"executing":x(this,Q,b(this,_,yt).call(this,t.tool,t.input)),b(this,_,Fe).call(this,"executing");break;case"executed":x(this,Q,truncate(t.output,50));break;case"retrying":x(this,Q,`Retrying (${t.attempt}/${t.maxAttempts})`),b(this,_,Fe).call(this,"retrying");break;case"error":x(this,Q,truncate(t.message,50)),b(this,_,Fe).call(this,"error");break}},"#handleActivity"),Zt=a(function(t){return new Promise(o=>{x(this,ke,!0),x(this,Se,o),p(this,xe)||b(this,_,ot).call(this);const n=document.createElement("div");n.innerHTML=createCard({icon:"❓",content:`Question: ${t}`,type:"question"});const r=n.firstElementChild;r.setAttribute("data-temp-card","true"),p(this,be).appendChild(r),b(this,_,vt).call(this),b(this,_,tt).call(this,p(this,j).t("ui.panel.userAnswerPrompt"))})},"#askUser"),yt=a(function(t,o){const n=o;switch(t){case"click_element_by_index":return p(this,j).t("ui.tools.clicking",{index:n.index});case"input_text":return p(this,j).t("ui.tools.inputting",{index:n.index});case"select_dropdown_option":return p(this,j).t("ui.tools.selecting",{text:n.text});case"scroll":return p(this,j).t("ui.tools.scrolling");case"wait":return p(this,j).t("ui.tools.waiting",{seconds:n.seconds});case"ask_user":return p(this,j).t("ui.tools.askingUser");case"done":return p(this,j).t("ui.tools.done");default:return p(this,j).t("ui.tools.executing",{toolName:t})}},"#getToolExecutingText"),Nt=a(function(){p(this,B).status==="running"?p(this,B).stop():p(this,B).dispose()},"#handleActionButton"),Lt=a(function(){const t=p(this,ve).value.trim();t&&(b(this,_,bt).call(this),p(this,ke)?b(this,_,Mt).call(this,t):p(this,B).execute(t))},"#submitTask"),Mt=a(function(t){Array.from(p(this,be).children).forEach(o=>{o.getAttribute("data-temp-card")==="true"&&o.remove()}),x(this,ke,!1),p(this,Se)&&(p(this,Se).call(this,t),x(this,Se,null))},"#handleUserAnswer"),tt=a(function(t){p(this,ve).value="",p(this,ve).placeholder=t||p(this,j).t("ui.panel.taskInput"),p(this,Re).classList.remove(styles$1.hidden),setTimeout(()=>{p(this,ve).focus()},100)},"#showInputArea"),bt=a(function(){p(this,Re).classList.add(styles$1.hidden)},"#hideInputArea"),Ft=a(function(){if(p(this,ke)||p(this,B).history.length===0)return!0;const o=p(this,B).status;return o==="completed"||o==="error"?p(this,Ge).promptForNextTask??!0:!1},"#shouldShowInputArea"),Dt=a(function(){const
|
|
255
|
+
`}a(createCard,"createCard");function createReflectionLines(e){const t=[];return e.evaluation_previous_goal&&t.push(`🔍 ${e.evaluation_previous_goal}`),e.memory&&t.push(`💾 ${e.memory}`),e.next_goal&&t.push(`🎯 ${e.next_goal}`),t}a(createReflectionLines,"createReflectionLines");const pt=class pt{constructor(t,o={}){Z(this,_);Z(this,ne);Z(this,je);Z(this,ie);Z(this,be);Z(this,Ce);Z(this,we);Z(this,Re);Z(this,ve);Z(this,B);Z(this,Ge);Z(this,xe,!1);Z(this,j);Z(this,Se,null);Z(this,ke,!1);Z(this,Ze,null);Z(this,Q,null);Z(this,Be,!1);Z(this,He,a(()=>b(this,_,Ot).call(this),"#onStatusChange"));Z(this,Je,a(()=>b(this,_,Ct).call(this),"#onHistoryChange"));Z(this,Ye,a(t=>b(this,_,Rt).call(this,t.detail),"#onActivity"));Z(this,qe,a(()=>this.dispose(),"#onAgentDispose"));x(this,B,t),x(this,Ge,o),x(this,j,new I18n(o.language??"en-US")),p(this,B).onAskUser=n=>b(this,_,Zt).call(this,n),x(this,ne,b(this,_,Dt).call(this)),x(this,je,p(this,ne).querySelector(`.${styles$1.indicator}`)),x(this,ie,p(this,ne).querySelector(`.${styles$1.statusText}`)),x(this,be,p(this,ne).querySelector(`.${styles$1.historySection}`)),x(this,Ce,p(this,ne).querySelector(`.${styles$1.expandButton}`)),x(this,we,p(this,ne).querySelector(`.${styles$1.stopButton}`)),x(this,Re,p(this,ne).querySelector(`.${styles$1.inputSectionWrapper}`)),x(this,ve,p(this,ne).querySelector(`.${styles$1.taskInput}`)),p(this,B).addEventListener("statuschange",p(this,He)),p(this,B).addEventListener("historychange",p(this,Je)),p(this,B).addEventListener("activity",p(this,Ye)),p(this,B).addEventListener("dispose",p(this,qe)),b(this,_,Ut).call(this),b(this,_,jt).call(this),b(this,_,tt).call(this),this.hide()}get wrapper(){return p(this,ne)}show(){this.wrapper.style.display="block",this.wrapper.offsetHeight,this.wrapper.style.opacity="1",this.wrapper.style.transform="translateX(-50%) translateY(0)"}hide(){this.wrapper.style.opacity="0",this.wrapper.style.transform="translateX(-50%) translateY(20px)",this.wrapper.style.display="none"}reset(){p(this,ie).textContent=p(this,j).t("ui.panel.ready"),b(this,_,Fe).call(this,"thinking"),b(this,_,kt).call(this),b(this,_,it).call(this),x(this,ke,!1),x(this,Se,null),b(this,_,tt).call(this)}expand(){b(this,_,ot).call(this)}collapse(){b(this,_,it).call(this)}dispose(){p(this,B).removeEventListener("statuschange",p(this,He)),p(this,B).removeEventListener("historychange",p(this,Je)),p(this,B).removeEventListener("activity",p(this,Ye)),p(this,B).removeEventListener("dispose",p(this,qe)),x(this,ke,!1),b(this,_,Bt).call(this),this.wrapper.remove()}};ne=new WeakMap,je=new WeakMap,ie=new WeakMap,be=new WeakMap,Ce=new WeakMap,we=new WeakMap,Re=new WeakMap,ve=new WeakMap,B=new WeakMap,Ge=new WeakMap,xe=new WeakMap,j=new WeakMap,Se=new WeakMap,ke=new WeakMap,Ze=new WeakMap,Q=new WeakMap,Be=new WeakMap,He=new WeakMap,Je=new WeakMap,Ye=new WeakMap,qe=new WeakMap,_=new WeakSet,Ot=a(function(){const t=p(this,B).status,o=t==="running"||t==="idle"?"thinking":t;b(this,_,Fe).call(this,o),t==="running"?(p(this,we).textContent="■",p(this,we).title=p(this,j).t("ui.panel.stop")):(p(this,we).textContent="X",p(this,we).title=p(this,j).t("ui.panel.close")),t==="running"&&(this.show(),b(this,_,bt).call(this)),(t==="completed"||t==="error")&&(p(this,xe)||b(this,_,ot).call(this),b(this,_,Ft).call(this)&&b(this,_,tt).call(this))},"#handleStatusChange"),Ct=a(function(){b(this,_,kt).call(this)},"#handleHistoryChange"),Rt=a(function(t){switch(t.type){case"thinking":x(this,Q,p(this,j).t("ui.panel.thinking")),b(this,_,Fe).call(this,"thinking");break;case"executing":x(this,Q,b(this,_,yt).call(this,t.tool,t.input)),b(this,_,Fe).call(this,"executing");break;case"executed":x(this,Q,truncate(t.output,50));break;case"retrying":x(this,Q,`Retrying (${t.attempt}/${t.maxAttempts})`),b(this,_,Fe).call(this,"retrying");break;case"error":x(this,Q,truncate(t.message,50)),b(this,_,Fe).call(this,"error");break}},"#handleActivity"),Zt=a(function(t){return new Promise(o=>{x(this,ke,!0),x(this,Se,o),p(this,xe)||b(this,_,ot).call(this);const n=document.createElement("div");n.innerHTML=createCard({icon:"❓",content:`Question: ${t}`,type:"question"});const r=n.firstElementChild;r.setAttribute("data-temp-card","true"),p(this,be).appendChild(r),b(this,_,vt).call(this),b(this,_,tt).call(this,p(this,j).t("ui.panel.userAnswerPrompt"))})},"#askUser"),yt=a(function(t,o){const n=o;switch(t){case"click_element_by_index":return p(this,j).t("ui.tools.clicking",{index:n.index});case"input_text":return p(this,j).t("ui.tools.inputting",{index:n.index});case"select_dropdown_option":return p(this,j).t("ui.tools.selecting",{text:n.text});case"scroll":return p(this,j).t("ui.tools.scrolling");case"wait":return p(this,j).t("ui.tools.waiting",{seconds:n.seconds});case"ask_user":return p(this,j).t("ui.tools.askingUser");case"done":return p(this,j).t("ui.tools.done");default:return p(this,j).t("ui.tools.executing",{toolName:t})}},"#getToolExecutingText"),Nt=a(function(){p(this,B).status==="running"?p(this,B).stop():p(this,B).dispose()},"#handleActionButton"),Lt=a(function(){const t=p(this,ve).value.trim();t&&(b(this,_,bt).call(this),p(this,ke)?b(this,_,Mt).call(this,t):p(this,B).execute(t))},"#submitTask"),Mt=a(function(t){Array.from(p(this,be).children).forEach(o=>{o.getAttribute("data-temp-card")==="true"&&o.remove()}),x(this,ke,!1),p(this,Se)&&(p(this,Se).call(this,t),x(this,Se,null))},"#handleUserAnswer"),tt=a(function(t){p(this,ve).value="",p(this,ve).placeholder=t||p(this,j).t("ui.panel.taskInput"),p(this,Re).classList.remove(styles$1.hidden),setTimeout(()=>{p(this,ve).focus()},100)},"#showInputArea"),bt=a(function(){p(this,Re).classList.add(styles$1.hidden)},"#hideInputArea"),Ft=a(function(){if(p(this,ke)||p(this,B).history.length===0)return!0;const o=p(this,B).status;return o==="completed"||o==="error"?p(this,Ge).promptForNextTask??!0:!1},"#shouldShowInputArea"),Dt=a(function(){const o=document.createElement("div");return o.id="page-agent-runtime_agent-panel",o.className=styles$1.wrapper,o.setAttribute("data-browser-use-ignore","true"),o.setAttribute("data-page-agent-ignore","true"),o.innerHTML=`
|
|
256
256
|
<div class="${styles$1.background}"></div>
|
|
257
257
|
<div class="${styles$1.historySectionWrapper}">
|
|
258
258
|
<div class="${styles$1.historySection}">
|
|
@@ -283,11 +283,11 @@ ${d}`,g=o.pixels_below>4&&n!==-1?`... ${o.pixels_below} pixels below (${o.pages_
|
|
|
283
283
|
<input
|
|
284
284
|
type="text"
|
|
285
285
|
class="${styles$1.taskInput}"
|
|
286
|
-
maxlength="
|
|
286
|
+
maxlength="1000"
|
|
287
287
|
/>
|
|
288
288
|
</div>
|
|
289
289
|
</div>
|
|
290
|
-
`,document.body.appendChild(
|
|
290
|
+
`,document.body.appendChild(o),o},"#createWrapper"),Ut=a(function(){this.wrapper.querySelector(`.${styles$1.header}`).addEventListener("click",o=>{o.target.closest(`.${styles$1.controlButton}`)||b(this,_,wt).call(this)}),p(this,Ce).addEventListener("click",o=>{o.stopPropagation(),b(this,_,wt).call(this)}),p(this,we).addEventListener("click",o=>{o.stopPropagation(),b(this,_,Nt).call(this)}),p(this,ve).addEventListener("keydown",o=>{o.isComposing||o.key==="Enter"&&(o.preventDefault(),b(this,_,Lt).call(this))}),p(this,Re).addEventListener("click",o=>{o.stopPropagation()})},"#setupEventListeners"),wt=a(function(){p(this,xe)?b(this,_,it).call(this):b(this,_,ot).call(this)},"#toggle"),ot=a(function(){x(this,xe,!0),this.wrapper.classList.add(styles$1.expanded),p(this,Ce).textContent="▲"},"#expand"),it=a(function(){x(this,xe,!1),this.wrapper.classList.remove(styles$1.expanded),p(this,Ce).textContent="▼"},"#collapse"),jt=a(function(){x(this,Ze,setInterval(()=>{b(this,_,Wt).call(this)},450))},"#startHeaderUpdateLoop"),Bt=a(function(){p(this,Ze)&&(clearInterval(p(this,Ze)),x(this,Ze,null))},"#stopHeaderUpdateLoop"),Wt=a(function(){if(!p(this,Q)||p(this,Be))return;if(p(this,ie).textContent===p(this,Q)){x(this,Q,null);return}const t=p(this,Q);x(this,Q,null),b(this,_,Vt).call(this,t)},"#checkAndUpdateHeader"),Vt=a(function(t){x(this,Be,!0),p(this,ie).classList.add(styles$1.fadeOut),setTimeout(()=>{p(this,ie).textContent=t,p(this,ie).classList.remove(styles$1.fadeOut),p(this,ie).classList.add(styles$1.fadeIn),setTimeout(()=>{p(this,ie).classList.remove(styles$1.fadeIn),x(this,Be,!1)},300)},150)},"#animateTextChange"),Fe=a(function(t){p(this,je).className=styles$1.indicator,p(this,je).classList.add(styles$1[t])},"#updateStatusIndicator"),vt=a(function(){setTimeout(()=>{p(this,be).scrollTop=p(this,be).scrollHeight},0)},"#scrollToBottom"),kt=a(function(){const t=[],o=p(this,B).task;o&&t.push(b(this,_,Gt).call(this,o));const n=p(this,B).history;for(const r of n)t.push(...b(this,_,Ht).call(this,r));p(this,be).innerHTML=t.join(""),b(this,_,vt).call(this)},"#renderHistory"),Gt=a(function(t){return createCard({icon:"🎯",content:t,type:"input"})},"#createTaskCard"),Ht=a(function(t){const o=[],n=t.type==="step"&&t.stepIndex!==void 0?p(this,j).t("ui.panel.step",{number:(t.stepIndex+1).toString()}):void 0;if(t.type==="step"){if(t.reflection){const i=createReflectionLines(t.reflection);i.length>0&&o.push(createCard({icon:"🧠",content:i,meta:n}))}const r=t.action;r&&o.push(...b(this,_,Jt).call(this,r,n))}else if(t.type==="observation")o.push(createCard({icon:"👁️",content:t.content||"",meta:n,type:"observation"}));else if(t.type==="user_takeover")o.push(createCard({icon:"👤",content:"User takeover",meta:n,type:"input"}));else if(t.type==="retry"){const r=`${t.message||"Retrying"} (${t.attempt}/${t.maxAttempts})`;o.push(createCard({icon:"🔄",content:r,meta:n,type:"observation"}))}else t.type==="error"&&o.push(createCard({icon:"❌",content:t.message||"Error",meta:n,type:"observation"}));return o},"#createHistoryCards"),Jt=a(function(t,o){const n=[];if(t.name==="done"){const i=t.input.text||t.output||"";i&&n.push(createCard({icon:"🤖",content:i,meta:o,type:"output"}))}else if(t.name==="ask_user"){const r=t.input,i=t.output.replace(/^User answered:\s*/i,"");n.push(createCard({icon:"❓",content:`Question: ${r.question||""}`,meta:o,type:"question"})),n.push(createCard({icon:"💬",content:`Answer: ${i}`,meta:o,type:"input"}))}else{const r=b(this,_,yt).call(this,t.name,t.input);n.push(createCard({icon:"🔨",content:r,meta:o})),t.output?.length>0&&n.push(createCard({icon:"🔨",content:t.output,meta:o,type:"output"}))}return n},"#createActionCards"),a(pt,"Panel");let Panel=pt;const ht=class ht extends PageAgentCore{panel;constructor(t){const o=new PageController({...t,enableMask:t.enableMask??!0});super({...t,pageController:o}),this.panel=new Panel(this,{language:t.language,promptForNextTask:t.promptForNextTask})}};a(ht,"PageAgent");let PageAgent=ht;window.pageAgent&&window.pageAgent.dispose(),window.PageAgent=PageAgent,console.log("🚀 page-agent.js loaded!");const DEMO_MODEL="qwen3.5-plus",DEMO_BASE_URL="https://page-ag-testing-ohftxirgbn.cn-shanghai.fcapp.run",DEMO_API_KEY="NA";setTimeout(()=>{const e=document.currentScript;let t;if(e){console.log("🚀 page-agent.js detected current script:",e.src);const o=new URL(e.src),n=o.searchParams.get("model")||DEMO_MODEL,r=o.searchParams.get("baseURL")||DEMO_BASE_URL,i=o.searchParams.get("apiKey")||DEMO_API_KEY,s=o.searchParams.get("lang")||"zh-CN";t={model:n,baseURL:r,apiKey:i,language:s}}else console.log("🚀 page-agent.js no current script detected, using default demo config"),t={model:DEMO_MODEL,baseURL:DEMO_BASE_URL,apiKey:DEMO_API_KEY};window.pageAgent=new PageAgent(t),window.pageAgent.panel.show(),console.log("🚀 page-agent.js initialized with config:",window.pageAgent.config)});function computeBorderGeometry(e,t,o,n){const r=Math.max(1,Math.min(e,t)),i=Math.min(o,20),c=Math.min(i+n,r),l=Math.min(c,Math.floor(e/2)),d=Math.min(c,Math.floor(t/2)),h=a(v=>v/e*2-1,"toClipX"),f=a(v=>v/t*2-1,"toClipY"),g=0,m=e,S=0,I=t,C=l,O=e-l,D=d,A=t-d,w=h(g),T=h(m),_e=f(S),H=f(I),le=h(C),ue=h(O),X=f(D),de=f(A),pe=0,Xe=0,he=1,Ke=1,Qe=l/e,ye=1-l/e,fe=d/t,u=1-d/t,y=new Float32Array([w,_e,T,_e,w,X,w,X,T,_e,T,X,w,de,T,de,w,H,w,H,T,de,T,H,w,X,le,X,w,de,w,de,le,X,le,de,ue,X,T,X,ue,de,ue,de,T,X,T,de]),P=new Float32Array([pe,Xe,he,Xe,pe,fe,pe,fe,he,Xe,he,fe,pe,u,he,u,pe,Ke,pe,Ke,he,u,he,Ke,pe,fe,Qe,fe,pe,u,pe,u,Qe,fe,Qe,u,ye,fe,he,fe,ye,u,ye,u,he,fe,he,u]);return{positions:y,uvs:P}}a(computeBorderGeometry,"computeBorderGeometry");function compileShader(e,t,o){const n=e.createShader(t);if(!n)throw new Error("Failed to create shader");if(e.shaderSource(n,o),e.compileShader(n),!e.getShaderParameter(n,e.COMPILE_STATUS)){const r=e.getShaderInfoLog(n)||"Unknown shader error";throw e.deleteShader(n),new Error(r)}return n}a(compileShader,"compileShader");function createProgram(e,t,o){const n=compileShader(e,e.VERTEX_SHADER,t),r=compileShader(e,e.FRAGMENT_SHADER,o),i=e.createProgram();if(!i)throw new Error("Failed to create program");if(e.attachShader(i,n),e.attachShader(i,r),e.linkProgram(i),!e.getProgramParameter(i,e.LINK_STATUS)){const s=e.getProgramInfoLog(i)||"Unknown link error";throw e.deleteProgram(i),e.deleteShader(n),e.deleteShader(r),new Error(s)}return e.deleteShader(n),e.deleteShader(r),i}a(createProgram,"createProgram");const fragmentShaderSource=`#version 300 es
|
|
291
291
|
precision lowp float;
|
|
292
292
|
in vec2 vUV;
|
|
293
293
|
out vec4 outColor;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "page-agent",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.6.
|
|
4
|
+
"version": "1.6.3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/esm/page-agent.js",
|
|
7
7
|
"module": "./dist/esm/page-agent.js",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"postpublish": "node -e \"['README.md','LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@page-agent/core": "1.6.
|
|
48
|
-
"@page-agent/llms": "1.6.
|
|
49
|
-
"@page-agent/page-controller": "1.6.
|
|
50
|
-
"@page-agent/ui": "1.6.
|
|
47
|
+
"@page-agent/core": "1.6.3",
|
|
48
|
+
"@page-agent/llms": "1.6.3",
|
|
49
|
+
"@page-agent/page-controller": "1.6.3",
|
|
50
|
+
"@page-agent/ui": "1.6.3",
|
|
51
51
|
"chalk": "^5.6.2"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|