reads uploaded files and adds icon to launch upload feature

pull/174/head
ajaythapliyal 1 year ago
parent 97f47f5415
commit dbaa116fe0

@ -7,6 +7,7 @@ import Hamburger from './assets/hamburger.svg';
import Key from './assets/key.svg'; import Key from './assets/key.svg';
import Info from './assets/info.svg'; import Info from './assets/info.svg';
import Link from './assets/link.svg'; import Link from './assets/link.svg';
import UploadIcon from './assets/upload.svg';
import { ActiveState } from './models/misc'; import { ActiveState } from './models/misc';
import APIKeyModal from './preferences/APIKeyModal'; import APIKeyModal from './preferences/APIKeyModal';
import SelectDocsModal from './preferences/SelectDocsModal'; import SelectDocsModal from './preferences/SelectDocsModal';
@ -109,7 +110,7 @@ export default function Navigation({
<div className="flex-grow border-b-2 border-gray-100"></div> <div className="flex-grow border-b-2 border-gray-100"></div>
<div className="flex flex-col-reverse border-b-2"> <div className="flex flex-col-reverse border-b-2">
<div className="relative my-4 px-6"> <div className="relative my-4 flex gap-2 px-2">
<div <div
className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2 bg-white" className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2 bg-white"
onClick={() => setIsDocsListOpen(!isDocsListOpen)} onClick={() => setIsDocsListOpen(!isDocsListOpen)}
@ -127,8 +128,9 @@ export default function Navigation({
} mr-3 w-3 transition-all`} } mr-3 w-3 transition-all`}
/> />
</div> </div>
<img className="hover:cursor-pointer" src={UploadIcon}></img>
{isDocsListOpen && ( {isDocsListOpen && (
<div className="absolute top-12 left-0 right-0 mx-6 max-h-52 overflow-y-scroll bg-white shadow-lg"> <div className="absolute top-12 left-0 right-6 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
{docs ? ( {docs ? (
docs.map((doc, index) => { docs.map((doc, index) => {
if (doc.model) { if (doc.model) {
@ -222,6 +224,7 @@ export default function Navigation({
setModalState={setApiKeyModalState} setModalState={setApiKeyModalState}
isCancellable={isApiKeySet} isCancellable={isApiKeySet}
/> />
{/* <Upload></Upload> */}
</> </>
); );
} }

@ -0,0 +1,3 @@
<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.35 6.04C18.67 2.59 15.64 0 12 0C9.11 0 6.6 1.64 5.35 4.04C2.34 4.36 0 6.91 0 10C0 13.31 2.69 16 6 16H19C21.76 16 24 13.76 24 11C24 8.36 21.95 6.22 19.35 6.04ZM14 9V13H10V9H7L12 4L17 9H14Z" fill="black" fill-opacity="0.54"/>
</svg>

After

Width:  |  Height:  |  Size: 340 B

@ -3,13 +3,15 @@ import { useDropzone } from 'react-dropzone';
export default function Upload() { export default function Upload() {
const [docName, setDocName] = useState(''); const [docName, setDocName] = useState('');
const [files, setfiles] = useState<File[]>([]);
const onDrop = useCallback((acceptedFiles: File[]) => { const onDrop = useCallback((acceptedFiles: File[]) => {
console.log(acceptedFiles); setfiles(acceptedFiles);
setDocName(acceptedFiles[0]?.name);
}, []); }, []);
const doNothing = () => { const doNothing = () => undefined;
return undefined;
};
const { getRootProps, getInputProps, isDragActive } = useDropzone({ const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop, onDrop,
multiple: true, multiple: true,
@ -37,8 +39,13 @@ export default function Upload() {
</label> </label>
</div> </div>
<div className="mt-9"> <div className="mt-9">
<p className="font-medium text-eerie-black">Uploaded Files</p> <p className="mb-5 font-medium text-eerie-black">Uploaded Files</p>
<p className="mt-5 text-gray-6000">None</p> {files.map((file) => (
<p key={file.name} className="text-gray-6000">
{file.name}
</p>
))}
{files.length === 0 && <p className="text-gray-6000">None</p>}
</div> </div>
<div className="flex flex-row-reverse"> <div className="flex flex-row-reverse">
<button className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white"> <button className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white">

Loading…
Cancel
Save