stream-chat-react 13.2.3 → 13.4.0

package/dist/components/Location/hooks/useLiveLocationSharingManager.js

@@ -0,0 +1,57 @@
+import { LiveLocationManager } from 'stream-chat';
+import { useEffect, useMemo } from 'react';
+const isMobile = () => /Mobi/i.test(navigator.userAgent);
+/**
+ * Checks whether the current browser is Safari.
+ */
+export const isSafari = () => {
+    if (typeof navigator === 'undefined')
+        return false;
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');
+};
+/**
+ * Checks whether the current browser is Firefox.
+ */
+export const isFirefox = () => {
+    if (typeof navigator === 'undefined')
+        return false;
+    return navigator.userAgent?.includes('Firefox');
+};
+/**
+ * Checks whether the current browser is Google Chrome.
+ */
+export const isChrome = () => {
+    if (typeof navigator === 'undefined')
+        return false;
+    return navigator.userAgent?.includes('Chrome');
+};
+const browser = () => {
+    if (isChrome())
+        return 'chrome';
+    if (isFirefox())
+        return 'firefox';
+    if (isSafari())
+        return 'safari';
+    return 'other';
+};
+export const useLiveLocationSharingManager = ({ client, getDeviceId, watchLocation, }) => {
+    const manager = useMemo(() => {
+        if (!client)
+            return null;
+        return new LiveLocationManager({
+            client,
+            getDeviceId: getDeviceId ??
+                (() => `web-${isMobile() ? 'mobile' : 'desktop'}-${browser()}-${client.userID}`),
+            watchLocation,
+        });
+    }, [client, getDeviceId, watchLocation]);
+    useEffect(() => {
+        if (!manager)
+            return;
+        manager.init();
+        return () => {
+            manager.unregisterSubscriptions();
+        };
+    }, [manager]);
+    return manager;
+};

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

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

package/dist/components/Location/index.js

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

package/dist/components/Message/MessageSimple.js

@@ -39,6 +39,11 @@ const MessageSimpleWithContext = (props) => {
     const hasAttachment = messageHasAttachments(message);
     const hasReactions = messageHasReactions(message);
     const isAIGenerated = useMemo(() => isMessageAIGenerated?.(message), [isMessageAIGenerated, message]);
+    const finalAttachments = useMemo(() => !message.shared_location && !message.attachments
+        ? []
+        : !message.shared_location
+            ? message.attachments
+            : [message.shared_location, ...(message.attachments ?? [])], [message]);
     if (isDateSeparatorMessage(message)) {
         return null;
     }
@@ -92,7 +97,7 @@ const MessageSimpleWithContext = (props) => {
                 React.createElement("div", { className: 'str-chat__message-reactions-host' }, hasReactions && React.createElement(ReactionsList, { reverse: true })),
                 React.createElement("div", { className: 'str-chat__message-bubble' },
                     poll && React.createElement(Poll, { poll: poll }),
-                    message.attachments?.length && !message.quoted_message ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
+                    finalAttachments?.length && !message.quoted_message ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: finalAttachments })) : null,
                     isAIGenerated ? (React.createElement(StreamedMessageText, { message: message, renderText: renderText })) : (React.createElement(MessageText, { message: message, renderText: renderText })),
                     React.createElement(MessageErrorIcon, null))),
             showReplyCountButton && (React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count })),

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

@@ -2,7 +2,9 @@ export * from './FixedHeightMessage';
 export * from './hooks';
 export * from './icons';
 export * from './Message';
+export * from './MessageBlocked';
 export * from './MessageDeleted';
+export * from './MessageEditedTimestamp';
 export * from './MessageIsThreadReplyInChannelButtonIndicator';
 export * from './MessageOptions';
 export * from './MessageRepliesCountButton';
@@ -13,7 +15,7 @@ export * from './MessageTimestamp';
 export * from './QuotedMessage';
 export * from './ReminderNotification';
 export * from './renderText';
+export * from './StreamedMessageText';
 export * from './types';
 export * from './utils';
-export * from './StreamedMessageText';
 export type { TimestampProps } from './Timestamp';

package/dist/components/Message/index.js

@@ -2,7 +2,9 @@ export * from './FixedHeightMessage';
 export * from './hooks';
 export * from './icons';
 export * from './Message';
+export * from './MessageBlocked';
 export * from './MessageDeleted';
+export * from './MessageEditedTimestamp';
 export * from './MessageIsThreadReplyInChannelButtonIndicator';
 export * from './MessageOptions';
 export * from './MessageRepliesCountButton';
@@ -13,6 +15,6 @@ export * from './MessageTimestamp';
 export * from './QuotedMessage';
 export * from './ReminderNotification';
 export * from './renderText';
+export * from './StreamedMessageText';
 export * from './types';
 export * from './utils';
-export * from './StreamedMessageText';

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

@@ -16,4 +16,4 @@ export type RenderTextOptions = {
     getRehypePlugins?: RenderTextPluginConfigurator;
     getRemarkPlugins?: RenderTextPluginConfigurator;
 };
-export declare const renderText: (text?: string, mentionedUsers?: UserResponse[], { allowedTagNames, customMarkDownRenderers, getRehypePlugins, getRemarkPlugins, }?: RenderTextOptions) => React.JSX.Element | null | undefined;
+export declare const renderText: (text?: string, mentionedUsers?: UserResponse[], { allowedTagNames, customMarkDownRenderers, getRehypePlugins, getRemarkPlugins, }?: RenderTextOptions) => React.JSX.Element | null;

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

@@ -83,7 +83,7 @@ export const renderText = (text, mentionedUsers, { allowedTagNames = defaultAllo
                 return strippedHref.includes(strippedText) || strippedText.includes(strippedHref);
             });
         if (noParsingNeeded.length > 0 || linkIsInBlock)
-            return;
+            continue;
         try {
             // special case for mentions:
             // it could happen that a user's name matches with an e-mail format pattern.

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

@@ -4,12 +4,14 @@ import type { UnsupportedAttachmentPreviewProps } from './UnsupportedAttachmentP
 import type { VoiceRecordingPreviewProps } from './VoiceRecordingPreview';
 import type { FileAttachmentPreviewProps } from './FileAttachmentPreview';
 import type { ImageAttachmentPreviewProps } from './ImageAttachmentPreview';
+import { type GeolocationPreviewProps } from './GeolocationPreview';
 export type AttachmentPreviewListProps = {
     AudioAttachmentPreview?: ComponentType<FileAttachmentPreviewProps>;
     FileAttachmentPreview?: ComponentType<FileAttachmentPreviewProps>;
+    GeolocationPreview?: ComponentType<GeolocationPreviewProps>;
     ImageAttachmentPreview?: ComponentType<ImageAttachmentPreviewProps>;
     UnsupportedAttachmentPreview?: ComponentType<UnsupportedAttachmentPreviewProps>;
     VideoAttachmentPreview?: ComponentType<FileAttachmentPreviewProps>;
     VoiceRecordingPreview?: ComponentType<VoiceRecordingPreviewProps>;
 };
-export declare const AttachmentPreviewList: ({ AudioAttachmentPreview, FileAttachmentPreview, ImageAttachmentPreview, UnsupportedAttachmentPreview, VideoAttachmentPreview, VoiceRecordingPreview, }: AttachmentPreviewListProps) => React.JSX.Element | null;
+export declare const AttachmentPreviewList: ({ AudioAttachmentPreview, FileAttachmentPreview, GeolocationPreview, ImageAttachmentPreview, UnsupportedAttachmentPreview, VideoAttachmentPreview, VoiceRecordingPreview, }: AttachmentPreviewListProps) => React.JSX.Element | null;

package/dist/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.js

@@ -4,34 +4,43 @@ import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview } from
 import { VoiceRecordingPreview as DefaultVoiceRecordingPreview } from './VoiceRecordingPreview';
 import { FileAttachmentPreview as DefaultFilePreview } from './FileAttachmentPreview';
 import { ImageAttachmentPreview as DefaultImagePreview } from './ImageAttachmentPreview';
-import { useAttachmentManagerState, useMessageComposer } from '../hooks';
-export const AttachmentPreviewList = ({ AudioAttachmentPreview = DefaultFilePreview, FileAttachmentPreview = DefaultFilePreview, ImageAttachmentPreview = DefaultImagePreview, UnsupportedAttachmentPreview = DefaultUnknownAttachmentPreview, VideoAttachmentPreview = DefaultFilePreview, VoiceRecordingPreview = DefaultVoiceRecordingPreview, }) => {
+import { useAttachmentsForPreview, useMessageComposer } from '../hooks';
+import { GeolocationPreview as DefaultGeolocationPreview, } from './GeolocationPreview';
+export const AttachmentPreviewList = ({ AudioAttachmentPreview = DefaultFilePreview, FileAttachmentPreview = DefaultFilePreview, GeolocationPreview = DefaultGeolocationPreview, ImageAttachmentPreview = DefaultImagePreview, UnsupportedAttachmentPreview = DefaultUnknownAttachmentPreview, VideoAttachmentPreview = DefaultFilePreview, VoiceRecordingPreview = DefaultVoiceRecordingPreview, }) => {
     const messageComposer = useMessageComposer();
-    const { attachments } = useAttachmentManagerState();
-    if (!attachments.length)
+    // todo: we could also allow to attach poll to a message composition
+    const { attachments, location } = useAttachmentsForPreview();
+    if (!attachments.length && !location)
         return null;
     return (React.createElement("div", { className: 'str-chat__attachment-preview-list' },
-        React.createElement("div", { className: 'str-chat__attachment-list-scroll-container', "data-testid": 'attachment-list-scroll-container' }, attachments.map((attachment) => {
-            if (isScrapedContent(attachment))
+        React.createElement("div", { className: 'str-chat__attachment-list-scroll-container', "data-testid": 'attachment-list-scroll-container' },
+            location && (React.createElement(GeolocationPreview, { location: location, 
+                // It is not possible to nullify shared_location field so we do not show a preview when editing
+                // to prevent a user from wanting to remove the location
+                remove: messageComposer.editedMessage
+                    ? undefined
+                    : messageComposer.locationComposer.initState })),
+            attachments.map((attachment) => {
+                if (isScrapedContent(attachment))
+                    return null;
+                if (isLocalVoiceRecordingAttachment(attachment)) {
+                    return (React.createElement(VoiceRecordingPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
+                }
+                else if (isLocalAudioAttachment(attachment)) {
+                    return (React.createElement(AudioAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
+                }
+                else if (isLocalVideoAttachment(attachment)) {
+                    return (React.createElement(VideoAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
+                }
+                else if (isLocalImageAttachment(attachment)) {
+                    return (React.createElement(ImageAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.image_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
+                }
+                else if (isLocalFileAttachment(attachment)) {
+                    return (React.createElement(FileAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
+                }
+                else if (isLocalAttachment(attachment)) {
+                    return (React.createElement(UnsupportedAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
+                }
                 return null;
-            if (isLocalVoiceRecordingAttachment(attachment)) {
-                return (React.createElement(VoiceRecordingPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
-            }
-            else if (isLocalAudioAttachment(attachment)) {
-                return (React.createElement(AudioAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
-            }
-            else if (isLocalVideoAttachment(attachment)) {
-                return (React.createElement(VideoAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
-            }
-            else if (isLocalImageAttachment(attachment)) {
-                return (React.createElement(ImageAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.image_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
-            }
-            else if (isLocalFileAttachment(attachment)) {
-                return (React.createElement(FileAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
-            }
-            else if (isLocalAttachment(attachment)) {
-                return (React.createElement(UnsupportedAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
-            }
-            return null;
-        }))));
+            }))));
 };

package/dist/components/MessageInput/AttachmentPreviewList/GeolocationPreview.d.ts

@@ -0,0 +1,13 @@
+import type { LiveLocationPreview, StaticLocationPreview } from 'stream-chat';
+import type { ComponentType } from 'react';
+import React from 'react';
+type GeolocationPreviewImageProps = {
+    location: StaticLocationPreview | LiveLocationPreview;
+};
+export type GeolocationPreviewProps = {
+    location: StaticLocationPreview | LiveLocationPreview;
+    PreviewImage?: ComponentType<GeolocationPreviewImageProps>;
+    remove?: () => void;
+};
+export declare const GeolocationPreview: ({ location, PreviewImage, remove, }: GeolocationPreviewProps) => React.JSX.Element;
+export {};

package/dist/components/MessageInput/AttachmentPreviewList/GeolocationPreview.js

@@ -0,0 +1,25 @@
+import { CloseIcon } from '../icons';
+import React from 'react';
+import { useTranslationContext } from '../../../context';
+import { GeolocationIcon } from '../../Attachment/icons';
+const GeolocationPreviewImage = () => (React.createElement("div", { className: 'str-chat__location-preview-image' },
+    React.createElement(GeolocationIcon, null)));
+export const GeolocationPreview = ({ location, PreviewImage = GeolocationPreviewImage, remove, }) => {
+    const { t } = useTranslationContext();
+    return (React.createElement("div", { className: 'str-chat__location-preview', "data-testid": 'location-preview' },
+        React.createElement(PreviewImage, { location: location }),
+        remove && (React.createElement("button", { "aria-label": t('aria/Remove location attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'location-preview-item-delete-button', onClick: remove },
+            React.createElement(CloseIcon, null))),
+        React.createElement("div", { className: 'str-chat__attachment-preview-metadata' }, location.durationMs ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: 'str-chat__attachment-preview-title', title: t('Shared live location') }, t('Live location')),
+            React.createElement("div", { className: 'str-chat__attachment-preview-subtitle' }, t('Live for {{duration}}', {
+                duration: t('duration/Share Location', {
+                    milliseconds: location.durationMs,
+                }),
+            })))) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: 'str-chat__attachment-preview-title', title: t('Current location') }, t('Current location')),
+            React.createElement("div", { className: 'str-chat__attachment-preview-subtitle' },
+                location.latitude,
+                ", ",
+                location.longitude))))));
+};

package/dist/components/MessageInput/AttachmentPreviewList/index.d.ts

@@ -1,5 +1,6 @@
 export * from './AttachmentPreviewList';
 export type { FileAttachmentPreviewProps } from './FileAttachmentPreview';
+export type { GeolocationPreviewProps } from './GeolocationPreview';
 export type { ImageAttachmentPreviewProps } from './ImageAttachmentPreview';
 export type { UploadAttachmentPreviewProps as AttachmentPreviewProps } from './types';
 export type { UnsupportedAttachmentPreviewProps } from './UnsupportedAttachmentPreview';

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

@@ -9,11 +9,12 @@ export type AttachmentSelectorActionProps = {
 };
 export type AttachmentSelectorAction = {
     ActionButton: React.ComponentType<AttachmentSelectorActionProps>;
-    type: 'uploadFile' | 'createPoll' | (string & {});
+    type: 'uploadFile' | 'createPoll' | 'addLocation' | (string & {});
     ModalContent?: React.ComponentType<AttachmentSelectorModalContentProps>;
 };
 export declare const DefaultAttachmentSelectorComponents: {
     File({ closeMenu }: AttachmentSelectorActionProps): React.JSX.Element;
+    Location({ closeMenu, openModalForAction }: AttachmentSelectorActionProps): React.JSX.Element;
     Poll({ closeMenu, openModalForAction }: AttachmentSelectorActionProps): React.JSX.Element;
 };
 export declare const defaultAttachmentSelectorActionSet: AttachmentSelectorAction[];

package/dist/components/MessageInput/AttachmentSelector.js

@@ -5,12 +5,15 @@ import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
 import { DialogMenuButton } from '../Dialog/DialogMenu';
 import { Modal } from '../Modal';
+import { ShareLocationDialog as DefaultLocationDialog } from '../Location';
 import { PollCreationDialog as DefaultPollCreationDialog } from '../Poll';
 import { Portal } from '../Portal/Portal';
 import { UploadFileInput } from '../ReactFileUtilities';
-import { useChannelStateContext, useComponentContext, useMessageInputContext, useTranslationContext, } from '../../context';
+import { useChannelStateContext, useComponentContext, useTranslationContext, } from '../../context';
 import { AttachmentSelectorContextProvider, useAttachmentSelectorContext, } from '../../context/AttachmentSelectorContext';
 import { useStableId } from '../UtilityComponents/useStableId';
+import clsx from 'clsx';
+import { useMessageComposer } from './hooks';
 export const SimpleAttachmentSelector = () => {
     const { AttachmentSelectorInitiationButtonContents, FileUploadIcon = DefaultUploadIcon, } = useComponentContext();
     const inputRef = useRef(null);
@@ -55,6 +58,13 @@ export const DefaultAttachmentSelectorComponents = {
                 closeMenu();
             } }, t('File')));
     },
+    Location({ closeMenu, openModalForAction }) {
+        const { t } = useTranslationContext();
+        return (React.createElement(DialogMenuButton, { className: 'str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__add-location-button', onClick: () => {
+                openModalForAction('addLocation');
+                closeMenu();
+            } }, t('Location')));
+    },
     Poll({ closeMenu, openModalForAction }) {
         const { t } = useTranslationContext();
         return (React.createElement(DialogMenuButton, { className: 'str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button', onClick: () => {
@@ -69,33 +79,42 @@ export const defaultAttachmentSelectorActionSet = [
         ActionButton: DefaultAttachmentSelectorComponents.Poll,
         type: 'createPoll',
     },
+    {
+        ActionButton: DefaultAttachmentSelectorComponents.Location,
+        type: 'addLocation',
+    },
 ];
 const useAttachmentSelectorActionsFiltered = (original) => {
-    const { PollCreationDialog = DefaultPollCreationDialog } = useComponentContext();
-    const { channelCapabilities, channelConfig } = useChannelStateContext();
-    const { isThreadInput } = useMessageInputContext();
+    const { PollCreationDialog = DefaultPollCreationDialog, ShareLocationDialog = DefaultLocationDialog, } = useComponentContext();
+    const { channelCapabilities } = useChannelStateContext();
+    const messageComposer = useMessageComposer();
     return original
         .filter((action) => {
-        if (action.type === 'uploadFile' && !channelCapabilities['upload-file'])
-            return false;
-        if (action.type === 'createPoll' &&
-            (!channelConfig?.polls || isThreadInput || !channelCapabilities['send-poll']))
-            return false;
+        if (action.type === 'uploadFile')
+            return channelCapabilities['upload-file'];
+        if (action.type === 'createPoll')
+            return channelCapabilities['send-poll'] && !messageComposer.threadId;
+        if (action.type === 'addLocation') {
+            return messageComposer.config.location.enabled && !messageComposer.threadId;
+        }
         return true;
     })
         .map((action) => {
         if (action.type === 'createPoll' && !action.ModalContent) {
             return { ...action, ModalContent: PollCreationDialog };
         }
+        if (action.type === 'addLocation' && !action.ModalContent) {
+            return { ...action, ModalContent: ShareLocationDialog };
+        }
         return action;
     });
 };
 export const AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttachmentSelectorActionSet, getModalPortalDestination, }) => {
     const { t } = useTranslationContext();
     const { channelCapabilities } = useChannelStateContext();
-    const { isThreadInput } = useMessageInputContext();
+    const messageComposer = useMessageComposer();
     const actions = useAttachmentSelectorActionsFiltered(attachmentSelectorActionSet);
-    const menuDialogId = `attachment-actions-menu${isThreadInput ? '-thread' : ''}`;
+    const menuDialogId = `attachment-actions-menu${messageComposer.threadId ? '-thread' : ''}`;
     const menuDialog = useDialog({ id: menuDialogId });
     const menuDialogIsOpen = useDialogIsOpen(menuDialogId);
     const [modalContentAction, setModalContentActionAction] = useState();
@@ -123,5 +142,8 @@ export const AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttach
             React.createElement(DialogAnchor, { id: menuDialogId, placement: 'top-start', referenceElement: menuButtonRef.current, tabIndex: -1, trapFocus: true },
                 React.createElement("div", { className: 'str-chat__attachment-selector-actions-menu str-chat__dialog-menu', "data-testid": 'attachment-selector-actions-menu' }, actions.map(({ ActionButton, type }) => (React.createElement(ActionButton, { closeMenu: menuDialog.close, key: `attachment-selector-item-${type}`, openModalForAction: openModal }))))),
             React.createElement(Portal, { getPortalDestination: getModalPortalDestination ?? getDefaultPortalDestination, isOpen: modalIsOpen },
-                React.createElement(Modal, { className: 'str-chat__create-poll-modal', onClose: closeModal, open: modalIsOpen }, ModalContent && React.createElement(ModalContent, { close: closeModal }))))));
+                React.createElement(Modal, { className: clsx({
+                        'str-chat__create-poll-modal': modalContentAction?.type === 'createPoll',
+                        'str-chat__share-location-modal': modalContentAction?.type === 'addLocation',
+                    }), onClose: closeModal, open: modalIsOpen }, ModalContent && React.createElement(ModalContent, { close: closeModal }))))));
 };

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

@@ -40,7 +40,9 @@ export type MessageInputProps = {
     hideSendButton?: boolean;
     /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
     Input?: React.ComponentType<MessageInputProps>;
-    /** Signals that the MessageInput is rendered in a message thread (Thread component) */
+    /** @deprecated use messageComposer.threadId to indicate, whether the message is composed within a thread context
+     * Signals that the MessageInput is rendered in a message thread (Thread component)
+     */
     isThreadInput?: boolean;
     /** Max number of rows the underlying `textarea` component is allowed to grow */
     maxRows?: number;

package/dist/components/MessageInput/MessageInput.js

@@ -31,11 +31,14 @@ const MessageInputProvider = (props) => {
             !messageComposer.config.drafts.enabled)
             return;
         // get draft data for legacy thead composer
-        messageComposer.channel.getDraft({ parent_id: threadId }).then(({ draft }) => {
+        messageComposer.channel
+            .getDraft({ parent_id: threadId })
+            .then(({ draft }) => {
             if (draft) {
                 messageComposer.initState({ composition: draft });
             }
-        });
+        })
+            .catch(console.error);
     }, [messageComposer]);
     useRegisterDropHandlers();
     return (React.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children));
@@ -43,9 +46,10 @@ const MessageInputProvider = (props) => {
 const UnMemoizedMessageInput = (props) => {
     const { Input: PropInput } = props;
     const { Input: ContextInput } = useComponentContext('MessageInput');
+    const messageComposer = useMessageComposer();
     const id = useStableId();
     const Input = PropInput || ContextInput || MessageInputFlat;
-    const dialogManagerId = props.isThreadInput
+    const dialogManagerId = messageComposer.threadId
         ? `message-input-dialog-manager-thread-${id}`
         : `message-input-dialog-manager-${id}`;
     return (React.createElement(DialogManagerProvider, { id: dialogManagerId },

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

@@ -1,4 +1,5 @@
 export * from './useAttachmentManagerState';
+export * from './useAttachmentsForPreview';
 export * from './useCanCreatePoll';
 export * from './useCooldownTimer';
 export * from './useMessageInputControls';

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

@@ -1,4 +1,5 @@
 export * from './useAttachmentManagerState';
+export * from './useAttachmentsForPreview';
 export * from './useCanCreatePoll';
 export * from './useCooldownTimer';
 export * from './useMessageInputControls';

package/dist/components/MessageInput/hooks/useAttachmentsForPreview.d.ts

@@ -0,0 +1,17 @@
+export declare const useAttachmentsForPreview: () => {
+    attachments: import("stream-chat").LocalAttachment[];
+    location: import("stream-chat").StaticLocationPayload | import("stream-chat").LiveLocationPreview | null;
+    poll: {
+        id: string;
+        max_votes_allowed: string;
+        name: string;
+        options: import("stream-chat").PollComposerOption[];
+        allow_answers?: boolean | undefined;
+        allow_user_suggested_options?: boolean | undefined;
+        description?: string | undefined;
+        enforce_unique_vote?: boolean | undefined;
+        is_closed?: boolean | undefined;
+        user_id?: string | undefined;
+        voting_visibility?: import("stream-chat").VotingVisibility | undefined;
+    };
+};

package/dist/components/MessageInput/hooks/useAttachmentsForPreview.js

@@ -0,0 +1,22 @@
+import { useMessageComposer } from './useMessageComposer';
+import { useStateStore } from '../../../store';
+const attachmentManagerStateSelector = (state) => ({
+    attachments: state.attachments,
+});
+const pollComposerStateSelector = (state) => ({
+    poll: state.data,
+});
+const locationComposerStateSelector = (state) => ({
+    location: state.location,
+});
+export const useAttachmentsForPreview = () => {
+    const { attachmentManager, locationComposer, pollComposer } = useMessageComposer();
+    const { attachments } = useStateStore(attachmentManager.state, attachmentManagerStateSelector);
+    const { poll } = useStateStore(pollComposer.state, pollComposerStateSelector);
+    const { location } = useStateStore(locationComposer.state, locationComposerStateSelector);
+    return {
+        attachments,
+        location,
+        poll,
+    };
+};

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

@@ -1,6 +1,6 @@
 export * from './AttachmentSelector';
 export { AttachmentPreviewList } from './AttachmentPreviewList';
-export type { AttachmentPreviewListProps, FileAttachmentPreviewProps, ImageAttachmentPreviewProps, AttachmentPreviewProps, UnsupportedAttachmentPreviewProps, VoiceRecordingPreviewProps, } from './AttachmentPreviewList';
+export type { AttachmentPreviewListProps, FileAttachmentPreviewProps, GeolocationPreviewProps, ImageAttachmentPreviewProps, AttachmentPreviewProps, UnsupportedAttachmentPreviewProps, VoiceRecordingPreviewProps, } from './AttachmentPreviewList';
 export * from './CooldownTimer';
 export * from './EditMessageForm';
 export * from './hooks';

package/dist/components/Modal/Modal.d.ts

@@ -1,11 +1,16 @@
-import type { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import React from 'react';
+type CloseEvent = KeyboardEvent | React.KeyboardEvent | React.MouseEvent<HTMLButtonElement | HTMLDivElement>;
+export type ModalCloseSource = 'overlay' | 'button' | 'escape';
 export type ModalProps = {
     /** If true, modal is opened or visible. */
     open: boolean;
     /** Custom class to be applied to the modal root div */
     className?: string;
     /** Callback handler for closing of modal. */
-    onClose?: (event: React.KeyboardEvent | React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    onClose?: (event: CloseEvent) => void;
+    /** Optional handler to intercept closing logic. Return false to prevent onClose. */
+    onCloseAttempt?: (source: ModalCloseSource, event: CloseEvent) => boolean;
 };
-export declare const Modal: ({ children, className, onClose, open, }: PropsWithChildren<ModalProps>) => React.JSX.Element | null;
+export declare const Modal: ({ children, className, onClose, onCloseAttempt, open, }: PropsWithChildren<ModalProps>) => React.JSX.Element | null;
+export {};

package/dist/components/Modal/Modal.js

@@ -1,34 +1,45 @@
 import clsx from 'clsx';
+import { useCallback } from 'react';
 import React, { useEffect, useRef } from 'react';
 import { FocusScope } from '@react-aria/focus';
 import { CloseIconRound } from './icons';
 import { useTranslationContext } from '../../context';
-export const Modal = ({ children, className, onClose, open, }) => {
+export const Modal = ({ children, className, onClose, onCloseAttempt, open, }) => {
     const { t } = useTranslationContext('Modal');
     const innerRef = useRef(null);
-    const closeRef = useRef(null);
+    const closeButtonRef = useRef(null);
+    const maybeClose = useCallback((source, event) => {
+        const allow = onCloseAttempt?.(source, event);
+        if (allow !== false) {
+            onClose?.(event);
+        }
+    }, [onClose, onCloseAttempt]);
     const handleClick = (event) => {
         const target = event.target;
-        if (!innerRef.current || !closeRef.current)
+        if (!innerRef.current || !closeButtonRef.current)
             return;
-        if (!innerRef.current.contains(target) || closeRef.current.contains(target))
-            onClose?.(event);
+        if (closeButtonRef.current.contains(target)) {
+            maybeClose('button', event);
+        }
+        else if (!innerRef.current.contains(target)) {
+            maybeClose('overlay', event);
+        }
     };
     useEffect(() => {
         if (!open)
             return;
         const handleKeyDown = (event) => {
             if (event.key === 'Escape')
-                onClose?.(event);
+                maybeClose('escape', event);
         };
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [onClose, open]);
+    }, [maybeClose, open]);
     if (!open)
         return null;
     return (React.createElement("div", { className: clsx('str-chat__modal str-chat__modal--open', className), onClick: handleClick },
         React.createElement(FocusScope, { autoFocus: true, contain: true },
-            React.createElement("button", { className: 'str-chat__modal__close-button', ref: closeRef, title: t('Close') },
+            React.createElement("button", { className: 'str-chat__modal__close-button', ref: closeButtonRef, title: t('Close') },
                 React.createElement(CloseIconRound, null)),
             React.createElement("div", { className: 'str-chat__modal__inner str-chat-react__modal__inner', ref: innerRef }, children))));
 };

package/dist/components/Poll/PollActions/AddCommentForm.js

@@ -19,6 +19,14 @@ export const AddCommentForm = ({ close, messageId }) => {
                     type: 'text',
                     value: ownAnswer?.answer_text ?? '',
                 },
+                validator: (value) => {
+                    const valueString = typeof value !== 'undefined' ? value.toString() : value;
+                    const trimmedValue = valueString?.trim();
+                    if (!trimmedValue) {
+                        return new Error(t('This field cannot be empty or contain only spaces'));
+                    }
+                    return;
+                },
             },
         }, onSubmit: async (value) => {
             await poll.addAnswer(value.comment, messageId);

package/dist/components/Poll/PollActions/SuggestPollOptionForm.js

@@ -21,9 +21,12 @@ export const SuggestPollOptionForm = ({ close, messageId, }) => {
                     value: '',
                 },
                 validator: (value) => {
-                    if (!value)
-                        return;
-                    const existingOption = options.find((option) => option.text === value.trim());
+                    const valueString = typeof value !== 'undefined' ? value.toString() : value;
+                    const trimmedValue = valueString?.trim();
+                    if (!trimmedValue) {
+                        return new Error(t('This field cannot be empty or contain only spaces'));
+                    }
+                    const existingOption = options.find((option) => option.text === trimmedValue);
                     if (existingOption) {
                         return new Error(t('Option already exists'));
                     }

package/dist/components/Poll/PollCreationDialog/PollCreationDialogControls.js

@@ -15,7 +15,10 @@ export const PollCreationDialogControls = ({ close, }) => {
                 messageComposer
                     .createPoll()
                     .then(() => handleSubmitMessage())
-                    .then(close)
+                    .then(() => {
+                    messageComposer.pollComposer.initState();
+                    close();
+                })
                     .catch(console.error);
             }, type: 'submit' }, t('Create'))));
 };