admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 02:21:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(n8n Form Trigger Node, Chat Trigger Node): Allow to customize form and chat css (#13506)

Browse Source
This commit is contained in:
oleg
2025-02-28 12:27:49 +01:00
committed by GitHub
parent c4f3293778
commit 289041e997
29 changed files with 1278 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/@n8n/chat/src/components/Button.vue
View File

@@ -9,13 +9,13 @@
text-align: center;
vertical-align: middle;
user-select: none;
color: var(--chat--button--color, var(--chat--color-light));
background-color: var(--chat--button--background, var(--chat--color-primary));
color: var(--chat--button--color);
background-color: var(--chat--button--background);
border: 1px solid transparent;
padding: var(--chat--button--padding, calc(var(--chat--spacing) * 1 / 2) var(--chat--spacing));
padding: var(--chat--button--padding);
font-size: 1rem;
line-height: 1.5;
border-radius: var(--chat--button--border-radius, var(--chat--border-radius));
border-radius: var(--chat--button--border-radius);
transition:
color var(--chat--transition-duration) ease-in-out,
background-color var(--chat--transition-duration) ease-in-out,
@@ -24,8 +24,8 @@
cursor: pointer;
&:hover {
color: var(--chat--button--hover--color, var(--chat--color-light));
background-color: var(--chat--button--hover--background, var(--chat--color-primary-shade-50));
color: var(--chat--button--hover--color);
background-color: var(--chat--button--hover--background);
text-decoration: none;
}

10
packages/frontend/@n8n/chat/src/components/ChatWindow.vue
View File

@@ -40,9 +40,9 @@ function toggle() {
position: fixed;
display: flex;
flex-direction: column;
bottom: var(--chat--window--bottom, var(--chat--spacing));
right: var(--chat--window--right, var(--chat--spacing));
z-index: var(--chat--window--z-index, 9999);
bottom: var(--chat--window--bottom);
right: var(--chat--window--right);
z-index: var(--chat--window--z-index);
max-width: calc(100% - var(--chat--window--right, var(--chat--spacing)) * 2);
max-height: calc(100% - var(--chat--window--bottom, var(--chat--spacing)) * 2);
@@ -71,8 +71,8 @@ function toggle() {
background: var(--chat--toggle--background);
color: var(--chat--toggle--color);
cursor: pointer;
width: var(--chat--toggle--width, var(--chat--toggle--size));
height: var(--chat--toggle--height, var(--chat--toggle--size));
width: var(--chat--toggle--width);
height: var(--chat--toggle--height);
border-radius: var(--chat--toggle--border-radius, 50%);
display: inline-flex;
align-items: center;

25
packages/frontend/@n8n/chat/src/components/Input.vue
View File

@@ -258,13 +258,13 @@ function adjustHeight(event: Event) {
textarea {
font-family: inherit;
font-size: var(--chat--input--font-size, inherit);
font-size: var(--chat--input--font-size);
width: 100%;
border: var(--chat--input--border, 0);
border-radius: var(--chat--input--border-radius, 0);
padding: var(--chat--input--padding, 0.8rem);
border-radius: var(--chat--input--border-radius);
padding: var(--chat--input--padding);
min-height: var(--chat--textarea--height, 2.5rem); // Set a smaller initial height
max-height: var(--chat--textarea--max-height, 30rem);
max-height: var(--chat--textarea--max-height);
height: var(--chat--textarea--height, 2.5rem); // Set initial height same as min-height
resize: none;
overflow-y: auto;
@@ -274,7 +274,7 @@ function adjustHeight(event: Event) {
line-height: var(--chat--input--line-height, 1.5);
&::placeholder {
font-size: var(--chat--input--placeholder--font-size, var(--chat--input--font-size, inherit));
font-size: var(--chat--input--placeholder--font-size, var(--chat--input--font-size));
}
&:focus,
&:hover {
@@ -315,20 +315,17 @@ function adjustHeight(event: Event) {
--chat--input--send--button--background-hover,
var(--chat--input--send--button--background)
);
color: var(--chat--input--send--button--color-hover, var(--chat--color-secondary-shade-50));
color: var(--chat--input--send--button--color-hover);
}
}
}
.chat-input-file-button {
background: var(--chat--input--file--button--background, white);
color: var(--chat--input--file--button--color, var(--chat--color-secondary));
color: var(--chat--input--file--button--color);
&:hover {
background: var(
--chat--input--file--button--background-hover,
var(--chat--input--file--button--background)
);
color: var(--chat--input--file--button--color-hover, var(--chat--color-secondary-shade-50));
background: var(--chat--input--file--button--background-hover);
color: var(--chat--input--file--button--color-hover);
}
}
@@ -340,11 +337,11 @@ function adjustHeight(event: Event) {
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
padding: var(--chat--files-spacing, 0.25rem);
padding: var(--chat--files-spacing);
}
.chat-input-left-panel {
width: var(--chat--input--left--panel--width, 2rem);
width: var(--chat--input--left--panel--width);
margin-left: 0.4rem;
}
</style>

43
packages/frontend/@n8n/chat/src/components/Layout.vue
View File

@@ -43,46 +43,33 @@ onBeforeUnmount(() => {
display: flex;
overflow-y: auto;
flex-direction: column;
font-family: var(
--chat--font-family,
(
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
'Helvetica Neue',
sans-serif
)
);
font-family: var(--chat--font-family);
.chat-header {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1em;
height: var(--chat--header-height, auto);
padding: var(--chat--header--padding, var(--chat--spacing));
background: var(--chat--header--background, var(--chat--color-dark));
color: var(--chat--header--color, var(--chat--color-light));
border-top: var(--chat--header--border-top, none);
border-bottom: var(--chat--header--border-bottom, none);
border-left: var(--chat--header--border-left, none);
border-right: var(--chat--header--border-right, none);
height: var(--chat--header-height);
padding: var(--chat--header--padding);
background: var(--chat--header--background);
color: var(--chat--header--color);
border-top: var(--chat--header--border-top);
border-bottom: var(--chat--header--border-bottom);
border-left: var(--chat--header--border-left);
border-right: var(--chat--header--border-right);
h1 {
font-size: var(--chat--heading--font-size);
color: var(--chat--header--color, var(--chat--color-light));
color: var(--chat--header--color);
}
p {
font-size: var(--chat--subtitle--font-size, inherit);
line-height: var(--chat--subtitle--line-height, 1.8);
font-size: var(--chat--subtitle--font-size);
line-height: var(--chat--subtitle--line-height);
}
}
.chat-body {
background: var(--chat--body--background, var(--chat--color-light));
background: var(--chat--body--background);
flex: 1;
display: flex;
flex-direction: column;
@@ -93,8 +80,8 @@ onBeforeUnmount(() => {
.chat-footer {
border-top: 1px solid var(--chat--color-light-shade-100);
background: var(--chat--footer--background, var(--chat--color-light));
color: var(--chat--footer--color, var(--chat--color-dark));
background: var(--chat--footer--background);
color: var(--chat--footer--color);
}
}
</style>

14
packages/frontend/@n8n/chat/src/components/Message.vue
View File

@@ -133,9 +133,9 @@ onMounted(async () => {
display: block;
position: relative;
max-width: fit-content;
font-size: var(--chat--message--font-size, 1rem);
padding: var(--chat--message--padding, var(--chat--spacing));
border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
font-size: var(--chat--message--font-size);
padding: var(--chat--message--padding);
border-radius: var(--chat--message--border-radius);
scroll-margin: 3rem;
.chat-message-actions {
@@ -160,13 +160,13 @@ onMounted(async () => {
}
p {
line-height: var(--chat--message-line-height, 1.5);
line-height: var(--chat--message-line-height);
word-wrap: break-word;
}
// Default message gap is half of the spacing
+ .chat-message {
margin-top: var(--chat--message--margin-bottom, calc(var(--chat--spacing) * 1));
margin-top: var(--chat--message--margin-bottom);
}
// Spacing between messages from different senders is double the individual message gap
@@ -178,7 +178,7 @@ onMounted(async () => {
&.chat-message-from-bot {
&:not(.chat-message-transparent) {
background-color: var(--chat--message--bot--background);
border: var(--chat--message--bot--border, none);
border: var(--chat--message--bot--border);
}
color: var(--chat--message--bot--color);
border-bottom-left-radius: 0;
@@ -187,7 +187,7 @@ onMounted(async () => {
&.chat-message-from-user {
&:not(.chat-message-transparent) {
background-color: var(--chat--message--user--background);
border: var(--chat--message--user--border, none);
border: var(--chat--message--user--border);
}
color: var(--chat--message--user--color);
margin-left: auto;

2
packages/frontend/@n8n/chat/src/components/MessagesList.vue
View File

@@ -51,6 +51,6 @@ watch(
.chat-messages-list {
margin-top: auto;
display: block;
padding: var(--chat--messages-list--padding, var(--chat--spacing));
padding: var(--chat--messages-list--padding);
}
</style>

87
packages/frontend/@n8n/chat/src/css/_tokens.scss
View File

@@ -1,4 +1,5 @@
:root {
/* Colors */
--chat--color-primary: #e74266;
--chat--color-primary-shade-50: #db4061;
--chat--color-primary-shade-100: #cf3c5c;
@@ -13,26 +14,106 @@
--chat--color-disabled: #777980;
--chat--color-typing: #404040;
/* Base Layout */
--chat--spacing: 1rem;
--chat--border-radius: 0.25rem;
--chat--transition-duration: 0.15s;
--chat--font-family: (
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
'Helvetica Neue',
sans-serif
);
/* Window Dimensions */
--chat--window--width: 400px;
--chat--window--height: 600px;
--chat--window--bottom: var(--chat--spacing);
--chat--window--right: var(--chat--spacing);
--chat--window--z-index: 9999;
--chat--window--border: 1px solid var(--chat--color-light-shade-50);
--chat--window--border-radius: var(--chat--border-radius);
--chat--window--margin-bottom: var(--chat--spacing);
--chat--textarea--height: 50px;
/* Header Styles */
--chat--header-height: auto;
--chat--header--padding: var(--chat--spacing);
--chat--header--background: var(--chat--color-dark);
--chat--header--color: var(--chat--color-light);
--chat--header--border-top: none;
--chat--header--border-bottom: none;
--chat--header--border-left: none;
--chat--header--border-right: none;
--chat--heading--font-size: 2em;
--chat--subtitle--font-size: inherit;
--chat--subtitle--line-height: 1.8;
/* Message Styles */
--chat--message--font-size: 1rem;
--chat--message--padding: var(--chat--spacing);
--chat--message--border-radius: var(--chat--border-radius);
--chat--message-line-height: 1.5;
--chat--message--margin-bottom: calc(var(--chat--spacing) * 1);
--chat--message--bot--background: var(--chat--color-white);
--chat--message--bot--color: var(--chat--color-dark);
--chat--message--bot--border: none;
--chat--message--user--background: var(--chat--color-secondary);
--chat--message--user--color: var(--chat--color-white);
--chat--message--user--border: none;
--chat--message--pre--background: rgba(0, 0, 0, 0.05);
--chat--messages-list--padding: var(--chat--spacing);
/* Toggle Button */
--chat--toggle--size: 64px;
--chat--toggle--width: var(--chat--toggle--size);
--chat--toggle--height: var(--chat--toggle--size);
--chat--toggle--border-radius: 50%;
--chat--toggle--background: var(--chat--color-primary);
--chat--toggle--hover--background: var(--chat--color-primary-shade-50);
--chat--toggle--active--background: var(--chat--color-primary-shade-100);
--chat--toggle--color: var(--chat--color-white);
--chat--toggle--size: 64px;
--chat--heading--font-size: 2em;
/* Input Area */
--chat--textarea--height: 50px;
--chat--textarea--max-height: 30rem;
--chat--input--font-size: inherit;
--chat--input--border: 0;
--chat--input--border-radius: 0;
--chat--input--padding: 0.8rem;
--chat--input--background: var(--chat--color-white);
--chat--input--text-color: initial;
--chat--input--line-height: 1.5;
--chat--input--placeholder--font-size: var(--chat--input--font-size);
--chat--input--border-active: 0;
--chat--input--left--panel--width: 2rem;
/* Button Styles */
--chat--button--color: var(--chat--color-light);
--chat--button--background: var(--chat--color-primary);
--chat--button--padding: calc(var(--chat--spacing) * 1 / 2) var(--chat--spacing);
--chat--button--border-radius: var(--chat--border-radius);
--chat--button--hover--color: var(--chat--color-light);
--chat--button--hover--background: var(--chat--color-primary-shade-50);
--chat--close--button--color-hover: var(--chat--color-primary);
/* Send and File Buttons */
--chat--input--send--button--background: var(--chat--color-white);
--chat--input--send--button--color: var(--chat--color-light);
--chat--input--send--button--background-hover: var(--chat--color-primary-shade-50);
--chat--input--send--button--color-hover: var(--chat--color-secondary-shade-50);
--chat--input--file--button--background: var(--chat--color-white);
--chat--input--file--button--color: var(--chat--color-secondary);
--chat--input--file--button--background-hover: var(--chat--input--file--button--background);
--chat--input--file--button--color-hover: var(--chat--color-secondary-shade-50);
--chat--files-spacing: 0.25rem;
/* Body and Footer */
--chat--body--background: var(--chat--color-light);
--chat--footer--background: var(--chat--color-light);
--chat--footer--color: var(--chat--color-dark);
}