@telia-ace/widget-conversation 1.0.8 → 1.0.11

package/lib/ui/conversation/conversation-component.d.ts

@@ -27,6 +27,11 @@ export declare type ConversationComponentProperties = {
     avatarSize: string;
     typingActors: any[];
     sendButtonLabel: string;
+    secondaryAction?: {
+        icon?: string;
+        action: string;
+        label: string;
+    };
 };
 declare const ConversationComponent: (container: Container) => Promise<void>;
 export default ConversationComponent;

package/lib/ui/conversation/conversation-content.js

@@ -53,6 +53,9 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var widget_forms_1 = require("@telia-ace/widget-forms");
 var widget_ui_1 = require("@telia-ace/widget-ui");
@@ -62,6 +65,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var types_1 = require("../../types");
 var conversation_styles_1 = require("./conversation-styles");
 var message_types_1 = require("./message-types");
+var custom_message_list_item_1 = __importDefault(require("./message-types/custom-message-list-item"));
 var imageLightboxRenderer = function (attrs) { return react_1.default.createElement(widget_ui_1.Lightbox, { attrs: attrs }); };
 var htmlParseInstructions = {
     transform: {
@@ -184,8 +188,8 @@ var ConversationContent = function (_a) {
                                         } })));
                             }
                             default: {
-                                return (react_1.default.createElement(react_1.Fragment, null,
-                                    react_1.default.createElement("p", null, "Unknown message type")));
+                                return (react_1.default.createElement(ConversationListItem, { key: itemKey },
+                                    react_1.default.createElement(custom_message_list_item_1.default, { type: item.type, content: item.content })));
                             }
                         }
                     } }))))));

package/lib/ui/conversation/conversation-input.js

@@ -76,7 +76,7 @@ var ConversationInput = function (_a) {
     var _d = __read((0, react_1.useState)(0), 2), calculatedLineHeight = _d[0], setCalculatedLineHeight = _d[1];
     var _e = __read((0, react_1.useState)(0), 2), textareaMaxHeight = _e[0], setTextareaMaxHeight = _e[1];
     var dispatch = (0, widget_ui_1.useDispatch)();
-    var _f = (0, widget_ui_1.useProperties)(), _g = _f.inputPlaceholder, inputPlaceholder = _g === void 0 ? 'Type your message' : _g, _h = _f.inputHidden, inputHidden = _h === void 0 ? false : _h, _j = _f.inputDisabled, inputDisabled = _j === void 0 ? false : _j, _k = _f.sendButtonLabel, sendButtonLabel = _k === void 0 ? 'Send message' : _k, _l = _f.inputMultiline, multiline = _l === void 0 ? true : _l;
+    var _f = (0, widget_ui_1.useProperties)(), _g = _f.inputPlaceholder, inputPlaceholder = _g === void 0 ? 'Type your message' : _g, _h = _f.inputHidden, inputHidden = _h === void 0 ? false : _h, _j = _f.inputDisabled, inputDisabled = _j === void 0 ? false : _j, _k = _f.sendButtonLabel, sendButtonLabel = _k === void 0 ? 'Send message' : _k, _l = _f.inputMultiline, multiline = _l === void 0 ? true : _l, secondaryAction = _f.secondaryAction;
     var _m = __read((0, widget_ui_1.useScroll)(true), 2), scrollableCss = _m[0], inputRef = _m[1];
     (0, react_1.useEffect)(function () {
         if (inputRef.current) {
@@ -103,9 +103,12 @@ var ConversationInput = function (_a) {
             e.preventDefault();
         }
     };
-    var getCategories = function (e) {
+    var onSecondaryActionButtonClick = function (e) {
+        if (!secondaryAction) {
+            return;
+        }
         e.preventDefault();
-        dispatch('action', 'burger-clicked');
+        dispatch('action', secondaryAction.action);
     };
     var calculateHeight = function (value) {
         if (multiline && inputRef.current) {
@@ -137,15 +140,15 @@ var ConversationInput = function (_a) {
         return null;
     }
     return (react_1.default.createElement(Wrapper, { grow: multiline, className: (0, widget_utilities_1.appendClassNames)('humany-conversation-input', className), "data-has-focus": inputFocus, scrollableCss: scrollableCss },
-        react_1.default.createElement(StyledButton, { disabled: inputDisabled, onClick: getCategories, title: sendButtonLabel, "aria-label": sendButtonLabel },
-            react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 22, symbol: { type: 'Svg', content: 'options' } })),
+        secondaryAction && (react_1.default.createElement(StyledButton, { disabled: inputDisabled, onClick: onSecondaryActionButtonClick, title: secondaryAction.label, "aria-label": secondaryAction.label },
+            react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 22, symbol: { type: 'Svg', content: secondaryAction.icon || 'browse' } }))),
         multiline ? (react_1.default.createElement(StyledTextArea, { value: inputText, onChange: onChange, onEnter: submit, disabled: inputDisabled, "aria-label": inputPlaceholder, placeholder: inputPlaceholder, onFocusChange: setInputFocus, type: 'textarea', rows: 1, ref: inputRef })) : (react_1.default.createElement(StyledInput, { value: inputText, onChange: onChange, onEnter: submit, disabled: inputDisabled, "aria-label": inputPlaceholder, placeholder: inputPlaceholder, onFocusChange: setInputFocus })),
         react_1.default.createElement(StyledButton, { disabled: inputDisabled, onClick: submit, title: sendButtonLabel, "aria-label": sendButtonLabel },
             react_1.default.createElement(SendSymbol, { size: 22, symbol: { type: 'Svg', content: 'send' }, hasContent: inputText && inputText.length }))));
 };
 var StyledTextArea = (0, styled_components_1.default)(widget_ui_1.Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    resize: none;\n    flex: 1;\n    flex-shrink: 1;\n    min-height: 1.2em;\n    max-height: 148px;\n    line-height: 1.2em;\n    height: 1.2em;\n    padding: 0;\n    margin: ", " ", ";\n    font-size: ", ";\n    border: none;\n    transition: height 200ms linear;\n    outline: none;\n"], ["\n    resize: none;\n    flex: 1;\n    flex-shrink: 1;\n    min-height: 1.2em;\n    max-height: 148px;\n    line-height: 1.2em;\n    height: 1.2em;\n    padding: 0;\n    margin: ", " ", ";\n    font-size: ", ";\n    border: none;\n    transition: height 200ms linear;\n    outline: none;\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
 var StyledInput = (0, styled_components_1.default)(widget_ui_1.Input)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    flex: 1;\n    border: none;\n    background-color: transparent;\n    font-weight: 300;\n    font-size: ", ";\n    line-height: 1.2em;\n    outline: none;\n    padding-left: ", ";\n    color: ", ";\n    &::placeholder {\n        color: ", ";\n        font-style: italic;\n    }\n"], ["\n    flex: 1;\n    border: none;\n    background-color: transparent;\n    font-weight: 300;\n    font-size: ", ";\n    line-height: 1.2em;\n    outline: none;\n    padding-left: ", ";\n    color: ", ";\n    &::placeholder {\n        color: ", ";\n        font-style: italic;\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.textLight; });
-var StyledButton = (0, styled_components_1.default)(widget_ui_1.Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: 0 0 50px;\n    align-self: stretch;\n    background-color: transparent;\n    border: none;\n    &:focus {\n        ", ";\n    }\n"], ["\n    flex: 0 0 50px;\n    align-self: stretch;\n    background-color: transparent;\n    border: none;\n    &:focus {\n        ", ";\n    }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && widget_ui_1.borderTabStyle; });
+var StyledButton = (0, styled_components_1.default)(widget_ui_1.Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: 0 0 50px;\n    align-self: stretch;\n    background-color: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    color: #a6a6a6;\n    &:focus {\n        ", ";\n    }\n"], ["\n    flex: 0 0 50px;\n    align-self: stretch;\n    background-color: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    color: #a6a6a6;\n    &:focus {\n        ", ";\n    }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && widget_ui_1.borderTabStyle; });
 var Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", "\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    background-color: ", ";\n    border-top: ", ";\n    ", "\n    ", " {\n        ", "\n    }\n"], ["\n    ", "\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    background-color: ", ";\n    border-top: ", ";\n    ", "\n    ", " {\n        ", "\n    }\n"])), function (p) {
     return p.grow
         ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  min-height: 50px;\n                  max-height: 150px;\n              "], ["\n                  min-height: 50px;\n                  max-height: 150px;\n              "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                  height: 50px;\n              "], ["\n                  height: 50px;\n              "])));

package/lib/ui/conversation/message-types/custom-message-list-item.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Props = {
+    type: string;
+    content?: {
+        [key: string]: any;
+    };
+};
+declare const CustomMessageListItem: React.FC<Props>;
+export default CustomMessageListItem;

package/lib/ui/conversation/message-types/custom-message-list-item.js

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = __importDefault(require("react"));
+var CustomMessageListItem = function (_a) {
+    var type = _a.type, _b = _a.content, content = _b === void 0 ? {} : _b;
+    var Component = (0, widget_ui_1.useComponent)(type);
+    if (!Component || !type) {
+        return null;
+    }
+    return react_1.default.createElement(Component, __assign({}, content));
+};
+exports.default = CustomMessageListItem;

package/lib-esm/ui/conversation/conversation-component.d.ts

@@ -27,6 +27,11 @@ export declare type ConversationComponentProperties = {
     avatarSize: string;
     typingActors: any[];
     sendButtonLabel: string;
+    secondaryAction?: {
+        icon?: string;
+        action: string;
+        label: string;
+    };
 };
 declare const ConversationComponent: (container: Container) => Promise<void>;
 export default ConversationComponent;

package/lib-esm/ui/conversation/conversation-content.js

@@ -37,6 +37,7 @@ import styled, { css } from 'styled-components';
 import { ConversationMessageListItemType, } from '../../types';
 import { MessageContent, MessageContentPart as Part, MessageTitle } from './conversation-styles';
 import { CustomMessage } from './message-types';
+import CustomMessageListItem from './message-types/custom-message-list-item';
 var imageLightboxRenderer = function (attrs) { return React.createElement(Lightbox, { attrs: attrs }); };
 var htmlParseInstructions = {
     transform: {
@@ -159,8 +160,8 @@ var ConversationContent = function (_a) {
                                         } })));
                             }
                             default: {
-                                return (React.createElement(Fragment, null,
-                                    React.createElement("p", null, "Unknown message type")));
+                                return (React.createElement(ConversationListItem, { key: itemKey },
+                                    React.createElement(CustomMessageListItem, { type: item.type, content: item.content })));
                             }
                         }
                     } }))))));

package/lib-esm/ui/conversation/conversation-input.js

@@ -51,7 +51,7 @@ var ConversationInput = function (_a) {
     var _d = __read(useState(0), 2), calculatedLineHeight = _d[0], setCalculatedLineHeight = _d[1];
     var _e = __read(useState(0), 2), textareaMaxHeight = _e[0], setTextareaMaxHeight = _e[1];
     var dispatch = useDispatch();
-    var _f = useProperties(), _g = _f.inputPlaceholder, inputPlaceholder = _g === void 0 ? 'Type your message' : _g, _h = _f.inputHidden, inputHidden = _h === void 0 ? false : _h, _j = _f.inputDisabled, inputDisabled = _j === void 0 ? false : _j, _k = _f.sendButtonLabel, sendButtonLabel = _k === void 0 ? 'Send message' : _k, _l = _f.inputMultiline, multiline = _l === void 0 ? true : _l;
+    var _f = useProperties(), _g = _f.inputPlaceholder, inputPlaceholder = _g === void 0 ? 'Type your message' : _g, _h = _f.inputHidden, inputHidden = _h === void 0 ? false : _h, _j = _f.inputDisabled, inputDisabled = _j === void 0 ? false : _j, _k = _f.sendButtonLabel, sendButtonLabel = _k === void 0 ? 'Send message' : _k, _l = _f.inputMultiline, multiline = _l === void 0 ? true : _l, secondaryAction = _f.secondaryAction;
     var _m = __read(useScroll(true), 2), scrollableCss = _m[0], inputRef = _m[1];
     useEffect(function () {
         if (inputRef.current) {
@@ -78,9 +78,12 @@ var ConversationInput = function (_a) {
             e.preventDefault();
         }
     };
-    var getCategories = function (e) {
+    var onSecondaryActionButtonClick = function (e) {
+        if (!secondaryAction) {
+            return;
+        }
         e.preventDefault();
-        dispatch('action', 'burger-clicked');
+        dispatch('action', secondaryAction.action);
     };
     var calculateHeight = function (value) {
         if (multiline && inputRef.current) {
@@ -112,15 +115,15 @@ var ConversationInput = function (_a) {
         return null;
     }
     return (React.createElement(Wrapper, { grow: multiline, className: appendClassNames('humany-conversation-input', className), "data-has-focus": inputFocus, scrollableCss: scrollableCss },
-        React.createElement(StyledButton, { disabled: inputDisabled, onClick: getCategories, title: sendButtonLabel, "aria-label": sendButtonLabel },
-            React.createElement(SymbolBadge, { size: 22, symbol: { type: 'Svg', content: 'options' } })),
+        secondaryAction && (React.createElement(StyledButton, { disabled: inputDisabled, onClick: onSecondaryActionButtonClick, title: secondaryAction.label, "aria-label": secondaryAction.label },
+            React.createElement(SymbolBadge, { size: 22, symbol: { type: 'Svg', content: secondaryAction.icon || 'browse' } }))),
         multiline ? (React.createElement(StyledTextArea, { value: inputText, onChange: onChange, onEnter: submit, disabled: inputDisabled, "aria-label": inputPlaceholder, placeholder: inputPlaceholder, onFocusChange: setInputFocus, type: 'textarea', rows: 1, ref: inputRef })) : (React.createElement(StyledInput, { value: inputText, onChange: onChange, onEnter: submit, disabled: inputDisabled, "aria-label": inputPlaceholder, placeholder: inputPlaceholder, onFocusChange: setInputFocus })),
         React.createElement(StyledButton, { disabled: inputDisabled, onClick: submit, title: sendButtonLabel, "aria-label": sendButtonLabel },
             React.createElement(SendSymbol, { size: 22, symbol: { type: 'Svg', content: 'send' }, hasContent: inputText && inputText.length }))));
 };
 var StyledTextArea = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    resize: none;\n    flex: 1;\n    flex-shrink: 1;\n    min-height: 1.2em;\n    max-height: 148px;\n    line-height: 1.2em;\n    height: 1.2em;\n    padding: 0;\n    margin: ", " ", ";\n    font-size: ", ";\n    border: none;\n    transition: height 200ms linear;\n    outline: none;\n"], ["\n    resize: none;\n    flex: 1;\n    flex-shrink: 1;\n    min-height: 1.2em;\n    max-height: 148px;\n    line-height: 1.2em;\n    height: 1.2em;\n    padding: 0;\n    margin: ", " ", ";\n    font-size: ", ";\n    border: none;\n    transition: height 200ms linear;\n    outline: none;\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
 var StyledInput = styled(Input)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    flex: 1;\n    border: none;\n    background-color: transparent;\n    font-weight: 300;\n    font-size: ", ";\n    line-height: 1.2em;\n    outline: none;\n    padding-left: ", ";\n    color: ", ";\n    &::placeholder {\n        color: ", ";\n        font-style: italic;\n    }\n"], ["\n    flex: 1;\n    border: none;\n    background-color: transparent;\n    font-weight: 300;\n    font-size: ", ";\n    line-height: 1.2em;\n    outline: none;\n    padding-left: ", ";\n    color: ", ";\n    &::placeholder {\n        color: ", ";\n        font-style: italic;\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.textLight; });
-var StyledButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: 0 0 50px;\n    align-self: stretch;\n    background-color: transparent;\n    border: none;\n    &:focus {\n        ", ";\n    }\n"], ["\n    flex: 0 0 50px;\n    align-self: stretch;\n    background-color: transparent;\n    border: none;\n    &:focus {\n        ", ";\n    }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; });
+var StyledButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: 0 0 50px;\n    align-self: stretch;\n    background-color: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    color: #a6a6a6;\n    &:focus {\n        ", ";\n    }\n"], ["\n    flex: 0 0 50px;\n    align-self: stretch;\n    background-color: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    color: #a6a6a6;\n    &:focus {\n        ", ";\n    }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; });
 var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", "\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    background-color: ", ";\n    border-top: ", ";\n    ", "\n    ", " {\n        ", "\n    }\n"], ["\n    ", "\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    background-color: ", ";\n    border-top: ", ";\n    ", "\n    ", " {\n        ", "\n    }\n"])), function (p) {
     return p.grow
         ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  min-height: 50px;\n                  max-height: 150px;\n              "], ["\n                  min-height: 50px;\n                  max-height: 150px;\n              "]))) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                  height: 50px;\n              "], ["\n                  height: 50px;\n              "])));

package/lib-esm/ui/conversation/message-types/custom-message-list-item.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Props = {
+    type: string;
+    content?: {
+        [key: string]: any;
+    };
+};
+declare const CustomMessageListItem: React.FC<Props>;
+export default CustomMessageListItem;

package/lib-esm/ui/conversation/message-types/custom-message-list-item.js

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useComponent } from '@telia-ace/widget-ui';
+import React from 'react';
+var CustomMessageListItem = function (_a) {
+    var type = _a.type, _b = _a.content, content = _b === void 0 ? {} : _b;
+    var Component = useComponent(type);
+    if (!Component || !type) {
+        return null;
+    }
+    return React.createElement(Component, __assign({}, content));
+};
+export default CustomMessageListItem;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telia-ace/widget-conversation",
-    "version": "1.0.8",
+    "version": "1.0.11",
     "description": "ACE Widget Conversation Platform",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
@@ -26,11 +26,11 @@
     "typings": "lib/index.d.ts",
     "dependencies": {
         "@telia-ace/widget-core": "^1.0.4",
-        "@telia-ace/widget-forms": "^1.0.6",
+        "@telia-ace/widget-forms": "^1.0.7",
         "@telia-ace/widget-plugins": "^1.0.5",
         "@telia-ace/widget-routing": "^1.0.5",
         "@telia-ace/widget-services": "^1.0.4",
-        "@telia-ace/widget-ui": "^1.0.6",
+        "@telia-ace/widget-ui": "^1.0.7",
         "@telia-ace/widget-utilities": "^1.0.1",
         "@webprovisions/platform": "^1.1.2"
     },
@@ -41,5 +41,5 @@
     "devDependencies": {
         "@types/react": "^16.8.0"
     },
-    "gitHead": "3184f2cacc23be7615786ea65587f2102091ca9e"
+    "gitHead": "d0810784ed9655d556f5653a168d13b8f71910b7"
 }