From 09d73b1c45e9fff070cf9971225d76fda2b04f33 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 12 Sep 2022 16:46:19 -0400
Subject: [PATCH] Refactor chat component naming

---
 app/soapbox/features/chats/chat-room.tsx      |   4 +-
 ...{chat.test.tsx => chat-list-item.test.tsx} |  14 +-
 .../features/chats/components/chat-box.tsx    | 279 ---------------
 .../chats/components/chat-list-item.tsx       |  70 ++++
 .../features/chats/components/chat-list.tsx   |   4 +-
 .../features/chats/components/chat-window.tsx |   4 +-
 .../features/chats/components/chat.tsx        | 317 +++++++++++++++---
 app/soapbox/features/chats/index.tsx          |   6 +-
 8 files changed, 349 insertions(+), 349 deletions(-)
 rename app/soapbox/features/chats/components/__tests__/{chat.test.tsx => chat-list-item.test.tsx} (77%)
 delete mode 100644 app/soapbox/features/chats/components/chat-box.tsx
 create mode 100644 app/soapbox/features/chats/components/chat-list-item.tsx

diff --git a/app/soapbox/features/chats/chat-room.tsx b/app/soapbox/features/chats/chat-room.tsx
index 520349288..d7cc1cfe7 100644
--- a/app/soapbox/features/chats/chat-room.tsx
+++ b/app/soapbox/features/chats/chat-room.tsx
@@ -8,7 +8,7 @@ import { makeGetChat } from 'soapbox/selectors';
 import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn as getDisplayFqn } from 'soapbox/utils/state';
 
-import ChatBox from './components/chat-box';
+import Chat from './components/chat';
 
 const getChat = makeGetChat();
 
@@ -47,7 +47,7 @@ const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
 
   return (
     <Column label={`@${getAcct(chat.account as any, displayFqn)}`}>
-      <ChatBox chat={chat as any} autosize />
+      <Chat chat={chat as any} autosize />
     </Column>
   );
 };
diff --git a/app/soapbox/features/chats/components/__tests__/chat.test.tsx b/app/soapbox/features/chats/components/__tests__/chat-list-item.test.tsx
similarity index 77%
rename from app/soapbox/features/chats/components/__tests__/chat.test.tsx
rename to app/soapbox/features/chats/components/__tests__/chat-list-item.test.tsx
index 9a968d514..80eecfbae 100644
--- a/app/soapbox/features/chats/components/__tests__/chat.test.tsx
+++ b/app/soapbox/features/chats/components/__tests__/chat-list-item.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { IChat } from 'soapbox/queries/chats';
 
 import { render, screen } from '../../../../jest/test-helpers';
-import Chat from '../chat';
+import ChatListItem from '../chat-list-item';
 
 const chat: any = {
   id: '1',
@@ -28,9 +28,9 @@ const chat: any = {
   },
 };
 
-describe('<Chat />', () => {
+describe('<ChatListItem />', () => {
   it('renders correctly', () => {
-    render(<Chat chat={chat as IChat} onClick={jest.fn()} />);
+    render(<ChatListItem chat={chat as IChat} onClick={jest.fn()} />);
 
     expect(screen.getByTestId('chat')).toBeInTheDocument();
     expect(screen.getByTestId('chat')).toHaveTextContent(chat.account.display_name);
@@ -38,28 +38,28 @@ describe('<Chat />', () => {
 
   describe('last message content', () => {
     it('renders the last message', () => {
-      render(<Chat chat={chat as IChat} onClick={jest.fn()} />);
+      render(<ChatListItem chat={chat as IChat} onClick={jest.fn()} />);
 
       expect(screen.getByTestId('chat-last-message')).toBeInTheDocument();
     });
 
     it('does not render the last message', () => {
       const changedChat = { ...chat, last_message: null };
-      render(<Chat chat={changedChat as IChat} onClick={jest.fn()} />);
+      render(<ChatListItem chat={changedChat as IChat} onClick={jest.fn()} />);
 
       expect(screen.queryAllByTestId('chat-last-message')).toHaveLength(0);
     });
 
     describe('unread', () => {
       it('renders the unread dot', () => {
-        render(<Chat chat={chat as IChat} onClick={jest.fn()} />);
+        render(<ChatListItem chat={chat as IChat} onClick={jest.fn()} />);
 
         expect(screen.getByTestId('chat-unread-indicator')).toBeInTheDocument();
       });
 
       it('does not render the unread dot', () => {
         const changedChat = { ...chat, last_message: { ...chat.last_message, unread: false } };
-        render(<Chat chat={changedChat as IChat} onClick={jest.fn()} />);
+        render(<ChatListItem chat={changedChat as IChat} onClick={jest.fn()} />);
 
         expect(screen.queryAllByTestId('chat-unread-indicator')).toHaveLength(0);
       });
diff --git a/app/soapbox/features/chats/components/chat-box.tsx b/app/soapbox/features/chats/components/chat-box.tsx
deleted file mode 100644
index f701586e9..000000000
--- a/app/soapbox/features/chats/components/chat-box.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import classNames from 'clsx';
-import React, { MutableRefObject, useState } from 'react';
-import { useIntl, defineMessages } from 'react-intl';
-
-import { uploadMedia } from 'soapbox/actions/media';
-import { HStack, IconButton, Stack, Text, Textarea } from 'soapbox/components/ui';
-import UploadProgress from 'soapbox/components/upload-progress';
-import UploadButton from 'soapbox/features/compose/components/upload_button';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { IChat, useChat } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
-import { truncateFilename } from 'soapbox/utils/media';
-
-import ChatMessageList from './chat-message-list';
-
-const messages = defineMessages({
-  placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Type a message' },
-  send: { id: 'chat_box.actions.send', defaultMessage: 'Send' },
-});
-
-const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
-
-interface IChatBox {
-  chat: IChat,
-  autosize?: boolean,
-  inputRef?: MutableRefObject<HTMLTextAreaElement>,
-  className?: string,
-}
-
-/**
- * Chat UI with just the messages and textarea.
- * Reused between floating desktop chats and fullscreen/mobile chats.
- */
-const ChatBox: React.FC<IChatBox> = ({ chat, autosize, inputRef, className }) => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-  const account = useOwnAccount();
-
-  const { createChatMessage, acceptChat } = useChat(chat.id);
-
-  const [content, setContent] = useState<string>('');
-  const [attachment, setAttachment] = useState<any>(undefined);
-  const [isUploading, setIsUploading] = useState(false);
-  const [uploadProgress, setUploadProgress] = useState(0);
-  const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
-  const [hasErrorSubmittingMessage, setErrorSubmittingMessage] = useState<boolean>(false);
-
-  const isSubmitDisabled = content.length === 0 && !attachment;
-
-  const submitMessage = useMutation(({ chatId, content }: any) => createChatMessage(chatId, content), {
-    retry: false,
-    onMutate: async (newMessage: any) => {
-      // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-      await queryClient.cancelQueries(['chats', 'messages', chat.id]);
-
-      // Snapshot the previous value
-      const prevChatMessages = queryClient.getQueryData(['chats', 'messages', chat.id]);
-      const prevContent = content;
-
-      // Clear state (content, attachment, etc)
-      clearState();
-
-      // Optimistically update to the new value
-      queryClient.setQueryData(['chats', 'messages', chat.id], (prevResult: any) => {
-        const newResult = { ...prevResult };
-        newResult.pages = newResult.pages.map((page: any, idx: number) => {
-          if (idx === 0) {
-            return {
-              ...page,
-              result: [...page.result, {
-                ...newMessage,
-                id: String(Number(new Date())),
-                created_at: new Date(),
-                account_id: account?.id,
-                pending: true,
-              }],
-            };
-          }
-
-          return page;
-        });
-
-        return newResult;
-      });
-
-      // Return a context object with the snapshotted value
-      return { prevChatMessages, prevContent };
-    },
-    // If the mutation fails, use the context returned from onMutate to roll back
-    onError: (_error: any, _newData: any, context: any) => {
-      setContent(context.prevContent);
-      queryClient.setQueryData(['chats', 'messages', chat.id], context.prevChatMessages);
-      setErrorSubmittingMessage(true);
-    },
-    // Always refetch after error or success:
-    onSuccess: () => {
-      queryClient.invalidateQueries(['chats', 'messages', chat.id]);
-    },
-  });
-
-  const clearState = () => {
-    setContent('');
-    setAttachment(undefined);
-    setIsUploading(false);
-    setUploadProgress(0);
-    setResetFileKey(fileKeyGen());
-    setErrorSubmittingMessage(false);
-  };
-
-  const sendMessage = () => {
-    if (!isSubmitDisabled && !submitMessage.isLoading) {
-      const params = {
-        content,
-        media_id: attachment && attachment.id,
-      };
-
-      submitMessage.mutate({ chatId: chat.id, content });
-      if (!chat.accepted) {
-        acceptChat.mutate();
-      }
-    }
-  };
-
-  const insertLine = () => setContent(content + '\n');
-
-  const handleKeyDown: React.KeyboardEventHandler = (event) => {
-    markRead();
-
-    if (event.key === 'Enter' && event.shiftKey) {
-      event.preventDefault();
-      insertLine();
-    } else if (event.key === 'Enter') {
-      event.preventDefault();
-      sendMessage();
-    }
-  };
-
-  const handleContentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
-    setContent(event.target.value);
-  };
-
-  const handlePaste: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => {
-    if (isSubmitDisabled && e.clipboardData && e.clipboardData.files.length === 1) {
-      handleFiles(e.clipboardData.files);
-    }
-  };
-
-  const markRead = () => {
-    // markAsRead.mutate();
-    // dispatch(markChatRead(chatId));
-  };
-
-  const handleMouseOver = () => markRead();
-
-  const handleRemoveFile = () => {
-    setAttachment(undefined);
-    setResetFileKey(fileKeyGen());
-  };
-
-  const onUploadProgress = (e: ProgressEvent) => {
-    const { loaded, total } = e;
-    setUploadProgress(loaded / total);
-  };
-
-  const handleFiles = (files: FileList) => {
-    setIsUploading(true);
-
-    const data = new FormData();
-    data.append('file', files[0]);
-
-    dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
-      setAttachment(response.data);
-      setIsUploading(false);
-    }).catch(() => {
-      setIsUploading(false);
-    });
-  };
-
-  const renderAttachment = () => {
-    if (!attachment) return null;
-
-    return (
-      <div className='chat-box__attachment'>
-        <div className='chat-box__filename'>
-          {truncateFilename(attachment.preview_url, 20)}
-        </div>
-        <div className='chat-box__remove-attachment'>
-          <IconButton
-            src={require('@tabler/icons/x.svg')}
-            onClick={handleRemoveFile}
-          />
-        </div>
-      </div>
-    );
-  };
-
-  const renderActionButton = () => {
-    // return canSubmit() ? (
-    //   <IconButton
-    //     src={require('@tabler/icons/send.svg')}
-    //     title={intl.formatMessage(messages.send)}
-    //     onClick={sendMessage}
-    //   />
-    // ) : (
-    //   <UploadButton onSelectFile={handleFiles} resetFileKey={resetFileKey} />
-    // );
-  };
-
-  return (
-    <Stack className={classNames('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
-      <div className='flex-grow h-full overflow-hidden flex justify-center'>
-        <ChatMessageList chat={chat} autosize />
-      </div>
-
-      <div className='mt-auto pt-4 px-4 shadow-3xl'>
-        <HStack alignItems='center' justifyContent='between' space={4}>
-          <Stack grow>
-            <Textarea
-              autoFocus
-              ref={inputRef}
-              placeholder={intl.formatMessage(messages.placeholder)}
-              onKeyDown={handleKeyDown}
-              value={content}
-              onChange={handleContentChange}
-              isResizeable={false}
-              autoGrow
-              maxRows={5}
-            />
-          </Stack>
-
-          <IconButton
-            src={require('@tabler/icons/send.svg')}
-            iconClassName='w-5 h-5'
-            className='text-primary-500'
-            disabled={isSubmitDisabled}
-            onClick={sendMessage}
-          />
-        </HStack>
-
-        <HStack alignItems='center' className='h-5' space={1}>
-          {hasErrorSubmittingMessage && (
-            <>
-              <Text theme='danger' size='xs'>
-                Message failed to send.
-              </Text>
-
-              <button onClick={sendMessage} className='flex hover:underline'>
-                <Text theme='primary' size='xs' tag='span'>
-                  Retry?
-                </Text>
-              </button>
-            </>
-          )}
-        </HStack>
-      </div>
-    </Stack>
-    //   {renderAttachment()}
-    //   {isUploading && (
-    //     <UploadProgress progress={uploadProgress * 100} />
-    //   )}
-    //   <div className='chat-box__actions simple_form'>
-    //     <div className='chat-box__send'>
-    //       {renderActionButton()}
-    //     </div>
-    //     <textarea
-    //       rows={1}
-    //
-    //
-    //       onPaste={handlePaste}
-    //       value={content}
-    //       ref={setInputRef}
-    //     />
-    //   </div>
-    // </div>
-  );
-};
-
-export default ChatBox;
diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
new file mode 100644
index 000000000..537f555ad
--- /dev/null
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+import RelativeTimestamp from 'soapbox/components/relative-timestamp';
+import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
+import VerificationBadge from 'soapbox/components/verification_badge';
+
+import type { IChat } from 'soapbox/queries/chats';
+
+interface IChatListItemInterface {
+  chat: IChat,
+  onClick: (chat: any) => void,
+}
+
+const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
+  return (
+    <button
+      key={chat.id}
+      type='button'
+      onClick={() => onClick(chat)}
+      className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
+      data-testid='chat'
+    >
+      <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
+        <HStack alignItems='center' space={2} className='overflow-hidden'>
+          <Avatar src={chat.account?.avatar} size={40} className='flex-none' />
+
+          <Stack alignItems='start' className='overflow-hidden'>
+            <div className='flex items-center space-x-1 flex-grow w-full'>
+              <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
+              {chat.account?.verified && <VerificationBadge />}
+            </div>
+
+            {chat.last_message?.content && (
+              <Text
+                align='left'
+                size='sm'
+                weight='medium'
+                theme='muted'
+                truncate
+                className='w-full'
+                data-testid='chat-last-message'
+                dangerouslySetInnerHTML={{ __html: chat.last_message?.content }}
+              />
+            )}
+          </Stack>
+        </HStack>
+
+        {chat.last_message && (
+          <HStack alignItems='center' space={2}>
+            {chat.last_message.unread && (
+              <div
+                className='w-2 h-2 rounded-full bg-secondary-500'
+                data-testid='chat-unread-indicator'
+              />
+            )}
+
+            <RelativeTimestamp
+              timestamp={chat.last_message.created_at}
+              align='right'
+              size='xs'
+              truncate
+            />
+          </HStack>
+        )}
+      </HStack>
+    </button>
+  );
+};
+
+export default ChatListItem;
diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx
index c5daf7a55..58471efb6 100644
--- a/app/soapbox/features/chats/components/chat-list.tsx
+++ b/app/soapbox/features/chats/components/chat-list.tsx
@@ -9,7 +9,7 @@ import { Stack } from 'soapbox/components/ui';
 import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat';
 import { useChats } from 'soapbox/queries/chats';
 
-import Chat from './chat';
+import ChatListItem from './chat-list-item';
 import Blankslate from './chat-pane/blankslate';
 
 interface IChatList {
@@ -66,7 +66,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
             useWindowScroll={useWindowScroll}
             data={chats}
             endReached={handleLoadMore}
-            itemContent={(_index, chat) => <Chat chat={chat} onClick={onClickChat} />}
+            itemContent={(_index, chat) => <ChatListItem chat={chat} onClick={onClickChat} />}
             components={{
               ScrollSeekPlaceholder: () => <PlaceholderChat />,
               // Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
diff --git a/app/soapbox/features/chats/components/chat-window.tsx b/app/soapbox/features/chats/components/chat-window.tsx
index f298593d2..0b51016d0 100644
--- a/app/soapbox/features/chats/components/chat-window.tsx
+++ b/app/soapbox/features/chats/components/chat-window.tsx
@@ -4,7 +4,7 @@ import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 
-import ChatBox from './chat-box';
+import Chat from './chat';
 import ChatPaneHeader from './chat-pane-header';
 import ChatSettings from './chat-settings';
 
@@ -75,7 +75,7 @@ const ChatWindow = () => {
       />
 
       <Stack className='overflow-hidden flex-grow h-full' space={2}>
-        <ChatBox chat={chat} inputRef={inputRef as any} />
+        <Chat chat={chat} inputRef={inputRef as any} />
       </Stack>
     </>
   );
diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index 6ec72c380..1e4473fcb 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -1,69 +1,278 @@
-import React from 'react';
+import { useMutation } from '@tanstack/react-query';
+import classNames from 'clsx';
+import React, { MutableRefObject, useState } from 'react';
+import { useIntl, defineMessages } from 'react-intl';
 
-import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification_badge';
+import { uploadMedia } from 'soapbox/actions/media';
+import { HStack, IconButton, Stack, Text, Textarea } from 'soapbox/components/ui';
+import UploadProgress from 'soapbox/components/upload-progress';
+import UploadButton from 'soapbox/features/compose/components/upload_button';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { IChat, useChat } from 'soapbox/queries/chats';
+import { queryClient } from 'soapbox/queries/client';
+import { truncateFilename } from 'soapbox/utils/media';
 
-import type { IChat } from 'soapbox/queries/chats';
+import ChatMessageList from './chat-message-list';
 
-interface IChatInterface {
+const messages = defineMessages({
+  placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Type a message' },
+  send: { id: 'chat_box.actions.send', defaultMessage: 'Send' },
+});
+
+const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
+
+interface ChatInterface {
   chat: IChat,
-  onClick: (chat: any) => void,
+  autosize?: boolean,
+  inputRef?: MutableRefObject<HTMLTextAreaElement>,
+  className?: string,
 }
 
-const Chat: React.FC<IChatInterface> = ({ chat, onClick }) => {
+/**
+ * Chat UI with just the messages and textarea.
+ * Reused between floating desktop chats and fullscreen/mobile chats.
+ */
+const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const account = useOwnAccount();
+
+  const { createChatMessage, acceptChat } = useChat(chat.id);
+
+  const [content, setContent] = useState<string>('');
+  const [attachment, setAttachment] = useState<any>(undefined);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
+  const [hasErrorSubmittingMessage, setErrorSubmittingMessage] = useState<boolean>(false);
+
+  const isSubmitDisabled = content.length === 0 && !attachment;
+
+  const submitMessage = useMutation(({ chatId, content }: any) => createChatMessage(chatId, content), {
+    retry: false,
+    onMutate: async (newMessage: any) => {
+      // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
+      await queryClient.cancelQueries(['chats', 'messages', chat.id]);
+
+      // Snapshot the previous value
+      const prevChatMessages = queryClient.getQueryData(['chats', 'messages', chat.id]);
+      const prevContent = content;
+
+      // Clear state (content, attachment, etc)
+      clearState();
+
+      // Optimistically update to the new value
+      queryClient.setQueryData(['chats', 'messages', chat.id], (prevResult: any) => {
+        const newResult = { ...prevResult };
+        newResult.pages = newResult.pages.map((page: any, idx: number) => {
+          if (idx === 0) {
+            return {
+              ...page,
+              result: [...page.result, {
+                ...newMessage,
+                id: String(Number(new Date())),
+                created_at: new Date(),
+                account_id: account?.id,
+                pending: true,
+              }],
+            };
+          }
+
+          return page;
+        });
+
+        return newResult;
+      });
+
+      // Return a context object with the snapshotted value
+      return { prevChatMessages, prevContent };
+    },
+    // If the mutation fails, use the context returned from onMutate to roll back
+    onError: (_error: any, _newData: any, context: any) => {
+      setContent(context.prevContent);
+      queryClient.setQueryData(['chats', 'messages', chat.id], context.prevChatMessages);
+      setErrorSubmittingMessage(true);
+    },
+    // Always refetch after error or success:
+    onSuccess: () => {
+      queryClient.invalidateQueries(['chats', 'messages', chat.id]);
+    },
+  });
+
+  const clearState = () => {
+    setContent('');
+    setAttachment(undefined);
+    setIsUploading(false);
+    setUploadProgress(0);
+    setResetFileKey(fileKeyGen());
+    setErrorSubmittingMessage(false);
+  };
+
+  const sendMessage = () => {
+    if (!isSubmitDisabled && !submitMessage.isLoading) {
+      const params = {
+        content,
+        media_id: attachment && attachment.id,
+      };
+
+      submitMessage.mutate({ chatId: chat.id, content });
+      if (!chat.accepted) {
+        acceptChat.mutate();
+      }
+    }
+  };
+
+  const insertLine = () => setContent(content + '\n');
+
+  const handleKeyDown: React.KeyboardEventHandler = (event) => {
+    markRead();
+
+    if (event.key === 'Enter' && event.shiftKey) {
+      event.preventDefault();
+      insertLine();
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      sendMessage();
+    }
+  };
+
+  const handleContentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+    setContent(event.target.value);
+  };
+
+  const handlePaste: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => {
+    if (isSubmitDisabled && e.clipboardData && e.clipboardData.files.length === 1) {
+      handleFiles(e.clipboardData.files);
+    }
+  };
+
+  const markRead = () => {
+    // markAsRead.mutate();
+    // dispatch(markChatRead(chatId));
+  };
+
+  const handleMouseOver = () => markRead();
+
+  const handleRemoveFile = () => {
+    setAttachment(undefined);
+    setResetFileKey(fileKeyGen());
+  };
+
+  const onUploadProgress = (e: ProgressEvent) => {
+    const { loaded, total } = e;
+    setUploadProgress(loaded / total);
+  };
+
+  const handleFiles = (files: FileList) => {
+    setIsUploading(true);
+
+    const data = new FormData();
+    data.append('file', files[0]);
+
+    dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
+      setAttachment(response.data);
+      setIsUploading(false);
+    }).catch(() => {
+      setIsUploading(false);
+    });
+  };
+
+  const renderAttachment = () => {
+    if (!attachment) return null;
+
+    return (
+      <div className='chat-box__attachment'>
+        <div className='chat-box__filename'>
+          {truncateFilename(attachment.preview_url, 20)}
+        </div>
+        <div className='chat-box__remove-attachment'>
+          <IconButton
+            src={require('@tabler/icons/x.svg')}
+            onClick={handleRemoveFile}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  const renderActionButton = () => {
+    // return canSubmit() ? (
+    //   <IconButton
+    //     src={require('@tabler/icons/send.svg')}
+    //     title={intl.formatMessage(messages.send)}
+    //     onClick={sendMessage}
+    //   />
+    // ) : (
+    //   <UploadButton onSelectFile={handleFiles} resetFileKey={resetFileKey} />
+    // );
+  };
+
   return (
-    <button
-      key={chat.id}
-      type='button'
-      onClick={() => onClick(chat)}
-      className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
-      data-testid='chat'
-    >
-      <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
-        <HStack alignItems='center' space={2} className='overflow-hidden'>
-          <Avatar src={chat.account?.avatar} size={40} className='flex-none' />
+    <Stack className={classNames('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
+      <div className='flex-grow h-full overflow-hidden flex justify-center'>
+        <ChatMessageList chat={chat} autosize />
+      </div>
 
-          <Stack alignItems='start' className='overflow-hidden'>
-            <div className='flex items-center space-x-1 flex-grow w-full'>
-              <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
-              {chat.account?.verified && <VerificationBadge />}
-            </div>
-
-            {chat.last_message?.content && (
-              <Text
-                align='left'
-                size='sm'
-                weight='medium'
-                theme='muted'
-                truncate
-                className='w-full'
-                data-testid='chat-last-message'
-                dangerouslySetInnerHTML={{ __html: chat.last_message?.content }}
-              />
-            )}
+      <div className='mt-auto pt-4 px-4 shadow-3xl'>
+        <HStack alignItems='center' justifyContent='between' space={4}>
+          <Stack grow>
+            <Textarea
+              autoFocus
+              ref={inputRef}
+              placeholder={intl.formatMessage(messages.placeholder)}
+              onKeyDown={handleKeyDown}
+              value={content}
+              onChange={handleContentChange}
+              isResizeable={false}
+              autoGrow
+              maxRows={5}
+            />
           </Stack>
+
+          <IconButton
+            src={require('@tabler/icons/send.svg')}
+            iconClassName='w-5 h-5'
+            className='text-primary-500'
+            disabled={isSubmitDisabled}
+            onClick={sendMessage}
+          />
         </HStack>
 
-        {chat.last_message && (
-          <HStack alignItems='center' space={2}>
-            {chat.last_message.unread && (
-              <div
-                className='w-2 h-2 rounded-full bg-secondary-500'
-                data-testid='chat-unread-indicator'
-              />
-            )}
+        <HStack alignItems='center' className='h-5' space={1}>
+          {hasErrorSubmittingMessage && (
+            <>
+              <Text theme='danger' size='xs'>
+                Message failed to send.
+              </Text>
 
-            <RelativeTimestamp
-              timestamp={chat.last_message.created_at}
-              align='right'
-              size='xs'
-              truncate
-            />
-          </HStack>
-        )}
-      </HStack>
-    </button>
+              <button onClick={sendMessage} className='flex hover:underline'>
+                <Text theme='primary' size='xs' tag='span'>
+                  Retry?
+                </Text>
+              </button>
+            </>
+          )}
+        </HStack>
+      </div>
+    </Stack>
+    //   {renderAttachment()}
+    //   {isUploading && (
+    //     <UploadProgress progress={uploadProgress * 100} />
+    //   )}
+    //   <div className='chat-box__actions simple_form'>
+    //     <div className='chat-box__send'>
+    //       {renderActionButton()}
+    //     </div>
+    //     <textarea
+    //       rows={1}
+    //
+    //
+    //       onPaste={handlePaste}
+    //       value={content}
+    //       ref={setInputRef}
+    //     />
+    //   </div>
+    // </div>
   );
 };
 
diff --git a/app/soapbox/features/chats/index.tsx b/app/soapbox/features/chats/index.tsx
index d389af8e5..12fc4ee3a 100644
--- a/app/soapbox/features/chats/index.tsx
+++ b/app/soapbox/features/chats/index.tsx
@@ -9,8 +9,8 @@ import AccountSearch from 'soapbox/components/account_search';
 import { Card, CardTitle, Stack } from '../../components/ui';
 
 import Chat from './components/chat';
-import ChatBox from './components/chat-box';
 import ChatList from './components/chat-list';
+import ChatListItem from './components/chat-list-item';
 
 const messages = defineMessages({
   title: { id: 'column.chats', defaultMessage: 'Messages' },
@@ -55,9 +55,9 @@ const ChatIndex: React.FC = () => {
         <Stack className='col-span-6 h-full overflow-hidden'>
           {chat && (
             <Stack className='h-full overflow-hidden'>
-              <Chat chat={chat} onClick={() => { }} />
+              <ChatListItem chat={chat} onClick={() => { }} />
               <div className='h-full overflow-hidden'>
-                <ChatBox className='h-full overflow-hidden' chat={chat} />
+                <Chat className='h-full overflow-hidden' chat={chat} />
               </div>
             </Stack>
           )}