File size: 1,631 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 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>
);
}
|