Make suggestion chips interactive: populate input on click

[Copilot]

Addresses feedback from PR #2 regarding suggestion chips. Initially converted them to non-interactive elements for accessibility, but updated based on user feedback to make them interactive and populate the chat input when clicked.

Changes

• Add draftMessage state to chat store for cross-component communication
• Convert suggestion chips to interactive <button> elements with onClick handlers
• Populate chat input field with suggestion text when a chip is clicked
• Automatically focus the input field after populating for better UX
• Add hover effects (border-accent, text-accent, bg-accent-light/50) to indicate interactivity
• Use proper cursor-pointer styling

Implementation:

<button
  onClick={() => handleSuggestionClick(suggestion.text)}
  className="... hover:border-accent hover:text-accent ... cursor-pointer"
>
  <suggestion.icon />
  {suggestion.text}
</button>

User Experience

1. User clicks a suggestion chip (e.g., "Analyze medical imaging")
2. The suggestion text immediately appears in the input field
3. The input field is automatically focused, ready for editing or sending
4. User can modify the text or send it as-is

Testing

• ✅ Code review passed
• ✅ CodeQL security scan passed with 0 alerts
• ✅ Proper state management using Zustand store
• ✅ Maintains accessibility with semantic button elements and proper focus management

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[a7m-1st]

@copilot fill the chatbox with those prompt examples on click instead

[Copilot]

@copilot fill the chatbox with those prompt examples on click instead

Implemented! The suggestion chips now populate the chat input when clicked. The input field is automatically focused so you can edit or send the suggestion immediately. (commits 1482c00, a200f67)

[a7m-1st]

@copilot add long templatemessages to the given according to the current text

[Copilot]

@copilot add long templatemessages to the given according to the current text

Could you clarify what you'd like? I understand you want longer template messages for the suggestion chips. Would you like me to:

1. Replace the current short text (e.g., "Analyze medical imaging") with longer, more detailed prompts (e.g., "Can you help me analyze this medical imaging scan and identify any abnormalities?")?
2. Or keep the short display text but populate the input with a longer template when clicked?

Please provide an example of what you'd like one of the suggestions to look like.