From 2c741da2c3f061894e601bcd1454300add09d14d Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Tue, 4 May 2021 07:53:03 +1000
Subject: [PATCH 1/2] Group sequential messages from same sender

Name and date are not repeated anymore.
---
 web-chat/src/ChatList.tsx | 79 ++++++++++++++++++++++++++-------------
 web-chat/src/Room.tsx     |  6 +--
 2 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/web-chat/src/ChatList.tsx b/web-chat/src/ChatList.tsx
index 77917bb80e..fa1fa9291c 100644
--- a/web-chat/src/ChatList.tsx
+++ b/web-chat/src/ChatList.tsx
@@ -1,6 +1,11 @@
 import { useEffect, useRef } from 'react';
 import { ChatMessage } from '../../build/main/chat/chat_message';
-import { Message, MessageText, MessageGroup } from '@livechat/ui-kit';
+import {
+  Message,
+  MessageText,
+  MessageGroup,
+  MessageList,
+} from '@livechat/ui-kit';
 
 interface Props {
   messages: ChatMessage[];
@@ -9,33 +14,57 @@ interface Props {
 export default function ChatList(props: Props) {
   const messages = props.messages;
 
-  const listItems = messages.map((currentMessage) => (
-    <Message
-      // We assume that the same user is not sending two messages in the same second
-      key={currentMessage.timestamp.toString() + currentMessage.nick}
-      authorName={currentMessage.nick}
-      date={formatDisplayDate(currentMessage)}
-    >
-      <MessageText>{currentMessage.message}</MessageText>
-    </Message>
-  ));
-
-  return (
-    <MessageGroup>
-      {listItems}
-      <AlwaysScrollToBottom messages={messages} />
-    </MessageGroup>
+  const messagesGroupedBySender = groupMessagesBySender(props.messages).map(
+    (currentMessageGroup) => (
+      <MessageGroup onlyFirstWithMeta>
+        {currentMessageGroup.map((currentMessage) => (
+          <Message
+            // We assume that the same user is not sending two messages in the same second
+            key={currentMessage.timestamp.toString() + currentMessage.nick}
+            authorName={currentMessage.nick}
+            date={formatDisplayDate(currentMessage)}
+          >
+            <MessageText>{currentMessage.message}</MessageText>
+          </Message>
+        ))}
+      </MessageGroup>
+    )
   );
 
-  function formatDisplayDate(message: ChatMessage) {
-    return message.timestamp.toLocaleString([], {
-      month: 'short',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: false,
-    });
+  return (
+    <MessageList active containScrollInSubtree>
+      {messagesGroupedBySender}
+      <AlwaysScrollToBottom messages={messages} />
+    </MessageList>
+  );
+}
+
+function groupMessagesBySender(messageArray: ChatMessage[]): ChatMessage[][] {
+  let currentSender = -1;
+  let lastNick = '';
+  let messagesBySender: ChatMessage[][] = [];
+  let currentSenderMessage = 0;
+
+  for (let currentMessage of messageArray) {
+    if (lastNick !== currentMessage.nick) {
+      currentSender++;
+      messagesBySender[currentSender] = [];
+      currentSenderMessage = 0;
+      lastNick = currentMessage.nick;
+    }
+    messagesBySender[currentSender][currentSenderMessage++] = currentMessage;
   }
+  return messagesBySender;
+}
+
+function formatDisplayDate(message: ChatMessage): string {
+  return message.timestamp.toLocaleString([], {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false,
+  });
 }
 
 const AlwaysScrollToBottom = (props: Props) => {
diff --git a/web-chat/src/Room.tsx b/web-chat/src/Room.tsx
index a0849f3e52..2ea40c291c 100644
--- a/web-chat/src/Room.tsx
+++ b/web-chat/src/Room.tsx
@@ -5,7 +5,7 @@ import { ChatContentTopic } from './App';
 import ChatList from './ChatList';
 import MessageInput from './MessageInput';
 import { useWaku } from './WakuContext';
-import { TitleBar, MessageList } from '@livechat/ui-kit';
+import { TitleBar } from '@livechat/ui-kit';
 
 interface Props {
   lines: ChatMessage[];
@@ -23,9 +23,7 @@ export default function Room(props: Props) {
       style={{ height: '98vh', display: 'flex', flexDirection: 'column' }}
     >
       <TitleBar title="Waku v2 chat app" />
-      <MessageList active containScrollInSubtree>
-        <ChatList messages={props.lines} />
-      </MessageList>
+      <ChatList messages={props.lines} />
       <MessageInput
         messageHandler={setMessageToSend}
         sendMessage={

From dedeb19daea7f73febf1b486c232e2d85651a979 Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Tue, 4 May 2021 07:53:26 +1000
Subject: [PATCH 2/2] Make date font smaller and change author/message fonts

---
 web-chat/src/App.tsx | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/web-chat/src/App.tsx b/web-chat/src/App.tsx
index b6949b28a9..937db54fb2 100644
--- a/web-chat/src/App.tsx
+++ b/web-chat/src/App.tsx
@@ -13,6 +13,35 @@ import { WakuContext } from './WakuContext';
 import { ThemeProvider } from '@livechat/ui-kit';
 import { generate } from 'server-name-generator';
 
+const themes = {
+  AuthorName: {
+    css: {
+      fontSize: '1.1em',
+    },
+  },
+  Message: {
+    css: {
+      margin: '0em',
+      padding: '0em',
+      fontSize: '0.83em',
+    },
+  },
+  MessageText: {
+    css: {
+      margin: '0em',
+      padding: '0.1em',
+      paddingLeft: '1em',
+      fontSize: '1.1em',
+    },
+  },
+  MessageGroup: {
+    css: {
+      margin: '0em',
+      padding: '0.2em',
+    },
+  },
+};
+
 export const ChatContentTopic = 'dingpu';
 
 export default function App() {
@@ -82,7 +111,7 @@ export default function App() {
       style={{ height: '100vh', width: '100vw', overflow: 'hidden' }}
     >
       <WakuContext.Provider value={{ waku: stateWaku }}>
-        <ThemeProvider>
+        <ThemeProvider theme={themes}>
           <Room
             nick={nick}
             lines={stateMessages}