创新实训——聊天界面

使用技术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指令在chatMsgtextarea之间建立双向数据绑定。然后,对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;

    }

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值