chatui2/es/components/Message/style.less

The React library for Chatbot UI

@avatar-gap: 4px;

.Message {
  position: relative;

  & + & {
    margin-top: @message-spacer-y;
  }
  &.left {
    .Message-main {
      & > .Avatar {
        margin-right: @avatar-gap;
      }
    }
    .Bubble {
      margin-right: @bubble-left-gutter;
    }
  }
  &.right {
    .Message-main,
    .Message-content {
      flex-direction: row-reverse;
    }
    .Message-main {
      & > .Avatar {
        margin-left: @avatar-gap;
      }
    }
    .Message-author {
      text-align: right;
    }
    .Bubble {
      margin-left: @bubble-right-gutter;
      border-radius: @bubble-right-border-radius;
      background: @bubble-right-bg;
    }
  }
  &.pop {
    display: none;
  }
}

.Message-meta {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  text-align: center;
}

.Message-main,
.Message-content {
  display: flex;
  align-items: flex-start;
}

.Message-inner {
  flex: 1;
  min-width: 0;
}

.Message-author {
  margin-bottom: 6px;
  color: var(--gray-2);
  font-size: var(--font-size-xs);
  line-height: 1.1;
}

// SystemMessage
.SystemMessage {
  padding: 0 15Px;
  color: var(--gray-2);
  text-align: center;

  a {
    margin-left: 5px;
  }
}

.SystemMessage-inner {
  display: inline-block;
  padding: 6Px 9Px;
  border-radius: 6px;
  background: var(--gray-8);
  font-size: 12Px;
  text-align: left;
}

.ChatApp[data-elder-mode="true"] {
  .SystemMessage-inner {
    padding: 7Px 14Px;
    font-size: 14Px;
  }
}