Web Chat API Entegrasyonu

POST {WEBHOOK_URL}
GET  {WEBHOOK_URL}?session_id={SESSION_ID}

Örnek:
POST https://www.upgunai.com/api/webhooks/webchat/3f7c1a92-5b84-4e0d-9a16-2c8ef0b7d431

// Kullanıcının seçtiği dosyayı base64'e çevir
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];

const reader = new FileReader();
reader.onload = async () => {
  const base64Data = reader.result; // "data:image/jpeg;base64,/9j/4AAQ..."
  
  const response = await fetch(WEBHOOK_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      session_id: sessionId,
      message: base64Data,        // Base64 data URL
      visitor_name: "Ahmet Yılmaz"
    })
  });
  
  const data = await response.json();
  // data.output → AI'ın görsel hakkındaki yanıtı
};
reader.readAsDataURL(file);

curl -X GET \
  "WEBHOOK_URL_BURAYA?session_id=visitor_abc123"

// UppyPro ekibinden aldığınız Webhook URL
const WEBHOOK_URL = "https://www.upgunai.com/api/webhooks/webchat/3f7c1a92-5b84-4e0d-9a16-2c8ef0b7d431";

// Ekrana basılmış bot mesajlarının imzaları — POST yanıtı ile polling çakışmasın
const shownBotMessages = new Set();
let lastMessageCount = 0;
let primed = false;

// Bot mesajlarını HER ZAMAN bu fonksiyondan geçirin (hem POST yanıtı hem polling)
function showBotMessage(text, mediaUrl) {
  const signature = (mediaUrl || text || "").slice(0, 80);
  if (!signature || shownBotMessages.has(signature)) return;   // ← 2) İMZA KONTROLÜ
  shownBotMessages.add(signature);
  displayMessage(text, "bot", mediaUrl);   // kendi render fonksiyonunuz
}

async function pollMessages() {
  if (!isChatOpen()) return;   // kapalı pencerede sorgu yapmayın
  try {
    const res = await fetch(
      `${WEBHOOK_URL}?session_id=${encodeURIComponent(sessionId)}`
    );
    const data = await res.json();
    if (!data.success || !data.messages) return;

    // ← 1) İLK TURDA HİZALAMA: sayacı ayarla, hiçbir şey basma
    if (!primed) {
      lastMessageCount = data.messages.length;
      primed = true;
      return;
    }

    if (data.messages.length > lastMessageCount) {
      data.messages.slice(lastMessageCount).forEach(m => {
        if (m.role !== "assistant") return;
        const media = m.message_type === "image" ? m.media_url : null;
        showBotMessage(m.text, media);
      });
      lastMessageCount = data.messages.length;
    }
  } catch (err) {
    // Ağ hatasında sessizce geç — 3 saniye sonraki tur zaten yeniden deneyecek
  }
}

// KOŞULSUZ başlat. mode "ai" iken de temsilci araya girebilir.
setInterval(pollMessages, 3000);

// POST tarafı da aynı fonksiyonu kullanmalı ki polling aynı mesajı tekrar basmasın
async function sendMessage(text) {
  const res = await fetch(WEBHOOK_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ session_id: sessionId, message: text })
  });
  const data = await res.json();

  showBotMessage(data.output);
  (data.images || []).forEach(img => showBotMessage(img.caption, img.url));
}

<!-- UppyPro Web Chat Widget -->
<style>
  #uppy-toggle{position:fixed;bottom:20px;right:20px;width:60px;height:60px;border:none;
    border-radius:50%;background:#f97316;cursor:pointer;z-index:9999;
    box-shadow:0 4px 12px rgba(249,115,22,.4);display:flex;align-items:center;justify-content:center}

  /* Kutu VARSAYILAN OLARAK GİZLİ. Görünürlük TEK bir yerden yönetilir: .is-open
     Aynı style özniteliğine iki kez display yazmayın — sonuncusu kazanır. */
  #uppy-box{display:none;position:fixed;bottom:90px;right:20px;
    width:min(380px,calc(100vw - 40px));height:min(520px,calc(100vh - 140px));
    background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.15);z-index:9999;
    flex-direction:column;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  #uppy-box.is-open{display:flex}

  #uppy-head{background:#f97316;color:#fff;padding:16px;display:flex;align-items:center;gap:10px}
  #uppy-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:#f8fafc}
  #uppy-foot{padding:12px;border-top:1px solid #e2e8f0;display:flex;gap:8px}
  #uppy-in{flex:1;border:1px solid #e2e8f0;border-radius:24px;padding:10px 16px;font-size:14px;outline:none}
  #uppy-in:disabled{background:#f1f5f9}

  .uppy-b{max-width:80%;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.5;
    word-wrap:break-word;white-space:pre-wrap}
  .uppy-b.me{align-self:flex-end;background:#f97316;color:#fff}
  .uppy-b.bot{align-self:flex-start;background:#fff;color:#1e293b;border:1px solid #e2e8f0}
  .uppy-b img{max-width:100%;border-radius:8px;display:block}

  .uppy-dots span{display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;
    background:#94a3b8;animation:uppy-blink 1.2s infinite}
  .uppy-dots span:nth-child(2){animation-delay:.2s}
  .uppy-dots span:nth-child(3){animation-delay:.4s}
  @keyframes uppy-blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
</style>

<button id="uppy-toggle" aria-label="Sohbeti aç">
  <svg width="28" height="28" fill="white" viewBox="0 0 24 24">
    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
  </svg>
</button>

<div id="uppy-box" role="dialog" aria-label="Canlı sohbet">
  <div id="uppy-head">
    <div style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:50%;
      display:flex;align-items:center;justify-content:center">🤖</div>
    <div>
      <div style="font-weight:700;font-size:14px">AI Asistan</div>
      <div style="font-size:11px;opacity:.8">Çevrimiçi</div>
    </div>
    <button id="uppy-close" aria-label="Kapat"
      style="margin-left:auto;background:none;border:none;color:#fff;font-size:20px;cursor:pointer">✕</button>
  </div>

  <div id="uppy-msgs"></div>

  <div id="uppy-foot">
    <input id="uppy-in" type="text" placeholder="Mesajınızı yazın..." autocomplete="off"/>
    <button id="uppy-send" aria-label="Gönder"
      style="background:#f97316;color:#fff;border:none;border-radius:50%;
      width:40px;height:40px;cursor:pointer;font-size:16px">➤</button>
  </div>
</div>

<script>
(function () {
  // ─── KONFİGÜRASYON ───
  var UPPY_URL = "https://www.upgunai.com/api/webhooks/webchat/3f7c1a92-5b84-4e0d-9a16-2c8ef0b7d431";
  var VISITOR_NAME = "";   // biliyorsanız doldurun; boşsa panelde "Web Ziyaretçisi" görünür

  var box     = document.getElementById("uppy-box");
  var msgs    = document.getElementById("uppy-msgs");
  var input   = document.getElementById("uppy-in");
  var sendBtn = document.getElementById("uppy-send");

  // Oturum kimliği — aynı tarayıcıda konuşma kaldığı yerden devam eder
  var SESSION = localStorage.getItem("uppy_sid");
  if (!SESSION) {
    SESSION = "w_" + Date.now() + "_" + Math.random().toString(36).slice(2, 8);
    localStorage.setItem("uppy_sid", SESSION);
  }

  var busy = false, primed = false, lastCount = 0;
  var shown = new Set();   // ekrana basılmış bot mesajlarının imzaları

  // ─── Metin render: ÖNCE HTML kaç, SONRA izin verilen biçimleri aç ───
  // Sıra ters olursa sohbete yazılan HTML sayfanızda çalışır (XSS).
  function render(raw) {
    var safe = String(raw || "")
      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    return safe
      .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
      .replace(/~~(.+?)~~/g, "<del>$1</del>")
      .replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener">$1</a>');
  }

  function bubble(html, who) {
    var b = document.createElement("div");
    b.className = "uppy-b " + who;
    if (html) b.innerHTML = html;
    msgs.appendChild(b);
    msgs.scrollTop = msgs.scrollHeight;
    return b;
  }

  function addMe(text) { bubble(render(text), "me"); }

  // TÜM bot mesajları buradan geçer → POST yanıtı ile polling asla çakışmaz
  function addBot(text, mediaUrl) {
    var sig = (mediaUrl || text || "").slice(0, 80);
    if (!sig || shown.has(sig)) return;
    shown.add(sig);

    var b = bubble("", "bot");
    if (mediaUrl) {
      var img = document.createElement("img");
      img.src = mediaUrl;                       // öznitelik enjeksiyonuna kapalı
      img.alt = text || "Paylaşılan görsel";
      b.appendChild(img);
    }
    if (text) {
      var d = document.createElement("div");
      d.innerHTML = render(text);
      b.appendChild(d);
    }
  }

  // ─── "Yazıyor…" göstergesi + giriş kilidi ───
  var typingEl = null;
  function typing(on) {
    if (on && !typingEl) {
      typingEl = bubble('<span class="uppy-dots"><span></span><span></span><span></span></span>', "bot");
    } else if (!on && typingEl) {
      typingEl.remove();
      typingEl = null;
    }
  }
  function setBusy(v) {
    busy = v;
    input.disabled = v;
    sendBtn.disabled = v;
    if (!v) input.focus();
  }

  // ─── Mesaj gönder ───
  async function send() {
    var text = input.value.trim();
    if (!text || busy) return;

    input.value = "";
    addMe(text);
    setBusy(true);
    typing(true);

    // AI yanıtı tipik olarak 3-15 sn sürer; 30 sn'de üst sınır koyuyoruz
    var ctrl = new AbortController();
    var timer = setTimeout(function () { ctrl.abort(); }, 30000);

    try {
      var res = await fetch(UPPY_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          session_id: SESSION,
          message: text,
          visitor_name: VISITOR_NAME || undefined
        }),
        signal: ctrl.signal
      });

      // 413 / 504 gibi durumlarda gövde JSON olmayabilir — patlamasın
      var data = await res.json().catch(function () { return null; });
      typing(false);

      if (data && data.output) {
        addBot(data.output);
        (data.images || []).forEach(function (img) { addBot(img.caption, img.url); });
      } else {
        addBot("Mesajınızı şu anda iletemedik. Lütfen biraz sonra tekrar deneyin.");
      }
    } catch (e) {
      typing(false);
      addBot("Bağlantı hatası. Lütfen tekrar deneyin.");
    } finally {
      clearTimeout(timer);
      setBusy(false);
    }
  }

  // ─── Geçmişi yükle (pencere açılırken) ve polling sayacını hizala ───
  async function loadHistory() {
    try {
      var res = await fetch(UPPY_URL + "?session_id=" + encodeURIComponent(SESSION));
      var data = await res.json();
      if (!data.success || !data.messages) return;

      msgs.innerHTML = "";
      shown.clear();
      data.messages.forEach(function (m) {
        var media = m.message_type === "image" ? m.media_url : null;
        if (m.role === "user") addMe(m.text);
        else addBot(m.text, media);
      });

      lastCount = data.messages.length;   // ← sayacı hizala
      primed = true;
    } catch (e) { /* sessizce geç */ }
  }

  // ─── Polling: temsilcinin panelden yazdığı yanıtlar YALNIZCA bu yolla gelir ───
  async function poll() {
    if (!box.classList.contains("is-open")) return;
    try {
      var res = await fetch(UPPY_URL + "?session_id=" + encodeURIComponent(SESSION));
      var data = await res.json();
      if (!data.success || !data.messages) return;

      // İlk tur: sayacı ayarla, hiçbir şey basma
      if (!primed) { lastCount = data.messages.length; primed = true; return; }

      if (data.messages.length > lastCount) {
        data.messages.slice(lastCount).forEach(function (m) {
          if (m.role !== "assistant") return;
          addBot(m.text, m.message_type === "image" ? m.media_url : null);
        });
        lastCount = data.messages.length;
      }
    } catch (e) { /* sessizce geç — 3 sn sonra tekrar denenecek */ }
  }
  setInterval(poll, 3000);   // KOŞULSUZ — mode değerine bakmıyoruz

  // ─── Aç / kapat ───
  function toggle(open) {
    box.classList.toggle("is-open", open);
    if (open) { loadHistory(); input.focus(); }
  }
  document.getElementById("uppy-toggle").onclick = function () {
    toggle(!box.classList.contains("is-open"));
  };
  document.getElementById("uppy-close").onclick = function () { toggle(false); };

  sendBtn.onclick = send;
  input.addEventListener("keydown", function (e) {
    if (e.key === "Enter") { e.preventDefault(); send(); }
  });
})();
</script>