Merge branch 'chat-suggestions' into chat-suggestions-submit

Author: gadenbuie

js/chat/chat.ts

@@ -70,9 +70,28 @@ class ChatMessage extends LightElement {
         content-type=${this.content_type}
         ?streaming=${this.streaming}
         auto-scroll
+        .onContentChange=${this.#onContentChange}
+        .onStreamEnd=${this.#makeSuggestionsAccessible}
       ></shiny-markdown-stream>
     `;
   }
+
+  #onContentChange(): void {
+    if (!this.streaming) this.#makeSuggestionsAccessible();
+  }
+
+  #makeSuggestionsAccessible(): void {
+    this.querySelectorAll(".suggestion,[data-suggestion]").forEach((el) => {
+      if (!(el instanceof HTMLElement)) return;
+      if (el.hasAttribute("tabindex")) return;
+
+      el.setAttribute("tabindex", "0");
+      el.setAttribute("role", "button");
+
+      const suggestion = el.dataset.suggestion || el.textContent;
+      el.setAttribute("aria-label", `Use chat suggestion: ${suggestion}`);
+    });
+  }
 }
 
 class ChatUserMessage extends LightElement {
@@ -262,6 +281,7 @@ class ChatContainer extends LightElement {
       this.#onRemoveLoadingMessage
     );
     this.addEventListener("click", this.#onInputSuggestionClick);
+    this.addEventListener("keydown", this.#onInputSuggestionKeydown);
   }
 
   disconnectedCallback(): void {
@@ -283,6 +303,7 @@ class ChatContainer extends LightElement {
       this.#onRemoveLoadingMessage
     );
     this.removeEventListener("click", this.#onInputSuggestionClick);
+    this.removeEventListener("keydown", this.#onInputSuggestionKeydown);
   }
 
   // When user submits input, append it to the chat, and add a loading message
@@ -372,26 +393,41 @@ class ChatContainer extends LightElement {
   }
 
   #onInputSuggestionClick(e: Event): void {
-    const target = e.target;
-    if (!(target instanceof HTMLElement)) return;
+    const { suggestion, submit } = this.#getSuggestion(e.target);
+    if (!suggestion) return;
 
-    const isSuggestion =
-      target.classList.contains("suggestion") ||
-      target.dataset.suggestion !== undefined;
+    e.preventDefault();
+    this.input.setInputValue(suggestion, submit);
+  }
 
-    if (!isSuggestion) return;
+  #onInputSuggestionKeydown(e: KeyboardEvent): void {
+    const isEnter = e.key === "Enter" || e.key === " ";
+    if (!isEnter) return;
+    const { suggestion, submit } = this.#getSuggestion(e.target);
+    if (!suggestion) return;
 
     e.preventDefault();
+    this.input.setInputValue(suggestion, submit);
+  }
 
-    const suggestion = target.dataset.suggestion || target.textContent;
+  #getSuggestion(x: EventTarget | null): {
+    suggestion?: string;
+    submit?: boolean;
+  } {
+    if (!(x instanceof HTMLElement)) return {};
 
-    if (suggestion) {
-      const doSubmit =
-        target.classList.contains("submit") ||
-        ["", "true"].includes(target.dataset.suggestionSubmit || "false");
+    const isSuggestion =
+      x.classList.contains("suggestion") || x.dataset.suggestion !== undefined;
+    if (!isSuggestion) return {};
 
-      this.input.setInputValue(suggestion, doSubmit);
-    }
+    const suggestion = x.dataset.suggestion || x.textContent;
+
+    return {
+      suggestion: suggestion || undefined,
+      submit:
+        x.classList.contains("submit") ||
+        ["", "true"].includes(x.dataset.suggestionSubmit || "false"),
+    };
   }
 
   #onRemoveLoadingMessage(): void {

js/markdown-stream/markdown-stream.ts

@@ -79,6 +79,8 @@ class MarkdownElement extends LightElement {
   streaming = false;
   @property({ type: Boolean, reflect: true, attribute: "auto-scroll" })
   auto_scroll = false;
+  @property({ type: Function }) onContentChange?: () => void;
+  @property({ type: Function }) onStreamEnd?: () => void;
 
   render() {
     return html`${contentToHTML(this.content, this.content_type)}`;
@@ -112,10 +114,29 @@ class MarkdownElement extends LightElement {
       // Possibly scroll to bottom after content has been added
       this.#isContentBeingAdded = false;
       this.#maybeScrollToBottom();
+
+      if (this.onContentChange) {
+        try {
+          this.onContentChange();
+        } catch (error) {
+          console.warn("Failed to call onContentUpdate callback:", error);
+        }
+      }
     }
 
     if (changedProperties.has("streaming")) {
-      this.streaming ? this.#appendStreamingDot() : this.#removeStreamingDot();
+      if (this.streaming) {
+        this.#appendStreamingDot();
+      } else {
+        this.#removeStreamingDot();
+        if (this.onStreamEnd) {
+          try {
+            this.onStreamEnd();
+          } catch (error) {
+            console.warn("Failed to call onStreamEnd callback:", error);
+          }
+        }
+      }
     }
   }