Add markdown support for assist messages (#27957)

* Add markdown support for assist messages

* Improve styles

* Refactor code

* Fix white space

* Move code

* Make css compiler happy

* Wait for render to complete before scrolling

* Revert changes

* Refactor ha-markdown to render in chunks

* Refactor and adapt scroll logic

* Fix imports

* Update styles

* Render into renderRoot

* Fix query selector

* Fix broken image style

* Implement PR feedback

* Remove unnecessary css

* Fix cache issue

* Apply suggestion from @MindFreeze

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

Author: krsilas

src/components/ha-assist-chat.ts

@@ -17,6 +17,7 @@ import type { HomeAssistant } from "../types";
 import { AudioRecorder } from "../util/audio-recorder";
 import { documentationUrl } from "../util/documentation-url";
 import "./ha-alert";
+import "./ha-markdown";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
@@ -40,7 +41,11 @@ export class HaAssistChat extends LitElement {
 
   @query("#message-input") private _messageInput!: HaTextField;
 
-  @query("#scroll-container") private _scrollContainer!: HTMLDivElement;
+  @query(".message:last-child")
+  private _lastChatMessage!: LitElement;
+
+  @query(".message:last-child img:last-of-type")
+  private _lastChatMessageImage: HTMLImageElement | undefined;
 
   @state() private _conversation: AssistMessage[] = [];
 
@@ -92,10 +97,7 @@ export class HaAssistChat extends LitElement {
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._audioRecorder?.close();
-    this._audioRecorder = undefined;
     this._unloadAudio();
-    this._conversation = [];
-    this._conversationId = null;
   }
 
   protected render(): TemplateResult {
@@ -112,7 +114,7 @@ export class HaAssistChat extends LitElement {
     const supportsSTT = this.pipeline?.stt_engine && !this.disableSpeech;
 
     return html`
-      <div class="messages" id="scroll-container">
+      <div class="messages">
         ${controlHA
           ? nothing
           : html`
@@ -124,11 +126,18 @@ export class HaAssistChat extends LitElement {
             `}
         <div class="spacer"></div>
         ${this._conversation!.map(
-          // New lines matter for messages
-          // prettier-ignore
           (message) => html`
-                <div class="message ${classMap({ error: !!message.error, [message.who]: true })}">${message.text}</div>
-              `
+            <ha-markdown
+              class="message ${classMap({
+                error: !!message.error,
+                [message.who]: true,
+              })}"
+              breaks
+              cache
+              .content=${message.text}
+            >
+            </ha-markdown>
+          `
         )}
       </div>
       <div class="input" slot="primaryAction">
@@ -189,12 +198,28 @@ export class HaAssistChat extends LitElement {
     `;
   }
 
-  private _scrollMessagesBottom() {
-    const scrollContainer = this._scrollContainer;
-    if (!scrollContainer) {
-      return;
+  private async _scrollMessagesBottom() {
+    const lastChatMessage = this._lastChatMessage;
+    if (!lastChatMessage.hasUpdated) {
+      await lastChatMessage.updateComplete;
+    }
+    if (
+      this._lastChatMessageImage &&
+      !this._lastChatMessageImage.naturalHeight
+    ) {
+      try {
+        await this._lastChatMessageImage.decode();
+      } catch (err: any) {
+        // eslint-disable-next-line no-console
+        console.warn("Failed to decode image:", err);
+      }
+    }
+    const isLastMessageFullyVisible =
+      lastChatMessage.getBoundingClientRect().y <
+      this.getBoundingClientRect().top + 24;
+    if (!isLastMessageFullyVisible) {
+      lastChatMessage.scrollIntoView({ behavior: "smooth", block: "start" });
     }
-    scrollContainer.scrollTo(0, scrollContainer.scrollHeight);
   }
 
   private _handleKeyUp(ev: KeyboardEvent) {
@@ -586,42 +611,31 @@ export class HaAssistChat extends LitElement {
       flex: 1;
     }
     .message {
-      white-space: pre-line;
       font-size: var(--ha-font-size-l);
       clear: both;
+      max-width: -webkit-fill-available;
+      overflow-wrap: break-word;
+      scroll-margin-top: 24px;
       margin: 8px 0;
       padding: 8px;
       border-radius: var(--ha-border-radius-xl);
     }
-    .message:last-child {
-      margin-bottom: 0;
-    }
-
     @media all and (max-width: 450px), all and (max-height: 500px) {
       .message {
         font-size: var(--ha-font-size-l);
       }
     }
-
-    .message p {
-      margin: 0;
-    }
-    .message p:not(:last-child) {
-      margin-bottom: 8px;
-    }
-
     .message.user {
       margin-left: 24px;
       margin-inline-start: 24px;
       margin-inline-end: initial;
       align-self: flex-end;
-      text-align: right;
       border-bottom-right-radius: 0px;
+      --markdown-link-color: var(--text-primary-color);
       background-color: var(--chat-background-color-user, var(--primary-color));
       color: var(--text-primary-color);
       direction: var(--direction);
     }
-
     .message.hass {
       margin-right: 24px;
       margin-inline-end: 24px;
@@ -636,20 +650,21 @@ export class HaAssistChat extends LitElement {
       color: var(--primary-text-color);
       direction: var(--direction);
     }
-
-    .message.user a {
-      color: var(--text-primary-color);
-    }
-
-    .message.hass a {
-      color: var(--primary-text-color);
-    }
-
     .message.error {
       background-color: var(--error-color);
       color: var(--text-primary-color);
     }
-
+    ha-markdown {
+      --markdown-image-border-radius: calc(var(--ha-border-radius-xl) / 2);
+      --markdown-table-border-color: var(--divider-color);
+      --markdown-code-background-color: var(--primary-background-color);
+      --markdown-code-text-color: var(--primary-text-color);
+      &:not(:has(ha-markdown-element)) {
+        min-height: 1lh;
+        min-width: 1lh;
+        flex-shrink: 0;
+      }
+    }
     .bouncer {
       width: 48px;
       height: 48px;

src/components/ha-markdown-element.ts

@@ -1,11 +1,15 @@
 import type { PropertyValues } from "lit";
-import { ReactiveElement } from "lit";
+import { ReactiveElement, render, html } from "lit";
 import { customElement, property } from "lit/decorators";
+// eslint-disable-next-line import/extensions
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import hash from "object-hash";
 import { fireEvent } from "../common/dom/fire_event";
 import { renderMarkdown } from "../resources/render-markdown";
 import { CacheManager } from "../util/cache-manager";
 
+const h = (template: ReturnType<typeof unsafeHTML>) => html`${template}`;
+
 const markdownCache = new CacheManager<string>(1000);
 
 const _gitHubMarkdownAlerts = {
@@ -48,18 +52,26 @@ class HaMarkdownElement extends ReactiveElement {
     return this;
   }
 
+  private _renderPromise: ReturnType<typeof this._render> = Promise.resolve();
+
   protected update(changedProps) {
     super.update(changedProps);
     if (this.content !== undefined) {
-      this._render();
+      this._renderPromise = this._render();
     }
   }
 
+  protected async getUpdateComplete(): Promise<boolean> {
+    await super.getUpdateComplete();
+    await this._renderPromise;
+    return true;
+  }
+
   protected willUpdate(_changedProperties: PropertyValues): void {
     if (!this.innerHTML && this.cache) {
       const key = this._computeCacheKey();
       if (markdownCache.has(key)) {
-        this.innerHTML = markdownCache.get(key)!;
+        render(markdownCache.get(key)!, this.renderRoot);
         this._resize();
       }
     }
@@ -75,7 +87,7 @@ class HaMarkdownElement extends ReactiveElement {
   }
 
   private async _render() {
-    this.innerHTML = await renderMarkdown(
+    const elements = await renderMarkdown(
       String(this.content),
       {
         breaks: this.breaks,
@@ -87,6 +99,11 @@ class HaMarkdownElement extends ReactiveElement {
       }
     );
 
+    render(
+      elements.map((e) => h(unsafeHTML(e))),
+      this.renderRoot
+    );
+
     this._resize();
 
     const walker = document.createTreeWalker(

src/components/ha-markdown.ts

@@ -1,5 +1,12 @@
-import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
-import { customElement, property } from "lit/decorators";
+import {
+  css,
+  html,
+  LitElement,
+  nothing,
+  type ReactiveElement,
+  type CSSResultGroup,
+} from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "./ha-markdown-element";
 
 @customElement("ha-markdown")
@@ -18,6 +25,14 @@ export class HaMarkdown extends LitElement {
 
   @property({ type: Boolean }) public cache = false;
 
+  @query("ha-markdown-element") private _markdownElement!: ReactiveElement;
+
+  protected async getUpdateComplete() {
+    const result = await super.getUpdateComplete();
+    await this._markdownElement.updateComplete;
+    return result;
+  }
+
   protected render() {
     if (!this.content) {
       return nothing;
@@ -53,19 +68,46 @@ export class HaMarkdown extends LitElement {
       margin: var(--ha-space-1) 0;
     }
     a {
-      color: var(--primary-color);
+      color: var(--markdown-link-color, var(--primary-color));
     }
     img {
+      background-color: rgba(10, 10, 10, 0.15);
+      border-radius: var(--markdown-image-border-radius);
       max-width: 100%;
+      min-height: 2lh;
+      height: auto;
+      width: auto;
+      text-indent: 4px;
+      transition: height 0.2s ease-in-out;
+    }
+    p:first-child > img:first-child {
+      vertical-align: top;
+    }
+    p:first-child > img:last-child {
+      vertical-align: top;
+    }
+    ol,
+    ul {
+      list-style-position: inside;
+      padding-inline-start: 0;
+    }
+    li {
+      &:has(input[type="checkbox"]) {
+        list-style: none;
+        & > input[type="checkbox"] {
+          margin-left: 0;
+        }
+      }
+    }
+    svg {
+      background-color: var(--markdown-svg-background-color, none);
+      color: var(--markdown-svg-color, none);
     }
     code,
     pre {
       background-color: var(--markdown-code-background-color, none);
       border-radius: var(--ha-border-radius-sm);
-    }
-    svg {
-      background-color: var(--markdown-svg-background-color, none);
-      color: var(--markdown-svg-color, none);
+      color: var(--markdown-code-text-color, inherit);
     }
     code {
       font-size: var(--ha-font-size-s);
@@ -97,6 +139,24 @@ export class HaMarkdown extends LitElement {
       border-bottom: none;
       margin: var(--ha-space-4) 0;
     }
+    table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+    }
+    th {
+      text-align: start;
+    }
+    td,
+    th {
+      border: 1px solid var(--markdown-table-border-color, transparent);
+      padding: 0.25em 0.5em;
+    }
+    blockquote {
+      border-left: 4px solid var(--divider-color);
+      margin-inline: 0;
+      padding-inline: 1em;
+    }
   ` as CSSResultGroup;
 }