Compare commits
No commits in common. "ai-dev" and "master" have entirely different histories.
@ -1,7 +0,0 @@
|
|||||||
<?php
|
|
||||||
header('Content-Type: application/json');
|
|
||||||
|
|
||||||
// In the future, this can be connected to a database or an AI service.
|
|
||||||
$canned_response = "Thanks for your message! We've received it and will get back to you shortly. For now, feel free to browse our FAQ section.";
|
|
||||||
|
|
||||||
echo json_encode(['reply' => $canned_response]);
|
|
||||||
@ -1,98 +0,0 @@
|
|||||||
/* Chat Widget */
|
|
||||||
.chat-widget-fab {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 2rem;
|
|
||||||
right: 2rem;
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #4F46E5;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: transform 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-widget-fab:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-widget-container {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 7rem;
|
|
||||||
right: 2rem;
|
|
||||||
width: 370px;
|
|
||||||
max-width: 90vw;
|
|
||||||
height: 70vh;
|
|
||||||
max-height: 600px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
transform: scale(0.95);
|
|
||||||
opacity: 0;
|
|
||||||
transition: transform 0.2s ease-out, opacity 0.2s ease-out;
|
|
||||||
transform-origin: bottom right;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-widget-container.open {
|
|
||||||
display: flex;
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-header {
|
|
||||||
background-color: #4F46E5;
|
|
||||||
color: white;
|
|
||||||
padding: 1rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-header h5 {
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-body {
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: 1rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
background-color: #F3F4F6;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-message {
|
|
||||||
max-width: 80%;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-message.user {
|
|
||||||
background-color: #4F46E5;
|
|
||||||
color: white;
|
|
||||||
align-self: flex-end;
|
|
||||||
border-bottom-right-radius: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-message.bot {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
color: #374151;
|
|
||||||
align-self: flex-start;
|
|
||||||
border-bottom-left-radius: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-footer {
|
|
||||||
padding: 1rem;
|
|
||||||
border-top: 1px solid #E5E7EB;
|
|
||||||
}
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
const chatFab = document.getElementById('chat-fab');
|
|
||||||
const chatContainer = document.getElementById('chat-container');
|
|
||||||
const closeChat = document.getElementById('close-chat');
|
|
||||||
const chatForm = document.getElementById('chat-form');
|
|
||||||
const chatBody = document.getElementById('chat-body');
|
|
||||||
const chatInput = document.getElementById('chat-input');
|
|
||||||
|
|
||||||
chatFab.addEventListener('click', () => {
|
|
||||||
toggleChat();
|
|
||||||
});
|
|
||||||
|
|
||||||
closeChat.addEventListener('click', () => {
|
|
||||||
toggleChat();
|
|
||||||
});
|
|
||||||
|
|
||||||
function toggleChat() {
|
|
||||||
chatContainer.classList.toggle('open');
|
|
||||||
}
|
|
||||||
|
|
||||||
chatForm.addEventListener('submit', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const message = chatInput.value.trim();
|
|
||||||
if (message === '') return;
|
|
||||||
|
|
||||||
appendMessage(message, 'user');
|
|
||||||
chatInput.value = '';
|
|
||||||
chatBody.scrollTop = chatBody.scrollHeight;
|
|
||||||
|
|
||||||
// Show typing indicator
|
|
||||||
appendMessage('...', 'bot', true);
|
|
||||||
chatBody.scrollTop = chatBody.scrollHeight;
|
|
||||||
|
|
||||||
fetch('api/chat.php', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ message: message }),
|
|
||||||
})
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
const typingIndicator = document.querySelector('.typing-indicator');
|
|
||||||
if (typingIndicator) {
|
|
||||||
typingIndicator.remove();
|
|
||||||
}
|
|
||||||
appendMessage(data.reply, 'bot');
|
|
||||||
chatBody.scrollTop = chatBody.scrollHeight;
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Error:', error);
|
|
||||||
const typingIndicator = document.querySelector('.typing-indicator');
|
|
||||||
if (typingIndicator) {
|
|
||||||
typingIndicator.remove();
|
|
||||||
}
|
|
||||||
appendMessage('Sorry, something went wrong.', 'bot');
|
|
||||||
chatBody.scrollTop = chatBody.scrollHeight;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function appendMessage(text, type, isTyping = false) {
|
|
||||||
const messageDiv = document.createElement('div');
|
|
||||||
messageDiv.classList.add('chat-message', type);
|
|
||||||
if (isTyping) {
|
|
||||||
messageDiv.classList.add('typing-indicator');
|
|
||||||
}
|
|
||||||
messageDiv.textContent = text;
|
|
||||||
chatBody.appendChild(messageDiv);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
Loading…
x
Reference in New Issue
Block a user