admin管理员组文章数量:1574959
使用技术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;
}
版权声明:本文标题:创新实训——聊天界面 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1725458524a1024502.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论