stream-chat-react 13.2.2 → 13.3.0

package/dist/components/Attachment/Attachment.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ReactPlayerProps } from 'react-player';
-import type { Attachment as StreamAttachment } from 'stream-chat';
+import type { SharedLocationResponse, Attachment as StreamAttachment } from 'stream-chat';
 import type { AttachmentActionsProps } from './AttachmentActions';
 import type { AudioProps } from './Audio';
 import type { VoiceRecordingProps } from './VoiceRecording';
@@ -9,10 +9,11 @@ import type { FileAttachmentProps } from './FileAttachment';
 import type { GalleryProps, ImageProps } from '../Gallery';
 import type { UnsupportedAttachmentProps } from './UnsupportedAttachment';
 import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
-export declare const ATTACHMENT_GROUPS_ORDER: readonly ["card", "gallery", "image", "media", "audio", "voiceRecording", "file", "unsupported"];
+import type { GeolocationProps } from './Geolocation';
+export declare const ATTACHMENT_GROUPS_ORDER: readonly ["card", "gallery", "image", "media", "audio", "voiceRecording", "file", "geolocation", "unsupported"];
 export type AttachmentProps = {
     /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/
-    attachments: StreamAttachment[];
+    attachments: (StreamAttachment | SharedLocationResponse)[];
     /**	The handler function to call when an action is performed on an attachment, examples include canceling a \/giphy command or shuffling the results. */
     actionHandler?: ActionHandlerReturnType;
     /** Custom UI component for displaying attachment actions, defaults to and accepts same props as: [AttachmentActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/AttachmentActions.tsx) */
@@ -25,6 +26,7 @@ export type AttachmentProps = {
     File?: React.ComponentType<FileAttachmentProps>;
     /** Custom UI component for displaying a gallery of image type attachments, defaults to and accepts same props as: [Gallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Gallery.tsx) */
     Gallery?: React.ComponentType<GalleryProps>;
+    Geolocation?: React.ComponentType<GeolocationProps>;
     /** Custom UI component for displaying an image type attachment, defaults to and accepts same props as: [Image](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Image.tsx) */
     Image?: React.ComponentType<ImageProps>;
     /** Optional flag to signal that an attachment is a displayed as a part of a quoted message */

package/dist/components/Attachment/Attachment.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
-import { isAudioAttachment, isFileAttachment, isImageAttachment, isScrapedContent, isVideoAttachment, isVoiceRecordingAttachment, } from 'stream-chat';
-import { AudioContainer, CardContainer, FileContainer, GalleryContainer, ImageContainer, MediaContainer, UnsupportedAttachmentContainer, VoiceRecordingContainer, } from './AttachmentContainer';
+import { isAudioAttachment, isFileAttachment, isImageAttachment, isScrapedContent, isSharedLocationResponse, isVideoAttachment, isVoiceRecordingAttachment, } from 'stream-chat';
+import { AudioContainer, CardContainer, FileContainer, GalleryContainer, GeolocationContainer, ImageContainer, MediaContainer, UnsupportedAttachmentContainer, VoiceRecordingContainer, } from './AttachmentContainer';
 import { SUPPORTED_VIDEO_FORMATS } from './utils';
 const CONTAINER_MAP = {
     audio: AudioContainer,
@@ -18,6 +18,7 @@ export const ATTACHMENT_GROUPS_ORDER = [
     'audio',
     'voiceRecording',
     'file',
+    'geolocation',
     'unsupported',
 ];
 /**
@@ -35,9 +36,14 @@ const renderGroupedAttachments = ({ attachments, ...rest }) => {
     const containers = attachments
         .filter((attachment) => !isImageAttachment(attachment))
         .reduce((typeMap, attachment) => {
-        const attachmentType = getAttachmentType(attachment);
-        const Container = CONTAINER_MAP[attachmentType];
-        typeMap[attachmentType].push(React.createElement(Container, { key: `${attachmentType}-${typeMap[attachmentType].length}`, ...rest, attachment: attachment }));
+        if (isSharedLocationResponse(attachment)) {
+            typeMap.geolocation.push(React.createElement(GeolocationContainer, { ...rest, key: 'geolocation-container', location: attachment }));
+        }
+        else {
+            const attachmentType = getAttachmentType(attachment);
+            const Container = CONTAINER_MAP[attachmentType];
+            typeMap[attachmentType].push(React.createElement(Container, { key: `${attachmentType}-${typeMap[attachmentType].length}`, ...rest, attachment: attachment }));
+        }
         return typeMap;
     }, {
         audio: [],
@@ -50,6 +56,7 @@ const renderGroupedAttachments = ({ attachments, ...rest }) => {
         image: [],
         // eslint-disable-next-line sort-keys
         gallery: [],
+        geolocation: [],
         voiceRecording: [],
     });
     if (uploadedImages.length > 1) {

package/dist/components/Attachment/AttachmentContainer.d.ts

@@ -1,9 +1,9 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { Attachment } from 'stream-chat';
-import type { AttachmentComponentType, GalleryAttachment, RenderAttachmentProps, RenderGalleryProps } from './utils';
+import type { Attachment, SharedLocationResponse } from 'stream-chat';
+import type { AttachmentComponentType, GalleryAttachment, GeolocationContainerProps, RenderAttachmentProps, RenderGalleryProps } from './utils';
 export type AttachmentContainerProps = {
-    attachment: Attachment | GalleryAttachment;
+    attachment: Attachment | GalleryAttachment | SharedLocationResponse;
     componentType: AttachmentComponentType;
 };
 export declare const AttachmentWithinContainer: ({ attachment, children, componentType, }: PropsWithChildren<AttachmentContainerProps>) => React.JSX.Element;
@@ -15,4 +15,5 @@ export declare const FileContainer: ({ attachment, File, }: RenderAttachmentProp
 export declare const AudioContainer: ({ attachment, Audio, }: RenderAttachmentProps) => React.JSX.Element;
 export declare const VoiceRecordingContainer: ({ attachment, isQuoted, VoiceRecording, }: RenderAttachmentProps) => React.JSX.Element;
 export declare const MediaContainer: (props: RenderAttachmentProps) => React.JSX.Element;
+export declare const GeolocationContainer: ({ Geolocation, location, }: GeolocationContainerProps) => React.JSX.Element;
 export declare const UnsupportedAttachmentContainer: ({ attachment, UnsupportedAttachment, }: RenderAttachmentProps) => React.JSX.Element;

package/dist/components/Attachment/AttachmentContainer.js

@@ -2,19 +2,21 @@ import React, { useLayoutEffect, useRef, useState } from 'react';
 import ReactPlayer from 'react-player';
 import clsx from 'clsx';
 import * as linkify from 'linkifyjs';
+import { isSharedLocationResponse } from 'stream-chat';
 import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
 import { Audio as DefaultAudio } from './Audio';
 import { VoiceRecording as DefaultVoiceRecording } from './VoiceRecording';
 import { Gallery as DefaultGallery, ImageComponent as DefaultImage } from '../Gallery';
 import { Card as DefaultCard } from './Card';
 import { FileAttachment as DefaultFile } from './FileAttachment';
+import { Geolocation as DefaultGeolocation } from './Geolocation';
 import { UnsupportedAttachment as DefaultUnsupportedAttachment } from './UnsupportedAttachment';
 import { isGalleryAttachmentType, isSvgAttachment } from './utils';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 export const AttachmentWithinContainer = ({ attachment, children, componentType, }) => {
     const isGAT = isGalleryAttachmentType(attachment);
     let extra = '';
-    if (!isGAT) {
+    if (!isGAT && !isSharedLocationResponse(attachment)) {
         extra =
             componentType === 'card' && !attachment?.image_url && !attachment?.thumb_url
                 ? 'no-image'
@@ -57,17 +59,21 @@ export const GalleryContainer = ({ attachment, Gallery = DefaultGallery, }) => {
     const { imageAttachmentSizeHandler } = useChannelStateContext();
     const [attachmentConfigurations, setAttachmentConfigurations] = useState([]);
     useLayoutEffect(() => {
-        if (imageElements.current &&
-            imageElements.current.every((element) => !!element) &&
-            imageAttachmentSizeHandler) {
-            const newConfigurations = [];
-            imageElements.current.forEach((element, i) => {
-                const config = imageAttachmentSizeHandler(attachment.images[i], element);
-                newConfigurations.push(config);
-            });
-            setAttachmentConfigurations(newConfigurations);
+        if (!imageElements.current || !imageAttachmentSizeHandler)
+            return;
+        const newConfigurations = [];
+        const nonNullImageElements = imageElements.current.filter((e) => !!e);
+        if (nonNullImageElements.length < imageElements.current.length) {
+            imageElements.current = nonNullImageElements;
         }
-    }, [imageElements, imageAttachmentSizeHandler, attachment]);
+        imageElements.current.forEach((element, i) => {
+            if (!element)
+                return;
+            const config = imageAttachmentSizeHandler(attachment.images[i], element);
+            newConfigurations.push(config);
+        });
+        setAttachmentConfigurations(newConfigurations);
+    }, [imageAttachmentSizeHandler, attachment]);
     const images = attachment.images.map((image, i) => ({
         ...image,
         previewUrl: attachmentConfigurations[i]?.url || 'about:blank',
@@ -146,5 +152,7 @@ export const MediaContainer = (props) => {
             content,
             React.createElement(AttachmentActionsContainer, { ...props })))) : (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType }, content));
 };
+export const GeolocationContainer = ({ Geolocation = DefaultGeolocation, location, }) => (React.createElement(AttachmentWithinContainer, { attachment: location, componentType: 'geolocation' },
+    React.createElement(Geolocation, { location: location })));
 export const UnsupportedAttachmentContainer = ({ attachment, UnsupportedAttachment = DefaultUnsupportedAttachment, }) => (React.createElement(React.Fragment, null,
     React.createElement(UnsupportedAttachment, { attachment: attachment })));

package/dist/components/Attachment/Geolocation.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { Coords, SharedLocationResponse } from 'stream-chat';
+export type GeolocationMapProps = Coords;
+export type GeolocationProps = {
+    location: SharedLocationResponse;
+    GeolocationAttachmentMapPlaceholder?: ComponentType<GeolocationAttachmentMapPlaceholderProps>;
+    GeolocationMap?: ComponentType<GeolocationMapProps>;
+};
+export declare const Geolocation: ({ GeolocationAttachmentMapPlaceholder, GeolocationMap, location, }: GeolocationProps) => React.JSX.Element;
+export type GeolocationAttachmentMapPlaceholderProps = {
+    location: SharedLocationResponse;
+};

package/dist/components/Attachment/Geolocation.js

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useRef, useState } from 'react';
+import React from 'react';
+import { useChatContext, useTranslationContext } from '../../context';
+import { ExternalLinkIcon, GeolocationIcon } from './icons';
+export const Geolocation = ({ GeolocationAttachmentMapPlaceholder = DefaultGeolocationAttachmentMapPlaceholder, GeolocationMap, location, }) => {
+    const { channel, client } = useChatContext();
+    const { t } = useTranslationContext();
+    const [stoppedSharing, setStoppedSharing] = useState(!!location.end_at && new Date(location.end_at).getTime() < new Date().getTime());
+    const timeoutRef = useRef(undefined);
+    const isMyLocation = location.user_id === client.userID;
+    const isLiveLocation = !!location.end_at;
+    useEffect(() => {
+        if (!location.end_at)
+            return;
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setStoppedSharing(true), new Date(location.end_at).getTime() - Date.now());
+    }, [location.end_at]);
+    return (React.createElement("div", { className: 'str-chat__message-attachment-geolocation', "data-testid": 'attachment-geolocation' },
+        React.createElement("div", { className: 'str-chat__message-attachment-geolocation__location-preview' }, GeolocationMap ? (React.createElement(GeolocationMap, { latitude: location.latitude, longitude: location.longitude })) : (React.createElement(GeolocationAttachmentMapPlaceholder, { location: location }))),
+        React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status' }, isLiveLocation ? (stoppedSharing ? (t('Location sharing ended')) : isMyLocation ? (React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active' },
+            React.createElement("button", { className: 'str-chat__message-attachment-geolocation__stop-sharing-button', onClick: () => channel?.stopLiveLocationSharing(location) }, t('Stop sharing')),
+            React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active-until' }, t('Live until {{ timestamp }}', {
+                timestamp: t('timestamp/LiveLocation', { timestamp: location.end_at }),
+            })))) : (React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active' },
+            React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active-status' }, t('Live location')),
+            React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active-until' }, t('Live until {{ timestamp }}', {
+                timestamp: t('timestamp/LiveLocation', { timestamp: location.end_at }),
+            }))))) : (t('Current location')))));
+};
+const DefaultGeolocationAttachmentMapPlaceholder = ({ location, }) => (React.createElement("div", { className: 'str-chat__message-attachment-geolocation__placeholder', "data-testid": 'geolocation-attachment-map-placeholder' },
+    React.createElement(GeolocationIcon, null),
+    React.createElement("a", { className: 'str-chat__message-attachment-geolocation__placeholder-link', href: `https://maps.google.com?q=${[location.latitude, location.longitude].join()}`, rel: 'noreferrer', target: '_blank' },
+        React.createElement(ExternalLinkIcon, null))));

package/dist/components/Attachment/icons.d.ts

@@ -3,3 +3,5 @@ import type { IconProps } from '../../types/types';
 export declare const DownloadIcon: ({ className }: IconProps) => React.JSX.Element;
 export declare const PlayTriangleIcon: () => React.JSX.Element;
 export declare const PauseIcon: () => React.JSX.Element;
+export declare const GeolocationIcon: () => React.JSX.Element;
+export declare const ExternalLinkIcon: () => React.JSX.Element;

package/dist/components/Attachment/icons.js

@@ -5,3 +5,8 @@ export const PlayTriangleIcon = () => (React.createElement("svg", { fill: 'none'
     React.createElement("path", { d: 'M0.5 0V14L11.5 7L0.5 0Z', fill: '#080707' })));
 export const PauseIcon = () => (React.createElement("svg", { fill: 'none', viewBox: '0 0 12 14', xmlns: 'http://www.w3.org/2000/svg' },
     React.createElement("path", { d: 'M0 14H4V0H0V14ZM8 0V14H12V0H8Z', fill: '#080707' })));
+export const GeolocationIcon = () => (React.createElement("svg", { className: 'str-chat__message-geolocation__icon', fill: 'currentColor', viewBox: '0 0 255.856 255.856', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M127.928 38.8c-30.75 0-55.768 25.017-55.768 55.767s25.018 55.767 55.768 55.767 55.768-25.017 55.768-55.767S158.678 38.8 127.928 38.8zm0 96.533c-22.479 0-40.768-18.288-40.768-40.767S105.449 53.8 127.928 53.8s40.768 18.288 40.768 40.767-18.288 40.766-40.768 40.766z', strokeWidth: '60' }),
+    React.createElement("path", { d: 'M127.928 0C75.784 0 33.362 42.422 33.362 94.566c0 30.072 25.22 74.875 40.253 98.904 9.891 15.809 20.52 30.855 29.928 42.365 15.101 18.474 20.506 20.02 24.386 20.02 3.938 0 9.041-1.547 24.095-20.031 9.429-11.579 20.063-26.616 29.944-42.342 15.136-24.088 40.527-68.971 40.527-98.917C222.495 42.422 180.073 0 127.928 0zm43.641 181.803c-19.396 31.483-37.203 52.757-43.73 58.188-6.561-5.264-24.079-26.032-43.746-58.089-22.707-37.015-35.73-68.848-35.73-87.336C48.362 50.693 84.055 15 127.928 15s79.566 35.693 79.566 79.566c.001 18.382-13.094 50.178-35.925 87.237z' })));
+export const ExternalLinkIcon = () => (React.createElement("svg", { fill: 'currentColor', viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M12.586 2H10a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V3.414l-6.793 6.793a1 1 0 0 1-1.414-1.414L12.586 2zM6 1a1 1 0 1 1 0 2H3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h8.967a1 1 0 0 0 1-.99L13 9.99a1 1 0 1 1 2 .02l-.033 3.023a3 3 0 0 1-3 2.967H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h3z' })));

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

@@ -5,7 +5,9 @@ export * from './Audio';
 export * from './audioSampling';
 export * from './Card';
 export * from './components';
-export * from './UnsupportedAttachment';
 export * from './FileAttachment';
+export * from './Geolocation';
+export * from './UnsupportedAttachment';
 export * from './utils';
 export { useAudioController } from './hooks/useAudioController';
+export * from '../Location/hooks/useLiveLocationSharingManager';

package/dist/components/Attachment/index.js

@@ -5,7 +5,9 @@ export * from './Audio';
 export * from './audioSampling';
 export * from './Card';
 export * from './components';
-export * from './UnsupportedAttachment';
 export * from './FileAttachment';
+export * from './Geolocation';
+export * from './UnsupportedAttachment';
 export * from './utils';
 export { useAudioController } from './hooks/useAudioController';
+export * from '../Location/hooks/useLiveLocationSharingManager';

package/dist/components/Attachment/utils.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { Attachment } from 'stream-chat';
+import type { Attachment, SharedLocationResponse } from 'stream-chat';
 import type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';
 export declare const SUPPORTED_VIDEO_FORMATS: string[];
 export type AttachmentComponentType = (typeof ATTACHMENT_GROUPS_ORDER)[number];
@@ -14,6 +14,9 @@ export type RenderAttachmentProps = Omit<AttachmentProps, 'attachments'> & {
 export type RenderGalleryProps = Omit<AttachmentProps, 'attachments'> & {
     attachment: GalleryAttachment;
 };
+export type GeolocationContainerProps = Omit<AttachmentProps, 'attachments'> & {
+    location: SharedLocationResponse;
+};
 export declare const isGalleryAttachmentType: (attachment: Attachment | GalleryAttachment) => attachment is GalleryAttachment;
 export declare const isSvgAttachment: (attachment: Attachment) => boolean;
 export declare const divMod: (num: number, divisor: number) => number[];

package/dist/components/Channel/Channel.d.ts

@@ -5,7 +5,7 @@ import type { OnMentionAction } from './hooks/useMentionsHandlers';
 import type { LoadingErrorIndicatorProps } from '../Loading';
 import type { ComponentContextValue } from '../../context';
 import type { ChannelUnreadUiState, GiphyVersions, ImageAttachmentSizeHandler, VideoAttachmentSizeHandler } from '../../types/types';
-type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageIsThreadReplyInChannelButtonIndicator' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'ReminderNotification' | 'SendButton' | 'SendToChannelCheckbox' | 'StartRecordingAudioButton' | 'TextareaComposer' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
+type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'ShareLocationDialog' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageIsThreadReplyInChannelButtonIndicator' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'ReminderNotification' | 'SendButton' | 'SendToChannelCheckbox' | 'StartRecordingAudioButton' | 'TextareaComposer' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
 export type ChannelProps = ChannelPropsForwardedToComponentContext & {
     /** Custom handler function that runs when the active channel has unread messages and the app is running on a separate browser tab */
     activeUnreadHandler?: (unread: number, documentTitle: string) => void;

package/dist/components/Channel/Channel.js

@@ -759,6 +759,7 @@ const ChannelInner = (props) => {
         ReminderNotification: props.ReminderNotification,
         SendButton: props.SendButton,
         SendToChannelCheckbox: props.SendToChannelCheckbox,
+        ShareLocationDialog: props.ShareLocationDialog,
         StartRecordingAudioButton: props.StartRecordingAudioButton,
         StopAIGenerationButton: props.StopAIGenerationButton,
         StreamedMessageText: props.StreamedMessageText,
@@ -824,6 +825,7 @@ const ChannelInner = (props) => {
         props.ReminderNotification,
         props.SendButton,
         props.SendToChannelCheckbox,
+        props.ShareLocationDialog,
         props.StartRecordingAudioButton,
         props.StopAIGenerationButton,
         props.StreamedMessageText,

package/dist/components/ChannelPreview/utils.js

@@ -57,6 +57,9 @@ export const getLatestMessagePreview = (channel, t, userLanguage = 'en', isMessa
     if (latestMessage.attachments?.length) {
         return t('🏙 Attachment...');
     }
+    if (latestMessage.shared_location) {
+        return t('📍Shared location');
+    }
     return t('Empty message...');
 };
 export const getGroupChannelDisplayInfo = (channel) => {

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

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.2.2";
+        const version = "13.3.0";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/Dialog/DialogAnchor.d.ts

@@ -5,8 +5,9 @@ export interface DialogAnchorOptions {
     open: boolean;
     placement: Placement;
     referenceElement: HTMLElement | null;
+    allowFlip?: boolean;
 }
-export declare function useDialogAnchor<T extends HTMLElement>({ open, placement, referenceElement, }: DialogAnchorOptions): {
+export declare function useDialogAnchor<T extends HTMLElement>({ allowFlip, open, placement, referenceElement, }: DialogAnchorOptions): {
     attributes: {
         [key: string]: {
             [key: string]: string;
@@ -22,4 +23,4 @@ export type DialogAnchorProps = PropsWithChildren<Partial<DialogAnchorOptions>>
     focus?: boolean;
     trapFocus?: boolean;
 } & ComponentProps<'div'>;
-export declare const DialogAnchor: ({ children, className, focus, id, placement, referenceElement, tabIndex, trapFocus, ...restDivProps }: DialogAnchorProps) => React.JSX.Element | null;
+export declare const DialogAnchor: ({ allowFlip, children, className, focus, id, placement, referenceElement, tabIndex, trapFocus, ...restDivProps }: DialogAnchorProps) => React.JSX.Element | null;

package/dist/components/Dialog/DialogAnchor.js

@@ -4,10 +4,14 @@ import { FocusScope } from '@react-aria/focus';
 import { usePopper } from 'react-popper';
 import { DialogPortalEntry } from './DialogPortal';
 import { useDialog, useDialogIsOpen } from './hooks';
-export function useDialogAnchor({ open, placement, referenceElement, }) {
+export function useDialogAnchor({ allowFlip, open, placement, referenceElement, }) {
     const [popperElement, setPopperElement] = useState(null);
     const { attributes, styles, update } = usePopper(referenceElement, popperElement, {
         modifiers: [
+            {
+                enabled: !!allowFlip, // Prevent flipping
+                name: 'flip',
+            },
             {
                 name: 'eventListeners',
                 options: {
@@ -37,10 +41,11 @@ export function useDialogAnchor({ open, placement, referenceElement, }) {
         styles,
     };
 }
-export const DialogAnchor = ({ children, className, focus = true, id, placement = 'auto', referenceElement = null, tabIndex, trapFocus, ...restDivProps }) => {
+export const DialogAnchor = ({ allowFlip = true, children, className, focus = true, id, placement = 'auto', referenceElement = null, tabIndex, trapFocus, ...restDivProps }) => {
     const dialog = useDialog({ id });
     const open = useDialogIsOpen(id);
     const { attributes, setPopperElement, styles } = useDialogAnchor({
+        allowFlip,
         open,
         placement,
         referenceElement,

package/dist/components/Form/Dropdown.d.ts

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import type { Placement } from '@popperjs/core';
+type DropdownContextValue = {
+    close(): void;
+};
+export declare const useDropdownContext: () => DropdownContextValue;
+export type DropdownProps = PropsWithChildren<{
+    className?: string;
+    openButtonProps?: React.HTMLAttributes<HTMLButtonElement>;
+    placement?: Placement;
+}>;
+export declare const Dropdown: (props: DropdownProps) => React.JSX.Element;
+export {};

package/dist/components/Form/Dropdown.js

@@ -0,0 +1,49 @@
+import { useRef } from 'react';
+import { useEffect } from 'react';
+import React, { useState } from 'react';
+import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
+import { DialogManagerProvider, useTranslationContext } from '../../context';
+const DropdownContext = React.createContext({
+    close: () => null,
+});
+const DropdownContextProvider = ({ children, ...props }) => (React.createElement(DropdownContext.Provider, { value: props }, children));
+export const useDropdownContext = () => React.useContext(DropdownContext);
+export const Dropdown = (props) => {
+    const dropdownDialogId = `dropdown`;
+    return (React.createElement("div", { className: 'str-chat__dropdown' },
+        React.createElement(DialogManagerProvider, { id: dropdownDialogId },
+            React.createElement(DropdownInner, { ...props, dialogId: dropdownDialogId }))));
+};
+const DropdownInner = ({ children, dialogId, openButtonProps, placement = 'bottom', }) => {
+    const { t } = useTranslationContext();
+    const [openButton, setOpenButton] = useState(null);
+    const [dropdownWidth, setDropdownWidth] = useState('');
+    const dropdownRef = useRef(null);
+    const dialog = useDialog({ id: dialogId });
+    const dropdownDialogIsOpen = useDialogIsOpen(dialogId);
+    useEffect(() => {
+        if (!openButton || typeof ResizeObserver === 'undefined')
+            return;
+        let timeout;
+        const observer = new ResizeObserver(([button]) => {
+            if (timeout)
+                clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                const width = button.target.getBoundingClientRect().width + 'px';
+                if (!dropdownRef.current) {
+                    setDropdownWidth(width);
+                    return;
+                }
+                dropdownRef.current.style.width = width;
+            }, 100);
+        });
+        observer.observe(openButton);
+        return () => {
+            observer.disconnect();
+        };
+    }, [openButton]);
+    return (React.createElement(DropdownContextProvider, { close: dialog.close },
+        React.createElement("button", { "aria-expanded": dropdownDialogIsOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Menu'), className: 'str-chat__dropdown__open-button', "data-testid": 'dropdown-open-button', ...openButtonProps, onClick: () => dialog?.toggle(), ref: setOpenButton }),
+        React.createElement(DialogAnchor, { allowFlip: false, id: dialogId, placement: placement, referenceElement: openButton, tabIndex: -1, trapFocus: true },
+            React.createElement("div", { className: 'str-chat__dropdown__items', ref: dropdownRef, style: { width: dropdownWidth } }, children))));
+};

package/dist/components/Form/SwitchField.js

@@ -8,7 +8,9 @@ export const SwitchField = ({ children, ...props }) => {
         event.preventDefault();
         inputRef.current.click();
     };
-    return (React.createElement("div", { className: 'str-chat__form__field str-chat__form__switch-field' },
+    return (React.createElement("div", { className: clsx('str-chat__form__field str-chat__form__switch-field', {
+            'str-chat__form__field str-chat__form__switch-field--disabled': props.disabled,
+        }) },
         React.createElement("label", null,
             React.createElement("div", { className: 'str-chat__form__field str-chat__form__switch-field-content' }, children),
             React.createElement("input", { type: 'checkbox', ...props, ref: inputRef }),

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

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+import type { Coords } from 'stream-chat';
+export type ShareGeolocationMapProps = Partial<Coords> & {
+    loadingLocation: boolean;
+    restartLocationWatching: () => void;
+    geolocationPositionError?: GeolocationPositionError;
+};
+export type ShareLocationDialogProps = {
+    close: () => void;
+    shareDurations?: number[];
+    GeolocationMap?: ComponentType<ShareGeolocationMapProps>;
+    DurationDropdownItems?: ComponentType<DurationDropdownItemsProps>;
+};
+export declare const ShareLocationDialog: ({ close, GeolocationMap, shareDurations, }: ShareLocationDialogProps) => React.JSX.Element;
+export type DurationDropdownItemsProps = {
+    durations: number[];
+    selectDuration: (duration: number) => void;
+};

package/dist/components/Location/ShareLocationDialog.js

@@ -0,0 +1,139 @@
+import React, { useCallback, useEffect, useMemo, useState, } from 'react';
+import { useChatContext, useTranslationContext } from '../../context';
+import { useMessageComposer } from '../MessageInput';
+import { ModalHeader } from '../Modal/ModalHeader';
+import { SimpleSwitchField } from '../Form/SwitchField';
+import { Dropdown, useDropdownContext } from '../Form/Dropdown';
+const MIN_LIVE_LOCATION_SHARE_DURATION = 60 * 1000; // 1 minute;
+const DEFAULT_SHARE_LOCATION_DURATIONS = [
+    15 * 60 * 1000, // 15 minutes
+    60 * 60 * 1000, // 1 hour
+    8 * 60 * 60 * 1000, // 8 hours
+];
+const DefaultGeolocationMap = () => null;
+export const ShareLocationDialog = ({ close, GeolocationMap = DefaultGeolocationMap, shareDurations = DEFAULT_SHARE_LOCATION_DURATIONS, }) => {
+    const { client } = useChatContext();
+    const { t } = useTranslationContext();
+    const messageComposer = useMessageComposer();
+    const [durations, setDurations] = useState([]);
+    const [selectedDuration, setSelectedDuration] = useState(undefined);
+    const [geolocationPosition, setGeolocationPosition] = useState(null);
+    const [loadingLocation, setLoadingLocation] = useState(false);
+    const [geolocationPositionError, setGeolocationPositionError] = useState(undefined);
+    const validShareDurations = useMemo(() => shareDurations.filter((d) => d >= MIN_LIVE_LOCATION_SHARE_DURATION), [shareDurations]);
+    const openDropdownButtonProps = useMemo(() => ({
+        children: (() => (React.createElement("div", null, t('duration/Share Location', {
+            milliseconds: selectedDuration ?? durations[0],
+        }))))(), // todo: make it a component
+    }), [durations, selectedDuration, t]);
+    const getPosition = useCallback(() => new Promise((resolve, reject) => {
+        navigator.geolocation.getCurrentPosition((position) => {
+            resolve(position);
+        }, (positionError) => {
+            console.warn(positionError);
+            reject(positionError);
+        }, { timeout: 1000 });
+    }), []);
+    const setupPositionWatching = useCallback(() => {
+        setLoadingLocation(true);
+        const watch = navigator.geolocation.watchPosition((position) => {
+            setGeolocationPosition(position);
+            setLoadingLocation(false);
+            setGeolocationPositionError(undefined);
+        }, (error) => {
+            setGeolocationPosition(null);
+            setLoadingLocation(false);
+            setGeolocationPositionError(error);
+        }, { timeout: 1000 });
+        return () => {
+            navigator.geolocation.clearWatch(watch);
+        };
+    }, []);
+    useEffect(() => setupPositionWatching(), [setupPositionWatching]);
+    return (React.createElement("div", { className: 'str-chat__dialog str-chat__share-location-dialog', "data-testid": 'share-location-dialog' },
+        React.createElement(ModalHeader, { close: close, title: t('Share Location') }),
+        React.createElement("div", { className: 'str-chat__dialog__body' },
+            React.createElement(GeolocationMap, { geolocationPositionError: geolocationPositionError, latitude: geolocationPosition?.coords.latitude, loadingLocation: loadingLocation, longitude: geolocationPosition?.coords.longitude, restartLocationWatching: setupPositionWatching }),
+            validShareDurations.length > 0 && (React.createElement("div", { className: 'str-chat__live-location-activation' },
+                React.createElement(SimpleSwitchField, { checked: durations.length > 0, "data-testid": 'share-location-dialog-live-location-switch', disabled: !geolocationPosition, labelText: t('Share live location for'), onChange: (e) => {
+                        e.stopPropagation();
+                        if (durations.length > 0) {
+                            setDurations([]);
+                            setSelectedDuration(undefined);
+                        }
+                        else {
+                            setDurations(validShareDurations);
+                            setSelectedDuration(validShareDurations[0]);
+                        }
+                    } }),
+                durations.length > 0 && (React.createElement(Dropdown, { openButtonProps: openDropdownButtonProps, placement: 'bottom-start' },
+                    React.createElement(DurationDropdownItems, { durations: durations, selectDuration: setSelectedDuration })))))),
+        React.createElement("div", { className: 'str-chat__dialog__controls' },
+            React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel', onClick: () => {
+                    messageComposer.locationComposer.initState();
+                    close();
+                } }, t('Cancel')),
+            React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--submit', disabled: !geolocationPosition, onClick: async () => {
+                    let coords = geolocationPosition && {
+                        latitude: geolocationPosition.coords.latitude,
+                        longitude: geolocationPosition.coords.longitude,
+                    };
+                    if (!coords) {
+                        coords = (await getPosition()).coords;
+                    }
+                    messageComposer.locationComposer.setData({
+                        ...coords,
+                        durationMs: selectedDuration,
+                    });
+                    close();
+                }, type: 'submit' }, t('Attach')),
+            React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--submit', disabled: !geolocationPosition, onClick: async () => {
+                    let coords = geolocationPosition && {
+                        latitude: geolocationPosition.coords.latitude,
+                        longitude: geolocationPosition.coords.longitude,
+                    };
+                    if (!coords) {
+                        try {
+                            coords = (await getPosition()).coords;
+                        }
+                        catch (e) {
+                            client.notifications.addError({
+                                message: t('Failed to retrieve location'),
+                                options: {
+                                    originalError: e instanceof Error ? e : undefined,
+                                    type: 'browser-api:location:get:failed',
+                                },
+                                origin: { emitter: 'ShareLocationDialog' },
+                            });
+                            return;
+                        }
+                    }
+                    messageComposer.locationComposer.setData({
+                        ...coords,
+                        durationMs: selectedDuration,
+                    });
+                    try {
+                        await messageComposer.sendLocation();
+                    }
+                    catch (err) {
+                        client.notifications.addError({
+                            message: t('Failed to share location'),
+                            options: {
+                                originalError: err instanceof Error ? err : undefined,
+                                type: 'api:location:share:failed',
+                            },
+                            origin: { emitter: 'ShareLocationDialog' },
+                        });
+                        return;
+                    }
+                    close();
+                }, type: 'submit' }, t('Share')))));
+};
+const DurationDropdownItems = ({ durations, selectDuration, }) => {
+    const { t } = useTranslationContext();
+    const { close } = useDropdownContext();
+    return durations.map((duration) => (React.createElement("button", { className: 'str-chat__live-location-sharing-duration-option', key: `duration-${duration}}`, onClick: () => {
+            selectDuration(duration);
+            close();
+        }, role: 'option' }, t('duration/Share Location', { milliseconds: duration }))));
+};

package/dist/components/Location/hooks/useLiveLocationSharingManager.d.ts

@@ -0,0 +1,18 @@
+import { LiveLocationManager } from 'stream-chat';
+import type { LiveLocationManagerConstructorParameters, StreamChat } from 'stream-chat';
+/**
+ * Checks whether the current browser is Safari.
+ */
+export declare const isSafari: () => boolean;
+/**
+ * Checks whether the current browser is Firefox.
+ */
+export declare const isFirefox: () => boolean;
+/**
+ * Checks whether the current browser is Google Chrome.
+ */
+export declare const isChrome: () => boolean;
+export declare const useLiveLocationSharingManager: ({ client, getDeviceId, watchLocation, }: Omit<LiveLocationManagerConstructorParameters, 'client' | 'getDeviceId'> & {
+    client?: StreamChat | null;
+    getDeviceId?: () => string;
+}) => LiveLocationManager | null;