chat ui kit react ดาวน์โหลด - chat ui kit react ดาวน์โหลดซอร์สโค้ด

chat ui kit react

โค้ดแหล่งที่มา AI

v2.0.3

ดาวน์โหลด

chat ui kit react

สร้าง UI การแชทของคุณเองด้วยส่วนประกอบ React ในไม่กี่นาที
Chat UI Kit จาก chatscope เป็นชุดเครื่องมือ 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

การใช้งาน

อีเอสเอ็ม

 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 > ;