centersl/lobehub
1
0
Fork 0
mirror of https://github.com/lobehub/lobehub.git synced 2026-03-26 13:19:34 +07:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix: scroll ChatInput into view when starter mode activates (#12334)

Browse Source 
* 🐛 fix: scroll ChatInput into view when starter mode activates

When clicking Create Agent/Group/Write, the SuggestQuestions panel
renders below the ChatInput and pushes total content beyond the
viewport, causing the ChatInput to scroll out of view. This adds
scrollIntoView + focus on mode change so the editor stays visible
and ready for input. Also improves E2E test to target contenteditable
inside ChatInput directly and wait for animation to settle.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* update

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Arvin Xu
2026-02-15 22:06:14 +08:00
committed by GitHub
parent c1916a1996
commit d2a042cd95
2 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
e2e/src/steps/home/starter.steps.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable no-console */
/**
* Home Starter Steps
*
@@ -61,7 +62,9 @@ When('用户点击创建 Agent 按钮', async function (this: CustomWorld) {
await expect(createAgentButton).toBeVisible({ timeout: WAIT_TIMEOUT });
await createAgentButton.click();
await this.page.waitForTimeout(500);
// Wait for mode switch animation and ChatInput scroll-into-view to settle
await this.page.waitForTimeout(800);
console.log(' ✅ 已点击创建 Agent 按钮');
});
@@ -76,7 +79,9 @@ When('用户点击创建 Group 按钮', async function (this: CustomWorld) {
await expect(createGroupButton).toBeVisible({ timeout: WAIT_TIMEOUT });
await createGroupButton.click();
await this.page.waitForTimeout(500);
// Wait for mode switch animation and ChatInput scroll-into-view to settle
await this.page.waitForTimeout(800);
console.log(' ✅ 已点击创建 Group 按钮');
});
@@ -89,7 +94,9 @@ When('用户点击写作按钮', async function (this: CustomWorld) {
await expect(writeButton).toBeVisible({ timeout: WAIT_TIMEOUT });
await writeButton.click();
await this.page.waitForTimeout(500);
// Wait for mode switch animation and ChatInput scroll-into-view to settle
await this.page.waitForTimeout(800);
console.log(' ✅ 已点击写作按钮');
});
@@ -97,27 +104,14 @@ When('用户点击写作按钮', async function (this: CustomWorld) {
When('用户在输入框中输入 {string}', async function (this: CustomWorld, message: string) {
console.log(` 📍 Step: 在输入框中输入 "${message}"...`);
// The chat input is a contenteditable editor, need to click first then type
// The chat input is a contenteditable editor, need to click first then type.
// Target the contenteditable element INSIDE the ChatInput container directly,
// since clicking the container might hit the action bar/footer area instead.
const chatInputContainer = this.page.locator('[data-testid="chat-input"]').first();
await expect(chatInputContainer).toBeVisible({ timeout: WAIT_TIMEOUT });
// If data-testid not found, try alternative selectors
let inputFound = false;
if ((await chatInputContainer.count()) > 0) {
await chatInputContainer.click();
inputFound = true;
} else {
// Try to find the editor by its contenteditable attribute
const editor = this.page.locator('[contenteditable="true"]').first();
if ((await editor.count()) > 0) {
await editor.click();
inputFound = true;
}
}
if (!inputFound) {
throw new Error('Could not find chat input');
}
const editor = chatInputContainer.locator('[contenteditable="true"]').first();
await editor.click();
await this.page.waitForTimeout(300);
await this.page.keyboard.type(message, { delay: 30 });
@@ -127,8 +121,9 @@ When('用户在输入框中输入 {string}', async function (this: CustomWorld,
When('用户按 Enter 发送', { timeout: 30_000 }, async function (this: CustomWorld) {
console.log(' 📍 Step: 按 Enter 发送...');
// Wait for editor's debounced onChange (100ms default) to sync inputMessage to store
// Without this, inputMessage is empty and send() silently returns
// Wait for editor's debounced onChange (100ms default) to sync inputMessage to store.
// The send() function reads directly from the editor as a fallback, but this wait
// ensures maximum reliability.
await this.page.waitForTimeout(200);
// Listen for navigation to capture the agent/group ID