AfroChat UI

NPM Vesion NPM Downloads

AfroChat UI is a simple standalone Angular frontend Chatroom user interface intended to get chat running quickly on the client side.

Getting Started

npm install afrochat-ui

Component

import { AfrochatUiComponent, UserInterface } from 'afrochat-ui';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ RouterOutlet, AfrochatUiComponent],
  providers: [
    { provide: "SERVER_URL", useValue: "http://<chat-server-address>" }
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

export class AppComponent {
  user: UserInterface | undefined;

  constructor(){
    // Get user or create one
    this.http.get("https://randomuser.me/api/").subscribe((data: any) => {
      this.user = {
        id: Number(crypto.getRandomValues(new BigUint64Array(1))).toString(16),
        name: data.results[0].name.first,
        img: data.results[0].picture.thumbnail,
        isModerator: Math.random() < 0.5
      };
    });
  }

  onModeratorEvent(moderatorEvent: ModeratorEventInterface) {
    //handle moderator event on client side
  }
}

Template

@if(user){
    <afrochat-ui [user]="user" [room]="'myChatRoom'" (onModeratorEvent)="onModeratorEvent($event)" style="height:100vh;width:100vw;display:flex;"></afrochat-ui>
}

Events

Outgoing

Event Flag	Payload	Description
JOIN_ROOM	{room: string, user, reconnecting: boolean}	Fired when component is initialized
NEW_MESSAGE	message	Send a message from user to the server
REMOVE_MESSAGE	message	Fired when 'Remove' menu item is clicked
RESTORE_MESSAGE	message	Fired when 'Restore' menu item is clicked
TIMEOUT_USER	user	Fired when 'Timeout' menu item is clicked
BAN_USER	user	Fired when 'Ban' menu item is clicked
LEAVE_ROOM	{room: string, user}	Not implemented

Incoming

Event Flag	Payload	Description
NEW_SYSTEM_MESSAGE	message	Receive an informative message to display to users
NEW_USER_MESSAGE	message	Receive a chat message from a specific user to display in chatroom
ROOM_UPDATE	room	Received as users join and leave chat
USER_MESSAGE_UPDATE	{id: string, updatedValue: boolean}	Receive id of message that has been removed or restored by a moderator

Remove/Restore Messages

Server must send back USER_MESSAGE_UPDATE to on REMOVE_MESSAGE and RESTORE_MESSAGE to trigger UI update.

Example:

socket.on('RESTORE_MESSAGE', (message: MessageInterface) => {
    io.sockets.to(message.room).emit(
      'USER_MESSAGE_UPDATE',
      { id: message.id, updatedValue: false }
    )
  });

Payloads

//user
UserInterface{
  id: string
  name: string
  img: string
  room?: string
  isModerator?: boolean
  socketID?: string,
  connectedAt?: number
}

//message
MessageInterface{
  type: 'user' | 'system'
  message: string
  id?: string
  user?: UserInterface
  room?: string
  img?: string
  time?: number
  redacted?: boolean
}

//room
RoomInterface{
  name: string,
  users: UserInterface[]
}

//moderatorEvent
ModeratorEventInterface{
  event: 'TIMEOUT_USER' | 'BAN_USER' | 'REMOVE_MESSAGE' | 'RESTORE_MESSAGE'
  payload: UserInterface | MessageInterface
}

Package detail

afrochat-ui

readme