@servicetitan/assist-ui/src/components/messages/message.module.less

ServiceTitan Atlas UI Components

@import (reference) '~@servicetitan/tokens/dist/tokens.less';

.message-wrapper {
    width: 100%;
    display: flex;
    box-sizing: border-box;
}

.message {
    max-width: 70%;
    padding: @spacing-1 12px;
    border-radius: 8px;
    overflow-wrap: break-word;
    background-color: #f0f0f0;
    color: #000;

    &.user {
        background-color: #dcf8c6;
    }
}

.left {
    justify-content: flex-start;
}

.right {
    justify-content: flex-end;
}

.user-wrapper {
    justify-content: flex-end;
}

.message-list {
    max-height: 400px;
    overflow-y: auto;
}

.markdown-content {
    :global {
        h1 {
            color: #000;
            font-family: var(--typography-heading-font-family, 'Nunito Sans');
            font-size: var(--typography-heading-size-large, 24px);
            font-style: normal;
            font-weight: 800;
            line-height: var(--typography-heading-line-height-large, 30px);
            letter-spacing: var(--typography-heading-letter-spacing-large, -0.12px);
            margin: @spacing-0 @spacing-0 @spacing-1;
        }

        h2 {
            color: #000;
            font-family: var(--typography-heading-font-family, 'Nunito Sans');
            font-size: var(--typography-heading-size-default, 20px);
            font-style: normal;
            font-weight: 800;
            line-height: var(--typography-heading-line-height-default, 25px);
            letter-spacing: var(--typography-heading-letter-spacing-default, -0.05px);
            margin: @spacing-0 @spacing-0 @spacing-1;
        }

        h3 {
            color: #000;
            font-family: var(--typography-heading-font-family, 'Nunito Sans');
            font-size: var(--typography-heading-size-small, 16px);
            font-style: normal;
            font-weight: 800;
            line-height: var(--typography-heading-line-height-small, 20px);
            letter-spacing: var(--typography-heading-letter-spacing-small, 0);
            margin: @spacing-0 @spacing-0 @spacing-1;
        }

        p {
            margin: @spacing-0 @spacing-0 1em;
            color: #000;
            font-family: var(--typography-paragraph-font-family, 'Nunito Sans');
            font-size: var(--typography-paragraph-size-default, 16px);
            font-style: normal;
            font-weight: @font-weight-regular;
            line-height: var(--typography-paragraph-line-height-default, 24px);
        }

        pre {
            background-color: #f6f8fa;
            border-radius: @border-radius-2;
            padding: @spacing-2;
            overflow: auto;
        }

        code {
            background-color: rgba(175, 184, 193, 0.2);
            border-radius: @border-radius-2;
            padding: 0.2em 0.4em;
            font-family:
                ui-monospace,
                SFMono-Regular,
                SF Mono,
                Menlo,
                Consolas,
                Liberation Mono,
                monospace;
        }

        pre code {
            background-color: transparent;
            padding: @spacing-0;
        }

        ul,
        ol {
            padding-left: @spacing-4;
            margin: @spacing-0 @spacing-0 1em;
            color: #000;
            font-family: var(--typography-paragraph-font-family, 'Nunito Sans');
            font-size: var(--typography-paragraph-size-default, 16px);
            font-style: normal;
            font-weight: @font-weight-regular;
            line-height: var(--typography-paragraph-line-height-default, 24px);
        }

        li {
            color: #000;
            font-family: var(--typography-paragraph-font-family, 'Nunito Sans');
            font-size: var(--typography-paragraph-size-default, 16px);
            font-style: normal;
            font-weight: @font-weight-regular;
            line-height: var(--typography-paragraph-line-height-default, 24px);
        }

        strong,
        b {
            color: #000;
            font-family: var(--typography-paragraph-font-family, 'Nunito Sans');
            font-size: var(--typography-paragraph-size-default, 16px);
            font-style: normal;
            font-weight: @font-weight-bold;
            line-height: var(--typography-paragraph-line-height-default, 24px);
        }

        em,
        i {
            color: #000;
            font-family: var(--typography-paragraph-font-family, 'Nunito Sans');
            font-size: var(--typography-paragraph-size-default, 16px);
            font-style: italic;
            font-weight: @font-weight-regular;
            line-height: var(--typography-paragraph-line-height-default, 24px);
        }

        a {
            color: var(--foreground-color-primary, #0265dc);
            font-family: var(--typography-paragraph-font-family, 'Nunito Sans');
            font-size: var(--typography-paragraph-size-default, 16px);
            font-style: normal;
            font-weight: @font-weight-regular;
            line-height: var(--typography-paragraph-line-height-default, 24px);
        }

        table {
            border-collapse: collapse;
            width: 100%;
            margin: 1em @spacing-0;
        }

        th {
            border: 1px solid var(--Light-Border-Border-Grey, #dfe0e1);
            background: var(--Light-Surface-Surface-Grey-Subdued, #f7f7f7);
            padding: 6px 13px;
            color: var(--Light-Text-Text-Default, #141414);
            font-size: @typescale-2;
            font-style: normal;
            font-weight: @font-weight-semibold;
            line-height: 150%;
        }

        td {
            border: 1px solid var(--Light-Border-Border-Grey, #dfe0e1);
            background: var(--Light-Surface-Surface-Default, #fff);
            padding: 6px 13px;
            color: var(--Light-Text-Text-Default, #141414);
            font-size: @typescale-2;
            font-style: normal;
            font-weight: @font-weight-regular;
            line-height: 150%;
        }
    }
}

.message-icon {
    display: flex;
    margin-right: @spacing-1;
}