Skip to content

refactor(chat)!: rework styling internals for messages #2188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simeonoff merged 3 commits into from
Apr 16, 2026
Merged

refactor(chat)!: rework styling internals for messages #2188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
91b6f0e
refactor(chat)!: rework styling internals for messages
simeonoff Apr 15, 2026
dbee8e2
Update src/components/chat/themes/shared/chat-message/chat-message.in…
simeonoff Apr 16, 2026
312e3a4
Merge branch 'master' into simeonoff/chat-fixes
simeonoff Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/chat/chat-message.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@ export default class IgcChatMessageComponent extends LitElement {

const parts = {
'message-container': true,
received: !this._state.isCurrentUserMessage(this.message),
sent: this._state.isCurrentUserMessage(this.message),
Comment on lines 287 to 291
Copy link

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isCurrentUserMessage(this.message) is computed twice when building parts. Consider storing the result in a local const isSent = ... and deriving both sent/received from it to avoid duplicate work and keep the logic easier to read.

Suggested change
const parts = {
'message-container': true,
received: !this._state.isCurrentUserMessage(this.message),
sent: this._state.isCurrentUserMessage(this.message),
const isSent = this._state.isCurrentUserMessage(this.message);
const parts = {
'message-container': true,
received: !isSent,
sent: isSent,

Copilot uses AI. Check for mistakes.
};

Expand Down
50 changes: 23 additions & 27 deletions src/components/chat/themes/message.base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,44 @@
@use 'styles/utilities' as *;

:host {
--igc-chat-message-padding: #{rem(12px) rem(16px)};
--igc-chat-sent-message-start-margin: auto;
--igc-chat-sent-message-end-margin: unset;
--igc-chat-message-container-end-margin: auto;
--ig-chat-message-padding-block: #{pad-block(12px)};
--ig-chat-message-padding-inline: #{pad-inline(16px)};
--ig-chat-message-padding: var(--ig-chat-message-padding-block)
var(--ig-chat-message-padding-inline);
--ig-chat-sent-message-start-margin: auto;
--ig-chat-sent-message-end-margin: unset;
--ig-chat-message-container-end-margin: auto;
Comment on lines +5 to +11
Copy link

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New message-level CSS custom properties use the --ig-chat-* prefix, but the rest of the chat component’s public CSS vars use the --igc-chat-* prefix (e.g. --igc-chat-height in chat.base.scss). This looks like an inconsistent/possibly accidental rename that makes the API harder to discover and breaks prefix consistency across components. Consider renaming these to --igc-chat-message-* (and optionally keep the old names as aliases for a deprecation window).

Copilot uses AI. Check for mistakes.

display: flex;
flex-direction: column;
width: 100%;
}

[part~='message-container'],
[part='plain-text'] {
@include type-style('body-1') {
margin: 0;
};
}

[part~='message-container'] {
display: flex;
margin-inline-end: var(--igc-chat-message-container-end-margin);
margin-inline-end: var(--ig-chat-message-container-end-margin);
flex-direction: column;
padding: var(--ig-chat-message-padding);
gap: rem(16px);

p {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}

a {
overflow-wrap: anywhere;
color: color(primary, 500);
overflow-wrap: anywhere;
color: color(primary, 500);
}

pre.shiki {
font-size: rem(14px);
line-height: rem(24px);
padding: rem(16px);
border-radius: rem(4px);
max-height: rem(320px);
max-width: rem(680px);
overflow-y: auto;
font-size: rem(14px);
line-height: rem(24px);
padding: rem(16px);
border-radius: rem(4px);
max-height: rem(320px);
max-width: rem(680px);
overflow-y: auto;
}
}

Expand All @@ -51,14 +48,13 @@
[part~='message-actions'],
[part~='plain-text'] {
&:empty {
display: none;
display: none;
}
}

[part~='sent'] {
margin-inline: var(--igc-chat-sent-message-start-margin, 0) var(--igc-chat-sent-message-end-margin, 0);
padding: var(--igc-chat-message-padding);
border-radius: rem(24px) rem(24px) 0;
margin-inline: var(--ig-chat-sent-message-start-margin, 0)
var(--ig-chat-sent-message-end-margin, 0);
max-width: rem(576px);
width: fit-content;
}
Comment on lines 55 to 60
Copy link

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

received messages now get a background via chat-message.common.scss, but only [part~='sent'] constrains width (max-width + width: fit-content). As a result, received message containers will likely stretch to the full available width in the column flex layout, producing a full-width background block. Consider moving the width/max-width constraints to [part~='message-container'] (so both variants are constrained) or adding an equivalent rule for [part~='received'].

Copilot uses AI. Check for mistakes.
15 changes: 0 additions & 15 deletions src/components/chat/themes/message.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,18 @@
import { css } from 'lit';

import type { Themes } from '../../../theming/types.js';
// Shared Styles
import { styles as bootstrap } from './shared/chat-message/chat-message.bootstrap.css.js';
import { styles as fluent } from './shared/chat-message/chat-message.fluent.css.js';
import { styles as indigo } from './shared/chat-message/chat-message.indigo.css.js';

const light = {
bootstrap: css`
${bootstrap}
`,
indigo: css`
${indigo}
`,
fluent: css`
${fluent}
`,
};

const dark = {
bootstrap: css`
${bootstrap}
`,
indigo: css`
${indigo}
`,
fluent: css`
${fluent}
`,
};

export const all: Themes = { light, dark };
5 changes: 0 additions & 5 deletions src/components/chat/themes/shared/chat-message/chat-message.bootstrap.scss
View file
Open in desktop

This file was deleted.

22 changes: 17 additions & 5 deletions src/components/chat/themes/shared/chat-message/chat-message.common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,36 @@
@use 'sass:map';
Copy link

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@use 'sass:map'; is unused in this stylesheet. Consider removing it to avoid dead imports and keep the theme files minimal.

Suggested change
@use 'sass:map';

Copilot uses AI. Check for mistakes.
@use 'styles/utilities' as *;
@use '../../light/themes' as *;

$theme: $material;

:host {
--shiki-bg: #{var-get($theme, 'code-background')};
}

[part~='sent'] {
background: var-get($theme, 'message-background');
--message-corner-radius: 0;
}

[part~='message-container'] {
color: var-get($theme, 'message-color');
@include type-style('body-1');

border-radius: var-get($theme, 'message-border-radius');

pre.shiki {
border: rem(1px) solid var-get($theme, 'code-border');
}
}

[part~='sent'] {
background: var-get($theme, 'sent-message-background');
color: var-get($theme, 'sent-message-color');
border-end-end-radius: var(--message-corner-radius);
}

[part~='received'] {
background: var-get($theme, 'received-message-background');
color: var-get($theme, 'received-message-color');
border-start-start-radius: var(--message-corner-radius);
}

[part~='message-actions'] {
igc-icon-button::part(icon) {
color: var-get($theme, 'message-actions-color');
Expand Down
5 changes: 0 additions & 5 deletions src/components/chat/themes/shared/chat-message/chat-message.fluent.scss
View file
Open in desktop

This file was deleted.

7 changes: 5 additions & 2 deletions src/components/chat/themes/shared/chat-message/chat-message.indigo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
@use 'styles/utilities' as *;
@use '../../light/themes' as *;

[part~='sent'] {
border-radius: rem(8px);
$theme: $indigo;

:host {
--message-corner-radius: #{var-get($theme, 'message-border-radius')};
}
Loading