@asgard-js/react 0.2.7-canary.1 → 0.2.7

package/README.md

@@ -846,6 +846,44 @@ interface MessageContentRendererProps {
 }
 ```
 
+#### Why MessageContainer?
+
+When you use `renderMessageContent` to customize rendering, it completely replaces the default Template. This means **Avatar will not display automatically**, because Avatar is part of the default Template.
+
+Use `MessageContainer` to wrap your custom content and automatically get:
+
+- **Bot messages**: Avatar + timestamp
+- **User messages**: Proper right-aligned styling
+
+#### Understanding payload
+
+The `payload` is custom data set by the backend Bot Provider when responding to messages. The SDK passes it directly to `renderMessageContent` without modification.
+
+**Backend response example (Bot Provider):**
+
+```json
+{
+  "template": { "type": "text", "text": "Here is your order" },
+  "payload": {
+    "customType": "order_card",
+    "orderId": "#ORD-2024-001234",
+    "items": [{ "name": "iPhone 15 Pro", "price": 42900 }]
+  }
+}
+```
+
+**Frontend renders based on payload:**
+
+```typescript
+const payload = message.message.payload as { customType?: string };
+
+if (payload?.customType === 'order_card') {
+  return <OrderCard order={payload} />;
+}
+```
+
+> **Note:** `customType` is a convention, not a requirement. You can define your own payload structure - just ensure the frontend and backend use the same format.
+
 #### Basic Usage
 
 ```typescript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.2.7-canary.1",
+  "version": "0.2.7",
   "publishConfig": {
     "access": "public"
   },
@@ -42,7 +42,7 @@
     "vite-plugin-svgr": "^4.3.0"
   },
   "peerDependencies": {
-    "@asgard-js/core": "^0.2.7-canary.1",
+    "@asgard-js/core": "^0.2.7",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }