@botonic/plugin-flow-builder 0.42.0-alpha.3 → 0.42.0-alpha.4

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

@@ -17,5 +17,5 @@ export declare class FlowAiAgent extends ContentFieldsBase {
     responses: AgenticOutputMessage[];
     static fromHubtypeCMS(component: HtAiAgentNode): FlowAiAgent;
     trackFlow(request: ActionRequest): Promise<void>;
-    toBotonic(id: string): JSX.Element;
+    toBotonic(id: string, request: ActionRequest): JSX.Element;
 }

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

@@ -3,11 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlowAiAgent = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@botonic/react");
-const constants_1 = require("../constants");
 const tracking_1 = require("../tracking");
 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);
@@ -34,18 +33,13 @@ class FlowAiAgent extends content_fields_base_1.ContentFieldsBase {
             yield (0, tracking_1.trackOneContent)(request, this);
         });
     }
-    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,0CAAsE;AAEtE,4CAAmE;AACnE,0CAA6C;AAC7C,+DAAyD;AACzD,iDAA4C;AAG5C,MAAa,WAAY,SAAQ,uCAAiB;IAAlD;;QACS,SAAI,GAAW,EAAE,CAAA;QACjB,iBAAY,GAAW,EAAE,CAAA;QAKzB,cAAS,GAA2B,EAAE,CAAA;IA+D/C,CAAC;IA7DC,MAAM,CAAC,cAAc,CAAC,SAAwB;QAC5C,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAA;QAChC,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,UAAU,CAAC,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAA;QAEzC,OAAO,UAAU,CAAA;IACnB,CAAC;IAEK,SAAS,CAAC,OAAsB;;YACpC,0FAA0F;YAC1F,wDAAwD;YACxD,MAAM,IAAA,0BAAe,EAAC,OAAO,EAAE,IAAI,CAAC,CAAA;QACtC,CAAC;KAAA;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;AAtED,kCAsEC"}
+{"version":3,"file":"flow-ai-agent.js","sourceRoot":"","sources":["../../../src/content-fields/flow-ai-agent.tsx"],"names":[],"mappings":";;;;;AAGA,0CAA6C;AAC7C,+DAAyD;AACzD,mDAA8C;AAC9C,2CAAsC;AAGtC,MAAa,WAAY,SAAQ,uCAAiB;IAAlD;;QACS,SAAI,GAAW,EAAE,CAAA;QACjB,iBAAY,GAAW,EAAE,CAAA;QAKzB,cAAS,GAA2B,EAAE,CAAA;IAuC/C,CAAC;IArCC,MAAM,CAAC,cAAc,CAAC,SAAwB;QAC5C,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAA;QAChC,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,UAAU,CAAC,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAA;QAEzC,OAAO,UAAU,CAAA;IACnB,CAAC;IAEK,SAAS,CAAC,OAAsB;;YACpC,0FAA0F;YAC1F,wDAAwD;YACxD,MAAM,IAAA,0BAAe,EAAC,OAAO,EAAE,IAAI,CAAC,CAAA;QACtC,CAAC;KAAA;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;AA9CD,kCA8CC"}

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

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

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

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlowCarousel = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@botonic/core");
 const react_1 = require("@botonic/react");
 const tracking_1 = require("../tracking");
 const content_fields_base_1 = require("./content-fields-base");
 const flow_element_1 = require("./flow-element");
+const DEFAULT_TEXT_MESSAGE = 'These are the options';
 class FlowCarousel extends content_fields_base_1.ContentFieldsBase {
     constructor() {
         super(...arguments);
@@ -27,9 +29,77 @@ class FlowCarousel extends content_fields_base_1.ContentFieldsBase {
             }
         });
     }
-    toBotonic(id) {
+    static fromAIAgent(id, carouselMessage, request) {
+        if ((0, core_1.isWhatsapp)(request.session) &&
+            FlowCarousel.areElementsValidForWhatsapp(carouselMessage)) {
+            if (carouselMessage.content.elements.length === 1) {
+                const element = carouselMessage.content.elements[0];
+                console.log('displaying whatsapp cta url button with element', element);
+                // TODO: Add a new fromAIAgent method in FlowWhatsappCtaUrlButtonNode to create a WhatsappCTAUrlButton from an AIAgent message
+                return ((0, jsx_runtime_1.jsx)(react_1.WhatsappCTAUrlButton, { body: element.title, headerType: react_1.WhatsappCTAUrlHeaderType.Image, headerImage: element.image, footer: element.subtitle, displayText: element.button.text, url: element.button.url }, id));
+            }
+            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}*\n${element.subtitle}`,
+                        action: { buttonText, buttonUrl, imageLink },
+                    };
+                }), textMessage: carouselMessage.content.text || DEFAULT_TEXT_MESSAGE }));
+        }
+        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));
+    }
+    toCarouselMessage(elements) {
+        return {
+            type: 'carousel',
+            content: {
+                elements: elements.map(element => {
+                    var _a, _b, _c;
+                    return {
+                        button: {
+                            text: ((_a = element.button) === null || _a === void 0 ? void 0 : _a.text) || '',
+                            payload: (_b = element.button) === null || _b === void 0 ? void 0 : _b.payload,
+                            url: (_c = element.button) === null || _c === void 0 ? void 0 : _c.url,
+                        },
+                        title: element.title,
+                        subtitle: element.subtitle,
+                        image: element.image,
+                    };
+                }),
+            },
+        };
+    }
+    toBotonic(id, request) {
+        const carouselMessage = this.toCarouselMessage(this.elements);
+        if ((0, core_1.isWhatsapp)(request.session) &&
+            FlowCarousel.areElementsValidForWhatsapp(carouselMessage)) {
+            if (this.elements.length === 1) {
+                const element = this.elements[0];
+                return ((0, jsx_runtime_1.jsx)(react_1.WhatsappCTAUrlButton, { body: element.title, headerType: react_1.WhatsappCTAUrlHeaderType.Image, headerImage: element.image, displayText: element.button.text, url: element.button.url }, id));
+            }
+            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 },
+                    };
+                }), 
+                // TODO: Add the text message in flow builder frontend and take it from the carousel node with different languages
+                textMessage: DEFAULT_TEXT_MESSAGE }));
+        }
         return ((0, jsx_runtime_1.jsx)(react_1.Carousel, { children: this.elements.map(element => element.toBotonic(id)) }, id));
     }
 }
 exports.FlowCarousel = FlowCarousel;
+FlowCarousel.areElementsValidForWhatsapp = (carouselMessage) => {
+    const isValid = !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;
+};
 //# sourceMappingURL=flow-carousel.js.map

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,0CAAwD;AAIxD,0CAA6C;AAC7C,+DAAyD;AACzD,iDAA4C;AAG5C,MAAa,YAAa,SAAQ,uCAAiB;IAAnD;;QACS,aAAQ,GAAkB,EAAE,CAAA;IA+BrC,CAAC;IA7BC,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,WAAW,CAAC,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAA;QAE1C,OAAO,WAAW,CAAA;IACpB,CAAC;IAEK,SAAS,CAAC,OAAsB;;YACpC,MAAM,IAAA,0BAAe,EAAC,OAAO,EAAE,IAAI,CAAC,CAAA;YACpC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACnC,MAAM,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;aACjC;QACH,CAAC;KAAA;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;AAhCD,oCAgCC"}
+{"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

@@ -28,7 +28,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,0CAA6E;AAG7E,+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;IAwDvB,CAAC;IAtDC,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;IAEK,SAAS,CAAC,OAAsB;;YACpC,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,MAAM,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;aACrC;QACH,CAAC;KAAA;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;AA7DD,kCA6DC"}
+{"version":3,"file":"flow-element.js","sourceRoot":"","sources":["../../../src/content-fields/flow-element.tsx"],"names":[],"mappings":";;;;;AACA,0CAA6E;AAG7E,+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;IAwDvB,CAAC;IAtDC,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;IAEK,SAAS,CAAC,OAAsB;;YACpC,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,MAAM,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;aACrC;QACH,CAAC;KAAA;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;AA7DD,kCA6DC"}

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 replaceVariables(text: string, request: ActionRequest): string;
     private static isValidType;
     trackFlow(request: ActionRequest): Promise<void>;
+    static fromAIAgent(id: string, textMessage: TextMessage | TextWithButtonsMessage): JSX.Element;
     toBotonic(id: string, request: ActionRequest): JSX.Element;
 }

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

@@ -53,6 +53,22 @@ class FlowText extends content_fields_base_1.ContentFieldsBase {
             }
         });
     }
+    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":"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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/lib/esm/content-fields/flow-ai-agent.d.ts

@@ -17,5 +17,5 @@ export declare class FlowAiAgent extends ContentFieldsBase {
     responses: AgenticOutputMessage[];
     static fromHubtypeCMS(component: HtAiAgentNode): FlowAiAgent;
     trackFlow(request: ActionRequest): Promise<void>;
-    toBotonic(id: string): JSX.Element;
+    toBotonic(id: string, request: ActionRequest): JSX.Element;
 }

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

@@ -1,10 +1,9 @@
 import { __awaiter } from "tslib";
-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 { trackOneContent } from '../tracking';
 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);
@@ -31,18 +30,13 @@ export class FlowAiAgent extends ContentFieldsBase {
             yield trackOneContent(request, this);
         });
     }
-    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,EAAiB,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AAEtE,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,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,iBAAY,GAAW,EAAE,CAAA;QAKzB,cAAS,GAA2B,EAAE,CAAA;IA+D/C,CAAC;IA7DC,MAAM,CAAC,cAAc,CAAC,SAAwB;QAC5C,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAA;QAChC,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,UAAU,CAAC,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAA;QAEzC,OAAO,UAAU,CAAA;IACnB,CAAC;IAEK,SAAS,CAAC,OAAsB;;YACpC,0FAA0F;YAC1F,wDAAwD;YACxD,MAAM,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;QACtC,CAAC;KAAA;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,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,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,iBAAY,GAAW,EAAE,CAAA;QAKzB,cAAS,GAA2B,EAAE,CAAA;IAuC/C,CAAC;IArCC,MAAM,CAAC,cAAc,CAAC,SAAwB;QAC5C,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;QAChD,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAA;QAChC,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,UAAU,CAAC,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAA;QAEzC,OAAO,UAAU,CAAA;IACnB,CAAC;IAEK,SAAS,CAAC,OAAsB;;YACpC,0FAA0F;YAC1F,wDAAwD;YACxD,MAAM,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;QACtC,CAAC;KAAA;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,5 @@
 /// <reference types="react" />
+import { CarouselMessage } from '@botonic/core';
 import { ActionRequest } from '@botonic/react';
 import { FlowBuilderApi } from '../api';
 import { ContentFieldsBase } from './content-fields-base';
@@ -8,5 +9,8 @@ export declare class FlowCarousel extends ContentFieldsBase {
     elements: FlowElement[];
     static fromHubtypeCMS(component: HtCarouselNode, locale: string, cmsApi: FlowBuilderApi): FlowCarousel;
     trackFlow(request: ActionRequest): Promise<void>;
-    toBotonic(id: string): JSX.Element;
+    static areElementsValidForWhatsapp: (carouselMessage: CarouselMessage) => boolean;
+    static fromAIAgent(id: string, carouselMessage: CarouselMessage, request: ActionRequest): JSX.Element;
+    private toCarouselMessage;
+    toBotonic(id: string, request: ActionRequest): JSX.Element;
 }

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

@@ -1,9 +1,11 @@
 import { __awaiter } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Carousel } from '@botonic/react';
+import { isWhatsapp } from '@botonic/core';
+import { Carousel, WhatsappCTAUrlButton, WhatsappCTAUrlHeaderType, WhatsappInteractiveMediaCarousel, } from '@botonic/react';
 import { trackOneContent } from '../tracking';
 import { ContentFieldsBase } from './content-fields-base';
 import { FlowElement } from './flow-element';
+const DEFAULT_TEXT_MESSAGE = 'These are the options';
 export class FlowCarousel extends ContentFieldsBase {
     constructor() {
         super(...arguments);
@@ -24,8 +26,76 @@ export class FlowCarousel extends ContentFieldsBase {
             }
         });
     }
-    toBotonic(id) {
+    static fromAIAgent(id, carouselMessage, request) {
+        if (isWhatsapp(request.session) &&
+            FlowCarousel.areElementsValidForWhatsapp(carouselMessage)) {
+            if (carouselMessage.content.elements.length === 1) {
+                const element = carouselMessage.content.elements[0];
+                console.log('displaying whatsapp cta url button with element', element);
+                // TODO: Add a new fromAIAgent method in FlowWhatsappCtaUrlButtonNode to create a WhatsappCTAUrlButton from an AIAgent message
+                return (_jsx(WhatsappCTAUrlButton, { body: element.title, headerType: WhatsappCTAUrlHeaderType.Image, headerImage: element.image, footer: element.subtitle, displayText: element.button.text, url: element.button.url }, id));
+            }
+            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}*\n${element.subtitle}`,
+                        action: { buttonText, buttonUrl, imageLink },
+                    };
+                }), textMessage: carouselMessage.content.text || DEFAULT_TEXT_MESSAGE }));
+        }
+        return (_jsx(Carousel, { children: carouselMessage.content.elements.map((element, index) => FlowElement.fromAIAgent(`${id}-element-${index}`, element).toBotonic(id)) }, id));
+    }
+    toCarouselMessage(elements) {
+        return {
+            type: 'carousel',
+            content: {
+                elements: elements.map(element => {
+                    var _a, _b, _c;
+                    return {
+                        button: {
+                            text: ((_a = element.button) === null || _a === void 0 ? void 0 : _a.text) || '',
+                            payload: (_b = element.button) === null || _b === void 0 ? void 0 : _b.payload,
+                            url: (_c = element.button) === null || _c === void 0 ? void 0 : _c.url,
+                        },
+                        title: element.title,
+                        subtitle: element.subtitle,
+                        image: element.image,
+                    };
+                }),
+            },
+        };
+    }
+    toBotonic(id, request) {
+        const carouselMessage = this.toCarouselMessage(this.elements);
+        if (isWhatsapp(request.session) &&
+            FlowCarousel.areElementsValidForWhatsapp(carouselMessage)) {
+            if (this.elements.length === 1) {
+                const element = this.elements[0];
+                return (_jsx(WhatsappCTAUrlButton, { body: element.title, headerType: WhatsappCTAUrlHeaderType.Image, headerImage: element.image, displayText: element.button.text, url: element.button.url }, id));
+            }
+            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 },
+                    };
+                }), 
+                // TODO: Add the text message in flow builder frontend and take it from the carousel node with different languages
+                textMessage: DEFAULT_TEXT_MESSAGE }));
+        }
         return (_jsx(Carousel, { children: this.elements.map(element => element.toBotonic(id)) }, id));
     }
 }
+FlowCarousel.areElementsValidForWhatsapp = (carouselMessage) => {
+    const isValid = !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;
+};
 //# sourceMappingURL=flow-carousel.js.map

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,EAAiB,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIxD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,MAAM,OAAO,YAAa,SAAQ,iBAAiB;IAAnD;;QACS,aAAQ,GAAkB,EAAE,CAAA;IA+BrC,CAAC;IA7BC,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,WAAW,CAAC,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAA;QAE1C,OAAO,WAAW,CAAA;IACpB,CAAC;IAEK,SAAS,CAAC,OAAsB;;YACpC,MAAM,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;YACpC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACnC,MAAM,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;aACjC;QACH,CAAC;KAAA;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

@@ -25,7 +25,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,EAAiB,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG7E,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;IAwDvB,CAAC;IAtDC,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;IAEK,SAAS,CAAC,OAAsB;;YACpC,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,MAAM,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;aACrC;QACH,CAAC;KAAA;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,EAAiB,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG7E,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;IAwDvB,CAAC;IAtDC,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;IAEK,SAAS,CAAC,OAAsB;;YACpC,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,MAAM,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;aACrC;QACH,CAAC;KAAA;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 replaceVariables(text: string, request: ActionRequest): string;
     private static isValidType;
     trackFlow(request: ActionRequest): Promise<void>;
+    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,7 +1,7 @@
 import { __awaiter } from "tslib";
-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 { trackOneContent } from '../tracking';
 import { getValueFromKeyPath } from '../utils';
 import { ContentFieldsBase } from './content-fields-base';
@@ -50,6 +50,22 @@ export class FlowText extends ContentFieldsBase {
             }
         });
     }
+    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.42.0-alpha.3",
+  "version": "0.42.0-alpha.4",
   "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.42.0-alpha.3",
+    "@botonic/react": "0.42.0-alpha.4",
     "axios": "^1.12.2",
     "uuid": "^10.0.0"
   },

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

@@ -1,10 +1,10 @@
 import { AgenticOutputMessage } from '@botonic/core'
-import { ActionRequest, Button, Carousel, Text } from '@botonic/react'
+import { ActionRequest } from '@botonic/react'
 
-import { EMPTY_PAYLOAD, SOURCE_INFO_SEPARATOR } from '../constants'
 import { trackOneContent } from '../tracking'
 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 {
@@ -36,40 +36,16 @@ export class FlowAiAgent extends ContentFieldsBase {
     await trackOneContent(request, this)
   }
 
-  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,11 @@
-import { ActionRequest, Carousel } from '@botonic/react'
+import { CarouselMessage, isWhatsapp } from '@botonic/core'
+import {
+  ActionRequest,
+  Carousel,
+  WhatsappCTAUrlButton,
+  WhatsappCTAUrlHeaderType,
+  WhatsappInteractiveMediaCarousel,
+} from '@botonic/react'
 import React from 'react'
 
 import { FlowBuilderApi } from '../api'
@@ -7,6 +14,7 @@ import { ContentFieldsBase } from './content-fields-base'
 import { FlowElement } from './flow-element'
 import { HtCarouselNode } from './hubtype-fields'
 
+const DEFAULT_TEXT_MESSAGE = 'These are the options'
 export class FlowCarousel extends ContentFieldsBase {
   public elements: FlowElement[] = []
 
@@ -32,7 +40,132 @@ export class FlowCarousel extends ContentFieldsBase {
     }
   }
 
-  toBotonic(id: string): JSX.Element {
+  static areElementsValidForWhatsapp = (carouselMessage: CarouselMessage) => {
+    const isValid =
+      !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
+  }
+
+  static fromAIAgent(
+    id: string,
+    carouselMessage: CarouselMessage,
+    request: ActionRequest
+  ): JSX.Element {
+    if (
+      isWhatsapp(request.session) &&
+      FlowCarousel.areElementsValidForWhatsapp(carouselMessage)
+    ) {
+      if (carouselMessage.content.elements.length === 1) {
+        const element = carouselMessage.content.elements[0]
+        console.log('displaying whatsapp cta url button with element', element)
+        // TODO: Add a new fromAIAgent method in FlowWhatsappCtaUrlButtonNode to create a WhatsappCTAUrlButton from an AIAgent message
+        return (
+          <WhatsappCTAUrlButton
+            key={id}
+            body={element.title}
+            headerType={WhatsappCTAUrlHeaderType.Image}
+            headerImage={element.image}
+            footer={element.subtitle}
+            displayText={element.button.text}
+            url={element.button.url!}
+          />
+        )
+      }
+
+      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}*\n${element.subtitle}`,
+              action: { buttonText, buttonUrl, imageLink },
+            }
+          })}
+          textMessage={carouselMessage.content.text || DEFAULT_TEXT_MESSAGE}
+        />
+      )
+    }
+    return (
+      <Carousel key={id}>
+        {carouselMessage.content.elements.map((element, index) =>
+          FlowElement.fromAIAgent(`${id}-element-${index}`, element).toBotonic(
+            id
+          )
+        )}
+      </Carousel>
+    )
+  }
+
+  private toCarouselMessage(elements: FlowElement[]): CarouselMessage {
+    return {
+      type: 'carousel',
+      content: {
+        elements: elements.map(element => {
+          return {
+            button: {
+              text: element.button?.text || '',
+              payload: element.button?.payload,
+              url: element.button?.url,
+            },
+            title: element.title,
+            subtitle: element.subtitle,
+            image: element.image,
+          }
+        }),
+      },
+    }
+  }
+
+  toBotonic(id: string, request: ActionRequest): JSX.Element {
+    const carouselMessage = this.toCarouselMessage(this.elements)
+    if (
+      isWhatsapp(request.session) &&
+      FlowCarousel.areElementsValidForWhatsapp(carouselMessage)
+    ) {
+      if (this.elements.length === 1) {
+        const element = this.elements[0]
+
+        return (
+          <WhatsappCTAUrlButton
+            key={id}
+            body={element.title}
+            headerType={WhatsappCTAUrlHeaderType.Image}
+            headerImage={element.image}
+            displayText={element.button!.text}
+            url={element.button!.url!}
+          />
+        )
+      }
+
+      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 },
+            }
+          })}
+          // TODO: Add the text message in flow builder frontend and take it from the carousel node with different languages
+          textMessage={DEFAULT_TEXT_MESSAGE}
+        />
+      )
+    }
     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 { trackOneContent } from '../tracking'
 import { getValueFromKeyPath } from '../utils'
 import { ContentFieldsBase } from './content-fields-base'
@@ -64,6 +70,32 @@ export class FlowText extends ContentFieldsBase {
     }
   }
 
+  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 (