{"version":3,"file":"index.mjs","sources":["../../src/components/AIStateIndicator/hooks/useAIState.ts","../../src/context/AttachmentSelectorContext.tsx","../../src/components/Dialog/service/DialogManager.ts","../../src/components/Dialog/hooks/useDialog.ts","../../src/components/Portal/Portal.ts","../../src/components/Dialog/service/DialogPortal.tsx","../../src/context/DialogManagerContext.tsx","../../src/context/MessageContext.tsx","../../src/components/MessageComposer/preEditSnapshot.ts","../../src/context/MessageBounceContext.tsx","../../src/context/MessageListContext.tsx","../../src/context/MessageTranslationViewContext.tsx","../../src/context/ModalContext.tsx","../../src/context/PollContext.tsx","../../src/context/WithComponents.tsx","../../src/components/AIStateIndicator/AIStateIndicator.tsx","../../src/components/VisuallyHidden/VisuallyHidden.tsx","../../src/components/Accessibility/useAriaLiveAnnouncer.ts","../../src/components/Accessibility/AriaLiveRegion.tsx","../../src/components/Notifications/hooks/useNotifications.ts","../../src/components/Button/PlayButton.tsx","../../node_modules/dayjs/plugin/updateLocale.js","../../node_modules/dayjs/plugin/localeData.js","../../node_modules/dayjs/plugin/relativeTime.js","../../node_modules/dayjs/plugin/duration.js","../../node_modules/dayjs/plugin/utc.js","../../node_modules/dayjs/plugin/timezone.js","../../src/i18n/TranslationBuilder/TranslationBuilder.ts","../../src/i18n/TranslationBuilder/notifications/translators.ts","../../src/i18n/TranslationBuilder/notifications/translatorsByNotificationType.ts","../../src/i18n/TranslationBuilder/notifications/NotificationTranslationTopic.ts","../../node_modules/dayjs/locale/de.js","../../node_modules/dayjs/locale/es.js","../../node_modules/dayjs/locale/fr.js","../../node_modules/dayjs/locale/hi.js","../../node_modules/dayjs/locale/it.js","../../node_modules/dayjs/locale/ja.js","../../node_modules/dayjs/locale/ko.js","../../node_modules/dayjs/locale/nl.js","../../node_modules/dayjs/locale/pt.js","../../node_modules/dayjs/locale/ru.js","../../node_modules/dayjs/locale/tr.js","../../node_modules/dayjs/locale/en.js","../../src/i18n/Streami18n.ts","../../src/components/Loading/LoadingChannels.tsx","../../src/components/Loading/LoadingIndicator.tsx","../../src/components/Loading/progress-indicators.tsx","../../src/components/Loading/UploadProgressIndicator.tsx","../../src/components/MessageComposer/hooks/utils.ts","../../src/components/Attachment/components/FileSizeIndicator.tsx","../../src/components/Loading/UploadedSizeIndicator.tsx","../../src/utils/useStableCallback.ts","../../src/components/Message/hooks/useActionHandler.ts","../../src/components/Message/hooks/useDeleteHandler.ts","../../src/components/Message/hooks/useFlagHandler.ts","../../src/components/Message/hooks/useMentionsHandler.ts","../../src/components/Message/hooks/useMarkUnreadHandler.ts","../../src/components/Message/hooks/useMuteHandler.ts","../../src/components/Message/hooks/useOpenThreadHandler.ts","../../src/components/Message/hooks/usePinHandler.ts","../../src/components/Message/hooks/useReactionHandler.ts","../../src/components/Message/hooks/useRetryHandler.ts","../../src/components/Message/hooks/useUserHandler.ts","../../src/components/Message/hooks/useUserRole.ts","../../src/components/Message/hooks/useReactionsFetcher.ts","../../src/components/Message/hooks/useMessageTextStreaming.ts","../../src/components/Message/hooks/useMessageReminder.ts","../../src/a11y/hooks/useAriaIdentifiers.ts","../../src/components/Dialog/components/Alert.tsx","../../src/components/Dialog/service/DialogAnchor.tsx","../../src/components/Dialog/components/Callout.tsx","../../src/components/Avatar/Avatar.tsx","../../src/components/Badge/Badge.tsx","../../src/components/Avatar/AvatarStack.tsx","../../src/components/Avatar/ChannelAvatar.tsx","../../src/components/Avatar/GroupAvatar.tsx","../../src/a11y/a11yUtils.ts","../../src/components/Dialog/components/ContextMenu.tsx","../../src/components/Dialog/components/Prompt.tsx","../../src/components/Dialog/components/Viewer.tsx","../../src/a11y/hooks/useResolvedModalAriaProps.ts","../../src/components/Modal/GlobalModal.tsx","../../src/components/MessageBounce/MessageBounceModal.tsx","../../src/components/MessageBounce/MessageBouncePrompt.tsx","../../src/components/Message/MessageBubble.tsx","../../src/components/Message/MessageDeletedBubble.tsx","../../src/components/Message/MessageBlocked.tsx","../../src/components/MessageActions/hooks/useBaseMessageActionSetFilter.ts","../../src/components/Message/MessageAlsoSentInChannelIndicator.tsx","../../src/components/Message/MessageRepliesCountButton.tsx","../../src/components/Message/PinIndicator.tsx","../../src/components/Tooltip/Tooltip.tsx","../../src/components/Tooltip/hooks/useEnterLeaveHandlers.ts","../../src/components/Message/MessageStatus.tsx","../../src/components/Message/renderText/regex.ts","../../src/components/Message/renderText/rehypePlugins/emojiMarkdownPlugin.ts","../../src/components/Message/renderText/rehypePlugins/mentionsMarkdownPlugin.ts","../../src/components/Message/renderText/remarkPlugins/htmlToTextPlugin.ts","../../src/components/Message/renderText/remarkPlugins/imageToLink.ts","../../src/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.ts","../../src/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.ts","../../src/components/Message/renderText/remarkPlugins/remarkIgnoreMarkdown.ts","../../src/components/Message/renderText/componentRenderers/Anchor.tsx","../../src/components/Message/renderText/componentRenderers/Emoji.tsx","../../src/components/Message/renderText/componentRenderers/Mention.tsx","../../src/components/UtilityComponents/NullComponent.tsx","../../src/components/UtilityComponents/ErrorBoundary.tsx","../../src/components/Message/renderText/renderText.tsx","../../src/components/Message/MessageText.tsx","../../src/components/Message/Timestamp.tsx","../../src/components/Message/MessageTimestamp.tsx","../../src/components/Message/MessageEditedIndicator.tsx","../../src/components/Message/MessageTranslationIndicator.tsx","../../src/components/Attachment/components/DownloadButton.tsx","../../src/components/FileIcon/FileIconSet.tsx","../../src/components/FileIcon/mimeTypes.ts","../../src/components/FileIcon/iconMap.ts","../../src/components/FileIcon/FileIcon.tsx","../../src/components/AudioPlayback/components/formatTime.ts","../../src/components/AudioPlayback/components/DurationDisplay.tsx","../../src/components/AudioPlayback/components/PlaybackRateButton.tsx","../../src/components/AudioPlayback/components/keyboardSeek.ts","../../src/components/AudioPlayback/components/progressBarA11y.ts","../../src/components/AudioPlayback/components/useInteractiveProgressBar.ts","../../src/components/AudioPlayback/components/ProgressBar.tsx","../../src/components/Attachment/utils.tsx","../../src/components/Attachment/audioSampling.ts","../../src/components/AudioPlayback/components/WaveProgressBar.tsx","../../src/components/Attachment/Audio.tsx","../../src/components/Attachment/AttachmentActions.tsx","../../src/components/Attachment/VoiceRecording.tsx","../../src/components/BaseImage/ImagePlaceholder.tsx","../../src/components/BaseImage/BaseImage.tsx","../../src/components/BaseImage/toBaseImageDescriptors.ts","../../src/components/Gallery/GalleryContext.tsx","../../src/components/Gallery/GalleryHeader.tsx","../../src/components/VideoPlayer/VideoPlayer.tsx","../../src/components/VideoPlayer/VideoThumbnail.tsx","../../src/components/Gallery/GalleryUI.tsx","../../src/components/Gallery/Gallery.tsx","../../src/components/Attachment/ModalGallery.tsx","../../src/components/Attachment/Image.tsx","../../src/components/SafeAnchor/SafeAnchor.tsx","../../src/components/Attachment/LinkPreview/UnableToRenderCard.tsx","../../src/components/Attachment/LinkPreview/Card.tsx","../../src/components/Attachment/FileAttachment.tsx","../../src/components/Attachment/Giphy.tsx","../../src/components/Attachment/icons.tsx","../../src/components/Attachment/Geolocation.tsx","../../src/components/Attachment/UnsupportedAttachment.tsx","../../src/components/Attachment/VisibilityDisclaimer.tsx","../../src/components/Attachment/VideoAttachment.tsx","../../src/components/Attachment/AttachmentContainer.tsx","../../src/components/Attachment/Attachment.tsx","../../src/components/Location/hooks/useLiveLocationSharingManager.ts","../../src/components/MessageComposer/hooks/useAttachmentManagerState.ts","../../src/components/MessageComposer/hooks/useAttachmentsForPreview.ts","../../src/components/MessageComposer/hooks/useCanCreatePoll.ts","../../src/components/MessageComposer/hooks/useCooldownRemaining.tsx","../../src/components/MessageComposer/hooks/useTextareaRef.ts","../../src/components/MessageComposer/hooks/useSubmitHandler.ts","../../src/components/ReactFileUtilities/UploadButton.tsx","../../src/components/MessageComposer/hooks/usePasteHandler.ts","../../src/components/MediaRecorder/observable/Subscription.ts","../../src/components/MediaRecorder/observable/Observer.ts","../../src/components/MediaRecorder/observable/Observable.ts","../../src/components/MediaRecorder/observable/Subject.ts","../../src/components/MediaRecorder/observable/BehaviorSubject.ts","../../src/components/MediaRecorder/classes/BrowserPermission.ts","../../src/utils/mergeDeep.ts","../../src/components/MediaRecorder/classes/AmplitudeRecorder.ts","../../src/components/MediaRecorder/transcode/wav.ts","../../src/components/MediaRecorder/transcode/index.ts","../../src/components/MediaRecorder/classes/MediaRecorderController.ts","../../src/components/MediaRecorder/hooks/useMediaRecorder.ts","../../src/components/MessageComposer/hooks/useMessageComposerBindings.ts","../../src/components/MessageComposer/hooks/useMessageComposerCommands.ts","../../src/components/MessageComposer/hooks/useMessageComposerHasSendableData.ts","../../src/components/MessageComposer/hooks/useMessageContentIsEmpty.ts","../../src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx","../../src/components/MessageComposer/QuotedMessageIndicator.tsx","../../src/components/MessageComposer/QuotedMessagePreview.tsx","../../src/components/Message/QuotedMessage.tsx","../../src/components/Message/ReminderNotification.tsx","../../src/components/Message/StreamedMessageText.tsx","../../src/components/Form/Dropdown.tsx","../../src/components/Form/SwitchField.tsx","../../src/components/Location/ShareLocationDialog.tsx","../../src/components/Poll/PollHeader.tsx","../../src/components/Form/FieldError.tsx","../../src/components/UtilityComponents/useStableId.ts","../../src/components/Form/NumericInput.tsx","../../src/components/Form/TextInput.tsx","../../src/components/DragAndDrop/DragAndDropContainer.tsx","../../src/components/Form/TextInputFieldSet.tsx","../../src/components/Form/hooks/useFormState.ts","../../src/components/Poll/PollActions/AddCommentPrompt.tsx","../../src/components/Poll/PollActions/EndPollAlert.tsx","../../src/components/Poll/PollActions/PollAction.tsx","../../src/components/Poll/PollActions/SuggestPollOptionPrompt.tsx","../../src/components/Poll/PollVote.tsx","../../src/components/Poll/hooks/useManagePollVotesRealtime.ts","../../src/components/InfiniteScrollPaginator/hooks/useCursorPaginator.ts","../../src/components/Poll/hooks/usePollAnswerPagination.ts","../../src/components/Poll/hooks/usePollOptionVotesPagination.ts","../../src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx","../../src/components/Poll/PollActions/PollAnswerList.tsx","../../src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx","../../src/components/Poll/PollActions/PollResults/PollOptionWithVotes.tsx","../../src/components/Poll/constants.ts","../../src/components/Poll/PollActions/PollQuestion.tsx","../../src/components/Poll/PollActions/PollResults/PollOptionWithVotesList.tsx","../../src/components/Poll/PollActions/PollResults/PollResults.tsx","../../src/components/Poll/PollActions/PollActions.tsx","../../src/components/Poll/PollOptionSelector.tsx","../../src/components/Poll/PollOptionList.tsx","../../src/components/Poll/PollActions/PollOptionsFullList.tsx","../../src/components/Poll/PollContent.tsx","../../src/components/Poll/Poll.tsx","../../src/components/Poll/PollCreationDialog/MultipleAnswersField.tsx","../../src/components/Poll/PollCreationDialog/NameField.tsx","../../src/components/Poll/PollCreationDialog/OptionFieldSet.tsx","../../src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx","../../src/components/Poll/PollCreationDialog/PollCreationDialog.tsx","../../src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx","../../src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx","../../src/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx","../../src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadedSizeIndicator.tsx","../../src/components/MessageComposer/AttachmentPreviewList/utils/AttachmentPreviewRoot.tsx","../../src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx","../../src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx","../../src/components/Badge/MediaBadge.tsx","../../src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx","../../src/components/MessageComposer/AttachmentPreviewList/AttachmentPreviewList.tsx","../../src/components/MessageComposer/AttachmentPreviewList/VoiceRecordingPreviewSlot.tsx","../../src/components/MessageComposer/CommandChip.tsx","../../src/components/MessageComposer/CooldownTimer.tsx","../../src/components/MessageComposer/icons.tsx","../../src/components/MessageComposer/LinkPreviewList.tsx","../../src/components/MediaRecorder/RecordingPermissionDeniedNotification.tsx","../../src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx","../../src/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.ts","../../src/components/MediaRecorder/AudioRecorder/RecordingTimer.tsx","../../src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx","../../src/components/MediaRecorder/AudioRecorder/recordingStateIdentity.ts","../../src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx","../../src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx","../../src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx","../../src/components/MessageComposer/EditedMessagePreview.tsx","../../src/components/MessageComposer/SendToChannelCheckbox.tsx","../../src/components/TextareaComposer/SuggestionList/CommandItem.tsx","../../src/components/TextareaComposer/SuggestionList/EmoticonItem.tsx","../../src/components/TextareaComposer/SuggestionList/SuggestionListItem.tsx","../../src/components/TextareaComposer/SuggestionList/UserItem.tsx","../../src/utils/getTextareaCaretRect.ts","../../src/components/TextareaComposer/SuggestionList/SuggestionList.tsx","../../src/components/TextareaComposer/hooks/useTextareaPlaceholder.ts","../../src/components/TextareaComposer/TextareaComposer.tsx","../../src/components/MessageComposer/WithDragAndDropUpload.tsx","../../src/components/MessageComposer/StopAIGenerationButton.tsx","../../src/components/MessageComposer/SendButton.tsx","../../src/components/MessageComposer/MessageComposerActions.tsx","../../src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx","../../src/components/MessageComposer/MessageComposerUI.tsx","../../src/components/MessageComposer/hooks/useCreateMessageComposerContext.ts","../../src/components/MessageComposer/MessageComposer.tsx","../../src/components/ChannelListItem/utils.tsx","../../src/components/ChannelListItem/hooks/useChannelDisplayName.ts","../../src/components/ChannelListItem/hooks/useChannelPreviewInfo.ts","../../src/components/TypingIndicator/TypingIndicatorDots.tsx","../../src/components/TypingIndicator/hooks/useDebouncedTypingActive.ts","../../src/components/TypingIndicator/utils/getTypingStatusMessage.ts","../../src/components/TypingIndicator/TypingIndicatorHeader.tsx","../../src/components/Thread/ThreadHeader.tsx","../../src/components/Thread/ThreadStart.tsx","../../src/components/DateSeparator/DateSeparator.tsx","../../src/components/Thread/ThreadHead.tsx","../../src/components/Thread/Thread.tsx","../../src/components/Reactions/reactionOptions.tsx","../../src/components/Reactions/ReactionSelector.tsx","../../src/components/Reactions/hooks/useFetchReactions.ts","../../src/components/Reactions/MessageReactionsDetail.tsx","../../src/components/Reactions/hooks/useProcessReactions.tsx","../../src/components/Reactions/MessageReactions.tsx","../../src/components/Reactions/utils/utils.ts","../../src/components/Reactions/SpriteImage.tsx","../../src/components/Reactions/ReactionSelectorWithButton.tsx","../../src/components/MessageActions/RemindMeSubmenu.tsx","../../src/components/MessageActions/QuickMessageActionButton.tsx","../../src/components/MessageActions/DeleteMessageAlert.tsx","../../src/components/MessageActions/downloadUtils.ts","../../src/components/MessageActions/MessageActions.defaults.tsx","../../src/components/Chat/hooks/useSplitActionSet.ts","../../src/components/MessageActions/MessageActions.tsx","../../src/components/Message/MessageUI.tsx","../../src/components/Message/Message.tsx","../../src/components/MessageList/GiphyPreviewMessage.tsx","../../src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts","../../src/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.ts","../../src/components/MessageList/hooks/useLastReadData.ts","../../src/components/MessageList/hooks/useLastDeliveredData.ts","../../src/components/MessageList/hooks/MessageList/useMessageListElements.tsx","../../src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts","../../src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx","../../src/components/MessageList/MessageListMainPanel.tsx","../../src/components/MessageList/UnreadMessagesSeparator.tsx","../../src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts","../../src/components/MessageList/hooks/useMarkRead.ts","../../src/components/MessageList/NewMessageNotification.tsx","../../src/components/MessageList/UnreadMessagesNotification.tsx","../../src/components/InfiniteScrollPaginator/InfiniteScroll.tsx","../../src/components/TypingIndicator/TypingIndicator.tsx","../../src/components/MessageList/hooks/VirtualizedMessageList/useFloatingDateSeparator.ts","../../src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts","../../src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts","../../src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts","../../src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts","../../src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts","../../src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts","../../src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts","../../src/components/MessageList/FloatingDateSeparator.tsx","../../src/components/EventComponent/EventComponent.tsx","../../src/components/MessageList/renderMessages.tsx","../../src/utils/findReverse.ts","../../src/components/MessageList/hooks/useLastOwnMessage.ts","../../src/components/MessageList/hooks/useReducedMotionPreference.ts","../../src/components/MessageList/ScrollToLatestMessageButton.tsx","../../src/components/MessageList/MessageList.tsx","../../src/components/MessageList/VirtualizedMessageListComponents.tsx","../../src/context/VirtualizedMessageListContext.tsx","../../src/components/MessageList/VirtualizedMessageList.tsx","../../src/utils/getWholeChar.ts","../../src/components/Search/hooks/useSearchQueriesInProgress.ts","../../src/components/ChannelList/hooks/useConnectionRecoveredListener.ts","../../src/components/ChannelList/hooks/usePaginatedChannels.ts","../../src/components/ChannelList/utils.ts","../../src/components/ChannelList/hooks/useChannelListShape.ts","../../src/components/ChannelList/ChannelListUI.tsx","../../src/components/Search/SearchContext.tsx","../../src/components/Search/SearchBar/SearchBar.tsx","../../src/components/Search/SearchResults/SearchResultItem.tsx","../../src/components/Search/SearchSourceResultsContext.tsx","../../src/components/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx","../../src/components/Search/SearchResults/SearchSourceResultListFooter.tsx","../../src/components/Search/SearchResults/SearchSourceResultList.tsx","../../src/components/Search/SearchResults/SearchSourceResultsEmpty.tsx","../../src/components/Search/SearchResults/SearchSourceResultsHeader.tsx","../../src/components/Search/SearchResults/SearchSourceResults.tsx","../../src/components/Search/SearchResults/SearchResultsHeader.tsx","../../src/components/Search/SearchResults/SearchResultsPresearch.tsx","../../src/components/Search/SearchResults/SearchResults.tsx","../../src/components/Search/Search.tsx","../../src/components/LoadMore/LoadMoreButton.tsx","../../src/components/LoadMore/LoadMorePaginator.tsx","../../src/components/ChannelList/ChannelListHeader.tsx","../../src/components/ChannelList/ChannelList.tsx","../../src/components/ChannelList/hooks/useSelectedChannelState.ts","../../src/components/ChannelList/hooks/useChannelMembershipState.ts","../../src/components/ChannelList/hooks/useChannelMembersState.ts","../../src/components/ChannelListItem/hooks/useIsChannelMuted.ts","../../src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx","../../src/components/ChannelListItem/ChannelListItemActionButtons.tsx","../../src/components/ChannelListItem/ChannelListItemTimestamp.tsx","../../src/components/SummarizedMessagePreview/hooks/useLatestMessagePreview.ts","../../src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx","../../src/components/ChannelListItem/ChannelListItemUI.tsx","../../src/components/ChannelListItem/hooks/useMessageDeliveryStatus.ts","../../src/components/ChannelListItem/ChannelListItem.tsx","../../src/components/Threads/ThreadList/ThreadListItemUI.tsx","../../src/components/Threads/ThreadList/ThreadListItem.tsx","../../src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx","../../src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx","../../src/components/Threads/ThreadList/ThreadListLoadingIndicator.tsx","../../src/components/Threads/ThreadList/ThreadListHeader.tsx","../../src/components/Threads/ThreadList/ThreadList.tsx","../../src/components/Notifications/hooks/useSystemNotifications.ts","../../src/components/Notifications/Notification.tsx","../../src/components/Notifications/NotificationList.tsx","../../src/components/Accessibility/NotificationAnnouncer.tsx","../../src/components/Accessibility/hooks/useIncomingMessageAnnouncements.ts","../../src/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.ts","../../src/components/ChannelHeader/ChannelHeader.tsx","../../src/components/SkipNavigation/SkipNavigation.tsx","../../src/components/Chat/hooks/useChat.ts","../../src/components/Chat/hooks/useReportLostConnectionSystemNotification.ts","../../src/components/Chat/hooks/useCreateChatContext.ts","../../src/components/Chat/hooks/useChannelsQueryState.ts","../../src/components/Chat/Chat.tsx","../../src/components/Chat/hooks/useCreateChatClient.ts","../../src/components/Window/Window.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { AIState, Channel, Event } from 'stream-chat';\n\nexport const AIStates = {\n Error: 'AI_STATE_ERROR',\n ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',\n Generating: 'AI_STATE_GENERATING',\n Idle: 'AI_STATE_IDLE',\n Stop: 'AI_STATE_STOP',\n Thinking: 'AI_STATE_THINKING',\n};\n\n/**\n * A hook that returns the current state of the AI.\n * @param {Channel} channel - The channel for which we want to know the AI state.\n * @returns {{ aiState: AIState }} The current AI state for the given channel.\n */\nexport const useAIState = (channel?: Channel): { aiState: AIState } => {\n const [aiState, setAiState] = useState(AIStates.Idle);\n\n useEffect(() => {\n if (!channel) {\n return;\n }\n\n const indicatorChangedListener = channel.on('ai_indicator.update', (event: Event) => {\n const { cid } = event;\n const state = event.ai_state as AIState;\n if (channel.cid === cid) {\n setAiState(state);\n }\n });\n\n const indicatorClearedListener = channel.on('ai_indicator.clear', (event) => {\n const { cid } = event;\n if (channel.cid === cid) {\n setAiState(AIStates.Idle);\n }\n });\n\n const indicatorStoppedListener = channel.on('ai_indicator.stop', (event) => {\n const { cid } = event;\n if (channel.cid === cid) {\n setAiState(AIStates.Stop);\n }\n });\n\n return () => {\n indicatorChangedListener.unsubscribe();\n indicatorClearedListener.unsubscribe();\n indicatorStoppedListener.unsubscribe();\n };\n }, [channel]);\n\n return { aiState };\n};\n","import type { PropsWithChildren } from 'react';\nimport React, { createContext, useContext } from 'react';\n\nexport type AttachmentSelectorContextValue = {\n fileInput: HTMLInputElement | null;\n};\n\nconst AttachmentSelectorContext = createContext({\n fileInput: null,\n});\n\nexport const AttachmentSelectorContextProvider = ({\n children,\n value,\n}: PropsWithChildren<{ value: AttachmentSelectorContextValue }>) => (\n \n {children}\n \n);\n\nexport const useAttachmentSelectorContext = () => useContext(AttachmentSelectorContext);\n","import { nanoid } from 'nanoid';\nimport { StateStore } from 'stream-chat';\n\nexport type GetDialogParams = {\n id: DialogId;\n};\nexport type GetOrCreateDialogParams = GetDialogParams & {\n /**\n * Optional per-dialog override.\n * If undefined, manager-level `closeOnClickOutside` is used.\n */\n closeOnClickOutside?: boolean;\n};\n\ntype DialogId = string;\n\nexport type Dialog = {\n close: () => void;\n closeOnClickOutside?: boolean;\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 /** Enables closing all dialogs in this manager when clicking overlay/outside area. */\n closeOnClickOutside?: boolean;\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 /** Manager-level outside click policy used by DialogPortal dismiss handlers. */\n closeOnClickOutside: boolean;\n id: string;\n state = new StateStore({\n dialogsById: {},\n });\n\n constructor({ closeOnClickOutside = true, id }: DialogManagerOptions = {}) {\n this.closeOnClickOutside = closeOnClickOutside;\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): Dialog | undefined {\n return this.state.getLatestValue().dialogsById[id];\n }\n\n getOrCreate({ closeOnClickOutside, id }: GetOrCreateDialogParams) {\n let dialog = this.get(id);\n if (!dialog) {\n dialog = {\n close: () => {\n this.close(id);\n },\n closeOnClickOutside,\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 as Dialog },\n }));\n }\n\n const shouldUpdateDialogSettings =\n dialog.closeOnClickOutside !== closeOnClickOutside || !!dialog.removalTimeout;\n\n if (shouldUpdateDialogSettings) {\n if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);\n this.state.next((current) => ({\n ...current,\n dialogsById: {\n ...current.dialogsById,\n [id]: {\n ...current.dialogsById[id],\n closeOnClickOutside,\n removalTimeout: undefined,\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 dialog = this.get(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.get(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 cancelPendingRemoval(id: DialogId) {\n const dialog = this.get(id);\n\n if (!dialog?.removalTimeout) {\n return;\n }\n\n clearTimeout(dialog.removalTimeout);\n\n this.state.next((current) => ({\n ...current,\n dialogsById: {\n ...current.dialogsById,\n [id]: {\n ...current.dialogsById[id],\n removalTimeout: undefined,\n },\n },\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 {\n DialogManagerState,\n GetOrCreateDialogParams,\n} from '../service/DialogManager';\n\nexport type UseDialogParams = GetOrCreateDialogParams & {\n dialogManagerId?: string;\n};\n\nexport const useDialog = ({\n closeOnClickOutside,\n dialogManagerId,\n id,\n}: UseDialogParams) => {\n const { dialogManager } = useDialogManager({ dialogManagerId });\n\n useEffect(() => {\n dialogManager.cancelPendingRemoval(id);\n\n return () => {\n // Since this cleanup can run even if the component is still mounted\n // and dialog id is unchanged (e.g. in ), it's safer to\n // mark state as unused and only remove it after a timeout, rather than\n // to remove it immediately.\n dialogManager.markForRemoval(id);\n };\n }, [dialogManager, id]);\n\n return dialogManager.getOrCreate({ closeOnClickOutside, id });\n};\n\nexport const useDialogOnNearestManager = ({ id }: Pick) => {\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 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 { PropsWithChildren } from 'react';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { useDialogIsOpen, useOpenedDialogCount } from '../hooks';\nimport { Portal } from '../../Portal/Portal';\nimport { useDialogManager, useNearestDialogManagerContext } from '../../../context';\n\nconst shouldCloseOnOutsideClick = ({\n dialog,\n managerCloseOnClickOutside,\n}: {\n dialog: { closeOnClickOutside?: boolean };\n managerCloseOnClickOutside: boolean;\n}) => dialog.closeOnClickOutside ?? managerCloseOnClickOutside;\n\nexport const DialogPortalDestination = () => {\n const { dialogManager } = useNearestDialogManagerContext() ?? {};\n const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });\n const [destinationRoot, setDestinationRoot] = useState(null);\n\n // Handle clicks outside dialog contents.\n // Clicks on the overlay itself or outside it close open dialogs;\n // only clicks on dialog contents (descendants) are ignored.\n useEffect(() => {\n if (!destinationRoot || !dialogManager) return;\n\n const handleDocumentClick = (event: MouseEvent) => {\n const target = event.target as Node;\n const clickedOverlay = (target as HTMLElement).closest?.(\n '[data-str-chat__portal-id]',\n );\n if (clickedOverlay && clickedOverlay !== destinationRoot) return;\n if (target !== destinationRoot && destinationRoot.contains(target)) return;\n // Defer so target onClick handlers (e.g. context-menu toggle buttons) can run first.\n setTimeout(() => {\n Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(\n (dialog) => {\n if (!dialog.isOpen) return;\n if (\n !shouldCloseOnOutsideClick({\n dialog,\n managerCloseOnClickOutside: dialogManager.closeOnClickOutside,\n })\n )\n return;\n dialogManager.close(dialog.id);\n },\n );\n }, 0);\n };\n\n document.addEventListener('click', handleDocumentClick, { capture: true });\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, { capture: true });\n };\n }, [destinationRoot, dialogManager]);\n\n if (!openedDialogCount) return null;\n\n return (\n 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 React, {\n type PropsWithChildren,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { StateStore } from 'stream-chat';\n\nimport { DialogManager } from '../components/Dialog/service/DialogManager';\nimport { DialogPortalDestination } from '../components/Dialog/service/DialogPortal';\nimport type { PropsWithChildrenOnly } from '../types/types';\n\ntype DialogManagerId = string;\n\ntype DialogManagersState = Record;\nconst dialogManagersRegistry: StateStore = new StateStore({});\n\nconst getDialogManager = (id: string): DialogManager | undefined =>\n dialogManagersRegistry.getLatestValue()[id];\n\nconst getOrCreateDialogManager = ({\n closeOnClickOutside,\n id,\n}: {\n closeOnClickOutside?: boolean;\n id: string;\n}) => {\n let manager = getDialogManager(id);\n if (!manager) {\n manager = new DialogManager({ closeOnClickOutside, id });\n dialogManagersRegistry.partialNext({ [id]: manager });\n } else if (typeof closeOnClickOutside === 'boolean') {\n manager.closeOnClickOutside = closeOnClickOutside;\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\ntype DialogManagerProviderProps = PropsWithChildren<{\n /**\n * Manager-level outside click policy.\n * When `true`, clicking overlay or outside overlay-covered area closes all dialogs\n * in this manager. When `false`, outside clicks do not dismiss dialogs.\n */\n closeOnClickOutside?: boolean;\n id?: string;\n}>;\n\n/**\n * Creates/provides a dialog manager and its portal destination.\n */\nexport const DialogManagerProvider = ({\n children,\n closeOnClickOutside,\n id,\n}: DialogManagerProviderProps) => {\n const [dialogManager, setDialogManager] = useState(() => {\n if (id) return getDialogManager(id) ?? null;\n return new DialogManager({ closeOnClickOutside }); // will not be included in the registry\n });\n\n useEffect(() => {\n if (!id) return;\n setDialogManager(getOrCreateDialogManager({ closeOnClickOutside, id }));\n return () => {\n removeDialogManager(id);\n setDialogManager(null);\n };\n }, [closeOnClickOutside, 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};\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 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 { ReactEventHandler } from '../components/Message/types';\nimport type { MessageActionsArray } from '../components/Message/utils';\nimport type { GroupStyle } from '../components/MessageList/utils';\nimport type { ReactionsComparator, ReactionType } from '../components/Reactions/types';\n\nimport type { RenderTextOptions } from '../components/Message/renderText';\n\nexport type MessageContextValue = {\n /** If actions such as edit, delete, flag, mute are enabled on Message */\n actionsEnabled: 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: (options?: DeleteMessageOptions) => Promise | void;\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 /** 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 /** 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 /** 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 /** When set, shows the sender avatar in a grid layout. Values: true | 'incoming' | 'outgoing'. */\n showAvatar?: boolean | 'incoming' | 'outgoing';\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 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 * User-specific view for translated messages: which text to show.\n * - `'original'`: show `message.text` (source language).\n * - `'translated'`: show the translation for the **current user language** (from\n * `useTranslationContext().userLanguage`), i.e. `message.i18n[userLanguage + '_text']`\n * or fallback to `message.text` when missing. Resolved via `getTranslatedMessageText`.\n */\n translationView?: 'original' | 'translated';\n /** Set whether this message shows original or translated text (user-specific, does not change message data). */\n setTranslationView?: (view: 'original' | 'translated') => void;\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","import type { MessageComposer } from 'stream-chat';\n\ntype RestoreFunction = () => void;\n\nconst snapshots = new WeakMap();\n\n/**\n * Captures a full state snapshot of the composer before entering edit mode.\n * Does nothing if a snapshot already exists (e.g. switching between edits).\n */\nexport const savePreEditSnapshot = (messageComposer: MessageComposer) => {\n if (snapshots.has(messageComposer)) return;\n\n const composerState = messageComposer.state.getLatestValue();\n const textState = messageComposer.textComposer.state.getLatestValue();\n const attachmentState = messageComposer.attachmentManager.state.getLatestValue();\n const linkPreviewState = messageComposer.linkPreviewsManager.state.getLatestValue();\n const locationState = messageComposer.locationComposer.state.getLatestValue();\n const pollState = messageComposer.pollComposer.state.getLatestValue();\n const customDataState = messageComposer.customDataManager.state.getLatestValue();\n\n snapshots.set(messageComposer, () => {\n messageComposer.state.next(composerState);\n messageComposer.textComposer.state.next(textState);\n messageComposer.attachmentManager.state.next(attachmentState);\n messageComposer.linkPreviewsManager.state.next(linkPreviewState);\n messageComposer.locationComposer.state.next(locationState);\n messageComposer.pollComposer.state.next(pollState);\n messageComposer.customDataManager.state.next(customDataState);\n });\n};\n\n/**\n * Restores the composer to the state captured before editing began.\n * Falls back to `clear()` if no snapshot exists.\n */\nexport const restorePreEditSnapshot = (messageComposer: MessageComposer) => {\n const restore = snapshots.get(messageComposer);\n snapshots.delete(messageComposer);\n if (restore) {\n restore();\n } else {\n messageComposer.clear();\n }\n};\n\n/**\n * Discards the snapshot without restoring (e.g. after a successful edit save).\n */\nexport const discardPreEditSnapshot = (messageComposer: MessageComposer) => {\n snapshots.delete(messageComposer);\n};\n","import type { ReactEventHandler } from 'react';\nimport React, { createContext, useCallback, useContext, useMemo } from 'react';\nimport { useMessageContext } from './MessageContext';\nimport { useChannelActionContext } from './ChannelActionContext';\nimport { isMessageBounced, useMessageComposerController } from '../components';\nimport { savePreEditSnapshot } from '../components/MessageComposer/preEditSnapshot';\nimport type { LocalMessage } from 'stream-chat';\nimport type { PropsWithChildrenOnly } from '../types/types';\n\nexport interface MessageBounceContextValue {\n handleDelete: ReactEventHandler;\n handleEdit: ReactEventHandler;\n handleRetry: ReactEventHandler;\n message: LocalMessage;\n}\n\nconst MessageBounceContext = createContext(\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 messageComposer = useMessageComposerController();\n const { handleRetry: doHandleRetry, message } = useMessageContext(\n 'MessageBounceProvider',\n );\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 e.preventDefault();\n savePreEditSnapshot(messageComposer);\n messageComposer.initState({ composition: message });\n },\n [message, messageComposer],\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';\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","/**\n * Message translation view context: user-specific state for whether each message\n * shows original text or a translation.\n *\n * ## Spec\n *\n * - **State**: Per message list (channel vs thread), we store a map\n * `messageId → 'original' | 'translated'`. Default for messages with `message.i18n`\n * is `'translated'`; otherwise `'original'`.\n *\n * - **Provider placement**: The provider is tied to the **message list**, not the channel.\n * It is rendered inside `MessageList` and `VirtualizedMessageList`. That way the\n * main channel list and the thread list each have their own translation view state\n * (e.g. Thread.tsx gets correct behavior without sharing channel state).\n *\n * - **Multiple translations**: `message.i18n` can contain multiple languages, e.g.:\n * `{ en_text: \"Good morning\", fr_text: \"Bonjour\", it_text: \"Buongiorno\", language: \"en\" }`.\n * Which translation is shown is determined by the app’s **user language**\n * (`useTranslationContext().userLanguage`). We use `message.i18n[userLanguage + '_text']`;\n * if missing, we fall back to `message.text`. Only one translation is shown at a time.\n *\n * - **Source language**: When present, `message.i18n.language` is the original/source\n * language of `message.text`. It can be used for the indicator label, e.g.\n * \"Translated from English · View original\".\n *\n * - **Invariants**: The original message content, layout, grouping, and order stay\n * unchanged. Removing or toggling translation only changes the annotation and which\n * text is displayed. \"View original\" / \"View translation\" switch the displayed\n * text and update the annotation (e.g. \"Original · View translation\" when showing\n * original).\n *\n * - **Translation indicator visibility**: The translation indicator (e.g. \"Translated ·\n * View original\") is **not** shown when the currently viewed text already corresponds\n * to `userLanguage` — for example when viewing original and the original text is the\n * user-language version (i.e. `getTranslatedMessageText({ language: userLanguage, message })`\n * equals `message.text`). In that case there is no meaningful original/translated choice,\n * so the indicator is hidden.\n */\n\nimport React, { createContext, useCallback, useContext, useState } from 'react';\nimport type { LocalMessage, TranslationLanguages } from 'stream-chat';\n\n/**\n * Returns the translated message text for a given language from `message.i18n`, or\n * undefined if not present. Used to resolve which of the multiple translations to show.\n */\nexport const getTranslatedMessageText = ({\n language,\n message,\n}: {\n language: string;\n message?: LocalMessage;\n}): string | undefined =>\n message?.i18n?.[`${language}_text` as `${TranslationLanguages}_text`];\n\n/**\n * Which message text to show.\n * - `'original'`: `message.text` (source language).\n * - `'translated'`: translation for the **current user language** (TranslationContext’s\n * `userLanguage`), i.e. `getTranslatedMessageText({ language: userLanguage, message })`\n * or fallback to `message.text`.\n */\nexport type TranslationView = 'original' | 'translated';\n\nexport type MessageTranslationViewContextValue = {\n getTranslationView: (messageId: string, hasI18n: boolean) => TranslationView;\n setTranslationView: (messageId: string, view: TranslationView) => void;\n};\n\nconst defaultContextValue: MessageTranslationViewContextValue = {\n getTranslationView: (_messageId, hasI18n) => (hasI18n ? 'translated' : 'original'),\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n setTranslationView: () => {},\n};\n\nexport const MessageTranslationViewContext =\n createContext(defaultContextValue);\n\nexport const MessageTranslationViewProvider = ({\n children,\n}: {\n children: React.ReactNode;\n}) => {\n const [viewByMessageId, setViewByMessageId] = useState>(\n {},\n );\n\n const setTranslationView = useCallback((messageId: string, view: TranslationView) => {\n setViewByMessageId((prev) => ({ ...prev, [messageId]: view }));\n }, []);\n\n const getTranslationView = useCallback(\n (messageId: string, hasI18n: boolean): TranslationView =>\n viewByMessageId[messageId] ?? (hasI18n ? 'translated' : 'original'),\n [viewByMessageId],\n );\n\n const stableValue = React.useMemo(\n () => ({ getTranslationView, setTranslationView }),\n [getTranslationView, setTranslationView],\n );\n\n return (\n \n {children}\n \n );\n};\n\nexport const useMessageTranslationViewContext =\n (): MessageTranslationViewContextValue => {\n const context = useContext(MessageTranslationViewContext);\n return context ?? defaultContextValue;\n };\n","import type { PropsWithChildren } from 'react';\nimport React, { useContext } from 'react';\n\nexport type ModalContextValue = {\n close: () => void;\n dialogId?: string;\n};\n\nexport const ModalContext = React.createContext(undefined);\n\nexport const ModalContextProvider = ({\n children,\n value,\n}: PropsWithChildren<{\n value: ModalContextValue;\n}>) => {children};\n\nexport const useModalContext = () => {\n const contextValue = useContext(ModalContext);\n\n if (!contextValue) {\n console.warn(\n `The useModalContext hook was called outside of the ModalContext provider. Make sure this hook is called within a child of the GlobalModal.`,\n );\n\n return { close: () => null };\n }\n\n return contextValue;\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 type { PropsWithChildren } from 'react';\n\nimport { ComponentContext } from './ComponentContext';\nimport type { ComponentContextValue } from './ComponentContext';\n\nexport function WithComponents({\n children,\n overrides,\n}: PropsWithChildren<{ overrides: Partial }>) {\n const parentOverrides = useContext(ComponentContext);\n const actualOverrides: ComponentContextValue = { ...parentOverrides, ...overrides };\n return (\n \n {children}\n \n );\n}\n","import React from 'react';\nimport type { Channel } from 'stream-chat';\n\nimport { AIStates, useAIState } from './hooks/useAIState';\n\nimport { useChannelStateContext, useTranslationContext } from '../../context';\n\nexport type AIStateIndicatorProps = {\n channel?: Channel;\n};\n\nexport const AIStateIndicator = ({\n channel: channelFromProps,\n}: AIStateIndicatorProps) => {\n const { t } = useTranslationContext();\n const { channel: channelFromContext } = useChannelStateContext('AIStateIndicator');\n const channel = channelFromProps || channelFromContext;\n const { aiState } = useAIState(channel);\n const allowedStates = {\n [AIStates.Thinking]: t('Thinking...'),\n [AIStates.Generating]: t('Generating...'),\n };\n\n return aiState in allowedStates ? (\n
\n

{allowedStates[aiState]}

\n
\n ) : null;\n};\n","import React, { type ComponentPropsWithoutRef, type CSSProperties } from 'react';\n\nexport type VisuallyHiddenProps = ComponentPropsWithoutRef<'span'>;\n\nconst visuallyHiddenStyle: CSSProperties = {\n border: 0,\n clip: 'rect(0, 0, 0, 0)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n whiteSpace: 'nowrap',\n width: '1px',\n};\n\n/**\n * Hides content visually while preserving it for assistive technologies.\n */\nexport const VisuallyHidden = ({ children, style, ...rest }: VisuallyHiddenProps) => (\n \n {children}\n \n);\n","import { createContext, useContext } from 'react';\n\nexport type AriaLivePriority = 'assertive' | 'polite';\nexport type AriaLiveAnnounce = (message: string, priority?: AriaLivePriority) => void;\n\nexport type AriaLiveAnnouncerContextValue = {\n announce: AriaLiveAnnounce;\n};\n\nconst noopAnnounce: AriaLiveAnnounce = () => undefined;\n\nexport const AriaLiveAnnouncerContext = createContext<\n AriaLiveAnnouncerContextValue | undefined\n>(undefined);\n\nexport const useAriaLiveAnnouncer = () => {\n const contextValue = useContext(AriaLiveAnnouncerContext);\n\n if (!contextValue) {\n console.warn(\n 'The useAriaLiveAnnouncer hook was called outside of the AriaLiveRegion provider.',\n );\n\n return noopAnnounce;\n }\n\n return contextValue.announce;\n};\n","import type { PropsWithChildren } from 'react';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Portal } from '../Portal/Portal';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport {\n type AriaLiveAnnounce,\n AriaLiveAnnouncerContext,\n type AriaLivePriority,\n} from './useAriaLiveAnnouncer';\n\ntype SequenceByPriority = {\n [key in AriaLivePriority]: number;\n};\n\ntype TimeoutByPriority = {\n [key in AriaLivePriority]: ReturnType | undefined;\n};\n\nexport const AriaLiveRegion = ({ children }: PropsWithChildren) => {\n const [assertiveMessage, setAssertiveMessage] = useState('');\n const [politeMessage, setPoliteMessage] = useState('');\n const sequenceByPriorityRef = useRef({\n assertive: 0,\n polite: 0,\n });\n const timeoutByPriorityRef = useRef({\n assertive: undefined,\n polite: undefined,\n });\n const unmountedRef = useRef(false);\n\n const clearPendingTimeout = useCallback((priority: AriaLivePriority) => {\n if (!timeoutByPriorityRef.current[priority]) return;\n clearTimeout(timeoutByPriorityRef.current[priority]);\n timeoutByPriorityRef.current[priority] = undefined;\n }, []);\n\n const clearPendingTimeouts = useCallback(() => {\n clearPendingTimeout('assertive');\n clearPendingTimeout('polite');\n }, [clearPendingTimeout]);\n\n const announce = useCallback(\n (message, priority = 'polite') => {\n const setAnnouncement =\n priority === 'assertive' ? setAssertiveMessage : setPoliteMessage;\n const sequence = sequenceByPriorityRef.current[priority] + 1;\n\n sequenceByPriorityRef.current[priority] = sequence;\n clearPendingTimeout(priority);\n setAnnouncement('');\n timeoutByPriorityRef.current[priority] = setTimeout(() => {\n if (unmountedRef.current) return;\n if (sequenceByPriorityRef.current[priority] !== sequence) return;\n setAnnouncement(message);\n timeoutByPriorityRef.current[priority] = undefined;\n }, 50);\n },\n [clearPendingTimeout],\n );\n\n useEffect(() => {\n unmountedRef.current = false;\n\n return () => {\n unmountedRef.current = true;\n clearPendingTimeouts();\n };\n }, [clearPendingTimeouts]);\n\n const contextValue = useMemo(() => ({ announce }), [announce]);\n\n const getPortalDestination = useCallback(() => document.body, []);\n\n return (\n \n {children}\n \n \n \n {politeMessage}\n \n \n {assertiveMessage}\n \n \n \n \n );\n};\n","import { useCallback } from 'react';\nimport { useChatContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport type { Notification, NotificationManagerState } from 'stream-chat';\nimport { isNotificationForPanel } from '../notificationTarget';\n\nimport type { NotificationTargetPanel } from '../notificationTarget';\n\nexport type UseNotificationsFilter = (notification: Notification) => boolean;\n\nexport type UseNotificationsOptions = {\n /**\n * When provided, only notifications that pass this filter are returned.\n * Use to have a given NotificationList consume only a subset of client.notifications\n * (e.g. by origin.emitter, origin.context, or metadata).\n */\n filter?: UseNotificationsFilter;\n /**\n * Panel target consumed by a specific notification list.\n */\n panel?: NotificationTargetPanel;\n /**\n * Fallback panel used when origin.context.panel is absent.\n * Defaults to `channel`.\n */\n fallbackPanel?: NotificationTargetPanel;\n};\n\n/**\n * Subscribes to client.notifications.store and returns the list of notifications.\n * Optionally pass a filter so only notifications that match are returned (e.g. for a specific NotificationList).\n */\nexport const useNotifications = (options?: UseNotificationsOptions): Notification[] => {\n const { client } = useChatContext();\n const selector = useCallback(\n (state: NotificationManagerState) => {\n const notifications = state.notifications;\n const panel = options?.panel;\n const byPanel = panel\n ? notifications.filter((notification) =>\n isNotificationForPanel(notification, panel, {\n fallbackPanel: options?.fallbackPanel,\n }),\n )\n : notifications;\n\n return {\n notifications: options?.filter ? byPanel.filter(options.filter) : byPanel,\n };\n },\n [options?.fallbackPanel, options?.filter, options?.panel],\n );\n\n const { notifications } = useStateStore(client.notifications.store, selector);\n\n return notifications;\n};\n","import React from 'react';\nimport { Button } from './Button';\nimport type { ComponentProps } from 'react';\nimport clsx from 'clsx';\nimport { IconPauseFill, IconPlayFill } from '../Icons';\nimport { useTranslationContext } from '../../context';\n\nexport type PlayButtonProps = ComponentProps<'button'> & {\n isPlaying: boolean;\n};\n\nexport const PlayButton = ({ className, isPlaying, ...props }: PlayButtonProps) => {\n const { t } = useTranslationContext();\n return (\n \n {isPlaying ? : }\n \n );\n};\n","!function(e,n){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=n():\"function\"==typeof define&&define.amd?define(n):e.dayjs_plugin_updateLocale=n()}(this,function(){\"use strict\";return function(e,n,t){t.updateLocale=function(e,n){var o=t.Ls[e];if(o)return(n?Object.keys(n):[]).forEach(function(e){o[e]=n[e]}),o}}});\n","!function(n,t){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=t():\"function\"==typeof define&&define.amd?define(t):n.dayjs_plugin_localeData=t()}(this,function(){\"use strict\";return function(n,t,e){var r=function(n){return n&&(n.indexOf?n:n.s)},o=function(n,t,e,o,u){var a=n.name?n:n.$locale(),i=r(a[t]),s=r(a[e]),d=i||s.map(function(n){return n.substr(0,o)});if(!u)return d;var f=a.weekStart;return d.map(function(n,t){return d[(t+(f||0))%7]})},u=function(){return e.Ls[e.locale()]},a=function(n,t){return n.formats[t]||function(n){return n.replace(/(\\[[^\\]]+])|(MMMM|MM|DD|dddd)/g,function(n,t,e){return t||e.slice(1)})}(n.formats[t.toUpperCase()])};t.prototype.localeData=function(){return function(){var n=this;return{months:function(t){return t?t.format(\"MMMM\"):o(n,\"months\")},monthsShort:function(t){return t?t.format(\"MMM\"):o(n,\"monthsShort\",\"months\",3)},firstDayOfWeek:function(){return n.$locale().weekStart||0},weekdays:function(t){return t?t.format(\"dddd\"):o(n,\"weekdays\")},weekdaysMin:function(t){return t?t.format(\"dd\"):o(n,\"weekdaysMin\",\"weekdays\",2)},weekdaysShort:function(t){return t?t.format(\"ddd\"):o(n,\"weekdaysShort\",\"weekdays\",3)},longDateFormat:function(t){return a(n.$locale(),t)},meridiem:this.$locale().meridiem,ordinal:this.$locale().ordinal}}.bind(this)()},e.localeData=function(){var n=u();return{firstDayOfWeek:function(){return n.weekStart||0},weekdays:function(){return e.weekdays()},weekdaysShort:function(){return e.weekdaysShort()},weekdaysMin:function(){return e.weekdaysMin()},months:function(){return e.months()},monthsShort:function(){return e.monthsShort()},longDateFormat:function(t){return a(n,t)},meridiem:n.meridiem,ordinal:n.ordinal}},e.months=function(){return o(u(),\"months\")},e.monthsShort=function(){return o(u(),\"monthsShort\",\"months\",3)},e.weekdays=function(n){return o(u(),\"weekdays\",null,null,n)},e.weekdaysShort=function(n){return o(u(),\"weekdaysShort\",\"weekdays\",3,n)},e.weekdaysMin=function(n){return o(u(),\"weekdaysMin\",\"weekdays\",2,n)}}});\n","!function(r,t){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=t():\"function\"==typeof define&&define.amd?define(t):r.dayjs_plugin_relativeTime=t()}(this,function(){\"use strict\";return function(r,t,e){r=r||{};var n=t.prototype,o={future:\"in %s\",past:\"%s ago\",s:\"a few seconds\",m:\"a minute\",mm:\"%d minutes\",h:\"an hour\",hh:\"%d hours\",d:\"a day\",dd:\"%d days\",M:\"a month\",MM:\"%d months\",y:\"a year\",yy:\"%d years\"};function i(r,t,e,o){return n.fromToBase(r,t,e,o)}e.en.relativeTime=o,n.fromToBase=function(t,n,i,d,u){for(var a,f,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:\"s\",r:44,d:\"second\"},{l:\"m\",r:89},{l:\"mm\",r:44,d:\"minute\"},{l:\"h\",r:89},{l:\"hh\",r:21,d:\"hour\"},{l:\"d\",r:35},{l:\"dd\",r:25,d:\"day\"},{l:\"M\",r:45},{l:\"MM\",r:10,d:\"month\"},{l:\"y\",r:17},{l:\"yy\",d:\"year\"}],m=h.length,c=0;c0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(\"\"+p)),f=\"string\"==typeof v?v.replace(\"%d\",p):v(p,n,y.l,s);break}}if(n)return f;var M=s?l.future:l.past;return\"function\"==typeof M?M(f):M.replace(\"%s\",f)},n.to=function(r,t){return i(r,t,this,!0)},n.from=function(r,t){return i(r,t,this)};var d=function(r){return r.$u?e.utc():e()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)}}});\n","!function(t,s){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=s():\"function\"==typeof define&&define.amd?define(s):t.dayjs_plugin_duration=s()}(this,function(){\"use strict\";var t,s,n=/\\[([^\\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,i=/^(-|\\+)?P(?:([-+]?[0-9,.]*)Y)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)W)?(?:([-+]?[0-9,.]*)D)?(?:T(?:([-+]?[0-9,.]*)H)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)S)?)?$/,e={years:31536e6,months:2592e6,days:864e5,hours:36e5,minutes:6e4,seconds:1e3,milliseconds:1,weeks:6048e5},r=function(t){return t instanceof c},o=function(t,s,n){return new c(t,n,s.$l)},u=function(t){return s.p(t)+\"s\"},h=function(t){return t<0},a=function(t){return h(t)?Math.ceil(t):Math.floor(t)},d=function(t,s){return t?h(t)?{negative:!0,format:\"\"+function(t){return Math.abs(t)}(t)+s}:{negative:!1,format:\"\"+t+s}:{negative:!1,format:\"\"}},c=function(){function h(t,s,n){var r=this;if(this.$d={},this.$l=n,s)return o(t*e[u(s)],this);if(\"number\"==typeof t)return this.$ms=t,this.parseFromMilliseconds(),this;if(\"object\"==typeof t)return Object.keys(t).forEach(function(s){r.$d[u(s)]=t[s]}),this.calMilliseconds(),this;if(\"string\"==typeof t){var h=t.match(i);if(h)return this.$d.years=h[2],this.$d.months=h[3],this.$d.weeks=h[4],this.$d.days=h[5],this.$d.hours=h[6],this.$d.minutes=h[7],this.$d.seconds=h[8],this.calMilliseconds(),this}return this}var c=h.prototype;return c.calMilliseconds=function(){var t=this;this.$ms=Object.keys(this.$d).reduce(function(s,n){return s+(t.$d[n]||0)*e[n]},0)},c.parseFromMilliseconds=function(){var t=this.$ms;this.$d.years=a(t/31536e6),t%=31536e6,this.$d.months=a(t/2592e6),t%=2592e6,this.$d.days=a(t/864e5),t%=864e5,this.$d.hours=a(t/36e5),t%=36e5,this.$d.minutes=a(t/6e4),t%=6e4,this.$d.seconds=a(t/1e3),t%=1e3,this.$d.milliseconds=t},c.toISOString=function(){var t=d(this.$d.years,\"Y\"),s=d(this.$d.months,\"M\"),n=+this.$d.days||0;this.$d.weeks&&(n+=7*this.$d.weeks);var i=d(n,\"D\"),e=d(this.$d.hours,\"H\"),r=d(this.$d.minutes,\"M\"),o=this.$d.seconds||0;this.$d.milliseconds&&(o+=this.$d.milliseconds/1e3);var u=d(o,\"S\"),h=t.negative||s.negative||i.negative||e.negative||r.negative||u.negative,a=e.format||r.format||u.format?\"T\":\"\",c=(h?\"-\":\"\")+\"P\"+t.format+s.format+i.format+a+e.format+r.format+u.format;return\"P\"===c||\"-P\"===c?\"P0D\":c},c.toJSON=function(){return this.toISOString()},c.format=function(t){var i=t||\"YYYY-MM-DDTHH:mm:ss\",e={Y:this.$d.years,YY:s.s(this.$d.years,2,\"0\"),YYYY:s.s(this.$d.years,4,\"0\"),M:this.$d.months,MM:s.s(this.$d.months,2,\"0\"),D:this.$d.days,DD:s.s(this.$d.days,2,\"0\"),H:this.$d.hours,HH:s.s(this.$d.hours,2,\"0\"),m:this.$d.minutes,mm:s.s(this.$d.minutes,2,\"0\"),s:this.$d.seconds,ss:s.s(this.$d.seconds,2,\"0\"),SSS:s.s(this.$d.milliseconds,3,\"0\")};return i.replace(n,function(t,s){return s||String(e[t])})},c.as=function(t){return this.$ms/e[u(t)]},c.get=function(t){var s=this.$ms,n=u(t);return\"milliseconds\"===n?s%=1e3:s=\"weeks\"===n?a(s/e[n]):this.$d[n],0===s?0:s},c.add=function(t,s,n){var i;return i=s?t*e[u(s)]:r(t)?t.$ms:o(t,this).$ms,o(this.$ms+i*(n?-1:1),this)},c.subtract=function(t,s){return this.add(t,s,!0)},c.locale=function(t){var s=this.clone();return s.$l=t,s},c.clone=function(){return o(this.$ms,this)},c.humanize=function(s){return t().add(this.$ms,\"ms\").locale(this.$l).fromNow(!s)},c.milliseconds=function(){return this.get(\"milliseconds\")},c.asMilliseconds=function(){return this.as(\"milliseconds\")},c.seconds=function(){return this.get(\"seconds\")},c.asSeconds=function(){return this.as(\"seconds\")},c.minutes=function(){return this.get(\"minutes\")},c.asMinutes=function(){return this.as(\"minutes\")},c.hours=function(){return this.get(\"hours\")},c.asHours=function(){return this.as(\"hours\")},c.days=function(){return this.get(\"days\")},c.asDays=function(){return this.as(\"days\")},c.weeks=function(){return this.get(\"weeks\")},c.asWeeks=function(){return this.as(\"weeks\")},c.months=function(){return this.get(\"months\")},c.asMonths=function(){return this.as(\"months\")},c.years=function(){return this.get(\"years\")},c.asYears=function(){return this.as(\"years\")},h}();return function(n,i,e){t=e,s=e().$utils(),e.duration=function(t,s){var n=e.locale();return o(t,{$l:n},s)},e.isDuration=r;var u=i.prototype.add,h=i.prototype.subtract;i.prototype.add=function(t,s){return r(t)&&(t=t.asMilliseconds()),u.bind(this)(t,s)},i.prototype.subtract=function(t,s){return r(t)&&(t=t.asMilliseconds()),h.bind(this)(t,s)}}});\n","!function(t,i){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=i():\"function\"==typeof define&&define.amd?define(i):t.dayjs_plugin_utc=i()}(this,function(){\"use strict\";return function(t,i,e){var s=i.prototype;e.utc=function(t){return new i({date:t,utc:!0,args:arguments})},s.utc=function(t){var i=e(this.toDate(),{locale:this.$L,utc:!0});return t?i.add(this.utcOffset(),\"minute\"):i},s.local=function(){return e(this.toDate(),{locale:this.$L,utc:!1})};var f=s.parse;s.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),f.call(this,t)};var n=s.init;s.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds()}else n.call(this)};var u=s.utcOffset;s.utcOffset=function(t,i){var e=this.$utils().u;if(e(t))return this.$u?0:e(this.$offset)?u.call(this):this.$offset;var s=Math.abs(t)<=16?60*t:t,f=this;if(i)return f.$offset=s,f.$u=0===t,f;if(0!==t){var n=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(f=this.local().add(s+n,\"minute\")).$offset=s,f.$x.$localOffset=n}else f=this.utc();return f};var o=s.format;s.format=function(t){var i=t||(this.$u?\"YYYY-MM-DDTHH:mm:ss[Z]\":\"\");return o.call(this,i)},s.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||(new Date).getTimezoneOffset());return this.$d.valueOf()-6e4*t},s.isUTC=function(){return!!this.$u},s.toISOString=function(){return this.toDate().toISOString()},s.toString=function(){return this.toDate().toUTCString()};var r=s.toDate;s.toDate=function(t){return\"s\"===t&&this.$offset?e(this.format(\"YYYY-MM-DD HH:mm:ss:SSS\")).toDate():r.call(this)};var a=s.diff;s.diff=function(t,i,s){if(t&&this.$u===t.$u)return a.call(this,t,i,s);var f=this.local(),n=e(t).local();return a.call(f,n,i,s)}}});\n","!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=e():\"function\"==typeof define&&define.amd?define(e):t.dayjs_plugin_timezone=e()}(this,function(){\"use strict\";var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,r){var o,u=r().utcOffset(),a=function(t,n,i){void 0===i&&(i={});var r=new Date(t);return function(t,n){void 0===n&&(n={});var i=n.timeZoneName||\"short\",r=t+\"|\"+i,o=e[r];return o||(o=new Intl.DateTimeFormat(\"en-US\",{hour12:!1,timeZone:t,year:\"numeric\",month:\"2-digit\",day:\"2-digit\",hour:\"2-digit\",minute:\"2-digit\",second:\"2-digit\",timeZoneName:i}),e[r]=o),o}(n,i).formatToParts(r)},f=function(e,n){for(var i=a(e,n),o=[],u=0;u=0&&(o[c]=parseInt(m,10))}var d=o[3],v=24===d?0:d,h=o[0]+\"-\"+o[1]+\"-\"+o[2]+\" \"+v+\":\"+o[4]+\":\"+o[5]+\":000\",l=+e;return(r.utc(h).valueOf()-(l-=l%1e3))/6e4},s=i.prototype;s.tz=function(t,e){void 0===t&&(t=o);var n=this.utcOffset(),i=this.toDate().toLocaleString(\"en-US\",{timeZone:t}),a=Math.round((this.toDate()-new Date(i))/1e3/60),f=r(i).$set(\"millisecond\",this.$ms).utcOffset(u-a,!0);if(e){var s=f.utcOffset();f=f.add(n-s,\"minute\")}return f.$x.$timezone=t,f},s.offsetName=function(t){var e=this.$x.$timezone||r.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find(function(t){return\"timezonename\"===t.type.toLowerCase()});return n&&n.value};var m=s.startOf;s.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return m.call(this,t,e);var n=r(this.format(\"YYYY-MM-DD HH:mm:ss:SSS\"));return m.call(n,t,e).tz(this.$x.$timezone,!0)},r.tz=function(t,e,n){var i=n&&e,u=n||e||o,a=f(+r(),u);if(\"string\"!=typeof t)return r(t).tz(u);var s=function(t,e,n){var i=t-60*e*1e3,r=f(i,n);if(e===r)return[i,e];var o=f(i-=60*(r-e)*1e3,n);return r===o?[i,r]:[t-60*Math.min(r,o)*1e3,Math.max(r,o)]}(r.utc(t,i).valueOf(),a,u),m=s[0],c=s[1],d=r(m).utcOffset(c);return d.$x.$timezone=u,d},r.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},r.tz.setDefault=function(t){o=t}}});\n","import type { i18n, TFunction } from 'i18next';\n\ntype TopicName = string;\ntype TranslatorName = string;\n\nexport type Translator = Record> =\n (params: { key: string; value: string; t: TFunction; options: O }) => string | null;\n\nexport type TranslationTopicOptions<\n O extends Record = Record,\n> = {\n i18next: i18n;\n translators?: Record>;\n};\n\nexport abstract class TranslationTopic<\n O extends Record = Record,\n> {\n protected translators: Map> = new Map();\n protected i18next: i18n;\n\n constructor(protected options: TranslationTopicOptions) {\n this.i18next = options.i18next;\n if (options.translators) {\n Object.entries(options.translators).forEach(([name, translator]) => {\n this.setTranslator(name, translator);\n });\n }\n }\n\n abstract translate(value: string, key: string, options: O): string;\n\n setTranslator = (name: string, translator: Translator) => {\n this.translators.set(name, translator);\n };\n\n removeTranslator = (name: string) => {\n this.translators.delete(name);\n };\n}\n\nconst forwardTranslation: Translator = ({ value }) => value;\n\nexport type TranslationTopicConstructor = new (\n options: TranslationTopicOptions,\n) => TranslationTopic;\n\nexport class TranslationBuilder {\n private topics = new Map();\n // need to keep a registration buffer so that translators can be registered once a topic is registered\n // what does not happen when Streami18n is instantiated but rather once Streami18n.init() is invoked\n private translatorRegistrationsBuffer: Record<\n TopicName,\n Record\n > = {};\n\n constructor(private i18next: i18n) {}\n\n registerTopic = (name: TopicName, Topic: TranslationTopicConstructor) => {\n let topic = this.topics.get(name);\n\n if (!topic) {\n topic = new Topic({ i18next: this.i18next });\n this.topics.set(name, topic);\n this.i18next.use({\n name,\n process: (value: string, key: string, options: Record) => {\n const topic = this.topics.get(name);\n if (!topic) return value;\n return topic.translate(value, key, options);\n },\n type: 'postProcessor' as const,\n });\n }\n\n const additionalTranslatorsToRegister = this.translatorRegistrationsBuffer[name];\n if (additionalTranslatorsToRegister) {\n Object.entries(additionalTranslatorsToRegister).forEach(\n ([translatorName, translator]) => {\n topic.setTranslator(translatorName, translator);\n },\n );\n delete this.translatorRegistrationsBuffer[name];\n }\n return topic;\n };\n\n disableTopic = (topicName: TopicName) => {\n const topic = this.topics.get(topicName);\n if (!topic) return;\n this.i18next.use({\n name: topicName,\n process: forwardTranslation,\n type: 'postProcessor',\n });\n this.topics.delete(topicName);\n };\n\n getTopic = (topicName: TopicName) => this.topics.get(topicName);\n\n registerTranslators(\n topicName: TopicName,\n translators: Record,\n ) {\n const topic = this.getTopic(topicName);\n if (!topic) {\n if (!this.translatorRegistrationsBuffer[topicName])\n this.translatorRegistrationsBuffer[topicName] = {};\n\n Object.entries(translators).forEach(([translatorName, translator]) => {\n this.translatorRegistrationsBuffer[topicName][translatorName] = translator;\n });\n return;\n }\n Object.entries(translators).forEach(([name, translator]) => {\n topic.setTranslator(name, translator);\n });\n }\n\n removeTranslators(topicName: TopicName, translators: TranslatorName[]) {\n const topic = this.getTopic(topicName);\n if (this.translatorRegistrationsBuffer[topicName]) {\n translators.forEach((translatorName) => {\n delete this.translatorRegistrationsBuffer[topicName][translatorName];\n });\n }\n if (!topic) return;\n translators.forEach((name) => {\n topic.removeTranslator(name);\n });\n }\n}\n","import type { Notification } from 'stream-chat';\n\nimport type { NotificationTranslatorOptions } from './types';\nimport type { TranslationTopicOptions, Translator } from '../../index';\n\nconst normalizeReason = (notification?: Notification) => {\n const reason = notification?.metadata?.reason;\n if (typeof reason !== 'string' || !reason.length) return undefined;\n return reason.toLowerCase();\n};\n\nconst withReasonFallback = ({\n fallbackTranslationKey,\n notification,\n reasonTranslationKey,\n t,\n}: {\n fallbackTranslationKey: string;\n notification?: Notification;\n reasonTranslationKey: string;\n t: TranslationTopicOptions['i18next']['t'];\n}) => {\n const reason = normalizeReason(notification);\n if (!reason) return t(fallbackTranslationKey);\n return t(reasonTranslationKey, { reason });\n};\n\nexport const translateAttachmentUploadBlocked: Translator<\n NotificationTranslatorOptions\n> = ({ options: { notification }, t }) => {\n const rawReason = notification?.metadata?.reason;\n let reason = t('unsupported file type');\n if (typeof rawReason !== 'string') reason = t('unknown error');\n if (rawReason === 'size_limit') reason = t('size limit');\n return t('Attachment upload blocked due to {{reason}}', { reason });\n};\n\nexport const translateAttachmentUploadFailed: Translator<\n NotificationTranslatorOptions\n> = ({ options: { notification }, t }) =>\n withReasonFallback({\n fallbackTranslationKey: 'Error uploading attachment',\n notification,\n reasonTranslationKey: 'Attachment upload failed due to {{reason}}',\n t,\n });\n\nexport const translatePollCreateFailed: Translator = ({\n options: { notification },\n t,\n}) =>\n withReasonFallback({\n fallbackTranslationKey: 'Failed to create the poll',\n notification,\n reasonTranslationKey: 'Failed to create the poll due to {{reason}}',\n t,\n });\n\nexport const translatePollEndFailed: Translator = ({\n options: { notification },\n t,\n}) =>\n withReasonFallback({\n fallbackTranslationKey: 'Failed to end the poll',\n notification,\n reasonTranslationKey: 'Failed to end the poll due to {{reason}}',\n t,\n });\n\nexport const translateBrowserAudioPlaybackError: Translator<\n NotificationTranslatorOptions\n> = ({ options: { notification }, t }) =>\n notification?.message ? t(notification.message) : t('Error reproducing the recording');\n\nexport const translateCommandDisabled: Translator = ({\n options: { notification },\n t,\n}) => {\n const reason = normalizeReason(notification);\n\n if (reason === 'editing') {\n return t('Command not available while editing');\n }\n\n if (reason === 'quoted_message') {\n return t('Command not available while replying');\n }\n\n return t(notification?.message || 'Command not available');\n};\n","import type { NotificationTranslatorOptions } from './types';\nimport {\n translateAttachmentUploadBlocked,\n translateAttachmentUploadFailed,\n translateBrowserAudioPlaybackError,\n translateCommandDisabled,\n translatePollCreateFailed,\n translatePollEndFailed,\n} from './translators';\nimport type { Translator } from '../../index';\n\nexport const translatorsByNotificationType: Record<\n string,\n Translator\n> = {\n 'api:attachment:upload:failed': translateAttachmentUploadFailed,\n 'api:location:create:failed': ({ t }) => t('Failed to share location'),\n 'api:location:share:failed': ({ t }) => t('Failed to share location'),\n 'api:poll:create:failed': translatePollCreateFailed,\n 'api:poll:end:failed': translatePollEndFailed,\n 'api:poll:end:success': ({ t }) => t('Poll ended'),\n 'api:reply:search:failed': ({ t }) => t('Thread has not been found'),\n 'browser:audio:playback:error': translateBrowserAudioPlaybackError,\n 'browser:location:get:failed': ({ t }) => t('Failed to retrieve location'),\n 'channel:jumpToFirstUnread:failed': ({ t }) =>\n t('Failed to jump to the first unread message'),\n 'validation:attachment:file:missing': ({ t }) =>\n t('File is required for upload attachment'),\n 'validation:attachment:id:missing': ({ t }) =>\n t('Local upload attachment missing local id'),\n 'validation:attachment:upload:blocked': translateAttachmentUploadBlocked,\n 'validation:attachment:upload:in-progress': ({ t }) =>\n t('Wait until all attachments have uploaded'),\n 'validation:command:disabled': translateCommandDisabled,\n 'validation:poll:castVote:limit': ({ t }) =>\n t('Reached the vote limit. Remove an existing vote first.'),\n};\n","import { TranslationTopic } from '../../TranslationBuilder';\nimport type { Notification } from 'stream-chat';\nimport type { NotificationTranslatorOptions } from './types';\nimport { translatorsByNotificationType } from './translatorsByNotificationType';\nimport type { TranslationTopicOptions, Translator } from '../../index';\n\nconst translateByNotificationType: Translator = ({\n options: { notification },\n ...params\n}) => {\n if (!notification?.type) return null;\n const translator = translatorsByNotificationType[notification.type];\n if (!translator) return null;\n return translator({ ...params, options: { notification } });\n};\n\nexport const defaultNotificationTranslators: Record<\n string,\n Translator\n> = {\n '*': translateByNotificationType,\n};\n\nexport class NotificationTranslationTopic extends TranslationTopic {\n constructor({ i18next, translators }: TranslationTopicOptions) {\n super({ i18next, translators: defaultNotificationTranslators });\n if (translators) {\n Object.entries(translators).forEach(([name, translator]) => {\n this.setTranslator(name, translator);\n });\n }\n }\n\n translate = (value: string, key: string, options: { notification?: Notification }) => {\n const { notification } = options;\n if (!notification) return value;\n const byType = notification.type\n ? this.translators.get(notification.type)\n : undefined;\n if (byType) return byType({ key, options, t: this.i18next.t, value }) || value;\n\n const byFallback = this.translators.get('*');\n const translated = byFallback?.({ key, options, t: this.i18next.t, value }) ?? null;\n if (translated) return translated;\n if (!notification.message) return value;\n\n // Final fallback: attempt to translate message as natural key.\n return this.i18next.t(notification.message, {\n ...(notification.metadata ?? {}),\n value: notification.message,\n });\n };\n}\n","!function(e,n){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=n(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],n):e.dayjs_locale_de=n(e.dayjs)}(this,function(e){\"use strict\";e=e&&e.hasOwnProperty(\"default\")?e.default:e;var n={s:\"ein paar Sekunden\",m:[\"eine Minute\",\"einer Minute\"],mm:\"%d Minuten\",h:[\"eine Stunde\",\"einer Stunde\"],hh:\"%d Stunden\",d:[\"ein Tag\",\"einem Tag\"],dd:[\"%d Tage\",\"%d Tagen\"],M:[\"ein Monat\",\"einem Monat\"],MM:[\"%d Monate\",\"%d Monaten\"],y:[\"ein Jahr\",\"einem Jahr\"],yy:[\"%d Jahre\",\"%d Jahren\"]};function t(e,t,a){var r=n[a];return Array.isArray(r)&&(r=r[t?0:1]),r.replace(\"%d\",e)}var a={name:\"de\",weekdays:\"Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag\".split(\"_\"),weekdaysShort:\"So._Mo._Di._Mi._Do._Fr._Sa.\".split(\"_\"),weekdaysMin:\"So_Mo_Di_Mi_Do_Fr_Sa\".split(\"_\"),months:\"Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember\".split(\"_\"),monthsShort:\"Jan_Feb_März_Apr_Mai_Juni_Juli_Aug_Sept_Okt_Nov_Dez\".split(\"_\"),ordinal:function(e){return e+\".\"},weekStart:1,yearStart:4,formats:{LTS:\"HH:mm:ss\",LT:\"HH:mm\",L:\"DD.MM.YYYY\",LL:\"D. MMMM YYYY\",LLL:\"D. MMMM YYYY HH:mm\",LLLL:\"dddd, D. MMMM YYYY HH:mm\"},relativeTime:{future:\"in %s\",past:\"vor %s\",s:t,m:t,mm:t,h:t,hh:t,d:t,dd:t,M:t,MM:t,y:t,yy:t}};return e.locale(a,null,!0),a});\n","!function(e,s){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=s(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],s):e.dayjs_locale_es=s(e.dayjs)}(this,function(e){\"use strict\";e=e&&e.hasOwnProperty(\"default\")?e.default:e;var s={name:\"es\",monthsShort:\"ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic\".split(\"_\"),weekdays:\"domingo_lunes_martes_miércoles_jueves_viernes_sábado\".split(\"_\"),weekdaysShort:\"dom._lun._mar._mié._jue._vie._sáb.\".split(\"_\"),weekdaysMin:\"do_lu_ma_mi_ju_vi_sá\".split(\"_\"),months:\"Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre\".split(\"_\"),weekStart:1,formats:{LT:\"H:mm\",LTS:\"H:mm:ss\",L:\"DD/MM/YYYY\",LL:\"D [de] MMMM [de] YYYY\",LLL:\"D [de] MMMM [de] YYYY H:mm\",LLLL:\"dddd, D [de] MMMM [de] YYYY H:mm\"},relativeTime:{future:\"en %s\",past:\"hace %s\",s:\"unos segundos\",m:\"un minuto\",mm:\"%d minutos\",h:\"una hora\",hh:\"%d horas\",d:\"un día\",dd:\"%d días\",M:\"un mes\",MM:\"%d meses\",y:\"un año\",yy:\"%d años\"},ordinal:function(e){return e+\"º\"}};return e.locale(s,null,!0),s});\n","!function(e,_){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=_(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],_):e.dayjs_locale_fr=_(e.dayjs)}(this,function(e){\"use strict\";e=e&&e.hasOwnProperty(\"default\")?e.default:e;var _={name:\"fr\",weekdays:\"dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi\".split(\"_\"),weekdaysShort:\"dim._lun._mar._mer._jeu._ven._sam.\".split(\"_\"),weekdaysMin:\"di_lu_ma_me_je_ve_sa\".split(\"_\"),months:\"janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre\".split(\"_\"),monthsShort:\"janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.\".split(\"_\"),weekStart:1,yearStart:4,formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"DD/MM/YYYY\",LL:\"D MMMM YYYY\",LLL:\"D MMMM YYYY HH:mm\",LLLL:\"dddd D MMMM YYYY HH:mm\"},relativeTime:{future:\"dans %s\",past:\"il y a %s\",s:\"quelques secondes\",m:\"une minute\",mm:\"%d minutes\",h:\"une heure\",hh:\"%d heures\",d:\"un jour\",dd:\"%d jours\",M:\"un mois\",MM:\"%d mois\",y:\"un an\",yy:\"%d ans\"},ordinal:function(e){return\"\"+e+(1===e?\"er\":\"\")}};return e.locale(_,null,!0),_});\n","!function(_,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=e(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],e):_.dayjs_locale_hi=e(_.dayjs)}(this,function(_){\"use strict\";_=_&&_.hasOwnProperty(\"default\")?_.default:_;var e={name:\"hi\",weekdays:\"रविवार_सोमवार_मंगलवार_बुधवार_गुरूवार_शुक्रवार_शनिवार\".split(\"_\"),months:\"जनवरी_फ़रवरी_मार्च_अप्रैल_मई_जून_जुलाई_अगस्त_सितम्बर_अक्टूबर_नवम्बर_दिसम्बर\".split(\"_\"),weekdaysShort:\"रवि_सोम_मंगल_बुध_गुरू_शुक्र_शनि\".split(\"_\"),monthsShort:\"जन._फ़र._मार्च_अप्रै._मई_जून_जुल._अग._सित._अक्टू._नव._दिस.\".split(\"_\"),weekdaysMin:\"र_सो_मं_बु_गु_शु_श\".split(\"_\"),ordinal:function(_){return _},formats:{LT:\"A h:mm बजे\",LTS:\"A h:mm:ss बजे\",L:\"DD/MM/YYYY\",LL:\"D MMMM YYYY\",LLL:\"D MMMM YYYY, A h:mm बजे\",LLLL:\"dddd, D MMMM YYYY, A h:mm बजे\"},relativeTime:{future:\"%s में\",past:\"%s पहले\",s:\"कुछ ही क्षण\",m:\"एक मिनट\",mm:\"%d मिनट\",h:\"एक घंटा\",hh:\"%d घंटे\",d:\"एक दिन\",dd:\"%d दिन\",M:\"एक महीने\",MM:\"%d महीने\",y:\"एक वर्ष\",yy:\"%d वर्ष\"}};return _.locale(e,null,!0),e});\n","!function(e,o){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=o(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],o):e.dayjs_locale_it=o(e.dayjs)}(this,function(e){\"use strict\";e=e&&e.hasOwnProperty(\"default\")?e.default:e;var o={name:\"it\",weekdays:\"domenica_lunedì_martedì_mercoledì_giovedì_venerdì_sabato\".split(\"_\"),weekdaysShort:\"dom_lun_mar_mer_gio_ven_sab\".split(\"_\"),weekdaysMin:\"do_lu_ma_me_gi_ve_sa\".split(\"_\"),months:\"gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre\".split(\"_\"),weekStart:1,monthsShort:\"gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic\".split(\"_\"),formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"DD/MM/YYYY\",LL:\"D MMMM YYYY\",LLL:\"D MMMM YYYY HH:mm\",LLLL:\"dddd D MMMM YYYY HH:mm\"},relativeTime:{future:\"tra %s\",past:\"%s fa\",s:\"qualche secondo\",m:\"un minuto\",mm:\"%d minuti\",h:\"un' ora\",hh:\"%d ore\",d:\"un giorno\",dd:\"%d giorni\",M:\"un mese\",MM:\"%d mesi\",y:\"un anno\",yy:\"%d anni\"},ordinal:function(e){return e+\"º\"}};return e.locale(o,null,!0),o});\n","!function(_,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=e(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],e):_.dayjs_locale_ja=e(_.dayjs)}(this,function(_){\"use strict\";_=_&&_.hasOwnProperty(\"default\")?_.default:_;var e={name:\"ja\",weekdays:\"日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日\".split(\"_\"),weekdaysShort:\"日_月_火_水_木_金_土\".split(\"_\"),weekdaysMin:\"日_月_火_水_木_金_土\".split(\"_\"),months:\"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月\".split(\"_\"),monthsShort:\"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月\".split(\"_\"),ordinal:function(_){return _+\"日\"},formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"YYYY/MM/DD\",LL:\"YYYY年M月D日\",LLL:\"YYYY年M月D日 HH:mm\",LLLL:\"YYYY年M月D日 dddd HH:mm\",l:\"YYYY/MM/DD\",ll:\"YYYY年M月D日\",lll:\"YYYY年M月D日 HH:mm\",llll:\"YYYY年M月D日(ddd) HH:mm\"},meridiem:function(_){return _<12?\"午前\":\"午後\"},relativeTime:{future:\"%s後\",past:\"%s前\",s:\"数秒\",m:\"1分\",mm:\"%d分\",h:\"1時間\",hh:\"%d時間\",d:\"1日\",dd:\"%d日\",M:\"1ヶ月\",MM:\"%dヶ月\",y:\"1年\",yy:\"%d年\"}};return _.locale(e,null,!0),e});\n","!function(_,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=e(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],e):_.dayjs_locale_ko=e(_.dayjs)}(this,function(_){\"use strict\";_=_&&_.hasOwnProperty(\"default\")?_.default:_;var e={name:\"ko\",weekdays:\"일요일_월요일_화요일_수요일_목요일_금요일_토요일\".split(\"_\"),weekdaysShort:\"일_월_화_수_목_금_토\".split(\"_\"),weekdaysMin:\"일_월_화_수_목_금_토\".split(\"_\"),months:\"1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월\".split(\"_\"),monthsShort:\"1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월\".split(\"_\"),ordinal:function(_){return _},formats:{LT:\"A h:mm\",LTS:\"A h:mm:ss\",L:\"YYYY.MM.DD.\",LL:\"YYYY년 MMMM D일\",LLL:\"YYYY년 MMMM D일 A h:mm\",LLLL:\"YYYY년 MMMM D일 dddd A h:mm\",l:\"YYYY.MM.DD.\",ll:\"YYYY년 MMMM D일\",lll:\"YYYY년 MMMM D일 A h:mm\",llll:\"YYYY년 MMMM D일 dddd A h:mm\"},meridiem:function(_){return _<12?\"오전\":\"오후\"},relativeTime:{future:\"%s 후\",past:\"%s 전\",s:\"몇 초\",m:\"1분\",mm:\"%d분\",h:\"한 시간\",hh:\"%d시간\",d:\"하루\",dd:\"%d일\",M:\"한 달\",MM:\"%d달\",y:\"일 년\",yy:\"%d년\"}};return _.locale(e,null,!0),e});\n","!function(e,a){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=a(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],a):e.dayjs_locale_nl=a(e.dayjs)}(this,function(e){\"use strict\";e=e&&e.hasOwnProperty(\"default\")?e.default:e;var a={name:\"nl\",weekdays:\"zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag\".split(\"_\"),weekdaysShort:\"zo._ma._di._wo._do._vr._za.\".split(\"_\"),weekdaysMin:\"zo_ma_di_wo_do_vr_za\".split(\"_\"),months:\"januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december\".split(\"_\"),monthsShort:\"jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec\".split(\"_\"),ordinal:function(e){return e+\".\"},weekStart:1,yearStart:4,formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"DD-MM-YYYY\",LL:\"D MMMM YYYY\",LLL:\"D MMMM YYYY HH:mm\",LLLL:\"dddd D MMMM YYYY HH:mm\"},relativeTime:{future:\"over %s\",past:\"%s geleden\",s:\"een paar seconden\",m:\"een minuut\",mm:\"%d minuten\",h:\"een uur\",hh:\"%d uur\",d:\"een dag\",dd:\"%d dagen\",M:\"een maand\",MM:\"%d maanden\",y:\"een jaar\",yy:\"%d jaar\"}};return e.locale(a,null,!0),a});\n","!function(e,a){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=a(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],a):e.dayjs_locale_pt=a(e.dayjs)}(this,function(e){\"use strict\";e=e&&e.hasOwnProperty(\"default\")?e.default:e;var a={name:\"pt\",weekdays:\"Domingo_Segunda-feira_Terça-feira_Quarta-feira_Quinta-feira_Sexta-feira_Sábado\".split(\"_\"),weekdaysShort:\"Dom_Seg_Ter_Qua_Qui_Sex_Sab\".split(\"_\"),weekdaysMin:\"Do_2ª_3ª_4ª_5ª_6ª_Sa\".split(\"_\"),months:\"Janeiro_Fevereiro_Março_Abril_Maio_Junho_Julho_Agosto_Setembro_Outubro_Novembro_Dezembro\".split(\"_\"),monthsShort:\"Jan_Fev_Mar_Abr_Mai_Jun_Jul_Ago_Set_Out_Nov_Dez\".split(\"_\"),ordinal:function(e){return e+\"º\"},weekStart:1,yearStart:4,formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"DD/MM/YYYY\",LL:\"D [de] MMMM [de] YYYY\",LLL:\"D [de] MMMM [de] YYYY [às] HH:mm\",LLLL:\"dddd, D [de] MMMM [de] YYYY [às] HH:mm\"},relativeTime:{future:\"em %s\",past:\"há %s\",s:\"alguns segundos\",m:\"um minuto\",mm:\"%d minutos\",h:\"uma hora\",hh:\"%d horas\",d:\"um dia\",dd:\"%d dias\",M:\"um mês\",MM:\"%d meses\",y:\"um ano\",yy:\"%d anos\"}};return e.locale(a,null,!0),a});\n","!function(_,t){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=t(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],t):_.dayjs_locale_ru=t(_.dayjs)}(this,function(_){\"use strict\";_=_&&_.hasOwnProperty(\"default\")?_.default:_;var t=\"января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря\".split(\"_\"),e=\"январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь\".split(\"_\"),n=\"янв._февр._мар._апр._мая_июня_июля_авг._сент._окт._нояб._дек.\".split(\"_\"),s=\"янв._февр._март_апр._май_июнь_июль_авг._сент._окт._нояб._дек.\".split(\"_\"),r=/D[oD]?(\\[[^[\\]]*\\]|\\s)+MMMM?/;function o(_,t,e){var n,s;return\"m\"===e?t?\"минута\":\"минуту\":_+\" \"+(n=+_,s={mm:t?\"минута_минуты_минут\":\"минуту_минуты_минут\",hh:\"час_часа_часов\",dd:\"день_дня_дней\",MM:\"месяц_месяца_месяцев\",yy:\"год_года_лет\"}[e].split(\"_\"),n%10==1&&n%100!=11?s[0]:n%10>=2&&n%10<=4&&(n%100<10||n%100>=20)?s[1]:s[2])}var d=function(_,n){return r.test(n)?t[_.month()]:e[_.month()]};d.s=e,d.f=t;var i=function(_,t){return r.test(t)?n[_.month()]:s[_.month()]};i.s=s,i.f=n;var m={name:\"ru\",weekdays:\"воскресенье_понедельник_вторник_среда_четверг_пятница_суббота\".split(\"_\"),weekdaysShort:\"вск_пнд_втр_срд_чтв_птн_сбт\".split(\"_\"),weekdaysMin:\"вс_пн_вт_ср_чт_пт_сб\".split(\"_\"),months:d,monthsShort:i,weekStart:1,formats:{LT:\"H:mm\",LTS:\"H:mm:ss\",L:\"DD.MM.YYYY\",LL:\"D MMMM YYYY г.\",LLL:\"D MMMM YYYY г., H:mm\",LLLL:\"dddd, D MMMM YYYY г., H:mm\"},relativeTime:{future:\"через %s\",past:\"%s назад\",s:\"несколько секунд\",m:o,mm:o,h:\"час\",hh:o,d:\"день\",dd:o,M:\"месяц\",MM:o,y:\"год\",yy:o},ordinal:function(_){return _}};return _.locale(m,null,!0),m});\n","!function(a,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=e(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],e):a.dayjs_locale_tr=e(a.dayjs)}(this,function(a){\"use strict\";a=a&&a.hasOwnProperty(\"default\")?a.default:a;var e={name:\"tr\",weekdays:\"Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi\".split(\"_\"),weekdaysShort:\"Paz_Pts_Sal_Çar_Per_Cum_Cts\".split(\"_\"),weekdaysMin:\"Pz_Pt_Sa_Ça_Pe_Cu_Ct\".split(\"_\"),months:\"Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık\".split(\"_\"),monthsShort:\"Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara\".split(\"_\"),weekStart:1,formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"DD.MM.YYYY\",LL:\"D MMMM YYYY\",LLL:\"D MMMM YYYY HH:mm\",LLLL:\"dddd, D MMMM YYYY HH:mm\"},relativeTime:{future:\"%s sonra\",past:\"%s önce\",s:\"birkaç saniye\",m:\"bir dakika\",mm:\"%d dakika\",h:\"bir saat\",hh:\"%d saat\",d:\"bir gün\",dd:\"%d gün\",M:\"bir ay\",MM:\"%d ay\",y:\"bir yıl\",yy:\"%d yıl\"},ordinal:function(a){return a+\".\"}};return a.locale(e,null,!0),e});\n","!function(e,n){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=n():\"function\"==typeof define&&define.amd?define(n):e.dayjs_locale_en=n()}(this,function(){\"use strict\";return{name:\"en\",weekdays:\"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday\".split(\"_\"),months:\"January_February_March_April_May_June_July_August_September_October_November_December\".split(\"_\")}});\n","import i18n from 'i18next';\nimport Dayjs from 'dayjs';\nimport calendar from 'dayjs/plugin/calendar';\nimport updateLocale from 'dayjs/plugin/updateLocale';\nimport LocalizedFormat from 'dayjs/plugin/localizedFormat';\nimport localeData from 'dayjs/plugin/localeData';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport duration from 'dayjs/plugin/duration';\nimport utc from 'dayjs/plugin/utc';\nimport timezone from 'dayjs/plugin/timezone';\nimport { NotificationTranslationTopic, TranslationBuilder } from './TranslationBuilder';\nimport { defaultTranslatorFunction, predefinedFormatters } from './utils';\n\nimport type { TFunction } from 'i18next';\nimport type momentTimezone from 'moment-timezone';\nimport type { TranslationLanguages } from 'stream-chat';\n\nimport type { TranslationTopicConstructor } from './TranslationBuilder';\nimport type { UnknownType } from '../types/types';\nimport type { CustomFormatters, PredefinedFormatters, TDateTimeParser } from './types';\n\nimport {\n deTranslations,\n enTranslations,\n esTranslations,\n frTranslations,\n hiTranslations,\n itTranslations,\n jaTranslations,\n koTranslations,\n nlTranslations,\n ptTranslations,\n ruTranslations,\n trTranslations,\n} from './translations';\n\nimport 'dayjs/locale/de';\nimport 'dayjs/locale/es';\nimport 'dayjs/locale/fr';\nimport 'dayjs/locale/hi';\nimport 'dayjs/locale/it';\nimport 'dayjs/locale/ja';\nimport 'dayjs/locale/ko';\nimport 'dayjs/locale/nl';\nimport 'dayjs/locale/pt';\nimport 'dayjs/locale/ru';\nimport 'dayjs/locale/tr';\n// These locale imports also set these locale globally.\n// So As a last step I am going to import english locale\n// to make sure I don't mess up language at other places in app.\nimport 'dayjs/locale/en';\n\nconst defaultNS = 'translation';\nconst defaultLng = 'en';\n\ntype CalendarLocaleConfig = {\n lastDay: string;\n lastWeek: string;\n nextDay: string;\n nextWeek: string;\n sameDay: string;\n sameElse: string;\n};\n\nDayjs.extend(updateLocale);\nDayjs.extend(utc);\nDayjs.extend(timezone);\n\nDayjs.updateLocale('de', {\n calendar: {\n lastDay: '[gestern um] LT',\n lastWeek: '[letzten] dddd [um] LT',\n nextDay: '[morgen um] LT',\n nextWeek: 'dddd [um] LT',\n sameDay: '[heute um] LT',\n sameElse: 'L',\n },\n});\n\nDayjs.updateLocale('es', {\n calendar: {\n lastDay: '[ayer a las] LT',\n lastWeek: '[pasado] dddd [a] LT',\n nextDay: '[mañana a] LT',\n nextWeek: 'dddd [a] LT',\n sameDay: '[hoy a las] LT',\n sameElse: 'L',\n },\n});\n\nDayjs.updateLocale('fr', {\n calendar: {\n lastDay: '[Hier à] LT',\n lastWeek: 'dddd [dernier à] LT',\n nextDay: '[Demain à] LT',\n nextWeek: 'dddd [à] LT',\n sameDay: \"[Aujourd'hui à] LT\",\n sameElse: 'L',\n },\n});\n\nDayjs.updateLocale('hi', {\n calendar: {\n lastDay: '[कल] LT',\n lastWeek: '[पिछले] dddd, LT',\n nextDay: '[कल] LT',\n nextWeek: 'dddd, LT',\n sameDay: '[आज] LT',\n sameElse: 'L',\n },\n // Hindi notation for meridiems are quite fuzzy in practice. While there exists\n // a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.\n meridiem(hour: number) {\n if (hour < 4) {\n return 'रात';\n } else if (hour < 10) {\n return 'सुबह';\n } else if (hour < 17) {\n return 'दोपहर';\n } else if (hour < 20) {\n return 'शाम';\n } else {\n return 'रात';\n }\n },\n meridiemHour(hour: number, meridiem: string) {\n if (hour === 12) {\n hour = 0;\n }\n if (meridiem === 'रात') {\n return hour < 4 ? hour : hour + 12;\n } else if (meridiem === 'सुबह') {\n return hour;\n } else if (meridiem === 'दोपहर') {\n return hour >= 10 ? hour : hour + 12;\n } else if (meridiem === 'शाम') {\n return hour + 12;\n }\n return hour;\n },\n meridiemParse: /रात|सुबह|दोपहर|शाम/,\n});\n\nDayjs.updateLocale('it', {\n calendar: {\n lastDay: '[Ieri alle] LT',\n lastWeek: '[lo scorso] dddd [alle] LT',\n nextDay: '[Domani alle] LT',\n nextWeek: 'dddd [alle] LT',\n sameDay: '[Oggi alle] LT',\n sameElse: 'L',\n },\n});\n\nDayjs.updateLocale('ja', {\n calendar: {\n lastDay: '[昨日] LT',\n lastWeek: 'dddd LT',\n nextDay: '[明日] LT',\n nextWeek: '[次の] dddd LT',\n sameDay: '[今日] LT',\n sameElse: 'L',\n },\n});\n\nDayjs.updateLocale('ko', {\n calendar: {\n lastDay: '[어제] LT',\n lastWeek: '[지난] dddd LT',\n nextDay: '[내일] LT',\n nextWeek: 'dddd LT',\n sameDay: '[오늘] LT',\n sameElse: 'L',\n },\n});\n\nDayjs.updateLocale('nl', {\n calendar: {\n lastDay: '[gisteren om] LT',\n lastWeek: '[afgelopen] dddd [om] LT',\n nextDay: '[morgen om] LT',\n nextWeek: 'dddd [om] LT',\n sameDay: '[vandaag om] LT',\n sameElse: 'L',\n },\n});\n\nDayjs.updateLocale('pt', {\n calendar: {\n lastDay: '[ontem às] LT',\n lastWeek: 'dddd [passada às] LT',\n nextDay: '[amanhã às] LT',\n nextWeek: 'dddd [às] LT',\n sameDay: '[hoje às] LT',\n sameElse: 'L',\n },\n});\n\nDayjs.updateLocale('ru', {\n calendar: {\n lastDay: '[Вчера, в] LT',\n nextDay: '[Завтра, в] LT',\n sameDay: '[Сегодня, в] LT',\n },\n});\n\nDayjs.updateLocale('tr', {\n calendar: {\n lastDay: '[dün] LT',\n lastWeek: '[geçen] dddd [saat] LT',\n nextDay: '[yarın saat] LT',\n nextWeek: '[gelecek] dddd [saat] LT',\n sameDay: '[bugün saat] LT',\n sameElse: 'L',\n },\n});\n\nconst en_locale = {\n formats: {},\n months: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ],\n relativeTime: {},\n weekdays: [\n 'Sunday',\n 'Monday',\n 'Tuesday',\n 'Wednesday',\n 'Thursday',\n 'Friday',\n 'Saturday',\n ],\n};\n\ntype DateTimeParserModule = typeof Dayjs | typeof momentTimezone;\n// Type guards to check DayJs\nconst isDayJs = (dateTimeParser: DateTimeParserModule): dateTimeParser is typeof Dayjs =>\n (dateTimeParser as typeof Dayjs).extend !== undefined;\n\ntype TimezoneParser = {\n tz: momentTimezone.MomentTimezone | Dayjs.Dayjs;\n};\nconst supportsTz = (dateTimeParser: unknown): dateTimeParser is TimezoneParser =>\n (dateTimeParser as TimezoneParser).tz !== undefined;\n\nexport type Streami18nOptions = {\n DateTimeParser?: DateTimeParserModule;\n dayjsLocaleConfigForLanguage?: Partial & { calendar?: CalendarLocaleConfig };\n debug?: boolean;\n disableDateTimeTranslations?: boolean;\n formatters?: Partial & CustomFormatters;\n language?: TranslationLanguages;\n logger?: (message?: string) => void;\n translationBuilderTopics?: Record;\n parseMissingKeyHandler?: (key: string, defaultValue?: string) => string;\n timezone?: string;\n translationsForLanguage?: Partial;\n};\n\n/**\n * Wrapper around [i18next](https://www.i18next.com/) class for Stream related i18n.\n * Instance of this class should be provided to Chat component to handle i18n.\n * Stream provides following list of in-built i18n:\n * 1. English (en)\n * 2. Dutch (nl)\n * 3. Russian (ru)\n * 4. Turkish (tr)\n * 5. French (fr)\n * 6. Italian (it)\n * 7. Hindi (hi)\n * 8. Spanish (es)\n * 9. Portuguese (pt)\n * 10. German (de)\n * 11. Japanese (ja)\n * 12. Korean (ko)\n *\n * Simplest way to start using chat components in one of the in-built languages would be following:\n *\n * ```\n * const i18n = new Streami18n({ language 'nl' });\n * \n * ...\n * \n * ```\n *\n * If you would like to override certain keys in in-built translation.\n * UI will be automatically updated in this case.\n *\n * ```\n * const i18n = new Streami18n({\n * language: 'nl',\n * translationsForLanguage: {\n * 'Nothing yet...': 'Nog Niet ...',\n * '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n * }\n * });\n *\n * If you would like to register additional languages, use registerTranslation. You can add as many languages as you want:\n *\n * i18n.registerTranslation('zh', {\n * 'Nothing yet...': 'Nog Niet ...',\n * '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n * });\n *\n * \n * ...\n * \n * ```\n *\n * You can use the same function to add whole new language as well.\n *\n * ```\n * const i18n = new Streami18n();\n *\n * i18n.registerTranslation('mr', {\n * 'Nothing yet...': 'काहीही नाही ...',\n * '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत ',\n * });\n *\n * // Make sure to call setLanguage to reflect new language in UI.\n * i18n.setLanguage('it');\n * \n * ...\n * \n * ```\n *\n * ## Datetime i18n\n *\n * Stream react chat components uses [dayjs](https://day.js.org/en/) internally by default to format datetime stamp.\n * e.g., in ChannelPreview, MessageContent components.\n * Dayjs has locale support as well - https://day.js.org/docs/en/i18n/i18n\n * Dayjs is a lightweight alternative to Momentjs with the same modern API.\n *\n * Dayjs provides locale config for plenty of languages, you can check the whole list of locale configs at following url\n * https://github.com/iamkun/dayjs/tree/dev/src/locale\n *\n * You can either provide the dayjs locale config while registering\n * language with Streami18n (either via constructor or registerTranslation()) or you can provide your own Dayjs or Moment instance\n * to Streami18n constructor, which will be then used internally (using the language locale) in components.\n *\n * 1. Via language registration\n *\n * e.g.,\n * ```\n * const i18n = new Streami18n({\n * language: 'nl',\n * dayjsLocaleConfigForLanguage: {\n * months: [...],\n * monthsShort: [...],\n * calendar: {\n * sameDay: ...'\n * }\n * }\n * });\n * ```\n *\n * Similarly, you can add locale config for moment while registering translation via `registerTranslation` function.\n *\n * e.g.,\n * ```\n * const i18n = new Streami18n();\n *\n * i18n.registerTranslation(\n * 'mr',\n * {\n * 'Nothing yet...': 'काहीही नाही ...',\n * '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत ',\n * },\n * {\n * months: [...],\n * monthsShort: [...],\n * calendar: {\n * sameDay: ...'\n * }\n * }\n * );\n *```\n * 2. Provide your own Moment object\n *\n * ```js\n * import 'moment/locale/nl';\n * import 'moment/locale/it';\n * // or if you want to include all locales\n * import 'moment/min/locales';\n *\n * import Moment from moment\n *\n * const i18n = new Streami18n({\n * language: 'nl',\n * DateTimeParser: Moment\n * })\n * ```\n *\n * 3. Provide your own Dayjs object\n *\n * ```js\n * import Dayjs from 'dayjs'\n *\n * import 'dayjs/locale/nl';\n * import 'dayjs/locale/it';\n * // or if you want to include all locales\n * import 'dayjs/min/locales';\n *\n * const i18n = new Streami18n({\n * language: 'nl',\n * DateTimeParser: Dayjs\n * })\n * ```\n * If you would like to stick with english language for datetimes in Stream components, you can set `disableDateTimeTranslations` to true.\n *\n */\nconst defaultStreami18nOptions = {\n DateTimeParser: Dayjs,\n dayjsLocaleConfigForLanguage: null,\n debug: false,\n disableDateTimeTranslations: false,\n language: 'en' as TranslationLanguages,\n logger: (message?: string) => console.warn(message),\n /**\n * Key in the translationBuilderTopics has to match postProcessorName in the translation value.\n *\n * {\n * \"key\": \"{{value, postProcessorName}}\"\n * }\n *\n * At least the default topics will be supported.\n */\n translationBuilderTopics: {\n notification: NotificationTranslationTopic,\n },\n};\n\nexport class Streami18n {\n i18nInstance = i18n.createInstance();\n translationBuilder: TranslationBuilder;\n private translationBuilderTopics: Record = {};\n Dayjs = null;\n setLanguageCallback: (t: TFunction) => void = () => null;\n initialized = false;\n\n t: TFunction = defaultTranslatorFunction;\n tDateTimeParser: TDateTimeParser;\n\n translations: {\n [key: string]: {\n [key: string]: typeof enTranslations | UnknownType;\n };\n } = {\n de: { [defaultNS]: deTranslations },\n en: { [defaultNS]: enTranslations },\n es: { [defaultNS]: esTranslations },\n fr: { [defaultNS]: frTranslations },\n hi: { [defaultNS]: hiTranslations },\n it: { [defaultNS]: itTranslations },\n ja: { [defaultNS]: jaTranslations },\n ko: { [defaultNS]: koTranslations },\n nl: { [defaultNS]: nlTranslations },\n pt: { [defaultNS]: ptTranslations },\n ru: { [defaultNS]: ruTranslations },\n tr: { [defaultNS]: trTranslations },\n };\n\n /**\n * dayjs.defineLanguage('nl') also changes the global locale. We don't want to do that\n * when user calls registerTranslation() function. So instead we will store the locale configs\n * given to registerTranslation() function in `dayjsLocales` object, and register the required locale\n * with moment, when setLanguage is called.\n * */\n dayjsLocales: { [key: string]: Partial } = {};\n // dayjsLocales = {};\n\n /**\n * Initialize properties used in constructor\n */\n logger: (msg?: string) => void;\n currentLanguage: TranslationLanguages;\n DateTimeParser: DateTimeParserModule;\n formatters: PredefinedFormatters & CustomFormatters = predefinedFormatters;\n isCustomDateTimeParser: boolean;\n i18nextConfig: {\n debug: boolean;\n fallbackLng: false;\n interpolation: { escapeValue: boolean; formatSeparator: string };\n keySeparator: false;\n lng: string;\n nsSeparator: false;\n parseMissingKeyHandler?: (key: string, defaultValue?: string) => string;\n postProcess?: string[];\n };\n /**\n * A valid TZ identifier string (https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)\n */\n timezone?: string;\n /**\n * Constructor accepts following options:\n * - language (String) default: 'en'\n * Language code e.g., en, tr\n *\n * - translationsForLanguage (object)\n * Translations object. Please check src/i18n/en.json for example.\n *\n * - disableDateTimeTranslations (boolean) default: false\n * Disable translations for date-times\n *\n * - debug (boolean) default: false\n * Enable debug mode in internal i18n class\n *\n * - logger (function) default: () => {}\n * Logger function to log warnings/errors from this class\n *\n * - dayjsLocaleConfigForLanguage (object) default: 'enConfig'\n * [Config object](https://momentjs.com/docs/#/i18n/changing-locale/) for internal moment object,\n * corresponding to language (param)\n *\n * - DateTimeParser (function) Moment or Dayjs instance/function.\n * Make sure to load all the required locales in this Moment or Dayjs instance that you will be provide to Streami18n\n *\n * @param {*} options\n */\n constructor(options: Streami18nOptions = {}) {\n const finalOptions = {\n ...defaultStreami18nOptions,\n ...options,\n };\n // Prepare the i18next configuration.\n this.logger = finalOptions.logger;\n this.currentLanguage = finalOptions.language;\n this.DateTimeParser = finalOptions.DateTimeParser;\n this.timezone = finalOptions.timezone;\n this.formatters = { ...predefinedFormatters, ...options?.formatters };\n this.translationBuilder = new TranslationBuilder(this.i18nInstance);\n this.translationBuilderTopics = {\n ...defaultStreami18nOptions.translationBuilderTopics,\n ...options.translationBuilderTopics,\n };\n\n try {\n if (this.DateTimeParser && isDayJs(this.DateTimeParser)) {\n this.DateTimeParser.extend(LocalizedFormat);\n this.DateTimeParser.extend(calendar);\n this.DateTimeParser.extend(localeData);\n this.DateTimeParser.extend(relativeTime);\n this.DateTimeParser.extend(duration);\n }\n } catch (error) {\n throw Error(\n `Streami18n: Looks like you wanted to provide Dayjs instance, but something went wrong while adding plugins ${error}`,\n );\n }\n\n this.isCustomDateTimeParser = !!options.DateTimeParser;\n const translationsForLanguage = finalOptions.translationsForLanguage;\n\n if (translationsForLanguage) {\n this.translations[this.currentLanguage] = {\n [defaultNS]:\n this.translations[this.currentLanguage] &&\n this.translations[this.currentLanguage][defaultNS]\n ? {\n ...this.translations[this.currentLanguage][defaultNS],\n ...translationsForLanguage,\n }\n : translationsForLanguage,\n };\n }\n\n // If translations don't exist for given language, then set it as empty object.\n if (!this.translations[this.currentLanguage]) {\n this.translations[this.currentLanguage] = {\n [defaultNS]: {},\n };\n }\n\n this.i18nextConfig = {\n debug: finalOptions.debug,\n fallbackLng: false,\n interpolation: { escapeValue: false, formatSeparator: '|' },\n keySeparator: false,\n lng: this.currentLanguage,\n nsSeparator: false,\n };\n\n const postProcess = Object.keys(this.translationBuilderTopics);\n\n if (postProcess.length > 0) {\n this.i18nextConfig.postProcess = postProcess;\n }\n\n if (finalOptions.parseMissingKeyHandler) {\n this.i18nextConfig.parseMissingKeyHandler = finalOptions.parseMissingKeyHandler;\n }\n\n this.validateCurrentLanguage();\n\n const dayjsLocaleConfigForLanguage = finalOptions.dayjsLocaleConfigForLanguage;\n\n if (dayjsLocaleConfigForLanguage) {\n this.addOrUpdateLocale(this.currentLanguage, {\n ...dayjsLocaleConfigForLanguage,\n });\n } else if (!this.localeExists(this.currentLanguage)) {\n this.logger(\n `Streami18n: Streami18n(...) - Locale config for ${this.currentLanguage} does not exist in momentjs.` +\n `Please import the locale file using \"import 'moment/locale/${this.currentLanguage}';\" in your app or ` +\n `register the locale config with Streami18n using registerTranslation(language, translation, customDayjsLocale)`,\n );\n }\n\n this.tDateTimeParser = (timestamp) => {\n const language =\n finalOptions.disableDateTimeTranslations ||\n !this.localeExists(this.currentLanguage)\n ? defaultLng\n : this.currentLanguage;\n\n if (isDayJs(this.DateTimeParser)) {\n return supportsTz(this.DateTimeParser)\n ? this.DateTimeParser(timestamp).tz(this.timezone).locale(language)\n : this.DateTimeParser(timestamp).locale(language);\n }\n\n if (supportsTz(this.DateTimeParser) && this.timezone) {\n return this.DateTimeParser(timestamp).tz(this.timezone).locale(language);\n }\n return this.DateTimeParser(timestamp).locale(language);\n };\n }\n\n /**\n * Initializes the i18next instance with configuration (which enables natural language as default keys)\n */\n async init() {\n this.validateCurrentLanguage();\n\n try {\n this.t = await this.i18nInstance.init({\n ...this.i18nextConfig,\n lng: this.currentLanguage,\n resources: this.translations,\n });\n this.initialized = true;\n if (this.formatters) {\n Object.entries(this.formatters).forEach(([name, formatterFactory]) => {\n if (!formatterFactory) return;\n this.i18nInstance.services.formatter?.add(name, formatterFactory(this));\n });\n }\n // Register post-processors after initialization\n Object.entries(this.translationBuilderTopics).forEach(\n ([topic, TranslationTopic]) => {\n this.translationBuilder.registerTopic(topic, TranslationTopic);\n },\n );\n } catch (error) {\n this.logger(`Something went wrong with init: ${JSON.stringify(error)}`);\n }\n\n return {\n t: this.t,\n tDateTimeParser: this.tDateTimeParser,\n };\n }\n\n localeExists = (language: TranslationLanguages) => {\n if (this.isCustomDateTimeParser) return true;\n\n return Object.keys(Dayjs.Ls).indexOf(language) > -1;\n };\n\n validateCurrentLanguage = () => {\n const availableLanguages = Object.keys(this.translations);\n if (availableLanguages.indexOf(this.currentLanguage) === -1) {\n this.logger(\n `Streami18n: '${this.currentLanguage}' language is not registered.` +\n ` Please make sure to call streami18n.registerTranslation('${this.currentLanguage}', {...}) or ` +\n `use one the built-in supported languages - ${this.getAvailableLanguages()}`,\n );\n\n this.currentLanguage = defaultLng;\n }\n };\n\n /** Returns an instance of i18next used within this class instance */\n geti18Instance = () => this.i18nInstance;\n\n /** Returns list of available languages. */\n getAvailableLanguages = () => Object.keys(this.translations);\n\n /** Returns all the translation dictionary for all inbuilt-languages */\n getTranslations = () => this.translations;\n\n /**\n * Returns current version translator function.\n */\n async getTranslators() {\n if (!this.initialized) {\n if (this.dayjsLocales[this.currentLanguage]) {\n this.addOrUpdateLocale(\n this.currentLanguage,\n this.dayjsLocales[this.currentLanguage],\n );\n }\n\n return await this.init();\n } else {\n return {\n t: this.t,\n tDateTimeParser: this.tDateTimeParser,\n };\n }\n }\n\n registerTranslation(\n language: TranslationLanguages,\n translation: typeof enTranslations,\n customDayjsLocale?: Partial,\n ) {\n if (!translation) {\n this.logger(\n `Streami18n: registerTranslation(language, translation, customDayjsLocale) called without translation`,\n );\n return;\n }\n\n if (!this.translations[language]) {\n this.translations[language] = { [defaultNS]: translation };\n } else {\n this.translations[language][defaultNS] = translation;\n }\n\n if (customDayjsLocale) {\n this.dayjsLocales[language] = { ...customDayjsLocale };\n } else if (!this.localeExists(language)) {\n this.logger(\n `Streami18n: registerTranslation(language, translation, customDayjsLocale) - ` +\n `Locale config for ${language} does not exist in Dayjs.` +\n `Please import the locale file using \"import 'dayjs/locale/${language}';\" in your app or ` +\n `register the locale config with Streami18n using registerTranslation(language, translation, customDayjsLocale)`,\n );\n }\n\n if (this.initialized) {\n this.i18nInstance.addResources(language, defaultNS, translation);\n }\n }\n\n addOrUpdateLocale(key: TranslationLanguages, config: Partial) {\n if (this.localeExists(key)) {\n Dayjs.updateLocale(key, { ...config });\n } else {\n // Merging the custom locale config with en config, so missing keys can default to english.\n Dayjs.locale({ name: key, ...en_locale, ...config }, undefined, true);\n }\n }\n\n async setLanguage(language: TranslationLanguages) {\n this.currentLanguage = language;\n\n if (!this.initialized) return;\n\n try {\n const t = await this.i18nInstance.changeLanguage(language);\n if (this.dayjsLocales[language]) {\n this.addOrUpdateLocale(\n this.currentLanguage,\n this.dayjsLocales[this.currentLanguage],\n );\n }\n\n this.setLanguageCallback(t);\n return t;\n } catch (error) {\n this.logger(`Failed to set language: ${JSON.stringify(error)}`);\n return this.t;\n }\n }\n\n registerSetLanguageCallback(callback: (t: TFunction) => void) {\n this.setLanguageCallback = callback;\n }\n}\n","import React from 'react';\n\nconst LoadingItems = () => (\n
\n
\n \n \n );\n};\n","import React, { type PropsWithChildren } from 'react';\nimport { DialogAnchor, type DialogAnchorProps } from '../service';\nimport { useDialogIsOpen } from '../hooks';\nimport { Button } from '../../Button';\nimport clsx from 'clsx';\nimport { IconXmark } from '../../Icons';\nimport { useComponentContext, useTranslationContext } from '../../../context';\n\nexport type CalloutProps = PropsWithChildren<\n DialogAnchorProps & {\n onClose: () => void;\n className?: string;\n }\n>;\n\n/**\n * Callout is a general purpose component that displays content in dialog that has been previously opened by clicking on a reference element\n * and has to be dismissed to disappear.\n * Tooltip on the other side is a dialog that appears upon pointer device cursor hovering above a reference element.\n * @param children\n * @param className\n * @param dialogManagerId\n * @param dialogId\n * @param onClose\n * @param anchorProps\n * @constructor\n */\n\nexport const Callout = ({\n children,\n className,\n dialogManagerId,\n id: dialogId,\n onClose,\n ...anchorProps\n}: CalloutProps) => {\n const { CalloutDialog = DefaultCalloutDialog } = useComponentContext();\n\n const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);\n return (\n \n {dialogIsOpen && (\n \n {children}\n \n )}\n \n );\n};\n\nexport type CalloutDialogProps = Pick;\n\nconst DefaultCalloutDialog = ({ children, className, onClose }: CalloutDialogProps) => {\n const { t } = useTranslationContext();\n\n return (\n
\n {children}\n \n \n \n
\n );\n};\n","import clsx from 'clsx';\nimport React, {\n type ComponentPropsWithoutRef,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { IconUser } from '../Icons';\n\nexport type AvatarProps = {\n /** URL of the avatar image */\n imageUrl?: string;\n /** Name of the user, used for avatar image alt text and title fallback */\n userName?: string;\n /** Online status indicator, not rendered if not of type boolean */\n isOnline?: boolean;\n size: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | (string & {}) | null;\n} & ComponentPropsWithoutRef<'div'>;\n\nconst getInitials = (name?: string) => {\n const regex = /(\\p{L}{1})\\p{L}+/gu;\n\n if (!name || name.trim().length === 0) {\n return '';\n }\n\n const initials = Array.from(name?.matchAll(regex) || []);\n\n if (!initials.length) {\n return '';\n }\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const startInitial = initials.at(0)![1];\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const endInitial = initials.length > 1 ? initials.at(-1)![1] : '';\n\n return `${startInitial}${endInitial}`;\n};\n\n/**\n * A round avatar image with fallback to username's first letter\n */\nexport const Avatar = ({\n className,\n imageUrl,\n isOnline,\n size,\n userName,\n ...rest\n}: AvatarProps) => {\n const [error, setError] = useState(false);\n\n useEffect(() => () => setError(false), [imageUrl]);\n\n const nameString = userName?.toString() || '';\n const avatarImageAlt = nameString.trim();\n\n const sizeAwareInitials = useMemo(() => {\n const initials = getInitials(nameString);\n\n if (size === 'sm' || size === 'xs') {\n return initials.charAt(0);\n }\n\n return initials;\n }, [nameString, size]);\n\n const showImage = typeof imageUrl === 'string' && imageUrl && !error;\n\n return (\n 1,\n 'str-chat__avatar--no-letters': !sizeAwareInitials.length,\n 'str-chat__avatar--one-letter': sizeAwareInitials.length === 1,\n [`str-chat__avatar--size-${size}`]: typeof size === 'string',\n })}\n data-testid='avatar'\n role='button'\n title={userName}\n {...rest}\n >\n {typeof isOnline === 'boolean' && (\n \n )}\n {showImage ? (\n setError(true)}\n src={imageUrl}\n />\n ) : (\n <>\n {!!sizeAwareInitials.length && (\n
\n {sizeAwareInitials}\n
\n )}\n {!sizeAwareInitials.length && }\n \n )}\n \n );\n};\n","import clsx from 'clsx';\nimport React, { type ComponentProps } from 'react';\nimport { IconExclamationMarkFill } from '../Icons';\n\nexport type BadgeVariant =\n | 'default'\n | 'primary'\n | 'error'\n | 'neutral'\n | 'counter'\n | 'inverse';\n\nexport type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | null;\n\nexport type BadgeProps = ComponentProps<'div'> & {\n /** Visual variant mapping to design tokens */\n variant?: BadgeVariant;\n /** Size preset (typography and padding) */\n size?: BadgeSize;\n};\n\n/**\n * Compact pill/circle badge for counts and labels.\n * Uses design tokens: --badge-bg-*, --badge-text-*, --badge-border.\n */\nexport const Badge = ({\n children,\n className,\n size = 'md',\n variant = 'default',\n ...spanProps\n}: BadgeProps) => (\n \n {children}\n \n);\n\nexport const ErrorBadge = ({\n className,\n size = 'sm',\n ...rest\n}: Omit) => (\n \n \n \n);\n","import React, { type ComponentProps, type ElementType, useMemo } from 'react';\nimport { useComponentContext } from '../../context';\nimport { type AvatarProps, Avatar as DefaultAvatar } from './Avatar';\nimport clsx from 'clsx';\nimport { Badge, type BadgeSize } from '../Badge';\n\nexport function AvatarStack({\n badgeSize,\n capLimit = 3,\n component: Component = 'div',\n displayInfo = [],\n size,\n}: {\n component?: ElementType;\n displayInfo?: (Pick & { id?: string })[];\n size: 'md' | 'sm' | 'xs' | null;\n badgeSize?: BadgeSize;\n capLimit?: number;\n}) {\n const { Avatar = DefaultAvatar } = useComponentContext(AvatarStack.name);\n\n const displayInfoToRender = useMemo(\n () => (displayInfo.length > capLimit ? displayInfo.slice(0, capLimit) : displayInfo),\n [displayInfo, capLimit],\n );\n const overflowCount = displayInfo.length - displayInfoToRender.length;\n\n if (!displayInfo.length) {\n return null;\n }\n\n return (\n \n {displayInfoToRender.map((info, index) => (\n \n ))}\n {typeof overflowCount === 'number' && overflowCount > 0 && (\n \n +{overflowCount}\n \n )}\n \n );\n}\n\nexport type AvatarStackProps = ComponentProps;\n","import React, { useMemo } from 'react';\n\nimport { GroupAvatar } from './';\nimport type { AvatarProps, GroupAvatarProps } from './';\n\nexport type ChannelAvatarProps = Partial> & {\n size: GroupAvatarProps['size'] | AvatarProps['size'];\n};\n\nexport const ChannelAvatar = ({\n displayMembers,\n imageUrl,\n size,\n userName,\n ...sharedProps\n}: ChannelAvatarProps) => {\n const displayInfo = useMemo(() => {\n if (displayMembers && displayMembers.length > 0) {\n return displayMembers;\n }\n\n return [\n {\n imageUrl,\n userName,\n },\n ];\n }, [displayMembers, imageUrl, userName]);\n\n return ;\n};\n","import clsx from 'clsx';\nimport React, { type ComponentPropsWithoutRef, useMemo } from 'react';\nimport { Avatar, type AvatarProps } from './Avatar';\nimport { Badge, type BadgeSize } from '../Badge';\n\nexport type GroupAvatarMember = {\n imageUrl?: string;\n userName?: string;\n id?: string;\n};\n\nexport type GroupAvatarProps = {\n /** List of members to show as avatars; at most 2 when there's more than 4 members, otherwise 4. Defaults to [] when omitted. */\n displayMembers?: GroupAvatarMember[];\n size: '2xl' | 'xl' | 'lg' | (string & {}) | null;\n badgeSize?: BadgeSize;\n isOnline?: boolean;\n} & ComponentPropsWithoutRef<'div'>;\n\n/**\n * Avatar component to display multiple users' avatars in a group.\n * Renders a single Avatar if fewer than 2 members. Otherwise, renders up to 2 avatars (when overflowCount is set) or 4, plus an optional +N badge.\n */\nexport const GroupAvatar = ({\n badgeSize,\n className,\n displayMembers = [],\n isOnline,\n size,\n ...rest\n}: GroupAvatarProps) => {\n const displayMembersToRender = useMemo(\n () => (displayMembers.length > 4 ? displayMembers.slice(0, 2) : displayMembers),\n [displayMembers],\n );\n const overflowCount = displayMembers.length - displayMembersToRender.length;\n\n if (displayMembers.length < 2) {\n const firstUser = displayMembers[0];\n\n return (\n \n );\n }\n\n let avatarSize: AvatarProps['size'] = null;\n if (size === '2xl') {\n avatarSize = 'lg';\n } else if (size === 'xl') {\n avatarSize = 'md';\n } else if (size === 'lg') {\n avatarSize = 'sm';\n }\n\n return (\n \n {displayMembersToRender.map(({ id, imageUrl, userName }, index) => (\n \n ))}\n {typeof overflowCount === 'number' && overflowCount > 0 && (\n \n +{overflowCount}\n \n )}\n \n );\n};\n","const MENU_KEYBOARD_NAVIGATION_KEYS = ['ArrowDown', 'ArrowUp', 'End', 'Home'] as const;\n\ntype MenuKeyboardNavigationKey = (typeof MENU_KEYBOARD_NAVIGATION_KEYS)[number];\n\nconst isMenuKeyboardNavigationKey = (key: string): key is MenuKeyboardNavigationKey =>\n (MENU_KEYBOARD_NAVIGATION_KEYS as readonly string[]).includes(key);\n\ntype GetNextRovingFocusIndexArgs = {\n activeIndex: number;\n itemCount: number;\n key: string;\n};\n\nexport const getNextRovingFocusIndex = ({\n activeIndex,\n itemCount,\n key,\n}: GetNextRovingFocusIndexArgs): number | null => {\n if (itemCount <= 0 || !isMenuKeyboardNavigationKey(key)) return null;\n\n const lastIndex = itemCount - 1;\n\n if (key === 'Home') return 0;\n if (key === 'End') return lastIndex;\n if (activeIndex === -1) return key === 'ArrowUp' ? lastIndex : 0;\n if (key === 'ArrowUp') return activeIndex <= 0 ? lastIndex : activeIndex - 1;\n\n return activeIndex >= lastIndex ? 0 : activeIndex + 1;\n};\n\ntype RovingFocusKeyboardEvent = {\n currentTarget: Element;\n key: string;\n preventDefault: () => void;\n};\n\ntype CreateRovingFocusKeyDownHandlerParams void }> = {\n focusItem?: (item: T, event: RovingFocusKeyboardEvent) => void;\n getActiveIndex?: (items: T[], event: RovingFocusKeyboardEvent) => number;\n getItems: (event: RovingFocusKeyboardEvent) => T[];\n};\n\nconst getDefaultActiveIndex = void }>(items: T[]) => {\n const activeElement = document.activeElement;\n if (!(activeElement instanceof Element)) return -1;\n\n return items.findIndex((item) => item instanceof Element && item === activeElement);\n};\n\nexport const createRovingFocusKeyDownHandler = void }>({\n focusItem = (item) => item.focus(),\n getActiveIndex = (items) => getDefaultActiveIndex(items),\n getItems,\n}: CreateRovingFocusKeyDownHandlerParams) => {\n const handleKeyDown = (event: RovingFocusKeyboardEvent) => {\n const items = getItems(event);\n const activeIndex = getActiveIndex(items, event);\n const nextIndex = getNextRovingFocusIndex({\n activeIndex,\n itemCount: items.length,\n key: event.key,\n });\n\n if (nextIndex === null) return;\n\n event.preventDefault();\n const nextItem = items[nextIndex];\n if (!nextItem) return;\n focusItem(nextItem, event);\n };\n\n return handleKeyDown;\n};\n","import clsx from 'clsx';\nimport React, {\n type ComponentProps,\n type ComponentPropsWithoutRef,\n type ComponentType,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { Avatar, type AvatarProps } from '../../Avatar';\nimport { IconChevronLeft, IconChevronRight } from '../../Icons';\nimport type { PopperLikePlacement } from '../hooks';\nimport { useDialogIsOpen, useDialogOnNearestManager } from '../hooks';\nimport type { DialogAnchorProps } from '../service/DialogAnchor';\nimport { DialogAnchor, useDialogAnchor } from '../service/DialogAnchor';\nimport { useComponentContext } from '../../../context';\nimport { createRovingFocusKeyDownHandler } from '../../../a11y/a11yUtils';\n\n/**\n * ContextMenu module\n *\n * What this file provides\n * - Primitives for contextual action UIs:\n * `ContextMenu`, `ContextMenuContent`, `ContextMenuButton`, `ContextMenuHeader`,\n * `ContextMenuBody`, `ContextMenuBackButton`, and user/emoji button variants.\n * - A small runtime context (`useContextMenuContext`) used by menu items to:\n * - close the current menu (`closeMenu`)\n * - open a submenu (`openSubmenu`)\n * - return to parent level (`returnToParentMenu`)\n *\n * Rendering modes\n * - Anchored mode (most common): pass `id` and `referenceElement`.\n * The component renders inside `DialogAnchor` and uses dialog manager state.\n * - Inline mode: omit anchor props and render as a plain contextual list.\n * - Outside click dismissal can be overridden per menu via `closeOnClickOutside`;\n * otherwise manager default is used.\n *\n * Submenu model\n * - Submenus are represented as a stack of menu levels.\n * - Each level can define `Header`, `Submenu`, `items`, `ItemsWrapper`,\n * and `menuClassName`.\n * - Opening submenu pushes a level to the stack; going back pops one level.\n * - When anchored menu closes, stack resets to root to avoid stale submenu state\n * on next open.\n *\n * Animation model\n * - Root menu open/close is handled by `DialogAnchor` transition timing.\n * - `ContextMenu` defaults `closeTransitionMs` to `130` so close animations can be visible.\n * - `DialogAnchor` marks rendered content with `data-str-chat-dialog-state`:\n * - `open` while visible\n * - `closing` during delayed unmount window (`closeTransitionMs`)\n * - Context-menu closing keyframes in `ContextMenu.scss` target\n * `[data-str-chat-dialog-state='closing']` + placement selectors.\n * - Level-to-level transitions are directional:\n * - forward: parent -> submenu\n * - backward: submenu -> parent\n * - Direction is tracked in `ContextMenu` and passed to `ContextMenuContent`.\n * - `ContextMenuContent` bumps an internal key for `ContextMenuBody` so React\n * remounts the body and CSS enter animation reliably restarts on each level change.\n * - Initial/root menu render does not apply submenu forward/backward classes;\n * directional animation classes are used only for submenu transitions.\n * - `enableAnimations` can disable content animations through data attributes/CSS.\n * - `submenuTransitionDurationMs` controls how long directional transition state is kept.\n *\n * Submenu popover behavior (`ContextMenuButton` with `Submenu`)\n * - Submenu can be rendered by passing `Submenu` (and optional placement/container props).\n * - Default submenu roll axis is `x` (override with `submenuRollAxis`).\n * - Hover/focus management uses a \"keep open\" ref flag plus lazy close timeout to avoid\n * accidental submenu dismissal when moving pointer/focus between parent and submenu.\n *\n * Customization via `ComponentContext`\n * - `ComponentContext.ContextMenu` replaces the whole menu component at SDK call sites.\n * - `ComponentContext.ContextMenuContent` replaces content-level behavior while preserving\n * default anchoring/dialog integration from `ContextMenu`.\n * - Built-in call sites (message actions, channel list action buttons, attachment selector,\n * suggestion list) resolve `ContextMenu` from `ComponentContext` with fallback to default.\n */\nexport type BaseContextMenuButtonProps = {\n details?: ReactNode;\n hasSubMenu?: boolean;\n label?: ReactNode;\n Icon?: ComponentType>;\n SubmenuIcon?: ComponentType>;\n variant?: 'destructive';\n} & ComponentProps<'button'>;\n\nexport const BaseContextMenuButton = ({\n children,\n className,\n details,\n hasSubMenu,\n Icon,\n label,\n role = 'menuitem',\n SubmenuIcon = IconChevronRight,\n variant,\n ...props\n}: BaseContextMenuButtonProps) => (\n \n {Icon && }\n {label ? (\n <>\n
{label}
\n
{details}
\n \n ) : (\n
{children}
\n )}\n {!!hasSubMenu && (\n \n )}\n \n);\n\nexport type UserContextMenuButtonProps = Pick &\n ComponentProps<'button'>;\n\nexport const UserContextMenuButton = ({\n children,\n className,\n imageUrl,\n role = 'menuitem',\n userName,\n ...props\n}: UserContextMenuButtonProps) => (\n \n \n
{children ?? userName}
\n \n);\n\nexport type EmojiContextMenuButtonProps = { emoji: string } & Pick<\n BaseContextMenuButtonProps,\n 'label'\n> &\n ComponentProps<'button'>;\n\nexport const EmojiContextMenuButton = ({\n children,\n className,\n emoji,\n label,\n role = 'menuitem',\n ...props\n}: EmojiContextMenuButtonProps) => (\n \n \n {emoji}\n \n
{children ?? label}
\n \n);\n\ntype ButtonWithSubmenuProps = {\n Submenu: ComponentType;\n submenuContainerProps?: ComponentProps<'div'>;\n submenuPlacement?: PopperLikePlacement;\n submenuRollAxis?: 'x' | 'y';\n};\n\nconst ContextMenuButtonWithSubmenu = ({\n children,\n className,\n Submenu,\n submenuContainerProps,\n submenuPlacement = 'right-start',\n submenuRollAxis = 'x',\n ...buttonProps\n}: BaseContextMenuButtonProps & ButtonWithSubmenuProps) => {\n const { className: submenuClassName, ...submenuContainerRestProps } =\n submenuContainerProps ?? {};\n const { registerDialogSubmenu, unregisterDialogSubmenu } = useContextMenuContext();\n const buttonRef = useRef(null);\n const [dialogContainer, setDialogContainer] = useState(null);\n const keepSubmenuOpenFlag = useRef(false);\n const dialogCloseTimeout = useRef(null);\n const dialogId = useMemo(() => `submenu-${Math.random().toString(36).slice(2)}`, []);\n const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);\n\n useEffect(() => {\n if (!dialogIsOpen) return;\n registerDialogSubmenu();\n return () => unregisterDialogSubmenu();\n }, [dialogIsOpen, registerDialogSubmenu, unregisterDialogSubmenu]);\n const {\n placement: chosenPlacement,\n setPopperElement,\n styles,\n } = useDialogAnchor({\n offset: 8,\n open: dialogIsOpen,\n placement: submenuPlacement,\n referenceElement: buttonRef.current,\n });\n\n const closeDialogLazily = useCallback(() => {\n if (dialogCloseTimeout.current) clearTimeout(dialogCloseTimeout.current);\n dialogCloseTimeout.current = setTimeout(() => {\n if (keepSubmenuOpenFlag.current) return;\n dialog.close();\n }, 100);\n }, [dialog]);\n\n const keepSubmenuOpen = useCallback(() => {\n keepSubmenuOpenFlag.current = true;\n }, []);\n\n const allowToCloseSubmenu = useCallback(() => {\n keepSubmenuOpenFlag.current = false;\n }, []);\n\n const closeSubmenu = useCallback(() => {\n allowToCloseSubmenu();\n closeDialogLazily();\n }, [allowToCloseSubmenu, closeDialogLazily]);\n\n const handleClose = useCallback(\n (event: Event) => {\n const parentButton = buttonRef.current;\n if (!dialogIsOpen || !parentButton) return;\n event.stopPropagation();\n closeDialogLazily();\n parentButton.focus();\n },\n [closeDialogLazily, dialogIsOpen, buttonRef],\n );\n\n const handleFocusParentButton = () => {\n if (dialogIsOpen) return;\n dialog.open();\n keepSubmenuOpen();\n };\n\n useEffect(() => {\n const parentButton = buttonRef.current;\n if (!dialogIsOpen || !parentButton) return;\n const hideOnEscape = (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return;\n handleClose(event);\n closeSubmenu();\n };\n\n document.addEventListener('keyup', hideOnEscape, { capture: true });\n\n return () => {\n document.removeEventListener('keyup', hideOnEscape, { capture: true });\n };\n }, [dialogIsOpen, handleClose, closeSubmenu]);\n\n return (\n <>\n {\n event.stopPropagation();\n dialog.toggle();\n }}\n onFocus={handleFocusParentButton}\n onMouseEnter={handleFocusParentButton}\n onMouseLeave={closeSubmenu}\n {...buttonProps}\n ref={buttonRef}\n >\n {children}\n \n {dialogIsOpen && (\n {\n const isBlurredDescendant =\n event.relatedTarget instanceof Node &&\n dialogContainer?.contains(event.relatedTarget);\n if (isBlurredDescendant) return;\n closeSubmenu();\n }}\n onFocus={keepSubmenuOpen}\n onMouseEnter={keepSubmenuOpen}\n onMouseLeave={closeSubmenu}\n ref={(element) => {\n setPopperElement(element);\n setDialogContainer(element);\n }}\n style={styles}\n tabIndex={-1}\n {...submenuContainerRestProps}\n >\n \n \n )}\n \n );\n};\n\ntype ContextMenuButtonProps = BaseContextMenuButtonProps &\n Partial;\n\nexport const ContextMenuButton = (props: ContextMenuButtonProps) => {\n const {\n Submenu,\n submenuContainerProps,\n submenuPlacement,\n submenuRollAxis,\n ...buttonProps\n } = props;\n if (Submenu) {\n return (\n \n );\n }\n\n return ;\n};\n\nexport const ContextMenuBackButton = ({\n children,\n className,\n role = 'menuitem',\n ...props\n}: ComponentProps<'button'>) => (\n \n {children}\n \n);\n\nexport const ContextMenuHeader = ({\n children,\n className,\n ...props\n}: ComponentProps<'div'>) => (\n
\n {children}\n
\n);\n\nexport const ContextMenuBody = ({\n children,\n className,\n ...props\n}: ComponentProps<'div'>) => (\n
\n {children}\n
\n);\n\nexport const ContextMenuRoot = React.forwardRef>(\n function ContextMenuRoot({ className, role = 'menu', ...props }, ref) {\n return (\n \n );\n },\n);\n\nexport type ContextMenuHeaderComponent = ComponentType;\nexport type ContextMenuSubmenu = ComponentType;\n\nexport type ContextMenuOpenSubmenuParams = Omit<\n ContextMenuLevel,\n 'focusRestoreRequest' | 'items'\n> & {\n focusReturnTarget?: HTMLElement | null;\n};\n\nexport type ContextMenuItemProps = ComponentProps<'button'>;\n\nexport type ContextMenuItemComponent = ComponentType;\n\nexport const DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR = [\n '[role=\"menuitem\"]:not(:disabled)',\n '[role=\"menuitemradio\"]:not(:disabled)',\n '[role=\"menuitemcheckbox\"]:not(:disabled)',\n].join(',');\n\nconst isVisibleContextMenuKeyboardNavigationItem = (item: HTMLElement) => {\n // Fast path: offsetParent is null for display:none elements (and their descendants).\n // offsetHeight covers position:fixed elements which have no offsetParent.\n if (item.offsetParent !== null || item.offsetHeight > 0) return true;\n\n // In environments without layout (e.g. jsdom), offsetParent/offsetHeight are always 0/null.\n // Fall back to checking inline style and the `hidden` attribute.\n if (item.hidden) return false;\n const display = item.style.display;\n if (display === 'none') return false;\n\n // If no layout info and no explicit hiding signal, assume visible.\n return true;\n};\n\ntype ContextMenuFocusRestoreRequest = {\n /** Positional fallback used when the target element is no longer in the DOM. */\n index: number;\n target: HTMLElement | null;\n};\n\nconst getVisibleContextMenuKeyboardNavigationItems = (\n contextMenuRoot: Element | null,\n itemSelector: string = DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR,\n) =>\n Array.from(contextMenuRoot?.querySelectorAll(itemSelector) ?? []).filter(\n isVisibleContextMenuKeyboardNavigationItem,\n );\n\nconst createContextMenuFocusRestoreRequest = ({\n contextMenuRoot,\n focusReturnTarget,\n}: {\n contextMenuRoot: Element | null;\n focusReturnTarget?: HTMLElement | null;\n}): ContextMenuFocusRestoreRequest => {\n const target =\n focusReturnTarget ??\n (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n if (!target) return { index: -1, target: null };\n\n const index = getVisibleContextMenuKeyboardNavigationItems(contextMenuRoot).findIndex(\n (menuItem) => menuItem === target,\n );\n\n return { index, target };\n};\n\nconst resolveContextMenuFocusRestoreTarget = ({\n contextMenuRoot,\n request,\n}: {\n contextMenuRoot: Element | null;\n request: ContextMenuFocusRestoreRequest | null;\n}) => {\n if (!request) return null;\n\n // Prefer the original element if it's still in the DOM.\n if (request.target?.isConnected) return request.target;\n\n // Fall back to positional index when the element has been unmounted.\n if (request.index >= 0) {\n return (\n getVisibleContextMenuKeyboardNavigationItems(contextMenuRoot)[request.index] ?? null\n );\n }\n\n return null;\n};\n\nexport type ContextMenuKeyboardNavigation = {\n /**\n * CSS selector used to collect focusable menu items.\n * Defaults to `[role=\"menuitem\"]:not(:disabled)`.\n */\n itemSelector?: string;\n};\n\ntype ContextMenuContextValue = {\n anchorReferenceElement?: HTMLElement | null;\n closeMenu: () => void;\n openSubmenu: (params: ContextMenuOpenSubmenuParams) => void;\n registerDialogSubmenu: () => void;\n returnToParentMenu: () => void;\n unregisterDialogSubmenu: () => void;\n};\n\nconst ContextMenuContext = React.createContext(\n undefined,\n);\n\nexport const useContextMenuContext = () =>\n useContext(ContextMenuContext) as ContextMenuContextValue;\n\ntype ContextMenuLevel = {\n focusRestoreRequest?: ContextMenuFocusRestoreRequest;\n items?: ContextMenuItemComponent[];\n Submenu?: ContextMenuSubmenu;\n Header?: ContextMenuHeaderComponent;\n ItemsWrapper?: ComponentType;\n menuClassName?: string;\n};\n\ntype ContextMenuBaseProps = ComponentPropsWithoutRef<'div'> & {\n backLabel?: ReactNode;\n enableAnimations?: boolean;\n Header?: ContextMenuHeaderComponent;\n /**\n * Customizes roving-focus keyboard navigation for menu items.\n * ArrowUp/ArrowDown/Home/End move focus across items matched by\n * `keyboardNavigation.itemSelector` (defaults to `[role=\"menuitem\"]:not(:disabled)`).\n * Navigation is always enabled; use this prop only to override the item selector.\n */\n keyboardNavigation?: ContextMenuKeyboardNavigation;\n onClose?: () => void;\n onMenuLevelChange?: (level: number) => void;\n /** Duration (ms) to keep submenu transition direction active for forward/backward animations. */\n submenuTransitionDurationMs?: number;\n} & ContextMenuLevel;\n\n/** When provided, ContextMenu renders inside DialogAnchor and wires menu level for submenu alignment. */\ntype ContextMenuAnchorProps = Partial<\n Pick<\n DialogAnchorProps,\n | 'id'\n | 'dialogManagerId'\n | 'placement'\n | 'referenceElement'\n | 'tabIndex'\n | 'trapFocus'\n | 'allowFlip'\n | 'closeOnClickOutside'\n | 'focus'\n | 'closeTransitionMs'\n | 'offset'\n >\n>;\n\nexport type ContextMenuProps = ContextMenuBaseProps & ContextMenuAnchorProps;\n\nexport type ContextMenuContentProps = ContextMenuBaseProps & {\n anchorReferenceElement?: HTMLElement | null;\n transitionDirection?: 'forward' | 'backward';\n};\n\n/**\n * Internal/default content renderer for {@link ContextMenu}.\n *\n * Override this through `ComponentContext.ContextMenuContent` when you need to\n * customize submenu/back navigation behavior while keeping the same anchor/focus\n * handling from `ContextMenu`.\n */\nexport function ContextMenuContent({\n anchorReferenceElement,\n backLabel = 'Back',\n children,\n className,\n enableAnimations = true,\n Header,\n items,\n ItemsWrapper,\n keyboardNavigation,\n menuClassName,\n onClose,\n onMenuLevelChange,\n transitionDirection,\n ...props\n}: ContextMenuContentProps) {\n const rootLevel = useMemo(\n () => ({\n Header,\n items,\n ItemsWrapper,\n menuClassName,\n }),\n [Header, items, ItemsWrapper, menuClassName],\n );\n const [menuStack, setMenuStack] = useState(() => [rootLevel]);\n const [menuBodyAnimationKey, setMenuBodyAnimationKey] = useState(0);\n const contextMenuRootRef = useRef(null);\n const focusRestoreRequestRef = useRef(null);\n const activeMenu = menuStack[menuStack.length - 1];\n\n const ActiveMenuItemsWrapper = activeMenu.ItemsWrapper ?? React.Fragment;\n\n const closeMenu = useCallback(() => {\n onClose?.();\n }, [onClose]);\n\n const openSubmenu = useCallback(\n ({\n focusReturnTarget,\n Header,\n ItemsWrapper: SubmenuItemsWrapper,\n menuClassName,\n Submenu,\n }: ContextMenuOpenSubmenuParams) => {\n const nextLevel: ContextMenuLevel = {\n focusRestoreRequest: createContextMenuFocusRestoreRequest({\n contextMenuRoot: contextMenuRootRef.current,\n focusReturnTarget,\n }),\n Header,\n ItemsWrapper: SubmenuItemsWrapper ?? ItemsWrapper,\n menuClassName,\n Submenu,\n };\n setMenuStack((current) => [...current, nextLevel]);\n },\n [ItemsWrapper],\n );\n\n const returnToParentMenu = useCallback(() => {\n setMenuStack((current) => {\n if (current.length <= 1) return current;\n focusRestoreRequestRef.current =\n current[current.length - 1]?.focusRestoreRequest ?? null;\n return current.slice(0, -1);\n });\n }, []);\n\n useEffect(() => {\n setMenuStack((current) => {\n if (current.length === 1 && current[0] === rootLevel) return current;\n return [rootLevel];\n });\n }, [rootLevel]);\n\n useEffect(() => {\n onMenuLevelChange?.(menuStack.length);\n }, [menuStack.length, onMenuLevelChange]);\n\n useEffect(() => {\n const focusRestoreRequest = focusRestoreRequestRef.current;\n if (!focusRestoreRequest) return;\n focusRestoreRequestRef.current = null;\n\n requestAnimationFrame(() => {\n resolveContextMenuFocusRestoreTarget({\n contextMenuRoot: contextMenuRootRef.current,\n request: focusRestoreRequest,\n })?.focus();\n });\n }, [menuStack.length]);\n\n useEffect(() => {\n if (!transitionDirection) return;\n setMenuBodyAnimationKey((value) => value + 1);\n }, [transitionDirection, menuStack.length]);\n\n const dialogSubmenuOpenCountRef = useRef(0);\n\n const registerDialogSubmenu = useCallback(() => {\n dialogSubmenuOpenCountRef.current += 1;\n }, []);\n\n const unregisterDialogSubmenu = useCallback(() => {\n dialogSubmenuOpenCountRef.current = Math.max(\n 0,\n dialogSubmenuOpenCountRef.current - 1,\n );\n }, []);\n\n const rovingFocusKeyDownHandler = useMemo(() => {\n const itemSelector =\n keyboardNavigation?.itemSelector ??\n DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR;\n\n return createRovingFocusKeyDownHandler({\n getItems: (event) =>\n getVisibleContextMenuKeyboardNavigationItems(event.currentTarget, itemSelector),\n });\n }, [keyboardNavigation]);\n\n const escapeConsumedRef = useRef(false);\n\n const keyboardNavigationHandler = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n if (dialogSubmenuOpenCountRef.current > 0) return;\n\n event.preventDefault();\n event.stopPropagation();\n\n if (menuStack.length > 1) {\n escapeConsumedRef.current = true;\n returnToParentMenu();\n } else {\n closeMenu();\n }\n return;\n }\n\n rovingFocusKeyDownHandler(event);\n },\n [closeMenu, menuStack.length, returnToParentMenu, rovingFocusKeyDownHandler],\n );\n\n const suppressEscapeKeyUp = useCallback((event: React.KeyboardEvent) => {\n if (event.key === 'Escape' && escapeConsumedRef.current) {\n escapeConsumedRef.current = false;\n event.stopPropagation();\n }\n }, []);\n\n return (\n \n \n {activeMenu.Header ? (\n \n ) : menuStack.length > 1 ? (\n \n \n \n {backLabel}\n \n \n ) : null}\n \n {activeMenu.Submenu ? (\n \n ) : (\n \n {typeof children !== 'undefined'\n ? children\n : activeMenu.items?.map((Item, index) => (\n \n ))}\n \n )}\n \n \n \n );\n}\n\n/**\n * Contextual actions menu that can be used in two modes:\n *\n * - Anchored dialog mode: pass `id` + `referenceElement` (submenu-aware positioning).\n * - Inline mode: omit `id` and render a plain contextual list.\n *\n * Customization via `ComponentContext`:\n *\n * - `ContextMenu`: replace the whole menu container/behavior.\n * - `ContextMenuContent`: keep default container behavior but customize menu content\n * rendering (items, submenu transitions, back navigation UI).\n * - To customize outside-click dismissal via `ComponentContext`, provide a custom\n * `ContextMenu` that sets `closeOnClickOutside`:\n *\n * ```tsx\n * const CustomContextMenu = (props: ContextMenuProps) => (\n * \n * );\n *\n * \n * {children}\n * \n * ```\n *\n * Example:\n * ```tsx\n * \n * {children}\n * \n * ```\n */\nexport const ContextMenu = (props: ContextMenuProps) => {\n const { ContextMenuContent: ContextMenuContentComponent = ContextMenuContent } =\n useComponentContext();\n const {\n allowFlip,\n closeOnClickOutside,\n closeTransitionMs = 130,\n dialogManagerId,\n focus,\n id,\n offset = 8,\n onMenuLevelChange: onMenuLevelChangeProp,\n placement,\n referenceElement,\n submenuTransitionDurationMs,\n tabIndex,\n trapFocus,\n ...menuProps\n } = props;\n const resolvedSubmenuTransitionDurationMs = submenuTransitionDurationMs ?? 460;\n\n const isAnchored = id != null;\n\n const [menuLevel, setMenuLevel] = useState(1);\n const [transitionDirection, setTransitionDirection] = useState<\n 'forward' | 'backward' | undefined\n >(undefined);\n const [contentResetToken, setContentResetToken] = useState(0);\n const transitionTimeoutRef = useRef(null);\n const previousMenuLevelRef = useRef(1);\n const open = useDialogIsOpen(id ?? '', dialogManagerId);\n const previousOpenRef = useRef(open);\n\n useEffect(() => {\n if (!isAnchored) return;\n\n if (previousOpenRef.current && !open) {\n setMenuLevel(1);\n setTransitionDirection(undefined);\n setContentResetToken((value) => value + 1);\n previousMenuLevelRef.current = 1;\n if (transitionTimeoutRef.current) {\n clearTimeout(transitionTimeoutRef.current);\n transitionTimeoutRef.current = null;\n }\n }\n previousOpenRef.current = open;\n }, [isAnchored, open]);\n\n useEffect(\n () => () => {\n if (transitionTimeoutRef.current) {\n clearTimeout(transitionTimeoutRef.current);\n }\n },\n [],\n );\n\n const handleMenuLevelChange = useCallback(\n (level: number) => {\n if (isAnchored) {\n const previousLevel = previousMenuLevelRef.current;\n if (level !== previousLevel) {\n setTransitionDirection(level > previousLevel ? 'forward' : 'backward');\n if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);\n transitionTimeoutRef.current = setTimeout(() => {\n setTransitionDirection(undefined);\n transitionTimeoutRef.current = null;\n }, resolvedSubmenuTransitionDurationMs);\n }\n previousMenuLevelRef.current = level;\n setMenuLevel(level);\n return;\n }\n onMenuLevelChangeProp?.(level);\n },\n [isAnchored, onMenuLevelChangeProp, resolvedSubmenuTransitionDurationMs],\n );\n\n const content = (\n \n );\n\n if (isAnchored) {\n const {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n backLabel: _b,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n enableAnimations: _ea,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Header: _h,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n items: _i,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ItemsWrapper: _w,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n keyboardNavigation: _kn,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n menuClassName: _m,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onClose: _c,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n role: _r,\n ...anchorDivProps\n } = menuProps;\n return (\n \n {content}\n \n );\n }\n\n return content;\n};\n","import React, { type ComponentProps, type PropsWithChildren } from 'react';\nimport clsx from 'clsx';\nimport { Button, type ButtonProps } from '../../Button';\nimport { IconXmark } from '../../Icons';\nimport { useModalContext, useTranslationContext } from '../../../context';\nimport { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';\n\nconst PromptRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (\n
\n {children}\n
\n);\n\nexport type PromptHeaderProps = {\n title: string;\n description?: string;\n className?: string;\n close?: () => void;\n descriptionId?: string;\n titleId?: string;\n};\n\nconst PromptHeader = ({\n className,\n close,\n description,\n descriptionId,\n title,\n titleId,\n}: PromptHeaderProps) => {\n const { t } = useTranslationContext();\n const { dialogId } = useModalContext();\n const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =\n useAriaIdentifiers(dialogId);\n const resolvedTitleId = titleId ?? derivedTitleId;\n const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;\n\n return (\n
\n
\n

\n {title}\n

\n {description != null && description !== '' && (\n

\n {description}\n

\n )}\n
\n {close && (\n \n \n \n )}\n
\n );\n};\n\nexport type PromptBodyProps = PropsWithChildren<{\n className?: string;\n}>;\n\nconst PromptBody = ({ children, className }: PromptBodyProps) => (\n
{children}
\n);\n\nexport type PromptFooterProps = PropsWithChildren<{\n className?: string;\n}>;\n\nconst PromptFooter = ({ children, className }: PromptFooterProps) => (\n
{children}
\n);\n\ntype PromptFooterControlsProps = PropsWithChildren<{\n className?: string;\n}>;\n\nconst PromptFooterControls = ({ children, className }: PromptFooterControlsProps) => (\n
{children}
\n);\n\nconst PromptFooterControlsButtonSecondary = ({ className, ...props }: ButtonProps) => (\n \n);\n\nconst PromptFooterControlsButtonPrimary = ({ className, ...props }: ButtonProps) => (\n \n);\n\nexport const Prompt = {\n Body: PromptBody,\n Footer: PromptFooter,\n FooterControls: PromptFooterControls,\n FooterControlsButtonPrimary: PromptFooterControlsButtonPrimary,\n FooterControlsButtonSecondary: PromptFooterControlsButtonSecondary,\n Header: PromptHeader,\n Root: PromptRoot,\n};\n","import React, { type ComponentProps, type PropsWithChildren } from 'react';\nimport clsx from 'clsx';\nimport { Button, type ButtonProps } from '../../Button';\nimport { IconArrowLeft, IconXmark } from '../../Icons';\nimport { useModalContext, useTranslationContext } from '../../../context';\nimport { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';\n\nconst ViewerRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (\n
\n {children}\n
\n);\n\nexport type ViewerHeaderProps = {\n title: string;\n description?: string;\n className?: string;\n close?: () => void;\n goBack?: () => void;\n descriptionId?: string;\n titleId?: string;\n};\n\nconst ViewerHeader = ({\n className,\n close,\n description,\n descriptionId,\n goBack,\n title,\n titleId,\n}: ViewerHeaderProps) => {\n const { t } = useTranslationContext();\n const { dialogId } = useModalContext();\n const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =\n useAriaIdentifiers(dialogId);\n const resolvedTitleId = titleId ?? derivedTitleId;\n const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;\n\n return (\n
\n {goBack && (\n \n \n \n )}\n
\n

\n {title}\n

\n {description != null && description !== '' && (\n

\n {description}\n

\n )}\n
\n {close && (\n \n \n \n )}\n
\n );\n};\n\nexport type ViewerBodyProps = PropsWithChildren<{\n className?: string;\n}>;\n\nconst ViewerBody = ({ children, className }: ViewerBodyProps) => (\n
{children}
\n);\n\nexport type ViewerFooterProps = PropsWithChildren<{\n className?: string;\n}>;\n\nconst ViewerFooter = ({ children, className }: ViewerFooterProps) => (\n
{children}
\n);\n\ntype ViewerFooterControlsProps = PropsWithChildren<{\n className?: string;\n}>;\n\nconst ViewerFooterControls = ({ children, className }: ViewerFooterControlsProps) => (\n
{children}
\n);\n\nconst ViewerFooterControlsButtonSecondary = ({ className, ...props }: ButtonProps) => (\n \n);\n\nconst ViewerFooterControlsButtonPrimary = ({ className, ...props }: ButtonProps) => (\n \n);\n\nexport const Viewer = {\n Body: ViewerBody,\n Footer: ViewerFooter,\n FooterControls: ViewerFooterControls,\n FooterControlsButtonPrimary: ViewerFooterControlsButtonPrimary,\n FooterControlsButtonSecondary: ViewerFooterControlsButtonSecondary,\n Header: ViewerHeader,\n Root: ViewerRoot,\n};\n","import { useMemo } from 'react';\nimport { useAriaIdentifiers } from './useAriaIdentifiers';\n\nexport type ResolvedModalAriaProps = {\n 'aria-describedby'?: string;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n};\n\ntype UseResolvedModalAriaPropsParams = {\n ariaDescribedby?: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n dialogId?: string;\n};\n\n/**\n * Resolves modal labeling/description attributes from explicit props first,\n * then from the modal dialog id convention (`${dialogId}-title|description`).\n *\n * Rules:\n * - `aria-labelledby` wins over `aria-label`.\n * - `aria-describedby` defaults to inferred id when explicit value is absent.\n */\nexport const useResolvedModalAriaProps = ({\n ariaDescribedby,\n ariaLabel,\n ariaLabelledby,\n dialogId,\n}: UseResolvedModalAriaPropsParams): ResolvedModalAriaProps => {\n const { descriptionId, titleId } = useAriaIdentifiers(dialogId);\n\n return useMemo(() => {\n const resolvedAriaLabelledby = ariaLabel\n ? ariaLabelledby\n : (ariaLabelledby ?? titleId);\n const resolvedAriaDescribedby = ariaDescribedby ?? descriptionId;\n const resolvedAriaLabel = resolvedAriaLabelledby ? undefined : ariaLabel;\n\n return {\n 'aria-describedby': resolvedAriaDescribedby,\n 'aria-label': resolvedAriaLabel,\n 'aria-labelledby': resolvedAriaLabelledby,\n };\n }, [ariaDescribedby, ariaLabel, ariaLabelledby, descriptionId, titleId]);\n};\n","import clsx from 'clsx';\nimport React, {\n type ComponentProps,\n type ComponentType,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport { FocusScope } from '@react-aria/focus';\n\nimport {\n ModalContextProvider,\n modalDialogManagerId,\n useChatContext,\n} from '../../context';\nimport {\n DialogPortalEntry,\n modalDialogId,\n useModalDialog,\n useModalDialogIsOpen,\n} from '../Dialog';\nimport { useResolvedModalAriaProps } from '../../a11y/hooks/useResolvedModalAriaProps';\n\nexport type ModalCloseEvent =\n | KeyboardEvent\n | React.KeyboardEvent\n | React.MouseEvent;\n\nexport type ModalCloseSource = 'overlay' | 'button' | 'escape';\n\nexport type ModalProps = {\n /** If true, modal is opened or visible. */\n open: boolean;\n /** Custom class to be applied to the modal root div */\n className?: string;\n /** Accessible label for the modal dialog. Ignored when aria-labelledby is provided. */\n 'aria-label'?: string;\n /** ID of the element that labels the modal dialog. */\n 'aria-labelledby'?: string;\n /** ID of the element that describes the modal dialog. */\n 'aria-describedby'?: string;\n /** ARIA role for the modal dialog surface. */\n role?: 'alertdialog' | 'dialog';\n /** If provided, the close button is rendered on overlay */\n CloseButtonOnOverlay?: ComponentType>;\n /** Callback handler for closing of modal. */\n onClose?: (event: ModalCloseEvent) => void;\n /** Optional handler to intercept closing logic. Return false to prevent onClose. */\n onCloseAttempt?: (source: ModalCloseSource, event: ModalCloseEvent) => boolean;\n};\n\nexport const GlobalModal = ({\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n className,\n CloseButtonOnOverlay,\n onClose,\n onCloseAttempt,\n open,\n role = 'dialog',\n}: PropsWithChildren) => {\n const dialog = useModalDialog();\n const isOpen = useModalDialogIsOpen();\n const overlayRef = useRef(null);\n const closeButtonRef = useRef(null);\n const closingRef = useRef(false);\n const { theme } = useChatContext();\n const dialogLabelingBaseId = dialog.id;\n const resolvedModalAriaProps = useResolvedModalAriaProps({\n ariaDescribedby,\n ariaLabel,\n ariaLabelledby,\n dialogId: dialogLabelingBaseId,\n });\n\n const maybeClose = useCallback(\n (source: ModalCloseSource, event: ModalCloseEvent) => {\n const allow = onCloseAttempt?.(source, event);\n if (allow !== false) {\n dialog.close();\n closingRef.current = true;\n onClose?.(event);\n }\n },\n [dialog, onClose, onCloseAttempt],\n );\n\n const modalContextValue = useMemo<{ close: () => void; dialogId?: string }>(\n () => ({\n close: () => maybeClose('button', {} as ModalCloseEvent),\n dialogId: dialogLabelingBaseId,\n }),\n [dialogLabelingBaseId, maybeClose],\n );\n\n const handleOverlayClick = (event: React.MouseEvent) => {\n const target = event.target as HTMLDivElement;\n if (overlayRef.current === target) {\n maybeClose('overlay', event);\n }\n };\n\n const handleCloseButtonClick = (event: React.MouseEvent) => {\n maybeClose('button', event);\n };\n\n const handleDialogKeyDown = (event: React.KeyboardEvent) => {\n if (event.defaultPrevented || event.key !== 'Escape') return;\n maybeClose('escape', event);\n };\n\n // Sync open prop → dialog open. Don't close here (dialog ref changes after close → effect loop).\n // closingRef blocks re-open when we just closed and parent hasn't set open=false yet.\n useEffect(() => {\n if (!open) {\n closingRef.current = false;\n }\n if (open && !isOpen && !closingRef.current) {\n dialog.open();\n }\n }, [dialog, isOpen, open]);\n\n if (!open || !isOpen) return null;\n\n return (\n \n \n \n \n \n {children}\n \n \n {CloseButtonOnOverlay && (\n \n )}\n \n \n \n );\n};\n","import type { ComponentType, PropsWithChildren } from 'react';\nimport React from 'react';\nimport { GlobalModal, type ModalProps } from '../Modal';\nimport { MessageBounceProvider, useComponentContext } from '../../context';\nimport type { MessageBouncePromptProps } from './MessageBouncePrompt';\n\nexport type MessageBounceModalProps = PropsWithChildren<\n ModalProps & {\n MessageBouncePrompt: ComponentType;\n }\n>;\n\nexport function MessageBounceModal({\n MessageBouncePrompt,\n ...modalProps\n}: MessageBounceModalProps) {\n const { Modal = GlobalModal } = useComponentContext();\n return (\n \n \n \n \n \n );\n}\n","import type { MouseEventHandler } from 'react';\nimport React from 'react';\nimport {\n useMessageBounceContext,\n useModalContext,\n useTranslationContext,\n} from '../../context';\nimport { Button } from '../Button';\nimport { IconExclamationMark } from '../Icons';\nimport { Alert } from '../Dialog';\nimport type { PropsWithChildrenOnly } from '../../types/types';\n\nexport type MessageBouncePromptProps = PropsWithChildrenOnly;\n\n// todo: shall we rename this to MessageBounceAlert?\nexport function MessageBouncePrompt({ children }: MessageBouncePromptProps) {\n const { handleDelete, handleEdit, handleRetry } = useMessageBounceContext();\n const { t } = useTranslationContext();\n const { close } = useModalContext();\n\n function createHandler(\n handle: MouseEventHandler,\n ): MouseEventHandler {\n return (e) => {\n handle(e);\n close();\n };\n }\n\n return (\n \n \n {children}\n \n \n \n {t('Delete')}\n \n \n {t('Edit Message')}\n \n \n {t('Send Anyway')}\n \n \n \n );\n}\n","import React, { type ComponentProps } from 'react';\nimport clsx from 'clsx';\n\nexport const MessageBubble = ({ className, ...props }: ComponentProps<'div'>) => (\n
\n);\n","import React from 'react';\n\nimport { IconNoSign } from '../Icons';\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nimport type { LocalMessage } from 'stream-chat';\nimport { MessageBubble } from './MessageBubble';\n\nexport type MessageDeletedProps = {\n message: LocalMessage;\n};\n\nexport const MessageDeletedBubble = () => {\n const { t } = useTranslationContext();\n\n return (\n \n
\n \n {t('Message deleted')}\n
\n \n );\n};\n","import React from 'react';\nimport clsx from 'clsx';\n\nimport { useUserRole } from './hooks/useUserRole';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useMessageContext } from '../../context';\n\nexport const MessageBlocked = () => {\n const { message } = useMessageContext();\n const { t } = useTranslationContext('MessageBlocked');\n\n const { isMyMessage } = useUserRole(message);\n\n const messageClasses = clsx(\n 'str-chat__message str-chat__message--blocked',\n message.type,\n {\n 'str-chat__message--me': isMyMessage,\n 'str-chat__message--other': !isMyMessage,\n },\n );\n\n return (\n \n
\n {t('Message was blocked by moderation policies')}\n
\n
\n );\n};\n","import { useMemo } from 'react';\n\nimport { useChannelStateContext, useMessageContext } from '../../../context';\nimport { useUserRole } from '../../Message/hooks';\nimport {\n ACTIONS_NOT_WORKING_IN_THREAD,\n isMessageBounced,\n isMessageDeleted,\n isMessageErrorRetryable,\n isNetworkSendFailure,\n} from '../../Message/utils';\n\nimport type { MessageActionSetItem } from '../MessageActions';\nimport {\n isAudioAttachment,\n isFileAttachment,\n isImageAttachment,\n isVideoAttachment,\n isVoiceRecordingAttachment,\n} from 'stream-chat';\n\n/**\n * Base filter hook which covers actions of type `delete`, `edit`,\n * `flag`, `markUnread`, `mute`, `quote`, `react` and `reply`, whether\n * the rendered message is a reply (replies are limited to certain actions) and\n * whether the message has appropriate type and status (including soft-deleted).\n */\nexport const useBaseMessageActionSetFilter = (\n messageActionSet: MessageActionSetItem[],\n disable = false,\n) => {\n const { initialMessage: isInitialMessage, message } = useMessageContext();\n const { channelConfig } = useChannelStateContext();\n const messageIsDeleted = isMessageDeleted(message);\n const {\n canBlockUser,\n canDelete,\n canEdit,\n canFlag,\n canMarkUnread,\n canMute,\n canQuote,\n canReact,\n canReply,\n canSendMessage,\n } = useUserRole(message);\n const isMessageThreadReply = typeof message.parent_id === 'string';\n const isBounced = isMessageBounced(message);\n const allowRetry = isMessageErrorRetryable(message);\n const hasNetworkSendFailure = isNetworkSendFailure(message);\n\n return useMemo(() => {\n if (disable) return messageActionSet;\n\n // filter out all actions if any of these are true\n if (\n isBounced ||\n isInitialMessage || // not sure whether this thing even works anymore\n !message.type ||\n message.type === 'system' ||\n message.type === 'ephemeral' ||\n message.status === 'sending'\n )\n return [];\n\n return messageActionSet.filter((action) => {\n if (action.placement === 'quick-dropdown-toggle') return true;\n\n const type = action.type;\n\n // filter out actions with types that do not work in thread\n if (ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply)\n return false;\n\n // failed message menu has special treatment\n if (message.error) {\n return (\n (type === 'resendMessage' && canSendMessage && (allowRetry || isBounced)) ||\n (type === 'edit' && ((isBounced && canEdit) || hasNetworkSendFailure)) ||\n (type === 'delete' &&\n !messageIsDeleted &&\n ((isBounced && canDelete) || hasNetworkSendFailure))\n );\n }\n\n if (\n type === 'resendMessage' ||\n (type === 'blockUser' && !canBlockUser) ||\n (type === 'copyMessageText' && !message.text) ||\n (type === 'download' &&\n !message.attachments?.some(\n (attachment) =>\n isFileAttachment(attachment) ||\n isImageAttachment(attachment) ||\n isVideoAttachment(attachment) ||\n isAudioAttachment(attachment) ||\n isVoiceRecordingAttachment(attachment),\n )) ||\n (type === 'delete' && (!canDelete || messageIsDeleted)) ||\n (type === 'edit' && !canEdit) ||\n (type === 'flag' && !canFlag) ||\n (type === 'markUnread' && !canMarkUnread) ||\n (type === 'mute' && !canMute) ||\n (type === 'quote' && !canQuote) ||\n (type === 'react' && !canReact) ||\n (type === 'reply' && !canReply) ||\n (type === 'remindMe' && !channelConfig?.['user_message_reminders']) ||\n (type === 'saveForLater' && !channelConfig?.['user_message_reminders'])\n )\n return false;\n\n return true;\n });\n }, [\n allowRetry,\n canBlockUser,\n canDelete,\n canEdit,\n canFlag,\n canMarkUnread,\n canMute,\n canQuote,\n canReact,\n canReply,\n canSendMessage,\n channelConfig,\n isBounced,\n isInitialMessage,\n messageIsDeleted,\n isMessageThreadReply,\n message.error,\n message.attachments,\n message.status,\n message.text,\n message.type,\n disable,\n hasNetworkSendFailure,\n messageActionSet,\n ]);\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport { IconArrowUpRight } from '../Icons';\nimport { useNotificationApi } from '../Notifications';\nimport {\n useChannelActionContext,\n useChannelStateContext,\n useMessageContext,\n useTranslationContext,\n} from '../../context';\nimport { formatMessage, type LocalMessage } from 'stream-chat';\n\n/**\n * Indicator shown when the message was also sent to the main channel (show_in_channel === true).\n */\nexport const MessageAlsoSentInChannelIndicator = () => {\n const { addNotification } = useNotificationApi();\n const { t } = useTranslationContext();\n const { channel } = useChannelStateContext();\n const { jumpToMessage, openThread } = useChannelActionContext();\n const { message, threadList } = useMessageContext('MessageAlsoSentInChannelIndicator');\n const targetMessageRef = useRef(undefined);\n\n const queryParent = () =>\n channel\n .getClient()\n .search({ cid: channel.cid }, { id: message.parent_id })\n .then(({ results }) => {\n if (!results.length) {\n throw new Error('Thread has not been found');\n }\n targetMessageRef.current = formatMessage(results[0].message);\n })\n .catch((error: Error) => {\n addNotification({\n context: { threadReply: message },\n emitter: 'MessageIsThreadReplyInChannelButtonIndicator',\n error,\n message: t('Thread has not been found'),\n severity: 'error',\n type: 'api:reply:search:failed',\n });\n });\n\n // todo: it is not possible to jump to a message in thread\n const jumpToReplyInChannelMessages = async (id: string) => {\n await jumpToMessage(id);\n // todo: we do not have API to control, whether thread of channel message list is show - on mobile devices important\n };\n\n useEffect(() => {\n if (\n targetMessageRef.current ||\n targetMessageRef.current === null ||\n !message.parent_id\n )\n return;\n const localMessage = channel.state.findMessage(message.parent_id);\n if (localMessage) {\n targetMessageRef.current = localMessage;\n return;\n }\n }, [channel, message]);\n\n const handleClickViewReference = async () => {\n if (!targetMessageRef.current) {\n // search query is performed here in order to prevent multiple search queries in useEffect\n // due to the message list 3x remounting its items\n if (threadList) {\n await jumpToReplyInChannelMessages(message.id); // we are in thread, and we want to jump to this reply in the main message list\n return;\n } else await queryParent(); // we are in the main list and need to query the thread\n }\n const target = targetMessageRef.current;\n if (!target) {\n // prevent further search queries if the message is not found in the DB\n targetMessageRef.current = null;\n return;\n }\n\n if (threadList) await jumpToReplyInChannelMessages(message.id);\n else openThread(target);\n };\n\n if (!message?.show_in_channel) return null;\n\n return (\n
\n \n {threadList ? t('Also sent in channel') : t('Replied to a thread')}\n · \n \n {t('View')}\n \n
\n );\n};\n","import type { MouseEventHandler } from 'react';\nimport type { UserResponse } from 'stream-chat';\nimport React, { useMemo } from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useChannelStateContext, useComponentContext } from '../../context';\nimport { AvatarStack as DefaultAvatarStack } from '../Avatar';\n\nexport type MessageRepliesCountButtonProps = {\n /* If supplied, adds custom text to the end of a multiple replies message */\n labelPlural?: string;\n /* If supplied, adds custom text to the end of a single reply message */\n labelSingle?: string;\n /* Function to navigate into an existing thread on a message */\n onClick?: MouseEventHandler;\n /* The amount of replies (i.e., threaded messages) on a message */\n reply_count?: number;\n thread_participants?: UserResponse[];\n};\n\nfunction UnMemoizedMessageRepliesCountButton(props: MessageRepliesCountButtonProps) {\n const { AvatarStack = DefaultAvatarStack } = useComponentContext(\n MessageRepliesCountButton.name,\n );\n const {\n labelPlural,\n labelSingle,\n onClick,\n reply_count: replyCount = 0,\n thread_participants: threadParticipants = [],\n } = props;\n const { channelCapabilities } = useChannelStateContext();\n\n const { t } = useTranslationContext('MessageRepliesCountButton');\n\n const avatarStackDisplayInfo = useMemo(\n () =>\n threadParticipants.slice(0, 3).map((participant) => ({\n imageUrl: participant.image,\n userName: participant.name || participant.id,\n })),\n [threadParticipants],\n );\n\n if (!replyCount) return null;\n\n let replyCountText = t('replyCount', { count: replyCount });\n\n if (labelPlural && replyCount > 1) {\n replyCountText = `${replyCount} ${labelPlural}`;\n } else if (labelSingle) {\n replyCountText = `1 ${labelSingle}`;\n }\n\n return (\n
\n \n {replyCountText}\n\n \n \n
\n );\n}\n\nexport const MessageRepliesCountButton = React.memo(\n UnMemoizedMessageRepliesCountButton,\n) as typeof UnMemoizedMessageRepliesCountButton;\n","import React from 'react';\n\nimport { IconPin } from '../Icons';\nimport { useChatContext, useTranslationContext } from '../../context';\nimport type { LocalMessage } from 'stream-chat';\n\nexport type PinIndicatorProps = {\n message?: LocalMessage;\n};\n\n/**\n * Default pinned message indicator. Renders \"Pinned by [name]\" with pin icon above the message bubble.\n * Name is taken from message.pinned_by (who pinned).\n */\nexport const PinIndicator = ({ message }: PinIndicatorProps) => {\n const { t } = useTranslationContext();\n const { client } = useChatContext();\n\n if (!message) return null;\n\n const isOwnPin = !!message.pinned_by?.id && message.pinned_by.id === client.user?.id;\n const name = message.pinned_by?.name ?? message.pinned_by?.id ?? '';\n\n const label = isOwnPin\n ? t('Pinned by You')\n : name\n ? t('Pinned by {{ name }}', { name })\n : t('Message pinned');\n\n return (\n
\n
\n \n \n \n {label}\n
\n
\n );\n};\n","import type { ComponentProps } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport type { PopperLikePlacement } from '../Dialog';\nimport { usePopoverPosition } from '../Dialog/hooks/usePopoverPosition';\nimport clsx from 'clsx';\n\nexport const Tooltip = ({ children, className, ...rest }: ComponentProps<'div'>) => (\n
\n {children}\n
\n);\n\nexport type PopperTooltipProps = React.PropsWithChildren<{\n /** Reference element to which the tooltip should attach to */\n referenceElement: T | null;\n /** Custom class to be merged along the defaults */\n className?: string;\n /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */\n offset?: [number, number];\n /** Popper's placement property defining default position of the tooltip, default 'top' */\n placement?: PopperLikePlacement;\n /** Tells component whether to render its contents */\n visible?: boolean;\n}>;\n\nexport const PopperTooltip = ({\n children,\n className,\n offset = [0, 10],\n placement = 'top',\n referenceElement,\n visible = false,\n}: PopperTooltipProps) => {\n const [popperElement, setPopperElement] = useState(null);\n const {\n placement: resolvedPlacement,\n refs,\n strategy,\n x,\n y,\n } = usePopoverPosition({\n offset,\n placement,\n });\n\n useEffect(() => {\n refs.setReference(referenceElement);\n }, [referenceElement, refs]);\n\n useEffect(() => {\n refs.setFloating(popperElement);\n }, [popperElement, refs]);\n\n if (!visible) return null;\n\n return (\n \n {children}\n \n );\n};\n","import type React from 'react';\nimport { useCallback, useState } from 'react';\n\nexport const useEnterLeaveHandlers = ({\n onMouseEnter,\n onMouseLeave,\n}: Partial>> = {}) => {\n const [tooltipVisible, setTooltipVisible] = useState(false);\n\n const handleEnter: React.MouseEventHandler = useCallback(\n (e) => {\n setTooltipVisible(true);\n onMouseEnter?.(e);\n },\n [onMouseEnter],\n );\n\n const handleLeave: React.MouseEventHandler = useCallback(\n (e) => {\n setTooltipVisible(false);\n onMouseLeave?.(e);\n },\n [onMouseLeave],\n );\n\n return { handleEnter, handleLeave, tooltipVisible };\n};\n","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport type { TooltipUsernameMapper } from './utils';\nimport { getReadByTooltipText, mapToUserNameOrId } from './utils';\nimport { PopperTooltip } from '../Tooltip';\nimport { useEnterLeaveHandlers } from '../Tooltip/hooks';\n\nimport { useChatContext } from '../../context/ChatContext';\nimport { useMessageContext } from '../../context/MessageContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { IconCheckmark1Small, IconChecks, IconClock } from '../Icons';\n\nexport type MessageStatusProps = {\n /* Custom component to render when message is considered delivered, not read. The default UI renders MessageDeliveredIcon and a tooltip with string 'Delivered'. */\n MessageDeliveredStatus?: React.ComponentType;\n /* Custom component to render when message is considered delivered and read. The default UI renders the last reader's Avatar and a tooltip with string readers' names. */\n MessageReadStatus?: React.ComponentType;\n /* Custom component to render when message is considered as being the in the process of delivery. The default UI renders a clock icon and a tooltip with string 'Sending...'. */\n MessageSendingStatus?: React.ComponentType;\n /* Custom component to render when message is considered created on the server, but not delivered. The default UI renders MessageSentIcon and a tooltip with string 'Sent'. */\n MessageSentStatus?: React.ComponentType;\n /* Message type string to be added to CSS class names. */\n messageType?: string;\n /* Allows to customize the username(s) that appear on the message status tooltip */\n tooltipUserNameMapper?: TooltipUsernameMapper;\n};\n\nconst UnMemoizedMessageStatus = (props: MessageStatusProps) => {\n const {\n MessageDeliveredStatus,\n MessageReadStatus,\n MessageSendingStatus,\n MessageSentStatus,\n messageType = 'simple',\n tooltipUserNameMapper = mapToUserNameOrId,\n } = props;\n\n const { handleEnter, handleLeave, tooltipVisible } =\n useEnterLeaveHandlers();\n\n const { client } = useChatContext('MessageStatus');\n const {\n deliveredTo,\n isMyMessage,\n lastOwnMessage,\n message,\n readBy,\n returnAllReadData,\n threadList,\n } = useMessageContext('MessageStatus');\n const { t } = useTranslationContext('MessageStatus');\n const [referenceElement, setReferenceElement] = useState(null);\n\n if (!isMyMessage() || message.type === 'error') return null;\n\n const justReadByMe = readBy?.length === 1 && readBy[0].id === client.user?.id;\n const deliveredOnlyToMe =\n deliveredTo?.length === 1 && deliveredTo[0].id === client.user?.id;\n const sending = message.status === 'sending';\n const read = !!(readBy?.length && !justReadByMe && !threadList);\n const delivered = !!(deliveredTo?.length && !deliveredOnlyToMe && !read && !threadList);\n const sent =\n (returnAllReadData || lastOwnMessage?.id === message.id) &&\n message.status === 'received' &&\n !delivered &&\n !read &&\n !threadList;\n\n const readersWithoutOwnUser = read\n ? readBy.filter((item) => item.id !== client.user?.id)\n : [];\n\n return (\n \n {sending &&\n (MessageSendingStatus ? (\n \n ) : (\n <>\n \n {t('Sending...')}\n \n \n \n ))}\n\n {sent &&\n (MessageSentStatus ? (\n \n ) : (\n <>\n \n {t('Sent')}\n \n \n \n ))}\n\n {delivered &&\n (MessageDeliveredStatus ? (\n \n ) : (\n <>\n \n {t('Delivered')}\n \n \n \n ))}\n\n {read &&\n (MessageReadStatus ? (\n \n ) : (\n <>\n \n {getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)}\n \n\n \n\n {readersWithoutOwnUser.length > 1 && (\n \n {readersWithoutOwnUser.length}\n \n )}\n \n ))}\n \n );\n};\n\nexport const MessageStatus = React.memo(\n UnMemoizedMessageStatus,\n) as typeof UnMemoizedMessageStatus;\n","export function escapeRegExp(text: string) {\n return text.replace(/[-[\\]{}()*+?.,/\\\\^$|#]/g, '\\\\$&');\n}\n\nexport const detectHttp = /(http(s?):\\/\\/)?(www\\.)?/;\n\nexport const messageCodeBlocks = (message: string) => {\n const codeRegex = /```[a-z]*\\n[\\s\\S]*?\\n```|`[a-z]*[\\s\\S]*?`/gm;\n const matches = message.match(codeRegex);\n return matches || [];\n};\n\nexport const matchMarkdownLinks = (message: string) => {\n const regexMdLinks = /\\[([^[]+)\\](\\(.*\\))/gm;\n const matches = message.match(regexMdLinks);\n const singleMatch = /\\[([^[]+)\\]\\((.*)\\)/;\n\n const links = matches\n ? matches.map((match) => {\n const i = singleMatch.exec(match);\n return i && [i[1], i[2]];\n })\n : [];\n\n return links.flat();\n};\n","import type { ReplaceFunction } from 'hast-util-find-and-replace';\nimport { findAndReplace } from 'hast-util-find-and-replace';\nimport { u } from 'unist-builder';\nimport emojiRegex from 'emoji-regex';\n\nimport type { Nodes } from 'hast-util-find-and-replace/lib';\n\nexport const emojiMarkdownPlugin = () => {\n const replace: ReplaceFunction = (match) =>\n u('element', { properties: {}, tagName: 'emoji' }, [u('text', match)]);\n\n const transform = (node: Nodes) => findAndReplace(node, [emojiRegex(), replace]);\n\n return transform;\n};\n","import { escapeRegExp } from '../regex';\nimport type { ReplaceFunction } from 'hast-util-find-and-replace';\nimport { findAndReplace } from 'hast-util-find-and-replace';\nimport { u } from 'unist-builder';\nimport { visit } from 'unist-util-visit';\n\nimport type { Nodes } from 'hast-util-find-and-replace/lib';\nimport type { Element } from 'hast';\nimport type { UserResponse } from 'stream-chat';\n\nexport const mentionsMarkdownPlugin = (mentioned_users: UserResponse[]) => () => {\n const mentioned_usernames = mentioned_users\n .map((user) => user.name || user.id)\n .filter(Boolean)\n .map(escapeRegExp);\n\n const mentionedUsersRegex = new RegExp(\n mentioned_usernames.map((username) => `@${username}`).join('|'),\n 'g',\n );\n\n const replace: ReplaceFunction = (match) => {\n const usernameOrId = match.replace('@', '');\n const user = mentioned_users.find(\n ({ id, name }) => name === usernameOrId || id === usernameOrId,\n );\n return u('element', { mentionedUser: user, properties: {}, tagName: 'mention' }, [\n u('text', match),\n ]);\n };\n\n const transform = (tree: Nodes) => {\n if (!mentioned_usernames.length) return;\n\n // handles special cases of mentions where user.name is an e-mail\n // Remark GFM translates all e-mail-like text nodes to links creating\n // two separate child nodes \"@\" and \"your.name@as.email\" instead of\n // keeping it as one text node with value \"@your.name@as.email\"\n // this piece finds these two separated nodes and merges them together\n // before \"replace\" function takes over\n visit(tree, (node, index, parent) => {\n if (typeof index === 'undefined') return;\n if (!parent) return;\n\n const nextChild = parent.children.at(index + 1) as Element;\n const nextChildHref = nextChild?.properties?.href as string | undefined;\n\n if (\n node.type === 'text' &&\n // text value has to have @ sign at the end of the string\n // and no other characters except whitespace can precede it\n // valid cases: \"text @\", \"@\", \" @\"\n // invalid cases: \"text@\", \"@text\",\n /.?\\s?@$|^@$/.test(node.value) &&\n nextChildHref?.startsWith('mailto:')\n ) {\n const newTextValue = node.value.replace(/@$/, '');\n const username = nextChildHref.replace('mailto:', '');\n parent.children[index] = u('text', newTextValue);\n parent.children[index + 1] = u('text', `@${username}`);\n }\n });\n\n findAndReplace(tree, [mentionedUsersRegex, replace]);\n };\n\n return transform;\n};\n","import type { Visitor } from 'unist-util-visit';\nimport { visit } from 'unist-util-visit';\n\nimport type { Nodes } from 'hast-util-find-and-replace/lib';\n\nconst visitor: Visitor = (node) => {\n if (node.type !== 'html') return;\n\n node.type = 'text';\n};\nconst transform = (tree: Nodes) => {\n visit(tree, visitor);\n};\n\nexport const htmlToTextPlugin = () => transform;\n","import { SKIP, visit, type VisitorResult } from 'unist-util-visit';\nimport type { Image, Link, Parent, Text } from 'mdast';\nimport type { Node } from 'unist';\n\ntype ImgVisitor = (\n node: Image,\n index: number | null,\n parent: Parent | null,\n) => VisitorResult;\n\nexport type ImageToLinkPluginOptions = {\n getTextLabelFrom?: 'alt' | 'title' | 'url';\n};\n\nconst text = (value: string): Text => ({ type: 'text', value });\n\n/**\n * Converts image Markdown links (![Minion](https://octodex.github.com/images/minion.png))\n * to HTML {url | title | alt}\n *\n * By default, the anchor text content is the image url so that image preview can be generated / enriched on the server.\n * @param getTextLabelFrom\n */\nexport function imageToLink({ getTextLabelFrom = 'url' }: ImageToLinkPluginOptions = {}) {\n return (tree: Node) => {\n const visitor: ImgVisitor = (node, index, parent) => {\n if (parent == null || index == null) return;\n\n const label = node[getTextLabelFrom] ?? node.url; // node.alt || node.title || node.url;\n const link: Link = {\n children: [text(label)],\n title: node.title ?? node.alt ?? node.url,\n type: 'link',\n url: node.url,\n };\n\n parent.children.splice(index, 1, link);\n return [SKIP, index + 1] as const;\n };\n\n visit(tree, 'image', visitor);\n };\n}\n","import type { Plugin } from 'unified';\nimport { visit } from 'unist-util-visit';\nimport type { Node, Parent as UnistParent } from 'unist';\nimport type { Root, RootContent, ThematicBreak } from 'mdast';\n\n/** Type guard: does the node have mdast children? */\nfunction isParentWithChildren(\n node: Node,\n): node is UnistParent & { children: RootContent[] } {\n const maybe = node as unknown as { children?: unknown };\n return Array.isArray(maybe.children);\n}\n\n/** Build a single
by mapping a standard mdast node via data.hName */\nfunction brNode(): ThematicBreak {\n return { data: { hName: 'br' }, type: 'thematicBreak' };\n}\n\n/**\n * Inserts runs of
between sibling block nodes to preserve the exact\n * number of *blank source lines* between them. No paragraph wrappers are added.\n *\n * Works because `mdast-util-to-hast` respects `data.hName`, turning our\n * `thematicBreak` into `
`. Multiple blank lines -> multiple `
` siblings.\n */\nexport const keepLineBreaksPlugin: Plugin<[], Root> = () => (tree) => {\n visit(\n tree as unknown as UnistParent, // visit needs a Unist parent-like root\n isParentWithChildren, // limit to parents with children\n (parent) => {\n const children = parent.children as RootContent[];\n if (children.length < 2) return;\n\n const out: RootContent[] = [];\n\n for (let i = 0; i < children.length; i++) {\n const curr = children[i];\n out.push(curr);\n\n if (i === children.length - 1) break;\n\n const next = children[i + 1];\n\n const currEndLine =\n curr.position && curr.position.end ? curr.position.end.line : undefined;\n const nextStartLine =\n next.position && next.position.start ? next.position.start.line : undefined;\n\n if (typeof currEndLine !== 'number' || typeof nextStartLine !== 'number') {\n continue;\n }\n\n // Markdown already separates blocks by at least one visual gap.\n // We add back only the *extra* blank lines from the source.\n const extraBlankLines = Math.max(0, nextStartLine - currEndLine - 1);\n if (extraBlankLines > 0) {\n for (let k = 0; k < extraBlankLines; k++) {\n out.push(brNode());\n }\n }\n }\n\n parent.children = out;\n },\n );\n};\n","// remark-plusplus-ins.ts\nimport type { Plugin } from 'unified';\nimport { SKIP, visit } from 'unist-util-visit';\nimport type { Visitor } from 'unist-util-visit';\nimport type { Parent, PhrasingContent, Text } from 'mdast';\n\n/**\n * \\S → first char must be non-whitespace\n * (?:...)?→ optional middle+closing when length > 1\n * [\\s\\S]*?→ anything (including newlines), lazy\n * final \\S→ last char non-whitespace (only required when there’s more than 1)\n *\n * Matches:\n * ++a++\n * Does not match:\n * ++++\n * ++ ++\n */\nconst INS_REGEX = /\\+\\+(\\S(?:[\\s\\S]*?\\S)?)\\+\\+/g;\nconst IGNORE_NODE_TYPES = new Set([\n 'code',\n 'inlineCode',\n 'link',\n 'linkReference',\n 'definition',\n 'math',\n 'inlineMath',\n]);\n\n/**\n * Converts MD \"++Some text++\" to inserted text element rendered in HTML as Some text\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins\n */\nexport const plusPlusToEmphasis: Plugin<[]> = () => {\n const visitor: Visitor = (node, index, parent) => {\n // 1) Don’t traverse inside ignored nodes\n if (IGNORE_NODE_TYPES.has(node.type)) return SKIP;\n\n // 2) Only transform text nodes with a valid parent + index\n if (node.type !== 'text' || parent == null || typeof index !== 'number') return;\n\n const value = (node as Text).value;\n\n // Reset lastIndex to 0 per node so each node is scanned from the beginning\n INS_REGEX.lastIndex = 0;\n\n let match: RegExpExecArray | null;\n let last = 0;\n const out: PhrasingContent[] = [];\n\n while ((match = INS_REGEX.exec(value))) {\n const [full, inner] = match;\n const start = match.index;\n\n if (start > last) out.push({ type: 'text', value: value.slice(last, start) });\n\n // Render as … (remark-rehype respects data.hName)\n out.push({\n children: [{ type: 'text', value: inner }],\n data: { hName: 'ins' },\n type: 'emphasis',\n });\n\n last = start + full.length;\n }\n\n if (out.length === 0) return; // nothing to change\n if (last < value.length) out.push({ type: 'text', value: value.slice(last) });\n\n (parent as Parent).children.splice(index, 1, ...out);\n\n // Skip re-visiting the replaced range; continue after inserted nodes\n return [SKIP, index + out.length];\n };\n\n return (tree) => visit(tree, visitor);\n};\n","import type { Plugin } from 'unified';\nimport type { Paragraph, Root, Text } from 'mdast';\n\n/**\n * Replace the parsed Markdown tree with a single paragraph containing the\n * original source as a plain text node. No Markdown formatting is interpreted.\n * React will escape it.\n */\nexport const remarkIgnoreMarkdown: Plugin<[], Root> = () => (tree, file) => {\n const source = String(file.value ?? '');\n\n const text: Text = { type: 'text', value: source };\n const paragraph: Paragraph = { children: [text], type: 'paragraph' };\n\n tree.children = [paragraph];\n};\n","import clsx from 'clsx';\nimport type { ComponentProps } from 'react';\nimport React from 'react';\n\nexport const Anchor = ({ children, href }: ComponentProps<'a'>) => {\n const isEmail = href?.startsWith('mailto:');\n const isUrl = href?.startsWith('http');\n\n if (!href || (!isEmail && !isUrl)) return <>{children};\n\n return (\n \n {children}\n \n );\n};\n","import React from 'react';\nimport type { PropsWithChildrenOnly } from '../../../../types/types';\n\nexport const Emoji = ({ children }: PropsWithChildrenOnly) => (\n \n {children}\n \n);\n","import type { PropsWithChildren } from 'react';\nimport React from 'react';\n\nimport type { UserResponse } from 'stream-chat';\n\nexport type MentionProps = PropsWithChildren<{\n node: {\n mentionedUser: UserResponse;\n };\n}>;\n\nexport const Mention = ({ children, node: { mentionedUser } }: MentionProps) => (\n \n {children}\n \n);\n","export const NullComponent = () => null;\n","import { Component } from 'react';\nimport type { PropsWithChildren, ReactNode } from 'react';\n\ntype ErrorBoundaryProps = PropsWithChildren<{ fallback?: ReactNode }>;\n\nexport class ErrorBoundary extends Component {\n constructor(props: ErrorBoundaryProps) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError() {\n return { hasError: true };\n }\n\n componentDidCatch(error: unknown, information: unknown) {\n console.error(error, information);\n }\n\n render() {\n if (this.state.hasError) {\n return this.props.fallback;\n }\n\n return this.props.children;\n }\n}\n","import React from 'react';\nimport ReactMarkdown, { defaultUrlTransform } from 'react-markdown';\nimport { find } from 'linkifyjs';\nimport remarkGfm from 'remark-gfm';\nimport type { ComponentType, JSX } from 'react';\nimport type { Options } from 'react-markdown/lib';\nimport type { UserResponse } from 'stream-chat';\nimport type { PluggableList } from 'unified'; // A sub-dependency of react-markdown. The type is not declared or re-exported from anywhere else\n\nimport { Anchor, Emoji, Mention } from './componentRenderers';\nimport { detectHttp, matchMarkdownLinks, messageCodeBlocks } from './regex';\nimport { emojiMarkdownPlugin, mentionsMarkdownPlugin } from './rehypePlugins';\nimport {\n htmlToTextPlugin,\n imageToLink,\n keepLineBreaksPlugin,\n plusPlusToEmphasis,\n} from './remarkPlugins';\nimport { ErrorBoundary } from '../../UtilityComponents';\nimport type { MentionProps } from './componentRenderers';\n\nexport type RenderTextPluginConfigurator = (\n defaultPlugins: PluggableList,\n) => PluggableList;\n\ntype IntrinsicElementTagName = keyof JSX.IntrinsicElements & string;\n\nexport const defaultAllowedTagNames: Array<\n IntrinsicElementTagName | 'emoji' | 'mention'\n> = [\n 'html',\n 'text',\n 'br',\n 'p',\n 'em',\n 'strong',\n 'a',\n 'ol',\n 'ul',\n 'li',\n 'code',\n 'pre',\n 'blockquote',\n 'del',\n 'table',\n 'thead',\n 'tbody',\n 'th',\n 'tr',\n 'td',\n 'tfoot',\n // custom types (tagNames)\n 'emoji',\n 'mention',\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'ins',\n];\n\nfunction formatUrlForDisplay(url: string) {\n try {\n return decodeURIComponent(url).replace(detectHttp, '');\n } catch (e) {\n return url;\n }\n}\n\nfunction encodeDecode(url: string) {\n try {\n return encodeURI(decodeURIComponent(url));\n } catch (error) {\n return url;\n }\n}\n\nconst urlTransform = (uri: string) =>\n uri.startsWith('app://') ? uri : defaultUrlTransform(uri);\n\nconst getPluginsForward: RenderTextPluginConfigurator = (plugins: PluggableList) =>\n plugins;\n\nexport const markDownRenderers: RenderTextOptions['customMarkDownRenderers'] = {\n a: Anchor,\n emoji: Emoji,\n mention: Mention,\n};\n\nexport type RenderTextOptions = {\n allowedTagNames?: Array;\n customMarkDownRenderers?: Options['components'] &\n Partial<{\n emoji: ComponentType;\n mention: ComponentType;\n }>;\n getRehypePlugins?: RenderTextPluginConfigurator;\n getRemarkPlugins?: RenderTextPluginConfigurator;\n};\n\nexport const renderText = (\n text?: string,\n mentionedUsers?: UserResponse[],\n {\n allowedTagNames = defaultAllowedTagNames,\n customMarkDownRenderers,\n getRehypePlugins = getPluginsForward,\n getRemarkPlugins = getPluginsForward,\n }: RenderTextOptions = {},\n) => {\n // take the @ mentions and turn them into markdown?\n // translate links\n if (!text) return null;\n if (text.trim().length === 1) return <>{text};\n\n let newText = text;\n const markdownLinks = matchMarkdownLinks(newText);\n const codeBlocks = messageCodeBlocks(newText);\n\n // Extract all valid links/emails within text and replace it with proper markup\n // Revert the link order to avoid getting out of sync of the original start and end positions of links\n // - due to the addition of new characters when creating Markdown links\n const links = [...find(newText, 'email'), ...find(newText, 'url')];\n for (let i = links.length - 1; i >= 0; i--) {\n const { end, href, start, type, value } = links[i];\n const linkIsInBlock = codeBlocks.some((block) => block?.includes(value));\n\n // check if message is already markdown\n const noParsingNeeded =\n markdownLinks &&\n markdownLinks.filter((text) => {\n const strippedHref = href?.replace(detectHttp, '');\n const strippedText = text?.replace(detectHttp, '');\n\n if (!strippedHref || !strippedText) return false;\n\n return strippedHref.includes(strippedText) || strippedText.includes(strippedHref);\n });\n\n if (noParsingNeeded.length > 0 || linkIsInBlock) continue;\n\n try {\n // special case for mentions:\n // it could happen that a user's name matches with an e-mail format pattern.\n // in that case, we check whether the found e-mail is actually a mention\n // by naively checking for an existence of @ sign in front of it.\n if (type === 'email' && mentionedUsers) {\n const emailMatchesWithName = mentionedUsers.find((u) => u.name === value);\n if (emailMatchesWithName) {\n // FIXME: breaks if the mention symbol is not '@'\n const isMention = newText.charAt(start - 1) === '@';\n // in case of mention, we leave the match in its original form,\n // and we let `mentionsMarkdownPlugin` to do its job\n newText =\n newText.slice(0, start) +\n (isMention ? value : `[${value}](${encodeDecode(href)})`) +\n newText.slice(end);\n }\n } else {\n const displayLink = type === 'email' ? value : formatUrlForDisplay(href);\n\n newText =\n newText.slice(0, start) +\n `[${displayLink}](${encodeDecode(href)})` +\n newText.slice(end);\n }\n } catch (e) {\n void e;\n }\n }\n\n const remarkPlugins: PluggableList = [\n htmlToTextPlugin,\n keepLineBreaksPlugin,\n [remarkGfm, { singleTilde: false }],\n plusPlusToEmphasis,\n imageToLink,\n ];\n const rehypePlugins: PluggableList = [emojiMarkdownPlugin];\n\n if (mentionedUsers?.length) {\n rehypePlugins.push(mentionsMarkdownPlugin(mentionedUsers));\n }\n\n return (\n {text}}>\n \n {newText}\n \n \n );\n};\n","import clsx from 'clsx';\nimport React, { useId, useMemo } from 'react';\nimport { messageHasAttachments, messageTextHasEmojisOnly } from './utils';\n\nimport type { MessageContextValue } from '../../context';\nimport { useMessageContext, useTranslationContext } from '../../context';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { renderText as defaultRenderText } from './renderText';\n\nimport type { LocalMessage } from 'stream-chat';\nimport { getTranslatedMessageText } from '../../context/MessageTranslationViewContext';\n\nexport type MessageTextProps = {\n /* Replaces the CSS class name placed on the component's inner `div` container */\n customInnerClass?: string;\n /* Adds a CSS class name to the component's outer `div` container */\n customWrapperClass?: string;\n /* The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value stored in `MessageContext`) */\n message?: LocalMessage;\n} & Pick;\n\nconst UnMemoizedMessageTextComponent = (props: MessageTextProps) => {\n const {\n customInnerClass,\n customWrapperClass = '',\n message: propMessage,\n renderText: propsRenderText,\n } = props;\n\n const {\n message: contextMessage,\n onMentionsClickMessage,\n onMentionsHoverMessage,\n renderText: contextRenderText,\n translationView = 'translated',\n unsafeHTML,\n } = useMessageContext('MessageText');\n\n const renderText = propsRenderText ?? contextRenderText ?? defaultRenderText;\n\n const { t, userLanguage } = useTranslationContext('MessageText');\n const message = propMessage || contextMessage;\n const hasAttachment = messageHasAttachments(message);\n const messageContextId = useId();\n const messageTextId = useId();\n\n const messageTextToRender =\n translationView === 'original'\n ? message.text\n : getTranslatedMessageText({ language: userLanguage, message }) || message.text;\n\n const messageText = useMemo(\n () => renderText(messageTextToRender, message.mentioned_users),\n [message.mentioned_users, messageTextToRender, renderText],\n );\n\n const wrapperClass = customWrapperClass || 'str-chat__message-text';\n const innerClass = customInnerClass;\n const hasMentionedUsers = Boolean(message.mentioned_users?.length);\n const isMentionsInteractionEnabled =\n hasMentionedUsers && typeof onMentionsClickMessage === 'function';\n const senderName = message.user?.name;\n const messageContext = senderName\n ? t('aria/Message from {{ user }},', { user: senderName })\n : t('aria/Message,');\n // `aria-labelledby` accepts a space-separated list of element ids. We point to the\n // hidden message context and the rendered message text so screen readers announce both.\n const messageLabelledBy = `${messageContextId} ${messageTextId}`;\n\n const handleMentionsKeyDown = (event: React.KeyboardEvent) => {\n if (!isMentionsInteractionEnabled || (event.key !== 'Enter' && event.key !== ' ')) {\n return;\n }\n\n event.preventDefault();\n onMentionsClickMessage(event);\n };\n\n if (!messageTextToRender) return null;\n\n /**\n * The component has two mutually exclusive focus models. The reason is this bit of behavior:\n *\n * if mentions are not interactive:\n * - the whole message text block is just a readable focus stop\n * - outer wrapper gets tabIndex={0}\n * - inner wrapper is not focusable\n * if mentions are interactive:\n * - keyboard interaction needs to land on the inner element, because that’s where onClick, onKeyDown, and mention hover/click behavior live\n * - inner wrapper gets tabIndex={0}\n * - outer wrapper must stop being focusable, otherwise you create an extra dead focus stop before the actual interactive target\n */\n return (\n \n {messageContext}\n \n {unsafeHTML && message.html ? (\n
\n ) : (\n
{messageText}
\n )}\n
\n \n );\n};\n\nexport const MessageText = React.memo(\n UnMemoizedMessageTextComponent,\n) as typeof UnMemoizedMessageTextComponent;\n","import React, { useMemo } from 'react';\n\nimport { useMessageContext } from '../../context/MessageContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { getDateString, isDate } from '../../i18n/utils';\nimport type { TimestampFormatterOptions } from '../../i18n/types';\n\nexport interface TimestampProps extends TimestampFormatterOptions {\n /* Adds a CSS class name to the component's outer `time` container. */\n customClass?: string;\n /* Timestamp to display */\n timestamp?: Date | string;\n}\n\nexport function Timestamp(props: TimestampProps) {\n const { calendar, calendarFormats, customClass, format, timestamp } = props;\n\n const { formatDate } = useMessageContext('MessageTimestamp');\n const { t, tDateTimeParser } = useTranslationContext('MessageTimestamp');\n\n const normalizedTimestamp =\n timestamp && isDate(timestamp) ? timestamp.toISOString() : timestamp;\n\n const when = useMemo(\n () =>\n getDateString({\n calendar,\n calendarFormats,\n format,\n formatDate,\n messageCreatedAt: normalizedTimestamp,\n t,\n tDateTimeParser,\n timestampTranslationKey: 'timestamp/MessageTimestamp',\n }),\n [\n calendar,\n calendarFormats,\n format,\n formatDate,\n normalizedTimestamp,\n t,\n tDateTimeParser,\n ],\n );\n\n if (!when) {\n return null;\n }\n\n return (\n \n {when}\n \n );\n}\n","import React from 'react';\nimport { useMessageContext } from '../../context/MessageContext';\nimport { Timestamp as DefaultTimestamp } from './Timestamp';\nimport { useComponentContext } from '../../context';\n\nimport type { LocalMessage } from 'stream-chat';\nimport type { TimestampFormatterOptions } from '../../i18n/types';\n\nexport type MessageTimestampProps = TimestampFormatterOptions & {\n /* Adds a CSS class name to the component's outer `time` container. */\n customClass?: string;\n /* The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value from `MessageContext`) */\n message?: LocalMessage;\n};\n\nconst UnMemoizedMessageTimestamp = (props: MessageTimestampProps) => {\n const { message: propMessage, ...timestampProps } = props;\n const { message: contextMessage } = useMessageContext('MessageTimestamp');\n const { Timestamp = DefaultTimestamp } = useComponentContext('MessageTimestamp');\n const message = propMessage || contextMessage;\n return ;\n};\n\nexport const MessageTimestamp = React.memo(\n UnMemoizedMessageTimestamp,\n) as typeof UnMemoizedMessageTimestamp;\n","import React, { useState } from 'react';\nimport type { LocalMessage } from 'stream-chat';\nimport type { TimestampFormatterOptions } from '../../i18n/types';\nimport { PopperTooltip } from '../Tooltip';\nimport { useEnterLeaveHandlers } from '../Tooltip/hooks';\nimport { Timestamp as DefaultTimestamp } from './Timestamp';\nimport {\n useComponentContext,\n useMessageContext,\n useTranslationContext,\n} from '../../context';\n\nexport type MessageEditedIndicatorProps = TimestampFormatterOptions & {\n /* Adds a CSS class name to the component's outer container. */\n customClass?: string;\n /* The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value from `MessageContext`) */\n message?: LocalMessage;\n};\n\nconst UnMemoizedMessageEditedIndicator = (props: MessageEditedIndicatorProps) => {\n const { customClass, message: propMessage, ...timestampProps } = props;\n const { message: contextMessage } = useMessageContext('MessageEditedIndicator');\n const { t } = useTranslationContext('MessageEditedIndicator');\n const { Timestamp = DefaultTimestamp } = useComponentContext('MessageEditedIndicator');\n const message = propMessage ?? contextMessage;\n\n const [referenceElement, setReferenceElement] = useState(null);\n const { handleEnter, handleLeave, tooltipVisible } =\n useEnterLeaveHandlers();\n\n if (!message?.message_text_updated_at) {\n return null;\n }\n\n return (\n \n {t('Edited')}\n \n \n \n \n );\n};\n\nexport const MessageEditedIndicator = React.memo(\n UnMemoizedMessageEditedIndicator,\n) as typeof UnMemoizedMessageEditedIndicator;\n","import type { LocalMessage } from 'stream-chat';\nimport React, { useCallback, useMemo } from 'react';\nimport { IconTranslate } from '../Icons';\nimport {\n getTranslatedMessageText,\n useMessageContext,\n useTranslationContext,\n} from '../../context';\nimport { Button } from '../Button';\n\nexport type TranslationIndicatorProps = {\n message?: LocalMessage;\n};\n\nexport const MessageTranslationIndicator = ({\n message: propMessage,\n}: TranslationIndicatorProps) => {\n const { t, userLanguage } = useTranslationContext();\n const {\n message: contextMessage,\n setTranslationView,\n translationView,\n } = useMessageContext('MessageTranslationIndicator');\n const message = propMessage ?? contextMessage;\n\n const translatedTextForUser = useMemo(\n () => getTranslatedMessageText({ language: userLanguage, message }),\n [userLanguage, message],\n );\n\n const hasTranslationForUserLanguage = useMemo(\n () =>\n translatedTextForUser != null &&\n message?.text !== undefined &&\n translatedTextForUser !== message.text,\n [translatedTextForUser, message?.text],\n );\n\n const viewingOriginal = useMemo(\n () =>\n translationView === 'original' ||\n (translationView === undefined && !hasTranslationForUserLanguage),\n [translationView, hasTranslationForUserLanguage],\n );\n\n const handleToggle = useCallback(() => {\n setTranslationView?.(viewingOriginal ? 'translated' : 'original');\n }, [setTranslationView, viewingOriginal]);\n\n const sourceLanguageName = useMemo(() => {\n const sourceLanguageCode = message?.i18n?.language;\n if (!sourceLanguageCode) return '';\n const languageKey = 'language/' + sourceLanguageCode;\n const translatedName = t(languageKey);\n return translatedName && translatedName !== languageKey\n ? translatedName\n : sourceLanguageCode;\n }, [message?.i18n?.language, t]);\n\n if (!message?.i18n || !setTranslationView) return null;\n if (!hasTranslationForUserLanguage) return null;\n\n return (\n
\n \n \n {viewingOriginal\n ? t('Original')\n : sourceLanguageName\n ? t('Translated from {{ language }}', { language: sourceLanguageName })\n : t('Translated')}\n \n · \n \n {viewingOriginal ? t('View translation') : t('View original')}\n \n
\n );\n};\n","import React from 'react';\nimport clsx from 'clsx';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nimport { useTranslationContext } from '../../../context';\nimport { IconDownload } from '../../Icons';\n\nexport type DownloadButtonProps = {\n /** Attachment asset URL (e.g. `asset_url`). */\n assetUrl?: string;\n className?: string;\n /** Suggested filename for the `download` attribute (not the HTML `title` tooltip). */\n suggestedFileName?: string;\n /** Native browser tooltip; defaults to translated “Download Attachment”. */\n tooltipTitle?: string;\n};\n\n/**\n * Icon download control for {@link Audio} and {@link FileAttachment} rows.\n * (BaseImage defines its own small download link when `showDownloadButtonOnError` is used.)\n */\nexport const DownloadButton = ({\n assetUrl,\n className,\n suggestedFileName,\n tooltipTitle,\n}: DownloadButtonProps) => {\n const { t } = useTranslationContext();\n if (!assetUrl) return null;\n const href = sanitizeUrl(assetUrl);\n if (!href) return null;\n\n return (\n \n
\n \n
\n \n );\n};\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport React from 'react';\nimport clsx from 'clsx';\n\nexport const BASE_FILE_ICON_CLASSNAME = 'str-chat__file-icon' as const;\nexport const FILE_ICON_GRAPHIC_CLASSNAME = 'str-chat__file-icon__graphic' as const;\n/** Add this class (e.g. via className) when hiding the label with CSS to center the icon graphic. */\nexport const FILE_ICON_NO_LABEL_CLASSNAME = 'str-chat__file-icon--no-label' as const;\n\nexport type FileIconSize = 'sm' | 'md' | 'lg' | 'xl';\n\nexport type FileIconSizeConfigEntry = {\n width: number;\n height: number;\n labelX: number;\n labelY: number;\n};\n\n/** Rendered dimensions (px) and label position in viewBox coords for consistent spacing. */\nexport const FILE_ICON_SIZE_CONFIG: Record = {\n lg: { height: 40, labelX: 16, labelY: 36, width: 32 },\n md: { height: 32, labelX: 16, labelY: 35, width: 26 },\n sm: { height: 24, labelX: 16, labelY: 31.5, width: 19 },\n xl: { height: 48, labelX: 16, labelY: 36, width: 40 },\n};\n\n/** Merge partial overrides with default config. Use for Chat-level fileIconSizeConfig. */\nexport const mergeFileIconSizeConfig = (\n overrides?: Partial>>,\n): Record => {\n if (!overrides) return FILE_ICON_SIZE_CONFIG;\n return (['sm', 'md', 'lg', 'xl'] as const).reduce(\n (acc, size) => ({\n ...acc,\n [size]: { ...FILE_ICON_SIZE_CONFIG[size], ...overrides[size] },\n }),\n {} as Record,\n );\n};\n\nconst FILE_ICON_VIEWBOX = { height: 40, width: 32 } as const;\nconst FILE_ICON_PAPER_PATH =\n 'M0 4C0 1.79086 1.79086 0 4 0H22.4L32 10V36C32 38.2091 30.2091 40 28 40H4C1.79086 40 0 38.2091 0 36V4Z';\nconst FILE_ICON_FOLD_PATH = 'M32 10H25.4C23.7431 10 22.4 8.65685 22.4 7V0L32 10Z';\nconst FILE_ICON_WITHOUT_CAPTION_SYMBOL_SCALE_X = 32 / 26;\nconst FILE_ICON_WITHOUT_CAPTION_SYMBOL_SCALE_Y = 40 / 32;\n\nexport type BaseFileIconProps = {\n label?: string;\n /** Resolved size config (defaults from FILE_ICON_SIZE_CONFIG when omitted). Pass sizeConfig on FileIcon or use AttachmentFileIcon to override. */\n sizeConfig?: Record;\n size?: FileIconSize;\n} & ComponentPropsWithoutRef<'svg'>;\n\ntype SvgProps = Omit;\n\nconst Svg = ({ className, size, sizeConfig, ...props }: SvgProps) => {\n const config = sizeConfig ?? FILE_ICON_SIZE_CONFIG;\n const dimensions = size ? config[size] : undefined;\n const dimensionsStyle = dimensions\n ? {\n flexShrink: 0,\n height: `${dimensions.height}px`,\n width: `${dimensions.width}px`,\n }\n : undefined;\n\n return (\n \n );\n};\n\ntype FileIconLabelProps = {\n label?: string;\n size?: FileIconSize;\n sizeConfig?: Record;\n};\n\nconst FileIconLabel = ({ label, size, sizeConfig }: FileIconLabelProps) => {\n const configMap = sizeConfig ?? FILE_ICON_SIZE_CONFIG;\n const config = size ? configMap[size] : { labelX: 16, labelY: 33 };\n return (\n \n {label}\n \n );\n};\n\ntype FileIconSymbolMap = {\n withCaption: ReactNode;\n withoutCaption: ReactNode;\n};\n\nconst TEXT_SYMBOLS: FileIconSymbolMap = {\n withCaption: (\n <>\n \n \n \n \n ),\n withoutCaption: (\n <>\n \n \n \n \n ),\n};\n\nconst OTHER_SYMBOLS: FileIconSymbolMap = {\n withCaption: (\n <>\n \n \n \n \n ),\n withoutCaption: TEXT_SYMBOLS.withoutCaption,\n};\n\nconst CODE_SYMBOLS: FileIconSymbolMap = {\n withCaption: (\n \n ),\n withoutCaption: (\n \n ),\n};\n\nconst AUDIO_SYMBOLS: FileIconSymbolMap = {\n withCaption: (\n \n ),\n withoutCaption: (\n \n ),\n};\n\nconst PRESENTATION_SYMBOLS: FileIconSymbolMap = {\n withCaption: (\n \n ),\n withoutCaption: (\n \n ),\n};\n\nconst SPREADSHEET_SYMBOLS: FileIconSymbolMap = {\n withCaption: (\n \n ),\n withoutCaption: (\n \n ),\n};\n\nconst COMPRESSION_SYMBOLS: FileIconSymbolMap = {\n withCaption: (\n \n ),\n withoutCaption: (\n \n ),\n};\n\nconst VIDEO_SYMBOLS: FileIconSymbolMap = {\n withCaption: (\n \n ),\n withoutCaption: (\n \n ),\n};\n\ntype StandardFileTypeIconProps = BaseFileIconProps & {\n color: string;\n fileTypeClassName: string;\n symbols: FileIconSymbolMap;\n};\n\nconst StandardFileTypeIcon = ({\n className,\n color,\n fileTypeClassName,\n label,\n size,\n sizeConfig,\n symbols,\n ...props\n}: StandardFileTypeIconProps) => {\n const renderLabel = !!label;\n const resolvedLabel = renderLabel ? label : undefined;\n const symbolVariant = renderLabel ? 'withCaption' : 'withoutCaption';\n\n return (\n \n \n \n {renderLabel ? (\n symbols[symbolVariant]\n ) : (\n \n {symbols[symbolVariant]}\n \n )}\n \n \n {resolvedLabel && (\n \n )}\n \n );\n};\n\nconst PDF_SMALL_SYMBOL = (\n \n);\n\nconst PDF_LEGACY_SYMBOL = (\n <>\n \n \n \n);\n\nexport const FilePdfIcon = ({\n className,\n label,\n size,\n sizeConfig,\n ...props\n}: BaseFileIconProps) => {\n const useLegacyPdfMarkup = !!label;\n\n return (\n \n \n \n {useLegacyPdfMarkup ? (\n PDF_LEGACY_SYMBOL\n ) : (\n \n {PDF_SMALL_SYMBOL}\n \n )}\n \n \n \n );\n};\n\nexport const FileWordIcon = ({ className, label, ...props }: BaseFileIconProps) => (\n \n);\n\nexport const FilePowerPointIcon = ({ className, label, ...props }: BaseFileIconProps) => (\n \n);\n\nexport const FileExcelIcon = ({ className = '', label, ...props }: BaseFileIconProps) => (\n \n);\n\nexport const FileArchiveIcon = ({\n className = '',\n label = '',\n ...props\n}: BaseFileIconProps) => (\n \n);\n\nexport const FileCodeIcon = ({ className = '', label, ...props }: BaseFileIconProps) => (\n \n);\n\nexport const FileAudioIcon = ({ className = '', label, ...props }: BaseFileIconProps) => (\n \n);\n\nexport const FileVideoIcon = ({ className = '', label, ...props }: BaseFileIconProps) => (\n \n);\n\nexport const FileFallbackIcon = ({\n className = '',\n label = '',\n ...props\n}: BaseFileIconProps) => (\n \n);\n","export type GeneralType = 'audio/' | 'video/' | 'image/' | 'text/';\n\nexport type SupportedMimeType =\n | (typeof wordMimeTypes)[number]\n | (typeof excelMimeTypes)[number]\n | (typeof powerpointMimeTypes)[number]\n | (typeof archiveFileTypes)[number]\n | (typeof codeFileTypes)[number];\n\nexport const wordMimeTypes = [\n // Microsoft Word\n // .doc .dot\n 'application/msword',\n // .doc .dot\n 'application/msword-template',\n // .docx\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n // .dotx (no test)\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.template',\n // .docm\n 'application/vnd.ms-word.document.macroEnabled.12',\n // .dotm (no test)\n 'application/vnd.ms-word.template.macroEnabled.12',\n\n // LibreOffice/OpenOffice Writer\n // .odt\n 'application/vnd.oasis.opendocument.text',\n // .ott\n 'application/vnd.oasis.opendocument.text-template',\n // .fodt\n 'application/vnd.oasis.opendocument.text-flat-xml',\n // .uot\n // NOTE: firefox doesn't know mimetype so maybe ignore\n];\n\nexport const excelMimeTypes = [\n // .csv\n 'text/csv',\n // TODO: maybe more data files\n\n // Microsoft Excel\n // .xls .xlt .xla (no test for .xla)\n 'application/vnd.ms-excel',\n // .xlsx\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n // .xltx (no test)\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.template',\n // .xlsm\n 'application/vnd.ms-excel.sheet.macroEnabled.12',\n // .xltm (no test)\n 'application/vnd.ms-excel.template.macroEnabled.12',\n // .xlam (no test)\n 'application/vnd.ms-excel.addin.macroEnabled.12',\n // .xlsb (no test)\n 'application/vnd.ms-excel.addin.macroEnabled.12',\n\n // LibreOffice/OpenOffice Calc\n // .ods\n 'application/vnd.oasis.opendocument.spreadsheet',\n // .ots\n 'application/vnd.oasis.opendocument.spreadsheet-template',\n // .fods\n 'application/vnd.oasis.opendocument.spreadsheet-flat-xml',\n // .uos\n // NOTE: firefox doesn't know mimetype so maybe ignore\n];\n\nexport const powerpointMimeTypes = [\n // Microsoft Word\n // .ppt .pot .pps .ppa (no test for .ppa)\n 'application/vnd.ms-powerpoint',\n // .pptx\n 'application/vnd.openxmlformats-officedocument.presentationml.presentation',\n // .potx (no test)\n 'application/vnd.openxmlformats-officedocument.presentationml.template',\n // .ppsx\n 'application/vnd.openxmlformats-officedocument.presentationml.slideshow',\n // .ppam\n 'application/vnd.ms-powerpoint.addin.macroEnabled.12',\n // .pptm\n 'application/vnd.ms-powerpoint.presentation.macroEnabled.12',\n // .potm\n 'application/vnd.ms-powerpoint.template.macroEnabled.12',\n // .ppsm\n 'application/vnd.ms-powerpoint.slideshow.macroEnabled.12',\n\n // LibreOffice/OpenOffice Writer\n // .odp\n 'application/vnd.oasis.opendocument.presentation',\n // .otp\n 'application/vnd.oasis.opendocument.presentation-template',\n // .fodp\n 'application/vnd.oasis.opendocument.presentation-flat-xml',\n // .uop\n // NOTE: firefox doesn't know mimetype so maybe ignore\n];\n\nexport const archiveFileTypes = [\n // .zip\n 'application/zip',\n // .z7\n 'application/x-7z-compressed',\n // .ar\n 'application/x-archive',\n // .tar\n 'application/x-tar',\n // .tar.gz\n 'application/gzip',\n // .tar.Z\n 'application/x-compress',\n // .tar.bz2\n 'application/x-bzip',\n // .tar.lz\n 'application/x-lzip',\n // .tar.lz4\n 'application/x-lz4',\n // .tar.lzma\n 'application/x-lzma',\n // .tar.lzo (no test)\n 'application/x-lzop',\n // .tar.xz\n 'application/x-xz',\n // .war\n 'application/x-webarchive',\n // .rar\n 'application/vnd.rar',\n];\n\nexport const codeFileTypes = [\n // .html .htm\n 'text/html',\n // .css\n 'text/css',\n // .js\n 'application/x-javascript',\n 'text/javascript',\n // .json\n 'application/json',\n // .py\n 'text/x-python',\n // .go\n 'text/x-go',\n // .c\n 'text/x-csrc',\n // .cpp\n 'text/x-c++src',\n // .rb\n 'application/x-ruby',\n // .rust\n 'text/rust',\n // .java\n 'text/x-java',\n // .php\n 'application/x-php',\n // .cs\n 'text/x-csharp',\n // .scala\n 'text/x-scala',\n // .erl\n 'text/x-erlang',\n // .sh\n 'application/x-shellscript',\n];\n\nexport const mimeTypeToExtensionMap: Record = {\n // Application types (sorted alphabetically)\n 'application/epub+zip': 'epub',\n 'application/gzip': 'gz',\n 'application/java-archive': 'jar',\n 'application/json': 'json',\n 'application/ld+json': 'jsonld',\n 'application/msword': 'doc',\n 'application/msword-template': 'dot',\n 'application/octet-stream': 'bin',\n 'application/ogg': 'ogx',\n 'application/pdf': 'pdf',\n 'application/postscript': 'ps',\n 'application/rtf': 'rtf',\n 'application/vnd.amazon.ebook': 'azw',\n 'application/vnd.apple.installer+xml': 'mpkg',\n 'application/vnd.mozilla.xul+xml': 'xul',\n 'application/vnd.ms-excel': 'xls',\n 'application/vnd.ms-excel.addin.macroEnabled.12': 'xlam',\n 'application/vnd.ms-excel.sheet.macroEnabled.12': 'xlsm',\n 'application/vnd.ms-excel.template.macroEnabled.12': 'xltm',\n 'application/vnd.ms-fontobject': 'eot',\n 'application/vnd.ms-powerpoint': 'ppt',\n 'application/vnd.ms-powerpoint.addin.macroEnabled.12': 'ppam',\n 'application/vnd.ms-powerpoint.presentation.macroEnabled.12': 'pptm',\n 'application/vnd.ms-powerpoint.slideshow.macroEnabled.12': 'ppsm',\n 'application/vnd.ms-powerpoint.template.macroEnabled.12': 'potm',\n 'application/vnd.ms-word.document.macroEnabled.12': 'docm',\n 'application/vnd.ms-word.template.macroEnabled.12': 'dotm',\n 'application/vnd.oasis.opendocument.presentation': 'odp',\n 'application/vnd.oasis.opendocument.presentation-flat-xml': 'fodp',\n 'application/vnd.oasis.opendocument.presentation-template': 'otp',\n 'application/vnd.oasis.opendocument.spreadsheet': 'ods',\n 'application/vnd.oasis.opendocument.spreadsheet-flat-xml': 'fods',\n 'application/vnd.oasis.opendocument.spreadsheet-template': 'ots',\n 'application/vnd.oasis.opendocument.text': 'odt',\n 'application/vnd.oasis.opendocument.text-flat-xml': 'fodt',\n 'application/vnd.oasis.opendocument.text-template': 'ott',\n 'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'pptx',\n 'application/vnd.openxmlformats-officedocument.presentationml.slideshow': 'ppsx',\n 'application/vnd.openxmlformats-officedocument.presentationml.template': 'potx',\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xlsx',\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.template': 'xltx',\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.template': 'dotx',\n 'application/vnd.rar': 'rar',\n 'application/vnd.visio': 'vsd',\n 'application/wasm': 'wasm',\n 'application/x-7z-compressed': '7z',\n 'application/x-abiword': 'abw',\n 'application/x-archive': 'ar',\n 'application/x-bzip': 'bz',\n 'application/x-bzip2': 'bz2',\n 'application/x-cdf': 'cda',\n 'application/x-compress': 'Z',\n 'application/x-csh': 'csh',\n 'application/x-dosexec': 'exe',\n 'application/x-freearc': 'arc',\n 'application/x-httpd-php': 'php',\n 'application/x-iso9660-image': 'iso',\n 'application/x-javascript': 'js',\n 'application/x-lz4': 'lz4',\n 'application/x-lzip': 'lz',\n 'application/x-lzma': 'lzma',\n 'application/x-lzop': 'lzo',\n 'application/x-mobipocket-ebook': 'mobi',\n 'application/x-msdownload': 'exe',\n 'application/x-perl': 'pl',\n 'application/x-php': 'php',\n 'application/x-rar-compressed': 'rar',\n 'application/x-ruby': 'rb',\n 'application/x-sh': 'sh',\n 'application/x-shellscript': 'sh',\n 'application/x-shockwave-flash': 'swf',\n 'application/x-sql': 'sql',\n 'application/x-stuffit': 'sit',\n 'application/x-tar': 'tar',\n 'application/x-webarchive': 'war',\n 'application/x-xz': 'xz',\n 'application/x-yaml': 'yaml',\n 'application/xhtml+xml': 'xhtml',\n 'application/xml': 'xml',\n 'application/zip': 'zip',\n\n // Audio types\n 'audio/aac': 'aac',\n 'audio/flac': 'flac',\n 'audio/midi': 'midi',\n 'audio/mp4': 'm4a',\n 'audio/mpeg': 'mp3',\n 'audio/ogg': 'oga',\n 'audio/opus': 'opus',\n 'audio/wav': 'wav',\n 'audio/webm': 'weba',\n 'audio/x-aiff': 'aiff',\n 'audio/x-m4a': 'm4a',\n 'audio/x-midi': 'midi',\n 'audio/x-ms-wma': 'wma',\n 'audio/x-wav': 'wav',\n\n // Font types\n 'font/otf': 'otf',\n 'font/ttf': 'ttf',\n 'font/woff': 'woff',\n 'font/woff2': 'woff2',\n\n // Image types\n 'image/apng': 'apng',\n 'image/avif': 'avif',\n 'image/bmp': 'bmp',\n 'image/gif': 'gif',\n 'image/heic': 'heic',\n 'image/heif': 'heif',\n 'image/jpeg': 'jpg',\n 'image/png': 'png',\n 'image/svg+xml': 'svg',\n 'image/tiff': 'tiff',\n 'image/vnd.microsoft.icon': 'ico',\n 'image/webp': 'webp',\n 'image/x-icon': 'ico',\n\n // Text types\n 'text/calendar': 'ics',\n 'text/css': 'css',\n 'text/csv': 'csv',\n 'text/html': 'html',\n 'text/javascript': 'js',\n 'text/markdown': 'md',\n 'text/plain': 'txt',\n 'text/rtf': 'rtf',\n 'text/rust': 'rs',\n 'text/tab-separated-values': 'tsv',\n 'text/vcard': 'vcf',\n 'text/x-c': 'c',\n 'text/x-c++src': 'cpp',\n 'text/x-csharp': 'cs',\n 'text/x-csrc': 'c',\n 'text/x-diff': 'diff',\n 'text/x-erlang': 'erl',\n 'text/x-go': 'go',\n 'text/x-java': 'java',\n 'text/x-java-source': 'java',\n 'text/x-kotlin': 'kt',\n 'text/x-lua': 'lua',\n 'text/x-markdown': 'md',\n 'text/x-objectivec': 'm',\n 'text/x-pascal': 'pas',\n 'text/x-perl': 'pl',\n 'text/x-python': 'py',\n 'text/x-ruby': 'rb',\n 'text/x-rust': 'rs',\n 'text/x-scala': 'scala',\n 'text/x-sh': 'sh',\n 'text/x-shellscript': 'sh',\n 'text/x-sql': 'sql',\n 'text/x-swift': 'swift',\n 'text/x-typescript': 'ts',\n 'text/x-yaml': 'yaml',\n 'text/xml': 'xml',\n 'text/yaml': 'yaml',\n\n // Video types\n 'video/3gpp': '3gp',\n 'video/3gpp2': '3g2',\n 'video/mp2t': 'ts',\n 'video/mp4': 'mp4',\n 'video/mpeg': 'mpeg',\n 'video/ogg': 'ogv',\n 'video/quicktime': 'mov',\n 'video/webm': 'webm',\n 'video/x-flv': 'flv',\n 'video/x-m4v': 'm4v',\n 'video/x-matroska': 'mkv',\n 'video/x-ms-wmv': 'wmv',\n 'video/x-msvideo': 'avi',\n};\n","import * as fileIconSet from './FileIconSet';\nimport type { GeneralType, SupportedMimeType } from './mimeTypes';\nimport {\n archiveFileTypes,\n codeFileTypes,\n excelMimeTypes,\n powerpointMimeTypes,\n wordMimeTypes,\n} from './mimeTypes';\nimport type { ComponentType } from 'react';\nimport type { BaseFileIconProps } from './FileIconSet';\n\ntype MimeTypeMappedComponent =\n | 'FilePdfIcon'\n | 'FileWordIcon'\n | 'FileExcelIcon'\n | 'FilePowerPointIcon'\n | 'FileArchiveIcon'\n | 'FileCodeIcon';\n\ntype GeneralContentTypeComponent = 'FileAudioIcon' | 'FileVideoIcon' | 'FileAltIcon';\n\ntype IconComponents = {\n FileAltIcon: ComponentType;\n FileArchiveIcon: ComponentType;\n FileAudioIcon: ComponentType;\n FileCodeIcon: ComponentType;\n FileExcelIcon: ComponentType;\n FileFallbackIcon: 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 FileVideoIcon,\n}: Pick, GeneralContentTypeComponent>) {\n return {\n 'audio/': FileAudioIcon,\n 'text/': FileAltIcon,\n 'video/': FileVideoIcon,\n };\n}\n\ntype IconMap = {\n standard: Record<\n SupportedMimeType | GeneralType | 'fallback',\n ComponentType\n >;\n};\n\nexport const iconMap: IconMap = {\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 FileVideoIcon: fileIconSet.FileVideoIcon,\n }),\n fallback: fileIconSet.FileFallbackIcon,\n },\n};\n","import React, { useMemo } from 'react';\nimport { iconMap } from './iconMap';\nimport { mergeFileIconSizeConfig } from './FileIconSet';\nimport { mimeTypeToExtensionMap } from './mimeTypes';\nimport type { FileIconSize } from './FileIconSet';\n\nexport type FileIconSizeConfigOverride = Partial<\n Record<\n FileIconSize,\n Partial<{ width: number; height: number; labelX: number; labelY: number }>\n >\n>;\n\nexport type FileIconProps = {\n className?: string;\n fileName?: string;\n mimeType?: string;\n /** Override dimensions/label position per size (sm, md, lg, xl). */\n sizeConfig?: FileIconSizeConfigOverride;\n size?: FileIconSize;\n};\n\nexport function mimeTypeToIcon(mimeType?: string) {\n const theMap = iconMap['standard'];\n\n if (!mimeType) return theMap.fallback;\n\n const icon = theMap[mimeType];\n if (icon) return icon;\n\n if (mimeType.startsWith('audio/')) return theMap['audio/'];\n if (mimeType.startsWith('video/')) return theMap['video/'];\n if (mimeType.startsWith('image/')) return theMap['image/'];\n if (mimeType.startsWith('text/')) return theMap['text/'];\n\n return theMap.fallback;\n}\n\nconst labelFromMimeType = ({\n fileName,\n mimeType,\n}: Pick) => {\n let label;\n\n if (mimeType) {\n label = mimeTypeToExtensionMap[mimeType];\n }\n\n if (!label && fileName) {\n label = fileName.split('.').slice(-1)[0];\n }\n return label;\n};\n\nexport const FileIcon = (props: FileIconProps) => {\n const {\n className,\n fileName,\n mimeType,\n size = 'md',\n sizeConfig: sizeConfigOverride,\n ...rest\n } = props;\n const sizeConfig = useMemo(\n () => mergeFileIconSizeConfig(sizeConfigOverride),\n [sizeConfigOverride],\n );\n const Icon = mimeTypeToIcon(mimeType);\n const label = fileName ? labelFromMimeType({ fileName, mimeType }) : undefined;\n return (\n \n );\n};\n","export const formatTime = (\n totalSeconds?: number,\n rounding: 'ceil' | 'floor' = 'ceil',\n) => {\n if (totalSeconds == null || Number.isNaN(totalSeconds) || totalSeconds < 0) {\n return null;\n }\n\n const roundedSeconds =\n rounding === 'floor' ? Math.floor(totalSeconds) : Math.ceil(totalSeconds);\n const hours = Math.floor(roundedSeconds / 3600);\n const minutes = Math.floor((roundedSeconds % 3600) / 60);\n const seconds = roundedSeconds % 60;\n const minSec = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(\n 2,\n '0',\n )}`;\n\n return hours ? `${String(hours).padStart(2, '0')}:${minSec}` : minSec;\n};\n","import React from 'react';\nimport clsx from 'clsx';\nimport { formatTime } from './formatTime';\n\ntype DurationDisplayProps = {\n /** Whether audio is currently playing */\n isPlaying: boolean;\n /** Optional className for styling */\n className?: string;\n /** Total duration in seconds */\n duration?: number;\n /** Elapsed time in seconds */\n secondsElapsed?: number;\n /** Show remaining time instead of elapsed when possible */\n showRemaining?: boolean;\n};\n\nexport function DurationDisplay({\n className,\n duration,\n isPlaying,\n secondsElapsed,\n showRemaining = false,\n}: DurationDisplayProps) {\n const remainingSeconds =\n duration != null && secondsElapsed != null\n ? Math.max(0, duration - secondsElapsed)\n : undefined;\n const formattedDuration = formatTime(duration);\n const formattedSecondsElapsed = formatTime(secondsElapsed);\n const formattedRemaining = formatTime(remainingSeconds);\n\n const shouldShowElapsed =\n !!secondsElapsed && secondsElapsed > 0 && secondsElapsed < (duration || 0);\n const canShowRemaining = showRemaining && duration != null && secondsElapsed != null;\n const primaryValue = showRemaining ? formattedRemaining : formattedSecondsElapsed;\n const showPrimary = (canShowRemaining || shouldShowElapsed) && !!primaryValue;\n const showDuration = !showPrimary && !!formattedDuration;\n\n return (\n \n {showPrimary && (\n {primaryValue}\n )}\n {showDuration && (\n {formattedDuration}\n )}\n \n );\n}\n","import React from 'react';\nimport { Button } from '../../Button';\nimport clsx from 'clsx';\n\nexport type PlaybackRateButtonProps = React.ComponentProps<'button'>;\n\nexport const PlaybackRateButton = ({\n children,\n className,\n ...rest\n}: PlaybackRateButtonProps) => (\n \n {children}\n \n);\n","import type { KeyboardEvent } from 'react';\nimport type { SeekFn as AudioPlayerSeekFn } from '../AudioPlayer';\n\ntype SeekParams = Parameters[0];\n\nconst DEFAULT_KEYBOARD_PROGRESS_STEP = 5;\nconst DEFAULT_KEYBOARD_PROGRESS_LARGE_STEP = 10;\n\nconst getNextProgressByKey = ({\n key,\n largeStep,\n progress,\n step,\n}: {\n key: string;\n largeStep: number;\n progress: number;\n step: number;\n}) => {\n switch (key) {\n case 'ArrowRight':\n case 'ArrowUp':\n return Math.min(100, progress + step);\n case 'ArrowLeft':\n case 'ArrowDown':\n return Math.max(0, progress - step);\n case 'PageUp':\n return Math.min(100, progress + largeStep);\n case 'PageDown':\n return Math.max(0, progress - largeStep);\n case 'Home':\n return 0;\n case 'End':\n return 100;\n default:\n return null;\n }\n};\n\nexport const handleProgressBarKeyboardSeek = ({\n event,\n largeStep = DEFAULT_KEYBOARD_PROGRESS_LARGE_STEP,\n progress,\n seek,\n step = DEFAULT_KEYBOARD_PROGRESS_STEP,\n}: {\n event: KeyboardEvent;\n largeStep?: number;\n progress: number;\n seek: (params: SeekParams) => void;\n step?: number;\n}) => {\n const nextProgress = getNextProgressByKey({\n key: event.key,\n largeStep,\n progress,\n step,\n });\n\n if (nextProgress === null) return;\n\n event.preventDefault();\n const currentTarget = event.currentTarget;\n const { width, x } = currentTarget.getBoundingClientRect();\n\n seek({\n clientX: x + (width * nextProgress) / 100,\n currentTarget,\n });\n};\n","import type { TFunction } from 'i18next';\nimport { formatTime } from './formatTime';\n\ntype GetAudioTrackSliderAriaValueTextParams = {\n durationSeconds?: number;\n progress: number;\n secondsElapsed?: number;\n t: TFunction;\n};\n\nexport const getAudioTrackSliderAriaValueText = ({\n durationSeconds,\n progress,\n secondsElapsed,\n t,\n}: GetAudioTrackSliderAriaValueTextParams) => {\n const normalizedProgress = Math.max(0, Math.min(100, progress));\n\n if (typeof durationSeconds === 'number' && Number.isFinite(durationSeconds)) {\n const normalizedDuration = Math.max(0, durationSeconds);\n const elapsed =\n typeof secondsElapsed === 'number' && Number.isFinite(secondsElapsed)\n ? Math.max(0, Math.min(secondsElapsed, normalizedDuration))\n : (normalizedDuration * normalizedProgress) / 100;\n const formattedElapsed = formatTime(elapsed, 'floor');\n const formattedDuration = formatTime(normalizedDuration, 'floor');\n\n if (formattedElapsed && formattedDuration) {\n return t('aria/Audio position {{ elapsed }} of {{ duration }}', {\n duration: formattedDuration,\n elapsed: formattedElapsed,\n });\n }\n }\n\n return t('aria/Audio position {{ progress }} percent', {\n progress: Math.round(normalizedProgress),\n });\n};\n","import type { PointerEventHandler } from 'react';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { SeekFn as AudioPlayerSeekFn } from '../AudioPlayer';\n\ntype SeekParams = Parameters[0];\n\ntype UseInteractiveProgressBarParams = {\n progress?: number;\n seek: (params: SeekParams) => void;\n};\n\nconst getAvailableTrackWidth = (trackRoot: HTMLDivElement | null) => {\n if (!trackRoot) return 0;\n\n const parent = trackRoot.parentElement;\n if (!parent) return trackRoot.getBoundingClientRect().width;\n\n const parentWidth = parent.getBoundingClientRect().width;\n const computedStyle = window.getComputedStyle(parent);\n const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n const rawColumnGap = computedStyle.columnGap || computedStyle.gap;\n const parsedColumnGap = parseFloat(rawColumnGap);\n const columnGap = Number.isNaN(parsedColumnGap) ? 0 : parsedColumnGap;\n const gapCount = Math.max(0, parent.children.length - 1);\n const totalGapsWidth = columnGap * gapCount;\n const siblingsWidth = Array.from(parent.children).reduce((total, child) => {\n if (child === trackRoot) return total;\n return total + child.getBoundingClientRect().width;\n }, 0);\n\n return Math.max(\n 0,\n parentWidth - paddingLeft - paddingRight - totalGapsWidth - siblingsWidth,\n );\n};\n\nexport const useInteractiveProgressBar = ({\n progress = 0,\n seek,\n}: UseInteractiveProgressBarParams) => {\n const isDragging = useRef(false);\n const [availableTrackWidth, setAvailableTrackWidth] = useState(0);\n const [root, setRoot] = useState(null);\n const [progressIndicator, setProgressIndicator] = useState(null);\n const lastIndicatorWidth = useRef(0);\n\n const handleDragStart: PointerEventHandler = (e) => {\n e.preventDefault();\n if (!progressIndicator) return;\n\n isDragging.current = true;\n progressIndicator.style.cursor = 'grabbing';\n root?.classList.add('str-chat__wave-progress-bar__track--dragging');\n };\n\n const handleDrag: PointerEventHandler = (e) => {\n if (!isDragging.current) return;\n // Snapshot the event because seek is throttled.\n seek({ ...e });\n };\n\n const handleDragStop = useCallback(() => {\n if (!progressIndicator) return;\n\n isDragging.current = false;\n progressIndicator.style.removeProperty('cursor');\n root?.classList.remove('str-chat__wave-progress-bar__track--dragging');\n }, [progressIndicator, root]);\n\n useEffect(() => {\n document.addEventListener('pointerup', handleDragStop);\n\n return () => {\n document.removeEventListener('pointerup', handleDragStop);\n };\n }, [handleDragStop]);\n\n useEffect(() => {\n if (!root || typeof ResizeObserver === 'undefined') return;\n\n const observer = new ResizeObserver(([entry]) => {\n const nextAvailableWidth = getAvailableTrackWidth(entry.target as HTMLDivElement);\n setAvailableTrackWidth(nextAvailableWidth || entry.contentRect.width);\n });\n\n observer.observe(root);\n\n return () => {\n observer.disconnect();\n };\n }, [root]);\n\n useLayoutEffect(() => {\n if (root) {\n setAvailableTrackWidth(getAvailableTrackWidth(root));\n }\n\n if (progressIndicator) {\n lastIndicatorWidth.current = progressIndicator.getBoundingClientRect().width;\n }\n }, [progressIndicator, root]);\n\n const indicatorLeft =\n progress === 0 || !progressIndicator\n ? 0\n : Math.max(0, availableTrackWidth - lastIndicatorWidth.current) * (progress / 100) +\n 1;\n\n return {\n availableTrackWidth,\n handleDrag,\n handleDragStart,\n handleDragStop,\n indicatorLeft,\n root,\n setProgressIndicator,\n setRoot,\n };\n};\n","import clsx from 'clsx';\nimport React from 'react';\nimport { handleProgressBarKeyboardSeek } from './keyboardSeek';\nimport { getAudioTrackSliderAriaValueText } from './progressBarA11y';\nimport { useInteractiveProgressBar } from './useInteractiveProgressBar';\nimport type { SeekFn as AudioPlayerSeekFn } from '../AudioPlayer';\nimport { useTranslationContext } from '../../../context';\n\ntype SeekParams = Parameters[0];\n\nexport type ProgressBarProps = {\n /** Progress expressed in fractional number value btw 0 and 100. */\n progress: number;\n /** Total track duration in seconds. */\n durationSeconds?: number;\n /** Current elapsed position in seconds. */\n secondsElapsed?: number;\n seek: (params: SeekParams) => void;\n} & Pick, 'className'>;\n\nexport const ProgressBar = ({\n className,\n durationSeconds,\n progress,\n secondsElapsed,\n seek,\n}: ProgressBarProps) => {\n const { t } = useTranslationContext('ProgressBar');\n const {\n handleDrag,\n handleDragStart,\n handleDragStop,\n indicatorLeft,\n setProgressIndicator,\n setRoot,\n } = useInteractiveProgressBar({ progress, seek });\n const normalizedProgress = Math.max(0, Math.min(100, progress));\n const ariaValueText = getAudioTrackSliderAriaValueText({\n durationSeconds,\n progress: normalizedProgress,\n secondsElapsed,\n t,\n });\n\n return (\n \n handleProgressBarKeyboardSeek({ event, progress: normalizedProgress, seek })\n }\n onPointerDown={handleDragStart}\n onPointerMove={handleDrag}\n onPointerUp={handleDragStop}\n ref={setRoot}\n role='slider'\n style={\n {\n '--str-chat__message-attachment-audio-widget-progress':\n normalizedProgress + '%',\n } as React.CSSProperties\n }\n tabIndex={0}\n >\n