chat ui react
1.0.0
Chat-UI-React ist ein NPM-Paket zum Erstellen von Konversations-Web-UIS. Dieses Paket bietet Folgendes:
Sie können dies in Ihre Online -Chats und Chatbots einbeziehen.
Derzeit verwendet die Komponente das UI-Framework-Material von React. Wenn Sie eine andere Komponente als Material-UI wünschen, können Sie sie durch die ursprüngliche Komponente ersetzen und verwenden.
Siehe Demo -Site.
Siehe example .
Mit NPM:
npm install chat-ui-react react react-dom @material-ui/coreMit Garn:
yarn add chat-ui-react react react-dom @material-ui/core < 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 > Dieses Paket besteht aus einer MuiChat -Komponente, die den Chat und eine ChatController -Klasse anzeigt, die die Anzeige des Chat steuert. Die folgende Abbildung zeigt jede Beziehung.
+------------+ +------------------+ +-----------+
| | Call | | Call | |
| | | | | |
| Your App | +-----> | ChatController | +-----> | MuiChat |
| | | | | |
| | | | | |
+------------+ +------------------+ +-----------+
Diese Struktur ermöglicht es uns, uns ausschließlich auf das Übergeben des Chat -Displays an den ChatController zu konzentrieren. Sie müssen sich keine Sorgen um die Anzeigesteuerung von Komponenten machen.
Wenn Ihnen nicht gefällt, was Sie sehen, können Sie MuiChat durch eine andere Komponente ersetzen. Es gibt keine Änderung der App aufgrund des Ersatzes.
Hier ist ein einfaches Beispiel, um zu verstehen, wie man es benutzt.
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 } /> ;
} Im Folgenden werden wir erklären, wie Sie ChatController verwenden.
Verwenden Sie zur Anzeige der Chat -Nachricht die addMessage -Methode. Geben Sie in der Option self an, ob es sich um Ihre eigene Nachricht oder die Nachricht eines anderen anderen handelt.
await chatCtl . addMessage ( {
type : 'text' ,
content : `Hello, What's your name.` ,
self : false ,
} ) ; Verwenden Sie die setActionRequest -Methode, um den Benutzer für eine Nachricht aufzufordern.
Es gibt zwei Möglichkeiten, eine Aktion anzufordern: einmalige Aktion und immer eine Aktion anfordern.
Geben Sie false für die Option always an, eine einmalige Aktion vom Benutzer anzufordern. Der Rückgabewert der Methode ist ein Promise , das die Benutzereingabe zurückgibt.
const response = await chatCtl . setActionRequest ( {
type : 'text' ,
always : false ,
} ) ;
console . log ( response . value ) ; Um immer eine Aktion vom Benutzer anzufordern, geben Sie true in der always -Option an. Geben Sie die Rückruffunktion an, die die Eingabe empfängt, da sie vom Benutzer mehrmals eingegeben wird. Um die Eingabeanforderung vom Benutzer zu stornieren, rufen Sie die cancelActionRequest -Methode auf.
chatCtl . setActionRequest (
{ type : 'text' , always : true } ,
( response ) => {
console . log ( response . value ) ;
}
) ;
chatCtl . cancelActionRequest ( ) ; Es gibt verschiedene Arten von Aktionen wie Text und Auswahl.
Diese Aktion gibt eine Zeichenfolge ein.
Geben Sie text für type an. Der Rückgabewert der Methode ist die vom Benutzer eingegebene Nachricht.
const response = await chatCtl . setActionRequest ( { type : 'text' } ) ;
console . log ( response . value ) ; Diese Aktion wählt eine aus den Optionen aus.
Geben Sie select für type an. Geben Sie die Optionen in options . value wird für HTML -Attribute verwendet und text wird für die Bildschirmanzeige verwendet. Der Rückgabewert der Methode ist das Element der vom Benutzer ausgewählten 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' } Diese Aktion wählt mehrere Optionen aus.
Geben Sie multi-select für type . Geben Sie die Optionen in options . value wird für HTML -Attribute verwendet und text wird für die Anzeige verwendet. Der Rückgabewert der Methode sind die ausgewählten 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' }] Diese Aktion gibt eine Datei ein.
Geben Sie file für type an. Sie können accept und multiple als Attribute des input angeben. Der Rückgabewert der Methode ist ein Array von Dateien, die vom Benutzer eingegeben wurden.
const response = await chatCtl . setActionRequest ( {
type : 'file' ,
accept : 'image/*' ,
multiple : true ,
} ) ;
console . log ( response . files ) ; Diese Aktion gibt Audio ein.
Geben Sie audio für type . Der Rückgabewert der Methode ist der Blob der Audioeingabe durch den Benutzer. Wenn der Audioeingang fehlschlägt, wird das Reject Promise zurückgegeben.
try {
const response = await chatCtl . setActionRequest ( {
type : 'audio' ,
} ) ;
console . log ( response . audio ) ;
} catch ( e ) {
console . log ( e ) ;
} Diese Aktion verwendet Ihre benutzerdefinierte Komponente als Eingabe. custom für type angeben. Geben Sie Ihre Komponente in Component .
Benutzerdefinierte Komponenten folgen den React -Konventionen, um wie gewohnt Eingangsformulare zu erstellen. Es empfängt chatController und actionRequest als Eigenschaften. Dies wird automatisch durch CHAT-UI-Reaktion festgelegt. Setzen Sie dann die vom Benutzer empfangene Eingabe auf die setActionResponse -Methode der ChatController -Klasse. Dies kann durch die Anwendung als Rückgabewert der setActionRequest empfangen werden.
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 ) ; Copyright (C) 2020 Twihike. Alle Rechte vorbehalten.
Dieses Projekt ist gemäß den Bedingungen der MIT -Lizenz lizenziert.
