@vectorx/agent-simulator 0.1.0

package/lib/webview-ui/widgets/ToolBar.js

@@ -0,0 +1,109 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolBar = void 0;
+const icons_1 = require("@ant-design/icons");
+const antd_1 = require("antd");
+const react_1 = __importDefault(require("react"));
+const ToolBar = ({ agentSimulatorInfo, debugStatus, showSystemLogs, isConnecting = false, onRetryConnection, onClearChat, onToggleLogs, }) => {
+    var _a, _b, _c, _d, _e;
+    const { token } = antd_1.theme.useToken();
+    const getDebugStatusText = () => {
+        if (!agentSimulatorInfo) {
+            return "服务断开";
+        }
+        switch (debugStatus) {
+            case "connecting":
+                return "正在连接服务器...";
+            case "timeout":
+                return "连接超时";
+            case "normal":
+                return "正常";
+            case "error":
+                return "服务已断开";
+            default:
+                return "未知状态";
+        }
+    };
+    const copyAgentId = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const agentId = (_a = agentSimulatorInfo === null || agentSimulatorInfo === void 0 ? void 0 : agentSimulatorInfo.agentInfo) === null || _a === void 0 ? void 0 : _a.agent_id;
+        if (agentId) {
+            try {
+                yield navigator.clipboard.writeText(agentId);
+                antd_1.message.success("AgentId 已复制到剪贴板");
+            }
+            catch (err) {
+                const textArea = document.createElement("textarea");
+                textArea.value = agentId;
+                document.body.appendChild(textArea);
+                textArea.select();
+                document.execCommand("copy");
+                document.body.removeChild(textArea);
+                antd_1.message.success("AgentId 已复制到剪贴板");
+            }
+        }
+    });
+    return (react_1.default.createElement("header", { className: "app-header", style: {
+            background: token.colorBgElevated,
+        } },
+        react_1.default.createElement("div", { className: "agent-info", style: {
+                borderBottom: `1px solid ${token.colorBorder}`,
+            } },
+            react_1.default.createElement("div", { className: "agent-avatar", style: {
+                    background: token.colorBgElevated,
+                } }, ((_a = agentSimulatorInfo === null || agentSimulatorInfo === void 0 ? void 0 : agentSimulatorInfo.agentInfo) === null || _a === void 0 ? void 0 : _a.agent_icon) ? (react_1.default.createElement("img", { src: agentSimulatorInfo.agentInfo.agent_icon, alt: "Agent Avatar", onError: (e) => {
+                    e.target.src =
+                        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cpath fill='%23aaa' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E";
+                } })) : (react_1.default.createElement("img", { src: "/avatar-placeholder.png", alt: "Agent Avatar", onError: (e) => {
+                    e.target.src =
+                        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cpath fill='%23aaa' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E";
+                } }))),
+            react_1.default.createElement("div", { className: "agent-details" },
+                react_1.default.createElement("div", { className: "agent-info-left" },
+                    react_1.default.createElement("h1", { className: "agent-name", style: {
+                            color: token.colorText,
+                        } }, ((_b = agentSimulatorInfo === null || agentSimulatorInfo === void 0 ? void 0 : agentSimulatorInfo.agentInfo) === null || _b === void 0 ? void 0 : _b.agent_name) || "未连接")),
+                react_1.default.createElement("div", { className: "agent-info-right" },
+                    react_1.default.createElement("div", { className: "agent-id-container" },
+                        react_1.default.createElement("span", { className: "agent-id-value", title: ((_c = agentSimulatorInfo === null || agentSimulatorInfo === void 0 ? void 0 : agentSimulatorInfo.agentInfo) === null || _c === void 0 ? void 0 : _c.agent_id) || "获取中...", style: {
+                                color: token.colorText,
+                            } }, ((_d = agentSimulatorInfo === null || agentSimulatorInfo === void 0 ? void 0 : agentSimulatorInfo.agentInfo) === null || _d === void 0 ? void 0 : _d.agent_id) || "获取中..."),
+                        ((_e = agentSimulatorInfo === null || agentSimulatorInfo === void 0 ? void 0 : agentSimulatorInfo.agentInfo) === null || _e === void 0 ? void 0 : _e.agent_id) && (react_1.default.createElement(antd_1.Button, { className: "copy-icon", type: "text", size: "small", icon: react_1.default.createElement(icons_1.CopyOutlined, null), onClick: copyAgentId, title: "\u70B9\u51FB\u590D\u5236 AgentId", style: {
+                                padding: "0 4px",
+                                minWidth: "auto",
+                                height: "auto",
+                            } })))))),
+        react_1.default.createElement("div", { className: "debug-controls" },
+            react_1.default.createElement("div", { className: "debug-status" },
+                react_1.default.createElement("span", { className: "status-label", style: {
+                        color: token.colorText,
+                    } }, "\u8C03\u8BD5\u72B6\u6001:"),
+                react_1.default.createElement("span", { className: `status-indicator ${!agentSimulatorInfo ? "error" : debugStatus}` }, getDebugStatusText())),
+            react_1.default.createElement("div", { className: "debug-buttons", style: { display: "flex", gap: "8px" } },
+                react_1.default.createElement(antd_1.Button, { size: "small", icon: react_1.default.createElement(icons_1.ClearOutlined, null), onClick: onClearChat, title: "\u6E05\u7A7A\u804A\u5929\u8BB0\u5F55", style: {
+                        borderColor: token.colorWarning,
+                        color: token.colorWarning,
+                    } }, "\u6E05\u7A7A\u804A\u5929"),
+                react_1.default.createElement(antd_1.Button, { size: "small", onClick: onToggleLogs, style: {
+                        borderColor: showSystemLogs ? token.colorPrimary : token.colorPrimary,
+                        color: showSystemLogs ? "#fff" : token.colorPrimary,
+                        backgroundColor: showSystemLogs ? token.colorPrimary : "transparent",
+                    } }, "\uD83D\uDCCB \u65E5\u5FD7"),
+                react_1.default.createElement(antd_1.Button, { size: "small", icon: react_1.default.createElement(icons_1.ApiOutlined, null), onClick: onRetryConnection, loading: isConnecting, title: isConnecting ? "正在连接服务器..." : "重新连接服务器", style: {
+                        borderColor: token.colorSuccess,
+                        color: token.colorSuccess,
+                    } }, isConnecting ? "连接中..." : "重试连接")))));
+};
+exports.ToolBar = ToolBar;

package/lib/webview-ui/widgets/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BubbleComponents"), exports);
+__exportStar(require("./SystemLogs"), exports);
+__exportStar(require("./ToolBar"), exports);
+__exportStar(require("./LogPanel"), exports);

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@vectorx/agent-simulator",
+  "version": "0.1.0",
+  "description": "Development simulator for VectorX AI agents",
+  "main": "lib/index.js",
+  "types": "types/index.d.ts",
+  "bin": {
+    "agent": "./bin/agent.js"
+  },
+  "files": [
+    "lib",
+    "bin",
+    "README.md",
+    "public",
+    "types"
+  ],
+  "keywords": [
+    "ai",
+    "agent",
+    "simulator",
+    "development",
+    "debug"
+  ],
+  "author": "",
+  "license": "ISC",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.2.6",
+    "@ant-design/x": "^1.2.0",
+    "@types/markdown-it": "^14.1.2",
+    "@vectorx/ai-sdk": "0.1.0",
+    "@vectorx/functions-framework": "0.1.0",
+    "antd": "^5.0.0",
+    "antd-style": "^3.7.1",
+    "chalk": "^4.1.2",
+    "commander": "^11.1.0",
+    "cors": "^2.8.5",
+    "dayjs": "^1.11.13",
+    "express": "^4.18.2",
+    "highlight.js": "^11.9.0",
+    "http-proxy-middleware": "^2.0.6",
+    "markdown-it": "^14.1.0",
+    "marked": "^11.1.0",
+    "node-fetch": "v2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/marked": "^5.0.2",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.8"
+  },
+  "scripts": {
+    "dev:server": "tsc -w",
+    "dev:client": "vite",
+    "dev": "npm run dev:server & npm run dev:client",
+    "build:server": "tsc",
+    "build:client": "vite build",
+    "build": "npm run build:server && npm run build:client",
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "fix": "eslint 'src/**/*.{ts,tsx}' --fix"
+  },
+  "readme": "# VectorX Agent Simulator\n\nVectorX Agent模拟器是一个开发工具，用于帮助开发和调试AI代理应用。它提供了一个简单的界面和调试环境，允许开发者在本地模拟API请求和响应。\n\n## 特性\n\n- 提供Web界面用于实时查看模拟器状态\n- 使用标准 Fetch API 直接连接Agent服务\n- 支持流式响应和普通 JSON 响应\n- 提供命令行工具，便于快速启动和配置\n\n## 安装\n\n```bash\n# 在项目根目录安装依赖\nnpm install\n\n# 构建模拟器\ncd packages/vectorx-agent-simulator\nnpm run build\n```\n\n## 实现方式\n\nVectorX Agent Simulator 使用标准的 Fetch API 直接连接Agent服务。\n\n这种实现方式具有以下优势：\n- 使用标准 Web API，无需额外依赖\n- 直接与Agent服务通信，无需模拟层\n- 支持流式响应，实时更新内容\n- 便于理解和扩展\n\n## 使用方法\n\n### 命令行\n\n使用以下命令启动模拟器：\n\n```bash\nagent -p 3001 --agent-server-url http://localhost:3000/v1/aiagent/agents/123\n```\n\n#### 命令行参数\n\n- `-p, --port <port>`: 模拟器HTTP服务端口 (默认: 3001)\n- `--agent-server-url <agentServerUrl>`: **[必填]** Agent服务器完整URL地址，例如: http://localhost:3000/v1/aiagent/agents/123\n- `-o, --open`: 启动后自动打开浏览器 (默认: true)\n\n#### 示例\n\n```bash\n# 基本使用\nagent --agent-server-url http://localhost:3000/v1/aiagent/agents/my-agent\n\n# 指定端口\nagent -p 8080 --agent-server-url http://localhost:3000/v1/aiagent/agents/my-agent\n\n# 不自动打开浏览器\nagent --agent-server-url http://localhost:3000/v1/aiagent/agents/my-agent --no-open\n```\n\n## 开发\n\n要在开发模式下运行模拟器：\n\n```bash\n# 监视文件变化并重新构建\nnpm run dev\n\n# 在另一个终端启动模拟器\nnode bin/agent.js --agent-server-url http://localhost:3000/v1/aiagent/agents/demo-agent\n```\n\n## 许可证\n\nISC "
+}