Add support for disabled chat state in the chat input field. Closes #2761

web/components/chat/ChatContainer/ChatContainer.stories.tsx

@@ -593,6 +593,18 @@ Example.args = {
   chatUserId: 'testuser',
   isModerator: true,
   showInput: true,
+  chatAvailable: true,
+};
+
+export const ChatDisabled = Template.bind({});
+ChatDisabled.args = {
+  loading: false,
+  messages,
+  usernameToHighlight: 'testuser',
+  chatUserId: 'testuser',
+  isModerator: true,
+  showInput: true,
+  chatAvailable: false,
 };
 
 export const SingleMessage = Template.bind({});
@@ -603,4 +615,5 @@ SingleMessage.args = {
   chatUserId: 'testuser',
   isModerator: true,
   showInput: true,
+  chatAvailable: true,
 };

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -25,6 +25,7 @@ export type ChatContainerProps = {
   isModerator: boolean;
   showInput?: boolean;
   height?: string;
+  chatAvailable: boolean;
 };
 
 function shouldCollapseMessages(
@@ -92,6 +93,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   isModerator,
   showInput,
   height,
+  chatAvailable: chatEnabled,
 }) => {
   const [showScrollToBottomButton, setShowScrollToBottomButton] = useState(false);
   const [isAtBottom, setIsAtBottom] = useState(false);
@@ -284,7 +286,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
       {MessagesTable}
       {showInput && (
         <div className={styles.chatTextField}>
-          <ChatTextField />
+          <ChatTextField enabled={chatEnabled} />
         </div>
       )}
     </div>