QuivrHQ/quivr
1
1
Fork 0
mirror of https://github.com/QuivrHQ/quivr.git synced 2024-09-11 14:36:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

FIX #1220 UX Upload improvement (#1259)

Browse Source 
Co-authored-by: Mamadou DICKO <63923024+mamadoudicko@users.noreply.github.com>
Co-authored-by: Zineb El Bachiri <100568984+gozineb@users.noreply.github.com>
This commit is contained in:
Rahil Ahmad 2023-09-27 12:52:22 +05:30 committed by GitHub
parent c8f045dfad
commit a9fdbd51e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 8988 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx
View File

@ -32,13 +32,9 @@ export const ActionsBar = (): JSX.Element => {
</div>
)}
<div
className={
shouldDisplayUploadCard ? "h-full flex flex-col flex-auto" : ""
}
>
<div className="">
{shouldDisplayUploadCard && (
<div className="flex flex-1 overflow-y-scroll shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4 md:p-6">
<div className="flex flex-1 overflow-y-auto shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4 md:p-6">
<KnowledgeToFeed
onClose={() => setShouldDisplayUploadCard(false)}
contents={contents}
@ -47,7 +43,7 @@ export const ActionsBar = (): JSX.Element => {
/>
</div>
)}
<div className="flex mt-1 flex-col w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4 md:p-6">
<div className="flex mt-1 flex-col w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 md:mb-4 lg:mb-[-20px] p-2">
<ChatInput
shouldDisplayUploadCard={shouldDisplayUploadCard}
setShouldDisplayUploadCard={setShouldDisplayUploadCard}

4
frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.tsx
View File

@ -4,10 +4,10 @@ import { MdClose } from "react-icons/md";
import Button from "@/lib/components/ui/Button";
import { Divider } from "@/lib/components/ui/Divider";
import { FeedItemType, FeedItemUploadType } from "../../types";
import { FeedItems } from "./components";
import { Crawler } from "./components/Crawler";
import { FileUploader } from "./components/FileUploader";
import { FeedItemType, FeedItemUploadType } from "../../types";
type FeedProps = {
onClose: () => void;
@ -28,7 +28,7 @@ export const KnowledgeToFeed = ({
).map((c) => c.file);
return (
<div className="flex flex-col w-full table relative pb-5">
<div className="flex-col w-full relative">
<div className="absolute right-2 top-1">
<Button variant={"tertiary"} onClick={onClose}>
<span>

4
frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FeedItems/FeedItems.tsx
View File

@ -1,8 +1,8 @@
import { Fragment } from "react";
import { FeedItemType } from "../../../../types";
import { CrawlFeedItem } from "./components/CrawlFeedItem";
import { FileFeedItem } from "./components/FileFeedItem/FileFeedItem";
import { FeedItemType } from "../../../../types";
type FeedItemsProps = {
contents: FeedItemType[];
@ -18,7 +18,7 @@ export const FeedItems = ({
}
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mt-5 shadow-md shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mt-1 bg-white p-6">
{contents.map((item, index) =>
item.source === "crawl" ? (
<CrawlFeedItem

6
frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FileUploader/index.tsx
View File

@ -1,10 +1,11 @@
"use client";
import { useTranslation } from "react-i18next";
import { IoCloudUploadOutline } from "react-icons/io5";
import Card from "@/lib/components/ui/Card";
import { useFileUploader } from "./hooks/useFileUploader";
import { FeedItemType } from "../../../../types";
import { useFileUploader } from "./hooks/useFileUploader";
type FileUploaderProps = {
addContent: (content: FeedItemType) => void;
@ -28,7 +29,8 @@ export const FileUploader = ({
>
<div className="flex flex-col sm:flex-row max-w-3xl w-full items-center gap-5">
<div className="flex-1 w-full">
<Card className="h-52 flex justify-center items-center">
<Card className="h-24 flex justify-center items-center">
<IoCloudUploadOutline className="relative right-16 text-5xl" />
<input {...getInputProps()} />
<div className="text-center p-6 max-w-sm w-full flex flex-col gap-5 items-center">
{isDragActive ? (

8976
frontend/pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

2
frontend/public/locales/en/upload.json
View File

@ -2,7 +2,7 @@
"title": "Upload Knowledge",
"subtitle": "Text, document, spreadsheet, presentation, audio, video, and URLs supported",
"drop": "Drop the files here...",
"dragAndDrop": "Drag and drop files here, or click to browse",
"dragAndDrop": "Drag and drop files here, or click to browse \n (pdf, csv, Doc, Word, Txt, XIs)",
"webSite": "Insert website URL",
"success": "File uploaded successfully",
"uploadFailed": "Failed to upload file: {{message}}",