pylogue 0.2.0__tar.gz → 0.3__tar.gz

{pylogue-0.2.0 → pylogue-0.3}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: pylogue
-Version: 0.2.0
+Version: 0.3
 Summary: A Chatbot UI built for AI agents
 Author-email: Yeshwanth Reddy <yyeshr@gmail.com>
 Maintainer-email: Yeshwanth Reddy <yyeshr@gmail.com>

{pylogue-0.2.0 → pylogue-0.3}/README.md

@@ -20,7 +20,7 @@ app.run(port=5001)
 ### Custom Styling
 
 ``` python
-from pylogue.cards import ChatCard
+from pylogue.card import ChatCard
 from pylogue.chatapp import create_default_chat_app, ChatAppConfig
 
 card = ChatCard(
@@ -51,7 +51,7 @@ from pylogue.chatapp import ChatApp, ChatAppConfig
 from pylogue.session import InMemorySessionManager
 from pylogue.service import ChatService
 from pylogue.renderer import ChatRenderer
-from pylogue.cards import ChatCard
+from pylogue.card import ChatCard
 
 # 1. Configure components
 session_manager = InMemorySessionManager()
@@ -162,7 +162,7 @@ html = renderer.render_messages(messages)
 
 ## 📚 Examples
 
-See `5-Examples.ipynb` for complete working examples:
+See `6-Examples.ipynb` for complete working examples:
 
 1.  **Echo Bot** - Simplest possible implementation
 2.  **Custom Styled Chat** - UI/UX customization
@@ -250,10 +250,12 @@ app = create_default_chat_app(responder=your_responder)
     - `3-Renderer.ipynb` - Explore presentation layer
     - `4-ChatApp.ipynb` - See full integration
     - `5-Examples.ipynb` - Working examples
+    - `6-JupyterExample.ipynb` - Jupyter integration
 
 2.  Try the examples in `5-Examples.ipynb`
 
-3.  Build your own custom responder
+3.  Build your own custom responder and test it out in
+    `6-JupyterExample.ipynb`
 
 4.  Deploy to production with your preferred hosting
 

{pylogue-0.2.0 → pylogue-0.3}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "pylogue"
-version = "0.2.0"
+version = "0.3"
 description = "A Chatbot UI built for AI agents"
 readme = "README.rst"
 authors = [

{pylogue-0.2.0 → pylogue-0.3}/src/pylogue/__init__.py

@@ -14,3 +14,5 @@ __version__ = "0.1.0"
 
 from .__pre_init__ import cli
 from .health import *
+
+from .chatapp import create_default_chat_app

{pylogue-0.2.0 → pylogue-0.3}/src/pylogue/_modidx.py

@@ -11,6 +11,7 @@ d = { 'settings': { 'branch': 'main',
                                'pylogue.cards.ChatCard._get_role_style': ('0-card.html#chatcard._get_role_style', 'pylogue/cards.py'),
                                'pylogue.cards.ChatCard._get_style': ('0-card.html#chatcard._get_style', 'pylogue/cards.py'),
                                'pylogue.cards.ChatCard._get_text_color': ('0-card.html#chatcard._get_text_color', 'pylogue/cards.py'),
+                               'pylogue.cards.ChatCard.get_mobile_styles': ('0-card.html#chatcard.get_mobile_styles', 'pylogue/cards.py'),
                                'pylogue.cards.ChatCard.render': ('0-card.html#chatcard.render', 'pylogue/cards.py'),
                                'pylogue.cards.mk_inp': ('0-card.html#mk_inp', 'pylogue/cards.py'),
                                'pylogue.cards.render_chat_list': ('0-card.html#render_chat_list', 'pylogue/cards.py')},

{pylogue-0.2.0 → pylogue-0.3}/src/pylogue/cards.py

@@ -14,18 +14,19 @@ class ChatCard:
         assistant_color: str = "#004539",
         user_emoji: str = "🗣️",
         assistant_emoji: str = "🕵️‍♂️",
-        width: str = "60%",
+        max_width: str = "80%",
+        card_max_width: str = "60%",
         font_size: str = "1.5em",
+        mobile_font_size: str = "16px",
         padding: str = "1.25em",
-        border_radius: str = "1em",
         user_align: str = "right",
         assistant_align: str = "left",
-        user_self_align: str = "center",
-        assistant_self_align: str = "center",
+        user_self_align: str = "flex-end",
+        assistant_self_align: str = "flex-start",
         role_font_weight: str = "bold",
         role_font_size: str = "1.1em",
         role_margin_bottom: str = "8px",
-        content_white_space: str = "pre-wrap",
+        content_white_space: str = "normal",
         spinner_class: str = "spinner",
     ):
         self.colors = {
@@ -40,11 +41,14 @@ class ChatCard:
             "Assistant": {"text": assistant_align, "self": assistant_self_align},
         }
 
+        self.border_radii = {"User": "1em 1em 0em 1em", "Assistant": "1em 1em 1em 0em"}
+
         # Style configuration
-        self.width = width
+        self.card_max_width = card_max_width
+        self.max_width = max_width
         self.font_size = font_size
+        self.mobile_font_size = mobile_font_size
         self.padding = padding
-        self.border_radius = border_radius
         self.role_font_weight = role_font_weight
         self.role_font_size = role_font_size
         self.role_margin_bottom = role_margin_bottom
@@ -54,8 +58,8 @@ class ChatCard:
         # Build style template
         self.style_template = f"""
         background: {{bg}}; color: {{text_color}}; padding: 10px; font-size: {self.font_size}; 
-        width: {self.width}; align-self: {{self_align}}; 
-        text-align: {{text_align}}; border-radius: {self.border_radius}; 
+        max-width: min({self.card_max_width}, {self.max_width}); align-self: {{self_align}}; 
+        text-align: {{text_align}}; border-radius: {{border_radius}}; 
         padding: {self.padding}"""
 
     def _get_text_color(self, bg_color: str) -> str:
@@ -89,12 +93,23 @@ class ChatCard:
             text_color=self._get_text_color(bg_color),
             self_align=self.alignments[role]["self"],
             text_align=self.alignments[role]["text"],
+            border_radius=self.border_radii[role],
         )
 
     def _get_role_style(self) -> str:
         """Generate CSS style string for role labels."""
         return f"font-weight: {self.role_font_weight}; font-size: {self.role_font_size}; display: block; margin-bottom: {self.role_margin_bottom};"
 
+    def get_mobile_styles(self) -> str:
+        """Generate CSS media query for mobile devices."""
+        return f"""
+        @media (max-width: 768px) {{
+            .chat-card {{
+                font-size: {self.mobile_font_size} !important;
+            }}
+        }}
+        """
+
     def render(self, data: dict):
         """
         Render a chat card with the given data.
@@ -117,7 +132,7 @@ class ChatCard:
 
         if pending:
             spinner = Span(cls=self.spinner_class)
-            return Div(f"{emoji} {role}: ", spinner, style=style)
+            return Div(f"{emoji} {role}: ", spinner, style=style, cls="chat-card")
 
         # Add 'marked' class to enable markdown rendering
         return Div(
@@ -129,6 +144,7 @@ class ChatCard:
                 content, cls="marked", style=f"white-space: {self.content_white_space};"
             ),
             style=style,
+            cls="chat-card",
         )
 
     def __call__(self, data: dict):
@@ -141,6 +157,7 @@ CHAT_DIV_ID = "chat-cards"
 
 def render_chat_list(messages: List[Dict[str, str]], ChatCard: ChatCard):
     return Div(
+        Style(ChatCard.get_mobile_styles()),
         *[ChatCard(m) for m in messages],
         id=CHAT_DIV_ID,
         cls="chat-cards",

{pylogue-0.2.0 → pylogue-0.3}/src/pylogue/chatapp.py

@@ -34,6 +34,7 @@ class ChatAppConfig:
 
     # WebSocket settings
     ws_endpoint: str = "/ws"
+    chat_endpoint: str = "/chat"
 
     # FastHTML extensions and headers
     markdown_enabled: bool = True
@@ -120,6 +121,9 @@ 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()))
+
         return FastHTML(exts="ws", hdrs=tuple(headers))
 
     def _get_initial_messages(self) -> List[Message]:
@@ -131,23 +135,25 @@ class ChatApp:
     def _register_routes(self):
         """Register HTTP and WebSocket routes."""
 
-        @self.app.route("/")
-        def home():
+        @self.app.route(self.config.chat_endpoint)
+        def chat():
             """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; "
-                f"background: {self.config.bg_color}; min-height: 100vh;"
             )
 
             return (
                 Title(self.config.page_title),
-                Div(
-                    H1(self.config.app_title, style=self.config.header_style),
-                    self.renderer.render_messages(initial_messages),
-                    self.renderer.render_form(),
-                    style=container_style,
+                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,
+                    ),
+                    style="background-color: #000",
                 ),
             )
 
@@ -210,7 +216,7 @@ class ChatApp:
                     assistant_msg.id, content=full_response, pending=False
                 )
                 # Send updated message list to UI
-                print(f"📤 Sending chunk #{chunk_count}: {repr(chunk)}")  # Debug
+                # print(f"📤 Sending chunk #{chunk_count}: {repr(chunk)}")  # Debug
                 await send(self.renderer.render_messages(session.get_messages()))
 
         except Exception as e:

{pylogue-0.2.0 → pylogue-0.3}/src/pylogue/renderer.py

@@ -41,7 +41,7 @@ class ChatRenderer:
             "font-size: 1em; border-radius: 0.5em"
         )
         self.chat_container_style = chat_container_style or (
-            "display: flex; flex-direction: column; gap: 10px;"
+            "display: flex; flex-direction: column; gap: 1em; margin: 3em;"
         )
 
     def render_message(self, message: Message) -> Any:
@@ -58,7 +58,18 @@ class ChatRenderer:
         Returns:
             FastHTML Div containing all rendered messages
         """
+        # Add mobile-responsive margin CSS
+        mobile_margin_css = """
+        @media (max-width: 768px) {
+            .chat-cards {
+                margin: 1em !important;
+            }
+        }
+        """
+
         return Div(
+            Style(self.card.get_mobile_styles()),
+            Style(mobile_margin_css),
             *[self.render_message(msg) for msg in messages],
             id=self.CHAT_DIV_ID,
             cls="chat-cards",

{pylogue-0.2.0 → pylogue-0.3}/src/pylogue.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: pylogue
-Version: 0.2.0
+Version: 0.3
 Summary: A Chatbot UI built for AI agents
 Author-email: Yeshwanth Reddy <yyeshr@gmail.com>
 Maintainer-email: Yeshwanth Reddy <yyeshr@gmail.com>