首頁>編程相關>Ai源碼
下載

react chat widget

遠徵軍

特徵

  • 純文字訊息使用者介面
  • 連結的片段樣式（目前僅作為回應）
  • 完全可定制
  • 方便使用

示範

安裝

新專案管理

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 ;

應用程式介面

道具

支柱類型必需的預設值描述
處理新用戶訊息(...args: 任何[]) => 任何是的處理使用者輸入的函數，提交時將收到全文訊息
標題細繩不'歡迎'小部件的標題
字幕細繩不“這是你的聊天字幕”小部件的副標題
寄件者佔位符細繩不“輸入訊息...”訊息輸入的佔位符
個人資料頭像細繩不將在回應中設定的個人資料圖像
個人資料客戶頭像細繩不將在客戶端訊息上設定的個人資料圖像
標題頭像細繩不將顯示在聊天標題旁的圖片
顯示關閉按鈕布林值不錯誤的在全螢幕模式下顯示或隱藏關閉按鈕
全螢幕模式布林值不錯誤的允許在全桌面模式下使用全螢幕
自動對焦布林值不真的自動對焦或不依使用者輸入
發射器(handleToggle) => 元素類型不使用自訂啟動器組件代替預設組件
處理QuickButtonClicked (...args: 任意[]) => 任意不處理使用者點擊快速按鈕的函數，點擊時將收到“值”。
顯示時間戳布林值不真的在訊息上顯示時間戳
聊天ID細繩不'rcw-聊天容器' a11y 的聊天容器 ID
句柄切換(...args: 任何[]) => 任何不'rcw-聊天容器'處理小部件切換時的函數，將接收切換狀態
啟動器OpenLabel細繩不“打開聊天”關閉時啟動器的 Alt 值
啟動器關閉標籤細繩不“關閉聊天”開啟時啟動器的 Alt 值
啟動器OpenImg細繩不」本地或遠端圖像 url，如果未提供它將顯示預設圖像
啟動器關閉影像細繩不」本機或遠端影像 url，如果未提供，將顯示預設影像
發送按鈕Alt細繩不'發送'出於 a11y 目的發送按鈕 alt
處理文字輸入變化（事件）=> 任何不輸入更改時觸發的道具
處理提交（事件）=> 任何不提交訊息時觸發的屬性，用於自訂驗證
可調整大小布林值不錯誤的允許透過拖曳小部件的左邊框來調整小部件大小的道具
表情符號布林值不錯誤的啟用表情符號選擇器
顯示徽章布林值不真的允許顯示或隱藏未讀訊息徽章的道具

風格

要更改您需要小部件具有的樣式，只需覆蓋將它們包裝在容器內的 CSS 類別並向其中添加您自己的樣式即可！所有類別都以rcw-為前綴，因此如果您沒有其他類，它們不會覆蓋它們。要覆蓋，您可以這樣做，例如： 

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

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

這樣，您就可以保持 JS 乾淨，並將樣式保留在 CSS 中。

留言

從 v3.0 開始，訊息現在有一個可選 ID，可以在建立時新增。

  • 新增回應訊息

    • 參數：
      • text：字串（支援markdown）
      • id：字串（可選）
    • 新增作為對使用者輸入的回應而編寫的新訊息的方法。

  • 新增用戶留言

    • 參數：
      • text：字串（支援markdown）
      • id：字串（可選）
    • 此方法將會新增以使用者身分編寫的新訊息。請記住，它不會觸發 prophandleNewUserMessage()

  • 新增連結片段

    • 參數：
      • 關聯
    • 加入連結片段的方法。您需要為此方法提供一個連結對象，該對象的形狀必須為： 
       {
  title : 'My awesome link' ,
  link : 'https://github.com/Wolox/react-chat-widget' ,
  target : '_blank'
}
    • 預設情況下， target值為_blank ，它將在新視窗中開啟連結。

  • 渲染自訂元件

    • 參數：
      • 元件：要渲染的元件，
      • props：組件所需的道具，
      • showAvatar: boolean, 預設值: false;該元件將像訊息一樣使用頭像進行渲染
    • 在訊息容器內呈現自訂元件的方法。使用此方法，您可以添加您需要小部件具有的任何組件。

  • 設定快速按鈕

    • 參數：
      • 按鈕：具有鍵label和value的物件數組

回應和用戶訊息都支援 Markdown。

小部件行為

您也可以控制小部件的某些操作：

  • 切換小工具

    • params：沒有預期的參數
    • 方法是隨意切換widget，而不需要觸發啟動器上的點擊事件

  • 切換輸入停用

    • params：沒有預期的參數
    • 切換訊息輸入的可用性以供使用者書寫的方法

  • 切換訊息載入器

    • 切換顯示為「正在鍵入...」樣式的訊息載入器。

  • 刪除訊息*

    • 參數：
      • count：要刪除的訊息從最後到第一個計數
      • id：要刪除的訊息id
    • 刪除具有您先前使用addResponseMessage設定的 id 的訊息，或根據位置刪除或兩者兼而有之。例如， deleteMessages(2, 'myId')將刪除 id 為myId的訊息和上一則訊息。

  • 全部標記為已讀

    • 將所有回應訊息標記為已讀。使用者訊息沒有已讀/未讀屬性。

  • 設定徽章計數

    • 參數：
      • 計數：數量
    • 從 v3.0 開始， badge屬性已變更為從 Widget 內部進行管理。此方法是手動設定徽章編號。

小部件組件

自訂啟動器

如果您需要非預設元件，則可以為啟動器使用自訂元件，只需使用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 編寫。

展開
附加信息
相關應用
爲您推薦
相關資訊 全部