@telia-ace/widget-conversation 1.0.6 → 1.0.9

package/lib/conversation-controller.js

@@ -60,7 +60,7 @@ var getNormalizedMessageSettings = function (settings) {
     var content;
     var key = (0, widget_utilities_1.uuid)();
     var timestamp = Date.now();
-    if (settings.length > -1 && typeof settings === 'object') {
+    if (Array.isArray(settings) && settings.length > -1) {
         if (typeof settings[0] === 'string') {
             content = { items: [settings] };
         }
@@ -72,7 +72,7 @@ var getNormalizedMessageSettings = function (settings) {
         content = { body: settings };
     }
     else {
-        settings = settings;
+        settings = settings || {};
         if (settings.type) {
             content = __assign({}, settings);
         }

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: {
@@ -106,7 +110,7 @@ var ConversationContent = function (_a) {
                         switch (item.type) {
                             case types_1.ConversationMessageListItemType.Header: {
                                 return (react_1.default.createElement(ConversationListItem, { key: itemKey },
-                                    react_1.default.createElement("strong", null, item.content)));
+                                    react_1.default.createElement(HeaderText, null, item.content)));
                             }
                             case types_1.ConversationMessageListItemType.Text: {
                                 return (react_1.default.createElement(ConversationListItem, { key: itemKey },
@@ -118,7 +122,8 @@ var ConversationContent = function (_a) {
                             }
                             case types_1.ConversationMessageListItemType.Separator: {
                                 return (react_1.default.createElement(ConversationListItem, { key: itemKey, noPadding: true },
-                                    react_1.default.createElement(Separator, null)));
+                                    react_1.default.createElement(SeparatorPadding, null,
+                                        react_1.default.createElement(Separator, null))));
                             }
                             case types_1.ConversationMessageListItemType.LinkList: {
                                 return (react_1.default.createElement(ConversationListItem, { key: itemKey },
@@ -172,7 +177,7 @@ var ConversationContent = function (_a) {
                                                 actionKey: i,
                                             };
                                         }), renderItem: function (item) {
-                                            return (react_1.default.createElement("li", { key: item.actionKey },
+                                            return (react_1.default.createElement(FeedbackItem, { key: item.actionKey },
                                                 react_1.default.createElement(FeedbackButton, { className: "humany-feedback-button", disabled: false, "aria-pressed": true, "data-selected": true, "data-direction": 'vertical', onClick: function () {
                                                         dispatch('action', item.actionKey);
                                                     } },
@@ -183,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 })));
                             }
                         }
                     } }))))));
@@ -200,34 +205,36 @@ var StyledForm = (0, styled_components_1.default)(widget_forms_1.FormComponent)(
 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; });
 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; });
 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; });
-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) {
+var StyledButtonListButton = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", ";\n    display: block;\n    text-align: left;\n    background-color: ", ";\n    width: 100%;\n    color: #fff;\n    &:focus {\n        ", "\n    }\n"], ["\n    ", ";\n    display: block;\n    text-align: left;\n    background-color: ", ";\n    width: 100%;\n    color: #fff;\n    &:focus {\n        ", "\n    }\n"])), widget_ui_1.buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
     var _a;
     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);
 });
 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; });
-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) {
+var HeaderText = styled_components_1.default.strong(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n"], ["\n    font-size: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; });
+var StyledLinkButton = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: block;\n    background-color: transparent;\n    text-align: left;\n    border: none;\n    padding: 0;\n    font-weight: 300;\n    font-family: inherit;\n    cursor: pointer;\n    color: ", ";\n\n    ", "\n"], ["\n    display: block;\n    background-color: transparent;\n    text-align: left;\n    border: none;\n    padding: 0;\n    font-weight: 300;\n    font-family: inherit;\n    cursor: pointer;\n    color: ", ";\n\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
     var _a, _b;
-    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);
+    return p.help && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n            color: ", ";\n            text-decoration: underline;\n\n            i,\n            svg {\n                margin-left: ", ";\n            }\n        "], ["\n            color: ", ";\n            text-decoration: underline;\n\n            i,\n            svg {\n                margin-left: ", ";\n            }\n        "])), (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text, (_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small);
 });
-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) {
+var StyledActionButton = styled_components_1.default.button(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", ";\n    display: block;\n    background-color: ", ";\n    width: 100%;\n    color: #fff;\n    font-family: Lato;\n    font-size: ", ";\n    font-weight: 300;\n    &:focus {\n        ", "\n    }\n"], ["\n    ", ";\n    display: block;\n    background-color: ", ";\n    width: 100%;\n    color: #fff;\n    font-family: Lato;\n    font-size: ", ";\n    font-weight: 300;\n    &:focus {\n        ", "\n    }\n"])), widget_ui_1.buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; }, function (p) {
     var _a;
-    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);
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                ", "\n                background-color: transparent;\n            "], ["\n                ", "\n                background-color: transparent;\n            "])), widget_ui_1.borderTabStyle);
 });
-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"])));
-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; });
-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); });
-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) {
+var SeparatorPadding = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    padding-top: calc(", " - ", ");\n    padding-bottom: calc(", " - ", ");\n"], ["\n    padding-top: calc(", " - ", ");\n    padding-bottom: calc(", " - ", ");\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+var Separator = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    background-color: #efefef;\n    height: 1px;\n    width: 100%;\n"], ["\n    background-color: #efefef;\n    height: 1px;\n    width: 100%;\n"])));
+var NoGoodAlternativeWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n\n    > i,\n    svg {\n        margin-right: ", ";\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n\n    > i,\n    svg {\n        margin-right: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var ConversationListItem = styled_components_1.default.li(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n"], ["\n    padding-left: ", ";\n    padding-right: ", ";\n"])), function (p) { var _a; return (p.noPadding ? 0 : (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium); }, function (p) { var _a; return (p.noPadding ? 0 : (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium); });
+var FeedbackItem = styled_components_1.default.li(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    @media (min-width: 768px) {\n        display: list-item !important;\n        margin-right: 0 !important;\n        margin-top: ", " !important;\n    }\n"], ["\n    @media (min-width: 768px) {\n        display: list-item !important;\n        margin-right: 0 !important;\n        margin-top: ", " !important;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+var FeedbackButton = styled_components_1.default.button(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    @media (min-width: 768px) {\n        min-width: 100%;\n        margin-right: 0;\n    }\n    display: inline-block;\n    font-size: ", ";\n    border-color: ", " !important;\n    font-weight: 300;\n    && {\n        margin-right: ", ";\n    }\n    ", "\n    ", "\n  ", "\n    i {\n        margin: 0 ", " 0 0;\n    }\n    span {\n    }\n"], ["\n    @media (min-width: 768px) {\n        min-width: 100%;\n        margin-right: 0;\n    }\n    display: inline-block;\n    font-size: ", ";\n    border-color: ", " !important;\n    font-weight: 300;\n    && {\n        margin-right: ", ";\n    }\n    ", "\n    ", "\n  ", "\n    i {\n        margin: 0 ", " 0 0;\n    }\n    span {\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) {
     var _a, _b;
-    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);
+    return p['data-direction'] === 'horizontal' && (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n            width: 225px;\n            max-width: calc(50% - ", " - ", ");\n        "], ["\n            width: 225px;\n            max-width: calc(50% - ", " - ", ");\n        "])), (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large, (_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small);
 }, function (p) {
-    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        "])));
+    return p['data-direction'] === 'vertical' && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n            min-width: 150px;\n        "], ["\n            min-width: 150px;\n        "])));
 }, function (p) {
     var _a;
     return (0, widget_ui_1.invertedHoverButton)({
-        active: p['data-selected'],
-        primaryColor: (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+        primaryColor: "".concat((_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary),
         secondaryColor: '#FFFFFF',
     });
-}, 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; });
+}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
 exports.default = ConversationContent;
-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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;

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

@@ -103,6 +103,10 @@ var ConversationInput = function (_a) {
             e.preventDefault();
         }
     };
+    var getCategories = function (e) {
+        e.preventDefault();
+        dispatch('action', 'burger-clicked');
+    };
     var calculateHeight = function (value) {
         if (multiline && inputRef.current) {
             var scrollHeight = inputRef.current.scrollHeight;
@@ -133,6 +137,8 @@ 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' } })),
         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 }))));

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

@@ -36,7 +36,7 @@ exports.Loader = styled_components_1.default.div(templateObject_3 || (templateOb
 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"])));
 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; });
 exports.MessageContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n"], ["\n    display: flex;\n"])));
-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) {
+exports.MessageContent = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    border-radius: 5px; // TODO: prop?\n    border: 1px solid rgb(231, 231, 231);\n    padding-top: calc(", " - ", ");\n    padding-bottom: calc(", " - ", ");\n    margin-top: ", ";\n    display: inline-block;\n    && > * {\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        word-break: break-word;\n        hyphens: auto;\n    }\n    max-width: 100%;\n    ", "\n\n    ", "\n  ", ";\n\n    ", "\n    ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\n    ", ";\n\n    transition: border-radius 500ms linear;\n"], ["\n    background-color: ", ";\n    color: ", ";\n    border-radius: 5px; // TODO: prop?\n    border: 1px solid rgb(231, 231, 231);\n    padding-top: calc(", " - ", ");\n    padding-bottom: calc(", " - ", ");\n    margin-top: ", ";\n    display: inline-block;\n    && > * {\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        word-break: break-word;\n        hyphens: auto;\n    }\n    max-width: 100%;\n    ", "\n\n    ", "\n  ", ";\n\n    ", "\n    ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\n    ", ";\n\n    transition: border-radius 500ms linear;\n"])), function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.accent); }, function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text); }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.fullWidth && 'width: 100%;'; }, function (p) {
     return !p.user && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n            border: ", ";\n        "], ["\n            border: ", ";\n        "])), p.theme.border);
 }, function (p) { return p.user && 'margin-left: auto'; }, function (p) {
     return p.stacked === 'first' &&
@@ -59,7 +59,7 @@ exports.MessageContent = styled_components_1.default.div(templateObject_15 || (t
 }, function (p) {
     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;');
 });
-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) {
+exports.MessageContentPart = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    padding: ", " ", ";\n\n    ", "\n\n    margin-bottom: ", ";\n    &:last-child {\n        margin-bottom: 0;\n    }\n"], ["\n    padding: ", " ", ";\n\n    ", "\n\n    margin-bottom: ", ";\n    &:last-child {\n        margin-bottom: 0;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) {
     return p.noPadding && (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n            padding: 0;\n        "], ["\n            padding: 0;\n        "])));
 }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
 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;

package/lib/ui/conversation/conversation.js

@@ -133,7 +133,7 @@ var Conversation = function (_a) {
         react_1.default.createElement(conversation_input_1.default, null)));
 };
 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"])));
-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.medium; }, 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; });
+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; });
 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        "])))));
 exports.default = Conversation;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/ui/conversation/message-types/agent.js

@@ -46,7 +46,7 @@ var AgentMessage = function (_a) {
         children,
         react_1.default.createElement(timestamp_1.default, { name: name, timestamp: timestamp })));
 };
-exports.StyledAgentMessage = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: grid;\n    margin-right: 0;\n    width: 100%;\n    ", ";\n"], ["\n    display: grid;\n    margin-right: 0;\n    width: 100%;\n    ", ";\n"])), function (p) {
+exports.StyledAgentMessage = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: grid;\n    margin-right: 10%;\n    width: 90%;\n    ", ";\n"], ["\n    display: grid;\n    margin-right: 10%;\n    width: 90%;\n    ", ";\n"])), function (p) {
     return p.hasAvatar
         ? (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              "])));
 });

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/ui/conversation/message-types/timestamp.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var StyledTimestamp = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    && {\n        font-size: ", ";\n        font-weight: 300;\n    }\n    margin: 0;\n    line-height: 1.5em;\n    grid-area: info;\n    color: ", ";\n"], ["\n    && {\n        font-size: ", ";\n        font-weight: 300;\n    }\n    margin: 0;\n    line-height: 1.5em;\n    grid-area: info;\n    color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var StyledTimestamp = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    && {\n        font-size: ", ";\n        font-weight: 300;\n    }\n    padding-top: ", ";\n    margin: 0;\n    line-height: 1.5em;\n    grid-area: info;\n    color: ", ";\n"], ["\n    && {\n        font-size: ", ";\n        font-weight: 300;\n    }\n    padding-top: ", ";\n    margin: 0;\n    line-height: 1.5em;\n    grid-area: info;\n    color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
 var getTimestamp = function (raw) {
     return new Date(raw).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 };

package/lib/ui/conversation/message-types/user.js

@@ -19,6 +19,6 @@ var UserMessage = function (_a) {
         children,
         react_1.default.createElement(timestamp_1.default, { name: userLabel, timestamp: timestamp })));
 };
-var StyledUserMessage = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-left: 15%;\n    width: 85%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n"], ["\n    margin-left: 15%;\n    width: 85%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n"])));
+var StyledUserMessage = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-left: 10%;\n    width: 90%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n"], ["\n    margin-left: 10%;\n    width: 90%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n"])));
 exports.default = UserMessage;
 var templateObject_1;

package/lib-esm/conversation-controller.js

@@ -57,7 +57,7 @@ export var getNormalizedMessageSettings = function (settings) {
     var content;
     var key = uuid();
     var timestamp = Date.now();
-    if (settings.length > -1 && typeof settings === 'object') {
+    if (Array.isArray(settings) && settings.length > -1) {
         if (typeof settings[0] === 'string') {
             content = { items: [settings] };
         }
@@ -69,7 +69,7 @@ export var getNormalizedMessageSettings = function (settings) {
         content = { body: settings };
     }
     else {
-        settings = settings;
+        settings = settings || {};
         if (settings.type) {
             content = __assign({}, settings);
         }

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: {
@@ -81,7 +82,7 @@ var ConversationContent = function (_a) {
                         switch (item.type) {
                             case ConversationMessageListItemType.Header: {
                                 return (React.createElement(ConversationListItem, { key: itemKey },
-                                    React.createElement("strong", null, item.content)));
+                                    React.createElement(HeaderText, null, item.content)));
                             }
                             case ConversationMessageListItemType.Text: {
                                 return (React.createElement(ConversationListItem, { key: itemKey },
@@ -93,7 +94,8 @@ var ConversationContent = function (_a) {
                             }
                             case ConversationMessageListItemType.Separator: {
                                 return (React.createElement(ConversationListItem, { key: itemKey, noPadding: true },
-                                    React.createElement(Separator, null)));
+                                    React.createElement(SeparatorPadding, null,
+                                        React.createElement(Separator, null))));
                             }
                             case ConversationMessageListItemType.LinkList: {
                                 return (React.createElement(ConversationListItem, { key: itemKey },
@@ -147,7 +149,7 @@ var ConversationContent = function (_a) {
                                                 actionKey: i,
                                             };
                                         }), renderItem: function (item) {
-                                            return (React.createElement("li", { key: item.actionKey },
+                                            return (React.createElement(FeedbackItem, { key: item.actionKey },
                                                 React.createElement(FeedbackButton, { className: "humany-feedback-button", disabled: false, "aria-pressed": true, "data-selected": true, "data-direction": 'vertical', onClick: function () {
                                                         dispatch('action', item.actionKey);
                                                     } },
@@ -158,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 })));
                             }
                         }
                     } }))))));
@@ -175,34 +177,36 @@ var StyledForm = styled(FormComponent)(templateObject_1 || (templateObject_1 = _
 var StyledHtml = styled(Html)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    white-space: pre-wrap;\n    a {\n        color: ", ";\n        &:focus {\n            ", ";\n        }\n    }\n"], ["\n    white-space: pre-wrap;\n    a {\n        color: ", ";\n        &:focus {\n            ", ";\n        }\n    }\n"])), function (p) { return p.theme.colors.link; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; });
 var StyledActionList = styled(List)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0;\n    list-style: none;\n    margin: 0 -", ";\n    > li {\n        margin: ", ";\n    }\n"], ["\n    padding: 0;\n    list-style: none;\n    margin: 0 -", ";\n    > li {\n        margin: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
 var StyledButtonList = styled(List)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0;\n    list-style: none;\n    > li {\n        margin: ", " ", ";\n        margin-left: 0;\n        display: inline-block;\n    }\n"], ["\n    padding: 0;\n    list-style: none;\n    > li {\n        margin: ", " ", ";\n        margin-left: 0;\n        display: inline-block;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
-var StyledButtonListButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", ";\n    display: block;\n    background-color: ", ";\n    width: 100%;\n    color: #fff;\n    &:focus {\n        ", "\n    }\n"], ["\n    ", ";\n    display: block;\n    background-color: ", ";\n    width: 100%;\n    color: #fff;\n    &:focus {\n        ", "\n    }\n"])), buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
+var StyledButtonListButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", ";\n    display: block;\n    text-align: left;\n    background-color: ", ";\n    width: 100%;\n    color: #fff;\n    &:focus {\n        ", "\n    }\n"], ["\n    ", ";\n    display: block;\n    text-align: left;\n    background-color: ", ";\n    width: 100%;\n    color: #fff;\n    &:focus {\n        ", "\n    }\n"])), buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
     var _a;
     return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                ", "\n                background-color: transparent;\n            "], ["\n                ", "\n                background-color: transparent;\n            "])), borderTabStyle);
 });
 var StyledLinkList = styled(List)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    padding: 0;\n    list-style: none;\n    > li {\n        margin-bottom: ", ";\n\n        &:last-child {\n            margin-bottom: 0;\n        }\n    }\n"], ["\n    padding: 0;\n    list-style: none;\n    > li {\n        margin-bottom: ", ";\n\n        &:last-child {\n            margin-bottom: 0;\n        }\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
-var StyledLinkButton = styled.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) {
+var HeaderText = styled.strong(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n"], ["\n    font-size: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; });
+var StyledLinkButton = styled.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: block;\n    background-color: transparent;\n    text-align: left;\n    border: none;\n    padding: 0;\n    font-weight: 300;\n    font-family: inherit;\n    cursor: pointer;\n    color: ", ";\n\n    ", "\n"], ["\n    display: block;\n    background-color: transparent;\n    text-align: left;\n    border: none;\n    padding: 0;\n    font-weight: 300;\n    font-family: inherit;\n    cursor: pointer;\n    color: ", ";\n\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
     var _a, _b;
-    return p.help && 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);
+    return p.help && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n            color: ", ";\n            text-decoration: underline;\n\n            i,\n            svg {\n                margin-left: ", ";\n            }\n        "], ["\n            color: ", ";\n            text-decoration: underline;\n\n            i,\n            svg {\n                margin-left: ", ";\n            }\n        "])), (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text, (_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small);
 });
-var StyledActionButton = styled.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"])), buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
+var StyledActionButton = styled.button(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", ";\n    display: block;\n    background-color: ", ";\n    width: 100%;\n    color: #fff;\n    font-family: Lato;\n    font-size: ", ";\n    font-weight: 300;\n    &:focus {\n        ", "\n    }\n"], ["\n    ", ";\n    display: block;\n    background-color: ", ";\n    width: 100%;\n    color: #fff;\n    font-family: Lato;\n    font-size: ", ";\n    font-weight: 300;\n    &:focus {\n        ", "\n    }\n"])), buttonCss, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; }, function (p) {
     var _a;
-    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                ", "\n                background-color: transparent;\n            "], ["\n                ", "\n                background-color: transparent;\n            "])), borderTabStyle);
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                ", "\n                background-color: transparent;\n            "], ["\n                ", "\n                background-color: transparent;\n            "])), borderTabStyle);
 });
-var Separator = styled.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"])));
-var NoGoodAlternativeWrapper = styled.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; });
-var ConversationListItem = styled.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); });
-var FeedbackButton = styled.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) {
+var SeparatorPadding = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    padding-top: calc(", " - ", ");\n    padding-bottom: calc(", " - ", ");\n"], ["\n    padding-top: calc(", " - ", ");\n    padding-bottom: calc(", " - ", ");\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+var Separator = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    background-color: #efefef;\n    height: 1px;\n    width: 100%;\n"], ["\n    background-color: #efefef;\n    height: 1px;\n    width: 100%;\n"])));
+var NoGoodAlternativeWrapper = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n\n    > i,\n    svg {\n        margin-right: ", ";\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n\n    > i,\n    svg {\n        margin-right: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var ConversationListItem = styled.li(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n"], ["\n    padding-left: ", ";\n    padding-right: ", ";\n"])), function (p) { var _a; return (p.noPadding ? 0 : (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium); }, function (p) { var _a; return (p.noPadding ? 0 : (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium); });
+var FeedbackItem = styled.li(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    @media (min-width: 768px) {\n        display: list-item !important;\n        margin-right: 0 !important;\n        margin-top: ", " !important;\n    }\n"], ["\n    @media (min-width: 768px) {\n        display: list-item !important;\n        margin-right: 0 !important;\n        margin-top: ", " !important;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+var FeedbackButton = styled.button(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    @media (min-width: 768px) {\n        min-width: 100%;\n        margin-right: 0;\n    }\n    display: inline-block;\n    font-size: ", ";\n    border-color: ", " !important;\n    font-weight: 300;\n    && {\n        margin-right: ", ";\n    }\n    ", "\n    ", "\n  ", "\n    i {\n        margin: 0 ", " 0 0;\n    }\n    span {\n    }\n"], ["\n    @media (min-width: 768px) {\n        min-width: 100%;\n        margin-right: 0;\n    }\n    display: inline-block;\n    font-size: ", ";\n    border-color: ", " !important;\n    font-weight: 300;\n    && {\n        margin-right: ", ";\n    }\n    ", "\n    ", "\n  ", "\n    i {\n        margin: 0 ", " 0 0;\n    }\n    span {\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) {
     var _a, _b;
-    return p['data-direction'] === 'horizontal' && 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);
+    return p['data-direction'] === 'horizontal' && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n            width: 225px;\n            max-width: calc(50% - ", " - ", ");\n        "], ["\n            width: 225px;\n            max-width: calc(50% - ", " - ", ");\n        "])), (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large, (_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small);
 }, function (p) {
-    return p['data-direction'] === 'vertical' && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n            min-width: 150px;\n        "], ["\n            min-width: 150px;\n        "])));
+    return p['data-direction'] === 'vertical' && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n            min-width: 150px;\n        "], ["\n            min-width: 150px;\n        "])));
 }, function (p) {
     var _a;
     return invertedHoverButton({
-        active: p['data-selected'],
-        primaryColor: (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+        primaryColor: "".concat((_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary),
         secondaryColor: '#FFFFFF',
     });
-}, 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; });
+}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
 export default ConversationContent;
-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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;

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

@@ -78,6 +78,10 @@ var ConversationInput = function (_a) {
             e.preventDefault();
         }
     };
+    var getCategories = function (e) {
+        e.preventDefault();
+        dispatch('action', 'burger-clicked');
+    };
     var calculateHeight = function (value) {
         if (multiline && inputRef.current) {
             var scrollHeight = inputRef.current.scrollHeight;
@@ -108,6 +112,8 @@ 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' } })),
         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 }))));

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

@@ -10,7 +10,7 @@ export var Loader = styled.div(templateObject_3 || (templateObject_3 = __makeTem
 export var ContentBundle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    grid-area: content;\n    max-width: 100%;\n    overflow: hidden;\n"], ["\n    grid-area: content;\n    max-width: 100%;\n    overflow: hidden;\n"])));
 export var MessageTitle = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: normal;\n    margin: 0;\n"], ["\n    font-size: ", ";\n    font-weight: normal;\n    margin: 0;\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
 export var MessageContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n"], ["\n    display: flex;\n"])));
-export var MessageContent = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    border-radius: 5px; // TODO: prop?\n    margin-top: ", ";\n    display: inline-block;\n    && > * {\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        word-break: break-word;\n        hyphens: auto;\n    }\n    max-width: 100%;\n    ", "\n\n    ", "\n  ", ";\n\n    ", "\n    ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\n    ", ";\n\n    transition: border-radius 500ms linear;\n"], ["\n    background-color: ", ";\n    color: ", ";\n    border-radius: 5px; // TODO: prop?\n    margin-top: ", ";\n    display: inline-block;\n    && > * {\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        word-break: break-word;\n        hyphens: auto;\n    }\n    max-width: 100%;\n    ", "\n\n    ", "\n  ", ";\n\n    ", "\n    ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\n    ", ";\n\n    transition: border-radius 500ms linear;\n"])), function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.accent); }, function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text); }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.fullWidth && 'width: 100%;'; }, function (p) {
+export var MessageContent = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    border-radius: 5px; // TODO: prop?\n    border: 1px solid rgb(231, 231, 231);\n    padding-top: calc(", " - ", ");\n    padding-bottom: calc(", " - ", ");\n    margin-top: ", ";\n    display: inline-block;\n    && > * {\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        word-break: break-word;\n        hyphens: auto;\n    }\n    max-width: 100%;\n    ", "\n\n    ", "\n  ", ";\n\n    ", "\n    ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\n    ", ";\n\n    transition: border-radius 500ms linear;\n"], ["\n    background-color: ", ";\n    color: ", ";\n    border-radius: 5px; // TODO: prop?\n    border: 1px solid rgb(231, 231, 231);\n    padding-top: calc(", " - ", ");\n    padding-bottom: calc(", " - ", ");\n    margin-top: ", ";\n    display: inline-block;\n    && > * {\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        word-break: break-word;\n        hyphens: auto;\n    }\n    max-width: 100%;\n    ", "\n\n    ", "\n  ", ";\n\n    ", "\n    ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\n    ", ";\n\n    transition: border-radius 500ms linear;\n"])), function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.accent); }, function (p) { var _a, _b; return (p.user ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text); }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.fullWidth && 'width: 100%;'; }, function (p) {
     return !p.user && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n            border: ", ";\n        "], ["\n            border: ", ";\n        "])), p.theme.border);
 }, function (p) { return p.user && 'margin-left: auto'; }, function (p) {
     return p.stacked === 'first' &&
@@ -33,7 +33,7 @@ export var MessageContent = styled.div(templateObject_15 || (templateObject_15 =
 }, function (p) {
     return !p.stacked && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n            ", "\n        "], ["\n            ", "\n        "])), p.user ? 'border-bottom-right-radius: 1px;' : 'border-bottom-left-radius: 1px;');
 });
-export var MessageContentPart = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    padding: ", ";\n\n    ", "\n\n    margin-bottom: ", ";\n    &:last-child {\n        margin-bottom: 0;\n    }\n"], ["\n    padding: ", ";\n\n    ", "\n\n    margin-bottom: ", ";\n    &:last-child {\n        margin-bottom: 0;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) {
+export var MessageContentPart = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    padding: ", " ", ";\n\n    ", "\n\n    margin-bottom: ", ";\n    &:last-child {\n        margin-bottom: 0;\n    }\n"], ["\n    padding: ", " ", ";\n\n    ", "\n\n    margin-bottom: ", ";\n    &:last-child {\n        margin-bottom: 0;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) {
     return p.noPadding && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n            padding: 0;\n        "], ["\n            padding: 0;\n        "])));
 }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
 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;

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

@@ -105,7 +105,7 @@ var Conversation = function (_a) {
         React.createElement(ConversationInput, null)));
 };
 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"])));
-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.medium; }, 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; });
+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; });
 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        "])))));
 export default Conversation;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib-esm/ui/conversation/message-types/agent.js

@@ -17,7 +17,7 @@ var AgentMessage = function (_a) {
         children,
         React.createElement(Timestamp, { name: name, timestamp: timestamp })));
 };
-export var StyledAgentMessage = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: grid;\n    margin-right: 0;\n    width: 100%;\n    ", ";\n"], ["\n    display: grid;\n    margin-right: 0;\n    width: 100%;\n    ", ";\n"])), function (p) {
+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) {
     return p.hasAvatar
         ? 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              "])));
 });

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/lib-esm/ui/conversation/message-types/timestamp.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import React from 'react';
 import styled from 'styled-components';
-var StyledTimestamp = styled.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    && {\n        font-size: ", ";\n        font-weight: 300;\n    }\n    margin: 0;\n    line-height: 1.5em;\n    grid-area: info;\n    color: ", ";\n"], ["\n    && {\n        font-size: ", ";\n        font-weight: 300;\n    }\n    margin: 0;\n    line-height: 1.5em;\n    grid-area: info;\n    color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+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; });
 var getTimestamp = function (raw) {
     return new Date(raw).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 };

package/lib-esm/ui/conversation/message-types/user.js

@@ -14,6 +14,6 @@ var UserMessage = function (_a) {
         children,
         React.createElement(Timestamp, { name: userLabel, timestamp: timestamp })));
 };
-var StyledUserMessage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-left: 15%;\n    width: 85%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n"], ["\n    margin-left: 15%;\n    width: 85%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n"])));
+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"])));
 export default UserMessage;
 var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telia-ace/widget-conversation",
-    "version": "1.0.6",
+    "version": "1.0.9",
     "description": "ACE Widget Conversation Platform",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
@@ -41,5 +41,5 @@
     "devDependencies": {
         "@types/react": "^16.8.0"
     },
-    "gitHead": "34cb85e421c0c4a5bd08ccd899291683a11b3cf9"
+    "gitHead": "6a88a071c40e8196738a6a6a318d75233be83495"
 }