@telia-ace/widget-conversation 1.0.1 → 1.0.4
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/LICENSE.txt +5 -5
- package/README.md +256 -256
- package/lib/agent.d.ts +2 -2
- package/lib/conversation-controller.d.ts +4 -3
- package/lib/conversation-controller.js +43 -23
- package/lib/index.d.ts +2 -1
- package/lib/index.js +3 -1
- package/lib/types.d.ts +75 -0
- package/lib/types.js +17 -0
- package/lib/ui/conversation/conversation-content.js +142 -9
- package/lib/ui/conversation/conversation-styles.d.ts +3 -1
- package/lib/ui/conversation/conversation-styles.js +7 -5
- package/lib/ui/conversation/conversation.js +1 -1
- package/lib/ui/conversation/message-types/agent.js +1 -1
- package/lib/ui/conversation/message-types/custom.js +30 -6
- package/lib-esm/agent.d.ts +2 -2
- package/lib-esm/conversation-controller.d.ts +4 -3
- package/lib-esm/conversation-controller.js +43 -23
- package/lib-esm/index.d.ts +2 -1
- package/lib-esm/index.js +1 -0
- package/lib-esm/types.d.ts +75 -0
- package/lib-esm/types.js +16 -1
- package/lib-esm/ui/conversation/conversation-content.js +144 -8
- package/lib-esm/ui/conversation/conversation-styles.d.ts +3 -1
- package/lib-esm/ui/conversation/conversation-styles.js +7 -5
- package/lib-esm/ui/conversation/conversation.js +1 -1
- package/lib-esm/ui/conversation/message-types/agent.js +1 -1
- package/lib-esm/ui/conversation/message-types/custom.js +8 -4
- package/package.json +42 -43
package/lib/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ConversationEndedBehavior, ConversationPlatform, UnregisterControllerDelegate } from './conversation-platform';
|
|
2
2
|
export { ConversationController, ConversationEntry, ConversationMessageType, } from './conversation-controller';
|
|
3
3
|
export type { ConversationMessage } from './conversation-controller';
|
|
4
|
-
export
|
|
4
|
+
export { ConversationMessageListItemType } from './types';
|
|
5
|
+
export type { ConversationMessageContent, ConversationMessageSender, ConverstationMessageItem, } from './types';
|
|
5
6
|
export { ConversationComponent, ConversationReturnButtonComponent } from './ui';
|
|
6
7
|
export { registerCustomMessageComponent } from './utils/custom-message';
|
|
7
8
|
export { ConversationPlatform, ConversationEndedBehavior };
|
package/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ConversationEndedBehavior = exports.ConversationPlatform = exports.registerCustomMessageComponent = exports.ConversationReturnButtonComponent = exports.ConversationComponent = exports.ConversationMessageType = exports.ConversationEntry = exports.ConversationController = void 0;
|
|
3
|
+
exports.ConversationEndedBehavior = exports.ConversationPlatform = exports.registerCustomMessageComponent = exports.ConversationReturnButtonComponent = exports.ConversationComponent = exports.ConversationMessageListItemType = exports.ConversationMessageType = exports.ConversationEntry = exports.ConversationController = void 0;
|
|
4
4
|
var conversation_platform_1 = require("./conversation-platform");
|
|
5
5
|
Object.defineProperty(exports, "ConversationEndedBehavior", { enumerable: true, get: function () { return conversation_platform_1.ConversationEndedBehavior; } });
|
|
6
6
|
Object.defineProperty(exports, "ConversationPlatform", { enumerable: true, get: function () { return conversation_platform_1.ConversationPlatform; } });
|
|
@@ -8,6 +8,8 @@ var conversation_controller_1 = require("./conversation-controller");
|
|
|
8
8
|
Object.defineProperty(exports, "ConversationController", { enumerable: true, get: function () { return conversation_controller_1.ConversationController; } });
|
|
9
9
|
Object.defineProperty(exports, "ConversationEntry", { enumerable: true, get: function () { return conversation_controller_1.ConversationEntry; } });
|
|
10
10
|
Object.defineProperty(exports, "ConversationMessageType", { enumerable: true, get: function () { return conversation_controller_1.ConversationMessageType; } });
|
|
11
|
+
var types_1 = require("./types");
|
|
12
|
+
Object.defineProperty(exports, "ConversationMessageListItemType", { enumerable: true, get: function () { return types_1.ConversationMessageListItemType; } });
|
|
11
13
|
var ui_1 = require("./ui");
|
|
12
14
|
Object.defineProperty(exports, "ConversationComponent", { enumerable: true, get: function () { return ui_1.ConversationComponent; } });
|
|
13
15
|
Object.defineProperty(exports, "ConversationReturnButtonComponent", { enumerable: true, get: function () { return ui_1.ConversationReturnButtonComponent; } });
|
package/lib/types.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export declare type ConversationMessageSettings = {
|
|
|
10
10
|
};
|
|
11
11
|
form?: (builder: FormBuilder) => void;
|
|
12
12
|
type?: string;
|
|
13
|
+
items?: ConversationMessageList[];
|
|
13
14
|
[key: string]: any;
|
|
14
15
|
};
|
|
15
16
|
export declare type NormalizedMessageSettings = {
|
|
@@ -17,15 +18,34 @@ export declare type NormalizedMessageSettings = {
|
|
|
17
18
|
key: string;
|
|
18
19
|
timestamp: number | null;
|
|
19
20
|
};
|
|
21
|
+
export declare type ConversationMessageList = {
|
|
22
|
+
header?: string;
|
|
23
|
+
itemKey: string;
|
|
24
|
+
type?: ConversationMessageListType;
|
|
25
|
+
items: ConversationMessageListItem[];
|
|
26
|
+
};
|
|
27
|
+
export declare type ConversationMessageListItem = {
|
|
28
|
+
icon?: string;
|
|
29
|
+
type?: ConversationMessageListItemType;
|
|
30
|
+
actions?: {
|
|
31
|
+
[actionKey: string]: any;
|
|
32
|
+
};
|
|
33
|
+
form?: Form;
|
|
34
|
+
body?: string;
|
|
35
|
+
key: string;
|
|
36
|
+
[key: string]: any;
|
|
37
|
+
};
|
|
20
38
|
export declare type ConversationMessageContent = {
|
|
21
39
|
title?: string;
|
|
22
40
|
body?: string;
|
|
23
41
|
actions?: {
|
|
24
42
|
[actionKey: string]: any;
|
|
25
43
|
};
|
|
44
|
+
items?: ConverstationMessageItem<any>[];
|
|
26
45
|
form?: Form;
|
|
27
46
|
[key: string]: any;
|
|
28
47
|
};
|
|
48
|
+
export declare type ConverstationMessageItem<T, R = ItemPayload> = R extends [T, any] ? R : never;
|
|
29
49
|
export declare type ConversationMessageUpdateSettings = ConversationMessageContent & {
|
|
30
50
|
timestamp?: number;
|
|
31
51
|
};
|
|
@@ -33,3 +53,58 @@ export declare type ConversationMessageSender = {
|
|
|
33
53
|
name?: string;
|
|
34
54
|
avatar?: string | Symbol;
|
|
35
55
|
};
|
|
56
|
+
export declare enum ConversationMessageListType {
|
|
57
|
+
Ordinary = "ordinary",
|
|
58
|
+
Seperator = "seperator"
|
|
59
|
+
}
|
|
60
|
+
export declare enum ConversationMessageListItemType {
|
|
61
|
+
Header = "header",
|
|
62
|
+
LinkList = "link-list",
|
|
63
|
+
Separator = "separator",
|
|
64
|
+
NoGoodAlternative = "no-good-alternative",
|
|
65
|
+
ButtonList = "button-list",
|
|
66
|
+
Text = "text",
|
|
67
|
+
HTML = "html",
|
|
68
|
+
FeedbackList = "feedback-list"
|
|
69
|
+
}
|
|
70
|
+
declare type LinkListItem = [
|
|
71
|
+
ConversationMessageListItemType.LinkList,
|
|
72
|
+
{
|
|
73
|
+
actions: {
|
|
74
|
+
[key: string]: string;
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
];
|
|
78
|
+
declare type HeaderItem = [ConversationMessageListItemType.Header, string];
|
|
79
|
+
declare type TextItem = [ConversationMessageListItemType.Text, string];
|
|
80
|
+
declare type SeparatorItem = [ConversationMessageListItemType.Separator, undefined];
|
|
81
|
+
declare type NoGoodAlternativeItem = [
|
|
82
|
+
ConversationMessageListItemType.NoGoodAlternative,
|
|
83
|
+
{
|
|
84
|
+
body: string;
|
|
85
|
+
}
|
|
86
|
+
];
|
|
87
|
+
declare type ButtonListItem = [
|
|
88
|
+
ConversationMessageListItemType.ButtonList,
|
|
89
|
+
{
|
|
90
|
+
actions: {
|
|
91
|
+
[key: string]: string;
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
];
|
|
95
|
+
declare type FeedbackListItem = [
|
|
96
|
+
ConversationMessageListItemType.FeedbackList,
|
|
97
|
+
{
|
|
98
|
+
actions: {
|
|
99
|
+
[key: string]: string;
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
];
|
|
103
|
+
declare type HTMLItem = [
|
|
104
|
+
ConversationMessageListItemType.HTML,
|
|
105
|
+
{
|
|
106
|
+
body: string;
|
|
107
|
+
}
|
|
108
|
+
];
|
|
109
|
+
declare type ItemPayload = LinkListItem | HeaderItem | TextItem | SeparatorItem | NoGoodAlternativeItem | ButtonListItem | HTMLItem | FeedbackListItem;
|
|
110
|
+
export {};
|
package/lib/types.js
CHANGED
|
@@ -1,2 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ConversationMessageListItemType = exports.ConversationMessageListType = void 0;
|
|
4
|
+
var ConversationMessageListType;
|
|
5
|
+
(function (ConversationMessageListType) {
|
|
6
|
+
ConversationMessageListType["Ordinary"] = "ordinary";
|
|
7
|
+
ConversationMessageListType["Seperator"] = "seperator";
|
|
8
|
+
})(ConversationMessageListType = exports.ConversationMessageListType || (exports.ConversationMessageListType = {}));
|
|
9
|
+
var ConversationMessageListItemType;
|
|
10
|
+
(function (ConversationMessageListItemType) {
|
|
11
|
+
ConversationMessageListItemType["Header"] = "header";
|
|
12
|
+
ConversationMessageListItemType["LinkList"] = "link-list";
|
|
13
|
+
ConversationMessageListItemType["Separator"] = "separator";
|
|
14
|
+
ConversationMessageListItemType["NoGoodAlternative"] = "no-good-alternative";
|
|
15
|
+
ConversationMessageListItemType["ButtonList"] = "button-list";
|
|
16
|
+
ConversationMessageListItemType["Text"] = "text";
|
|
17
|
+
ConversationMessageListItemType["HTML"] = "html";
|
|
18
|
+
ConversationMessageListItemType["FeedbackList"] = "feedback-list";
|
|
19
|
+
})(ConversationMessageListItemType = exports.ConversationMessageListItemType || (exports.ConversationMessageListItemType = {}));
|
|
@@ -37,14 +37,29 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
37
37
|
__setModuleDefault(result, mod);
|
|
38
38
|
return result;
|
|
39
39
|
};
|
|
40
|
-
var
|
|
41
|
-
|
|
40
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
41
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
42
|
+
if (!m) return o;
|
|
43
|
+
var i = m.call(o), r, ar = [], e;
|
|
44
|
+
try {
|
|
45
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
46
|
+
}
|
|
47
|
+
catch (error) { e = { error: error }; }
|
|
48
|
+
finally {
|
|
49
|
+
try {
|
|
50
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
51
|
+
}
|
|
52
|
+
finally { if (e) throw e.error; }
|
|
53
|
+
}
|
|
54
|
+
return ar;
|
|
42
55
|
};
|
|
43
56
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
44
57
|
var widget_forms_1 = require("@telia-ace/widget-forms");
|
|
45
58
|
var widget_ui_1 = require("@telia-ace/widget-ui");
|
|
46
|
-
var
|
|
59
|
+
var widget_utilities_1 = require("@telia-ace/widget-utilities");
|
|
60
|
+
var react_1 = __importStar(require("react"));
|
|
47
61
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
62
|
+
var types_1 = require("../../types");
|
|
48
63
|
var conversation_styles_1 = require("./conversation-styles");
|
|
49
64
|
var message_types_1 = require("./message-types");
|
|
50
65
|
var imageLightboxRenderer = function (attrs) { return react_1.default.createElement(widget_ui_1.Lightbox, { attrs: attrs }); };
|
|
@@ -56,10 +71,10 @@ var htmlParseInstructions = {
|
|
|
56
71
|
var ConversationContent = function (_a) {
|
|
57
72
|
var content = _a.content, isUser = _a.isUser, stacked = _a.stacked;
|
|
58
73
|
var dispatch = (0, widget_ui_1.useDispatch)();
|
|
59
|
-
var title = content.title, body = content.body, actions = content.actions, form = content.form, type = content.type;
|
|
74
|
+
var title = content.title, body = content.body, actions = content.actions, form = content.form, type = content.type, items = content.items;
|
|
60
75
|
if (type)
|
|
61
76
|
return react_1.default.createElement(message_types_1.CustomMessage, { type: type, content: content, isUser: isUser, stacked: stacked });
|
|
62
|
-
return (react_1.default.createElement(conversation_styles_1.MessageContent, { user: isUser, stacked: !!stacked && stacked, fullWidth: !!form || !!actions },
|
|
77
|
+
return (react_1.default.createElement(conversation_styles_1.MessageContent, { noPadding: true, user: isUser, stacked: !!stacked && stacked, fullWidth: !!form || !!actions },
|
|
63
78
|
title && (react_1.default.createElement(conversation_styles_1.MessageContentPart, null,
|
|
64
79
|
react_1.default.createElement(conversation_styles_1.MessageTitle, { variant: "h2" }, title))),
|
|
65
80
|
body && (react_1.default.createElement(conversation_styles_1.MessageContentPart, null,
|
|
@@ -80,7 +95,99 @@ var ConversationContent = function (_a) {
|
|
|
80
95
|
react_1.default.createElement(StyledActionButton, { onClick: function () {
|
|
81
96
|
dispatch('action', item.actionKey);
|
|
82
97
|
} }, item.label)));
|
|
83
|
-
} })))
|
|
98
|
+
} }))),
|
|
99
|
+
items && (react_1.default.createElement(react_1.Fragment, null,
|
|
100
|
+
react_1.default.createElement(conversation_styles_1.MessageContentPart, { key: (0, widget_utilities_1.uuid)(), noPadding: true },
|
|
101
|
+
react_1.default.createElement(StyledActionList, { items: items.map(function (_a) {
|
|
102
|
+
var _b = __read(_a, 2), type = _b[0], content = _b[1];
|
|
103
|
+
return { type: type, content: content };
|
|
104
|
+
}), renderItem: function (item) {
|
|
105
|
+
var itemKey = (0, widget_utilities_1.uuid)();
|
|
106
|
+
switch (item.type) {
|
|
107
|
+
case types_1.ConversationMessageListItemType.Header: {
|
|
108
|
+
return (react_1.default.createElement(ConversationListItem, { key: itemKey },
|
|
109
|
+
react_1.default.createElement("strong", null, item.content)));
|
|
110
|
+
}
|
|
111
|
+
case types_1.ConversationMessageListItemType.Text: {
|
|
112
|
+
return (react_1.default.createElement(ConversationListItem, { key: itemKey },
|
|
113
|
+
react_1.default.createElement("span", null, item.content)));
|
|
114
|
+
}
|
|
115
|
+
case types_1.ConversationMessageListItemType.HTML: {
|
|
116
|
+
return (react_1.default.createElement(ConversationListItem, { key: itemKey },
|
|
117
|
+
react_1.default.createElement(StyledHtml, { html: item.content.body, htmlParseInstruction: htmlParseInstructions })));
|
|
118
|
+
}
|
|
119
|
+
case types_1.ConversationMessageListItemType.Separator: {
|
|
120
|
+
return (react_1.default.createElement(ConversationListItem, { key: itemKey, noPadding: true },
|
|
121
|
+
react_1.default.createElement(Separator, null)));
|
|
122
|
+
}
|
|
123
|
+
case types_1.ConversationMessageListItemType.LinkList: {
|
|
124
|
+
return (react_1.default.createElement(ConversationListItem, { key: itemKey },
|
|
125
|
+
react_1.default.createElement(StyledLinkList, { items: Object.keys(item.content.actions).map(function (i) {
|
|
126
|
+
return {
|
|
127
|
+
label: item.content.actions[i],
|
|
128
|
+
actionKey: i,
|
|
129
|
+
};
|
|
130
|
+
}), renderItem: function (item) {
|
|
131
|
+
return (react_1.default.createElement("li", { key: item.actionKey },
|
|
132
|
+
react_1.default.createElement(StyledLinkButton, { help: item.actionKey === 'help', onClick: function () {
|
|
133
|
+
dispatch('action', item.actionKey);
|
|
134
|
+
} },
|
|
135
|
+
item.label,
|
|
136
|
+
item.actionKey === 'help' && (react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 14, symbol: {
|
|
137
|
+
type: 'Svg',
|
|
138
|
+
content: 'caret-down',
|
|
139
|
+
} })))));
|
|
140
|
+
} })));
|
|
141
|
+
}
|
|
142
|
+
case types_1.ConversationMessageListItemType.ButtonList: {
|
|
143
|
+
return (react_1.default.createElement(ConversationListItem, { key: itemKey },
|
|
144
|
+
react_1.default.createElement(StyledButtonList, { items: Object.keys(item.content.actions).map(function (i) {
|
|
145
|
+
return {
|
|
146
|
+
label: item.content.actions[i],
|
|
147
|
+
actionKey: i,
|
|
148
|
+
};
|
|
149
|
+
}), renderItem: function (item) {
|
|
150
|
+
return (react_1.default.createElement("li", { key: item.actionKey },
|
|
151
|
+
react_1.default.createElement(StyledButtonListButton, { onClick: function () {
|
|
152
|
+
dispatch('action', item.actionKey);
|
|
153
|
+
} }, item.label)));
|
|
154
|
+
} })));
|
|
155
|
+
}
|
|
156
|
+
case types_1.ConversationMessageListItemType.NoGoodAlternative: {
|
|
157
|
+
return (react_1.default.createElement(ConversationListItem, { key: itemKey },
|
|
158
|
+
react_1.default.createElement(NoGoodAlternativeWrapper, { onClick: function () {
|
|
159
|
+
dispatch('action', 'help');
|
|
160
|
+
} },
|
|
161
|
+
react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 14, symbol: {
|
|
162
|
+
type: 'FontAwesome',
|
|
163
|
+
content: 'meh-o',
|
|
164
|
+
} }),
|
|
165
|
+
react_1.default.createElement("span", null, item.content.body))));
|
|
166
|
+
}
|
|
167
|
+
case types_1.ConversationMessageListItemType.FeedbackList: {
|
|
168
|
+
return (react_1.default.createElement(ConversationListItem, { key: itemKey },
|
|
169
|
+
react_1.default.createElement(StyledButtonList, { items: Object.keys(item.content.actions).map(function (i) {
|
|
170
|
+
return {
|
|
171
|
+
label: item.content.actions[i],
|
|
172
|
+
actionKey: i,
|
|
173
|
+
};
|
|
174
|
+
}), renderItem: function (item) {
|
|
175
|
+
return (react_1.default.createElement("li", { key: item.actionKey },
|
|
176
|
+
react_1.default.createElement(FeedbackButton, { className: "humany-feedback-button", disabled: false, "aria-pressed": true, "data-selected": true, "data-direction": 'vertical', onClick: function () {
|
|
177
|
+
dispatch('action', item.actionKey);
|
|
178
|
+
} },
|
|
179
|
+
react_1.default.createElement(widget_ui_1.Icon, { faIcon: item.actionKey == 'yes'
|
|
180
|
+
? 'smile-o'
|
|
181
|
+
: 'frown-o' }),
|
|
182
|
+
react_1.default.createElement("span", null, item.label))));
|
|
183
|
+
} })));
|
|
184
|
+
}
|
|
185
|
+
default: {
|
|
186
|
+
return (react_1.default.createElement(react_1.Fragment, null,
|
|
187
|
+
react_1.default.createElement("p", null, "Unknown message type")));
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
} }))))));
|
|
84
191
|
};
|
|
85
192
|
var StyledForm = (0, styled_components_1.default)(widget_forms_1.FormComponent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n & button.humany-form-component-button {\n ", ";\n display: block;\n width: 100%;\n margin-bottom: ", ";\n }\n & button.humany-form-component-submit {\n width: 100%;\n margin: 0;\n :not(:last-child) {\n margin-bottom: ", ";\n }\n }\n"], ["\n & button.humany-form-component-button {\n ", ";\n display: block;\n width: 100%;\n margin-bottom: ", ";\n }\n & button.humany-form-component-submit {\n width: 100%;\n margin: 0;\n :not(:last-child) {\n margin-bottom: ", ";\n }\n }\n"])), function (p) {
|
|
86
193
|
var _a, _b;
|
|
@@ -92,9 +199,35 @@ var StyledForm = (0, styled_components_1.default)(widget_forms_1.FormComponent)(
|
|
|
92
199
|
}, 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; });
|
|
93
200
|
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; });
|
|
94
201
|
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; });
|
|
95
|
-
var
|
|
202
|
+
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 _a;
|
|
205
|
+
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
|
+
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 StyledLinkButton = styled_components_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n background-color: transparent;\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 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
|
+
var _a, _b;
|
|
210
|
+
return p.help && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __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
|
+
});
|
|
212
|
+
var StyledActionButton = styled_components_1.default.button(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", ";\n display: block;\n background-color: ", ";\n width: 100%;\n color: #fff;\n font-family: Lato;\n font-size: 1rem;\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: 1rem;\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) {
|
|
96
213
|
var _a;
|
|
97
|
-
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(
|
|
214
|
+
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n background-color: transparent;\n "], ["\n ", "\n background-color: transparent;\n "])), widget_ui_1.borderTabStyle);
|
|
98
215
|
});
|
|
216
|
+
var Separator = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: #efefef;\n height: 1px;\n width: 100%;\n"], ["\n background-color: #efefef;\n height: 1px;\n width: 100%;\n"])));
|
|
217
|
+
var NoGoodAlternativeWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __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; });
|
|
218
|
+
var ConversationListItem = styled_components_1.default.li(templateObject_14 || (templateObject_14 = __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); });
|
|
219
|
+
var FeedbackButton = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n font-size: ", ";\n background-color: #ffffff !important;\n color: ", " !important;\n border-color: ", " !important;\n font-weight: 300;\n && {\n margin-right: ", ";\n }\n ", "\n ", "\n ", "\n i {\n margin: 0 ", " 0 0;\n color: ", " !important;\n }\n span {\n color: ", " !important;\n }\n"], ["\n display: inline-block;\n font-size: ", ";\n background-color: #ffffff !important;\n color: ", " !important;\n border-color: ", " !important;\n font-weight: 300;\n && {\n margin-right: ", ";\n }\n ", "\n ", "\n ", "\n i {\n margin: 0 ", " 0 0;\n color: ", " !important;\n }\n span {\n color: ", " !important;\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.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
|
+
var _a, _b;
|
|
221
|
+
return p['data-direction'] === 'horizontal' && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __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
|
+
}, function (p) {
|
|
223
|
+
return p['data-direction'] === 'vertical' && (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n min-width: 150px;\n "], ["\n min-width: 150px;\n "])));
|
|
224
|
+
}, function (p) {
|
|
225
|
+
var _a;
|
|
226
|
+
return (0, widget_ui_1.invertedHoverButton)({
|
|
227
|
+
active: p['data-selected'],
|
|
228
|
+
primaryColor: (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
|
|
229
|
+
secondaryColor: '#FFFFFF',
|
|
230
|
+
});
|
|
231
|
+
}, 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.primary; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
99
232
|
exports.default = ConversationContent;
|
|
100
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
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;
|
|
@@ -6,4 +6,6 @@ export declare const ContentBundle: import("styled-components").StyledComponent<
|
|
|
6
6
|
export declare const MessageTitle: import("styled-components").StyledComponent<import("react").FC<import("@telia-ace/widget-ui").TypographyProps>, any, {}, never>;
|
|
7
7
|
export declare const MessageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
8
|
export declare const MessageContent: import("styled-components").StyledComponent<"div", any, any, never>;
|
|
9
|
-
export declare const MessageContentPart: import("styled-components").StyledComponent<"div", any, {
|
|
9
|
+
export declare const MessageContentPart: import("styled-components").StyledComponent<"div", any, {
|
|
10
|
+
noPadding?: boolean | undefined;
|
|
11
|
+
}, never>;
|
|
@@ -30,13 +30,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
30
30
|
exports.MessageContentPart = exports.MessageContent = exports.MessageContainer = exports.MessageTitle = exports.ContentBundle = exports.Loader = exports.LoaderAnimation = exports.Avatar = void 0;
|
|
31
31
|
var widget_ui_1 = require("@telia-ace/widget-ui");
|
|
32
32
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
33
|
-
exports.Avatar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border-radius: 50%;\n background-color: ", ";\n border: ", ";\n grid-area: avatar;\n align-self: flex-end;\n justify-self: center;\n overflow: hidden;\n margin-right:
|
|
33
|
+
exports.Avatar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border-radius: 50%;\n background-color: ", ";\n border: ", ";\n grid-area: avatar;\n align-self: flex-end;\n justify-self: center;\n overflow: hidden;\n margin-right: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n color: ", ";\n\n > img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n\n > svg {\n width: 90%;\n height: 90%;\n padding: 10%;\n color: ", ";\n\n line,\n path,\n circle,\n fill {\n stroke: ", ";\n }\n }\n"], ["\n width: ", ";\n height: ", ";\n border-radius: 50%;\n background-color: ", ";\n border: ", ";\n grid-area: avatar;\n align-self: flex-end;\n justify-self: center;\n overflow: hidden;\n margin-right: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n color: ", ";\n\n > img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n\n > svg {\n width: 90%;\n height: 90%;\n padding: 10%;\n color: ", ";\n\n line,\n path,\n circle,\n fill {\n stroke: ", ";\n }\n }\n"])), function (p) { return p.avatarSize || '32px'; }, function (p) { return p.avatarSize || '32px'; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent; }, function (p) { return p.theme.border; }, 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.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.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
|
|
34
34
|
exports.LoaderAnimation = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0% {\n opacity: 0;\n }\n 75% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n"], ["\n 0% {\n opacity: 0;\n }\n 75% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n"])));
|
|
35
35
|
exports.Loader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n > div {\n height: 10px;\n width: 10px;\n border-radius: 50%;\n margin: 5px;\n background-color: ", ";\n animation: ", " 1s infinite;\n }\n > div:nth-child(2) {\n animation-delay: 100ms;\n }\n > div:nth-child(3) {\n animation-delay: 200ms;\n }\n"], ["\n display: flex;\n justify-content: center;\n > div {\n height: 10px;\n width: 10px;\n border-radius: 50%;\n margin: 5px;\n background-color: ", ";\n animation: ", " 1s infinite;\n }\n > div:nth-child(2) {\n animation-delay: 100ms;\n }\n > div:nth-child(3) {\n animation-delay: 200ms;\n }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, exports.LoaderAnimation);
|
|
36
|
-
exports.ContentBundle = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n grid-area: content;\n max-width: 100%;\n overflow:
|
|
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
|
|
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) {
|
|
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,5 +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(
|
|
63
|
-
|
|
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) {
|
|
63
|
+
return p.noPadding && (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])));
|
|
64
|
+
}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
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;
|
|
@@ -133,7 +133,7 @@ var Conversation = function (_a) {
|
|
|
133
133
|
react_1.default.createElement(conversation_input_1.default, null)));
|
|
134
134
|
};
|
|
135
135
|
var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n left: 0;\n bottom: 0;\n top: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n"], ["\n position: absolute;\n right: 0;\n left: 0;\n bottom: 0;\n top: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n"])));
|
|
136
|
-
var Scrollable = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: stretch;\n flex: 0 1 100%;\n padding: 0 ", ";\n ", ";\n &:focus {\n ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: stretch;\n flex: 0 1 100%;\n padding: 0 ", ";\n ", ";\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.
|
|
136
|
+
var Scrollable = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: stretch;\n flex: 0 1 100%;\n padding: 0 ", ";\n ", ";\n &:focus {\n ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: stretch;\n flex: 0 1 100%;\n padding: 0 ", ";\n ", ";\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return !!p.scrollableCss && p.scrollableCss; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && widget_ui_1.borderTabStyle; });
|
|
137
137
|
var MessageEntry = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 0;\n margin-bottom: ", ";\n\n &:first-of-type {\n margin-top: ", ";\n }\n\n &:last-of-type {\n padding-bottom: ", ";\n }\n\n * {\n font-size: ", ";\n }\n\n & span,\n p,\n a,\n div {\n font-weight: 300;\n }\n\n & b,\n h1 {\n font-weight: normal;\n }\n\n ", "\n"], ["\n margin: 0;\n margin-bottom: ", ";\n\n &:first-of-type {\n margin-top: ", ";\n }\n\n &:last-of-type {\n padding-bottom: ", ";\n }\n\n * {\n font-size: ", ";\n }\n\n & span,\n p,\n a,\n div {\n font-weight: 300;\n }\n\n & b,\n h1 {\n font-weight: normal;\n }\n\n ", "\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.medium; }, 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; }, (0, widget_ui_1.headingElement)('h1', (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-weight: normal;\n "], ["\n font-weight: normal;\n "])))));
|
|
138
138
|
exports.default = Conversation;
|
|
139
139
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -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: 15%;\n width: 85%;\n ", ";\n"], ["\n display: grid;\n margin-right: 15%;\n width: 85%;\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
|
});
|
|
@@ -10,17 +10,41 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
-
var
|
|
14
|
-
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
15
35
|
};
|
|
16
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
37
|
var widget_ui_1 = require("@telia-ace/widget-ui");
|
|
18
|
-
var react_1 =
|
|
38
|
+
var react_1 = __importStar(require("react"));
|
|
19
39
|
var conversation_styles_1 = require("../conversation-styles");
|
|
20
40
|
var CustomMessage = function (props) {
|
|
21
41
|
var CustomComponent = (0, widget_ui_1.useComponent)(props.type);
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
42
|
+
if (typeof CustomComponent === 'undefined') {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
return (react_1.default.createElement(react_1.Suspense, { fallback: null },
|
|
46
|
+
react_1.default.createElement(conversation_styles_1.MessageContent, { user: props.isUser, stacked: !!props.stacked && props.stacked, fullWidth: !!props.content.form || !!props.content.actions },
|
|
47
|
+
react_1.default.createElement(conversation_styles_1.MessageContentPart, { noPadding: !!props.content.noPadding && props.content.noPadding },
|
|
48
|
+
react_1.default.createElement(CustomComponent, __assign({}, props.content))))));
|
|
25
49
|
};
|
|
26
50
|
exports.default = CustomMessage;
|
package/lib-esm/agent.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Symbol } from '@telia-ace/widget-ui';
|
|
2
2
|
import { ConversationEntry } from './conversation-controller';
|
|
3
3
|
import { ConversationProvider } from './conversation-provider';
|
|
4
|
-
import { ConversationMessageSettings } from './types';
|
|
4
|
+
import { ConversationMessageSettings, ConverstationMessageItem } from './types';
|
|
5
5
|
export declare type AgentSettings = {
|
|
6
6
|
name?: string;
|
|
7
7
|
avatar?: string | Symbol;
|
|
@@ -11,7 +11,7 @@ export declare class Agent {
|
|
|
11
11
|
name?: string;
|
|
12
12
|
avatar?: string | Symbol;
|
|
13
13
|
constructor(provider: ConversationProvider, settings: AgentSettings);
|
|
14
|
-
print: (settings: string | ConversationMessageSettings) => ConversationEntry | undefined;
|
|
14
|
+
print: (settings: string | ConversationMessageSettings | ConverstationMessageItem<any> | ConverstationMessageItem<any>[]) => ConversationEntry | undefined;
|
|
15
15
|
typing: () => (() => void) | undefined;
|
|
16
16
|
update(settings: AgentSettings): void;
|
|
17
17
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Container, EventListener, EventManager } from '@webprovisions/platform';
|
|
2
2
|
import { ConversationProvider } from './conversation-provider';
|
|
3
|
-
import { ConversationMessageContent, ConversationMessageSender, ConversationMessageSettings, ConversationMessageUpdateSettings, NormalizedMessageSettings } from './types';
|
|
3
|
+
import { ConversationMessageContent, ConversationMessageSender, ConversationMessageSettings, ConversationMessageUpdateSettings, ConverstationMessageItem, NormalizedMessageSettings } from './types';
|
|
4
4
|
import { User } from './user';
|
|
5
5
|
export declare type ValidateHandler = (formValues: {
|
|
6
6
|
[key: string]: any;
|
|
@@ -20,8 +20,9 @@ export declare type CancelLoaderDelegate = () => void;
|
|
|
20
20
|
export declare class ConversationEntry {
|
|
21
21
|
private writer;
|
|
22
22
|
constructor(writer: EntryWriter);
|
|
23
|
-
update(content: string | ConversationMessageUpdateSettings): void;
|
|
23
|
+
update(content: string | ConversationMessageUpdateSettings | ConverstationMessageItem<any> | ConverstationMessageItem<any>[]): void;
|
|
24
24
|
remove(): void;
|
|
25
|
+
private getNormalizedSettings;
|
|
25
26
|
}
|
|
26
27
|
export declare enum ConversationMessageType {
|
|
27
28
|
User = "user",
|
|
@@ -36,7 +37,7 @@ export declare type ConversationMessage = {
|
|
|
36
37
|
type: ConversationMessageType;
|
|
37
38
|
};
|
|
38
39
|
export declare type EntryWriter = (content: ConversationMessageUpdateSettings | null) => void;
|
|
39
|
-
export declare const getNormalizedMessageSettings: (settings: string | ConversationMessageSettings) => NormalizedMessageSettings;
|
|
40
|
+
export declare const getNormalizedMessageSettings: (settings: string | ConversationMessageSettings | ConverstationMessageItem<any> | ConverstationMessageItem<any>[]) => NormalizedMessageSettings;
|
|
40
41
|
/**
|
|
41
42
|
* Manages the stream of messages inside a `ConversationComponent` and provides external read-write
|
|
42
43
|
* access to it as well as exposing emitted actions.
|