创新实训——聊天界面

使用技术vue，vuex，tailwind搭建聊天界面，显示聊天对话。类定义使用了TS，编译出来的 JavaScript 可以运行在任何浏览器上，且方便管理不同的类。

Message

messageType定义了发给后端的信息，其中包括：

1、idx：用于定义一条message在一个conversation中是第几条
2、loading：表示该对话是否在加载中
3、role：表示说话角色，这里我们按照智谱清言的定义方式，其中assistant为ai的回答，user为用户的问题，system为系统设定（system在实际中不常使用）
4、speech：回答数组，用于ai重新生成回答时使用
5、timestamp：消息发送时间

export interface messageType {
    idx: number;
    loading: boolean;
    role: string;
    timestamp?: number;
    suitable: number[];
    speeches: string[];
}

ConvType
convType在多个message集合中，包括以下属性扩展

1、id这里的id表示的是当前有几个会话
2、title指的是会话的标题
3、timestamp表示会话创建时间
4、msgList表示messageType的数组
5、selected表示该会话是否被选择，可以用于样式的更新

export interface convType {
    id: number;
    title: string;
    timestamp?: number;
    msgList?: messageType[];
    selected?:boolean;
    editable?:boolean;
}

StateType

用于管理会话的状态

1、conversationList表示会话的列表

2、conversation表示当前对话是否被选中

3、chatStatus指当前会话状态

export interface stateType {
    conversationList: convType[]|null;
    conversation?: convType|null;
    chatStatus?: "chatting"|"available";
    chatMsg: string;
    selectedIdx?: number;
 
​}

输入框

其主要功能有：

1、信息输入，用户输入信息，输入框要随着输入信息而扩大

2、问题发送，和后端和其他模块进行交互

3、重新回答，点击之后重新生成回答

其内部适应如下：

使用Vue的v-model指令在chatMsg和textarea之间建立双向数据绑定。然后，对chatMsg的变动进行监听，每当chatMsg的内容发生变化时，调用一个方法来调整文本框的高度以适应内容的变化。

为了实现调整高度的功能，定义了一个名为changeHeight的方法。这个方法会在chatMsg更新时被触发，并动态地改变文本框的高度，确保用户输入的内容能够完全显示，从而提供更好的用户体验。

使用ref通过引用来修改textarea的样式，scollHeight为元素的真实高度，如果高度≤24表示不用改，否则调用resetHeight方法修改高度。

changeHeight() {
      var elem = this.$refs.inputChat;
      elem.style.height = '24px';
      var scrollHeight = elem.scrollHeight;
      if (24 >= scrollHeight || this.chatMsg.length == 0) {
        this.resetHeight();
        return;
      }

      elem.style.removeProperty("overflow-y")
      elem.style.height = scrollHeight + 'px';
      console.log(scrollHeight)

    }

信息初始化

生成两条信息，分别为用户提问和ai回答，用户提问的信息内容为chatMsg即输入框中的内容

addInitMessage() {
      this.addMessage({
        "idx": 0,
        "role": "user",
        "message": this.chatMsg
      })
      var message = {
        "idx": 0,
        "loading": true,
        "role": "assistant",
        "suitable": [0],
        "speeches": [""]
      }
      this.addMessage(message)
    }

实现聊天功能

处理用户发送的消息，调用AI聊天服务，然后将AI的回复显示在聊天界面中，并更新会话的状态。

chat() {
      // console.log("bus-send",that.conversation)
      bus.emit('bus-send')
      const chatMsgCopy = this.chatMsg;
      this.chatMsg = "";
      aiLongChat(this.model, chatMsgCopy, this.conversation.id).then((res) => {
        var tmpMessage = this.conversation.msgList[this.conversation.msgList?.length - 1]
        tmpMessage["speeches"][0] += res.data.message
        tmpMessage["loading"] = false;
        this.conversation.msgList[this.conversation.msgList?.length - 1] = tmpMessage;
        this.updateConversation(this.conversation);
        this.handleScrollBottom();
        console.log(res.data.message)

      }).catch((err) => {
        console.log(err)
      })
      this.convLoading = false;

    }

发送对话

在用户点击发送按钮时，处理用户输入的消息，更新聊天界面，并可能触发与AI的交互。通过设置convLoading变量，管理消息发送和接收的加载状态。

send() {

      if (this.chatMsg.trim().length == 0) {
        return;
      }

      if (this.convLoading) {
        return;
      }

      this.convLoading = true;
      this.chatMsg = this.chatMsg.trim().replace(/\n/g, "")
      this.addInitMessage()
      // 滚动到最下面
      this.handleScrollBottom();
      //this.streamChat();
      this.chat();
      //this.convLoading = false;

    }