text: import React from 'react'
  
  /** @type {React.CSSProperties} */
  const messageListStyle = {
      height: 'calc(100% - 60px)',
      overflowY: 'scroll'
  }
  
  /** @type {React.CSSProperties} */
  const messageStyle = {
      width: 'calc(100% - 20px)',
      maxHeight: '40px',
      margin: '5px 10px',
      minHeight: '20px'
  }
  
  /** @type {React.CSSProperties} */
  const senderStyle = {
      float: 'left',
      display: 'inline-block',
      lineHeight: '20px',
      fontWeight: 'bold'
  }
  
  /** @type {React.CSSProperties} */
  const textStyle = {
      float: 'left',
      display: 'inline-block',
      lineHeight: '20px',
      textIndent: '10px'
  }
  
  const MessageList = ({ messages = [] }) => {
      return (
          <div style ={messageListStyle} className="message-list">
              {messages.map(({ senderId, text }, index) => (
                  <div style={messageStyle} key={index} className="message">
                      <div style={senderStyle} className="sender">{senderId}:</div>
                      <div style={textStyle} className="text">{text}</div>
                  </div>
              ))}
          </div>
      )
  }
  
  export default MessageList