\n >;\n updateMessage: (message: MessageResponse | LocalMessage) => void;\n};\n\nexport const ChannelActionContext = React.createContext<\n ChannelActionContextValue | undefined\n>(undefined);\n\nexport const ChannelActionProvider = ({\n children,\n value,\n}: PropsWithChildren<{\n value: ChannelActionContextValue;\n}>) => (\n \n {children}\n \n);\n\nexport const useChannelActionContext = (componentName?: string) => {\n const contextValue = useContext(ChannelActionContext);\n\n if (!contextValue) {\n console.warn(\n `The useChannelActionContext hook was called outside of the ChannelActionContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`,\n );\n\n return {} as ChannelActionContextValue;\n }\n\n return contextValue as unknown as ChannelActionContextValue;\n};\n\n/**\n * Typescript currently does not support partial inference, so if ChannelActionContext\n * typing is desired while using the HOC withChannelActionContext, the Props for the\n * wrapped component must be provided as the first generic.\n */\nexport const withChannelActionContext = (\n Component: React.ComponentType
,\n) => {\n const WithChannelActionContextComponent = (\n props: Omit,\n ) => {\n const channelActionContext = useChannelActionContext();\n\n return ;\n /**\n * Sets the list of Channel objects to be rendered by ChannelList component.\n */\n setChannels: Dispatch>;\n};\n\nexport const ChannelListContext = createContext(\n undefined,\n);\n\n/**\n * Context provider for components rendered within the `ChannelList`\n */\nexport const ChannelListContextProvider = ({\n children,\n value,\n}: PropsWithChildren<{\n value: ChannelListContextValue;\n}>) => (\n \n {children}\n \n);\n\nexport const useChannelListContext = (componentName?: string) => {\n const contextValue = useContext(ChannelListContext);\n\n if (!contextValue) {\n console.warn(\n `The useChannelListContext hook was called outside of the ChannelListContext provider. Make sure this hook is called within the ChannelList component. The errored call is located in the ${componentName} component.`,\n );\n\n return {} as ChannelListContextValue;\n }\n\n return contextValue as unknown as ChannelListContextValue;\n};\n", "import type { PropsWithChildren } from 'react';\nimport React, { useContext } from 'react';\nimport type {\n Channel,\n ChannelConfigWithInfo,\n LocalMessage,\n Mute,\n ChannelState as StreamChannelState,\n} from 'stream-chat';\n\nimport type {\n ChannelUnreadUiState,\n GiphyVersions,\n ImageAttachmentSizeHandler,\n UnknownType,\n VideoAttachmentSizeHandler,\n} from '../types/types';\n\nexport type ChannelNotifications = Array<{\n id: string;\n text: string;\n type: 'success' | 'error';\n}>;\n\nexport type ChannelState = {\n suppressAutoscroll: boolean;\n error?: Error | null;\n hasMore?: boolean;\n hasMoreNewer?: boolean;\n highlightedMessageId?: string;\n loading?: boolean;\n loadingMore?: boolean;\n loadingMoreNewer?: boolean;\n members?: StreamChannelState['members'];\n messages?: LocalMessage[];\n pinnedMessages?: LocalMessage[];\n read?: StreamChannelState['read'];\n thread?: LocalMessage | null;\n threadHasMore?: boolean;\n threadLoadingMore?: boolean;\n threadMessages?: LocalMessage[];\n threadSuppressAutoscroll?: boolean;\n typing?: StreamChannelState['typing'];\n watcherCount?: number;\n watchers?: StreamChannelState['watchers'];\n};\n\nexport type ChannelStateContextValue = Omit & {\n channel: Channel;\n channelCapabilities: Record;\n channelConfig: ChannelConfigWithInfo | undefined;\n imageAttachmentSizeHandler: ImageAttachmentSizeHandler;\n notifications: ChannelNotifications;\n shouldGenerateVideoThumbnail: boolean;\n videoAttachmentSizeHandler: VideoAttachmentSizeHandler;\n channelUnreadUiState?: ChannelUnreadUiState;\n giphyVersion?: GiphyVersions;\n mutes?: Array;\n watcher_count?: number;\n};\n\nexport const ChannelStateContext = React.createContext<\n ChannelStateContextValue | undefined\n>(undefined);\n\nexport const ChannelStateProvider = ({\n children,\n value,\n}: PropsWithChildren<{\n value: ChannelStateContextValue;\n}>) => (\n \n {children}\n \n);\n\nexport const useChannelStateContext = (componentName?: string) => {\n const contextValue = useContext(ChannelStateContext);\n\n if (!contextValue) {\n console.warn(\n `The useChannelStateContext hook was called outside of the ChannelStateContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`,\n );\n\n return {} as ChannelStateContextValue;\n }\n\n return contextValue as unknown as ChannelStateContextValue;\n};\n\n/**\n * Typescript currently does not support partial inference, so if ChannelStateContext\n * typing is desired while using the HOC withChannelStateContext, the Props for the\n * wrapped component must be provided as the first generic.\n */\nexport const withChannelStateContext = (\n Component: React.ComponentType
,\n) => {\n const WithChannelStateContextComponent = (\n props: Omit,\n ) => {\n const channelStateContext = useChannelStateContext();\n\n return >;\n\ntype ChannelConfId = string; // e.g.: \"messaging:general\"\n\nexport type ChatContextValue = {\n /**\n * Indicates, whether a channels query has been triggered within ChannelList by its channels pagination controller.\n */\n channelsQueryState: ChannelsQueryState;\n closeMobileNav: () => void;\n getAppSettings: () => Promise | null;\n latestMessageDatesByChannels: Record;\n mutes: Array;\n openMobileNav: () => void;\n /** Instance of SearchController class that allows to control all the search operations. */\n searchController: SearchController;\n /**\n * Sets active channel to be rendered within Channel component.\n * @param newChannel\n * @param watchers\n * @param event\n */\n setActiveChannel: (\n newChannel?: Channel,\n watchers?: { limit?: number; offset?: number },\n event?: React.BaseSyntheticEvent,\n ) => void;\n useImageFlagEmojisOnWindows: boolean;\n /**\n * Active channel used to render the contents of the Channel component.\n */\n channel?: Channel;\n /**\n * Object through which custom classes can be set for main container components of the SDK.\n */\n customClasses?: CustomClasses;\n navOpen?: boolean;\n} & Partial> &\n Required>;\n\nexport const ChatContext = React.createContext(undefined);\n\nexport const ChatProvider = ({\n children,\n value,\n}: PropsWithChildren<{\n value: ChatContextValue;\n}>) => (\n \n {children}\n \n);\n\nexport const useChatContext = (componentName?: string) => {\n const contextValue = useContext(ChatContext);\n\n if (!contextValue) {\n console.warn(\n `The useChatContext hook was called outside of the ChatContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`,\n );\n\n return {} as ChatContextValue;\n }\n\n return contextValue as unknown as ChatContextValue;\n};\n\n/**\n * Typescript currently does not support partial inference so if ChatContext\n * typing is desired while using the HOC withChatContext the Props for the\n * wrapped component must be provided as the first generic.\n */\nexport const withChatContext = (\n Component: React.ComponentType
,\n) => {\n const WithChatContextComponent = (props: Omit) => {\n const chatContext = useChatContext();\n\n return (\n Component: React.ComponentType
,\n) => Component.displayName || Component.name || 'Component';\n", "import type { PropsWithChildren } from 'react';\nimport React, { useContext } from 'react';\n\nimport type {\n AttachmentPreviewListProps,\n AttachmentProps,\n AvatarProps,\n BaseImageProps,\n ChannelPreviewActionButtonsProps,\n CooldownTimerProps,\n CustomMessageActionsListProps,\n DateSeparatorProps,\n EditMessageModalProps,\n EmojiSearchIndex,\n EmptyStateIndicatorProps,\n EventComponentProps,\n FixedHeightMessageProps,\n GiphyPreviewMessageProps,\n LoadingIndicatorProps,\n MessageBouncePromptProps,\n MessageDeletedProps,\n MessageInputProps,\n MessageListNotificationsProps,\n MessageNotificationProps,\n MessageOptionsProps,\n MessageProps,\n MessageRepliesCountButtonProps,\n MessageStatusProps,\n MessageTimestampProps,\n MessageUIComponentProps,\n ModalGalleryProps,\n ModalProps,\n PinIndicatorProps,\n PollCreationDialogProps,\n PollOptionSelectorProps,\n QuotedMessagePreviewProps,\n ReactionOptions,\n ReactionSelectorProps,\n ReactionsListModalProps,\n ReactionsListProps,\n RecordingPermissionDeniedNotificationProps,\n ReminderNotificationProps,\n SendButtonProps,\n StartRecordingAudioButtonProps,\n StreamedMessageTextProps,\n TextareaComposerProps,\n ThreadHeaderProps,\n ThreadListItemProps,\n ThreadListItemUIProps,\n TimestampProps,\n TypingIndicatorProps,\n UnreadMessagesNotificationProps,\n UnreadMessagesSeparatorProps,\n} from '../components';\n\nimport type {\n SuggestionItemProps,\n SuggestionListProps,\n} from '../components/TextareaComposer';\n\nimport type {\n SearchProps,\n SearchResultsPresearchProps,\n SearchSourceResultListProps,\n} from '../experimental';\n\nimport type { PropsWithChildrenOnly, UnknownType } from '../types/types';\nimport type { StopAIGenerationButtonProps } from '../components/MessageInput/StopAIGenerationButton';\nimport type { ShareLocationDialogProps } from '../components/Location';\n\nexport type ComponentContextValue = {\n /** Custom UI component to display a message attachment, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) */\n Attachment?: React.ComponentType;\n /** Custom UI component to display an attachment previews in MessageInput, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentPreviewList.tsx) */\n AttachmentPreviewList?: React.ComponentType;\n /** Custom UI component to control adding attachments to MessageInput, defaults to and accepts same props as: [AttachmentSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentSelector.tsx) */\n AttachmentSelector?: React.ComponentType;\n /** Custom UI component for contents of attachment selector initiation button */\n AttachmentSelectorInitiationButtonContents?: React.ComponentType;\n /** Custom UI component to display AudioRecorder in MessageInput, defaults to and accepts same props as: [AudioRecorder](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AudioRecorder.tsx) */\n AudioRecorder?: React.ComponentType;\n /** Optional UI component to override the default suggestion Item component, defaults to and accepts same props as: [Item](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/Item.js) */\n AutocompleteSuggestionItem?: React.ComponentType;\n /** Optional UI component to override the default List component that displays suggestions, defaults to and accepts same props as: [List](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/List.js) */\n AutocompleteSuggestionList?: React.ComponentType;\n /** UI component to display a user's avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */\n Avatar?: React.ComponentType;\n /** Custom UI component to display ;\n /** Custom UI component to display set of action buttons within `ChannelPreviewMessenger` component, accepts same props as: [ChannelPreviewActionButtons](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelPreviewActionButtons.tsx) */\n ChannelPreviewActionButtons?: React.ComponentType;\n /** Custom UI component to display the slow mode cooldown timer, defaults to and accepts same props as: [CooldownTimer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/CooldownTimer.tsx) */\n CooldownTimer?: React.ComponentType;\n /** Custom UI component to render set of buttons to be displayed in the MessageActionsBox, defaults to and accepts same props as: [CustomMessageActionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/CustomMessageActionsList.tsx) */\n CustomMessageActionsList?: React.ComponentType;\n /** Custom UI component for date separators, defaults to and accepts same props as: [DateSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/DateSeparator.tsx) */\n DateSeparator?: React.ComponentType;\n /** Custom UI component to override default edit message input, defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */\n EditMessageInput?: React.ComponentType;\n /** Custom UI component to override default EditMessageModal, defaults to and accepts same props as: [EditMessageModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */\n EditMessageModal?: React.ComponentType;\n /** Custom UI component for rendering button with emoji picker in MessageInput */\n EmojiPicker?: React.ComponentType;\n /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */\n emojiSearchIndex?: EmojiSearchIndex;\n /** Custom UI component to be displayed when the `MessageList` is empty, defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx) */\n EmptyStateIndicator?: React.ComponentType;\n /**\n * Custom UI component for file upload icon, defaults to and accepts same props as: [FileUploadIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx)\n * @deprecated use AttachmentSelectorInitiationButtonContents prop instead\n */\n FileUploadIcon?: React.ComponentType;\n /** Custom UI component to render a Giphy preview in the `VirtualizedMessageList` */\n GiphyPreviewMessage?: React.ComponentType;\n /** Custom UI component to render at the top of the `MessageList` */\n HeaderComponent?: React.ComponentType;\n /** 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) */\n Input?: React.ComponentType;\n /** Custom component to render link previews in message input **/\n LinkPreviewList?: React.ComponentType;\n /** Custom UI component to render while the `MessageList` is loading new messages, defaults to and accepts same props as: [LoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx) */\n LoadingIndicator?: React.ComponentType;\n /** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */\n Message?: React.ComponentType;\n /** Custom UI component for message actions popup, accepts no props, all the defaults are set within [MessageActions (unstable)](https://github.com/GetStream/stream-chat-react/blob/master/src/experimental/MessageActions/MessageActions.tsx) */\n MessageActions?: React.ComponentType;\n /** Custom UI component to display the contents of a bounced message modal. Usually it allows to retry, edit, or delete the message. Defaults to and accepts the same props as: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) */\n MessageBouncePrompt?: React.ComponentType;\n /** Custom UI component for a moderation-blocked message, defaults to and accepts same props as: [MessageBlocked](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageBlocked.tsx) */\n MessageBlocked?: React.ComponentType;\n /** 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) */\n MessageDeleted?: React.ComponentType;\n /** Custom UI component for an indicator that a message is a thread reply sent to channel list: [MessageIsThreadReplyInChannelButtonIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx) */\n MessageIsThreadReplyInChannelButtonIndicator?: React.ComponentType;\n MessageListMainPanel?: React.ComponentType;\n /** 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) */\n MessageListNotifications?: React.ComponentType;\n /** Custom UI component to display a notification when scrolled up the list and new messages arrive, defaults to and accepts same props as [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx) */\n MessageNotification?: React.ComponentType;\n /**\n * Custom UI component for message options popup, defaults to and accepts same props as: [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx)\n *\n * @deprecated Use MessageActions property instead.\n */\n MessageOptions?: React.ComponentType;\n /** Custom UI component to display message replies, defaults to and accepts same props as: [MessageRepliesCountButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) */\n MessageRepliesCountButton?: React.ComponentType;\n /** Custom UI component to display message delivery status, defaults to and accepts same props as: [MessageStatus](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageStatus.tsx) */\n MessageStatus?: React.ComponentType;\n /** Custom UI component to display system messages, defaults to and accepts same props as: [EventComponent](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EventComponent/EventComponent.tsx) */\n MessageSystem?: React.ComponentType;\n /** Custom UI component to display a timestamp on a message, defaults to and accepts same props as: [MessageTimestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) */\n MessageTimestamp?: React.ComponentType;\n /** Custom UI component for viewing content in a modal, defaults to and accepts the same props as [Modal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Modal/Modal.tsx) */\n Modal?: React.ComponentType;\n /** Custom UI component for viewing message's image attachments, defaults to and accepts the same props as [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */\n ModalGallery?: React.ComponentType;\n /** Custom UI component to override default pinned message indicator, defaults to and accepts same props as: [PinIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) */\n PinIndicator?: React.ComponentType;\n /** Custom UI component to override default poll actions rendering in a message, defaults to and accepts same props as: [PollActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollActions/PollActions.tsx) */\n PollActions?: React.ComponentType;\n /** Custom UI component to override default poll rendering in a message, defaults to and accepts same props as: [PollContent](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollContent.tsx) */\n PollContent?: React.ComponentType;\n /** Custom UI component to override default poll creation dialog contents, defaults to and accepts same props as: [PollCreationDialog](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollCreationDialog/PollCreationDialog.tsx) */\n PollCreationDialog?: React.ComponentType;\n /** Custom UI component to override default poll header in a message, defaults to and accepts same props as: [PollHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollHeader.tsx) */\n PollHeader?: React.ComponentType;\n /** Custom UI component to override default poll option selector, defaults to and accepts same props as: [PollOptionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollOptionSelector.tsx) */\n PollOptionSelector?: React.ComponentType;\n /** Custom UI component to override quoted message UI on a sent message, defaults to and accepts same props as: [QuotedMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/QuotedMessage.tsx) */\n QuotedMessage?: React.ComponentType;\n /** Custom UI component to override the message input's quoted message preview, defaults to and accepts same props as: [QuotedMessagePreview](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/QuotedMessagePreview.tsx) */\n QuotedMessagePreview?: React.ComponentType;\n /** Custom UI component to override the rendering of quoted poll, defaults to and accepts same props as: [QuotedPoll](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/QuotedPoll.tsx) */\n QuotedPoll?: React.ComponentType;\n /** Custom reaction options to be applied to ReactionSelector, ReactionList and SimpleReactionList components */\n reactionOptions?: ReactionOptions;\n /** Custom UI component to display the reaction selector, defaults to and accepts same props as: [ReactionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) */\n ReactionSelector?: React.ForwardRefExoticComponent;\n /** Custom UI component to display the list of reactions on a message, defaults to and accepts same props as: [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) */\n ReactionsList?: React.ComponentType;\n /** 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) */\n ReactionsListModal?: React.ComponentType;\n RecordingPermissionDeniedNotification?: React.ComponentType;\n /** Custom UI component to display the message reminder information in the Message UI, defaults to and accepts same props as: [ReminderNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/ReminderNotification.tsx) */\n ReminderNotification?: React.ComponentType;\n /** 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) */\n Search?: React.ComponentType;\n /** 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) */\n SearchBar?: React.ComponentType;\n /** Custom component for the search UI dedicated to display the results area, defaults to and accepts same props as: [SearchResults](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchResults.tsx) */\n SearchResults?: React.ComponentType;\n /** Custom UI component to display header of search results pane, defaults to and accepts same props as: [SearchResultsHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchResultsHeader.tsx) */\n SearchResultsHeader?: React.ComponentType;\n /** Custom component to display search results pane before emitting the first search query for a given source, defaults to and accepts same props as: [SearchResultsPresearch](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultsPresearch.tsx) */\n SearchResultsPresearch?: React.ComponentType;\n /** Custom component to display the search source items results, defaults to and accepts same props as: [SearchSourceResultList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultList.tsx) */\n SearchSourceResultList?: React.ComponentType;\n /** Custom component to indicate the end of the last page for a searched source, defaults to and accepts same props as: [SearchSourceResultListFooter](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultListFooter.tsx) */\n SearchSourceResultListFooter?: React.ComponentType;\n /** Custom UI component to display search results items for a given search source pane, defaults to and accepts same props as: [SearchSourceResults](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SourceSearchResults.tsx) */\n SearchSourceResults?: React.ComponentType;\n /** Custom component to display the search source results UI with 0 items found, defaults to and accepts same props as: [SearchSourceResultsEmpty](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultsEmpty.tsx) */\n SearchSourceResultsEmpty?: React.ComponentType;\n /** Custom component to display the header content for a given search source results, no default component is provided. */\n SearchSourceResultsHeader?: React.ComponentType;\n /** Custom component to display the search source results UI during the search query execution, defaults to and accepts same props as: [SearchSourceResultsLoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx) */\n SearchSourceResultsLoadingIndicator?: React.ComponentType;\n /** 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) */\n SendButton?: React.ComponentType;\n /** 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) */\n SendToChannelCheckbox?: React.ComponentType;\n /** Custom UI component to render the location sharing dialog, defaults to and accepts same props as: [ShareLocationDialog](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Location/ShareLocationDialog.tsx) */\n ShareLocationDialog?: React.ComponentType;\n /** 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) */\n StartRecordingAudioButton?: React.ComponentType;\n StopAIGenerationButton?: React.ComponentType | null;\n StreamedMessageText?: React.ComponentType;\n /** Custom UI component to handle message text input, defaults to and accepts same props as [TextareaComposer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TextareaComposer/TextareaComposer.tsx) */\n TextareaComposer?: React.ComponentType;\n /** Custom UI component that displays thread's parent or other message at the top of the `MessageList`, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */\n ThreadHead?: React.ComponentType;\n /** Custom UI component to display the header of a `Thread`, defaults to and accepts same props as: [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */\n ThreadHeader?: React.ComponentType;\n ThreadInput?: React.ComponentType;\n ThreadListEmptyPlaceholder?: React.ComponentType;\n ThreadListItem?: React.ComponentType;\n ThreadListItemUI?: React.ComponentType;\n ThreadListLoadingIndicator?: React.ComponentType;\n ThreadListUnseenThreadsBanner?: React.ComponentType;\n /** Custom UI component to display the start of a threaded `MessageList`, defaults to and accepts same props as: [DefaultThreadStart](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */\n ThreadStart?: React.ComponentType;\n /** Custom UI component to display a date used in timestamps. It's used internally by the default `MessageTimestamp`, and to display a timestamp for edited messages. */\n Timestamp?: React.ComponentType;\n /** Custom UI component for the typing indicator, defaults to and accepts same props as: [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) */\n TypingIndicator?: React.ComponentType;\n /** Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. Defaults to and accepts same props as: [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) */\n UnreadMessagesNotification?: React.ComponentType;\n /** Custom UI component that separates read messages from unread, defaults to and accepts same props as: [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) */\n UnreadMessagesSeparator?: React.ComponentType;\n /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */\n VirtualMessage?: React.ComponentType;\n /** Custom UI component to wrap MessageList children. Default is the `ul` tag */\n MessageListWrapper?: React.ComponentType;\n /** Custom UI component to wrap each element of MessageList. Default is the `li` tag */\n MessageListItem?: React.ComponentType;\n};\n\nexport const ComponentContext = React.createContext({});\n\nexport const ComponentProvider = ({\n children,\n value,\n}: PropsWithChildren<{\n value: Partial;\n}>) => (\n \n {children}\n \n);\n\nexport const useComponentContext = (\n /**\n * @deprecated\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n _componentName?: string,\n) => useContext(ComponentContext) as unknown as ComponentContextValue;\n\n/**\n * Typescript currently does not support partial inference, so if ComponentContext\n * typing is desired while using the HOC withComponentContext, the Props for the\n * wrapped component must be provided as the first generic.\n */\nexport const withComponentContext = (\n Component: React.ComponentType
,\n) => {\n const WithComponentContextComponent = (props: Omit) => {\n const componentContext = useComponentContext();\n\n return ;\nconst dialogManagersRegistry: StateStore = new StateStore({});\n\nconst getDialogManager = (id: string): DialogManager | undefined =>\n dialogManagersRegistry.getLatestValue()[id];\n\nconst getOrCreateDialogManager = (id: string) => {\n let manager = getDialogManager(id);\n if (!manager) {\n manager = new DialogManager({ id });\n dialogManagersRegistry.partialNext({ [id]: manager });\n }\n return manager;\n};\n\nconst removeDialogManager = (id: string) => {\n if (!getDialogManager(id)) return;\n dialogManagersRegistry.partialNext({ [id]: undefined });\n};\n\ntype DialogManagerProviderContextValue = {\n dialogManager: DialogManager;\n};\n\nconst DialogManagerProviderContext = React.createContext<\n DialogManagerProviderContextValue | undefined\n>(undefined);\n\n/**\n * Marks the portal location\n * @param children\n * @param id\n * @constructor\n */\nexport const DialogManagerProvider = ({\n children,\n id,\n}: PropsWithChildren<{ id?: string }>) => {\n const [dialogManager, setDialogManager] = useState(() => {\n if (id) return getDialogManager(id) ?? null;\n return new DialogManager(); // will not be included in the registry\n });\n\n useEffect(() => {\n if (!id) return;\n setDialogManager(getOrCreateDialogManager(id));\n return () => {\n removeDialogManager(id);\n setDialogManager(null);\n };\n }, [id]);\n\n // temporarily do not render until a new dialog manager is created\n if (!dialogManager) return null;\n\n return (\n \n {children}\n \n );\n};\n\nexport type UseDialogManagerParams = {\n dialogId?: string;\n dialogManagerId?: string;\n};\n\nconst getManagerFromStore = ({\n dialogId,\n dialogManagerId,\n newState,\n previousState,\n}: UseDialogManagerParams & {\n newState: DialogManagersState;\n previousState: DialogManagersState | undefined;\n}) => {\n let managerInNewState: DialogManager | undefined;\n let managerInPrevState: DialogManager | undefined;\n if (dialogManagerId) {\n if (!dialogId) {\n managerInNewState = newState[dialogManagerId];\n managerInPrevState = previousState?.[dialogManagerId];\n } else {\n if (newState[dialogManagerId]?.get(dialogId)) {\n managerInNewState = newState[dialogManagerId];\n }\n if (previousState?.[dialogManagerId]?.get(dialogId)) {\n managerInPrevState = previousState[dialogManagerId];\n }\n }\n } else if (dialogId) {\n managerInNewState = Object.values(newState).find(\n (dialogMng) => dialogId && dialogMng?.get(dialogId),\n );\n managerInPrevState =\n previousState &&\n Object.values(previousState).find(\n (dialogMng) => dialogId && dialogMng?.get(dialogId),\n );\n }\n\n return { managerInNewState, managerInPrevState };\n};\n\n/**\n * Retrieves the nearest dialog manager or searches for the dialog manager by dialog manager id or dialog id.\n * Dialog id will take precedence over dialog manager id if both are provided and dialog manager is found by dialog id.\n */\nexport const useDialogManager = ({\n dialogId,\n dialogManagerId,\n}: UseDialogManagerParams = {}) => {\n const nearestDialogManagerContext = useContext(DialogManagerProviderContext);\n\n const [dialogManagerContext, setDialogManagerContext] = useState<\n DialogManagerProviderContextValue | undefined\n >(() => {\n const { managerInNewState } = getManagerFromStore({\n dialogId,\n dialogManagerId,\n newState: dialogManagersRegistry.getLatestValue(),\n previousState: undefined,\n });\n return managerInNewState\n ? { dialogManager: managerInNewState }\n : nearestDialogManagerContext;\n });\n\n useEffect(() => {\n if (!dialogId && !dialogManagerId) return;\n const unsubscribe = dialogManagersRegistry.subscribeWithSelector(\n (state) => state,\n (newState, previousState) => {\n const { managerInNewState, managerInPrevState } = getManagerFromStore({\n dialogId,\n dialogManagerId,\n newState,\n previousState,\n });\n\n if (!managerInPrevState || managerInNewState?.id !== managerInPrevState.id) {\n setDialogManagerContext((prevState) => {\n if (prevState?.dialogManager.id === managerInNewState?.id) return prevState;\n // fixme: need to handle the possibility that the dialogManager is undefined\n return {\n dialogManager:\n managerInNewState || nearestDialogManagerContext?.dialogManager,\n } as DialogManagerProviderContextValue;\n });\n }\n },\n );\n return () => {\n unsubscribe();\n };\n }, [dialogId, dialogManagerId, nearestDialogManagerContext?.dialogManager]);\n\n if (!dialogManagerContext?.dialogManager) {\n console.warn(\n `Dialog manager (manager id: ${dialogManagerId}, dialog id: ${dialogId}) is not available`,\n );\n }\n\n return dialogManagerContext as DialogManagerProviderContextValue;\n};\n\nexport const modalDialogManagerId = 'modal-dialog-manager' as const;\n\nexport const ModalDialogManagerProvider = ({ children }: PropsWithChildrenOnly) => (\n {children} \n);\n\nexport const useModalDialogManager = () =>\n useMemo(() => getDialogManager(modalDialogManagerId), []);\n\nexport const useNearestDialogManagerContext = () =>\n useContext(DialogManagerProviderContext);\n", "import { nanoid } from 'nanoid';\nimport { StateStore } from 'stream-chat';\n\nexport type GetDialogParams = {\n id: DialogId;\n};\nexport type GetOrCreateDialogParams = GetDialogParams;\n\ntype DialogId = string;\n\nexport type Dialog = {\n close: () => void;\n id: DialogId;\n isOpen: boolean | undefined;\n open: (zIndex?: number) => void;\n removalTimeout: NodeJS.Timeout | undefined;\n remove: () => void;\n toggle: (closeAll?: boolean) => void;\n};\n\nexport type DialogManagerOptions = {\n id?: string;\n};\n\ntype Dialogs = Record;\n\nexport type DialogManagerState = {\n dialogsById: Dialogs;\n};\n\n/**\n * Keeps a map of Dialog objects.\n * Dialog can be controlled via `Dialog` object retrieved using `useDialog()` hook.\n * The hook returns an object with the following API:\n *\n * - `dialog.open()` - opens the dialog\n * - `dialog.close()` - closes the dialog\n * - `dialog.toggle()` - toggles the dialog open state. Accepts boolean argument closeAll. If enabled closes any other dialog that would be open.\n * - `dialog.remove()` - removes the dialog object reference from the state (primarily for cleanup purposes)\n */\nexport class DialogManager {\n id: string;\n state = new StateStore({\n dialogsById: {},\n });\n\n constructor({ id }: DialogManagerOptions = {}) {\n this.id = id ?? nanoid();\n }\n\n get openDialogCount() {\n return Object.values(this.state.getLatestValue().dialogsById).reduce(\n (count, dialog) => {\n if (dialog.isOpen) return count + 1;\n return count;\n },\n 0,\n );\n }\n\n get(id: DialogId) {\n return this.state.getLatestValue().dialogsById[id];\n }\n\n getOrCreate({ id }: GetOrCreateDialogParams) {\n let dialog = this.state.getLatestValue().dialogsById[id];\n if (!dialog) {\n dialog = {\n close: () => {\n this.close(id);\n },\n id,\n isOpen: false,\n open: () => {\n this.open({ id });\n },\n removalTimeout: undefined,\n remove: () => {\n this.remove(id);\n },\n toggle: (closeAll = false) => {\n this.toggle({ id }, closeAll);\n },\n };\n this.state.next((current) => ({\n ...current,\n ...{ dialogsById: { ...current.dialogsById, [id]: dialog } },\n }));\n }\n\n if (dialog.removalTimeout) {\n clearTimeout(dialog.removalTimeout);\n this.state.next((current) => ({\n ...current,\n ...{\n dialogsById: {\n ...current.dialogsById,\n [id]: {\n ...dialog,\n removalTimeout: undefined,\n },\n },\n },\n }));\n }\n\n return dialog;\n }\n\n open(params: GetOrCreateDialogParams, closeRest?: boolean) {\n const dialog = this.getOrCreate(params);\n if (dialog.isOpen) return;\n if (closeRest) {\n this.closeAll();\n }\n this.state.next((current) => ({\n ...current,\n dialogsById: { ...current.dialogsById, [dialog.id]: { ...dialog, isOpen: true } },\n }));\n }\n\n close(id: DialogId) {\n const dialog = this.state.getLatestValue().dialogsById[id];\n if (!dialog?.isOpen) return;\n this.state.next((current) => ({\n ...current,\n dialogsById: { ...current.dialogsById, [dialog.id]: { ...dialog, isOpen: false } },\n }));\n }\n\n closeAll() {\n Object.values(this.state.getLatestValue().dialogsById).forEach((dialog) =>\n dialog.close(),\n );\n }\n\n toggle(params: GetOrCreateDialogParams, closeAll = false) {\n if (this.state.getLatestValue().dialogsById[params.id]?.isOpen) {\n this.close(params.id);\n } else {\n this.open(params, closeAll);\n }\n }\n\n remove(id: DialogId) {\n const state = this.state.getLatestValue();\n const dialog = state.dialogsById[id];\n if (!dialog) return;\n\n if (dialog.removalTimeout) {\n clearTimeout(dialog.removalTimeout);\n }\n\n this.state.next((current) => {\n const newDialogs = { ...current.dialogsById };\n delete newDialogs[id];\n return {\n ...current,\n dialogsById: newDialogs,\n };\n });\n }\n\n /**\n * Marks the dialog state as unused. If the dialog id is referenced again quickly,\n * the state will not be removed. Otherwise, the state will be removed after\n * a short timeout.\n */\n markForRemoval(id: DialogId) {\n const dialog = this.state.getLatestValue().dialogsById[id];\n\n if (!dialog) {\n return;\n }\n\n this.state.next((current) => ({\n ...current,\n dialogsById: {\n ...current.dialogsById,\n [id]: {\n ...dialog,\n removalTimeout: setTimeout(() => {\n this.remove(id);\n }, 16),\n },\n },\n }));\n }\n}\n", "import type { PropsWithChildren } from 'react';\nimport React, { useCallback } from 'react';\nimport { useDialogIsOpen, useOpenedDialogCount } from './hooks';\nimport { Portal } from '../Portal/Portal';\nimport { useDialogManager, useNearestDialogManagerContext } from '../../context';\n\nexport const DialogPortalDestination = () => {\n const { dialogManager } = useNearestDialogManagerContext() ?? {};\n const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });\n // const [destinationRoot, setDestinationRoot] = useState(null);\n\n // todo: allow to configure and then enable\n // useEffect(() => {\n // if (!destinationRoot) return;\n // const handleClickOutside = (event: MouseEvent) => {\n // if (!destinationRoot?.contains(event.target as Node)) {\n // dialogManager?.closeAll();\n // }\n // };\n // document.addEventListener('click', handleClickOutside, { capture: true });\n // return () => {\n // document.removeEventListener('click', handleClickOutside, { capture: true });\n // };\n // }, [destinationRoot, dialogManager]);\n\n if (!openedDialogCount) return null;\n\n return (\n dialogManager?.closeAll()}\n // ref={setDestinationRoot}\n style={\n {\n '--str-chat__dialog-overlay-height': openedDialogCount > 0 ? '100%' : '0',\n } as React.CSSProperties\n }\n />\n );\n};\n\ntype DialogPortalEntryProps = {\n dialogId: string;\n dialogManagerId?: string;\n};\n\nexport const DialogPortalEntry = ({\n children,\n dialogId,\n dialogManagerId,\n}: PropsWithChildren) => {\n const { dialogManager } = useDialogManager({ dialogId, dialogManagerId });\n const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);\n\n const getPortalDestination = useCallback(\n () => document.querySelector(`div[data-str-chat__portal-id=\"${dialogManager.id}\"]`),\n [dialogManager.id],\n );\n\n return (\n \n {children}\n \n );\n};\n", "import { useCallback, useEffect } from 'react';\nimport {\n modalDialogManagerId,\n useDialogManager,\n useNearestDialogManagerContext,\n} from '../../../context';\nimport { useStateStore } from '../../../store';\n\nimport type { DialogManagerState, GetOrCreateDialogParams } from '../DialogManager';\n\nexport type UseDialogParams = GetOrCreateDialogParams & {\n dialogManagerId?: string;\n};\n\nexport const useDialog = ({ dialogManagerId, id }: UseDialogParams) => {\n const { dialogManager } = useDialogManager({ dialogManagerId });\n\n useEffect(\n () => () => {\n // Since this cleanup can run even if the component is still mounted\n // and dialog id is unchanged (e.g. in ) => {\n const { dialogManager } = useNearestDialogManagerContext() ?? {};\n const dialog = useDialog({ dialogManagerId: dialogManager?.id, id });\n\n return {\n dialog,\n dialogManager,\n };\n};\n\nexport const modalDialogId = 'modal-dialog' as const;\n\nexport const useModalDialog = () =>\n useDialog({ dialogManagerId: modalDialogManagerId, id: modalDialogId });\n\nexport const useDialogIsOpen = (id: string, dialogManagerId?: string) => {\n const { dialogManager } = useDialogManager({ dialogManagerId });\n const dialogIsOpenSelector = useCallback(\n ({ dialogsById }: DialogManagerState) => ({ isOpen: !!dialogsById[id]?.isOpen }),\n [id],\n );\n return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;\n};\n\nexport const useModalDialogIsOpen = () =>\n useDialogIsOpen(modalDialogId, modalDialogManagerId);\n\nconst openedDialogCountSelector = (nextValue: DialogManagerState) => ({\n openedDialogCount: Object.values(nextValue.dialogsById).reduce((count, dialog) => {\n if (dialog.isOpen) return count + 1;\n return count;\n }, 0),\n});\n\nexport const useOpenedDialogCount = ({\n dialogManagerId,\n}: { dialogManagerId?: string } = {}) => {\n const { dialogManager } = useDialogManager({ dialogManagerId });\n return useStateStore(dialogManager.state, openedDialogCountSelector).openedDialogCount;\n};\n", "import { useCallback, useMemo } from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\n\nimport type { StateStore } from 'stream-chat';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport function useStateStore<\n T extends Record,\n O extends Readonly | Readonly>,\n>(store: StateStore, selector: (v: T) => O): O;\nexport function useStateStore<\n T extends Record,\n O extends Readonly | Readonly>,\n>(store: StateStore | undefined, selector: (v: T) => O): O | undefined;\nexport function useStateStore<\n T extends Record,\n O extends Readonly | Readonly>,\n>(store: StateStore | undefined, selector: (v: T) => O) {\n const wrappedSubscription = useCallback(\n (onStoreChange: () => void) => {\n const unsubscribe = store?.subscribeWithSelector(selector, onStoreChange);\n return unsubscribe ?? noop;\n },\n [store, selector],\n );\n\n const wrappedSnapshot = useMemo(() => {\n let cachedTuple: [T, O];\n\n return () => {\n const currentValue = store?.getLatestValue();\n\n if (!currentValue) return undefined;\n\n // store value hasn't changed, no need to compare individual values\n if (cachedTuple && cachedTuple[0] === currentValue) {\n return cachedTuple[1];\n }\n\n const newlySelected = selector(currentValue);\n\n // store value changed but selected values wouldn't have to, double-check selected\n if (cachedTuple) {\n let selectededAreEqualToCached = true;\n\n for (const key in cachedTuple[1]) {\n if (cachedTuple[1][key] === newlySelected[key]) continue;\n selectededAreEqualToCached = false;\n break;\n }\n\n if (selectededAreEqualToCached) return cachedTuple[1];\n }\n\n cachedTuple = [currentValue, newlySelected];\n return cachedTuple[1];\n };\n }, [store, selector]);\n\n const state = useSyncExternalStore(wrappedSubscription, wrappedSnapshot);\n\n return state;\n}\n", "import type { PropsWithChildren, ReactPortal } from 'react';\nimport { useLayoutEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport type PortalProps = {\n getPortalDestination: () => Element | null;\n isOpen?: boolean;\n};\n\nexport const Portal = ({\n children,\n getPortalDestination,\n isOpen,\n}: PropsWithChildren): ReactPortal | null => {\n const [portalDestination, setPortalDestination] = useState(null);\n\n useLayoutEffect(() => {\n const destination = getPortalDestination();\n if (!destination || !isOpen) return;\n setPortalDestination(destination);\n }, [getPortalDestination, isOpen]);\n\n if (!portalDestination) return null;\n\n return createPortal(children, portalDestination);\n};\n", "import type { BaseSyntheticEvent, PropsWithChildren, ReactNode } from 'react';\nimport React, { useContext } from 'react';\n\nimport type {\n DeleteMessageOptions,\n LocalMessage,\n Mute,\n ReactionResponse,\n ReactionSort,\n UserResponse,\n} from 'stream-chat';\n\nimport type { ChannelActionContextValue } from './ChannelActionContext';\n\nimport type { ActionHandlerReturnType } from '../components/Message/hooks/useActionHandler';\nimport type { PinPermissions } from '../components/Message/hooks/usePinHandler';\nimport type { ReactEventHandler } from '../components/Message/types';\nimport type { MessageActionsArray } from '../components/Message/utils';\nimport type { MessageInputProps } from '../components/MessageInput/MessageInput';\nimport type { GroupStyle } from '../components/MessageList/utils';\nimport type {\n ReactionDetailsComparator,\n ReactionsComparator,\n ReactionType,\n} from '../components/Reactions/types';\n\nimport type { RenderTextOptions } from '../components/Message/renderText';\nimport type { UnknownType } from '../types/types';\n\nexport type CustomMessageActions = {\n [key: string]: (\n message: LocalMessage,\n event: React.BaseSyntheticEvent,\n ) => Promise | void;\n};\n\nexport type MessageContextValue = {\n /** If actions such as edit, delete, flag, mute are enabled on Message */\n actionsEnabled: boolean;\n /** Function to exit edit state */\n clearEditingState: (event?: React.BaseSyntheticEvent) => void;\n /** If the Message is in edit state */\n editing: boolean;\n /**\n * Returns all allowed actions on message by current user e.g., ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply'].\n * Please check [Message](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message.tsx) component for default implementation.\n */\n getMessageActions: () => MessageActionsArray;\n /** Function to send an action in a Channel */\n handleAction: ActionHandlerReturnType;\n /** Function to delete a message in a Channel */\n handleDelete: (\n event: BaseSyntheticEvent,\n options?: DeleteMessageOptions,\n ) => Promise | void;\n /** Function to edit a message in a Channel */\n handleEdit: ReactEventHandler;\n /** Function to fetch the message reactions */\n handleFetchReactions: (\n reactionType?: ReactionType,\n sort?: ReactionSort,\n ) => Promise>;\n /** Function to flag a message in a Channel */\n handleFlag: ReactEventHandler;\n /** Function to mark message and the messages that follow it as unread in a Channel */\n handleMarkUnread: ReactEventHandler;\n /** Function to mute a user in a Channel */\n handleMute: ReactEventHandler;\n /** Function to open a Thread on a Message */\n handleOpenThread: ReactEventHandler;\n /** Function to pin a Message in a Channel */\n handlePin: ReactEventHandler;\n /** Function to post a reaction on a Message */\n handleReaction: (\n reactionType: string,\n event: React.BaseSyntheticEvent,\n ) => Promise;\n /** Function to retry sending a Message */\n handleRetry: ChannelActionContextValue['retrySendMessage'];\n /** Function that returns whether the Message belongs to the current user */\n isMyMessage: () => boolean;\n /** The message object */\n message: LocalMessage;\n /** Indicates whether a message has not been read yet or has been marked unread */\n messageIsUnread: boolean;\n /** Handler function for a click event on an @mention in Message */\n onMentionsClickMessage: ReactEventHandler;\n /** Handler function for a hover event on an @mention in Message */\n onMentionsHoverMessage: ReactEventHandler;\n /** Handler function for a click event on the user that posted the Message */\n onUserClick: ReactEventHandler;\n /** Handler function for a hover event on the user that posted the Message */\n onUserHover: ReactEventHandler;\n /** Function to toggle the edit state on a Message */\n setEditingState: ReactEventHandler;\n /** Additional props for underlying MessageInput component, [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_input/#props) */\n additionalMessageInputProps?: MessageInputProps;\n /** Call this function to keep message list scrolled to the bottom when the scroll height increases, e.g. an element appears below the last message (only used in the `VirtualizedMessageList`) */\n autoscrollToBottom?: () => void;\n /** Message component configuration prop. If true, picking a reaction from the `ReactionSelector` component will close the selector */\n closeReactionSelectorOnClick?: boolean;\n /** Object containing custom message actions and function handlers */\n customMessageActions?: CustomMessageActions;\n /** An array of user IDs that have confirmed the message delivery to their device */\n deliveredTo?: UserResponse[];\n /** If true, the message is the last one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */\n endOfGroup?: boolean;\n /** If true, the message is the first one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */\n firstOfGroup?: boolean;\n /** Override the default formatting of the date. This is a function that has access to the original date object, returns a string */\n formatDate?: (date: Date) => string;\n /** If true, group messages sent by each user (only used in the `VirtualizedMessageList`) */\n groupedByUser?: boolean;\n /** A list of styles to apply to this message, ie. top, bottom, single */\n groupStyles?: GroupStyle[];\n /** Whether to highlight and focus the message on load */\n highlighted?: boolean;\n /** Whether the threaded message is the first in the thread list */\n initialMessage?: boolean;\n /**\n * A factory function that determines whether a message is AI generated or not.\n */\n isMessageAIGenerated?: (message: LocalMessage) => boolean;\n /** Latest own message in currently displayed message set. */\n lastOwnMessage?: LocalMessage;\n /** Latest message id on current channel */\n lastReceivedId?: string | null;\n /** DOMRect object for parent MessageList component */\n messageListRect?: DOMRect;\n /** Array of muted users coming from [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/#mutes) */\n mutes?: Mute[];\n /** @deprecated in favor of `channelCapabilities - The user roles allowed to pin Messages in various channel types */\n pinPermissions?: PinPermissions;\n /** Sort options to provide to a reactions query */\n reactionDetailsSort?: ReactionSort;\n /** A list of users that have read this Message */\n readBy?: UserResponse[];\n /** Custom function to render message text content, defaults to the renderText function: [utils](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.tsx) */\n renderText?: (\n text?: string,\n mentioned_users?: UserResponse[],\n options?: RenderTextOptions,\n ) => ReactNode;\n /** Keep track of read receipts for each message sent by the user. When disabled, only the last own message delivery / read status is rendered. */\n returnAllReadData?: boolean;\n /** Comparator function to sort the list of reacted users\n * @deprecated use `reactionDetailsSort` instead\n */\n sortReactionDetails?: ReactionDetailsComparator;\n /** Comparator function to sort reactions, defaults to chronological order */\n sortReactions?: ReactionsComparator;\n /** Whether or not the Message is in a Thread */\n threadList?: boolean;\n /** render HTML instead of markdown. Posting HTML is only allowed server-side */\n unsafeHTML?: boolean;\n};\n\nexport const MessageContext = React.createContext(\n undefined,\n);\n\nexport const MessageProvider = ({\n children,\n value,\n}: PropsWithChildren<{\n value: MessageContextValue;\n}>) => (\n \n {children}\n \n);\n\nexport const useMessageContext = (\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n _componentName?: string,\n) => {\n const contextValue = useContext(MessageContext);\n\n if (!contextValue) {\n return {} as MessageContextValue;\n }\n\n return contextValue as unknown as MessageContextValue;\n};\n\n/**\n * Typescript currently does not support partial inference, so if MessageContext\n * typing is desired while using the HOC withMessageContext, the Props for the\n * wrapped component must be provided as the first generic.\n */\nexport const withMessageContext = (\n Component: React.ComponentType
,\n) => {\n const WithMessageContextComponent = (props: Omit) => {\n const messageContext = useMessageContext();\n\n return (\n undefined,\n);\n\nexport function useMessageBounceContext(componentName?: string) {\n const contextValue = useContext(MessageBounceContext);\n\n if (!contextValue) {\n console.warn(\n `The useMessageBounceContext hook was called outside of the MessageBounceContext provider. The errored call is located in the ${componentName} component.`,\n );\n\n return {} as MessageBounceContextValue;\n }\n\n return contextValue;\n}\n\nexport function MessageBounceProvider({ children }: PropsWithChildrenOnly) {\n const {\n handleRetry: doHandleRetry,\n message,\n setEditingState,\n } = useMessageContext('MessageBounceProvider');\n\n if (!isMessageBounced(message)) {\n console.warn(\n `The MessageBounceProvider was rendered for a message that is not bounced. Have you missed the \"isMessageBounced\" check?`,\n );\n }\n\n const { removeMessage } = useChannelActionContext('MessageBounceProvider');\n\n const handleDelete: ReactEventHandler = useCallback(() => {\n removeMessage(message);\n }, [message, removeMessage]);\n\n const handleEdit: ReactEventHandler = useCallback(\n (e) => {\n setEditingState(e);\n },\n [setEditingState],\n );\n\n const handleRetry = useCallback(() => {\n doHandleRetry(message);\n }, [doHandleRetry, message]);\n\n const value = useMemo(\n () => ({\n handleDelete,\n handleEdit,\n handleRetry,\n message,\n }),\n [handleDelete, handleEdit, handleRetry, message],\n );\n\n return (\n \n {children}\n \n );\n}\n", "import React, { createContext, useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport type { CooldownTimerState, MessageInputProps } from '../components/MessageInput';\nimport type { MessageInputHookProps } from '../components/MessageInput/hooks/useMessageInputControls';\n\nexport type MessageInputContextValue = MessageInputHookProps &\n Omit &\n CooldownTimerState;\n\nexport const MessageInputContext = createContext(\n undefined,\n);\n\nexport const MessageInputContextProvider = ({\n children,\n value,\n}: PropsWithChildren<{\n value: MessageInputContextValue;\n}>) => (\n \n {children}\n \n);\n\nexport const useMessageInputContext = (\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n componentName?: string,\n) => {\n const contextValue = useContext(MessageInputContext);\n\n if (!contextValue) {\n return {} as MessageInputContextValue;\n }\n\n return contextValue as unknown as MessageInputContextValue;\n};\n", "import React, { createContext, useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\nimport type { RenderedMessage } from '../components';\n\nexport type MessageListContextValue = {\n /** Enriched message list, including date separators and intro message (if enabled) */\n processedMessages: RenderedMessage[];\n /** The scroll container within which the messages and typing indicator are rendered */\n listElement: HTMLDivElement | null;\n /** Function that scrolls the `listElement` to the bottom. */\n scrollToBottom: () => void;\n};\n\nexport const MessageListContext = createContext(\n undefined,\n);\n\n/**\n * Context provider for components rendered within the `MessageList`\n */\nexport const MessageListContextProvider = ({\n children,\n value,\n}: PropsWithChildren<{\n value: MessageListContextValue;\n}>) => (\n \n {children}\n \n);\n\nexport const useMessageListContext = (componentName?: string) => {\n const contextValue = useContext(MessageListContext);\n\n if (!contextValue) {\n console.warn(\n `The useMessageListContext hook was called outside of the MessageListContext provider. Make sure this hook is called within the MessageList component. The errored call is located in the ${componentName} component.`,\n );\n\n return {} as MessageListContextValue;\n }\n\n return contextValue as MessageListContextValue;\n};\n", "import React, { useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\nimport type { Poll } from 'stream-chat';\n\nexport type PollContextValue = {\n poll: Poll;\n};\n\nexport const PollContext = React.createContext(undefined);\n\nexport const PollProvider = ({\n children,\n poll,\n}: PropsWithChildren<{\n poll: Poll;\n}>) =>\n poll ? (\n \n {children}\n \n ) : null;\n\nexport const usePollContext = () => {\n const contextValue = useContext(PollContext);\n return contextValue as unknown as PollContextValue;\n};\n", "import React, { useContext } from 'react';\nimport Dayjs from 'dayjs';\nimport calendar from 'dayjs/plugin/calendar';\nimport localizedFormat from 'dayjs/plugin/localizedFormat';\nimport type { PropsWithChildren } from 'react';\nimport type { TFunction } from 'i18next';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport { getDisplayName } from './utils/getDisplayName';\nimport { defaultDateTimeParser, defaultTranslatorFunction } from '../i18n/utils';\nimport type { UnknownType } from '../types/types';\nimport type { TDateTimeParser } from '../i18n/types';\n\nDayjs.extend(calendar);\nDayjs.extend(localizedFormat);\n\nexport type TranslationContextValue = {\n t: TFunction;\n tDateTimeParser: TDateTimeParser;\n userLanguage: TranslationLanguages;\n};\n\nexport const TranslationContext = React.createContext({\n t: defaultTranslatorFunction,\n tDateTimeParser: defaultDateTimeParser,\n userLanguage: 'en',\n});\n\nexport const TranslationProvider = ({\n children,\n value,\n}: PropsWithChildren<{ value: TranslationContextValue }>) => (\n {children} \n);\n\nexport const useTranslationContext = (componentName?: string) => {\n const contextValue = useContext(TranslationContext);\n\n if (!contextValue) {\n console.warn(\n `The useTranslationContext hook was called outside of the TranslationContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`,\n );\n\n return {} as TranslationContextValue;\n }\n\n return contextValue;\n};\n\nexport const withTranslationContext = (\n Component: React.ComponentType
,\n) => {\n const WithTranslationContextComponent = (\n props: Omit,\n ) => {\n const translationContext = useTranslationContext();\n\n return & {\n calendarFormats?: Record | string;\n },\n ) => {\n let parsedCalendarFormats;\n try {\n if (!options.calendar) {\n parsedCalendarFormats = {};\n } else if (typeof calendarFormats === 'string') {\n parsedCalendarFormats = JSON.parse(calendarFormats);\n } else if (typeof calendarFormats === 'object') {\n parsedCalendarFormats = calendarFormats;\n }\n } catch (e) {\n console.error('[TIMESTAMP FORMATTER]', e);\n }\n\n const result = getDateString({\n ...options,\n calendarFormats: parsedCalendarFormats,\n messageCreatedAt: value,\n tDateTimeParser: streamI18n.tDateTimeParser,\n });\n if (!result || typeof result === 'number') {\n return JSON.stringify(value);\n }\n return result;\n },\n};\n\nexport const defaultTranslatorFunction = ((key: string) => key) as TFunction;\n\nexport const defaultDateTimeParser = (input?: TDateTimeParserInput) => Dayjs(input);\n\nexport const isLanguageSupported = (\n language: string,\n): language is SupportedTranslations => {\n const translations = [\n 'de',\n 'en',\n 'es',\n 'fr',\n 'hi',\n 'it',\n 'ja',\n 'ko',\n 'nl',\n 'pt',\n 'ru',\n 'tr',\n ];\n return translations.some((translation) => language === translation);\n};\n", "import React, { useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport type { ChannelState as StreamChannelState } from 'stream-chat';\nimport type { UnknownType } from '../types/types';\n\nexport type TypingContextValue = {\n typing?: StreamChannelState['typing'];\n};\n\nexport const TypingContext = React.createContext(\n undefined,\n);\n\nexport const TypingProvider = ({\n children,\n value,\n}: PropsWithChildren<{\n value: TypingContextValue;\n}>) => (\n \n {children}\n \n);\n\nexport const useTypingContext = (componentName?: string) => {\n const contextValue = useContext(TypingContext);\n\n if (!contextValue) {\n console.warn(\n `The useTypingContext hook was called outside of the TypingContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`,\n );\n\n return {} as TypingContextValue;\n }\n\n return contextValue as TypingContextValue;\n};\n\n/**\n * Typescript currently does not support partial inference, so if TypingContext\n * typing is desired while using the HOC withTypingContext, the Props for the\n * wrapped component must be provided as the first generic.\n */\nexport const withTypingContext = (\n Component: React.ComponentType
,\n) => {\n const WithTypingContextComponent = (props: Omit) => {\n const typingContext = useTypingContext();\n\n return }>) {\n const parentOverrides = useContext(ComponentContext);\n const actualOverrides: ComponentContextValue = { ...parentOverrides, ...overrides };\n return (\n \n {children}\n \n );\n}\n", "import React, { useMemo } from 'react';\nimport {\n isAudioAttachment,\n isFileAttachment,\n isImageAttachment,\n isScrapedContent,\n isSharedLocationResponse,\n isVideoAttachment,\n isVoiceRecordingAttachment,\n} from 'stream-chat';\n\nimport {\n AudioContainer,\n CardContainer,\n FileContainer,\n GalleryContainer,\n GeolocationContainer,\n ImageContainer,\n MediaContainer,\n UnsupportedAttachmentContainer,\n VoiceRecordingContainer,\n} from './AttachmentContainer';\nimport { SUPPORTED_VIDEO_FORMATS } from './utils';\n\nimport type { ReactPlayerProps } from 'react-player';\nimport type { SharedLocationResponse, Attachment as StreamAttachment } from 'stream-chat';\nimport type { AttachmentActionsProps } from './AttachmentActions';\nimport type { AudioProps } from './Audio';\nimport type { VoiceRecordingProps } from './VoiceRecording';\nimport type { CardProps } from './Card';\nimport type { FileAttachmentProps } from './FileAttachment';\nimport type { GalleryProps, ImageProps } from '../Gallery';\nimport type { UnsupportedAttachmentProps } from './UnsupportedAttachment';\nimport type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';\nimport type { GroupedRenderedAttachment } from './utils';\nimport type { GeolocationProps } from './Geolocation';\n\nconst CONTAINER_MAP = {\n audio: AudioContainer,\n card: CardContainer,\n file: FileContainer,\n media: MediaContainer,\n unsupported: UnsupportedAttachmentContainer,\n voiceRecording: VoiceRecordingContainer,\n} as const;\n\nexport const ATTACHMENT_GROUPS_ORDER = [\n 'card',\n 'gallery',\n 'image',\n 'media',\n 'audio',\n 'voiceRecording',\n 'file',\n 'geolocation',\n 'unsupported',\n] as const;\n\nexport type AttachmentProps = {\n /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/\n attachments: (StreamAttachment | SharedLocationResponse)[];\n /**\tThe handler function to call when an action is performed on an attachment, examples include canceling a \\/giphy command or shuffling the results. */\n actionHandler?: ActionHandlerReturnType;\n /** 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) */\n AttachmentActions?: React.ComponentType;\n /** Custom UI component for displaying an audio type attachment, defaults to and accepts same props as: [Audio](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Audio.tsx) */\n Audio?: React.ComponentType;\n /** Custom UI component for displaying a card type attachment, defaults to and accepts same props as: [Card](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Card.tsx) */\n Card?: React.ComponentType;\n /** Custom UI component for displaying a file type attachment, defaults to and accepts same props as: [File](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/FileAttachment.tsx) */\n File?: React.ComponentType;\n /** 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) */\n Gallery?: React.ComponentType;\n Geolocation?: React.ComponentType;\n /** 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) */\n Image?: React.ComponentType;\n /** Optional flag to signal that an attachment is a displayed as a part of a quoted message */\n isQuoted?: boolean;\n /** Custom UI component for displaying a media type attachment, defaults to `ReactPlayer` from 'react-player' */\n Media?: React.ComponentType;\n /** Custom UI component for displaying unsupported attachment types, defaults to NullComponent */\n UnsupportedAttachment?: React.ComponentType;\n /** Custom UI component for displaying an audio recording attachment, defaults to and accepts same props as: [VoiceRecording](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/VoiceRecording.tsx) */\n VoiceRecording?: React.ComponentType;\n};\n\n/**\n * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video\n */\nexport const Attachment = (props: AttachmentProps) => {\n const { attachments } = props;\n\n const groupedAttachments = useMemo(\n () => renderGroupedAttachments(props),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [attachments],\n );\n\n return (\n \n {ATTACHMENT_GROUPS_ORDER.reduce(\n (acc, groupName) => [...acc, ...groupedAttachments[groupName]],\n [] as React.ReactNode[],\n )}\n
\n );\n};\n\nconst renderGroupedAttachments = ({\n attachments,\n ...rest\n}: AttachmentProps): GroupedRenderedAttachment => {\n const uploadedImages: StreamAttachment[] = attachments.filter((attachment) =>\n isImageAttachment(attachment),\n );\n\n const containers = attachments\n .filter((attachment) => !isImageAttachment(attachment))\n .reduce(\n (typeMap, attachment) => {\n if (isSharedLocationResponse(attachment)) {\n typeMap.geolocation.push(\n ) => {\n const isGAT = isGalleryAttachmentType(attachment);\n let extra = '';\n\n if (!isGAT && !isSharedLocationResponse(attachment)) {\n extra =\n componentType === 'card' && !attachment?.image_url && !attachment?.thumb_url\n ? 'no-image'\n : attachment?.actions?.length\n ? 'actions'\n : '';\n }\n\n const classNames = clsx(\n 'str-chat__message-attachment str-chat__message-attachment-dynamic-size',\n {\n [`str-chat__message-attachment--${componentType}`]: componentType,\n [`str-chat__message-attachment--${(attachment as Attachment)?.type}`]: (\n attachment as Attachment\n )?.type,\n [`str-chat__message-attachment--${componentType}--${extra}`]:\n componentType && extra,\n 'str-chat__message-attachment--svg-image': isSvgAttachment(attachment),\n 'str-chat__message-attachment-with-actions': extra === 'actions',\n },\n );\n\n return {children}
;\n};\n\nexport const AttachmentActionsContainer = ({\n actionHandler,\n attachment,\n AttachmentActions = DefaultAttachmentActions,\n}: RenderAttachmentProps) => {\n if (!attachment.actions?.length) return null;\n\n return (\n ;\n\n if (linkify.test(url, 'url')) {\n const urlParams = new URL(url).searchParams;\n const oh = Number(urlParams.get('oh'));\n const ow = Number(urlParams.get('ow'));\n const originalHeight = oh > 1 ? oh : 1000000;\n const originalWidth = ow > 1 ? ow : 1000000;\n cssVars['--original-width'] = originalWidth;\n cssVars['--original-height'] = originalHeight;\n }\n\n return cssVars;\n}\n\nexport const GalleryContainer = ({\n attachment,\n Gallery = DefaultGallery,\n}: RenderGalleryProps) => {\n const imageElements = useRef([]);\n const { imageAttachmentSizeHandler } = useChannelStateContext();\n const [attachmentConfigurations, setAttachmentConfigurations] = useState<\n ImageAttachmentConfiguration[]\n >([]);\n\n useLayoutEffect(() => {\n if (!imageElements.current || !imageAttachmentSizeHandler) return;\n const newConfigurations: ImageAttachmentConfiguration[] = [];\n const nonNullImageElements = imageElements.current.filter((e) => !!e);\n if (nonNullImageElements.length < imageElements.current.length) {\n imageElements.current = nonNullImageElements;\n }\n imageElements.current.forEach((element, i) => {\n if (!element) return;\n const config = imageAttachmentSizeHandler(attachment.images[i], element);\n newConfigurations.push(config);\n });\n setAttachmentConfigurations(newConfigurations);\n }, [imageAttachmentSizeHandler, attachment]);\n\n const images = attachment.images.map((image, i) => ({\n ...image,\n previewUrl: attachmentConfigurations[i]?.url || 'about:blank',\n style: getCssDimensionsVariables(\n attachment.images[i]?.image_url || attachment.images[i]?.thumb_url || '',\n ),\n }));\n\n return (\n \n \n );\n};\n\nexport const ImageContainer = (props: RenderAttachmentProps) => {\n const { attachment, Image = DefaultImage } = props;\n const componentType = 'image';\n const imageElement = useRef(null);\n const { imageAttachmentSizeHandler } = useChannelStateContext();\n const [attachmentConfiguration, setAttachmentConfiguration] = useState<\n ImageAttachmentConfiguration | undefined\n >(undefined);\n\n useLayoutEffect(() => {\n if (imageElement.current && imageAttachmentSizeHandler) {\n const config = imageAttachmentSizeHandler(attachment, imageElement.current);\n setAttachmentConfiguration(config);\n }\n }, [imageElement, imageAttachmentSizeHandler, attachment]);\n\n const imageConfig = {\n ...attachment,\n previewUrl: attachmentConfiguration?.url || 'about:blank',\n style: getCssDimensionsVariables(attachment.image_url || attachment.thumb_url || ''),\n };\n\n if (attachment.actions && attachment.actions.length) {\n return (\n \n \n \n );\n }\n\n return (\n \n \n );\n};\n\nexport const CardContainer = (props: RenderAttachmentProps) => {\n const { attachment, Card = DefaultCard } = props;\n const componentType = 'card';\n\n if (attachment.actions && attachment.actions.length) {\n return (\n \n \n \n );\n }\n\n return (\n \n \n );\n};\n\nexport const FileContainer = ({\n attachment,\n File = DefaultFile,\n}: RenderAttachmentProps) => {\n if (!attachment.asset_url) return null;\n\n return (\n \n \n );\n};\nexport const AudioContainer = ({\n attachment,\n Audio = DefaultAudio,\n}: RenderAttachmentProps) => (\n \n \n \n);\n\nexport const VoiceRecordingContainer = ({\n attachment,\n isQuoted,\n VoiceRecording = DefaultVoiceRecording,\n}: RenderAttachmentProps) => (\n \n \n
\n \n);\n\nexport const MediaContainer = (props: RenderAttachmentProps) => {\n const { attachment, Media = ReactPlayer } = props;\n const componentType = 'media';\n const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } =\n useChannelStateContext();\n const videoElement = useRef(null);\n const [attachmentConfiguration, setAttachmentConfiguration] =\n useState();\n\n useLayoutEffect(() => {\n if (videoElement.current && videoAttachmentSizeHandler) {\n const config = videoAttachmentSizeHandler(\n attachment,\n videoElement.current,\n shouldGenerateVideoThumbnail,\n );\n setAttachmentConfiguration(config);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [videoElement, videoAttachmentSizeHandler, attachment]);\n\n const content = (\n \n \n \n \n ) : (\n \n {content}\n \n );\n};\n\nexport const GeolocationContainer = ({\n Geolocation = DefaultGeolocation,\n location,\n}: GeolocationContainerProps) => (\n \n \n);\n\nexport const UnsupportedAttachmentContainer = ({\n attachment,\n UnsupportedAttachment = DefaultUnsupportedAttachment,\n}: RenderAttachmentProps) => (\n <>\n ,\n name?: string,\n value?: string,\n ) => actionHandler?.(name, value, event);\n\n const knownActionText = useMemo>(\n () => ({\n Cancel: t('Cancel'),\n Send: t('Send'),\n Shuffle: t('Shuffle'),\n }),\n [t],\n );\n\n return (\n \n
\n {text} \n {actions.map((action) => (\n handleActionClick(event, action.name, action.value)}\n >\n {action.text ? (knownActionText[action.text] ?? t(action.text)) : null}\n \n ))}\n
\n
\n
\n
\n
\n
\n {audioPlayer.title}\n
\n
\n
\n
\n
\n
\n \n \n \n);\n\nexport const PauseIcon = () => (\n \n \n);\n\nexport const GeolocationIcon = () => (\n \n \n \n);\n", "import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\nimport { useTranslationContext } from '../../context';\n\n/**\n * Similar to a regular anchor tag, but it sanitizes the href value and prevents XSS\n */\nexport type SafeAnchorProps = {\n /** Set the className for the anchor tag element */\n className?: string;\n /** Specifies that the target (href attribute) will be downloaded instead of navigating to a file */\n download?: boolean;\n /** Set the href attribute for the anchor tag element */\n href?: string;\n /** Set the rel attribute for the anchor tag element */\n rel?: string;\n /** Set the target attribute for the anchor tag element */\n target?: string;\n};\n\nconst UnMemoizedSafeAnchor = (props: PropsWithChildren) => {\n const { children, className, download, href, rel, target } = props;\n const { t } = useTranslationContext('SafeAnchor');\n if (!href) return null;\n const sanitized = sanitizeUrl(href);\n return (\n \n {children}\n \n );\n};\n\nexport const SafeAnchor = React.memo(UnMemoizedSafeAnchor) as typeof UnMemoizedSafeAnchor;\n", "import React from 'react';\nimport { prettifyFileSize } from '../../MessageInput/hooks/utils';\n\ntype FileSizeIndicatorProps = {\n /** file size in byte */\n fileSize?: number | string;\n /**\n The maximum number of fraction digits to display. If not set, the default behavior is to round to 3 significant digits.\n @default undefined\n */\n maximumFractionDigits?: number;\n};\n\nexport const FileSizeIndicator = ({\n fileSize,\n maximumFractionDigits,\n}: FileSizeIndicatorProps) => {\n const actualFileSize = typeof fileSize === 'string' ? parseFloat(fileSize) : fileSize;\n\n if (typeof actualFileSize === 'undefined' || !Number.isFinite(Number(actualFileSize))) {\n return null;\n }\n\n return (\n \n {prettifyFileSize(actualFileSize, maximumFractionDigits)}\n \n );\n};\n", "export function prettifyFileSize(bytes: number, precision = 3) {\n const units = ['B', 'kB', 'MB', 'GB'];\n const exponent = Math.min(\n Math.floor(Math.log(bytes) / Math.log(1024)),\n units.length - 1,\n );\n const mantissa = bytes / 1024 ** exponent;\n const formattedMantissa =\n precision === 0 ? Math.round(mantissa).toString() : mantissa.toPrecision(precision);\n return `${formattedMantissa} ${units[exponent]}`;\n}\n", "import clsx from 'clsx';\nimport React from 'react';\n\nexport type ProgressBarProps = {\n /** Progress expressed in fractional number value btw 0 and 100. */\n progress: number;\n} & Pick, 'className' | 'onClick'>;\n\nexport const ProgressBar = ({ className, onClick, progress }: ProgressBarProps) => (\n \n \n {children}\n \n);\n", "import React from 'react';\nimport { PauseIcon, PlayTriangleIcon } from '../icons';\n\ntype PlayButtonProps = {\n isPlaying: boolean;\n onClick: () => void;\n};\n\nexport const PlayButton = ({ isPlaying, onClick }: PlayButtonProps) => (\n \n {isPlaying ? (null);\n const isDragging = useRef(false);\n const [root, setRoot] = useState(null);\n const [trackAxisX, setTrackAxisX] = useState<{\n barCount: number;\n barWidth: number;\n gap: number;\n }>();\n const lastRootWidth = useRef(undefined);\n\n const handleDragStart: PointerEventHandler = (e) => {\n e.preventDefault();\n if (!progressIndicator) return;\n isDragging.current = true;\n progressIndicator.style.cursor = 'grabbing';\n };\n\n const handleDrag: PointerEventHandler = (e) => {\n if (!isDragging.current) return;\n // Due to throttling of seek, it is necessary to create a copy (snapshot) of the event.\n // Otherwise, the event would be nullified at the point when the throttled function is executed.\n seek({ ...e });\n };\n\n const handleDragStop = useCallback(() => {\n if (!progressIndicator) return;\n isDragging.current = false;\n progressIndicator.style.removeProperty('cursor');\n }, [progressIndicator]);\n\n const getTrackAxisX = useMemo(\n () =>\n throttle((rootWidth: number) => {\n if (rootWidth === lastRootWidth.current) return;\n lastRootWidth.current = rootWidth;\n const possibleAmpCount = Math.floor(\n rootWidth / (relativeAmplitudeGap + relativeAmplitudeBarWidth),\n );\n const tooManyAmplitudesToRender = possibleAmpCount < amplitudesCount;\n const barCount = tooManyAmplitudesToRender ? possibleAmpCount : amplitudesCount;\n const amplitudeBarWidthToGapRatio =\n relativeAmplitudeBarWidth / (relativeAmplitudeBarWidth + relativeAmplitudeGap);\n const barWidth = barCount && (rootWidth / barCount) * amplitudeBarWidthToGapRatio;\n\n setTrackAxisX({\n barCount,\n barWidth,\n gap: barWidth * (relativeAmplitudeGap / relativeAmplitudeBarWidth),\n });\n }, 1),\n [relativeAmplitudeBarWidth, relativeAmplitudeGap, amplitudesCount],\n );\n\n const resampledWaveformData = useMemo(\n () => (trackAxisX ? resampleWaveformData(waveformData, trackAxisX.barCount) : []),\n [trackAxisX, waveformData],\n );\n\n useEffect(() => {\n document.addEventListener('pointerup', handleDragStop);\n return () => {\n document.removeEventListener('pointerup', handleDragStop);\n };\n }, [handleDragStop]);\n\n useEffect(() => {\n if (!root || typeof ResizeObserver === 'undefined') return;\n const observer = new ResizeObserver(([entry]) => {\n getTrackAxisX(entry.contentRect.width);\n });\n observer.observe(root);\n\n return () => {\n observer.disconnect();\n };\n }, [getTrackAxisX, root]);\n\n useLayoutEffect(() => {\n if (!root) return;\n const { width: rootWidth } = root.getBoundingClientRect();\n getTrackAxisX(rootWidth);\n }, [getTrackAxisX, root]);\n\n if (!waveformData.length || trackAxisX?.barCount === 0) return null;\n\n return (\n \n {resampledWaveformData.map((amplitude, i) => (\n (i / resampledWaveformData.length) * 100,\n })}\n data-testid='amplitude-bar'\n key={`amplitude-${i}`}\n style={\n {\n '--str-chat__voice-recording-amplitude-bar-width':\n trackAxisX?.barWidth + 'px',\n '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude\n ? amplitude * 100 + '%'\n : '0%',\n } as React.CSSProperties\n }\n />\n ))}\n 100 ? 100 : progress}%` }}\n />\n \n );\n};\n", "import type { ReactNode } from 'react';\nimport type { Attachment, SharedLocationResponse } from 'stream-chat';\nimport type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';\n\nexport const SUPPORTED_VIDEO_FORMATS = [\n 'video/mp4',\n 'video/ogg',\n 'video/webm',\n 'video/quicktime',\n];\n\nexport type AttachmentComponentType = (typeof ATTACHMENT_GROUPS_ORDER)[number];\n\nexport type GroupedRenderedAttachment = Record;\n\nexport type GalleryAttachment = {\n images: Attachment[];\n type: 'gallery';\n};\n\nexport type RenderAttachmentProps = Omit & {\n attachment: Attachment;\n};\n\nexport type RenderGalleryProps = Omit & {\n attachment: GalleryAttachment;\n};\n\nexport type GeolocationContainerProps = Omit & {\n location: SharedLocationResponse;\n};\n\n// This identity function determines attachment type specific to React.\n// Once made sure other SDKs support the same logic, move to stream-chat-js\nexport const isGalleryAttachmentType = (\n attachment: Attachment | GalleryAttachment,\n): attachment is GalleryAttachment =>\n Array.isArray((attachment as GalleryAttachment).images);\n\nexport const isSvgAttachment = (attachment: Attachment) => {\n const filename = attachment.fallback || '';\n return filename.toLowerCase().endsWith('.svg');\n};\n\nexport const divMod = (num: number, divisor: number) => [\n Math.floor(num / divisor),\n num % divisor,\n];\n\nexport const displayDuration = (totalSeconds?: number) => {\n if (!totalSeconds || totalSeconds < 0) return '00:00';\n\n const [hours, hoursLeftover] = divMod(totalSeconds, 3600);\n const [minutes, seconds] = divMod(hoursLeftover, 60);\n const roundedSeconds = Math.ceil(seconds);\n\n const prependHrsZero = hours.toString().length === 1 ? '0' : '';\n const prependMinZero = minutes.toString().length === 1 ? '0' : '';\n const prependSecZero = roundedSeconds.toString().length === 1 ? '0' : '';\n const minSec = `${prependMinZero}${minutes}:${prependSecZero}${roundedSeconds}`;\n\n return hours ? `${prependHrsZero}${hours}:` + minSec : minSec;\n};\n", "import { divMod } from './utils';\n\nexport const resampleWaveformData = (waveformData: number[], amplitudesCount: number) =>\n waveformData.length === amplitudesCount\n ? waveformData\n : waveformData.length > amplitudesCount\n ? downSample(waveformData, amplitudesCount)\n : upSample(waveformData, amplitudesCount);\n\n/**\n * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.\n * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)\n * @param data\n * @param targetOutputSize\n */\nexport function downSample(data: number[], targetOutputSize: number): number[] {\n if (data.length <= targetOutputSize || targetOutputSize === 0) {\n return data;\n }\n\n if (targetOutputSize === 1) return [mean(data)];\n\n const result: number[] = [];\n // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output\n const bucketSize = (data.length - 2) / (targetOutputSize - 2);\n let lastSelectedPointIndex = 0;\n result.push(data[lastSelectedPointIndex]); // Always add the first point\n let maxAreaPoint, maxArea, triangleArea;\n\n for (let bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {\n const previousBucketRefPoint = data[lastSelectedPointIndex];\n const nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);\n\n const currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;\n const nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;\n const countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;\n\n maxArea = triangleArea = -1;\n\n for (\n let currentPointIndex = currentBucketStartIndex;\n currentPointIndex < nextBucketStartIndex;\n currentPointIndex++\n ) {\n const countUnitsBetweenAtoB =\n Math.abs(currentPointIndex - currentBucketStartIndex) + 1;\n const countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;\n const currentPointValue = data[currentPointIndex];\n\n triangleArea = triangleAreaHeron(\n triangleBase(\n Math.abs(previousBucketRefPoint - currentPointValue),\n countUnitsBetweenAtoB,\n ),\n triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC),\n triangleBase(\n Math.abs(previousBucketRefPoint - nextBucketMean),\n countUnitsBetweenAtoC,\n ),\n );\n\n if (triangleArea > maxArea) {\n maxArea = triangleArea;\n maxAreaPoint = data[currentPointIndex];\n lastSelectedPointIndex = currentPointIndex;\n }\n }\n\n if (typeof maxAreaPoint !== 'undefined') result.push(maxAreaPoint);\n }\n\n result.push(data[data.length - 1]); // Always add the last point\n\n return result;\n}\n\nconst triangleAreaHeron = (a: number, b: number, c: number) => {\n const s = (a + b + c) / 2;\n return Math.sqrt(s * (s - a) * (s - b) * (s - c));\n};\nconst triangleBase = (a: number, b: number) => Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));\nconst mean = (values: number[]) =>\n values.reduce((acc, value) => acc + value, 0) / values.length;\nconst getNextBucketMean = (\n data: number[],\n currentBucketIndex: number,\n bucketSize: number,\n) => {\n const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;\n let nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;\n nextNextBucketStartIndex =\n nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;\n\n return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));\n};\nexport const upSample = (values: number[], targetSize: number) => {\n if (!values.length) {\n console.warn('Cannot extend empty array of amplitudes.');\n return values;\n }\n\n if (values.length > targetSize) {\n console.warn(\n 'Requested to extend the waveformData that is longer than the target list size',\n );\n return values;\n }\n\n if (targetSize === values.length) return values;\n\n // eslint-disable-next-line prefer-const\n let [bucketSize, remainder] = divMod(targetSize, values.length);\n const result: number[] = [];\n\n for (let i = 0; i < values.length; i++) {\n const extra = remainder && remainder-- ? 1 : 0;\n result.push(...Array(bucketSize + extra).fill(values[i]));\n }\n return result;\n};\n", "import { StateStore } from 'stream-chat';\nimport throttle from 'lodash.throttle';\nimport type { AudioPlayerPlugin } from './plugins';\nimport type { AudioPlayerPool } from './AudioPlayerPool';\n\nexport type AudioPlayerErrorCode =\n | 'failed-to-start'\n | 'not-playable'\n | 'seek-not-supported'\n | (string & {});\n\nexport type RegisterAudioPlayerErrorParams = {\n error?: Error;\n errCode?: AudioPlayerErrorCode;\n};\n\nexport type AudioPlayerDescriptor = {\n id: string;\n src: string;\n /** Audio duration in seconds. */\n durationSeconds?: number;\n fileSize?: number | string;\n mimeType?: string;\n title?: string;\n waveformData?: number[];\n};\n\nexport type AudioPlayerPlayAudioParams = {\n currentPlaybackRate?: number;\n playbackRates?: number[];\n};\n\nexport type AudioPlayerState = {\n /** Signals whether the browser can play the record. */\n canPlayRecord: boolean;\n /** Current playback speed. Initiated with the first item of the playbackRates array. */\n currentPlaybackRate: number;\n /** The audio element ref */\n elementRef: HTMLAudioElement | null;\n /** Signals whether the playback is in progress. */\n isPlaying: boolean;\n /** Keeps the latest playback error reference. */\n playbackError: Error | null;\n /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */\n playbackRates: number[];\n /** Playback progress expressed in percent. */\n progressPercent: number;\n /** Playback progress expressed in seconds. */\n secondsElapsed: number;\n};\n\nexport type AudioPlayerOptions = AudioPlayerDescriptor & {\n /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */\n playbackRates?: number[];\n plugins?: AudioPlayerPlugin[];\n pool: AudioPlayerPool;\n};\n\nconst DEFAULT_PLAYBACK_RATES = [1.0, 1.5, 2.0];\n\nconst isSeekable = (audioElement: HTMLAudioElement) =>\n !(audioElement.duration === Infinity || isNaN(audioElement.duration));\n\nexport const defaultRegisterAudioPlayerError = ({\n error,\n}: RegisterAudioPlayerErrorParams = {}) => {\n if (!error) return;\n console.error('[AUDIO PLAYER]', error);\n};\n\nexport const elementIsPlaying = (audioElement: HTMLAudioElement | null) =>\n audioElement && !(audioElement.paused || audioElement.ended);\n\nexport type SeekFn = (params: {\n clientX: number;\n currentTarget: HTMLDivElement;\n}) => Promise;\n\nexport class AudioPlayer {\n state: StateStore;\n /** The audio MIME type that is checked before the audio is played. If the type is not supported the controller registers error in playbackError. */\n private _data: AudioPlayerDescriptor;\n private _plugins = new Map();\n private playTimeout: ReturnType | undefined = undefined;\n private unsubscribeEventListeners: (() => void) | null = null;\n private _pool: AudioPlayerPool;\n private _disposed = false;\n private _pendingLoadedMeta?: { element: HTMLAudioElement; onLoaded: () => void };\n private _elementIsReadyPromise?: Promise;\n private _restoringPosition = false;\n private _removalTimeout: ReturnType | undefined = undefined;\n\n constructor({\n durationSeconds,\n fileSize,\n id,\n mimeType,\n playbackRates: customPlaybackRates,\n plugins,\n pool,\n src,\n title,\n waveformData,\n }: AudioPlayerOptions) {\n this._data = {\n durationSeconds,\n fileSize,\n id,\n mimeType,\n src,\n title,\n waveformData,\n };\n this._pool = pool;\n this.setPlugins(() => plugins ?? []);\n\n const playbackRates = customPlaybackRates?.length\n ? customPlaybackRates\n : DEFAULT_PLAYBACK_RATES;\n\n // do not create element here; only evaluate canPlayRecord cheaply\n const canPlayRecord = mimeType ? !!new Audio().canPlayType(mimeType) : true;\n\n this.state = new StateStore({\n canPlayRecord,\n currentPlaybackRate: playbackRates[0],\n elementRef: null,\n isPlaying: false,\n playbackError: null,\n playbackRates,\n progressPercent: 0,\n secondsElapsed: 0,\n });\n\n this.plugins.forEach((p) => p.onInit?.({ player: this }));\n }\n\n private get plugins(): AudioPlayerPlugin[] {\n return Array.from(this._plugins.values());\n }\n\n get canPlayRecord() {\n return this.state.getLatestValue().canPlayRecord;\n }\n\n get elementRef() {\n return this.state.getLatestValue().elementRef;\n }\n\n get isPlaying(): boolean {\n return this.state.getLatestValue().isPlaying;\n }\n\n get currentPlaybackRate() {\n return this.state.getLatestValue().currentPlaybackRate;\n }\n\n get playbackRates() {\n return this.state.getLatestValue().playbackRates;\n }\n\n get durationSeconds() {\n return this._data.durationSeconds;\n }\n\n get fileSize() {\n return this._data.fileSize;\n }\n\n get id() {\n return this._data.id;\n }\n\n get src() {\n return this._data.src;\n }\n\n get mimeType() {\n return this._data.mimeType;\n }\n\n get title() {\n return this._data.title;\n }\n\n get waveformData() {\n return this._data.waveformData;\n }\n\n get secondsElapsed() {\n return this.state.getLatestValue().secondsElapsed;\n }\n\n get progressPercent() {\n return this.state.getLatestValue().progressPercent;\n }\n\n get disposed() {\n return this._disposed;\n }\n\n private ensureElementRef(): HTMLAudioElement {\n if (this._disposed) {\n throw new Error('AudioPlayer is disposed');\n }\n if (!this.elementRef) {\n const el = this._pool.acquireElement({\n ownerId: this.id,\n src: this.src,\n });\n this.setRef(el);\n }\n return this.elementRef as HTMLAudioElement;\n }\n private setPlaybackStartSafetyTimeout = () => {\n clearTimeout(this.playTimeout);\n this.playTimeout = setTimeout(() => {\n if (!this.elementRef) return;\n try {\n this.elementRef.pause();\n this.state.partialNext({ isPlaying: false });\n } catch (e) {\n this.registerError({ errCode: 'failed-to-start' });\n }\n }, 2000);\n };\n\n private clearPlaybackStartSafetyTimeout = () => {\n if (!this.elementRef) return;\n clearTimeout(this.playTimeout);\n this.playTimeout = undefined;\n };\n\n private clearPendingLoadedMeta = () => {\n const pending = this._pendingLoadedMeta;\n if (pending?.element && pending.onLoaded) {\n pending.element.removeEventListener('loadedmetadata', pending.onLoaded);\n }\n this._pendingLoadedMeta = undefined;\n };\n\n private restoreSavedPosition = (elementRef: HTMLAudioElement) => {\n const saved = this.secondsElapsed;\n if (!saved || saved <= 0) return;\n const apply = () => {\n const duration = elementRef.duration;\n const clamped =\n typeof duration === 'number' && !isNaN(duration) && isFinite(duration)\n ? Math.min(saved, duration)\n : saved;\n try {\n if (elementRef.currentTime === clamped) return;\n elementRef.currentTime = clamped;\n // Preempt UI with restored position to avoid flicker\n this.setSecondsElapsed(clamped);\n } catch {\n // ignore\n }\n };\n // No information is available about the media resource.\n if (elementRef.readyState < 1) {\n this.clearPendingLoadedMeta();\n this._restoringPosition = true;\n const onLoaded = () => {\n // Ensure this callback still belongs to the same pending registration and same element\n if (this._pendingLoadedMeta?.onLoaded !== onLoaded) return;\n this._pendingLoadedMeta = undefined;\n if (this.elementRef !== elementRef) {\n this._restoringPosition = false;\n return;\n }\n apply();\n this._restoringPosition = false;\n };\n elementRef.addEventListener('loadedmetadata', onLoaded, { once: true });\n this._pendingLoadedMeta = { element: elementRef, onLoaded };\n } else {\n this._restoringPosition = true;\n apply();\n this._restoringPosition = false;\n }\n };\n\n setDescriptor(descriptor: AudioPlayerDescriptor) {\n this._data = { ...this._data, ...descriptor };\n if (descriptor.src !== this.src && this.elementRef) {\n this.elementRef.src = descriptor.src;\n }\n }\n\n private releaseElement({ resetState }: { resetState: boolean }) {\n this.clearPendingLoadedMeta();\n this._restoringPosition = false;\n if (resetState) {\n this.stop();\n } else {\n // Ensure isPlaying reflects reality, but keep progress/seconds\n this.state.partialNext({ isPlaying: false });\n if (this.elementRef) {\n try {\n this.elementRef.pause();\n } catch {\n // ignore\n }\n }\n }\n if (this.elementRef) {\n this._pool.releaseElement(this.id);\n this.setRef(null);\n }\n }\n\n private elementIsReady = (): Promise => {\n if (this._elementIsReadyPromise) return this._elementIsReadyPromise;\n\n this._elementIsReadyPromise = new Promise((resolve) => {\n if (!this.elementRef) return resolve(false);\n const element = this.elementRef;\n const handleLoaded = () => {\n element.removeEventListener('loadedmetadata', handleLoaded);\n resolve(element.readyState > 0);\n };\n element.addEventListener('loadedmetadata', handleLoaded);\n });\n\n return this._elementIsReadyPromise;\n };\n\n private setRef = (elementRef: HTMLAudioElement | null) => {\n if (elementIsPlaying(this.elementRef)) {\n // preserve state during swap\n this.releaseElement({ resetState: false });\n }\n this.clearPendingLoadedMeta();\n this._restoringPosition = false;\n this._elementIsReadyPromise = undefined;\n this.state.partialNext({ elementRef });\n // When a new element is attached, make sure listeners are wired to it\n if (elementRef) {\n this.registerSubscriptions();\n }\n };\n\n setSecondsElapsed = (secondsElapsed: number) => {\n this.state.partialNext({\n progressPercent:\n this.elementRef && secondsElapsed\n ? (secondsElapsed / this.elementRef.duration) * 100\n : 0,\n secondsElapsed,\n });\n };\n\n setPlugins(setter: (currentPlugins: AudioPlayerPlugin[]) => AudioPlayerPlugin[]) {\n this._plugins = setter(this.plugins).reduce((acc, plugin) => {\n if (plugin.id) {\n acc.set(plugin.id, plugin);\n }\n return acc;\n }, new Map());\n }\n\n canPlayMimeType = (mimeType: string) => {\n if (!mimeType) return false;\n if (this.elementRef) return !!this.elementRef.canPlayType(mimeType);\n return !!new Audio().canPlayType(mimeType);\n };\n\n play = async (params?: AudioPlayerPlayAudioParams) => {\n if (this._disposed) return;\n const elementRef = this.ensureElementRef();\n if (elementIsPlaying(this.elementRef)) {\n if (this.isPlaying) return;\n this.state.partialNext({ isPlaying: true });\n return;\n }\n\n const { currentPlaybackRate, playbackRates } = {\n currentPlaybackRate: this.currentPlaybackRate,\n playbackRates: this.playbackRates,\n ...params,\n };\n\n if (!this.canPlayRecord) {\n this.registerError({ errCode: 'not-playable' });\n return;\n }\n\n // Restore last known position for this player before attempting to play\n this.restoreSavedPosition(elementRef);\n\n elementRef.playbackRate = currentPlaybackRate ?? this.currentPlaybackRate;\n\n this.setPlaybackStartSafetyTimeout();\n\n try {\n await elementRef.play();\n this.state.partialNext({\n currentPlaybackRate,\n isPlaying: true,\n playbackRates,\n });\n this._pool.setActiveAudioPlayer(this);\n } catch (e) {\n this.registerError({ error: e as Error });\n this.state.partialNext({ isPlaying: false });\n } finally {\n this.clearPlaybackStartSafetyTimeout();\n }\n };\n\n pause = () => {\n if (!elementIsPlaying(this.elementRef)) return;\n this.clearPlaybackStartSafetyTimeout();\n\n // existence of the element already checked by elementIsPlaying\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.elementRef!.pause();\n this.state.partialNext({ isPlaying: false });\n };\n\n stop = () => {\n this.pause();\n this.setSecondsElapsed(0);\n if (this.elementRef) this.elementRef.currentTime = 0;\n };\n\n togglePlay = async () => (this.isPlaying ? this.pause() : await this.play());\n\n increasePlaybackRate = () => {\n if (!this.elementRef) return;\n let currentPlaybackRateIndex = this.state\n .getLatestValue()\n .playbackRates.findIndex((rate) => rate === this.currentPlaybackRate);\n if (currentPlaybackRateIndex === -1) {\n currentPlaybackRateIndex = 0;\n }\n const nextIndex =\n currentPlaybackRateIndex === this.playbackRates.length - 1\n ? 0\n : currentPlaybackRateIndex + 1;\n const currentPlaybackRate = this.playbackRates[nextIndex];\n this.state.partialNext({ currentPlaybackRate });\n this.elementRef.playbackRate = currentPlaybackRate;\n };\n\n seek = throttle(async ({ clientX, currentTarget }) => {\n let element = this.elementRef;\n if (!this.elementRef) {\n element = this.ensureElementRef();\n const isReady = await this.elementIsReady();\n if (!isReady) return;\n }\n if (!currentTarget || !element) return;\n if (!isSeekable(element)) {\n this.registerError({ errCode: 'seek-not-supported' });\n return;\n }\n\n const { width, x } = currentTarget.getBoundingClientRect();\n\n const ratio = (clientX - x) / width;\n if (ratio > 1 || ratio < 0) return;\n const currentTime = ratio * element.duration;\n this.setSecondsElapsed(currentTime);\n element.currentTime = currentTime;\n }, 16);\n\n registerError = (params: RegisterAudioPlayerErrorParams) => {\n defaultRegisterAudioPlayerError(params);\n this.plugins.forEach(({ onError }) => onError?.({ player: this, ...params }));\n };\n\n /**\n * Removes the audio element reference, event listeners and audio player from the player pool.\n * Helpful when only a single AudioPlayer instance is to be removed from the AudioPlayerPool.\n */\n requestRemoval = () => {\n this._disposed = true;\n this.cancelScheduledRemoval();\n this.clearPendingLoadedMeta();\n this._restoringPosition = false;\n this.releaseElement({ resetState: true });\n this.unsubscribeEventListeners?.();\n this.unsubscribeEventListeners = null;\n this.plugins.forEach(({ onRemove }) => onRemove?.({ player: this }));\n this._pool.deregister(this.id);\n };\n\n cancelScheduledRemoval = () => {\n clearTimeout(this._removalTimeout);\n this._removalTimeout = undefined;\n };\n\n scheduleRemoval = (ms: number = 0) => {\n this.cancelScheduledRemoval();\n this._removalTimeout = setTimeout(() => {\n if (this.disposed) return;\n this.requestRemoval();\n }, ms);\n };\n\n /**\n * Releases only the underlying element back to the pool without disposing the player instance.\n * Used by the pool to hand off the shared element in single-playback mode.\n */\n releaseElementForHandoff = () => {\n if (!this.elementRef) return;\n this.releaseElement({ resetState: false });\n this.unsubscribeEventListeners?.();\n this.unsubscribeEventListeners = null;\n };\n\n registerSubscriptions = () => {\n this.unsubscribeEventListeners?.();\n\n const audioElement = this.elementRef;\n if (!audioElement) return;\n\n const handleEnded = () => {\n this.state.partialNext({\n isPlaying: false,\n secondsElapsed: audioElement?.duration ?? this.durationSeconds ?? 0,\n });\n };\n\n const handleError = (e: HTMLMediaElementEventMap['error']) => {\n // if fired probably is one of these (e.srcElement.error.code)\n // 1 = MEDIA_ERR_ABORTED (fetch aborted by user/JS)\n // 2 = MEDIA_ERR_NETWORK (network failed while fetching)\n // 3 = MEDIA_ERR_DECODE (data fetched but couldn\u2019t decode)\n // 4 = MEDIA_ERR_SRC_NOT_SUPPORTED (no resource supported / bad type)\n // reported during the mount so only logging to the console\n const audio = e.currentTarget as HTMLAudioElement | null;\n const state: Partial = { isPlaying: false };\n\n if (!audio?.error?.code) {\n this.state.partialNext(state);\n return;\n }\n\n if (audio.error.code === 4) {\n state.canPlayRecord = false;\n this.state.partialNext(state);\n }\n\n const errorMsg = [\n undefined,\n 'MEDIA_ERR_ABORTED: fetch aborted by user',\n 'MEDIA_ERR_NETWORK: network failed while fetching',\n 'MEDIA_ERR_DECODE: audio fetched but couldn\u2019t decode',\n 'MEDIA_ERR_SRC_NOT_SUPPORTED: source not supported',\n ][audio?.error?.code];\n if (!errorMsg) return;\n\n defaultRegisterAudioPlayerError({ error: new Error(errorMsg + ` (${audio.src})`) });\n };\n\n const handleTimeupdate = () => {\n const t = audioElement?.currentTime ?? 0;\n // Ignore spurious zero during restore/handoff to avoid UI flicker\n if (this._restoringPosition && t === 0) return;\n // Also avoid regressing UI to zero if we already have non-zero progress and we're not playing\n if (!this.isPlaying && t === 0 && this.secondsElapsed > 0) return;\n this.setSecondsElapsed(t);\n };\n\n audioElement.addEventListener('ended', handleEnded);\n audioElement.addEventListener('error', handleError);\n audioElement.addEventListener('timeupdate', handleTimeupdate);\n\n this.unsubscribeEventListeners = () => {\n audioElement.pause();\n audioElement.removeEventListener('ended', handleEnded);\n audioElement.removeEventListener('error', handleError);\n audioElement.removeEventListener('timeupdate', handleTimeupdate);\n };\n };\n}\n", "import React, { useContext, useState } from 'react';\nimport { useEffect } from 'react';\nimport type { AudioPlayerOptions } from './AudioPlayer';\nimport type { AudioPlayerPoolState } from './AudioPlayerPool';\nimport { AudioPlayerPool } from './AudioPlayerPool';\nimport { audioPlayerNotificationsPluginFactory } from './plugins/AudioPlayerNotificationsPlugin';\nimport { useChatContext, useTranslationContext } from '../../context';\nimport { useStateStore } from '../../store';\n\nexport type WithAudioPlaybackProps = {\n children?: React.ReactNode;\n allowConcurrentPlayback?: boolean;\n};\n\nconst AudioPlayerContext = React.createContext<{ audioPlayers: AudioPlayerPool | null }>({\n audioPlayers: null,\n});\n\nexport const WithAudioPlayback = ({\n allowConcurrentPlayback,\n children,\n}: WithAudioPlaybackProps) => {\n const [audioPlayers] = useState(() => new AudioPlayerPool({ allowConcurrentPlayback }));\n\n useEffect(\n () => () => {\n audioPlayers.clear();\n },\n [audioPlayers],\n );\n\n return (\n \n {children}\n \n );\n};\n\nexport type UseAudioPlayerProps = {\n /**\n * Identifier of the entity that requested the audio playback, e.g. message ID.\n * Asset to specific audio player is a many-to-many relationship\n * - one URL can be associated with multiple UI elements,\n * - one UI element can display multiple audio sources.\n * Therefore, the AudioPlayer ID is a combination of request:src.\n *\n * The requester string can take into consideration whether there are multiple instances of\n * the same URL requested by the same requester (message has multiple attachments with the same asset URL).\n * In reality the fact that one message has multiple attachments with the same asset URL\n * could be considered a bad practice or a bug.\n */\n requester?: string;\n} & Partial>;\n\nconst makeAudioPlayerId = ({ requester, src }: { src: string; requester?: string }) =>\n `${requester ?? 'requester-unknown'}:${src}`;\n\nexport const useAudioPlayer = ({\n durationSeconds,\n fileSize,\n mimeType,\n playbackRates,\n plugins,\n requester = '',\n src,\n title,\n waveformData,\n}: UseAudioPlayerProps) => {\n const { client } = useChatContext();\n const { t } = useTranslationContext();\n const { audioPlayers } = useContext(AudioPlayerContext);\n\n const audioPlayer =\n src && audioPlayers\n ? audioPlayers.getOrAdd({\n durationSeconds,\n fileSize,\n id: makeAudioPlayerId({ requester, src }),\n mimeType,\n playbackRates,\n plugins,\n src,\n title,\n waveformData,\n })\n : undefined;\n\n useEffect(() => {\n if (!audioPlayer) return;\n /**\n * Avoid having to pass client and translation function to AudioPlayer instances\n * and instead provide plugin that takes care of translated notifications.\n */\n const notificationsPlugin = audioPlayerNotificationsPluginFactory({ client, t });\n audioPlayer.setPlugins((currentPlugins) => [\n ...currentPlugins.filter((plugin) => plugin.id !== notificationsPlugin.id),\n notificationsPlugin,\n ]);\n }, [audioPlayer, client, t]);\n\n return audioPlayer;\n};\n\nconst activeAudioPlayerSelector = ({ activeAudioPlayer }: AudioPlayerPoolState) => ({\n activeAudioPlayer,\n});\n\nexport const useActiveAudioPlayer = () => {\n const { audioPlayers } = useContext(AudioPlayerContext);\n const { activeAudioPlayer } =\n useStateStore(audioPlayers?.state, activeAudioPlayerSelector) ?? {};\n return activeAudioPlayer;\n};\n", "import { AudioPlayer, type AudioPlayerOptions } from './AudioPlayer';\nimport { StateStore } from 'stream-chat';\n\nexport type AudioPlayerPoolState = {\n activeAudioPlayer: AudioPlayer | null;\n};\n\nexport class AudioPlayerPool {\n state: StateStore = new StateStore({\n activeAudioPlayer: null,\n });\n private pool = new Map();\n private audios = new Map();\n private sharedAudio: HTMLAudioElement | null = null;\n private sharedOwnerId: string | null = null;\n private readonly allowConcurrentPlayback: boolean;\n\n constructor(config?: { allowConcurrentPlayback?: boolean }) {\n this.allowConcurrentPlayback = !!config?.allowConcurrentPlayback;\n }\n\n get players() {\n return Array.from(this.pool.values());\n }\n\n get activeAudioPlayer() {\n return this.state.getLatestValue().activeAudioPlayer;\n }\n\n getOrAdd = (params: Omit) => {\n const { playbackRates, plugins, ...descriptor } = params;\n let player = this.pool.get(params.id);\n if (player) {\n if (!player.disposed) {\n player.setDescriptor(descriptor);\n return player;\n }\n this.deregister(params.id);\n }\n player = new AudioPlayer({\n playbackRates,\n plugins,\n ...descriptor,\n pool: this,\n });\n this.pool.set(params.id, player);\n return player;\n };\n\n /**\n * In case of allowConcurrentPlayback enabled, a new Audio is created and assigned to the given audioPlayer owner.\n * In case of disabled concurrency, the shared audio ownership is transferred to the new owner loading the owner's\n * source.\n *\n * @param ownerId\n * @param src\n */\n acquireElement = ({ ownerId, src }: { ownerId: string; src: string }) => {\n if (!this.allowConcurrentPlayback) {\n // Single shared element mode\n if (!this.sharedAudio) {\n this.sharedAudio = new Audio();\n }\n // Handoff from previous owner if different\n if (this.sharedOwnerId && this.sharedOwnerId !== ownerId) {\n const previous = this.pool.get(this.sharedOwnerId);\n // Ask previous to pause and drop ref, but keep player in pool\n previous?.pause();\n previous?.releaseElementForHandoff();\n }\n this.sharedOwnerId = ownerId;\n if (this.sharedAudio.src !== src) {\n // setting src starts loading; avoid explicit load() to prevent currentTime reset flicker\n this.sharedAudio.src = src;\n }\n return this.sharedAudio;\n }\n\n // Concurrent-per-owner mode\n let audio = this.audios.get(ownerId);\n if (!audio) {\n audio = new Audio();\n this.audios.set(ownerId, audio);\n }\n if (audio.src !== src) {\n // setting src starts loading; avoid explicit load() here as well\n audio.src = src;\n }\n return audio;\n };\n\n /**\n * Removes the given audio players ownership of the shared audio element (in case of concurrent playback is disabled)\n * and pauses the reproduction of the audio.\n * In case of concurrent playback mode (allowConcurrentPlayback enabled), the audio is paused,\n * its source cleared and removed from the audios pool readied for garbage collection.\n *\n * @param ownerId\n */\n releaseElement = (ownerId: string) => {\n if (!this.allowConcurrentPlayback) {\n if (this.sharedOwnerId !== ownerId) return;\n const el = this.sharedAudio;\n if (el) {\n try {\n el.pause();\n } catch {\n // ignore\n }\n el.removeAttribute('src');\n el.load();\n }\n // Keep shared element instance for reuse\n this.sharedOwnerId = null;\n return;\n }\n\n const el = this.audios.get(ownerId);\n if (!el) return;\n try {\n el.pause();\n } catch {\n // ignore\n }\n el.removeAttribute('src');\n el.load();\n this.audios.delete(ownerId);\n };\n\n /** Sets active audio player when allowConcurrentPlayback is disabled */\n setActiveAudioPlayer = (activeAudioPlayer: AudioPlayer | null) => {\n if (this.allowConcurrentPlayback) return;\n this.state.partialNext({ activeAudioPlayer });\n };\n\n /** Removes the AudioPlayer instance from the pool of players */\n deregister(id: string) {\n if (this.pool.has(id)) {\n this.pool.delete(id);\n }\n if (this.activeAudioPlayer?.id === id) {\n this.setActiveAudioPlayer(null);\n }\n }\n\n /** Performs all the necessary cleanup actions and removes the player from the pool */\n remove = (id: string) => {\n const player = this.pool.get(id);\n if (!player) return;\n player.requestRemoval();\n };\n\n /** Removes and cleans up all the players from the pool */\n clear = () => {\n this.players.forEach((player) => {\n this.remove(player.id);\n });\n };\n\n registerSubscriptions = () => {\n // Only register subscriptions for players that have an attached element.\n // Avoid creating elements or cross-wiring listeners on the shared element in single-playback mode.\n this.players.forEach((p) => {\n if (p.elementRef) {\n p.registerSubscriptions();\n }\n });\n };\n}\n", "import type { AudioPlayerPlugin } from './AudioPlayerPlugin';\nimport { type AudioPlayerErrorCode } from '../AudioPlayer';\nimport type { StreamChat } from 'stream-chat';\nimport type { TFunction } from 'i18next';\n\nexport const audioPlayerNotificationsPluginFactory = ({\n client,\n t,\n}: {\n client: StreamChat;\n t: TFunction;\n}): AudioPlayerPlugin => {\n const errors: Record = {\n 'failed-to-start': new Error(t('Failed to play the recording')),\n 'not-playable': new Error(\n t('Recording format is not supported and cannot be reproduced'),\n ),\n 'seek-not-supported': new Error(t('Cannot seek in the recording')),\n };\n\n return {\n id: 'AudioPlayerNotificationsPlugin',\n onError: ({ errCode, error: e }) => {\n const error =\n (errCode && errors[errCode]) ??\n e ??\n new Error(t('Error reproducing the recording'));\n\n client?.notifications.addError({\n message: error.message,\n options: {\n originalError: error,\n type: 'browser:audio:playback:error',\n },\n origin: {\n emitter: 'AudioPlayer',\n },\n });\n },\n };\n};\n", "import React from 'react';\nimport type { Attachment } from 'stream-chat';\n\nimport {\n FileSizeIndicator,\n PlaybackRateButton,\n PlayButton,\n WaveProgressBar,\n} from './components';\nimport { displayDuration } from './utils';\nimport { FileIcon } from '../ReactFileUtilities';\nimport { useMessageContext, useTranslationContext } from '../../context';\nimport { type AudioPlayerState, useAudioPlayer } from '../AudioPlayback/';\nimport { useStateStore } from '../../store';\nimport type { AudioPlayer } from '../AudioPlayback/AudioPlayer';\n\nconst rootClassName = 'str-chat__message-attachment__voice-recording-widget';\n\nconst audioPlayerStateSelector = (state: AudioPlayerState) => ({\n canPlayRecord: state.canPlayRecord,\n isPlaying: state.isPlaying,\n playbackRate: state.currentPlaybackRate,\n progress: state.progressPercent,\n secondsElapsed: state.secondsElapsed,\n});\n\ntype VoiceRecordingPlayerUIProps = {\n audioPlayer: AudioPlayer;\n};\n\n// todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI\nconst VoiceRecordingPlayerUI = ({ audioPlayer }: VoiceRecordingPlayerUIProps) => {\n const { canPlayRecord, isPlaying, playbackRate, progress, secondsElapsed } =\n useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};\n\n const displayedDuration = secondsElapsed || audioPlayer.durationSeconds;\n\n return (\n \n
\n
\n
\n {audioPlayer.title}\n \n
\n
\n {audioPlayer.durationSeconds ? (\n displayDuration(displayedDuration)\n ) : (\n
\n
\n
\n
\n {isPlaying ? (\n
\n {playbackRate?.toFixed(1)}x\n \n ) : (\n & {\n /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */\n playbackRates?: number[];\n};\n\nexport const VoiceRecordingPlayer = ({\n attachment,\n playbackRates,\n}: VoiceRecordingPlayerProps) => {\n const { t } = useTranslationContext();\n const {\n asset_url,\n duration = 0,\n file_size,\n mime_type,\n title = t('Voice message'),\n waveform_data,\n } = attachment;\n\n /**\n * Introducing message context. This could be breaking change, therefore the fallback to {} is provided.\n * If this component is used outside the message context, then there will be no audio player namespacing\n * => scrolling away from the message in virtualized ML would create a new AudioPlayer instance.\n *\n * Edge case: the requester (message) has multiple attachments with the same assetURL - does not happen\n * with the default SDK components, but can be done with custom API calls.In this case all the Audio\n * widgets will share the state.\n */\n const { message, threadList } = useMessageContext() ?? {};\n\n const audioPlayer = useAudioPlayer({\n durationSeconds: duration ?? 0,\n fileSize: file_size,\n mimeType: mime_type,\n playbackRates,\n requester:\n message?.id &&\n `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`,\n src: asset_url,\n title,\n waveformData: waveform_data,\n });\n\n return audioPlayer ? ;\n\nexport const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps) => {\n const { t } = useTranslationContext();\n const title = attachment.title || t('Voice message');\n return (\n \n
\n {title && (\n
\n {title}\n \n )}\n
\n
\n {attachment.duration ? (\n displayDuration(attachment.duration)\n ) : (\n
\n
\n
\n \n \n \n \n \n \n);\n\nexport const FilePowerPointIcon = ({\n className = '',\n size = DEFAULT_SIZE,\n ...props\n}: IconProps) => (\n \n \n \n \n \n \n);\n\nexport const FileExcelIcon = ({\n className = '',\n size = DEFAULT_SIZE,\n ...props\n}: IconProps) => (\n \n \n \n \n \n \n);\n\nexport const FileArchiveIcon = ({\n className = '',\n size = DEFAULT_SIZE,\n ...props\n}: IconProps) => (\n \n \n \n \n \n \n);\n\nexport const FileCodeIcon = ({\n className = '',\n size = DEFAULT_SIZE,\n ...props\n}: IconProps) => (\n \n \n \n \n \n \n);\n\nexport const FileAudioIcon = ({\n className = '',\n size = DEFAULT_SIZE,\n ...props\n}: IconProps) => (\n \n \n \n \n \n \n);\n\nexport const FileVideoIcon = ({\n className = '',\n size = DEFAULT_SIZE,\n ...props\n}: IconProps) => (\n \n \n \n \n \n \n);\n\nexport const FileFallbackIcon = ({\n className = '',\n size = DEFAULT_SIZE,\n ...props\n}: IconProps) => (\n \n \n \n \n \n);\n\n// v1 icon without possibility to specify size via props\nexport const FileImageIcon = ({\n className = '',\n size = DEFAULT_SIZE,\n ...props\n}: IconProps) => (\n \n = {\n FileAltIcon: ComponentType;\n FileArchiveIcon: ComponentType;\n FileAudioIcon: ComponentType;\n FileCodeIcon: ComponentType;\n FileExcelIcon: ComponentType;\n FileFallbackIcon: ComponentType;\n FileImageIcon: ComponentType;\n FilePdfIcon: ComponentType;\n FilePowerPointIcon: ComponentType;\n FileVideoIcon: ComponentType;\n FileWordIcon: ComponentType;\n};\n\ntype MimeTypeToIconMap = {\n [key: string]: ComponentType;\n};\n\nfunction generateMimeTypeToIconMap({\n FileArchiveIcon,\n FileCodeIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerPointIcon,\n FileWordIcon,\n}: Pick, MimeTypeMappedComponent>) {\n const mimeTypeToIconMap: MimeTypeToIconMap = {\n 'application/pdf': FilePdfIcon,\n };\n\n for (const type of wordMimeTypes) {\n mimeTypeToIconMap[type] = FileWordIcon;\n }\n\n for (const type of excelMimeTypes) {\n mimeTypeToIconMap[type] = FileExcelIcon;\n }\n\n for (const type of powerpointMimeTypes) {\n mimeTypeToIconMap[type] = FilePowerPointIcon;\n }\n\n for (const type of archiveFileTypes) {\n mimeTypeToIconMap[type] = FileArchiveIcon;\n }\n\n for (const type of codeFileTypes) {\n mimeTypeToIconMap[type] = FileCodeIcon;\n }\n return mimeTypeToIconMap;\n}\n\nfunction generateGeneralTypeToIconMap({\n FileAltIcon,\n FileAudioIcon,\n FileImageIcon,\n FileVideoIcon,\n}: Pick, GeneralContentTypeComponent>) {\n return {\n 'audio/': FileAudioIcon,\n 'image/': FileImageIcon,\n 'text/': FileAltIcon,\n 'video/': FileVideoIcon,\n };\n}\n\nexport type IconType = 'standard' | 'alt';\n\ntype IconMap = {\n standard: Record<\n SupportedMimeType | GeneralType | 'fallback',\n ComponentType\n >;\n alt?: Record>;\n};\n\nexport const iconMap: IconMap = {\n alt: {\n ...generateMimeTypeToIconMap({\n FileArchiveIcon: fileIconSet.FileArchiveIconAlt,\n FileCodeIcon: fileIconSet.FileCodeIconAlt,\n FileExcelIcon: fileIconSet.FileExcelIconAlt,\n FilePdfIcon: fileIconSet.FilePdfIcon,\n FilePowerPointIcon: fileIconSet.FilePowerPointIconAlt,\n FileWordIcon: fileIconSet.FileWordIconAlt,\n }),\n ...generateGeneralTypeToIconMap({\n FileAltIcon: fileIconSet.FileFallbackIcon,\n FileAudioIcon: fileIconSet.FileAudioIconAlt,\n FileImageIcon: fileIconSet.FileImageIcon,\n FileVideoIcon: fileIconSet.FileVideoIconAlt,\n }),\n fallback: fileIconSet.FileFallbackIcon,\n },\n standard: {\n ...generateMimeTypeToIconMap({\n FileArchiveIcon: fileIconSet.FileArchiveIcon,\n FileCodeIcon: fileIconSet.FileCodeIcon,\n FileExcelIcon: fileIconSet.FileExcelIcon,\n FilePdfIcon: fileIconSet.FilePdfIcon,\n FilePowerPointIcon: fileIconSet.FilePowerPointIcon,\n FileWordIcon: fileIconSet.FileWordIcon,\n }),\n ...generateGeneralTypeToIconMap({\n FileAltIcon: fileIconSet.FileFallbackIcon,\n FileAudioIcon: fileIconSet.FileAudioIcon,\n FileImageIcon: fileIconSet.FileImageIcon,\n FileVideoIcon: fileIconSet.FileVideoIcon,\n }),\n fallback: fileIconSet.FileFallbackIcon,\n },\n};\n", "import clsx from 'clsx';\nimport { nanoid } from 'nanoid';\nimport type { ComponentProps } from 'react';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\n\nimport { useHandleFileChangeWrapper } from './utils';\nimport { useMessageInputContext, useTranslationContext } from '../../context';\nimport { useMessageComposer } from '../MessageInput';\nimport { useAttachmentManagerState } from '../MessageInput/hooks/useAttachmentManagerState';\nimport { useStateStore } from '../../store';\nimport type { MessageComposerConfig } from 'stream-chat';\nimport type { PartialSelected } from '../../types/types';\n\nconst attachmentManagerConfigStateSelector = (state: MessageComposerConfig) => ({\n acceptedFiles: state.attachments.acceptedFiles,\n maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage,\n});\n\n/**\n * @deprecated Use FileInputProps instead.\n */\nexport type UploadButtonProps = {\n onFileChange: (files: Array) => void;\n resetOnChange?: boolean;\n} & Omit, 'type' | 'onChange'>;\n\n/**\n * @deprecated Use FileInput instead\n */\n\nexport const UploadButton = forwardRef(function UploadButton(\n { onFileChange, resetOnChange = true, ...rest }: UploadButtonProps,\n ref: React.ForwardedRef,\n) {\n const handleInputChange = useHandleFileChangeWrapper(resetOnChange, onFileChange);\n\n return ,\n ref: React.ForwardedRef,\n) {\n const { t } = useTranslationContext('UploadFileInput');\n const { cooldownRemaining, textareaRef } = useMessageInputContext();\n const messageComposer = useMessageComposer();\n const { attachmentManager } = messageComposer;\n const { isUploadEnabled } = useAttachmentManagerState();\n const { acceptedFiles, maxNumberOfFilesPerMessage } = useStateStore(\n messageComposer.configState,\n attachmentManagerConfigStateSelector,\n );\n const id = useMemo(() => nanoid(), []);\n\n const onFileChange = useCallback(\n (files: Array) => {\n attachmentManager.uploadFiles(files);\n textareaRef.current?.focus();\n onFileChangeCustom?.(files);\n },\n [onFileChangeCustom, attachmentManager, textareaRef],\n );\n\n return (\n 1}\n {...props}\n className={clsx('str-chat__file-input', className)}\n onFileChange={onFileChange}\n ref={ref}\n />\n );\n});\n", "import type { FileLike, RecordedMediaType } from './types';\nimport type { ChangeEvent } from 'react';\nimport { useCallback } from 'react';\n\nexport const useHandleFileChangeWrapper = (\n resetOnChange = false,\n handler?: (files: Array) => void,\n) =>\n useCallback(\n ({ currentTarget }: ChangeEvent) => {\n const { files } = currentTarget;\n\n if (!files) return;\n\n try {\n handler?.(Array.from(files));\n } catch (error) {\n console.error(error);\n }\n\n if (resetOnChange) currentTarget.value = '';\n },\n [handler, resetOnChange],\n );\n\nexport function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean {\n if (!items || !items.length) {\n return false;\n }\n for (const item of items) {\n if (item.kind === 'file' || item.type === 'text/html') {\n return true;\n }\n }\n return false;\n}\n\nexport async function dataTransferItemsToFiles(\n items?: DataTransferItem[],\n): Promise