优化 smallChat

gerson

2025-01-21 9565ee3fd6d2b8d50d20b3721ab88f07e72005b5

 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>