fix(web): set page title on chat embed pages (#4820)

Set a translated page title on the readonly and readwrite chat embed
pages so popout/embedded chat windows display a meaningful title
based on the configured stream name, addressing #4794.

Uses next-export-i18n with a new chatEmbedTitle key for proper
localization. Also fixes the readonly embed error boundary
componentName from ReadWriteChatEmbed to ReadOnlyChatEmbed.

web/pages/embed/chat/readwrite/index.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/no-unknown-property */
 import { useRecoilValue } from 'recoil';
 import { useEffect } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
+import Head from 'next/head';
 import { useTranslation } from 'next-export-i18n';
+import { ErrorBoundary } from 'react-error-boundary';
 import { ChatMessage } from '../../../../interfaces/chat-message.model';
 import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer';
 import {
@@ -50,6 +51,8 @@ export default function ReadWriteChatEmbed() {
 
   const headerText = online ? streamTitle || name : name;
 
+  const pageTitle = name ? t(Localization.Frontend.chatEmbedTitle, { name }) : 'Chat';
+
   // This is a hack to force a specific body background color for just this page.
   useEffect(() => {
     document.body.classList.add('body-background');
@@ -57,6 +60,9 @@ export default function ReadWriteChatEmbed() {
 
   return (
     <div>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
       <style jsx global>
         {`
           .body-background {