Skip to content

Minor Grammatical Fixes #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Minor Grammatical Fixes #19

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

[![Actions Status](https://github.com/chatscope/chat-ui-kit-react/workflows/build/badge.svg)](https://github.com/chatscope/use-chat/actions) [![npm version](https://img.shields.io/npm/v/@chatscope/use-chat.svg?style=flat)](https://npmjs.com/@chatscope/use-chat) [![](https://img.shields.io/npm/l/@chatscope/use-chat?dummy=unused)](https://github.com/chatscope/use-chat/blob/main/LICENSE) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

!!! Please do not use version 1.5.0 it has wrong property names !!!
!!! Please do not use version 1.5.0 !!! It has the wrong property names !!!

React hook for state management in chat applications.
Use Chat is a React hook for state management in chat applications.

Full documentation is not available yet, but **will be prepared**.

Expand All @@ -13,42 +13,42 @@ please let me know by adding one of the positive reactions (+1, Heart, Rocket) i

## What is it?

This is a headless chat library. Think of it as something like a Formik but for chat apps.
This is a headless chat library. Think of it as Formik but for chat apps.

The library can be used both with [@chatscope/chat-ui-kit-react](https://github.com/chatscope/chat-ui-kit-react) as well as with other chat components.
It can be used alongside [@chatscope/chat-ui-kit-react](https://github.com/chatscope/chat-ui-kit-react) as well as other chat components.

The goal of it is to provide a tool for handling features that are most often implemented in chat applications.
Primarily it's an application state management as well as some nice addons such as debounce or throttling of sending or receiving typing indicator signaling.
The goal of is to provide a tool for handling features that are implemented most often in chat applications.
It primarily provides state management for applications as well as additional features, e.g.: debounce or throttling of the sending/receiving typing indicator.

## Why?

The logic of chat applications is often repetitive. Most of these applications contains a user list, a conference list and of course messages.
There are at least a few chat API providers on the market. They provide saas services that you can use to build a chat application.
You also almost always get a ready-to-use, simple messaging library from them. Such a library encapsulates a complex communication protocol.
The logic of chat applications can be very repetitive. Most of these applications contain the same features: a user list, a conference list, messages, etc.
There are a few chat API providers on the market. They provide SAAS services that you can use to build a chat application.
You almost always get a ready-to-use, simple messaging library from them, and such a library encapsulates a complex communication protocol.
Sometimes you also get UI components and hooks/providers that bind the UI to the provider's messaging library.
Both are closely related, which makes replacing the messaging library or UI components a lot of work.

In this case you have to take care of how to keep in your app: a list of contacts and theirs statuses, a list of messages for each contact, switching between chats, setting an active chat, rendering messages and so on...
In this case, you need to consider how to manage various aspects within your app like a list of contacts and theirs statuses, a list of messages for each contact, switching between chats, setting an active chat, rendering messages and so on...

If you create your own backed and implement the communication layer yourself, you will also not avoid doing all these things.
Even if you develop your own backend and handle the communication layer independently, these tasks can not be avoided.

Isn't it better to focus on the business functionality of the application? On the layout, colour selection etc., instead of wondering how to find a message in the array to set its state to "read"?
Wouldn't you rather be able to focus on the functionality of the application? On the layout, color selection etc., instead of wondering how to find a message in the array to set its state to "read"?

Such things often turn out to be more complicated to do than they seem.
Such things often turn out to be more complicated than they seem.

For example, a message list is not always a flat array.
It will often be an object with messages assigned to users and conversations, and additionally, it will be grouped into blocks of incoming and outgoing messages.

Adding a message to the list requires roughly the following steps:
- find a message list for a given conversation,
- find the last group,
- check if this is the group of the user the message comes from,
- find a message list for a given conversation
- find the last group
- check if this is the group of the user the message comes from
- if it's not, then create a group and add the message to it
- add the group to the list

Uff, there is a bit of it, right?
Oof, quite a bit of work, right?

Such things should be closed in separate logic libraries, which can be used in a simple and intuitive way.
Such things should be closed in separate logic libraries where they can be used in a simple and intuitive way.
The implementation of a consistent interface also provides the possibility of internal tuning (e.g. changing the data structure) without changing the way the library is used.

## Features
Expand All @@ -60,7 +60,7 @@ The implementation of a consistent interface also provides the possibility of in
- auto throttling received typing indicator
- handling current message input value
- handling message drafts
- updating existed messages
- updating existing messages
- support for any communication service

## Installation
Expand All @@ -79,7 +79,7 @@ npm install @chatscope/use-chat

## Architecture

The library consist of three parts:
The library contains three parts:

- storage - the place where the state is kept
- ChatProvider - chat context provider
Expand All @@ -90,20 +90,20 @@ The library consist of three parts:
This is a class that implements the IStorage interface.
All data such as conversations, messages, current conversation indicator etc sits in the storage.
BasicStorage is the basic implementation of the IStorage. It should be fully functional, and can be used for most applications.
However, it is possible to write new implementations e.g. based on redux or another state library.
However, it is possible to write new implementations (based on redux or another state library).
That is why the storage is provided to ChatProvider from the outside.

### ExampleChatService

This is a class that implements IChatService interface.
The purpose of this service is to maintain a connection with the chat server, send and receive messages and chat protocol commands.
The purpose of this service is to maintain a connection with the chat server, and send/receive messages and chat protocol commands.
This is a point that connects your chat server with the library.
To use this library, you need to write your own ChatService that implements the IChatService interface.
The implementation of the service depends on which chat server you are using.
The content of the service can be your code written from scratch, but the service also can be an encapsulation layer for any ready to use chat communication library
There is [src/examples/ExampleChatService.ts](https://github.com/chatscope/use-chat/blob/main/src/examples/ExampleChatService.ts) available for a quick start. This is a good starting point for developing the real service for your application.

At the future I will provide more examples showing real communication with socket.io based chat server.
In the future I will provide more examples showing real communication with socket.io based chat server.

Service implementations for some SAAS providers will also be available.

Expand All @@ -120,7 +120,7 @@ Each write to the storage performed from the service needs to call the updateSta
For example when the service receives signalization that some user has connected, you can add user to storage using storage.addUser() method
and next call updateState().

This description probably looks complicated :). But believe, me it's really simple compared to when you have to take care of everything.
This description probably looks complicated :) but believe me, it's really simple compared to when you have to take care of everything.

## Basic usage

Expand Down