$(document).ready(function() {
    const messagesDiv = $('#messages');
    const userInput = $('#userInput');
    const sendBtn = $('#sendBtn');
    const chartCanvas = $('#chart');

    sendBtn.on('click', function() {
        const userMessage = userInput.val();
        if (userMessage) {
            messagesDiv.append(`<div><strong>You:</strong> ${userMessage}</div>`);
            userInput.val('');
            generateChart(userMessage);
        }
    });

    function generateChart(query) {
        // Simulate AI response and chart generation
        messagesDiv.append(`<div><strong>AI:</strong> Generating chart for "${query}"...</div>`);

        // Simulated data for the chart
        const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
        const data = [65, 59, 80, 81, 56, 55, 40];

        // Create the chart
        const ctx = chartCanvas[0].getContext('2d');
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Stock Trend',
                    data: data,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 2,
                    fill: false
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        chartCanvas.show();
    }
});