react chat widget

react chat widget

คุณสมบัติ

• UI ข้อความธรรมดา
• รูปแบบตัวอย่างสำหรับลิงก์ (เป็นการตอบกลับในตอนนี้เท่านั้น)
• ปรับแต่งได้อย่างเต็มที่
• ใช้งานง่าย

การติดตั้ง

เวลา 22.00 น

npm install --save react-chat-widget

เส้นด้าย

yarn add react-chat-widget

การใช้งาน

1- เพิ่มส่วนประกอบ Widget ให้กับองค์ประกอบรูทของคุณ

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  return (
    < div className = "App" >
      < Widget />
    </ div >
  ) ;
}

export default App ;

2- เสาที่จำเป็นเพียงอย่างเดียวที่คุณต้องใช้คือ handleNewUserMessage ซึ่งจะรับอินพุตจากผู้ใช้

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

3- นำเข้าวิธีการเพื่อให้คุณเพิ่มข้อความในวิดเจ็ต (ดูข้อความ)

 import React from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this awesome chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
    addResponseMessage ( response ) ;
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

4- ปรับแต่งวิดเจ็ตให้ตรงกับการออกแบบแอพของคุณ! คุณสามารถเพิ่มอุปกรณ์ประกอบฉากทั้งสองเพื่อจัดการชื่อเรื่องของวิดเจ็ตและอวาตาร์ที่จะใช้ แน่นอน คุณสามารถเปลี่ยนสไตล์ที่วิดเจ็ตจะมีใน CSS ได้ตามใจชอบ

 import React , { useEffect } from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

import logo from './logo.svg' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this **awesome** chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

    return (
      < div className = "App" >
        < Widget
          handleNewUserMessage = { handleNewUserMessage }
          profileAvatar = { logo }
          title = "My new awesome title"
          subtitle = "And my cool subtitle"
        />
      </ div >
    ) ;
}

export default App ; 

เอพีไอ

อุปกรณ์ประกอบฉาก

ข้อเสนอ	พิมพ์	ที่จำเป็น	ค่าเริ่มต้น	คำอธิบาย
จัดการNewUserMessage	(...args: ใด ๆ[]) => ใด ๆ	ใช่		ฟังก์ชั่นในการจัดการการป้อนข้อมูลของผู้ใช้จะได้รับข้อความแบบเต็มเมื่อส่ง
ชื่อ	เชือก	เลขที่	'ยินดีต้อนรับ'	ชื่อเรื่องของวิดเจ็ต
คำบรรยาย	เชือก	เลขที่	'นี่คือคำบรรยายแชทของคุณ'	คำบรรยายของวิดเจ็ต
senderPlaceHolder	เชือก	เลขที่	'พิมพ์ข้อความ...'	ตัวยึดตำแหน่งของการป้อนข้อความ
โปรไฟล์Avatar	เชือก	เลขที่		รูปโปรไฟล์ที่จะตั้งในการตอบกลับ
โปรไฟล์ ClientAvatar	เชือก	เลขที่		รูปโปรไฟล์ที่จะตั้งค่าในข้อความของลูกค้า
titleAvatar	เชือก	เลขที่		รูปภาพที่จะแสดงข้างชื่อแชท
แสดงปุ่มปิด	บูลีน	เลขที่	เท็จ	แสดงหรือซ่อนปุ่มปิดในโหมดเต็มหน้าจอ
โหมดเต็มหน้าจอ	บูลีน	เลขที่	เท็จ	อนุญาตให้ใช้เต็มหน้าจอในโหมดเดสก์ท็อปเต็ม
ออโต้โฟกัส	บูลีน	เลขที่	จริง	ออโต้โฟกัสหรือไม่ป้อนข้อมูลของผู้ใช้
ตัวเรียกใช้งาน	(handleToggle) => ElementType	เลขที่		ส่วนประกอบ Launcher แบบกำหนดเองเพื่อใช้แทนค่าเริ่มต้น
จัดการ QuickButtonClicked	(...args: ใด ๆ[]) => ใด ๆ	เลขที่		ฟังก์ชั่นที่จัดการกับผู้ใช้ที่คลิกปุ่มด่วน จะได้รับ 'ค่า' เมื่อคลิก
แสดงประทับเวลา	บูลีน	เลขที่	จริง	แสดงการประทับเวลาบนข้อความ
รหัสแชท	เชือก	เลขที่	'rcw-แชทคอนเทนเนอร์'	รหัสคอนเทนเนอร์แชทสำหรับ a11y
จัดการสลับ	(...args: ใด ๆ[]) => ใด ๆ	เลขที่	'rcw-แชทคอนเทนเนอร์'	ฟังก์ชั่นในการจัดการเมื่อมีการสลับวิดเจ็ตจะได้รับสถานะการสลับ
ตัวเรียกใช้OpenLabel	เชือก	เลขที่	'เปิดแชท'	ค่า Alt สำหรับ laucher เมื่อปิด
ตัวเรียกใช้CloseLabel	เชือก	เลขที่	'ปิดแชท'	ค่า Alt สำหรับ laucher เมื่อเปิด
ตัวเรียกใช้OpenImg	เชือก	เลขที่	-	URL รูปภาพในเครื่องหรือระยะไกล หากไม่ได้ระบุไว้ URL จะแสดงรูปภาพเริ่มต้น
ตัวเรียกใช้CloseImg	เชือก	เลขที่	-	URL รูปภาพในเครื่องหรือระยะไกล หากไม่ได้ระบุไว้ URL จะแสดงรูปภาพเริ่มต้น
sendButtonAlt	เชือก	เลขที่	'ส่ง'	ส่งปุ่ม Alt เพื่อวัตถุประสงค์ a11y
จัดการ TextInputChange	(เหตุการณ์) => ใด ๆ	เลขที่		เสาที่ทริกเกอร์การเปลี่ยนแปลงอินพุต
จัดการส่ง	(เหตุการณ์) => ใด ๆ	เลขที่		Prop ที่ทริกเกอร์เมื่อมีการส่งข้อความ ใช้สำหรับการตรวจสอบที่กำหนดเอง
ปรับขนาดได้	บูลีน	เลขที่	เท็จ	เสาที่ช่วยให้ปรับขนาดวิดเจ็ตได้โดยการลากขอบด้านซ้าย
อีโมจิ	บูลีน	เลขที่	เท็จ	เปิดใช้งานเครื่องมือเลือกอิโมจิ
showBadge	บูลีน	เลขที่	จริง	เสาที่อนุญาตให้แสดงหรือซ่อนป้ายข้อความที่ยังไม่ได้อ่าน

สไตล์

หากต้องการเปลี่ยนสไตล์ที่คุณต้องการให้วิดเจ็ตมี เพียงแทนที่คลาส CSS ที่รวมคลาสเหล่านั้นไว้ในคอนเทนเนอร์และเพิ่มสไตล์ของคุณเองลงไป! คลาสทั้งหมดขึ้นต้นด้วย rcw- ดังนั้นคลาสเหล่านั้นจะไม่แทนที่คลาสอื่นของคุณในกรณีที่คุณไม่มีคลาสเหล่านั้น หากต้องการแทนที่ คุณสามารถทำได้ เช่น:

. rcw-conversation-container > . rcw-header {
  background-color : red;
}

. rcw-message > . rcw-response {
  background-color : black;
  color : white;
}

ด้วยวิธีนี้ คุณสามารถปล่อยให้ JS สะอาดและรักษาสไตล์ภายใน CSS ได้

ข้อความ

ตั้งแต่เวอร์ชัน 3.0 เป็นต้นไป ข้อความจะมี ID ตัวเลือกที่สามารถเพิ่มได้ในการสร้าง หากคุณต้องการเพิ่มข้อความใหม่ คุณสามารถใช้วิธีการต่อไปนี้:

• เพิ่มการตอบสนองข้อความ

  • พารามิเตอร์:
    • ข้อความ: สตริง (รองรับมาร์กดาวน์)
    • รหัส: สตริง (ไม่จำเป็น)
  • วิธีการเพิ่มข้อความใหม่ที่เขียนเป็นการตอบสนองต่อการป้อนข้อมูลของผู้ใช้

• เพิ่ม UserMessage

  • พารามิเตอร์:
    • ข้อความ: สตริง (รองรับมาร์กดาวน์)
    • รหัส: สตริง (ไม่จำเป็น)
  • วิธีการนี้จะเพิ่มข้อความใหม่ที่เขียนในฐานะผู้ใช้ โปรดทราบว่ามันจะไม่ทริกเกอร์ prop handleNewUserMessage()

• addLinkSnippet

  • พารามิเตอร์:
    • ลิงค์
  • วิธีการเพิ่มตัวอย่างลิงก์ คุณต้องจัดเตรียมออบเจ็กต์ลิงก์ให้กับเมธอดนี้ ซึ่งจะต้องอยู่ในรูปร่างของ:

     {
      title : 'My awesome link' ,
      link : 'https://github.com/Wolox/react-chat-widget' ,
      target : '_blank'
    }

  • ตามค่าเริ่มต้น ค่า target คือ _blank ซึ่งจะเปิดลิงก์ในหน้าต่างใหม่

• renderCustomComponent

  • พารามิเตอร์:
    • ส่วนประกอบ: ส่วนประกอบที่จะเรนเดอร์
    • อุปกรณ์ประกอบฉาก: อุปกรณ์ประกอบฉากที่ต้องการส่วนประกอบ
    • showAvatar: บูลีน ค่าเริ่มต้น: เท็จ; ส่วนประกอบจะแสดงผลด้วยอวตารเหมือนกับข้อความ
  • วิธีการแสดงองค์ประกอบที่กำหนดเองภายในที่เก็บข้อความ ด้วยวิธีนี้ คุณสามารถเพิ่มองค์ประกอบใดก็ได้ที่คุณต้องการให้วิดเจ็ตมี

• ตั้งค่า QuickButtons

  • พารามิเตอร์:
    • ปุ่ม: อาร์เรย์ของวัตถุที่มี label คีย์และ value

Markdown ได้รับการสนับสนุนสำหรับทั้งการตอบกลับและข้อความของผู้ใช้

ลักษณะการทำงานของวิดเจ็ต

คุณยังสามารถควบคุมการทำงานบางอย่างของวิดเจ็ตได้:

• สลับวิดเจ็ต

  • params: ไม่ต้องการพารามิเตอร์
  • วิธีนี้คือสลับวิดเจ็ตตามต้องการโดยไม่จำเป็นต้องทริกเกอร์เหตุการณ์การคลิกบนตัวเรียกใช้งาน

• สลับอินพุตปิดการใช้งาน

  • params: ไม่ต้องการพารามิเตอร์
  • วิธีการสลับความพร้อมของการป้อนข้อความเพื่อให้ผู้ใช้เขียน

• สลับ MsgLoader

  • สลับตัวโหลดข้อความที่แสดงเป็นรูปแบบ "กำลังพิมพ์..."

• ลบข้อความ *

  • พารามิเตอร์:
    • นับ: ข้อความที่จะลบนับจากสุดท้ายไปแรก
    • id: id ข้อความที่จะลบ
  • ลบข้อความที่มีรหัสที่คุณตั้งไว้ก่อนหน้านี้ด้วย addResponseMessage หรือลบตามตำแหน่งหรือทั้งสองอย่าง ตัวอย่างเช่น deleteMessages(2, 'myId') จะลบข้อความที่มี id myId และข้อความก่อนหน้า

• ทำเครื่องหมายทั้งหมดเป็น Read

  • ทำเครื่องหมายข้อความตอบกลับทั้งหมดว่าอ่านแล้ว ข้อความของผู้ใช้ไม่มีคุณสมบัติอ่าน/ยังไม่ได้อ่าน

• setBadgeCount

  • พารามิเตอร์:
    • นับ: จำนวน
  • ตั้งแต่เวอร์ชัน 3.0 เป็นต้นไป เสา badge กำลังมีการเปลี่ยนแปลงเพื่อให้สามารถจัดการได้จากภายในวิดเจ็ต วิธีนี้เป็นการตั้งค่าหมายเลขป้ายด้วยตนเอง

ส่วนประกอบวิดเจ็ต

ตัวเปิดแบบกำหนดเอง

คุณสามารถใช้ส่วนประกอบที่กำหนดเองสำหรับ Launcher ได้ หากคุณต้องการองค์ประกอบที่ไม่ใช่ค่าเริ่มต้น เพียงใช้ Prop ของ Launcher :

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

...

function MyApp ( ) {
  const getCustomLauncher = ( handleToggle ) =>
    < button onClick = { handleToggle } > This is my launcher component! </ button >

  return (
    < Widget
      . . .
      launcher = { handleToggle => getCustomLauncher ( handleToggle ) }
    />
  )
}

getCustomLauncher() เป็นวิธีการที่จะส่งคืนส่วนประกอบ Launcher ดังที่เห็นในตัวอย่าง ตามค่าเริ่มต้น ฟังก์ชันที่ส่งผ่านโดย prop นั้นจะได้รับพารามิเตอร์ handleToggle ซึ่งเป็นวิธีการที่จะสลับวิดเจ็ต

เกี่ยวกับ

โครงการนี้ดูแลโดย Martín Callegari และเขียนโดย Wolox