Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-21 19:00:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add buttons to custom model menu items

Browse source
This commit is contained in:
Daniel Avila 2023-03-06 21:43:49 -05:00
parent 6d757ff91f
commit 191118b90b
4 changed files with 41 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

38
client/src/components/Models/ModelItem.jsx
View file

@ -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>
);
}