Variable ChatViewerConst

Type declaration

• • <M extends IdentifiableMessage>(
        props: {
            alignment?: ChatAlignment;
            className?: string;
            historyEndOffset?: number;
            keepMountedIds?: MessageId<M>[];
            keepMountedIndexes?: number[];
            messages: M[];
            onAtBottom?: ChatCallback<M>;
            onAtTop?: ChatCallback<M>;
            onHistoryEndReached?: ChatCallback<M>;
            onKeyDown?: KeyboardEventHandler;
            onNewerMessages?: OnMessagesCallback<M>;
            onOlderMessages?: OnMessagesCallback<M>;
            onPrefixDisplay?: OnAffixCallback<M>;
            onScroll?: (offset: number) => void;
            onScrollEnd?: () => void;
            onSuffixDisplay?: OnAffixCallback<M>;
            onWheel?: WheelEventHandler;
            overscan?: number;
            prefix?: ReactNode;
            ref: Ref<ChatViewerHandle<M>>;
            renderMessage: (
                message: M,
                index: number,
                messages: M[],
            ) => null | ReactElement<unknown, string | JSXElementConstructor<any>>;
            scrollerClassName?: string;
            scrollerStyle?: CSSProperties;
            ssrCount?: number;
            style?: CSSProperties;
            suffix?: ReactNode;
        },
    ): ReactElement

  • Type Parameters

    • M extends IdentifiableMessage

      Type of messages, which must extend IdentifiableMessage. It can be any type that has an id property for unique identifying messages.

    Parameters

    • props: {
          alignment?: ChatAlignment;
          className?: string;
          historyEndOffset?: number;
          keepMountedIds?: MessageId<M>[];
          keepMountedIndexes?: number[];
          messages: M[];
          onAtBottom?: ChatCallback<M>;
          onAtTop?: ChatCallback<M>;
          onHistoryEndReached?: ChatCallback<M>;
          onKeyDown?: KeyboardEventHandler;
          onNewerMessages?: OnMessagesCallback<M>;
          onOlderMessages?: OnMessagesCallback<M>;
          onPrefixDisplay?: OnAffixCallback<M>;
          onScroll?: (offset: number) => void;
          onScrollEnd?: () => void;
          onSuffixDisplay?: OnAffixCallback<M>;
          onWheel?: WheelEventHandler;
          overscan?: number;
          prefix?: ReactNode;
          ref: Ref<ChatViewerHandle<M>>;
          renderMessage: (
              message: M,
              index: number,
              messages: M[],
          ) => null | ReactElement<unknown, string | JSXElementConstructor<any>>;
          scrollerClassName?: string;
          scrollerStyle?: CSSProperties;
          ssrCount?: number;
          style?: CSSProperties;
          suffix?: ReactNode;
      }

      ChatViewerProps properties for the component and ref that will expose ChatViewerHandle's methods.

      • Optionalalignment?: ChatAlignment

        Alignment of the chat list. Determines whether new messages appear at the top or bottom.

        Default Value

        'bottom'
        Copy

      • OptionalclassName?: string

        Class name for the root element of the chat viewer.

      • OptionalhistoryEndOffset?: number

        Offset in pixels from the end of the history at which to trigger onHistoryEndReached.

        Default Value

        10
        Copy

      • OptionalkeepMountedIds?: MessageId<M>[]

        MessageIds of messages to keep mounted even when out of view.

      • OptionalkeepMountedIndexes?: number[]

        Indexes of messages to keep mounted even when out of view. This allows you to preserve the state of messages that are not currently visible.

      • messages: M[]

        The array of messages to display in the chat viewer.

      • OptionalonAtBottom?: ChatCallback<M>

        Callback fired when the viewport reaches the bottom of the message list.

        Param: handle

        ChatViewerHandle instance. Allows you to control the chat viewer.

      • OptionalonAtTop?: ChatCallback<M>

        Callback fired when the viewport reaches the top of the message list.

        Param: handle

        ChatViewerHandle instance. Allows you to control the chat viewer.

      • OptionalonHistoryEndReached?: ChatCallback<M>

        Callback fired when the user scrolls to the end of the history (top or bottom, depending on alignment).

        Param: handle

        ChatViewerHandle instance. Allows you to control the chat viewer.

      • OptionalonKeyDown?: KeyboardEventHandler

        Callback fired on key down events in the scrollable container.

      • OptionalonNewerMessages?: OnMessagesCallback<M>

        Callback fired when newer messages are requested (e.g., user scrolls to the bottom).

        Example

        You might want to use this callback with utility functions like followEveryMessage, followMessagesAtBottom, or followMessagesBy to automatically scroll to automatically follow new messages.

        <ChatViewer
          messages={messages}
          renderMessage={renderMessage}
          onNewerMessages={followMessagesAtBottom()}
        />
        Copy

        Param: handle

        ChatViewerHandle instance. Allows you to control the chat viewer.

        Param: messages

        The current messages.

        Default Value

        followMessagesAtBottom - scrolls to the bottom when viewport is at the bottom of the history.

      • OptionalonOlderMessages?: OnMessagesCallback<M>

        Callback fired when older messages are requested (e.g., user scrolls to the top).

        Param: handle

        ChatViewerHandle instance. Allows you to control the chat viewer.

        Param: messages

        The current messages.

      • OptionalonPrefixDisplay?: OnAffixCallback<M>

        Callback fired when the prefix node is displayed in the viewport.

        Param: handle

        ChatViewerHandle instance. Allows you to control the chat viewer.

        Param: isDisplayed

        Whether the prefix is displayed.

      • OptionalonScroll?: (offset: number) => void

        Callback fired on scroll with the current scroll offset.

      • OptionalonScrollEnd?: () => void

        Callback fired when scrolling ends.

      • OptionalonSuffixDisplay?: OnAffixCallback<M>

        Callback fired when the suffix node is displayed in the viewport.

        Param: handle

        ChatViewerHandle instance. Allows you to control the chat viewer.

        Param: isDisplayed

        Whether the suffix is displayed.

        Default Value

        followSuffixAtBottom - scrolls to the bottom when viewport when suffix is displayed at the bottom of the history.

      • OptionalonWheel?: WheelEventHandler

        Callback fired on wheel events in the scrollable container.

      • Optionaloverscan?: number

        Number of extra items to render beyond the visible area (for virtualization performance). Passed to Virtua's overscan prop.

        See

        https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListProps.md#overscan

      • Optionalprefix?: ReactNode

        React node to render before the message list (e.g., a header or history loader). It can be conditionally displayed. When changed, it will trigger a onPrefixDisplay callback.

        Default Value

        null
        Copy

      • ref: Ref<ChatViewerHandle<M>>

        A React ref created by useRef hook. It will expose ChatViewerHandle instance for imperative control over the chat viewer.

      • renderMessage: (
            message: M,
            index: number,
            messages: M[],
        ) => null | ReactElement<unknown, string | JSXElementConstructor<any>>

        Function to render a message.

      • OptionalscrollerClassName?: string

        Class name for the scrollable container.

      • OptionalscrollerStyle?: CSSProperties

        Style for the scrollable container.

      • OptionalssrCount?: number

        Number of items to render on the server for SSR. Passed to Virtua's ssrCount prop.

        See

        https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListProps.md#ssrcount

      • Optionalstyle?: CSSProperties

        Style for the root element of the chat viewer.

      • Optionalsuffix?: ReactNode

        React node to render after the message list (e.g., a footer or typing indicator). It can be conditionally displayed. When changed, it will trigger a onSuffixDisplay callback.

        Default Value

        null
        Copy

    Returns ReactElement