Spaces:
Running
Running
File size: 2,536 Bytes
8e04495 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
import mesop as me
def load(e: me.LoadEvent):
me.set_theme_mode("system")
@me.page(
on_load=load,
security_policy=me.SecurityPolicy(
allowed_iframe_parents=["https://google.github.io", "https://huggingface.co"]
),
path="/chat_inputs",
)
def app():
with me.box(style=CONTENT_STYLE):
subtle_chat_input()
elevated_chat_input()
me.textarea(
placeholder="Default chat input",
style=me.Style(width="100%"),
rows=2,
)
@me.component
def subtle_chat_input():
with me.box(
style=me.Style(
border_radius=16,
padding=me.Padding.all(8),
background=BACKGROUND_COLOR,
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(
padding=me.Padding(top=16, left=16),
background=BACKGROUND_COLOR,
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")
@me.component
def elevated_chat_input():
with me.box(
style=me.Style(
padding=me.Padding.all(8),
background="white",
display="flex",
width="100%",
border=me.Border.all(
me.BorderSide(width=0, style="solid", color="black")
),
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(
font_family="monospace",
padding=me.Padding(top=16, left=16),
background="white",
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")
BACKGROUND_COLOR = "#e2e8f0"
CONTENT_STYLE = me.Style(padding=me.Padding.all(16), gap=16, display="grid")
|