chat.tsx

export const Chat = (messages, props) => {
  // ...

  return (
    <ul>
      {messages.map(message => {
        switch (message.type) {
          case 'text': return <TextMessage message={message} />
          case 'image': return <ImageMessage message={message} />
          case 'audio': return <AudioMessage message={message} />
          default: throw new Error('unknown message type')
        }
      })}
    </ul>
  )
}