feat: add readonly-chat class to readonly embed (#4714)

Adds a 'readonly' prop to ChatContainer that conditionally applies a
'readonly-chat' CSS class to the chat container element. This allows
streamers using OBS to target the readonly chat embed with custom CSS.

The readonly embed at /embed/chat/readonly now passes readonly={true}
to ChatContainer, which adds the class to the container div.

Fixes #4266

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -33,6 +33,7 @@ export type ChatContainerProps = {
   chatAvailable: boolean;
   focusInput?: boolean;
   desktop?: boolean;
+  readonly?: boolean;
 };
 
 let resizeWindowCallback: () => void;
@@ -84,6 +85,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   chatAvailable: chatEnabled,
   desktop,
   focusInput = true,
+  readonly = false,
 }) => {
   const [showScrollToBottomButton, setShowScrollToBottomButton] = useState(false);
   const [isAtBottom, setIsAtBottom] = useState(false);
@@ -358,7 +360,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
       <div
         aria-live="off"
         id="chat-container"
-        className={styles.chatContainer}
+        className={`${styles.chatContainer}${readonly ? ' readonly-chat' : ''}`}
         style={desktop && { width: `${defaultChatWidth}px` }}
       >
         {MessagesTable}

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

@@ -35,6 +35,7 @@ export default function ReadOnlyChatEmbed() {
             showInput={false}
             height="100vh"
             chatAvailable={isChatAvailable}
+            readonly
           />
         )}
       </ErrorBoundary>