feat: 添加AI相关功能开关及UI调整

.env.development

@@ -31,3 +31,8 @@ VITE_APP_SIP_URL = 'ws://192.168.1.19:5066'
 VITE_APP_SIP_IP = '192.168.1.19'
 VITE_APP_SIP_PASSWORD = '1234'
 VITE_APP_SIP_CONTACT_URL = "@192.168.1.19;transport=ws"
+
+# AI相关功能开启或关闭
+VITE_APP_AI_ASR = true
+VITE_APP_AI_SEARCH = true
+VITE_APP_AI_API = ''

src/assets/style.css

@@ -628,10 +628,6 @@ video {
   left: 0px;
 }
 
-.left-64 {
-  left: 16rem;
-}
-
 .right-0 {
   right: 0px;
 }
@@ -640,10 +636,18 @@ video {
   right: 1.5rem;
 }
 
+.right-64 {
+  right: 16rem;
+}
+
 .top-0 {
   top: 0px;
 }
 
+.right-14 {
+  right: 3.5rem;
+}
+
 .z-10 {
   z-index: 10;
 }

src/components/main/Navbar/index.vue

@@ -12,7 +12,8 @@
         <!-- 签入界面 -->
         <telephone-login></telephone-login>
 
-        <div class="aiBtn" @click="dialogVisible = true">
+        <!-- AI按钮 -->
+        <div class="aiBtn" v-if="showAiBtn" @click="dialogVisible = true">
           <el-image :src="aiIcon" :fit="fit" ></el-image>
         </div>
 
@@ -137,6 +138,8 @@
 
   // ai 部分代码开始
   const dialogVisible = ref(false)
+  const showAiBtn = ref(import.meta.env.VITE_APP_AI_SEARCH === 'true')
+  console.log(showAiBtn.value, 'showAiBtn');
   // ai 代码结束
 
   const appStore = useAppStore()

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

@@ -1,7 +1,7 @@
 <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
 <template>
     <!-- 悬浮通话控制区 -->
-    <div class="fixed bottom-6 left-64 z-50" v-if="callPhoneFlag">
+    <div class="fixed bottom-6 right-14 z-50" v-if="callPhoneFlag">
         <!-- 悬浮通话状态卡片 -->
         <div class="bg-white rounded-lg shadow-lg p-3 flex items-center cursor-pointer hover:shadow-xl transition-shadow"
             @click="toggleCallPanel" v-if="!showCallPanel">

src/views/main/phone/index.vue

@@ -114,7 +114,7 @@
                     </el-tab-pane>
 
                     <!-- 坐席助手 -->
-                    <el-tab-pane>
+                    <el-tab-pane v-if="showAsr">
                         <template #label>
                             <div class="flex items-center">
                                 <el-icon class="mr-2">
@@ -128,11 +128,11 @@
                             <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">
+                                    <!-- <div class="flex items-center space-x-2">
                                         <el-tag :type="voiceStatus === 'active' ? 'success' : 'info'" size="small">
                                             {{ voiceStatus === 'active' ? '识别中' : '未开始' }}
                                         </el-tag>
-                                    </div>
+                                    </div> -->
                                 </div>
                                 <div class="relative mb-4">
                                     <div class="absolute left-0 top-0 w-full h-16 bg-gradient-to-b from
@@ -344,7 +344,7 @@ from-white to-transparent pointer-events-none z-10"></div>
                     <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"
+      <el-button :loading-icon="Eleme" v-if="showAI && showAsr" 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">
@@ -442,6 +442,8 @@ import knowledgeList from "@/views/main/knowledgeBase/knowledgeList/cpns/konwleg
 import { max,flatten } from 'lodash';
 import { getOfffixNuber, getCallSate } from '@/utils/index';
 
+
+
 const router = useRouter()
 let { proxy } = getCurrentInstance()
 const showCallPanel = ref(false);
@@ -449,6 +451,9 @@ const searchQuery = ref('');
 const aiLoading = ref(false);
 const isCanAutoScroll = ref(1); 
 console.log('proxy', proxy.$route);
+
+const showAsr = ref(import.meta.env.VITE_APP_AI_ASR === 'true');
+const showAI = ref(import.meta.env.VITE_APP_AI_SEARCH === 'true');
 // console.log(proxy.$route.query.callNumber)
 const telNumber = ref(proxy.$route.query.phone || proxy.$route.query.callNumber || proxy.$route.params.callNumber);
 console.log(telNumber.value)
@@ -804,267 +809,169 @@ const tabChange = (name) => {
 // 语音识别状态
 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 transcripts: any = 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([
@@ -1113,6 +1020,7 @@ watch(
 
 window.addEventListener('AsrMessageEvent', (msg: any) => {
     console.log(msg.detail, '接收asr消息');
+    if (!showAsr) return;
     if (!msg?.detail || !msg.detail.Result) return;
     const msgInfo = {
         direction: msg.detail.Number.toString().length > 4 ? 2 : 1,