refactor: Removed default renderers from template context

Author: rkaraivanov

src/components/chat/chat-input.ts

@@ -310,10 +310,7 @@ export default class IgcChatInputComponent extends LitElement {
   }
 
   private _renderActionsArea() {
-    const ctx: ChatRendererContext = {
-      defaults: this._defaults,
-      instance: this._state.host,
-    };
+    const ctx: ChatRendererContext = { instance: this._state.host };
 
     return html`
       ${this._getRenderer('fileUploadButton')(ctx)}
@@ -322,10 +319,7 @@ export default class IgcChatInputComponent extends LitElement {
   }
 
   protected override render() {
-    const ctx: ChatRendererContext = {
-      defaults: this._defaults,
-      instance: this._state.host,
-    };
+    const ctx: ChatRendererContext = { instance: this._state.host };
 
     const inputCtx: InputRendererContext = {
       ...ctx,

src/components/chat/chat-message.ts

@@ -208,7 +208,6 @@ export default class IgcChatMessageComponent extends LitElement {
   protected override render() {
     const ctx: MessageRendererContext = {
       message: this.message!,
-      defaults: this._defaults,
       instance: this._state.host,
     };
 

src/components/chat/chat.spec.ts

@@ -5,7 +5,7 @@ import {
   fixture,
   nextFrame,
 } from '@open-wc/testing';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { type SinonFakeTimers, spy, useFakeTimers } from 'sinon';
 import type IgcIconButtonComponent from '../button/icon-button.js';
 import {
@@ -26,6 +26,7 @@ import {
 import { simulateFileUpload } from '../file-input/file-input.spec.js';
 import IgcInputComponent from '../input/input.js';
 import IgcChatComponent from './chat.js';
+import type { IgcMessage, IgcMessageAttachment } from './types.js';
 
 describe('Chat', () => {
   before(() => {
@@ -43,18 +44,22 @@ describe('Chat', () => {
   };
 
   const messageTemplate = (msg: any) => {
-    return html`<div>
-      <h5>${msg.sender === 'user' ? 'You' : 'Bot'}:</h5>
-      <p>${msg.text}</p>
-    </div> `;
+    return html`
+      <div>
+        <h5>${msg.sender === 'user' ? 'You' : 'Bot'}:</h5>
+        <p>${msg.text}</p>
+      </div>
+    `;
   };
 
-  const messageActionsTemplate = (msg: any) => {
+  const messageActionsTemplate = (msg: IgcMessage) => {
     return msg.sender !== 'user' && msg.text.trim()
-      ? html`<div style="float: right">
-          <igc-button name="regenerate" variant="flat">...</igc-button>
-        </div> `
-      : html``;
+      ? html`
+          <div style="float: right">
+            <igc-button name="regenerate" variant="flat">...</igc-button>
+          </div>
+        `
+      : nothing;
   };
 
   const typingIndicatorTemplate = html`<span>loading...</span>`;
@@ -68,51 +73,51 @@ describe('Chat', () => {
   };
 
   const attachmentContentTemplate = (attachment: any) => {
-    return html`<p>
-      This is a template rendered as content of ${attachment.name}
-    </p>`;
+    return html`
+      <p>This is a template rendered as content of ${attachment.name}</p>
+    `;
   };
 
-  const textInputTemplate = (text: string) =>
-    html`<igc-input
-      placeholder="Type text here..."
-      .value=${text}
-    ></igc-input>`;
+  const textInputTemplate = (text: string) => html`
+    <igc-input placeholder="Type text here..." .value=${text}></igc-input>
+  `;
 
-  const textAreaActionsTemplate = (ctx: any) =>
-    html`<div>
-      ${ctx.defaults.fileUploadButton(ctx)}
+  const textAreaActionsTemplate = () => html`
+    <div>
       <igc-button>Upload</igc-button>
       <igc-button>Send</igc-button>
-    </div>`;
-
-  const textAreaAttachmentsTemplate = (attachments: any[]) => {
-    return html`<div>
-      ${attachments.map(
-        (attachment) =>
-          html`<a
-            href=${attachment.file
-              ? URL.createObjectURL(attachment.file)
-              : attachment.url}
-            target="_blank"
-            >${attachment.name}</a
-          >`
-      )}
-    </div>`;
+    </div>
+  `;
+
+  const textAreaAttachmentsTemplate = (attachments: IgcMessageAttachment[]) => {
+    return html`
+      <div>
+        ${attachments.map(
+          (attachment) => html`
+            <a
+              href=${attachment.file
+                ? URL.createObjectURL(attachment.file)
+                : (attachment.url ?? '')}
+              target="_blank"
+            >
+              ${attachment.name}
+            </a>
+          `
+        )}
+      </div>
+    `;
   };
 
-  const messages: any[] = [
+  const messages: IgcMessage[] = [
     {
       id: '1',
       text: 'Hello! How can I help you today?',
       sender: 'bot',
-      timestamp: new Date(Date.now() - 3600000),
     },
     {
       id: '2',
       text: 'Hello!',
       sender: 'user',
-      timestamp: new Date(Date.now() - 3500000),
       attachments: [
         {
           id: 'img1',
@@ -126,7 +131,6 @@ describe('Chat', () => {
       id: '3',
       text: 'Thank you!',
       sender: 'bot',
-      timestamp: new Date(Date.now() - 3400000),
       attachments: [
         {
           id: 'file1',
@@ -140,7 +144,6 @@ describe('Chat', () => {
       id: '4',
       text: 'Thank you too!',
       sender: 'user',
-      timestamp: new Date(Date.now() - 3300000),
     },
   ];
 
@@ -333,7 +336,6 @@ describe('Chat', () => {
           id: '1',
           text: '<script>alert("XSS")</script> Hello!',
           sender: 'bot',
-          timestamp: new Date(Date.now() - 3600000),
         },
       ];
       chat = await fixture<IgcChatComponent>(
@@ -1176,7 +1178,7 @@ describe('Chat', () => {
       chat.options = {
         renderers: {
           input: (ctx) => textInputTemplate(ctx.value),
-          inputActions: (ctx) => textAreaActionsTemplate(ctx),
+          inputActions: () => textAreaActionsTemplate(),
           inputAttachments: (ctx) =>
             textAreaAttachmentsTemplate(ctx.attachments),
         },
@@ -1198,25 +1200,6 @@ describe('Chat', () => {
             </div>
             <div part="buttons-container">
               <div>
-                <label
-                  for="input_attachments"
-                  part="upload-button"
-                >
-                  <igc-icon-button
-                    aria-label="Attach files"
-                    name="attach_file"
-                    type="button"
-                    variant="flat"
-                  >
-                  </igc-icon-button>
-                  <input
-                    id="input_attachments"
-                    aria-label="Upload button"
-                    multiple=""
-                    name="input_attachments"
-                    type="file"
-                  >
-                </label>
                 <igc-button type="button" variant="contained">Upload</igc-button>
                 <igc-button type="button" variant="contained">Send</igc-button>
               </div>
@@ -1631,7 +1614,7 @@ describe('Chat', () => {
 
       simulateClick(attachmentHeader);
       expect(eventSpy).calledWith('igcAttachmentClick', {
-        detail: { ...messages[1].attachments[0] },
+        detail: { ...messages[1].attachments?.at(0) },
       });
     });
 

src/components/chat/chat.ts

@@ -382,10 +382,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
   private _renderSuggestions() {
     const hasContent = this._slots.hasAssignedElements('suggestions-header');
     const suggestions = this._state.options?.suggestions ?? [];
-    const ctx = {
-      defaults: this._defaults,
-      instance: this,
-    };
+    const ctx = { instance: this };
 
     return html`
       <div part="suggestions-container">

src/components/chat/extras/markdown-renderer.ts

@@ -69,7 +69,11 @@ export async function createMarkdownRenderer(
     markdown.use(
       markedShiki({
         highlight(code, lang, _) {
-          return highlighter.codeToHtml(code, { lang, themes });
+          try {
+            return highlighter.codeToHtml(code, { lang, themes });
+          } catch {
+            return `<pre><code>${sanitizer(code)}</code></pre>`;
+          }
         },
       })
     );

src/components/chat/message-attachments.ts

@@ -155,7 +155,6 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
     const ctx: AttachmentRendererContext = {
       attachment,
       message: this.message!,
-      defaults: this._defaults,
       instance: this._state.host,
     };
 
@@ -195,7 +194,6 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
                     this._getRenderer('attachment')({
                       attachment,
                       message: this.message!,
-                      defaults: this._defaults,
                       instance: this._state.host,
                     })
                   )}

src/components/chat/types.ts

@@ -150,7 +150,6 @@ export type ChatRenderers = {
 export type ChatTemplateRenderer<T> = (ctx: T) => unknown;
 
 export interface ChatRendererContext {
-  defaults: ChatRenderers;
   instance: IgcChatComponent;
 }