app/src/pages/home/components/ChatCom/index.tsx

import React, { useEffect } from "react";
import './style.less';

export interface MessageType {
    type: string;
    value: string;
};

interface ChatComProps {
    messages: MessageType[];
};

function ChatCom(props: ChatComProps) {
    const { messages } = props;

    return (<>
       <div className="chat-container">
        {
            messages && messages.map((msg) =>
            <div className={ msg.type === '0' ? 'chat-container-msg-content-right' : 'chat-container-msg-content-left'}>
                <div className="chat-container-msg">{msg.value}</div>
            </div>)
        }
       </div>
    </>)
}

export default ChatCom;