@botonic/plugin-flow-builder 0.41.0 → 0.41.1-alpha.0

package/lib/cjs/content-fields/flow-ai-agent.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { AgenticOutputMessage } from '@botonic/core';
+import { ActionRequest } from '@botonic/react';
 import { ContentFieldsBase } from './content-fields-base';
 import { HtAiAgentNode, HtInputGuardrailRule } from './hubtype-fields/ai-agent';
 export declare class FlowAiAgent extends ContentFieldsBase {
@@ -16,5 +17,5 @@ export declare class FlowAiAgent extends ContentFieldsBase {
     }[];
     responses: AgenticOutputMessage[];
     static fromHubtypeCMS(component: HtAiAgentNode): FlowAiAgent;
-    toBotonic(id: string): JSX.Element;
+    toBotonic(id: string, request: ActionRequest): JSX.Element;
 }

package/lib/cjs/content-fields/flow-ai-agent.js

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlowAiAgent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@botonic/react");
-const constants_1 = require("../constants");
 const content_fields_base_1 = require("./content-fields-base");
-const flow_element_1 = require("./flow-element");
+const flow_carousel_1 = require("./flow-carousel");
+const flow_text_1 = require("./flow-text");
 class FlowAiAgent extends content_fields_base_1.ContentFieldsBase {
     constructor() {
         super(...arguments);
@@ -24,18 +23,13 @@ class FlowAiAgent extends content_fields_base_1.ContentFieldsBase {
         newAiAgent.sources = component.content.sources;
         return newAiAgent;
     }
-    toBotonic(id) {
+    toBotonic(id, request) {
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.responses.map((response) => {
-                if (response.type === 'text') {
-                    return (0, jsx_runtime_1.jsx)(react_1.Text, { children: response.content.text }, id);
-                }
-                if (response.type === 'textWithButtons') {
-                    return ((0, jsx_runtime_1.jsxs)(react_1.Text, { children: [response.content.text, response.content.buttons.map((button, buttonIndex) => {
-                                return ((0, jsx_runtime_1.jsx)(react_1.Button, Object.assign({ payload: `${constants_1.EMPTY_PAYLOAD}${constants_1.SOURCE_INFO_SEPARATOR}${buttonIndex}` }, { children: button.text }), buttonIndex));
-                            })] }, id));
+                if (response.type === 'text' || response.type === 'textWithButtons') {
+                    return flow_text_1.FlowText.fromAIAgent(id, response);
                 }
                 if (response.type === 'carousel') {
-                    return ((0, jsx_runtime_1.jsx)(react_1.Carousel, { children: response.content.elements.map(element => flow_element_1.FlowElement.fromAIAgent(id, element).toBotonic(id)) }, id));
+                    return flow_carousel_1.FlowCarousel.fromAIAgent(id, response, request);
                 }
                 return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
             }) }));

package/lib/cjs/content-fields/flow-ai-agent.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-ai-agent.js","sourceRoot":"","sources":["../../../src/content-fields/flow-ai-agent.tsx"],"names":[],"mappings":";;;;AACA,0CAAuD;AAEvD,4CAAmE;AACnE,+DAAyD;AACzD,iDAA4C;AAG5C,MAAa,WAAY,SAAQ,uCAAiB;IAAlD;;QACS,SAAI,GAAW,EAAE,CAAA;QACjB,SAAI,GAAW,EAAE,CAAA;QACjB,iBAAY,GAAW,EAAE,CAAA;QAKzB,cAAS,GAA2B,EAAE,CAAA;IAsD/C,CAAC;IApDC,MAAM,CAAC,cAAc,CAAC,SAAwB;QAC5C,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAA;QACxC,UAAU,CAAC,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAA;QACxD,UAAU,CAAC,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAA;QACvD,UAAU,CAAC,mBAAmB;YAC5B,SAAS,CAAC,OAAO,CAAC,qBAAqB,IAAI,EAAE,CAAA;QAC/C,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO,CAAA;QAC9C,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,EAAU;QAClB,OAAO,CACL,2DACG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,QAA8B,EAAE,EAAE;gBACrD,IAAI,QAAQ,CAAC,IAAI,KAAK,MAAM,EAAE;oBAC5B,OAAO,uBAAC,YAAI,cAAW,QAAQ,CAAC,OAAO,CAAC,IAAI,IAA1B,EAAE,CAAgC,CAAA;iBACrD;gBAED,IAAI,QAAQ,CAAC,IAAI,KAAK,iBAAiB,EAAE;oBACvC,OAAO,CACL,wBAAC,YAAI,eACF,QAAQ,CAAC,OAAO,CAAC,IAAI,EACrB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;gCACpD,OAAO,CACL,uBAAC,cAAM,kBAEL,OAAO,EAAE,GAAG,yBAAa,GAAG,iCAAqB,GAAG,WAAW,EAAE,gBAEhE,MAAM,CAAC,IAAI,KAHP,WAAW,CAIT,CACV,CAAA;4BACH,CAAC,CAAC,KAXO,EAAE,CAYN,CACR,CAAA;iBACF;gBAED,IAAI,QAAQ,CAAC,IAAI,KAAK,UAAU,EAAE;oBAChC,OAAO,CACL,uBAAC,gBAAQ,cACN,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CACvC,0BAAW,CAAC,WAAW,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,CACnD,IAHY,EAAE,CAIN,CACZ,CAAA;iBACF;gBAED,OAAO,kDAAK,CAAA;YACd,CAAC,CAAC,GACD,CACJ,CAAA;IACH,CAAC;CACF;AA9DD,kCA8DC"}
+{"version":3,"file":"flow-ai-agent.js","sourceRoot":"","sources":["../../../src/content-fields/flow-ai-agent.tsx"],"names":[],"mappings":";;;;AAGA,+DAAyD;AACzD,mDAA8C;AAC9C,2CAAsC;AAGtC,MAAa,WAAY,SAAQ,uCAAiB;IAAlD;;QACS,SAAI,GAAW,EAAE,CAAA;QACjB,SAAI,GAAW,EAAE,CAAA;QACjB,iBAAY,GAAW,EAAE,CAAA;QAKzB,cAAS,GAA2B,EAAE,CAAA;IA8B/C,CAAC;IA5BC,MAAM,CAAC,cAAc,CAAC,SAAwB;QAC5C,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAA;QACxC,UAAU,CAAC,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAA;QACxD,UAAU,CAAC,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAA;QACvD,UAAU,CAAC,mBAAmB;YAC5B,SAAS,CAAC,OAAO,CAAC,qBAAqB,IAAI,EAAE,CAAA;QAC/C,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO,CAAA;QAC9C,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,EAAU,EAAE,OAAsB;QAC1C,OAAO,CACL,2DACG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,QAA8B,EAAE,EAAE;gBACrD,IAAI,QAAQ,CAAC,IAAI,KAAK,MAAM,IAAI,QAAQ,CAAC,IAAI,KAAK,iBAAiB,EAAE;oBACnE,OAAO,oBAAQ,CAAC,WAAW,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAA;iBAC1C;gBAED,IAAI,QAAQ,CAAC,IAAI,KAAK,UAAU,EAAE;oBAChC,OAAO,4BAAY,CAAC,WAAW,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;iBACvD;gBAED,OAAO,kDAAK,CAAA;YACd,CAAC,CAAC,GACD,CACJ,CAAA;IACH,CAAC;CACF;AAtCD,kCAsCC"}

package/lib/cjs/content-fields/flow-carousel.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { CarouselMessage } from '@botonic/core';
+import { ActionRequest } from '@botonic/react';
 import { FlowBuilderApi } from '../api';
 import { ContentFieldsBase } from './content-fields-base';
 import { FlowElement } from './flow-element';
@@ -7,5 +9,6 @@ export declare class FlowCarousel extends ContentFieldsBase {
     code: string;
     elements: FlowElement[];
     static fromHubtypeCMS(component: HtCarouselNode, locale: string, cmsApi: FlowBuilderApi): FlowCarousel;
-    toBotonic(id: string): JSX.Element;
+    static fromAIAgent(id: string, carouselMessage: CarouselMessage, request: ActionRequest): JSX.Element;
+    toBotonic(id: string, request: ActionRequest): JSX.Element;
 }

package/lib/cjs/content-fields/flow-carousel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlowCarousel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@botonic/core");
 const react_1 = require("@botonic/react");
 const content_fields_base_1 = require("./content-fields-base");
 const flow_element_1 = require("./flow-element");
@@ -17,7 +18,43 @@ class FlowCarousel extends content_fields_base_1.ContentFieldsBase {
         newCarousel.elements = component.content.elements.map(element => flow_element_1.FlowElement.fromHubtypeCMS(element, locale, cmsApi));
         return newCarousel;
     }
-    toBotonic(id) {
+    static fromAIAgent(id, carouselMessage, request) {
+        const canUseWhatsappInteractiveMediaCarousel = () => {
+            const isValid = carouselMessage.content.text &&
+                !carouselMessage.content.elements.some(element => element.button.payload) &&
+                carouselMessage.content.elements.every(element => element.button.url);
+            if (!isValid) {
+                console.warn('Cannot use WhatsappInteractiveMediaCarousel for Whatsapp created by AIAgent', carouselMessage.content);
+            }
+            return isValid;
+        };
+        if ((0, core_1.isWhatsapp)(request.session) &&
+            canUseWhatsappInteractiveMediaCarousel()) {
+            return ((0, jsx_runtime_1.jsx)(react_1.WhatsappInteractiveMediaCarousel, { cards: carouselMessage.content.elements.map(element => {
+                    const buttonText = element.button.text;
+                    const buttonUrl = element.button.url;
+                    const imageLink = element.image;
+                    return {
+                        text: element.title,
+                        action: { buttonText, buttonUrl, imageLink },
+                    };
+                }), textMessage: carouselMessage.content.text }));
+        }
+        return ((0, jsx_runtime_1.jsx)(react_1.Carousel, { children: carouselMessage.content.elements.map((element, index) => flow_element_1.FlowElement.fromAIAgent(`${id}-element-${index}`, element).toBotonic(id)) }, id));
+    }
+    toBotonic(id, request) {
+        if ((0, core_1.isWhatsapp)(request.session)) {
+            return ((0, jsx_runtime_1.jsx)(react_1.WhatsappInteractiveMediaCarousel, { cards: this.elements.map(element => {
+                    var _a, _b;
+                    const buttonText = ((_a = element.button) === null || _a === void 0 ? void 0 : _a.text) || '';
+                    const buttonUrl = ((_b = element.button) === null || _b === void 0 ? void 0 : _b.url) || '';
+                    const imageLink = element.image || '';
+                    return {
+                        text: element.title,
+                        action: { buttonText, buttonUrl, imageLink },
+                    };
+                }), textMessage: 'These are the options' }));
+        }
         return ((0, jsx_runtime_1.jsx)(react_1.Carousel, { children: this.elements.map(element => element.toBotonic(id)) }, id));
     }
 }

package/lib/cjs/content-fields/flow-carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-carousel.js","sourceRoot":"","sources":["../../../src/content-fields/flow-carousel.tsx"],"names":[],"mappings":";;;;AAAA,0CAAyC;AAIzC,+DAAyD;AACzD,iDAA4C;AAG5C,MAAa,YAAa,SAAQ,uCAAiB;IAAnD;;QACS,SAAI,GAAG,EAAE,CAAA;QACT,aAAQ,GAAkB,EAAE,CAAA;IAsBrC,CAAC;IApBC,MAAM,CAAC,cAAc,CACnB,SAAyB,EACzB,MAAc,EACd,MAAsB;QAEtB,MAAM,WAAW,GAAG,IAAI,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAClD,WAAW,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAA;QACjC,WAAW,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAC9D,0BAAW,CAAC,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,CACpD,CAAA;QACD,OAAO,WAAW,CAAA;IACpB,CAAC;IAED,SAAS,CAAC,EAAU;QAClB,OAAO,CACL,uBAAC,gBAAQ,cACN,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,IADvC,EAAE,CAEN,CACZ,CAAA;IACH,CAAC;CACF;AAxBD,oCAwBC"}
+{"version":3,"file":"flow-carousel.js","sourceRoot":"","sources":["../../../src/content-fields/flow-carousel.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/content-fields/flow-element.js

@@ -27,7 +27,7 @@ class FlowElement extends content_fields_base_1.ContentFieldsBase {
         newElement.subtitle = element.subtitle;
         newElement.image = element.image;
         newElement.button = flow_button_1.FlowButton.fromAIAgent({
-            id: '',
+            id: `${id}-button`,
             text: element.button.text,
             url: element.button.url,
         });

package/lib/cjs/content-fields/flow-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-element.js","sourceRoot":"","sources":["../../../src/content-fields/flow-element.tsx"],"names":[],"mappings":";;;;AACA,0CAA8D;AAG9D,+DAAyD;AACzD,+CAA0C;AAG1C,MAAa,WAAY,SAAQ,uCAAiB;IAAlD;;QACS,UAAK,GAAG,EAAE,CAAA;QACV,aAAQ,GAAG,EAAE,CAAA;QAEb,UAAK,GAAG,EAAE,CAAA;QACV,WAAM,GAAG,KAAK,CAAA;IAkDvB,CAAC;IAhDC,MAAM,CAAC,cAAc,CACnB,SAA4B,EAC5B,MAAc,EACd,MAAsB;QAEtB,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QAChE,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;QACtE,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QACjE,UAAU,CAAC,MAAM,GAAG,wBAAU,CAAC,cAAc,CAC3C,SAAS,CAAC,MAAM,EAChB,MAAM,EACN,MAAM,CACP,CAAA;QACD,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,MAAM,CAAC,WAAW,CAChB,EAAU,EACV,OAKC;QAED,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC,CAAA;QACtC,UAAU,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAChC,UAAU,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAA;QACtC,UAAU,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAChC,UAAU,CAAC,MAAM,GAAG,wBAAU,CAAC,WAAW,CAAC;YACzC,EAAE,EAAE,EAAE;YACN,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;YACzB,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG;SACxB,CAAC,CAAA;QACF,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,QAAgB;;QACxB,OAAO,CACL,wBAAC,eAAO,eACN,uBAAC,WAAG,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI,EACxB,uBAAC,aAAK,cAAE,IAAI,CAAC,KAAK,GAAS,EAC3B,uBAAC,gBAAQ,cAAE,IAAI,CAAC,QAAQ,GAAY,EACnC,MAAA,IAAI,CAAC,MAAM,0CAAE,YAAY,CAAC,CAAC,CAAC,KAJjB,GAAG,QAAQ,IAAI,IAAI,CAAC,EAAE,EAAE,CAK5B,CACX,CAAA;IACH,CAAC;CACF;AAvDD,kCAuDC"}
+{"version":3,"file":"flow-element.js","sourceRoot":"","sources":["../../../src/content-fields/flow-element.tsx"],"names":[],"mappings":";;;;AACA,0CAA8D;AAG9D,+DAAyD;AACzD,+CAA0C;AAG1C,MAAa,WAAY,SAAQ,uCAAiB;IAAlD;;QACS,UAAK,GAAG,EAAE,CAAA;QACV,aAAQ,GAAG,EAAE,CAAA;QAEb,UAAK,GAAG,EAAE,CAAA;QACV,WAAM,GAAG,KAAK,CAAA;IAkDvB,CAAC;IAhDC,MAAM,CAAC,cAAc,CACnB,SAA4B,EAC5B,MAAc,EACd,MAAsB;QAEtB,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QAChE,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;QACtE,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QACjE,UAAU,CAAC,MAAM,GAAG,wBAAU,CAAC,cAAc,CAC3C,SAAS,CAAC,MAAM,EAChB,MAAM,EACN,MAAM,CACP,CAAA;QACD,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,MAAM,CAAC,WAAW,CAChB,EAAU,EACV,OAKC;QAED,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC,CAAA;QACtC,UAAU,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAChC,UAAU,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAA;QACtC,UAAU,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAChC,UAAU,CAAC,MAAM,GAAG,wBAAU,CAAC,WAAW,CAAC;YACzC,EAAE,EAAE,GAAG,EAAE,SAAS;YAClB,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;YACzB,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG;SACxB,CAAC,CAAA;QACF,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,QAAgB;;QACxB,OAAO,CACL,wBAAC,eAAO,eACN,uBAAC,WAAG,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI,EACxB,uBAAC,aAAK,cAAE,IAAI,CAAC,KAAK,GAAS,EAC3B,uBAAC,gBAAQ,cAAE,IAAI,CAAC,QAAQ,GAAY,EACnC,MAAA,IAAI,CAAC,MAAM,0CAAE,YAAY,CAAC,CAAC,CAAC,KAJjB,GAAG,QAAQ,IAAI,IAAI,CAAC,EAAE,EAAE,CAK5B,CACX,CAAA;IACH,CAAC;CACF;AAvDD,kCAuDC"}

package/lib/cjs/content-fields/flow-text.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { TextMessage, TextWithButtonsMessage } from '@botonic/core';
 import { ActionRequest } from '@botonic/react';
 import { FlowBuilderApi } from '../api';
 import { ContentFieldsBase } from './content-fields-base';
@@ -12,5 +13,6 @@ export declare class FlowText extends ContentFieldsBase {
     static fromHubtypeCMS(cmsText: HtTextNode, locale: string, cmsApi: FlowBuilderApi): FlowText;
     static replaceVariables(text: string, request: ActionRequest): string;
     private static isValidType;
+    static fromAIAgent(id: string, textMessage: TextMessage | TextWithButtonsMessage): JSX.Element;
     toBotonic(id: string, request: ActionRequest): JSX.Element;
 }

package/lib/cjs/content-fields/flow-text.js

@@ -43,6 +43,22 @@ class FlowText extends content_fields_base_1.ContentFieldsBase {
         const validTypes = ['boolean', 'string', 'number'];
         return validTypes.includes(typeof botVariable);
     }
+    static fromAIAgent(id, textMessage) {
+        if (textMessage.type === 'text') {
+            return (0, jsx_runtime_1.jsx)(react_1.Text, { children: textMessage.content.text }, id);
+        }
+        return ((0, jsx_runtime_1.jsxs)(react_1.Text, { children: [textMessage.content.text, textMessage.content.buttons.map((button, buttonIndex) => {
+                    const buttonData = {
+                        id: `${id}-button-${buttonIndex}`,
+                        text: button.text,
+                        url: button.url,
+                        payload: button.payload
+                            ? `${constants_1.EMPTY_PAYLOAD}${constants_1.SOURCE_INFO_SEPARATOR}${buttonIndex}`
+                            : undefined,
+                    };
+                    return flow_button_1.FlowButton.fromAIAgent(buttonData).renderButton(buttonIndex);
+                })] }, id));
+    }
     toBotonic(id, request) {
         const replacedText = FlowText.replaceVariables(this.text, request);
         return ((0, jsx_runtime_1.jsxs)(react_1.Text, { children: [replacedText, this.buttons.map((button, buttonIndex) => button.renderButton(buttonIndex, this.buttonStyle))] }, id));

package/lib/cjs/content-fields/flow-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-text.js","sourceRoot":"","sources":["../../../src/content-fields/flow-text.tsx"],"names":[],"mappings":";;;;AAAA,0CAAoD;AAIpD,4CAA0E;AAC1E,oCAA8C;AAC9C,+DAAyD;AACzD,+CAA0C;AAC1C,qDAA4D;AAE5D,MAAa,QAAS,SAAQ,uCAAiB;IAA/C;;QACS,SAAI,GAAG,EAAE,CAAA;QACT,SAAI,GAAG,EAAE,CAAA;QACT,YAAO,GAAiB,EAAE,CAAA;QAC1B,gBAAW,GAAG,8BAAa,CAAC,MAAM,CAAA;IAsD3C,CAAC;IApDC,MAAM,CAAC,cAAc,CACnB,OAAmB,EACnB,MAAc,EACd,MAAsB;QAEtB,MAAM,OAAO,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QACxC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAA;QAC3B,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,IAAI,8BAAa,CAAC,MAAM,CAAA;QAC3E,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;QACjE,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CACrD,wBAAU,CAAC,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAClD,CAAA;QACD,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,MAAM,CAAC,gBAAgB,CAAC,IAAY,EAAE,OAAsB;QAC1D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,4BAAgB,CAAC,CAAA;QAE5C,IAAI,YAAY,GAAG,IAAI,CAAA;QACvB,IAAI,OAAO,IAAI,OAAO,EAAE;YACtB,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACtB,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;gBAClC,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,CAAC,qCAAyB,CAAC;oBAC7D,CAAC,CAAC,KAAK;oBACP,CAAC,CAAC,IAAA,2BAAmB,EAAC,OAAO,EAAE,OAAO,CAAC,CAAA;gBACzC,iGAAiG;gBACjG,YAAY,GAAG,YAAY,CAAC,OAAO,CACjC,KAAK,EACL,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CACpD,CAAA;YACH,CAAC,CAAC,CAAA;SACH;QAED,OAAO,YAAY,CAAA;IACrB,CAAC;IAEO,MAAM,CAAC,WAAW,CAAC,WAAgB;QACzC,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAClD,OAAO,UAAU,CAAC,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;IAChD,CAAC;IAED,SAAS,CAAC,EAAU,EAAE,OAAsB;QAC1C,MAAM,YAAY,GAAG,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;QAClE,OAAO,CACL,wBAAC,YAAI,eACF,YAAY,EACZ,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CACxC,MAAM,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CACnD,KAJQ,EAAE,CAKN,CACR,CAAA;IACH,CAAC;CACF;AA1DD,4BA0DC"}
+{"version":3,"file":"flow-text.js","sourceRoot":"","sources":["../../../src/content-fields/flow-text.tsx"],"names":[],"mappings":"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"}

package/lib/esm/content-fields/flow-ai-agent.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { AgenticOutputMessage } from '@botonic/core';
+import { ActionRequest } from '@botonic/react';
 import { ContentFieldsBase } from './content-fields-base';
 import { HtAiAgentNode, HtInputGuardrailRule } from './hubtype-fields/ai-agent';
 export declare class FlowAiAgent extends ContentFieldsBase {
@@ -16,5 +17,5 @@ export declare class FlowAiAgent extends ContentFieldsBase {
     }[];
     responses: AgenticOutputMessage[];
     static fromHubtypeCMS(component: HtAiAgentNode): FlowAiAgent;
-    toBotonic(id: string): JSX.Element;
+    toBotonic(id: string, request: ActionRequest): JSX.Element;
 }

package/lib/esm/content-fields/flow-ai-agent.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Carousel, Text } from '@botonic/react';
-import { EMPTY_PAYLOAD, SOURCE_INFO_SEPARATOR } from '../constants';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { ContentFieldsBase } from './content-fields-base';
-import { FlowElement } from './flow-element';
+import { FlowCarousel } from './flow-carousel';
+import { FlowText } from './flow-text';
 export class FlowAiAgent extends ContentFieldsBase {
     constructor() {
         super(...arguments);
@@ -21,18 +20,13 @@ export class FlowAiAgent extends ContentFieldsBase {
         newAiAgent.sources = component.content.sources;
         return newAiAgent;
     }
-    toBotonic(id) {
+    toBotonic(id, request) {
         return (_jsx(_Fragment, { children: this.responses.map((response) => {
-                if (response.type === 'text') {
-                    return _jsx(Text, { children: response.content.text }, id);
-                }
-                if (response.type === 'textWithButtons') {
-                    return (_jsxs(Text, { children: [response.content.text, response.content.buttons.map((button, buttonIndex) => {
-                                return (_jsx(Button, Object.assign({ payload: `${EMPTY_PAYLOAD}${SOURCE_INFO_SEPARATOR}${buttonIndex}` }, { children: button.text }), buttonIndex));
-                            })] }, id));
+                if (response.type === 'text' || response.type === 'textWithButtons') {
+                    return FlowText.fromAIAgent(id, response);
                 }
                 if (response.type === 'carousel') {
-                    return (_jsx(Carousel, { children: response.content.elements.map(element => FlowElement.fromAIAgent(id, element).toBotonic(id)) }, id));
+                    return FlowCarousel.fromAIAgent(id, response, request);
                 }
                 return _jsx(_Fragment, {});
             }) }));

package/lib/esm/content-fields/flow-ai-agent.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-ai-agent.js","sourceRoot":"","sources":["../../../src/content-fields/flow-ai-agent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AAEvD,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QACS,SAAI,GAAW,EAAE,CAAA;QACjB,SAAI,GAAW,EAAE,CAAA;QACjB,iBAAY,GAAW,EAAE,CAAA;QAKzB,cAAS,GAA2B,EAAE,CAAA;IAsD/C,CAAC;IApDC,MAAM,CAAC,cAAc,CAAC,SAAwB;QAC5C,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAA;QACxC,UAAU,CAAC,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAA;QACxD,UAAU,CAAC,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAA;QACvD,UAAU,CAAC,mBAAmB;YAC5B,SAAS,CAAC,OAAO,CAAC,qBAAqB,IAAI,EAAE,CAAA;QAC/C,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO,CAAA;QAC9C,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,EAAU;QAClB,OAAO,CACL,4BACG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,QAA8B,EAAE,EAAE;gBACrD,IAAI,QAAQ,CAAC,IAAI,KAAK,MAAM,EAAE;oBAC5B,OAAO,KAAC,IAAI,cAAW,QAAQ,CAAC,OAAO,CAAC,IAAI,IAA1B,EAAE,CAAgC,CAAA;iBACrD;gBAED,IAAI,QAAQ,CAAC,IAAI,KAAK,iBAAiB,EAAE;oBACvC,OAAO,CACL,MAAC,IAAI,eACF,QAAQ,CAAC,OAAO,CAAC,IAAI,EACrB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;gCACpD,OAAO,CACL,KAAC,MAAM,kBAEL,OAAO,EAAE,GAAG,aAAa,GAAG,qBAAqB,GAAG,WAAW,EAAE,gBAEhE,MAAM,CAAC,IAAI,KAHP,WAAW,CAIT,CACV,CAAA;4BACH,CAAC,CAAC,KAXO,EAAE,CAYN,CACR,CAAA;iBACF;gBAED,IAAI,QAAQ,CAAC,IAAI,KAAK,UAAU,EAAE;oBAChC,OAAO,CACL,KAAC,QAAQ,cACN,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CACvC,WAAW,CAAC,WAAW,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,CACnD,IAHY,EAAE,CAIN,CACZ,CAAA;iBACF;gBAED,OAAO,mBAAK,CAAA;YACd,CAAC,CAAC,GACD,CACJ,CAAA;IACH,CAAC;CACF"}
+{"version":3,"file":"flow-ai-agent.js","sourceRoot":"","sources":["../../../src/content-fields/flow-ai-agent.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAGtC,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QACS,SAAI,GAAW,EAAE,CAAA;QACjB,SAAI,GAAW,EAAE,CAAA;QACjB,iBAAY,GAAW,EAAE,CAAA;QAKzB,cAAS,GAA2B,EAAE,CAAA;IA8B/C,CAAC;IA5BC,MAAM,CAAC,cAAc,CAAC,SAAwB;QAC5C,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAA;QACxC,UAAU,CAAC,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAA;QACxD,UAAU,CAAC,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAA;QACvD,UAAU,CAAC,mBAAmB;YAC5B,SAAS,CAAC,OAAO,CAAC,qBAAqB,IAAI,EAAE,CAAA;QAC/C,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO,CAAA;QAC9C,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,EAAU,EAAE,OAAsB;QAC1C,OAAO,CACL,4BACG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,QAA8B,EAAE,EAAE;gBACrD,IAAI,QAAQ,CAAC,IAAI,KAAK,MAAM,IAAI,QAAQ,CAAC,IAAI,KAAK,iBAAiB,EAAE;oBACnE,OAAO,QAAQ,CAAC,WAAW,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAA;iBAC1C;gBAED,IAAI,QAAQ,CAAC,IAAI,KAAK,UAAU,EAAE;oBAChC,OAAO,YAAY,CAAC,WAAW,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;iBACvD;gBAED,OAAO,mBAAK,CAAA;YACd,CAAC,CAAC,GACD,CACJ,CAAA;IACH,CAAC;CACF"}

package/lib/esm/content-fields/flow-carousel.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { CarouselMessage } from '@botonic/core';
+import { ActionRequest } from '@botonic/react';
 import { FlowBuilderApi } from '../api';
 import { ContentFieldsBase } from './content-fields-base';
 import { FlowElement } from './flow-element';
@@ -7,5 +9,6 @@ export declare class FlowCarousel extends ContentFieldsBase {
     code: string;
     elements: FlowElement[];
     static fromHubtypeCMS(component: HtCarouselNode, locale: string, cmsApi: FlowBuilderApi): FlowCarousel;
-    toBotonic(id: string): JSX.Element;
+    static fromAIAgent(id: string, carouselMessage: CarouselMessage, request: ActionRequest): JSX.Element;
+    toBotonic(id: string, request: ActionRequest): JSX.Element;
 }

package/lib/esm/content-fields/flow-carousel.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Carousel } from '@botonic/react';
+import { isWhatsapp } from '@botonic/core';
+import { Carousel, WhatsappInteractiveMediaCarousel, } from '@botonic/react';
 import { ContentFieldsBase } from './content-fields-base';
 import { FlowElement } from './flow-element';
 export class FlowCarousel extends ContentFieldsBase {
@@ -14,7 +15,43 @@ export class FlowCarousel extends ContentFieldsBase {
         newCarousel.elements = component.content.elements.map(element => FlowElement.fromHubtypeCMS(element, locale, cmsApi));
         return newCarousel;
     }
-    toBotonic(id) {
+    static fromAIAgent(id, carouselMessage, request) {
+        const canUseWhatsappInteractiveMediaCarousel = () => {
+            const isValid = carouselMessage.content.text &&
+                !carouselMessage.content.elements.some(element => element.button.payload) &&
+                carouselMessage.content.elements.every(element => element.button.url);
+            if (!isValid) {
+                console.warn('Cannot use WhatsappInteractiveMediaCarousel for Whatsapp created by AIAgent', carouselMessage.content);
+            }
+            return isValid;
+        };
+        if (isWhatsapp(request.session) &&
+            canUseWhatsappInteractiveMediaCarousel()) {
+            return (_jsx(WhatsappInteractiveMediaCarousel, { cards: carouselMessage.content.elements.map(element => {
+                    const buttonText = element.button.text;
+                    const buttonUrl = element.button.url;
+                    const imageLink = element.image;
+                    return {
+                        text: element.title,
+                        action: { buttonText, buttonUrl, imageLink },
+                    };
+                }), textMessage: carouselMessage.content.text }));
+        }
+        return (_jsx(Carousel, { children: carouselMessage.content.elements.map((element, index) => FlowElement.fromAIAgent(`${id}-element-${index}`, element).toBotonic(id)) }, id));
+    }
+    toBotonic(id, request) {
+        if (isWhatsapp(request.session)) {
+            return (_jsx(WhatsappInteractiveMediaCarousel, { cards: this.elements.map(element => {
+                    var _a, _b;
+                    const buttonText = ((_a = element.button) === null || _a === void 0 ? void 0 : _a.text) || '';
+                    const buttonUrl = ((_b = element.button) === null || _b === void 0 ? void 0 : _b.url) || '';
+                    const imageLink = element.image || '';
+                    return {
+                        text: element.title,
+                        action: { buttonText, buttonUrl, imageLink },
+                    };
+                }), textMessage: 'These are the options' }));
+        }
         return (_jsx(Carousel, { children: this.elements.map(element => element.toBotonic(id)) }, id));
     }
 }

package/lib/esm/content-fields/flow-carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-carousel.js","sourceRoot":"","sources":["../../../src/content-fields/flow-carousel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,MAAM,OAAO,YAAa,SAAQ,iBAAiB;IAAnD;;QACS,SAAI,GAAG,EAAE,CAAA;QACT,aAAQ,GAAkB,EAAE,CAAA;IAsBrC,CAAC;IApBC,MAAM,CAAC,cAAc,CACnB,SAAyB,EACzB,MAAc,EACd,MAAsB;QAEtB,MAAM,WAAW,GAAG,IAAI,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAClD,WAAW,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAA;QACjC,WAAW,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAC9D,WAAW,CAAC,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,CACpD,CAAA;QACD,OAAO,WAAW,CAAA;IACpB,CAAC;IAED,SAAS,CAAC,EAAU;QAClB,OAAO,CACL,KAAC,QAAQ,cACN,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,IADvC,EAAE,CAEN,CACZ,CAAA;IACH,CAAC;CACF"}
+{"version":3,"file":"flow-carousel.js","sourceRoot":"","sources":["../../../src/content-fields/flow-carousel.tsx"],"names":[],"mappings":"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"}

package/lib/esm/content-fields/flow-element.js

@@ -24,7 +24,7 @@ export class FlowElement extends ContentFieldsBase {
         newElement.subtitle = element.subtitle;
         newElement.image = element.image;
         newElement.button = FlowButton.fromAIAgent({
-            id: '',
+            id: `${id}-button`,
             text: element.button.text,
             url: element.button.url,
         });

package/lib/esm/content-fields/flow-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-element.js","sourceRoot":"","sources":["../../../src/content-fields/flow-element.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QACS,UAAK,GAAG,EAAE,CAAA;QACV,aAAQ,GAAG,EAAE,CAAA;QAEb,UAAK,GAAG,EAAE,CAAA;QACV,WAAM,GAAG,KAAK,CAAA;IAkDvB,CAAC;IAhDC,MAAM,CAAC,cAAc,CACnB,SAA4B,EAC5B,MAAc,EACd,MAAsB;QAEtB,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QAChE,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;QACtE,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QACjE,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC,cAAc,CAC3C,SAAS,CAAC,MAAM,EAChB,MAAM,EACN,MAAM,CACP,CAAA;QACD,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,MAAM,CAAC,WAAW,CAChB,EAAU,EACV,OAKC;QAED,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC,CAAA;QACtC,UAAU,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAChC,UAAU,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAA;QACtC,UAAU,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAChC,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC,WAAW,CAAC;YACzC,EAAE,EAAE,EAAE;YACN,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;YACzB,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG;SACxB,CAAC,CAAA;QACF,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,QAAgB;;QACxB,OAAO,CACL,MAAC,OAAO,eACN,KAAC,GAAG,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI,EACxB,KAAC,KAAK,cAAE,IAAI,CAAC,KAAK,GAAS,EAC3B,KAAC,QAAQ,cAAE,IAAI,CAAC,QAAQ,GAAY,EACnC,MAAA,IAAI,CAAC,MAAM,0CAAE,YAAY,CAAC,CAAC,CAAC,KAJjB,GAAG,QAAQ,IAAI,IAAI,CAAC,EAAE,EAAE,CAK5B,CACX,CAAA;IACH,CAAC;CACF"}
+{"version":3,"file":"flow-element.js","sourceRoot":"","sources":["../../../src/content-fields/flow-element.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QACS,UAAK,GAAG,EAAE,CAAA;QACV,aAAQ,GAAG,EAAE,CAAA;QAEb,UAAK,GAAG,EAAE,CAAA;QACV,WAAM,GAAG,KAAK,CAAA;IAkDvB,CAAC;IAhDC,MAAM,CAAC,cAAc,CACnB,SAA4B,EAC5B,MAAc,EACd,MAAsB;QAEtB,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QAChE,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;QACtE,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QACjE,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC,cAAc,CAC3C,SAAS,CAAC,MAAM,EAChB,MAAM,EACN,MAAM,CACP,CAAA;QACD,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,MAAM,CAAC,WAAW,CAChB,EAAU,EACV,OAKC;QAED,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC,CAAA;QACtC,UAAU,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAChC,UAAU,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAA;QACtC,UAAU,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAChC,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC,WAAW,CAAC;YACzC,EAAE,EAAE,GAAG,EAAE,SAAS;YAClB,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;YACzB,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG;SACxB,CAAC,CAAA;QACF,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,QAAgB;;QACxB,OAAO,CACL,MAAC,OAAO,eACN,KAAC,GAAG,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI,EACxB,KAAC,KAAK,cAAE,IAAI,CAAC,KAAK,GAAS,EAC3B,KAAC,QAAQ,cAAE,IAAI,CAAC,QAAQ,GAAY,EACnC,MAAA,IAAI,CAAC,MAAM,0CAAE,YAAY,CAAC,CAAC,CAAC,KAJjB,GAAG,QAAQ,IAAI,IAAI,CAAC,EAAE,EAAE,CAK5B,CACX,CAAA;IACH,CAAC;CACF"}

package/lib/esm/content-fields/flow-text.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { TextMessage, TextWithButtonsMessage } from '@botonic/core';
 import { ActionRequest } from '@botonic/react';
 import { FlowBuilderApi } from '../api';
 import { ContentFieldsBase } from './content-fields-base';
@@ -12,5 +13,6 @@ export declare class FlowText extends ContentFieldsBase {
     static fromHubtypeCMS(cmsText: HtTextNode, locale: string, cmsApi: FlowBuilderApi): FlowText;
     static replaceVariables(text: string, request: ActionRequest): string;
     private static isValidType;
+    static fromAIAgent(id: string, textMessage: TextMessage | TextWithButtonsMessage): JSX.Element;
     toBotonic(id: string, request: ActionRequest): JSX.Element;
 }

package/lib/esm/content-fields/flow-text.js

@@ -1,6 +1,6 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '@botonic/react';
-import { ACCESS_TOKEN_VARIABLE_KEY, VARIABLE_PATTERN } from '../constants';
+import { ACCESS_TOKEN_VARIABLE_KEY, EMPTY_PAYLOAD, SOURCE_INFO_SEPARATOR, VARIABLE_PATTERN, } from '../constants';
 import { getValueFromKeyPath } from '../utils';
 import { ContentFieldsBase } from './content-fields-base';
 import { FlowButton } from './flow-button';
@@ -40,6 +40,22 @@ export class FlowText extends ContentFieldsBase {
         const validTypes = ['boolean', 'string', 'number'];
         return validTypes.includes(typeof botVariable);
     }
+    static fromAIAgent(id, textMessage) {
+        if (textMessage.type === 'text') {
+            return _jsx(Text, { children: textMessage.content.text }, id);
+        }
+        return (_jsxs(Text, { children: [textMessage.content.text, textMessage.content.buttons.map((button, buttonIndex) => {
+                    const buttonData = {
+                        id: `${id}-button-${buttonIndex}`,
+                        text: button.text,
+                        url: button.url,
+                        payload: button.payload
+                            ? `${EMPTY_PAYLOAD}${SOURCE_INFO_SEPARATOR}${buttonIndex}`
+                            : undefined,
+                    };
+                    return FlowButton.fromAIAgent(buttonData).renderButton(buttonIndex);
+                })] }, id));
+    }
     toBotonic(id, request) {
         const replacedText = FlowText.replaceVariables(this.text, request);
         return (_jsxs(Text, { children: [replacedText, this.buttons.map((button, buttonIndex) => button.renderButton(buttonIndex, this.buttonStyle))] }, id));

package/lib/esm/content-fields/flow-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-text.js","sourceRoot":"","sources":["../../../src/content-fields/flow-text.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"flow-text.js","sourceRoot":"","sources":["../../../src/content-fields/flow-text.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/plugin-flow-builder",
-  "version": "0.41.0",
+  "version": "0.41.1-alpha.0",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
   "description": "Use Flow Builder to show your contents",
@@ -14,7 +14,7 @@
     "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet 'src/**/*.ts*'"
   },
   "dependencies": {
-    "@botonic/react": "^0.41.0",
+    "@botonic/react": "0.41.1-alpha.0",
     "axios": "^1.12.2",
     "uuid": "^10.0.0"
   },
@@ -50,4 +50,4 @@
   "devDependencies": {
     "@types/uuid": "^10.0.0"
   }
-}
+}

package/src/content-fields/flow-ai-agent.tsx

@@ -1,9 +1,9 @@
 import { AgenticOutputMessage } from '@botonic/core'
-import { Button, Carousel, Text } from '@botonic/react'
+import { ActionRequest } from '@botonic/react'
 
-import { EMPTY_PAYLOAD, SOURCE_INFO_SEPARATOR } from '../constants'
 import { ContentFieldsBase } from './content-fields-base'
-import { FlowElement } from './flow-element'
+import { FlowCarousel } from './flow-carousel'
+import { FlowText } from './flow-text'
 import { HtAiAgentNode, HtInputGuardrailRule } from './hubtype-fields/ai-agent'
 
 export class FlowAiAgent extends ContentFieldsBase {
@@ -27,40 +27,16 @@ export class FlowAiAgent extends ContentFieldsBase {
     return newAiAgent
   }
 
-  toBotonic(id: string): JSX.Element {
+  toBotonic(id: string, request: ActionRequest): JSX.Element {
     return (
       <>
         {this.responses.map((response: AgenticOutputMessage) => {
-          if (response.type === 'text') {
-            return <Text key={id}>{response.content.text}</Text>
-          }
-
-          if (response.type === 'textWithButtons') {
-            return (
-              <Text key={id}>
-                {response.content.text}
-                {response.content.buttons.map((button, buttonIndex) => {
-                  return (
-                    <Button
-                      key={buttonIndex}
-                      payload={`${EMPTY_PAYLOAD}${SOURCE_INFO_SEPARATOR}${buttonIndex}`}
-                    >
-                      {button.text}
-                    </Button>
-                  )
-                })}
-              </Text>
-            )
+          if (response.type === 'text' || response.type === 'textWithButtons') {
+            return FlowText.fromAIAgent(id, response)
           }
 
           if (response.type === 'carousel') {
-            return (
-              <Carousel key={id}>
-                {response.content.elements.map(element =>
-                  FlowElement.fromAIAgent(id, element).toBotonic(id)
-                )}
-              </Carousel>
-            )
+            return FlowCarousel.fromAIAgent(id, response, request)
           }
 
           return <></>

package/src/content-fields/flow-carousel.tsx

@@ -1,4 +1,9 @@
-import { Carousel } from '@botonic/react'
+import { CarouselMessage, isWhatsapp } from '@botonic/core'
+import {
+  ActionRequest,
+  Carousel,
+  WhatsappInteractiveMediaCarousel,
+} from '@botonic/react'
 import React from 'react'
 
 import { FlowBuilderApi } from '../api'
@@ -23,7 +28,77 @@ export class FlowCarousel extends ContentFieldsBase {
     return newCarousel
   }
 
-  toBotonic(id: string): JSX.Element {
+  static fromAIAgent(
+    id: string,
+    carouselMessage: CarouselMessage,
+    request: ActionRequest
+  ): JSX.Element {
+    const canUseWhatsappInteractiveMediaCarousel = () => {
+      const isValid =
+        carouselMessage.content.text &&
+        !carouselMessage.content.elements.some(
+          element => element.button.payload
+        ) &&
+        carouselMessage.content.elements.every(element => element.button.url)
+
+      if (!isValid) {
+        console.warn(
+          'Cannot use WhatsappInteractiveMediaCarousel for Whatsapp created by AIAgent',
+          carouselMessage.content
+        )
+      }
+      return isValid
+    }
+
+    if (
+      isWhatsapp(request.session) &&
+      canUseWhatsappInteractiveMediaCarousel()
+    ) {
+      return (
+        <WhatsappInteractiveMediaCarousel
+          cards={carouselMessage.content.elements.map(element => {
+            const buttonText = element.button.text
+            const buttonUrl = element.button.url!
+            const imageLink = element.image
+
+            return {
+              text: element.title,
+              action: { buttonText, buttonUrl, imageLink },
+            }
+          })}
+          textMessage={carouselMessage.content.text!}
+        />
+      )
+    }
+    return (
+      <Carousel key={id}>
+        {carouselMessage.content.elements.map((element, index) =>
+          FlowElement.fromAIAgent(`${id}-element-${index}`, element).toBotonic(
+            id
+          )
+        )}
+      </Carousel>
+    )
+  }
+
+  toBotonic(id: string, request: ActionRequest): JSX.Element {
+    if (isWhatsapp(request.session)) {
+      return (
+        <WhatsappInteractiveMediaCarousel
+          cards={this.elements.map(element => {
+            const buttonText = element.button?.text || ''
+            const buttonUrl = element.button?.url || ''
+            const imageLink = element.image || ''
+
+            return {
+              text: element.title,
+              action: { buttonText, buttonUrl, imageLink },
+            }
+          })}
+          textMessage={'These are the options'} // TODO: Add the text message in flow builder frontend and take it from the carousel node with different languages
+        />
+      )
+    }
     return (
       <Carousel key={id}>
         {this.elements.map(element => element.toBotonic(id))}

package/src/content-fields/flow-element.tsx

@@ -44,7 +44,7 @@ export class FlowElement extends ContentFieldsBase {
     newElement.subtitle = element.subtitle
     newElement.image = element.image
     newElement.button = FlowButton.fromAIAgent({
-      id: '',
+      id: `${id}-button`,
       text: element.button.text,
       url: element.button.url,
     })

package/src/content-fields/flow-text.tsx

@@ -1,8 +1,14 @@
+import { TextMessage, TextWithButtonsMessage } from '@botonic/core'
 import { ActionRequest, Text } from '@botonic/react'
 import React from 'react'
 
 import { FlowBuilderApi } from '../api'
-import { ACCESS_TOKEN_VARIABLE_KEY, VARIABLE_PATTERN } from '../constants'
+import {
+  ACCESS_TOKEN_VARIABLE_KEY,
+  EMPTY_PAYLOAD,
+  SOURCE_INFO_SEPARATOR,
+  VARIABLE_PATTERN,
+} from '../constants'
 import { getValueFromKeyPath } from '../utils'
 import { ContentFieldsBase } from './content-fields-base'
 import { FlowButton } from './flow-button'
@@ -55,6 +61,32 @@ export class FlowText extends ContentFieldsBase {
     return validTypes.includes(typeof botVariable)
   }
 
+  static fromAIAgent(
+    id: string,
+    textMessage: TextMessage | TextWithButtonsMessage
+  ): JSX.Element {
+    if (textMessage.type === 'text') {
+      return <Text key={id}>{textMessage.content.text}</Text>
+    }
+
+    return (
+      <Text key={id}>
+        {textMessage.content.text}
+        {textMessage.content.buttons.map((button, buttonIndex) => {
+          const buttonData = {
+            id: `${id}-button-${buttonIndex}`,
+            text: button.text,
+            url: button.url,
+            payload: button.payload
+              ? `${EMPTY_PAYLOAD}${SOURCE_INFO_SEPARATOR}${buttonIndex}`
+              : undefined,
+          }
+          return FlowButton.fromAIAgent(buttonData).renderButton(buttonIndex)
+        })}
+      </Text>
+    )
+  }
+
   toBotonic(id: string, request: ActionRequest): JSX.Element {
     const replacedText = FlowText.replaceVariables(this.text, request)
     return (