google / mesop

Rapidly build AI apps in Python
https://google.github.io/mesop/
Apache License 2.0
5.26k stars 251 forks source link

Content Button coloring (icon is hidden after type update) #740

Open tpcgold opened 1 month ago

tpcgold commented 1 month ago

Describe the bug Button coloring hides the icon after updating it's type

To Reproduce use a button and react on a click event e.g.:

def thumb_up(self, e: ClickEvent):
    if self.state.voted is False:
        self.state.voted = True
        self.state.rating = 1
        feedback(self.state, page="chat", positive=True, data=None)
        print("Thumb up")

with me.content_button(
on_click=self.thumb_up,
# disabled=self.state.voted, # not used due to color change
type="flat" if self.state.rating > 0 else "icon",
):
    me.icon("thumb_up")

this will change the button type as soon as it's pressed, but the bug is: the icon is not shown anymore. the icon will show up if a second message is sent (just for testing purposes this uses the same definition).

Expected behavior The icon should be shown.

Screenshots image

Additional context NOTE: the disable button is not used here, as this is not yet configurable in color. (this might be a feature MESOP should implement to have custom "disabling" colors rather than just graying out a disabled button)

In addition the example includes just tumb_up but tumb_down (in the images) is implemented equally

tpcgold commented 1 month ago

workaround that is at least working for the icon color (still not the content button itself):

with me.content_button(
    on_click=self.thumb_up,
    # disabled=self.state.voted, # not used due to color change
    type="icon",
    style=(
        me.Style(color="#0064ff") if self.state.rating > 0 else None
        ),
    ):
        me.icon("thumb_up")

image

with me.content_button(
    on_click=self.thumb_up,
    # disabled=self.state.voted, # not used due to color change
    type="icon",
    style=(
        me.Style(background="#0064ff", color="white")
        if self.state.rating > 0
        else None
    ),
):
    me.icon("thumb_up")

image