LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 16:43:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

(feat:filepciker) load inside table, ui

Browse Source
This commit is contained in:
ManishMadan2882
2025-09-16 14:50:58 +05:30
parent 145c3b8ad0
commit f74e2c9da1
3 changed files with 24 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/FilePicker.tsx
View File

@@ -359,7 +359,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
</div>
<div className="border border-[#EEE6FF78] rounded-lg dark:border-[#6A6A6A] mt-3">
<div className="border-b border-[#EEE6FF78] dark:border-[#6A6A6A] rounded-t-lg">
<div className=" border-[#EEE6FF78] dark:border-[#6A6A6A] rounded-t-lg">
{/* Breadcrumb navigation */}
<div className="px-4 pt-4 bg-[#EEE6FF78] dark:bg-[#2A262E] rounded-t-lg">
<div className="flex items-center gap-1 mb-2">
@@ -396,7 +396,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
{/* Selected Files Message */}
<div className="pb-3 text-sm text-gray-600 dark:text-gray-400">
{selectedFiles.length} file(s) selected
{selectedFiles.length + selectedFolders.length} selected
</div>
</div>
@@ -407,18 +407,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
className="scrollbar-thin md:w-4xl lg:w-5xl"
bordered={false}
>
{isLoading && files.length === 0 ? (
<div className="flex items-center justify-center h-full">
<div className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent"></div>
Loading files...
</div>
</div>
) : files.length === 0 ? (
<div className="flex items-center justify-center h-full text-sm text-gray-500 dark:text-gray-400">
No files found in your {getProviderConfig(provider).displayName}
</div>
) : (
{(
<>
<Table minWidth="1200px">
<TableHead>
@@ -433,7 +422,6 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
{files.map((file, index) => (
<TableRow
key={`${file.id}-${index}`}
className={selectedFiles.includes(file.id) ? 'bg-blue-50 dark:bg-blue-900/20' : ''}
onClick={() => {
if (isFolder(file)) {
handleFolderClick(file.id, file.name);
@@ -444,7 +432,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
>
<TableCell width="40px" align="center">
<div
className="flex h-5 w-5 shrink-0 items-center justify-center border border-[#EEE6FF78] p-[0.5px] dark:border-[#6A6A6A] cursor-pointer mx-auto"
className="flex h-5 w-5 text-sm shrink-0 items-center justify-center border border-[#EEE6FF78] p-[0.5px] dark:border-[#6A6A6A] cursor-pointer mx-auto"
onClick={(e) => {
e.stopPropagation();
handleFileSelect(file.id, isFolder(file));
@@ -471,10 +459,10 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
<span className="truncate">{file.name}</span>
</div>
</TableCell>
<TableCell>
<TableCell className='text-xs'>
{formatDate(file.modifiedTime)}
</TableCell>
<TableCell>
<TableCell className='text-xs'>
{file.size ? formatBytes(file.size) : '-'}
</TableCell>
</TableRow>
@@ -482,7 +470,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
</TableBody>
</Table>
{isLoading && files.length > 0 && (
{isLoading && (
<div className="flex items-center justify-center p-4 border-t border-[#EEE6FF78] dark:border-[#6A6A6A]">
<div className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent"></div>

6
frontend/src/components/Table.tsx
View File

@@ -44,7 +44,7 @@ const TableContainer = React.forwardRef<HTMLDivElement, TableContainerProps>(({
<div className={`relative rounded-[6px] ${className}`}>
<div
ref={ref}
className={`w-full overflow-x-auto rounded-[6px] bg-gray-100 dark:bg-[#27282D] ${bordered ? 'border border-[#EEE6FF78] dark:border-[#6A6A6A]' : ''}`}
className={`w-full overflow-x-auto rounded-[6px] bg-transparent ${bordered ? 'border border-[#D7D7D7] dark:border-[#6A6A6A]' : ''}`}
style={{
maxHeight: height === 'auto' ? undefined : height,
overflowY: height === 'auto' ? 'hidden' : 'auto'
@@ -89,7 +89,7 @@ const TableBody: React.FC<TableHeadProps> = ({ children, className = '' }) => {
};
const TableRow: React.FC<TableRowProps> = ({ children, className = '', onClick }) => {
const baseClasses = "border-b border-[#EEE6FF78] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]";
const baseClasses = "border-b border-[#D7D7D7] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]";
const cursorClass = onClick ? "cursor-pointer" : "";
return (
@@ -117,7 +117,7 @@ const TableHeader: React.FC<TableCellProps> = ({
}
};
const baseClasses = `px-2 py-3 text-sm font-medium text-gray-700 lg:px-3 dark:text-[#59636E] border-t border-b border-[#EEE6FF78] dark:border-[#6A6A6A] relative box-border ${getAlignmentClass()}`;
const baseClasses = `px-2 py-3 text-sm font-medium text-gray-700 lg:px-3 dark:text-[#59636E] border-t border-b border-[#D7D7D7] dark:border-[#6A6A6A] relative box-border ${getAlignmentClass()}`;
const widthClasses = minWidth ? minWidth : '';
return (

24
frontend/src/upload/Upload.tsx
View File

@@ -259,13 +259,13 @@ function Upload({
const { t } = useTranslation();
const setTimeoutRef = useRef<number | null>(null);
const ingestorOptions: { label: string; value: IngestorType; icon: string }[] = [
{ label: 'Upload File', value: 'local_file', icon: FileUploadIcon },
{ label: 'Crawler', value: 'crawler', icon: CrawlerIcon },
{ label: 'Link', value: 'url', icon: UrlIcon },
{ label: 'GitHub', value: 'github', icon: GithubIcon },
{ label: 'Reddit', value: 'reddit', icon: RedditIcon },
{ label: 'Google Drive', value: 'google_drive', icon: DriveIcon },
const ingestorOptions: { label: string; value: IngestorType; icon: string; heading: string }[] = [
{ label: 'Upload File', value: 'local_file', icon: FileUploadIcon, heading: 'Upload new document' },
{ label: 'Crawler', value: 'crawler', icon: CrawlerIcon, heading: 'Add content with Web Crawler' },
{ label: 'Link', value: 'url', icon: UrlIcon, heading: 'Add content from URL' },
{ label: 'GitHub', value: 'github', icon: GithubIcon, heading: 'Add content from GitHub' },
{ label: 'Reddit', value: 'reddit', icon: RedditIcon, heading: 'Add content from Reddit' },
{ label: 'Google Drive', value: 'google_drive', icon: DriveIcon, heading: 'Upload from Google Drive' },
];
const sourceDocs = useSelector(selectSourceDocs);
@@ -672,11 +672,11 @@ function Upload({
const renderIngestorSelection = () => {
return (
<div className="grid grid-cols-3 gap-4 w-full">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
{ingestorOptions.map((option) => (
<div
key={option.value}
className={`relative flex flex-col justify-between rounded-2xl cursor-pointer w-[181px] h-[91.2px] border border-solid pt-[21.1px] pr-[21px] pb-[15px] pl-[21px] gap-[13.1px] transition-colors duration-300 ease-out ${
className={`relative flex flex-col justify-between rounded-2xl cursor-pointer w-full max-w-[181px] h-[91.2px] border border-solid pt-[21.1px] pr-[21px] pb-[15px] pl-[21px] gap-[13.1px] transition-colors duration-300 ease-out mx-auto ${
ingestor.type === option.value
? 'bg-[#7D54D1] text-white border-[#7D54D1] shadow-[0px_0px_8px_0px_#FFFFFF1A] dark:shadow-[0px_0px_8px_0px_#FFFFFF1A]'
: 'bg-transparent hover:bg-[#ECECEC]/30 dark:hover:bg-[#383838]/30 border-[#D7D7D7] dark:border-[#4A4A4A] shadow-[0px_4px_40px_-3px_#0000001A]'
@@ -732,6 +732,10 @@ function Upload({
<span>Back</span>
</button>
<h2 className="font-inter font-semibold text-[22px] leading-[28px] tracking-[0.15px] text-black dark:text-[#E0E0E0]">
{ingestor.type && ingestorOptions.find(option => option.value === ingestor.type)?.heading}
</h2>
<Input
type="text"
colorVariant="silver"
@@ -746,7 +750,7 @@ function Upload({
placeholder="Name"
required={true}
labelBgClassName="bg-white dark:bg-charleston-green-2"
className="max-w-xs"
className={ingestor.type === 'google_drive' ? "max-w-xs" : "w-full"}
/>
{renderFormFields()}
</div>