Update Mesop version + use new components

components/__init__.py

@@ -1,7 +1,4 @@
-from components.button import button_toggle as button_toggle
 from components.button import button as button
-from components.card import card as card
-from components.card import expanable_card as expanable_card
 from components.content import markdown as markdown
 from components.dialog import dialog as dialog
 from components.dialog import dialog_actions as dialog_actions

components/button.py

@@ -28,78 +28,4 @@ def button(
     style=helpers.merge_styles(me.Style(border_radius=10), style),
   )
 
-
-@me.component()
-def button_toggle(
-  labels: list[str],
-  selected: str = "",
-  on_click: Callable | None = None,
-  key: str = "",
-):
-  """Simple version of Angular Component Button toggle.
-
-  Only supports single selection for now.
-
-  Args:
-    labels: Text labels for buttons
-    selected: Selected label
-    on_click: Event to handle button clicks on the button toggle
-    key: The key will be used as as prefix along with the selected label
-  """
-  with me.box(style=me.Style(display="flex", font_weight="bold", font_size=14)):
-    last_index = len(labels) - 1
-
-    for index, label in enumerate(labels):
-      if index == 0:
-        element = "first"
-      elif index == last_index:
-        element = "last"
-      else:
-        element = "default"
-
-      with me.box(
-        key=key + "_" + label,
-        on_click=on_click,
-        style=me.Style(
-          align_items="center",
-          display="flex",
-          # Handle selected case
-          background=_SELECTED_BG
-          if label == selected
-          else me.theme_var("surface-container-lowest"),
-          padding=_SELECTED_PADDING if label == selected else _PADDING,
-          cursor="default" if label == selected else "pointer",
-          # Handle single button case (should just use a button in this case)
-          border=_LAST_BORDER if last_index == 0 else _BORDER_MAP[element],
-          border_radius=_BORDER_RADIUS if last_index == 0 else _BORDER_RADIUS_MAP[element],
-        ),
-      ):
-        if label in selected:
-          me.icon("check")
-        me.text(label)
-
-
-_SELECTED_BG = me.theme_var("primary-container")
-
-_PADDING = me.Padding(left=15, right=15, top=10, bottom=10)
-_SELECTED_PADDING = me.Padding(left=15, right=15, top=5, bottom=5)
-
-_BORDER_RADIUS = "20px"
-
 _DEFAULT_BORDER_STYLE = me.BorderSide(width=1, color=me.theme_var("outline"), style="solid")
-_BORDER = me.Border(
-  left=_DEFAULT_BORDER_STYLE, top=_DEFAULT_BORDER_STYLE, bottom=_DEFAULT_BORDER_STYLE
-)
-_LAST_BORDER = me.Border.all(_DEFAULT_BORDER_STYLE)
-
-_BORDER_MAP = {
-  "first": _BORDER,
-  "last": _LAST_BORDER,
-  "default": _BORDER,
-}
-
-_BORDER_RADIUS_MAP = {
-  "first": "20px 0 0 20px",
-  "last": "0px 20px 20px 0",
-  "default": "0",
-}

components/card.py

@@ -1,72 +0,0 @@
-from components.helpers import merge_styles
-
-from typing import Callable
-
-import mesop as me
-
-
-@me.content_component
-def card(*, title: str = "", style: me.Style | None = None, key: str = ""):
-  """Creates a simple card component similar to Angular Component.
-
-  Args:
-    title: If empty, not title will be shown
-    style: Override the default styles of the card box
-    key: Not really useful here
-  """
-  with me.box(key=key, style=merge_styles(_DEFAULT_CARD_STYLE, style)):
-    if title:
-      me.text(
-        title,
-        style=me.Style(font_size=16, font_weight="bold", margin=me.Margin(bottom=15)),
-      )
-
-    me.slot()
-
-
-@me.content_component
-def expanable_card(
-  *,
-  title: str = "",
-  expanded: bool = False,
-  on_click_header: Callable | None = None,
-  style: me.Style | None = None,
-  key: str = "",
-):
-  """Creates a simple card component that is expandable.
-
-  Args:
-    title: If empty, no title will be shown but the expander will still be shown
-    expanded: Whether the card is expanded or not
-    on_click_header: Click handler for expanding card
-    style: Override the default styles of the card box
-    key: Key for the component
-  """
-  with me.box(key=key, style=merge_styles(_DEFAULT_CARD_STYLE, style)):
-    with me.box(
-      on_click=on_click_header,
-      style=me.Style(
-        align_items="center",
-        display="flex",
-        justify_content="space-between",
-      ),
-    ):
-      me.text(
-        title,
-        style=me.Style(font_size=16, font_weight="bold"),
-      )
-      me.icon("keyboard_arrow_up" if expanded else "keyboard_arrow_down")
-
-    with me.box(style=me.Style(margin=me.Margin(top=15), display="block" if expanded else "none")):
-      me.slot()
-
-
-_DEFAULT_CARD_STYLE = me.Style(
-  background=me.theme_var("surface-container-lowest"),
-  border_radius=10,
-  border=me.Border.all(
-    me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid")
-  ),
-  padding=me.Padding.all(15),
-  margin=me.Margin(bottom=15),
-)

main.py

@@ -82,8 +82,13 @@ def app():
             me.text(f"v{state.version}")
 
         with mex.header_section():
-          mex.button_toggle(
-            labels=["Prompt", "Eval"], selected=state.mode, on_click=on_click_mode_toggle
+          me.button_toggle(
+            value=state.mode,
+            buttons=[
+              me.ButtonToggleButton(label="Prompt", value="Prompt"),
+              me.ButtonToggleButton(label="Eval", value="Eval"),
+            ],
+            on_change=on_mode_toggle,
           )
 
     if state.mode == "Prompt":
@@ -91,34 +96,31 @@ def app():
       with me.box(
         style=me.Style(padding=me.Padding(left=15, top=15, bottom=15), overflow_y="scroll")
       ):
-        with mex.expanable_card(
-          title="System Instructions",
-          expanded=state.system_prompt_card_expanded,
-          on_click_header=on_click_system_instructions_header,
-        ):
-          me.native_textarea(
-            autosize=True,
-            min_rows=2,
-            placeholder="Optional tone and style instructions for the model",
-            value=state.system_instructions,
-            on_blur=handlers.on_update_input,
-            style=_STYLE_INVISIBLE_TEXTAREA,
-            key="system_instructions",
-          )
+        with me.accordion():
+          with me.expansion_panel(title="System Instructions", style=me.Style(background=me.theme_var('surface-container-lowest'))):
+            me.native_textarea(
+              autosize=True,
+              min_rows=2,
+              placeholder="Optional tone and style instructions for the model",
+              value=state.system_instructions,
+              on_blur=handlers.on_update_input,
+              style=_STYLE_INVISIBLE_TEXTAREA,
+              key="system_instructions",
+            )
 
-        with mex.card(title="Prompt"):
-          me.native_textarea(
-            autosize=True,
-            min_rows=2,
-            placeholder="Enter your prompt",
-            value=state.prompt,
-            on_blur=on_update_prompt,
-            style=_STYLE_INVISIBLE_TEXTAREA,
-            key="prompt",
-          )
+          with me.expansion_panel(title="Prompt", expanded=True, style=me.Style(background=me.theme_var('surface-container-lowest'))):
+            me.native_textarea(
+              autosize=True,
+              min_rows=2,
+              placeholder="Enter your prompt",
+              value=state.prompt,
+              on_blur=on_update_prompt,
+              style=_STYLE_INVISIBLE_TEXTAREA,
+              key="prompt",
+            )
 
         with me.box(
-          style=me.Style(align_items="center", display="flex", justify_content="space-between")
+          style=me.Style(align_items="center", display="flex", justify_content="space-between", margin=me.Margin(top=15))
         ):
           with me.content_button(
             type="flat",
@@ -141,11 +143,15 @@ def app():
 
       with me.box(style=me.Style(padding=me.Padding.all(15), overflow_y="scroll")):
         if state.response:
-          with mex.card(title="Response", style=me.Style(overflow_y="hidden")):
-            mex.markdown(state.response, has_copy_to_clipboard=True)
+          with me.card(appearance="raised", style=me.Style(background=me.theme_var('surface-container-lowest'))):
+            me.card_header(title="Response")
+            with me.card_content():
+              mex.markdown(state.response, has_copy_to_clipboard=True)
         else:
-          with mex.card(title="Prompt Tuner Instructions"):
-            mex.markdown(_INSTRUCTIONS, has_copy_to_clipboard=True)
+          with me.card(appearance="raised", style=me.Style(background=me.theme_var('surface-container-lowest'))):
+            me.card_header(title="Prompt Tuner Instructions")
+            with me.card_content():
+              mex.markdown(_INSTRUCTIONS, has_copy_to_clipboard=True)
     else:
       # Render eval page
       with me.box(style=me.Style(grid_column="1 / -2", overflow_y="scroll")):
@@ -276,10 +282,10 @@ def on_update_prompt(e: me.InputBlurEvent):
       state.prompt_variables[variable_name] = ""
 
 
-def on_click_mode_toggle(e: me.ClickEvent):
+def on_mode_toggle(e: me.ButtonToggleChangeEvent):
   """Toggle between Prompt and Eval modes."""
   state = me.state(State)
-  state.mode = "Eval" if state.mode == "Prompt" else "Prompt"
+  state.mode = e.value
 
 
 def on_select_rating(e: me.SelectSelectionChangeEvent):

requirements.txt

@@ -1,3 +1,3 @@
 gunicorn
-mesop==0.12.4
+mesop==0.12.9
 google-generativeai