feat(aiDialog): 添加知识库ID参数及交互逻辑

src/components/main/Navbar/cpns/aiDialog/aiDialog.vue

@@ -274,6 +274,10 @@
             type: String,
             default: ''
         },
+        knowledgeId: {
+            type: Number,
+            default: 0
+        },
     });
 
     onMounted(() => {
@@ -285,6 +289,9 @@
             postChatText.value = props.text;
             enterHnadle();
         }
+        if (props.knowledgeId) {
+            sendKnowledge(props.knowledgeId)
+        }
     })
 
     watch(props , (newVal, oldVal) => {
@@ -293,6 +300,9 @@
             postChatText.value = newVal.text;
             enterHnadle();
         }
+        if (newVal.knowledgeId) {
+            sendKnowledge(newVal.knowledgeId)
+        }
     })
 
     const currentSession = ref({});
@@ -367,6 +377,8 @@
     const knowledgeDetail = ref({})
     const knowledgeText = ref('')
     function sendKnowledge(docId) {
+        dialogState.value = '会话中'
+        tipFlag.value = false
         getPageDetail('/km/doc/' + docId).then((data) => {
             if (data.data) {
                 knowledgeDetail.value = data.data;

src/views/main/phone/index.vue

@@ -137,7 +137,7 @@
                                 <div class="relative mb-4">
                                     <div class="absolute left-0 top-0 w-full h-16 bg-gradient-to-b from
 from-white to-transparent pointer-events-none z-10"></div>
-                                    <div ref="transcriptContainer" class="h-[500px] overflow-y-auto pr-4 space-y-3">
+                                    <div ref="transcriptContainer" class="h-[500px] overflow-y-auto pr-4 space-y-3"  @mouseenter="chatMouse(0)" @mouseleave="chatMouse(1)">
                                         <div v-for="(item, index) in transcripts" :key="index" class="p-3 rounded-lg"
                                             :class="[item.direction === 2 ? 'bg-blue-50' : 'bg-gray-50']">
                                             <div class="flex items-center mb-1">
@@ -171,6 +171,7 @@ from-white to-transparent pointer-events-none z-10"></div>
                                         effect="plain" size="small" @click="getKnowledgeBaseList(keyword.text)">
                                         {{ keyword.text }}
                                         <span
+                                        v-if="keyword.count > 1"
                                             class="absolute -top-1 -right-1 bg-blue-500 text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center">
                                             {{ keyword.count }}
                                         </span>
@@ -184,14 +185,14 @@ from-white to-transparent pointer-events-none z-10"></div>
                                     <div v-for="(item, idx) in recommendedKnowledge" :key="idx"
                                         class="p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all cursor-pointer">
                                         <div class="flex items-center justify-between mb-2">
-                                            <h5 class="font-medium">{{ item.title }}</h5>
+                                            <h5 class="font-medium" @click="openKnowledgeAi(item.docId)">{{ item.title }}</h5>
                                             <el-tag size="small" type="default">{{ item.directoryname }}</el-tag>
                                         </div>
                                         <p class="text-sm text-gray-600 line-clamp-2 mb-2">{{
                                             stripHtmlByRegex(item.content) }}</p>
                                         <div class="flex items-center justify-between text-xs text-gray-500">
                                             <span>发布时间：{{ item.createTime }}</span>
-                                            <span>阅读：{{ item.reads }}</span>
+                                            <!-- <span>阅读：{{ item.reads }}</span> -->
                                         </div>
                                     </div>
                                 </div>
@@ -420,12 +421,24 @@ from-white to-transparent pointer-events-none z-10"></div>
             </div>
         </div>
 
+
+        <div class="aiDialog">
+            <!-- title="Tips" -->
+            <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
+                :modal="false" width="30%"
+                :style="{ 'background': 'url(' + base64data.aiBG + ') center center / 100% 100% no-repeat' }" draggable>
+                <ai-dialog :knowledgeId="selectKnowledgeId"></ai-dialog>
+            </el-dialog>
+        </div>
+
     </div>
 </template>
 <script lang="ts" setup name="CallScreen">
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import moment from 'moment';
 import { findKeyword } from '@/utils/trie';
+import { base64data } from '@/utils/baseUrlData'
+import aiDialog from '@/components/main/Navbar/cpns/aiDialog/aiDialog.vue'
 import {
     UserFilled,
     Phone,
@@ -466,6 +479,7 @@ const showCallPanel = ref(false);
 const searchQuery = ref('');
 const aiLoading = ref(false);
 const isCanAutoScroll = ref(1); 
+const dialogVisible = ref(false);
 
 const showAsr = ref(import.meta.env.VITE_APP_AI_ASR === 'true');
 const showAI = ref(import.meta.env.VITE_APP_AI_SEARCH === 'true');
@@ -845,23 +859,12 @@ const transcripts: any = ref([
 ])
 // 关键词提示
 const keywords: any = ref([
-    {
-        text: '强迫症',
-        type: 'primary',
-        count: 0,
-    },
-    // {
-    //     text: '操作流程',
-    //     type: 'success'
-    // },
     // {
-    //     text: '正面反馈',
-    //     type: 'success'
+    //     text: '强迫症',
+    //     type: 'primary',
+    //     count: 0,
     // },
-    // {
-    //     text: '满意度高',
-    //     type: 'success'
-    // }
+    
 ]);
 // 建议话术
 const suggestions = ref([
@@ -873,21 +876,21 @@ const suggestions = ref([
 const transcriptContainer = ref<HTMLElement | null>(null);
 // 监听新消息，自动滚动到底部
 // 监听新消息和内容变化，自动滚动到底部
-watch(
-    [
-        () => transcripts.value.length,
-        () => transcripts.value.map(t => t.page_content)
-    ],
-    () => {
-        nextTick(() => {
-            console.log(transcriptContainer.value, 'transcriptContainer');
-            if (transcriptContainer.value) {
-                transcriptContainer.value.scrollTop = transcriptContainer.value.scrollHeight;
-            }
-        });
-    },
-    { deep: true }
-);
+// watch(
+//     [
+//         () => transcripts.value.length,
+//         () => transcripts.value.map(t => t.page_content)
+//     ],
+//     () => {
+//         nextTick(() => {
+//             console.log(transcriptContainer.value, 'transcriptContainer');
+//             if (transcriptContainer.value) {
+//                 transcriptContainer.value.scrollTop = transcriptContainer.value.scrollHeight;
+//             }
+//         });
+//     },
+//     { deep: true }
+// );
 
 window.addEventListener('AsrMessageEvent', (msg: any) => {
     console.log(msg.detail, '接收asr消息');
@@ -1059,40 +1062,7 @@ async function getSearchDocs (text) {
 }
 
 // 推荐知识
-const recommendedKnowledge: any = ref([
-    // {
-    //     title: '智能客服系统功能配置指南',
-    //     content: '本文详细介绍了智能客服系统的核心功能配置方法，包括自动应答规则设置、多渠道接入配置、知识库管理等内容。通过本指南，您可以快速掌握系统的基础配置和高级功能设置。',
-    //     category: '使用指南',
-    //     type: 'primary',
-    //     publishTime: '2024-01-20',
-    //     reads: 1234
-    // },
-    // {
-    //     title: '常见故障诊断与解决方案',
-    //     content: '汇总了系统使用过程中最常见的技术问题和解决方案，包括登录异常、数据同步失败、性能优化等问题的处理方法。本文档由技术支持团队整理，持续更新维护。',
-    //     category: '技术支持',
-    //     type: 'warning',
-    //     publishTime: '2024-01-18',
-    //     reads: 856
-    // },
-    // {
-    //     title: '客服质量管理最佳实践',
-    //     content: '本文从客服管理者的角度，详细介绍了如何提升客服团队的服务质量，包括话术规范、服务标准、质检方案等内容，帮助管理者建立高效的客服质量管理体系。',
-    //     category: '最佳实践',
-    //     type: 'success',
-    //     publishTime: '2024-01-15',
-    //     reads: 678
-    // },
-    // {
-    //     title: '数据分析报表解读指南',
-    //     content: '详细说明了系统各类数据分析报表的含义和使用方法，包括客服效率分析、满意度趋势、问题分类统计等报表的查看和导出方式，帮助您更好地利用数据指导工作。',
-    //     category: '数据分析',
-    //     type: 'info',
-    //     publishTime: '2024-01-12',
-    //     reads: 945
-    // }
-]);
+const recommendedKnowledge: any = ref([]);
 
 
 const keys = useKeysStore().knowledgeKeys;
@@ -1142,8 +1112,33 @@ const setKeys = (keys: Array<string>) => {
 
 }
 
+const selectKnowledgeId = ref(0);
+
+const openKnowledgeAi = (id) => {
+    selectKnowledgeId.value = id;
+    dialogVisible.value = true;
+}
+
+const chatMouse = (type) => {
+    isCanAutoScroll.value = type;
+}
+
+const scrollToBottom = () => {
+    if (transcriptContainer.value) {
+        transcriptContainer.value.scrollTop = transcriptContainer.value.scrollHeight;
+    }
+}
+
+watch(transcripts, () => {
+    nextTick(() => {
+        if (isCanAutoScroll.value) scrollToBottom();
+    })
+}, {
+    deep: true
+})
+
 </script>
-<style scoped>
+<style scoped lang="scss">
 * {
     transition: height 0.3s ease-out;
 }
@@ -1211,4 +1206,30 @@ const setKeys = (keys: Array<string>) => {
 :deep(.el-icon) {
     font-size: 1.25rem;
 }
+
+.aiDialog {
+    z-index: 2033;
+    pointer-events: none;
+
+    :deep(.el-dialog) {
+        position: absolute;
+        height: 700px;
+        top: 50px;
+        right: 0;
+        margin: 0;
+        left: unset;
+        pointer-events: auto;
+    }
+}
+
+/* 隐藏所有滚动条 */
+* {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+}
+
+/* 针对Webkit浏览器（如Chrome和Safari） */
+*::-webkit-scrollbar {
+  display: none;
+}
 </style>