@lobehub/chat 1.75.4 → 1.76.0

package/src/database/migrations/meta/_journal.json

@@ -133,6 +133,13 @@
       "when": 1742616026643,
       "tag": "0018_add_client_id_for_entities",
       "breakpoints": true
+    },
+    {
+      "idx": 19,
+      "version": "7",
+      "when": 1742806552131,
+      "tag": "0019_add_hotkey_user_settings",
+      "breakpoints": true
     }
   ],
   "version": "6"

package/src/database/schemas/user.ts

@@ -39,6 +39,7 @@ export const userSettings = pgTable('user_settings', {
     .primaryKey(),
 
   tts: jsonb('tts'),
+  hotkey: jsonb('hotkey'),
   keyVaults: text('key_vaults'),
   general: jsonb('general'),
   languageModel: jsonb('language_model'),

package/src/database/server/models/user.ts

@@ -67,6 +67,7 @@ export class UserModel {
 
         settingsDefaultAgent: userSettings.defaultAgent,
         settingsGeneral: userSettings.general,
+        settingsHotkey: userSettings.hotkey,
         settingsKeyVaults: userSettings.keyVaults,
         settingsLanguageModel: userSettings.languageModel,
         settingsSystemAgent: userSettings.systemAgent,
@@ -89,6 +90,7 @@ export class UserModel {
     const settings: DeepPartial<UserSettings> = {
       defaultAgent: state.settingsDefaultAgent || {},
       general: state.settingsGeneral || {},
+      hotkey: state.settingsHotkey || {},
       keyVaults: decryptKeyVaults,
       languageModel: state.settingsLanguageModel || {},
       systemAgent: state.settingsSystemAgent || {},

package/src/features/ChatInput/Desktop/InputArea/index.tsx

@@ -2,10 +2,12 @@ import { TextArea } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { TextAreaRef } from 'antd/es/input/TextArea';
 import { RefObject, memo, useEffect, useRef } from 'react';
+import { useHotkeysContext } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
 import { isCommandPressed } from '@/utils/keyboard';
 
 import { useAutoFocus } from '../useAutoFocus';
@@ -38,8 +40,10 @@ interface InputAreaProps {
 }
 
 const InputArea = memo<InputAreaProps>(({ onSend, value, loading, onChange }) => {
+  const { enableScope, disableScope } = useHotkeysContext();
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
+
   const ref = useRef<TextAreaRef>(null);
   const isChineseInput = useRef(false);
 
@@ -71,6 +75,7 @@ const InputArea = memo<InputAreaProps>(({ onSend, value, loading, onChange }) =>
         className={styles.textarea}
         onBlur={(e) => {
           onChange?.(e.target.value);
+          disableScope(HotkeyEnum.AddUserMessage);
         }}
         onChange={(e) => {
           onChange?.(e.target.value);
@@ -81,6 +86,9 @@ const InputArea = memo<InputAreaProps>(({ onSend, value, loading, onChange }) =>
         onCompositionStart={() => {
           isChineseInput.current = true;
         }}
+        onFocus={() => {
+          enableScope(HotkeyEnum.AddUserMessage);
+        }}
         onPressEnter={(e) => {
           if (loading || e.altKey || e.shiftKey || isChineseInput.current) return;
 

package/src/features/ChatInput/Desktop/index.tsx

@@ -34,7 +34,6 @@ const DesktopChatInput = memo<DesktopChatInputProps>(
     renderFooter,
   }) => {
     const [expand, setExpand] = useState<boolean>(false);
-
     const onSend = useCallback(() => {
       setExpand(false);
     }, []);

package/src/features/ChatInput/Topic/index.tsx

@@ -1,17 +1,19 @@
-import { ActionIcon, Icon, Tooltip } from '@lobehub/ui';
+import { ActionIcon, Hotkey, Icon, Tooltip } from '@lobehub/ui';
 import { Button, Popconfirm } from 'antd';
 import { LucideGalleryVerticalEnd, LucideMessageSquarePlus } from 'lucide-react';
 import { memo, useState } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-import HotKeys from '@/components/HotKeys';
-import { ALT_KEY, SAVE_TOPIC_KEY } from '@/const/hotkeys';
 import { useActionSWR } from '@/libs/swr';
 import { useChatStore } from '@/store/chat';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
 
 const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('chat');
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.SaveTopic));
   const [hasTopic, openNewTopicOrSaveTopic] = useChatStore((s) => [
     !!s.activeTopicId,
     s.openNewTopicOrSaveTopic,
@@ -24,13 +26,6 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
   const icon = hasTopic ? LucideMessageSquarePlus : LucideGalleryVerticalEnd;
   const desc = t(hasTopic ? 'topic.openNewTopic' : 'topic.saveCurrentMessages');
 
-  const hotkeys = [ALT_KEY, SAVE_TOPIC_KEY].join('+');
-
-  useHotkeys(hotkeys, () => mutate(), {
-    enableOnFormTags: true,
-    preventDefault: true,
-  });
-
   if (mobile) {
     return (
       <Popconfirm
@@ -41,12 +36,12 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
         open={confirmOpened}
         placement={'top'}
         title={
-          <div style={{ alignItems: 'center', display: 'flex', marginBottom: '8px' }}>
+          <Flexbox align={'center'} horizontal style={{ marginBottom: 8 }}>
             <div style={{ marginRight: '16px', whiteSpace: 'pre-line', wordBreak: 'break-word' }}>
               {t(hasTopic ? 'topic.checkOpenNewTopic' : 'topic.checkSaveCurrentMessages')}
             </div>
-            <HotKeys inverseTheme={false} keys={hotkeys} />
-          </div>
+            <Hotkey keys={hotkey} />
+          </Flexbox>
         }
       >
         <ActionIcon
@@ -59,7 +54,7 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
     );
   } else {
     return (
-      <Tooltip title={<HotKeys desc={desc} inverseTheme keys={hotkeys} />}>
+      <Tooltip hotkey={hotkey} title={desc}>
         <Button
           aria-label={desc}
           icon={<Icon icon={icon} />}

package/src/features/FileManager/Header/FilesSearchBar.tsx

@@ -5,9 +5,13 @@ import { useQueryState } from 'nuqs';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
+
 const FilesSearchBar = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('file');
-
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.Search));
   const [keywords, setKeywords] = useState<string>('');
 
   const [, setQuery] = useQueryState('q', {
@@ -30,7 +34,7 @@ const FilesSearchBar = memo<{ mobile?: boolean }>(({ mobile }) => {
         setQuery(keywords);
       }}
       placeholder={t('searchFilePlaceholder')}
-      shortKey={'k'}
+      shortKey={hotkey}
       spotlight={!mobile}
       style={{ width: 320 }}
       value={keywords}

package/src/features/HotkeyHelperPanel/HotkeyContent.tsx

@@ -0,0 +1,62 @@
+import { Hotkey } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { HOTKEYS_REGISTRATION } from '@/const/hotkeys';
+import hotkeyMeta from '@/locales/default/hotkey';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/slices/settings/selectors';
+import { HotkeyGroupId } from '@/types/hotkey';
+
+const useStyle = createStyles(({ css, token }) => ({
+  desc: css`
+    font-size: 12px;
+    line-height: 1.3;
+    color: ${token.colorTextDescription};
+  `,
+  hotkey: css`
+    gap: 4px;
+
+    kbd {
+      min-width: 26px;
+      height: 26px;
+      border: 1px solid ${token.colorBorder};
+    }
+  `,
+}));
+
+interface HotkeyContentProps {
+  groupId: HotkeyGroupId;
+}
+
+const HotkeyContent = memo<HotkeyContentProps>(({ groupId }) => {
+  const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const { t } = useTranslation('hotkey');
+  const { styles } = useStyle();
+  return (
+    <>
+      {HOTKEYS_REGISTRATION.filter((item) => item.group === groupId).map((item) => (
+        <Flexbox align={'flex-start'} gap={16} horizontal key={item.id} width={'100%'}>
+          <Flexbox flex={1} gap={4} justify={'space-between'}>
+            <span>{t(`${item.id}.title`)}</span>
+            {hotkeyMeta[item.id].desc ? (
+              <span className={styles.desc}>{t(`${item.id}.desc`)}</span>
+            ) : null}
+          </Flexbox>
+          <Hotkey
+            className={styles.hotkey}
+            keys={settings.hotkey[item.id]}
+            style={{
+              zoom: 1.1,
+            }}
+          />
+        </Flexbox>
+      ))}
+    </>
+  );
+});
+
+export default HotkeyContent;

package/src/features/HotkeyHelperPanel/index.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { Drawer, Grid, TabsNav } from '@lobehub/ui';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { HotkeyGroupEnum, HotkeyGroupId } from '@/types/hotkey';
+
+import HotkeyContent from './HotkeyContent';
+
+const HotkeyHelperPanel = memo(() => {
+  const [open, updateSystemStatus] = useGlobalStore((s) => [
+    s.status.showHotkeyHelper,
+    s.updateSystemStatus,
+  ]);
+  const [active, setActive] = useState<HotkeyGroupId>(HotkeyGroupEnum.Essential);
+  const { t } = useTranslation('setting');
+
+  const handleClose = () => updateSystemStatus({ showHotkeyHelper: false });
+
+  return (
+    <Drawer
+      height={240}
+      mask={false}
+      maskClosable={false}
+      onClose={handleClose}
+      open={open}
+      placement={'bottom'}
+      styles={{
+        bodyContent: { paddingBlock: 24 },
+        title: { paddingBlock: 0 },
+      }}
+      title={
+        <TabsNav
+          activeKey={active}
+          items={[
+            {
+              key: HotkeyGroupEnum.Essential,
+              label: t('hotkey.group.essential'),
+            },
+            {
+              key: HotkeyGroupEnum.Conversation,
+              label: t('hotkey.group.conversation'),
+            },
+          ]}
+          onChange={(key) => setActive(key as HotkeyGroupId)}
+          variant={'compact'}
+        />
+      }
+    >
+      <Grid gap={32}>
+        <HotkeyContent groupId={active} />
+      </Grid>
+    </Drawer>
+  );
+});
+
+export default HotkeyHelperPanel;

package/src/hooks/useHotkeys/chatScope.ts

@@ -0,0 +1,105 @@
+import isEqual from 'fast-deep-equal';
+import { parseAsBoolean, useQueryState } from 'nuqs';
+import { useEffect } from 'react';
+import { useHotkeysContext } from 'react-hotkeys-hook';
+
+import { useSendMessage } from '@/features/ChatInput/useSend';
+import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
+import { useActionSWR } from '@/libs/swr';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { HotkeyEnum, HotkeyScopeEnum } from '@/types/hotkey';
+
+import { useHotkeyById } from './useHotkeyById';
+
+export const useSaveTopicHotkey = () => {
+  const openNewTopicOrSaveTopic = useChatStore((s) => s.openNewTopicOrSaveTopic);
+  const { mutate } = useActionSWR('openNewTopicOrSaveTopic', openNewTopicOrSaveTopic);
+  return useHotkeyById(HotkeyEnum.SaveTopic, () => mutate());
+};
+
+export const useToggleZenModeHotkey = () => {
+  const toggleZenMode = useGlobalStore((s) => s.toggleZenMode);
+  return useHotkeyById(HotkeyEnum.ToggleZenMode, toggleZenMode);
+};
+
+export const useOpenChatSettingsHotkey = () => {
+  const openChatSettings = useOpenChatSettings();
+  return useHotkeyById(HotkeyEnum.OpenChatSettings, openChatSettings);
+};
+
+export const useRegenerateMessageHotkey = () => {
+  const regenerateMessage = useChatStore((s) => s.regenerateMessage);
+  const lastMessage = useChatStore(chatSelectors.latestMessage, isEqual);
+
+  const disable = !lastMessage || lastMessage.id === 'default' || lastMessage.role === 'system';
+
+  return useHotkeyById(
+    HotkeyEnum.RegenerateMessage,
+    () => !disable && regenerateMessage(lastMessage.id),
+    {
+      enabled: !disable,
+    },
+  );
+};
+
+export const useToggleLeftPanelHotkey = () => {
+  const isZenMode = useGlobalStore((s) => s.status.zenMode);
+  const [isPinned] = useQueryState('pinned', parseAsBoolean);
+  const showSessionPanel = useGlobalStore(systemStatusSelectors.showSessionPanel);
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+
+  return useHotkeyById(
+    HotkeyEnum.ToggleLeftPanel,
+    () =>
+      updateSystemStatus({
+        sessionsWidth: showSessionPanel ? 0 : 320,
+        showSessionPanel: !showSessionPanel,
+      }),
+    {
+      enabled: !isZenMode && !isPinned,
+    },
+  );
+};
+
+export const useToggleRightPanelHotkey = () => {
+  const isZenMode = useGlobalStore((s) => s.status.zenMode);
+  const toggleConfig = useGlobalStore((s) => s.toggleChatSideBar);
+
+  return useHotkeyById(HotkeyEnum.ToggleRightPanel, () => toggleConfig(), {
+    enabled: !isZenMode,
+  });
+};
+
+export const useAddUserMessageHotkey = () => {
+  const { send } = useSendMessage();
+  return useHotkeyById(HotkeyEnum.AddUserMessage, () => send({ onlyAddUserMessage: true }));
+};
+
+// 注册聚合
+
+export const useRegisterChatHotkeys = () => {
+  const { enableScope, disableScope } = useHotkeysContext();
+
+  // System
+  useOpenChatSettingsHotkey();
+
+  // Layout
+  useToggleLeftPanelHotkey();
+  useToggleRightPanelHotkey();
+  useToggleZenModeHotkey();
+
+  // Conversation
+  useRegenerateMessageHotkey();
+  useSaveTopicHotkey();
+  useAddUserMessageHotkey();
+
+  useEffect(() => {
+    enableScope(HotkeyScopeEnum.Chat);
+    return () => disableScope(HotkeyScopeEnum.Chat);
+  }, []);
+
+  return null;
+};

package/src/hooks/useHotkeys/globalScope.ts

@@ -0,0 +1,69 @@
+import isEqual from 'fast-deep-equal';
+import { parseAsBoolean, useQueryState } from 'nuqs';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+import { useSwitchSession } from '@/hooks/useSwitchSession';
+import { useGlobalStore } from '@/store/global';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum, HotkeyScopeEnum, KeyEnum } from '@/types/hotkey';
+
+import { useHotkeyById } from './useHotkeyById';
+
+export const useSwitchAgentHotkey = () => {
+  const { showPinList } = useServerConfigStore(featureFlagsSelectors);
+  const list = useSessionStore(sessionSelectors.pinnedSessions, isEqual);
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.SwitchAgent));
+  const switchSession = useSwitchSession();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, setPinned] = useQueryState('pinned', parseAsBoolean);
+
+  const switchAgent = (id: string) => {
+    switchSession(id);
+    setPinned(true);
+  };
+
+  const ref = useHotkeys(
+    list.slice(0, 9).map((e, i) => hotkey.replaceAll(KeyEnum.Number, String(i + 1))),
+    (_, hotkeysEvent) => {
+      if (!hotkeysEvent.keys?.[0]) return;
+      const index = parseInt(hotkeysEvent.keys?.[0]) - 1;
+      const item = list[index];
+      if (!item) return;
+      switchAgent(item.id);
+    },
+    {
+      enableOnFormTags: true,
+      enabled: showPinList,
+      preventDefault: true,
+      scopes: [HotkeyScopeEnum.Global, HotkeyEnum.SwitchAgent],
+    },
+  );
+
+  return {
+    id: HotkeyEnum.SwitchAgent,
+    ref,
+  };
+};
+
+export const useOpenHotkeyHelperHotkey = () => {
+  const [open, updateSystemStatus] = useGlobalStore((s) => [
+    s.status.showHotkeyHelper,
+    s.updateSystemStatus,
+  ]);
+
+  return useHotkeyById(HotkeyEnum.OpenHotkeyHelper, () =>
+    updateSystemStatus({ showHotkeyHelper: !open }),
+  );
+};
+
+// 注册聚合
+
+export const useRegisterGlobalHotkeys = () => {
+  // 全局自动注册不需要 enableScope
+  useSwitchAgentHotkey();
+  useOpenHotkeyHelperHotkey();
+};

package/src/hooks/useHotkeys/index.ts

@@ -0,0 +1,2 @@
+export * from './chatScope';
+export * from './globalScope';

package/src/hooks/useHotkeys/useHotkeyById.test.ts

@@ -0,0 +1,194 @@
+import { renderHook } from '@testing-library/react';
+import { uniq } from 'lodash-es';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { HOTKEYS_REGISTRATION } from '@/const/hotkeys';
+import { HotkeyEnum, HotkeyScopeEnum } from '@/types/hotkey';
+
+import { useHotkeyById } from './useHotkeyById';
+
+// Mock dependencies
+vi.mock('lodash-es', async (importOriginal) => {
+  const actual: any = await importOriginal();
+  return {
+    ...actual,
+    uniq: vi.fn((arr) => [...new Set(arr)]),
+  };
+});
+
+// Mock react-hotkeys-hook
+const mockRef = { current: document.createElement('div') };
+const mockUseHotkeys = vi.fn(() => mockRef);
+
+vi.mock('react-hotkeys-hook', () => ({
+  // @ts-ignore
+  useHotkeys: (...args: any[]) => mockUseHotkeys(...args),
+}));
+
+// Mock store and environment
+let isMobileValue = false;
+const mockHotkey = 'mod+k';
+
+vi.mock('@/store/serverConfig', () => ({
+  useServerConfigStore: (selector: (state: any) => any) => selector({ isMobile: isMobileValue }),
+}));
+
+vi.mock('@/store/user', () => ({
+  useUserStore: (selector: any) => selector(),
+}));
+
+vi.mock('@/store/user/selectors', () => ({
+  settingsSelectors: {
+    getHotkeyById: () => () => mockHotkey,
+  },
+}));
+
+vi.mock('@/utils/env', () => ({
+  isDev: false,
+}));
+
+describe('useHotkeyById', () => {
+  const mockCallback = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    isMobileValue = false;
+  });
+
+  it('should register hotkey with correct parameters', () => {
+    const { result } = renderHook(() => useHotkeyById(HotkeyEnum.Search, mockCallback));
+
+    // 验证 useHotkeys 被调用，但不检查具体函数引用
+    expect(mockUseHotkeys).toHaveBeenCalled();
+
+    // 获取实际调用参数
+    const callArgs: any = mockUseHotkeys.mock.calls[0];
+
+    // 验证第一个参数是正确的热键
+    expect(callArgs[0]).toBe(mockHotkey);
+
+    // 验证第二个参数是函数
+    expect(typeof callArgs[1]).toBe('function');
+
+    // 验证第三个参数包含预期的属性
+    expect(callArgs[2]).toMatchObject({
+      enableOnFormTags: true,
+      preventDefault: true,
+      scopes: [HotkeyEnum.Search, HotkeyScopeEnum.Global],
+    });
+
+    // 验证第四个参数是 undefined
+    expect(callArgs[3]).toBeUndefined();
+
+    // 验证返回值
+    expect(result.current).toEqual({
+      id: HotkeyEnum.Search,
+      ref: mockRef,
+    });
+  });
+
+  it('should disable hotkey on mobile devices', () => {
+    // Set as mobile
+    isMobileValue = true;
+
+    renderHook(() => useHotkeyById(HotkeyEnum.Search, mockCallback, { enabled: true }));
+
+    expect(mockUseHotkeys).toHaveBeenCalledWith(
+      mockHotkey,
+      expect.any(Function),
+      expect.objectContaining({
+        enabled: false, // Should be disabled on mobile
+      }),
+      undefined,
+    );
+  });
+
+  it('should handle options parameter correctly', () => {
+    const options = {
+      enabled: true,
+      scopes: ['customScope'],
+    };
+
+    renderHook(() => useHotkeyById(HotkeyEnum.Search, mockCallback, options));
+
+    expect(mockUseHotkeys).toHaveBeenCalledWith(
+      mockHotkey,
+      expect.any(Function),
+      expect.objectContaining({
+        enabled: true,
+        scopes: expect.arrayContaining([HotkeyEnum.Search, HotkeyScopeEnum.Global, 'customScope']),
+      }),
+      undefined,
+    );
+
+    expect(uniq).toHaveBeenCalled();
+  });
+
+  it('should handle dependencies parameter correctly', () => {
+    const deps = [1, 2, 3];
+
+    renderHook(() => useHotkeyById(HotkeyEnum.Search, mockCallback, deps));
+
+    expect(mockUseHotkeys).toHaveBeenCalledWith(
+      mockHotkey,
+      expect.any(Function),
+      expect.any(Object),
+      deps,
+    );
+  });
+
+  it('should handle both options and dependencies correctly', () => {
+    const options = { enabled: true };
+    const deps = [1, 2, 3];
+
+    renderHook(() => useHotkeyById(HotkeyEnum.Search, mockCallback, options, deps));
+
+    expect(mockUseHotkeys).toHaveBeenCalledWith(
+      mockHotkey,
+      expect.any(Function),
+      expect.objectContaining({
+        enabled: true,
+      }),
+      deps,
+    );
+  });
+
+  it('should combine scopes from registration and options', () => {
+    const testHotkeyId = HotkeyEnum.ToggleLeftPanel;
+    const registrationItem = HOTKEYS_REGISTRATION.find((item) => item.id === testHotkeyId);
+    const options = {
+      scopes: ['customScope'],
+    };
+
+    renderHook(() => useHotkeyById(testHotkeyId, mockCallback, options));
+
+    expect(mockUseHotkeys).toHaveBeenCalledWith(
+      mockHotkey,
+      expect.any(Function),
+      expect.objectContaining({
+        scopes: expect.arrayContaining([
+          testHotkeyId,
+          ...(registrationItem?.scopes || []),
+          'customScope',
+        ]),
+      }),
+      undefined,
+    );
+  });
+
+  it('should handle case when no registration item is found', () => {
+    // Using a non-existent ID to test this case
+    const nonExistentId = 'nonExistentId' as any;
+
+    renderHook(() => useHotkeyById(nonExistentId, mockCallback));
+
+    expect(mockUseHotkeys).toHaveBeenCalledWith(
+      mockHotkey,
+      expect.any(Function),
+      expect.objectContaining({
+        scopes: expect.arrayContaining([nonExistentId]),
+      }),
+      undefined,
+    );
+  });
+});