GenarrativeAI/Genarrative
10
0
Fork 0
Code Issues 21 Pull Requests 6 Actions Packages Projects 1 Releases Wiki Activity

style: 输入框尺寸根据输入内容grow，达到最大height后再出现翻页条。

Browse Source
This commit is contained in:
王德宇
2026-07-22 11:22:10 +08:00
parent aea43cfc10
commit 460bad3953
4 changed files with 129 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
+100 -27
View File
@@ -11,6 +11,7 @@ import {
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import type {
EditorAgentConversationDetail,
EditorAgentMessage,
EditorAgentMessageResponse,
} from '@/packages/shared/src/contracts';
@@ -269,12 +270,21 @@ describe('EditorAgentConversationPanelView', () => {
}) as HTMLButtonElement;
expect(newConversationButton.disabled).toBe(false);
fireEvent.change(screen.getByLabelText('发送给画布 Agent'), {
target: { value: '不应带入新会话的草稿' },
target: { value: '应保留到新会话的草稿' },
});
fireEvent.click(screen.getByRole('button', { name: '添加附件' }));
let attachmentDialog = screen.getByRole('dialog', {
const attachmentDialog = screen.getByRole('dialog', {
name: '选择图片附件',
});
expect(attachmentDialog.parentElement?.className).toContain(
'platform-theme--light',
);
expect(attachmentDialog.className).toContain('platform-remap-surface');
expect(
within(attachmentDialog).queryByRole('checkbox', {
name: '选择画布图片 未入库图层',
}),
).toBeNull();
fireEvent.click(
within(attachmentDialog).getByRole('checkbox', {
name: '选择画布图片 角色图层',
@@ -297,8 +307,8 @@ describe('EditorAgentConversationPanelView', () => {
});
expect(
(screen.getByLabelText('发送给画布 Agent') as HTMLTextAreaElement).value,
).toBe('');
expect(screen.queryByText('角色图层')).toBeNull();
).toBe('应保留到新会话的草稿');
expect(screen.getByText('角色图层')).toBeTruthy();
expect(
screen.getByRole('option', { name: '角色参考' }),
).toBeTruthy();
@@ -311,29 +321,6 @@ describe('EditorAgentConversationPanelView', () => {
fireEvent.click(newConversationButton);
expect(client.createConversation).toHaveBeenCalledTimes(1);
fireEvent.click(screen.getByRole('button', { name: '添加附件' }));
attachmentDialog = screen.getByRole('dialog', {
name: '选择图片附件',
});
expect(attachmentDialog.parentElement?.className).toContain(
'platform-theme--light',
);
expect(attachmentDialog.className).toContain('platform-remap-surface');
expect(
within(attachmentDialog).queryByRole('checkbox', {
name: '选择画布图片 未入库图层',
}),
).toBeNull();
fireEvent.click(
within(attachmentDialog).getByRole('checkbox', {
name: '选择画布图片 角色图层',
}),
);
fireEvent.click(
within(attachmentDialog).getByRole('button', { name: '应用' }),
);
expect(screen.getByText('角色图层')).toBeTruthy();
fireEvent.change(screen.getByLabelText('发送给画布 Agent'), {
target: { value: '参考附件做像素风' },
});
@@ -420,6 +407,64 @@ describe('EditorAgentConversationPanelView', () => {
).toBe('conversation-1');
});
it('preserves newer draft edits while creating a conversation', async () => {
const client = createClient();
let resolveCreate!: (detail: EditorAgentConversationDetail) => void;
vi.mocked(client.createConversation).mockImplementationOnce(
() =>
new Promise<EditorAgentConversationDetail>((resolve) => {
resolveCreate = resolve;
}),
);
render(
<EditorAgentConversationPanelView
open
onToggleOpen={vi.fn()}
client={client}
/>,
);
await waitFor(() => {
expect(screen.getByText('已经看到画布内容')).toBeTruthy();
});
const draftInput = screen.getByLabelText(
'发送给画布 Agent',
) as HTMLTextAreaElement;
fireEvent.change(draftInput, {
target: { value: '旧项目草稿' },
});
fireEvent.click(screen.getByRole('button', { name: '新建对话' }));
await waitFor(() => {
expect(client.createConversation).toHaveBeenCalledWith('project-1', {});
expect(draftInput.disabled).toBe(false);
});
expect(
(screen.getByRole('button', { name: '添加附件' }) as HTMLButtonElement)
.disabled,
).toBe(false);
fireEvent.change(draftInput, {
target: { value: '创建期间更新的草稿' },
});
await act(async () => {
resolveCreate({
conversationId: 'conversation-2',
projectId: 'project-1',
title: '新对话',
messages: [],
createdAt: '2026-07-03T00:01:00.000Z',
updatedAt: '2026-07-03T00:01:00.000Z',
});
await Promise.resolve();
});
expect(draftInput.value).toBe('创建期间更新的草稿');
expect(
(screen.getByLabelText('当前对话') as HTMLSelectElement).value,
).toBe('conversation-2');
});
it('disables sending while a message request is pending without showing stop', async () => {
const client = createClient();
let resolveSend!: (response: EditorAgentMessageResponse) => void;
@@ -927,6 +972,34 @@ describe('EditorAgentConversationPanelView', () => {
expect(inputWheel.defaultPrevented).toBe(false);
});
it('uses native content sizing with minimum and maximum height constraints', async () => {
const client = createClient();
render(
<EditorAgentConversationPanelView
open
onToggleOpen={vi.fn()}
client={client}
/>,
);
await waitFor(() => {
expect(screen.getByText('已经看到画布内容')).toBeTruthy();
});
const input = screen.getByLabelText(
'发送给画布 Agent',
) as HTMLTextAreaElement;
expect(input.className).toContain(
'editor-agent-conversation__draft-input',
);
expect(input.className).toContain('[field-sizing:content]');
expect(input.className).toContain('min-h-10');
expect(input.className).toContain('max-h-32');
expect(input.className).toContain('overflow-y-auto');
expect(input.className).not.toContain('overflow-y-hidden');
});
it('confirms conversation deletion from an independent dialog', async () => {
const client = createClient();
render(
src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
+1 -1
View File
@@ -705,7 +705,7 @@ export function EditorAgentConversationPanelView({
<Paperclip className="h-4 w-4" aria-hidden="true" />
</button>
<textarea
className="max-h-32 min-h-10 flex-1 resize-none overflow-y-auto overscroll-contain rounded-3xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-800 outline-none focus:border-slate-400"
className="editor-agent-conversation__draft-input max-h-32 min-h-10 min-w-0 flex-1 resize-none overflow-x-hidden overflow-y-auto overscroll-contain rounded-3xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-800 outline-none [field-sizing:content] focus:border-slate-400"
aria-label="发送给画布 Agent"
value={draftText}
rows={1}
src/index.css
+25
View File
@@ -16694,6 +16694,31 @@ button {
background: #3f3f46;
}
.editor-agent-conversation__draft-input {
scrollbar-color: #cbd5e1 transparent;
scrollbar-width: thin;
}
.editor-agent-conversation__draft-input::-webkit-scrollbar {
width: 6px;
}
.editor-agent-conversation__draft-input::-webkit-scrollbar-track {
margin-block: 10px;
background-color: transparent;
}
.editor-agent-conversation__draft-input::-webkit-scrollbar-thumb {
border: 1px solid transparent;
border-radius: 999px;
background-color: #cbd5e1;
background-clip: padding-box;
}
.editor-agent-conversation__draft-input::-webkit-scrollbar-thumb:hover {
background-color: #94a3b8;
}
.image-canvas-editor__metadata-dialog.platform-modal-shell {
border-color: rgba(226, 232, 240, 0.92) !important;
background: #ffffff !important;