@uraiagent/react 0.0.2 → 0.0.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 +133 -100
- package/dist/components/User/UserMessage.d.ts +1 -1
- package/dist/hooks/index.d.ts +0 -1
- package/dist/index.cjs.js +26 -188
- package/dist/index.d.ts +4 -4
- package/dist/index.es.js +50608 -84541
- package/dist/utils/index.d.ts +0 -30
- package/dist-embed/agent.js +30 -186
- package/package.json +2 -32
- package/dist/hooks/useToast.d.ts +0 -44
package/README.md
CHANGED
|
@@ -1,133 +1,166 @@
|
|
|
1
|
-
# uraiagent
|
|
1
|
+
# @uraiagent/react
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
## Installation
|
|
8
|
-
|
|
9
|
-
Install the package via npm:
|
|
3
|
+
A customizable, embeddable AI chat widget. Use it as a **React component** in an
|
|
4
|
+
existing app, or as a **drop-in `<script>`** on any website. Both bundles inject
|
|
5
|
+
their own CSS — there is no separate stylesheet to load.
|
|
10
6
|
|
|
11
7
|
```bash
|
|
12
|
-
npm install uraiagent
|
|
8
|
+
npm install @uraiagent/react
|
|
13
9
|
```
|
|
14
10
|
|
|
11
|
+
> See [`INSTALL.md`](./INSTALL.md) for the inline `<script>` / CDN embed, and for
|
|
12
|
+
> maintainer publishing notes.
|
|
13
|
+
|
|
15
14
|
---
|
|
16
15
|
|
|
17
|
-
## Usage
|
|
16
|
+
## Usage (React)
|
|
17
|
+
|
|
18
|
+
Wrap the widget in `<Root>` and pass a single grouped `config` object. `identity`
|
|
19
|
+
and `connection` are required; everything else is optional.
|
|
18
20
|
|
|
19
21
|
```tsx
|
|
20
|
-
import
|
|
21
|
-
import { Root } from "agent-widget";
|
|
22
|
+
import { Root, AgentWidget } from "@uraiagent/react";
|
|
22
23
|
|
|
23
|
-
|
|
24
|
+
export default function Agent() {
|
|
24
25
|
return (
|
|
25
26
|
<Root
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
config={{
|
|
28
|
+
identity: {
|
|
29
|
+
token: "your_widget_token",
|
|
30
|
+
organizationId: "your_org_id",
|
|
31
|
+
agentId: "your_agent_id",
|
|
32
|
+
},
|
|
33
|
+
connection: {
|
|
34
|
+
api: "https://api.uraiagent.com",
|
|
35
|
+
},
|
|
36
|
+
content: {
|
|
37
|
+
initialMessage: "Hi! How can I help?",
|
|
38
|
+
description: { visible: true, text: "We usually reply in a minute." },
|
|
39
|
+
},
|
|
40
|
+
behavior: {
|
|
41
|
+
defaultOpen: false,
|
|
42
|
+
language: "en",
|
|
43
|
+
},
|
|
44
|
+
people: {
|
|
45
|
+
agent: { name: "AI Bot" },
|
|
46
|
+
user: { name: "John Doe", email: "john@example.com" },
|
|
47
|
+
},
|
|
48
|
+
container: {
|
|
49
|
+
style: {
|
|
50
|
+
position: "fixed",
|
|
51
|
+
right: "12px",
|
|
52
|
+
bottom: "12px",
|
|
53
|
+
zIndex: 2147483647,
|
|
54
|
+
},
|
|
35
55
|
},
|
|
36
|
-
}}
|
|
37
|
-
classNames={{
|
|
38
|
-
shadow: "xl",
|
|
39
56
|
}}
|
|
40
57
|
>
|
|
41
|
-
<
|
|
58
|
+
<AgentWidget />
|
|
42
59
|
</Root>
|
|
43
60
|
);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export default Agent;
|
|
61
|
+
}
|
|
47
62
|
```
|
|
48
63
|
|
|
49
|
-
|
|
64
|
+
### Exports
|
|
50
65
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
| `socket` | `string` | **Required** | URL for the WebSocket connection. |
|
|
60
|
-
| `headers` | `Record<string, string>` | `undefined` | Custom headers for API requests. |
|
|
61
|
-
| `queryParams` | `Record<string, string>` | `undefined` | Query parameters to append to API requests. |
|
|
62
|
-
| `initialMessage` | `string` | **Required** | Initial message to display in the chat widget. |
|
|
63
|
-
| `defaultOpen` | `boolean` | `false` | Whether the chat widget should be open by default. |
|
|
64
|
-
| `debug` | `boolean` | `false` | Enables debug mode for logging. |
|
|
65
|
-
| `warn` | `boolean` | `false` | Enables warning logs. |
|
|
66
|
-
| `language` | `string` | `undefined` | Sets the language of the chat widget. |
|
|
67
|
-
| `containerProps` | `React.DetailedHTMLProps` | `undefined` | Props for the container `<div>` element. |
|
|
68
|
-
| `closeOutside` | `boolean` | `true` | Allows closing the widget by clicking outside it. |
|
|
69
|
-
| `description` | `{ visible?: boolean; text?: string }` | `{ visible: false }` | Configures the description text. |
|
|
70
|
-
| `inputPlaceholder` | `string` | `undefined` | Placeholder text for the input field. |
|
|
71
|
-
| `components` | `ComponentType[]` | `[]` | Array of custom components to include in the widget. |
|
|
72
|
-
| `user` | `{ name?: string; email?: string; phone: string; avatar?: string; custom?: Record<string, string> }` | `undefined` | Information about the user interacting with the widget. |
|
|
73
|
-
| `agent` | `{ name?: string; logo?: string }` | `undefined` | Information about the agent or bot responding to messages. |
|
|
74
|
-
| `onClose` | `() => void` | `undefined` | Callback when the widget is closed. |
|
|
75
|
-
| `onHandoff` | `(handout: HandoffPayloadType) => void` | `undefined` | Callback for when a conversation is handed off to another service. |
|
|
66
|
+
| Export | Description |
|
|
67
|
+
| --- | --- |
|
|
68
|
+
| `Root` | Context provider + host container. Takes `config` and renders `children`. |
|
|
69
|
+
| `AgentWidget` | The chat UI (trigger button + panel). Render inside `<Root>`. |
|
|
70
|
+
| `AgentMessage`, `AgentMessageWrapper` | Building blocks for custom message components. |
|
|
71
|
+
| `WidgetConfig` | TypeScript type for the `config` prop. |
|
|
72
|
+
|
|
73
|
+
Peer dependencies: `react`, `react-dom`, `framer-motion`, `postcss`.
|
|
76
74
|
|
|
77
75
|
---
|
|
78
76
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
| **Property** | **Type** | **Default** | **Description** |
|
|
82
|
-
| ------------------ | --------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------- |
|
|
83
|
-
| `background` | `string` | `undefined` | Background color of the widget. |
|
|
84
|
-
| `color` | `string` | `undefined` | Text color for the widget. |
|
|
85
|
-
| `borderColor` | `string` | `undefined` | Color of the widget border. |
|
|
86
|
-
| `borderWidth` | `1 \| 2 \| 3 \| 4` | `1` | Width of the widget border. |
|
|
87
|
-
| `borderRadius` | `"none" \| "sm" \| "md" \| "xl"` | `"none"` | Border radius for the widget container. |
|
|
88
|
-
| `shadow` | `"none" \| "sm" \| "md" \| "xl"` | `"none"` | Shadow style for the widget. |
|
|
89
|
-
| `trigger` | `{ style?: string; icon?: ReactNode }` | `undefined` | Custom styles and icon for the widget trigger button. |
|
|
90
|
-
| `input` | `{ style?: string; wrapper?: string }` | `undefined` | Custom styles for the input field and wrapper. |
|
|
91
|
-
| `descriptionStyle` | `string` | `undefined` | Custom style for the description text. |
|
|
92
|
-
| `messages` | `{ agent?: { wrapper?: string; content?: string }; user?: { wrapper?: string; content?: string } }` | `undefined` | Custom styles for messages sent by the agent or user. |
|
|
77
|
+
## Configuration (`WidgetConfig`)
|
|
93
78
|
|
|
94
|
-
|
|
79
|
+
The config is grouped by concern. Only `identity` and `connection` are required.
|
|
95
80
|
|
|
96
|
-
|
|
81
|
+
### `identity` — required
|
|
97
82
|
|
|
98
|
-
|
|
83
|
+
| Field | Type | Description |
|
|
84
|
+
| --- | --- | --- |
|
|
85
|
+
| `token` | `string` | Widget ID from the dashboard. |
|
|
86
|
+
| `organizationId` | `string` | Organization that owns the widget. |
|
|
87
|
+
| `agentId` | `string` | Agent to route conversations to. |
|
|
99
88
|
|
|
100
|
-
|
|
101
|
-
<Root
|
|
102
|
-
options={{
|
|
103
|
-
token: "example_token",
|
|
104
|
-
api: "https://example.api",
|
|
105
|
-
socket: "https://example.socket",
|
|
106
|
-
initialMessage: "Welcome!",
|
|
107
|
-
}}
|
|
108
|
-
/>
|
|
109
|
-
```
|
|
89
|
+
### `connection` — required
|
|
110
90
|
|
|
111
|
-
|
|
91
|
+
| Field | Type | Description |
|
|
92
|
+
| --- | --- | --- |
|
|
93
|
+
| `api` | `string` | Backend API base URL, e.g. `https://api.example.com`. |
|
|
94
|
+
| `headers` | `Record<string, string>` | Extra headers on API requests. |
|
|
95
|
+
| `queryParams` | `Record<string, string>` | Extra query params on API requests. |
|
|
112
96
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
97
|
+
### `content` — optional
|
|
98
|
+
|
|
99
|
+
| Field | Type | Description |
|
|
100
|
+
| --- | --- | --- |
|
|
101
|
+
| `initialMessage` | `string` | First message shown in the panel. |
|
|
102
|
+
| `inputPlaceholder` | `string` | Placeholder for the input field. |
|
|
103
|
+
| `description` | `{ visible?: boolean; text?: string }` | Sub-header shown under the title. |
|
|
104
|
+
| `triggerIcon` | `ReactNode` | Custom node rendered inside the trigger button. |
|
|
105
|
+
|
|
106
|
+
### `behavior` — optional
|
|
107
|
+
|
|
108
|
+
| Field | Type | Default | Description |
|
|
109
|
+
| --- | --- | --- | --- |
|
|
110
|
+
| `defaultOpen` | `boolean` | `false` | Open the panel on mount. |
|
|
111
|
+
| `closeOutside` | `boolean` | `true` | Close when clicking outside the panel. |
|
|
112
|
+
| `debug` | `boolean` | `false` | Verbose debug logging. |
|
|
113
|
+
| `warn` | `boolean` | `false` | Warning logs. |
|
|
114
|
+
| `language` | `string` | — | UI language (e.g. `"en"`, `"ar"`). |
|
|
115
|
+
|
|
116
|
+
### `people` — optional
|
|
117
|
+
|
|
118
|
+
| Field | Type | Description |
|
|
119
|
+
| --- | --- | --- |
|
|
120
|
+
| `user` | `{ name?; email?; phone; avatar?; custom? }` | The end user. `custom` is `Record<string, string>`. |
|
|
121
|
+
| `agent` | `{ name?: string; logo?: string }` | The bot/agent identity. |
|
|
122
|
+
|
|
123
|
+
### `on` — optional callbacks
|
|
124
|
+
|
|
125
|
+
| Field | Type | Description |
|
|
126
|
+
| --- | --- | --- |
|
|
127
|
+
| `close` | `() => void` | Fired when the widget closes. |
|
|
128
|
+
| `handoff` | `(payload: HandoffPayloadType) => void` | Fired on human handoff. |
|
|
129
|
+
|
|
130
|
+
### Other
|
|
131
|
+
|
|
132
|
+
| Field | Type | Description |
|
|
133
|
+
| --- | --- | --- |
|
|
134
|
+
| `components` | `ComponentType[]` | Register custom message/event components. |
|
|
135
|
+
| `container` | `HTMLAttributes<HTMLDivElement>` | Props spread onto the host `<div>` (e.g. `style`, `className`). |
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## Theming
|
|
140
|
+
|
|
141
|
+
Styling is **not** part of `config`. The widget is pure namespaced CSS
|
|
142
|
+
(`.uraiagent-*`) driven by `--uw-*` design tokens on the `.uraiagent-root` host.
|
|
143
|
+
Retheme from your own stylesheet:
|
|
144
|
+
|
|
145
|
+
```css
|
|
146
|
+
.uraiagent-root {
|
|
147
|
+
--uw-font: "Inter", system-ui, sans-serif;
|
|
148
|
+
--uw-color-primary: #6d28d9;
|
|
149
|
+
--uw-color-primary-fg: #ffffff;
|
|
150
|
+
--uw-radius: 14px;
|
|
151
|
+
--uw-surface: #ffffff;
|
|
152
|
+
--uw-agent-bubble-bg: #f3f4f6;
|
|
153
|
+
--uw-user-bubble-bg: #6d28d9;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* target any inner part via its namespaced class */
|
|
157
|
+
#aiagent-root .uraiagent-agent-bubble {
|
|
158
|
+
padding: 16px 20px;
|
|
159
|
+
}
|
|
129
160
|
```
|
|
130
161
|
|
|
131
162
|
---
|
|
132
163
|
|
|
133
|
-
|
|
164
|
+
## License
|
|
165
|
+
|
|
166
|
+
UNLICENSED — © Abdellatif-E.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { UserMessageProps } from '
|
|
1
|
+
import { UserMessageProps } from '../../interfaces/messages';
|
|
2
2
|
export declare function UserMessage({ message, _id, createdAt }: UserMessageProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/hooks/index.d.ts
CHANGED