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,16 +11,19 @@ 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"}`}>
-      <div
+      {!hideName && (
-        className={`text-${
+        <div
-          isSelf ? "gray-700" : accentColor + "-800 text-ts-" + accentColor
+          className={`text-${
-        } uppercase text-xs`}
+            isSelf ? "gray-700" : accentColor + "-800 text-ts-" + accentColor
-      >
+          } uppercase text-xs`}
-        {name}
+        >
-      </div>
+          {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">
+        <div className="flex flex-col min-h-full justify-end">
-          {messages.map((message, index) => (
+          {messages.map((message, index, allMsg) => {
-            <ChatMessage
+            const hideName =
-              key={index}
+              index >= 1 && allMsg[index - 1].name === message.name;
-              name={message.name}
+
-              message={message.message}
+            return (
-              isSelf={message.isSelf}
+              <ChatMessage
-              accentColor={accentColor}
+                key={index}
-            />
+                hideName={hideName}
-          ))}
+                name={message.name}
+                message={message.message}
+                isSelf={message.isSelf}
+                accentColor={accentColor}
+              />
+            );
+          })}
         </div>
       </div>
       <ChatMessageInput