@robota-sdk/agent-web-ui 3.0.0-beta.64 → 3.0.0-beta.66
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 +90 -0
- package/dist/browser/index.js +336 -336
- package/dist/node/index.cjs +304 -304
- package/dist/node/index.js +336 -336
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# Agent Web UI
|
|
2
|
+
|
|
3
|
+
Browser React component library for monitoring a running `agent-cli` session over WebSocket. Provides a connection hook, conversation view, and a self-contained monitor widget.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @robota-sdk/agent-web-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
> This package is browser-only. It requires React 18+.
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { SessionMonitor } from '@robota-sdk/agent-web-ui';
|
|
17
|
+
|
|
18
|
+
function App() {
|
|
19
|
+
return <SessionMonitor url="ws://localhost:3001" className="my-monitor" />;
|
|
20
|
+
}
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
`SessionMonitor` connects to the CLI sidecar's WebSocket endpoint, replays history, and renders the conversation in real time.
|
|
24
|
+
|
|
25
|
+
## Components
|
|
26
|
+
|
|
27
|
+
### `SessionMonitor`
|
|
28
|
+
|
|
29
|
+
Self-contained widget. Renders connection status, conversation history, and a prompt input.
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
<SessionMonitor url="ws://localhost:3001" />
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### `ConversationView`
|
|
36
|
+
|
|
37
|
+
Pure rendering component for conversation messages. Use this when you manage WebSocket state yourself.
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { ConversationView } from '@robota-sdk/agent-web-ui';
|
|
41
|
+
|
|
42
|
+
<ConversationView
|
|
43
|
+
messages={messages}
|
|
44
|
+
activeTools={activeTools}
|
|
45
|
+
streamingText={streamingText}
|
|
46
|
+
isThinking={isThinking}
|
|
47
|
+
/>;
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Hook
|
|
51
|
+
|
|
52
|
+
### `useWsSession`
|
|
53
|
+
|
|
54
|
+
React hook that manages the WebSocket connection and reconstructs conversation state from server events.
|
|
55
|
+
|
|
56
|
+
```typescript
|
|
57
|
+
import { useWsSession } from '@robota-sdk/agent-web-ui';
|
|
58
|
+
|
|
59
|
+
const { status, messages, activeTools, streamingText, isThinking, send } = useWsSession(url);
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
| Field | Type | Description |
|
|
63
|
+
| --------------- | ------------------------ | -------------------------------------------------- |
|
|
64
|
+
| `status` | `TConnectionStatus` | `disconnected \| connecting \| connected \| error` |
|
|
65
|
+
| `messages` | `IConversationMessage[]` | Reconstructed conversation history |
|
|
66
|
+
| `activeTools` | `IActiveTool[]` | Currently running tool calls |
|
|
67
|
+
| `streamingText` | `string` | Partial streaming assistant text |
|
|
68
|
+
| `isThinking` | `boolean` | Whether the agent is processing |
|
|
69
|
+
| `send` | `(msg) => void` | Send a prompt to the agent |
|
|
70
|
+
|
|
71
|
+
## Architecture
|
|
72
|
+
|
|
73
|
+
This package is a pure browser UI library. It does not own session lifecycle or agent runtime state.
|
|
74
|
+
|
|
75
|
+
```
|
|
76
|
+
agent-web-ui (browser components)
|
|
77
|
+
└── useWsSession(url)
|
|
78
|
+
└── createWsSessionClient ← reconnects on disconnect
|
|
79
|
+
└── agent-transport/ws ← TServerMessage / TClientMessage types
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Dependencies
|
|
83
|
+
|
|
84
|
+
- `react` ^18 (peer)
|
|
85
|
+
- `@robota-sdk/agent-transport` (for WebSocket message types)
|
|
86
|
+
|
|
87
|
+
## Links
|
|
88
|
+
|
|
89
|
+
- [npm](https://www.npmjs.com/package/@robota-sdk/agent-web-ui)
|
|
90
|
+
- [GitHub](https://github.com/woojubb/robota)
|