script.js

const chatsContainer = document.querySelector(".chats-container");
const promptForm = document.querySelector(".prompt-form");
const promptInput = promptForm.querySelector("input"); // fixed
const fileinput = promptForm.querySelector("#file-input");
const fileUploadWrapper = promptForm.querySelector(".file-upload-wrapper");
const themeToggle = document.querySelector("#theme-toggle-btn");


//api setup
const API_KEY = "AIzaSyAsalRw9Ofd2x9jp_zh0UF6roBt9i6M42c";
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${API_KEY}`;


let typingInterval, controller;
const chatHistory = [];
const userData ={message: "", file:{}};

// Scroll to the bottom of the container
const scrollToBottom = () => {
   const container = document.querySelector(".container");
    container.scrollTop = container.scrollHeight;

}




// Function to create message element
const createMsgElement = (content, ...classes) => {
    const div = document.createElement("div");
    div.classList.add("message", ...classes);
    div.innerHTML = content; // fixed
    return div;
};
 //stimulate typing effect for bot response
const typingEffect = (responseText, textElement, botMsgDiv) => {
    textElement.textContent = "";
    const words = responseText.split("");  
    let wordIndex = 0;

    typingInterval = setInterval(() => {
        if (wordIndex < words.length) {
            textElement.textContent += words[wordIndex++];
            
            scrollToBottom();
        } else {
            clearInterval(typingInterval);
            botMsgDiv.classList.remove("loading");
            document.body.classList.remove("bot-responding");
        }
    }, 40);
};




//Make the api call and generate to bot's response
const generateResponse = async (botMsgDiv) =>{
    const textElement = botMsgDiv.querySelector(".message-text");
    controller = new AbortController();

    //Add user message and file data to the chat history
    chatHistory.push({
        role: "user",
        parts: [{ text: userData.message }, ...(userData.file.data ? [{ inline_data: (({ fileName, isImage, ...rest }) => rest)
            (userData.file) }] : [])]

    });

    try{
        // Send the chat history to the Api to get a response
        const response = await fetch(API_URL,{
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({ contents: chatHistory}),
            signal: controller.signal
        });

        const data =await response.json();
        if(!response.ok) throw new Error(data.error.message);
         
        // Process the response text and display with typing effectl
        const responseText = data.candidates[0].content.parts[0].text.replace(/\*\*([^*]+)\*\*/g, "$1").trim();
        typingEffect(responseText, textElement ,botMsgDiv);

        chatHistory.push({role: "model",parts: [{ text: responseText }]});

        

    }catch(error){
        textElement.style.color="#d62939"
        textElement.textContent = error.name === "AbortError" ? "Response generation stopped." : error.message;
        botMsgDiv.classList.remove("loading");
        document.body.classList.remove("bot-responding");
        scrollToBottom();
    } finally{
        userData.file={};
    }
};

// Handle the form submission
const handleFormSubmit = (e) => {
    e.preventDefault();
    const userMessage = promptInput.value.trim();
    if (!userMessage || document.body.classList.contains("bot-responding")) return;


    promptInput.value="";
    userData.message= userMessage;
    document.body.classList.add("bot-responding","chats-active");
    fileUploadWrapper.classList.remove("active", "img-attached", "file-attached");

    // Generate user message HTML and add in chats container
   const userMsgHTML = `
        <p class="message-text">${userMessage}</p>
        ${
            userData.file.data
                ? (userData.file.isImage
                    ? `<img src="data:${userData.file.mime_type};base64,${userData.file.data}" class="img-attachment" />`
                    : `<p class="file-attachment"><span class="material-symbols-rounded">description</span>${userData.file.fileName}</p>`
                )
                : ""
        }
    `;

    const userMsgDiv = createMsgElement(userMsgHTML, "user-message");
    userMsgDiv.querySelector(".message-text").textContent=userMessage;
    chatsContainer.appendChild(userMsgDiv);
    scrollToBottom();

   

    setTimeout(() => {
        // Generate bot message HTML and add in chats container after 100ms
        const botMsgHTML = `<img src="gemini.svg" class="avatar"><p class="message-text">Just a sec...</p>`;
        const botMsgDiv = createMsgElement(botMsgHTML, "bot-message","loading");
        chatsContainer.appendChild(botMsgDiv);
        scrollToBottom();
        generateResponse(botMsgDiv);
    }, 100);
};

// Hndle file input chnage
fileinput.addEventListener("change",() =>{
    const file= fileinput.files[0];
    if(!file) return;

    const isImage= file.type.startsWith("image/");
    const reader= new FileReader();
    reader.readAsDataURL(file);

    reader.onload = (e) =>{
        fileinput.value="";
        //Gemini always recieves the base 64 string of the file
        const base64String = e.target.result.split(",")[1];
        fileUploadWrapper.querySelector(".file-preview").src=e.target.result;
        fileUploadWrapper.classList.add("active",isImage ? "img-attached": "file-attached");
        
        // store file data in userData obj
        userData.file={ fileName: file.name, data: base64String, mime_type: file.type, isImage }
    }


});



// stop ongoing bot response
document.querySelector("#stop-response-btn").addEventListener("click", () =>{
    
    userData.file={};
    controller?.abort();
    clearInterval(typingInterval);
    chatsContainer.querySelector(".bot-message.loading").classList.remove("loading");
    document.body.classList.remove("bot-responding");
});


// delete all chats
document.querySelector("#delete-chats-btn").addEventListener("click", () =>{
    chatHistory.length = 0;
    chatsContainer.innerHTML="";
    document.body.classList.remove("bot-responding","chats-active");
});

//Handle suggestions click
document.querySelectorAll(".suggestions-item").forEach( item =>{
    item.addEventListener("click",() => {
        promptInput.value = item.querySelector(".text").textContent;
        promptForm.dispatchEvent(new Event("submit"));
    });
});


// Toggle dark/light theme
themeToggle.addEventListener("click", ()=>{
   const isLightTheme= document.body.classList.toggle("light-theme");
   localStorage.setItem("themeColor", isLightTheme ? "light_mode": "dark_mode");
   themeToggle.textContent = isLightTheme ? "dark_mode"  :  "light_mode";
});

//set initial theme from local storage
const isLightTheme= localStorage.getItem("themeColor") === "light_mode";
document.body.classList.toggle("light-theme",isLightTheme);
themeToggle.textContent = isLightTheme ? "dark_mode"  :  "light_mode";


promptForm.addEventListener("submit", handleFormSubmit);

promptForm.querySelector("#add-file-btn").addEventListener("click", () => fileinput.click());