Page Code  --->
<apex:page controller="messageController" lightningStylesheets="true">
<apex:slds />
    <style>
        .headerRow .TableTitle {
            color: #CC0000 !important; 
        }
        .mymsg {
            text-align: right;
            color: blue;
        }
        .othermsg {
            color: green;
        }
    </style>
    <apex:form id="form">
        <apex:pageBlock id="messages" title="{!Friend_Name}" rendered="{!showMessageBox}">
            <apex:pageBlockSection >
            
            <apex:outputPanel layout="block" style="overflow:auto;width:500px;height:200px" >
                <apex:pageBlockTable value="{!messages}" var="msg">
                    <apex:column >
                    
                    <apex:outputText rendered="{!msg.fromId == recordId}">
                        <!--<h1 style ="color: blue;" >{!msg.fromName}</h1><br/>
                        <h5>{!msg.msg}</h5><br/>
                        <h5>{!msg.dateValue}</h5><br/>-->
                        <p class="mymsg">
                        {!msg.fromName}<br/>
                        {!msg.msg}<br/>
                        {!msg.dateValue}
                        </p>
                    </apex:outputText>
                    <apex:outputText rendered="{!msg.fromId != recordId}" >
                        <!--<h2 style ="color: green; text-align:right">{!msg.fromName}</h2><br/>
                        <h5>{!msg.msg}</h5><br/>
                        <h5>{!msg.dateValue}</h5><br/>-->
                        <p class="othermsg">
                        {!msg.fromName}<br/>
                        {!msg.msg}<br/>
                        {!msg.dateValue}
                        </p>
                    </apex:outputText>                                   
                    </apex:column>
                </apex:pageBlockTable>
                </apex:OutputPanel><br/>            
                <apex:inputTextarea value="{!currentMsg}"/>
                <apex:commandButton value="Send" action="{!sendmessage}" reRender="messages"/>               
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>