/**
* ChatSuggestions Component
*
* Context-aware suggested prompts that users can click to send:
* - Adapts to current page context (MP, Bill, Dashboard, etc.)
* - Click to auto-fill and send
* - Collapsible accordion (collapsed by default in popup mode)
*/
'use client';
import React from 'react';
import { Sparkles, ChevronDown, ChevronUp } from 'lucide-react';
import { useChatContext, useChatMessages, useChatInput } from '@/lib/stores/chatStore';
import type { SuggestedPrompt, ContextType } from '@/lib/types/chat';
// Context-aware suggested prompts
const CONTEXT_PROMPTS: Record<ContextType, SuggestedPrompt[]> = {
general: [
{ label: 'Daily Summary', prompt: 'What happened in Parliament today? Give me a summary of the key activities and debates.' },
{ label: 'How Parliament Works', prompt: 'Explain the legislative process in Canada - how does a bill become a law?' },
{ label: 'Question Period', prompt: 'What is Question Period and how does it work in the House of Commons?' },
{ label: 'Top spenders', prompt: 'Which MPs have the highest expenses this quarter?' },
],
mp: [
{ label: 'Bills sponsored', prompt: 'What bills has this MP sponsored?' },
{ label: 'Expense breakdown', prompt: 'How does this MP\'s spending compare to their party average?' },
{ label: 'Voting record', prompt: 'Show me this MP\'s recent voting record' },
{ label: 'Petitions', prompt: 'What petitions has this MP sponsored?' },
],
bill: [
{ label: 'Summarize', prompt: 'Summarize this bill in simple terms' },
{ label: 'Lobbying', prompt: 'Who is lobbying on this bill?' },
{ label: 'Voting record', prompt: 'What\'s the voting record for this bill?' },
{ label: 'Timeline', prompt: 'Show the legislative timeline for this bill' },
],
dashboard: [
{ label: 'Top spenders', prompt: 'Show me the top spending MPs this quarter' },
{ label: 'Controversial bills', prompt: 'What are the most controversial bills right now?' },
{ label: 'Conflicts', prompt: 'Find potential conflicts of interest' },
{ label: 'Trends', prompt: 'What are the major legislative trends?' },
],
lobbying: [
{ label: 'Top clients', prompt: 'Which organizations lobby the most?' },
{ label: 'Recent meetings', prompt: 'Show recent lobbyist meetings with government officials' },
{ label: 'By industry', prompt: 'Break down lobbying activity by industry' },
],
spending: [
{ label: 'Outliers', prompt: 'Show unusual spending patterns' },
{ label: 'By party', prompt: 'Compare spending across political parties' },
{ label: 'Trends', prompt: 'How has government spending changed over time?' },
],
visualizer: [
{ label: 'Seat count', prompt: 'How many seats does each party have in the House of Commons?' },
{ label: 'Majority math', prompt: 'What would it take for the Conservatives to win a majority government?' },
{ label: 'Regional breakdown', prompt: 'How do the parties perform in different provinces?' },
{ label: 'Equalization', prompt: 'Explain how equalization payments work in Canada' },
],
};
interface ChatSuggestionsProps {
/** Whether the chat is in expanded/sidebar mode (or mobile fullscreen) */
isExpandedMode?: boolean;
}
export function ChatSuggestions({ isExpandedMode = false }: ChatSuggestionsProps) {
const { contextType } = useChatContext();
const { messages } = useChatMessages();
const { sendMessage } = useChatInput();
// Collapsed by default in popup mode, expanded in sidebar/fullscreen mode
const [isExpanded, setIsExpanded] = React.useState(isExpandedMode);
// Update expansion state when mode changes
React.useEffect(() => {
setIsExpanded(isExpandedMode);
}, [isExpandedMode]);
// When there are messages, always show 'general' context suggestions
// When there are no messages, show context-specific suggestions
const effectiveContext = messages.length > 0 ? 'general' : (contextType || 'general');
const prompts = CONTEXT_PROMPTS[effectiveContext];
const handleSuggestionClick = async (prompt: string) => {
console.log('[ChatSuggestions] Suggestion clicked:', prompt);
console.log('[ChatSuggestions] sendMessage function:', sendMessage);
try {
await sendMessage(prompt);
console.log('[ChatSuggestions] Message sent successfully');
} catch (error) {
console.error('[ChatSuggestions] Error sending message:', error);
}
};
const toggleExpanded = () => setIsExpanded(!isExpanded);
return (
<div className="flex-shrink-0 border-t border-gray-700 bg-gray-800">
{/* Accordion header - always visible */}
<button
onClick={toggleExpanded}
className="w-full px-4 py-2 flex items-center justify-between hover:bg-gray-750 transition-colors"
aria-expanded={isExpanded}
aria-controls="chat-suggestions-content"
aria-label={isExpanded ? 'Collapse suggested questions' : 'Expand suggested questions'}
>
<div className="flex items-center gap-2">
<Sparkles className="w-4 h-4 text-accent-red" aria-hidden="true" />
<span className="text-xs font-medium text-gray-400">
Suggested questions
</span>
</div>
{isExpanded ? (
<ChevronUp className="w-4 h-4 text-gray-400" aria-hidden="true" />
) : (
<ChevronDown className="w-4 h-4 text-gray-400" aria-hidden="true" />
)}
</button>
{/* Accordion content - collapsible */}
{isExpanded && (
<div id="chat-suggestions-content" className="px-4 pb-3" role="region" aria-label="Suggested questions">
<div className="flex flex-wrap gap-2" role="group">
{prompts.map((suggestion, index) => (
<button
key={index}
onClick={() => handleSuggestionClick(suggestion.prompt)}
className="px-3 py-1.5 bg-gray-700 border border-gray-600 rounded-full text-sm text-gray-300 hover:bg-accent-red hover:text-white hover:border-accent-red transition-colors"
aria-label={`Ask: ${suggestion.label}`}
>
{suggestion.label}
</button>
))}
</div>
</div>
)}
</div>
);
}
