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 ) ;