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

    Interface ChatPanelProps

    interface ChatPanelProps {
        colors?: Partial<ChatPanelColors>;
        disabled?: boolean;
        icons?: Partial<ChatPanelIcons>;
        labels?: Partial<ChatPanelLabels>;
        localUserId?: string;
        maxHeight?: string | number;
        messages?: ChatMessage[];
        onFocus?: () => void;
        onLinkClick?: (url: string, event: MouseEvent<HTMLAnchorElement>) => void;
        onNewMessage?: (message: ChatMessage) => void;
        onSend?: (content: string) => void;
        placeholder?: string;
        renderProps?: ChatPanelRenderProps;
        resolveDisplayName?: (
            userId: string,
            defaultName: string,
        ) => string | null | undefined;
        showAvatars?: boolean;
        showHeader?: boolean;
        showSystemMessages?: boolean;
        showTimestamps?: boolean;
        styles?: Partial<ChatPanelStyles>;
        sx?: SxProps<Theme>;
        title?: string;
    }
    Index

    Properties

    colors? disabled? icons? labels? localUserId? maxHeight? messages? onFocus? onLinkClick? onNewMessage? onSend? placeholder? renderProps? resolveDisplayName? showAvatars? showHeader? showSystemMessages? showTimestamps? styles? sx? title?

    Properties

    colors?: Partial<ChatPanelColors>

    Custom colors

    disabled?: boolean

    Whether the input is disabled

    icons?: Partial<ChatPanelIcons>

    Custom icons

    labels?: Partial<ChatPanelLabels>

    Custom labels for i18n support

    localUserId?: string

    The local user's id, used to distinguish own messages when in controlled mode. Falls back to the provider's local participant id when omitted.

    maxHeight?: string | number

    Maximum height before scrolling (default: none)

    messages?: ChatMessage[]

    Controlled message list. When provided, the panel renders these messages instead of the live room's chat, turning ChatPanel into a controlled component backed by the consumer's own store (e.g. a persisted history). Omit to use the in-room chat from the provider.

    onFocus?: () => void

    Callback when chat panel gains focus (useful for clearing unread indicators)

    onLinkClick?: (url: string, event: MouseEvent<HTMLAnchorElement>) => void

    Called when a link inside a message body is clicked. Call event.preventDefault() and navigate yourself to keep the link in-app (e.g. same-origin links in an installed PWA, which browsers would otherwise open in an in-app browser sheet). Without a handler (or when the default isn't prevented) links open in a new tab.

    onNewMessage?: (message: ChatMessage) => void

    Callback when new remote message arrives (for notifications/badges)

    onSend?: (content: string) => void

    Controlled send handler. When provided, sending a message calls this instead of the in-room send. Pair with messages to fully control the panel's data source.

    placeholder?: string

    Placeholder text for input (default: 'Type a message...')

    renderProps?: ChatPanelRenderProps

    Render props for advanced customization

    resolveDisplayName?: (
        userId: string,
        defaultName: string,
    ) => string | null | undefined

    Override display name for a message sender. Return a string to override, or null/undefined to keep the default.

    showAvatars?: boolean

    Show avatars for messages (default: true)

    showHeader?: boolean

    Show the header (default: true)

    showSystemMessages?: boolean

    Show system messages like "You joined…"

    true
    showTimestamps?: boolean

    Show timestamps on messages (default: true)

    styles?: Partial<ChatPanelStyles>

    Custom styles

    sx?: SxProps<Theme>

    MUI sx styling prop

    title?: string

    Title for the chat header (default: 'Chat')

    Settings

    Member Visibility

    On This Page

    Properties