In this assignment, you will expand the previous data visualization assistant by adding data analysis capabilities. It should be able to respond to both visual queries (chart generation) and data-driven queries (such as data aggregation for averages or medians).

Technical Guidelines

Interface Design

We will use the same user interface from the previous assignment. Your interface should support data loading through both drag-and-drop and click-to-upload, and it should display a data preview. Additionally, your chat interface should be able to render a Vega-Lite chart and provide a textual response.

Additional checkpoints

Add Clear Messages Button
Ensure you can load a new dataset without reloading the webpage.
Add a loading icon. You can find some resources here: https://github.com/n3r4zzurr0/svg-spinners; open each SVG and change the fill color to white if you have a dark background.

👉 We will deduct points for other issues related to usability, even if not explicitly mentioned. Ensure you provide a good user experience. For example, we have previously deducted points for chat history not functioning smoothly (e.g., not auto-scrolling to the most recent conversation).

👉If you are using react-markdown, it may not render a table correctly. You will need the remark-gfm package to handle this:

import remarkGfm from 'remark-gfm'
<Markdown remarkPlugins={[remarkGfm]}>{message.content}</Markdown>

Chart Generation Tool

You will reuse your previous assignment to implement this tool. You need to define a function that can be easily called within the tool's calling loop below. Additionally, you will need to describe this function to LLMs so they can consider it when deciding which tools to use based on the user's question.

Your implementation may vary depending on your previous assignment. Below are some potential guidelines:

Define a function that generates a Vega specification based on a user question. Feel free to add additional parameters to meet your needs (e.g., data URL to generate a data overview).