Update prompts + add chat optimized prompt

components/dialog.py

@@ -26,7 +26,7 @@ def dialog(is_open: bool):
       overflow_y="auto",
       position="fixed",
       width="100%",
-      z_index=1000,
+      z_index=2000,
     )
   ):
     with me.box(

constants.py

@@ -21,10 +21,22 @@ HELP_TEXT = """
 
 **Setting up a Mesop Runner instance**
 
-*If running on Hugging Face, you will need to fork the Mesop App Runner space.*
+*If running on Hugging Face, you will need to duplicate the [Mesop App Runner space](https://huggingface.co/spaces/richard-to/mesop-app-runner).*
 
 - Start up an instance of the [Mesop App Runner](https://github.com/richard-to/mesop-app-runner).
     - See [Github repository](https://github.com/richard-to/mesop-app-runner) for more details.
 - Provide the Runner URL to your instance.
 - Provide the Runner Token to your runner instance.
 """.strip()
+
+
+TEMPLATES = {}
+for template in ["default.txt", "basic_chat.txt", "advanced_chat.txt"]:
+  with open(f"templates/{template}") as f:
+    TEMPLATES[template] = f.read()
+
+
+EXAMPLE_CHAT_PROMPTS = []
+for example in ["basic_prompt.txt", "detailed_prompt.txt"]:
+  with open(f"example_prompts/{example}") as f:
+    EXAMPLE_CHAT_PROMPTS.append(f.read())

example_prompts/basic_prompt.txt

@@ -0,0 +1,7 @@
+Build a basic chat app.
+
+Here are the requirements, which you should follow carefully.
+
+1. The chat messages should use bubble chat styled messages
+2. Add thumbs up and thumbs down buttons for the bot messages. These buttons should be
+aligned BELOW the bot message.

example_prompts/detailed_prompt.txt

@@ -0,0 +1,8 @@
+Build a chat app that contains the following a features.
+
+1. There should be a header that says "Mesop chat".
+2. This header should be at the very TOP.
+2. There should a chat input should at the TOP, just BELOW the header
+4. The chat messages will go BELOW the chat input.
+5. The chat message styling should use rounded corners and colored background.
+6. There should also be button for dark mode.

llm.py

@@ -1,17 +1,31 @@
+from typing import Tuple
+
 import google.generativeai as genai
 
 
-with open("prompt.txt") as f:
+with open("prompt/base_system_instructions.txt") as f:
   SYSTEM_INSTRUCTION = f.read()
 
 
+with open("prompt/base_examples.txt") as f:
+  DEFAULT_EXAMPLES = f.read()
+
+
+with open("prompt/chat_elements_examples.txt") as f:
+  CHAT_ELEMENTS_EXAMPLES = f.read()
+
+
+with open("prompt/chat_examples.txt") as f:
+  CHAT_EXAMPLES = f.read()
+
+
 GENERATE_APP_BASE_PROMPT = """
 Your task is to write a Mesop app.
 
 Instructions:
 1. For the @me.page decorator, leave it empty like this `@me.page()`
 2. Event handler functions cannot use lambdas. You must use functions.
-3. Event handle functions only pass in the event type. They do not accept extra parameters.
+3. Event handler functions only pass in the event type. They do not accept extra parameters.
 4. For padding, make sure to use the the `me.Padding` object rather than a string or int.
 5. For margin, make sure to use the the `me.Margin` object rather than a string or int.
 6. For border, make sure to use the the `me.Border` and `me.BorderSide` objects rather than a string.
@@ -30,7 +44,7 @@ Your task is to modify a Mesop app given the code and a description.
 Make sure to remember these rules when making modifications:
 1. For the @me.page decorator, leave it empty like this `@me.page()`
 2. Event handler functions cannot use lambdas. You must use functions.
-3. Event handle functions only pass in the event type. They do not accept extra parameters.
+3. Event handler functions only pass in the event type. They do not accept extra parameters.
 4. For padding, make sure to use the the `me.Padding` object rather than a string or int.
 5. For margin, make sure to use the the `me.Margin` object rather than a string or int.
 6. For border, make sure to use the the `me.Border` and `me.BorderSide` objects rather than a string.
@@ -50,7 +64,56 @@ Here is a description of the changes I want:
 """.strip()
 
 
-def make_model(api_key: str, model_name: str) -> genai.GenerativeModel:
+GENERATE_CHAT_APP_BASE_PROMPT = """
+Your task is to write a Mesop chat app.
+
+Instructions:
+1. For the @me.page decorator, leave it empty like this `@me.page()`
+2. Event handler functions cannot use lambdas. You must use functions.
+3. Event handler functions only pass in the event type. They do not accept extra parameters.
+4. For padding, make sure to use the the `me.Padding` object rather than a string or int.
+5. For margin, make sure to use the the `me.Margin` object rather than a string or int.
+6. For border, make sure to use the the `me.Border` and `me.BorderSide` objects rather than a string.
+7. For buttons, prefer using type="flat", especially if it is the primary button.
+8. Remember that me.box is a like a div. So you can use similar CSS styles for layout.
+9. Only output the python code.
+
+Here is a description of the chat app I want you to write:
+
+<APP_DESCRIPTION>
+
+""".strip()
+
+REVISE_CHAT_APP_BASE_PROMPT = """
+Your task is to modify a Mesop chat app given the code and a description.
+
+Make sure to remember these rules when making modifications:
+1. For the @me.page decorator, leave it empty like this `@me.page()`
+2. Event handler functions cannot use lambdas. You must use functions.
+3. Event handler functions only pass in the event type. They do not accept extra parameters.
+4. For padding, make sure to use the the `me.Padding` object rather than a string or int.
+5. For margin, make sure to use the the `me.Margin` object rather than a string or int.
+6. For border, make sure to use the the `me.Border` and `me.BorderSide` objects rather than a string.
+7. For buttons, prefer using type="flat", especially if it is the primary button.
+8. Remember that me.box is a like a div. So you can use similar CSS styles for layout.
+9. Only output the python code.
+
+Here is is the code for the chat app:
+
+```
+<APP_CODE>
+```
+
+Here is a description of the changes I want:
+
+<APP_CHANGES>
+
+""".strip()
+
+
+def make_model(
+  api_key: str, model_name: str, additional_instructions: str
+) -> genai.GenerativeModel:
   genai.configure(api_key=api_key)
 
   generation_config = {
@@ -81,24 +144,43 @@ def make_model(api_key: str, model_name: str) -> genai.GenerativeModel:
 
   return genai.GenerativeModel(
     model_name=model_name,
-    system_instruction=SYSTEM_INSTRUCTION,
+    system_instruction=SYSTEM_INSTRUCTION + additional_instructions,
     safety_settings=safety_settings,
     generation_config=generation_config,
   )
 
 
-def generate_mesop_app(msg: str, model_name: str, api_key: str) -> str:
-  model = make_model(api_key, model_name)
+def get_prompt_examples(app_type: str) -> str:
+  if app_type == "chat":
+    return CHAT_ELEMENTS_EXAMPLES + CHAT_EXAMPLES
+  return DEFAULT_EXAMPLES
+
+
+def get_generate_prompt_base(app_type: str) -> str:
+  if app_type == "chat":
+    return GENERATE_CHAT_APP_BASE_PROMPT
+  return GENERATE_APP_BASE_PROMPT
+
+
+def get_revise_prompt_base(app_type: str) -> str:
+  if app_type == "chat":
+    return REVISE_CHAT_APP_BASE_PROMPT
+  return REVISE_APP_BASE_PROMPT
+
+
+def generate_mesop_app(msg: str, model_name: str, api_key: str, app_type: str) -> str:
+  model = make_model(api_key, model_name, get_prompt_examples(app_type))
   response = model.generate_content(
-    GENERATE_APP_BASE_PROMPT.replace("<APP_DESCRIPTION>", msg), request_options={"timeout": 120}
+    get_generate_prompt_base(app_type).replace("<APP_DESCRIPTION>", msg),
+    request_options={"timeout": 120},
   )
   return response.text
 
 
-def adjust_mesop_app(code: str, msg: str, model_name: str, api_key: str) -> str:
-  model = make_model(api_key, model_name)
+def adjust_mesop_app(code: str, msg: str, model_name: str, api_key: str, app_type: str) -> str:
+  model = make_model(api_key, model_name, get_prompt_examples(app_type))
   response = model.generate_content(
-    REVISE_APP_BASE_PROMPT.replace("<APP_CODE>", code).replace("<APP_CHANGES>", msg),
+    get_revise_prompt_base(app_type).replace("<APP_CODE>", code).replace("<APP_CHANGES>", msg),
     request_options={"timeout": 120},
   )
   return response.text

main.py

@@ -13,6 +13,8 @@ from constants import (
   PROMPT_MODE_REVISE,
   PROMPT_MODE_GENERATE,
   HELP_TEXT,
+  TEMPLATES,
+  EXAMPLE_CHAT_PROMPTS,
 )
 from state import State
 from web_components import code_mirror_editor_component
@@ -71,6 +73,26 @@ def main():
         on_click=handlers.on_hide_component,
       )
 
+  # New file dialog
+  with mex.dialog(state.show_new_dialog):
+    me.text("Select a template", type="headline-6")
+    me.select(
+      label="Template",
+      key="template-selector-" + str(state.select_index),
+      options=[
+        me.SelectOption(label="Default", value="default.txt"),
+        me.SelectOption(label="Basic Chat", value="basic_chat.txt"),
+        me.SelectOption(label="Advanced Chat", value="advanced_chat.txt"),
+      ],
+      on_selection_change=on_select_template,
+    )
+    with mex.dialog_actions():
+      me.button(
+        "Close",
+        key="show_new_dialog",
+        on_click=handlers.on_hide_component,
+      )
+
   # Help dialog
   with mex.dialog(state.show_help_dialog):
     me.text("Usage Instructions", type="headline-6")
@@ -94,6 +116,19 @@ def main():
       selected=state.prompt_mode,
       on_click=on_click_prompt_mode,
     )
+
+    me.select(
+      label="App type",
+      key="prompt_app_type",
+      value=state.prompt_app_type,
+      options=[
+        me.SelectOption(label="General", value="general"),
+        me.SelectOption(label="Chat", value="chat"),
+      ],
+      style=me.Style(width="100%", margin=me.Margin(top=30)),
+      on_selection_change=handlers.on_update_selection,
+    )
+
     me.textarea(
       value=state.prompt_placeholder,
       rows=10,
@@ -105,8 +140,31 @@ def main():
       disabled=state.loading,
       style=me.Style(width="100%", margin=me.Margin(top=15)),
     )
-    with me.content_button(on_click=on_run_prompt, type="flat", disabled=state.loading):
-      me.icon("send")
+
+    with me.tooltip(message="Generate app"):
+      with me.content_button(on_click=on_run_prompt, type="flat", disabled=state.loading):
+        me.icon("send")
+
+    if state.prompt_mode == "Generate" and state.prompt_app_type == "chat":
+      me.text("Example prompts", type="headline-6", style=me.Style(margin=me.Margin(top=15)))
+
+      for index, chat_prompt in enumerate(EXAMPLE_CHAT_PROMPTS):
+        with me.box(
+          key=f"example_prompt-{index}",
+          on_click=on_click_example_prompt,
+          style=me.Style(
+            background=me.theme_var("surface-container"),
+            border=me.Border.all(
+              me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid")
+            ),
+            border_radius=5,
+            cursor="pointer",
+            margin=me.Margin.symmetric(vertical=10),
+            padding=me.Padding.all(10),
+            text_overflow="ellipsis",
+          ),
+        ):
+          me.text(_truncate_text(chat_prompt))
 
   # Prompt history panel
   with mex.panel(
@@ -275,6 +333,13 @@ def main():
                 flex_direction="row",
               )
             ):
+              mex.toolbar_button(
+                icon="add",
+                tooltip="New file",
+                key="show_new_dialog",
+                on_click=handlers.on_show_component,
+              )
+
               mex.toolbar_button(
                 icon="bolt",
                 tooltip="Generate code",
@@ -363,6 +428,14 @@ def on_click_prompt_mode(e: me.ClickEvent):
   )
 
 
+def on_click_example_prompt(e: me.ClickEvent):
+  """Populates chat box with example prompt."""
+  state = me.state(State)
+  _, index = e.key.split("-")
+  state.prompt = EXAMPLE_CHAT_PROMPTS[int(index)]
+  state.prompt_placeholder = state.prompt
+
+
 def on_code_input(e: mel.WebEvent):
   """Captures code input into state on blur."""
   state = me.state(State)
@@ -401,6 +474,8 @@ def on_run_code(e: me.ClickEvent):
 def on_run_prompt(e: me.ClickEvent):
   """Generate code from prompt."""
   state = me.state(State)
+  if not state.prompt:
+    return
 
   state.prompt_placeholder = state.prompt
   yield
@@ -413,10 +488,16 @@ def on_run_prompt(e: me.ClickEvent):
 
   if state.prompt_mode == PROMPT_MODE_REVISE:
     state.code = llm.adjust_mesop_app(
-      state.code, state.prompt, model_name=state.model, api_key=state.api_key
+      state.code,
+      state.prompt,
+      model_name=state.model,
+      api_key=state.api_key,
+      app_type=state.prompt_app_type,
     )
   else:
-    state.code = llm.generate_mesop_app(state.prompt, model_name=state.model, api_key=state.api_key)
+    state.code = llm.generate_mesop_app(
+      state.prompt, model_name=state.model, api_key=state.api_key, app_type=state.prompt_app_type
+    )
 
   state.code = state.code.strip().removeprefix("```python").removesuffix("```")
   state.code_placeholder = state.code
@@ -427,7 +508,11 @@ def on_run_prompt(e: me.ClickEvent):
   )
   state.prompt_history.append(
     dict(
-      prompt=state.prompt, code=state.code, index=len(state.prompt_history), mode=state.prompt_mode
+      prompt=state.prompt,
+      code=state.code,
+      index=len(state.prompt_history),
+      mode=state.prompt_mode,
+      app_type=state.prompt_app_type,
     )
   )
 
@@ -440,6 +525,15 @@ def on_run_prompt(e: me.ClickEvent):
   yield
 
 
+def on_select_template(e: me.SelectSelectionChangeEvent):
+  """Update editor with selected template"""
+  state = me.state(State)
+  state.code_placeholder = TEMPLATES[e.value]
+  state.code = TEMPLATES[e.value]
+  state.show_new_dialog = False
+  state.select_index += 1
+
+
 def on_show_prompt_history_panel(e: me.ClickEvent):
   """Show prompt history panel"""
   state = me.state(State)
@@ -466,6 +560,7 @@ def on_click_history_prompt(e: me.ClickEvent):
   state.prompt = state.prompt_placeholder
   state.code_placeholder = prompt_history["code"]
   state.code = state.code_placeholder
+  state.prompt_app_type = prompt_history["app_type"]
   state.prompt_mode = prompt_history["mode"]
   state.show_prompt_history_panel = False
   state.show_generate_panel = True

prompt/base_examples.txt

@@ -0,0 +1,1853 @@
+This section provides examples of Mesop code usage. Each example is wrapped in <example> tags.
+
+<example>
+import random
+import time
+from dataclasses import dataclass
+from typing import Literal
+
+import mesop as me
+
+Role = Literal["user", "assistant"]
+
+
+@dataclass(kw_only=True)
+class ChatMessage:
+  """Chat message metadata."""
+
+  role: Role = "user"
+  content: str = ""
+  edited: bool = False
+
+
+@me.stateclass
+class State:
+  input: str
+  output: list[ChatMessage]
+  in_progress: bool
+  rewrite: str
+  rewrite_message_index: int
+  preview_rewrite: str
+  preview_original: str
+  modal_open: bool
+
+
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/llm_rewriter",
+  title="LLM Rewriter",
+)
+def page():
+  state = me.state(State)
+
+  # Modal
+  with me.box(style=_make_modal_background_style(state.modal_open)):
+    with me.box(style=_STYLE_MODAL_CONTAINER):
+      with me.box(style=_STYLE_MODAL_CONTENT):
+        me.textarea(
+          label="Rewrite",
+          style=_STYLE_INPUT_WIDTH,
+          value=state.rewrite,
+          on_input=on_rewrite_input,
+        )
+        with me.box():
+          me.button(
+            "Submit Rewrite",
+            color="primary",
+            type="flat",
+            on_click=on_click_submit_rewrite,
+          )
+          me.button(
+            "Cancel",
+            on_click=on_click_cancel_rewrite,
+          )
+        with me.box(style=_STYLE_PREVIEW_CONTAINER):
+          with me.box(style=_STYLE_PREVIEW_ORIGINAL):
+            me.text("Original Message", type="headline-6")
+            me.markdown(state.preview_original)
+
+          with me.box(style=_STYLE_PREVIEW_REWRITE):
+            me.text("Preview Rewrite", type="headline-6")
+            me.markdown(state.preview_rewrite)
+
+  # Chat UI
+  with me.box(style=_STYLE_APP_CONTAINER):
+    with me.box(style=_make_style_chat_ui_container(bool(_TITLE))):
+      me.text(_TITLE, type="headline-5", style=_STYLE_TITLE)
+      with me.box(style=_STYLE_CHAT_BOX):
+        for index, msg in enumerate(state.output):
+          with me.box(
+            style=_make_style_chat_bubble_wrapper(msg.role),
+            key=f"msg-{index}",
+            on_click=on_click_rewrite_msg,
+          ):
+            if msg.role == _ROLE_ASSISTANT:
+              me.text(
+                _display_username(_BOT_USER_DEFAULT, msg.edited),
+                style=_STYLE_CHAT_BUBBLE_NAME,
+              )
+            with me.box(style=_make_chat_bubble_style(msg.role, msg.edited)):
+              if msg.role == _ROLE_USER:
+                me.text(msg.content, style=_STYLE_CHAT_BUBBLE_PLAINTEXT)
+              else:
+                me.markdown(msg.content)
+                with me.tooltip(message="Rewrite response"):
+                  me.icon(icon="edit_note")
+
+        if state.in_progress:
+          with me.box(key="scroll-to", style=me.Style(height=300)):
+            pass
+      with me.box(style=_STYLE_CHAT_INPUT_BOX):
+        with me.box(style=me.Style(flex_grow=1)):
+          me.input(
+            label=_LABEL_INPUT,
+            # Workaround: update key to clear input.
+            key=f"input-{len(state.output)}",
+            on_input=on_chat_input,
+            on_enter=on_click_submit_chat_msg,
+            style=_STYLE_CHAT_INPUT,
+          )
+        with me.content_button(
+          color="primary",
+          type="flat",
+          disabled=state.in_progress,
+          on_click=on_click_submit_chat_msg,
+          style=_STYLE_CHAT_BUTTON,
+        ):
+          me.icon(
+            _LABEL_BUTTON_IN_PROGRESS if state.in_progress else _LABEL_BUTTON
+          )
+
+
+# Event Handlers
+
+
+def on_chat_input(e: me.InputEvent):
+  """Capture chat text input."""
+  state = me.state(State)
+  state.input = e.value
+
+
+def on_rewrite_input(e: me.InputEvent):
+  """Capture rewrite text input."""
+  state = me.state(State)
+  state.preview_rewrite = e.value
+
+
+def on_click_rewrite_msg(e: me.ClickEvent):
+  """Shows rewrite modal when a message is clicked.
+
+  Edit this function to persist rewritten messages.
+  """
+  state = me.state(State)
+  index = int(e.key.replace("msg-", ""))
+  message = state.output[index]
+  if message.role == _ROLE_USER or state.in_progress:
+    return
+  state.modal_open = True
+  state.rewrite = message.content
+  state.rewrite_message_index = index
+  state.preview_original = message.content
+  state.preview_rewrite = message.content
+
+
+def on_click_submit_rewrite(e: me.ClickEvent):
+  """Submits rewrite message."""
+  state = me.state(State)
+  state.modal_open = False
+  message = state.output[state.rewrite_message_index]
+  if message.content != state.preview_rewrite:
+    message.content = state.preview_rewrite
+    message.edited = True
+  state.rewrite_message_index = 0
+  state.rewrite = ""
+  state.preview_original = ""
+  state.preview_rewrite = ""
+
+
+def on_click_cancel_rewrite(e: me.ClickEvent):
+  """Hides rewrite modal."""
+  state = me.state(State)
+  state.modal_open = False
+  state.rewrite_message_index = 0
+  state.rewrite = ""
+  state.preview_original = ""
+  state.preview_rewrite = ""
+
+
+def on_click_submit_chat_msg(e: me.ClickEvent | me.InputEnterEvent):
+  """Handles submitting a chat message."""
+  state = me.state(State)
+  if state.in_progress or not state.input:
+    return
+  input = state.input
+  state.input = ""
+  yield
+
+  output = state.output
+  if output is None:
+    output = []
+  output.append(ChatMessage(role=_ROLE_USER, content=input))
+  state.in_progress = True
+  yield
+
+  me.scroll_into_view(key="scroll-to")
+  time.sleep(0.15)
+  yield
+
+  start_time = time.time()
+  output_message = respond_to_chat(input, state.output)
+  assistant_message = ChatMessage(role=_ROLE_ASSISTANT)
+  output.append(assistant_message)
+  state.output = output
+  for content in output_message:
+    assistant_message.content += content
+    # TODO: 0.25 is an abitrary choice. In the future, consider making this adjustable.
+    if (time.time() - start_time) >= 0.25:
+      start_time = time.time()
+      yield
+
+  state.in_progress = False
+  yield
+
+
+# Transform function for processing chat messages.
+
+
+def respond_to_chat(input: str, history: list[ChatMessage]):
+  """Displays random canned text.
+
+  Edit this function to process messages with a real chatbot/LLM.
+  """
+  lines = [
+    (
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, "
+      "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    ),
+    "Laoreet sit amet cursus sit amet dictum sit amet.",
+    "At lectus urna duis convallis.",
+    "A pellentesque sit amet porttitor eget.",
+    "Mauris nunc congue nisi vitae suscipit tellus mauris a diam.",
+    "Aliquet lectus proin nibh nisl condimentum id.",
+    "Integer malesuada nunc vel risus commodo viverra maecenas accumsan.",
+    "Tempor id eu nisl nunc mi.",
+    "Id consectetur purus ut faucibus pulvinar.",
+    "Mauris pharetra et ultrices neque ornare.",
+    "Facilisis magna etiam tempor orci.",
+    "Mauris pharetra et ultrices neque.",
+    "Sit amet facilisis magna etiam tempor orci.",
+    "Amet consectetur adipiscing elit pellentesque habitant morbi tristique.",
+    "Egestas erat imperdiet sed euismod.",
+    "Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida.",
+    "Habitant morbi tristique senectus et netus et malesuada.",
+  ]
+  for line in random.sample(lines, random.randint(3, len(lines) - 1)):
+    yield line + " "
+
+
+# Constants
+
+_TITLE = "LLM Rewriter"
+
+_ROLE_USER = "user"
+_ROLE_ASSISTANT = "assistant"
+
+_BOT_USER_DEFAULT = "mesop-bot"
+
+
+# Styles
+
+_COLOR_BACKGROUND = "#f0f4f8"
+_COLOR_CHAT_BUBBLE_YOU = "#f2f2f2"
+_COLOR_CHAT_BUBBLE_BOT = "#ebf3ff"
+_COLOR_CHAT_BUUBBLE_EDITED = "#f2ebff"
+
+_DEFAULT_PADDING = me.Padding.all(20)
+_DEFAULT_BORDER_SIDE = me.BorderSide(
+  width="1px", style="solid", color="#ececec"
+)
+
+_LABEL_BUTTON = "send"
+_LABEL_BUTTON_IN_PROGRESS = "pending"
+_LABEL_INPUT = "Enter your prompt"
+
+_STYLE_INPUT_WIDTH = me.Style(width="100%")
+
+_STYLE_APP_CONTAINER = me.Style(
+  background=_COLOR_BACKGROUND,
+  display="grid",
+  height="100vh",
+  grid_template_columns="repeat(1, 1fr)",
+)
+_STYLE_TITLE = me.Style(padding=me.Padding(left=10))
+_STYLE_CHAT_BOX = me.Style(
+  height="100%",
+  overflow_y="scroll",
+  padding=_DEFAULT_PADDING,
+  margin=me.Margin(bottom=20),
+  border_radius="10px",
+  border=me.Border(
+    left=_DEFAULT_BORDER_SIDE,
+    right=_DEFAULT_BORDER_SIDE,
+    top=_DEFAULT_BORDER_SIDE,
+    bottom=_DEFAULT_BORDER_SIDE,
+  ),
+)
+_STYLE_CHAT_INPUT = me.Style(width="100%")
+_STYLE_CHAT_INPUT_BOX = me.Style(
+  padding=me.Padding(top=30), display="flex", flex_direction="row"
+)
+_STYLE_CHAT_BUTTON = me.Style(margin=me.Margin(top=8, left=8))
+_STYLE_CHAT_BUBBLE_NAME = me.Style(
+  font_weight="bold",
+  font_size="12px",
+  padding=me.Padding(left=15, right=15, bottom=5),
+)
+_STYLE_CHAT_BUBBLE_PLAINTEXT = me.Style(margin=me.Margin.symmetric(vertical=15))
+
+_STYLE_MODAL_CONTAINER = me.Style(
+  background="#fff",
+  margin=me.Margin.symmetric(vertical="0", horizontal="auto"),
+  width="min(1024px, 100%)",
+  box_sizing="content-box",
+  height="100vh",
+  overflow_y="scroll",
+  box_shadow=("0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"),
+)
+
+_STYLE_MODAL_CONTENT = me.Style(margin=me.Margin.all(20))
+
+_STYLE_PREVIEW_CONTAINER = me.Style(
+  display="grid",
+  grid_template_columns="repeat(2, 1fr)",
+)
+
+_STYLE_PREVIEW_ORIGINAL = me.Style(color="#777", padding=_DEFAULT_PADDING)
+
+_STYLE_PREVIEW_REWRITE = me.Style(
+  background=_COLOR_CHAT_BUUBBLE_EDITED, padding=_DEFAULT_PADDING
+)
+
+
+def _make_style_chat_ui_container(has_title: bool) -> me.Style:
+  """Generates styles for chat UI container depending on if there is a title or not.
+
+  Args:
+    has_title: Whether the Chat UI is display a title or not.
+  """
+  return me.Style(
+    display="grid",
+    grid_template_columns="repeat(1, 1fr)",
+    grid_template_rows="1fr 14fr 1fr" if has_title else "5fr 1fr",
+    margin=me.Margin.symmetric(vertical=0, horizontal="auto"),
+    width="min(1024px, 100%)",
+    height="100vh",
+    background="#fff",
+    box_shadow=(
+      "0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"
+    ),
+    padding=me.Padding(top=20, left=20, right=20),
+  )
+
+
+def _make_style_chat_bubble_wrapper(role: Role) -> me.Style:
+  """Generates styles for chat bubble position.
+
+  Args:
+    role: Chat bubble alignment depends on the role
+  """
+  align_items = "end" if role == _ROLE_USER else "start"
+  return me.Style(
+    display="flex",
+    flex_direction="column",
+    align_items=align_items,
+  )
+
+
+def _make_chat_bubble_style(role: Role, edited: bool) -> me.Style:
+  """Generates styles for chat bubble.
+
+  Args:
+    role: Chat bubble background color depends on the role
+    edited: Whether chat message was edited or not.
+  """
+  background = _COLOR_CHAT_BUBBLE_YOU
+  if role == _ROLE_ASSISTANT:
+    background = _COLOR_CHAT_BUBBLE_BOT
+  if edited:
+    background = _COLOR_CHAT_BUUBBLE_EDITED
+
+  return me.Style(
+    width="80%",
+    font_size="13px",
+    background=background,
+    border_radius="15px",
+    padding=me.Padding(right=15, left=15, bottom=3),
+    margin=me.Margin(bottom=10),
+    border=me.Border(
+      left=_DEFAULT_BORDER_SIDE,
+      right=_DEFAULT_BORDER_SIDE,
+      top=_DEFAULT_BORDER_SIDE,
+      bottom=_DEFAULT_BORDER_SIDE,
+    ),
+  )
+
+
+def _make_modal_background_style(modal_open: bool) -> me.Style:
+  """Makes style for modal background.
+
+  Args:
+    modal_open: Whether the modal is open.
+  """
+  return me.Style(
+    display="block" if modal_open else "none",
+    position="fixed",
+    z_index=1000,
+    width="100%",
+    height="100%",
+    overflow_x="auto",
+    overflow_y="auto",
+    background="rgba(0,0,0,0.4)",
+  )
+
+
+def _display_username(username: str, edited: bool = False) -> str:
+  """Displays the username
+
+  Args:
+    username: Name of the user
+    edited: Whether the message has been edited.
+  """
+  edited_text = " (edited)" if edited else ""
+  return username + edited_text
+
+<example>
+
+<example>
+import random
+import time
+from typing import Callable
+
+import mesop as me
+
+_TEMPERATURE_MIN = 0.0
+_TEMPERATURE_MAX = 2.0
+_TOKEN_LIMIT_MIN = 1
+_TOKEN_LIMIT_MAX = 8192
+
+
+@me.stateclass
+class State:
+  title: str = "LLM Playground"
+  # Prompt / Response
+  input: str
+  response: str
+  # Tab open/close
+  prompt_tab: bool = True
+  response_tab: bool = True
+  # Model configs
+  selected_model: str = "gemini-1.5"
+  selected_region: str = "us-east4"
+  temperature: float = 1.0
+  temperature_for_input: float = 1.0
+  token_limit: int = _TOKEN_LIMIT_MAX
+  token_limit_for_input: int = _TOKEN_LIMIT_MAX
+  stop_sequence: str = ""
+  stop_sequences: list[str]
+  # Modal
+  modal_open: bool = False
+  # Workaround for clearing inputs
+  clear_prompt_count: int = 0
+  clear_sequence_count: int = 0
+
+
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/llm_playground",
+  title="LLM Playground",
+)
+def page():
+  state = me.state(State)
+
+  # Modal
+  with modal(modal_open=state.modal_open):
+    me.text("Get code", type="headline-5")
+    if "gemini" in state.selected_model:
+      me.text(
+        "Use the following code in your application to request a model response."
+      )
+      with me.box(style=_STYLE_CODE_BOX):
+        me.markdown(
+          _GEMINI_CODE_TEXT.format(
+            content=state.input.replace('"', '\\"'),
+            model=state.selected_model,
+            region=state.selected_region,
+            stop_sequences=make_stop_sequence_str(state.stop_sequences),
+            token_limit=state.token_limit,
+            temperature=state.temperature,
+          )
+        )
+    else:
+      me.text(
+        "You can use the following code to start integrating your current prompt and settings into your application."
+      )
+      with me.box(style=_STYLE_CODE_BOX):
+        me.markdown(
+          _GPT_CODE_TEXT.format(
+            content=state.input.replace('"', '\\"').replace("\n", "\\n"),
+            model=state.selected_model,
+            stop_sequences=make_stop_sequence_str(state.stop_sequences),
+            token_limit=state.token_limit,
+            temperature=state.temperature,
+          )
+        )
+    me.button(label="Close", type="raised", on_click=on_click_modal)
+
+  # Main content
+  with me.box(style=_STYLE_CONTAINER):
+    # Main Header
+    with me.box(style=_STYLE_MAIN_HEADER):
+      with me.box(style=_STYLE_TITLE_BOX):
+        me.text(
+          state.title,
+          type="headline-6",
+          style=me.Style(line_height="24px", margin=me.Margin(bottom=0)),
+        )
+
+    # Toolbar Header
+    with me.box(style=_STYLE_CONFIG_HEADER):
+      icon_button(
+        icon="code", tooltip="Code", label="CODE", on_click=on_click_show_code
+      )
+
+    # Main Content
+    with me.box(style=_STYLE_MAIN_COLUMN):
+      # Prompt Tab
+      with tab_box(header="Prompt", key="prompt_tab"):
+        me.textarea(
+          label="Write your prompt here, insert media and then click Submit",
+          # Workaround: update key to clear input.
+          key=f"prompt-{state.clear_prompt_count}",
+          on_input=on_prompt_input,
+          style=_STYLE_INPUT_WIDTH,
+        )
+        me.button(label="Submit", type="flat", on_click=on_click_submit)
+        me.button(label="Clear", on_click=on_click_clear)
+
+      # Response Tab
+      with tab_box(header="Response", key="response_tab"):
+        if state.response:
+          me.markdown(state.response)
+        else:
+          me.markdown(
+            "The model will generate a response after you click Submit."
+          )
+
+    # LLM Config
+    with me.box(style=_STYLE_CONFIG_COLUMN):
+      me.select(
+        options=[
+          me.SelectOption(label="Gemini 1.5", value="gemini-1.5"),
+          me.SelectOption(label="Chat-GPT Turbo", value="gpt-3.5-turbo"),
+        ],
+        label="Model",
+        style=_STYLE_INPUT_WIDTH,
+        on_selection_change=on_model_select,
+        value=state.selected_model,
+      )
+
+      if "gemini" in state.selected_model:
+        me.select(
+          options=[
+            me.SelectOption(label="us-central1 (Iowa)", value="us-central1"),
+            me.SelectOption(
+              label="us-east4 (North Virginia)", value="us-east4"
+            ),
+          ],
+          label="Region",
+          style=_STYLE_INPUT_WIDTH,
+          on_selection_change=on_region_select,
+          value=state.selected_region,
+        )
+
+      me.text("Temperature", style=_STYLE_SLIDER_LABEL)
+      with me.box(style=_STYLE_SLIDER_INPUT_BOX):
+        with me.box(style=_STYLE_SLIDER_WRAP):
+          me.slider(
+            min=_TEMPERATURE_MIN,
+            max=_TEMPERATURE_MAX,
+            step=0.1,
+            style=_STYLE_SLIDER,
+            on_value_change=on_slider_temperature,
+            value=state.temperature,
+          )
+        me.input(
+          style=_STYLE_SLIDER_INPUT,
+          value=str(state.temperature_for_input),
+          on_input=on_input_temperature,
+        )
+
+      me.text("Output Token Limit", style=_STYLE_SLIDER_LABEL)
+      with me.box(style=_STYLE_SLIDER_INPUT_BOX):
+        with me.box(style=_STYLE_SLIDER_WRAP):
+          me.slider(
+            min=_TOKEN_LIMIT_MIN,
+            max=_TOKEN_LIMIT_MAX,
+            style=_STYLE_SLIDER,
+            on_value_change=on_slider_token_limit,
+            value=state.token_limit,
+          )
+        me.input(
+          style=_STYLE_SLIDER_INPUT,
+          value=str(state.token_limit_for_input),
+          on_input=on_input_token_limit,
+        )
+
+      with me.box(style=_STYLE_STOP_SEQUENCE_BOX):
+        with me.box(style=_STYLE_STOP_SEQUENCE_WRAP):
+          me.input(
+            label="Add stop sequence",
+            style=_STYLE_INPUT_WIDTH,
+            on_input=on_stop_sequence_input,
+            # Workaround: update key to clear input.
+            key=f"input-sequence-{state.clear_sequence_count}",
+          )
+        with me.content_button(
+          style=me.Style(margin=me.Margin(left=10)),
+          on_click=on_click_add_stop_sequence,
+        ):
+          with me.tooltip(message="Add stop Sequence"):
+            me.icon(icon="add_circle")
+
+      # Stop sequence "chips"
+      for index, sequence in enumerate(state.stop_sequences):
+        me.button(
+          key=f"sequence-{index}",
+          label=sequence,
+          on_click=on_click_remove_stop_sequence,
+          type="raised",
+          style=_STYLE_STOP_SEQUENCE_CHIP,
+        )
+
+
+# HELPER COMPONENTS
+
+
+@me.component
+def icon_button(*, icon: str, label: str, tooltip: str, on_click: Callable):
+  """Icon button with text and tooltip."""
+  with me.content_button(on_click=on_click):
+    with me.tooltip(message=tooltip):
+      with me.box(style=me.Style(display="flex")):
+        me.icon(icon=icon)
+        me.text(
+          label, style=me.Style(line_height="24px", margin=me.Margin(left=5))
+        )
+
+
+@me.content_component
+def tab_box(*, header: str, key: str):
+  """Collapsible tab box"""
+  state = me.state(State)
+  tab_open = getattr(state, key)
+  with me.box(style=me.Style(width="100%", margin=me.Margin(bottom=20))):
+    # Tab Header
+    with me.box(
+      key=key,
+      on_click=on_click_tab_header,
+      style=me.Style(padding=_DEFAULT_PADDING, border=_DEFAULT_BORDER),
+    ):
+      with me.box(style=me.Style(display="flex")):
+        me.icon(
+          icon="keyboard_arrow_down" if tab_open else "keyboard_arrow_right"
+        )
+        me.text(
+          header,
+          style=me.Style(
+            line_height="24px", margin=me.Margin(left=5), font_weight="bold"
+          ),
+        )
+    # Tab Content
+    with me.box(
+      style=me.Style(
+        padding=_DEFAULT_PADDING,
+        border=_DEFAULT_BORDER,
+        display="block" if tab_open else "none",
+      )
+    ):
+      me.slot()
+
+
+@me.content_component
+def modal(modal_open: bool):
+  """Basic modal box."""
+  with me.box(style=_make_modal_background_style(modal_open)):
+    with me.box(style=_STYLE_MODAL_CONTAINER):
+      with me.box(style=_STYLE_MODAL_CONTENT):
+        me.slot()
+
+
+# EVENT HANDLERS
+
+
+def on_click_clear(e: me.ClickEvent):
+  """Click event for clearing prompt text."""
+  state = me.state(State)
+  state.clear_prompt_count += 1
+  state.input = ""
+  state.response = ""
+
+
+def on_prompt_input(e: me.InputEvent):
+  """Capture prompt input."""
+  state = me.state(State)
+  state.input = e.value
+
+
+def on_model_select(e: me.SelectSelectionChangeEvent):
+  """Event to select model."""
+  state = me.state(State)
+  state.selected_model = e.value
+
+
+def on_region_select(e: me.SelectSelectionChangeEvent):
+  """Event to select GCP region (Gemini models only)."""
+  state = me.state(State)
+  state.selected_region = e.value
+
+
+def on_slider_temperature(e: me.SliderValueChangeEvent):
+  """Event to adjust temperature slider value."""
+  state = me.state(State)
+  state.temperature = float(e.value)
+  state.temperature_for_input = state.temperature
+
+
+def on_input_temperature(e: me.InputEvent):
+  """Event to adjust temperature slider value by input."""
+  state = me.state(State)
+  try:
+    temperature = float(e.value)
+    if _TEMPERATURE_MIN <= temperature <= _TEMPERATURE_MAX:
+      state.temperature = temperature
+  except ValueError:
+    pass
+
+
+def on_slider_token_limit(e: me.SliderValueChangeEvent):
+  """Event to adjust token limit slider value."""
+  state = me.state(State)
+  state.token_limit = int(e.value)
+  state.token_limit_for_input = state.token_limit
+
+
+def on_input_token_limit(e: me.InputEvent):
+  """Event to adjust token limit slider value by input."""
+  state = me.state(State)
+  try:
+    token_limit = int(e.value)
+    if _TOKEN_LIMIT_MIN <= token_limit <= _TOKEN_LIMIT_MAX:
+      state.token_limit = token_limit
+  except ValueError:
+    pass
+
+
+def on_stop_sequence_input(e: me.InputEvent):
+  """Capture stop sequence input."""
+  state = me.state(State)
+  state.stop_sequence = e.value
+
+
+def on_click_add_stop_sequence(e: me.ClickEvent):
+  """Save stop sequence. Will create "chip" for the sequence in the input."""
+  state = me.state(State)
+  if state.stop_sequence:
+    state.stop_sequences.append(state.stop_sequence)
+    state.clear_sequence_count += 1
+
+
+def on_click_remove_stop_sequence(e: me.ClickEvent):
+  """Click event that removes the stop sequence that was clicked."""
+  state = me.state(State)
+  index = int(e.key.replace("sequence-", ""))
+  del state.stop_sequences[index]
+
+
+def on_click_tab_header(e: me.ClickEvent):
+  """Open and closes tab content."""
+  state = me.state(State)
+  setattr(state, e.key, not getattr(state, e.key))
+
+
+def on_click_show_code(e: me.ClickEvent):
+  """Opens modal to show generated code for the given model configuration."""
+  state = me.state(State)
+  state.modal_open = True
+
+
+def on_click_modal(e: me.ClickEvent):
+  """Allows modal to be closed."""
+  state = me.state(State)
+  if state.modal_open:
+    state.modal_open = False
+
+
+def on_click_submit(e: me.ClickEvent):
+  """Submits prompt to test model configuration.
+
+  This example returns canned text. A real implementation
+  would call APIs against the given configuration.
+  """
+  state = me.state(State)
+  for line in transform(state.input):
+    state.response += line
+    yield
+
+
+def transform(input: str):
+  """Transform function that returns canned responses."""
+  for line in random.sample(LINES, random.randint(3, len(LINES) - 1)):
+    time.sleep(0.3)
+    yield line + " "
+
+
+LINES = [
+  "Mesop is a Python-based UI framework designed to simplify web UI development for engineers without frontend experience.",
+  "It leverages the power of the Angular web framework and Angular Material components, allowing rapid construction of web demos and internal tools.",
+  "With Mesop, developers can enjoy a fast build-edit-refresh loop thanks to its hot reload feature, making UI tweaks and component integration seamless.",
+  "Deployment is straightforward, utilizing standard HTTP technologies.",
+  "Mesop's component library aims for comprehensive Angular Material component coverage, enhancing UI flexibility and composability.",
+  "It supports custom components for specific use cases, ensuring developers can extend its capabilities to fit their unique requirements.",
+  "Mesop's roadmap includes expanding its component library and simplifying the onboarding processs.",
+]
+
+
+# HELPERS
+
+_GEMINI_CODE_TEXT = """
+```python
+import base64
+import vertexai
+from vertexai.generative_models import GenerativeModel, Part, FinishReason
+import vertexai.preview.generative_models as generative_models
+
+def generate():
+  vertexai.init(project="<YOUR-PROJECT-ID>", location="{region}")
+  model = GenerativeModel("{model}")
+  responses = model.generate_content(
+      [\"\"\"{content}\"\"\"],
+      generation_config=generation_config,
+      safety_settings=safety_settings,
+      stream=True,
+  )
+
+  for response in responses:
+    print(response.text, end="")
+
+
+generation_config = {{
+    "max_output_tokens": {token_limit},
+    "stop_sequences": [{stop_sequences}],
+    "temperature": {temperature},
+    "top_p": 0.95,
+}}
+
+safety_settings = {{
+    generative_models.HarmCategory.HARM_CATEGORY_HATE_SPEECH: generative_models.HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+    generative_models.HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT: generative_models.HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+    generative_models.HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT: generative_models.HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+    generative_models.HarmCategory.HARM_CATEGORY_HARASSMENT: generative_models.HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+}}
+
+generate()
+```
+""".strip()
+
+_GPT_CODE_TEXT = """
+```python
+from openai import OpenAI
+client = OpenAI()
+
+response = client.chat.completions.create(
+  model="{model}",
+  messages=[
+    {{
+      "role": "user",
+      "content": "{content}"
+    }}
+  ],
+  temperature={temperature},
+  max_tokens={token_limit},
+  top_p=1,
+  frequency_penalty=0,
+  presence_penalty=0,
+  stop=[{stop_sequences}]
+)
+```
+""".strip()
+
+
+def make_stop_sequence_str(stop_sequences: list[str]) -> str:
+  """Formats stop sequences for code output (list of strings)."""
+  return ",".join(map(lambda s: f'"{s}"', stop_sequences))
+
+
+# STYLES
+
+
+def _make_modal_background_style(modal_open: bool) -> me.Style:
+  """Makes style for modal background.
+
+  Args:
+    modal_open: Whether the modal is open.
+  """
+  return me.Style(
+    display="block" if modal_open else "none",
+    position="fixed",
+    z_index=1000,
+    width="100%",
+    height="100%",
+    overflow_x="auto",
+    overflow_y="auto",
+    background="rgba(0,0,0,0.4)",
+  )
+
+
+_DEFAULT_PADDING = me.Padding.all(15)
+_DEFAULT_BORDER = me.Border.all(
+  me.BorderSide(color="#e0e0e0", width=1, style="solid")
+)
+
+_STYLE_INPUT_WIDTH = me.Style(width="100%")
+_STYLE_SLIDER_INPUT_BOX = me.Style(display="flex", flex_wrap="wrap")
+_STYLE_SLIDER_WRAP = me.Style(flex_grow=1)
+_STYLE_SLIDER_LABEL = me.Style(padding=me.Padding(bottom=10))
+_STYLE_SLIDER = me.Style(width="90%")
+_STYLE_SLIDER_INPUT = me.Style(width=75)
+
+_STYLE_STOP_SEQUENCE_BOX = me.Style(display="flex")
+_STYLE_STOP_SEQUENCE_WRAP = me.Style(flex_grow=1)
+
+_STYLE_CONTAINER = me.Style(
+  display="grid",
+  grid_template_columns="5fr 2fr",
+  grid_template_rows="auto 5fr",
+  height="100vh",
+)
+
+_STYLE_MAIN_HEADER = me.Style(
+  border=_DEFAULT_BORDER, padding=me.Padding.all(15)
+)
+
+_STYLE_MAIN_COLUMN = me.Style(
+  border=_DEFAULT_BORDER,
+  padding=me.Padding.all(15),
+  overflow_y="scroll",
+)
+
+_STYLE_CONFIG_COLUMN = me.Style(
+  border=_DEFAULT_BORDER,
+  padding=me.Padding.all(15),
+  overflow_y="scroll",
+)
+
+_STYLE_TITLE_BOX = me.Style(display="inline-block")
+
+_STYLE_CONFIG_HEADER = me.Style(
+  border=_DEFAULT_BORDER, padding=me.Padding.all(10)
+)
+
+_STYLE_STOP_SEQUENCE_CHIP = me.Style(margin=me.Margin.all(3))
+
+_STYLE_MODAL_CONTAINER = me.Style(
+  background="#fff",
+  margin=me.Margin.symmetric(vertical="0", horizontal="auto"),
+  width="min(1024px, 100%)",
+  box_sizing="content-box",
+  height="100vh",
+  overflow_y="scroll",
+  box_shadow=("0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"),
+)
+
+_STYLE_MODAL_CONTENT = me.Style(margin=me.Margin.all(30))
+
+_STYLE_CODE_BOX = me.Style(
+  font_size=13,
+  margin=me.Margin.symmetric(vertical=10, horizontal=0),
+  padding=me.Padding.all(10),
+  border=me.Border.all(me.BorderSide(color="#e0e0e0", width=1, style="solid")),
+)
+
+<example>
+
+<example>
+import time
+from dataclasses import dataclass
+from typing import Callable, Generator, Literal
+
+import mesop as me
+
+Role = Literal["user", "assistant"]
+
+_ROLE_USER = "user"
+_ROLE_ASSISTANT = "assistant"
+
+_BOT_USER_DEFAULT = "mesop-bot"
+
+_COLOR_BACKGROUND = me.theme_var("background")
+_COLOR_CHAT_BUBBLE_YOU = me.theme_var("surface-container-low")
+_COLOR_CHAT_BUBBLE_BOT = me.theme_var("secondary-container")
+
+_DEFAULT_PADDING = me.Padding.all(20)
+_DEFAULT_BORDER_SIDE = me.BorderSide(
+  width="1px", style="solid", color=me.theme_var("secondary-fixed")
+)
+
+_LABEL_BUTTON = "send"
+_LABEL_BUTTON_IN_PROGRESS = "pending"
+_LABEL_INPUT = "Enter your prompt"
+
+_STYLE_APP_CONTAINER = me.Style(
+  background=_COLOR_BACKGROUND,
+  display="grid",
+  height="100vh",
+  grid_template_columns="repeat(1, 1fr)",
+)
+_STYLE_TITLE = me.Style(padding=me.Padding(left=10))
+_STYLE_CHAT_BOX = me.Style(
+  height="100%",
+  overflow_y="scroll",
+  padding=_DEFAULT_PADDING,
+  margin=me.Margin(bottom=20),
+  border_radius="10px",
+  border=me.Border(
+    left=_DEFAULT_BORDER_SIDE,
+    right=_DEFAULT_BORDER_SIDE,
+    top=_DEFAULT_BORDER_SIDE,
+    bottom=_DEFAULT_BORDER_SIDE,
+  ),
+)
+_STYLE_CHAT_INPUT = me.Style(width="100%")
+_STYLE_CHAT_INPUT_BOX = me.Style(
+  padding=me.Padding(top=30), display="flex", flex_direction="row"
+)
+_STYLE_CHAT_BUTTON = me.Style(margin=me.Margin(top=8, left=8))
+_STYLE_CHAT_BUBBLE_NAME = me.Style(
+  font_weight="bold",
+  font_size="13px",
+  padding=me.Padding(left=15, right=15, bottom=5),
+)
+_STYLE_CHAT_BUBBLE_PLAINTEXT = me.Style(margin=me.Margin.symmetric(vertical=15))
+
+
+def _make_style_chat_ui_container(has_title: bool) -> me.Style:
+  """Generates styles for chat UI container depending on if there is a title or not.
+
+  Args:
+    has_title: Whether the Chat UI is display a title or not.
+  """
+  return me.Style(
+    display="grid",
+    grid_template_columns="repeat(1, 1fr)",
+    grid_template_rows="1fr 14fr 1fr" if has_title else "5fr 1fr",
+    margin=me.Margin.symmetric(vertical=0, horizontal="auto"),
+    width="min(1024px, 100%)",
+    height="100vh",
+    background=_COLOR_BACKGROUND,
+    box_shadow=(
+      "0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"
+    ),
+    padding=me.Padding(top=20, left=20, right=20),
+  )
+
+
+def _make_style_chat_bubble_wrapper(role: Role) -> me.Style:
+  """Generates styles for chat bubble position.
+
+  Args:
+    role: Chat bubble alignment depends on the role
+  """
+  align_items = "end" if role == _ROLE_USER else "start"
+  return me.Style(
+    display="flex",
+    flex_direction="column",
+    align_items=align_items,
+  )
+
+
+def _make_chat_bubble_style(role: Role) -> me.Style:
+  """Generates styles for chat bubble.
+
+  Args:
+    role: Chat bubble background color depends on the role
+  """
+  background = (
+    _COLOR_CHAT_BUBBLE_YOU if role == _ROLE_USER else _COLOR_CHAT_BUBBLE_BOT
+  )
+  return me.Style(
+    width="80%",
+    font_size="16px",
+    line_height="1.5",
+    background=background,
+    border_radius="15px",
+    padding=me.Padding(right=15, left=15, bottom=3),
+    margin=me.Margin(bottom=10),
+    border=me.Border(
+      left=_DEFAULT_BORDER_SIDE,
+      right=_DEFAULT_BORDER_SIDE,
+      top=_DEFAULT_BORDER_SIDE,
+      bottom=_DEFAULT_BORDER_SIDE,
+    ),
+  )
+
+
+@dataclass(kw_only=True)
+class ChatMessage:
+  """Chat message metadata."""
+
+  role: Role = "user"
+  content: str = ""
+
+
+@me.stateclass
+class State:
+  input: str
+  output: list[ChatMessage]
+  in_progress: bool = False
+
+
+def on_blur(e: me.InputBlurEvent):
+  state = me.state(State)
+  state.input = e.value
+
+
+def chat(
+  transform: Callable[
+    [str, list[ChatMessage]], Generator[str, None, None] | str
+  ],
+  *,
+  title: str | None = None,
+  bot_user: str = _BOT_USER_DEFAULT,
+):
+  """Creates a simple chat UI which takes in a prompt and chat history and returns a
+  response to the prompt.
+
+  This function creates event handlers for text input and output operations
+  using the provided function `transform` to process the input and generate the output.
+
+  Args:
+    transform: Function that takes in a prompt and chat history and returns a response to the prompt.
+    title: Headline text to display at the top of the UI.
+    bot_user: Name of your bot / assistant.
+  """
+  state = me.state(State)
+
+  def on_click_submit(e: me.ClickEvent):
+    yield from submit()
+
+  def on_input_enter(e: me.InputEnterEvent):
+    state = me.state(State)
+    state.input = e.value
+    yield from submit()
+    me.focus_component(key=f"input-{len(state.output)}")
+    yield
+
+  def submit():
+    state = me.state(State)
+    if state.in_progress or not state.input:
+      return
+    input = state.input
+    state.input = ""
+    yield
+
+    output = state.output
+    if output is None:
+      output = []
+    output.append(ChatMessage(role=_ROLE_USER, content=input))
+    state.in_progress = True
+    yield
+
+    me.scroll_into_view(key="scroll-to")
+    time.sleep(0.15)
+    yield
+
+    start_time = time.time()
+    output_message = transform(input, state.output)
+    assistant_message = ChatMessage(role=_ROLE_ASSISTANT)
+    output.append(assistant_message)
+    state.output = output
+
+    for content in output_message:
+      assistant_message.content += content
+      # TODO: 0.25 is an abitrary choice. In the future, consider making this adjustable.
+      if (time.time() - start_time) >= 0.25:
+        start_time = time.time()
+        yield
+    state.in_progress = False
+    me.focus_component(key=f"input-{len(state.output)}")
+    yield
+
+  def toggle_theme(e: me.ClickEvent):
+    if me.theme_brightness() == "light":
+      me.set_theme_mode("dark")
+    else:
+      me.set_theme_mode("light")
+
+  with me.box(style=_STYLE_APP_CONTAINER):
+    with me.content_button(
+      type="icon",
+      style=me.Style(position="absolute", right=4, top=8),
+      on_click=toggle_theme,
+    ):
+      me.icon("light_mode" if me.theme_brightness() == "dark" else "dark_mode")
+    with me.box(style=_make_style_chat_ui_container(bool(title))):
+      if title:
+        me.text(title, type="headline-5", style=_STYLE_TITLE)
+      with me.box(style=_STYLE_CHAT_BOX):
+        for msg in state.output:
+          with me.box(style=_make_style_chat_bubble_wrapper(msg.role)):
+            if msg.role == _ROLE_ASSISTANT:
+              me.text(bot_user, style=_STYLE_CHAT_BUBBLE_NAME)
+            with me.box(style=_make_chat_bubble_style(msg.role)):
+              if msg.role == _ROLE_USER:
+                me.text(msg.content, style=_STYLE_CHAT_BUBBLE_PLAINTEXT)
+              else:
+                me.markdown(msg.content)
+
+        if state.in_progress:
+          with me.box(key="scroll-to", style=me.Style(height=300)):
+            pass
+
+      with me.box(style=_STYLE_CHAT_INPUT_BOX):
+        with me.box(style=me.Style(flex_grow=1)):
+          me.input(
+            label=_LABEL_INPUT,
+            # Workaround: update key to clear input.
+            key=f"input-{len(state.output)}",
+            on_blur=on_blur,
+            on_enter=on_input_enter,
+            style=_STYLE_CHAT_INPUT,
+          )
+        with me.content_button(
+          color="primary",
+          type="flat",
+          disabled=state.in_progress,
+          on_click=on_click_submit,
+          style=_STYLE_CHAT_BUTTON,
+        ):
+          me.icon(
+            _LABEL_BUTTON_IN_PROGRESS if state.in_progress else _LABEL_BUTTON
+          )
+
+<example>
+
+<example>
+import types
+from typing import Callable, Generator, Literal, cast
+
+import mesop as me
+
+
+@me.stateclass
+class State:
+  input: str
+  output: str
+  textarea_key: int
+
+
+def text_io(
+  transform: Callable[[str], Generator[str, None, None] | str],
+  *,
+  title: str | None = None,
+  transform_mode: Literal["append", "replace"] = "replace",
+):
+  """Deprecated: Use `text_to_text` instead which provides the same functionality
+  with better default settings.
+
+  This function creates event handlers for text input and output operations
+  using the provided transform function to process the input and generate the output.
+
+  Args:
+    transform: Function that takes in a string input and either returns or yields a string output.
+    title: Headline text to display at the top of the UI
+    transform_mode: Specifies how the output should be updated when yielding an output using a generator.
+                  - "append": Concatenates each new piece of text to the existing output.
+                  - "replace": Replaces the existing output with each new piece of text.
+  """
+  print(
+    "\033[93m[warning]\033[0m text_io is deprecated, use text_to_text instead"
+  )
+  text_to_text(transform=transform, title=title, transform_mode=transform_mode)
+
+
+def text_to_text(
+  transform: Callable[[str], Generator[str, None, None] | str],
+  *,
+  title: str | None = None,
+  transform_mode: Literal["append", "replace"] = "append",
+):
+  """Creates a simple UI which takes in a text input and returns a text output.
+
+  This function creates event handlers for text input and output operations
+  using the provided transform function to process the input and generate the output.
+
+  Args:
+    transform: Function that takes in a string input and either returns or yields a string output.
+    title: Headline text to display at the top of the UI
+    transform_mode: Specifies how the output should be updated when yielding an output using a generator.
+                  - "append": Concatenates each new piece of text to the existing output.
+                  - "replace": Replaces the existing output with each new piece of text.
+  """
+
+  def on_input(e: me.InputEvent):
+    state = me.state(State)
+    state.input = e.value
+
+  def on_click_generate(e: me.ClickEvent):
+    state = me.state(State)
+    output = transform(state.input)
+    if isinstance(output, types.GeneratorType):
+      for val in output:
+        if transform_mode == "append":
+          state.output += val
+        elif transform_mode == "replace":
+          state.output = val
+        else:
+          raise ValueError(f"Unsupported transform_mode: {transform_mode}")
+        yield
+    else:
+      # `output` is a str, however type inference doesn't
+      # work w/ generator's unusual ininstance check.
+      state.output = cast(str, output)
+      yield
+
+  def on_click_clear(e: me.ClickEvent):
+    state = me.state(State)
+    state.input = ""
+    state.textarea_key += 1
+
+  with me.box(
+    style=me.Style(
+      background="#f0f4f8",
+      height="100%",
+    )
+  ):
+    with me.box(
+      style=me.Style(
+        background="#f0f4f8",
+        padding=me.Padding(top=24, left=24, right=24, bottom=24),
+        display="flex",
+        flex_direction="column",
+      )
+    ):
+      if title:
+        me.text(title, type="headline-5")
+      with me.box(
+        style=me.Style(
+          margin=me.Margin(left="auto", right="auto"),
+          width="min(1024px, 100%)",
+          gap="24px",
+          flex_grow=1,
+          display="flex",
+          flex_wrap="wrap",
+        )
+      ):
+        box_style = me.Style(
+          flex_basis="max(480px, calc(50% - 48px))",
+          background="#fff",
+          border_radius=12,
+          box_shadow="0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f",
+          padding=me.Padding(top=16, left=16, right=16, bottom=16),
+          display="flex",
+          flex_direction="column",
+        )
+        with me.box(style=box_style):
+          me.text("Input", style=me.Style(font_weight=500))
+          me.box(style=me.Style(height=16))
+          me.textarea(
+            key=str(me.state(State).textarea_key),
+            on_input=on_input,
+            rows=5,
+            autosize=True,
+            max_rows=15,
+            style=me.Style(width="100%"),
+          )
+          me.box(style=me.Style(height=12))
+          with me.box(
+            style=me.Style(display="flex", justify_content="space-between")
+          ):
+            me.button(
+              "Clear", color="primary", type="stroked", on_click=on_click_clear
+            )
+            me.button(
+              "Generate",
+              color="primary",
+              type="flat",
+              on_click=on_click_generate,
+            )
+        with me.box(style=box_style):
+          me.text("Output", style=me.Style(font_weight=500))
+          me.markdown(me.state(State).output)
+
+<example>
+
+<example>
+from dataclasses import dataclass
+
+import mesop as me
+
+CARD_WIDTH = "320px"
+
+
+@dataclass
+class Resource:
+  title: str
+  description: str
+  github_url: str
+  github_username: str
+  img_url: str
+  app_url: str | None = None
+
+
+@dataclass
+class Section:
+  name: str
+  resources: list[Resource]
+  icon: str
+
+
+SECTIONS = [
+  Section(
+    name="Featured",
+    icon="star",
+    resources=[
+      Resource(
+        title="Mesop Duo Chat",
+        description="Chat with multiple models at once",
+        github_url="https://github.com/wwwillchen/mesop-duo-chat",
+        github_username="wwwillchen",
+        app_url="https://huggingface.co/spaces/wwwillchen/mesop-duo-chat",
+        img_url="https://github.com/user-attachments/assets/107afb9c-f08c-4f27-bd00-e122415c069e",
+      ),
+      Resource(
+        title="Mesop Prompt Tuner",
+        description="Prompt tuning app heavily inspired by Anthropic Console Workbench.",
+        app_url="https://huggingface.co/spaces/richard-to/mesop-prompt-tuner",
+        img_url="https://github.com/user-attachments/assets/2ec6cbfb-c28b-4f60-98f9-34bfca1f6938",
+        github_url="https://github.com/richard-to/mesop-prompt-tuner",
+        github_username="richard-to",
+      ),
+      Resource(
+        title="Meta Llama Agentic System",
+        description="Agentic components of the Llama Stack APIs. Chat UI in Mesop.",
+        img_url="https://github.com/meta-llama/llama-agentic-system/raw/main/demo.png",
+        github_url="https://github.com/meta-llama/llama-agentic-system",
+        github_username="meta-llama",
+      ),
+    ],
+  ),
+  Section(
+    name="Apps",
+    icon="computer",
+    resources=[
+      Resource(
+        title="Mesop App Maker",
+        description="Generate apps with Mesop using LLMs",
+        img_url="https://github.com/user-attachments/assets/1a826d44-c87b-4c79-aeaf-29bc8da3b1c0",
+        github_url="https://github.com/richard-to/mesop-app-maker",
+        github_username="richard-to",
+      ),
+      Resource(
+        title="Mesop Jeopardy",
+        description="A simple jeopardy game built using Mesop",
+        img_url="https://github.com/richard-to/mesop-jeopardy/assets/539889/bc27447d-129f-47ae-b0b1-8f5c546762ed",
+        github_url="https://github.com/richard-to/mesop-jeopardy",
+        github_username="richard-to",
+      ),
+    ],
+  ),
+  Section(
+    name="Web components",
+    icon="code_blocks",
+    resources=[
+      Resource(
+        title="Mesop Markmap",
+        description="Mesop web component for the Markmap library",
+        img_url="https://github.com/user-attachments/assets/6aa40ca3-d98a-42b2-adea-3f49b134445d",
+        github_url="https://github.com/lianggecm/mesop_markmap",
+        app_url="https://colab.research.google.com/drive/17gXlsXPDeo6hcFl1oOyrZ58FTozviN45?usp=sharing",
+        github_username="lianggecm",
+      ),
+    ],
+  ),
+  Section(
+    name="Notebooks",
+    icon="description",
+    resources=[
+      Resource(
+        title="Mesop Getting Started Colab",
+        description="Get started with Mesop in Colab",
+        img_url="https://github.com/user-attachments/assets/37efbe69-ac97-4d26-8fda-d1b7b2b4976a",
+        github_url="https://github.com/google/mesop/blob/main/notebooks/mesop_colab_getting_started.ipynb",
+        app_url="https://colab.research.google.com/github/google/mesop/blob/main/notebooks/mesop_colab_getting_started.ipynb",
+        github_username="google",
+      ),
+      Resource(
+        title="Gemma with Mesop Notebook",
+        description="Use Gemma with Mesop in Colab",
+        img_url="https://github.com/user-attachments/assets/a52ebf01-7f24-469b-9ad9-b271fdb19e37",
+        github_url="https://github.com/google-gemini/gemma-cookbook/blob/main/Gemma/Integrate_with_Mesop.ipynb",
+        app_url="https://colab.research.google.com/github/google-gemini/gemma-cookbook/blob/main/Gemma/Integrate_with_Mesop.ipynb",
+        github_username="google-gemini",
+      ),
+      Resource(
+        title="PaliGemma with Mesop Notebook",
+        description="Use PaliGemma with Mesop in Colab",
+        img_url="https://github.com/user-attachments/assets/8cb456a1-f7be-4187-9a3f-f6b48bde73e9",
+        github_url="https://github.com/google-gemini/gemma-cookbook/blob/main/PaliGemma/Integrate_PaliGemma_with_Mesop.ipynb",
+        app_url="https://colab.research.google.com/github/google-gemini/gemma-cookbook/blob/main/PaliGemma/Integrate_PaliGemma_with_Mesop.ipynb",
+        github_username="google-gemini",
+      ),
+    ],
+  ),
+]
+
+
+def scroll_to_section(e: me.ClickEvent):
+  me.scroll_into_view(key="section-" + e.key)
+  me.state(State).sidenav_menu_open = False
+
+
+def toggle_theme(e: me.ClickEvent):
+  if me.theme_brightness() == "light":
+    me.set_theme_mode("dark")
+  else:
+    me.set_theme_mode("light")
+
+
+def on_load(e: me.LoadEvent):
+  me.set_theme_mode("system")
+
+
+@me.stateclass
+class State:
+  sidenav_menu_open: bool
+
+
+def toggle_menu_button(e: me.ClickEvent):
+  s = me.state(State)
+  s.sidenav_menu_open = not s.sidenav_menu_open
+
+
+def is_mobile():
+  return me.viewport_size().width < 640
+
+
+@me.page(
+  title="Mesop Showcase",
+  on_load=on_load,
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://huggingface.co"],
+  ),
+)
+def page():
+  with me.box(style=me.Style(display="flex", height="100%")):
+    if is_mobile():
+      with me.content_button(
+        type="icon",
+        style=me.Style(top=6, left=8, position="absolute", z_index=9),
+        on_click=toggle_menu_button,
+      ):
+        me.icon("menu")
+      with me.sidenav(
+        opened=me.state(State).sidenav_menu_open,
+        style=me.Style(
+          background=me.theme_var("surface-container-low"),
+        ),
+      ):
+        sidenav()
+    else:
+      sidenav()
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface-container-low"),
+        display="flex",
+        flex_direction="column",
+        flex_grow=1,
+      )
+    ):
+      with me.box(
+        style=me.Style(
+          height=240,
+          width="100%",
+          padding=me.Padding.all(16),
+          display="flex",
+          align_items="center",
+        ),
+      ):
+        me.text(
+          "Mesop Showcase",
+          style=me.Style(
+            color=me.theme_var("on-background"),
+            font_size=22,
+            font_weight=500,
+            letter_spacing="0.8px",
+            padding=me.Padding(left=36) if is_mobile() else None,
+          ),
+        )
+
+        with me.content_button(
+          type="icon",
+          style=me.Style(position="absolute", right=4, top=8),
+          on_click=toggle_theme,
+        ):
+          me.icon(
+            "light_mode" if me.theme_brightness() == "dark" else "dark_mode"
+          )
+      with me.box(
+        style=me.Style(
+          background=me.theme_var("background"),
+          flex_grow=1,
+          padding=me.Padding(
+            left=32,
+            right=32,
+            bottom=64,
+          ),
+          border_radius=16,
+          overflow_y="auto",
+        )
+      ):
+        for section in SECTIONS:
+          me.text(
+            section.name,
+            style=me.Style(
+              font_size=18,
+              font_weight=500,
+              padding=me.Padding(top=32, bottom=16),
+            ),
+            key="section-" + section.name,
+          )
+          with me.box(
+            style=me.Style(
+              display="grid",
+              grid_template_columns=f"repeat(auto-fit, minmax({CARD_WIDTH}, 1fr))",
+              gap=24,
+              margin=me.Margin(
+                bottom=24,
+              ),
+            )
+          ):
+            for resource in section.resources:
+              card(resource)
+        with me.box(
+          on_click=lambda e: me.navigate(
+            "https://github.com/google/mesop/issues/new/choose"
+          ),
+          style=me.Style(
+            cursor="pointer",
+            max_width=300,
+            background=me.theme_var("surface-container-lowest"),
+            box_shadow="0 2px 4px rgba(0, 0, 0, 0.1)",
+            # margin=me.Margin.symmetric(horizontal="auto"),
+            display="flex",
+            justify_content="center",
+            align_items="center",
+            border_radius=16,
+            height=120,
+          ),
+        ):
+          me.icon(
+            "add_circle",
+            style=me.Style(
+              color=me.theme_var("primary"),
+              font_size=24,
+              margin=me.Margin(right=4, top=2),
+            ),
+          )
+          me.link(
+            text="Submit your showcase",
+            url="https://github.com/google/mesop/issues/new/choose",
+            style=me.Style(
+              font_size=24,
+              color=me.theme_var("on-background"),
+              text_decoration="none",
+            ),
+          )
+
+
+def sidenav():
+  with me.box(
+    style=me.Style(
+      width=216,
+      height="100%",
+      background=me.theme_var("surface-container-low"),
+      padding=me.Padding.all(16),
+    )
+  ):
+    with me.box(
+      style=me.Style(
+        display="flex", flex_direction="column", margin=me.Margin(top=48)
+      )
+    ):
+      with me.content_button(
+        type="icon",
+        on_click=lambda e: me.navigate("https://google.github.io/mesop/"),
+      ):
+        with me.box(
+          style=me.Style(display="flex", align_items="center", gap=12)
+        ):
+          me.icon("home")
+          me.text(
+            "Home",
+            style=me.Style(
+              font_size=16,
+              margin=me.Margin(bottom=4),
+            ),
+          )
+      with me.content_button(
+        type="icon",
+        on_click=lambda e: me.navigate("https://google.github.io/mesop/demo/"),
+      ):
+        with me.box(
+          style=me.Style(
+            display="flex",
+            align_items="center",
+            gap=8,
+          )
+        ):
+          me.icon("gallery_thumbnail")
+          me.text(
+            "Demos",
+            style=me.Style(
+              font_size=16,
+              margin=me.Margin(bottom=6, left=4),
+            ),
+          )
+    with me.box(
+      style=me.Style(
+        padding=me.Padding(top=24),
+        display="flex",
+        flex_direction="column",
+        gap=8,
+      ),
+    ):
+      me.text(
+        "Categories",
+        style=me.Style(
+          font_weight=500,
+          letter_spacing="0.4px",
+          padding=me.Padding(left=12),
+        ),
+      )
+      for section in SECTIONS:
+        with me.box(
+          style=me.Style(
+            display="flex",
+            align_items="center",
+            cursor="pointer",
+          ),
+          on_click=scroll_to_section,
+          key=section.name,
+        ):
+          with me.content_button(type="icon"):
+            me.icon(section.icon)
+          me.text(section.name)
+      with me.box(
+        style=me.Style(
+          display="flex",
+          align_items="center",
+          cursor="pointer",
+          padding=me.Padding(top=16),
+        ),
+        on_click=lambda e: me.navigate(
+          "https://github.com/google/mesop/issues/new/choose"
+        ),
+      ):
+        with me.content_button(type="icon"):
+          me.icon("add_circle")
+        me.text("Submit your showcase")
+
+
+def card(resource: Resource):
+  with me.box(
+    style=me.Style(
+      display="flex",
+      flex_direction="column",
+      gap=12,
+      box_shadow="0 2px 4px rgba(0, 0, 0, 0.1)",
+      border_radius=16,
+      min_width=CARD_WIDTH,
+      max_width=480,
+      background=me.theme_var("surface-container-lowest"),
+    )
+  ):
+    me.box(
+      style=me.Style(
+        background=f"url('{resource.img_url}') center/cover no-repeat",
+        cursor="pointer",
+        height=200,
+        width="100%",
+        border_radius=16,
+        margin=me.Margin(bottom=8),
+      ),
+      key=resource.app_url or resource.github_url,
+      on_click=lambda e: me.navigate(e.key),
+    )
+    with me.box(
+      style=me.Style(
+        padding=me.Padding(left=16),
+        display="flex",
+        flex_direction="column",
+        gap=8,
+      )
+    ):
+      me.text(resource.title, style=me.Style(font_weight="bold"))
+      with me.box(
+        style=me.Style(
+          display="flex",
+          flex_direction="row",
+          align_items="center",
+          gap=8,
+          cursor="pointer",
+        ),
+        key="https://github.com/" + resource.github_username,
+        on_click=lambda e: me.navigate(e.key),
+      ):
+        me.image(
+          src="https://avatars.githubusercontent.com/"
+          + resource.github_username,
+          style=me.Style(height=32, width=32, border_radius=16),
+        )
+        me.text(
+          resource.github_username,
+          style=me.Style(
+            letter_spacing="0.2px",
+          ),
+        )
+      me.text(resource.description, style=me.Style(height=40))
+    with me.box(
+      style=me.Style(
+        display="flex",
+        justify_content="space-between",
+        padding=me.Padding(left=8, right=8, bottom=8),
+      )
+    ):
+      if resource.github_url:
+        me.button(
+          "Open repo",
+          on_click=lambda e: me.navigate(e.key),
+          key=resource.github_url,
+        )
+      if resource.app_url:
+        me.button(
+          "Open app",
+          on_click=lambda e: me.navigate(e.key),
+          key=resource.app_url,
+        )
+
+<example>
+

prompt/chat_elements_examples.txt

@@ -0,0 +1,1180 @@
+This section provides examples of elements that can be used for composing chat UIs in Mesop. Each example is wrapped in <example> tags.
+
+<example>
+# This file provides examples for creating sidebars.
+
+import mesop as me
+
+
+# This is an example of a sidebar on the left. It is compact and uses icons.
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/sidebar-example-1",
+)
+def sidebar_example_1():
+  # Create a two column grid. Since the sidebar is the on left, we make that column
+  # very thin using a 1fr to 50fr ratio.
+  with me.box(
+    style=me.Style(
+      display="grid", grid_template_columns="1fr 50fr", height="100vh"
+    )
+  ):
+    # This block is the code for the sidebar
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface-container"),
+        border=me.Border.symmetric(
+          horizontal=me.BorderSide(
+            width=1, style="solid", color=me.theme_var("outline-variant")
+          )
+        ),
+        height="100%",
+      )
+    ):
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        style=me.Style(
+          border=me.Border(
+            bottom=me.BorderSide(
+              width=1, color=me.theme_var("outline-variant"), style="solid"
+            )
+          ),
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        with me.tooltip(message="Home tooltip"):
+          me.icon("home")
+
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        style=me.Style(
+          border=me.Border(
+            bottom=me.BorderSide(
+              width=1, color=me.theme_var("outline-variant"), style="solid"
+            )
+          ),
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        with me.tooltip(message="Search tooltip"):
+          me.icon("search")
+
+    # This block is for the main content to be added.
+    with me.box(style=me.Style(margin=me.Margin.all(15))):
+      me.text("Main body content goes here")
+
+
+# This is an example of a sidebar on the right. This sidebar is less compact and uses
+# icon and text labels.
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/sidebar-example-2",
+)
+def sidebar_example_2():
+  # Create a two column grid. Since the sidebar is the on right, we make the right column
+  # very thin using a 50fr to 1fr ratio.
+  with me.box(
+    style=me.Style(
+      display="grid", grid_template_columns="50fr 1fr", height="100vh"
+    )
+  ):
+    # This block is for the main content to be added.
+    with me.box(style=me.Style(margin=me.Margin.all(15))):
+      me.text("Main body content goes here")
+
+    # This block is the code for the sidebar
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface-container"),
+        border=me.Border.symmetric(
+          horizontal=me.BorderSide(
+            width=1, style="solid", color=me.theme_var("outline-variant")
+          )
+        ),
+        height="100%",
+      )
+    ):
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        style=me.Style(
+          border=me.Border(
+            bottom=me.BorderSide(
+              width=1, color=me.theme_var("outline-variant"), style="solid"
+            )
+          ),
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        with me.box(
+          style=me.Style(
+            display="flex",
+            align_items="center",
+            gap=5,
+          )
+        ):
+          me.icon("home")
+          me.text("Home")
+
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        style=me.Style(
+          border=me.Border(
+            bottom=me.BorderSide(
+              width=1, color=me.theme_var("outline-variant"), style="solid"
+            )
+          ),
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        with me.box(
+          style=me.Style(
+            display="flex",
+            align_items="center",
+            gap=5,
+          )
+        ):
+          me.icon("search")
+          me.text("Search")
+
+
+# This is an example of a sidebar that expands and collapses.
+
+
+@me.stateclass
+class State:
+  # Controls whether the sidebar menu is expanded or collapsed
+  sidebar_expanded: bool = True
+
+
+def on_click_menu_icon(e: me.ClickEvent):
+  state = me.state(State)
+  state.sidebar_expanded = not state.sidebar_expanded
+
+
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/sidebar-example-3",
+)
+def sidebar_example_3():
+  state = me.state(State)
+  with me.box(
+    style=me.Style(
+      display="grid", grid_template_columns="1fr 50fr", height="100vh"
+    )
+  ):
+    # This block is the code for the sidebar
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface-container"),
+        border=me.Border.symmetric(
+          horizontal=me.BorderSide(
+            width=1, style="solid", color=me.theme_var("outline-variant")
+          )
+        ),
+        height="100%",
+      )
+    ):
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        # Event handler to expand/collapse the sidebar.
+        on_click=on_click_menu_icon,
+        style=me.Style(
+          border=me.Border(
+            bottom=me.BorderSide(
+              width=1, color=me.theme_var("outline-variant"), style="solid"
+            )
+          ),
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        me.icon("menu")
+
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        style=me.Style(
+          border=me.Border(
+            bottom=me.BorderSide(
+              width=1, color=me.theme_var("outline-variant"), style="solid"
+            )
+          ),
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        if state.sidebar_expanded:
+          with me.box(
+            style=me.Style(
+              display="flex",
+              align_items="center",
+              gap=5,
+            )
+          ):
+            me.icon("home")
+            me.text("Home")
+        else:
+          with me.tooltip(message="Home tooltip"):
+            me.icon("home")
+
+      # This block is code for the sidebar menu item.
+      with me.box(
+        style=me.Style(
+          border=me.Border(
+            bottom=me.BorderSide(
+              width=1, color=me.theme_var("outline-variant"), style="solid"
+            )
+          ),
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        if state.sidebar_expanded:
+          with me.box(
+            style=me.Style(
+              display="flex",
+              align_items="center",
+              gap=5,
+            )
+          ):
+            me.icon("search")
+            me.text("Search")
+        else:
+          with me.tooltip(message="Search tooltip"):
+            me.icon("search")
+
+    # This block is for the main content to be added.
+    with me.box(style=me.Style(margin=me.Margin.all(15))):
+      me.text("Main body content goes here")
+
+<example>
+
+<example>
+# This file provides examples for creating headers.
+
+import mesop as me
+
+
+# This is an example of a two section header a fluid width
+# header with a title on the left and some example buttons
+# on the right.
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/header-example-1",
+)
+def headers_example_1():
+  with me.box(
+    style=me.Style(
+      background=me.theme_var("surface-container"),
+      border=me.Border.symmetric(
+        vertical=me.BorderSide(
+          width=1,
+          style="solid",
+          color=me.theme_var("outline-variant"),
+        )
+      ),
+      padding=me.Padding.all(10),
+    )
+  ):
+    is_mobile = me.viewport_size().width < 640
+    if is_mobile:
+      default_flex_style = me.Style(
+        align_items="center",
+        display="flex",
+        gap=5,
+        justify_content="space-between",
+      )
+    else:
+      default_flex_style = me.Style(
+        align_items="center",
+        display="flex",
+        gap=5,
+        justify_content="space-between",
+      )
+
+    with me.box(style=default_flex_style):
+      with me.box(style=me.Style(display="flex", gap=5)):
+        me.text(
+          "Your Title Here",
+          type="headline-6",
+          style=me.Style(margin=me.Margin(bottom=0)),
+        )
+
+      with me.box(style=me.Style(display="flex", gap=5)):
+        me.button("Home")
+        me.button("About")
+        me.button("FAQ")
+
+
+# This is an example of a three section header a fluid width
+# header with a title on the left, some example buttons
+# on the center, and a example button on the right.
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/header-example-2",
+)
+def headers_example_2():
+  with me.box(
+    style=me.Style(
+      background=me.theme_var("surface-container"),
+      border=me.Border.symmetric(
+        vertical=me.BorderSide(
+          width=1,
+          style="solid",
+          color=me.theme_var("outline-variant"),
+        )
+      ),
+      padding=me.Padding.all(10),
+    )
+  ):
+    is_mobile = me.viewport_size().width < 640
+    if is_mobile:
+      default_flex_style = me.Style(
+        align_items="center",
+        display="flex",
+        gap=5,
+        justify_content="space-between",
+      )
+    else:
+      default_flex_style = me.Style(
+        align_items="center",
+        display="flex",
+        gap=5,
+        justify_content="space-between",
+      )
+
+    with me.box(style=default_flex_style):
+      with me.box(style=me.Style(display="flex", gap=5)):
+        me.text(
+          "Your Title Here",
+          type="headline-6",
+          style=me.Style(margin=me.Margin(bottom=0)),
+        )
+
+      with me.box(style=me.Style(display="flex", gap=5)):
+        me.button("Home")
+        me.button("About")
+        me.button("FAQ")
+
+      with me.box(style=me.Style(display="flex", gap=5)):
+        me.button("Login", type="flat")
+
+
+# This is an example of a centered header with no title and
+# custom icon buttons.
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/header-example-3",
+)
+def headers_example_3():
+  with me.box(
+    style=me.Style(
+      background=me.theme_var("surface-container"),
+      border=me.Border.symmetric(
+        vertical=me.BorderSide(
+          width=1,
+          style="solid",
+          color=me.theme_var("outline-variant"),
+        )
+      ),
+      padding=me.Padding.all(10),
+    )
+  ):
+    is_mobile = me.viewport_size().width < 640
+    if is_mobile:
+      default_flex_style = me.Style(
+        align_items="center",
+        display="flex",
+        gap=5,
+        justify_content="center",
+      )
+    else:
+      default_flex_style = me.Style(
+        align_items="center",
+        display="flex",
+        gap=5,
+        justify_content="center",
+      )
+
+    with me.box(style=default_flex_style):
+      with me.box(style=me.Style(display="flex", gap=5)):
+        with me.content_button(
+          style=me.Style(
+            padding=me.Padding.symmetric(vertical=30, horizontal=25)
+          )
+        ):
+          me.icon("home")
+          me.text("Home")
+        with me.content_button(
+          style=me.Style(
+            padding=me.Padding.symmetric(vertical=30, horizontal=25)
+          )
+        ):
+          me.icon("info")
+          me.text("About")
+        with me.content_button(
+          style=me.Style(
+            padding=me.Padding.symmetric(vertical=30, horizontal=25)
+          )
+        ):
+          me.icon("contact_support")
+          me.text("FAQ")
+        with me.content_button(
+          style=me.Style(
+            padding=me.Padding.symmetric(vertical=30, horizontal=25)
+          )
+        ):
+          me.icon("login")
+          me.text("Login")
+
+<example>
+
+<example>
+# This file provides examples for creating layouts.
+
+import mesop as me
+
+
+# This is an example of a layout with a header and sidebar that is below the header.
+# There are also two columns
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/layout-example-1",
+)
+def layout_example_1():
+  # This is the grid that manages the layout.
+  with me.box(
+    style=me.Style(
+      display="grid",
+      # First column is for the sidebar which is why we use 1fr.
+      # The other two columns are equal width.
+      grid_template_columns="1fr 50fr 50fr",
+      # First row is for the header which is why we use 1fr.
+      grid_template_rows="1fr 50fr",
+      height="100vh",
+    )
+  ):
+    with me.box(
+      style=me.Style(
+        # Since the grid defines three columns, we need to span the header across all
+        # columns.
+        grid_column="1 / -1",
+        background=me.theme_var("surface-container"),
+        border=me.Border.symmetric(
+          vertical=me.BorderSide(
+            width=1,
+            style="solid",
+            color=me.theme_var("outline-variant"),
+          )
+        ),
+        padding=me.Padding.all(10),
+      )
+    ):
+      is_mobile = me.viewport_size().width < 640
+      if is_mobile:
+        default_flex_style = me.Style(
+          align_items="center",
+          display="flex",
+          gap=5,
+          justify_content="space-between",
+        )
+      else:
+        default_flex_style = me.Style(
+          align_items="center",
+          display="flex",
+          gap=5,
+          justify_content="space-between",
+        )
+
+      with me.box(style=default_flex_style):
+        with me.box(style=me.Style(display="flex", gap=5)):
+          me.text(
+            "Your Title Here",
+            type="headline-6",
+            style=me.Style(margin=me.Margin(bottom=0)),
+          )
+
+        with me.box(style=me.Style(display="flex", gap=5)):
+          me.button("Home")
+          me.button("About")
+          me.button("FAQ")
+
+    # This block is the code for the sidebar
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface-container"),
+        border=me.Border.symmetric(
+          horizontal=me.BorderSide(
+            width=1, style="solid", color=me.theme_var("outline-variant")
+          )
+        ),
+        height="100%",
+      )
+    ):
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        style=me.Style(
+          border=me.Border(
+            bottom=me.BorderSide(
+              width=1, color=me.theme_var("outline-variant"), style="solid"
+            )
+          ),
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        with me.tooltip(message="Home tooltip"):
+          me.icon("home")
+
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        style=me.Style(
+          border=me.Border(
+            bottom=me.BorderSide(
+              width=1, color=me.theme_var("outline-variant"), style="solid"
+            )
+          ),
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        with me.tooltip(message="Search tooltip"):
+          me.icon("search")
+
+    # This block is for the first column content to be added.
+    with me.box(style=me.Style(margin=me.Margin.all(15))):
+      me.text("First column body content goes here")
+
+    # This block is for the second column content to be added.
+    with me.box(style=me.Style(margin=me.Margin.all(15))):
+      me.text("Second column body content goes here")
+
+
+# This is an example of a layout with header and sidebar at the same level.
+# The sidebar also expands and collapses.
+
+
+@me.stateclass
+class State:
+  # Controls whether the sidebar menu is expanded or collapsed
+  sidebar_expanded: bool = True
+
+
+def on_click_menu_icon(e: me.ClickEvent):
+  state = me.state(State)
+  state.sidebar_expanded = not state.sidebar_expanded
+
+
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/layout-example-2",
+)
+def layout_example_2():
+  state = me.state(State)
+  # This is the grid that manages the layout.
+  with me.box(
+    style=me.Style(
+      display="grid",
+      # First column is for the sidebar which is why we use 1fr.
+      grid_template_columns="1fr 50fr",
+      # First row is for the header which is why we use 1fr.
+      grid_template_rows="1fr 50fr",
+      height="100vh",
+    )
+  ):
+    # This block is the code for the sidebar
+    with me.box(
+      style=me.Style(
+        grid_row="1 / -1",
+        background=me.theme_var("surface-container"),
+        border=me.Border.symmetric(
+          horizontal=me.BorderSide(
+            width=1, style="solid", color=me.theme_var("outline-variant")
+          )
+        ),
+        height="100%",
+      )
+    ):
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        # Event handler to expand/collapse the sidebar.
+        on_click=on_click_menu_icon,
+        style=me.Style(
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        me.icon("menu")
+
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        style=me.Style(
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        if state.sidebar_expanded:
+          with me.box(
+            style=me.Style(
+              display="flex",
+              align_items="center",
+              gap=5,
+            )
+          ):
+            me.icon("home")
+            me.text("Home")
+        else:
+          with me.tooltip(message="Home tooltip"):
+            me.icon("home")
+
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        style=me.Style(
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        if state.sidebar_expanded:
+          with me.box(
+            style=me.Style(
+              display="flex",
+              align_items="center",
+              gap=5,
+            )
+          ):
+            me.icon("search")
+            me.text("Search")
+        else:
+          with me.tooltip(message="Search tooltip"):
+            me.icon("search")
+
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface-container"),
+        padding=me.Padding.all(10),
+        border=me.Border(
+          bottom=me.BorderSide(
+            width=1, style="solid", color=me.theme_var("outline-variant")
+          )
+        ),
+      )
+    ):
+      is_mobile = me.viewport_size().width < 640
+      if is_mobile:
+        default_flex_style = me.Style(
+          align_items="center",
+          display="flex",
+          gap=5,
+          justify_content="space-between",
+        )
+      else:
+        default_flex_style = me.Style(
+          align_items="center",
+          display="flex",
+          gap=5,
+          justify_content="space-between",
+        )
+
+      with me.box(style=default_flex_style):
+        with me.box(style=me.Style(display="flex", gap=5)):
+          me.text(
+            "Your Title Here",
+            type="headline-6",
+            style=me.Style(margin=me.Margin(bottom=0)),
+          )
+
+        with me.box(style=me.Style(display="flex", gap=5)):
+          me.button("Home")
+          me.button("About")
+          me.button("FAQ")
+
+    # This block is for the main content to be added.
+    with me.box(style=me.Style(margin=me.Margin.all(15))):
+      me.text("Main body content goes here")
+
+
+# This is an example of a layout with a header, no sidebar, and four content columns
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/layout-example-3",
+)
+def layout_example_3():
+  # This is the grid that manages the layout.
+  with me.box(
+    style=me.Style(
+      display="grid",
+      # Three columns
+      grid_template_columns="1fr 1fr 1fr 1fr",
+      # First row is for the header which is why we use 1fr to 50fr.
+      grid_template_rows="1fr 50fr",
+      height="100vh",
+    )
+  ):
+    with me.box(
+      style=me.Style(
+        # Since the grid defines four columns, we need to span the header across all
+        # columns.
+        grid_column="1 / -1",
+        background=me.theme_var("surface-container"),
+        border=me.Border.symmetric(
+          vertical=me.BorderSide(
+            width=1,
+            style="solid",
+            color=me.theme_var("outline-variant"),
+          )
+        ),
+        padding=me.Padding.all(10),
+      )
+    ):
+      is_mobile = me.viewport_size().width < 640
+      if is_mobile:
+        default_flex_style = me.Style(
+          align_items="center",
+          display="flex",
+          gap=5,
+          justify_content="space-between",
+        )
+      else:
+        default_flex_style = me.Style(
+          align_items="center",
+          display="flex",
+          gap=5,
+          justify_content="space-between",
+        )
+
+      with me.box(style=default_flex_style):
+        with me.box(style=me.Style(display="flex", gap=5)):
+          me.text(
+            "Your Title Here",
+            type="headline-6",
+            style=me.Style(margin=me.Margin(bottom=0)),
+          )
+
+        with me.box(style=me.Style(display="flex", gap=5)):
+          me.button("Home")
+          me.button("About")
+          me.button("FAQ")
+
+    # This block is for the first column content to be added.
+    with me.box(style=me.Style(margin=me.Margin.all(15))):
+      me.text("First column body content goes here")
+
+    # This block is for the second column content to be added.
+    with me.box(style=me.Style(margin=me.Margin.all(15))):
+      me.text("Second column body content goes here")
+
+    # This block is for the third column content to be added.
+    with me.box(style=me.Style(margin=me.Margin.all(15))):
+      me.text("Third column body content goes here")
+
+    # This block is for the fourth column content to be added.
+    with me.box(style=me.Style(margin=me.Margin.all(15))):
+      me.text("Fourth column body content goes here")
+
+<example>
+
+<example>
+# Examples of chat messages for chat bot interfaces
+import mesop as me
+
+USER_PLACEHOLDER_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et lectus nec lorem pretium euismod?"
+BOT_PLACEHOLDER_TEXT = """
+# Fusce in dui mi. Cras enim metus
+
+Maximus sit amet ultrices at, *viverra* vitae ante. Curabitur auctor ut eros id commodo.
+Sed ultricies ornare lectus dictum facilisis. Aenean malesuada sed nisi id tempor.
+
+- Mauris aliquet volutpat pretium.
+- Nulla dapibus nibh id nisi mollis efficitur.
+
+Vivamus ac **commodo** elit. Nunc dictum mauris sit amet mollis posuere. Nulla fringilla,
+nunc sed varius posuere, augue nibh imperdiet lorem, rutrum lobortis leo leo sit amet sem.
+""".strip()
+
+
+# Example of a minimalist chat messages. Each row has the user indicator on the left and
+# the corresponding markdown message on the right side. The message use the default
+# background.
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/chat-msg-example-1",
+)
+def chat_msg_example_1():
+  # User chat message
+  with me.box(
+    style=me.Style(
+      color=me.theme_var("on-surface"),
+      background=me.theme_var("surface-container-lowest"),
+    )
+  ):
+    with me.box(
+      style=me.Style(display="flex", gap=15, margin=me.Margin.all(20))
+    ):
+      # User avatar/icon box
+      me.text(
+        "U",
+        style=me.Style(
+          background=me.theme_var("primary"),
+          border_radius="50%",
+          color=me.theme_var("on-primary"),
+          font_size=20,
+          height=40,
+          width=40,
+          text_align="center",
+          line_height="1",
+          padding=me.Padding(top=10),
+          margin=me.Margin(top=16),
+        ),
+      )
+      # User query
+      me.markdown(USER_PLACEHOLDER_TEXT)
+
+    # Bot chat message
+    with me.box(
+      style=me.Style(display="flex", gap=15, margin=me.Margin.all(20))
+    ):
+      # Bot avatar/icon box
+      me.text(
+        "B",
+        style=me.Style(
+          background=me.theme_var("secondary"),
+          border_radius="50%",
+          color=me.theme_var("on-secondary"),
+          font_size=20,
+          height=40,
+          width=40,
+          text_align="center",
+          line_height="1",
+          padding=me.Padding(top=10),
+          margin=me.Margin(top=16),
+        ),
+      )
+      # Bot message response
+      me.markdown(
+        BOT_PLACEHOLDER_TEXT, style=me.Style(color=me.theme_var("on-surface"))
+      )
+
+
+# Example of alternating bubble chat messages.
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/chat-msg-example-2",
+)
+def chat_msg_example_2():
+  with me.box(
+    style=me.Style(
+      color=me.theme_var("on-surface"),
+      background=me.theme_var("surface-container-lowest"),
+    )
+  ):
+    # User chat message
+    with me.box(
+      style=me.Style(
+        display="flex", justify_content="end", gap=15, margin=me.Margin.all(20)
+      )
+    ):
+      # Add right aligned message bubble
+      with me.box(
+        style=me.Style(
+          border_radius=15,
+          background=me.theme_var("primary-container"),
+          color=me.theme_var("on-primary-container"),
+          padding=me.Padding.all(10),
+          width="66%",
+        )
+      ):
+        me.markdown(USER_PLACEHOLDER_TEXT)
+
+    # Bot chat message
+    with me.box(style=me.Style(margin=me.Margin.all(20))):
+      # Bot name label
+      me.text(
+        "Bot",
+        style=me.Style(
+          font_weight="bold", font_size=16, margin=me.Margin(left=15)
+        ),
+      )
+      # Add left aligned message bubble
+      with me.box(
+        style=me.Style(
+          border_radius=15,
+          background=me.theme_var("secondary-container"),
+          color=me.theme_var("on-secondary-container"),
+          padding=me.Padding.all(10),
+          width="66%",
+        )
+      ):
+        me.markdown(
+          BOT_PLACEHOLDER_TEXT,
+          style=me.Style(color=me.theme_var("on-secondary-container")),
+        )
+
+
+# Example of a chat messages that also returns an image.
+# background.
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/chat-msg-example-3",
+)
+def chat_msg_example_3():
+  # User chat message
+  with me.box(
+    style=me.Style(
+      color=me.theme_var("on-surface"),
+      background=me.theme_var("surface-container-lowest"),
+    )
+  ):
+    with me.box(
+      style=me.Style(display="flex", gap=15, margin=me.Margin.all(20))
+    ):
+      # User avatar/icon box
+      me.text(
+        "U",
+        style=me.Style(
+          background=me.theme_var("primary"),
+          border_radius="50%",
+          color=me.theme_var("on-primary"),
+          font_size=20,
+          height=40,
+          width=40,
+          text_align="center",
+          line_height="1",
+          padding=me.Padding(top=10),
+          margin=me.Margin(top=16),
+        ),
+      )
+      # User query
+      me.markdown(USER_PLACEHOLDER_TEXT)
+
+    # Bot chat message
+    with me.box(
+      style=me.Style(display="flex", gap=15, margin=me.Margin.all(20))
+    ):
+      # Bot avatar/icon box
+      me.text(
+        "B",
+        style=me.Style(
+          background=me.theme_var("secondary"),
+          border_radius="50%",
+          color=me.theme_var("on-secondary"),
+          font_size=20,
+          height=40,
+          width=40,
+          text_align="center",
+          line_height="1",
+          padding=me.Padding(top=10),
+          margin=me.Margin(top=16),
+        ),
+      )
+      # Bot image response
+      me.image(
+        src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+        alt="Grapefruit",
+        style=me.Style(width="100%"),
+      )
+
+<example>
+
+<example>
+# Examples of inputs for chat bot interfaces
+import mesop as me
+
+
+# Example using a normal textarea and button
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/chat-inputs-example-1",
+)
+def chat_input_1():
+  with me.box(style=me.Style(display="flex", width="100%", gap=10)):
+    with me.box(style=me.Style(flex_grow=1)):
+      me.textarea(
+        placeholder="Default chat input",
+        style=me.Style(width="100%"),
+        rows=2,
+      )
+    me.button("Send", type="flat")
+
+
+# Example using a subtly styled textarea and buttons
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/chat-inputs-example-2",
+)
+def chat_input_2():
+  with me.box(
+    style=me.Style(
+      color=me.theme_var("on-surface-variant"),
+      border_radius=16,
+      padding=me.Padding.all(8),
+      background=me.theme_var("surface-container-low"),
+      display="flex",
+      width="100%",
+    )
+  ):
+    with me.box(
+      style=me.Style(
+        flex_grow=1,
+      )
+    ):
+      me.native_textarea(
+        autosize=True,
+        min_rows=4,
+        placeholder="Subtle chat input",
+        style=me.Style(
+          color=me.theme_var("on-surface-variant"),
+          padding=me.Padding(top=16, left=16),
+          background=me.theme_var("surface-container-low"),
+          outline="none",
+          width="100%",
+          overflow_y="auto",
+          border=me.Border.all(
+            me.BorderSide(style="none"),
+          ),
+        ),
+      )
+    with me.content_button(type="icon"):
+      me.icon("upload")
+    with me.content_button(type="icon"):
+      me.icon("photo")
+    with me.content_button(type="icon"):
+      me.icon("send")
+
+
+# Example using a elevated styled textarea and buttons
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/chat-inputs-example-3",
+)
+def chat_input_3():
+  with me.box(
+    style=me.Style(
+      padding=me.Padding.all(8),
+      background=me.theme_var("surface-container-lowest"),
+      display="flex",
+      width="100%",
+      border=me.Border.all(
+        me.BorderSide(width=0, style="solid", color=me.theme_var("outline"))
+      ),
+      box_shadow="0 10px 20px #0000000a, 0 2px 6px #0000000a, 0 0 1px #0000000a",
+    )
+  ):
+    with me.box(
+      style=me.Style(
+        flex_grow=1,
+      )
+    ):
+      me.native_textarea(
+        autosize=True,
+        min_rows=4,
+        placeholder="Elevated chat input",
+        style=me.Style(
+          color=me.theme_var("on-surface-variant"),
+          font_family="monospace",
+          padding=me.Padding(top=16, left=16),
+          background=me.theme_var("surface-container-lowest"),
+          outline="none",
+          width="100%",
+          overflow_y="auto",
+          border=me.Border.all(
+            me.BorderSide(style="none"),
+          ),
+        ),
+      )
+    with me.content_button(type="icon"):
+      me.icon("upload")
+    with me.content_button(type="icon"):
+      me.icon("photo")
+    with me.content_button(type="icon"):
+      me.icon("send")
+
+<example>
+
+<example>
+# Examples of icon buttons that may be useful for chat UIs.
+# Note: These buttons event handler functions.
+import mesop as me
+
+
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io"]
+  ),
+  path="/ai/chat-buttons-example-1",
+)
+def chat_buttons_examples():
+  # The thumb_up icon is good for rating responses positively
+  # This example also shows how to add a tooltip around the the icon button
+  with me.tooltip(message="Good response", position="above"):
+    with me.content_button(type="icon"):
+      me.icon("thumb_up")
+
+  # The thumb_down icon is good for rating responses negatively
+  with me.content_button(type="icon"):
+    me.icon("thumb_down")
+
+  # The add icon is good for starting/resetting a chat
+  with me.content_button(type="icon"):
+    me.icon("add")
+
+  # The restart_alt icon is good for regenerating a messsage
+  with me.content_button(type="icon"):
+    me.icon("restart_alt")
+
+  # The dark_mode icon is good for dark mode
+  with me.content_button(type="icon"):
+    me.icon("dark_mode")
+
+  # The light_mode icon is good for light mode
+  with me.content_button(type="icon"):
+    me.icon("light_mode")
+
+  # The send icon is good for a button that submits user queries
+  with me.content_button(type="icon"):
+    me.icon("send")
+
+<example>

prompt/chat_examples.txt

@@ -0,0 +1,730 @@
+This section provides examples of writing chat UIs in Mesop. Each example is wrapped in <example> tags.
+
+<example>
+# This is an example of a basic chat app.
+import random
+import time
+from dataclasses import dataclass
+from typing import Literal
+
+import mesop as me
+
+Role = Literal["user", "bot"]
+
+
+@dataclass(kw_only=True)
+class ChatMessage:
+  """Chat message metadata."""
+
+  role: Role = "user"
+  content: str = ""
+  edited: bool = False
+
+
+@me.stateclass
+class State:
+  input: str
+  output: list[ChatMessage]
+  in_progress: bool
+
+
+@me.page()
+def basic_chat():
+  state = me.state(State)
+  with me.box(
+    style=me.Style(
+      color=me.theme_var("on-surface"),
+      background=me.theme_var("surface-container-lowest"),
+      display="flex",
+      flex_direction="column",
+      height="100%",
+      padding=me.Padding.all(15),
+    )
+  ):
+    # This contains the chat messages that have been recorded. This takes 50fr.
+    # This section can be replaced with other types of chat messages.
+
+    # We set overflow to scroll so that the chat input will be fixed at the bottom.
+    with me.box(style=me.Style(overflow_y="scroll", flex_grow=1)):
+      for msg in state.output:
+        # User chat message
+        if msg.role == "user":
+          with me.box(
+            style=me.Style(display="flex", gap=15, margin=me.Margin.all(20))
+          ):
+            # User avatar/icon box
+            me.text(
+              "U",
+              style=me.Style(
+                background=me.theme_var("primary"),
+                border_radius="50%",
+                color=me.theme_var("on-primary"),
+                font_size=20,
+                height=40,
+                width=40,
+                text_align="center",
+                line_height="1",
+                padding=me.Padding(top=10),
+                margin=me.Margin(top=16),
+              ),
+            )
+            # User query
+            me.markdown(msg.content)
+        else:
+          # Bot chat message
+          with me.box(
+            style=me.Style(display="flex", gap=15, margin=me.Margin.all(20))
+          ):
+            # Bot avatar/icon box
+            me.text(
+              "B",
+              style=me.Style(
+                background=me.theme_var("secondary"),
+                border_radius="50%",
+                color=me.theme_var("on-secondary"),
+                font_size=20,
+                height=40,
+                width="40px",
+                text_align="center",
+                line_height="1",
+                padding=me.Padding(top=10),
+                margin=me.Margin(top=16),
+              ),
+            )
+            # Bot message response
+            me.markdown(
+              msg.content,
+              style=me.Style(color=me.theme_var("on-surface")),
+            )
+
+    # This is for the basic chat input. This is the second row at 1fr.
+    # This section can be replaced with other types of chat inputs.
+    with me.box(
+      style=me.Style(
+        border_radius=16,
+        padding=me.Padding.all(8),
+        background=me.theme_var("surface-container-low"),
+        display="flex",
+        width="100%",
+      )
+    ):
+      with me.box(
+        style=me.Style(
+          flex_grow=1,
+        )
+      ):
+        me.native_textarea(
+          key="chat_input",
+          value=state.input,
+          on_blur=on_chat_input,
+          autosize=True,
+          min_rows=4,
+          placeholder="Subtle chat input",
+          style=me.Style(
+            color=me.theme_var("on-surface-variant"),
+            padding=me.Padding(top=16, left=16),
+            background=me.theme_var("surface-container-low"),
+            outline="none",
+            width="100%",
+            overflow_y="auto",
+            border=me.Border.all(
+              me.BorderSide(style="none"),
+            ),
+          ),
+        )
+      with me.content_button(
+        type="icon",
+        on_click=on_click_submit_chat_msg,
+        # If we're processing a message prevent new queries from being sent
+        disabled=state.in_progress,
+      ):
+        me.icon("send")
+
+
+def on_chat_input(e: me.InputBlurEvent):
+  """Capture chat text input on blur."""
+  state = me.state(State)
+  state.input = e.value
+
+
+def on_click_submit_chat_msg(e: me.ClickEvent):
+  """Handles submitting a chat message."""
+  state = me.state(State)
+  if state.in_progress or not state.input:
+    return
+  input = state.input
+  # Clear the text input.
+  state.input = ""
+  yield
+
+  output = state.output
+  if output is None:
+    output = []
+  output.append(ChatMessage(role="user", content=input))
+  state.in_progress = True
+  yield
+
+  start_time = time.time()
+  # Send user input and chat history to get the bot response.
+  output_message = respond_to_chat(input, state.output)
+  assistant_message = ChatMessage(role="bot")
+  output.append(assistant_message)
+  state.output = output
+  for content in output_message:
+    assistant_message.content += content
+    # TODO: 0.25 is an abitrary choice. In the future, consider making this adjustable.
+    if (time.time() - start_time) >= 0.25:
+      start_time = time.time()
+      yield
+
+  state.in_progress = False
+  me.focus_component(key="chat_input")
+  yield
+
+
+def respond_to_chat(input: str, history: list[ChatMessage]):
+  """Displays random canned text.
+
+  Edit this function to process messages with a real chatbot/LLM.
+  """
+  lines = [
+    "Mesop is a Python-based UI framework designed to simplify web UI development for engineers without frontend experience.",
+    "It leverages the power of the Angular web framework and Angular Material components, allowing rapid construction of web demos and internal tools.",
+    "With Mesop, developers can enjoy a fast build-edit-refresh loop thanks to its hot reload feature, making UI tweaks and component integration seamless.",
+    "Deployment is straightforward, utilizing standard HTTP technologies.",
+    "Mesop's component library aims for comprehensive Angular Material component coverage, enhancing UI flexibility and composability.",
+    "It supports custom components for specific use cases, ensuring developers can extend its capabilities to fit their unique requirements.",
+    "Mesop's roadmap includes expanding its component library and simplifying the onboarding processs.",
+  ]
+  for line in random.sample(lines, random.randint(3, len(lines) - 1)):
+    yield line + " "
+
+<example>
+
+<example>
+# This is an example of an advanced chat app.
+#
+# Features
+#
+# - Header with title
+# - Sidebar
+# - Start new chat
+# - Focus input
+# - Dark mode
+# - Rate responses
+# - Regenerate responses
+# - Examples
+import random
+import time
+from dataclasses import dataclass
+from typing import Literal
+
+import mesop as me
+
+Role = Literal["user", "bot"]
+# Render me.markdown if markdown
+# Render me.image if image
+MessageType = Literal["markdown", "image"]
+
+
+EXAMPLE_USER_QUERIES = (
+  "Create a basic chat UI.",
+  "Create a chat UI that renders content side by side from multiple LLMs.",
+  "Create an advanced chat UI with a header and sidebar.",
+)
+
+
+@dataclass(kw_only=True)
+class ChatMessage:
+  """Chat message metadata."""
+
+  role: Role = "user"
+  content: str = ""
+  edited: bool = False
+  # 1 is positive
+  # -1 is negative
+  # 0 is no rating
+  rating: int = 0
+  message_type: MessageType = "markdown"
+
+
+@me.stateclass
+class State:
+  input: str
+  output: list[ChatMessage]
+  in_progress: bool
+  sidebar_expanded: bool = False
+
+
+@me.page()
+def advanced_chat():
+  is_mobile = me.viewport_size().width < 640
+  state = me.state(State)
+  # This is the grid that manages the layout.
+  with me.box(
+    style=me.Style(
+      display="grid",
+      # First column is for the sidebar
+      # We use 1fr when the sidebar is not expanded and 7fr when it is expanded. This
+      # is because the sidebar takes up more space.
+      grid_template_columns="7fr 50fr"
+      if state.sidebar_expanded and not is_mobile
+      else "1fr 50fr",
+      # First row is for the header which is why we use 1fr.
+      grid_template_rows="1fr 50fr",
+      height="100%",
+    )
+  ):
+    # This block is the code for the sidebar
+    with me.box(
+      style=me.Style(
+        grid_row="1 / -1",
+        background=me.theme_var("surface-container"),
+        border=me.Border.symmetric(
+          horizontal=me.BorderSide(
+            width=1, style="solid", color=me.theme_var("outline-variant")
+          )
+        ),
+        height="100%",
+      )
+    ):
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        # Event handler to expand/collapse the sidebar.
+        on_click=on_click_menu_icon,
+        style=me.Style(
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        me.icon("menu")
+
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        on_click=on_click_new_chat,
+        style=me.Style(
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        if state.sidebar_expanded and not is_mobile:
+          with me.box(
+            style=me.Style(
+              display="flex",
+              align_items="center",
+              gap=5,
+            )
+          ):
+            me.icon("add")
+            me.text("New chat")
+        else:
+          with me.tooltip(message="New chat"):
+            me.icon("add")
+
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        on_click=on_click_theme_brightness,
+        style=me.Style(
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        if state.sidebar_expanded and not is_mobile:
+          with me.box(
+            style=me.Style(
+              display="flex",
+              align_items="center",
+              gap=5,
+            )
+          ):
+            me.icon(
+              "light_mode" if me.theme_brightness() == "dark" else "dark_mode",
+            )
+            me.text(
+              "Light mode" if me.theme_brightness() == "dark" else "Dark mode"
+            )
+        else:
+          with me.tooltip(
+            message="Light mode"
+            if me.theme_brightness() == "dark"
+            else "Dark mode"
+          ):
+            me.icon(
+              "light_mode" if me.theme_brightness() == "dark" else "dark_mode"
+            )
+
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface-container"),
+        padding=me.Padding.all(10),
+        border=me.Border(
+          bottom=me.BorderSide(
+            width=1, style="solid", color=me.theme_var("outline-variant")
+          )
+        ),
+      )
+    ):
+      if is_mobile:
+        default_flex_style = me.Style(
+          align_items="center",
+          display="flex",
+          gap=5,
+          justify_content="space-between",
+        )
+      else:
+        default_flex_style = me.Style(
+          align_items="center",
+          display="flex",
+          gap=5,
+          justify_content="space-between",
+        )
+
+      with me.box(style=default_flex_style):
+        with me.box(style=me.Style(display="flex", gap=5)):
+          me.text(
+            "Advanced Chat UI",
+            type="headline-6",
+            style=me.Style(margin=me.Margin(bottom=0)),
+          )
+
+        # Only show the "Made with Mesop" message on non-mobile screens.
+        if not is_mobile:
+          with me.box(style=me.Style(display="flex", gap=5)):
+            me.text(
+              "Made with ",
+              style=me.Style(
+                color=me.theme_var("on-surface-variant"),
+                font_weight="bold",
+                font_size=13,
+              ),
+            )
+            me.link(
+              text="Mesop",
+              url="https://google.github.io/mesop/",
+              open_in_new_tab=True,
+              style=me.Style(
+                color=me.theme_var("primary"),
+                text_decoration="none",
+                font_weight="bold",
+                font_size=13,
+              ),
+            )
+
+    # This block is for the main content to be added.
+    with me.box(style=me.Style(overflow_y="hidden")):
+      with me.box(
+        style=me.Style(
+          color=me.theme_var("on-surface"),
+          background=me.theme_var("surface-container-lowest"),
+          display="flex",
+          flex_direction="column",
+          padding=me.Padding.all(15),
+          height="100%",
+        )
+      ):
+        # If there are no messages yet, show some example queries for the user to get
+        # started with.
+        if not state.output:
+          with me.box(
+            style=me.Style(
+              overflow_y="scroll",
+              flex_grow=1,
+              color=me.theme_var("on-surface-variant"),
+            )
+          ):
+            with me.box(style=me.Style(margin=me.Margin(top=25), font_size=20)):
+              me.text("Get started with an example below")
+            with me.box(
+              style=me.Style(display="flex", gap=20, margin=me.Margin(top=25))
+            ):
+              for index, query in enumerate(EXAMPLE_USER_QUERIES):
+                with me.box(
+                  key=f"query-{index}",
+                  on_click=on_click_example_user_query,
+                  style=me.Style(
+                    background=me.theme_var("surface-container-highest"),
+                    border_radius=15,
+                    padding=me.Padding.all(20),
+                    cursor="pointer",
+                  ),
+                ):
+                  me.text(query)
+
+        else:
+          # This contains the chat messages that have been recorded. This takes 50fr.
+          # This section can be replaced with other types of chat messages.
+
+          # We set overflow to scroll so that the chat input will be fixed at the bottom.
+          with me.box(style=me.Style(overflow_y="scroll", flex_grow=1)):
+            for index, msg in enumerate(state.output):
+              # User chat message
+              if msg.role == "user":
+                with me.box(
+                  style=me.Style(
+                    display="flex",
+                    justify_content="end",
+                    gap=15,
+                    margin=me.Margin.all(20),
+                  )
+                ):
+                  with me.box(
+                    style=me.Style(
+                      border_radius=10,
+                      background=me.theme_var("surface-container"),
+                      color=me.theme_var("on-surface-variant"),
+                      padding=me.Padding.symmetric(vertical=0, horizontal=10),
+                      width="66%",
+                    )
+                  ):
+                    # User query
+                    me.markdown(msg.content)
+              else:
+                # Bot chat message
+                with me.box(
+                  style=me.Style(
+                    display="flex", gap=15, margin=me.Margin.all(20)
+                  )
+                ):
+                  # Bot avatar/icon box
+                  me.text(
+                    "M",
+                    style=me.Style(
+                      background=me.theme_var("primary"),
+                      border_radius="50%",
+                      color=me.theme_var("on-primary"),
+                      font_size=20,
+                      height=40,
+                      width="40px",
+                      text_align="center",
+                      line_height="1",
+                      padding=me.Padding(top=10),
+                      margin=me.Margin(top=16),
+                    ),
+                  )
+                  # Bot message response
+                  with me.box():
+                    me.markdown(
+                      msg.content,
+                      style=me.Style(color=me.theme_var("on-surface")),
+                    )
+
+                    rated_style = me.Style(
+                      background=me.theme_var("surface-container-low"),
+                      color=me.theme_var("on-surface-variant"),
+                    )
+                    with me.tooltip(message="Good response", position="above"):
+                      with me.content_button(
+                        type="icon",
+                        key=f"thumb_up-{index}",
+                        on_click=on_click_thumb_up,
+                        style=rated_style if msg.rating == 1 else None,
+                      ):
+                        me.icon("thumb_up")
+
+                    with me.tooltip(message="Bad response", position="above"):
+                      with me.content_button(
+                        type="icon",
+                        key=f"thumb_down-{index}",
+                        on_click=on_click_thumb_down,
+                        style=rated_style if msg.rating == -1 else None,
+                      ):
+                        me.icon("thumb_down")
+
+                    with me.tooltip(
+                      message="Regenerate answer", position="above"
+                    ):
+                      with me.content_button(
+                        type="icon",
+                        key=f"restart-{index}",
+                        on_click=on_click_regenerate,
+                      ):
+                        me.icon("restart_alt")
+
+        # This is for the basic chat input. This is the second row at 1fr.
+        # This section can be replaced with other types of chat inputs.
+        with me.box(
+          style=me.Style(
+            border_radius=16,
+            padding=me.Padding.all(8),
+            background=me.theme_var("surface-container-low"),
+            display="flex",
+          )
+        ):
+          with me.box(
+            style=me.Style(
+              flex_grow=1,
+            )
+          ):
+            me.native_textarea(
+              key="chat_input",
+              value=state.input,
+              on_blur=on_chat_input,
+              autosize=True,
+              min_rows=4,
+              placeholder="Subtle chat input",
+              style=me.Style(
+                color=me.theme_var("on-surface-variant"),
+                padding=me.Padding(top=16, left=16),
+                background=me.theme_var("surface-container-low"),
+                outline="none",
+                width="100%",
+                overflow_y="auto",
+                border=me.Border.all(
+                  me.BorderSide(style="none"),
+                ),
+              ),
+            )
+          with me.content_button(
+            type="icon",
+            on_click=on_click_submit_chat_msg,
+            # If we're processing a message prevent new queries from being sent
+            disabled=state.in_progress,
+          ):
+            me.icon("send")
+
+
+def on_click_example_user_query(e: me.ClickEvent):
+  """Populates the user input with the example query"""
+  state = me.state(State)
+  # Get the example index from the key
+  _, example_index = e.key.split("-")
+  state.input = EXAMPLE_USER_QUERIES[int(example_index)]
+
+
+def on_click_thumb_up(e: me.ClickEvent):
+  """Gives the message a positive rating"""
+  state = me.state(State)
+  # Get the message index from the key
+  _, msg_index = e.key.split("-")
+  msg_index = int(msg_index)
+  # Give a positive rating
+  state.output[msg_index].rating = 1
+
+
+def on_click_thumb_down(e: me.ClickEvent):
+  """Gives the message a negative rating"""
+  state = me.state(State)
+  # Get the message index from the key
+  _, msg_index = e.key.split("-")
+  msg_index = int(msg_index)
+  # Give a negative rating
+  state.output[msg_index].rating = -1
+
+
+def on_click_new_chat(e: me.ClickEvent):
+  """Resets messages."""
+  state = me.state(State)
+  state.output = []
+  me.focus_component(key="chat_input")
+
+
+def on_click_theme_brightness(e: me.ClickEvent):
+  """Toggles dark mode."""
+  if me.theme_brightness() == "light":
+    me.set_theme_mode("dark")
+  else:
+    me.set_theme_mode("light")
+
+
+def on_click_menu_icon(e: me.ClickEvent):
+  """Expands and collapses sidebar menu."""
+  state = me.state(State)
+  state.sidebar_expanded = not state.sidebar_expanded
+
+
+def on_chat_input(e: me.InputBlurEvent):
+  """Capture chat text input on blur."""
+  state = me.state(State)
+  state.input = e.value
+
+
+def on_click_regenerate(e: me.ClickEvent):
+  """Regenerates response from an existing message"""
+  state = me.state(State)
+  # Get message index from key
+  _, msg_index = e.key.split("-")
+  msg_index = int(msg_index)
+
+  # Get the user message which is the previous message
+  user_message = state.output[msg_index - 1]
+  # Get bot message to be regenerated
+  assistant_message = state.output[msg_index]
+  assistant_message.content = ""
+  state.in_progress = True
+  yield
+
+  start_time = time.time()
+  # Send in the old user input and chat history to get the bot response.
+  # We make sure to only pass in the chat history up to this message.
+  output_message = respond_to_chat(
+    user_message.content, state.output[:msg_index]
+  )
+  for content in output_message:
+    assistant_message.content += content
+    # TODO: 0.25 is an abitrary choice. In the future, consider making this adjustable.
+    if (time.time() - start_time) >= 0.25:
+      start_time = time.time()
+      yield
+
+  state.in_progress = False
+  me.focus_component(key="chat_input")
+  yield
+
+
+def on_click_submit_chat_msg(e: me.ClickEvent):
+  """Handles submitting a chat message."""
+  state = me.state(State)
+  if state.in_progress or not state.input:
+    return
+  input = state.input
+  # Clear the text input.
+  state.input = ""
+  yield
+
+  output = state.output
+  if output is None:
+    output = []
+  output.append(ChatMessage(role="user", content=input))
+  state.in_progress = True
+  yield
+
+  start_time = time.time()
+  # Send user input and chat history to get the bot response.
+  output_message = respond_to_chat(input, state.output)
+  assistant_message = ChatMessage(role="bot")
+  output.append(assistant_message)
+  state.output = output
+  for content in output_message:
+    assistant_message.content += content
+    # TODO: 0.25 is an abitrary choice. In the future, consider making this adjustable.
+    if (time.time() - start_time) >= 0.25:
+      start_time = time.time()
+      yield
+
+  state.in_progress = False
+  me.focus_component(key="chat_input")
+  yield
+
+
+def respond_to_chat(input: str, history: list[ChatMessage]):
+  """Displays random canned text.
+
+  Edit this function to process messages with a real chatbot/LLM.
+  """
+  lines = [
+    "Mesop is a Python-based UI framework designed to simplify web UI development for engineers without frontend experience.",
+    "It leverages the power of the Angular web framework and Angular Material components, allowing rapid construction of web demos and internal tools.",
+    "With Mesop, developers can enjoy a fast build-edit-refresh loop thanks to its hot reload feature, making UI tweaks and component integration seamless.",
+    "Deployment is straightforward, utilizing standard HTTP technologies.",
+    "Mesop's component library aims for comprehensive Angular Material component coverage, enhancing UI flexibility and composability.",
+    "It supports custom components for specific use cases, ensuring developers can extend its capabilities to fit their unique requirements.",
+    "Mesop's roadmap includes expanding its component library and simplifying the onboarding processs.",
+  ]
+
+  for line in random.sample(lines, random.randint(3, len(lines) - 1)):
+    yield line + " "
+
+<example>

state.py

@@ -20,11 +20,15 @@ class State:
 
   # Generate prompt panel
   prompt_mode: str = "Generate"
+  prompt_app_type: str = "general"
   prompt_placeholder: str
   prompt: str
 
+  # New template dialog
+  select_index: int
+
   # Prompt history panel
-  prompt_history: list[dict]  # Format: {"prompt", "code", "index", "mode"}
+  prompt_history: list[dict]  # Format: {"prompt", "code", "index", "mode", "app_type"}
 
   # Code editor
   code_placeholder: str = c.EXAMPLE_PROGRAM
@@ -46,6 +50,7 @@ class State:
   show_prompt_history_panel: bool = False
   show_status_snackbar: bool = False
   show_help_dialog: bool = bool(int(os.getenv("MESOP_APP_MAKER_SHOW_HELP", "0")))
+  show_new_dialog: bool = False
 
   # Async action
   async_action_name: str

templates/advanced_chat.txt

@@ -0,0 +1,512 @@
+import random
+import time
+from dataclasses import dataclass
+from typing import Literal
+
+import mesop as me
+
+Role = Literal["user", "bot"]
+# Render me.markdown if markdown
+# Render me.image if image
+MessageType = Literal["markdown", "image"]
+
+
+EXAMPLE_USER_QUERIES = (
+  "Create a basic chat UI.",
+  "Create a chat UI that renders content side by side from multiple LLMs.",
+  "Create an advanced chat UI with a header and sidebar.",
+)
+
+
+@dataclass(kw_only=True)
+class ChatMessage:
+  """Chat message metadata."""
+
+  role: Role = "user"
+  content: str = ""
+  edited: bool = False
+  # 1 is positive
+  # -1 is negative
+  # 0 is no rating
+  rating: int = 0
+  message_type: MessageType = "markdown"
+
+
+@me.stateclass
+class State:
+  input: str
+  output: list[ChatMessage]
+  in_progress: bool
+  sidebar_expanded: bool = False
+
+
+@me.page()
+def advanced_chat():
+  is_mobile = me.viewport_size().width < 640
+  state = me.state(State)
+  # This is the grid that manages the layout.
+  with me.box(
+    style=me.Style(
+      display="grid",
+      # First column is for the sidebar
+      # We use 1fr when the sidebar is not expanded and 7fr when it is expanded. This
+      # is because the sidebar takes up more space.
+      grid_template_columns="7fr 50fr"
+      if state.sidebar_expanded and not is_mobile
+      else "1fr 50fr",
+      # First row is for the header which is why we use 1fr.
+      grid_template_rows="1fr 50fr",
+      height="100%",
+    )
+  ):
+    # This block is the code for the sidebar
+    with me.box(
+      style=me.Style(
+        grid_row="1 / -1",
+        background=me.theme_var("surface-container"),
+        border=me.Border.symmetric(
+          horizontal=me.BorderSide(
+            width=1, style="solid", color=me.theme_var("outline-variant")
+          )
+        ),
+        height="100%",
+      )
+    ):
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        # Event handler to expand/collapse the sidebar.
+        on_click=on_click_menu_icon,
+        style=me.Style(
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        me.icon("menu")
+
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        on_click=on_click_new_chat,
+        style=me.Style(
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        if state.sidebar_expanded and not is_mobile:
+          with me.box(
+            style=me.Style(
+              display="flex",
+              align_items="center",
+              gap=5,
+            )
+          ):
+            me.icon("add")
+            me.text("New chat")
+        else:
+          with me.tooltip(message="New chat"):
+            me.icon("add")
+
+      # This block is code for the sidebar menu item.
+      # It needs click event handlers to add interaction.
+      with me.box(
+        on_click=on_click_theme_brightness,
+        style=me.Style(
+          cursor="pointer",
+          padding=me.Padding.all(15),
+        ),
+      ):
+        if state.sidebar_expanded and not is_mobile:
+          with me.box(
+            style=me.Style(
+              display="flex",
+              align_items="center",
+              gap=5,
+            )
+          ):
+            me.icon(
+              "light_mode" if me.theme_brightness() == "dark" else "dark_mode",
+            )
+            me.text(
+              "Light mode" if me.theme_brightness() == "dark" else "Dark mode"
+            )
+        else:
+          with me.tooltip(
+            message="Light mode"
+            if me.theme_brightness() == "dark"
+            else "Dark mode"
+          ):
+            me.icon(
+              "light_mode" if me.theme_brightness() == "dark" else "dark_mode"
+            )
+
+    with me.box(
+      style=me.Style(
+        background=me.theme_var("surface-container"),
+        padding=me.Padding.all(10),
+        border=me.Border(
+          bottom=me.BorderSide(
+            width=1, style="solid", color=me.theme_var("outline-variant")
+          )
+        ),
+      )
+    ):
+      if is_mobile:
+        default_flex_style = me.Style(
+          align_items="center",
+          display="flex",
+          gap=5,
+          justify_content="space-between",
+        )
+      else:
+        default_flex_style = me.Style(
+          align_items="center",
+          display="flex",
+          gap=5,
+          justify_content="space-between",
+        )
+
+      with me.box(style=default_flex_style):
+        with me.box(style=me.Style(display="flex", gap=5)):
+          me.text(
+            "Advanced Chat UI",
+            type="headline-6",
+            style=me.Style(margin=me.Margin(bottom=0)),
+          )
+
+        # Only show the "Made with Mesop" message on non-mobile screens.
+        if not is_mobile:
+          with me.box(style=me.Style(display="flex", gap=5)):
+            me.text(
+              "Made with ",
+              style=me.Style(
+                color=me.theme_var("on-surface-variant"),
+                font_weight="bold",
+                font_size=13,
+              ),
+            )
+            me.link(
+              text="Mesop",
+              url="https://google.github.io/mesop/",
+              open_in_new_tab=True,
+              style=me.Style(
+                color=me.theme_var("primary"),
+                text_decoration="none",
+                font_weight="bold",
+                font_size=13,
+              ),
+            )
+
+    # This block is for the main content to be added.
+    with me.box(style=me.Style(overflow_y="hidden")):
+      with me.box(
+        style=me.Style(
+          color=me.theme_var("on-surface"),
+          background=me.theme_var("surface-container-lowest"),
+          display="flex",
+          flex_direction="column",
+          padding=me.Padding.all(15),
+          height="100%",
+        )
+      ):
+        # If there are no messages yet, show some example queries for the user to get
+        # started with.
+        if not state.output:
+          with me.box(
+            style=me.Style(
+              overflow_y="scroll",
+              flex_grow=1,
+              color=me.theme_var("on-surface-variant"),
+            )
+          ):
+            with me.box(style=me.Style(margin=me.Margin(top=25), font_size=20)):
+              me.text("Get started with an example below")
+            with me.box(
+              style=me.Style(display="flex", gap=20, margin=me.Margin(top=25))
+            ):
+              for index, query in enumerate(EXAMPLE_USER_QUERIES):
+                with me.box(
+                  key=f"query-{index}",
+                  on_click=on_click_example_user_query,
+                  style=me.Style(
+                    background=me.theme_var("surface-container-highest"),
+                    border_radius=15,
+                    padding=me.Padding.all(20),
+                    cursor="pointer",
+                  ),
+                ):
+                  me.text(query)
+
+        else:
+          # This contains the chat messages that have been recorded. This takes 50fr.
+          # This section can be replaced with other types of chat messages.
+
+          # We set overflow to scroll so that the chat input will be fixed at the bottom.
+          with me.box(style=me.Style(overflow_y="scroll", flex_grow=1)):
+            for index, msg in enumerate(state.output):
+              # User chat message
+              if msg.role == "user":
+                with me.box(
+                  style=me.Style(
+                    display="flex",
+                    justify_content="end",
+                    gap=15,
+                    margin=me.Margin.all(20),
+                  )
+                ):
+                  with me.box(
+                    style=me.Style(
+                      border_radius=10,
+                      background=me.theme_var("surface-container"),
+                      color=me.theme_var("on-surface-variant"),
+                      padding=me.Padding.symmetric(vertical=0, horizontal=10),
+                      width="66%",
+                    )
+                  ):
+                    # User query
+                    me.markdown(msg.content)
+              else:
+                # Bot chat message
+                with me.box(
+                  style=me.Style(
+                    display="flex", gap=15, margin=me.Margin.all(20)
+                  )
+                ):
+                  # Bot avatar/icon box
+                  me.text(
+                    "M",
+                    style=me.Style(
+                      background=me.theme_var("primary"),
+                      border_radius="50%",
+                      color=me.theme_var("on-primary"),
+                      font_size=20,
+                      height=40,
+                      width="40px",
+                      text_align="center",
+                      line_height="1",
+                      padding=me.Padding(top=10),
+                      margin=me.Margin(top=16),
+                    ),
+                  )
+                  # Bot message response
+                  with me.box():
+                    me.markdown(
+                      msg.content,
+                      style=me.Style(color=me.theme_var("on-surface")),
+                    )
+
+                    rated_style = me.Style(
+                      background=me.theme_var("surface-container-low"),
+                      color=me.theme_var("on-surface-variant"),
+                    )
+                    with me.tooltip(message="Good response", position="above"):
+                      with me.content_button(
+                        type="icon",
+                        key=f"thumb_up-{index}",
+                        on_click=on_click_thumb_up,
+                        style=rated_style if msg.rating == 1 else None,
+                      ):
+                        me.icon("thumb_up")
+
+                    with me.tooltip(message="Bad response", position="above"):
+                      with me.content_button(
+                        type="icon",
+                        key=f"thumb_down-{index}",
+                        on_click=on_click_thumb_down,
+                        style=rated_style if msg.rating == -1 else None,
+                      ):
+                        me.icon("thumb_down")
+
+                    with me.tooltip(
+                      message="Regenerate answer", position="above"
+                    ):
+                      with me.content_button(
+                        type="icon",
+                        key=f"restart-{index}",
+                        on_click=on_click_regenerate,
+                      ):
+                        me.icon("restart_alt")
+
+        # This is for the basic chat input. This is the second row at 1fr.
+        # This section can be replaced with other types of chat inputs.
+        with me.box(
+          style=me.Style(
+            border_radius=16,
+            padding=me.Padding.all(8),
+            background=me.theme_var("surface-container-low"),
+            display="flex",
+          )
+        ):
+          with me.box(
+            style=me.Style(
+              flex_grow=1,
+            )
+          ):
+            me.native_textarea(
+              key="chat_input",
+              value=state.input,
+              on_blur=on_chat_input,
+              autosize=True,
+              min_rows=4,
+              placeholder="Subtle chat input",
+              style=me.Style(
+                color=me.theme_var("on-surface-variant"),
+                padding=me.Padding(top=16, left=16),
+                background=me.theme_var("surface-container-low"),
+                outline="none",
+                width="100%",
+                overflow_y="auto",
+                border=me.Border.all(
+                  me.BorderSide(style="none"),
+                ),
+              ),
+            )
+          with me.content_button(
+            type="icon",
+            on_click=on_click_submit_chat_msg,
+            # If we're processing a message prevent new queries from being sent
+            disabled=state.in_progress,
+          ):
+            me.icon("send")
+
+
+def on_click_example_user_query(e: me.ClickEvent):
+  """Populates the user input with the example query"""
+  state = me.state(State)
+  # Get the example index from the key
+  _, example_index = e.key.split("-")
+  state.input = EXAMPLE_USER_QUERIES[int(example_index)]
+
+
+def on_click_thumb_up(e: me.ClickEvent):
+  """Gives the message a positive rating"""
+  state = me.state(State)
+  # Get the message index from the key
+  _, msg_index = e.key.split("-")
+  msg_index = int(msg_index)
+  # Give a positive rating
+  state.output[msg_index].rating = 1
+
+
+def on_click_thumb_down(e: me.ClickEvent):
+  """Gives the message a negative rating"""
+  state = me.state(State)
+  # Get the message index from the key
+  _, msg_index = e.key.split("-")
+  msg_index = int(msg_index)
+  # Give a negative rating
+  state.output[msg_index].rating = -1
+
+
+def on_click_new_chat(e: me.ClickEvent):
+  """Resets messages."""
+  state = me.state(State)
+  state.output = []
+  me.focus_component(key="chat_input")
+
+
+def on_click_theme_brightness(e: me.ClickEvent):
+  """Toggles dark mode."""
+  if me.theme_brightness() == "light":
+    me.set_theme_mode("dark")
+  else:
+    me.set_theme_mode("light")
+
+
+def on_click_menu_icon(e: me.ClickEvent):
+  """Expands and collapses sidebar menu."""
+  state = me.state(State)
+  state.sidebar_expanded = not state.sidebar_expanded
+
+
+def on_chat_input(e: me.InputBlurEvent):
+  """Capture chat text input on blur."""
+  state = me.state(State)
+  state.input = e.value
+
+
+def on_click_regenerate(e: me.ClickEvent):
+  """Regenerates response from an existing message"""
+  state = me.state(State)
+  # Get message index from key
+  _, msg_index = e.key.split("-")
+  msg_index = int(msg_index)
+
+  # Get the user message which is the previous message
+  user_message = state.output[msg_index - 1]
+  # Get bot message to be regenerated
+  assistant_message = state.output[msg_index]
+  assistant_message.content = ""
+  state.in_progress = True
+  yield
+
+  start_time = time.time()
+  # Send in the old user input and chat history to get the bot response.
+  # We make sure to only pass in the chat history up to this message.
+  output_message = respond_to_chat(
+    user_message.content, state.output[:msg_index]
+  )
+  for content in output_message:
+    assistant_message.content += content
+    # TODO: 0.25 is an abitrary choice. In the future, consider making this adjustable.
+    if (time.time() - start_time) >= 0.25:
+      start_time = time.time()
+      yield
+
+  state.in_progress = False
+  me.focus_component(key="chat_input")
+  yield
+
+
+def on_click_submit_chat_msg(e: me.ClickEvent):
+  """Handles submitting a chat message."""
+  state = me.state(State)
+  if state.in_progress or not state.input:
+    return
+  input = state.input
+  # Clear the text input.
+  state.input = ""
+  yield
+
+  output = state.output
+  if output is None:
+    output = []
+  output.append(ChatMessage(role="user", content=input))
+  state.in_progress = True
+  yield
+
+  start_time = time.time()
+  # Send user input and chat history to get the bot response.
+  output_message = respond_to_chat(input, state.output)
+  assistant_message = ChatMessage(role="bot")
+  output.append(assistant_message)
+  state.output = output
+  for content in output_message:
+    assistant_message.content += content
+    # TODO: 0.25 is an abitrary choice. In the future, consider making this adjustable.
+    if (time.time() - start_time) >= 0.25:
+      start_time = time.time()
+      yield
+
+  state.in_progress = False
+  me.focus_component(key="chat_input")
+  yield
+
+
+def respond_to_chat(input: str, history: list[ChatMessage]):
+  """Displays random canned text.
+
+  Edit this function to process messages with a real chatbot/LLM.
+  """
+  lines = [
+    "Mesop is a Python-based UI framework designed to simplify web UI development for engineers without frontend experience.",
+    "It leverages the power of the Angular web framework and Angular Material components, allowing rapid construction of web demos and internal tools.",
+    "With Mesop, developers can enjoy a fast build-edit-refresh loop thanks to its hot reload feature, making UI tweaks and component integration seamless.",
+    "Deployment is straightforward, utilizing standard HTTP technologies.",
+    "Mesop's component library aims for comprehensive Angular Material component coverage, enhancing UI flexibility and composability.",
+    "It supports custom components for specific use cases, ensuring developers can extend its capabilities to fit their unique requirements.",
+    "Mesop's roadmap includes expanding its component library and simplifying the onboarding processs.",
+  ]
+
+  for line in random.sample(lines, random.randint(3, len(lines) - 1)):
+    yield line + " "

templates/basic_chat.txt

@@ -0,0 +1,196 @@
+import random
+import time
+from dataclasses import dataclass
+from typing import Literal
+
+import mesop as me
+
+Role = Literal["user", "bot"]
+
+
+@dataclass(kw_only=True)
+class ChatMessage:
+  """Chat message metadata."""
+
+  role: Role = "user"
+  content: str = ""
+  edited: bool = False
+
+
+@me.stateclass
+class State:
+  input: str
+  output: list[ChatMessage]
+  in_progress: bool
+
+
+@me.page()
+def basic_chat():
+  state = me.state(State)
+  with me.box(
+    style=me.Style(
+      color=me.theme_var("on-surface"),
+      background=me.theme_var("surface-container-lowest"),
+      display="flex",
+      flex_direction="column",
+      height="100%",
+      padding=me.Padding.all(15),
+    )
+  ):
+    # This contains the chat messages that have been recorded. This takes 50fr.
+    # This section can be replaced with other types of chat messages.
+
+    # We set overflow to scroll so that the chat input will be fixed at the bottom.
+    with me.box(style=me.Style(overflow_y="scroll", flex_grow=1)):
+      for msg in state.output:
+        # User chat message
+        if msg.role == "user":
+          with me.box(
+            style=me.Style(display="flex", gap=15, margin=me.Margin.all(20))
+          ):
+            # User avatar/icon box
+            me.text(
+              "U",
+              style=me.Style(
+                background=me.theme_var("primary"),
+                border_radius="50%",
+                color=me.theme_var("on-primary"),
+                font_size=20,
+                height=40,
+                width=40,
+                text_align="center",
+                line_height="1",
+                padding=me.Padding(top=10),
+                margin=me.Margin(top=16),
+              ),
+            )
+            # User query
+            me.markdown(msg.content)
+        else:
+          # Bot chat message
+          with me.box(
+            style=me.Style(display="flex", gap=15, margin=me.Margin.all(20))
+          ):
+            # Bot avatar/icon box
+            me.text(
+              "B",
+              style=me.Style(
+                background=me.theme_var("secondary"),
+                border_radius="50%",
+                color=me.theme_var("on-secondary"),
+                font_size=20,
+                height=40,
+                width="40px",
+                text_align="center",
+                line_height="1",
+                padding=me.Padding(top=10),
+                margin=me.Margin(top=16),
+              ),
+            )
+            # Bot message response
+            me.markdown(
+              msg.content,
+              style=me.Style(color=me.theme_var("on-surface")),
+            )
+
+    # This is for the basic chat input. This is the second row at 1fr.
+    # This section can be replaced with other types of chat inputs.
+    with me.box(
+      style=me.Style(
+        border_radius=16,
+        padding=me.Padding.all(8),
+        background=me.theme_var("surface-container-low"),
+        display="flex",
+        width="100%",
+      )
+    ):
+      with me.box(
+        style=me.Style(
+          flex_grow=1,
+        )
+      ):
+        me.native_textarea(
+          key="chat_input",
+          value=state.input,
+          on_blur=on_chat_input,
+          autosize=True,
+          min_rows=4,
+          placeholder="Subtle chat input",
+          style=me.Style(
+            color=me.theme_var("on-surface-variant"),
+            padding=me.Padding(top=16, left=16),
+            background=me.theme_var("surface-container-low"),
+            outline="none",
+            width="100%",
+            overflow_y="auto",
+            border=me.Border.all(
+              me.BorderSide(style="none"),
+            ),
+          ),
+        )
+      with me.content_button(
+        type="icon",
+        on_click=on_click_submit_chat_msg,
+        # If we're processing a message prevent new queries from being sent
+        disabled=state.in_progress,
+      ):
+        me.icon("send")
+
+
+def on_chat_input(e: me.InputBlurEvent):
+  """Capture chat text input on blur."""
+  state = me.state(State)
+  state.input = e.value
+
+
+def on_click_submit_chat_msg(e: me.ClickEvent):
+  """Handles submitting a chat message."""
+  state = me.state(State)
+  if state.in_progress or not state.input:
+    return
+  input = state.input
+  # Clear the text input.
+  state.input = ""
+  yield
+
+  output = state.output
+  if output is None:
+    output = []
+  output.append(ChatMessage(role="user", content=input))
+  state.in_progress = True
+  yield
+
+  start_time = time.time()
+  # Send user input and chat history to get the bot response.
+  output_message = respond_to_chat(input, state.output)
+  assistant_message = ChatMessage(role="bot")
+  output.append(assistant_message)
+  state.output = output
+  for content in output_message:
+    assistant_message.content += content
+    # TODO: 0.25 is an abitrary choice. In the future, consider making this adjustable.
+    if (time.time() - start_time) >= 0.25:
+      start_time = time.time()
+      yield
+
+  state.in_progress = False
+  me.focus_component(key="chat_input")
+  yield
+
+
+def respond_to_chat(input: str, history: list[ChatMessage]):
+  """Displays random canned text.
+
+  Edit this function to process messages with a real chatbot/LLM.
+  """
+  lines = [
+    "Mesop is a Python-based UI framework designed to simplify web UI development for engineers without frontend experience.",
+    "It leverages the power of the Angular web framework and Angular Material components, allowing rapid construction of web demos and internal tools.",
+    "With Mesop, developers can enjoy a fast build-edit-refresh loop thanks to its hot reload feature, making UI tweaks and component integration seamless.",
+    "Deployment is straightforward, utilizing standard HTTP technologies.",
+    "Mesop's component library aims for comprehensive Angular Material component coverage, enhancing UI flexibility and composability.",
+    "It supports custom components for specific use cases, ensuring developers can extend its capabilities to fit their unique requirements.",
+    "Mesop's roadmap includes expanding its component library and simplifying the onboarding processs.",
+  ]
+  for line in random.sample(lines, random.randint(3, len(lines) - 1)):
+    yield line + " "

templates/default.txt

@@ -0,0 +1,5 @@
+import mesop as me
+
+@me.page()
+def app():
+  me.text("Hello World")