Add read-write chat embed. Closes #1906

web/.storybook/stories-category-doc-pages/Introduction.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 import { Typography } from 'antd';
 
-<Meta title="Owncast/Readme" />
+<Meta title="Owncast/Documentation/Readme" />
 
 <Typography.Title style={{ color: 'var(--primary-color)' }}>Owncast Web UI v2</Typography.Title>
 

web/pages/embed/chat/readwrite.tsx

@@ -1,3 +0,0 @@
-export default function ReadWriteChatEmbed() {
-  return <div className="standalone-chat-embed">fully featured chat embed goes here</div>;
-}

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

@@ -0,0 +1,38 @@
+import { useRecoilValue } from 'recoil';
+import { ChatMessage } from '../../../../interfaces/chat-message.model';
+import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer';
+import {
+  ClientConfigStore,
+  chatDisplayNameAtom,
+  chatUserIdAtom,
+  visibleChatMessagesSelector,
+  clientConfigStateAtom,
+  isChatModeratorAtom,
+} from '../../../../components/stores/ClientConfigStore';
+import Header from '../../../../components/ui/Header/Header';
+import { ClientConfig } from '../../../../interfaces/client-config.model';
+
+export default function ReadWriteChatEmbed() {
+  const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
+  const chatUserId = useRecoilValue<string>(chatUserIdAtom);
+  const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector);
+  const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
+  const isModerator = useRecoilValue<boolean>(isChatModeratorAtom);
+
+  const { name, chatDisabled } = clientConfig;
+
+  return (
+    <div>
+      <ClientConfigStore />
+      <Header name={name} chatAvailable chatDisabled={chatDisabled} />
+      <ChatContainer
+        messages={messages}
+        usernameToHighlight={chatDisplayName}
+        chatUserId={chatUserId}
+        isModerator={isModerator}
+        showInput
+        height="80vh"
+      />
+    </div>
+  );
+}