@eloquentai/chat-sdk 0.30.5 → 0.30.7-dev
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 +146 -6
- package/dist/{index-Cbdd-n4F.js → index-COKq1-Ka.js} +7 -7
- package/dist/{index-Cbdd-n4F.js.map → index-COKq1-Ka.js.map} +1 -1
- package/dist/{index-CXmy8chu.js → index-D9HtkUHO.js} +2 -2
- package/dist/{index-CXmy8chu.js.map → index-D9HtkUHO.js.map} +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ React SDK for integrating Eloquent AI's chat functionality into your application
|
|
|
4
4
|
|
|
5
5
|
## Prerequisites
|
|
6
6
|
|
|
7
|
-
- React 18 or higher
|
|
7
|
+
- React 18 or higher (only for the React implementation)
|
|
8
8
|
- Node.js 18 or higher
|
|
9
9
|
- A modern browser that supports ES6+
|
|
10
10
|
|
|
@@ -25,7 +25,7 @@ pnpm add @eloquentai/chat-sdk
|
|
|
25
25
|
|
|
26
26
|
### React Implementation
|
|
27
27
|
|
|
28
|
-
To use the SDK in a React application,
|
|
28
|
+
To use the SDK in a React application, import the `Chat` component from the SDK.
|
|
29
29
|
|
|
30
30
|
```jsx
|
|
31
31
|
import { Chat } from "@eloquentai/chat-sdk";
|
|
@@ -35,28 +35,168 @@ function App() {
|
|
|
35
35
|
<Chat
|
|
36
36
|
// REQUIRED - Your Eloquent AI app ID
|
|
37
37
|
appId="YOUR_APP_ID"
|
|
38
|
-
// OPTIONAL - You can provide
|
|
38
|
+
// OPTIONAL - You can provide a unique id that should be used to identify the user
|
|
39
39
|
userId={crypto.randomUUID()}
|
|
40
40
|
/>
|
|
41
41
|
);
|
|
42
42
|
}
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
+
Don't forget to import the base styles once, somewhere in your app:
|
|
46
|
+
|
|
47
|
+
```jsx
|
|
48
|
+
import "@eloquentai/chat-sdk/index.css";
|
|
49
|
+
```
|
|
50
|
+
|
|
45
51
|
### Vanilla Implementation
|
|
46
52
|
|
|
47
|
-
To use the SDK in a vanilla environment,
|
|
53
|
+
To use the SDK in a vanilla environment, include the script tag in your HTML file and call `renderChat`.
|
|
48
54
|
|
|
49
55
|
```html
|
|
50
56
|
<script src="https://unpkg.com/@eloquentai/chat-sdk"></script>
|
|
51
57
|
|
|
52
|
-
<div id="chat"></div>
|
|
58
|
+
<div id="chat-container"></div>
|
|
53
59
|
|
|
54
60
|
<script>
|
|
55
61
|
EloquentChatSDK.renderChat(document.getElementById("chat-container"), {
|
|
56
62
|
// REQUIRED - Your Eloquent AI app ID
|
|
57
63
|
appId: "YOUR_APP_ID",
|
|
58
|
-
// OPTIONAL - You can provide
|
|
64
|
+
// OPTIONAL - You can provide a unique id that should be used to identify the user
|
|
59
65
|
userId: crypto.randomUUID(),
|
|
60
66
|
});
|
|
61
67
|
</script>
|
|
62
68
|
```
|
|
69
|
+
|
|
70
|
+
`renderChat` returns an unmount function you can call to remove the chat widget:
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<script>
|
|
74
|
+
const unmount = EloquentChatSDK.renderChat(
|
|
75
|
+
document.getElementById("chat-container"),
|
|
76
|
+
{ appId: "YOUR_APP_ID" },
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
// Later, to remove the widget:
|
|
80
|
+
unmount();
|
|
81
|
+
</script>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Features
|
|
85
|
+
|
|
86
|
+
- **Floating chat widget** — a launcher bubble plus chat window, rendered in an isolated iframe so host page styles never leak in or out.
|
|
87
|
+
- **Real-time messaging** — assistant replies stream in over a WebSocket connection (AWS AppSync), with automatic reconnect and a backup polling fallback if the socket drops.
|
|
88
|
+
- **Conversation persistence** — the active conversation is restored automatically (e.g. on page reload) via local storage.
|
|
89
|
+
- **User identification** — supports anonymous device-based identity as well as an optional external user ID and custom user metadata.
|
|
90
|
+
- **Proactive/welcome messages** — an optional message bubble can appear automatically to invite users to start a conversation.
|
|
91
|
+
- **Chat ratings** — users can rate a conversation after it's closed or escalated.
|
|
92
|
+
- **Human handoff / escalation** — the SDK recognizes when a conversation is escalated to a human agent and closes the AI chat session accordingly.
|
|
93
|
+
- **Theming** — customize bubble colors and legal text to match your brand.
|
|
94
|
+
- **Mobile responsive** — automatically adapts layout for mobile viewports.
|
|
95
|
+
|
|
96
|
+
## Configuration
|
|
97
|
+
|
|
98
|
+
### `Chat` component props
|
|
99
|
+
|
|
100
|
+
| Prop | Type | Required | Description |
|
|
101
|
+
| --------------------------- | --------------------------------------------- | -------- | -------------------------------------------------------------------------------------- |
|
|
102
|
+
| `appId` | `string` | Yes | Your Eloquent AI application ID. |
|
|
103
|
+
| `userId` | `string` | No | A unique identifier for the user. If omitted, an anonymous device ID is used instead. |
|
|
104
|
+
| `userName` | `string` | No | A display name for the user. |
|
|
105
|
+
| `userData` | `Record<string, string \| number \| boolean>` | No | Arbitrary metadata attached to the user/conversation (e.g. plan, account type). |
|
|
106
|
+
| `theme` | `Partial<ThemeContextType>` | No | Theming overrides — see [Theming](#theming) below. |
|
|
107
|
+
| `chatProps` | `Partial<ChatInterfaceProps>` | No | Fine-grained UI configuration — see [Chat interface options](#chat-interface-options). |
|
|
108
|
+
| `isMobile` | `boolean` | No | Force mobile layout instead of relying on automatic viewport detection. |
|
|
109
|
+
| `closeButton` | `boolean` (default: `true`) | No | Show/hide the close button in the chat header. |
|
|
110
|
+
| `cleanChatButton` | `boolean` (default: `true`) | No | Show/hide the "start new chat" button. |
|
|
111
|
+
| `initialOpen` | `boolean` (default: `false`) | No | Whether the chat window is open by default. |
|
|
112
|
+
| `proactiveMessageHideDelay` | `number` (default: `5000`) | No | Milliseconds before the proactive/welcome message auto-hides. |
|
|
113
|
+
|
|
114
|
+
### Chat interface options
|
|
115
|
+
|
|
116
|
+
Passed via the `chatProps` prop.
|
|
117
|
+
|
|
118
|
+
| Prop | Type | Description |
|
|
119
|
+
| ------------------------ | -------------------------------- | ----------------------------------------------------- |
|
|
120
|
+
| `displayWelcomeMessages` | `boolean` | Enable the proactive welcome message bubble. |
|
|
121
|
+
| `assistantName` | `string` | Name shown for the assistant in the chat header. |
|
|
122
|
+
| `assistantLogo` | `string` | URL of the logo shown for the assistant. |
|
|
123
|
+
| `legalText` | `string` | Legal/disclaimer text shown in the chat window. |
|
|
124
|
+
| `hideCopyButton` | `boolean` | Hide the "copy message" button on assistant messages. |
|
|
125
|
+
| `collectUserFeedback` | `boolean` | Enable thumbs up/down feedback on assistant messages. |
|
|
126
|
+
| `suggestedMessages` | `boolean` | Show suggested message chips to the user. |
|
|
127
|
+
| `title` | `string` | Title shown in the chat header. |
|
|
128
|
+
| `subtitle` | `string` | Subtitle shown in the chat header. |
|
|
129
|
+
| `onMessageClick` | `(message: MessageData) => void` | Callback fired when a message is clicked. |
|
|
130
|
+
|
|
131
|
+
### Theming
|
|
132
|
+
|
|
133
|
+
```jsx
|
|
134
|
+
<Chat
|
|
135
|
+
appId="YOUR_APP_ID"
|
|
136
|
+
theme={{
|
|
137
|
+
userBubbleColor: "#6f34b7",
|
|
138
|
+
legalText: "Powered by Eloquent AI",
|
|
139
|
+
}}
|
|
140
|
+
/>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
| Property | Description |
|
|
144
|
+
| ----------------- | ------------------------------------------------ |
|
|
145
|
+
| `userBubbleColor` | Background color of the end-user's chat bubbles. |
|
|
146
|
+
| `legalText` | Legal/disclaimer text rendered below the input. |
|
|
147
|
+
|
|
148
|
+
## Advanced usage
|
|
149
|
+
|
|
150
|
+
### `renderChat`
|
|
151
|
+
|
|
152
|
+
Programmatically mount the chat widget into any DOM element — used internally by the vanilla/UMD build, but also available from the ES module for non-JSX setups:
|
|
153
|
+
|
|
154
|
+
```js
|
|
155
|
+
import { renderChat } from "@eloquentai/chat-sdk";
|
|
156
|
+
|
|
157
|
+
const unmount = renderChat(document.getElementById("chat-container"), {
|
|
158
|
+
appId: "YOUR_APP_ID",
|
|
159
|
+
});
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### `ChatInterface`
|
|
163
|
+
|
|
164
|
+
The chat window UI without the floating launcher bubble or iframe isolation, for embedding the chat directly into your own layout (e.g. a dedicated support page).
|
|
165
|
+
|
|
166
|
+
```jsx
|
|
167
|
+
import { ChatInterface } from "@eloquentai/chat-sdk";
|
|
168
|
+
|
|
169
|
+
<ChatInterface
|
|
170
|
+
isOpen
|
|
171
|
+
closeButton={false}
|
|
172
|
+
cleanChatButton
|
|
173
|
+
messages={messages}
|
|
174
|
+
onSendMessage={onSendMessage}
|
|
175
|
+
/>;
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
### `useRealtimeSocket`
|
|
179
|
+
|
|
180
|
+
A lower-level hook for subscribing directly to the real-time conversation event stream, if you need custom message handling outside of the provided components.
|
|
181
|
+
|
|
182
|
+
```jsx
|
|
183
|
+
import { useRealtimeSocket } from "@eloquentai/chat-sdk";
|
|
184
|
+
|
|
185
|
+
const { connect, disconnect, clearProcessedIds } = useRealtimeSocket({
|
|
186
|
+
chatSettings,
|
|
187
|
+
chatId,
|
|
188
|
+
messages,
|
|
189
|
+
onMessage: (response, chatId) => {
|
|
190
|
+
/* handle incoming assistant message */
|
|
191
|
+
},
|
|
192
|
+
onCognition: (content) => {
|
|
193
|
+
/* assistant is "thinking" */
|
|
194
|
+
},
|
|
195
|
+
onCognitionComplete: () => {},
|
|
196
|
+
fetchHistory: async (chatId) => [],
|
|
197
|
+
});
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
## Support
|
|
201
|
+
|
|
202
|
+
For issues, feature requests, or questions, please contact the Eloquent AI team.
|
|
@@ -6,16 +6,16 @@ import Vg, { createPortal as gs } from "react-dom";
|
|
|
6
6
|
import Wg from "react-dom/client";
|
|
7
7
|
try {
|
|
8
8
|
let e = typeof window < "u" ? window : typeof global < "u" ? global : typeof globalThis < "u" ? globalThis : typeof self < "u" ? self : {}, t = new e.Error().stack;
|
|
9
|
-
t && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[t] = "
|
|
9
|
+
t && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[t] = "7b343e2e-f050-43b6-8d70-06fe06261be7", e._sentryDebugIdIdentifier = "sentry-dbid-7b343e2e-f050-43b6-8d70-06fe06261be7");
|
|
10
10
|
} catch {
|
|
11
11
|
}
|
|
12
12
|
{
|
|
13
13
|
let e = typeof window < "u" ? window : typeof global < "u" ? global : typeof globalThis < "u" ? globalThis : typeof self < "u" ? self : {};
|
|
14
|
-
e.SENTRY_RELEASE = { id: "
|
|
14
|
+
e.SENTRY_RELEASE = { id: "111b4448f67f8b915a17020a7b4e4993bf5be766" };
|
|
15
15
|
}
|
|
16
16
|
if (typeof window < "u") {
|
|
17
|
-
const e = "
|
|
18
|
-
import("./index-
|
|
17
|
+
const e = "development";
|
|
18
|
+
import("./index-D9HtkUHO.js").then((t) => {
|
|
19
19
|
t.init({
|
|
20
20
|
dsn: void 0,
|
|
21
21
|
environment: e,
|
|
@@ -11622,7 +11622,7 @@ function Tw() {
|
|
|
11622
11622
|
})(Va)), Va;
|
|
11623
11623
|
}
|
|
11624
11624
|
var fi = Tw();
|
|
11625
|
-
const Pw = { BASE_URL: "/", DEV: !1, MODE: "
|
|
11625
|
+
const Pw = { BASE_URL: "/", DEV: !1, MODE: "dev", PROD: !0, SSR: !1, VITE_API_URL: "https://chat.eloquentai.dev", VITE_CDN_URL: "https://cdn.eloquentai.dev", VITE_ENVIRONMENT: "dev", VITE_REGION_API_URL: "https://region.eloquentai.dev" }, Ow = "/assets/logo-waiting-simple.riv";
|
|
11626
11626
|
function ll(e) {
|
|
11627
11627
|
return typeof window > "u" || typeof import.meta > "u" ? "" : Pw[e] || "";
|
|
11628
11628
|
}
|
|
@@ -25137,7 +25137,7 @@ function uA() {
|
|
|
25137
25137
|
return e || t;
|
|
25138
25138
|
}
|
|
25139
25139
|
function fA() {
|
|
25140
|
-
return Nl() && typeof process.env == "object" && "VITE_ENVIRONMENT=
|
|
25140
|
+
return Nl() && typeof process.env == "object" && "VITE_ENVIRONMENT=dev tsc -b && vite build --mode dev".startsWith("ng ") || !1;
|
|
25141
25141
|
}
|
|
25142
25142
|
function dA() {
|
|
25143
25143
|
return typeof navigator < "u" && typeof navigator.product < "u" && navigator.product === "ReactNative";
|
|
@@ -30748,4 +30748,4 @@ export {
|
|
|
30748
30748
|
DN as r,
|
|
30749
30749
|
gN as u
|
|
30750
30750
|
};
|
|
30751
|
-
//# sourceMappingURL=index-
|
|
30751
|
+
//# sourceMappingURL=index-COKq1-Ka.js.map
|