nongxiaoyu/pages/knowledge/ai-chat/index.vue

<template>
	<view class="container">
		<!-- 聊天记录区域 -->
		<scroll-view class="chat-container" scroll-y :scroll-top="scrollTop" :scroll-with-animation="true"
			@scroll="onScroll" :style="{ height: `calc(100vh - ${inputHeight}px)`,marginTop: '0'}">
			<view class="chat-list">
				<view v-for="(message, index) in chatMessages" :key="index" class="message-item" :class="{ 'message-ai': message.sender === 'ai', 'message-user': message.sender === 'user' }">
					<!-- AI消息 -->
					<template v-if="message.sender === 'ai'">
						<view class="avatar-container">
							<image class="avatar" src="/static/icons/ai-1.png" mode="aspectFill"></image>
						</view>
						<view class="message-content">
							<view class="message-bubble ai-bubble"
								:class="{'typing': message.isTyping, 'welcome': message.isWelcome || index === 0}">
								<!-- 正在输入指示器 -->
								<view v-if="message.isTyping" class="typing-indicator">
									<view class="typing-dot"></view>
									<view class="typing-dot"></view>
									<view class="typing-dot"></view>
								</view>
								
								<!-- 消息内容 -->
								<text v-else-if="message.content" class="message-text"
									:class="{'highlight': containsKeywords(message.content)}">
									{{ message.content }}
								</text>
								
								<!-- AI免责声明（非欢迎消息且非输入中显示） -->
								<text  class="ai-disclaimer">
									内容均由AI生成，仅供参考
								</text>
							</view>
							
							<!-- 操作按钮区域（仅最后一条AI消息显示） -->
							<view v-if="index === chatMessages.length - 1 && message.sender === 'ai' && !message.isTyping" class="message-actions">
								<view class="action-button" @click="regenerateMessage" hover-class="action-button-hover">
									<text class="action-icon">🔄</text>
									<text class="action-text">重新生成</text>
								</view>
							</view>
							
							<text class="message-time">{{ message.time }}</text>
						</view>
					</template>

					<!-- 用户消息 -->
					<template v-else>
						<view class="message-content user-content">
							<text class="message-time">{{ message.time }}</text>
							<view class="message-bubble user-bubble">
								<text class="message-text">{{ message.content }}</text>
							</view>
						</view>
						<view class="avatar-container">
							<image class="avatar" src="/static/images/user-avatar.svg" mode="aspectFill"></image>
						</view>
					</template>
				</view>
			</view>
		</scroll-view>
		<!-- 底部输入区 -->
		<view class="input-container" :style="{ 
			// #ifdef H5
			paddingBottom: `${safeAreaBottom + 100}rpx`
			// #endif
			// #ifdef APP-HARMONY
			paddingBottom: `${safeAreaBottom + 20}rpx`
			// #endif
		}">
			<!-- 问题建议区 -->
			<scroll-view v-if="chatMessages.length <= 3 && !inputMessage && !isProcessing" class="suggested-questions" scroll-x>
				<view v-for="(question, index) in suggestedQuestions" :key="index" class="question-chip"
					@click="useQuestion(question)">
					<text>{{ question }}</text>
				</view>
			</scroll-view>

			<view class="input-wrapper">
				<textarea class="message-input" v-model="inputMessage" placeholder="请输入您的问题..." :disabled="isProcessing"
					auto-height :maxlength="300" :style="{ maxHeight: '120rpx' }" @focus="onInputFocus"
					@confirm="submitQuestion" />
				
				<!-- 中止按钮（流式输出时显示） -->
				<view v-if="isProcessing" class="stop-button" @click="stopStreaming" hover-class="button-hover">
					<text class="stop-icon">⏹</text>
				</view>
				
				<!-- 发送按钮 -->
				<view v-else class="send-button" :class="{ 'disabled': !inputMessage.trim() }"
					@click="submitQuestion" hover-class="button-hover">
					<image class="send-icon-image"
						:src="inputMessage.trim() ? '/static/icons/chat.png' : '/static/icons/chat_off.png'"
						mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<!-- renderjs 模块容器（用于 H5/App 端 SSE 流式连接） -->
		<!--  #ifdef H5 -->
		<view 
			:change:prop="renderModule.onDataChange" 
			:prop="renderjsData"
			:onStreamData="onStreamData"
			class="renderjs-container"
		></view>
		<!-- #endif -->
	</view>
</template>
<script setup>
	import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
	import api from "@/config/api.js";
	import storage from "@/utils/storage.js";
	import { chatStreamSuggested } from "@/api/services/chart.js";
	
	// 响应式数据
	const inputMessage = ref('') // 输入框消息
	
	// 初始化函数，用于获取初始时间
	const getInitialFormattedTime = () => {
		const date = new Date()
		const hours = date.getHours().toString().padStart(2, '0')
		const minutes = date.getMinutes().toString().padStart(2, '0')
		return `${hours}:${minutes}`
	}
	
	const chatMessages = ref([{
		sender: 'ai',
		content: '您好！我是农小禹，您的智能农业助手🌱 我可以帮您解答农业种植、病虫害防治、农产品管理等方面的问题。有什么可以帮助您的吗？',
		time: getInitialFormattedTime(),
		timestamp: Date.now(),
		isWelcome: true
	}])
	
	const scrollTop = ref(0)
	const inputHeight = ref(110)
	const isProcessing = ref(false)
	const currentTypingMessage = ref(null) // 当前正在输入的消息索引
	const lastUserQuestion = ref('') // 保存最后一个用户问题，用于重新生成
	const suggestedQuestions = ref([
		'水稻插秧后如何管理？',
		'果树夏季修剪技巧？',
		'如何防治蔬菜常见病虫害？',
		'农药使用注意事项？',
		'有机肥和化肥怎么搭配使用？'
	])
	const statusBarHeight = ref(20)
	const safeAreaBottom = ref(0)
	const isIOS = ref(false)
	
	// renderjs 通信数据
	const renderjsData = ref({
		action: '', // start, stop
		url: '',
		data: {},
		timestamp: 0
	})
	
	// 消息队列和打字机效果
	const messageQueue = ref([])
	const isTypingEffect = ref(false)
	const typingTimer = ref(null)
	
	// Thinking 模式追踪
	const isInThinkingMode = ref(false)
	const sessionId = ref(null)
	const messageId = ref(null) // 消息ID，用于标识当前消息
	const thinkingBuffer = ref('') // 临时存储 Thinking 内容
	
	// 防抖函数引用
	let debouncedSubmitQuestion = null
	
	// uni-app 生命周期
	const onNavigationBarButtonTap = (e) => {
		console.log("导航栏按钮点击：", e);
	}
	
	// ========== renderjs 通信方法 ==========
	
	// renderjs 回调：接收流式数据
	const onStreamData = (data) => {
		console.log('=== Vue收到流式数据 ===');
		console.log('数据类型:', data.type);
		
		if (data.type === 'thinking') {
			console.log('进入 Thinking 模式');
			// 第一个 thinking 类型，开启 Thinking 模式
			isInThinkingMode.value = true;
			thinkingBuffer.value = data.content;
			processThinkingContent();
		} else if (data.type === 'message') {
			const contentLength = data.content ? data.content.length : 0;
			console.log('收到消息内容，长度:', contentLength);
			
			// 判断是否在 Thinking 模式中
			if (isInThinkingMode.value) {
				console.log('仍在 Thinking 模式，累积内容');
				// 仍在 Thinking 区域内，累积内容
				thinkingBuffer.value += data.content;
				processThinkingContent();
			} else {
				console.log('普通消息，添加到队列');
				// 普通消息内容
				handleMessageData(data.content);
			}
		} else if (data.type === 'end') {
			// 流式结束
			console.log("流式结束，消息id：", data.id);
			finishStreaming(data.id);
		} else if (data.type === 'error') {
			// 错误处理
			console.error('流式错误:', data.error);
			handleStreamError(data.error);
		}
	}
	
	// 处理 Thinking 内容（跳过 Thinking，只处理后续内容）
	const processThinkingContent = () => {
		if (currentTypingMessage.value === null) return;
		
		// 检查是否包含 </details> 结束标签
		if (thinkingBuffer.value.includes('</details>')) {
			// Thinking 区域结束，提取 </details> 之后的内容
			isInThinkingMode.value = false;
			
			// 提取 </details> 后面的内容
			const detailsEndIndex = thinkingBuffer.value.indexOf('</details>');
			const contentAfterThinking = thinkingBuffer.value.substring(detailsEndIndex + '</details>'.length);
			
			// 如果有内容，添加到消息队列
			if (contentAfterThinking) {
				handleMessageData(contentAfterThinking);
			}
			
			// 清空缓冲区
			thinkingBuffer.value = '';
		}
		// 如果还在 Thinking 区域内，不做任何显示，继续累积
	}
	
	// 处理消息数据（添加到队列）
	const handleMessageData = (text) => {
		console.log('handleMessageData 被调用，文本长度:', text ? text.length : 0);
		if (!text) return;
		
		// 将文本按字符添加到队列
		for (let char of text) {
			messageQueue.value.push(char);
		}
		console.log('消息队列长度:', messageQueue.value.length);
		
		// 如果打字机效果未启动，则启动
		if (!isTypingEffect.value) {
			console.log('启动打字机效果');
			startTypingEffect();
		}
	}
	
	// 启动打字机效果
	const startTypingEffect = () => {
		console.log('startTypingEffect 被调用');
		console.log('isTypingEffect:', isTypingEffect.value);
		console.log('currentTypingMessage:', currentTypingMessage.value);
		console.log('messageQueue 长度:', messageQueue.value.length);
		
		if (isTypingEffect.value) {
			console.log('打字机效果已在运行，退出');
			return;
		}
		
		if (currentTypingMessage.value === null) {
			console.log('没有当前消息，退出');
			return;
		}
		
		if (messageQueue.value.length === 0) {
			console.log('消息队列为空，退出');
			return;
		}
		
		isTypingEffect.value = true;
		
		// 关闭 typing 指示器
		if (chatMessages.value[currentTypingMessage.value]) {
			chatMessages.value[currentTypingMessage.value].isTyping = false;
			console.log('已关闭 typing 指示器');
		}
		
		console.log('开始打字机效果，消息索引:', currentTypingMessage.value);
		
		const processQueue = () => {
			if (messageQueue.value.length > 0 && currentTypingMessage.value !== null) {
				// 每次取出一个字符
				const char = messageQueue.value.shift();
				const currentMsg = chatMessages.value[currentTypingMessage.value];
				
				if (currentMsg) {
					const currentContent = currentMsg.content || '';
					currentMsg.content = currentContent + char;
					
					// 每20个字符滚动一次，优化性能
					if (currentContent.length % 20 === 0) {
						scrollToBottom();
					}
				}
				
				// 继续处理队列
				typingTimer.value = setTimeout(processQueue, 10);
			} else if (messageQueue.value.length === 0 && isProcessing.value) {
				// 队列为空但还在处理中，等待新数据
				typingTimer.value = setTimeout(processQueue, 50);
			} else {
				// 队列为空且不在处理中，停止打字机效果
				console.log('队列处理完成，停止打字机效果');
				isTypingEffect.value = false;
			}
		};
		
		processQueue();
	}
	
	// 停止打字机效果
	const stopTypingEffect = () => {
		isTypingEffect.value = false;
		if (typingTimer.value) {
			clearTimeout(typingTimer.value);
			typingTimer.value = null;
		}
		
		// 清空队列，将剩余内容一次性显示
		if (messageQueue.value.length > 0 && currentTypingMessage.value !== null) {
			const remainingText = messageQueue.value.join('');
			const currentContent = chatMessages.value[currentTypingMessage.value].content || '';
			chatMessages.value[currentTypingMessage.value].content = currentContent + remainingText;
			messageQueue.value = [];
		}
	}
	
	// 完成流式输出
	const finishStreaming = (id) => {
		console.log("消息id2:",id);
		stopTypingEffect();
		
		if (currentTypingMessage.value !== null) {
			chatMessages.value[currentTypingMessage.value].isTyping = false;
			currentTypingMessage.value = null;
		}
		
		// 重置 Thinking 模式状态
		isInThinkingMode.value = false;
		thinkingBuffer.value = '';
		
		isProcessing.value = false;
		scrollToBottom();
		
		// 获取下一轮建议问题
		// fetchSuggestedQuestions({user: sessionId.value, messageId: id});
	}
	
	// 处理流式错误
	const handleStreamError = (error) => {
		console.error('流式错误:', error);
		stopTypingEffect();
		
		// 移除正在输入的消息
		if (currentTypingMessage.value !== null) {
			chatMessages.value.splice(currentTypingMessage.value, 1);
			currentTypingMessage.value = null;
		}
		
		// 重置 Thinking 模式状态
		isInThinkingMode.value = false;
		thinkingBuffer.value = '';
		
		isProcessing.value = false;
		handleError({ message: error || '网络异常，请稍后重试' });
	}

	// ========== 用户交互方法 ==========
	
	// 发送消息
	const submitQuestion = () => {
		if (!storage.getHasLogin()) {
			uni.showModal({
				title: '提示',
				content: '您还未登录，请先登录',
				confirmText: '去登录',
				cancelText: '取消',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/index'
						});
					}
				},
			});
			return;
		}
		
		if (!inputMessage.value.trim() || isProcessing.value) return;

		const question = inputMessage.value.trim();
		lastUserQuestion.value = question; // 保存问题用于重新生成
		inputMessage.value = '';
		
		// 添加用户消息
		chatMessages.value.push({
			sender: 'user',
			content: question,
			time: getCurrentTime(),
			timestamp: Date.now()
		});

		// 添加 AI 正在输入的消息
		const typingMessageIndex = chatMessages.value.push({
			sender: 'ai',
			content: '',
			time: getCurrentTime(),
			timestamp: Date.now(),
			isTyping: true
		}) - 1;

		currentTypingMessage.value = typingMessageIndex;
		isProcessing.value = true;
		scrollToBottom();
		
		// 通过 renderjs 发起 SSE 请求
		startSSERequest(question);
	}
	
	// 启动 SSE 请求（通过 renderjs）
	const startSSERequest = (question) => {
		const url = api.serve + '/uniapp/dify/chat/stream';
		sessionId.value = Date.now().toString()
		const requestData = {
			query: question,
			user: 'user_' + sessionId.value
		};
		
		// #ifdef H5 
		// 更新 renderjs 数据，触发 SSE 连接
		renderjsData.value = {
			action: 'start',
			url: url,
			data: requestData,
			token: storage.getAccessToken(),
			timestamp: Date.now()
		};
		// #endif
		
		// #ifdef APP-HARMONY || APP-PLUS
		// 鸿蒙等不支持 renderjs 的平台，使用原生方式
		startSSERequestNative(url, requestData);
		// #endif
	}
	
	// 鸿蒙端 SSE 请求任务引用
	let sseRequestTask = null;
	
	// 原生方式处理 SSE 请求（用于鸿蒙等平台）
	const startSSERequestNative = (url, data) => {
		console.log('[鸿蒙端] 开始 SSE 请求:', url);
		
		// 创建请求任务
		sseRequestTask = uni.request({
			url: url,
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				'Accept': 'text/event-stream',
				'Authorization': `Bearer ${storage.getAccessToken()}`
			},
			data: data,
			enableChunked: true, // 启用分块传输
			responseType: 'text', // 接收文本数据
			success: (res) => {
				console.log('[鸿蒙端] 请求成功，状态码:', res.statusCode);
				console.log('[鸿蒙端] 响应数据类型:', typeof res.data);
				
				if (res.statusCode === 200 && res.data) {
					console.log('[鸿蒙端] 响应数据长度:', res.data.length);
					// 处理 SSE 格式的响应数据
					parseSSEResponse(res.data);
				} else {
					console.error('[鸿蒙端] 请求失败或无数据');
					handleStreamError('请求失败，状态码: ' + res.statusCode);
				}
			},
			fail: (err) => {
				console.error('[鸿蒙端] 请求失败:', err);
				handleStreamError(err.errMsg || '网络异常');
			}
		});
		
		// 监听数据接收（如果支持分块传输）
		if (sseRequestTask && typeof sseRequestTask.onChunkReceived === 'function') {
			console.log('[鸿蒙端] 支持分块接收，启用监听');
			sseRequestTask.onChunkReceived((chunkRes) => {
				console.log('[鸿蒙端] 收到数据块');
				if (chunkRes && chunkRes.data) {
					parseSSEResponseChunk(chunkRes.data);
				}
			});
		} else {
			console.log('[鸿蒙端] 不支持分块接收，将在 success 回调中处理完整响应');
		}
	}
	
	// 解析 SSE 格式的响应数据（处理分块数据）
	let sseBuffer = ''; // 用于累积不完整的行
	
	const parseSSEResponseChunk = (chunkText) => {
		if (!chunkText || typeof chunkText !== 'string') {
			console.log('[鸿蒙端] 无效的数据块');
			return;
		}
		
		console.log('[鸿蒙端] 处理数据块，长度:', chunkText.length);
		
		// 累积到缓冲区
		sseBuffer += chunkText;
		
		// 按行分割
		const lines = sseBuffer.split('\n');
		
		// 保留最后一行（可能不完整）
		sseBuffer = lines.pop() || '';
		
		// 处理完整的行
		processSSELines(lines);
	}
	
	// 解析 SSE 格式的响应数据（处理完整响应）
	const parseSSEResponse = (responseText) => {
		if (!responseText || typeof responseText !== 'string') {
			console.log('[鸿蒙端] 无效的响应数据');
			finishStreaming();
			return;
		}
		
		console.log('[鸿蒙端] 开始解析完整 SSE 数据，长度:', responseText.length);
		
		// 按行分割
		const lines = responseText.split('\n');
		
		// 处理所有行
		processSSELines(lines);
		
		// 清空缓冲区
		sseBuffer = '';
	}
	
	// 处理 SSE 行数据
	const processSSELines = (lines) => {
		let messageId = null;
		
		for (let i = 0; i < lines.length; i++) {
			const line = lines[i].trim();
			
			if (!line) continue; // 跳过空行
			
			console.log(`[鸿蒙端] 处理第 ${i} 行:`, line.substring(0, 100));
			
			// 解析 event: 行
			if (line.startsWith('event:')) {
				// event: message
				continue;
			}
			
			// 解析 data: 行
			if (line.startsWith('data:')  || line !== '') {
				let data = line;
				if (line.startsWith('data:')) {
					data = data.substring(5).trim();
				}
				 			
				if (!data || data.includes("ping")) continue;
				
				console.log('[鸿蒙端] 解析后的数据，长度:', data.length);
				
				// 过滤掉 MESSAGE_END 等元数据事件（JSON 格式）
				if (data.startsWith('{') && data.includes('"eventType"')) {
					try {
						const jsonData = JSON.parse(data);
						console.log('[鸿蒙端] JSON 事件:', jsonData.eventType || jsonData.event);
						
						// 如果是 MESSAGE_END 事件，通知结束
						if (jsonData.eventType === 'MESSAGE_END' || jsonData.event === 'message_end') {
							console.log('[鸿蒙端] 收到 MESSAGE_END 事件，流式结束');
							messageId = jsonData.id;
							// 不要在这里 continue，继续处理后续行
							continue;
						}
						
						// 其他元数据事件也忽略
						if (jsonData.eventType || jsonData.event) {
							console.log('[鸿蒙端] 跳过元数据事件');
							continue;
						}
					} catch (e) {
						console.log('[鸿蒙端] JSON 解析失败，作为普通文本处理');
						// 不是 JSON，继续处理
					}
				}
				
				// 检查是否是 Thinking 内容
				if (data.includes('<details') && data.includes('<summary>')) {
					console.log('[鸿蒙端] 发送 thinking 类型数据');
					onStreamData({ type: 'thinking', content: data });
				} else if (data) {
					// 普通消息内容 - 逐行发送，不累积
					console.log('[鸿蒙端] 发送 message 类型数据，长度:', data.length);
					onStreamData({ type: 'message', content: data });
				}
			}
		}
		
		// 如果找到了 messageId，结束流式输出
		if (messageId) {
			console.log('[鸿蒙端] 数据处理完成，结束流式输出');
			setTimeout(() => {
				onStreamData({ type: 'end', id: messageId });
			}, 300);
		} else {
			// 如果没有 messageId，延迟结束（兼容处理）
			console.log('[鸿蒙端] 无 messageId，延迟结束');
			setTimeout(() => {
				if (isProcessing.value) {
					onStreamData({ type: 'end', id: null });
				}
			}, 1000);
		}
	}
	
	// 停止鸿蒙端的 SSE 请求
	const stopSSERequestNative = () => {
		if (sseRequestTask) {
			console.log('[鸿蒙端] 中止请求');
			sseRequestTask.abort();
			sseRequestTask = null;
		}
	}
	
	// 停止流式输出
	const stopStreaming = () => {
		console.log('用户中止流式输出');
		
		// #ifdef H5
		// 通知 renderjs 停止
		renderjsData.value = {
			action: 'stop',
			timestamp: Date.now()
		};
		// #endif
		
		// #ifdef APP-HARMONY
		// 停止鸿蒙端的请求
		stopSSERequestNative();
		// #endif
		
		// 立即停止打字机效果并完成
		finishStreaming();
		
		uni.showToast({
			title: '已中止',
			icon: 'none',
			duration: 1500
		});
	}
	
	// 重新生成回复
	const regenerateMessage = () => {
		if (!lastUserQuestion.value || isProcessing.value) return;
		
		// 删除最后一条 AI 消息
		if (chatMessages.value.length > 0 && chatMessages.value[chatMessages.value.length - 1].sender === 'ai') {
			chatMessages.value.pop();
		}
		
		// 添加新的正在输入消息
		const typingMessageIndex = chatMessages.value.push({
			sender: 'ai',
			content: '',
			time: getCurrentTime(),
			timestamp: Date.now(),
			isTyping: true
		}) - 1;

		currentTypingMessage.value = typingMessageIndex;
		isProcessing.value = true;
		messageQueue.value = [];
		
		// 重置 Thinking 模式状态
		isInThinkingMode.value = false;
		thinkingBuffer.value = '';
		
		scrollToBottom();
		
		// 重新发起请求
		startSSERequest(lastUserQuestion.value);
	}

	// ========== 工具方法 ==========
	
	// 错误处理
	const handleError = (error) => {
		let errorMessage = '发生错误';
		if (error.errMsg) {
			errorMessage = error.errMsg;
		} else if (error.message) {
			errorMessage = error.message;
		}

		uni.showToast({
			title: errorMessage,
			icon: 'none',
			duration: 2000
		});
	}

	// 防抖函数
	const debounce = (func, wait) => {
		let timeout;
		return (...args) => {
			clearTimeout(timeout);
			timeout = setTimeout(() => {
				func.apply(null, args);
			}, wait);
		};
	}
	
	// 输入框获取焦点
	const onInputFocus = () => {
		nextTick(() => {
			scrollToBottom();
		});
	}
	
	// 滚动到底部
	const scrollToBottom = () => {
		nextTick(() => {
			const query = uni.createSelectorQuery();
			query.select('.chat-list').boundingClientRect(data => {
				if (data) {
					scrollTop.value = data.height + 1000;
				}
			}).exec();
		});
	}
	
	const onScroll = (e) => {
		// 可以添加滚动事件处理
	}
	
	const getCurrentTime = () => {
		return getFormattedTime(new Date());
	}
	
	const getFormattedTime = (date) => {
		const hours = date.getHours().toString().padStart(2, '0');
		const minutes = date.getMinutes().toString().padStart(2, '0');
		return `${hours}:${minutes}`;
	}
	
	const useQuestion = (question) => {
		inputMessage.value = question;
	}
	
	const containsKeywords = (text) => {
		const keywords = ['水稻', '小麦', '玉米', '病虫害', '农药', '化肥', '有机肥', '种植技术'];
		return keywords.some(keyword => text.includes(keyword));
	}
	
	const formatMessage = (text) => {
		// 将文本中的换行符转换为<br>标签
		return text.replace(/\n/g, '<br>');
	}
	
	const initMessages = () => {
		// 确保消息有时间戳
		chatMessages.value.forEach(msg => {
			if (!msg.timestamp) {
				msg.timestamp = new Date().getTime();
			}
		});

		// 按时间排序
		chatMessages.value.sort((a, b) => a.timestamp - b.timestamp);
	}
	
	const showDateSeparator = (index) => {
		// 判断是否需要显示日期分割线
		if (index === 0) return true;

		const currentMsg = chatMessages.value[index];
		const prevMsg = chatMessages.value[index - 1];

		// 如果两条消息相隔超过30分钟，或者是不同日期，显示日期分割线
		return isDifferentDay(currentMsg.timestamp, prevMsg.timestamp) ||
			(currentMsg.timestamp - prevMsg.timestamp > 30 * 60 * 1000);
	}
	
	const isDifferentDay = (timestamp1, timestamp2) => {
		const date1 = new Date(timestamp1);
		const date2 = new Date(timestamp2);

		return date1.getDate() !== date2.getDate() ||
			date1.getMonth() !== date2.getMonth() ||
			date1.getFullYear() !== date2.getFullYear();
	}
	
	const formatDateSeparator = (timestamp) => {
		const now = new Date();
		const msgDate = new Date(timestamp);

		// 今天
		if (isSameDay(msgDate, now)) {
			return '今天 ' + getFormattedTime(msgDate);
		}

		// 昨天
		const yesterday = new Date(now);
		yesterday.setDate(now.getDate() - 1);
		if (isSameDay(msgDate, yesterday)) {
			return '昨天 ' + getFormattedTime(msgDate);
		}

		// 一周内
		const oneWeekAgo = new Date(now);
		oneWeekAgo.setDate(now.getDate() - 7);
		if (msgDate >= oneWeekAgo) {
			const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			return weekdays[msgDate.getDay()] + ' ' + getFormattedTime(msgDate);
		}

		// 其他日期
		return msgDate.getFullYear() + '年' + (msgDate.getMonth() + 1) + '月' + msgDate.getDate() + '日 ' + getFormattedTime(msgDate);
	}
	
	const isSameDay = (date1, date2) => {
		return date1.getDate() === date2.getDate() &&
			date1.getMonth() === date2.getMonth() &&
			date1.getFullYear() === date2.getFullYear();
	}
	
	// 获取下一轮建议问题列表
	const fetchSuggestedQuestions = async (data) => {
		console.log("获取下一轮建议问题参数",data);
		try {
			const response = await chatStreamSuggested(data);
			
			if (response && response.data) {
				// 假设接口返回的数据格式为 { data: ["问题1", "问题2", ...] }
				if (Array.isArray(response.data) && response.data.length > 0) {
					suggestedQuestions.value = response.data;
				} else if (response.data.questions && Array.isArray(response.data.questions)) {
					// 或者接口返回 { data: { questions: [...] } }
					suggestedQuestions.value = response.data.questions;
				}
			}
		} catch (error) {
			console.error('获取建议问题失败:', error);
			// 失败时保持默认建议问题，不影响用户体验
		}
	}
	
	// 生命周期钩子
	onMounted(() => {
		// 初始化防抖函数
		debouncedSubmitQuestion = debounce(submitQuestion, 300)
		
		// 获取系统信息
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight || 20;
		isIOS.value = systemInfo.platform === 'ios';
		
		// 计算底部安全区域（包含 tabbar 高度）
		const safeAreaInsetsBottom = systemInfo.safeAreaInsets ? (systemInfo.safeAreaInsets.bottom || 0) : 0;
		// 转换为 rpx，并确保至少有基础间距
		safeAreaBottom.value = Math.max(safeAreaInsetsBottom * 2, 0);

		// 初始化消息
		initMessages();

		// 滚动到底部
		nextTick(() => {
			scrollToBottom();
		});
		
		// 监听来自 renderjs 的自定义事件（仅在支持的平台）
		// #ifdef H5 || APP-PLUS
		if (typeof window !== 'undefined') {
			window.addEventListener('renderjs-stream-data', (event) => {
				console.log('通过事件接收到数据:', event.detail);
				onStreamData(event.detail);
			});
		}
		// #endif
	})
	
	// 组件销毁时清理资源
	onBeforeUnmount(() => {
		// 停止打字机效果
		stopTypingEffect();
		
		// 通知 renderjs 停止连接
		if (isProcessing.value) {
			renderjsData.value = {
				action: 'stop',
				timestamp: Date.now()
			};
		}
		
		// 清理消息队列
		messageQueue.value = [];
		
		// 移除事件监听器（仅在支持的平台）
		// #ifdef H5 || APP-PLUS
		if (typeof window !== 'undefined') {
			window.removeEventListener('renderjs-stream-data', onStreamData);
		}
		// #endif
	})
</script>


<!--  #ifdef H5 || APP-PLUS -->
<script module="renderModule" lang="renderjs">
	// renderjs 模块状态
	let eventSource = null;
	let reader = null;
	let isReading = false;
	let eventType = '';
	let dataBuffer = [];
	let messageIdS = null;
	
	// 启动 SSE 连接
	async function startSSE(config, ownerInstance) {
		// 先停止之前的连接
		stopSSE();
		
		const { url, data, token } = config;
		
		try {
			// 使用 fetch API 建立 SSE 连接
			const response = await fetch(url, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					'Accept': 'text/event-stream',
					'Authorization': `Bearer ${token}`
				},
				body: JSON.stringify(data)
			});
			
			if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`);
			}
			
			// 获取 reader
			reader = response.body.getReader();
			const decoder = new TextDecoder('utf-8');
			isReading = true;
			
			let buffer = '';
			eventType = '';          // 当前事件名
			dataBuffer = [];         // 当前事件的所有 data 行
			
			// 读取流式数据
			while (isReading) {
				const { done, value } = await reader.read();
				
				if (done) {
					console.log('SSE 流结束');
					if (typeof window !== 'undefined') {
						window.dispatchEvent(new CustomEvent('renderjs-stream-data', {
							detail: { type: 'end', id: messageIdS }
						}));
					}
					break;
				}
				
				// 解码数据
				buffer += decoder.decode(value, { stream: true });
				
				// 按行处理
				const lines = buffer.split('\n');
				buffer = lines.pop() || ''; // 保留最后不完整的行
				
				for (const line of lines) {
					processLine(line, ownerInstance);
				}
			}
			
		} catch (error) {
			console.error('SSE 连接错误:', error);
			if (typeof window !== 'undefined') {
				window.dispatchEvent(new CustomEvent('renderjs-stream-data', {
					detail: { 
						type: 'error', 
						error: error.message || '连接失败' 
					}
				}));
			}
		} finally {
			stopSSE();
		}	
	}
	
	// 处理单行数据
	function processLine(line, ownerInstance) {
		if (!line.trim()) return;
		
		console.log('[renderjs] 处理行数据:', line);
		
		// 解析 SSE 格式
		if (line.startsWith('event:')) {
			// event: message
			return;
		}
		
		if (line.startsWith('data:') || line !== '') {
			let data = line;
			if (line.startsWith('data:')) {
				data = data.substring(5).trim();
			}
			 			
			if (!data || data.includes("ping")) return;
			
			console.log('[renderjs] 解析后的数据:', data);
			
			// 过滤掉 MESSAGE_END 等元数据事件（JSON 格式）
			if (data.startsWith('{') && data.includes('"eventType"')) {
				try {
					const jsonData = JSON.parse(data);
					console.log('[renderjs] JSON 事件:', jsonData);
					// 如果是 MESSAGE_END 事件，通知结束
					if (jsonData.eventType === 'MESSAGE_END' || jsonData.event === 'message_end') {
						console.log('[renderjs] 收到 MESSAGE_END 事件，流式结束');
						messageIdS = jsonData.id;
						if (typeof window !== 'undefined') {
							window.dispatchEvent(new CustomEvent('renderjs-stream-data', {
								detail: { type: 'end', id: messageIdS }
							}));
						}
						return;
					}
					// 其他元数据事件也忽略
					return;
				} catch (e) {
					console.log('[renderjs] JSON 解析失败，作为普通文本处理');
					// 不是 JSON，继续处理
				}
			}
			
			// 检查是否是 Thinking 内容
			if (data.includes('<details') && data.includes('<summary>')) {
				console.log('[renderjs] 发送 thinking 类型数据');
				// 使用自定义事件发送数据
				if (typeof window !== 'undefined') {
					window.dispatchEvent(new CustomEvent('renderjs-stream-data', {
						detail: {
							type: 'thinking',
							content: data
						}
					}));
				}
			} else {
				console.log('[renderjs] 发送 message 类型数据，长度:', data.length);
				// 普通消息内容
				if (typeof window !== 'undefined') {
					window.dispatchEvent(new CustomEvent('renderjs-stream-data', {
						detail: {
							type: 'message',
							content: data
						}
					}));
				}
			}
		}
	}
	
	// 停止 SSE 连接
	function stopSSE() {
		isReading = false;
		
		if (reader) {
			try {
				reader.cancel();
			} catch (e) {
				console.error('关闭 reader 失败:', e);
			}
			reader = null;
		}
		
		if (eventSource) {
			eventSource.close();
			eventSource = null;
		}
	}
	
	// 导出方法供 Vue 调用
	export default {
		methods: {
			// 监听 prop 变化
			onDataChange(newValue, oldValue, ownerInstance) {
				if (!newValue || !newValue.action) return;
				
				if (newValue.action === 'start') {
					startSSE(newValue, ownerInstance);
				} else if (newValue.action === 'stop') {
					stopSSE();
				}
			}
		}
	};
</script>
<!-- #endif -->

<style>
	/* 容器样式 */
	.container {
		position: relative;
		min-height: 100vh;
		background-color: #f5f5f5;
		overflow: hidden;
		/* 防止内容溢出 */
	}

	/* 聊天容器 */
	.chat-container {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #f8f8f8;
		background-image: url('/static/images/chat-bg-pattern.png');
		background-size: 300rpx;
		background-blend-mode: overlay;
		background-opacity: 0.05;
		-webkit-overflow-scrolling: touch;
		/* 增强iOS滚动体验 */
	}

	.chat-list {
		padding-bottom: 30rpx;
	}

	/* 消息项 */
	.message-item {
		display: flex;
		margin-bottom: 30rpx;
		position: relative;
	}

	.message-ai {
		justify-content: flex-start;
	}

	.message-user {
		justify-content: flex-end;
	}

	/* 头像 */
	.avatar-container {
		width: 90rpx;
		height: 90rpx;
		flex-shrink: 0;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: #e0e0e0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		object-fit: cover;
	}

	/* 消息内容 */
	.message-content {
		max-width: 70%;
		margin: 0 20rpx;
		display: flex;
		flex-direction: column;
	}

	.user-content {
		align-items: flex-end;
	}

	.message-bubble {
		padding: 24rpx;
		border-radius: 24rpx;
		position: relative;
		margin-bottom: 10rpx;
		word-wrap: break-word;
		min-width: 80rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		max-width: 100%;
	}

	.ai-bubble {
		background-color: #e8f5e9;
		border-top-left-radius: 4rpx;
	}

	.user-bubble {
		background-color: #e3f2fd;
		border-top-right-radius: 4rpx;
	}

	.message-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		word-break: break-all;
	}

	.message-time {
		font-size: 22rpx;
		color: #999;
	}
	
	/* 消息操作按钮 */
	.message-actions {
		display: flex;
		gap: 16rpx;
		margin-top: 12rpx;
	}
	
	.action-button {
		display: flex;
		align-items: center;
		padding: 8rpx 16rpx;
		background-color: #f5f5f5;
		border-radius: 20rpx;
		border: 1rpx solid #e0e0e0;
		transition: all 0.2s;
	}
	
	.action-button-hover {
		background-color: #e8f5e9;
		border-color: #a5d6a7;
	}
	
	.action-icon {
		font-size: 24rpx;
		margin-right: 6rpx;
	}
	
	.action-text {
		font-size: 24rpx;
		color: #666;
	}

	/* 输入区域 */
	.input-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		/* z-index: 999; */
		/* 确保在 tabbar 之上 */
	}

	.input-wrapper {
		display: flex;
		align-items: flex-end;
	}

	.message-input {
		flex: 1;
		min-height: 70rpx;
		max-height: 120rpx;
		border-radius: 35rpx;
		background-color: #f5f5f5;
		padding: 15rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		border: 1rpx solid #e0e0e0;
		line-height: 1.4;
	}

	.send-button {
		margin-left: 16rpx;
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		background-color: transparent;
		background-image: none;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
		position: relative;
		align-self: center;
	}

	.send-button.disabled {
		background-color: transparent;
		background-image: none;
		opacity: 1;
	}
	
	/* 中止按钮 */
	.stop-button {
		margin-left: 16rpx;
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		background-color: #ff5252;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
		align-self: center;
	}
	
	.stop-icon {
		font-size: 36rpx;
		color: white;
	}

	.button-hover {
		transform: scale(0.95);
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.95);
		}

		100% {
			transform: scale(1);
		}
	}

	.send-button:active:not(.disabled) {
		animation: pulse 0.3s ease-in-out;
	}

	/* 删除或注释掉之前的样式 */
	.send-icon {
		display: none;
	}

	.send-icon:before {
		display: none;
	}

	.send-icon-text {
		display: none;
	}

	/* 推荐问题区域 */
	.suggested-questions {
		display: flex;
		white-space: nowrap;
		margin-bottom: 15rpx;
		padding: 5rpx 0;
	}

	.question-chip {
		display: inline-block;
		padding: 12rpx 20rpx;
		margin-right: 15rpx;
		background-color: #e8f5e9;
		color: #4CAF50;
		font-size: 24rpx;
		border-radius: 30rpx;
		border: 1rpx solid #a5d6a7;
	}

	/* AI正在输入的样式 */
	.message-bubble.ai-bubble.typing {
		background-color: #f0f0f0;
	}

	.typing-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
		padding: 0 20rpx;
	}

	.typing-dot {
		width: 10rpx;
		height: 10rpx;
		margin: 0 5rpx;
		background-color: #4CAF50;
		border-radius: 50%;
		opacity: 0.5;
		animation: typingAnimation 1.4s infinite both;
	}

	.typing-dot:nth-child(2) {
		animation-delay: 0.2s;
	}

	.typing-dot:nth-child(3) {
		animation-delay: 0.4s;
	}

	@keyframes typingAnimation {
		0% {
			opacity: 0.3;
			transform: translateY(0);
		}

		50% {
			opacity: 1;
			transform: translateY(-5rpx);
		}

		100% {
			opacity: 0.3;
			transform: translateY(0);
		}
	}

	/* 关键词高亮 */
	.message-text.highlight {
		color: #2E7D32;
		font-weight: 500;
	}
	
	/* AI免责声明 */
	.ai-disclaimer {
		display: block;
		font-size: 20rpx;
		color: #999;
		margin-top: 12rpx;
		padding-top: 8rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
		line-height: 1.4;
	}

	/* 欢迎消息特殊样式 */
	.welcome {
		background-color: #e3f2fd !important;
		border-left: none !important;
		border-radius: 24rpx !important;
	}

	/* 日期分割线样式 */
	.date-separator {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
	}

	.date-separator text {
		background-color: rgba(0, 0, 0, 0.1);
		color: #666;
		font-size: 24rpx;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
	}

	/* 纸飞机图标 */
	.plane-svg {
		display: none;
	}

	.send-icon-image {
		width: 76rpx;
		height: 76rpx;
	}

	.material-icon {
		font-family: 'Material Icons';
		font-weight: normal;
		font-style: normal;
		font-size: 48rpx;
		line-height: 1;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		-webkit-font-smoothing: antialiased;
		color: white;
	}

	/* 删除不需要的导航栏样式 */
	.custom-navbar {
		display: none;
	}

	.navbar-bg,
	.navbar-content,
	.navbar-left,
	.navbar-title,
	.navbar-right,
	.back-icon,
	.arrow-left {
		display: none;
	}
	
	/* renderjs 容器（隐藏） */
	.renderjs-container {
		display: none;
		width: 0;
		height: 0;
		opacity: 0;
		position: absolute;
		pointer-events: none;
	}
</style>