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

fix: upload dropdown also combined

Browse Source
pull/867/head
Siddhant Rai 3 months ago
parent 5daaf84e05
commit e1a2bd11a9
2 changed files with 158 additions and 146 deletions
Show Stats Download Patch File Download Diff File

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

@ -8,26 +8,52 @@ function Dropdown({
showDelete,
onDelete,
}: {
options: string[] | { name: string; id: string; type: string }[];
selectedValue: string;
options:
| string[]
| { name: string; id: string; type: string }[]
| { label: string; value: string }[];
selectedValue: string | { label: string; value: string };
onSelect:
| ((value: string) => void)
| ((value: { name: string; id: string; type: string }) => void);
| ((value: { name: string; id: string; type: string }) => void)
| ((value: { label: string; value: string }) => void);
showDelete?: boolean;
onDelete?: (value: string) => void;
}) {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="relative mt-2 w-32">
<div
className={
typeof selectedValue === 'string'
? 'relative mt-2 w-32'
: 'relative w-full align-middle'
}
>
<button
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'
className={`flex w-full cursor-pointer items-center justify-between border-2 bg-white p-3 dark:border-chinese-silver dark:bg-transparent ${
isOpen
? typeof selectedValue === 'string'
? 'rounded-t-xl'
: 'rounded-t-2xl'
: typeof selectedValue === 'string'
? 'rounded-xl'
: 'rounded-full'
}`}
>
<span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
{selectedValue}
</span>
{typeof selectedValue === 'string' ? (
<span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
{selectedValue}
</span>
) : (
<span
className={`overflow-hidden text-ellipsis dark:text-bright-gray ${
!selectedValue && 'text-silver'
}`}
>
{selectedValue ? selectedValue.label : 'From URL'}
</span>
)}
<img
src={Arrow2}
alt="arrow"
@ -41,7 +67,7 @@ function Dropdown({
{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"
className="hover:eerie-black flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe"
>
<span
onClick={() => {
@ -50,7 +76,11 @@ function Dropdown({
}}
className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
>
{typeof option === 'string' ? option : option.name}
{typeof option === 'string'
? option
: option.name
? option.name
: option.label}
</span>
{showDelete && onDelete && (
<button onClick={() => onDelete(option)} className="p-2">

252
frontend/src/upload/Upload.tsx
Unescape Escape View File

@ -4,61 +4,9 @@ import { useDropzone } from 'react-dropzone';
import { useDispatch } from 'react-redux';
import { ActiveState } from '../models/misc';
import { getDocs } from '../preferences/preferenceApi';
import Arrow2 from '../assets/dropdown-arrow.svg';
import { setSourceDocs } from '../preferences/preferenceSlice';
type urlOption = {
label: string,
value: string
} | null
function DropdownUrlType({
options,
selectedOption,
onSelect,
}: {
options: urlOption[];
selectedOption: urlOption;
onSelect: (value: urlOption) => void;
}) {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="relative w-full align-middle">
<button
onClick={() => setIsOpen(!isOpen)}
className={`${isOpen ? 'rounded-t-2xl' : 'rounded-full'} flex w-full cursor-pointer justify-between border-2 border-silver dark:border-chinese-silver bg-white p-3 dark:bg-transparent`}
>
<span className={`overflow-hidden text-ellipsis dark:text-bright-gray ${!selectedOption && 'text-silver'}`}>
{selectedOption ? selectedOption.label : 'From URL'}
</span>
<img
src={Arrow2}
alt="arrow"
className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
} h-3 w-3 transition-transform mt-1`}
/>
</button>
{isOpen && (
<div className="absolute left-0 right-0 z-50 -mt-1 rounded-b-xl border-2 border-silver 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 text-sonic-silver hover:eerie-black "
>
<span
onClick={() => {
onSelect(option);
setIsOpen(false);
}}
className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap px-1 py-3"
>
{option?.label}
</span>
</div>
))}
</div>
)}
</div>
);
}
import Dropdown from '../components/Dropdown';
export default function Upload({
modalState,
setModalState,
@ -67,13 +15,17 @@ export default function Upload({
setModalState: (state: ActiveState) => void;
}) {
const [docName, setDocName] = useState('');
const [urlName, setUrlName] = useState('')
const [url, setUrl] = useState('')
const urlOptions: urlOption[] = [
const [urlName, setUrlName] = useState('');
const [url, setUrl] = useState('');
const urlOptions: { label: string; value: string }[] = [
{ label: 'Crawler', value: 'crawler' },
// { label: 'Sitemap', value: 'sitemap' },
{ label: 'Link', value: 'url' }]
const [urlType, setUrlType] = useState<urlOption>(null)
{ label: 'Link', value: 'url' },
];
const [urlType, setUrlType] = useState<{ label: string; value: string }>({
label: '',
value: '',
});
const [activeTab, setActiveTab] = useState<string>('file');
const [files, setfiles] = useState<File[]>([]);
const [progress, setProgress] = useState<{
@ -116,8 +68,9 @@ export default function Upload({
setProgress(undefined);
setModalState('INACTIVE');
}}
className={`rounded-3xl bg-purple-30 px-4 py-2 text-sm font-medium text-white ${isCancellable ? '' : 'hidden'
}`}
className={`rounded-3xl bg-purple-30 px-4 py-2 text-sm font-medium text-white ${
isCancellable ? '' : 'hidden'
}`}
>
Finish
</button>
@ -210,7 +163,7 @@ export default function Upload({
};
const uploadRemote = () => {
console.log("here")
console.log('here');
const formData = new FormData();
formData.append('name', urlName);
formData.append('user', 'local');
@ -257,87 +210,115 @@ export default function Upload({
} else {
view = (
<>
<p className="text-xl text-jet dark:text-bright-gray">Upload New Documentation</p>
<div >
<p className="text-xl text-jet dark:text-bright-gray">
Upload New Documentation
</p>
<div>
<button
onClick={() => setActiveTab('file')}
className={`${activeTab === 'file' ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400' : 'text-sonic-silver hover:text-purple-30'} text-sm font-semibold mr-4 px-[20px] py-[5px] rounded-full`}>
className={`${
activeTab === 'file'
? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400'
: 'text-sonic-silver hover:text-purple-30'
} mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
>
From File
</button>
<button
onClick={() => setActiveTab('remote')}
className={`${activeTab === 'remote' ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400' : 'text-sonic-silver hover:text-purple-30'} text-sm font-semibold mr-4 px-[20px] py-[5px] rounded-full`}>
className={`${
activeTab === 'remote'
? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400'
: 'text-sonic-silver hover:text-purple-30'
} mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
>
Remote
</button>
</div>
{
activeTab === 'file' && (
<>
<input
type="text"
className="h-10 w-full rounded-full border-2 border-gray-5000 dark:text-silver dark:bg-transparent px-3 outline-none"
value={docName}
onChange={(e) => setDocName(e.target.value)}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:text-silver dark:bg-outer-space">Name</span>
</div>
<div {...getRootProps()}>
<span className="rounded-3xl border border-purple-30 dark:bg-purple-taupe px-4 py-2 font-medium text-purple-30 dark:text-silver hover:cursor-pointer">
<input type="button" {...getInputProps()} />
Choose Files
</span>
</div>
<p className="mb-0 italic text-xs text-gray-4000">
Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb
{activeTab === 'file' && (
<>
<input
type="text"
className="h-10 w-full rounded-full border-2 border-gray-5000 px-3 outline-none dark:bg-transparent dark:text-silver"
value={docName}
onChange={(e) => setDocName(e.target.value)}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
Name
</span>
</div>
<div {...getRootProps()}>
<span className="rounded-3xl border border-purple-30 px-4 py-2 font-medium text-purple-30 hover:cursor-pointer dark:bg-purple-taupe dark:text-silver">
<input type="button" {...getInputProps()} />
Choose Files
</span>
</div>
<p className="mb-0 text-xs italic text-gray-4000">
Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb
</p>
<div className="mt-0">
<p className="mb-[14px] font-medium text-eerie-black dark:text-light-gray">
Uploaded Files
</p>
<div className="mt-0">
<p className="mb-[14px] font-medium text-eerie-black dark:text-light-gray">Uploaded Files</p>
{files.map((file) => (
<p key={file.name} className="text-gray-6000">
{file.name}
</p>
))}
{files.length === 0 && <p className="text-gray-6000 dark:text-light-gray">None</p>}
</div>
</>
)
}
{
activeTab === 'remote' && (
<>
<DropdownUrlType onSelect={(value: urlOption) => setUrlType(value)} selectedOption={urlType} options={urlOptions} />
<input
placeholder='Enter name'
type="text"
className="h-10 w-full rounded-full border-2 border-silver dark:text-silver dark:bg-transparent px-3 outline-none"
value={urlName}
onChange={(e) => setUrlName(e.target.value)}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-silver dark:text-silver dark:bg-outer-space">Name</span>
</div>
<input
placeholder='URL Link'
type="text"
className="h-10 w-full rounded-full border-2 border-silver dark:text-silver dark:bg-transparent px-3 outline-none"
value={url}
onChange={(e) => setUrl(e.target.value)}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-silver dark:text-silver dark:bg-outer-space">Link</span>
</div>
</>
)
}
{files.map((file) => (
<p key={file.name} className="text-gray-6000">
{file.name}
</p>
))}
{files.length === 0 && (
<p className="text-gray-6000 dark:text-light-gray">None</p>
)}
</div>
</>
)}
{activeTab === 'remote' && (
<>
<Dropdown
options={urlOptions}
selectedValue={urlType}
onSelect={(value: { label: string; value: string }) =>
setUrlType(value)
}
/>
<input
placeholder="Enter name"
type="text"
className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
value={urlName}
onChange={(e) => setUrlName(e.target.value)}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
Name
</span>
</div>
<input
placeholder="URL Link"
type="text"
className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
value={url}
onChange={(e) => setUrl(e.target.value)}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
Link
</span>
</div>
</>
)}
<div className="flex flex-row-reverse">
<button
onClick={activeTab === 'file' ? uploadFile : uploadRemote}
className={`ml-6 rounded-3xl bg-purple-30 text-white cursor-pointer ${files.length > 0 && docName.trim().length > 0
? ''
: 'bg-opacity-75 text-opacity-80'
} py-2 px-6`}
disabled={(files.length === 0 || docName.trim().length === 0) && (activeTab === 'file') } // Disable the button if no file is selected or docName is empty
onClick={activeTab === 'file' ? uploadFile : uploadRemote}
className={`ml-6 cursor-pointer rounded-3xl bg-purple-30 text-white ${
files.length > 0 && docName.trim().length > 0
? ''
: 'bg-opacity-75 text-opacity-80'
} py-2 px-6`}
disabled={
(files.length === 0 || docName.trim().length === 0) &&
activeTab === 'file'
} // Disable the button if no file is selected or docName is empty
>
Train
</button>
@ -347,7 +328,7 @@ export default function Upload({
setfiles([]);
setModalState('INACTIVE');
}}
className="font-medium dark:text-light-gray cursor-pointer"
className="cursor-pointer font-medium dark:text-light-gray"
>
Cancel
</button>
@ -358,10 +339,11 @@ export default function Upload({
return (
<article
className={`${modalState === 'ACTIVE' ? 'visible' : 'hidden'
} absolute z-30 h-screen w-screen bg-gray-alpha`}
className={`${
modalState === 'ACTIVE' ? 'visible' : 'hidden'
} absolute z-30 h-screen w-screen bg-gray-alpha`}
>
<article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-lg bg-white dark:bg-outer-space p-6 shadow-lg">
<article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-lg bg-white p-6 shadow-lg dark:bg-outer-space">
{view}
</article>
</article>

Write Preview
Loading…
Cancel
Save