|
@@ -15,12 +15,17 @@
|
|
|
<div class="main-content">
|
|
|
<div class="chat-container">
|
|
|
<div class="message-list">
|
|
|
- <div v-for="item in chatRecordList" :key="item.id" :class="item.isUser? 'every-message user-message' : 'message bot-message' ">
|
|
|
+ <div v-for="item in chatRecordList" :key="item.id">
|
|
|
<!-- 会话图标 -->
|
|
|
- <div :class="item.isUser == 1? 'user-image' : 'system-image' "></div>
|
|
|
- <span style="display: flex">
|
|
|
- <el-text v-html="item.content"></el-text>
|
|
|
- </span>
|
|
|
+ <!--<div :class="item.isUser == 1? 'user-image' : 'system-image' "></div>-->
|
|
|
+ <div v-if="item.isUser == 1" class="user-message">
|
|
|
+ <img src="@/assets/images/common/ai/user.png" alt="icon"/>
|
|
|
+ <span class="user-message-content">{{item.content}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else class="message bot-message">
|
|
|
+ <img src="@/assets/images/common/ai/system.png" alt="icon"/>
|
|
|
+ <div class="bot-message-content" v-html="item.content"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="message-box">
|
|
@@ -262,21 +267,36 @@
|
|
|
padding: 10px;
|
|
|
border-radius: 4px;
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
width: 40vw;
|
|
|
/* align-items: center; */
|
|
|
}
|
|
|
|
|
|
.user-message {
|
|
|
- max-width: 70%;
|
|
|
- background-color: #e1f5fe;
|
|
|
+ display: flex;
|
|
|
align-self: flex-end;
|
|
|
flex-direction: row-reverse;
|
|
|
+ align-items: center;
|
|
|
+ margin: 4px;
|
|
|
+ }
|
|
|
+ .user-message-content {
|
|
|
+ background-color: #e1f5fe;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.bot-message {
|
|
|
- max-width: 100%;
|
|
|
- background-color: #f1f8e9;
|
|
|
+ max-width: 70%;
|
|
|
+ display: flex;
|
|
|
align-self: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bot-message-content {
|
|
|
+ background-color: #f1f8e9;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.system-image {
|