chat ui react
1.0.0
Chat-UI-React est un package NPM pour la création de UIS Web conversationnels. Ce package propose ce qui suit:
Vous pouvez incorporer cela dans vos chats et chatbots en ligne.
Actuellement, le composant utilise le framework d'interface utilisateur de React-UI-UI. Si vous voulez un composant autre que Material-UI, vous pouvez le remplacer par le composant d'origine et l'utiliser.
Voir le site de démonstration.
Voir l' example de répertoire.
Avec NPM:
npm install chat-ui-react react react-dom @material-ui/coreAvec du fil:
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 > Ce package se compose d'un composant MuiChat qui affiche le chat et une classe ChatController qui contrôle l'affichage du chat. La figure ci-dessous montre chaque relation.
+------------+ +------------------+ +-----------+
| | Call | | Call | |
| | | | | |
| Your App | +-----> | ChatController | +-----> | MuiChat |
| | | | | |
| | | | | |
+------------+ +------------------+ +-----------+
Cette structure nous permet de nous concentrer uniquement sur le passage de l'affichage de chat au ChatController . Vous n'avez pas à vous soucier du contrôle d'affichage des composants.
Si vous n'aimez pas ce que vous voyez, vous pouvez remplacer MuiChat par un autre composant. Il n'y a aucun changement dans l'application en raison du remplacement.
Voici un exemple simple pour comprendre comment l'utiliser.
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 } /> ;
} Dans ce qui suit, nous expliquerons comment utiliser ChatController .
Pour afficher le message de chat, utilisez la méthode addMessage . Dans l'option self , spécifiez s'il s'agit de votre propre message ou du message de quelqu'un d'autre.
await chatCtl . addMessage ( {
type : 'text' ,
content : `Hello, What's your name.` ,
self : false ,
} ) ; Utilisez la méthode setActionRequest pour inviter l'utilisateur à un message.
Il existe deux façons de demander une action: une action unique et toujours demander une action.
Spécifiez false pour l'option always pour demander une action unique de l'utilisateur. La valeur de retour de la méthode est une Promise qui renvoie l'entrée utilisateur.
const response = await chatCtl . setActionRequest ( {
type : 'text' ,
always : false ,
} ) ;
console . log ( response . value ) ; Pour toujours demander une action à l'utilisateur, spécifiez true dans l'option always . Spécifiez la fonction de rappel qui reçoit l'entrée car elle est entrée plusieurs fois par l'utilisateur. Pour annuler la demande d'entrée de l'utilisateur, appelez la méthode cancelActionRequest .
chatCtl . setActionRequest (
{ type : 'text' , always : true } ,
( response ) => {
console . log ( response . value ) ;
}
) ;
chatCtl . cancelActionRequest ( ) ; Il existe plusieurs types d'actions telles que le texte et la sélection.
Cette action entre une chaîne.
Spécifiez text pour type . La valeur de retour de la méthode est le message entré par l'utilisateur.
const response = await chatCtl . setActionRequest ( { type : 'text' } ) ;
console . log ( response . value ) ; Cette action en sélectionne une dans les options.
Spécifiez select pour type . Spécifiez les options dans options . value est utilisée pour les attributs HTML et text est utilisé pour l'affichage de l'écran. La valeur de retour de la méthode est l'élément des options sélectionnées par l'utilisateur.
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' } Cette action sélectionne plusieurs options.
Spécifiez multi-select pour type . Spécifiez les options dans options . value est utilisée pour les attributs HTML et text est utilisé pour l'affichage. La valeur de retour de la méthode est les options sélectionnées.
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' }] Cette action saisit un fichier.
Spécifiez file pour type . Vous pouvez spécifier accept et multiple attributs de la balise input . La valeur de retour de la méthode est un tableau de fichiers saisis par l'utilisateur.
const response = await chatCtl . setActionRequest ( {
type : 'file' ,
accept : 'image/*' ,
multiple : true ,
} ) ;
console . log ( response . files ) ; Cette action entre audio.
Spécifiez audio pour type . La valeur de retour de la méthode est le Blob de l'entrée audio par l'utilisateur. Si l'entrée audio échoue, la Promise rejetée Reject est renvoyée.
try {
const response = await chatCtl . setActionRequest ( {
type : 'audio' ,
} ) ;
console . log ( response . audio ) ;
} catch ( e ) {
console . log ( e ) ;
} Cette action utilise votre composant personnalisé en entrée. Spécifiez custom pour type . Spécifiez votre composant dans Component .
Les composants personnalisés suivent les conventions React pour créer des formulaires d'entrée comme d'habitude. Il reçoit chatController et actionRequest en tant que propriétés. Ceci est automatiquement défini par Chat-Ui-React. Ensuite, définissez l'entrée reçue de l'utilisateur sur la méthode setActionResponse de la classe ChatController . Ceci peut être reçu par la demande en tant que valeur de retour de 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 ) ; Copyright (C) 2020 Twihike. Tous droits réservés.
Ce projet est concédé sous licence de la licence du MIT.
