首页>编程相关>Ai源码
下载

react chat widget

远征军

特征

  • 纯文本消息用户界面
  • 链接的片段样式（目前仅作为响应）
  • 完全可定制
  • 便于使用

示范

安装

新项目管理

npm install --save react-chat-widget

纱

yarn add react-chat-widget

用法

1- 将 Widget 组件添加到根组件

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  return (
    < div className = "App" >
      < Widget />
    </ div >
  ) ;
}

export default App ;

2-您需要使用的唯一必需的道具是handleNewUserMessage ，它将接收来自用户的输入。 

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

3- 导入方法，以便您在小部件中添加消息。 （见留言） 

 import React from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this awesome chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
    addResponseMessage ( response ) ;
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

4- 自定义小部件以匹配您的应用程序设计！您可以添加这两个属性来管理小部件的标题及其将使用的头像。当然，您可以随意更改小部件在 CSS 中的样式

 import React , { useEffect } from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

import logo from './logo.svg' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this **awesome** chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

    return (
      < div className = "App" >
        < Widget
          handleNewUserMessage = { handleNewUserMessage }
          profileAvatar = { logo }
          title = "My new awesome title"
          subtitle = "And my cool subtitle"
        />
      </ div >
    ) ;
}

export default App ;

应用程序编程接口

道具

支柱类型必需的默认值描述
处理新用户消息(...args: 任意[]) => 任意是的处理用户输入的函数，提交时将收到全文消息
标题细绳不'欢迎'小部件的标题
字幕细绳不“这是你的聊天字幕”小部件的副标题
发件人占位符细绳不“输入消息...”消息输入的占位符
个人资料头像细绳不将在响应中设置的个人资料图像
个人资料客户头像细绳不将在客户端消息上设置的个人资料图像
标题头像细绳不将显示在聊天标题旁边的图片
显示关闭按钮布尔值不错误的在全屏模式下显示或隐藏关闭按钮
全屏模式布尔值不错误的允许在全桌面模式下使用全屏
自动对焦布尔值不真的自动对焦或不根据用户输入
发射器(handleToggle) => 元素类型不使用自定义启动器组件代替默认组件
处理QuickButtonClicked (...args: 任意[]) => 任意不处理用户单击快速按钮的函数，单击时将收到“值”。
显示时间戳布尔值不真的在消息上显示时间戳
聊天ID细绳不'rcw-聊天容器' a11y 的聊天容器 ID
句柄切换(...args: 任意[]) => 任意不'rcw-聊天容器'处理小部件切换时的函数，将接收切换状态
启动器OpenLabel细绳不“打开聊天”关闭时启动器的 Alt 值
启动器关闭标签细绳不“关闭聊天”打开时启动器的 Alt 值
启动器OpenImg细绳不”本地或远程图像 url，如果未提供，将显示默认图像
启动器关闭图像细绳不”本地或远程图像 url，如果未提供，将显示默认图像
发送按钮Alt细绳不'发送'出于 a11y 目的发送按钮 alt
处理文本输入变化（事件）=> 任何不输入更改时触发的道具
处理提交（事件）=> 任何不提交消息时触发的属性，用于自定义验证
可调整大小布尔值不错误的允许通过拖动小部件的左边框来调整小部件大小的道具
表情符号布尔值不错误的启用表情符号选择器
显示徽章布尔值不真的允许显示或隐藏未读消息徽章的道具

风格

要更改您需要小部件具有的样式，只需覆盖将它们包装在容器中的 CSS 类并向其中添加您自己的样式即可！所有类都以rcw-为前缀，因此如果您没有其他类，它们不会覆盖它们。要覆盖，您可以这样做，例如： 

. rcw-conversation-container > . rcw-header {
  background-color : red;
}

. rcw-message > . rcw-response {
  background-color : black;
  color : white;
}

这样，您就可以保持 JS 干净，并将样式保留在 CSS 中。

留言

从 v3.0 开始，消息现在有一个可选 ID，可以在创建时添加。如果要添加新消息，可以使用以下方法：

  • 添加响应消息

    • 参数：
      • text：字符串（支持markdown）
      • id：字符串（可选）
    • 添加作为对用户输入的响应而编写的新消息的方法。

  • 添加用户留言

    • 参数：
      • text：字符串（支持markdown）
      • id：字符串（可选）
    • 此方法将添加以用户身份编写的新消息。请记住，它不会触发 prophandleNewUserMessage()

  • 添加链接片段

    • 参数：
      • 关联
    • 添加链接片段的方法。您需要为此方法提供一个链接对象，该对象的形状必须为： 
       {
  title : 'My awesome link' ,
  link : 'https://github.com/Wolox/react-chat-widget' ,
  target : '_blank'
}
    • 默认情况下， target值为_blank ，它将在新窗口中打开链接。

  • 渲染自定义组件

    • 参数：
      • 组件：要渲染的组件，
      • props：组件需要的道具，
      • showAvatar: boolean, 默认值: false;该组件将像消息一样使用头像进行渲染
    • 在消息容器内呈现自定义组件的方法。使用此方法，您可以添加您需要小部件具有的任何组件。

  • 设置快速按钮

    • 参数：
      • 按钮：具有键label和value的对象数组

响应和用户消息都支持 Markdown。

小部件行为

您还可以控制小部件的某些操作：

  • 切换小部件

    • params：没有预期的参数
    • 该方法是随意切换widget，而不需要触发启动器上的点击事件

  • 切换输入禁用

    • params：没有预期的参数
    • 切换消息输入的可用性以供用户书写的方法

  • 切换消息加载器

    • 切换显示为“正在键入...”样式的消息加载器。

  • 删除消息*

    • 参数：
      • count：要删除的消息从最后到第一个计数
      • id：要删除的消息id
    • 删除具有您之前使用addResponseMessage设置的 id 的消息，或根据位置删除或两者兼而有之。例如， deleteMessages(2, 'myId')将删除 id 为myId的消息和上一条消息。

  • 全部标记为已读

    • 将所有响应消息标记为已读。用户消息没有已读/未读属性。

  • 设置徽章计数

    • 参数：
      • 计数：数量
    • 从 v3.0 开始， badge属性已更改为从 Widget 内部进行管理。该方法是手动设置徽章编号。

小部件组件

自定义启动器

如果您需要非默认组件，您可以为启动器使用自定义组件，只需使用launcher属性： 

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

...

function MyApp ( ) {
  const getCustomLauncher = ( handleToggle ) =>
    < button onClick = { handleToggle } > This is my launcher component! </ button >

  return (
    < Widget
      . . .
      launcher = { handleToggle => getCustomLauncher ( handleToggle ) }
    />
  )
}

getCustomLauncher()是一种将返回Launcher组件的方法，如示例中所示。默认情况下，该 prop 传递的函数将接收handleToggle参数，该参数是切换小部件的方法。

关于

该项目由 Martín Callegari 维护，由 Wolox 编写。

展开
附加信息
相关应用
为您推荐
相关资讯 全部