feat: allow to share a public brain link (#1541)

Issue: https://github.com/StanGirard/quivr/issues/1539

Demo:



https://github.com/StanGirard/quivr/assets/63923024/ec0dcaa9-3c61-4a2a-a653-bceec435ad60

frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { MdAdd } from "react-icons/md";
+import { MdAdd, MdLink } from "react-icons/md";
 
 import Button from "@/lib/components/ui/Button";
 import { Modal } from "@/lib/components/ui/Modal";
@@ -21,6 +21,7 @@ export const PublicBrainItem = ({
     subscriptionRequestPending,
     isSubscriptionModalOpened,
     setIsSubscriptionModalOpened,
+    handleCopyBrainLink,
   } = usePublicBrainItem({
     brainId: brain.id,
   });
@@ -78,14 +79,21 @@ export const PublicBrainItem = ({
         <p className={`mb-10 ${isBrainDescriptionEmpty && "text-gray-400"}`}>
           {brainDescription}
         </p>
-
         <p className="font-bold mb-5">
           <span>
             <span className="mr-2">{t("public_brain_last_update_label")}:</span>
             {formatDate(brain.last_update)}
           </span>
         </p>
-        <div className="flex flex-1 justify-end">{subscribeButton}</div>
+        <div className="flex flex-1 justify-between items-center">
+          <Button
+            onClick={() => void handleCopyBrainLink()}
+            className="p-1 bg-white border-solid border border-gray-300 rounded-md hover:bg-gray-100"
+          >
+            <MdLink size="20" color="gray" />
+          </Button>
+          {subscribeButton}
+        </div>
       </div>
     </Modal>
   );

frontend/app/brains-management/library/components/PublicBrainItem/hooks/usePublicBrainItem.ts

@@ -1,4 +1,5 @@
 import { UUID } from "crypto";
+import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -7,6 +8,8 @@ import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainConte
 import { getAxiosErrorParams } from "@/lib/helpers/getAxiosErrorParams";
 import { useToast } from "@/lib/hooks";
 
+import { generatePublicBrainLink } from "../utils/generatePublicBrainLink";
+
 type UseSubscribeToBrainProps = {
   brainId: UUID;
 };
@@ -19,8 +22,12 @@ export const usePublicBrainItem = ({ brainId }: UseSubscribeToBrainProps) => {
   const { publish } = useToast();
   const { allBrains, fetchAllBrains } = useBrainContext();
 
-  const [isSubscriptionModalOpened, setIsSubscriptionModalOpened] =
-    useState(false);
+  const searchParams = useSearchParams();
+  const urlBrainId = searchParams?.get("brainId");
+
+  const [isSubscriptionModalOpened, setIsSubscriptionModalOpened] = useState(
+    urlBrainId === brainId
+  );
 
   const isUserSubscribedToBrain =
     allBrains.find((brain) => brain.id === brainId) !== undefined;
@@ -56,11 +63,20 @@ export const usePublicBrainItem = ({ brainId }: UseSubscribeToBrainProps) => {
     }
   };
 
+  const handleCopyBrainLink = async () => {
+    await navigator.clipboard.writeText(generatePublicBrainLink(brainId));
+    publish({
+      variant: "success",
+      text: t("copiedToClipboard", { ns: "brain" }),
+    });
+  };
+
   return {
     handleSubscribeToBrain,
     subscriptionRequestPending,
     isUserSubscribedToBrain,
     setIsSubscriptionModalOpened,
     isSubscriptionModalOpened,
+    handleCopyBrainLink,
   };
 };

frontend/app/brains-management/library/components/PublicBrainItem/utils/generatePublicBrainLink.ts

@@ -0,0 +1,2 @@
+export const generatePublicBrainLink = (brainId: string): string =>
+  `${window.location.origin}/brains-management/library?brainId=${brainId}`;