import React from 'react'; import { FolderTree, MessageSquare, Code } from 'lucide-react'; import { defineMessages, useIntl } from '../i18n'; interface PopularChatTopicsProps { append: (text: string) => void; } interface ChatTopic { id: string; icon: React.ReactNode; description: string; prompt: string; } const i18n = defineMessages({ heading: { id: 'popularChatTopics.heading', defaultMessage: 'Popular chat topics', }, start: { id: 'popularChatTopics.start', defaultMessage: 'Start', }, organizePhotos: { id: 'popularChatTopics.organizePhotos', defaultMessage: 'Organize the photos on my desktop into neat little folders by subject matter', }, governmentForms: { id: 'popularChatTopics.governmentForms', defaultMessage: 'Describe in detail how various forms of government works and rank each by units of geese', }, tamagotchiGame: { id: 'popularChatTopics.tamagotchiGame', defaultMessage: 'Develop a tamagotchi game that lives on my computer and follows a pixelated styling', }, }); export default function PopularChatTopics({ append }: PopularChatTopicsProps) { const intl = useIntl(); const POPULAR_TOPICS: ChatTopic[] = [ { id: 'organize-photos', icon: , description: intl.formatMessage(i18n.organizePhotos), prompt: intl.formatMessage(i18n.organizePhotos), }, { id: 'government-forms', icon: , description: intl.formatMessage(i18n.governmentForms), prompt: intl.formatMessage(i18n.governmentForms), }, { id: 'tamagotchi-game', icon:

,
      description: intl.formatMessage(i18n.tamagotchiGame),
      prompt: intl.formatMessage(i18n.tamagotchiGame),
    },
  ];

  const handleTopicClick = (prompt: string) => {
    append(prompt);
  };

  return (
    
      
        {intl.formatMessage(i18n.heading)}
      
      
        {POPULAR_TOPICS.map((topic) => (
           handleTopicClick(topic.prompt)}
          >
            
              {topic.icon}
              
                {topic.description}
              
            
            
              
            
          
        ))}
      
    
  );
}