components/chatbot.py

from dash import html, dcc
import dash_mantine_components as dmc
from dash_iconify import DashIconify

styleUSERIA = {
    "textAlign": "right",
    "marginBottom" : "5px"
}
def create_chatbot_panel():
    return dmc.Drawer(
        id="chatbot-drawer",
        title="AI Chatbot",
        padding="md",
        size="40%",
        position="right",
        zIndex=10000,
        opened=False, # Explicitly set to closed for initial load
        children=[
            html.Div(
                [
                    # Chat history
                    dmc.Paper(
                        p="md",
                        shadow="xs",
                        style={"height": "calc(100vh - 250px)", "overflowY": "auto"},
                        children=[
                            # Chat messages will go here
                            dcc.Store(id="store-conversation", data=""),
                            dcc.Loading(html.Div(id="loading-component", style={"margin-top":"10%","z-index":"100"}),type="default"),
                            html.Div(
                                html.Div(id="display-conversation"),
                                style={
                                    "overflow-y": "auto",
                                    "display": "flex",
                                    "flex-direction": "column-reverse",
                                },
                            )
                        ],
                    ),
                    # Chat controls
                    dmc.Group(
                        justify="flex-end",
                        mt="sm",
                        children=[
                            dmc.Tooltip(
                                label="Nouveau Chat",
                                children=[dmc.ActionIcon(DashIconify(icon="material-symbols:add"), variant="outline")],
                            ),
                            dmc.Tooltip(
                                label="Relancer",
                                children=[dmc.ActionIcon(DashIconify(icon="material-symbols:refresh"), variant="outline")],
                            ),
                        ],
                    ),
                    # Chat input
                    dmc.Textarea(
                        id="user-input",
                        placeholder="Envoyer un message...",
                        autosize=True,
                        minRows=2,
                        maxRows=5,
                        rightSection=dmc.ActionIcon(
                            DashIconify(icon="material-symbols:send-outline"),
                            variant="filled",
                            color="blue",
                            id="submit",
                            style={"cursor": "pointer"},
                        ),
                        mt="md",
                    ),
                ]
            )
        ],
    )