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

package/lib/components/message/index.js

@@ -0,0 +1,277 @@
+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 === 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] = useState(false);
+    children = ButtonsDisabler.updateChildrenButtons(children, {
+        parentId: state.id,
+        disabled,
+        setDisabled
+    });
+    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' ? renderLinks(e) : e);
+    }
+    const { timestampsEnabled, getFormattedTimestamp } = resolveMessageTimestamps(getThemeProperty, enabletimestamps);
+    const getEnvAck = ()=>{
+        if (isDev) {
+            return 1;
+        }
+        if (!isSentByUser) {
+            return 1;
+        }
+        if (props.ack !== undefined) {
+            return props.ack;
+        }
+        return 0;
+    };
+    const ack = getEnvAck();
+    useEffect(()=>{
+        if (isBrowser()) {
+            const decomposedChildren = json;
+            const message = {
+                id: state.id,
+                type,
+                data: decomposedChildren ? decomposedChildren : textChildren,
+                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,
+                        ...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
+                    })),
+                display: delay + typing === 0,
+                customTypeName: decomposedChildren.customTypeName,
+                ack: ack,
+                isUnread: isUnread === 1 || isUnread === true,
+                botInteractionId
+            };
+            addMessage(message);
+        }
+    }, []);
+    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(WEBCHAT.CUSTOM_PROPERTIES.brandColor);
+    const getBgColor = ()=>{
+        if (!blob) {
+            return COLORS.TRANSPARENT;
+        }
+        if (isSentByUser) {
+            return getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userMessageBackground, brandColor);
+        }
+        return getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageBackground, COLORS.SEASHELL_WHITE);
+    };
+    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 /*#__PURE__*/ jsx(Fragment, {});
+        }
+        if (messageJSON?.type === INPUT.SYSTEM_DEBUG_TRACE) {
+            return children;
+        }
+        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`, COLORS.TRANSPARENT);
+            const containerStyle = {
+                ...getThemeProperty(`message.${userOrBotMessage}.blobTickStyle`)
+            };
+            const blobTickStyle = {};
+            if (isSentByUser) {
+                containerStyle.right = 0;
+                containerStyle.marginRight = -pointerSize;
+                blobTickStyle.borderRight = 0;
+                blobTickStyle.borderLeftColor = color;
+            } else {
+                containerStyle.left = 0;
+                containerStyle.marginLeft = -pointerSize;
+                blobTickStyle.borderLeft = 0;
+                blobTickStyle.borderRightColor = color;
+            }
+            return /*#__PURE__*/ jsx(BlobTickContainer, {
+                style: containerStyle,
+                children: /*#__PURE__*/ jsx(BlobTick, {
+                    pointerSize: pointerSize,
+                    style: blobTickStyle
+                })
+            });
+        };
+        const animationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableAnimations);
+        const resolveCustomTypeName = ()=>isSentByBot && type === INPUT.CUSTOM ? ` ${messageJSON.customTypeName}` : '';
+        const className = `${type}-${userOrBotMessage}${resolveCustomTypeName()}`;
+        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 ? /*#__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 === 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
+    });
+};
+
+export { Message };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/message/index.js","sources":["../../../src/components/message/index.jsx"],"sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport React, { useContext, useEffect, useState } from 'react'\nimport { v7 as uuidv7 } from 'uuid'\n\nimport { COLORS, WEBCHAT } from '../../constants'\nimport { RequestContext } from '../../contexts'\nimport { SENDERS } from '../../index-types'\nimport { Fade } from '../../shared/styles'\nimport { isDev } from '../../util/environment'\nimport { ConditionalWrapper, renderComponent } from '../../util/react'\nimport { WebchatContext } from '../../webchat/context'\nimport { Button } from '../button/index'\nimport { ButtonsDisabler } from '../buttons-disabler'\nimport { getMarkdownStyle, renderLinks, renderMarkdown } from '../markdown'\nimport { Reply } from '../reply'\nimport { MessageFooter } from './message-footer'\nimport { MessageImage } from './message-image'\nimport {\n  BlobContainer,\n  BlobText,\n  BlobTick,\n  BlobTickContainer,\n  MessageContainer,\n} from './styles'\nimport { resolveMessageTimestamps } from './timestamps'\n\nexport const Message = props => {\n  const { defaultTyping, defaultDelay } = useContext(RequestContext)\n  let {\n    type = '',\n    blob = true,\n    sentBy,\n    delay = defaultDelay,\n    typing = defaultTyping,\n    children,\n    enabletimestamps = props.enabletimestamps || props.enableTimestamps,\n    json,\n    style,\n    imagestyle = props.imagestyle || props.imageStyle,\n    isUnread = true,\n    botInteractionId,\n    markdown,\n    ...otherProps\n  } = props\n\n  const isSentByUser = sentBy === SENDERS.user\n  const isSentByBot = sentBy === SENDERS.bot\n  const isSentBySystem = sentBy === SENDERS.system\n  const { webchatState, addMessage, updateReplies, getThemeProperty } =\n    useContext(WebchatContext)\n  const [state] = useState({\n    id: props.id || uuidv7(),\n  })\n\n  const [disabled, setDisabled] = useState(false)\n  children = ButtonsDisabler.updateChildrenButtons(children, {\n    parentId: state.id,\n    disabled,\n    setDisabled,\n  })\n  const replies = React.Children.toArray(children).filter(e => e.type === Reply)\n  const buttons = React.Children.toArray(children).filter(\n    e => e.type === Button\n  )\n\n  let textChildren = React.Children.toArray(children).filter(\n    e => ![Button, Reply].includes(e.type)\n  )\n  if (isSentByUser) {\n    textChildren = textChildren.map(e =>\n      typeof e === 'string' ? renderLinks(e) : e\n    )\n  }\n\n  const { timestampsEnabled, getFormattedTimestamp } = resolveMessageTimestamps(\n    getThemeProperty,\n    enabletimestamps\n  )\n\n  const getEnvAck = () => {\n    if (isDev) {\n      return 1\n    }\n    if (!isSentByUser) {\n      return 1\n    }\n    if (props.ack !== undefined) {\n      return props.ack\n    }\n    return 0\n  }\n\n  const ack = getEnvAck()\n\n  useEffect(() => {\n    if (isBrowser()) {\n      const decomposedChildren = json\n      const message = {\n        id: state.id,\n        type,\n        data: decomposedChildren ? decomposedChildren : textChildren,\n        timestamp: props.timestamp || getFormattedTimestamp,\n        markdown,\n        sentBy,\n        buttons: buttons.map(b => ({\n          parentId: b.props.parentId,\n          payload: b.props.payload,\n          path: b.props.path,\n          url: b.props.url,\n          target: b.props.target,\n          webview: b.props.webview && String(b.props.webview),\n          title: b.props.children,\n          ...ButtonsDisabler.withDisabledProps(b.props),\n        })),\n        delay,\n        typing,\n        replies: replies.map(r => ({\n          payload: r.props.payload,\n          path: r.props.path,\n          url: r.props.url,\n          text: r.props.children,\n        })),\n        display: delay + typing === 0,\n        customTypeName: decomposedChildren.customTypeName,\n        ack: ack,\n        isUnread: isUnread === 1 || isUnread === true,\n        botInteractionId,\n      }\n      addMessage(message)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isBrowser()) {\n      const msg = webchatState.messagesJSON.find(m => m.id === state.id)\n      if (\n        msg?.display &&\n        webchatState.messagesJSON.filter(m => !m.display).length === 0\n      ) {\n        updateReplies(replies)\n      }\n    }\n  }, [webchatState.messagesJSON])\n\n  const brandColor = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor)\n\n  const getBgColor = () => {\n    if (!blob) {\n      return COLORS.TRANSPARENT\n    }\n    if (isSentByUser) {\n      return getThemeProperty(\n        WEBCHAT.CUSTOM_PROPERTIES.userMessageBackground,\n        brandColor\n      )\n    }\n    return getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.botMessageBackground,\n      COLORS.SEASHELL_WHITE\n    )\n  }\n\n  const getMessageStyle = () =>\n    isSentByUser\n      ? getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userMessageStyle)\n      : getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageStyle)\n\n  const userOrBotMessage = isSentByUser ? SENDERS.user : SENDERS.bot\n  const hasBlobTick = () =>\n    getThemeProperty(`message.${userOrBotMessage}.blobTick`)\n\n  const renderBrowser = () => {\n    const messageJSON = webchatState.messagesJSON.find(m => m.id === state.id)\n    if (!messageJSON || !messageJSON.display) {\n      return <></>\n    }\n\n    if (messageJSON?.type === INPUT.SYSTEM_DEBUG_TRACE) {\n      return children\n    }\n\n    const getBlobTick = pointerSize => {\n      // to add a border to the blobTick we need to create two triangles and overlap them\n      // that is why the color depends on the pointerSize\n      // https://developpaper.com/realization-code-of-css-drawing-triangle-border-method/\n      const color =\n        pointerSize === 5\n          ? getBgColor()\n          : getThemeProperty(\n              `message.${userOrBotMessage}.style.borderColor`,\n              COLORS.TRANSPARENT\n            )\n      const containerStyle = {\n        ...getThemeProperty(`message.${userOrBotMessage}.blobTickStyle`),\n      }\n      const blobTickStyle = {}\n      if (isSentByUser) {\n        containerStyle.right = 0\n        containerStyle.marginRight = -pointerSize\n        blobTickStyle.borderRight = 0\n        blobTickStyle.borderLeftColor = color\n      } else {\n        containerStyle.left = 0\n        containerStyle.marginLeft = -pointerSize\n        blobTickStyle.borderLeft = 0\n        blobTickStyle.borderRightColor = color\n      }\n      return (\n        <BlobTickContainer style={containerStyle}>\n          <BlobTick pointerSize={pointerSize} style={blobTickStyle} />\n        </BlobTickContainer>\n      )\n    }\n\n    const animationsEnabled = getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.enableAnimations\n    )\n\n    const resolveCustomTypeName = () =>\n      isSentByBot && type === INPUT.CUSTOM\n        ? ` ${messageJSON.customTypeName}`\n        : ''\n\n    const className = `${type}-${userOrBotMessage}${resolveCustomTypeName()}`\n\n    return (\n      <ConditionalWrapper\n        condition={animationsEnabled}\n        wrapper={children => <Fade>{children}</Fade>}\n      >\n        <MessageContainer\n          isSentByUser={isSentByUser}\n          style={{\n            ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageStyle),\n          }}\n        >\n          <MessageImage imagestyle={imagestyle} sentBy={sentBy} />\n          <BlobContainer\n            className={className}\n            issentbysystem={isSentBySystem}\n            bgcolor={getBgColor()}\n            color={isSentByUser ? COLORS.SOLID_WHITE : COLORS.SOLID_BLACK}\n            blobwidth={getThemeProperty(\n              WEBCHAT.CUSTOM_PROPERTIES.botMessageBlobWidth\n            )}\n            blob={blob}\n            style={{\n              ...getMessageStyle(),\n              ...style,\n              ...{ opacity: ack === 0 ? 0.6 : 1 },\n            }}\n            {...otherProps}\n          >\n            {markdown ? (\n              <BlobText\n                blob={blob}\n                dangerouslySetInnerHTML={{\n                  __html: renderMarkdown(textChildren),\n                }}\n                markdownstyle={getMarkdownStyle(\n                  getThemeProperty,\n                  isSentByUser ? COLORS.SEASHELL_WHITE : brandColor\n                )}\n              />\n            ) : (\n              <BlobText blob={blob}>{textChildren}</BlobText>\n            )}\n            {!!buttons.length && (\n              <div className='message-buttons-container'>{buttons}</div>\n            )}\n            {Boolean(blob) && hasBlobTick() && getBlobTick(6)}\n            {Boolean(blob) && hasBlobTick() && getBlobTick(5)}\n          </BlobContainer>\n        </MessageContainer>\n        {timestampsEnabled ? (\n          <MessageFooter\n            enabletimestamps={timestampsEnabled}\n            messageJSON={messageJSON}\n            sentBy={sentBy}\n          />\n        ) : null}\n      </ConditionalWrapper>\n    )\n  }\n\n  const { blob: _blob, json: _json, ...nodeProps } = props\n  const renderNode = () =>\n    type === INPUT.CUSTOM ? (\n      <message\n        json={JSON.stringify(_json)}\n        typing={typing}\n        delay={delay}\n        {...nodeProps}\n      />\n    ) : (\n      <message typing={typing} delay={delay} {...nodeProps}>\n        {children}\n      </message>\n    )\n\n  return renderComponent({ renderBrowser, renderNode })\n}\n"],"names":["INPUT","isBrowser","React","useContext","useEffect","useState","v7","uuidv7","COLORS","WEBCHAT","RequestContext","SENDERS","Fade","isDev","ConditionalWrapper","renderComponent","WebchatContext","Button","ButtonsDisabler","getMarkdownStyle","renderLinks","renderMarkdown","Reply","MessageFooter","MessageImage","BlobContainer","BlobText","BlobTick","BlobTickContainer","MessageContainer","resolveMessageTimestamps","Message","props","defaultTyping","defaultDelay","type","blob","sentBy","delay","typing","children","enabletimestamps","json","style","imagestyle","isUnread","botInteractionId","markdown","otherProps","isSentByUser","isSentByBot","isSentBySystem","webchatState","addMessage","updateReplies","getThemeProperty","state","disabled","setDisabled","replies","e","buttons","textChildren","timestampsEnabled","getFormattedTimestamp","getEnvAck","undefined","ack","decomposedChildren","message","b","String","r","msg","m","brandColor","getBgColor","getMessageStyle","userOrBotMessage","hasBlobTick","renderBrowser","messageJSON","getBlobTick","pointerSize","color","containerStyle","blobTickStyle","animationsEnabled","resolveCustomTypeName","className","Boolean","_blob","_json","nodeProps","renderNode","JSON"],"mappings":"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"}

package/lib/components/message/message-footer.d.ts

@@ -0,0 +1,8 @@
+import { SENDERS } from '../../index-types.js';
+interface MessageFooterProps {
+    enabletimestamps: boolean;
+    messageJSON: any;
+    sentBy: SENDERS;
+}
+export declare const MessageFooter: ({ enabletimestamps, messageJSON, sentBy, }: MessageFooterProps) => import("react").JSX.Element;
+export {};

package/lib/components/message/message-footer.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { SENDERS } from "../../index-types.js";
+import { WebchatContext } from "../../webchat/context/index.js";
+import { MessageFooterContainer } from "./styles.js";
+import { MessageTimestamp, resolveMessageTimestamps } from "./timestamps.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+const MessageFooter = ({ enabletimestamps, messageJSON, sentBy })=>{
+    const { getThemeProperty } = useContext(WebchatContext);
+    const { timestampsEnabled, timestampStyle } = resolveMessageTimestamps(getThemeProperty, enabletimestamps);
+    const isSentByUser = sentBy === SENDERS.user;
+    const messageFooterClass = isSentByUser ? 'message-footer-user' : 'message-footer-bot';
+    return /*#__PURE__*/ jsx(MessageFooterContainer, {
+        className: messageFooterClass,
+        isSentByUser: isSentByUser,
+        children: timestampsEnabled ? /*#__PURE__*/ jsx(MessageTimestamp, {
+            sentBy: sentBy,
+            style: timestampStyle,
+            timestamp: messageJSON.timestamp
+        }) : null
+    });
+};
+
+export { MessageFooter };
+
+//# sourceMappingURL=message-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/message/message-footer.js","sources":["../../../src/components/message/message-footer.tsx"],"sourcesContent":["import { useContext } from 'react'\n\nimport { SENDERS } from '../../index-types'\nimport { WebchatContext } from '../../webchat/context'\nimport { MessageFooterContainer } from './styles'\nimport { MessageTimestamp, resolveMessageTimestamps } from './timestamps'\n\ninterface MessageFooterProps {\n  enabletimestamps: boolean\n  messageJSON: any\n  sentBy: SENDERS\n}\n\nexport const MessageFooter = ({\n  enabletimestamps,\n  messageJSON,\n  sentBy,\n}: MessageFooterProps) => {\n  const { getThemeProperty } = useContext(WebchatContext)\n\n  const { timestampsEnabled, timestampStyle } = resolveMessageTimestamps(\n    getThemeProperty,\n    enabletimestamps\n  )\n  const isSentByUser = sentBy === SENDERS.user\n  const messageFooterClass = isSentByUser\n    ? 'message-footer-user'\n    : 'message-footer-bot'\n\n  return (\n    <MessageFooterContainer\n      className={messageFooterClass}\n      isSentByUser={isSentByUser}\n    >\n      {timestampsEnabled ? (\n        <MessageTimestamp\n          sentBy={sentBy}\n          style={timestampStyle}\n          timestamp={messageJSON.timestamp}\n        />\n      ) : null}\n    </MessageFooterContainer>\n  )\n}\n"],"names":["useContext","SENDERS","WebchatContext","MessageFooterContainer","MessageTimestamp","resolveMessageTimestamps","MessageFooter","enabletimestamps","messageJSON","sentBy","getThemeProperty","timestampsEnabled","timestampStyle","isSentByUser","messageFooterClass"],"mappings":";;;;;;;;;;;;;;AAAkC;AAES;AACW;AACL;AACwB;AAQlE,MAAMM,aAAaA,GAAG,CAAC,EAC5BC,gBAAgB,EAChBC,WAAW,EACXC,MAAM,EACa;IACnB,MAAM,EAAEC,gBAAgB,EAAE,GAAGV,UAAUA,CAACE,cAAcA;IAEtD,MAAM,EAAES,iBAAiB,EAAEC,cAAc,EAAE,GAAGP,wBAAwBA,CACpEK,kBACAH;IAEF,MAAMM,eAAeJ,WAAWR,YAAY;IAC5C,MAAMa,qBAAqBD,eACvB,wBACA;IAEJ,qBACE,IAACV,sBAAsBA;QACrB,WAAWW;QACX,cAAcD;kBAEbF,kCACC,IAACP,gBAAgBA;YACf,QAAQK;YACR,OAAOG;YACP,WAAWJ,YAAY,SAAS;aAEhC;;AAGV,EAAC"}

package/lib/components/message/message-image.d.ts

@@ -0,0 +1,7 @@
+import { SENDERS } from '../../index-types.js';
+interface MessageImageProps {
+    imagestyle: Record<string, unknown>;
+    sentBy: SENDERS;
+}
+export declare const MessageImage: ({ imagestyle, sentBy }: MessageImageProps) => any;
+export {};

package/lib/components/message/message-image.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { WEBCHAT } from "../../constants.js";
+import { SENDERS } from "../../index-types.js";
+import { resolveImage } from "../../util/environment.js";
+import { WebchatContext } from "../../webchat/context/index.js";
+import { BotMessageImageContainer } from "./styles.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const MessageImage = ({ imagestyle, sentBy })=>{
+    const { getThemeProperty } = useContext(WebchatContext);
+    const isSentByAgent = sentBy === SENDERS.agent;
+    const isSentByUser = sentBy === SENDERS.user;
+    const timestampsWithImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsWithImage);
+    const BotMessageImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageImage, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandImage));
+    const AgentMessageImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.agentMessageImage, BotMessageImage);
+    return !timestampsWithImage && !isSentByUser && BotMessageImage && /*#__PURE__*/ jsx(BotMessageImageContainer, {
+        style: {
+            ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageImageStyle),
+            ...imagestyle
+        },
+        children: /*#__PURE__*/ jsx("img", {
+            style: {
+                width: '100%'
+            },
+            src: resolveImage(isSentByAgent ? AgentMessageImage : BotMessageImage)
+        })
+    });
+};
+
+export { MessageImage };
+
+//# sourceMappingURL=message-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/message/message-image.js","sources":["../../../src/components/message/message-image.tsx"],"sourcesContent":["import { useContext } from 'react'\n\nimport { WEBCHAT } from '../../constants'\nimport { SENDERS } from '../../index-types'\nimport { resolveImage } from '../../util/environment'\nimport { WebchatContext } from '../../webchat/context'\nimport { BotMessageImageContainer } from './styles'\n\ninterface MessageImageProps {\n  imagestyle: Record<string, unknown>\n  sentBy: SENDERS\n}\n\nexport const MessageImage = ({ imagestyle, sentBy }: MessageImageProps) => {\n  const { getThemeProperty } = useContext(WebchatContext)\n\n  const isSentByAgent = sentBy === SENDERS.agent\n  const isSentByUser = sentBy === SENDERS.user\n\n  const timestampsWithImage = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsWithImage\n  )\n\n  const BotMessageImage = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.botMessageImage,\n    getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandImage)\n  )\n\n  const AgentMessageImage = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.agentMessageImage,\n    BotMessageImage\n  )\n\n  return (\n    !timestampsWithImage &&\n    !isSentByUser &&\n    BotMessageImage && (\n      <BotMessageImageContainer\n        style={{\n          ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageImageStyle),\n          ...imagestyle,\n        }}\n      >\n        <img\n          style={{ width: '100%' }}\n          src={resolveImage(\n            isSentByAgent ? AgentMessageImage : BotMessageImage\n          )}\n        />\n      </BotMessageImageContainer>\n    )\n  )\n}\n"],"names":["useContext","WEBCHAT","SENDERS","resolveImage","WebchatContext","BotMessageImageContainer","MessageImage","imagestyle","sentBy","getThemeProperty","isSentByAgent","isSentByUser","timestampsWithImage","BotMessageImage","AgentMessageImage"],"mappings":";;;;;;;;;;;;;;;;AAAkC;AAEO;AACE;AACU;AACC;AACH;AAO5C,MAAMM,YAAYA,GAAG,CAAC,EAAEC,UAAU,EAAEC,MAAM,EAAqB;IACpE,MAAM,EAAEC,gBAAgB,EAAE,GAAGT,UAAUA,CAACI,cAAcA;IAEtD,MAAMM,gBAAgBF,WAAWN,aAAa;IAC9C,MAAMS,eAAeH,WAAWN,YAAY;IAE5C,MAAMU,sBAAsBH,iBAC1BR,oDAAoD;IAGtD,MAAMY,kBAAkBJ,iBACtBR,yCAAyC,EACzCQ,iBAAiBR,oCAAoC;IAGvD,MAAMa,oBAAoBL,iBACxBR,2CAA2C,EAC3CY;IAGF,OACE,CAACD,uBACD,CAACD,gBACDE,iCACE,IAACR,wBAAwBA;QACvB,OAAO;YACL,GAAGI,iBAAiBR,8CAA8C,CAAC;YACnE,GAAGM,UAAU;QACf;kBAEA,kBAAC;YACC,OAAO;gBAAE,OAAO;YAAO;YACvB,KAAKJ,YAAYA,CACfO,gBAAgBI,oBAAoBD;;;AAMhD,EAAC"}

package/lib/components/message/styles.js

@@ -0,0 +1,123 @@
+import styled_components from "styled-components";
+import { COLORS } from "../../constants.js";
+
+
+
+
+
+const MessageContainer = styled_components.div`
+  display: flex;
+  justify-content: ${(props)=>props.isSentByUser ? 'flex-end' : 'flex-start'};
+  position: relative;
+  padding: 0px 6px;
+`;
+const BotMessageImageContainer = styled_components.div`
+  width: 28px;
+  padding: 12px 4px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const BlobContainer = styled_components.div`
+  position: relative;
+  margin: 8px;
+  padding: ${(props)=>props.issentbysystem ? '4px 8px !important' : 'inherit'};
+  border-radius: 8px;
+  background-color: ${(props)=>props.bgcolor};
+  color: ${(props)=>props.color};
+  max-width: ${(props)=>props.blob ? props.blobwidth ? props.blobwidth : '60%' : 'calc(100% - 16px)'};
+`;
+const BlobText = styled_components.div`
+  padding: ${(props)=>props.blob ? '8px 12px' : '0px'};
+  display: flex;
+  flex-direction: column;
+  white-space: pre-line;
+  ${(props)=>props.markdownstyle}
+`;
+const BlobTickContainer = styled_components.div`
+  position: absolute;
+  box-sizing: border-box;
+  height: 100%;
+  padding: 18px 0px 18px 0px;
+  display: flex;
+  top: 0;
+  align-items: center;
+`;
+const BlobTick = styled_components.div`
+  position: relative;
+  margin: -${(props)=>props.pointerSize}px 0px;
+  border: ${(props)=>props.pointerSize}px solid ${COLORS.TRANSPARENT};
+`;
+const TimestampContainer = styled_components.div`
+  display: flex;
+  position: relative;
+  justify-content: ${(props)=>props.isSentByUser ? 'flex-end' : 'flex-start'};
+  align-items: center;
+  gap: 10px;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  img {
+    max-width: 20px;
+  }
+`;
+const TimestampText = styled_components.div`
+  @import url('https://fonts.googleapis.com/css?family=Lato');
+  font-family: Lato;
+  font-size: 10px;
+  color: ${COLORS.SOLID_BLACK};
+  text-align: ${(props)=>props.isSentByUser ? 'right' : 'left'};
+`;
+const MessageFooterContainer = styled_components.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  box-sizing: border-box;
+  padding: 0px 15px 4px 15px;
+  padding-top: ${(props)=>props.isSentByUser ? '0px' : '4px'};
+  width: 100%;
+`;
+const FeedbackMessageContainer = styled_components.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+
+  box-sizing: border-box;
+`;
+const FeedbackButton = styled_components.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: none;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 8px;
+  height: 24px;
+  width: 24px;
+
+  &:hover {
+    cursor: pointer;
+    background-color: #f4f3f4;
+  }
+
+  &:disabled {
+    cursor: default;
+    background: none;
+    opacity: 0.3;
+  }
+
+  &.clicked {
+    opacity: 0;
+    transition: 1s 1s;
+  }
+`;
+
+export { BlobContainer, BlobText, BlobTick, BlobTickContainer, BotMessageImageContainer, FeedbackButton, FeedbackMessageContainer, MessageContainer, MessageFooterContainer, TimestampContainer, TimestampText };
+
+//# sourceMappingURL=styles.js.map

package/lib/components/message/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/message/styles.js","sources":["../../../src/components/message/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nimport { COLORS } from '../../constants'\n\ninterface MessageContainerProps {\n  isSentByUser: boolean\n  isSentBySystem: boolean\n}\n\nexport const MessageContainer = styled.div<MessageContainerProps>`\n  display: flex;\n  justify-content: ${props => (props.isSentByUser ? 'flex-end' : 'flex-start')};\n  position: relative;\n  padding: 0px 6px;\n`\n\nexport const BotMessageImageContainer = styled.div`\n  width: 28px;\n  padding: 12px 4px;\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\ninterface BlobContainerProps {\n  bgcolor: string\n  blob: boolean\n  blobwidth?: string\n  issentbysystem: boolean\n}\n\nexport const BlobContainer = styled.div<BlobContainerProps>`\n  position: relative;\n  margin: 8px;\n  padding: ${props =>\n    props.issentbysystem ? '4px 8px !important' : 'inherit'};\n  border-radius: 8px;\n  background-color: ${props => props.bgcolor};\n  color: ${props => props.color};\n  max-width: ${props =>\n    props.blob\n      ? props.blobwidth\n        ? props.blobwidth\n        : '60%'\n      : 'calc(100% - 16px)'};\n`\ninterface BlobTextProps {\n  blob: boolean\n  markdownstyle: any\n}\n\nexport const BlobText = styled.div<BlobTextProps>`\n  padding: ${props => (props.blob ? '8px 12px' : '0px')};\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  ${props => props.markdownstyle}\n`\n\nexport const BlobTickContainer = styled.div`\n  position: absolute;\n  box-sizing: border-box;\n  height: 100%;\n  padding: 18px 0px 18px 0px;\n  display: flex;\n  top: 0;\n  align-items: center;\n`\n\ninterface BlobTickProps {\n  pointerSize: number\n}\n\nexport const BlobTick = styled.div<BlobTickProps>`\n  position: relative;\n  margin: -${props => props.pointerSize}px 0px;\n  border: ${props => props.pointerSize}px solid ${COLORS.TRANSPARENT};\n`\ninterface TimestampContainerProps {\n  isSentByUser: boolean\n}\n\nexport const TimestampContainer = styled.div<TimestampContainerProps>`\n  display: flex;\n  position: relative;\n  justify-content: ${props => (props.isSentByUser ? 'flex-end' : 'flex-start')};\n  align-items: center;\n  gap: 10px;\n\n  box-sizing: border-box;\n  width: 100%;\n\n  img {\n    max-width: 20px;\n  }\n`\ninterface TimestampTextProps {\n  isSentByUser: boolean\n}\n\nexport const TimestampText = styled.div<TimestampTextProps>`\n  @import url('https://fonts.googleapis.com/css?family=Lato');\n  font-family: Lato;\n  font-size: 10px;\n  color: ${COLORS.SOLID_BLACK};\n  text-align: ${props => (props.isSentByUser ? 'right' : 'left')};\n`\n\nexport const MessageFooterContainer = styled.div<TimestampContainerProps>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  box-sizing: border-box;\n  padding: 0px 15px 4px 15px;\n  padding-top: ${props => (props.isSentByUser ? '0px' : '4px')};\n  width: 100%;\n`\n\nexport const FeedbackMessageContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 4px;\n\n  box-sizing: border-box;\n`\n\nexport const FeedbackButton = styled.button`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  background: none;\n  box-sizing: border-box;\n  border: none;\n  border-radius: 4px;\n  padding: 8px 8px;\n  height: 24px;\n  width: 24px;\n\n  &:hover {\n    cursor: pointer;\n    background-color: #f4f3f4;\n  }\n\n  &:disabled {\n    cursor: default;\n    background: none;\n    opacity: 0.3;\n  }\n\n  &.clicked {\n    opacity: 0;\n    transition: 1s 1s;\n  }\n`\n"],"names":["styled","COLORS","MessageContainer","props","BotMessageImageContainer","BlobContainer","BlobText","BlobTickContainer","BlobTick","TimestampContainer","TimestampText","MessageFooterContainer","FeedbackMessageContainer","FeedbackButton"],"mappings":";;;;;AAAsC;AAEE;AAOjC,MAAME,gBAAgBA,GAAGF,qBAAiC,CAAC;;mBAE/C,EAAEG,CAAAA,QAAUA,MAAM,YAAY,GAAG,aAAa,aAAc;;;AAG/E,CAAC;AAEM,MAAMC,wBAAwBA,GAAGJ,qBAAU,CAAC;;;;;;;AAOnD,CAAC;AAQM,MAAMK,aAAaA,GAAGL,qBAA8B,CAAC;;;WAGjD,EAAEG,CAAAA,QACTA,MAAM,cAAc,GAAG,uBAAuB,UAAU;;oBAExC,EAAEA,CAAAA,QAASA,MAAM,OAAO,CAAC;SACpC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC;aACnB,EAAEA,CAAAA,QACXA,MAAM,IAAI,GACNA,MAAM,SAAS,GACbA,MAAM,SAAS,GACf,QACF,oBAAoB;AAC5B,CAAC;AAMM,MAAMG,QAAQA,GAAGN,qBAAyB,CAAC;WACvC,EAAEG,CAAAA,QAAUA,MAAM,IAAI,GAAG,aAAa,MAAO;;;;EAItD,EAAEA,CAAAA,QAASA,MAAM,aAAa,CAAC;AACjC,CAAC;AAEM,MAAMI,iBAAiBA,GAAGP,qBAAU,CAAC;;;;;;;;AAQ5C,CAAC;AAMM,MAAMQ,QAAQA,GAAGR,qBAAyB,CAAC;;WAEvC,EAAEG,CAAAA,QAASA,MAAM,WAAW,CAAC;UAC9B,EAAEA,CAAAA,QAASA,MAAM,WAAW,CAAC,SAAS,EAAEF,kBAAkB,CAAC;AACrE,CAAC;AAKM,MAAMQ,kBAAkBA,GAAGT,qBAAmC,CAAC;;;mBAGnD,EAAEG,CAAAA,QAAUA,MAAM,YAAY,GAAG,aAAa,aAAc;;;;;;;;;;AAU/E,CAAC;AAKM,MAAMO,aAAaA,GAAGV,qBAA8B,CAAC;;;;SAInD,EAAEC,kBAAkB,CAAC;cAChB,EAAEE,CAAAA,QAAUA,MAAM,YAAY,GAAG,UAAU,OAAQ;AACjE,CAAC;AAEM,MAAMQ,sBAAsBA,GAAGX,qBAAmC,CAAC;;;;;;;eAO3D,EAAEG,CAAAA,QAAUA,MAAM,YAAY,GAAG,QAAQ,MAAO;;AAE/D,CAAC;AAEM,MAAMS,wBAAwBA,GAAGZ,qBAAU,CAAC;;;;;;;AAOnD,CAAC;AAEM,MAAMa,cAAcA,GAAGb,wBAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4B5C,CAAC"}

package/lib/components/message/timestamps.d.ts

@@ -0,0 +1,13 @@
+import { SENDERS } from '../../index-types.js';
+export declare const resolveMessageTimestamps: (getThemeProperty: any, timestampEnabled: any) => {
+    timestampsEnabled: boolean;
+    getFormattedTimestamp: any;
+    timestampStyle: any;
+};
+interface MessageTimestampProps {
+    timestamp: string;
+    style: Record<string, unknown>;
+    sentBy: SENDERS;
+}
+export declare const MessageTimestamp: ({ timestamp, style, sentBy, }: MessageTimestampProps) => import("react").JSX.Element;
+export {};

package/lib/components/message/timestamps.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { WEBCHAT } from "../../constants.js";
+import { SENDERS } from "../../index-types.js";
+import { resolveImage } from "../../util/index.js";
+import { WebchatContext } from "../../webchat/context/index.js";
+import { TimestampContainer, TimestampText } from "./styles.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const resolveMessageTimestamps = (getThemeProperty, timestampEnabled)=>{
+    const timestampsFormat = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsFormat);
+    const timestampStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsStyle);
+    const timestampsEnabled = Boolean(timestampEnabled !== undefined ? timestampEnabled : getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableMessageTimestamps, Boolean(timestampStyle) || Boolean(timestampsFormat) || false));
+    const defaultTimestampFormat = {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric'
+    };
+    const getFormattedTimestamp = timestampsFormat ? timestampsFormat() : new Date().toLocaleString(undefined, defaultTimestampFormat);
+    return {
+        timestampsEnabled,
+        getFormattedTimestamp,
+        timestampStyle
+    };
+};
+const MessageTimestamp = ({ timestamp, style, sentBy })=>{
+    const { getThemeProperty } = useContext(WebchatContext);
+    const isSentByUser = sentBy === SENDERS.user;
+    const isSentByAgent = sentBy === SENDERS.agent;
+    const BotMessageImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageImage);
+    const AgentMessageImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.agentMessageImage, BotMessageImage);
+    const timestampsWithImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsWithImage);
+    return /*#__PURE__*/ jsxs(TimestampContainer, {
+        className: `botonic-timestamp-container ${sentBy}`,
+        isSentByUser: isSentByUser,
+        children: [
+            timestampsWithImage && BotMessageImage && !isSentByUser && /*#__PURE__*/ jsx("img", {
+                alt: isSentByAgent ? 'Agent message image' : 'Bot message image',
+                src: resolveImage(isSentByAgent ? AgentMessageImage : BotMessageImage)
+            }),
+            /*#__PURE__*/ jsx(TimestampText, {
+                isSentByUser: isSentByUser,
+                style: style,
+                children: timestamp
+            })
+        ]
+    });
+};
+
+export { MessageTimestamp, resolveMessageTimestamps };
+
+//# sourceMappingURL=timestamps.js.map

package/lib/components/message/timestamps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/message/timestamps.js","sources":["../../../src/components/message/timestamps.tsx"],"sourcesContent":["import { useContext } from 'react'\n\nimport { WEBCHAT } from '../../constants'\nimport { SENDERS } from '../../index-types'\nimport { resolveImage } from '../../util'\nimport { WebchatContext } from '../../webchat/context'\nimport { TimestampContainer, TimestampText } from './styles'\n\nexport const resolveMessageTimestamps = (\n  getThemeProperty,\n  timestampEnabled\n) => {\n  const timestampsFormat = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsFormat\n  )\n  const timestampStyle = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsStyle\n  )\n  const timestampsEnabled = Boolean(\n    timestampEnabled !== undefined\n      ? timestampEnabled\n      : getThemeProperty(\n          WEBCHAT.CUSTOM_PROPERTIES.enableMessageTimestamps,\n          Boolean(timestampStyle) || Boolean(timestampsFormat) || false\n        )\n  )\n\n  const defaultTimestampFormat = {\n    month: 'short',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: 'numeric',\n    second: 'numeric',\n  }\n\n  const getFormattedTimestamp = timestampsFormat\n    ? timestampsFormat()\n    : // @ts-ignore\n      new Date().toLocaleString(undefined, defaultTimestampFormat)\n\n  return {\n    timestampsEnabled,\n    getFormattedTimestamp,\n    timestampStyle,\n  }\n}\n\ninterface MessageTimestampProps {\n  timestamp: string\n  style: Record<string, unknown>\n  sentBy: SENDERS\n}\n\nexport const MessageTimestamp = ({\n  timestamp,\n  style,\n  sentBy,\n}: MessageTimestampProps) => {\n  const { getThemeProperty } = useContext(WebchatContext)\n\n  const isSentByUser = sentBy === SENDERS.user\n  const isSentByAgent = sentBy === SENDERS.agent\n\n  const BotMessageImage = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.botMessageImage\n  )\n\n  const AgentMessageImage = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.agentMessageImage,\n    BotMessageImage\n  )\n\n  const timestampsWithImage = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsWithImage\n  )\n\n  return (\n    <TimestampContainer\n      className={`botonic-timestamp-container ${sentBy}`}\n      isSentByUser={isSentByUser}\n    >\n      {timestampsWithImage && BotMessageImage && !isSentByUser && (\n        <img\n          alt={isSentByAgent ? 'Agent message image' : 'Bot message image'}\n          src={resolveImage(\n            isSentByAgent ? AgentMessageImage : BotMessageImage\n          )}\n        />\n      )}\n      <TimestampText isSentByUser={isSentByUser} style={style}>\n        {timestamp}\n      </TimestampText>\n    </TimestampContainer>\n  )\n}\n"],"names":["useContext","WEBCHAT","SENDERS","resolveImage","WebchatContext","TimestampContainer","TimestampText","resolveMessageTimestamps","getThemeProperty","timestampEnabled","timestampsFormat","timestampStyle","timestampsEnabled","Boolean","undefined","defaultTimestampFormat","getFormattedTimestamp","Date","MessageTimestamp","timestamp","style","sentBy","isSentByUser","isSentByAgent","BotMessageImage","AgentMessageImage","timestampsWithImage"],"mappings":";;;;;;;;;;;;;;;;AAAkC;AAEO;AACE;AACF;AACa;AACM;AAErD,MAAMO,wBAAwBA,GAAG,CACtCC,kBACAC;IAEA,MAAMC,mBAAmBF,iBACvBP,iDAAiD;IAEnD,MAAMU,iBAAiBH,iBACrBP,gDAAgD;IAElD,MAAMW,oBAAoBC,QACxBJ,qBAAqBK,YACjBL,mBACAD,iBACEP,iDAAiD,EACjDY,QAAQF,mBAAmBE,QAAQH,qBAAqB;IAIhE,MAAMK,yBAAyB;QAC7B,OAAO;QACP,KAAK;QACL,MAAM;QACN,QAAQ;QACR,QAAQ;IACV;IAEA,MAAMC,wBAAwBN,mBAC1BA,qBAEA,IAAIO,OAAO,cAAc,CAACH,WAAWC;IAEzC,OAAO;QACLH;QACAI;QACAL;IACF;AACF,EAAC;AAQM,MAAMO,gBAAgBA,GAAG,CAAC,EAC/BC,SAAS,EACTC,KAAK,EACLC,MAAM,EACgB;IACtB,MAAM,EAAEb,gBAAgB,EAAE,GAAGR,UAAUA,CAACI,cAAcA;IAEtD,MAAMkB,eAAeD,WAAWnB,YAAY;IAC5C,MAAMqB,gBAAgBF,WAAWnB,aAAa;IAE9C,MAAMsB,kBAAkBhB,iBACtBP,yCAAyC;IAG3C,MAAMwB,oBAAoBjB,iBACxBP,2CAA2C,EAC3CuB;IAGF,MAAME,sBAAsBlB,iBAC1BP,oDAAoD;IAGtD,qBACE,KAACI,kBAAkBA;QACjB,WAAW,CAAC,4BAA4B,EAAEgB,QAAQ;QAClD,cAAcC;;YAEbI,uBAAuBF,mBAAmB,CAACF,8BAC1C,IAAC;gBACC,KAAKC,gBAAgB,wBAAwB;gBAC7C,KAAKpB,YAAYA,CACfoB,gBAAgBE,oBAAoBD;;0BAI1C,IAAClB,aAAaA;gBAAC,cAAcgB;gBAAc,OAAOF;0BAC/CD;;;;AAIT,EAAC"}