mirror of
https://github.com/arc53/DocsGPT.git
synced 2025-11-29 16:43:16 +00:00
(feat:chunks) use common header, navigate
This commit is contained in:
@@ -151,39 +151,39 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
|
||||
|
||||
return (
|
||||
<div className="mt-8 flex flex-col">
|
||||
<div className="mb-4 flex items-center">
|
||||
{showHeader && (
|
||||
{showHeader && (
|
||||
<div className="mb-4 flex items-center">
|
||||
<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]"
|
||||
onClick={handleGoBack}
|
||||
>
|
||||
<img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="flex items-center">
|
||||
<img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
|
||||
<span className="text-[#7D54D1] font-semibold text-base leading-6">
|
||||
{documentName}
|
||||
</span>
|
||||
<div className="flex items-center">
|
||||
<img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
|
||||
<span className="text-[#7D54D1] font-semibold text-base leading-6">
|
||||
{documentName}
|
||||
</span>
|
||||
|
||||
{pathParts.length > 0 && (
|
||||
<>
|
||||
<span className="mx-1 text-gray-500">/</span>
|
||||
{pathParts.map((part, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300">
|
||||
{part}
|
||||
</span>
|
||||
{index < pathParts.length - 1 && (
|
||||
<span className="mx-1 text-gray-500">/</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{pathParts.length > 0 && (
|
||||
<>
|
||||
<span className="mx-1 text-gray-500">/</span>
|
||||
{pathParts.map((part, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300">
|
||||
{part}
|
||||
</span>
|
||||
{index < pathParts.length - 1 && (
|
||||
<span className="mx-1 text-gray-500">/</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="my-3 flex items-center justify-between gap-3">
|
||||
<div className="flex-1 flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
|
||||
|
||||
@@ -114,7 +114,9 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
|
||||
};
|
||||
|
||||
const handleBackNavigation = () => {
|
||||
if (currentPath.length === 0) {
|
||||
if (selectedFile) {
|
||||
setSelectedFile(null);
|
||||
} else if (currentPath.length === 0) {
|
||||
if (onBackToDocuments) {
|
||||
onBackToDocuments();
|
||||
}
|
||||
@@ -187,7 +189,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
|
||||
>
|
||||
<img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
|
||||
</button>
|
||||
|
||||
|
||||
<div className="flex items-center">
|
||||
<img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
|
||||
<span className="text-purple-30 font-medium">{sourceName}</span>
|
||||
@@ -206,6 +208,14 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{selectedFile && (
|
||||
<>
|
||||
<span className="mx-1 text-gray-500">/</span>
|
||||
<span className="text-gray-700 dark:text-gray-300">
|
||||
{selectedFile.name}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -243,26 +253,26 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
|
||||
const parentRow =
|
||||
currentPath.length > 0
|
||||
? [
|
||||
<tr
|
||||
key="parent-dir"
|
||||
className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
|
||||
onClick={navigateUp}
|
||||
>
|
||||
<td className="px-4 py-2">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={FolderIcon}
|
||||
alt="Parent folder"
|
||||
className="mr-2 h-4 w-4"
|
||||
/>
|
||||
<span className="text-sm dark:text-[#E0E0E0]">..</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
|
||||
<td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
|
||||
<td className="w-10 px-4 py-2 text-sm"></td>
|
||||
</tr>,
|
||||
]
|
||||
<tr
|
||||
key="parent-dir"
|
||||
className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
|
||||
onClick={navigateUp}
|
||||
>
|
||||
<td className="px-4 py-2">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={FolderIcon}
|
||||
alt="Parent folder"
|
||||
className="mr-2 h-4 w-4"
|
||||
/>
|
||||
<span className="text-sm dark:text-[#E0E0E0]">..</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
|
||||
<td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
|
||||
<td className="w-10 px-4 py-2 text-sm"></td>
|
||||
</tr>,
|
||||
]
|
||||
: [];
|
||||
|
||||
// Render directories first, then files
|
||||
@@ -377,16 +387,17 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-4">{renderPathNavigation()}</div>
|
||||
{selectedFile ? (
|
||||
<DocumentChunks
|
||||
documentId={docId}
|
||||
documentName={selectedFile.name}
|
||||
documentName={sourceName}
|
||||
handleGoBack={() => setSelectedFile(null)}
|
||||
path={selectedFile.id}
|
||||
showHeader={false}
|
||||
/>
|
||||
) : (
|
||||
<div className="mt-8 flex flex-col">
|
||||
<div className="mb-4">{renderPathNavigation()}</div>
|
||||
|
||||
<div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
|
||||
<table className="min-w-full table-fixed bg-transparent">
|
||||
|
||||
Reference in New Issue
Block a user