types.ts

import type { ReactNode } from 'react';
import type { LocalMessage, ReactionSort, UserResponse } from 'stream-chat';

import type { UserEventHandler } from './hooks';
import type { MessageActionsArray } from './utils';
import type { GroupStyle } from '../MessageList/utils';
import type { MessageComposerProps } from '../MessageComposer';
import type { ReactionsComparator } from '../Reactions/types';
import type { ChannelActionContextValue } from '../../context/ChannelActionContext';
import type { ComponentContextValue } from '../../context/ComponentContext';
import type { MessageContextValue } from '../../context/MessageContext';
import type { RenderTextOptions } from './renderText';

export type ReactEventHandler = (event: React.BaseSyntheticEvent) => Promise<void> | void;

export type MessageProps = {
  /** The message object */
  message: LocalMessage;
  /** Additional props for underlying MessageComposer component, [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_composer/#props) */
  additionalMessageComposerProps?: MessageComposerProps;
  /** 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;
  /** If true, picking a reaction from the `ReactionSelector` component will close the selector */
  closeReactionSelectorOnClick?: boolean;
  /** An array of user IDs that have confirmed the message delivery to their device */
  deliveredTo?: UserResponse[];
  /** If true, disables the ability for users to quote messages, defaults to false */
  disableQuotedMessages?: boolean;
  // todo: remove
  /** 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;
  /** A list of styles to apply to this message, i.e. 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;
  // todo: move to LLC Channel state
  /** Latest own message in currently displayed message set. */
  lastOwnMessage?: LocalMessage;
  // todo: could be moved to the Channel instance reactive state as lastReceivedMessage keeping the the receipt status as well (useful for channel preview)
  /** Latest message id on current channel */
  lastReceivedId?: string | null;
  /** UI component to display a Message in MessageList, overrides value in [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/#message) */
  Message?: ComponentContextValue['Message'];
  /** Array of allowed message actions (ex: ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply']). To disable all actions, provide an empty array. */
  messageActions?: MessageActionsArray;
  /** DOMRect object for parent MessageList component */
  messageListRect?: DOMRect;
  /** Custom mention click handler to override default in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
  onMentionsClick?: ChannelActionContextValue['onMentionsClick'];
  /** Custom mention hover handler to override default in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
  onMentionsHover?: ChannelActionContextValue['onMentionsHover'];
  /** Custom function to run on user avatar click */
  onUserClick?: UserEventHandler;
  /** Custom function to run on user avatar hover */
  onUserHover?: UserEventHandler;
  /** Custom open thread handler to override default in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
  openThread?: ChannelActionContextValue['openThread'];
  /** Sort options to provide to a reactions query */
  reactionDetailsSort?: ReactionSort;
  /** A list of users that have read this Message if the message is the last one and was posted by my user */
  readBy?: UserResponse[];
  /**
   * When set, the message uses the grid layout with an avatar column and shows the sender avatar.
   * - `true`: show for incoming and outgoing messages
   * - `'incoming'`: show only for incoming (other users') messages
   * - `'outgoing'`: show only for own (outgoing) messages
   * - `false` or omitted: no avatar column
   */
  showAvatar?: boolean | 'incoming' | 'outgoing';
  /** Custom function to render message text content, defaults to the renderText function: [utils](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.ts) */
  renderText?: (
    text?: string,
    mentioned_users?: UserResponse[],
    options?: RenderTextOptions,
  ) => ReactNode;
  /** Custom retry send message handler to override default in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
  retrySendMessage?: ChannelActionContextValue['retrySendMessage'];
  /** Keep track of read receipts for each message sent by the user. When disabled, only the last own message delivery / read status is rendered. */
  returnAllReadData?: boolean;
  /** Comparator function to sort reactions, defaults to chronological order */
  sortReactions?: ReactionsComparator;
  /** Whether the Message is in a Thread */
  threadList?: boolean;
  /** render HTML instead of markdown. Posting HTML is only allowed server-side */
  unsafeHTML?: boolean;
};

export type MessageUIComponentProps = Partial<MessageContextValue>;