stream-chat-react 13.0.4 → 13.1.0

package/dist/components/MessageInput/MessageInputFlat.js

@@ -7,6 +7,7 @@ import { StopAIGenerationButton as DefaultStopAIGenerationButton } from './StopA
 import { AudioRecorder as DefaultAudioRecorder, RecordingPermissionDeniedNotification as DefaultRecordingPermissionDeniedNotification, StartRecordingAudioButton as DefaultStartRecordingAudioButton, RecordingPermission, } from '../MediaRecorder';
 import { QuotedMessagePreview as DefaultQuotedMessagePreview, QuotedMessagePreviewHeader, } from './QuotedMessagePreview';
 import { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';
+import { SendToChannelCheckbox as DefaultSendToChannelCheckbox } from './SendToChannelCheckbox';
 import { TextareaComposer as DefaultTextareaComposer } from '../TextareaComposer';
 import { AIStates, useAIState } from '../AIStateIndicator';
 import { RecordingAttachmentType } from '../MediaRecorder/classes';
@@ -19,7 +20,7 @@ import { WithDragAndDropUpload } from './WithDragAndDropUpload';
 export const MessageInputFlat = () => {
     const { message } = useMessageContext();
     const { asyncMessagesMultiSendEnabled, cooldownRemaining, handleSubmit, hideSendButton, recordingController, setCooldownRemaining, } = useMessageInputContext('MessageInputFlat');
-    const { AttachmentPreviewList = DefaultAttachmentPreviewList, AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector, AudioRecorder = DefaultAudioRecorder, CooldownTimer = DefaultCooldownTimer, EmojiPicker, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, StopAIGenerationButton: StopAIGenerationButtonOverride, TextareaComposer = DefaultTextareaComposer, } = useComponentContext();
+    const { AttachmentPreviewList = DefaultAttachmentPreviewList, AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector, AudioRecorder = DefaultAudioRecorder, CooldownTimer = DefaultCooldownTimer, EmojiPicker, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, SendToChannelCheckbox = DefaultSendToChannelCheckbox, StartRecordingAudioButton = DefaultStartRecordingAudioButton, StopAIGenerationButton: StopAIGenerationButtonOverride, TextareaComposer = DefaultTextareaComposer, } = useComponentContext();
     const { channel } = useChatContext('MessageInputFlat');
     const { aiState } = useAIState(channel);
     const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
@@ -34,7 +35,7 @@ export const MessageInputFlat = () => {
     const isRecording = !!recordingController.recordingState;
     /**
      * 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
+     * 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.
      */
@@ -64,5 +65,6 @@ export const MessageInputFlat = () => {
                             attachments.some((a) => a.type === RecordingAttachmentType.VOICE_RECORDING)), onClick: () => {
                         recordingController.recorder?.start();
                         setShowRecordingPermissionDeniedNotification(true);
-                    } }))))))))));
+                    } })))))))),
+        React.createElement(SendToChannelCheckbox, null)));
 };

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SendToChannelCheckbox: () => React.JSX.Element | null;

package/dist/components/MessageInput/SendToChannelCheckbox.js

@@ -0,0 +1,20 @@
+import { useMessageComposer } from './hooks';
+import React from 'react';
+import { useStateStore } from '../../store';
+import { useTranslationContext } from '../../context';
+const stateSelector = (state) => ({
+    showReplyInChannel: state.showReplyInChannel,
+});
+export const SendToChannelCheckbox = () => {
+    const { t } = useTranslationContext();
+    const messageComposer = useMessageComposer();
+    const { showReplyInChannel } = useStateStore(messageComposer.state, stateSelector);
+    if (messageComposer.editedMessage || !messageComposer.threadId)
+        return null;
+    return (React.createElement("div", { className: 'str-chat__send-to-channel-checkbox__container' },
+        React.createElement("div", { className: 'str-chat__send-to-channel-checkbox__field' },
+            React.createElement("input", { id: 'send-to-channel-checkbox', onClick: messageComposer.toggleShowReplyInChannel, type: 'checkbox', value: showReplyInChannel.toString() }),
+            React.createElement("label", { htmlFor: 'send-to-channel-checkbox' }, Object.keys(messageComposer.channel.state.members).length === 2
+                ? t('Also send as a direct message')
+                : t('Also send in channel')))));
+};

package/dist/components/MessageList/MessageListNotifications.js

@@ -2,13 +2,18 @@ import React from 'react';
 import { ConnectionStatus } from './ConnectionStatus';
 import { CustomNotification } from './CustomNotification';
 import { useTranslationContext } from '../../context/TranslationContext';
+import { useNotifications } from '../Notifications/hooks/useNotifications';
+const ClientNotifications = () => {
+    const clientNotifications = useNotifications();
+    const { t } = useTranslationContext();
+    return (React.createElement(React.Fragment, null, clientNotifications.map((notification) => (React.createElement(CustomNotification, { active: true, key: notification.id, type: notification.severity }, t('translationBuilderTopic/notification', { notification }))))));
+};
 export const MessageListNotifications = (props) => {
     const { hasNewMessages, isMessageListScrolledToBottom, isNotAtLatestMessageSet, MessageNotification, notifications, scrollToBottom, threadList, unreadCount, } = props;
     const { t } = useTranslationContext('MessageListNotifications');
     return (React.createElement("div", { className: 'str-chat__list-notifications' },
         notifications.map((notification) => (React.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text))),
+        React.createElement(ClientNotifications, null),
         React.createElement(ConnectionStatus, null),
-        React.createElement(MessageNotification, { isMessageListScrolledToBottom: isMessageListScrolledToBottom, onClick: scrollToBottom, showNotification: hasNewMessages || isNotAtLatestMessageSet, threadList: threadList, unreadCount: unreadCount }, isNotAtLatestMessageSet
-            ? t('Latest Messages')
-            : t('New Messages!'))));
+        React.createElement(MessageNotification, { isMessageListScrolledToBottom: isMessageListScrolledToBottom, onClick: scrollToBottom, showNotification: hasNewMessages || isNotAtLatestMessageSet, threadList: threadList, unreadCount: unreadCount }, isNotAtLatestMessageSet ? t('Latest Messages') : t('New Messages!'))));
 };

package/dist/components/MessageList/VirtualizedMessageListComponents.d.ts

@@ -12,6 +12,6 @@ type CommonVirtuosoComponentProps = {
 };
 export declare const Item: ({ context, ...props }: ItemProps & CommonVirtuosoComponentProps) => React.JSX.Element;
 export declare const Header: ({ context }: CommonVirtuosoComponentProps) => React.JSX.Element;
-export declare const EmptyPlaceholder: ({ context }: CommonVirtuosoComponentProps) => React.JSX.Element;
+export declare const EmptyPlaceholder: ({ context }: CommonVirtuosoComponentProps) => React.JSX.Element | null;
 export declare const messageRenderer: (virtuosoIndex: number, _data: UnknownType, virtuosoContext: VirtuosoContext) => React.JSX.Element | null;
 export {};

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -44,6 +44,10 @@ export const Header = ({ context }) => {
 };
 export const EmptyPlaceholder = ({ context }) => {
     const { EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext('VirtualizedMessageList');
+    // prevent showing that there are no messages if there actually are messages (for some reason virtuoso decides to render empty placeholder first, even though it has the totalCount prop > 0)
+    if (typeof context?.processedMessages !== 'undefined' &&
+        context.processedMessages.length > 0)
+        return null;
     return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: context?.threadList ? 'thread' : 'message' }))));
 };
 export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {

package/dist/components/Notifications/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useNotifications';

package/dist/components/Notifications/hooks/index.js

@@ -0,0 +1 @@
+export * from './useNotifications';

package/dist/components/Notifications/hooks/useNotifications.d.ts

@@ -0,0 +1,2 @@
+import type { Notification } from 'stream-chat';
+export declare const useNotifications: () => Notification[];

package/dist/components/Notifications/hooks/useNotifications.js

@@ -0,0 +1,10 @@
+import { useChatContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const selector = (state) => ({
+    notifications: state.notifications,
+});
+export const useNotifications = () => {
+    const { client } = useChatContext();
+    const result = useStateStore(client.notifications.store, selector);
+    return result.notifications;
+};

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

@@ -0,0 +1 @@
+export * from './hooks';

package/dist/components/Notifications/index.js

@@ -0,0 +1 @@
+export * from './hooks';

package/dist/components/TextareaComposer/TextareaComposer.js

@@ -105,6 +105,10 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
             }
         }
         else if (shouldSubmit(event) && textareaRef.current) {
+            if (event.key === 'Enter') {
+                // prevent adding newline when submitting a message with
+                event.preventDefault();
+            }
             handleSubmit();
             textareaRef.current.selectionEnd = 0;
         }

package/dist/components/Thread/LegacyThreadContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { LocalMessage } from 'stream-chat';
+export declare const LegacyThreadContext: React.Context<{
+    legacyThread: LocalMessage | undefined;
+}>;
+export declare const useLegacyThreadContext: () => {
+    legacyThread: LocalMessage | undefined;
+};

package/dist/components/Thread/LegacyThreadContext.js

@@ -0,0 +1,3 @@
+import React, { useContext } from 'react';
+export const LegacyThreadContext = React.createContext({ legacyThread: undefined });
+export const useLegacyThreadContext = () => useContext(LegacyThreadContext);

package/dist/components/Thread/Thread.d.ts

@@ -3,7 +3,6 @@ import type { MessageInputProps } from '../MessageInput';
 import type { MessageListProps, VirtualizedMessageListProps } from '../MessageList';
 import type { MessageProps, MessageUIComponentProps } from '../Message/types';
 import type { MessageActionsArray } from '../Message/utils';
-import type { LocalMessage } from 'stream-chat';
 export type ThreadProps = {
     /** Additional props for `MessageInput` component: [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_input/#props) */
     additionalMessageInputProps?: MessageInputProps;
@@ -26,9 +25,6 @@ export type ThreadProps = {
     /** If true, render the `VirtualizedMessageList` instead of the standard `MessageList` component */
     virtualized?: boolean;
 };
-export declare const useLegacyThreadContext: () => {
-    legacyThread: LocalMessage | undefined;
-};
 /**
  * The Thread component renders a parent Message with a list of replies
  */

package/dist/components/Thread/Thread.js

@@ -1,5 +1,6 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import clsx from 'clsx';
+import { LegacyThreadContext } from './LegacyThreadContext';
 import { MESSAGE_ACTIONS } from '../Message';
 import { MessageInput, MessageInputFlat } from '../MessageInput';
 import { MessageList, VirtualizedMessageList } from '../MessageList';
@@ -8,8 +9,6 @@ import { ThreadHead as DefaultThreadHead } from '../Thread/ThreadHead';
 import { useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, } from '../../context';
 import { useThreadContext } from '../Threads';
 import { useStateStore } from '../../store';
-const LegacyThreadContext = React.createContext({ legacyThread: undefined });
-export const useLegacyThreadContext = () => useContext(LegacyThreadContext);
 /**
  * The Thread component renders a parent Message with a list of replies
  */

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

@@ -1,3 +1,4 @@
 export * from './Thread';
 export * from './ThreadHeader';
 export { ThreadStart } from './ThreadStart';
+export { useLegacyThreadContext } from './LegacyThreadContext';

package/dist/components/Thread/index.js

@@ -1,3 +1,4 @@
 export * from './Thread';
 export * from './ThreadHeader';
 export { ThreadStart } from './ThreadStart';
+export { useLegacyThreadContext } from './LegacyThreadContext';

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export * from './MessageInput';
 export * from './MessageList';
 export * from './MML';
 export * from './Modal';
+export * from './Notifications';
 export * from './Poll';
 export * from './Reactions';
 export * from './SafeAnchor';

package/dist/components/index.js

@@ -21,6 +21,7 @@ export * from './MessageInput';
 export * from './MessageList';
 export * from './MML';
 export * from './Modal';
+export * from './Notifications';
 export * from './Poll';
 export * from './Reactions';
 export * from './SafeAnchor';

package/dist/context/ComponentContext.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, 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, TextareaComposerProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
+import type { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListModalProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, ReminderNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, TextareaComposerProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
 import type { SuggestionItemProps, SuggestionListProps } from '../components/TextareaComposer';
 import type { SearchProps, SearchResultsPresearchProps, SearchSourceResultListProps } from '../experimental';
 import type { PropsWithChildrenOnly, UnknownType } from '../types/types';
@@ -65,6 +65,8 @@ export type ComponentContextValue = {
     MessageBlocked?: React.ComponentType;
     /** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */
     MessageDeleted?: React.ComponentType<MessageDeletedProps>;
+    /** Custom UI component for an indicator that a message is a thread reply sent to channel list: [MessageThreadReplyInChannelButtonIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx) */
+    MessageIsThreadReplyInChannelButtonIndicator?: React.ComponentType;
     MessageListMainPanel?: React.ComponentType<PropsWithChildrenOnly>;
     /** Custom UI component that displays message and connection status notifications in the `MessageList`, defaults to and accepts same props as [DefaultMessageListNotifications](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageListNotifications.tsx) */
     MessageListNotifications?: React.ComponentType<MessageListNotificationsProps>;
@@ -113,6 +115,7 @@ export type ComponentContextValue = {
     /** 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>;
     RecordingPermissionDeniedNotification?: React.ComponentType<RecordingPermissionDeniedNotificationProps>;
+    ReminderNotification?: React.ComponentType<ReminderNotificationProps>;
     /** 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) */
@@ -137,6 +140,8 @@ export type ComponentContextValue = {
     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>;
+    /** Custom UI component checkbox that indicates message to be sent to main channel, defaults to and accepts same props as: [SendToChannelCheckbox](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/SendToChannelCheckbox.tsx) */
+    SendToChannelCheckbox?: React.ComponentType;
     /** 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) */
     StartRecordingAudioButton?: React.ComponentType<StartRecordingAudioButtonProps>;
     StopAIGenerationButton?: React.ComponentType<StopAIGenerationButtonProps> | null;