From 9565ee3fd6d2b8d50d20b3721ab88f07e72005b5 Mon Sep 17 00:00:00 2001
From: gerson <1405270578@qq.com>
Date: 星期二, 21 一月 2025 09:19:27 +0800
Subject: [PATCH] 优化 smallChat
---
src/components/chat/smallChat/index.vue | 100 +++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 83 insertions(+), 17 deletions(-)
diff --git a/src/components/chat/smallChat/index.vue b/src/components/chat/smallChat/index.vue
index c63239b..18f0698 100644
--- a/src/components/chat/smallChat/index.vue
+++ b/src/components/chat/smallChat/index.vue
@@ -1,9 +1,14 @@
<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 class="bg-white rounded-lg shadow-lg flex flex-col w-[370px] 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
+ ref="chatHeaderRef"
+ :style="handleStyle"
+ class="small-chat-header h-12 flex items-center justify-between px-4"
+ style="border-bottom: 1px solid #e0e0e0"
+ >
+ <div class="text-lg font-bold">WI姘村姟鏅鸿兘鍔╂墜</div>
<div class="flex items-center gap-2">
<!-- <el-icon class="cursor-pointer text-gray-400 hover:text-gray-600">
<Refresh />
@@ -23,22 +28,49 @@
<!-- 鍐呭鍖� -->
<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 class="mx-1">
+ <div class="robot-tip mt-1 p-0.5">
+ <span class="text-[14px] flex flex-col gap-1">
+ <span style="font-style: italic; font-size: 15px; font-weight: 550">娆㈣繋鏉ュ埌AI涓栫晫锛屾帰绱㈡棤闄愬彲鑳斤紒 </span>
+ <span>鎴戞槸WI姘村姟鏅鸿兘鍔╂墜锛屼綘鍙互杈撳叆浠ヤ笅闂锛岃繘琛屽湴鍥炬搷浣溿��</span>
+ </span>
+ </div>
</div>
+ <!-- 娆㈣繋璇� -->
+ <!-- <div class="flex flex-col items-center gap-1.5 mt-8">
+ <div class="text-lg">浣犲ソ, 鎴戞槸</div>
+ <div class="text-lg text-blue-500">WI姘村姟鏅鸿兘鍔╂墜</div>
+ <span class="text-lg">浣犲彲浠ヨ緭鍏ヤ互涓嬮棶棰橈紝杩涜鍦板浘鎿嶄綔</span>
+ </div> -->
<!-- 蹇嵎闂 -->
- <div class="mt-8 flex flex-col gap-3 mx-10">
+ <!-- <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)"
+ @click="handleQuestionClick(item.question)"
>
- {{ item }}
+ {{ item.title }}
</div>
+ </div> -->
+ <div class="mr-1 ml-10 !mt-6 text-[13px] flex flex-col">
+ <div class="space-y-2">
+ <div
+ class="bg-gray-200 hover:bg-gray-300 cursor-pointer rounded-lg p-3"
+ v-for="(item, index) in initQuestionList"
+ :key="index"
+ style="width: fit-content"
+ @click="handleQuestionClick(item.question)"
+ >
+ <div class="over-ellisis-1" style="width: fit-content">
+ {{ item.title }}
+ </div>
+ </div>
+ </div>
+ <!-- <div class="flex-items-center ml-auto mr-2 mt-1 text-gray-600 active:text-gray-500" @click="changeABatch">
+ <span class="ywifont ywicon-shuaxin !text-[12px] mr-1"></span>
+ <span>鎹竴鎵�</span>
+ </div> -->
</div>
</div>
<div v-else class="flex flex-col gap-4">
@@ -60,7 +92,7 @@
<el-icon class="animate-spin mr-2"><Loading /></el-icon>
AI姝ｅ湪鎬濊�冧腑...
</div>
- <div v-else class="p-4 rounded-lg">
+ <div v-else class="p-4 rounded-lg" :class="{ 'text-danger': (item.content as AssistantContent)?.isError }">
{{ item.content.value }}
</div>
</div>
@@ -113,7 +145,12 @@
const historyMessages = ref<ChatMessage[]>([]);
const isInit = computed(() => historyMessages.value.length === 0);
-const initQuestionList = ref(['鏀惧ぇ', '缂╁皬']);
+const initQuestionList = ref([
+ { title: '鍥惧眰鍒囨崲', question: '鍒囨崲鍗槦鍦板浘' },
+ { title: '鍦板浘缂╂斁', question: '鏀惧ぇ' },
+ { title: '璁惧鏄鹃殣', question: '闅愯棌璁惧' },
+ { title: '璁惧鑱氱劍', question: '鑱氱劍璁惧' },
+]);
const chatContentRef = ref<HTMLDivElement>(null);
const getLastAssistantMessage = () => {
@@ -142,7 +179,7 @@
handleMapCommand({ operate: '鑱氱劍璁惧' });
return;
}
-}
+};
const startStream = (question: string) => {
if (lastIsInit) {
@@ -169,7 +206,7 @@
}
if (chunkRes.mode === 'finish') {
if (!haveMapOperate) {
- refreshAssistantMessage({ value: `鏈瘑鍒埌鎿嶄綔锛�${question}` });
+ refreshAssistantMessage({ value: `鏈瘑鍒埌鎿嶄綔锛�${question}`, isError: true });
}
}
}
@@ -179,11 +216,12 @@
});
};
-const refreshAssistantMessage = (content: Partial<AssistantContent> = { value: 'AI鍥炵瓟澶辫触' }) => {
+const refreshAssistantMessage = (content: Partial<AssistantContent> = { value: 'AI鍥炵瓟澶辫触', isError: true }) => {
const last = getLastAssistantMessage();
if (last) {
last.content.value = content.value;
last.content.isLoading = content.isLoading;
+ last.content.isError = content.isError ?? false;
}
};
@@ -218,7 +256,7 @@
props.olMap.adjustViewToMarkers();
break;
}
- refreshAssistantMessage({ value: `宸叉墽琛屾搷浣�: ${command.operate}` });
+ refreshAssistantMessage({ value: `${command.operate}鎴愬姛` });
};
const scrollToBottom = () => {
@@ -290,4 +328,32 @@
:deep(.el-input__wrapper) {
padding-right: 0;
}
+
+.robot-tip {
+ position: relative;
+ width: fit-content;
+ height: fit-content;
+ background: linear-gradient(90deg, #ccdcf5 0%, #ccdcf5 25%, #ebf3fe 55%, #ccdcf5 100%);
+ border: 4px solid transparent;
+ border-radius: 10px;
+}
+.robot-tip::after {
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 20%;
+ transform: translateX(-50%);
+ border: 20px solid transparent;
+ border-top: 20px solid transparent;
+}
+.robot-tip::before {
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 20%;
+ transform: translateX(-50%);
+ border: 20px solid transparent;
+ border-top: 20px solid #ccdcf5;
+ z-index: 1;
+}
</style>
--
Gitblit v1.9.3