bootstrap vue 实现chatgpt聊天界面 vue聊天ui

转载

mob64ca140fd7c1 2024-05-06 21:03:55

文章标签 ide 自定义初始化 文章分类 深度学习人工智能

推荐一款基于Vue的前端IM聊天组件

基于 VUE 2.0 的 IM 聊天组件

特性

拥有丰富的自定义功能，任意搭配出不同风格的聊天界面
可以单独使用内部组件，比如编辑框/按钮/popover 等
不依赖任何第三方组件库
可任意扩展的聊天消息类型

安装

npm install lemon-imui -S

界面：

使用

import LemonIMUI from 'lemon-imui'

Vue.use(LemonIMUI)

<lemon-imui ref="IMUI" />

示例

lemon-imui-examples.

教程

Contents

• contact {
  //用户唯一ID
  id: "",
  //昵称
  displayName: "工作协作群",
  //头像URL
  avatar: "http://upload.qqbodys.com/img/weixin/20170804/ji5qxg1am5ztm.jpg",
  //会话类型 single | many
  type: "single",
  //通讯录索引，默认根据字母排序，也可以手动排序“[1]最近联系人”
  index: "A",
  //未读消息
  unread: 0,
  //最近消息时间
  lastSendTime: 1566047865417,
  //最近消息内容
  lastContent: "2"
}
• message {
  //消息唯一ID
  id: "",
  status: "succeed",
  //消息类型 voice | file | video | image | text
  type: "text",
  //消息发送时间
  sendTime: 1572415923000,
  //消息内容 | URL
  content: generateRandWord(),
  //文件大小
  fileSize: 1231,
  //文件名称
  fileName: "asdasd.doc",
  //当前会话ID
  toContactId:"",
  //发送消息的用户
  fromUser:{
    id: "system",
    displayName: "系统测试",
    avatar: "http://upload.qqbodys.com/allimg/1710/1035512943-0.jpg"
  };
}
• menu {
  //导航名称， 保留字段 lastMessages 和 contacts
  name: "custom1",
  //鼠标停留时显示文字
  title: "自定义按钮1",
  //未读角标
  unread: 0,
  //外观
  render: menu => {
    return <i class="lemon-icon-attah" />;
  },
  //打开内容
  renderContainer: () => {
    return <div>自定义</div>;
  },
  //强制显示在底部
  isBottom: true
}

Props

• user {
  id:'',
  avatar:'',
  displayName:'',
}

currentContactId 当前会话联系人 ID
currentContact 当前会话联系人信息
messageTimeFormat 消息列表时间格式化函数
contactTimeFormat 联系人时间格式化规则
hideDrawer 是否隐藏抽屉
hideMenuAvatar 是否隐藏导航头像
hideMenuAvatar 是否隐藏导航

Methods

initMenus([menu]);
初始化导航
initContacts([contact]);
初始化联系人

• initEmoji() 初始化表情 IMUI.initEmoji([
  {
    label: '表情',
    children: [
      {
        name: '1f600',
        title: '微笑',
        src: 'https://twemoji.maxcdn.com/2/72x72/1f600.png'
      },
      {
        name: '1f62c',
        title: '微笑',
        src: 'https://twemoji.maxcdn.com/2/72x72/1f62c.png'
      }
    ]
  },
  {
    label: '收藏',
    children: [
      {
        name: '1f62c',
        title: '微笑',
        src: 'https://twemoji.maxcdn.com/2/72x72/1f62c.png'
      }
    ]
  }
])

appendMessage(message)
在当前聊天窗口插入新消息
removeMessage(messageId, contactId)
删除聊天消息
updateMessage(messageId, contactId, message)
修改聊天聊天消息
updateContact(contactId,contact)
修改联系人
getMessages(contactId)
返回所有本地消息，传入 contactId 只返回与该联系人的消息
getContacts()
获取所有联系人
openDrawer(vnode)
打开抽屉
closeDrawer()
关闭抽屉
changeDrawer(vnode)
切换抽屉显示
changeMenu(menuName)
切换导航
changeContact(contactId)
切换聊天对象
messageViewToBottom()
将当前聊天窗口滚动到底部
setLastContentRender(messageType, render)
配置联系人列表最新消息的渲染函数 IMUI.setLastContentRender('image', message => { return <span>[最新图片]</span> })
lastContentRender(message) 根据 message 渲染联系人列表最新消息 DOM IMUI.updateContact(contact.id, { lastContent: IMUI.lastContentRender(message) })