Merge branch 'release-v11'

CHANGELOG.md

@@ -91,6 +91,15 @@ TypingIndicator is rendered as a child of MessageListMainPanel
 
 * remove legacy style components ([#2394](https://github.com/GetStream/stream-chat-react/issues/2394)) ([9410153](https://github.com/GetStream/stream-chat-react/commit/94101535d1de9de23a1ab8913423af0e7009bab9))
 
+## [11.23.5](https://github.com/GetStream/stream-chat-react/compare/v11.23.4...v11.23.5) (2024-08-08)
+
+
+### Bug Fixes
+
+* do not rerender on client options update ([#2465](https://github.com/GetStream/stream-chat-react/issues/2465)) ([81f33ba](https://github.com/GetStream/stream-chat-react/commit/81f33bae3933c7637e3a2a93b9c53be0511b45f6))
+* forward StreamChat constructor options via useCreateChatClient ([#2463](https://github.com/GetStream/stream-chat-react/issues/2463)) ([310835d](https://github.com/GetStream/stream-chat-react/commit/310835dc17e1228cd76d825a1dadb0f681ea552b))
+* prevent ChannelPreviews with duplicate keys ([1a075ad](https://github.com/GetStream/stream-chat-react/commit/1a075ad54f834c8a205fd615207e3fde5febf8c2))
+
 ## [11.23.4](https://github.com/GetStream/stream-chat-react/compare/v11.23.3...v11.23.4) (2024-08-05)
 
 

package.json

@@ -94,7 +94,7 @@
     "react-popper": "^2.3.0",
     "react-textarea-autosize": "^8.3.0",
     "react-virtuoso": "^2.16.5",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^3.0.1",
     "textarea-caret": "^3.1.0",
     "tslib": "^2.6.2",
     "unist-builder": "^3.0.0",

src/components/ChannelList/ChannelList.tsx

@@ -333,7 +333,7 @@ const UnMemoizedChannelList = <
       channel: item,
       // forces the update of preview component on channel update
       channelUpdateCount,
-      key: item.id,
+      key: item.cid,
       Preview,
       setActiveChannel,
       watchers,

src/components/Message/renderText/renderText.tsx

@@ -4,13 +4,15 @@ import { find } from 'linkifyjs';
 import uniqBy from 'lodash.uniqby';
 import remarkGfm from 'remark-gfm';
 
+import type { PluggableList } from 'react-markdown/lib/react-markdown';
+import type { UserResponse } from 'stream-chat';
+
 import { Anchor, Emoji, Mention, MentionProps } from './componentRenderers';
 import { detectHttp, escapeRegExp, matchMarkdownLinks, messageCodeBlocks } from './regex';
 import { emojiMarkdownPlugin, mentionsMarkdownPlugin } from './rehypePlugins';
 import { htmlToTextPlugin, keepLineBreaksPlugin } from './remarkPlugins';
+import { ErrorBoundary } from '../../UtilityComponents';
 
-import type { PluggableList } from 'react-markdown/lib/react-markdown';
-import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export type RenderTextPluginConfigurator = (defaultPlugins: PluggableList) => PluggableList;
@@ -158,19 +160,21 @@ export const renderText = <
   }
 
   return (
-    <ReactMarkdown
-      allowedElements={allowedTagNames}
-      components={{
-        ...markDownRenderers,
-        ...customMarkDownRenderers,
-      }}
-      rehypePlugins={getRehypePlugins(rehypePlugins)}
-      remarkPlugins={getRemarkPlugins(remarkPlugins)}
-      skipHtml
-      transformLinkUri={urlTransform}
-      unwrapDisallowed
-    >
-      {newText}
-    </ReactMarkdown>
+    <ErrorBoundary fallback={<>{text}</>}>
+      <ReactMarkdown
+        allowedElements={allowedTagNames}
+        components={{
+          ...markDownRenderers,
+          ...customMarkDownRenderers,
+        }}
+        rehypePlugins={getRehypePlugins(rehypePlugins)}
+        remarkPlugins={getRemarkPlugins(remarkPlugins)}
+        skipHtml
+        transformLinkUri={urlTransform}
+        unwrapDisallowed
+      >
+        {newText}
+      </ReactMarkdown>
+    </ErrorBoundary>
   );
 };

src/components/UtilityComponents/ErrorBoundary.tsx

@@ -0,0 +1,27 @@
+import { Component } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+type ErrorBoundaryProps = PropsWithChildren<{ fallback?: ReactNode }>;
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, { hasError: boolean }> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: unknown, information: unknown) {
+    console.error(error, information);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}

src/components/UtilityComponents/index.ts

@@ -1 +1,2 @@
 export * from './NullComponent';
+export * from './ErrorBoundary';