[Question] How can I make the Markdown control not overflow the screen

[hinayand]

Question

This is the part of the code that reproduces the problem (there are many code files, I will only show the part that is relevant to the problem)

import flet as ft
import openai
import threading
from widgets import MessageView

openai.api_key = "***"
openai.api_base = "https://chimeragpt.adventblocks.cc/v1"

messages = [{"role": "system", "content": "You are ChatGPT."}]

def chat_gpt(page: ft.Page):
    messages_to_show = ft.ListView(spacing=5)
    messages_to_show.controls.append(MessageView.MessageView("S", "SYSTEM", "# 欢迎使用").get_widget())

    message_to_send = ft.TextField(label="Message", expand=True)

    model_will_use = ft.Dropdown(label="模型选择", options=[
        ft.dropdown.Option("gpt-4", "GPT-4.0"),
        ft.dropdown.Option("gpt-3.5-turbo-16k", "GPT-3.5")
    ])

    def _send_msg():
        nonlocal messages_to_show
        messages.append({"role": "user", "content": str(message_to_send.value)})
        response = openai.ChatCompletion.create(
            model=model_will_use.value,
            messages=messages,
            stream=True
        )
        reply = ""
        messages_to_show.controls.append(MessageView.MessageView("R", "ROBOT", reply).get_widget())
        for chunk in response:
            try:
                reply += chunk.choices[0].delta.content
                messages_to_show.controls[-1] = MessageView.MessageView("R", "ROBOT", reply).get_widget()
                page.update()
            except Exception as e:
                messages.append({'role': 'assistant', 'content': str(reply)})
                print(e.args)

    def send_message():
        threading.Thread(target=_send_msg).start()
        messages_to_show.controls.append(MessageView.MessageView("U", "USER", message_to_send.value).get_widget())
        message_to_send.value = ""
        page.update()

    view = ft.View("/tools/chat-gpt", controls=[
        ft.AppBar(title=ft.Text(value="ChatGPT")),
        ft.ListView([
            ft.Row([
                model_will_use
            ]),
            ft.Row([
                messages_to_show
            ]),
            ft.Row([
                message_to_send,
                ft.ElevatedButton("发送", on_click=lambda _: send_message())
            ])
        ], expand=True, spacing=10, padding=10, auto_scroll=True)
    ])

    return view

This is the code I quoted for the homebrew control MessageView:

import flet as ft


class MessageView(object):
    def __init__(self, avatar_content: str, avatar_tooltip: str, message_content: str):
        self.avatar_content = avatar_content
        self.avatar_tooltip = avatar_tooltip
        self.message_content = message_content
        self.widget = ft.Card(
            ft.Container(
                ft.Row([
                    ft.CircleAvatar(content=ft.Text(self.avatar_content), tooltip=self.avatar_tooltip,
                                    bgcolor=ft.colors.BLUE_GREY_50),
                    ft.Markdown(self.message_content, selectable=True, extension_set=ft.MarkdownExtensionSet.GITHUB_WEB,
                                code_theme="atom-one-dark", code_style=ft.TextStyle(font_family="Monospace"),)
                ])
                , padding=10)
        )

    def get_widget(self):
        return self.widget

The code for this control is very rough, but I think it may be a layout issue rather than a functional issue with the control itself.

Please help me!

Note: The content of the third MessageView in the screenshot shown here is not fully rendered on the screen and the GPT-4 answer has been completed

Code sample

No response

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.