stream-chat-react 9.3.0 → 9.5.0

package/dist/scss/Gallery.scss

@@ -37,6 +37,12 @@
   }
 }
 
+.stream-chat-angular__image-modal-host {
+  .str-chat__modal__inner {
+    max-width: 80%;
+  }
+}
+
 .stream-chat-angular__image-modal {
   display: flex;
   justify-content: center;

package/dist/scss/Message.scss

@@ -71,13 +71,15 @@
       &-attachment--img,
       &-attachment-card,
       .str-chat__gallery {
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
 
       &.str-chat__message--has-text.str-chat__message--has-attachment {
         .str-chat__message-attachment--img,
         .str-chat__message-attachment-card {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
@@ -86,24 +88,28 @@
         .str-chat__message {
           &-attachment--img,
           &-attachment-card {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
         &.str-chat__message--has-text.str-chat__message--has-attachment {
           .str-chat__message-attachment--img,
           .str-chat__message-attachment-card {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
         .str-chat__gallery {
-          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
+            var(--border-radius);
         }
 
         &.str-chat__message--has-text {
           .str-chat__gallery {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
       }
@@ -117,14 +123,16 @@
       &-attachment--img,
       &-attachment-card,
       .str-chat__gallery {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
 
       &.str-chat__message--has-text.str-chat__message--has-attachment {
         .str-chat__message-attachment--img,
         .str-chat__message-attachment-card,
         .str-chat__gallery {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
@@ -133,7 +141,8 @@
           &-attachment--img,
           &-attachment-card,
           .str-chat__gallery {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
@@ -155,14 +164,16 @@
       &-attachment--img,
       &-attachment-card,
       .str-chat__gallery {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
 
       &.str-chat__message--has-text.str-chat__message--has-attachment {
         .str-chat__message-attachment--img,
         .str-chat__message-attachment-card,
         .str-chat__gallery {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
@@ -171,7 +182,8 @@
           &-attachment--img,
           &-attachment-card,
           .str-chat__gallery {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
@@ -203,14 +215,16 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
       }
@@ -221,10 +235,12 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
 
           &--has-attachment {
-            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
+              var(--border-radius) calc(var(--border-radius-sm) / 2);
           }
         }
       }
@@ -232,10 +248,12 @@
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
-              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+                calc(var(--border-radius-sm) / 2) var(--border-radius);
             }
           }
         }
@@ -248,14 +266,16 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
               margin: 0;
@@ -266,7 +286,8 @@
         .str-chat__message-attachment-card {
           margin: 0;
           padding: 0;
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+            calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
       }
     }
@@ -387,7 +408,8 @@
       }
 
       &--has-attachment {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
 
       /* if text consists of just one emoji */
@@ -477,7 +499,8 @@
         background: var(--grey-whisper);
         border-color: transparent;
         text-align: right;
-        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
+          var(--border-radius);
         margin-right: 0; /* set spacing when unfocused */
 
         &--focused {
@@ -488,7 +511,8 @@
         }
 
         &--has-attachment {
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+            calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
 
         &--is-emoji {
@@ -661,6 +685,11 @@
   .str-chat__message-attachment-file--item:hover {
     background: transparent;
   }
+
+  // Disable pointer events so that clicking inside quoted message text or attachments doesn't interfere with jump to message
+  .quoted-message-inner {
+    pointer-events: none;
+  }
 }
 
 .str-chat {
@@ -786,7 +815,6 @@
       color: var(--white);
     }
 
-
     &--me {
       .str-chat__message-simple-reply-button {
         display: flex;
@@ -955,7 +983,8 @@
       &:first-of-type {
         border-bottom: 1px solid var(--grey-gainsboro);
         border-top: 1px solid var(--grey-gainsboro);
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
     }
   }
@@ -966,7 +995,8 @@
 
   &--me {
     .str-chat__message-attachment-card {
-      border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm);
+      border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm)
+        var(--border-radius-sm);
     }
 
     .str-chat__message-attachment--file {
@@ -976,7 +1006,8 @@
         border-radius: 0 0 calc(var(--border-radius-sm) / 2) var(--border-radius);
 
         &: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);
+          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
+            var(--border-radius);
         }
       }
     }
@@ -993,12 +1024,11 @@
       .str-chat__message-actions-box {
         right: unset;
         left: 100%;
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
     }
   }
-
-
 }
 
 .livestream.str-chat {
@@ -1151,19 +1181,22 @@
       &--reverse {
         right: 100%;
         left: unset;
-        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
+          var(--border-radius);
       }
     }
 
     .str-chat__message-actions-box--mine {
       right: 100%;
       left: unset;
-      border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+      border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
+        var(--border-radius);
 
       &.str-chat__message-actions-box--reverse {
         left: 100%;
         right: unset;
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+          calc(var(--border-radius-sm) / 2);
       }
     }
   }

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;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAOhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAE/D,eAAO,MAAM,YAAY,wCAOxB,CAAC;AAoBF,eAAO,MAAM,kBAAkB,YAAa,MAAM,sBAajD,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAAa,MAAM,qBAIhD,CAAC;AAyBF,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,2LAmClC,CAAC;AAEF,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,cAAc,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;CAClD,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,4LAKZ,iBAAiB,uBAiE3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,UAExC;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAAS,CAAC;AAGvC,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;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAMhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAE/D,eAAO,MAAM,YAAY,wCAOxB,CAAC;AAoBF,eAAO,MAAM,kBAAkB,YAAa,MAAM,sBAajD,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAAa,MAAM,qBAIhD,CAAC;AAyBF,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,2LAmClC,CAAC;AAEF,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,cAAc,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;CAClD,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,4LAKZ,iBAAiB,uBAmF3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,UAExC;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAAS,CAAC;AAGvC,eAAO,MAAM,YAAY,QAAS,MAAM,KAAK,MAAM,WAgClD,CAAC"}

package/dist/utils.js

@@ -13,8 +13,7 @@ import React from 'react';
 import emojiRegex from 'emoji-regex';
 import * as linkify from 'linkifyjs';
 import { nanoid } from 'nanoid';
-//@ts-expect-error
-import findAndReplace from 'mdast-util-find-and-replace';
+import { findAndReplace } from 'mdast-util-find-and-replace';
 import RootReactMarkdown from 'react-markdown';
 import ReactMarkdown from 'react-markdown/with-html';
 import uniqBy from 'lodash.uniqby';
@@ -156,6 +155,22 @@ export var renderText = function (text, mentioned_users, options) {
         if (noParsingNeeded.length > 0 || linkIsInBlock)
             return;
         try {
+            // special case for mentions:
+            // it could happen that a user's name matches with an e-mail format pattern.
+            // in that case, we check whether the found e-mail is actually a mention
+            // by naively checking for an existence of @ sign in front of it.
+            if (type === 'email' && mentioned_users) {
+                var emailMatchesWithName = mentioned_users.some(function (u) { return u.name === value; });
+                if (emailMatchesWithName) {
+                    newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), function (match, position) {
+                        var isMention = newText.charAt(position - 1) === '@';
+                        // in case of mention, we leave the match in its original form,
+                        // and we let `mentionsMarkdownPlugin` to do its job
+                        return isMention ? match : "[" + match + "](" + encodeDecode(href) + ")";
+                    });
+                    return;
+                }
+            }
             var displayLink = type === 'email' ? value : formatUrlForDisplay(href);
             newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), "[" + displayLink + "](" + encodeDecode(href) + ")");
         }

package/dist/version.d.ts

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

package/dist/version.js

@@ -1 +1 @@
-export var version = '9.3.0';
+export var version = '9.5.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "9.3.0",
+  "version": "9.5.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -41,7 +41,7 @@
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
-    "mdast-util-find-and-replace": "1.1.1",
+    "mdast-util-find-and-replace": "^2.2.1",
     "nanoid": "^3.3.4",
     "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
@@ -62,7 +62,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^17.0.0 || ^16.8.0",
     "react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
-    "stream-chat": "^6.7.3"
+    "stream-chat": "^6.9.0"
   },
   "files": [
     "dist",
@@ -103,6 +103,7 @@
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.throttle": "^4.1.6",
     "@types/lodash.uniqby": "^4.7.6",
+    "@types/mdast": "^3.0.10",
     "@types/moment": "^2.13.0",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
@@ -166,7 +167,7 @@
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.2",
     "semantic-release-cli": "^5.4.4",
-    "stream-chat": "^6.7.3",
+    "stream-chat": "^6.9.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",
@@ -201,6 +202,7 @@
     "test": "jest",
     "types": "tsc --strict",
     "validate-translations": "node scripts/validate-translations.js",
+    "validate-cjs": "node scripts/validate-cjs-bundle.cjs",
     "semantic-release": "semantic-release",
     "browse-examples": "ladle serve",
     "e2e": "playwright test",
@@ -208,7 +210,8 @@
     "e2e-container": "./e2e/scripts/run_in_container.sh"
   },
   "resolutions": {
-    "ast-types": "^0.14.0"
+    "ast-types": "^0.14.0",
+    "@types/unist": "^2.0.6"
   },
   "browserslist": [
     ">0.2%",