communication-react-19

/// <reference types="react" /> import { IStyle } from '@fluentui/react'; import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message, ReadReceiptsBySenderId, ComponentSlotStyle } from '../types'; import { BlockedMessage } from '../types'; import { MessageStatusIndicatorProps } from './MessageStatusIndicator'; import { MessageStatus } from "../../../acs-ui-common/src"; import { AttachmentMetadataInProgress } from "../../../acs-ui-common/src"; import { MessageOptions } from "../../../acs-ui-common/src"; import { AttachmentOptions } from '../types/Attachment'; import { MentionOptions } from './MentionPopover'; import { InlineImageOptions } from './ChatMessage/ChatMessageContent'; import { RichTextEditorOptions, RichTextStrings } from './RichTextEditor/RichTextSendBox'; /** * Fluent styles for {@link MessageThread}. * * @public */ export interface MessageThreadStyles extends BaseCustomStyles { /** Styles for load previous messages container. */ loadPreviousMessagesButtonContainer?: IStyle; /** Styles for new message container. */ newMessageButtonContainer?: IStyle; /** Styles for chat container. */ chatContainer?: ComponentSlotStyle; /** styles for my chat items. */ myChatItemMessageContainer?: ComponentSlotStyle; /** styles for chat items. */ chatItemMessageContainer?: ComponentSlotStyle; /** Styles for my chat message container. */ myChatMessageContainer?: ComponentSlotStyle; /** Styles for my chat message container in case of failure. */ failedMyChatMessageContainer?: ComponentSlotStyle; /** Styles for chat message container. */ chatMessageContainer?: ComponentSlotStyle; /** Styles for system message container. */ systemMessageContainer?: ComponentSlotStyle; /** Styles for blocked message container. */ blockedMessageContainer?: ComponentSlotStyle; /** Styles for message status indicator container. */ messageStatusContainer?: (mine: boolean) => IStyle; } /** * Strings of {@link MessageThread} that can be overridden. * * @public */ export interface MessageThreadStrings { /** String for Sunday */ sunday: string; /** String for Monday */ monday: string; /** String for Tuesday */ tuesday: string; /** String for Wednesday */ wednesday: string; /** String for Thursday */ thursday: string; /** String for Friday */ friday: string; /** String for Saturday */ saturday: string; /** String for Yesterday */ yesterday: string; /** String for participants joined */ participantJoined: string; /** String for participants left */ participantLeft: string; /** Tag shown on a message that has been edited */ editedTag: string; /** String for editing message in floating menu */ editMessage: string; /** String for removing message in floating menu */ removeMessage: string; /** String for resending failed message in floating menu */ resendMessage?: string; /** String for indicating failed to send messages */ failToSendTag?: string; /** String for LiveMessage introduction for the Chat Message */ liveAuthorIntro: string; /** String for LiveMessage introduction for the edited Chat Message by remote user */ editedMessageLiveAuthorIntro: string; /** String for LiveMessage introduction for the edited Chat Message sent by local user */ editedMessageLocalUserLiveAuthorIntro: string; /** String for aria text of remote user's message content */ messageContentAriaText: string; /** String for aria text of local user's message content */ messageContentMineAriaText: string; /** String for warning on text limit exceeded in EditBox */ editBoxTextLimit: string; /** String for warning on empty content in EditBox */ editBoxEmptyWarningText: string; /** String for placeholder text in EditBox when there is no user input*/ editBoxPlaceholderText: string; /** String for new messages indicator*/ newMessagesIndicator: string; /** String for showing message read status in floating menu */ messageReadCount?: string; /** String for replacing display name when there is none*/ noDisplayNameSub: string; /** String for Cancel button in EditBox*/ editBoxCancelButton: string; /** String for Submit in EditBox when there is no user input*/ editBoxSubmitButton: string; /** String for action menu indicating there are more options */ actionMenuMoreOptions?: string; /** Aria label to announce when a message is deleted */ messageDeletedAnnouncementAriaLabel: string; /** String for download attachment button in attachment card */ downloadAttachment: string; /** String for open attachment button in attachment card */ openAttachment: string; /** String for policy violation message removal */ blockedWarningText: string; /** String for policy violation message removal details link */ blockedWarningLinkText: string; /** String for aria text in attachment card group*/ attachmentCardGroupMessage: string; /** * Error message indicating that one or more image uploads are not complete. */ imageUploadsPendingError: string; } /** * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}. * * @public */ export interface JumpToNewMessageButtonProps { /** String for button text */ text: string; /** Callback for when button is clicked */ onClick: () => void; } /** * A component to render a single message. * * @public */ export type MessageRenderer = (props: MessageProps) => JSX.Element; /** * @public * Callback function run when a message is updated. */ export type UpdateMessageCallback = (messageId: string, content: string, options?: MessageOptions) => Promise<void>; /** * @public * Callback function run when a message edit is cancelled. */ export type CancelEditCallback = (messageId: string) => void; /** * Props for {@link MessageThread}. * * @public */ export type MessageThreadProps = { /** * UserId of the current user. */ userId: string; /** * Messages to render in message thread. A message can be of type `ChatMessage`, `SystemMessage`, `BlockedMessage` or `CustomMessage`. */ messages: (ChatMessage | SystemMessage | CustomMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage)[]; /** * number of participants in the thread */ participantCount?: number; /** * read receipts for each sender in the chat */ readReceiptsBySenderId?: ReadReceiptsBySenderId; /** * Allows users to pass an object containing custom CSS styles. * @Example * ``` * <MessageThread styles={{ root: { background: 'blue' } }} /> * ``` */ styles?: MessageThreadStyles; /** * Whether the new message button is disabled or not. * * @defaultValue `false` */ disableJumpToNewMessageButton?: boolean; /** * Whether the date of each message is displayed or not. * It is ignored when onDisplayDateTimeString is supplied. * * @defaultValue `false` */ showMessageDate?: boolean; /** * Whether the status indicator for each message is displayed or not. * * @defaultValue `false` */ showMessageStatus?: boolean; /** * Number of chat messages to reload each time onLoadPreviousChatMessages is called. * * @defaultValue 0 */ numberOfChatMessagesToReload?: number; /** * Optional callback to override actions on message being seen. * * @param messageId - message Id */ onMessageSeen?: (messageId: string) => Promise<void>; /** * Optional callback to override render of the message status indicator. * * @param messageStatusIndicatorProps - props of type MessageStatusIndicatorProps */ onRenderMessageStatus?: (messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null; /** * Optional callback to override render of the avatar. * * @param userId - user Id */ onRenderAvatar?: OnRenderAvatarCallback; /** * Optional callback to override render of the button for jumping to the new message. * * @param newMessageButtonProps - button props of type JumpToNewMessageButtonProps 0 */ onRenderJumpToNewMessageButton?: (newMessageButtonProps: JumpToNewMessageButtonProps) => JSX.Element; /** * Optional callback to override loading of previous messages. * It accepts the number of history chat messages that we want to load and return a boolean Promise indicating if we have got all the history messages. * If the promise resolves to `true`, we have load all chat messages into the message thread and `loadPreviousMessagesButton` will not be rendered anymore. */ onLoadPreviousChatMessages?: (messagesToLoad: number) => Promise<boolean>; /** * Optional callback to override render of a message. * * @param messageProps - props of type {@link communication-react#MessageProps} * @param defaultOnRender - default render of type {@link communication-react#MessageRenderer} * * @remarks * `messageRenderer` is not provided for `CustomMessage` and thus only available for `ChatMessage` and `SystemMessage`. */ onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element; /** * Optional callback to render attachments in the message component. * @beta */ onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element; /** * Optional callback to edit a message. * * @param messageId - message id from chatClient * @param content - new content of the message * */ onUpdateMessage?: UpdateMessageCallback; /** * Optional callback for when a message edit is cancelled. * * @param messageId - message id from chatClient */ onCancelEditMessage?: CancelEditCallback; /** * Optional callback to delete a message. * * @param messageId - message id from chatClient * */ onDeleteMessage?: (messageId: string) => Promise<void>; /** * Optional callback to send a message. * * @param content - message body to send * @param options - message options to be included in the message * */ onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>; /** /** * Disable editing messages. * * @remarks This removes the action menu on messages. * * @defaultValue `false` */ disableEditing?: boolean; /** * Optional strings to override in component */ strings?: Partial<MessageThreadStrings>; /** * @beta * Optional attachment options, which defines behvaiour for uploading and downloading attachments. * As this moment, the uploadOptions would be ignored and this option is intended for download only. */ attachmentOptions?: AttachmentOptions; /** * Optional function to provide customized date format. * @beta */ onDisplayDateTimeString?: (messageDate: Date) => string; /** * Optional props needed to lookup a mention query and display mentions * @beta */ mentionOptions?: MentionOptions; /** * Optional callback called when an inline image is clicked. * @beta */ inlineImageOptions?: InlineImageOptions; /** * Options to enable rich text editor for the edit box. * @beta */ richTextEditorOptions?: RichTextEditBoxOptions; }; /** * Options for the rich text editor edit box configuration. * * @beta */ export interface RichTextEditBoxOptions extends RichTextEditorOptions { /** * Optional callback to handle an inline image that's inserted in the rich text editor. * When not provided, pasting images into rich text editor will be disabled. * @param imageAttributes - attributes of the image such as id, src, style, etc. * It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'] * @param messageId - the id of the message that the inlineImage belongs to. */ onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void; /** * Optional callback invoked after inline image is removed from the UI. * @param imageAttributes - attributes of the image such as id, src, style, etc. * It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']. * Note that if the src attribute is a local blob url, it has been revoked at this point. * @param messageId - the id of the message that the inlineImage belongs to. */ onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void; /** * Optional Record of type {@link AttachmentMetadataInProgress} * to render the errorBar for inline images inserted in the MessageThread's edit boxes when: * - there is an error provided in the messagesInlineImagesWithProgress * - progress is less than 1 when the send button is clicked * - content html string is longer than the max allowed length. * (Note that the id and the url prop of the messagesInlineImagesWithProgress will be used as the id and src attribute of the content html * when calculating the content length, only for the purpose of displaying the content length overflow error.) */ messagesInlineImagesWithProgress?: Record<string, AttachmentMetadataInProgress[]>; } /** * Props to render a single message. * * See {@link MessageRenderer}. * * @public */ export type MessageProps = { /** * Message to render. It can type `ChatMessage` or `SystemMessage`, `BlockedMessage` or `CustomMessage`. */ message: Message; /** * Strings from parent MessageThread component */ strings: MessageThreadStrings & /* @conditional-compile-remove(rich-text-editor) */ Partial<RichTextStrings>; /** * Custom CSS styles for chat message container. */ messageContainerStyle?: ComponentSlotStyle; /** * Whether the date of a message is displayed or not. * * @defaultValue `false` */ showDate?: boolean; /** * Disable editing messages. * * @remarks This removes the action menu on messages. * * @defaultValue `false` */ disableEditing?: boolean; /** * Optional callback to edit a message. * * @param messageId - message id from chatClient * @param content - new content of the message */ onUpdateMessage?: UpdateMessageCallback; /** * Optional callback for when a message edit is cancelled. * * @param messageId - message id from chatClient */ onCancelEditMessage?: CancelEditCallback; /** * Optional callback to delete a message. * * @param messageId - message id from chatClient * */ onDeleteMessage?: (messageId: string) => Promise<void>; /** * Optional callback to send a message. * * @param content - message content from chatClient * @param options - message options to be included in the message * */ onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>; }; /** * @internal */ export type _ChatMessageProps = MessageProps & { key: string; statusToRender: MessageStatus | undefined; showMessageStatus?: boolean; }; /** * `MessageThread` allows you to easily create a component for rendering chat messages, handling scrolling behavior of new/old messages and customizing icons & controls inside the chat thread. * @param props - of type MessageThreadProps * * Users will need to provide at least chat messages and userId to render the `MessageThread` component. * Users can also customize `MessageThread` by passing in their own Avatar, `MessageStatusIndicator` icon, `JumpToNewMessageButton`, `LoadPreviousMessagesButton` and the behavior of these controls. * * `MessageThread` internally uses the `Chat` component from `@fluentui-contrib/chat`. You can checkout the details about these components [here](https://microsoft.github.io/fluentui-contrib/react-chat/). * * @public */ export declare const MessageThread: (props: MessageThreadProps) => JSX.Element; /** * @private */ export declare const MessageThreadWrapper: (props: MessageThreadProps) => JSX.Element; //# sourceMappingURL=MessageThread.d.ts.map