chore: Adjust agent chat code elements (#40230)

## Description

Fixes #39836

| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/dabefaab-71a1-41e1-b84a-7fcb115c2c86)
|
![image](https://github.com/user-attachments/assets/f98e5b06-6cb7-499b-8a55-44b358c1af58)
|

## Automation

/ok-to-test tags="@tag.Sanity"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]
> 🟣 🟣 🟣 Your tests are running.
> Tests running at:
<https://github.com/appsmithorg/appsmith/actions/runs/14445548010>
> Commit: d93e974ef879e773c24189647f87a0c7ecce977f
> Workflow: `PR Automation test suite`
> Tags: `@tag.Sanity`
> Spec: ``
> <hr>Mon, 14 Apr 2025 12:25:09 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
This commit is contained in:
vadim 2025-04-14 15:29:11 +02:00 committed by GitHub
parent 4783df3c37
commit 15dec536a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 20 additions and 16 deletions

View File

@ -1301,13 +1301,7 @@ export class DarkModeTheme implements ColorModeTheme {
private get bdElevation1() {
const color = this.bdNeutral.clone();
if (this.seedIsVeryLight) {
color.oklch.l = 0.13;
}
if (!this.seedIsVeryLight) {
color.oklch.l -= 0.75;
}
color.oklch.l -= 0.39;
return color;
}
@ -1315,7 +1309,7 @@ export class DarkModeTheme implements ColorModeTheme {
private get bdElevation2() {
const color = this.bdElevation1.clone();
color.oklch.l += 0.015;
color.oklch.l += 0.07;
return color;
}
@ -1323,7 +1317,7 @@ export class DarkModeTheme implements ColorModeTheme {
private get bdElevation3() {
const color = this.bdElevation2.clone();
color.oklch.l += 0.035;
color.oklch.l += 0.05;
return color;
}

View File

@ -12,7 +12,7 @@ export const CodeBlock = (props: SyntaxHighlighterProps) => {
return (
<SyntaxHighlighter
className={getTypographyClassName("caption")}
className={getTypographyClassName("body") + " wds-codeblock"}
{...props}
style={theme.colorMode === "dark" ? darkTheme : lightTheme}
useInlineStyles

View File

@ -35,6 +35,7 @@ export const Code = (props: CodeProps) => {
>
<Text size="caption">{match[1]}</Text>
<Button
color="neutral"
icon={copied ? "check" : "copy"}
onPress={handleCopy}
size="small"

View File

@ -79,7 +79,6 @@
li {
margin-bottom: var(--inner-spacing-2);
margin-left: 1em;
position: relative;
list-style-type: auto;
letter-spacing: -0.02em;
@ -92,19 +91,29 @@
[data-component="code"] {
background-color: var(--color-bg-elevation-2);
border-radius: var(--border-radius-elevation-3);
outline: var(--border-width-1) solid var(--color-bg-neutral-subtle);
outline: var(--border-width-1) solid var(--color-bd-elevation-2);
margin-bottom: var(--inner-spacing-2);
overflow: auto;
}
[data-component="code"] [class*="wds-codeblock"]::before,
[data-component="code"] [class*="wds-codeblock"]::after {
margin-bottom: 0;
margin-top: 0;
}
code:is([class*="language-"]) {
font-size: 0.85em;
}
code:not([class*="language-"]) {
font-size: 0.85em;
padding-inline: var(--inner-spacing-1);
background: var(--color-bg-neutral-subtle);
color: var(--color-fg-negative);
border-radius: var(--border-radius-elevation-3);
color: var(--color-fg-accent);
border-radius: calc(var(--border-radius-elevation-3) / 4);
word-break: break-word;
white-space: normal;
outline: var(--border-width-1) solid var(--color-bg-neutral-soft);
outline: var(--border-width-1) solid var(--color-bd-elevation-3);
}
pre {

View File

@ -4,5 +4,5 @@ export const SIDEBAR_CONSTANTS = {
ICON: "var(--sizing-14)",
},
KEYBOARD_SHORTCUT: "b",
MOBILE_BREAKPOINT: 768,
MOBILE_BREAKPOINT: 720,
} as const;