Add prompt suggestions in chat panel #1657
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
…askpane; add scroll mask utility for dynamic masking of suggestions
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new feature that displays configurable hardcoded prompt suggestions in the chat panel. Key changes include:
- Implementing a ScrollableSuggestions component to render suggestions.
- Adding a dynamic scroll‐mask utility to fade the edges of an overflowing suggestions container.
- Integrating the suggestions into the ChatTaskpane and handling suggestion selection.
Reviewed Changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| mito-ai/src/utils/scrollMask.ts | Adds functions to update and initialize a scroll mask based on container state. |
| mito-ai/src/Extensions/AiChat/ChatTaskpane.tsx | Introduces a new suggestion section in the chat panel with prompt selection. |
| mito-ai/src/Extensions/AiChat/ChatMessage/ScrollableSuggestions.tsx | Implements a component for displaying and handling scrollable prompt suggestions. |
Files not reviewed (1)
- mito-ai/style/ChatTaskpane.css: Language not supported
Comments suppressed due to low confidence (2)
mito-ai/src/utils/scrollMask.ts:28
- [nitpick] Consider extracting the magic number '5' into a named constant for improved readability and potential reuse.
const leftEdgeVisible = scrollLeft <= 5; // Add small buffer for precision issues
mito-ai/src/Extensions/AiChat/ChatMessage/ScrollableSuggestions.tsx:57
- [nitpick] Consider using a more unique identifier (e.g., an ID) for the key prop in the suggestions mapping to avoid potential conflicts if display values are not unique.
key={opt.display}
Co-authored-by: Copilot <[email protected]>
mito-ai/src/Extensions/AiChat/ChatMessage/ScrollableSuggestions.tsx
Outdated
Show resolved
Hide resolved
- Wrap ScrollableSuggestions in a new container for improved styling and layout. - Implement ResizeObserver to dynamically update scroll mask based on container size. - Update scroll mask utility to consider parent container width for better masking behavior. - Add CSS styles for the new suggestions container to ensure proper alignment and responsiveness.
There was a problem hiding this comment.
Pull Request Overview
This PR adds a configurable list of hardcoded prompt suggestions to the chat panel. The changes include:
- Adding a new ScrollableSuggestions component that displays a horizontally scrollable list of prompt suggestions with a dynamic scroll-mask.
- Implementing scroll mask utilities in scrollMask.ts to enhance the UI experience on overflow.
- Integrating the suggestions component in ChatTaskpane.tsx to populate the chat input when a suggestion is clicked.
Reviewed Changes
Copilot reviewed 3 out of 5 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| mito-ai/src/utils/scrollMask.ts | Introduces utilities to update and initialize a dynamic scroll mask based on container dimensions. |
| mito-ai/src/Extensions/AiChat/ChatTaskpane.tsx | Integrates the suggestion options and renders the ScrollableSuggestions component conditionally. |
| mito-ai/src/Extensions/AiChat/ChatMessage/ScrollableSuggestions.tsx | Implements the new scrollable suggestions component with reactive scroll and resize handling. |
Files not reviewed (2)
- mito-ai/style/ChatTaskpane.css: Language not supported
- mito-ai/style/MarkdownMessage.css: Language not supported
| {displayOptimizedChatHistory.length === 0 && ( | ||
| <div className="suggestions-container"> | ||
| <ScrollableSuggestions | ||
| options={DEFAULT_SUGGESTION_OPTIONS} | ||
| onSelectSuggestion={(prompt) => { | ||
| if (agentModeEnabled) { | ||
| void startAgentExecution(prompt); | ||
| } else { | ||
| void sendChatInputMessage(prompt); | ||
| } | ||
| }} | ||
| /> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
The suggestions container is rendered only when displayOptimizedChatHistory is empty. This may contradict the PR description which indicates that the prompt suggestions should appear above the chat input regardless of chat history. Consider revisiting the condition if the intent is to always show the suggestions.
| {displayOptimizedChatHistory.length === 0 && ( | |
| <div className="suggestions-container"> | |
| <ScrollableSuggestions | |
| options={DEFAULT_SUGGESTION_OPTIONS} | |
| onSelectSuggestion={(prompt) => { | |
| if (agentModeEnabled) { | |
| void startAgentExecution(prompt); | |
| } else { | |
| void sendChatInputMessage(prompt); | |
| } | |
| }} | |
| /> | |
| </div> | |
| )} | |
| <div className="suggestions-container"> | |
| <ScrollableSuggestions | |
| options={DEFAULT_SUGGESTION_OPTIONS} | |
| onSelectSuggestion={(prompt) => { | |
| if (agentModeEnabled) { | |
| void startAgentExecution(prompt); | |
| } else { | |
| void sendChatInputMessage(prompt); | |
| } | |
| }} | |
| /> | |
| </div> |
Copilot uses AI. Check for mistakes.
| window.removeEventListener('resize', handleResize); | ||
| resizeObserver.disconnect(); | ||
| }; | ||
| }, [options.length]); // Re-apply when options change |
There was a problem hiding this comment.
Using options.length in the dependency array may not capture updates when the options content changes but the length remains the same. Consider using the options array itself as a dependency to ensure the effect triggers correctly when any option is updated.
| }, [options.length]); // Re-apply when options change | |
| }, [options]); // Re-apply when options change |
Copilot uses AI. Check for mistakes.
Description
This PR adds a configurable list of suggested (hardcoded) prompts and displays them at the bottom of chat panel right above the chat input box. The hardcoded list contains short display version of suggestion to be shown in the suggestion box as well as the actual longer prompt to be sent to the chat. The suggestions are rendered in a new ScrollableSuggestions component. A dynamic scroll‐mask utility fades out the left and right edges when the list overflows. When user clicks the suggestion button, the agent immediately starts executing on the prompt.
Testing