chat ui kit reactダウンロード - chat ui kit reactソースコードのダウンロード

chat ui kit react

AI ソースコード

v2.0.3

ダウンロード

chat ui kit react

React コンポーネントを使用して独自のチャット UI を数分で構築します。
chatscope のチャット UI キットは、Web チャットアプリケーションを開発するためのオープンソース UI ツールキットです。

粘着スクロールバー、コンテンツ編集可能、応答性、CSS ハックに苦労することにうんざりしていませんか?
このキットはそんなあなたにぴったりです！すべての機能をご覧ください。

Chat UI Kit は、ワープスピードでチャット UI 開発を実現します

デモ

フル機能のチャットアプリケーション: https://demo.chatscope.io
ゾーイ、アカネ、エリオット、ジョー: https://chatscope.io/demo/chat-friends
火星人とチャットします (彼は時々対応可能です): https://mars.chatscope.io

デモのインデックス: https://chatscope.io/demo。

インストール

コンポーネントライブラリ

糸の使用:

yarn add @chatscope/chat-ui-kit-react

npm の使用:

npm install @chatscope/chat-ui-kit-react

スタイル

糸の使用:

yarn add @chatscope/chat-ui-kit-styles

npm の使用:

npm install @chatscope/chat-ui-kit-styles

使用法

ESM

 import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css" ;
import {
  MainContainer ,
  ChatContainer ,
  MessageList ,
  Message ,
  MessageInput ,
} from "@chatscope/chat-ui-kit-react" ;

< div style = { { position : "relative" , height : "500px" } } >
  < MainContainer >
    < ChatContainer >
      < MessageList >
        < Message
          model = { {
            message : "Hello my friend" ,
            sentTime : "just now" ,
            sender : "Joe" ,
          } }
        />
      </ MessageList >
      < MessageInput placeholder = "Type message here" />
    </ ChatContainer >
  </ MainContainer >
</ div > ;