// 聊天页面编辑
const { API, WebSocketManager, util, constants } = require('../../utils/api.js')
const { formatRelativeTime } = util
const { MESSAGE_TYPE, WS_MESSAGE_TYPE } = constants
Page({
data: {
messages: [],
inputValue: '',
sending: false,
isTyping: false,
showHistoryTip: false,
websocketManager: null,
lastMessageId: '',
isConnected: false,
currentPage: 1,
userInfo: null,
showUserInfoCard: false,
locationInfo: null,
deviceInfo: null,
networkType: '',
showAuthPrompt: false,
authType: 'userInfo'
},
onLoad() {
this._initWebSocket()
this.loadChatHistory()
this.addWelcomeMessage()
this.checkUserAuth()
// 通知 tab-bar 进入聊天模式
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
currentTab: 1,
showChatPanel: true
})
}
},
// 检查用户授权状态
checkUserAuth() {
const app = getApp()
const userInfo = app.globalData.userInfo
if (userInfo) {
this.setData({ userInfo })
this.showUserInfoCard()
this.getUserAdditionalInfo()
} else {
this.requestUserAuth()
}
},
// 请求用户授权
requestUserAuth() {
const app = getApp()
app.getUserInfo((userInfo) => {
if (userInfo) {
this.setData({ userInfo })
this.showUserInfoCard()
this.getUserAdditionalInfo()
} else {
// 未授权,显示授权提示组件
this.setData({
showAuthPrompt: true,
authType: 'userInfo'
})
}
})
},
// 获取用户附加信息
getUserAdditionalInfo() {
const app = getApp()
// 获取地理位置信息
app.getLocation((locationInfo) => {
if (locationInfo) {
this.setData({ locationInfo })
}
})
// 获取设备信息
const deviceInfo = app.getDeviceInfo()
if (deviceInfo) {
this.setData({ deviceInfo })
}
// 获取网络状态
app.getNetworkType((networkType) => {
if (networkType) {
this.setData({ networkType })
}
})
},
// 显示用户信息卡片
showUserInfoCard() {
const { userInfo, locationInfo, deviceInfo, networkType } = this.data
// 获取UnionID
let userId = this.getUnionId()
// 获取手机号
const phoneNumber = wx.getStorageSync('phoneNumber')
let userInfoContent = `你好,${userInfo.nickName}!\n`
userInfoContent += `UnionID:${userId}\n`
if (phoneNumber) {
userInfoContent += `手机号:${phoneNumber}\n`
}
if (userInfo.gender === 1) {
userInfoContent += '性别:男\n'
} else if (userInfo.gender === 2) {
userInfoContent += '性别:女\n'
}
if (userInfo.city) {
userInfoContent += `地区:${userInfo.country} ${userInfo.province} ${userInfo.city}\n`
}
if (locationInfo) {
userInfoContent += `位置:${locationInfo.latitude.toFixed(2)}, ${locationInfo.longitude.toFixed(2)}\n`
}
if (deviceInfo) {
userInfoContent += `设备:${deviceInfo.model}\n`
userInfoContent += `系统:${deviceInfo.system}\n`
}
if (networkType) {
userInfoContent += `网络:${networkType}`
}
const userInfoMessage = {
id: util.generateUniqueId(),
content: userInfoContent,
type: MESSAGE_TYPE.TEXT,
isMe: false,
nickname: '系统',
avatar: '/assets/images/system-avatar.png',
time: formatRelativeTime(new Date())
}
this.addMessage(userInfoMessage)
this.setData({ showUserInfoCard: true })
},
onShow() {
// 更新自定义 TabBar 选中态 & 强制聊天模式
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
currentTab: 1,
showChatPanel: true
})
}
// 每次显示页面时检查授权状态
this.checkUserAuth()
},
onUnload() {
if (this.wsManager) {
this.wsManager.disconnect()
this.wsManager = null
}
},
// 添加欢迎消息
addWelcomeMessage() {
const welcomeMessage = {
id: util.generateUniqueId(),
content: '你好,我是智控未来的AI助手,有什么可以帮助你的吗?',
type: MESSAGE_TYPE.TEXT,
isMe: false,
nickname: '智控未来',
avatar: '/assets/images/ai-avatar.png',
time: formatRelativeTime(new Date())
}
this.addMessage(welcomeMessage)
},
// 初始化 WebSocket 连接(小程序 WebSocket)
_initWebSocket() {
if (this.wsManager && this.wsManager.isConnected) return
const app = getApp()
const wsUrl = app.globalData.websocketUrl || 'wss://pactgo.cn/api/v1/ws/miniprogram'
this.wsManager = new WebSocketManager()
this.wsManager.connect(wsUrl)
this.setData({ isConnected: true })
},
// 加载聊天记录
async loadChatHistory() {
try {
// 模拟加载历史消息
const mockHistory = this.getMockHistoryMessages()
if (mockHistory.length > 0) {
this.setData({
messages: mockHistory,
showHistoryTip: true
})
this.scrollToBottom()
}
} catch (error) {
console.error('加载聊天记录失败:', error)
}
},
// 加载更多历史消息
loadMoreHistory() {
if (this.data.currentPage < 3) {
this.setData({ currentPage: this.data.currentPage + 1 })
const moreHistory = this.getMockHistoryMessages(this.data.currentPage)
if (moreHistory.length > 0) {
const updatedMessages = [...moreHistory, ...this.data.messages]
this.setData({ messages: updatedMessages })
}
}
},
// 模拟历史消息
getMockHistoryMessages(page = 1) {
const messages = []
if (page === 1) {
messages.push({
id: 'history-1',
content: '你好,我是智控未来的AI助手,有什么可以帮助你的吗?',
type: MESSAGE_TYPE.TEXT,
isMe: false,
nickname: '智控未来',
avatar: '/assets/images/ai-avatar.png',
time: '昨天 14:30'
})
messages.push({
id: 'history-2',
content: '你能做什么?',
type: MESSAGE_TYPE.TEXT,
isMe: true,
nickname: '我',
avatar: '/assets/images/user-avatar.png',
time: '昨天 14:31'
})
messages.push({
id: 'history-3',
content: '我可以帮你解答问题、提供信息、生成内容等。请问你有什么具体需求吗?',
type: MESSAGE_TYPE.TEXT,
isMe: false,
nickname: '智控未来',
avatar: '/assets/images/ai-avatar.png',
time: '昨天 14:32'
})
} else if (page === 2) {
messages.push({
id: 'history-4',
content: '如何学习编程?',
type: MESSAGE_TYPE.TEXT,
isMe: true,
nickname: '我',
avatar: '/assets/images/user-avatar.png',
time: '昨天 15:00'
})
messages.push({
id: 'history-5',
content: '
学习编程的步骤:
- 选择一门编程语言,如Python、JavaScript等
- 学习基础语法和概念
- 动手项目,积累经验
- 参与社区,学习他人的代码
',
type: MESSAGE_TYPE.richText,
isMe: false,
nickname: '智控未来',
avatar: '/assets/images/ai-avatar.png',
time: '昨天 15:01'
})
}
return messages
},
// 处理新消息
handleNewMessage(data) {
this.setData({ isTyping: false })
// 模拟不同类型的消息
if (data.content.includes('代码')) {
const codeMessage = {
id: data.id || util.generateUniqueId(),
content: 'def hello():\n print("Hello, World!")',
type: 'code',
language: 'Python',
isMe: false,
nickname: '智控未来',
avatar: '/assets/images/ai-avatar.png',
time: formatRelativeTime(new Date())
}
this.addMessage(codeMessage)
} else if (data.content.includes('卡片')) {
const cardMessage = {
id: data.id || util.generateUniqueId(),
type: 'buttonCard',
title: '选择一个选项',
buttons: [
{ id: '1', text: '选项一', action: 'option1' },
{ id: '2', text: '选项二', action: 'option2' }
],
isMe: false,
nickname: '智控未来',
avatar: '/assets/images/ai-avatar.png',
time: formatRelativeTime(new Date())
}
this.addMessage(cardMessage)
} else if (data.content.includes('富文本')) {
const richTextMessage = {
id: data.id || util.generateUniqueId(),
content: '标题
这是一段加粗的文字,包含
',
type: 'richText',
isMe: false,
nickname: '智控未来',
avatar: '/assets/images/ai-avatar.png',
time: formatRelativeTime(new Date())
}
this.addMessage(richTextMessage)
} else {
const message = {
id: data.id || util.generateUniqueId(),
content: data.content,
type: data.type || MESSAGE_TYPE.TEXT,
isMe: false,
nickname: data.nickname || '智控未来',
avatar: data.avatar || '/assets/images/ai-avatar.png',
time: formatRelativeTime(new Date())
}
this.addMessage(message)
}
},
// 处理系统消息
handleSystemMessage(data) {
const message = {
id: data.id || util.generateUniqueId(),
content: data.content,
type: MESSAGE_TYPE.SYSTEM,
isMe: false,
nickname: '系统',
avatar: '/assets/images/system-avatar.png',
time: formatRelativeTime(new Date())
}
this.addMessage(message)
},
// 添加消息
addMessage(message) {
const messages = [...this.data.messages, message]
this.setData({
messages: messages,
lastMessageId: message.id
})
this.scrollToBottom()
},
// 滚动到底部
scrollToBottom() {
setTimeout(() => {
if (this.data.messages.length > 0) {
const lastMessage = this.data.messages[this.data.messages.length - 1]
this.setData({
lastMessageId: lastMessage.id
})
}
}, 100)
},
// 输入框变化
onInputChange(e) {
this.setData({
inputValue: e.detail.value
})
},
// 发送消息(走 SSE → Gateway → SmartClaw → LMStudio)
async sendMessage(text) {
const content = text ? text.trim() : this.data.inputValue.trim()
if (!content || this.data.sending) return
this.setData({ sending: true, isTyping: true })
const userMessage = {
id: util.generateUniqueId(),
content: content,
type: MESSAGE_TYPE.TEXT,
isMe: true,
nickname: '我',
avatar: '/assets/images/user-avatar.png',
time: formatRelativeTime(new Date())
}
this.addMessage(userMessage)
this.setData({ inputValue: '' })
// 创建 AI 占位消息(打字机效果)
const aiMsgId = util.generateUniqueId()
const aiMsg = {
id: aiMsgId, content: '', type: MESSAGE_TYPE.TEXT,
isMe: false, nickname: '智控未来',
avatar: '/assets/images/ai-avatar.png',
time: formatRelativeTime(new Date()), isStreaming: true
}
this.addMessage(aiMsg)
try {
const app = getApp()
const gatewayUrl = app.globalData.gatewayUrl || 'http://localhost:8000'
// 构建 SSE 请求数据
const requestData = {
model: "qwen2.5-vl-7b-instruct",
messages: [
{
role: "user",
content: content
}
],
stream: true,
temperature: 0.7,
max_tokens: 500
}
// 发送 SSE 请求
const self = this
let fullResponse = ''
// 使用 wx.request 发送请求并处理 SSE 流
wx.request({
url: `${gatewayUrl}/v1/chat/completions`,
method: 'POST',
header: {
'Content-Type': 'application/json'
},
data: requestData,
responseType: 'text',
success: function(res) {
// 处理 SSE 响应
const lines = res.data.split('\n')
for (const line of lines) {
if (line.startsWith('data: ')) {
const data = line.substring(6)
if (data === '[DONE]') {
// SSE 流结束
self._typewriterAppend(aiMsgId, fullResponse, true)
break
}
try {
const json = JSON.parse(data)
if (json.choices && json.choices[0] && json.choices[0].delta && json.choices[0].delta.content) {
const chunk = json.choices[0].delta.content
fullResponse += chunk
self._typewriterAppend(aiMsgId, fullResponse)
}
} catch (e) {
console.error('解析 SSE 数据失败:', e)
}
}
}
},
fail: function(err) {
console.error('SSE 请求失败:', err)
self._typewriterAppend(aiMsgId, self.getMockAIResponse(content), true)
}
})
// 8 秒超时:降级为模拟回复
setTimeout(() => {
const msgs = self.data.messages
const aiM = msgs.find(m => m.id === aiMsgId)
if (aiM && aiM.isStreaming) {
aiM.isStreaming = false
self._typewriterAppend(aiMsgId, self.getMockAIResponse(content), true)
}
}, 8000)
} catch (err) {
console.error('发送失败:', err)
const aiResponse = {
id: aiMsgId,
content: this.getMockAIResponse(content),
type: MESSAGE_TYPE.TEXT,
isMe: false,
nickname: '智控未来',
avatar: '/assets/images/ai-avatar.png',
time: formatRelativeTime(new Date())
}
this.handleNewMessage(aiResponse)
}
this.setData({ sending: false })
},
// 打字机效果
_typewriterAppend(msgId, fullContent, isFinal = false) {
const msgs = this.data.messages
const idx = msgs.findIndex(m => m.id === msgId)
if (idx === -1) return
const cur = msgs[idx].content || ''
if (isFinal || cur.length >= fullContent.length) {
msgs[idx] = { ...msgs[idx], content: fullContent, isStreaming: false }
this.setData({ messages: [...msgs], isTyping: false })
return
}
const next = fullContent[cur.length]
msgs[idx] = { ...msgs[idx], content: cur + next, isStreaming: true }
this.setData({ messages: [...msgs] })
setTimeout(() => { this._typewriterAppend(msgId, fullContent) }, 30)
},
// 模拟AI回复
getMockAIResponse(content) {
const responses = {
'你好': '你好,很高兴为你服务。',
'今天天气怎么样': '今天天气晴朗,适合户外活动。',
'如何学习编程': '学习编程需要持之以恒,建议从基础语法开始,多动手实践。',
'代码': 'def hello():\n print("Hello, World!")',
'卡片': '这是一个卡片消息。',
'富文本': '这是一段富文本消息,包含加粗和下划线。',
'今天是几月几号': '今天是 ' + new Date().toLocaleDateString('zh-CN'),
'你是谁': '我是智控未来的AI助手,由LMStudio提供支持。'
}
return responses[content] || '感谢你的提问,我会为你提供准确的答案。'
},
// 长按消息
onMessageLongPress(e) {
const messageId = e.currentTarget.dataset.messageId
const message = this.data.messages.find(msg => msg.id === messageId)
if (message && message.type === MESSAGE_TYPE.TEXT) {
wx.showActionSheet({
itemList: ['复制消息', '删除消息'],
success: (res) => {
switch (res.tapIndex) {
case 0:
this.copyMessage(message.content)
break
case 1:
this.deleteMessage(messageId)
break
}
}
})
}
},
// 复制消息
copyMessage(content) {
wx.setClipboardData({
data: content,
success: () => {
wx.showToast({
title: '复制成功',
icon: 'success'
})
}
})
},
// 删除消息
deleteMessage(messageId) {
const updatedMessages = this.data.messages.filter(msg => msg.id !== messageId)
this.setData({ messages: updatedMessages })
wx.showToast({
title: '已删除',
icon: 'success'
})
},
// 复制代码
copyCode(e) {
const content = e.currentTarget.dataset.content
wx.setClipboardData({
data: content,
success: () => {
wx.showToast({
title: '代码已复制',
icon: 'success'
})
}
})
},
// 预览图片
previewImage(e) {
const url = e.currentTarget.dataset.url
wx.previewImage({
urls: [url]
})
},
// 卡片按钮点击
onCardButtonTap(e) {
const action = e.currentTarget.dataset.action
wx.showToast({
title: '你点击了' + action,
icon: 'none'
})
},
// 清空聊天记录
clearChatHistory() {
wx.showModal({
title: '清空聊天记录',
content: '确定要清空所有聊天记录吗?此操作不可恢复。',
confirmText: '清空',
confirmColor: '#dd524d',
success: (res) => {
if (res.confirm) {
this.setData({
messages: [],
lastMessageId: ''
})
wx.removeStorageSync('chatHistory')
wx.showToast({
title: '已清空',
icon: 'success'
})
}
}
})
},
// 授权成功回调
onAuthSuccess(e) {
const { authType, data } = e.detail
console.log('授权成功:', authType, data)
const app = getApp()
switch (authType) {
case 'userInfo':
app.globalData.userInfo = data
wx.setStorageSync('userInfo', data)
this.setData({ userInfo: data })
this.showUserInfoCard()
this.getUserAdditionalInfo()
break
case 'location':
const locationInfo = {
latitude: data.latitude,
longitude: data.longitude,
speed: data.speed,
accuracy: data.accuracy
}
wx.setStorageSync('locationInfo', locationInfo)
this.setData({ locationInfo })
break
}
},
// 授权失败回调
onAuthFail(e) {
const { authType, error } = e.detail
console.error('授权失败:', authType, error)
wx.showToast({
title: '授权失败,请重试',
icon: 'none'
})
},
// 取消授权回调
onAuthCancel(e) {
const { authType } = e.detail
console.log('取消授权:', authType)
// 如果是用户信息授权,使用默认信息
if (authType === 'userInfo') {
this.setData({
userInfo: {
nickName: '游客',
avatarUrl: '/assets/images/user-avatar.png',
gender: 0,
city: '',
province: '',
country: ''
}
})
this.showUserInfoCard()
}
},
// 打开设置回调
onSettingsOpen(e) {
const { authType, settings } = e.detail
console.log('打开设置:', authType, settings)
},
// 获取UnionID
getUnionId() {
// 从本地存储获取
let unionId = wx.getStorageSync('globalUserId')
if (!unionId) {
const app = getApp()
// 如果本地没有,调用app方法获取
app.getGlobalUserId((id) => {
unionId = id
})
// 同时返回一个临时ID,确保页面正常显示
unionId = '获取中...'
}
return unionId
}
})