widget_template.js

(function () {
  // ── Config (di-inject otomatis dari server per klien) ──
  var CLIENT_ID = "{{CLIENT_ID}}";
  var API_URL = "{{API_URL}}";
  var STORE_NAME = "{{STORE_NAME}}";
  var COLOR = "{{ACCENT_COLOR}}";
  var GREETING = "{{GREETING}}";

  var sessionId = null;
  var isOpen = false;
  var isLoading = false;

  // ── CSS (scoped dengan prefix cbw- supaya tidak bentrok) ────────────
  var css = `
    #cbw-btn {
      position: fixed; bottom: 24px; right: 24px; z-index: 99999;
      width: 56px; height: 56px; border-radius: 50%;
      background: ${COLOR}; border: none; cursor: pointer;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    #cbw-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,0.3); }
    #cbw-btn svg { width: 26px; height: 26px; fill: white; }

    #cbw-panel {
      position: fixed; bottom: 92px; right: 24px; z-index: 99998;
      width: 340px; height: 480px; border-radius: 16px;
      background: #fff; box-shadow: 0 8px 40px rgba(0,0,0,0.18);
      display: flex; flex-direction: column; overflow: hidden;
      transform: scale(0.9) translateY(20px); opacity: 0;
      transition: transform 0.25s ease, opacity 0.25s ease;
      pointer-events: none;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    #cbw-panel.cbw-open {
      transform: scale(1) translateY(0); opacity: 1; pointer-events: all;
    }

    #cbw-header {
      background: #1C2B1C; padding: 14px 16px;
      display: flex; align-items: center; gap: 10px;
    }
    #cbw-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: ${COLOR}; display: flex; align-items: center;
      justify-content: center; font-size: 16px; flex-shrink: 0;
    }
    #cbw-header-text { flex: 1; }
    #cbw-header-name { color: #fff; font-size: 14px; font-weight: 600; }
    #cbw-header-status { color: #86efac; font-size: 11px; }
    #cbw-close {
      background: transparent; border: none; cursor: pointer;
      color: rgba(255,255,255,0.6); font-size: 20px; padding: 0; line-height: 1;
    }
    #cbw-close:hover { color: #fff; }

    #cbw-messages {
      flex: 1; overflow-y: auto; padding: 14px;
      display: flex; flex-direction: column; gap: 10px;
      background: #f9fafb;
    }
    #cbw-messages::-webkit-scrollbar { width: 4px; }
    #cbw-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

    .cbw-msg { max-width: 82%; font-size: 13.5px; line-height: 1.5; }
    .cbw-msg-bot {
      background: #fff; border: 1px solid #e5e7eb;
      border-radius: 4px 14px 14px 14px;
      padding: 10px 13px; color: #1f2937;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .cbw-msg-user {
      background: ${COLOR}; color: #fff;
      border-radius: 14px 4px 14px 14px;
      padding: 10px 13px; align-self: flex-end;
    }

    #cbw-typing {
      display: none; align-items: center; gap: 5px;
      padding: 10px 13px;
      background: #fff; border: 1px solid #e5e7eb;
      border-radius: 4px 14px 14px 14px;
      width: fit-content;
    }
    #cbw-typing span {
      width: 7px; height: 7px; border-radius: 50%;
      background: #9ca3af; display: inline-block;
      animation: cbw-bounce 1.2s infinite;
    }
    #cbw-typing span:nth-child(2) { animation-delay: 0.2s; }
    #cbw-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes cbw-bounce {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-5px); }
    }

    #cbw-footer {
      padding: 12px; border-top: 1px solid #e5e7eb;
      display: flex; gap: 8px; background: #fff;
    }
    #cbw-input {
      flex: 1; border: 1px solid #d1d5db; border-radius: 24px;
      padding: 9px 14px; font-size: 13.5px; outline: none;
      font-family: inherit; color: #1f2937;
      transition: border-color 0.2s;
    }
    #cbw-input:focus { border-color: ${COLOR}; }
    #cbw-send {
      width: 38px; height: 38px; border-radius: 50%;
      background: ${COLOR}; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: opacity 0.2s;
    }
    #cbw-send:hover { opacity: 0.85; }
    #cbw-send svg { width: 16px; height: 16px; fill: white; }
    #cbw-send:disabled { opacity: 0.5; cursor: default; }

    @media (max-width: 400px) {
      #cbw-panel { width: calc(100vw - 24px); right: 12px; bottom: 80px; }
      #cbw-btn { right: 12px; bottom: 12px; }
    }
  `;

  // ── Inject CSS ─────────────────────────────────────────────────────
  var styleEl = document.createElement("style");
  styleEl.textContent = css;
  document.head.appendChild(styleEl);

  // ── Inject HTML ────────────────────────────────────────────────────
  var container = document.createElement("div");
  container.innerHTML = `
    <button id="cbw-btn" aria-label="Buka chat">
      <svg viewBox="0 0 24 24"><path d="M20 2H4C2.9 2 2 2.9 2 4v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
    </button>
    <div id="cbw-panel">
      <div id="cbw-header">
        <div id="cbw-avatar">🌿</div>
        <div id="cbw-header-text">
          <div id="cbw-header-name">${STORE_NAME} AI</div>
          <div id="cbw-header-status">● Online sekarang</div>
        </div>
        <button id="cbw-close" aria-label="Tutup">✕</button>
      </div>
      <div id="cbw-messages">
        <div id="cbw-typing"><span></span><span></span><span></span></div>
      </div>
      <div id="cbw-footer">
        <input id="cbw-input" type="text" placeholder="Ketik pesan..." maxlength="500" />
        <button id="cbw-send" aria-label="Kirim">
          <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>
        </button>
      </div>
    </div>
  `;
  document.body.appendChild(container);

  // ── Elemen refs ────────────────────────────────────────────────────
  var btn = document.getElementById("cbw-btn");
  var panel = document.getElementById("cbw-panel");
  var closeBtn = document.getElementById("cbw-close");
  var messagesEl = document.getElementById("cbw-messages");
  var typingEl = document.getElementById("cbw-typing");
  var input = document.getElementById("cbw-input");
  var sendBtn = document.getElementById("cbw-send");

  // ── Fungsi ─────────────────────────────────────────────────────────
  function togglePanel() {
    isOpen = !isOpen;
    panel.classList.toggle("cbw-open", isOpen);
    if (isOpen) {
      input.focus();
      if (messagesEl.children.length === 1) {
        // Hanya ada typing indicator, belum ada pesan — tampilkan greeting
        addMessage(GREETING, "bot");
      }
    }
  }

  function addMessage(text, role) {
    var div = document.createElement("div");
    div.className = "cbw-msg cbw-msg-" + role;
    div.textContent = text;
    messagesEl.insertBefore(div, typingEl);
    messagesEl.scrollTop = messagesEl.scrollHeight;
  }

  function setLoading(val) {
    isLoading = val;
    typingEl.style.display = val ? "flex" : "none";
    sendBtn.disabled = val;
    if (val) messagesEl.scrollTop = messagesEl.scrollHeight;
  }

  async function sendMessage() {
    var text = input.value.trim();
    if (!text || isLoading) return;

    input.value = "";
    addMessage(text, "user");
    setLoading(true);

    try {
      var res = await fetch(API_URL + "/chat/" + CLIENT_ID, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: text, session_id: sessionId })
      });

      if (!res.ok) throw new Error("Server error");

      var data = await res.json();
      sessionId = data.session_id;
      setLoading(false);
      addMessage(data.reply, "bot");
    } catch (err) {
      setLoading(false);
      addMessage("Maaf kak, ada gangguan sebentar. Coba lagi ya 🙏", "bot");
    }
  }

  // ── Event Listeners ────────────────────────────────────────────────
  btn.addEventListener("click", togglePanel);
  closeBtn.addEventListener("click", togglePanel);
  sendBtn.addEventListener("click", sendMessage);
  input.addEventListener("keydown", function (e) {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  });
})();