# AUTOGENERATED! DO NOT EDIT! File to edit: ../../nbs/3-Renderer.ipynb.

# %% auto 0
__all__ = ['ChatRenderer']

# %% ../../nbs/3-Renderer.ipynb 1
from typing import List, Dict, Any, Optional
from fasthtml.common import *
from monsterui.all import Button, ButtonT
from .cards import ChatCard
from .session import Message

# %% ../../nbs/3-Renderer.ipynb 3
class ChatRenderer:
    """Renders chat components with customizable styling."""

    CHAT_DIV_ID = "chat-cards"

    def __init__(
        self,
        card: Optional[ChatCard] = None,
        input_placeholder: str = "Type a message...",
        input_style: Optional[str] = None,
        input_cls: Optional[str] = None,
        chat_container_style: Optional[str] = None,
        chat_container_cls: Optional[str] = None,
        form_cls: Optional[str] = None,
        submit_text: str = "Send",
        ws_endpoint: str = "/ws",
    ):
        """
        Initialize ChatRenderer.

        Args:
            card: ChatCard instance for rendering messages
            input_placeholder: Placeholder text for input field
            input_style: Custom CSS style for input field
            chat_container_style: Custom CSS style for chat container
            ws_endpoint: WebSocket endpoint path
        """
        self.card = card or ChatCard()
        self.input_placeholder = input_placeholder
        self.ws_endpoint = ws_endpoint
        self.input_style = input_style
        self.input_cls = input_cls or "uk-input chat-input-field"
        self.chat_container_style = chat_container_style
        self.chat_container_cls = chat_container_cls or "chat-stream"
        self.form_cls = form_cls or "chat-form"
        self.submit_text = submit_text

    def get_styles(self) -> str:
        """Shared stylesheet for the chat experience."""
        return """
        :root {
            --pylogue-bg: #0b0f1a;
            --pylogue-panel: #0f172a;
            --pylogue-panel-border: #1e293b;
            --pylogue-accent: #22c55e;
            --pylogue-accent-2: #38bdf8;
            --pylogue-text: #e2e8f0;
        }

        body {
            font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
            background: var(--pylogue-bg);
            color: var(--pylogue-text);
        }

        .pylogue-app {
            min-height: 100vh;
            background:
                radial-gradient(1200px 600px at 80% -10%, rgba(34, 197, 94, 0.18), transparent 60%),
                radial-gradient(900px 500px at 10% 0%, rgba(56, 189, 248, 0.15), transparent 55%),
                linear-gradient(180deg, #0b0f1a 0%, #0a0f1d 100%);
        }

        .pylogue-container {
            padding-bottom: 3rem;
        }

        .pylogue-layout {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        .chat-shell {
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid var(--pylogue-panel-border);
            box-shadow: 0 20px 60px rgba(2, 6, 23, 0.45);
            backdrop-filter: blur(16px);
        }

        .chat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .chat-stream {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1.5rem 0;
        }

        .chat-scroll {
            max-height: 70vh;
            overflow-y: auto;
            padding-right: 0.5rem;
        }

        .chat-scroll::-webkit-scrollbar {
            width: 6px;
        }

        .chat-scroll::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.4);
            border-radius: 999px;
        }

        .chat-row {
            display: flex;
        }

        .chat-row--user {
            justify-content: flex-end;
        }

        .chat-row--assistant {
            justify-content: flex-start;
        }

        .chat-bubble {
            max-width: min(70ch, 90%);
            border-radius: 1.25rem;
            padding: 0.9rem 1.1rem;
            position: relative;
        }

        .chat-bubble--user {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(56, 189, 248, 0.85));
            color: #0b1220;
            box-shadow: 0 12px 30px rgba(34, 197, 94, 0.25);
        }

        .chat-bubble--assistant {
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.2);
            color: var(--pylogue-text);
        }

        .chat-role {
            display: block;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .chat-text {
            line-height: 1.6;
        }

        .chat-form {
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }

        .chat-input-field {
            flex: 1;
            background: rgba(15, 23, 42, 0.9);
            border-color: rgba(148, 163, 184, 0.3);
        }

        .chat-input-field:focus {
            border-color: var(--pylogue-accent);
            box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
        }

        .chat-send {
            min-width: 6.5rem;
        }

        @media (max-width: 768px) {
            .chat-shell {
                margin: 0 0.75rem;
            }
            .chat-stream {
                padding: 1rem 0;
            }
            .chat-form {
                flex-direction: column;
                align-items: stretch;
            }
            .chat-send {
                width: 100%;
            }
        }
        """

    def render_message(self, message: Message) -> Any:
        """Render a single message."""
        return self.card(message.to_dict())

    def render_messages(self, messages: List[Message]) -> Any:
        """
        Render a list of messages in a container.

        Args:
            messages: List of Message objects to render

        Returns:
            FastHTML Div containing all rendered messages
        """
        return Div(
            *[self.render_message(msg) for msg in messages],
            id=self.CHAT_DIV_ID,
            cls=self.chat_container_cls,
            style=self.chat_container_style,
        )

    def render_messages_from_dicts(self, message_dicts: List[Dict[str, Any]]) -> Any:
        """
        Render messages from dictionary representations.

        Args:
            message_dicts: List of message dictionaries

        Returns:
            FastHTML Div containing all rendered messages
        """
        messages = [Message.from_dict(d) for d in message_dicts]
        return self.render_messages(messages)

    def render_input(self, input_id: str = "msg", autofocus: bool = True) -> Any:
        """
        Render the message input field.

        Args:
            input_id: HTML ID for the input element
            autofocus: Whether to autofocus the input

        Returns:
            FastHTML Input element
        """
        return Input(
            id=input_id,
            name="msg",
            placeholder=self.input_placeholder,
            autofocus=autofocus,
            cls=self.input_cls,
            style=self.input_style,
        )

    def render_form(
        self,
        form_id: str = "form",
        form_style: Optional[str] = None,
        ws_send: bool = True,
    ) -> Any:
        """
        Render the input form with WebSocket connection.

        Args:
            form_id: HTML ID for the form
            form_style: Custom CSS style for form
            ws_send: Whether form sends via WebSocket

        Returns:
            FastHTML Form element
        """
        return Form(
            self.render_input(),
            Button(self.submit_text, cls=(ButtonT.primary, "chat-send"), type="submit"),
            id=form_id,
            hx_ext="ws",
            ws_connect=self.ws_endpoint,
            ws_send=ws_send,
            cls=self.form_cls,
            style=form_style,
        )
