Merge branch 'main' into docs/setup-and-docs

Author: mccalluc

.github/workflows/pytest.yaml

@@ -154,7 +154,7 @@ jobs:
 
   playwright-examples:
     if: github.event_name != 'release'
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     strategy:
       matrix:
         python-version: ["3.12", "3.11", "3.10", "3.9"]

.github/workflows/verify-js-built.yaml

@@ -39,7 +39,7 @@ jobs:
         run: |
           if [[ `git status --porcelain` ]]; then
             git diff
-            echo "Uncommitted changes found. Please commit any changes that result from 'npm run build'."
+            echo "Uncommitted changes found. Please commit any changes that result from 'npm ci && npm run build'."
             exit 1
           else
             echo "No uncommitted changes found."

CHANGELOG.md

@@ -31,6 +31,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * The `ui.Chat()` component's `.update_user_input()` method gains `submit` and `focus` options that allow you to submit the input on behalf of the user and to choose whether the input receives focus after the update. (#1851)
 
+* The assistant icons is now configurable via `ui.chat_ui()` (or the `ui.Chat.ui()` method in Shiny Express) or for individual messages in the `.append_message()` and `.append_message_stream()` methods of `ui.Chat()`. (#1853)
+
 ### Bug fixes
 
 * `ui.Chat()` now correctly handles new `ollama.chat()` return value introduced in `ollama` v0.4. (#1787)

js/chat/chat.scss

@@ -3,11 +3,11 @@ shiny-chat-container {
   --shiny-chat-user-message-bg: RGBA(var(--bs-primary-rgb, 0, 123, 194), 0.06);
   --_chat-container-padding: 0.25rem;
 
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr auto;
   margin: 0 auto;
-  gap: 1rem;
-  overflow: auto;
+  gap: 0;
   padding: var(--_chat-container-padding);
   padding-bottom: 0; // Bottom padding is on input element
 
@@ -54,6 +54,13 @@ shiny-chat-messages {
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  overflow: auto;
+  margin-bottom: 1rem;
+
+  // Make space for the scroll bar
+  --_scroll-margin: 1rem;
+  padding-right: var(--_scroll-margin);
+  margin-right: calc(-1 * var(--_scroll-margin));
 }
 
 shiny-chat-message {
@@ -66,12 +73,30 @@ shiny-chat-message {
   .message-icon {
     border-radius: 50%;
     border: var(--shiny-chat-border);
+    height: 2rem;
+    width: 2rem;
+    display: grid;
+    place-items: center;
+    overflow: clip;
+
     > * {
-      margin: 0.5rem;
-      height: 20px;
-      width: 20px;
+      // images and avatars are full-bleed
+      height: 100%;
+      width: 100%;
+      margin: 0 !important;
+      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;
@@ -96,13 +121,12 @@ shiny-chat-message {
 }
 
 shiny-chat-input {
-  --_input-padding-top: 1rem;
+  --_input-padding-top: 0;
   --_input-padding-bottom: var(--_chat-container-padding, 0.25rem);
 
-  margin-top: auto;
+  margin-top: calc(-1 * var(--_input-padding-top));
   position: sticky;
-  bottom: 0;
-  background: linear-gradient(to bottom, transparent, var(--bs-body-bg, white) calc(var(--_input-padding-top) - var(--_input-padding-bottom)));
+  bottom: calc(-1 * var(--_input-padding-bottom));
   padding-block: var(--_input-padding-top) var(--_input-padding-bottom);
 
   textarea {

js/chat/chat.ts

@@ -15,6 +15,7 @@ type Message = {
   role: "user" | "assistant";
   chunk_type: "message_start" | "message_end" | null;
   content_type: ContentType;
+  icon?: string;
   operation: "append" | null;
 };
 type ShinyChatMessage = {
@@ -60,10 +61,12 @@ class ChatMessage extends LightElement {
   @property() content = "...";
   @property() content_type: ContentType = "markdown";
   @property({ type: Boolean, reflect: true }) streaming = false;
+  @property() icon = "";
 
   render() {
-    const noContent = this.content.trim().length === 0;
-    const icon = noContent ? ICONS.dots_fade : ICONS.robot;
+    // Show dots until we have content
+    const isEmpty = this.content.trim().length === 0;
+    const icon = isEmpty ? ICONS.dots_fade : this.icon || ICONS.robot;
 
     return html`
       <div class="message-icon">${unsafeHTML(icon)}</div>
@@ -72,8 +75,8 @@ class ChatMessage extends LightElement {
         content-type=${this.content_type}
         ?streaming=${this.streaming}
         auto-scroll
-        .onContentChange=${this.#onContentChange}
-        .onStreamEnd=${this.#makeSuggestionsAccessible}
+        .onContentChange=${this.#onContentChange.bind(this)}
+        .onStreamEnd=${this.#makeSuggestionsAccessible.bind(this)}
       ></shiny-markdown-stream>
     `;
   }
@@ -262,6 +265,8 @@ class ChatInput extends LightElement {
 }
 
 class ChatContainer extends LightElement {
+  @property({ attribute: "icon-assistant" }) iconAssistant = "";
+  inputSentinelObserver?: IntersectionObserver;
 
   private get input(): ChatInput {
     return this.querySelector(CHAT_INPUT_TAG) as ChatInput;
@@ -280,6 +285,35 @@ class ChatContainer extends LightElement {
     return html``;
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    // We use a sentinel element that we place just above the shiny-chat-input. When it
+    // moves off-screen we know that the text area input is now floating, add shadow.
+    let sentinel = this.querySelector<HTMLElement>("div");
+    if (!sentinel) {
+      sentinel = createElement("div", {
+        style: "width: 100%; height: 0;",
+      }) as HTMLElement;
+      this.input.insertAdjacentElement("afterend", sentinel);
+    }
+
+    this.inputSentinelObserver = new IntersectionObserver(
+      (entries) => {
+        const inputTextarea = this.input.querySelector("textarea");
+        if (!inputTextarea) return;
+        const addShadow = entries[0]?.intersectionRatio === 0;
+        inputTextarea.classList.toggle("shadow", addShadow);
+      },
+      {
+        threshold: [0, 1],
+        rootMargin: "0px",
+      }
+    );
+
+    this.inputSentinelObserver.observe(sentinel);
+  }
+
   firstUpdated(): void {
     // Don't attach event listeners until child elements are rendered
     if (!this.messages) return;
@@ -306,6 +340,9 @@ class ChatContainer extends LightElement {
   disconnectedCallback(): void {
     super.disconnectedCallback();
 
+    this.inputSentinelObserver?.disconnect();
+    this.inputSentinelObserver = undefined;
+
     this.removeEventListener("shiny-chat-input-sent", this.#onInputSent);
     this.removeEventListener("shiny-chat-append-message", this.#onAppend);
     this.removeEventListener(
@@ -348,6 +385,11 @@ class ChatContainer extends LightElement {
 
     const TAG_NAME =
       message.role === "user" ? CHAT_USER_MESSAGE_TAG : CHAT_MESSAGE_TAG;
+
+    if (this.iconAssistant) {
+      message.icon = message.icon || this.iconAssistant;
+    }
+
     const msg = createElement(TAG_NAME, message);
     this.messages.appendChild(msg);
 

js/markdown-stream/markdown-stream.scss

@@ -49,3 +49,26 @@ pre:has(.code-copy-button) {
     background-color: var(--bs-success, #198754);
   }
 }
+
+@keyframes markdown-stream-dot-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(0.4);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.markdown-stream-dot {
+  // The stream dot is appended with each streaming chunk update, so the pulse animation
+  // only shows up when streaming pauses but isn't complete.
+  animation: markdown-stream-dot-pulse 2s infinite cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  display: inline-block;
+  transform-origin: center;
+}

pyproject.toml

@@ -158,7 +158,7 @@ ignore = ["E302", "E501", "F403", "F405", "W503", "E203", "E701", "E704"]
 
 [tool.isort]
 profile = "black"
-skip = ["__init__.py", "typings/", "_dev/", ".venv", "venv", ".tox", "build"]
+skip = ["__init__.py", "typings/", "_dev/", ".venv", "venv", ".tox", "build", "_version.py"]
 
 [tool.mypy]
 # The goal of our usage of mypy is to make to sure mypy can run, not that it catches any errors (we use pyright to find our errors).