<template>
|
<div class="message-list">
|
<div v-for="(item, msgIndex) of msgList" :key="`${item.historyId}_${item.role}`">
|
<UserMsg
|
:msg="item"
|
@shareClick="shareClick"
|
@setCommonQuestion="setCommonQuestionClick"
|
v-if="item.role === RoleEnum.user"
|
></UserMsg>
|
|
<AssistantMsg
|
v-else
|
:msg="item"
|
:msgList="msgList"
|
:isLast="msgIndex === msgList.length - 1"
|
@sendChatMessage="sendChatMessage"
|
@shareMsg="shareClick"
|
@stopGenClick="stopGenClick"
|
:isTalking="isTalking"
|
/>
|
</div>
|
<div v-if="showAskMore" class="ml-4 mt-5 pb-10">
|
<div class="text-gray-600 mb-5">你可以继续问我：</div>
|
<div class="space-y-2 inline-flex flex-col">
|
<div
|
v-for="item in msgList.at(-1).content.askMoreList"
|
:key="item.history_id"
|
class="bg-white p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg"
|
@click="askMoreClick(item)"
|
>
|
{{ item.question }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="MessageList">
|
import { computed, defineProps, type PropType } from 'vue';
|
import AssistantMsg from '../assistant/index.vue';
|
import type { ChatContent, ChatMessage, ContextHistory } from '../model/types';
|
import { RoleEnum } from '../model/types';
|
import UserMsg from '../user/index.vue';
|
import { isSharePage } from '/@/stores/chatRoom';
|
|
const props = defineProps({
|
msgList: {
|
type: Array as PropType<ChatMessage[]>,
|
},
|
isTalking: {
|
type: Boolean,
|
default: false,
|
},
|
});
|
|
const emit = defineEmits({
|
shareClick: (msg: ChatMessage) => true,
|
setCommonQuestionClick: (msg: ChatMessage) => true,
|
sendChatMessage: (msg: ChatContent) => true,
|
askMoreClick: (msg: ContextHistory) => true,
|
stopGenClick: () => true,
|
});
|
const showAskMore = computed(() => {
|
if (!props.msgList || props.msgList.length === 0) return false;
|
const last = props.msgList.at(-1);
|
const isShow = last?.role === RoleEnum.assistant && last?.content?.values && last.content?.askMoreList?.length > 0;
|
const result = isShow && !isSharePage.value;
|
return result;
|
});
|
const shareClick = (msg: ChatMessage) => {
|
emit('shareClick', msg);
|
};
|
|
const setCommonQuestionClick = (msg: ChatMessage) => {
|
emit('setCommonQuestionClick', msg);
|
};
|
|
const sendChatMessage = (msg: ChatContent) => {
|
emit('sendChatMessage', msg);
|
};
|
|
const askMoreClick = (msg: ContextHistory) => {
|
emit('askMoreClick', msg);
|
};
|
|
const stopGenClick = () => {
|
emit('stopGenClick');
|
};
|
</script>
|
<style scoped lang="scss"></style>
|
