|
@@ -48,7 +48,7 @@ const isShowFooterShadow = ref(false)
|
|
|
// 是否显示header的底部阴影
|
|
// 是否显示header的底部阴影
|
|
|
const isShowHeaderShadow = ref(false)
|
|
const isShowHeaderShadow = ref(false)
|
|
|
|
|
|
|
|
-const loadingAnswer = ref(false) // 是否正在加载答案
|
|
|
|
|
|
|
+const loadingAnswer = ref(false) // 是否正在请求答案
|
|
|
interface MessageItem {
|
|
interface MessageItem {
|
|
|
id?: string // 唯一标识
|
|
id?: string // 唯一标识
|
|
|
type: 'robot' | 'user'
|
|
type: 'robot' | 'user'
|
|
@@ -96,7 +96,7 @@ const progressStatus = {
|
|
|
|
|
|
|
|
const isShowTips = ref(false) // 是否展示提示信息
|
|
const isShowTips = ref(false) // 是否展示提示信息
|
|
|
|
|
|
|
|
-const isShowLoadingDots = ref(false) // 是否展示加载点
|
|
|
|
|
|
|
+const isShowLoadingDots = ref(false) // 是否展示加载点(加载答案)
|
|
|
const parseHtmlString = (data) => {
|
|
const parseHtmlString = (data) => {
|
|
|
if (!data) {
|
|
if (!data) {
|
|
|
isShowLoadingDots.value = false // 停止显示加载点
|
|
isShowLoadingDots.value = false // 停止显示加载点
|
|
@@ -300,6 +300,13 @@ const handleFeedback = (index, feedback) => {
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
+// 判断是否展示评价icon
|
|
|
|
|
+const shouldShowFeedback = (msg, index) => {
|
|
|
|
|
+ if (index === messages.value.length - 1 && isShowLoadingDots.value) {
|
|
|
|
|
+ return false
|
|
|
|
|
+ }
|
|
|
|
|
+ return msg.type === 'robot' && msg.isAnswer
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
const emit = defineEmits(['close'])
|
|
const emit = defineEmits(['close'])
|
|
|
// 关闭聊天窗口
|
|
// 关闭聊天窗口
|
|
@@ -417,7 +424,7 @@ defineExpose({
|
|
|
"
|
|
"
|
|
|
></LoadingDots>
|
|
></LoadingDots>
|
|
|
<!-- 评价 -->
|
|
<!-- 评价 -->
|
|
|
- <div class="review" v-if="msg.isShowFeedback && msg.isAnswer && msg.type === 'robot'">
|
|
|
|
|
|
|
+ <div class="review" v-if="shouldShowFeedback(msg, index)">
|
|
|
<el-button
|
|
<el-button
|
|
|
v-if="msg.feedback !== 'Cood'"
|
|
v-if="msg.feedback !== 'Cood'"
|
|
|
class="el-button--text"
|
|
class="el-button--text"
|
|
@@ -427,7 +434,7 @@ defineExpose({
|
|
|
</el-button>
|
|
</el-button>
|
|
|
<div v-if="msg.feedback === 'Cood'" style="width: 16px; text-align: center">
|
|
<div v-if="msg.feedback === 'Cood'" style="width: 16px; text-align: center">
|
|
|
<span
|
|
<span
|
|
|
- style="color: var(--color-theme); font-size: 14px"
|
|
|
|
|
|
|
+ style="color: var(--color-theme)"
|
|
|
class="font_family icon-icon_good__filled_b"
|
|
class="font_family icon-icon_good__filled_b"
|
|
|
></span>
|
|
></span>
|
|
|
</div>
|
|
</div>
|
|
@@ -440,7 +447,7 @@ defineExpose({
|
|
|
</el-button>
|
|
</el-button>
|
|
|
<div v-if="msg.feedback === 'Not Good'" style="width: 16px; text-align: center">
|
|
<div v-if="msg.feedback === 'Not Good'" style="width: 16px; text-align: center">
|
|
|
<span
|
|
<span
|
|
|
- style="color: var(--color-theme); font-size: 14px"
|
|
|
|
|
|
|
+ style="color: var(--color-theme)"
|
|
|
class="font_family icon-icon_notgood__filled_b"
|
|
class="font_family icon-icon_notgood__filled_b"
|
|
|
></span>
|
|
></span>
|
|
|
</div>
|
|
</div>
|
|
@@ -606,22 +613,15 @@ defineExpose({
|
|
|
.message-item {
|
|
.message-item {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
- padding: 11px 16px;
|
|
|
|
|
|
|
+ padding: 12px 16px;
|
|
|
margin-bottom: 7px;
|
|
margin-bottom: 7px;
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
background-color: var(--scoring-bg-color);
|
|
background-color: var(--scoring-bg-color);
|
|
|
.review {
|
|
.review {
|
|
|
- position: absolute;
|
|
|
|
|
- bottom: -24px;
|
|
|
|
|
- left: 0;
|
|
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- gap: 13px;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 30px;
|
|
|
|
|
- margin-top: 10px;
|
|
|
|
|
- padding-left: 30px;
|
|
|
|
|
- padding-top: 5px;
|
|
|
|
|
|
|
+ gap: 16px;
|
|
|
|
|
+ margin-top: 12px;
|
|
|
|
|
|
|
|
button.el-button + .el-button {
|
|
button.el-button + .el-button {
|
|
|
margin-left: 0px;
|
|
margin-left: 0px;
|
|
@@ -650,7 +650,6 @@ defineExpose({
|
|
|
width: 16px;
|
|
width: 16px;
|
|
|
span {
|
|
span {
|
|
|
color: var(--color-neutral-2);
|
|
color: var(--color-neutral-2);
|
|
|
- font-size: 14px;
|
|
|
|
|
}
|
|
}
|
|
|
&:hover {
|
|
&:hover {
|
|
|
span {
|
|
span {
|