#662 adding chat app example

examples/chat_app/main.py

@@ -0,0 +1,50 @@
+#!/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)
+
+
+ui.run()

main.py

@@ -255,6 +255,7 @@ The command searches for `main.py` in in your current directory and makes the ap
             example_link('Slots', 'shows how to use scoped slots to customize Quasar elements')
             example_link('Table and slots', 'shows how to use component slots in a table')
             example_link('Single Page App', 'navigate without reloading the page')
+            example_link('Chat App', 'a simple chat app')
 
     with ui.row().classes('bg-primary w-full min-h-screen mt-16'):
         link_target('why')