@telia-ace/widget-conversation 1.0.7 → 1.0.10
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/ui/conversation/conversation-content.js +7 -3
- package/lib/ui/conversation/conversation-input.js +1 -1
- package/lib/ui/conversation/message-types/custom-message-list-item.d.ts +9 -0
- package/lib/ui/conversation/message-types/custom-message-list-item.js +27 -0
- package/lib-esm/ui/conversation/conversation-content.js +4 -3
- package/lib-esm/ui/conversation/conversation-input.js +1 -1
- package/lib-esm/ui/conversation/message-types/custom-message-list-item.d.ts +9 -0
- package/lib-esm/ui/conversation/message-types/custom-message-list-item.js +22 -0
- package/package.json +2 -2
|
@@ -53,6 +53,9 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
53
53
|
}
|
|
54
54
|
return ar;
|
|
55
55
|
};
|
|
56
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
57
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
58
|
+
};
|
|
56
59
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
57
60
|
var widget_forms_1 = require("@telia-ace/widget-forms");
|
|
58
61
|
var widget_ui_1 = require("@telia-ace/widget-ui");
|
|
@@ -62,6 +65,7 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
62
65
|
var types_1 = require("../../types");
|
|
63
66
|
var conversation_styles_1 = require("./conversation-styles");
|
|
64
67
|
var message_types_1 = require("./message-types");
|
|
68
|
+
var custom_message_list_item_1 = __importDefault(require("./message-types/custom-message-list-item"));
|
|
65
69
|
var imageLightboxRenderer = function (attrs) { return react_1.default.createElement(widget_ui_1.Lightbox, { attrs: attrs }); };
|
|
66
70
|
var htmlParseInstructions = {
|
|
67
71
|
transform: {
|
|
@@ -184,8 +188,8 @@ var ConversationContent = function (_a) {
|
|
|
184
188
|
} })));
|
|
185
189
|
}
|
|
186
190
|
default: {
|
|
187
|
-
return (react_1.default.createElement(
|
|
188
|
-
react_1.default.createElement(
|
|
191
|
+
return (react_1.default.createElement(ConversationListItem, { key: itemKey },
|
|
192
|
+
react_1.default.createElement(custom_message_list_item_1.default, { type: item.type, content: item.content })));
|
|
189
193
|
}
|
|
190
194
|
}
|
|
191
195
|
} }))))));
|
|
@@ -201,7 +205,7 @@ var StyledForm = (0, styled_components_1.default)(widget_forms_1.FormComponent)(
|
|
|
201
205
|
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; });
|
|
202
206
|
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; });
|
|
203
207
|
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; });
|
|
204
|
-
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) {
|
|
208
|
+
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) {
|
|
205
209
|
var _a;
|
|
206
210
|
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);
|
|
207
211
|
});
|
|
@@ -145,7 +145,7 @@ var ConversationInput = function (_a) {
|
|
|
145
145
|
};
|
|
146
146
|
var StyledTextArea = (0, styled_components_1.default)(widget_ui_1.Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n resize: none;\n flex: 1;\n flex-shrink: 1;\n min-height: 1.2em;\n max-height: 148px;\n line-height: 1.2em;\n height: 1.2em;\n padding: 0;\n margin: ", " ", ";\n font-size: ", ";\n border: none;\n transition: height 200ms linear;\n outline: none;\n"], ["\n resize: none;\n flex: 1;\n flex-shrink: 1;\n min-height: 1.2em;\n max-height: 148px;\n line-height: 1.2em;\n height: 1.2em;\n padding: 0;\n margin: ", " ", ";\n font-size: ", ";\n border: none;\n transition: height 200ms linear;\n outline: none;\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.medium; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
147
147
|
var StyledInput = (0, styled_components_1.default)(widget_ui_1.Input)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background-color: transparent;\n font-weight: 300;\n font-size: ", ";\n line-height: 1.2em;\n outline: none;\n padding-left: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n font-style: italic;\n }\n"], ["\n flex: 1;\n border: none;\n background-color: transparent;\n font-weight: 300;\n font-size: ", ";\n line-height: 1.2em;\n outline: none;\n padding-left: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n font-style: italic;\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.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.textLight; });
|
|
148
|
-
var StyledButton = (0, styled_components_1.default)(widget_ui_1.Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n border: none;\n &:focus {\n ", ";\n }\n"], ["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n border: none;\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && widget_ui_1.borderTabStyle; });
|
|
148
|
+
var StyledButton = (0, styled_components_1.default)(widget_ui_1.Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n &:focus {\n ", ";\n }\n"], ["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && widget_ui_1.borderTabStyle; });
|
|
149
149
|
var Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background-color: ", ";\n border-top: ", ";\n ", "\n ", " {\n ", "\n }\n"], ["\n ", "\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background-color: ", ";\n border-top: ", ";\n ", "\n ", " {\n ", "\n }\n"])), function (p) {
|
|
150
150
|
return p.grow
|
|
151
151
|
? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n min-height: 50px;\n max-height: 150px;\n "], ["\n min-height: 50px;\n max-height: 150px;\n "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 50px;\n "], ["\n height: 50px;\n "])));
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
var widget_ui_1 = require("@telia-ace/widget-ui");
|
|
18
|
+
var react_1 = __importDefault(require("react"));
|
|
19
|
+
var CustomMessageListItem = function (_a) {
|
|
20
|
+
var type = _a.type, _b = _a.content, content = _b === void 0 ? {} : _b;
|
|
21
|
+
var Component = (0, widget_ui_1.useComponent)(type);
|
|
22
|
+
if (!Component || !type) {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
return react_1.default.createElement(Component, __assign({}, content));
|
|
26
|
+
};
|
|
27
|
+
exports.default = CustomMessageListItem;
|
|
@@ -37,6 +37,7 @@ import styled, { css } from 'styled-components';
|
|
|
37
37
|
import { ConversationMessageListItemType, } from '../../types';
|
|
38
38
|
import { MessageContent, MessageContentPart as Part, MessageTitle } from './conversation-styles';
|
|
39
39
|
import { CustomMessage } from './message-types';
|
|
40
|
+
import CustomMessageListItem from './message-types/custom-message-list-item';
|
|
40
41
|
var imageLightboxRenderer = function (attrs) { return React.createElement(Lightbox, { attrs: attrs }); };
|
|
41
42
|
var htmlParseInstructions = {
|
|
42
43
|
transform: {
|
|
@@ -159,8 +160,8 @@ var ConversationContent = function (_a) {
|
|
|
159
160
|
} })));
|
|
160
161
|
}
|
|
161
162
|
default: {
|
|
162
|
-
return (React.createElement(
|
|
163
|
-
React.createElement(
|
|
163
|
+
return (React.createElement(ConversationListItem, { key: itemKey },
|
|
164
|
+
React.createElement(CustomMessageListItem, { type: item.type, content: item.content })));
|
|
164
165
|
}
|
|
165
166
|
}
|
|
166
167
|
} }))))));
|
|
@@ -176,7 +177,7 @@ var StyledForm = styled(FormComponent)(templateObject_1 || (templateObject_1 = _
|
|
|
176
177
|
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; });
|
|
177
178
|
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; });
|
|
178
179
|
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; });
|
|
179
|
-
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) {
|
|
180
|
+
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) {
|
|
180
181
|
var _a;
|
|
181
182
|
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);
|
|
182
183
|
});
|
|
@@ -120,7 +120,7 @@ var ConversationInput = function (_a) {
|
|
|
120
120
|
};
|
|
121
121
|
var StyledTextArea = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n resize: none;\n flex: 1;\n flex-shrink: 1;\n min-height: 1.2em;\n max-height: 148px;\n line-height: 1.2em;\n height: 1.2em;\n padding: 0;\n margin: ", " ", ";\n font-size: ", ";\n border: none;\n transition: height 200ms linear;\n outline: none;\n"], ["\n resize: none;\n flex: 1;\n flex-shrink: 1;\n min-height: 1.2em;\n max-height: 148px;\n line-height: 1.2em;\n height: 1.2em;\n padding: 0;\n margin: ", " ", ";\n font-size: ", ";\n border: none;\n transition: height 200ms linear;\n outline: none;\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.medium; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
122
122
|
var StyledInput = styled(Input)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background-color: transparent;\n font-weight: 300;\n font-size: ", ";\n line-height: 1.2em;\n outline: none;\n padding-left: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n font-style: italic;\n }\n"], ["\n flex: 1;\n border: none;\n background-color: transparent;\n font-weight: 300;\n font-size: ", ";\n line-height: 1.2em;\n outline: none;\n padding-left: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n font-style: italic;\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.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.textLight; });
|
|
123
|
-
var StyledButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n border: none;\n &:focus {\n ", ";\n }\n"], ["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n border: none;\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; });
|
|
123
|
+
var StyledButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n &:focus {\n ", ";\n }\n"], ["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; });
|
|
124
124
|
var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background-color: ", ";\n border-top: ", ";\n ", "\n ", " {\n ", "\n }\n"], ["\n ", "\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background-color: ", ";\n border-top: ", ";\n ", "\n ", " {\n ", "\n }\n"])), function (p) {
|
|
125
125
|
return p.grow
|
|
126
126
|
? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n min-height: 50px;\n max-height: 150px;\n "], ["\n min-height: 50px;\n max-height: 150px;\n "]))) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 50px;\n "], ["\n height: 50px;\n "])));
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { useComponent } from '@telia-ace/widget-ui';
|
|
13
|
+
import React from 'react';
|
|
14
|
+
var CustomMessageListItem = function (_a) {
|
|
15
|
+
var type = _a.type, _b = _a.content, content = _b === void 0 ? {} : _b;
|
|
16
|
+
var Component = useComponent(type);
|
|
17
|
+
if (!Component || !type) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
return React.createElement(Component, __assign({}, content));
|
|
21
|
+
};
|
|
22
|
+
export default CustomMessageListItem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/widget-conversation",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"description": "ACE Widget Conversation Platform",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@types/react": "^16.8.0"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "873fc435c76c93696277b20f7f338b244d6470cf"
|
|
45
45
|
}
|