fix: Strip significant whitespace from empty template containers

Author: rkaraivanov

src/components/chat/chat-input.ts

@@ -11,7 +11,7 @@ import { chatContext, chatUserInputContext } from '../common/context.js';
 import { enterKey } from '../common/controllers/key-bindings.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { bindIf, hasFiles, isEmpty } from '../common/util.js';
+import { bindIf, hasFiles, isEmpty, trimmedHtml } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcTextareaComponent from '../textarea/textarea.js';
 import type { ChatState } from './chat-state.js';
@@ -333,7 +333,7 @@ export default class IgcChatInputComponent extends LitElement {
   private _renderActionsArea() {
     const ctx: ChatRenderContext = { instance: this._state.host };
 
-    return html`
+    return trimmedHtml`
       <div part="file-upload">
         ${this._getRenderer('fileUploadButton')(ctx)}
       </div>

src/components/chat/chat-message.ts

@@ -8,7 +8,7 @@ import IgcIconButtonComponent from '../button/icon-button.js';
 import { chatContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { isEmpty } from '../common/util.js';
+import { isEmpty, trimmedHtml } from '../common/util.js';
 import type { ChatState } from './chat-state.js';
 import IgcMessageAttachmentsComponent from './message-attachments.js';
 import { styles } from './themes/message.base.css.js';
@@ -234,7 +234,7 @@ export default class IgcChatMessageComponent extends LitElement {
       instance: this._state.host,
     };
 
-    return html`
+    return trimmedHtml`
       <div part="message-header">
         ${until(this._getRenderer('messageHeader')(ctx))}
       </div>
@@ -271,7 +271,9 @@ export default class IgcChatMessageComponent extends LitElement {
                 exportparts="attachment: message-attachment, attachments-container: message-attachments-container"
               >
                 ${cache(
-                  messageRenderer ? messageRenderer(ctx) : this._renderMessage()
+                  messageRenderer
+                    ? until(messageRenderer(ctx))
+                    : this._renderMessage()
                 )}
               </div>
             `

src/components/chat/chat.ts

@@ -11,7 +11,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { isEmpty, last } from '../common/util.js';
+import { isEmpty } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcListComponent from '../list/list.js';
 import IgcToastComponent from '../toast/toast.js';
@@ -280,10 +280,8 @@ export default class IgcChatComponent extends EventEmitterMixin<
     this._input?.focusInput();
   }
 
-  // REVIEW: Maybe accept an `IgcMessage` type as well?
   /**
    * Scrolls the view to a specific message by id.
-   * @param messageId - The id of the message to scroll to
    */
   public scrollToMessage(messageId: string): void {
     if (!isEmpty(this.messages)) {
@@ -292,36 +290,6 @@ export default class IgcChatComponent extends EventEmitterMixin<
     }
   }
 
-  // REVIEW
-  public addMessage(message: Partial<IgcChatMessage>): IgcChatMessage {
-    this._state.addMessage(message);
-    return last(this.messages);
-  }
-
-  // REVIEW
-  public updateMessage(
-    message: IgcChatMessage,
-    data: Partial<IgcChatMessage>,
-    scrollIntoView = false
-  ) {
-    Object.assign(message, data);
-    const messageElement =
-      this.renderRoot.querySelector<IgcChatMessageComponent>(
-        `#message-${message.id}`
-      );
-
-    if (messageElement) {
-      messageElement.requestUpdate();
-      if (scrollIntoView) {
-        messageElement.updateComplete.then(() =>
-          messageElement.scrollIntoView({ block: 'end', inline: 'end' })
-        );
-      }
-    } else {
-      this.requestUpdate('messages');
-    }
-  }
-
   protected override updated(properties: PropertyValues<this>): void {
     if (
       (properties.has('messages') ||

src/components/chat/message-attachments.ts

@@ -9,6 +9,7 @@ import IgcIconButtonComponent from '../button/icon-button.js';
 import { chatContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
+import { trimmedHtml } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import type { ChatState } from './chat-state.js';
 import { all } from './themes/attachments.js';
@@ -188,7 +189,7 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
               ${repeat(
                 attachments,
                 (attachment) => attachment.id,
-                (attachment) => html`
+                (attachment) => trimmedHtml`
                   <div part="${partMap(attachmentParts)}">
                     ${until(
                       this._getRenderer('attachment')({

src/components/common/util.ts

@@ -1,4 +1,4 @@
-import { isServer, nothing } from 'lit';
+import { html, isServer, nothing, type TemplateResult } from 'lit';
 import type IgcFileInputComponent from '../file-input/file-input.js';
 
 export const asPercent = (part: number, whole: number) => (part / whole) * 100;
@@ -627,3 +627,21 @@ export function hasFiles(
 ): boolean {
   return input.files != null && input.files.length > 0;
 }
+
+const trimmedCache = new WeakMap<TemplateStringsArray, TemplateStringsArray>();
+
+/** @internal */
+export function trimmedHtml(
+  strings: TemplateStringsArray,
+  ...values: unknown[]
+): TemplateResult {
+  if (!trimmedCache.has(strings)) {
+    const trimmedStrings = strings.map((s) => s.trim().replaceAll('\n', ''));
+    trimmedCache.set(
+      strings,
+      Object.assign([...trimmedStrings], { raw: [...strings.raw] })
+    );
+  }
+
+  return html(trimmedCache.get(strings)!, ...values);
+}

stories/chat.stories.ts

@@ -207,7 +207,10 @@ function handleMessageSend(event: CustomEvent<IgcChatMessage>): void {
 
   isResponseSent = false;
   setTimeout(async () => {
-    chat.addMessage({ sender: 'bot', attachments });
+    chat.messages = [
+      ...chat.messages,
+      { id: crypto.randomUUID(), text: '', sender: 'bot', attachments },
+    ];
 
     await showResponse(chat, generateAIResponse(message.text).split(' '));
 
@@ -223,11 +226,8 @@ async function showResponse(chat: IgcChatComponent, responseParts: string[]) {
 
   for (const part of responseParts) {
     await new Promise((resolve) => requestAnimationFrame(resolve));
-    chat.updateMessage(
-      lastMessage,
-      { text: `${lastMessage.text} ${part}` },
-      true
-    );
+    lastMessage.text = `${lastMessage.text} ${part}`;
+    chat.messages = [...chat.messages];
   }
 }