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

package/lib/esm/components/markdown.js

@@ -1,96 +1,88 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMarkdownStyle = exports.getDefaultMarkdownStyle = exports.toMarkdownChildren = exports.serializeMarkdown = exports.renderLinks = exports.renderMarkdown = exports.ESCAPED_LINE_BREAK = void 0;
-const tslib_1 = require("tslib");
-const markdown_it_1 = tslib_1.__importDefault(require("markdown-it"));
-const environment_1 = require("../util/environment");
+import markdown_it from "markdown-it";
+import { isInWebviewApp } from "../util/environment.js";
+
+
+
+
+
 const BR_STRING_TAG = '<br/>';
 const BR_STRING_TAG_REGEX = /<br\s*\/?>/g;
-exports.ESCAPED_LINE_BREAK = '&lt;br&gt;';
-const ESCAPED_LINE_BREAK_REGEX = new RegExp(exports.ESCAPED_LINE_BREAK, 'g');
-const isLineBreakElement = element => element.type === 'br';
-const withLinksTarget = (renderer, target = '_blank') => {
+const ESCAPED_LINE_BREAK = '&lt;br&gt;';
+const ESCAPED_LINE_BREAK_REGEX = new RegExp(ESCAPED_LINE_BREAK, 'g');
+const isLineBreakElement = (element)=>element.type === 'br';
+const withLinksTarget = (renderer, target = '_blank')=>{
     // Support opening links in new tabs: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
-    const newRenderer = renderer.renderer.rules.link_open ||
-        ((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
-    renderer.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+    const newRenderer = renderer.renderer.rules.link_open || ((tokens, idx, options, _env, self)=>self.renderToken(tokens, idx, options));
+    renderer.renderer.rules.link_open = (tokens, idx, options, env, self)=>{
         const aIndex = tokens[idx].attrIndex('target');
         if (aIndex < 0) {
-            tokens[idx].attrPush(['target', target]);
-        }
-        else {
+            tokens[idx].attrPush([
+                'target',
+                target
+            ]);
+        } else {
             tokens[idx].attrs[aIndex][1] = target;
         }
         return newRenderer(tokens, idx, options, env, self);
     };
 };
-const configureLinksRenderer = () => {
+const configureLinksRenderer = ()=>{
     // zero preset comes with all options disabled, only enabling links
-    const linksRenderer = new markdown_it_1.default('zero', { linkify: true }).enable([
-        'linkify',
+    const linksRenderer = new markdown_it('zero', {
+        linkify: true
+    }).enable([
+        'linkify'
     ]);
     withLinksTarget(linksRenderer);
     return linksRenderer;
 };
-const configureMarkdownRenderer = target => {
-    const markdownRenderer = new markdown_it_1.default({
+const configureMarkdownRenderer = (target)=>{
+    const markdownRenderer = new markdown_it({
         html: true,
         linkify: true,
-        typographer: true,
+        typographer: true
     });
     withLinksTarget(markdownRenderer, target);
     return markdownRenderer;
 };
-const renderMarkdown = text => {
-    const target = (0, environment_1.isInWebviewApp)() ? '_self' : '_blank';
+const renderMarkdown = (text)=>{
+    const target = isInWebviewApp() ? '_self' : '_blank';
     const markdownRenderer = configureMarkdownRenderer(target);
     // markdown-it renderer expects '<br/>' strings to render correctly line breaks
     // Supporting multiline: https://stackoverflow.com/a/20543835
-    text = text
-        .map(e => {
+    text = text.map((e)=>{
         if (isLineBreakElement(e)) {
             return BR_STRING_TAG;
-        }
-        else if (typeof e === 'string') {
-            return e
-                .replace(BR_STRING_TAG_REGEX, BR_STRING_TAG)
-                .replace(ESCAPED_LINE_BREAK_REGEX, BR_STRING_TAG);
-        }
-        else {
+        } else if (typeof e === 'string') {
+            return e.replace(BR_STRING_TAG_REGEX, BR_STRING_TAG).replace(ESCAPED_LINE_BREAK_REGEX, BR_STRING_TAG);
+        } else {
             return String(e);
         }
-    })
-        .join('');
+    }).join('');
     return markdownRenderer.render(text);
 };
-exports.renderMarkdown = renderMarkdown;
-const linksRenderer = configureLinksRenderer();
-const renderLinks = text => {
-    return linksRenderer.render(text);
+const markdown_linksRenderer = configureLinksRenderer();
+const renderLinks = (text)=>{
+    return markdown_linksRenderer.render(text);
 };
-exports.renderLinks = renderLinks;
-const serializeMarkdown = children => {
-    children = Array.isArray(children) ? children : [children];
-    const text = children
-        .filter(e => isLineBreakElement(e) || !e.type)
-        .map(e => {
+const serializeMarkdown = (children)=>{
+    children = Array.isArray(children) ? children : [
+        children
+    ];
+    const text = children.filter((e)=>isLineBreakElement(e) || !e.type).map((e)=>{
         if (Array.isArray(e)) {
-            return (0, exports.serializeMarkdown)(e);
+            return serializeMarkdown(e);
         }
         if (isLineBreakElement(e)) {
-            return exports.ESCAPED_LINE_BREAK;
-        }
-        else {
-            return String(e).replace(BR_STRING_TAG_REGEX, exports.ESCAPED_LINE_BREAK);
+            return ESCAPED_LINE_BREAK;
+        } else {
+            return String(e).replace(BR_STRING_TAG_REGEX, ESCAPED_LINE_BREAK);
         }
-    })
-        .join('');
+    }).join('');
     return text;
 };
-exports.serializeMarkdown = serializeMarkdown;
-const toMarkdownChildren = children => children.map(e => (isLineBreakElement(e) ? exports.ESCAPED_LINE_BREAK : e));
-exports.toMarkdownChildren = toMarkdownChildren;
-const getDefaultMarkdownStyle = color => `
+const toMarkdownChildren = (children)=>children.map((e)=>isLineBreakElement(e) ? ESCAPED_LINE_BREAK : e);
+const getDefaultMarkdownStyle = (color)=>`
 *{
   margin: 0px;
 }
@@ -164,9 +156,10 @@ table, td, th {
   padding:10px;
 }
 `;
-exports.getDefaultMarkdownStyle = getDefaultMarkdownStyle;
-const getMarkdownStyle = (getThemeFn, defaultColor) => {
-    return getThemeFn('markdownStyle', (0, exports.getDefaultMarkdownStyle)(defaultColor));
+const getMarkdownStyle = (getThemeFn, defaultColor)=>{
+    return getThemeFn('markdownStyle', getDefaultMarkdownStyle(defaultColor));
 };
-exports.getMarkdownStyle = getMarkdownStyle;
+
+export { ESCAPED_LINE_BREAK, getDefaultMarkdownStyle, getMarkdownStyle, renderLinks, renderMarkdown, serializeMarkdown, toMarkdownChildren };
+
 //# sourceMappingURL=markdown.js.map

package/lib/esm/components/markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/components/markdown.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"components/markdown.js","sources":["../../../src/components/markdown.js"],"sourcesContent":["import MarkdownIt from 'markdown-it'\n\nimport { isInWebviewApp } from '../util/environment'\n\nconst BR_STRING_TAG = '<br/>'\nconst BR_STRING_TAG_REGEX = /<br\\s*\\/?>/g\nexport const ESCAPED_LINE_BREAK = '&lt;br&gt;'\nconst ESCAPED_LINE_BREAK_REGEX = new RegExp(ESCAPED_LINE_BREAK, 'g')\nconst isLineBreakElement = element => element.type === 'br'\n\nconst withLinksTarget = (renderer, target = '_blank') => {\n  // Support opening links in new tabs: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer\n  const newRenderer =\n    renderer.renderer.rules.link_open ||\n    ((tokens, idx, options, _env, self) =>\n      self.renderToken(tokens, idx, options))\n  renderer.renderer.rules.link_open = (tokens, idx, options, env, self) => {\n    const aIndex = tokens[idx].attrIndex('target')\n    if (aIndex < 0) {\n      tokens[idx].attrPush(['target', target])\n    } else {\n      tokens[idx].attrs[aIndex][1] = target\n    }\n    return newRenderer(tokens, idx, options, env, self)\n  }\n}\n\nconst configureLinksRenderer = () => {\n  // zero preset comes with all options disabled, only enabling links\n  const linksRenderer = new MarkdownIt('zero', { linkify: true }).enable([\n    'linkify',\n  ])\n  withLinksTarget(linksRenderer)\n  return linksRenderer\n}\n\nconst configureMarkdownRenderer = target => {\n  const markdownRenderer = new MarkdownIt({\n    html: true,\n    linkify: true,\n    typographer: true,\n  })\n  withLinksTarget(markdownRenderer, target)\n  return markdownRenderer\n}\n\nexport const renderMarkdown = text => {\n  const target = isInWebviewApp() ? '_self' : '_blank'\n  const markdownRenderer = configureMarkdownRenderer(target)\n  // markdown-it renderer expects '<br/>' strings to render correctly line breaks\n  // Supporting multiline: https://stackoverflow.com/a/20543835\n  text = text\n    .map(e => {\n      if (isLineBreakElement(e)) {\n        return BR_STRING_TAG\n      } else if (typeof e === 'string') {\n        return e\n          .replace(BR_STRING_TAG_REGEX, BR_STRING_TAG)\n          .replace(ESCAPED_LINE_BREAK_REGEX, BR_STRING_TAG)\n      } else {\n        return String(e)\n      }\n    })\n    .join('')\n  return markdownRenderer.render(text)\n}\n\nconst linksRenderer = configureLinksRenderer()\nexport const renderLinks = text => {\n  return linksRenderer.render(text)\n}\n\nexport const serializeMarkdown = children => {\n  children = Array.isArray(children) ? children : [children]\n  const text = children\n    .filter(e => isLineBreakElement(e) || !e.type)\n    .map(e => {\n      if (Array.isArray(e)) {\n        return serializeMarkdown(e)\n      }\n      if (isLineBreakElement(e)) {\n        return ESCAPED_LINE_BREAK\n      } else {\n        return String(e).replace(BR_STRING_TAG_REGEX, ESCAPED_LINE_BREAK)\n      }\n    })\n    .join('')\n  return text\n}\n\nexport const toMarkdownChildren = children =>\n  children.map(e => (isLineBreakElement(e) ? ESCAPED_LINE_BREAK : e))\n\nexport const getDefaultMarkdownStyle = color => `\n*{\n  margin: 0px;\n}\n\na {\n  text-decoration:none;\n}\n\na:link{\n  color:${color}; \n}\n\na:visited {\n  color:${color};\n}\n\na:hover {\n  text-shadow: 0px 1px black;\n}\n\nblockquote {\n  margin: 0;\n  padding-left: 1.4rem;\n  border-left: 4px solid #dadada; \n}\n\npre code {\n  margin: 0;\n  padding: 0;\n  white-space: pre;\n  border: none;\n  background: transparent; \n}\n\npre {\n  background-color: #f8f8f8;\n  border: 1px solid #cccccc;\n  font-size: 13px;\n  line-height: 19px;\n  overflow: auto;\n  padding: 6px 10px;\n  border-radius: 3px; \n}\n\ncode, tt {\n  margin: 0 2px;\n  padding: 0 5px;\n  white-space: nowrap;\n  border: 1px solid #eaeaea;\n  background-color: #f8f8f8;\n  border-radius: 3px; \n}\n\npre {\n  background-color: #f8f8f8;\n  border: 1px solid #cccccc;\n  font-size: 13px;\n  line-height: 19px;\n  overflow: auto;\n  padding: 6px 10px;\n  border-radius: 3px; \n}\n\npre code, pre tt {\n  background-color: transparent;\n  border: none; \n}\n  \ntable, td, th {\n  border: 1px solid black;\n  padding:10px;\n}\n`\nexport const getMarkdownStyle = (getThemeFn, defaultColor) => {\n  return getThemeFn('markdownStyle', getDefaultMarkdownStyle(defaultColor))\n}\n"],"names":["MarkdownIt","isInWebviewApp","BR_STRING_TAG","BR_STRING_TAG_REGEX","ESCAPED_LINE_BREAK","ESCAPED_LINE_BREAK_REGEX","RegExp","isLineBreakElement","element","withLinksTarget","renderer","target","newRenderer","tokens","idx","options","_env","self","env","aIndex","configureLinksRenderer","linksRenderer","configureMarkdownRenderer","markdownRenderer","renderMarkdown","text","e","String","renderLinks","serializeMarkdown","children","Array","toMarkdownChildren","getDefaultMarkdownStyle","color","getMarkdownStyle","getThemeFn","defaultColor"],"mappings":"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"}

package/lib/esm/components/message/index.js

@@ -1,51 +1,89 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Message = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@botonic/core");
-const react_1 = tslib_1.__importStar(require("react"));
-const uuid_1 = require("uuid");
-const constants_1 = require("../../constants");
-const contexts_1 = require("../../contexts");
-const index_types_1 = require("../../index-types");
-const styles_1 = require("../../shared/styles");
-const environment_1 = require("../../util/environment");
-const react_2 = require("../../util/react");
-const context_1 = require("../../webchat/context");
-const index_1 = require("../button/index");
-const buttons_disabler_1 = require("../buttons-disabler");
-const markdown_1 = require("../markdown");
-const reply_1 = require("../reply");
-const message_footer_1 = require("./message-footer");
-const message_image_1 = require("./message-image");
-const styles_2 = require("./styles");
-const timestamps_1 = require("./timestamps");
-const Message = props => {
-    const { defaultTyping, defaultDelay } = (0, react_1.useContext)(contexts_1.RequestContext);
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { INPUT, isBrowser } from "@botonic/core";
+import react, { useContext, useEffect, useState } from "react";
+import { v7 } from "uuid";
+import { COLORS, WEBCHAT } from "../../constants.js";
+import { RequestContext } from "../../contexts.js";
+import { SENDERS } from "../../index-types.js";
+import { Fade } from "../../shared/styles.js";
+import { isDev } from "../../util/environment.js";
+import { ConditionalWrapper, renderComponent } from "../../util/react.js";
+import { WebchatContext } from "../../webchat/context/index.js";
+import { Button } from "../button/index.js";
+import { ButtonsDisabler } from "../buttons-disabler.js";
+import { getMarkdownStyle, renderLinks, renderMarkdown } from "../markdown.js";
+import { Reply } from "../reply.js";
+import { MessageFooter } from "./message-footer.js";
+import { MessageImage } from "./message-image.js";
+import { BlobContainer, BlobText, BlobTick, BlobTickContainer, MessageContainer } from "./styles.js";
+import { resolveMessageTimestamps } from "./timestamps.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const Message = (props)=>{
+    const { defaultTyping, defaultDelay } = useContext(RequestContext);
     let { type = '', blob = true, sentBy, delay = defaultDelay, typing = defaultTyping, children, enabletimestamps = props.enabletimestamps || props.enableTimestamps, json, style, imagestyle = props.imagestyle || props.imageStyle, isUnread = true, botInteractionId, markdown, ...otherProps } = props;
-    const isSentByUser = sentBy === index_types_1.SENDERS.user;
-    const isSentByBot = sentBy === index_types_1.SENDERS.bot;
-    const isSentBySystem = sentBy === index_types_1.SENDERS.system;
-    const { webchatState, addMessage, updateReplies, getThemeProperty } = (0, react_1.useContext)(context_1.WebchatContext);
-    const [state] = (0, react_1.useState)({
-        id: props.id || (0, uuid_1.v7)(),
+    const isSentByUser = sentBy === SENDERS.user;
+    const isSentByBot = sentBy === SENDERS.bot;
+    const isSentBySystem = sentBy === SENDERS.system;
+    const { webchatState, addMessage, updateReplies, getThemeProperty } = useContext(WebchatContext);
+    const [state] = useState({
+        id: props.id || v7()
     });
-    const [disabled, setDisabled] = (0, react_1.useState)(false);
-    children = buttons_disabler_1.ButtonsDisabler.updateChildrenButtons(children, {
+    const [disabled, setDisabled] = useState(false);
+    children = ButtonsDisabler.updateChildrenButtons(children, {
         parentId: state.id,
         disabled,
-        setDisabled,
+        setDisabled
     });
-    const replies = react_1.default.Children.toArray(children).filter(e => e.type === reply_1.Reply);
-    const buttons = react_1.default.Children.toArray(children).filter(e => e.type === index_1.Button);
-    let textChildren = react_1.default.Children.toArray(children).filter(e => ![index_1.Button, reply_1.Reply].includes(e.type));
+    const replies = react.Children.toArray(children).filter((e)=>e.type === Reply);
+    const buttons = react.Children.toArray(children).filter((e)=>e.type === Button);
+    let textChildren = react.Children.toArray(children).filter((e)=>![
+            Button,
+            Reply
+        ].includes(e.type));
     if (isSentByUser) {
-        textChildren = textChildren.map(e => typeof e === 'string' ? (0, markdown_1.renderLinks)(e) : e);
+        textChildren = textChildren.map((e)=>typeof e === 'string' ? renderLinks(e) : e);
     }
-    const { timestampsEnabled, getFormattedTimestamp } = (0, timestamps_1.resolveMessageTimestamps)(getThemeProperty, enabletimestamps);
-    const getEnvAck = () => {
-        if (environment_1.isDev) {
+    const { timestampsEnabled, getFormattedTimestamp } = resolveMessageTimestamps(getThemeProperty, enabletimestamps);
+    const getEnvAck = ()=>{
+        if (isDev) {
             return 1;
         }
         if (!isSentByUser) {
@@ -57,8 +95,8 @@ const Message = props => {
         return 0;
     };
     const ack = getEnvAck();
-    (0, react_1.useEffect)(() => {
-        if ((0, core_1.isBrowser)()) {
+    useEffect(()=>{
+        if (isBrowser()) {
             const decomposedChildren = json;
             const message = {
                 id: state.id,
@@ -67,74 +105,71 @@ const Message = props => {
                 timestamp: props.timestamp || getFormattedTimestamp,
                 markdown,
                 sentBy,
-                buttons: buttons.map(b => ({
-                    parentId: b.props.parentId,
-                    payload: b.props.payload,
-                    path: b.props.path,
-                    url: b.props.url,
-                    target: b.props.target,
-                    webview: b.props.webview && String(b.props.webview),
-                    title: b.props.children,
-                    ...buttons_disabler_1.ButtonsDisabler.withDisabledProps(b.props),
-                })),
+                buttons: buttons.map((b)=>({
+                        parentId: b.props.parentId,
+                        payload: b.props.payload,
+                        path: b.props.path,
+                        url: b.props.url,
+                        target: b.props.target,
+                        webview: b.props.webview && String(b.props.webview),
+                        title: b.props.children,
+                        ...ButtonsDisabler.withDisabledProps(b.props)
+                    })),
                 delay,
                 typing,
-                replies: replies.map(r => ({
-                    payload: r.props.payload,
-                    path: r.props.path,
-                    url: r.props.url,
-                    text: r.props.children,
-                })),
+                replies: replies.map((r)=>({
+                        payload: r.props.payload,
+                        path: r.props.path,
+                        url: r.props.url,
+                        text: r.props.children
+                    })),
                 display: delay + typing === 0,
                 customTypeName: decomposedChildren.customTypeName,
                 ack: ack,
                 isUnread: isUnread === 1 || isUnread === true,
-                botInteractionId,
+                botInteractionId
             };
             addMessage(message);
         }
     }, []);
-    (0, react_1.useEffect)(() => {
-        if ((0, core_1.isBrowser)()) {
-            const msg = webchatState.messagesJSON.find(m => m.id === state.id);
-            if (msg?.display &&
-                webchatState.messagesJSON.filter(m => !m.display).length === 0) {
+    useEffect(()=>{
+        if (isBrowser()) {
+            const msg = webchatState.messagesJSON.find((m)=>m.id === state.id);
+            if (msg?.display && webchatState.messagesJSON.filter((m)=>!m.display).length === 0) {
                 updateReplies(replies);
             }
         }
-    }, [webchatState.messagesJSON]);
-    const brandColor = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.brandColor);
-    const getBgColor = () => {
+    }, [
+        webchatState.messagesJSON
+    ]);
+    const brandColor = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor);
+    const getBgColor = ()=>{
         if (!blob) {
-            return constants_1.COLORS.TRANSPARENT;
+            return COLORS.TRANSPARENT;
         }
         if (isSentByUser) {
-            return getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.userMessageBackground, brandColor);
+            return getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userMessageBackground, brandColor);
         }
-        return getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.botMessageBackground, constants_1.COLORS.SEASHELL_WHITE);
+        return getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageBackground, COLORS.SEASHELL_WHITE);
     };
-    const getMessageStyle = () => isSentByUser
-        ? getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.userMessageStyle)
-        : getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.botMessageStyle);
-    const userOrBotMessage = isSentByUser ? index_types_1.SENDERS.user : index_types_1.SENDERS.bot;
-    const hasBlobTick = () => getThemeProperty(`message.${userOrBotMessage}.blobTick`);
-    const renderBrowser = () => {
-        const messageJSON = webchatState.messagesJSON.find(m => m.id === state.id);
+    const getMessageStyle = ()=>isSentByUser ? getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userMessageStyle) : getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageStyle);
+    const userOrBotMessage = isSentByUser ? SENDERS.user : SENDERS.bot;
+    const hasBlobTick = ()=>getThemeProperty(`message.${userOrBotMessage}.blobTick`);
+    const renderBrowser = ()=>{
+        const messageJSON = webchatState.messagesJSON.find((m)=>m.id === state.id);
         if (!messageJSON || !messageJSON.display) {
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+            return /*#__PURE__*/ jsx(Fragment, {});
         }
-        if (messageJSON?.type === core_1.INPUT.SYSTEM_DEBUG_TRACE) {
+        if (messageJSON?.type === INPUT.SYSTEM_DEBUG_TRACE) {
             return children;
         }
-        const getBlobTick = pointerSize => {
+        const getBlobTick = (pointerSize)=>{
             // to add a border to the blobTick we need to create two triangles and overlap them
             // that is why the color depends on the pointerSize
             // https://developpaper.com/realization-code-of-css-drawing-triangle-border-method/
-            const color = pointerSize === 5
-                ? getBgColor()
-                : getThemeProperty(`message.${userOrBotMessage}.style.borderColor`, constants_1.COLORS.TRANSPARENT);
+            const color = pointerSize === 5 ? getBgColor() : getThemeProperty(`message.${userOrBotMessage}.style.borderColor`, COLORS.TRANSPARENT);
             const containerStyle = {
-                ...getThemeProperty(`message.${userOrBotMessage}.blobTickStyle`),
+                ...getThemeProperty(`message.${userOrBotMessage}.blobTickStyle`)
             };
             const blobTickStyle = {};
             if (isSentByUser) {
@@ -142,33 +177,101 @@ const Message = props => {
                 containerStyle.marginRight = -pointerSize;
                 blobTickStyle.borderRight = 0;
                 blobTickStyle.borderLeftColor = color;
-            }
-            else {
+            } else {
                 containerStyle.left = 0;
                 containerStyle.marginLeft = -pointerSize;
                 blobTickStyle.borderLeft = 0;
                 blobTickStyle.borderRightColor = color;
             }
-            return ((0, jsx_runtime_1.jsx)(styles_2.BlobTickContainer, { style: containerStyle, children: (0, jsx_runtime_1.jsx)(styles_2.BlobTick, { pointerSize: pointerSize, style: blobTickStyle }) }));
+            return /*#__PURE__*/ jsx(BlobTickContainer, {
+                style: containerStyle,
+                children: /*#__PURE__*/ jsx(BlobTick, {
+                    pointerSize: pointerSize,
+                    style: blobTickStyle
+                })
+            });
         };
-        const animationsEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableAnimations);
-        const resolveCustomTypeName = () => isSentByBot && type === core_1.INPUT.CUSTOM
-            ? ` ${messageJSON.customTypeName}`
-            : '';
+        const animationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableAnimations);
+        const resolveCustomTypeName = ()=>isSentByBot && type === INPUT.CUSTOM ? ` ${messageJSON.customTypeName}` : '';
         const className = `${type}-${userOrBotMessage}${resolveCustomTypeName()}`;
-        return ((0, jsx_runtime_1.jsxs)(react_2.ConditionalWrapper, { condition: animationsEnabled, wrapper: children => (0, jsx_runtime_1.jsx)(styles_1.Fade, { children: children }), children: [(0, jsx_runtime_1.jsxs)(styles_2.MessageContainer, { isSentByUser: isSentByUser, style: {
-                        ...getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.messageStyle),
-                    }, children: [(0, jsx_runtime_1.jsx)(message_image_1.MessageImage, { imagestyle: imagestyle, sentBy: sentBy }), (0, jsx_runtime_1.jsxs)(styles_2.BlobContainer, { className: className, issentbysystem: isSentBySystem, bgcolor: getBgColor(), color: isSentByUser ? constants_1.COLORS.SOLID_WHITE : constants_1.COLORS.SOLID_BLACK, blobwidth: getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.botMessageBlobWidth), blob: blob, style: {
+        return /*#__PURE__*/ jsxs(ConditionalWrapper, {
+            condition: animationsEnabled,
+            wrapper: (children)=>/*#__PURE__*/ jsx(Fade, {
+                    children: children
+                }),
+            children: [
+                /*#__PURE__*/ jsxs(MessageContainer, {
+                    isSentByUser: isSentByUser,
+                    style: {
+                        ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageStyle)
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(MessageImage, {
+                            imagestyle: imagestyle,
+                            sentBy: sentBy
+                        }),
+                        /*#__PURE__*/ jsxs(BlobContainer, {
+                            className: className,
+                            issentbysystem: isSentBySystem,
+                            bgcolor: getBgColor(),
+                            color: isSentByUser ? COLORS.SOLID_WHITE : COLORS.SOLID_BLACK,
+                            blobwidth: getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageBlobWidth),
+                            blob: blob,
+                            style: {
                                 ...getMessageStyle(),
                                 ...style,
-                                ...{ opacity: ack === 0 ? 0.6 : 1 },
-                            }, ...otherProps, children: [markdown ? ((0, jsx_runtime_1.jsx)(styles_2.BlobText, { blob: blob, dangerouslySetInnerHTML: {
-                                        __html: (0, markdown_1.renderMarkdown)(textChildren),
-                                    }, markdownstyle: (0, markdown_1.getMarkdownStyle)(getThemeProperty, isSentByUser ? constants_1.COLORS.SEASHELL_WHITE : brandColor) })) : ((0, jsx_runtime_1.jsx)(styles_2.BlobText, { blob: blob, children: textChildren })), !!buttons.length && ((0, jsx_runtime_1.jsx)("div", { className: 'message-buttons-container', children: buttons })), Boolean(blob) && hasBlobTick() && getBlobTick(6), Boolean(blob) && hasBlobTick() && getBlobTick(5)] })] }), timestampsEnabled ? ((0, jsx_runtime_1.jsx)(message_footer_1.MessageFooter, { enabletimestamps: timestampsEnabled, messageJSON: messageJSON, sentBy: sentBy })) : null] }));
+                                ...{
+                                    opacity: ack === 0 ? 0.6 : 1
+                                }
+                            },
+                            ...otherProps,
+                            children: [
+                                markdown ? /*#__PURE__*/ jsx(BlobText, {
+                                    blob: blob,
+                                    dangerouslySetInnerHTML: {
+                                        __html: renderMarkdown(textChildren)
+                                    },
+                                    markdownstyle: getMarkdownStyle(getThemeProperty, isSentByUser ? COLORS.SEASHELL_WHITE : brandColor)
+                                }) : /*#__PURE__*/ jsx(BlobText, {
+                                    blob: blob,
+                                    children: textChildren
+                                }),
+                                !!buttons.length && /*#__PURE__*/ jsx("div", {
+                                    className: "message-buttons-container",
+                                    children: buttons
+                                }),
+                                Boolean(blob) && hasBlobTick() && getBlobTick(6),
+                                Boolean(blob) && hasBlobTick() && getBlobTick(5)
+                            ]
+                        })
+                    ]
+                }),
+                timestampsEnabled ? /*#__PURE__*/ jsx(MessageFooter, {
+                    enabletimestamps: timestampsEnabled,
+                    messageJSON: messageJSON,
+                    sentBy: sentBy
+                }) : null
+            ]
+        });
     };
     const { blob: _blob, json: _json, ...nodeProps } = props;
-    const renderNode = () => type === core_1.INPUT.CUSTOM ? ((0, jsx_runtime_1.jsx)("message", { json: JSON.stringify(_json), typing: typing, delay: delay, ...nodeProps })) : ((0, jsx_runtime_1.jsx)("message", { typing: typing, delay: delay, ...nodeProps, children: children }));
-    return (0, react_2.renderComponent)({ renderBrowser, renderNode });
+    const renderNode = ()=>type === INPUT.CUSTOM ? /*#__PURE__*/ jsx("message", {
+            json: JSON.stringify(_json),
+            typing: typing,
+            delay: delay,
+            ...nodeProps
+        }) : /*#__PURE__*/ jsx("message", {
+            typing: typing,
+            delay: delay,
+            ...nodeProps,
+            children: children
+        });
+    return renderComponent({
+        renderBrowser,
+        renderNode
+    });
 };
-exports.Message = Message;
+
+export { Message };
+
 //# sourceMappingURL=index.js.map