Build your own chat UI with React components in few minutes.

Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.

Information

Category: React / UI Frameworks
Watchers: 10
Star: 336
Fork: 24
Last update: May 24, 2022

Resource links

https://github.com/chatscope/chat-ui-kit-react

Chat UI Kit React

Build your own chat UI with React components in few minutes.
Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.

Tired of struggling with sticky scrollbars, contenteditable, responsiveness, css hacks...?
Our kit is for you! See all features.

Chat UI Kit makes chat UI development at warp speed

Install

Component library.

Using yarn.

yarn add @chatscope/chat-ui-kit-react

Using npm.

npm install @chatscope/chat-ui-kit-react

Styles.

Using yarn.

yarn add @chatscope/chat-ui-kit-styles

Using npm.

npm install @chatscope/chat-ui-kit-styles

Usage

ESM

import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
} from "@chatscope/chat-ui-kit-react";

<div style={{ position: "relative", height: "500px" }}>
  <MainContainer>
    <ChatContainer>
      <MessageList>
        <Message
          model={{
            message: "Hello my friend",
            sentTime: "just now",
            sender: "Joe",
          }}
        />
      </MessageList>
      <MessageInput placeholder="Type message here" />
    </ChatContainer>
  </MainContainer>
</div>;

Yeah! Your first chat GUI is ready!

UMD

UMD usage is documented in our Storybook.

Documentation

Check our friendly Storybook.

Show your support

Now if you made your awesome chat UI and you love this library, please ⭐ this repository!

Community and support

Twitting via @chatscope
Chatting at Discord
Facebooking at Facebook

Website

https://chatscope.io

License

MIT

16 Open More issues

Closed

MessageList Infinite Scroll Bottom with loading spinner

Is there a way to have a message list's infinite scroll work in the similar way to a conversation lists infinite scroll?

Currently the MessageList's infinite scroll is at the top, I would like it at the bottom with a loading spinner like a twitter feed.

Is this possible?

enhancement good first issue question

opened Mar 19, 2021 by pateljoel 11

Closed

Warnings shown when embedding wrapper child components

Hi again,

This is not really an issue but more of an opinion. I've noticed some warnings are being shown when embedding "invalid" child elements into some components. Something like:

Warning: Failed prop type: "MyMessage" is not a valid child for MessageList. Allowed types: Message, MessageGroup, MessageSeparator, MessageListContent

My issue here is that this warning is shown if I try to wrap my components for custom logic or even just for cleaner code. For example, the following component would throw this warning.

const MyMessage = (props: MessageProps) => {

    const {} = props;

    //some custom logic here

    return (
        <Message {...props} />
    );
};

Are these warnings shown on the production build as well? Or only the dev build?

Thanks!

bug duplicate question

opened May 10, 2021 by nzayatz14 10

Closed

OnKeyDown event occurs twice when typing in Korean and then hitting enter

Hi, thank you for intuitive and awesome chat-ui library.

I'm using it well, but there are some bugs like following situations.

OnKeyDown event occurs twice when typing in Korean and then hitting enter. So Last Korean Character printed one more time.

bug good first issue released

opened Feb 8, 2021 by HwangTaehyun 10

Closed

Can we show sender time in custom outgoing message?

Hi we need to show time in custom outgoing message as well like in incoming. Attached is the screenshot

please advice.

question

opened May 27, 2021 by GhazanfarKhan 8

Closed

Copying message copy span html instead of text

Hi, when you copy a message from message component it will copy html not the actual text. Attaching screenshot.

question

opened Mar 30, 2021 by GhazanfarKhan 8

Closed

Anyway to prevent send message after pressing "Enter" key?

I want my message line break on enter press rather than shift + enter.. How do I prevent default behaviour of sending messages on enter pressed!!!

enhancement good first issue released

opened Apr 12, 2021 by bibek-magar 7

Open

Scrollbar stays selected on phone mode

When holding the MessageList scrollbar and realising it, when using Chrome DevTools to emulate phone behavior (or really, just on a phone), it's stuck like it's selected and when you try to scroll without pressing the scrollbar, it scrolls like it's being held.

It's nothing specific about the code, since it happens too on the Storybook https://chatscope.io/storybook/react/?path=/story/components-messagelist--scroll-to-bottom (try toggling de device toolbar, scrolling once by clicking the scrollbar and then scroll without the mousewheel by clicking and dragging)

bug

opened May 3, 2022 by p-Jimenez 3

Open

how to add history messages from database server to conversation properly

I'm using chat-ui-kit for my app. Thanks for your excellent work!

When does this occur?

my problem is: how to add history messages from server to conversation properly. below is my procedure:

1.click conversation
1. fetch history messages by http post from server.
1. call addMessage api from basicStorage The problem is when specify conversation back and forth, the same history messages list will append time and time.

How i do convesation change:

const conversationChange = async (c: Conversation) => {
    if(!c || c.id === activeConversation?.id) {
      return;
    }
    const currentuserid = currentUser?.id!;  

    // update last readtime in database
    const conversationDate = c.data as ConversationMoreDate;
    const updatelastreadtime:UpdateLastReadTimePayload = {
      userId: currentuserid,
      targetId: c.id!,
      targetIdType: conversationDate.targetType
    }
   await UpdateLastReadTimeApi(updatelastreadtime);  

   // get all history messages from database
   const payload: GetTargetAllMsgPayload = {
     userId: currentuserid,
     targetId: c.id!,
     page: 0,
     rows: 50
   }
    const messageObject = await GetTargetAllMsgApi(payload);
    if (messageObject && messageObject.list && messageObject.list.length > 0) {
      messageObject.list.map(item => {
        const newMsg:ChatMessage<MessageContentType>  =  {
          id: item.msgId,
          status: MessageStatus.Pending,
          contentType: MessageContentType.TextPlain,
          senderId: item.senderId,
          direction: currentuserid !== item.senderId ? MessageDirection.Incoming : MessageDirection.Outgoing,
          content: item.content
        }
        addMessage(newMsg, c.id, false);       // **add message**
      })
    }
    console.log(messageObject);
    setActiveConversation(c.id);
  }

Expected behavior (i.e. solution)

same message should be added only once, something like update or insert.
Or before addMessage call, how can i filter all messages that don't exist in this conversation?

Other Comments

question

opened Apr 30, 2022 by zhan2016 1

Open

Allow React.Fragment to be a ConversationHeader child

Related to #60

enhancement

opened Dec 4, 2021 by supersnager 0

Open

Add padding on Input buttons size and make height same as the Input bar

Hello ! The styling of the buttons improved greatly, thank you for the last update ! Some minor fixes I'd like to see on them are:

Add some spacing with the Input bar. When adding a background color to the buttons, they are really stuck to the bar, and I would expect the layout to be by default adapted to that
Add some height to the buttons. Again, when adding a background color, and when the Input bar is at it's minimum height, the buttons could be of the same height, it would be more elegant

See the screenshot, it will be more descriptive

Current workaround and expected look:

const buttonStyle = {
	marginLeft: 0,
	marginTop: 5,
	paddingLeft: '0.2em',
	paddingRight: '0.2em',
	color: '#0C3276',
	backgroundColor: '#C7FED2',
	width: '48px',
	height: '45px',
	flexGrow: 0,
	flexShrink: 0
};

const CustomInput = 
       <div>
            <AttachmentButton style={buttonStyle}  />
	   <MessageInput
	        sendButton={false}
	        attachButton={false}
	   />
	   <SendButton style={buttonStyle} />
       </div>

enhancement

opened Nov 30, 2021 by chloe-schoreisz 0

Open

Widened Firefox scroll error range to 10px

Hi @supersnager,

I believe I managed to patch the scrolling issue we were running into on Firefox with the MessageList component described here. All I did was widen the scrolling error to 10px. I thought this was reasonable because the perfect-scrollbar component you are using also used a 10px range:

if (e.deltaMode && e.deltaMode === 1) {
      // Firefox in deltaMode 1: Line scrolling
      deltaX *= 10;
      deltaY *= 10;
    }

This is not a permanent solution, but it should suffice until you get around to overhauling the scrolling logic like you said you would.

Hope this helps, Nick

opened Aug 16, 2021 by nzayatz14 0

Open

Delivered devices count in delivery receipt

In the case of multi device mobile or web, the user is logged in with multiple devices on multiple platforms. Can there be a delivered devices count for delivery receipts.

It ensures that delivered indicator is sent with more precise information if only one device, say receives the message. This is particularly relevant if the message is received at a device that the user does not use frequently or is not using for certain time period. It sets user expectation of message delivery and recipient's response.

enhancement

opened Jul 7, 2021 by armor009 1

v1.8.3(Nov 26, 2021)

1.8.3 (2021-11-26)

Bug Fixes

#55 changed lastactivitytime prop type to node (7efcfb2)

Source code(tar.gz)
Source code(zip)

v1.8.2(Oct 11, 2021)

1.8.2 (2021-10-11)

Bug Fixes

#25 official support for react 17 (771eacb)

Source code(tar.gz)
Source code(zip)

v1.8.1(Jun 3, 2021)

1.8.1 (2021-06-03)

Bug Fixes

as: custom component aliased with string is not displayed in production build (cbf8a04), closes #43

Source code(tar.gz)
Source code(zip)

v1.8.0(May 31, 2021)

1.8.0 (2021-05-31)

Features

message-input: prop to messageinput that prevents send on return (98fc849)

Source code(tar.gz)
Source code(zip)

v1.7.2(May 16, 2021)

1.7.2 (2021-05-16)

Source code(tar.gz)
Source code(zip)

v1.7.1(May 16, 2021)

1.7.1 (2021-05-16)

Source code(tar.gz)
Source code(zip)

Build a decentralized web chat in 15 minutes

100% Javascript realtime chat like facebook/gmail web style built with jQuery + Node.js + Socket.IO

Build Your Own Photo Sharing App in 5 minutes

A step-by-step tutorial to create your own Chat app with React Native

A full Realtime Chat Application with Social Auth and dedicated chat APIs/sockets.

Ready-made structure of your next React Native application within a few minutes.

:smiley_cat: Pretty & simple image classifier app template. Deploy your own trained model or pre-trained model (VGG, ResNet, Densenet) to a web app using Flask in 10 minutes.

A collection of reusable React components with their own Flux lifecycle.

Qiscus provide everything you need to power up your app with chats. And it's now made simple.

Generate React components by replicating your own

React UI components powered by Tachyons with a styled-components like API

UI building blocks that let you build user-facing email, calendar, and contacts functionality in minutes

Go Chat is simplified web socket chat server with client

vue-feathers-chat A sample realtime chat made with Vue in frontend and Feathers in backend, but using just Socket.IO-Client for the communication

Lean parser and visualizations for WhatsApp chat data

Build Apps Visually - Drag and drop components, and turn designs into real application screens in minutes instead of hours

Material Components Vue material-components-webMaterial Components Vue - wrapper around material-components-web for Vue.js

An open source chat server implemented in Go

Real time chat app written in Swift 5 using Firebase

Real time firebase chat app written in Swift 3 (supports multi-chat also)

Client library for Minimal Chat

Share this repo

Related Repos

UI Frameworks

Semi-UI: A modern, comprehensive, flexible design system and UI library. Quickly build be...

Semi-UI: A modern, comprehensive, flexible design system and UI library. Quickly build beautiful React apps.

UI Frameworks

113

React mobile UI Components base on Vant

UI Frameworks

112

A React UI Kit based on Tailwind

UI Frameworks

Collection of Accessible React UI Components using TailwindCSS.

Collection of accessible React UI components with the built-in dark theme using Tailwind CSS. Pre-designed headless ui and radix-ui.

UI Frameworks

246

A React Component library for building modern applications easily & quickly

UI Frameworks

Embrace - Typesafe, declarative, and composable UI engine on top of React and Focal

UI Frameworks

🛠 React application framework based on Vite.

🚀 React application framework inspired by UmiJS. 类 UmiJS 的 React 应用框架。

UI Frameworks

A supa simple wrapper around Supabase.js to enable usage within Nuxt.

UI Frameworks

Peco: The featherweight Deno webapp framework. Built with Preact and htm.

UI Frameworks

A collection of Chakra UI-related awesomeness

UI Frameworks

122

A React.js admin dashboard template and UI library based on Bootstrap 5

Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5 CSS framework. It features over 100 UI elements, plugins, and example based built with React components.

UI Frameworks

336

Build your own chat UI with React components in few minutes.

Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.

UI Frameworks

145

A collection of Responsive Animated Mobile friendly Lightweight React Components

UI Frameworks

Mobile UI Components built on React

富能通移动端组件库（agile mobile） —— 一个灵活、精巧的react移动端组件库

UI Frameworks

☁ Layer Components - Dialogs, Drawers, Tooltips, Popovers

Layer Components for React: Dialogs, Drawers, Tooltips and Popovers