feat: change share brain button logic (#1078)

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/hooks/useBrainManagementTabs.ts

@@ -5,11 +5,14 @@ import { useState } from "react";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
 import { BrainManagementTab } from "../types";
+import { getTargetedTab } from "../utils/getTargetedTab";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useBrainManagementTabs = () => {
-  const [selectedTab, setSelectedTab] =
-    useState<BrainManagementTab>("settings");
+  const [selectedTab, setSelectedTab] = useState<BrainManagementTab>(
+    getTargetedTab() ?? "settings"
+  );
+
   const { deleteBrain, setCurrentBrainId } = useBrainContext();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const router = useRouter();

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/types.ts

@@ -1 +1,3 @@
-export type BrainManagementTab = "settings" | "people" | "knowledge";
+export const brainManagementTabs = ["settings", "people", "knowledge"] as const;
+
+export type BrainManagementTab = (typeof brainManagementTabs)[number];

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/utils/getTargetedTab.ts

@@ -0,0 +1,8 @@
+import { BrainManagementTab, brainManagementTabs } from "../types";
+
+export const getTargetedTab = (): BrainManagementTab | undefined => {
+  const targetedTab = window.location.hash.split("#")[1];
+  if (brainManagementTabs.includes(targetedTab as BrainManagementTab)) {
+    return targetedTab as BrainManagementTab;
+  }
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/SuggestionRow.tsx

@@ -1,8 +1,9 @@
 import { EntryComponentProps } from "@draft-js-plugins/mention/lib/MentionSuggestions/Entry/Entry";
-import { UUID } from "crypto";
+import { useRouter } from "next/navigation";
+import { MdShare } from "react-icons/md";
 
 import { MentionTriggerType } from "@/app/chat/[chatId]/components/ActionsBar/types";
-import { ShareBrain } from "@/lib/components/ShareBrain";
+import Button from "@/lib/components/ui/Button";
 
 import { BrainSuggestion } from "./BrainSuggestion";
 import { PromptSuggestion } from "./PromptSuggestion";
@@ -11,13 +12,23 @@ export const SuggestionRow = ({
   mention,
   ...otherProps
 }: EntryComponentProps): JSX.Element => {
+  const router = useRouter();
   if ((mention.trigger as MentionTriggerType) === "@") {
     return (
       <div {...otherProps}>
         <div className="relative flex group px-4">
           <BrainSuggestion content={mention.name} />
           <div className="absolute right-0 flex flex-row">
-            <ShareBrain brainId={mention.id as UUID} />
+            <Button
+              className="group-hover:visible invisible hover:text-red-500 transition-[colors,opacity] p-1"
+              onClick={() =>
+                router.push(`/brains-management/${mention.id as string}#people`)
+              }
+              variant={"tertiary"}
+              data-testId="share-brain-button"
+            >
+              <MdShare className="text-xl" />
+            </Button>
           </div>
         </div>
       </div>