How it works drawer

app.py

@@ -122,6 +122,87 @@ app.layout = dmc.MantineProvider(
                                     className="prompt"
                                 ),
                                 
+                                # How it works section
+                                html.Div(
+                                    [
+                                        html.Span("How it works ", style={
+                                            "fontSize": "13px",
+                                            "color": "#667085",
+                                            "fontWeight": "500"
+                                        }),
+                                        html.Span("ⓘ", id="info-icon", style={
+                                            "cursor": "pointer",
+                                            "fontSize": "14px",
+                                            "color": "#6941C6",
+                                            "marginLeft": "2px"
+                                        })
+                                    ],
+                                    style={
+                                        "marginTop": "8px",
+                                        "marginBottom": "16px"
+                                    }
+                                ),
+                                
+                                # Drawer for How it works
+                                dmc.Drawer(
+                                    title="How it works",
+                                    id="info-drawer",
+                                    padding="md",
+                                    size="400px",
+                                    position="right",
+                                    children=[
+                                        html.Div([
+                                            html.Ol([
+                                                html.Li([
+                                                    html.Strong("Upload and review your data:"),
+                                                    " Choose a CSV file containing your dataset and take a moment to explore it—understand the columns, data types, and any patterns, filters, or transformations relevant to your analysis."
+                                                ], style={"marginBottom": "16px"}),
+                                                html.Li([
+                                                    html.Strong("Describe your analytical goal:"),
+                                                    " Write a natural language prompt that clearly states what you want to analyze and visualize. Reference specific column names and describe how they should be used (e.g., grouping, aggregation, filtering)."
+                                                ], style={"marginBottom": "16px"}),
+                                                html.Li([
+                                                    html.Strong("Refine your prompt if needed:"),
+                                                    " If the output isn’t what you expected or an error occurs, adjust your prompt to be more specific or clarify assumptions. Small changes often lead to better results."
+                                                ], style={"marginBottom": "16px"}),
+                                                html.Li([
+                                                    html.Strong("Review the generated code and chart:"),
+                                                    " Once the visualization is generated, review the underlying code to ensure it accurately reflects your analytical intent before using or sharing the results."
+                                                ], style={"marginBottom": "16px"}),
+                                                html.Li([
+                                                    html.Strong("Share or export your results:"),
+                                                    " Download the visualization as an interactive HTML file to preserve interactivity, or export it as a static image for reports, presentations, or documentation."
+                                                ], style={"marginBottom": "0px"}),
+                                            ], style={
+                                                "fontSize": "13px",
+                                                "lineHeight": "1.6",
+                                                "color": "#344054",
+                                                "paddingLeft": "20px"
+                                            }),
+                                            html.Div([
+                                                html.H4("Tips for better results:", style={
+                                                    "fontSize": "13px",
+                                                    "fontWeight": "600",
+                                                    "color": "#344054",
+                                                    "marginTop": "24px",
+                                                    "marginBottom": "12px"
+                                                }),
+                                                html.Ul([
+                                                    html.Li("Mention specific column names from your dataset"),
+                                                    html.Li("Specify colors, themes, or styling preferences"),
+                                                    html.Li("Include aggregations or transformations you need"),
+                                                    html.Li("Be clear about labels, titles, and legends")
+                                                ], style={
+                                                    "fontSize": "12px",
+                                                    "lineHeight": "1.6",
+                                                    "color": "#475467",
+                                                    "paddingLeft": "20px"
+                                                })
+                                            ])
+                                        ])
+                                    ]
+                                ),
+                                
                                 # File picker and submit button row
                                 html.Div(
                                     [
@@ -380,6 +461,17 @@ app.layout = dmc.MantineProvider(
     )
 )
 
+# Add callback for drawer
+@callback(
+    Output("info-drawer", "opened"),
+    Input("info-icon", "n_clicks"),
+    State("info-drawer", "opened"),
+    prevent_initial_call=True
+)
+def toggle_drawer(n_clicks, opened):
+    """Toggle the info drawer when the info icon is clicked."""
+    return not opened
+
 # Callback for file upload
 @callback(
     Output("stored-data", "data"),