diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/BrainsDropDown.tsx b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/BrainsDropDown.tsx
index b6ed47b6f..bdbbdbe66 100644
--- a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/BrainsDropDown.tsx
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/BrainsDropDown.tsx
@@ -1,17 +1,17 @@
import { useState } from "react";
import { FaBrain } from "react-icons/fa";
-import { MdCheck, MdDelete } from "react-icons/md";
+import { MdCheck } from "react-icons/md";
-import Button from "@/lib/components/ui/Button";
import Field from "@/lib/components/ui/Field";
import Popover from "@/lib/components/ui/Popover";
import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
-import { AddBrainModal } from "./AddBrainModal";
+import { AddBrainModal } from "./components/AddBrainModal";
+import { BrainActions } from "./components/BrainActions/BrainActions";
export const BrainsDropDown = (): JSX.Element => {
const [searchQuery, setSearchQuery] = useState("");
- const { allBrains, setActiveBrain, currentBrain, deleteBrain } =
+ const { allBrains, isFetchingBrains, setActiveBrain, currentBrain } =
useBrainContext();
return (
@@ -41,6 +41,11 @@ export const BrainsDropDown = (): JSX.Element => {
/>
{/* List of brains */}
+ {isFetchingBrains && (
+
+ )}
{allBrains.map((brain) => {
if (brain.name.includes(searchQuery)) {
return (
@@ -68,13 +73,7 @@ export const BrainsDropDown = (): JSX.Element => {
{brain.name}
-
+
);
}
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/AddBrainModal.tsx b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/AddBrainModal.tsx
similarity index 95%
rename from frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/AddBrainModal.tsx
rename to frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/AddBrainModal.tsx
index e0a2d4f34..1112d444a 100644
--- a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/AddBrainModal.tsx
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/AddBrainModal.tsx
@@ -6,7 +6,7 @@ import Field from "@/lib/components/ui/Field";
import Modal from "@/lib/components/ui/Modal";
import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
-const AddBrainModal = (): JSX.Element => {
+export const AddBrainModal = (): JSX.Element => {
const [newBrainName, setNewBrainName] = useState("");
const [isPending, setIsPending] = useState(false);
@@ -56,5 +56,3 @@ const AddBrainModal = (): JSX.Element => {
);
};
-
-export { AddBrainModal };
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/BrainActions.tsx b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/BrainActions.tsx
new file mode 100644
index 000000000..4cba45a62
--- /dev/null
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/BrainActions.tsx
@@ -0,0 +1,28 @@
+import { UUID } from "crypto";
+import { MdDelete } from "react-icons/md";
+
+import Button from "@/lib/components/ui/Button";
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+
+import { ShareBrain } from "./ShareBrain";
+
+type BrainActionsProps = {
+ brainId: UUID;
+};
+
+export const BrainActions = ({ brainId }: BrainActionsProps): JSX.Element => {
+ const { deleteBrain } = useBrainContext();
+
+ return (
+
+
+
+
+ );
+};
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/ShareBrain.tsx b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/ShareBrain.tsx
new file mode 100644
index 000000000..7c7eef7ef
--- /dev/null
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/ShareBrain.tsx
@@ -0,0 +1,47 @@
+import { UUID } from "crypto";
+import { MdContentPaste, MdShare } from "react-icons/md";
+
+import Button from "@/lib/components/ui/Button";
+import Modal from "@/lib/components/ui/Modal";
+import { useToast } from "@/lib/hooks";
+
+type ShareBrainModalProps = {
+ brainId: UUID;
+};
+
+export const ShareBrain = ({ brainId }: ShareBrainModalProps): JSX.Element => {
+ const { publish } = useToast();
+
+ const baseUrl = window.location.origin;
+ const brainShareLink = `${baseUrl}/brain_subscription_invitation=${brainId}`;
+
+ const handleCopyInvitationLink = async () => {
+ await navigator.clipboard.writeText(brainShareLink);
+ publish({
+ variant: "success",
+ text: "Copied to clipboard",
+ });
+ };
+
+ return (
+ void 0}
+ variant={"tertiary"}
+ >
+
+
+ }
+ title="Share brain"
+ >
+
+
{brainShareLink}
+
+
+
+ );
+};
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/index.ts b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/index.ts
new file mode 100644
index 000000000..11fa4bb89
--- /dev/null
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/index.ts
@@ -0,0 +1 @@
+export * from "./BrainActions";
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/index.ts b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/index.ts
new file mode 100644
index 000000000..131f108a4
--- /dev/null
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./AddBrainModal";
+export * from "./BrainActions";
diff --git a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/index.ts b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/index.ts
index cfd7b2d6f..cd14c4a62 100644
--- a/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/index.ts
+++ b/frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/index.ts
@@ -1,4 +1 @@
-import { AddBrainModal } from "./AddBrainModal";
-import { BrainsDropDown } from "./BrainsDropDown";
-
-export { BrainsDropDown, AddBrainModal };
+export * from "./BrainsDropDown";
diff --git a/frontend/lib/components/ui/Modal.tsx b/frontend/lib/components/ui/Modal.tsx
index 7e3b49a86..3421695b9 100644
--- a/frontend/lib/components/ui/Modal.tsx
+++ b/frontend/lib/components/ui/Modal.tsx
@@ -12,6 +12,7 @@ interface ModalProps {
children?: ReactNode;
Trigger: ReactNode;
CloseTrigger?: ReactNode;
+ opened?: boolean;
}
const Modal = ({
@@ -20,8 +21,9 @@ const Modal = ({
children,
Trigger,
CloseTrigger,
+ opened = false,
}: ModalProps): JSX.Element => {
- const [open, setOpen] = useState(false);
+ const [open, setOpen] = useState(opened);
return (
diff --git a/frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts b/frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts
index a3067edaa..d244008b3 100644
--- a/frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts
+++ b/frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts
@@ -103,6 +103,5 @@ export const useBrainProvider = () => {
setDefaultBrain,
fetchAndSetActiveBrain,
isFetchingBrains,
- setIsFetchingBrains,
};
};