@vectorx/agent-simulator 1.0.0 → 1.1.0

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

@@ -0,0 +1,226 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebSocketDebugger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@ant-design/icons");
+const antd_1 = require("antd");
+const react_1 = require("react");
+const ThemeContext_1 = require("../contexts/ThemeContext");
+const WebSocketDebugger = ({ wsProxyBase }) => {
+    const { isDark } = (0, ThemeContext_1.useThemeHook)();
+    const { token } = antd_1.theme.useToken();
+    const [wsUrl, setWsUrl] = (0, react_1.useState)(wsProxyBase);
+    const [status, setStatus] = (0, react_1.useState)("disconnected");
+    const [messages, setMessages] = (0, react_1.useState)([]);
+    const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const [format, setFormat] = (0, react_1.useState)("text");
+    const wsRef = (0, react_1.useRef)(null);
+    const msgIdRef = (0, react_1.useRef)(0);
+    const messagesEndRef = (0, react_1.useRef)(null);
+    const scrollToBottom = (0, react_1.useCallback)(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        scrollToBottom();
+    }, [messages, scrollToBottom]);
+    const addMessage = (0, react_1.useCallback)((direction, content, size) => {
+        const msg = {
+            id: `msg-${++msgIdRef.current}`,
+            direction,
+            content,
+            timestamp: Date.now(),
+            size,
+        };
+        setMessages((prev) => [...prev, msg]);
+    }, []);
+    const connect = (0, react_1.useCallback)(() => {
+        if (wsRef.current) {
+            wsRef.current.close();
+        }
+        setStatus("connecting");
+        addMessage("system", `Connecting to ${wsUrl} ...`);
+        try {
+            const ws = new WebSocket(wsUrl);
+            wsRef.current = ws;
+            ws.onopen = () => {
+                setStatus("connected");
+                addMessage("system", "Connected successfully");
+            };
+            ws.onmessage = (event) => {
+                const data = typeof event.data === "string" ? event.data : "[Binary Data]";
+                const size = typeof event.data === "string" ? new Blob([event.data]).size : undefined;
+                addMessage("received", data, size);
+            };
+            ws.onclose = (event) => {
+                setStatus("disconnected");
+                addMessage("system", `Connection closed (code: ${event.code}${event.reason ? `, reason: ${event.reason}` : ""})`);
+                wsRef.current = null;
+            };
+            ws.onerror = () => {
+                setStatus("error");
+                addMessage("system", "Connection error");
+            };
+        }
+        catch (err) {
+            setStatus("error");
+            addMessage("system", `Failed to connect: ${err}`);
+        }
+    }, [wsUrl, addMessage]);
+    const disconnect = (0, react_1.useCallback)(() => {
+        if (wsRef.current) {
+            wsRef.current.close(1000, "User disconnected");
+            wsRef.current = null;
+        }
+    }, []);
+    const sendMessage = (0, react_1.useCallback)(() => {
+        if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN || !inputValue.trim())
+            return;
+        let payload = inputValue;
+        if (format === "json") {
+            try {
+                payload = JSON.stringify(JSON.parse(inputValue), null, 0);
+            }
+            catch {
+                addMessage("system", "Invalid JSON format");
+                return;
+            }
+        }
+        wsRef.current.send(payload);
+        addMessage("sent", payload, new Blob([payload]).size);
+        setInputValue("");
+    }, [inputValue, format, addMessage]);
+    const clearMessages = (0, react_1.useCallback)(() => {
+        setMessages([]);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            wsRef.current?.close();
+        };
+    }, []);
+    const getStatusColor = () => {
+        switch (status) {
+            case "connected":
+                return token.colorSuccess;
+            case "connecting":
+                return token.colorWarning;
+            case "error":
+                return token.colorError;
+            default:
+                return token.colorTextDisabled;
+        }
+    };
+    const getStatusText = () => {
+        switch (status) {
+            case "connected":
+                return "Connected";
+            case "connecting":
+                return "Connecting...";
+            case "error":
+                return "Error";
+            default:
+                return "Disconnected";
+        }
+    };
+    const getMessageStyle = (direction) => {
+        switch (direction) {
+            case "sent":
+                return {
+                    background: isDark ? "#112a11" : "#f0fff0",
+                    borderLeft: `3px solid ${token.colorSuccess}`,
+                };
+            case "received":
+                return {
+                    background: isDark ? "#0d1b2a" : "#f0f5ff",
+                    borderLeft: `3px solid ${token.colorPrimary}`,
+                };
+            case "system":
+                return {
+                    background: isDark ? "#1f1f1f" : "#fafafa",
+                    borderLeft: `3px solid ${token.colorTextDisabled}`,
+                };
+        }
+    };
+    const formatTimestamp = (ts) => {
+        const d = new Date(ts);
+        return d.toLocaleTimeString("en-US", { hour12: false, fractionalSecondDigits: 3 });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            background: token.colorBgContainer,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: "12px 16px",
+                    borderBottom: `1px solid ${token.colorBorderSecondary}`,
+                    display: "flex",
+                    gap: 8,
+                    alignItems: "center",
+                    flexShrink: 0,
+                }, children: [(0, jsx_runtime_1.jsx)(antd_1.Input, { value: wsUrl, onChange: (e) => setWsUrl(e.target.value), placeholder: "ws://localhost:PORT/path", disabled: status === "connected" || status === "connecting", style: { flex: 1 }, onPressEnter: () => {
+                            if (status === "disconnected" || status === "error")
+                                connect();
+                        } }), status === "connected" || status === "connecting" ? ((0, jsx_runtime_1.jsx)(antd_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.DisconnectOutlined, {}), danger: true, onClick: disconnect, children: "Disconnect" })) : ((0, jsx_runtime_1.jsx)(antd_1.Button, { type: "primary", icon: (0, jsx_runtime_1.jsx)(icons_1.ApiOutlined, {}), onClick: connect, children: "Connect" }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: "6px 16px",
+                    borderBottom: `1px solid ${token.colorBorderSecondary}`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    fontSize: 12,
+                    flexShrink: 0,
+                }, children: [(0, jsx_runtime_1.jsxs)(antd_1.Space, { size: 8, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                    width: 8,
+                                    height: 8,
+                                    borderRadius: "50%",
+                                    background: getStatusColor(),
+                                    display: "inline-block",
+                                } }), (0, jsx_runtime_1.jsx)("span", { style: { color: token.colorTextSecondary }, children: getStatusText() }), status === "connected" && ((0, jsx_runtime_1.jsx)(antd_1.Tag, { color: "green", style: { margin: 0 }, children: "WS" }))] }), (0, jsx_runtime_1.jsxs)(antd_1.Space, { size: 8, children: [(0, jsx_runtime_1.jsxs)("span", { style: { color: token.colorTextQuaternary }, children: [messages.filter((m) => m.direction !== "system").length, " messages"] }), (0, jsx_runtime_1.jsx)(antd_1.Tooltip, { title: "Clear messages", children: (0, jsx_runtime_1.jsx)(antd_1.Button, { type: "text", size: "small", icon: (0, jsx_runtime_1.jsx)(icons_1.CloseCircleOutlined, {}), onClick: clearMessages }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    flex: 1,
+                    overflow: "auto",
+                    padding: "8px 16px",
+                }, children: [messages.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            height: "100%",
+                            color: token.colorTextQuaternary,
+                            flexDirection: "column",
+                            gap: 8,
+                        }, children: [(0, jsx_runtime_1.jsx)(icons_1.ApiOutlined, { style: { fontSize: 32 } }), (0, jsx_runtime_1.jsx)("span", { children: "Enter a WebSocket URL and click Connect to start debugging" })] })) : (messages.map((msg) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            padding: "8px 12px",
+                            marginBottom: 4,
+                            borderRadius: 4,
+                            fontFamily: "monospace",
+                            fontSize: 13,
+                            ...getMessageStyle(msg.direction),
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    marginBottom: 4,
+                                    fontSize: 11,
+                                    color: token.colorTextSecondary,
+                                }, children: [(0, jsx_runtime_1.jsxs)(antd_1.Space, { size: 6, children: [(0, jsx_runtime_1.jsx)("span", { children: msg.direction === "sent"
+                                                    ? "SENT"
+                                                    : msg.direction === "received"
+                                                        ? "RECV"
+                                                        : "SYS" }), msg.size !== undefined && (0, jsx_runtime_1.jsxs)("span", { children: [msg.size, " bytes"] })] }), (0, jsx_runtime_1.jsx)("span", { children: formatTimestamp(msg.timestamp) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    wordBreak: "break-all",
+                                    whiteSpace: "pre-wrap",
+                                    color: msg.direction === "system" ? token.colorTextSecondary : token.colorText,
+                                }, children: msg.content })] }, msg.id)))), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: "12px 16px",
+                    borderTop: `1px solid ${token.colorBorderSecondary}`,
+                    display: "flex",
+                    gap: 8,
+                    alignItems: "flex-end",
+                    flexShrink: 0,
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 6 }, children: [(0, jsx_runtime_1.jsx)(antd_1.Radio.Group, { size: "small", value: format, onChange: (e) => setFormat(e.target.value), optionType: "button", buttonStyle: "solid", options: [
+                                    { label: "Text", value: "text" },
+                                    { label: "JSON", value: "json" },
+                                ] }), (0, jsx_runtime_1.jsx)(antd_1.Input.TextArea, { value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: format === "json" ? '{"key": "value"}' : "Type a message...", autoSize: { minRows: 1, maxRows: 4 }, disabled: status !== "connected", onPressEnter: (e) => {
+                                    if (!e.shiftKey) {
+                                        e.preventDefault();
+                                        sendMessage();
+                                    }
+                                } })] }), (0, jsx_runtime_1.jsx)(antd_1.Button, { type: "primary", icon: (0, jsx_runtime_1.jsx)(icons_1.SendOutlined, {}), onClick: sendMessage, disabled: status !== "connected" || !inputValue.trim(), children: "Send" })] })] }));
+};
+exports.WebSocketDebugger = WebSocketDebugger;

package/lib/webview-ui/widgets/index.d.ts

@@ -3,4 +3,3 @@ export * from "./SystemLogs";
 export * from "./LogPanel";
 export * from "./BubbleComponents";
 export * from "./ChatInput";
-//# sourceMappingURL=index.d.ts.map

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

@@ -19,4 +19,3 @@ __exportStar(require("./SystemLogs"), exports);
 __exportStar(require("./LogPanel"), exports);
 __exportStar(require("./BubbleComponents"), exports);
 __exportStar(require("./ChatInput"), exports);
-//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectorx/agent-simulator",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Development simulator for VectorX AI agents",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
@@ -24,14 +24,12 @@
   "author": "",
   "license": "ISC",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@ant-design/x": "^1.2.0",
     "@types/form-data": "^2.5.2",
-    "@vectorx/ai-sdk": "1.0.0",
-    "@vectorx/functions-framework": "1.0.0",
     "antd": "^5.0.0",
     "antd-style": "^3.7.1",
     "axios": "^1.11.0",
@@ -56,9 +54,14 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
-    "reflect-metadata": "^0.2.1"
+    "reflect-metadata": "^0.2.1",
+    "ws": "^8.18.0",
+    "@vectorx/ai-sdk": "1.1.0",
+    "@vectorx/endpoints": "1.1.0",
+    "@vectorx/functions-framework": "1.1.0"
   },
   "devDependencies": {
+    "@types/ws": "^8.5.10",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
     "@types/inversify": "^2.0.33",
@@ -88,6 +91,5 @@
     "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 "
+  }
 }