Please note that this project is no longer actively maintained or accepting Pull Requests. Please use the React Group Chat app instead.

---

Support Chat App

Featuring Reusable PubNub React Chat Components

Try the demo

This project is a collection of reusable chat components that makes it simple to get started with PubNub in React. Each of the components are designed to be reusable, expandable, and easy to use in another React application. Anyone can build a robust chat app by using these components as a starting point. This project was build from components taken from Simple Group Chat App.

This project is an example of a support style chat experience using reusable chat components. It includes the basic features you would expect from a support chat and includes both the client chat widget and a support dashboard.

Important Note: This project is a work in progress. It may contain incomplete code. Pull requests to fix bugs and add features are always welcomed.

Included Components:

• Selectable Active Users List (in dashboard view only) - Displays a list of the available users in the chat and a total count of users. Select a user to start a one on one chat.
• Message List - Displays the messages received in the chat and the chat history when a user is selected.
• Compose - Provides input area for sending new messages to the chat.

Components Coming Soon:

• Emoji - Adds emojis to the Compose component.
• Message Preview - Adds message previews to the Active Users component.
• Typing Indicator - Add typing indicator to the Compose component.
• Read Receipts - Updates Message List component with a timestamp of when messages were last read.

Notable Features:

• One on one style chat with automatic creation of new chats and users.
• PubNub Presence powered user activity.
• Message history.
• Channel Wildcards are used to efficently manage multiple channels.

Requirements

• Node.js
• PubNub Account (Free)

PubNub Account and App Setup

1. You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys from the PubNub Developer Portal.

2. Sign in to your PubNub Dashboard.

3. Click Create New App.

4. Give your app a name, and select Chat App as the app type.

5. Click Create.

6. Click your new app to open its settings, then click its keyset.

7. Enable the Channel Presence feature for your keyset.

8. Enable the Storage and Playback feature for your keyset.

9. Enable the Stream Controller feature for your keyset.

10. Copy the Publish and Subscribe keys for the next step.

Building and Running

1. You'll need to run the following commands from your terminal.

2. Clone the GitHub repository.

   git clone https://github.com/PubNubDevelopers/chat-component-app-live-support.git

3. Navigate into repo:

   cd chat-component-app-live-support

4. There are two react apps (support dashboard and client widget). You'll need to configure and run both to try the demo.

5. Select an app:

   cd support-agent-dashboard

   OR

   cd support-client-widget

6. Open src/config/pubnub-keys.json. Replace YOUR_PUBLISH_KEY_HERE and YOUR_SUBSCRIBE_KEY_HERE with your keyset from your PubNub Dashboard. YOU MUST DO THIS FOR BOTH THE CLIENT AND DASHBOARD APPS. Use the same keyset for both apps.

7. Install the node modules.

   npm install

8. Run the project in your local environment.

   npm start

   A web browser should automatically open! You must start both the support dashboard and client widget apps to begin chatting. If it doesn't open try navigating to http://localhost:8080/ and/or http://localhost:8081/

Further Information

Checkout PubNub Chat Docs page for more information about how to use the React and Redux SDKs to add in-app chat to your applications.