Add messages parameter to .ui() and chat_ui()

Author: cpsievert

CHANGELOG.md

@@ -29,6 +29,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Added [narwhals](https://posit-dev.github.io/py-narwhals) support for `@render.table`. This allows for any eager data frame supported by narwhals to be returned from a `@render.table` output method. (#1570)
 
+* `chat_ui()` and `Chat.ui()` gain a `messages` parameter for providing starting messages.
+
 ### Other changes
 
 * Incorporated `orjson` for faster data serialization in `@render.data_frame` outputs. (#1570)

js/chat/chat.ts

@@ -313,14 +313,7 @@ class ChatContainer extends LightElement {
   private resizeObserver!: ResizeObserver;
 
   render(): ReturnType<LitElement["render"]> {
-    const input_id = this.id + "_user_input";
-    return html`
-      <shiny-chat-messages></shiny-chat-messages>
-      <shiny-chat-input
-        id=${input_id}
-        placeholder=${this.placeholder}
-      ></shiny-chat-input>
-    `;
+    return html``;
   }
 
   firstUpdated(): void {

shiny/ui/_chat.py

@@ -8,6 +8,7 @@
     Callable,
     Iterable,
     Literal,
+    Optional,
     Sequence,
     Tuple,
     Union,
@@ -193,7 +194,8 @@ def __init__(
                 reactive.Value(None)
             )
 
-            # Initialize the chat with the provided messages
+            # TODO: deprecate messages once we start promoting managing LLM message
+            # state through other means
             @reactive.effect
             async def _init_chat():
                 for msg in messages:
@@ -233,6 +235,7 @@ async def _on_user_input():
     def ui(
         self,
         *,
+        messages: Optional[Sequence[str | ChatMessage]] = None,
         placeholder: str = "Enter a message...",
         width: CssUnit = "min(680px, 100%)",
         height: CssUnit = "auto",
@@ -247,6 +250,11 @@ def ui(
 
         Parameters
         ----------
+        messages
+            A sequence of messages to display in the chat. Each message can be either a
+            string or a dictionary with `content` and `role` keys. The `content` key
+            should contain the message text, and the `role` key can be "assistant" or
+            "user".
         placeholder
             Placeholder text for the chat input.
         width
@@ -261,6 +269,7 @@ def ui(
         """
         return chat_ui(
             id=self.id,
+            messages=messages,
             placeholder=placeholder,
             width=width,
             height=height,
@@ -1025,6 +1034,7 @@ async def _send_custom_message(self, handler: str, obj: ClientMessage | None):
 def chat_ui(
     id: str,
     *,
+    messages: Optional[Sequence[str | ChatMessage]] = None,
     placeholder: str = "Enter a message...",
     width: CssUnit = "min(680px, 100%)",
     height: CssUnit = "auto",
@@ -1042,6 +1052,10 @@ def chat_ui(
     ----------
     id
         A unique identifier for the chat UI.
+    messages
+        A sequence of messages to display in the chat. Each message can be either a string
+        or a dictionary with a `content` and `role` key. The `content` key should contain
+        the message text, and the `role` key can be "assistant" or "user".
     placeholder
         Placeholder text for the chat input.
     width
@@ -1056,8 +1070,32 @@ def chat_ui(
 
     id = resolve_id(id)
 
+    message_tags: list[Tag] = []
+    if messages is None:
+        messages = []
+    for msg in messages:
+        if isinstance(msg, str):
+            msg = {"content": msg, "role": "assistant"}
+        elif isinstance(msg, dict):
+            if "content" not in msg:
+                raise ValueError("Each message must have a 'content' key.")
+            if "role" not in msg:
+                raise ValueError("Each message must have a 'role' key.")
+        else:
+            raise ValueError("Each message must be a string or a dictionary.")
+
+        message_tags.append(
+            Tag("shiny-chat-message", content=msg["content"], role=msg["role"])
+        )
+
     res = Tag(
         "shiny-chat-container",
+        Tag("shiny-chat-messages", *message_tags),
+        Tag(
+            "shiny-chat-input",
+            id=f"{id}_user_input",
+            placeholder=placeholder,
+        ),
         chat_deps(),
         {
             "style": css(