Actions menu component #61
Conversation
✅ Deploy Preview for reachat-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces an actions menu component that allows users to trigger slash commands (e.g., "/") in the chat input to display a menu with available actions and functions. The implementation provides both synchronous and asynchronous loading examples.
- Added QuickActions component for triggering contextual menus in chat input
- Enhanced ChatInput to support external input references for menu integration
- Created Storybook examples demonstrating both static and async loading patterns
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| stories/Chat.stories.tsx | Added ActionsMenu and ActionsMenuAsync story examples demonstrating slash command functionality |
| src/index.css | Updated CSS import path for reablocks |
| src/QuickActions/index.ts | Export file for QuickActions component |
| src/QuickActions/QuickActions.tsx | Core QuickActions component implementation with keyboard trigger support |
| src/ChatInput/ChatInput.tsx | Enhanced to support external input references for menu integration |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| return ( | ||
| <List className="bg-gray-800"> | ||
| <ListItem value={`${name} 1`} onClick={() => onClick('1')}>{name} 1</ListItem> | ||
| <ListItem value={`${name} 2`} onClick={() => onClick('1')}>{name} 2</ListItem> |
There was a problem hiding this comment.
The onClick handler passes '1' instead of '2' for the second list item. This should be onClick(() => onClick('2')) to match the item's intended value.
| <ListItem value={`${name} 2`} onClick={() => onClick('1')}>{name} 2</ListItem> | |
| <ListItem value={`${name} 2`} onClick={() => onClick('2')}>{name} 2</ListItem> |
| return () => { | ||
| inputEl.removeEventListener('keydown', handleKeyDown); | ||
| }; | ||
| }, []); |
There was a problem hiding this comment.
The dependency array is missing trigger and inputRef. Changes to these props won't update the event listener, potentially causing stale closures or incorrect behavior.
| }, []); | |
| }, [inputRef, trigger]); |
|
|
||
| interface ChatInputProps { | ||
| /** | ||
| * Reference to the input element. |
There was a problem hiding this comment.
The JSDoc comment should clarify that this ref will be populated with the internal textarea element, allowing external components to access it.
| * Reference to the input element. | |
| * Ref that will be populated with the internal textarea element, | |
| * allowing external components to access and interact with the textarea directly. |
1 participant
Before need to release this one: reaviz/reablocks#310
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
No way to call some action in chat input
Issue Number: #9
What is the new behavior?
Improve the input to allow for slash commands
Does this PR introduce a breaking change?
Other information
Screen.Recording.2025-10-03.at.11.34.44.mov
Screen.Recording.2025-10-03.at.11.35.06.mov