Add admin features (get ip, kick, ban), context menu, ban database, clean disconnect and reconnect, and errors.

msagent.js/src/agent.ts

@@ -1,5 +1,6 @@
 import { BufferStream, SeekDir } from './buffer.js';
 import { AcsData } from './character.js';
+import { ContextMenu, ContextMenuItem } from './contextmenu.js';
 import { AcsAnimation, AcsAnimationFrameInfo } from './structs/animation.js';
 import { AcsImageEntry } from './structs/image.js';
 import { Point, Size } from './types.js';
@@ -69,7 +70,7 @@ class AgentWordBalloonState {
 	balloonCanvas: HTMLCanvasElement;
 	balloonCanvasCtx: CanvasRenderingContext2D;
 
-	constructor(char: Agent, text: string, hasTip: boolean, position: AgentWordBalloonPosition) {
+	constructor(char: Agent, text: string, hasTip: boolean, position: AgentWordBalloonPosition, textColor: string) {
 		this.char = char;
 		this.text = text;
 		this.hasTip = hasTip;
@@ -87,13 +88,13 @@ class AgentWordBalloonState {
 		// hack fix for above
 		this.balloonCanvas.style.pointerEvents = 'none';
 
-		let rect = wordballoonDrawText(this.balloonCanvasCtx, { x: 0, y: 0 }, this.text, 20, hasTip);
+		let rect = wordballoonDrawText(this.balloonCanvasCtx, { x: 0, y: 0 }, this.text, 20, hasTip, textColor);
 
 		// Second pass, actually set the element to the right width and stuffs
 		this.balloonCanvas.width = rect.w;
 		this.balloonCanvas.height = rect.h;
 
-		wordballoonDrawText(this.balloonCanvasCtx, { x: 0, y: 0 }, this.text, 20, hasTip);
+		wordballoonDrawText(this.balloonCanvasCtx, { x: 0, y: 0 }, this.text, 20, hasTip, textColor);
 
 		this.char.getElement().appendChild(this.balloonCanvas);
 
@@ -142,6 +143,8 @@ export class Agent {
 	private wordballoonState: AgentWordBalloonState | null = null;
 	private usernameBalloonState: AgentWordBalloonState | null = null;
 
+	private contextMenu: ContextMenu;
+
 	constructor(data: AcsData) {
 		this.data = data;
 		this.charDiv = document.createElement('div');
@@ -155,6 +158,8 @@ export class Agent {
 		this.cnv.height = data.characterInfo.charHeight;
 		this.cnv.style.display = 'none';
 
+		this.contextMenu = new ContextMenu(this.charDiv);
+
 		this.charDiv.appendChild(this.cnv);
 
 		this.dragging = false;
@@ -173,7 +178,7 @@ export class Agent {
 		});
 		this.cnv.addEventListener('contextmenu', (e) => {
 			e.preventDefault();
-			// TODO: Custom context menu support
+			this.contextMenu.show(e.clientX, e.clientY);
 		});
 		document.addEventListener('mousemove', (e) => {
 			if (!this.dragging) return;
@@ -201,6 +206,10 @@ export class Agent {
 		return this.charDiv;
 	}
 
+	getContextMenu() {
+		return this.contextMenu;
+	}
+
 	getAt() {
 		let point: Point = {
 			x: this.x,
@@ -284,13 +293,13 @@ export class Agent {
 		if (index !== -1) this.playAnimation(index, finishCallback);
 	}
 
-	setUsername(username: string) {
+	setUsername(username: string, color: string) {
 		if (this.usernameBalloonState !== null) {
 			this.usernameBalloonState.finish();
 			this.usernameBalloonState = null;
 		}
 
-		this.usernameBalloonState = new AgentWordBalloonState(this, username, false, AgentWordBalloonPosition.BelowCentered);
+		this.usernameBalloonState = new AgentWordBalloonState(this, username, false, AgentWordBalloonPosition.BelowCentered, color);
 		this.usernameBalloonState.show();
 	}
 
@@ -299,7 +308,7 @@ export class Agent {
 			this.stopSpeaking();
 		}
 		
-		this.wordballoonState = new AgentWordBalloonState(this, text, true, AgentWordBalloonPosition.AboveCentered);
+		this.wordballoonState = new AgentWordBalloonState(this, text, true, AgentWordBalloonPosition.AboveCentered, "#000000");
 		this.wordballoonState.positionUpdated();
 		this.wordballoonState.show();
 	}

msagent.js/src/contextmenu.ts

@@ -0,0 +1,80 @@
+export class ContextMenuItem {
+    private element: HTMLLIElement;
+
+    name: string;
+    cb: Function;
+
+    constructor(name: string, cb: Function) {
+        this.name = name;
+        this.cb = cb;
+        this.element = document.createElement("li");
+        this.element.classList.add("context-menu-item");
+        this.element.innerText = name;
+        this.element.addEventListener('mousedown', () => this.cb());
+    }
+
+    getElement() {
+        return this.element;
+    }
+
+    setName(name: string) {
+        this.name = name;
+        this.element.innerText = name;
+    }
+
+    setCb(cb: Function) {
+        this.cb = cb;
+    }
+}
+
+export class ContextMenu {
+    private element: HTMLDivElement;
+    private list: HTMLUListElement;
+
+    private items: Array<ContextMenuItem>
+
+    constructor(parent: HTMLElement) {
+        this.element = document.createElement("div");
+        this.list = document.createElement("ul");
+        this.element.appendChild(this.list);
+        this.items = [];
+        this.element.classList.add("context-menu");
+        this.element.style.display = "none";
+        this.element.style.position = "fixed";
+        parent.appendChild(this.element);
+    }
+
+    show(x: number, y: number) {
+        this.element.style.left = x + "px";
+        this.element.style.top = y + "px";
+        document.addEventListener('mousedown', () => {
+            this.hide();
+        }, {once: true});
+        this.element.style.display = "block";
+    }
+
+    hide() {
+        this.element.style.display = "none";
+    }
+
+    addItem(item: ContextMenuItem) {
+        this.items.push(item);
+        this.list.appendChild(item.getElement());
+    }
+
+    removeItem(item: ContextMenuItem) {
+        let i = this.items.indexOf(item);
+        if (i === -1) return;
+        this.items.splice(i, 1);
+        item.getElement().remove();
+    }
+
+    getItem(name: string) {
+        return this.items.find(i => i.name === name);
+    }
+
+    clearItems() {
+        this.items.splice(0, this.items.length);
+        this.list.replaceChildren();
+    }
+}

msagent.js/src/index.ts

@@ -6,6 +6,7 @@ export * from "./character.js";
 export * from "./decompress.js";
 export * from "./sprite.js";
 export * from "./wordballoon.js";
+export * from "./contextmenu.js";
 
 
 // Convinence function which initalizes all of msagent.js.

msagent.js/src/wordballoon.ts

@@ -129,7 +129,7 @@ function wordWrapToStringList(text: string, maxLength: number) {
 }
 
 // This draws a wordballoon with text. This function respects the current context's font settings and does *not* modify them.
-export function wordballoonDrawText(ctx: CanvasRenderingContext2D, at: Point, text: string, maxLen: number = 20, hasTip: boolean = true): Rect {
+export function wordballoonDrawText(ctx: CanvasRenderingContext2D, at: Point, text: string, maxLen: number = 20, hasTip: boolean = true, color: string = "#000000"): Rect {
 	let lines = wordWrapToStringList(text, maxLen);
 
 	// Create metrics for each line
@@ -167,6 +167,7 @@ export function wordballoonDrawText(ctx: CanvasRenderingContext2D, at: Point, te
 		let metric = metrics[i];
 		let height = metric.actualBoundingBoxAscent + metric.actualBoundingBoxDescent;
 
+		ctx.fillStyle = color;
 		ctx.fillText(lines[i], rectInner.x - 12, rectInner.y + y);
 		y += height * 1.25;
 	}

protocol/src/admin.ts

@@ -0,0 +1,64 @@
+import { MSAgentProtocolMessage, MSAgentProtocolMessageType } from "./protocol";
+
+export enum MSAgentAdminOperation {
+    // Client-to-server
+    Kick = "kick",
+    Ban = "ban",
+    // Bidirectional
+    Login = "login",
+    GetIP = "ip",
+}
+
+export interface MSAgentAdminMessage extends MSAgentProtocolMessage {
+    op: MSAgentProtocolMessageType.Admin,
+    data: {
+        action: MSAgentAdminOperation
+    }
+}
+
+// Client-to-server
+
+export interface MSAgentAdminLoginMessage extends MSAgentAdminMessage {
+    data: {
+        action: MSAgentAdminOperation.Login,
+        password: string
+    }
+}
+
+export interface MSAgentAdminGetIPMessage extends MSAgentAdminMessage {
+    data: {
+        action: MSAgentAdminOperation.GetIP,
+        username: string
+    }
+}
+
+export interface MSAgentAdminKickMessage extends MSAgentAdminMessage {
+    data: {
+        action: MSAgentAdminOperation.Kick,
+        username: string
+    }
+}
+
+export interface MSAgentAdminBanMessage extends MSAgentAdminMessage {
+    data: {
+        action: MSAgentAdminOperation.Ban,
+        username: string
+    }
+}
+
+// Server-to-client
+
+export interface MSAgentAdminLoginResponse extends MSAgentAdminMessage {
+    data: {
+        action: MSAgentAdminOperation.Login,
+        success: boolean
+    }
+}
+
+export interface MSAgentAdminGetIPResponse extends MSAgentAdminMessage {
+    data: {
+        action: MSAgentAdminOperation.GetIP,
+        username: string
+        ip: string
+    }
+}

protocol/src/protocol.ts

@@ -1,12 +1,17 @@
+export * from './admin.js';
+
 export enum MSAgentProtocolMessageType {
     // Client-to-server
     Join = "join",
     Talk = "talk",
+    Admin = "admin",
     // Server-to-client
     Init = "init",
     AddUser = "adduser",
     RemoveUser = "remuser",
-    Chat = "chat"
+    Chat = "chat",
+    Promote = "promote",
+    Error = "error"
 }
 
 export interface MSAgentProtocolMessage {
@@ -68,3 +73,17 @@ export interface MSAgentChatMessage extends MSAgentProtocolMessage {
         audio? : string | undefined;
     }
 }
+
+export interface MSAgentPromoteMessage extends MSAgentProtocolMessage {
+    op: MSAgentProtocolMessageType.Promote,
+    data: {
+        username: string;
+    }
+}
+
+export interface MSAgentErrorMessage extends MSAgentProtocolMessage {
+    op: MSAgentProtocolMessageType.Error,
+    data: {
+        error: string;
+    }
+}

server/config.example.toml

@@ -3,10 +3,17 @@ host = "127.0.0.1"
 port = 3000
 proxied = true
 
+[mysql]
+host = "127.0.0.1"
+username = "agentchat"
+password = "hunter2"
+database = "agentchat"
+
 [chat]
 charlimit = 100
 agentsDir = "agents/"
 maxConnectionsPerIP = 2
+adminPasswordHash = "f52fbd32b2b3b86ff88ef6c490628285f482af15ddcb29541f94bcf526a3f6c7"
 
 [chat.ratelimits]
 chat = {seconds = 10, limit = 8}

server/package.json

@@ -15,6 +15,7 @@
     "@fastify/websocket": "^10.0.1",
     "fastify": "^4.28.1",
     "html-entities": "^2.5.2",
+    "mysql2": "^3.10.2",
     "toml": "^3.0.0",
     "ws": "^8.17.1"
   },

server/src/client.ts

@@ -1,9 +1,10 @@
 import EventEmitter from "events";
 import { WebSocket } from "ws";
-import { MSAgentJoinMessage, MSAgentProtocolMessage, MSAgentProtocolMessageType, MSAgentTalkMessage } from '@msagent-chat/protocol';
+import { MSAgentAdminBanMessage, MSAgentAdminGetIPMessage, MSAgentAdminGetIPResponse, MSAgentAdminKickMessage, MSAgentAdminLoginMessage, MSAgentAdminLoginResponse, MSAgentAdminMessage, MSAgentAdminOperation, MSAgentErrorMessage, MSAgentJoinMessage, MSAgentProtocolMessage, MSAgentProtocolMessageType, MSAgentTalkMessage } from '@msagent-chat/protocol';
 import { MSAgentChatRoom } from "./room.js";
 import * as htmlentities from 'html-entities';
 import RateLimiter from "./ratelimiter.js";
+import { createHash } from "crypto";
 
 // Event types
 
@@ -19,6 +20,7 @@ export class Client extends EventEmitter {
     ip: string;
     username: string | null;
     agent: string | null;
+    admin: boolean;
 
     room: MSAgentChatRoom;
     socket: WebSocket;
@@ -32,6 +34,7 @@ export class Client extends EventEmitter {
         this.room = room;
         this.username = null;
         this.agent = null;
+        this.admin = false;
         
         this.chatRateLimit = new RateLimiter(this.room.config.ratelimits.chat);
 
@@ -64,7 +67,7 @@ export class Client extends EventEmitter {
         });
     }
 
-    private parseMessage(data: string) {
+    private async parseMessage(data: string) {
         let msg: MSAgentProtocolMessage;
         try {
             msg = JSON.parse(data);
@@ -105,6 +108,83 @@ export class Client extends EventEmitter {
                 this.emit('talk', talkMsg.data.msg);
                 break;
             }
+            case MSAgentProtocolMessageType.Admin: {
+                let adminMsg = msg as MSAgentAdminMessage;
+                if (!adminMsg.data) return;
+                switch (adminMsg.data.action) {
+                    case MSAgentAdminOperation.Login: {
+                        let loginMsg = adminMsg as MSAgentAdminLoginMessage;
+                        if (this.admin || !loginMsg.data.password) return;
+                        let sha256 = createHash("sha256");
+                        sha256.update(loginMsg.data.password);
+                        let hash = sha256.digest("hex");
+                        sha256.destroy();
+                        let success = false;
+                        if (hash === this.room.config.adminPasswordHash) {
+                            this.admin = true;
+                            success = true;
+                            this.emit('admin');
+                        }
+                        let res : MSAgentAdminLoginResponse = {
+                            op: MSAgentProtocolMessageType.Admin,
+                            data: {
+                                action: MSAgentAdminOperation.Login,
+                                success
+                            }
+                        }
+                        this.send(res);
+                        break;
+                    }
+                    case MSAgentAdminOperation.GetIP: {
+                        let getIPMsg = adminMsg as MSAgentAdminGetIPMessage;
+                        if (!this.admin || !getIPMsg.data || !getIPMsg.data.username) return;
+                        let _user = this.room.clients.find(c => c.username === getIPMsg.data.username);
+                        if (!_user) return;
+                        let res: MSAgentAdminGetIPResponse = {
+                            op: MSAgentProtocolMessageType.Admin,
+                            data: {
+                                action: MSAgentAdminOperation.GetIP,
+                                username: _user.username!,
+                                ip: _user.ip
+                            }
+                        };
+                        this.send(res);
+                        break;
+                    }
+                    case MSAgentAdminOperation.Kick: {
+                        let kickMsg = adminMsg as MSAgentAdminKickMessage;
+                        if (!this.admin || !kickMsg.data || !kickMsg.data.username) return;
+                        let _user = this.room.clients.find(c => c.username === kickMsg.data.username);
+                        if (!_user) return;
+                        let res: MSAgentErrorMessage = {
+                            op: MSAgentProtocolMessageType.Error,
+                            data: {
+                                error: "You have been kicked."
+                            }
+                        };
+                        await _user.send(res);
+                        _user.socket.close();
+                        break;
+                    }
+                    case MSAgentAdminOperation.Ban: {
+                        let banMsg = adminMsg as MSAgentAdminBanMessage;
+                        if (!this.admin || !banMsg.data || !banMsg.data.username) return;
+                        let _user = this.room.clients.find(c => c.username === banMsg.data.username);
+                        if (!_user) return;
+                        let res: MSAgentErrorMessage = {
+                            op: MSAgentProtocolMessageType.Error,
+                            data: {
+                                error: "You have been banned."
+                            }
+                        };
+                        await this.room.db.banUser(_user.ip, _user.username!);
+                        await _user.send(res);
+                        _user.socket.close();
+                        break;
+                    }
+                }
+                break;
+            }
         }
     }
 }

server/src/config.ts

@@ -4,6 +4,7 @@ export interface IConfig {
         port: number;
         proxied: boolean;
     }
+    mysql: MySQLConfig;
     chat: ChatConfig;
     tts: TTSConfig;
     agents: AgentConfig[];
@@ -21,6 +22,7 @@ export interface ChatConfig {
     charlimit: number;
     agentsDir: string;
     maxConnectionsPerIP: number;
+    adminPasswordHash: string;
     ratelimits: {
         chat: RateLimitConfig;
     }
@@ -32,8 +34,14 @@ export interface AgentConfig {
 }
 
 
-
 export interface RateLimitConfig {
     seconds: number;
     limit: number;
 }
+
+export interface MySQLConfig {
+    host: string;
+    username: string;
+    password: string;
+    database: string;
+}

server/src/database.ts

@@ -0,0 +1,38 @@
+import { MySQLConfig } from "./config.js";
+import * as mysql from 'mysql2/promise';
+
+export class Database {
+    private config: MySQLConfig;
+    private db: mysql.Pool;
+    
+    constructor(config: MySQLConfig) {
+        this.config = config;
+        this.db = mysql.createPool({
+            host: this.config.host,
+            user: this.config.username,
+            password: this.config.password,
+            database: this.config.database,
+            connectionLimit: 10,
+            multipleStatements: false
+        });
+    }
+
+    async init() {
+        let conn = await this.db.getConnection();
+        await conn.execute("CREATE TABLE IF NOT EXISTS bans (ip VARCHAR(45) NOT NULL PRIMARY KEY, username TEXT NOT NULL, time TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP());");
+        conn.release();
+    }
+
+    async banUser(ip: string, username: string) {
+        let conn = await this.db.getConnection();
+        await conn.execute("INSERT INTO bans (ip, username) VALUES (?, ?)", [ip, username]);
+        conn.release();
+    }
+
+    async isUserBanned(ip: string): Promise<boolean> {
+        let conn = await this.db.getConnection();
+        let res = await conn.query("SELECT COUNT(ip) AS cnt FROM bans WHERE ip = ?", [ip]) as mysql.RowDataPacket;
+        conn.release();
+        return res[0][0]["cnt"] !== 0;
+    }
+}

server/src/index.ts

@@ -10,6 +10,8 @@ import { TTSClient } from './tts.js';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { isIP } from 'net';
+import { Database } from './database.js';
+import { MSAgentErrorMessage, MSAgentProtocolMessageType } from '@msagent-chat/protocol';
 
 let config: IConfig;
 let configPath: string;
@@ -31,6 +33,9 @@ try {
     process.exit(1);
 }
 
+let db = new Database(config.mysql);
+await db.init();
+
 const app = Fastify({
     logger: true,
 });
@@ -77,10 +82,10 @@ app.get("/api/agents", (req, res) => {
     return config.agents;
 });
 
-let room = new MSAgentChatRoom(config.chat, config.agents, tts);
+let room = new MSAgentChatRoom(config.chat, config.agents, db, tts);
 
 app.register(async app => {
-    app.get("/api/socket", {websocket: true}, (socket, req) => {
+    app.get("/api/socket", {websocket: true}, async (socket, req) => {
         // TODO: Do this pre-upgrade and return the appropriate status codes
         let ip: string;
         if (config.http.proxied) {
@@ -102,6 +107,18 @@ app.register(async app => {
         } else {
             ip = req.ip;
         }
+        if (await db.isUserBanned(ip)) {
+            let msg: MSAgentErrorMessage = {
+                op: MSAgentProtocolMessageType.Error,
+                data: {
+                    error: "You have been banned."
+                }
+            }
+            socket.send(JSON.stringify(msg), () => {
+                socket.close();
+            });
+            return;
+        }
         let o = room.clients.filter(c => c.ip === ip);
         if (o.length >= config.chat.maxConnectionsPerIP) {
             o[0].socket.close();

server/src/room.ts

@@ -1,8 +1,9 @@
-import { MSAgentAddUserMessage, MSAgentChatMessage, MSAgentInitMessage, MSAgentProtocolMessage, MSAgentProtocolMessageType, MSAgentRemoveUserMessage } from "@msagent-chat/protocol";
+import { MSAgentAddUserMessage, MSAgentChatMessage, MSAgentInitMessage, MSAgentPromoteMessage, MSAgentProtocolMessage, MSAgentProtocolMessageType, MSAgentRemoveUserMessage } from "@msagent-chat/protocol";
 import { Client } from "./client.js";
 import { TTSClient } from "./tts.js";
 import { AgentConfig, ChatConfig } from "./config.js";
 import * as htmlentities from 'html-entities';
+import { Database } from "./database.js";
 
 export class MSAgentChatRoom {
     agents: AgentConfig[];
@@ -10,12 +11,14 @@ export class MSAgentChatRoom {
     tts: TTSClient | null;
     msgId : number = 0;
     config: ChatConfig;
+    db: Database;
 
-    constructor(config: ChatConfig, agents: AgentConfig[], tts: TTSClient | null) {
+    constructor(config: ChatConfig, agents: AgentConfig[], db: Database, tts: TTSClient | null) {
         this.agents = agents;
         this.clients = [];
         this.config = config;
         this.tts = tts;
+        this.db = db;
     }
 
     addClient(client: Client) {
@@ -76,6 +79,17 @@ export class MSAgentChatRoom {
                 _client.send(msg);
             }
         });
+        client.on('admin', () => {
+            let msg: MSAgentPromoteMessage = {
+                op: MSAgentProtocolMessageType.Promote,
+                data: {
+                    username: client.username!
+                }
+            };
+            for (const _client of this.getActiveClients()) {
+                _client.send(msg);
+            }
+        });
     }
 
     private getActiveClients() {

webapp/src/css/style.css

@@ -81,3 +81,32 @@ body {
     font-weight: bold;
     margin-right: 4px;
 }
+
+.context-menu {
+    background-color: silver;
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.context-menu-item {
+    padding-right: 0.2rem;
+    padding-left: 0.2rem;
+    font-size: 11px;
+    
+    padding-bottom: 0.2rem;
+    padding-top: 0.2rem;
+
+    margin-top: 0.3rem;
+    margin-bottom: 0.3rem;
+    font-family: "Pixelated MS Sans Serif", Arial;
+
+    cursor: pointer;
+}
+
+.context-menu-item:hover {
+    background-color: navy;
+    color: #fff;
+}

webapp/src/html/index.html

@@ -29,7 +29,7 @@
                         </div>
                         <div id="logonRoomContainer">
                             <label for="logonRoom">Room name:</label>
-                            <input type="text" id="logonRoom" placeholder="Optional"/>
+                            <input type="text" id="logonRoom" placeholder="Coming Soon" disabled/>
                         </div>
                         <div id="logonButtonsContainer">
                             <select id="agentSelect">

webapp/src/ts/client.ts

@@ -1,16 +1,26 @@
 import { createNanoEvents, Emitter, Unsubscribe } from 'nanoevents';
 import {
 	MSAgentAddUserMessage,
+	MSAgentAdminBanMessage,
+	MSAgentAdminGetIPMessage,
+	MSAgentAdminGetIPResponse,
+	MSAgentAdminKickMessage,
+	MSAgentAdminLoginMessage,
+	MSAgentAdminLoginResponse,
+	MSAgentAdminMessage,
+	MSAgentAdminOperation,
 	MSAgentChatMessage,
+	MSAgentErrorMessage,
 	MSAgentInitMessage,
 	MSAgentJoinMessage,
+	MSAgentPromoteMessage,
 	MSAgentProtocolMessage,
 	MSAgentProtocolMessageType,
 	MSAgentRemoveUserMessage,
 	MSAgentTalkMessage
 } from '@msagent-chat/protocol';
 import { User } from './user';
-import { agentCreateCharacterFromUrl } from '@msagent-chat/msagent.js';
+import { agentCreateCharacterFromUrl, ContextMenuItem } from '@msagent-chat/msagent.js';
 
 export interface MSAgentClientEvents {
 	close: () => void;
@@ -32,6 +42,7 @@ export class MSAgentClient {
 	private users: User[];
 	private playingAudio: Map<string, HTMLAudioElement> = new Map();
 	private charlimit: number = 0;
+	private admin: boolean;
 
 	private username: string | null = null;
 	private agentContainer: HTMLElement;
@@ -43,6 +54,7 @@ export class MSAgentClient {
 		this.socket = null;
 		this.events = createNanoEvents();
 		this.users = [];
+		this.admin = false;
 	}
 
 	on<E extends keyof MSAgentClientEvents>(event: E, callback: MSAgentClientEvents[E]): Unsubscribe {
@@ -54,6 +66,10 @@ export class MSAgentClient {
 		return (await res.json()) as APIAgentInfo[];
 	}
 
+	getUsers() {
+		return this.users;
+	}
+
 	connect(): Promise<void> {
 		return new Promise((res) => {
 			let url = new URL(this.url);
@@ -79,8 +95,6 @@ export class MSAgentClient {
 			});
 			this.socket.addEventListener('close', () => {
 				this.events.emit('close');
-                // TODO: Make this clean
-                window.location.reload();
 			});
 		});
 	}
@@ -128,6 +142,73 @@ export class MSAgentClient {
 		return this.charlimit;
 	}
 
+	setContextMenu(user: User) {
+		let ctx = user.agent.getContextMenu();
+		ctx.clearItems();
+		// Mute
+		let _user = user;
+		let mute = new ContextMenuItem("Mute", () => {
+			if (_user.muted) {
+				mute.setName("Mute");
+				_user.muted = false;
+			} else {
+				mute.setName("Unmute");
+				_user.muted = true;
+			}
+		});
+		ctx.addItem(mute);
+		// Admin
+		if (this.admin) {
+			// Get IP
+			let getip = new ContextMenuItem("Get IP", () => {
+				let msg: MSAgentAdminGetIPMessage = {
+					op: MSAgentProtocolMessageType.Admin,
+					data: {
+						action: MSAgentAdminOperation.GetIP,
+						username: _user.username
+					}
+				};
+				this.send(msg);
+			});
+			ctx.addItem(getip);
+			// Kick
+			let kick = new ContextMenuItem("Kick", () => {
+				let msg: MSAgentAdminKickMessage = {
+					op: MSAgentProtocolMessageType.Admin,
+					data: {
+						action: MSAgentAdminOperation.Kick,
+						username: _user.username
+					}
+				};
+				this.send(msg);
+			});
+			ctx.addItem(kick);
+			// Ban
+			let ban = new ContextMenuItem("Ban", () => {
+				let msg: MSAgentAdminBanMessage = {
+					op: MSAgentProtocolMessageType.Admin,
+					data: {
+						action: MSAgentAdminOperation.Ban,
+						username: _user.username
+					}
+				};
+				this.send(msg);
+			});
+			ctx.addItem(ban);
+		}
+	}
+
+	async login(password: string) {
+		let msg: MSAgentAdminLoginMessage = {
+			op: MSAgentProtocolMessageType.Admin,
+			data: {
+				action: MSAgentAdminOperation.Login,
+				password
+			}
+		};
+		await this.send(msg);
+	}
+
 	private async handleMessage(data: string) {
 		let msg: MSAgentProtocolMessage;
 		try {
@@ -144,22 +225,32 @@ export class MSAgentClient {
 				this.charlimit = initMsg.data.charlimit;
 				for (let _user of initMsg.data.users) {
 					let agent = await agentCreateCharacterFromUrl(this.url + '/api/agents/' + _user.agent);
-                    agent.setUsername(_user.username);
+                    agent.setUsername(_user.username, "#000000");
 					agent.addToDom(this.agentContainer);
 					agent.show();
 					let user = new User(_user.username, agent);
+					this.setContextMenu(user);
 					this.users.push(user);
 				}
+				document.addEventListener('keydown', e => {
+					if (e.key === "l" && e.ctrlKey) {
+						e.preventDefault();
+						let password = window.prompt("Papers, please");
+						if (!password) return;
+						this.login(password);
+					}
+				});
 				this.events.emit('join');
 				break;
 			}
 			case MSAgentProtocolMessageType.AddUser: {
 				let addUserMsg = msg as MSAgentAddUserMessage;
 				let agent = await agentCreateCharacterFromUrl(this.url + '/api/agents/' + addUserMsg.data.agent);
-                agent.setUsername(addUserMsg.data.username);
+                agent.setUsername(addUserMsg.data.username, "#000000");
 				agent.addToDom(this.agentContainer);
 				agent.show();
 				let user = new User(addUserMsg.data.username, agent);
+				this.setContextMenu(user);
 				this.users.push(user);
 				this.events.emit('adduser', user);
 				break;
@@ -180,6 +271,8 @@ export class MSAgentClient {
 			case MSAgentProtocolMessageType.Chat: {
 				let chatMsg = msg as MSAgentChatMessage;
 				let user = this.users.find((u) => u.username === chatMsg.data.username);
+				if (user?.muted) return;
+
 				this.events.emit('chat', user, chatMsg.data.message);
 				if (chatMsg.data.audio !== undefined) {
 					let audio = new Audio(this.url + chatMsg.data.audio);
@@ -205,6 +298,41 @@ export class MSAgentClient {
 				}
 				break;
 			}
+			case MSAgentProtocolMessageType.Admin: {
+				let adminMsg = msg as MSAgentAdminMessage;
+				switch (adminMsg.data.action) {
+					case MSAgentAdminOperation.Login: {
+						let loginMsg = adminMsg as MSAgentAdminLoginResponse;
+						if (loginMsg.data.success) {
+							this.admin = true;
+							for (const user of this.users) this.setContextMenu(user);
+						} else {
+							alert("Incorrect password!");
+						}
+						break;
+					}
+					case MSAgentAdminOperation.GetIP: {
+						let ipMsg = adminMsg as MSAgentAdminGetIPResponse;
+						alert(`${ipMsg.data.username} - ${ipMsg.data.ip}`);
+						break;
+					}
+				}
+				break;
+			}
+			case MSAgentProtocolMessageType.Promote: {
+				let promoteMsg = msg as MSAgentPromoteMessage;
+				let user = this.users.find(u => u.username === promoteMsg.data.username);
+				if (!user) return;
+				user.admin = true;
+				user.agent.setUsername(user.username, "#ff0000");
+				break;
+			}
+			case MSAgentProtocolMessageType.Error: {
+				let errorMsg = msg as MSAgentErrorMessage;
+				// TODO: This should be shown as part of the logon window
+				window.alert(errorMsg.data.error);
+				break;
+			}
 		}
 	}
 }

webapp/src/ts/main.ts

@@ -16,7 +16,22 @@ const elements = {
     chatSendBtn: document.getElementById("chatSendBtn") as HTMLButtonElement
 }
 
-let Room : MSAgentClient = new MSAgentClient(`${window.location.protocol}//${window.location.host}`, elements.chatView);
+let Room : MSAgentClient;
+
+function roomInit() {
+    Room = new MSAgentClient(`${window.location.protocol}//${window.location.host}`, elements.chatView);
+    Room.on('close', () => {
+        for (let user of Room.getUsers()) {
+            user.agent.remove();
+        }
+        roomInit();
+        loggingIn = false;
+        elements.logonButton.disabled = false;
+        logonWindow.show();
+        elements.logonView.style.display = "block";
+        elements.chatView.style.display = "none";
+    });
+}
 
 let logonWindow = new MSWindow(elements.logonWindow, {
     width: 500,
@@ -73,3 +88,5 @@ function talk() {
     Room.talk(elements.chatInput.value);
     elements.chatInput.value = "";
 }
+
+roomInit();

webapp/src/ts/user.ts

@@ -2,10 +2,14 @@ import { Agent } from "@msagent-chat/msagent.js";
 
 export class User {
     username: string;
-    agent: Agent
+    agent: Agent;
+    muted: boolean;
+    admin: boolean;
     
     constructor(username: string, agent: Agent) {
         this.username = username;
         this.agent = agent;
+        this.muted = false;
+        this.admin = false;
     }
 }

yarn.lock

@@ -233,6 +233,7 @@ __metadata:
     "@types/ws": "npm:^8.5.10"
     fastify: "npm:^4.28.1"
     html-entities: "npm:^2.5.2"
+    mysql2: "npm:^3.10.2"
     toml: "npm:^3.0.0"
     typescript: "npm:^5.5.3"
     ws: "npm:^8.17.1"
@@ -1865,6 +1866,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"denque@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "denque@npm:2.1.0"
+  checksum: 10c0/f9ef81aa0af9c6c614a727cb3bd13c5d7db2af1abf9e6352045b86e85873e629690f6222f4edd49d10e4ccf8f078bbeec0794fafaf61b659c0589d0c511ec363
+  languageName: node
+  linkType: hard
+
 "depd@npm:2.0.0":
   version: 2.0.0
   resolution: "depd@npm:2.0.0"
@@ -2245,6 +2253,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"generate-function@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "generate-function@npm:2.3.1"
+  dependencies:
+    is-property: "npm:^1.0.2"
+  checksum: 10c0/4645cf1da90375e46a6f1dc51abc9933e5eafa4cd1a44c2f7e3909a30a4e9a1a08c14cd7d5b32da039da2dba2a085e1ed4597b580c196c3245b2d35d8bc0de5d
+  languageName: node
+  linkType: hard
+
 "get-port@npm:^4.2.0":
   version: 4.2.0
   resolution: "get-port@npm:4.2.0"
@@ -2401,7 +2418,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:^0.6.2":
+"iconv-lite@npm:^0.6.2, iconv-lite@npm:^0.6.3":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
   dependencies:
@@ -2530,6 +2547,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-property@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "is-property@npm:1.0.2"
+  checksum: 10c0/33ab65a136e4ba3f74d4f7d9d2a013f1bd207082e11cedb160698e8d5394644e873c39668d112a402175ccbc58a087cef87198ed46829dbddb479115a0257283
+  languageName: node
+  linkType: hard
+
 "isexe@npm:^2.0.0":
   version: 2.0.0
   resolution: "isexe@npm:2.0.0"
@@ -2767,6 +2791,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"long@npm:^5.2.1":
+  version: 5.2.3
+  resolution: "long@npm:5.2.3"
+  checksum: 10c0/6a0da658f5ef683b90330b1af76f06790c623e148222da9d75b60e266bbf88f803232dd21464575681638894a84091616e7f89557aa087fd14116c0f4e0e43d9
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
   version: 10.3.0
   resolution: "lru-cache@npm:10.3.0"
@@ -2774,6 +2805,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lru-cache@npm:^7.14.1":
+  version: 7.18.3
+  resolution: "lru-cache@npm:7.18.3"
+  checksum: 10c0/b3a452b491433db885beed95041eb104c157ef7794b9c9b4d647be503be91769d11206bb573849a16b4cc0d03cbd15ffd22df7960997788b74c1d399ac7a4fed
+  languageName: node
+  linkType: hard
+
+"lru-cache@npm:^8.0.0":
+  version: 8.0.5
+  resolution: "lru-cache@npm:8.0.5"
+  checksum: 10c0/cd95a9c38497611c5a6453de39a881f6eb5865851a2a01b5f14104ff3fee515362a7b1e7de28606028f423802910ba05bdb8ae1aa7b0d54eae70c92f0cec10b2
+  languageName: node
+  linkType: hard
+
 "make-fetch-happen@npm:^13.0.0":
   version: 13.0.1
   resolution: "make-fetch-happen@npm:13.0.1"
@@ -3003,6 +3048,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mysql2@npm:^3.10.2":
+  version: 3.10.2
+  resolution: "mysql2@npm:3.10.2"
+  dependencies:
+    denque: "npm:^2.1.0"
+    generate-function: "npm:^2.3.1"
+    iconv-lite: "npm:^0.6.3"
+    long: "npm:^5.2.1"
+    lru-cache: "npm:^8.0.0"
+    named-placeholders: "npm:^1.1.3"
+    seq-queue: "npm:^0.0.5"
+    sqlstring: "npm:^2.3.2"
+  checksum: 10c0/7d7a0a703748fc7872b282893ebdda4ba34a4d888b5094e008fb7fd1d22c37afbba8b67d31faf9c43ef5a9ca3d242f866b54030aa2e419f6a3ef491268fc77ca
+  languageName: node
+  linkType: hard
+
+"named-placeholders@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "named-placeholders@npm:1.1.3"
+  dependencies:
+    lru-cache: "npm:^7.14.1"
+  checksum: 10c0/cd83b4bbdf358b2285e3c51260fac2039c9d0546632b8a856b3eeabd3bfb3d5b597507ab319b97c281a4a70d748f38bc66fa218a61cb44f55ad997ad5d9c9935
+  languageName: node
+  linkType: hard
+
 "nanoevents@npm:^9.0.0":
   version: 9.0.0
   resolution: "nanoevents@npm:9.0.0"
@@ -3595,6 +3665,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"seq-queue@npm:^0.0.5":
+  version: 0.0.5
+  resolution: "seq-queue@npm:0.0.5"
+  checksum: 10c0/ec870fc392f0e6e99ec0e551c3041c1a66144d1580efabae7358e572de127b0ad2f844c95a4861d2e6203f836adea4c8196345b37bed55331ead8f22d99ac84c
+  languageName: node
+  linkType: hard
+
 "set-cookie-parser@npm:^2.4.1":
   version: 2.6.0
   resolution: "set-cookie-parser@npm:2.6.0"
@@ -3734,6 +3811,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sqlstring@npm:^2.3.2":
+  version: 2.3.3
+  resolution: "sqlstring@npm:2.3.3"
+  checksum: 10c0/3b5dd7badb3d6312f494cfa6c9a381ee630fbe3dbd571c4c9eb8ecdb99a7bf5a1f7a5043191d768797f6b3c04eed5958ac6a5f948b998f0a138294c6d3125fbd
+  languageName: node
+  linkType: hard
+
 "srcset@npm:4":
   version: 4.0.0
   resolution: "srcset@npm:4.0.0"