<style>
.chat-container {
    z-index: 8;
}
</style>
<div class="chat-wrapper chat_<?php echo $wo['chat']['recipient']['user_id'];?>" id="chat_<?php echo $wo['chat']['recipient']['user_id'];?>">
	<div style="background:<?php echo $wo['chat']['color']; ?>" class="online-toggle">
		<div class="cht_tg_left_prt" onclick="javascript:$('.chat-tab-container-<?php echo $wo['chat']['recipient']['user_id'];?>').slideToggle(100);">
			<a style="color:#fff;" href="<?php echo $wo['chat']['recipient']['url'];?>" data-ajax="?link1=timeline&u=<?php echo $wo['chat']['recipient']['username'];?>"> 
				<span class="chat-tab-status <?php echo (Wo_IsOnline($wo['chat']['recipient']['user_id']) === true) ? 'active' : ''; ?>">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
				</span>
				<?php echo mb_substr($wo['chat']['recipient']['name'], 0, 13, "UTF-8");?>
			</a>
		</div>
		
		<img class="cht_hd_avtr" src="<?php echo $wo['chat']['recipient']['avatar'];?>" alt="<?php echo $wo['chat']['recipient']['name'];?>" />
		
		<div class="cht_tg_right_prt">
			<span class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"></path></svg>
				</a>
				<ul class="dropdown-menu dropdown-menu-right clearfix" role="menu">
					<?php if ($wo['config']['audio_chat'] == 1) {
						if ($wo['config']['Who_call'] == 'pro' && $wo['user']['is_pro'] == 0 && !Wo_IsAdmin()) {}
						else{
					 ?>
					<?php if ($wo['chat']['recipient']['lastseen'] > (time() - 60)) { ?>
						<li><a href="javascript:void(0);" onclick="Wo_GenerateVoiceCall(<?php echo $wo['user']['user_id'];?>, <?php echo $wo['chat']['recipient']['user_id'];?>)"><?php echo $wo['lang']['audio_call'];?></a></li>
					<?php } else { ?>
						<li class="disabled"><a href="javascript:void(0);"><?php echo $wo['lang']['audio_call'];?></a></li>
					<?php } } } ?>
					<?php if ($wo['config']['video_chat'] == 1) {
						if ($wo['config']['Who_call'] == 'pro' && $wo['user']['is_pro'] == 0 && !Wo_IsAdmin()) {}
						else{
					 ?>
					<?php if ($wo['chat']['recipient']['lastseen'] > (time() - 60)) { ?>
						<li><a href="javascript:void(0);" onclick="Wo_GenerateVideoCall(<?php echo $wo['user']['user_id'];?>, <?php echo $wo['chat']['recipient']['user_id'];?>)"><?php echo $wo['lang']['video_call'];?></a></li>
					<?php } else { ?>
						<li class="disabled"><a href="javascript:void(0);"><?php echo $wo['lang']['video_call'];?></a></li>
					<?php } } } ?>
					<li class="dropdown-submenu chat_dd_sub_<?php echo $wo['chat']['recipient']['user_id'];?>">
						<a href="javascript:void(0);" class="change_color dropdown-toggle" data-toggle="dropdown" aria-expanded="true" role="button">
							<i class="fa fa-circle select-color" aria-hidden="true" style="color: <?php echo $wo['chat']['color']; ?>"></i> <?php echo $wo['lang']['change_color'];?>
						</a>
						<ul class="dropdown-menu dropdown-menu-right change_color_ddmenu" role="menu">
							<div class="chat-colors-cont text-center">
								<?php foreach ($wo['colors'] as $key => $color) {?>
									<a class="chat-color" data-chat-color="<?php echo $color; ?>"  data-recipient-u-id="<?php echo $wo['chat']['recipient']['user_id'];?>" style="color: <?php echo $color; ?>;"><i class="fa fa-circle" aria-hidden="true"></i></a>
								<?php } ?>
							</div>
						</ul>
					</li>
					<li><a class="white" href="<?php echo Wo_SeoLink("index.php?link1=messages&user=" . $wo['chat']['recipient']['user_id']);?>" target="_blank" onclick="Wo_CloseChat(<?php echo $wo['chat']['recipient']['user_id'];?>);"><?php echo $wo['lang']['open_in_new_tab'];?></a></li>
				</ul>
			</span>
			<svg class="pointer" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" onclick="Wo_CloseChat(<?php echo $wo['chat']['recipient']['user_id'];?>);"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>
		</div>
	</div>

	<div class="chat-tab-container chat-tab-container-<?php echo $wo['chat']['recipient']['user_id'];?> chat-tab-box-<?php echo $wo['chat']['recipient']['user_id'];?>">
		<div class="chat-messages-wrapper chat-messages-wrapper-<?php echo $wo['chat']['recipient']['user_id'];?>">
			<div class="chat-messages">
				<div class="chat-user-desc">
					<div class="row">
						<div class="col-sm-4">
							<img src="<?php echo $wo['chat']['recipient']['avatar'];?>" alt="User avatar">
						</div>
						<div class="col-sm-8">
							<div class="text">
								<span class="head-text">
									<?php $is_following = Wo_IsFollowing($wo['chat']['recipient']['user_id'], $wo['user']['user_id']);?>
									<?php if ($wo['config']['connectivitySystem'] == 0) { ?>
										<?php if ($is_following) { ?>
											<?php echo $wo['lang']['your_following'];?> <?php echo $wo['chat']['recipient']['name'];?>
										<?php } ?>
									<?php } else { ?>
										<?php 
											if ($is_following) { 
												echo $your_friends = str_replace('{site_name}', $wo['config']['siteName'], $wo['lang']['your_friends_chat']);
											} 
										?>
									<?php } ?>
								</span>
								<?php 
									$country = $wo['chat']['recipient']['country_id'];
									if ($country > 0) {
								?>
									<div class="desc-text">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg> <?php echo $wo['lang']['living_in'];?> 
										<?php echo $wo['countries_name'][$country];?>
									</div>
								<?php } ?>
								<?php 
									$working = $wo['chat']['recipient']['working'];
									if (!empty($working)) {
								?>
									<div class="desc-text">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-briefcase"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
										<?php echo $wo['lang']['working_at'];?> <?php echo $working;?>
									</div>
								<?php } ?>
							</div>
						</div>  
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="chat-textarea btn-group">
			<form action="#" method="post" class="chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>">
				<div class="loading_cont">
					<div class="loading hidden"></div>
				</div>
				<div class="sun_chat_bottom">
					<textarea name="textSendMessage" id="sendMessage" class="form-control" cols="10" rows="5" placeholder="<?php echo $wo['lang']['write_something'];?>"  onkeydown="Wo_SubmitChatForm(event, <?php echo $wo['chat']['recipient']['user_id'];?>);" onfocus="Wo_SubmitChatForm(event, <?php echo $wo['chat']['recipient']['user_id'];?>);" dir="auto" ></textarea>
					<div class="dropup chat_optns">
						<span class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
							<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" fill="currentColor"></path></svg>
						</span>
						<ul class="emo-container dropdown-menu dropdown-menu-right" role="menu">
							<?php  
								foreach ($wo['emo'] as $code => $name) {
									$code   = $code;
									echo  '<span onclick="Wo_AddEmoToChat(\'' . $code . '\', ' . $wo['chat']['recipient']['user_id'] . ');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; 
								} 
							?>
						</ul>
					</div>
					<div class="dropup chat_optns">
						<span class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
							<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="currentColor"></path></svg>
						</span>
						<ul class="dropdown-menu dropdown-menu-right sun_chat_dopts_menu sun_cht_dd_menu_<?php echo $wo['chat']['recipient']['user_id'];?>" role="menu">
							<li>
								<a href="javascript:void(0);" class="btn btn-file" id="progressIcon">
									<?php if($wo['config']['fileSharing'] == 1) { ?>
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#6bcfef" d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" /></svg>
										<p><?php echo $wo['lang']['files'];?></p>
										<input type="file" id="sendMessasgeFile" name="sendMessageFile" class="pointer" onchange="Wo_ShareChatFile(<?php echo $wo['chat']['recipient']['user_id'];?>);" />
									<?php } else { ?>
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#4db3f6" d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" /></svg>
										<p><?php echo $wo['lang']['image'];?></p>
										<input type="file" id="sendMessasgeFile" name="sendMessageFile" onchange="Wo_ShareChatFile(<?php echo $wo['chat']['recipient']['user_id'];?>);" accept="image/x-png, image/gif, image/jpeg"  />
									<?php } ?>
								</a>
							</li>
							<?php if ($wo['config']['audio_upload'] == 1) { ?>
							<li>
								<a href="javascript:void(0);" class="btn btn-file record-chat-audio" onclick="function_record(this)" data-record="0"  data-chat-tab="<?php echo $wo['chat']['recipient']['user_id'];?>">
									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ff3a55" d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /></svg>
									<p><?php echo $wo['lang']['voice'];?></p>
								</a>
							</li>
							<?php } ?>
							<?php if ($wo['config']['stickers'] == 1): ?>
								<li class="dropdown-submenu sun_cht_dd_menu_sub_<?php echo $wo['chat']['recipient']['user_id'];?>" id="chat-gifs">
									<a href="javascript:void(0);" class="btn btn-file dropdown-toggle" data-toggle="dropdown" aria-expanded="true" role="button">
										<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#9d87d2"><path d="M15.5,2C18,2 20,4 20,6.5C20,7.38 19.75,8.21 19.31,8.9L22.39,12L21,13.39L17.88,10.32C17.19,10.75 16.37,11 15.5,11C13,11 11,9 11,6.5C11,4 13,2 15.5,2M15.5,4A2.5,2.5 0 0,0 13,6.5A2.5,2.5 0 0,0 15.5,9A2.5,2.5 0 0,0 18,6.5A2.5,2.5 0 0,0 15.5,4M7.5,14.5L4,19H18L13.5,13L10,17.5L7.5,14.5M20,20A2,2 0 0,1 18,22H4A2,2 0 0,1 2,20V6A2,2 0 0,1 4,4H9.5C9.18,4.77 9,5.61 9,6.5A6.5,6.5 0 0,0 15.5,13C16.18,13 16.84,12.89 17.46,12.7L20,15.24V20Z"></path></svg>
										<p><?php echo $wo['lang']['gif'];?></p>
									</a>
									<ul class="dropdown-menu drop-up" role="menu" onclick="event.stopPropagation()">
										<li>
											<div class="w100" id="chat-box-stickers">
												<input type="text" class="form-control" placeholder="<?php echo $wo['lang']['search'] ?> GIFs" onkeyup="Wo_GetChatStickers(this)" data-user-id="<?php echo($wo['chat']['recipient']['user_id']) ?>">
												<div id="chat-box-stickers-cont-<?php echo($wo['chat']['recipient']['user_id']) ?>" class="chat-box-stickers-cont"></div>
											</div>
										</li>
									</ul>
								</li>
							<?php endif; ?>
							<?php if ($wo['config']['stickers_system'] == 1): ?>
								<li class="dropdown-submenu sun_cht_dd_menu_sub_<?php echo $wo['chat']['recipient']['user_id'];?>" id="chat-sticker-system">
									<a href="javascript:void(0);" class="btn btn-file dropdown-toggle" data-toggle="dropdown" aria-expanded="true" role="button">
										<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#31a38c"><path d="M5.5,2C3.56,2 2,3.56 2,5.5V18.5C2,20.44 3.56,22 5.5,22H16L22,16V5.5C22,3.56 20.44,2 18.5,2H5.5M5.75,4H18.25A1.75,1.75 0 0,1 20,5.75V15H18.5C16.56,15 15,16.56 15,18.5V20H5.75A1.75,1.75 0 0,1 4,18.25V5.75A1.75,1.75 0 0,1 5.75,4M14.44,6.77C14.28,6.77 14.12,6.79 13.97,6.83C13.03,7.09 12.5,8.05 12.74,9C12.79,9.15 12.86,9.3 12.95,9.44L16.18,8.56C16.18,8.39 16.16,8.22 16.12,8.05C15.91,7.3 15.22,6.77 14.44,6.77M8.17,8.5C8,8.5 7.85,8.5 7.7,8.55C6.77,8.81 6.22,9.77 6.47,10.7C6.5,10.86 6.59,11 6.68,11.16L9.91,10.28C9.91,10.11 9.89,9.94 9.85,9.78C9.64,9 8.95,8.5 8.17,8.5M16.72,11.26L7.59,13.77C8.91,15.3 11,15.94 12.95,15.41C14.9,14.87 16.36,13.25 16.72,11.26Z"></path></svg>
										<p><?php echo $wo['lang']['stickers'];?></p>
									</a>
									<ul class="dropdown-menu drop-up" style="left: -95px;width: 251px;bottom: 20px;" role="menu">
										<li>
											<div class="w100" id="chat-box-internal-stickers">
												<div id="chat-box-stickers-cont">
												<?php 
													$stickers_system = Wo_GetAllStickers(50000);
													if( count( $stickers_system ) > 0 ){
														foreach ($stickers_system as $wo['stickerlist']) {
															echo '<img alt="gif" src="'. Wo_GetMedia( $wo['stickerlist']['media_file'] ).'" data-gif="'.Wo_GetMedia( $wo['stickerlist']['media_file'] ).'" onclick="Wo_ChatSticker(this);" data-user-id="'.$wo['chat']['recipient']['user_id'].'" autoplay loop>';
														}
													}else{
														echo '<p class="no_chat_gifs_found"><i class="fa fa-frown-o"></i> '. $wo['lang']['no_result'] .'</p>';
													}
												?>
												</div>
											</div>
										</li>
									</ul>
								</li>
							<?php endif; ?>
                                                        <!-- LiveSmart video button chat integration start -->
                                                        <?php if ($wo['config']['livesmart_url'] && (Wo_IsOnline($wo['chat']['recipient']['user_id']) === true)): ?>
                                                                <span class="dropup chat_optns" >
                                                                        <span class="btn btn-file dropdown-toggle" role="button" title="LiveSmart Video Chat">
                                                                            <svg version="1.1" id="livesmart_startvideo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 76 76"  style="enable-background:new 0 0 76 76;" xml:space="preserve" fill="<?php echo $wo['chat']['color']; ?>"> <g id="_x37_7_Essential_Icons_72_"> 	<path id="Video_Camera" d="M72.9,14.4L56,25.3V22c0-4.4-3.6-8-8-8H8c-4.4,0-8,3.6-8,8v32c0,4.4,3.6,8,8,8h40c4.4,0,8-3.6,8-8v-3.3 		l16.9,10.9c1.9,1,3.1-0.7,3.1-1.7V16C76,15,74.9,13.2,72.9,14.4z M52,54c0,2.2-1.8,4-4,4H8c-2.2,0-4-1.8-4-4V22c0-2.2,1.8-4,4-4h40 		c2.2,0,4,1.8,4,4V54z M72,56.3L56,46V30l16-10.3V56.3z"/></g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g></svg>
                                                                        </span>

                                                                </span>
                                                                <script data-agent_id="<?php echo $wo['chat']['recipient']['username'];?>" data-source_path="<?php echo $wo['config']['livesmart_url'];?>" src="<?php echo $wo['config']['livesmart_url'];?>js/widget.js" async></script>
                                                        <?php endif; ?>
                                                        <!-- LiveSmart video button chat integration end -->
						</ul>
					</div>
				</div>
				<div class="w-10 chat-btns-w">
					<span data-chat-rtime="<?php echo $wo['chat']['recipient']['user_id'];?>" class="record_timei hidden">00:00</span>
				</div>
				<input type="hidden" id="user-id" class="chat-user-id" name="user_id" value="<?php echo $wo['chat']['recipient']['user_id'];?>" />
				<input type="hidden" id="color" value="<?php echo $wo['chat']['color'];?>" />
				<input type="hidden" name="message-record" class="message-record" >
				<input type="hidden" name="media-name" class="media-name" >
				<input type="hidden" name="chatSticker" id='chatSticker_<?php echo $wo['chat']['recipient']['user_id'];?>'>
			</form>
		</div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
	$('.sun_cht_dd_menu_<?php echo $wo['chat']['recipient']['user_id'];?>').on("click", function(e){
    e.stopPropagation();
  });
  $('.sun_cht_dd_menu_sub_<?php echo $wo['chat']['recipient']['user_id'];?> .dropdown-toggle, .chat_dd_sub_<?php echo $wo['chat']['recipient']['user_id'];?> a.dropdown-toggle').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

jQuery(document).ready(function($) {
    $(".chat-colors-cont a").click(function(event) {
      var recipient_id = $(this).attr('data-recipient-u-id');
      $.ajax({
        url:  Wo_Ajax_Requests_File(),
        type: 'get',
        data:{f:'chat',s:'set-chat-color',color:$(this).attr('data-chat-color'),recipient_user:$(this).attr('data-recipient-u-id')},
        dataType: 'json',
        success: function(data){
          if (data['status'] == 200) {
             $(".chat_" + recipient_id).find('.online-toggle, .outgoing').css('background', data['color']);
             $(".chat_" + recipient_id).find('.online-toggle, .outgoing').css('color', '#fff');
             $(".chat_" + recipient_id).find('.select-color').css('color', data['color']);
             $(".chat_" + recipient_id).find('#color').val(data['color']);
             $(".text-sender-container .red-list").css('background', data.color);
             $(".text-sender-container .btn-file").css('background', data.color);
             $(".text-sender-container .btn-file").css('border-color', data.color);
          }
        }
      });
    });
    
        //LiveSmart Video Chat startig video chat
    $("#livesmart_startvideo").click(function(event) {
        var roomId = Math.random().toString(36).slice(2).substring(0, 15);
        var str = {};
        str.lsRepUrl = '<?php echo $wo['config']['livesmart_url']?>';
        str.names = '<?php echo $wo['chat']['recipient']['name']; ?>';
        str.visitorName = '<?php echo $wo['user']['name'];?>';
        var encodedString = window.btoa(unescape(encodeURIComponent(JSON.stringify(str))));
        encodedString = encodedString.split('=').join('');
        visitorUrl = str.lsRepUrl + 'pages/r.html?room=' + roomId + '&p=' + encodedString + '&s=' + sessionId;
        str.isAdmin = 1;
        encodedString = window.btoa(unescape(encodeURIComponent(JSON.stringify(str))));
        encodedString = encodedString.split('=').join('');
        agentUrl = str.lsRepUrl + 'pages/r.html?room=' + roomId + '&p=' + encodedString + '&isAdmin=1';
        window.open(visitorUrl);
        $('#sendMessage').val('Request for a video chat ' + agentUrl);
        $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').submit();
    });
});

$(function() {
    var main_hash_id = $('.main_session').val();
    $('.emo-btn-<?php echo $wo['chat']['recipient']['user_id'];?>').click(function () {
        $('.emo-container-<?php echo $wo['chat']['recipient']['user_id'];?>').toggle();
    });
    var chat_messages_wrapper = $('.chat-messages-wrapper-<?php echo $wo['chat']['recipient']['user_id'];?>');
    $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').ajaxForm({
        url: Wo_Ajax_Requests_File() + '?f=chat&s=send_message&hash=' + main_hash_id,
        beforeSend: function() {
            if (chat_messages_wrapper.find('.chat-user-desc').length == 1) {
                chat_messages_wrapper.find('.chat-user-desc').hide();
            }
            var text_message = escapeHTML($('.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?> #sendMessage').val());
            $('.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').attr('disabled', true);
            var color = $('.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?> #color').val();
            <?php  if (!empty($wo['chat']['color'])) { ?>
             var html_message = '<div class="sended_message"><div class="messages-wrapper pull-right messages-text" id="messageId_" data-message-id=""><div class="message outgoing pull-right" style="background: ' + color + ';"><p class="message-text" style="color: #fff" dir="auto">' + text_message + '</p><div class="clear"></div><div class="message-media"></div></div><div class="clear"></div><div class="message-seen text-right message-details"></div><div class="clear"></div><div class="message-typing message-details"></div></div><div class="clear"></div></div>';
            <?php } else { ?>
              var html_message = '<div class="sended_message"><div class="messages-wrapper pull-right messages-text" id="messageId_" data-message-id=""><div class="message outgoing pull-right"><p class="message-text" dir="auto">' + text_message + '</p><div class="clear"></div><div class="message-media"></div></div><div class="clear"></div><div class="message-seen text-right message-details"></div><div class="clear"></div><div class="message-typing message-details"></div></div><div class="clear"></div></div>';
            <?php } ?>
            if (!text_message && $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').find('input.message-record').val() == '' && $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').find('#chatSticker_<?php echo $wo['chat']['recipient']['user_id'];?>').val() == '') {
              $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').find('#sendMessasgeFile').val('');
              return false;
            }
            $('body').attr('sending-<?php echo $wo['chat']['recipient']['user_id'];?>', true);
            if (text_message && $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?> #sendMessasgeFile').val() == '') {
              if (chat_messages_wrapper.length == 0) {
                chat_messages_wrapper.html(html_message);
              } else {
                chat_messages_wrapper.append(html_message);
              }
            }
            setTimeout(function() {
                  chat_messages_wrapper.scrollTop(chat_messages_wrapper[0].scrollHeight);
            }, 100);
            $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').clearForm();
        },
        uploadProgress: function () {
		  $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').find('.loading').removeClass('hidden');
        },
        success: function(data) {
            if (data.status == 200) {
                chat_messages_wrapper.find("div[class*='message-seen']").empty();
                chat_messages_wrapper.find("div[class*='message-typing']").empty();
                if( data.stickers == true ){
                  chat_messages_wrapper.append(data.html); 
                }else{
                  chat_messages_wrapper.find(".sended_message:last").html(data.html); 
                }
                $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').find('input.message-record').val('');   
                $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').find('input.media-name').val('');
                $("#chatSticker_<?php echo $wo['chat']['recipient']['user_id'];?>").val('');
                $("#chat-gifs").removeClass('open');
                if (data.invalid_file == 1) {
                  $("#invalid_file").modal('show');
                  Wo_Delay(function(){
                    $("#invalid_file").modal('hide');
                  },3000);
				          $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').find('.loading').addClass('hidden');
                }
                if(data.invalid_file == 2){
                  $("#file_not_supported").modal('show');
                  Wo_Delay(function(){
                    $("#file_not_supported").modal('hide');
                  },3000);
                }
                $('body').attr('sending-<?php echo $wo['chat']['recipient']['user_id'];?>', false);
                if (data.file == true) {
                  $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').find('.loading').addClass('hidden');
                }
                
            }
            else if(data.status == 500 && data.invalid_file == 1){
              $("#invalid_file").modal('show');
              Wo_Delay(function(){
                $("#invalid_file").modal('hide');
              },3000);
              $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').find('.loading').addClass('hidden');
            }
            else if(data.status == 500 && data.invalid_file == 2){
              $("#file_not_supported").modal('show');
              Wo_Delay(function(){
                $("#file_not_supported").modal('hide');
              },3000);
              $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').find('.loading').addClass('hidden');
            }
            else if(data.status == 500 && data.invalid_file == 3){
              $("#pro_upload_file").modal('show');
              Wo_Delay(function(){
                $("#pro_upload_file").modal('hide');
              },3000);
              $('form.chat-sending-form-<?php echo $wo['chat']['recipient']['user_id'];?>').find('.ball-pulse').fadeOut(100);
            }
            setTimeout(function() {
              chat_messages_wrapper.scrollTop(chat_messages_wrapper[0].scrollHeight);
            }, 700);
        }
    });
}); 
function escapeHTML(string) {
    var pre = document.createElement('pre');
    var text = document.createTextNode( string );
    pre.appendChild(text);
    return pre.innerHTML;
}

function Wo_ChatSticker(self){
  if (!self) {
    return false;
  }
  $('#chatSticker_'+$(self).attr('data-user-id')).val($(self).attr('data-gif'));
  Wo_RegisterTabMessage($(self).attr('data-user-id'));
  $("#chat-sticker-system").removeClass("open");
}

function Wo_GetChatStickers(self){
  if (!self) {
    return false;
  }
  keyword = $(self).val();
  var chat_gif_loading =  '\
  <div class="sk-circle">\
    <div class="sk-circle1 sk-child"></div>\
    <div class="sk-circle2 sk-child"></div>\
    <div class="sk-circle3 sk-child"></div>\
    <div class="sk-circle4 sk-child"></div>\
    <div class="sk-circle5 sk-child"></div>\
    <div class="sk-circle6 sk-child"></div>\
    <div class="sk-circle7 sk-child"></div>\
    <div class="sk-circle8 sk-child"></div>\
    <div class="sk-circle9 sk-child"></div>\
    <div class="sk-circle10 sk-child"></div>\
    <div class="sk-circle11 sk-child"></div>\
    <div class="sk-circle12 sk-child"></div>\
  </div>';
  $('#chat-box-stickers-cont-'+$(self).attr('data-user-id')).html(chat_gif_loading);
  Wo_Delay(function(){
    $.ajax({
      url: 'https://api.giphy.com/v1/gifs/search?',
      type: 'GET',
      dataType: 'json',
      data: {q:keyword,api_key:'<?php echo $wo['config']['giphy_api'];?>',limit:15},
    })
    .done(function(data) {
      if (data.meta.status == 200 && data.data.length > 0) {
        $('#chat-box-stickers-cont-'+$(self).attr('data-user-id')).empty();
        for (var i = 0; i < data.data.length; i++) {
          appended = true;
          if (appended == true) {
              appended = false;
            $('#chat-box-stickers-cont-'+$(self).attr('data-user-id')).append($('<img alt="gif" src="'+data.data[i].images.fixed_height_small.url+'" data-gif="' + data.data[i].images.fixed_height.url + '" onclick="Wo_ChatSticker(this)" data-user-id="'+$(self).attr('data-user-id')+'" autoplay loop>'));
            appended = true;
          } 
        }
      }
      else{
        $('#chat-box-stickers-cont-'+$(self).attr('data-user-id')).html('<p class="no_chat_gifs_found"><i class="fa fa-frown-o"></i> <?php echo $wo['lang']['no_result']; ?></p>');
      }
    })
    .fail(function() {
      console.log("error");
    })
  },1000);
}


function function_record(self) {
	audio_context          = new AudioContext;
    var _SELF = $(self);
    if (!localstream) {
      Wo_CreateUserMedia(); 
    }
    Wo_Delay(function(){
      if(recorder && _SELF.attr('data-record') == 0 && Wo_IsRecordingBufferClean() && $("[data-record='1']").length == 0) {
        Wo_CleanRecordNodes();
        recording_time = $("span[data-chat-rtime='" + _SELF.attr('data-chat-tab') + "']");
        recording_node = "chat";
        chat_tab       = _SELF.attr('data-chat-tab');
        _SELF.attr('data-record','1').html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M9,9H15V15H9" /></svg><p><?php echo $wo["lang"]["stop"];?></p>');  
        Wo_startRecording();
      }

      else if(recorder && _SELF.attr('data-record') == 1 && $("[data-record='1']").length == 1){
       Wo_stopRecording();
       _SELF.html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20.37,8.91L19.37,10.64L7.24,3.64L8.24,1.91L11.28,3.66L12.64,3.29L16.97,5.79L17.34,7.16L20.37,8.91M6,19V7H11.07L18,11V19A2,2 0 0,1 16,21H8A2,2 0 0,1 6,19Z" /></svg><p><?php echo $wo["lang"]["delete"];?></p>').attr('data-record','2');     
      }

      else if(recorder && _SELF.attr('data-record') == 2){
       Wo_CleanRecordNodes();
       Wo_StopLocalStream();
       _SELF.html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /></svg><p><?php echo $wo["lang"]["voice"];?></p>').attr('data-record','0');  
      }

      else{
        return false;
      }
    },500);
}

</script>