chat-box-widget

npmpackage.info

Gathering detailed insights and metrics for chat-box-widget

Other packages similar to chat-box-widget

@connectycube/chat-widget

0.32.1

A React component that seamlessly integrates ConnectyCube's real-time chat capabilities into your web applications. This widget offers an out-of-the-box solution for embedding chat features—such as instant messaging, user presence, and file sharing—withou

@upstash/rag-chat-widget

0.4.3

A customizable Reach chat widget that combines Upstash Vector for similarity search, Together AI for LLM, and Vercel AI SDK for streaming responses. This ready-to-use component provides an out of the box solution for adding RAG-Powered chat interfaces to

tourmie-chat-box

1.0.12

Custom Angular chat widget for Tourmie frontends

ssb-embedded-chat

2.0.1

A small widget for private chats between two people conducted via scuttlebutt. I will be using this for a game chat box for ssb-chess.

Gathering detailed insights and metrics for chat-box-widget

Example

1import React, {Component} from 'react' 2import {render} from 'react-dom' 3import {Launcher} from '../../src' 4 5class Demo extends Component { 6 7 constructor() { 8 super(); 9 this.state = { 10 messageList: messageHistory 11 }; 12 } 13 14 _onMessageWasSent(message) { 15 this.setState({ 16 messageList: [...this.state.messageList, message] 17 }) 18 } 19 20 _sendMessage(text) { 21 if (text.length > 0) { 22 this.setState({ 23 messageList: [...this.state.messageList, { 24 author: 'them', 25 type: 'text', 26 data: { text } 27 }] 28 }) 29 } 30 } 31 32 render() { 33 return (<div> 34 <Launcher 35 agentProfile={{ 36 teamName: 'react-live-chat', 37 imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png' 38 }} 39 onMessageWasSent={this._onMessageWasSent.bind(this)} 40 messageList={this.state.messageList} 41 showEmoji 42 /> 43 </div>) 44 } 45}

For more detailed examples see the demo folder.

Launcher

Launcher is the only component needed to use react-live-chat. 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:

prop	type	description
*agentProfile	object	Represents your product or service's customer service agent. Fields: teamName, imageUrl
onMessageWasSent	function(message)	Called when a message a message is sent with a message object as an argument.
messageList	[message]	An array of message objects to be rendered as a conversation.
showEmoji	bool	A bool indicating whether or not to show the emoji button

prop

type

description

*agentProfile

object

Represents your product or service's customer service agent. Fields: teamName, imageUrl

onMessageWasSent

function(message)

Called when a message a message is sent with a message object as an argument.

messageList

[message]

An array of message objects to be rendered as a conversation.

showEmoji

bool

A bool indicating whether or not to show the emoji button

Message Objects

Message objects are rendered differently depending on their type. Currently, only text and emoji types are supported. Each message object has an author field which can have the value 'me' or 'them'.

1{ 2 author: 'them', 3 type: 'text', 4 data: { 5 text: 'some text' 6 } 7} 8 9{ 10 author: 'me', 11 type: 'emoji', 12 data: { 13 code: 'someCode' 14 } 15} 16

Other packages similar to chat-box-widget

Other packages similar to chat-box-widget

Installations

Developer Guide

No

CommonJS

8.11.2

5.10.0

Pull Requests

0

0

0

Issues

0

0

0

Releases

Unable to fetch releases

Languages

Developer

haikyuu

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Chat-box

Features

Demo

Table of Contents

Installation

Example

Components

Launcher

Message Objects

Issues

Development

Library files

Demo app

Testing

Build library

Publish library

Example library built with this starter kit

10

10

0

0

0

0

0

0

0

0

1.7

/10