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

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/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/chatapp.py

@@ -121,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]:
@@ -133,22 +136,24 @@ class ChatApp:
         """Register HTTP and WebSocket routes."""
 
         @self.app.route(self.config.chat_endpoint)
-        def home():
+        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",
                 ),
             )
 
@@ -211,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/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.1.dist-info → pylogue-0.3.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: pylogue
-Version: 0.2.1
+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.3.dist-info/RECORD

@@ -0,0 +1,17 @@
+pylogue/__init__.py,sha256=gDXS44jmg6hPtcg8IxTFRdyV-TGsjQTkT-5NjiapYZ4,319
+pylogue/__pre_init__.py,sha256=NiQUAz7feHFR47QTpMwF324j61IVrOreZsk9wY11cds,153
+pylogue/_modidx.py,sha256=IDAxgZ4opfun-D1eJ9qH1F0gvv-y5OzXlEDhak8BG30,14348
+pylogue/cards.py,sha256=iu8fgkE2WLERAeawna5AY4-0_KqWhDGQ9NSj4Cygp2w,6041
+pylogue/chat.py,sha256=RyRADCZWxTjCM3W7FgIj0jQ8WrqhRBzbeFEvS9mTZq4,3982
+pylogue/chatapp.py,sha256=Pnpr4PR2qI8oHvTLynMr2n2DaCerEJeBSRMy7MF4AXs,10142
+pylogue/health.py,sha256=8LWhpVzdj2g6qUcErrg455_6WfOsv3lp82OLLwJPtug,443
+pylogue/renderer.py,sha256=nkFsSNiqMj98n3kPyLu77PnyiGBPLOXNvmXRb7-JQF8,4176
+pylogue/service.py,sha256=e3GfbQrOPlRIj7j0CZZx_qN2ZI_polOuWqBMm7ySXqs,6917
+pylogue/session.py,sha256=fUyGOFIG8b1clhyyw5c_dapdwrJyzd9K2bOc_qKBQcs,5382
+pylogue-0.3.dist-info/licenses/AUTHORS.md,sha256=5Viska6TOr9uggc2olSr8VVnu6BFw_F6_64gP42CwQ4,157
+pylogue-0.3.dist-info/licenses/LICENSE,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+pylogue-0.3.dist-info/METADATA,sha256=GQDIfcrpAg9CUiAkcSAsn6BhmTisLmuVqu0H_dUQ84M,1057
+pylogue-0.3.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
+pylogue-0.3.dist-info/entry_points.txt,sha256=ha0gwcGgtciKEhmFcMKJO1efTY9Spu1wcTHUopB1bec,40
+pylogue-0.3.dist-info/top_level.txt,sha256=oEueWVdlRAUPQt8VfQdqFEqOWxvUObx3UIa3UYa3s6o,8
+pylogue-0.3.dist-info/RECORD,,

pylogue-0.2.1.dist-info/RECORD

@@ -1,17 +0,0 @@
-pylogue/__init__.py,sha256=gDXS44jmg6hPtcg8IxTFRdyV-TGsjQTkT-5NjiapYZ4,319
-pylogue/__pre_init__.py,sha256=NiQUAz7feHFR47QTpMwF324j61IVrOreZsk9wY11cds,153
-pylogue/_modidx.py,sha256=apvAlYvaQgShSh_ZrX7fXSpxDdwPBYIKwEQWdEkVJg8,14209
-pylogue/cards.py,sha256=wsOVNbMczFbyoATkujC7xJAeskYgTqsJmxmkHqzHA-g,5385
-pylogue/chat.py,sha256=RyRADCZWxTjCM3W7FgIj0jQ8WrqhRBzbeFEvS9mTZq4,3982
-pylogue/chatapp.py,sha256=Rn2GMmo7GTatsnAdIuYFTalLMb9qTxS1BmikQUVlE3Y,9973
-pylogue/health.py,sha256=8LWhpVzdj2g6qUcErrg455_6WfOsv3lp82OLLwJPtug,443
-pylogue/renderer.py,sha256=KGo0l-Jo8i2pe8NqwlZsM9Qo3ZBA2EV-osrHnBUWzBA,3862
-pylogue/service.py,sha256=e3GfbQrOPlRIj7j0CZZx_qN2ZI_polOuWqBMm7ySXqs,6917
-pylogue/session.py,sha256=fUyGOFIG8b1clhyyw5c_dapdwrJyzd9K2bOc_qKBQcs,5382
-pylogue-0.2.1.dist-info/licenses/AUTHORS.md,sha256=5Viska6TOr9uggc2olSr8VVnu6BFw_F6_64gP42CwQ4,157
-pylogue-0.2.1.dist-info/licenses/LICENSE,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-pylogue-0.2.1.dist-info/METADATA,sha256=efMS8zmtNQAeAlcthiuk8oxhkTh5OeYn6Z7kF-ft_vg,1059
-pylogue-0.2.1.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
-pylogue-0.2.1.dist-info/entry_points.txt,sha256=ha0gwcGgtciKEhmFcMKJO1efTY9Spu1wcTHUopB1bec,40
-pylogue-0.2.1.dist-info/top_level.txt,sha256=oEueWVdlRAUPQt8VfQdqFEqOWxvUObx3UIa3UYa3s6o,8
-pylogue-0.2.1.dist-info/RECORD,,