ok

Mini Shell

Direktori : /home2/selectio/public_html/geniusgroove.in/new/chatbot/
Upload File :
Current File : /home2/selectio/public_html/geniusgroove.in/new/chatbot/index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Live Support Chat</title>
		<link href="style.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">
	</head>
	<body>
	    <h1>Live Support Chat</h1>
		<p>The live support chat icon will appear in the bottom-right corner.</p>
        <!-- add your HTML code here -->
        
        <a href="#" class="open-chat-widget"><i class="fa-solid fa-comment-dots fa-lg"></i></a>
        <div class="chat-widget">
    <div class="chat-widget-header">
        <a href="#" class="previous-chat-tab-btn">&lsaquo;</a>
        <a href="#" class="close-chat-widget-btn">&times;</a>
    </div>
    <div class="chat-widget-content">
        <div class="chat-widget-tabs">
            <div class="chat-widget-tab chat-widget-login-tab">
                <form action="authenticate.php" method="post">
                    <input type="text" name="name" placeholder="Your Name">
                    <input type="email" name="email" placeholder="Your Email" required>
                    <div class="msg"></div>
                    <button type="submit">Submit</button>
                </form>
            </div>
            <div class="chat-widget-tab chat-widget-conversations-tab"></div>
            <div class="chat-widget-tab chat-widget-conversation-tab"></div>
        </div>
    </div>
</div>
        
        <script>
        // Place the JS code here
        
        // Variables we will use in our app
let currentChatTab = 1;
let conversationId = null;
let status = 'Idle';



		
		// OnClick event handler for our open chat button
document.querySelector('.open-chat-widget').onclick = event => {
    event.preventDefault();
    // Execute the initialize chat function
    initChat();
};
// Intialize chat function - handle all aspects of the chat widget
const initChat = () => {
    // Add init code here
    
    // Show the chat widget
document.querySelector('.chat-widget').style.display = 'flex';
// Animate the chat widget
document.querySelector('.chat-widget').getBoundingClientRect();
document.querySelector('.chat-widget').classList.add('open');
// Close button OnClick event handler
document.querySelector('.close-chat-widget-btn').onclick = event => {
    event.preventDefault();
    // Close the chat
    document.querySelector('.chat-widget').classList.remove('open');
};
// Login form submit event handler
document.querySelector('.chat-widget-login-tab form').onsubmit = event => {
    event.preventDefault();
    // Declare form related variables
    let formEle = document.querySelector('.chat-widget-login-tab form');
    let formData = new FormData(formEle);
    // Execute POST AJAX request and attempt to authenticate the user
    fetch(formEle.action, {
        cache: 'no-store',
        method: 'POST',
        body: formData
    }).then(response => response.text()).then(data => {
        // If the response includes the "operator" string
        if (data.includes('operator')) {
            // Show the password field
            document.querySelector('.chat-widget-login-tab .msg').insertAdjacentHTML('beforebegin', '<input type="password" name="password" placeholder="Your Password" required>');
        } else if (data.includes('success')) {
            // Authentication success! Execute AJAX request to retrieve the user's conversations

            document.querySelector('.chat-widget-login-tab .msg').innerHTML = 'Success!';

        } else {
            // Authentication failed! Show the error message on the form
            document.querySelector('.chat-widget-login-tab .msg').innerHTML = data;
        }
    });    
};

};


// Select chat tab - it will be used to smoothly transition between tabs
const selectChatTab = value => {
    // Update the current tab variable
    currentChatTab = value;
    // Select all tab elements and add the CSS3 property transform
    document.querySelectorAll('.chat-widget-tab').forEach(element => element.style.transform = `translateX(-${(value-1)*100}%)`);
    // If the user is on the first tab, hide the prev tab button element
    document.querySelector('.previous-chat-tab-btn').style.display = value > 1 ? 'block' : 'none';
    // Update the conversation ID variable if the user is on the first or second tab
    if (value == 1 || value == 2) {
        conversationId = null;
    }
    // If the user is on the login form tab (tab 1), remove the secret code cookie (logout)
    if (value == 1) {
        document.cookie = 'chat_secret=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }
};


// Conversation handler function - will add the event handlers to the conversations list and new chat button
const conversationHandler = () => {
    // New chat button OnClick event handler
    document.querySelector('.chat-widget-new-conversation').onclick = event => {
        event.preventDefault();
        // Update the status
        status = 'Waiting';
        // Notify the user
        document.querySelector('.chat-widget-conversation-tab').innerHTML = `
        <div class="chat-widget-messages">
            <div class="chat-widget-message">Please wait...</div>
        </div>
        `;
        // Transition to the conversation tab (tab 3)
        selectChatTab(3);                
    };
    // Iterate the conversations and add the OnClick event handler to each element
    document.querySelectorAll('.chat-widget-conversation').forEach(element => {
        element.onclick = event => {
            event.preventDefault();
            // Get the conversation
            // Execute the getConversation function here
            
            getConversation(element.dataset.id);
        };
    });
};

document.querySelector('.chat-widget-login-tab .msg').innerHTML = 'Success!';


fetch('conversations.php', { cache: 'no-store' }).then(response => response.text()).then(data => {
    // Update the status
    status = 'Idle';
    // Update the conversations tab content
    document.querySelector('.chat-widget-conversations-tab').innerHTML = data;
    // Execute the conversation handler function
    conversationHandler();
    // Transition to the conversations tab
    selectChatTab(2);
});


// If the secret code cookie exists, attempt to automatically authenticate the user
if (document.cookie.match(/^(.*;)?\s*chat_secret\s*=\s*[^;]+(.*)?$/)) {
    // Execute GET AJAX request to retireve the conversations
    fetch('conversations.php', { cache: 'no-store' }).then(response => response.text()).then(data => {
        // If respone not equals error
        if (data != 'error') {
            // User is authenticated! Update the status and conversations tab content
            status = 'Idle';
            document.querySelector('.chat-widget-conversations-tab').innerHTML = data;
            // Execute the conversation handler function
            conversationHandler();
            // Transition to the conversations tab
            selectChatTab(2);
        }
    });
}


// Previous tab button OnClick event handler
document.querySelector('.previous-chat-tab-btn').onclick = event => {
    event.preventDefault();
    // Transition to the respective page
    selectChatTab(currentChatTab-1);
};


// Get conversation function - execute an AJAX request that will retrieve the conversation based on the conversation ID column
const getConversation = id => {
    // Execute GET AJAX request
    fetch(`conversation.php?id=${id}`, { cache: 'no-store' }).then(response => response.text()).then(data => {
        // Update conversation ID variable
        conversationId = id;
        // Update the status
        status = 'Occupied';
        // Update the converstaion tab content
        document.querySelector('.chat-widget-conversation-tab').innerHTML = data;
        // Transition to the conversation tab (tab 3)
        selectChatTab(3);  
        // Retrieve the input message form element 
        let chatWidgetInputMsg = document.querySelector('.chat-widget-input-message');
        // If the element exists
        if (chatWidgetInputMsg) {
            // Scroll to the bottom of the messages container
            if (document.querySelector('.chat-widget-messages').lastElementChild) {
                document.querySelector('.chat-widget-messages').scrollTop = document.querySelector('.chat-widget-messages').lastElementChild.offsetTop;
            }
            // Message submit event handler
            chatWidgetInputMsg.onsubmit = event => {
                event.preventDefault();
                // Execute POST AJAX request that will send the captured message to the server and insert it into the database
                fetch(chatWidgetInputMsg.action, { 
                    cache: 'no-store',
                    method: 'POST',
                    body: new FormData(chatWidgetInputMsg)
                });
                // Create the new message element
                let chatWidgetMsg = document.createElement('div');
                chatWidgetMsg.classList.add('chat-widget-message');
                chatWidgetMsg.textContent = chatWidgetInputMsg.querySelector('input').value;
                // Add it to the messages container, right at the bottom
                document.querySelector('.chat-widget-messages').insertAdjacentElement('beforeend', chatWidgetMsg);
                // Reset the message element
                chatWidgetInputMsg.querySelector('input').value = '';
                // Scroll to the bottom of the messages container
                document.querySelector('.chat-widget-messages').scrollTop = chatWidgetMsg.offsetTop;
            };
        }
    });
};


// Update the conversations and messages in real-time
setInterval(() => {
    // If the current tab is 2
    if (currentChatTab == 2) {
        // Use AJAX to update the conversations list
        fetch('conversations.php', { cache: 'no-store' }).then(response => response.text()).then(html => {
            let doc = (new DOMParser()).parseFromString(html, 'text/html');
            document.querySelector('.chat-widget-conversations').innerHTML = doc.querySelector('.chat-widget-conversations').innerHTML;
            conversationHandler();
        }); 
    // If the current tab is 3 and the conversation ID variable is not NUll               
    } else if (currentChatTab == 3 && conversationId != null) {
        // Use AJAX to update the conversation
        fetch('conversation.php?id=' + conversationId, { cache: 'no-store' }).then(response => response.text()).then(html => {
            // The following variable will prevent the messages container from automatically scrolling to the bottom if the user previously scrolled up in the chat list
            let canScroll = true;
            if (document.querySelector('.chat-widget-messages').lastElementChild && document.querySelector('.chat-widget-messages').scrollHeight - document.querySelector('.chat-widget-messages').scrollTop != document.querySelector('.chat-widget-messages').clientHeight) {
                canScroll = false;
            }                    
            let doc = (new DOMParser()).parseFromString(html, 'text/html');
            // Update content
            document.querySelector('.chat-widget-messages').innerHTML = doc.querySelector('.chat-widget-messages').innerHTML;
            if (canScroll && document.querySelector('.chat-widget-messages').lastElementChild) {
                // Scroll to the bottom of the container
                document.querySelector('.chat-widget-messages').scrollTop = document.querySelector('.chat-widget-messages').lastElementChild.offsetTop;
            }                   
        });  
    // If the current tab is 3 and the status is Waiting           
    } else if (currentChatTab == 3 && status == 'Waiting') {
        // Attempt to find a new conversation between the user and operator (or vice-versa)
        fetch('find_conversation.php', { cache: 'no-store' }).then(response => response.text()).then(data => {
            if (data != 'error') {
                // Success! Two users are now connected! Retrieve the new conversation
                getConversation(data);
            }
        });               
    }
}, 5000); // 5 seconds (5000ms) - the lower the number, the more demanding it is on your server.
        
		</script>
		

	</body>
</html>

Zerion Mini Shell 1.0