| import { useTranslation } from "react-i18next"; |
| import { motion, AnimatePresence } from "framer-motion"; |
| import { Suggestions } from "#/components/features/suggestions/suggestions"; |
| import { I18nKey } from "#/i18n/declaration"; |
| import { SUGGESTIONS } from "#/utils/suggestions"; |
| import { useConversationStore } from "#/stores/conversation-store"; |
|
|
| interface ChatSuggestionsProps { |
| onSuggestionsClick: (value: string) => void; |
| } |
|
|
| export function ChatSuggestions({ onSuggestionsClick }: ChatSuggestionsProps) { |
| const { t } = useTranslation("openhands"); |
| const { shouldHideSuggestions } = useConversationStore(); |
|
|
| return ( |
| <AnimatePresence> |
| {!shouldHideSuggestions && ( |
| <motion.div |
| data-testid="chat-suggestions" |
| initial={{ opacity: 0 }} |
| animate={{ opacity: 1 }} |
| exit={{ opacity: 0 }} |
| transition={{ duration: 0.3, ease: "easeInOut" }} |
| className="pointer-events-auto absolute inset-x-4 bottom-[151px] top-0 flex flex-col items-center justify-center md:inset-x-8" |
| > |
| <div className="flex flex-col items-center p-4 rounded-xl w-full"> |
| <span className="pb-6 text-[32px] font-medium leading-5 text-white"> |
| {t(I18nKey.LANDING$TITLE)} |
| </span> |
| </div> |
| <Suggestions |
| suggestions={Object.entries(SUGGESTIONS.repo) |
| .slice(0, 4) |
| .map(([label, value]) => ({ |
| label, |
| value, |
| }))} |
| onSuggestionClick={onSuggestionsClick} |
| /> |
| </motion.div> |
| )} |
| </AnimatePresence> |
| ); |
| } |
|
|
