Merged origin/main into feat/navbar-options

Author: gadenbuie

.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

@@ -9,16 +9,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### New features
 
+* Added a new `ui.MarkdownStream()` component for performantly streaming in chunks of markdown/html strings into the UI. This component is primarily useful for text-based generative AI where responses are received incrementally. (#1782)
+
+* The `ui.Chat()` component now supports input suggestion links. This feature is useful for providing users with clickable suggestions that can be used to quickly input text into the chat. This can be done in 2 different ways (see #1845 for more details):
+  * By adding a `.suggestion` CSS class to an HTML element (e.g., `<span class="suggestion">A suggestion</span>`)
+  * Add a `data-suggestion` attribute to an HTML element, and set the value to the input suggestion text (e.g., `<span data-suggestion="Suggestion value">Suggestion link</span>`)
+  * To auto-submit the suggestion when clicked by the user, include the `.submit` class or the `data-suggestion-submit="true"` attribute on the HTML element. Alternatively, use Cmd/Ctrl + click to auto-submit any suggestion or Alt/Opt + click to apply any suggestion to the chat input without submitting.
+
 * Added a new `.add_sass_layer_file()` method to `ui.Theme` that supports reading a Sass file with layer boundary comments, e.g. `/*-- scss:defaults --*/`. This format [is supported by Quarto](https://quarto.org/docs/output-formats/html-themes-more.html#bootstrap-bootswatch-layering) and makes it easier to store Sass rules and declarations that need to be woven into Shiny's Sass Bootstrap files. (#1790)
 
-* The `ui.Chat()` component's `.on_user_submit()` decorator method now passes the user input to the decorated function. This makes it a bit more obvious how to access the user input inside the decorated function. See the new templates (mentioned below) for examples. (#1801)
+* The `ui.Chat()` component gains the following:
+    * The `.on_user_submit()` decorator method now passes the user input to the decorated function. This makes it a bit easier to access the user input. See the new templates (mentioned below) for examples. (#1801)
+    * A new `get_latest_stream_result()` method was added for an easy way to access the final result of the stream when it completes. (#1846)
+    * The `.append_message_stream()` method now returns the `reactive.extended_task` instance that it launches. (#1846)
 
 * `shiny create` includes new and improved `ui.Chat()` template options. Most of these templates leverage the new [`{chatlas}` package](https://posit-dev.github.io/chatlas/), our opinionated approach to interfacing with various LLM. (#1806)
 
+* Client data values (e.g., url info, output sizes/styles, etc.) can now be accessed in the server-side Python code via `session.clientdata`. For example, `session.clientdata.url_search()` reactively reads the URL search parameters. (#1832)
+
+* Available `input` ids can now be listed via `dir(input)`. This also works on the new `session.clientdata` object. (#1832)
+
+* 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)
 
+### Changes
+
+* The Shiny Core component `shiny.ui.Chat()` no longer has a `.ui()` method. This method
+was never intended to be used in Shiny Core (in that case, use `shiny.ui.chat_ui()`) to create the UI element. Note that the `shiny.express.ui.Chat()`
+class still has a `.ui()` method. (#1840)
+
 ## [1.2.1] - 2024-11-14
 
 ### Bug fixes

README.md

@@ -47,7 +47,15 @@ You can create and run your first application with `shiny create`, the CLI will
     * https://posit-dev.github.io/py-shiny/docs/api/express/
     * https://posit-dev.github.io/py-shiny/docs/api/core/
 
-If you want to do development on Shiny for Python:
+If you are working from a fork you may not have the git tags from the original repo.
+Git tags are required for the install to succeed. To add tags to your own fork:
+
+```sh
+git remote add upstream https://github.com/posit-dev/py-shiny.git
+git fetch --tags upstream
+```
+
+Then install:
 
 ```sh
 pip install -e ".[dev,test]"

docs/_quartodoc-core.yml

@@ -103,6 +103,11 @@ quartodoc:
       contents:
         - ui.Chat
         - ui.chat_ui
+    - title: Streaming markdown
+      desc: Stream markdown content into the UI
+      contents:
+        - ui.MarkdownStream
+        - ui.output_markdown_stream
     - title: Custom UI
       desc: Lower-level UI functions for creating custom HTML/CSS/JS
       contents:
@@ -229,19 +234,21 @@ quartodoc:
           path: Session
           summary:
             name: "Session"
-            desc: ""
+            desc: "Tools for managing user sessions and accessing session-related information."
           flatten: true
           contents:
             - session.get_current_session
             - session.require_active_session
             - session.session_context
             - reactive.get_current_context
+            - session.ClientData
             - session.Session.send_custom_message
             - session.Session.send_input_message
             - session.Session.on_flush
             - session.Session.on_flushed
             - session.Session.on_ended
             - session.Session.dynamic_route
+            - session.Session.close
             - input_handler.input_handlers
         - kind: page
           path: Renderer
@@ -359,4 +366,3 @@ quartodoc:
           contents:
             - name: experimental.ui.card_image
               dynamic: false
-

docs/_quartodoc-express.yml

@@ -82,6 +82,10 @@ quartodoc:
       desc: Build a chatbot interface
       contents:
         - express.ui.Chat
+    - title: Streaming markdown
+      desc: Stream markdown content into the UI
+      contents:
+        - express.ui.MarkdownStream
     - title: Reactive programming
       desc: Create reactive functions and dependencies.
       contents:
@@ -165,6 +169,14 @@ quartodoc:
         - express.ui.panel_conditional
         - express.ui.insert_ui
         - express.ui.remove_ui
+    - title: User Session
+      desc: Tools for managing user sessions and accessing session-related information.
+      contents:
+        - session.Session
+    - title: Client Data
+      desc: Access (client-side) information about the user session (e.g., URL, output info, etc).
+      contents:
+        - session.ClientData
     - title: UI as HTML
       desc: Tools for creating HTML/CSS/JS
       contents:

js/build.ts

@@ -74,6 +74,20 @@ const opts: Array<BuildOptions> = [
     plugins: [sassPlugin({ type: "css", sourceMap: false })],
     metafile: true,
   },
+  {
+    entryPoints: {
+      "markdown-stream/markdown-stream": "markdown-stream/markdown-stream.ts",
+    },
+    minify: true,
+    sourcemap: true,
+  },
+  {
+    entryPoints: {
+      "markdown-stream/markdown-stream": "markdown-stream/markdown-stream.scss",
+    },
+    plugins: [sassPlugin({ type: "css", sourceMap: false })],
+    metafile: true,
+  },
   {
     entryPoints: {
       "chat/chat": "chat/chat.ts",

js/chat/_utils.ts

@@ -1,25 +1,66 @@
-@use "highlight_styles" as highlight_styles;
-
 shiny-chat-container {
   --shiny-chat-border: var(--bs-border-width, 1px) solid var(--bs-border-color, #e9ecef);
   --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;
-  padding: 0.25rem;
+  gap: 0;
+  padding: var(--_chat-container-padding);
+  padding-bottom: 0; // Bottom padding is on input element
 
   p:last-child {
     margin-bottom: 0;
   }
+
+  .suggestion,
+  [data-suggestion] {
+    cursor: pointer;
+    color: var(--bs-link-color, #007bc2);
+
+    text-decoration-color: var(--bs-link-color, #007bc2);
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+    text-underline-offset: 4px;
+    text-decoration-thickness: 2px;
+
+    padding: 2px;
+
+    &:hover {
+      text-decoration-style: solid;
+    }
+
+    &::after {
+      content: "\2726"; // diamond/star
+      display: inline-block;
+      margin-inline-start: 0.15em;
+    }
+
+    &.submit,
+    &[data-suggestion-submit=""],
+    &[data-suggestion-submit="true"] {
+      &::after {
+        content: "\21B5"; // return key symbol
+      }
+    }
+  }
 }
 
 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 {
@@ -32,14 +73,32 @@ 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) */
-  .message-content {
+  shiny-markdown-stream {
     align-self: center;
   }
 }
@@ -62,10 +121,14 @@ shiny-chat-message {
 }
 
 shiny-chat-input {
-  margin-top: auto;
+  --_input-padding-top: 0;
+  --_input-padding-bottom: var(--_chat-container-padding, 0.25rem);
+
+  margin-top: calc(-1 * var(--_input-padding-top));
   position: sticky;
-  background-color: var(--bs-body-bg, white);
-  bottom: 0;
+  bottom: calc(-1 * var(--_input-padding-bottom));
+  padding-block: var(--_input-padding-top) var(--_input-padding-bottom);
+
   textarea {
     --bs-border-radius: 26px;
     resize: none;
@@ -77,7 +140,7 @@ shiny-chat-input {
   }
   button {
     position: absolute;
-    bottom: 7px;
+    bottom: calc(6px + var(--_input-padding-bottom));
     right: 8px;
     background-color: transparent;
     color: var(--bs-primary, #007bc2);
@@ -101,53 +164,3 @@ shiny-chat-input {
 .shiny-busy:has(shiny-chat-input[disabled])::after {
   display: none;
 }
-
-/* Code highlighting (for both light and dark mode) */
-@include highlight_styles.atom_one_light;
-[data-bs-theme="dark"] {
-  @include highlight_styles.atom_one_dark;
-}
-
-/*
-  Styling for the code-copy button (inspired by Quarto's code-copy feature)
-*/
-pre:has(.code-copy-button) {
-  position: relative;
-}
-
-.code-copy-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  border: 0;
-  margin-top: 5px;
-  margin-right: 5px;
-  background-color: transparent;
-
-  > .bi {
-    display: flex;
-    gap: 0.25em;
-
-    &::after {
-      content: "";
-      display: block;
-      height: 1rem;
-      width: 1rem;
-      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
-      background-color: var(--bs-body-color, #222);
-    }
-  }
-}
-
-.code-copy-button-checked {
-  > .bi::before {
-    content: "Copied!";
-    font-size: 0.75em;
-    vertical-align: 0.25em;
-  }
-
-  > .bi::after {
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
-    background-color: var(--bs-success, #198754);
-  }
-}