// 聊天页面逻辑
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
},
onLoad() {
this.initWebSocket()
this.loadChatHistory()
this.addWelcomeMessage()
},
onUnload() {
if (this.data.websocketManager) {
this.data.websocketManager.disconnect()
}
},
// 添加欢迎消息
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连接
initWebSocket() {
const manager = new WebSocketManager()
const app = getApp()
manager.onMessage(WS_MESSAGE_TYPE.MESSAGE, (data) => {
this.handleNewMessage(data)
})
manager.onMessage(WS_MESSAGE_TYPE.SYSTEM, (data) => {
this.handleSystemMessage(data)
})
manager.connect(app.globalData.websocketUrl || 'wss://pactgo.cn/api/v1/ws/control')
this.setData({
websocketManager: manager,
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) { // 模拟加载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
})
},
// 发送消息
async sendMessage() {
const content = 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)
try {
// 模拟AI回复
setTimeout(() => {
const aiResponse = {
id: util.generateUniqueId(),
content: this.getMockAIResponse(content),
type: MESSAGE_TYPE.TEXT,
isMe: false,
nickname: '智控未来',
avatar: '/assets/images/ai-avatar.png',
time: formatRelativeTime(new Date())
}
this.handleNewMessage(aiResponse)
}, 1500)
this.setData({
inputValue: '',
sending: false
})
} catch (error) {
console.error('发送消息失败:', error)
util.showError('发送失败,请重试')
this.setData({
sending: false,
isTyping: false
})
}
},
// 模拟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'
})
}
}
})
}
})