Collapse messages from same sender to save on vertical space (#61)

src/components/chat/ChatMessage.tsx

@@ -3,6 +3,7 @@ type ChatMessageProps = {
   accentColor: string;
   name: string;
   isSelf: boolean;
+  hideName?: boolean;
 };
 
 export const ChatMessage = ({
@@ -10,9 +11,11 @@ export const ChatMessage = ({
   message,
   accentColor,
   isSelf,
+  hideName,
 }: ChatMessageProps) => {
   return (
-    <div className="flex flex-col gap-1">
+    <div className={`flex flex-col gap-1 ${hideName ? "pt-0" : "pt-6"}`}>
+      {!hideName && (
         <div
           className={`text-${
             isSelf ? "gray-700" : accentColor + "-800 text-ts-" + accentColor
@@ -20,6 +23,7 @@ export const ChatMessage = ({
         >
           {name}
         </div>
+      )}
       <div
         className={`pr-4 text-${
           isSelf ? "gray-300" : accentColor + "-500"

src/components/chat/ChatTile.tsx

@@ -35,16 +35,22 @@ export const ChatTile = ({ messages, accentColor, onSend }: ChatTileProps) => {
           height: `calc(100% - ${inputHeight}px)`,
         }}
       >
-        <div className="flex flex-col min-h-full justify-end gap-6">
-          {messages.map((message, index) => (
+        <div className="flex flex-col min-h-full justify-end">
+          {messages.map((message, index, allMsg) => {
+            const hideName =
+              index >= 1 && allMsg[index - 1].name === message.name;
+
+            return (
               <ChatMessage
                 key={index}
+                hideName={hideName}
                 name={message.name}
                 message={message.message}
                 isSelf={message.isSelf}
                 accentColor={accentColor}
               />
-          ))}
+            );
+          })}
         </div>
       </div>
       <ChatMessageInput