mirror of https://github.com/arc53/DocsGPT
fix: issue #157
parent
5ee6605703
commit
51f588f4b1
@ -0,0 +1,102 @@
|
||||
import Trash from '../assets/trash.svg';
|
||||
import Arrow2 from '../assets/dropdown-arrow.svg';
|
||||
import { Doc } from '../preferences/preferenceApi';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
type Props = {
|
||||
options: Doc[] | null;
|
||||
selectedDocs: Doc | null;
|
||||
setSelectedDocs: any;
|
||||
isDocsListOpen: boolean;
|
||||
setIsDocsListOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
handleDeleteClick: any;
|
||||
};
|
||||
|
||||
function Dropdown({
|
||||
options,
|
||||
setSelectedDocs,
|
||||
selectedDocs,
|
||||
setIsDocsListOpen,
|
||||
isDocsListOpen,
|
||||
handleDeleteClick,
|
||||
}: Props) {
|
||||
const dispatch = useDispatch();
|
||||
const embeddingsName =
|
||||
import.meta.env.VITE_EMBEDDINGS_NAME ||
|
||||
'huggingface_sentence-transformers/all-mpnet-base-v2';
|
||||
return (
|
||||
<div className="relative w-5/6 rounded-3xl">
|
||||
<button
|
||||
onClick={() => setIsDocsListOpen(!isDocsListOpen)}
|
||||
className={`flex w-full cursor-pointer items-center border-2 bg-white p-3 dark:border-chinese-silver dark:bg-transparent ${
|
||||
isDocsListOpen ? 'rounded-t-3xl' : 'rounded-3xl'
|
||||
}`}
|
||||
>
|
||||
<span className="ml-1 mr-2 flex-1 overflow-hidden text-ellipsis text-left dark:text-bright-gray">
|
||||
<div className="flex flex-row gap-2">
|
||||
<p className="max-w-3/4 truncate whitespace-nowrap">
|
||||
{selectedDocs?.name}
|
||||
</p>
|
||||
<p className="flex flex-col items-center justify-center">
|
||||
{selectedDocs?.version}
|
||||
</p>
|
||||
</div>
|
||||
</span>
|
||||
<img
|
||||
src={Arrow2}
|
||||
alt="arrow"
|
||||
className={`transform ${
|
||||
isDocsListOpen ? 'rotate-180' : 'rotate-0'
|
||||
} h-3 w-3 transition-transform`}
|
||||
/>
|
||||
</button>
|
||||
{isDocsListOpen && (
|
||||
<div className="absolute left-0 right-0 z-50 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border-2 bg-white shadow-lg dark:border-chinese-silver dark:bg-dark-charcoal">
|
||||
{options ? (
|
||||
options.map((option: any, index: number) => {
|
||||
if (option.model !== embeddingsName) {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
|
||||
onClick={() => {
|
||||
dispatch(setSelectedDocs(option));
|
||||
setIsDocsListOpen(false);
|
||||
}}
|
||||
>
|
||||
<span
|
||||
onClick={() => {
|
||||
setIsDocsListOpen(false);
|
||||
}}
|
||||
className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
|
||||
>
|
||||
{option.name}
|
||||
</span>
|
||||
{option.location === 'local' && (
|
||||
<img
|
||||
src={Trash}
|
||||
alt="Delete"
|
||||
className="mr-4 h-4 w-4 cursor-pointer hover:opacity-50"
|
||||
id={`img-${index}`}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
handleDeleteClick(index, option);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
) : (
|
||||
<div className="h-10 w-full cursor-pointer border-b-[1px] hover:bg-gray-100 dark:border-b-purple-taupe">
|
||||
<p className="ml-5 py-3">No default documentation.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dropdown;
|
Loading…
Reference in New Issue