Chatnificent multi page app using use_pages=True

chatnificent_mutli.py

"""
Multi-Page Chatnificent App Example
====================================

This file shows how to create a multi-page app with Chatnificent.
Since Chatnificent is a subclass of Dash, you can use all Dash features
including multi-page apps with the pages/ directory structure.

Directory Structure:
--------------------
pages_app.py          # Main app file (shown below)
pages/
├── home.py          # Home/landing page
├── chat.py          # Chat interface page
└── about.py         # About page

Installation:
------------
pip install chatnificent[default]

Run with:
---------
python pages_app.py
# or
uv run pages_app.py
"""

# ============================================================================
# FILE: pages_app.py (Main App File)
# ============================================================================

"""
import dash_bootstrap_components as dbc
from chatnificent import Chatnificent
from dash import html, page_container

app = Chatnificent(
    use_pages=True,
    suppress_callback_exceptions=True,
)

app.layout = html.Div(
    [
        dbc.NavbarSimple(
            children=[
                dbc.NavItem(dbc.NavLink("Chat", href="/chat")),
                dbc.NavItem(dbc.NavLink("About", href="/about")),
            ],
            brand="Chatnificent Multi-Page App",
            brand_href="/",
            color="light",
            dark=False,
            className="mb-3",
        ),
        page_container,
    ]
)

if __name__ == "__main__":
    app.run(debug=True)
"""

# ============================================================================
# FILE: pages/home.py (Landing Page)
# ============================================================================

"""
import dash_bootstrap_components as dbc
from dash import html, register_page

register_page(__name__, path="/")

layout = dbc.Container(
    [
        html.Br(),
        html.H1("Welcome to the multi-page Chatnificent app"),
        html.H3(["This is essentially a Dash app with ", html.Code("use_pages=True")]),
        html.H3(html.A("Chat now!", href="/chat")),
    ]
)
"""

# ============================================================================
# FILE: pages/chat.py (Chat Interface Page)
# ============================================================================
# This is the key file - it reuses Chatnificent's built-in layout builder
# instead of creating components from scratch.

"""
from chatnificent.layout import Bootstrap
from dash import register_page

register_page(__name__, path="/chat", name="Chat")

# Use Chatnificent's layout builder to get the complete chat interface
layout_builder = Bootstrap()
layout = layout_builder.build_layout()

# That's it! The callbacks are already registered on the app instance,
# so the chat functionality works automatically.
"""

# ============================================================================
# FILE: pages/about.py (About Page)
# ============================================================================

"""
import dash_bootstrap_components as dbc
from dash import html, register_page

register_page(__name__, path="/about", name="About")

layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.H1("About Chatnificent", className="mt-4 mb-4"),
                        html.Hr(),
                        html.H4("Multi-Page LLM Chat Application"),
                        html.P(
                            [
                                "This is a demonstration of using Chatnificent with Dash's multi-page feature. ",
                                "The chat interface is on the chat page, while this is a separate about page.",
                            ],
                            className="lead",
                        ),
                        html.Hr(),
                        html.H5("Key Features:"),
                        html.Ul(
                            [
                                html.Li("Full LLM chat interface on the chat page"),
                                html.Li("Multi-page navigation using Dash pages"),
                                html.Li("Shared state across pages"),
                                html.Li("Customizable layouts and components"),
                            ]
                        ),
                        html.Hr(),
                        html.H5("How It Works", className="mt-4"),
                        html.P(
                            "Since Chatnificent is a subclass of Dash, you can use all Dash features "
                            "including multi-page apps. The key is to pass use_pages=True to Chatnificent "
                            "and create page modules in the pages/ directory."
                        ),
                        html.H6("Chat Page Code:", className="mt-3"),
                        html.Pre(
                            html.Code(
                                '''from chatnificent.layout import Bootstrap
from dash import register_page

register_page(__name__, path="/chat", name="Chat")

layout_builder = Bootstrap()
layout = layout_builder.build_layout()''',
                                style={"fontSize": "0.85rem"},
                            ),
                            style={
                                "backgroundColor": "#f8f9fa",
                                "padding": "1rem",
                                "borderRadius": "5px",
                            },
                        ),
                        html.Div(
                            [
                                html.Strong("Key Insight: "),
                                "The layout_builder.build_layout() returns the complete chat interface. ",
                                "Callbacks are already registered, so everything just works!",
                            ],
                            className="alert alert-info mt-3",
                        ),
                    ],
                    width=12,
                    lg=10,
                )
            ],
            justify="center",
        )
    ],
    fluid=True,
)
"""