Add Chat to component gallery (#173)

* Update Quarto to 1.4.557 (#169)

* #155 update id (#170)

* Abstract out express_core_preview() internals into a app_preview_code() helper so that shiny-dev-center can use it (#172)

* Add Chat to component gallery

* Recipes video

---------

Co-authored-by: Joe Schulte <[email protected]>

.github/workflows/deploy-docs.yml

@@ -50,7 +50,7 @@ jobs:
       # =====================================================
       - uses: quarto-dev/quarto-actions/setup@v2
         with:
-          version: 1.4.549
+          version: 1.4.557
 
       - name: Build site
         run: |

components/display-messages/chat/app-core.py

@@ -0,0 +1,22 @@
+from shiny import App, ui
+
+app_ui = ui.page_fillable(
+    ui.panel_title("Hello Shiny Chat"),
+    ui.chat_ui("chat"),  # <<
+    fillable_mobile=True,
+)
+
+
+def server(input):
+    # Create a chat instance and display it
+    chat = ui.Chat(id="chat")  # <<
+    chat.ui()  # <<
+
+    # Define a callback to run when the user submits a message
+    @chat.on_user_submit  # <<
+    async def _():  # <<
+        # Simply echo the user's input back to them
+        await chat.append_message(f"You said: {chat.user_input()}")  # <<
+
+
+app = App(app_ui, server)

components/display-messages/chat/app-express.py

@@ -0,0 +1,18 @@
+from shiny.express import ui
+
+ui.page_opts(
+    title="Hello Shiny Chat",
+    fillable=True,
+    fillable_mobile=True,
+)
+
+# Create a chat instance and display it
+chat = ui.Chat(id="chat")  # <<
+chat.ui()  # <<
+
+
+# Define a callback to run when the user submits a message
+@chat.on_user_submit  # <<
+async def _():  # <<
+    # Simply echo the user's input back to them
+    await chat.append_message(f"You said: {chat.user_input()}")  # <<

components/display-messages/chat/app-preview-code.py

@@ -0,0 +1,19 @@
+from shiny.express import ui
+
+# Set some Shiny page options
+ui.page_opts(
+    title="Hello Shiny Chat",
+    fillable=True,
+    fillable_mobile=True,
+)
+
+# Create a chat instance and display it
+chat = ui.Chat(id="chat")
+chat.ui()
+
+
+# Define a callback to run when the user submits a message
+@chat.on_user_submit
+async def _():
+    # Append a response to the chat
+    await chat.append_message(f"You said: {chat.user_input()}")

components/display-messages/chat/app-preview.py

@@ -0,0 +1,38 @@
+from shiny.express import ui
+
+# Set some Shiny page options
+ui.page_opts(
+    title="Hello Shiny Chat",
+    fillable=True,
+    fillable_mobile=True,
+)
+
+# Create a welcome message
+welcome = ui.markdown(
+    """
+    Hi! This is a simple Shiny `Chat` UI. Enter a message below and I will
+    simply repeat it back to you. For more examples, see this
+    [folder of examples](https://github.com/posit-dev/py-shiny/tree/main/examples/chat).
+    """
+)
+
+# Create a chat instance
+chat = ui.Chat(
+    id="chat",
+    messages=[welcome],
+)
+
+# Display it
+chat.ui()
+
+
+# Define a callback to run when the user submits a message
+@chat.on_user_submit
+async def _():
+    # Get the chat messages.
+    messages = chat.messages()
+    # Typically you'd pass messages to an LLM for response generation,
+    # but for this example, we'll just echo the user's input
+    user = messages[-1]["content"]
+    # Append a response to the chat
+    await chat.append_message(f"You said: {user}")