Merge 'origin/main' into branch feat/chat-icon

Author: gadenbuie

.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."

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 {
@@ -114,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

@@ -266,6 +266,7 @@ 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;
@@ -284,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;
@@ -310,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(

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

@@ -117,7 +117,7 @@ dev = [
     "google-generativeai;python_version>='3.9'",
     "langchain_core",
     # langsmith (needed for langchain_core) versions >= 0.3
-    # (up to at least 0.3.2 as of 2025-01-29) 
+    # (up to at least 0.3.2 as of 2025-01-29)
     # cause an `argparse.ArgumentError` when running `pytest`.
     # https://github.com/posit-dev/py-shiny/issues/1829
     "langsmith<0.3",
@@ -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).