Skip to content

Commit f160851

Browse files
teodosiahteodosiah
committed
feat(chat): expose getters for the default input area elements
1 parent 598a378 commit f160851

File tree

4 files changed

+96
-78
lines changed

4 files changed

+96
-78
lines changed

‎src/components/chat/chat-input.ts‎

Lines changed: 67 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { consume } from '@lit/context';
2-
import { html, LitElement, nothing } from 'lit';
2+
import { html, LitElement, nothing, type TemplateResult } from 'lit';
33
import { query, state } from 'lit/decorators.js';
44
import IgcIconButtonComponent from '../button/icon-button.js';
55
import IgcChipComponent from '../chip/chip.js';
@@ -83,6 +83,67 @@ export default class IgcChatInputComponent extends LitElement {
8383
registerIconFromText('send-message', sendButtonIcon, 'material');
8484
}
8585

86+
public get defaultAttachmentsArea(): TemplateResult {
87+
return html`${this._chatState?.inputAttachments?.map(
88+
(attachment, index) => html`
89+
<div part="attachment-wrapper" role="listitem">
90+
<igc-chip removable @igcRemove=${() => this.removeAttachment(index)}>
91+
<span part="attachment-name">${attachment.name}</span>
92+
</igc-chip>
93+
</div>
94+
`
95+
)} `;
96+
}
97+
98+
public get defaultTextArea(): TemplateResult {
99+
return html` <igc-textarea
100+
part="text-input"
101+
placeholder="Type a message..."
102+
resize="auto"
103+
rows="1"
104+
.value=${this.inputValue}
105+
@input=${this.handleInput}
106+
@keydown=${this.handleKeyDown}
107+
@focus=${this.handleFocus}
108+
@blur=${this.handleBlur}
109+
></igc-textarea>`;
110+
}
111+
112+
public get defaultFileUploadButton(): TemplateResult {
113+
return html`
114+
<igc-file-input
115+
multiple
116+
.accept=${this._chatState?.options?.acceptedFiles}
117+
@igcChange=${this.handleFileUpload}
118+
>
119+
<igc-icon
120+
slot="file-selector-text"
121+
name="attachment"
122+
collection="material"
123+
></igc-icon>
124+
</igc-file-input>
125+
`;
126+
}
127+
128+
public get defaultSendButton(): TemplateResult {
129+
return html` <igc-icon-button
130+
aria-label="Send message"
131+
name="send-message"
132+
collection="material"
133+
variant="contained"
134+
part="send-button"
135+
?disabled=${!this.inputValue.trim() &&
136+
this._chatState?.inputAttachments.length === 0}
137+
@click=${this.sendMessage}
138+
></igc-icon-button>`;
139+
}
140+
141+
protected *renderDefaultFileUploadTemplate() {
142+
yield html`${this._chatState?.options?.disableAttachments
143+
? nothing
144+
: this.defaultFileUploadButton}`;
145+
}
146+
86147
protected override firstUpdated() {
87148
this.setupDragAndDrop();
88149
if (this._chatState) {
@@ -243,43 +304,13 @@ export default class IgcChatInputComponent extends LitElement {
243304
this.requestUpdate();
244305
}
245306

246-
protected *renderDefaultFileUploadTemplate() {
247-
yield html`${this._chatState?.options?.disableAttachments
248-
? nothing
249-
: html`
250-
<igc-file-input
251-
multiple
252-
.accept=${this._chatState?.options?.acceptedFiles}
253-
@igcChange=${this.handleFileUpload}
254-
>
255-
<igc-icon
256-
slot="file-selector-text"
257-
name="attachment"
258-
collection="material"
259-
></igc-icon>
260-
</igc-file-input>
261-
`}`;
262-
}
263-
264-
protected *renderDefaultSendButtonTemplate() {
265-
yield html` <igc-icon-button
266-
aria-label="Send message"
267-
name="send-message"
268-
collection="material"
269-
variant="contained"
270-
part="send-button"
271-
?disabled=${!this.inputValue.trim() &&
272-
this._chatState?.inputAttachments.length === 0}
273-
@click=${this.sendMessage}
274-
></igc-icon-button>`;
275-
}
276-
277307
private renderActionsArea() {
278308
return html`<div part="buttons-container">
279309
${this._chatState?.options?.templates?.textAreaActionsTemplate
280310
? this._chatState?.options?.templates?.textAreaActionsTemplate
281-
: html` ${this.renderDefaultFileUploadTemplate()}
282-
${this.renderDefaultSendButtonTemplate()}`}
311+
: html`
312+
${this.renderDefaultFileUploadTemplate()} ${this.defaultSendButton}
313+
`}
283314
</div>`;
284315
}
285316

@@ -289,18 +320,7 @@ export default class IgcChatInputComponent extends LitElement {
289320
? this._chatState.options.templates.textAreaAttachmentsTemplate(
290321
this._chatState?.inputAttachments
291322
)
292-
: html`${this._chatState?.inputAttachments?.map(
293-
(attachment, index) => html`
294-
<div part="attachment-wrapper" role="listitem">
295-
<igc-chip
296-
removable
297-
@igcRemove=${() => this.removeAttachment(index)}
298-
>
299-
<span part="attachment-name">${attachment.name}</span>
300-
</igc-chip>
301-
</div>
302-
`
303-
)} `}
323+
: this.defaultAttachmentsArea}
304324
</div>`;
305325
}
306326

@@ -314,17 +334,7 @@ export default class IgcChatInputComponent extends LitElement {
314334
? this._chatState.options.templates.textInputTemplate(
315335
this._chatState?.inputValue
316336
)
317-
: html` <igc-textarea
318-
part="text-input"
319-
placeholder="Type a message..."
320-
resize="auto"
321-
rows="1"
322-
.value=${this.inputValue}
323-
@input=${this.handleInput}
324-
@keydown=${this.handleKeyDown}
325-
@focus=${this.handleFocus}
326-
@blur=${this.handleBlur}
327-
></igc-textarea>`}
337+
: this.defaultTextArea}
328338
</div>
329339
${this.renderActionsArea()}
330340
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ describe('Chat', () => {
202202
</slot>
203203
</div>
204204
<div aria-label="Suggestions" part="suggestions-container" role="list">
205-
<slot name="suggestions-header"> </slot>
205+
<slot name="suggestions-header" part="suggestions-header"> </slot>
206206
<slot name="suggestions" part="suggestions">
207207
</slot>
208208
</div>
@@ -433,7 +433,7 @@ describe('Chat', () => {
433433

434434
expect(suggestionsContainer).dom.to.equal(
435435
`<div aria-label="Suggestions" part="suggestions-container" role="list">
436-
<slot name="suggestions-header"> </slot>
436+
<slot name="suggestions-header" part="suggestions-header"> </slot>
437437
<slot name="suggestions" part="suggestions">
438438
<slot name="suggestion" part="suggestion" role="listitem">
439439
<igc-chip>
@@ -713,7 +713,7 @@ describe('Chat', () => {
713713

714714
expect(suggestionsContainer).dom.to.equal(
715715
`<div aria-label="Suggestions" part="suggestions-container" role="list">
716-
<slot name="suggestions-header"> </slot>
716+
<slot name="suggestions-header" part="suggestions-header"> </slot>
717717
<slot name="suggestions" part="suggestions">
718718
<slot name="suggestion" part="suggestion" role="listitem">
719719
<igc-chip>

‎src/components/chat/chat.ts‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ContextProvider } from '@lit/context';
2-
import { html, LitElement } from 'lit';
3-
import { property } from 'lit/decorators.js';
2+
import { html, LitElement, type TemplateResult } from 'lit';
3+
import { property, query } from 'lit/decorators.js';
44
import { addThemingController } from '../../theming/theming-controller.js';
55
import IgcButtonComponent from '../button/button.js';
66
import { chatContext } from '../common/context.js';
@@ -157,6 +157,9 @@ export default class IgcChatComponent extends EventEmitterMixin<
157157
initialValue: this._chatState,
158158
});
159159

160+
@query(IgcChatInputComponent.tagName)
161+
private _chatInput!: IgcChatInputComponent;
162+
160163
constructor() {
161164
super();
162165
addThemingController(this, all);
@@ -214,6 +217,26 @@ export default class IgcChatComponent extends EventEmitterMixin<
214217
return this._chatState.options;
215218
}
216219

220+
/** Returns the default attachments element. */
221+
public get defaultAttachments(): TemplateResult {
222+
return this._chatInput.defaultAttachmentsArea;
223+
}
224+
225+
/** Returns the default textarea element. */
226+
public get defaultTextArea(): TemplateResult {
227+
return this._chatInput.defaultTextArea;
228+
}
229+
230+
/** Returns the default file upload button element. */
231+
public get defaultFileUploadButton(): TemplateResult {
232+
return this._chatInput.defaultFileUploadButton;
233+
}
234+
235+
/** Returns the default send message button element. */
236+
public get defaultSendButton(): TemplateResult {
237+
return this._chatInput.defaultSendButton;
238+
}
239+
217240
@watch('messages')
218241
@watch('draftMessage')
219242
@watch('options')
@@ -239,7 +262,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
239262
role="list"
240263
aria-label="Suggestions"
241264
>
242-
<slot name="suggestions-header"> </slot>
265+
<slot name="suggestions-header" part="suggestions-header"></slot>
243266
<slot name="suggestions" part="suggestions">
244267
${this._chatState.options?.suggestions?.map(
245268
(suggestion) => html`

‎src/components/chat/types.ts‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -103,21 +103,6 @@ export type IgcChatOptions = {
103103
* The ID of the current user. Used to differentiate between incoming and outgoing messages.
104104
*/
105105
currentUserId?: string;
106-
/**
107-
* Whether to hide user avatars in the message list.
108-
* Defaults to `false`.
109-
*/
110-
hideAvatar?: boolean;
111-
/**
112-
* Whether to hide message timestamps.
113-
* Defaults to `false`.
114-
*/
115-
hideTimestamp?: boolean;
116-
/**
117-
* Whether to hide sender usernames in the message list.
118-
* Defaults to `false`.
119-
*/
120-
hideUserName?: boolean;
121106
/**
122107
* If `true`, prevents the chat from automatically scrolling to the latest message.
123108
*/

0 commit comments

Comments
 (0)