Reactivity issue with @ft.component, and ListView

[angelhdzmultimedia]

Question

How to add a @ft.component decorated function to the ListView without reactivity issues?

If I use a ft.Text, it works.
If I use MessageWrapper component and its subcomponents, I get reactivity issues everywhere for example the theme button stops working, the task dropdown, etc.

AI says its because my component needed a key so it doesnt lose reference to the items for the ListView in the list comprehension/loop. So i added unique IDs hoping it would solve it (as it does when I work with Javascript and Vue reactive library).

Appreciate any tip, as I've been days trying to do this little project to test Flet and it's killing the joy of having Flutter in Python... :'(

Code sample

from calendar import c
from dataclasses import dataclass, field
from threading import Timer
from typing import Any, Callable, TypeVar, Generic, cast, List
import uuid
import flet as ft

T = TypeVar('T')

# --- DATA MODELS ---

@dataclass
@ft.observable
class Message:
    type: str  # 'chat' | 'cmd' | 'make'
    sender: str # 'user' | 'ai'
    content: str
    args: List[str] = field(default_factory=list)
    status: str = ""
    id: str = field(default_factory=lambda: str(uuid.uuid4())) # Unique ID

    

@dataclass
@ft.observable
class AppState:
    cwd: str = field(default="./")
    messages: List[Message] = field(default_factory=list)
    current_task: str = field(default="chat")
    chat_input: str = ""
    cmd_name: str = ""
    cmd_args: List[str] = field(default_factory=list)
    make_file: str = "example.txt"
    make_content: str = ""
    is_dark_mode: bool = True

@dataclass
@ft.observable
class State(Generic[T]):
    isActive: bool = False
    value: T = cast(T, None)
    def update(self, value: T):
        self.value = value

# --- UI COMPONENTS ---

@ft.component
def ThemeToggle(appState: AppState):
    def toggle_theme(e: ft.Event[ft.IconButton]):
        appState.is_dark_mode = bool(e.control.data)
        e.page.theme_mode = ft.ThemeMode.DARK if appState.is_dark_mode else ft.ThemeMode.LIGHT
        e.page.update()

    return ft.Row(
        controls=[
            ft.IconButton(
                ft.Icon(ft.Icons.SUNNY if not appState.is_dark_mode else ft.Icons.DARK_MODE),
                on_click=toggle_theme,
                data=not appState.is_dark_mode  # Toggle the state on click
            )
        ],
        alignment=ft.MainAxisAlignment.CENTER,
    ) 

@ft.component
def MessageWrapper(content: ft.Control, is_user: bool):
    return ft.Row(
        controls=[
            ft.Container(
                content=content,
                bgcolor=ft.Colors.BLUE_GREY_900 if is_user else ft.Colors.SURFACE_VARIANT,
                padding=12,
                border_radius=10,
                width=300,
            )
        ],
        alignment=ft.MainAxisAlignment.END if is_user else ft.MainAxisAlignment.START
    )
@ft.component
def UserMessageItem(msg: Message):
    label_map = {"chat": "Message", "cmd": "Command", "make": "Make Task"}
    controls: List[ft.Control] = [
        ft.Text(f"You sent {label_map.get(msg.type)}", weight=ft.FontWeight.BOLD)
    ]
    
    if msg.type == "chat":
        controls.append(ft.Text(msg.content, size=12, italic=True))
        
    content = ft.Column(controls, tight=True, spacing=5)
    return MessageWrapper(content=content, is_user=True)

@ft.component
def AIMessageItem(msg: Message):
    controls: List[ft.Control] = [
        ft.Row([
            ft.ProgressRing(width=14, height=14, stroke_width=2),
            ft.Text(msg.status, weight=ft.FontWeight.W_500)
        ], spacing=10)
    ]
    
    if msg.type == "cmd":
        controls.append(ft.Container(
            content=ft.Text(f"> {msg.content}", color=ft.Colors.BLUE, font_family="monospace"),
            padding=5
        ))
    elif msg.type == "make":
        controls.append(ft.Text(f"Target: {msg.content}", size=12, color=ft.Colors.GREEN))
        
    content = ft.Column(controls, tight=True, spacing=5)
    return MessageWrapper(content=content, is_user=False)

@ft.component
def ChatFooter(appState: AppState, on_send: Callable | None = None):
    def on_task_select(e):
        appState.current_task = e.control.value
        #e.page.update()

    # Determine which input controls to show based on the task
    if appState.current_task == "chat":
        task_view = ft.TextField(
            label="Message AI...", expand=True, value=appState.chat_input,
            on_change=lambda e: setattr(appState, 'chat_input', e.control.value)
        )
    elif appState.current_task == "cmd":
        task_view = ft.Row([
            ft.TextField(
                label="Command", expand=True, value=appState.cmd_name,
                on_change=lambda e: setattr(appState, 'cmd_name', e.control.value)
            ),
            ft.IconButton(ft.Icons.ADD, on_click=lambda e: appState.cmd_args.append("arg") or e.page.update()),
        ], expand=True)
    elif appState.current_task == "make":
        task_view = ft.Row([
            ft.TextField(label="Filename", value=appState.make_file, expand=1, on_change=lambda e: setattr(appState, 'make_file', e.control.value)),
            ft.TextField(label="Contents", value=appState.make_content, expand=1, on_change=lambda e: setattr(appState, 'make_content', e.control.value)),
        ], expand=True)
    else:
        task_view = ft.Container()

    return ft.Container(
        padding=15, bgcolor=ft.Colors.BLACK_12,
        content=ft.Row([
            ft.Dropdown(
                width=120, value=appState.current_task, on_select=on_task_select,
                options=[ft.dropdown.Option("chat"), ft.dropdown.Option("cmd"), ft.dropdown.Option("make")]
            ),
            ft.Container(content=task_view, expand=True), # Dynamic input slot
            ft.IconButton(ft.Icons.SEND, icon_color=ft.Colors.BLUE, on_click=on_send)
        ])
    )

@dataclass
class EditableTextChangeEvent(ft.Event[ft.Row]):
    value: str = field(default="")
    control: ft.Row = field(default=cast(ft.Row, None))

@ft.component
def EditableText(value: str, label: str, on_change: Callable[[EditableTextChangeEvent], None] | None = None):
    rowRef = ft.Ref[ft.Row]()
    # Reference for the TextField inside the dialog

    edit_input = ft.TextField(

        value=value,

        label=label,

        autofocus=True,

        on_submit=lambda e: save_value(cast(ft.Event[ft.TextButton], e)) # Allow 'Enter' to save

    )


    # The Dialog Instance

    dlg = ft.AlertDialog(

        title=ft.Text("Edit Text"),

        content=edit_input,

    )


    def save_value(e: ft.Event[ft.TextButton]):

        on_change(EditableTextChangeEvent('change', cast(ft.Row, rowRef.current), edit_input.value)) if on_change else None

        dlg.open = False

        e.page.update()


    def close_dialog(e: ft.Event[ft.TextButton]):

        dlg.open = False

        e.page.update()


    # Adding buttons to actions after defining the handlers

    dlg.actions = [

        ft.TextButton("Cancel", on_click=close_dialog),

        ft.TextButton("Save", on_click=save_value),

    ]


    def open_dlg(e: ft.Event[ft.IconButton]):

        # Add the dialog to the page overlay if it's not there

        if dlg not in e.page.overlay:

            e.page.overlay.append(dlg)

       

        dlg.open = True

        e.page.update()


    return ft.Row(
       ref=rowRef,
        controls=[

            ft.TextField(value,

            

           

            label="CWD", expand=True,  color=ft.Colors.GREEN, read_only=True, border=ft.InputBorder.NONE),

           ft.IconButton(

                icon=ft.Icons.EDIT,

                icon_color=ft.Colors.BLUE,

                on_click=open_dlg

            )

        ],

        expand=True,

    )



# --- APP VIEW ---
@ft.component
def Config(appState: AppState):
  return ft.Row(

    controls=[

      EditableText(appState.cwd, "CWD", on_change=lambda e: setattr(appState, 'cwd', e.value)),

      ft.Container(expand=True),  # Spacer to push the button to the right

    ]

  )


@ft.component
def AppView():
    # Maintain state using use_state for the component lifecycle
    appState, set_state = ft.use_state(AppState())

    def handle_send(e):
        current_type = appState.current_task
        # Determine content based on task
        if current_type == "chat": user_content = appState.chat_input
        elif current_type == "cmd": user_content = appState.cmd_name
        else: user_content = appState.make_file
        status_map = {
            "chat": "Sending Message...",
            "cmd": "Executing Command...",
            "make": "Running Task..."
        }
        # 1. Create the new messages
        new_user_msg = Message(type=current_type, sender="user", content=user_content, )
       

        # 2. Re-assign the list (This is the reactive trigger)
        # This creates a new list object containing all old messages + the new ones
        new_ai_msg = Message(
          type=current_type, 
          sender="ai", 
          content=user_content,
          status=status_map.get(current_type, "Processing..."),
          
        )
        appState.messages = [*appState.messages, new_user_msg, new_ai_msg]
        set_state(appState)
          

        # 3. Standard cleanup
        appState.chat_input = ""
        
        #e.page.update()    
    return ft.Column(
        expand=True, spacing=0,
        controls=[
            ft.AppBar(title=ft.Text("CLI v1.0"), bgcolor=ft.Colors.BLUE,
                      actions=[ThemeToggle(appState)]
                      ),
            Config(appState),
            ft.Container(
                expand=True,
                content=ft.ListView(
                    controls=[
                    
                       UserMessageItem(m, key=f"user_{idx+1}") if m.sender == "user" 
        else AIMessageItem(m, key=f"ai_{idx}")
        for idx, m in enumerate(appState.messages)
                              ],
                    spacing=10, padding=20, auto_scroll=True
                )
            ),
            ChatFooter(appState, on_send=lambda _: handle_send(_))
        ]
    )

def main(page: ft.Page):
    page.title = "Flet CLI Interface"
    page.theme_mode = ft.ThemeMode.DARK
    page.padding = 0
    return page.render(AppView)

ft.run(main)

Error message

No response

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

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