@lobehub/lobehub 2.0.0-next.270 → 2.0.0-next.272

package/.eslintrc.js

@@ -22,6 +22,7 @@ config.rules['unicorn/prefer-query-selector'] = 0;
 config.rules['unicorn/no-array-callback-reference'] = 0;
 // FIXME: Linting error in src/app/[variants]/(main)/chat/features/Migration/DBReader.ts, the fundamental solution should be upgrading typescript-eslint
 config.rules['@typescript-eslint/no-useless-constructor'] = 0;
+config.rules['@next/next/no-img-element'] = 0;
 
 config.overrides = [
   {

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 2.0.0-next.272](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.271...v2.0.0-next.272)
+
+<sup>Released on **2026-01-13**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Refresh sidebar after sendAsGroup and add E2E tests.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Refresh sidebar after sendAsGroup and add E2E tests, closes [#11450](https://github.com/lobehub/lobe-chat/issues/11450) ([8376a80](https://github.com/lobehub/lobe-chat/commit/8376a80))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 2.0.0-next.271](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.270...v2.0.0-next.271)
+
+<sup>Released on **2026-01-12**</sup>
+
+#### ✨ Features
+
+- **misc**: Improve baseline alignment for tool items.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Improve baseline alignment for tool items, closes [#11447](https://github.com/lobehub/lobe-chat/issues/11447) ([be8dddd](https://github.com/lobehub/lobe-chat/commit/be8dddd))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.270](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.269...v2.0.0-next.270)
 
 <sup>Released on **2026-01-12**</sup>

package/changelog/v1.json

@@ -1,4 +1,22 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Refresh sidebar after sendAsGroup and add E2E tests."
+      ]
+    },
+    "date": "2026-01-13",
+    "version": "2.0.0-next.272"
+  },
+  {
+    "children": {
+      "features": [
+        "Improve baseline alignment for tool items."
+      ]
+    },
+    "date": "2026-01-12",
+    "version": "2.0.0-next.271"
+  },
   {
     "children": {},
     "date": "2026-01-12",

package/e2e/src/features/home/starter.feature

@@ -0,0 +1,34 @@
+@journey @home @starter
+Feature: Home 页面 Starter 快捷创建功能
+  作为用户，我希望在 Home 页面可以通过 Starter 快捷创建 Agent 或 Group，返回首页后在侧边栏中看到它
+
+  Background:
+    Given 用户已登录系统
+
+  # ============================================
+  # 创建 Agent 后侧边栏刷新
+  # ============================================
+
+  @HOME-STARTER-AGENT-001 @P0
+  Scenario: 通过 Home 页面创建 Agent 后返回首页侧边栏应显示新创建的 Agent
+    Given 用户在 Home 页面
+    When 用户点击创建 Agent 按钮
+    And 用户在输入框中输入 "E2E Test Agent"
+    And 用户按 Enter 发送
+    Then 页面应该跳转到 Agent 的 profile 页面
+    When 用户返回 Home 页面
+    Then 新创建的 Agent 应该在侧边栏中显示
+
+  # ============================================
+  # 创建 Group 后侧边栏刷新
+  # ============================================
+
+  @HOME-STARTER-GROUP-001 @P0
+  Scenario: 通过 Home 页面创建 Group 后返回首页侧边栏应显示新创建的 Group
+    Given 用户在 Home 页面
+    When 用户点击创建 Group 按钮
+    And 用户在输入框中输入 "E2E Test Group"
+    And 用户按 Enter 发送
+    Then 页面应该跳转到 Group 的 profile 页面
+    When 用户返回 Home 页面
+    Then 新创建的 Group 应该在侧边栏中显示

package/e2e/src/steps/community/interactions.steps.ts

@@ -55,12 +55,13 @@ When('I click on a category in the category menu', async function (this: CustomW
   // Wait for categories to be visible
   await categoryItems.first().waitFor({ state: 'visible', timeout: 30_000 });
 
-  // Click the second category (skip "All" which is usually first)
-  const secondCategory = categoryItems.nth(1);
-  await secondCategory.click();
+  // Click the third category (skip "Discover" at index 0 and "All" at index 1)
+  // This should select the first actual category filter like "Academic"
+  const targetCategory = categoryItems.nth(2);
+  await targetCategory.click();
 
   // Store the category for later verification
-  const categoryText = await secondCategory.textContent();
+  const categoryText = await targetCategory.textContent();
   this.testContext.selectedCategory = categoryText?.trim();
 });
 
@@ -94,12 +95,13 @@ When('I click on a category in the category filter', async function (this: Custo
   // Wait for categories to be visible
   await categoryItems.first().waitFor({ state: 'visible', timeout: 30_000 });
 
-  // Click the second category (skip "All" which is usually first)
-  const secondCategory = categoryItems.nth(1);
-  await secondCategory.click();
+  // Click the third category (skip "Discover" at index 0 and "All" at index 1)
+  // This should select the first actual category filter
+  const targetCategory = categoryItems.nth(2);
+  await targetCategory.click();
 
   // Store the category for later verification
-  const categoryText = await secondCategory.textContent();
+  const categoryText = await targetCategory.textContent();
   this.testContext.selectedCategory = categoryText?.trim();
 });
 
@@ -285,10 +287,15 @@ When(
 
     // Try to find "more" link near MCP-related content
     const mcpSection = this.page.locator('section:has-text("MCP"), div:has-text("MCP Tools")');
-    const mcpSectionVisible = await mcpSection.first().isVisible().catch(() => false);
+    const mcpSectionVisible = await mcpSection
+      .first()
+      .isVisible()
+      .catch(() => false);
 
     if (mcpSectionVisible) {
-      const moreLinkInSection = mcpSection.locator(`a:has-text("${linkText}"), button:has-text("${linkText}")`);
+      const moreLinkInSection = mcpSection.locator(
+        `a:has-text("${linkText}"), button:has-text("${linkText}")`,
+      );
       if ((await moreLinkInSection.count()) > 0) {
         await moreLinkInSection.first().click();
         return;
@@ -297,7 +304,9 @@ When(
 
     // Fallback: click on MCP in the sidebar navigation
     console.log('   📍 Fallback: clicking MCP in sidebar');
-    const mcpNavItem = this.page.locator('nav a:has-text("MCP"), [class*="nav"] a:has-text("MCP")').first();
+    const mcpNavItem = this.page
+      .locator('nav a:has-text("MCP"), [class*="nav"] a:has-text("MCP")')
+      .first();
     if (await mcpNavItem.isVisible().catch(() => false)) {
       await mcpNavItem.click();
       return;
@@ -363,9 +372,19 @@ Then(
 
 Then('the URL should contain the category parameter', async function (this: CustomWorld) {
   const currentUrl = this.page.url();
+  console.log(`   📍 Current URL: ${currentUrl}`);
+  console.log(`   📍 Selected category: ${this.testContext.selectedCategory}`);
+
   // Check if URL contains a category-related parameter
+  // The URL format is: /community/assistant?category=xxx
+  const hasCategory =
+    currentUrl.includes('category=') ||
+    currentUrl.includes('tag=') ||
+    // For path-based routing like /community/assistant/category-name
+    /\/community\/assistant\/[^/?]+/.test(currentUrl);
+
   expect(
-    currentUrl.includes('category=') || currentUrl.includes('tag='),
+    hasCategory,
     `Expected URL to contain category parameter, but got: ${currentUrl}`,
   ).toBeTruthy();
 });
@@ -383,7 +402,9 @@ Then('I should see different assistant cards', async function (this: CustomWorld
 
   // If we used infinite scroll, check that we have cards (might be same or more)
   if (this.testContext.usedInfiniteScroll) {
-    console.log(`   📍 Used infinite scroll, initial count was: ${this.testContext.initialCardCount}`);
+    console.log(
+      `   📍 Used infinite scroll, initial count was: ${this.testContext.initialCardCount}`,
+    );
     expect(currentCount).toBeGreaterThan(0);
   } else {
     expect(currentCount).toBeGreaterThan(0);
@@ -463,7 +484,9 @@ Then('I should see the model detail content', async function (this: CustomWorld)
 
   // Model detail page should have tabs like "Overview", "Model Parameters"
   // Wait for these specific elements to appear
-  const modelTabs = this.page.locator('text=/Overview|Model Parameters|Related Recommendations|Configuration Guide/');
+  const modelTabs = this.page.locator(
+    'text=/Overview|Model Parameters|Related Recommendations|Configuration Guide/',
+  );
 
   console.log('   📍 Waiting for model detail content to load...');
   await expect(modelTabs.first()).toBeVisible({ timeout: 30_000 });

package/e2e/src/steps/home/starter.steps.ts

@@ -0,0 +1,216 @@
+/**
+ * Home Starter Steps
+ *
+ * Step definitions for Home page Starter E2E tests
+ * - Create Agent from Home input
+ * - Create Group from Home input
+ * - Verify Agent/Group appears in sidebar after returning to Home
+ */
+import { Given, Then, When } from '@cucumber/cucumber';
+import { expect } from '@playwright/test';
+
+import { llmMockManager, presetResponses } from '../../mocks/llm';
+import { CustomWorld, WAIT_TIMEOUT } from '../../support/world';
+
+// Store created IDs for verification
+let createdAgentId: string | null = null;
+let createdGroupId: string | null = null;
+
+// ============================================
+// Given Steps
+// ============================================
+
+Given('用户在 Home 页面', async function (this: CustomWorld) {
+  console.log('   📍 Step: 设置 LLM mock...');
+  // Setup LLM mock before navigation (for agent/group builder message)
+  llmMockManager.setResponse('E2E Test Agent', presetResponses.greeting);
+  llmMockManager.setResponse('E2E Test Group', presetResponses.greeting);
+  await llmMockManager.setup(this.page);
+
+  console.log('   📍 Step: 导航到 Home 页面...');
+  await this.page.goto('/');
+  await this.page.waitForLoadState('networkidle', { timeout: 15_000 });
+  await this.page.waitForTimeout(1000);
+
+  // Reset IDs for each test
+  createdAgentId = null;
+  createdGroupId = null;
+
+  console.log('   ✅ 已进入 Home 页面');
+});
+
+// ============================================
+// When Steps
+// ============================================
+
+When('用户点击创建 Agent 按钮', async function (this: CustomWorld) {
+  console.log('   📍 Step: 点击创建 Agent 按钮...');
+
+  // Find the "Create Agent" button by text (supports both English and Chinese)
+  const createAgentButton = this.page
+    .getByRole('button', { name: /create agent|创建智能体/i })
+    .first();
+
+  await expect(createAgentButton).toBeVisible({ timeout: WAIT_TIMEOUT });
+  await createAgentButton.click();
+  await this.page.waitForTimeout(500);
+
+  console.log('   ✅ 已点击创建 Agent 按钮');
+});
+
+When('用户点击创建 Group 按钮', async function (this: CustomWorld) {
+  console.log('   📍 Step: 点击创建 Group 按钮...');
+
+  // Find the "Create Group" button by text (supports both English and Chinese)
+  const createGroupButton = this.page
+    .getByRole('button', { name: /create group|创建群组/i })
+    .first();
+
+  await expect(createGroupButton).toBeVisible({ timeout: WAIT_TIMEOUT });
+  await createGroupButton.click();
+  await this.page.waitForTimeout(500);
+
+  console.log('   ✅ 已点击创建 Group 按钮');
+});
+
+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
+  const chatInputContainer = this.page.locator('[data-testid="chat-input"]').first();
+
+  // 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');
+  }
+
+  await this.page.waitForTimeout(300);
+  await this.page.keyboard.type(message, { delay: 30 });
+
+  console.log(`   ✅ 已输入 "${message}"`);
+});
+
+When('用户按 Enter 发送', async function (this: CustomWorld) {
+  console.log('   📍 Step: 按 Enter 发送...');
+
+  // Listen for navigation to capture the agent/group ID
+  const navigationPromise = this.page.waitForURL(/\/(agent|group)\/.*\/profile/, {
+    timeout: 30_000,
+  });
+
+  await this.page.keyboard.press('Enter');
+
+  // Wait for navigation to profile page
+  await navigationPromise;
+  await this.page.waitForLoadState('networkidle', { timeout: 15_000 });
+
+  // Extract agent/group ID from URL
+  const currentUrl = this.page.url();
+
+  const agentMatch = currentUrl.match(/\/agent\/([^/]+)/);
+  if (agentMatch) {
+    createdAgentId = agentMatch[1];
+    console.log(`   📍 Created agent ID: ${createdAgentId}`);
+  }
+
+  const groupMatch = currentUrl.match(/\/group\/([^/]+)/);
+  if (groupMatch) {
+    createdGroupId = groupMatch[1];
+    console.log(`   📍 Created group ID: ${createdGroupId}`);
+  }
+
+  console.log('   ✅ 已发送消息');
+});
+
+When('用户返回 Home 页面', async function (this: CustomWorld) {
+  console.log('   📍 Step: 返回 Home 页面...');
+
+  await this.page.goto('/');
+  await this.page.waitForLoadState('networkidle', { timeout: 15_000 });
+  await this.page.waitForTimeout(1000);
+
+  console.log('   ✅ 已返回 Home 页面');
+});
+
+// ============================================
+// Then Steps
+// ============================================
+
+Then('页面应该跳转到 Agent 的 profile 页面', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证页面跳转到 Agent profile 页面...');
+
+  // Check current URL matches /agent/{id}/profile pattern
+  const currentUrl = this.page.url();
+  expect(currentUrl).toMatch(/\/agent\/[^/]+\/profile/);
+
+  console.log('   ✅ 已跳转到 Agent profile 页面');
+});
+
+Then('页面应该跳转到 Group 的 profile 页面', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证页面跳转到 Group profile 页面...');
+
+  // Check current URL matches /group/{id}/profile pattern
+  const currentUrl = this.page.url();
+  expect(currentUrl).toMatch(/\/group\/[^/]+\/profile/);
+
+  console.log('   ✅ 已跳转到 Group profile 页面');
+});
+
+Then('新创建的 Agent 应该在侧边栏中显示', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证 Agent 在侧边栏中显示...');
+
+  // Wait for sidebar to be visible and data to load
+  await this.page.waitForTimeout(1500);
+
+  // Check if the agent appears in sidebar by its link (primary assertion)
+  // This proves that refreshAgentList() was called and the sidebar was updated
+  if (!createdAgentId) {
+    throw new Error('Agent ID was not captured during creation');
+  }
+
+  const agentLink = this.page.locator(`a[href="/agent/${createdAgentId}"]`).first();
+  await expect(agentLink).toBeVisible({ timeout: WAIT_TIMEOUT });
+  console.log(`   ✅ 找到 Agent 链接: /agent/${createdAgentId}`);
+
+  // Get the aria-label or text content to verify it's the correct agent
+  const ariaLabel = await agentLink.getAttribute('aria-label');
+  console.log(`   📍 Agent aria-label: ${ariaLabel}`);
+
+  console.log('   ✅ Agent 已在侧边栏中显示');
+});
+
+Then('新创建的 Group 应该在侧边栏中显示', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证 Group 在侧边栏中显示...');
+
+  // Wait for sidebar to be visible and data to load
+  await this.page.waitForTimeout(1500);
+
+  // Check if the group appears in sidebar by its link (primary assertion)
+  // This proves that refreshAgentList() was called and the sidebar was updated
+  if (!createdGroupId) {
+    throw new Error('Group ID was not captured during creation');
+  }
+
+  const groupLink = this.page.locator(`a[href="/group/${createdGroupId}"]`).first();
+  await expect(groupLink).toBeVisible({ timeout: WAIT_TIMEOUT });
+  console.log(`   ✅ 找到 Group 链接: /group/${createdGroupId}`);
+
+  // Get the aria-label or text content to verify it's the correct group
+  const ariaLabel = await groupLink.getAttribute('aria-label');
+  console.log(`   📍 Group aria-label: ${ariaLabel}`);
+
+  console.log('   ✅ Group 已在侧边栏中显示');
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.270",
+  "version": "2.0.0-next.272",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/agent/features/Conversation/Header/HeaderActions/useMenu.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { Flexbox } from '@lobehub/ui';
-import { Switch } from 'antd';
+import { type DropdownMenuCheckboxItem } from '@lobehub/ui';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
-export const useMenu = (): { menuItems: any[] } => {
+export const useMenu = (): { menuItems: DropdownMenuCheckboxItem[] } => {
   const { t } = useTranslation('chat');
 
   const [wideScreen, toggleWideScreen] = useGlobalStore((s) => [
@@ -16,23 +15,14 @@ export const useMenu = (): { menuItems: any[] } => {
     s.toggleWideScreen,
   ]);
 
-  const menuItems = useMemo(
+  const menuItems = useMemo<DropdownMenuCheckboxItem[]>(
     () => [
       {
+        checked: wideScreen,
         key: 'full-width',
-        label: (
-          <Flexbox align="center" horizontal justify="space-between">
-            <span>{t('viewMode.fullWidth')}</span>
-            <Switch
-              checked={wideScreen}
-              onChange={toggleWideScreen}
-              onClick={(checked, event) => {
-                event.stopPropagation();
-              }}
-              size="small"
-            />
-          </Flexbox>
-        ),
+        label: t('viewMode.fullWidth'),
+        onCheckedChange: toggleWideScreen,
+        type: 'checkbox',
       },
     ],
     [t, wideScreen, toggleWideScreen],