Update to new version of UI

Dockerfile

@@ -1,17 +1,36 @@
-# read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
-# you will also find guides on how best to write your Dockerfile
+FROM python:3.12-slim AS builder
 
-FROM python:3.12
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
 
 RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+WORKDIR $HOME/app
 
-WORKDIR /app
+COPY --chown=user requirements.txt .
+RUN pip install --user --no-cache-dir --upgrade pip && \
+    pip install --user --no-cache-dir -r requirements.txt
 
-COPY --chown=user ./requirements.txt requirements.txt
+# Production stage
+FROM python:3.12-slim
 
-RUN pip install --no-cache-dir --upgrade -r requirements.txt
+RUN apt-get update && apt-get upgrade -y && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
 
-COPY --chown=user . /app
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+WORKDIR $HOME/app
+
+COPY --from=builder --chown=user $HOME/.local/lib/python3.12/site-packages $HOME/.local/lib/python3.12/site-packages
+COPY --from=builder --chown=user $HOME/.local/bin $HOME/.local/bin
+
+COPY --chown=user . $HOME/app
 
 EXPOSE 7860
 

actions.py

@@ -5,6 +5,8 @@ import io
 import logging
 
 import black
+import dash
+import dash_bootstrap_components as dbc
 import pandas as pd
 from _utils import check_file_extension
 from dash.exceptions import PreventUpdate
@@ -13,18 +15,52 @@ from plotly import graph_objects as go
 from vizro.models.types import capture
 from vizro_ai import VizroAI
 
-logger = logging.getLogger(__name__)
-logger.setLevel(logging.INFO)  # TODO: remove manual setting and make centrally controlled
+try:
+    from langchain_anthropic import ChatAnthropic
+except ImportError:
+    ChatAnthropic = None
 
-SUPPORTED_VENDORS = {"OpenAI": ChatOpenAI}
+try:
+    from langchain_mistralai import ChatMistralAI
+except ImportError:
+    ChatMistralAI = None
 
+logger = logging.getLogger(__name__)
+logger.setLevel(logging.INFO)  # TODO: remove manual setting and make centrally controlled
 
-def get_vizro_ai_plot(user_prompt, df, model, api_key, api_base, vendor_input):  # noqa: PLR0913
+SUPPORTED_VENDORS = {"OpenAI": ChatOpenAI, "Anthropic": ChatAnthropic, "Mistral": ChatMistralAI}
+
+SUPPORTED_MODELS = {
+    "OpenAI": [
+        "gpt-4o-mini",
+        "gpt-4o",
+        "gpt-4",
+        "gpt-4-turbo",
+        "gpt-3.5-turbo",
+    ],
+    "Anthropic": [
+        "claude-3-opus-latest",
+        "claude-3-5-sonnet-latest",
+        "claude-3-sonnet-20240229",
+        "claude-3-haiku-20240307",
+    ],
+    "Mistral": ["mistral-large-latest", "open-mistral-nemo", "codestral-latest"],
+}
+
+
+def get_vizro_ai_plot(user_prompt, df, model, api_key, api_base, vendor_input):
     """VizroAi plot configuration."""
     vendor = SUPPORTED_VENDORS[vendor_input]
-    llm = vendor(model_name=model, openai_api_key=api_key, openai_api_base=api_base)
+
+    if vendor_input == "OpenAI":
+        llm = vendor(model_name=model, openai_api_key=api_key, openai_api_base=api_base)
+    if vendor_input == "Anthropic":
+        llm = vendor(model=model, anthropic_api_key=api_key, anthropic_api_url=api_base)
+    if vendor_input == "Mistral":
+        llm = vendor(model=model, mistral_api_key=api_key, mistral_api_url=api_base)
+
     vizro_ai = VizroAI(model=llm)
-    ai_outputs = vizro_ai.plot(df, user_prompt, explain=False, return_elements=True)
+    ai_outputs = vizro_ai.plot(df, user_prompt, return_elements=True)
 
     return ai_outputs
 
@@ -33,13 +69,8 @@ def get_vizro_ai_plot(user_prompt, df, model, api_key, api_base, vendor_input):
 def run_vizro_ai(user_prompt, n_clicks, data, model, api_key, api_base, vendor_input):  # noqa: PLR0913
     """Gets the AI response and adds it to the text window."""
 
-    def create_response(ai_response, figure, user_prompt, filename):
-        plotly_fig = figure.to_json()
-        return (
-            ai_response,
-            figure,
-            {"ai_response": ai_response, "figure": plotly_fig, "prompt": user_prompt, "filename": filename},
-        )
+    def create_response(ai_response, figure, ai_outputs):
+        return (ai_response, figure, {"ai_outputs": ai_outputs})
 
     if not n_clicks:
         raise PreventUpdate
@@ -47,22 +78,22 @@ def run_vizro_ai(user_prompt, n_clicks, data, model, api_key, api_base, vendor_i
     if not data:
         ai_response = "Please upload data to proceed!"
         figure = go.Figure()
-        return create_response(ai_response, figure, user_prompt, None)
+        return create_response(ai_response, figure, ai_outputs=None)
 
     if not api_key:
         ai_response = "API key not found. Make sure you enter your API key!"
         figure = go.Figure()
-        return create_response(ai_response, figure, user_prompt, data["filename"])
+        return create_response(ai_response, figure, ai_outputs=None)
 
     if api_key.startswith('"'):
         ai_response = "Make sure you enter your API key without quotes!"
         figure = go.Figure()
-        return create_response(ai_response, figure, user_prompt, data["filename"])
+        return create_response(ai_response, figure, ai_outputs=None)
 
     if api_base is not None and api_base.startswith('"'):
         ai_response = "Make sure you enter your API base without quotes!"
         figure = go.Figure()
-        return create_response(ai_response, figure, user_prompt, data["filename"])
+        return create_response(ai_response, figure, ai_outputs=None)
 
     try:
         logger.info("Attempting chart code.")
@@ -75,20 +106,25 @@ def run_vizro_ai(user_prompt, n_clicks, data, model, api_key, api_base, vendor_i
             api_base=api_base,
             vendor_input=vendor_input,
         )
-        ai_code = ai_outputs.code
-        figure = ai_outputs.figure
+        ai_code = ai_outputs.code_vizro
+        figure_vizro = ai_outputs.get_fig_object(data_frame=df, vizro=True)
+        figure_plotly = ai_outputs.get_fig_object(data_frame=df, vizro=False)
         formatted_code = black.format_str(ai_code, mode=black.Mode(line_length=100))
+        ai_code_outputs = {
+            "vizro": {"code": ai_outputs.code_vizro, "fig": figure_vizro.to_json()},
+            "plotly": {"code": ai_outputs.code, "fig": figure_plotly.to_json()},
+        }
 
         ai_response = "\n".join(["```python", formatted_code, "```"])
         logger.info("Successful query produced.")
-        return create_response(ai_response, figure, user_prompt, data["filename"])
+        return create_response(ai_response, figure_vizro, ai_outputs=ai_code_outputs)
 
     except Exception as exc:
         logger.debug(exc)
         logger.info("Chart creation failed.")
         ai_response = f"Sorry, I can't do that. Following Error occurred: {exc}"
         figure = go.Figure()
-        return create_response(ai_response, figure, user_prompt, data["filename"])
+        return create_response(ai_response, figure, ai_outputs=None)
 
 
 @capture("action")
@@ -98,7 +134,11 @@ def data_upload_action(contents, filename):
         raise PreventUpdate
 
     if not check_file_extension(filename=filename):
-        return {"error_message": "Unsupported file extension.. Make sure to upload either csv or an excel file."}
+        return (
+            {"error_message": "Unsupported file extension.. Make sure to upload either csv or an excel file."},
+            {"color": "gray"},
+            {"display": "none"},
+        )
 
     content_type, content_string = contents.split(",")
 
@@ -112,11 +152,15 @@ def data_upload_action(contents, filename):
             df = pd.read_excel(io.BytesIO(decoded))
 
         data = df.to_dict("records")
-        return {"data": data, "filename": filename}
+        return {"data": data, "filename": filename}, {"cursor": "pointer"}, {}
 
     except Exception as e:
         logger.debug(e)
-        return {"error_message": "There was an error processing this file."}
+        return (
+            {"error_message": "There was an error processing this file."},
+            {"color": "gray", "cursor": "default"},
+            {"display": "none"},
+        )
 
 
 @capture("action")
@@ -127,3 +171,16 @@ def display_filename(data):
 
     display_message = data.get("filename") or data.get("error_message")
     return f"Uploaded file name: '{display_message}'" if "filename" in data else display_message
+
+
+@capture("action")
+def update_table(data):
+    """Custom action for updating data."""
+    if not data:
+        return dash.no_update
+    df = pd.DataFrame(data["data"])
+    filename = data.get("filename") or data.get("error_message")
+    modal_title = f"Data sample preview for {filename} file"
+    df_sample = df.sample(5)
+    table = dbc.Table.from_dataframe(df_sample, striped=False, bordered=True, hover=True)
+    return table, modal_title

app.py

@@ -2,71 +2,127 @@
 
 import json
 
+import black
+import dash
 import dash_bootstrap_components as dbc
 import pandas as pd
+import plotly.graph_objects as go
+import plotly.io as pio
 import vizro.models as vm
 import vizro.plotly.express as px
-from actions import data_upload_action, display_filename, run_vizro_ai
+from actions import data_upload_action, display_filename, run_vizro_ai, update_table
 from components import (
     CodeClipboard,
     CustomDashboard,
+    DropdownMenu,
+    HeaderComponent,
     Icon,
     Modal,
     MyDropdown,
-    MyPage,
     OffCanvas,
+    ToggleSwitch,
     UserPromptTextArea,
     UserUpload,
+    custom_table,
 )
-from dash import Input, Output, State, callback, get_asset_url, html
-from dash.exceptions import PreventUpdate
+from dash import Input, Output, State, callback, ctx, dcc, get_asset_url, html
 from vizro import Vizro
 
+try:
+    from langchain_anthropic import ChatAnthropic
+except ImportError:
+    ChatAnthropic = None
+
+try:
+    from langchain_mistralai import ChatMistralAI
+except ImportError:
+    ChatMistralAI = None
+
 vm.Container.add_type("components", UserUpload)
 vm.Container.add_type("components", MyDropdown)
 vm.Container.add_type("components", OffCanvas)
 vm.Container.add_type("components", CodeClipboard)
 vm.Container.add_type("components", Icon)
 vm.Container.add_type("components", Modal)
+vm.Container.add_type("components", ToggleSwitch)
+vm.Container.add_type("components", UserPromptTextArea)
+vm.Container.add_type("components", DropdownMenu)
+vm.Container.add_type("components", HeaderComponent)
 
-MyPage.add_type("components", UserPromptTextArea)
-MyPage.add_type("components", UserUpload)
-MyPage.add_type("components", MyDropdown)
-MyPage.add_type("components", OffCanvas)
-MyPage.add_type("components", CodeClipboard)
-MyPage.add_type("components", Icon)
-MyPage.add_type("components", Modal)
+vm.Page.add_type("components", UserUpload)
+vm.Page.add_type("components", MyDropdown)
+vm.Page.add_type("components", OffCanvas)
+vm.Page.add_type("components", CodeClipboard)
+vm.Page.add_type("components", Icon)
+vm.Page.add_type("components", Modal)
 
 
-SUPPORTED_MODELS = [
-    "gpt-4o-mini",
-    "gpt-4",
-    "gpt-4-turbo",
-    "gpt-3.5-turbo",
-    "gpt-4o",
-]
+SUPPORTED_MODELS = {
+    "OpenAI": [
+        "gpt-4o-mini",
+        "gpt-4o",
+        "gpt-4",
+        "gpt-4-turbo",
+        "gpt-3.5-turbo",
+    ],
+    "Anthropic": [
+        "claude-3-opus-latest",
+        "claude-3-5-sonnet-latest",
+        "claude-3-sonnet-20240229",
+        "claude-3-haiku-20240307",
+    ],
+    "Mistral": ["mistral-large-latest", "open-mistral-nemo", "codestral-latest"],
+}
 
 
-plot_page = MyPage(
+plot_page = vm.Page(
     id="vizro_ai_plot_page",
-    title="Vizro-AI - effortlessly create interactive charts with Plotly",
+    title="Vizro-AI - create interactive charts with Plotly and Vizro",
     layout=vm.Layout(
         grid=[
-            [3, 3, -1, 5],
-            [1, 1, 2, 2],
-            [4, 4, 2, 2],
-            *[[0, 0, 2, 2]] * 6,
+            [4, 4, 4, 4],
+            [2, 2, 1, 1],
+            [2, 2, 1, 1],
+            [3, 3, 1, 1],
+            [3, 3, 1, 1],
+            [3, 3, 1, 1],
+            *[[0, 0, 1, 1]] * 8,
         ]
     ),
     components=[
-        vm.Container(title="", components=[CodeClipboard(id="plot")]),
-        UserPromptTextArea(
-            id="text-area-id",
+        vm.Container(
+            title="",
+            components=[CodeClipboard(id="plot"), ToggleSwitch(id="toggle-id")],
+            layout=vm.Layout(
+                grid=[*[[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] * 7, [-1, -1, -1, -1, -1, -1, -1, -1, -1, 1, 1, 1]],
+                row_gap="12px",
+                col_gap="12px",
+            ),
         ),
-        vm.Graph(id="graph-id", figure=px.scatter(pd.DataFrame())),
         vm.Container(
             title="",
-            layout=vm.Layout(grid=[[1], [0]], row_gap="0px"),
+            layout=vm.Layout(
+                grid=[
+                    *[[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] * 10,
+                    [-1, -1, -1, -1, -1, -1, -1, -1, -1, 1, 1],
+                ]
+            ),
+            components=[
+                vm.Graph(id="graph-id", figure=px.scatter(pd.DataFrame())),
+                DropdownMenu(id="dropdown-menu"),
+            ],
+        ),
+        vm.Container(
+            id="upload-data-container",
+            title="Turn your data into visuals — just upload, describe, and see your chart in action",
+            layout=vm.Layout(
+                grid=[
+                    [1],
+                    [0],
+                ],
+                row_gap="0px",
+                # row_min_height="40px",
+            ),
             components=[
                 UserUpload(
                     id="data-upload-id",
@@ -74,25 +130,39 @@ plot_page = MyPage(
                         vm.Action(
                             function=data_upload_action(),
                             inputs=["data-upload-id.contents", "data-upload-id.filename"],
-                            outputs=["data-store-id.data"],
+                            outputs=["data-store-id.data", "modal-table-icon.style", "modal-table-tooltip.style"],
                         ),
                         vm.Action(
                             function=display_filename(),
                             inputs=["data-store-id.data"],
                             outputs=["upload-message-id.children"],
                         ),
+                        vm.Action(
+                            function=update_table(),
+                            inputs=["data-store-id.data"],
+                            outputs=["modal-table.children", "modal-title.children"],
+                        ),
                     ],
                 ),
-                vm.Card(id="upload-message-id", text="Upload your data file (csv or excel)"),
+                vm.Figure(id="show-data-component", figure=custom_table(data_frame=pd.DataFrame())),
             ],
         ),
         vm.Container(
             title="",
-            layout=vm.Layout(grid=[[2, 3, -1, -1, -1, 1, 1, 0, 0]], row_gap="0px", col_gap="4px"),
+            layout=vm.Layout(
+                grid=[
+                    [3, 3, 3, 3, 3, 3, 3, 3, 3],
+                    [3, 3, 3, 3, 3, 3, 3, 3, 3],
+                    [3, 3, 3, 3, 3, 3, 3, 3, 3],
+                    [2, -1, -1, -1, -1, 1, 1, 0, 0],
+                ],
+                row_gap="10px",
+                col_gap="4px",
+            ),
             components=[
                 vm.Button(
                     id="trigger-button-id",
-                    text="Run VizroAI",
+                    text="Run Vizro-AI",
                     actions=[
                         vm.Action(
                             function=run_vizro_ai(),
@@ -105,16 +175,22 @@ plot_page = MyPage(
                                 "settings-api-base.value",
                                 "settings-dropdown.value",
                             ],
-                            outputs=["plot-code-markdown.children", "graph-id.figure", "outputs-store-id.data"],
+                            outputs=["plot-code-markdown.children", "graph-id.figure", "code-output-store-id.data"],
                         ),
                     ],
                 ),
-                MyDropdown(options=SUPPORTED_MODELS, value="gpt-4o-mini", multi=False, id="model-dropdown-id"),
-                OffCanvas(id="settings", options=["OpenAI"], value="OpenAI"),
-                Modal(id="modal"),
+                MyDropdown(
+                    options=SUPPORTED_MODELS["OpenAI"], value="gpt-4o-mini", multi=False, id="model-dropdown-id"
+                ),
+                OffCanvas(id="settings", options=["OpenAI", "Anthropic", "Mistral"], value="OpenAI"),
+                UserPromptTextArea(id="text-area-id"),
+                # Modal(id="modal"),
             ],
         ),
-        Icon(id="open-settings-id"),
+        vm.Container(
+            title="",
+            components=[HeaderComponent()],
+        ),
     ],
 )
 
@@ -123,28 +199,6 @@ dashboard = CustomDashboard(pages=[plot_page])
 
 
 # pure dash callbacks
-@callback(
-    [
-        Output("plot-code-markdown", "children", allow_duplicate=True),
-        Output("graph-id", "figure", allow_duplicate=True),
-        Output("text-area-id", "value"),
-        Output("upload-message-id", "children"),
-    ],
-    [Input("on_page_load_action_trigger_vizro_ai_plot_page", "data")],
-    [State("outputs-store-id", "data")],
-    prevent_initial_call="initial_duplicate",
-)
-def update_data(page_data, outputs_data):
-    """Callback for retrieving latest vizro-ai output from dcc store."""
-    if not outputs_data:
-        raise PreventUpdate
-
-    ai_response = outputs_data["ai_response"]
-    fig = json.loads(outputs_data["figure"])
-    filename = f"File uploaded: '{outputs_data['filename']}'"
-    prompt = outputs_data["prompt"]
-
-    return ai_response, fig, prompt, filename
 
 
 @callback(
@@ -175,19 +229,85 @@ def show_api_base(value):
     return "text" if value else "password"
 
 
+@callback(
+    Output("plot-code-markdown", "children"),
+    Input("toggle-switch", "value"),
+    [State("code-output-store-id", "data")],
+)
+def toggle_code(value, data):
+    """Callback for switching between vizro and plotly code."""
+    if not data:
+        return dash.no_update
+
+    ai_code = data["ai_outputs"]["vizro"]["code"] if value else data["ai_outputs"]["plotly"]["code"]
+
+    formatted_code = black.format_str(ai_code, mode=black.Mode(line_length=100))
+    ai_response = "\n".join(["```python", formatted_code, "```"])
+    return ai_response
+
+
+@callback(
+    Output("data-modal", "is_open"),
+    Input("modal-table-icon", "n_clicks"),
+    State("data-modal", "is_open"),
+    State("data-store-id", "data"),
+)
+def open_modal(n_clicks, is_open, data):
+    """Callback for opening modal component."""
+    if not data:
+        return dash.no_update
+    if n_clicks:
+        return not is_open
+    return is_open
+
+
+@callback(
+    Output("download-file", "data"),
+    [Input("dropdown-menu-html", "n_clicks"), Input("dropdown-menu-json", "n_clicks")],
+    State("code-output-store-id", "data"),
+    prevent_initial_call=True,
+)
+def download_fig(n_clicks_html, n_clicks_json, data):
+    """Callback for downloading vizro fig."""
+    if not data:
+        return dash.no_update
+    if not (n_clicks_html or n_clicks_json):
+        return dash.no_update
+
+    button_clicked = ctx.triggered_id
+
+    if button_clicked == "dropdown-menu-html":
+        vizro_json = json.loads(data["ai_outputs"]["vizro"]["fig"])
+        fig = go.Figure(vizro_json)
+        graphs_html = pio.to_html(fig)
+        return dcc.send_string(graphs_html, filename="vizro_fig.html")
+
+    if button_clicked == "dropdown-menu-json":
+        plotly_json = data["ai_outputs"]["plotly"]["fig"]
+        return dcc.send_string(plotly_json, "plotly_fig.json")
+
+
+@callback(
+    [Output("model-dropdown-id", "options"), Output("model-dropdown-id", "value")], Input("settings-dropdown", "value")
+)
+def update_model_dropdown(value):
+    """Callback for updating available models."""
+    available_models = SUPPORTED_MODELS[value]
+    default_model = available_models[0]
+    return available_models, default_model
+
+
 app = Vizro().build(dashboard)
 app.dash.layout.children.append(
     html.Div(
         [
-            dbc.NavLink("Contact Vizro", href="https://github.com/mckinsey/vizro/issues"),
-            dbc.NavLink("GitHub", href="https://github.com/mckinsey/vizro"),
-            dbc.NavLink("Docs", href="https://vizro.readthedocs.io/projects/vizro-ai/"),
             html.Div(
                 [
                     "Made using ",
                     html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"),
-                    "vizro",
+                    dbc.NavLink("vizro", href="https://github.com/mckinsey/vizro", target="_blank", external_link=True),
                 ],
+                style={"display": "flex", "flexDirection": "row"},
             ),
         ],
         className="anchor-container",

assets/custom_css.css

@@ -26,7 +26,7 @@
   background-color: inherit;
   border: 1px solid var(--border-subtle-alpha-01);
   color: var(--text-primary);
-  min-height: 90px;
+  min-height: 13.5vh;
   padding: 8px;
   width: 100%;
 }
@@ -45,8 +45,8 @@
 .code-clipboard-container {
   background: var(--surfaces-bg-card);
   font-family: monospace;
-  height: 500px;
-  max-height: 500px;
+  height: 100%;
+  max-height: 470px;
   overflow: auto;
   padding: 1rem;
   position: relative;
@@ -118,7 +118,7 @@
   display: flex;
   justify-content: end;
   padding-right: 2px;
-  width: 100%;
+  width: 20px;
 }
 
 #data-upload-id {
@@ -130,6 +130,7 @@
   text-align: center;
 }
 
+/*
 #settings-api-key-toggle .form-check-input {
   border-radius: 8px;
 }
@@ -137,7 +138,7 @@
 #settings-api-base-toggle .form-check-input {
   border-radius: 8px;
 }
-
+*/
 #toggle-div-api-base,
 #toggle-div-api-key {
   align-items: center;
@@ -158,3 +159,150 @@
   width: 100%;
 }
 
+.toggle-div {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  justify-content: end;
+  padding-top: 6px;
+  width: 100%;
+}
+
+.form-check .form-check-input {
+  border-radius: 8px;
+}
+
+#settings-api-key-toggle .form-check-input {
+  border-radius: 8px;
+}
+
+#settings-api-base-toggle .form-check-input {
+  border-radius: 8px;
+}
+
+.form-check {
+  padding-top: 2px;
+}
+
+.modal-content {
+  width: fit-content;
+}
+
+.btn-primary:enabled:has(#dropdown-menu-icon) {
+  background-color: inherit;
+  color: var(--text-active);
+}
+
+.btn-primary:disabled:has(#dropdown-menu-icon) {
+  background-color: inherit;
+  color: var(--text-active);
+}
+
+.download-button {
+  background-color: inherit;
+  color: var(--text-active);
+  width: 100%;
+}
+
+#modal-table-icon {
+  cursor: pointer;
+}
+
+.dropdown-menu-toggle-class {
+  background-color: inherit;
+  color: var(--text-active);
+  height: 2rem;
+  scale: 90%;
+}
+
+.dropdown-menu-toggle-class:hover {
+  background-color: inherit;
+  color: var(--text-active);
+  cursor: pointer;
+  height: 2rem;
+  scale: 90%;
+}
+
+.dropdown-menu-toggle-class.btn-primary:focus:not(
+    :focus-visible,
+    :disabled,
+    .disabled
+  ) {
+  background-color: inherit;
+  color: var(--text-active);
+}
+
+.modal-class {
+  max-height: 600px;
+  max-width: 1000px;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+#right-header {
+  display: none;
+}
+
+.custom_header {
+  align-items: center;
+  border-bottom: 1px solid var(--border-subtle-alpha-01);
+  display: flex;
+  flex-direction: row;
+  height: 60px;
+  justify-content: space-between;
+  min-height: 0;
+  width: 100%;
+}
+
+#right-side {
+  padding-top: 0;
+}
+
+.header-logo {
+  width: 48px;
+}
+/* stylelint-disable-next-line selector-id-pattern */
+#upload-data-container_title {
+  font-size: 14px;
+  padding-top: 4px;
+}
+
+#dropdown-menu-id {
+  align-items: center;
+  border: 0.5px solid gray;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+}
+
+#custom-header-div {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: center;
+  width: 100%;
+}
+
+#custom-header-title {
+  align-items: center;
+  display: flex;
+  font-size: 28px;
+  font-weight: 400;
+}
+
+#table-modal-div {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+#data-upload {
+  color: var(--text-secondary);
+}
+
+#open-settings-id:hover {
+  cursor: pointer;
+}

components.py

@@ -1,15 +1,16 @@
 """Contains custom components used within a dashboard."""
 
-from typing import List, Literal
+from typing import Literal
 
 import black
 import dash_bootstrap_components as dbc
 import vizro.models as vm
-from dash import dcc, html
+from dash import dcc, get_asset_url, html
 from pydantic import PrivateAttr
 from vizro.models import Action
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._models_utils import _log_call
+from vizro.models.types import capture
 
 
 class UserPromptTextArea(vm.VizroBaseModel):
@@ -21,12 +22,12 @@ class UserPromptTextArea(vm.VizroBaseModel):
         type (Literal["user_input"]): Defaults to `"user_text_area"`.
         title (str): Title to be displayed. Defaults to `""`.
         placeholder (str): Default text to display in input field. Defaults to `""`.
-        actions (Optional[List[Action]]): Defaults to `[]`.
+        actions (Optional[list[Action]]): Defaults to `[]`.
 
     """
 
     type: Literal["user_text_area"] = "user_text_area"
-    actions: List[Action] = []  # noqa: RUF012
+    actions: list[Action] = []  # noqa: RUF012
 
     _set_actions = _action_validator_factory("value")
 
@@ -50,12 +51,12 @@ class UserUpload(vm.VizroBaseModel):
     Args:
         type (Literal["upload"]): Defaults to `"upload"`.
         title (str): Title to be displayed.
-        actions (List[Action]): See [`Action`][vizro.models.Action]. Defaults to `[]`.
+        actions (list[Action]): See [`Action`][vizro.models.Action]. Defaults to `[]`.
 
     """
 
     type: Literal["upload"] = "upload"
-    actions: List[Action] = []  # noqa: RUF012
+    actions: list[Action] = []  # noqa: RUF012
 
     # 'contents' property is input to custom action callback
     _input_property: str = PrivateAttr("contents")
@@ -68,9 +69,7 @@ class UserUpload(vm.VizroBaseModel):
             [
                 dcc.Upload(
                     id=self.id,
-                    children=html.Div(
-                        ["Drag and Drop or ", html.A("Select Files")], style={"fontColor": "rgba(255, 255, 255, 0.6)"}
-                    ),
+                    children=html.Div(["Drag and Drop or ", html.A("Select Files")], id="data-upload"),
                 ),
             ]
         )
@@ -114,7 +113,7 @@ class MyDropdown(vm.Dropdown):
 
 
 class Modal(vm.VizroBaseModel):
-    """Modal to convey warning message"""
+    """Modal to convey warning message."""
 
     type: Literal["modal"] = "modal"
 
@@ -129,15 +128,17 @@ class Modal(vm.VizroBaseModel):
                         """### Do NOT upload any sensitive or personally identifying data.
 
 #### Reasoning:
-This space is hosted publicly running one server in a single container. Further this UI executes dynamically created code on the server. It thus
-cannot guarantee the security of your data. In addition it sends the user query and the data to the chosen LLM vendor API. This is not an exhaustive list.
+This space is hosted publicly running one server in a single container. Further this UI executes dynamically created
+code on the server. It thus cannot guarantee the security of your data. In addition it sends the user query and the
+data to the chosen LLM vendor API. This is not an exhaustive list.
 
 #### Alternatives:
+If sending your query and data to a LLM is acceptable, you can pull and run this image locally. This will avoid sharing
+an instance with others. You can do so by clicking the three dots in the top right of the HuggingFace banner
+and click `Run with Docker`.
 
-If sending your query and data to a LLM is acceptable, you can pull and run this image locally. This will avoid sharing an instance with others. 
-To do so by, click the three dots in the top right of the HuggingFace banner and then select "Run with Docker".
-
-Always exercise caution when sharing data online and understand your responsibilities regarding data privacy and security.
+Always exercise caution when sharing data online and understand your responsibilities regarding data privacy
+and security.
 """
                     )
                 ),
@@ -151,7 +152,7 @@ class OffCanvas(vm.VizroBaseModel):
     """OffCanvas component for settings."""
 
     type: Literal["offcanvas"] = "offcanvas"
-    options: List[str]
+    options: list[str]
     value: str
 
     def build(self):
@@ -216,16 +217,6 @@ class OffCanvas(vm.VizroBaseModel):
         return offcanvas
 
 
-class MyPage(vm.Page):
-    """Custom page."""
-
-    type: Literal["my_page"] = "my_page"
-
-    def pre_build(self):
-        """Overwriting pre_build."""
-        pass
-
-
 class Icon(vm.VizroBaseModel):
     """Icon component for settings."""
 
@@ -246,5 +237,131 @@ class CustomDashboard(vm.Dashboard):
         """Returns custom dashboard."""
         dashboard_build_obj = super().build()
         dashboard_build_obj.children.append(dcc.Store(id="data-store-id", storage_type="session"))
-        dashboard_build_obj.children.append(dcc.Store(id="outputs-store-id", storage_type="session"))
+        dashboard_build_obj.children.append(dcc.Store(id="code-output-store-id", storage_type="session"))
         return dashboard_build_obj
+
+
+class ToggleSwitch(vm.VizroBaseModel):
+    """Custom toggle switch model."""
+
+    type: Literal["toggle_switch"] = "toggle_switch"
+
+    def build(self):
+        """Returns custom toggle switch component."""
+        toggle_component = html.Div(
+            children=[
+                html.P("Plotly"),
+                html.Div(
+                    dbc.Switch(id="toggle-switch", value=True, style={"borderRadius": "8px"}),
+                    style={"paddingRight": "4px"},
+                ),
+                html.P("Vizro"),
+            ],
+            className="toggle-div",
+        )
+        return toggle_component
+
+
+@capture("figure")
+def custom_table(data_frame):
+    """Custom table figure."""
+    table = dbc.Table.from_dataframe(data_frame, striped=False, bordered=True, hover=True)
+
+    table_modal = html.Div(
+        [
+            html.Span(
+                "table_view",
+                className="material-symbols-outlined",
+                id="modal-table-icon",
+                style={"color": "gray", "cursor": "default"},
+            ),
+            dbc.Tooltip(
+                "Click to view data!",
+                placement="top",
+                target="modal-table-icon",
+                style={"display": "none"},
+                id="modal-table-tooltip",
+            ),
+            html.P(
+                id="upload-message-id", children=["Upload your data file (csv or excel)"], style={"paddingTop": "10px"}
+            ),
+            dbc.Modal(
+                id="data-modal",
+                children=[
+                    dbc.ModalHeader(dbc.ModalTitle(id="modal-title", children="No data uploaded!")),
+                    dbc.ModalBody(
+                        id="modal-table",
+                        children=table,
+                    ),
+                ],
+                size="xl",
+                modal_class_name="modal-class",
+            ),
+        ],
+        id="table-modal-div",
+    )
+    return table_modal
+
+
+class DropdownMenu(vm.VizroBaseModel):
+    """Custom dropdown menu component."""
+
+    type: Literal["dropdown_menu"] = "dropdown_menu"
+
+    def build(self):
+        """Returns custom dropdown menu."""
+        dropdown_menu = dbc.DropdownMenu(
+            id="dropdown-menu-button",
+            label="Download ",
+            children=[
+                dbc.DropdownMenuItem(
+                    children=[
+                        dbc.Button(children="JSON", id=f"{self.id}-json", className="download-button"),
+                    ]
+                ),
+                dbc.DropdownMenuItem(
+                    children=[
+                        dbc.Button(children="HTML", id=f"{self.id}-html", className="download-button"),
+                    ]
+                ),
+                dcc.Download(id="download-file"),
+            ],
+            toggleClassName="dropdown-menu-toggle-class",
+        )
+        download_div = html.Div(
+            children=[
+                html.Span("download", className="material-symbols-outlined", id=f"{self.id}-icon"),
+                dropdown_menu,
+                dbc.Tooltip(
+                    "Download this plot to your device as a plotly JSON or interactive HTML file "
+                    "for easy sharing or future use.",
+                    target="dropdown-menu-icon",
+                ),
+            ],
+            id="dropdown-menu-id",
+        )
+
+        return download_div
+
+
+class HeaderComponent(vm.VizroBaseModel):
+    """Custom header component."""
+
+    type: Literal["header"] = "header"
+
+    def build(self):
+        """Returns custom header component."""
+        title = html.Header("Vizro", id="custom-header-title")
+        header = html.Div(
+            children=[html.Img(src=get_asset_url("logo.svg"), alt="Vizro logo", className="header-logo"), title],
+            id="custom-header-div",
+        )
+        icon = html.Div(
+            children=[
+                html.Span("settings", className="material-symbols-outlined", id="open-settings-id"),
+                dbc.Tooltip("Settings", target="open-settings-id"),
+            ],
+            className="settings-div",
+        )
+
+        return html.Div(children=[header, icon], className="custom_header")

requirements.in

@@ -1,6 +1,6 @@
 gunicorn
-vizro-ai>=0.2.1
+vizro-ai>=0.3.0
 black
-jupyter
 openpyxl
-langgraph-checkpoint<=1.0.12
+langchain_anthropic
+langchain_mistralai

requirements.txt

@@ -1,43 +1,32 @@
 # This file was autogenerated by uv via the following command:
 #    uv pip compile requirements.in -o requirements.txt
-aiohappyeyeballs==2.4.3
+aiohappyeyeballs==2.4.0
     # via aiohttp
-aiohttp==3.10.8
+aiohttp==3.10.5
     # via langchain
 aiosignal==1.3.1
     # via aiohttp
 annotated-types==0.7.0
     # via pydantic
-anyio==4.6.0
+anthropic==0.38.0
+    # via langchain-anthropic
+anyio==4.4.0
     # via
+    #   anthropic
     #   httpx
-    #   jupyter-server
     #   openai
-appnope==0.1.4
-    # via ipykernel
-argon2-cffi==23.1.0
-    # via jupyter-server
-argon2-cffi-bindings==21.2.0
-    # via argon2-cffi
-arrow==1.3.0
-    # via isoduration
-asttokens==2.4.1
-    # via stack-data
-async-lru==2.0.4
-    # via jupyterlab
-attrs==24.2.0
+async-timeout==4.0.3
     # via
     #   aiohttp
-    #   jsonschema
-    #   referencing
-babel==2.16.0
-    # via jupyterlab-server
-beautifulsoup4==4.12.3
-    # via nbconvert
+    #   langchain
+attrs==24.2.0
+    # via aiohttp
+autoflake==2.3.1
+    # via vizro-ai
 black==24.8.0
-    # via -r requirements.in
-bleach==6.1.0
-    # via nbconvert
+    # via
+    #   -r requirements.in
+    #   vizro-ai
 blinker==1.8.2
     # via flask
 cachelib==0.9.0
@@ -47,18 +36,12 @@ certifi==2024.8.30
     #   httpcore
     #   httpx
     #   requests
-cffi==1.17.1
-    # via argon2-cffi-bindings
 charset-normalizer==3.3.2
     # via requests
 click==8.1.7
     # via
     #   black
     #   flask
-comm==0.2.2
-    # via
-    #   ipykernel
-    #   ipywidgets
 dash==2.18.1
     # via
     #   dash-ag-grid
@@ -76,32 +59,32 @@ dash-mantine-components==0.12.1
     # via vizro
 dash-table==5.0.0
     # via dash
-debugpy==1.8.6
-    # via ipykernel
-decorator==5.1.1
-    # via ipython
 defusedxml==0.7.1
-    # via nbconvert
+    # via langchain-anthropic
 distro==1.9.0
-    # via openai
+    # via
+    #   anthropic
+    #   openai
 et-xmlfile==1.1.0
     # via openpyxl
-executing==2.1.0
-    # via stack-data
-fastjsonschema==2.20.0
-    # via nbformat
+exceptiongroup==1.2.2
+    # via anyio
+filelock==3.16.1
+    # via huggingface-hub
 flask==3.0.3
     # via
     #   dash
     #   flask-caching
 flask-caching==2.3.0
     # via vizro
-fqdn==1.5.1
-    # via jsonschema
 frozenlist==1.4.1
     # via
     #   aiohttp
     #   aiosignal
+fsspec==2024.10.0
+    # via huggingface-hub
+greenlet==3.1.0
+    # via sqlalchemy
 gunicorn==23.0.0
     # via -r requirements.in
 h11==0.14.0
@@ -110,173 +93,82 @@ httpcore==1.0.5
     # via httpx
 httpx==0.27.2
     # via
-    #   jupyterlab
+    #   anthropic
+    #   langchain-mistralai
     #   langsmith
     #   openai
-idna==3.10
+httpx-sse==0.4.0
+    # via langchain-mistralai
+huggingface-hub==0.26.2
+    # via tokenizers
+idna==3.8
     # via
     #   anyio
     #   httpx
-    #   jsonschema
     #   requests
     #   yarl
 importlib-metadata==8.5.0
-    # via dash
-ipykernel==6.29.5
-    # via
-    #   jupyter
-    #   jupyter-console
-    #   jupyterlab
-ipython==8.27.0
-    # via
-    #   ipykernel
-    #   ipywidgets
-    #   jupyter-console
-ipywidgets==8.1.5
-    # via jupyter
-isoduration==20.11.0
-    # via jsonschema
+    # via
+    #   dash
+    #   flask
 itsdangerous==2.2.0
     # via flask
-jedi==0.19.1
-    # via ipython
 jinja2==3.1.4
-    # via
-    #   flask
-    #   jupyter-server
-    #   jupyterlab
-    #   jupyterlab-server
-    #   nbconvert
+    # via flask
 jiter==0.5.0
-    # via openai
-json5==0.9.25
-    # via jupyterlab-server
+    # via
+    #   anthropic
+    #   openai
 jsonpatch==1.33
     # via langchain-core
 jsonpointer==3.0.0
-    # via
-    #   jsonpatch
-    #   jsonschema
-jsonschema==4.23.0
-    # via
-    #   jupyter-events
-    #   jupyterlab-server
-    #   nbformat
-jsonschema-specifications==2023.12.1
-    # via jsonschema
-jupyter==1.1.1
-    # via -r requirements.in
-jupyter-client==8.6.3
-    # via
-    #   ipykernel
-    #   jupyter-console
-    #   jupyter-server
-    #   nbclient
-jupyter-console==6.6.3
-    # via jupyter
-jupyter-core==5.7.2
-    # via
-    #   ipykernel
-    #   jupyter-client
-    #   jupyter-console
-    #   jupyter-server
-    #   jupyterlab
-    #   nbclient
-    #   nbconvert
-    #   nbformat
-jupyter-events==0.10.0
-    # via jupyter-server
-jupyter-lsp==2.2.5
-    # via jupyterlab
-jupyter-server==2.14.2
-    # via
-    #   jupyter-lsp
-    #   jupyterlab
-    #   jupyterlab-server
-    #   notebook
-    #   notebook-shim
-jupyter-server-terminals==0.5.3
-    # via jupyter-server
-jupyterlab==4.2.5
-    # via
-    #   jupyter
-    #   notebook
-jupyterlab-pygments==0.3.0
-    # via nbconvert
-jupyterlab-server==2.27.3
-    # via
-    #   jupyterlab
-    #   notebook
-jupyterlab-widgets==3.0.13
-    # via ipywidgets
+    # via jsonpatch
 langchain==0.2.16
     # via vizro-ai
-langchain-core==0.2.41
+langchain-anthropic==0.1.23
+    # via -r requirements.in
+langchain-core==0.2.39
     # via
     #   langchain
+    #   langchain-anthropic
+    #   langchain-mistralai
     #   langchain-openai
     #   langchain-text-splitters
     #   langgraph
     #   langgraph-checkpoint
-langchain-openai==0.1.25
+langchain-mistralai==0.1.13
+    # via -r requirements.in
+langchain-openai==0.1.23
     # via vizro-ai
 langchain-text-splitters==0.2.4
     # via langchain
 langgraph==0.2.16
     # via vizro-ai
-langgraph-checkpoint==1.0.12
+langgraph-checkpoint==1.0.9
     # via
-    #   -r requirements.in
     #   langgraph
-langsmith==0.1.129
+    #   vizro-ai
+langsmith==0.1.119
     # via
     #   langchain
     #   langchain-core
 markupsafe==2.1.5
     # via
     #   jinja2
-    #   nbconvert
     #   werkzeug
-matplotlib-inline==0.1.7
-    # via
-    #   ipykernel
-    #   ipython
-mistune==3.0.2
-    # via nbconvert
-msgpack==1.1.0
-    # via langgraph-checkpoint
 multidict==6.1.0
     # via
     #   aiohttp
     #   yarl
 mypy-extensions==1.0.0
     # via black
-nbclient==0.10.0
-    # via nbconvert
-nbconvert==7.16.4
-    # via
-    #   jupyter
-    #   jupyter-server
-nbformat==5.10.4
-    # via
-    #   jupyter-server
-    #   nbclient
-    #   nbconvert
 nest-asyncio==1.6.0
-    # via
-    #   dash
-    #   ipykernel
-notebook==7.2.2
-    # via jupyter
-notebook-shim==0.2.4
-    # via
-    #   jupyterlab
-    #   notebook
+    # via dash
 numpy==1.26.4
     # via
     #   langchain
     #   pandas
-openai==1.50.2
+openai==1.45.0
     # via
     #   langchain-openai
     #   vizro-ai
@@ -284,143 +176,73 @@ openpyxl==3.1.5
     # via -r requirements.in
 orjson==3.10.7
     # via langsmith
-overrides==7.7.0
-    # via jupyter-server
 packaging==24.1
     # via
     #   black
     #   gunicorn
-    #   ipykernel
-    #   jupyter-server
-    #   jupyterlab
-    #   jupyterlab-server
+    #   huggingface-hub
     #   langchain-core
-    #   nbconvert
     #   plotly
-pandas==2.2.3
+pandas==2.2.2
     # via
     #   vizro
     #   vizro-ai
-pandocfilters==1.5.1
-    # via nbconvert
-parso==0.8.4
-    # via jedi
 pathspec==0.12.1
     # via black
-pexpect==4.9.0
-    # via ipython
-platformdirs==4.3.6
-    # via
-    #   black
-    #   jupyter-core
+platformdirs==4.3.2
+    # via black
 plotly==5.24.1
     # via dash
-prometheus-client==0.21.0
-    # via jupyter-server
-prompt-toolkit==3.0.48
-    # via
-    #   ipython
-    #   jupyter-console
-psutil==6.0.0
-    # via ipykernel
-ptyprocess==0.7.0
-    # via
-    #   pexpect
-    #   terminado
-pure-eval==0.2.3
-    # via stack-data
-pycparser==2.22
-    # via cffi
-pydantic==2.9.2
+pydantic==2.9.1
     # via
+    #   anthropic
     #   langchain
     #   langchain-core
     #   langsmith
     #   openai
     #   vizro
-pydantic-core==2.23.4
+pydantic-core==2.23.3
     # via pydantic
-pygments==2.18.0
-    # via
-    #   ipython
-    #   jupyter-console
-    #   nbconvert
+pyflakes==3.2.0
+    # via autoflake
 python-dateutil==2.9.0.post0
-    # via
-    #   arrow
-    #   jupyter-client
-    #   pandas
+    # via pandas
 python-dotenv==1.0.1
     # via vizro-ai
-python-json-logger==2.0.7
-    # via jupyter-events
 pytz==2024.2
     # via pandas
 pyyaml==6.0.2
     # via
-    #   jupyter-events
+    #   huggingface-hub
     #   langchain
     #   langchain-core
-pyzmq==26.2.0
-    # via
-    #   ipykernel
-    #   jupyter-client
-    #   jupyter-console
-    #   jupyter-server
-referencing==0.35.1
-    # via
-    #   jsonschema
-    #   jsonschema-specifications
-    #   jupyter-events
 regex==2024.9.11
     # via tiktoken
 requests==2.32.3
     # via
     #   dash
-    #   jupyterlab-server
+    #   huggingface-hub
     #   langchain
     #   langsmith
     #   tiktoken
 retrying==1.3.4
     # via dash
-rfc3339-validator==0.1.4
-    # via
-    #   jsonschema
-    #   jupyter-events
-rfc3986-validator==0.1.1
-    # via
-    #   jsonschema
-    #   jupyter-events
-rpds-py==0.20.0
-    # via
-    #   jsonschema
-    #   referencing
-ruff==0.6.8
+ruff==0.6.4
     # via vizro
-send2trash==1.8.3
-    # via jupyter-server
-setuptools==75.1.0
-    # via
-    #   dash
-    #   jupyterlab
+setuptools==74.1.2
+    # via dash
 six==1.16.0
     # via
-    #   asttokens
-    #   bleach
     #   python-dateutil
     #   retrying
-    #   rfc3339-validator
 sniffio==1.3.1
     # via
+    #   anthropic
     #   anyio
     #   httpx
     #   openai
-soupsieve==2.6
-    # via beautifulsoup4
-sqlalchemy==2.0.35
+sqlalchemy==2.0.34
     # via langchain
-stack-data==0.6.3
-    # via ipython
 tabulate==0.9.0
     # via vizro-ai
 tenacity==8.5.0
@@ -428,79 +250,48 @@ tenacity==8.5.0
     #   langchain
     #   langchain-core
     #   plotly
-terminado==0.18.1
-    # via
-    #   jupyter-server
-    #   jupyter-server-terminals
 tiktoken==0.7.0
     # via langchain-openai
-tinycss2==1.3.0
-    # via nbconvert
-tornado==6.4.1
-    # via
-    #   ipykernel
-    #   jupyter-client
-    #   jupyter-server
-    #   jupyterlab
-    #   notebook
-    #   terminado
+tokenizers==0.20.1
+    # via
+    #   anthropic
+    #   langchain-mistralai
+tomli==2.0.1
+    # via
+    #   autoflake
+    #   black
 tqdm==4.66.5
-    # via openai
-traitlets==5.14.3
-    # via
-    #   comm
-    #   ipykernel
-    #   ipython
-    #   ipywidgets
-    #   jupyter-client
-    #   jupyter-console
-    #   jupyter-core
-    #   jupyter-events
-    #   jupyter-server
-    #   jupyterlab
-    #   matplotlib-inline
-    #   nbclient
-    #   nbconvert
-    #   nbformat
-types-python-dateutil==2.9.0.20240906
-    # via arrow
+    # via
+    #   huggingface-hub
+    #   openai
 typing-extensions==4.12.2
     # via
+    #   anthropic
+    #   anyio
+    #   black
     #   dash
+    #   huggingface-hub
     #   langchain-core
+    #   multidict
     #   openai
     #   pydantic
     #   pydantic-core
     #   sqlalchemy
-tzdata==2024.2
+tzdata==2024.1
     # via pandas
-uri-template==1.3.0
-    # via jsonschema
 urllib3==2.2.3
     # via requests
 vizro==0.1.23
     # via vizro-ai
-vizro-ai==0.2.3
+vizro-ai==0.3.0
     # via -r requirements.in
-wcwidth==0.2.13
-    # via prompt-toolkit
-webcolors==24.8.0
-    # via jsonschema
-webencodings==0.5.1
-    # via
-    #   bleach
-    #   tinycss2
-websocket-client==1.8.0
-    # via jupyter-server
 werkzeug==3.0.4
     # via
     #   dash
     #   flask
-widgetsnbextension==4.0.13
-    # via ipywidgets
 wrapt==1.16.0
     # via vizro
-yarl==1.13.1
+yarl==1.11.1
     # via aiohttp
-zipp==3.20.2
+zipp==3.20.1
     # via importlib-metadata