聊天组件 Vue3-beautiful-chat

前言

最近很多公司都在搞大模型，类似于 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 dynamically
    newMessagesCount: 0,
    isChatOpen: false, // to determine whether the chat window should be open or closed
    showTypingIndicator: '', // when set to a value matching the participant.id it shows the typing indicator for the specific user
    colors: {
      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 component
    alwaysScrollToBottom: 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 + 1
        onMessageWasSent({ author: 'support', type: 'text', data: { text } })
    }
}
const onMessageWasSent = (message) => {
      // called when the user sends a message
    localVars.messageList = [ ...localVars.messageList, newMessages ]
}
const openChat = () => {
      // called when the user clicks on the fab button to open the chat
    localVars.isChatOpen = true
    localVars.newMessagesCount = 0
}
const closeChat = () => {
    // called when the user clicks on the botton to close the chat
    localVars.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"