diff --git a/client/src/components/Conversations/RenameButton.jsx b/client/src/components/Conversations/RenameButton.jsx index 214d745f9b..3f9b4497f8 100644 --- a/client/src/components/Conversations/RenameButton.jsx +++ b/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 ( - ); diff --git a/client/src/components/Models/ModelDialog.jsx b/client/src/components/Models/ModelDialog.jsx index 87ee82fcb3..d7dd1a9321 100644 --- a/client/src/components/Models/ModelDialog.jsx +++ b/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); diff --git a/client/src/components/Models/ModelItem.jsx b/client/src/components/Models/ModelItem.jsx index 4b0e1713d0..b9d8218455 100644 --- a/client/src/components/Models/ModelItem.jsx +++ b/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 ( {modelName} $ @@ -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 ( {modelName} {value === 'chatgpt' && $} + + {showButtons && ( + <> + + + + )} ); } diff --git a/client/src/components/Models/ModelMenu.jsx b/client/src/components/Models/ModelMenu.jsx index 470ada15d4..832d95ace0 100644 --- a/client/src/components/Models/ModelMenu.jsx +++ b/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) => {