typing indicator

app/src/App.js

@@ -78,7 +78,7 @@ function Chat({user, setUser}) {
 		<div className="Chat h-full flex flex-col">
 			<MessageList messages={messages} user={user} updateUser={updateUser} />
 			<UserList users={users} updateUser={updateUser} user={user} socket={socket} />
-			<ChatInput sendMessage={sendMessage} user={user} updateUser={updateUser} setSettingsModalOpen={setSettingsModalOpen} />
+			<ChatInput sendMessage={sendMessage} user={user} updateUser={updateUser} setSettingsModalOpen={setSettingsModalOpen} socket={socket} />
 			<SettingsModal open={settingsModalOpen} setOpen={setSettingsModalOpen} user={user} updateUser={updateUser} />
 		</div>
 	)
@@ -121,13 +121,13 @@ function MessageList({messages, user, updateUser}) {
 
 			if (message.user)
 			// eslint-disable-next-line react/jsx-no-target-blank
-			var prefix = <b><a
+			var prefix = <b>{message.user.website ? <a
 				href={message.user.website}
 				target="_blank"
 				rel="noopener"
-				onClick={onAuthorClick}
+				//onClick={onAuthorClick}
 				className={message.user.website && "hover:underline"}
-			>{message.user.name}</a>: </b>
+			>{message.user.name}</a> : message.user.name}: </b>
 
 			var content = <span
 				className={(message.user ? '' : " font-bold")}
@@ -167,7 +167,7 @@ function MessageList({messages, user, updateUser}) {
 
 
 
-function ChatInput({sendMessage, user, updateUser, setSettingsModalOpen}) {
+function ChatInput({sendMessage, user, updateUser, setSettingsModalOpen, socket}) {
 	var [content, setContent] = useState("");
 	var [file, setFile] = useState();
 	var fileInput = useRef();
@@ -214,7 +214,10 @@ function ChatInput({sendMessage, user, updateUser, setSettingsModalOpen}) {
 				className="p-4 flex-1 dark:bg-black"
 				style={{color: user.color}}
 				type="text"
-				onChange={event => setContent(event.target.value)}
+				onChange={event => {
+					setContent(event.target.value);
+					socket.emit("type");
+				}}
 				onPaste={onPaste}
 				onKeyDown={onKeyDown}
 				value={content}
@@ -258,8 +261,15 @@ function UserList({users, updateUser, user: myUser, socket}) {
 		if (!name) return;
 		updateUser({name});
 	}
-	return <div className="Users fixed top-0 right-5 text-right max-w-xs">
-		<b>{users.length}</b> online: {users.map(user => <div style={{color: user.color}} key={user.socketid} className={"mr-1 inline-block" + (user.socketid === socket.id ? ' cursor-pointer	' : '')} onClick={user.socketid === socket.id ? changeName : undefined}>{user.name}</div>)}
+	useEffect(() => {
+		socket?.on("type", socketid => {
+			var n = document.getElementById(socketid);
+			n.style.bottom = "2px";
+			setTimeout(() => n.style.bottom = "0px", 100);
+		});
+	}, [socket])
+	return <div className="fixed top-0 right-5 text-right max-w-xs">
+		<b>{users.length}</b> online: {users.map(user => <div style={{color: user.color}} key={user.socketid} id={user.socketid} className={"mr-1 inline-block relative" + (user.socketid === socket.id ? ' cursor-pointer	' : '')} onClick={user.socketid === socket.id ? changeName : undefined}>{user.name}</div>)}
 	</div>
 }
 

server/index.js

@@ -100,7 +100,7 @@ dbclient.connect().then(async () => {
 			});
 			socket.on("message", m => newMessage({
 				content: m.content?.substring(0,1024),
-				user: socket.data.user,
+				user: Object.assign({}, socket.data.user),
 				file: m.file ? {
 					name: m.file.name?.substring(0,128),
 					data: m.file.data,
@@ -110,6 +110,9 @@ dbclient.connect().then(async () => {
 			var history = await messages.find().project({"file.data": 0}).sort({timestamp: -1}).limit(100).toArray();
 			history = history.reverse();
 			socket.emit("messages", history);
+			socket.on("type", () => {
+				io.emit("type", socket.id);
+			});
 		});
 	});
 	server.listen(8535);
@@ -120,16 +123,16 @@ dbclient.connect().then(async () => {
 		message._id = insertedId.toString();
 		console.debug("message", message);
 		delete message.file?.data;
+		delete message.user.ip;
 		io.emit("message", message);
 	}
 
 	async function broadcastUsers() {
-		var users = await io.fetchSockets().then(sockets => sockets.map(socket => {
-			var user = socket.data.user;
-			if (!user) return;
+		var users = await io.fetchSockets().then(sockets => sockets.filter(socket => socket.data.user).map(socket => {
+			var user = Object.assign({}, socket.data.user);
 			delete user.ip;
 			return user;
-		}).filter(x=>x));
+		}));
 		io.emit("users", users);
 	}
 });