Add content to the Discussion Panel

front/src/pages/inbox/discussion-panel/events/Message.tsx

@@ -1,7 +1,90 @@
 import styled from '@emotion/styled';
 
-function Message() {
-  return;
+export type MessageEvent = {
+  id: number;
+  user: string;
+  time: string;
+  channel: string;
+  message: string;
+  agent?: string;
+};
+
+type OwnProps = {
+  message: MessageEvent;
+};
+
+const StyledMessage = styled.div`
+  display: flex;
+  margin-top: 12px;
+  margin-bottom: 20px;
+`;
+
+const StyledAvatar = styled.div`
+  display: flex;
+  width: 40px;
+  height: 40px;
+  border-radius: 40px;
+  background: black;
+  font-size: 20px;
+  color: white;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  margin-right: 16px;
+  flex-shrink: 0;
+`;
+
+const StyledContent = styled.div``;
+
+const StyledTitle = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledUser = styled.div`
+  font-size: 16px;
+  color: black;
+  font-weight: bold;
+`;
+
+const StyledTime = styled.div`
+  margin-left: 8px;
+  font-size: 12px;
+  color: #2e3138;
+`;
+
+const StyledAgent = styled.div`
+  text-decoration: underline;
+  margin-left: 4px;
+  font-size: 12px;
+  color: #2e3138;
+`;
+
+const StyledDetails = styled.div`
+  margin-top: 8px;
+`;
+
+function Message({ message }: OwnProps) {
+  return (
+    <StyledMessage>
+      <StyledAvatar>
+        {message.user
+          .split(' ')
+          .map((n) => n[0])
+          .join('')}
+      </StyledAvatar>
+      <StyledContent>
+        <StyledTitle>
+          <StyledUser>{message.user}</StyledUser>
+          <StyledTime>
+            {message.time} ({message.channel})
+          </StyledTime>
+          {message.agent && <StyledAgent>by {message.agent}</StyledAgent>}
+        </StyledTitle>
+        <StyledDetails>{message.message}</StyledDetails>
+      </StyledContent>
+    </StyledMessage>
+  );
 }
 
 export default Message;