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

fix: update token selector in FileTreeComponent

Browse Source
This commit is contained in:
Alex
2025-08-06 12:44:21 +01:00
parent 0b2736f454
commit 0a8cdbd7f1
1 changed files with 215 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
frontend/src/components/FileTreeComponent.tsx
View File

@@ -1,6 +1,7 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { selectToken } from '../preferences/preferenceSlice';
import Chunks from './Chunks'; import Chunks from './Chunks';
import ContextMenu, { MenuOption } from './ContextMenu'; import ContextMenu, { MenuOption } from './ContextMenu';
import userService from '../api/services/userService'; import userService from '../api/services/userService';
@@ -49,7 +50,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
const [directoryStructure, setDirectoryStructure] = const [directoryStructure, setDirectoryStructure] =
useState<DirectoryStructure | null>(null); useState<DirectoryStructure | null>(null);
const [currentPath, setCurrentPath] = useState<string[]>([]); const [currentPath, setCurrentPath] = useState<string[]>([]);
const token = useSelector((state: any) => state.auth?.token); const token = useSelector(selectToken);
const [activeMenuId, setActiveMenuId] = useState<string | null>(null); const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
const menuRefs = useRef<{ const menuRefs = useRef<{
[key: string]: React.RefObject<HTMLDivElement | null>; [key: string]: React.RefObject<HTMLDivElement | null>;
@@ -61,10 +62,17 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState<SearchResult[]>([]); const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
const searchDropdownRef = useRef<HTMLDivElement>(null); const searchDropdownRef = useRef<HTMLDivElement>(null);
const currentOpRef = useRef<null | 'add' | 'remove' | 'remove_directory'>(null); const currentOpRef = useRef<null | 'add' | 'remove' | 'remove_directory'>(
null,
);
const [deleteModalState, setDeleteModalState] = useState<'ACTIVE' | 'INACTIVE'>('INACTIVE'); const [deleteModalState, setDeleteModalState] = useState<
const [itemToDelete, setItemToDelete] = useState<{ name: string; isFile: boolean } | null>(null); 'ACTIVE' | 'INACTIVE'
>('INACTIVE');
const [itemToDelete, setItemToDelete] = useState<{
name: string;
isFile: boolean;
} | null>(null);
type QueuedOperation = { type QueuedOperation = {
operation: 'add' | 'remove' | 'remove_directory'; operation: 'add' | 'remove' | 'remove_directory';
@@ -84,7 +92,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
setSearchResults([]); setSearchResults([]);
}, },
[], [],
false false,
); );
const handleFileClick = (fileName: string) => { const handleFileClick = (fileName: string) => {
@@ -144,7 +152,10 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
try { try {
structure = JSON.parse(structure); structure = JSON.parse(structure);
} catch (e) { } catch (e) {
console.error('Error parsing directory structure in getCurrentDirectory:', e); console.error(
'Error parsing directory structure in getCurrentDirectory:',
e,
);
return {}; return {};
} }
} }
@@ -155,7 +166,11 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
let current: any = structure; let current: any = structure;
for (const dir of currentPath) { for (const dir of currentPath) {
if (current[dir] && typeof current[dir] === 'object' && !current[dir].type) { if (
current[dir] &&
typeof current[dir] === 'object' &&
!current[dir].type
) {
current = current[dir]; current = current[dir];
} else { } else {
return {}; return {};
@@ -231,13 +246,13 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
return options; return options;
}; };
const confirmDeleteItem = (name: string, isFile: boolean) => { const confirmDeleteItem = (name: string, isFile: boolean) => {
setItemToDelete({ name, isFile }); setItemToDelete({ name, isFile });
setDeleteModalState('ACTIVE'); setDeleteModalState('ACTIVE');
setActiveMenuId(null); setActiveMenuId(null);
}; };
const handleConfirmedDelete = async () => { const handleConfirmedDelete = async () => {
if (itemToDelete) { if (itemToDelete) {
await handleDeleteFile(itemToDelete.name, itemToDelete.isFile); await handleDeleteFile(itemToDelete.name, itemToDelete.isFile);
@@ -245,12 +260,12 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
setItemToDelete(null); setItemToDelete(null);
} }
}; };
const handleCancelDelete = () => { const handleCancelDelete = () => {
setDeleteModalState('INACTIVE'); setDeleteModalState('INACTIVE');
setItemToDelete(null); setItemToDelete(null);
}; };
const manageSource = async ( const manageSource = async (
operation: 'add' | 'remove' | 'remove_directory', operation: 'add' | 'remove' | 'remove_directory',
files?: File[] | null, files?: File[] | null,
@@ -277,36 +292,48 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
} else if (operation === 'remove_directory' && directoryPath) { } else if (operation === 'remove_directory' && directoryPath) {
formData.append('directory_path', directoryPath); formData.append('directory_path', directoryPath);
} }
const response = await userService.manageSourceFiles(formData, token); const response = await userService.manageSourceFiles(formData, token);
const result = await response.json(); const result = await response.json();
if (result.success && result.reingest_task_id) { if (result.success && result.reingest_task_id) {
if (operation === 'add') { if (operation === 'add') {
console.log('Files uploaded successfully:', result.added_files); console.log('Files uploaded successfully:', result.added_files);
} else if (operation === 'remove') { } else if (operation === 'remove') {
console.log('Files deleted successfully:', result.removed_files); console.log('Files deleted successfully:', result.removed_files);
} else if (operation === 'remove_directory') { } else if (operation === 'remove_directory') {
console.log('Directory deleted successfully:', result.removed_directory); console.log(
'Directory deleted successfully:',
result.removed_directory,
);
} }
console.log('Reingest task started:', result.reingest_task_id); console.log('Reingest task started:', result.reingest_task_id);
const maxAttempts = 30; const maxAttempts = 30;
const pollInterval = 2000; const pollInterval = 2000;
for (let attempt = 0; attempt < maxAttempts; attempt++) { for (let attempt = 0; attempt < maxAttempts; attempt++) {
try { try {
const statusResponse = await userService.getTaskStatus(result.reingest_task_id, token); const statusResponse = await userService.getTaskStatus(
result.reingest_task_id,
token,
);
const statusData = await statusResponse.json(); const statusData = await statusResponse.json();
console.log(`Task status (attempt ${attempt + 1}):`, statusData.status); console.log(
`Task status (attempt ${attempt + 1}):`,
statusData.status,
);
if (statusData.status === 'SUCCESS') { if (statusData.status === 'SUCCESS') {
console.log('Task completed successfully'); console.log('Task completed successfully');
const structureResponse = await userService.getDirectoryStructure(docId, token); const structureResponse = await userService.getDirectoryStructure(
docId,
token,
);
const structureData = await structureResponse.json(); const structureData = await structureResponse.json();
if (structureData && structureData.directory_structure) { if (structureData && structureData.directory_structure) {
setDirectoryStructure(structureData.directory_structure); setDirectoryStructure(structureData.directory_structure);
currentOpRef.current = null; currentOpRef.current = null;
@@ -317,19 +344,31 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
console.error('Task failed'); console.error('Task failed');
break; break;
} }
await new Promise(resolve => setTimeout(resolve, pollInterval)); await new Promise((resolve) => setTimeout(resolve, pollInterval));
} catch (error) { } catch (error) {
console.error('Error polling task status:', error); console.error('Error polling task status:', error);
break; break;
} }
} }
} else { } else {
throw new Error(`Failed to ${operation} ${operation === 'remove_directory' ? 'directory' : 'file(s)'}`); throw new Error(
`Failed to ${operation} ${operation === 'remove_directory' ? 'directory' : 'file(s)'}`,
);
} }
} catch (error) { } catch (error) {
const actionText = operation === 'add' ? 'uploading' : operation === 'remove_directory' ? 'deleting directory' : 'deleting file(s)'; const actionText =
const errorText = operation === 'add' ? 'upload' : operation === 'remove_directory' ? 'delete directory' : 'delete file(s)'; operation === 'add'
? 'uploading'
: operation === 'remove_directory'
? 'deleting directory'
: 'deleting file(s)';
const errorText =
operation === 'add'
? 'upload'
: operation === 'remove_directory'
? 'delete directory'
: 'delete file(s)';
console.error(`Error ${actionText}:`, error); console.error(`Error ${actionText}:`, error);
setError(`Failed to ${errorText}`); setError(`Failed to ${errorText}`);
} finally { } finally {
@@ -371,13 +410,18 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
const fileInput = document.createElement('input'); const fileInput = document.createElement('input');
fileInput.type = 'file'; fileInput.type = 'file';
fileInput.multiple = true; fileInput.multiple = true;
fileInput.accept = '.rst,.md,.pdf,.txt,.docx,.csv,.epub,.html,.mdx,.json,.xlsx,.pptx,.png,.jpg,.jpeg'; fileInput.accept =
'.rst,.md,.pdf,.txt,.docx,.csv,.epub,.html,.mdx,.json,.xlsx,.pptx,.png,.jpg,.jpeg';
fileInput.onchange = async (event) => { fileInput.onchange = async (event) => {
const fileList = (event.target as HTMLInputElement).files; const fileList = (event.target as HTMLInputElement).files;
if (!fileList || fileList.length === 0) return; if (!fileList || fileList.length === 0) return;
const files = Array.from(fileList); const files = Array.from(fileList);
enqueueOperation({ operation: 'add', files, parentDirPath: currentPath.join('/') }); enqueueOperation({
operation: 'add',
files,
parentDirPath: currentPath.join('/'),
});
}; };
fileInput.click(); fileInput.click();
@@ -390,14 +434,17 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
if (isFile) { if (isFile) {
enqueueOperation({ operation: 'remove', filePath: itemPath }); enqueueOperation({ operation: 'remove', filePath: itemPath });
} else { } else {
enqueueOperation({ operation: 'remove_directory', directoryPath: itemPath }); enqueueOperation({
operation: 'remove_directory',
directoryPath: itemPath,
});
} }
}; };
const renderPathNavigation = () => { const renderPathNavigation = () => {
return ( return (
<div className="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-3"> <div className="mb-4 flex flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center w-full sm:w-auto"> <div className="flex w-full items-center sm:w-auto">
<button <button
className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]" className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
onClick={handleBackNavigation} onClick={handleBackNavigation}
@@ -405,19 +452,27 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
<img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" /> <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
</button> </button>
<div className="flex items-center flex-wrap"> <div className="flex flex-wrap items-center">
<img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" /> <img
<span className="text-purple-30 font-medium break-words">{sourceName}</span> src={OutlineSource}
alt="source"
className="mr-2 h-5 w-5 flex-shrink-0"
/>
<span className="text-purple-30 font-medium break-words">
{sourceName}
</span>
{currentPath.length > 0 && ( {currentPath.length > 0 && (
<> <>
<span className="mx-1 text-gray-500 flex-shrink-0">/</span> <span className="mx-1 flex-shrink-0 text-gray-500">/</span>
{currentPath.map((dir, index) => ( {currentPath.map((dir, index) => (
<React.Fragment key={index}> <React.Fragment key={index}>
<span className="text-gray-700 dark:text-gray-300 break-words"> <span className="break-words text-gray-700 dark:text-gray-300">
{dir} {dir}
</span> </span>
{index < currentPath.length - 1 && ( {index < currentPath.length - 1 && (
<span className="mx-1 text-gray-500 flex-shrink-0">/</span> <span className="mx-1 flex-shrink-0 text-gray-500">
/
</span>
)} )}
</React.Fragment> </React.Fragment>
))} ))}
@@ -425,8 +480,8 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
)} )}
{selectedFile && ( {selectedFile && (
<> <>
<span className="mx-1 text-gray-500 flex-shrink-0">/</span> <span className="mx-1 flex-shrink-0 text-gray-500">/</span>
<span className="text-gray-700 dark:text-gray-300 break-words"> <span className="break-words text-gray-700 dark:text-gray-300">
{selectedFile.name} {selectedFile.name}
</span> </span>
</> </>
@@ -435,17 +490,29 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
</div> </div>
{!selectedFile && ( {!selectedFile && (
<div className="flex items-center gap-2 w-full sm:w-auto"> <div className="flex w-full items-center gap-2 sm:w-auto">
{(processingRef.current || queueLength > 0) && ( {(processingRef.current || queueLength > 0) && (
<span className="text-xs text-gray-600 dark:text-gray-400"> <span className="text-xs text-gray-600 dark:text-gray-400">
{processingRef.current ? (currentOpRef.current === 'add' ? 'Uploading…' : 'Deleting…') : null} {processingRef.current
{queueLength > 0 ? `${processingRef.current ? ' • ' : ''}Queued: ${queueLength}` : ''} ? currentOpRef.current === 'add'
? 'Uploading…'
: 'Deleting…'
: null}
{queueLength > 0
? `${processingRef.current ? ' • ' : ''}Queued: ${queueLength}`
: ''}
</span> </span>
)} )}
<button <button
onClick={handleAddFile} onClick={handleAddFile}
className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] w-full sm:w-auto min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white" className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] w-full min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white sm:w-auto"
title={processingRef.current ? (currentOpRef.current === 'add' ? 'Uploading files...' : 'Deleting...') : 'Add file'} title={
processingRef.current
? currentOpRef.current === 'add'
? 'Uploading files...'
: 'Deleting...'
: 'Add file'
}
> >
Add file Add file
</button> </button>
@@ -487,26 +554,32 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
const parentRow = const parentRow =
currentPath.length > 0 currentPath.length > 0
? [ ? [
<tr <tr
key="parent-dir" key="parent-dir"
className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]" className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
onClick={navigateUp} onClick={navigateUp}
> >
<td className="px-2 lg:px-4 py-2"> <td className="px-2 py-2 lg:px-4">
<div className="flex items-center"> <div className="flex items-center">
<img <img
src={FolderIcon} src={FolderIcon}
alt={t('settings.sources.parentFolderAlt')} alt={t('settings.sources.parentFolderAlt')}
className="mr-2 h-4 w-4 flex-shrink-0" className="mr-2 h-4 w-4 flex-shrink-0"
/> />
<span className="text-sm dark:text-[#E0E0E0] truncate">..</span> <span className="truncate text-sm dark:text-[#E0E0E0]">
</div> ..
</td> </span>
<td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td> </div>
<td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td> </td>
<td className="w-10 px-2 lg:px-4 py-2 text-sm"></td> <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
</tr>, -
] </td>
<td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
-
</td>
<td className="w-10 px-2 py-2 text-sm lg:px-4"></td>
</tr>,
]
: []; : [];
// Render directories first, then files // Render directories first, then files
@@ -523,21 +596,27 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]" className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
onClick={() => navigateToDirectory(name)} onClick={() => navigateToDirectory(name)}
> >
<td className="px-2 lg:px-4 py-2"> <td className="px-2 py-2 lg:px-4">
<div className="flex items-center min-w-0"> <div className="flex min-w-0 items-center">
<img src={FolderIcon} alt={t('settings.sources.folderAlt')} className="mr-2 h-4 w-4 flex-shrink-0" /> <img
<span className="text-sm dark:text-[#E0E0E0] truncate">{name}</span> src={FolderIcon}
alt={t('settings.sources.folderAlt')}
className="mr-2 h-4 w-4 flex-shrink-0"
/>
<span className="truncate text-sm dark:text-[#E0E0E0]">
{name}
</span>
</div> </div>
</td> </td>
<td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]"> <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
{dirStats.totalTokens > 0 {dirStats.totalTokens > 0
? dirStats.totalTokens.toLocaleString() ? dirStats.totalTokens.toLocaleString()
: '-'} : '-'}
</td> </td>
<td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]"> <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
{dirStats.totalSize > 0 ? formatBytes(dirStats.totalSize) : '-'} {dirStats.totalSize > 0 ? formatBytes(dirStats.totalSize) : '-'}
</td> </td>
<td className="w-10 px-2 lg:px-4 py-2 text-sm"> <td className="w-10 px-2 py-2 text-sm lg:px-4">
<div ref={menuRef} className="relative"> <div ref={menuRef} className="relative">
<button <button
onClick={(e) => handleMenuClick(e, itemId)} onClick={(e) => handleMenuClick(e, itemId)}
@@ -575,19 +654,25 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]" className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
onClick={() => handleFileClick(name)} onClick={() => handleFileClick(name)}
> >
<td className="px-2 lg:px-4 py-2"> <td className="px-2 py-2 lg:px-4">
<div className="flex items-center min-w-0"> <div className="flex min-w-0 items-center">
<img src={FileIcon} alt={t('settings.sources.fileAlt')} className="mr-2 h-4 w-4 flex-shrink-0" /> <img
<span className="text-sm dark:text-[#E0E0E0] truncate">{name}</span> src={FileIcon}
alt={t('settings.sources.fileAlt')}
className="mr-2 h-4 w-4 flex-shrink-0"
/>
<span className="truncate text-sm dark:text-[#E0E0E0]">
{name}
</span>
</div> </div>
</td> </td>
<td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]"> <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
{node.token_count?.toLocaleString() || '-'} {node.token_count?.toLocaleString() || '-'}
</td> </td>
<td className="px-2 md:px-4 py-2 text-sm dark:text-[#E0E0E0]"> <td className="px-2 py-2 text-sm md:px-4 dark:text-[#E0E0E0]">
{node.size_bytes ? formatBytes(node.size_bytes) : '-'} {node.size_bytes ? formatBytes(node.size_bytes) : '-'}
</td> </td>
<td className="w-10 px-2 lg:px-4 py-2 text-sm"> <td className="w-10 px-2 py-2 text-sm lg:px-4">
<div ref={menuRef} className="relative"> <div ref={menuRef} className="relative">
<button <button
onClick={(e) => handleMenuClick(e, itemId)} onClick={(e) => handleMenuClick(e, itemId)}
@@ -619,7 +704,11 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
}; };
const currentDirectory = getCurrentDirectory(); const currentDirectory = getCurrentDirectory();
const searchFiles = (query: string, structure: DirectoryStructure, currentPath: string[] = []): SearchResult[] => { const searchFiles = (
query: string,
structure: DirectoryStructure,
currentPath: string[] = [],
): SearchResult[] => {
let results: SearchResult[] = []; let results: SearchResult[] = [];
Object.entries(structure).forEach(([name, node]) => { Object.entries(structure).forEach(([name, node]) => {
@@ -629,29 +718,34 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
results.push({ results.push({
name, name,
path: fullPath, path: fullPath,
isFile: !!node.type isFile: !!node.type,
}); });
} }
if (!node.type) { if (!node.type) {
// If it's a directory, search recursively // If it's a directory, search recursively
results = [...results, ...searchFiles(query, node as DirectoryStructure, [...currentPath, name])]; results = [
...results,
...searchFiles(query, node as DirectoryStructure, [
...currentPath,
name,
]),
];
} }
}); });
return results; return results;
}; };
const handleSearchSelect = (result: SearchResult) => { const handleSearchSelect = (result: SearchResult) => {
if (result.isFile) { if (result.isFile) {
const pathParts = result.path.split('/'); const pathParts = result.path.split('/');
const fileName = pathParts.pop() || ''; const fileName = pathParts.pop() || '';
setCurrentPath(pathParts); setCurrentPath(pathParts);
setSelectedFile({ setSelectedFile({
id: result.path, id: result.path,
name: fileName name: fileName,
}); });
} else { } else {
setCurrentPath(result.path.split('/')); setCurrentPath(result.path.split('/'));
@@ -670,25 +764,29 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
onChange={(e) => { onChange={(e) => {
setSearchQuery(e.target.value); setSearchQuery(e.target.value);
if (directoryStructure) { if (directoryStructure) {
setSearchResults(searchFiles(e.target.value, directoryStructure)); setSearchResults(
searchFiles(e.target.value, directoryStructure),
);
} }
}} }}
placeholder={t('settings.sources.searchFiles')} placeholder={t('settings.sources.searchFiles')}
className={`w-full px-4 py-2 pl-10 border border-[#D1D9E0] dark:border-[#6A6A6A] ${ className={`w-full border border-[#D1D9E0] px-4 py-2 pl-10 dark:border-[#6A6A6A] ${
searchQuery ? 'rounded-t-md rounded-b-none border-b-0' : 'rounded-md' searchQuery
} bg-transparent dark:text-[#E0E0E0] focus:outline-none`} ? 'rounded-t-md rounded-b-none border-b-0'
: 'rounded-md'
} bg-transparent focus:outline-none dark:text-[#E0E0E0]`}
/> />
<img <img
src={SearchIcon} src={SearchIcon}
alt="Search" alt="Search"
className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 opacity-60" className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform opacity-60"
/> />
{searchQuery && ( {searchQuery && (
<div className="absolute z-10 w-full border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-b-md bg-white dark:bg-[#1F2023] shadow-lg max-h-[calc(100vh-200px)] overflow-y-auto"> <div className="absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-y-auto rounded-b-md border border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023]">
{searchResults.length === 0 ? ( {searchResults.length === 0 ? (
<div className="text-sm text-gray-500 dark:text-gray-400 text-center py-2"> <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
{t('settings.sources.noResults')} {t('settings.sources.noResults')}
</div> </div>
) : ( ) : (
@@ -697,14 +795,20 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
key={index} key={index}
onClick={() => handleSearchSelect(result)} onClick={() => handleSearchSelect(result)}
title={result.path} title={result.path}
className={`flex items-center px-3 py-2 cursor-pointer hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${ className={`flex cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
index !== searchResults.length - 1 ? "border-b border-[#D1D9E0] dark:border-[#6A6A6A]" : "" index !== searchResults.length - 1
? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
: ''
}`} }`}
> >
<img <img
src={result.isFile ? FileIcon : FolderIcon} src={result.isFile ? FileIcon : FolderIcon}
alt={result.isFile ? t('settings.sources.fileAlt') : t('settings.sources.folderAlt')} alt={
className="flex-shrink-0 w-4 h-4 mr-2" result.isFile
? t('settings.sources.fileAlt')
: t('settings.sources.folderAlt')
}
className="mr-2 h-4 w-4 flex-shrink-0"
/> />
<span className="text-sm dark:text-[#E0E0E0]"> <span className="text-sm dark:text-[#E0E0E0]">
{result.path.split('/').pop() || result.path} {result.path.split('/').pop() || result.path}
@@ -734,34 +838,34 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
</div> </div>
</div> </div>
) : ( ) : (
<div className="flex flex-col w-full max-w-full overflow-hidden"> <div className="flex w-full max-w-full flex-col overflow-hidden">
<div className="mb-4"> <div className="mb-4">{renderPathNavigation()}</div>
{renderPathNavigation()}
</div>
<div className="flex gap-4 min-w-0"> <div className="flex min-w-0 gap-4">
{/* Left side: Search dropdown */} {/* Left side: Search dropdown */}
<div className="hidden lg:block flex-shrink-0"> <div className="hidden flex-shrink-0 lg:block">
{renderFileSearch()} {renderFileSearch()}
</div> </div>
{/* Right side: File table */} {/* Right side: File table */}
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]"> <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
<table className="w-full table-auto bg-transparent min-w-[600px]"> <table className="w-full min-w-[600px] table-auto bg-transparent">
<thead className="bg-gray-100 dark:bg-[#27282D]"> <thead className="bg-gray-100 dark:bg-[#27282D]">
<tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]"> <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
<th className="min-w-[200px] px-2 lg:px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]"> <th className="min-w-[200px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
{t('settings.sources.fileName')} {t('settings.sources.fileName')}
</th> </th>
<th className="min-w-[80px] px-2 lg:px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]"> <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
{t('settings.sources.tokens')} {t('settings.sources.tokens')}
</th> </th>
<th className="min-w-[80px] px-2 lg:px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]"> <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
{t('settings.sources.size')} {t('settings.sources.size')}
</th> </th>
<th className="w-[60px] px-2 lg:px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]"> <th className="w-[60px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
<span className="sr-only">{t('settings.sources.actions')}</span> <span className="sr-only">
{t('settings.sources.actions')}
</span>
</th> </th>
</tr> </tr>
</thead> </thead>
@@ -792,4 +896,3 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
}; };
export default FileTreeComponent; export default FileTreeComponent;