app/templates/index.html

{% extends "base.html" %}
{% block content %}
<div class="chat-container">
    <!-- Header -->
    <div class="chat-header">
        <div class="header-content">
            <div class="logo">
                <svg width="32" height="32" viewBox="0 0 40 40">
                    <circle cx="20" cy="20" r="18" fill="#ff7f50"/>
                    <text x="15" y="28" fill="white" font-size="20">J</text>
                </svg>
            </div>
            <h1>Jupiter AI Assistant</h1>
        </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
       <!-- Updated Categories Sidebar with Questions from Provided Data Only -->
<div class="categories-sidebar">
    <h2>📚 Quick Topics</h2>
    <div class="categories-accordion">
        <!-- Account & KYC -->
        <div class="category-item">
            <div class="category-header" onclick="toggleCategory(this)">
                <span>🏦 Account & KYC</span>
                <svg class="arrow-icon" viewBox="0 0 24 24">
                    <path d="M7 10l5 5 5-5z"/>
                </svg>
            </div>
            <div class="category-content">
                <button onclick="askQuestion('What is the Jupiter All-in-1 Savings Account?')">All-in-1 Savings Account</button>
                <button onclick="askQuestion('How do I open a Jupiter Savings Account?')">Open Jupiter Account</button>
                <button onclick="askQuestion('What additional benefits do I get with the Savings Account?')">Savings Account Benefits</button>
                <button onclick="askQuestion('How do I open a Salary account?')">Open Salary Account</button>
                <button onclick="askQuestion('Which documents are required for opening a Salary account?')">Documents for Salary Account</button>
                <button onclick="askQuestion('What is the initial deposit when you open a Salary Account?')">Initial Deposit Required</button>
            </div>
        </div>

        <!-- Payments & UPI -->
        <div class="category-item">
            <div class="category-header" onclick="toggleCategory(this)">
                <span>💸 Payments & UPI</span>
                <svg class="arrow-icon" viewBox="0 0 24 24">
                    <path d="M7 10l5 5 5-5z"/>
                </svg>
            </div>
            <div class="category-content">
                <button onclick="askQuestion('What payment methods does Jupiter support?')">Payment Methods</button>
                <button onclick="askQuestion('Is there a transaction limit for UPI payments?')">UPI Transaction Limits</button>
                <button onclick="askQuestion('Are there any charges for UPI transactions?')">UPI Transaction Charges</button>
                <button onclick="askQuestion('What is UPI Lite and how does it work?')">UPI Lite Feature</button>
                <button onclick="askQuestion('Can I send money to contacts using other UPI apps?')">Send to Other UPI Apps</button>
                <button onclick="askQuestion('What types of bills can I pay on Jupiter?')">Bill Payment Types</button>
            </div>
        </div>

        <!-- Cards -->
        <div class="category-item">
            <div class="category-header" onclick="toggleCategory(this)">
                <span>💳 Cards</span>
                <svg class="arrow-icon" viewBox="0 0 24 24">
                    <path d="M7 10l5 5 5-5z"/>
                </svg>
            </div>
            <div class="category-content">
                <button onclick="askQuestion('How can I apply for the Edge+ CSB Bank RuPay Credit Card?')">Apply for Edge+ Card</button>
                <button onclick="askQuestion('What is the maximum cashback I can earn for each category?')">Maximum Cashback Limits</button>
                <button onclick="askQuestion('Are there any fees for the Edge+ card?')">Edge+ Card Fees</button>
                <button onclick="askQuestion('Can I use my Jupiter Debit Card outside India?')">International Debit Card Usage</button>
                <button onclick="askQuestion('How to activate Edge Federal Bank Visa Credit Card?')">Activate Visa Card</button>
                <button onclick="askQuestion('Is Edge Federal Bank Visa Credit Card lifetime free?')">Lifetime Free Card</button>
            </div>
        </div>

        <!-- Rewards & Jewels -->
        <div class="category-item">
            <div class="category-header" onclick="toggleCategory(this)">
                <span>💎 Rewards & Jewels</span>
                <svg class="arrow-icon" viewBox="0 0 24 24">
                    <path d="M7 10l5 5 5-5z"/>
                </svg>
            </div>
            <div class="category-content">
                <button onclick="askQuestion('Do I earn Jewels for making payments?')">Earn Jewels on Payments</button>
                <button onclick="askQuestion('How do I earn Jewels on Jupiter?')">How to Earn Jewels</button>
                <button onclick="askQuestion('What can I redeem Jewels for?')">Redeem Jewels Options</button>
                <button onclick="askQuestion('How fast can I redeem Jewels on Jupiter?')">Instant Jewels Redemption</button>
                <button onclick="askQuestion('Do the earned Jewels expire?')">Jewels Expiry Policy</button>
                <button onclick="askQuestion('Do I earn Jewels on International payments?')">International Payment Rewards</button>
            </div>
        </div>

        <!-- Investments -->
        <div class="category-item">
            <div class="category-header" onclick="toggleCategory(this)">
                <span>📈 Investments</span>
                <svg class="arrow-icon" viewBox="0 0 24 24">
                    <path d="M7 10l5 5 5-5z"/>
                </svg>
            </div>
            <div class="category-content">
                <button onclick="askQuestion('What investment options are available on Jupiter?')">Investment Options</button>
                <button onclick="askQuestion('What is Magic Spends and how does it work?')">Magic Spends Feature</button>
                <button onclick="askQuestion('Can I invest using my Jupiter account?')">Invest with Jupiter</button>
                <button onclick="askQuestion('What is Digital Gold on Jupiter?')">Digital Gold Investment</button>
                <button onclick="askQuestion('Can I start investing in Gold with just ₹10?')">₹10 Gold Investment</button>
                <button onclick="askQuestion('How do No-Penalty SIPs work on Jupiter?')">No-Penalty SIPs</button>
            </div>
        </div>

        <!-- Loans -->
        <div class="category-item">
            <div class="category-header" onclick="toggleCategory(this)">
                <span>💰 Loans</span>
                <svg class="arrow-icon" viewBox="0 0 24 24">
                    <path d="M7 10l5 5 5-5z"/>
                </svg>
            </div>
            <div class="category-content">
                <button onclick="askQuestion('What types of loans can I get on Jupiter?')">Available Loan Types</button>
                <button onclick="askQuestion('What are the interest rates applicable on loans with Jupiter?')">Loan Interest Rates</button>
                <button onclick="askQuestion('What is a loan against mutual funds?')">Loan Against Mutual Funds</button>
                <button onclick="askQuestion('Who can apply for a Personal Loan on Jupiter?')">Personal Loan Eligibility</button>
                <button onclick="askQuestion('What is Mini-Loan?')">About Mini-Loan</button>
                <button onclick="askQuestion('Will I get reminders for my EMI payments?')">EMI Payment Reminders</button>
            </div>
        </div>

        <!-- Money Management -->
        <div class="category-item">
            <div class="category-header" onclick="toggleCategory(this)">
                <span>📊 Money Management</span>
                <svg class="arrow-icon" viewBox="0 0 24 24">
                    <path d="M7 10l5 5 5-5z"/>
                </svg>
            </div>
            <div class="category-content">
                <button onclick="askQuestion('What can I do in the Money tab on Jupiter?')">Money Tab Features</button>
                <button onclick="askQuestion('How does Jupiter categorize my spending?')">Spending Categories</button>
                <button onclick="askQuestion('Can I set Budgets in the Money tab?')">Set Monthly Budgets</button>
                <button onclick="askQuestion('What is Account Aggregator and how does it work?')">Account Aggregator</button>
                <button onclick="askQuestion('What is Net Worth in Jupiter and how is it calculated?')">Net Worth Tracker</button>
                <button onclick="askQuestion('Can I track my credit card expenses in the Money tab?')">Track Credit Card Expenses</button>
            </div>
        </div>
    </div>
</div>

        <!-- Chat Section -->
        <div class="chat-section">
            <div class="chat-messages" id="chat-messages">
                <div class="message system">
                    <div class="message-content">
                        <div class="welcome-message">
                            <h3>👋 Welcome to Jupiter!</h3>
                            <p>I'm here to help you with any questions about Jupiter's services. Choose a category from the sidebar or ask me anything!</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="chat-input-container">
                <form class="chat-input-form" onsubmit="sendMessage(event)">
                    <input type="text" id="user-input" placeholder="Ask me anything about Jupiter..." required>
                    <button type="submit">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path d="M22 2L11 13"></path>
                            <path d="M22 2L15 22L11 13L2 9L22 2Z"></path>
                        </svg>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>

function toggleCategory(header) {

    const categoryItem = header.parentElement;

    const wasActive = categoryItem.classList.contains('active');

    

    // Close all categories

    document.querySelectorAll('.category-item').forEach(item => {

        item.classList.remove('active');

    });

    

    // Open clicked category if it wasn't active

    if (!wasActive) {

        categoryItem.classList.add('active');

    }

}



function formatMessage(text) {

    if (text.includes("•")) {

        const parts = text.split("•");

        let formattedText = parts[0];

        if (parts.length > 1) {

            formattedText += '<ul class="response-list">';

            for (let i = 1; i < parts.length; i++) {

                if (parts[i].trim()) {

                    formattedText += `<li>${parts[i].trim()}</li>`;

                }

            }

            formattedText += '</ul>';

        }

        return formattedText;

    }

    return text;

}



function addSuggestions(suggestions) {

    if (!suggestions || suggestions.length === 0) return;

    

    const suggestionsDiv = document.createElement('div');

    suggestionsDiv.className = 'suggestions';

    suggestionsDiv.innerHTML = '<p>You might also want to know:</p>';

    

    const buttonsContainer = document.createElement('div');

    buttonsContainer.className = 'suggestion-buttons';

    

    suggestions.forEach(suggestion => {

        const btn = document.createElement('button');

        btn.className = 'suggestion-btn';

        btn.innerHTML = `<span>${suggestion}</span>`;

        btn.onclick = () => askQuestion(suggestion);

        buttonsContainer.appendChild(btn);

    });

    

    suggestionsDiv.appendChild(buttonsContainer);

    document.getElementById('chat-messages').appendChild(suggestionsDiv);

}



function askQuestion(question) {

    document.getElementById('user-input').value = question;

    document.querySelector('.chat-input-form').dispatchEvent(new Event('submit'));

}



function sendMessage(event) {

    event.preventDefault();

    

    const input = document.getElementById('user-input');

    const messages = document.getElementById('chat-messages');

    

    // Add user message

    const userMessage = document.createElement('div');

    userMessage.className = 'message user';

    userMessage.innerHTML = `<div class="message-content">${input.value}</div>`;

    messages.appendChild(userMessage);

    

    // Add loading message

    const loadingMessage = document.createElement('div');

    loadingMessage.className = 'message system loading';

    loadingMessage.innerHTML = `

        <div class="message-content">

            <div class="typing-indicator">

                <span></span><span></span><span></span>

            </div>

        </div>

    `;

    messages.appendChild(loadingMessage);

    

    // Scroll to bottom

    messages.scrollTop = messages.scrollHeight;

    

    // Send request to server

    fetch('/chat', {

        method: 'POST',

        headers: {

            'Content-Type': 'application/json',

        },

        body: JSON.stringify({

            question: input.value

        })

    })

    .then(response => response.json())

    .then(data => {

        // Remove loading message

        messages.removeChild(loadingMessage);

        

        // Add bot response

        const botMessage = document.createElement('div');

        botMessage.className = 'message system';

        botMessage.innerHTML = `<div class="message-content">${formatMessage(data.response)}</div>`;

        messages.appendChild(botMessage);

        

        // Add suggestions if any

        if (data.suggestions) {

            addSuggestions(data.suggestions);

        }

        

        // Clear input and scroll

        input.value = '';

        messages.scrollTop = messages.scrollHeight;

    })

    .catch(error => {

        console.error('Error:', error);

        loadingMessage.innerHTML = '<div class="message-content error">Sorry, something went wrong. Please try again.</div>';

    });

}

</script>
{% endblock %}