Skip to content

docs: Improve Core Features page with platform-specific links #192

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
pouravraj98 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: Improve Core Features page with platform-specific links #192

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
193 changes: 159 additions & 34 deletions fundamentals/features-core.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,54 +3,179 @@ title: "Core In App Messaging Features"
sidebarTitle: "Core"
---

CometChat provides a powerful suite of messaging features. A subset of these features called 'Messaging Core' provide features which are bare minimum to build a good chat user experience.
## Overview

The following are some of the most used Core features:
CometChat provides a powerful suite of messaging features. A subset of these features called 'Messaging Core' provides the bare minimum features needed to build a great chat user experience.

* User to User and Group chat:
Here's how different features work together to deliver comprehensive and intuitive messaging:

* This is the most basic form of messaging which can exists between two individual users or users that are a part of a group. For a developer's perspective, the actual chat works using the following delivery methods:
* On the message sender's side, the messages are sent using CometChat UI Kits which use SDKs which act as an API wrapper.
* On the message receiver's side, the messages are delivered using a Websocket connection to the CometChat plaform which is managed by the SDKs.
* For more details on Websockets and its connectivity details, please visit [Managing Web Sockets](/sdk/javascript/managing-web-sockets-connections-manually) in the CometChat SDK.
* By default, user and group messaging along with Web Socket implementation is available in the UI Kits.
## Instant Messaging

* Media sharing:
At the heart of CometChat's functionality is the ability to support real-time text messaging between users and groups. Users can send and receive instant messages, fostering quick and efficient communication.

* Sharing files, videos and other media types are the key in today's messaging world. You can implement media messages using SDKs or UI Kits as well as use [Extensions](/fundamentals/extensions-overview) for Gifs and Stickers.
* By default, support for Media messages is available in the UI Kits.
<Frame>
<img src="/images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.png" />
</Frame>

* Message Delivery and Read receipts:
**Explore implementation guides for your platform:**

* Message delivery receipts indicate that a message has reached the message receiver. Message read receipt indicates that the message has been read by the message receiver. CometChat supports the following features from a message delivery and read indicator perspective:
* Mark up to a message as delivered.
* Mark up to a message as read.
* Mark all messages after a particular message as unread.
* To view these features, please visit [Delivery and Read receipts](/sdk/javascript/delivery-read-receipts#mark-messages-as-unread) in the SDK docs.
* By default, support delivery and read receipts is available in the UI Kits.
<CardGroup cols={3}>
<Card title="React" icon="react" horizontal href="/ui-kit/react/core-features#instant-messaging" />
<Card title="Angular" icon="angular" horizontal href="/ui-kit/angular/core-features#instant-messaging" />
<Card title="iOS Swift" icon="apple" horizontal href="/ui-kit/ios/core-features#instant-messaging" />
<Card title="Android Kotlin" icon="android" horizontal href="/ui-kit/android/core-features#instant-messaging" />
<Card title="React Native" icon="react" horizontal href="/ui-kit/react-native/core-features#instant-messaging" />
<Card title="Flutter" icon="flutter" horizontal href="/ui-kit/flutter/core-features#instant-messaging" />
</CardGroup>

* Typing indicators:
## Media Sharing

* Typing indicators in a conversation provide an indication to other users that a given user is typing a message. To implement typing indicators, visit the [Typing indicators](/sdk/javascript/typing-indicators) section of the SDK docs.
* By default, support Typing indicators is available in the UI Kits.
Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication.

* Mentions (@username):
<Frame>
<img src="/images/56d32794-feature_media_sharing_web_screens-85d19aa1d4efea1f5bfec8a718e67d1c.png" />
</Frame>

* Mentions allow users to refer to a specific user in a conversation. This is done by sending a '@username' in the message to address that user.
* To implement Mentions, please visit [Mentions](/sdk/javascript/mentions) section in the SDK docs.
* By default, support for Mentions is available in the UI Kits.
**Explore implementation guides for your platform:**

* Reactions:
<CardGroup cols={3}>
<Card title="React" icon="react" horizontal href="/ui-kit/react/core-features#media-sharing" />
<Card title="Angular" icon="angular" horizontal href="/ui-kit/angular/core-features#media-sharing" />
<Card title="iOS Swift" icon="apple" horizontal href="/ui-kit/ios/core-features#media-sharing" />
<Card title="Android Kotlin" icon="android" horizontal href="/ui-kit/android/core-features#media-sharing" />
<Card title="React Native" icon="react" horizontal href="/ui-kit/react-native/core-features#media-sharing" />
<Card title="Flutter" icon="flutter" horizontal href="/ui-kit/flutter/core-features#media-sharing" />
</CardGroup>

* Reactions on a message allow users to express their emotions using emojis. To implement Reactions, please visit the [Reactions](/sdk/javascript/reactions) section in the SDK docs.
* By default, support for Reactions is available in the UI Kits.
## Read Receipts

* Threaded Conversations:
CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to communication and ensures users are informed about the status of their messages.

* Message threads allow users to branch off a conversation specific to a topic within a conversation in a sub-conversation. Such a conversation is called a Threaded conversation. To implement Threads in a conversation, please visit [Threaded Messages](/sdk/javascript/threaded-messages) section in the docs.
* By default, support for Threaded conversations is available in the UI Kits.
<Frame>
<img src="/images/bf16bef1-feature_read_receipt_web_screens-68fddd4e39d86dfcb7d41b5e945dcdc3.png" />
</Frame>

* User presence:
**Explore implementation guides for your platform:**

* User presence helps users to understand if a particular user is online and hence available for chat. To implement User presence, please visit the [User Presence](/sdk/javascript/user-presence) section in the docs.
* By default, support for User Presence is available in the UI Kits.
<CardGroup cols={3}>
<Card title="React" icon="react" horizontal href="/ui-kit/react/core-features#read-receipts" />
<Card title="Angular" icon="angular" horizontal href="/ui-kit/angular/core-features#read-receipts" />
<Card title="iOS Swift" icon="apple" horizontal href="/ui-kit/ios/core-features#read-receipts" />
<Card title="Android Kotlin" icon="android" horizontal href="/ui-kit/android/core-features#read-receipts" />
<Card title="React Native" icon="react" horizontal href="/ui-kit/react-native/core-features#read-receipts" />
<Card title="Flutter" icon="flutter" horizontal href="/ui-kit/flutter/core-features#read-receipts" />
</CardGroup>

## Typing Indicators

The Typing Indicator feature shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.

<Frame>
<img src="/images/5de16f7b-feature_typing_indicator_web_screens-da2f83292de9815655d0b5b0ff6fef6f.png" />
</Frame>

**Explore implementation guides for your platform:**

<CardGroup cols={3}>
<Card title="React" icon="react" horizontal href="/ui-kit/react/core-features#typing-indicator" />
<Card title="Angular" icon="angular" horizontal href="/ui-kit/angular/core-features#typing-indicator" />
<Card title="iOS Swift" icon="apple" horizontal href="/ui-kit/ios/core-features#typing-indicator" />
<Card title="Android Kotlin" icon="android" horizontal href="/ui-kit/android/core-features#typing-indicator" />
<Card title="React Native" icon="react" horizontal href="/ui-kit/react-native/core-features#typing-indicator" />
<Card title="Flutter" icon="flutter" horizontal href="/ui-kit/flutter/core-features#typing-indicator" />
</CardGroup>

## User Presence

CometChat's User Presence feature allows users to see whether their contacts are online or offline. This helps users know the best time to initiate a conversation and sets expectations about response times.

<Frame>
<img src="/images/dc91a3ce-feature_status_indicator_web_screens-b7e131fd1b9b8b61db986a037c711e06.png" />
</Frame>

**Explore implementation guides for your platform:**

<CardGroup cols={3}>
<Card title="React" icon="react" horizontal href="/ui-kit/react/core-features#user-presence" />
<Card title="Angular" icon="angular" horizontal href="/ui-kit/angular/core-features#user-presence" />
<Card title="iOS Swift" icon="apple" horizontal href="/ui-kit/ios/core-features#user-presence" />
<Card title="Android Kotlin" icon="android" horizontal href="/ui-kit/android/core-features#user-presence" />
<Card title="React Native" icon="react" horizontal href="/ui-kit/react-native/core-features#user-presence" />
<Card title="Flutter" icon="flutter" horizontal href="/ui-kit/flutter/core-features#user-presence" />
</CardGroup>

## Reactions

CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to react to messages with emojis. Users can convey emotions or express thoughts without typing a full response, enhancing engagement.

<Frame>
<img src="/images/a1c1501b-reactions_web_screens-f04b4e202fdd5d9fd9c86056eed31247.png" />
</Frame>

**Explore implementation guides for your platform:**

<CardGroup cols={3}>
<Card title="React" icon="react" horizontal href="/ui-kit/react/core-features#reactions" />
<Card title="Angular" icon="angular" horizontal href="/ui-kit/angular/core-features#reactions" />
<Card title="iOS Swift" icon="apple" horizontal href="/ui-kit/ios/core-features#reactions" />
<Card title="Android Kotlin" icon="android" horizontal href="/ui-kit/android/core-features#reactions" />
<Card title="React Native" icon="react" horizontal href="/ui-kit/react-native/core-features#reactions" />
<Card title="Flutter" icon="flutter" horizontal href="/ui-kit/flutter/core-features#reactions" />
</CardGroup>

## Mentions

Mentions is a robust feature that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation using @username. The feature also supports group mentions like @all.

<Frame>
<img src="/images/a4778ade-mentions_web_screens-554df9099f110c592be8b32b750d64d2.png" />
</Frame>

**Explore implementation guides for your platform:**

<CardGroup cols={3}>
<Card title="React" icon="react" horizontal href="/ui-kit/react/core-features#mentions" />
<Card title="Angular" icon="angular" horizontal href="/ui-kit/angular/core-features#mentions" />
<Card title="iOS Swift" icon="apple" horizontal href="/ui-kit/ios/core-features#mentions" />
<Card title="Android Kotlin" icon="android" horizontal href="/ui-kit/android/core-features#mentions" />
<Card title="React Native" icon="react" horizontal href="/ui-kit/react-native/core-features#mentions" />
<Card title="Flutter" icon="flutter" horizontal href="/ui-kit/flutter/core-features#mentions" />
</CardGroup>

## Threaded Conversations

Message threads allow users to branch off a conversation specific to a topic within a conversation in a sub-conversation. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.

<Frame>
<img src="/images/c61ec9db-threaded_conversations-3aa9e480dfcc47159d393052f19f313f.png" />
</Frame>

**Explore implementation guides for your platform:**

<CardGroup cols={3}>
<Card title="React" icon="react" horizontal href="/ui-kit/react/core-features#threaded-conversations" />
<Card title="Angular" icon="angular" horizontal href="/ui-kit/angular/core-features#threaded-conversations" />
<Card title="iOS Swift" icon="apple" horizontal href="/ui-kit/ios/core-features#threaded-conversations" />
<Card title="Android Kotlin" icon="android" horizontal href="/ui-kit/android/core-features#threaded-conversations" />
<Card title="React Native" icon="react" horizontal href="/ui-kit/react-native/core-features#threaded-conversations" />
<Card title="Flutter" icon="flutter" horizontal href="/ui-kit/flutter/core-features#threaded-conversations" />
</CardGroup>

## Group Chat

CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.

<Frame>
<img src="/images/f42ad8d3-group_chat_web_screens-c9204e4c244ca55a7ffe6c9498299625.png" />
</Frame>

**Explore implementation guides for your platform:**

<CardGroup cols={3}>
<Card title="React" icon="react" horizontal href="/ui-kit/react/core-features#group-chat" />
<Card title="Angular" icon="angular" horizontal href="/ui-kit/angular/core-features#group-chat" />
<Card title="iOS Swift" icon="apple" horizontal href="/ui-kit/ios/core-features#group-chat" />
<Card title="Android Kotlin" icon="android" horizontal href="/ui-kit/android/core-features#group-chat" />
<Card title="React Native" icon="react" horizontal href="/ui-kit/react-native/core-features#group-chat" />
<Card title="Flutter" icon="flutter" horizontal href="/ui-kit/flutter/core-features#group-chat" />
</CardGroup>