quivr/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx

49 lines
2.0 KiB
TypeScript
Raw Normal View History

import { AnimatePresence, motion } from "framer-motion";
import { useTranslation } from "react-i18next";
import { AiOutlineLoading3Quarters } from "react-icons/ai";
import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
import { ChatInput, KnowledgeToFeed } from "./components";
import { useActionBar } from "./hooks/useActionBar";
export const ActionsBar = (): JSX.Element => {
const { hasPendingRequests, setHasPendingRequests } = useActionBar();
const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();
const { t } = useTranslation(["chat"]);
return (
<>
{hasPendingRequests && (
<div className="flex mt-1 flex-col md:flex-row w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-2 md:p-6 pl-6 mb-3">
<div className="flex flex-1 items-center mb-2 md:mb-0">
<span className="text-sm md:text-1xl">{t("feedingBrain")}</span>
</div>
<AiOutlineLoading3Quarters className="animate-spin text-2xl md:text-3xl self-center" />
</div>
)}
<div>
{shouldDisplayFeedCard && (
<AnimatePresence>
<motion.div
key="slide"
initial={{ y: "100%", opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 0.2 } }}
exit={{ y: "100%", opacity: 0 }}
>
<div className="flex flex-1 overflow-y-auto shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4 md:p-6 mt-5">
<KnowledgeToFeed
dispatchHasPendingRequests={() => setHasPendingRequests(true)}
/>
</div>
</motion.div>
</AnimatePresence>
)}
{!shouldDisplayFeedCard && <ChatInput />}
</div>
</>
);
};