116 lines
3.1 KiB
Python
116 lines
3.1 KiB
Python
import reflex as rx
|
|
from application.state import State
|
|
|
|
|
|
def sidebar_chat(chat: str) -> rx.Component:
|
|
"""A sidebar chat item.
|
|
|
|
Args:
|
|
chat: The chat item.
|
|
"""
|
|
return rx.drawer.close(
|
|
rx.hstack(
|
|
rx.button(
|
|
chat,
|
|
on_click=lambda: State.set_chat(chat),
|
|
width="80%",
|
|
variant="surface",
|
|
),
|
|
rx.button(
|
|
rx.icon(
|
|
tag="trash",
|
|
on_click=State.delete_chat(chat),
|
|
stroke_width=1,
|
|
),
|
|
width="20%",
|
|
variant="surface",
|
|
color_scheme="red",
|
|
),
|
|
width="100%",
|
|
),
|
|
key=chat,
|
|
)
|
|
|
|
|
|
def sidebar(trigger) -> rx.Component:
|
|
"""The sidebar component."""
|
|
return rx.drawer.root(
|
|
rx.drawer.trigger(trigger),
|
|
rx.drawer.overlay(),
|
|
rx.drawer.portal(
|
|
rx.drawer.content(
|
|
rx.vstack(
|
|
rx.heading("Chats", color=rx.color("mauve", 11)),
|
|
rx.divider(),
|
|
rx.foreach(State.chat_titles, lambda chat: sidebar_chat(chat)),
|
|
align_items="stretch",
|
|
width="100%",
|
|
),
|
|
top="auto",
|
|
right="auto",
|
|
height="100%",
|
|
width="20em",
|
|
padding="2em",
|
|
background_color=rx.color("mauve", 2),
|
|
outline="none",
|
|
)
|
|
),
|
|
direction="left",
|
|
)
|
|
|
|
|
|
def modal(trigger) -> rx.Component:
|
|
"""A modal to create a new chat."""
|
|
return rx.dialog.root(
|
|
rx.dialog.trigger(trigger),
|
|
rx.dialog.content(
|
|
rx.form(
|
|
rx.hstack(
|
|
rx.input(
|
|
placeholder="Chat name",
|
|
name="new_chat_name",
|
|
flex="1",
|
|
min_width="20ch",
|
|
),
|
|
rx.button("Create chat"),
|
|
spacing="2",
|
|
wrap="wrap",
|
|
width="100%",
|
|
),
|
|
on_submit=State.create_chat,
|
|
),
|
|
background_color=rx.color("mauve", 1),
|
|
),
|
|
open=State.is_modal_open,
|
|
on_open_change=State.set_is_modal_open,
|
|
)
|
|
|
|
|
|
def navbar():
|
|
return rx.hstack(
|
|
rx.badge(
|
|
State.current_chat,
|
|
rx.tooltip(
|
|
rx.icon("info", size=14),
|
|
content="The current selected chat.",
|
|
),
|
|
size="3",
|
|
variant="soft",
|
|
margin_inline_end="auto",
|
|
),
|
|
modal(
|
|
rx.icon_button("message-square-plus"),
|
|
),
|
|
sidebar(
|
|
rx.icon_button(
|
|
"messages-square",
|
|
background_color=rx.color("mauve", 6),
|
|
)
|
|
),
|
|
justify_content="space-between",
|
|
align_items="center",
|
|
padding="12px",
|
|
border_bottom=f"1px solid {rx.color('mauve', 3)}",
|
|
background_color=rx.color("mauve", 2),
|
|
)
|