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

feat(editor): T2W canvas and assistant prompt design improvements (no-changelog) (#19897)

Browse Source
This commit is contained in:
Michael Drury 2025-09-25 15:02:47 +01:00 committed by GitHub
parent 0f19655f95
commit 12d7a9fd12
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 2698 additions and 559 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/@n8n/design-system/package.json
View File

@ -47,7 +47,8 @@
"vite": "catalog:",
"vitest": "catalog:",
"vitest-mock-extended": "catalog:",
"vue-tsc": "catalog:frontend"
"vue-tsc": "catalog:frontend",
"@vue/test-utils": "catalog:frontend"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",

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

@ -1,4 +1,5 @@
import { render } from '@testing-library/vue';
import { mount } from '@vue/test-utils';
import { vi } from 'vitest';
import AskAssistantChat from './AskAssistantChat.vue';
@ -239,7 +240,7 @@ describe('AskAssistantChat', () => {
expect(wrapper.queryByTestId('error-retry-button')).not.toBeInTheDocument();
});
it('limits maximum input length when maxLength prop is specified', async () => {
it('limits maximum input length when maxCharacterLength prop is specified', async () => {
const wrapper = render(AskAssistantChat, {
global: {
directives: {
@ -249,13 +250,14 @@ describe('AskAssistantChat', () => {
},
props: {
user: { firstName: 'Kobi', lastName: 'Dog' },
maxLength: 100,
maxCharacterLength: 100,
},
});
expect(wrapper.container).toMatchSnapshot();
const textarea = wrapper.queryByTestId('chat-input');
expect(textarea).toHaveAttribute('maxLength', '100');
// The maxCharacterLength prop is passed to the N8nPromptInput component
// but the textarea element itself doesn't have this attribute
// We can verify the component receives the prop via snapshot
});
describe('collapseToolMessages', () => {
@ -981,4 +983,75 @@ describe('AskAssistantChat', () => {
expect(wrapper.container.textContent).not.toContain('Quick reply');
});
});
describe('onSendMessage', () => {
it('should emit message when N8nPromptInput submits', async () => {
const wrapper = mount(AskAssistantChat, {
global: {
directives: { n8nHtml },
stubs: {
...Object.fromEntries(stubs.map((stub) => [stub, true])),
N8nPromptInput: {
name: 'N8nPromptInput',
props: [
'modelValue',
'inputPlaceholder',
'disabled',
'streaming',
'maxCharacterLength',
],
emits: ['update:modelValue', 'submit', 'stop'],
setup(
_: unknown,
{
emit,
expose,
}: {
emit: (event: string, ...args: unknown[]) => void;
expose: (exposed: Record<string, unknown>) => void;
},
) {
const focusInput = vi.fn();
expose({ focusInput });
return {
handleSubmit: () => emit('submit'),
updateValue: (e: Event) => {
const target = e.target as HTMLTextAreaElement;
emit('update:modelValue', target.value);
},
};
},
template: `
<div data-test-id="chat-input" class="prompt-input-stub">
<textarea :value="modelValue" @input="updateValue"></textarea>
<button @click="handleSubmit">Send</button>
</div>
`,
},
},
},
props: {
user: { firstName: 'Test', lastName: 'User' },
},
});
const textarea = wrapper.find('[data-test-id="chat-input"] textarea');
await textarea.setValue('Test message');
await textarea.trigger('input');
const sendButton = wrapper.find('[data-test-id="chat-input"] button');
await sendButton.trigger('click');
// Verify message was emitted with the correct value
expect(wrapper.emitted('message')).toBeTruthy();
const messageEvents = wrapper.emitted('message');
expect(messageEvents?.[0]).toEqual(['Test message']);
await wrapper.vm.$nextTick();
wrapper.unmount();
});
});
});

210
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue';
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import MessageWrapper from './messages/MessageWrapper.vue';
import { useI18n } from '../../composables/useI18n';
@ -11,12 +11,11 @@ import AssistantText from '../AskAssistantText/AssistantText.vue';
import InlineAskAssistantButton from '../InlineAskAssistantButton/InlineAskAssistantButton.vue';
import N8nButton from '../N8nButton';
import N8nIcon from '../N8nIcon';
import N8nPromptInput from '../N8nPromptInput';
import { getSupportedMessageComponent } from './messages/helpers';
const { t } = useI18n();
const MAX_CHAT_INPUT_HEIGHT = 100;
interface Props {
user?: {
firstName: string;
@ -28,10 +27,10 @@ interface Props {
loadingMessage?: string;
sessionId?: string;
title?: string;
placeholder?: string;
inputPlaceholder?: string;
scrollOnNewMessage?: boolean;
showStop?: boolean;
maxLength?: number;
maxCharacterLength?: number;
}
const emit = defineEmits<{
@ -55,6 +54,8 @@ const props = withDefaults(defineProps<Props>(), {
loadingMessage: undefined,
sessionId: undefined,
scrollOnNewMessage: false,
maxCharacterLength: undefined,
inputPlaceholder: undefined,
});
function normalizeMessages(messages: ChatUI.AssistantMessage[]): ChatUI.AssistantMessage[] {
@ -159,9 +160,10 @@ const lastMessageQuickReplies = computed(() => {
});
const textInputValue = ref<string>('');
const promptInputRef = ref<InstanceType<typeof N8nPromptInput>>();
const chatInput = ref<HTMLTextAreaElement | null>(null);
const messagesRef = ref<HTMLDivElement | null>(null);
const inputWrapperRef = ref<HTMLDivElement | null>(null);
const sessionEnded = computed(() => {
return isEndOfSessionEvent(props.messages?.[props.messages.length - 1]);
@ -184,19 +186,8 @@ function onQuickReply(opt: ChatUI.QuickReply) {
}
function onSendMessage() {
if (sendDisabled.value) return;
emit('message', textInputValue.value);
textInputValue.value = '';
if (chatInput.value) {
chatInput.value.style.height = 'auto';
}
}
function growInput() {
if (!chatInput.value) return;
chatInput.value.style.height = 'auto';
const scrollHeight = chatInput.value.scrollHeight;
chatInput.value.style.height = `${Math.min(scrollHeight, MAX_CHAT_INPUT_HEIGHT)}px`;
}
function onRateMessage(feedback: RatingFeedback) {
@ -211,9 +202,29 @@ function scrollToBottom() {
});
}
}
function isScrolledToBottom(): boolean {
if (!messagesRef.value) return false;
const threshold = 10; // Allow for small rounding errors
const isAtBottom =
Math.abs(
messagesRef.value.scrollHeight - messagesRef.value.scrollTop - messagesRef.value.clientHeight,
) <= threshold;
return isAtBottom;
}
function scrollToBottomImmediate() {
if (messagesRef.value) {
messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
}
}
watch(sendDisabled, () => {
chatInput.value?.focus();
promptInputRef.value?.focusInput();
});
watch(
() => props.messages,
async (messages) => {
@ -230,10 +241,68 @@ watch(
{ immediate: true, deep: true },
);
// Setup ResizeObserver to maintain scroll position when input height changes
let resizeObserver: ResizeObserver | null = null;
let scrollLockActive = false;
let scrollHandler: (() => void) | null = null;
onMounted(() => {
if (inputWrapperRef.value && messagesRef.value && 'ResizeObserver' in window) {
// Track user scroll to determine if they want to stay at bottom
let userIsAtBottom = true;
// Create scroll handler function so we can remove it later
scrollHandler = () => {
if (!scrollLockActive) {
userIsAtBottom = isScrolledToBottom();
}
};
// Monitor user scrolling
messagesRef.value.addEventListener('scroll', scrollHandler);
// Monitor input size changes
resizeObserver = new ResizeObserver(() => {
// Only maintain scroll if user was at bottom
if (userIsAtBottom) {
scrollLockActive = true;
// Double RAF for layout stability
requestAnimationFrame(() => {
requestAnimationFrame(() => {
scrollToBottomImmediate();
// Check if we're still at bottom after auto-scroll
userIsAtBottom = isScrolledToBottom();
scrollLockActive = false;
});
});
}
});
resizeObserver.observe(inputWrapperRef.value);
// Start at bottom
scrollToBottomImmediate();
}
});
onUnmounted(() => {
// Remove scroll event listener to prevent memory leak
if (scrollHandler && messagesRef.value) {
messagesRef.value.removeEventListener('scroll', scrollHandler);
scrollHandler = null;
}
// Disconnect ResizeObserver
if (resizeObserver) {
resizeObserver.disconnect();
resizeObserver = null;
}
});
// Expose focusInput method to parent components
defineExpose({
focusInput: () => {
chatInput.value?.focus();
promptInputRef.value?.focusInput();
},
});
</script>
@ -339,51 +408,26 @@ defineExpose({
</div>
</div>
<div
ref="inputWrapperRef"
:class="{ [$style.inputWrapper]: true, [$style.disabledInput]: sessionEnded }"
data-test-id="chat-input-wrapper"
>
<div v-if="$slots.inputPlaceholder" :class="$style.inputPlaceholder">
<slot name="inputPlaceholder" />
</div>
<template v-else>
<textarea
ref="chatInput"
v-model="textInputValue"
class="ignore-key-press-node-creator ignore-key-press-canvas"
:class="{ [$style.disabled]: sessionEnded || streaming || disabled }"
:disabled="sessionEnded || streaming || disabled"
:placeholder="placeholder ?? t('assistantChat.inputPlaceholder')"
rows="1"
wrap="hard"
:maxlength="maxLength"
data-test-id="chat-input"
@keydown.enter.exact.prevent="onSendMessage"
@input.prevent="growInput"
@keydown.stop
/>
<N8nButton
v-if="showStop && streaming"
:class="$style.stopButton"
icon="square"
size="large"
type="danger"
outline
square
data-test-id="send-message-button"
@click="emit('stop')"
/>
<N8nButton
v-else
:class="$style.sendButton"
icon="send"
:text="true"
size="large"
square
data-test-id="send-message-button"
:disabled="sendDisabled"
@click="onSendMessage"
/>
</template>
<N8nPromptInput
v-else
ref="promptInputRef"
v-model="textInputValue"
:placeholder="inputPlaceholder || t('assistantChat.inputPlaceholder')"
:disabled="sessionEnded || disabled"
:streaming="streaming"
:max-length="maxCharacterLength"
:refocus-after-send="true"
data-test-id="chat-input"
@submit="onSendMessage"
@stop="emit('stop')"
/>
</div>
</div>
</template>
@ -394,10 +438,9 @@ defineExpose({
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
background-color: var(--color-background-light);
}
:root .stopButton {
--button-border-color: transparent;
}
.header {
height: 65px; // same as header height in editor
padding: 0 var(--spacing-l);
@ -420,6 +463,7 @@ defineExpose({
background-color: var(--color-background-light);
border: var(--border-base);
border-top: 0;
border-bottom: 0;
position: relative;
pre,
@ -439,6 +483,7 @@ defineExpose({
width: 100%;
height: 100%;
padding: var(--spacing-xs);
padding-bottom: var(--spacing-xl); // Extra padding for fade area
overflow-y: auto;
@supports not (selector(::-webkit-scrollbar)) {
@ -511,30 +556,24 @@ defineExpose({
}
.inputWrapper {
display: flex;
background-color: var(--color-foreground-xlight);
border: var(--border-base);
padding: var(--spacing-4xs) var(--spacing-2xs) var(--spacing-xs);
background-color: transparent;
width: 100%;
border-top: 0;
position: relative;
border-left: var(--border-base);
border-right: var(--border-base);
textarea {
border: none;
background-color: transparent;
width: 100%;
font-size: var(--spacing-xs);
padding: var(--spacing-xs);
outline: none;
color: var(--color-text-dark);
resize: none;
font-family: inherit;
}
}
.sendButton {
color: var(--color-text-base) !important;
&[disabled] {
color: var(--color-text-light) !important;
// Add a gradient fade from the chat to the input
&::before {
content: '';
position: absolute;
top: calc(-1 * var(--spacing-m));
left: 0;
right: var(--spacing-xs);
height: var(--spacing-m);
background: linear-gradient(to bottom, transparent 0%, var(--color-background-light) 100%);
pointer-events: none;
z-index: 1;
}
}
@ -546,11 +585,6 @@ defineExpose({
}
}
textarea.disabled {
background-color: var(--color-foreground-base);
cursor: not-allowed;
}
.inputPlaceholder {
width: 100%;
}

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

@ -165,37 +165,53 @@ exports[`AskAssistantChat > does not render retry button if no error is present
class="inputWrapper"
data-test-id="chat-input-wrapper"
>
<textarea
class="ignore-key-press-node-creator ignore-key-press-canvas"
<div
class="container"
data-test-id="chat-input"
placeholder="Enter your response..."
rows="1"
wrap="hard"
/>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="send"
label=""
loading="false"
outline="false"
size="large"
square="true"
text="true"
type="primary"
/>
style="min-height: 40px;"
>
<!-- Warning banner when character limit is reached -->
<!--v-if-->
<!-- Single line mode: input and button side by side -->
<div
class="singleLineWrapper"
>
<textarea
class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
data-test-id="chat-input-textarea"
maxlength="1000"
placeholder="Enter your response..."
rows="1"
/>
<div
class="inlineActions"
>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="arrow-up"
iconsize="large"
label=""
loading="false"
outline="false"
size="small"
square="true"
text="false"
type="primary"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`AskAssistantChat > limits maximum input length when maxLength prop is specified 1`] = `
exports[`AskAssistantChat > limits maximum input length when maxCharacterLength prop is specified 1`] = `
<div>
<div
class="container"
@ -350,32 +366,47 @@ exports[`AskAssistantChat > limits maximum input length when maxLength prop is s
class="inputWrapper"
data-test-id="chat-input-wrapper"
>
<textarea
class="ignore-key-press-node-creator ignore-key-press-canvas"
<div
class="container"
data-test-id="chat-input"
maxlength="100"
placeholder="Enter your response..."
rows="1"
wrap="hard"
/>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="send"
label=""
loading="false"
outline="false"
size="large"
square="true"
text="true"
type="primary"
/>
style="min-height: 40px;"
>
<!-- Warning banner when character limit is reached -->
<!--v-if-->
<!-- Single line mode: input and button side by side -->
<div
class="singleLineWrapper"
>
<textarea
class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
data-test-id="chat-input-textarea"
maxlength="100"
placeholder="Enter your response..."
rows="1"
/>
<div
class="inlineActions"
>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="arrow-up"
iconsize="large"
label=""
loading="false"
outline="false"
size="small"
square="true"
text="false"
type="primary"
/>
</div>
</div>
</div>
</div>
</div>
</div>
@ -1182,31 +1213,47 @@ Testing more code
class="inputWrapper"
data-test-id="chat-input-wrapper"
>
<textarea
class="ignore-key-press-node-creator ignore-key-press-canvas"
<div
class="container"
data-test-id="chat-input"
placeholder="Enter your response..."
rows="1"
wrap="hard"
/>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="send"
label=""
loading="false"
outline="false"
size="large"
square="true"
text="true"
type="primary"
/>
style="min-height: 40px;"
>
<!-- Warning banner when character limit is reached -->
<!--v-if-->
<!-- Single line mode: input and button side by side -->
<div
class="singleLineWrapper"
>
<textarea
class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
data-test-id="chat-input-textarea"
maxlength="1000"
placeholder="Enter your response..."
rows="1"
/>
<div
class="inlineActions"
>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="arrow-up"
iconsize="large"
label=""
loading="false"
outline="false"
size="small"
square="true"
text="false"
type="primary"
/>
</div>
</div>
</div>
</div>
</div>
</div>
@ -1367,31 +1414,47 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
class="inputWrapper"
data-test-id="chat-input-wrapper"
>
<textarea
class="ignore-key-press-node-creator ignore-key-press-canvas"
<div
class="container"
data-test-id="chat-input"
placeholder="Enter your response..."
rows="1"
wrap="hard"
/>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="send"
label=""
loading="false"
outline="false"
size="large"
square="true"
text="true"
type="primary"
/>
style="min-height: 40px;"
>
<!-- Warning banner when character limit is reached -->
<!--v-if-->
<!-- Single line mode: input and button side by side -->
<div
class="singleLineWrapper"
>
<textarea
class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
data-test-id="chat-input-textarea"
maxlength="1000"
placeholder="Enter your response..."
rows="1"
/>
<div
class="inlineActions"
>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="arrow-up"
iconsize="large"
label=""
loading="false"
outline="false"
size="small"
square="true"
text="false"
type="primary"
/>
</div>
</div>
</div>
</div>
</div>
</div>
@ -1643,32 +1706,48 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
class="inputWrapper disabledInput"
data-test-id="chat-input-wrapper"
>
<textarea
class="ignore-key-press-node-creator ignore-key-press-canvas disabled"
<div
class="container disabled"
data-test-id="chat-input"
disabled=""
placeholder="Enter your response..."
rows="1"
wrap="hard"
/>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="send"
label=""
loading="false"
outline="false"
size="large"
square="true"
text="true"
type="primary"
/>
style="min-height: 40px;"
>
<!-- Warning banner when character limit is reached -->
<!--v-if-->
<!-- Single line mode: input and button side by side -->
<div
class="singleLineWrapper"
>
<textarea
class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
data-test-id="chat-input-textarea"
disabled=""
maxlength="1000"
placeholder="Enter your response..."
rows="1"
/>
<div
class="inlineActions"
>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="arrow-up"
iconsize="large"
label=""
loading="false"
outline="false"
size="small"
square="true"
text="false"
type="primary"
/>
</div>
</div>
</div>
</div>
</div>
</div>
@ -1853,31 +1932,47 @@ exports[`AskAssistantChat > renders error message correctly with retry button 1`
class="inputWrapper"
data-test-id="chat-input-wrapper"
>
<textarea
class="ignore-key-press-node-creator ignore-key-press-canvas"
<div
class="container"
data-test-id="chat-input"
placeholder="Enter your response..."
rows="1"
wrap="hard"
/>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="send"
label=""
loading="false"
outline="false"
size="large"
square="true"
text="true"
type="primary"
/>
style="min-height: 40px;"
>
<!-- Warning banner when character limit is reached -->
<!--v-if-->
<!-- Single line mode: input and button side by side -->
<div
class="singleLineWrapper"
>
<textarea
class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
data-test-id="chat-input-textarea"
maxlength="1000"
placeholder="Enter your response..."
rows="1"
/>
<div
class="inlineActions"
>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="arrow-up"
iconsize="large"
label=""
loading="false"
outline="false"
size="small"
square="true"
text="false"
type="primary"
/>
</div>
</div>
</div>
</div>
</div>
</div>
@ -2118,31 +2213,47 @@ catch(e) {
class="inputWrapper"
data-test-id="chat-input-wrapper"
>
<textarea
class="ignore-key-press-node-creator ignore-key-press-canvas"
<div
class="container"
data-test-id="chat-input"
placeholder="Enter your response..."
rows="1"
wrap="hard"
/>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="send"
label=""
loading="false"
outline="false"
size="large"
square="true"
text="true"
type="primary"
/>
style="min-height: 40px;"
>
<!-- Warning banner when character limit is reached -->
<!--v-if-->
<!-- Single line mode: input and button side by side -->
<div
class="singleLineWrapper"
>
<textarea
class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
data-test-id="chat-input-textarea"
maxlength="1000"
placeholder="Enter your response..."
rows="1"
/>
<div
class="inlineActions"
>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="arrow-up"
iconsize="large"
label=""
loading="false"
outline="false"
size="small"
square="true"
text="false"
type="primary"
/>
</div>
</div>
</div>
</div>
</div>
</div>
@ -2315,32 +2426,47 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
class="inputWrapper"
data-test-id="chat-input-wrapper"
>
<textarea
class="ignore-key-press-node-creator ignore-key-press-canvas disabled"
<div
class="container"
data-test-id="chat-input"
disabled=""
placeholder="Enter your response..."
rows="1"
wrap="hard"
/>
<n8n-button-stub
active="false"
block="false"
class="sendButton"
data-test-id="send-message-button"
disabled="true"
element="button"
icon="send"
label=""
loading="false"
outline="false"
size="large"
square="true"
text="true"
type="primary"
/>
style="min-height: 40px;"
>
<!-- Warning banner when character limit is reached -->
<!--v-if-->
<!-- Single line mode: input and button side by side -->
<div
class="singleLineWrapper"
>
<textarea
class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
data-test-id="chat-input-textarea"
maxlength="1000"
placeholder="Enter your response..."
rows="1"
/>
<div
class="inlineActions"
>
<n8n-button-stub
active="false"
block="false"
class="stopButton"
data-test-id="send-message-button"
disabled="false"
element="button"
icon="filled-square"
iconsize="small"
label=""
loading="false"
outline="false"
size="small"
square="true"
text="false"
type="primary"
/>
</div>
</div>
</div>
</div>
</div>
</div>

3
packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/filled-square.svg Normal file
View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 10 10" fill="currentColor" overflow="hidden" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="10" height="10" rx="2" ry="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 164 B

2
packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
View File

@ -2,6 +2,7 @@ import Binary from './custom/binary.svg';
import BoltFilled from './custom/bolt-filled.svg';
import Continue from './custom/continue.svg';
import EmptyOutput from './custom/empty-output.svg';
import FilledSquare from './custom/filled-square.svg';
import GripLinesVertical from './custom/grip-lines-vertical.svg';
import Mcp from './custom/mcp.svg';
import NodeDirty from './custom/node-dirty.svg';
@ -415,6 +416,7 @@ export const updatedIconSet = {
// custom icons
// NOTE: ensure to replace any colors with "currentColor" in SVG
'bolt-filled': BoltFilled,
'filled-square': FilledSquare,
'grip-lines-vertical': GripLinesVertical,
variable: IconLucideVariable,
'pop-out': PopOut,

282
packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.stories.ts Normal file
View File

@ -0,0 +1,282 @@
import type { StoryFn } from '@storybook/vue3-vite';
import { action } from 'storybook/actions';
import N8nPromptInput from './N8nPromptInput.vue';
export default {
title: 'Atoms/PromptInput',
component: N8nPromptInput,
argTypes: {
modelValue: {
control: 'text',
},
placeholder: {
control: 'text',
},
maxLength: {
control: 'number',
},
maxLinesBeforeScroll: {
control: 'number',
},
minLines: {
control: 'number',
},
streaming: {
control: 'boolean',
},
disabled: {
control: 'boolean',
},
refocusAfterSend: {
control: 'boolean',
},
},
parameters: {
backgrounds: { default: '--color-background-light' },
},
};
const methods = {
onUpdateModelValue: action('update:modelValue'),
onSubmit: action('submit'),
onStop: action('stop'),
onFocus: action('focus'),
onBlur: action('blur'),
};
const Template: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nPromptInput,
},
template: `
<div style="width: 500px; max-width: 100%;">
<n8n-prompt-input
v-bind="args"
:modelValue="val"
@update:modelValue="handleUpdateModelValue"
@submit="onSubmit"
@stop="onStop"
@focus="onFocus"
@blur="onBlur"
/>
</div>
`,
data() {
return {
val: this.args.modelValue || '',
};
},
watch: {
args: {
handler(newArgs) {
if (newArgs.modelValue !== undefined) {
this.val = newArgs.modelValue;
}
},
deep: true,
immediate: true,
},
},
methods: {
...methods,
handleUpdateModelValue(value: string) {
this.val = value;
this.onUpdateModelValue(value);
},
},
});
export const Default = Template.bind({});
Default.args = {
placeholder: 'Type your message here...',
maxLength: 1000,
};
export const SingleLine = Template.bind({});
SingleLine.args = {
placeholder: 'Type your message here...',
maxLength: 1000,
minLines: 1,
};
export const MultiLine = Template.bind({});
MultiLine.args = {
placeholder: 'Type your message here...',
maxLength: 1000,
minLines: 3,
};
export const Streaming = Template.bind({});
Streaming.args = {
modelValue: 'This is currently being processed...',
placeholder: 'Type your message here...',
streaming: true,
maxLength: 1000,
};
export const Disabled = Template.bind({});
Disabled.args = {
placeholder: 'This input is disabled',
disabled: true,
maxLength: 1000,
};
export const WithInitialText = Template.bind({});
WithInitialText.args = {
modelValue:
'Hello, this is some initial text that spans multiple lines\nto show how the component handles existing content.',
placeholder: 'Type your message here...',
maxLength: 1000,
};
export const AtCharacterLimit = Template.bind({});
AtCharacterLimit.args = {
modelValue: 'This message is exactly at the character limit!!',
placeholder: 'Type your message here...',
maxLength: 48,
};
export const WithRefocusAfterSend = Template.bind({});
WithRefocusAfterSend.args = {
placeholder: 'Input will refocus after send...',
maxLength: 1000,
refocusAfterSend: true,
};
const InteractiveTemplate: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nPromptInput,
},
template: `
<div>
<div style="width: 500px; max-width: 100%; margin-bottom: 20px;">
<n8n-prompt-input
v-bind="args"
:modelValue="val"
:streaming="streaming"
@update:modelValue="handleUpdateModelValue"
@submit="handleSubmit"
@stop="handleStop"
@focus="onFocus"
@blur="onBlur"
/>
</div>
<div style="padding: 10px; background: #f0f0f0; border-radius: 4px;">
<p><strong>Current value:</strong> {{ val }}</p>
<p><strong>Character count:</strong> {{ val.length }} / {{ args.maxLength }}</p>
<p><strong>Streaming:</strong> {{ streaming }}</p>
<button @click="streaming = !streaming" style="margin-top: 10px;">
Toggle Streaming (Current: {{ streaming ? 'ON' : 'OFF' }})
</button>
</div>
</div>
`,
data() {
return {
val: this.args.modelValue || '',
streaming: false,
};
},
watch: {
args: {
handler(newArgs) {
if (newArgs.modelValue !== undefined) {
this.val = newArgs.modelValue;
}
},
deep: true,
immediate: true,
},
},
methods: {
...methods,
handleUpdateModelValue(value: string) {
this.val = value;
this.onUpdateModelValue(value);
},
handleSubmit() {
this.onSubmit();
// Simulate processing
this.streaming = true;
setTimeout(() => {
this.streaming = false;
// Clear after "processing"
this.val = '';
}, 2000);
},
handleStop() {
this.onStop();
this.streaming = false;
},
},
});
export const Interactive = InteractiveTemplate.bind({});
Interactive.args = {
placeholder: 'Type a message and press Enter to send...',
maxLength: 500,
refocusAfterSend: true,
};
const MultipleInstancesTemplate: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nPromptInput,
},
template: `
<div style="display: flex; flex-direction: column; gap: 20px;">
<div>
<h3>Single Line (minLines: 1)</h3>
<div style="width: 500px; max-width: 100%;">
<n8n-prompt-input
:modelValue="val1"
@update:modelValue="val1 = $event"
:placeholder="'Single line input...'"
:min-lines="1"
:max-length="1000"
/>
</div>
</div>
<div>
<h3>Two Lines (minLines: 2)</h3>
<div style="width: 500px; max-width: 100%;">
<n8n-prompt-input
:modelValue="val2"
@update:modelValue="val2 = $event"
:placeholder="'Two line input...'"
:min-lines="2"
:max-length="1000"
/>
</div>
</div>
<div>
<h3>Three Lines (minLines: 3)</h3>
<div style="width: 500px; max-width: 100%;">
<n8n-prompt-input
:modelValue="val3"
@update:modelValue="val3 = $event"
:placeholder="'Three line input...'"
:min-lines="3"
:max-length="1000"
/>
</div>
</div>
</div>
`,
data() {
return {
val1: '',
val2: '',
val3: '',
};
},
});
export const DifferentSizes = MultipleInstancesTemplate.bind({});
DifferentSizes.args = {};

514
packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.test.ts Normal file
View File

@ -0,0 +1,514 @@
import userEvent from '@testing-library/user-event';
import { fireEvent } from '@testing-library/vue';
import { mount } from '@vue/test-utils';
import { createComponentRenderer } from '@n8n/design-system/__tests__/render';
import N8nPromptInput from './N8nPromptInput.vue';
const renderComponent = createComponentRenderer(N8nPromptInput);
describe('N8nPromptInput', () => {
describe('rendering', () => {
it('should render correctly with default props', () => {
const { container } = renderComponent({
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
expect(container).toMatchSnapshot();
});
it('should render with non-default placeholder', () => {
const { container } = renderComponent({
props: {
placeholder: 'Type your message here...',
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = container.querySelector('textarea');
expect(textarea).toHaveAttribute('placeholder', 'Type your message here...');
});
it('should render streaming state without disabling textarea', () => {
const { container } = renderComponent({
props: {
streaming: true,
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = container.querySelector('textarea');
// Textarea should NOT be disabled during streaming
expect(textarea).not.toHaveAttribute('disabled');
expect(container).toMatchSnapshot();
});
});
describe('mode switching', () => {
it('should start in single-line mode', () => {
const { container } = renderComponent({
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
expect(container.querySelector('.singleLineWrapper')).toBeTruthy();
expect(container.querySelector('.multilineTextarea')).toBeFalsy();
});
it('should switch to multiline mode when text contains newlines', async () => {
// Store original descriptor
const originalDescriptor = Object.getOwnPropertyDescriptor(
HTMLTextAreaElement.prototype,
'scrollHeight',
);
// Mock scrollHeight to simulate text that needs multiple lines
// The component checks if scrollHeight > 24 (single line height)
Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', {
configurable: true,
get(this: HTMLTextAreaElement) {
// Return larger height when text contains newlines
return this.value?.includes('\n') ? 72 : 24;
},
});
try {
const { container } = renderComponent({
props: {
modelValue: '',
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
// Initially should be single-line
expect(container.querySelector('.singleLineWrapper')).toBeTruthy();
expect(container.querySelector('.multilineTextarea')).toBeFalsy();
const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
// Update the textarea value with newlines
textarea.value = 'Line 1\nLine 2\nLine 3';
// Trigger the input event which calls adjustHeight
await fireEvent.input(textarea);
// Wait for Vue to update the DOM
await vi.waitFor(() => {
// After adjustHeight runs, should be in multiline mode
return container.querySelector('.multilineTextarea');
});
// Verify we're now in multiline mode
expect(container.querySelector('.multilineTextarea')).toBeTruthy();
expect(container.querySelector('.singleLineWrapper')).toBeFalsy();
} finally {
// Always restore original descriptor or delete the mock
if (originalDescriptor) {
Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', originalDescriptor);
} else {
// If there was no original descriptor, delete the mocked property
// Use Reflect.deleteProperty for type-safe deletion
Reflect.deleteProperty(HTMLTextAreaElement.prototype, 'scrollHeight');
}
}
});
it('should handle clearing text', async () => {
const render = renderComponent({
props: {
modelValue: 'Some text',
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = render.container.querySelector('textarea');
expect(textarea).toHaveValue('Some text');
// Clear the text
await render.rerender({
modelValue: '',
});
// Should have empty value
expect(textarea).toHaveValue('');
// Should always have single line wrapper when empty
expect(render.container.querySelector('.singleLineWrapper')).toBeTruthy();
});
});
describe('character limit', () => {
it('should show warning banner when at character limit', () => {
const { container } = renderComponent({
props: {
// Start at max length to trigger warning
modelValue: '1234567890',
maxLength: 10,
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
// Warning should appear - look for actual element with class
const callout = container.querySelector('.warningCallout');
expect(callout).toBeTruthy();
});
it('should set maxlength attribute on textarea', () => {
const { container } = renderComponent({
props: {
maxLength: 100,
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = container.querySelector('textarea');
expect(textarea).toHaveAttribute('maxlength', '100');
});
it('should truncate pasted text that exceeds limit', async () => {
const user = userEvent.setup();
const render = renderComponent({
props: {
modelValue: '',
maxLength: 5,
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
await user.click(textarea);
await user.paste('1234567890');
// Browser should enforce maxlength, but we emit the truncated value
expect(render.emitted('update:modelValue')).toBeTruthy();
});
it('should prevent input when at max length', async () => {
const render = renderComponent({
props: {
modelValue: '12345',
maxLength: 5,
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
// Try to type when at max length
await fireEvent.keyDown(textarea, { key: 'a' });
// Should not emit update since we're at max
const updates = render.emitted('update:modelValue');
expect(updates).toBeFalsy();
});
});
describe('user interactions', () => {
it('should emit submit on Enter key in single-line mode', async () => {
const render = renderComponent({
props: {
modelValue: 'Test message',
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
await fireEvent.keyDown(textarea, { key: 'Enter' });
expect(render.emitted('submit')).toBeTruthy();
});
it('should not emit submit on Shift+Enter', async () => {
const render = renderComponent({
props: {
modelValue: 'Test message',
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
await fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true });
expect(render.emitted('submit')).toBeFalsy();
});
it('should emit update:modelValue when typing', async () => {
const user = userEvent.setup();
const render = renderComponent({
props: {
modelValue: '',
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
await user.type(textarea, 'Hello');
const updateEvents = render.emitted('update:modelValue');
expect(updateEvents).toBeTruthy();
expect(updateEvents?.length).toBeGreaterThan(0);
});
it('should emit focus event', async () => {
const render = renderComponent({
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
await fireEvent.focus(textarea);
expect(render.emitted('focus')).toBeTruthy();
});
it('should emit blur event', async () => {
const render = renderComponent({
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = render.container.querySelector('textarea') as HTMLTextAreaElement;
await fireEvent.focus(textarea);
await fireEvent.blur(textarea);
expect(render.emitted('blur')).toBeTruthy();
});
});
describe('button states', () => {
it('should disable send button when text is empty', () => {
const { container } = renderComponent({
props: {
modelValue: '',
},
global: {
stubs: {
N8nCallout: true,
N8nScrollArea: true,
N8nSendStopButton: {
props: ['disabled', 'streaming'],
template:
'<button :disabled="disabled" :class="{sendButton: !streaming, stopButton: streaming}"></button>',
},
},
},
});
const button = container.querySelector('button');
expect(button).toHaveAttribute('disabled');
});
it('should enable send button when text is present', () => {
const { container } = renderComponent({
props: {
modelValue: 'Some text',
},
global: {
stubs: {
N8nCallout: true,
N8nScrollArea: true,
N8nSendStopButton: {
props: ['disabled', 'streaming'],
template:
'<button :disabled="disabled" :class="{sendButton: !streaming, stopButton: streaming}"></button>',
},
},
},
});
const button = container.querySelector('button');
expect(button).not.toHaveAttribute('disabled');
});
it('should show stop button when streaming', () => {
const { container } = renderComponent({
props: {
modelValue: 'Some text',
streaming: true,
},
global: {
stubs: {
N8nCallout: true,
N8nScrollArea: true,
N8nSendStopButton: {
props: ['disabled', 'streaming'],
template:
'<button :disabled="disabled" :class="{sendButton: !streaming, stopButton: streaming}"></button>',
},
},
},
});
const button = container.querySelector('button');
expect(button).toHaveClass('stopButton');
expect(button).not.toHaveClass('sendButton');
});
it('should emit stop event when stop button is clicked', async () => {
const render = renderComponent({
props: {
modelValue: 'Some text',
streaming: true,
},
global: {
stubs: {
N8nCallout: true,
N8nScrollArea: true,
N8nSendStopButton: {
props: ['disabled', 'streaming'],
template:
'<button @click="$emit(\'stop\')" :class="{stopButton: streaming}">Stop</button>',
emits: ['stop'],
},
},
},
});
const stopButton = render.container.querySelector('.stopButton') as HTMLButtonElement;
expect(stopButton).toBeTruthy();
// Click the stop button
await fireEvent.click(stopButton);
// Verify stop event was emitted
expect(render.emitted('stop')).toBeTruthy();
expect(render.emitted('stop')?.[0]).toEqual([]);
});
it('should handle stop event from N8nSendStopButton component', async () => {
const wrapper = mount(N8nPromptInput, {
props: {
modelValue: 'Test message',
streaming: true,
},
global: {
stubs: {
N8nCallout: true,
N8nScrollArea: true,
N8nSendStopButton: {
name: 'N8nSendStopButton',
props: ['disabled', 'streaming'],
template: '<button @click="$emit(\'stop\')" class="stop-button-stub">Stop</button>',
emits: ['stop'],
},
},
},
});
// Find the stop button and click it
const stopButton = wrapper.find('.stop-button-stub');
expect(stopButton.exists()).toBe(true);
await stopButton.trigger('click');
// Check that N8nPromptInput emitted the stop event
expect(wrapper.emitted('stop')).toBeTruthy();
expect(wrapper.emitted('stop')?.[0]).toEqual([]);
wrapper.unmount();
});
});
describe('exposed methods', () => {
it('should expose focusInput method and focus the textarea', async () => {
const wrapper = mount(N8nPromptInput, {
props: {
modelValue: 'test',
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
// Get the textarea element
const textarea = wrapper.find('textarea').element as HTMLTextAreaElement;
// Spy on the focus method
const focusSpy = vi.spyOn(textarea, 'focus');
// Call the exposed focusInput method
await wrapper.vm.focusInput();
// Verify focus was called
expect(focusSpy).toHaveBeenCalled();
wrapper.unmount();
});
it('should focus input through ref access', () => {
const wrapper = renderComponent({
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = wrapper.container.querySelector('textarea') as HTMLTextAreaElement;
// The component should have a focusInput method that focuses the textarea
// Since we can't directly test the exposed method in this testing setup,
// we verify that the textarea element exists and can be focused
expect(textarea).toBeTruthy();
const focusSpy = vi.spyOn(textarea, 'focus');
textarea.focus();
expect(focusSpy).toHaveBeenCalled();
});
});
describe('edge cases', () => {
it('should handle very long single line text', () => {
const longText = 'a'.repeat(500);
const { container } = renderComponent({
props: {
modelValue: longText,
maxLength: 1000,
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
const textarea = container.querySelector('textarea');
expect(textarea).toHaveValue(longText);
});
it('should apply maxLinesBeforeScroll prop', () => {
// This prop affects the computed textAreaMaxHeight value
// which is used in multiline mode. We can test that the prop is accepted.
const { container } = renderComponent({
props: {
modelValue: 'Test',
maxLinesBeforeScroll: 2,
},
global: {
stubs: ['N8nCallout', 'N8nScrollArea', 'N8nSendStopButton'],
},
});
// Component should render without errors
const textarea = container.querySelector('textarea');
expect(textarea).toBeTruthy();
});
});
});

435
packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.vue Normal file
View File

@ -0,0 +1,435 @@
<script setup lang="ts">
import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue';
import { useCharacterLimit } from '../../composables/useCharacterLimit';
import { useI18n } from '../../composables/useI18n';
import N8nCallout from '../N8nCallout/Callout.vue';
import N8nScrollArea from '../N8nScrollArea/N8nScrollArea.vue';
import N8nSendStopButton from '../N8nSendStopButton';
export interface N8nPromptInputProps {
modelValue?: string;
placeholder?: string;
maxLength?: number;
maxLinesBeforeScroll?: number;
minLines?: number;
streaming?: boolean;
disabled?: boolean;
refocusAfterSend?: boolean;
}
const props = withDefaults(defineProps<N8nPromptInputProps>(), {
modelValue: '',
placeholder: '',
maxLength: 1000,
maxLinesBeforeScroll: 6,
minLines: 1,
streaming: false,
disabled: false,
refocusAfterSend: false,
});
const emit = defineEmits<{
'update:modelValue': [value: string];
submit: [];
stop: [];
focus: [event: FocusEvent];
blur: [event: FocusEvent];
}>();
const { t } = useI18n();
const textareaRef = ref<HTMLTextAreaElement>();
const containerRef = ref<HTMLDivElement>();
const isFocused = ref(false);
const textValue = ref(props.modelValue || '');
const singleLineHeight = 24;
const lineHeight = 18; // Height per line in multiline mode
const textareaHeight = ref<number>(
props.minLines > 1 ? lineHeight * props.minLines : singleLineHeight,
);
const isMultiline = ref(props.minLines > 1);
const textAreaMaxHeight = computed(() => {
return props.maxLinesBeforeScroll * 18;
});
const { characterCount, isOverLimit, isAtLimit } = useCharacterLimit({
value: textValue,
maxLength: toRef(props, 'maxLength'),
});
const showWarningBanner = computed(() => isAtLimit.value);
const sendDisabled = computed(
() => !textValue.value.trim() || props.streaming || props.disabled || isOverLimit.value,
);
const containerStyle = computed(() => {
return { minHeight: isMultiline.value ? '80px' : '40px' };
});
const textareaStyle = computed<{ height?: string; overflowY?: 'hidden' }>(() => {
if (!isMultiline.value) {
return {};
}
const height = Math.min(textareaHeight.value, textAreaMaxHeight.value);
return {
height: `${height}px`,
overflowY: 'hidden',
};
});
function adjustHeight() {
// Store focus state and scroll position before potential mode change
const wasFocused = document.activeElement === textareaRef.value;
const wasMultiline = isMultiline.value;
const minHeight = props.minLines > 1 ? lineHeight * props.minLines : singleLineHeight;
// If text is completely empty (not just whitespace), use minimum height
if (!textValue.value || textValue.value === '') {
// Respect minLines prop
if (props.minLines > 1) {
isMultiline.value = true;
textareaHeight.value = minHeight;
if (textareaRef.value) {
textareaRef.value.style.height = `${minHeight}px`;
}
} else {
isMultiline.value = false;
textareaHeight.value = singleLineHeight;
if (textareaRef.value) {
textareaRef.value.style.height = `${singleLineHeight}px`;
}
}
return;
}
// Measure the natural height
if (!textareaRef.value) return;
textareaRef.value.style.height = '0';
const scrollHeight = textareaRef.value.scrollHeight;
// Check if we need multiline mode
// Switch to multiline when text would wrap, when there's actual line breaks, or when minLines > 1
const shouldBeMultiline =
props.minLines > 1 || scrollHeight > singleLineHeight || textValue.value.includes('\n');
// Update height tracking - use at least the minimum height
textareaHeight.value = Math.max(scrollHeight, minHeight);
isMultiline.value = shouldBeMultiline;
// Apply the appropriate height
if (!isMultiline.value) {
textareaRef.value.style.height = `${singleLineHeight}px`;
} else {
// For multiline, set at least minHeight
textareaRef.value.style.height = `${Math.max(scrollHeight, minHeight)}px`;
}
// Restore focus if mode changed or if scrollbar appeared/disappeared
if (wasMultiline !== isMultiline.value || wasFocused) {
void nextTick(() => {
textareaRef.value?.focus();
});
}
}
watch(
() => props.modelValue,
(newValue) => {
textValue.value = newValue || '';
void nextTick(() => adjustHeight());
},
);
watch(textValue, (newValue, oldValue) => {
emit('update:modelValue', newValue);
// Only adjust height if value actually changed
if (newValue !== oldValue) {
void nextTick(() => adjustHeight());
}
});
async function refocusTextArea() {
await nextTick();
await new Promise(requestAnimationFrame);
textareaRef.value?.focus();
}
async function handleSubmit() {
emit('submit');
if (props.refocusAfterSend) {
await refocusTextArea();
}
}
async function handleStop() {
emit('stop');
if (props.refocusAfterSend) {
await refocusTextArea();
}
}
async function handleKeyDown(event: KeyboardEvent) {
const hasModifier = event.ctrlKey || event.metaKey;
const isPrintableChar = event.key.length === 1 && !hasModifier;
const isDeletionKey = event.key === 'Backspace' || event.key === 'Delete';
const atMaxLength = characterCount.value >= props.maxLength;
const isPlainEnter = event.key === 'Enter' && !event.shiftKey && !event.metaKey && !event.ctrlKey;
// Prevent adding characters if at max length (but allow deletions/navigation)
if (atMaxLength && isPrintableChar && !isDeletionKey) {
event.preventDefault();
return;
}
// Submit on plain Enter (no Shift/Ctrl/Meta). If send disabled, don't submit.
if (isPlainEnter) {
event.preventDefault();
if (!sendDisabled.value) {
await handleSubmit();
}
}
}
function handleFocus(event: FocusEvent) {
isFocused.value = true;
emit('focus', event);
}
function handleBlur(event: FocusEvent) {
isFocused.value = false;
emit('blur', event);
}
function focusInput() {
textareaRef.value?.focus();
}
onMounted(() => {
// Adjust height on mount to respect minLines or initial content
void nextTick(() => adjustHeight());
});
defineExpose({
focusInput,
});
</script>
<template>
<div
ref="containerRef"
:class="[
$style.container,
{
[$style.focused]: isFocused,
[$style.multiline]: isMultiline,
[$style.disabled]: disabled,
},
]"
:style="containerStyle"
>
<!-- Warning banner when character limit is reached -->
<N8nCallout
slim
v-if="showWarningBanner"
icon="info"
theme="warning"
:class="$style.warningCallout"
>
{{ t('assistantChat.characterLimit', { limit: maxLength.toString() }) }}
</N8nCallout>
<!-- Single line mode: input and button side by side -->
<div v-if="!isMultiline" :class="$style.singleLineWrapper">
<textarea
ref="textareaRef"
v-model="textValue"
data-test-id="chat-input-textarea"
:class="[
$style.singleLineTextarea,
'ignore-key-press-node-creator',
'ignore-key-press-canvas',
]"
:placeholder="placeholder"
:disabled="disabled"
:maxlength="maxLength"
rows="1"
@keydown="handleKeyDown"
@focus="handleFocus"
@blur="handleBlur"
@input="adjustHeight"
/>
<div :class="$style.inlineActions">
<N8nSendStopButton
data-test-id="send-message-button"
:streaming="streaming"
:disabled="sendDisabled"
@send="handleSubmit"
@stop="handleStop"
/>
</div>
</div>
<!-- Multiline mode: textarea full width with button below -->
<template v-else>
<!-- Use ScrollArea when content exceeds max height -->
<N8nScrollArea
:class="$style.scrollAreaWrapper"
:max-height="`${textAreaMaxHeight}px`"
type="auto"
>
<textarea
ref="textareaRef"
v-model="textValue"
data-test-id="chat-input-textarea"
:class="[
$style.multilineTextarea,
'ignore-key-press-node-creator',
'ignore-key-press-canvas',
]"
:style="textareaStyle"
:placeholder="placeholder"
:disabled="disabled"
:maxlength="maxLength"
@keydown="handleKeyDown"
@focus="handleFocus"
@blur="handleBlur"
@input="adjustHeight"
/>
</N8nScrollArea>
<div :class="$style.bottomActions">
<N8nSendStopButton
data-test-id="send-message-button"
:streaming="streaming"
:disabled="sendDisabled"
@send="handleSubmit"
@stop="handleStop"
/>
</div>
</template>
</div>
</template>
<style lang="scss" module>
.container {
position: relative;
display: flex;
flex-direction: column;
background: var(--color-background-xlight);
border: 1px solid var(--color-foreground-base);
border-radius: var(--border-radius-large);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
padding: var(--spacing-2xs);
box-sizing: border-box;
&.focused {
border-color: var(--color-secondary);
box-shadow: 0 0 0 1px var(--color-secondary-tint-2);
}
&.multiline {
padding-bottom: 0;
}
&.disabled {
background-color: var(--color-foreground-xlight);
cursor: not-allowed;
textarea {
cursor: not-allowed;
color: var(--color-text-light);
}
}
}
.warningCallout {
margin: 0 var(--spacing-3xs) var(--spacing-2xs) var(--spacing-3xs);
}
// Single line mode
.singleLineWrapper {
display: flex;
align-items: center;
gap: var(--spacing-2xs);
width: 100%;
}
.singleLineTextarea {
flex: 1;
border: none;
background: transparent;
resize: none;
outline: none;
font-family: var(--font-family), sans-serif;
font-size: var(--font-size-2xs);
line-height: 24px;
color: var(--color-text-dark);
padding: 0 var(--spacing-2xs);
height: 24px;
overflow: hidden;
box-sizing: border-box;
display: block;
&::placeholder {
color: var(--color-text-light);
}
}
.inlineActions {
display: flex;
align-items: center;
gap: var(--spacing-3xs);
}
// Multiline mode
.scrollAreaWrapper {
width: 100%;
margin-bottom: 0;
}
.multilineTextarea {
width: 100%;
border: none;
background: transparent;
resize: none;
outline: none;
font-family: var(--font-family), sans-serif;
font-size: var(--font-size-2xs);
line-height: 18px;
color: var(--color-text-dark);
padding: var(--spacing-3xs);
margin-bottom: 0;
box-sizing: border-box;
display: block;
overflow-y: hidden;
&::placeholder {
color: var(--color-text-light);
}
}
.bottomActions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-3xs);
padding: var(--spacing-2xs) 0 var(--spacing-2xs) var(--spacing-2xs);
margin-top: auto;
}
// Common styles
.characterCount {
font-size: var(--font-size-3xs);
color: var(--color-text-light);
padding: 0 var(--spacing-3xs);
.overLimit {
color: var(--color-danger);
font-weight: var(--font-weight-bold);
}
}
</style>

120
packages/frontend/@n8n/design-system/src/components/N8nPromptInput/__snapshots__/N8nPromptInput.test.ts.snap Normal file
View File

@ -0,0 +1,120 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`N8nPromptInput > rendering > should render correctly with default props 1`] = `
<div>
<div
class="container"
style="min-height: 40px;"
>
<!-- Warning banner when character limit is reached -->
<!--v-if-->
<!-- Single line mode: input and button side by side -->
<div
class="singleLineWrapper"
>
<textarea
class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
data-test-id="chat-input-textarea"
maxlength="1000"
placeholder=""
rows="1"
/>
<div
class="inlineActions"
>
<button
aria-disabled="true"
aria-live="polite"
class="button button primary small disabled withIcon square sendButton sendButton"
data-test-id="send-message-button"
disabled=""
>
<span
class="icon"
>
<svg
aria-hidden="true"
class="n8n-icon"
data-icon="arrow-up"
focusable="false"
height="16px"
role="img"
viewBox="0 0 24 24"
width="16px"
>
<path
d="m5 12l7-7l7 7m-7 7V5"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</span>
<!--v-if-->
</button>
</div>
</div>
</div>
</div>
`;
exports[`N8nPromptInput > rendering > should render streaming state without disabling textarea 1`] = `
<div>
<div
class="container"
style="min-height: 40px;"
>
<!-- Warning banner when character limit is reached -->
<!--v-if-->
<!-- Single line mode: input and button side by side -->
<div
class="singleLineWrapper"
>
<textarea
class="singleLineTextarea ignore-key-press-node-creator ignore-key-press-canvas"
data-test-id="chat-input-textarea"
maxlength="1000"
placeholder=""
rows="1"
/>
<div
class="inlineActions"
>
<button
aria-live="polite"
class="button button primary small withIcon square stopButton stopButton"
data-test-id="send-message-button"
>
<span
class="icon"
>
<svg
aria-hidden="true"
class="n8n-icon"
data-icon="filled-square"
fill="currentColor"
focusable="false"
height="12px"
overflow="hidden"
role="img"
viewBox="0 0 10 10"
width="12px"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="10"
rx="2"
ry="2"
width="10"
/>
</svg>
</span>
<!--v-if-->
</button>
</div>
</div>
</div>
</div>
`;

3
packages/frontend/@n8n/design-system/src/components/N8nPromptInput/index.ts Normal file
View File

@ -0,0 +1,3 @@
import N8nPromptInput from './N8nPromptInput.vue';
export default N8nPromptInput;

299
packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts Normal file
View File

@ -0,0 +1,299 @@
import type { StoryFn } from '@storybook/vue3-vite';
import { action } from 'storybook/actions';
import N8nSendStopButton from './N8nSendStopButton.vue';
export default {
title: 'Atoms/SendStopButton',
component: N8nSendStopButton,
argTypes: {
streaming: {
control: 'boolean',
},
disabled: {
control: 'boolean',
},
size: {
control: {
type: 'select',
options: ['mini', 'small', 'medium', 'large'],
},
},
},
parameters: {
backgrounds: { default: '--color-background-light' },
},
};
const methods = {
onSend: action('send'),
onStop: action('stop'),
};
const Template: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nSendStopButton,
},
template: `
<div style="display: flex; align-items: center; gap: 20px;">
<n8n-send-stop-button
v-bind="args"
@send="onSend"
@stop="onStop"
/>
</div>
`,
methods,
});
export const SendButton = Template.bind({});
SendButton.args = {
streaming: false,
disabled: false,
size: 'small',
};
export const SendButtonDisabled = Template.bind({});
SendButtonDisabled.args = {
streaming: false,
disabled: true,
size: 'small',
};
export const StopButton = Template.bind({});
StopButton.args = {
streaming: true,
disabled: false,
size: 'small',
};
export const SmallSize = Template.bind({});
SmallSize.args = {
streaming: false,
disabled: false,
size: 'small',
};
export const MediumSize = Template.bind({});
MediumSize.args = {
streaming: false,
disabled: false,
size: 'medium',
};
export const LargeSize = Template.bind({});
LargeSize.args = {
streaming: false,
disabled: false,
size: 'large',
};
const AllSizesTemplate: StoryFn = () => ({
components: {
N8nSendStopButton,
},
template: `
<div style="display: flex; flex-direction: column; gap: 20px;">
<div style="display: flex; align-items: center; gap: 20px;">
<n8n-send-stop-button size="mini" @send="onSend" />
<span style="color: var(--color-text-base)">Mini</span>
</div>
<div style="display: flex; align-items: center; gap: 20px;">
<n8n-send-stop-button size="small" @send="onSend" />
<span style="color: var(--color-text-base)">Small</span>
</div>
<div style="display: flex; align-items: center; gap: 20px;">
<n8n-send-stop-button size="medium" @send="onSend" />
<span style="color: var(--color-text-base)">Medium</span>
</div>
<div style="display: flex; align-items: center; gap: 20px;">
<n8n-send-stop-button size="large" @send="onSend" />
<span style="color: var(--color-text-base)">Large</span>
</div>
</div>
`,
methods,
});
export const AllSizes = AllSizesTemplate.bind({});
const InteractiveTemplate: StoryFn = () => ({
components: {
N8nSendStopButton,
},
template: `
<div style="display: flex; flex-direction: column; gap: 30px;">
<div>
<h3 style="margin-bottom: 15px; color: var(--color-text-dark);">Interactive Demo</h3>
<div style="display: flex; align-items: center; gap: 20px;">
<n8n-send-stop-button
:streaming="streaming"
:disabled="disabled"
:size="size"
@send="handleSend"
@stop="handleStop"
/>
<span style="color: var(--color-text-base)">
{{ streaming ? 'Click to stop' : 'Click to send' }}
</span>
</div>
</div>
<div style="display: flex; flex-direction: column; gap: 10px;">
<label style="color: var(--color-text-base);">
<input type="checkbox" v-model="streaming" />
Streaming ({{ streaming ? 'ON' : 'OFF' }})
</label>
<label style="color: var(--color-text-base);">
<input type="checkbox" v-model="disabled" />
Disabled ({{ disabled ? 'ON' : 'OFF' }})
</label>
<label style="color: var(--color-text-base);">
Size:
<select v-model="size" style="margin-left: 10px;">
<option value="mini">Mini</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</label>
</div>
<div style="padding: 10px; background: var(--color-background-xlight); border-radius: 4px;">
<p style="color: var(--color-text-base); margin: 0;">Last action: {{ lastAction }}</p>
</div>
</div>
`,
data() {
return {
streaming: false,
disabled: false,
size: 'small' as const,
lastAction: 'None',
};
},
methods: {
handleSend() {
this.lastAction = 'Send clicked';
// Simulate starting streaming
this.streaming = true;
// Auto-stop after 2 seconds for demo
setTimeout(() => {
this.streaming = false;
this.lastAction = 'Auto-stopped after 2s';
}, 2000);
},
handleStop() {
this.lastAction = 'Stop clicked';
this.streaming = false;
},
},
});
export const Interactive = InteractiveTemplate.bind({});
const StatesTemplate: StoryFn = () => ({
components: {
N8nSendStopButton,
},
template: `
<div style="display: grid; grid-template-columns: repeat(2, 200px); gap: 20px;">
<div style="text-align: center;">
<n8n-send-stop-button :streaming="false" :disabled="false" />
<p style="color: var(--color-text-base); margin-top: 10px;">Send (Enabled)</p>
</div>
<div style="text-align: center;">
<n8n-send-stop-button :streaming="false" :disabled="true" />
<p style="color: var(--color-text-base); margin-top: 10px;">Send (Disabled)</p>
</div>
<div style="text-align: center;">
<n8n-send-stop-button :streaming="true" :disabled="false" />
<p style="color: var(--color-text-base); margin-top: 10px;">Stop (Streaming)</p>
</div>
<div style="text-align: center;">
<div style="background: var(--color-background-dark); padding: 20px; border-radius: 4px;">
<n8n-send-stop-button :streaming="false" :disabled="false" />
</div>
<p style="color: var(--color-text-base); margin-top: 10px;">On Dark Background</p>
</div>
</div>
`,
});
export const AllStates = StatesTemplate.bind({});
const UsageExampleTemplate: StoryFn = () => ({
components: {
N8nSendStopButton,
},
template: `
<div style="width: 400px;">
<h3 style="margin-bottom: 15px; color: var(--color-text-dark);">Chat Input Example</h3>
<div style="
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: var(--color-background-xlight);
border: 1px solid var(--color-foreground-base);
border-radius: var(--border-radius-large);
">
<input
v-model="message"
type="text"
placeholder="Type a message..."
:disabled="streaming"
@keydown.enter="handleSend"
style="
flex: 1;
border: none;
background: transparent;
outline: none;
padding: 4px 8px;
font-size: 14px;
"
/>
<n8n-send-stop-button
:streaming="streaming"
:disabled="!message.trim() && !streaming"
@send="handleSend"
@stop="handleStop"
/>
</div>
<div v-if="response" style="margin-top: 15px; padding: 10px; background: var(--color-background-light); border-radius: 4px;">
<p style="color: var(--color-text-base); margin: 0;">{{ response }}</p>
</div>
</div>
`,
data() {
return {
message: '',
streaming: false,
response: '',
};
},
methods: {
handleSend() {
if (!this.message.trim()) return;
this.response = 'Processing: "' + this.message + '"...';
this.streaming = true;
const msg = this.message;
this.message = '';
// Simulate response
setTimeout(() => {
this.response = 'Response to: "' + msg + '"';
this.streaming = false;
}, 2000);
},
handleStop() {
this.response = 'Stopped!';
this.streaming = false;
},
},
});
export const UsageExample = UsageExampleTemplate.bind({});

262
packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.test.ts Normal file
View File

@ -0,0 +1,262 @@
import { fireEvent } from '@testing-library/vue';
import { createComponentRenderer } from '@n8n/design-system/__tests__/render';
import N8nSendStopButton from './N8nSendStopButton.vue';
const renderComponent = createComponentRenderer(N8nSendStopButton);
describe('N8nSendStopButton', () => {
describe('rendering', () => {
it('should render send button by default', () => {
const { container } = renderComponent({
global: {
stubs: ['N8nButton'],
},
});
const sendButton = container.querySelector('.sendButton');
expect(sendButton).toBeTruthy();
const stopButton = container.querySelector('.stopButton');
expect(stopButton).toBeFalsy();
});
it('should render stop button when streaming', () => {
const { container } = renderComponent({
props: {
streaming: true,
},
global: {
stubs: ['N8nButton'],
},
});
const sendButton = container.querySelector('.sendButton');
expect(sendButton).toBeFalsy();
const stopButton = container.querySelector('.stopButton');
expect(stopButton).toBeTruthy();
});
it('should render with custom size', () => {
const { container } = renderComponent({
props: {
size: 'large',
},
global: {
stubs: {
N8nButton: {
props: ['size', 'type', 'square', 'disabled', 'icon', 'iconSize'],
template: '<button :class="{sendButton: true}" :data-size="size"></button>',
},
},
},
});
const button = container.querySelector('button');
expect(button).toHaveAttribute('data-size', 'large');
});
it('should disable send button when disabled prop is true', () => {
const { container } = renderComponent({
props: {
disabled: true,
},
global: {
stubs: {
N8nButton: {
props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
template: '<button :disabled="disabled" :class="{sendButton: true}"></button>',
},
},
},
});
const button = container.querySelector('button');
expect(button).toHaveAttribute('disabled');
});
});
describe('events', () => {
it('should emit send event when send button is clicked', async () => {
const render = renderComponent({
global: {
stubs: {
N8nButton: {
props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
template: '<button @click="$emit(\'click\')" :class="{sendButton: true}"></button>',
emits: ['click'],
},
},
},
});
const button = render.container.querySelector('button') as HTMLButtonElement;
await fireEvent.click(button);
expect(render.emitted('send')).toBeTruthy();
expect(render.emitted('send')?.[0]).toEqual([]);
});
it('should emit stop event when stop button is clicked', async () => {
const render = renderComponent({
props: {
streaming: true,
},
global: {
stubs: {
N8nButton: {
props: ['type', 'square', 'size', 'icon', 'iconSize'],
template: '<button @click="$emit(\'click\')" :class="{stopButton: true}"></button>',
emits: ['click'],
},
},
},
});
const button = render.container.querySelector('button') as HTMLButtonElement;
await fireEvent.click(button);
expect(render.emitted('stop')).toBeTruthy();
expect(render.emitted('stop')?.[0]).toEqual([]);
});
it('should not emit send event when button is disabled', async () => {
const render = renderComponent({
props: {
disabled: true,
},
global: {
stubs: {
N8nButton: {
props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
template:
'<button :disabled="disabled" @click="!disabled && $emit(\'click\')" :class="{sendButton: true}"></button>',
emits: ['click'],
},
},
},
});
const button = render.container.querySelector('button') as HTMLButtonElement;
await fireEvent.click(button);
expect(render.emitted('send')).toBeFalsy();
});
});
describe('button properties', () => {
it('should pass correct props to send button', () => {
const { container } = renderComponent({
props: {
size: 'medium',
disabled: false,
},
global: {
stubs: {
N8nButton: {
props: ['type', 'size', 'iconSize', 'square', 'icon', 'disabled'],
template: `
<button
:data-type="type"
:data-size="size"
:data-icon-size="iconSize"
:data-square="square"
:data-icon="icon"
:disabled="disabled"
:class="{sendButton: true}"
></button>`,
},
},
},
});
const button = container.querySelector('button');
expect(button).toHaveAttribute('data-type', 'primary');
expect(button).toHaveAttribute('data-size', 'medium');
expect(button).toHaveAttribute('data-icon-size', 'large');
expect(button).toHaveAttribute('data-square', '');
expect(button).toHaveAttribute('data-icon', 'arrow-up');
expect(button).not.toHaveAttribute('disabled');
});
it('should pass correct props to stop button', () => {
const { container } = renderComponent({
props: {
streaming: true,
size: 'small',
},
global: {
stubs: {
N8nButton: {
props: ['type', 'size', 'square'],
template: `
<button
:data-type="type"
:data-size="size"
:data-square="square"
:class="{stopButton: true}"
></button>`,
},
},
},
});
const button = container.querySelector('button');
expect(button).toHaveAttribute('data-type', 'primary');
expect(button).toHaveAttribute('data-size', 'small');
expect(button).toHaveAttribute('data-square', '');
});
});
describe('default props', () => {
it('should use default size of small', () => {
const { container } = renderComponent({
global: {
stubs: {
N8nButton: {
props: ['size', 'type', 'square', 'icon', 'iconSize', 'disabled'],
template: '<button :data-size="size" :class="{sendButton: true}"></button>',
},
},
},
});
const button = container.querySelector('button');
expect(button).toHaveAttribute('data-size', 'small');
});
it('should default to not streaming', () => {
const { container } = renderComponent({
global: {
stubs: ['N8nButton'],
},
});
const sendButton = container.querySelector('.sendButton');
expect(sendButton).toBeTruthy();
const stopButton = container.querySelector('.stopButton');
expect(stopButton).toBeFalsy();
});
it('should default to not disabled', () => {
const { container } = renderComponent({
global: {
stubs: {
N8nButton: {
props: ['disabled', 'type', 'square', 'icon', 'iconSize', 'size'],
template:
'<button :disabled="disabled" :data-disabled="disabled" :class="{sendButton: true}"></button>',
},
},
},
});
const button = container.querySelector('button');
expect(button).not.toHaveAttribute('disabled');
expect(button).toHaveAttribute('data-disabled', 'false');
});
});
});

62
packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.vue Normal file
View File

@ -0,0 +1,62 @@
<script setup lang="ts">
import N8nButton from '../N8nButton';
export interface N8nSendStopButtonProps {
streaming?: boolean;
disabled?: boolean;
size?: 'mini' | 'small' | 'medium' | 'large';
}
withDefaults(defineProps<N8nSendStopButtonProps>(), {
streaming: false,
disabled: false,
size: 'small',
});
const emit = defineEmits<{
send: [];
stop: [];
}>();
function handleSend() {
emit('send');
}
function handleStop() {
emit('stop');
}
</script>
<template>
<N8nButton
v-if="streaming"
:class="$style.stopButton"
type="primary"
:size="size"
icon="filled-square"
icon-size="small"
square
@click="handleStop"
/>
<N8nButton
v-else
:class="$style.sendButton"
type="primary"
:size="size"
icon-size="large"
square
icon="arrow-up"
:disabled="disabled"
@click="handleSend"
/>
</template>
<style lang="scss" module>
.sendButton {
--button-border-radius: var(--border-radius-large);
}
.stopButton {
--button-border-radius: var(--border-radius-large);
}
</style>

5
packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/index.ts Normal file
View File

@ -0,0 +1,5 @@
import N8nSendStopButton from './N8nSendStopButton.vue';
export type { N8nSendStopButtonProps } from './N8nSendStopButton.vue';
export default N8nSendStopButton;

2
packages/frontend/@n8n/design-system/src/components/index.ts
View File

@ -37,7 +37,9 @@ export { default as N8nOption } from './N8nOption';
export { default as N8nSelectableList } from './N8nSelectableList';
export { default as N8nPopover } from './N8nPopover';
export { default as N8nPopoverReka } from './N8nPopoverReka';
export { default as N8nPromptInput } from './N8nPromptInput';
export { default as N8nPulse } from './N8nPulse';
export { default as N8nSendStopButton } from './N8nSendStopButton';
export { default as N8nRadioButtons } from './N8nRadioButtons';
export { default as N8nRoute } from './N8nRoute';
export { default as N8nRecycleScroller } from './N8nRecycleScroller';

33
packages/frontend/@n8n/design-system/src/composables/useCharacterLimit.ts Normal file
View File

@ -0,0 +1,33 @@
import { computed, type ComputedRef, type Ref } from 'vue';
interface UseCharacterLimitOptions {
value: Ref<string>;
maxLength: Ref<number>;
}
interface UseCharacterLimitReturn {
characterCount: ComputedRef<number>;
remainingCharacters: ComputedRef<number>;
isOverLimit: ComputedRef<boolean>;
isAtLimit: ComputedRef<boolean>;
}
export function useCharacterLimit({
value,
maxLength,
}: UseCharacterLimitOptions): UseCharacterLimitReturn {
const characterCount = computed(() => value.value.length);
const remainingCharacters = computed(() => maxLength.value - characterCount.value);
const isOverLimit = computed(() => characterCount.value > maxLength.value);
const isAtLimit = computed(() => characterCount.value >= maxLength.value);
return {
characterCount,
remainingCharacters,
isOverLimit,
isAtLimit,
};
}

3
packages/frontend/@n8n/design-system/src/composables/useI18n.ts
View File

@ -1,7 +1,8 @@
import { t } from '../locale';
import { type N8nLocaleTranslateFnOptions } from '../types/i18n';
export function useI18n() {
return {
t: (path: string, options: string[] = []) => t(path, options),
t: (path: string, options?: N8nLocaleTranslateFnOptions) => t(path, options),
};
}

1
packages/frontend/@n8n/design-system/src/locale/lang/en.ts
View File

@ -67,6 +67,7 @@ export default {
'assistantChat.inputPlaceholder': 'Enter your response...',
'assistantChat.copy': 'Copy',
'assistantChat.copied': 'Copied',
'assistantChat.characterLimit': "You've reached the {limit} character limit",
'aiAssistant.builder.canvas.thinking': 'Working...',
'inlineAskAssistantButton.asked': 'Asked',
'iconPicker.button.defaultToolTip': 'Choose icon',

3
packages/frontend/@n8n/i18n/src/locales/en.json
View File

@ -200,13 +200,14 @@
"aiAssistant.tabs.build": "Build",
"aiAssistant.builder.mode": "AI Builder",
"aiAssistant.builder.placeholder": "Ask n8n to build...",
"aiAssistant.builder.assistantPlaceholder": "What would you like to modify or add?",
"aiAssistant.builder.characterLimit": "You've reached the { limit } character limit",
"aiAssistant.builder.generateNew": "Generate new workflow",
"aiAssistant.builder.newWorkflowNotice": "The created workflow will be added to the editor",
"aiAssistant.builder.feedbackPrompt": "Is this workflow helpful?",
"aiAssistant.builder.invalidPrompt": "Prompt validation failed. Please try again with a clearer description of your workflow requirements and supported integrations.",
"aiAssistant.builder.workflowParsingError.title": "Unable to insert workflow",
"aiAssistant.builder.workflowParsingError.content": "The workflow returned by AI could not be parsed. Please try again.",
"aiAssistant.builder.canvasPrompt.buildWorkflow": "Create workflow",
"aiAssistant.builder.canvasPrompt.title": "What would you like to automate?",
"aiAssistant.builder.canvasPrompt.confirmTitle": "Replace current prompt?",
"aiAssistant.builder.canvasPrompt.confirmMessage": "This will replace your current prompt. Are you sure?",

65
packages/frontend/editor-ui/src/components/AskAssistant/Agent/AskAssistantBuild.test.ts
View File

@ -136,11 +136,12 @@ describe('AskAssistantBuild', () => {
// Type message into the chat input
const chatInput = getByTestId('chat-input');
await fireEvent.update(chatInput, testMessage);
const textarea = chatInput.querySelector('textarea');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.update(textarea, testMessage);
// Click the send button
const sendButton = getByTestId('send-message-button');
sendButton.click();
// Trigger submit using Enter key (N8nPromptInput submits on Enter)
await fireEvent.keyDown(textarea, { key: 'Enter' });
await flushPromises();
@ -332,9 +333,10 @@ describe('AskAssistantBuild', () => {
// Send initial message to start generation
const testMessage = 'Create a workflow to send emails';
const chatInput = await findByTestId('chat-input');
await fireEvent.update(chatInput, testMessage);
const sendButton = await findByTestId('send-message-button');
await fireEvent.click(sendButton);
const textarea = chatInput.querySelector('textarea');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.update(textarea, testMessage);
await fireEvent.keyDown(textarea, { key: 'Enter' });
expect(builderStore.sendChatMessage).toHaveBeenCalledWith({
initialGeneration: true,
@ -403,9 +405,10 @@ describe('AskAssistantBuild', () => {
// Send message to modify existing workflow
const testMessage = 'Add an HTTP node';
const chatInput = await findByTestId('chat-input');
await fireEvent.update(chatInput, testMessage);
const sendButton = await findByTestId('send-message-button');
await fireEvent.click(sendButton);
const textarea = chatInput.querySelector('textarea');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.update(textarea, testMessage);
await fireEvent.keyDown(textarea, { key: 'Enter' });
expect(builderStore.sendChatMessage).toHaveBeenCalledWith({
initialGeneration: false,
@ -459,9 +462,10 @@ describe('AskAssistantBuild', () => {
// Send initial message
const testMessage = 'Create a workflow';
const chatInput = await findByTestId('chat-input');
await fireEvent.update(chatInput, testMessage);
const sendButton = await findByTestId('send-message-button');
await fireEvent.click(sendButton);
const textarea = chatInput.querySelector('textarea');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.update(textarea, testMessage);
await fireEvent.keyDown(textarea, { key: 'Enter' });
// The component should have set initialGeneration to true since workflow was empty
await flushPromises();
@ -513,9 +517,10 @@ describe('AskAssistantBuild', () => {
// Send initial message
const testMessage = 'Create a workflow';
const chatInput = await findByTestId('chat-input');
await fireEvent.update(chatInput, testMessage);
const sendButton = await findByTestId('send-message-button');
await fireEvent.click(sendButton);
const textarea = chatInput.querySelector('textarea');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.update(textarea, testMessage);
await fireEvent.keyDown(textarea, { key: 'Enter' });
// Simulate streaming starts
builderStore.$patch({ streaming: true });
@ -564,9 +569,10 @@ describe('AskAssistantBuild', () => {
// Send initial message
const testMessage = 'Create a workflow';
const chatInput = await findByTestId('chat-input');
await fireEvent.update(chatInput, testMessage);
const sendButton = await findByTestId('send-message-button');
await fireEvent.click(sendButton);
const textarea = chatInput.querySelector('textarea');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.update(textarea, testMessage);
await fireEvent.keyDown(textarea, { key: 'Enter' });
await flushPromises();
@ -593,9 +599,10 @@ describe('AskAssistantBuild', () => {
// Send new message in existing session
const testMessage = 'Add email nodes';
const chatInput = await findByTestId('chat-input');
await fireEvent.update(chatInput, testMessage);
const sendButton = await findByTestId('send-message-button');
await fireEvent.click(sendButton);
const textarea = chatInput.querySelector('textarea');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.update(textarea, testMessage);
await fireEvent.keyDown(textarea, { key: 'Enter' });
// Simulate streaming starts
builderStore.$patch({ streaming: true, initialGeneration: true });
@ -664,9 +671,10 @@ describe('AskAssistantBuild', () => {
// Send message to generate new workflow
const testMessage = 'Create a new workflow';
const chatInput = await findByTestId('chat-input');
await fireEvent.update(chatInput, testMessage);
const sendButton = await findByTestId('send-message-button');
await fireEvent.click(sendButton);
const textarea = chatInput.querySelector('textarea');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.update(textarea, testMessage);
await fireEvent.keyDown(textarea, { key: 'Enter' });
expect(builderStore.sendChatMessage).toHaveBeenCalledWith({
initialGeneration: true,
@ -725,9 +733,10 @@ describe('AskAssistantBuild', () => {
// Send message
const testMessage = 'Create a workflow';
const chatInput = await findByTestId('chat-input');
await fireEvent.update(chatInput, testMessage);
const sendButton = await findByTestId('send-message-button');
await fireEvent.click(sendButton);
const textarea = chatInput.querySelector('textarea');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.update(textarea, testMessage);
await fireEvent.keyDown(textarea, { key: 'Enter' });
// Simulate streaming starts
builderStore.$patch({ streaming: true });

5
packages/frontend/editor-ui/src/components/AskAssistant/Agent/AskAssistantBuild.vue
View File

@ -190,8 +190,7 @@ watch(currentRoute, () => {
:title="'n8n AI'"
:show-stop="true"
:scroll-on-new-message="true"
:placeholder="i18n.baseText('aiAssistant.builder.placeholder')"
:max-length="1000"
:inputPlaceholder="i18n.baseText('aiAssistant.builder.assistantPlaceholder')"
@close="emit('close')"
@message="onUserMessage"
@feedback="onFeedback"
@ -202,7 +201,7 @@ watch(currentRoute, () => {
</template>
<template #placeholder>
<n8n-text :class="$style.topText">{{
i18n.baseText('aiAssistant.builder.placeholder')
i18n.baseText('aiAssistant.builder.assistantPlaceholder')
}}</n8n-text>
</template>
</AskAssistantChat>

57
packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAIPrompt.test.ts
View File

@ -89,32 +89,47 @@ describe('CanvasNodeAIPrompt', () => {
});
describe('disabled state', () => {
it('should disable textarea when builder is streaming', () => {
it('should NOT disable textarea when builder is streaming', () => {
streaming.value = true;
const { container } = renderComponent();
const textarea = container.querySelector('textarea');
expect(textarea).toHaveAttribute('disabled');
// Textarea should remain enabled during streaming
expect(textarea).not.toHaveAttribute('disabled');
});
it('should disable submit button when builder is streaming', () => {
it('should show stop button when builder is streaming', () => {
streaming.value = true;
const { container } = renderComponent();
const submitButton = container.querySelector('button[type="submit"]');
expect(submitButton).toHaveAttribute('disabled');
// When streaming, the button changes to a stop button
// The N8nSendStopButton component changes its icon when streaming
// We check that there's a button present when streaming
const buttons = container.querySelectorAll('button');
// Should have at least the stop button
expect(buttons.length).toBeGreaterThan(0);
});
it('should disable submit button when prompt is empty', () => {
const { container } = renderComponent();
const submitButton = container.querySelector('button[type="submit"]');
expect(submitButton).toHaveAttribute('disabled');
// The send button should be disabled when prompt is empty
// It's nested inside the N8nPromptInput component
// Look for any disabled button element
const disabledButtons = container.querySelectorAll('button[disabled]');
// There should be at least one disabled button (the send button)
expect(disabledButtons.length).toBeGreaterThan(0);
// Verify the first disabled button is the send button
const sendButton = disabledButtons[0];
expect(sendButton).toBeTruthy();
expect(sendButton).toHaveAttribute('disabled');
});
});
describe('form submission', () => {
it('should submit form on Cmd+Enter keyboard shortcut', async () => {
it('should submit on Enter keyboard shortcut', async () => {
const { container } = renderComponent();
const textarea = container.querySelector('textarea');
@ -123,8 +138,8 @@ describe('CanvasNodeAIPrompt', () => {
// Type in textarea
await fireEvent.update(textarea, 'Test prompt');
// Fire Cmd+Enter
await fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true });
// Fire Enter (without modifiers - N8nPromptInput submits on plain Enter)
await fireEvent.keyDown(textarea, { key: 'Enter' });
await waitFor(() => {
expect(openChat).toHaveBeenCalled();
@ -138,11 +153,12 @@ describe('CanvasNodeAIPrompt', () => {
it('should not submit when prompt is empty', async () => {
const { container } = renderComponent();
const form = container.querySelector('form');
const textarea = container.querySelector('textarea');
if (!form) throw new Error('Form not found');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.submit(form);
// Try to submit with empty prompt
await fireEvent.keyDown(textarea, { key: 'Enter' });
expect(openChat).not.toHaveBeenCalled();
});
@ -151,13 +167,12 @@ describe('CanvasNodeAIPrompt', () => {
streaming.value = true;
const { container } = renderComponent();
const textarea = container.querySelector('textarea');
const form = container.querySelector('form');
if (!textarea || !form) throw new Error('Elements not found');
if (!textarea) throw new Error('Textarea not found');
// Even with content, submission should be blocked
await fireEvent.update(textarea, 'Test prompt');
await fireEvent.submit(form);
await fireEvent.keyDown(textarea, { key: 'Enter' });
expect(openChat).not.toHaveBeenCalled();
});
@ -165,12 +180,11 @@ describe('CanvasNodeAIPrompt', () => {
it('should open AI assistant panel and send message on submit', async () => {
const { container } = renderComponent();
const textarea = container.querySelector('textarea');
const form = container.querySelector('form');
if (!textarea || !form) throw new Error('Elements not found');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.update(textarea, 'Test workflow prompt');
await fireEvent.submit(form);
await fireEvent.keyDown(textarea, { key: 'Enter' });
await waitFor(() => {
expect(openChat).toHaveBeenCalled();
@ -186,12 +200,11 @@ describe('CanvasNodeAIPrompt', () => {
isNewWorkflow.value = true;
const { container } = renderComponent();
const textarea = container.querySelector('textarea');
const form = container.querySelector('form');
if (!textarea || !form) throw new Error('Elements not found');
if (!textarea) throw new Error('Textarea not found');
await fireEvent.update(textarea, 'Test prompt');
await fireEvent.submit(form);
await fireEvent.keyDown(textarea, { key: 'Enter' });
await waitFor(() => {
expect(saveCurrentWorkflow).toHaveBeenCalled();

103
packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAIPrompt.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useI18n } from '@n8n/i18n';
import N8nPromptInput from '@n8n/design-system/components/N8nPromptInput/N8nPromptInput.vue';
import { useBuilderStore } from '@/stores/builder.store';
import { useRouter } from 'vue-router';
import { useWorkflowSaving } from '@/composables/useWorkflowSaving';
@ -29,7 +30,6 @@ const workflowSaver = useWorkflowSaving({ router });
// Component state
const prompt = ref('');
const userEditedPrompt = ref(false);
const isFocused = ref(false);
const isLoading = ref(false);
// Computed properties
@ -111,40 +111,26 @@ function onAddNodeClick() {
<!-- Prompt input section -->
<section
:class="[$style.promptContainer, { [$style.focused]: isFocused }]"
:class="$style.promptContainer"
@click.stop
@dblclick.stop
@mousedown.stop
@scroll.stop
@wheel.stop
>
<form :class="$style.form" @submit.prevent="onSubmit">
<n8n-input
v-model="prompt"
name="aiBuilderPrompt"
:class="$style.formTextarea"
type="textarea"
:disabled="isLoading || builderStore.streaming"
:placeholder="i18n.baseText('aiAssistant.builder.placeholder')"
:read-only="false"
:rows="15"
:maxlength="1000"
@focus="isFocused = true"
@blur="isFocused = false"
@keydown.meta.enter.stop="onSubmit"
@input="userEditedPrompt = true"
/>
<footer :class="$style.formFooter">
<n8n-button
native-type="submit"
:disabled="!hasContent || builderStore.streaming"
:loading="isLoading"
@keydown.enter="onSubmit"
>
{{ i18n.baseText('aiAssistant.builder.canvasPrompt.buildWorkflow') }}
</n8n-button>
</footer>
</form>
<N8nPromptInput
v-model="prompt"
:class="$style.promptInput"
:disabled="isLoading"
:streaming="builderStore.streaming"
:placeholder="i18n.baseText('aiAssistant.builder.placeholder')"
:max-lines-before-scroll="4"
:min-lines="2"
data-test-id="ai-builder-prompt"
@submit="onSubmit"
@stop="builderStore.stopStreaming"
@input="userEditedPrompt = true"
/>
</section>
<!-- Suggestion pills section -->
@ -208,70 +194,13 @@ function onAddNodeClick() {
/* Prompt Input Section */
.promptContainer {
display: flex;
height: 128px;
padding: var(--spacing-xs);
padding-left: var(--spacing-s);
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
gap: var(--spacing-s);
align-self: stretch;
border-radius: var(--border-radius-large);
border: 1px solid var(--color-foreground-xdark);
background: var(--color-background-xlight);
transition: border-color 0.2s ease;
&.focused {
border-color: var(--prim-color-secondary);
}
}
.form {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
.promptInput {
width: 100%;
gap: var(--spacing-xs);
}
.formTextarea {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
border: 0;
:global(.el-textarea__inner) {
height: 100%;
min-height: 0;
overflow-y: auto;
border: 0;
background: transparent;
resize: none;
font-family: var(--font-family);
padding: 0;
/* Custom scrollbar styles */
@supports not (selector(::-webkit-scrollbar)) {
scrollbar-width: thin;
}
@supports selector(::-webkit-scrollbar) {
&::-webkit-scrollbar {
width: var(--spacing-2xs);
}
&::-webkit-scrollbar-thumb {
border-radius: var(--spacing-xs);
background: var(--color-foreground-dark);
border: var(--spacing-5xs) solid white;
}
}
}
}
.formFooter {
display: flex;
justify-content: flex-end;
}
/* Suggestion Pills Section */

36
packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/__snapshots__/CanvasNodeAIPrompt.test.ts.snap
View File

@ -6,16 +6,36 @@ exports[`CanvasNodeAIPrompt > should render component correctly 1`] = `
<h2 class="title">What would you like to automate?</h2>
</header><!-- Prompt input section -->
<section class="promptContainer">
<form class="form">
<div class="el-textarea el-input--large n8n-input formTextarea formTextarea">
<!-- input -->
<!-- textarea --><textarea class="el-textarea__inner" name="aiBuilderPrompt" rows="15" title="" maxlength="1000" read-only="false" tabindex="0" autocomplete="off" placeholder="Ask n8n to build..."></textarea>
<div class="container multiline promptInput" style="min-height: 80px;" data-test-id="ai-builder-prompt">
<!-- Warning banner when character limit is reached -->
<!--v-if-->
<!-- Single line mode: input and button side by side -->
<!-- Multiline mode: textarea full width with button below -->
<!-- Use ScrollArea when content exceeds max height -->
<div dir="ltr" style="position: relative; --reka-scroll-area-corner-width: 0px; --reka-scroll-area-corner-height: 0px;" class="scrollAreaRoot scrollAreaWrapper">
<div data-reka-scroll-area-viewport="" style="overflow-x: hidden; overflow-y: hidden; max-height: 72px;" class="viewport" tabindex="0">
<div><textarea data-test-id="chat-input-textarea" class="multilineTextarea ignore-key-press-node-creator ignore-key-press-canvas" style="height: 36px; overflow-y: hidden;" placeholder="Ask n8n to build..." maxlength="1000"></textarea></div>
</div>
<style>
/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
[data-reka-scroll-area-viewport] {
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
[data-reka-scroll-area-viewport]::-webkit-scrollbar {
display: none;
}
</style>
<!---->
<!--v-if-->
<!--v-if-->
</div>
<footer class="formFooter"><button class="button button primary medium disabled" disabled="" aria-disabled="true" aria-live="polite" type="submit">
<!--v-if-->Create workflow
</button></footer>
</form>
<div class="bottomActions"><button class="button button primary small disabled withIcon square sendButton sendButton" disabled="" aria-disabled="true" aria-live="polite" data-test-id="send-message-button"><span class="icon"><svg viewBox="0 0 24 24" width="16px" height="16px" class="n8n-icon" aria-hidden="true" focusable="false" role="img" data-icon="arrow-up"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 12l7-7l7 7m-7 7V5"></path></svg></span>
<!--v-if-->
</button></div>
</div>
</section><!-- Suggestion pills section -->
<section class="pillsContainer" role="group" aria-label="Workflow suggestions"><button class="suggestionPill" type="button">Invoice processing pipeline</button><button class="suggestionPill" type="button">Daily AI news digest</button><button class="suggestionPill" type="button">RAG knowledge assistant</button><button class="suggestionPill" type="button">Summarize emails with AI</button><button class="suggestionPill" type="button">YouTube video chapters</button><button class="suggestionPill" type="button">Pizza delivery chatbot</button><button class="suggestionPill" type="button">Lead qualification and call scheduling</button><button class="suggestionPill" type="button">Multi-agent research workflow</button></section><!-- Divider -->
<div class="orDivider" role="separator"><span class="orText">or</span></div><!-- Manual node creation section -->

2
packages/testing/playwright/pages/AIAssistantPage.ts
View File

@ -18,7 +18,7 @@ export class AIAssistantPage extends BasePage {
}
getChatInput() {
return this.page.getByTestId('chat-input');
return this.page.getByTestId('chat-input').locator('textarea');
}
getSendMessageButton() {

147
pnpm-lock.yaml
View File

@ -148,6 +148,9 @@ catalogs:
'@vitejs/plugin-vue':
specifier: ^5.2.4
version: 5.2.4
'@vue/test-utils':
specifier: ^2.4.6
version: 2.4.6
'@vue/tsconfig':
specifier: ^0.7.0
version: 0.7.0
@ -2235,6 +2238,9 @@ importers:
'@vitest/coverage-v8':
specifier: 'catalog:'
version: 3.2.4(vitest@3.1.3(@types/debug@4.1.12)(@types/node@20.19.11)(jiti@1.21.7)(jsdom@23.0.1(bufferutil@4.0.9)(utf-8-validate@5.0.10))(sass@1.89.2)(terser@5.16.1)(tsx@4.19.3))
'@vue/test-utils':
specifier: catalog:frontend
version: 2.4.6
autoprefixer:
specifier: ^10.4.19
version: 10.4.19(postcss@8.4.49)
@ -3779,10 +3785,6 @@ packages:
resolution: {integrity: sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==}
engines: {node: '>=6.9.0'}
'@babel/helper-string-parser@7.25.9':
resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
engines: {node: '>=6.9.0'}
'@babel/helper-string-parser@7.27.1':
resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
engines: {node: '>=6.9.0'}
@ -3807,11 +3809,6 @@ packages:
resolution: {integrity: sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==}
engines: {node: '>=6.9.0'}
'@babel/parser@7.26.10':
resolution: {integrity: sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA==}
engines: {node: '>=6.0.0'}
hasBin: true
'@babel/parser@7.27.5':
resolution: {integrity: sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==}
engines: {node: '>=6.0.0'}
@ -4267,10 +4264,6 @@ packages:
resolution: {integrity: sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A==}
engines: {node: '>=6.9.0'}
'@babel/types@7.26.10':
resolution: {integrity: sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==}
engines: {node: '>=6.9.0'}
'@babel/types@7.27.6':
resolution: {integrity: sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==}
engines: {node: '>=6.9.0'}
@ -5160,9 +5153,6 @@ packages:
'@jridgewell/source-map@0.3.11':
resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
'@jridgewell/sourcemap-codec@1.5.0':
resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
'@jridgewell/sourcemap-codec@1.5.5':
resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
@ -10615,14 +10605,6 @@ packages:
fd-slicer@1.1.0:
resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
fdir@6.4.6:
resolution: {integrity: sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==}
peerDependencies:
picomatch: ^3 || ^4
peerDependenciesMeta:
picomatch:
optional: true
fdir@6.5.0:
resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
engines: {node: '>=12.0.0'}
@ -11117,9 +11099,6 @@ packages:
engines: {node: '>=0.4.7'}
hasBin: true
has-bigints@1.0.2:
resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
has-bigints@1.1.0:
resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
engines: {node: '>= 0.4'}
@ -11474,17 +11453,10 @@ packages:
resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
engines: {node: '>= 0.4'}
is-bigint@1.0.4:
resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
is-bigint@1.1.0:
resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
engines: {node: '>= 0.4'}
is-boolean-object@1.1.2:
resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
engines: {node: '>= 0.4'}
is-boolean-object@1.2.2:
resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
engines: {node: '>= 0.4'}
@ -11515,10 +11487,6 @@ packages:
resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
engines: {node: '>= 0.4'}
is-date-object@1.0.5:
resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
engines: {node: '>= 0.4'}
is-date-object@1.1.0:
resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
engines: {node: '>= 0.4'}
@ -11584,10 +11552,6 @@ packages:
is-node-process@1.2.0:
resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
is-number-object@1.0.7:
resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
engines: {node: '>= 0.4'}
is-number-object@1.1.1:
resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
engines: {node: '>= 0.4'}
@ -11676,10 +11640,6 @@ packages:
resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
engines: {node: '>= 0.4'}
is-symbol@1.0.4:
resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
engines: {node: '>= 0.4'}
is-symbol@1.1.1:
resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
engines: {node: '>= 0.4'}
@ -16401,8 +16361,8 @@ packages:
vue-component-type-helpers@2.2.12:
resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
vue-component-type-helpers@3.1.0-alpha.0:
resolution: {integrity: sha512-K1guwS1Oy0gNfBdIdIn8JMkUV+S38sriR1zf5dP+KkPS7/r5nHnPZUL74meY2CYlxYBH4qSQ+k7bpHfwiRvaMg==}
vue-component-type-helpers@3.0.8:
resolution: {integrity: sha512-WyR30Eq15Y/+odrUUMax6FmPbZwAp/HnC7qgR1r3lVFAcqwQ4wUoV79Mbh4SxDy3NiqDa+G4TOKD5xXSgBHo5A==}
vue-demi@0.14.10:
resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@ -16602,9 +16562,6 @@ packages:
whatwg-url@7.1.0:
resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
which-boxed-primitive@1.0.2:
resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
which-boxed-primitive@1.1.1:
resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
engines: {node: '>= 0.4'}
@ -18181,8 +18138,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@babel/helper-string-parser@7.25.9': {}
'@babel/helper-string-parser@7.27.1': {}
'@babel/helper-validator-identifier@7.27.1': {}
@ -18204,10 +18159,6 @@ snapshots:
'@babel/template': 7.26.9
'@babel/types': 7.27.6
'@babel/parser@7.26.10':
dependencies:
'@babel/types': 7.26.10
'@babel/parser@7.27.5':
dependencies:
'@babel/types': 7.27.6
@ -18760,11 +18711,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@babel/types@7.26.10':
dependencies:
'@babel/helper-string-parser': 7.25.9
'@babel/helper-validator-identifier': 7.27.1
'@babel/types@7.27.6':
dependencies:
'@babel/helper-string-parser': 7.27.1
@ -19838,8 +19784,6 @@ snapshots:
'@jridgewell/gen-mapping': 0.3.13
'@jridgewell/trace-mapping': 0.3.30
'@jridgewell/sourcemap-codec@1.5.0': {}
'@jridgewell/sourcemap-codec@1.5.5': {}
'@jridgewell/trace-mapping@0.3.30':
@ -21842,7 +21786,7 @@ snapshots:
storybook: 9.1.7(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(utf-8-validate@5.0.10)(vite@7.0.0(@types/node@20.19.11)(jiti@1.21.7)(sass@1.89.2)(terser@5.16.1)(tsx@4.19.3))
type-fest: 2.19.0
vue: 3.5.13(typescript@5.9.2)
vue-component-type-helpers: 3.1.0-alpha.0
vue-component-type-helpers: 3.0.8
'@stylistic/eslint-plugin@5.0.0(eslint@9.29.0(jiti@1.21.7))':
dependencies:
@ -22190,7 +22134,7 @@ snapshots:
'@types/http-proxy@1.17.16':
dependencies:
'@types/node': 20.19.10
'@types/node': 20.19.11
'@types/humanize-duration@3.27.1': {}
@ -23380,7 +23324,7 @@ snapshots:
array-buffer-byte-length@1.0.1:
dependencies:
call-bind: 1.0.8
is-array-buffer: 3.0.4
is-array-buffer: 3.0.5
array-buffer-byte-length@1.0.2:
dependencies:
@ -23451,8 +23395,8 @@ snapshots:
es-abstract: 1.24.0
es-errors: 1.3.0
get-intrinsic: 1.3.0
is-array-buffer: 3.0.4
is-shared-array-buffer: 1.0.3
is-array-buffer: 3.0.5
is-shared-array-buffer: 1.0.4
arraybuffer.prototype.slice@1.0.4:
dependencies:
@ -25537,8 +25481,8 @@ snapshots:
es-to-primitive@1.2.1:
dependencies:
is-callable: 1.2.7
is-date-object: 1.0.5
is-symbol: 1.0.4
is-date-object: 1.1.0
is-symbol: 1.1.1
es-to-primitive@1.3.0:
dependencies:
@ -26184,10 +26128,6 @@ snapshots:
dependencies:
pend: 1.2.0
fdir@6.4.6(picomatch@4.0.3):
optionalDependencies:
picomatch: 4.0.3
fdir@6.5.0(picomatch@4.0.3):
optionalDependencies:
picomatch: 4.0.3
@ -26276,7 +26216,7 @@ snapshots:
find-test-names@1.29.7(@babel/core@7.26.10):
dependencies:
'@babel/parser': 7.26.10
'@babel/parser': 7.27.5
'@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.10)
acorn-walk: 8.3.4
debug: 4.4.1(supports-color@8.1.1)
@ -26824,8 +26764,6 @@ snapshots:
optionalDependencies:
uglify-js: 3.17.4
has-bigints@1.0.2: {}
has-bigints@1.1.0: {}
has-flag@3.0.0: {}
@ -27262,19 +27200,10 @@ snapshots:
has-tostringtag: 1.0.2
safe-regex-test: 1.1.0
is-bigint@1.0.4:
dependencies:
has-bigints: 1.0.2
is-bigint@1.1.0:
dependencies:
has-bigints: 1.1.0
is-boolean-object@1.1.2:
dependencies:
call-bind: 1.0.8
has-tostringtag: 1.0.2
is-boolean-object@1.2.2:
dependencies:
call-bound: 1.0.4
@ -27298,7 +27227,7 @@ snapshots:
is-data-view@1.0.1:
dependencies:
is-typed-array: 1.1.13
is-typed-array: 1.1.15
is-data-view@1.0.2:
dependencies:
@ -27306,10 +27235,6 @@ snapshots:
get-intrinsic: 1.3.0
is-typed-array: 1.1.15
is-date-object@1.0.5:
dependencies:
has-tostringtag: 1.0.2
is-date-object@1.1.0:
dependencies:
call-bound: 1.0.4
@ -27366,10 +27291,6 @@ snapshots:
is-node-process@1.2.0: {}
is-number-object@1.0.7:
dependencies:
has-tostringtag: 1.0.2
is-number-object@1.1.1:
dependencies:
call-bound: 1.0.4
@ -27436,10 +27357,6 @@ snapshots:
call-bound: 1.0.4
has-tostringtag: 1.0.2
is-symbol@1.0.4:
dependencies:
has-symbols: 1.1.0
is-symbol@1.1.1:
dependencies:
call-bound: 1.0.4
@ -27448,7 +27365,7 @@ snapshots:
is-typed-array@1.1.13:
dependencies:
which-typed-array: 1.1.15
which-typed-array: 1.1.19
is-typed-array@1.1.15:
dependencies:
@ -28694,7 +28611,7 @@ snapshots:
magic-string@0.30.17:
dependencies:
'@jridgewell/sourcemap-codec': 1.5.0
'@jridgewell/sourcemap-codec': 1.5.5
magicast@0.3.5:
dependencies:
@ -30606,7 +30523,7 @@ snapshots:
'@protobufjs/path': 1.1.2
'@protobufjs/pool': 1.1.0
'@protobufjs/utf8': 1.1.0
'@types/node': 20.19.10
'@types/node': 20.19.11
long: 5.3.2
proxy-addr@2.0.7:
@ -32467,7 +32384,7 @@ snapshots:
tinyglobby@0.2.14:
dependencies:
fdir: 6.4.6(picomatch@4.0.3)
fdir: 6.5.0(picomatch@4.0.3)
picomatch: 4.0.3
tinypool@1.1.1: {}
@ -32835,7 +32752,7 @@ snapshots:
dependencies:
call-bind: 1.0.8
es-errors: 1.3.0
is-typed-array: 1.1.13
is-typed-array: 1.1.15
typed-array-buffer@1.0.3:
dependencies:
@ -32849,7 +32766,7 @@ snapshots:
for-each: 0.3.5
gopd: 1.2.0
has-proto: 1.0.3
is-typed-array: 1.1.13
is-typed-array: 1.1.15
typed-array-byte-length@1.0.3:
dependencies:
@ -32866,7 +32783,7 @@ snapshots:
for-each: 0.3.5
gopd: 1.2.0
has-proto: 1.0.3
is-typed-array: 1.1.13
is-typed-array: 1.1.15
typed-array-byte-offset@1.0.4:
dependencies:
@ -32884,7 +32801,7 @@ snapshots:
for-each: 0.3.5
gopd: 1.2.0
has-proto: 1.0.3
is-typed-array: 1.1.13
is-typed-array: 1.1.15
possible-typed-array-names: 1.0.0
typed-array-length@1.0.7:
@ -32931,9 +32848,9 @@ snapshots:
unbox-primitive@1.0.2:
dependencies:
call-bind: 1.0.8
has-bigints: 1.0.2
has-bigints: 1.1.0
has-symbols: 1.1.0
which-boxed-primitive: 1.0.2
which-boxed-primitive: 1.1.1
unbox-primitive@1.1.0:
dependencies:
@ -33346,7 +33263,7 @@ snapshots:
vue-component-type-helpers@2.2.12: {}
vue-component-type-helpers@3.1.0-alpha.0: {}
vue-component-type-helpers@3.0.8: {}
vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):
dependencies:
@ -33577,14 +33494,6 @@ snapshots:
tr46: 1.0.1
webidl-conversions: 4.0.2
which-boxed-primitive@1.0.2:
dependencies:
is-bigint: 1.0.4
is-boolean-object: 1.1.2
is-number-object: 1.0.7
is-string: 1.1.1
is-symbol: 1.0.4
which-boxed-primitive@1.1.1:
dependencies:
is-bigint: 1.1.0

1
pnpm-workspace.yaml
View File

@ -65,6 +65,7 @@ catalogs:
'@testing-library/jest-dom': ^6.6.3
'@testing-library/user-event': ^14.6.1
'@testing-library/vue': ^8.1.0
'@vue/test-utils': ^2.4.6
'@vue/tsconfig': ^0.7.0
'@vueuse/core': ^10.11.0
'@vitejs/plugin-vue': ^5.2.4