Alarko Carrier
Çağrı Merkezi Asistanı

Çalışma Mantığı Dokümantasyonu

Google Gemini AI Destekli Asistan

🤖 💬

Başlamak için "İleri" butonuna basın.

Genel Bakış

Bu kod, Alarko Carrier çağrı merkezi çalışanları için AI destekli bir asistandır. Çalışanlar müşterilerle telefonda konuşurken, müşterinin sorusunu bu araca yazıyor ve yapay zeka (Google Gemini AI) anlık olarak yanıt hazırlıyor.

Nasıl Çalışır?

  1. Çalışan web sitesinde bir sayfaya giriyor (örn: kombi hata kodları sayfası).
  2. CTRL + Shift + A tuşlanarak sohbet seçeneği aktif hale getirilir.
  3. Ekranın sağ alt köşesinde bir buton belirir.
  4. Butona tıklayınca bir sohbet penceresi açılır.
  5. Çalışan müşterinin sorusunu yazar.
  6. AI, o sayfadaki bilgileri ve teknik bilgi bankasını kullanarak yanıt hazırlar.
  7. Çalışan bu yanıtı müşteriye söyler.

Kodun Yapısı

Kod 7 ana bölümden oluşuyor:

1. YAPILANDIRMA (Configuration)
   ├── API ayarları
   └── Global değişkenler

2. GÖRSEL TASARIM (CSS Styles)
   ├── Renk şeması
   └── Buton ve pencere tasarımları

3. YARDIMCI FONKSİYONLAR (Helper Functions)
   ├── Sayfa içeriğini okuma
   └── Metin formatlama

4. ARAYÜZ OLUŞTURMA (UI Creation)
   ├── Sohbet penceresi
   └── Mesaj gösterme

5. YAPAY ZEKA İLETİŞİMİ (AI Communication)
   ├── Soru gönderme
   └── Yanıt alma

6. GÜVENLİK ÖNLEMLERİ (Security)
   ├── XSS koruması
   └── Rate limiting

7. BAŞLATMA (Initialization)
   └── Kodun çalışmaya başlaması

1. YAPILANDIRMA BÖLÜMÜ

Global Değişkenler

let typingTimeout = null;
let lastRequestTime = 0;
const MIN_REQUEST_INTERVAL = 2000;

Ne işe yarıyor?

Neden var?

API Yapılandırması

const GEMINI_API_KEY = "AIzaSy...";
const GEMINI_MODEL = "gemini-2.0-flash-exp";
const GEMINI_URL = `https://generativelanguage.googleapis.com/...`;

Ne işe yarıyor?

Örnek:
Tıpkı bir postaneye mektup gönderirken:

2. GÖRSEL TASARIM BÖLÜMÜ (CSS)

Renk Şeması

:root {
    --alarko-blue: #E56B59;
    --bg-primary: #ffffff;
    --text-primary: #1a1a1a;
}

Ne işe yarıyor?
Tüm renkler burada tanımlı. Böylece bir rengi değiştirmek istersen sadece buradan değiştirirsin.

Animasyonlar

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

Ne işe yarıyor?
Sohbet penceresi açılırken yukarı kayarak ve belirerek açılır. Daha yumuşak görünüm sağlar.

Örnek:
Tıpkı bir sahne perdesinin yavaşça açılması gibi.

3. YARDIMCI FONKSİYONLAR

extractPageContent() - Sayfa İçeriğini Toplama

function extractPageContent() {
    const bodyText = document.body?.innerText || '';
    const productData = {
        title: document.title || 'Başlıksız Sayfa',
        url: window.location.href,
        h1: document.querySelector('h1')?.textContent?.trim() || '',
        prices: [],
        features: [],
        specs: []
    };
    // ... devamı
}

Ne işe yarıyor?
Web sayfasındaki tüm bilgileri topluyor:

Nasıl Çalışıyor?

  1. Başlık Toplama: Sayfadaki ilk büyük başlığı buluyor ve alıyor.
  2. Fiyat Bulma: “12.500 TL” veya “15.000₺” gibi yazıları tespit ediyor.
  3. Özellik Ayırma: Eğer yazıda : varsa → Teknik özellik (örn: “BTU: 12000”), Yoksa → Genel özellik (örn: “Sessiz çalışma”).

Örnek:
Bir kitaptaki önemli bilgileri işaretleyici kalemle işaretlemek gibi. AI’ye “bak, bu sayfada bunlar var” demiş oluyorsun.

formatMessage() - Mesaj Formatlama

function formatMessage(content) {
    content = content
        .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
        .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
        // XSS koruması...
}

Ne işe yarıyor?
AI’den gelen metni güzel bir HTML formatına dönüştürüyor.

Örnek Dönüşüm:
Girdi: "**Dikkat:** Kombi basıncı düşük"
Çıktı: "Dikkat: Kombi basıncı düşük"

Güvenlik Önlemi:
<script> gibi tehlikeli kodları temizliyor. Biri kötü amaçlı kod enjekte etmeye çalışırsa engelleniyor.

4. ARAYÜZ OLUŞTURMA FONKSİYONLARI

createAssistantInterface() - Ana Pencereyi Oluşturma

function createAssistantInterface() {
    const assistantButton = document.createElement('button');
    assistantButton.id = 'alarko-assistant-button';
    assistantButton.innerHTML = SVG_ICONS.assistant;
    assistantButton.onclick = toggleAssistant;
    // ...
}

Ne Yapıyor?

  1. Sağ altta yuvarlak buton oluşturuyor: Simge: 💬 (mesaj balonu), Renk: Alarko mavisi, Konum: Sağ alt köşe.
  2. Sohbet penceresi oluşturuyor: Başlık: “AI Yanıt Asistanı”, Mesaj alanı, Yazma kutusu, Gönder butonu.

Örnek:
Tıpkı WhatsApp’te bir sohbet penceresi açmak gibi. Sadece bu pencere AI ile konuşmak için.

addMessage() - Mesaj Ekleme

function addMessage(type, content, showCopyButton = false) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `alarko-message alarko-${type}-message`;
    // ...
}

Ne Yapıyor?
İki tip mesaj var:

  1. Çalışan Mesajı (mavi baloncuk, sağda)
  2. AI Mesajı (beyaz baloncuk, solda)

Her mesajda: Etiket (“MÜŞTERİ SORUSU” veya “VERİLECEK YANIT”), İçerik, Kopyala butonu (sadece AI yanıtlarında).

addMessageWithTyping() - Yazma Animasyonu

async function addMessageWithTyping(content) {
    // Karakterleri tek tek yazdırma
    function typeNextChar() {
        if (!isTyping || currentIndex >= nodes.length) return;
        // ... her karakteri sırayla ekle
        setTimeout(typeNextChar, delay);
    }
}

Ne Yapıyor?
AI’nin yanıtını sanki biri yazıyormuş gibi harf harf ekrana yazıyor.

Özel Özellikler:

Neden Var?
İnsan gibi görünmesi için. Anında tüm mesaj belirseydi robotik görünürdü.

Örnek:
Birinin WhatsApp’te mesaj yazarken “yazıyor…” durumunu görmek gibi.

5. YAPAY ZEKA İLETİŞİMİ

buildSystemPrompt() - AI Talimatlarını Hazırlama

function buildSystemPrompt(pageContent) {
    return `Sen Alarko Carrier çağrı merkezi için UZMAN teknik destek AI asistanısın.

🚨 KRİTİK BAĞLAM:
- Müşteri ŞU ANDA 444 0 128'İ ARAMIŞ DURUMDA
- Bu yanıt temsilci tarafından müşteriye DOĞRUDAN söylenecek

🚫 ASLA YAPMA:
❌ "444 0 128'i arayabilirsiniz" - ZATEN ARAMIŞLAR!
...`;
}

Ne İşe Yarıyor?
AI’ye “kim olduğunu” ve “nasıl davranması gerektiğini” söylüyor.

İçindekiler:

  1. Rol Tanımı: “Sen çağrı merkezi asistanısın”, “Müşteri zaten aramış durumda”.
  2. Yasak İfadeler: “Bizi arayın” gibi saçma yanıtlar vermesin (Müşteri zaten aramış!).
  3. Teknik Bilgi Bankası: Tüm hata kodları ve çözümleri buraya yazılmış.
  4. Sayfa Bilgileri: Hangi üründe olduğumuz, Fiyat bilgileri, Teknik özellikler.

Örnek:
Bir çalışana iş başında verilen talimatname gibi. “Bu şekilde konuş, bu şekilde konuşma” diye her şey yazılı.

5. YAPAY ZEKA İLETİŞİMİ (Devam)

sendQuestion() - Soruyu Gönderme

async function sendQuestion() {
    const now = Date.now();
    if (now - lastRequestTime < MIN_REQUEST_INTERVAL) {
        alert(`Lütfen ${remainingTime} saniye bekleyin...`);
        return;
    }
    // ...
}

Adım Adım Çalışma:

  1. Rate Limiting Kontrolü: Çok hızlı soru sorulmasını engelliyor. 2 saniye bekletir.
  2. Soruyu Gösterme: Çalışanın yazdığı soruyu mavi baloncukta gösteriyor.
  3. Loading Göstergesi: “Yanıt hazırlanıyor…” yazısı ve nokta animasyonu gösteriyor.
  4. Sayfa İçeriğini Toplama: Hem sayfa bilgilerini, hem de AI talimatlarını hazırlıyor.
  5. API’ye Gönderme: Payload ile tüm bilgiyi Google Gemini API'ye gönderiyor.

API Parametreleri Ne Anlama Geliyor?

Örnek:
Bir arkadaşına WhatsApp’ten mesaj atıyorsun: Mesajı yazıyorsun, “Gönder”e basıyorsun, Karşı taraftan yanıt bekliyorsun, Yanıt gelince ekranda görüyorsun.

5. YAPAY ZEKA İLETİŞİMİ (Son)

sendQuestion() - Soruyu Gönderme (Devam)

Yanıtı Alma ve Gösterme:

const data = await response.json();
let aiText = data.candidates[0].content.parts[0].text;
await addMessageWithTyping(aiText);

AI’nin yanıtını alıp yazma animasyonuyla gösteriyor.

Hata Yönetimi:

catch (error) {
    if (error.name === 'AbortError') {
        errorMessage = 'İstek zaman aşımına uğradı';
    } else if (error.message.includes('HTTP 429')) {
        errorMessage = 'API limiti aşıldı';
    }
    // ...
}

Olası Hatalar:

6. GÜVENLİK ÖNLEMLERİ

XSS (Cross-Site Scripting) Koruması

content = content
    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
    .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
    .replace(/on\w+\s*=\s*["'][^"']*["']/gi, '')
    .replace(/javascript:/gi, '');

Ne Yapıyor?
Kötü niyetli kodları temizliyor:

Neden Önemli?
Birisi AI’ye “çalışanın bilgisayarını hackle” gibi bir kod göndermeye çalışırsa engelleniyor.

Rate Limiting (İstek Sınırlama)

const MIN_REQUEST_INTERVAL = 2000; // 2 saniye
if (now - lastRequestTime < MIN_REQUEST_INTERVAL) {
    alert('Lütfen 2 saniye bekleyin...');
    return;
}

Ne Yapıyor?
Saniyede 100 soru sorulmasını engelliyor. API maliyetini ve sunucu yükünü kontrol altında tutuyor.

Timeout Kontrolü

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 30000);

Ne Yapıyor?
Eğer AI 30 saniyede yanıt vermezse isteği iptal ediyor. Sonsuz beklemeyi engelliyor.

7. BAŞLATMA VE ÇALIŞMA AKIŞI

init() - Kodun Başlatılması

function init() {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            addStyles();
            createAssistantInterface();
        });
    } else {
        addStyles();
        createAssistantInterface();
    }
}

Ne Yapıyor?

  1. Sayfa yüklenmiş mi kontrol ediyor.
  2. Yüklendiyse hemen başlatıyor.
  3. Yüklenmemişse sayfanın yüklenmesini bekliyor.

Örnek:
Bir mağazanın açılışı gibi: Eğer hâlâ temizleniyorsa → Temizlik bitene kadar bekle, Temizlik bittiyse → Hemen kapıyı açabilirsin.

Çalışma Mantığı - Baştan Sona Akış

Senaryo: Bir müşteri “E04 hatası” soruyor

1. Sayfa Açılıyor

Çalışan → Alarko web sitesinde Alarko Kombi Arıza Kodları sayfasına giriyor
         ↓
Kod     → CTRL + Shift + A tuşlanınca çalışmaya başlıyor
         ↓
Ekran   → Sağ altta 💬 butonu beliriyor

2. Asistan Açılıyor

Çalışan → 💬 butonuna tıklıyor
         ↓
Kod     → toggleAssistant() fonksiyonu çağrılıyor
         ↓
Ekran   → Sohbet penceresi kayarak açılıyor

3. Sayfa Bilgileri Toplaniyor

Kod → extractPageContent() çalışıyor
     ↓
     - Başlık: "Alarko Kombi Arıza Kodları"

4. Soru Yazılıyor

Çalışan → "E04 hatası ne demek?" yazıyor
         ↓
Kod     → Input'taki metin alınıyor

Çalışma Mantığı - Baştan Sona Akış (Devam)

5. Mesaj Gönderiliyor

Kod → sendQuestion() çalışıyor
     ↓
     1. Rate limiting kontrolü (2 saniye geçmiş mi?)
     2. Soruyu mavi baloncukta göster
     3. "Yanıt hazırlanıyor..." yazısını göster
     4. Sayfa içeriğini topla
     5. AI talimatlarını hazırla

6. AI’ye İstek Atılıyor

Kod → fetch(GEMINI_URL, payload)
     ↓
     Payload içeriği:
     - Sistem talimatları (kim olduğu, nasıl davranacağı)
     - Sayfa bilgileri (kombi özellikleri)
     - Teknik bilgi bankası (hata kodları)
     - Müşteri sorusu ("E04 hatası ne demek?")

7. AI Yanıt Veriyor

Gemini API → JSON yanıtı gönderiyor
            ↓
Kod        → Yanıtı parse ediyor
            ↓
Yanıt      → "E04 hatası kombi basıncının çok düşük olduğunu gösterir.
              Müşterinin yapması gerekenler:
              1. Kombinin altındaki basınç göstergesine bakın
              2. Su doldurma musluğunu açarak basıncı 1.5 bara getirin
              3. Reset tuşuna 2-3 saniye basın..."

8. Yanıt Yazılıyor (Typing Animation)

Kod → addMessageWithTyping(aiText)
     ↓
     Harf harf ekrana yazılıyor:
     "E" → "E0" → "E04" → "E04 " → "E04 h" ...
     ↓
     Noktalarda duraklanıyor
     Virgüllerde kısa duraklama

Çalışma Mantığı - Baştan Sona Akış (Son)

9. Kopyalama

Çalışan → "Kopyala" butonuna tıklıyor
         ↓
Kod     → navigator.clipboard.writeText(text)
         ↓
Ekran   → "✓ Kopyalandı" yazısı 2 saniye gösteriliyor

10. Yeni Soru

Çalışan → "Yeni Görüşme" butonuna tıklıyor
         ↓
Kod     → startNewConversation()
         ↓
Ekran   → Tüm mesajlar siliniyor, sıfır başlanıyor

Özet: Bu Kod Ne Yapıyor?

Basit Açıklama:
Bu kod, çağrı merkezi çalışanlarının işini kolaylaştıran bir “akıllı asistan”. Çalışan müşteriye ne söyleyeceğini bilmediğinde, müşterinin sorusunu bu araca yazıyor. Arka planda yapay zeka:

  1. Hangi sayfada olduğunu anlıyor.
  2. O sayfadaki bilgileri okuyor.
  3. Kendi hafızasındaki teknik bilgi bankasını kontrol ediyor.
  4. Müşteriye söylenecek mükemmel bir yanıt hazırlıyor.
  5. Bu yanıtı insan gibi yavaş yavaş yazıyor.

Sonuç olarak çalışan, AI’nin hazırladığı yanıtı müşteriye söylüyor. Hem hızlı, hem doğru, hem profesyonel!

Teknik Terimler Sözlüğü