refactor(web): align hotkeys with command ownership (#42974)

packages/dify-ui/src/kbd/index.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import type { FormatDisplayOptions, RegisterableHotkey } from '@tanstack/react-hotkeys'
+import type { DisplayHotkey, FormatDisplayOptions } from '@tanstack/react-hotkeys'
 import { formatForDisplay } from '@tanstack/react-hotkeys'
 import { Kbd, KbdGroup } from '.'
 import {
@@ -43,29 +43,17 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const displayKeys = (
-  hotkey: RegisterableHotkey | (string & {}),
-  platform: FormatDisplayOptions['platform'] = 'mac',
-) => {
-  if (typeof hotkey !== 'string') return [formatForDisplay(hotkey, { platform })]
-
-  return hotkey
-    .split('+')
-    .filter(Boolean)
-    .map((key) => formatForDisplay(key, { platform }))
-}
-
 const HotkeyKbdGroup = ({
   hotkey,
   color = 'gray',
   platform = 'mac',
 }: {
-  hotkey: RegisterableHotkey | (string & {})
+  hotkey: DisplayHotkey
   color?: 'gray' | 'white'
   platform?: FormatDisplayOptions['platform']
 }) => (
   <KbdGroup>
-    {displayKeys(hotkey, platform).map((key, index) => (
+    {formatForDisplay(hotkey, { platform, parts: true }).map((key, index) => (
       // oxlint-disable-next-line react/no-array-index-key -- Repeated display keys are static, ordered tokens with no component state.
       <Kbd key={`${key}-${index}`} color={color}>
         {key}