stream-chat-react 12.0.0-rc.7 → 12.0.0-rc.8

package/dist/components/ChannelList/ChannelList.js

@@ -117,7 +117,7 @@ const UnMemoizedChannelList = (props) => {
             channel: item,
             // forces the update of preview component on channel update
             channelUpdateCount,
-            key: item.id,
+            key: item.cid,
             Preview,
             setActiveChannel,
             watchers,

package/dist/components/Chat/hooks/useCreateChatClient.d.ts

@@ -1,9 +1,11 @@
-import { DefaultGenerics, ExtendableGenerics, OwnUserResponse, StreamChat, TokenOrProvider, UserResponse } from 'stream-chat';
+import { StreamChat } from 'stream-chat';
+import type { DefaultGenerics, ExtendableGenerics, OwnUserResponse, StreamChatOptions, TokenOrProvider, UserResponse } from 'stream-chat';
 /**
  * React hook to create, connect and return `StreamChat` client.
  */
-export declare const useCreateChatClient: <SCG extends ExtendableGenerics = DefaultGenerics>({ apiKey, tokenOrProvider, userData, }: {
+export declare const useCreateChatClient: <SCG extends ExtendableGenerics = DefaultGenerics>({ apiKey, options, tokenOrProvider, userData, }: {
     apiKey: string;
     tokenOrProvider: TokenOrProvider;
     userData: OwnUserResponse<SCG> | UserResponse<SCG>;
+    options?: StreamChatOptions;
 }) => StreamChat<SCG> | null;

package/dist/components/Chat/hooks/useCreateChatClient.js

@@ -1,16 +1,17 @@
 import { useEffect, useState } from 'react';
-import { StreamChat, } from 'stream-chat';
+import { StreamChat } from 'stream-chat';
 /**
  * React hook to create, connect and return `StreamChat` client.
  */
-export const useCreateChatClient = ({ apiKey, tokenOrProvider, userData, }) => {
+export const useCreateChatClient = ({ apiKey, options, tokenOrProvider, userData, }) => {
     const [chatClient, setChatClient] = useState(null);
     const [cachedUserData, setCachedUserData] = useState(userData);
     if (userData.id !== cachedUserData.id) {
         setCachedUserData(userData);
     }
+    const [cachedOptions] = useState(options);
     useEffect(() => {
-        const client = new StreamChat(apiKey);
+        const client = new StreamChat(apiKey, undefined, cachedOptions);
         let didUserConnectInterrupt = false;
         const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
             if (!didUserConnectInterrupt)
@@ -25,6 +26,6 @@ export const useCreateChatClient = ({ apiKey, tokenOrProvider, userData, }) => {
                 console.log(`Connection for user "${cachedUserData.id}" has been closed`);
             });
         };
-    }, [apiKey, cachedUserData, tokenOrProvider]);
+    }, [apiKey, cachedUserData, cachedOptions, tokenOrProvider]);
     return chatClient;
 };

package/dist/components/Message/MessageStatus.js

@@ -26,9 +26,10 @@ const UnMemoizedMessageStatus = (props) => {
     const sending = message.status === 'sending';
     const delivered = message.status === 'received' && message.id === lastReceivedId && !threadList;
     const deliveredAndRead = !!(readBy?.length && !threadList && !justReadByMe);
-    const [lastReadUser] = deliveredAndRead
+    const readersWithoutOwnUser = deliveredAndRead
         ? readBy.filter((item) => item.id !== client.user?.id)
         : [];
+    const [lastReadUser] = readersWithoutOwnUser;
     return (React.createElement("span", { className: rootClassName, "data-testid": clsx({
             'message-status-read-by': deliveredAndRead,
             'message-status-received': delivered && !deliveredAndRead,
@@ -47,6 +48,6 @@ const UnMemoizedMessageStatus = (props) => {
             (MessageReadStatus ? (React.createElement(MessageReadStatus, null)) : (React.createElement(React.Fragment, null,
                 React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)),
                 React.createElement(Avatar, { className: 'str-chat__avatar--message-status', image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, user: lastReadUser }),
-                readBy.length > 2 && (React.createElement("span", { className: `str-chat__message-${messageType}-status-number`, "data-testid": 'message-status-read-by-many' }, readBy.length - 1)))))));
+                readersWithoutOwnUser.length > 1 && (React.createElement("span", { className: `str-chat__message-${messageType}-status-number`, "data-testid": 'message-status-read-by-many' }, readersWithoutOwnUser.length)))))));
 };
 export const MessageStatus = React.memo(UnMemoizedMessageStatus);

package/dist/components/Message/renderText/rehypePlugins/mentionsMarkdownPlugin.d.ts

@@ -1,4 +1,4 @@
 import type { Nodes } from 'hast-util-find-and-replace/lib';
 import type { UserResponse } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../../types';
 export declare const mentionsMarkdownPlugin: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(mentioned_users: UserResponse<StreamChatGenerics>[]) => () => (tree: Nodes) => void;

package/dist/components/Message/renderText/remarkPlugins/htmlToTextPlugin.d.ts

@@ -1,2 +1,2 @@
-import type { Nodes } from 'react-markdown/lib';
+import type { Nodes } from 'hast-util-find-and-replace/lib';
 export declare const htmlToTextPlugin: () => (tree: Nodes) => void;

package/dist/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.d.ts

@@ -1,2 +1,2 @@
-import type { Nodes } from 'react-markdown/lib';
+import type { Nodes } from 'hast-util-find-and-replace/lib';
 export declare const keepLineBreaksPlugin: () => (tree: Nodes) => void;

package/dist/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.js

@@ -1,11 +1,7 @@
 import { visit } from 'unist-util-visit';
 import { u } from 'unist-builder';
 const visitor = (node, index, parent) => {
-    if (typeof index === 'undefined' || index === 0)
-        return;
-    if (typeof parent === 'undefined')
-        return;
-    if (!node.position)
+    if (!(index && parent && node.position))
         return;
     const prevSibling = parent.children.at(index - 1);
     if (!prevSibling?.position)

package/dist/components/Message/renderText/renderText.d.ts

@@ -1,8 +1,8 @@
 import React, { ComponentType } from 'react';
 import { Options } from 'react-markdown';
-import { MentionProps } from './componentRenderers';
-import type { PluggableList } from 'react-markdown/lib';
+import type { PluggableList } from 'react-markdown/lib/react-markdown';
 import type { UserResponse } from 'stream-chat';
+import { MentionProps } from './componentRenderers';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export type RenderTextPluginConfigurator = (defaultPlugins: PluggableList) => PluggableList;
 export declare const defaultAllowedTagNames: Array<keyof JSX.IntrinsicElements | 'emoji' | 'mention'>;

package/dist/components/Message/renderText/renderText.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
+import ReactMarkdown, { uriTransformer } from 'react-markdown';
 import { find } from 'linkifyjs';
 import uniqBy from 'lodash.uniqby';
 import remarkGfm from 'remark-gfm';
@@ -7,6 +7,7 @@ import { Anchor, Emoji, Mention } from './componentRenderers';
 import { detectHttp, escapeRegExp, matchMarkdownLinks, messageCodeBlocks } from './regex';
 import { emojiMarkdownPlugin, mentionsMarkdownPlugin } from './rehypePlugins';
 import { htmlToTextPlugin, keepLineBreaksPlugin } from './remarkPlugins';
+import { ErrorBoundary } from '../../UtilityComponents';
 export const defaultAllowedTagNames = [
     'html',
     'text',
@@ -42,7 +43,7 @@ function encodeDecode(url) {
         return url;
     }
 }
-const urlTransform = (uri) => (uri.startsWith('app://') ? uri : defaultUrlTransform(uri));
+const urlTransform = (uri) => (uri.startsWith('app://') ? uri : uriTransformer(uri));
 const getPluginsForward = (plugins) => plugins;
 export const markDownRenderers = {
     a: Anchor,
@@ -106,8 +107,9 @@ export const renderText = (text, mentionedUsers, { allowedTagNames = defaultAllo
     if (mentionedUsers?.length) {
         rehypePlugins.push(mentionsMarkdownPlugin(mentionedUsers));
     }
-    return (React.createElement(ReactMarkdown, { allowedElements: allowedTagNames, components: {
-            ...markDownRenderers,
-            ...customMarkDownRenderers,
-        }, rehypePlugins: getRehypePlugins(rehypePlugins), remarkPlugins: getRemarkPlugins(remarkPlugins), skipHtml: true, unwrapDisallowed: true, urlTransform: urlTransform }, newText));
+    return (React.createElement(ErrorBoundary, { fallback: React.createElement(React.Fragment, null, text) },
+        React.createElement(ReactMarkdown, { allowedElements: allowedTagNames, components: {
+                ...markDownRenderers,
+                ...customMarkDownRenderers,
+            }, rehypePlugins: getRehypePlugins(rehypePlugins), remarkPlugins: getRemarkPlugins(remarkPlugins), skipHtml: true, transformLinkUri: urlTransform, unwrapDisallowed: true }, newText)));
 };

package/dist/components/UtilityComponents/ErrorBoundary.d.ts

@@ -0,0 +1,16 @@
+import { Component } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
+type ErrorBoundaryProps = PropsWithChildren<{
+    fallback?: ReactNode;
+}>;
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
+    hasError: boolean;
+}> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: unknown, information: unknown): void;
+    render(): ReactNode;
+}
+export {};

package/dist/components/UtilityComponents/ErrorBoundary.js

@@ -0,0 +1,19 @@
+import { Component } from 'react';
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error, information) {
+        console.error(error, information);
+    }
+    render() {
+        if (this.state.hasError) {
+            return this.props.fallback;
+        }
+        return this.props.children;
+    }
+}

package/dist/components/UtilityComponents/index.d.ts

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

package/dist/components/UtilityComponents/index.js

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