@botonic/react 0.55.1 → 0.57.0-rslib-esm.0

package/lib/esm/webchat/custom-messages/rating/index.js

@@ -1,56 +1,105 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@botonic/core");
-const react_1 = require("react");
-const styled_components_1 = require("styled-components");
-const components_1 = require("../../../components");
-const context_1 = require("../../context");
-const rating_selector_1 = require("./rating-selector");
-const styles_1 = require("./styles");
-const types_1 = require("./types");
+import { jsx, jsxs } from "react/jsx-runtime";
+import { INPUT } from "@botonic/core";
+import { useContext, useState } from "react";
+import { ThemeContext } from "styled-components";
+import { Button, customMessage } from "../../../components/index.js";
+import { WebchatContext } from "../../context/index.js";
+import { RatingSelector } from "./rating-selector.js";
+import { MessageBubble } from "./styles.js";
+import { RatingType } from "./types.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 const ratingValues = {
-    [types_1.RatingType.Stars]: [
+    [RatingType.Stars]: [
         '⭐'.repeat(1),
         '⭐'.repeat(2),
         '⭐'.repeat(3),
         '⭐'.repeat(4),
-        '⭐'.repeat(5),
+        '⭐'.repeat(5)
     ],
-    [types_1.RatingType.Smileys]: ['😠', '🙁', '😐', '🙂', '😄'],
+    [RatingType.Smileys]: [
+        '😠',
+        '🙁',
+        '😐',
+        '🙂',
+        '😄'
+    ]
 };
-const CustomRatingMessage = props => {
+const CustomRatingMessage = (props)=>{
     const { payloads, messageText, buttonText, ratingType, id, valueSent } = props;
-    const { updateCustomMessageProps, sendInput } = (0, react_1.useContext)(context_1.WebchatContext);
-    const theme = (0, react_1.useContext)(styled_components_1.ThemeContext);
+    const { updateCustomMessageProps, sendInput } = useContext(WebchatContext);
+    const theme = useContext(ThemeContext);
     const color = theme?.brand?.color ?? '';
-    const [ratingValue, setRatingValue] = (0, react_1.useState)(valueSent ? valueSent : -1);
-    const [showRating, setShowRating] = (0, react_1.useState)(true);
-    const ratingChanged = (newRating) => {
+    const [ratingValue, setRatingValue] = useState(valueSent ? valueSent : -1);
+    const [showRating, setShowRating] = useState(true);
+    const ratingChanged = (newRating)=>{
         setRatingValue(newRating);
     };
-    const handleButtonSend = () => {
+    const handleButtonSend = ()=>{
         if (ratingValue === -1) {
             return;
         }
         const json = {
-            valueSent: ratingValue,
+            valueSent: ratingValue
         };
         updateCustomMessageProps(json, id);
         setShowRating(false);
         const payload = payloads[ratingValue - 1];
         const input = {
-            type: core_1.INPUT.POSTBACK,
+            type: INPUT.POSTBACK,
             payload,
-            referral: ratingValues[ratingType][ratingValue - 1],
+            referral: ratingValues[ratingType][ratingValue - 1]
         };
         void sendInput(input);
     };
     const disabled = ratingValue === -1;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'rating-message-container', children: [(0, jsx_runtime_1.jsxs)(styles_1.MessageBubble, { className: 'rating-message-bubble', children: [messageText, (0, jsx_runtime_1.jsx)(rating_selector_1.RatingSelector, { color: color, onRatingChange: ratingChanged, ratingValue: ratingValue, ratingType: ratingType, valueSent: valueSent })] }), !props?.valueSent && showRating && ((0, jsx_runtime_1.jsx)(components_1.Button, { autodisable: true, disabled: disabled, onClick: handleButtonSend, children: buttonText }))] }));
+    return /*#__PURE__*/ jsxs("div", {
+        className: "rating-message-container",
+        children: [
+            /*#__PURE__*/ jsxs(MessageBubble, {
+                className: "rating-message-bubble",
+                children: [
+                    messageText,
+                    /*#__PURE__*/ jsx(RatingSelector, {
+                        color: color,
+                        onRatingChange: ratingChanged,
+                        ratingValue: ratingValue,
+                        ratingType: ratingType,
+                        valueSent: valueSent
+                    })
+                ]
+            }),
+            !props?.valueSent && showRating && /*#__PURE__*/ jsx(Button, {
+                autodisable: true,
+                disabled: disabled,
+                onClick: handleButtonSend,
+                children: buttonText
+            })
+        ]
+    });
 };
-exports.default = (0, components_1.customMessage)({
+/* export default */ const rating = (customMessage({
     name: 'custom-rating',
-    component: CustomRatingMessage,
-});
+    component: CustomRatingMessage
+}));
+
+export default rating;
+
 //# sourceMappingURL=index.js.map

package/lib/esm/webchat/custom-messages/rating/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/webchat/custom-messages/rating/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"webchat/custom-messages/rating/index.js","sources":["../../../../../src/webchat/custom-messages/rating/index.tsx"],"sourcesContent":["import { INPUT, type InputType } from '@botonic/core'\nimport type React from 'react'\nimport { useContext, useState } from 'react'\nimport { ThemeContext } from 'styled-components'\n\nimport { Button, customMessage } from '../../../components'\nimport { WebchatContext } from '../../context'\nimport { RatingSelector } from './rating-selector'\nimport { MessageBubble } from './styles'\nimport { RatingType } from './types'\n\ninterface CustomRatingMessageProps {\n  payloads: string[]\n  messageText: string\n  buttonText: string\n  ratingType: RatingType\n  id?: string // This id not exist in local development\n  valueSent?: number\n}\n\nconst ratingValues = {\n  [RatingType.Stars]: [\n    '⭐'.repeat(1),\n    '⭐'.repeat(2),\n    '⭐'.repeat(3),\n    '⭐'.repeat(4),\n    '⭐'.repeat(5),\n  ],\n  [RatingType.Smileys]: ['😠', '🙁', '😐', '🙂', '😄'],\n} as const\n\nconst CustomRatingMessage: React.FC<CustomRatingMessageProps> = props => {\n  const { payloads, messageText, buttonText, ratingType, id, valueSent } = props\n  const { updateCustomMessageProps, sendInput } = useContext(WebchatContext)\n\n  const theme = useContext(ThemeContext)\n  const color = theme?.brand?.color ?? ''\n\n  const [ratingValue, setRatingValue] = useState(valueSent ? valueSent : -1)\n  const [showRating, setShowRating] = useState(true)\n\n  const ratingChanged = (newRating: number) => {\n    setRatingValue(newRating)\n  }\n\n  const handleButtonSend = () => {\n    if (ratingValue === -1) {\n      return\n    }\n\n    const json = {\n      valueSent: ratingValue,\n    }\n    updateCustomMessageProps(json, id)\n\n    setShowRating(false)\n    const payload = payloads[ratingValue - 1]\n\n    const input = {\n      type: INPUT.POSTBACK as InputType,\n      payload,\n      referral: ratingValues[ratingType][ratingValue - 1],\n    }\n    void sendInput(input)\n  }\n\n  const disabled = ratingValue === -1\n\n  return (\n    <div className='rating-message-container'>\n      <MessageBubble className='rating-message-bubble'>\n        {messageText}\n        <RatingSelector\n          color={color}\n          onRatingChange={ratingChanged}\n          ratingValue={ratingValue}\n          ratingType={ratingType}\n          valueSent={valueSent}\n        />\n      </MessageBubble>\n      {!props?.valueSent && showRating && (\n        <Button\n          autodisable={true}\n          disabled={disabled}\n          onClick={handleButtonSend}\n        >\n          {buttonText}\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport default customMessage({\n  name: 'custom-rating',\n  component: CustomRatingMessage,\n})\n"],"names":["INPUT","useContext","useState","ThemeContext","Button","customMessage","WebchatContext","RatingSelector","MessageBubble","RatingType","ratingValues","CustomRatingMessage","props","payloads","messageText","buttonText","ratingType","id","valueSent","updateCustomMessageProps","sendInput","theme","color","ratingValue","setRatingValue","showRating","setShowRating","ratingChanged","newRating","handleButtonSend","json","payload","input","disabled"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAqD;AAET;AACI;AAEW;AACb;AACI;AACV;AACJ;AAWpC,MAAMU,YAAYA,GAAG;IACnB,CAACD,gBAAgB,CAAC,EAAE;QAClB,IAAI,MAAM,CAAC;QACX,IAAI,MAAM,CAAC;QACX,IAAI,MAAM,CAAC;QACX,IAAI,MAAM,CAAC;QACX,IAAI,MAAM,CAAC;KACZ;IACD,CAACA,kBAAkB,CAAC,EAAE;QAAC;QAAM;QAAM;QAAM;QAAM;KAAK;AACtD;AAEA,MAAME,mBAAmBA,GAAuCC,CAAAA;IAC9D,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,UAAU,EAAEC,UAAU,EAAEC,EAAE,EAAEC,SAAS,EAAE,GAAGN;IACzE,MAAM,EAAEO,wBAAwB,EAAEC,SAAS,EAAE,GAAGnB,UAAUA,CAACK,cAAcA;IAEzE,MAAMe,QAAQpB,UAAUA,CAACE,YAAYA;IACrC,MAAMmB,QAAQD,OAAO,OAAO,SAAS;IAErC,MAAM,CAACE,aAAaC,eAAe,GAAGtB,QAAQA,CAACgB,YAAYA,YAAY,CAAC;IACxE,MAAM,CAACO,YAAYC,cAAc,GAAGxB,QAAQA,CAAC;IAE7C,MAAMyB,gBAAgB,CAACC;QACrBJ,eAAeI;IACjB;IAEA,MAAMC,mBAAmB;QACvB,IAAIN,gBAAgB,CAAC,GAAG;YACtB;QACF;QAEA,MAAMO,OAAO;YACX,WAAWP;QACb;QACAJ,yBAAyBW,MAAMb;QAE/BS,cAAc;QACd,MAAMK,UAAUlB,QAAQ,CAACU,cAAc,EAAE;QAEzC,MAAMS,QAAQ;YACZ,MAAMhC,cAAc;YACpB+B;YACA,UAAUrB,YAAY,CAACM,WAAW,CAACO,cAAc,EAAE;QACrD;QACA,KAAKH,UAAUY;IACjB;IAEA,MAAMC,WAAWV,gBAAgB,CAAC;IAElC,qBACE,KAAC;QAAI,WAAU;;0BACb,KAACf,aAAaA;gBAAC,WAAU;;oBACtBM;kCACD,IAACP,cAAcA;wBACb,OAAOe;wBACP,gBAAgBK;wBAChB,aAAaJ;wBACb,YAAYP;wBACZ,WAAWE;;;;YAGd,CAACN,OAAO,aAAaa,4BACpB,IAACrB,MAAMA;gBACL,aAAa;gBACb,UAAU6B;gBACV,SAASJ;0BAERd;;;;AAKX;AAEA,qCAAeV,aAAaA,CAAC;IAC3B,MAAM;IACN,WAAWM,mBAAmBA;AAChC,EAAE"}

package/lib/esm/webchat/custom-messages/rating/rating-selector.d.ts

@@ -1,4 +1,4 @@
-import { RatingType } from './types';
+import { RatingType } from './types.js';
 interface RatingSelectorProps {
     color: string;
     isSent?: boolean;

package/lib/esm/webchat/custom-messages/rating/rating-selector.js

@@ -1,26 +1,57 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RatingSelector = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the rating selector */
-/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the rating selector */
-const react_1 = require("react");
-const smileys_1 = require("./smileys");
-const stars_1 = require("./stars");
-const styles_1 = require("./styles");
-const types_1 = require("./types");
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Smileys } from "./smileys.js";
+import { Stars } from "./stars.js";
+import { RatingSelectorContainer } from "./styles.js";
+import { RatingType } from "./types.js";
+
+
+
+
+
+
+
+
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the rating selector */ /** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the rating selector */ 
+
+
+
+
 const NUMBER_OF_RATING_BUTTONS = 5;
-const RatingSelector = ({ color, isSent, onRatingChange, ratingValue, ratingType, valueSent, }) => {
-    const [hover, setHover] = (0, react_1.useState)(valueSent ? valueSent : -1);
-    const onHover = (ratingNumber) => {
+const RatingSelector = ({ color, isSent, onRatingChange, ratingValue, ratingType, valueSent })=>{
+    const [hover, setHover] = useState(valueSent ? valueSent : -1);
+    const onHover = (ratingNumber)=>{
         if (!valueSent) {
             setHover(ratingNumber);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(styles_1.RatingSelectorContainer, { isSent: isSent, children: Array.from({ length: NUMBER_OF_RATING_BUTTONS }, (_star, i) => {
+    return /*#__PURE__*/ jsx(RatingSelectorContainer, {
+        isSent: isSent,
+        children: Array.from({
+            length: NUMBER_OF_RATING_BUTTONS
+        }, (_star, i)=>{
             const ratingNumber = i + 1;
-            return ((0, jsx_runtime_1.jsxs)("div", { onMouseEnter: () => onHover(ratingNumber), onMouseLeave: () => onHover(ratingValue), onClick: () => onRatingChange(ratingNumber), children: [ratingType === types_1.RatingType.Stars && ((0, jsx_runtime_1.jsx)(stars_1.Stars, { color: color, ratingNumber: ratingNumber, hover: hover })), ratingType === types_1.RatingType.Smileys && ((0, jsx_runtime_1.jsx)(smileys_1.Smileys, { color: color, ratingNumber: ratingNumber, hover: hover }))] }, ratingNumber));
-        }) }));
+            return /*#__PURE__*/ jsxs("div", {
+                onMouseEnter: ()=>onHover(ratingNumber),
+                onMouseLeave: ()=>onHover(ratingValue),
+                onClick: ()=>onRatingChange(ratingNumber),
+                children: [
+                    ratingType === RatingType.Stars && /*#__PURE__*/ jsx(Stars, {
+                        color: color,
+                        ratingNumber: ratingNumber,
+                        hover: hover
+                    }),
+                    ratingType === RatingType.Smileys && /*#__PURE__*/ jsx(Smileys, {
+                        color: color,
+                        ratingNumber: ratingNumber,
+                        hover: hover
+                    })
+                ]
+            }, ratingNumber);
+        })
+    });
 };
-exports.RatingSelector = RatingSelector;
+
+export { RatingSelector };
+
 //# sourceMappingURL=rating-selector.js.map

package/lib/esm/webchat/custom-messages/rating/rating-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating-selector.js","sourceRoot":"","sources":["../../../../../src/webchat/custom-messages/rating/rating-selector.tsx"],"names":[],"mappings":";;;;AAAA,qHAAqH;AACrH,qHAAqH;AACrH,iCAAgC;AAEhC,uCAAmC;AACnC,mCAA+B;AAC/B,qCAAkD;AAClD,mCAAoC;AAEpC,MAAM,wBAAwB,GAAG,CAAC,CAAA;AAU3B,MAAM,cAAc,GAAG,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,UAAU,EACV,SAAS,GACW,EAAE,EAAE;IACxB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAS,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAEtE,MAAM,OAAO,GAAG,CAAC,YAAoB,EAAE,EAAE;QACvC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,QAAQ,CAAC,YAAY,CAAC,CAAA;QACxB,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,uBAAC,gCAAuB,IAAC,MAAM,EAAE,MAAM,YACpC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,wBAAwB,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YAC7D,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,CAAA;YAE1B,OAAO,CACL,iCAEE,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,EACzC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,YAAY,CAAC,aAE1C,UAAU,KAAK,kBAAU,CAAC,KAAK,IAAI,CAClC,uBAAC,aAAK,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,GAAI,CAClE,EACA,UAAU,KAAK,kBAAU,CAAC,OAAO,IAAI,CACpC,uBAAC,iBAAO,IACN,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,GACZ,CACH,KAdI,YAAY,CAeb,CACP,CAAA;QACH,CAAC,CAAC,GACsB,CAC3B,CAAA;AACH,CAAC,CAAA;AA3CY,QAAA,cAAc,kBA2C1B"}
+{"version":3,"file":"webchat/custom-messages/rating/rating-selector.js","sources":["../../../../../src/webchat/custom-messages/rating/rating-selector.tsx"],"sourcesContent":["/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the rating selector */\n/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the rating selector */\nimport { useState } from 'react'\n\nimport { Smileys } from './smileys'\nimport { Stars } from './stars'\nimport { RatingSelectorContainer } from './styles'\nimport { RatingType } from './types'\n\nconst NUMBER_OF_RATING_BUTTONS = 5\ninterface RatingSelectorProps {\n  color: string\n  isSent?: boolean\n  onRatingChange: (newRating: number) => void\n  ratingValue: number\n  ratingType: RatingType\n  valueSent?: number\n}\n\nexport const RatingSelector = ({\n  color,\n  isSent,\n  onRatingChange,\n  ratingValue,\n  ratingType,\n  valueSent,\n}: RatingSelectorProps) => {\n  const [hover, setHover] = useState<number>(valueSent ? valueSent : -1)\n\n  const onHover = (ratingNumber: number) => {\n    if (!valueSent) {\n      setHover(ratingNumber)\n    }\n  }\n\n  return (\n    <RatingSelectorContainer isSent={isSent}>\n      {Array.from({ length: NUMBER_OF_RATING_BUTTONS }, (_star, i) => {\n        const ratingNumber = i + 1\n\n        return (\n          <div\n            key={ratingNumber}\n            onMouseEnter={() => onHover(ratingNumber)}\n            onMouseLeave={() => onHover(ratingValue)}\n            onClick={() => onRatingChange(ratingNumber)}\n          >\n            {ratingType === RatingType.Stars && (\n              <Stars color={color} ratingNumber={ratingNumber} hover={hover} />\n            )}\n            {ratingType === RatingType.Smileys && (\n              <Smileys\n                color={color}\n                ratingNumber={ratingNumber}\n                hover={hover}\n              />\n            )}\n          </div>\n        )\n      })}\n    </RatingSelectorContainer>\n  )\n}\n"],"names":["useState","Smileys","Stars","RatingSelectorContainer","RatingType","NUMBER_OF_RATING_BUTTONS","RatingSelector","color","isSent","onRatingChange","ratingValue","ratingType","valueSent","hover","setHover","onHover","ratingNumber","Array","_star","i"],"mappings":";;;;;;;;;;;;;;AAAA,mHAAmH,GACnH,mHAAmH,GACnF;AAEG;AACJ;AACmB;AACd;AAEpC,MAAMK,wBAAwBA,GAAG;AAU1B,MAAMC,cAAcA,GAAG,CAAC,EAC7BC,KAAK,EACLC,MAAM,EACNC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,SAAS,EACW;IACpB,MAAM,CAACC,OAAOC,SAAS,GAAGd,QAAQA,CAASY,YAAYA,YAAY,CAAC;IAEpE,MAAMG,UAAU,CAACC;QACf,IAAI,CAACJ,WAAW;YACdE,SAASE;QACX;IACF;IAEA,qBACE,IAACb,uBAAuBA;QAAC,QAAQK;kBAC9BS,MAAM,IAAI,CAAC;YAAE,QAAQZ,wBAAwBA;QAAC,GAAG,CAACa,OAAOC;YACxD,MAAMH,eAAeG,IAAI;YAEzB,qBACE,KAAC;gBAEC,cAAc,IAAMJ,QAAQC;gBAC5B,cAAc,IAAMD,QAAQL;gBAC5B,SAAS,IAAMD,eAAeO;;oBAE7BL,eAAeP,gBAAgB,kBAC9B,IAACF,KAAKA;wBAAC,OAAOK;wBAAO,cAAcS;wBAAc,OAAOH;;oBAEzDF,eAAeP,kBAAkB,kBAChC,IAACH,OAAOA;wBACN,OAAOM;wBACP,cAAcS;wBACd,OAAOH;;;eAZNG;QAiBX;;AAGN,EAAC"}

package/lib/esm/webchat/custom-messages/rating/smileys.d.ts

@@ -1,2 +1,2 @@
-import type { RatingItemProps } from './types';
+import type { RatingItemProps } from './types.js';
 export declare const Smileys: ({ color, ratingNumber, hover }: RatingItemProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/esm/webchat/custom-messages/rating/smileys.js

@@ -1,19 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Smileys = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("./icons");
+import { jsx } from "react/jsx-runtime";
+import { FaceAngrySvg, FaceFrownSvg, FaceGrinBeamSvg, FaceMehSvg, FaceSmileSvg } from "./icons/index.js";
+
+
+
+
+
 const SMILEY_MAP = {
-    1: icons_1.FaceAngrySvg,
-    2: icons_1.FaceFrownSvg,
-    3: icons_1.FaceMehSvg,
-    4: icons_1.FaceSmileSvg,
-    5: icons_1.FaceGrinBeamSvg,
+    1: FaceAngrySvg,
+    2: FaceFrownSvg,
+    3: FaceMehSvg,
+    4: FaceSmileSvg,
+    5: FaceGrinBeamSvg
 };
-const Smileys = ({ color, ratingNumber, hover }) => {
+const Smileys = ({ color, ratingNumber, hover })=>{
     const isSelected = hover === ratingNumber;
     const SmileyComponent = SMILEY_MAP[ratingNumber];
-    return SmileyComponent ? ((0, jsx_runtime_1.jsx)(SmileyComponent, { color: color, selected: isSelected })) : null;
+    return SmileyComponent ? /*#__PURE__*/ jsx(SmileyComponent, {
+        color: color,
+        selected: isSelected
+    }) : null;
 };
-exports.Smileys = Smileys;
+
+export { Smileys };
+
 //# sourceMappingURL=smileys.js.map

package/lib/esm/webchat/custom-messages/rating/smileys.js.map

@@ -1 +1 @@
-{"version":3,"file":"smileys.js","sourceRoot":"","sources":["../../../../../src/webchat/custom-messages/rating/smileys.tsx"],"names":[],"mappings":";;;;AAAA,mCAMgB;AAGhB,MAAM,UAAU,GAAG;IACjB,CAAC,EAAE,oBAAY;IACf,CAAC,EAAE,oBAAY;IACf,CAAC,EAAE,kBAAU;IACb,CAAC,EAAE,oBAAY;IACf,CAAC,EAAE,uBAAe;CACV,CAAA;AAEH,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAmB,EAAE,EAAE;IACzE,MAAM,UAAU,GAAG,KAAK,KAAK,YAAY,CAAA;IACzC,MAAM,eAAe,GAAG,UAAU,CAAC,YAAuC,CAAC,CAAA;IAE3E,OAAO,eAAe,CAAC,CAAC,CAAC,CACvB,uBAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,GAAI,CACxD,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAPY,QAAA,OAAO,WAOnB"}
+{"version":3,"file":"webchat/custom-messages/rating/smileys.js","sources":["../../../../../src/webchat/custom-messages/rating/smileys.tsx"],"sourcesContent":["import {\n  FaceAngrySvg,\n  FaceFrownSvg,\n  FaceGrinBeamSvg,\n  FaceMehSvg,\n  FaceSmileSvg,\n} from './icons'\nimport type { RatingItemProps } from './types'\n\nconst SMILEY_MAP = {\n  1: FaceAngrySvg,\n  2: FaceFrownSvg,\n  3: FaceMehSvg,\n  4: FaceSmileSvg,\n  5: FaceGrinBeamSvg,\n} as const\n\nexport const Smileys = ({ color, ratingNumber, hover }: RatingItemProps) => {\n  const isSelected = hover === ratingNumber\n  const SmileyComponent = SMILEY_MAP[ratingNumber as keyof typeof SMILEY_MAP]\n\n  return SmileyComponent ? (\n    <SmileyComponent color={color} selected={isSelected} />\n  ) : null\n}\n"],"names":["FaceAngrySvg","FaceFrownSvg","FaceGrinBeamSvg","FaceMehSvg","FaceSmileSvg","SMILEY_MAP","Smileys","color","ratingNumber","hover","isSelected","SmileyComponent"],"mappings":";;;;;;AAMgB;AAGhB,MAAMK,UAAUA,GAAG;IACjB,GAAGL,YAAYA;IACf,GAAGC,YAAYA;IACf,GAAGE,UAAUA;IACb,GAAGC,YAAYA;IACf,GAAGF,eAAeA;AACpB;AAEO,MAAMI,OAAOA,GAAG,CAAC,EAAEC,KAAK,EAAEC,YAAY,EAAEC,KAAK,EAAmB;IACrE,MAAMC,aAAaD,UAAUD;IAC7B,MAAMG,kBAAkBN,UAAU,CAACG,aAAwC;IAE3E,OAAOG,gCACL,IAACA;QAAgB,OAAOJ;QAAO,UAAUG;SACvC;AACN,EAAC"}

package/lib/esm/webchat/custom-messages/rating/stars.d.ts

@@ -1,2 +1,2 @@
-import type { RatingItemProps } from './types';
+import type { RatingItemProps } from './types.js';
 export declare const Stars: ({ color, ratingNumber, hover }: RatingItemProps) => import("react/jsx-runtime").JSX.Element;

package/lib/esm/webchat/custom-messages/rating/stars.js

@@ -1,11 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stars = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const index_1 = require("./icons/index");
-const Stars = ({ color, ratingNumber, hover }) => {
+import { jsx } from "react/jsx-runtime";
+import { StarSvg } from "./icons/index.js";
+
+
+
+
+
+const Stars = ({ color, ratingNumber, hover })=>{
     const isSelected = hover >= ratingNumber;
-    return (0, jsx_runtime_1.jsx)(index_1.StarSvg, { color: color, selected: isSelected });
+    return /*#__PURE__*/ jsx(StarSvg, {
+        color: color,
+        selected: isSelected
+    });
 };
-exports.Stars = Stars;
+
+export { Stars };
+
 //# sourceMappingURL=stars.js.map

package/lib/esm/webchat/custom-messages/rating/stars.js.map

@@ -1 +1 @@
-{"version":3,"file":"stars.js","sourceRoot":"","sources":["../../../../../src/webchat/custom-messages/rating/stars.tsx"],"names":[],"mappings":";;;;AAAA,yCAAuC;AAGhC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAmB,EAAE,EAAE;IACvE,MAAM,UAAU,GAAG,KAAK,IAAI,YAAY,CAAA;IACxC,OAAO,uBAAC,eAAO,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,GAAI,CAAA;AACxD,CAAC,CAAA;AAHY,QAAA,KAAK,SAGjB"}
+{"version":3,"file":"webchat/custom-messages/rating/stars.js","sources":["../../../../../src/webchat/custom-messages/rating/stars.tsx"],"sourcesContent":["import { StarSvg } from './icons/index'\nimport type { RatingItemProps } from './types'\n\nexport const Stars = ({ color, ratingNumber, hover }: RatingItemProps) => {\n  const isSelected = hover >= ratingNumber\n  return <StarSvg color={color} selected={isSelected} />\n}\n"],"names":["StarSvg","Stars","color","ratingNumber","hover","isSelected"],"mappings":";;;;;;AAAuC;AAGhC,MAAMC,KAAKA,GAAG,CAAC,EAAEC,KAAK,EAAEC,YAAY,EAAEC,KAAK,EAAmB;IACnE,MAAMC,aAAaD,SAASD;IAC5B,qBAAO,IAACH,OAAOA;QAAC,OAAOE;QAAO,UAAUG;;AAC1C,EAAC"}

package/lib/esm/webchat/custom-messages/rating/styles.js

@@ -1,20 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RatingSelectorContainer = exports.MessageBubble = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+import styled_components from "styled-components";
+
+
+
 // TODO: Review how define all this styles
-exports.MessageBubble = styled_components_1.default.div `
+const MessageBubble = styled_components.div`
   margin: 0px 0px 5px 0px;
 `;
-exports.RatingSelectorContainer = styled_components_1.default.div `
+const RatingSelectorContainer = styled_components.div`
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 16px;
 
   & > div {
-    cursor: ${props => (props.isSent ? 'default' : 'pointer')};
+    cursor: ${(props)=>props.isSent ? 'default' : 'pointer'};
 
     svg {
       height: 27px;
@@ -22,4 +21,7 @@ exports.RatingSelectorContainer = styled_components_1.default.div `
     }
   }
 `;
+
+export { MessageBubble, RatingSelectorContainer };
+
 //# sourceMappingURL=styles.js.map

package/lib/esm/webchat/custom-messages/rating/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/webchat/custom-messages/rating/styles.ts"],"names":[],"mappings":";;;;AAAA,kFAAsC;AAEtC,0CAA0C;AAC7B,QAAA,aAAa,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAEtC,CAAA;AAMY,QAAA,uBAAuB,GAAG,2BAAM,CAAC,GAAG,CAA8B;;;;;;;cAOjE,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;;CAO5D,CAAA"}
+{"version":3,"file":"webchat/custom-messages/rating/styles.js","sources":["../../../../../src/webchat/custom-messages/rating/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\n// TODO: Review how define all this styles\nexport const MessageBubble = styled.div`\n  margin: 0px 0px 5px 0px;\n`\n\ninterface RatingSelectorContainerProps {\n  isSent?: boolean\n}\n\nexport const RatingSelectorContainer = styled.div<RatingSelectorContainerProps>`\n  display: flex;\n  justify-content: center;\n  gap: 8px;\n  margin-top: 16px;\n\n  & > div {\n    cursor: ${props => (props.isSent ? 'default' : 'pointer')};\n\n    svg {\n      height: 27px;\n      width: 27px;\n    }\n  }\n`\n"],"names":["styled","MessageBubble","RatingSelectorContainer","props"],"mappings":";;;AAAsC;AAEtC,0CAA0C;AACnC,MAAMC,aAAaA,GAAGD,qBAAU,CAAC;;AAExC,CAAC;AAMM,MAAME,uBAAuBA,GAAGF,qBAAwC,CAAC;;;;;;;YAOpE,EAAEG,CAAAA,QAAUA,MAAM,MAAM,GAAG,YAAY,UAAW;;;;;;;AAO9D,CAAC"}

package/lib/esm/webchat/custom-messages/rating/types.js

@@ -1,9 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RatingType = void 0;
-var RatingType;
-(function (RatingType) {
+var types_RatingType = /*#__PURE__*/ function(RatingType) {
     RatingType["Stars"] = "stars";
     RatingType["Smileys"] = "smileys";
-})(RatingType || (exports.RatingType = RatingType = {}));
+    return RatingType;
+}({});
+
+export { types_RatingType as RatingType };
+
 //# sourceMappingURL=types.js.map

package/lib/esm/webchat/custom-messages/rating/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/webchat/custom-messages/rating/types.ts"],"names":[],"mappings":";;;AAAA,IAAY,UAGX;AAHD,WAAY,UAAU;IACpB,6BAAe,CAAA;IACf,iCAAmB,CAAA;AACrB,CAAC,EAHW,UAAU,0BAAV,UAAU,QAGrB"}
+{"version":3,"file":"webchat/custom-messages/rating/types.js","sources":["../../../../../src/webchat/custom-messages/rating/types.ts"],"sourcesContent":["export enum RatingType {\n  Stars = 'stars',\n  Smileys = 'smileys',\n}\n\nexport interface RatingItemProps {\n  color: string\n  ratingNumber: number\n  hover: number\n}\n\nexport interface RatingIconProps {\n  color: string\n  selected?: boolean\n}\n"],"names":["RatingType"],"mappings":"AAAO,IAAKA,gBAAUA,0BAAVA;;;WAAAA;MAGX"}

package/lib/esm/webchat/devices/index.js

@@ -1,23 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMobileDevice = exports.isDevice = exports.DEVICES = void 0;
-exports.DEVICES = Object.freeze({
+const DEVICES = Object.freeze({
     MOBILE: {
         IPHONE: 'iPhone',
         ANDROID: 'Android',
         WEBOS: 'webOS',
         BLACKBERRY: 'BlackBerry',
-        WINDOWS_PHONE: 'Windows Phone',
-    },
+        WINDOWS_PHONE: 'Windows Phone'
+    }
 });
-const isDevice = deviceName => {
+const isDevice = (deviceName)=>{
     // https://stackoverflow.com/questions/19877924/what-is-the-list-of-possible-values-for-navigator-platform-as-of-today
-    return (!!navigator.platform &&
-        navigator.platform.toLowerCase().includes(deviceName.toLowerCase()));
+    return !!navigator.platform && navigator.platform.toLowerCase().includes(deviceName.toLowerCase());
 };
-exports.isDevice = isDevice;
-const isMobileDevice = () => {
-    return Object.values(exports.DEVICES.MOBILE).some(deviceName => (0, exports.isDevice)(deviceName));
+const isMobileDevice = ()=>{
+    return Object.values(DEVICES.MOBILE).some((deviceName)=>isDevice(deviceName));
 };
-exports.isMobileDevice = isMobileDevice;
+
+export { DEVICES, isDevice, isMobileDevice };
+
 //# sourceMappingURL=index.js.map

package/lib/esm/webchat/devices/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/devices/index.js"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC;IACnC,MAAM,EAAE;QACN,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,YAAY;QACxB,aAAa,EAAE,eAAe;KAC/B;CACF,CAAC,CAAA;AAEK,MAAM,QAAQ,GAAG,UAAU,CAAC,EAAE;IACnC,sHAAsH;IACtH,OAAO,CACL,CAAC,CAAC,SAAS,CAAC,QAAQ;QACpB,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CACpE,CAAA;AACH,CAAC,CAAA;AANY,QAAA,QAAQ,YAMpB;AAEM,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,MAAM,CAAC,MAAM,CAAC,eAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,IAAA,gBAAQ,EAAC,UAAU,CAAC,CAAC,CAAA;AAC/E,CAAC,CAAA;AAFY,QAAA,cAAc,kBAE1B"}
+{"version":3,"file":"webchat/devices/index.js","sources":["../../../../src/webchat/devices/index.js"],"sourcesContent":["export const DEVICES = Object.freeze({\n  MOBILE: {\n    IPHONE: 'iPhone',\n    ANDROID: 'Android',\n    WEBOS: 'webOS',\n    BLACKBERRY: 'BlackBerry',\n    WINDOWS_PHONE: 'Windows Phone',\n  },\n})\n\nexport const isDevice = deviceName => {\n  // https://stackoverflow.com/questions/19877924/what-is-the-list-of-possible-values-for-navigator-platform-as-of-today\n  return (\n    !!navigator.platform &&\n    navigator.platform.toLowerCase().includes(deviceName.toLowerCase())\n  )\n}\n\nexport const isMobileDevice = () => {\n  return Object.values(DEVICES.MOBILE).some(deviceName => isDevice(deviceName))\n}\n"],"names":["DEVICES","Object","isDevice","deviceName","navigator","isMobileDevice"],"mappings":"AAAO,MAAMA,OAAOA,GAAGC,OAAO,MAAM,CAAC;IACnC,QAAQ;QACN,QAAQ;QACR,SAAS;QACT,OAAO;QACP,YAAY;QACZ,eAAe;IACjB;AACF,GAAE;AAEK,MAAMC,QAAQA,GAAGC,CAAAA;IACtB,sHAAsH;IACtH,OACE,CAAC,CAACC,UAAU,QAAQ,IACpBA,UAAU,QAAQ,CAAC,WAAW,GAAG,QAAQ,CAACD,WAAW,WAAW;AAEpE,EAAC;AAEM,MAAME,cAAcA,GAAG;IAC5B,OAAOJ,OAAO,MAAM,CAACD,OAAOA,CAAC,MAAM,EAAE,IAAI,CAACG,CAAAA,aAAcD,QAAQA,CAACC;AACnE,EAAC"}

package/lib/esm/webchat/global.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  _botonicInsertStyles?: HTMLStyleElement[]
+}

package/lib/esm/webchat/header/default-header.js

@@ -1,25 +1,75 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const constants_1 = require("../../constants");
-const styles_1 = require("../../shared/styles");
-const environment_1 = require("../../util/environment");
-const react_2 = require("../../util/react");
-const context_1 = require("../../webchat/context");
-const styles_2 = require("./styles");
-const DefaultHeader = () => {
-    const { getThemeProperty, toggleWebchat } = (0, react_1.useContext)(context_1.WebchatContext);
-    const animationsEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableAnimations);
-    const headerImage = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.headerImage, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.brandImage));
-    const headerTitle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.headerTitle);
-    const headerSubtitle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle);
-    const handleCloseWebchat = () => {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ROLES, WEBCHAT } from "../../constants.js";
+import { Scale } from "../../shared/styles.js";
+import { resolveImage } from "../../util/environment.js";
+import { ConditionalWrapper } from "../../util/react.js";
+import { WebchatContext } from "../context/index.js";
+import { CloseHeader, HeaderContainer, ImageContainer, Subtitle, TextContainer, Title } from "./styles.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const DefaultHeader = ()=>{
+    const { getThemeProperty, toggleWebchat } = useContext(WebchatContext);
+    const animationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableAnimations);
+    const headerImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerImage, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandImage));
+    const headerTitle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerTitle);
+    const headerSubtitle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle);
+    const handleCloseWebchat = ()=>{
         toggleWebchat(false);
     };
-    const color = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.brandColor);
-    return ((0, jsx_runtime_1.jsxs)(styles_2.HeaderContainer, { role: constants_1.ROLES.HEADER, color: color, style: { ...getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.headerStyle) }, children: [headerImage && ((0, jsx_runtime_1.jsx)(styles_2.ImageContainer, { children: (0, jsx_runtime_1.jsx)("img", { src: (0, environment_1.resolveImage)(headerImage), alt: 'Header' }) })), (0, jsx_runtime_1.jsxs)(styles_2.TextContainer, { children: [(0, jsx_runtime_1.jsx)(styles_2.Title, { children: headerTitle }), headerSubtitle ? (0, jsx_runtime_1.jsx)(styles_2.Subtitle, { children: headerSubtitle }) : null] }), (0, jsx_runtime_1.jsx)(react_2.ConditionalWrapper, { condition: animationsEnabled, wrapper: children => (0, jsx_runtime_1.jsx)(styles_1.Scale, { children: children }), children: (0, jsx_runtime_1.jsx)(styles_2.CloseHeader, { onClick: handleCloseWebchat, children: "\u2A2F" }) })] }));
+    const color = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor);
+    return /*#__PURE__*/ jsxs(HeaderContainer, {
+        role: ROLES.HEADER,
+        color: color,
+        style: {
+            ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle)
+        },
+        children: [
+            headerImage && /*#__PURE__*/ jsx(ImageContainer, {
+                children: /*#__PURE__*/ jsx("img", {
+                    src: resolveImage(headerImage),
+                    alt: "Header"
+                })
+            }),
+            /*#__PURE__*/ jsxs(TextContainer, {
+                children: [
+                    /*#__PURE__*/ jsx(Title, {
+                        children: headerTitle
+                    }),
+                    headerSubtitle ? /*#__PURE__*/ jsx(Subtitle, {
+                        children: headerSubtitle
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsx(ConditionalWrapper, {
+                condition: animationsEnabled,
+                wrapper: (children)=>/*#__PURE__*/ jsx(Scale, {
+                        children: children
+                    }),
+                children: /*#__PURE__*/ jsx(CloseHeader, {
+                    onClick: handleCloseWebchat,
+                    children: "⨯"
+                })
+            })
+        ]
+    });
 };
-exports.DefaultHeader = DefaultHeader;
+
+export { DefaultHeader };
+
 //# sourceMappingURL=default-header.js.map

package/lib/esm/webchat/header/default-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-header.js","sourceRoot":"","sources":["../../../../src/webchat/header/default-header.tsx"],"names":[],"mappings":";;;;AAAA,iCAAkC;AAElC,+CAAgD;AAChD,gDAA2C;AAC3C,wDAAqD;AACrD,4CAAqD;AACrD,mDAAsD;AACtD,qCAOiB;AAEV,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,gBAAgB,EAAE,aAAa,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAc,CAAC,CAAA;IAEtE,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,mBAAO,CAAC,iBAAiB,CAAC,gBAAgB,CAC3C,CAAA;IAED,MAAM,WAAW,GAAG,gBAAgB,CAClC,mBAAO,CAAC,iBAAiB,CAAC,WAAW,EACrC,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,UAAU,CAAC,CACvD,CAAA;IAED,MAAM,WAAW,GAAG,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAE3E,MAAM,cAAc,GAAG,gBAAgB,CACrC,mBAAO,CAAC,iBAAiB,CAAC,cAAc,CACzC,CAAA;IAED,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,aAAa,CAAC,KAAK,CAAC,CAAA;IACtB,CAAC,CAAA;IAED,MAAM,KAAK,GAAG,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAA;IAEpE,OAAO,CACL,wBAAC,wBAAe,IACd,IAAI,EAAE,iBAAK,CAAC,MAAM,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAE,GAAG,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,aAEpE,WAAW,IAAI,CACd,uBAAC,uBAAc,cACb,gCAAK,GAAG,EAAE,IAAA,0BAAY,EAAC,WAAW,CAAC,EAAE,GAAG,EAAC,QAAQ,GAAG,GACrC,CAClB,EACD,wBAAC,sBAAa,eACZ,uBAAC,cAAK,cAAE,WAAW,GAAS,EAC3B,cAAc,CAAC,CAAC,CAAC,uBAAC,iBAAQ,cAAE,cAAc,GAAY,CAAC,CAAC,CAAC,IAAI,IAChD,EAChB,uBAAC,0BAAkB,IACjB,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC,uBAAC,cAAK,cAAE,QAAQ,GAAS,YAE9C,uBAAC,oBAAW,IAAC,OAAO,EAAE,kBAAkB,uBAAiB,GACtC,IACL,CACnB,CAAA;AACH,CAAC,CAAA;AA/CY,QAAA,aAAa,iBA+CzB"}
+{"version":3,"file":"webchat/header/default-header.js","sources":["../../../../src/webchat/header/default-header.tsx"],"sourcesContent":["import { useContext } from 'react'\n\nimport { ROLES, WEBCHAT } from '../../constants'\nimport { Scale } from '../../shared/styles'\nimport { resolveImage } from '../../util/environment'\nimport { ConditionalWrapper } from '../../util/react'\nimport { WebchatContext } from '../../webchat/context'\nimport {\n  CloseHeader,\n  HeaderContainer,\n  ImageContainer,\n  Subtitle,\n  TextContainer,\n  Title,\n} from './styles'\n\nexport const DefaultHeader = () => {\n  const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)\n\n  const animationsEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations\n  )\n\n  const headerImage = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.headerImage,\n    getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandImage)\n  )\n\n  const headerTitle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerTitle)\n\n  const headerSubtitle = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle\n  )\n\n  const handleCloseWebchat = () => {\n    toggleWebchat(false)\n  }\n\n  const color = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor)\n\n  return (\n    <HeaderContainer\n      role={ROLES.HEADER}\n      color={color}\n      style={{ ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle) }}\n    >\n      {headerImage && (\n        <ImageContainer>\n          <img src={resolveImage(headerImage)} alt='Header' />\n        </ImageContainer>\n      )}\n      <TextContainer>\n        <Title>{headerTitle}</Title>\n        {headerSubtitle ? <Subtitle>{headerSubtitle}</Subtitle> : null}\n      </TextContainer>\n      <ConditionalWrapper\n        condition={animationsEnabled}\n        wrapper={children => <Scale>{children}</Scale>}\n      >\n        <CloseHeader onClick={handleCloseWebchat}>⨯</CloseHeader>\n      </ConditionalWrapper>\n    </HeaderContainer>\n  )\n}\n"],"names":["useContext","ROLES","WEBCHAT","Scale","resolveImage","ConditionalWrapper","WebchatContext","CloseHeader","HeaderContainer","ImageContainer","Subtitle","TextContainer","Title","DefaultHeader","getThemeProperty","toggleWebchat","animationsEnabled","headerImage","headerTitle","headerSubtitle","handleCloseWebchat","color","children"],"mappings":";;;;;;;;;;;;;;;;;;AAAkC;AAEc;AACL;AACU;AACA;AACC;AAQrC;AAEV,MAAMa,aAAaA,GAAG;IAC3B,MAAM,EAAEC,gBAAgB,EAAEC,aAAa,EAAE,GAAGf,UAAUA,CAACM,cAAcA;IAErE,MAAMU,oBAAoBF,iBACxBZ,0CAA0C;IAG5C,MAAMe,cAAcH,iBAClBZ,qCAAqC,EACrCY,iBAAiBZ,oCAAoC;IAGvD,MAAMgB,cAAcJ,iBAAiBZ,qCAAqC;IAE1E,MAAMiB,iBAAiBL,iBACrBZ,wCAAwC;IAG1C,MAAMkB,qBAAqB;QACzBL,cAAc;IAChB;IAEA,MAAMM,QAAQP,iBAAiBZ,oCAAoC;IAEnE,qBACE,KAACM,eAAeA;QACd,MAAMP,YAAY;QAClB,OAAOoB;QACP,OAAO;YAAE,GAAGP,iBAAiBZ,qCAAqC,CAAC;QAAC;;YAEnEe,6BACC,IAACR,cAAcA;0BACb,kBAAC;oBAAI,KAAKL,YAAYA,CAACa;oBAAc,KAAI;;;0BAG7C,KAACN,aAAaA;;kCACZ,IAACC,KAAKA;kCAAEM;;oBACPC,+BAAiB,IAACT,QAAQA;kCAAES;yBAA6B;;;0BAE5D,IAACd,kBAAkBA;gBACjB,WAAWW;gBACX,SAASM,CAAAA,yBAAY,IAACnB,KAAKA;kCAAEmB;;0BAE7B,kBAACf,WAAWA;oBAAC,SAASa;8BAAoB;;;;;AAIlD,EAAC"}