`;
}
// Telefon Numarası
if (phoneRequired) {
formHtml += `
`;
} else {
formHtml += `
`;
}
// Email
if (emailRequired) {
formHtml += `
`;
} else {
formHtml += `
`;
}
// Özel Alan
if (widgetConfig.custom_field_name) {
if (customRequired) {
formHtml += `
`;
} else {
formHtml += `
`;
}
}
// Devam etme düğmeleri
formHtml += `
`;
formContainer.innerHTML = formHtml;
chatContainer.appendChild(formContainer);
// Butonları dinle - DOM'dan bularak
setTimeout(() => {
const submitButton = document.getElementById('kayra-submit-info');
const skipButton = document.getElementById('kayra-skip-info');
if (submitButton) {
console.log('Submit info butonu bulundu ve event listener ekleniyor');
submitButton.addEventListener('click', function() {
console.log('Submit info butonu tıklandı');
// Zorunlu alanları kontrol et
let isValid = true;
const userInfo = {};
if (nameRequired) {
const nameInput = document.getElementById('kayra-user-name');
if (nameInput && !nameInput.value.trim()) {
nameInput.classList.add('kayra-input-error');
isValid = false;
} else if (nameInput) {
nameInput.classList.remove('kayra-input-error');
userInfo.name = nameInput.value.trim();
}
} else {
const nameInput = document.getElementById('kayra-user-name');
userInfo.name = nameInput ? nameInput.value.trim() : '';
}
if (phoneRequired) {
const phoneInput = document.getElementById('kayra-user-phone');
if (phoneInput && !phoneInput.value.trim()) {
phoneInput.classList.add('kayra-input-error');
isValid = false;
} else if (phoneInput) {
phoneInput.classList.remove('kayra-input-error');
userInfo.phone = phoneInput.value.trim();
}
} else {
const phoneInput = document.getElementById('kayra-user-phone');
userInfo.phone = phoneInput ? phoneInput.value.trim() : '';
}
if (emailRequired) {
const emailInput = document.getElementById('kayra-user-email');
if (emailInput && (!emailInput.value.trim() || !isValidEmail(emailInput.value.trim()))) {
emailInput.classList.add('kayra-input-error');
isValid = false;
} else if (emailInput) {
emailInput.classList.remove('kayra-input-error');
userInfo.email = emailInput.value.trim();
}
} else {
const emailInput = document.getElementById('kayra-user-email');
userInfo.email = emailInput ? emailInput.value.trim() : '';
}
if (customRequired && widgetConfig.custom_field_name) {
const customInput = document.getElementById('kayra-user-custom');
if (customInput && !customInput.value.trim()) {
customInput.classList.add('kayra-input-error');
isValid = false;
} else if (customInput) {
customInput.classList.remove('kayra-input-error');
userInfo.custom = customInput.value.trim();
}
} else if (widgetConfig.custom_field_name) {
const customInput = document.getElementById('kayra-user-custom');
userInfo.custom = customInput ? customInput.value.trim() : '';
}
if (isValid) {
// Kullanıcı bilgilerini kaydet
saveUserInfo(userInfo);
// Formu kaldır
chatContainer.removeChild(formContainer);
// Chat arayüzünü göster
renderChatInterface(chatContainer);
// Event listener'ları yeniden ayarla
setTimeout(() => {
setupAllEventListeners();
}, 100);
}
});
}
if (skipButton) {
console.log('Skip info butonu bulundu ve event listener ekleniyor');
skipButton.addEventListener('click', function() {
console.log('Skip info butonu tıklandı');
// Hiçbir zorunlu alan yoksa geçişe izin ver, aksi takdirde kontrol et
if (!nameRequired && !phoneRequired && !emailRequired && !customRequired) {
// Boş bir kullanıcı bilgisi kaydet
saveUserInfo({});
// Formu kaldır
chatContainer.removeChild(formContainer);
// Chat arayüzünü göster
renderChatInterface(chatContainer);
// Event listener'ları yeniden ayarla
setTimeout(() => {
setupAllEventListeners();
}, 100);
} else {
alert(t('requiredFields'));
}
});
}
}, 100);
}
// Email doğrulama
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
// Kullanıcı onay durumunu kaydet ve kontrol et
function saveUserConsent(hasConsented) {
try {
localStorage.setItem(STORAGE_KEY_CONSENT, hasConsented ? 'true' : 'false');
} catch (error) {
console.error('Kullanıcı onayı kaydedilirken hata:', error);
}
}
// Tüm widget verilerini temizle
function resetAllWidgetData() {
try {
// Tüm verileri localStorage'dan temizle
localStorage.removeItem(STORAGE_KEY_HISTORY);
localStorage.removeItem(STORAGE_KEY_CONSENT);
localStorage.removeItem(STORAGE_KEY_USER_INFO);
// Sohbetin sıfırlandığını işaretle
localStorage.setItem(`kayra_chat_reset_${widgetId}`, 'true');
// Widget'ı kapat
localStorage.setItem(STORAGE_KEY_OPEN, 'false');
// Geçmiş mesajları temizle
messageHistory = [];
return true;
} catch (error) {
console.error('Widget verileri temizlenirken hata:', error);
return false;
}
}
function hasUserConsent() {
try {
return localStorage.getItem(STORAGE_KEY_CONSENT) === 'true';
} catch (error) {
console.error('Kullanıcı onayı kontrol edilirken hata:', error);
return false;
}
}
// Kullanıcı bilgilerini kaydet ve kontrol et
function saveUserInfo(userInfo) {
try {
localStorage.setItem(STORAGE_KEY_USER_INFO, JSON.stringify(userInfo));
} catch (error) {
console.error('Kullanıcı bilgileri kaydedilirken hata:', error);
}
}
function hasUserInfo() {
try {
return localStorage.getItem(STORAGE_KEY_USER_INFO) !== null;
} catch (error) {
console.error('Kullanıcı bilgileri kontrol edilirken hata:', error);
return false;
}
}
function getUserInfo() {
try {
const userInfoData = localStorage.getItem(STORAGE_KEY_USER_INFO);
return userInfoData ? JSON.parse(userInfoData) : null;
} catch (error) {
console.error('Kullanıcı bilgileri alınırken hata:', error);
return null;
}
}
// Tüm event listener'ları ayarla - bu fonksiyon ayrı olarak herhangi bir zamanda çağrılabilir
function setupAllEventListeners() {
const widgetContainer = document.getElementById('kayra-chatbot-widget');
if (!widgetContainer) {
console.error('Widget container bulunamadı!');
return;
}
const toggleButton = widgetContainer.querySelector('.kayra-chat-toggle');
const chatContainer = widgetContainer.querySelector('.kayra-chat-container');
const closeButton = widgetContainer.querySelector('.kayra-chat-close');
const resetButton = widgetContainer.querySelector('.kayra-reset-chat');
console.log('Bulunan elementler:', {
toggleButton: !!toggleButton,
chatContainer: !!chatContainer,
closeButton: !!closeButton,
resetButton: !!resetButton
});
// Toggle butonu event listener'ı
if (toggleButton) {
// Önceki event listener'ları kaldırmak için klonla ve değiştir
const newToggleButton = toggleButton.cloneNode(true);
toggleButton.parentNode.replaceChild(newToggleButton, toggleButton);
newToggleButton.addEventListener('click', () => {
console.log('Toggle button tıklandı');
isWidgetOpen = !isWidgetOpen;
chatContainer.style.display = isWidgetOpen ? 'flex' : 'none';
newToggleButton.style.display = isWidgetOpen ? 'none' : 'flex';
// Son aktivite zamanını güncelle
updateLastActivity();
// Açık/kapalı durumunu kaydet - localStorage'a kullanıcı tercihini kaydet
console.log('Kullanıcı widget tercihini değiştirdi:', isWidgetOpen ? 'AÇIK' : 'KAPALI');
saveWidgetState(isWidgetOpen);
// Element referanslarını güncelle çünkü DOM değişmiş olabilir
setupChatInputListeners();
// KVKK kontrolü ve kullanıcı bilgi kontrolü
checkFormsStatus();
});
}
// Chat kapatma butonu event listener'ı
if (closeButton) {
// Önceki event listener'ları kaldırmak için klonla ve değiştir
const newCloseButton = closeButton.cloneNode(true);
closeButton.parentNode.replaceChild(newCloseButton, closeButton);
newCloseButton.addEventListener('click', () => {
console.log('Close button tıklandı');
isWidgetOpen = false;
chatContainer.style.display = 'none';
const toggleBtn = widgetContainer.querySelector('.kayra-chat-toggle');
if (toggleBtn) toggleBtn.style.display = 'flex';
// Konuşmayı tamamlandı olarak işaretle
markConversationAsCompleted();
// Son aktivite zamanını güncelle
updateLastActivity();
// Açık/kapalı durumunu kaydet - localStorage'a kullanıcı tercihini kaydet
console.log('Kullanıcı widget\'ı kapattı, tercih kaydediliyor: KAPALI');
saveWidgetState(false);
});
}
// Reset butonu event listener'ı
if (resetButton) {
// Önceki event listener'ları kaldırmak için klonla ve değiştir
const newResetButton = resetButton.cloneNode(true);
resetButton.parentNode.replaceChild(newResetButton, resetButton);
newResetButton.addEventListener('click', () => {
console.log('Reset button tıklandı');
// Onay isteyin
if (confirm(t('resetConfirm'))) {
// Konuşmayı tamamlandı olarak işaretle
markConversationAsCompleted();
// Tüm verileri temizle
if (resetAllWidgetData()) {
// Mesaj listesini temizle
const messagesContainer = widgetContainer.querySelector('.kayra-chat-messages');
if (messagesContainer) {
messagesContainer.innerHTML = '';
// Hoşgeldin mesajını yeniden ekle
const welcomeMessage = document.createElement('div');
welcomeMessage.className = 'kayra-message kayra-bot-message';
// Dil'e uygun hoşgeldin mesajını seç
let welcomeText = t('welcomeDefault');
if (widgetLang === 'tr' && widgetConfig.welcome_message_tr) {
welcomeText = widgetConfig.welcome_message_tr;
} else if (widgetLang === 'en' && widgetConfig.welcome_message_en) {
welcomeText = widgetConfig.welcome_message_en;
} else if (widgetConfig.welcome_message) {
// Eski versiyon uyumluluğu için
welcomeText = widgetConfig.welcome_message;
}
welcomeMessage.innerHTML = `
${widgetConfig.bot_name || 'Chat Bot'}
${welcomeText}
`;
messagesContainer.appendChild(welcomeMessage);
}
// Son aktivite zamanını güncelle
updateLastActivity();
// Widget'ı kapat
chatContainer.style.display = 'none';
const toggleBtn = widgetContainer.querySelector('.kayra-chat-toggle');
if (toggleBtn) toggleBtn.style.display = 'flex';
isWidgetOpen = false;
}
}
});
}
// Chat input için event listener'ları ayarla
setupChatInputListeners();
}
// Chat input için event listener'ları ayarla - bu fonksiyon ayrı olarak da çağrılabilir
function setupChatInputListeners() {
const widgetContainer = document.getElementById('kayra-chatbot-widget');
if (!widgetContainer) return;
const chatInput = widgetContainer.querySelector('.kayra-chat-input');
const sendButton = widgetContainer.querySelector('.kayra-send-button');
const messagesContainer = widgetContainer.querySelector('.kayra-chat-messages');
if (!chatInput || !sendButton) {
console.log('Chat input veya send button bulunamadı');
return; // Henüz elementler hazır değilse çık
}
console.log('Chat input listener\'ları ayarlanıyor...');
// Önceki event listener'ları temizlemek için klonları oluştur ve değiştir
const newChatInput = chatInput.cloneNode(true);
const newSendButton = sendButton.cloneNode(true);
chatInput.parentNode.replaceChild(newChatInput, chatInput);
sendButton.parentNode.replaceChild(newSendButton, sendButton);
// Mesaj gönderme (buton)
newSendButton.addEventListener('click', () => {
console.log('Send button tıklandı');
sendMessage(newChatInput, messagesContainer);
});
// Mesaj gönderme (enter tuşu)
newChatInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
console.log('Enter tuşu basıldı');
e.preventDefault();
sendMessage(newChatInput, messagesContainer);
}
// Textarea yüksekliğini içeriğe göre ayarla
setTimeout(() => {
newChatInput.style.height = 'auto';
newChatInput.style.height = `${Math.min(newChatInput.scrollHeight, 120)}px`;
}, 0);
});
// İlk odaklanma
if (isWidgetOpen) {
setTimeout(() => {
newChatInput.focus();
}, 300);
}
}
// Mesaj gönderme fonksiyonu
function sendMessage(chatInput, messagesContainer) {
const message = chatInput.value.trim();
if (!message) return;
// Log ekle
console.log('Mesaj gönderiliyor:', message);
// Kullanıcı mesajını ekle
addMessage(message, 'user');
// Input'u temizle
chatInput.value = '';
chatInput.style.height = 'auto';
// Son aktivite zamanını güncelle
updateLastActivity();
// Bottan yanıt iste
getBotResponse(message);
}
// Mesaj ekle
function addMessage(message, sender) {
if (!message) return;
const widgetContainer = document.getElementById('kayra-chatbot-widget');
if (!widgetContainer) return;
const messagesContainer = widgetContainer.querySelector('.kayra-chat-messages');
if (!messagesContainer) return;
// Mesaj geçmişini güncelle
messageHistory.push({ sender, message });
// Mesaj geçmişini localStorage'a kaydet
saveChatHistory();
// Kullanıcı adını al (varsa)
const userInfo = getUserInfo();
const userName = (userInfo && userInfo.name) ? userInfo.name : t('you');
// Mesaj elementi oluştur
const messageElement = document.createElement('div');
messageElement.className = `kayra-message kayra-${sender}-message`;
if (sender === 'bot') {
messageElement.innerHTML = `
${widgetConfig.bot_name || 'Chat Bot'}
${message}
`;
// Bot mesajı içindeki bağlantıları aktif hale getir
const messageContent = messageElement.querySelector('.kayra-message-content');
// HTML içeriği olduğu gibi kullan, dış etiketleri dokunma
} else {
// Kullanıcı mesajını güvenli bir şekilde işle
const sanitizedMessage = escapeHTML(message);
messageElement.innerHTML = `
${userName}
${sanitizedMessage}
`;
}
// Mesajı ekle
messagesContainer.appendChild(messageElement);
// Otomatik scroll
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
// HTML özel karakterleri escaping
function escapeHTML(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// Bot yanıtı al
async function getBotResponse(userMessage) {
// Yükleniyor göster
const widgetContainer = document.getElementById('kayra-chatbot-widget');
const messagesContainer = widgetContainer.querySelector('.kayra-chat-messages');
const loadingElement = document.createElement('div');
loadingElement.className = 'kayra-message kayra-bot-message kayra-loading';
loadingElement.innerHTML = `
${widgetConfig.bot_name || 'Chat Bot'}
`;
messagesContainer.appendChild(loadingElement);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
try {
// API'dan yanıt al - URL'yi routes/api.php'deki tanımla eşleştiriyoruz
const response = await fetch(`${baseUrl}/api/chatbot-widgets/${widgetId}/chat`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
message: userMessage,
history: messageHistory.slice(-6), // Son 6 mesajı gönder (3 tur)
lang: widgetLang, // Dil bilgisini API'ye gönder
allow_html: true // HTML yanıtları etkinleştir
})
});
if (!response.ok) throw new Error('Bot yanıtı alınamadı');
const data = await response.json();
// Yükleniyor göstergesini kaldır
messagesContainer.removeChild(loadingElement);
// API yanıtını kontrol et
if (!data.success && data.message) {
// API anahtarı ile ilgili hata mesajını kontrol et
if (data.message.toLowerCase().includes('api') &&
(data.message.toLowerCase().includes('key') ||
data.message.toLowerCase().includes('anahtar'))) {
// API anahtarı ile ilgili özel hata mesajı
const apiErrorMsg = widgetLang === 'tr' ?
'Yapay zeka yanıt sistemi yapılandırılmamış. Lütfen site yöneticisi ile iletişime geçin ve Google Gemini API anahtarının tanımlanması gerektiğini belirtin.' :
'AI response system is not configured. Please contact the site administrator and mention that a Google Gemini API key needs to be set up.';
addMessage(apiErrorMsg, 'bot');
} else {
// Diğer API hataları
addMessage(data.message || t('errorMessage'), 'bot');
}
} else {
// Normal yanıt
const botMessage = data.message || t('noResponseError');
addMessage(botMessage, 'bot');
}
// Son aktivite zamanını güncelle
updateLastActivity();
} catch (error) {
console.error('Kayra Chatbot Response Error:', error);
// Yükleniyor göstergesini kaldır
messagesContainer.removeChild(loadingElement);
// Hata mesajı göster
addMessage(t('errorMessage'), 'bot');
// Son aktivite zamanını güncelle
updateLastActivity();
}
}
// Widget'ı başlat
function initWidget() {
console.log('Widget başlatılıyor...');
// Önce CSS yükle
loadStyles();
// Sayfa kapanış olayını dinle
window.addEventListener('beforeunload', handlePageExit);
// Önce sohbet geçmişini yükle - SADECE mesaj geçmişini yüklemek için
console.log('Mesaj geçmişi yükleniyor...');
loadChatHistory();
// Sonra widget yapılandırmasını al ve görüntüle
// is_open kontrolü burada yapılacak
console.log('Widget yapılandırması alınıyor...');
fetchWidgetConfig().then(config => {
if (config) {
console.log('Widget yapılandırması yüklendi, DOM event listener\'ları ayarlanıyor...');
// Event listener'ları ayarla
setTimeout(() => {
const widgetContainer = document.getElementById('kayra-chatbot-widget');
if (widgetContainer) {
setupAllEventListeners();
console.log('Event listener\'lar yüklendi.');
}
}, 500);
} else {
console.error('Widget yapılandırması yüklenemedi, widget görüntülenemeyecek.');
}
})
.catch(error => {
console.error('Widget yapılandırması yüklenirken hata oluştu:', error);
});
}
// Document ready olduğunda başlat
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initWidget);
} else {
initWidget();
}
// Sayfa tamamen yüklendiğinde event listener'ları yeniden ayarla
window.addEventListener('load', () => {
console.log('Sayfa tamamen yüklendi, event listener\'lar yeniden ayarlanıyor...');
setTimeout(() => {
setupAllEventListeners();
}, 1000);
});
// Sohbet geçmişini temizle
function clearChatHistory() {
try {
localStorage.removeItem(STORAGE_KEY_HISTORY);
// Sohbetin sıfırlandığını işaretle
localStorage.setItem(`kayra_chat_reset_${widgetId}`, 'true');
messageHistory = [];
return true;
} catch (error) {
console.error('Sohbet geçmişi temizlenirken hata:', error);
return false;
}
}
// Son aktivite zamanını kaydet ve kontrol et
function updateLastActivity() {
try {
localStorage.setItem(STORAGE_KEY_LAST_ACTIVITY, Date.now().toString());
} catch (error) {
console.error('Son aktivite kaydedilirken hata:', error);
}
}
function checkSessionTimeout() {
try {
const lastActivity = localStorage.getItem(STORAGE_KEY_LAST_ACTIVITY);
if (lastActivity) {
const lastActiveTime = parseInt(lastActivity, 10);
const currentTime = Date.now();
const minutesPassed = (currentTime - lastActiveTime) / (1000 * 60);
if (minutesPassed > CHAT_TIMEOUT_MINUTES) {
// Oturum zaman aşımına uğradı, sohbeti temizle
clearChatHistory();
return true; // Zaman aşımı oldu
}
}
return false; // Zaman aşımı olmadı
} catch (error) {
console.error('Oturum zaman aşımı kontrolü sırasında hata:', error);
return false;
}
}
// Sayfa kapanma olayını kaydet
function handlePageExit() {
try {
localStorage.setItem(STORAGE_KEY_LAST_EXIT, Date.now().toString());
} catch (error) {
console.error('Sayfa çıkış zamanı kaydedilirken hata:', error);
}
}
// Sayfa açılma olayını kontrol et, uzun süre kapalı kaldıysa sohbeti temizle
function checkPageReentry() {
try {
const lastExit = localStorage.getItem(STORAGE_KEY_LAST_EXIT);
if (lastExit) {
const lastExitTime = parseInt(lastExit, 10);
const currentTime = Date.now();
const minutesPassed = (currentTime - lastExitTime) / (1000 * 60);
if (minutesPassed > CHAT_TIMEOUT_MINUTES) {
// Sayfa uzun süre kapalı kalmış, sohbeti temizle
console.log(`Sayfa ${minutesPassed.toFixed(2)} dakika kapalı kaldı. Sohbet temizleniyor.`);
clearChatHistory();
return true; // Zaman aşımı oldu
} else {
console.log(`Sayfa ${minutesPassed.toFixed(2)} dakika kapalı kaldı. Sohbet korunuyor.`);
}
}
return false; // Zaman aşımı olmadı
} catch (error) {
console.error('Sayfa yeniden giriş kontrolü sırasında hata:', error);
return false;
}
}
// Konuşmayı tamamlandı olarak işaretle
function markConversationAsCompleted() {
localStorage.setItem(`kayra_chat_completed_${widgetId}`, 'true');
// Hemen sunucuya gönder
if (messageHistory.length > 0) {
saveConversationToServer();
}
}
})();