@blumessage/react-chat 1.5.2 → 1.8.0

package/README.md

@@ -122,6 +122,7 @@ function App() {
 | `emptyStateText` | `string` | `"Start a conversation!"` | Text shown when no messages are present |
 | `markdown` | `boolean` | `true` | Enable markdown rendering for messages |
 | `disableAutoScroll` | `boolean` | `false` | Disable automatic scrolling to bottom when new messages arrive |
+| `context` | `Record<string, any>` | - | Arbitrary user context data (name, email, etc.) passed to the AI agent for personalized responses |
 | **Event Callbacks** |
 | `onUserMessage` | `(message: Message) => void` | - | Called when user sends message |
 | `onAssistantMessage` | `(message: Message) => void` | - | Called when assistant responds |
@@ -132,6 +133,25 @@ function App() {
 
 ## Advanced Usage Examples
 
+### Providing User Context
+
+Pass user data to help the AI agent personalize responses:
+
+```tsx
+<BlumessageChat 
+  apiKey="your-api-key"
+  context={{
+    name: "John Doe",
+    email: "john@example.com",
+    plan: "premium",
+    userId: 12345,
+    tags: ["vip", "early-adopter"],
+  }}
+/>
+```
+
+The `context` prop accepts any key-value pairs (`Record<string, any>`). Values can be strings, numbers, booleans, arrays, or objects. The context is sent with every message and merged on the server, so you can update it dynamically across the conversation.
+
 ### Dark Theme with Callbacks
 
 ```tsx

package/dist/BlumessageChat.js

@@ -237,7 +237,7 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))",
 // Help bubble props
 showHelpBubble = true, helpBubbleMessage = "Have a question? We're here to help!", helpBubbleIcon = 'message-circle-question-mark', helpBubbleIconName, helpBubbleShowAfter = 1, // 1 second
 helpBubbleHideAfter = 5, // 5 seconds
-helpBubbleBackgroundColor = "#000000", }, ref) => {
+helpBubbleBackgroundColor = "#000000", context, }, ref) => {
     const [isInitialized, setIsInitialized] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     const [messages, setMessages] = (0, react_1.useState)(initialMessages);
@@ -496,6 +496,10 @@ helpBubbleBackgroundColor = "#000000", }, ref) => {
             if (token) {
                 requestBody.token = token;
             }
+            // Include user context if provided
+            if (context && Object.keys(context).length > 0) {
+                requestBody.context = context;
+            }
             const response = await fetch('https://api.blumessage.com/api/v1/conversations', {
                 method: 'POST',
                 headers: {
@@ -711,6 +715,10 @@ helpBubbleBackgroundColor = "#000000", }, ref) => {
                 if (token) {
                     requestBody.token = token;
                 }
+                // Include user context if provided
+                if (context && Object.keys(context).length > 0) {
+                    requestBody.context = context;
+                }
                 const response = await fetch('https://api.blumessage.com/api/v1/conversations', {
                     method: 'POST',
                     headers: {