@botonic/react 0.56.0-alpha.0 → 0.57.0-rslib-esm.1

package/lib/components/message-template.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { renderComponent } from "../util/react.js";
+
+
+
+
+/** biome-ignore-all lint/security/noDangerouslySetInnerHtml: MessageTemplate is a component that renders a message template */ 
+const MessageTemplate = (props)=>{
+    const renderBrowser = ()=>null;
+    const renderNode = ()=>/*#__PURE__*/ jsx("message", {
+            type: "template",
+            children: /*#__PURE__*/ jsx("pre", {
+                dangerouslySetInnerHTML: {
+                    __html: JSON.stringify(props.payload)
+                }
+            })
+        });
+    return renderComponent({
+        renderBrowser,
+        renderNode
+    });
+};
+
+export { MessageTemplate };
+
+//# sourceMappingURL=message-template.js.map

package/lib/components/message-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/message-template.js","sources":["../../src/components/message-template.jsx"],"sourcesContent":["/** biome-ignore-all lint/security/noDangerouslySetInnerHtml: MessageTemplate is a component that renders a message template */\nimport { renderComponent } from '../util/react'\n\nexport const MessageTemplate = props => {\n  const renderBrowser = () => null\n  const renderNode = () => (\n    <message type='template'>\n      <pre\n        dangerouslySetInnerHTML={{ __html: JSON.stringify(props.payload) }}\n      />\n    </message>\n  )\n  return renderComponent({ renderBrowser, renderNode })\n}\n"],"names":["renderComponent","MessageTemplate","props","renderBrowser","renderNode","JSON"],"mappings":";;;;;;AAAA,6HAA6H,GAC9E;AAExC,MAAMC,eAAeA,GAAGC,CAAAA;IAC7B,MAAMC,gBAAgB,IAAM;IAC5B,MAAMC,aAAa,kBACjB,IAAC;YAAQ,MAAK;sBACZ,kBAAC;gBACC,yBAAyB;oBAAE,QAAQC,KAAK,SAAS,CAACH,MAAM,OAAO;gBAAE;;;IAIvE,OAAOF,eAAeA,CAAC;QAAEG;QAAeC;IAAW;AACrD,EAAC"}

package/lib/components/multichannel/facebook/facebook.js

@@ -0,0 +1,61 @@
+const MAX_CHARACTERS_FACEBOOK = 640;
+class MultichannelFacebook {
+    convertText(props, originalText) {
+        if (originalText.length > MAX_CHARACTERS_FACEBOOK) {
+            const texts = this.splitText(originalText);
+            const lastText = texts.pop();
+            const { propsLastText, propsWithoutChildren } = this.getNewProps(props, lastText);
+            return {
+                texts,
+                propsLastText,
+                propsWithoutChildren
+            };
+        }
+        return {
+            propsLastText: props
+        };
+    }
+    splitText(originalText) {
+        const lines = originalText.split('\n');
+        const initialText = lines.shift();
+        const texts = [
+            initialText
+        ];
+        let index = 0;
+        lines.forEach((currentText)=>{
+            if (texts[index].length + currentText.length > MAX_CHARACTERS_FACEBOOK) {
+                index++;
+                texts.push(currentText);
+            } else {
+                texts[index] = texts[index].concat('\n', currentText);
+            }
+        });
+        return texts;
+    }
+    // modifies the props to keep the children only for the last text message, this message will be the one with buttons and replies
+    getNewProps(props, lastText) {
+        const propsLastText = {
+            ...props
+        };
+        propsLastText.children = [
+            lastText
+        ];
+        if (Array.isArray(props.children)) {
+            props.children.filter((e)=>e.type).forEach((e)=>{
+                propsLastText.children.push(e);
+            });
+        }
+        const propsWithoutChildren = {
+            ...props
+        };
+        delete propsWithoutChildren.children;
+        return {
+            propsLastText,
+            propsWithoutChildren
+        };
+    }
+}
+
+export { MAX_CHARACTERS_FACEBOOK, MultichannelFacebook };
+
+//# sourceMappingURL=facebook.js.map

package/lib/components/multichannel/facebook/facebook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/multichannel/facebook/facebook.js","sources":["../../../../src/components/multichannel/facebook/facebook.jsx"],"sourcesContent":["export const MAX_CHARACTERS_FACEBOOK = 640\n\nexport class MultichannelFacebook {\n  convertText(props, originalText) {\n    if (originalText.length > MAX_CHARACTERS_FACEBOOK) {\n      const texts = this.splitText(originalText)\n      const lastText = texts.pop()\n      const { propsLastText, propsWithoutChildren } = this.getNewProps(\n        props,\n        lastText\n      )\n      return { texts, propsLastText, propsWithoutChildren }\n    }\n    return { propsLastText: props }\n  }\n\n  splitText(originalText) {\n    const lines = originalText.split('\\n')\n    const initialText = lines.shift()\n    const texts = [initialText]\n    let index = 0\n    lines.forEach(currentText => {\n      if (texts[index].length + currentText.length > MAX_CHARACTERS_FACEBOOK) {\n        index++\n        texts.push(currentText)\n      } else {\n        texts[index] = texts[index].concat('\\n', currentText)\n      }\n    })\n    return texts\n  }\n\n  // modifies the props to keep the children only for the last text message, this message will be the one with buttons and replies\n  getNewProps(props, lastText) {\n    const propsLastText = { ...props }\n    propsLastText.children = [lastText]\n    if (Array.isArray(props.children)) {\n      props.children\n        .filter(e => e.type)\n        .forEach(e => {\n          propsLastText.children.push(e)\n        })\n    }\n    const propsWithoutChildren = { ...props }\n    delete propsWithoutChildren.children\n    return { propsLastText, propsWithoutChildren }\n  }\n}\n"],"names":["MAX_CHARACTERS_FACEBOOK","MultichannelFacebook","props","originalText","texts","lastText","propsLastText","propsWithoutChildren","lines","initialText","index","currentText","Array","e"],"mappings":"AAAO,MAAMA,uBAAuBA,GAAG,IAAG;AAEnC,MAAMC,oBAAoBA;IAC/B,YAAYC,KAAK,EAAEC,YAAY,EAAE;QAC/B,IAAIA,aAAa,MAAM,GAAGH,uBAAuBA,EAAE;YACjD,MAAMI,QAAQ,IAAI,CAAC,SAAS,CAACD;YAC7B,MAAME,WAAWD,MAAM,GAAG;YAC1B,MAAM,EAAEE,aAAa,EAAEC,oBAAoB,EAAE,GAAG,IAAI,CAAC,WAAW,CAC9DL,OACAG;YAEF,OAAO;gBAAED;gBAAOE;gBAAeC;YAAqB;QACtD;QACA,OAAO;YAAE,eAAeL;QAAM;IAChC;IAEA,UAAUC,YAAY,EAAE;QACtB,MAAMK,QAAQL,aAAa,KAAK,CAAC;QACjC,MAAMM,cAAcD,MAAM,KAAK;QAC/B,MAAMJ,QAAQ;YAACK;SAAY;QAC3B,IAAIC,QAAQ;QACZF,MAAM,OAAO,CAACG,CAAAA;YACZ,IAAIP,KAAK,CAACM,MAAM,CAAC,MAAM,GAAGC,YAAY,MAAM,GAAGX,uBAAuBA,EAAE;gBACtEU;gBACAN,MAAM,IAAI,CAACO;YACb,OAAO;gBACLP,KAAK,CAACM,MAAM,GAAGN,KAAK,CAACM,MAAM,CAAC,MAAM,CAAC,MAAMC;YAC3C;QACF;QACA,OAAOP;IACT;IAEA,gIAAgI;IAChI,YAAYF,KAAK,EAAEG,QAAQ,EAAE;QAC3B,MAAMC,gBAAgB;YAAE,GAAGJ,KAAK;QAAC;QACjCI,cAAc,QAAQ,GAAG;YAACD;SAAS;QACnC,IAAIO,MAAM,OAAO,CAACV,MAAM,QAAQ,GAAG;YACjCA,MAAM,QAAQ,CACX,MAAM,CAACW,CAAAA,IAAKA,EAAE,IAAI,EAClB,OAAO,CAACA,CAAAA;gBACPP,cAAc,QAAQ,CAAC,IAAI,CAACO;YAC9B;QACJ;QACA,MAAMN,uBAAuB;YAAE,GAAGL,KAAK;QAAC;QACxC,OAAOK,qBAAqB,QAAQ;QACpC,OAAO;YAAED;YAAeC;QAAqB;IAC/C;AACF"}

package/lib/components/multichannel/index-types.js

@@ -0,0 +1,5 @@
+// Reply
+
+
+
+//# sourceMappingURL=index-types.js.map

package/lib/components/multichannel/index-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/multichannel/index-types.js","sources":["../../../src/components/multichannel/index-types.ts"],"sourcesContent":["export type IndexMode = 'number' | 'letter' | undefined //undefined means no index\n\nexport interface MultichannelViewOptions {\n  boldIndex?: boolean\n  indexSeparator?: string // after it, a space will always be added\n}\n\nexport interface MultichannelContextType extends MultichannelViewOptions {\n  currentIndex: number | string // can be letter or number\n  /** @see same field at MultichannelProps */\n  messageSeparator?: string\n}\n\n// Text\nexport interface MultichannelTextProps extends MultichannelViewOptions {\n  index?: string\n  indexMode?: IndexMode\n  /** Defaults to no separator between lines*/\n  newline?: string\n  buttonsAsText?: boolean\n  buttonsTextSeparator?: string\n  menuButtonTextWhatsappList?: string\n}\n\n// Carousel\nexport interface MultichannelCarouselProps extends MultichannelViewOptions {\n  enableURL?: boolean\n}\n\n// Button\nexport interface MultichannelButtonProps {\n  newline?: string\n  path?: string\n  payload?: string\n  url?: string\n  webview?: string\n  asText?: boolean\n}\n\n// Reply\n\nexport interface MultichannelProps extends MultichannelViewOptions {\n  firstIndex?: number | string\n  carousel?: MultichannelCarouselProps\n  text?: MultichannelTextProps\n  /**\n   * If undefined, each component will be served in a different botonic message\n   * '' will concatenate in the same line\n   * '\\n' will split in different lines\n   * '\\n\\n' will separate with an empty line\n   **/\n  messageSeparator?: string\n}\n"],"names":[],"mappings":"AAuCA,QAAQ;AAaP"}

package/lib/components/multichannel/index.d.ts

@@ -0,0 +1,11 @@
+import { Multichannel } from './multichannel.js';
+import { MultichannelButton } from './multichannel-button.js';
+import { MultichannelCarousel } from './multichannel-carousel.js';
+import { MultichannelReply } from './multichannel-reply.js';
+import { MultichannelText } from './multichannel-text.js';
+export { Multichannel };
+export { MultichannelText };
+export { MultichannelButton };
+export { MultichannelReply };
+export { MultichannelCarousel };
+export * from './index-types.js';

package/lib/components/multichannel/index.js

@@ -0,0 +1,25 @@
+export * from "./index-types.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export { Multichannel } from "./multichannel.js";
+export { MultichannelButton } from "./multichannel-button.js";
+export { MultichannelCarousel } from "./multichannel-carousel.js";
+export { MultichannelReply } from "./multichannel-reply.js";
+export { MultichannelText } from "./multichannel-text.js";
+
+//# sourceMappingURL=index.js.map

package/lib/components/multichannel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/multichannel/index.js","sources":["../../../src/components/multichannel/index.ts"],"sourcesContent":["import { Multichannel } from './multichannel'\nimport { MultichannelButton } from './multichannel-button'\nimport { MultichannelCarousel } from './multichannel-carousel'\nimport { MultichannelReply } from './multichannel-reply'\nimport { MultichannelText } from './multichannel-text'\n\nexport { Multichannel }\nexport { MultichannelText }\nexport { MultichannelButton }\nexport { MultichannelReply }\nexport { MultichannelCarousel }\n\nexport * from './index-types'\n"],"names":["Multichannel","MultichannelButton","MultichannelCarousel","MultichannelReply","MultichannelText"],"mappings":";;;;;;AAA6C;AACa;AACI;AACN;AACF;AAE/B;AACI;AACE;AACD;AACG;AAEF"}

package/lib/components/multichannel/multichannel-button.d.ts

@@ -0,0 +1,4 @@
+export function MultichannelButton(props: any): string | import("react").JSX.Element;
+export namespace MultichannelButton {
+    let displayName: "MultichannelButton";
+}

package/lib/components/multichannel/multichannel-button.js

@@ -0,0 +1,93 @@
+import { jsx } from "react/jsx-runtime";
+import { isWhatsapp } from "@botonic/core";
+import { useContext } from "react";
+import { RequestContext } from "../../contexts.js";
+import { truncateText } from "../../util/index.js";
+import { Button } from "../button/index.js";
+import { COMPONENT_DISPLAY_NAMES } from "../constants.js";
+import { MultichannelContext } from "./multichannel-context.js";
+import { WHATSAPP_MAX_BUTTON_CHARS } from "./whatsapp/constants.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const MultichannelButton = (props)=>{
+    const requestContext = useContext(RequestContext);
+    const multichannelContext = useContext(MultichannelContext);
+    const hasUrl = ()=>Boolean(props.url);
+    const hasPath = ()=>Boolean(props.path);
+    const hasPayload = ()=>Boolean(props.payload);
+    const hasPostback = ()=>hasPath() || hasPayload();
+    const hasWebview = ()=>Boolean(props.webview);
+    const getUrl = ()=>props.url;
+    const _getWebview = ()=>props.webview;
+    const increaseCurrentIndex = ()=>{
+        if (typeof multichannelContext.currentIndex === 'number') {
+            multichannelContext.currentIndex += 1;
+        } else if (typeof multichannelContext.currentIndex === 'string') {
+            const lastChar = multichannelContext.currentIndex.charCodeAt(multichannelContext.currentIndex.length - 1);
+            multichannelContext.currentIndex = String.fromCharCode(lastChar + 1);
+        }
+    };
+    const formatIndex = (index)=>{
+        const boldIndex = multichannelContext.boldIndex ?? false;
+        return boldIndex ? `*${index}*` : index;
+    };
+    const getText = ()=>{
+        let text = props.children;
+        const newline = props.newline || '';
+        const separator = multichannelContext.indexSeparator || ' ';
+        const index = multichannelContext.currentIndex ? `${formatIndex(multichannelContext.currentIndex + separator)} ` : '';
+        if (hasPostback()) {
+            text = `${newline}${index}${text}`;
+        } else if (hasUrl()) {
+            text = `${newline}- ${text}`;
+        }
+        return text;
+    };
+    if (isWhatsapp(requestContext.session)) {
+        const asText = props.asText ?? true;
+        if (asText) {
+            if (hasUrl()) {
+                return `${getText()}: ${getUrl()}`;
+            } else if (hasPath() || hasPayload()) {
+                const text = getText();
+                increaseCurrentIndex();
+                return `${text}`;
+            } else if (hasWebview()) {
+                return /*#__PURE__*/ jsx(Button, {
+                    ...props,
+                    children: getText()
+                });
+            }
+        }
+        return /*#__PURE__*/ jsx(Button, {
+            ...props,
+            children: truncateText(props.children, WHATSAPP_MAX_BUTTON_CHARS)
+        });
+    }
+    return /*#__PURE__*/ jsx(Button, {
+        ...props,
+        children: props.children
+    });
+};
+MultichannelButton.displayName = COMPONENT_DISPLAY_NAMES.MultichannelButton;
+
+export { MultichannelButton };
+
+//# sourceMappingURL=multichannel-button.js.map

package/lib/components/multichannel/multichannel-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/multichannel/multichannel-button.js","sources":["../../../src/components/multichannel/multichannel-button.jsx"],"sourcesContent":["import { isWhatsapp } from '@botonic/core'\nimport { useContext } from 'react'\n\nimport { RequestContext } from '../../contexts'\nimport { truncateText } from '../../util'\nimport { Button } from '../button/index'\nimport { COMPONENT_DISPLAY_NAMES } from '../constants'\nimport { MultichannelContext } from './multichannel-context'\nimport { WHATSAPP_MAX_BUTTON_CHARS } from './whatsapp/constants'\n\nexport const MultichannelButton = props => {\n  const requestContext = useContext(RequestContext)\n  const multichannelContext = useContext(MultichannelContext)\n\n  const hasUrl = () => Boolean(props.url)\n\n  const hasPath = () => Boolean(props.path)\n\n  const hasPayload = () => Boolean(props.payload)\n\n  const hasPostback = () => hasPath() || hasPayload()\n\n  const hasWebview = () => Boolean(props.webview)\n\n  const getUrl = () => props.url\n  const _getWebview = () => props.webview\n\n  const increaseCurrentIndex = () => {\n    if (typeof multichannelContext.currentIndex === 'number') {\n      multichannelContext.currentIndex += 1\n    } else if (typeof multichannelContext.currentIndex === 'string') {\n      const lastChar = multichannelContext.currentIndex.charCodeAt(\n        multichannelContext.currentIndex.length - 1\n      )\n      multichannelContext.currentIndex = String.fromCharCode(lastChar + 1)\n    }\n  }\n\n  const formatIndex = index => {\n    const boldIndex = multichannelContext.boldIndex ?? false\n    return boldIndex ? `*${index}*` : index\n  }\n\n  const getText = () => {\n    let text = props.children\n    const newline = props.newline || ''\n    const separator = multichannelContext.indexSeparator || ' '\n    const index = multichannelContext.currentIndex\n      ? `${formatIndex(multichannelContext.currentIndex + separator)} `\n      : ''\n    if (hasPostback()) {\n      text = `${newline}${index}${text}`\n    } else if (hasUrl()) {\n      text = `${newline}- ${text}`\n    }\n    return text\n  }\n\n  if (isWhatsapp(requestContext.session)) {\n    const asText = props.asText ?? true\n    if (asText) {\n      if (hasUrl()) {\n        return `${getText()}: ${getUrl()}`\n      } else if (hasPath() || hasPayload()) {\n        const text = getText()\n        increaseCurrentIndex()\n        return `${text}`\n      } else if (hasWebview()) {\n        return <Button {...props}>{getText()}</Button>\n      }\n    }\n    return (\n      <Button {...props}>\n        {truncateText(props.children, WHATSAPP_MAX_BUTTON_CHARS)}\n      </Button>\n    )\n  }\n  return <Button {...props}>{props.children}</Button>\n}\n\nMultichannelButton.displayName = COMPONENT_DISPLAY_NAMES.MultichannelButton\n"],"names":["isWhatsapp","useContext","RequestContext","truncateText","Button","COMPONENT_DISPLAY_NAMES","MultichannelContext","WHATSAPP_MAX_BUTTON_CHARS","MultichannelButton","props","requestContext","multichannelContext","hasUrl","Boolean","hasPath","hasPayload","hasPostback","hasWebview","getUrl","_getWebview","increaseCurrentIndex","lastChar","String","formatIndex","index","boldIndex","getText","text","newline","separator","asText"],"mappings":";;;;;;;;;;;;;;;;;;;;AAA0C;AACR;AAEa;AACN;AACD;AACc;AACM;AACI;AAEzD,MAAMQ,kBAAkBA,GAAGC,CAAAA;IAChC,MAAMC,iBAAiBT,UAAUA,CAACC,cAAcA;IAChD,MAAMS,sBAAsBV,UAAUA,CAACK,mBAAmBA;IAE1D,MAAMM,SAAS,IAAMC,QAAQJ,MAAM,GAAG;IAEtC,MAAMK,UAAU,IAAMD,QAAQJ,MAAM,IAAI;IAExC,MAAMM,aAAa,IAAMF,QAAQJ,MAAM,OAAO;IAE9C,MAAMO,cAAc,IAAMF,aAAaC;IAEvC,MAAME,aAAa,IAAMJ,QAAQJ,MAAM,OAAO;IAE9C,MAAMS,SAAS,IAAMT,MAAM,GAAG;IAC9B,MAAMU,cAAc,IAAMV,MAAM,OAAO;IAEvC,MAAMW,uBAAuB;QAC3B,IAAI,OAAOT,oBAAoB,YAAY,KAAK,UAAU;YACxDA,oBAAoB,YAAY,IAAI;QACtC,OAAO,IAAI,OAAOA,oBAAoB,YAAY,KAAK,UAAU;YAC/D,MAAMU,WAAWV,oBAAoB,YAAY,CAAC,UAAU,CAC1DA,oBAAoB,YAAY,CAAC,MAAM,GAAG;YAE5CA,oBAAoB,YAAY,GAAGW,OAAO,YAAY,CAACD,WAAW;QACpE;IACF;IAEA,MAAME,cAAcC,CAAAA;QAClB,MAAMC,YAAYd,oBAAoB,SAAS,IAAI;QACnD,OAAOc,YAAY,CAAC,CAAC,EAAED,MAAM,CAAC,CAAC,GAAGA;IACpC;IAEA,MAAME,UAAU;QACd,IAAIC,OAAOlB,MAAM,QAAQ;QACzB,MAAMmB,UAAUnB,MAAM,OAAO,IAAI;QACjC,MAAMoB,YAAYlB,oBAAoB,cAAc,IAAI;QACxD,MAAMa,QAAQb,oBAAoB,YAAY,GAC1C,GAAGY,YAAYZ,oBAAoB,YAAY,GAAGkB,WAAW,CAAC,CAAC,GAC/D;QACJ,IAAIb,eAAe;YACjBW,OAAO,GAAGC,UAAUJ,QAAQG,MAAM;QACpC,OAAO,IAAIf,UAAU;YACnBe,OAAO,GAAGC,QAAQ,EAAE,EAAED,MAAM;QAC9B;QACA,OAAOA;IACT;IAEA,IAAI3B,UAAUA,CAACU,eAAe,OAAO,GAAG;QACtC,MAAMoB,SAASrB,MAAM,MAAM,IAAI;QAC/B,IAAIqB,QAAQ;YACV,IAAIlB,UAAU;gBACZ,OAAO,GAAGc,UAAU,EAAE,EAAER,UAAU;YACpC,OAAO,IAAIJ,aAAaC,cAAc;gBACpC,MAAMY,OAAOD;gBACbN;gBACA,OAAO,GAAGO,MAAM;YAClB,OAAO,IAAIV,cAAc;gBACvB,qBAAO,IAACb,MAAMA;oBAAE,GAAGK,KAAK;8BAAGiB;;YAC7B;QACF;QACA,qBACE,IAACtB,MAAMA;YAAE,GAAGK,KAAK;sBACdN,YAAYA,CAACM,MAAM,QAAQ,EAAEF,yBAAyBA;;IAG7D;IACA,qBAAO,IAACH,MAAMA;QAAE,GAAGK,KAAK;kBAAGA,MAAM,QAAQ;;AAC3C,EAAC;AAEDD,kBAAkBA,CAAC,WAAW,GAAGH,0CAA0C"}

package/lib/components/multichannel/multichannel-carousel.d.ts

@@ -0,0 +1 @@
+export function MultichannelCarousel(props: any): import("react").JSX.Element;

package/lib/components/multichannel/multichannel-carousel.js

@@ -0,0 +1,123 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isDev, isFacebook, isInstagram, isWebchat, isWhatsapp } from "@botonic/core";
+import { useContext } from "react";
+import { RequestContext } from "../../contexts.js";
+import { Button } from "../button/index.js";
+import { Carousel } from "../carousel.js";
+import { Image } from "../image.js";
+import { Text } from "../text.js";
+import { WhatsappCTAUrlButton } from "../whatsapp-cta-url-button.js";
+import { getFilteredElements, isMultichannelButton, isNodePic, isNodeSubtitle, isNodeTitle } from "./multichannel-utils.js";
+import { convertToMarkdownMeta } from "./whatsapp/markdown-meta.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const MultichannelCarousel = (props)=>{
+    const requestContext = useContext(RequestContext);
+    if (isDev(requestContext.session) || isWebchat(requestContext.session)) {
+        return /*#__PURE__*/ jsx(Carousel, {
+            ...props,
+            children: props.children
+        });
+    }
+    const messages = [];
+    const childrenElements = props.children.map((e)=>e.props.children);
+    childrenElements.forEach((element, i)=>{
+        const { imageProps, title, subtitle, buttons } = parseCarouselElement(element);
+        const textMessage = getTextMessage(requestContext.session, title, subtitle);
+        if (imageProps?.src) {
+            const messageWithImage = /*#__PURE__*/ jsx(Image, {
+                src: imageProps.src
+            });
+            messages.push(messageWithImage);
+        }
+        if (isWhatsapp(requestContext.session) && buttons.some((button)=>button.url)) {
+            const messageWithButtonUrl = /*#__PURE__*/ jsx(WhatsappCTAUrlButton, {
+                body: title,
+                footer: `_${subtitle}_`,
+                displayText: buttons[0].text,
+                url: buttons[0].url
+            }, `carousel-element-${i}-cta-url`);
+            messages.push(messageWithButtonUrl);
+        }
+        const messageWithButtons = buttons.some((button)=>button.payload) ? /*#__PURE__*/ jsxs(Text, {
+            children: [
+                textMessage,
+                buttons.filter((button)=>isWhatsapp(requestContext.session) && !button.url).map((button)=>/*#__PURE__*/ jsx(Button, {
+                        payload: button.payload,
+                        url: button.url,
+                        children: button.text
+                    }, `carousel-element-${i}-button`))
+            ]
+        }, `carousel-element-${i}-text`) : [];
+        messages.push(messageWithButtons);
+    });
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: messages
+    });
+};
+function getButtons(node) {
+    return [].concat(getFilteredElements(node, isMultichannelButton));
+}
+function parseCarouselElement(element) {
+    let imageProps, title, subtitle;
+    const buttonsChildren = [];
+    for (const node of element){
+        if (isNodePic(node)) {
+            imageProps = node.props;
+        }
+        if (isNodeTitle(node)) {
+            title = node.props.children;
+        }
+        if (isNodeSubtitle(node)) {
+            subtitle = node.props.children;
+        }
+        if (isMultichannelButton(node)) {
+            buttonsChildren.push(node);
+        }
+        if (Array.isArray(node)) {
+            buttonsChildren.push(...getButtons(node));
+        }
+    }
+    const buttons = buttonsChildren.map((button)=>{
+        return {
+            text: button.props.children,
+            payload: button.props.payload,
+            url: button.props.url
+        };
+    });
+    return {
+        imageProps,
+        title,
+        subtitle,
+        buttons
+    };
+}
+function getTextMessage(session, title, subtitle) {
+    const formattedTextMessage = `**${title}**${subtitle ? ` _${subtitle}_` : ''}`;
+    return isWhatsapp(session) || isFacebook(session) || isInstagram(session) ? convertToMarkdownMeta(formattedTextMessage) : formattedTextMessage;
+}
+
+export { MultichannelCarousel };
+
+//# sourceMappingURL=multichannel-carousel.js.map

package/lib/components/multichannel/multichannel-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/multichannel/multichannel-carousel.js","sources":["../../../src/components/multichannel/multichannel-carousel.jsx"],"sourcesContent":["import {\n  isDev,\n  isFacebook,\n  isInstagram,\n  isWebchat,\n  isWhatsapp,\n} from '@botonic/core'\nimport { useContext } from 'react'\n\nimport { RequestContext } from '../../contexts'\nimport { Button } from '../button/index'\nimport { Carousel } from '../carousel'\nimport { Image } from '../image'\nimport { Text } from '../text'\nimport { WhatsappCTAUrlButton } from '../whatsapp-cta-url-button'\nimport {\n  getFilteredElements,\n  isMultichannelButton,\n  isNodePic,\n  isNodeSubtitle,\n  isNodeTitle,\n} from './multichannel-utils'\nimport { convertToMarkdownMeta } from './whatsapp/markdown-meta'\n\nexport const MultichannelCarousel = props => {\n  const requestContext = useContext(RequestContext)\n\n  if (isDev(requestContext.session) || isWebchat(requestContext.session)) {\n    return <Carousel {...props}>{props.children}</Carousel>\n  }\n\n  const messages = []\n  const childrenElements = props.children.map(e => e.props.children)\n\n  childrenElements.forEach((element, i) => {\n    const { imageProps, title, subtitle, buttons } =\n      parseCarouselElement(element)\n\n    const textMessage = getTextMessage(requestContext.session, title, subtitle)\n\n    if (imageProps?.src) {\n      const messageWithImage = <Image src={imageProps.src} />\n      messages.push(messageWithImage)\n    }\n\n    if (\n      isWhatsapp(requestContext.session) &&\n      buttons.some(button => button.url)\n    ) {\n      const messageWithButtonUrl = (\n        <WhatsappCTAUrlButton\n          key={`carousel-element-${i}-cta-url`}\n          body={title}\n          footer={`_${subtitle}_`}\n          displayText={buttons[0].text}\n          url={buttons[0].url}\n        />\n      )\n      messages.push(messageWithButtonUrl)\n    }\n\n    const messageWithButtons = buttons.some(button => button.payload) ? (\n      <Text key={`carousel-element-${i}-text`}>\n        {textMessage}\n        {buttons\n          .filter(button => isWhatsapp(requestContext.session) && !button.url)\n          .map(button => (\n            <Button\n              key={`carousel-element-${i}-button`}\n              payload={button.payload}\n              url={button.url}\n            >\n              {button.text}\n            </Button>\n          ))}\n      </Text>\n    ) : (\n      []\n    )\n    messages.push(messageWithButtons)\n  })\n\n  return <>{messages}</>\n}\n\nfunction getButtons(node) {\n  return [].concat(getFilteredElements(node, isMultichannelButton))\n}\n\nfunction parseCarouselElement(element) {\n  let imageProps, title, subtitle\n  const buttonsChildren = []\n\n  for (const node of element) {\n    if (isNodePic(node)) {\n      imageProps = node.props\n    }\n    if (isNodeTitle(node)) {\n      title = node.props.children\n    }\n    if (isNodeSubtitle(node)) {\n      subtitle = node.props.children\n    }\n    if (isMultichannelButton(node)) {\n      buttonsChildren.push(node)\n    }\n    if (Array.isArray(node)) {\n      buttonsChildren.push(...getButtons(node))\n    }\n  }\n\n  const buttons = buttonsChildren.map(button => {\n    return {\n      text: button.props.children,\n      payload: button.props.payload,\n      url: button.props.url,\n    }\n  })\n\n  return { imageProps, title, subtitle, buttons }\n}\n\nfunction getTextMessage(session, title, subtitle) {\n  const formattedTextMessage = `**${title}**${subtitle ? ` _${subtitle}_` : ''}`\n  return isWhatsapp(session) || isFacebook(session) || isInstagram(session)\n    ? convertToMarkdownMeta(formattedTextMessage)\n    : formattedTextMessage\n}\n"],"names":["isDev","isFacebook","isInstagram","isWebchat","isWhatsapp","useContext","RequestContext","Button","Carousel","Image","Text","WhatsappCTAUrlButton","getFilteredElements","isMultichannelButton","isNodePic","isNodeSubtitle","isNodeTitle","convertToMarkdownMeta","MultichannelCarousel","props","requestContext","messages","childrenElements","e","element","i","imageProps","title","subtitle","buttons","parseCarouselElement","textMessage","getTextMessage","messageWithImage","button","messageWithButtonUrl","messageWithButtons","getButtons","node","buttonsChildren","Array","session","formattedTextMessage"],"mappings":"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"}

package/lib/components/multichannel/multichannel-context.js

@@ -0,0 +1,15 @@
+import react from "react";
+
+
+
+const MultichannelContext = /*#__PURE__*/ react.createContext({
+    boldIndex: true,
+    text: {
+        indexMode: 'letter'
+    },
+    indexSeparator: '.'
+});
+
+export { MultichannelContext };
+
+//# sourceMappingURL=multichannel-context.js.map

package/lib/components/multichannel/multichannel-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/multichannel/multichannel-context.js","sources":["../../../src/components/multichannel/multichannel-context.jsx"],"sourcesContent":["import React from 'react'\n\nexport const MultichannelContext = React.createContext({\n  boldIndex: true,\n  text: {\n    indexMode: 'letter',\n  },\n  indexSeparator: '.',\n})\n"],"names":["React","MultichannelContext"],"mappings":";;;AAAyB;AAElB,MAAMC,mBAAmBA,iBAAGD,mBAAmB,CAAC;IACrD,WAAW;IACX,MAAM;QACJ,WAAW;IACb;IACA,gBAAgB;AAClB,GAAE"}

package/lib/components/multichannel/multichannel-reply.d.ts

@@ -0,0 +1,4 @@
+export function MultichannelReply(props: any): string | import("react").JSX.Element | null;
+export namespace MultichannelReply {
+    let displayName: "MultichannelReply";
+}

package/lib/components/multichannel/multichannel-reply.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { isWhatsapp } from "@botonic/core";
+import { useContext } from "react";
+import { RequestContext } from "../../contexts.js";
+import { COMPONENT_DISPLAY_NAMES } from "../constants.js";
+import { Reply } from "../reply.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+const MultichannelReply = (props)=>{
+    const requestContext = useContext(RequestContext);
+    const hasPath = ()=>Boolean(props.path);
+    const hasPayload = ()=>Boolean(props.payload);
+    const getText = ()=>`${props.children}`;
+    if (isWhatsapp(requestContext.session)) {
+        if (hasPath() || hasPayload()) {
+            return `${getText()}`;
+        }
+        return null;
+    } else {
+        return /*#__PURE__*/ jsx(Reply, {
+            ...props,
+            children: props.children
+        });
+    }
+};
+MultichannelReply.displayName = COMPONENT_DISPLAY_NAMES.MultichannelReply;
+
+export { MultichannelReply };
+
+//# sourceMappingURL=multichannel-reply.js.map

package/lib/components/multichannel/multichannel-reply.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/multichannel/multichannel-reply.js","sources":["../../../src/components/multichannel/multichannel-reply.jsx"],"sourcesContent":["import { isWhatsapp } from '@botonic/core'\nimport { useContext } from 'react'\n\nimport { RequestContext } from '../../contexts'\nimport { COMPONENT_DISPLAY_NAMES } from '../constants'\nimport { Reply } from '../reply'\n\nexport const MultichannelReply = props => {\n  const requestContext = useContext(RequestContext)\n  const hasPath = () => Boolean(props.path)\n  const hasPayload = () => Boolean(props.payload)\n  const getText = () => `${props.children}`\n\n  if (isWhatsapp(requestContext.session)) {\n    if (hasPath() || hasPayload()) {\n      return `${getText()}`\n    }\n    return null\n  } else {\n    return <Reply {...props}>{props.children}</Reply>\n  }\n}\n\nMultichannelReply.displayName = COMPONENT_DISPLAY_NAMES.MultichannelReply\n"],"names":["isWhatsapp","useContext","RequestContext","COMPONENT_DISPLAY_NAMES","Reply","MultichannelReply","props","requestContext","hasPath","Boolean","hasPayload","getText"],"mappings":";;;;;;;;;;;;;;AAA0C;AACR;AAEa;AACO;AACtB;AAEzB,MAAMK,iBAAiBA,GAAGC,CAAAA;IAC/B,MAAMC,iBAAiBN,UAAUA,CAACC,cAAcA;IAChD,MAAMM,UAAU,IAAMC,QAAQH,MAAM,IAAI;IACxC,MAAMI,aAAa,IAAMD,QAAQH,MAAM,OAAO;IAC9C,MAAMK,UAAU,IAAM,GAAGL,MAAM,QAAQ,EAAE;IAEzC,IAAIN,UAAUA,CAACO,eAAe,OAAO,GAAG;QACtC,IAAIC,aAAaE,cAAc;YAC7B,OAAO,GAAGC,WAAW;QACvB;QACA,OAAO;IACT,OAAO;QACL,qBAAO,IAACP,KAAKA;YAAE,GAAGE,KAAK;sBAAGA,MAAM,QAAQ;;IAC1C;AACF,EAAC;AAEDD,iBAAiBA,CAAC,WAAW,GAAGF,yCAAyC"}

package/lib/components/multichannel/multichannel-text.d.ts

@@ -0,0 +1,2 @@
+export function MultichannelText(props: any): never[] | React.JSX.Element;
+import React from 'react';