Add prompt suggestions in chat panel

[ktaletsk]

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 when the chat is empty. 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

1. Open the Chat Taskpane
2. Confirm that a “Suggested Prompts” section appears immediately below the message input.
3. Make sure that the horizontal scroll works and fades left and/or right edge on overflow
4. Click on a suggestion and ensure it populates the chat input correctly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
monorepo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 14, 2025 6:54pm

[Copilot]

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}

[aarondr77]

Nice work! LGTM with a few small changes

[Copilot]

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