@quantabit/im-sdk

QuantaBit IM SDK - Private chat, group chat, chatrooms, and encrypted message transmission

✨ Features

• 💬 Real-time Messaging - WebSocket-based instant message delivery
• 👤 Private Chat - One-on-one messaging with read receipts
• 👥 Group Chat - Multi-user chat rooms and group management
• 📎 Rich Messages - Text, images, files, and custom message types
• 🔔 Unread Count - Real-time unread message tracking
• 🎨 Advanced Components - Message bubbles, chat windows, member lists
• 🌍 Multi-Language - Built-in Chinese/English translations

📦 Installation

npm install @quantabit/im-sdk
# or
yarn add @quantabit/im-sdk

🚀 Quick Start

1. Connect to IM Server

import { imClient } from "@quantabit/im-sdk";
import "@quantabit/im-sdk/styles";

// Connect to WebSocket server
await imClient.connect({
  url: "wss://im.example.com/ws",
  token: "your-auth-token",
  onMessage: (message) => console.log("New message:", message),
  onStatusChange: (status) => console.log("Connection:", status),
});

// Send text message
await imClient.sendText("conv_123", "Hello!");

// Send image
await imClient.sendImage("conv_123", imageFile);

// Get conversation list
const conversations = await imClient.getConversations();

// Get message history
const messages = await imClient.getHistory("conv_123", { limit: 50 });

2. Using Components

import {
  ChatRoom,
  ConversationList,
  ChatMessage,
  ChatInput,
} from '@quantabit/im-sdk';

// Full chat room
<ChatRoom
  conversationId="conv_123"
  onSend={(msg) => console.log('Sent:', msg)}
/>

// Conversation list
<ConversationList
  onSelect={(conv) => openChat(conv)}
/>

// Individual message
<ChatMessage message={messageData} isSelf={true} />

// Chat input
<ChatInput
  onSend={(text) => sendMessage(text)}
  onImage={(file) => sendImage(file)}
  placeholder="Type a message..."
/>

3. Advanced Components

import {
  MessageBubble,
  ChatWindow,
  MemberList,
} from '@quantabit/im-sdk';

// Chat window (full-featured)
<ChatWindow
  conversationId="conv_123"
  showHeader
  showMemberList
  onClose={() => closeChat()}
/>

// Member list for group chat
<MemberList
  conversationId="conv_123"
  onMemberClick={(member) => viewProfile(member)}
/>

4. Using Hooks

import { useIM, useConversation, useUnreadCount } from "@quantabit/im-sdk";

function ChatApp() {
  const { connected, conversations, connect, disconnect } = useIM();
  const { messages, sendMessage, loadMore } = useConversation("conv_123");
  const { totalUnread, getUnread } = useUnreadCount();

  return <div>...</div>;
}

📚 Components

| Component | Description | | ------------------ | -------------------------------------------- | | ChatRoom | Full-featured chat room component | | ConversationList | Conversation list with search and filtering | | ChatMessage | Single message display (text, image, file) | | ChatInput | Message input with emoji, file attachment | | ChatWindow | Complete chat window with header and members | | MessageBubble | Customizable message bubble | | MemberList | Group member list with roles |

📖 Type Definitions

import {
  ConversationType,
  IMMessageType,
  MessageStatus,
} from "@quantabit/im-sdk";

// Conversation types
ConversationType.PRIVATE; // Private chat
ConversationType.GROUP; // Group chat
ConversationType.CHATROOM; // Chat room

// Message types
IMMessageType.TEXT; // Text
IMMessageType.IMAGE; // Image
IMMessageType.FILE; // File
IMMessageType.AUDIO; // Audio
IMMessageType.VIDEO; // Video
IMMessageType.SYSTEM; // System message

// Message status
MessageStatus.SENDING; // Sending
MessageStatus.SENT; // Sent
MessageStatus.DELIVERED; // Delivered
MessageStatus.READ; // Read
MessageStatus.FAILED; // Failed

📄 License

MIT License

🌐 Brand & Links

• Official Mainnet: QuantaBit Chain
• Developer Platform: Developer Platform
• Open Platform: Open Platform
• Payment Platform: Pay Platform
• Feedback: Feedback