@eccenca/gui-elements 24.4.1-featurechatcomponentscmem6775.0 → 24.4.1-featurechatcomponentscmem6775.1

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 (10) hide show
  1. package/dist/cjs/components/Chat/ChatContent.js +71 -4
  2. package/dist/cjs/components/Chat/ChatContent.js.map +1 -1
  3. package/dist/esm/components/Chat/ChatContent.js +65 -5
  4. package/dist/esm/components/Chat/ChatContent.js.map +1 -1
  5. package/dist/types/components/Chat/ChatContent.d.ts +20 -2
  6. package/package.json +5 -4
  7. package/src/components/Chat/ChatContent.tsx +90 -7
  8. package/src/components/Chat/_chat.scss +5 -0
  9. package/src/components/Chat/stories/ChatArea.stories.tsx +4 -1
  10. package/src/components/Chat/stories/ChatContent.stories.tsx +3 -1
package/dist/cjs/components/Chat/ChatContent.js CHANGED
@@ -1,4 +1,27 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
2
25
  var __rest = (this && this.__rest) || function (s, e) {
3
26
  var t = {};
4
27
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -16,17 +39,58 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
16
39
  Object.defineProperty(exports, "__esModule", { value: true });
17
40
  exports.ChatContent = void 0;
18
41
  const react_1 = __importDefault(require("react"));
42
+ const server_1 = require("react-dom/server");
43
+ const ReactIs = __importStar(require("react-is"));
19
44
  const constants_1 = require("../../configuration/constants");
20
45
  const Markdown_1 = require("./../../cmem/markdown/Markdown");
21
46
  const FlexibleLayout_1 = require("./../FlexibleLayout");
47
+ const IconButton_1 = require("./../Icon/IconButton");
22
48
  const Spacing_1 = require("./../Separation/Spacing");
23
49
  const Typography_1 = require("./../Typography");
24
50
  /**
25
51
  * Component to display singe chat contents, including avatar and status line.
26
52
  */
27
53
  const ChatContent = (_a) => {
28
- var { className, children, statusLine, avatar, displayType = "bubble", indentationSize, alignment = "left", limitHeight, markdownProps } = _a, otherDivProps = __rest(_a, ["className", "children", "statusLine", "avatar", "displayType", "indentationSize", "alignment", "limitHeight", "markdownProps"]);
29
- const content = (react_1.default.createElement("div", Object.assign({ className: `${constants_1.CLASSPREFIX}-chat__content` +
54
+ var { className, children, statusLine, avatar, displayType = "bubble", indentationSize, alignment = "left", limitHeight, markdownProps, shrinked, autoShrink, onToggleSize } = _a, otherDivProps = __rest(_a, ["className", "children", "statusLine", "avatar", "displayType", "indentationSize", "alignment", "limitHeight", "markdownProps", "shrinked", "autoShrink", "onToggleSize"]);
55
+ const [displayShrinked, setDispayShrinked] = react_1.default.useState(shrinked === true || (autoShrink === true && typeof shrinked === "undefined"));
56
+ const toggleSize = () => {
57
+ if (onToggleSize) {
58
+ onToggleSize();
59
+ }
60
+ else {
61
+ setDispayShrinked(!displayShrinked);
62
+ }
63
+ };
64
+ const content = markdownProps && typeof children === "string" ? react_1.default.createElement(Markdown_1.Markdown, Object.assign({}, markdownProps), children) : children;
65
+ const onlyText = (children) => {
66
+ if (children instanceof Array) {
67
+ return children
68
+ .map((child) => {
69
+ return onlyText(child);
70
+ })
71
+ .join(" ");
72
+ }
73
+ return react_1.default.Children.toArray(children)
74
+ .map((child) => {
75
+ var _a;
76
+ if (ReactIs.isFragment(child)) {
77
+ return onlyText((_a = child.props) === null || _a === void 0 ? void 0 : _a.children);
78
+ }
79
+ if (typeof child === "string") {
80
+ return child;
81
+ }
82
+ if (typeof child === "number") {
83
+ return child.toString();
84
+ }
85
+ if (ReactIs.isElement(child)) {
86
+ // for some reasons `renderToString` returns empty string if not wrappe in a `span`
87
+ return (0, server_1.renderToString)(react_1.default.createElement("span", null, child));
88
+ }
89
+ return "";
90
+ })
91
+ .join(" ");
92
+ };
93
+ const chatitem = (react_1.default.createElement("div", Object.assign({ className: `${constants_1.CLASSPREFIX}-chat__content` +
30
94
  ` ${constants_1.CLASSPREFIX}-chat__content--display-${displayType}` +
31
95
  ` ${constants_1.CLASSPREFIX}-chat__content--align-${alignment}` +
32
96
  (limitHeight ? ` ${constants_1.CLASSPREFIX}-chat__content--limitheight` : "") +
@@ -34,7 +98,8 @@ const ChatContent = (_a) => {
34
98
  statusLine && (react_1.default.createElement(Typography_1.HtmlContentBlock, { small: true },
35
99
  statusLine,
36
100
  react_1.default.createElement(Spacing_1.Spacing, { size: "tiny" }))),
37
- markdownProps && typeof children === "string" ? (react_1.default.createElement(Markdown_1.Markdown, Object.assign({}, markdownProps), children)) : (children)));
101
+ displayShrinked && autoShrink ? (react_1.default.createElement(Typography_1.OverflowText, { passDown: true },
102
+ react_1.default.createElement(Markdown_1.Markdown, { removeMarkup: true }, onlyText(content)))) : (content)));
38
103
  const indentationSizes = {
39
104
  small: "8%",
40
105
  medium: "21%",
@@ -46,7 +111,9 @@ const ChatContent = (_a) => {
46
111
  } },
47
112
  react_1.default.createElement(FlexibleLayout_1.FlexibleLayoutContainer, { noEqualItemSpace: true, gapSize: "tiny" },
48
113
  avatar && (react_1.default.createElement(FlexibleLayout_1.FlexibleLayoutItem, { className: `${constants_1.CLASSPREFIX}-chat__content-avatar`, growFactor: 0, shrinkFactor: 0, style: alignment === "right" ? { order: 1 } : undefined }, react_1.default.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" }))),
49
- react_1.default.createElement(FlexibleLayout_1.FlexibleLayoutItem, { className: `${constants_1.CLASSPREFIX}-chat__content-wrapper` }, content))));
114
+ react_1.default.createElement(FlexibleLayout_1.FlexibleLayoutItem, { className: `${constants_1.CLASSPREFIX}-chat__content-wrapper` }, chatitem),
115
+ (displayShrinked || onToggleSize || autoShrink) && (react_1.default.createElement(FlexibleLayout_1.FlexibleLayoutItem, { className: `${constants_1.CLASSPREFIX}-chat__content-sizetoggle`, growFactor: 0, shrinkFactor: 0, style: alignment === "right" ? { order: -1 } : undefined },
116
+ react_1.default.createElement(IconButton_1.IconButton, { name: displayShrinked ? "toggler-showmore" : "toggler-showless", onClick: () => toggleSize() }))))));
50
117
  };
51
118
  exports.ChatContent = ChatContent;
52
119
  exports.default = exports.ChatContent;
package/dist/cjs/components/Chat/ChatContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAG1B,6DAAsE;AAEtE,6DAAyE;AAEzE,wDAAkF;AAClF,qDAAkD;AAClD,gDAAsE;AAoCtE;;GAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAWT,EAAE,EAAE;QAXK,EACxB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,MAAM,EACN,WAAW,GAAG,QAAQ,EACtB,eAAe,EACf,SAAS,GAAG,MAAM,EAClB,WAAW,EACX,aAAa,OAEE,EADZ,aAAa,cAVQ,gIAW3B,CADmB;IAEhB,MAAM,OAAO,GAAG,CACZ,qDACI,SAAS,EACL,GAAG,uBAAM,gBAAgB;YACzB,IAAI,uBAAM,2BAA2B,WAAW,EAAE;YAClD,IAAI,uBAAM,yBAAyB,SAAS,EAAE;YAC9C,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,uBAAM,6BAA6B,CAAC,CAAC,CAAC,EAAE,CAAC;YAC5D,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAElC,aAAa;QAEhB,UAAU,IAAI,CACX,8BAAC,6BAAgB,IAAC,KAAK;YAClB,UAAU;YACX,8BAAC,iBAAO,IAAC,IAAI,EAAC,MAAM,GAAG,CACR,CACtB;QACA,aAAa,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7C,8BAAC,mBAAQ,oBAAK,aAAa,GAAG,QAAQ,CAAY,CACrD,CAAC,CAAC,CAAC,CACA,QAAQ,CACX,CACC,CACT,CAAC;IAEF,MAAM,gBAAgB,GAAG;QACrB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,KAAK;KACf,CAAC;IAEF,OAAO,CACH,uCACI,KAAK,EAAE;YACH,UAAU,EAAE,SAAS,KAAK,OAAO,IAAI,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;YACpG,WAAW,EAAE,SAAS,KAAK,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;SACvG;QAED,8BAAC,wCAAuB,IAAC,gBAAgB,QAAC,OAAO,EAAC,MAAM;YACnD,MAAM,IAAI,CACP,8BAAC,mCAAkB,IACf,SAAS,EAAE,GAAG,uBAAM,uBAAuB,EAC3C,UAAU,EAAE,CAAC,EACb,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,IAEtD,eAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAC7E,CACxB;YACD,8BAAC,mCAAkB,IAAC,SAAS,EAAE,GAAG,uBAAM,wBAAwB,IAAG,OAAO,CAAsB,CAC1E,CACxB,CACT,CAAC;AACN,CAAC,CAAC;AAjEW,QAAA,WAAW,eAiEtB;AAEF,kBAAe,mBAAW,CAAC"}
1
+ {"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,6CAAkD;AAClD,kDAAoC;AAGpC,6DAAsE;AAEtE,6DAAyE;AAEzE,wDAAkF;AAClF,qDAAkD;AAClD,qDAAkD;AAClD,gDAAoF;AAsDpF;;GAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAcT,EAAE,EAAE;QAdK,EACxB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,MAAM,EACN,WAAW,GAAG,QAAQ,EACtB,eAAe,EACf,SAAS,GAAG,MAAM,EAClB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,UAAU,EACV,YAAY,OAEG,EADZ,aAAa,cAbQ,0KAc3B,CADmB;IAEhB,MAAM,CAAC,eAAe,EAAE,iBAAiB,CAAC,GAAG,eAAK,CAAC,QAAQ,CACvD,QAAQ,KAAK,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,OAAO,QAAQ,KAAK,WAAW,CAAC,CAChF,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,IAAI,YAAY,EAAE,CAAC;YACf,YAAY,EAAE,CAAC;QACnB,CAAC;aAAM,CAAC;YACJ,iBAAiB,CAAC,CAAC,eAAe,CAAC,CAAC;QACxC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,OAAO,GACT,aAAa,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,8BAAC,mBAAQ,oBAAK,aAAa,GAAG,QAAQ,CAAY,CAAC,CAAC,CAAC,QAAQ,CAAC;IAElH,MAAM,QAAQ,GAAG,CAAC,QAA6C,EAAU,EAAE;QACvE,IAAI,QAAQ,YAAY,KAAK,EAAE,CAAC;YAC5B,OAAO,QAAQ;iBACV,GAAG,CAAC,CAAC,KAAsB,EAAE,EAAE;gBAC5B,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,CAAC;iBACD,IAAI,CAAC,GAAG,CAAC,CAAC;QACnB,CAAC;QAED,OAAO,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;aAClC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;;YACX,IAAI,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC5B,OAAO,QAAQ,CAAC,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,CAAC,CAAC;YAC3C,CAAC;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC;YACjB,CAAC;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC5B,CAAC;YACD,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC3B,mFAAmF;gBACnF,OAAO,IAAA,uBAAc,EAAC,4CAAO,KAAK,CAAQ,CAAC,CAAC;YAChD,CAAC;YACD,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;aACD,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CACb,qDACI,SAAS,EACL,GAAG,uBAAM,gBAAgB;YACzB,IAAI,uBAAM,2BAA2B,WAAW,EAAE;YAClD,IAAI,uBAAM,yBAAyB,SAAS,EAAE;YAC9C,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,uBAAM,6BAA6B,CAAC,CAAC,CAAC,EAAE,CAAC;YAC5D,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAElC,aAAa;QAEhB,UAAU,IAAI,CACX,8BAAC,6BAAgB,IAAC,KAAK;YAClB,UAAU;YACX,8BAAC,iBAAO,IAAC,IAAI,EAAC,MAAM,GAAG,CACR,CACtB;QACA,eAAe,IAAI,UAAU,CAAC,CAAC,CAAC,CAC7B,8BAAC,yBAAY,IAAC,QAAQ;YAClB,8BAAC,mBAAQ,IAAC,YAAY,UAAE,QAAQ,CAAC,OAAO,CAAC,CAAY,CAC1C,CAClB,CAAC,CAAC,CAAC,CACA,OAAO,CACV,CACC,CACT,CAAC;IAEF,MAAM,gBAAgB,GAAG;QACrB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,KAAK;KACf,CAAC;IAEF,OAAO,CACH,uCACI,KAAK,EAAE;YACH,UAAU,EAAE,SAAS,KAAK,OAAO,IAAI,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;YACpG,WAAW,EAAE,SAAS,KAAK,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;SACvG;QAED,8BAAC,wCAAuB,IAAC,gBAAgB,QAAC,OAAO,EAAC,MAAM;YACnD,MAAM,IAAI,CACP,8BAAC,mCAAkB,IACf,SAAS,EAAE,GAAG,uBAAM,uBAAuB,EAC3C,UAAU,EAAE,CAAC,EACb,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,IAEtD,eAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAC7E,CACxB;YACD,8BAAC,mCAAkB,IAAC,SAAS,EAAE,GAAG,uBAAM,wBAAwB,IAAG,QAAQ,CAAsB;YAChG,CAAC,eAAe,IAAI,YAAY,IAAI,UAAU,CAAC,IAAI,CAChD,8BAAC,mCAAkB,IACf,SAAS,EAAE,GAAG,uBAAM,2BAA2B,EAC/C,UAAU,EAAE,CAAC,EACb,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;gBAExD,8BAAC,uBAAU,IACP,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,EAC/D,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,GAC7B,CACe,CACxB,CACqB,CACxB,CACT,CAAC;AACN,CAAC,CAAC;AA/HW,QAAA,WAAW,eA+HtB;AAEF,kBAAe,mBAAW,CAAC"}
package/dist/esm/components/Chat/ChatContent.js CHANGED
@@ -20,18 +20,75 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
+ var __read = (this && this.__read) || function (o, n) {
24
+ var m = typeof Symbol === "function" && o[Symbol.iterator];
25
+ if (!m) return o;
26
+ var i = m.call(o), r, ar = [], e;
27
+ try {
28
+ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
29
+ }
30
+ catch (error) { e = { error: error }; }
31
+ finally {
32
+ try {
33
+ if (r && !r.done && (m = i["return"])) m.call(i);
34
+ }
35
+ finally { if (e) throw e.error; }
36
+ }
37
+ return ar;
38
+ };
23
39
  import React from "react";
40
+ import { renderToString } from "react-dom/server.js";
41
+ import * as ReactIs from "react-is";
24
42
  import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
25
43
  import { Markdown } from "./../../cmem/markdown/Markdown.js";
26
44
  import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout/index.js";
45
+ import { IconButton } from "./../Icon/IconButton.js";
27
46
  import { Spacing } from "./../Separation/Spacing.js";
28
- import { HtmlContentBlock } from "./../Typography/index.js";
47
+ import { HtmlContentBlock, OverflowText } from "./../Typography/index.js";
29
48
  /**
30
49
  * Component to display singe chat contents, including avatar and status line.
31
50
  */
32
51
  export var ChatContent = function (_a) {
33
- var className = _a.className, children = _a.children, statusLine = _a.statusLine, avatar = _a.avatar, _b = _a.displayType, displayType = _b === void 0 ? "bubble" : _b, indentationSize = _a.indentationSize, _c = _a.alignment, alignment = _c === void 0 ? "left" : _c, limitHeight = _a.limitHeight, markdownProps = _a.markdownProps, otherDivProps = __rest(_a, ["className", "children", "statusLine", "avatar", "displayType", "indentationSize", "alignment", "limitHeight", "markdownProps"]);
34
- var content = (React.createElement("div", __assign({ className: "".concat(eccgui, "-chat__content") +
52
+ var className = _a.className, children = _a.children, statusLine = _a.statusLine, avatar = _a.avatar, _b = _a.displayType, displayType = _b === void 0 ? "bubble" : _b, indentationSize = _a.indentationSize, _c = _a.alignment, alignment = _c === void 0 ? "left" : _c, limitHeight = _a.limitHeight, markdownProps = _a.markdownProps, shrinked = _a.shrinked, autoShrink = _a.autoShrink, onToggleSize = _a.onToggleSize, otherDivProps = __rest(_a, ["className", "children", "statusLine", "avatar", "displayType", "indentationSize", "alignment", "limitHeight", "markdownProps", "shrinked", "autoShrink", "onToggleSize"]);
53
+ var _d = __read(React.useState(shrinked === true || (autoShrink === true && typeof shrinked === "undefined")), 2), displayShrinked = _d[0], setDispayShrinked = _d[1];
54
+ var toggleSize = function () {
55
+ if (onToggleSize) {
56
+ onToggleSize();
57
+ }
58
+ else {
59
+ setDispayShrinked(!displayShrinked);
60
+ }
61
+ };
62
+ var content = markdownProps && typeof children === "string" ? React.createElement(Markdown, __assign({}, markdownProps), children) : children;
63
+ var onlyText = function (children) {
64
+ if (children instanceof Array) {
65
+ return children
66
+ .map(function (child) {
67
+ return onlyText(child);
68
+ })
69
+ .join(" ");
70
+ }
71
+ return React.Children.toArray(children)
72
+ .map(function (child) {
73
+ var _a;
74
+ if (ReactIs.isFragment(child)) {
75
+ return onlyText((_a = child.props) === null || _a === void 0 ? void 0 : _a.children);
76
+ }
77
+ if (typeof child === "string") {
78
+ return child;
79
+ }
80
+ if (typeof child === "number") {
81
+ return child.toString();
82
+ }
83
+ if (ReactIs.isElement(child)) {
84
+ // for some reasons `renderToString` returns empty string if not wrappe in a `span`
85
+ return renderToString(React.createElement("span", null, child));
86
+ }
87
+ return "";
88
+ })
89
+ .join(" ");
90
+ };
91
+ var chatitem = (React.createElement("div", __assign({ className: "".concat(eccgui, "-chat__content") +
35
92
  " ".concat(eccgui, "-chat__content--display-").concat(displayType) +
36
93
  " ".concat(eccgui, "-chat__content--align-").concat(alignment) +
37
94
  (limitHeight ? " ".concat(eccgui, "-chat__content--limitheight") : "") +
@@ -39,7 +96,8 @@ export var ChatContent = function (_a) {
39
96
  statusLine && (React.createElement(HtmlContentBlock, { small: true },
40
97
  statusLine,
41
98
  React.createElement(Spacing, { size: "tiny" }))),
42
- markdownProps && typeof children === "string" ? (React.createElement(Markdown, __assign({}, markdownProps), children)) : (children)));
99
+ displayShrinked && autoShrink ? (React.createElement(OverflowText, { passDown: true },
100
+ React.createElement(Markdown, { removeMarkup: true }, onlyText(content)))) : (content)));
43
101
  var indentationSizes = {
44
102
  small: "8%",
45
103
  medium: "21%",
@@ -51,7 +109,9 @@ export var ChatContent = function (_a) {
51
109
  } },
52
110
  React.createElement(FlexibleLayoutContainer, { noEqualItemSpace: true, gapSize: "tiny" },
53
111
  avatar && (React.createElement(FlexibleLayoutItem, { className: "".concat(eccgui, "-chat__content-avatar"), growFactor: 0, shrinkFactor: 0, style: alignment === "right" ? { order: 1 } : undefined }, React.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" }))),
54
- React.createElement(FlexibleLayoutItem, { className: "".concat(eccgui, "-chat__content-wrapper") }, content))));
112
+ React.createElement(FlexibleLayoutItem, { className: "".concat(eccgui, "-chat__content-wrapper") }, chatitem),
113
+ (displayShrinked || onToggleSize || autoShrink) && (React.createElement(FlexibleLayoutItem, { className: "".concat(eccgui, "-chat__content-sizetoggle"), growFactor: 0, shrinkFactor: 0, style: alignment === "right" ? { order: -1 } : undefined },
114
+ React.createElement(IconButton, { name: displayShrinked ? "toggler-showmore" : "toggler-showless", onClick: function () { return toggleSize(); } }))))));
55
115
  };
56
116
  export default ChatContent;
57
117
  //# sourceMappingURL=ChatContent.js.map
package/dist/esm/components/Chat/ChatContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAiB,MAAM,gCAAgC,CAAC;AAEzE,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,iBAAiB,CAAC;AAoCtE;;GAEG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAWT;IAVf,IAAA,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,mBAAsB,EAAtB,WAAW,mBAAG,QAAQ,KAAA,EACtB,eAAe,qBAAA,EACf,iBAAkB,EAAlB,SAAS,mBAAG,MAAM,KAAA,EAClB,WAAW,iBAAA,EACX,aAAa,mBAAA,EACV,aAAa,cAVQ,gIAW3B,CADmB;IAEhB,IAAM,OAAO,GAAG,CACZ,sCACI,SAAS,EACL,UAAG,MAAM,mBAAgB;YACzB,WAAI,MAAM,qCAA2B,WAAW,CAAE;YAClD,WAAI,MAAM,mCAAyB,SAAS,CAAE;YAC9C,CAAC,WAAW,CAAC,CAAC,CAAC,WAAI,MAAM,gCAA6B,CAAC,CAAC,CAAC,EAAE,CAAC;YAC5D,CAAC,SAAS,CAAC,CAAC,CAAC,WAAI,SAAS,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAElC,aAAa;QAEhB,UAAU,IAAI,CACX,oBAAC,gBAAgB,IAAC,KAAK;YAClB,UAAU;YACX,oBAAC,OAAO,IAAC,IAAI,EAAC,MAAM,GAAG,CACR,CACtB;QACA,aAAa,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7C,oBAAC,QAAQ,eAAK,aAAa,GAAG,QAAQ,CAAY,CACrD,CAAC,CAAC,CAAC,CACA,QAAQ,CACX,CACC,CACT,CAAC;IAEF,IAAM,gBAAgB,GAAG;QACrB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,KAAK;KACf,CAAC;IAEF,OAAO,CACH,6BACI,KAAK,EAAE;YACH,UAAU,EAAE,SAAS,KAAK,OAAO,IAAI,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;YACpG,WAAW,EAAE,SAAS,KAAK,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;SACvG;QAED,oBAAC,uBAAuB,IAAC,gBAAgB,QAAC,OAAO,EAAC,MAAM;YACnD,MAAM,IAAI,CACP,oBAAC,kBAAkB,IACf,SAAS,EAAE,UAAG,MAAM,0BAAuB,EAC3C,UAAU,EAAE,CAAC,EACb,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,IAEtD,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAC7E,CACxB;YACD,oBAAC,kBAAkB,IAAC,SAAS,EAAE,UAAG,MAAM,2BAAwB,IAAG,OAAO,CAAsB,CAC1E,CACxB,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"ChatContent.js","sourceRoot":"","sources":["../../../../src/components/Chat/ChatContent.tsx"],"names":[],"mappings":"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"}
package/dist/types/components/Chat/ChatContent.d.ts CHANGED
@@ -29,15 +29,33 @@ export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>,
29
29
  * If set then the chat bubble only grows to a height of 50% of the viewport.
30
30
  * In case you need to set other maximum heights then use the `style` property directly.
31
31
  */
32
- limitHeight?: boolean;
32
+ limitHeight?: React.ReactChild;
33
33
  /**
34
34
  * If given then the content is automatically parsed and displayed by our `<Markdown />` component.
35
35
  * `children` need to a `string` then, otherwise it cannot be parsed.
36
36
  */
37
37
  markdownProps?: Omit<MarkdownProps, "children">;
38
+ /**
39
+ * Callback handler if content should be expanded.
40
+ * Button to shrink/expand is displayed, depending on `shrinked` value.
41
+ * If this handler is given then the component never will change the `shrinked` state automatically.
42
+ */
43
+ onToggleSize?: () => void;
44
+ /**
45
+ * Content should dislayed shrinked.
46
+ * Button to expand content is displayed.
47
+ * Component can reduce content automatically to one line if `autoShrink` is set to `true`.
48
+ * If `onToggleSize` handler is not given then `autoShrink=true` is inferred and size toggling is automatically provided.
49
+ */
50
+ shrinked?: boolean;
51
+ /**
52
+ * Children elements are automatically shrinked to one line.
53
+ * If `shrinked` are not given then `shrinked=true` is infered.
54
+ */
55
+ autoShrink?: boolean;
38
56
  }
39
57
  /**
40
58
  * Component to display singe chat contents, including avatar and status line.
41
59
  */
42
- export declare const ChatContent: ({ className, children, statusLine, avatar, displayType, indentationSize, alignment, limitHeight, markdownProps, ...otherDivProps }: ChatContentProps) => React.JSX.Element;
60
+ export declare const ChatContent: ({ className, children, statusLine, avatar, displayType, indentationSize, alignment, limitHeight, markdownProps, shrinked, autoShrink, onToggleSize, ...otherDivProps }: ChatContentProps) => React.JSX.Element;
43
61
  export default ChatContent;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@eccenca/gui-elements",
3
3
  "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
4
- "version": "24.4.1-featurechatcomponentscmem6775.0",
4
+ "version": "24.4.1-featurechatcomponentscmem6775.1",
5
5
  "license": "Apache-2.0",
6
6
  "homepage": "https://github.com/eccenca/gui-elements",
7
7
  "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -91,10 +91,11 @@
91
91
  "n3": "^1.25.1",
92
92
  "re-resizable": "^6.10.3",
93
93
  "react": "^16.13.1",
94
- "react-dom": "^16.13.1",
94
+ "react-dom": "^16.14.0",
95
95
  "react-flow-renderer": "9.7.4",
96
96
  "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
97
97
  "react-inlinesvg": "^3.0.3",
98
+ "react-is": "^16.13.1",
98
99
  "react-markdown": "^10.1.0",
99
100
  "react-markdown-deprecated": "npm:react-markdown@^8.0.7",
100
101
  "react-syntax-highlighter": "^15.6.1",
@@ -138,6 +139,7 @@
138
139
  "@types/jshint": "^2.12.4",
139
140
  "@types/lodash": "^4.17.16",
140
141
  "@types/n3": "^1.24.2",
142
+ "@types/react-is": "^19.0.0",
141
143
  "@types/react-syntax-highlighter": "^15.5.13",
142
144
  "@typescript-eslint/eslint-plugin": "^8.30.1",
143
145
  "@typescript-eslint/parser": "^8.30.1",
@@ -174,8 +176,7 @@
174
176
  },
175
177
  "peerDependencies": {
176
178
  "@blueprintjs/core": ">=5",
177
- "react": ">=16",
178
- "react-dom": ">=16"
179
+ "react": ">=16"
179
180
  },
180
181
  "resolutions": {
181
182
  "**/@types/react": "^17.0.85",
package/src/components/Chat/ChatContent.tsx CHANGED
@@ -1,4 +1,6 @@
1
1
  import React from "react";
2
+ import { renderToString } from "react-dom/server";
3
+ import * as ReactIs from "react-is";
2
4
 
3
5
  import { TestableComponent } from "../../components/interfaces";
4
6
  import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -6,8 +8,9 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
6
8
  import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
7
9
  import { DepictionProps } from "./../Depiction/Depiction";
8
10
  import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
11
+ import { IconButton } from "./../Icon/IconButton";
9
12
  import { Spacing } from "./../Separation/Spacing";
10
- import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
13
+ import { HtmlContentBlock, OverflowText, OverflowTextProps } from "./../Typography";
11
14
 
12
15
  export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
13
16
  /**
@@ -35,12 +38,30 @@ export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>,
35
38
  * If set then the chat bubble only grows to a height of 50% of the viewport.
36
39
  * In case you need to set other maximum heights then use the `style` property directly.
37
40
  */
38
- limitHeight?: boolean;
41
+ limitHeight?: React.ReactChild;
39
42
  /**
40
43
  * If given then the content is automatically parsed and displayed by our `<Markdown />` component.
41
44
  * `children` need to a `string` then, otherwise it cannot be parsed.
42
45
  */
43
46
  markdownProps?: Omit<MarkdownProps, "children">;
47
+ /**
48
+ * Callback handler if content should be expanded.
49
+ * Button to shrink/expand is displayed, depending on `shrinked` value.
50
+ * If this handler is given then the component never will change the `shrinked` state automatically.
51
+ */
52
+ onToggleSize?: () => void;
53
+ /**
54
+ * Content should dislayed shrinked.
55
+ * Button to expand content is displayed.
56
+ * Component can reduce content automatically to one line if `autoShrink` is set to `true`.
57
+ * If `onToggleSize` handler is not given then `autoShrink=true` is inferred and size toggling is automatically provided.
58
+ */
59
+ shrinked?: boolean;
60
+ /**
61
+ * Children elements are automatically shrinked to one line.
62
+ * If `shrinked` are not given then `shrinked=true` is infered.
63
+ */
64
+ autoShrink?: boolean;
44
65
  }
45
66
 
46
67
  /**
@@ -56,9 +77,56 @@ export const ChatContent = ({
56
77
  alignment = "left",
57
78
  limitHeight,
58
79
  markdownProps,
80
+ shrinked,
81
+ autoShrink,
82
+ onToggleSize,
59
83
  ...otherDivProps
60
84
  }: ChatContentProps) => {
61
- const content = (
85
+ const [displayShrinked, setDispayShrinked] = React.useState<boolean>(
86
+ shrinked === true || (autoShrink === true && typeof shrinked === "undefined")
87
+ );
88
+
89
+ const toggleSize = () => {
90
+ if (onToggleSize) {
91
+ onToggleSize();
92
+ } else {
93
+ setDispayShrinked(!displayShrinked);
94
+ }
95
+ };
96
+
97
+ const content =
98
+ markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
99
+
100
+ const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
101
+ if (children instanceof Array) {
102
+ return children
103
+ .map((child: React.ReactNode) => {
104
+ return onlyText(child);
105
+ })
106
+ .join(" ");
107
+ }
108
+
109
+ return React.Children.toArray(children)
110
+ .map((child) => {
111
+ if (ReactIs.isFragment(child)) {
112
+ return onlyText(child.props?.children);
113
+ }
114
+ if (typeof child === "string") {
115
+ return child;
116
+ }
117
+ if (typeof child === "number") {
118
+ return child.toString();
119
+ }
120
+ if (ReactIs.isElement(child)) {
121
+ // for some reasons `renderToString` returns empty string if not wrappe in a `span`
122
+ return renderToString(<span>{child}</span>);
123
+ }
124
+ return "";
125
+ })
126
+ .join(" ");
127
+ };
128
+
129
+ const chatitem = (
62
130
  <div
63
131
  className={
64
132
  `${eccgui}-chat__content` +
@@ -75,10 +143,12 @@ export const ChatContent = ({
75
143
  <Spacing size="tiny" />
76
144
  </HtmlContentBlock>
77
145
  )}
78
- {markdownProps && typeof children === "string" ? (
79
- <Markdown {...markdownProps}>{children}</Markdown>
146
+ {displayShrinked && autoShrink ? (
147
+ <OverflowText passDown>
148
+ <Markdown removeMarkup>{onlyText(content)}</Markdown>
149
+ </OverflowText>
80
150
  ) : (
81
- children
151
+ content
82
152
  )}
83
153
  </div>
84
154
  );
@@ -107,7 +177,20 @@ export const ChatContent = ({
107
177
  {React.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" })}
108
178
  </FlexibleLayoutItem>
109
179
  )}
110
- <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{content}</FlexibleLayoutItem>
180
+ <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{chatitem}</FlexibleLayoutItem>
181
+ {(displayShrinked || onToggleSize || autoShrink) && (
182
+ <FlexibleLayoutItem
183
+ className={`${eccgui}-chat__content-sizetoggle`}
184
+ growFactor={0}
185
+ shrinkFactor={0}
186
+ style={alignment === "right" ? { order: -1 } : undefined}
187
+ >
188
+ <IconButton
189
+ name={displayShrinked ? "toggler-showmore" : "toggler-showless"}
190
+ onClick={() => toggleSize()}
191
+ />
192
+ </FlexibleLayoutItem>
193
+ )}
111
194
  </FlexibleLayoutContainer>
112
195
  </div>
113
196
  );
package/src/components/Chat/_chat.scss CHANGED
@@ -65,6 +65,11 @@
65
65
  resize: none !important;
66
66
  }
67
67
 
68
+ .#{$eccgui}-chat__area {
69
+ padding: 0.25rem;
70
+ background-color: $card-background-color;
71
+ }
72
+
68
73
  .#{$eccgui}-chat__area-contentwidth {
69
74
  width: 100%;
70
75
  margin: 0 auto;
package/src/components/Chat/stories/ChatArea.stories.tsx CHANGED
@@ -26,8 +26,11 @@ Default.args = {
26
26
  <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
27
27
  <ChatContent {...ShortChatBubble.args} avatar={undefined} displayType="free" />,
28
28
  <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
29
- <ChatContent {...LongChatBubble.args} />,
29
+ <ChatContent {...LongChatBubble.args} autoShrink />,
30
30
  <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
31
31
  <ChatContent {...ShortChatBubble.args} />,
32
32
  ],
33
+ autoSpacingSize: "medium",
34
+ autoScrollTo: "last",
35
+ useAbsoluteSpace: true,
33
36
  };
package/src/components/Chat/stories/ChatContent.stories.tsx CHANGED
@@ -29,7 +29,8 @@ export default {
29
29
  },
30
30
  } as Meta<typeof ChatContent>;
31
31
 
32
- const TemplateFull: StoryFn<typeof ChatContent> = (args) => <ChatContent {...args} />;
32
+ let update = 0;
33
+ const TemplateFull: StoryFn<typeof ChatContent> = (args) => <ChatContent {...args} key={update++} />;
33
34
 
34
35
  export const Default = TemplateFull.bind({});
35
36
  Default.args = {
@@ -44,6 +45,7 @@ Default.args = {
44
45
  <strong>Username</strong> 25 minutes ago
45
46
  </OverflowText>
46
47
  ),
48
+ onToggleSize: undefined,
47
49
  };
48
50
 
49
51
  export const LongChatBubble = TemplateFull.bind({});