feat(main): 添加语音识别功能及优化界面交互

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jiayi",
-  "version": "3.8.5",
+  "version": "1.0.0",
   "description": "在线客服管理系统",
   "author": "加一",
   "license": "MIT",
@@ -77,6 +77,7 @@
     "qrcodejs2": "^0.0.2",
     "qrcodejs2-fix": "^0.0.1",
     "sortablejs": "^1.15.1",
+    "tailwindcss": "3.4.17",
     "tinymce": "^6.8.2",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",

src/assets/style.css

@@ -588,6 +588,10 @@ video {
   }
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .visible {
   visibility: visible;
 }
@@ -636,6 +640,10 @@ video {
   right: 1.5rem;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -829,8 +837,8 @@ video {
   height: 400px;
 }
 
-.h-\[600px\] {
-  height: 600px;
+.h-\[500px\] {
+  height: 500px;
 }
 
 .h-full {
@@ -889,6 +897,10 @@ video {
   width: 24rem;
 }
 
+.w-\[100\%\] {
+  width: 100%;
+}
+
 .w-\[320px\] {
   width: 320px;
 }
@@ -1073,6 +1085,10 @@ video {
   border-radius: 9999px !important;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1188,20 +1204,38 @@ video {
   background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
 .from-blue-500 {
   --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-white {
+  --tw-gradient-from: #fff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .to-blue-600 {
   --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
 }
 
+.to-transparent {
+  --tw-gradient-to: transparent var(--tw-gradient-to-position);
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1254,6 +1288,10 @@ video {
   padding-right: 0.5rem;
 }
 
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .pt-2 {
   padding-top: 0.5rem;
 }
@@ -1363,6 +1401,11 @@ video {
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+
 .text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity, 1));

src/components/main/drawer-phone/index.vue

@@ -353,13 +353,19 @@ const initWs = () => {
                     break
                 case 'asr': // 坐席辅助
                     // incomingBack(telWSData)
-                    // asrMessageEvent(telWSData)
+                    asrMessageEvent(telWSData)
                     break
             }
         }
     })
 }
 
+const asrMessageEvent = (msg) => {
+  console.log('asrMessageEvent', msg)
+  const event = new CustomEvent("AsrMessageEvent", { detail: msg });
+  window.dispatchEvent(event);
+}
+
 onUnmounted(() => {
     if (timer) {
         clearInterval(timer);

src/views/main/phone/index.vue

@@ -15,6 +15,7 @@
                                 客户档案
                             </div>
                         </template>
+
                         <div class="space-y-4">
                             <div class="bg-white rounded-lg p-4 shadow-sm">
                                 <div class="flex justify-between items-center mb-4">
@@ -111,7 +112,78 @@
                             </div>
                         </div>
                     </el-tab-pane>
-                    
+
+                    <!-- 坐席助手 -->
+                    <el-tab-pane>
+                        <template #label>
+                            <div class="flex items-center">
+                                <el-icon class="mr-2">
+                                    <Service />
+                                </el-icon>
+                                坐席助手
+                            </div>
+                        </template>
+                        <div class="space-y-4">
+                            <!-- 实时语音识别区域 -->
+                            <div class="bg-white rounded-lg p-4 shadow-sm">
+                                <div class="flex justify-between items-center mb-4">
+                                    <h3 class="text-lg font-medium">语音识别</h3>
+                                    <div class="flex items-center space-x-2">
+                                        <el-tag :type="voiceStatus === 'active' ? 'success' : 'info'" size="small">
+                                            {{ voiceStatus === 'active' ? '识别中' : '未开始' }}
+                                        </el-tag>
+                                    </div>
+                                </div>
+                                <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 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">
+                                                <span class="text-xs text-gray-500">{{ item.timestamp }}</span>
+                                                <span class="text-xs font-medium ml-2"
+                                                    :class="[item.direction === 2  ? 'text-blue-600' : 'text-gray-600']">
+                                                    {{ item.direction === 2 ? '客户' : '坐席' }}
+                                                </span>
+                                                <div class="flex-1"></div>
+                                                <!-- <el-tag size="small" effect="plain" class="ml-2"
+                                                    :type="item.emotion === 'positive' ? 'success' : item.emotion === 'negative' ? 'danger' : 'info'">
+                                                    {{ item.emotion === 'positive' ? '积极' : item.emotion === 'negative'
+                                                    ? '消极' : '中性' }}
+                                                </el-tag> -->
+                                            </div>
+                                            <p class="text-sm text-gray-700">{{ item.page_content }}</p>
+                                        </div>
+                                    </div>
+                                    <div
+                                        class="absolute left-0 bottom-0 w-full h-16 bg-gradient-to-t from-white to-transparent pointer-events-none">
+                                    </div>
+                                </div>
+                                <!-- 关键词提示 -->
+                                <!-- <div class="space-y-2">
+                                    <h4 class="font-medium text-sm text-gray-600">关键词提示</h4>
+                                    <div class="flex flex-wrap gap-2">
+                                        <el-tag v-for="(keyword, idx) in keywords" :key="idx" :type="keyword.type"
+                                            effect="plain" size="small">
+                                            {{ keyword.text }}
+                                        </el-tag>
+                                    </div>
+                                </div> -->
+                                <!-- 建议话术 -->
+                                <!-- <div class="mt-4 space-y-2">
+                                    <h4 class="font-medium text-sm text-gray-600">建议话术</h4>
+                                    <div class="space-y-2">
+                                        <div v-for="(suggestion, idx) in suggestions" :key="idx"
+                                            class="p-2 bg-gray-50 rounded text-sm text-gray-600 cursor-pointer hover:bg-gray-100">
+                                            {{ suggestion }}
+                                        </div>
+                                    </div>
+                                </div> -->
+                            </div>
+                        </div>
+                    </el-tab-pane>
+
                     <!-- 通话记录 -->
                     <el-tab-pane>
                         <template #label>
@@ -124,34 +196,35 @@
                         </template>
                         <div class="space-y-4">
                             <!-- <el-input v-model="workOrderSearchQuery" placeholder="搜索工单..." :prefix-icon="Search" /> -->
-                            <el-date-picker v-model="callSearchQuery" 
-                                type="datetimerange" 
-                                @change="callChange"
-                                range-separator="至" 
-                                start-placeholder="开始日期" 
-                                end-placeholder="结束日期"/>
-                            <div class="space-y-2 overflow-y-auto" style="height: 100%;"  ref="callContainer" @scroll="handleCallScroll">
+                            <el-date-picker v-model="callSearchQuery" type="datetimerange" @change="callChange"
+                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
+                            <div class="space-y-2 overflow-y-auto" style="height: 100%;" ref="callContainer"
+                                @scroll="handleCallScroll">
                                 <div v-for="(item, index) in callData" :key="index"
                                     class="bg-white p-3 rounded-lg shadow-sm hover:shadow-md transition-shadow mb-4 border border-gray-100">
                                     <div class="flex justify-between items-start">
-                                        <div>  
+                                        <div>
                                             <!-- <h4 class="font-medium">{{ getOfffixNuber(item.callType==1 ? item.caller : item.callee) }}</h4> -->
                                             <div class="flex items-center gap-2 mt-1">
-                                                <span v-if="item.callerAgent || item.calleeAgent" style="margin-right: 15px;">
-                                                    坐席工号：{{ item.callType==2 ? item.callerAgent : item.calleeAgent  }}
+                                                <span v-if="item.callerAgent || item.calleeAgent"
+                                                    style="margin-right: 15px;">
+                                                    坐席工号：{{ item.callType == 2 ? item.callerAgent : item.calleeAgent }}
                                                 </span>
                                                 <span v-if="item.caller || item.callee">
-                                                    分机号：{{ item.callType==2 ? item.caller : item.callee  }}
+                                                    分机号：{{ item.callType == 2 ? item.caller : item.callee }}
                                                 </span>
-                                                
+
                                             </div>
                                         </div>
-                                        <span class="text-xs text-gray-500">{{ getCallSate(item.callType, item.isAnswer) }}</span>
+                                        <span class="text-xs text-gray-500">{{ getCallSate(item.callType, item.isAnswer)
+                                            }}</span>
                                     </div>
                                     <div class="text-sm text-gray-600 my-2 cursor-pointer">
-                                        <div v-if="item.answerTime">通话开始时间：{{item.answerTime}}</div>
-                                        <div v-if="item.hangupTime">通话结束时间：{{item.hangupTime}}</div>
-                                        <div v-if="item.answerTime && item.hangupTime">通话时长：{{getTimeLimit(item.answerTime, item.hangupTime)}}</div>
+                                        <div v-if="item.answerTime">通话开始时间：{{ item.answerTime }}</div>
+                                        <div v-if="item.hangupTime">通话结束时间：{{ item.hangupTime }}</div>
+                                        <div v-if="item.answerTime && item.hangupTime">
+                                            通话时长：{{ getTimeLimit(item.answerTime,
+                                            item.hangupTime)}}</div>
                                     </div>
                                 </div>
                                 <div v-if="callLoading" class="flex justify-center items-center py-4">
@@ -176,19 +249,18 @@
                             </div>
                         </template>
                         <div class="space-y-4">
-                            <el-date-picker v-model="orderSearchQuery" 
-                                type="datetimerange" 
-                                @change="orderChange"
-                                range-separator="至" 
-                                start-placeholder="开始日期" 
-                                end-placeholder="结束日期"/>
+                            <el-date-picker v-model="orderSearchQuery" type="datetimerange" @change="orderChange"
+                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                             <!-- <el-input v-model="workOrderSearchQuery" placeholder="搜索工单..." :prefix-icon="Search" /> -->
-                            <div class="space-y-2 overflow-y-auto" style="height: 100%;" ref="workOrderContainer" @scroll="handleScroll">
+                            <div class="space-y-2 overflow-y-auto" style="height: 100%;" ref="workOrderContainer"
+                                @scroll="handleScroll">
                                 <div v-for="(item, index) in displayedActivities" :key="index"
                                     class="bg-white p-3 rounded-lg shadow-sm hover:shadow-md transition-shadow mb-4 border border-gray-100">
                                     <div class="flex justify-between items-start">
                                         <div>
-                                            <h4 class="font-medium">{{ item.workordercatename ? item.workordercatename.substring(item.workordercatename.lastIndexOf('/') + 1) : '' }}</h4>
+                                            <h4 class="font-medium">{{ item.workordercatename ?
+                                                item.workordercatename.substring(item.workordercatename.lastIndexOf('/')
+                                                + 1) : '' }}</h4>
                                             <!-- <div class="flex items-center gap-2 mt-1">
                                                 <el-tag size="small" type="info" class="!rounded-full">{{ item.workordercatename }}</el-tag>
                                             </div> -->
@@ -209,7 +281,8 @@
                                                         <Document />
                                                     </el-icon> -->
                                                     <span>办理结果</span>
-                                                    <span class="text-gray-400 ml-2">{{ item.endtime ? `[${item.endtime}]` : '' }}</span>
+                                                    <span class="text-gray-400 ml-2">{{ item.endtime ?
+                                                        `[${item.endtime}]` : '' }}</span>
                                                 </div>
                                                 <!-- <div class="text-gray-400">处理部门：{{ item.department || '客服部' }}</div> -->
                                             </div>
@@ -268,7 +341,12 @@
             <!-- 右侧工单区 -->
             <div class="w-[65%] space-y-6">
                 <div class="bg-white rounded-lg p-6 shadow-sm">
-                    <h2 class="text-xl font-medium mb-6">工单信息</h2>
+                    <div class="flex justify-between items-center mb-6">
+      <h2 class="text-xl font-medium">工单信息</h2>
+      
+      <el-button :loading-icon="Eleme" class="flex items-center gap-1" type="primary" link @click="aiSubmit"
+                    :loading="aiLoading">智能填单</el-button>
+    </div>
                     <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
                         <el-row :gutter="20">
                             <el-col :span="12">
@@ -283,14 +361,18 @@
                             </el-col>
                         </el-row>
                         <el-form-item label="工单类型" required prop="type">
-                            <el-cascader ref="typeCascaderRef" class="w-full" v-model="form.type" :props="{value: 'id',}"  placeholder="请选择工单类型" :options="ticketTypes" filterable clearable @change="handleTypeChange" />
+                            <el-cascader ref="typeCascaderRef" class="w-full" v-model="form.type"
+                                :props="{ value: 'id', }" placeholder="请选择工单类型" :options="ticketTypes" filterable
+                                clearable @change="handleTypeChange" />
                         </el-form-item>
                         <el-form-item v-if="form.typeCode === 'complain'" label="投诉部门" required prop="department">
                             <!-- <el-select v-model="form.department" placeholder="请选择投诉部门" class="w-full">
                                 <el-option v-for="item in departments" :key="item.value" :label="item.label"
                                     :value="item.value" />
                             </el-select> -->
-                            <el-cascader ref="deptCascaderRef" class="w-full" v-model="form.department" :props="{checkStrictly: true}" placeholder="请选择投诉科室" :options="departments" filterable @change="deptChange"/>
+                            <el-cascader ref="deptCascaderRef" class="w-full" v-model="form.department"
+                                :props="{ checkStrictly: true }" placeholder="请选择投诉科室" :options="departments" filterable
+                                @change="deptChange" />
                         </el-form-item>
                         <el-form-item label="问题描述" required prop="description">
                             <el-input v-model="form.description" type="textarea" :rows="4" placeholder="请详细描述问题" />
@@ -313,7 +395,8 @@
                         </el-form-item> -->
                         <!-- 悬浮提交按钮 -->
                         <div class="bottom-0 left-0 right-0 p-4 bg-white border-t flex justify-end">
-                            <el-button type="primary" class="w-32 !rounded-button whitespace-nowrap" @click="submit">提交工单</el-button>
+                            <el-button type="primary" class="w-32 !rounded-button whitespace-nowrap"
+                                @click="submit">提交工单</el-button>
                         </div>
                     </el-form>
 
@@ -325,7 +408,7 @@
     </div>
 </template>
 <script lang="ts" setup name="CallScreen">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import moment from 'moment';
 import {
     UserFilled,
@@ -345,7 +428,9 @@ import {
     Connection,
     List,
     Notebook,
-    Edit
+    Edit,
+    Eleme,
+    Loading
 } from '@element-plus/icons-vue';
 import { hidePhone } from '@/utils/tools';
 import { ElMessage } from 'element-plus';
@@ -354,13 +439,15 @@ import { getPageListData, createPageData } from '@/api/main/system/system';
 import { userDecryptToAsterisk } from '@/utils/aes';
 import knowledgeList from "@/views/main/knowledgeBase/knowledgeList/cpns/konwlegelist/konwlegelist";
 
-import { max } from 'lodash';
-import { getOfffixNuber,getCallSate } from '@/utils/index';
+import { max,flatten } from 'lodash';
+import { getOfffixNuber, getCallSate } from '@/utils/index';
 
 const router = useRouter()
 let { proxy } = getCurrentInstance()
 const showCallPanel = ref(false);
 const searchQuery = ref('');
+const aiLoading = ref(false);
+const isCanAutoScroll = ref(1); 
 console.log('proxy', proxy.$route);
 // console.log(proxy.$route.query.callNumber)
 const telNumber = ref(proxy.$route.query.phone || proxy.$route.query.callNumber || proxy.$route.params.callNumber);
@@ -395,7 +482,7 @@ const loadMoreData = async () => {
     loading.value = true;
     await new Promise(resolve => setTimeout(resolve, 500)); // 模拟加载延迟
     const res = await getWorkOrders();
-    if (res.length === 0) {
+    if (res?.length === 0) {
         noMore.value = true;
     } else {
         pageIndex.value++;
@@ -411,15 +498,16 @@ const handleScroll = async (event: Event) => {
     }
 };
 // 通话记录开始
-const callData =ref([])
+const callData = ref([])
 const callLoading = ref(false)
 const callNoMore = ref(false);
 const loadMoreCallData = async () => {
     if (callLoading.value || callNoMore.value) return;
     callLoading.value = true;
-    await new Promise(resolve => setTimeout(resolve, 500)); // 模拟加载延迟
+    // await new Promise(resolve => setTimeout(resolve, 500)); // 模拟加载延迟
     const res = await getCalllog();
-    if (res.length === 0) {
+    console.log(res, 'res')
+    if (res?.length === 0) {
         callNoMore.value = true;
     } else {
         // displayedActivities.value.push(...newItems);
@@ -442,9 +530,9 @@ const callAnswerTime = ref()
 const callHangupTime = ref()
 function callChange(e) {
     console.log(e)
-    if (e.length>0) {
+    if (e.length > 0) {
         callAnswerTime.value = moment(e[0]).format('YYYY-MM-DD HH:mm:ss')
-        callHangupTime.value = moment(e[1]).format('YYYY-MM-DD HH:mm:ss') 
+        callHangupTime.value = moment(e[1]).format('YYYY-MM-DD HH:mm:ss')
     }
     callPageIndex.value = 1
     callData.value = []
@@ -460,17 +548,17 @@ const getCalllog = async () => {
     }
     if (callAnswerTime.value) {
         params.answerTime = callAnswerTime.value
-    } 
+    }
     if (callHangupTime) {
         params.hangupTime = callHangupTime.value
     }
     const result = await getPageListData('/call/calllog', params);
     console.log(result, 'callData');
     if (result.state === 'success') {
-        callData.value = callData.value.concat(result.data) 
+        callData.value = callData.value.concat(result.data)
         if (callData.value.length === 0) {
             callNoMore.value = true;
-        }else {
+        } else {
             callNoMore.value = false;
         }
         return result.data;
@@ -478,7 +566,7 @@ const getCalllog = async () => {
     return [];
 }
 function getTimeLimit(startTime, endTime) {
-  return proxy.getTimeDifference(startTime, endTime);
+    return proxy.getTimeDifference(startTime, endTime);
 }
 // 通话记录结束
 onMounted(() => {
@@ -520,7 +608,7 @@ const profile = ref({
 });
 const formRef: any = ref(null);
 const form = ref({
-    name: '',
+    name: '不详',
     phone: '',
     type: '',
     typeCode: '',
@@ -640,29 +728,29 @@ const submit = async () => {
                 } else {
                     ElMessage.error(data.message || '提交失败');
                 }
-                
+
             })
-            
+
         } else {
             ElMessage.error('请填写完整信息');
         }
-        
+
     });
 }
 /** 关闭按钮 */
 function close() {
-  const obj = { path: '/' }
-  proxy.$tab.closeOpenPage(obj)
+    const obj = { path: '/' }
+    proxy.$tab.closeOpenPage(obj)
 }
 const orderSearchQuery = ref()
 const createtime = ref()
 const endtime = ref()
 
-function orderChange (e){
+function orderChange(e) {
     console.log(e)
-    if (e.length>0) {
+    if (e.length > 0) {
         createtime.value = moment(e[0]).format('YYYY-MM-DD HH:mm:ss')
-        endtime.value = moment(e[1]).format('YYYY-MM-DD HH:mm:ss') 
+        endtime.value = moment(e[1]).format('YYYY-MM-DD HH:mm:ss')
     }
     pageIndex.value = 1
     displayedActivities.value = []
@@ -678,7 +766,7 @@ const getWorkOrders = async () => {
     }
     if (createtime.value) {
         params.createtime = createtime.value
-    } 
+    }
     if (endtime.value) {
         params.endtime = endtime.value
     }
@@ -689,7 +777,7 @@ const getWorkOrders = async () => {
         console.log(displayedActivities.value, 'activities');
         if (displayedActivities.value.length === 0) {
             noMore.value = true;
-        } else{
+        } else {
             noMore.value = false;
         }
         return result.data;
@@ -700,15 +788,483 @@ const getWorkOrders = async () => {
 const tabChange = (name) => {
     console.log(name, 'tabChange');
     if (name === '1') {
-    pageIndex.value = 1
+        pageIndex.value = 1
         callPageIndex.value = 1
         callData.value = []
-       getCalllog();
+        getCalllog();
     } else if (name === '2') {
         pageIndex.value = 1
         displayedActivities.value = []
         getWorkOrders();
-    } 
+    }
+
+}
+
+
+// 语音识别状态
+const voiceStatus = ref('active');
+// 识别记录
+const transcripts111 = ref([
+    {
+        role: 'customer',
+        timestamp: '14:30:24',
+        content: '您好，我想咨询一下这个智能客服系统的具体使用方法',
+        emotion: 'positive'
+    },
+    {
+        role: 'agent',
+        timestamp: '14:30:35',
+        content: '您好，很高兴为您介绍。我们的智能客服系统主要包含自动应答、多渠道接入、数据分析等核心功能，可以帮助企业提升客服效率',
+        emotion: 'positive'
+    },
+    {
+        role: 'customer',
+        timestamp: '14:30:48',
+        content: '听起来不错，那具体怎么配置自动应答功能呢？',
+        emotion: 'neutral'
+    },
+    {
+        role: 'agent',
+        timestamp: '14:31:02',
+        content: '好的，我来为您详细介绍。首先，您需要登录管理后台，点击右上角的"智能配置"按钮，在弹出的面板中选择"自动应答管理"',
+        emotion: 'positive'
+    },
+    {
+        role: 'customer',
+        timestamp: '14:31:15',
+        content: '找到了，这个界面设计得很直观',
+        emotion: 'positive'
+    },
+    {
+        role: 'agent',
+        timestamp: '14:31:28',
+        content: '是的，接下来您可以在知识库中添加常见问题和答案，系统会自动学习和匹配相似问题',
+        emotion: 'positive'
+    },
+    {
+        role: 'customer',
+        timestamp: '14:31:45',
+        content: '那如果遇到系统无法识别的问题怎么办？',
+        emotion: 'neutral'
+    },
+    {
+        role: 'agent',
+        timestamp: '14:32:00',
+        content: '这种情况系统会自动转人工客服处理，确保客户问题都能得到及时解决。同时系统会记录这些问题，用于后续知识库的优化',
+        emotion: 'positive'
+    },
+    {
+        role: 'customer',
+        timestamp: '14:32:18',
+        content: '明白了，那数据分析功能都包含哪些报表呢？',
+        emotion: 'positive'
+    },
+    {
+        role: 'agent',
+        timestamp: '14:32:35',
+        content: '我们提供了多维度的数据分析报表，包括客服效率分析、问题分类统计、客户满意度趋势、热点问题分析等',
+        emotion: 'positive'
+    },
+    {
+        role: 'customer',
+        timestamp: '14:32:52',
+        content: '这些报表数据可以导出吗？',
+        emotion: 'neutral'
+    },
+    {
+        role: 'agent',
+        timestamp: '14:33:08',
+        content: '可以的，系统支持Excel、PDF等多种格式的报表导出。您可以在报表页面右上角找到导出按钮',
+        emotion: 'positive'
+    },
+    {
+        role: 'customer',
+        timestamp: '14:33:25',
+        content: '太好了，这些功能正是我们需要的',
+        emotion: 'positive'
+    },
+    {
+        role: 'agent',
+        timestamp: '14:33:40',
+        content: '很高兴能帮到您。如果后续使用中有任何问题，随时都可以联系我们的技术支持团队',
+        emotion: 'positive'
+    },
+    {
+        role: 'customer',
+        timestamp: '14:33:55',
+        content: '好的，谢谢你细心的讲解',
+        emotion: 'positive'
+    },
+    {
+        role: 'agent',
+        timestamp: '14:34:10',
+        content: '不客气，为您提供优质的服务是我们的责任。祝您使用愉快！',
+        emotion: 'positive'
+    }
+]);
+
+const transcripts = ref([
+    {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '你好，中国热线请假。',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '喂，你好，嗯，听这样哦，我是林州这个横岛岳湖人呃',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '什么问题啊？你确实是无法统一工作呃，按照说实体上头到现在都没有工作了',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '我来问违约金怎么事儿？嗯，他说他他说是月底工资，',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '这个麻问您一下，我这边给您登记反映，您是林州市哪里的？',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '林州恒大悦府，恒大悦府',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '嗯，乐府乐是那个舒心一个舒心，一个对那个乐是吧？',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '嗯，对嗯',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '恒大乐府分几七部分啊，',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '分级，你们一期二期分不分呃，一期同大月付一期几号楼几单元，十七号楼一单元幺九零一十七号楼一单元幺九零一',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '嗯，您怎么称呼先生啊？',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '免贵？我就我我姓李李松，你让李先生吧',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '给您单心恒大悦府在林州市的哪个路段。您说一下',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '在这个这个是河南一个湖，也就他就一个湖，河南一个湖，我也不知道这个是什么路段',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '那您没有路段的话，这个位置不明确，我这边就暂不给您反映啊',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '嗯，那个是可能是那个呃华城相府，',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '哪个路段？',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '不是那个那个是呃鲁八大道，',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '鲁八大道中段什么大道，',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '鲁班哪两个字卢班鲁班嗯，',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '鲁班大道与什么路交叉口？',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '嗯，鲁班大道一零米，',
+    }, 
+    {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '你们是是什么路来的，',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '你就说恒大悦府就行了。',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '那个那个零六就你一个恒大悦府必须哪个路段，',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '我们这边也得清楚，鲁班大鲁班大道开元街道，',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '恒大悦府是吗？',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '哦，对，康阳街道的嗯，',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '行好的，这边给您登记一下啊。',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '嗯，好了，不歉。',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '喂，哎，可以了。',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '呃',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '刚才我给你他们啊嗯已经给您登记了，稍后反应呃。',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '登登记了，你登记的，我是你知道我反映的什么吗？',
+    }, {
+        direction: 1,
+        timestamp: '14:30:24',
+        page_content: '你不是家中暖气没热吗？不热吗？',
+    }, {
+        direction: 2,
+        timestamp: '14:30:24',
+        page_content: '这不是不热，是没充暖，我给物业，我给物业联系了，物业，说是呃，他们这里公司就两个人，一共十七栋楼，他问他说这个还能等待几天一栋一栋的开呢，我们的我我们的供暖费都交了。',
+    }, {
+        direction: 2,
+        page_content: '看他几天，你看他几天',
+    }, {
+        direction: 1,
+        page_content: '你给我说个定是不是嗯就是人员少，担心无法正常供暖，是不是啊？',
+    }, {
+        direction: 2,
+        page_content: '他说还得几天，你现在十五号都是显示统一功能。你到现在就你你说排了几天，还得几天的。',
+    }, {
+        direction: 1,
+        page_content: '嗯，好的，这边已经有您同小弟业主反映过了，跟您跟他同甘办理啊。',
+    }, {
+        direction: 2,
+        page_content: '嗯嗯，行好的。',
+    }
+])
+// 关键词提示
+const keywords = ref([
+    {
+        text: '产品使用方法',
+        type: 'primary'
+    },
+    {
+        text: '操作流程',
+        type: 'success'
+    },
+    {
+        text: '正面反馈',
+        type: 'success'
+    },
+    {
+        text: '满意度高',
+        type: 'success'
+    }
+]);
+// 建议话术
+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 }
+);
+
+window.addEventListener('AsrMessageEvent', (msg: any) => {
+    console.log(msg.detail, '接收asr消息');
+    if (!msg?.detail || !msg.detail.Result) return;
+    const msgInfo = {
+        direction: msg.detail.Number.toString().length > 4 ? 2 : 1,
+        page_content: msg.detail.Speech || '',
+        timestamp: '',
+    };
+    console.log(msg.detail.Time, 'msgInfo');
+    if (msg.detail.Time) {
+        const times = JSON.parse(msg.detail.Time);
+
+        console.log(times, 'msgInfo');
+        if (times?.length) {
+            const time = flatten(times)?.[0];
+            if (time) msgInfo.timestamp = formatMilliseconds(time);
+        }
+    }
+
+    console.log(msgInfo, 'msgInfo');
+
+    transcripts.value.push(msgInfo);
+})
+
+function formatMilliseconds(milliseconds) {
+    const totalSeconds = Math.floor(milliseconds / 1000);
+    const hours = Math.floor(totalSeconds / 3600).toString().padStart(2, '0');
+    const minutes = Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0');
+    const seconds = (totalSeconds % 60).toString().padStart(2, '0');
+    return `${minutes}:${seconds}`;
+}
+
+const aiSubmit = async () => {
+    aiLoading.value = true;
+    let text = transcripts.value.map((o) => o.page_content).join('');
+    if (text?.length > 10) {
+        const tx = `请从以下咨询对话中提取关键信息生成结构化工单：
+        咨询对话内容：${text}
+地理位置提取：识别来访者明确提到的居住地或当前位置
+格式：[省/市/区/街道/楼栋号/房间号]（如未提及则标记"未知"）
+注意模糊表述（如"北方城市""江浙地区"等需保留原话）
+通话内容总结：
+用第三人称概括核心问题（100字内）
+保留以下关键要素：
+• 主要症状描述（情绪/躯体/行为表现）
+• 持续时间（使用"约X周/月/年"格式）
+• 社会功能影响（工作/学习/人际关系）
+• 既往病史（如提及）
+过滤无关对话（寒暄、重复表述等）
+工单类型分类：
+根据DSM-5标准匹配最相关分类（单选）：
+[抑郁障碍] [焦虑障碍] [强迫症] [创伤应激] [人格障碍] [适应障碍] [人际关系] [发展性问题] [其他]
+【处理规范】
+优先识别直接症状陈述（如"失眠三个月""不敢见人"）
+注意隐喻表达（如"心里压着石头""像被困住"）
+存在自伤/伤人表述时自动触发危机预警协议
+多问题并存时按主诉优先级排序
+示例对话：
+[咨询师]：可以说说最近困扰您的事吗？
+[来访者]：我在杭州工作两年了，最近三个月每天失眠，开会时手抖得厉害，上周在地铁里突然喘不过气...
+
+示例输出：
+【地理位置】：浙江省杭州市
+【内容总结】：来访者诉持续三个月失眠症状，伴有社交场合手抖等躯体化表现，提及近期出现惊恐发作经历（地铁喘不过气），社会功能受损（工作受影响）
+【工单类型】： 焦虑障碍
+`;
+        const res = await getSearchDocs(tx);
+        console.log(res, 'res');
+            
+        res.split('\n').forEach((o) => {
+            if (o.startsWith('【内容总结】')) form.value.description = o.replace('【内容总结】', '').replace('：', '');
+            // if (o.startsWith('【事件地址】')) form.value.address = o.replace('【事件地址】', '').replace('：', '');
+            // if (o.startsWith('【姓名】')) form.value.customerName = o.replace('【姓名】', '').replace('：', '');
+            
+        })
+
+        aiLoading.value = false;
+        
+    } else {
+        aiLoading.value = false;
+    }
+}
+async function getSearchDocs (text) {
+    const params = {
+        query: text,
+        mode: "local_kb",
+        kb_name: "mszsk",
+        top_k: 1,
+        score_threshold: 0.5,
+        stream: true,
+        model: "glm-4",
+        temperature: 0.7,
+        max_tokens: 0,
+        prompt_name: "default",
+        return_direct: false
+    }
+    try {
+        // 发送请求
+        let response = await fetch("http://192.168.1.89:7861/chat/chat",
+            {
+                method: "post",
+                // responseType: "stream",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(params),
+            }
+        );
+
+        let resultStr = '';
+
+        // ok字段判断是否成功获取到数据流
+        if (!response.ok) {
+            throw new Error("Network response was not ok");
+        }
+        // 用来获取一个可读的流的读取器（Reader）以流的方式处理响应体数据
+        const reader = response.body.getReader();
+        // 将流中的字节数据解码为文本字符串
+        const textDecoder = new TextDecoder();
+        let result = true;
+        let sqlValue = ''
+
+        while (result) {
+            // done表示流是否已经完成读取  value包含读取到的数据块
+            const { done, value } = await reader.read();
+            if (done) {
+                result = false;
+                // console.log(resultStr, 'resultStr');
+                return resultStr;
+                break;
+            }
+            // 拿到的value就是后端分段返回的数据，大多是以data:开头的字符串
+            // 需要通过decode方法处理数据块，例如转换为文本或进行其他操作
+            const chunkText = textDecoder.decode(value).split("\n").forEach((val) => {
+                if (!val) return;
+                try {
+                    // 后端返回的流式数据一般都是以data:开头的字符，排除掉data:后就是需要的数据
+                    // 具体返回结构可以跟后端约定
+                    let text = val?.replace("data:", "") || ""
+                    const resultData = JSON.parse(text)
+                    let resultText = resultData.choices[0].delta.content
+                    
+                    resultStr += resultText
+                } catch (err) {
+                    // console.log(err)
+                }
+            });
+        }
+
+    } catch (err) {
+        console.log(err)
+
+        return err;
+    }
 
 }