Skip to content

Commit 8349174

Browse files
SisIvanovaSisIvanova
committed
refactor(chat): use list component for suggestions
1 parent 04206fb commit 8349174

File tree

6 files changed

+33
-26
lines changed

6 files changed

+33
-26
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
fileDocumentIcon,
2626
fileImageIcon,
2727
sendButtonIcon,
28+
starIcon,
2829
} from './types.js';
2930

3031
/**
@@ -105,6 +106,7 @@ export default class IgcChatInputComponent extends LitElement {
105106
registerIconFromText('send-message', sendButtonIcon, 'material');
106107
registerIconFromText('file-document', fileDocumentIcon, 'material');
107108
registerIconFromText('file-image', fileImageIcon, 'material');
109+
registerIconFromText('star-icon', starIcon, 'material');
108110
}
109111

110112
private getIconName(fileType: string | undefined): string {

‎src/components/chat/chat.ts‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ import { watch } from '../common/decorators/watch.js';
99
import { registerComponent } from '../common/definitions/register.js';
1010
import type { Constructor } from '../common/mixins/constructor.js';
1111
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
12+
import IgcIconComponent from '../icon/icon.js';
13+
import IgcListComponent from '../list/list.js';
14+
import IgcListHeaderComponent from '../list/list-header.js';
15+
import IgcListItemComponent from '../list/list-item.js';
1216
import IgcChatInputComponent from './chat-input.js';
1317
import IgcChatMessageListComponent from './chat-message-list.js';
1418
import { createChatState } from './chat-state.js';
@@ -170,7 +174,11 @@ export default class IgcChatComponent extends EventEmitterMixin<
170174
IgcChatComponent,
171175
IgcChatInputComponent,
172176
IgcChatMessageListComponent,
173-
IgcButtonComponent
177+
IgcButtonComponent,
178+
IgcIconComponent,
179+
IgcListComponent,
180+
IgcListItemComponent,
181+
IgcListHeaderComponent
174182
);
175183
}
176184

@@ -317,28 +325,36 @@ export default class IgcChatComponent extends EventEmitterMixin<
317325
}
318326

319327
private renderSuggestions() {
320-
return html` <div
328+
const hasContent = this._slots.hasAssignedElements('suggestions-header');
329+
return html` <igc-list
321330
part="suggestions-container"
322331
role="list"
323332
aria-label="Suggestions"
324333
>
325-
<slot name="suggestions-header" part="suggestions-header"></slot>
334+
<igc-list-header part="suggestions-header" ?hidden=${!hasContent}>
335+
<slot name="suggestions-header"></slot>
336+
</igc-list-header>
326337
<slot name="suggestions" part="suggestions">
327338
${this._chatState.options?.suggestions?.map(
328339
(suggestion) => html`
329340
<slot name="suggestion" part="suggestion" role="listitem">
330-
<igc-chip
341+
<igc-list-item
331342
@click=${() =>
332343
this._chatState?.handleSuggestionClick(suggestion)}
333344
>
345+
<igc-icon
346+
slot="start"
347+
name="star-icon"
348+
collection="material"
349+
></igc-icon>
334350
<span>${suggestion}</span>
335-
</igc-chip>
351+
</igc-list-item>
336352
</slot>
337353
`
338354
)}
339355
</slot>
340356
<slot name="suggestions-actions" part="suggestions-actions"></slot>
341-
</div>`;
357+
</igc-list>`;
342358
}
343359

344360
protected override firstUpdated() {

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

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ $inline-inset: rem(16px);
1919
flex-direction: column;
2020
align-items: center;
2121
height: 100%;
22-
gap: rem(24px);
2322
}
2423

2524
[part='chat-messages'],
@@ -30,12 +29,6 @@ $inline-inset: rem(16px);
3029
padding-inline: $inline-inset;
3130
}
3231

33-
[part='suggestions-header'] {
34-
@include type-style('subtitle-2') {
35-
margin: 0;
36-
};
37-
}
38-
3932
[part='empty-state'] {
4033
height: 100%;
4134
}
@@ -66,14 +59,9 @@ $inline-inset: rem(16px);
6659
margin-inline-end: rem(32px);
6760
}
6861

69-
[part='suggestions-container'] {
70-
display: flex;
71-
flex-direction: column;
72-
gap: rem(12px);
73-
74-
igc-chip {
75-
--ig-size: 3;
62+
igc-list {
63+
--ig-size: 3;
7664

77-
width: fit-content;
78-
}
65+
min-height: fit-content;
66+
padding-block-end: rem(24px);
7967
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,9 @@
3333

3434
input {
3535
position: absolute;
36-
opacity: 0;
36+
width: 0;
37+
aspect-ratio: 1;
3738
inset: 0;
38-
z-index: 1;
39-
cursor: pointer;
4039
}
4140
}
4241

‎src/components/chat/themes/message-list.base.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
display: block;
66
overflow-y: auto;
77
flex: 1;
8-
padding-block-start: rem(16px);
8+
padding-block: rem(16px) rem(24px);
99
}
1010

1111
[part='message-list'] {

‎src/components/chat/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,3 +239,5 @@ export const thumbDownIcon =
239239
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-840h440v520L400-40l-50-50q-7-7-11.5-19t-4.5-23v-14l44-174H120q-32 0-56-24t-24-56v-80q0-7 2-15t4-15l120-282q9-20 30-34t44-14Zm360 80H240L120-480v80h360l-54 220 174-174v-406Zm0 406v-406 406Zm80 34v-80h120v-360H680v-80h200v520H680Z"/></svg>';
240240
export const regenerateIcon =
241241
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>';
242+
export const starIcon =
243+
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25"><path d="M6.586 4.768c.135-.358.65-.358.785 0l.558 1.481a.41.41 0 0 0 .093.145c.043.043.095.077.154.098l1.508.548a.41.41 0 0 1 0 .771l-1.508.548a.42.42 0 0 0-.175.121.41.41 0 0 0-.072.122l-.558 1.481c-.135.358-.65.358-.785 0l-.558-1.481c-.042-.113-.133-.201-.247-.243l-1.508-.548a.41.41 0 0 1 0-.771l1.508-.548c.115-.042.205-.13.247-.243l.558-1.481zM12.21 8.05c.271-.734 1.31-.734 1.581 0l1.124 3.037a.84.84 0 0 0 .498.498l3.037 1.124c.734.271.734 1.31 0 1.581l-3.037 1.124a.84.84 0 0 0-.498.498l-1.124 3.037c-.271.734-1.309.734-1.581 0l-1.124-3.037a.84.84 0 0 0-.498-.498L7.55 14.291c-.734-.271-.734-1.31 0-1.581l3.037-1.124a.84.84 0 0 0 .498-.498L12.21 8.05zm-5.576 8.705c.126-.34.607-.34.733 0l.31.838a.39.39 0 0 0 .231.231l.838.31c.34.126.34.607 0 .733l-.838.31a.39.39 0 0 0-.231.231l-.31.838c-.126.34-.607.34-.733 0l-.31-.838a.39.39 0 0 0-.231-.231l-.838-.31c-.34-.126-.34-.607 0-.733l.838-.31a.39.39 0 0 0 .231-.231l.31-.838zm11.732-11c-.126-.34-.607-.34-.733 0l-.31.838a.39.39 0 0 1-.231.231l-.838.31c-.34.126-.34.607 0 .733l.838.31a.39.39 0 0 1 .231.231l.31.838c.126.34.607.34.733 0l.31-.838a.39.39 0 0 1 .231-.231l.838-.31c.34-.126.34-.607 0-.733l-.838-.31a.39.39 0 0 1-.231-.231l-.31-.838z"/></svg>';

0 commit comments

Comments
 (0)