chat ui react
1.0.0
Chat-ui-react เป็นแพ็คเกจ NPM สำหรับการสร้างเว็บการสนทนา UIs แพ็คเกจนี้มีสิ่งต่อไปนี้:
คุณสามารถรวมสิ่งนี้ไว้ในแชทออนไลน์และแชทบอทของคุณ
ปัจจุบันส่วนประกอบใช้วัสดุ UI Framework ของ React-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 เพื่อแจ้งให้ผู้ใช้สำหรับข้อความ
มีสองวิธีในการร้องขอการดำเนินการ: การดำเนินการครั้งเดียวและขอการดำเนินการเสมอ
ระบุ false สำหรับตัวเลือก always เพื่อขอการดำเนินการครั้งเดียวจากผู้ใช้ ค่าส่งคืนของวิธีการเป็น Promise ที่ส่งคืนอินพุตของผู้ใช้
const response = await chatCtl . setActionRequest ( {
type : 'text' ,
always : false ,
} ) ;
console . log ( response . value ) ; หากต้องการร้องขอการดำเนินการจากผู้ใช้เสมอระบุ true ในตัวเลือก always ระบุฟังก์ชั่นการโทรกลับที่รับอินพุตเนื่องจากผู้ใช้ป้อนหลายครั้ง หากต้องการยกเลิกคำขออินพุตจากผู้ใช้ให้เรียกใช้วิธี cancelActionRequest
chatCtl . setActionRequest (
{ type : 'text' , always : true } ,
( response ) => {
console . log ( response . value ) ;
}
) ;
chatCtl . cancelActionRequest ( ) ; มีการกระทำหลายประเภทเช่นข้อความและการเลือก
การกระทำนี้ป้อนสตริง
ระบุ text สำหรับ type ค่าส่งคืนของวิธีการคือข้อความที่ป้อนโดยผู้ใช้
const response = await chatCtl . setActionRequest ( { type : 'text' } ) ;
console . log ( response . value ) ; การดำเนินการนี้เลือกหนึ่งจากตัวเลือก
ระบุ select type ระบุตัวเลือกใน 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' } การดำเนินการนี้เลือกหลายตัวเลือก
ระบุ multi-select สำหรับ type ระบุตัวเลือกใน 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' }] การกระทำนี้อินพุตไฟล์
ระบุ file สำหรับ type คุณสามารถระบุ accept และ multiple เป็นแอตทริบิวต์ของแท็ก input ค่าส่งคืนของวิธีการคืออาร์เรย์ของไฟล์ที่ป้อนโดยผู้ใช้
const response = await chatCtl . setActionRequest ( {
type : 'file' ,
accept : 'image/*' ,
multiple : true ,
} ) ;
console . log ( response . files ) ; การกระทำนี้อินพุตเสียง
ระบุ audio สำหรับ type ค่าส่งคืนของวิธีการคือ Blob ของการป้อนเสียงโดยผู้ใช้ หากการป้อนข้อมูลเสียงล้มเหลวสัญญา Reject การ Promise จะถูกส่งคืน
try {
const response = await chatCtl . setActionRequest ( {
type : 'audio' ,
} ) ;
console . log ( response . audio ) ;
} catch ( e ) {
console . log ( e ) ;
} การกระทำนี้ใช้องค์ประกอบที่กำหนดเองของคุณเป็นอินพุต ระบุ custom สำหรับ type ระบุส่วนประกอบของคุณใน Component
ส่วนประกอบที่กำหนดเองปฏิบัติตามอนุสัญญา React เพื่อสร้างแบบฟอร์มอินพุตตามปกติ ได้รับ chatController และ actionRequest เป็นคุณสมบัติ สิ่งนี้ถูกตั้งค่าโดยอัตโนมัติโดย chat-ui-react จากนั้นตั้งค่าอินพุตที่ได้รับจากผู้ใช้เป็นวิธี setActionResponse ของคลาส ChatController สิ่งนี้สามารถรับได้โดยแอปพลิเคชันเป็นค่าส่งคืนของ 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
