feat: Configurable chat icon

js/chat/chat.scss

@@ -12,6 +12,10 @@ shiny-chat-container {
   p:last-child {
     margin-bottom: 0;
   }
+
+  [data-icon="assistant"] {
+    display: none;
+  }
 }
 
 shiny-chat-messages {
@@ -30,10 +34,15 @@ shiny-chat-message {
   .message-icon {
     border-radius: 50%;
     border: var(--shiny-chat-border);
+    height: 2rem;
+    width: 2rem;
+    display: grid;
+    place-items: center;
+
     > * {
-      margin: 0.5rem;
       height: 20px;
       width: 20px;
+      margin: 0 !important;
     }
   }
   /* Vertically center the 2nd column (message content) */

js/chat/chat.ts

@@ -61,10 +61,16 @@ class ChatMessage extends LightElement {
 
   render() {
     const noContent = this.content.trim().length === 0;
-    const icon = noContent ? ICONS.dots_fade : ICONS.robot;
+    const defaultIcon = noContent ? ICONS.dots_fade : ICONS.robot;
+
+    // Check if there's an existing message-icon element
+    const existingIcon = this.querySelector(".message-icon");
+    const icon = existingIcon
+      ? existingIcon
+      : html`<div class="message-icon">${unsafeHTML(defaultIcon)}</div>`;
 
     return html`
-      <div class="message-icon">${unsafeHTML(icon)}</div>
+      ${icon}
       <shiny-markdown-stream
         content=${this.content}
         content-type=${this.content_type}
@@ -204,6 +210,10 @@ class ChatContainer extends LightElement {
     return last ? (last as ChatMessage) : null;
   }
 
+  private get iconTemplate(): HTMLDivElement | null {
+    return this.querySelector('div[data-icon="assistant"]');
+  }
+
   render() {
     return html``;
   }
@@ -266,6 +276,16 @@ class ChatContainer extends LightElement {
     const TAG_NAME =
       message.role === "user" ? CHAT_USER_MESSAGE_TAG : CHAT_MESSAGE_TAG;
     const msg = createElement(TAG_NAME, message);
+
+    if (message.role !== "user") {
+      const iconTemplate = this.iconTemplate;
+      if (iconTemplate) {
+        const icon = iconTemplate.cloneNode(true) as HTMLDivElement;
+        icon.className = "message-icon";
+        msg.appendChild(icon);
+      }
+    }
+
     this.messages.appendChild(msg);
 
     if (finalize) {

shiny/ui/_chat.py

@@ -17,7 +17,7 @@
 )
 from weakref import WeakValueDictionary
 
-from htmltools import HTML, Tag, TagAttrValue, css
+from htmltools import HTML, Tag, TagAttrValue, css, div
 
 from .. import _utils, reactive
 from .._deprecated import warn_deprecated
@@ -761,7 +761,6 @@ async def _transform_message(
         chunk: ChunkOption = False,
         chunk_content: str | None = None,
     ) -> TransformedMessage | None:
-
         res = as_transformed_message(message)
         key = res["transform_key"]
 
@@ -791,7 +790,6 @@ def _store_message(
         chunk: ChunkOption = False,
         index: int | None = None,
     ) -> None:
-
         # Don't actually store chunks until the end
         if chunk is True or chunk == "start":
             return None
@@ -817,7 +815,6 @@ def _trim_messages(
         token_limits: tuple[int, int],
         format: MISSING_TYPE | ProviderMessageFormat,
     ) -> tuple[TransformedMessage, ...]:
-
         n_total, n_reserve = token_limits
         if n_total <= n_reserve:
             raise ValueError(
@@ -878,7 +875,6 @@ def _trim_anthropic_messages(
         self,
         messages: tuple[TransformedMessage, ...],
     ) -> tuple[TransformedMessage, ...]:
-
         if any(m["role"] == "system" for m in messages):
             raise ValueError(
                 "Anthropic requires a system prompt to be specified in it's `.create()` method "
@@ -1006,7 +1002,6 @@ async def _send_custom_message(self, handler: str, obj: ClientMessage | None):
 
 @add_example(ex_dir="../templates/chat/starters/hello")
 class ChatExpress(Chat):
-
     def ui(
         self,
         *,
@@ -1015,6 +1010,7 @@ def ui(
         width: CssUnit = "min(680px, 100%)",
         height: CssUnit = "auto",
         fill: bool = True,
+        icon_assistant: HTML | Tag | None = None,
         **kwargs: TagAttrValue,
     ) -> Tag:
         """
@@ -1036,6 +1032,10 @@ def ui(
         fill
             Whether the chat should vertically take available space inside a fillable
             container.
+        icon_assistant
+            The icon to use for the assistant chat messages. Can be a HTML or a tag in
+            the form of :class:`~htmltools.HTML` or :class:`~htmltools.Tag`. If `None`,
+            a default robot icon is used.
         kwargs
             Additional attributes for the chat container element.
         """
@@ -1046,6 +1046,7 @@ def ui(
             width=width,
             height=height,
             fill=fill,
+            icon_assistant=icon_assistant,
             **kwargs,
         )
 
@@ -1059,6 +1060,7 @@ def chat_ui(
     width: CssUnit = "min(680px, 100%)",
     height: CssUnit = "auto",
     fill: bool = True,
+    icon_assistant: HTML | Tag | None = None,
     **kwargs: TagAttrValue,
 ) -> Tag:
     """
@@ -1084,6 +1086,10 @@ def chat_ui(
         The height of the chat container.
     fill
         Whether the chat should vertically take available space inside a fillable container.
+    icon_assistant
+            The icon to use for the assistant chat messages. Can be a HTML or a tag in
+            the form of :class:`~htmltools.HTML` or :class:`~htmltools.Tag`. If `None`,
+            a default robot icon is used.
     kwargs
         Additional attributes for the chat container element.
     """
@@ -1105,14 +1111,27 @@ def chat_ui(
             raise ValueError("Each message must be a string or a dictionary.")
 
         if msg["role"] == "user":
-            tag_name = "shiny-user-message"
+            message_tags.append(Tag("shiny-user-message", content=msg["content"]))
         else:
-            tag_name = "shiny-chat-message"
-
-        message_tags.append(Tag(tag_name, content=msg["content"]))
+            message_tags.append(
+                Tag(
+                    "shiny-chat-message",
+                    (
+                        None
+                        if icon_assistant is None
+                        else div(icon_assistant, class_="message-icon")
+                    ),
+                    content=msg["content"],
+                ),
+            )
 
     res = Tag(
         "shiny-chat-container",
+        (
+            None
+            if icon_assistant is None
+            else div(HTML(icon_assistant), data_icon="assistant")
+        ),
         Tag("shiny-chat-messages", *message_tags),
         Tag(
             "shiny-chat-input",