Skip to content

Commit 212711b

Browse files
teodosiahteodosiah
committed
refactor(chat): change action button and attachments places in the input area
1 parent 6839f7d commit 212711b

File tree

5 files changed

+69
-78
lines changed

5 files changed

+69
-78
lines changed

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

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -237,26 +237,25 @@ export default class IgcChatInputComponent extends LitElement {
237237
`}`;
238238
}
239239

240-
private renderFileUploadArea() {
241-
return html` ${this._chatState?.options?.templates?.fileUploadTemplate
242-
? this._chatState?.options?.templates?.fileUploadTemplate
243-
: this.renderDefaultFileUploadTemplate()}`;
240+
protected *renderDefaultSendButtonTemplate() {
241+
yield html` <igc-icon-button
242+
aria-label="Send message"
243+
name="send-message"
244+
collection="material"
245+
variant="contained"
246+
class="small"
247+
?disabled=${!this.inputValue.trim() &&
248+
this._chatState?.inputAttachments.length === 0}
249+
@click=${this.sendMessage}
250+
></igc-icon-button>`;
244251
}
245252

246253
private renderActionsArea() {
247254
return html`<div class="buttons-container">
248255
${this._chatState?.options?.templates?.textAreaActionsTemplate
249256
? this._chatState?.options?.templates?.textAreaActionsTemplate
250-
: html` <igc-icon-button
251-
aria-label="Send message"
252-
name="send-message"
253-
collection="material"
254-
variant="contained"
255-
class="small"
256-
?disabled=${!this.inputValue.trim() &&
257-
this._chatState?.inputAttachments.length === 0}
258-
@click=${this.sendMessage}
259-
></igc-icon-button>`}
257+
: html` ${this.renderDefaultFileUploadTemplate()}
258+
${this.renderDefaultSendButtonTemplate()}`}
260259
</div>`;
261260
}
262261

@@ -284,7 +283,7 @@ export default class IgcChatInputComponent extends LitElement {
284283
protected override render() {
285284
return html`
286285
<div class="input-container ${this.dragClass}">
287-
${this.renderFileUploadArea()}
286+
${this.renderAttachmentsArea()}
288287
289288
<div class="input-wrapper">
290289
${this._chatState?.options?.templates?.textInputTemplate
@@ -303,10 +302,8 @@ export default class IgcChatInputComponent extends LitElement {
303302
@blur=${this.handleBlur}
304303
></igc-textarea>`}
305304
</div>
306-
307305
${this.renderActionsArea()}
308306
</div>
309-
${this.renderAttachmentsArea()}
310307
`;
311308
}
312309
}

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

Lines changed: 52 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,10 @@ describe('Chat', () => {
8080
.value=${text}
8181
></igc-input>`;
8282

83-
const fileUploadTemplate = html`<igc-button>Upload</igc-button>`;
84-
85-
const textAreaActionsTemplate = html`<igc-button>Send</igc-button>`;
83+
const textAreaActionsTemplate = html`<div>
84+
<igc-button>Upload</igc-button>
85+
<igc-button>Send</igc-button>
86+
</div>`;
8687

8788
const textAreaAttachmentsTemplate = (attachments: any[]) => {
8889
return html`<div>
@@ -194,9 +195,6 @@ describe('Chat', () => {
194195
</slot>
195196
</div>
196197
<slot class="actions" name="actions">
197-
<igc-button type="button" variant="flat">
198-
⋯
199-
</igc-button>
200198
</slot>
201199
</div>
202200
<div class="empty-state">
@@ -216,14 +214,8 @@ describe('Chat', () => {
216214

217215
expect(inputArea).shadowDom.to.equal(
218216
`<div class="input-container">
219-
<igc-file-input multiple="">
220-
<igc-icon
221-
collection="material"
222-
name="attachment"
223-
slot="file-selector-text"
224-
>
225-
</igc-icon>
226-
</igc-file-input>
217+
<div aria-label="Attachments" role="list">
218+
</div>
227219
<div class="input-wrapper">
228220
<igc-textarea
229221
class="text-input"
@@ -234,6 +226,14 @@ describe('Chat', () => {
234226
</igc-textarea>
235227
</div>
236228
<div class="buttons-container">
229+
<igc-file-input multiple="">
230+
<igc-icon
231+
collection="material"
232+
name="attachment"
233+
slot="file-selector-text"
234+
>
235+
</igc-icon>
236+
</igc-file-input>
237237
<igc-icon-button
238238
aria-label="Send message"
239239
class="small"
@@ -245,8 +245,6 @@ describe('Chat', () => {
245245
>
246246
</igc-icon-button>
247247
</div>
248-
</div>
249-
<div aria-label="Attachments" role="list">
250248
</div>`
251249
);
252250
});
@@ -416,9 +414,6 @@ describe('Chat', () => {
416414
</slot>
417415
</div>
418416
<slot class="actions" name="actions">
419-
<igc-button type="button" variant="flat">
420-
⋯
421-
</igc-button>
422417
</slot>
423418
</div>`
424419
);
@@ -517,6 +512,8 @@ describe('Chat', () => {
517512

518513
expect(inputArea).shadowDom.to.equal(
519514
`<div class="input-container">
515+
<div aria-label="Attachments" role="list">
516+
</div>
520517
<div class="input-wrapper">
521518
<igc-textarea
522519
class="text-input"
@@ -538,8 +535,6 @@ describe('Chat', () => {
538535
>
539536
</igc-icon-button>
540537
</div>
541-
</div>
542-
<div aria-label="Attachments" role="list">
543538
</div>`
544539
);
545540
});
@@ -581,14 +576,22 @@ describe('Chat', () => {
581576

582577
expect(inputArea).shadowDom.to.equal(
583578
`<div class="input-container">
584-
<igc-file-input multiple="">
585-
<igc-icon
586-
collection="material"
587-
name="attachment"
588-
slot="file-selector-text"
589-
>
590-
</igc-icon>
591-
</igc-file-input>
579+
<div aria-label="Attachments" role="list">
580+
<div class="attachment-wrapper" role="listitem">
581+
<igc-chip removable="">
582+
<span class="attachment-name">
583+
test.txt
584+
</span>
585+
</igc-chip>
586+
</div>
587+
<div class="attachment-wrapper" role="listitem">
588+
<igc-chip removable="">
589+
<span class="attachment-name">
590+
image.png
591+
</span>
592+
</igc-chip>
593+
</div>
594+
</div>
592595
<div class="input-wrapper">
593596
<igc-textarea
594597
class="text-input"
@@ -599,6 +602,14 @@ describe('Chat', () => {
599602
</igc-textarea>
600603
</div>
601604
<div class="buttons-container">
605+
<igc-file-input multiple="">
606+
<igc-icon
607+
collection="material"
608+
name="attachment"
609+
slot="file-selector-text"
610+
>
611+
</igc-icon>
612+
</igc-file-input>
602613
<igc-icon-button
603614
aria-label="Send message"
604615
class="small"
@@ -609,23 +620,7 @@ describe('Chat', () => {
609620
>
610621
</igc-icon-button>
611622
</div>
612-
</div>
613-
<div aria-label="Attachments" role="list">
614-
<div class="attachment-wrapper" role="listitem">
615-
<igc-chip removable="">
616-
<span class="attachment-name">
617-
test.txt
618-
</span>
619-
</igc-chip>
620-
</div>
621-
<div class="attachment-wrapper" role="listitem">
622-
<igc-chip removable="">
623-
<span class="attachment-name">
624-
image.png
625-
</span>
626-
</igc-chip>
627-
</div>
628-
</div>`
623+
</div>`
629624
);
630625
});
631626

@@ -981,7 +976,6 @@ describe('Chat', () => {
981976
chat.options = {
982977
templates: {
983978
textInputTemplate: textInputTemplate,
984-
fileUploadTemplate: fileUploadTemplate,
985979
textAreaActionsTemplate: textAreaActionsTemplate,
986980
textAreaAttachmentsTemplate: textAreaAttachmentsTemplate,
987981
},
@@ -991,21 +985,24 @@ describe('Chat', () => {
991985

992986
expect(inputArea).shadowDom.to.equal(
993987
`<div class="input-container">
994-
<igc-button type="button" variant="contained">Upload</igc-button>
988+
<div aria-label="Attachments" role="list">
989+
<div>
990+
<a href=${draftMessage.attachments[0].url} target="_blank">
991+
${draftMessage.attachments[0].name}
992+
</a>
993+
</div>
994+
</div>
995995
<div class="input-wrapper">
996996
<igc-input placeholder="Type text here...">
997997
</div>
998998
<div class="buttons-container">
999+
<div>
1000+
<igc-button type="button" variant="contained">Upload</igc-button>
9991001
<igc-button type="button" variant="contained">Send</igc-button>
1002+
</div>
10001003
</div>
10011004
</div>
1002-
<div aria-label="Attachments" role="list">
1003-
<div>
1004-
<a href=${draftMessage.attachments[0].url} target="_blank">
1005-
${draftMessage.attachments[0].name}
1006-
</a>
1007-
</div>
1008-
</div>`
1005+
`
10091006
);
10101007

10111008
expect(inputArea?.shadowRoot?.querySelector('igc-input')?.value).to.equal(

‎src/components/chat/chat.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -124,9 +124,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
124124
>${this._chatState.options?.headerText}</slot
125125
>
126126
</div>
127-
<slot name="actions" class="actions">
128-
<igc-button variant="flat">⋯</igc-button>
129-
</slot>
127+
<slot name="actions" class="actions"> </slot>
130128
</div>`;
131129
}
132130

‎src/components/chat/themes/input.base.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ igc-file-input::part(file-names){
1717

1818
.input-container {
1919
display: flex;
20-
align-items: center;
20+
flex-direction: column;
2121
gap: 12px;
2222
}
2323

@@ -45,7 +45,7 @@ igc-file-input::part(file-names){
4545

4646
.buttons-container {
4747
display: flex;
48-
align-items: center;
48+
justify-content: space-between;
4949
}
5050

5151
.input-button {

‎src/components/chat/types.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ export type IgcChatTemplates = {
5353
messageActionsTemplate?: MessageTemplate;
5454
composingIndicatorTemplate?: TemplateResult;
5555
textInputTemplate?: (text: string) => TemplateResult;
56-
fileUploadTemplate?: TemplateResult;
5756
textAreaActionsTemplate?: TemplateResult;
5857
textAreaAttachmentsTemplate?: AttachmentTemplate;
5958
};

0 commit comments

Comments
 (0)