Chat UI Component Library

React chat UI component library for College Africa Chat service. Built with Material UI and TypeScript.

Features

• 🎨 Material UI Integration - Beautiful, accessible components
• 🚀 Optimistic Updates - Instant feedback for better UX
• 💾 Offline-First - IndexedDB caching with background sync
• 🔌 WebSocket Support - Real-time message delivery
• 📱 Responsive Design - Works on all screen sizes
• 🎯 TypeScript - Full type safety
• ⚡ Vite Build - Fast development and optimized production builds

Installation

# This package is part of the monorepo
yarn workspace ui install

Development

# Run demo application
yarn workspace ui dev

# Build library
yarn workspace ui build

# Run tests
yarn workspace ui test

# Run tests with UI
yarn workspace ui test:ui

# Type check
yarn workspace ui typecheck

Usage

import { ChatApp, ChatContainer, theme } from 'ui';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <ChatApp
        config={{ baseURL: 'https://chat.college.africa' }}
        token={yourJwtToken}
      >
        <ChatContainer />
      </ChatApp>
    </ThemeProvider>
  );
}

Architecture

Component Structure

ChatApp (SDK initialization wrapper)
└── ChatContainer (full-page layout)
    ├── ConversationList (sidebar)
    │   └── ConversationItem[] (with unread badges)
    └── ChatWindow (selected conversation)
        ├── MessageList (infinite scroll)
        └── MessageInput

State Management

• Singleton SDK Pattern - No React Context needed
• Local Component State - Each component manages its own data
• IndexedDB Cache - Offline-first with background sync

Cache Strategy

1. Load cached data instantly (if available)
2. Fetch fresh data in background
3. Update UI with fresh data
4. WebSocket updates append to cache

API

Components

• ChatApp - SDK initialization wrapper
• ChatContainer - Main chat container
• ConversationList - List of conversations
• ChatWindow - Message display and input

Hooks

• useMessages - Fetch and manage messages
• useSendMessage - Send messages with optimistic updates
• useConversationList - Fetch conversation list with unread counts

SDK Singleton

import { initSDK, getSDK, disconnectSDK } from 'ui';

// Initialize (done by ChatApp component)
await initSDK({ baseURL: 'https://...' }, token);

// Access anywhere in your app
const sdk = getSDK();
await sdk.sendGroupMessage({ groupId: '123', content: 'Hello' });

// Cleanup on logout
disconnectSDK();

Theme

import { theme } from 'ui';

// Use the theme
<ThemeProvider theme={theme}>
  {/* ... */}
</ThemeProvider>

// Access chat colors for custom components
<Box sx={{ backgroundColor: "primary.main" }}>
  {/* ... */}
</Box>

Development Status

• [x] Phase 1: Foundation (setup, utils, theme, cache)
• [ ] Phase 2: SDK & Hooks
• [ ] Phase 3: Core Components
• [ ] Phase 4: Real-Time Features
• [ ] Phase 5: Demo Application
• [ ] Phase 6: Polish & Documentation

License

Private - College Africa