src/components/chat.py

import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash import html
from dash_iconify import DashIconify


def template_card(title, content, image_url=None, id=None):
    return dmc.Col(
        dmc.Card(
            children=[
                dmc.CardSection(
                    dmc.Image(
                        src=image_url
                        or "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2426&q=80",
                        height=160,
                    )
                ),
                dmc.Group(
                    [
                        dmc.Text(title, weight=500),
                        # dmc.Badge("On Sale", color="red", variant="light"),
                    ],
                    position="apart",
                    mt="md",
                    mb="xs",
                ),
                dmc.Text(
                    content
                    or "Ask RetailGPT to analyze the performance of your store and get a detailed report.",
                    size="sm",
                    color="dimmed",
                ),
                dmc.Button(
                    "Ask RetailGPT",
                    id=f"template-ask-button-{id}",
                    variant="light",
                    color="blue",
                    fullWidth=True,
                    mt="md",
                    radius="md",
                    rightIcon=DashIconify(
                        icon="material-symbols:send-rounded"
                    ),
                ),
            ],
            withBorder=True,
            shadow="sm",
            radius="md",
        ),
        span=3,
    )


def template_menu_item(prompt, id=None):
    return dmc.MenuItem(prompt, id=f"template-ask-button-{id}", n_clicks=0)


def get_template_menu_items():
    id_list = [0, 1, 2, 3]
    prompts = [
        "How did my store perform during the last seasonal sales?",
        "What were the best weeks of the current year?",
        "What were my best-selling products last week?",
        "Show me the total sales for each store in the last 3 months",
    ]
    items = [
        template_menu_item(prompt=prompt, id=ids)
        for prompt, ids in zip(prompts, id_list)
    ]
    return items


def get_template_cards():
    titles = [
        "See your store performance",
        "Understand your customers",
        "Find your best-selling products",
        "Compare your stores",
    ]
    id_list = [0, 1, 2, 3]
    contents = [
        "How did my store perform during the last seasonal sales ?",
        "What were the best weeks of the current year ?",
        "What were my best-selling products last week?",
        "Show me the total sales for each store in the last 3 months",
    ]
    urls = [
        "https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2670&q=80",
        "https://images.unsplash.com/photo-1556740772-1a741367b93e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2670&q=80",
        "https://images.unsplash.com/photo-1511556820780-d912e42b4980?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80",
        "https://images.unsplash.com/photo-1526628953301-3e589a6a8b74?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2306&q=80",
    ]
    cards = [
        template_card(title=title, content=content, image_url=url, id=ids)
        for title, content, url, ids in zip(titles, contents, urls, id_list)
    ]
    template_cards = dmc.Grid(
        cards,
        grow=False,
        gutter="xl",
        justify="space-between",
        align="center",
    )
    return template_cards


def history_item(prompt: str, response: str):
    return dbc.ListGroupItem(
        [
            html.Div(
                [
                    html.H5(
                        "AI Generated Response",
                        className="mb-1",
                    ),
                    html.Small(
                        "Yay!",
                        className="text-success",
                    ),
                ],
                className="d-flex w-100 justify-content-between",
            ),
            html.P(
                [
                    html.Span("User: ", className="text-muted"),
                    html.Span(prompt),
                ],
                className="mb-1",
            ),
            html.P(
                [
                    html.Span("AI: ", className="text-muted"),
                    html.Span(response),
                ],
                className="mb-1",
            ),
        ],
        action=True,
        style={"cursor": "pointer"},
    )