<apex:page showHeader="false">
    <apex:includeScript value="https://code.jquery.com/jquery-3.2.1.js"/>
    
<style>
#liveAgentClientChat.liveAgentStateWaiting {
// The CSS class that is applied when the chat request is waiting to be accepted
// See "Waiting State" screenshot below
}
#liveAgentClientChat {
// The CSS class that is applied when the chat is currently engaged
// See "Engaged State" screenshot below
}
#liveAgentClientChat.liveAgentStateEnded {
// The CSS class that is applied when the chat has ended
// See "Ended State" screenshot below
}
body { overflow: hidden; width: 100%; height: 100%; padding: 0; margin: 0 }
#waitingMessage { height: 100%; width: 100%; vertical-align: middle; text-align: center;
display: none; }
#liveAgentClientChat.liveAgentStateWaiting #waitingMessage { display: table; }
#liveAgentSaveButton, #liveAgentEndButton { z-index: 2; }
.liveAgentChatInput {
height: 25px;
border-width: 1px;
border-style: solid;
border-color: #000;
padding: 2px 0 2px 4px;
background: #fff;
display: block;
width: 99%;
}
.liveAgentSendButton {
display: block;
width: 60px;
height: 31px;
padding: 0 0 3px;
position: absolute;
top: 0;
right: -67px;
}
#liveAgentChatLog {
	width: auto;   
    height:100%;
    overflow-x: hidden;
    overflow-y: auto;
    word-wrap: break-word;
    padding-right: 13px;
    padding-left: 13px;
    margin: 0;
    background-color: #f7f8f8 !important;
    border : 1px solid #e2e8ed;
}
    .client {
    	margin-top: 15px;
    	margin-bottom: 15px;
    }
    .operator {
    	margin-top : 10px;
    }
    .client > .name > strong{
    	display : none;
    }
.client > .messageText { 
        background: #deeff9;
    	float : right;
        padding: 5px;
        border-radius: 5px;
        color: black;
    	border : 1px solid #e2e8ed;
    }

.operator > .messageText  { 
    border: 1px solid #e2e8ed;
    background: white;
    padding: 5px;
    border-radius: 5px;
    }
    #liveAgentChatLogText .messageText {
    width: 95%;
    display: block;
}
</style>
<div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute;">
    
<liveAgent:clientChat >
<div style="background:black;width:100%;height:20px;color:white;">
    
<liveAgent:clientChatSaveButton />
<liveAgent:clientChatEndButton />
    </div>
<div style="top: 25px; left: 5px; right: 5px; bottom: 5px; position: absolute; z-index:
0;">
<liveAgent:clientChatAlertMessage />
<liveAgent:clientChatStatusMessage />
<table id="waitingMessage" cellpadding="0" cellspacing="0">
<tr>
<td>Please wait while you are connected to an available agent.</td>
</tr>
</table>
<div style="top: 0; right: 0; bottom: 41px; left: 0; padding: 0; position: absolute;
word-wrap: break-word; z-index: 0;">
<liveAgent:clientChatLog />
</div>
<div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right:
67px;">
<liveagent:clientChatInput /><liveAgent:clientChatSendButton />
</div>
</div>
</liveAgent:clientChat>
</div>
    <script>
    
    var targetNodes         = $(".liveAgentChatElement");
var MutationObserver    = window.MutationObserver || window.WebKitMutationObserver;
var myObserver          = new MutationObserver (mutationHandler);
var obsConfig           = { childList: true, characterData: true, attributes: true, subtree: true };

//--- Add a target node to the observer. Can only add one node at a time.
targetNodes.each ( function () {
    myObserver.observe (this, obsConfig);
} );

function mutationHandler (mutationRecords) {
    console.info ("mutationHandler:");

    mutationRecords.forEach ( function (mutation) {
        console.log (mutation.type);
        if (typeof mutation.addedNodes == "object") {
            var jq = $(mutation.addedNodes);
            console.log('jq');
            console.log (jq);
            console.log('jq operator');
            console.log (jq.is("span.operator"));
            console.log('jq span');
            console.log (jq.find("span") );
        }
    } );
}
    
    </script>
</apex:page>

In above code, 

"client" &  "message" CSS classes can be used to handle the stylings of the chat and javascript function "mutationHandler" will be used to listen for the changes in the chat window so that new messages can be listened and then you can handle the new messages as you want.

In case you want to handle the html tags which will be coming from agen't side you need to add the code for that in the mutationHandler function.

Let me know in case if you need more help on this & please mark this as a solution if it fulfills the requirement.

Regards,
Ashish Kr.