js:
 

Page({
    data: {
      inputMessage: '', // 存储用户输入的内容
      inputFocus: true, // 控制输入框是否获得焦点
      messages: [] // 存储对话记录
    },
  
    // 处理输入框内容的绑定
    onInput(event) {
      this.setData({
        inputMessage: event.detail.value
      });
    },
  
    // 发送消息的处理函数
    async sendMessage() {
      const {
        inputMessage,
        messages
      } = this.data;
  
      if (!inputMessage.trim()) {
        wx.showToast({
          title: '请输入消息',
          icon: 'none'
        });
        return;
      }
  
      // 更新消息列表，添加用户发送的消息
      const newMessages = [...messages, {
        user: inputMessage,
        bot: ''
      }];
      this.setData({
        messages: newMessages,
      });
  
      if (inputMessage.includes("你是谁")) {
        this.displayBotResponse("你好，我是您的智能问答小助手，小小。", newMessages.length - 1);
      } else {
        try {
          // 发起请求
          await wx.request({
            url: 'http://*********:3000/api/v1/chat/completions', // API 地址
            method: 'POST',
            header: {
              'Authorization': 'Bearer fastgpt-********',
              'Content-Type': 'application/json',
            },
            data: {
              chatId: "111",
              stream: false,  // 禁用流式返回，使用标准响应
              detail: false,
              messages: [
                {
                  content: inputMessage,
                  role: "user"
                }
              ],
              customUid: "xxxxxx" // 可选，自定义用户ID
            },
            success: (res) => {
              if (res.statusCode === 200) {
                // 获取完整的机器人回复内容
                let botResponse = res.data.choices[0].message.content;
                this.displayBotResponse(botResponse, newMessages.length - 1);  // 模拟逐字显示
              }
            },
            fail: () => {
              wx.showToast({
                title: '请求失败，请稍后再试',
                icon: 'none'
              });
            }
          });
  
          // 清空输入框
          this.setData({
            inputMessage: '',
            inputFocus: true
          });
  
        } catch (error) {
          wx.showToast({
            title: '请求失败，请稍后再试',
            icon: 'none'
          });
        }
      }
    },
  
    // 模拟逐字显示机器人的回复
    displayBotResponse(response, index) {
      let charIndex = 0;
      const intervalId = setInterval(() => {
        const updatedMessages = this.data.messages.map((msg, i) => {
          if (i === index) {
            // 更新当前消息中的机器人回复
            msg.bot = response.slice(0, charIndex);
          }
          return msg;
        });
  
        this.setData({
          messages: updatedMessages
        });
  
        // 如果所有字符都已显示完，清除定时器
        if (charIndex === response.length) {
          clearInterval(intervalId);
        } else {
          charIndex++;
        }
      }, 50); // 控制每个字符之间的间隔，50ms
    }
  });
  

wxml:

<!-- pages/chat/chat.wxml -->
<view class="chat-container">
    <!-- 消息列表 -->
    <view class="message-list">
        <!-- 遍历消息数组 -->
        <view wx:for="{
   
   {messages}}" wx:key="index" class="message-item">
            <!-- 用户的消息 -->

            <view style="width:100%;height:40px;">
                <view class="iconfont icon-yonghu" style="float: right;font-size: 25px;line-height: 30px;padding-left: 5px;"></view>
                <view class="user-message">
                    {
   
   {item.user}}
                </view>

            </view>


            <!-- 机器人的回复 -->
            <view wx:if="{
   
   {!item.isUser}}" class="bot-response">

                <view class="iconfont icon-deepseek" style="font-size: 30px;color:cornflowerblue"></view>
                
                <view class="bot-message-content">{
   
   {item.bot || "思考中..."}}</view>

            </view>
        </view>
    </view>

    <!-- 输入区域，始终显示在底部 -->
    <view class="input-area">
        
        <input class="input-field" bindinput="onInput" placeholder="请输入消息..." bindconfirm="sendMessage" value="{
   
   {inputMessage}}" focus="{
   
   {inputFocus}}"  />
        <button class="send-btn" bindtap="sendMessage">发送</button>
    </view>
</view>

wxss:

/* pages/chat/chat.wxss */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 10px;
  background-color: #f5f5f5;
}

.message-list {
  flex: 1;
  overflow-y: scroll;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
}

.message-item {
  margin: 10px 0;
}

.user-message {
    float:right;
  color: #0084ff;
  font-weight: bold;
  text-align: left;  /* 用户消息在右侧 */
  
  background-color: #e1e1e1;  
  padding:10px;
  border-radius: 5px;
  
}




.bot-response {
  float:left;
  border-radius: 5px;
  padding: 8px;
  max-width: 90%;
  align-self: flex-start;  /* 机器人回复在左侧 */
  display: flex;
 
}

.bot-message-content {
  color: #333;
  width:100%;
  background-color: #ccc;
  padding:10px;
  border-radius: 5px;
  

}

.input-area {
  display: flex;
  align-items: center;
  
  position: fixed;
  bottom: 0;
  left:0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  background-color: white;
  padding: 10px 0 30px 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.input-field {
  width: 70%;
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.send-btn {
  width: 20%;
  height:40px;
  line-height: 40px;
  background-color: #0084ff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* pages/chat/chat.wxss */
.think-content {
    color: #FF6347; /* 例如：红色字体 */
    font-weight: bold;
    background-color: #f0f0f0; /* 背景颜色 */
    padding: 5px;
    border-radius: 5px;
}