script.js

// API Configuration - Replace with your actual Groq API key
const GROQ_API_KEY = 'YOUR_GROQ_API_KEY_HERE'; // TODO: Replace with your actual API key
const GROQ_API_URL = 'https://api.groq.com/openai/v1/chat/completions';

// DOM Elements
const chatHistory = document.getElementById('chatHistory');
const userInput = document.getElementById('userInput');
const sendButton = document.getElementById('sendButton');

// Add message to chat history
function addMessage(content, isUser = false) {
    const messageDiv = document.createElement('div');
    messageDiv.classList.add('message');
    messageDiv.classList.add(isUser ? 'user-message' : 'bot-message');
    
    const messageContent = document.createElement('div');
    messageContent.classList.add('message-content');
    messageContent.textContent = content;
    
    messageDiv.appendChild(messageContent);
    chatHistory.appendChild(messageDiv);
    
    // Scroll to bottom
    chatHistory.scrollTop = chatHistory.scrollHeight;
}

// Show loading indicator
function showLoading() {
    const loadingDiv = document.createElement('div');
    loadingDiv.classList.add('message', 'bot-message');
    loadingDiv.id = 'loadingIndicator';
    
    const loadingContent = document.createElement('div');
    loadingContent.classList.add('message-content');
    loadingContent.innerHTML = 'Generating your story... <span class="loading"></span>';
    
    loadingDiv.appendChild(loadingContent);
    chatHistory.appendChild(loadingDiv);
    chatHistory.scrollTop = chatHistory.scrollHeight;
}

// Remove loading indicator
function removeLoading() {
    const loadingIndicator = document.getElementById('loadingIndicator');
    if (loadingIndicator) {
        loadingIndicator.remove();
    }
}

// Generate story using Groq API
async function generateStory(prompt) {
    const systemPrompt = `You are a professional novelist specializing in creating engaging, original stories. 
    Generate a compelling novel excerpt based on the user's prompt. 
    Focus on vivid descriptions, character development, and immersive storytelling. 
    The excerpt should be 300-500 words long and written in a literary style appropriate to the genre specified.
    Do not include any meta-commentary or disclaimers - just the story itself.`;
    
    try {
        const response = await fetch(GROQ_API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${GROQ_API_KEY}`
            },
            body: JSON.stringify({
                model: "llama3-8b-8192", // Using LLaMA 3 8B model
                messages: [
                    { role: "system", content: systemPrompt },
                    { role: "user", content: prompt }
                ],
                temperature: 0.7,
                max_tokens: 1000,
                top_p: 0.9
            })
        });

        if (!response.ok) {
            throw new Error(`API error: ${response.status}`);
        }

        const data = await response.json();
        return data.choices[0].message.content;
    } catch (error) {
        console.error('Error generating story:', error);
        return "I apologize, but I encountered an error while generating your story. Please try again later.";
    }
}

// Handle send button click
async function handleSend() {
    const prompt = userInput.value.trim();
    if (!prompt) return;
    
    // Add user message
    addMessage(prompt, true);
    userInput.value = '';
    sendButton.disabled = true;
    
    // Show loading
    showLoading();
    
    // Generate story
    const story = await generateStory(prompt);
    
    // Remove loading and add bot response
    removeLoading();
    addMessage(story);
    sendButton.disabled = false;
    userInput.focus();
}

// Event listeners
sendButton.addEventListener('click', handleSend);
userInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        handleSend();
    }
});

// Initialize
userInput.focus();