stream-chat-react/dist/components/Channel/Channel.d.ts

React components to create chat conversations or livestream style chat

import type { PropsWithChildren } from 'react';
import React from 'react';
import type { ChannelQueryOptions, DeleteMessageOptions, EventAPIResponse, LocalMessage, Message, MessageResponse, SendMessageOptions, Channel as StreamChannel, StreamChat, UpdateMessageOptions } from 'stream-chat';
import type { OnMentionAction } from './hooks/useMentionsHandlers';
import type { LoadingErrorIndicatorProps } from '../Loading';
import type { ComponentContextValue } from '../../context';
import type { ChannelUnreadUiState, GiphyVersions, ImageAttachmentSizeHandler, VideoAttachmentSizeHandler } from '../../types/types';
type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EditMessageModal' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'ShareLocationDialog' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageIsThreadReplyInChannelButtonIndicator' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'Modal' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'ReminderNotification' | 'SendButton' | 'SendToChannelCheckbox' | 'StartRecordingAudioButton' | 'TextareaComposer' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
export type ChannelProps = ChannelPropsForwardedToComponentContext & {
    /** Custom handler function that runs when the active channel has unread messages and the app is running on a separate browser tab */
    activeUnreadHandler?: (unread: number, documentTitle: string) => void;
    /** The connected and active channel */
    channel?: StreamChannel;
    /**
     * Optional configuration parameters used for the initial channel query.
     * Applied only if the value of channel.initialized is false.
     * If the channel instance has already been initialized (channel has been queried),
     * then the channel query will be skipped and channelQueryOptions will not be applied.
     */
    channelQueryOptions?: ChannelQueryOptions;
    /** Custom action handler to override the default `client.deleteMessage(message.id)` function */
    doDeleteMessageRequest?: (message: LocalMessage, options?: DeleteMessageOptions) => Promise<MessageResponse>;
    /** Custom action handler to override the default `channel.markRead` request function (advanced usage only) */
    doMarkReadRequest?: (channel: StreamChannel, setChannelUnreadUiState?: (state: ChannelUnreadUiState) => void) => Promise<EventAPIResponse> | void;
    /** Custom action handler to override the default `channel.sendMessage` request function (advanced usage only) */
    doSendMessageRequest?: (channel: StreamChannel, message: Message, options?: SendMessageOptions) => ReturnType<StreamChannel['sendMessage']> | void;
    /** Custom action handler to override the default `client.updateMessage` request function (advanced usage only) */
    doUpdateMessageRequest?: (cid: string, updatedMessage: LocalMessage | MessageResponse, options?: UpdateMessageOptions) => ReturnType<StreamChat['updateMessage']>;
    /** Custom UI component to be shown if no active channel is set, defaults to null and skips rendering the Channel component */
    EmptyPlaceholder?: React.ReactElement;
    /** The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default */
    giphyVersion?: GiphyVersions;
    /** A custom function to provide size configuration for image attachments */
    imageAttachmentSizeHandler?: ImageAttachmentSizeHandler;
    /**
     * Allows to prevent triggering the channel.watch() call when mounting the component.
     * That means that no channel data from the back-end will be received neither channel WS events will be delivered to the client.
     * Preventing to initialize the channel on mount allows us to postpone the channel creation to a later point in time.
     */
    initializeOnMount?: boolean;
    /** Custom UI component to be shown if the channel query fails, defaults to and accepts same props as: [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) */
    LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
    /** Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is marked read on mount. */
    markReadOnMount?: boolean;
    /** Custom action handler function to run on click of an @mention in a message */
    onMentionsClick?: OnMentionAction;
    /** Custom action handler function to run on hover of an @mention in a message */
    onMentionsHover?: OnMentionAction;
    /** You can turn on/off thumbnail generation for video attachments */
    shouldGenerateVideoThumbnail?: boolean;
    /** If true, skips the message data string comparison used to memoize the current channel messages (helpful for channels with 1000s of messages) */
    skipMessageDataMemoization?: boolean;
    /** A custom function to provide size configuration for video attachments */
    videoAttachmentSizeHandler?: VideoAttachmentSizeHandler;
};
/**
 * A wrapper component that provides channel data and renders children.
 * The Channel component provides the following contexts:
 * - [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/)
 * - [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/)
 * - [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/)
 * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
 */
export declare const Channel: (props: PropsWithChildren<ChannelProps>) => React.JSX.Element;
export {};