@uix-ai/agent 0.0.1
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 +128 -0
- package/dist/index.d.ts +1649 -0
- package/dist/index.js +2653 -0
- package/dist/index.js.map +1 -0
- package/package.json +57 -0
package/README.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# @uix-ai/agent
|
|
2
|
+
|
|
3
|
+
React components for rendering UIX Lucid IR conversations. From a single `<AgentChat>` drop-in to fully composable primitives.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @uix-ai/agent
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer dependencies: `react`, `@uix-ai/core`
|
|
12
|
+
|
|
13
|
+
## Quick Start (3 lines)
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { AgentChat } from '@uix-ai/agent'
|
|
17
|
+
|
|
18
|
+
<AgentChat
|
|
19
|
+
conversations={conversations}
|
|
20
|
+
onSend={(text) => sendToAgent(text)}
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Integration with Adapters
|
|
25
|
+
|
|
26
|
+
### With Vercel AI SDK
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { AgentChat } from '@uix-ai/agent'
|
|
30
|
+
import { useVercelChat } from '@uix-ai/adapter-vercel/react'
|
|
31
|
+
|
|
32
|
+
function App() {
|
|
33
|
+
const { conversations, status, send, stop } = useVercelChat()
|
|
34
|
+
return <AgentChat conversations={conversations} status={status} onSend={send} onStop={stop} />
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### With AG-UI
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { AgentChat } from '@uix-ai/agent'
|
|
42
|
+
import { useAGUI } from '@uix-ai/adapter-agui/react'
|
|
43
|
+
|
|
44
|
+
function App() {
|
|
45
|
+
const { conversations, status, send } = useAGUI({ url: '/api/agent' })
|
|
46
|
+
return <AgentChat conversations={conversations} status={status} onSend={send} />
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## AgentChat Props
|
|
51
|
+
|
|
52
|
+
| Prop | Type | Default | Description |
|
|
53
|
+
|------|------|---------|-------------|
|
|
54
|
+
| `conversations` | `LucidConversation[]` | *required* | Conversation data from any adapter |
|
|
55
|
+
| `agent` | `ChatWindowAgent \| null` | `null` | Agent info for the header (`{ id, name, status }`) |
|
|
56
|
+
| `status` | `'idle' \| 'loading' \| 'streaming' \| 'error'` | `'idle'` | Controls input state and submit button |
|
|
57
|
+
| `onSend` | `(message: string) => void` | -- | Called when user sends a message |
|
|
58
|
+
| `onStop` | `() => void` | -- | Called when user clicks stop during streaming |
|
|
59
|
+
| `onRetry` | `() => void` | -- | Called when user clicks retry on error |
|
|
60
|
+
| `onToolApprove` | `(toolCallId: string) => void` | -- | Called when user approves a tool execution |
|
|
61
|
+
| `onToolDeny` | `(toolCallId: string, reason?: string) => void` | -- | Called when user denies a tool execution |
|
|
62
|
+
| `placeholder` | `string` | `'...'` | Input placeholder text |
|
|
63
|
+
| `emptyState` | `{ icon?, title?, description? }` | -- | Empty state configuration |
|
|
64
|
+
| `renderBlock` | `(block, conversation) => ReactNode \| null` | -- | Custom block renderer; return `null` to fall back to default |
|
|
65
|
+
| `showHeader` | `boolean` | `true` if `agent` set | Whether to show the header |
|
|
66
|
+
| `autoScroll` | `boolean` | `true` | Auto scroll to bottom on new messages |
|
|
67
|
+
|
|
68
|
+
## Composable Components
|
|
69
|
+
|
|
70
|
+
For full control, use the individual building blocks instead of `<AgentChat>`:
|
|
71
|
+
|
|
72
|
+
### Layout
|
|
73
|
+
|
|
74
|
+
- **`ChatWindow`** -- top-level container with agent/status context
|
|
75
|
+
- **`ChatWindowHeader`** -- header bar showing agent info and status
|
|
76
|
+
- **`ChatWindowMessages`** -- scrollable message area with auto-scroll
|
|
77
|
+
- **`ChatWindowInput`** -- message input area
|
|
78
|
+
- **`ChatWindowEmpty`** -- empty state placeholder
|
|
79
|
+
- **`ChatList`** -- list of multiple chat sessions
|
|
80
|
+
|
|
81
|
+
### Messages
|
|
82
|
+
|
|
83
|
+
- **`ChatMessage`** -- single message wrapper with role-based styling
|
|
84
|
+
- **`ChatMessageAvatar`** -- avatar slot within a message
|
|
85
|
+
- **`ChatMessageContent`** -- content slot within a message
|
|
86
|
+
- **`ChatMessageTimestamp`** -- timestamp display
|
|
87
|
+
- **`MessageList`** -- renders an array of messages
|
|
88
|
+
- **`ChatBubble`** -- styled message bubble
|
|
89
|
+
|
|
90
|
+
### Blocks
|
|
91
|
+
|
|
92
|
+
- **`StreamText`** -- streaming text with cursor animation
|
|
93
|
+
- **`ThinkingIndicator`** -- thinking/reasoning block display
|
|
94
|
+
- **`ToolResult`** -- tool call result with status indicator
|
|
95
|
+
- **`SourceBlock` / `SourceList`** -- citation/source blocks for RAG
|
|
96
|
+
|
|
97
|
+
### Avatars
|
|
98
|
+
|
|
99
|
+
- **`Avatar`** -- base avatar component
|
|
100
|
+
- **`AvatarGroup`** -- grouped avatar display
|
|
101
|
+
- **`AgentAvatar`** -- agent avatar with status indicator
|
|
102
|
+
- **`MessageAvatar`** -- role-based avatar
|
|
103
|
+
|
|
104
|
+
### Input
|
|
105
|
+
|
|
106
|
+
- **`ChatInput`** -- text input with send button
|
|
107
|
+
- **`MentionPopover`** -- @-mention popover
|
|
108
|
+
|
|
109
|
+
## Custom Block Rendering
|
|
110
|
+
|
|
111
|
+
Override how specific block types are rendered:
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
<AgentChat
|
|
115
|
+
conversations={conversations}
|
|
116
|
+
onSend={send}
|
|
117
|
+
renderBlock={(block, conversation) => {
|
|
118
|
+
if (block.type === 'tool') {
|
|
119
|
+
return <MyCustomToolView block={block} />
|
|
120
|
+
}
|
|
121
|
+
return null // fall back to default rendering
|
|
122
|
+
}}
|
|
123
|
+
/>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Links
|
|
127
|
+
|
|
128
|
+
- [UIX Repository](https://github.com/Deepractice/UIX)
|