聊天组件 Vue3-beautiful-chat

聊天组件 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