feat: Adding a copy of our chat app v2

archived/chat_app_v2/.github/workflows/repository_dispatch.yml

@@ -0,0 +1,16 @@
+name: reflex-chat-repository-dispatch
+on:
+  push:
+    branches: ['main']
+jobs:
+  test:
+    name: reflex-chat-repository-dispatch
+    runs-on: ubuntu-latest
+    steps:
+      - name: Dispatch
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ secrets.HOSTING_REPOSITORY_DISPATCH }}
+          repository: reflex-dev/reflex-hosting
+          event-type: push
+          client-payload: '{"repo": "${{ github.repository }}", "sha": "${{ github.sha }}", "deployment-key": "chat"}'

archived/chat_app_v2/.gitignore

@@ -0,0 +1,20 @@
+**/*.db
+**/*.ipynb
+**/*.pyc
+**/*.swp
+**/.DS_Store
+**/.web
+**/node_modules/**
+**/package-lock.json
+**/package.json
+*.db
+*.py[cod]
+.vscode
+.web
+__pycache__/
+backend.zip
+bun.lockb
+dist/*
+frontend.zip
+poetry.lock
+venv/

archived/chat_app_v2/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Pynecone, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

archived/chat_app_v2/README.md

@@ -0,0 +1,64 @@
+# Reflex Chat App
+
+A user-friendly, highly customizable Python web app designed to demonstrate LLMs in a ChatGPT format.
+
+<div align="center">
+<img src="./docs/demo.gif" alt="icon"/>
+</div>
+
+# Getting Started
+
+You'll need a valid OpenAI subscription - save your API key under the environment variable `OPENAI_API_KEY`:
+
+```bash
+export OPENAI_API_KEY="YOUR_OPENAI_API_KEY" # replace me!
+```
+
+### 🧬 1. Clone the Repo
+
+```bash
+git clone https://github.com/reflex-dev/reflex-chat.git
+```
+
+### 📦 2. Install Reflex
+
+To get started with Reflex, you'll need:
+
+- Python 3.7+
+- Node.js 12.22.0+ \(No JavaScript knowledge required!\)
+- Pip dependencies: `reflex`, `openai`
+
+Install `pip` dependencies with the provided `requirements.txt`:
+
+```bash
+pip install -r requirements.txt
+```
+
+### 🚀 3. Run the application
+
+Initialize and run the app:
+
+```
+reflex init
+reflex run
+```
+
+# Features
+
+- 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 
+- Easily swap out any LLM
+- Responsive design for various devices
+
+# Contributing
+
+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. 
+- Once you're ready, submit a pull request for review.
+
+# License
+
+The following repo is licensed under the MIT License.

archived/chat_app_v2/chat/chat.py

@@ -0,0 +1,28 @@
+"""The main Chat app."""
+
+import reflex as rx
+from chat.components import chat, navbar
+
+
+def index() -> rx.Component:
+    """The main app."""
+    return rx.chakra.vstack(
+        navbar(),
+        chat.chat(),
+        chat.action_bar(),
+        background_color=rx.color("mauve", 1),
+        color=rx.color("mauve", 12),
+        min_height="100vh",
+        align_items="stretch",
+        spacing="0",
+    )
+
+
+# Add state and page to the app.
+app = rx.App(
+    theme=rx.theme(
+        appearance="dark",
+        accent_color="violet",
+    ),
+)
+app.add_page(index)

archived/chat_app_v2/chat/components/__init__.py

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

archived/chat_app_v2/chat/components/chat.py

@@ -0,0 +1,111 @@
+import reflex as rx
+
+from chat.components import loading_icon
+from chat.state import QA, State
+
+
+message_style = dict(display="inline-block", padding="1em", border_radius="8px", max_width=["30em", "30em", "50em", "50em", "50em", "50em"])
+
+
+def message(qa: QA) -> rx.Component:
+    """A single question/answer message.
+
+    Args:
+        qa: The question/answer pair.
+
+    Returns:
+        A component displaying the question/answer pair.
+    """
+    return rx.box(
+        rx.box(
+            rx.markdown(
+                qa.question,
+                background_color=rx.color("mauve", 4),
+                color=rx.color("mauve", 12),
+                **message_style,
+            ),
+            text_align="right",
+            margin_top="1em",
+        ),
+        rx.box(
+            rx.markdown(
+                qa.answer,
+                background_color=rx.color("accent", 4),
+                color=rx.color("accent", 12),
+                **message_style,
+            ),
+            text_align="left",
+            padding_top="1em",
+        ),
+        width="100%",
+    )
+
+
+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",
+        flex="1",
+        width="100%",
+        max_width="50em",
+        padding_x="4px",
+        align_self="center",
+        overflow="hidden",
+        padding_bottom="5em",
+    )
+
+
+def action_bar() -> rx.Component:
+    """The action bar to send a new message."""
+    return rx.center(
+        rx.vstack(
+            rx.chakra.form(
+                rx.chakra.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",
+                        ),
+                        align_items="center",
+                    ),
+                    is_disabled=State.processing,
+                ),
+                on_submit=State.process_question,
+                reset_on_submit=True,
+            ),
+            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",
+        ),
+        position="sticky",
+        bottom="0",
+        left="0",
+        padding_y="16px",
+        backdrop_filter="auto",
+        backdrop_blur="lg",
+        border_top=f"1px solid {rx.color('mauve', 3)}",
+        background_color=rx.color("mauve", 2),
+        align_items="stretch",
+        width="100%",
+    )

archived/chat_app_v2/chat/components/loading_icon.py

@@ -0,0 +1,21 @@
+import reflex as rx
+
+
+class LoadingIcon(rx.Component):
+    """A custom loading icon component."""
+
+    library = "react-loading-icons"
+    tag = "SpinningCircles"
+    stroke: rx.Var[str]
+    stroke_opacity: rx.Var[str]
+    fill: rx.Var[str]
+    fill_opacity: rx.Var[str]
+    stroke_width: rx.Var[str]
+    speed: rx.Var[str]
+    height: rx.Var[str]
+
+    def get_event_triggers(self) -> dict:
+        return {"on_change": lambda status: [status]}
+
+
+loading_icon = LoadingIcon.create

archived/chat_app_v2/chat/components/modal.py

@@ -0,0 +1,51 @@
+import reflex as rx
+from chat.state import State
+
+
+def modal() -> rx.Component:
+    """A modal to create a new chat."""
+    return rx.chakra.modal(
+        rx.chakra.modal_overlay(
+            rx.chakra.modal_content(
+                rx.chakra.modal_header(
+                    rx.chakra.hstack(
+                        rx.chakra.text("Create new chat"),
+                        rx.chakra.icon(
+                            tag="close",
+                            font_size="sm",
+                            on_click=State.toggle_modal,
+                            color="#fff8",
+                            _hover={"color": "#fff"},
+                            cursor="pointer",
+                        ),
+                        align_items="center",
+                        justify_content="space-between",
+                    )
+                ),
+                rx.chakra.modal_body(
+                    rx.chakra.input(
+                        placeholder="Type something...",
+                        on_blur=State.set_new_chat_name,
+                        bg="#222",
+                        border_color="#fff3",
+                        _placeholder={"color": "#fffa"},
+                    ),
+                ),
+                rx.chakra.modal_footer(
+                    rx.chakra.button(
+                        "Create",
+                        bg="#5535d4",
+                        box_shadow="md",
+                        px="4",
+                        py="2",
+                        h="auto",
+                        _hover={"bg": "#4c2db3"},
+                        on_click=State.create_chat,
+                    ),
+                ),
+                bg="#222",
+                color="#fff",
+            ),
+        ),
+        is_open=State.modal_open,
+    )