stream-chat-react 12.11.1 → 12.13.0

package/dist/components/Message/QuotedMessage.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import { Attachment as DefaultAttachment } from '../Attachment';
 import { Avatar as DefaultAvatar } from '../Avatar';
@@ -8,25 +8,28 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
-export const QuotedMessage = () => {
+import { renderText as defaultRenderText } from './renderText';
+export const QuotedMessage = ({ renderText: propsRenderText, }) => {
     const { Attachment = DefaultAttachment, Avatar: ContextAvatar } = useComponentContext('QuotedMessage');
     const { client } = useChatContext();
-    const { isMyMessage, message } = useMessageContext('QuotedMessage');
+    const { isMyMessage, message, renderText: contextRenderText, } = useMessageContext('QuotedMessage');
     const { t, userLanguage } = useTranslationContext('QuotedMessage');
     const { jumpToMessage } = useChannelActionContext('QuotedMessage');
+    const renderText = propsRenderText ?? contextRenderText ?? defaultRenderText;
     const Avatar = ContextAvatar || DefaultAvatar;
     const { quoted_message } = message;
-    if (!quoted_message)
-        return null;
-    const poll = quoted_message.poll_id && client.polls.fromState(quoted_message.poll_id);
-    const quotedMessageDeleted = quoted_message.deleted_at || quoted_message.type === 'deleted';
+    const poll = quoted_message?.poll_id && client.polls.fromState(quoted_message.poll_id);
+    const quotedMessageDeleted = quoted_message?.deleted_at || quoted_message?.type === 'deleted';
     const quotedMessageText = quotedMessageDeleted
         ? t('This message was deleted...')
-        : quoted_message.i18n?.[`${userLanguage}_text`] ||
-            quoted_message.text;
-    const quotedMessageAttachment = quoted_message.attachments?.length && !quotedMessageDeleted
+        : quoted_message?.i18n?.[`${userLanguage}_text`] ||
+            quoted_message?.text;
+    const quotedMessageAttachment = quoted_message?.attachments?.length && !quotedMessageDeleted
         ? quoted_message.attachments[0]
         : null;
+    const renderedText = useMemo(() => renderText(quotedMessageText, quoted_message?.mentioned_users), [quotedMessageText, quoted_message?.mentioned_users, renderText]);
+    if (!quoted_message)
+        return null;
     if (!quoted_message.poll && !quotedMessageText && !quotedMessageAttachment)
         return null;
     return (React.createElement(React.Fragment, null,
@@ -38,6 +41,6 @@ export const QuotedMessage = () => {
             quoted_message.user && (React.createElement(Avatar, { className: 'str-chat__avatar--quoted-message-sender', image: quoted_message.user.image, name: quoted_message.user.name || quoted_message.user.id, user: quoted_message.user })),
             React.createElement("div", { className: 'str-chat__quoted-message-bubble', "data-testid": 'quoted-message-contents' }, poll ? (React.createElement(Poll, { isQuoted: true, poll: poll })) : (React.createElement(React.Fragment, null,
                 quotedMessageAttachment && (React.createElement(Attachment, { attachments: [quotedMessageAttachment], isQuoted: true })),
-                React.createElement("div", { className: 'str-chat__quoted-message-bubble__text', "data-testid": 'quoted-message-text' }, quotedMessageText))))),
+                React.createElement("div", { className: 'str-chat__quoted-message-bubble__text', "data-testid": 'quoted-message-text' }, renderedText))))),
         message.attachments?.length ? (React.createElement(Attachment, { attachments: message.attachments })) : null));
 };

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

@@ -1,8 +1,8 @@
 import React, { ComponentType } from 'react';
-import { Options } from 'react-markdown';
-import type { PluggableList } from 'react-markdown/lib/react-markdown';
-import type { UserResponse } from 'stream-chat';
 import { MentionProps } from './componentRenderers';
+import type { Options } from 'react-markdown/lib';
+import type { UserResponse } from 'stream-chat';
+import type { PluggableList } from 'unified';
 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, { uriTransformer } from 'react-markdown';
+import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
 import { find } from 'linkifyjs';
 import uniqBy from 'lodash.uniqby';
 import remarkGfm from 'remark-gfm';
@@ -50,7 +50,7 @@ function encodeDecode(url) {
         return url;
     }
 }
-const urlTransform = (uri) => uri.startsWith('app://') ? uri : uriTransformer(uri);
+const urlTransform = (uri) => uri.startsWith('app://') ? uri : defaultUrlTransform(uri);
 const getPluginsForward = (plugins) => plugins;
 export const markDownRenderers = {
     a: Anchor,
@@ -118,5 +118,5 @@ export const renderText = (text, mentionedUsers, { allowedTagNames = defaultAllo
         React.createElement(ReactMarkdown, { allowedElements: allowedTagNames, components: {
                 ...markDownRenderers,
                 ...customMarkDownRenderers,
-            }, rehypePlugins: getRehypePlugins(rehypePlugins), remarkPlugins: getRemarkPlugins(remarkPlugins), skipHtml: true, transformLinkUri: urlTransform, unwrapDisallowed: true }, newText)));
+            }, rehypePlugins: getRehypePlugins(rehypePlugins), remarkPlugins: getRemarkPlugins(remarkPlugins), skipHtml: true, unwrapDisallowed: true, urlTransform: urlTransform }, newText)));
 };

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { TFunction } from 'i18next';
+import type { ReactNode } from 'react';
 import type { ReactionSort, UserResponse } from 'stream-chat';
 import type { PinPermissions, UserEventHandler } from './hooks';
 import type { MessageActionsArray } from './utils';
@@ -85,7 +85,7 @@ export type MessageProps<StreamChatGenerics extends DefaultStreamChatGenerics =
     /** A list of users that have read this Message if the message is the last one and was posted by my user */
     readBy?: UserResponse<StreamChatGenerics>[];
     /** Custom function to render message text content, defaults to the renderText function: [utils](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.ts) */
-    renderText?: (text?: string, mentioned_users?: UserResponse<StreamChatGenerics>[], options?: RenderTextOptions) => JSX.Element | null;
+    renderText?: (text?: string, mentioned_users?: UserResponse<StreamChatGenerics>[], options?: RenderTextOptions) => ReactNode;
     /** Custom retry send message handler to override default in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
     retrySendMessage?: ChannelActionContextValue<StreamChatGenerics>['retrySendMessage'];
     /** Comparator function to sort the list of reacted users

package/dist/components/MessageInput/MessageInputFlat.js

@@ -68,7 +68,8 @@ export const MessageInputFlat = () => {
     const displayQuotedMessage = !message && quotedMessage && quotedMessage.parent_id === parent?.id;
     const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices); // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
     const isRecording = !!recordingController.recordingState;
-    /* This bit here is needed to make sure that we can get rid of the default behaviour
+    /**
+     * This bit here is needed to make sure that we can get rid of the default behaviour
      * if need be. Essentially this allows us to pass StopAIGenerationButton={null} and
      * completely circumvent the default logic if it's not what we want. We need it as a
      * prop because there is no other trivial way to override the SendMessage button otherwise.

package/dist/components/MessageInput/QuotedMessagePreview.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { MessageContextValue } from '../../context';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare const QuotedMessagePreviewHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element;
 export type QuotedMessagePreviewProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     quotedMessage: StreamMessage<StreamChatGenerics>;
+    renderText?: MessageContextValue<StreamChatGenerics>['renderText'];
 };
-export declare const QuotedMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ quotedMessage, }: QuotedMessagePreviewProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const QuotedMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ quotedMessage, renderText, }: QuotedMessagePreviewProps<StreamChatGenerics>) => React.JSX.Element | null;

package/dist/components/MessageInput/QuotedMessagePreview.js

@@ -7,6 +7,7 @@ import { useChatContext } from '../../context/ChatContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useTranslationContext } from '../../context/TranslationContext';
+import { renderText as defaultRenderText } from '../Message';
 export const QuotedMessagePreviewHeader = () => {
     const { setQuotedMessage } = useChannelActionContext('QuotedMessagePreview');
     const { t } = useTranslationContext('QuotedMessagePreview');
@@ -15,12 +16,13 @@ export const QuotedMessagePreviewHeader = () => {
         React.createElement("button", { "aria-label": t('aria/Cancel Reply'), className: 'str-chat__quoted-message-remove', onClick: () => setQuotedMessage(undefined) },
             React.createElement(CloseIcon, null))));
 };
-export const QuotedMessagePreview = ({ quotedMessage, }) => {
+export const QuotedMessagePreview = ({ quotedMessage, renderText = defaultRenderText, }) => {
     const { client } = useChatContext();
     const { Attachment = DefaultAttachment, Avatar = DefaultAvatar } = useComponentContext('QuotedMessagePreview');
     const { userLanguage } = useTranslationContext('QuotedMessagePreview');
     const quotedMessageText = quotedMessage.i18n?.[`${userLanguage}_text`] ||
         quotedMessage.text;
+    const renderedText = useMemo(() => renderText(quotedMessageText, quotedMessage.mentioned_users), [quotedMessage.mentioned_users, quotedMessageText, renderText]);
     const quotedMessageAttachment = useMemo(() => {
         const [attachment] = quotedMessage.attachments ?? [];
         return attachment ? [attachment] : [];
@@ -32,6 +34,5 @@ export const QuotedMessagePreview = ({ quotedMessage, }) => {
         quotedMessage.user && (React.createElement(Avatar, { className: 'str-chat__avatar--quoted-message-sender', image: quotedMessage.user.image, name: quotedMessage.user.name || quotedMessage.user.id, user: quotedMessage.user })),
         React.createElement("div", { className: 'str-chat__quoted-message-bubble' }, poll ? (React.createElement(Poll, { isQuoted: true, poll: poll })) : (React.createElement(React.Fragment, null,
             !!quotedMessageAttachment.length && (React.createElement(Attachment, { attachments: quotedMessageAttachment, isQuoted: true })),
-            React.createElement("div", { className: 'str-chat__quoted-message-text', "data-testid": 'quoted-message-text' },
-                React.createElement("p", null, quotedMessageText)))))));
+            React.createElement("div", { className: 'str-chat__quoted-message-text', "data-testid": 'quoted-message-text' }, renderedText))))));
 };

package/dist/components/MessageList/utils.js

@@ -257,6 +257,9 @@ export function isDateSeparatorMessage(message) {
         isDate(message.date));
 }
 export const getIsFirstUnreadMessage = ({ firstUnreadMessageId, isFirstMessage, lastReadDate, lastReadMessageId, message, previousMessage, unreadMessageCount = 0, }) => {
+    // prevent showing unread indicator in threads
+    if (message.parent_id)
+        return false;
     const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
     const lastReadTimestamp = lastReadDate?.getTime();
     const messageIsUnread = !!createdAtTimestamp && !!lastReadTimestamp && createdAtTimestamp > lastReadTimestamp;

package/dist/context/ChatContext.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import type { AppSettingsAPIResponse, Channel, Mute } from 'stream-chat';
+import type { AppSettingsAPIResponse, Channel, Mute, SearchController } from 'stream-chat';
 import type { ChatProps } from '../components/Chat/Chat';
 import type { DefaultStreamChatGenerics, UnknownType } from '../types/types';
 import type { ChannelsQueryState } from '../components/Chat/hooks/useChannelsQueryState';
@@ -16,6 +16,8 @@ export type ChatContextValue<StreamChatGenerics extends DefaultStreamChatGeneric
     latestMessageDatesByChannels: Record<ChannelCID, Date>;
     mutes: Array<Mute<StreamChatGenerics>>;
     openMobileNav: () => void;
+    /** Instance of SearchController class that allows to control all the search operations. */
+    searchController: SearchController<StreamChatGenerics>;
     /**
      * Sets active channel to be rendered within Channel component.
      * @param newChannel

package/dist/context/ComponentContext.d.ts

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListModalProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
+import { SearchProps, SearchResultsPresearchProps, SearchSourceResultListProps } from '../experimental';
 import type { CustomTrigger, DefaultStreamChatGenerics, PropsWithChildrenOnly, UnknownType } from '../types/types';
 import type { StopAIGenerationButtonProps } from '../components/MessageInput/StopAIGenerationButton';
 export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
@@ -108,6 +109,28 @@ export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGe
     /** Custom UI component to display the reactions modal, defaults to and accepts same props as: [ReactionsListModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsListModal.tsx) */
     ReactionsListModal?: React.ComponentType<ReactionsListModalProps<StreamChatGenerics>>;
     RecordingPermissionDeniedNotification?: React.ComponentType<RecordingPermissionDeniedNotificationProps>;
+    /** Custom component to display the search UI, defaults to and accepts same props as: [Search](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/Search.tsx) */
+    Search?: React.ComponentType<SearchProps>;
+    /** Custom component to display the UI where the searched string is entered, defaults to and accepts same props as: [SearchBar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchBar/SearchBar.tsx) */
+    SearchBar?: React.ComponentType;
+    /** Custom component for the search UI dedicated to display the results area, defaults to and accepts same props as: [SearchResults](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchResults.tsx) */
+    SearchResults?: React.ComponentType;
+    /** Custom UI component to display header of search results pane, defaults to and accepts same props as: [SearchResultsHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchResultsHeader.tsx) */
+    SearchResultsHeader?: React.ComponentType;
+    /** Custom component to display search results pane before emitting the first search query for a given source, defaults to and accepts same props as: [SearchResultsPresearch](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultsPresearch.tsx) */
+    SearchResultsPresearch?: React.ComponentType<SearchResultsPresearchProps>;
+    /** Custom component to display the search source items results, defaults to and accepts same props as: [SearchSourceResultList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultList.tsx) */
+    SearchSourceResultList?: React.ComponentType<SearchSourceResultListProps>;
+    /** Custom component to indicate the end of the last page for a searched source, defaults to and accepts same props as: [SearchSourceResultListFooter](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultListFooter.tsx) */
+    SearchSourceResultListFooter?: React.ComponentType;
+    /** Custom UI component to display search results items for a given search source pane, defaults to and accepts same props as: [SearchSourceResults](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SourceSearchResults.tsx) */
+    SearchSourceResults?: React.ComponentType;
+    /** Custom component to display the search source results UI with 0 items found, defaults to and accepts same props as: [SearchSourceResultsEmpty](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultsEmpty.tsx) */
+    SearchSourceResultsEmpty?: React.ComponentType;
+    /** Custom component to display the header content for a given search source results, no default component is provided. */
+    SearchSourceResultsHeader?: React.ComponentType;
+    /** Custom component to display the search source results UI during the search query execution, defaults to and accepts same props as: [SearchSourceResultsLoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx) */
+    SearchSourceResultsLoadingIndicator?: React.ComponentType;
     /** Custom UI component for send button, defaults to and accepts same props as: [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
     SendButton?: React.ComponentType<SendButtonProps<StreamChatGenerics>>;
     /** Custom UI component button for initiating audio recording, defaults to and accepts same props as: [StartRecordingAudioButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx) */

package/dist/context/MessageContext.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import type { Mute, ReactionResponse, ReactionSort, UserResponse } from 'stream-chat';
 import type { ChannelActionContextValue } from './ChannelActionContext';
 import type { StreamMessage } from './ChannelStateContext';
@@ -103,7 +103,7 @@ export type MessageContextValue<StreamChatGenerics extends DefaultStreamChatGene
     /** A list of users that have read this Message */
     readBy?: UserResponse<StreamChatGenerics>[];
     /** Custom function to render message text content, defaults to the renderText function: [utils](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.tsx) */
-    renderText?: (text?: string, mentioned_users?: UserResponse<StreamChatGenerics>[], options?: RenderTextOptions) => JSX.Element | null;
+    renderText?: (text?: string, mentioned_users?: UserResponse<StreamChatGenerics>[], options?: RenderTextOptions) => ReactNode;
     /** Comparator function to sort the list of reacted users
      * @deprecated use `reactionDetailsSort` instead
      */