Create cognito-widget.js

cognito-widget.js

@@ -0,0 +1,116 @@
+// cognito-widget.js
+(function () {
+  if (window.CognitoWidgetInitialized) return;
+  window.CognitoWidgetInitialized = true;
+
+  const CONFIG = {
+    apiBase: window.COGNITO_API_BASE || "https://your-cognito-server.example.com",
+    apiKey: window.COGNITO_API_KEY || null, // optional if you protect endpoint with a key
+    placeholder: "Ask Cognito...",
+    title: "Cognito",
+    welcome: "Hi — I'm Cognito. How can I help?",
+  };
+
+  // minimal CSS
+  const css = `
+  .cognito-chat-btn { position: fixed; right: 20px; bottom: 20px; z-index: 100000; background: #0b5fff; color: #fff; border-radius: 28px; padding: 12px 16px; cursor: pointer; box-shadow: 0 6px 18px rgba(11,95,255,0.2); font-family: Arial, sans-serif; }
+  .cognito-panel { position: fixed; right: 20px; bottom: 80px; width: 360px; max-width: 90vw; z-index: 100000; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); overflow: hidden; font-family: Arial, sans-serif; background: #fff; display: none; flex-direction: column; }
+  .cognito-header { padding: 12px; background: #0b5fff; color: #fff; font-weight: bold; display:flex; align-items:center; justify-content:space-between }
+  .cognito-body { padding: 12px; height: 320px; overflow:auto; background:#f7f7fb }
+  .cognito-input-row { display:flex; padding: 8px; border-top:1px solid #eee; background:#fff }
+  .cognito-input { flex:1; padding:8px 10px; border-radius:8px; border:1px solid #ddd; outline:none }
+  .cognito-send { margin-left:8px; padding:8px 12px; border-radius:8px; border:none; background:#0b5fff; color:#fff; cursor:pointer }
+  .cognito-msg { margin-bottom:8px; padding:8px 10px; border-radius:8px; max-width:85% }
+  .cognito-msg.user { background:#0b5fff; color:#fff; margin-left:auto }
+  .cognito-msg.bot { background:#fff; color:#111; border:1px solid #eee }
+  `;
+
+  const styleEl = document.createElement("style");
+  styleEl.innerHTML = css;
+  document.head.appendChild(styleEl);
+
+  const btn = document.createElement("button");
+  btn.className = "cognito-chat-btn";
+  btn.innerText = CONFIG.title;
+  document.body.appendChild(btn);
+
+  const panel = document.createElement("div");
+  panel.className = "cognito-panel";
+  panel.innerHTML = `
+    <div class="cognito-header">${CONFIG.title} <span style="font-size:12px;opacity:.9">AI assistant</span></div>
+    <div class="cognito-body">
+      <div class="cognito-msg bot">${CONFIG.welcome}</div>
+    </div>
+    <div class="cognito-input-row">
+      <input class="cognito-input" placeholder="${CONFIG.placeholder}" />
+      <button class="cognito-send">Send</button>
+    </div>
+  `;
+  document.body.appendChild(panel);
+
+  btn.addEventListener("click", () => {
+    panel.style.display = panel.style.display === "flex" ? "none" : "flex";
+    panel.style.flexDirection = "column";
+  });
+
+  const bodyEl = panel.querySelector(".cognito-body");
+  const inputEl = panel.querySelector(".cognito-input");
+  const sendBtn = panel.querySelector(".cognito-send");
+
+  function appendMessage(text, who="bot") {
+    const m = document.createElement("div");
+    m.className = "cognito-msg " + (who==="user" ? "user" : "bot");
+    m.innerText = text;
+    bodyEl.appendChild(m);
+    bodyEl.scrollTop = bodyEl.scrollHeight;
+  }
+
+  async function sendMessage(content) {
+    appendMessage(content, "user");
+    inputEl.value = "";
+    const payload = {
+      messages: [
+        {role: "user", content}
+      ]
+    };
+    const headers = {"Content-Type": "application/json"};
+    if (CONFIG.apiKey) headers["x-api-key"] = CONFIG.apiKey;
+    try {
+      const res = await fetch(CONFIG.apiBase + "/chat", {
+        method: "POST",
+        headers,
+        body: JSON.stringify(payload)
+      });
+      if (!res.ok) {
+        const txt = await res.text();
+        appendMessage("Error: " + res.status + " - " + txt, "bot");
+        return;
+      }
+      const data = await res.json();
+      appendMessage(data.reply || JSON.stringify(data), "bot");
+    } catch (err) {
+      appendMessage("Network error: " + err.message, "bot");
+    }
+  }
+
+  sendBtn.addEventListener("click", () => {
+    const v = inputEl.value.trim();
+    if (!v) return;
+    sendMessage(v);
+  });
+
+  inputEl.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      sendBtn.click();
+    }
+  });
+
+  // Expose small API to host page
+  window.CognitoWidget = {
+    open: () => { panel.style.display = "flex"; },
+    close: () => { panel.style.display = "none"; },
+    send: (text) => sendMessage(text),
+    appendSystem: (text) => appendMessage(text, "bot")
+  };
+})();