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

ServiceTitan Assist 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;
    word-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 {
        p {
            margin: @spacing-0 @spacing-0 1em;
        }

        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: 2em;
            margin: @spacing-0 @spacing-0 1em;
        }

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

        th,
        td {
            border: 1px solid #d0d7de;
            padding: 6px 13px;
        }

        th {
            background-color: #f6f8fa;
        }
    }
}