chat ui react
1.0.0
Chat-Ui-React هي حزمة NPM لبناء واجهة المستخدم على الويب للمحادثة. توفر هذه الحزمة ما يلي:
يمكنك دمج هذا في الدردشات و chatbots عبر الإنترنت.
حاليًا ، يستخدم المكون Material-UI من React. إذا كنت تريد مكونًا آخر غير 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 إدخال الصوت من قبل المستخدم. إذا فشل إدخال الصوت ، يتم إرجاع Promise Reject .
try {
const response = await chatCtl . setActionRequest ( {
type : 'audio' ,
} ) ;
console . log ( response . audio ) ;
} catch ( e ) {
console . log ( e ) ;
} يستخدم هذا الإجراء مكونك المخصص كمدخل. حدد custom type . حدد المكون الخاص بك في Component .
تتبع المكونات المخصصة اتفاقيات React لإنشاء نماذج إدخال كالمعتاد. يتلقى chatController و actionRequest كخصائص. يتم تعيين هذا تلقائيًا عن طريق تفاعل الدردشة. بعد ذلك ، قم بتعيين المدخلات المستلمة من المستخدم إلى طريقة 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. جميع الحقوق محفوظة.
هذا المشروع مرخص بموجب شروط ترخيص معهد ماساتشوستس للتكنولوجيا.
