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.
This commit is contained in:
John Costa
2026-03-31 20:36:28 -07:00
committed by GitHub
parent e738156fd7
commit 8ccec822b4
4 changed files with 26 additions and 4 deletions
+15 -1
View File
@@ -1,4 +1,6 @@
import { useRecoilValue } from 'recoil';
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';
@@ -6,22 +8,34 @@ import {
ClientConfigStore,
currentUserAtom,
visibleChatMessagesSelector,
clientConfigStateAtom,
isChatAvailableSelector,
} from '../../../../components/stores/ClientConfigStore';
import { ClientConfig } from '../../../../interfaces/client-config.model';
import { Theme } from '../../../../components/theme/Theme';
import { ComponentError } from '../../../../components/ui/ComponentError/ComponentError';
import { Localization } from '../../../../types/localization';
export default function ReadOnlyChatEmbed() {
const currentUser = useRecoilValue(currentUserAtom);
const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector);
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
const isChatAvailable = useRecoilValue(isChatAvailableSelector);
const { name } = clientConfig;
const { t } = useTranslation();
const pageTitle = name ? t(Localization.Frontend.chatEmbedTitle, { name }) : 'Chat';
return (
<div>
<Head>
<title>{pageTitle}</title>
</Head>
<ErrorBoundary
// eslint-disable-next-line react/no-unstable-nested-components
fallbackRender={({ error }) => (
<ComponentError componentName="ReadWriteChatEmbed" message={error.message} />
<ComponentError componentName="ReadOnlyChatEmbed" message={error.message} />
)}
>
<ClientConfigStore />