Merge branch 'chats-autosize' into 'develop'

ChatRoom: autosize height on desktop

See merge request soapbox-pub/soapbox-fe!1554

app/soapbox/features/chats/chat-room.tsx

@@ -60,6 +60,7 @@ const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
       <ChatBox
         chatId={chat.id}
         onSetInputRef={handleInputRef}
+        autosize
       />
     </Column>
   );

app/soapbox/features/chats/components/chat-box.tsx

@@ -25,13 +25,14 @@ const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
 interface IChatBox {
   chatId: string,
   onSetInputRef: (el: HTMLTextAreaElement) => void,
+  autosize?: boolean,
 }
 
 /**
  * Chat UI with just the messages and textarea.
  * Reused between floating desktop chats and fullscreen/mobile chats.
  */
-const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef }) => {
+const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chatId, ImmutableOrderedSet<string>()));
@@ -167,7 +168,7 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef }) => {
 
   return (
     <div className='chat-box' onMouseOver={handleHover}>
-      <ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} />
+      <ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} autosize />
       {renderAttachment()}
       {isUploading && (
         <UploadProgress progress={uploadProgress * 100} />

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -66,10 +66,12 @@ interface IChatMessageList {
   chatId: string,
   /** Message IDs to render. */
   chatMessageIds: ImmutableOrderedSet<string>,
+  /** Whether to make the chatbox fill the height of the screen. */
+  autosize?: boolean,
 }
 
 /** Scrollable list of chat messages. */
-const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds }) => {
+const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, autosize }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
@@ -306,7 +308,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds })
   }, [chatMessageIds.first()]);
 
   return (
-    <div className='chat-messages' ref={node}>
+    <div className='chat-messages' style={{ height: autosize ? 'calc(100vh - 16rem)' : undefined }} ref={node}>
       {chatMessages.reduce((acc, curr, idx) => {
         const lastMessage = chatMessages.get(idx - 1);