github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-06-01 01:07:04 +02:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity Graph

fix(editor): Fix ask assistant button style (no-changelog) (#20080)

Browse Source
This commit is contained in:
Suguru Inoue 2025-09-29 11:59:44 +02:00 committed by GitHub
parent 4d024ecb9d
commit 29aec202df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 41 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/__snapshots__/AskAssistantChat.test.ts.snap
View File

@ -1,90 +1,5 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`AskAssistantChat > does not render retry button if no error is present 1`] = `
<div>
<div
class="container"
>
<div
class="header"
>
<div
class="chatTitle"
>
<div
class="headerText"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
</div>
</div>
<div
class="back"
data-test-id="close-chat-button"
>
<n8n-icon-stub
color="text-base"
icon="arrow-right"
spin="false"
/>
</div>
</div>
<div
class="body"
>
<div
class="messages"
>
<div>
<data
data-test-id="chat-message-assistant"
>
<div
data-test-id="message-wrapper-stub"
is-first-of-role="true"
is-last-message="true"
streaming="false"
user="[object Object]"
>
{"id":"1","type":"text","role":"assistant","content":"Hi Max! Here is my top solution to fix the error in your **Transform data** node👇","read":false}
</div>
<!--v-if-->
</data>
</div>
<!--v-if-->
</div>
</div>
<div
class="inputWrapper"
data-test-id="chat-input-wrapper"
>
<n8n-prompt-input-stub
data-test-id="chat-input"
disabled="false"
maxlength="1000"
maxlinesbeforescroll="6"
minlines="1"
modelvalue=""
placeholder="assistantChat.inputPlaceholder"
refocusaftersend="true"
showaskownertooltip="false"
streaming="false"
/>
</div>
</div>
</div>
`;
exports[`AskAssistantChat > limits maximum input length when maxCharacterLength prop is specified 1`] = `
<div>
<div

50
packages/frontend/@n8n/design-system/src/components/InlineAskAssistantButton/InlineAskAssistantButton.vue
View File

@ -53,12 +53,10 @@ const onClick = () => {
data-test-id="ask-assistant-button"
@click="onClick"
>
<div>
<div :style="{ padding: sizes[size].padding }">
<AssistantIcon :size="size" :class="$style.icon" :theme="asked ? 'disabled' : 'default'" />
<span v-if="asked">{{ t('inlineAskAssistantButton.asked') }}</span>
<AssistantText v-else :size="size" :text="t('askAssistantButton.askAssistant')" />
</div>
<div :style="{ padding: sizes[size].padding }">
<AssistantIcon :size="size" :class="$style.icon" :theme="asked ? 'disabled' : 'default'" />
<span v-if="asked">{{ t('inlineAskAssistantButton.asked') }}</span>
<AssistantText v-else :size="size" :text="t('askAssistantButton.askAssistant')" />
</div>
</button>
</template>
@ -67,49 +65,41 @@ const onClick = () => {
.button {
border-radius: var(--border-radius-base);
position: relative;
border: 0;
padding: 1px;
border: 1px solid transparent;
padding: 0;
overflow: hidden;
background: var(--color-assistant-highlight-gradient);
background:
var(--color-askAssistant-button-background-gradient) padding-box,
var(--color-assistant-highlight-gradient) border-box;
> div {
background-color: var(--color-askAssistant-button-background);
border-radius: inherit;
height: 100%;
overflow: hidden;
> div {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
line-height: unset;
}
display: flex;
align-items: center;
justify-content: center;
line-height: unset;
}
}
.hoverable {
&:hover {
cursor: pointer;
background: var(--color-assistant-highlight-reverse);
background:
var(--color-askAssistant-button-background-gradient-hover) padding-box,
var(--color-assistant-highlight-reverse) border-box;
> div {
background: var(--color-askAssistant-button-background-hover);
}
> div > div {
background: var(--color-assistant-inner-highlight-hover);
}
}
&:active {
background: var(--color-assistant-highlight-gradient);
background:
var(--color-askAssistant-button-background-gradient-active) padding-box,
var(--color-assistant-highlight-reverse) border-box;
> div {
background: var(--color-askAssistant-button-background-active);
}
> div > div {
background: var(--color-assistant-inner-highlight-active);
}
}

14
packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss
View File

@ -48,11 +48,15 @@
--color-assistant-highlight-1: #8c90f2;
--color-assistant-highlight-2: #a977f0;
--color-assistant-highlight-3: #f0778b;
--color-askAssistant-button-background: #2e2e2e;
--color-askAssistant-button-background-hover: #383839;
--color-askAssistant-button-background-active: #414244;
--color-assistant-inner-highlight-hover: var(--color-askAssistant-button-background-hover);
--color-assistant-inner-highlight-active: var(--color-askAssistant-button-background-active);
--color-askAssistant-button-background-gradient: linear-gradient(#2e2e2e, #2e2e2e);
--color-askAssistant-button-background-gradient-hover: linear-gradient(#383839, #383839);
--color-askAssistant-button-background-gradient-active: linear-gradient(#414244, #414244);
--color-assistant-inner-highlight-hover: var(
--color-askAssistant-button-background-gradient-hover
);
--color-assistant-inner-highlight-active: var(
--color-askAssistant-button-background-gradient-active
);
--color-assistant-highlight-gradient: linear-gradient(
105deg,

15
packages/frontend/@n8n/design-system/src/css/_tokens.scss
View File

@ -131,9 +131,18 @@
--color-sticky-border-7: var(--p-gray-120);
// AI Assistant
--color-askAssistant-button-background: var(--color-background-xlight);
--color-askAssistant-button-background-hover: var(--color-background-xlight);
--color-askAssistant-button-background-active: var(--color-background-xlight);
--color-askAssistant-button-background-gradient: linear-gradient(
var(--color-background-xlight),
var(--color-background-xlight)
);
--color-askAssistant-button-background-gradient-hover: linear-gradient(
var(--color-background-xlight),
var(--color-background-xlight)
);
--color-askAssistant-button-background-gradient-active: linear-gradient(
var(--color-background-xlight),
var(--color-background-xlight)
);
--color-assistant-highlight-1: #5b60e8;
--color-assistant-highlight-2: #aa7bec;