Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
15 changes: 10 additions & 5 deletions biome.json
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
{
"$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
"$schema": "https://biomejs.dev/schemas/2.1.3/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false,
"ignore": ["**/dist"]
"includes": ["**", "!**/dist"]
},
"formatter": {
"indentStyle": "space",
"indentWidth": 2
},
"organizeImports": {
"enabled": false
},
"assist": { "actions": { "source": { "organizeImports": "off" } } },
"javascript": {
"formatter": {
"enabled": false
Expand Down Expand Up @@ -44,5 +42,12 @@
"linter": {
"enabled": true
}
},
"linter": {
"rules": {
"style": {
"noDescendingSpecificity": "off"
}
}
}
}
8 changes: 5 additions & 3 deletions packages/component/src/Activity/CodeBlockContent.module.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
:global(.webchat) .code-block-content {
border: var(--webchat__border-width--bubble) var(--webchat__border-style--bubble)
var(--webchat__border-color--bubble);
border: var(--webchat__border-width--bubble) var(--webchat__border-style--bubble) var(--webchat__border-color--bubble);
Comment thread
OEvgeny marked this conversation as resolved.
border-radius: var(--webchat__border-radius--bubble);
display: block;
font-family: var(--webchat__font--primary);
Expand All @@ -9,8 +8,11 @@
font-weight: 400;
margin: 0 calc(var(--webchat__border-width--bubble) * -1) calc(var(--webchat__border-width--bubble) * -1);
overflow: hidden;
overflow: clip;
position: relative;

@supports (overflow: clip) {
overflow: clip;
}
Comment thread
OEvgeny marked this conversation as resolved.
}

:global(.webchat) .code-block-content__header {
Expand Down
8 changes: 4 additions & 4 deletions packages/component/src/Activity/StackedLayout.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
color: var(--webchat__color--subtle);
display: grid;
font-size: 1.1em;
grid-template-areas: "message-status-icon";
grid-template-areas: 'message-status-icon';
margin-block: calc(var(--webchat__padding--regular) + 1px);
margin-inline-start: var(--webchat__padding--regular);
place-self: start;
Expand Down Expand Up @@ -193,12 +193,12 @@
.stacked-layout__bubble {
grid-template: 'content' 1fr / 1fr;
}

.stacked-layout__message-status {
display: none;
}
&:has(.stacked-layout__message-status--final),

&:has(.stacked-layout__message-status--final),
&:has(.stacked-layout__message-status--incomplete) {
.stacked-layout__bubble {
grid-template:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
}

@keyframes message-status-loader__pulse {
0%, 100% {
0%,
100% {
opacity: 0.3;
}
50% {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,3 @@
color: var(--webchat__color--subtle);
line-height: 20px;
}

Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@
margin: calc(var(--webchat__padding--regular) / -2);
overflow: clip;
padding: calc(var(--webchat__padding--regular) / 2);
transition: visibility 0s, height 0.2s ease;
transition:
visibility 0s,
height 0.2s ease;
visibility: hidden;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
.part-grouping-activity__activities {
padding-block: 0 var(--webchat__padding--regular);
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@

&.send-box-attachment-bar-item--as-list-item {
border-radius: 4px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
box-shadow:
0px 2px 4px rgba(0, 0, 0, 0.14),
0px 0px 2px rgba(0, 0, 0, 0.12);
grid-template-areas: 'body auxiliary';
grid-template-columns: 1fr auto;
padding: 2px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
display: grid;
grid-template-areas: 'content';
outline: 0;

--webchat__transcript--spacing: 10px;

.transcript-focus-area__indicator,
Expand All @@ -24,16 +24,21 @@
min-width: 0;
}

&:focus .transcript-focus-area__content--focused > .transcript-focus-area__content-overlay .transcript-focus-area__indicator {
&:focus
.transcript-focus-area__content--focused
> .transcript-focus-area__content-overlay
.transcript-focus-area__indicator {
border-color: var(--webchat__color--transcript-activity-visual-keyboard-indicator);
border-style: var(--webchat__border-style--transcript-activity-visual-keyboard-indicator);
border-width: var(--webchat__border-width--transcript-activity-visual-keyboard-indicator);
inset: calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2) calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2);
inset: calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2)
calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2);
position: absolute;
}

&:focus-visible .transcript-focus-area__transcript-indicator,
.transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible) + .transcript-focus-area__transcript-indicator {
.transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible)
+ .transcript-focus-area__transcript-indicator {
border-color: var(--webchat__border-color--transcript-visual-keyboard-indicator);
border-style: var(--webchat__border-style--transcript-visual-keyboard-indicator);
border-width: var(--webchat__border-width--transcript-visual-keyboard-indicator);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -104,15 +104,17 @@
var(--webchat-decorator-borderFlair-animated-color2),
var(--webchat-decorator-borderFlair-animated-color3)
);
--webchat-decorator-borderFlair-borderMask: linear-gradient(hsl(0 0% 100% / 0), hsl(0 0% 100% / 0)) padding-box,
linear-gradient(hsl(0 0% 100%), hsl(0 0% 100%)) border-box;
--webchat-decorator-borderFlair-borderMask:
linear-gradient(hsl(0 0% 100% / 0), hsl(0 0% 100% / 0)) padding-box, linear-gradient(hsl(0 0% 100%), hsl(0 0% 100%))
border-box;

animation:
borderAnimation-angle 2000ms linear 0ms forwards,
borderAnimation-color1 1200ms linear 0ms forwards,
borderAnimation-color2 1200ms linear 200ms forwards,
borderAnimation-color3 1200ms linear 400ms forwards;
background: var(--webchat-decorator-borderFlair-borderGradient) center center /
background:
var(--webchat-decorator-borderFlair-borderGradient) center center /
var(--webchat-decorator-borderFlair-backgroundSize) var(--webchat-decorator-borderFlair-backgroundSize);
border: var(--webchat-decorator-borderFlair-borderSize) solid transparent;
border-radius: inherit;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
outline-offset: -2px;
}

:global(.webchat) .code-block-copy-button[aria-disabled="true"] {
:global(.webchat) .code-block-copy-button[aria-disabled='true'] {
background: #f0f0f0;
border: 1px solid #e0e0e0;
color: #bdbdbd;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@
padding-block: var(--webchat-spacingVerticalS);
}
/* Hide duplicate bot headers */
&.part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) + .part-grouping-decorator--from-bot:has(.part-grouping-decorator__header) .part-grouping-decorator__header {
&.part-grouping-decorator--from-bot:has(.part-grouping-decorator__header)
+ .part-grouping-decorator--from-bot:has(.part-grouping-decorator__header)
.part-grouping-decorator__header {
display: none;
}
/* #region Collapsible grouping */
Expand Down Expand Up @@ -152,7 +154,7 @@
display: flex;
flex-flow: column nowrap;
margin-inline: var(--webchat-spacingHorizontalMNudge);

:global(.stacked-layout) {
margin-inline: var(--webchat-spacingHorizontalNone);
position: static;
Expand Down Expand Up @@ -208,7 +210,6 @@
box-shadow: unset;
}


/* Message bubble content */
:global(.stacked-layout .webchat__bubble .webchat__bubble__content) {
background-color: var(--webchat__bubble--background-color);
Expand Down Expand Up @@ -258,20 +259,20 @@
font-weight: var(--webchat-fontWeightRegular);
margin-block: 0;
margin-inline: var(--webchat__bubble--inline-padding);

:global(.code-block-content__header) {
padding: var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalL);
}

:global(.code-block-content__code-block) {
padding-block: var(--webchat-spacingVerticalM);
padding-inline: var(--webchat-spacingHorizontalL) var(--webchat-spacingHorizontalS);
}

:global(.code-block-copy-button) {
--webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1);
--webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);

margin-block-start: var(--webchat-spacingVerticalM);
margin-inline-end: var(--webchat-spacingHorizontalL);
position: absolute;
Expand All @@ -294,25 +295,26 @@
outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
}
}

:global(.collapsible-content__content) {
margin-block: var(--webchat-spacingVerticalNone) var(--webchat__bubble--block-padding);
}

:global(.collapsible-content__content .stacked-layout__attachment-list) {
gap: var(--webchat-spacingVerticalS);
}

:global(.collapsible-content__content .stacked-layout__attachment-row) {
margin: 0;
}

:global(.collapsible-content__content .stacked-layout__attachment-row .webchat__text-content) {
padding-block: 0;
}
}

&.part-grouping-decorator--group :global(.stacked-layout .webchat__bubble .collapsible-content .collapsible-content__content) {

&.part-grouping-decorator--group
:global(.stacked-layout .webchat__bubble .collapsible-content .collapsible-content__content) {
margin-block: var(--webchat__bubble--block-padding) var(--webchat-spacingVerticalNone);
}
}
Expand All @@ -326,10 +328,11 @@
padding-block: var(--webchat__bubble--block-padding);
padding-inline: var(--webchat__bubble--inline-padding);
position: relative;
transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid),
transition:
background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid),
box-shadow var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
}

&.part-grouping-decorator--group:has(:global(.collapsible-grouping--open)) :global(.collapsible-grouping) {
background-color: var(--webchat__bubble--background-color);
box-shadow: var(--webchat__bubble--box-shadow);
Expand Down Expand Up @@ -364,7 +367,8 @@
padding-block: var(--webchat-spacingVerticalS);
}

&:where(:not(.part-grouping-decorator--group).part-grouping-decorator--from-bot) :global(.webchat__bubble .webchat__bubble__content) {
&:where(:not(.part-grouping-decorator--group).part-grouping-decorator--from-bot)
:global(.webchat__bubble .webchat__bubble__content) {
background-color: var(--webchat__bubble--background-color);
border-radius: var(--webchat__bubble--border-radius);
box-shadow: var(--webchat__bubble--box-shadow);
Expand Down Expand Up @@ -429,7 +433,7 @@

&.part-grouping-decorator--from-bot {
margin-inline-end: var(--webchat-spacingHorizontalXXL);

:global(.stacked-layout) {
margin: 0;
position: static;
Expand Down Expand Up @@ -466,7 +470,8 @@
}
}

&:not(.part-grouping-decorator--group) :global(.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content) {
&:not(.part-grouping-decorator--group)
:global(.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content) {
anchor-name: --webchat-flair;
max-width: unset;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,10 @@
background-color: var(--webchat-colorNeutralBackground1);
border-radius: var(--webchat-borderRadiusMedium);
color: var(--webchat-colorNeutralForeground1);
transition: background-color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid), color
var(--webchat-durationNormal) var(--webchat-curveAccelerateMid), opacity var(--webchat-durationUltraFast)
var(--webchat-curveAccelerateMid);
transition:
background-color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid),
color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid),
opacity var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid);

&:hover {
background-color: var(--webchat-colorNeutralBackground1Hover);
Expand Down
16 changes: 10 additions & 6 deletions packages/fluent-theme/src/components/theme/Theme.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -277,9 +277,8 @@
}
}

:global(.webchat-fluent).theme.variant-copilot
:global(.transcript-focus-area) {
--webchat__transcript--spacing: var(--webchat-spacingVerticalM);
:global(.webchat-fluent).theme.variant-copilot :global(.transcript-focus-area) {
--webchat__transcript--spacing: var(--webchat-spacingVerticalM);
}

:global(.webchat-fluent).theme.variant-copilot
Expand All @@ -289,7 +288,10 @@

/* Transcript focus indicator color when in focus-visible state */
:global(.webchat-fluent).theme
:global(.transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible) + .transcript-focus-area__transcript-indicator) {
:global(
.transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible)
+ .transcript-focus-area__transcript-indicator
) {
border-color: var(--webchat-colorStrokeFocus2);
}

Expand Down Expand Up @@ -334,7 +336,8 @@
}
}

&:has(:global(.collapsible-grouping)) > :global(.transcript-focus-area__content-overlay .transcript-focus-area__indicator) {
&:has(:global(.collapsible-grouping))
> :global(.transcript-focus-area__content-overlay .transcript-focus-area__indicator) {
display: none;
}

Expand Down Expand Up @@ -376,7 +379,8 @@
}

/* Transcript focused content copilot variant */
:global(.webchat-fluent).theme.variant-copilot :global(.transcript-focus-area:focus-visible .transcript-focus-area__content--focused) {
:global(.webchat-fluent).theme.variant-copilot
:global(.transcript-focus-area:focus-visible .transcript-focus-area__content--focused) {
:global(.collapsible-grouping)::after {
inset: -2px -4px;
}
Expand Down
Loading