pylogue 0.3__py3-none-any.whl → 0.3.30__py3-none-any.whl

pylogue/{chatapp.py → legacy/chatapp.py}

@@ -7,6 +7,7 @@ __all__ = ['ChatAppConfig', 'ChatApp', 'create_default_chat_app', 'example_respo
 from typing import Optional, Callable, List, Dict, Any
 from dataclasses import dataclass, field
 from fasthtml.common import *
+from monsterui.all import Theme, Container, ContainerT, Card, CardT, TextPresets
 import asyncio
 import inspect
 
@@ -14,6 +15,7 @@ from .session import SessionManager, InMemorySessionManager, ChatSession, Messag
 from .service import ChatService, Responder, ErrorHandler
 from .renderer import ChatRenderer
 from .cards import ChatCard
+from .design_system import get_color, get_spacing, get_typography
 
 # %% ../../nbs/4-ChatApp.ipynb 3
 @dataclass
@@ -27,11 +29,18 @@ class ChatAppConfig:
     # Initial messages
     initial_messages_factory: Optional[Callable[[], List[Message]]] = None
 
-    # Styling
-    bg_color: str = "#1a1a1a"
-    header_style: str = "text-align: center; padding: 1em; color: white;"
+    # Styling (using design system defaults)
+    bg_color: str = None
+    header_style: str = None
     container_style: Optional[str] = None
 
+    def __post_init__(self):
+        """Initialize with design system defaults if not provided."""
+        if self.bg_color is None:
+            self.bg_color = get_color("dark_bg")
+        if self.header_style is None:
+            self.header_style = f"text-align: center; padding: {get_spacing('md')}; color: {get_color('light_text')};"
+
     # WebSocket settings
     ws_endpoint: str = "/ws"
     chat_endpoint: str = "/chat"
@@ -57,24 +66,24 @@ class ChatAppConfig:
         ]
 
     def get_spinner_style(self) -> str:
-        """Get spinner CSS styles."""
+        """Get spinner CSS styles (using design system)."""
         if self.spinner_css:
             return self.spinner_css
 
-        return """
-        .spinner {
+        return f"""
+        .spinner {{
             display: inline-block;
             width: 20px;
             height: 20px;
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-top-color: #fff;
+            border: 3px solid {get_color("spinner_light")};
+            border-top-color: {get_color("light_text")};
             border-radius: 50%;
             animation: spin 1s linear infinite;
-        }
-        
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
+        }}
+
+        @keyframes spin {{
+            to {{ transform: rotate(360deg); }}
+        }}
         """
 
 # %% ../../nbs/4-ChatApp.ipynb 4
@@ -108,7 +117,18 @@ class ChatApp:
 
     def _create_fasthtml_app(self) -> FastHTML:
         """Create and configure FastHTML application."""
-        headers = []
+        headers = list(Theme.blue.headers())
+
+        headers.extend(
+            [
+                Link(rel="preconnect", href="https://fonts.googleapis.com"),
+                Link(rel="preconnect", href="https://fonts.gstatic.com", crossorigin="anonymous"),
+                Link(
+                    rel="stylesheet",
+                    href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap",
+                ),
+            ]
+        )
 
         # Add markdown support
         if self.config.markdown_enabled:
@@ -121,8 +141,7 @@ class ChatApp:
         # Add spinner styles
         headers.append(Style(self.config.get_spinner_style()))
 
-        # Add mobile responsive styles from ChatCard
-        headers.append(Style(self.renderer.card.get_mobile_styles()))
+        headers.append(Style(self.renderer.get_styles()))
 
         return FastHTML(exts="ws", hdrs=tuple(headers))
 
@@ -140,20 +159,40 @@ class ChatApp:
             """Main chat interface."""
             initial_messages = self._get_initial_messages()
 
-            container_style = self.config.container_style or (
-                f"font-family: monospace, sans-serif; margin: 0; padding: 0; "
-            )
-
             return (
                 Title(self.config.page_title),
+                Meta(name="viewport", content="width=device-width, initial-scale=1.0"),
                 Body(
-                    Div(
-                        H1(self.config.app_title, style=self.config.header_style),
-                        self.renderer.render_messages(initial_messages),
-                        self.renderer.render_form(),
-                        style=container_style,
+                    Container(
+                        Div(
+                            Div(
+                                P("PYLOGUE", cls="tracking-widest text-xs uppercase text-emerald-200/70"),
+                                H1(self.config.app_title, cls="text-4xl md:text-5xl font-semibold tracking-tight"),
+                                P(
+                                    "Streaming chat UI powered by MonsterUI + FastHTML.",
+                                    cls=TextPresets.muted_sm,
+                                ),
+                                cls="space-y-3 mb-10",
+                            ),
+                            Card(
+                                Div(
+                                    self.renderer.render_messages(initial_messages),
+                                    cls="chat-scroll",
+                                ),
+                                footer=self.renderer.render_form(),
+                                header=Div(
+                                    H2("Live Conversation", cls="text-2xl font-semibold"),
+                                    P("Messages update in real time as the agent streams.", cls=TextPresets.muted_sm),
+                                    cls="space-y-2",
+                                ),
+                                body_cls="space-y-4",
+                                cls=("chat-shell", CardT.default),
+                            ),
+                            cls="pylogue-layout",
+                        ),
+                        cls=("pylogue-container", "mt-10", ContainerT.xl),
                     ),
-                    style="background-color: #000",
+                    cls="pylogue-app",
                 ),
             )
 

pylogue/legacy/design_system.py

@@ -0,0 +1,117 @@
+"""
+Design System for Pylogue
+Centralized design tokens for colors, spacing, typography, and breakpoints.
+"""
+
+from dataclasses import dataclass
+from typing import Dict
+
+
+@dataclass
+class DesignSystem:
+    """Centralized design system with consistent tokens across the application."""
+
+    # Color palette
+    COLORS: Dict[str, str] = None
+
+    # Spacing scale (using em for better scalability)
+    SPACING: Dict[str, str] = None
+
+    # Typography scale
+    TYPOGRAPHY: Dict[str, str] = None
+
+    # Border radius values
+    BORDER_RADIUS: Dict[str, str] = None
+
+    # Breakpoints for responsive design
+    BREAKPOINTS: Dict[str, str] = None
+
+    def __post_init__(self):
+        """Initialize default design tokens."""
+        if self.COLORS is None:
+            self.COLORS = {
+                # Background colors
+                "dark_bg": "#1a1a1a",
+
+                # Message role colors
+                "user_msg": "#1C0069",
+                "assistant_msg": "#004539",
+
+                # Text colors (calculated via WCAG for contrast)
+                "light_text": "#FFFFFF",
+                "dark_text": "#000000",
+
+                # Spinner colors
+                "spinner_light": "rgba(255, 255, 255, 0.3)",
+                "spinner_border": "rgba(255, 255, 255, 0.1)",
+            }
+
+        if self.SPACING is None:
+            self.SPACING = {
+                "xs": "0.5em",      # 8px at base 16px
+                "sm": "0.75em",     # 12px at base 16px
+                "md": "1em",        # 16px at base 16px
+                "lg": "1.25em",     # 20px at base 16px
+                "xl": "1.5em",      # 24px at base 16px
+                "2xl": "2em",       # 32px at base 16px
+                "3xl": "3em",       # 48px at base 16px
+            }
+
+        if self.TYPOGRAPHY is None:
+            self.TYPOGRAPHY = {
+                "base": "1em",
+                "sm": "0.875em",    # 14px at base 16px
+                "md": "1em",        # 16px
+                "lg": "1.1em",      # 17.6px
+                "xl": "1.25em",     # 20px
+                "2xl": "1.5em",     # 24px
+                "weight_normal": "normal",
+                "weight_bold": "bold",
+            }
+
+        if self.BORDER_RADIUS is None:
+            self.BORDER_RADIUS = {
+                "sm": "0.5em",
+                "md": "1em",
+                "lg": "1.5em",
+            }
+
+        if self.BREAKPOINTS is None:
+            self.BREAKPOINTS = {
+                "mobile": "768px",
+                "tablet": "1024px",
+            }
+
+
+# Global default instance
+default_design_system = DesignSystem()
+
+
+def get_color(name: str) -> str:
+    """Get a color value from the design system."""
+    return default_design_system.COLORS.get(name, "")
+
+
+def get_spacing(name: str) -> str:
+    """Get a spacing value from the design system."""
+    return default_design_system.SPACING.get(name, "")
+
+
+def get_typography(name: str) -> str:
+    """Get a typography value from the design system."""
+    return default_design_system.TYPOGRAPHY.get(name, "")
+
+
+def get_border_radius(name: str) -> str:
+    """Get a border radius value from the design system."""
+    return default_design_system.BORDER_RADIUS.get(name, "")
+
+
+def get_breakpoint(name: str) -> str:
+    """Get a breakpoint value from the design system."""
+    return default_design_system.BREAKPOINTS.get(name, "")
+
+
+def get_mobile_media_query() -> str:
+    """Get the standard mobile media query."""
+    return f"@media (max-width: {get_breakpoint('mobile')})"

pylogue/legacy/renderer.py

@@ -0,0 +1,284 @@
+# 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,
+        )