@botonic/react 0.22.0-alpha.0 → 0.22.0-alpha.1

package/lib/esm/components/reply.js

@@ -0,0 +1,52 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { COLORS, WEBCHAT } from '../constants';
+import { WebchatContext } from '../contexts';
+import { renderComponent } from '../util/react';
+const StyledButton = styled.button `
+  width: 100%;
+  padding: 4px 8px;
+  font-family: inherit;
+  border-radius: 8px;
+  cursor: pointer;
+  outline: 0;
+`;
+export const Reply = props => {
+    const { sendText, getThemeProperty } = useContext(WebchatContext);
+    const handleClick = event => {
+        event.preventDefault();
+        if (props.children) {
+            let payload = props.payload;
+            if (props.path)
+                payload = `__PATH_PAYLOAD__${props.path}`;
+            sendText(props.children, payload);
+        }
+    };
+    const renderBrowser = () => {
+        const replyStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.replyStyle);
+        const CustomReply = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customReply);
+        if (CustomReply) {
+            return (<div onClick={e => handleClick(e)}>
+          <CustomReply>{props.children}</CustomReply>
+        </div>);
+        }
+        return (<StyledButton style={Object.assign({ border: `1px solid ${getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor, COLORS.BOTONIC_BLUE)}`, color: getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor, COLORS.BOTONIC_BLUE) }, replyStyle)} onClick={e => handleClick(e)}>
+        {props.children}
+      </StyledButton>);
+    };
+    const renderNode = () => {
+        if (props.path) {
+            const payload = `__PATH_PAYLOAD__${props.path}`;
+            return <reply payload={payload}>{props.children}</reply>;
+        }
+        return <reply payload={props.payload}>{props.children}</reply>;
+    };
+    return renderComponent({ renderBrowser, renderNode });
+};
+Reply.serialize = replyProps => {
+    let payload = replyProps.payload;
+    if (replyProps.path)
+        payload = `__PATH_PAYLOAD__${replyProps.path}`;
+    return { reply: { title: replyProps.children, payload } };
+};
+//# sourceMappingURL=reply.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"reply.js","sourceRoot":"src/","sources":["components/reply.jsx"],"names":[],"mappings":"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"}

package/lib/esm/components/share-button.d.ts

@@ -0,0 +1 @@
+export function ShareButton(props: any): any;

package/lib/esm/components/share-button.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { renderComponent } from '../util/react';
+export const ShareButton = props => {
+    const renderBrowser = () => null;
+    const renderNode = () => (<button type='element_share'>
+      <pre dangerouslySetInnerHTML={{ __html: JSON.stringify(props.payload) }}/>
+    </button>);
+    return renderComponent({ renderBrowser, renderNode });
+};
+//# sourceMappingURL=share-button.js.map

package/lib/esm/components/share-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"share-button.js","sourceRoot":"src/","sources":["components/share-button.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE;IACjC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;IAChC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACvB,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAC1B;MAAA,CAAC,GAAG,CACF,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,EAEvE;IAAA,EAAE,MAAM,CAAC,CACV,CAAA;IAED,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA"}

package/lib/esm/components/subtitle.d.ts

@@ -0,0 +1,6 @@
+export function Subtitle(props: any): any;
+export namespace Subtitle {
+    function serialize(subtitleProps: any): {
+        subtitle: any;
+    };
+}

package/lib/esm/components/subtitle.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../constants';
+import { renderComponent } from '../util/react';
+const SubtitleContainer = styled.div `
+  font-size: 12px;
+  padding: 0px 15px 10px 15px;
+  color: ${COLORS.MID_GRAY};
+`;
+export const Subtitle = props => {
+    const renderBrowser = () => (<SubtitleContainer style={Object.assign({}, props.style)}>
+      {props.children}
+    </SubtitleContainer>);
+    const renderNode = () => <desc>{props.children}</desc>;
+    return renderComponent({ renderBrowser, renderNode });
+};
+Subtitle.serialize = subtitleProps => {
+    return { subtitle: subtitleProps.children };
+};
+//# sourceMappingURL=subtitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subtitle.js","sourceRoot":"src/","sources":["components/subtitle.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;WAGzB,MAAM,CAAC,QAAQ;CACzB,CAAA;AACD,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,EAAE;IAC9B,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAC1B,CAAC,iBAAiB,CAChB,KAAK,CAAC,mBACD,KAAK,CAAC,KAAK,EACd,CAEF;MAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAA;IACD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAA;IAEtD,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA;AAED,QAAQ,CAAC,SAAS,GAAG,aAAa,CAAC,EAAE;IACnC,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAAE,CAAA;AAC7C,CAAC,CAAA"}

package/lib/esm/components/text.d.ts

@@ -0,0 +1,8 @@
+export function Text(props: TextProps): JSX.Element;
+export namespace Text {
+    export { serialize };
+}
+declare function serialize(textProps: any): {
+    text: any;
+};
+export {};

package/lib/esm/components/text.js

@@ -0,0 +1,45 @@
+import { INPUT } from '@botonic/core';
+import React, { Children } from 'react';
+import { mapObjectNonBooleanValues } from '../util/react';
+import { serializeMarkdown, toMarkdownChildren } from './markdown';
+import { Message } from './message';
+const serializeText = children => {
+    children = Array.isArray(children) ? children : [children];
+    const text = children
+        .filter(e => !e.type)
+        .map(e => {
+        if (Array.isArray(e))
+            return serializeText(e);
+        else
+            return String(e);
+    })
+        .join('');
+    return text;
+};
+const serialize = textProps => {
+    if (!textProps.markdown)
+        return {
+            text: serializeText(textProps.children),
+        };
+    return { text: serializeMarkdown(textProps.children) };
+};
+/**
+ *
+ * @param {TextProps} props
+ * @returns {JSX.Element}
+ */
+export const Text = props => {
+    const defaultTextProps = {
+        markdown: props.markdown === undefined ? true : props.markdown,
+    };
+    const textProps = mapObjectNonBooleanValues(Object.assign(Object.assign(Object.assign({}, props), defaultTextProps), { children: Children.toArray(props.children) }));
+    if (!textProps.markdown)
+        return (<Message json={serialize(textProps)} {...textProps} type={INPUT.TEXT}>
+        {textProps.children}
+      </Message>);
+    return (<Message json={serialize(textProps)} {...textProps} type={INPUT.TEXT}>
+      {toMarkdownChildren(textProps.children)}
+    </Message>);
+};
+Text.serialize = serialize;
+//# sourceMappingURL=text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"src/","sources":["components/text.jsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,MAAM,aAAa,GAAG,QAAQ,CAAC,EAAE;IAC/B,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC1D,MAAM,IAAI,GAAG,QAAQ;SAClB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;SACpB,GAAG,CAAC,CAAC,CAAC,EAAE;QACP,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YAAE,OAAO,aAAa,CAAC,CAAC,CAAC,CAAA;;YACxC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAA;IACvB,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAA;IACX,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,SAAS,CAAC,EAAE;IAC5B,IAAI,CAAC,SAAS,CAAC,QAAQ;QACrB,OAAO;YACL,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC;SACxC,CAAA;IACH,OAAO,EAAE,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAA;AACxD,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE;IAC1B,MAAM,gBAAgB,GAAG;QACvB,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ;KAC/D,CAAA;IACD,MAAM,SAAS,GAAG,yBAAyB,+CACtC,KAAK,GACL,gBAAgB,GAChB,EAAE,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,EACjD,CAAA;IACF,IAAI,CAAC,SAAS,CAAC,QAAQ;QACrB,OAAO,CACL,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CACnE;QAAA,CAAC,SAAS,CAAC,QAAQ,CACrB;MAAA,EAAE,OAAO,CAAC,CACX,CAAA;IACH,OAAO,CACL,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CACnE;MAAA,CAAC,kBAAkB,CAAC,SAAS,CAAC,QAAQ,CAAC,CACzC;IAAA,EAAE,OAAO,CAAC,CACX,CAAA;AACH,CAAC,CAAA;AAED,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA"}

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

@@ -0,0 +1,10 @@
+export function resolveMessageTimestamps(getThemeFn: any, messageTimestampEnabled: any): {
+    timestampsEnabled: boolean;
+    getFormattedTimestamp: any;
+    timestampStyle: any;
+};
+export function MessageTimestamp({ timestamp, style, isfromuser }: {
+    timestamp: any;
+    style: any;
+    isfromuser: any;
+}): JSX.Element;

package/lib/esm/components/timestamps.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../constants';
+export const resolveMessageTimestamps = (getThemeFn, messageTimestampEnabled) => {
+    const timestampsFormat = getThemeFn('message.timestamps.format');
+    const timestampStyle = getThemeFn('message.timestamps.style');
+    const timestampsEnabled = Boolean(messageTimestampEnabled !== undefined
+        ? messageTimestampEnabled
+        : getThemeFn('message.timestamps.enable', 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 TimestampContainer = styled.div `
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+`;
+const TimestampText = styled.div `
+  @import url('https://fonts.googleapis.com/css?family=Lato');
+  font-family: Lato;
+  font-size: 10px;
+  color: ${COLORS.SOLID_BLACK};
+  width: 100%;
+  text-align: ${props => (props.isfromuser ? 'right' : 'left')};
+  padding: ${props => (props.isfromuser ? '0px 15px' : '0px 50px')};
+  margin-bottom: 5px;
+`;
+export const MessageTimestamp = ({ timestamp, style, isfromuser }) => {
+    const classSufix = isfromuser ? 'user' : 'bot';
+    return (<TimestampContainer className={`botonic-timestamp-${classSufix}`}>
+      <TimestampText isfromuser={isfromuser} style={Object.assign({}, style)}>
+        {timestamp}
+      </TimestampText>
+    </TimestampContainer>);
+};
+//# sourceMappingURL=timestamps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timestamps.js","sourceRoot":"src/","sources":["components/timestamps.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,UAAU,EACV,uBAAuB,EACvB,EAAE;IACF,MAAM,gBAAgB,GAAG,UAAU,CAAC,2BAA2B,CAAC,CAAA;IAChE,MAAM,cAAc,GAAG,UAAU,CAAC,0BAA0B,CAAC,CAAA;IAC7D,MAAM,iBAAiB,GAAG,OAAO,CAC/B,uBAAuB,KAAK,SAAS;QACnC,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CACR,2BAA2B,EAC3B,OAAO,CAAC,cAAc,CAAC,IAAI,OAAO,CAAC,gBAAgB,CAAC,IAAI,KAAK,CAC9D,CACN,CAAA;IACD,MAAM,sBAAsB,GAAG;QAC7B,KAAK,EAAE,OAAO;QACd,GAAG,EAAE,SAAS;QACd,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,SAAS;KAClB,CAAA;IACD,MAAM,qBAAqB,GACzB,CAAC,gBAAgB,IAAI,gBAAgB,EAAE,CAAC;QACxC,IAAI,IAAI,EAAE,CAAC,cAAc,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAA;IAC9D,OAAO;QACL,iBAAiB;QACjB,qBAAqB;QACrB,cAAc;KACf,CAAA;AACH,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;WAIrB,MAAM,CAAC,WAAW;;gBAEb,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;aACjD,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;;CAEjE,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;IACnE,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAA;IAC9C,OAAO,CACL,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,qBAAqB,UAAU,EAAE,CAAC,CAC/D;MAAA,CAAC,aAAa,CACZ,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,mBACD,KAAK,EACR,CAEF;QAAA,CAAC,SAAS,CACZ;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,kBAAkB,CAAC,CACtB,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/components/title.d.ts

@@ -0,0 +1,6 @@
+export function Title(props: any): any;
+export namespace Title {
+    function serialize(titleProps: any): {
+        title: any;
+    };
+}

package/lib/esm/components/title.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+import { renderComponent } from '../util/react';
+const TitleContainer = styled.div `
+  font-size: 14px;
+  padding: 10px 15px;
+`;
+export const Title = props => {
+    const renderBrowser = () => (<TitleContainer style={Object.assign({}, props.style)}>{props.children}</TitleContainer>);
+    const renderNode = () => <title>{props.children}</title>;
+    return renderComponent({ renderBrowser, renderNode });
+};
+Title.serialize = titleProps => {
+    return { title: titleProps.children };
+};
+//# sourceMappingURL=title.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","sourceRoot":"src/","sources":["components/title.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGhC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE;IAC3B,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAC1B,CAAC,cAAc,CAAC,KAAK,CAAC,mBAAM,KAAK,CAAC,KAAK,EAAG,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC,CAC7E,CAAA;IACD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAA;IAExD,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA;AAED,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC,EAAE;IAC7B,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,QAAQ,EAAE,CAAA;AACvC,CAAC,CAAA"}

package/lib/esm/components/video.d.ts

@@ -0,0 +1,8 @@
+export function Video(props: any): JSX.Element;
+export namespace Video {
+    export { serialize };
+}
+declare function serialize(videoProps: any): {
+    video: any;
+};
+export {};

package/lib/esm/components/video.js

@@ -0,0 +1,29 @@
+import { INPUT, isBrowser } from '@botonic/core';
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS, ROLES } from '../constants';
+import { staticAsset } from '../util/environment';
+import { Message } from './message';
+const StyledVideo = styled.video `
+  background-color: ${COLORS.SOLID_BLACK_ALPHA_0_5};
+  border-radius: 8px;
+  max-height: 180px;
+  max-width: 300px;
+  margin: 10px;
+`;
+const serialize = videoProps => {
+    return { video: videoProps.src };
+};
+export const Video = props => {
+    props = Object.assign(Object.assign({}, props), { src: staticAsset(props.src) });
+    let content = props.children;
+    if (isBrowser())
+        content = (<StyledVideo controls>
+        <source src={props.src}/>
+      </StyledVideo>);
+    return (<Message role={ROLES.VIDEO_MESSAGE} json={serialize(props)} {...props} type={INPUT.VIDEO}>
+      {content}
+    </Message>);
+};
+Video.serialize = serialize;
+//# sourceMappingURL=video.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"video.js","sourceRoot":"src/","sources":["components/video.jsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;sBACV,MAAM,CAAC,qBAAqB;;;;;CAKjD,CAAA;AAED,MAAM,SAAS,GAAG,UAAU,CAAC,EAAE;IAC7B,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,EAAE,CAAA;AAClC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE;IAC3B,KAAK,mCAAQ,KAAK,KAAE,GAAG,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,GAAE,CAAA;IACjD,IAAI,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAA;IAC5B,IAAI,SAAS,EAAE;QACb,OAAO,GAAG,CACR,CAAC,WAAW,CAAC,QAAQ,CACnB;QAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EACzB;MAAA,EAAE,WAAW,CAAC,CACf,CAAA;IACH,OAAO,CACL,CAAC,OAAO,CACN,IAAI,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAC1B,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CACvB,IAAI,KAAK,CAAC,CACV,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAElB;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,OAAO,CAAC,CACX,CAAA;AACH,CAAC,CAAA;AAED,KAAK,CAAC,SAAS,GAAG,SAAS,CAAA"}

package/lib/esm/components/webchat-settings.d.ts

@@ -0,0 +1,10 @@
+export function WebchatSettings({ theme, blockInputs, persistentMenu, enableEmojiPicker, enableAttachments, enableUserInput, enableAnimations, }: {
+    theme: any;
+    blockInputs: any;
+    persistentMenu: any;
+    enableEmojiPicker: any;
+    enableAttachments: any;
+    enableUserInput: any;
+    enableAnimations: any;
+}): any;
+export function normalizeWebchatSettings(settings: any): any;

package/lib/esm/components/webchat-settings.js

@@ -0,0 +1,72 @@
+import { INPUT } from '@botonic/core';
+import React, { useContext } from 'react';
+import { WebchatContext } from '../contexts';
+import { renderComponent } from '../util/react';
+import { stringifyWithRegexs } from '../util/regexs';
+export const WebchatSettings = ({ theme, blockInputs, persistentMenu, enableEmojiPicker, enableAttachments, enableUserInput, enableAnimations, }) => {
+    const renderBrowser = () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { updateWebchatDevSettings } = useContext(WebchatContext);
+        updateWebchatDevSettings({
+            theme,
+            blockInputs,
+            persistentMenu,
+            enableEmojiPicker,
+            enableAttachments,
+            enableUserInput,
+            enableAnimations,
+        });
+        return null;
+    };
+    const renderNode = () => {
+        const updatedTheme = normalizeWebchatSettings({
+            theme,
+            blockInputs,
+            persistentMenu,
+            enableEmojiPicker,
+            enableAttachments,
+            enableUserInput,
+            enableAnimations,
+        });
+        return (<message type={INPUT.WEBCHAT_SETTINGS} settings={stringifyWithRegexs({ theme: updatedTheme })}></message>);
+    };
+    return renderComponent({ renderBrowser, renderNode });
+};
+export const normalizeWebchatSettings = settings => {
+    let { theme, blockInputs, persistentMenu, enableEmojiPicker, enableAttachments, enableUserInput, enableAnimations, } = settings;
+    if (!theme)
+        theme = {};
+    if (!theme.userInput)
+        theme.userInput = {};
+    if (!theme.animations)
+        theme.animations = {};
+    if (persistentMenu !== undefined) {
+        if (!theme.userInput.persistentMenu)
+            theme.userInput.persistentMenu = {};
+        theme.userInput.persistentMenu = persistentMenu;
+    }
+    if (enableEmojiPicker !== undefined) {
+        if (!theme.userInput.emojiPicker)
+            theme.userInput.emojiPicker = {};
+        theme.userInput.emojiPicker.enable = enableEmojiPicker;
+    }
+    if (enableAttachments !== undefined) {
+        if (!theme.userInput.attachments)
+            theme.userInput.attachments = {};
+        theme.userInput.attachments.enable = enableAttachments;
+    }
+    if (enableUserInput !== undefined) {
+        if (!theme.userInput.enable)
+            theme.userInput.enable = {};
+        theme.userInput.enable = enableUserInput;
+    }
+    if (enableAnimations !== undefined) {
+        if (!theme.animations.enable)
+            theme.animations.enable = {};
+        theme.animations.enable = enableAnimations;
+    }
+    if (blockInputs !== undefined)
+        theme.userInput.blockInputs = blockInputs;
+    return theme;
+};
+//# sourceMappingURL=webchat-settings.js.map

package/lib/esm/components/webchat-settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat-settings.js","sourceRoot":"src/","sources":["components/webchat-settings.jsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,GACjB,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,sDAAsD;QACtD,MAAM,EAAE,wBAAwB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;QAC/D,wBAAwB,CAAC;YACvB,KAAK;YACL,WAAW;YACX,cAAc;YACd,iBAAiB;YACjB,iBAAiB;YACjB,eAAe;YACf,gBAAgB;SACjB,CAAC,CAAA;QACF,OAAO,IAAI,CAAA;IACb,CAAC,CAAA;IACD,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,MAAM,YAAY,GAAG,wBAAwB,CAAC;YAC5C,KAAK;YACL,WAAW;YACX,cAAc;YACd,iBAAiB;YACjB,iBAAiB;YACjB,eAAe;YACf,gBAAgB;SACjB,CAAC,CAAA;QACF,OAAO,CACL,CAAC,OAAO,CACN,IAAI,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAC7B,QAAQ,CAAC,CAAC,mBAAmB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC,CACxD,EAAE,OAAO,CAAC,CACZ,CAAA;IACH,CAAC,CAAA;IACD,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,wBAAwB,GAAG,QAAQ,CAAC,EAAE;IACjD,IAAI,EACF,KAAK,EACL,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,GACjB,GAAG,QAAQ,CAAA;IACZ,IAAI,CAAC,KAAK;QAAE,KAAK,GAAG,EAAE,CAAA;IACtB,IAAI,CAAC,KAAK,CAAC,SAAS;QAAE,KAAK,CAAC,SAAS,GAAG,EAAE,CAAA;IAC1C,IAAI,CAAC,KAAK,CAAC,UAAU;QAAE,KAAK,CAAC,UAAU,GAAG,EAAE,CAAA;IAC5C,IAAI,cAAc,KAAK,SAAS,EAAE;QAChC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc;YAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,EAAE,CAAA;QACxE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,cAAc,CAAA;KAChD;IACD,IAAI,iBAAiB,KAAK,SAAS,EAAE;QACnC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW;YAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,EAAE,CAAA;QAClE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,GAAG,iBAAiB,CAAA;KACvD;IACD,IAAI,iBAAiB,KAAK,SAAS,EAAE;QACnC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW;YAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,EAAE,CAAA;QAClE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,GAAG,iBAAiB,CAAA;KACvD;IACD,IAAI,eAAe,KAAK,SAAS,EAAE;QACjC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM;YAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,EAAE,CAAA;QACxD,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,eAAe,CAAA;KACzC;IACD,IAAI,gBAAgB,KAAK,SAAS,EAAE;QAClC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM;YAAE,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,EAAE,CAAA;QAC1D,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,gBAAgB,CAAA;KAC3C;IACD,IAAI,WAAW,KAAK,SAAS;QAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;IACxE,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/lib/esm/components/whatsapp-template.d.ts

@@ -0,0 +1 @@
+export function WhatsappTemplate(props: any): any;

package/lib/esm/components/whatsapp-template.js

@@ -0,0 +1,21 @@
+import { INPUT } from '@botonic/core';
+import React from 'react';
+import { renderComponent } from '../util/react';
+import { Message } from './message';
+const serialize = whatsappTemplateProps => {
+    return { text: whatsappTemplateProps };
+};
+export const WhatsappTemplate = props => {
+    const renderBrowser = () => {
+        // Return a dummy message for browser
+        const message = `Template ${props.name} with namespace ${props.namespace} would be sent to the user.`;
+        return (<Message json={serialize(message)} {...props} type={INPUT.TEXT}>
+        {message}
+      </Message>);
+    };
+    const renderNode = () => {
+        return (<message {...props} header={props.header && JSON.stringify(props.header)} body={props.body && JSON.stringify(props.body)} footer={props.footer && JSON.stringify(props.footer)} type={INPUT.WHATSAPP_TEMPLATE}/>);
+    };
+    return renderComponent({ renderBrowser, renderNode });
+};
+//# sourceMappingURL=whatsapp-template.js.map

package/lib/esm/components/whatsapp-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-template.js","sourceRoot":"src/","sources":["components/whatsapp-template.jsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,MAAM,SAAS,GAAG,qBAAqB,CAAC,EAAE;IACxC,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE,CAAA;AACxC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,EAAE;IACtC,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,qCAAqC;QACrC,MAAM,OAAO,GAAG,YAAY,KAAK,CAAC,IAAI,mBAAmB,KAAK,CAAC,SAAS,6BAA6B,CAAA;QACrG,OAAO,CACL,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAC7D;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,OAAO,CAAC,CACX,CAAA;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO,CACL,CAAC,OAAO,CACN,IAAI,KAAK,CAAC,CACV,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CACrD,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAC/C,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CACrD,IAAI,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,EAC9B,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA"}

package/lib/esm/constants.d.ts

@@ -0,0 +1,168 @@
+export namespace SENDERS {
+    const bot: string;
+    const user: string;
+}
+export namespace COLORS {
+    const APPLE_GREEN: string;
+    const BLEACHED_CEDAR_PURPLE: string;
+    const BOTONIC_BLUE: string;
+    const CACTUS_GREEN: string;
+    const CONCRETE_WHITE: string;
+    const CURIOUS_BLUE: string;
+    const DAINTREE_BLUE: string;
+    const ERROR_RED: string;
+    const FRINGY_FLOWER_GREEN: string;
+    const GRAY: string;
+    const LIGHT_GRAY: string;
+    const MID_GRAY: string;
+    const PIGEON_POST_BLUE_ALPHA_0_5: string;
+    const SCORPION_GRAY: string;
+    const SEASHELL_WHITE: string;
+    const SILVER: string;
+    const SOLID_BLACK_ALPHA_0_2: string;
+    const SOLID_BLACK_ALPHA_0_5: string;
+    const SOLID_BLACK: string;
+    const SOLID_WHITE_ALPHA_0_2: string;
+    const SOLID_WHITE_ALPHA_0_8: string;
+    const SOLID_WHITE: string;
+    const TASMAN_GRAY: string;
+    const TRANSPARENT: string;
+    const WILD_SAND_WHITE: string;
+}
+export namespace WEBCHAT {
+    namespace DEFAULTS {
+        export const WIDTH: number;
+        export const HEIGHT: number;
+        export const TITLE: string;
+        export { BotonicLogo as LOGO };
+        export const PLACEHOLDER: string;
+        export const FONT_FAMILY: string;
+        export const BORDER_RADIUS_TOP_CORNERS: string;
+        export const ELEMENT_WIDTH: number;
+        export const ELEMENT_MARGIN_RIGHT: number;
+        export const STORAGE_KEY: string;
+        export const HOST_ID: string;
+        export const ID: string;
+        export const BUTTON_AUTO_DISABLE: boolean;
+        export namespace BUTTON_DISABLED_STYLE {
+            const opacity: number;
+            const cursor: string;
+            const pointerEvents: string;
+        }
+    }
+    namespace SELECTORS {
+        const SCROLLABLE_CONTENT: string;
+        const SIMPLEBAR_CONTENT: string;
+        const SIMPLEBAR_WRAPPER: string;
+    }
+    namespace CUSTOM_PROPERTIES {
+        const enableAnimations: string;
+        const markdownStyle: string;
+        const scrollbar: string;
+        const imagePreviewer: string;
+        const mobileBreakpoint: string;
+        const mobileStyle: string;
+        const webviewHeaderStyle: string;
+        const webviewStyle: string;
+        const brandColor: string;
+        const brandImage: string;
+        const customHeader: string;
+        const headerImage: string;
+        const headerStyle: string;
+        const headerSubtitle: string;
+        const headerTitle: string;
+        const botMessageBackground: string;
+        const botMessageBlobTick: string;
+        const botMessageBlobTickStyle: string;
+        const botMessageBlobWidth: string;
+        const botMessageBorderColor: string;
+        const botMessageImage: string;
+        const botMessageImageStyle: string;
+        const botMessageStyle: string;
+        const customMessageTypes: string;
+        const messageStyle: string;
+        const userMessageBackground: string;
+        const userMessageBlobTick: string;
+        const userMessageBlobTickStyle: string;
+        const userMessageBorderColor: string;
+        const userMessageStyle: string;
+        const enableMessageTimestamps: string;
+        const messageTimestampsFormat: string;
+        const messageTimestampsStyle: string;
+        const customIntro: string;
+        const introImage: string;
+        const introStyle: string;
+        const buttonHoverBackground: string;
+        const buttonHoverTextColor: string;
+        const buttonMessageType: string;
+        const buttonStyle: string;
+        const buttonDisabledStyle: string;
+        const buttonAutoDisable: string;
+        const buttonStyleBackground: string;
+        const buttonStyleColor: string;
+        const customButton: string;
+        const alignReplies: string;
+        const customReply: string;
+        const replyStyle: string;
+        const wrapReplies: string;
+        const customTrigger: string;
+        const triggerButtonImage: string;
+        const triggerButtonStyle: string;
+        const blockInputs: string;
+        const documentDownload: string;
+        const customMenuButton: string;
+        const customPersistentMenu: string;
+        const customEmojiPicker: string;
+        const customAttachments: string;
+        const customSendButton: string;
+        const darkBackgroundMenu: string;
+        const enableAttachments: string;
+        const enableEmojiPicker: string;
+        const enableSendButton: string;
+        const enableUserInput: string;
+        const persistentMenu: string;
+        const textPlaceholder: string;
+        const userInputBoxStyle: string;
+        const userInputStyle: string;
+        const coverComponent: string;
+        const coverComponentProps: string;
+        const customCarouselLeftArrow: string;
+        const customCarouselRightArrow: string;
+        const enableCarouselArrows: string;
+    }
+}
+export namespace MIME_WHITELIST {
+    const audio: string[];
+    const document: string[];
+    const image: string[];
+    const video: string[];
+}
+export const MAX_ALLOWED_SIZE_MB: 10;
+export namespace ROLES {
+    const ATTACHMENT_ICON: string;
+    const EMOJI_PICKER_ICON: string;
+    const EMOJI_PICKER: string;
+    const HEADER: string;
+    const MESSAGE_LIST: string;
+    const PERSISTENT_MENU_ICON: string;
+    const PERSISTENT_MENU: string;
+    const SEND_BUTTON_ICON: string;
+    const WEBCHAT: string;
+    const TRIGGER_BUTTON: string;
+    const TYPING_INDICATOR: string;
+    const TEXT_BOX: string;
+    const WEBVIEW: string;
+    const WEBVIEW_HEADER: string;
+    const MESSAGE: string;
+    const IMAGE_MESSAGE: string;
+    const AUDIO_MESSAGE: string;
+    const VIDEO_MESSAGE: string;
+    const DOCUMENT_MESSAGE: string;
+    const RAW_MESSAGE: string;
+}
+export namespace COMPONENT_TYPE {
+    const TEXT: string;
+    const BUTTON: string;
+    const REPLY: string;
+    const CAROUSEL: string;
+}