Skip to content

Commit 7ab0225

Browse files
rkaraivanovrkaraivanov
committed
refactor(chat): Cache message renderer and cleaned some templates
1 parent 64b0b4e commit 7ab0225

File tree

2 files changed

+79
-75
lines changed

2 files changed

+79
-75
lines changed

‎src/components/chat/chat.spec.ts‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -290,14 +290,14 @@ describe('Chat', () => {
290290
);
291291

292292
expect(messageContainer).dom.to.equal(
293-
`<div part="message-list" aria-label="Message list" role="group" tabindex="0">
294-
<igc-chat-message id="message-1" part="message-item" role="option">
293+
`<div part="message-list" tabindex="0">
294+
<igc-chat-message id="message-1" part="message-item">
295295
</igc-chat-message>
296-
<igc-chat-message id="message-2" part="message-item" role="option">
296+
<igc-chat-message id="message-2" part="message-item">
297297
</igc-chat-message>
298-
<igc-chat-message id="message-3" part="message-item" role="option">
298+
<igc-chat-message id="message-3" part="message-item">
299299
</igc-chat-message>
300-
<igc-chat-message id="message-4" part="message-item" role="option">
300+
<igc-chat-message id="message-4" part="message-item">
301301
</igc-chat-message>
302302
</div>`,
303303
DIFF_OPTIONS
@@ -733,10 +733,7 @@ describe('Chat', () => {
733733

734734
expect(suggestionsContainer).dom.to.equal(
735735
`<div part="suggestions-container">
736-
<igc-list
737-
aria-label="Suggestions"
738-
role="list"
739-
>
736+
<igc-list>
740737
<igc-list-header part="suggestions-header">
741738
<span>
742739
Suggestions
@@ -751,7 +748,6 @@ describe('Chat', () => {
751748
<slot
752749
name="suggestion"
753750
part="suggestion"
754-
role="listitem"
755751
>
756752
<igc-list-item>
757753
<span slot="start">
@@ -769,7 +765,6 @@ describe('Chat', () => {
769765
<slot
770766
name="suggestion"
771767
part="suggestion"
772-
role="listitem"
773768
>
774769
<igc-list-item>
775770
<span slot="start">
@@ -866,8 +861,8 @@ describe('Chat', () => {
866861

867862
expect(chat.messages.length).to.equal(1);
868863
expect(messageContainer).dom.to.equal(
869-
`<div part="message-list" aria-label="Message list" role="group" tabindex="0">
870-
<igc-chat-message id="message-1" part="message-item" role="option">
864+
`<div part="message-list" tabindex="0">
865+
<igc-chat-message id="message-1" part="message-item">
871866
</igc-chat-message>
872867
<div part="typing-indicator">
873868
<div part="typing-dot">
@@ -1069,11 +1064,9 @@ describe('Chat', () => {
10691064
expect(messageContainer).dom.to.equal(
10701065
`<div
10711066
part="message-list"
1072-
aria-label="Message list"
1073-
role="group"
10741067
tabindex="0"
10751068
>
1076-
<igc-chat-message id="message-1" part="message-item" role="option">
1069+
<igc-chat-message id="message-1" part="message-item">
10771070
</igc-chat-message>
10781071
<span>loading...</span>
10791072
</div>`,

‎src/components/chat/chat.ts‎

Lines changed: 70 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ContextProvider } from '@lit/context';
22
import { html, LitElement, nothing } from 'lit';
33
import { property } from 'lit/decorators.js';
4+
import { cache } from 'lit/directives/cache.js';
45
import { repeat } from 'lit/directives/repeat.js';
56
import { addThemingController } from '../../theming/theming-controller.js';
67
import IgcButtonComponent from '../button/button.js';
@@ -11,6 +12,7 @@ import { registerComponent } from '../common/definitions/register.js';
1112
import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
1213
import type { Constructor } from '../common/mixins/constructor.js';
1314
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
15+
import { isEmpty } from '../common/util.js';
1416
import IgcIconComponent from '../icon/icon.js';
1517
import IgcListComponent from '../list/list.js';
1618
import IgcListHeaderComponent from '../list/list-header.js';
@@ -337,21 +339,14 @@ export default class IgcChatComponent extends EventEmitterMixin<
337339
const messages = this._chatState?.messages ?? [];
338340

339341
return html`
340-
<div
341-
part="message-list"
342-
aria-label="Message list"
343-
role="group"
344-
tabindex="0"
345-
>
342+
<div part="message-list" tabindex="0">
346343
${repeat(
347344
messages,
348345
(message) => message.id,
349346
(message) => {
350-
const messageId = `message-${message.id}`;
351347
return html`
352348
<igc-chat-message
353-
id=${messageId}
354-
role="option"
349+
id=${`message-${message.id}`}
355350
part="message-item"
356351
.message=${message}
357352
exportparts="message-container, message-text, message-attachments, message-actions,
@@ -374,49 +369,57 @@ export default class IgcChatComponent extends EventEmitterMixin<
374369
`;
375370
}
376371

377-
private *renderLoadingTemplate() {
378-
yield html`<div part="typing-indicator">
379-
<div part="typing-dot"></div>
380-
<div part="typing-dot"></div>
381-
<div part="typing-dot"></div>
382-
<div part="typing-dot"></div>
383-
</div>`;
372+
private renderLoadingTemplate() {
373+
return html`
374+
<div part="typing-indicator">
375+
<div part="typing-dot"></div>
376+
<div part="typing-dot"></div>
377+
<div part="typing-dot"></div>
378+
<div part="typing-dot"></div>
379+
</div>
380+
`;
384381
}
385382

386383
private renderSuggestionPrefix() {
387-
return html`<span slot="start">
388-
<igc-icon name="star-icon" collection="material"></igc-icon>
389-
</span>`;
384+
return html`
385+
<span slot="start">
386+
<igc-icon name="star-icon" collection="material"></igc-icon>
387+
</span>
388+
`;
390389
}
391390

392391
private renderSuggestions() {
393392
const hasContent = this._slots.hasAssignedElements('suggestions-header');
394-
return html`<div part="suggestions-container">
395-
<igc-list role="list" aria-label="Suggestions">
396-
<igc-list-header part="suggestions-header">
397-
<span ?hidden=${hasContent}>
398-
${this.resourceStrings.suggestionsHeader}
399-
</span>
400-
<slot name="suggestions-header"></slot>
401-
</igc-list-header>
402-
<slot name="suggestions" part="suggestions">
403-
${this._chatState.options?.suggestions?.map(
404-
(suggestion) => html`
405-
<slot name="suggestion" part="suggestion" role="listitem">
406-
<igc-list-item
407-
@click=${() =>
408-
this._chatState?.handleSuggestionClick(suggestion)}
409-
>
410-
${this.renderSuggestionPrefix()}
411-
<span slot="title">${suggestion}</span>
412-
</igc-list-item>
413-
</slot>
414-
`
415-
)}
416-
</slot>
417-
<slot name="suggestions-actions" part="suggestions-actions"></slot>
418-
</igc-list>
419-
</div>`;
393+
const suggestions = this._chatState.options?.suggestions ?? [];
394+
395+
return html`
396+
<div part="suggestions-container">
397+
<igc-list>
398+
<igc-list-header part="suggestions-header">
399+
<span ?hidden=${hasContent}>
400+
${this.resourceStrings.suggestionsHeader}
401+
</span>
402+
<slot name="suggestions-header"></slot>
403+
</igc-list-header>
404+
<slot name="suggestions" part="suggestions">
405+
${suggestions.map(
406+
(suggestion) => html`
407+
<slot name="suggestion" part="suggestion">
408+
<igc-list-item
409+
@click=${() =>
410+
this._chatState?.handleSuggestionClick(suggestion)}
411+
>
412+
${this.renderSuggestionPrefix()}
413+
<span slot="title">${suggestion}</span>
414+
</igc-list-item>
415+
</slot>
416+
`
417+
)}
418+
</slot>
419+
<slot name="suggestions-actions" part="suggestions-actions"></slot>
420+
</igc-list>
421+
</div>
422+
`;
420423
}
421424

422425
/**
@@ -427,10 +430,20 @@ export default class IgcChatComponent extends EventEmitterMixin<
427430
this._context.setValue(this._chatState, true);
428431
}
429432

433+
private _renderEmptyState() {
434+
return html`
435+
<div part="empty-state">
436+
<slot name="empty-state"></slot>
437+
</div>
438+
`;
439+
}
440+
430441
protected override render() {
431-
const hasSuggestions =
432-
this._chatState.options?.suggestions &&
433-
this._chatState.options.suggestions.length > 0;
442+
const hasMessages = !isEmpty(this.messages);
443+
const suggestions = isEmpty(this._chatState.options?.suggestions ?? [])
444+
? nothing
445+
: this.renderSuggestions();
446+
434447
return html`
435448
<div
436449
part="chat-container"
@@ -466,17 +479,16 @@ export default class IgcChatComponent extends EventEmitterMixin<
466479
"
467480
>
468481
${this.renderHeader()}
482+
469483
<div part="chat-wrapper">
470-
${this.messages.length === 0
471-
? html`<div part="empty-state">
472-
<slot name="empty-state"> </slot>
473-
</div>`
474-
: this.renderMessages()}
475-
${hasSuggestions &&
476-
this._chatState.suggestionsPosition === 'below-messages'
477-
? this.renderSuggestions()
484+
${cache(
485+
hasMessages ? this.renderMessages() : this._renderEmptyState()
486+
)}
487+
${this._chatState.suggestionsPosition === 'below-messages'
488+
? suggestions
478489
: nothing}
479490
</div>
491+
480492
<igc-chat-input
481493
exportparts="
482494
input-container,
@@ -490,9 +502,8 @@ export default class IgcChatComponent extends EventEmitterMixin<
490502
send-button"
491503
>
492504
</igc-chat-input>
493-
${hasSuggestions &&
494-
this._chatState.suggestionsPosition === 'below-input'
495-
? this.renderSuggestions()
505+
${this._chatState.suggestionsPosition === 'below-input'
506+
? suggestions
496507
: nothing}
497508
</div>
498509
`;

0 commit comments

Comments
 (0)