@uloreto/react-chat-window NPM

@uloreto/react-chat-window

@uloreto/react-chat-window provides an intercom-like chat window that can be included easily in any project for free. It provides no messaging facilities, only the view component.

Installation

$ npm install @uloreto/react-chat-window
$ yarn add @uloreto/react-chat-window

Example

import React, { Component } from 'react'
import { Launcher } from '@uloreto/react-chat-window'

class Demo extends Component {
  constructor() {
    super();
    this.state = {
      messageList: messageHistory,
      newMessagesCount: 0,
      isOpen: false
    };
  }

  _onMessageWasSent(message) {
    this.setState({
      messageList: [...this.state.messageList, message],
      newMessagesCount: 0
    });
  }

  _onFilesSelected(fileList) {
    const objectURL = window.URL.createObjectURL(fileList[0]);

    this.setState({
      messageList: [...this.state.messageList, {
        type: 'file', author: 'me',
        data: {
          url: objectURL,
          fileName: fileList[0].name
        }
      }]
    });
  }

  _sendMessage(text) {
    if (text.length > 0) {
      const newMessagesCount = this.state.newMessagesCount + 1;
      this.setState({
        newMessagesCount: newMessagesCount,
        messageList: [...this.state.messageList, {
          author: 'them',
          type: 'text',
          is_chatbot: true,
          data: { text }
        }]
      });
    }
  }

  _handleClick() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  _handleReadMessages () {
    this.setState({
      newMessagesCount: 0
    })
  }

  render() {
    return <div>
      <TestArea
        onMessage={this._sendMessage.bind(this)}
      />
      <Launcher
        agentProfile={{
          teamName: 'My bot',
          teamExplanation: 'A bot'
        }}
        onMessageWasSent={this._onMessageWasSent.bind(this)}
        onFilesSelected={this._onFilesSelected.bind(this)}
        messageList={this.state.messageList}
        newMessagesCount={this.state.newMessagesCount}
        handleReadMessages={this._handleReadMessages.bind(this)}
        handleClick={this._handleClick.bind(this)}
        isOpen={this.state.isOpen}
        showEmoji
        showFileIcon
        verticalQuickReplies={true}
      />
    </div>;
  }
}

For more detailed examples see the demo folder.

Components

Launcher

Launcher is the only component needed to use react-chat-window. It will react dynamically to changes in messages. All new messages must be added via a change in props as shown in the example.

Launcher props:

variable	type	required	description
`agentProfile`	Agent profile object	yes	Represents your product or service's customer service agent. Fields: teamName (string), teamExplanation (string)
`handleClick`	`function`	yes	Intercept the click event on the launcher. No argument sent when function is called.
`handleReadMessages`	`function`	yes	Intercept the read messages event on the launcher. No argument sent when function is called.
`hideUserInputWithQuickReplies`	`boolean`	yes	Hides user input when there are quick replies. Defaults to `false`.
`isOpen`	`boolean`	yes	Force the open/close state of the chat window. If this is not set, it will open and close when clicked.
`isWebView`	`boolean`	no	Enable webchat for webview in apps. Defaults to `false`
`messageList`	`array of` Message object	yes	An array of message objects to be rendered as a conversation.
`mute`	`boolean`	no	Don't play sound for incoming messages. Defaults to `false`.
`newMessagesCount`	`number`	no	The number of new messages. If greater than 0, this number will be displayed in a badge on the launcher. Defaults to `0`.
`onFilesSelected`	`function(`fileList`)`	no	Called after file has been selected from dialogue in chat window.
`onMessageWasSent`	`function(`Message object`)`	yes	Called when a message is sent, with a message object as an argument.
`showEmoji`	`bool`	no	Whether or not to show the emoji button in the input bar. Defaults to `true`.
`showFileIcon`	`bool`	no	Whether or not to show the file button in the input bar. Defaults to `true`.
`showStartButton`	function	no	Called when we opened the chat and still does not contain any messages.
`showWelcomeMessage`	function	no	Called when we opened the chat and still does not contain any messages.
`verticalQuickReplies`	`boolean`	no	Quick replies in vertical mode	Defaults to `false`

Objects

Message Objects

Se agrega fecha de mensaje y letras iniciales del chatbot

{
  author: 'them',
  type: 'text',
  is_chatbot: true,
  data: {
    text: 'some text'
  },
  letters: "UL",
  date: "2021/12/21 15:20"
}

{
  author: 'me',
  type: 'emoji',
  is_chatbot: false,
  data: {
    code: 'someCode'
  }
  letters: "UL",
  date: "2021/12/21 15:26"
}

{
  author: 'me',
  is_chatbot: false,
  type: 'file',
  data: {
    url: 'somefile.mp3',
    fileName: 'Any old name'
  }
  letters: "UL",
  date: "2021/12/21 15:27"
}

{
  author: 'me',
  is_chatbot: false,
  type: 'image',
  data: {
    url: 'somefile.jpg'
  }
  letters: "UL",
  date: "2021/12/21 15:28"
}

{
  author: 'me',
  is_chatbot: false,
  type: 'audio',
  data: {
    url: 'somefile.mp3',
  }
  letters: "UL",
  date: "2021/12/21 15:30"
}

{
  author: 'me',
  is_chatbot: false,
  type: 'video',
  data: {
    url: 'somefile.mp4',
  }
  letters: "UL",
  date: "2021/12/21 15:48"
}

{
  author: 'them',
  type: 'text',
  is_chatbot: true,
  data: {
    text: 'some text'
  },
  quickReplies: [
    {
      author: 'me',
      type: 'text',
      data: { text: 'A quick reply' }
    },
    {
      author: 'me',
      type: 'emoji',
      data: { emoji: '🤓' }
    }
  ]
  letters: "UL",
  date: "2021/12/21 18:20"
}

Agent Profile Object

{
  teamName: 'Chatbot 🐱',
  teamExplanation: 'A chatbot'
}

react-component

@babel/core @types/react-audio-player emoji-picker-react react-h5-audio-player react-highlight.js react-is react-showdown video-react

@infinitebrahmanuniverse/nolb-_ul @everything-registry/sub-chunk-963 @zalastax/nolb-_ul

1.4.6

2 years ago

1.4.5

2 years ago

@uloreto/react-chat-window v1.4.6