Chat example - Message component

message.tsx

import { FC } from 'react'

export interface MessageProps {
  message: string
  sender: 'user' | 'ai'
}

const Message: FC<MessageProps> = ({ message, sender }) => {
  const isUser = sender === 'user'

  return (
    <div
      className={`w-full p-4 px-16 py-6 dark:border-gray-900/50 ${
        isUser ? 'bg-gray-800' : 'bg-gray-700'
      }`}
    >
      <div className={`flex w-full`}>
        <div
          className={`mr-5 flex h-10 w-10 items-center justify-center rounded-sm bg-slate-500 ${
            isUser ? 'bg-orange-600' : 'bg-violet-500'
          } text-slate-100`}
        >
          {isUser ? 'U' : 'Ai'}
        </div>

        <div className="markdown prose prose-slate dark:prose-invert dark w-full break-words text-slate-200">
          {message}
        </div>
      </div>
    </div>
  )
}

export default Message