stream-chat-react 8.1.1 → 8.1.2

package/dist/components/ChatDown/ChatDown.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 export declare type ChatDownProps = {
-    /** The type of error */
-    type: string;
-    /** The image url for this error */
-    image?: string;
+    /** The image url for this error or ReactElement representing the image */
+    image?: string | React.ReactElement;
     /** The error message to show */
     text?: string;
+    /** The type of error */
+    type?: string;
 };
 /**
  * A simple indicator that chat functionality isn't available, triggered when the Chat API is unavailable or your network isn't working.
  */
-export declare const ChatDown: React.FC<ChatDownProps>;
+export declare const ChatDown: ({ image, text, type, }: ChatDownProps) => JSX.Element;
 //# sourceMappingURL=ChatDown.d.ts.map

package/dist/components/ChatDown/ChatDown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatDown.d.ts","sourceRoot":"","sources":["../../../src/components/ChatDown/ChatDown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,oBAAY,aAAa,GAAG;IAC1B,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAqBF;;GAEG;AACH,eAAO,MAAM,QAAQ,yBAA8D,CAAC"}
+{"version":3,"file":"ChatDown.d.ts","sourceRoot":"","sources":["../../../src/components/ChatDown/ChatDown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,oBAAY,aAAa,GAAG;IAC1B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IACpC,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AA2BF;;GAEG;AACH,eAAO,MAAM,QAAQ,2BAxBlB,aAAa,gBAwBmE,CAAC"}

package/dist/components/ChatDown/ChatDown.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { LoadingChannels } from '../Loading/LoadingChannels';
-import placeholder from '../../assets/str-chat__connection-error.svg';
 import { useTranslationContext } from '../../context/TranslationContext';
-var UnMemoizedChatDown = function (props) {
-    var image = props.image, text = props.text, _a = props.type, type = _a === void 0 ? 'Error' : _a;
+import { ConnectionErrorIcon } from './icons';
+var UnMemoizedChatDown = function (_a) {
+    var _b = _a.image, image = _b === void 0 ? React.createElement(ConnectionErrorIcon, null) : _b, text = _a.text, _c = _a.type, type = _c === void 0 ? 'Error' : _c;
     var t = useTranslationContext('ChatDown').t;
     return (React.createElement("div", { className: 'str-chat__down' },
         React.createElement(LoadingChannels, null),
         React.createElement("div", { className: 'str-chat__down-main' },
-            React.createElement("img", { alt: 'Connection error', "data-testid": 'chatdown-img', src: image || placeholder }),
+            typeof image === 'string' ? (React.createElement("img", { alt: 'Connection error', "data-testid": 'chatdown-img', src: image })) : (image),
             React.createElement("h1", null, type),
             React.createElement("h3", { "aria-live": 'assertive' }, text || t('Error connecting to chat, refresh the page to try again.')))));
 };

package/dist/components/ChatDown/icons.d.ts

@@ -0,0 +1,2 @@
+export declare const ConnectionErrorIcon: () => JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/ChatDown/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ChatDown/icons.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,mBAwB/B,CAAC"}

package/dist/components/ChatDown/icons.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export var ConnectionErrorIcon = function () { return (React.createElement("svg", { height: '78px', version: '1.1', viewBox: '0 0 78 78', width: '78px', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("title", null, "Connection Error"),
+    React.createElement("g", { fill: 'none', fillRule: 'evenodd', id: 'Interactions', stroke: 'none', strokeWidth: '1' },
+        React.createElement("g", { fill: '#CF1F25', id: 'Connection-Error-_-Connectivity', transform: 'translate(-270.000000, -30.000000)' },
+            React.createElement("g", { id: '109-network-connection', transform: 'translate(270.000000, 30.000000)' },
+                React.createElement("path", { d: 'M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z', id: 'Combined-Shape' })))))); };

package/dist/components/Gallery/Gallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM,EACF;QACE,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KAChC,EAAE,GACH,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACtC,CAAC;AAwEF;;GAEG;AACH,eAAO,MAAM,OAAO,4IAA4D,CAAC"}
+{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM,EACF;QACE,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KAChC,EAAE,GACH,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACtC,CAAC;AAiFF;;GAEG;AACH,eAAO,MAAM,OAAO,4IAA4D,CAAC"}

package/dist/components/Gallery/Gallery.js

@@ -6,6 +6,8 @@ var UnMemoizedGallery = function (props) {
     var _a = useState(0), index = _a[0], setIndex = _a[1];
     var _b = useState(false), modalOpen = _b[0], setModalOpen = _b[1];
     var t = useTranslationContext('Gallery').t;
+    var countImagesDisplayedInPreview = 4;
+    var lastImageIndexInPreview = countImagesDisplayedInPreview - 1;
     var toggleModal = function (selectedIndex) {
         if (modalOpen) {
             setModalOpen(false);
@@ -22,16 +24,17 @@ var UnMemoizedGallery = function (props) {
             source: image.image_url || image.thumb_url || '',
         }); });
     }, [images]);
-    var renderImages = images.slice(0, 3).map(function (image, i) { return (React.createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); } },
-        React.createElement("img", { alt: 'User uploaded content', src: image.image_url || image.thumb_url }))); });
-    return (React.createElement("div", { className: "str-chat__gallery " + (images.length > 3 ? 'str-chat__gallery--square' : '') },
-        renderImages,
-        images.length > 3 && (React.createElement("button", { className: 'str-chat__gallery-placeholder', onClick: function () { return toggleModal(3); }, style: {
-                backgroundImage: "url(" + images[3].image_url + ")",
+    var renderImages = images.slice(0, countImagesDisplayedInPreview).map(function (image, i) {
+        return i === lastImageIndexInPreview && images.length > countImagesDisplayedInPreview ? (React.createElement("button", { className: 'str-chat__gallery-placeholder', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); }, style: {
+                backgroundImage: "url(" + images[lastImageIndexInPreview].image_url + ")",
             } },
             React.createElement("p", null, t('{{ imageCount }} more', {
-                imageCount: images.length - 3,
-            })))),
+                imageCount: images.length - countImagesDisplayedInPreview,
+            })))) : (React.createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); } },
+            React.createElement("img", { alt: 'User uploaded content', src: image.image_url || image.thumb_url })));
+    });
+    return (React.createElement("div", { className: "str-chat__gallery " + (images.length > lastImageIndexInPreview ? 'str-chat__gallery--square' : '') },
+        renderImages,
         React.createElement(ModalWrapper, { images: formattedArray, index: index, modalIsOpen: modalOpen, toggleModal: function () { return setModalOpen(!modalOpen); } })));
 };
 /**

package/dist/index.cjs.js

@@ -448,6 +448,8 @@ var UnMemoizedGallery = function (props) {
     var _a = React.useState(0), index = _a[0], setIndex = _a[1];
     var _b = React.useState(false), modalOpen = _b[0], setModalOpen = _b[1];
     var t = useTranslationContext('Gallery').t;
+    var countImagesDisplayedInPreview = 4;
+    var lastImageIndexInPreview = countImagesDisplayedInPreview - 1;
     var toggleModal = function (selectedIndex) {
         if (modalOpen) {
             setModalOpen(false);
@@ -464,16 +466,17 @@ var UnMemoizedGallery = function (props) {
             source: image.image_url || image.thumb_url || '',
         }); });
     }, [images]);
-    var renderImages = images.slice(0, 3).map(function (image, i) { return (React__default['default'].createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); } },
-        React__default['default'].createElement("img", { alt: 'User uploaded content', src: image.image_url || image.thumb_url }))); });
-    return (React__default['default'].createElement("div", { className: "str-chat__gallery " + (images.length > 3 ? 'str-chat__gallery--square' : '') },
-        renderImages,
-        images.length > 3 && (React__default['default'].createElement("button", { className: 'str-chat__gallery-placeholder', onClick: function () { return toggleModal(3); }, style: {
-                backgroundImage: "url(" + images[3].image_url + ")",
+    var renderImages = images.slice(0, countImagesDisplayedInPreview).map(function (image, i) {
+        return i === lastImageIndexInPreview && images.length > countImagesDisplayedInPreview ? (React__default['default'].createElement("button", { className: 'str-chat__gallery-placeholder', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); }, style: {
+                backgroundImage: "url(" + images[lastImageIndexInPreview].image_url + ")",
             } },
             React__default['default'].createElement("p", null, t('{{ imageCount }} more', {
-                imageCount: images.length - 3,
-            })))),
+                imageCount: images.length - countImagesDisplayedInPreview,
+            })))) : (React__default['default'].createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); } },
+            React__default['default'].createElement("img", { alt: 'User uploaded content', src: image.image_url || image.thumb_url })));
+    });
+    return (React__default['default'].createElement("div", { className: "str-chat__gallery " + (images.length > lastImageIndexInPreview ? 'str-chat__gallery--square' : '') },
+        renderImages,
         React__default['default'].createElement(ModalComponent, { images: formattedArray, index: index, modalIsOpen: modalOpen, toggleModal: function () { return setModalOpen(!modalOpen); } })));
 };
 /**
@@ -6278,15 +6281,20 @@ var UnMemoizedChannelHeader = function (props) {
  */
 var ChannelHeader = React__default['default'].memo(UnMemoizedChannelHeader);
 
-var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='78px' height='78px' viewBox='0 0 78 78' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3c!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch --%3e %3ctitle%3eCombined Shape%3c/title%3e %3cdesc%3eCreated with Sketch.%3c/desc%3e %3cg id='Interactions' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='Connection-Error-_-Connectivity' transform='translate(-270.000000%2c -30.000000)' fill='%23CF1F25'%3e %3cg id='109-network-connection' transform='translate(270.000000%2c 30.000000)'%3e %3cpath d='M66.4609744%2c11.414231 C81.6225232%2c26.5757798 81.6225232%2c51.157545 66.4609744%2c66.3188467 C51.2994256%2c81.4803954 26.7176604%2c81.4803954 11.5563587%2c66.3188467 C-3.60519004%2c51.1572979 -3.60519004%2c26.5755327 11.5563587%2c11.414231 C26.7179075%2c-3.74731776 51.2996727%2c-3.74731776 66.4609744%2c11.414231 Z M54.7853215%2c45.8823776 L54.7853215%2c40.5882574 C54.7853215%2c39.613638 53.9952341%2c38.8235506 53.0206147%2c38.8235506 L44.9576695%2c38.8235506 L41.428256%2c42.3529641 L51.255555%2c42.3529641 L51.255555%2c45.8823776 L54.7853215%2c45.8823776 Z M40.6659027%2c43.1153174 L37.8988425%2c45.8823776 L40.6659027%2c45.8823776 L40.6659027%2c43.1153174 Z M51.1764962%2c56.4702653 L58.2353232%2c56.4702653 C59.2099355%2c56.4702653 60.00003%2c55.6801708 60.00003%2c54.7055585 L60.00003%2c51.176145 C60.00003%2c50.2015327 59.2099355%2c49.4114382 58.2353232%2c49.4114382 L51.1764962%2c49.4114382 C50.2018839%2c49.4114382 49.4117894%2c50.2015327 49.4117894%2c51.176145 L49.4117894%2c54.7055585 C49.4117894%2c55.6801708 50.2018839%2c56.4702653 51.1764962%2c56.4702653 Z M35.2941353%2c56.4702653 L42.3529624%2c56.4702653 C43.3275746%2c56.4702653 44.1176691%2c55.6801708 44.1176691%2c54.7055585 L44.1176691%2c51.176145 C44.1176691%2c50.2015327 43.3275746%2c49.4114382 42.3529624%2c49.4114382 L35.2941353%2c49.4114382 C34.319523%2c49.4114382 33.5294285%2c50.2015327 33.5294285%2c51.176145 L33.5294285%2c54.7055585 C33.5294285%2c55.6801708 34.319523%2c56.4702653 35.2941353%2c56.4702653 Z M56.6964989%2c19.0874231 C56.007381%2c18.3985134 54.8903216%2c18.3985134 54.2012036%2c19.087423 L45.882376%2c27.4062507 L45.882376%2c19.4117761 C45.882376%2c18.4371568 45.0922885%2c17.6470693 44.1176692%2c17.6470693 L33.5294286%2c17.6470693 C32.5548092%2c17.6470694 31.7647218%2c18.4371568 31.7647218%2c19.4117761 L31.7647218%2c30.0000167 C31.7647219%2c30.9746363 32.5548092%2c31.7647237 33.5294285%2c31.7647237 L41.5239031%2c31.7647237 L34.4650761%2c38.8235508 L24.7058947%2c38.8235508 C23.7312753%2c38.8235508 22.9411879%2c39.6136382 22.9411879%2c40.5882575 L22.9411879%2c45.8823778 L26.4706014%2c45.8823778 L26.4706014%2c42.3529643 L30.9356624%2c42.3529643 L23.8768354%2c49.4117914 L19.4117743%2c49.4117914 C18.4371549%2c49.4117914 17.6470675%2c50.2018788 17.6470675%2c51.1764981 L17.6470675%2c54.7059117 C17.6504049%2c54.9674302 17.7129076%2c55.2248042 17.8298886%2c55.4587302 L16.4456526%2c56.8429662 C15.7446193%2c57.5200453 15.7252005%2c58.6372282 16.4022825%2c59.3382615 C17.0793616%2c60.0392948 18.1965445%2c60.0587136 18.8975778%2c59.3816316 C18.9122847%2c59.3674273 18.9267436%2c59.3529684 18.940948%2c59.3382615 L56.6964963%2c21.5830662 C57.3856425%2c20.8939094 57.3856425%2c19.7765747 56.6964963%2c19.0874179 Z' id='Combined-Shape'%3e%3c/path%3e %3c/g%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
+var ConnectionErrorIcon = function () { return (React__default['default'].createElement("svg", { height: '78px', version: '1.1', viewBox: '0 0 78 78', width: '78px', xmlns: 'http://www.w3.org/2000/svg' },
+    React__default['default'].createElement("title", null, "Connection Error"),
+    React__default['default'].createElement("g", { fill: 'none', fillRule: 'evenodd', id: 'Interactions', stroke: 'none', strokeWidth: '1' },
+        React__default['default'].createElement("g", { fill: '#CF1F25', id: 'Connection-Error-_-Connectivity', transform: 'translate(-270.000000, -30.000000)' },
+            React__default['default'].createElement("g", { id: '109-network-connection', transform: 'translate(270.000000, 30.000000)' },
+                React__default['default'].createElement("path", { d: 'M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z', id: 'Combined-Shape' })))))); };
 
-var UnMemoizedChatDown = function (props) {
-    var image = props.image, text = props.text, _a = props.type, type = _a === void 0 ? 'Error' : _a;
+var UnMemoizedChatDown = function (_a) {
+    var _b = _a.image, image = _b === void 0 ? React__default['default'].createElement(ConnectionErrorIcon, null) : _b, text = _a.text, _c = _a.type, type = _c === void 0 ? 'Error' : _c;
     var t = useTranslationContext('ChatDown').t;
     return (React__default['default'].createElement("div", { className: 'str-chat__down' },
         React__default['default'].createElement(LoadingChannels, null),
         React__default['default'].createElement("div", { className: 'str-chat__down-main' },
-            React__default['default'].createElement("img", { alt: 'Connection error', "data-testid": 'chatdown-img', src: image || img }),
+            typeof image === 'string' ? (React__default['default'].createElement("img", { alt: 'Connection error', "data-testid": 'chatdown-img', src: image })) : (image),
             React__default['default'].createElement("h1", null, type),
             React__default['default'].createElement("h3", { "aria-live": 'assertive' }, text || t('Error connecting to chat, refresh the page to try again.')))));
 };
@@ -7779,7 +7787,7 @@ var Streami18n = /** @class */ (function () {
     return Streami18n;
 }());
 
-var version = '8.1.1';
+var version = '8.1.2';
 
 var useChat = function (_a) {
     var _b, _c;