Add read-only chat embed page. Closes #1905

web/.storybook/main.js

@@ -6,6 +6,7 @@ module.exports = {
     '../.storybook/stories-category-doc-pages/**/*.stories.mdx',
     '../stories/**/*.stories.@(js|jsx|ts|tsx)',
     '../components/**/*.stories.@(js|jsx|ts|tsx)',
+    '../pages/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
     '@storybook/addon-links',

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -20,10 +20,12 @@ interface Props {
   usernameToHighlight: string;
   chatUserId: string;
   isModerator: boolean;
+  showInput?: boolean;
+  height?: string;
 }
 
 export default function ChatContainer(props: Props) {
-  const { messages, usernameToHighlight, chatUserId, isModerator } = props;
+  const { messages, usernameToHighlight, chatUserId, isModerator, showInput, height } = props;
 
   const [atBottom, setAtBottom] = useState(false);
   // const [showButton, setShowButton] = useState(false);
@@ -117,7 +119,7 @@ export default function ChatContainer(props: Props) {
     () => (
       <>
         <Virtuoso
-          style={{ height: 'calc(100vh - 170px)', width: 'auto' }}
+          style={{ height, width: 'auto' }}
           ref={chatContainerRef}
           initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom
           data={messages}
@@ -156,7 +158,7 @@ export default function ChatContainer(props: Props) {
         //
       }
       {MessagesTable}
-      <ChatTextField />
+      {showInput && <ChatTextField />}
     </div>
   );
 }
@@ -199,3 +201,8 @@ function checkIsModerator(message) {
 
   return scopes.includes('MODERATOR');
 }
+
+ChatContainer.defaultProps = {
+  showInput: true,
+  height: 'calc(100vh - 170px)',
+};

web/pages/embed/chat/readonly.tsx

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

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

@@ -0,0 +1,29 @@
+import { useRecoilValue } from 'recoil';
+import { ChatMessage } from '../../../../interfaces/chat-message.model';
+import ChatContainer from '../../../../components/chat/ChatContainer/ChatContainer';
+import {
+  ClientConfigStore,
+  chatDisplayNameAtom,
+  chatUserIdAtom,
+  visibleChatMessagesSelector,
+} from '../../../../components/stores/ClientConfigStore';
+
+export default function ReadOnlyChatEmbed() {
+  const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
+  const chatUserId = useRecoilValue<string>(chatUserIdAtom);
+  const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector);
+
+  return (
+    <div>
+      <ClientConfigStore />
+      <ChatContainer
+        messages={messages}
+        usernameToHighlight={chatDisplayName}
+        chatUserId={chatUserId}
+        isModerator={false}
+        showInput={false}
+        height="100vh"
+      />
+    </div>
+  );
+}