feat: 对接了会话的接口与会话交互

pages/chat/ChatMainList.vue

@@ -21,20 +21,10 @@
 			<!-- logo栏 -->
 			<ChatTopBanner class="chat-container-top-bannar"></ChatTopBanner>
 			
-			<ChatCardAI class="message-item message-item-ai" text="查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!">  
-						
-			</ChatCardAI>	
-			
-			  <view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
-				  <CommandWrapper text="ssss"/>
-				  
+			  <view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">				  
 				  <template v-if="item.msgType === MessageRole.AI">
 					  <ChatCardAI class="message-item message-item-ai" :text="item.msg">  
 					  	<image v-if="item.msgContent && item.msgContent.type === MessageType.IMAGE" src="/static/logo.png" style="width: 100px;height: 100px;"></image>
-						<OneFeelMK001></OneFeelMK001>
-						
-						
-						
 					  </ChatCardAI>			  
 				  </template>
 				  
@@ -83,6 +73,7 @@
 	import { MessageRole, ChatModel, MessageType } from '../../model/ChatModel';
 	
 	import OneFeelMK001 from '../module/OneFeelMK001.vue';
+	import request from '../../request/base/request';
 		
 	// 导航栏相关
 	const statusBarHeight = ref(20);
@@ -175,19 +166,8 @@
 
 		}
 		chatMsgList.value.push(newMsg)
-		
-		let type = chatMsgList.value.length % 3 === 0
-		
-		const newMsgAI: ChatModel = {
-			msgId: `msg_${chatMsgList.value.length}`,
-			msgType: MessageRole.AI,
-			msg: `我是ai,你输入的内容是：${text}`,
-			msgContent: {
-				type: type ? MessageType.IMAGE : MessageType.TEXT,
-				url: ''
-			}
-		}
-		chatMsgList.value.push(newMsgAI)
+	
+		sendChat('酒店一共有哪些温泉？')
 		
 		console.log("发送的新消息：",JSON.stringify(newMsg))
 	}
@@ -201,6 +181,94 @@
 		});
 	}
 	
+	let loadingTimer: any = null;
+	let typeWriterTimer: any = null;
+	let aiMsgBuffer = ''; // 全局缓冲区
+	let isTyping = false; // 是否正在打字
+
+	const sendChat = (text) => {
+	
+		console.log('=============会话测试')
+		const args = {
+		    conversationId: "1931957498711957505",
+		    agentId: "1",
+		    messageType: 0,
+		    messageContent: text
+		}
+		
+		// 1. 插入AI消息
+		const aiMsg: ChatModel = {
+		    msgId: `msg_${chatMsgList.value.length}`,
+		    msgType: MessageRole.AI,
+		    msg: '加载中.',
+		    msgContent: {
+		        type: MessageType.TEXT,
+		        url: ''
+		    }
+		}
+		chatMsgList.value.push(aiMsg)
+		const aiMsgIndex = chatMsgList.value.length - 1
+		
+		// 动态加载中动画
+		let dotCount = 1;
+		loadingTimer && clearInterval(loadingTimer);
+		loadingTimer = setInterval(() => {
+		    dotCount = dotCount % 3 + 1;
+		    chatMsgList.value[aiMsgIndex].msg = '加载中' + '.'.repeat(dotCount);
+		}, 400);
+		
+		aiMsgBuffer = '';
+		isTyping = false;
+		if (typeWriterTimer) {
+		    clearTimeout(typeWriterTimer);
+		    typeWriterTimer = null;
+		}
+		
+		// 2. 流式接收内容
+		request.getAIChatStream(args, (chunk) => {
+			console.log('分段内容:', chunk)
+		    if (chunk && chunk.content) {
+		        // 收到内容，停止动画
+		        if (loadingTimer) {
+		            clearInterval(loadingTimer);
+		            loadingTimer = null;
+		        }
+		        // 把新内容追加到缓冲区
+		        aiMsgBuffer += chunk.content;
+		
+		        // 启动打字机（只启动一次）
+		        if (!isTyping) {
+		            isTyping = true;
+		            chatMsgList.value[aiMsgIndex].msg = '';
+		            typeWriter();
+		        }
+		    }
+		    if (chunk && chunk.finish) {
+		        // 结尾处理：确保剩余内容全部输出
+		        const finishInterval = setInterval(() => {
+		            if (aiMsgBuffer.length === 0) {
+		                clearInterval(finishInterval);
+		                isTyping = false;
+		                scrollToBottom();
+		            }
+		        }, 50);
+		    }
+		});
+		
+		// 打字机函数
+		function typeWriter() {
+		    if (aiMsgBuffer.length > 0) {
+		        chatMsgList.value[aiMsgIndex].msg += aiMsgBuffer[0];
+		        aiMsgBuffer = aiMsgBuffer.slice(1);
+		        scrollToBottom();
+		        typeWriterTimer = setTimeout(typeWriter, 30);
+		    } else {
+		        // 等待新内容到来，不结束
+		        typeWriterTimer = setTimeout(typeWriter, 30);
+		    }
+		}  
+	}
+	
 	
 </script>