feat(chat): Add status messages

Author: gadenbuie

js/chat/chat.scss

@@ -95,6 +95,12 @@ shiny-chat-message {
   }
 }
 
+shiny-status-message {
+  opacity: 0.8;
+  text-align: center;
+  font-size: 0.9em;
+}
+
 shiny-chat-input {
   --_input-padding-top: 1rem;
   --_input-padding-bottom: var(--_chat-container-padding, 0.25rem);

js/chat/chat.ts

@@ -17,6 +17,7 @@ type Message = {
   content_type: ContentType;
   operation: "append" | null;
 };
+
 type ShinyChatMessage = {
   id: string;
   handler: string;
@@ -30,6 +31,12 @@ type UpdateUserInput = {
   focus?: false;
 };
 
+type StatusMessage = {
+  content: string;
+  content_type: Exclude<ContentType, "markdown">;
+  replaceable: "true" | "false" | "";
+};
+
 // https://github.com/microsoft/TypeScript/issues/28357#issuecomment-748550734
 declare global {
   interface GlobalEventHandlersEventMap {
@@ -39,11 +46,13 @@ declare global {
     "shiny-chat-clear-messages": CustomEvent;
     "shiny-chat-update-user-input": CustomEvent<UpdateUserInput>;
     "shiny-chat-remove-loading-message": CustomEvent;
+    "shiny-chat-append-status-message": CustomEvent<StatusMessage>;
   }
 }
 
 const CHAT_MESSAGE_TAG = "shiny-chat-message";
 const CHAT_USER_MESSAGE_TAG = "shiny-user-message";
+const CHAT_STATUS_MESSAGE_TAG = "shiny-status-message";
 const CHAT_MESSAGES_TAG = "shiny-chat-messages";
 const CHAT_INPUT_TAG = "shiny-chat-input";
 const CHAT_CONTAINER_TAG = "shiny-chat-container";
@@ -109,6 +118,32 @@ class ChatUserMessage extends LightElement {
   }
 }
 
+class ChatStatusMessage extends LightElement {
+  @property() content = "";
+  @property() content_type: Exclude<ContentType, "markdown"> = "text";
+  @property() type: "dynamic" | "static" = "static";
+
+  render() {
+    const content =
+      this.content_type === "html" ? unsafeHTML(this.content) : this.content;
+    return html`${content}`;
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("content") ||
+      changedProperties.has("content_type")
+    ) {
+      this.#scrollIntoView();
+    }
+  }
+
+  #scrollIntoView() {
+    this.scrollIntoView({ behavior: "smooth", block: "end" });
+  }
+}
+
 class ChatMessages extends LightElement {
   render() {
     return html``;
@@ -262,7 +297,6 @@ class ChatInput extends LightElement {
 }
 
 class ChatContainer extends LightElement {
-
   private get input(): ChatInput {
     return this.querySelector(CHAT_INPUT_TAG) as ChatInput;
   }
@@ -272,7 +306,7 @@ class ChatContainer extends LightElement {
   }
 
   private get lastMessage(): ChatMessage | null {
-    const last = this.messages.lastElementChild;
+    const last = this.messages.querySelector("shiny-chat-message:last-child");
     return last ? (last as ChatMessage) : null;
   }
 
@@ -290,6 +324,10 @@ class ChatContainer extends LightElement {
       "shiny-chat-append-message-chunk",
       this.#onAppendChunk
     );
+    this.addEventListener(
+      "shiny-chat-append-status-message",
+      this.#onAppendStatus
+    );
     this.addEventListener("shiny-chat-clear-messages", this.#onClear);
     this.addEventListener(
       "shiny-chat-update-user-input",
@@ -312,6 +350,10 @@ class ChatContainer extends LightElement {
       "shiny-chat-append-message-chunk",
       this.#onAppendChunk
     );
+    this.removeEventListener(
+      "shiny-chat-append-status-message",
+      this.#onAppendStatus
+    );
     this.removeEventListener("shiny-chat-clear-messages", this.#onClear);
     this.removeEventListener(
       "shiny-chat-update-user-input",
@@ -401,6 +443,20 @@ class ChatContainer extends LightElement {
     }
   }
 
+  #onAppendStatus(event: CustomEvent<StatusMessage>): void {
+    if (this.messages.lastChild instanceof ChatStatusMessage) {
+      if (this.messages.lastChild.type == "dynamic") {
+        // Update previous status message if last message was a status item
+        this.messages.lastChild.content = event.detail.content;
+        this.messages.lastChild.content_type = event.detail.content_type;
+        return;
+      }
+    }
+
+    const status = createElement(CHAT_STATUS_MESSAGE_TAG, event.detail);
+    this.messages.appendChild(status);
+  }
+
   #onClear(): void {
     this.messages.innerHTML = "";
   }
@@ -481,6 +537,7 @@ class ChatContainer extends LightElement {
 
 customElements.define(CHAT_MESSAGE_TAG, ChatMessage);
 customElements.define(CHAT_USER_MESSAGE_TAG, ChatUserMessage);
+customElements.define(CHAT_STATUS_MESSAGE_TAG, ChatStatusMessage);
 customElements.define(CHAT_MESSAGES_TAG, ChatMessages);
 customElements.define(CHAT_INPUT_TAG, ChatInput);
 customElements.define(CHAT_CONTAINER_TAG, ChatContainer);

shiny/ui/_chat.py

@@ -38,7 +38,12 @@
     as_provider_message,
 )
 from ._chat_tokenizer import TokenEncoding, TokenizersEncoding, get_default_tokenizer
-from ._chat_types import ChatMessage, ClientMessage, TransformedMessage
+from ._chat_types import (
+    ChatMessage,
+    ChatStatusMessage,
+    ClientMessage,
+    TransformedMessage,
+)
 from ._html_deps_py_shiny import chat_deps
 from .fill import as_fill_item, as_fillable_container
 
@@ -734,6 +739,34 @@ async def _send_append_message(
         # TODO: Joe said it's a good idea to yield here, but I'm not sure why?
         # await asyncio.sleep(0)
 
+    async def append_status_message(
+        self,
+        content: str | Tag | HTML,
+        type: Literal["dynamic", "static"] = "dynamic"
+    ) -> None:
+        """
+        Append a status message to the chat.
+
+        Adds or updates a status message in the chat messages area.
+
+        Parameters
+        ----------
+        content
+            The content of the message to append, as a string of plain text or as HTML
+            in the form of :class:`~htmltools.Tag` or :class:`~htmltools.HTML`.
+        type
+            Whether this status message is `"dynamic"` and can be replaced by a
+            subsequent status message before the next user or assistant turn, or if the
+            message should not be updated by subsequent status messages (`"static"`).
+        """
+
+        msg: ChatStatusMessage = {
+            "content": str(content),
+            "content_type": "html" if isinstance(content, (Tag, HTML)) else "text",
+            "type": type
+        }
+        await self._send_custom_message("shiny-chat-append-status-message", msg)
+
     @overload
     def transform_user_input(
         self, fn: TransformUserInput | TransformUserInputAsync
@@ -1105,7 +1138,9 @@ def destroy(self):
     async def _remove_loading_message(self):
         await self._send_custom_message("shiny-chat-remove-loading-message", None)
 
-    async def _send_custom_message(self, handler: str, obj: ClientMessage | None):
+    async def _send_custom_message(
+        self, handler: str, obj: ClientMessage | ChatStatusMessage | None
+    ):
         await self._session.send_custom_message(
             "shinyChatMessage",
             {

shiny/ui/_chat_types.py

@@ -14,6 +14,12 @@ class ChatMessage(TypedDict):
     role: Role
 
 
+class ChatStatusMessage(TypedDict):
+    content: str
+    content_type: Literal["html", "text"]
+    type: Literal["dynamic", "static"]
+
+
 # A message once transformed have been applied
 class TransformedMessage(TypedDict):
     content_client: str | HTML