start

xui/wxapp/pages/ai/aichat/aichat.js

@@ -0,0 +1,235 @@
+const API = require('../../../utils/api.js')
+
+Page({
+  data: {
+    messages: [],
+    inputValue: '',
+    inputFocus: false,
+    isTyping: false,
+    scrollToMessage: '',
+    quickQuestions: [
+      '怎么加入暖橙团队？',
+      '陪诊服务的流程是什么？',
+      '如何预约陪诊服务？',
+      '陪诊服务收费标准？'
+    ]
+  },
+
+  messageIdCounter: 0,
+
+  onLoad() {
+    this.loadChatHistory()
+    this.initSocketListeners()
+  },
+
+  onUnload() {
+    this.removeSocketListeners()
+  },
+
+  onShow() {
+    this.setData({ inputFocus: true })
+  },
+
+  initSocketListeners() {
+    const app = getApp()
+    const socket = app.globalData.chatSocket
+    if (!socket) return
+
+    this._onSocketMessage = (data) => {
+      if (data && data.type === 'ai') {
+        this.handleAIReply(data)
+      }
+    }
+
+    this._onSocketError = (err) => {
+      console.error('[AIChat] WebSocket error', err)
+      this.handleAIError('网络连接失败，请检查网络设置')
+    }
+
+    socket.onMessage(this._onSocketMessage)
+    socket.onError(this._onSocketError)
+  },
+
+  removeSocketListeners() {
+    const app = getApp()
+    const socket = app.globalData.chatSocket
+    if (!socket) return
+
+    if (this._onSocketMessage) {
+      socket.onMessage(null)
+    }
+    if (this._onSocketError) {
+      socket.onError(null)
+    }
+  },
+
+  handleAIReply(data) {
+    let messages = null
+    if (this.data.messages.length > 0) {
+      let lastMessage = this.data.messages[this.data.messages.length - 1]
+      if (lastMessage.type === 'ai' && lastMessage._serverId === data.id) {
+        lastMessage.content += data.content || ''
+        messages = this.data.messages
+      }
+    }
+
+    if (!messages) {
+      const aiResponse = {
+        id: `msg_${++this.messageIdCounter}`,
+        _serverId: data.id,
+        type: 'ai',
+        contentType: 'text',
+        content: data.content || '',
+        time: this.formatTime(new Date())
+      }
+
+      if (data.sessionId) {
+        wx.setStorageSync('ai_session_id', data.sessionId)
+      }
+
+      messages = [...this.data.messages, aiResponse]
+    }
+
+    this.setData({
+      messages: messages,
+      isTyping: false
+    })
+    this.saveChatHistory(messages)
+    this.scrollToBottom()
+  },
+
+  loadChatHistory() {
+    try {
+      const history = wx.getStorageSync('ai_chat_history')
+      if (history && history.length > 0) {
+        this.setData({ messages: history })
+        this.scrollToBottom()
+      }
+    } catch (e) {
+      console.log('加载聊天记录失败', e)
+    }
+  },
+
+  saveChatHistory(messages) {
+    try {
+      wx.setStorageSync('ai_chat_history', messages)
+    } catch (e) {
+      console.log('保存聊天记录失败', e)
+    }
+  },
+
+  onInputChange(e) {
+    this.setData({ inputValue: e.detail.value })
+  },
+
+  onQuickQuestionTap(e) {
+    const question = e.currentTarget.dataset.question
+    this.setData({ inputValue: question })
+    this.sendMessage()
+  },
+
+  sendMessage() {
+    const content = this.data.inputValue.trim()
+    if (!content) return
+
+    const userMessage = {
+      id: `msg_${++this.messageIdCounter}`,
+      type: 'user',
+      contentType: 'text',
+      content: content,
+      time: this.formatTime(new Date())
+    }
+
+    const messages = [...this.data.messages, userMessage]
+    this.setData({
+      messages: messages,
+      inputValue: '',
+      isTyping: true
+    })
+
+    this.saveChatHistory(messages)
+    this.scrollToBottom()
+
+    this.sendToAI(content)
+  },
+
+  sendToAI(content, type = 'chat') {
+    const app = getApp()
+    const user = app.globalData.user
+    const socket = app.globalData.chatSocket
+
+    if (!socket.isConnected) {
+      socket.connect()
+    }
+
+    if (socket) {
+      socket.send({
+        type: type,
+        content: content,
+        userId: user ? user._id : '',
+        appId: app.globalData.appId
+      })
+    } else {
+      // 处理连接失败的情况
+      this.handleAIError('网络连接失败，请检查网络设置')
+    }
+  },
+
+  handleAIError(errorMessage) {
+    const errorResponse = {
+      id: `msg_${++this.messageIdCounter}`,
+      type: 'ai',
+      contentType: 'text',
+      content: errorMessage,
+      time: this.formatTime(new Date())
+    }
+
+    const messages = [...this.data.messages, errorResponse]
+    this.setData({
+      messages: messages,
+      isTyping: false
+    })
+    this.saveChatHistory(messages)
+    this.scrollToBottom()
+  },
+
+  scrollToBottom() {
+    setTimeout(() => {
+      const lastMessage = this.data.messages[this.data.messages.length - 1]
+      if (lastMessage) {
+        this.setData({
+          scrollToMessage: `msg-${lastMessage.id}`
+        })
+      }
+    }, 100)
+  },
+
+  previewImage(e) {
+    const src = e.currentTarget.dataset.src
+    wx.previewImage({
+      urls: [src],
+      current: src
+    })
+  },
+
+  formatTime(date) {
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    return `${hours}:${minutes}`
+  },
+
+  clearChat() {
+    wx.showModal({
+      title: '确认清空',
+      content: '确定要清空所有聊天记录吗？',
+      success: (res) => {
+        if (res.confirm) {
+          this.sendToAI('clear', 'clear')
+          this.setData({ messages: [] })
+          wx.removeStorageSync('ai_chat_history')
+          wx.removeStorageSync('ai_session_id')
+        }
+      }
+    })
+  }
+})

xui/wxapp/pages/ai/aichat/aichat.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "AI陪诊助手",
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}

xui/wxapp/pages/ai/aichat/aichat.wxml

@@ -0,0 +1,123 @@
+<view class="chat-container">
+  <!-- 消息列表区域 -->
+  <scroll-view 
+    class="message-list {{messages.length > 0 ? 'has-messages' : ''}}" 
+    scroll-y 
+    scroll-into-view="{{scrollToMessage}}"
+    enhanced
+    show-scrollbar
+  >
+    <!-- 欢迎消息 -->
+    <view class="welcome-area" wx:if="{{messages.length === 0}}">
+      <view class="welcome-icon">
+        <t-icon name="chat" size="80rpx" color="#FF9B33" />
+      </view>
+      <text class="welcome-title">AI陪诊助手</text>
+      <text class="welcome-desc">我是您的智能陪诊助手，可以为您解答陪诊相关问题</text>
+      <view class="quick-questions">
+        <view 
+          class="quick-item" 
+          wx:for="{{quickQuestions}}" 
+          wx:key="index"
+          bindtap="onQuickQuestionTap"
+          data-question="{{item}}"
+        >
+          <text>{{item}}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 消息气泡 -->
+    <view 
+      class="message-item {{item.type}}" 
+      wx:for="{{messages}}" 
+      wx:key="id"
+      id="msg-{{item.id}}"
+    >
+      <!-- AI消息：头像在左，内容在右 -->
+      <block wx:if="{{item.type === 'ai'}}">
+        <image class="avatar ai-avatar" src="/images/home-w.png" mode="aspectFill" />
+        <view class="message-content">
+          <view class="message-bubble">
+            <text class="message-text" wx:if="{{item.contentType === 'text'}}">{{item.content}}</text>
+            <image 
+              wx:if="{{item.contentType === 'image'}}" 
+              class="message-image" 
+              src="{{item.content}}" 
+              mode="widthFix"
+              bindtap="previewImage"
+              data-src="{{item.content}}"
+            />
+          </view>
+          <text class="message-time">{{item.time}}</text>
+        </view>
+      </block>
+
+      <!-- 用户消息：内容在左，头像在右 -->
+      <block wx:if="{{item.type === 'user'}}">
+        <view class="message-content">
+          <view class="message-bubble">
+            <text class="message-text" wx:if="{{item.contentType === 'text'}}">{{item.content}}</text>
+            <image 
+              wx:if="{{item.contentType === 'image'}}" 
+              class="message-image" 
+              src="{{item.content}}" 
+              mode="widthFix"
+              bindtap="previewImage"
+              data-src="{{item.content}}"
+            />
+          </view>
+          <text class="message-time">{{item.time}}</text>
+        </view>
+        <view class="avatar user-avatar">
+          <t-icon name="user-1" size="40rpx" color="#FFFFFF" />
+        </view>
+      </block>
+    </view>
+
+    <!-- AI正在输入提示 -->
+    <view class="message-item ai" wx:if="{{isTyping}}">
+      <image class="avatar ai-avatar" src="/images/home-active2.png" mode="aspectFill" />
+      <view class="message-content">
+        <view class="message-bubble typing-bubble">
+          <view class="typing-indicator">
+            <view class="dot"></view>
+            <view class="dot"></view>
+            <view class="dot"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部留白，确保最新消息可见 -->
+    <view style="height: 40rpx;"></view>
+  </scroll-view>
+
+  <!-- 清空按钮 -->
+  <view class="clear-btn" wx:if="{{messages.length > 0}}" bindtap="clearChat">
+    <t-icon name="delete" size="28rpx" color="#999999" />
+    <text class="clear-text">清空聊天</text>
+  </view>
+
+  <!-- 输入区域 -->
+  <view class="input-area">
+    <view class="input-wrapper">
+      <input 
+        class="message-input"
+        type="text"
+        value="{{inputValue}}"
+        placeholder="请输入您的问题..."
+        placeholder-class="input-placeholder"
+        confirm-type="send"
+        bindinput="onInputChange"
+        bindconfirm="sendMessage"
+        focus="{{inputFocus}}"
+      />
+      <view class="input-actions">
+        <view class="action-btn send-btn {{inputValue ? 'active' : ''}}" bindtap="sendMessage">
+          <t-icon name="send" size="40rpx" color="{{inputValue ? '#FFFFFF' : '#CCCCCC'}}" />
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

xui/wxapp/pages/ai/aichat/aichat.wxss

@@ -0,0 +1,278 @@
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #F5F5F5;
+  position: relative;
+}
+
+/* 清空按钮 */
+.clear-btn {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6rpx;
+  padding: 12rpx 24rpx;
+  background-color: #FFFFFF;
+  border-top: 1rpx solid #EEEEEE;
+}
+
+.clear-btn:active {
+  opacity: 0.7;
+}
+
+.clear-text {
+  font-size: 22rpx;
+  color: #999999;
+}
+
+/* 消息列表区域 */
+.message-list {
+  flex: 1;
+  padding: 20rpx 0;
+}
+
+.message-list.has-messages {
+  padding-top: 20rpx;
+}
+
+/* 欢迎区域 */
+.welcome-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80rpx 40rpx;
+  text-align: center;
+}
+
+.welcome-icon {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 40rpx;
+  box-shadow: 0 8rpx 32rpx rgba(255, 155, 51, 0.3);
+}
+
+.welcome-title {
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #333333;
+  margin-bottom: 16rpx;
+}
+
+.welcome-desc {
+  font-size: 28rpx;
+  color: #999999;
+  margin-bottom: 60rpx;
+  line-height: 1.6;
+}
+
+.quick-questions {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.quick-item {
+  background-color: #FFFFFF;
+  padding: 28rpx 32rpx;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  color: #333333;
+  text-align: left;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+  transition: all 0.2s ease;
+}
+
+.quick-item:active {
+  transform: scale(0.98);
+  background-color: #FFF8F0;
+}
+
+/* 消息项 */
+.message-item {
+  display: flex;
+  padding: 16rpx 24rpx;
+  align-items: flex-start;
+}
+
+.message-item.ai {
+  justify-content: flex-start;
+}
+
+.message-item.user {
+  justify-content: flex-end;
+}
+
+/* 头像 */
+.avatar {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 40%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ai-avatar {
+  background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%);
+  margin-right: 16rpx;
+  padding: 16rpx;
+  width: 46rpx;
+  height: 46rpx;
+}
+
+.user-avatar {
+  background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%);
+  margin-left: 16rpx;
+}
+
+/* 消息内容 */
+.message-content {
+  display: flex;
+  flex-direction: column;
+  max-width: 70%;
+}
+
+.message-item.user .message-content {
+  align-items: flex-end;
+}
+
+.message-item.ai .message-content {
+  align-items: flex-start;
+}
+
+/* 消息气泡 */
+.message-bubble {
+  padding: 20rpx 24rpx;
+  border-radius: 16rpx;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.message-item.ai .message-bubble {
+  background-color: #FFFFFF;
+  border-top-left-radius: 4rpx;
+}
+
+.message-item.user .message-bubble {
+  background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%);
+  border-top-right-radius: 4rpx;
+}
+
+.message-text {
+  font-size: 28rpx;
+  line-height: 1.6;
+}
+
+.message-item.ai .message-text {
+  color: #333333;
+}
+
+.message-item.user .message-text {
+  color: #FFFFFF;
+}
+
+.message-image {
+  max-width: 400rpx;
+  border-radius: 8rpx;
+}
+
+.message-time {
+  font-size: 20rpx;
+  color: #999999;
+  margin-top: 8rpx;
+}
+
+/* 正在输入指示器 */
+.typing-bubble {
+  padding: 24rpx 32rpx;
+}
+
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background-color: #CCCCCC;
+  animation: typing 1.4s infinite ease-in-out both;
+}
+
+.dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes typing {
+  0%, 80%, 100% {
+    transform: scale(0.6);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 输入区域 */
+.input-area {
+  background-color: #FFFFFF;
+  padding: 20rpx 24rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  border-top: 1rpx solid #EEEEEE;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.message-input {
+  flex: 1;
+  height: 72rpx;
+  background-color: #F5F5F5;
+  border-radius: 16rpx;
+  padding: 0 28rpx;
+  font-size: 28rpx;
+  color: #333333;
+}
+
+.input-placeholder {
+  color: #AAAAAA;
+}
+
+.input-actions {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.action-btn {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #F5F5F5;
+  transition: all 0.2s ease;
+}
+
+.send-btn.active {
+  background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%);
+}