ChatUI下载 - ChatUI源码下载

ChatUI

Ai源码

1.0.0

下载

用于对话式 UI 的 UI 设计语言和 React 库

网址：https://chatui.io

英语 | 简体中文

特征

？最佳实践：根据我们对 Alime Chatbot 的经验得出的聊天交互最佳实践
？ TypeScript ：用 TypeScript 编写，具有可预测的静态类型
响应式：响应式设计可自动适应任何设备
♿ Accessibility ：辅助功能支持并获得辅助功能研究协会的认证
？主题：每个细节都有强大的主题定制
？国际化：支持数十种语言的国际化

环境支持

现代浏览器（支持 CSS 变量）
Internet Explorer 11（带有 Polyfill 和 CSS 变量 Polyfill / css-vars-ponyfill）

边缘	火狐浏览器	铬合金	狩猎之旅	iOS 浏览器	Android 网页视图
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 }
    / >
  ) ;
} ;