UNPKG

stream-chat-react

Version:

React components to create chat conversations or livestream style chat

132 lines (131 loc) 7.86 kB
import type { PropsWithChildren, ReactNode } from 'react'; import React from 'react'; import type { LocalMessage, Mute, ReactionResponse, ReactionSort, UserResponse } from 'stream-chat'; import type { ChannelActionContextValue } from './ChannelActionContext'; import type { ActionHandlerReturnType } from '../components/Message/hooks/useActionHandler'; import type { PinPermissions } from '../components/Message/hooks/usePinHandler'; import type { ReactEventHandler } from '../components/Message/types'; import type { MessageActionsArray } from '../components/Message/utils'; import type { MessageInputProps } from '../components/MessageInput/MessageInput'; import type { GroupStyle } from '../components/MessageList/utils'; import type { ReactionDetailsComparator, ReactionsComparator, ReactionType } from '../components/Reactions/types'; import type { RenderTextOptions } from '../components/Message/renderText'; import type { UnknownType } from '../types/types'; export type CustomMessageActions = { [key: string]: (message: LocalMessage, event: React.BaseSyntheticEvent) => Promise<void> | void; }; export type MessageContextValue = { /** If actions such as edit, delete, flag, mute are enabled on Message */ actionsEnabled: boolean; /** Function to exit edit state */ clearEditingState: (event?: React.BaseSyntheticEvent) => void; /** If the Message is in edit state */ editing: boolean; /** * Returns all allowed actions on message by current user e.g., ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply']. * Please check [Message](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message.tsx) component for default implementation. */ getMessageActions: () => MessageActionsArray<string>; /** Function to send an action in a Channel */ handleAction: ActionHandlerReturnType; /** Function to delete a message in a Channel */ handleDelete: ReactEventHandler; /** Function to edit a message in a Channel */ handleEdit: ReactEventHandler; /** Function to fetch the message reactions */ handleFetchReactions: (reactionType?: ReactionType, sort?: ReactionSort) => Promise<Array<ReactionResponse>>; /** Function to flag a message in a Channel */ handleFlag: ReactEventHandler; /** Function to mark message and the messages that follow it as unread in a Channel */ handleMarkUnread: ReactEventHandler; /** Function to mute a user in a Channel */ handleMute: ReactEventHandler; /** Function to open a Thread on a Message */ handleOpenThread: ReactEventHandler; /** Function to pin a Message in a Channel */ handlePin: ReactEventHandler; /** Function to post a reaction on a Message */ handleReaction: (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>; /** Function to retry sending a Message */ handleRetry: ChannelActionContextValue['retrySendMessage']; /** Function that returns whether the Message belongs to the current user */ isMyMessage: () => boolean; /** The message object */ message: LocalMessage; /** Indicates whether a message has not been read yet or has been marked unread */ messageIsUnread: boolean; /** Handler function for a click event on an @mention in Message */ onMentionsClickMessage: ReactEventHandler; /** Handler function for a hover event on an @mention in Message */ onMentionsHoverMessage: ReactEventHandler; /** Handler function for a click event on the user that posted the Message */ onUserClick: ReactEventHandler; /** Handler function for a hover event on the user that posted the Message */ onUserHover: ReactEventHandler; /** Function to toggle the edit state on a Message */ setEditingState: ReactEventHandler; /** Additional props for underlying MessageInput component, [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_input/#props) */ additionalMessageInputProps?: MessageInputProps; /** 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`) */ autoscrollToBottom?: () => void; /** Message component configuration prop. If true, picking a reaction from the `ReactionSelector` component will close the selector */ closeReactionSelectorOnClick?: boolean; /** Object containing custom message actions and function handlers */ customMessageActions?: CustomMessageActions; /** If true, the message is the last one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */ endOfGroup?: boolean; /** If true, the message is the first one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */ firstOfGroup?: boolean; /** Override the default formatting of the date. This is a function that has access to the original date object, returns a string */ formatDate?: (date: Date) => string; /** If true, group messages sent by each user (only used in the `VirtualizedMessageList`) */ groupedByUser?: boolean; /** A list of styles to apply to this message, ie. top, bottom, single */ groupStyles?: GroupStyle[]; /** Whether to highlight and focus the message on load */ highlighted?: boolean; /** Whether the threaded message is the first in the thread list */ initialMessage?: boolean; /** * A factory function that determines whether a message is AI generated or not. */ isMessageAIGenerated?: (message: LocalMessage) => boolean; /** Latest message id on current channel */ lastReceivedId?: string | null; /** DOMRect object for parent MessageList component */ messageListRect?: DOMRect; /** Array of muted users coming from [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/#mutes) */ mutes?: Mute[]; /** @deprecated in favor of `channelCapabilities - The user roles allowed to pin Messages in various channel types */ pinPermissions?: PinPermissions; /** Sort options to provide to a reactions query */ reactionDetailsSort?: ReactionSort; /** A list of users that have read this Message */ readBy?: UserResponse[]; /** 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) */ renderText?: (text?: string, mentioned_users?: UserResponse[], options?: RenderTextOptions) => ReactNode; /** Comparator function to sort the list of reacted users * @deprecated use `reactionDetailsSort` instead */ sortReactionDetails?: ReactionDetailsComparator; /** Comparator function to sort reactions, defaults to chronological order */ sortReactions?: ReactionsComparator; /** Whether or not the Message is in a Thread */ threadList?: boolean; /** render HTML instead of markdown. Posting HTML is only allowed server-side */ unsafeHTML?: boolean; }; export declare const MessageContext: React.Context<MessageContextValue | undefined>; export declare const MessageProvider: ({ children, value, }: PropsWithChildren<{ value: MessageContextValue; }>) => React.JSX.Element; export declare const useMessageContext: (_componentName?: string) => MessageContextValue; /** * Typescript currently does not support partial inference, so if MessageContext * typing is desired while using the HOC withMessageContext, the Props for the * wrapped component must be provided as the first generic. */ export declare const withMessageContext: <P extends UnknownType>(Component: React.ComponentType<P>) => { (props: Omit<P, keyof MessageContextValue>): React.JSX.Element; displayName: string; };