afrochat-ui v1.1.2

AfroChat UI

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

Incoming

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
}