@botonic/react 1.0.0-dev.1 → 1.0.0-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/lib/components/button.js +2 -0
  2. package/lib/components/button.js.map +1 -1
  3. package/lib/components/components.js +1 -1
  4. package/lib/components/image.js +47 -5
  5. package/lib/components/image.js.map +1 -1
  6. package/lib/components/index.js +6 -6
  7. package/lib/components/markdown.js +1 -1
  8. package/lib/components/multichannel/multichannel-utils.js +8 -6
  9. package/lib/components/multichannel/multichannel-utils.js.map +1 -1
  10. package/lib/components/timestamps.js +1 -1
  11. package/lib/constants.js +2 -1
  12. package/lib/constants.js.map +1 -1
  13. package/lib/dev-app.js +7 -6
  14. package/lib/dev-app.js.map +1 -1
  15. package/lib/index.d.ts +3 -0
  16. package/lib/index.js +20 -20
  17. package/lib/message-utils.js +1 -1
  18. package/lib/util/dom.js +8 -2
  19. package/lib/util/dom.js.map +1 -1
  20. package/lib/util/environment.js +1 -1
  21. package/lib/util/objects.js +1 -1
  22. package/lib/util/react.js +1 -1
  23. package/lib/util/webchat.js +1 -1
  24. package/lib/webchat/actions.js +3 -1
  25. package/lib/webchat/actions.js.map +1 -1
  26. package/lib/webchat/devices/device-adapter.js +14 -4
  27. package/lib/webchat/devices/device-adapter.js.map +1 -1
  28. package/lib/webchat/devices/scrollbar-controller.js +5 -3
  29. package/lib/webchat/devices/scrollbar-controller.js.map +1 -1
  30. package/lib/webchat/header.js +1 -1
  31. package/lib/webchat/hooks.js +14 -4
  32. package/lib/webchat/hooks.js.map +1 -1
  33. package/lib/webchat/index.js +1 -1
  34. package/lib/webchat/webchat-reducer.js +6 -0
  35. package/lib/webchat/webchat-reducer.js.map +1 -1
  36. package/lib/webchat/webchat.js +21 -4
  37. package/lib/webchat/webchat.js.map +1 -1
  38. package/lib/webchat/webview.js +1 -1
  39. package/lib/webchat-app.js +20 -9
  40. package/lib/webchat-app.js.map +1 -1
  41. package/package.json +6 -6
  42. package/src/components/button.jsx +2 -0
  43. package/src/dev-app.jsx +8 -3
  44. package/src/experimental/components/custom-message.jsx +2 -1
  45. package/src/experimental/components/message.jsx +14 -7
  46. package/src/experimental/constants.js +189 -0
  47. package/src/experimental/contexts.jsx +36 -0
  48. package/src/experimental/dev-app.jsx +14 -7
  49. package/src/experimental/index.js +32 -20
  50. package/src/experimental/msg-to-botonic.jsx +9 -9
  51. package/src/experimental/react-bot.jsx +1 -1
  52. package/src/experimental/util/dom.js +55 -0
  53. package/src/experimental/util/objects.js +39 -0
  54. package/src/experimental/util/webchat.js +61 -0
  55. package/src/experimental/webchat/actions.jsx +24 -0
  56. package/src/experimental/webchat/hooks.js +296 -0
  57. package/src/experimental/webchat/messages-reducer.js +86 -0
  58. package/src/experimental/webchat/session-view.jsx +166 -0
  59. package/src/experimental/webchat/webchat-dev.jsx +23 -19
  60. package/src/experimental/webchat/webchat-reducer.js +68 -0
  61. package/src/experimental/webchat/webchat.jsx +107 -75
  62. package/src/experimental/webchat-app.jsx +34 -15
  63. package/src/index.d.ts +1 -0
  64. package/src/util/dom.js +5 -3
  65. package/src/webchat/devices/device-adapter.js +16 -4
  66. package/src/webchat/devices/scrollbar-controller.js +9 -4
  67. package/src/webchat/webchat.jsx +2 -1
  68. package/src/webchat-app.jsx +6 -4
  69. package/lib/experimental/components/audio.js +0 -46
  70. package/lib/experimental/components/audio.js.map +0 -1
  71. package/lib/experimental/components/carousel.js +0 -194
  72. package/lib/experimental/components/carousel.js.map +0 -1
  73. package/lib/experimental/components/custom-message.js +0 -132
  74. package/lib/experimental/components/custom-message.js.map +0 -1
  75. package/lib/experimental/components/document.js +0 -69
  76. package/lib/experimental/components/document.js.map +0 -1
  77. package/lib/experimental/components/image.js +0 -47
  78. package/lib/experimental/components/image.js.map +0 -1
  79. package/lib/experimental/components/index.js +0 -184
  80. package/lib/experimental/components/index.js.map +0 -1
  81. package/lib/experimental/components/location.js +0 -54
  82. package/lib/experimental/components/location.js.map +0 -1
  83. package/lib/experimental/components/markdown.js +0 -103
  84. package/lib/experimental/components/markdown.js.map +0 -1
  85. package/lib/experimental/components/message.js +0 -353
  86. package/lib/experimental/components/message.js.map +0 -1
  87. package/lib/experimental/components/text.js +0 -80
  88. package/lib/experimental/components/text.js.map +0 -1
  89. package/lib/experimental/components/video.js +0 -49
  90. package/lib/experimental/components/video.js.map +0 -1
  91. package/lib/experimental/components/whatsapp-template.js +0 -53
  92. package/lib/experimental/components/whatsapp-template.js.map +0 -1
  93. package/lib/experimental/dev-app.js +0 -240
  94. package/lib/experimental/dev-app.js.map +0 -1
  95. package/lib/experimental/index.js +0 -1022
  96. package/lib/experimental/index.js.map +0 -1
  97. package/lib/experimental/msg-to-botonic.js +0 -162
  98. package/lib/experimental/msg-to-botonic.js.map +0 -1
  99. package/lib/experimental/node-app.js +0 -97
  100. package/lib/experimental/node-app.js.map +0 -1
  101. package/lib/experimental/react-bot.js +0 -167
  102. package/lib/experimental/react-bot.js.map +0 -1
  103. package/lib/experimental/webchat/assets/Inter-VariableFont_slnt,wght.ttf +0 -0
  104. package/lib/experimental/webchat/assets/botonic-logo-white.svg +0 -16
  105. package/lib/experimental/webchat/assets/messenger.svg +0 -10
  106. package/lib/experimental/webchat/assets/open-new-window.svg +0 -3
  107. package/lib/experimental/webchat/assets/open.svg +0 -3
  108. package/lib/experimental/webchat/assets/telegram.svg +0 -10
  109. package/lib/experimental/webchat/assets/webchat.svg +0 -21
  110. package/lib/experimental/webchat/assets/whatsapp.svg +0 -4
  111. package/lib/experimental/webchat/webchat-dev.js +0 -300
  112. package/lib/experimental/webchat/webchat-dev.js.map +0 -1
  113. package/lib/experimental/webchat/webchat.js +0 -1051
  114. package/lib/experimental/webchat/webchat.js.map +0 -1
  115. package/lib/experimental/webchat-app.js +0 -642
  116. package/lib/experimental/webchat-app.js.map +0 -1
package/lib/experimental/webchat/webchat-dev.js DELETED
@@ -1,300 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.WebchatDev = exports.PlaygroundPortal = exports.PlaygroundContent = exports.Playground = exports.DebugTabPortal = exports.DebugTab = void 0;
11
-
12
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
-
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
-
18
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
19
-
20
- var _core = require("@botonic/core");
21
-
22
- var _lodash = _interopRequireDefault(require("lodash.merge"));
23
-
24
- var _qrcode = _interopRequireDefault(require("qrcode.react"));
25
-
26
- var _react = _interopRequireWildcard(require("react"));
27
-
28
- var _reactDom = require("react-dom");
29
-
30
- var _styledComponents = _interopRequireDefault(require("styled-components"));
31
-
32
- var _hooks = require("../../webchat/hooks");
33
-
34
- var _sessionView = require("../../webchat/session-view");
35
-
36
- var _messenger = _interopRequireDefault(require("./assets/messenger.svg"));
37
-
38
- var _open = _interopRequireDefault(require("./assets/open.svg"));
39
-
40
- var _openNewWindow = _interopRequireDefault(require("./assets/open-new-window.svg"));
41
-
42
- var _telegram = _interopRequireDefault(require("./assets/telegram.svg"));
43
-
44
- var _webchat = _interopRequireDefault(require("./assets/webchat.svg"));
45
-
46
- var _whatsapp = _interopRequireDefault(require("./assets/whatsapp.svg"));
47
-
48
- var _webchat2 = require("./webchat");
49
-
50
- var _excluded = ["webchatHooks"];
51
-
52
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
53
-
54
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
55
-
56
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
57
-
58
- var DebugTab = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n left: 0;\n top: 0;\n width: ", ";\n height: ", ";\n"])), function (props) {
59
- return props.show ? '350px' : '32px';
60
- }, function (props) {
61
- return props.show ? '100%' : '42px';
62
- }); // We want the debug tab to be rendered in the <body> even if the
63
- // webchat is being rendered in a shadowDOM, that's why we need a portal
64
-
65
-
66
- exports.DebugTab = DebugTab;
67
-
68
- var DebugTabPortal = function DebugTabPortal(_ref) {
69
- var webchatHooks = _ref.webchatHooks,
70
- props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
71
- return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(DebugTab, props, /*#__PURE__*/_react["default"].createElement(_sessionView.SessionView, {
72
- webchatHooks: webchatHooks
73
- })), document.body);
74
- };
75
-
76
- exports.DebugTabPortal = DebugTabPortal;
77
-
78
- var ChannelCardLabel = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 2px;\n img {\n width: 18px;\n height: 18px;\n }\n"])));
79
-
80
- var ChannelCardAction = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n transition: all 0.2s ease;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n padding: 8px 12px;\n background: #383f55;\n border-radius: 4px;\n font-family: Inter;\n font-style: normal;\n font-weight: 600;\n font-size: 13px;\n line-height: 21px;\n display: flex;\n align-items: center;\n color: #2df2ff;\n :hover {\n background: #14171f;\n }\n"])));
81
-
82
- var ChannelCardText = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n font-style: normal;\n font-weight: normal;\n font-size: 13px;\n line-height: 26px;\n"])));
83
-
84
- var ChannelCard = function ChannelCard(_ref2) {
85
- var label = _ref2.label,
86
- icon = _ref2.icon,
87
- isOpen = _ref2.isOpen,
88
- onClick = _ref2.onClick,
89
- onActionClick = _ref2.onActionClick,
90
- children = _ref2.children,
91
- className = _ref2.className;
92
- return /*#__PURE__*/_react["default"].createElement("div", {
93
- className: className,
94
- onClick: onClick
95
- }, /*#__PURE__*/_react["default"].createElement(ChannelCardLabel, null, /*#__PURE__*/_react["default"].createElement("div", null, label), /*#__PURE__*/_react["default"].createElement("img", {
96
- src: icon
97
- })), isOpen && children);
98
- };
99
-
100
- var ChannelCardStyled = (0, _styledComponents["default"])(ChannelCard)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n transition: all 0.4s ease;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n margin-right: 20px;\n padding: 16px;\n overflow: hidden;\n cursor: ", ";\n width: 160px;\n height: ", ";\n\n border: 1px solid #ffffff;\n box-sizing: border-box;\n border-radius: 4px;\n\n font-family: Inter;\n font-style: normal;\n font-weight: 600;\n font-size: 15px;\n line-height: 18px;\n\n color: ", ";\n background-color: ", ";\n\n &:hover {\n color: #383f55;\n background-color: #ffffff;\n }\n"])), function (_ref3) {
101
- var isOpen = _ref3.isOpen;
102
- return isOpen ? 'auto' : 'pointer';
103
- }, function (_ref4) {
104
- var isOpen = _ref4.isOpen;
105
- return isOpen ? '275px' : '48px';
106
- }, function (_ref5) {
107
- var isOpen = _ref5.isOpen;
108
- return isOpen ? '#383F55' : '#FFFFFF';
109
- }, function (_ref6) {
110
- var isOpen = _ref6.isOpen;
111
- return isOpen ? '#FFFFFF' : 'transparent';
112
- });
113
-
114
- var ChannelCardMessaging = function ChannelCardMessaging(_ref7) {
115
- var url = _ref7.url;
116
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ChannelCardText, null, "Phone:"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_qrcode["default"], {
117
- value: url,
118
- size: 128,
119
- bgColor: '#ffffff',
120
- fgColor: '#000000',
121
- level: 'Q',
122
- includeMargin: false,
123
- renderAs: 'svg'
124
- })), /*#__PURE__*/_react["default"].createElement(ChannelCardText, null, "Browser:"), /*#__PURE__*/_react["default"].createElement(ChannelCardAction, {
125
- onClick: function onClick() {
126
- return window.open(url, '_blank');
127
- }
128
- }, "Open", /*#__PURE__*/_react["default"].createElement("img", {
129
- src: _openNewWindow["default"]
130
- })));
131
- };
132
-
133
- var ChannelCardWebchat = function ChannelCardWebchat() {
134
- return /*#__PURE__*/_react["default"].createElement("div", {
135
- style: {
136
- height: '100%',
137
- display: 'flex',
138
- flexDirection: 'column',
139
- justifyContent: 'space-between',
140
- alignItems: 'stretch'
141
- }
142
- }, /*#__PURE__*/_react["default"].createElement(ChannelCardText, null), /*#__PURE__*/_react["default"].createElement(ChannelCardText, {
143
- style: {
144
- lineHeight: '19px'
145
- }
146
- }, /*#__PURE__*/_react["default"].createElement("strong", {
147
- style: {
148
- marginBottom: 2
149
- }
150
- }, "Right here!"), /*#__PURE__*/_react["default"].createElement("br", null), "Click the chat icon on the bottom right corner or click open below."), /*#__PURE__*/_react["default"].createElement(ChannelCardAction, {
151
- onClick: function onClick() {
152
- return window.Botonic.open();
153
- }
154
- }, "Open", /*#__PURE__*/_react["default"].createElement("img", {
155
- src: _open["default"]
156
- })));
157
- };
158
-
159
- var ChannelSelector = function ChannelSelector(_ref8) {
160
- var playgroundCode = _ref8.playgroundCode;
161
-
162
- var _useState = (0, _react.useState)(0),
163
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
164
- channel = _useState2[0],
165
- setChannel = _useState2[1];
166
-
167
- var channels = [{
168
- name: 'Whatsapp',
169
- url: "https://wa.me/34631914102?text=CODE%3D".concat(playgroundCode),
170
- logo: _whatsapp["default"]
171
- }, {
172
- name: 'Messenger',
173
- url: "https://m.me/BotonicPlayground?ref=CODE%3D".concat(playgroundCode),
174
- logo: _messenger["default"]
175
- }, {
176
- name: 'Telegram',
177
- url: "https://t.me/BotonicPlaygroundBot?start=CODE%3D".concat(playgroundCode),
178
- logo: _telegram["default"]
179
- }, {
180
- name: 'Webchat',
181
- logo: _webchat["default"]
182
- }];
183
- return /*#__PURE__*/_react["default"].createElement("div", {
184
- style: {
185
- display: 'flex',
186
- flex: 'none',
187
- flexDirection: 'row',
188
- justifyContent: 'center',
189
- alignItems: 'flex-start',
190
- height: 275
191
- }
192
- }, channels.map(function (c, i) {
193
- return /*#__PURE__*/_react["default"].createElement(ChannelCardStyled, {
194
- key: i,
195
- label: c.name,
196
- icon: c.logo,
197
- isOpen: channels[channel].name == c.name,
198
- onClick: function onClick() {
199
- return setChannel(i);
200
- }
201
- }, c.name === 'Webchat' ? /*#__PURE__*/_react["default"].createElement(ChannelCardWebchat, null) : /*#__PURE__*/_react["default"].createElement(ChannelCardMessaging, {
202
- url: c.url
203
- }));
204
- }));
205
- };
206
-
207
- var PlaygroundTitle = _styledComponents["default"].h1(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: Inter;\n font-style: normal;\n font-weight: bold;\n font-size: 38px;\n line-height: 62px;\n letter-spacing: -0.02em;\n color: #ffffff;\n"])));
208
-
209
- var PlaygroundSubtitle = _styledComponents["default"].h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: Inter;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 26px;\n letter-spacing: -0.02em;\n color: #ffffff;\n"])));
210
-
211
- var PlaygroundHelpText = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: Inter;\n font-style: normal;\n font-weight: normal;\n font-size: 15px;\n line-height: 38px;\n letter-spacing: -0.02em;\n color: #cccccc;\n a {\n color: #2df2ff;\n text-decoration: none;\n }\n"])));
212
-
213
- var Playground = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: -1;\n position: fixed;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: start;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n min-height: min-content;\n background: #383f55;\n"])));
214
-
215
- exports.Playground = Playground;
216
-
217
- var PlaygroundContent = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: start;\n width: 100%;\n max-width: 800px;\n padding: 60px 0px;\n"])));
218
-
219
- exports.PlaygroundContent = PlaygroundContent;
220
-
221
- var PlaygroundPortal = function PlaygroundPortal(props) {
222
- return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(Playground, props, /*#__PURE__*/_react["default"].createElement(PlaygroundContent, null, /*#__PURE__*/_react["default"].createElement(PlaygroundTitle, null, "Your Botonic app is up and running!"), /*#__PURE__*/_react["default"].createElement(PlaygroundSubtitle, null, "Try your app now using the code", ' ', /*#__PURE__*/_react["default"].createElement("strong", null, props.playgroundCode), " on:"), /*#__PURE__*/_react["default"].createElement(ChannelSelector, {
223
- playgroundCode: props.playgroundCode
224
- }), /*#__PURE__*/_react["default"].createElement(PlaygroundHelpText, null, /*#__PURE__*/_react["default"].createElement("p", {
225
- style: {
226
- fontWeight: 600,
227
- marginBottom: 0
228
- }
229
- }, "Here some resources to get you started:"), /*#__PURE__*/_react["default"].createElement("ol", {
230
- style: {
231
- paddingLeft: 16,
232
- marginTop: 0
233
- }
234
- }, /*#__PURE__*/_react["default"].createElement("li", null, "Our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
235
- href: "https://botonic.io/docs/getting-started/",
236
- target: "_blank",
237
- rel: "noreferrer"
238
- }, "getting started guide"), ' ', "has some great first steps."), /*#__PURE__*/_react["default"].createElement("li", null, "Our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
239
- href: "https://slack.botonic.io",
240
- target: "_blank",
241
- rel: "noreferrer"
242
- }, "slack community"), ' ', "is full of friendly humans who can help answer questions."), /*#__PURE__*/_react["default"].createElement("li", null, "If you want to pair with a Botonic engineer, grab a slot at one of our upcoming", ' ', /*#__PURE__*/_react["default"].createElement("a", {
243
- href: "https://botonic.io/blog/2021/03/10/introducing-botonic-office-hours/",
244
- target: "_blank",
245
- rel: "noreferrer"
246
- }, "office hours"), "."))))), document.body);
247
- };
248
-
249
- exports.PlaygroundPortal = PlaygroundPortal;
250
- var initialSession = {
251
- is_first_interaction: true,
252
- last_session: {},
253
- user: {
254
- id: '000001',
255
- username: 'johndoe',
256
- name: 'John Doe',
257
- provider: _core.PROVIDER.DEV,
258
- provider_id: '0000000',
259
- extra_data: {}
260
- },
261
- organization: '',
262
- bot: {
263
- id: '0000000',
264
- name: 'botName'
265
- }
266
- }; // eslint-disable-next-line react/display-name
267
-
268
- var WebchatDev = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
269
- var webchatHooks = (0, _hooks.useWebchat)();
270
- var webchatState = webchatHooks.webchatState,
271
- updateTheme = webchatHooks.updateTheme;
272
- /* TODO: webchatState.theme should be included in the dependencies array
273
- together with props.theme. The problem is that this effect modifies webchatState
274
- so we enter an infinite rerender loop. */
275
-
276
- (0, _react.useEffect)(function () {
277
- updateTheme((0, _lodash["default"])(webchatState.theme, props.theme));
278
- }, [props.theme]);
279
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_webchat2.Webchat, (0, _extends2["default"])({
280
- style: {
281
- flex: 1,
282
- position: 'relative'
283
- }
284
- }, props, {
285
- ref: ref,
286
- webchatHooks: webchatHooks,
287
- initialSession: initialSession,
288
- initialDevSettings: {
289
- keepSessionOnReload: webchatState.devSettings.keepSessionOnReload,
290
- showSessionView: webchatState.devSettings.showSessionView
291
- }
292
- })), /*#__PURE__*/_react["default"].createElement(PlaygroundPortal, {
293
- playgroundCode: props.playgroundCode
294
- }), /*#__PURE__*/_react["default"].createElement(DebugTabPortal, {
295
- show: webchatState.devSettings.showSessionView,
296
- webchatHooks: webchatHooks
297
- }));
298
- });
299
- exports.WebchatDev = WebchatDev;
300
- //# sourceMappingURL=webchat-dev.js.map
package/lib/experimental/webchat/webchat-dev.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/experimental/webchat/webchat-dev.jsx"],"names":["DebugTab","styled","div","props","show","DebugTabPortal","webchatHooks","document","body","ChannelCardLabel","ChannelCardAction","a","ChannelCardText","ChannelCard","label","icon","isOpen","onClick","onActionClick","children","className","ChannelCardStyled","ChannelCardMessaging","url","window","open","OpenNewWindow","ChannelCardWebchat","height","display","flexDirection","justifyContent","alignItems","lineHeight","marginBottom","Botonic","Open","ChannelSelector","playgroundCode","channel","setChannel","channels","name","logo","WhatsappLogo","MessengerLogo","TelegramLogo","WebchatLogo","flex","map","c","i","PlaygroundTitle","h1","PlaygroundSubtitle","h3","PlaygroundHelpText","Playground","PlaygroundContent","PlaygroundPortal","fontWeight","paddingLeft","marginTop","initialSession","is_first_interaction","last_session","user","id","username","provider","PROVIDER","DEV","provider_id","extra_data","organization","bot","WebchatDev","ref","webchatState","updateTheme","theme","position","keepSessionOnReload","devSettings","showSessionView"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,QAAQ,GAAGC,6BAAOC,GAAV,qKAIV,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,IAAN,GAAa,OAAb,GAAuB,MAA5B;AAAA,CAJK,EAKT,UAAAD,KAAK;AAAA,SAAKA,KAAK,CAACC,IAAN,GAAa,MAAb,GAAsB,MAA3B;AAAA,CALI,CAAd,C,CAQP;AACA;;;;;AACO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;AAAA,MAAGC,YAAH,QAAGA,YAAH;AAAA,MAAoBH,KAApB;AAAA,sBAC5B,0CACE,gCAAC,QAAD,EAAcA,KAAd,eACE,gCAAC,wBAAD;AAAa,IAAA,YAAY,EAAEG;AAA3B,IADF,CADF,EAIEC,QAAQ,CAACC,IAJX,CAD4B;AAAA,CAAvB;;;;AAQP,IAAMC,gBAAgB,GAAGR,6BAAOC,GAAV,yQAAtB;;AAYA,IAAMQ,iBAAiB,GAAGT,6BAAOU,CAAV,2gBAAvB;;AAuBA,IAAMC,eAAe,GAAGX,6BAAOC,GAAV,mLAArB;;AAOA,IAAMW,WAAW,GAAG,SAAdA,WAAc,QAQd;AAAA,MAPJC,KAOI,SAPJA,KAOI;AAAA,MANJC,IAMI,SANJA,IAMI;AAAA,MALJC,MAKI,SALJA,MAKI;AAAA,MAJJC,OAII,SAJJA,OAII;AAAA,MAHJC,aAGI,SAHJA,aAGI;AAAA,MAFJC,QAEI,SAFJA,QAEI;AAAA,MADJC,SACI,SADJA,SACI;AACJ,sBACE;AAAK,IAAA,SAAS,EAAEA,SAAhB;AAA2B,IAAA,OAAO,EAAEH;AAApC,kBACE,gCAAC,gBAAD,qBACE,6CAAMH,KAAN,CADF,eAEE;AAAK,IAAA,GAAG,EAAEC;AAAV,IAFF,CADF,EAKGC,MAAM,IAAIG,QALb,CADF;AASD,CAlBD;;AAoBA,IAAME,iBAAiB,GAAG,kCAAOR,WAAP,CAAH,umBAQX;AAAA,MAAGG,MAAH,SAAGA,MAAH;AAAA,SAAiBA,MAAM,GAAG,MAAH,GAAY,SAAnC;AAAA,CARW,EAUX;AAAA,MAAGA,MAAH,SAAGA,MAAH;AAAA,SAAiBA,MAAM,GAAG,OAAH,GAAa,MAApC;AAAA,CAVW,EAsBZ;AAAA,MAAGA,MAAH,SAAGA,MAAH;AAAA,SAAiBA,MAAM,GAAG,SAAH,GAAe,SAAtC;AAAA,CAtBY,EAuBD;AAAA,MAAGA,MAAH,SAAGA,MAAH;AAAA,SAAiBA,MAAM,GAAG,SAAH,GAAe,aAAtC;AAAA,CAvBC,CAAvB;;AA+BA,IAAMM,oBAAoB,GAAG,SAAvBA,oBAAuB;AAAA,MAAGC,GAAH,SAAGA,GAAH;AAAA,sBAC3B,+EACE,gCAAC,eAAD,iBADF,eAEE,0DACE,gCAAC,kBAAD;AACE,IAAA,KAAK,EAAEA,GADT;AAEE,IAAA,IAAI,EAAE,GAFR;AAGE,IAAA,OAAO,EAAE,SAHX;AAIE,IAAA,OAAO,EAAE,SAJX;AAKE,IAAA,KAAK,EAAE,GALT;AAME,IAAA,aAAa,EAAE,KANjB;AAOE,IAAA,QAAQ,EAAE;AAPZ,IADF,CAFF,eAaE,gCAAC,eAAD,mBAbF,eAcE,gCAAC,iBAAD;AAAmB,IAAA,OAAO,EAAE;AAAA,aAAMC,MAAM,CAACC,IAAP,CAAYF,GAAZ,EAAiB,QAAjB,CAAN;AAAA;AAA5B,0BAEE;AAAK,IAAA,GAAG,EAAEG;AAAV,IAFF,CAdF,CAD2B;AAAA,CAA7B;;AAsBA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,sBACzB;AACE,IAAA,KAAK,EAAE;AACLC,MAAAA,MAAM,EAAE,MADH;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,aAAa,EAAE,QAHV;AAILC,MAAAA,cAAc,EAAE,eAJX;AAKLC,MAAAA,UAAU,EAAE;AALP;AADT,kBASE,gCAAC,eAAD,OATF,eAUE,gCAAC,eAAD;AAAiB,IAAA,KAAK,EAAE;AAAEC,MAAAA,UAAU,EAAE;AAAd;AAAxB,kBACE;AAAQ,IAAA,KAAK,EAAE;AAAEC,MAAAA,YAAY,EAAE;AAAhB;AAAf,mBADF,eAEE,2CAFF,wEAVF,eAeE,gCAAC,iBAAD;AAAmB,IAAA,OAAO,EAAE;AAAA,aAAMV,MAAM,CAACW,OAAP,CAAeV,IAAf,EAAN;AAAA;AAA5B,0BAEE;AAAK,IAAA,GAAG,EAAEW;AAAV,IAFF,CAfF,CADyB;AAAA,CAA3B;;AAuBA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,QAAwB;AAAA,MAArBC,cAAqB,SAArBA,cAAqB;;AAC9C,kBAA8B,qBAAS,CAAT,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,MAAMC,QAAQ,GAAG,CACf;AACEC,IAAAA,IAAI,EAAE,UADR;AAEEnB,IAAAA,GAAG,kDAA2Ce,cAA3C,CAFL;AAGEK,IAAAA,IAAI,EAAEC;AAHR,GADe,EAMf;AACEF,IAAAA,IAAI,EAAE,WADR;AAEEnB,IAAAA,GAAG,sDAA+Ce,cAA/C,CAFL;AAGEK,IAAAA,IAAI,EAAEE;AAHR,GANe,EAWf;AACEH,IAAAA,IAAI,EAAE,UADR;AAEEnB,IAAAA,GAAG,2DAAoDe,cAApD,CAFL;AAGEK,IAAAA,IAAI,EAAEG;AAHR,GAXe,EAgBf;AACEJ,IAAAA,IAAI,EAAE,SADR;AAEEC,IAAAA,IAAI,EAAEI;AAFR,GAhBe,CAAjB;AAqBA,sBACE;AACE,IAAA,KAAK,EAAE;AACLlB,MAAAA,OAAO,EAAE,MADJ;AAELmB,MAAAA,IAAI,EAAE,MAFD;AAGLlB,MAAAA,aAAa,EAAE,KAHV;AAILC,MAAAA,cAAc,EAAE,QAJX;AAKLC,MAAAA,UAAU,EAAE,YALP;AAMLJ,MAAAA,MAAM,EAAE;AANH;AADT,KAUGa,QAAQ,CAACQ,GAAT,CAAa,UAACC,CAAD,EAAIC,CAAJ;AAAA,wBACZ,gCAAC,iBAAD;AACE,MAAA,GAAG,EAAEA,CADP;AAEE,MAAA,KAAK,EAAED,CAAC,CAACR,IAFX;AAGE,MAAA,IAAI,EAAEQ,CAAC,CAACP,IAHV;AAIE,MAAA,MAAM,EAAEF,QAAQ,CAACF,OAAD,CAAR,CAAkBG,IAAlB,IAA0BQ,CAAC,CAACR,IAJtC;AAKE,MAAA,OAAO,EAAE;AAAA,eAAMF,UAAU,CAACW,CAAD,CAAhB;AAAA;AALX,OAOGD,CAAC,CAACR,IAAF,KAAW,SAAX,gBACC,gCAAC,kBAAD,OADD,gBAGC,gCAAC,oBAAD;AAAsB,MAAA,GAAG,EAAEQ,CAAC,CAAC3B;AAA7B,MAVJ,CADY;AAAA,GAAb,CAVH,CADF;AA4BD,CAnDD;;AAqDA,IAAM6B,eAAe,GAAGnD,6BAAOoD,EAAV,uPAArB;;AAUA,IAAMC,kBAAkB,GAAGrD,6BAAOsD,EAAV,yPAAxB;;AAUA,IAAMC,kBAAkB,GAAGvD,6BAAOC,GAAV,sTAAxB;;AAcO,IAAMuD,UAAU,GAAGxD,6BAAOC,GAAV,kWAAhB;;;;AAiBA,IAAMwD,iBAAiB,GAAGzD,6BAAOC,GAAV,sPAAvB;;;;AAUA,IAAMyD,gBAAgB,GAAG,SAAnBA,gBAAmB,CAAAxD,KAAK;AAAA,sBACnC,0CACE,gCAAC,UAAD,EAAgBA,KAAhB,eACE,gCAAC,iBAAD,qBACE,gCAAC,eAAD,8CADF,eAEE,gCAAC,kBAAD,2CACkC,GADlC,eAEE,gDAASA,KAAK,CAACmC,cAAf,CAFF,SAFF,eAME,gCAAC,eAAD;AAAiB,IAAA,cAAc,EAAEnC,KAAK,CAACmC;AAAvC,IANF,eAOE,gCAAC,kBAAD,qBACE;AAAG,IAAA,KAAK,EAAE;AAAEsB,MAAAA,UAAU,EAAE,GAAd;AAAmB1B,MAAAA,YAAY,EAAE;AAAjC;AAAV,+CADF,eAIE;AAAI,IAAA,KAAK,EAAE;AAAE2B,MAAAA,WAAW,EAAE,EAAf;AAAmBC,MAAAA,SAAS,EAAE;AAA9B;AAAX,kBACE,mDACM,GADN,eAEE;AACE,IAAA,IAAI,EAAC,0CADP;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,GAAG,EAAC;AAHN,6BAFF,EAQO,GARP,gCADF,eAYE,mDACM,GADN,eAEE;AACE,IAAA,IAAI,EAAC,0BADP;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,GAAG,EAAC;AAHN,uBAFF,EAQO,GARP,8DAZF,eAuBE,+HAEe,GAFf,eAGE;AACE,IAAA,IAAI,EAAC,sEADP;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,GAAG,EAAC;AAHN,oBAHF,MAvBF,CAJF,CAPF,CADF,CADF,EAoDEvD,QAAQ,CAACC,IApDX,CADmC;AAAA,CAA9B;;;AAwDP,IAAMuD,cAAc,GAAG;AACrBC,EAAAA,oBAAoB,EAAE,IADD;AAErBC,EAAAA,YAAY,EAAE,EAFO;AAGrBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,EAAE,EAAE,QADA;AAEJC,IAAAA,QAAQ,EAAE,SAFN;AAGJ1B,IAAAA,IAAI,EAAE,UAHF;AAIJ2B,IAAAA,QAAQ,EAAEC,eAASC,GAJf;AAKJC,IAAAA,WAAW,EAAE,SALT;AAMJC,IAAAA,UAAU,EAAE;AANR,GAHe;AAWrBC,EAAAA,YAAY,EAAE,EAXO;AAYrBC,EAAAA,GAAG,EAAE;AACHR,IAAAA,EAAE,EAAE,SADD;AAEHzB,IAAAA,IAAI,EAAE;AAFH;AAZgB,CAAvB,C,CAkBA;;AACO,IAAMkC,UAAU,gBAAG,uBAAW,UAACzE,KAAD,EAAQ0E,GAAR,EAAgB;AACnD,MAAMvE,YAAY,GAAG,wBAArB;AACA,MAAQwE,YAAR,GAAsCxE,YAAtC,CAAQwE,YAAR;AAAA,MAAsBC,WAAtB,GAAsCzE,YAAtC,CAAsByE,WAAtB;AACA;AACF;AACA;;AACE,wBAAU,YAAM;AACdA,IAAAA,WAAW,CAAC,wBAAMD,YAAY,CAACE,KAAnB,EAA0B7E,KAAK,CAAC6E,KAAhC,CAAD,CAAX;AACD,GAFD,EAEG,CAAC7E,KAAK,CAAC6E,KAAP,CAFH;AAIA,sBACE,+EACE,gCAAC,iBAAD;AACE,IAAA,KAAK,EAAE;AAAEhC,MAAAA,IAAI,EAAE,CAAR;AAAWiC,MAAAA,QAAQ,EAAE;AAArB;AADT,KAEM9E,KAFN;AAGE,IAAA,GAAG,EAAE0E,GAHP;AAIE,IAAA,YAAY,EAAEvE,YAJhB;AAKE,IAAA,cAAc,EAAEyD,cALlB;AAME,IAAA,kBAAkB,EAAE;AAClBmB,MAAAA,mBAAmB,EAAEJ,YAAY,CAACK,WAAb,CAAyBD,mBAD5B;AAElBE,MAAAA,eAAe,EAAEN,YAAY,CAACK,WAAb,CAAyBC;AAFxB;AANtB,KADF,eAYE,gCAAC,gBAAD;AAAkB,IAAA,cAAc,EAAEjF,KAAK,CAACmC;AAAxC,IAZF,eAaE,gCAAC,cAAD;AACE,IAAA,IAAI,EAAEwC,YAAY,CAACK,WAAb,CAAyBC,eADjC;AAEE,IAAA,YAAY,EAAE9E;AAFhB,IAbF,CADF;AAoBD,CA9ByB,CAAnB","sourcesContent":["import { PROVIDER } from '@botonic/core'\nimport merge from 'lodash.merge'\nimport QRCode from 'qrcode.react'\nimport React, { forwardRef, useEffect, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport styled from 'styled-components'\n\nimport { useWebchat } from '../../webchat/hooks'\nimport { SessionView } from '../../webchat/session-view'\nimport MessengerLogo from './assets/messenger.svg'\nimport Open from './assets/open.svg'\nimport OpenNewWindow from './assets/open-new-window.svg'\nimport TelegramLogo from './assets/telegram.svg'\nimport WebchatLogo from './assets/webchat.svg'\nimport WhatsappLogo from './assets/whatsapp.svg'\nimport { Webchat } from './webchat'\n\nexport const DebugTab = styled.div`\n position: fixed;\n left: 0;\n top: 0;\n width: ${props => (props.show ? '350px' : '32px')};\n height: ${props => (props.show ? '100%' : '42px')};\n`\n\n// We want the debug tab to be rendered in the <body> even if the\n// webchat is being rendered in a shadowDOM, that's why we need a portal\nexport const DebugTabPortal = ({ webchatHooks, ...props }) =>\n createPortal(\n <DebugTab {...props}>\n <SessionView webchatHooks={webchatHooks} />\n </DebugTab>,\n document.body\n )\n\nconst ChannelCardLabel = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 2px;\n img {\n width: 18px;\n height: 18px;\n }\n`\n\nconst ChannelCardAction = styled.a`\n transition: all 0.2s ease;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n padding: 8px 12px;\n background: #383f55;\n border-radius: 4px;\n font-family: Inter;\n font-style: normal;\n font-weight: 600;\n font-size: 13px;\n line-height: 21px;\n display: flex;\n align-items: center;\n color: #2df2ff;\n :hover {\n background: #14171f;\n }\n`\n\nconst ChannelCardText = styled.div`\n font-style: normal;\n font-weight: normal;\n font-size: 13px;\n line-height: 26px;\n`\n\nconst ChannelCard = ({\n label,\n icon,\n isOpen,\n onClick,\n onActionClick,\n children,\n className,\n}) => {\n return (\n <div className={className} onClick={onClick}>\n <ChannelCardLabel>\n <div>{label}</div>\n <img src={icon} />\n </ChannelCardLabel>\n {isOpen && children}\n </div>\n )\n}\n\nconst ChannelCardStyled = styled(ChannelCard)`\n transition: all 0.4s ease;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n margin-right: 20px;\n padding: 16px;\n overflow: hidden;\n cursor: ${({ isOpen }) => (isOpen ? 'auto' : 'pointer')};\n width: 160px;\n height: ${({ isOpen }) => (isOpen ? '275px' : '48px')};\n\n border: 1px solid #ffffff;\n box-sizing: border-box;\n border-radius: 4px;\n\n font-family: Inter;\n font-style: normal;\n font-weight: 600;\n font-size: 15px;\n line-height: 18px;\n\n color: ${({ isOpen }) => (isOpen ? '#383F55' : '#FFFFFF')};\n background-color: ${({ isOpen }) => (isOpen ? '#FFFFFF' : 'transparent')};\n\n &:hover {\n color: #383f55;\n background-color: #ffffff;\n }\n`\n\nconst ChannelCardMessaging = ({ url }) => (\n <>\n <ChannelCardText>Phone:</ChannelCardText>\n <div>\n <QRCode\n value={url}\n size={128}\n bgColor={'#ffffff'}\n fgColor={'#000000'}\n level={'Q'}\n includeMargin={false}\n renderAs={'svg'}\n />\n </div>\n <ChannelCardText>Browser:</ChannelCardText>\n <ChannelCardAction onClick={() => window.open(url, '_blank')}>\n Open\n <img src={OpenNewWindow} />\n </ChannelCardAction>\n </>\n)\n\nconst ChannelCardWebchat = () => (\n <div\n style={{\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n alignItems: 'stretch',\n }}\n >\n <ChannelCardText></ChannelCardText>\n <ChannelCardText style={{ lineHeight: '19px' }}>\n <strong style={{ marginBottom: 2 }}>Right here!</strong>\n <br></br>\n Click the chat icon on the bottom right corner or click open below.\n </ChannelCardText>\n <ChannelCardAction onClick={() => window.Botonic.open()}>\n Open\n <img src={Open} />\n </ChannelCardAction>\n </div>\n)\n\nconst ChannelSelector = ({ playgroundCode }) => {\n const [channel, setChannel] = useState(0)\n const channels = [\n {\n name: 'Whatsapp',\n url: `https://wa.me/34631914102?text=CODE%3D${playgroundCode}`,\n logo: WhatsappLogo,\n },\n {\n name: 'Messenger',\n url: `https://m.me/BotonicPlayground?ref=CODE%3D${playgroundCode}`,\n logo: MessengerLogo,\n },\n {\n name: 'Telegram',\n url: `https://t.me/BotonicPlaygroundBot?start=CODE%3D${playgroundCode}`,\n logo: TelegramLogo,\n },\n {\n name: 'Webchat',\n logo: WebchatLogo,\n },\n ]\n return (\n <div\n style={{\n display: 'flex',\n flex: 'none',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'flex-start',\n height: 275,\n }}\n >\n {channels.map((c, i) => (\n <ChannelCardStyled\n key={i}\n label={c.name}\n icon={c.logo}\n isOpen={channels[channel].name == c.name}\n onClick={() => setChannel(i)}\n >\n {c.name === 'Webchat' ? (\n <ChannelCardWebchat />\n ) : (\n <ChannelCardMessaging url={c.url} />\n )}\n </ChannelCardStyled>\n ))}\n </div>\n )\n}\n\nconst PlaygroundTitle = styled.h1`\n font-family: Inter;\n font-style: normal;\n font-weight: bold;\n font-size: 38px;\n line-height: 62px;\n letter-spacing: -0.02em;\n color: #ffffff;\n`\n\nconst PlaygroundSubtitle = styled.h3`\n font-family: Inter;\n font-style: normal;\n font-weight: normal;\n font-size: 17px;\n line-height: 26px;\n letter-spacing: -0.02em;\n color: #ffffff;\n`\n\nconst PlaygroundHelpText = styled.div`\n font-family: Inter;\n font-style: normal;\n font-weight: normal;\n font-size: 15px;\n line-height: 38px;\n letter-spacing: -0.02em;\n color: #cccccc;\n a {\n color: #2df2ff;\n text-decoration: none;\n }\n`\n\nexport const Playground = styled.div`\n z-index: -1;\n position: fixed;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: start;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n min-height: min-content;\n background: #383f55;\n`\n\nexport const PlaygroundContent = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: start;\n width: 100%;\n max-width: 800px;\n padding: 60px 0px;\n`\n\nexport const PlaygroundPortal = props =>\n createPortal(\n <Playground {...props}>\n <PlaygroundContent>\n <PlaygroundTitle>Your Botonic app is up and running!</PlaygroundTitle>\n <PlaygroundSubtitle>\n Try your app now using the code{' '}\n <strong>{props.playgroundCode}</strong> on:\n </PlaygroundSubtitle>\n <ChannelSelector playgroundCode={props.playgroundCode} />\n <PlaygroundHelpText>\n <p style={{ fontWeight: 600, marginBottom: 0 }}>\n Here some resources to get you started:\n </p>\n <ol style={{ paddingLeft: 16, marginTop: 0 }}>\n <li>\n Our{' '}\n <a\n href='https://botonic.io/docs/getting-started/'\n target='_blank'\n rel='noreferrer'\n >\n getting started guide\n </a>{' '}\n has some great first steps.\n </li>\n <li>\n Our{' '}\n <a\n href='https://slack.botonic.io'\n target='_blank'\n rel='noreferrer'\n >\n slack community\n </a>{' '}\n is full of friendly humans who can help answer questions.\n </li>\n <li>\n If you want to pair with a Botonic engineer, grab a slot at one of\n our upcoming{' '}\n <a\n href='https://botonic.io/blog/2021/03/10/introducing-botonic-office-hours/'\n target='_blank'\n rel='noreferrer'\n >\n office hours\n </a>\n .\n </li>\n </ol>\n </PlaygroundHelpText>\n </PlaygroundContent>\n </Playground>,\n document.body\n )\n\nconst initialSession = {\n is_first_interaction: true,\n last_session: {},\n user: {\n id: '000001',\n username: 'johndoe',\n name: 'John Doe',\n provider: PROVIDER.DEV,\n provider_id: '0000000',\n extra_data: {},\n },\n organization: '',\n bot: {\n id: '0000000',\n name: 'botName',\n },\n}\n\n// eslint-disable-next-line react/display-name\nexport const WebchatDev = forwardRef((props, ref) => {\n const webchatHooks = useWebchat()\n const { webchatState, updateTheme } = webchatHooks\n /* TODO: webchatState.theme should be included in the dependencies array\n together with props.theme. The problem is that this effect modifies webchatState\n so we enter an infinite rerender loop. */\n useEffect(() => {\n updateTheme(merge(webchatState.theme, props.theme))\n }, [props.theme])\n\n return (\n <>\n <Webchat\n style={{ flex: 1, position: 'relative' }}\n {...props}\n ref={ref}\n webchatHooks={webchatHooks}\n initialSession={initialSession}\n initialDevSettings={{\n keepSessionOnReload: webchatState.devSettings.keepSessionOnReload,\n showSessionView: webchatState.devSettings.showSessionView,\n }}\n />\n <PlaygroundPortal playgroundCode={props.playgroundCode} />\n <DebugTabPortal\n show={webchatState.devSettings.showSessionView}\n webchatHooks={webchatHooks}\n />\n </>\n )\n})\n"],"file":"webchat-dev.js"}