Kundesone/resources/views/components/chat-box.blade.php

 <style>
     
     .aw-chat-head img{
         cursor:pointer;
     }
     
     .scrollhint .item .single-user-content img,.scrollhint .item .sender-message-box img{
         width:100%;
     }
     @media screen and (max-width: 767px) {
    .chat-message-box {
        left: 20px !important;
    }
}
@media only screen and (max-width: 525px) {
div.chat-inbox>.chat-content-wrapper>.chat-message>.single-message-chat>.user-message {
    max-width: 100% !important;
    width: 100% !important;;
}
}
 </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="{{asset('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="{{asset('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="{{asset('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="{{asset('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="{{asset('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="{{asset('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="{{asset('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="{{asset('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="{{asset('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="{{asset('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="{{asset('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();
            }
        });
        
        function loadChats(){
            $.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') }}" class="aw-avatar" 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);
                }
            });
            
        }

        
        
        console.log(socket);
        document.addEventListener('DOMContentLoaded', (event) => {
            
             loadChats()
            
            var activeChat = false;
            var inbox = $('#inbox .scrollhint');
            
            $('#close-chat').click(function(){
                
                 Swal.fire({
                            title: 'Are you sure?',
                            text: "Do you want to close this chat?",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Yes'
                        }).then((result) => {
                            if (result.isConfirmed && activeChat) {
                                
                
               
                     $.ajax({
                        url: '{{ route("CloseChat") }}',
                        type: 'POST',
                        data: {
                            _token: '{{csrf_token()}}',
                            chat_id: activeChat.id
                        },
                        success: function(response) {
                            console.log(response);
                            
                             socket.emit('chat_closed',
                                   { customer_id:activeChat.customer_id, chat_id: activeChat.id }
                                    );
                            
                            Swal.fire({
                            title: 'Success',
                            text: "Chat is closed.",
                            icon: 'success',
                            showCancelButton: false,
                            confirmButtonColor: '#3085d6',
                            //cancelButtonColor: '#d33',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                loadChats();
                                $('#back-to-users').click();
                            }
                        });
                            
                        },
                        error: function(xhr, status, error) {
                            console.log(xhr.responseText);
                        }
                    });
                
                    console.log('chat closed');
                }
                
                        });
                
            });
            
          
            
            
             $(document).on('click', '.open-inbox', async function()  {
                 inbox.html(null);
                 
                  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];
                             
                              var content = sms.message;
                                 
                                 if(sms.type == 'image'){
                                     content = '<img src="'+sms.message+'"/>';
                                 }
                                 
                                 if(sms.type == 'file'){
                                     content = '<a target="_blank" href="'+sms.message+'"> View File </a>';
                                 }
                             
                             if(sms.from == "user"){
                                 
                                
                                 //<img src="{{ asset('images/Avatar.png') }}" class="aw-avatar" alt="Dummy User">
                                  inbox.append(` <div class="item">
                                        <div class="single-user-content d-flex">
                                            <div class="chat-user-img-box receiver-message-box d-flex">
                                                
                                                <p>${content}</p>
                                            </div>
                                        </div>
                                    </div>`);
                             }else{
                                 inbox.append(` <div class="item d-flex justify-content-end">
                                        <div class="sender-message-box text-white">
                                            <p>${content}</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();
                
                const fileInput = document.getElementById("file-picker");
                const file = fileInput.files[0];
                var type = "text";
                
                if(sms != "" || file){
                  
                    console.log(activeChat.id);
                  const formData = new FormData();
                  
                  if (file) {
                      formData.append("file", file); // Append the selected file
                
                      // Check the file type
                      const fileType = file.type;
                      if (fileType.startsWith("image/")) {
                        console.log("This is an image file.");
                        type = "image";
                      } else {
                        type = "file";
                      }
                    }
    
    
                    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', type);
                    
    
                    // 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 => {
                        
                         var sms = data.data;
                           var content = sms.message;
                         
                        console.log('Success:', data,'chat message',{
                                        sms:content,
                                        id:activeChat.id,
                                        type:sms.type
                                        
                                    },
                                    activeChat.customer_id);

                          socket.emit('chat message',
                                    {
                                        sms:content,
                                        id:activeChat.id,
                                        type:sms.type
                                        
                                    },
                                    activeChat.customer_id
                                    );
                         
                         
                                 
                                 if(sms.type == 'image'){
                                     content = '<img src="'+content+'"/>';
                                 }
                                 
                                 if(sms.type == 'file'){
                                     content = '<a target="_blank" href="'+content+'"> View File </a>';
                                 }
                    
                     inbox.append(` <div class="item d-flex justify-content-end">
                                        <div class="sender-message-box text-white">
                                            <p>${content}</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_created',function(data){
     loadChats();
    console.log(data);
     playMessageSound();
});
         
    
            socket.on('chat message', function(msg) {
                playMessageSound();
                
                if(msg.id == activeChat.id){
                    
                    var sms = msg;
                    
                    var content = sms.sms;
                    
                     if(sms.type == 'image'){
                                     content = '<img src="'+content+'"/>';
                                 }
                                 
                                 if(sms.type == 'file'){
                                     content = '<a target="_blank" href="'+content+'"> View File </a>';
                                 }
                    
                    
                //<img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                inbox.append(`  <div class="item">
                                        <div class="single-user-content d-flex">
                                            <div class="chat-user-img-box receiver-message-box d-flex">
                                                
                                                <p>${content}</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>
    
    
     <script>document.querySelector('.input-action img[alt="Attachment"]').addEventListener('click', function() {
    document.getElementById('file-picker').click();
});
</script>


    <style>
        .outer-message-input-box {
    width: 100%;
    padding: 10px;
    background-color: #f8f9fa;
}

.inner-message-input {
    width: 100%;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.inner-message-input input {
    flex-grow: 1;
    margin-right: 10px;
}

.input-action img {
    margin-left: 10px;
    cursor: pointer;
}

.input-action .file-picker {
    display: none;
}

.fa-paper-plane-o {
  font-size: 17px !important;
  background: #748C62 !important;
  padding: 3px 7px !important;
  color: white !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}

    </style>