@telia-ace/widget-conversation 1.0.3 → 1.0.7

package/lib/agent.d.ts

@@ -1,7 +1,7 @@
 import { Symbol } from '@telia-ace/widget-ui';
 import { ConversationEntry } from './conversation-controller';
 import { ConversationProvider } from './conversation-provider';
-import { ConversationMessageSettings } from './types';
+import { ConversationMessageSettings, ConverstationMessageItem } from './types';
 export declare type AgentSettings = {
     name?: string;
     avatar?: string | Symbol;
@@ -11,7 +11,7 @@ export declare class Agent {
     name?: string;
     avatar?: string | Symbol;
     constructor(provider: ConversationProvider, settings: AgentSettings);
-    print: (settings: string | ConversationMessageSettings) => ConversationEntry | undefined;
+    print: (settings: string | ConversationMessageSettings | ConverstationMessageItem<any> | ConverstationMessageItem<any>[]) => ConversationEntry | undefined;
     typing: () => (() => void) | undefined;
     update(settings: AgentSettings): void;
 }

package/lib/conversation-controller.d.ts

@@ -1,6 +1,6 @@
 import { Container, EventListener, EventManager } from '@webprovisions/platform';
 import { ConversationProvider } from './conversation-provider';
-import { ConversationMessageContent, ConversationMessageSender, ConversationMessageSettings, ConversationMessageUpdateSettings, NormalizedMessageSettings } from './types';
+import { ConversationMessageContent, ConversationMessageSender, ConversationMessageSettings, ConversationMessageUpdateSettings, ConverstationMessageItem, NormalizedMessageSettings } from './types';
 import { User } from './user';
 export declare type ValidateHandler = (formValues: {
     [key: string]: any;
@@ -20,8 +20,9 @@ export declare type CancelLoaderDelegate = () => void;
 export declare class ConversationEntry {
     private writer;
     constructor(writer: EntryWriter);
-    update(content: string | ConversationMessageUpdateSettings): void;
+    update(content: string | ConversationMessageUpdateSettings | ConverstationMessageItem<any> | ConverstationMessageItem<any>[]): void;
     remove(): void;
+    private getNormalizedSettings;
 }
 export declare enum ConversationMessageType {
     User = "user",
@@ -36,7 +37,7 @@ export declare type ConversationMessage = {
     type: ConversationMessageType;
 };
 export declare type EntryWriter = (content: ConversationMessageUpdateSettings | null) => void;
-export declare const getNormalizedMessageSettings: (settings: string | ConversationMessageSettings) => NormalizedMessageSettings;
+export declare const getNormalizedMessageSettings: (settings: string | ConversationMessageSettings | ConverstationMessageItem<any> | ConverstationMessageItem<any>[]) => NormalizedMessageSettings;
 /**
  * Manages the stream of messages inside a `ConversationComponent` and provides external read-write
  * access to it as well as exposing emitted actions.

package/lib/conversation-controller.js

@@ -32,12 +32,21 @@ var ConversationEntry = /** @class */ (function () {
         this.writer = writer;
     }
     ConversationEntry.prototype.update = function (content) {
-        var normalized = typeof content === 'string' ? { body: content } : content;
+        var normalized = this.getNormalizedSettings(content);
+        // const normalized = typeof content === 'string' ? { body: content } : content;
         this.writer(normalized);
     };
     ConversationEntry.prototype.remove = function () {
         this.writer(null);
     };
+    ConversationEntry.prototype.getNormalizedSettings = function (content) {
+        if (typeof content === 'string')
+            return { body: content };
+        else if (content.length > -1 && typeof content === 'object')
+            return { items: content };
+        else
+            return content;
+    };
     return ConversationEntry;
 }());
 exports.ConversationEntry = ConversationEntry;
@@ -51,32 +60,43 @@ var getNormalizedMessageSettings = function (settings) {
     var content;
     var key = (0, widget_utilities_1.uuid)();
     var timestamp = Date.now();
-    if (typeof settings === 'string') {
-        content = { body: settings };
+    if (Array.isArray(settings) && settings.length > -1) {
+        if (typeof settings[0] === 'string') {
+            content = { items: [settings] };
+        }
+        else {
+            content = { items: settings };
+        }
     }
-    else if (settings.type) {
-        content = __assign({}, settings);
+    else if (typeof settings === 'string') {
+        content = { body: settings };
     }
     else {
-        content = {
-            body: settings.body,
-            actions: settings.actions,
-            title: settings.title,
-        };
-        if (settings.key) {
-            key = settings.key;
+        settings = settings || {};
+        if (settings.type) {
+            content = __assign({}, settings);
         }
-        if (settings.timestamp) {
-            timestamp = settings.timestamp;
-        }
-        if (settings.form) {
-            var builder = widget_forms_1.FormBuilder.create(key);
-            settings.form(builder);
-            var builtForm = builder.get();
-            content.form = builtForm;
-        }
-        if (settings.timestamp === null) {
-            timestamp = null;
+        else {
+            content = {
+                body: settings.body,
+                actions: settings.actions,
+                title: settings.title,
+            };
+            if (settings.key) {
+                key = settings.key;
+            }
+            if (settings.timestamp) {
+                timestamp = settings.timestamp;
+            }
+            if (settings.form) {
+                var builder = widget_forms_1.FormBuilder.create(key);
+                settings.form(builder);
+                var builtForm = builder.get();
+                content.form = builtForm;
+            }
+            if (settings.timestamp === null) {
+                timestamp = null;
+            }
         }
     }
     return { content: content, key: key, timestamp: timestamp };

package/lib/index.d.ts

@@ -1,7 +1,8 @@
 import { ConversationEndedBehavior, ConversationPlatform, UnregisterControllerDelegate } from './conversation-platform';
 export { ConversationController, ConversationEntry, ConversationMessageType, } from './conversation-controller';
 export type { ConversationMessage } from './conversation-controller';
-export type { ConversationMessageContent, ConversationMessageSender } from './types';
+export { ConversationMessageListItemType } from './types';
+export type { ConversationMessageContent, ConversationMessageSender, ConverstationMessageItem, } from './types';
 export { ConversationComponent, ConversationReturnButtonComponent } from './ui';
 export { registerCustomMessageComponent } from './utils/custom-message';
 export { ConversationPlatform, ConversationEndedBehavior };

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConversationEndedBehavior = exports.ConversationPlatform = exports.registerCustomMessageComponent = exports.ConversationReturnButtonComponent = exports.ConversationComponent = exports.ConversationMessageType = exports.ConversationEntry = exports.ConversationController = void 0;
+exports.ConversationEndedBehavior = exports.ConversationPlatform = exports.registerCustomMessageComponent = exports.ConversationReturnButtonComponent = exports.ConversationComponent = exports.ConversationMessageListItemType = exports.ConversationMessageType = exports.ConversationEntry = exports.ConversationController = void 0;
 var conversation_platform_1 = require("./conversation-platform");
 Object.defineProperty(exports, "ConversationEndedBehavior", { enumerable: true, get: function () { return conversation_platform_1.ConversationEndedBehavior; } });
 Object.defineProperty(exports, "ConversationPlatform", { enumerable: true, get: function () { return conversation_platform_1.ConversationPlatform; } });
@@ -8,6 +8,8 @@ var conversation_controller_1 = require("./conversation-controller");
 Object.defineProperty(exports, "ConversationController", { enumerable: true, get: function () { return conversation_controller_1.ConversationController; } });
 Object.defineProperty(exports, "ConversationEntry", { enumerable: true, get: function () { return conversation_controller_1.ConversationEntry; } });
 Object.defineProperty(exports, "ConversationMessageType", { enumerable: true, get: function () { return conversation_controller_1.ConversationMessageType; } });
+var types_1 = require("./types");
+Object.defineProperty(exports, "ConversationMessageListItemType", { enumerable: true, get: function () { return types_1.ConversationMessageListItemType; } });
 var ui_1 = require("./ui");
 Object.defineProperty(exports, "ConversationComponent", { enumerable: true, get: function () { return ui_1.ConversationComponent; } });
 Object.defineProperty(exports, "ConversationReturnButtonComponent", { enumerable: true, get: function () { return ui_1.ConversationReturnButtonComponent; } });

package/lib/types.d.ts

@@ -10,6 +10,7 @@ export declare type ConversationMessageSettings = {
     };
     form?: (builder: FormBuilder) => void;
     type?: string;
+    items?: ConversationMessageList[];
     [key: string]: any;
 };
 export declare type NormalizedMessageSettings = {
@@ -17,15 +18,34 @@ export declare type NormalizedMessageSettings = {
     key: string;
     timestamp: number | null;
 };
+export declare type ConversationMessageList = {
+    header?: string;
+    itemKey: string;
+    type?: ConversationMessageListType;
+    items: ConversationMessageListItem[];
+};
+export declare type ConversationMessageListItem = {
+    icon?: string;
+    type?: ConversationMessageListItemType;
+    actions?: {
+        [actionKey: string]: any;
+    };
+    form?: Form;
+    body?: string;
+    key: string;
+    [key: string]: any;
+};
 export declare type ConversationMessageContent = {
     title?: string;
     body?: string;
     actions?: {
         [actionKey: string]: any;
     };
+    items?: ConverstationMessageItem<any>[];
     form?: Form;
     [key: string]: any;
 };
+export declare type ConverstationMessageItem<T, R = ItemPayload> = R extends [T, any] ? R : never;
 export declare type ConversationMessageUpdateSettings = ConversationMessageContent & {
     timestamp?: number;
 };
@@ -33,3 +53,58 @@ export declare type ConversationMessageSender = {
     name?: string;
     avatar?: string | Symbol;
 };
+export declare enum ConversationMessageListType {
+    Ordinary = "ordinary",
+    Seperator = "seperator"
+}
+export declare enum ConversationMessageListItemType {
+    Header = "header",
+    LinkList = "link-list",
+    Separator = "separator",
+    NoGoodAlternative = "no-good-alternative",
+    ButtonList = "button-list",
+    Text = "text",
+    HTML = "html",
+    FeedbackList = "feedback-list"
+}
+declare type LinkListItem = [
+    ConversationMessageListItemType.LinkList,
+    {
+        actions: {
+            [key: string]: string;
+        };
+    }
+];
+declare type HeaderItem = [ConversationMessageListItemType.Header, string];
+declare type TextItem = [ConversationMessageListItemType.Text, string];
+declare type SeparatorItem = [ConversationMessageListItemType.Separator, undefined];
+declare type NoGoodAlternativeItem = [
+    ConversationMessageListItemType.NoGoodAlternative,
+    {
+        body: string;
+    }
+];
+declare type ButtonListItem = [
+    ConversationMessageListItemType.ButtonList,
+    {
+        actions: {
+            [key: string]: string;
+        };
+    }
+];
+declare type FeedbackListItem = [
+    ConversationMessageListItemType.FeedbackList,
+    {
+        actions: {
+            [key: string]: string;
+        };
+    }
+];
+declare type HTMLItem = [
+    ConversationMessageListItemType.HTML,
+    {
+        body: string;
+    }
+];
+declare type ItemPayload = LinkListItem | HeaderItem | TextItem | SeparatorItem | NoGoodAlternativeItem | ButtonListItem | HTMLItem | FeedbackListItem;
+export {};

package/lib/types.js

@@ -1,2 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConversationMessageListItemType = exports.ConversationMessageListType = void 0;
+var ConversationMessageListType;
+(function (ConversationMessageListType) {
+    ConversationMessageListType["Ordinary"] = "ordinary";
+    ConversationMessageListType["Seperator"] = "seperator";
+})(ConversationMessageListType = exports.ConversationMessageListType || (exports.ConversationMessageListType = {}));
+var ConversationMessageListItemType;
+(function (ConversationMessageListItemType) {
+    ConversationMessageListItemType["Header"] = "header";
+    ConversationMessageListItemType["LinkList"] = "link-list";
+    ConversationMessageListItemType["Separator"] = "separator";
+    ConversationMessageListItemType["NoGoodAlternative"] = "no-good-alternative";
+    ConversationMessageListItemType["ButtonList"] = "button-list";
+    ConversationMessageListItemType["Text"] = "text";
+    ConversationMessageListItemType["HTML"] = "html";
+    ConversationMessageListItemType["FeedbackList"] = "feedback-list";
+})(ConversationMessageListItemType = exports.ConversationMessageListItemType || (exports.ConversationMessageListItemType = {}));

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

@@ -37,14 +37,29 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var widget_forms_1 = require("@telia-ace/widget-forms");
 var widget_ui_1 = require("@telia-ace/widget-ui");
-var react_1 = __importDefault(require("react"));
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
 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 imageLightboxRenderer = function (attrs) { return react_1.default.createElement(widget_ui_1.Lightbox, { attrs: attrs }); };
@@ -56,10 +71,10 @@ var htmlParseInstructions = {
 var ConversationContent = function (_a) {
     var content = _a.content, isUser = _a.isUser, stacked = _a.stacked;
     var dispatch = (0, widget_ui_1.useDispatch)();
-    var title = content.title, body = content.body, actions = content.actions, form = content.form, type = content.type;
+    var title = content.title, body = content.body, actions = content.actions, form = content.form, type = content.type, items = content.items;
     if (type)
         return react_1.default.createElement(message_types_1.CustomMessage, { type: type, content: content, isUser: isUser, stacked: stacked });
-    return (react_1.default.createElement(conversation_styles_1.MessageContent, { user: isUser, stacked: !!stacked && stacked, fullWidth: !!form || !!actions },
+    return (react_1.default.createElement(conversation_styles_1.MessageContent, { noPadding: true, user: isUser, stacked: !!stacked && stacked, fullWidth: !!form || !!actions },
         title && (react_1.default.createElement(conversation_styles_1.MessageContentPart, null,
             react_1.default.createElement(conversation_styles_1.MessageTitle, { variant: "h2" }, title))),
         body && (react_1.default.createElement(conversation_styles_1.MessageContentPart, null,
@@ -80,7 +95,100 @@ var ConversationContent = function (_a) {
                         react_1.default.createElement(StyledActionButton, { onClick: function () {
                                 dispatch('action', item.actionKey);
                             } }, item.label)));
-                } })))));
+                } }))),
+        items && (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement(conversation_styles_1.MessageContentPart, { key: (0, widget_utilities_1.uuid)(), noPadding: true },
+                react_1.default.createElement(StyledActionList, { items: items.map(function (_a) {
+                        var _b = __read(_a, 2), type = _b[0], content = _b[1];
+                        return { type: type, content: content };
+                    }), renderItem: function (item) {
+                        var itemKey = (0, widget_utilities_1.uuid)();
+                        switch (item.type) {
+                            case types_1.ConversationMessageListItemType.Header: {
+                                return (react_1.default.createElement(ConversationListItem, { key: itemKey },
+                                    react_1.default.createElement(HeaderText, null, item.content)));
+                            }
+                            case types_1.ConversationMessageListItemType.Text: {
+                                return (react_1.default.createElement(ConversationListItem, { key: itemKey },
+                                    react_1.default.createElement("span", null, item.content)));
+                            }
+                            case types_1.ConversationMessageListItemType.HTML: {
+                                return (react_1.default.createElement(ConversationListItem, { key: itemKey },
+                                    react_1.default.createElement(StyledHtml, { html: item.content.body, htmlParseInstruction: htmlParseInstructions })));
+                            }
+                            case types_1.ConversationMessageListItemType.Separator: {
+                                return (react_1.default.createElement(ConversationListItem, { key: itemKey, noPadding: true },
+                                    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 },
+                                    react_1.default.createElement(StyledLinkList, { items: Object.keys(item.content.actions).map(function (i) {
+                                            return {
+                                                label: item.content.actions[i],
+                                                actionKey: i,
+                                            };
+                                        }), renderItem: function (item) {
+                                            return (react_1.default.createElement("li", { key: item.actionKey },
+                                                react_1.default.createElement(StyledLinkButton, { help: item.actionKey === 'help', onClick: function () {
+                                                        dispatch('action', item.actionKey);
+                                                    } },
+                                                    item.label,
+                                                    item.actionKey === 'help' && (react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 14, symbol: {
+                                                            type: 'Svg',
+                                                            content: 'caret-down',
+                                                        } })))));
+                                        } })));
+                            }
+                            case types_1.ConversationMessageListItemType.ButtonList: {
+                                return (react_1.default.createElement(ConversationListItem, { key: itemKey },
+                                    react_1.default.createElement(StyledButtonList, { items: Object.keys(item.content.actions).map(function (i) {
+                                            return {
+                                                label: item.content.actions[i],
+                                                actionKey: i,
+                                            };
+                                        }), renderItem: function (item) {
+                                            return (react_1.default.createElement("li", { key: item.actionKey },
+                                                react_1.default.createElement(StyledButtonListButton, { onClick: function () {
+                                                        dispatch('action', item.actionKey);
+                                                    } }, item.label)));
+                                        } })));
+                            }
+                            case types_1.ConversationMessageListItemType.NoGoodAlternative: {
+                                return (react_1.default.createElement(ConversationListItem, { key: itemKey },
+                                    react_1.default.createElement(NoGoodAlternativeWrapper, { onClick: function () {
+                                            dispatch('action', 'help');
+                                        } },
+                                        react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 14, symbol: {
+                                                type: 'FontAwesome',
+                                                content: 'meh-o',
+                                            } }),
+                                        react_1.default.createElement("span", null, item.content.body))));
+                            }
+                            case types_1.ConversationMessageListItemType.FeedbackList: {
+                                return (react_1.default.createElement(ConversationListItem, { key: itemKey },
+                                    react_1.default.createElement(StyledButtonList, { items: Object.keys(item.content.actions).map(function (i) {
+                                            return {
+                                                label: item.content.actions[i],
+                                                actionKey: i,
+                                            };
+                                        }), renderItem: function (item) {
+                                            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);
+                                                    } },
+                                                    react_1.default.createElement(widget_ui_1.Icon, { faIcon: item.actionKey == 'yes'
+                                                            ? 'smile-o'
+                                                            : 'frown-o' }),
+                                                    react_1.default.createElement("span", null, item.label))));
+                                        } })));
+                            }
+                            default: {
+                                return (react_1.default.createElement(react_1.Fragment, null,
+                                    react_1.default.createElement("p", null, "Unknown message type")));
+                            }
+                        }
+                    } }))))));
 };
 var StyledForm = (0, styled_components_1.default)(widget_forms_1.FormComponent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    & button.humany-form-component-button {\n        ", ";\n        display: block;\n        width: 100%;\n        margin-bottom: ", ";\n    }\n    & button.humany-form-component-submit {\n        width: 100%;\n        margin: 0;\n        :not(:last-child) {\n            margin-bottom: ", ";\n        }\n    }\n"], ["\n    & button.humany-form-component-button {\n        ", ";\n        display: block;\n        width: 100%;\n        margin-bottom: ", ";\n    }\n    & button.humany-form-component-submit {\n        width: 100%;\n        margin: 0;\n        :not(:last-child) {\n            margin-bottom: ", ";\n        }\n    }\n"])), function (p) {
     var _a, _b;
@@ -92,9 +200,37 @@ var StyledForm = (0, styled_components_1.default)(widget_forms_1.FormComponent)(
 }, 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 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 StyledActionButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __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 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 _a;
-    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __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_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 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_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_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_11 || (templateObject_11 = __makeTemplateObject(["\n                ", "\n                background-color: transparent;\n            "], ["\n                ", "\n                background-color: transparent;\n            "])), widget_ui_1.borderTabStyle);
+});
+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_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_19 || (templateObject_19 = __makeTemplateObject(["\n            min-width: 150px;\n        "], ["\n            min-width: 150px;\n        "])));
+}, function (p) {
+    var _a;
+    return (0, widget_ui_1.invertedHoverButton)({
+        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; });
 exports.default = ConversationContent;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+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.d.ts

@@ -6,4 +6,6 @@ export declare const ContentBundle: import("styled-components").StyledComponent<
 export declare const MessageTitle: import("styled-components").StyledComponent<import("react").FC<import("@telia-ace/widget-ui").TypographyProps>, any, {}, never>;
 export declare const MessageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MessageContent: import("styled-components").StyledComponent<"div", any, any, never>;
-export declare const MessageContentPart: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MessageContentPart: import("styled-components").StyledComponent<"div", any, {
+    noPadding?: boolean | undefined;
+}, never>;

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

@@ -30,13 +30,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageContentPart = exports.MessageContent = exports.MessageContainer = exports.MessageTitle = exports.ContentBundle = exports.Loader = exports.LoaderAnimation = exports.Avatar = void 0;
 var widget_ui_1 = require("@telia-ace/widget-ui");
 var styled_components_1 = __importStar(require("styled-components"));
-exports.Avatar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    border: ", ";\n    grid-area: avatar;\n    align-self: flex-end;\n    justify-self: center;\n    overflow: hidden;\n    margin-right: 10px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: ", ";\n\n    > img {\n        height: 100%;\n        width: 100%;\n        object-fit: cover;\n    }\n\n    > svg {\n        width: 90%;\n        height: 90%;\n        padding: 10%;\n        color: ", ";\n\n        line,\n        path,\n        circle,\n        fill {\n            stroke: ", ";\n        }\n    }\n"], ["\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    border: ", ";\n    grid-area: avatar;\n    align-self: flex-end;\n    justify-self: center;\n    overflow: hidden;\n    margin-right: 10px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: ", ";\n\n    > img {\n        height: 100%;\n        width: 100%;\n        object-fit: cover;\n    }\n\n    > svg {\n        width: 90%;\n        height: 90%;\n        padding: 10%;\n        color: ", ";\n\n        line,\n        path,\n        circle,\n        fill {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { return p.avatarSize || '32px'; }, function (p) { return p.avatarSize || '32px'; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent; }, function (p) { return p.theme.border; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+exports.Avatar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    border: ", ";\n    grid-area: avatar;\n    align-self: flex-end;\n    justify-self: center;\n    overflow: hidden;\n    margin-right: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: ", ";\n\n    > img {\n        height: 100%;\n        width: 100%;\n        object-fit: cover;\n    }\n\n    > svg {\n        width: 90%;\n        height: 90%;\n        padding: 10%;\n        color: ", ";\n\n        line,\n        path,\n        circle,\n        fill {\n            stroke: ", ";\n        }\n    }\n"], ["\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    border: ", ";\n    grid-area: avatar;\n    align-self: flex-end;\n    justify-self: center;\n    overflow: hidden;\n    margin-right: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: ", ";\n\n    > img {\n        height: 100%;\n        width: 100%;\n        object-fit: cover;\n    }\n\n    > svg {\n        width: 90%;\n        height: 90%;\n        padding: 10%;\n        color: ", ";\n\n        line,\n        path,\n        circle,\n        fill {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { return p.avatarSize || '32px'; }, function (p) { return p.avatarSize || '32px'; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent; }, function (p) { return p.theme.border; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
 exports.LoaderAnimation = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n  }\n  75% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n"], ["\n  0% {\n    opacity: 0;\n  }\n  75% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n"])));
 exports.Loader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    > div {\n        height: 10px;\n        width: 10px;\n        border-radius: 50%;\n        margin: 5px;\n        background-color: ", ";\n        animation: ", " 1s infinite;\n    }\n    > div:nth-child(2) {\n        animation-delay: 100ms;\n    }\n    > div:nth-child(3) {\n        animation-delay: 200ms;\n    }\n"], ["\n    display: flex;\n    justify-content: center;\n    > div {\n        height: 10px;\n        width: 10px;\n        border-radius: 50%;\n        margin: 5px;\n        background-color: ", ";\n        animation: ", " 1s infinite;\n    }\n    > div:nth-child(2) {\n        animation-delay: 100ms;\n    }\n    > div:nth-child(3) {\n        animation-delay: 200ms;\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, exports.LoaderAnimation);
-exports.ContentBundle = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    grid-area: content;\n    max-width: 100%;\n    overflow: auto;\n"], ["\n    grid-area: content;\n    max-width: 100%;\n    overflow: auto;\n"])));
+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    padding: ", ";\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    padding: ", ";\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; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, 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,5 +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_16 || (templateObject_16 = __makeTemplateObject(["\n    margin-bottom: ", ";\n    &:last-child {\n        margin-bottom: 0;\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; });
-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;
+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              "])));
 });