feat(hotkey): added option to trigger using hotkeys#103
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR introduces a new Hotkey node feature that allows users to trigger microflows using keyboard shortcuts. The implementation adds frontend components for hotkey detection and configuration, backend runtime support for handling hotkey events, and includes documentation updates for StandardFirmata installation.
- Added a complete Hotkey node with UI dialog for configuring keyboard shortcuts
- Implemented runtime class for hotkey event handling with
pressed/releasedevents - Improved documentation with clearer StandardFirmata installation instructions
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/electron-app/src/render/components/react-flow/nodes/Hotkey.tsx | New React component for hotkey node with keyboard detection dialog and visual feedback |
| packages/runtime/src/hotkey/hotkey.ts | Runtime class handling external value updates and emitting pressed/released events |
| packages/runtime/src/hotkey/hotkey.types.ts | Zod schemas defining hotkey node data structure and value types |
| packages/runtime/index.ts | Added export for new hotkey module |
| apps/electron-app/src/common/nodes.ts | Registered Hotkey node in the node type system |
| apps/electron-app/package.json | Added hotkeys-js dependency for keyboard shortcut handling |
| yarn.lock | Lock file update for hotkeys-js package |
| apps/electron-app/src/main/ipc.ts | Improved logging message clarity for external value IPC |
| apps/nextjs-app/app/docs/microflow-studio/page.md | Updated documentation with clearer StandardFirmata installation steps |
| packages/flasher/StandardFirmata/StandardFirmata.bu | Removed backup file (cleanup) |
Comments suppressed due to low confidence (1)
apps/electron-app/src/render/components/react-flow/nodes/Hotkey.tsx:7
- Unused imports Fragment, useCallback, useMemo, useRef.
import { useEffect, useState, useCallback, useRef, useMemo, Fragment } from 'react';
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const [key, setKey] = useState<string | undefined>(props.initialKey); | ||
|
|
||
| useEffect(() => { | ||
| if (!open) return; |
There was a problem hiding this comment.
Bug: The variable open is referenced on line 119 but it's not defined in the component scope. This should be props.open to correctly check if the dialog is open. This will cause the effect to never run, meaning the keydown event listener will never be attached.
| return () => { | ||
| window.removeEventListener('keydown', handleKeyDown); | ||
| }; | ||
| }, [open]); |
There was a problem hiding this comment.
Bug: Missing dependency in the useEffect dependency array. The effect depends on props.open to properly set up/tear down the event listener when the dialog opens/closes. Add props.open to the dependency array on line 135.
| "abcjs": "6.4.4", | ||
| "electron-log": "5.3.3", | ||
| "firmata": "https://github.com/xiduzo/firmata.js.git", | ||
| "hotkeys-js": "^4.0.0-beta.7", |
There was a problem hiding this comment.
Using a beta version of a package (hotkeys-js@^4.0.0-beta.7) in production code can introduce instability and potential breaking changes. Consider using a stable release version instead, or document why the beta version is necessary and monitor for a stable release.
| "hotkeys-js": "^4.0.0-beta.7", | |
| "hotkeys-js": "3.12.0", |
| 4. Open the Arduino IDE and connect your microcontroller to your computer | ||
| 5. Go to `Tools > Port` and select the port where your microcontroller is connected (you should see it listed) | ||
| 6. Go to `Tools > Board` and select the board you are using (like "Arduino Uno") | ||
| 7. Opens the downloaded `StandardFirmata`. |
There was a problem hiding this comment.
Grammatical error: "Opens" should be "Open" to match the imperative form used in other steps of the instructions.
| 7. Opens the downloaded `StandardFirmata`. | |
| 7. Open the downloaded `StandardFirmata`. |
| import { BaseNode, NodeContainer, useNodeControls, useNodeData, useNodeId } from './Node'; | ||
| import { useNodeValue } from '../../../stores/node-data'; | ||
| import { IconWithValue } from '../IconWithValue'; | ||
| import { useEffect, useState, useCallback, useRef, useMemo, Fragment } from 'react'; |
There was a problem hiding this comment.
Unused imports: Several React hooks and components are imported but never used in this file. The following imports are not used:
useCallback,useRef,useMemo,Fragmentfrom 'react'
These should be removed to keep the code clean and reduce bundle size.
| import { useEffect, useState, useCallback, useRef, useMemo, Fragment } from 'react'; | |
| import { useEffect, useState } from 'react'; |
This pull request introduces a new "Hotkey" node to the Microflow Studio application, allowing users to trigger flows based on keyboard shortcuts. The implementation includes both frontend and backend support for hotkey detection, configuration, and event emission. Additionally, there are minor improvements to logging and documentation.
Hotkey Node Feature:
Hotkeynode component in the React Flow editor, supporting hotkey detection, configuration via a dialog, and visual feedback. (apps/electron-app/src/render/components/react-flow/nodes/Hotkey.tsx, apps/electron-app/src/render/components/react-flow/nodes/Hotkey.tsxR1-R219)Hotkeynode in the node type system, enabling its use in flows. (apps/electron-app/src/common/nodes.ts, [1] [2]hotkeys-jsdependency for keyboard shortcut handling. (apps/electron-app/package.json, apps/electron-app/package.jsonR79)Backend/Runtime Support:
Hotkeyclass in the runtime, handling external value updates and emittingpressed/releasedevents. (packages/runtime/src/hotkey/hotkey.ts, packages/runtime/src/hotkey/hotkey.tsR1-R15)packages/runtime/src/hotkey/hotkey.types.ts, packages/runtime/src/hotkey/hotkey.types.tsR1-R11)packages/runtime/index.ts, packages/runtime/index.tsR29)Other Improvements:
apps/electron-app/src/main/ipc.ts, apps/electron-app/src/main/ipc.tsL49-R49)apps/nextjs-app/app/docs/microflow-studio/page.md, apps/nextjs-app/app/docs/microflow-studio/page.mdL58-R66)