add buttons to custom model menu items

client/src/components/Conversations/RenameButton.jsx

@@ -2,11 +2,14 @@ import React from 'react';
 import RenameIcon from '../svg/RenameIcon';
 import CheckMark from '../svg/CheckMark';
 
-export default function RenameButton({ renaming, renameHandler, onRename }) {
+export default function RenameButton({ renaming, renameHandler, onRename, twcss }) {
   const handler = renaming ? onRename : renameHandler;
-
+  const classProp = { className: "p-1 hover:text-white" };
+  if (twcss) {
+    classProp.className = twcss;
+  }
   return (
-    <button className="p-1 hover:text-white" onClick={handler}>
+    <button {...classProp} onClick={handler}>
       {renaming ? <CheckMark /> : <RenameIcon />}
     </button>
   );

client/src/components/Models/ModelDialog.jsx

@@ -20,7 +20,6 @@ export default function ModelDialog({ mutate, modelMap, setModelSave, handleSave
   const dispatch = useDispatch();
   const [chatGptLabel, setChatGptLabel] = useState('');
   const [promptPrefix, setPromptPrefix] = useState('');
-  
   const [saveText, setSaveText] = useState('Save');
   const [required, setRequired] = useState(false);
   const inputRef = useRef(null);

client/src/components/Models/ModelItem.jsx

@@ -1,14 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import { DropdownMenuRadioItem } from '../ui/DropdownMenu.tsx';
 import { DialogTrigger } from '../ui/Dialog.tsx';
+import RenameButton from '../Conversations/RenameButton';
+import TrashIcon from '../svg/TrashIcon';
 
 export default function ModelItem({ modelName, value }) {
+  const { initial } = useSelector((state) => state.models);
+  const [isHovering, setIsHovering] = useState(false);
+
   if (value === 'chatgptCustom') {
     return (
       <DialogTrigger className="w-full">
         <DropdownMenuRadioItem
           value={value}
-          className="dark:font-semibold dark:hover:bg-gray-800 dark:text-gray-100"
+          className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
         >
           {modelName}
           <sup>$</sup>
@@ -17,13 +23,39 @@ export default function ModelItem({ modelName, value }) {
     );
   }
 
+  const handleMouseOver = () => {
+    setIsHovering(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsHovering(false);
+  };
+
+  const buttonClass = {
+    className:
+      'rounded-md m-0 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+  };
+
+  const showButtons = isHovering && !initial[value];
+
   return (
     <DropdownMenuRadioItem
       value={value}
-      className="dark:font-semibold dark:hover:bg-gray-800 dark:text-gray-100"
+      className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
     >
       {modelName}
       {value === 'chatgpt' && <sup>$</sup>}
+
+      {showButtons && (
+        <>
+          <RenameButton twcss={`ml-auto mr-2 ${buttonClass.className}`} />
+          <button {...buttonClass}>
+            <TrashIcon />
+          </button>
+        </>
+      )}
     </DropdownMenuRadioItem>
   );
 }

client/src/components/Models/ModelMenu.jsx

@@ -24,7 +24,6 @@ import { Dialog } from '../ui/Dialog.tsx';
 export default function ModelMenu() {
   const dispatch = useDispatch();
   const [modelSave, setModelSave] = useState(false);
-  // const [dialogOpen, setDialogOpen] = useState(false);
   const { model, customModel } = useSelector((state) => state.submit);
   const { models, modelMap, initial } = useSelector((state) => state.models);
   const { trigger } = manualSWR(`http://localhost:3080/api/customGpts`, 'get', (res) => {