95 lines
2.8 KiB
Vue
95 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<div class="item-content mb-16 lighter">
|
||
|
|
<div v-for="(answer_text, index) in chatRecord.answer_text_list">
|
||
|
|
<div class="avatar">
|
||
|
|
<img v-if="application.avatar" :src="application.avatar" height="30px" />
|
||
|
|
<LogoIcon v-else height="30px" />
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<el-card shadow="always" class="dialog-card">
|
||
|
|
<MdRenderer
|
||
|
|
v-if="answer_text"
|
||
|
|
:source="answer_text"
|
||
|
|
:send-message="chatMessage"
|
||
|
|
></MdRenderer>
|
||
|
|
<span v-else-if="chatRecord.is_stop" shadow="always" class="dialog-card">
|
||
|
|
已停止回答
|
||
|
|
</span>
|
||
|
|
<span v-else shadow="always" class="dialog-card">
|
||
|
|
回答中 <span class="dotting"></span>
|
||
|
|
</span>
|
||
|
|
<!-- 知识来源 -->
|
||
|
|
<div v-if="showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1">
|
||
|
|
<KnowledgeSource :data="chatRecord" :type="application.type" />
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<OperationButton
|
||
|
|
:type="type"
|
||
|
|
:application="application"
|
||
|
|
:chat-record="chatRecord"
|
||
|
|
:loading="loading"
|
||
|
|
:start-chat="startChat"
|
||
|
|
:stop-chat="stopChat"
|
||
|
|
:regenerationChart="regenerationChart"
|
||
|
|
></OperationButton>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import KnowledgeSource from '@/components/ai-chat/KnowledgeSource.vue'
|
||
|
|
import MdRenderer from '@/components/markdown/MdRenderer.vue'
|
||
|
|
import OperationButton from '@/components/ai-chat/component/operation-button/index.vue'
|
||
|
|
import { type chatType } from '@/api/type/application'
|
||
|
|
const props = defineProps<{
|
||
|
|
chatRecord: chatType
|
||
|
|
application: any
|
||
|
|
loading: boolean
|
||
|
|
sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
|
||
|
|
chatManagement: any
|
||
|
|
type: 'log' | 'ai-chat' | 'debug-ai-chat'
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const chatMessage = (question: string, type: 'old' | 'new', other_params_data?: any) => {
|
||
|
|
if (type === 'old') {
|
||
|
|
props.chatRecord.answer_text_list.push('')
|
||
|
|
props.sendMessage(question, other_params_data, props.chatRecord)
|
||
|
|
props.chatManagement.write(props.chatRecord.id)
|
||
|
|
} else {
|
||
|
|
props.sendMessage(question, other_params_data)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function showSource(row: any) {
|
||
|
|
if (props.type === 'log') {
|
||
|
|
return true
|
||
|
|
} else if (row.write_ed && 500 !== row.status) {
|
||
|
|
if (props.type === 'debug-ai-chat' || props.application?.show_source) {
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
const regenerationChart = (question: string) => {
|
||
|
|
props.sendMessage(question, { rechat: true })
|
||
|
|
}
|
||
|
|
const stopChat = (chat: chatType) => {
|
||
|
|
props.chatManagement.stop(chat.id)
|
||
|
|
}
|
||
|
|
const startChat = (chat: chatType) => {
|
||
|
|
props.chatManagement.write(chat.id)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.avatar {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
padding-left: var(--padding-left);
|
||
|
|
|
||
|
|
:deep(ol) {
|
||
|
|
margin-left: 16px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|