Hiyve Components - v1.0.0
    Preparing search index...

    Interface ChatPanelRenderProps

    Render props for advanced ChatPanel customization.

    Use these to completely customize how messages, the header, or empty state are rendered while still leveraging the component's logic and state management.

    <ChatPanel
      renderProps={{
        renderMessage: (message, isLocal, defaultContent) => (
          <Box onClick={() => handleMessageClick(message.id)}>
            {defaultContent}
            {message.reactions && <ReactionBadge reactions={message.reactions} />}
          </Box>
        ),
        renderEmptyState: () => (
          <Box sx={{ p: 4, textAlign: 'center' }}>
            <Typography>Start the conversation!</Typography>
            <EmojiPicker onSelect={sendEmoji} />
          </Box>
        ),
        renderHeader: (title, defaultContent) => (
          <Box>
            {defaultContent}
            <SearchMessages onSearch={setFilter} />
          </Box>
        ),
        formatTimestamp: (timestamp) => formatRelativeTime(timestamp),
      }}
    />
    interface ChatPanelRenderProps {
        formatDay?: (timestamp: string | Date) => string;
        formatTimestamp?: (timestamp: string | Date) => string;
        renderEmptyState?: () => ReactNode;
        renderHeader?: (title: string, defaultContent: ReactNode) => ReactNode;
        renderMessage?: (
            message: ChatMessage,
            isLocal: boolean,
            defaultContent: ReactNode,
        ) => ReactNode;
    }
    Index

    Properties

    formatDay? formatTimestamp? renderEmptyState? renderHeader? renderMessage?

    Properties

    formatDay?: (timestamp: string | Date) => string

    Custom formatter for the day-separator label shown between messages from different calendar days. Receives the first message of the day's timestamp. When omitted, the default renders the today / yesterday labels and a localized date for older days.

    Type Declaration

      • (timestamp: string | Date): string

      • Parameters

        • timestamp: string | Date

          The message timestamp (Date object or ISO string)

        Returns string

        Formatted day label

    formatTimestamp?: (timestamp: string | Date) => string

    Custom timestamp formatter.

    Type Declaration

      • (timestamp: string | Date): string

      • Parameters

        • timestamp: string | Date

          The message timestamp

        Returns string

        Formatted timestamp string

    renderEmptyState?: () => ReactNode

    Custom render function for the empty state.

    Type Declaration

      • (): ReactNode

      • Returns ReactNode

        Custom React content when no messages exist

    renderHeader?: (title: string, defaultContent: ReactNode) => ReactNode

    Custom render function for the header.

    Type Declaration

      • (title: string, defaultContent: ReactNode): ReactNode

      • Parameters

        • title: string

          The header title

        • defaultContent: ReactNode

          The default rendered header (can be used or replaced)

        Returns ReactNode

        Custom React content for the header

    renderMessage?: (
        message: ChatMessage,
        isLocal: boolean,
        defaultContent: ReactNode,
    ) => ReactNode

    Custom render function for a message.

    Type Declaration

      • (message: ChatMessage, isLocal: boolean, defaultContent: ReactNode): ReactNode

      • Parameters

        • message: ChatMessage

          The message data

        • isLocal: boolean

          Whether this is the local user's message

        • defaultContent: ReactNode

          The default rendered content (can be used or replaced)

        Returns ReactNode

        Custom React content for the message

    Settings

    Member Visibility

    On This Page

    Properties