chatsasa-sdk v0.1.0

ChatSasa SDK

Overview

The ChatSasa SDK provides a set of tools and methods to integrate chat functionality into your React applications. It includes features such as real-time messaging, emoji reactions, message editing, asset uploads, and a user-friendly interface.

Installation

To install the ChatSasa SDK, use the following npm command:

npm install chatsasa-sdk

Initialization

First, import the SDK and initialize it with your application's configuration:

import { ChatSasa } from 'chatsasa-sdk';

const chatConfig = {
  apiKey: 'YOUR_API_KEY',
  userId: 'USER_ID',
  userName: 'USER_NAME',
  userAvatar: 'USER_AVATAR_URL',
};

ChatSasa.initialize(chatConfig);

Methods

initialize(config: ChatConfig)

Initializes the ChatSasa SDK with the provided configuration.

• config: Object containing the API key, user ID, user name, and user avatar URL.

fetchChannels(userId: string): Promise<Channel[]>

Fetches the list of chat channels for the given user.

• userId: The ID of the user.

fetchMessages(channelId: string): Promise<Message[]>

Fetches the list of messages for the given channel.

• channelId: The ID of the channel.

sendMessage(channelId: string, message: string): Promise

Sends a message to the specified channel.

• channelId: The ID of the channel.
• message: The content of the message.

editMessage(messageId: string, newMessage: string): Promise

Edits an existing message.

• messageId: The ID of the message to be edited.
• newMessage: The new content of the message.

reactToMessage(messageId: string, emojiId: string): Promise

Adds an emoji reaction to a message.

• messageId: The ID of the message to react to.
• emojiId: The ID of the emoji reaction.

deleteReaction(reactionId: string, messageId: string, userId: string): Promise

Deletes an emoji reaction from a message.

• reactionId: The ID of the reaction.
• messageId: The ID of the message.
• userId: The ID of the user who reacted.

deleteMessage(messageId: string, channelId: string): Promise

Deletes a message.

• messageId: The ID of the message to be deleted.
• channelId: The ID of the channel.

on(event: string, callback: Function)

Registers an event listener for real-time updates.

• event: The name of the event (e.g., messageReceived, reactionAdded).
• callback: The function to call when the event is triggered.

Usage Example

Here's an example of how a React developer can use the ChatSasa SDK to create a basic chat application:

import React, { useEffect, useState } from 'react';
import { ChatSasa } from 'chatsasa-sdk';

const ChatApp = () => {
  const [channels, setChannels] = useState([]);
  const [messages, setMessages] = useState([]);
  const [currentChannel, setCurrentChannel] = useState(null);
  const [newMessage, setNewMessage] = useState('');

  useEffect(() => {
    const userId = 'USER_ID';
    ChatSasa.fetchChannels(userId).then(setChannels);

    ChatSasa.on('messageReceived', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    ChatSasa.on('reactionAdded', (reaction) => {
      // Handle reaction added
    });

    ChatSasa.on('reactionRemoved', (reaction) => {
      // Handle reaction removed
    });
  }, []);

  const handleChannelSelect = (channel) => {
    setCurrentChannel(channel);
    ChatSasa.fetchMessages(channel.channelId).then(setMessages);
  };

  const handleSendMessage = () => {
    if (currentChannel && newMessage.trim()) {
      ChatSasa.sendMessage(currentChannel.channelId, newMessage).then(() => {
        setNewMessage('');
      });
    }
  };

  return (
    <div className="chat-app">
      <div className="channel-list">
        {channels.map((channel) => (
          <div key={channel.channelId} onClick={() => handleChannelSelect(channel)}>
            {channel.channelName}
          </div>
        ))}
      </div>
      <div className="message-list">
        {messages.map((message) => (
          <div key={message.messageId}>
            <div>{message.userName}: {message.content}</div>
            <div>
              {message.reactions.map((reaction) => (
                <span key={reaction.reactionId}>{reaction.emoji}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="message-input">
        <input
          type="text"
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
          placeholder="Type your message..."
        />
        <button onClick={handleSendMessage}>Send</button>
      </div>
    </div>
  );
};

export default ChatApp;