Add chat input suggestions

Author: cpsievert

js/chat/chat.scss

@@ -12,6 +12,13 @@ shiny-chat-container {
   p:last-child {
     margin-bottom: 0;
   }
+
+  .chat-input-suggestion, [data-input-suggestion] {
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    text-decoration-color: var(--bs-link-color, #007bc2);
+    cursor: pointer;
+  }
 }
 
 shiny-chat-messages {

js/chat/chat.ts

@@ -227,6 +227,7 @@ class ChatContainer extends LightElement {
       "shiny-chat-remove-loading-message",
       this.#onRemoveLoadingMessage
     );
+    this.addEventListener("click", this.#onInputSuggestionClick);
   }
 
   disconnectedCallback(): void {
@@ -247,6 +248,7 @@ class ChatContainer extends LightElement {
       "shiny-chat-remove-loading-message",
       this.#onRemoveLoadingMessage
     );
+    this.removeEventListener("click", this.#onInputSuggestionClick);
   }
 
   // When user submits input, append it to the chat, and add a loading message
@@ -332,6 +334,24 @@ class ChatContainer extends LightElement {
     }
   }
 
+  #onInputSuggestionClick(e: Event): void {
+    const target = e.target;
+    if (!(target instanceof HTMLElement)) return;
+
+    const isSuggestion =
+      target.classList.contains("chat-input-suggestion") ||
+      target.dataset.inputSuggestion !== undefined;
+
+    if (!isSuggestion) return;
+
+    e.preventDefault();
+
+    const suggestion = target.dataset.inputSuggestion || target.textContent;
+    if (suggestion) {
+      this.input.setInputValue(suggestion);
+    }
+  }
+
   #onRemoveLoadingMessage(): void {
     this.#removeLoadingMessage();
     this.#finalizeMessage();