Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove use of 100vh from chat component #841

Merged
merged 1 commit into from
Aug 26, 2024
Merged

Remove use of 100vh from chat component #841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 53 additions & 71 deletions demo/llm_rewriter.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,51 +71,50 @@ def page():

# 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.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,
):
me.icon(
_LABEL_BUTTON_IN_PROGRESS if state.in_progress else _LABEL_BUTTON
)
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
Expand Down Expand Up @@ -256,7 +255,7 @@ def respond_to_chat(input: str, history: list[ChatMessage]):

# Styles

_COLOR_BACKGROUND = "#f0f4f8"
_COLOR_BACKGROUND = "#fff"
_COLOR_CHAT_BUBBLE_YOU = "#f2f2f2"
_COLOR_CHAT_BUBBLE_BOT = "#ebf3ff"
_COLOR_CHAT_BUUBBLE_EDITED = "#f2ebff"
Expand All @@ -274,13 +273,17 @@ def respond_to_chat(input: str, history: list[ChatMessage]):

_STYLE_APP_CONTAINER = me.Style(
background=_COLOR_BACKGROUND,
display="grid",
height="100vh",
grid_template_columns="repeat(1, 1fr)",
display="flex",
flex_direction="column",
height="100%",
margin=me.Margin.symmetric(vertical=0, horizontal="auto"),
width="min(1024px, 100%)",
box_shadow="0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f",
padding=me.Padding(top=20, left=20, right=20),
)
_STYLE_TITLE = me.Style(padding=me.Padding(left=10))
_STYLE_CHAT_BOX = me.Style(
height="100%",
flex_grow=1,
overflow_y="scroll",
padding=_DEFAULT_PADDING,
margin=me.Margin(bottom=20),
Expand Down Expand Up @@ -309,7 +312,7 @@ def respond_to_chat(input: str, history: list[ChatMessage]):
margin=me.Margin.symmetric(vertical="0", horizontal="auto"),
width="min(1024px, 100%)",
box_sizing="content-box",
height="100vh",
height="100%",
overflow_y="scroll",
box_shadow=("0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"),
)
Expand All @@ -328,27 +331,6 @@ def respond_to_chat(input: str, history: list[ChatMessage]):
)


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.

Expand Down
110 changes: 47 additions & 63 deletions mesop/labs/chat.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,17 @@

_STYLE_APP_CONTAINER = me.Style(
background=_COLOR_BACKGROUND,
display="grid",
height="100vh",
grid_template_columns="repeat(1, 1fr)",
display="flex",
flex_direction="column",
height="100%",
margin=me.Margin.symmetric(vertical=0, horizontal="auto"),
width="min(1024px, 100%)",
box_shadow=("0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"),
padding=me.Padding(top=20, left=20, right=20),
)
_STYLE_TITLE = me.Style(padding=me.Padding(left=10))
_STYLE_CHAT_BOX = me.Style(
height="100%",
flex_grow=1,
overflow_y="scroll",
padding=_DEFAULT_PADDING,
margin=me.Margin(bottom=20),
Expand All @@ -57,27 +61,6 @@
_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.

Expand Down Expand Up @@ -217,41 +200,42 @@ def toggle_theme(e: me.ClickEvent):
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
)

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
)
Loading