Compare commits

...

1 Commits

Author SHA1 Message Date
陈昱达
2c630eac70 feat(ai-chat): 实现案例专家功能入口权限控制及消息展示优化- 修改AI聊天接口地址为本地开发环境地址
- 新增showCaseAiEntrance接口用于控制案例专家功能入口显示
- 优化消息组件中的案例引用展示逻辑,支持展开/收起功能
- 增加案例引用的上传时间、作者机构等信息展示
- 实现打字机效果的文本逐字显示功能
- 优化AI消息响应处理逻辑,支持think标签内容解析
2025-09-28 11:40:35 +08:00
6 changed files with 278 additions and 47 deletions

View File

@@ -1,4 +1,4 @@
import ajax from '@/api/boe/boeApiAjax.js'
import ajax from '@/utils/xajax.js'
/**
* AI聊天对话接口
@@ -8,7 +8,7 @@ import ajax from '@/api/boe/boeApiAjax.js'
* @returns {Promise} - 返回SSE流
*/
export function aiChat(data) {
return ajax.postJson('/xboe/m/boe/case/ai/chat', data)
return ajax.postJson('http://192.168.3.178/xboe/m/boe/case/ai/chat', data)
}
/**
@@ -18,4 +18,13 @@ export function aiChat(data) {
*/
export function getChatMessages(conversationId) {
return ajax.get('/xboe/m/boe/case/ai/messages?conversationId=' + conversationId)
}
}
/**
* 案例专家功能入口显示权限判断接口
* 判断当前登录用户是否显示"案例专家"功能入口
* @returns {Promise} - 返回是否显示功能入口的布尔值
*/
export function showCaseAiEntrance() {
return ajax.get('/xboe/m/boe/case/ai/show-entrance')
}

View File

@@ -310,7 +310,7 @@
<div class="xcontent2-minor">
<div id="fixd-box">
<div class="AI-case" style="position: relative">
<div class="AI-case" style="position: relative" v-if="showAiCase ">
<img src="../../../../public/images/case-logo.png" alt="">
<span @click="getAICase" style="position: absolute; top: 65px;left: 15px;z-index: 1;width: 40%;height: 30px;"></span>
</div>
@@ -501,6 +501,8 @@ import apiType from "@/api/modules/type.js";
import { cutFullName } from "@/utils/tools.js";
import apiPlace from "@/api/phase2/place.js"
import AICall from '@/views/portal/case/AICall.vue'
import { showCaseAiEntrance } from '@/api/boe/aiChat.js'
export default {
name: "case",
components: {
@@ -514,6 +516,7 @@ export default {
},
data() {
return {
showAiCase:false,
showAICall:false,
timeoutId: null,
isTimeData: false,
@@ -787,6 +790,7 @@ export default {
},
mounted() {
let $this = this;
this.getShowAiCase()
// if(this.speciData.length==0){
// this.specialized();
// }
@@ -871,6 +875,14 @@ export default {
},
methods: {
// 是否展示入口
getShowAiCase(){
showCaseAiEntrance().then(res=>{
this.showAiCase = res.data
})
},
allRequests() {
window.addEventListener(
"scroll",

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1759024984858" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4686" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25"><path d="M451.673935 994.395699C478.883834 1025.019147 524.254807 1024.808979 551.400292 993.928851 553.755808 991.387908 558.821323 985.796762 565.872444 977.84835 577.572838 964.659017 590.597131 949.62432 604.615947 932.998315 644.662065 885.504506 684.708678 834.717818 722.129538 782.646447 759.658524 730.424619 792.492213 679.709274 819.314991 631.458462 868.685946 542.646317 896 465.543426 896 402.285715 896 180.109449 719.301715 0 501.333333 0 283.364952 0 106.666667 180.109449 106.666667 402.285715 106.666667 465.598716 134.05152 542.80573 183.54613 631.762622 210.371803 679.976529 243.193308 730.651876 280.699364 782.833154 318.155192 834.94455 358.239268 885.77421 398.322835 933.311031 412.354743 949.952073 425.391185 965.00073 437.102468 978.202579 444.160087 986.158466 449.230214 991.754921 451.982775 994.736706L451.673935 994.395699ZM486.822684 961.321348C484.281231 958.568254 479.425084 953.207989 472.585916 945.498359 461.135889 932.591017 448.364015 917.847761 434.602351 901.527215 395.275714 854.888073 355.949587 805.019548 319.289224 754.014863 282.808749 703.260452 250.983685 654.123578 225.158316 607.707522 179.388826 525.445805 154.50505 455.290161 154.50505 402.285715 154.50505 207.039905 309.785362 48.761905 501.333333 48.761905 692.881306 48.761905 848.161617 207.039905 848.161617 402.285715 848.161617 455.246022 823.345286 525.298263 777.693969 607.419251 751.873483 653.867066 720.038415 703.039925 683.537446 753.831262 646.912604 804.794967 607.624538 854.619674 568.335977 901.215038 554.587654 917.520243 541.828177 932.24925 530.389289 945.143797 523.556841 952.845711 518.705521 958.200435 516.166694 960.950526 507.543772 970.748911 495.255793 970.80583 487.131524 961.662353L486.822684 961.321348Z" fill="#979797" p-id="4687"></path><path d="M714.955981 467.028806C723.919106 442.627955 728.565658 416.668998 728.565658 390.095238 728.565658 268.908183 632.184774 170.666667 513.29293 170.666667 394.401086 170.666667 298.020202 268.908183 298.020202 390.095238 298.020202 511.282291 394.401086 609.52381 513.29293 609.52381 549.003859 609.52381 583.510052 600.631947 614.373097 583.874409 626.032316 577.543868 630.449257 562.77782 624.238611 550.893519 618.027966 539.009218 603.541579 534.507006 591.882359 540.837549 567.900883 553.858639 541.111735 560.761905 513.29293 560.761905 420.821495 560.761905 345.858586 484.351836 345.858586 390.095238 345.858586 295.838641 420.821495 219.428572 513.29293 219.428572 605.764365 219.428572 680.727273 295.838641 680.727273 390.095238 680.727273 410.807981 677.117041 430.977316 670.154965 449.930592 665.522846 462.540883 671.796821 476.591108 684.168282 481.312651 696.53974 486.034191 710.323861 479.639095 714.955981 467.028806L714.955981 467.028806Z" fill="#979797" p-id="4688"></path></svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@@ -18,7 +18,21 @@ export default {
return {
displayText: '',
typingTimer: null,
typingSpeed: 30 // 打字机速度(毫秒/字符)
typingSpeed: 30, // 打字机速度(毫秒/字符)
showAllCaseRefers: false // 控制是否显示所有案例引用
}
},
computed: {
// 计算需要显示的案例引用
displayedCaseRefers() {
if (this.showAllCaseRefers || !this.messageData.caseRefers) {
return this.messageData.caseRefers || [];
}
return this.messageData.caseRefers.slice(0, 3);
},
// 判断是否需要显示"查看更多"按钮
shouldShowMoreButton() {
return this.messageData.caseRefers && this.messageData.caseRefers.length > 3;
}
},
watch: {
@@ -57,6 +71,10 @@ export default {
this.typingTimer = null
}
}, this.typingSpeed)
},
// 切换显示所有案例引用
toggleShowAllCaseRefers() {
this.showAllCaseRefers = !this.showAllCaseRefers;
}
},
beforeDestroy() {
@@ -72,27 +90,35 @@ export default {
<template>
<div class="messages">
{{messageData}}
<!-- 机器人消息-->
<div v-if="messageData.isBot" class="bot-message">
<div class="bot-think" v-if="messageData.thinkText" v-html="messageData.thinkText"></div>
<div v-html="displayText"></div>
<div v-html="displayText" ></div>
<div v-if="messageData.caseRefers && messageData.caseRefers.length > 0 && messageData.textCompleted">
<div class="case-refers">
<div class="case-refers-title">
<span>相关案例</span>
<span> <i class="iconfont icon-think"></i> 引用案例</span>
<span v-if="shouldShowMoreButton" class="more" @click="toggleShowAllCaseRefers">
{{ showAllCaseRefers ? '收起' : '查看更多' }}
</span>
</div>
<div class="case-refers-list">
<div class="case-refers-item" v-for="item in messageData.caseRefers">
<div class="case-refers-item" v-for="item in displayedCaseRefers" :key="item.caseId">
<div class="case-refers-item-title">
<a :href="'#case-' + item.caseId">{{ item.title }}</a>
<a :href="'#case-' + item.caseId" class="title">{{ item.title }}</a>
<span class="case-refers-item-timer">{{item.uploadTime}}</span>
</div>
<div class="case-refers-item-author">
<span class="user"></span>
<span>{{ item.authorName }}</span>
<span class="case-inter-orginInfo">{{ item.orgInfo }}</span>
</div>
<div class="case-refers-item-keywords">
<span v-for="keyword in item.keywords" :key="keyword">{{ keyword }}</span>
</div>
<div class="message-content">{{item.content}}</div>
</div>
</div>
</div>
@@ -160,6 +186,25 @@ export default {
.case-refers-title {
font-weight: bold;
margin-bottom: 5px;
display: flex;
align-items: center;
justify-content: space-between;
.icon-think {
background-image: url("./map.svg") ;
width: 15px;
height: 13px;
display: inline-block;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.more{
font-size: 10px;
padding: 2px 6px;
background-color: #F4F7FD;
border-radius: 5px;
color:#577EE1;font-weight: unset;
cursor: pointer;
}
}
.case-refers-list {
@@ -177,12 +222,49 @@ export default {
.case-refers-item-title {
font-size: 14px;
margin-bottom: 5px;
}
font-weight: 600;
color: #000;
display: flex;
align-items: flex-end;
justify-content: space-between;
.title{
max-width: 70% ;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.case-refers-item-timer{
font-size: 10px;
margin-right: 20px;
color:#cecece;
font-weight: unset!important;
}
}
.case-refers-item-author{
display: flex;
align-items: center;
.user{
background-image: url("./user.svg");
width: 15px;
height: 15px;
display: inline-block;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 5px;
}
.case-inter-orginInfo{
font-size: 10px;
color: rgba(144, 147, 153, 0.44);margin-left: 5px;
}
}
.case-refers-item-author,
.case-refers-item-keywords {
font-size: 12px;
color: #909399;
font-weight: 600;
color: #000;
}
}
}
@@ -197,5 +279,22 @@ export default {
border-radius: 5px;
margin-bottom: 10px;
}
.case-refers-item-keywords{
margin-top: 5px;
span{
padding: 1px 4px;
background-color: #F4F7FD;
border-radius: 5px;
font-size: 10px!important;
color:#577EE1
}
span + span{
margin-left: 8px;
}
}
.message-content{
font-size: 12px!important;
margin-top: 5px;
}
}
</style>

View File

@@ -55,7 +55,6 @@ export default {
methods: {
handleSend() {
if (!this.inputContent.trim() || this.disabled) return
console.log(1);
// 添加用户消息到列表
const userMessage = {
isBot: false,
@@ -80,6 +79,7 @@ export default {
const aiMessage = {
isBot: true,
text: '',
status:null,
thinkText: '',
caseRefers: [], // 添加caseRefers字段
textCompleted: false // 添加文字处理完成状态默认为false
@@ -93,7 +93,15 @@ export default {
};
// 创建POST请求
aiChat(requestData).then(response => {
fetch('/systemapi/xboe/m/boe/case/ai/chat',{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
}).then(r=>{
return r
}).then(response => {
// 处理流式响应
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
@@ -101,15 +109,101 @@ export default {
let accumulatedContent = ''; // 累积的内容用于打字机效果
let accumulatedThinkContent = ''; // 累积的思考内容
let inThinkSection = false; // 是否在思考部分
let typingTimer = null; // 打字机定时器
let thinkTypingTimer = null; // 思考内容打字机定时器
// 逐字显示文本的函数
const typeText = (message, fullContent) => {
// 如果已有定时器在运行,先清除它
if (typingTimer) {
clearInterval(typingTimer);
}
// 获取当前已显示的文本长度
const currentLength = message.text.length;
// 获取完整文本
const targetLength = fullContent.length;
// 如果已经显示完整文本,不需要继续
if (currentLength >= targetLength) {
return;
}
const typingSpeed = 50; // 每个字符的间隔时间(毫秒)
typingTimer = setInterval(() => {
// 计算下一个要显示的字符索引
const nextIndex = message.text.length + 1;
if (nextIndex <= targetLength) {
message.text = fullContent.substring(0, nextIndex);
this.$emit('update-message', message);
} else {
clearInterval(typingTimer);
typingTimer = null;
// 当打字机效果完成时检查是否应该设置textCompleted为true
// 这应该在status 4交互完成时才设置
if (message.status === 4) {
if (nextIndex >= targetLength) {
message.textCompleted = true;
}
}
}
}, typingSpeed);
};
// 逐字显示思考内容的函数
const typeThinkText = (message, fullThinkContent) => {
// 如果已有定时器在运行,先清除它
if (thinkTypingTimer) {
clearInterval(thinkTypingTimer);
}
// 获取当前已显示的文本长度
const currentLength = message.thinkText.length;
// 获取完整文本
const targetLength = fullThinkContent.length;
// 如果已经显示完整文本,不需要继续
if (currentLength >= targetLength) {
return;
}
// 从当前显示位置开始继续显示(避免清空重显)
const startIndex = currentLength;
const typingSpeed = 20; // 每个字符的间隔时间(毫秒)
thinkTypingTimer = setInterval(() => {
// 计算下一个要显示的字符索引
const nextIndex = message.thinkText.length + 1;
if (nextIndex <= targetLength) {
message.thinkText = fullThinkContent.substring(0, nextIndex);
this.$emit('update-message', message);
} else {
clearInterval(thinkTypingTimer);
thinkTypingTimer = null;
}
}, typingSpeed);
};
// 添加一个检查是否所有文本都已完成显示的函数
const isTextDisplayCompleted = (message, fullContent) => {
return message.text.length >= fullContent.length;
};
// 读取流数据
const read = () => {
reader.read().then(({ done, value }) => {
if (done) {
// 当流结束时,设置文字处理完成状态为true
aiMessage.textCompleted = true;
this.$emit('update-message', aiMessage);
this.$emit('loading', false);
// 当流结束时,等待打字机效果完成
const waitForTyping = () => {
if (!typingTimer) {
this.$emit('loading', false);
} else {
setTimeout(waitForTyping, 100);
}
};
waitForTyping();
return;
}
@@ -121,71 +215,82 @@ export default {
buffer = lines.pop(); // 保留不完整的行
for (const line of lines) {
if (line.startsWith('data: ')) {
if (line.startsWith('data:')) {
try {
const jsonData = JSON.parse(line.substring(6));
const jsonData = JSON.parse(line.substring(5));
// 根据status处理不同类型的数据
switch (jsonData.data.status) {
switch (jsonData.status) {
case 0: // 引用文件
// 处理引用文件信息
if (jsonData.data.fileRefer && jsonData.data.fileRefer.caseRefers) {
aiMessage.caseRefers = jsonData.data.fileRefer.caseRefers;
if (jsonData.fileRefer && jsonData.fileRefer.caseRefers) {
aiMessage.caseRefers = jsonData.fileRefer.caseRefers;
// 更新父组件的messageList
this.$emit('update-message', aiMessage);
}
// 从响应中获取并保存conversationId
if (jsonData.data.conversationId) {
this.conversationId = jsonData.data.conversationId;
if (jsonData.conversationId) {
this.conversationId = jsonData.conversationId;
}
break;
case 1: // 流式对话内容
// 处理&lt;think&gt;标签内容
const content = jsonData.data.content;
// 处理
const content = jsonData.content;
aiMessage.hasThink = false;
if (content.startsWith('<think>')) {
aiMessage.hasThink = true
inThinkSection = true;
accumulatedThinkContent = content.replace('&lt;think&gt;', '');
aiMessage.thinkText = accumulatedThinkContent;
} else if (content.startsWith('&lt;/think&gt;')) {
accumulatedThinkContent = content.replace('<think>', '');
// 使用打字机效果显示think内容
typeThinkText(aiMessage, accumulatedThinkContent);
} else if (content.startsWith('</think>')) {
inThinkSection = false;
accumulatedThinkContent += content.replace('</think>', '');
aiMessage.thinkText = accumulatedThinkContent;
// 使用打字机效果显示think内容
typeThinkText(aiMessage, accumulatedThinkContent);
} else if (inThinkSection) {
accumulatedThinkContent += content;
aiMessage.thinkText = accumulatedThinkContent;
// 使用打字机效果显示think内容
typeThinkText(aiMessage, accumulatedThinkContent);
} else {
// 累积内容并更新显示
// 累积内容并使用打字机效果更新显示
accumulatedContent += content;
aiMessage.text = accumulatedContent;
// 如果thinkText已经显示完整则继续使用打字机效果显示内容
if( aiMessage.hasThink){
if(aiMessage.thinkText.length >=accumulatedThinkContent.length){
typeText(aiMessage, accumulatedContent);
}
} else {
typeText(aiMessage, accumulatedContent);
}
}
// 更新父组件的messageList
this.$emit('update-message', aiMessage);
// 不在这里直接更新,让打字机效果处理更新
break;
case 2: // 回答完成
// 设置文字处理完成状态为true
aiMessage.textCompleted = true;
// 不再在这里设置textCompleted状态
// 更新父组件的messageList
this.$emit('update-message', aiMessage);
// 从响应中获取并保存conversationId
if (jsonData.data.conversationId) {
this.conversationId = jsonData.data.conversationId;
}
break;
case 3: // 返回建议
// 这里可以处理建议问题
console.log('建议问题:', jsonData.data.suggestions);
this.$emit('update-suggestions', []);
this.$emit('update-suggestions', jsonData.suggestions);
break;
case 4: // 交互完成
aiMessage.status = 4
// 从响应中获取并保存conversationId
if (jsonData.data.conversationId) {
this.conversationId = jsonData.data.conversationId;
}
this.$emit('loading', false);
// 检查文本是否已经完全显示如果是则设置textCompleted为true
if (isTextDisplayCompleted(aiMessage, accumulatedContent)) {
// aiMessage.textCompleted = true;
this.$emit('update-message', aiMessage);
}
break;
}
} catch (error) {
@@ -199,6 +304,10 @@ export default {
}).catch(error => {
console.error('SSE连接错误:', error);
// 出错时也设置文字处理完成状态
if (typingTimer) {
clearInterval(typingTimer);
typingTimer = null;
}
aiMessage.textCompleted = true;
this.$emit('loading', false);
aiMessage.text = '抱歉,网络连接出现问题,请稍后重试。';

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1759026139840" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5676" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25"><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667zM288 810.666667c0-123.733333 100.266667-224 224-224S736 686.933333 736 810.666667c-61.866667 46.933333-140.8 74.666667-224 74.666666s-162.133333-27.733333-224-74.666666z m128-384c0-53.333333 42.666667-96 96-96s96 42.666667 96 96-42.666667 96-96 96-96-42.666667-96-96z m377.6 328.533333c-19.2-96-85.333333-174.933333-174.933333-211.2 32-29.866667 51.2-70.4 51.2-117.333333 0-87.466667-72.533333-160-160-160s-160 72.533333-160 160c0 46.933333 19.2 87.466667 51.2 117.333333-89.6 36.266667-155.733333 115.2-174.933334 211.2-55.466667-66.133333-91.733333-149.333333-91.733333-243.2 0-204.8 168.533333-373.333333 373.333333-373.333333S885.333333 307.2 885.333333 512c0 93.866667-34.133333 177.066667-91.733333 243.2z" fill="#666666" p-id="5677"></path></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB