AfroChat UI is a simple standalone Angular frontend Chatroom user interface intended to get chat running quickly on the client side.
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
}
}
@if(user){
<afrochat-ui [user]="user" [room]="'myChatRoom'" (onModeratorEvent)="onModeratorEvent($event)" style="height:100vh;width:100vw;display:flex;"></afrochat-ui>
}
//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
}
//room
RoomInterface{
name: string,
users: UserInterface[]
}
//moderatorEvent
ModeratorEventInterface{
event: 'TIMEOUT_USER' | 'BAN_USER' | 'REMOVE_MESSAGE',
payload: UserInterface | MessageInterface
}