@lobehub/lobehub 2.0.0-next.227 → 2.0.0-next.228

package/AGENTS.md

@@ -74,6 +74,10 @@ The project follows a well-organized monorepo structure:
 - **Dev**: Translate `locales/zh-CN/namespace.json` locale file only for preview
 - DON'T run `pnpm i18n`, let CI auto handle it
 
+## Linear Issue Management
+
+Follow [Linear rules in CLAUDE.md](CLAUDE.md#linear-issue-management-ignore-if-not-installed-linear-mcp) when working with Linear issues.
+
 ## Project Rules Index
 
 All following rules are saved under `.cursor/rules/` directory:

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 2.0.0-next.228](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.227...v2.0.0-next.228)
+
+<sup>Released on **2026-01-06**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Add separate border-radius for bottom-right corner on macOS 26 Chrome.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Add separate border-radius for bottom-right corner on macOS 26 Chrome, closes [#11287](https://github.com/lobehub/lobe-chat/issues/11287) ([544931a](https://github.com/lobehub/lobe-chat/commit/544931a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.227](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.226...v2.0.0-next.227)
 
 <sup>Released on **2026-01-06**</sup>

package/CLAUDE.md

@@ -78,6 +78,10 @@ When creating new Linear issues using `mcp__linear-server__create_issue`, **MUST
 - Code review context
 - Future reference and debugging
 
+### PR Linear Issue Association (REQUIRED)
+
+**When creating PRs for Linear issues, MUST include magic keywords in PR body:** `Fixes LOBE-123`, `Closes LOBE-123`, or `Resolves LOBE-123`
+
 ### IMPORTANT: Per-Issue Completion Rule
 
 **When working on multiple issues (e.g., parent issue with sub-issues), you MUST update status and add comment for EACH issue IMMEDIATELY after completing it.** Do NOT wait until all issues are done to update them in batch.

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Add separate border-radius for bottom-right corner on macOS 26 Chrome."
+      ]
+    },
+    "date": "2026-01-06",
+    "version": "2.0.0-next.228"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.227",
+  "version": "2.0.0-next.228",
   "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",
@@ -206,7 +206,7 @@
     "@lobehub/icons": "^4.0.2",
     "@lobehub/market-sdk": "^0.27.1",
     "@lobehub/tts": "^4.0.2",
-    "@lobehub/ui": "^4.9.3",
+    "@lobehub/ui": "^4.11.5",
     "@modelcontextprotocol/sdk": "^1.25.1",
     "@neondatabase/serverless": "^1.0.2",
     "@next/third-parties": "^16.1.1",

package/packages/utils/src/platform.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { isArc, isSonomaOrLaterSafari } from './platform';
+import { isArc, isMacOSWithLargeWindowBorders, isSonomaOrLaterSafari } from './platform';
 
 describe('isSonomaOrLaterSafari', () => {
   beforeEach(() => {
@@ -12,6 +12,31 @@ describe('isSonomaOrLaterSafari', () => {
     });
   });
 
+  describe('isMacOSWithLargeWindowBorders', () => {
+    it('should return true for macOS 10.15+', () => {
+      vi.stubGlobal('navigator', {
+        userAgent:
+          'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36',
+      });
+
+      expect(isMacOSWithLargeWindowBorders()).toBe(true);
+    });
+
+    it('should return false for non-macOS userAgent', () => {
+      vi.stubGlobal('navigator', { userAgent: 'Windows NT 10.0; Win64; x64' });
+      expect(isMacOSWithLargeWindowBorders()).toBe(false);
+    });
+
+    it('should return false in Electron', () => {
+      vi.stubGlobal('navigator', {
+        userAgent:
+          'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Electron/30.0.0 Safari/537.36',
+      });
+
+      expect(isMacOSWithLargeWindowBorders()).toBe(false);
+    });
+  });
+
   it('should return false when userAgent is not Macintosh', () => {
     vi.stubGlobal('navigator', { userAgent: 'Windows NT 10.0; Win64; x64' });
     expect(isSonomaOrLaterSafari()).toBe(false);

package/packages/utils/src/platform.ts

@@ -25,6 +25,28 @@ export const browserInfo = {
 
 export const isMacOS = () => getPlatform() === 'Mac OS';
 
+/**
+ *
+ * We can't use it to detect the macOS real version, and we also don't know if it's macOS 26, only an estimated value.
+ * @returns true if the current browser is macOS and the version is 10.15 or later
+ */
+export const isMacOSWithLargeWindowBorders = () => {
+  if (isOnServerSide || typeof navigator === 'undefined') return false;
+
+  // keep consistent with the original logic: only for macOS on web (exclude Electron)
+  const isElectron =
+    /Electron\//.test(navigator.userAgent) || Boolean((window as any)?.process?.type);
+  if (isElectron || !isMacOS()) return false;
+
+  const match = navigator.userAgent.match(/Mac OS X (\d+)[._](\d+)/);
+  if (!match) return false;
+
+  const majorVersion = parseInt(match[1], 10);
+  const minorVersion = parseInt(match[2], 10);
+
+  return majorVersion >= 10 && minorVersion >= 15;
+};
+
 export const isArc = () => {
   if (isOnServerSide) return false;
   return (

package/src/app/[variants]/(main)/_layout/DesktopLayoutContainer/style.ts

@@ -11,6 +11,10 @@ export const styles = createStaticStyles(({ css, cssVar }) => ({
 
     border: 1px solid var(--container-border-color, ${cssVar.colorBorder});
     border-radius: var(--container-border-radius, ${cssVar.borderRadius});
+    border-end-end-radius: var(
+      --container-border-bottom-right-radius,
+      var(--container-border-radius, ${cssVar.borderRadius})
+    );
 
     background: ${cssVar.colorBgContainer};
   `,

package/src/app/[variants]/(main)/_layout/DesktopLayoutContainer.tsx

@@ -6,6 +6,7 @@ import { isDesktop } from '@/const/version';
 import { useIsDark } from '@/hooks/useIsDark';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
+import { isMacOSWithLargeWindowBorders } from '@/utils/platform';
 
 import { styles } from './DesktopLayoutContainer/style';
 
@@ -23,12 +24,15 @@ const DesktopLayoutContainer: FC<PropsWithChildren> = ({ children }) => {
   );
 
   const innerCssVariables = useMemo<Record<string, string>>(() => {
-    const borderRadius =
-      typeof window !== 'undefined' && (window.lobeEnv?.darwinMajorVersion ?? 0) >= 25
-        ? '12px'
-        : cssVar.borderRadius;
+    const darwinMajorVersion =
+      typeof window !== 'undefined' ? (window.lobeEnv?.darwinMajorVersion ?? 0) : 0;
+
+    const borderRadius = darwinMajorVersion >= 25 ? '12px' : cssVar.borderRadius;
+    const borderBottomRightRadius =
+      darwinMajorVersion >= 26 || isMacOSWithLargeWindowBorders() ? '12px' : borderRadius;
 
     return {
+      '--container-border-bottom-right-radius': borderBottomRightRadius,
       '--container-border-color': isDarkMode ? cssVar.colorBorderSecondary : cssVar.colorBorder,
       '--container-border-radius': borderRadius,
     };

package/src/app/[variants]/(main)/chat/_layout/Sidebar/Header/Agent/SwitchPanel.tsx

@@ -1,41 +1,55 @@
-import { Flexbox } from '@lobehub/ui';
-import { Popover } from 'antd';
-import React, { type PropsWithChildren, Suspense, memo } from 'react';
+import { Flexbox, Popover } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { type PropsWithChildren, Suspense, memo, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import List from '@/app/[variants]/(main)/home/_layout/Body/Agent/List';
 import { AgentModalProvider } from '@/app/[variants]/(main)/home/_layout/Body/Agent/ModalProvider';
 import SkeletonList from '@/features/NavPanel/components/SkeletonList';
 
+const styles = createStaticStyles(({ cssVar, css }) => ({
+  trigger: css`
+    &[data-popup-open] {
+      background: ${cssVar.colorFillTertiary};
+    }
+  `,
+}));
+
 const SwitchPanel = memo<PropsWithChildren>(({ children }) => {
   const navigate = useNavigate();
+
+  const content = useMemo(
+    () => (
+      <Suspense fallback={<SkeletonList rows={6} />}>
+        <AgentModalProvider>
+          <Flexbox
+            gap={4}
+            padding={8}
+            style={{
+              maxHeight: '50vh',
+              overflowY: 'auto',
+            }}
+          >
+            <List onMoreClick={() => navigate('/')} />
+          </Flexbox>
+        </AgentModalProvider>
+      </Suspense>
+    ),
+    [navigate],
+  );
+
   return (
     <Popover
-      arrow={false}
-      content={
-        <Suspense fallback={<SkeletonList rows={6} />}>
-          <AgentModalProvider>
-            <Flexbox
-              gap={4}
-              padding={8}
-              style={{
-                maxHeight: '50vh',
-                overflowY: 'auto',
-              }}
-            >
-              <List onMoreClick={() => navigate('/')} />
-            </Flexbox>
-          </AgentModalProvider>
-        </Suspense>
-      }
-      placement={'bottomLeft'}
+      classNames={{ trigger: styles.trigger }}
+      content={content}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 0,
           width: 240,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       {children}
     </Popover>

package/src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/List/Item/Editing.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Input, Popover } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 
 import { useChatStore } from '@/store/chat';
@@ -47,7 +46,6 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
 
   return (
     <Popover
-      arrow={false}
       content={
         <Input
           autoFocus
@@ -64,20 +62,19 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
           }}
         />
       }
-      destroyOnHidden
       onOpenChange={(open) => {
         if (!open) handleUpdate();
         toggleEditing(open);
       }}
       open={editing}
-      placement={'bottomLeft'}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 4,
           width: 320,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       <div />
     </Popover>

package/src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/Editing.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Input, Popover } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 
 import { useChatStore } from '@/store/chat';
@@ -26,7 +25,6 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
 
   return (
     <Popover
-      arrow={false}
       content={
         <Input
           autoFocus
@@ -43,20 +41,19 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
           }}
         />
       }
-      destroyOnHidden
       onOpenChange={(open) => {
         if (!open) handleUpdate();
         toggleEditing(open);
       }}
       open={editing}
-      placement={'bottomLeft'}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 4,
           width: 320,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       <div />
     </Popover>

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { ActionIcon, Dropdown } from '@lobehub/ui';
-import type { MenuProps } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu } from '@lobehub/ui';
 import { MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
 
@@ -13,18 +12,9 @@ const HeaderActions = memo(() => {
   const { menuItems } = useMenu();
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: menuItems as MenuProps['items'],
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={menuItems}>
       <ActionIcon icon={MoreHorizontal} size={DESKTOP_HEADER_ICON_SIZE} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/chat/features/Conversation/Header/WorkingDirectory/index.tsx

@@ -1,6 +1,5 @@
 import { LocalSystemManifest } from '@lobechat/builtin-tool-local-system';
-import { Flexbox, Icon, Tooltip } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Flexbox, Icon, Popover, Tooltip } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { LaptopIcon, SquircleDashed } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
@@ -90,12 +89,11 @@ const WorkingDirectory = memo(() => {
   );
   return (
     <Popover
-      arrow={false}
       content={<WorkingDirectoryContent agentId={agentId} onClose={() => setOpen(false)} />}
       onOpenChange={setOpen}
       open={open}
       placement="bottomRight"
-      trigger={['click']}
+      trigger="click"
     >
       <div>
         {open ? (

package/src/app/[variants]/(main)/community/(list)/model/features/List/Item.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { ModelIcon, ProviderIcon } from '@lobehub/icons';
-import { Block, Flexbox, Icon, Tag, Text } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Block, Flexbox, Icon, Popover, Tag, Text } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import { ClockIcon } from 'lucide-react';
@@ -155,7 +154,6 @@ const ModelItem = memo<DiscoverModelItem>(
               />
             </Flexbox>
             <Popover
-              arrow={false}
               content={
                 <Flexbox
                   gap={6}

package/src/app/[variants]/(main)/group/_layout/Sidebar/GroupConfig/AgentProfilePopup.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import type { AgentItem } from '@lobechat/types';
-import { Avatar, Center, Flexbox, Text, Tooltip } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Avatar, Center, Flexbox, Popover, Text, Tooltip } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { type PropsWithChildren, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -167,15 +166,14 @@ const AgentProfilePopup = memo<AgentProfilePopupProps>(({ agent, groupId, childr
 
   return (
     <Popover
-      arrow={false}
       content={content}
       onOpenChange={setOpen}
       open={open}
       placement="right"
       styles={{
-        container: { overflow: 'hidden', padding: 0 },
+        content: { overflow: 'hidden', padding: 0 },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       {children}
     </Popover>

package/src/app/[variants]/(main)/group/_layout/Sidebar/Header/Agent/SwitchPanel.tsx

@@ -1,5 +1,4 @@
-import { Flexbox } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Flexbox, Popover } from '@lobehub/ui';
 import React, { type PropsWithChildren, Suspense, memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -11,7 +10,6 @@ const SwitchPanel = memo<PropsWithChildren>(({ children }) => {
   const navigate = useNavigate();
   return (
     <Popover
-      arrow={false}
       content={
         <Suspense fallback={<SkeletonList rows={6} />}>
           <AgentModalProvider>
@@ -28,14 +26,14 @@ const SwitchPanel = memo<PropsWithChildren>(({ children }) => {
           </AgentModalProvider>
         </Suspense>
       }
-      placement={'bottomLeft'}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 0,
           width: 240,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       {children}
     </Popover>

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/List/Item/Editing.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Input, Popover } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 
 import { useChatStore } from '@/store/chat';
@@ -47,7 +46,6 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
 
   return (
     <Popover
-      arrow={false}
       content={
         <Input
           autoFocus
@@ -64,20 +62,19 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
           }}
         />
       }
-      destroyOnHidden
       onOpenChange={(open) => {
         if (!open) handleUpdate();
         toggleEditing(open);
       }}
       open={editing}
-      placement={'bottomLeft'}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 4,
           width: 320,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       <div />
     </Popover>

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/Editing.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Input, Popover } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 
 import { useChatStore } from '@/store/chat';
@@ -26,7 +25,6 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
 
   return (
     <Popover
-      arrow={false}
       content={
         <Input
           autoFocus
@@ -43,20 +41,19 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
           }}
         />
       }
-      destroyOnHidden
       onOpenChange={(open) => {
         if (!open) handleUpdate();
         toggleEditing(open);
       }}
       open={editing}
-      placement={'bottomLeft'}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 4,
           width: 320,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       <div />
     </Popover>

package/src/app/[variants]/(main)/home/_layout/Body/Agent/List/AgentGroupItem/Editing.tsx

@@ -1,5 +1,4 @@
-import { Flexbox, Input } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Flexbox, Input, Popover } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 
 import { useHomeStore } from '@/store/home';
@@ -38,7 +37,6 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
 
   return (
     <Popover
-      arrow={false}
       content={
         <Flexbox gap={4} horizontal onClick={(e) => e.stopPropagation()} style={{ width: 280 }}>
           <Input
@@ -53,19 +51,18 @@ const Editing = memo<EditingProps>(({ id, title, toggleEditing }) => {
           />
         </Flexbox>
       }
-      destroyOnHidden
       onOpenChange={(open) => {
         if (!open) handleUpdate();
         toggleEditing(open);
       }}
       open={editing}
-      placement={'bottomLeft'}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 4,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       <div />
     </Popover>

package/src/app/[variants]/(main)/home/_layout/Body/Agent/List/AgentItem/Editing.tsx

@@ -1,5 +1,4 @@
-import { Avatar, Block, Flexbox, Input } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Avatar, Block, Flexbox, Input, Popover } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 
 import EmojiPicker from '@/components/EmojiPicker';
@@ -55,7 +54,6 @@ const Editing = memo<EditingProps>(({ id, title, avatar, toggleEditing }) => {
 
   return (
     <Popover
-      arrow={false}
       content={
         <Flexbox gap={4} horizontal onClick={(e) => e.stopPropagation()} style={{ width: 320 }}>
           <EmojiPicker
@@ -89,19 +87,18 @@ const Editing = memo<EditingProps>(({ id, title, avatar, toggleEditing }) => {
           />
         </Flexbox>
       }
-      destroyOnHidden
       onOpenChange={(open) => {
         if (!open) handleUpdate();
         toggleEditing(open);
       }}
       open={editing}
-      placement={'bottomLeft'}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 4,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       <div />
     </Popover>