Awesome chat widget for your React App

Overview

React Chat Widget

circle-ci npm

FEArmy

Features

  • Plain text message UI
  • Snippet style for links (only as responses for now)
  • Fully customizable
  • Easy to use

demonstration

Installation

npm

npm install --save react-chat-widget

yarn

yarn add react-chat-widget

Usage

1- Add the Widget component to your root component

); } export default App; ">
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- The only required prop you need to use is the handleNewUserMessage, which will receive the input from the user.

); } export default App; ">
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 the methods for you to add messages in the Widget. (See messages)

); } export default App; ">
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- Customize the widget to match your app design! You can add both props to manage the title of the widget and the avatar it will use. Of course, feel free to change the styles the widget will have in the CSS

); } export default App; ">
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

Props

prop type required default value description
handleNewUserMessage (...args: any[]) => any YES Function to handle the user input, will receive the full text message when submitted
title string NO 'Welcome' Title of the widget
subtitle string NO 'This is your chat subtitle' Subtitle of the widget
senderPlaceHolder string NO 'Type a message...' The placeholder of the message input
profileAvatar string NO The profile image that will be set on the responses
profileClientAvatar string NO The profile image that will be set on the client messages
titleAvatar string NO The picture image that will be shown next to the chat title
showCloseButton boolean NO false Show or hide the close button in full screen mode
fullScreenMode boolean NO false Allow the use of full screen in full desktop mode
autofocus boolean NO true Autofocus or not the user input
launcher (handleToggle) => ElementType NO Custom Launcher component to use instead of the default
handleQuickButtonClicked (...args: any[]) => any NO Function to handle the user clicking a quick button, will receive the 'value' when clicked.
showTimeStamp boolean NO true Show time stamp on messages
chatId string NO 'rcw-chat-container' Chat container id for a11y
handleToggle (...args: any[]) => any NO 'rcw-chat-container' Function to handle when the widget is toggled, will receive the toggle status
launcherOpenLabel string NO 'Open chat' Alt value for the laucher when closed
launcherCloseLabel string NO 'Close chat' Alt value for the laucher when open
launcherOpenImg string NO '' local or remote image url, if not provided it will show default image
launcherCloseImg string NO '' local or remote image url, if not provided it will show default image
sendButtonAlt string NO 'Send' Send button alt for a11y purposes
handleTextInputChange (event) => any NO Prop that triggers on input change
handleSubmit (event) => any NO Prop that triggers when a message is submitted, used for custom validation
resizable boolean NO false Prop that allows to resize the widget by dragging it's left border
emojis boolean NO false enable emoji picker
showBadge boolean NO true Prop that allows to show or hide the unread message badge

Styles

To change the styles you need the widget to have, simply override the CSS classes wrapping them within the containers and add your own style to them! All classes are prefixed with rcw- so they don't override your other classes in case you are not hasing them. To override, you can do, for expample:

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

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

That way, you can leave the JS clean and keep the styles within the CSS.

Messages

As of v3.0, messages now have an optional ID that can be added on creation.If you want to add new messages, you can use the following methods:

  • addResponseMessage

    • params:
      • text: string (supports markdown)
      • id: string (optional)
    • Method to add a new message written as a response to a user input.
  • addUserMessage

    • params:
      • text: string (supports markdown)
      • id: string (optional)
    • This method will add a new message written as a user. Keep in mind it will not trigger the prop handleNewUserMessage()
  • addLinkSnippet

    • params:
      • link
    • Method to add a link snippet. You need to provide this method with a link object, which must be in the shape of:
      {
        title: 'My awesome link',
        link: 'https://github.com/Wolox/react-chat-widget',
        target: '_blank'
      }
    • By default, target value is _blank which will open the link in a new window.
  • renderCustomComponent

    • params:
      • component: Component to be render,
      • props: props the component needs,
      • showAvatar: boolean, default value: false; the component will be rendered with the avatar like the messages
    • Method to render a custom component inside the messages container. With this method, you can add whatever component you need the widget to have.
  • setQuickButtons

    • params:
      • buttons: An array of objects with the keys label and value

Markdown is supported for both the responses and user messages.

Widget behavior

You can also control certain actions of the widget:

  • toggleWidget

    • params: No params expected
    • This method is to toggle the widget at will without the need to trigger the click event on the launcher
  • toggleInputDisabled

    • params: No params expected
    • Method to toggle the availability of the message input for the user to write on
  • toggleMsgLoader

    • Toggles the message loader that shows as a "typing..." style.
  • deleteMessages*

    • params:
      • count: messages to delete counting from last to first
      • id: message id to delete
    • Delete messages that either have an id you previously set with the addResponseMessage or delete based on position or both of them. For example deleteMessages(2, 'myId') will delete the message that has the id myId and the previous message.
  • markAllAsRead

    • Marks all response messages as read. The user messages doesn't have the read/unread property.
  • setBadgeCount

    • params:
      • count: number
    • As of v3.0, the badge prop is being changed to be managed from within the Widget. This method is manually set the badge number.

Widget components

Custom Launcher

You can use a custom component for the Launcher if you need one that's not the default, simply use the launcher 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)}
    />
  )
}

getCustomLauncher() is a method that will return the Launcher component as seen in the example. By default, the function passed by that prop, will receive the handleToggle parameter which is the method that will toggle the widget.

About

This project is maintained by Martín Callegari and it was written by Wolox.

Wolox

Comments
  • When render this component from server, it will report an error window is not define

    When render this component from server, it will report an error window is not define

    The error detail is here:

    /Path/To/Project/node_modules/react-chat-widget/lib/index.js:555 return window && document && document.all && !window.atob; ^

    ReferenceError: window is not defined at /Path/To/Project/node_modules/react-chat-widget/lib/index.js:555:9 at /Path/To/Project/node_modules/react-chat-widget/lib/index.js:544:46 at module.exports (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:589:46) at Object. (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:13376:36) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object. (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:13322:1) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object.defineProperty.value (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:13249:15) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object.defineProperty.value (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:13177:21) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object.defineProperty.value (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:13079:15) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object. (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:9460:15) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object.defineProperty.value (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:9423:12)

    do you have any idea to fix this or some workflow?

    bug 
    opened by xalc 14
  • Adding quick replies

    Adding quick replies

    I would like to use quick replies in my chat (see the messenger documentation) It would basically be like a bubble, without the agent picture with some propositions, and when the user click on it, it is displayed as a user bubble.

    Ideally, the quick replies could have a display value and an internal value (one displayed to the user, and one that can be sent to a backend API)

    Do you plan to add this feature ? I think I could make it work with a custom component but it would be nice to have a addQuickReplies() like addLinkSnippet()

    feature request 
    opened by thomas-negrault 11
  • handleNewUserMessage is doing nothing ?

    handleNewUserMessage is doing nothing ?

    Hello,

    I have just installed react-chat-widget and set it up correctly.

    I can add messages to it using addResponseMessage and everything looks good.

    BUT when I enter some text in the chat input and press 'enter' or click on the send button, nothing is happening. Nothing in the console as well, no errors or logs from the handleNewUserMessage callback.

    I don't get it as it's the most basic feature.

    import React, {useEffect} from "react";
    import {addResponseMessage, Widget} from "react-chat-widget";
    
    import "react-chat-widget/lib/styles.css";
    
    function App() {
        useEffect(() => {
            addResponseMessage("Hello");
            addResponseMessage("What would you like to do ?");
        }, []);
    
        const handleNewUserMessage = (newMessage) => {
            console.log("New message incoming!", newMessage);
            // Now send the message throught the backend API
            addResponseMessage("ok");
        };
    
        return (
            <div className="App">
                <Widget
                    handleNewUserMessage={handleNewUserMessage}>
            </div>
        );
    }
    

    any help would be welcome, thanks

    opened by Draym 7
  • Scope header css class to conversation-container

    Scope header css class to conversation-container

    This was causing the problem I described in #20. A simple scss class scope fixed the problem. I realize that there might be other places where similar changes might need to be made, but I thought I should keep it to the smallest change possible for this particular fix. I'm open to taking on the more extensive change, but would also need to become much more familiar with your code before I can take that on.

    opened by charlesj 7
  • As new version of v3, is there any react way to clear input, unlike #12.

    As new version of v3, is there any react way to clear input, unlike #12.

    Thanks for this awesome project. It's so elegant, beautiful and easy to use.

    I have confused after I trying this awesome component and reading readme.

    Is there call backs for clearing input after user inputting message? Or how to get the component of input, so I can clear it manually?

    I had searched all issues. Only #12 is talking about input component. But the answer is using css to clear input. Is there any react way to do some thing?

    opened by leopku 6
  • Typescript no type definition

    Typescript no type definition

    Workaround.

    1. Add "paths": { "" : ["src/@custom_types/"] }, to your tsconfig.json

    2. Add a folder named @custom_types to your src folder.

    3. Add a file named react-chat-widget.d.ts and insert the following content: import { Widget } from 'react-chat-widget';

    declare module 'react-chat-widget'{ class Widget extends React.Component<SimpleSelectProps, any> {} function addResponseMessage(input: String): any; function toggleMsgLoader(); function setQuickButtons(input: Array): any; function addUserMessage(input: String): any; function toggleWidget(): any; } 4. Hit save and now all should work.

    opened by inventivejon 6
  • CSS issue on responsive fullscreen mode

    CSS issue on responsive fullscreen mode

    Hi, as you can see in the following screen shot, in the responsive fullscreen mode, the .widget-container always has height: 100% width: 100% and z-index: 9999, all other elements in my page are beneath this widget-containe layer, so nothing accessible in this mode.

    image

    Thanks in advance for your help.

    bug 
    opened by shye0000 6
  • Time / date stamp

    Time / date stamp

    Feature request

    Add timestamps to each post. Additionally have the ability to get/set the timestamp of each post.

    For example I want to populate the chat from a database of the user's chat history and I need to add the date and time of each message.

    question feature request 
    opened by Dobby89 5
  • Can I use customLauncher via node_modules 'react-chat-widget' ?

    Can I use customLauncher via node_modules 'react-chat-widget' ?

    Hello,

    i dowloaded 'react-chat-widget' via npm ( npm i react-chat-widget ). After I import it in my file.

    I want to have a custom launcher.

    Can I use customLauncher method or I need to git clone this project ?

    Thank you.

    opened by SelimLemmouchi 5
  • Cannot read property 'set' of undefined

    Cannot read property 'set' of undefined

    If I add this profileAvatar = {logo} on the Widget Component, this will trigger an error.

    Full code on App.js

    import { Widget, addResponseMessage } from 'react-chat-widget';
    
    import 'react-chat-widget/lib/styles.css';
    import logo from './logo-small.png';
    
    class App extends Component {
      componentDidMount() {
        addResponseMessage("Welcome to this awesome chat!");
      }
      handleNewUserMessage = (newMessage) => {
        console.log(`New message incomig! ${newMessage}`);
        // Now send the message throught the backend API
        // addResponseMessage(newMessage);
      }
    
      render() {
        return (
          <div className="App">
            <Widget
              handleNewUserMessage={this.handleNewUserMessage}
              profileAvatar = {logo}
              title="Test Title"
              subtitle="Test Sub"
            />
          </div>
        );
      }
    }
    
    export default App;
    

    err

    bug 
    opened by denis0826 5
  • Redux is using the wrong webpack NODE_ENV

    Redux is using the wrong webpack NODE_ENV

    after building and deploying the production bundle, I get this error:

    You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

    anyone else encountered it?

    opened by udi-d 5
  • Fix handleSubmit and updated packages

    Fix handleSubmit and updated packages

    I made handleSubmit originally to provide a boolean response that would allow the message or not. That was not working. I updated it to work and updated the tests to show it in action.

    I also updated all the packages to the latest of everything.

    opened by redapollos 0
  • New messages are only rendered when the widget is reopened

    New messages are only rendered when the widget is reopened

    I followed the tutorial and after a few tweaks, I managed to get the widget to work more or less as expect. The only problem I'm having right now is that new messages only show up when we reopen the widget.

    My project uses React ^18.2.0 (which is probably the source of the problem, considering other issues that are still open)

    opened by LeonardoEstrela1999 0
  • Bump loader-utils from 1.4.0 to 1.4.2

    Bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • NPM peer error when using React v18 - npm ERR! Could not resolve dependency:

    NPM peer error when using React v18 - npm ERR! Could not resolve dependency:

    My project uses [email protected]"^18.2.0", and I get the following error: npm ERR! Could not resolve dependency: peer [email protected]"^17.0.2" from [email protected] when trying to install this package.

    Should I install it by force or maybe a bump in React version is coming in a future update ?

    opened by GeorgeFlorian 4
  • Bump terser from 5.10.0 to 5.14.2

    Bump terser from 5.10.0 to 5.14.2

    Bumps terser from 5.10.0 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Chat window not opening when click on bubble

    Chat window not opening when click on bubble

    import { Widget } from "react-chat-widget"; import "react-chat-widget/lib/styles.css";

    export default function App() { return (

    <Widget />
    

    ); }

    opened by viraj-glide 3
Releases(v3.1.3)
  • v3.1.3(Dec 1, 2021)

  • v3.1.0(Jul 30, 2021)

    v3.1.0 🚀

    Hello everyone! As always, thank you for using this little component. As for the updates in this version:

    • Updated React to v17 and Webpack to v5 (#250 and #251)
    • Fixed the issue regarding testing tooling, big TODO regarding tests (#253)
    • We've added Emoji picker to the widget #259
    • Also, the #261 PR adds a new feature in which you can resize the widget
    • #262 will let you hide or show the unread badge
    • #263 adds a profile avatar to the end-user in case you want them to have one

    Huge thank you to @CrisVega08 and @renzowolox for their contributions to this project.

    Source code(tar.gz)
    Source code(zip)
  • v3.0.3(May 30, 2020)

    v3.0.3 📦 🚀

    New features

    • #181 Image preview and image viewer. Thank you very much @Here21!
    • #194 Add new handleSubmit for new messages to be handled. Thank you very much @redapollos!
    Source code(tar.gz)
    Source code(zip)
  • v3.0.2(May 15, 2020)

    v3.0.2 🚀 📦

    Bug fixing 🐛

    • #189 Change the setQuickButtons function with the possibility to set as parameter an empty array, that way "reseting" the quick buttons (fix #188)
    • #187 and #185 Fixes small typos in README

    Thank you to everyone who is contributing to this project!

    Source code(tar.gz)
    Source code(zip)
  • v3.0.1(May 4, 2020)

  • v3.0.0(Apr 17, 2020)

    v3.0.0! 🎉 📦 🚀

    The one with TypeScript

    Thank you so much for all the issues and PRs you submitted. As of this version we included some of the most important features the component was missing and a complete rewrite to TS as well as a types declaration file for better support. We are still missing some key points and features but we are working on them.

    New features

    • Add messages deletion based on #137 (thank you @thiagocavalcanti )
    • Add onTextInputChange new prop based on #79 (thank you @geison20 )
    • Add better support for a11y based on #120 (thank you @nzambello )
    • Change badge component to handle automatically new messages received, deprecating the badge prop
    • Add timestamp to messages, now they will display underneath the message and also added a new prop in case you don't want to show it
    • Add a new optional id to messages
    • Mark messages as read/unread

    Support and dependencies

    • Add TypeScript and types definition for better TypeScript support
    • Update React, Babel, Webpack, Redux and all dev dependencies versions to latest

    Fixes

    • Fix some issues regarding QuickButtons component
    • Fix addLinkSnippet type issue
    • Fix prod configuration to export only the widget

    Docs

    • Update to docs to match new features and changes

    Working on

    • Better Avatar support and interaction
    • Emoji support
    • Sender component rewrite to handle better long messages
    • Better DX/UX of QuickButtons
    Source code(tar.gz)
    Source code(zip)
  • v2.1.4(Jul 25, 2018)

    v2.1.4 is out now! 🎉 📦

    It's been a long time since the last release, so this one brings some really awesome changes.

    • Now we have a proper dev environment! 🎉 Thanks to the great contribution of @adantoscano, there's now a dev environment which can be used for contribution purposes 😄 (Thanks for your support, really appreciated)
    • Changed folder structure
    • There's a new way to render a custom Launcher component. Check the documentation for further information
    • Since there were a lot of conflicts with the CSS classes, we changed ours with a prefix rcw- #68

    Thanks again for your support, we'll try to update this component more often!

    Source code(tar.gz)
    Source code(zip)
  • v2.1.3(Apr 13, 2018)

    New Realease v.2.1.3 :package: :tada:

    Hello guys, long time no see! Sorry for that, these last months were really full of work so I couldn't catch a break and use some time to fix and pay attention to this component module. Now, first of all I want to thank you for the issues reported and the PRs uploaded (I've seen the ones that are bug fixing, the ones with new features will be reviewed next week, I promise!).

    For this version change log, I've added some fixing for bugs reported. Basically, it's all explained in #51 but it is:

    • Bumped the required packages and React to the latest version of each one
    • Added ExtractTextWebpackPlugin to the Webpack configuration
    • New Webpack configuration now does a ready-for-production build
    • Fix for #21
    • Add fix for #40 and #35
    • Add the bug fixes that fixes the CSS overriding issue

    Thanks once again for your incredible support! :heart:

    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Sep 25, 2017)

    v2.1.1 :package:

    This release is for adding the full screen in non responsive mobile views. Just set the fullScreenMode prop to true and you are ready to go! :smile:

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Sep 21, 2017)

    v2.1.0 :package: :tada:

    • Custom components Now it's possible for you to render custom components inside the chat
    • Full screen responsive In responsive mode, the chat will change to full screen as shown in #17
    • New methods to control widget behavior Now you have methods to control when the widget should open (as addressed in #15 ) and the possibility to block the user text input
    • New way to apply styles You will no longer need to create your styles in JS and use a prop to apply them, just use CSS to override the classes
    • Markdown is now supported It's supported for both user messages and response messages

    New contributing file

    If you are thinking in contributing with this project, please check out that file and learn how to do it :smile:

    Source code(tar.gz)
    Source code(zip)
  • v2.0.1(Sep 11, 2017)

  • v2.0.0(Sep 7, 2017)

    v2.0.0 New API :package: :tada:

    This new version brings a new API. Now it's simpler to add messages and interact with the Widget.

    We knew the responses array was not the best solution, so now there are methods for you to trigger different actions. The methods are:

    addUserMessage(text);
    
    addResponseMessage(text);
    
    addLinkSnippet(link);
    

    These methods have the intention of giving you more control over the widget and for new features, the methods for them are going to be added as well.

    The whole implementation is written in the PR #11

    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Aug 24, 2017)

    Bug fixes :package:

    This new version contains fixes for bugs founded under v1.0 usage.

    • Fix issue when responding with instant messages will result in the user messages not showing at all
    • Add a default white background color to the messages container and a way to customize it too (adding background images, etc)
    • Add a high z-index
    • Fix messages container not scrolling to bottom when re open the conversation
    • Fix NPM and CI build badges in README. Now they'll go to the correct pages when clicked

    The whole list of what's added is in the #10 Pull Request.

    Source code(tar.gz)
    Source code(zip)
  • v1.0(Aug 17, 2017)

    First release :tada: :package:

    This is the v1.0 of the chat widget module for React web apps. This first version features:

    • Plain text messages
    • Snippet-type messages for links
    • Avatar for the response messages
    • Full customization of the components
    Source code(tar.gz)
    Source code(zip)
Owner
Wolox
We are a tech company specialized in end-to-end development of high impact products.
Wolox
react-health-card 🏥💳 An awesome react health card component.

react-health-card An awesome health card component. Installation yarn add react-health-card or npm install react-health-card --save Usage import Healt

medipass 27 Jun 30, 2022
Font Awesome 5 React component

react-fontawesome Font Awesome 5 React component using SVG with JS Documentation How to Help Contributors Releasing this project (only project owners

Fort Awesome 3.6k Jan 2, 2023
Super Saiyan React components, son of awesome Bulma, implemented in TypeScript

Trunx Super Saiyan React components, son of awesome Bulma, implemented in TypeScript Status Almost all Bulma features are available and documented, fe

Gianluca Casati 61 Dec 30, 2022
An Awesome & Unique Customizable React Floating Button

React Awesome Floating Button An Awesome & Unique Customizable Floating Button Powered by The WuuD Team Build & Run Demo Live demo: https://react-floa

Nassim 23 Sep 18, 2022
Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.

Juno Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps. base on MATERIAL-UI. Explore Juno with the

RingCentral 28 Dec 14, 2022
SafeView is a component that allows you to hide sensitive information in your app visually, for presentation purposes, and more

SafeView is a component that allows you to hide sensitive information in your app visually, for presentation purposes, and more. Installation

null 36 Jun 13, 2022
React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Marc Ramos 1 Dec 22, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.7k Jan 5, 2023
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 30.4k Dec 31, 2022
InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Shaun Mak 4 Nov 8, 2021
A lightweight react component to add a mouse parallax effect to your website.

React Parallax Mouse ❤️ A lightweight react component to add a mouse parallax effect to your website ?? Efficient and lag free animations optimized fo

choozn 29 Dec 31, 2022
This is a react component which made your text does not wrap and dynamically adjust the font size.

react-dynamic-font This is a react component which made your text does not wrap and dynamically adjust the font size Sometimes we want some text to ha

Zhao 33 Aug 30, 2022
Build your frontend faster with Formation—20+ react-based UI components.

Build your frontend faster with Formation—20+ react-based UI components. Free and open-source.

Josh Schneider 145 Jan 1, 2023
Use your Svelte components from React & Vue.

vite-plugin-svelte-bridge Use your Svelte componentes from React & Vue. This plugin generates wrapper components in dist/react and dist/vue at build t

Joshua Nussbaum 36 Oct 29, 2022
Easily create styled, strictly typed React components and simplify your component code

Slicknode Stylemapper Easily create styled, strictly typed React components and simplify your component code. Stylemapper is a small, flexible and zer

Slicknode 33 Dec 2, 2022
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit System.

Timeless 197 Jan 5, 2023
A UI to manage your Meilisearch instances

UIRecord A UI for managing your meilisearch instances Screenshots Features ✨ Create new indexes ?? Search within your indexes ?? Add Documents to any

Sara Vieira 28 Jul 21, 2022
Option+Click a Component in the browser to instantly goto the source in your editor

Option+Click a Component in the browser to instantly goto the source in your editor

Eric Clemmons 1.4k Jan 2, 2023
A 1.3kB module that helps you ship your own slice of paradise to any website

A 1.3kB module that helps you ship your own slice of paradise to any website. Especially useful for Shopify apps or CMS websites.

Marcus Wood 167 Dec 29, 2022