try to support slots in `ui.chat_message`

nicegui/elements/chat_message.js

@@ -1,3 +1,9 @@
 export default {
-  template: `<q-chat-message v-bind="$attrs" />`,
+  template: `
+    <q-chat-message v-bind="$attrs">
+      <template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps">
+        <slot :name="slot" v-bind="slotProps || {}" />
+      </template>
+    </q-chat-message>
+  `,
 };

nicegui/elements/chat_message.py

@@ -7,7 +7,7 @@ from ..element import Element
 class ChatMessage(Element, component='chat_message.js'):
 
     def __init__(self,
-                 text: Union[str, List[str]], *,
+                 text: Union[str, List[str]] = ..., *,
                  name: Optional[str] = None,
                  label: Optional[str] = None,
                  stamp: Optional[str] = None,
@@ -29,6 +29,8 @@ class ChatMessage(Element, component='chat_message.js'):
         """
         super().__init__()
 
+        if text is ...:
+            text = []
         if isinstance(text, str):
             text = [text]
         if not text_html:

tests/test_chat.py

@@ -25,3 +25,11 @@ def test_newline(screen: Screen):
 
     screen.open('/')
     assert screen.find('Hello').find_element(By.TAG_NAME, 'br')
+
+
+def test_slot(screen: Screen):
+    with ui.chat_message():
+        ui.label('slot')
+
+    screen.open('/')
+    screen.should_contain('slot')

website/more_documentation/chat_message_documentation.py

@@ -29,3 +29,11 @@ def more() -> None:
     ''')
     def multiple_messages():
         ui.chat_message(['Hi! 😀', 'How are you?'])
+
+    @text_demo('Chat message with child elements', '''
+        You can add child elements to a chat message.
+    ''')
+    def child_elements():
+        with ui.chat_message():
+            ui.label('Guess where I am!')
+            ui.image('https://picsum.photos/id/249/640/360').classes('w-64')