Integrate a chatbox feature to enhance the capabilities of natural language applications

[matheus695p]

What's the problem this feature will solve?

Currently, there is no text input feature similar to Streamlit's chatbox in place

Describe the solution you'd like

Create the custom component to recieve text

Alternative Solutions

-

Additional context

This would help teams create natural language applications using vizro

Code of Conduct

• [X] I agree to follow the Code of Conduct.

[huong-li-nguyen]

Hey @matheus695p ,

That's a great use case! 👍

We have it on our roadmap to add these components to our public library soon. However, as you already mentioned, you can add these components yourself by leveraging our custom components functionality. The custom components allow you to wrap any dash component (e.g., the dash core components or dash_bootstrap_components) inside the dashboard. I recommend following the steps explained here ✅

Example

In the example below, I created two custom components based on Dash's single and multi-line text components. You then need to register your custom components as Page.components so that you can use them inside the Dashboard.

"""Example to show dashboard configuration."""
from typing import List, Literal

import dash_bootstrap_components as dbc
from dash import dcc, html

try:
    from pydantic.v1 import Field
except ImportError:
    pass

import vizro.models as vm
from vizro import Vizro
from vizro.models import Action, VizroBaseModel
from vizro.models._action._actions_chain import _action_validator_factory

class UserInput(VizroBaseModel):
    type: Literal["user_input"] = "user_input"
    title: str = Field("", description="Title to be displayed")
    actions: List[Action] = []

    # Validator for actions, if needed
    set_actions = _action_validator_factory("value")

    def build(self):
        return html.Div(
            [
                html.P(self.title) if self.title else None,
                dbc.Input(id=self.id, className="user_input"),
            ],
            className="selector_container",
        )

class Textarea(VizroBaseModel):
    type: Literal["text_area"] = "text_area"  # Note change here
    title: str = Field("", description="Title to be displayed.")
    actions: List[Action] = []

    # Validator for actions, if needed
    set_actions = _action_validator_factory("value")

    def build(self):
        return html.Div(
            [
                html.P(self.title) if self.title else None,
                dcc.Textarea(id=self.id, style={"width": "100%", "height": 300}),
            ],
            className="selector_container",
        )

vm.Page.add_type("components", Textarea)  # Note change here
vm.Page.add_type("components", UserInput)  # Note change here

page = vm.Page(
    title="Text Component",
    components=[
        UserInput(title="Please provide your single-line query:"),
        Textarea(title="Please provide your multi-line query:"),
    ],
)
dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()

(Optional) Add visual styling

This is optional but would make the component fit better into the general Vizro dashboard themes:

You can add the following CSS code to a .css file and insert it into your assets folder:

textarea {
  color: var(--text-secondary);
}

Result

This will then give you this result:

Let me know if this works for you and if you have any other questions 👍