تنزيل ChatUI - تنزيل كود مصدر ChatUI

ChatUI

كود الذكاء الاصطناعي

1.0.0

تنزيل

لغة تصميم واجهة المستخدم ومكتبة React لواجهة مستخدم المحادثة

موقع الويب: https://chatui.io

الإنجليزية | 简体中文

سمات

؟ أفضل الممارسات : أفضل الممارسات للتفاعل في الدردشة بناءً على تجربتنا في Alime Chatbot
؟ TypeScript : مكتوب بلغة TypeScript بأنواع ثابتة يمكن التنبؤ بها
سريع الاستجابة : تصميم سريع الاستجابة للتكيف تلقائيًا مع أي جهاز
♿ إمكانية الوصول : دعم إمكانية الوصول والحصول على شهادة من جمعية أبحاث إمكانية الوصول
؟ Theming : تخصيص موضوع قوي بكل التفاصيل
؟ دولي : دعم التدويل لعشرات اللغات

دعم البيئة

المتصفحات الحديثة (تدعم متغيرات CSS)
Internet Explorer 11 (مع polyfills ومتغيرات CSS Polyfill / css-vars-ponyfill)

حافة	فايرفوكس	الكروم	سفاري	iOS سفاري	عرض ويب أندرويد
16+	31+	49+	9.1+	9.3+	6+

ثَبَّتَ

npm install @chatui/core --save

yarn add @chatui/core

الاستخدام

 import Chat , { Bubble , useMessages } from '@chatui/core' ;
import '@chatui/core/dist/index.css' ;

const App = ( ) => {
  const { messages , appendMsg , setTyping } = useMessages ( [ ] ) ;

  function handleSend ( type , val ) {
    if ( type === 'text' && val . trim ( ) ) {
      appendMsg ( {
        type : 'text' ,
        content : { text : val } ,
        position : 'right' ,
      } ) ;

      setTyping ( true ) ;

      setTimeout ( ( ) => {
        appendMsg ( {
          type : 'text' ,
          content : { text : 'Bala bala' } ,
        } ) ;
      } , 1000 ) ;
    }
  }

  function renderMessageContent ( msg ) {
    const { content } = msg ;
    return < Bubble content = { content . text } / > ;
  }

  return (
    < Chat
      navbar = { { title : 'Assistant' } }
      messages = { messages }
      renderMessageContent = { renderMessageContent }
      onSend = { handleSend }
    / >
  ) ;
} ;