stream-chat-react 6.8.0 → 6.11.0

package/dist/scss/Avatar.scss

@@ -42,11 +42,27 @@
 
 .str-chat__message {
   &--me {
-    > .str-chat__avatar {
+    %order {
       order: 1;
+    }
+
+    %margin {
       margin: 0;
       margin-left: var(--xs-m);
     }
+
+    > .str-chat__avatar {
+      @extend %order;
+      @extend %margin;
+    }
+
+    > .str-chat-angular__avatar-host {
+      @extend %order;
+
+      > .str-chat__avatar {
+        @extend %margin;
+      }
+    }
   }
 }
 
@@ -54,7 +70,8 @@
   &--top,
   &--middle {
     .str-chat__message {
-      > .str-chat__avatar {
+      > .str-chat__avatar,
+      > .str-chat-angular__avatar-host {
         visibility: hidden;
       }
     }

package/dist/scss/Message.scss

@@ -864,7 +864,8 @@
     color: var(--overlay-dark);
   }
 
-  > .str-chat__avatar {
+  > .str-chat__avatar,
+  > .str-chat-angular__avatar-host > .str-chat__avatar {
     align-self: flex-end;
     margin-right: 0;
   }

package/dist/scss/MessageList.scss

@@ -1,7 +1,15 @@
-.str-chat__list {
-  flex: 1;
+%scrollable {
   overflow-x: hidden;
   overflow-y: auto;
+}
+
+.str-chat-angular__message-list-host {
+  @extend %scrollable;
+}
+
+.str-chat__list {
+  @extend %scrollable;
+  flex: 1;
   -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
   padding: 0;
 

package/dist/scss/MessageNotification.scss

@@ -10,4 +10,40 @@
   font-size: var(--sm-font);
   bottom: 10px;
   z-index: 101;
+
+  &-right {
+    align-self: flex-end;
+  }
+
+  &-scroll-down {
+    cursor: pointer;
+    display: block;
+    width: 42px;
+    height: 42px;
+    background-size: 14px auto;
+    border-radius: 50%;
+    background: var(--white);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+
+    &::before {
+      position: absolute;
+      top: calc(50% - 8px);
+      left: calc(50% - 6px);
+      transform: rotate(-45deg);
+      display: block;
+      width: 12px;
+      height: 12px;
+      content: '';
+      border: 2px solid var(--primary-color);
+      border-width: 0 0 2px 2px;
+    }
+
+    &-unread-count {
+      font-size: 10px;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 18px;
+    }
+  }
 }

package/dist/scss/_base.scss

@@ -17,11 +17,11 @@
 
 .messenger-chat {
   &.str-chat {
-    height: 100vh;
-    font-family: var(--second-font);
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
+    font-family: var(--second-font);
+    height: 100vh;
     margin: 0;
     flex: 1 0 100%;
 
@@ -125,7 +125,8 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
     height: 100%;
     display: flex;
 
-    .str-chat__main-panel {
+    .str-chat__main-panel,
+    .str-chat-angular__main-panel-inner {
       height: 100%;
       width: 100%;
       min-width: 250px;

package/dist/scss/_variables.scss

@@ -16,8 +16,8 @@ $border-color: #00000014;
 $black: #000000;
 $white: #ffffff;
 $grey: #f0f0f0;
-$lighten-black: #808080;
 $darken-grey: #343434;
+$lighten-black: #808080;
 $lighten-grey: #858585;
 
 /* miscellaneous */

package/dist/utils.d.ts

@@ -1,7 +1,14 @@
 import React from 'react';
 import type { UserResponse } from 'stream-chat';
-import type { DefaultUserType, UnknownType } from './types/types';
+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>;
 };
@@ -13,5 +20,5 @@ export declare type RenderTextOptions = {
 export declare const renderText: <Us extends DefaultUserType<Us> = DefaultUserType<import("./types/types").DefaultUserTypeInternal>>(text?: string | undefined, mentioned_users?: UserResponse<Us>[] | undefined, options?: RenderTextOptions) => JSX.Element | null;
 export declare function escapeRegExp(text: string): string;
 export declare function generateRandomId(): string;
-export declare const smartRender: (ElementOrComponentOrLiteral: React.ComponentType, props?: UnknownType | undefined, fallback?: React.ComponentType<{}> | null | undefined) => JSX.Element;
+export declare const getWholeChar: (str: string, i: number) => string;
 //# sourceMappingURL=utils.d.ts.map

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,WAAW,EAAE,MAAM,eAAe,CAAC;AAElE,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;AAED,eAAO,MAAM,WAAW,gCACO,MAAM,aAAa,wGA2BjD,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)
@@ -161,22 +161,29 @@ export function generateRandomId() {
     // prettier-ignore
     return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
 }
-export var smartRender = function (ElementOrComponentOrLiteral, props, fallback) {
-    if (ElementOrComponentOrLiteral === undefined && fallback) {
-        ElementOrComponentOrLiteral = fallback;
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt#getting_whole_characters
+export var getWholeChar = function (str, i) {
+    var code = str.charCodeAt(i);
+    if (Number.isNaN(code))
+        return '';
+    if (code < 0xd800 || code > 0xdfff)
+        return str.charAt(i);
+    if (0xd800 <= code && code <= 0xdbff) {
+        if (str.length <= i + 1) {
+            throw 'High surrogate without following low surrogate';
+        }
+        var next = str.charCodeAt(i + 1);
+        if (0xdc00 > next || next > 0xdfff) {
+            throw 'High surrogate without following low surrogate';
+        }
+        return str.charAt(i) + str.charAt(i + 1);
     }
-    if (React.isValidElement(ElementOrComponentOrLiteral)) {
-        // Flow cast through any, to make flow believe it's a React.Element
-        var element = ElementOrComponentOrLiteral;
-        return element;
+    if (i === 0) {
+        throw 'Low surrogate without preceding high surrogate';
     }
-    // Flow cast through any to remove React.Element after previous check
-    var ComponentOrLiteral = ElementOrComponentOrLiteral;
-    if (typeof ComponentOrLiteral === 'string' ||
-        typeof ComponentOrLiteral === 'number' ||
-        typeof ComponentOrLiteral === 'boolean' ||
-        ComponentOrLiteral == null) {
-        return ComponentOrLiteral;
+    var prev = str.charCodeAt(i - 1);
+    if (0xd800 > prev || prev > 0xdbff) {
+        throw 'Low surrogate without preceding high surrogate';
     }
-    return React.createElement(ComponentOrLiteral, __assign({}, props));
+    return '';
 };

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "6.8.0";
+export declare const version = "6.11.0";
 //# 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.8.0';
+export var version = '6.11.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "6.8.0",
+  "version": "6.11.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -49,14 +49,14 @@
     "react-markdown": "^5.0.3",
     "react-player": "^2.7.0",
     "react-textarea-autosize": "^8.3.0",
-    "react-virtuoso": "^1.10.8",
-    "stream-chat-css": "1.0.0",
+    "react-virtuoso": "2.2.6",
+    "stream-chat-css": "^1.0.17",
     "textarea-caret": "^3.1.0",
     "uuid": "^8.3.1"
   },
   "optionalDependencies": {
     "@sindresorhus/transliterate": "^1.4.0",
-    "mml-react": "^0.4.0"
+    "mml-react": "^0.4.2"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^16.8.0",
@@ -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",