ChatUI -Download – Download ChatUI Quellcodes

ChatUI

AI-Quellcode

1.0.0

Herunterladen

Die UI-Designsprache und React-Bibliothek für Conversational UI

Website: https://chatui.io

Englisch | 简体中文

Merkmale

? Best Practices : Die Best Practice für die Chat-Interaktion basierend auf unserer Erfahrung mit Alime Chatbot
? TypeScript : Geschrieben in TypeScript mit vorhersehbaren statischen Typen
Responsive : Responsive Design zur automatischen Anpassung an jedes Gerät
♿ Barrierefreiheit : Unterstützung bei Barrierefreiheit und Erhalt der Zertifizierung von der Accessibility Research Association
? Theming : Leistungsstarke Theme-Anpassung bis ins kleinste Detail
? International : Internationalisierungsunterstützung für Dutzende Sprachen

Umweltunterstützung

Moderne Browser (unterstützen CSS-Variablen)
Internet Explorer 11 (mit Polyfills und CSS-Variablen Polyfill / css-vars-ponyfill)

Rand	Firefox	Chrom	Safari	iOS-Safari	Android WebView
16+	31+	49+	9.1+	9,3+	6+

Installieren

npm install @chatui/core --save

yarn add @chatui/core

Verwendung

 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 }
    / >
  ) ;
} ;