@telia-ace/widget-conversation 1.0.10 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/ui/conversation/conversation-component.d.ts +5 -0
  2. package/lib/ui/conversation/conversation-input.js +9 -6
  3. package/lib-esm/ui/conversation/conversation-component.d.ts +5 -0
  4. package/lib-esm/ui/conversation/conversation-input.js +9 -6
  5. package/package.json +4 -4
package/lib/ui/conversation/conversation-component.d.ts CHANGED
@@ -27,6 +27,11 @@ export declare type ConversationComponentProperties = {
27
27
  avatarSize: string;
28
28
  typingActors: any[];
29
29
  sendButtonLabel: string;
30
+ secondaryAction?: {
31
+ icon?: string;
32
+ action: string;
33
+ label: string;
34
+ };
30
35
  };
31
36
  declare const ConversationComponent: (container: Container) => Promise<void>;
32
37
  export default ConversationComponent;
package/lib/ui/conversation/conversation-input.js CHANGED
@@ -76,7 +76,7 @@ var ConversationInput = function (_a) {
76
76
  var _d = __read((0, react_1.useState)(0), 2), calculatedLineHeight = _d[0], setCalculatedLineHeight = _d[1];
77
77
  var _e = __read((0, react_1.useState)(0), 2), textareaMaxHeight = _e[0], setTextareaMaxHeight = _e[1];
78
78
  var dispatch = (0, widget_ui_1.useDispatch)();
79
- var _f = (0, widget_ui_1.useProperties)(), _g = _f.inputPlaceholder, inputPlaceholder = _g === void 0 ? 'Type your message' : _g, _h = _f.inputHidden, inputHidden = _h === void 0 ? false : _h, _j = _f.inputDisabled, inputDisabled = _j === void 0 ? false : _j, _k = _f.sendButtonLabel, sendButtonLabel = _k === void 0 ? 'Send message' : _k, _l = _f.inputMultiline, multiline = _l === void 0 ? true : _l;
79
+ var _f = (0, widget_ui_1.useProperties)(), _g = _f.inputPlaceholder, inputPlaceholder = _g === void 0 ? 'Type your message' : _g, _h = _f.inputHidden, inputHidden = _h === void 0 ? false : _h, _j = _f.inputDisabled, inputDisabled = _j === void 0 ? false : _j, _k = _f.sendButtonLabel, sendButtonLabel = _k === void 0 ? 'Send message' : _k, _l = _f.inputMultiline, multiline = _l === void 0 ? true : _l, secondaryAction = _f.secondaryAction;
80
80
  var _m = __read((0, widget_ui_1.useScroll)(true), 2), scrollableCss = _m[0], inputRef = _m[1];
81
81
  (0, react_1.useEffect)(function () {
82
82
  if (inputRef.current) {
@@ -103,9 +103,12 @@ var ConversationInput = function (_a) {
103
103
  e.preventDefault();
104
104
  }
105
105
  };
106
- var getCategories = function (e) {
106
+ var onSecondaryActionButtonClick = function (e) {
107
+ if (!secondaryAction) {
108
+ return;
109
+ }
107
110
  e.preventDefault();
108
- dispatch('action', 'burger-clicked');
111
+ dispatch('action', secondaryAction.action);
109
112
  };
110
113
  var calculateHeight = function (value) {
111
114
  if (multiline && inputRef.current) {
@@ -137,15 +140,15 @@ var ConversationInput = function (_a) {
137
140
  return null;
138
141
  }
139
142
  return (react_1.default.createElement(Wrapper, { grow: multiline, className: (0, widget_utilities_1.appendClassNames)('humany-conversation-input', className), "data-has-focus": inputFocus, scrollableCss: scrollableCss },
140
- react_1.default.createElement(StyledButton, { disabled: inputDisabled, onClick: getCategories, title: sendButtonLabel, "aria-label": sendButtonLabel },
141
- react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 22, symbol: { type: 'Svg', content: 'options' } })),
143
+ secondaryAction && (react_1.default.createElement(StyledButton, { disabled: inputDisabled, onClick: onSecondaryActionButtonClick, title: secondaryAction.label, "aria-label": secondaryAction.label },
144
+ react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 22, symbol: { type: 'Svg', content: secondaryAction.icon || 'browse' } }))),
142
145
  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 })),
143
146
  react_1.default.createElement(StyledButton, { disabled: inputDisabled, onClick: submit, title: sendButtonLabel, "aria-label": sendButtonLabel },
144
147
  react_1.default.createElement(SendSymbol, { size: 22, symbol: { type: 'Svg', content: 'send' }, hasContent: inputText && inputText.length }))));
145
148
  };
146
149
  var StyledTextArea = (0, styled_components_1.default)(widget_ui_1.Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n resize: none;\n flex: 1;\n flex-shrink: 1;\n min-height: 1.2em;\n max-height: 148px;\n line-height: 1.2em;\n height: 1.2em;\n padding: 0;\n margin: ", " ", ";\n font-size: ", ";\n border: none;\n transition: height 200ms linear;\n outline: none;\n"], ["\n resize: none;\n flex: 1;\n flex-shrink: 1;\n min-height: 1.2em;\n max-height: 148px;\n line-height: 1.2em;\n height: 1.2em;\n padding: 0;\n margin: ", " ", ";\n font-size: ", ";\n border: none;\n transition: height 200ms linear;\n outline: none;\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
147
150
  var StyledInput = (0, styled_components_1.default)(widget_ui_1.Input)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background-color: transparent;\n font-weight: 300;\n font-size: ", ";\n line-height: 1.2em;\n outline: none;\n padding-left: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n font-style: italic;\n }\n"], ["\n flex: 1;\n border: none;\n background-color: transparent;\n font-weight: 300;\n font-size: ", ";\n line-height: 1.2em;\n outline: none;\n padding-left: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n font-style: italic;\n }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.textLight; });
148
- var StyledButton = (0, styled_components_1.default)(widget_ui_1.Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n &:focus {\n ", ";\n }\n"], ["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && widget_ui_1.borderTabStyle; });
151
+ var StyledButton = (0, styled_components_1.default)(widget_ui_1.Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n color: #a6a6a6;\n &:focus {\n ", ";\n }\n"], ["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n color: #a6a6a6;\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && widget_ui_1.borderTabStyle; });
149
152
  var Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background-color: ", ";\n border-top: ", ";\n ", "\n ", " {\n ", "\n }\n"], ["\n ", "\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background-color: ", ";\n border-top: ", ";\n ", "\n ", " {\n ", "\n }\n"])), function (p) {
150
153
  return p.grow
151
154
  ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n min-height: 50px;\n max-height: 150px;\n "], ["\n min-height: 50px;\n max-height: 150px;\n "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 50px;\n "], ["\n height: 50px;\n "])));
package/lib-esm/ui/conversation/conversation-component.d.ts CHANGED
@@ -27,6 +27,11 @@ export declare type ConversationComponentProperties = {
27
27
  avatarSize: string;
28
28
  typingActors: any[];
29
29
  sendButtonLabel: string;
30
+ secondaryAction?: {
31
+ icon?: string;
32
+ action: string;
33
+ label: string;
34
+ };
30
35
  };
31
36
  declare const ConversationComponent: (container: Container) => Promise<void>;
32
37
  export default ConversationComponent;
package/lib-esm/ui/conversation/conversation-input.js CHANGED
@@ -51,7 +51,7 @@ var ConversationInput = function (_a) {
51
51
  var _d = __read(useState(0), 2), calculatedLineHeight = _d[0], setCalculatedLineHeight = _d[1];
52
52
  var _e = __read(useState(0), 2), textareaMaxHeight = _e[0], setTextareaMaxHeight = _e[1];
53
53
  var dispatch = useDispatch();
54
- var _f = useProperties(), _g = _f.inputPlaceholder, inputPlaceholder = _g === void 0 ? 'Type your message' : _g, _h = _f.inputHidden, inputHidden = _h === void 0 ? false : _h, _j = _f.inputDisabled, inputDisabled = _j === void 0 ? false : _j, _k = _f.sendButtonLabel, sendButtonLabel = _k === void 0 ? 'Send message' : _k, _l = _f.inputMultiline, multiline = _l === void 0 ? true : _l;
54
+ var _f = useProperties(), _g = _f.inputPlaceholder, inputPlaceholder = _g === void 0 ? 'Type your message' : _g, _h = _f.inputHidden, inputHidden = _h === void 0 ? false : _h, _j = _f.inputDisabled, inputDisabled = _j === void 0 ? false : _j, _k = _f.sendButtonLabel, sendButtonLabel = _k === void 0 ? 'Send message' : _k, _l = _f.inputMultiline, multiline = _l === void 0 ? true : _l, secondaryAction = _f.secondaryAction;
55
55
  var _m = __read(useScroll(true), 2), scrollableCss = _m[0], inputRef = _m[1];
56
56
  useEffect(function () {
57
57
  if (inputRef.current) {
@@ -78,9 +78,12 @@ var ConversationInput = function (_a) {
78
78
  e.preventDefault();
79
79
  }
80
80
  };
81
- var getCategories = function (e) {
81
+ var onSecondaryActionButtonClick = function (e) {
82
+ if (!secondaryAction) {
83
+ return;
84
+ }
82
85
  e.preventDefault();
83
- dispatch('action', 'burger-clicked');
86
+ dispatch('action', secondaryAction.action);
84
87
  };
85
88
  var calculateHeight = function (value) {
86
89
  if (multiline && inputRef.current) {
@@ -112,15 +115,15 @@ var ConversationInput = function (_a) {
112
115
  return null;
113
116
  }
114
117
  return (React.createElement(Wrapper, { grow: multiline, className: appendClassNames('humany-conversation-input', className), "data-has-focus": inputFocus, scrollableCss: scrollableCss },
115
- React.createElement(StyledButton, { disabled: inputDisabled, onClick: getCategories, title: sendButtonLabel, "aria-label": sendButtonLabel },
116
- React.createElement(SymbolBadge, { size: 22, symbol: { type: 'Svg', content: 'options' } })),
118
+ secondaryAction && (React.createElement(StyledButton, { disabled: inputDisabled, onClick: onSecondaryActionButtonClick, title: secondaryAction.label, "aria-label": secondaryAction.label },
119
+ React.createElement(SymbolBadge, { size: 22, symbol: { type: 'Svg', content: secondaryAction.icon || 'browse' } }))),
117
120
  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 })),
118
121
  React.createElement(StyledButton, { disabled: inputDisabled, onClick: submit, title: sendButtonLabel, "aria-label": sendButtonLabel },
119
122
  React.createElement(SendSymbol, { size: 22, symbol: { type: 'Svg', content: 'send' }, hasContent: inputText && inputText.length }))));
120
123
  };
121
124
  var StyledTextArea = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n resize: none;\n flex: 1;\n flex-shrink: 1;\n min-height: 1.2em;\n max-height: 148px;\n line-height: 1.2em;\n height: 1.2em;\n padding: 0;\n margin: ", " ", ";\n font-size: ", ";\n border: none;\n transition: height 200ms linear;\n outline: none;\n"], ["\n resize: none;\n flex: 1;\n flex-shrink: 1;\n min-height: 1.2em;\n max-height: 148px;\n line-height: 1.2em;\n height: 1.2em;\n padding: 0;\n margin: ", " ", ";\n font-size: ", ";\n border: none;\n transition: height 200ms linear;\n outline: none;\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
122
125
  var StyledInput = styled(Input)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background-color: transparent;\n font-weight: 300;\n font-size: ", ";\n line-height: 1.2em;\n outline: none;\n padding-left: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n font-style: italic;\n }\n"], ["\n flex: 1;\n border: none;\n background-color: transparent;\n font-weight: 300;\n font-size: ", ";\n line-height: 1.2em;\n outline: none;\n padding-left: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n font-style: italic;\n }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.textLight; });
123
- var StyledButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n &:focus {\n ", ";\n }\n"], ["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; });
126
+ var StyledButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n color: #a6a6a6;\n &:focus {\n ", ";\n }\n"], ["\n flex: 0 0 50px;\n align-self: stretch;\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n color: #a6a6a6;\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; });
124
127
  var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background-color: ", ";\n border-top: ", ";\n ", "\n ", " {\n ", "\n }\n"], ["\n ", "\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background-color: ", ";\n border-top: ", ";\n ", "\n ", " {\n ", "\n }\n"])), function (p) {
125
128
  return p.grow
126
129
  ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n min-height: 50px;\n max-height: 150px;\n "], ["\n min-height: 50px;\n max-height: 150px;\n "]))) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 50px;\n "], ["\n height: 50px;\n "])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telia-ace/widget-conversation",
3
- "version": "1.0.10",
3
+ "version": "1.0.11",
4
4
  "description": "ACE Widget Conversation Platform",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "author": "Telia Company AB",
@@ -26,11 +26,11 @@
26
26
  "typings": "lib/index.d.ts",
27
27
  "dependencies": {
28
28
  "@telia-ace/widget-core": "^1.0.4",
29
- "@telia-ace/widget-forms": "^1.0.6",
29
+ "@telia-ace/widget-forms": "^1.0.7",
30
30
  "@telia-ace/widget-plugins": "^1.0.5",
31
31
  "@telia-ace/widget-routing": "^1.0.5",
32
32
  "@telia-ace/widget-services": "^1.0.4",
33
- "@telia-ace/widget-ui": "^1.0.6",
33
+ "@telia-ace/widget-ui": "^1.0.7",
34
34
  "@telia-ace/widget-utilities": "^1.0.1",
35
35
  "@webprovisions/platform": "^1.1.2"
36
36
  },
@@ -41,5 +41,5 @@
41
41
  "devDependencies": {
42
42
  "@types/react": "^16.8.0"
43
43
  },
44
- "gitHead": "873fc435c76c93696277b20f7f338b244d6470cf"
44
+ "gitHead": "d0810784ed9655d556f5653a168d13b8f71910b7"
45
45
  }