@telia-ace/widget-conversation 1.0.12 → 1.0.13
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-esm → dist}/agent.d.ts +0 -0
- package/{lib-esm → dist}/conversation-controller.d.ts +0 -0
- package/{lib-esm → dist}/conversation-form-adapter.d.ts +0 -0
- package/{lib-esm → dist}/conversation-platform.d.ts +0 -0
- package/{lib-esm → dist}/conversation-provider.d.ts +0 -0
- package/dist/conversation.js +1357 -0
- package/dist/conversation.js.map +1 -0
- package/{lib-esm → dist}/index.d.ts +0 -0
- package/dist/index.js +867 -0
- package/dist/index.js.map +1 -0
- package/{lib-esm → dist}/resolve-entity-value.d.ts +0 -0
- package/dist/return-button.js +174 -0
- package/dist/return-button.js.map +1 -0
- package/{lib-esm → dist}/types.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/conversation-component.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/conversation-content.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/conversation-input.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/conversation-loader.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/conversation-message.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/conversation-styles.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/conversation.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/index.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/message-types/agent.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/message-types/custom-message-list-item.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/message-types/custom.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/message-types/index.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/message-types/system.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/message-types/timestamp.d.ts +0 -0
- package/{lib-esm → dist}/ui/conversation/message-types/user.d.ts +0 -0
- package/{lib-esm → dist}/ui/index.d.ts +0 -0
- package/{lib-esm → dist}/ui/return-button/index.d.ts +0 -0
- package/{lib-esm → dist}/ui/return-button/return-button-component.d.ts +0 -0
- package/{lib-esm → dist}/ui/return-button/return-button.d.ts +0 -0
- package/{lib-esm → dist}/user.d.ts +0 -0
- package/{lib-esm → dist}/utils/custom-message.d.ts +0 -0
- package/{lib-esm → dist}/utils/index.d.ts +0 -0
- package/{lib-esm → dist}/utils/open-chat-widget.d.ts +0 -0
- package/package.json +14 -15
- package/lib/agent.d.ts +0 -17
- package/lib/agent.js +0 -37
- package/lib/conversation-controller.d.ts +0 -88
- package/lib/conversation-controller.js +0 -318
- package/lib/conversation-form-adapter.d.ts +0 -7
- package/lib/conversation-form-adapter.js +0 -88
- package/lib/conversation-platform.d.ts +0 -49
- package/lib/conversation-platform.js +0 -295
- package/lib/conversation-provider.d.ts +0 -22
- package/lib/conversation-provider.js +0 -73
- package/lib/index.d.ts +0 -9
- package/lib/index.js +0 -17
- package/lib/resolve-entity-value.d.ts +0 -10
- package/lib/resolve-entity-value.js +0 -22
- package/lib/types.d.ts +0 -110
- package/lib/types.js +0 -19
- package/lib/ui/conversation/conversation-component.d.ts +0 -37
- package/lib/ui/conversation/conversation-component.js +0 -152
- package/lib/ui/conversation/conversation-content.d.ts +0 -11
- package/lib/ui/conversation/conversation-content.js +0 -240
- package/lib/ui/conversation/conversation-input.d.ts +0 -6
- package/lib/ui/conversation/conversation-input.js +0 -163
- package/lib/ui/conversation/conversation-loader.d.ts +0 -8
- package/lib/ui/conversation/conversation-loader.js +0 -18
- package/lib/ui/conversation/conversation-message.d.ts +0 -7
- package/lib/ui/conversation/conversation-message.js +0 -141
- package/lib/ui/conversation/conversation-styles.d.ts +0 -11
- package/lib/ui/conversation/conversation-styles.js +0 -65
- package/lib/ui/conversation/conversation.d.ts +0 -6
- package/lib/ui/conversation/conversation.js +0 -139
- package/lib/ui/conversation/index.d.ts +0 -2
- package/lib/ui/conversation/index.js +0 -7
- package/lib/ui/conversation/message-types/agent.d.ts +0 -11
- package/lib/ui/conversation/message-types/agent.js +0 -54
- package/lib/ui/conversation/message-types/custom-message-list-item.d.ts +0 -9
- package/lib/ui/conversation/message-types/custom-message-list-item.js +0 -27
- package/lib/ui/conversation/message-types/custom.d.ts +0 -9
- package/lib/ui/conversation/message-types/custom.js +0 -50
- package/lib/ui/conversation/message-types/index.d.ts +0 -5
- package/lib/ui/conversation/message-types/index.js +0 -16
- package/lib/ui/conversation/message-types/system.d.ts +0 -12
- package/lib/ui/conversation/message-types/system.js +0 -26
- package/lib/ui/conversation/message-types/timestamp.d.ts +0 -8
- package/lib/ui/conversation/message-types/timestamp.js +0 -36
- package/lib/ui/conversation/message-types/user.d.ts +0 -8
- package/lib/ui/conversation/message-types/user.js +0 -24
- package/lib/ui/index.d.ts +0 -2
- package/lib/ui/index.js +0 -10
- package/lib/ui/return-button/index.d.ts +0 -2
- package/lib/ui/return-button/index.js +0 -7
- package/lib/ui/return-button/return-button-component.d.ts +0 -19
- package/lib/ui/return-button/return-button-component.js +0 -70
- package/lib/ui/return-button/return-button.d.ts +0 -6
- package/lib/ui/return-button/return-button.js +0 -82
- package/lib/user.d.ts +0 -7
- package/lib/user.js +0 -16
- package/lib/utils/custom-message.d.ts +0 -3
- package/lib/utils/custom-message.js +0 -56
- package/lib/utils/index.d.ts +0 -1
- package/lib/utils/index.js +0 -7
- package/lib/utils/open-chat-widget.d.ts +0 -4
- package/lib/utils/open-chat-widget.js +0 -148
- package/lib-esm/agent.js +0 -34
- package/lib-esm/conversation-controller.js +0 -314
- package/lib-esm/conversation-form-adapter.js +0 -85
- package/lib-esm/conversation-platform.js +0 -292
- package/lib-esm/conversation-provider.js +0 -70
- package/lib-esm/index.js +0 -6
- package/lib-esm/resolve-entity-value.js +0 -18
- package/lib-esm/types.js +0 -16
- package/lib-esm/ui/conversation/conversation-component.js +0 -127
- package/lib-esm/ui/conversation/conversation-content.js +0 -212
- package/lib-esm/ui/conversation/conversation-input.js +0 -138
- package/lib-esm/ui/conversation/conversation-loader.js +0 -13
- package/lib-esm/ui/conversation/conversation-message.js +0 -113
- package/lib-esm/ui/conversation/conversation-styles.js +0 -39
- package/lib-esm/ui/conversation/conversation.js +0 -111
- package/lib-esm/ui/conversation/index.js +0 -2
- package/lib-esm/ui/conversation/message-types/agent.js +0 -25
- package/lib-esm/ui/conversation/message-types/custom-message-list-item.js +0 -22
- package/lib-esm/ui/conversation/message-types/custom.js +0 -25
- package/lib-esm/ui/conversation/message-types/index.js +0 -5
- package/lib-esm/ui/conversation/message-types/system.js +0 -20
- package/lib-esm/ui/conversation/message-types/timestamp.js +0 -31
- package/lib-esm/ui/conversation/message-types/user.js +0 -19
- package/lib-esm/ui/index.js +0 -2
- package/lib-esm/ui/return-button/index.js +0 -2
- package/lib-esm/ui/return-button/return-button-component.js +0 -44
- package/lib-esm/ui/return-button/return-button.js +0 -54
- package/lib-esm/user.js +0 -13
- package/lib-esm/utils/custom-message.js +0 -52
- package/lib-esm/utils/index.js +0 -1
- package/lib-esm/utils/open-chat-widget.js +0 -142
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
-
return cooked;
|
|
4
|
-
};
|
|
5
|
-
var __assign = (this && this.__assign) || function () {
|
|
6
|
-
__assign = Object.assign || function(t) {
|
|
7
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
-
s = arguments[i];
|
|
9
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
10
|
-
t[p] = s[p];
|
|
11
|
-
}
|
|
12
|
-
return t;
|
|
13
|
-
};
|
|
14
|
-
return __assign.apply(this, arguments);
|
|
15
|
-
};
|
|
16
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
17
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
18
|
-
if (!m) return o;
|
|
19
|
-
var i = m.call(o), r, ar = [], e;
|
|
20
|
-
try {
|
|
21
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
22
|
-
}
|
|
23
|
-
catch (error) { e = { error: error }; }
|
|
24
|
-
finally {
|
|
25
|
-
try {
|
|
26
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
27
|
-
}
|
|
28
|
-
finally { if (e) throw e.error; }
|
|
29
|
-
}
|
|
30
|
-
return ar;
|
|
31
|
-
};
|
|
32
|
-
import { borderTabStyle, headingElement, useProperties, useScroll, useTransitionEnd, } from '@telia-ace/widget-ui';
|
|
33
|
-
import { appendClassNames } from '@telia-ace/widget-utilities';
|
|
34
|
-
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
35
|
-
import styled, { css } from 'styled-components';
|
|
36
|
-
import ConversationInput from './conversation-input';
|
|
37
|
-
import ConversationLoader from './conversation-loader';
|
|
38
|
-
import ConversationMessageComponent from './conversation-message';
|
|
39
|
-
import { AgentMessage } from './message-types';
|
|
40
|
-
var Conversation = function (_a) {
|
|
41
|
-
var className = _a.className;
|
|
42
|
-
var lastEntry = useRef(document.createElement('div'));
|
|
43
|
-
var _b = __read(useScroll(true), 2), scrollableCss = _b[0], viewElem = _b[1];
|
|
44
|
-
var _c = useProperties(), messages = _c.messages, loading = _c.loading, typingActors = _c.typingActors;
|
|
45
|
-
var _d = __read(useState(false), 2), canSmooth = _d[0], setCanSmooth = _d[1];
|
|
46
|
-
var scrollView = useCallback(function (lastEntry, smooth) {
|
|
47
|
-
if (smooth === void 0) { smooth = true; }
|
|
48
|
-
if (lastEntry !== null && lastEntry.current !== null) {
|
|
49
|
-
if (messages && messages.length === 1) {
|
|
50
|
-
lastEntry.current.focus();
|
|
51
|
-
}
|
|
52
|
-
/**
|
|
53
|
-
* Don't scroll on typing state if the user has scrolled up a bit.
|
|
54
|
-
*/
|
|
55
|
-
if (lastEntry.current.id.indexOf('typing_') !== -1 &&
|
|
56
|
-
viewElem.current.scrollTopMax - viewElem.current.scrollTop >
|
|
57
|
-
lastEntry.current.clientHeight + 100) {
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
setTimeout(function () {
|
|
61
|
-
if (lastEntry.current) {
|
|
62
|
-
lastEntry.current.scrollIntoView({
|
|
63
|
-
block: 'end',
|
|
64
|
-
behavior: smooth ? 'smooth' : 'auto',
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
}, 0);
|
|
68
|
-
}
|
|
69
|
-
}, [lastEntry]);
|
|
70
|
-
useEffect(function () {
|
|
71
|
-
if (canSmooth) {
|
|
72
|
-
scrollView(lastEntry);
|
|
73
|
-
}
|
|
74
|
-
}, [messages, typingActors]);
|
|
75
|
-
useTransitionEnd(function () {
|
|
76
|
-
setCanSmooth(true);
|
|
77
|
-
scrollView(lastEntry, false);
|
|
78
|
-
});
|
|
79
|
-
var renderTypingActors = function () {
|
|
80
|
-
if (typingActors && typingActors.length) {
|
|
81
|
-
return typingActors.map(function (actor, index) {
|
|
82
|
-
return (React.createElement(MessageEntry, { id: "typing_".concat(actor.name), ref: typingActors.length ? lastEntry : null, key: "typing_".concat(actor.name) },
|
|
83
|
-
React.createElement(AgentMessage, { timestamp: Date.now(), sender: actor },
|
|
84
|
-
React.createElement(ConversationLoader, null))));
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
return null;
|
|
88
|
-
};
|
|
89
|
-
return (React.createElement(Wrapper, { className: appendClassNames(className, 'humany-conversation-component') },
|
|
90
|
-
React.createElement(Scrollable, { tabIndex: 0, scrollableCss: scrollableCss, ref: viewElem },
|
|
91
|
-
messages && messages.length
|
|
92
|
-
? messages.map(function (message, index) {
|
|
93
|
-
var type = message.type, timestamp = message.timestamp, sender = message.sender, content = message.content;
|
|
94
|
-
return (React.createElement(MessageEntry, { className: 'humany-conversation-entry', tabIndex: -1, key: "".concat(type, "_").concat(sender === null || sender === void 0 ? void 0 : sender.name, "_").concat(timestamp, "_").concat(content[0].key), ref: index + 1 < messages.length
|
|
95
|
-
? null
|
|
96
|
-
: typingActors.length
|
|
97
|
-
? null
|
|
98
|
-
: lastEntry },
|
|
99
|
-
React.createElement(ConversationMessageComponent, __assign({}, message))));
|
|
100
|
-
})
|
|
101
|
-
: null,
|
|
102
|
-
renderTypingActors(),
|
|
103
|
-
loading && (React.createElement(MessageEntry, null,
|
|
104
|
-
React.createElement(ConversationLoader, null)))),
|
|
105
|
-
React.createElement(ConversationInput, null)));
|
|
106
|
-
};
|
|
107
|
-
var Wrapper = styled.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"])));
|
|
108
|
-
var Scrollable = styled.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) && borderTabStyle; });
|
|
109
|
-
var MessageEntry = styled.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; }, headingElement('h1', css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-weight: normal;\n "], ["\n font-weight: normal;\n "])))));
|
|
110
|
-
export default Conversation;
|
|
111
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
-
return cooked;
|
|
4
|
-
};
|
|
5
|
-
import { SymbolBadge, useProperties } from '@telia-ace/widget-ui';
|
|
6
|
-
import { appendClassNames } from '@telia-ace/widget-utilities';
|
|
7
|
-
import React from 'react';
|
|
8
|
-
import styled, { css } from 'styled-components';
|
|
9
|
-
import { Avatar } from '../conversation-styles';
|
|
10
|
-
import Timestamp from './timestamp';
|
|
11
|
-
var AgentMessage = function (_a) {
|
|
12
|
-
var className = _a.className, children = _a.children, sender = _a.sender, timestamp = _a.timestamp;
|
|
13
|
-
var avatar = sender.avatar, name = sender.name;
|
|
14
|
-
var avatarSize = useProperties().avatarSize;
|
|
15
|
-
return (React.createElement(StyledAgentMessage, { hasAvatar: !!avatar, className: appendClassNames(className, 'humany-conversation-agent-message') },
|
|
16
|
-
avatar && (React.createElement(Avatar, { avatarSize: avatarSize }, typeof avatar === 'string' ? (React.createElement("img", { src: avatar })) : (React.createElement(SymbolBadge, { symbol: avatar })))),
|
|
17
|
-
children,
|
|
18
|
-
React.createElement(Timestamp, { name: name, timestamp: timestamp })));
|
|
19
|
-
};
|
|
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
|
-
return p.hasAvatar
|
|
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
|
-
});
|
|
24
|
-
export default AgentMessage;
|
|
25
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1,22 +0,0 @@
|
|
|
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;
|
|
@@ -1,25 +0,0 @@
|
|
|
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, { Suspense } from 'react';
|
|
14
|
-
import { MessageContent, MessageContentPart } from '../conversation-styles';
|
|
15
|
-
var CustomMessage = function (props) {
|
|
16
|
-
var CustomComponent = useComponent(props.type);
|
|
17
|
-
if (!CustomComponent) {
|
|
18
|
-
return null;
|
|
19
|
-
}
|
|
20
|
-
return (React.createElement(Suspense, { fallback: null },
|
|
21
|
-
React.createElement(MessageContent, { user: props.isUser, stacked: !!props.stacked && props.stacked, fullWidth: !!props.content.form || !!props.content.actions },
|
|
22
|
-
React.createElement(MessageContentPart, { noPadding: !!props.content.noPadding && props.content.noPadding },
|
|
23
|
-
React.createElement(CustomComponent, __assign({}, props.content))))));
|
|
24
|
-
};
|
|
25
|
-
export default CustomMessage;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
-
return cooked;
|
|
4
|
-
};
|
|
5
|
-
import { appendClassNames } from '@telia-ace/widget-utilities';
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import styled from 'styled-components';
|
|
8
|
-
import Timestamp from './timestamp';
|
|
9
|
-
var SystemMessage = function (_a) {
|
|
10
|
-
var className = _a.className, children = _a.children, timestamp = _a.timestamp, discrete = _a.discrete, fullWidth = _a.fullWidth;
|
|
11
|
-
return (React.createElement(StyledSystemMessage, { className: appendClassNames(className, 'humany-conversation-system-message'), fullWidth: fullWidth }, discrete ? (React.createElement(Discrete, { className: "humany-conversation-discrete-message" },
|
|
12
|
-
children,
|
|
13
|
-
React.createElement(Timestamp, { timestamp: timestamp }))) : (React.createElement(React.Fragment, null,
|
|
14
|
-
children,
|
|
15
|
-
React.createElement(Timestamp, { timestamp: timestamp })))));
|
|
16
|
-
};
|
|
17
|
-
export var StyledSystemMessage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n padding: 0 ", ";\n overflow: auto;\n"], ["\n ", ";\n padding: 0 ", ";\n overflow: auto;\n"])), function (p) { return p.fullWidth && 'width: 100%'; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; });
|
|
18
|
-
export var Discrete = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n text-align: center;\n word-wrap: break-word;\n font-size: ", ";\n color: ", ";\n > p {\n margin: 0;\n }\n"], ["\n text-align: center;\n word-wrap: break-word;\n font-size: ", ";\n color: ", ";\n > p {\n margin: 0;\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.text; });
|
|
19
|
-
export default SystemMessage;
|
|
20
|
-
var templateObject_1, templateObject_2;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
-
return cooked;
|
|
4
|
-
};
|
|
5
|
-
import React from 'react';
|
|
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 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
|
-
var getTimestamp = function (raw) {
|
|
9
|
-
return new Date(raw).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
10
|
-
};
|
|
11
|
-
var Timestamp = function (_a) {
|
|
12
|
-
var className = _a.className, name = _a.name, timestamp = _a.timestamp;
|
|
13
|
-
if (!name && !timestamp) {
|
|
14
|
-
return null;
|
|
15
|
-
}
|
|
16
|
-
var output = '';
|
|
17
|
-
if (name) {
|
|
18
|
-
if (timestamp) {
|
|
19
|
-
output = "".concat(name, ": ").concat(getTimestamp(timestamp));
|
|
20
|
-
}
|
|
21
|
-
else {
|
|
22
|
-
output = name;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
else if (timestamp) {
|
|
26
|
-
output = getTimestamp(timestamp);
|
|
27
|
-
}
|
|
28
|
-
return React.createElement(StyledTimestamp, null, output);
|
|
29
|
-
};
|
|
30
|
-
export default Timestamp;
|
|
31
|
-
var templateObject_1;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
-
return cooked;
|
|
4
|
-
};
|
|
5
|
-
import { useProperties } from '@telia-ace/widget-ui';
|
|
6
|
-
import { appendClassNames } from '@telia-ace/widget-utilities';
|
|
7
|
-
import React from 'react';
|
|
8
|
-
import styled from 'styled-components';
|
|
9
|
-
import Timestamp from './timestamp';
|
|
10
|
-
var UserMessage = function (_a) {
|
|
11
|
-
var className = _a.className, children = _a.children, timestamp = _a.timestamp;
|
|
12
|
-
var _b = useProperties().userLabel, userLabel = _b === void 0 ? '' : _b;
|
|
13
|
-
return (React.createElement(StyledUserMessage, { className: appendClassNames(className, 'humany-conversation-user-message') },
|
|
14
|
-
children,
|
|
15
|
-
React.createElement(Timestamp, { name: userLabel, timestamp: timestamp })));
|
|
16
|
-
};
|
|
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
|
-
export default UserMessage;
|
|
19
|
-
var templateObject_1;
|
package/lib-esm/ui/index.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
-
if (!m) return o;
|
|
4
|
-
var i = m.call(o), r, ar = [], e;
|
|
5
|
-
try {
|
|
6
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
-
}
|
|
8
|
-
catch (error) { e = { error: error }; }
|
|
9
|
-
finally {
|
|
10
|
-
try {
|
|
11
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
-
}
|
|
13
|
-
finally { if (e) throw e.error; }
|
|
14
|
-
}
|
|
15
|
-
return ar;
|
|
16
|
-
};
|
|
17
|
-
import { ComponentPlatform } from '@telia-ace/widget-core';
|
|
18
|
-
import { createReactComponent } from '@telia-ace/widget-ui';
|
|
19
|
-
import { ConversationPlatform } from '../../';
|
|
20
|
-
export var ButtonMode;
|
|
21
|
-
(function (ButtonMode) {
|
|
22
|
-
ButtonMode["flat"] = "flat";
|
|
23
|
-
ButtonMode["flashing"] = "flashing";
|
|
24
|
-
ButtonMode["flashingGradient"] = "flashingGradient";
|
|
25
|
-
})(ButtonMode || (ButtonMode = {}));
|
|
26
|
-
var ConversationReturnButtonComponent = function (container) {
|
|
27
|
-
return Promise.all([
|
|
28
|
-
ComponentPlatform.getInstance(container),
|
|
29
|
-
ConversationPlatform.getInstance(container),
|
|
30
|
-
container.getAsync('router'),
|
|
31
|
-
]).then(function (_a) {
|
|
32
|
-
var _b = __read(_a, 3), components = _b[0], platform = _b[1], router = _b[2];
|
|
33
|
-
return createReactComponent(container, 'conversation-return-button', import('./return-button'), function (component) {
|
|
34
|
-
component.actions.create('toggle', function (options) {
|
|
35
|
-
var _a;
|
|
36
|
-
if (options === void 0) { options = {}; }
|
|
37
|
-
(_a = platform.getComponentRoute()) === null || _a === void 0 ? void 0 : _a.then(function (route) {
|
|
38
|
-
route && router.navigate(route.name, route.params);
|
|
39
|
-
});
|
|
40
|
-
});
|
|
41
|
-
});
|
|
42
|
-
});
|
|
43
|
-
};
|
|
44
|
-
export default ConversationReturnButtonComponent;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
-
return cooked;
|
|
4
|
-
};
|
|
5
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
6
|
-
var t = {};
|
|
7
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
8
|
-
t[p] = s[p];
|
|
9
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
10
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
11
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
12
|
-
t[p[i]] = s[p[i]];
|
|
13
|
-
}
|
|
14
|
-
return t;
|
|
15
|
-
};
|
|
16
|
-
// import { Component } from '@telia-ace/widget-types-grid';
|
|
17
|
-
import { borderTabStyle, Button, SymbolBadge, useDispatch, useProperties, } from '@telia-ace/widget-ui';
|
|
18
|
-
import React from 'react';
|
|
19
|
-
import styled, { css, keyframes } from 'styled-components';
|
|
20
|
-
var ReturnButton = function (_a) {
|
|
21
|
-
var className = _a.className, other = __rest(_a, ["className"]);
|
|
22
|
-
var _b = useProperties(), label = _b.label, active = _b.active, _c = _b.mode, mode = _c === void 0 ? 'flat' : _c, _d = _b.alert, alert = _d === void 0 ? {} : _d;
|
|
23
|
-
var symbol = alert.symbol, alertLabel = alert.label, showAlert = alert.show;
|
|
24
|
-
// const [showAlert, setShowAlert] = useState(show);
|
|
25
|
-
var dispatch = useDispatch();
|
|
26
|
-
if (!active) {
|
|
27
|
-
return null;
|
|
28
|
-
}
|
|
29
|
-
return (React.createElement(StyledHighlightedButton, { className: className, mode: mode, "aria-label": label, onClick: function () {
|
|
30
|
-
dispatch('toggle');
|
|
31
|
-
} },
|
|
32
|
-
React.createElement(StyledLabel, null, label),
|
|
33
|
-
symbol && (React.createElement(StyledIconHolder, { showAlert: showAlert },
|
|
34
|
-
React.createElement(SymbolBadge, { symbol: symbol, title: alertLabel, size: 20 })))));
|
|
35
|
-
};
|
|
36
|
-
var FlashingColorAnimation = function (props) {
|
|
37
|
-
var _a, _b, _c;
|
|
38
|
-
return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n background-color: ", ";\n }\n 50% {\n background-color: ", ";\n }\n 100 {\n background-color: ", ";\n }\n"], ["\n 0% {\n background-color: ", ";\n }\n 50% {\n background-color: ", ";\n }\n 100 {\n background-color: ", ";\n }\n"])), (_a = props.theme.colors) === null || _a === void 0 ? void 0 : _a.primary, (_b = props.theme.colors) === null || _b === void 0 ? void 0 : _b.accent, (_c = props.theme.colors) === null || _c === void 0 ? void 0 : _c.primary);
|
|
39
|
-
};
|
|
40
|
-
var ScrollingGradientAnimation = function (props) { return keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0% {\n background-position:0% 51%\n }\n 50% {\n background-position:100% 0%\n }\n 100% {\n background-position:0% 51%\n }\n"], ["\n 0% {\n background-position:0% 51%\n }\n 50% {\n background-position:100% 0%\n }\n 100% {\n background-position:0% 51%\n }\n"]))); };
|
|
41
|
-
var PulsatingIcon = keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg) scale(1.00);\n }\n 50% {\n transform: rotate(0deg) scale(1.00);\n }\n 55% {\n transform: rotate(-3deg) scale(0.80);\n }\n 60% {\n transform: rotate(-3deg) scale(0.80);\n }\n 65% {\n transform: rotate(3deg) scale(1.20);\n }\n 70% {\n transform: rotate(-3deg) scale(1.20);\n }\n 75% {\n transform: rotate(3deg) scale(1.20);\n }\n 80% {\n transform: rotate(-3deg) scale(1.20);\n }\n 85% {\n transform: rotate(3deg) scale(1.20);\n }\n 90% {\n transform: rotate(-3deg) scale(1.20);\n }\n 95% {\n transform: rotate(3deg) scale(1.20);\n }\n 100% {\n transform: rotate(0deg) scale(1);\n }\n"], ["\n 0% {\n transform: rotate(0deg) scale(1.00);\n }\n 50% {\n transform: rotate(0deg) scale(1.00);\n }\n 55% {\n transform: rotate(-3deg) scale(0.80);\n }\n 60% {\n transform: rotate(-3deg) scale(0.80);\n }\n 65% {\n transform: rotate(3deg) scale(1.20);\n }\n 70% {\n transform: rotate(-3deg) scale(1.20);\n }\n 75% {\n transform: rotate(3deg) scale(1.20);\n }\n 80% {\n transform: rotate(-3deg) scale(1.20);\n }\n 85% {\n transform: rotate(3deg) scale(1.20);\n }\n 90% {\n transform: rotate(-3deg) scale(1.20);\n }\n 95% {\n transform: rotate(3deg) scale(1.20);\n }\n 100% {\n transform: rotate(0deg) scale(1);\n }\n"])));
|
|
42
|
-
var StyledIconHolder = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex-grow: 0;\n transform: translateX(", ");\n opacity: ", ";\n transition: transform 0.5s ease, opacity 0.3s ease;\n"], ["\n flex-grow: 0;\n transform: translateX(", ");\n opacity: ", ";\n transition: transform 0.5s ease, opacity 0.3s ease;\n"])), function (p) { return (p.showAlert ? '0px' : '50px'); }, function (p) { return (p.showAlert ? 1 : 0); });
|
|
43
|
-
var StyledLabel = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex: 1;\n font-weight: 300;\n"], ["\n flex: 1;\n font-weight: 300;\n"])));
|
|
44
|
-
var flashingStyle = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n animation: ", " 1s ease infinite;\n"], ["\n animation: ", " 1s ease infinite;\n"])), FlashingColorAnimation);
|
|
45
|
-
var flashingGradientStyle = css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background: linear-gradient(\n 155deg,\n ", ",\n ", "\n );\n background-position: 0px 0px;\n background-size: 200% 200%;\n animation: ", " 1.5s ease infinite;\n"], ["\n background: linear-gradient(\n 155deg,\n ", ",\n ", "\n );\n background-position: 0px 0px;\n background-size: 200% 200%;\n animation: ", " 1.5s ease infinite;\n"])), 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.accent; }, ScrollingGradientAnimation);
|
|
46
|
-
var StyledHighlightedButton = styled(Button)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow: hidden;\n padding: ", ";\n border-radius: ", ";\n color: ", ";\n ", "\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n i,\n svg {\n animation: ", " 3s ease infinite;\n }\n\n &:focus {\n ", "\n background: ", ";\n color: ", ";\n }\n"], ["\n overflow: hidden;\n padding: ", ";\n border-radius: ", ";\n color: ", ";\n ", "\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n i,\n svg {\n animation: ", " 3s ease infinite;\n }\n\n &:focus {\n ", "\n background: ", ";\n color: ", ";\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) { return p.theme.borderRadius; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) {
|
|
47
|
-
return p.mode === 'flashing'
|
|
48
|
-
? flashingStyle
|
|
49
|
-
: p.mode === 'flashingGradient'
|
|
50
|
-
? flashingGradientStyle
|
|
51
|
-
: '';
|
|
52
|
-
}, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, PulsatingIcon, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; }, 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.primary; });
|
|
53
|
-
export default ReturnButton;
|
|
54
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
package/lib-esm/user.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ConversationMessageType, getNormalizedMessageSettings, } from './conversation-controller';
|
|
2
|
-
var User = /** @class */ (function () {
|
|
3
|
-
function User(controller) {
|
|
4
|
-
var _this = this;
|
|
5
|
-
this.controller = controller;
|
|
6
|
-
this.print = function (settings) {
|
|
7
|
-
var normalized = getNormalizedMessageSettings(settings);
|
|
8
|
-
return _this.controller.createEntry(normalized.key, normalized.content, ConversationMessageType.User, undefined, normalized.timestamp);
|
|
9
|
-
};
|
|
10
|
-
}
|
|
11
|
-
return User;
|
|
12
|
-
}());
|
|
13
|
-
export { User };
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
11
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
12
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
13
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
14
|
-
function step(op) {
|
|
15
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
16
|
-
while (_) try {
|
|
17
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
18
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
19
|
-
switch (op[0]) {
|
|
20
|
-
case 0: case 1: t = op; break;
|
|
21
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
22
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
23
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
24
|
-
default:
|
|
25
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
26
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
27
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
28
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
29
|
-
if (t[2]) _.ops.pop();
|
|
30
|
-
_.trys.pop(); continue;
|
|
31
|
-
}
|
|
32
|
-
op = body.call(thisArg, _);
|
|
33
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
34
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
import { lazy } from 'react';
|
|
38
|
-
import { ConversationPlatform } from '..';
|
|
39
|
-
export var registerCustomMessageComponent = function (container, type, component) {
|
|
40
|
-
return container.getAsync('componentResolver').then(function (o) { return __awaiter(void 0, void 0, void 0, function () {
|
|
41
|
-
var platform;
|
|
42
|
-
return __generator(this, function (_a) {
|
|
43
|
-
switch (_a.label) {
|
|
44
|
-
case 0: return [4 /*yield*/, ConversationPlatform.getInstance(container)];
|
|
45
|
-
case 1:
|
|
46
|
-
platform = _a.sent();
|
|
47
|
-
platform.addSubscription(o.registerComponent(type, lazy(function () { return component; })));
|
|
48
|
-
return [2 /*return*/];
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
}); });
|
|
52
|
-
};
|
package/lib-esm/utils/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { navigateToConversation, openChatWidget, shouldPreventDefault } from './open-chat-widget';
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
import { closeAllModals } from '@telia-ace/widget-plugins';
|
|
2
|
-
import { createStorageWriter, StorageCategory, StorageMedium, StorageScope, } from '@telia-ace/widget-services';
|
|
3
|
-
import { ConversationEndedBehavior } from '../';
|
|
4
|
-
var getParentWidget = function (widgetName, implementation) {
|
|
5
|
-
var mainWidgetName = widgetName.split('_contact');
|
|
6
|
-
return implementation.widgets.get(mainWidgetName[0]);
|
|
7
|
-
};
|
|
8
|
-
var getSeparateWidget = function (container) {
|
|
9
|
-
var originWidget = container.get('$widget');
|
|
10
|
-
var _a = container.get('$widget'), name = _a.name, implementation = _a.implementation;
|
|
11
|
-
var mainWidget = name.indexOf('_contact') > -1 ? getParentWidget(name, implementation) : originWidget;
|
|
12
|
-
var data = container.get('$settings').data;
|
|
13
|
-
var trigger = mainWidget.container.get('$settings').trigger;
|
|
14
|
-
var chatWidgetName = "".concat(name
|
|
15
|
-
.replace('_contact-method', '')
|
|
16
|
-
.replace('_contact', ''), "_contact-method");
|
|
17
|
-
var chatWidget = implementation.widgets.get(chatWidgetName);
|
|
18
|
-
if (chatWidget && !trigger) {
|
|
19
|
-
return { chatWidget: chatWidget, mainWidget: mainWidget, data: data };
|
|
20
|
-
}
|
|
21
|
-
return { mainWidget: mainWidget, data: data };
|
|
22
|
-
};
|
|
23
|
-
export var shouldPreventDefault = function (container) {
|
|
24
|
-
var chatWidget = getSeparateWidget(container).chatWidget;
|
|
25
|
-
return !!chatWidget;
|
|
26
|
-
};
|
|
27
|
-
export var openChatWidget = function (container, contactMethod /*ContactMethodType*/, triggerDOMTarget) {
|
|
28
|
-
var _a = getSeparateWidget(container), mainWidget = _a.mainWidget, data = _a.data, chatWidget = _a.chatWidget;
|
|
29
|
-
if (chatWidget) {
|
|
30
|
-
if (chatWidget.state === 'activated') {
|
|
31
|
-
return chatWidget.invoke('open').then(function () {
|
|
32
|
-
chatWidget.container.getAsync('conversation').then(function (conversation) {
|
|
33
|
-
conversation
|
|
34
|
-
.navigateToConversationIfActive(contactMethod.id)
|
|
35
|
-
.then(function () { return closeAllModals(container); });
|
|
36
|
-
});
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
return chatWidget
|
|
40
|
-
.activate()
|
|
41
|
-
.then(function () {
|
|
42
|
-
var trigger = chatWidget.container.get('$settings').trigger;
|
|
43
|
-
trigger.action = 'hide'; // could be default in configuration
|
|
44
|
-
return chatWidget
|
|
45
|
-
.invoke('setSettings', function () { return ({
|
|
46
|
-
data: data,
|
|
47
|
-
trigger: trigger,
|
|
48
|
-
activate: true,
|
|
49
|
-
}); })
|
|
50
|
-
.then(function () {
|
|
51
|
-
return chatWidget.container
|
|
52
|
-
.getAsync('components')
|
|
53
|
-
.then(function (components) {
|
|
54
|
-
/**
|
|
55
|
-
* Could cause issues if target widget is no longer as specific for this use case
|
|
56
|
-
*/
|
|
57
|
-
var contactMethodsQuery = components
|
|
58
|
-
.components()
|
|
59
|
-
.ofType('contact-method');
|
|
60
|
-
components.write({
|
|
61
|
-
key: 'setContactMethodId',
|
|
62
|
-
attributes: {
|
|
63
|
-
properties: {
|
|
64
|
-
id: contactMethod.id,
|
|
65
|
-
guideId: contactMethod.guideId,
|
|
66
|
-
},
|
|
67
|
-
},
|
|
68
|
-
target: contactMethodsQuery,
|
|
69
|
-
provider: 'localStorage',
|
|
70
|
-
});
|
|
71
|
-
var conversationsQuery = components
|
|
72
|
-
.components()
|
|
73
|
-
.ofType('conversation');
|
|
74
|
-
components.write({
|
|
75
|
-
key: 'setConversationProvider',
|
|
76
|
-
attributes: {
|
|
77
|
-
properties: { providers: [contactMethod.clientName] },
|
|
78
|
-
},
|
|
79
|
-
target: conversationsQuery,
|
|
80
|
-
provider: 'localStorage',
|
|
81
|
-
});
|
|
82
|
-
});
|
|
83
|
-
});
|
|
84
|
-
})
|
|
85
|
-
.then(function () {
|
|
86
|
-
return chatWidget.invoke('attach', {
|
|
87
|
-
key: 'contact-method',
|
|
88
|
-
triggerDOMElement: triggerDOMTarget,
|
|
89
|
-
withRenderState: 'open',
|
|
90
|
-
});
|
|
91
|
-
})
|
|
92
|
-
.then(function () {
|
|
93
|
-
createStorageWriter(chatWidget.container, 'activeStickyWidget', StorageCategory.Necessary, {
|
|
94
|
-
medium: StorageMedium.Local,
|
|
95
|
-
scope: StorageScope.Implementation,
|
|
96
|
-
}).then(function (write) { return write(chatWidget.name); });
|
|
97
|
-
return chatWidget.container
|
|
98
|
-
.getAsync('conversation')
|
|
99
|
-
.then(function (platform) {
|
|
100
|
-
platform.setConversationEndedBehavior(ConversationEndedBehavior.Deactivate);
|
|
101
|
-
})
|
|
102
|
-
.then(function () { return closeAllModals(container); })
|
|
103
|
-
.then(function () { return false; });
|
|
104
|
-
});
|
|
105
|
-
}
|
|
106
|
-
mainWidget.container.getAsync('conversation').then(function (platform) {
|
|
107
|
-
return platform
|
|
108
|
-
.navigateToConversationIfActive(contactMethod.id)
|
|
109
|
-
.then(function () { return platform.setConversationEndedBehavior(ConversationEndedBehavior.Navigate); });
|
|
110
|
-
});
|
|
111
|
-
return chatWidget ? false : true;
|
|
112
|
-
};
|
|
113
|
-
export var navigateToConversation = function (container, contactMethod /*ContactMethodType*/, routeName) {
|
|
114
|
-
if (routeName === void 0) { routeName = 'conversation'; }
|
|
115
|
-
var _a = getSeparateWidget(container), mainWidget = _a.mainWidget, chatWidget = _a.chatWidget;
|
|
116
|
-
if (chatWidget) {
|
|
117
|
-
return chatWidget.container.getAsync('router').then(function (router) {
|
|
118
|
-
router.navigate(routeName, { id: contactMethod.id });
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
return mainWidget.container.getAsync('conversation').then(function (platform) {
|
|
122
|
-
var _a;
|
|
123
|
-
(_a = platform.setConversationEndedBehavior(ConversationEndedBehavior.Navigate)) === null || _a === void 0 ? void 0 : _a.then(function () {
|
|
124
|
-
mainWidget.container.getAsync('router').then(function (router) {
|
|
125
|
-
mainWidget.container
|
|
126
|
-
.getAsync('components')
|
|
127
|
-
.then(function (components) {
|
|
128
|
-
var conversationQuery = components.components().ofType('conversation');
|
|
129
|
-
components.write({
|
|
130
|
-
key: 'setConversationProvider',
|
|
131
|
-
attributes: { properties: { providers: [contactMethod.clientName] } },
|
|
132
|
-
target: conversationQuery,
|
|
133
|
-
provider: 'localStorage',
|
|
134
|
-
});
|
|
135
|
-
})
|
|
136
|
-
.then(function () {
|
|
137
|
-
router.navigate(routeName, { id: contactMethod.id });
|
|
138
|
-
});
|
|
139
|
-
});
|
|
140
|
-
});
|
|
141
|
-
});
|
|
142
|
-
};
|