clean up the repo

.github/workflows/ci.yml

@@ -0,0 +1,58 @@
+name: ci
+env:
+  OPENAI_API_KEY: "dummy"
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  check-pyright:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install UV
+        uses: astral-sh/setup-uv@v6
+        with:
+          python-version: "3.10"
+          enable-cache: true
+          activate-environment: true
+      - name: Install Reflex
+        run: uv pip install -r requirements.txt pyright
+      - name: Run Pyright
+        run: pyright .
+
+  check-ruff:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install UV
+        uses: astral-sh/setup-uv@v6
+        with:
+          python-version: "3.10"
+          enable-cache: true
+          activate-environment: true
+      - name: Install Reflex
+        run: uv pip install -r requirements.txt
+      - name: Run Ruff
+        uses: astral-sh/ruff-action@v3
+
+  check-export:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install UV
+        uses: astral-sh/setup-uv@v6
+        with:
+          python-version: "3.10"
+          enable-cache: true
+          activate-environment: true
+      - name: Install Reflex
+        run: uv pip install -r requirements.txt
+
+      - name: Initialize Reflex
+        run: reflex init
+
+      - name: Build frontend
+        run: reflex export

.gitignore

@@ -1,3 +1,4 @@
+.states
 assets/external/
 **/*.db
 **/*.ipynb
@@ -19,3 +20,4 @@ dist/*
 frontend.zip
 poetry.lock
 venv/
+*.env

README.md

@@ -24,8 +24,7 @@ git clone https://github.com/reflex-dev/reflex-chat.git
 
 To get started with Reflex, you'll need:
 
-- Python 3.7+
-- Node.js 12.22.0+ \(No JavaScript knowledge required!\)
+- Python 3.10+
 - Pip dependencies: `reflex`, `openai`
 
 Install `pip` dependencies with the provided `requirements.txt`:
@@ -48,15 +47,16 @@ reflex run
 - 100% Python-based, including the UI, using Reflex
 - Create and delete chat sessions
 - The application is fully customizable and no knowledge of web dev is required to use it.
-    - See https://reflex.dev/docs/styling/overview for more details 
+  - See https://reflex.dev/docs/styling/overview for more details
 - Easily swap out any LLM
 - Responsive design for various devices
 
 # Contributing
 
-We welcome contributions to improve and extend the LLM Web UI. 
+We welcome contributions to improve and extend the LLM Web UI.
 If you'd like to contribute, please do the following:
-- Fork the repository and make your changes. 
+
+- Fork the repository and make your changes.
 - Once you're ready, submit a pull request for review.
 
 # License

chat/chat.py

@@ -1,20 +1,19 @@
 """The main Chat app."""
 
 import reflex as rx
-import reflex_chakra as rc
 
 from chat.components import chat, navbar
 
 
 def index() -> rx.Component:
     """The main app."""
-    return rc.vstack(
+    return rx.vstack(
         navbar(),
         chat.chat(),
         chat.action_bar(),
         background_color=rx.color("mauve", 1),
         color=rx.color("mauve", 12),
-        min_height="100vh",
+        height="100dvh",
         align_items="stretch",
         spacing="0",
     )
@@ -24,7 +23,7 @@ def index() -> rx.Component:
 app = rx.App(
     theme=rx.theme(
         appearance="dark",
-        accent_color="violet",
+        accent_color="purple",
     ),
 )
 app.add_page(index)

chat/components/__init__.py

@@ -1,2 +1 @@
-from .loading_icon import loading_icon
-from .navbar import navbar
+from .navbar import navbar as navbar

chat/components/chat.py

@@ -1,11 +1,27 @@
 import reflex as rx
-import reflex_chakra as rc
 
-from chat.components import loading_icon
 from chat.state import QA, State
+from reflex.constants.colors import ColorType
 
 
-message_style = dict(display="inline-block", padding="1em", border_radius="8px", max_width=["30em", "30em", "50em", "50em", "50em", "50em"])
+def message_content(text: str, color: ColorType) -> rx.Component:
+    """Create a message content component.
+
+    Args:
+        text: The text to display.
+        color: The color of the message.
+
+    Returns:
+        A component displaying the message.
+    """
+    return rx.markdown(
+        text,
+        background_color=rx.color(color, 4),
+        color=rx.color(color, 12),
+        display="inline-block",
+        padding_inline="1em",
+        border_radius="8px",
+    )
 
 
 def message(qa: QA) -> rx.Component:
@@ -19,85 +35,72 @@ def message(qa: QA) -> rx.Component:
     """
     return rx.box(
         rx.box(
-            rx.markdown(
-                qa.question,
-                background_color=rx.color("mauve", 4),
-                color=rx.color("mauve", 12),
-                **message_style,
-            ),
+            message_content(qa["question"], "mauve"),
             text_align="right",
-            margin_top="1em",
+            margin_bottom="8px",
         ),
         rx.box(
-            rx.markdown(
-                qa.answer,
-                background_color=rx.color("accent", 4),
-                color=rx.color("accent", 12),
-                **message_style,
-            ),
+            message_content(qa["answer"], "accent"),
             text_align="left",
-            padding_top="1em",
+            margin_bottom="8px",
         ),
-        width="100%",
+        max_width="50em",
+        margin_inline="auto",
     )
 
 
 def chat() -> rx.Component:
     """List all the messages in a single conversation."""
-    return rx.vstack(
-        rx.box(rx.foreach(State.chats[State.current_chat], message), width="100%"),
-        py="8",
+    return rx.auto_scroll(
+        rx.foreach(
+            State.chats[State.current_chat],
+            message,
+        ),
         flex="1",
-        width="100%",
-        max_width="50em",
-        padding_x="4px",
-        align_self="center",
-        overflow="hidden",
-        padding_bottom="5em",
+        padding="8px",
     )
 
 
 def action_bar() -> rx.Component:
     """The action bar to send a new message."""
     return rx.center(
         rx.vstack(
-            rc.form(
-                rc.form_control(
-                    rx.hstack(
-                        rx.input(
-                            rx.input.slot(
-                                rx.tooltip(
-                                    rx.icon("info", size=18),
-                                    content="Enter a question to get a response.",
-                                )
-                            ),
-                            placeholder="Type something...",
-                            id="question",
-                            width=["15em", "20em", "45em", "50em", "50em", "50em"],
-                        ),
-                        rx.button(
-                            rx.cond(
-                                State.processing,
-                                loading_icon(height="1em"),
-                                rx.text("Send"),
-                            ),
-                            type="submit",
+            rx.form(
+                rx.hstack(
+                    rx.input(
+                        rx.input.slot(
+                            rx.tooltip(
+                                rx.icon("info", size=18),
+                                content="Enter a question to get a response.",
+                            )
                         ),
-                        align_items="center",
+                        placeholder="Type something...",
+                        id="question",
+                        disabled=State.processing,
+                        flex="1",
+                    ),
+                    rx.button(
+                        "Send",
+                        loading=State.processing,
+                        disabled=State.processing,
+                        type="submit",
                     ),
-                    is_disabled=State.processing,
+                    max_width="50em",
+                    margin="0 auto",
+                    align_items="center",
                 ),
-                on_submit=State.process_question,
-                reset_on_submit=True,
+                on_submit=[State.process_question, rx.set_value("question", "")],
             ),
             rx.text(
                 "ReflexGPT may return factually incorrect or misleading responses. Use discretion.",
                 text_align="center",
                 font_size=".75em",
                 color=rx.color("mauve", 10),
             ),
-            rx.logo(margin_top="-1em", margin_bottom="-1em"),
-            align_items="center",
+            rx.logo(margin_block="-1em"),
+            width="100%",
+            padding_x="16px",
+            align="stretch",
         ),
         position="sticky",
         bottom="0",
@@ -107,6 +110,6 @@ def action_bar() -> rx.Component:
         backdrop_blur="lg",
         border_top=f"1px solid {rx.color('mauve', 3)}",
         background_color=rx.color("mauve", 2),
-        align_items="stretch",
+        align="stretch",
         width="100%",
     )