<template>
|
<div class="flex h-full">
|
<div class="flex flex-col h-full flex-auto">
|
<div ref="chatListDom" class="relative h-full flex flex-col items-center overflow-y-auto" style="height: calc(100% - 50px)">
|
<span
|
class="more-loading absolute text-blue-400 left-[50%] translate-x-[-50%] cursor-pointer w-10"
|
v-loading="moreIsLoading"
|
></span>
|
<div class="h-full relative" v-loading="chatListLoading" :style="{ width: chatWidth }">
|
<template v-if="computedMessageList?.length > 0">
|
<div
|
class="flex px-4 py-6 rounded-lg relative"
|
:class="{ 'flex-row-reverse': item.role === RoleEnum.user, 'px-10': isShareCheck }"
|
v-for="(item, msgIndex) of computedMessageList"
|
:key="`${item.historyId}_${item.role}`"
|
>
|
<div class="absolute top-0 left-[72px] text-[#8d8e99]">{{ item?.createTime }}</div>
|
<!-- :class="{ 'top-[30px]': item.role === RoleEnum.user, 'top-[30px]': item.role === RoleEnum.assistant }" -->
|
|
<el-checkbox
|
v-if="isShareCheck"
|
class="absolute left-0 top-[28px]"
|
size="large"
|
v-model="item.isChecked"
|
@change="(isChecked) => shareCheckChange(isChecked as boolean, item)"
|
></el-checkbox>
|
<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">
|
<div
|
class="text-sm rounded-[6px] p-4 leading-relaxed"
|
:style="{ backgroundColor: item.role === RoleEnum.user ? 'rgb(197 224 255)' : 'white' }"
|
:class="{ group: item.role === RoleEnum.user }"
|
>
|
<div class="flex flex-col" v-if="item?.stepList?.length > 0">
|
<div class="flex items-center mb-3">
|
<span class="mr-2">意图分析：</span>
|
<div
|
@click="toggleStepList(item)"
|
class="cursor-pointer border border-gray-300 border-solid w-fit px-2 flex items-center space-x-2 rounded-lg hover:bg-gray-100 active:bg-gray-200"
|
>
|
<span>
|
{{ toggleStepLabel(item) }}
|
</span>
|
<span
|
class="ywifont"
|
:class="{ 'ywicon-unfold': !item.stepIsShow, 'ywicon-fold': item.stepIsShow }"
|
></span>
|
</div>
|
</div>
|
|
<!-- 过程输出 -->
|
<el-steps v-show="item.stepIsShow" direction="vertical" :active="activeStep">
|
<el-step
|
v-for="(subItem, index) in item.stepList"
|
:title="subItem.title"
|
:status="stepEnumMap[subItem.status]"
|
>
|
<template
|
#icon
|
v-if="index + 1 === item.stepList.length && isTalking && msgIndex === computedMessageList.length - 1"
|
>
|
<span class="ywifont ywicon-loading1 animate-spin !text-[24px]"></span>
|
</template>
|
<template #title>
|
<span class="text-sm"
|
>{{ subItem.title
|
}}<span v-if="subItem.ms" class="text-green-600">{{ `（${subItem.ms}）` }}</span></span
|
>
|
</template>
|
</el-step>
|
</el-steps>
|
</div>
|
|
<div
|
v-if="item.role === RoleEnum.user && item.content?.values && !isSharePage && !isShareCheck"
|
class="absolute flex items-center bottom-0 group invisible"
|
>
|
<div
|
class="bg-[#fff] flex items-center relative mr-4 space-x-2 flex-nowrap rounded-[6px] py-2 px-2 group-hover:visible"
|
>
|
<el-tooltip effect="dark" content="复制" placement="top">
|
<div class="flex items-center justify-center size-[20px]">
|
<i
|
class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] font-medium !text-[15px] hover:!text-[18px]"
|
@click="copyUserClick(item)"
|
/>
|
</div>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="设为常用语" placement="top">
|
<div class="flex items-center justify-center size-[20px]">
|
<i
|
class="p-2 ywifont ywicon-cubelifangti cursor-pointer hover:text-[#0284ff] text-[#000] font-[590] !text-[15px] hover:!text-[18px]"
|
@click="setCommonQuestionClick(item)"
|
/>
|
</div>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="分享" placement="top">
|
<div class="flex items-center justify-center size-[15px]">
|
<i
|
:class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }"
|
class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]"
|
@click="shareClick(item)"
|
/>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
|
<template v-if="item.content?.values">
|
<div v-if="item.content.errCode === ErrorCode.Message" class="flex-column w-full">
|
<p class="text-red-500">
|
{{ item.content.errMsg }}
|
</p>
|
<div class="mt-3 flex" v-if="showFixQuestion(item)">
|
<div class="text-gray-600 flex-0 mb-auto py-3">
|
{{ '猜你想问：' }}
|
</div>
|
<div class="flex-auto space-x-2 space-y-1 inline-flex flex-wrap items-center">
|
<div
|
v-for="fixItem in item.content.origin?.sample_question"
|
:key="fixItem"
|
class="bg-gray-200 p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg first-of-type:ml-2 first-of-type:mt-1"
|
@click="fixQuestionClick(fixItem, item.content.origin)"
|
>
|
{{ fixItem }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<template v-else>
|
<component
|
:conclusion="item.conclusion"
|
:is="answerTypeMapCom[item.content.type]"
|
:data="item.content.values"
|
:originData="item"
|
:isTalking="isTalking && msgIndex === computedMessageList.length - 1"
|
/>
|
<div
|
v-if="item.role === RoleEnum.assistant && item.content.origin?.ext_call_list"
|
class="flex font-bold items-center mt-6"
|
>
|
<div class="flex-0 mb-auto -mr-4">关联功能：</div>
|
<div class="space-x-5 flex flex-wrap">
|
<div
|
v-for="callItem in item.content.origin?.ext_call_list"
|
:key="callItem.call_ext_id"
|
@click="relativeQueryClick(callItem)"
|
class="cursor-pointer hover:underline first-of-type:ml-5"
|
>
|
{{ callItem.question }}
|
</div>
|
</div>
|
</div>
|
</template>
|
</template>
|
</div>
|
|
<div
|
v-if="item.role === RoleEnum.assistant && item.content?.values && !isSharePage && !isShareCheck"
|
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 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] hover:!text-[18px]"
|
@click="copyClick(item)"
|
/>
|
</div>
|
<template v-if="item.content.errCode !== ErrorCode.Message">
|
<el-tooltip effect="dark" content="点赞" placement="top">
|
<div class="flex items-center justify-center size-[15px]">
|
<i
|
:class="{ 'text-[#0284ff]': item.state === AnswerState.Like }"
|
class="p-2 ywifont ywicon-dianzan cursor-pointer hover:text-[#0284ff] font-medium hover:!text-[18px]"
|
@click="likeClick(item)"
|
/>
|
</div>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="点踩" placement="top">
|
<div class="flex items-center justify-center size-[15px]">
|
<i
|
:class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }"
|
class="p-2 ywifont ywicon-buzan cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]"
|
@click="unLikeClick(item)"
|
/>
|
</div>
|
</el-tooltip>
|
</template>
|
<el-tooltip effect="dark" content="分享" placement="top">
|
<div class="flex items-center justify-center size-[15px]">
|
<i
|
class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]"
|
@click="shareClick(item)"
|
/>
|
</div>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="反馈" placement="top">
|
<div class="flex items-center justify-center size-[15px] relative">
|
<i
|
class="p-2 ywifont ywicon-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>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<el-empty v-else-if="isSharePage && !chatListLoading" :image-size="200">
|
<template #description>
|
<span class="text-[15px]"> 分享的对话不存在或已失效 </span>
|
</template>
|
</el-empty>
|
<div v-if="showAskMore" class="ml-4 mt-5 text-sm pb-10">
|
<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 px-6 pt-12 pb-6 bg-[rgb(247,248,250)] flex justify-center"
|
v-if="!isSharePage && !isShareCheck"
|
>
|
<PlayBar
|
v-model:voicePageIsShow="voicePageIsShow"
|
:isTalking="isTalking"
|
:isHome="false"
|
v-model="messageContent.values"
|
@sendClick="sendClick"
|
@showUpChatClick="showUpChatClick"
|
@showDownChatClick="showDownChatClick"
|
:style="{ width: chatWidth }"
|
:setCommonQuestionInfo="setCommonQuestionInfo"
|
></PlayBar>
|
</div>
|
<div class="sticky bottom-0 w-full p-6 bg-[rgb(247,248,250)] flex justify-center" v-if="isShareCheck"></div>
|
</div>
|
<CustomDrawer v-model:isShow="drawerIsShow" @updateChatInput="updateChatInput" />
|
<el-dialog
|
title="分享链接"
|
v-model="shareCodeIsShow"
|
width="25%"
|
center
|
modal-append-to-body
|
lock-scroll
|
:before-close="closeShareClick"
|
>
|
<div class="w100 h100 flex justify-center items-center flex-col">
|
<div class="qrcode h100" ref="qrcodeRef"></div>
|
<div class="h100 w100 flex flex-col justify-center items-center">
|
<span class="h100 text-[#8d8e99] text-[12px] mt-2">{{ shareCoderUrl }}</span>
|
<span class="text-[#1d86ff] text-[12px] cursor-pointer" @click="copyShareCodeClick">复制</span>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ElMessage } from 'element-plus';
|
import { findLast, orderBy } from 'lodash-es';
|
import moment from 'moment';
|
import QRCode from 'qrcodejs2-fixes';
|
import { computed, nextTick, onActivated, onMounted, ref } from 'vue';
|
import useClipboard from 'vue-clipboard3';
|
import FeedbackPanel from './components/FeedbackPanel.vue';
|
import { useAssistantContentOpt } from './hooks/useAssistantContentOpt';
|
import { useQueryProcess } from './hooks/useQueryProcess';
|
import { convertProcessItem, useScrollLoad } from './hooks/useScrollLoad';
|
import { useScrollToBottom } from './hooks/useScrollToBottom';
|
import type { ChatContent, StepItem } from './model/types';
|
import { AnswerState, AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, stepEnumMap, type ChatMessage } from './model/types';
|
import { extCallQuery, questionStreamByPost, shareChatHistoryByPost } from '/@/api/ai/chat';
|
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
|
import CustomDrawer from '/@/components/drawer/CustomDrawer.vue';
|
import { SHARE_URL } from '/@/constants';
|
import { Logger } from '/@/model/logger/Logger';
|
import router from '/@/router';
|
import {
|
activeChatRoom,
|
activeGroupType,
|
activeLLMId,
|
activeRoomId,
|
activeSampleId,
|
activeSectionAId,
|
getRoomConfig,
|
isSharePage,
|
roomConfig,
|
} from '/@/stores/chatRoom';
|
import { getCurrentPosition } from '/@/utils/brower';
|
import emitter from '/@/utils/mitt';
|
import { ErrorCode } from '/@/utils/request';
|
import { toMyFixed } from '/@/utils/util';
|
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;
|
activeRoomId.value = currentRouteId;
|
const chatListDom = ref<HTMLDivElement>();
|
const messageList = ref<ChatMessage[]>([]);
|
const computedMessageList = computed(() => {
|
return messageList.value.filter((v) => !!v);
|
});
|
|
const parseContent = (res, reportIsShow = false) => {
|
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?.map((item) => {
|
item.reportIsShow = reportIsShow;
|
return item;
|
}),
|
};
|
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.errMsg = res?.json_msg;
|
content.origin = res;
|
return content;
|
};
|
const { clearQueryProcess, process, processId, queryProcess } = useQueryProcess();
|
|
//#region ====================== 步骤 step ======================
|
const activeStep = ref(-1);
|
const stepList = ref<StepItem[]>([
|
{
|
title: '意图分析中...',
|
status: 0,
|
},
|
{
|
title: '意图分析完成',
|
status: 1,
|
},
|
{
|
title: '思考如何执行:指标明细查询',
|
status: 1,
|
},
|
{
|
title: '指标明细查询完成',
|
status: 1,
|
},
|
]);
|
|
const resetStep = () => {
|
activeStep.value = -1;
|
stepList.value = [];
|
};
|
|
const toggleStepLabel = (item: ChatMessage) => (item.stepIsShow ? '收起' : '展开');
|
const toggleStepList = (item: ChatMessage) => {
|
item.stepIsShow = !item.stepIsShow;
|
};
|
|
//#endregion
|
|
const DEFAULT_SECTION_A_ID = 'knowledge_base';
|
let questionRes = null;
|
let position = null;
|
let finalCalcSectionAId = null;
|
const questionAi = async (text) => {
|
let judgeParams = null;
|
if (!preQuestion.value) {
|
// const aiContent = computedMessageList.value.filter((item) => item.role === RoleEnum.assistant);
|
// const lastQuestion = aiContent[aiContent.length - 2]?.content?.origin?.question;
|
// judgeParams = lastQuestion
|
// ? {
|
// prev_question: lastQuestion,
|
// }
|
// : {};
|
// 正常回答暂时不采用
|
judgeParams = {};
|
} else {
|
judgeParams = {
|
prev_question: preQuestion.value,
|
};
|
}
|
let currentSectionAId = '';
|
if (activeSectionAId.value) {
|
currentSectionAId = activeSectionAId.value;
|
activeSectionAId.value = '';
|
} else {
|
const lastSectionAItem = findLast(
|
computedMessageList.value as any,
|
(item) => item.role === RoleEnum.assistant && !!item.sectionAId
|
);
|
currentSectionAId = lastSectionAItem?.sectionAId ?? DEFAULT_SECTION_A_ID;
|
}
|
finalCalcSectionAId = currentSectionAId;
|
|
const params = {
|
// process_id: processId.value,
|
question: text,
|
// FIXME: 暂时这样
|
// section_a_id: currentSectionAId,
|
history_group_id: currentRouteId,
|
raw_mode: roomConfig.value?.[currentRouteId]?.isAnswerByLLM ?? false,
|
...judgeParams,
|
} as any;
|
|
if (position) {
|
const longitude = position.coords.longitude;
|
const latitude = position.coords.latitude;
|
params.cur_pos = [longitude, latitude].join(',');
|
}
|
|
if (activeGroupType.value) {
|
params.group_type = activeGroupType.value;
|
}
|
|
if (currentSampleId) {
|
params.sample_id = currentSampleId;
|
currentSampleId = '';
|
}
|
|
// if (currentLLMId) {
|
// params.llm_id = currentLLMId;
|
// }
|
// clearQueryProcess();
|
// queryProcess();
|
resetStep();
|
let res = null;
|
let lastTimestamp = new Date().getTime();
|
const resultP = new Promise(async (resolve, reject) => {
|
await questionStreamByPost(params, (chunkRes) => {
|
Logger.info('chunk response：\n\n' + JSON.stringify(chunkRes));
|
if (chunkRes.mode === 'result') {
|
res = chunkRes.value;
|
resolve(res);
|
chunkRes.value = '准备数据分析';
|
}
|
|
if (chunkRes.mode === 'conclusion') {
|
computedMessageList.value.at(-1).conclusion = chunkRes.value;
|
chunkRes.value = '分析结束';
|
}
|
const stepList = computedMessageList.value.at(-1).stepList;
|
const currentTimeStamp = new Date().getTime();
|
const ms = toMyFixed(currentTimeStamp - lastTimestamp, 2) + ' ms';
|
if (chunkRes.mode === 'finish') {
|
stepList.at(-1).ms = ms;
|
|
isTalking.value = false;
|
return;
|
}
|
|
if (stepList?.length >= 1) {
|
stepList.at(-1).ms = ms;
|
}
|
lastTimestamp = currentTimeStamp;
|
|
const stepItem = convertProcessItem(chunkRes);
|
stepList.push(stepItem);
|
scrollToBottom();
|
})
|
.catch((err) => {
|
throw err;
|
})
|
.finally(() => {
|
isTalking.value = false;
|
|
computedMessageList.value.at(-1).stepIsShow = false;
|
resetStep();
|
});
|
});
|
|
questionRes = await resultP;
|
const content = parseContent(res, true);
|
return content;
|
};
|
|
const clearMessageContent = () =>
|
(messageContent.value = {
|
type: AnswerType.Text,
|
values: '',
|
});
|
|
let currentSampleId = '';
|
|
let currentLLMId = null;
|
|
const sendChatMessage = async (content: ChatContent = messageContent.value, cb?: any, isCallExtParams?: any) => {
|
if (!content?.values) {
|
return;
|
}
|
if (isTalking.value || chatListLoading.value) {
|
ElMessage.warning('ai 正在回复中，请稍后尝试提问');
|
return;
|
}
|
position = position ?? (await getCurrentPosition());
|
|
const isNewChat = messageList.value.length === 0;
|
if (isNewChat) {
|
if (activeSampleId.value) {
|
currentSampleId = activeSampleId.value;
|
}
|
|
if (activeLLMId.value) {
|
currentLLMId = activeLLMId.value;
|
}
|
}
|
let resMsgContent: ChatContent = null;
|
|
try {
|
isTalking.value = true;
|
const userItem: ChatMessage = { role: RoleEnum.user, content, isChecked: false } as any;
|
const assistantItem: ChatMessage = {
|
role: RoleEnum.assistant,
|
content: null,
|
state: AnswerState.Null,
|
stepList: [],
|
stepIsShow: true,
|
isChecked: false,
|
} as any;
|
// 发送当前
|
messageList.value.push(userItem);
|
// 清空输入框
|
clearMessageContent();
|
|
// 出现回复，置空出现等待动画
|
messageList.value.push(assistantItem);
|
// 滚动至当前发送消息
|
scrollToBottom();
|
|
if (isCallExtParams) {
|
const extRes = await extCallQuery(isCallExtParams);
|
questionRes = extRes;
|
resMsgContent = parseContent(extRes, true);
|
} else {
|
resMsgContent = await questionAi(content.values);
|
}
|
nextUserMsgEndIndex.value++;
|
if (isNewChat) {
|
const firstResCb = getRoomConfig(currentRouteId, 'firstResCb');
|
firstResCb?.(resMsgContent);
|
} else {
|
cb?.(resMsgContent);
|
}
|
userItem.historyId = questionRes.history_id;
|
userItem.content.values = questionRes?.question ?? userItem.content.values;
|
assistantItem.historyId = questionRes.history_id;
|
assistantItem.sectionAId = finalCalcSectionAId;
|
appendLastMessageContent(resMsgContent);
|
setTimeout(() => {
|
// 收到回复，继续滚
|
scrollToBottom();
|
}, 300);
|
} catch (error: any) {
|
// appendLastMessageContent({
|
// type: AnswerType.Text,
|
// values: '发生错误！',
|
// });
|
}
|
};
|
|
const sendClick = (cb) => {
|
sendChatMessage(messageContent.value, cb);
|
};
|
const appendLastMessageContent = (content: ChatContent) => {
|
const currentTime = moment().format('MM月DD日 HH:mm:ss');
|
if (messageList.value.at(-1)) {
|
messageList.value.at(-1).content = content;
|
messageList.value.at(-1).createTime = currentTime;
|
}
|
};
|
|
const { loadRangeData, onChatListScroll, moreIsLoading, nextUserMsgEndIndex } = useScrollLoad({
|
container: chatListDom,
|
historyGroupId: currentRouteId,
|
messageList,
|
parseAnswerContent: parseContent,
|
});
|
|
const chatListLoading = ref(true);
|
|
const { scrollToBottom, scrollToTop } = useScrollToBottom({
|
chatListDom: chatListDom,
|
});
|
|
onActivated(() => {
|
emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? '');
|
});
|
|
onMounted(async () => {
|
messageList.value = [];
|
// 加载初始数据
|
chatListLoading.value = true;
|
await loadRangeData().finally(() => {
|
chatListLoading.value = false;
|
});
|
setTimeout(() => {
|
emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? '');
|
}, 300);
|
|
if (messageList.value.length === 0) {
|
messageContent.value = {
|
type: AnswerType.Text,
|
values: activeChatRoom.value?.title,
|
};
|
|
sendChatMessage();
|
} else {
|
if (isSharePage.value) {
|
// setTimeout(() => {
|
// // 滚动到顶部
|
// scrollToTop();
|
// }, 300);
|
} else {
|
setTimeout(() => {
|
// 初始状态滚一下
|
scrollToBottom();
|
|
setTimeout(() => {
|
chatListDom.value.addEventListener('scroll', onChatListScroll);
|
}, 300);
|
}, 300);
|
}
|
}
|
});
|
//#region ====================== 关联查询 ======================
|
const relativeQueryClick = async (val) => {
|
sendChatMessage(
|
{
|
type: AnswerType.Text,
|
values: val.question,
|
},
|
undefined,
|
{
|
history_group_id: currentRouteId,
|
question: val.question,
|
call_ext_id: val.call_ext_id,
|
call_ext_args: val.agrs ? JSON.stringify(val.agrs) : null,
|
}
|
);
|
};
|
//#endregion
|
//#region ====================== 光标输入上下箭头显示历史消息 ======================
|
const currentIndex = ref(null);
|
const history_data = computed(() => {
|
return computedMessageList.value.filter((item) => item.role === RoleEnum.user);
|
});
|
//显示上一条消息
|
const showUpChatClick = () => {
|
if (computedMessageList.value.length === 0) return;
|
if (currentIndex.value == 0) {
|
messageContent.value.values = history_data.value[currentIndex.value].content.values;
|
return;
|
} else {
|
currentIndex.value = (currentIndex.value + history_data.value.length - 1) % history_data.value.length;
|
}
|
messageContent.value.values = history_data.value[currentIndex.value].content.values;
|
};
|
//显示下一条消息
|
const showDownChatClick = () => {
|
if (computedMessageList.value.length === 0) return;
|
if (currentIndex.value == history_data.value.length - 1) {
|
messageContent.value.values = history_data.value[currentIndex.value].content.values;
|
return;
|
}
|
if (currentIndex.value === null) {
|
currentIndex.value = 0;
|
} else {
|
currentIndex.value = (currentIndex.value + 1) % history_data.value.length;
|
}
|
messageContent.value.values = history_data.value[currentIndex.value].content.values;
|
};
|
//#endregion
|
const {
|
copyClick,
|
likeClick,
|
unLikeClick,
|
feedbackPosition,
|
feedbackIsShow,
|
feedbackContent,
|
feedbackPanelRef,
|
currentFeedbackMapItem,
|
feedbackClick,
|
askMoreClick,
|
fixQuestionClick,
|
preQuestion,
|
showFixQuestion,
|
showAskMore,
|
} = useAssistantContentOpt({
|
sendChatMessage,
|
displayMessageList: computedMessageList,
|
});
|
|
//#region ====================== 侧边栏drawer ======================
|
const drawerIsShow = ref(false);
|
|
const updateChatInput = (content) => {
|
messageContent.value.values = content;
|
};
|
//#endregion
|
//#region ====================== 用户询问的问题设置为常用语 ======================
|
const setCommonQuestionInfo = ref({});
|
const { toClipboard } = useClipboard();
|
|
//用户复制问题
|
const copyUserClick = (item) => {
|
const text = item.content.values;
|
ElMessage.success('复制成功');
|
toClipboard(text);
|
};
|
//用户问题设置为常用语
|
const setCommonQuestionClick = (item) => {
|
setCommonQuestionInfo.value = item;
|
};
|
//#endregion
|
|
//#region ====================== 分享 ======================
|
|
const resetShare = () => {
|
computedMessageList.value.forEach((item) => {
|
item.isChecked = false;
|
});
|
isShareCheck.value = false;
|
};
|
|
const isShareCheck = ref(false);
|
const qrcodeRef = ref<HTMLElement | null>(null);
|
const shareCodeIsShow = ref(false); //是否弹窗显示分享二维码
|
const shareCoderUrl = ref('');
|
const shareClick = async (item: ChatMessage) => {
|
item.isChecked = true;
|
shareCheckChange(true, item);
|
// 目前只分享一个，不进入多选模式，分享多个
|
// isShareCheck.value = true;
|
shareCodeIsShow.value = true;
|
const url = await generateShareUrl();
|
shareCoderUrl.value = url;
|
const qrCodeElement = document.querySelector('.qrcode');
|
// ElMessage.success('已复制分享链接');
|
nextTick(() => {
|
(<HTMLElement>qrCodeElement && qrCodeElement).innerHTML = '';
|
new QRCode(qrCodeElement, {
|
text: url,
|
width: 100,
|
height: 100,
|
colorDark: '#000000',
|
colorLight: '#ffffff',
|
});
|
});
|
// toClipboard(url);
|
};
|
//链接复制
|
const copyShareCodeClick = () => {
|
const url = shareCoderUrl.value;
|
if (!url) return;
|
toClipboard(url);
|
ElMessage.success('已复制分享链接');
|
};
|
//关闭分享弹窗
|
const closeShareClick = () => {
|
shareCodeIsShow.value = false;
|
resetShare();
|
};
|
const shareCheckChange = (isChecked: boolean, item: ChatMessage) => {
|
const toFindRole = item.role === RoleEnum.user ? RoleEnum.assistant : RoleEnum.user;
|
|
const foundMapItem = computedMessageList.value.find(
|
(msgItem) => msgItem.historyId === item.historyId && msgItem.role === toFindRole
|
);
|
if (!foundMapItem) return;
|
foundMapItem.isChecked = isChecked;
|
};
|
|
const generateShareUrl = async () => {
|
const shareList = computedMessageList.value.filter((item) => item.isChecked && item.role === RoleEnum.user && !!item.historyId);
|
if (shareList.length === 0) {
|
// ElMessage.warning('请选择要分享的内容');
|
return;
|
}
|
const historyIdStr = shareList.map((item) => item.historyId).join(',');
|
const res = await shareChatHistoryByPost({
|
history_ids: historyIdStr,
|
share_days: 1,
|
}).finally(() => {
|
resetShare();
|
});
|
|
if (!res.values) return;
|
const shareId = Object.values(res.values)[0];
|
if (!shareId) return;
|
const shareLink = `${SHARE_URL}?id=${shareId}`;
|
return shareLink;
|
};
|
|
//#endregion
|
</script>
|
|
<style scoped lang="scss">
|
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;
|
}
|
|
.more-loading {
|
:deep(.el-loading-spinner) {
|
--loading-size: 35px;
|
margin-top: 0;
|
.circular {
|
width: var(--loading-size);
|
height: var(--loading-size);
|
}
|
}
|
}
|
|
:deep(.el-step__icon.is-text) {
|
--radius-size: 24px;
|
width: var(--radius-size);
|
height: var((--radius-size));
|
}
|
|
:deep(.el-step__icon-inner) {
|
font-size: 16px !important;
|
}
|
:deep(.el-step__description) {
|
height: 20px;
|
}
|
</style>
|
