@asgard-js/react 0.1.22 → 0.1.23

package/README.md

@@ -243,6 +243,70 @@ config: {
 
 **Backward Compatibility:** Existing code using `endpoint` will continue to work but may show deprecation warnings when `debugMode` is enabled.
 
+### EMIT Action
+
+EMIT buttons allow you to handle custom actions in your application. Implement the `onTemplateBtnClick` callback to process these events. See the [EMIT Action documentation](https://www.asgard-ai.com/docs/developer-reference/asgard-builtin/message-template-action-object-emit) for details.
+
+The callback receives the following parameters:
+
+1. `payload` (optional): Custom data from the button action
+2. `eventName` (required): Event name specified in the button action
+3. `raw` (required): Complete SSE response data as JSON string. Use this when you need information beyond `payload` and `eventName`. Parse it to access additional fields from the original SSE response. See [SSE Response documentation](https://www.asgard-ai.com/docs/developer-reference/api-doc/send-message/sse-response/message-complete) for the complete response structure.
+
+Configure EMIT buttons in your backend SSE response:
+
+```json
+{
+  "template": {
+    "type": "BUTTON",
+    "title": "Action Menu",
+    "text": "Please select an action:",
+    "buttons": [
+      {
+        "label": "Support Request",
+        "action": {
+          "type": "EMIT",
+          "eventName": "support_request",
+          "payload": {
+            "category": "technical",
+            "priority": "high"
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+#### EMIT Example
+
+```typescript
+import { useCallback } from 'react';
+
+const handleTemplateBtnClick = useCallback((payload: Record<string, unknown>, eventName: string, raw: string): void => {
+  if (eventName === 'support_request') {
+    // Access payload data
+    const category = payload.category as string;
+    const priority = payload.priority as string;
+
+    // Optionally parse raw SSE data to access additional fields
+    let customChannelId: string | undefined;
+    try {
+      const sseData = JSON.parse(raw);
+      customChannelId = sseData.customChannelId;
+    } catch {
+      // Handle parse error if needed
+    }
+
+    const channelInfo = customChannelId ? `\nChannel ID: ${customChannelId}` : '';
+    window.alert(`Support request created\n\nCategory: ${category}\nPriority: ${priority}${channelInfo}`);
+  }
+}, []);
+
+// Pass the handler to Chatbot
+<Chatbot config={config} customChannelId={nanoid()} onTemplateBtnClick={handleTemplateBtnClick} />;
+```
+
 ### Chatbot Component Props
 
 - **title?**: `string` - The title of the chatbot (optional). If not provided, will use the value from the API if available.
@@ -277,6 +341,7 @@ config: {
 - **onClose**: `() => void` - Callback function when chat is closed
 - **authState?**: `AuthState` - Authentication state for dynamic API key management. Available states: `'loading'`, `'needApiKey'`, `'authenticated'`, `'error'`, `'invalidApiKey'`
 - **onApiKeySubmit?**: `(apiKey: string) => Promise<void>` - Callback function when user submits API key for authentication
+- **onTemplateBtnClick?**: `(payload: Record<string, unknown>, eventName: string, raw: string) => void` - Callback for EMIT button actions. See [EMIT Action](#emit-action) section for details.
 - **onSseMessage**: `(response: SseResponse, ctx: AsgardServiceContextValue) => void` - Callback function when SSE message is received. It would be helpful if using with the ref to provide some context and conversation data and do some proactively actions like sending messages to the bot.
 - **ref**: `ForwardedRef<ChatbotRef>` - Forwarded ref to access the chatbot instance. It can be used to access the chatbot instance and do some actions like sending messages to the bot. ChatbotRef extends the ref of the chatbot instance and provides some additional methods like `serviceContext.sendMessage` to interact with the chatbot instance.
 

package/dist/components/templates/button-template/button-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/button-template/button-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,UAAU,mBAAmB;IAC3B,OAAO,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CA+BpE"}
+{"version":3,"file":"button-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/button-template/button-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,UAAU,mBAAmB;IAC3B,OAAO,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CAgCpE"}

package/dist/components/templates/button-template/card.d.ts

@@ -3,6 +3,7 @@ import { ReactNode, CSSProperties } from 'react';
 
 interface CardProps {
     template: ButtonMessageTemplate | CarouselMessageTemplate['columns'][number];
+    raw: string;
     customStyle?: {
         style?: CSSProperties;
         title?: {

package/dist/components/templates/button-template/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/button-template/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAwB,aAAa,EAAE,MAAM,OAAO,CAAC;AAE1F,OAAO,EAAgB,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAM/F,UAAU,SAAS;IACjB,QAAQ,EAAE,qBAAqB,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7E,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,aAAa,CAAC;QACtB,KAAK,CAAC,EAAE;YACN,KAAK,CAAC,EAAE,aAAa,CAAC;SACvB,CAAC;QACF,WAAW,CAAC,EAAE;YACZ,KAAK,CAAC,EAAE,aAAa,CAAC;SACvB,CAAC;QACF,MAAM,CAAC,EAAE;YACP,KAAK,CAAC,EAAE,aAAa,CAAC;SACvB,CAAC;KACH,CAAC;CACH;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,CAsFhD"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/button-template/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAwB,aAAa,EAAE,MAAM,OAAO,CAAC;AAE1F,OAAO,EAAgB,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAM/F,UAAU,SAAS;IACjB,QAAQ,EAAE,qBAAqB,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7E,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,aAAa,CAAC;QACtB,KAAK,CAAC,EAAE;YACN,KAAK,CAAC,EAAE,aAAa,CAAC;SACvB,CAAC;QACF,WAAW,CAAC,EAAE;YACZ,KAAK,CAAC,EAAE,aAAa,CAAC;SACvB,CAAC;QACF,MAAM,CAAC,EAAE;YACP,KAAK,CAAC,EAAE,aAAa,CAAC;SACvB,CAAC;KACH,CAAC;CACH;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,CAkFhD"}

package/dist/components/templates/carousel-template/carousel-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/carousel-template/carousel-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,OAAO,EAA2B,sBAAsB,EAAyB,MAAM,iBAAiB,CAAC;AAKzG,UAAU,qBAAqB;IAC7B,OAAO,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAyCxE"}
+{"version":3,"file":"carousel-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/carousel-template/carousel-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,OAAO,EAA2B,sBAAsB,EAAyB,MAAM,iBAAiB,CAAC;AAKzG,UAAU,qBAAqB;IAC7B,OAAO,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CA0CxE"}

package/dist/context/asgard-template-context.d.ts

@@ -1,25 +1,17 @@
-import { ConversationErrorMessage, FetchSsePayload } from '../../../core/src/index.ts';
+import { ConversationErrorMessage } from '../../../core/src/index.ts';
 import { PropsWithChildren, ReactNode } from 'react';
 
 export interface AsgardTemplateContextValue {
     onErrorClick?: (message: ConversationErrorMessage) => void;
     errorMessageRenderer?: (message: ConversationErrorMessage) => ReactNode;
-    onTemplateBtnClick?: (payload: Record<string, unknown>, { sse, }: {
-        sse: {
-            sendMessage: (payload: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>) => void;
-        };
-    }) => void;
+    onTemplateBtnClick?: (payload: Record<string, unknown>, eventName: string, raw: string) => void;
     defaultLinkTarget?: '_blank' | '_self' | '_parent' | '_top';
 }
 export declare const AsgardTemplateContext: import('react').Context<AsgardTemplateContextValue>;
 interface AsgardTemplateContextProviderProps extends PropsWithChildren {
     onErrorClick?: (message: ConversationErrorMessage) => void;
     errorMessageRenderer?: (message: ConversationErrorMessage) => ReactNode;
-    onTemplateBtnClick?: (payload: Record<string, unknown>, { sse, }: {
-        sse: {
-            sendMessage: (payload: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>) => void;
-        };
-    }) => void;
+    onTemplateBtnClick?: (payload: Record<string, unknown>, eventName: string, raw: string) => void;
     defaultLinkTarget?: '_blank' | '_self' | '_parent' | '_top';
 }
 export declare function AsgardTemplateContextProvider(props: AsgardTemplateContextProviderProps): ReactNode;

package/dist/context/asgard-template-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"asgard-template-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-template-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,wBAAwB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE5E,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,SAAS,CAAC;IACxE,kBAAkB,CAAC,EAAE,CACnB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,EACE,GAAG,GACJ,EAAE;QACD,GAAG,EAAE;YACH,WAAW,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,KAAK,IAAI,CAAC;SAC3G,CAAC;KACH,KACE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;CAC7D;AAED,eAAO,MAAM,qBAAqB,qDAKhC,CAAC;AAEH,UAAU,kCAAmC,SAAQ,iBAAiB;IACpE,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,SAAS,CAAC;IACxE,kBAAkB,CAAC,EAAE,CACnB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,EACE,GAAG,GACJ,EAAE;QACD,GAAG,EAAE;YACH,WAAW,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,KAAK,IAAI,CAAC;SAC3G,CAAC;KACH,KACE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;CAC7D;AAED,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,kCAAkC,GAAG,SAAS,CAclG;AAED,wBAAgB,wBAAwB,IAAI,0BAA0B,CAErE"}
+{"version":3,"file":"asgard-template-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-template-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,SAAS,CAAC;IACxE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChG,iBAAiB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;CAC7D;AAED,eAAO,MAAM,qBAAqB,qDAKhC,CAAC;AAEH,UAAU,kCAAmC,SAAQ,iBAAiB;IACpE,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,SAAS,CAAC;IACxE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChG,iBAAiB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;CAC7D;AAED,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,kCAAkC,GAAG,SAAS,CAclG;AAED,wBAAgB,wBAAwB,IAAI,0BAA0B,CAErE"}

package/dist/index.js

@@ -1055,11 +1055,11 @@ function F5(e, t, n) {
   return jP(e) ? window.open(e, t, n) : (console.error(`Blocked attempt to open unsafe URI: ${e}`), null);
 }
 function N5(e) {
-  var u, c, f;
-  const { template: t, customStyle: n } = e, { sendMessage: i } = tn(), { onTemplateBtnClick: r, defaultLinkTarget: o } = $5(), s = Fe(() => {
-    var d;
-    return ((d = t == null ? void 0 : t.thumbnailImageUrl) == null ? void 0 : d.replace(/^http:/, "").replace(/^https:/, "")) || "https://via.assets.so/img.jpg?w=200&h=270&tc=white&bg=#eeeeee";
-  }, [t]), a = Fe(() => {
+  var c, f, d;
+  const { template: t, raw: n, customStyle: i } = e, { sendMessage: r } = tn(), { onTemplateBtnClick: o, defaultLinkTarget: s } = $5(), a = Fe(() => {
+    var h;
+    return ((h = t == null ? void 0 : t.thumbnailImageUrl) == null ? void 0 : h.replace(/^http:/, "").replace(/^https:/, "")) || "https://via.assets.so/img.jpg?w=200&h=270&tc=white&bg=#eeeeee";
+  }, [t]), l = Fe(() => {
     switch (t == null ? void 0 : t.imageAspectRatio) {
       case "square":
         return "1 / 1";
@@ -1067,52 +1067,46 @@ function N5(e) {
       default:
         return "1.51 / 1";
     }
-  }, [t]), l = Ce(
-    (d) => function() {
-      switch (d.type) {
+  }, [t]), u = Ce(
+    (h) => function() {
+      switch (h.type) {
         case "message":
         case "MESSAGE":
-          i == null || i({ text: d.text });
+          r == null || r({ text: h.text });
           return;
         case "uri":
         case "URI":
-          F5(d.uri, d.target || o || "_blank");
+          F5(h.uri, h.target || s || "_blank");
           return;
         case "emit":
         case "EMIT":
-          r == null || r(d.payload, {
-            sse: {
-              sendMessage: (p) => {
-                i == null || i(p);
-              }
-            }
-          });
+          o && o(h.payload || {}, h.eventName || "", n);
           return;
       }
     },
-    [i, r, o]
+    [r, o, s, n]
   );
-  return /* @__PURE__ */ te("div", { className: ze("asgard-card", Rc.card_root), style: n == null ? void 0 : n.style, children: [
+  return /* @__PURE__ */ te("div", { className: ze("asgard-card", Rc.card_root), style: i == null ? void 0 : i.style, children: [
     (t == null ? void 0 : t.thumbnailImageUrl) && /* @__PURE__ */ k(
       "img",
       {
         alt: t == null ? void 0 : t.title,
-        src: s,
+        src: a,
         style: {
           display: "block",
           width: "100%",
           maxHeight: "170px",
           objectFit: t == null ? void 0 : t.imageSize,
-          aspectRatio: a
+          aspectRatio: l
         }
       }
     ),
     /* @__PURE__ */ te("div", { className: Rc.card_content, children: [
-      /* @__PURE__ */ k("h5", { className: Rc.card_title, style: (u = n == null ? void 0 : n.title) == null ? void 0 : u.style, children: t == null ? void 0 : t.title }),
-      /* @__PURE__ */ k("div", { className: Rc.card_description, style: (c = n == null ? void 0 : n.description) == null ? void 0 : c.style, children: t == null ? void 0 : t.text }),
-      /* @__PURE__ */ k("div", { className: Rc.card_actions, children: (f = t == null ? void 0 : t.buttons) == null ? void 0 : f.map((d, h) => {
-        var p;
-        return /* @__PURE__ */ k("button", { onClick: l(d.action), style: (p = n == null ? void 0 : n.button) == null ? void 0 : p.style, children: d.label }, h);
+      /* @__PURE__ */ k("h5", { className: Rc.card_title, style: (c = i == null ? void 0 : i.title) == null ? void 0 : c.style, children: t == null ? void 0 : t.title }),
+      /* @__PURE__ */ k("div", { className: Rc.card_description, style: (f = i == null ? void 0 : i.description) == null ? void 0 : f.style, children: t == null ? void 0 : t.text }),
+      /* @__PURE__ */ k("div", { className: Rc.card_actions, children: (d = t == null ? void 0 : t.buttons) == null ? void 0 : d.map((h, p) => {
+        var g;
+        return /* @__PURE__ */ k("button", { onClick: u(h.action), style: (g = i == null ? void 0 : i.button) == null ? void 0 : g.style, children: h.label }, p);
       }) })
     ] })
   ] });
@@ -1126,6 +1120,7 @@ function qP(e) {
       N5,
       {
         template: r,
+        raw: t.raw,
         customStyle: {
           style: (o = n == null ? void 0 : n.ButtonMessageTemplate) == null ? void 0 : o.style,
           title: {
@@ -1272,6 +1267,7 @@ function XP(e) {
             N5,
             {
               template: a,
+              raw: t.raw,
               customStyle: {
                 style: (c = (u = n == null ? void 0 : n.CarouselMessageTemplate) == null ? void 0 : u.card) == null ? void 0 : c.style,
                 title: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "publishConfig": {
     "access": "public"
   },
@@ -48,7 +48,7 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "@asgard-js/core": "^0.1.22",
+    "@asgard-js/core": "^0.1.23",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },