Archives
/
DocsGPT
mirror of https://github.com/arc53/DocsGPT
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: combined two dropdowns into a single component

Browse Source
pull/867/head
Siddhant Rai 3 months ago
parent 19b09515a1
commit 5daaf84e05
4 changed files with 194 additions and 220 deletions
Show Stats Download Patch File Download Diff File

4
frontend/src/Navigation.tsx
Unescape Escape View File

@ -40,7 +40,7 @@ import { Doc, getConversations } from './preferences/preferenceApi';
import SelectDocsModal from './preferences/SelectDocsModal';
import ConversationTile from './conversation/ConversationTile';
import { useDarkTheme } from './hooks';
import Dropdown from './components/Dropdown';
import SourceDropdown from './components/SourceDropdown';
interface NavigationProps {
navOpen: boolean;
@ -277,7 +277,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
<div className="flex h-auto flex-col justify-end text-eerie-black dark:text-white">
<div className="flex flex-col-reverse border-b-[1px] dark:border-b-purple-taupe">
<div className="relative my-4 flex gap-2 px-2">
<Dropdown
<SourceDropdown
options={docs}
selectedDocs={selectedDocs}
setSelectedDocs={setSelectedDocs}

186
frontend/src/Setting.tsx
Unescape Escape View File

@ -12,6 +12,7 @@ import {
} from './preferences/preferenceSlice';
import { Doc } from './preferences/preferenceApi';
import { useDarkTheme } from './hooks';
import Dropdown from './components/Dropdown';
type PromptProps = {
prompts: { name: string; id: string; type: string }[];
selectedPrompt: { name: string; id: string; type: string };
@ -87,8 +88,11 @@ const Setting: React.FC = () => {
method: 'GET',
})
.then((response) => {
if(response.ok && documents){
const updatedDocuments = [...documents.slice(0, index), ...documents.slice(index + 1)];
if (response.ok && documents) {
const updatedDocuments = [
...documents.slice(0, index),
...documents.slice(index + 1),
];
dispatch(setSourceDocs(updatedDocuments));
}
})
@ -96,8 +100,10 @@ const Setting: React.FC = () => {
};
return (
<div className="p-4 pt-20 md:p-12 wa">
<p className="text-2xl font-bold text-eerie-black dark:text-bright-gray">Settings</p>
<div className="wa p-4 pt-20 md:p-12">
<p className="text-2xl font-bold text-eerie-black dark:text-bright-gray">
Settings
</p>
<div className="mt-6 flex flex-row items-center space-x-4 overflow-x-auto md:space-x-8 ">
<div className="md:hidden">
<button
@ -112,10 +118,11 @@ const Setting: React.FC = () => {
<button
key={index}
onClick={() => setActiveTab(tab)}
className={`h-9 rounded-3xl px-4 font-bold ${activeTab === tab
className={`h-9 rounded-3xl px-4 font-bold ${
activeTab === tab
? 'bg-purple-3000 text-purple-30 dark:bg-dark-charcoal'
: 'text-gray-6000'
}`}
}`}
>
{tab}
</button>
@ -188,7 +195,9 @@ const General: React.FC = () => {
const themes = ['Light', 'Dark'];
const languages = ['English'];
const [isDarkTheme, toggleTheme] = useDarkTheme();
const [selectedTheme, setSelectedTheme] = useState(isDarkTheme ? 'Dark' : 'Light');
const [selectedTheme, setSelectedTheme] = useState(
isDarkTheme ? 'Dark' : 'Light',
);
const [selectedLanguage, setSelectedLanguage] = useState(languages[0]);
return (
<div className="mt-[59px]">
@ -197,14 +206,16 @@ const General: React.FC = () => {
<Dropdown
options={themes}
selectedValue={selectedTheme}
onSelect={(option:string)=>{
setSelectedTheme(option);
option !==selectedTheme && toggleTheme();
}}
onSelect={(option: string) => {
setSelectedTheme(option);
option !== selectedTheme && toggleTheme();
}}
/>
</div>
<div>
<p className="font-bold text-jet dark:text-bright-gray">Select Language</p>
<p className="font-bold text-jet dark:text-bright-gray">
Select Language
</p>
<Dropdown
options={languages}
selectedValue={selectedLanguage}
@ -348,7 +359,7 @@ const Prompts: React.FC<PromptProps> = ({
<div className="mt-[59px]">
<div className="mb-4">
<p className="font-semibold dark:text-bright-gray">Active Prompt</p>
<DropdownPrompt
<Dropdown
options={prompts}
selectedValue={selectedPrompt.name}
onSelect={handleSelectPrompt}
@ -356,7 +367,7 @@ const Prompts: React.FC<PromptProps> = ({
</div>
<div className="mb-4">
<p className='dark:text-bright-gray'>Prompt name </p>{' '}
<p className="dark:text-bright-gray">Prompt name </p>{' '}
<p className="mb-2 text-xs italic text-eerie-black dark:text-bright-gray">
start by editing name
</p>
@ -372,7 +383,7 @@ const Prompts: React.FC<PromptProps> = ({
<div className="mb-4">
<p className="mb-2 dark:text-bright-gray">Prompt content</p>
<textarea
className="h-32 w-full rounded-lg border-2 p-2 dark:border-chinese-silver dark:text-white dark:bg-transparent"
className="h-32 w-full rounded-lg border-2 p-2 dark:border-chinese-silver dark:bg-transparent dark:text-white"
value={newPromptContent}
onChange={(e) => setNewPromptContent(e.target.value)}
placeholder="Active prompt contents"
@ -381,30 +392,33 @@ const Prompts: React.FC<PromptProps> = ({
<div className="flex justify-between">
<button
className={`rounded-lg bg-green-500 px-4 py-2 font-bold text-white transition-all hover:bg-green-700 ${newPromptName === selectedPrompt.name
className={`rounded-lg bg-green-500 px-4 py-2 font-bold text-white transition-all hover:bg-green-700 ${
newPromptName === selectedPrompt.name
? 'cursor-not-allowed opacity-50'
: ''
}`}
}`}
onClick={handleAddPrompt}
disabled={newPromptName === selectedPrompt.name}
>
Add New Prompt
</button>
<button
className={`rounded-lg bg-red-500 px-4 py-2 font-bold text-white transition-all hover:bg-red-700 ${selectedPrompt.type === 'public'
className={`rounded-lg bg-red-500 px-4 py-2 font-bold text-white transition-all hover:bg-red-700 ${
selectedPrompt.type === 'public'
? 'cursor-not-allowed opacity-50'
: ''
}`}
}`}
onClick={handleDeletePrompt}
disabled={selectedPrompt.type === 'public'}
>
Delete Prompt
</button>
<button
className={`rounded-lg bg-blue-500 px-4 py-2 font-bold text-white transition-all hover:bg-blue-700 ${selectedPrompt.type === 'public'
className={`rounded-lg bg-blue-500 px-4 py-2 font-bold text-white transition-all hover:bg-blue-700 ${
selectedPrompt.type === 'public'
? 'cursor-not-allowed opacity-50'
: ''
}`}
}`}
onClick={handleSaveChanges}
disabled={selectedPrompt.type === 'public'}
>
@ -415,118 +429,6 @@ const Prompts: React.FC<PromptProps> = ({
);
};
function DropdownPrompt({
options,
selectedValue,
onSelect,
}: {
options: { name: string; id: string; type: string }[];
selectedValue: string;
onSelect: (value: { name: string; id: string; type: string }) => void;
}) {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="relative mt-2 w-32">
<button
onClick={() => setIsOpen(!isOpen)}
className="flex w-full cursor-pointer items-center rounded-xl border-2 dark:border-chinese-silver bg-white p-3 dark:bg-transparent"
>
<span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
{selectedValue}
</span>
<img
src={Arrow2}
alt="arrow"
className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
} h-3 w-3 transition-transform`}
/>
</button>
{isOpen && (
<div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 dark:border-chinese-silver bg-white dark:bg-dark-charcoal shadow-lg">
{options.map((option, index) => (
<div
key={index}
className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe dark:text-bright-gray "
>
<span
onClick={() => {
onSelect(option);
setIsOpen(false);
}}
className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
>
{option.name}
</span>
</div>
))}
</div>
)}
</div>
);
}
function Dropdown({
options,
selectedValue,
onSelect,
showDelete,
onDelete,
}: {
options: string[];
selectedValue: string;
onSelect: (value: string) => void;
showDelete?: boolean; // optional
onDelete?: (value: string) => void; // optional
}) {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="relative mt-2 w-32">
<button
onClick={() => setIsOpen(!isOpen)}
className="flex w-full cursor-pointer items-center rounded-xl border-2 dark:border-chinese-silver bg-white p-3 dark:bg-transparent"
>
<span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
{selectedValue}
</span>
<img
src={Arrow2}
alt="arrow"
className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
} h-3 w-3 transition-transform`}
/>
</button>
{isOpen && (
<div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 bg-white dark:border-chinese-silver dark:bg-dark-charcoal shadow-lg">
{options.map((option, index) => (
<div
key={index}
className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe"
>
<span
onClick={() => {
onSelect(option);
setIsOpen(false);
}}
className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
>
{option}
</span>
{showDelete && onDelete && (
<button onClick={() => onDelete(option)} className="p-2">
{/* Icon or text for delete button */}
Delete
</button>
)}
</div>
))}
</div>
)}
</div>
);
}
type AddPromptModalProps = {
newPromptName: string;
onNewPromptNameChange: (name: string) => void;
@ -549,7 +451,7 @@ const AddPromptModal: React.FC<AddPromptModalProps> = ({
placeholder="Enter Prompt Name"
value={newPromptName}
onChange={(e) => onNewPromptNameChange(e.target.value)}
className="mb-4 w-full rounded-3xl border-2 dark:border-chinese-silver p-2"
className="mb-4 w-full rounded-3xl border-2 p-2 dark:border-chinese-silver"
/>
<button
onClick={onAddPrompt}
@ -582,13 +484,13 @@ const Documents: React.FC<DocumentsProps> = ({
<div className="flex flex-col">
{/* <h2 className="text-xl font-semibold">Documents</h2> */}
<div className="mt-[27px] overflow-x-auto border dark:border-chinese-silver rounded-xl w-max">
<table className="block w-full table-auto content-center justify-center text-center dark:text-bright-gray" >
<div className="mt-[27px] w-max overflow-x-auto rounded-xl border dark:border-chinese-silver">
<table className="block w-full table-auto content-center justify-center text-center dark:text-bright-gray">
<thead>
<tr>
<th className="border-r p-4 md:w-[244px]">Document Name</th>
<th className="border-r px-4 py-2 w-[244px]">Vector Date</th>
<th className="border-r px-4 py-2 w-[244px]">Type</th>
<th className="w-[244px] border-r px-4 py-2">Vector Date</th>
<th className="w-[244px] border-r px-4 py-2">Type</th>
<th className="px-4 py-2"></th>
</tr>
</thead>
@ -596,8 +498,12 @@ const Documents: React.FC<DocumentsProps> = ({
{documents &&
documents.map((document, index) => (
<tr key={index}>
<td className="border-r border-t px-4 py-2">{document.name}</td>
<td className="border-r border-t px-4 py-2">{document.date}</td>
<td className="border-r border-t px-4 py-2">
{document.name}
</td>
<td className="border-r border-t px-4 py-2">
{document.date}
</td>
<td className="border-r border-t px-4 py-2">
{document.location === 'remote'
? 'Pre-loaded'

122
frontend/src/components/Dropdown.tsx
Unescape Escape View File

@ -1,98 +1,64 @@
import Trash from '../assets/trash.svg';
import { useState } from 'react';
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';
selectedValue,
onSelect,
showDelete,
onDelete,
}: {
options: string[] | { name: string; id: string; type: string }[];
selectedValue: string;
onSelect:
| ((value: string) => void)
| ((value: { name: string; id: string; type: string }) => void);
showDelete?: boolean;
onDelete?: (value: string) => void;
}) {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="relative w-5/6 rounded-3xl">
<div className="relative mt-2 w-32">
<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'
onClick={() => setIsOpen(!isOpen)}
className={`flex w-full cursor-pointer items-center border-2 bg-white p-3 dark:border-chinese-silver dark:bg-transparent ${
isOpen ? 'rounded-t-xl' : 'rounded-xl'
}`}
>
<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 className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
{selectedValue}
</span>
<img
src={Arrow2}
alt="arrow"
className={`transform ${
isDocsListOpen ? 'rotate-180' : 'rotate-0'
isOpen ? '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>
{isOpen && (
<div className="absolute left-0 right-0 z-50 -mt-1 overflow-y-auto rounded-b-xl border-2 bg-white shadow-lg dark:border-chinese-silver dark:bg-dark-charcoal">
{options.map((option: any, index) => (
<div
key={index}
className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe"
>
<span
onClick={() => {
onSelect(option);
setIsOpen(false);
}}
className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
>
{typeof option === 'string' ? option : option.name}
</span>
{showDelete && onDelete && (
<button onClick={() => onDelete(option)} className="p-2">
Delete
</button>
)}
</div>
)}
))}
</div>
)}
</div>

102
frontend/src/components/SourceDropdown.tsx
Unescape Escape View File

@ -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 SourceDropdown({
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 dark:hover:bg-purple-taupe">
<p className="ml-5 py-3">No default documentation.</p>
</div>
)}
</div>
)}
</div>
);
}
export default SourceDropdown;
Write Preview
Loading…
Cancel
Save