<template>
|
<div class="flex h-full">
|
<div class="flex flex-col h-full flex-auto">
|
<div class="h-full flex flex-col items-center overflow-y-auto">
|
<div ref="chatListDom" class="h-full" :style="{ width: chatWidth }">
|
<div
|
class="group flex px-4 py-6 hover:bg-slate-100 rounded-lg relative"
|
:class="{ 'flex-row-reverse': item.role === RoleEnum.user }"
|
v-for="(item, index) of computedMessageList"
|
:key="index"
|
>
|
<img
|
class="rounded-full size-12 flex-0"
|
:class="{ 'mr-4': item.role === RoleEnum.assistant, 'ml-4': item.role === RoleEnum.user }"
|
:src="roleImageMap[item.role]"
|
alt=""
|
srcset=""
|
/>
|
<div class="flex-auto flex" :class="{ 'justify-end': item.role === RoleEnum.user }">
|
<div class="inline-flex flex-col" :class="{ 'w-full': item.role === RoleEnum.assistant }">
|
<div class="w-full" v-if="item.content?.values">
|
<div
|
class="text-sm rounded-[6px] p-4 leading-relaxed"
|
:style="{ backgroundColor: item.role === RoleEnum.user ? 'rgb(197 224 255)' : 'white' }"
|
>
|
<div v-if="item.content.errCode === ErrorCode.Message" class="text-red-500 w-full">{{ item.content.msg }}</div>
|
<component v-else :is="answerTypeMapCom[item.content.type]" :data="item.content.values" :originData="item" />
|
</div>
|
|
<div v-if="item.role === RoleEnum.assistant" class="absolute flex items-center right-0 mr-4 mt-2 space-x-2">
|
<div
|
class="flex items-center justify-center size-[15px]"
|
v-if="item.content?.type === AnswerType.Text || item.content?.type === AnswerType.Knowledge"
|
>
|
<i
|
class="p-2 ywicon icon-copy cursor-pointer hover:text-[#0284ff] hover:!text-[18px]"
|
@click="copyClick(item)"
|
/>
|
</div>
|
<template v-if="item.content.errCode !== ErrorCode.Message">
|
<div class="flex items-center justify-center size-[15px]">
|
<i
|
:class="{ 'text-[#0284ff]': item.state === AnswerState.Like }"
|
class="p-2 ywicon icon-dianzan cursor-pointer hover:text-[#0284ff] font-medium hover:!text-[18px]"
|
@click="likeClick(item)"
|
/>
|
</div>
|
<div class="flex items-center justify-center size-[15px]">
|
<i
|
:class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }"
|
class="p-2 ywicon icon-buzan cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]"
|
@click="unLikeClick(item)"
|
/>
|
</div>
|
</template>
|
|
<div class="flex items-center justify-center size-[15px] relative">
|
<i
|
class="p-2 ywicon icon-wentifankui cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]"
|
@click="
|
($event) =>
|
feedbackClick(
|
$event,
|
item,
|
computedMessageList
|
.filter((v) => v.role === RoleEnum.assistant)
|
.findIndex((v) => v.historyId === item.historyId)
|
)
|
"
|
/>
|
<FeedbackPanel
|
v-show="feedbackIsShow && currentFeedbackMapItem === item"
|
ref="feedbackPanelRef"
|
v-model:isShow="feedbackIsShow"
|
v-model:content="feedbackContent"
|
:chatItem="currentFeedbackMapItem"
|
:position="feedbackPosition"
|
/>
|
</div>
|
</div>
|
</div>
|
|
<Loding v-else class="w-fit" :process="process" />
|
</div>
|
</div>
|
</div>
|
<div v-if="showAskMore" class="ml-4 mt-5 text-sm">
|
<div class="text-gray-600 mb-5">你可以继续问我：</div>
|
<div class="space-y-2 inline-flex flex-col">
|
<div
|
v-for="item in computedMessageList.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>
|
</div>
|
|
<div class="sticky bottom-0 w-full p-6 pb-8 bg-[rgb(247,248,250)] flex justify-center">
|
<PlayBar
|
v-model:voicePageIsShow="voicePageIsShow"
|
:isTalking="isTalking"
|
:isHome="false"
|
v-model="messageContent.values"
|
@sendClick="sendClick"
|
:style="{ width: chatWidth }"
|
></PlayBar>
|
</div>
|
</div>
|
|
<CustomDrawer v-model:isShow="drawerIsShow" @updateChatInput="updateChatInput" />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ElMessage } from 'element-plus';
|
import _ from 'lodash';
|
import { v4 as uuidv4 } from 'uuid';
|
import { computed, nextTick, onActivated, onMounted, ref, watch } from 'vue';
|
import useClipboard from 'vue-clipboard3';
|
import FeedbackPanel from './components/FeedbackPanel.vue';
|
import Loding from './components/Loding.vue';
|
import type { ChatContent } from './model/types';
|
import { AnswerState, AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage } from './model/types';
|
import { GetHistoryAnswer, QueryHistoryDetail, QuestionAi, SetHistoryAnswerState, getQuestionProcess } from '/@/api/ai/chat';
|
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
|
import CustomDrawer from '/@/components/drawer/CustomDrawer.vue';
|
import { useClickOther } from '/@/hooks/useClickOther';
|
import router from '/@/router';
|
import { activeChatRoom, activeLLMId, activeSampleId, activeSectionAId, getRoomConfig, roomConfig } from '/@/stores/chatRoom';
|
import { ErrorCode } from '/@/utils/request';
|
|
const chatWidth = '75%';
|
const voicePageIsShow = ref(false);
|
let isTalking = ref(false);
|
let messageContent = ref<ChatContent>({
|
type: AnswerType.Text,
|
values: '',
|
});
|
const currentRoute = router.currentRoute;
|
const currentRouteId = currentRoute.value.query.id as string;
|
const chatListDom = ref<HTMLDivElement>();
|
const messageList = ref<ChatMessage[]>([]);
|
const computedMessageList = computed(() => {
|
return messageList.value.filter((v) => v && v.role !== RoleEnum.system);
|
});
|
|
const showAskMore = computed(() => {
|
if (!computedMessageList.value || computedMessageList.value.length === 0) return false;
|
const last = computedMessageList.value.at(-1);
|
const isShow = last?.role === RoleEnum.assistant && last?.content?.values && last.content?.askMoreList?.length > 0;
|
return isShow;
|
});
|
|
const parseContent = (res) => {
|
if (!res) return null;
|
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 ?? res.answer,
|
};
|
break;
|
|
case AnswerType.Knowledge:
|
content = {
|
type: AnswerType.Knowledge,
|
values: res.knowledge,
|
};
|
|
break;
|
case AnswerType.Summary:
|
content = {
|
type: AnswerType.Summary,
|
values: res.summary,
|
};
|
break;
|
case AnswerType.Url:
|
content = {
|
type: AnswerType.Url,
|
values: res.url,
|
};
|
break;
|
case AnswerType.Map:
|
content = {
|
type: AnswerType.Map,
|
values: res.values,
|
};
|
break;
|
default:
|
content = {
|
type: AnswerType.Text,
|
values: '解析失败！',
|
};
|
break;
|
}
|
content.askMoreList = _.orderBy(res.context_history, [(item) => Number(item.radio)], ['desc']);
|
content.errCode = res?.err_code;
|
content.msg = res?.json_msg;
|
content.origin = res;
|
return content;
|
};
|
//#region ====================== 查询进度 ======================
|
let processId = '';
|
const QUERY_PROCESS_INTERVAL = 1000;
|
const process = ref('');
|
let processTimer = null;
|
let finishProcess = true;
|
|
const queryProcessApi = async () => {
|
const res = await getQuestionProcess({
|
process_id: processId,
|
}).catch((err) => {
|
process.value = err;
|
});
|
|
process.value = res.process;
|
finishProcess = true;
|
};
|
|
const queryProcess = () => {
|
processTimer = setInterval(() => {
|
if (!finishProcess) return;
|
finishProcess = false;
|
queryProcessApi();
|
}, QUERY_PROCESS_INTERVAL);
|
};
|
|
const clearQueryProcess = () => {
|
process.value = '';
|
clearInterval(processTimer);
|
};
|
|
//#endregion
|
|
let questionRes = null;
|
const questionAi = async (text) => {
|
if (!currentSectionId) {
|
ElMessage.warning('发送失败，未确定应用场景！');
|
}
|
processId = uuidv4();
|
const params = {
|
process_id: processId,
|
question: text,
|
// FIXME: 暂时这样
|
section_a_id: currentSectionId,
|
history_group_id: currentRouteId,
|
raw_mode: roomConfig.value?.[currentRouteId]?.isAnswerByLLM ?? false,
|
} as any;
|
|
if (currentSampleId) {
|
params.sample_id = currentSampleId;
|
}
|
|
if (currentLLMId) {
|
params.llm_id = currentLLMId;
|
}
|
clearQueryProcess();
|
queryProcess();
|
const res = await QuestionAi(params).finally(() => {
|
clearQueryProcess();
|
});
|
questionRes = res;
|
const content = parseContent(res);
|
return content;
|
};
|
|
const clearMessageContent = () =>
|
(messageContent.value = {
|
type: AnswerType.Text,
|
values: '',
|
});
|
|
const scrollToBottom = () => {
|
if (!chatListDom.value) return;
|
chatListDom.value.lastElementChild?.scrollIntoView();
|
};
|
let currentSectionId = null;
|
let currentSampleId = null;
|
|
let currentLLMId = null;
|
|
const getAnswerById = async (historyId: string) => {
|
return await GetHistoryAnswer({
|
history_id: historyId,
|
});
|
};
|
|
const sendChatMessage = async (content: ChatContent = messageContent.value, cb?: any) => {
|
if (!content?.values) return;
|
const isNewChat = messageList.value.length === 0;
|
if (isNewChat) {
|
if (activeSampleId.value) {
|
currentSampleId = activeSampleId.value;
|
}
|
|
if (activeLLMId.value) {
|
currentLLMId = activeLLMId.value;
|
}
|
|
if (activeSectionAId.value) {
|
currentSectionId = activeSectionAId.value;
|
}
|
}
|
let resMsgContent: ChatContent = null;
|
|
try {
|
isTalking.value = true;
|
const userItem: ChatMessage = { role: RoleEnum.user, content } as any;
|
const assistantItem: ChatMessage = { role: RoleEnum.assistant, content: null, state: AnswerState.Null } as any;
|
// 发送当前
|
messageList.value.push(userItem);
|
// 清空输入框
|
clearMessageContent();
|
|
// 出现回复，置空出现等待动画
|
messageList.value.push(assistantItem);
|
|
resMsgContent = await questionAi(content.values);
|
if (isNewChat) {
|
const firstResCb = getRoomConfig(currentRouteId, 'firstResCb');
|
firstResCb?.(resMsgContent);
|
} else {
|
cb?.(resMsgContent);
|
}
|
userItem.historyId = questionRes.history_id;
|
assistantItem.historyId = questionRes.history_id;
|
appendLastMessageContent(resMsgContent);
|
} catch (error: any) {
|
// appendLastMessageContent({
|
// type: AnswerType.Text,
|
// values: '发生错误！',
|
// });
|
} finally {
|
isTalking.value = false;
|
}
|
};
|
|
const sendClick = (cb) => {
|
sendChatMessage(messageContent.value, cb);
|
};
|
const appendLastMessageContent = (content: ChatContent) => {
|
if (messageList.value.at(-1)) {
|
messageList.value.at(-1).content = content;
|
}
|
};
|
|
const askMoreClick = (item) => {
|
if (!item.question) return;
|
sendChatMessage({ type: AnswerType.Text, values: item.question });
|
};
|
|
onMounted(async () => {
|
const res = await QueryHistoryDetail({
|
history_group_id: currentRouteId,
|
});
|
|
messageList.value = (res.details ?? []).map((item) => {
|
return {
|
historyId: item.history_id,
|
role: RoleEnum.user,
|
content: {
|
type: AnswerType.Text,
|
values: item.question,
|
},
|
} as ChatMessage;
|
});
|
currentSectionId = res?.details?.[0]?.section_a_id;
|
currentSampleId = res?.details?.[0]?.sample_id;
|
const resList = await Promise.all((res.details ?? []).map((item) => getAnswerById(item.history_id)));
|
let i = 0;
|
|
resList.map((item, index) => {
|
const insertIndex = index + 1 + i;
|
messageList.value.splice(
|
insertIndex,
|
0,
|
item.answer === null
|
? null
|
: {
|
historyId: item.answer?.history_id,
|
role: RoleEnum.assistant,
|
content: parseContent(item.answer),
|
state: item.answer_state,
|
}
|
);
|
i++;
|
});
|
|
if (messageList.value.length === 0) {
|
messageContent.value = {
|
type: AnswerType.Text,
|
values: activeChatRoom.value.title,
|
};
|
|
sendChatMessage();
|
}
|
});
|
let forbidScroll = false;
|
watch(
|
messageList,
|
() => {
|
if (forbidScroll) return;
|
nextTick(() => scrollToBottom());
|
},
|
{
|
deep: true,
|
}
|
);
|
|
onActivated(() => {
|
if (forbidScroll) return;
|
nextTick(() => scrollToBottom());
|
});
|
|
//#region ====================== 聊天内容操作 ======================
|
|
const { toClipboard } = useClipboard();
|
|
const copyClick = (item) => {
|
const type = item.content.type;
|
let text = '';
|
if (type === AnswerType.Knowledge) {
|
text = item.content.values?.map((item) => item.answer).join('\n\n') ?? '';
|
} else {
|
text = item.content.values;
|
}
|
ElMessage.success('复制成功');
|
toClipboard(text);
|
};
|
|
const likeClick = async (item) => {
|
const toSetState = item.state === AnswerState.Like ? AnswerState.Null : AnswerState.Like;
|
const res = await SetHistoryAnswerState({
|
history_id: item.historyId,
|
answer_state: toSetState,
|
});
|
item.state = toSetState;
|
forbidScroll = true;
|
nextTick(() => {
|
forbidScroll = false;
|
});
|
};
|
|
const unLikeClick = async (item) => {
|
const toSetState = item.state === AnswerState.Unlike ? AnswerState.Null : AnswerState.Unlike;
|
const res = await SetHistoryAnswerState({
|
history_id: item.historyId,
|
answer_state: toSetState,
|
});
|
item.state = toSetState;
|
|
forbidScroll = true;
|
nextTick(() => {
|
forbidScroll = false;
|
});
|
};
|
const feedbackPosition = ref({
|
x: 0,
|
y: 0,
|
});
|
|
const feedbackIsShow = ref(false);
|
const feedbackContent = ref('');
|
const feedbackPanelRef = ref<HTMLDivElement>(null);
|
const currentFeedbackMapItem = ref(null);
|
const curFeedbackIndex = ref(0);
|
const feedbackClick = async (e, item, index) => {
|
currentFeedbackMapItem.value = item;
|
curFeedbackIndex.value = index;
|
const offsetX = -4;
|
const offsetY = -8;
|
feedbackIsShow.value = true;
|
nextTick(() => {
|
feedbackPosition.value = {
|
x: -feedbackPanelRef.value[index].$el.clientWidth + offsetX,
|
y: -feedbackPanelRef.value[index].$el.clientHeight + offsetY,
|
};
|
});
|
};
|
useClickOther(
|
computed(() => feedbackPanelRef.value[curFeedbackIndex.value]),
|
feedbackIsShow,
|
() => {
|
feedbackIsShow.value = false;
|
feedbackContent.value = '';
|
}
|
);
|
//#endregion
|
|
//#region ====================== 侧边栏drawer ======================
|
const drawerIsShow = ref(false);
|
|
const updateChatInput = (content) => {
|
messageContent.value.values = 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>
|
