chat ui react
1.0.0
Chat-Ui-React는 대화 웹 UI를 구축하기위한 NPM 패키지입니다. 이 패키지는 다음을 제공합니다.
이를 온라인 채팅 및 챗봇에 통합 할 수 있습니다.
현재 구성 요소는 React의 UI 프레임 워크 자료 -UI를 사용합니다. Material-UI 이외의 구성 요소를 원한다면 원래 구성 요소로 교체하여 사용할 수 있습니다.
데모 사이트를 참조하십시오.
example 디렉토리를 참조하십시오.
NPM으로 :
npm install chat-ui-react react react-dom @material-ui/core원사로 :
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 > 이 패키지는 채팅을 표시하는 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 지정합니다. input 태그의 속성으로 accept 및 multiple 지정할 수 있습니다. 이 메소드의 반환 값은 사용자가 입력 한 파일 배열입니다.
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 Conventions를 따라 평소와 같이 입력 양식을 작성합니다. chatController 및 actionRequest 속성으로받습니다. 이것은 Chat-Ui-React에 의해 자동으로 설정됩니다. 그런 다음 사용자에서 수신 된 입력을 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 ) ; 저작권 (C) 2020 Twihike. 모든 권리 보유.
이 프로젝트는 MIT 라이센스의 조건에 따라 라이센스가 부여됩니다.
