前言

最近很多公司都在搞大模型，类似于 chatgpt 的功能；而 chatgpt 的界面其实就是个对话框。今天就介绍一个不错的对话框组件 Vue3-beautiful-chat

项目框架

vite + vue3 + TS + Vue3-beautiful-chat

使用流程

1、引用三方件

npm install Vue3-beautiful-chat

2、在 main.ts 中添加依赖

import Chat from 'vue3-beautiful-chat'app.use(Chat)

3、创建 chatView.vue 组件

<template><div><beautiful-chat:participants="localVars.participants":titleImageUrl="localVars.titleImageUrl":onMessageWasSent="onMessageWasSent":messageList="localVars.messageList":newMessagesCount="localVars.newMessagesCount":isOpen="localVars.isChatOpen":close="closeChat":icons="icons":open="openChat":showEmoji="true":showFile="true":showEdition="true":showDeletion="true":deletionConfirmation="true":showTypingIndicator="localVars.showTypingIndicator":showLauncher="true":showCloseButton="true":colors="localVars.colors":alwaysScrollToBottom="localVars.alwaysScrollToBottom":disableUserListToggle="false":messageStyling="localVars.messageStyling"@onType="handleOnType"@edit="editMessage" /></div>
</template>
<script setup lang='ts'>
import { reactive } from 'vue'const localVars = reactive({participants: [{id: 'user1',name: 'Matteo',imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'},{id: 'user2',name: 'Support',imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'}], // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.titleImageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',messageList: [{ type: 'text', author: `me`, data: { text: `Say yes!` } },{ type: 'text', author: `user1`, data: { text: `No.` } }], // the list of the messages to show, can be paginated and adjusted dynamicallynewMessagesCount: 0,isChatOpen: false, // to determine whether the chat window should be open or closedshowTypingIndicator: '', // when set to a value matching the participant.id it shows the typing indicator for the specific usercolors: {header: {bg: '#4e8cff',text: '#ffffff'},launcher: {bg: '#4e8cff'},messageList: {bg: '#ffffff'},sentMessage: {bg: '#4e8cff',text: '#ffffff'},receivedMessage: {bg: '#eaeaea',text: '#222222'},userInput: {bg: '#f4f7f9',text: '#565867'}}, // specifies the color scheme for the componentalwaysScrollToBottom: false, // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)messageStyling: true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
})const sendMessage = (text) => {if (text.length > 0) {localVars.newMessagesCount = localVars.isChatOpen ? localVars.newMessagesCount : localVars.newMessagesCount + 1onMessageWasSent({ author: 'support', type: 'text', data: { text } })}
}
const onMessageWasSent = (message) => {// called when the user sends a messagelocalVars.messageList = [ ...localVars.messageList, newMessages ]
}
const openChat = () => {// called when the user clicks on the fab button to open the chatlocalVars.isChatOpen = truelocalVars.newMessagesCount = 0
}
const closeChat = () => {// called when the user clicks on the botton to close the chatlocalVars.isChatOpen = false
}
const handleScrollToTop = () => {// called when the user scrolls message list to top// leverage pagination for loading another page of messages
}
const handleOnType = () => {console.log('Emit typing event')
}
const editMessage = (message) => {const m = localVars.messageList.find(m=>m.id === message.id);m.isEdited = true;m.data.text = message.data.text;
}</script>

4、当我们启动本地项目的时候，可以看到页面上会出现个图标

点击这个图标的时候就会出现对话框，我们就可以进行正常的对话操作了。

实际项目使用

1、我们在实际项目中最好是将这个 chatView.vue 作为一个组件在其他页面进行引用。
import ChatView from '/chatView.vue'
2、如果嫌弃这个 chat 图标太丑，我们也可以进行更换
组件上有一个 icons 属性，这个可以设置 open 和 close 图标

icons: {open: {img: string}close: {img: string}}

3、大家在点击 header 的时候会出现一个用户弹窗，这个实际用得比较少，而且还影响美观；这个功能也是可以关闭的 disableUserListToggle 属性改成 true
:disableUserListToggle="true"