Web Chat API Entegrasyonu

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

Örnek:
POST https://www.upgunai.com/api/webhooks/webchat/wc_abc123xyz789

// 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"

// Panelden aldığınız Webhook URL
const WEBHOOK_URL = "https://www.upgunai.com/api/webhooks/webchat/wc_XXXXX";

let lastMessageCount = 0;
let pollingInterval = null;

function startPolling(webhookUrl, sessionId) {
  // Her 3 saniyede yeni mesajları kontrol et
  pollingInterval = setInterval(async () => {
    try {
      const res = await fetch(
        `${webhookUrl}?session_id=${sessionId}`
      );
      const data = await res.json();
      
      if (data.success && data.messages.length > lastMessageCount) {
        // Yeni mesajlar var — sadece yeni olanları göster
        const newMessages = data.messages.slice(lastMessageCount);
        newMessages.forEach(msg => {
          if (msg.role === "assistant") {
            displayMessage(msg.text, "bot", msg.media_url);
          }
        });
        lastMessageCount = data.messages.length;
      }
    } catch (err) {
      console.error("Polling error:", err);
    }
  }, 3000);
}

function stopPolling() {
  if (pollingInterval) {
    clearInterval(pollingInterval);
    pollingInterval = null;
  }
}

// POST yanıtında mode "human" ise polling başlat
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();
  
  displayMessage(data.output, "bot");
  
  if (data.mode === "human" && !pollingInterval) {
    startPolling(WEBHOOK_URL, sessionId);
  }
}

<!-- UppyPro Web Chat Widget -->
<div id="uppy-chat-widget">
  <button id="uppy-chat-toggle" onclick="toggleChat()"
    style="position:fixed;bottom:20px;right:20px;width:60px;height:60px;
    border-radius:50%;background:#f97316;border:none;cursor:pointer;
    box-shadow:0 4px 12px rgba(249,115,22,0.4);z-index:9999;
    display:flex;align-items:center;justify-content:center;">
    <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-chat-box" style="display:none;position:fixed;bottom:90px;
    right:20px;width:380px;height:520px;background:white;border-radius:16px;
    box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:9999;
    display:flex;flex-direction:column;overflow:hidden;">
    
    <!-- Header -->
    <div style="background:#f97316;color:white;padding:16px;
      display:flex;align-items:center;gap:10px;">
      <div style="width:36px;height:36px;background:rgba(255,255,255,0.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:0.8;">Çevrimiçi</div>
      </div>
      <button onclick="toggleChat()" style="margin-left:auto;background:none;
        border:none;color:white;font-size:20px;cursor:pointer;">✕</button>
    </div>

    <!-- Messages -->
    <div id="uppy-messages" style="flex:1;overflow-y:auto;padding:16px;
      display:flex;flex-direction:column;gap:8px;background:#f8fafc;"></div>

    <!-- Input -->
    <div style="padding:12px;border-top:1px solid #e2e8f0;display:flex;gap:8px;">
      <input id="uppy-input" type="text" placeholder="Mesajınızı yazın..."
        onkeypress="if(event.key==='Enter')sendMsg()"
        style="flex:1;border:1px solid #e2e8f0;border-radius:24px;
        padding:10px 16px;font-size:14px;outline:none;"/>
      <button onclick="sendMsg()" 
        style="background:#f97316;color:white;border:none;border-radius:50%;
        width:40px;height:40px;cursor:pointer;font-size:16px;">➤</button>
    </div>
  </div>
</div>

<script>
// ─── KONFİGÜRASYON ───
// Panelden aldığınız Webhook URL'yi buraya yapıştırın
const UPPY_URL = "https://www.upgunai.com/api/webhooks/webchat/wc_XXXXX";
const SESSION = localStorage.getItem("uppy_sid") || (() => {
  const id = "w_" + Date.now() + "_" + Math.random().toString(36).slice(2,8);
  localStorage.setItem("uppy_sid", id);
  return id;
})();

let chatOpen = false;

function toggleChat() {
  chatOpen = !chatOpen;
  document.getElementById("uppy-chat-box").style.display = chatOpen ? "flex" : "none";
  if (chatOpen) loadHistory();
}

function addBubble(text, role, mediaUrl) {
  const container = document.getElementById("uppy-messages");
  const bubble = document.createElement("div");
  const isUser = role === "user";
  bubble.style.cssText = `max-width:80%;padding:10px 14px;border-radius:16px;
    font-size:13px;line-height:1.5;word-wrap:break-word;
    align-self:${isUser ? "flex-end" : "flex-start"};
    background:${isUser ? "#f97316" : "white"};
    color:${isUser ? "white" : "#1e293b"};
    border:1px solid ${isUser ? "transparent" : "#e2e8f0"};`;
  
  if (mediaUrl) {
    bubble.innerHTML = `<img src="${mediaUrl}" style="max-width:100%;
      border-radius:8px;margin-bottom:6px;"/><div>${text}</div>`;
  } else {
    bubble.textContent = text;
  }
  
  container.appendChild(bubble);
  container.scrollTop = container.scrollHeight;
}

async function sendMsg() {
  const input = document.getElementById("uppy-input");
  const text = input.value.trim();
  if (!text) return;
  
  input.value = "";
  addBubble(text, "user");
  
  try {
    const res = await fetch(UPPY_URL, {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({ session_id: SESSION, message: text })
    });
    const data = await res.json();
    
    if (data.success) {
      addBubble(data.output, "assistant");
      // Görselleri render et
      (data.images || []).forEach(img => addBubble(img.caption, "assistant", img.url));
    }
  } catch (err) {
    addBubble("Bağlantı hatası. Lütfen tekrar deneyin.", "assistant");
  }
}

async function loadHistory() {
  try {
    const res = await fetch(UPPY_URL + "?session_id=" + SESSION);
    const data = await res.json();
    if (data.success && data.messages.length > 0) {
      document.getElementById("uppy-messages").innerHTML = "";
      data.messages.forEach(m => addBubble(m.text, m.role, m.media_url));
    }
  } catch {}
}
</script>