AI Chat - Groq

Halo 👋
Saya AI Assistant.

Silakan kirim pertanyaan Anda.

AI sedang mengetik...

// =============================== // KONFIGURASI // =============================== const API_KEY = "MASUKKAN_API_KEY_GROQ_KAMU"; const MODEL = "llama-3.3-70b-versatile"; const chat = document.getElementById("chat"); const prompt = document.getElementById("prompt"); const send = document.getElementById("send"); const typing = document.getElementById("typing"); const newChat = document.querySelector(".new-chat"); const historyBox = document.querySelector(".chat-history"); // =============================== // SCROLL OTOMATIS // =============================== function scrollBottom(){ chat.scrollTop = chat.scrollHeight; } // =============================== // TAMBAH CHAT // =============================== function addMessage(text, type){ const div = document.createElement("div"); div.className = "message " + type; div.innerHTML = text.replace(/\n/g,"
"); chat.appendChild(div); scrollBottom(); } // =============================== // LOADING // =============================== function showTyping(){ typing.style.display = "block"; scrollBottom(); } function hideTyping(){ typing.style.display = "none"; } // =============================== // SIMPAN CHAT // =============================== function saveChat(){ localStorage.setItem( "groq_chat", chat.innerHTML ); } function loadChat(){ const data = localStorage.getItem("groq_chat"); if(data){ chat.innerHTML = data; } } loadChat(); // =============================== // CHAT BARU // =============================== newChat.onclick = ()=>{ if(confirm("Hapus percakapan?")){ chat.innerHTML = `

Halo 👋

Ada yang bisa saya bantu?

`; localStorage.removeItem("groq_chat"); } }; // =============================== // ENTER // =============================== prompt.addEventListener("keydown",(e)=>{ if(e.key==="Enter"){ send.click(); } }); // =============================== // RIWAYAT SEDERHANA // =============================== function addHistory(title){ const item = document.createElement("div"); item.className="history-item"; item.innerText=title; historyBox.prepend(item); } // =============================== // KIRIM PESAN KE GROQ // =============================== async function sendMessage(){ const text = prompt.value.trim(); if(text === "") return; addMessage(text,"user"); saveChat(); prompt.value=""; showTyping(); try{ const response = await fetch( "https://api.groq.com/openai/v1/chat/completions", { method:"POST", headers:{ "Content-Type":"application/json", "Authorization":"Bearer "+API_KEY }, body:JSON.stringify({ model:MODEL, messages:[ { role:"user", content:text } ] }) } ); hideTyping(); if(!response.ok){ const err = await response.json(); addMessage( "❌ Error : " + (err.error?.message || "Terjadi kesalahan."), "ai" ); return; } const data = await response.json(); const reply = data.choices[0].message.content; addMessage(reply,"ai"); saveChat(); addHistory( text.substring(0,25) ); }catch(error){ hideTyping(); addMessage( "❌ Tidak dapat terhubung ke server Groq.", "ai" ); console.error(error); } } // =============================== // TOMBOL KIRIM // =============================== send.addEventListener( "click", sendMessage ); // =============================== // FITUR AKHIR // =============================== // Fokus ke kolom input saat halaman dibuka window.onload = () => { prompt.focus(); scrollBottom(); }; // Nonaktifkan tombol saat mengirim async function sendMessageWrapper(){ send.disabled = true; send.innerHTML = "⏳"; await sendMessage(); send.disabled = false; send.innerHTML = "➤"; prompt.focus(); } // Ganti event tombol kirim send.removeEventListener("click", sendMessage); send.addEventListener("click", sendMessageWrapper); // Enter untuk kirim prompt.addEventListener("keydown",(e)=>{ if(e.key==="Enter" && !e.shiftKey){ e.preventDefault(); sendMessageWrapper(); } }); // Auto resize tinggi input prompt.addEventListener("input",()=>{ prompt.style.height="50px"; prompt.style.height=prompt.scrollHeight+"px"; }); // Simpan chat otomatis const observer = new MutationObserver(()=>{ saveChat(); }); observer.observe(chat,{ childList:true, subtree:true }); console.log("✅ AI Chat Groq siap digunakan.");