Merge pull request #881 from zauberzeug/chat

Chat message improvements

nicegui/elements/chat_message.js

@@ -1,7 +1,7 @@
 export default {
   template: `
     <q-chat-message
-      :text="[text]"
+      :text="text"
       :name="name"
       :label="label"
       :stamp="stamp"
@@ -10,7 +10,7 @@ export default {
     />
   `,
   props: {
-    text: String,
+    text: Array,
     name: String,
     label: String,
     stamp: String,

nicegui/elements/chat_message.py

@@ -1,4 +1,5 @@
-from typing import Optional
+import html
+from typing import List, Optional, Union
 
 from ..dependencies import register_component
 from ..element import Element
@@ -9,26 +10,36 @@ register_component('chat_message', __file__, 'chat_message.js')
 class ChatMessage(Element):
 
     def __init__(self,
-                 text: str, *,
+                 text: Union[str, List[str]], *,
                  name: Optional[str] = None,
                  label: Optional[str] = None,
                  stamp: Optional[str] = None,
                  avatar: Optional[str] = None,
                  sent: bool = False,
+                 text_html: bool = False,
                  ) -> None:
         """Chat Message
 
         Based on Quasar's `Chat Message <https://quasar.dev/vue-components/chat/>`_ component.
 
-        :param text: the message body
+        :param text: the message body (can be a list of strings for multiple message parts)
         :param name: the name of the message author
         :param label: renders a label header/section only
         :param stamp: timestamp of the message
         :param avatar: URL to an avatar
         :param sent: render as a sent message (so from current user) (default: False)
+        :param text_html: render text as HTML (default: False)
         """
         super().__init__('chat_message')
+
+        if isinstance(text, str):
+            text = [text]
+        if not text_html:
+            text = [html.escape(part) for part in text]
+            text = [part.replace('\n', '<br />') for part in text]
         self._props['text'] = text
+        self._props['text-html'] = True
+
         if name is not None:
             self._props['name'] = name
         if label is not None:

tests/test_chat.py

@@ -0,0 +1,27 @@
+from selenium.webdriver.common.by import By
+
+from nicegui import ui
+
+from .screen import Screen
+
+
+def test_no_html(screen: Screen):
+    ui.chat_message('<strong>HTML</strong>')
+
+    screen.open('/')
+    screen.should_contain('<strong>HTML</strong>')
+
+
+def test_html(screen: Screen):
+    ui.chat_message('<strong>HTML</strong>', text_html=True)
+
+    screen.open('/')
+    screen.should_contain('HTML')
+    screen.should_not_contain('<strong>HTML</strong>')
+
+
+def test_newline(screen: Screen):
+    ui.chat_message('Hello\nNiceGUI!')
+
+    screen.open('/')
+    assert screen.find('Hello').find_element(By.TAG_NAME, 'br')

website/more_documentation/chat_message_documentation.py

@@ -1,8 +1,31 @@
 from nicegui import ui
 
+from ..documentation_tools import text_demo
+
 
 def main_demo() -> None:
     ui.chat_message('Hello NiceGUI!',
                     name='Robot',
                     stamp='now',
                     avatar='https://robohash.org/ui')
+
+
+def more() -> None:
+    @text_demo('HTML text', '''
+        Using the `text_html` parameter, you can send HTML text to the chat.
+    ''')
+    def html_text():
+        ui.chat_message('Without <strong>HTML</strong>')
+        ui.chat_message('With <strong>HTML</strong>', text_html=True)
+
+    @text_demo('Newline', '''
+        You can use newlines in the chat message.
+    ''')
+    def newline():
+        ui.chat_message('This is a\nlong line!')
+
+    @text_demo('Multi-part messages', '''
+        You can send multiple message parts by passing a list of strings.
+    ''')
+    def multiple_messages():
+        ui.chat_message(['Hi! 😀', 'How are you?'])