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

package/dist/components/Channel/Channel.js

@@ -68,7 +68,11 @@ const ChannelInner = (props) => {
     const [state, dispatch] = useReducer(channelReducer, 
     // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
     // => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
-    { ...initialState, loading: !channel.initialized });
+    {
+        ...initialState,
+        hasMore: channel.state.messagePagination.hasPrev,
+        loading: !channel.initialized,
+    });
     const isMounted = useIsMounted();
     const originalTitle = useRef('');
     const lastRead = useRef();
@@ -184,7 +188,6 @@ const ChannelInner = (props) => {
     useLayoutEffect(() => {
         let errored = false;
         let done = false;
-        let channelInitializedExternally = true;
         (async () => {
             if (!channel.initialized && initializeOnMount) {
                 try {
@@ -210,7 +213,6 @@ const ChannelInner = (props) => {
                     await getChannel({ channel, client, members, options: channelQueryOptions });
                     const config = channel.getConfig();
                     setChannelConfig(config);
-                    channelInitializedExternally = false;
                 }
                 catch (e) {
                     dispatch({ error: e, type: 'setError' });
@@ -222,8 +224,7 @@ const ChannelInner = (props) => {
             if (!errored) {
                 dispatch({
                     channel,
-                    hasMore: channelInitializedExternally ||
-                        hasMoreMessagesProbably(channel.state.messages.length, channelQueryOptions.messages.limit),
+                    hasMore: channel.state.messagePagination.hasPrev,
                     type: 'initStateFromChannel',
                 });
                 if (client.user?.id && channel.state.read[client.user.id]) {
@@ -283,7 +284,7 @@ const ChannelInner = (props) => {
         dispatch({ hasMore, messages, type: 'loadMoreFinished' });
     }, 2000, { leading: true, trailing: true }), []);
     const loadMore = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
-        if (!online.current || !window.navigator.onLine || !state.hasMore)
+        if (!online.current || !window.navigator.onLine || !channel.state.messagePagination.hasPrev)
             return 0;
         // prevent duplicate loading events...
         const oldestMessage = state?.messages?.[0];
@@ -305,12 +306,11 @@ const ChannelInner = (props) => {
             dispatch({ loadingMore: false, type: 'setLoadingMore' });
             return 0;
         }
-        const hasMoreMessages = queryResponse.messages.length === perPage;
-        loadMoreFinished(hasMoreMessages, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         return queryResponse.messages.length;
     };
     const loadMoreNewer = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
-        if (!online.current || !window.navigator.onLine || !state.hasMoreNewer)
+        if (!online.current || !window.navigator.onLine || !channel.state.messagePagination.hasNext)
             return 0;
         const newestMessage = state?.messages?.[state?.messages?.length - 1];
         if (state.loadingMore || state.loadingMoreNewer)
@@ -330,9 +330,8 @@ const ChannelInner = (props) => {
             dispatch({ loadingMoreNewer: false, type: 'setLoadingMoreNewer' });
             return 0;
         }
-        const hasMoreNewerMessages = channel.state.messages !== channel.state.latestMessages;
         dispatch({
-            hasMoreNewer: hasMoreNewerMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             messages: channel.state.messages,
             type: 'loadMoreNewerFinished',
         });
@@ -342,15 +341,9 @@ const ChannelInner = (props) => {
     const jumpToMessage = useCallback(async (messageId, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
         dispatch({ loadingMore: true, type: 'setLoadingMore' });
         await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
-        /**
-         * if the message we are jumping to has less than half of the page size older messages,
-         * we have jumped to the beginning of the channel.
-         */
-        const indexOfMessage = channel.state.messages.findIndex((message) => message.id === messageId);
-        const hasMoreMessages = indexOfMessage >= Math.floor(messageLimit / 2);
-        loadMoreFinished(hasMoreMessages, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         dispatch({
-            hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             highlightedMessageId: messageId,
             type: 'jumpToMessageFinished',
         });
@@ -364,9 +357,7 @@ const ChannelInner = (props) => {
     }, [channel, loadMoreFinished]);
     const jumpToLatestMessage = useCallback(async () => {
         await channel.state.loadMessageIntoState('latest');
-        // FIXME: we cannot rely on constant value 25 as the page size can be customized by integrators
-        const hasMoreOlder = channel.state.messages.length >= 25;
-        loadMoreFinished(hasMoreOlder, channel.state.messages);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         dispatch({
             type: 'jumpToLatestMessage',
         });
@@ -377,7 +368,6 @@ const ChannelInner = (props) => {
         let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
         let firstUnreadMessageId = channelUnreadUiState?.first_unread_message_id;
         let isInCurrentMessageSet = false;
-        let hasMoreMessages = true;
         if (firstUnreadMessageId) {
             const result = findInMsgSetById(firstUnreadMessageId, channel.state.messages);
             isInCurrentMessageSet = result.index !== -1;
@@ -409,27 +399,25 @@ const ChannelInner = (props) => {
                 }
                 catch (e) {
                     addNotification(t('Failed to jump to the first unread message'), 'error');
-                    loadMoreFinished(hasMoreMessages, channel.state.messages);
+                    loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                     return;
                 }
                 const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
                 if (!firstMessageWithCreationDate) {
                     addNotification(t('Failed to jump to the first unread message'), 'error');
-                    loadMoreFinished(hasMoreMessages, channel.state.messages);
+                    loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                     return;
                 }
                 const firstMessageTimestamp = new Date(firstMessageWithCreationDate.created_at).getTime();
                 if (lastReadTimestamp < firstMessageTimestamp) {
                     // whole channel is unread
                     firstUnreadMessageId = firstMessageWithCreationDate.id;
-                    hasMoreMessages = false;
                 }
                 else {
                     const result = findInMsgSetByDate(channelUnreadUiState.last_read, messages);
                     lastReadMessageId = result.target?.id;
-                    hasMoreMessages = result.index >= Math.floor(queryMessageLimit / 2);
                 }
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
             }
         }
         if (!firstUnreadMessageId && !lastReadMessageId) {
@@ -446,14 +434,13 @@ const ChannelInner = (props) => {
                  * we have arrived to the oldest page of the channel
                  */
                 const indexOfTarget = channel.state.messages.findIndex((message) => message.id === targetId);
-                hasMoreMessages = indexOfTarget >= Math.floor(queryMessageLimit / 2);
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                 firstUnreadMessageId =
                     firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1]?.id;
             }
             catch (e) {
                 addNotification(t('Failed to jump to the first unread message'), 'error');
-                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
                 return;
             }
         }
@@ -468,7 +455,7 @@ const ChannelInner = (props) => {
                 last_read_message_id: lastReadMessageId,
             });
         dispatch({
-            hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+            hasMoreNewer: channel.state.messagePagination.hasNext,
             highlightedMessageId: firstUnreadMessageId,
             type: 'jumpToMessageFinished',
         });

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';