Add copy to clipboard buttons

components/__init__.py

@@ -2,6 +2,7 @@ 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
 from components.header import header as header

components/content.py

@@ -0,0 +1,18 @@
+import mesop as me
+
+from web_components import markedjs_component
+from web_components import copy_to_clipboard_component
+
+
+@me.component
+def markdown(text: str, has_copy_to_clipboard: bool = False):
+  with me.box(style=me.Style(position="relative")):
+    if has_copy_to_clipboard:
+      with me.box(style=me.Style(position="absolute", right=0)):
+        with copy_to_clipboard_component(text=text):
+          with me.content_button(
+            type="icon",
+            style=me.Style(cursor="pointer", background=me.theme_var("surface-container")),
+          ):
+            me.icon("content_copy")
+    markedjs_component(text)

eval_table.py

@@ -3,8 +3,8 @@ import hashlib
 
 import mesop as me
 
+import components as mex
 from state import Prompt
-from web_components import markedjs_component
 
 
 @me.component
@@ -60,12 +60,12 @@ def prompt_eval_table(
             me.text(str(row_index))
         elif row["type"] == "variable":
           with me.box(style=_MARKDOWN_BOX_STYLE):
-            markedjs_component(example["variables"][row["variable_name"]])
+            mex.markdown(example["variables"][row["variable_name"]], has_copy_to_clipboard=True)
         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 and prompt_response[0]["output"]:
-              markedjs_component(prompt_response[0]["output"])
+              mex.markdown(prompt_response[0]["output"], has_copy_to_clipboard=True)
             else:
               with me.box(
                 style=me.Style(

main.py

@@ -13,7 +13,7 @@ from helpers import find_prompt, parse_variables
 from state import State, Prompt
 from web_components import AsyncAction
 from web_components import async_action_component
-from web_components import markedjs_component
+
 
 _INSTRUCTIONS = """
 - Write your prompt.
@@ -142,10 +142,10 @@ 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")):
-            markedjs_component(state.response)
+            mex.markdown(state.response, has_copy_to_clipboard=True)
         else:
           with mex.card(title="Prompt Tuner Instructions"):
-            markedjs_component(_INSTRUCTIONS)
+            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")):