<template>
|
<div class="flex flex-col h-full">
|
<div class="h-full flex flex-col items-center overflow-y-auto">
|
<div ref="chatListDom" class="h-full w-[100ch]">
|
<div
|
class="group flex px-4 py-4 hover:bg-slate-100 rounded-lg"
|
v-for="(item, index) of messageList.filter((v) => v.role !== 'system')"
|
:key="index"
|
>
|
<img class="rounded-full size-12 mr-4" :src="roleImageMap[item.role]" alt="" srcset="" />
|
|
<div class="flex">
|
<div class="relative" v-if="item.content?.values">
|
<div
|
class="text-sm rounded-[6px] p-4 leading-relaxed max-w-[100ch] bg-white"
|
>
|
<component class="max-w-[100ch]" :is="answerTypeMapCom[item.content.type]" :data="item.content.values" />
|
</div>
|
|
<!-- <div v-if="item.role === RoleEnum.assistant" class="absolute flex items-center right-0 space-x-2 mr-2 mt-2">
|
<SvgIcon class="cursor-pointer" name="ele-CopyDocument" @click="copyClick(item.content)" />
|
<SvgIcon class="cursor-pointer" name="ywicon icon-dianzan" />
|
<SvgIcon class="cursor-pointer" :size="12" name="ywicon icon-buzan" />
|
</div> -->
|
</div>
|
|
<Loding v-else />
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100 flex justify-center">
|
<PlayBar :isTalking="isTalking" v-model="messageContent.values" @sendClick="sendChatMessage" />
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { nextTick, onMounted, ref, watch } from 'vue';
|
import useClipboard from 'vue-clipboard3';
|
import Loding from './components/Loding.vue';
|
import { RecordSet } from './model/Record';
|
import type { ChatContent } from './model/types';
|
import { AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage } from './model/types';
|
import { QuestionAi } from '/@/api/ai/chat';
|
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
|
import router from '/@/router';
|
import { activeChatRoom } from '/@/stores/chatRoom';
|
import { ElMessage } from 'element-plus';
|
|
let isTalking = ref(false);
|
let messageContent = ref<ChatContent>({
|
type: AnswerType.Text,
|
values: '',
|
});
|
const chatListDom = ref<HTMLDivElement>();
|
const messageList = ref<ChatMessage[]>([]);
|
|
onMounted(() => {
|
if (!activeChatRoom.value) {
|
router.replace({
|
name: 'Home',
|
});
|
return;
|
}
|
messageContent.value = {
|
type: AnswerType.Text,
|
values: activeChatRoom.value.title,
|
};
|
sendChatMessage();
|
});
|
|
const questionAi = async (text) => {
|
// const res = await QuestionAi({
|
// question: text,
|
// });
|
const res = {
|
json_ok: true,
|
question: '昨日五一广场压力',
|
answer_type: 'recordset',
|
values: {
|
names: ['yesterday', 'max_pressure'],
|
values: [
|
['2024-06-28 00:00:00', 24.378],
|
['2024-06-29 00:00:00', 24.276],
|
],
|
type: 'records',
|
title: '昨日五一广场(D_GW_04)的最大压力值',
|
},
|
};
|
let content: ChatContent = {
|
type: AnswerType.Text,
|
values: '发生错误！',
|
};
|
switch (res.answer_type) {
|
case AnswerType.RecordSet:
|
content = {
|
type: AnswerType.RecordSet,
|
values: res.values,
|
};
|
break;
|
case AnswerType.Text:
|
content = {
|
type: AnswerType.Text,
|
values: res.values,
|
};
|
break;
|
default:
|
break;
|
}
|
return content;
|
};
|
|
const sendChatMessage = async (content: ChatContent = messageContent.value) => {
|
if (!messageContent.value?.values) return;
|
if (activeChatRoom.value.isInitial) {
|
activeChatRoom.value.title = messageContent.value.values;
|
activeChatRoom.value.isInitial = false;
|
}
|
try {
|
isTalking.value = true;
|
// 发送当前
|
messageList.value.push({ role: RoleEnum.user, content });
|
// 清空输入框
|
clearMessageContent();
|
// 出现回复，置空出现等待动画
|
messageList.value.push({ role: RoleEnum.assistant, content: null });
|
|
let resMsgContent: ChatContent = null;
|
resMsgContent = await questionAi(content.values);
|
appendLastMessageContent(resMsgContent);
|
} catch (error: any) {
|
appendLastMessageContent({
|
type: AnswerType.Text,
|
values: '发生错误！',
|
});
|
} finally {
|
isTalking.value = false;
|
}
|
};
|
|
const appendLastMessageContent = (content: ChatContent) => {
|
messageList.value.at(-1).content = content;
|
};
|
|
const clearMessageContent = () =>
|
(messageContent.value = {
|
type: AnswerType.Text,
|
values: '',
|
});
|
|
const scrollToBottom = () => {
|
if (!chatListDom.value) return;
|
chatListDom.value.lastElementChild.scrollIntoView();
|
// scrollTo(0, chatListDom.value.scrollHeight);
|
};
|
|
watch(messageList.value, () => nextTick(() => scrollToBottom()));
|
|
//#region ====================== 聊天内容操作 ======================
|
|
const { toClipboard } = useClipboard();
|
|
const copyClick = (content) => {
|
ElMessage.success('复制成功');
|
toClipboard(content);
|
};
|
//#endregion
|
</script>
|
|
<style scoped>
|
pre {
|
font-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC',
|
'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', 'Microsoft YaHei', 'Wenquanyi Micro Hei',
|
'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
|
}
|
</style>
|
