Ling0925
/
suna
mirror of https://github.com/kortix-ai/suna.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: case opening from home

This commit is contained in:
Vukasin 2025-05-27 22:37:06 +02:00
parent 27ef3a5956
commit 7806f2760e
1 changed files with 98 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
frontend/src/components/thread/file-viewer-modal.tsx
View File

@ -84,6 +84,16 @@ export function FileViewerModal({
const [currentFileIndex, setCurrentFileIndex] = useState<number>(-1); const [currentFileIndex, setCurrentFileIndex] = useState<number>(-1);
const isFileListMode = Boolean(filePathList && filePathList.length > 0); const isFileListMode = Boolean(filePathList && filePathList.length > 0);
// Debug filePathList changes
useEffect(() => {
console.log('[FILE VIEWER DEBUG] filePathList changed:', {
filePathList,
length: filePathList?.length,
isFileListMode,
currentFileIndex
});
}, [filePathList, isFileListMode, currentFileIndex]);
// Use React Query for directory listing // Use React Query for directory listing
const { const {
data: files = [], data: files = [],
@ -182,12 +192,20 @@ export function FileViewerModal({
// Helper function to clear the selected file // Helper function to clear the selected file
const clearSelectedFile = useCallback(() => { const clearSelectedFile = useCallback(() => {
console.log(`[FILE VIEWER DEBUG] clearSelectedFile called, isFileListMode: ${isFileListMode}`);
setSelectedFilePath(null); setSelectedFilePath(null);
setRawContent(null); setRawContent(null);
setTextContentForRenderer(null); // Clear derived text content setTextContentForRenderer(null); // Clear derived text content
setBlobUrlForRenderer(null); // Clear derived blob URL setBlobUrlForRenderer(null); // Clear derived blob URL
setContentError(null); setContentError(null);
}, []); // Only reset file list mode index when not in file list mode
if (!isFileListMode) {
console.log(`[FILE VIEWER DEBUG] Resetting currentFileIndex in clearSelectedFile`);
setCurrentFileIndex(-1);
} else {
console.log(`[FILE VIEWER DEBUG] Keeping currentFileIndex in clearSelectedFile because in file list mode`);
}
}, [isFileListMode]);
// Core file opening function // Core file opening function
const openFile = useCallback( const openFile = useCallback(
@ -233,6 +251,14 @@ export function FileViewerModal({
clearSelectedFile(); clearSelectedFile();
setSelectedFilePath(file.path); setSelectedFilePath(file.path);
// Only reset file index if we're NOT in file list mode or the file is not in the list
if (!isFileListMode || !filePathList?.includes(file.path)) {
console.log(`[FILE VIEWER DEBUG] Resetting currentFileIndex because not in file list mode or file not in list`);
setCurrentFileIndex(-1);
} else {
console.log(`[FILE VIEWER DEBUG] Keeping currentFileIndex because file is in file list mode`);
}
// The useFileContentQuery hook will automatically handle loading the content // The useFileContentQuery hook will automatically handle loading the content
// No need to manually fetch here - React Query will handle it // No need to manually fetch here - React Query will handle it
}, },
@ -240,6 +266,8 @@ export function FileViewerModal({
selectedFilePath, selectedFilePath,
clearSelectedFile, clearSelectedFile,
normalizePath, normalizePath,
isFileListMode,
filePathList,
], ],
); );
@ -384,11 +412,20 @@ export function FileViewerModal({
// Navigation functions for file list mode // Navigation functions for file list mode
const navigateToFileByIndex = useCallback((index: number) => { const navigateToFileByIndex = useCallback((index: number) => {
console.log('[FILE VIEWER DEBUG] navigateToFileByIndex called:', {
index,
isFileListMode,
filePathList,
filePathListLength: filePathList?.length
});
if (!isFileListMode || !filePathList || index < 0 || index >= filePathList.length) { if (!isFileListMode || !filePathList || index < 0 || index >= filePathList.length) {
console.log('[FILE VIEWER DEBUG] navigateToFileByIndex early return - invalid conditions');
return; return;
} }
const filePath = filePathList[index]; const filePath = filePathList[index];
console.log('[FILE VIEWER DEBUG] Setting currentFileIndex to:', index, 'for file:', filePath);
setCurrentFileIndex(index); setCurrentFileIndex(index);
// Create a temporary FileInfo object for the file // Create a temporary FileInfo object for the file
@ -428,9 +465,22 @@ export function FileViewerModal({
// If we're in file list mode, find the index and navigate to it // If we're in file list mode, find the index and navigate to it
if (isFileListMode && filePathList) { if (isFileListMode && filePathList) {
console.log('[FILE VIEWER DEBUG] Initial file path - file list mode detected:', {
isFileListMode,
filePathList,
safeInitialFilePath,
filePathListLength: filePathList.length
});
const normalizedInitialPath = normalizePath(safeInitialFilePath); const normalizedInitialPath = normalizePath(safeInitialFilePath);
const index = filePathList.findIndex(path => normalizePath(path) === normalizedInitialPath); const index = filePathList.findIndex(path => normalizePath(path) === normalizedInitialPath);
console.log('[FILE VIEWER DEBUG] Found index for initial file:', {
normalizedInitialPath,
index,
foundPath: index !== -1 ? filePathList[index] : 'not found'
});
if (index !== -1) { if (index !== -1) {
console.log(`[FILE VIEWER] File list mode: navigating to index ${index} for ${normalizedInitialPath}`); console.log(`[FILE VIEWER] File list mode: navigating to index ${index} for ${normalizedInitialPath}`);
navigateToFileByIndex(index); navigateToFileByIndex(index);
@ -930,6 +980,13 @@ export function FileViewerModal({
[currentPath, sandboxId, refetchFiles], [currentPath, sandboxId, refetchFiles],
); );
// Reset file list mode when modal opens without filePathList
useEffect(() => {
if (open && !filePathList) {
setCurrentFileIndex(-1);
}
}, [open, filePathList]);
// --- Render --- // // --- Render --- //
return ( return (
<Dialog open={open} onOpenChange={handleOpenChange}> <Dialog open={open} onOpenChange={handleOpenChange}>
@ -940,33 +997,46 @@ export function FileViewerModal({
</DialogTitle> </DialogTitle>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{/* Navigation arrows for file list mode */} {/* Navigation arrows for file list mode */}
{isFileListMode && selectedFilePath && filePathList && ( {(() => {
<> // Debug logging
<Button console.log('[FILE VIEWER DEBUG] Navigation visibility check:', {
variant="outline" isFileListMode,
size="sm" selectedFilePath,
onClick={navigatePrevious} filePathList,
disabled={currentFileIndex <= 0} filePathListLength: filePathList?.length,
className="h-8 w-8 p-0" currentFileIndex,
title="Previous file (←)" shouldShow: isFileListMode && selectedFilePath && filePathList && filePathList.length > 1 && currentFileIndex >= 0
> });
<ChevronLeft className="h-4 w-4" />
</Button> return isFileListMode && selectedFilePath && filePathList && filePathList.length > 1 && currentFileIndex >= 0;
<div className="text-xs text-muted-foreground px-1"> })() && (
{currentFileIndex + 1} / {filePathList.length} <>
</div> <Button
<Button variant="outline"
variant="outline" size="sm"
size="sm" onClick={navigatePrevious}
onClick={navigateNext} disabled={currentFileIndex <= 0}
disabled={currentFileIndex >= filePathList.length - 1} className="h-8 w-8 p-0"
className="h-8 w-8 p-0" title="Previous file (←)"
title="Next file (→)" >
> <ChevronLeft className="h-4 w-4" />
<ChevronRight className="h-4 w-4" /> </Button>
</Button> <div className="text-xs text-muted-foreground px-1">
</> {currentFileIndex + 1} / {filePathList.length}
)}</div> </div>
<Button
variant="outline"
size="sm"
onClick={navigateNext}
disabled={currentFileIndex >= filePathList.length - 1}
className="h-8 w-8 p-0"
title="Next file (→)"
>
<ChevronRight className="h-4 w-4" />
</Button>
</>
)}
</div>
</DialogHeader> </DialogHeader>
{/* Navigation Bar */} {/* Navigation Bar */}