feat: Make images (i.e. avatars) full-bleed

Author: gadenbuie

js/chat/chat.scss

@@ -70,16 +70,26 @@ shiny-chat-message {
     width: 2rem;
     display: grid;
     place-items: center;
+    overflow: clip;
 
     > * {
-      height: 20px;
-      width: 20px;
+      // images and avatars are full-bleed
+      height: 100%;
+      width: 100%;
       margin: 0 !important;
-      max-height: 85%;
-      max-width: 85%;
       object-fit: contain;
     }
+
+    > svg,
+    > .icon,
+    > .fa,
+    > .bi {
+      // icons and svgs need some padding within the circle
+      max-height: 66%;
+      max-width: 66%;
+    }
   }
+
   /* Vertically center the 2nd column (message content) */
   shiny-markdown-stream {
     align-self: center;

shiny/www/py-shiny/chat/chat.css

@@ -1,11 +1,14 @@
 import asyncio
+from pathlib import Path
 
 import faicons
 
-from shiny.express import input, ui
+from shiny.express import app_opts, input, ui
 
 ui.page_opts(title="Chat Icons")
 
+app_opts({ "/img": Path(__file__).parent / "img" })
+
 with ui.layout_columns():
     # Default Bot ---------------------------------------------------------------------
     chat_default = ui.Chat(
@@ -83,26 +86,36 @@ async def handle_user_input_otter(user_input: str):
     async def handle_user_input_svg(user_input: str):
         await chat_svg.append_message(f"You said: {user_input}")
 
-    # Shiny Bot -----------------------------------------------------------------------
-    chat_shiny = ui.Chat(
-        id="chat_shiny",
+    # Image Bot -----------------------------------------------------------------------
+    chat_image = ui.Chat(
+        id="chat_image",
         messages=[
             {
-                "content": "Hello! I'm Shiny Bot. How can I help you today?",
+                "content": "Hello! I'm Image Bot. How can I help you today?",
                 "role": "assistant",
             },
         ],
     )
 
     with ui.div():
-        ui.h2("Shiny Bot")
-        chat_shiny.ui(
+        ui.h2("Image Bot")
+        chat_image.ui(
             icon_assistant=ui.img(
-                src="https://github.com/rstudio/hex-stickers/raw/refs/heads/main/PNG/shiny.png",
-                class_="icon-shiny",
+                src="img/grace-hopper.jpg",
+                class_="icon-image grace-hopper",
             )
         )
-
-    @chat_shiny.on_user_submit
-    async def handle_user_input_shiny(user_input: str):
-        await chat_shiny.append_message(f"You said: {user_input}")
+        ui.input_select("image", "Image", choices=["Grace Hopper", "Shiny"])
+
+    @chat_image.on_user_submit
+    async def handle_user_input_image(user_input: str):
+        icon = None
+        if input.image() == "Shiny":
+            icon = ui.img(
+                src="img/shiny.png",
+                class_="icon-image shiny",
+            )
+        await chat_image.append_message(
+            f"You said: {user_input}",
+            icon=icon
+        )

shiny/www/py-shiny/chat/chat.css.map

@@ -26,7 +26,7 @@ def test_validate_chat_basic(page: Page, local_app: ShinyAppProc) -> None:
         ChatModule(page, "default", "bi bi-robot"),
         ChatModule(page, "animal", "fa icon-otter"),
         ChatModule(page, "svg", "bi bi-info-circle-fill icon-svg"),
-        ChatModule(page, "shiny", "icon-shiny"),
+        ChatModule(page, "image", "icon-image grace-hopper"),
     ]
 
     for mod in chats:
@@ -38,6 +38,7 @@ def test_validate_chat_basic(page: Page, local_app: ShinyAppProc) -> None:
 
         mod.expect_last_message_icon_to_have_classes()
 
+    # Test changing icons during the chat
     animal = controller.InputSelect(page, "animal")
     chat_animal = chats[1]
 
@@ -57,3 +58,12 @@ def test_validate_chat_basic(page: Page, local_app: ShinyAppProc) -> None:
     chat_animal.chat.set_user_input("hello")
     chat_animal.chat.send_user_input()
     chat_animal.expect_last_message_icon_to_have_classes()
+
+    # Test changing icon images during the chat
+    image = controller.InputSelect(page, "image")
+    chat_image = chats[3]
+
+    image.set("Shiny")
+    chat_image.chat.set_user_input("hi shiny")
+    chat_image.chat.send_user_input()
+    chat_image.expect_last_message_icon_to_have_classes("icon-image shiny")