react chat widget 다운로드 - react chat widget 소스 코드 다운로드

react chat widget

AI 소스 코드

v3.1.3

다운로드

react chat widget

FArmy

특징

일반 텍스트 메시지 UI
링크의 스니펫 스타일(현재는 응답으로만)
완전히 사용자 정의 가능
사용하기 쉬움

설치

npm

npm install --save react-chat-widget

방사

yarn add react-chat-widget

용법

1- 루트 구성 요소에 위젯 구성 요소를 추가합니다.

 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 ;

API

소품

소품	유형	필수의	기본값	설명
새로운 사용자 메시지 처리	(...args: 임의[]) => 임의	예		사용자 입력을 처리하는 기능은 제출 시 전체 텍스트 메시지를 받습니다.
제목	끈	아니요	'환영'	위젯 제목
부제	끈	아니요	'이것이 당신의 채팅 자막입니다'	위젯의 부제목
발신자 자리 표시자	끈	아니요	'메시지를 입력하세요...'	메시지 입력의 자리 표시자
프로필아바타	끈	아니요		응답에 설정될 프로필 이미지
프로필클라이언트아바타	끈	아니요		클라이언트 메시지에 설정될 프로필 이미지
제목아바타	끈	아니요		채팅 제목 옆에 표시될 사진 이미지
표시닫기버튼	불리언	아니요	거짓	전체 화면 모드에서 닫기 버튼 표시 또는 숨기기
전체화면 모드	불리언	아니요	거짓	전체 데스크탑 모드에서 전체 화면 사용을 허용합니다.
자동 초점	불리언	아니요	진실	자동 초점 여부 또는 사용자 입력 없음
발사통	(handleToggle) => 요소 유형	아니요		기본값 대신 사용할 사용자 정의 실행기 구성요소
핸들QuickButton을 클릭했습니다.	(...args: 임의[]) => 임의	아니요		사용자가 빠른 버튼을 클릭하는 것을 처리하는 기능은 클릭 시 '값'을 받습니다.
쇼타임스탬프	불리언	아니요	진실	메시지에 타임스탬프 표시
채팅 ID	끈	아니요	'rcw-채팅-컨테이너'	a11y의 채팅 컨테이너 ID
핸들토글	(...args: 임의[]) => 임의	아니요	'rcw-채팅-컨테이너'	위젯이 전환될 때 처리하는 함수는 전환 상태를 수신합니다.
런처OpenLabel	끈	아니요	'오픈채팅'	닫혀 있을 때 런처의 Alt 값
런처닫기라벨	끈	아니요	'채팅 종료'	열려 있을 때 런처의 대체 값
런처OpenImg	끈	아니요	''	로컬 또는 원격 이미지 URL이 제공되지 않으면 기본 이미지가 표시됩니다.
런처닫기Img	끈	아니요	''	로컬 또는 원격 이미지 URL이 제공되지 않으면 기본 이미지가 표시됩니다.
sendButtonAlt	끈	아니요	'보내다'	a11y 목적으로 대체 버튼 보내기
HandleTextInputChange	(이벤트) => 임의	아니요		입력 변경 시 트리거되는 소품
핸들제출	(이벤트) => 임의	아니요		사용자 정의 검증에 사용되는 메시지가 제출될 때 트리거되는 Prop
크기 조정 가능	불리언	아니요	거짓	위젯의 왼쪽 테두리를 드래그하여 위젯의 크기를 조정할 수 있는 소품
이모티콘	불리언	아니요	거짓	이모티콘 선택기 활성화
쇼배지	불리언	아니요	진실	읽지 않은 메시지 배지를 표시하거나 숨길 수 있는 소품

스타일

위젯에 필요한 스타일을 변경하려면 컨테이너 내에 위젯을 래핑하는 CSS 클래스를 재정의하고 자신만의 스타일을 추가하면 됩니다! 모든 클래스에는 rcw- 접두사가 붙으므로 해당 클래스가 없는 경우 다른 클래스를 재정의하지 않습니다. 예를 들어 재정의하려면 다음을 수행할 수 있습니다.

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

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

이렇게 하면 JS를 깨끗하게 유지하고 CSS 내에서 스타일을 유지할 수 있습니다.

메시지

v3.0부터 메시지에는 생성 시 추가할 수 있는 선택적 ID가 있습니다. 새 메시지를 추가하려면 다음 방법을 사용할 수 있습니다.

추가응답메시지
- 매개변수:
  - 텍스트: 문자열(마크다운 지원)
  - id: 문자열(선택사항)
- 사용자 입력에 대한 응답으로 작성된 새 메시지를 추가하는 방법입니다.
사용자 메시지 추가
- 매개변수:
  - 텍스트: 문자열(마크다운 지원)
  - id: 문자열(선택사항)
- 이 메소드는 사용자로 작성된 새 메시지를 추가합니다. prop handlerNewUserMessage()를 트리거하지 않는다는 점을 명심하세요.
addLinkSnippet
- 매개변수:
  - 링크
- 링크 조각을 추가하는 방법입니다. 이 메소드에는 다음과 같은 형태의 링크 객체를 제공해야 합니다.
```
 {
  title : 'My awesome link' ,
  link : 'https://github.com/Wolox/react-chat-widget' ,
  target : '_blank'
}
```
- 기본적으로 target 값은 새 창에서 링크를 여는 _blank 입니다.
렌더커스텀컴포넌트
- 매개변수:
  - 컴포넌트: 렌더링할 컴포넌트,
  - props: 컴포넌트에 필요한 props,
  - showAvatar: 부울, 기본값: false; 구성 요소는 메시지와 같은 아바타로 렌더링됩니다.
- 메시지 컨테이너 내부에 사용자 정의 구성 요소를 렌더링하는 방법입니다. 이 방법을 사용하면 위젯에 필요한 구성요소를 추가할 수 있습니다.
빠른 버튼 설정
- 매개변수:
  - 버튼: 키 label 과 value 있는 객체 배열

응답과 사용자 메시지 모두에 마크다운이 지원됩니다.

위젯 동작

위젯의 특정 작업을 제어할 수도 있습니다.

토글위젯
- params: 예상되는 매개변수가 없습니다.
- 이 방법은 실행기에서 클릭 이벤트를 트리거할 필요 없이 위젯을 마음대로 전환하는 것입니다.
토글입력비활성화됨
- params: 예상되는 매개변수가 없습니다.
- 사용자가 쓸 수 있는 메시지 입력의 가용성을 전환하는 방법
토글MsgLoader
- "입력..." 스타일로 표시되는 메시지 로더를 토글합니다.
삭제메시지 *
- 매개변수:
  - count: 마지막부터 처음까지 카운트를 삭제하는 메시지
  - id: 삭제할 메시지 ID
- 이전에 addResponseMessage 사용하여 설정한 ID가 있는 메시지를 삭제하거나 위치를 기준으로 삭제하거나 둘 다를 삭제합니다. 예를 들어 deleteMessages(2, 'myId') ID가 myId 인 메시지와 이전 메시지를 삭제합니다.
MarkAllAsRead
- 모든 응답 메시지를 읽은 상태로 표시합니다. 사용자 메시지에는 읽음/읽지 않음 속성이 없습니다.
setBadgeCount
- 매개변수:
  - 개수: 숫자
- v3.0부터 badge Prop을 위젯 내에서 관리할 수 있도록 변경되었습니다. 이 방법은 배지 번호를 수동으로 설정하는 방법입니다.

위젯 구성요소

커스텀 런처

기본값이 아닌 것이 필요한 경우 실행기에 대한 사용자 정의 구성 요소를 사용할 수 있습니다. 간단히 실행 프로그램 소품을 사용하세요.

 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 ) }
    />
  )
}