Update chat component page (#237)

* First pass at updating chat component page for a chatlas world

* wip write about newer chat additions

* moar

* moar

* Getting closer

* Nearing a 1st draft

* Close #212: Add chat component to sidebar

Author: cpsievert

_quarto.yml

@@ -171,6 +171,7 @@ website:
             - components/outputs/verbatim-text/index.qmd
         - section: "![](/images/chat-dots-fill.svg){.sidebar-icon .sidebar-subtitle}__Display Messages__"
           contents:
+            - components/display-messages/chat/index.qmd
             - components/display-messages/modal/index.qmd
             - components/display-messages/notifications/index.qmd
             - components/display-messages/progress-bar/index.qmd

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

@@ -13,9 +13,9 @@ def server(input):
 
     # Define a callback to run when the user submits a message
     @chat.on_user_submit  # <<
-    async def _():  # <<
+    async def handle_user_input(user_input: str):  # <<
         # Simply echo the user's input back to them
-        await chat.append_message(f"You said: {chat.user_input()}")  # <<
+        await chat.append_message(f"You said: {user_input}")  # <<
 
 
 app = App(app_ui, server)

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

@@ -6,13 +6,13 @@
     fillable_mobile=True,
 )
 
-# Create a chat instance and display it
+# 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
+# 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()}")  # <<
+async def handle_user_input(user_input: str):  # <<
+    # Simply echo the user's input back to them # <<
+    await chat.append_message(f"You said: {user_input}")  # <<

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

@@ -14,6 +14,6 @@
 
 # Define a callback to run when the user submits a message
 @chat.on_user_submit
-async def _():
+async def handle_user_input(user_input: str):
     # Append a response to the chat
-    await chat.append_message(f"You said: {chat.user_input()}")
+    await chat.append_message(f"You said: {user_input}")

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

@@ -12,7 +12,7 @@
     """
     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).
+    [folder of examples](https://github.com/posit-dev/py-shiny/tree/main/shiny/templates/chat).
     """
 )
 
@@ -28,11 +28,6 @@
 
 # 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"]
+async def handle_user_input(user_input: str):
     # Append a response to the chat
-    await chat.append_message(f"You said: {user}")
+    await chat.append_message(f"You said: {user_input}")