chat ui react下载 - chat ui react源代码下载

chat ui react

Ai源码

1.0.0

下载

chat-ui反应

CHAT-UI反应是用于构建对话网络UI的NPM软件包。此软件包提供以下内容：

反应组件
- 聊天消息
- 消息输入表格
控制组件显示的类

您可以将其纳入在线聊天机器人和聊天机器人中。

当前，该组件使用React的UI框架材料 - UI。如果您想要材料-UI以外的组件，则可以用原始组件替换并使用它。

演示

请参阅演示网站。

例子

请参阅example目录。

Echo-Bot：回声用户输入的聊天机器人。
CDN：快速入门的一种简单方法。

安装

node.js

使用NPM：

npm install chat-ui-react react react-dom @material-ui/core

与纱线：

yarn add chat-ui-react react react-dom @material-ui/core

CDN

 < script crossorigin =" anonymous " src =" https://unpkg.com/react@16/umd/react.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/react-dom@16/umd/react-dom.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/@material-ui/core@4/umd/material-ui.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/chat-ui-react@latest/dist/browser/chat-ui-react.umd.polyfill.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/@babel/standalone@7/babel.min.js " > </ script >

用法

该软件包由一个MuiChat组件组成，该组件显示聊天和一个控制聊天显示的ChatController类。下图显示了每个关系。

 +------------+           +------------------+           +-----------+
|            |   Call    |                  |   Call    |           |
|            |           |                  |           |           |
|  Your App  |  +----->  |  ChatController  |  +----->  |  MuiChat  |
|            |           |                  |           |           |
|            |           |                  |           |           |
+------------+           +------------------+           +-----------+

这种结构使我们只专注于将聊天显示传递给ChatController 。您不必担心显示组件的控制。

如果您不喜欢看到的内容，则可以用另一个组件替换MuiChat 。由于替换，该应用程序没有更改。

这是一个简单的示例，可以了解如何使用它。

 function App ( ) : React . ReactElement {
  const [ chatCtl ] = React . useState ( new ChatController ( ) ) ;

  React . useMemo ( async ( ) => {
    // Chat content is displayed using ChatController
    await chatCtl . addMessage ( {
      type : 'text' ,
      content : `Hello, What's your name.` ,
      self : false ,
    } ) ;
    const name = await chatCtl . setActionRequest ( { type : 'text' } ) ;
  } , [ chatCtl ] ) ;

  // Only one component used for display
  return < MuiChat chatController = { chatCtl } /> ;
}

在下文中，我们将解释如何使用ChatController 。

信息

要显示聊天消息，请使用addMessage方法。在self选项中，指定是您自己的消息还是他人的消息。

 await chatCtl . addMessage ( {
  type : 'text' ,
  content : `Hello, What's your name.` ,
  self : false ,
} ) ;

行动

使用setActionRequest方法提示用户获取消息。

动作数量

请求采取行动有两种方法：一次性诉讼，并始终请求诉讼。

一次性动作

为always选项指定false ，以向用户索取一次性操作。该方法的返回值是返回用户输入的Promise 。

 const response = await chatCtl . setActionRequest ( {
  type : 'text' ,
  always : false ,
} ) ;
console . log ( response . value ) ;

总是动作

要始终请求用户的操作，请在always选项中指定为true 。指定接收输入的回调函数，因为用户多次输入。要取消用户的输入请求，请调用cancelActionRequest方法。

 chatCtl . setActionRequest (
  { type : 'text' , always : true } ,
  ( response ) => {
    console . log ( response . value ) ;
  }
) ;
chatCtl . cancelActionRequest ( ) ;

动作类型

有几种类型的动作，例如文本和选择。

文本

此操作输入一个字符串。

为type指定text 。该方法的返回值是用户输入的消息。

 const response = await chatCtl . setActionRequest ( { type : 'text' } ) ;
console . log ( response . value ) ;

单个选择

此操作从选项中选择一个。

指定type的select 。在options中指定选项。 value用于HTML属性， text用于屏幕显示。该方法的返回值是用户选择的options的元素。

 const response = await chatCtl . setActionRequest ( {
  type : 'select' ,
  options : [
    {
      value : 'a' ,
      text : 'A' ,
    } ,
    {
      value : 'b' ,
      text : 'B' ,
    } ,
  ] ,
} ) ;
console . log ( response . option ) ;
// If A is selected
// { value: 'a', text: 'A' }

多重选择

此操作选择多个选项。

为type指定multi-select 。在options中指定选项。 value用于HTML属性，并且text用于显示。该方法的返回值是所选options 。

 const response = await chatCtl . setActionRequest ( {
  type : 'multi-select' ,
  options : [
    {
      value : 'a' ,
      text : 'A' ,
    } ,
    {
      value : 'b' ,
      text : 'B' ,
    } ,
  ] ,
} ) ;
console . log ( response . options ) ;
//  If A and B are selected
// [{ value: 'a', text: 'A' }, { value: 'b', text: 'B' }]

文件

此操作输入文件。

指定type file 。您可以指定accept和multiple input标签的属性。该方法的返回值是用户输入的文件数组。

 const response = await chatCtl . setActionRequest ( {
  type : 'file' ,
  accept : 'image/*' ,
  multiple : true ,
} ) ;
console . log ( response . files ) ;

声音的

此操作输入音频。

为type指定audio 。该方法的返回值是用户音频输入的Blob 。如果音频输入失败，则Reject拒绝Promise将退还。

 try {
  const response = await chatCtl . setActionRequest ( {
    type : 'audio' ,
  } ) ;
  console . log ( response . audio ) ;
} catch ( e ) {
  console . log ( e ) ;
}

风俗

此操作将您的自定义组件用作输入。指定type的custom定义。在Component中指定组件。

自定义组件遵循React惯例，像往常一样创建输入表格。它接收chatController和actionRequest作为属性。这是由CHAT-UI反应自动设置的。然后，将收到的输入从用户设置为ChatController类的setActionResponse方法。该应用程序可以作为setActionRequest的返回值接收。

 function GoodInput ( {
  chatController ,
  actionRequest ,
} : {
  chatController : ChatController ;
  actionRequest : ActionRequest ;
} ) {
  const chatCtl = chatController ;

  const setResponse = React . useCallback ( ( ) : void => {
    const res = { type : 'custom' , value : 'Good!' } ;
    chatCtl . setActionResponse ( actionRequest , res ) ;
  } , [ actionRequest , chatCtl ] ) ;

  return (
    < Button
      type = "button"
      onClick = { setResponse }
      variant = "contained"
      color = "primary"
    >
      Good!
    </ Button >
  ) ;
}

const custom = await chatCtl . setActionRequest ( {
  type : 'custom' ,
  Component : GoodInput ,
} ) ;
console . log ( custom . value ) ;