Go with a simpler CSS class / data-attribute

Author: cpsievert

CHANGELOG.md

@@ -13,8 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * 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 `.chat-input-suggestion` CSS class to an HTML element (e.g., `<span class="chat-input-suggestion">A suggestion</span>`)
-  * Add a `data-input-suggestion` attribute to an HTML element, and set the value to the input suggestion text (e.g., `<span data-input-suggestion="Suggestion value">Suggestion link</span>`)
+  * 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>`)
 
 * 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)
 

js/chat/chat.scss

@@ -13,7 +13,8 @@ shiny-chat-container {
     margin-bottom: 0;
   }
 
-  .chat-input-suggestion, [data-input-suggestion] {
+  .suggestion,
+  [data-suggestion] {
     text-decoration: underline;
     text-decoration-style: dotted;
     text-decoration-color: var(--bs-link-color, #007bc2);

js/chat/chat.ts

@@ -339,14 +339,14 @@ class ChatContainer extends LightElement {
     if (!(target instanceof HTMLElement)) return;
 
     const isSuggestion =
-      target.classList.contains("chat-input-suggestion") ||
-      target.dataset.inputSuggestion !== undefined;
+      target.classList.contains("suggestion") ||
+      target.dataset.suggestion !== undefined;
 
     if (!isSuggestion) return;
 
     e.preventDefault();
 
-    const suggestion = target.dataset.inputSuggestion || target.textContent;
+    const suggestion = target.dataset.suggestion || target.textContent;
     if (suggestion) {
       this.input.setInputValue(suggestion);
     }

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

@@ -2,9 +2,9 @@
 
 welcome = ui.HTML(
     """
-Here is the <span class='chat-input-suggestion'>1st input suggestion</span>.
-And here is a <span data-input-suggestion='The actual suggestion'>2nd suggestion</span>.
-Finally, a <img data-input-suggestion='A 3rd, image-based, suggestion' src='shiny-hex.svg' height="50px" alt='Shiny logo'> image suggestion.
+Here is the <span class='suggestion'>1st input suggestion</span>.
+And here is a <span data-suggestion='The actual suggestion'>2nd suggestion</span>.
+Finally, a <img data-suggestion='A 3rd, image-based, suggestion' src='shiny-hex.svg' height="50px" alt='Shiny logo'> image suggestion.
 """
 )