425 lines
19 KiB
PHP
425 lines
19 KiB
PHP
|
<style>
|
||
|
|
|
||
|
|
.aw-chat-head img{
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!-- Support and Chat Fixed Buttons -->
|
||
|
|
<div class="chat-message-box position-fixed">
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Chat Drop Down -->
|
||
|
|
<div class="ui floating bg-dark-green-color chat-widget-wrapper icon dropdown button">
|
||
|
|
<img src="{{ asset('images/icons/Vector 386.png') }}" alt="Chat Icon">
|
||
|
|
|
||
|
|
<div class="menu chat-menu">
|
||
|
|
<div id="chat-feature-widget" class="ui transition chat-feature-widget">
|
||
|
|
<div class="header d-flex justify-content-between align-items-center text-white">
|
||
|
|
<p class="chat-popup-label text-light">Chats</p>
|
||
|
|
<img class="remove-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Cross Chat Icon">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="aw-chats">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- User Inbox menu -->
|
||
|
|
<div id="inbox" class="ui transition hidden chat-feature-widget inbox-wrapper">
|
||
|
|
<div class="header aw-chat-head d-flex align-items-center" style="justify-content: space-between;">
|
||
|
|
<img id="back-to-users" src="{{ asset('images/icons/Vector 387.png') }}" alt="Back To Chat">
|
||
|
|
<p class="chat-popup-label text-light">James</p>
|
||
|
|
<img id="close-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Close Chat">
|
||
|
|
</div>
|
||
|
|
<div class="scrollhint">
|
||
|
|
|
||
|
|
|
||
|
|
<!--<div class="item">-->
|
||
|
|
<!-- <div class="single-user-content d-flex">-->
|
||
|
|
<!-- <div class="chat-user-img-box receiver-message-box d-flex">-->
|
||
|
|
<!-- <img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">-->
|
||
|
|
<!-- <p>Typing...</p>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!--</div>-->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="outer-message-input-box">
|
||
|
|
<div class="inner-message-input d-flex align-items-center justify-content-between">
|
||
|
|
<input id="aw-sms" type="text" class="border-0" placeholder="Type a reply">
|
||
|
|
<p class="input-action d-flex align-items-center">
|
||
|
|
<!--<img src="{{ asset('images/icons/gif.png') }}" alt="Gif">-->
|
||
|
|
<!--<img src="{{ asset('images/icons/emoji.png') }}" alt="Emoji">-->
|
||
|
|
<img src="{{ asset('images/icons/attachment.png') }}" alt="Attachment">
|
||
|
|
<input type="file" id="file-picker" class="file-picker">
|
||
|
|
<i class="fa fa-paper-plane-o send-icon" aria-hidden="true"></i>
|
||
|
|
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Support Drop down -->
|
||
|
|
<div class="ui floating bg-dark-green-color support-widget-wrapper icon dropdown button ">
|
||
|
|
<img src="images/icons/support.svg" alt="Support Icon">
|
||
|
|
<div class="menu support-widget">
|
||
|
|
<div class="header support-header mt-0 text-center">
|
||
|
|
<h2 class="color-dark-green">Help & Support</h2>
|
||
|
|
</div>
|
||
|
|
<div class="support-facilities-box d-flex justify-content-between flex-wrap">
|
||
|
|
<div class="item text-center">
|
||
|
|
<div class="support-img-box align-content-center">
|
||
|
|
<img src="images/icons/faq-svgrepo-com 1.svg" alt="">
|
||
|
|
</div>
|
||
|
|
<p class="color-dark-green">FAQ</p>
|
||
|
|
</div>
|
||
|
|
<div class="item text-center">
|
||
|
|
<div class="support-img-box align-content-center">
|
||
|
|
<img src="images/icons/laptop-minimalistic-svgrepo-com 1.svg" alt="">
|
||
|
|
</div>
|
||
|
|
<p class="color-dark-green">Using Kundo</p>
|
||
|
|
</div>
|
||
|
|
<div class="item text-center">
|
||
|
|
<div class="support-img-box align-content-center">
|
||
|
|
<img src="images/icons/launch-svgrepo-com 1.svg" alt="">
|
||
|
|
</div>
|
||
|
|
<p class="color-dark-green text-wrap">Launching Kundo</p>
|
||
|
|
</div>
|
||
|
|
<div class="item text-center">
|
||
|
|
<div class="support-img-box align-content-center">
|
||
|
|
<img src="images/icons/setting-svgrepo-com 1.svg" alt="">
|
||
|
|
</div>
|
||
|
|
<p class="color-dark-green text-wrap">Technical Settings</p>
|
||
|
|
</div>
|
||
|
|
<div class="item text-center">
|
||
|
|
<div class="support-img-box align-content-center">
|
||
|
|
<img src="images/icons/data-mapping-svgrepo-com 1.svg" alt="">
|
||
|
|
</div>
|
||
|
|
<p class="color-dark-green ">Integration</p>
|
||
|
|
</div>
|
||
|
|
<div class="item text-center">
|
||
|
|
<div class="support-img-box align-content-center">
|
||
|
|
<img src="images/icons/open-door-svgrepo-com 1.svg" alt="">
|
||
|
|
</div>
|
||
|
|
<p class="color-dark-green text-wrap">Privacy & Policy</p>
|
||
|
|
</div>
|
||
|
|
<div class="item text-center">
|
||
|
|
<div class="support-img-box align-content-center">
|
||
|
|
<img src="images/icons/news-svgrepo-com 1.svg" alt="">
|
||
|
|
</div>
|
||
|
|
<p class="color-dark-green text-wrap">News & Updates</p>
|
||
|
|
</div>
|
||
|
|
<div class="item text-center">
|
||
|
|
<div class="support-img-box align-content-center">
|
||
|
|
<img src="images/icons/graduate-cap-svgrepo-com 1.svg" alt="">
|
||
|
|
</div>
|
||
|
|
<p class="color-dark-green ">Training</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="header contact-us-header text-center">
|
||
|
|
<h2 class="color-dark-green">Contact Us</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contact-us-box d-flex justify-content-center">
|
||
|
|
<div class="item text-center">
|
||
|
|
<div class="support-img-box align-content-center">
|
||
|
|
<img src="images/icons/email-14-svgrepo-com (1) 1.svg" alt="">
|
||
|
|
</div>
|
||
|
|
<p class="color-dark-green text-wrap">Technical Questions</p>
|
||
|
|
</div>
|
||
|
|
<div class="item text-center">
|
||
|
|
<div class="support-img-box align-content-center">
|
||
|
|
<img src="images/icons/about-filled-svgrepo-com 1.svg" alt="">
|
||
|
|
</div>
|
||
|
|
<p class="color-dark-green">About Kundo</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- End -->
|
||
|
|
|
||
|
|
<audio style="display:none;" id="messageSound" src="{{asset('assets/noti.wav')}}" preload="auto"></audio>
|
||
|
|
|
||
|
|
|
||
|
|
<script src="https://chat.rapidev.tech/socket.io/socket.io.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var customer_id = false;
|
||
|
|
var startData = false;
|
||
|
|
var localId = false;
|
||
|
|
|
||
|
|
var customers = [];
|
||
|
|
|
||
|
|
const socket = io('https://chat.rapidev.tech/', {
|
||
|
|
withCredentials: false,
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Event listener for successful connection
|
||
|
|
socket.on('connect', () => {
|
||
|
|
console.log('Connected to the server with socket ID:', socket.id);
|
||
|
|
customer_id = socket.id;
|
||
|
|
|
||
|
|
localId = "{{auth()->user()->id}}";
|
||
|
|
|
||
|
|
socket.emit('register', localId);
|
||
|
|
console.log(localId);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
// Optionally, handle the disconnect event
|
||
|
|
socket.on('disconnect', (reason) => {
|
||
|
|
console.log('Disconnected from the server:', reason);
|
||
|
|
customer_id = false;
|
||
|
|
if (reason === 'io server disconnect') {
|
||
|
|
// The server disconnected the client, try to reconnect
|
||
|
|
socket.connect();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
console.log(socket);
|
||
|
|
document.addEventListener('DOMContentLoaded', (event) => {
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: "{{route('chatgroups.get')}}",
|
||
|
|
method: 'GET',
|
||
|
|
success: function(response) {
|
||
|
|
console.log(response);
|
||
|
|
|
||
|
|
var html = '';
|
||
|
|
|
||
|
|
for(var i=0;i<response.length;i++){
|
||
|
|
|
||
|
|
var chat = response[i];
|
||
|
|
|
||
|
|
chat['isFirst'] = true;
|
||
|
|
|
||
|
|
customers[chat.id] = chat;
|
||
|
|
|
||
|
|
html += ` <div class="item open-inbox" data-chat="${chat.id}" data-customer="${chat.customer_id}" data-subject="${chat.subject}" data-user="${chat.user_id}">
|
||
|
|
<div class="single-user-content d-flex">
|
||
|
|
<div class="chat-user-img-box">
|
||
|
|
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
||
|
|
</div>
|
||
|
|
<div class="user-message-detail">
|
||
|
|
<p class="recepient-message-detail">${chat.name} <span>Sep 27</span></p>
|
||
|
|
<p class="text-wrap descriptive-message">${chat.subject}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>`;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.aw-chats').html(html);
|
||
|
|
|
||
|
|
// Update action box with fetched content
|
||
|
|
// $('.action-box').html(response);
|
||
|
|
},
|
||
|
|
error: function(error) {
|
||
|
|
console.log('Error fetching action box content:', error);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var activeChat = false;
|
||
|
|
var inbox = $('#inbox .scrollhint');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$(document).on('click', '.open-inbox', async function() {
|
||
|
|
|
||
|
|
var chat = customers[$(this).data('chat')];
|
||
|
|
|
||
|
|
var messages = await getMessage(chat.id);
|
||
|
|
console.log(messages);
|
||
|
|
|
||
|
|
if(messages){
|
||
|
|
|
||
|
|
for(var i=0;i<messages.length;i++){
|
||
|
|
var sms = messages[i];
|
||
|
|
|
||
|
|
if(sms.from == "user"){
|
||
|
|
inbox.append(` <div class="item">
|
||
|
|
<div class="single-user-content d-flex">
|
||
|
|
<div class="chat-user-img-box receiver-message-box d-flex">
|
||
|
|
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
||
|
|
<p>${sms.message}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>`);
|
||
|
|
}else{
|
||
|
|
inbox.append(` <div class="item d-flex justify-content-end">
|
||
|
|
<div class="sender-message-box text-white">
|
||
|
|
<p>${sms.message}</p>
|
||
|
|
</div>
|
||
|
|
</div>`);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.chat-popup-label').text(chat.name);
|
||
|
|
|
||
|
|
activeChat = chat;
|
||
|
|
|
||
|
|
if(chat.isFirst){
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(activeChat);
|
||
|
|
|
||
|
|
slideTransition('#chat-feature-widget', 'left', true);
|
||
|
|
slideTransition('#inbox', 'right', false);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.send-icon').click(async function(){
|
||
|
|
|
||
|
|
var sms = $('#aw-sms').val();
|
||
|
|
|
||
|
|
if(sms != ""){
|
||
|
|
|
||
|
|
console.log(activeChat.id);
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('chat_id', activeChat.id); // Static value as per your example
|
||
|
|
formData.append('from', 'company'); // Assuming a static value for simplicity
|
||
|
|
formData.append('message', sms);
|
||
|
|
formData.append('type', 'text');
|
||
|
|
|
||
|
|
|
||
|
|
// API endpoint
|
||
|
|
const apiUrl = 'https://kundesone.no/api/chat/send-message';
|
||
|
|
|
||
|
|
// Fetch API to send the FormData
|
||
|
|
fetch(apiUrl, {
|
||
|
|
method: 'POST',
|
||
|
|
body: formData
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
console.log('Success:', data);
|
||
|
|
|
||
|
|
socket.emit('chat message',{sms:sms,id:activeChat.id},activeChat.customer_id);
|
||
|
|
|
||
|
|
inbox.append(` <div class="item d-flex justify-content-end">
|
||
|
|
<div class="sender-message-box text-white">
|
||
|
|
<p>${sms}</p>
|
||
|
|
</div>
|
||
|
|
</div>`);
|
||
|
|
|
||
|
|
$('#aw-sms').val("");
|
||
|
|
|
||
|
|
scrollToBottom();
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
async function getMessage(chat_id) {
|
||
|
|
const apiUrl = 'https://kundesone.no/api/chat/getMessages';
|
||
|
|
try {
|
||
|
|
const response = await fetch(apiUrl, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json' // Assuming the server expects JSON
|
||
|
|
},
|
||
|
|
body: JSON.stringify({ chat_id: chat_id })
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error('Network response was not ok');
|
||
|
|
}
|
||
|
|
|
||
|
|
const messages = await response.json();
|
||
|
|
return messages;
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error:', error);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
socket.on('chat message', function(msg) {
|
||
|
|
playMessageSound();
|
||
|
|
|
||
|
|
if(msg.id == activeChat.id){
|
||
|
|
|
||
|
|
inbox.append(` <div class="item">
|
||
|
|
<div class="single-user-content d-flex">
|
||
|
|
<div class="chat-user-img-box receiver-message-box d-flex">
|
||
|
|
<img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
||
|
|
<p>${msg.sms}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>`);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(msg);
|
||
|
|
// var item = document.createElement('li');
|
||
|
|
// item.textContent = msg;
|
||
|
|
// document.getElementById('messages').appendChild(item);
|
||
|
|
// window.scrollTo(0, document.body.scrollHeight);
|
||
|
|
|
||
|
|
scrollToBottom();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
socket.on('start_chat', function(msg) {
|
||
|
|
console.log(msg);
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
function scrollToBottom() {
|
||
|
|
var $div = $('#scrollhint');
|
||
|
|
$div.scrollTop($div.prop("scrollHeight"));
|
||
|
|
}
|
||
|
|
|
||
|
|
function playMessageSound() {
|
||
|
|
var sound = document.getElementById('messageSound');
|
||
|
|
|
||
|
|
sound.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|