feat: introduce trigger functionality (#27644)

Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: Stream <Stream_2@qq.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zhsama <torvalds@linux.do>
Co-authored-by: Harry <xh001x@hotmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: yessenia <yessenia.contact@gmail.com>
Co-authored-by: hjlarry <hjlarry@163.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: WTW0313 <twwu@dify.ai>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/workflow/shortcuts-name.tsx

@@ -5,10 +5,12 @@ import cn from '@/utils/classnames'
 type ShortcutsNameProps = {
   keys: string[]
   className?: string
+  textColor?: 'default' | 'secondary'
 }
 const ShortcutsName = ({
   keys,
   className,
+  textColor = 'default',
 }: ShortcutsNameProps) => {
   return (
     <div className={cn(
@@ -19,7 +21,10 @@ const ShortcutsName = ({
         keys.map(key => (
           <div
             key={key}
-            className='system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray capitalize'
+            className={cn(
+              'system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray capitalize',
+              textColor === 'secondary' && 'text-text-tertiary',
+            )}
           >
             {getKeyboardKeyNameBySystem(key)}
           </div>