2023-09-28 12:29:55 +03:00
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
2023-09-08 10:57:21 +03:00
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { AiOutlineLoading3Quarters } from "react-icons/ai";
|
|
|
|
|
2023-09-29 11:24:31 +03:00
|
|
|
import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
|
|
|
|
|
2023-09-05 19:47:18 +03:00
|
|
|
import { ChatInput, KnowledgeToFeed } from "./components";
|
2023-09-05 11:49:29 +03:00
|
|
|
import { useActionBar } from "./hooks/useActionBar";
|
2023-09-28 12:29:55 +03:00
|
|
|
|
2023-09-29 11:24:31 +03:00
|
|
|
export const ActionsBar = (): JSX.Element => {
|
2023-09-27 16:39:04 +03:00
|
|
|
const { hasPendingRequests, setHasPendingRequests } = useActionBar();
|
2023-09-05 11:49:29 +03:00
|
|
|
|
2023-09-12 18:44:15 +03:00
|
|
|
const { t } = useTranslation(["chat"]);
|
2023-09-29 11:24:31 +03:00
|
|
|
const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();
|
2023-09-08 10:57:21 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{hasPendingRequests && (
|
2023-09-15 02:09:26 +03:00
|
|
|
<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">
|
|
|
|
<div className="flex flex-1 items-center mb-2 md:mb-0">
|
2023-09-18 22:28:07 +03:00
|
|
|
<span className="text-sm md:text-1xl">{t("feedingBrain")}</span>
|
2023-09-08 10:57:21 +03:00
|
|
|
</div>
|
2023-09-15 02:09:26 +03:00
|
|
|
<AiOutlineLoading3Quarters className="animate-spin text-2xl md:text-3xl self-center" />
|
2023-09-05 11:49:29 +03:00
|
|
|
</div>
|
|
|
|
)}
|
2023-09-08 10:57:21 +03:00
|
|
|
|
2023-09-27 16:39:04 +03:00
|
|
|
<div>
|
2023-09-29 11:24:31 +03:00
|
|
|
{shouldDisplayFeedCard && (
|
2023-09-28 12:29:55 +03:00
|
|
|
<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>
|
2023-09-27 16:39:04 +03:00
|
|
|
)}
|
2023-09-29 11:24:31 +03:00
|
|
|
{!shouldDisplayFeedCard && (
|
2023-10-03 13:18:49 +03:00
|
|
|
<div className="flex mt-1 flex-col 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">
|
2023-09-29 11:24:31 +03:00
|
|
|
<ChatInput shouldDisplayFeedCard={shouldDisplayFeedCard} />
|
2023-09-08 10:57:21 +03:00
|
|
|
</div>
|
|
|
|
)}
|
2023-09-05 11:49:29 +03:00
|
|
|
</div>
|
2023-09-08 10:57:21 +03:00
|
|
|
</>
|
2023-08-11 11:06:20 +03:00
|
|
|
);
|
|
|
|
};
|