(fix:connectorTree) path navigation fn

frontend/src/components/ConnectorTreeComponent.tsx

@@ -10,24 +10,21 @@ import FolderIcon from '../assets/folder.svg';
 import ArrowLeft from '../assets/arrow-left.svg';
 import ThreeDots from '../assets/three-dots.svg';
 import EyeView from '../assets/eye-view.svg';
+import SearchIcon from '../assets/search.svg';
 import { useOutsideAlerter } from '../hooks';
 
-interface ConnectorFileNode {
+interface FileNode {
-  id: string;
+  type?: string;
-  name: string;
-  type: string;
-  size: string;
-  modifiedTime: string;
   token_count?: number;
-  mimeType?: string;
+  size_bytes?: number;
-  isFolder?: boolean;
+  [key: string]: any;
 }
 
-interface ConnectorDirectoryStructure {
+interface DirectoryStructure {
-  [key: string]: ConnectorFileNode;
+  [key: string]: FileNode;
 }
 
-interface ConnectorTreeProps {
+interface ConnectorTreeComponentProps {
   docId: string;
   sourceName: string;
   onBackToDocuments: () => void;
@@ -37,21 +34,28 @@ interface SearchResult {
   name: string;
   path: string;
   isFile: boolean;
-  id: string;
 }
 
-const ConnectorTree: React.FC<ConnectorTreeProps> = ({
+const ConnectorTreeComponent: React.FC<ConnectorTreeComponentProps> = ({
   docId,
   sourceName,
   onBackToDocuments,
 }) => {
   const { t } = useTranslation();
-  const [directoryStructure, setDirectoryStructure] = useState<ConnectorDirectoryStructure | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  const [directoryStructure, setDirectoryStructure] =
+    useState<DirectoryStructure | null>(null);
   const [currentPath, setCurrentPath] = useState<string[]>([]);
   const token = useSelector(selectToken);
-  const [selectedFile, setSelectedFile] = useState<{ id: string; name: string } | null>(null);
   const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
-  const menuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement | null> }>({});
+  const menuRefs = useRef<{
+    [key: string]: React.RefObject<HTMLDivElement | null>;
+  }>({});
+  const [selectedFile, setSelectedFile] = useState<{
+    id: string;
+    name: string;
+  } | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
   const searchDropdownRef = useRef<HTMLDivElement>(null);
@@ -66,69 +70,369 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
     false,
   );
 
-
+  const handleFileClick = (fileName: string) => {
+    const fullPath = [...currentPath, fileName].join('/');
+    setSelectedFile({
+      id: fullPath,
+      name: fileName,
+    });
+  };
 
   useEffect(() => {
     const fetchDirectoryStructure = async () => {
       try {
+        setLoading(true);
         const response = await userService.getDirectoryStructure(docId, token);
         const data = await response.json();
 
         if (data && data.directory_structure) {
-          const structure: ConnectorDirectoryStructure = {};
+          setDirectoryStructure(data.directory_structure);
-          // Convert the directory structure to our format
-          Object.entries(data.directory_structure).forEach(([key, value]: [string, any]) => {
-            structure[key] = {
-              id: key,
-              name: key,
-              type: value.type || 'file',
-              size: value.size_bytes ? `${value.size_bytes} bytes` : '-',
-              modifiedTime: '-',
-              token_count: value.token_count,
-              isFolder: !value.type,
-            };
-          });
-          setDirectoryStructure(structure);
-
-          // Update search results when directory structure changes
-          if (searchQuery && structure) {
-            setSearchResults(searchFiles(searchQuery, structure));
-          }
         } else {
-          // Handle invalid response format
+          setError('Invalid response format');
-          console.log('Invalid response format');
         }
       } catch (err) {
-        console.error('Failed to load directory structure', err);
+        setError('Failed to load directory structure');
+        console.error(err);
+      } finally {
+        setLoading(false);
       }
     };
 
     if (docId) {
       fetchDirectoryStructure();
     }
-  }, [docId, token, searchQuery]);
+  }, [docId, token]);
 
-  const handleFileClick = (fileId: string, fileName: string) => {
+  const navigateToDirectory = (dirName: string) => {
-    setSelectedFile({ id: fileId, name: fileName });
+    setCurrentPath([...currentPath, dirName]);
-  };
-
-  const navigateToDirectory = (_folderId: string, folderName: string) => {
-    setCurrentPath(prev => [...prev, folderName]);
   };
 
   const navigateUp = () => {
-    if (currentPath.length > 0) {
+    setCurrentPath(currentPath.slice(0, -1));
-      setCurrentPath(prev => prev.slice(0, -1));
+  };
+
+  const getCurrentDirectory = (): DirectoryStructure => {
+    if (!directoryStructure) return {};
+
+    let current = directoryStructure;
+    for (const dir of currentPath) {
+      if (current[dir] && !current[dir].type) {
+        current = current[dir] as DirectoryStructure;
+      } else {
+        return {};
+      }
+    }
+    return current;
+  };
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const getMenuRef = (id: string) => {
+    if (!menuRefs.current[id]) {
+      menuRefs.current[id] = React.createRef();
+    }
+    return menuRefs.current[id];
+  };
+
+  const handleMenuClick = (
+    e: React.MouseEvent<HTMLButtonElement>,
+    id: string,
+  ) => {
+    e.stopPropagation();
+    setActiveMenuId(activeMenuId === id ? null : id);
+  };
+
+  const getActionOptions = (
+    name: string,
+    isFile: boolean,
+    _itemId: string,
+  ): MenuOption[] => {
+    const options: MenuOption[] = [];
+
+    options.push({
+      icon: EyeView,
+      label: t('settings.sources.view'),
+      onClick: (event: React.SyntheticEvent) => {
+        event.stopPropagation();
+        if (isFile) {
+          handleFileClick(name);
+        } else {
+          navigateToDirectory(name);
+        }
+      },
+      iconWidth: 18,
+      iconHeight: 18,
+      variant: 'primary',
+    });
+
+    // No delete option for connector files
+
+    return options;
+  };
+
+  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 handleBackNavigation = () => {
+    if (selectedFile) {
+      setSelectedFile(null);
+    } else if (currentPath.length === 0) {
+      if (onBackToDocuments) {
+        onBackToDocuments();
+      }
+    } else {
+      navigateUp();
     }
   };
 
-  const getCurrentDirectory = (): ConnectorDirectoryStructure => {
+  const renderPathNavigation = () => {
-    return directoryStructure || {};
+    return (
+      <div className="mb-0 min-h-[38px] flex flex-col gap-2 text-base sm:flex-row sm:items-center sm:justify-between">
+        {/* Left side with path navigation */}
+        <div className="flex w-full items-center sm:w-auto">
+          <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] font-medium"
+            onClick={handleBackNavigation}
+          >
+            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
+          </button>
+          
+          <div className="flex items-center">
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              {sourceName}
+            </span>
+            {currentPath.length > 0 && (
+              <>
+                <span className="mx-1 text-gray-400">/</span>
+                {currentPath.map((dir, index) => (
+                  <React.Fragment key={index}>
+                    <button
+                      className="text-sm font-medium text-gray-700 hover:underline dark:text-gray-300"
+                      onClick={() => navigateToPath(index)}
+                    >
+                      {dir}
+                    </button>
+                    {index < currentPath.length - 1 && (
+                      <span className="mx-1 text-gray-400">/</span>
+                    )}
+                  </React.Fragment>
+                ))}
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="flex relative flex-row flex-nowrap items-center gap-2 w-full sm:w-auto justify-end mt-2 sm:mt-0">
+          {renderFileSearch()}
+        </div>
+      </div>
+    );
+  };
+
+  const renderFileTree = (directory: DirectoryStructure) => {
+    if (!directory) return [];
+
+    // 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-2 py-2 lg:px-4">
+              <div className="flex items-center">
+                <img
+                  src={FolderIcon}
+                  alt={t('settings.sources.parentFolderAlt')}
+                  className="mr-2 h-4 w-4 flex-shrink-0"
+                />
+                <span className="truncate text-sm dark:text-[#E0E0E0]">
+                  ..
+                </span>
+              </div>
+            </td>
+            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
+              -
+            </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>,
+        ]
+        : [];
+
+    // Sort entries: directories first, then files, both alphabetically
+    const sortedEntries = Object.entries(directory).sort(([nameA, nodeA], [nameB, nodeB]) => {
+      const isFileA = !!nodeA.type;
+      const isFileB = !!nodeB.type;
+      
+      if (isFileA !== isFileB) {
+        return isFileA ? 1 : -1; // Directories first
+      }
+      
+      return nameA.localeCompare(nameB); // Alphabetical within each group
+    });
+
+    
+    // Process directories
+    const directoryRows = sortedEntries
+      .filter(([_, node]) => !node.type)
+      .map(([name, node]) => {
+        const itemId = `dir-${name}`;
+        const menuRef = getMenuRef(itemId);
+        
+        // Calculate directory stats
+        const dirStats = calculateDirectoryStats(node as DirectoryStructure);
+        
+        return (
+          <tr
+            key={itemId}
+            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
+            onClick={() => navigateToDirectory(name)}
+          >
+            <td className="px-2 py-2 lg:px-4">
+              <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"
+                />
+                <span className="truncate text-sm dark:text-[#E0E0E0]">
+                  {name}
+                </span>
+              </div>
+            </td>
+            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
+              {dirStats.totalTokens > 0
+                ? dirStats.totalTokens.toLocaleString()
+                : '-'}
+            </td>
+            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
+              {dirStats.totalSize > 0 ? formatBytes(dirStats.totalSize) : '-'}
+            </td>
+            <td className="w-10 px-2 py-2 text-sm lg:px-4">
+              <div ref={menuRef} className="relative">
+                <button
+                  onClick={(e) => handleMenuClick(e, itemId)}
+                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E] font-medium"
+                  aria-label={t('settings.sources.menuAlt')}
+                >
+                  <img
+                    src={ThreeDots}
+                    alt={t('settings.sources.menuAlt')}
+                    className="opacity-60 hover:opacity-100"
+                  />
+                </button>
+                <ContextMenu
+                  isOpen={activeMenuId === itemId}
+                  setIsOpen={(isOpen) =>
+                    setActiveMenuId(isOpen ? itemId : null)
+                  }
+                  options={getActionOptions(name, false, itemId)}
+                  anchorRef={menuRef}
+                  position="bottom-left"
+                  offset={{ x: -4, y: 4 }}
+                />
+              </div>
+            </td>
+          </tr>
+        );
+      });
+
+    // Process files
+    const fileRows = sortedEntries
+      .filter(([_, node]) => !!node.type)
+      .map(([name, node]) => {
+        const itemId = `file-${name}`;
+        const menuRef = getMenuRef(itemId);
+        
+        return (
+          <tr
+            key={itemId}
+            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
+            onClick={() => handleFileClick(name)}
+          >
+            <td className="px-2 py-2 lg:px-4">
+              <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"
+                />
+                <span className="truncate text-sm dark:text-[#E0E0E0]">
+                  {name}
+                </span>
+              </div>
+            </td>
+            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
+              {node.token_count?.toLocaleString() || '-'}
+            </td>
+            <td className="px-2 py-2 text-sm md:px-4 dark:text-[#E0E0E0]">
+              {node.size_bytes ? formatBytes(node.size_bytes) : '-'}
+            </td>
+            <td className="w-10 px-2 py-2 text-sm lg:px-4">
+              <div ref={menuRef} className="relative">
+                <button
+                  onClick={(e) => handleMenuClick(e, itemId)}
+                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E] font-medium"
+                  aria-label={t('settings.sources.menuAlt')}
+                >
+                  <img
+                    src={ThreeDots}
+                    alt={t('settings.sources.menuAlt')}
+                    className="opacity-60 hover:opacity-100"
+                  />
+                </button>
+                <ContextMenu
+                  isOpen={activeMenuId === itemId}
+                  setIsOpen={(isOpen) =>
+                    setActiveMenuId(isOpen ? itemId : null)
+                  }
+                  options={getActionOptions(name, true, itemId)}
+                  anchorRef={menuRef}
+                  position="bottom-left"
+                  offset={{ x: -4, y: 4 }}
+                />
+              </div>
+            </td>
+          </tr>
+        );
+      });
+
+    return [...parentRow, ...directoryRows, ...fileRows];
   };
 
   const searchFiles = (
     query: string,
-    structure: ConnectorDirectoryStructure,
+    structure: DirectoryStructure,
     currentPath: string[] = [],
   ): SearchResult[] => {
     let results: SearchResult[] = [];
@@ -141,7 +445,6 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
           name,
           path: fullPath,
           isFile: !!node.type,
-          id: node.id,
         });
       }
 
@@ -149,7 +452,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
         // If it's a directory, search recursively
         results = [
           ...results,
-          ...searchFiles(query, node as unknown as ConnectorDirectoryStructure, [
+          ...searchFiles(query, node as DirectoryStructure, [
             ...currentPath,
             name,
           ]),
@@ -167,7 +470,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
       setCurrentPath(pathParts);
 
       setSelectedFile({
-        id: result.id,
+        id: result.path,
         name: fileName,
       });
     } else {
@@ -178,70 +481,6 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
     setSearchResults([]);
   };
 
-  const handleBackNavigation = () => {
-    if (selectedFile) {
-      setSelectedFile(null);
-    } else if (currentPath.length === 0) {
-      if (onBackToDocuments) {
-        onBackToDocuments();
-      }
-    } else {
-      navigateUp();
-    }
-  };
-
-  const getMenuRef = (itemId: string) => {
-    if (!menuRefs.current[itemId]) {
-      menuRefs.current[itemId] = React.createRef<HTMLDivElement>();
-    }
-    return menuRefs.current[itemId];
-  };
-
-  const handleMenuClick = (e: React.MouseEvent, itemId: string) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (activeMenuId === itemId) {
-      setActiveMenuId(null);
-      return;
-    }
-    setActiveMenuId(itemId);
-  };
-
-  const getActionOptions = (
-    name: string,
-    id: string,
-    isFile: boolean,
-    _itemId: string,
-  ): MenuOption[] => {
-    const options: MenuOption[] = [];
-
-    options.push({
-      icon: EyeView,
-      label: t('settings.sources.view'),
-      onClick: (event: React.SyntheticEvent) => {
-        event.stopPropagation();
-        if (isFile) {
-          handleFileClick(id, name);
-        } else {
-          navigateToDirectory(id, name);
-        }
-      },
-      iconWidth: 18,
-      iconHeight: 18,
-      variant: 'primary',
-    });
-
-    // Remove delete option for connector files since they're not on our servers
-    // Connector files will be managed through the main Google Drive integration
-
-    return options;
-  };
-
-
-
-  const currentDirectory = getCurrentDirectory();
-
   const renderFileSearch = () => {
     return (
       <div className="relative w-52" ref={searchDropdownRef}>
@@ -255,8 +494,8 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
             }
           }}
           placeholder={t('settings.sources.searchFiles')}
-          className={`w-full h-[38px] border border-[#D1D9E0] px-4 py-2 dark:border-[#6A6A6A]
+          className={`w-full h-[38px] border border-[#D1D9E0] px-4 py-2 dark:border-[#6A6A6A] 
-              ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'}
+              ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} 
               bg-transparent focus:outline-none dark:text-[#E0E0E0]`}
         />
 
@@ -300,177 +539,27 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
     );
   };
 
-  const renderConnectorFileTree = (structure: ConnectorDirectoryStructure): React.ReactNode[] => {
+  const handleFileSearch = (searchQuery: string) => {
-    const entries = Object.entries(structure);
+    if (directoryStructure) {
-    const directories = entries.filter(([_, node]) => node.isFolder);
+      return searchFiles(searchQuery, directoryStructure);
-    const files = entries.filter(([_, node]) => !node.isFolder);
+    }
-
+    return [];
-    return [
-      ...directories.map(([name, node]) => {
-        const itemId = `dir-${node.id}`;
-        const menuRef = getMenuRef(itemId);
-
-        return (
-          <tr
-            key={itemId}
-            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
-            onClick={() => navigateToDirectory(node.id, name)}
-          >
-            <td className="px-2 py-2 lg:px-4">
-              <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"
-                />
-                <span className="truncate text-sm dark:text-[#E0E0E0]">
-                  {name}
-                </span>
-              </div>
-            </td>
-            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
-              -
-            </td>
-            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
-              {node.modifiedTime || '-'}
-            </td>
-            <td className="w-10 px-2 py-2 text-sm lg:px-4">
-              <div ref={menuRef} className="relative">
-                <button
-                  onClick={(e) => handleMenuClick(e, itemId)}
-                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E] font-medium"
-                  aria-label={t('settings.sources.menuAlt')}
-                >
-                  <img
-                    src={ThreeDots}
-                    alt={t('settings.sources.menuAlt')}
-                    className="opacity-60 hover:opacity-100"
-                  />
-                </button>
-                <ContextMenu
-                  isOpen={activeMenuId === itemId}
-                  setIsOpen={(isOpen) =>
-                    setActiveMenuId(isOpen ? itemId : null)
-                  }
-                  options={getActionOptions(name, node.id, false, itemId)}
-                  anchorRef={menuRef}
-                  position="bottom-left"
-                  offset={{ x: -4, y: 4 }}
-                />
-              </div>
-            </td>
-          </tr>
-        );
-      }),
-      ...files.map(([name, node]) => {
-        const itemId = `file-${node.id}`;
-        const menuRef = getMenuRef(itemId);
-
-        return (
-          <tr
-            key={itemId}
-            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
-            onClick={() => handleFileClick(node.id, name)}
-          >
-            <td className="px-2 py-2 lg:px-4">
-              <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"
-                />
-                <span className="truncate text-sm dark:text-[#E0E0E0]">
-                  {name}
-                </span>
-              </div>
-            </td>
-            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
-              {node.token_count?.toLocaleString() || '-'}
-            </td>
-            <td className="px-2 py-2 text-sm md:px-4 dark:text-[#E0E0E0]">
-              {node.size || '-'}
-            </td>
-            <td className="w-10 px-2 py-2 text-sm lg:px-4">
-              <div ref={menuRef} className="relative">
-                <button
-                  onClick={(e) => handleMenuClick(e, itemId)}
-                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E] font-medium"
-                  aria-label={t('settings.sources.menuAlt')}
-                >
-                  <img
-                    src={ThreeDots}
-                    alt={t('settings.sources.menuAlt')}
-                    className="opacity-60 hover:opacity-100"
-                  />
-                </button>
-                <ContextMenu
-                  isOpen={activeMenuId === itemId}
-                  setIsOpen={(isOpen) =>
-                    setActiveMenuId(isOpen ? itemId : null)
-                  }
-                  options={getActionOptions(name, node.id, true, itemId)}
-                  anchorRef={menuRef}
-                  position="bottom-left"
-                  offset={{ x: -4, y: 4 }}
-                />
-              </div>
-            </td>
-          </tr>
-        );
-      }),
-    ];
   };
 
-  const renderPathNavigation = () => {
+  const handleFileSelect = (path: string) => {
-    return (
+    const pathParts = path.split('/');
-      <div className="mb-0 min-h-[38px] flex flex-col gap-2 text-base sm:flex-row sm:items-center sm:justify-between">
+    const fileName = pathParts.pop() || '';
-        {/* Left side with path navigation */}
+    setCurrentPath(pathParts);
-        <div className="flex w-full items-center sm:w-auto">
+    setSelectedFile({
-          <button
+      id: path,
-            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] font-medium"
+      name: fileName,
-            onClick={handleBackNavigation}
+    });
-          >
+  };
-            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-          </button>
 
-          <div className="flex flex-wrap items-center">
+  const currentDirectory = getCurrentDirectory();
-            <span className="text-[#7D54D1] font-semibold break-words">
-              {sourceName}
-            </span>
-            {currentPath.length > 0 && (
-              <>
-                <span className="mx-1 flex-shrink-0 text-gray-500">/</span>
-                {currentPath.map((dir, index) => (
-                  <React.Fragment key={index}>
-                    <span className="break-words text-gray-700 dark:text-gray-300">
-                      {dir}
-                    </span>
-                    {index < currentPath.length - 1 && (
-                      <span className="mx-1 flex-shrink-0 text-gray-500">
-                        /
-                      </span>
-                    )}
-                  </React.Fragment>
-                ))}
-              </>
-            )}
-            {selectedFile && (
-              <>
-                <span className="mx-1 flex-shrink-0 text-gray-500">/</span>
-                <span className="break-words text-gray-700 dark:text-gray-300">
-                  {selectedFile.name}
-                </span>
-              </>
-            )}
-          </div>
-        </div>
 
-        {/* Right side with search */}
+  const navigateToPath = (index: number) => {
-        <div className="flex relative flex-row flex-nowrap items-center gap-2 w-full sm:w-auto justify-end mt-2 sm:mt-0">
+    setCurrentPath(currentPath.slice(0, index + 1));
-          {renderFileSearch()}
-        </div>
-      </div>
-    );
   };
 
   return (
@@ -483,6 +572,8 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
               documentName={sourceName}
               handleGoBack={() => setSelectedFile(null)}
               path={selectedFile.id}
+              onFileSearch={handleFileSearch}
+              onFileSelect={handleFileSelect}
             />
           </div>
         </div>
@@ -504,15 +595,11 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
                     <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')}
                     </th>
-                    <th className="w-[60px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
+                    <th className="w-10 px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]"></th>
-                      <span className="sr-only">
-                        {t('settings.sources.actions')}
-                      </span>
-                    </th>
                   </tr>
                 </thead>
-                <tbody className="[&>tr:last-child]:border-b-0">
+                <tbody>
-                  {renderConnectorFileTree(currentDirectory)}
+                  {renderFileTree(getCurrentDirectory())}
                 </tbody>
               </table>
             </div>
@@ -523,4 +610,4 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
   );
 };
 
-export default ConnectorTree;
+export default ConnectorTreeComponent;

frontend/src/settings/Sources.tsx

@@ -29,6 +29,7 @@ import {
 import Upload from '../upload/Upload';
 import { formatDate } from '../utils/dateTimeUtils';
 import FileTreeComponent from '../components/FileTreeComponent';
+import ConnectorTreeComponent from '../components/ConnectorTreeComponent';
 import Chunks from '../components/Chunks';
 
 const formatTokens = (tokens: number): string => {
@@ -271,19 +272,27 @@ export default function Sources({
 
   return documentToView ? (
     <div className="mt-8 flex flex-col">
-      {documentToView.isNested ? (
+ {documentToView.isNested ? (
-        <FileTreeComponent
+      documentToView.type === 'connector' ? (
+        <ConnectorTreeComponent
           docId={documentToView.id || ''}
           sourceName={documentToView.name}
           onBackToDocuments={() => setDocumentToView(undefined)}
         />
       ) : (
-        <Chunks
+        <FileTreeComponent
-          documentId={documentToView.id || ''}
+          docId={documentToView.id || ''}
-          documentName={documentToView.name}
+          sourceName={documentToView.name}
-          handleGoBack={() => setDocumentToView(undefined)}
+          onBackToDocuments={() => setDocumentToView(undefined)}
         />
-      )}
+      )
+    ) : (
+      <Chunks
+        documentId={documentToView.id || ''}
+        documentName={documentToView.name}
+        handleGoBack={() => setDocumentToView(undefined)}
+      />
+    )}
     </div>
   ) : (
     <div className="mt-8 flex w-full max-w-full flex-col overflow-hidden">