[Question] usage of Markdown component

[hamatz]

Question

Hello!

Now, I'm struggling with the issue related to Markdown component.
As you know, OpenAI API supports "streaming" for their API response.

When I use the Text component, my app works well.
The code is almost same as the one which is described in Turorial.

import flet as ft

class ChatMessage(ft.Row):
    def __init__(self, user_name: str, message: str, page: ft.Page):
        super().__init__()
        text_size = page.window_width - 150
        self.vertical_alignment="start"
        self.messege_area = ft.Text(message, selectable=True, width=text_size) 
        self.controls= [
                ft.CircleAvatar(
                    content=ft.Text(self.get_initials(user_name)),
                    color=ft.colors.WHITE,
                    bgcolor=self.get_avatar_color(user_name),
                ),
                ft.Column(
                    [
                        ft.Text(user_name, weight="bold"),
                        self.messege_area,
                    ],
                    tight=True,
                    spacing=5,
                ),]

    def set_message(self, messsage: str):
        self.messege_area.value = messsage

    def get_initials(self, user_name: str):
        if user_name:
            return user_name[:1].capitalize()
        else:
            return "Unknown"  # or any default value you prefer

    def get_avatar_color(self, user_name: str):
        colors_lookup = [
            ft.colors.AMBER,
            ft.colors.BLUE,
            ft.colors.BROWN,
            ft.colors.CYAN,
            ft.colors.GREEN,
            ft.colors.INDIGO,
            ft.colors.LIME,
            ft.colors.ORANGE,
            ft.colors.PINK,
            ft.colors.PURPLE,
            ft.colors.RED,
            ft.colors.TEAL,
            ft.colors.YELLOW,
        ]
        return colors_lookup[hash(user_name) % len(colors_lookup)]

However, after changing it to Markdown, incremental text cannot be shown.

import flet as ft

class ChatMessage(ft.Row):
    def __init__(self, user_name: str, message: str, page: ft.Page):
        super().__init__()
        self.vertical_alignment="start"
        self.messege_area = ft.Markdown(message, selectable=True,expand=True, 
                             extension_set=ft.MarkdownExtensionSet.GITHUB_WEB,
                             on_tap_link=lambda e: page.launch_url(e.data),)
        self.controls= [
                ft.CircleAvatar(
                    content=ft.Text(self.get_initials(user_name)),
                    color=ft.colors.WHITE,
                    bgcolor=self.get_avatar_color(user_name),
                ),
                ft.Column(
                    [
                        ft.Text(user_name, weight="bold"),
                        self.messege_area,
                    ],
                    tight=True,
                    spacing=5,
                ),]

    def set_message(self, message: str):
        self.messege_area.value=message

    def get_initials(self, user_name: str):
        if user_name:
            return user_name[:1].capitalize()
        else:
            return "Unknown"  # or any default value you prefer

    def get_avatar_color(self, user_name: str):
        colors_lookup = [
            ft.colors.AMBER,
            ft.colors.BLUE,
            ft.colors.BROWN,
            ft.colors.CYAN,
            ft.colors.GREEN,
            ft.colors.INDIGO,
            ft.colors.LIME,
            ft.colors.ORANGE,
            ft.colors.PINK,
            ft.colors.PURPLE,
            ft.colors.RED,
            ft.colors.TEAL,
            ft.colors.YELLOW,
        ]
        return colors_lookup[hash(user_name) % len(colors_lookup)]

May I ask, is there any good way to resolve this issue?

Code sample

I've already tried some workarounds, but the result is not good...

NG pattern 2:
:ng_p2.py
import flet as ft

class ChatMessage(ft.Row):
    def __init__(self, user_name: str, message: str, page: ft.Page):
        super().__init__()
        self.page = page
        self.user_name = user_name
        self.vertical_alignment = "start"

        self.rebuild_widget(message)

    def rebuild_widget(self, message: str):
        self.controls.clear()

        message_area = ft.Markdown(
            message,
            selectable=True,
            expand=True,
            extension_set=ft.MarkdownExtensionSet.GITHUB_WEB,
            on_tap_link=lambda e: self.page.launch_url(e.data),
        )

        self.controls.extend([
            ft.CircleAvatar(
                content=ft.Text(self.get_initials(self.user_name)),
                color=ft.colors.WHITE,
                bgcolor=self.get_avatar_color(self.user_name),
            ),
            ft.Column(
                [
                    ft.Text(self.user_name, weight="bold"),
                    message_area,
                ],
                tight=True,
                spacing=5,
            ),
        ])

    def set_message(self, new_message: str):
        self.rebuild_widget(new_message)
        self.page.update()  

    def get_initials(self, user_name: str):
        if user_name:
            return user_name[:1].capitalize()
        else:
            return "Unknown"  # or any default value you prefer

    def get_avatar_color(self, user_name: str):
        colors_lookup = [
            ft.colors.AMBER,
            ft.colors.BLUE,
            ft.colors.BROWN,
            ft.colors.CYAN,
            ft.colors.GREEN,
            ft.colors.INDIGO,
            ft.colors.LIME,
            ft.colors.ORANGE,
            ft.colors.PINK,
            ft.colors.PURPLE,
            ft.colors.RED,
            ft.colors.TEAL,
            ft.colors.YELLOW,
        ]
        return colors_lookup[hash(user_name) % len(colors_lookup)]


NG Pattern 3:
```python:ng_p3.py
import flet as ft

class ChatMessage(ft.Row):
    def __init__(self, user_name: str, message: str, page: ft.Page):
        super().__init__()
        self.page = page
        self.user_name = user_name
        self.message = message
        self.vertical_alignment = "start"

        self.message_area = ft.Column([], expand=True)
        self.update_message_area(message)

        self.controls = [
            ft.CircleAvatar(
                content=ft.Text(self.get_initials(user_name)),
                color=ft.colors.WHITE,
                bgcolor=self.get_avatar_color(user_name),
            ),
            ft.Column(
                [
                    ft.Text(user_name, weight="bold"),
                    self.message_area,
                ],
                tight=True,
                spacing=5,
            ),
        ]

    def update_message_area(self, new_message: str):
        self.message_area.controls.clear()
        new_markdown = ft.Markdown(
            new_message,
            selectable=True,
            expand=True,
            extension_set=ft.MarkdownExtensionSet.GITHUB_WEB,
            on_tap_link=lambda e: self.page.launch_url(e.data),
        )
        self.message_area.controls.append(new_markdown)
        self.page.update()

    def set_message(self, new_message: str):
        self.update_message_area(new_message)    

    def get_initials(self, user_name: str):
        if user_name:
            return user_name[:1].capitalize()
        else:
            return "Unknown"

    def get_avatar_color(self, user_name: str):
        colors_lookup = [
            ft.colors.AMBER,
            ft.colors.BLUE,
            ft.colors.BROWN,
            ft.colors.CYAN,
            ft.colors.GREEN,
            ft.colors.INDIGO,
            ft.colors.LIME,
            ft.colors.ORANGE,
            ft.colors.PINK,
            ft.colors.PURPLE,
            ft.colors.RED,
            ft.colors.TEAL,
            ft.colors.YELLOW,
        ]
        return colors_lookup[hash(user_name) % len(colors_lookup)]

### Error message

_No response_

### ------------------------------------------------------

- [X] I have searched for answers to my question both in the issues and in previous discussions.