github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-10-17 05:29:44 +02:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity Graph

fix(editor): Show one attach button in the agent chat composer (no-changelog) (#40810)

Browse Source 
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Jaakko Husso 2026-10-09 15:09:42 +00:00 committed by GitHub
parent 44a6370aba
commit d6370a0002
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/editor-ui/src/features/agents/__tests__/AgentChatPanel.test.ts
View File

@ -225,6 +225,7 @@ vi.mock('@/features/ai/shared/components/ChatInputBase.vue', async () => {
'disabled',
'maxLength',
'showAttach',
'showAttachButton',
'acceptedMimeTypes',
],
emits: ['submit', 'stop', 'update:modelValue', 'files-selected'],
@ -1040,6 +1041,12 @@ describe('AgentChatPanel', () => {
expect(wrapper.find('[data-test-id="chat-input-attach-button"]').exists()).toBe(true);
});
it('hides the built-in composer attach button in favor of its own footer button', () => {
const wrapper = mountPanel();
expect(wrapper.findComponent({ name: 'ChatInputBase' }).props('showAttachButton')).toBe(false);
});
it('hides the attach button when the model accepts no attachments', () => {
const wrapper = mountPanel({
agentConfig: { ...defaultAgentConfig, model: 'unknown-provider/model' },

8
packages/frontend/editor-ui/src/features/ai/shared/components/ChatInputBase.test.ts
View File

@ -190,6 +190,14 @@ describe('ChatInputBase', () => {
expect(queryByTestId('chat-input-attach-button')).not.toBeInTheDocument();
});
it('hides the built-in attach button when showAttachButton is false', () => {
const { queryByTestId } = renderComponent({
props: makeProps({ showAttach: true, showAttachButton: false, acceptedMimeTypes: 'image/*' }),
});
expect(queryByTestId('chat-input-attach-button')).not.toBeInTheDocument();
});
it('shows the drop overlay and emits dropped files', async () => {
const file = new File(['image'], 'image.png', { type: 'image/png' });
const { getByRole, getByTestId, queryByTestId, emitted } = renderComponent({

8
packages/frontend/editor-ui/src/features/ai/shared/components/ChatInputBase.vue
View File

@ -25,6 +25,11 @@ const props = withDefaults(
disabled?: boolean;
showVoice?: boolean;
showAttach?: boolean;
/**
* Shows the built-in attach button. A host that renders its own attach
* button sets this to false. Files can still be dropped or pasted.
*/
showAttachButton?: boolean;
/** Also shows the attach button. Without it, files can still be dropped or pasted. */
acceptedMimeTypes?: string;
/**
@ -46,6 +51,7 @@ const props = withDefaults(
{
placeholder: undefined,
showStopButton: undefined,
showAttachButton: true,
acceptedMimeTypes: undefined,
attachedEncodedBytes: 0,
autosize: () => ({ minRows: 2, maxRows: 6 }),
@ -294,7 +300,7 @@ defineExpose({
<template #right-actions>
<slot name="right-actions" />
<N8nTooltip
v-if="showAttach && acceptedMimeTypes !== undefined"
v-if="showAttach && showAttachButton && acceptedMimeTypes !== undefined"
:content="i18n.baseText('chatInputBase.button.attach')"
placement="top"
>