ui: improve personnality picker

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/components/PublicPrompts.tsx

@@ -1,5 +1,5 @@
-import * as Accordion from "@radix-ui/react-accordion";
-import { ChangeEvent, useEffect, useState } from "react";
+/* eslint-disable max-lines */
+import { ChangeEvent, useEffect, useRef, useState } from "react";
 
 import { usePromptApi } from "@/lib/api/prompt/usePromptApi";
 import { Prompt } from "@/lib/types/Prompt";
@@ -12,12 +12,14 @@ export const PublicPrompts = ({
   onSelect,
 }: PublicPromptsProps): JSX.Element => {
   const [publicPrompts, setPublicPrompts] = useState<Prompt[]>([]);
-
   const { getPublicPrompts } = usePromptApi();
 
-  const fetchPublicPrompts = async () => {
-    setPublicPrompts(await getPublicPrompts());
-  };
+  useEffect(() => {
+    const fetchPublicPrompts = async () => {
+      setPublicPrompts(await getPublicPrompts());
+    };
+    void fetchPublicPrompts();
+  }, []);
 
   const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
     const selectedPrompt = publicPrompts.find(
@@ -31,27 +33,81 @@ export const PublicPrompts = ({
     }
   };
 
+  return (
+    <CustomSelect
+      options={publicPrompts}
+      onChange={handleChange}
+      onSelect={onSelect}
+    />
+  );
+};
+
+type CustomSelectProps = {
+  options: Prompt[];
+  onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+  onSelect: ({ title, content }: { title: string; content: string }) => void;
+};
+
+const CustomSelect = ({ options, onChange, onSelect }: CustomSelectProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<Prompt | null>(null);
+  const selectRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+  };
+
+  const handleOptionClick = (option: Prompt) => {
+    setSelectedOption(option);
+    setIsOpen(false);
+    onChange({
+      target: { value: option.id },
+    } as ChangeEvent<HTMLSelectElement>);
+    onSelect({
+      title: option.title,
+      content: option.content,
+    });
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      selectRef.current &&
+      !selectRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  };
+
   useEffect(() => {
-    void fetchPublicPrompts();
+    document.addEventListener("click", handleClickOutside, true);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
   }, []);
 
   return (
-    <Accordion.Root className="AccordionRoot" type="single" collapsible>
-      <Accordion.Item className="AccordionItem" value="item-1">
-        <Accordion.Trigger>Pick in public prompts</Accordion.Trigger>
-        <Accordion.Content>
-          <select
-            onChange={handleChange}
-            className="px-5 w-full py-2 dark:bg-gray-700 bg-gray-200 rounded-md"
-          >
-            {publicPrompts.map((prompt) => (
-              <option value={prompt.id} key={prompt.id}>
-                {prompt.title}
-              </option>
-            ))}
-          </select>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion.Root>
+    <div ref={selectRef} className="relative min-w-[200px] inline-block">
+      <button
+        onClick={toggleDropdown}
+        type="button"
+        className="px-4 py-2 w-full text-gray-700 bg-white border rounded-md focus:outline-none focus:border-blue-500"
+      >
+        {selectedOption ? selectedOption.title : "Select a Quivr Personality"}
+      </button>
+      {isOpen && (
+        <div className="absolute top-10 w-full bg-white border rounded-md shadow-lg">
+          {options.map((option) => (
+            <div
+              key={option.id}
+              className="px-4 py-2 cursor-pointer hover:bg-gray-100"
+              onClick={() => handleOptionClick(option)}
+            >
+              {option.title}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
   );
 };