<template>
|
<div ref="chatContainerRef" :style="chatContainerStyle" class="opacity-90 small-chat-container" @mousedown="startDrag">
|
<div class="bg-white rounded-lg shadow-lg flex flex-col w-[400px] max-h-[600px] absolute bottom-4 right-4">
|
<!-- 头部 -->
|
<div ref="chatHeaderRef" :style="handleStyle" class="small-chat-header h-12 flex items-center justify-between px-4 border-b">
|
<div class="text-lg font-medium">WI水务智能助理</div>
|
<div class="flex items-center gap-2">
|
<!-- <el-icon class="cursor-pointer text-gray-400 hover:text-gray-600">
|
<Refresh />
|
</el-icon>
|
<el-icon class="cursor-pointer text-gray-400 hover:text-gray-600">
|
<FullScreen />
|
</el-icon>
|
<el-icon class="cursor-pointer text-gray-400 hover:text-gray-600">
|
<Star />
|
</el-icon> -->
|
<!-- <el-icon class="cursor-pointer text-gray-400 hover:text-gray-600" @click="closeChat">
|
<Close />
|
</el-icon> -->
|
</div>
|
</div>
|
|
<!-- 内容区 -->
|
<div class="flex-1 overflow-y-auto p-4" ref="chatContentRef" v-show="showHistory">
|
<div v-if="isInit">
|
<!-- 欢迎语 -->
|
<div class="flex flex-col items-center gap-4 mt-8">
|
<img :src="assistantPic" class="w-16 h-16" alt="AI头像" />
|
<div class="text-lg">你好, 我是</div>
|
<div class="text-lg text-blue-500">WI水务智能助理</div>
|
</div>
|
<!-- 快捷问题 -->
|
<div class="mt-8 flex flex-col gap-3 mx-10">
|
<div
|
v-for="(item, index) in initQuestionList"
|
:key="index"
|
class="cursor-pointer hover:bg-gray-50 p-3 rounded-lg border border-solid border-gray-400"
|
@click="handleQuestionClick(item.question)"
|
>
|
{{ item.title }}
|
</div>
|
</div>
|
</div>
|
<div v-else class="flex flex-col gap-4">
|
<!-- 对话内容 -->
|
<div class="flex flex-col gap-4" v-for="item in historyMessages" :key="item.id">
|
<!-- 用户提问 -->
|
<div class="flex gap-3" v-if="item.role === 'user'">
|
<img :src="userPic" class="w-10 h-10" alt="用户头像" />
|
<div class="flex-1 bg-blue-100">
|
<div class="p-4 rounded-lg">{{ item.content.value }}</div>
|
</div>
|
</div>
|
|
<!-- AI回答 -->
|
<div class="flex gap-3" v-else-if="item.role === 'assistant'">
|
<img :src="assistantPic" class="w-10 h-10" alt="AI头像" />
|
<div class="flex-1 bg-gray-100">
|
<div v-if="(item.content as AssistantContent)?.isLoading" class="p-4 rounded-lg flex items-center">
|
<el-icon class="animate-spin mr-2"><Loading /></el-icon>
|
AI正在思考中...
|
</div>
|
<div v-else class="p-4 rounded-lg">
|
{{ item.content.value }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 底部输入框 -->
|
<div class="p-2 border-t">
|
<ChatInput v-model="inputText" @sendClick="sendClick" @toggleHistory="toggleHistory" :showHistory="showHistory" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="smallChat">
|
import { computed, nextTick, onMounted, ref } from 'vue';
|
import ChatInput from './ChatInput.vue';
|
import type { ChatMessage } from './types';
|
import { AssistantContent } from './types';
|
import { agentStreamByPost } from '/@/api/ai/chat';
|
import { Logger } from '/@/model/logger/Logger';
|
import { GaoDeSourceType, gaoDeSourceTypeMap, type OLMap } from '/@/model/map/OLMap';
|
import assistantPic from '/static/images/role/assistant-200x192.png';
|
import userPic from '/static/images/role/user-200x206.png';
|
import { useDrag } from '/@/hooks/useDrag';
|
|
const props = defineProps<{
|
olMap?: OLMap;
|
}>();
|
const isOpen = ref(false);
|
const inputText = ref('');
|
/** @description 对话完成前是否时初始状态 */
|
let lastIsInit = true;
|
const closeChat = () => {
|
isOpen.value = false;
|
};
|
const chatHeaderRef = ref<HTMLDivElement>(null);
|
|
const chatContainerRef = ref<HTMLDivElement>(null);
|
|
const {
|
startDrag,
|
style: chatContainerStyle,
|
handleStyle,
|
} = useDrag({
|
handle: chatHeaderRef,
|
});
|
|
const historyMessages = ref<ChatMessage[]>([]);
|
const isInit = computed(() => historyMessages.value.length === 0);
|
const initQuestionList = ref([
|
{ title: '图层切换', question: '切换卫星地图' },
|
{ title: '地图缩放', question: '放大' },
|
{ title: '设备显隐', question: '隐藏设备' },
|
{ title: '设备聚焦', question: '聚焦设备' },
|
]);
|
const chatContentRef = ref<HTMLDivElement>(null);
|
|
const getLastAssistantMessage = () => {
|
const last = historyMessages.value[historyMessages.value.length - 1];
|
const result = last.role === 'assistant' ? last : null;
|
return result as ChatMessage<AssistantContent>;
|
};
|
|
const mockCommand = (question: string) => {
|
if (question === `切换${gaoDeSourceTypeMap[GaoDeSourceType.Vector]}`) {
|
handleMapCommand({ operate: '切换标准地图' });
|
return;
|
} else if (question === `切换${gaoDeSourceTypeMap[GaoDeSourceType.Satellite]}`) {
|
handleMapCommand({ operate: '切换卫星地图' });
|
return;
|
} else if (question === `切换${gaoDeSourceTypeMap[GaoDeSourceType.SatelliteRoad]}`) {
|
handleMapCommand({ operate: '切换路网地图' });
|
return;
|
} else if (question === '显示设备') {
|
handleMapCommand({ operate: '显示设备' });
|
return;
|
} else if (question === '隐藏设备') {
|
handleMapCommand({ operate: '隐藏设备' });
|
return;
|
} else if (question === '聚焦设备') {
|
handleMapCommand({ operate: '聚焦设备' });
|
return;
|
}
|
};
|
|
const startStream = (question: string) => {
|
if (lastIsInit) {
|
showHistory.value = false;
|
}
|
|
// mockCommand(question);
|
// return;
|
let haveMapOperate = false;
|
agentStreamByPost(
|
{
|
question: question,
|
agent_id: 'a_019471cdb0667a83956b76ac97283f1c',
|
},
|
(chunkRes) => {
|
Logger.info('agent stream response：\n\n' + JSON.stringify(chunkRes));
|
|
if (chunkRes.mode === 'map') {
|
haveMapOperate = true;
|
if (chunkRes.type === 'string') {
|
const jsonData = JSON.parse(chunkRes.value);
|
handleMapCommand(jsonData);
|
}
|
}
|
if (chunkRes.mode === 'finish') {
|
if (!haveMapOperate) {
|
refreshAssistantMessage({ value: `未识别到操作：${question}` });
|
}
|
}
|
}
|
).catch((error) => {
|
Logger.error('agent stream error：\n\n' + error);
|
refreshAssistantMessage();
|
});
|
};
|
|
const refreshAssistantMessage = (content: Partial<AssistantContent> = { value: 'AI回答失败' }) => {
|
const last = getLastAssistantMessage();
|
if (last) {
|
last.content.value = content.value;
|
last.content.isLoading = content.isLoading;
|
}
|
};
|
|
const handleMapCommand = (command: any) => {
|
if (!command) return;
|
switch (command.operate) {
|
case '放大':
|
props.olMap.zoomIn();
|
break;
|
|
case '缩小':
|
props.olMap.zoomOut();
|
break;
|
case `切换${gaoDeSourceTypeMap[GaoDeSourceType.Vector]}`:
|
props.olMap.setSourceType(GaoDeSourceType.Vector);
|
break;
|
case `切换${gaoDeSourceTypeMap[GaoDeSourceType.Satellite]}`:
|
props.olMap.setSourceType(GaoDeSourceType.Satellite);
|
break;
|
|
case `切换${gaoDeSourceTypeMap[GaoDeSourceType.SatelliteRoad]}`:
|
props.olMap.setSourceType(GaoDeSourceType.SatelliteRoad);
|
break;
|
|
case '显示设备':
|
props.olMap.toggleMarkerOverlayVisible(true);
|
break;
|
case '隐藏设备':
|
props.olMap.toggleMarkerOverlayVisible(false);
|
break;
|
case '聚焦设备':
|
props.olMap.adjustViewToMarkers();
|
break;
|
}
|
refreshAssistantMessage({ value: `已执行操作: ${command.operate}` });
|
};
|
|
const scrollToBottom = () => {
|
if (chatContentRef.value) {
|
chatContentRef.value.scrollTop = chatContentRef.value.scrollHeight;
|
}
|
};
|
|
const applyMessage = () => {
|
const time = Date.now().toString();
|
const userMessageId = `user-${time}`;
|
const userMessage: ChatMessage = {
|
id: userMessageId,
|
role: 'user',
|
content: {
|
value: inputText.value,
|
},
|
};
|
historyMessages.value.push(userMessage);
|
const assistantMessageId = `assistant-${time}`;
|
const assistantMessage: ChatMessage = {
|
id: assistantMessageId,
|
role: 'assistant',
|
content: {
|
value: '',
|
isLoading: true,
|
},
|
};
|
historyMessages.value.push(assistantMessage);
|
|
nextTick(() => {
|
scrollToBottom();
|
});
|
const userReactive = historyMessages.value.find((item) => item.id === userMessageId);
|
const assistantReactive = historyMessages.value.find((item) => item.id === assistantMessageId);
|
return [userReactive, assistantReactive];
|
};
|
|
const sendClick = async () => {
|
if (!inputText.value.trim()) return;
|
lastIsInit = isInit.value;
|
const lastMessage = historyMessages.value[historyMessages.value.length - 1];
|
if (lastMessage && lastMessage.role === 'assistant' && (lastMessage.content as AssistantContent).isLoading) return;
|
const [userMessage, assistantMessage] = applyMessage();
|
const question = inputText.value;
|
inputText.value = '';
|
|
startStream(question);
|
};
|
|
const handleQuestionClick = (item: string) => {
|
inputText.value = item;
|
sendClick();
|
};
|
|
//#region ====================== 历史显示控制 ======================
|
const showHistory = ref(true);
|
const toggleHistory = () => {
|
showHistory.value = !showHistory.value;
|
nextTick(() => {
|
scrollToBottom();
|
});
|
};
|
//#endregion
|
onMounted(() => {});
|
</script>
|
|
<style scoped lang="scss">
|
:deep(.el-input__wrapper) {
|
padding-right: 0;
|
}
|
</style>
|
