Type Alias MessagingUiTheme

MessagingUiTheme: {
    actionButtons?: {
        attachmentsButton?: IconButtonConfig;
        emojiButton?: IconButtonConfig;
        locationButton?: IconButtonConfig;
        sendButton?: IconButtonConfig;
    };
    attachmentMenu?: {
        backgroundColor?: CSSProperties["backgroundColor"];
        fileIconSource?: string;
        fontConfig?: FontConfig;
        imageIconSource?: string;
        itemHoverBackgroundColor?: CSSProperties["backgroundColor"];
    };
    brandDetails?: {
        fontFamily?: CSSProperties["fontFamily"];
        logoSource?: string;
    };
    brandPane?: {
        banner?: {
            fontConfig?: FontConfig;
        };
        brandNameFont?: FontConfig;
    };
    connectionStatusBar?: {
        backgroundColors?: Partial<Record<ConnectionState, CSSProperties["backgroundColor"]>>;
        borderColors?: Partial<Record<ConnectionState, CSSProperties["borderColor"]>>;
        fontColors?: Partial<Record<ConnectionState, CSSProperties["color"]>>;
        iconSources?: {
            connected?: string;
            retryConnection?: string;
        };
        show?: boolean;
    };
    endConversationDialog?: {
        backgroundColor?: CSSProperties["backgroundColor"];
        border?: CSSProperties["border"];
        cancelButton?: ButtonConfig;
        cornerRadius?: CSSProperties["borderRadius"];
        description?: FontConfig;
        endConversationButton?: ButtonConfig;
        title?: FontConfig;
    };
    errorBoundary?: {
        backgroundColor?: CSSProperties["backgroundColor"];
        iconSource?: string;
        subtitleFont?: FontConfig;
        titleFont?: FontConfig;
    };
    messageBubble?: {
        backgroundColor?: CSSProperties["backgroundColor"];
        border?: CSSProperties["border"];
        borderRadius?: CSSProperties["borderRadius"];
        iconSource?: string;
    };
    messages?: {
        agent?: ParticipantMessage & {
            carousel?: {
                contentFont?: FontConfig;
                currentSlideIndicatorColor?: CSSProperties["backgroundColor"];
                headingFont?: FontConfig;
                linkButtons?: ButtonConfig;
                nextIconSource?: string;
                postBackButtons?: ButtonConfig;
                previousIconSource?: string;
                slideIndicatorColor?: CSSProperties["backgroundColor"];
            };
            composite?: {
                linkButtons?: ButtonConfig;
                locationRequest?: {
                    button?: ButtonConfig;
                    iconSource?: string;
                };
                postBackButtons?: ButtonConfig;
                quickReplyButtons?: ButtonConfig;
            };
        };
        common?: {
            attachment?: {
                attachmentIconSources?: Partial<Record<SupportedIconTypes, string>>;
                attachmentSizeFont?: FontConfig;
                discardAttachmentIconSource?: string;
                downloadIconSource?: string;
                failedIconSource?: string;
                fallbackAttachmentIconSource?: string;
                fontConfig?: FontConfig;
                uploadingSpinnerSource?: string;
            };
        };
        customer?: ParticipantMessage & {
            retrySendIconSource?: string;
            statusIndicators?: {
                deliveredSource?: string;
                failedSource?: string;
                pendingSource?: string;
                sentSource?: string;
            };
        };
        fontConfig?: FontConfig;
    };
    messagingWindow?: {
        accentColor?: CSSProperties["background"];
        backgroundColor?: CSSProperties["background"];
        borderRadius?: CSSProperties["borderRadius"];
        endConversationButton?: {
            iconSource: string;
            show?: boolean;
        };
        minimizeButton?: {
            iconSource: string;
            show?: boolean;
        };
        notificationsButton?: {
            iconSources?: {
                hasNotifications?: string;
                noNotifications?: string;
                viewingNotifications?: string;
            };
            show?: boolean;
        };
        scrollBarColor?: CSSProperties["backgroundColor"];
        title?: {
            fontConfig?: FontConfig;
        };
    };
    notifications?: {
        fontConfig?: FontConfig;
        showParticipantJoined?: Partial<Record<ParticipantType, boolean>>;
        showParticipantLeft?: Partial<Record<ParticipantType, boolean>>;
    };
    notificationsPane?: {
        backgroundColors?: Partial<Record<NotificationType, CSSProperties["backgroundColor"]>>;
        borderColors?: Partial<Record<NotificationType, CSSProperties["borderColor"]>>;
        discardNotificationIconSource?: string;
        fontConfig?: FontConfig;
        iconSources?: Partial<Record<NotificationType, string>>;
        noNotificationsIconSource?: string;
        paneBackground?: CSSProperties["background"];
        paneBorder?: CSSProperties["border"];
    };
    participants?: {
        avatarSource?: Partial<Record<ParticipantType, ParticipantAvatar>>;
        participantList?: {
            backgroundColor?: CSSProperties["backgroundColor"];
            borderRadius?: CSSProperties["borderRadius"];
            iconBackground?: CSSProperties["backgroundColor"];
            iconHoverBackground?: CSSProperties["backgroundColor"];
            iconSource?: string;
            participantNameFont?: FontConfig;
            show?: boolean;
        };
    };
    postConversationActions?: {
        downloadTranscriptButton?: ButtonConfig;
        printConversationButton?: ButtonConfig;
        startNewConversationButton?: ButtonConfig;
    };
    textInput?: {
        activeBackgroundColor: CSSProperties["backgroundColor"];
        activeBorder?: CSSProperties["border"];
        backgroundColor?: CSSProperties["backgroundColor"];
        border?: CSSProperties["border"];
        borderRadius?: CSSProperties["borderRadius"];
        fontConfig?: FontConfig;
    };
    typingIndicator?: {
        animation?: {
            indicatorColor?: CSSProperties["backgroundColor"];
        };
        participantAvatars?: {
            show?: boolean;
        };
        typingText?: {
            fontConfig?: FontConfig;
            participantNames?: {
                show?: boolean;
            };
        };
    };
}

The theme configuration for the Messaging UI.

Settings