Minor improvements

- Improve snackbar with pointer_events css and async action
- Use markedjs instead of me.markdown

.gitignore

@@ -8,3 +8,6 @@ __pycache__
 
 # Prompt Tuner App
 saved_prompts
+
+# System
+.DS_Store

components/snackbar.py

@@ -38,6 +38,7 @@ def snackbar(
       height="100%",
       overflow_x="auto",
       overflow_y="auto",
+      pointer_events="none",
       position="fixed",
       width="100%",
       z_index=1000,
@@ -64,6 +65,7 @@ def snackbar(
           padding=me.Padding(top=5, bottom=5, right=5, left=15)
           if action_label
           else me.Padding.all(15),
+          pointer_events="auto",
           width=300,
         )
       ):

eval_table.py

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

main.py

@@ -1,6 +1,7 @@
 import copy
 
 import mesop as me
+import mesop.labs as mel
 
 import components as mex
 import dialogs
@@ -10,6 +11,9 @@ from eval_table import prompt_eval_table
 from tool_sidebar import tool_sidebar
 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.
@@ -23,14 +27,30 @@ _INSTRUCTIONS = """
 
 
 @me.page(
-  security_policy=me.SecurityPolicy(allowed_iframe_parents=["https://huggingface.co"]),
+  stylesheets=[
+    # Other themes here: https://www.jsdelivr.com/package/npm/highlight.js?tab=files&path=styles
+    "https://cdn.jsdelivr.net/npm/[email protected]/styles/github-dark.min.css",
+    "https://cdn.jsdelivr.net/npm/[email protected]/styles/github.min.css",
+  ],
+  security_policy=me.SecurityPolicy(
+    allowed_script_srcs=[
+      "https://cdn.jsdelivr.net",
+    ],
+    dangerously_disable_trusted_types=True,
+    allowed_iframe_parents=["https://huggingface.co"],
+  ),
 )
 def app():
   state = me.state(State)
 
-  mex.snackbar(
-    is_visible=state.show_snackbar, label=state.snackbar_message, horizontal_position="start"
+  action = (
+    AsyncAction(value=state.async_action_name, duration_seconds=state.async_action_duration)
+    if state.async_action_name
+    else None
   )
+  async_action_component(action=action, on_finished=on_async_action_finished)
+
+  mex.snackbar(is_visible=state.show_snackbar, label=state.snackbar_message)
 
   dialogs.update_title()
   dialogs.model_settings()
@@ -122,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")):
-            me.markdown(state.response)
+            markedjs_component(state.response)
         else:
           with mex.card(title="Prompt Tuner Instructions"):
-            me.markdown(_INSTRUCTIONS)
+            markedjs_component(_INSTRUCTIONS)
     else:
       # Render eval page
       with me.box(style=me.Style(grid_column="1 / -2", overflow_y="scroll")):
@@ -269,6 +289,13 @@ def on_select_rating(e: me.SelectSelectionChangeEvent):
   prompt.responses[int(response_index)]["rating"] = e.value
 
 
+def on_async_action_finished(e: mel.WebEvent):
+  state = me.state(State)
+  state.async_action_name = ""
+  state.snackbar_message = ""
+  state.show_snackbar = False
+
+
 # Style helpers
 
 _STYLE_INVISIBLE_TEXTAREA = me.Style(

requirements.txt

@@ -1,3 +1,3 @@
 gunicorn
-mesop==0.10.0
+mesop==0.11.1
 google-generativeai

state.py

@@ -59,6 +59,10 @@ class State:
   # Eval comparisons
   comparisons: list[int]
 
+  # Snackbar
   show_snackbar: bool = False
   snackbar_message: str = ""
-  snackbar_duration: int = 2
+
+  # Async action (for snackbar)
+  async_action_name: str
+  async_action_duration: int = 4

tool_sidebar.py

@@ -96,11 +96,7 @@ def on_click_download(e: me.ClickEvent):
 
   state.snackbar_message = f"Prompt exported as {filename}."
   state.show_snackbar = True
-  yield
-  time.sleep(state.snackbar_duration)
-  yield
-  state.show_snackbar = False
-  yield
+  state.async_action_name = "hide_snackbar"
 
 
 def _clean_title(title: str) -> str:

web_components/__init__.py

@@ -0,0 +1,15 @@
+from web_components.async_action.async_action_component import (
+  async_action_component as async_action_component,
+)
+
+from web_components.async_action.async_action_component import (
+  AsyncAction as AsyncAction,
+)
+
+from web_components.copy_to_clipboard.copy_to_clipboard_component import (
+  copy_to_clipboard_component as copy_to_clipboard_component,
+)
+
+from web_components.markedjs.markedjs_component import (
+  markedjs_component as markedjs_component,
+)

web_components/async_action/async_action_component.js

@@ -0,0 +1,49 @@
+import {
+  LitElement,
+  html,
+} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
+
+class AsyncAction extends LitElement {
+  static properties = {
+    startedEvent: {type: String},
+    finishedEvent: {type: String},
+    // Storing as string due to https://github.com/google/mesop/issues/730
+    // Format: {action: String, duration_seconds: Number}
+    action: {type: String},
+    isRunning: {type: Boolean},
+  };
+
+  render() {
+    return html`<div></div>`;
+  }
+
+  firstUpdated() {
+    if (this.action) {
+      this.runTimeout(this.action);
+    }
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('action') && this.action) {
+      this.runTimeout(this.action);
+    }
+  }
+
+  runTimeout(actionJson) {
+    const action = JSON.parse(actionJson);
+    this.dispatchEvent(
+      new MesopEvent(this.startedEvent, {
+        action: action,
+      }),
+    );
+    setTimeout(() => {
+      this.dispatchEvent(
+        new MesopEvent(this.finishedEvent, {
+          action: action.value,
+        }),
+      );
+    }, action.duration_seconds * 1000);
+  }
+}
+
+customElements.define('async-action-component', AsyncAction);

web_components/async_action/async_action_component.py

@@ -0,0 +1,43 @@
+import json
+from dataclasses import asdict, dataclass
+from typing import Any, Callable
+
+import mesop.labs as mel
+
+
+@dataclass
+class AsyncAction:
+  value: str
+  duration_seconds: int
+
+
+@mel.web_component(path="./async_action_component.js")
+def async_action_component(
+  *,
+  action: AsyncAction | None = None,
+  on_started: Callable[[mel.WebEvent], Any] | None = None,
+  on_finished: Callable[[mel.WebEvent], Any] | None = None,
+  key: str | None = None,
+):
+  """Creates an invisibe component that will delay state changes asynchronously.
+
+  Right now this implementation is limited since we basically just pass the key around.
+  But ideally we also pass in some kind of value to update when the time out expires.
+
+  The main benefit of this component is for cases, such as status messages that may
+  appear and disappear after some duration. The primary example here is the example
+  snackbar widget, which right now blocks the UI when using the sleep yield approach.
+
+  The other benefit of this component is that it works generically (rather than say
+  implementing a custom snackbar widget as a web component).
+  """
+  events = {
+    "startedEvent": on_started,
+    "finishedEvent": on_finished,
+  }
+  return mel.insert_web_component(
+    name="async-action-component",
+    key=key,
+    events={key: value for key, value in events.items() if value is not None},
+    properties={"action": json.dumps(asdict(action)) if action else ""},
+  )

web_components/copy_to_clipboard/BUILD

@@ -0,0 +1,14 @@
+load("//build_defs:defaults.bzl", "py_library")
+
+package(
+    default_visibility = ["//build_defs:mesop_examples"],
+)
+
+py_library(
+    name = "copy_to_clipboard",
+    srcs = glob(["*.py"]),
+    data = glob(["*.js"]),
+    deps = [
+        "//mesop",
+    ],
+)

web_components/copy_to_clipboard/copy_to_clipboard_component.js

@@ -0,0 +1,31 @@
+import {
+  LitElement,
+  html,
+} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
+
+class CopyToClipboard extends LitElement {
+  static properties = {
+    text: {type: String},
+  };
+
+  constructor() {
+    super();
+    this.text = '';
+  }
+
+  render() {
+    return html`
+      <div @click="${this._onClick}">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  _onClick() {
+    navigator.clipboard
+      .writeText(this.text)
+      .catch((err) => console.error('Failed to copy text: ', err));
+  }
+}
+
+customElements.define('copy-to-clipboard-component', CopyToClipboard);

web_components/copy_to_clipboard/copy_to_clipboard_component.py

@@ -0,0 +1,16 @@
+import mesop.labs as mel
+
+
+@mel.web_component(path="./copy_to_clipboard_component.js")
+def copy_to_clipboard_component(
+  *,
+  text: str = "",
+  key: str | None = None,
+):
+  return mel.insert_web_component(
+    name="copy-to-clipboard-component",
+    key=key,
+    properties={
+      "text": text,
+    },
+  )

web_components/markedjs/BUILD

@@ -0,0 +1,14 @@
+load("//build_defs:defaults.bzl", "py_library")
+
+package(
+    default_visibility = ["//build_defs:mesop_examples"],
+)
+
+py_library(
+    name = "markedjs",
+    srcs = glob(["*.py"]),
+    data = glob(["*.js"]),
+    deps = [
+        "//mesop",
+    ],
+)

web_components/markedjs/markedjs_component.js

@@ -0,0 +1,76 @@
+import { html, LitElement } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
+import { unsafeHTML } from "https://cdn.jsdelivr.net/npm/[email protected]/directives/unsafe-html.js/+esm";
+import dompurify from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
+import { Marked } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
+import { markedHighlight } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
+import highlightJs from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
+import mermaid from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
+
+/**
+ * Markdown component using MarkedJS
+ *
+ * - HighlightJS used for code highlighting
+ * - Mermaid JS integration for diagrams
+ */
+class MarkedJsComponent extends LitElement {
+  static properties = {
+    markdown: { type: String },
+    themeBrightness: { type: String },
+    darkModeTheme: { type: String },
+    lightModeTheme: { type: String },
+  };
+
+  constructor() {
+    super();
+    mermaid.initialize({ startOnLoad: true });
+    this.marked = new Marked(
+      markedHighlight({
+        langPrefix: "hljs language-",
+        highlight(code, lang, info) {
+          if (lang === "mermaid") {
+            return `<div class="mermaid">${code}</div>`;
+          }
+          const language = highlightJs.getLanguage(lang) ? lang : "plaintext";
+          return highlightJs.highlight(code, { language }).value;
+        },
+      })
+    );
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  firstUpdated() {
+    this.darkModeUpdated();
+  }
+
+  updated(changedProperties) {
+    this.darkModeUpdated();
+  }
+
+  darkModeUpdated() {
+    if (this.themeBrightness === "dark") {
+      document
+        .querySelector(`link[href="${this.darkModeTheme}"]`)
+        .removeAttribute("disabled");
+      document
+        .querySelector(`link[href="${this.lightModeTheme}"]`)
+        .setAttribute("disabled", "disabled");
+    } else {
+      document
+        .querySelector(`link[href="${this.darkModeTheme}"]`)
+        .setAttribute("disabled", "disabled");
+      document
+        .querySelector(`link[href="${this.lightModeTheme}"]`)
+        .removeAttribute("disabled");
+    }
+  }
+  render() {
+    return html`${unsafeHTML(
+      dompurify.sanitize(this.marked.parse(this.markdown))
+    )}`;
+  }
+}
+
+customElements.define("markedjs-component", MarkedJsComponent);

web_components/markedjs/markedjs_component.py

@@ -0,0 +1,19 @@
+import mesop as me
+import mesop.labs as mel
+
+
+@mel.web_component(path="./markedjs_component.js")
+def markedjs_component(
+  markdown: str,
+  light_mode_theme: str = "https://cdn.jsdelivr.net/npm/[email protected]/styles/github.min.css",
+  dark_mode_theme: str = "https://cdn.jsdelivr.net/npm/[email protected]/styles/github-dark.min.css",
+):
+  return mel.insert_web_component(
+    name="markedjs-component",
+    properties={
+      "markdown": markdown,
+      "themeBrightness": me.theme_brightness(),
+      "lightModeTheme": light_mode_theme,
+      "darkModeTheme": dark_mode_theme,
+    },
+  )