<template>
  <div class="tui-conversation-list">
    <!-- Conversation List operation panel -->
    <ActionsMenu .../>
    <!-- Conversation List Main -->
    <div v-for="(conversation, index) in conversationList" ...>
      <!-- Conversation List Item -->
      <div :class="['TUI-conversation-item']">
        <aside class="left">
          <!-- Avatar -->
          <img class="avatar" :src="conversation.getAvatar()" />
          <!-- User Online Status -->
          <div ... :class="['online-status']"></div>
          <!-- Conversation Unread Count -->
          <span class="num" ...>...</span>
          <!-- Conversation Unread Red Dot（displayed in Do Not Disturb mode） -->
          <span class="num-notify" ...>...</span>
        </aside>
        <div class="content">
          <div class="content-header">
            <!-- Conversation Name -->
            <label class="content-header-label">
              <p class="name">{{ conversation.getShowName() }}</p>
            </label>
            <!-- Conversation Last Message  -->
            <div class="middle-box">
              <!-- Conversation Last Message When Mentiond  -->
              <span class="middle-box-at" ...>{{ conversation.getGroupAtInfo() }}</span>
              <!-- Conversation Last Message Content  -->
              <p class="middle-box-content">{{ conversation.getLastMessage("text") }}</p>
            </div>
          </div>
          <div class="content-footer">
            <!-- Conversation Lastest Message Time -->
            <span class="time">{{ conversation.getLastMessage("time") }}</span>
            <!-- Conversation Muted Flag -->
            <Icon v-if="conversation.isMuted" :file="muteIcon"></Icon>
          </div>
      ...
</template>

.TUI-conversation-content {
  .TUI-conversation-item {
    .left {
      .avatar {
        width: 40px; // avatar width
        height: 40px; // avatar height
        border-radius: 0px; // avatar border radiu
      }
    }
  }
}

<template>
  <div :class="['chat-header', !isPC && 'chat-header-h5']">
    <!-- H5 Back Button-->
    <div
      v-show="!isPC"
      :class="['chat-header-back', !isPC && 'chat-header-h5-back']"
    >
      <Icon :file="backSVG"></Icon>
    </div>
    <!-- Chat name / [Typing...] status prompt-->
    <div :class="['chat-header-content', ...]">
      {{ currentConversationName }}
    </div>
    <!-- Group chat settings extension -->
    <div :class="['chat-header-setting', ...]">
      <div v-for="(item, index) in extensions" :key="index" @click.stop="handleExtensions(item)">
        <Icon :file="item.icon"></Icon>
      </div>
    </div>
  </div>
</template>

.chat-header-h5 {
    background-color: #147AFF;// chat background color
    &-content{
      font-size: 16px;// chat name font size
    }
}

.TUI-chat-h5 {
  ...
  &-message-list {
     background-color: #006eff;
  }
}

.TUI-chat-h5 {
  ...
  &-message-list {
      background-image: url(https://qcloudimg.tencent-cloud.cn/raw/176cddbfb778a4bb26a5d423056efe1d.png);
  }
}

<Avatar
   useSkeletonAnimation
   :url="message.avatar || ''"
/>

<Avatar
   useSkeletonAnimation
   :url="message.avatar || ''"
   size="40px"
   borderRadius="0px"
/>

.message-bubble {
  .message-bubble-main-content {
    .message-body {
      .message-body-main {
        .content-in {
          background: #fbfbfb; // Set the color of the receiving message bubble
          border-radius: 0px 10px 10px 10px;
        }
        .content-out {
          background: #dceafd; // Set the color of the sender message bubble
          border-radius: 10px 0px 10px 10px;
        }
      }
    }
  }
}

.message-bubble {
  .message-bubble-main-content {
    .message-body {
      .message-body-nickName {
        font-weight: 500; // Set the font weight of the sender's nickname
        font-size: 14px; // Set sender nickname font size
        color: #999999; // Set the font color of the sender's nickname
      }
    }
  }
}

.text-img {
    width: 20px;// emoji width
    height: 20px;// emoji height
.text-box {
    white-space: pre-wrap;
    font-size: 14px;// text message font size
    color: #999999;// text message font color
}

.message-tip {
    margin: 0 auto;
    color: #999999;// message tip font color
    font-size: 14px;// message tip font size
    background: red;// message tip background color
}

   <div>
    <div>
      <!-- Emoji Picker -->
      <EmojiPicker v-if="!isUniFrameWork"></EmojiPicker>
      <!-- Taking photos, only available on uniapp -->
      <ImageUpload v-if="isUniFrameWork" imageSourceType="camera"></ImageUpload>
      <!-- Image Upload -->
      <ImageUpload imageSourceType="album"></ImageUpload>
      <!-- File Upload -->
      <FileUpload v-if="!isUniFrameWork"></FileUpload>
      <!-- Video Upload -->
      <VideoUpload videoSourceType="album"></VideoUpload>
      <!-- Taking videos, only available on uniapp -->
      <VideoUpload v-if="isUniFrameWork" videoSourceType="camera"></VideoUpload>
      <!-- Evaluate -->
      <Evaluate></Evaluate>
      <!-- Commonly Used Phrases -->
      <!-- <Words></Words> -->
    </div>
  </div>