feat: detect own messages

example/src/App.tsx

@@ -1,7 +1,9 @@
 import Chatbox from '@graasp/chatbox';
+import { ImmutableMember } from '../../src/types';
 
 const App = () => {
-  return <Chatbox chatId="24" id="24" />;
+  const member = new ImmutableMember({ name: 'kim', id: 'kim-id' });
+  return <Chatbox chatId="24" id="24" showHeader currentMember={member} />;
 };
 
 export default App;

src/components/Chatbox.tsx

@@ -2,11 +2,11 @@ import React, { FC, Fragment } from 'react';
 import Container from '@material-ui/core/Container';
 import { makeStyles } from '@material-ui/core/styles';
 import Messages from './Messages';
-import { List } from 'immutable';
+import { List, Record } from 'immutable';
 import Input from './Input';
 import Header from './Header';
-import { DEFAULT_CHATBOX_HEIGHT } from '../constants';
-import { ChatMessage, PartialChatMessage } from '../types';
+import { DEFAULT_CHATBOX_HEIGHT, INPUT_HEIGHT } from '../constants';
+import type { ChatMessage, Member, PartialChatMessage } from '../types';
 
 type Props = {
   id: string;
@@ -15,18 +15,23 @@ type Props = {
   isLoading?: boolean;
   sendMessageFunction?: (message: PartialChatMessage) => void;
   chatId: string;
+  showHeader?: boolean;
+  currentMember: Record<Member>;
 };
 
 const Chatbox: FC<Props> = ({
-  height,
+  height = DEFAULT_CHATBOX_HEIGHT,
   sendMessageFunction,
   messages,
   isLoading,
   chatId,
+  showHeader = false,
+  currentMember,
 }) => {
-  const useStyles = makeStyles(() => ({
+  const useStyles = makeStyles((theme) => ({
     container: {
       height: height || DEFAULT_CHATBOX_HEIGHT,
+      padding: theme.spacing(0, 1),
     },
   }));
   const classes = useStyles();
@@ -35,9 +40,13 @@ const Chatbox: FC<Props> = ({
   }
   return (
     <Fragment>
-      <Header />
+      {showHeader && <Header />}
       <Container maxWidth="md" className={classes.container}>
-        <Messages messages={messages} height={height} />
+        <Messages
+          currentMember={currentMember}
+          messages={messages}
+          height={height - INPUT_HEIGHT}
+        />
         <Input sendMessageFunction={sendMessageFunction} chatId={chatId} />
       </Container>
     </Fragment>

src/components/Input.tsx

@@ -50,7 +50,7 @@ const Input: FC<Props> = ({ chatId, placeholder, sendMessageFunction }) => {
         placeholder={placeholder || t('Type something…')}
       />
       <IconButton onClick={onClick}>
-        <SendIcon />
+        <SendIcon color="primary" />
       </IconButton>
     </Box>
   );

src/components/Message.tsx

@@ -1,16 +1,17 @@
 import React, { FC } from 'react';
 import Box from '@material-ui/core/Box';
+import { Record } from 'immutable';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import grey from '@material-ui/core/colors/grey';
 import clsx from 'clsx';
-import type { ChatMessage } from '../types';
+import type { ChatMessage, Member } from '../types';
 
 const useStyles = makeStyles((theme) => ({
   message: {
     background: grey[100],
     borderRadius: '5px',
-    margin: theme.spacing(1),
+    margin: theme.spacing(1, 0),
     padding: theme.spacing(0.5, 1, 1),
     maxWidth: '80%',
     width: 'fit-content',
@@ -22,12 +23,13 @@ const useStyles = makeStyles((theme) => ({
 
 type Props = {
   message: ChatMessage;
+  currentMember: Record<Member>;
 };
 
-const Message: FC<Props> = ({ message }) => {
+const Message: FC<Props> = ({ message, currentMember }) => {
   const classes = useStyles();
   const creator = message.creator;
-  const isOwnMessage = creator === 'me';
+  const isOwnMessage = creator === currentMember.get('id');
   const align = isOwnMessage ? 'flex-end' : null;
 
   return (

src/components/Messages.tsx

@@ -1,16 +1,17 @@
 import React, { FC, useRef, useEffect } from 'react';
 import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
-import { List } from 'immutable';
+import { List, Record } from 'immutable';
 import Message from './Message';
-import type { ChatMessage } from '../types';
+import type { ChatMessage, Member } from '../types';
 
 type Props = {
   messages?: List<ChatMessage>;
   height?: number;
+  currentMember: Record<Member>;
 };
 
-const Messages: FC<Props> = ({ messages, height }) => {
+const Messages: FC<Props> = ({ messages, height, currentMember }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const useStyles = makeStyles(() => ({
@@ -41,7 +42,7 @@ const Messages: FC<Props> = ({ messages, height }) => {
       <Box className={classes.messagesContainer}>
         {messages?.map((message) => (
           // todo: apply key
-          <Message message={message} />
+          <Message currentMember={currentMember} message={message} />
         ))}
       </Box>
     </div>

src/constants.js

@@ -1 +1,2 @@
 export const DEFAULT_CHATBOX_HEIGHT = 600;
+export const INPUT_HEIGHT = 100;

src/types.ts

@@ -1,3 +1,5 @@
+import { Record } from 'immutable';
+
 export type PartialChatMessage = {
   chatId: string;
   body: string;
@@ -9,3 +11,13 @@ export type ChatMessage = {
   createdAt: string;
   body: string;
 };
+
+export type Member = {
+  id: string;
+  name: string;
+};
+export class ImmutableMember extends Record({
+  id: '',
+  name: '',
+  type: '',
+}) {}