stream-chat-react 6.9.1 → 6.12.1

package/dist/scss/Card.scss

@@ -88,3 +88,13 @@
     filter: invert(100%);
   }
 }
+
+.str-chat__message-attachment-card.str-chat__message-attachment-card--giphy {
+  .str-chat__message-attachment-card--content {
+    background-image: url('#{$assetsPath}/Poweredby_100px-White_VertText.png');
+    background-position: right var(--border-radius) bottom var(--border-radius);
+    background-repeat: no-repeat;
+    /* that was the original sizing of the img in React */
+    background-size: 56px;
+  }
+}

package/dist/scss/ChannelListMessenger.scss

@@ -3,3 +3,7 @@
   min-width: 300px;
   background: var(--grey-gainsboro);
 }
+
+.str-chat-channel-list .str-chat__channel-list-messenger__main {
+  padding-bottom: 4px;
+}

package/dist/scss/ChannelSearch.scss

@@ -81,7 +81,7 @@
   }
 
   &-container.inline {
-    top: 60px;
+    top: 64px;
     right: 0;
     background: var(--grey-gainsboro);
     height: calc(100vh - 60px);

package/dist/scss/EditMessageForm.scss

@@ -106,3 +106,7 @@
     }
   }
 }
+
+.str-chat__edit-message-form {
+  position: relative;
+}

package/dist/scss/LoadMoreButton.scss

@@ -36,3 +36,8 @@
     }
   }
 }
+
+.str-chat__load-more-button__button {
+  display: flex;
+  justify-content: center;
+}

package/dist/scss/Message.scss

@@ -708,6 +708,11 @@
           position: relative;
           display: none;
         }
+
+        &--options.str-chat-angular__message-simple__actions__action--options--editing {
+          position: relative;
+          display: flex;
+        }
       }
     }
 
@@ -920,12 +925,12 @@
       padding: 0 var(--xs-p);
     }
 
-    &:first-of-type {
+    &:first-of-type:not(.str-chat-angular__message-attachment-file-single) {
       border-radius: var(--border-radius) var(--border-radius) 0 0;
       border-bottom: transparent;
     }
 
-    &:last-of-type {
+    &:last-of-type:not(.str-chat-angular__message-attachment-file-single) {
       border-top-color: transparent;
       border-radius: 0 0 var(--border-radius) calc(var(--border-radius-sm) / 2);
 
@@ -938,7 +943,7 @@
     }
   }
 
-  .str-chat__message-attachment-file--item {
+  .str-chat__message-attachment-file--item:not(.str-chat-angular__message-attachment-file-single) {
     border-radius: 0;
   }
 
@@ -951,10 +956,10 @@
     .str-chat__message-attachment--file {
       background: var(--grey-gainsboro);
 
-      &:last-of-type {
+      &:last-of-type:not(.str-chat-angular__message-attachment-file-single) {
         border-radius: 0 0 calc(var(--border-radius-sm) / 2) var(--border-radius);
 
-        &:first-of-type {
+        &:first-of-type:not(.str-chat-angular__message-attachment-file-single) {
           border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
             var(--border-radius);
         }

package/dist/scss/MessageActions.scss

@@ -89,3 +89,15 @@
 .str-chat__message-actions-options:hover svg {
   fill: var(--primary-color);
 }
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--thread {
+  display: flex;
+}
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--reactions {
+  display: flex;
+}
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--options {
+  display: flex;
+}

package/dist/scss/MessageInput.scss

@@ -167,6 +167,14 @@
 .rta__entity--selected {
   background-color: var(--primary-color);
   color: var(--white);
+  width: 100%;
+}
+
+// Using separate rules for Angular so React SDK integrators don't have problems with "!important"
+// Angular needs "!imporant" to override angular-mentions styles
+.active.mention-active > a /* angular-mentions autocomplete */ {
+  background-color: var(--primary-color) !important;
+  color: var(--white) !important;
 }
 
 .rta__list {
@@ -201,6 +209,13 @@
 .str-chat__slash-command {
   padding: var(--xs-p) var(--sm-p);
   font-size: var(--md-font);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  br {
+    display: none;
+  }
 
   &-description {
     font-size: var(--sm-font);

package/dist/scss/MessageInputFlat.scss

@@ -84,6 +84,12 @@
     }
   }
 
+  &-has-attachments {
+    .str-chat__send-button {
+      display: block;
+    }
+  }
+
   &-wrapper {
     display: flex;
     flex-wrap: wrap;
@@ -168,6 +174,10 @@
     right: auto;
   }
 
+  .rfu-dropzone {
+    width: 100%;
+  }
+
   .rfu-file-previewer {
     width: 100%;
   }
@@ -188,7 +198,8 @@
   }
 }
 
-.rfu-image-previewer {
+.rfu-image-previewer,
+.rfu-image-previewer-angular-host {
   flex: 1 1 100%;
 
   &__image {

package/dist/scss/Modal.scss

@@ -1,12 +1,11 @@
 .str-chat__modal {
-  background: var(--black);
+  background: var(--modal-overlay-color);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10000;
-  opacity: 0.89;
   display: none;
   align-items: center;
   justify-content: center;
@@ -66,3 +65,9 @@
     }
   }
 }
+
+.str-chat__exit {
+  display: flex;
+  width: 86px;
+  justify-content: space-between;
+}

package/dist/scss/_base.scss

@@ -15,6 +15,16 @@
   clear: both;
 }
 
+button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  width: auto;
+}
+
 .messenger-chat {
   &.str-chat {
     display: flex;
@@ -134,6 +144,10 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
       flex-direction: column;
       flex: 1;
     }
+
+    .rfu-dropzone {
+      width: 100%;
+    }
   }
 
   &.messaging {

package/dist/scss/_variables.scss

@@ -151,4 +151,6 @@ $border-radius: 16px;
   --white: #ffffff;
   --white-smoke: #f2f2f2;
   --white-snow: #fcfcfc;
+
+  --modal-overlay-color: rgba(0, 0, 0, 0.89);
 }

package/dist/types/types.d.ts

@@ -17,6 +17,7 @@ export declare type DefaultAttachmentType = UnknownType & {
     mime_type?: string;
 };
 export declare type DefaultChannelType = UnknownType & {
+    frozen?: boolean;
     image?: string;
     member_count?: number;
     subtitle?: string;

package/dist/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEtE,oBAAY,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,cAAc,EAAE,WAAW,CAAC;QAC5B,IAAI,EAAE,WAAW,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,oBAAY,qBAAqB,GAAG,WAAW,GAAG;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,KAAK,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,WAAW,GAAG;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,qBAAqB,CAAC;AAEvD,oBAAY,gBAAgB,GAAG,WAAW,CAAC;AAE3C,oBAAY,kBAAkB,GAAG,WAAW,GAAG;IAC7C,UAAU,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CACX,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,CAChB,CAAC;IACF,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,oBAAY,mBAAmB,GAAG,WAAW,CAAC;AAE9C,oBAAY,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,eAAe,CACzB,QAAQ,SAAS,uBAAuB,GAAG,uBAAuB,IAChE,WAAW,GACb,uBAAuB,GAAG;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;CAC/B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEtE,oBAAY,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,cAAc,EAAE,WAAW,CAAC;QAC5B,IAAI,EAAE,WAAW,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,oBAAY,qBAAqB,GAAG,WAAW,GAAG;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,KAAK,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,qBAAqB,CAAC;AAEvD,oBAAY,gBAAgB,GAAG,WAAW,CAAC;AAE3C,oBAAY,kBAAkB,GAAG,WAAW,GAAG;IAC7C,UAAU,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CACX,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,CAChB,CAAC;IACF,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,oBAAY,mBAAmB,GAAG,WAAW,CAAC;AAE9C,oBAAY,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,eAAe,CACzB,QAAQ,SAAS,uBAAuB,GAAG,uBAAuB,IAChE,WAAW,GACb,uBAAuB,GAAG;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;CAC/B,CAAC"}

package/dist/utils.d.ts

@@ -2,6 +2,13 @@ import React from 'react';
 import type { UserResponse } from 'stream-chat';
 import type { DefaultUserType } from './types/types';
 export declare const isOnlyEmojis: (text?: string | undefined) => boolean;
+export declare const matchMarkdownLinks: (message: string) => (string | null)[];
+export declare const messageCodeBlocks: (message: string) => RegExpMatchArray;
+export declare const markDownRenderers: {
+    [nodeType: string]: React.ElementType;
+};
+export declare const emojiMarkdownPlugin: () => <T extends unknown>(markdownAST: T) => T;
+export declare const mentionsMarkdownPlugin: <Us extends DefaultUserType<Us> = DefaultUserType<import("./types/types").DefaultUserTypeInternal>>(mentioned_users: UserResponse<Us>[]) => () => <T extends unknown>(markdownAST: T) => T;
 export declare type MentionProps<Us extends DefaultUserType<Us> = DefaultUserType> = {
     mentioned_user: UserResponse<Us>;
 };

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AASjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,YAAY,wCAOxB,CAAC;AA4HF,oBAAY,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,EAAE,CAAC,GAAG,eAAe,IAAI;IAC3E,cAAc,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC;CAClC,CAAC;AAMF,oBAAY,iBAAiB,GAAG;IAC9B,uBAAuB,CAAC,EAAE;QACxB,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC;KACvC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,UAAU,6LAGZ,iBAAiB,uBA8D3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,UAExC;AAOD,wBAAgB,gBAAgB,WAG/B;AAGD,eAAO,MAAM,YAAY,QAAS,MAAM,KAAK,MAAM,WAgClD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AASjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,YAAY,wCAOxB,CAAC;AAoBF,eAAO,MAAM,kBAAkB,YAAa,MAAM,sBAajD,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAAa,MAAM,qBAIhD,CAAC;AAOF,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,WAAW,CAAA;CAwBtE,CAAC;AAEF,eAAO,MAAM,mBAAmB,gDAe/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,4LAiClC,CAAC;AAEF,oBAAY,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,EAAE,CAAC,GAAG,eAAe,IAAI;IAC3E,cAAc,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC;CAClC,CAAC;AAMF,oBAAY,iBAAiB,GAAG;IAC9B,uBAAuB,CAAC,EAAE;QACxB,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC;KACvC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,UAAU,6LAGZ,iBAAiB,uBA8D3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,UAExC;AAOD,wBAAgB,gBAAgB,WAG/B;AAGD,eAAO,MAAM,YAAY,QAAS,MAAM,KAAK,MAAM,WAgClD,CAAC"}

package/dist/utils.js

@@ -41,7 +41,7 @@ var allowedMarkups = [
     'blockquote',
     'delete',
 ];
-var matchMarkdownLinks = function (message) {
+export var matchMarkdownLinks = function (message) {
     var regexMdLinks = /\[([^[]+)\](\(.*\))/gm;
     var matches = message.match(regexMdLinks);
     var singleMatch = /\[([^[]+)\]\((.*)\)/;
@@ -53,12 +53,12 @@ var matchMarkdownLinks = function (message) {
         : [];
     return links.flat();
 };
-var messageCodeBlocks = function (message) {
+export var messageCodeBlocks = function (message) {
     var codeRegex = /```[a-z]*\n[\s\S]*?\n```|`[a-z]*[\s\S]*?`/gm;
     var matches = message.match(codeRegex);
     return matches || [];
 };
-var markDownRenderers = {
+export var markDownRenderers = {
     // eslint-disable-next-line react/display-name
     link: function (props) {
         var children = props.children, href = props.href;
@@ -71,7 +71,7 @@ var markDownRenderers = {
     },
     span: 'span',
 };
-var emojiMarkdownPlugin = function () {
+export var emojiMarkdownPlugin = function () {
     function replace(match) {
         return {
             children: [{ type: 'text', value: match }],
@@ -85,7 +85,7 @@ var emojiMarkdownPlugin = function () {
     };
     return transform;
 };
-var mentionsMarkdownPlugin = function (mentioned_users) { return function () {
+export var mentionsMarkdownPlugin = function (mentioned_users) { return function () {
     var mentioned_usernames = mentioned_users
         .map(function (user) { return user.name || user.id; })
         .filter(Boolean)
@@ -139,7 +139,7 @@ export var renderText = function (text, mentioned_users, options) {
         if (noParsingNeeded.length > 0 || linkIsInBlock)
             return;
         var displayLink = type === 'email' ? value : value.replace(detectHttp, '');
-        newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), "[" + displayLink + "](" + encodeURI(href) + ")");
+        newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), "[" + displayLink + "](" + encodeURI(decodeURI(href)) + ")");
     });
     var plugins = [emojiMarkdownPlugin];
     if (mentioned_users === null || mentioned_users === void 0 ? void 0 : mentioned_users.length) {

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "6.9.1";
+export declare const version = "6.12.1";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}

package/dist/version.js

@@ -1 +1 @@
-export var version = '6.9.1';
+export var version = '6.12.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "6.9.1",
+  "version": "6.12.1",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -28,6 +28,7 @@
   ],
   "dependencies": {
     "@braintree/sanitize-url": "5.0.0",
+    "@stream-io/stream-chat-css": "^1.1.2",
     "custom-event": "^1.0.1",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
@@ -43,25 +44,24 @@
     "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
     "react-fast-compare": "^3.2.0",
-    "react-file-utils": "1.1.7",
+    "react-file-utils": "1.1.8",
     "react-images": "1.2.0-beta.7",
     "react-is": "^17.0.1",
     "react-markdown": "^5.0.3",
     "react-player": "^2.7.0",
     "react-textarea-autosize": "^8.3.0",
-    "react-virtuoso": "^2.2.1",
-    "stream-chat-css": "^1.0.17",
+    "react-virtuoso": "^2.3.1",
     "textarea-caret": "^3.1.0",
     "uuid": "^8.3.1"
   },
   "optionalDependencies": {
     "@sindresorhus/transliterate": "^1.4.0",
-    "mml-react": "^0.4.1"
+    "mml-react": "^0.4.2"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^16.8.0",
     "react-dom": "^17.0.0 || ^16.8.0",
-    "stream-chat": "^3.8.0"
+    "stream-chat": "^5.0.0"
   },
   "files": [
     "dist",
@@ -88,12 +88,13 @@
     "@testing-library/react": "^11.2.2",
     "@testing-library/react-hooks": "^3.4.2",
     "@types/deep-equal": "^1.0.1",
-    "@types/emoji-mart": "^3.0.4",
+    "@types/emoji-mart": "^3.0.8",
     "@types/linkifyjs": "^2.1.3",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.throttle": "^4.1.6",
     "@types/lodash.uniqby": "^4.7.6",
+    "@types/moment": "^2.13.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-is": "^17.0.0",
     "@types/textarea-caret": "3.0.0",
@@ -150,7 +151,9 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
-    "stream-chat": "4.2.0",
+    "semantic-release": "^18.0.0",
+    "semantic-release-cli": "^5.4.4",
+    "stream-chat": "^5.0.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",
@@ -181,10 +184,11 @@
     "start": "tsc --watch",
     "postversion": "git push && git push --tags && npm publish",
     "prepare": "yarn run build",
-    "preversion": "yarn install && yarn lint && yarn test",
+    "preversion": "yarn install",
     "test": "jest",
     "types": "tsc --strict",
-    "validate-translations": "node scripts/validate-translations.js"
+    "validate-translations": "node scripts/validate-translations.js",
+    "semantic-release": "semantic-release"
   },
   "resolutions": {
     "ast-types": "^0.14.0"