Completed - part 2

main.py

@@ -1,5 +1,91 @@
 import mesop as me
 
-@me.page(path="/")
+ROOT_BOX_STYLE = me.Style(
+    background="#e7f2ff",
+    height="100%",
+    font_family="Inter",
+    display="flex",
+    flex_direction="column",
+)
+
+@me.page(
+    path="/",
+    stylesheets=[
+        "https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+    ],
+)
 def page():
-    me.text("Welcome to DuoChat!")
+    with me.box(style=ROOT_BOX_STYLE):
+        header()
+        with me.box(
+            style=me.Style(
+                width="min(680px, 100%)",
+                margin=me.Margin.symmetric(
+                    horizontal="auto",
+                    vertical=36,
+                ),
+            )
+        ):
+            me.text(
+                "Chat with multiple models at once",
+                style=me.Style(
+                    font_size=20,
+                    margin=me.Margin(bottom=24),
+                ),
+            )
+            chat_input()
+
+def header():
+    with me.box(
+        style=me.Style(
+            padding=me.Padding.all(16),
+        ),
+    ):
+        me.text(
+            "DuoChat",
+            style=me.Style(
+                font_weight=500,
+                font_size=24,
+                color="#3D3929",
+                letter_spacing="0.3px",
+            ),
+        )
+
+@me.stateclass
+class State:
+    input: str = ""
+
+def on_blur(e: me.InputBlurEvent):
+    state = me.state(State)
+    state.input = e.value
+
+def chat_input():
+    state = me.state(State)
+    with me.box(
+        style=me.Style(
+            border_radius=16,
+            padding=me.Padding.all(8),
+            background="white",
+            display="flex",
+            width="100%",
+        )
+    ):
+        with me.box(style=me.Style(flex_grow=1)):
+            me.native_textarea(
+                value=state.input,
+                placeholder="Enter a prompt",
+                on_blur=on_blur,
+                style=me.Style(
+                    padding=me.Padding(top=16, left=16),
+                    outline="none",
+                    width="100%",
+                    border=me.Border.all(me.BorderSide(style="none")),
+                ),
+            )
+        with me.content_button(type="icon", on_click=send_prompt):
+            me.icon("send")
+
+def send_prompt(e: me.ClickEvent):
+    state = me.state(State)
+    print(f"Sending prompt: {state.input}")
+    state.input = ""