(feat:nested source view) file tree, chunks display

frontend/src/components/DocumentChunks.tsx

@@ -0,0 +1,273 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { selectToken } from '../preferences/preferenceSlice';
+import { useDarkTheme, useLoaderState } from '../hooks';
+import userService from '../api/services/userService';
+import ArrowLeft from '../assets/arrow-left.svg';
+import NoFilesIcon from '../assets/no-files.svg';
+import NoFilesDarkIcon from '../assets/no-files-dark.svg';
+import Spinner from '../components/Spinner';
+import Input from '../components/Input';
+import ChunkModal from '../modals/ChunkModal';
+import { ActiveState } from '../models/misc';
+import { ChunkType } from '../settings/types';
+
+interface DocumentChunksProps {
+  documentId: string;
+  documentName?: string;
+  handleGoBack: () => void;
+  showHeader?: boolean;
+  path?: string;
+}
+
+const DocumentChunks: React.FC<DocumentChunksProps> = ({
+  documentId,
+  documentName,
+  handleGoBack,
+  showHeader = true,
+  path,
+}) => {
+  const { t } = useTranslation();
+  const token = useSelector(selectToken);
+  const [isDarkTheme] = useDarkTheme();
+  const [paginatedChunks, setPaginatedChunks] = useState<ChunkType[]>([]);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(5);
+  const [totalChunks, setTotalChunks] = useState(0);
+  const [loading, setLoading] = useLoaderState(true);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [addModal, setAddModal] = useState<ActiveState>('INACTIVE');
+  const [editModal, setEditModal] = useState<{
+    state: ActiveState;
+    chunk: ChunkType | null;
+  }>({ state: 'INACTIVE', chunk: null });
+
+  const fetchChunks = () => {
+    setLoading(true);
+    try {
+      userService
+        .getDocumentChunks(documentId, page, perPage, token, path)
+        .then((response) => {
+          if (!response.ok) {
+            setLoading(false);
+            setPaginatedChunks([]);
+            throw new Error('Failed to fetch chunks data');
+          }
+          return response.json();
+        })
+        .then((data) => {
+          setPage(data.page);
+          setPerPage(data.per_page);
+          setTotalChunks(data.total);
+          setPaginatedChunks(data.chunks);
+          setLoading(false);
+        });
+    } catch (e) {
+      console.log(e);
+      setLoading(false);
+    }
+  };
+
+  const handleAddChunk = (title: string, text: string) => {
+    try {
+      userService
+        .addChunk(
+          {
+            id: documentId,
+            text: text,
+            metadata: {
+              title: title,
+            },
+          },
+          token,
+        )
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('Failed to add chunk');
+          }
+          fetchChunks();
+        });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleUpdateChunk = (title: string, text: string, chunk: ChunkType) => {
+    try {
+      userService
+        .updateChunk(
+          {
+            id: documentId,
+            chunk_id: chunk.doc_id,
+            text: text,
+            metadata: {
+              title: title,
+            },
+          },
+          token,
+        )
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('Failed to update chunk');
+          }
+          fetchChunks();
+        });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleDeleteChunk = (chunk: ChunkType) => {
+    try {
+      userService
+        .deleteChunk(documentId, chunk.doc_id, token)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('Failed to delete chunk');
+          }
+          setEditModal({ state: 'INACTIVE', chunk: null });
+          fetchChunks();
+        });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  useEffect(() => {
+    fetchChunks();
+  }, [page, perPage]);
+
+  return (
+    <div className="mt-8 flex flex-col">
+      {showHeader && (
+        <div className="text-eerie-black dark:text-bright-gray mb-3 flex items-center gap-3 text-sm">
+          <button
+            className="rounded-full border p-3 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>
+          <p className="mt-px">{t('settings.documents.backToAll')}</p>
+        </div>
+      )}
+      <div className="my-3 flex items-center justify-between gap-1">
+        <div className="text-eerie-black dark:text-bright-gray flex w-full items-center gap-2 sm:w-auto">
+          <p className="hidden text-2xl font-semibold sm:flex">{`${totalChunks} ${t('settings.documents.chunks')}`}</p>
+          <label htmlFor="chunk-search-input" className="sr-only">
+            {t('settings.documents.searchPlaceholder')}
+          </label>
+          <Input
+            maxLength={256}
+            placeholder={t('settings.documents.searchPlaceholder')}
+            name="chunk-search-input"
+            type="text"
+            id="chunk-search-input"
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+            }}
+            borderVariant="thin"
+          />
+        </div>
+        <button
+          className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
+          title={t('settings.documents.addNew')}
+          onClick={() => setAddModal('ACTIVE')}
+        >
+          {t('settings.documents.addNew')}
+        </button>
+      </div>
+      {loading ? (
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="col-span-2 mt-24 flex h-32 items-center justify-center lg:col-span-3">
+            <Spinner />
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {paginatedChunks.filter((chunk) => {
+            if (!chunk.metadata?.title) return true;
+            return chunk.metadata.title
+              .toLowerCase()
+              .includes(searchTerm.toLowerCase());
+          }).length === 0 ? (
+            <div className="col-span-2 mt-24 text-center text-gray-500 lg:col-span-3 dark:text-gray-400">
+              <img
+                src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
+                alt={t('settings.documents.noChunksAlt')}
+                className="mx-auto mb-2 h-24 w-24"
+              />
+              {t('settings.documents.noChunks')}
+            </div>
+          ) : (
+            paginatedChunks
+              .filter((chunk) => {
+                if (!chunk.metadata?.title) return true;
+                return chunk.metadata.title
+                  .toLowerCase()
+                  .includes(searchTerm.toLowerCase());
+              })
+              .map((chunk, index) => (
+                <div
+                  key={index}
+                  className="border-silver dark:border-silver/40 relative flex h-56 w-full flex-col justify-between rounded-2xl border p-6"
+                >
+                  <div className="w-full">
+                    <div className="flex w-full items-center justify-between">
+                      <button
+                        aria-label={'edit'}
+                        onClick={() => {
+                          setEditModal({
+                            state: 'ACTIVE',
+                            chunk: chunk,
+                          });
+                        }}
+                        className="text-left"
+                      >
+                        <h3 className="text-eerie-black dark:text-bright-gray line-clamp-2 text-base font-semibold">
+                          {chunk.metadata?.title ||
+                            t('settings.documents.untitled')}
+                        </h3>
+                      </button>
+                    </div>
+                    <div className="mt-2 h-[80px] overflow-hidden">
+                      <p className="text-eerie-black dark:text-bright-gray line-clamp-4 text-sm">
+                        {chunk.text}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))
+          )}
+        </div>
+      )}
+
+      <ChunkModal
+        type="ADD"
+        modalState={addModal}
+        setModalState={setAddModal}
+        handleSubmit={handleAddChunk}
+      />
+      {editModal.chunk && (
+        <ChunkModal
+          type="EDIT"
+          modalState={editModal.state}
+          setModalState={(state) =>
+            setEditModal((prev) => ({ ...prev, state }))
+          }
+          handleSubmit={(title, text) => {
+            handleUpdateChunk(title, text, editModal.chunk as ChunkType);
+          }}
+          originalText={editModal.chunk?.text ?? ''}
+          originalTitle={editModal.chunk?.metadata?.title ?? ''}
+          handleDelete={() => {
+            handleDeleteChunk(editModal.chunk as ChunkType);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DocumentChunks;

frontend/src/components/FileTreeComponent.tsx

@@ -1,5 +1,8 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import DocumentChunks from './DocumentChunks';
+import ContextMenu, { MenuOption } from './ContextMenu';
 import userService from '../api/services/userService';
 import FileIcon from '../assets/file.svg';
 import FolderIcon from '../assets/folder.svg';
@@ -8,9 +11,6 @@ import ThreeDots from '../assets/three-dots.svg';
 import EyeView from '../assets/eye-view.svg';
 import OutlineSource from '../assets/outline-source.svg';
 import Trash from '../assets/red-trash.svg';
-import Spinner from './Spinner';
-import { useTranslation } from 'react-i18next';
-import ContextMenu, { MenuOption } from './ContextMenu';
 
 interface FileNode {
   type?: string;
@@ -45,6 +45,18 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   const menuRefs = useRef<{
     [key: string]: React.RefObject<HTMLDivElement | null>;
   }>({});
+  const [selectedFile, setSelectedFile] = useState<{
+    id: string;
+    name: string;
+  } | null>(null);
+
+  const handleFileClick = (fileName: string) => {
+    const fullPath = [...currentPath, fileName].join('/');
+    setSelectedFile({
+      id: fullPath,
+      name: fileName,
+    });
+  };
 
   useEffect(() => {
     const fetchDirectoryStructure = async () => {
@@ -129,7 +141,11 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     setActiveMenuId(itemId);
   };
 
-  const getActionOptions = (name: string, isFile: boolean): MenuOption[] => {
+  const getActionOptions = (
+    name: string,
+    isFile: boolean,
+    itemId: string,
+  ): MenuOption[] => {
     const options: MenuOption[] = [];
 
     if (isFile) {
@@ -138,8 +154,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         label: t('settings.documents.view'),
         onClick: (event: React.SyntheticEvent) => {
           event.stopPropagation();
-          console.log('View file:', name);
-          // View file action will be implemented later
+          handleFileClick(name);
         },
         iconWidth: 18,
         iconHeight: 18,
@@ -195,32 +210,89 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       </div>
     );
   };
+
+  const calculateDirectoryStats = (
+    structure: DirectoryStructure,
+  ): { totalSize: number; totalTokens: number } => {
+    let totalSize = 0;
+    let totalTokens = 0;
+
+    Object.entries(structure).forEach(([_, node]) => {
+      if (node.type) {
+        // It's a file
+        totalSize += node.size_bytes || 0;
+        totalTokens += node.token_count || 0;
+      } else {
+        // It's a directory, recurse
+        const stats = calculateDirectoryStats(node);
+        totalSize += stats.totalSize;
+        totalTokens += stats.totalTokens;
+      }
+    });
+
+    return { totalSize, totalTokens };
+  };
+
   const renderFileTree = (structure: DirectoryStructure): React.ReactNode[] => {
+    // Separate directories and files
     const entries = Object.entries(structure);
     const directories = entries.filter(([_, node]) => !node.type);
     const files = entries.filter(([_, node]) => node.type);
 
+    // Create parent directory row
+    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>,
+          ]
+        : [];
+
+    // Render directories first, then files
     return [
+      ...parentRow,
       ...directories.map(([name, node]) => {
         const itemId = `dir-${name}`;
         const menuRef = getMenuRef(itemId);
+        const dirStats = calculateDirectoryStats(node as DirectoryStructure);
 
         return (
           <tr
             key={itemId}
-            className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]"
+            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
+            onClick={() => navigateToDirectory(name)}
           >
             <td className="px-4 py-2">
-              <div
-                className="flex cursor-pointer items-center"
-                onClick={() => navigateToDirectory(name)}
-              >
+              <div className="flex items-center">
                 <img src={FolderIcon} alt="Folder" className="mr-2 h-4 w-4" />
-                <span className="text-sm">{name}</span>
+                <span className="text-sm dark:text-[#E0E0E0]">{name}</span>
               </div>
             </td>
-            <td className="px-4 py-2 text-sm">-</td>
-            <td className="px-4 py-2 text-sm">-</td>
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
+              {dirStats.totalTokens > 0
+                ? dirStats.totalTokens.toLocaleString()
+                : '-'}
+            </td>
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
+              {dirStats.totalSize > 0 ? formatBytes(dirStats.totalSize) : '-'}
+            </td>
             <td className="w-10 px-4 py-2 text-sm">
               <div ref={menuRef} className="relative">
                 <button
@@ -239,7 +311,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   setIsOpen={(isOpen) =>
                     setActiveMenuId(isOpen ? itemId : null)
                   }
-                  options={getActionOptions(name, false)}
+                  options={getActionOptions(name, false, itemId)}
                   anchorRef={menuRef}
                   position="bottom-left"
                   offset={{ x: 0, y: 8 }}
@@ -256,18 +328,19 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         return (
           <tr
             key={itemId}
-            className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]"
+            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
+            onClick={() => handleFileClick(name)}
           >
             <td className="px-4 py-2">
               <div className="flex items-center">
                 <img src={FileIcon} alt="File" className="mr-2 h-4 w-4" />
-                <span className="text-sm">{name}</span>
+                <span className="text-sm dark:text-[#E0E0E0]">{name}</span>
               </div>
             </td>
-            <td className="px-4 py-2 text-sm">
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
               {node.token_count?.toLocaleString() || '-'}
             </td>
-            <td className="px-4 py-2 text-sm">
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
               {node.size_bytes ? formatBytes(node.size_bytes) : '-'}
             </td>
             <td className="w-10 px-4 py-2 text-sm">
@@ -288,7 +361,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   setIsOpen={(isOpen) =>
                     setActiveMenuId(isOpen ? itemId : null)
                   }
-                  options={getActionOptions(name, true)}
+                  options={getActionOptions(name, true, itemId)}
                   anchorRef={menuRef}
                   position="bottom-left"
                   offset={{ x: 0, y: 8 }}
@@ -300,57 +373,47 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       }),
     ];
   };
-
-  if (loading) {
-    return (
-      <div className="flex h-64 items-center justify-center">
-        <Spinner />
-      </div>
-    );
-  }
-
-  if (error) {
-    return <div className="p-4 text-center text-red-500">{error}</div>;
-  }
-
-  if (!directoryStructure) {
-    return (
-      <div className="p-4 text-center text-gray-500">
-        No directory structure available
-      </div>
-    );
-  }
-
   const currentDirectory = getCurrentDirectory();
 
   return (
-    <div className="w-full">
-      <div className="mb-4">{renderPathNavigation()}</div>
+    <>
+      {selectedFile ? (
+        <DocumentChunks
+          documentId={docId}
+          documentName={selectedFile.name}
+          handleGoBack={() => setSelectedFile(null)}
+          path={selectedFile.id}
+        />
+      ) : (
+        <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-white dark:bg-gray-900">
-          <thead className="bg-gray-100 dark:bg-gray-800">
-            <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
-              <th className="w-3/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
-                Name
-              </th>
-              <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
-                Tokens
-              </th>
-              <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
-                Size
-              </th>
-              <th className="w-[60px] px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
-                <span className="sr-only">Actions</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody className="[&>tr:last-child]:border-b-0">
-            {renderFileTree(currentDirectory)}
-          </tbody>
-        </table>
-      </div>
-    </div>
+          <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
+            <table className="min-w-full table-fixed bg-transparent">
+              <thead className="bg-gray-100 dark:bg-[#27282D]">
+                <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
+                  <th className="w-3/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                    Name
+                  </th>
+                  <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                    Tokens
+                  </th>
+                  <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                    Size
+                  </th>
+                  <th className="w-[60px] px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="[&>tr:last-child]:border-b-0">
+                {renderFileTree(currentDirectory)}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </>
   );
 };