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 {
        formatTimestamp?: (timestamp: string | Date) => string;
        renderEmptyState?: () => ReactNode;
        renderHeader?: (title: string, defaultContent: ReactNode) => ReactNode;
        renderMessage?: (
            message: ChatMessage,
            isLocal: boolean,
            defaultContent: ReactNode,
        ) => ReactNode;
    }
    Index

    Properties

    formatTimestamp? renderEmptyState? renderHeader? renderMessage?

    Properties

    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