Untitled

return keys.map((key,index)=>{
  const message =message[key];
  const lastMessageKey =index ==0 ? null : keys [index-1];
  const isMyMessage =username == message.sender.username;
  return (
    <div key ={'msg_${index}'} style ={{width:'1005'}}>
        <div className='message-block'>
        {
          isMyMessage
          ? <MyMessage message ={message}/>
          : <TheirMessage message ={message} lastMessage ={messages[lastMessageKey]}/>
        }
        <div className="read-receipts" style={{marginRight: isMyMessage? '18px' :'0px',margin
      left : isMyMessage ? '0px':'68px'}}>
        read-receipts
        </div>

        </div>

    </div>
  )
}

if(!chat) return 'Loading...';
return(
  <div className='chat-feed'>
    <div className='chat-title-container'>
      <div className='chat-title'>
        {chat.title}
      </div>
      <div className='chat-subtitle'>
        {chat.people.map((person)=>'${person.person.username}')}
      </div>
    </div>
    {renderMessages()}
    <div style{{height'100px'}}/> //self closing div
    <div className="message-form-container">
      <MessageForm {...props} chatId={activeChat}/>
    </div>
  </div>
);

//MyMessage.js
const MyMessage =({message}) =>{
  if (message ?.attachments ?.length>0){
    return(
      <img src={message.attachments[0].file} alt="message-image" className="message-image" style{{float:'right'}}/>

    )
  }
  return (
    <div className="message" style={{float:'right',marginRight:'18px',color:'white',backgroundColor:'#3B2A50'}}>
      {message.text}

    </div>
  );
}
//TheirMessage.js
const TheirMessage =({lastMessage ,message}) =>{
  const isFirstMessageByuser =!lastMessage || lastMessage.sender.username != message.sender.username;

  return (
    <div className="message-row" >
    {isFirstMessageByuser && (
      <div className="message-avatar"
            style={{backgroundImage:'url(${message?.sender?.avatar})'}}
      />
    )}
    {message ?.attachments ?.length>0){
      ?(<img src={message.attachments[0].file} alt="message-image" className="message-image" style ={{marginLeft: isFirstMessageByuser ?'4px':'48px'}}/>)
      :(<div className="message" style={{float:'left',backgroundColor:'#CABCBC' ,marginLeft: isFirstMessageByuser ?'4px':'48px'}}>{message.text}</div> )
    }
    </div>
  );
}
//MessageForm
import {useState} from 'react';
import{sendMessage , isTyping} from 'react-chat-engine';
import {SendOutlined ,PictureOutlined} from '@ant-design/icons';
const MessageForm =(props) =>{
  const [value,setValue] =useState('');
  const {chatId,creds}=props;
  const handleSubmit=(event)=>{
      event.preventDefault();
      const text =value.trim();
      if(text.length>0) sendMessage(creds,chatId,{text});
      setValue("");
  }
  const handleChange=(event)=>{
    setValue(event.target.value);
    isTyping(props,chatId);
  }
  return (
    <form className="message-form" onSubmit={handleSubmit}>
    <input class className="message-input"
            placeholder ="Send a message ...."
            value={value}
            onChange={handleChange}
            onSubmit={handleSubmit}
    />
    <label htmlFor="upload-button">
      <span className="image-button">
        <PictureOutlined className="picture-icon"/>
      </span>
    </label>
    </form>
  );
}