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

package/lib/components/carousel.js

@@ -0,0 +1,196 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { INPUT, isBrowser } from "@botonic/core";
+import { useContext, useEffect, useRef, useState } from "react";
+import styled_components from "styled-components";
+import leftArrow from "../assets/leftArrow.svg";
+import rightArrow from "../assets/rightArrow.svg";
+import { COLORS, WEBCHAT } from "../constants.js";
+import { resolveImage } from "../util/environment.js";
+import { WebchatContext } from "../webchat/context/index.js";
+import { ButtonsDisabler } from "./buttons-disabler.js";
+import { COMPONENT_DISPLAY_NAMES } from "./constants.js";
+import { Message } from "./message/index.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const ScrollableCarousel = styled_components.div`
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+`;
+const StyledCarousel = styled_components.div`
+  padding: 10px 0px;
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  ${(props)=>props.carouselArrowsEnabled && 'overflow-x: auto;'}
+`;
+const StyledItems = styled_components.div`
+  display: flex;
+`;
+const StyledArrowContainer = styled_components.div`
+  position: absolute;
+  top: calc(50% - 20px);
+  height: 40px;
+  width: 25px;
+  background: ${COLORS.SILVER};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  justify-content: ${(props)=>props.justifyContent};
+
+  ${(props)=>props.left === 0 ? `left: ${props.left}px` : ''};
+  ${(props)=>props.right === 0 ? `right: ${props.right}px` : ''};
+  ${(props)=>props.arrow === 'right' ? 'border-top-right-radius: 30px' : ''};
+  ${(props)=>props.arrow === 'right' ? 'border-bottom-right-radius: 30px' : ''};
+  ${(props)=>props.arrow === 'left' ? 'border-top-left-radius: 30px' : ''};
+  ${(props)=>props.arrow === 'left' ? 'border-bottom-left-radius: 30px' : ''};
+`;
+const StyledArrow = styled_components.img`
+  width: 20px;
+  height: 20px;
+`;
+const serialize = (carouselProps)=>{
+    let carouselChildren = carouselProps.children;
+    if (!Array.isArray(carouselChildren)) {
+        carouselChildren = [
+            carouselChildren
+        ];
+    }
+    return {
+        type: INPUT.CAROUSEL,
+        elements: carouselChildren.map((e)=>e?.type?.serialize?.(e.props))
+    };
+};
+const Carousel = (props)=>{
+    const { getThemeProperty } = useContext(WebchatContext);
+    const [hasLeftArrow, setLeftArrow] = useState(false);
+    const [hasRightArrow, setRightArrow] = useState(true);
+    const carouselRef = useRef(null);
+    const CustomCarouselLeftArrow = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customCarouselLeftArrow);
+    const CustomCarouselRightArrow = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customCarouselRightArrow);
+    // TODO: Investigate why when set to false, scroll is enabled via dragging the bar but not hovering the carousel elements
+    const carouselArrowsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableCarouselArrows);
+    const scrollCarouselBy = (value)=>{
+        carouselRef.current?.scrollBy({
+            left: value,
+            behavior: 'smooth'
+        });
+    };
+    const setArrowsVisibility = (event)=>{
+        const carousel = event.currentTarget;
+        const maxRightScroll = carousel.scrollWidth - carousel.offsetWidth - WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT;
+        setLeftArrow(carousel.scrollLeft !== 0);
+        setRightArrow(carousel.scrollLeft < maxRightScroll);
+    };
+    const getArrows = ()=>{
+        const scrollBy = WEBCHAT.DEFAULTS.ELEMENT_WIDTH + WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT;
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                hasLeftArrow && (CustomCarouselLeftArrow ? /*#__PURE__*/ jsx(CustomCarouselLeftArrow, {
+                    scrollCarouselBy: scrollCarouselBy
+                }) : /*#__PURE__*/ jsx(StyledArrowContainer, {
+                    left: 0,
+                    arrow: 'right',
+                    justifyContent: 'flex-start',
+                    onClick: ()=>scrollCarouselBy(-scrollBy),
+                    children: /*#__PURE__*/ jsx(StyledArrow, {
+                        src: resolveImage(leftArrow)
+                    })
+                })),
+                hasRightArrow && (CustomCarouselRightArrow ? /*#__PURE__*/ jsx(CustomCarouselRightArrow, {
+                    scrollCarouselBy: scrollCarouselBy
+                }) : /*#__PURE__*/ jsx(StyledArrowContainer, {
+                    right: 0,
+                    arrow: 'left',
+                    justifyContent: 'flex-end',
+                    onClick: ()=>scrollCarouselBy(scrollBy),
+                    children: /*#__PURE__*/ jsx(StyledArrow, {
+                        src: resolveImage(rightArrow)
+                    })
+                }))
+            ]
+        });
+    };
+    useEffect(()=>{
+        const carousel = carouselRef.current;
+        if (carousel?.addEventListener) {
+            carousel.addEventListener('scroll', setArrowsVisibility, false);
+        }
+        return ()=>{
+            if (carousel?.removeEventListener) {
+                carousel.removeEventListener('scroll', setArrowsVisibility, false);
+            }
+        };
+    }, [
+        carouselRef.current
+    ]);
+    const carouselProps = {
+        ...props,
+        children: ButtonsDisabler.updateChildrenButtons(props.children)
+    };
+    if (isBrowser()) {
+        return /*#__PURE__*/ jsx(Message, {
+            style: {
+                width: '85%',
+                padding: 0,
+                backgroundColor: COLORS.TRANSPARENT
+            },
+            blob: false,
+            json: serialize(carouselProps),
+            type: INPUT.CAROUSEL,
+            ...carouselProps,
+            children: /*#__PURE__*/ jsx(ScrollableCarousel, {
+                children: /*#__PURE__*/ jsxs(StyledCarousel, {
+                    ref: carouselRef,
+                    carouselArrowsEnabled: carouselArrowsEnabled,
+                    children: [
+                        /*#__PURE__*/ jsx(StyledItems, {
+                            children: carouselProps.children
+                        }),
+                        carouselArrowsEnabled && getArrows()
+                    ]
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(Message, {
+        style: {
+            width: '85%',
+            padding: 0,
+            backgroundColor: COLORS.TRANSPARENT
+        },
+        blob: false,
+        json: serialize(carouselProps),
+        type: INPUT.CAROUSEL,
+        ...carouselProps,
+        children: props.children
+    });
+};
+Carousel.displayName = COMPONENT_DISPLAY_NAMES.Carousel;
+Carousel.serialize = serialize;
+
+export { Carousel };
+
+//# sourceMappingURL=carousel.js.map

package/lib/components/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/carousel.js","sources":["../../src/components/carousel.tsx"],"sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport { useContext, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\n\nimport LeftArrow from '../assets/leftArrow.svg'\nimport RightArrow from '../assets/rightArrow.svg'\nimport { COLORS, WEBCHAT } from '../constants'\nimport { resolveImage } from '../util/environment'\nimport { WebchatContext } from '../webchat/context'\nimport { ButtonsDisabler } from './buttons-disabler'\nimport { COMPONENT_DISPLAY_NAMES } from './constants'\nimport type { CarouselProps } from './index-types'\nimport { Message } from './message'\n\nconst ScrollableCarousel = styled.div`\n  overscroll-behavior: contain;\n  -webkit-overflow-scrolling: touch;\n`\n\ninterface StyledCarouselProps {\n  carouselArrowsEnabled: boolean\n}\n\nconst StyledCarousel = styled.div<StyledCarouselProps>`\n  padding: 10px 0px;\n  display: flex;\n  flex-direction: row;\n  max-width: 100%;\n  ${props => props.carouselArrowsEnabled && 'overflow-x: auto;'}\n`\n\nconst StyledItems = styled.div`\n  display: flex;\n`\n\ninterface StyledArrowContainerProps {\n  left?: number\n  right?: number\n  arrow: 'right' | 'left'\n  justifyContent: string\n}\n\nconst StyledArrowContainer = styled.div<StyledArrowContainerProps>`\n  position: absolute;\n  top: calc(50% - 20px);\n  height: 40px;\n  width: 25px;\n  background: ${COLORS.SILVER};\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  justify-content: ${props => props.justifyContent};\n\n  ${props => (props.left === 0 ? `left: ${props.left}px` : '')};\n  ${props => (props.right === 0 ? `right: ${props.right}px` : '')};\n  ${props => (props.arrow === 'right' ? 'border-top-right-radius: 30px' : '')};\n  ${props =>\n    props.arrow === 'right' ? 'border-bottom-right-radius: 30px' : ''};\n  ${props => (props.arrow === 'left' ? 'border-top-left-radius: 30px' : '')};\n  ${props => (props.arrow === 'left' ? 'border-bottom-left-radius: 30px' : '')};\n`\nconst StyledArrow = styled.img`\n  width: 20px;\n  height: 20px;\n`\n\nconst serialize = carouselProps => {\n  let carouselChildren = carouselProps.children\n  if (!Array.isArray(carouselChildren)) {\n    carouselChildren = [carouselChildren]\n  }\n  return {\n    type: INPUT.CAROUSEL,\n    elements: carouselChildren.map(e => e?.type?.serialize?.(e.props)),\n  }\n}\n\nexport const Carousel = (props: CarouselProps) => {\n  const { getThemeProperty } = useContext(WebchatContext)\n  const [hasLeftArrow, setLeftArrow] = useState(false)\n  const [hasRightArrow, setRightArrow] = useState(true)\n  const carouselRef = useRef<HTMLDivElement>(null)\n\n  const CustomCarouselLeftArrow = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.customCarouselLeftArrow\n  )\n  const CustomCarouselRightArrow = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.customCarouselRightArrow\n  )\n  // TODO: Investigate why when set to false, scroll is enabled via dragging the bar but not hovering the carousel elements\n  const carouselArrowsEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.enableCarouselArrows\n  )\n\n  const scrollCarouselBy = value => {\n    carouselRef.current?.scrollBy({\n      left: value,\n      behavior: 'smooth',\n    })\n  }\n\n  const setArrowsVisibility = event => {\n    const carousel = event.currentTarget\n    const maxRightScroll =\n      carousel.scrollWidth -\n      carousel.offsetWidth -\n      WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT\n    setLeftArrow(carousel.scrollLeft !== 0)\n    setRightArrow(carousel.scrollLeft < maxRightScroll)\n  }\n\n  const getArrows = () => {\n    const scrollBy =\n      WEBCHAT.DEFAULTS.ELEMENT_WIDTH + WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT\n    return (\n      <>\n        {hasLeftArrow &&\n          (CustomCarouselLeftArrow ? (\n            <CustomCarouselLeftArrow scrollCarouselBy={scrollCarouselBy} />\n          ) : (\n            <StyledArrowContainer\n              left={0}\n              arrow={'right'}\n              justifyContent={'flex-start'}\n              onClick={() => scrollCarouselBy(-scrollBy)}\n            >\n              <StyledArrow src={resolveImage(LeftArrow)} />\n            </StyledArrowContainer>\n          ))}\n        {hasRightArrow &&\n          (CustomCarouselRightArrow ? (\n            <CustomCarouselRightArrow scrollCarouselBy={scrollCarouselBy} />\n          ) : (\n            <StyledArrowContainer\n              right={0}\n              arrow={'left'}\n              justifyContent={'flex-end'}\n              onClick={() => scrollCarouselBy(scrollBy)}\n            >\n              <StyledArrow src={resolveImage(RightArrow)} />\n            </StyledArrowContainer>\n          ))}\n      </>\n    )\n  }\n\n  useEffect(() => {\n    const carousel = carouselRef.current\n    if (carousel?.addEventListener) {\n      carousel.addEventListener('scroll', setArrowsVisibility, false)\n    }\n\n    return () => {\n      if (carousel?.removeEventListener) {\n        carousel.removeEventListener('scroll', setArrowsVisibility, false)\n      }\n    }\n  }, [carouselRef.current])\n\n  const carouselProps = {\n    ...props,\n    children: ButtonsDisabler.updateChildrenButtons(props.children),\n  }\n\n  if (isBrowser()) {\n    return (\n      <Message\n        style={{\n          width: '85%',\n          padding: 0,\n          backgroundColor: COLORS.TRANSPARENT,\n        }}\n        blob={false}\n        json={serialize(carouselProps)}\n        type={INPUT.CAROUSEL}\n        {...carouselProps}\n      >\n        <ScrollableCarousel>\n          <StyledCarousel\n            ref={carouselRef}\n            carouselArrowsEnabled={carouselArrowsEnabled}\n          >\n            <StyledItems>{carouselProps.children}</StyledItems>\n            {carouselArrowsEnabled && getArrows()}\n          </StyledCarousel>\n        </ScrollableCarousel>\n      </Message>\n    )\n  }\n\n  return (\n    <Message\n      style={{ width: '85%', padding: 0, backgroundColor: COLORS.TRANSPARENT }}\n      blob={false}\n      json={serialize(carouselProps)}\n      type={INPUT.CAROUSEL}\n      {...carouselProps}\n    >\n      {props.children}\n    </Message>\n  )\n}\n\nCarousel.displayName = COMPONENT_DISPLAY_NAMES.Carousel\n\nCarousel.serialize = serialize\n"],"names":["INPUT","isBrowser","useContext","useEffect","useRef","useState","styled","LeftArrow","RightArrow","COLORS","WEBCHAT","resolveImage","WebchatContext","ButtonsDisabler","COMPONENT_DISPLAY_NAMES","Message","ScrollableCarousel","StyledCarousel","props","StyledItems","StyledArrowContainer","StyledArrow","serialize","carouselProps","carouselChildren","Array","e","Carousel","getThemeProperty","hasLeftArrow","setLeftArrow","hasRightArrow","setRightArrow","carouselRef","CustomCarouselLeftArrow","CustomCarouselRightArrow","carouselArrowsEnabled","scrollCarouselBy","value","setArrowsVisibility","event","carousel","maxRightScroll","getArrows","scrollBy"],"mappings":"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"}

package/lib/components/components.js

@@ -0,0 +1,18 @@
+/**
+ * Get the name of an element (instantiated component)
+ * @param {React.Element} component
+ * @returns {string}
+ */ function getElementName(component) {
+    return component.type.name;
+}
+/**
+ * Get the name of a component TYPE
+ * @param {React.ComponentType} component
+ * @returns {string}
+ */ function getComponentTypeName(component) {
+    return component.displayName || component.name || 'Component';
+}
+
+export { getComponentTypeName, getElementName };
+
+//# sourceMappingURL=components.js.map

package/lib/components/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/components.js","sources":["../../src/components/components.js"],"sourcesContent":["/**\n * Get the name of an element (instantiated component)\n * @param {React.Element} component\n * @returns {string}\n */\nexport function getElementName(component) {\n  return component.type.name\n}\n\n/**\n * Get the name of a component TYPE\n * @param {React.ComponentType} component\n * @returns {string}\n */\nexport function getComponentTypeName(component) {\n  return component.displayName || component.name || 'Component'\n}\n"],"names":["getElementName","component","getComponentTypeName"],"mappings":"AAAA;;;;CAIC,GACM,SAASA,cAAcA,CAACC,SAAS;IACtC,OAAOA,UAAU,IAAI,CAAC,IAAI;AAC5B;AAEA;;;;CAIC,GACM,SAASC,oBAAoBA,CAACD,SAAS;IAC5C,OAAOA,UAAU,WAAW,IAAIA,UAAU,IAAI,IAAI;AACpD"}

package/lib/components/constants.js

@@ -0,0 +1,15 @@
+const COMPONENT_DISPLAY_NAMES = {
+    Button: 'Button',
+    Carousel: 'Carousel',
+    Pic: 'Pic',
+    Reply: 'Reply',
+    Subtitle: 'Subtitle',
+    Text: 'Text',
+    Title: 'Title',
+    MultichannelButton: 'MultichannelButton',
+    MultichannelReply: 'MultichannelReply'
+};
+
+export { COMPONENT_DISPLAY_NAMES };
+
+//# sourceMappingURL=constants.js.map

package/lib/components/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/constants.js","sources":["../../src/components/constants.ts"],"sourcesContent":["export const COMPONENT_DISPLAY_NAMES = {\n  Button: 'Button',\n  Carousel: 'Carousel',\n  Pic: 'Pic',\n  Reply: 'Reply',\n  Subtitle: 'Subtitle',\n  Text: 'Text',\n  Title: 'Title',\n  MultichannelButton: 'MultichannelButton',\n  MultichannelReply: 'MultichannelReply',\n} as const\n"],"names":["COMPONENT_DISPLAY_NAMES"],"mappings":"AAAO,MAAMA,uBAAuBA,GAAG;IACrC,QAAQ;IACR,UAAU;IACV,KAAK;IACL,OAAO;IACP,UAAU;IACV,MAAM;IACN,OAAO;IACP,oBAAoB;IACpB,mBAAmB;AACrB,EAAU"}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { CustomMessageType } from './index-types.js';
+/**
+ *
+ *  name: as it appears at ThemeProps' message.customTypes key
+ *  CustomMessageComponent
+ *  defaultProps: Props for the wrapper Message
+ *  ErrorBoundary: to recover in case it fails
+ */
+export interface CustomMessageArgs {
+    name: string;
+    component: React.FC<any>;
+    defaultProps?: Record<string, any>;
+    errorBoundary?: any;
+}
+export declare const customMessage: ({ name, component: CustomMessageComponent, defaultProps, errorBoundary, }: CustomMessageArgs) => CustomMessageType;

package/lib/components/custom-message.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { INPUT } from "@botonic/core";
+import lodash_merge from "lodash.merge";
+import react from "react";
+import { SENDERS } from "../index-types.js";
+import { createErrorBoundary } from "../util/error-boundary.js";
+import { warnDeprecatedProps } from "../util/logs.js";
+import { mapObjectNonBooleanValues } from "../util/react.js";
+import { Message } from "./message/index.js";
+import { Reply } from "./reply.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const customMessage = ({ name, component: CustomMessageComponent, defaultProps = {}, errorBoundary = createErrorBoundary() })=>{
+    const CustomMessage = (props)=>{
+        warnDeprecatedProps(defaultProps, 'customMessage:');
+        if (defaultProps.sentBy === SENDERS.user) {
+            defaultProps.ack = 1;
+        }
+        return /*#__PURE__*/ jsx(Message, {
+            ...lodash_merge(mapObjectNonBooleanValues(defaultProps), props),
+            type: INPUT.CUSTOM
+        });
+    };
+    const splitChildren = (props)=>{
+        const { children } = props;
+        const isReply = (e)=>e.type === Reply;
+        try {
+            if (!Array.isArray(children) && !isReply(children)) {
+                return {
+                    replies: null,
+                    childrenWithoutReplies: children
+                };
+            }
+            const childrenArray = react.Children.toArray(children);
+            const replies = childrenArray.filter(isReply);
+            const childrenWithoutReplies = childrenArray.filter((e)=>!isReply(e));
+            return {
+                replies: replies,
+                childrenWithoutReplies
+            };
+        } catch (_e) {
+            return {
+                replies: null,
+                childrenWithoutReplies: children
+            };
+        }
+    };
+    const WrappedComponent = (props)=>{
+        const { id, children, ...customMessageProps } = props;
+        const { replies, childrenWithoutReplies } = splitChildren(props);
+        const ErrorBoundary = errorBoundary;
+        return /*#__PURE__*/ jsxs(CustomMessage, {
+            id: id,
+            json: {
+                ...customMessageProps,
+                id,
+                children: childrenWithoutReplies,
+                customTypeName: name
+            },
+            sentBy: props.sentBy || SENDERS.bot,
+            isUnread: props.isUnread,
+            children: [
+                /*#__PURE__*/ jsx(ErrorBoundary, {
+                    ...customMessageProps,
+                    children: /*#__PURE__*/ jsx(CustomMessageComponent, {
+                        id: id,
+                        ...customMessageProps,
+                        children: childrenWithoutReplies
+                    })
+                }, 'errorBoundary'),
+                replies
+            ]
+        });
+    };
+    WrappedComponent.customTypeName = name;
+    WrappedComponent.deserialize = (msg)=>{
+        return /*#__PURE__*/ jsx(WrappedComponent, {
+            id: msg.id,
+            json: msg.data,
+            ...msg.data,
+            sentBy: msg.sentBy || SENDERS.bot,
+            isUnread: msg.isUnread
+        }, msg.key);
+    };
+    return WrappedComponent;
+};
+
+export { customMessage };
+
+//# sourceMappingURL=custom-message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/custom-message.js","sources":["../../src/components/custom-message.tsx"],"sourcesContent":["import { INPUT } from '@botonic/core'\nimport merge from 'lodash.merge'\nimport React from 'react'\n\nimport { SENDERS } from '../index-types'\nimport { createErrorBoundary } from '../util/error-boundary'\nimport { warnDeprecatedProps } from '../util/logs'\nimport { mapObjectNonBooleanValues } from '../util/react'\nimport type { CustomMessageType } from './index-types'\nimport { Message } from './message'\nimport { Reply } from './reply'\n\n/**\n *\n *  name: as it appears at ThemeProps' message.customTypes key\n *  CustomMessageComponent\n *  defaultProps: Props for the wrapper Message\n *  ErrorBoundary: to recover in case it fails\n */\n\nexport interface CustomMessageArgs {\n  name: string\n  component: React.FC<any>\n  defaultProps?: Record<string, any>\n  errorBoundary?: any\n}\n\nexport const customMessage = ({\n  name,\n  component: CustomMessageComponent,\n  defaultProps = {},\n  errorBoundary = createErrorBoundary(),\n}: CustomMessageArgs): CustomMessageType => {\n  const CustomMessage = props => {\n    warnDeprecatedProps(defaultProps, 'customMessage:')\n    if (defaultProps.sentBy === SENDERS.user) {\n      defaultProps.ack = 1\n    }\n    return (\n      <Message\n        {...merge(mapObjectNonBooleanValues(defaultProps), props)}\n        type={INPUT.CUSTOM}\n      />\n    )\n  }\n\n  const splitChildren = props => {\n    const { children } = props\n    const isReply = e => e.type === Reply\n    try {\n      if (!Array.isArray(children) && !isReply(children)) {\n        return { replies: null, childrenWithoutReplies: children }\n      }\n      const childrenArray = React.Children.toArray(children)\n      const replies = childrenArray.filter(isReply)\n      const childrenWithoutReplies = childrenArray.filter(e => !isReply(e))\n      return {\n        replies: replies,\n        childrenWithoutReplies,\n      }\n    } catch (_e) {\n      return { replies: null, childrenWithoutReplies: children }\n    }\n  }\n\n  const WrappedComponent = props => {\n    const { id, children, ...customMessageProps } = props\n    const { replies, childrenWithoutReplies } = splitChildren(props)\n\n    const ErrorBoundary = errorBoundary\n\n    return (\n      <CustomMessage\n        id={id}\n        json={{\n          ...customMessageProps,\n          id,\n          children: childrenWithoutReplies,\n          customTypeName: name,\n        }}\n        sentBy={props.sentBy || SENDERS.bot}\n        isUnread={props.isUnread}\n      >\n        <ErrorBoundary key={'errorBoundary'} {...customMessageProps}>\n          <CustomMessageComponent id={id} {...customMessageProps}>\n            {childrenWithoutReplies}\n          </CustomMessageComponent>\n        </ErrorBoundary>\n        {replies}\n      </CustomMessage>\n    )\n  }\n  WrappedComponent.customTypeName = name\n  WrappedComponent.deserialize = (msg: any) => {\n    return (\n      <WrappedComponent\n        id={msg.id}\n        key={msg.key}\n        json={msg.data}\n        {...msg.data}\n        sentBy={msg.sentBy || SENDERS.bot}\n        isUnread={msg.isUnread}\n      />\n    )\n  }\n  return WrappedComponent\n}\n"],"names":["INPUT","merge","React","SENDERS","createErrorBoundary","warnDeprecatedProps","mapObjectNonBooleanValues","Message","Reply","customMessage","name","CustomMessageComponent","defaultProps","errorBoundary","CustomMessage","props","splitChildren","children","isReply","e","Array","childrenArray","replies","childrenWithoutReplies","_e","WrappedComponent","id","customMessageProps","ErrorBoundary","msg"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAqC;AACL;AACP;AAEe;AACoB;AACV;AACO;AAEtB;AACJ;AAiBxB,MAAMS,aAAaA,GAAG,CAAC,EAC5BC,IAAI,EACJ,WAAWC,sBAAsB,EACjCC,eAAe,CAAC,CAAC,EACjBC,gBAAgBT,mBAAmBA,EAAE,EACnB;IAClB,MAAMU,gBAAgBC,CAAAA;QACpBV,mBAAmBA,CAACO,cAAc;QAClC,IAAIA,aAAa,MAAM,KAAKT,YAAY,EAAE;YACxCS,aAAa,GAAG,GAAG;QACrB;QACA,qBACE,IAACL,OAAOA;YACL,GAAGN,YAAKA,CAACK,yBAAyBA,CAACM,eAAeG,MAAM;YACzD,MAAMf,YAAY;;IAGxB;IAEA,MAAMgB,gBAAgBD,CAAAA;QACpB,MAAM,EAAEE,QAAQ,EAAE,GAAGF;QACrB,MAAMG,UAAUC,CAAAA,IAAKA,EAAE,IAAI,KAAKX,KAAKA;QACrC,IAAI;YACF,IAAI,CAACY,MAAM,OAAO,CAACH,aAAa,CAACC,QAAQD,WAAW;gBAClD,OAAO;oBAAE,SAAS;oBAAM,wBAAwBA;gBAAS;YAC3D;YACA,MAAMI,gBAAgBnB,sBAAsB,CAACe;YAC7C,MAAMK,UAAUD,cAAc,MAAM,CAACH;YACrC,MAAMK,yBAAyBF,cAAc,MAAM,CAACF,CAAAA,IAAK,CAACD,QAAQC;YAClE,OAAO;gBACL,SAASG;gBACTC;YACF;QACF,EAAE,OAAOC,IAAI;YACX,OAAO;gBAAE,SAAS;gBAAM,wBAAwBP;YAAS;QAC3D;IACF;IAEA,MAAMQ,mBAAmBV,CAAAA;QACvB,MAAM,EAAEW,EAAE,EAAET,QAAQ,EAAE,GAAGU,oBAAoB,GAAGZ;QAChD,MAAM,EAAEO,OAAO,EAAEC,sBAAsB,EAAE,GAAGP,cAAcD;QAE1D,MAAMa,gBAAgBf;QAEtB,qBACE,KAACC;YACC,IAAIY;YACJ,MAAM;gBACJ,GAAGC,kBAAkB;gBACrBD;gBACA,UAAUH;gBACV,gBAAgBb;YAClB;YACA,QAAQK,MAAM,MAAM,IAAIZ,WAAW;YACnC,UAAUY,MAAM,QAAQ;;8BAExB,IAACa;oBAAqC,GAAGD,kBAAkB;8BACzD,kBAAChB;wBAAuB,IAAIe;wBAAK,GAAGC,kBAAkB;kCACnDJ;;mBAFe;gBAKnBD;;;IAGP;IACAG,iBAAiB,cAAc,GAAGf;IAClCe,iBAAiB,WAAW,GAAG,CAACI;QAC9B,qBACE,IAACJ;YACC,IAAII,IAAI,EAAE;YAEV,MAAMA,IAAI,IAAI;YACb,GAAGA,IAAI,IAAI;YACZ,QAAQA,IAAI,MAAM,IAAI1B,WAAW;YACjC,UAAU0B,IAAI,QAAQ;WAJjBA,IAAI,GAAG;IAOlB;IACA,OAAOJ;AACT,EAAC"}

package/lib/components/document.d.ts

@@ -0,0 +1,9 @@
+import type { DocumentProps } from './index-types.js';
+export declare const Document: {
+    (props: DocumentProps): import("react").JSX.Element;
+    serialize: (documentProps: {
+        src: string;
+    }) => {
+        document: string;
+    };
+};

package/lib/components/document.js

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import { INPUT, isBrowser } from "@botonic/core";
+import { useContext } from "react";
+import styled_components from "styled-components";
+import { ROLES, WEBCHAT } from "../constants.js";
+import { staticAsset } from "../util/environment.js";
+import { WebchatContext } from "../webchat/context/index.js";
+import { Message } from "./message/index.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const StyledButton = styled_components.a`
+  display: block;
+  height: 25px;
+  background-color: #f0f0f0;
+  padding: 10px;
+  text-align: center;
+  border-radius: 5px;
+  color: black;
+  font-weight: bold;
+  line-height: 25px;
+  text-decoration: none;
+  border: 1px solid black;
+  opacity: 0.9;
+  &:hover {
+    opacity: 1;
+  }
+`;
+const serialize = (documentProps)=>{
+    return {
+        document: documentProps.src
+    };
+};
+const Document = (props)=>{
+    props = {
+        ...props,
+        src: staticAsset(props.src)
+    };
+    let content = props.children;
+    const { getThemeProperty } = useContext(WebchatContext);
+    let documentDownload = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.documentDownload, {});
+    if (typeof documentDownload === 'function') {
+        documentDownload = documentDownload(props.from);
+    }
+    if (isBrowser()) {
+        content = /*#__PURE__*/ jsx(StyledButton, {
+            href: props.src,
+            target: "_blank",
+            rel: "noreferrer",
+            style: {
+                ...documentDownload.style
+            },
+            children: documentDownload.text || 'Download'
+        });
+    }
+    return /*#__PURE__*/ jsx(Message, {
+        role: ROLES.DOCUMENT_MESSAGE,
+        json: serialize(props),
+        ...props,
+        type: INPUT.DOCUMENT,
+        children: content
+    });
+};
+Document.serialize = serialize;
+
+export { Document };
+
+//# sourceMappingURL=document.js.map

package/lib/components/document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/document.js","sources":["../../src/components/document.tsx"],"sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport { useContext } from 'react'\nimport styled from 'styled-components'\n\nimport { ROLES, WEBCHAT } from '../constants'\nimport { staticAsset } from '../util/environment'\nimport { WebchatContext } from '../webchat/context'\nimport type { DocumentProps } from './index-types'\nimport { Message } from './message'\n\nconst StyledButton = styled.a`\n  display: block;\n  height: 25px;\n  background-color: #f0f0f0;\n  padding: 10px;\n  text-align: center;\n  border-radius: 5px;\n  color: black;\n  font-weight: bold;\n  line-height: 25px;\n  text-decoration: none;\n  border: 1px solid black;\n  opacity: 0.9;\n  &:hover {\n    opacity: 1;\n  }\n`\n\nconst serialize = (documentProps: { src: string }) => {\n  return { document: documentProps.src }\n}\n\nexport const Document = (props: DocumentProps) => {\n  props = { ...props, src: staticAsset(props.src) }\n\n  let content = props.children\n\n  const { getThemeProperty } = useContext(WebchatContext)\n  let documentDownload = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.documentDownload,\n    {}\n  )\n  if (typeof documentDownload === 'function') {\n    documentDownload = documentDownload(props.from)\n  }\n\n  if (isBrowser()) {\n    content = (\n      <StyledButton\n        href={props.src}\n        target='_blank'\n        rel='noreferrer'\n        style={{\n          ...documentDownload.style,\n        }}\n      >\n        {documentDownload.text || 'Download'}\n      </StyledButton>\n    )\n  }\n\n  return (\n    <Message\n      role={ROLES.DOCUMENT_MESSAGE}\n      json={serialize(props)}\n      {...props}\n      type={INPUT.DOCUMENT}\n    >\n      {content}\n    </Message>\n  )\n}\n\nDocument.serialize = serialize\n"],"names":["INPUT","isBrowser","useContext","styled","ROLES","WEBCHAT","staticAsset","WebchatContext","Message","StyledButton","serialize","documentProps","Document","props","content","getThemeProperty","documentDownload"],"mappings":";;;;;;;;;;;;;;;;;;AAAgD;AACd;AACI;AAEO;AACI;AACE;AAEhB;AAEnC,MAAMS,YAAYA,GAAGN,mBAAQ,CAAC;;;;;;;;;;;;;;;;AAgB9B,CAAC;AAED,MAAMO,SAASA,GAAG,CAACC;IACjB,OAAO;QAAE,UAAUA,cAAc,GAAG;IAAC;AACvC;AAEO,MAAMC,QAAQA,GAAG,CAACC;IACvBA,QAAQ;QAAE,GAAGA,KAAK;QAAE,KAAKP,WAAWA,CAACO,MAAM,GAAG;IAAE;IAEhD,IAAIC,UAAUD,MAAM,QAAQ;IAE5B,MAAM,EAAEE,gBAAgB,EAAE,GAAGb,UAAUA,CAACK,cAAcA;IACtD,IAAIS,mBAAmBD,iBACrBV,0CAA0C,EAC1C,CAAC;IAEH,IAAI,OAAOW,qBAAqB,YAAY;QAC1CA,mBAAmBA,iBAAiBH,MAAM,IAAI;IAChD;IAEA,IAAIZ,SAASA,IAAI;QACfa,wBACE,IAACL,YAAYA;YACX,MAAMI,MAAM,GAAG;YACf,QAAO;YACP,KAAI;YACJ,OAAO;gBACL,GAAGG,iBAAiB,KAAK;YAC3B;sBAECA,iBAAiB,IAAI,IAAI;;IAGhC;IAEA,qBACE,IAACR,OAAOA;QACN,MAAMJ,sBAAsB;QAC5B,MAAMM,SAASA,CAACG;QACf,GAAGA,KAAK;QACT,MAAMb,cAAc;kBAEnBc;;AAGP,EAAC;AAEDF,QAAQA,CAAC,SAAS,GAAGF,SAASA"}

package/lib/components/element.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import styled_components from "styled-components";
+import { COLORS, WEBCHAT } from "../constants.js";
+import { renderComponent } from "../util/react.js";
+import { Button } from "./button/index.js";
+
+
+
+
+
+
+
+
+
+
+
+const ElementContainer = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  width: ${WEBCHAT.DEFAULTS.ELEMENT_WIDTH}px;
+  margin-right: ${WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT}px;
+  border-radius: 6px;
+  border: 1px solid ${COLORS.SEASHELL_WHITE};
+  overflow: hidden;
+  justify-content: space-between;
+`;
+const Element = (props)=>{
+    const renderBrowser = ()=>/*#__PURE__*/ jsx(ElementContainer, {
+            children: props.children
+        });
+    // @ts-expect-error
+    const renderNode = ()=>/*#__PURE__*/ jsx("element", {
+            children: props.children
+        });
+    return renderComponent({
+        renderBrowser,
+        renderNode
+    });
+};
+Element.serialize = (elementProps)=>{
+    const element = Object.assign({}, ...elementProps.children.filter((c)=>c?.type?.name !== Button.name).map((c)=>c?.type?.serialize?.(c.props)));
+    // When we are serializer buttons from backend, we are receiving the data
+    // as an array of buttons, so we have to keep robust with serve and deal with arrays
+    element.buttons = [
+        ...elementProps.children.filter((c)=>{
+            if (Array.isArray(c)) {
+                return true;
+            }
+            return c?.type?.name === Button.name;
+        }).map((b)=>{
+            if (Array.isArray(b)) {
+                b.map((bb)=>bb?.type?.serialize?.(bb.props)?.button);
+            }
+            return b?.type?.serialize(b.props).button;
+        })
+    ];
+    // When we have the buttons from backend, we have all buttons inside an array on the first position
+    // of another array in element['buttons'] we want that element['buttons'] to be an array of buttons,
+    // not an array of another array of buttons
+    if (Array.isArray(element.buttons[0])) {
+        element.buttons = element.buttons[0];
+    }
+    return element;
+};
+
+export { Element };
+
+//# sourceMappingURL=element.js.map

package/lib/components/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/element.js","sources":["../../src/components/element.tsx"],"sourcesContent":["import type React from 'react'\nimport styled from 'styled-components'\n\nimport { COLORS, WEBCHAT } from '../constants'\nimport { renderComponent } from '../util/react'\nimport { Button } from './button/index'\n\nconst ElementContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: ${WEBCHAT.DEFAULTS.ELEMENT_WIDTH}px;\n  margin-right: ${WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT}px;\n  border-radius: 6px;\n  border: 1px solid ${COLORS.SEASHELL_WHITE};\n  overflow: hidden;\n  justify-content: space-between;\n`\n\nexport interface ElementProps {\n  children: React.ReactNode[]\n}\n\nexport const Element = (props: ElementProps) => {\n  const renderBrowser = () => (\n    <ElementContainer>{props.children}</ElementContainer>\n  )\n\n  // @ts-expect-error\n  const renderNode = () => <element>{props.children}</element>\n\n  return renderComponent({ renderBrowser, renderNode })\n}\n\nElement.serialize = elementProps => {\n  const element = Object.assign(\n    {},\n    ...elementProps.children\n      .filter(c => c?.type?.name !== Button.name)\n      .map(c => c?.type?.serialize?.(c.props))\n  )\n  // When we are serializer buttons from backend, we are receiving the data\n  // as an array of buttons, so we have to keep robust with serve and deal with arrays\n  element.buttons = [\n    ...elementProps.children\n      .filter(c => {\n        if (Array.isArray(c)) {\n          return true\n        }\n        return c?.type?.name === Button.name\n      })\n      .map(b => {\n        if (Array.isArray(b)) {\n          b.map(bb => bb?.type?.serialize?.(bb.props)?.button)\n        }\n        return b?.type?.serialize(b.props).button\n      }),\n  ]\n  // When we have the buttons from backend, we have all buttons inside an array on the first position\n  // of another array in element['buttons'] we want that element['buttons'] to be an array of buttons,\n  // not an array of another array of buttons\n  if (Array.isArray(element.buttons[0])) {\n    element.buttons = element.buttons[0]\n  }\n  return element\n}\n"],"names":["styled","COLORS","WEBCHAT","renderComponent","Button","ElementContainer","Element","props","renderBrowser","renderNode","elementProps","element","Object","c","Array","b","bb"],"mappings":";;;;;;;;;;;;AACsC;AAEQ;AACC;AACR;AAEvC,MAAMK,gBAAgBA,GAAGL,qBAAU,CAAC;;;SAG3B,EAAEE,8BAA8B,CAAC;gBAC1B,EAAEA,qCAAqC,CAAC;;oBAEpC,EAAED,qBAAqB,CAAC;;;AAG5C,CAAC;AAMM,MAAMK,OAAOA,GAAG,CAACC;IACtB,MAAMC,gBAAgB,kBACpB,IAACH,gBAAgBA;sBAAEE,MAAM,QAAQ;;IAGnC,mBAAmB;IACnB,MAAME,aAAa,kBAAM,IAAC;sBAASF,MAAM,QAAQ;;IAEjD,OAAOJ,eAAeA,CAAC;QAAEK;QAAeC;IAAW;AACrD,EAAC;AAEDH,OAAOA,CAAC,SAAS,GAAGI,CAAAA;IAClB,MAAMC,UAAUC,OAAO,MAAM,CAC3B,CAAC,MACEF,aAAa,QAAQ,CACrB,MAAM,CAACG,CAAAA,IAAKA,GAAG,MAAM,SAAST,WAAW,EACzC,GAAG,CAACS,CAAAA,IAAKA,GAAG,MAAM,YAAYA,EAAE,KAAK;IAE1C,yEAAyE;IACzE,oFAAoF;IACpFF,QAAQ,OAAO,GAAG;WACbD,aAAa,QAAQ,CACrB,MAAM,CAACG,CAAAA;YACN,IAAIC,MAAM,OAAO,CAACD,IAAI;gBACpB,OAAO;YACT;YACA,OAAOA,GAAG,MAAM,SAAST,WAAW;QACtC,GACC,GAAG,CAACW,CAAAA;YACH,IAAID,MAAM,OAAO,CAACC,IAAI;gBACpBA,EAAE,GAAG,CAACC,CAAAA,KAAMA,IAAI,MAAM,YAAYA,GAAG,KAAK,GAAG;YAC/C;YACA,OAAOD,GAAG,MAAM,UAAUA,EAAE,KAAK,EAAE;QACrC;KACH;IACD,mGAAmG;IACnG,oGAAoG;IACpG,2CAA2C;IAC3C,IAAID,MAAM,OAAO,CAACH,QAAQ,OAAO,CAAC,EAAE,GAAG;QACrCA,QAAQ,OAAO,GAAGA,QAAQ,OAAO,CAAC,EAAE;IACtC;IACA,OAAOA;AACT"}

package/lib/components/handoff.d.ts

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

package/lib/components/handoff.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useState } from "react";
+import styled_components from "styled-components";
+import { COLORS } from "../constants.js";
+import { WebchatContext } from "../webchat/context/index.js";
+
+
+
+
+
+
+
+
+
+
+
+const Container = styled_components.div`
+  display: flex;
+  font-family: inherit;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+`;
+const TransferredContainer = styled_components.div`
+  text-align: center;
+  white-space: normal;
+`;
+const EndedContainer = styled_components.div`
+  text-align: center;
+  white-space: normal;
+`;
+const StyledButton = styled_components.button`
+  max-width: 60%;
+  padding: 12px 24px;
+  background-color: ${COLORS.SOLID_WHITE};
+  border: none;
+  border-radius: 4px;
+  margin-top: 8px;
+  cursor: pointer;
+`;
+const Handoff = (_props)=>{
+    const { resolveCase } = useContext(WebchatContext);
+    const [state, setState] = useState({
+        showContinue: true
+    });
+    const continueClick = ()=>{
+        setState({
+            showContinue: false
+        });
+        resolveCase();
+    };
+    const bgColor = state.showContinue ? COLORS.FRINGY_FLOWER_GREEN : COLORS.TASMAN_GRAY;
+    const fontColor = state.showContinue ? COLORS.APPLE_GREEN : COLORS.CACTUS_GREEN;
+    return /*#__PURE__*/ jsxs(Container, {
+        style: {
+            color: fontColor,
+            backgroundColor: bgColor
+        },
+        children: [
+            state.showContinue ? /*#__PURE__*/ jsx(TransferredContainer, {
+                children: "Conversation transferred to a human agent..."
+            }) : /*#__PURE__*/ jsx(EndedContainer, {
+                children: "Human handoff ended"
+            }),
+            state.showContinue && /*#__PURE__*/ jsx(StyledButton, {
+                onClick: continueClick,
+                children: "Continue"
+            })
+        ]
+    });
+};
+
+export { Handoff };
+
+//# sourceMappingURL=handoff.js.map