Pro-Chat: 一款面向未来的开源智能聊天组件

hi, 大家好, 我是徐小夕, 最近在 github 上看到一款非常有意思的开源项目, 定位是开箱即用的大模型对话前端解决方案, 我们使用它可以轻松构建聊天组件, 并且可以一键集成主流 AI 大模型, 比如 通义千问, ChatGpt 等. (让前端再也不用从零写聊天组件了~)

d2ff2ab372730421cb2715e19904bfb8.png

我会在文末贴上这款 开源聊天组件 的文档地址和 github 地址.

组件demo演示

3cfddb5a60c0bcfed0e688a92e58034c.gif

c602f5df26245c903129bd2bed880119.png

功能亮点

我根据自己的使用和实践, 总结一下这款开源聊天组件的亮点:

  • 简单易用, 设计语言统一

2b6934b2afb7939040532bc4a1443c43.png

它是基于 antd 组件库进行的二次封装, 所以我们可以轻松的在 antd 项目中使用, 保持 UI 视觉的统一.

使用啊安装方式如下:

# @ant-design/pro-editor 基于 antd 和 antd-style,需要在项目中安装
$ npm install antd antd-style -S
$ npm install @ant-design/pro-chat -S

使用:

import { ProChat } from '@ant-design/pro-chat';

import { useTheme } from 'antd-style';

export default () => {
  const theme = useTheme();
  return (
    <div style={
   { background: theme.colorBgLayout }}>
      <ProChat
        helloMessage={
          '欢迎使用 ProChat ,我是你的专属机器人,
  • 21
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`vue-beautiful-chat` 是一个基于 Vue.js 的聊天组件,它提供了一整套聊天界面的解决方案,包括聊天气泡、输入框、表情等组件,而且还支持图片、语音、视频等多种类型的消息。 要使用 `vue-beautiful-chat`,可以按照以下步骤进行操作: 1. 安装 `vue-beautiful-chat`,可以使用 npm 或者 yarn 安装: ```bash # 使用 npm 安装 npm install vue-beautiful-chat --save # 使用 yarn 安装 yarn add vue-beautiful-chat ``` 2. 在你的组件中引入 `vue-beautiful-chat`: ```vue <template> <div> <beautiful-chat :messages="messages" @send="handleSend" /> </div> </template> <script> import { BeautifulChat } from 'vue-beautiful-chat'; export default { components: { BeautifulChat, }, data() { return { messages: [ { message: { text: 'Hello, how can I help you?', }, sender: { name: 'Bot', }, }, ], }; }, methods: { handleSend(message) { this.messages.push({ message: { text: message.text, }, sender: { name: 'User', }, }); }, }, }; </script> ``` 在这个示例中,我们引入了 `BeautifulChat` 组件,并将 `messages` 数组传递给它。`messages` 数组用于存储聊天记录,其中每个元素包含消息内容和发送者信息。我们还定义了一个 `handleSend` 方法,用于处理用户发送的消息。 3. 配置 `vue-beautiful-chat`,可以在 `BeautifulChat` 组件上添加一些属性来对聊天界面进行定制,例如: ```vue <beautiful-chat :messages="messages" @send="handleSend" :bubbleClasses="bubbleClasses" :inputClasses="inputClasses" :buttonClasses="buttonClasses" :emojis="emojis" :showEmojiPicker="showEmojiPicker" :maxMessageLength="maxMessageLength" :autoScroll="autoScroll" /> ``` 在这个示例中,我们配置了气泡、输入框、发送按钮的样式,指定了可用的表情和最大消息长度,还指定了是否自动滚动到底部等选项。 以上是 `vue-beautiful-chat` 的基本用法和配置方法,你可以根据自己的需求进行定制和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值