Trying to figure out nicegui and quasar

examples/chat_app/main.py

@@ -13,6 +13,7 @@ async def update(content: ui.column) -> None:
     with content:  # use the context of each client to update their ui
         for name, text in messages:
             ui.markdown(f'**{name or "someone"}:** {text}').classes('text-lg m-2')
+            ui.chat_message(label='hest', text='sdfsd')
         await ui.run_javascript(f'window.scrollTo(0, document.body.scrollHeight)', respond=False)
 
 
@@ -25,13 +26,16 @@ async def main(client: Client):
 
     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>')
+    ui.chat_message(label='hest', text='sdfsd')
     with ui.footer().classes('bg-white'), ui.column().classes('w-full max-w-3xl mx-auto my-6'):
+        ui.chat_message(label='hest', text='sdfsd')
         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')
+        ui.chat_message(label='hest', text='sdfsd')
 
     await client.connected()  # update(...) uses run_javascript which is only possible after connecting
     contents.append(ui.column().classes('w-full max-w-2xl mx-auto'))  # save ui context for updates

nicegui/elements/chat_message.js

@@ -0,0 +1,14 @@
+export default {
+  template: `
+    <q-chat-message ref="chat_message"
+        name="me"
+        avatar="https://cdn.quasar.dev/img/avatar1.jpg"
+        :text="['hey, how are you?']"
+        sent
+      />
+  `,
+  methods: {
+  },
+  props: {
+  },
+};

nicegui/elements/chat_message.py

@@ -0,0 +1,42 @@
+from typing import Callable, Optional
+
+from fastapi import Request, Response
+
+from ..dependencies import register_component
+from ..events import EventArguments, UploadEventArguments, handle_event
+from ..nicegui import app
+from .mixins.disableable_element import DisableableElement
+
+register_component('chat_message', __file__, 'chat_message.js')
+
+
+class ChatMessage(DisableableElement):
+
+    def __init__(self, *,
+                 sent: Optional[bool] = False,
+                 label: Optional[str] = '',
+                 text: Optional[str] = '',
+                 stamp: Optional[str] = '',
+                 name: Optional[str] = None,
+                 avatar: Optional[str] = None,
+                 ) -> None:
+        """Chat Message
+
+        Based on Quasar's `QUploader <https://quasar.dev/vue-components/chat_xxxx>`_ component.
+
+        :param multiple: allow uploading multiple files at once (default: `False`)
+        :param max_file_size: maximum file size in bytes (default: `0`)
+        :param max_total_size: maximum total size of all files in bytes (default: `0`)
+        :param max_files: maximum number of files (default: `0`)
+        :param on_upload: callback to execute for each uploaded file (type: nicegui.events.UploadEventArguments)
+        :param on_rejected: callback to execute for each rejected file
+        :param label: label for the uploader (default: `''`)
+        :param auto_upload: automatically upload files when they are selected (default: `False`)
+        """
+        super().__init__(tag='chat_message')
+        self._props['sent'] = sent
+        self._props['label'] = label
+        self._props['text'] = text
+        self._props['stamp'] = stamp
+        self._props['name'] = name
+        self._props['avatar'] = avatar