#662 code review

examples/chat_app/main.py

@@ -1,50 +1,36 @@
 #!/usr/bin/env python3
 from nicegui import ui
-from icecream import ic
+
 messages = []
 
 
 @ui.page('/')
 def main():
-    async def scroll_to_bottom() -> None:
-        await ui.run_javascript(f'window.scrollTo(0, getElement({content.id}).clientHeight)', respond=False)
-
-    async def send() -> None:
-        messages.append(f'**{name.value}**: {message.value}')
-        message.value = ''
-        await scroll_to_bottom()
-
-    ui.add_head_html('''
-        <style> 
-            a:link, a:visited {
-                color: inherit !important;
-                text-decoration: none;
-                font-weight: 500;
-            }
-        </style>''')
-
-    def update_messages():
-        if len(messages) == message_count:
-            return
-        content.clear()
-        with content:
-            for message in messages:
-                ui.markdown(message).classes('text-lg m-2')
-
-    message_count = 0
-    with ui.column().classes('w-full max-w-2xl mx-auto') as content:
-        with ui.element('q-page-scroller').props('reverse position="top-right" :scroll-offset="0" :offset="[0, 18]'):
-            ui.button().props('icon="keyboard_arrow_down" fab')
-        with ui.footer().classes('bg-white text-black'), ui.column().classes('w-full  max-w-3xl mx-auto my-6'):
-            with ui.row().classes('w-full no-wrap items-center'):
-                name = ui.input(placeholder='name').props('rounded outlined autofocus input-class="ml-3"')
-                message = ui.input().props('rounded outlined input-class="ml-3"') \
-                    .classes('w-full self-center').on('keydown.enter', send)
-            ui.markdown(
-                'simple chat app built with [NiceGUI](https://nicegui.io)'
-            ).classes('text-xs self-end mr-8 m-[-1em] text-primary')
-
-    ui.timer(1, update_messages)
+    def send() -> None:
+        messages.append((name.value, text.value))
+        text.value = ''
+
+    anchor_style = r'a:link, a:visited {color: inherit !important; text-decoration: none; font-weight: 500}'
+    ui.add_head_html(f'<style>{anchor_style}</style>')
+
+    content = ui.column().classes('w-full max-w-2xl mx-auto')
+
+    with ui.footer().classes('bg-white'), ui.column().classes('w-full max-w-3xl mx-auto my-6'):
+        with ui.row().classes('w-full no-wrap items-center'):
+            name = ui.input(placeholder='name').props('rounded outlined autofocus input-class=mx-3')
+            text = ui.input(placeholder='message').props('rounded outlined input-class=mx-3') \
+                .classes('w-full self-center').on('keydown.enter', send)
+        ui.markdown('simple chat app built with [NiceGUI](https://nicegui.io)') \
+            .classes('text-xs self-end mr-8 m-[-1em] text-primary')
+
+    async def update_messages() -> None:
+        if len(messages) != len(content.default_slot.children):
+            content.clear()
+            with content:
+                for name, text in messages:
+                    ui.markdown(f'**{name or "someone"}:** {text}').classes('text-lg m-2')
+            await ui.run_javascript(f'window.scrollTo(0, document.body.scrollHeight)', respond=False)
+    ui.timer(0.1, update_messages)
 
 
 ui.run()