QuivrHQ/quivr
1
1
Fork 0
mirror of https://github.com/QuivrHQ/quivr.git synced 2024-12-15 01:21:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

Shareable Brains - 2 (#601)

Browse Source 
* feat(brains): add fetching indicator

* feat: add brain share modal
This commit is contained in:
Mamadou DICKO 2023-07-11 14:45:18 +02:00 committed by GitHub
parent 22ea64e67c
commit 8749ffd0bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 93 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/BrainsDropDown.tsx
View File

@ -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 => {
/>
<div className="overflow-auto scrollbar flex flex-col h-48 mt-5">
{/* List of brains */}
{isFetchingBrains && (
<div className="flex items-center justify-center h-full">
<p className="text-gray-500">Loading...</p>
</div>
)}
{allBrains.map((brain) => {
if (brain.name.includes(searchQuery)) {
return (
@ -68,13 +73,7 @@ export const BrainsDropDown = (): JSX.Element => {
</span>
<span className="flex-1">{brain.name}</span>
</button>
<Button
className="group-hover:visible invisible absolute right-0 hover:text-red-500 transition-[colors,opacity]"
onClick={() => void deleteBrain(brain.id)}
variant={"tertiary"}
>
<MdDelete className="text-xl" />
</Button>
<BrainActions brainId={brain.id} />
</div>
);
}

4
frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/AddBrainModal.tsx → frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/AddBrainModal.tsx
View File

@ -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 => {
</Modal>
);
};
export { AddBrainModal };

28
frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/BrainActions.tsx Normal file
View File

@ -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 (
<div className="absolute right-0 flex flex-row">
<ShareBrain brainId={brainId} />
<Button
className="group-hover:visible invisible hover:text-red-500 transition-[colors,opacity] p-1"
onClick={() => void deleteBrain(brainId)}
variant={"tertiary"}
>
<MdDelete className="text-xl" />
</Button>
</div>
);
};

47
frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/ShareBrain.tsx Normal file
View File

@ -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 (
<Modal
Trigger={
<Button
className="group-hover:visible invisible hover:text-red-500 transition-[colors,opacity] p-1"
onClick={() => void 0}
variant={"tertiary"}
>
<MdShare className="text-xl" />
</Button>
}
title="Share brain"
>
<div className="flex flex-row align-center my-5">
<p>{brainShareLink}</p>
<Button onClick={() => void handleCopyInvitationLink()}>
<MdContentPaste />
</Button>
</div>
</Modal>
);
};

1
frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./BrainActions";

2
frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./AddBrainModal";
export * from "./BrainActions";

5
frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/index.ts
View File

@ -1,4 +1 @@
import { AddBrainModal } from "./AddBrainModal";
import { BrainsDropDown } from "./BrainsDropDown";
export { BrainsDropDown, AddBrainModal };
export * from "./BrainsDropDown";

4
frontend/lib/components/ui/Modal.tsx
View File

@ -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 (
<Dialog.Root onOpenChange={setOpen}>

1
frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts
View File

@ -103,6 +103,5 @@ export const useBrainProvider = () => {
setDefaultBrain,
fetchAndSetActiveBrain,
isFetchingBrains,
setIsFetchingBrains,
};
};