Skip to content

Commit c98cb22

Browse files
gedinakovagedinakova
committed
refactor(*): Updated all parts & export
1 parent aa6746f commit c98cb22

File tree

9 files changed

+114
-78
lines changed

9 files changed

+114
-78
lines changed

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ type DefaultInputRenderers = {
6060
* @csspart input-container - Container for the input section
6161
* @csspart input-wrapper - Wrapper around the text input
6262
* @csspart text-input - The `<igc-textarea>` component
63-
* @csspart buttons-container - Container for file upload/send buttons
63+
* @csspart actions-container - Container for file upload/send buttons
6464
* @csspart send-button - The send icon button
6565
* @csspart attachments - Container for rendering attachments
6666
* @csspart attachment-wrapper - Wrapper for individual attachment
@@ -252,6 +252,7 @@ export default class IgcChatInputComponent extends LitElement {
252252
@igcRemove=${() => this._handleAttachmentRemoved(attachment)}
253253
>
254254
<igc-icon
255+
part="attachment-icon"
255256
slot="prefix"
256257
name=${getIconName(attachment.file?.type ?? attachment.type)}
257258
></igc-icon>
@@ -292,7 +293,7 @@ export default class IgcChatInputComponent extends LitElement {
292293
attachmentsDisabled
293294
? nothing
294295
: html`
295-
<label for="input_attachments" part="upload-button">
296+
<label for="input_attachments" part="file-upload">
296297
<igc-icon-button
297298
aria-label="Attach files"
298299
variant="flat"
@@ -334,13 +335,13 @@ export default class IgcChatInputComponent extends LitElement {
334335
const ctx: ChatRenderContext = { instance: this._state.host };
335336

336337
return trimmedHtml`
337-
<div part="file-upload">
338+
<div part="file-upload-container">
338339
${this._getRenderer('fileUploadButton')(ctx)}
339340
</div>
340341
<div part="input-actions-start">
341342
${this._getRenderer('inputActionsStart')(ctx)}
342343
</div>
343-
<div part="send-button">${this._getRenderer('sendButton')(ctx)}</div>
344+
<div part="send-button-container">${this._getRenderer('sendButton')(ctx)}</div>
344345
<div part="input-actions-end">
345346
${this._getRenderer('inputActionsEnd')(ctx)}
346347
</div>
@@ -376,7 +377,7 @@ export default class IgcChatInputComponent extends LitElement {
376377
${until(this._getRenderer('input')(inputCtx))}
377378
</div>
378379
379-
<div part="buttons-container">
380+
<div part="actions-container">
380381
${until(this._getRenderer('inputActions')(ctx))}
381382
</div>
382383
</div>

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,12 @@ export default class IgcChatMessageComponent extends LitElement {
224224
: html`
225225
<igc-message-attachments
226226
.message=${this.message}
227+
exportparts="
228+
attachment,
229+
attachment-header,
230+
attachment-icon,
231+
file-name,
232+
attachment-content"
227233
></igc-message-attachments>
228234
`;
229235
}
@@ -266,10 +272,7 @@ export default class IgcChatMessageComponent extends LitElement {
266272
${cache(
267273
this.message
268274
? html`
269-
<div
270-
part=${partMap(parts)}
271-
exportparts="attachment: message-attachment, attachments-container: message-attachments-container"
272-
>
275+
<div part=${partMap(parts)}>
273276
${cache(
274277
messageRenderer
275278
? until(messageRenderer(ctx))

‎src/components/chat/chat.ts‎

Lines changed: 80 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -134,11 +134,52 @@ const Slots = setSlots(
134134
* @slot suggestion - Slot for rendering a single suggestion item.
135135
* @slot empty-state - Slot shown when there are no messages.
136136
*
137-
* @csspart header - Styles the header container.
138-
* @csspart prefix - Styles the element before the title (e.g., avatar).
137+
* @csspart chat-container - Styles the main chat container.
138+
* @csspart header - Styles the chat header container.
139+
* @csspart prefix - Styles the element before the chat title (e.g., avatar).
139140
* @csspart title - Styles the chat header title.
140-
* @csspart suggestions - Styles the suggestion container.
141+
*
142+
* @csspart message-area-container - Styles the container holding the messages and (optional) suggestions.
143+
* @csspart message-list - Styles the message list container.
144+
* @csspart message-item - Styles each message wrapper.
145+
* @csspart typing-indicator - Styles the typing indicator container.
146+
* @csspart typing-dot - Styles individual typing indicator dots.
147+
*
148+
* @csspart suggestions-container - Styles the container holding all suggestions.
149+
* @csspart suggestions-header - Styles the suggestions header.
141150
* @csspart suggestion - Styles each suggestion item.
151+
* @csspart suggestion-prefix - Styles the icon or prefix in a suggestion.
152+
* @csspart suggestion-title - Styles the text/title of a suggestion.
153+
*
154+
* @csspart empty-state - Styles the empty state container when there are no messages.
155+
*
156+
* @csspart input-area-container - Styles the wrapper around the chat input area.
157+
* @csspart input-container - Styles the main input container.
158+
* @csspart input-attachments-container - Styles the container for attachments in the input.
159+
* @csspart input-attachment-container - Styles a single attachment in the input area.
160+
* @csspart input-attachment-name - Styles the file name of an attachment.
161+
* @csspart input-attachment-icon - Styles the icon of an attachment.
162+
* @csspart text-input - Styles the text input field for typing messages.
163+
* @csspart input-actions-container - Styles the container for input actions.
164+
* @csspart input-actions-start - Styles the group of actions at the start of the input after the default file upload.
165+
* @csspart input-actions-end - Styles the group of actions at the end of the input.
166+
* @csspart file-upload-container - Styles the container for the file upload input.
167+
* @csspart file-upload - Styles the file upload input itself.
168+
* @csspart send-button-container - Styles the container around the send button.
169+
* @csspart send-button - Styles the send button.
170+
*
171+
* @csspart message-container - Styles the container of a single message.
172+
* @csspart message-list (forwarded) - Styles the internal list of messages.
173+
* @csspart message-header - Styles the header of a message (e.g., sender, timestamp).
174+
* @csspart message-content - Styles the text content of a message.
175+
* @csspart message-attachments-container - Styles the container for message attachments.
176+
* @csspart message-attachment - Styles a single message attachment.
177+
* @csspart message-actions-container - Styles the container holding message actions.
178+
* @csspart message-sent - Styles messages marked as sent by the current user.
179+
* @csspart attachment-header - Styles the header of an attachment block.
180+
* @csspart attachment-content - Styles the content of an attachment block.
181+
* @csspart attachment-icon - Styles the icon of an attachment.
182+
* @csspart file-name - Styles the file name shown in an attachment.
142183
*/
143184
export default class IgcChatComponent extends EventEmitterMixin<
144185
IgcChatComponentEventMap,
@@ -329,13 +370,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
329370
<div part="header" ?hidden=${!hasContent}>
330371
<slot
331372
name="prefix"
332-
part="prefix"
333373
?hidden=${!this._slots.hasAssignedElements('prefix')}
334374
></slot>
335-
<slot name="title" part="title"
336-
>${this._state.options?.headerText}</slot
337-
>
338-
<slot name="actions" part="actions"></slot>
375+
<slot name="title">${this._state.options?.headerText}</slot>
376+
<slot name="actions"></slot>
339377
</div>
340378
`;
341379
}
@@ -354,8 +392,20 @@ export default class IgcChatComponent extends EventEmitterMixin<
354392
id=${`message-${message.id}`}
355393
part="message-item"
356394
.message=${message}
357-
exportparts="message-container, message-text, message-attachments-container, message-attachment, message-actions, sent,
358-
attachment, attachment-header, attachment-content, attachment-icon, file-name, actions: attachment-actions"
395+
exportparts="
396+
message-container,
397+
message-list,
398+
message-header,
399+
plain-text: message-content,
400+
message-attachments: message-attachments-container,
401+
attachment: message-attachment,
402+
message-actions: message-actions-container,
403+
sent: message-sent,
404+
attachment-header,
405+
attachment-content,
406+
attachment-icon,
407+
file-name,
408+
"
359409
>
360410
</igc-chat-message>
361411
`;
@@ -399,23 +449,26 @@ export default class IgcChatComponent extends EventEmitterMixin<
399449
</span>
400450
<slot name="suggestions-header"></slot>
401451
</igc-list-header>
402-
<slot name="suggestions" part="suggestions">
452+
<slot name="suggestions">
403453
${suggestions.map(
404454
(suggestion) => html`
405-
<slot name="suggestion" part="suggestion">
455+
<slot name="suggestion">
406456
<igc-list-item
457+
part="suggestion"
407458
@click=${() => this._handleSuggestionClick(suggestion)}
408459
>
409-
<span slot="start">
460+
<span slot="start" part="suggestion-prefix">
410461
${this._getRenderer('suggestionPrefix')(ctx)}
411462
</span>
412-
<span slot="title">${suggestion}</span>
463+
<span slot="title" part="suggestion-title"
464+
>${suggestion}</span
465+
>
413466
</igc-list-item>
414467
</slot>
415468
`
416469
)}
417470
</slot>
418-
<slot name="suggestions-actions" part="suggestions-actions"></slot>
471+
<slot name="suggestions-actions"></slot>
419472
</igc-list>
420473
</div>
421474
`;
@@ -436,48 +489,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
436489
: this._renderSuggestions();
437490

438491
return html`
439-
<div
440-
part="chat-container"
441-
exportparts="
442-
chat-container,
443-
header,
444-
prefix,
445-
title,
446-
actions,
447-
chat-wrapper,
448-
chat-messages,
449-
empty-state,
450-
suggestions-container,
451-
suggestions-header,
452-
suggestions,
453-
suggestions-actions,
454-
suggestion,
455-
message-container,
456-
message-list,
457-
message-item,
458-
message,
459-
message-text,
460-
message-attachment,
461-
message-attachments-container,
462-
message-actions,
463-
typing-indicator,
464-
attachments-container,
465-
attachment,
466-
attachment-header,
467-
attachment-content,
468-
attachment-icon,
469-
file-name,
470-
attachment-actions,
471-
sent,
472-
file-upload,
473-
input-actions-start,
474-
input-actions-end,
475-
send-button
476-
"
477-
>
492+
<div part="chat-container">
478493
${this._renderHeader()}
479494
480-
<div part="chat-wrapper">
495+
<div part="message-area-container">
481496
${cache(
482497
hasMessages || this._state.options?.isTyping
483498
? this._renderMessages()
@@ -490,14 +505,19 @@ export default class IgcChatComponent extends EventEmitterMixin<
490505
491506
<igc-chat-input
492507
exportparts="
493-
input-container,
494-
input-wrapper,
508+
input-container: input-area-container,
509+
input-wrapper: input-container,
495510
attachments: input-attachments-container,
496-
attachments-wrapper: input-attachment,
511+
attachment-wrapper: input-attachment-container,
497512
attachment-name: input-attachment-name,
513+
attachment-icon: input-attachment-icon,
498514
text-input,
499-
buttons-container: input-buttons-container,
500-
upload-button,
515+
actions-container: input-actions-container,
516+
input-actions-start,
517+
input-actions-end,
518+
file-upload-container,
519+
file-upload,
520+
send-button-container,
501521
send-button"
502522
>
503523
</igc-chat-input>

‎src/components/chat/message-attachments.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,12 +130,15 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
130130
return isImageAttachment(attachment)
131131
? html`
132132
<img
133-
part="image-attachment"
133+
part="image-attachment-icon"
134134
src=${createAttachmentURL(attachment)}
135135
alt=${attachment.name}
136136
/>
137137
`
138-
: html`<igc-icon part="file-attachment" name=${iconName}></igc-icon>`;
138+
: html`<igc-icon
139+
part="file-attachment-icon"
140+
name=${iconName}
141+
></igc-icon>`;
139142
}
140143

141144
private _renderAttachment(attachment: IgcChatMessageAttachment) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ $inline-inset: rem(24px);
2525
height: 100%;
2626
}
2727

28-
[part='chat-wrapper'] {
28+
[part='message-area-container'] {
2929
display: grid;
3030
grid-template-columns: subgrid;
3131
overflow: hidden auto;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,16 @@
2020
gap: rem(12px);
2121
}
2222

23-
[part='buttons-container'] {
23+
[part='actions-container'] {
2424
display: flex;
2525
align-items: center;
2626
}
2727

28-
[part='send-button'] {
28+
[part='send-button-container'] {
2929
margin-inline-start: auto;
3030
}
3131

32-
[part='upload-button'] {
32+
[part='file-upload-container'] {
3333
position: relative;
3434
display: inline-block;
3535

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
aspect-ratio: 1;
5252
}
5353

54-
[part='image-attachment'] {
54+
[part='image-attachment-icon'] {
5555
width: 100%;
5656
height: 100%;
5757
border-radius: inherit;
@@ -62,7 +62,7 @@
6262
--ig-size: 1;
6363
}
6464

65-
[part='file-attachment'] {
65+
[part='file-attachment-icon'] {
6666
--size: #{rem(32px)};
6767
}
6868

‎src/components/chat/themes/shared/message-attachments/message-attachments.common.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ $theme: $material;
2626
color: var-get($theme, 'image-attachment-icon');
2727
}
2828

29-
[part="file-attachment"] {
29+
[part="file-attachment-icon"] {
3030
--color: #{var-get($theme, 'file-icon-color')};
3131
--accent-color: #{var-get($theme, 'file-icon-accent-color')};
3232
}

‎stories/chat.stories.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -441,6 +441,15 @@ export const Basic: Story = {
441441
render: () => {
442442
messages = initialMessages;
443443
return html`
444+
<style>
445+
igc-chat::part(typing-dot) {
446+
background: var(--igc-background, #f00);
447+
border: solid 1px var(--igc-background, #f00);
448+
border-radius: 8px;
449+
color: var(--igc-color, #932424);
450+
width: 12px;
451+
}
452+
</style>
444453
<igc-chat
445454
style="--igc-chat-height: calc(100vh - 32px);"
446455
.messages=${messages}

0 commit comments

Comments
 (0)