@telia-ace/widget-conversation 1.0.4 → 1.0.8
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.
- package/lib/conversation-controller.js +2 -2
- package/lib/ui/conversation/conversation-content.js +21 -18
- package/lib/ui/conversation/conversation-input.js +6 -0
- package/lib/ui/conversation/conversation-styles.js +2 -2
- package/lib/ui/conversation/message-types/agent.js +1 -1
- package/lib/ui/conversation/message-types/custom.js +1 -1
- package/lib/ui/conversation/message-types/timestamp.js +1 -1
- package/lib/ui/conversation/message-types/user.js +1 -1
- package/lib-esm/conversation-controller.js +2 -2
- package/lib-esm/ui/conversation/conversation-content.js +21 -18
- package/lib-esm/ui/conversation/conversation-input.js +6 -0
- package/lib-esm/ui/conversation/conversation-styles.js +2 -2
- package/lib-esm/ui/conversation/message-types/agent.js +1 -1
- package/lib-esm/ui/conversation/message-types/custom.js +1 -1
- package/lib-esm/ui/conversation/message-types/timestamp.js +1 -1
- package/lib-esm/ui/conversation/message-types/user.js +1 -1
- package/package.json +45 -42
|
@@ -60,7 +60,7 @@ var getNormalizedMessageSettings = function (settings) {
|
|
|
60
60
|
var content;
|
|
61
61
|
var key = (0, widget_utilities_1.uuid)();
|
|
62
62
|
var timestamp = Date.now();
|
|
63
|
-
if (settings.length > -1
|
|
63
|
+
if (Array.isArray(settings) && settings.length > -1) {
|
|
64
64
|
if (typeof settings[0] === 'string') {
|
|
65
65
|
content = { items: [settings] };
|
|
66
66
|
}
|
|
@@ -72,7 +72,7 @@ var getNormalizedMessageSettings = function (settings) {
|
|
|
72
72
|
content = { body: settings };
|
|
73
73
|
}
|
|
74
74
|
else {
|
|
75
|
-
settings = settings;
|
|
75
|
+
settings = settings || {};
|
|
76
76
|
if (settings.type) {
|
|
77
77
|
content = __assign({}, settings);
|
|
78
78
|
}
|
|
@@ -106,7 +106,7 @@ var ConversationContent = function (_a) {
|
|
|
106
106
|
switch (item.type) {
|
|
107
107
|
case types_1.ConversationMessageListItemType.Header: {
|
|
108
108
|
return (react_1.default.createElement(ConversationListItem, { key: itemKey },
|
|
109
|
-
react_1.default.createElement(
|
|
109
|
+
react_1.default.createElement(HeaderText, null, item.content)));
|
|
110
110
|
}
|
|
111
111
|
case types_1.ConversationMessageListItemType.Text: {
|
|
112
112
|
return (react_1.default.createElement(ConversationListItem, { key: itemKey },
|
|
@@ -118,7 +118,8 @@ var ConversationContent = function (_a) {
|
|
|
118
118
|
}
|
|
119
119
|
case types_1.ConversationMessageListItemType.Separator: {
|
|
120
120
|
return (react_1.default.createElement(ConversationListItem, { key: itemKey, noPadding: true },
|
|
121
|
-
react_1.default.createElement(
|
|
121
|
+
react_1.default.createElement(SeparatorPadding, null,
|
|
122
|
+
react_1.default.createElement(Separator, null))));
|
|
122
123
|
}
|
|
123
124
|
case types_1.ConversationMessageListItemType.LinkList: {
|
|
124
125
|
return (react_1.default.createElement(ConversationListItem, { key: itemKey },
|
|
@@ -172,7 +173,7 @@ var ConversationContent = function (_a) {
|
|
|
172
173
|
actionKey: i,
|
|
173
174
|
};
|
|
174
175
|
}), renderItem: function (item) {
|
|
175
|
-
return (react_1.default.createElement(
|
|
176
|
+
return (react_1.default.createElement(FeedbackItem, { key: item.actionKey },
|
|
176
177
|
react_1.default.createElement(FeedbackButton, { className: "humany-feedback-button", disabled: false, "aria-pressed": true, "data-selected": true, "data-direction": 'vertical', onClick: function () {
|
|
177
178
|
dispatch('action', item.actionKey);
|
|
178
179
|
} },
|
|
@@ -200,34 +201,36 @@ var StyledForm = (0, styled_components_1.default)(widget_forms_1.FormComponent)(
|
|
|
200
201
|
var StyledHtml = (0, styled_components_1.default)(widget_ui_1.Html)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n white-space: pre-wrap;\n a {\n color: ", ";\n &:focus {\n ", ";\n }\n }\n"], ["\n white-space: pre-wrap;\n a {\n color: ", ";\n &:focus {\n ", ";\n }\n }\n"])), function (p) { return p.theme.colors.link; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && widget_ui_1.borderTabStyle; });
|
|
201
202
|
var StyledActionList = (0, styled_components_1.default)(widget_ui_1.List)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0;\n list-style: none;\n margin: 0 -", ";\n > li {\n margin: ", ";\n }\n"], ["\n padding: 0;\n list-style: none;\n margin: 0 -", ";\n > li {\n margin: ", ";\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
202
203
|
var StyledButtonList = (0, styled_components_1.default)(widget_ui_1.List)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n list-style: none;\n > li {\n margin: ", " ", ";\n margin-left: 0;\n display: inline-block;\n }\n"], ["\n padding: 0;\n list-style: none;\n > li {\n margin: ", " ", ";\n margin-left: 0;\n display: inline-block;\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
203
|
-
var StyledButtonListButton = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n display: block;\n background-color: ", ";\n width: 100%;\n color: #fff;\n &:focus {\n ", "\n }\n"], ["\n ", ";\n display: block;\n background-color: ", ";\n width: 100%;\n color: #fff;\n &:focus {\n ", "\n }\n"])), widget_ui_1.buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
|
|
204
|
+
var StyledButtonListButton = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n display: block;\n text-align: left;\n background-color: ", ";\n width: 100%;\n color: #fff;\n &:focus {\n ", "\n }\n"], ["\n ", ";\n display: block;\n text-align: left;\n background-color: ", ";\n width: 100%;\n color: #fff;\n &:focus {\n ", "\n }\n"])), widget_ui_1.buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
|
|
204
205
|
var _a;
|
|
205
206
|
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n background-color: transparent;\n "], ["\n ", "\n background-color: transparent;\n "])), widget_ui_1.borderTabStyle);
|
|
206
207
|
});
|
|
207
208
|
var StyledLinkList = (0, styled_components_1.default)(widget_ui_1.List)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 0;\n list-style: none;\n > li {\n margin-bottom: ", ";\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n"], ["\n padding: 0;\n list-style: none;\n > li {\n margin-bottom: ", ";\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
208
|
-
var
|
|
209
|
+
var HeaderText = styled_components_1.default.strong(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: ", ";\n"], ["\n font-size: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; });
|
|
210
|
+
var StyledLinkButton = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: block;\n background-color: transparent;\n text-align: left;\n border: none;\n padding: 0;\n font-weight: 300;\n font-family: inherit;\n cursor: pointer;\n color: ", ";\n\n ", "\n"], ["\n display: block;\n background-color: transparent;\n text-align: left;\n border: none;\n padding: 0;\n font-weight: 300;\n font-family: inherit;\n cursor: pointer;\n color: ", ";\n\n ", "\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
|
|
209
211
|
var _a, _b;
|
|
210
|
-
return p.help && (0, styled_components_1.css)(
|
|
212
|
+
return p.help && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: ", ";\n text-decoration: underline;\n\n i,\n svg {\n margin-left: ", ";\n }\n "], ["\n color: ", ";\n text-decoration: underline;\n\n i,\n svg {\n margin-left: ", ";\n }\n "])), (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text, (_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small);
|
|
211
213
|
});
|
|
212
|
-
var StyledActionButton = styled_components_1.default.button(
|
|
214
|
+
var StyledActionButton = styled_components_1.default.button(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", ";\n display: block;\n background-color: ", ";\n width: 100%;\n color: #fff;\n font-family: Lato;\n font-size: ", ";\n font-weight: 300;\n &:focus {\n ", "\n }\n"], ["\n ", ";\n display: block;\n background-color: ", ";\n width: 100%;\n color: #fff;\n font-family: Lato;\n font-size: ", ";\n font-weight: 300;\n &:focus {\n ", "\n }\n"])), widget_ui_1.buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; }, function (p) {
|
|
213
215
|
var _a;
|
|
214
|
-
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(
|
|
216
|
+
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n background-color: transparent;\n "], ["\n ", "\n background-color: transparent;\n "])), widget_ui_1.borderTabStyle);
|
|
215
217
|
});
|
|
216
|
-
var
|
|
217
|
-
var
|
|
218
|
-
var
|
|
219
|
-
var
|
|
218
|
+
var SeparatorPadding = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n padding-top: calc(", " - ", ");\n padding-bottom: calc(", " - ", ");\n"], ["\n padding-top: calc(", " - ", ");\n padding-bottom: calc(", " - ", ");\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
219
|
+
var Separator = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: #efefef;\n height: 1px;\n width: 100%;\n"], ["\n background-color: #efefef;\n height: 1px;\n width: 100%;\n"])));
|
|
220
|
+
var NoGoodAlternativeWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n > i,\n svg {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n > i,\n svg {\n margin-right: ", ";\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
|
|
221
|
+
var ConversationListItem = styled_components_1.default.li(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n"])), function (p) { var _a; return (p.noPadding ? 0 : (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium); }, function (p) { var _a; return (p.noPadding ? 0 : (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium); });
|
|
222
|
+
var FeedbackItem = styled_components_1.default.li(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n @media (min-width: 768px) {\n display: list-item !important;\n margin-right: 0 !important;\n margin-top: ", " !important;\n }\n"], ["\n @media (min-width: 768px) {\n display: list-item !important;\n margin-right: 0 !important;\n margin-top: ", " !important;\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
223
|
+
var FeedbackButton = styled_components_1.default.button(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n @media (min-width: 768px) {\n min-width: 100%;\n margin-right: 0;\n }\n display: inline-block;\n font-size: ", ";\n border-color: ", " !important;\n font-weight: 300;\n && {\n margin-right: ", ";\n }\n ", "\n ", "\n ", "\n i {\n margin: 0 ", " 0 0;\n }\n span {\n }\n"], ["\n @media (min-width: 768px) {\n min-width: 100%;\n margin-right: 0;\n }\n display: inline-block;\n font-size: ", ";\n border-color: ", " !important;\n font-weight: 300;\n && {\n margin-right: ", ";\n }\n ", "\n ", "\n ", "\n i {\n margin: 0 ", " 0 0;\n }\n span {\n }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) {
|
|
220
224
|
var _a, _b;
|
|
221
|
-
return p['data-direction'] === 'horizontal' && (0, styled_components_1.css)(
|
|
225
|
+
return p['data-direction'] === 'horizontal' && (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n width: 225px;\n max-width: calc(50% - ", " - ", ");\n "], ["\n width: 225px;\n max-width: calc(50% - ", " - ", ");\n "])), (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large, (_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small);
|
|
222
226
|
}, function (p) {
|
|
223
|
-
return p['data-direction'] === 'vertical' && (0, styled_components_1.css)(
|
|
227
|
+
return p['data-direction'] === 'vertical' && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n min-width: 150px;\n "], ["\n min-width: 150px;\n "])));
|
|
224
228
|
}, function (p) {
|
|
225
229
|
var _a;
|
|
226
230
|
return (0, widget_ui_1.invertedHoverButton)({
|
|
227
|
-
|
|
228
|
-
primaryColor: (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
|
|
231
|
+
primaryColor: "".concat((_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary),
|
|
229
232
|
secondaryColor: '#FFFFFF',
|
|
230
233
|
});
|
|
231
|
-
}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }
|
|
234
|
+
}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
|
|
232
235
|
exports.default = ConversationContent;
|
|
233
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
236
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
|
|
@@ -103,6 +103,10 @@ var ConversationInput = function (_a) {
|
|
|
103
103
|
e.preventDefault();
|
|
104
104
|
}
|
|
105
105
|
};
|
|
106
|
+
var getCategories = function (e) {
|
|
107
|
+
e.preventDefault();
|
|
108
|
+
dispatch('action', 'burger-clicked');
|
|
109
|
+
};
|
|
106
110
|
var calculateHeight = function (value) {
|
|
107
111
|
if (multiline && inputRef.current) {
|
|
108
112
|
var scrollHeight = inputRef.current.scrollHeight;
|
|
@@ -133,6 +137,8 @@ var ConversationInput = function (_a) {
|
|
|
133
137
|
return null;
|
|
134
138
|
}
|
|
135
139
|
return (react_1.default.createElement(Wrapper, { grow: multiline, className: (0, widget_utilities_1.appendClassNames)('humany-conversation-input', className), "data-has-focus": inputFocus, scrollableCss: scrollableCss },
|
|
140
|
+
react_1.default.createElement(StyledButton, { disabled: inputDisabled, onClick: getCategories, title: sendButtonLabel, "aria-label": sendButtonLabel },
|
|
141
|
+
react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 22, symbol: { type: 'Svg', content: 'options' } })),
|
|
136
142
|
multiline ? (react_1.default.createElement(StyledTextArea, { value: inputText, onChange: onChange, onEnter: submit, disabled: inputDisabled, "aria-label": inputPlaceholder, placeholder: inputPlaceholder, onFocusChange: setInputFocus, type: 'textarea', rows: 1, ref: inputRef })) : (react_1.default.createElement(StyledInput, { value: inputText, onChange: onChange, onEnter: submit, disabled: inputDisabled, "aria-label": inputPlaceholder, placeholder: inputPlaceholder, onFocusChange: setInputFocus })),
|
|
137
143
|
react_1.default.createElement(StyledButton, { disabled: inputDisabled, onClick: submit, title: sendButtonLabel, "aria-label": sendButtonLabel },
|
|
138
144
|
react_1.default.createElement(SendSymbol, { size: 22, symbol: { type: 'Svg', content: 'send' }, hasContent: inputText && inputText.length }))));
|
|
@@ -36,7 +36,7 @@ exports.Loader = styled_components_1.default.div(templateObject_3 || (templateOb
|
|
|
36
36
|
exports.ContentBundle = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n grid-area: content;\n max-width: 100%;\n overflow: hidden;\n"], ["\n grid-area: content;\n max-width: 100%;\n overflow: hidden;\n"])));
|
|
37
37
|
exports.MessageTitle = (0, styled_components_1.default)(widget_ui_1.Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: normal;\n margin: 0;\n"], ["\n font-size: ", ";\n font-weight: normal;\n margin: 0;\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
38
38
|
exports.MessageContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
39
|
-
exports.MessageContent = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border-radius: 5px; // TODO: prop?\n margin-top: ", ";\n display: inline-block;\n && > * {\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n }\n max-width: 100%;\n ", "\n\n ", "\n ", ";\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\n ", ";\n\n transition: border-radius 500ms linear;\n"], ["\n background-color: ", ";\n color: ", ";\n border-radius: 5px; // TODO: prop?\n margin-top: ", ";\n display: inline-block;\n && > * {\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n }\n max-width: 100%;\n ", "\n\n ", "\n ", ";\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\n ", ";\n\n transition: border-radius 500ms linear;\n"])), function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.accent); }, function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text); }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.fullWidth && 'width: 100%;'; }, function (p) {
|
|
39
|
+
exports.MessageContent = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border-radius: 5px; // TODO: prop?\n border: 1px solid rgb(231, 231, 231);\n padding-top: calc(", " - ", ");\n padding-bottom: calc(", " - ", ");\n margin-top: ", ";\n display: inline-block;\n && > * {\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n }\n max-width: 100%;\n ", "\n\n ", "\n ", ";\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\n ", ";\n\n transition: border-radius 500ms linear;\n"], ["\n background-color: ", ";\n color: ", ";\n border-radius: 5px; // TODO: prop?\n border: 1px solid rgb(231, 231, 231);\n padding-top: calc(", " - ", ");\n padding-bottom: calc(", " - ", ");\n margin-top: ", ";\n display: inline-block;\n && > * {\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n }\n max-width: 100%;\n ", "\n\n ", "\n ", ";\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\n ", ";\n\n transition: border-radius 500ms linear;\n"])), function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.accent); }, function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text); }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.fullWidth && 'width: 100%;'; }, function (p) {
|
|
40
40
|
return !p.user && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: ", ";\n "], ["\n border: ", ";\n "])), p.theme.border);
|
|
41
41
|
}, function (p) { return p.user && 'margin-left: auto'; }, function (p) {
|
|
42
42
|
return p.stacked === 'first' &&
|
|
@@ -59,7 +59,7 @@ exports.MessageContent = styled_components_1.default.div(templateObject_15 || (t
|
|
|
59
59
|
}, function (p) {
|
|
60
60
|
return !p.stacked && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), p.user ? 'border-bottom-right-radius: 1px;' : 'border-bottom-left-radius: 1px;');
|
|
61
61
|
});
|
|
62
|
-
exports.MessageContentPart = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n padding: ", ";\n\n ", "\n\n margin-bottom: ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n padding: ", ";\n\n ", "\n\n margin-bottom: ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) {
|
|
62
|
+
exports.MessageContentPart = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n padding: ", " ", ";\n\n ", "\n\n margin-bottom: ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n padding: ", " ", ";\n\n ", "\n\n margin-bottom: ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) {
|
|
63
63
|
return p.noPadding && (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])));
|
|
64
64
|
}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
65
65
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
@@ -46,7 +46,7 @@ var AgentMessage = function (_a) {
|
|
|
46
46
|
children,
|
|
47
47
|
react_1.default.createElement(timestamp_1.default, { name: name, timestamp: timestamp })));
|
|
48
48
|
};
|
|
49
|
-
exports.StyledAgentMessage = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: grid;\n margin-right:
|
|
49
|
+
exports.StyledAgentMessage = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: grid;\n margin-right: 10%;\n width: 90%;\n ", ";\n"], ["\n display: grid;\n margin-right: 10%;\n width: 90%;\n ", ";\n"])), function (p) {
|
|
50
50
|
return p.hasAvatar
|
|
51
51
|
? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-template-columns: auto 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'avatar content'\n '. info';\n "], ["\n grid-template-columns: auto 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'avatar content'\n '. info';\n "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n grid-template-columns: 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'content'\n 'info';\n "], ["\n grid-template-columns: 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'content'\n 'info';\n "])));
|
|
52
52
|
});
|
|
@@ -39,7 +39,7 @@ var react_1 = __importStar(require("react"));
|
|
|
39
39
|
var conversation_styles_1 = require("../conversation-styles");
|
|
40
40
|
var CustomMessage = function (props) {
|
|
41
41
|
var CustomComponent = (0, widget_ui_1.useComponent)(props.type);
|
|
42
|
-
if (
|
|
42
|
+
if (!CustomComponent) {
|
|
43
43
|
return null;
|
|
44
44
|
}
|
|
45
45
|
return (react_1.default.createElement(react_1.Suspense, { fallback: null },
|
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
var react_1 = __importDefault(require("react"));
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
var StyledTimestamp = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n font-size: ", ";\n font-weight: 300;\n }\n margin: 0;\n line-height: 1.5em;\n grid-area: info;\n color: ", ";\n"], ["\n && {\n font-size: ", ";\n font-weight: 300;\n }\n margin: 0;\n line-height: 1.5em;\n grid-area: info;\n color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
|
|
12
|
+
var StyledTimestamp = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n font-size: ", ";\n font-weight: 300;\n }\n padding-top: ", ";\n margin: 0;\n line-height: 1.5em;\n grid-area: info;\n color: ", ";\n"], ["\n && {\n font-size: ", ";\n font-weight: 300;\n }\n padding-top: ", ";\n margin: 0;\n line-height: 1.5em;\n grid-area: info;\n color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
|
|
13
13
|
var getTimestamp = function (raw) {
|
|
14
14
|
return new Date(raw).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
15
15
|
};
|
|
@@ -19,6 +19,6 @@ var UserMessage = function (_a) {
|
|
|
19
19
|
children,
|
|
20
20
|
react_1.default.createElement(timestamp_1.default, { name: userLabel, timestamp: timestamp })));
|
|
21
21
|
};
|
|
22
|
-
var StyledUserMessage = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-left:
|
|
22
|
+
var StyledUserMessage = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-left: 10%;\n width: 90%;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n margin-left: 10%;\n width: 90%;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
23
23
|
exports.default = UserMessage;
|
|
24
24
|
var templateObject_1;
|
|
@@ -57,7 +57,7 @@ export var getNormalizedMessageSettings = function (settings) {
|
|
|
57
57
|
var content;
|
|
58
58
|
var key = uuid();
|
|
59
59
|
var timestamp = Date.now();
|
|
60
|
-
if (settings.length > -1
|
|
60
|
+
if (Array.isArray(settings) && settings.length > -1) {
|
|
61
61
|
if (typeof settings[0] === 'string') {
|
|
62
62
|
content = { items: [settings] };
|
|
63
63
|
}
|
|
@@ -69,7 +69,7 @@ export var getNormalizedMessageSettings = function (settings) {
|
|
|
69
69
|
content = { body: settings };
|
|
70
70
|
}
|
|
71
71
|
else {
|
|
72
|
-
settings = settings;
|
|
72
|
+
settings = settings || {};
|
|
73
73
|
if (settings.type) {
|
|
74
74
|
content = __assign({}, settings);
|
|
75
75
|
}
|
|
@@ -81,7 +81,7 @@ var ConversationContent = function (_a) {
|
|
|
81
81
|
switch (item.type) {
|
|
82
82
|
case ConversationMessageListItemType.Header: {
|
|
83
83
|
return (React.createElement(ConversationListItem, { key: itemKey },
|
|
84
|
-
React.createElement(
|
|
84
|
+
React.createElement(HeaderText, null, item.content)));
|
|
85
85
|
}
|
|
86
86
|
case ConversationMessageListItemType.Text: {
|
|
87
87
|
return (React.createElement(ConversationListItem, { key: itemKey },
|
|
@@ -93,7 +93,8 @@ var ConversationContent = function (_a) {
|
|
|
93
93
|
}
|
|
94
94
|
case ConversationMessageListItemType.Separator: {
|
|
95
95
|
return (React.createElement(ConversationListItem, { key: itemKey, noPadding: true },
|
|
96
|
-
React.createElement(
|
|
96
|
+
React.createElement(SeparatorPadding, null,
|
|
97
|
+
React.createElement(Separator, null))));
|
|
97
98
|
}
|
|
98
99
|
case ConversationMessageListItemType.LinkList: {
|
|
99
100
|
return (React.createElement(ConversationListItem, { key: itemKey },
|
|
@@ -147,7 +148,7 @@ var ConversationContent = function (_a) {
|
|
|
147
148
|
actionKey: i,
|
|
148
149
|
};
|
|
149
150
|
}), renderItem: function (item) {
|
|
150
|
-
return (React.createElement(
|
|
151
|
+
return (React.createElement(FeedbackItem, { key: item.actionKey },
|
|
151
152
|
React.createElement(FeedbackButton, { className: "humany-feedback-button", disabled: false, "aria-pressed": true, "data-selected": true, "data-direction": 'vertical', onClick: function () {
|
|
152
153
|
dispatch('action', item.actionKey);
|
|
153
154
|
} },
|
|
@@ -175,34 +176,36 @@ var StyledForm = styled(FormComponent)(templateObject_1 || (templateObject_1 = _
|
|
|
175
176
|
var StyledHtml = styled(Html)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n white-space: pre-wrap;\n a {\n color: ", ";\n &:focus {\n ", ";\n }\n }\n"], ["\n white-space: pre-wrap;\n a {\n color: ", ";\n &:focus {\n ", ";\n }\n }\n"])), function (p) { return p.theme.colors.link; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; });
|
|
176
177
|
var StyledActionList = styled(List)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0;\n list-style: none;\n margin: 0 -", ";\n > li {\n margin: ", ";\n }\n"], ["\n padding: 0;\n list-style: none;\n margin: 0 -", ";\n > li {\n margin: ", ";\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
177
178
|
var StyledButtonList = styled(List)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n list-style: none;\n > li {\n margin: ", " ", ";\n margin-left: 0;\n display: inline-block;\n }\n"], ["\n padding: 0;\n list-style: none;\n > li {\n margin: ", " ", ";\n margin-left: 0;\n display: inline-block;\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
178
|
-
var StyledButtonListButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n display: block;\n background-color: ", ";\n width: 100%;\n color: #fff;\n &:focus {\n ", "\n }\n"], ["\n ", ";\n display: block;\n background-color: ", ";\n width: 100%;\n color: #fff;\n &:focus {\n ", "\n }\n"])), buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
|
|
179
|
+
var StyledButtonListButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n display: block;\n text-align: left;\n background-color: ", ";\n width: 100%;\n color: #fff;\n &:focus {\n ", "\n }\n"], ["\n ", ";\n display: block;\n text-align: left;\n background-color: ", ";\n width: 100%;\n color: #fff;\n &:focus {\n ", "\n }\n"])), buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
|
|
179
180
|
var _a;
|
|
180
181
|
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n background-color: transparent;\n "], ["\n ", "\n background-color: transparent;\n "])), borderTabStyle);
|
|
181
182
|
});
|
|
182
183
|
var StyledLinkList = styled(List)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 0;\n list-style: none;\n > li {\n margin-bottom: ", ";\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n"], ["\n padding: 0;\n list-style: none;\n > li {\n margin-bottom: ", ";\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
183
|
-
var
|
|
184
|
+
var HeaderText = styled.strong(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: ", ";\n"], ["\n font-size: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; });
|
|
185
|
+
var StyledLinkButton = styled.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: block;\n background-color: transparent;\n text-align: left;\n border: none;\n padding: 0;\n font-weight: 300;\n font-family: inherit;\n cursor: pointer;\n color: ", ";\n\n ", "\n"], ["\n display: block;\n background-color: transparent;\n text-align: left;\n border: none;\n padding: 0;\n font-weight: 300;\n font-family: inherit;\n cursor: pointer;\n color: ", ";\n\n ", "\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
|
|
184
186
|
var _a, _b;
|
|
185
|
-
return p.help && css(
|
|
187
|
+
return p.help && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: ", ";\n text-decoration: underline;\n\n i,\n svg {\n margin-left: ", ";\n }\n "], ["\n color: ", ";\n text-decoration: underline;\n\n i,\n svg {\n margin-left: ", ";\n }\n "])), (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text, (_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small);
|
|
186
188
|
});
|
|
187
|
-
var StyledActionButton = styled.button(
|
|
189
|
+
var StyledActionButton = styled.button(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", ";\n display: block;\n background-color: ", ";\n width: 100%;\n color: #fff;\n font-family: Lato;\n font-size: ", ";\n font-weight: 300;\n &:focus {\n ", "\n }\n"], ["\n ", ";\n display: block;\n background-color: ", ";\n width: 100%;\n color: #fff;\n font-family: Lato;\n font-size: ", ";\n font-weight: 300;\n &:focus {\n ", "\n }\n"])), buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; }, function (p) {
|
|
188
190
|
var _a;
|
|
189
|
-
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(
|
|
191
|
+
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n background-color: transparent;\n "], ["\n ", "\n background-color: transparent;\n "])), borderTabStyle);
|
|
190
192
|
});
|
|
191
|
-
var
|
|
192
|
-
var
|
|
193
|
-
var
|
|
194
|
-
var
|
|
193
|
+
var SeparatorPadding = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n padding-top: calc(", " - ", ");\n padding-bottom: calc(", " - ", ");\n"], ["\n padding-top: calc(", " - ", ");\n padding-bottom: calc(", " - ", ");\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
194
|
+
var Separator = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: #efefef;\n height: 1px;\n width: 100%;\n"], ["\n background-color: #efefef;\n height: 1px;\n width: 100%;\n"])));
|
|
195
|
+
var NoGoodAlternativeWrapper = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n > i,\n svg {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n > i,\n svg {\n margin-right: ", ";\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
|
|
196
|
+
var ConversationListItem = styled.li(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n"])), function (p) { var _a; return (p.noPadding ? 0 : (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium); }, function (p) { var _a; return (p.noPadding ? 0 : (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium); });
|
|
197
|
+
var FeedbackItem = styled.li(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n @media (min-width: 768px) {\n display: list-item !important;\n margin-right: 0 !important;\n margin-top: ", " !important;\n }\n"], ["\n @media (min-width: 768px) {\n display: list-item !important;\n margin-right: 0 !important;\n margin-top: ", " !important;\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
198
|
+
var FeedbackButton = styled.button(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n @media (min-width: 768px) {\n min-width: 100%;\n margin-right: 0;\n }\n display: inline-block;\n font-size: ", ";\n border-color: ", " !important;\n font-weight: 300;\n && {\n margin-right: ", ";\n }\n ", "\n ", "\n ", "\n i {\n margin: 0 ", " 0 0;\n }\n span {\n }\n"], ["\n @media (min-width: 768px) {\n min-width: 100%;\n margin-right: 0;\n }\n display: inline-block;\n font-size: ", ";\n border-color: ", " !important;\n font-weight: 300;\n && {\n margin-right: ", ";\n }\n ", "\n ", "\n ", "\n i {\n margin: 0 ", " 0 0;\n }\n span {\n }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) {
|
|
195
199
|
var _a, _b;
|
|
196
|
-
return p['data-direction'] === 'horizontal' && css(
|
|
200
|
+
return p['data-direction'] === 'horizontal' && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n width: 225px;\n max-width: calc(50% - ", " - ", ");\n "], ["\n width: 225px;\n max-width: calc(50% - ", " - ", ");\n "])), (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large, (_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small);
|
|
197
201
|
}, function (p) {
|
|
198
|
-
return p['data-direction'] === 'vertical' && css(
|
|
202
|
+
return p['data-direction'] === 'vertical' && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n min-width: 150px;\n "], ["\n min-width: 150px;\n "])));
|
|
199
203
|
}, function (p) {
|
|
200
204
|
var _a;
|
|
201
205
|
return invertedHoverButton({
|
|
202
|
-
|
|
203
|
-
primaryColor: (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
|
|
206
|
+
primaryColor: "".concat((_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary),
|
|
204
207
|
secondaryColor: '#FFFFFF',
|
|
205
208
|
});
|
|
206
|
-
}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }
|
|
209
|
+
}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
|
|
207
210
|
export default ConversationContent;
|
|
208
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
211
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
|
|
@@ -78,6 +78,10 @@ var ConversationInput = function (_a) {
|
|
|
78
78
|
e.preventDefault();
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
|
+
var getCategories = function (e) {
|
|
82
|
+
e.preventDefault();
|
|
83
|
+
dispatch('action', 'burger-clicked');
|
|
84
|
+
};
|
|
81
85
|
var calculateHeight = function (value) {
|
|
82
86
|
if (multiline && inputRef.current) {
|
|
83
87
|
var scrollHeight = inputRef.current.scrollHeight;
|
|
@@ -108,6 +112,8 @@ var ConversationInput = function (_a) {
|
|
|
108
112
|
return null;
|
|
109
113
|
}
|
|
110
114
|
return (React.createElement(Wrapper, { grow: multiline, className: appendClassNames('humany-conversation-input', className), "data-has-focus": inputFocus, scrollableCss: scrollableCss },
|
|
115
|
+
React.createElement(StyledButton, { disabled: inputDisabled, onClick: getCategories, title: sendButtonLabel, "aria-label": sendButtonLabel },
|
|
116
|
+
React.createElement(SymbolBadge, { size: 22, symbol: { type: 'Svg', content: 'options' } })),
|
|
111
117
|
multiline ? (React.createElement(StyledTextArea, { value: inputText, onChange: onChange, onEnter: submit, disabled: inputDisabled, "aria-label": inputPlaceholder, placeholder: inputPlaceholder, onFocusChange: setInputFocus, type: 'textarea', rows: 1, ref: inputRef })) : (React.createElement(StyledInput, { value: inputText, onChange: onChange, onEnter: submit, disabled: inputDisabled, "aria-label": inputPlaceholder, placeholder: inputPlaceholder, onFocusChange: setInputFocus })),
|
|
112
118
|
React.createElement(StyledButton, { disabled: inputDisabled, onClick: submit, title: sendButtonLabel, "aria-label": sendButtonLabel },
|
|
113
119
|
React.createElement(SendSymbol, { size: 22, symbol: { type: 'Svg', content: 'send' }, hasContent: inputText && inputText.length }))));
|
|
@@ -10,7 +10,7 @@ export var Loader = styled.div(templateObject_3 || (templateObject_3 = __makeTem
|
|
|
10
10
|
export var ContentBundle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n grid-area: content;\n max-width: 100%;\n overflow: hidden;\n"], ["\n grid-area: content;\n max-width: 100%;\n overflow: hidden;\n"])));
|
|
11
11
|
export var MessageTitle = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: normal;\n margin: 0;\n"], ["\n font-size: ", ";\n font-weight: normal;\n margin: 0;\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
12
12
|
export var MessageContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
13
|
-
export var MessageContent = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border-radius: 5px; // TODO: prop?\n margin-top: ", ";\n display: inline-block;\n && > * {\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n }\n max-width: 100%;\n ", "\n\n ", "\n ", ";\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\n ", ";\n\n transition: border-radius 500ms linear;\n"], ["\n background-color: ", ";\n color: ", ";\n border-radius: 5px; // TODO: prop?\n margin-top: ", ";\n display: inline-block;\n && > * {\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n }\n max-width: 100%;\n ", "\n\n ", "\n ", ";\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\n ", ";\n\n transition: border-radius 500ms linear;\n"])), function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.accent); }, function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text); }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.fullWidth && 'width: 100%;'; }, function (p) {
|
|
13
|
+
export var MessageContent = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border-radius: 5px; // TODO: prop?\n border: 1px solid rgb(231, 231, 231);\n padding-top: calc(", " - ", ");\n padding-bottom: calc(", " - ", ");\n margin-top: ", ";\n display: inline-block;\n && > * {\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n }\n max-width: 100%;\n ", "\n\n ", "\n ", ";\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\n ", ";\n\n transition: border-radius 500ms linear;\n"], ["\n background-color: ", ";\n color: ", ";\n border-radius: 5px; // TODO: prop?\n border: 1px solid rgb(231, 231, 231);\n padding-top: calc(", " - ", ");\n padding-bottom: calc(", " - ", ");\n margin-top: ", ";\n display: inline-block;\n && > * {\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n }\n max-width: 100%;\n ", "\n\n ", "\n ", ";\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\n ", ";\n\n transition: border-radius 500ms linear;\n"])), function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.accent); }, function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text); }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.fullWidth && 'width: 100%;'; }, function (p) {
|
|
14
14
|
return !p.user && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: ", ";\n "], ["\n border: ", ";\n "])), p.theme.border);
|
|
15
15
|
}, function (p) { return p.user && 'margin-left: auto'; }, function (p) {
|
|
16
16
|
return p.stacked === 'first' &&
|
|
@@ -33,7 +33,7 @@ export var MessageContent = styled.div(templateObject_15 || (templateObject_15 =
|
|
|
33
33
|
}, function (p) {
|
|
34
34
|
return !p.stacked && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), p.user ? 'border-bottom-right-radius: 1px;' : 'border-bottom-left-radius: 1px;');
|
|
35
35
|
});
|
|
36
|
-
export var MessageContentPart = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n padding: ", ";\n\n ", "\n\n margin-bottom: ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n padding: ", ";\n\n ", "\n\n margin-bottom: ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) {
|
|
36
|
+
export var MessageContentPart = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n padding: ", " ", ";\n\n ", "\n\n margin-bottom: ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n padding: ", " ", ";\n\n ", "\n\n margin-bottom: ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) {
|
|
37
37
|
return p.noPadding && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])));
|
|
38
38
|
}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
39
39
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
@@ -17,7 +17,7 @@ var AgentMessage = function (_a) {
|
|
|
17
17
|
children,
|
|
18
18
|
React.createElement(Timestamp, { name: name, timestamp: timestamp })));
|
|
19
19
|
};
|
|
20
|
-
export var StyledAgentMessage = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: grid;\n margin-right:
|
|
20
|
+
export var StyledAgentMessage = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: grid;\n margin-right: 10%;\n width: 90%;\n ", ";\n"], ["\n display: grid;\n margin-right: 10%;\n width: 90%;\n ", ";\n"])), function (p) {
|
|
21
21
|
return p.hasAvatar
|
|
22
22
|
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-template-columns: auto 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'avatar content'\n '. info';\n "], ["\n grid-template-columns: auto 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'avatar content'\n '. info';\n "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n grid-template-columns: 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'content'\n 'info';\n "], ["\n grid-template-columns: 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'content'\n 'info';\n "])));
|
|
23
23
|
});
|
|
@@ -14,7 +14,7 @@ import React, { Suspense } from 'react';
|
|
|
14
14
|
import { MessageContent, MessageContentPart } from '../conversation-styles';
|
|
15
15
|
var CustomMessage = function (props) {
|
|
16
16
|
var CustomComponent = useComponent(props.type);
|
|
17
|
-
if (
|
|
17
|
+
if (!CustomComponent) {
|
|
18
18
|
return null;
|
|
19
19
|
}
|
|
20
20
|
return (React.createElement(Suspense, { fallback: null },
|
|
@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import styled from 'styled-components';
|
|
7
|
-
var StyledTimestamp = styled.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n font-size: ", ";\n font-weight: 300;\n }\n margin: 0;\n line-height: 1.5em;\n grid-area: info;\n color: ", ";\n"], ["\n && {\n font-size: ", ";\n font-weight: 300;\n }\n margin: 0;\n line-height: 1.5em;\n grid-area: info;\n color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
|
|
7
|
+
var StyledTimestamp = styled.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n font-size: ", ";\n font-weight: 300;\n }\n padding-top: ", ";\n margin: 0;\n line-height: 1.5em;\n grid-area: info;\n color: ", ";\n"], ["\n && {\n font-size: ", ";\n font-weight: 300;\n }\n padding-top: ", ";\n margin: 0;\n line-height: 1.5em;\n grid-area: info;\n color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
|
|
8
8
|
var getTimestamp = function (raw) {
|
|
9
9
|
return new Date(raw).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
10
10
|
};
|
|
@@ -14,6 +14,6 @@ var UserMessage = function (_a) {
|
|
|
14
14
|
children,
|
|
15
15
|
React.createElement(Timestamp, { name: userLabel, timestamp: timestamp })));
|
|
16
16
|
};
|
|
17
|
-
var StyledUserMessage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-left:
|
|
17
|
+
var StyledUserMessage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-left: 10%;\n width: 90%;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n margin-left: 10%;\n width: 90%;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
18
18
|
export default UserMessage;
|
|
19
19
|
var templateObject_1;
|
package/package.json
CHANGED
|
@@ -1,42 +1,45 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@telia-ace/widget-conversation",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "ACE Widget Conversation Platform",
|
|
5
|
-
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
|
-
"author": "Telia Company AB",
|
|
7
|
-
"keywords": [
|
|
8
|
-
"telia"
|
|
9
|
-
],
|
|
10
|
-
"main": "lib/index.js",
|
|
11
|
-
"module": "lib-esm/index.js",
|
|
12
|
-
"files": [
|
|
13
|
-
"LICENSE.txt",
|
|
14
|
-
"README.md",
|
|
15
|
-
"lib/",
|
|
16
|
-
"lib-esm/"
|
|
17
|
-
],
|
|
18
|
-
"publishConfig": {
|
|
19
|
-
"access": "public"
|
|
20
|
-
},
|
|
21
|
-
"scripts": {
|
|
22
|
-
"clean": "cleandir lib && cleandir lib-esm",
|
|
23
|
-
"compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
|
|
24
|
-
},
|
|
25
|
-
"sideEffects": false,
|
|
26
|
-
"typings": "lib/index.d.ts",
|
|
27
|
-
"dependencies": {
|
|
28
|
-
"@telia-ace/widget-core": "^1.0.
|
|
29
|
-
"@telia-ace/widget-forms": "^1.0.
|
|
30
|
-
"@telia-ace/widget-plugins": "^1.0.
|
|
31
|
-
"@telia-ace/widget-routing": "^1.0.
|
|
32
|
-
"@telia-ace/widget-services": "^1.0.
|
|
33
|
-
"@telia-ace/widget-ui": "^1.0.
|
|
34
|
-
"@telia-ace/widget-utilities": "^1.0.1",
|
|
35
|
-
"@webprovisions/platform": "^1.1.2"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@telia-ace/widget-conversation",
|
|
3
|
+
"version": "1.0.8",
|
|
4
|
+
"description": "ACE Widget Conversation Platform",
|
|
5
|
+
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
|
+
"author": "Telia Company AB",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"telia"
|
|
9
|
+
],
|
|
10
|
+
"main": "lib/index.js",
|
|
11
|
+
"module": "lib-esm/index.js",
|
|
12
|
+
"files": [
|
|
13
|
+
"LICENSE.txt",
|
|
14
|
+
"README.md",
|
|
15
|
+
"lib/",
|
|
16
|
+
"lib-esm/"
|
|
17
|
+
],
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public"
|
|
20
|
+
},
|
|
21
|
+
"scripts": {
|
|
22
|
+
"clean": "cleandir lib && cleandir lib-esm",
|
|
23
|
+
"compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
|
|
24
|
+
},
|
|
25
|
+
"sideEffects": false,
|
|
26
|
+
"typings": "lib/index.d.ts",
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@telia-ace/widget-core": "^1.0.4",
|
|
29
|
+
"@telia-ace/widget-forms": "^1.0.6",
|
|
30
|
+
"@telia-ace/widget-plugins": "^1.0.5",
|
|
31
|
+
"@telia-ace/widget-routing": "^1.0.5",
|
|
32
|
+
"@telia-ace/widget-services": "^1.0.4",
|
|
33
|
+
"@telia-ace/widget-ui": "^1.0.6",
|
|
34
|
+
"@telia-ace/widget-utilities": "^1.0.1",
|
|
35
|
+
"@webprovisions/platform": "^1.1.2"
|
|
36
|
+
},
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"react": "^16.8.0",
|
|
39
|
+
"styled-components": "^4.3.2"
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"@types/react": "^16.8.0"
|
|
43
|
+
},
|
|
44
|
+
"gitHead": "3184f2cacc23be7615786ea65587f2102091ca9e"
|
|
45
|
+
}
|