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>