Download ChatUI - Download do código-fonte ChatUI

ChatUI

Código-Fonte de IA

1.0.0

Baixar

A linguagem de design de UI e a biblioteca React para UI conversacional

Site: https://chatui.io

Inglês | 简体中文

Características

? Melhores práticas : as melhores práticas para interação por chat com base em nossa experiência com Alime Chatbot
? TypeScript : escrito em TypeScript com tipos estáticos previsíveis
Responsivo : Design responsivo para se adaptar automaticamente a qualquer dispositivo
♿ Acessibilidade : suporte à acessibilidade e obtenha a certificação da Accessibility Research Association
? Tema : Personalização poderosa do tema em todos os detalhes
? Internacional : Suporte à internacionalização para dezenas de idiomas

Apoio Ambiental

Navegadores modernos (suportam variáveis CSS)
Internet Explorer 11 (com polyfills e variáveis CSS Polyfill/css-vars-ponyfill)

Borda	Firefox	Cromo	Safári	Safári iOS	WebView do Android
16+	31+	49+	9.1+	9,3+	6+

Instalar

npm install @chatui/core --save

yarn add @chatui/core

Uso

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