Add "add new row" and run prompt for empty response outputs.

components/__init__.py

@@ -7,3 +7,4 @@ from components.header import header as header
 from components.header import header_section as header_section
 from components.sidebar import icon_sidebar as icon_sidebar
 from components.sidebar import icon_menu_item as icon_menu_item
+from components.snackbar import snackbar as snackbar

components/snackbar.py

@@ -0,0 +1,76 @@
+from typing import Callable, Literal
+
+import mesop as me
+
+
+@me.component
+def snackbar(
+  *,
+  is_visible: bool,
+  label: str,
+  action_label: str | None = None,
+  on_click_action: Callable | None = None,
+  horizontal_position: Literal["start", "center", "end"] = "center",
+  vertical_position: Literal["start", "center", "end"] = "end",
+):
+  """Creates a snackbar.
+
+  By default the snackbar is rendered at bottom center.
+
+  The on_click_action should typically close the snackbar as part of its actions. If no
+  click event is included, you'll need to manually hide the snackbar.
+
+  Note that there is one issue with this snackbar example. No actions are possible until
+  the snackbar is dismissed or closed. This is due to the fixed box that gets created when
+  the snackbar is visible.
+
+  Args:
+    is_visible: Whether the snackbar is currently visible or not.
+    label: Message for the snackbar
+    action_label: Optional message for the action of the snackbar
+    on_click_action: Optional click event when action is triggered.
+    horizontal_position: Horizontal position of the snackbar
+    vertical_position: Vertical position of the snackbar
+  """
+  with me.box(
+    style=me.Style(
+      display="block" if is_visible else "none",
+      height="100%",
+      overflow_x="auto",
+      overflow_y="auto",
+      position="fixed",
+      width="100%",
+      z_index=1000,
+    )
+  ):
+    with me.box(
+      style=me.Style(
+        align_items=vertical_position,
+        height="100%",
+        display="flex",
+        justify_content=horizontal_position,
+      )
+    ):
+      with me.box(
+        style=me.Style(
+          align_items="center",
+          background="#2f3033",
+          border_radius=5,
+          box_shadow=("0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"),
+          display="flex",
+          font_size=14,
+          justify_content="space-between",
+          margin=me.Margin.all(10),
+          padding=me.Padding(top=5, bottom=5, right=5, left=15)
+          if action_label
+          else me.Padding.all(15),
+          width=300,
+        )
+      ):
+        me.text(label, style=me.Style(color="#fcfcfc"))
+        if action_label:
+          me.button(
+            action_label,
+            on_click=on_click_action,
+            style=me.Style(color="#d6e3fe"),
+          )

dialogs/__init__.py

@@ -5,3 +5,4 @@ from dialogs.prompt_version_history import prompt_version_history as prompt_vers
 from dialogs.add_comparisons import add_comparisons as add_comparisons
 from dialogs.generate_prompt import generate_prompt as generate_prompt
 from dialogs.load_prompt import load_prompt as load_prompt
+from dialogs.add_row import add_row as add_row

dialogs/add_comparisons.py

@@ -25,7 +25,12 @@ def add_comparisons():
       on_selection_change=on_select_comparison,
     )
     with mex.dialog_actions():
-      me.button("Close", key="dialog_show_add_comparison", on_click=handlers.on_close_dialog)
+      me.button(
+        "Close",
+        key="dialog_show_add_comparison",
+        on_click=handlers.on_close_dialog,
+        style=me.Style(border_radius="10"),
+      )
 
 
 def on_select_comparison(e: me.SelectSelectionChangeEvent):

dialogs/add_row.py

@@ -0,0 +1,89 @@
+import copy
+
+import mesop as me
+
+import components as mex
+import handlers
+import llm
+from constants import DIALOG_INPUT_WIDTH
+from helpers import parse_variables, find_prompt
+from state import State
+
+
+@me.component
+def add_row():
+  state = me.state(State)
+
+  with mex.dialog(state.dialog_show_add_row):
+    me.text("Add row", type="headline-6")
+    if not state.prompt_variables:
+      me.text("No variables defined in prompt.", style=me.Style(width=DIALOG_INPUT_WIDTH))
+    else:
+      with me.box(
+        style=me.Style(display="flex", justify_content="end", margin=me.Margin(bottom=15))
+      ):
+        me.button(
+          "Generate",
+          on_click=on_click_generate_variables,
+          style=me.Style(background="#EBF1FD", border_radius="10"),
+        )
+      variable_names = set(parse_variables(state.prompt))
+      with me.box(style=me.Style(display="flex", flex_direction="column")):
+        for name in state.prompt_variables.keys():
+          if name not in variable_names:
+            continue
+          me.textarea(
+            label=name,
+            value=state.add_row_prompt_variables.get(name, ""),
+            on_blur=on_input_variable,
+            style=me.Style(width=DIALOG_INPUT_WIDTH),
+            key=name,
+          )
+
+    with mex.dialog_actions():
+      me.button(
+        "Close",
+        on_click=on_close_dialog,
+        key="dialog_show_add_row",
+        style=me.Style(border_radius="10"),
+      )
+      me.button("Add", type="flat", on_click=on_click_add_row, style=me.Style(border_radius="10"))
+
+
+def on_close_dialog(e: me.ClickEvent):
+  state = me.state(State)
+  state.add_row_prompt_variables = {}
+  handlers.on_close_dialog(e)
+
+
+def on_click_add_row(e: me.ClickEvent):
+  state = me.state(State)
+  prompt = find_prompt(state.prompts, state.version)
+  prompt.responses.append(
+    {
+      "variables": copy.copy(state.add_row_prompt_variables),
+      "output": "",
+      "rating": 0,
+    }
+  )
+  state.add_row_prompt_variables = {}
+  state.dialog_show_add_row = False
+
+
+def on_input_variable(e: me.InputBlurEvent):
+  """Generic event to save input variables."""
+  state = me.state(State)
+  state.add_row_prompt_variables[e.key] = e.value
+
+
+def on_click_generate_variables(e: me.ClickEvent):
+  """Generates values for the given empty variables."""
+  state = me.state(State)
+  variable_names = set(parse_variables(state.prompt))
+  generated_variables = llm.generate_variables(
+    state.prompt, variable_names, state.model, state.model_temperature
+  )
+
+  for name in state.prompt_variables:
+    if name in variable_names and name in generated_variables:
+      state.add_row_prompt_variables[name] = generated_variables[name]

dialogs/generate_prompt.py

@@ -21,8 +21,18 @@ def generate_prompt():
       style=me.Style(width=DIALOG_INPUT_WIDTH),
     )
     with mex.dialog_actions():
-      me.button("Close", key="dialog_show_generate_prompt", on_click=handlers.on_close_dialog)
-      me.button("Generate", type="flat", on_click=on_click_generate_prompt)
+      me.button(
+        "Close",
+        key="dialog_show_generate_prompt",
+        on_click=handlers.on_close_dialog,
+        style=me.Style(border_radius="10"),
+      )
+      me.button(
+        "Generate",
+        type="flat",
+        on_click=on_click_generate_prompt,
+        style=me.Style(border_radius="10"),
+      )
 
 
 def on_click_generate_prompt(e: me.ClickEvent):

dialogs/load_prompt.py

@@ -21,10 +21,15 @@ def load_prompt():
         type="flat",
         color="primary",
         on_upload=on_upload_prompt,
-        style=me.Style(font_weight="bold"),
+        style=me.Style(font_weight="bold", border_radius=10),
       )
       with mex.dialog_actions():
-        me.button("Close", key="dialog_show_load", on_click=handlers.on_close_dialog)
+        me.button(
+          "Close",
+          key="dialog_show_load",
+          on_click=handlers.on_close_dialog,
+          style=me.Style(border_radius="10"),
+        )
 
 
 def on_upload_prompt(e: me.UploadEvent):

dialogs/model_settings.py

@@ -47,6 +47,7 @@ def model_settings():
         "Close",
         key="dialog_show_model_settings",
         on_click=handlers.on_close_dialog,
+        style=me.Style(border_radius="10"),
       )
 
 

dialogs/prompt_variables.py

@@ -20,7 +20,11 @@ def prompt_variables():
       with me.box(
         style=me.Style(display="flex", justify_content="end", margin=me.Margin(bottom=15))
       ):
-        me.button("Generate", type="flat", on_click=on_click_generate_variables)
+        me.button(
+          "Generate",
+          on_click=on_click_generate_variables,
+          style=me.Style(background="#EBF1FD", border_radius="10"),
+        )
       variable_names = set(parse_variables(state.prompt))
       with me.box(style=me.Style(display="flex", flex_direction="column")):
         for name, value in state.prompt_variables.items():
@@ -35,7 +39,12 @@ def prompt_variables():
           )
 
     with mex.dialog_actions():
-      me.button("Close", on_click=handlers.on_close_dialog, key="dialog_show_prompt_variables")
+      me.button(
+        "Close",
+        on_click=handlers.on_close_dialog,
+        key="dialog_show_prompt_variables",
+        style=me.Style(border_radius="10"),
+      )
 
 
 def on_input_variable(e: me.InputBlurEvent):
@@ -50,7 +59,6 @@ def on_input_variable(e: me.InputBlurEvent):
 def on_click_generate_variables(e: me.ClickEvent):
   """Generates values for the given empty variables."""
   state = me.state(State)
-  print(state.model)
   variable_names = set(parse_variables(state.prompt))
   generated_variables = llm.generate_variables(
     state.prompt, variable_names, state.model, state.model_temperature

dialogs/prompt_version_history.py

@@ -23,7 +23,12 @@ def prompt_version_history():
       on_selection_change=on_select_version,
     )
     with mex.dialog_actions():
-      me.button("Close", key="dialog_show_version_history", on_click=handlers.on_close_dialog)
+      me.button(
+        "Close",
+        key="dialog_show_version_history",
+        on_click=handlers.on_close_dialog,
+        style=me.Style(border_radius="10"),
+      )
 
 
 def on_select_version(e: me.SelectSelectionChangeEvent):

dialogs/update_title.py

@@ -19,8 +19,19 @@ def update_title():
       style=me.Style(width=DIALOG_INPUT_WIDTH),
     )
     with mex.dialog_actions():
-      me.button("Cancel", on_click=handlers.on_close_dialog, key="dialog_show_title")
-      me.button("Save", type="flat", disabled=not state.temp_title.strip(), on_click=on_save_title)
+      me.button(
+        "Cancel",
+        on_click=handlers.on_close_dialog,
+        key="dialog_show_title",
+        style=me.Style(border_radius="10"),
+      )
+      me.button(
+        "Save",
+        type="flat",
+        disabled=not state.temp_title.strip(),
+        on_click=on_save_title,
+        style=me.Style(border_radius="10"),
+      )
 
 
 def on_save_title(e: me.InputBlurEvent):

eval_table.py

@@ -7,7 +7,11 @@ from state import Prompt
 
 
 @me.component
-def prompt_eval_table(prompts: list[Prompt], on_select_rating: Callable | None = None):
+def prompt_eval_table(
+  prompts: list[Prompt],
+  on_select_rating: Callable | None = None,
+  on_click_run: Callable | None = None,
+):
   data = _make_table_meta(prompts)
   response_map = _make_response_map(prompts)
 
@@ -51,16 +55,31 @@ def prompt_eval_table(prompts: list[Prompt], on_select_rating: Callable | None =
         elif row["type"] == "model_response":
           with me.box(style=_MARKDOWN_BOX_STYLE):
             prompt_response = response_map[row["prompt"].version].get(response_key)
-            if prompt_response:
+            if prompt_response and prompt_response[0]["output"]:
               me.markdown(prompt_response[0]["output"])
             else:
-              me.text("")
+              with me.box(
+                style=me.Style(
+                  display="flex", height="100%", justify_content="center", align_items="center"
+                )
+              ):
+                response_index = prompt_response[1] if prompt_response else "-1"
+                _, selected_version_response_index = response_map[prompts[0].version].get(
+                  response_key
+                )
+                with me.content_button(
+                  key=f"run_{row['prompt'].version}_{response_index}_{selected_version_response_index}",
+                  on_click=on_click_run,
+                  style=me.Style(background="#EBF1FD", border_radius="10"),
+                ):
+                  with me.tooltip(message="Run prompt"):
+                    me.icon("play_arrow")
         elif row["type"] == "model_rating":
           with me.box(style=_RATING_STYLE):
             prompt_response = response_map[row["prompt"].version].get(response_key)
-            if prompt_response:
+            if prompt_response and prompt_response[0]["output"]:
               me.select(
-                value=prompt_response[0].get("rating", ""),
+                value=prompt_response[0].get("rating", 0),
                 options=[
                   me.SelectOption(label="1", value="1"),
                   me.SelectOption(label="2", value="2"),

handlers.py

@@ -23,5 +23,4 @@ def on_update_input(e: me.InputBlurEvent | me.InputEvent | me.InputEnterEvent):
 def on_update_selection(e: me.SelectSelectionChangeEvent):
   """Generic event to update input values."""
   state = me.state(State)
-  print("EEE", e)
   setattr(state, e.key, e.value)

main.py

@@ -1,3 +1,5 @@
+import copy
+
 import mesop as me
 
 import components as mex
@@ -26,6 +28,10 @@ _INSTRUCTIONS = """
 def app():
   state = me.state(State)
 
+  mex.snackbar(
+    is_visible=state.show_snackbar, label=state.snackbar_message, horizontal_position="start"
+  )
+
   dialogs.update_title()
   dialogs.model_settings()
   dialogs.prompt_variables()
@@ -33,6 +39,7 @@ def app():
   dialogs.add_comparisons()
   dialogs.generate_prompt()
   dialogs.load_prompt()
+  dialogs.add_row()
 
   with me.box(
     style=me.Style(
@@ -125,8 +132,21 @@ def app():
             compare_prompts = [
               prompt for prompt in state.prompts if prompt.version in state.comparisons
             ]
-            prompt_eval_table([prompt] + compare_prompts, on_select_rating=on_select_rating)
-
+            prompt_eval_table(
+              [prompt] + compare_prompts,
+              on_select_rating=on_select_rating,
+              on_click_run=on_click_eval_run,
+            )
+            me.button(
+              label="Add row",
+              type="flat",
+              style=me.Style(
+                margin=me.Margin(top=10),
+                border_radius="10",
+              ),
+              key="dialog_show_add_row",
+              on_click=handlers.on_open_dialog,
+            )
     tool_sidebar()
 
 
@@ -139,6 +159,31 @@ def on_click_system_instructions_header(e: me.ClickEvent):
   state.system_prompt_card_expanded = not state.system_prompt_card_expanded
 
 
+def on_click_eval_run(e: me.ClickEvent):
+  state = me.state(State)
+  print(e.key)
+  _, prompt_version, response_index, selected_prompt_response_index = e.key.split("_")
+  prompt = find_prompt(state.prompts, int(prompt_version))
+  selected_prompt = find_prompt(state.prompts, state.version)
+  selected_prompt
+
+  if response_index != "-1":
+    response = prompt.responses[int(response_index)]
+  else:
+    response = {
+      "variables": copy.copy(
+        selected_prompt.responses[int(selected_prompt_response_index)]["variables"]
+      ),
+      "rating": 0,
+    }
+    prompt.responses.append(response)
+
+  prompt_text = prompt.prompt
+  for name, value in response["variables"].items():
+    prompt_text = prompt_text.replace("{{" + name + "}}", value)
+  response["output"] = llm.run_prompt(prompt_text, prompt.model, prompt.model_temperature)
+
+
 def on_click_run(e: me.ClickEvent):
   """Runs the prompt with the given variables.
 

state.py

@@ -12,9 +12,9 @@ class Prompt:
   version: int = 0
   variables: list[str] = field(default_factory=list)
   # Storing the responses as a dict to workaround bug with lists
-  # of nested dataclass.
+  # of nested dataclass. See https://github.com/google/mesop/issues/659.
   #
-  # Keys: output, variables, rating
+  # Keys: output: str, variables: dict[str, str], rating: int
   responses: list[dict] = field(default_factory=list)
 
 
@@ -31,6 +31,7 @@ class State:
 
   # Prompt variables
   prompt_variables: dict[str, str]
+  add_row_prompt_variables: dict[str, str]
 
   # Model info
   model: str = "gemini-1.5-flash"
@@ -38,13 +39,14 @@ class State:
   model_temperature_input: str = "1.0"
 
   # Dialogs
-  dialog_show_title: bool = False
+  dialog_show_add_comparison: bool = False
+  dialog_show_add_row: bool = False
+  dialog_show_generate_prompt: bool = False
+  dialog_show_load: bool = False
   dialog_show_model_settings: bool = False
   dialog_show_prompt_variables: bool = False
-  dialog_show_generate_prompt: bool = False
+  dialog_show_title: bool = False
   dialog_show_version_history: bool = False
-  dialog_show_add_comparison: bool = False
-  dialog_show_load: bool = False
 
   prompts: list[Prompt]
 
@@ -54,4 +56,9 @@ class State:
   # Valid modes: Prompt or Eval
   mode: str = "Prompt"
 
+  # Eval comparisons
   comparisons: list[int]
+
+  show_snackbar: bool = False
+  snackbar_message: str = ""
+  snackbar_duration: int = 2

tool_sidebar.py

@@ -3,6 +3,7 @@ import errno
 import json
 import os
 import re
+import time
 
 import mesop as me
 
@@ -62,9 +63,10 @@ def tool_sidebar():
 def on_click_download(e: me.ClickEvent):
   state = me.state(State)
   cleaned_title = _clean_title(state.title)
+  filename = f"prompt-{cleaned_title}.json"
   _create_directory(SAVED_PROMPT_DIRECTORY)
 
-  with open(f"{SAVED_PROMPT_DIRECTORY}/prompt-{cleaned_title}.json", "w") as outfile:
+  with open(f"{SAVED_PROMPT_DIRECTORY}/{filename}", "w") as outfile:
     output = {
       key: value
       for key, value in asdict(state).items()
@@ -80,6 +82,14 @@ def on_click_download(e: me.ClickEvent):
     }
     json.dump(output, outfile)
 
+  state.snackbar_message = f"Prompt exported as {filename}."
+  state.show_snackbar = True
+  yield
+  time.sleep(state.snackbar_duration)
+  yield
+  state.show_snackbar = False
+  yield
+
 
 def _clean_title(title: str) -> str:
   return re.sub(r"[^a-z0-9_]", "", title.lower().replace(" ", "_"))
@@ -89,7 +99,6 @@ def _create_directory(directory_path):
   """Creates a directory if it doesn't exist."""
   try:
     os.makedirs(directory_path)
-    print(f"Directory '{directory_path}' created successfully.")
   except OSError as e:
     if e.errno != errno.EEXIST:
       raise