Chat popup (#3098)

* add pop out chat button

* add button to close chat popup

* chat is hidden on main interface when a popup chat is open

* NameChangeEvent renames clients with the given id

if you have two or more owncast windows (or pop-out chats) open, changing your
name in 1 client is reflected in all clients.

* replace isChatVisible booleans with chatState enum

* update stories to use ChatState

* fix build tests

---------

Co-authored-by: janWilejan <>

web/components/stores/eventhandlers/handleNameChangeEvent.tsx

@@ -1,5 +1,18 @@
-import { ChatEvent } from '../../../interfaces/socket-events';
+import { NameChangeEvent } from '../../../interfaces/socket-events';
+import { CurrentUser } from '../../../interfaces/current-user';
 
-export function handleNameChangeEvent(message: ChatEvent, setChatMessages) {
+export function handleNameChangeEvent(
+  message: NameChangeEvent,
+  setChatMessages,
+  setCurrentUser: (_: (_: CurrentUser) => CurrentUser) => void,
+) {
+  setCurrentUser(currentUser =>
+    currentUser.id === message.user.id
+      ? {
+          ...currentUser,
+          displayName: message.user.displayName,
+        }
+      : currentUser,
+  );
   setChatMessages(currentState => [...currentState, message]);
 }