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.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>
							</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="{ paddingBottom: `${isIOS ? safeAreaBottom : 20}rpx` }">
			<!-- 问题建议区 -->
			<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 流式连接） -->
		<view 
			:change:prop="renderModule.onDataChange" 
			:prop="renderjsData"
			:onStreamData="onStreamData"
			class="renderjs-container"
		></view>
	</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(34)
	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收到流式数据 ===', data);
		console.log('数据类型:', data.type);
		console.log('当前输入消息索引:', currentTypingMessage.value);
		
		if (data.type === 'thinking') {
			console.log('进入 Thinking 模式');
			// 第一个 thinking 类型，开启 Thinking 模式
			isInThinkingMode.value = true;
			thinkingBuffer.value = data.content;
			processThinkingContent();
		} else if (data.type === 'message') {
			console.log('收到消息内容:', data.content);
			// 判断是否在 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);
		
		if (isTypingEffect.value || currentTypingMessage.value === null) {
			console.log('打字机效果已在运行或没有当前消息，退出');
			return;
		}
		
		isTypingEffect.value = true;
		chatMessages.value[currentTypingMessage.value].isTyping = false;
		console.log('开始打字机效果，消息索引:', currentTypingMessage.value);
		
		const processQueue = () => {
			if (messageQueue.value.length > 0 && currentTypingMessage.value !== null) {
				// 每次取出一个字符
				const char = messageQueue.value.shift();
				const currentContent = chatMessages.value[currentTypingMessage.value].content || '';
				chatMessages.value[currentTypingMessage.value].content = currentContent + char;
				
				// 每20个字符滚动一次，优化性能
				if (currentContent.length % 20 === 0) {
					scrollToBottom();
				}
				
				// 继续处理队列
				typingTimer.value = setTimeout(processQueue, 10);
			} else if (messageQueue.value.length === 0) {
				// 队列为空，等待新数据
				typingTimer.value = setTimeout(processQueue, 50);
			}
		};
		
		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
		};
		
		// 更新 renderjs 数据，触发 SSE 连接
		renderjsData.value = {
			action: 'start',
			url: url,
			data: requestData,
			token: storage.getAccessToken(),
			timestamp: Date.now()
		};
	}
	
	// 停止流式输出
	const stopStreaming = () => {
		console.log('用户中止流式输出');
		
		// 通知 renderjs 停止
		renderjsData.value = {
			action: 'stop',
			timestamp: Date.now()
		};
		
		// 立即停止打字机效果并完成
		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';
		safeAreaBottom.value = systemInfo.safeAreaInsets ? (systemInfo.safeAreaInsets.bottom || 0) : 0;

		// 初始化消息
		initMessages();

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

<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 流结束');
					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);
			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;
						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 类型数据');
				// 使用自定义事件发送数据
				window.dispatchEvent(new CustomEvent('renderjs-stream-data', {
					detail: {
						type: 'thinking',
						content: data
					}
				}));
			} else {
				console.log('[renderjs] 发送 message 类型数据，长度:', data.length);
				// 普通消息内容
				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>

<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: 90rpx;
		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: 10;
	}

	.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;
	}

	/* 欢迎消息特殊样式 */
	.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>