@lobehub/lobehub 2.0.0-next.297 → 2.0.0-next.299

package/src/features/PluginStore/PluginList/List/Action.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Button, Dropdown, Flexbox, Icon } from '@lobehub/ui';
+import { ActionIcon, Button, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
 import { App } from 'antd';
 import { MoreVerticalIcon, Trash2 } from 'lucide-react';
 import { memo } from 'react';
@@ -31,37 +31,34 @@ const Actions = memo<ActionsProps>(({ identifier }) => {
   return (
     <Flexbox align={'center'} horizontal>
       {installed ? (
-        <Dropdown
-          menu={{
-            items: [
-              {
-                danger: true,
-                icon: <Icon icon={Trash2} />,
-                key: 'uninstall',
-                label: t('store.actions.uninstall'),
-                onClick: () => {
-                  modal.confirm({
-                    centered: true,
-                    okButtonProps: { danger: true },
-                    onOk: async () => {
-                      // If plugin is enabled in current agent, disable it first
-                      if (isPluginEnabledInAgent) {
-                        await togglePlugin(identifier, false);
-                      }
-                      await unInstallPlugin(identifier);
-                    },
-                    title: t('store.actions.confirmUninstall'),
-                    type: 'error',
-                  });
-                },
+        <DropdownMenu
+          items={[
+            {
+              danger: true,
+              icon: <Icon icon={Trash2} />,
+              key: 'uninstall',
+              label: t('store.actions.uninstall'),
+              onClick: () => {
+                modal.confirm({
+                  centered: true,
+                  okButtonProps: { danger: true },
+                  onOk: async () => {
+                    // If plugin is enabled in current agent, disable it first
+                    if (isPluginEnabledInAgent) {
+                      await togglePlugin(identifier, false);
+                    }
+                    await unInstallPlugin(identifier);
+                  },
+                  title: t('store.actions.confirmUninstall'),
+                  type: 'error',
+                });
               },
-            ],
-          }}
+            },
+          ]}
           placement="bottomRight"
-          trigger={['click']}
         >
           <ActionIcon icon={MoreVerticalIcon} loading={installing} />
-        </Dropdown>
+        </DropdownMenu>
       ) : (
         <Button
           loading={installing}

package/src/features/PluginTag/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Dropdown, Icon, type MenuProps, Tag } from '@lobehub/ui';
-import { Center } from '@lobehub/ui';
+import { Center, DropdownMenu, Icon, type MenuProps, Tag } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
@@ -49,7 +48,7 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
   const count = plugins.length;
 
   return (
-    <Dropdown menu={{ items }}>
+    <DropdownMenu items={items}>
       <div>
         <Tag>
           {<Icon icon={LucideToyBrick} />}
@@ -57,7 +56,7 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
           {count > 1 && <div>({plugins.length - 1}+)</div>}
         </Tag>
       </div>
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/features/Portal/Artifacts/Body/Renderer/SVG.tsx

@@ -1,6 +1,6 @@
 import { BRANDING_NAME } from '@lobechat/business-const';
 import { copyImageToClipboard, sanitizeSVGContent } from '@lobechat/utils/client';
-import { Button, Center, Dropdown, Flexbox, Tooltip } from '@lobehub/ui';
+import { Button, Center, DropdownMenu, Flexbox, Tooltip } from '@lobehub/ui';
 import { snapdom } from '@zumer/snapdom';
 import { App, Space } from 'antd';
 import { css, cx } from 'antd-style';
@@ -98,19 +98,22 @@ const SVGRenderer = ({ content }: SVGRendererProps) => {
       />
       <Flexbox className={cx(actions)}>
         <Space.Compact>
-          <Dropdown
-            menu={{
-              items: [
-                { key: 'png', label: t('artifacts.svg.download.png') },
-                { key: 'svg', label: t('artifacts.svg.download.svg') },
-              ],
-              onClick: ({ key }) => {
-                downloadImage(key);
+          <DropdownMenu
+            items={[
+              {
+                key: 'png',
+                label: t('artifacts.svg.download.png'),
+                onClick: () => downloadImage('png'),
               },
-            }}
+              {
+                key: 'svg',
+                label: t('artifacts.svg.download.svg'),
+                onClick: () => downloadImage('svg'),
+              },
+            ]}
           >
             <Button icon={DownloadIcon} />
-          </Dropdown>
+          </DropdownMenu>
           <Tooltip title={t('artifacts.svg.copyAsImage')}>
             <Button
               icon={CopyIcon}

package/src/features/Portal/Thread/Chat/index.tsx

@@ -204,8 +204,8 @@ const ThreadChat = memo(() => {
       hasInitMessages={!!messages}
       hooks={hooks}
       messages={messages}
-      onMessagesChange={(msgs) => {
-        replaceMessages(msgs, { context });
+      onMessagesChange={(msgs, ctx) => {
+        replaceMessages(msgs, { context: ctx });
       }}
       operationState={operationState}
       skipFetch={isCreatingNewThread}

package/src/features/ProfileEditor/AgentTool.tsx

@@ -617,7 +617,7 @@ const AgentTool = memo<AgentToolProps>(
                   </div>
                 </div>
               )}
-              trigger={['click']}
+              trigger={'click'}
             >
               {button}
             </ActionDropdown>

package/src/features/ResourceManager/components/Explorer/ToolBar/SortDropdown.tsx

@@ -1,9 +1,8 @@
-import { Dropdown } from '@lobehub/ui';
+import { DropdownMenu, type DropdownMenuCheckboxItem } from '@lobehub/ui';
 import { ArrowDownAZ } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { type MenuProps } from '@/components/Menu';
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
 
 import ActionIconWithChevron from './ActionIconWithChevron';
@@ -22,30 +21,34 @@ const SortDropdown = memo(() => {
     [t],
   );
 
-  const menuItems: MenuProps['items'] = useMemo(
+  const selectedKey = sorter || 'createdAt';
+
+  const menuItems = useMemo<DropdownMenuCheckboxItem[]>(
     () =>
-      sortOptions.map((option) => ({
-        key: option.key,
-        label: option.label,
-        onClick: () => setSorter(option.key as 'name' | 'createdAt' | 'size'),
-      })),
-    [setSorter, sortOptions],
+      sortOptions.map(
+        (option): DropdownMenuCheckboxItem => ({
+          checked: option.key === selectedKey,
+          closeOnClick: true,
+          key: option.key,
+          label: option.label,
+          onCheckedChange: (checked: boolean) => {
+            if (checked) {
+              setSorter(option.key as 'name' | 'createdAt' | 'size');
+            }
+          },
+          type: 'checkbox',
+        }),
+      ),
+    [selectedKey, setSorter, sortOptions],
   );
 
   const currentSortLabel =
     sortOptions.find((option) => option.key === sorter)?.label || t('FileManager.sort.dateAdded');
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: menuItems,
-        selectable: true,
-        selectedKeys: [sorter || 'createdAt'],
-      }}
-    >
+    <DropdownMenu items={menuItems}>
       <ActionIconWithChevron icon={ArrowDownAZ} title={currentSortLabel} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/features/ResourceManager/components/Explorer/ToolBar/ViewSwitcher.tsx

@@ -1,5 +1,5 @@
-import { Dropdown, Icon } from '@lobehub/ui';
-import { Grid3x3Icon, ListIcon } from 'lucide-react';
+import { DropdownMenu, Icon } from '@lobehub/ui';
+import { Check, Grid3x3Icon, ListIcon } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -23,33 +23,27 @@ const ViewSwitcher = memo(() => {
   const menuItems: MenuProps['items'] = useMemo(
     () => [
       {
+        extra: viewMode === 'list' ? <Icon icon={Check} /> : undefined,
         icon: <Icon icon={ListIcon} />,
         key: 'list',
         label: t('FileManager.view.list'),
         onClick: () => setViewMode('list'),
       },
       {
+        extra: viewMode === 'masonry' ? <Icon icon={Check} /> : undefined,
         icon: <Icon icon={Grid3x3Icon} />,
         key: 'masonry',
         label: t('FileManager.view.masonry'),
         onClick: () => setViewMode('masonry'),
       },
     ],
-    [setViewMode, t],
+    [setViewMode, t, viewMode],
   );
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: menuItems,
-        selectable: true,
-        selectedKeys: [viewMode],
-      }}
-      placement="bottomRight"
-    >
+    <DropdownMenu items={menuItems} placement="bottomRight">
       <ActionIconWithChevron icon={currentViewIcon} title={currentViewLabel} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/features/ResourceManager/components/Header/AddButton.tsx

@@ -2,7 +2,7 @@
 
 import { FILE_URL } from '@lobechat/business-const';
 import { Notion } from '@lobehub/icons';
-import { Button, Dropdown, Icon, type MenuProps } from '@lobehub/ui';
+import { Button, DropdownMenu, Icon, type MenuProps } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { FilePenLine, FileUp, FolderIcon, FolderUp, Link, Plus } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
@@ -211,18 +211,11 @@ const AddButton = () => {
 
   return (
     <>
-      <Dropdown menu={{ items }} placement="bottomRight" trigger={['hover']}>
-        <Button
-          icon={Plus}
-          onClick={(e) => {
-            // Prevent default button behavior that might interfere with dropdown
-            e.stopPropagation();
-          }}
-          type="primary"
-        >
+      <DropdownMenu items={items} placement="bottomRight" trigger="both">
+        <Button data-no-highlight icon={Plus} type="primary">
           {t('addLibrary')}
         </Button>
-      </Dropdown>
+      </DropdownMenu>
       <GuideModal
         cancelText={t('header.actions.notionGuide.cancel')}
         cover={<GuideVideo height={269} src={FILE_URL.importFromNotionGuide} width={358} />}

package/src/features/User/UserPanel/LangButton.tsx

@@ -1,74 +1,86 @@
-import { ActionIcon, Dropdown, DropdownProps, Flexbox, Text } from '@lobehub/ui';
+import {
+  ActionIcon,
+  DropdownMenu,
+  type DropdownMenuCheckboxItem,
+  type DropdownMenuProps,
+  Flexbox,
+  Text,
+} from '@lobehub/ui';
 import { Languages } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { type MenuProps } from '@/components/Menu';
 import { localeOptions } from '@/locales/resources';
 import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
-import { type LocaleMode } from '@/types/locale';
 
-const LangButton = memo<{ placement?: DropdownProps['placement']; size?: number }>(
+const LangButton = memo<{ placement?: DropdownMenuProps['placement']; size?: number }>(
   ({ placement, size }) => {
     const [language, switchLocale] = useGlobalStore((s) => [
       globalGeneralSelectors.language(s),
       s.switchLocale,
     ]);
 
-    const handleLangChange = (value: LocaleMode) => {
-      switchLocale(value);
-    };
-
     const { t } = useTranslation(['setting', 'common']);
 
-    const items: MenuProps['items'] = useMemo(
-      () => [
-        {
-          key: 'auto',
-          label: (
-            <Flexbox gap={4}>
-              <Text style={{ lineHeight: 1.2 }}>{t('settingCommon.lang.autoMode')}</Text>
-              <Text fontSize={12} style={{ lineHeight: 1.2 }} type={'secondary'}>
-                {t(`lang.auto` as any, { ns: 'common' })}
-              </Text>
-            </Flexbox>
-          ),
-          onClick: () => handleLangChange('auto'),
+    const items = useMemo<DropdownMenuCheckboxItem[]>(() => {
+      const autoItem: DropdownMenuCheckboxItem = {
+        checked: language === 'auto',
+        closeOnClick: true,
+        key: 'auto',
+        label: (
+          <Flexbox gap={4}>
+            <Text style={{ lineHeight: 1.2 }}>{t('settingCommon.lang.autoMode')}</Text>
+            <Text fontSize={12} style={{ lineHeight: 1.2 }} type={'secondary'}>
+              {t(`lang.auto` as any, { ns: 'common' })}
+            </Text>
+          </Flexbox>
+        ),
+        onCheckedChange: (checked: boolean) => {
+          if (checked) {
+            switchLocale('auto');
+          }
         },
-        ...localeOptions.map((item) => ({
-          key: item.value,
-          label: (
-            <Flexbox gap={4} key={item.value}>
-              <Text style={{ lineHeight: 1.2 }}>{item.label}</Text>
-              <Text fontSize={12} style={{ lineHeight: 1.2 }} type={'secondary'}>
-                {t(`lang.${item.value}` as any, { ns: 'common' })}
-              </Text>
-            </Flexbox>
-          ),
-          onClick: () => handleLangChange(item.value),
-        })),
-      ],
-      [t],
-    );
+        type: 'checkbox',
+      };
+
+      const localeItems = localeOptions.map<DropdownMenuCheckboxItem>((item) => ({
+        checked: language === item.value,
+        closeOnClick: true,
+        key: item.value,
+        label: (
+          <Flexbox gap={4} key={item.value}>
+            <Text style={{ lineHeight: 1.2 }}>{item.label}</Text>
+            <Text fontSize={12} style={{ lineHeight: 1.2 }} type={'secondary'}>
+              {t(`lang.${item.value}` as any, { ns: 'common' })}
+            </Text>
+          </Flexbox>
+        ),
+        onCheckedChange: (checked: boolean) => {
+          if (checked) {
+            switchLocale(item.value);
+          }
+        },
+        type: 'checkbox',
+      }));
+
+      return [autoItem, ...localeItems];
+    }, [language, switchLocale, t]);
 
     return (
-      <Dropdown
-        arrow={false}
-        menu={{
-          items,
-          selectable: true,
-          selectedKeys: [language],
+      <DropdownMenu
+        items={items}
+        placement={placement}
+        popupProps={{
           style: {
             maxHeight: 360,
             minWidth: 240,
             overflow: 'auto',
           },
         }}
-        placement={placement}
       >
         <ActionIcon icon={Languages} size={size || { blockSize: 32, size: 16 }} />
-      </Dropdown>
+      </DropdownMenu>
     );
   },
 );

package/src/layout/AuthProvider/MarketAuth/MarketAuthProvider.tsx

@@ -151,7 +151,7 @@ export const MarketAuthProvider = ({ children, isDesktop }: MarketAuthProviderPr
     null,
   );
   const [pendingProfileSuccessCallback, setPendingProfileSuccessCallback] = useState<
-    ((profile: MarketUserProfile) => void) | null
+    ((_profile: MarketUserProfile) => void) | null
   >(null);
 
   // 订阅 user store 的初始化状态，当 isUserStateInit 为 true 时，settings 数据已加载完成

package/src/services/discover.ts

@@ -1,4 +1,8 @@
-import { type CategoryItem, type CategoryListQuery, type PluginManifest } from '@lobehub/market-sdk';
+import {
+  type CategoryItem,
+  type CategoryListQuery,
+  type PluginManifest,
+} from '@lobehub/market-sdk';
 import {
   AgentEventRequest,
   type CallReportRequest,
@@ -477,9 +481,7 @@ class DiscoverService {
     return lambdaClient.market.getGroupAgentIdentifiers.query();
   };
 
-  getGroupAgentList = async (
-    params: GroupAgentQueryParams = {},
-  ): Promise<any> => {
+  getGroupAgentList = async (params: GroupAgentQueryParams = {}): Promise<any> => {
     const locale = globalHelpers.getCurrentLanguage();
     return lambdaClient.market.getGroupAgentList.query(
       {

package/src/services/document/index.ts

@@ -2,6 +2,8 @@ import { type DocumentItem } from '@lobechat/database/schemas';
 
 import { lambdaClient } from '@/libs/trpc/client';
 
+import { abortableRequest } from '../utils/abortableRequest';
+
 export interface CreateDocumentParams {
   content?: string;
   editorData: string;
@@ -41,7 +43,15 @@ export class DocumentService {
     return lambdaClient.document.queryDocuments.query(params);
   }
 
-  async getDocumentById(id: string): Promise<DocumentItem | undefined> {
+  async getDocumentById(id: string, uniqueKey?: string): Promise<DocumentItem | undefined> {
+    if (uniqueKey) {
+      // Use fixed key so switching documents cancels the previous request
+      // This prevents race conditions where old document's data overwrites new document's editor
+      return abortableRequest.execute(uniqueKey, async (signal) =>
+        lambdaClient.document.getDocumentById.query({ id }, { signal }),
+      );
+    }
+
     return lambdaClient.document.getDocumentById.query({ id });
   }
 

package/src/store/page/slices/crud/action.ts

@@ -47,10 +47,6 @@ export interface CrudAction {
    * Duplicate an existing page
    */
   duplicatePage: (pageId: string) => Promise<{ [key: string]: any; id: string }>;
-  /**
-   * Fetch full page detail by ID and update documents array
-   */
-  fetchPageDetail: (pageId: string) => Promise<void>;
   navigateToPage: (pageId: string | null) => void;
   /**
    * Remove a page (deletes from documents table)
@@ -240,50 +236,6 @@ export const createCrudSlice: StateCreator<
     return newPage;
   },
 
-  fetchPageDetail: async (pageId) => {
-    try {
-      const document = await documentService.getDocumentById(pageId);
-
-      if (!document) {
-        console.warn(`[fetchPageDetail] Page not found: ${pageId}`);
-        return;
-      }
-
-      const fullPage: LobeDocument = {
-        content: document.content || null,
-        createdAt: document.createdAt ? new Date(document.createdAt) : new Date(),
-        editorData:
-          typeof document.editorData === 'string'
-            ? JSON.parse(document.editorData)
-            : document.editorData || null,
-        fileType: document.fileType,
-        filename: document.title || document.filename || 'Untitled',
-        id: document.id,
-        metadata: document.metadata || {},
-        source: 'document',
-        sourceType: DocumentSourceType.EDITOR,
-        title: document.title || '',
-        totalCharCount: document.content?.length || 0,
-        totalLineCount: 0,
-        updatedAt: document.updatedAt ? new Date(document.updatedAt) : new Date(),
-      };
-
-      // Update document via internal dispatch
-      const { documents } = get();
-      if (documents?.some((doc) => doc.id === pageId)) {
-        get().internal_dispatchDocuments({
-          document: fullPage,
-          id: pageId,
-          type: 'updateDocument',
-        });
-      } else {
-        get().internal_dispatchDocuments({ document: fullPage, type: 'addDocument' });
-      }
-    } catch (error) {
-      console.error('[fetchPageDetail] Failed to fetch page:', error);
-    }
-  },
-
   navigateToPage: (pageId) => {
     if (!pageId) {
       get().navigate?.('/page');

package/src/store/tool/slices/lobehubSkillStore/action.ts

@@ -315,11 +315,10 @@ export const createLobehubSkillStoreSlice: StateCreator<
         const response = await toolsClient.market.connectListConnections.query();
 
         // Debug logging
-        console.log('[useFetchLobehubSkillConnections] raw response:', response);
 
         return response.connections.map((conn: any) => {
           // Debug logging for each connection
-          console.log('[useFetchLobehubSkillConnections] connection:', conn);
+
           // Get provider config from local definition for correct display name
           const providerConfig = getLobehubSkillProviderById(conn.providerId);
           return {

package/src/styles/global.ts

@@ -55,8 +55,8 @@ export default ({ token }: { prefixCls: string; token: Theme }) => css`
     -webkit-app-region: no-drag;
   }
 
-  .${CLASSNAMES.ContextTrigger}[data-popup-open],
-    .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open] {
+  .${CLASSNAMES.ContextTrigger}[data-popup-open]:not([data-no-highlight]),
+  .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open]:not([data-no-highlight]) {
     background: ${token.colorFillTertiary};
   }
 `;

package/src/types/shim-lobe-ui.d.ts

@@ -0,0 +1,7 @@
+declare module '@lobehub/ui' {
+  export interface DropdownMenuProps {
+    'data-no-highlight'?: boolean;
+  }
+}
+
+export {};