mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-12-17 07:22:35 +00:00
fcea9893a4
# What does this PR do? ## Files Admin Page <img width="1919" height="1238" alt="Screenshot 2025-12-09 at 10 33 06 AM" src="https://github.com/user-attachments/assets/3dd545f0-32bc-45be-af2b-1823800015f2" /> ## Files Upload Modal <img width="1919" height="1287" alt="Screenshot 2025-12-09 at 10 33 38 AM" src="https://github.com/user-attachments/assets/776bb372-75d3-4ccd-b6b5-c9dfb3fcb350" /> ## Files Detail <img width="1918" height="1099" alt="Screenshot 2025-12-09 at 10 34 26 AM" src="https://github.com/user-attachments/assets/f256dbf8-4047-4d79-923d-404161b05f36" /> Note, content preview has some handling for JSON, CSV, and PDF to enable nicer rendering. Pure text rendering is trivial. ### Files Detail File Content Preview (TXT) <img width="1918" height="1341" alt="Screenshot 2025-12-09 at 10 41 20 AM" src="https://github.com/user-attachments/assets/4fa0ddb7-ffff-424b-b764-0bd4af6ed976" /> ### Files Detail File Content Preview (JSON) <img width="1909" height="1233" alt="Screenshot 2025-12-09 at 10 39 57 AM" src="https://github.com/user-attachments/assets/b912f07a-2dff-483b-b73c-2f69dd0d87ad" /> ### Files Detail File Content Preview (HTML) <img width="1916" height="1348" alt="Screenshot 2025-12-09 at 10 40 27 AM" src="https://github.com/user-attachments/assets/17ebec0a-8754-4552-977d-d3c44f7f6973" /> ### Files Detail File Content Preview (CSV) <img width="1919" height="1177" alt="Screenshot 2025-12-09 at 10 34 50 AM" src="https://github.com/user-attachments/assets/20bd0755-1757-4a3a-99d2-fbd072f81f49" /> ### Files Detail File Content Preview (PDF) <img width="1917" height="1154" alt="Screenshot 2025-12-09 at 10 36 48 AM" src="https://github.com/user-attachments/assets/2873e6fe-4da3-4cbd-941b-7d903270b749" /> Closes https://github.com/llamastack/llama-stack/issues/4144 ## Test Plan Added Tests Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
628 lines
20 KiB
TypeScript
628 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Download, Trash2, ArrowLeft, FileText } from "lucide-react";
|
|
import { useAuthClient } from "@/hooks/use-auth-client";
|
|
import { FileResource } from "@/lib/types";
|
|
import {
|
|
formatFileSize,
|
|
getFileTypeIcon,
|
|
formatTimestamp,
|
|
formatPurpose,
|
|
isTextFile,
|
|
} from "@/lib/file-utils";
|
|
import {
|
|
DetailLoadingView,
|
|
DetailErrorView,
|
|
DetailNotFoundView,
|
|
DetailLayout,
|
|
PropertiesCard,
|
|
PropertyItem,
|
|
} from "@/components/layout/detail-layout";
|
|
import { CopyButton } from "@/components/ui/copy-button";
|
|
import { CSVViewer } from "./csv-viewer";
|
|
import { JsonViewer } from "./json-viewer";
|
|
|
|
// Content size limits
|
|
const MAX_TEXT_PREVIEW_SIZE = 50 * 1024 * 1024; // 50MB for text files
|
|
const WARN_TEXT_PREVIEW_SIZE = 10 * 1024 * 1024; // 10MB warning threshold
|
|
|
|
export function FileDetail() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const client = useAuthClient();
|
|
const fileId = params.id as string;
|
|
|
|
const [file, setFile] = useState<FileResource | null>(null);
|
|
const [fileContent, setFileContent] = useState<string | null>(null);
|
|
const [fileContentUrl, setFileContentUrl] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [contentLoading, setContentLoading] = useState(false);
|
|
const [error, setError] = useState<Error | null>(null);
|
|
const [contentError, setContentError] = useState<string | null>(null);
|
|
const [sizeWarning, setSizeWarning] = useState<string | null>(null);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!fileId) return;
|
|
|
|
const fetchFile = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const response = await client.files.retrieve(fileId);
|
|
setFile(response as FileResource);
|
|
} catch (err) {
|
|
console.error("Failed to fetch file:", err);
|
|
setError(
|
|
err instanceof Error ? err : new Error("Failed to fetch file")
|
|
);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchFile();
|
|
}, [fileId, client]);
|
|
|
|
// Cleanup blob URL when component unmounts or content changes
|
|
useEffect(() => {
|
|
return () => {
|
|
if (fileContentUrl) {
|
|
URL.revokeObjectURL(fileContentUrl);
|
|
}
|
|
};
|
|
}, [fileContentUrl]);
|
|
|
|
const handleLoadContent = async () => {
|
|
if (!file) return;
|
|
|
|
try {
|
|
setContentLoading(true);
|
|
setContentError(null); // Clear any previous errors
|
|
setSizeWarning(null); // Clear any previous size warnings
|
|
|
|
// Check file size before processing
|
|
if (file.bytes > MAX_TEXT_PREVIEW_SIZE) {
|
|
setContentError(
|
|
`File is too large to preview (${formatFileSize(file.bytes)}). Maximum supported size is ${formatFileSize(MAX_TEXT_PREVIEW_SIZE)}.`
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (file.bytes > WARN_TEXT_PREVIEW_SIZE) {
|
|
setSizeWarning(
|
|
`Large file detected (${formatFileSize(file.bytes)}). Loading may take longer than usual.`
|
|
);
|
|
}
|
|
|
|
// Clean up existing blob URL
|
|
if (fileContentUrl) {
|
|
URL.revokeObjectURL(fileContentUrl);
|
|
setFileContentUrl(null);
|
|
}
|
|
|
|
// Determine MIME type from file extension
|
|
const extension = file.filename.split(".").pop()?.toLowerCase();
|
|
let mimeType = "application/octet-stream"; // Default
|
|
|
|
switch (extension) {
|
|
case "pdf":
|
|
mimeType = "application/pdf";
|
|
break;
|
|
case "txt":
|
|
mimeType = "text/plain";
|
|
break;
|
|
case "md":
|
|
mimeType = "text/markdown";
|
|
break;
|
|
case "html":
|
|
mimeType = "text/html";
|
|
break;
|
|
case "csv":
|
|
mimeType = "text/csv";
|
|
break;
|
|
case "json":
|
|
mimeType = "application/json";
|
|
break;
|
|
case "docx":
|
|
mimeType =
|
|
"application/vnd.openxmlformats-officedocument.wordprocessingml.document";
|
|
break;
|
|
case "doc":
|
|
mimeType = "application/msword";
|
|
break;
|
|
}
|
|
|
|
// For binary files (PDF, Word, images), fetch directly to avoid client parsing
|
|
const isBinaryFile = [
|
|
"pdf",
|
|
"docx",
|
|
"doc",
|
|
"png",
|
|
"jpg",
|
|
"jpeg",
|
|
"gif",
|
|
"bmp",
|
|
"webp",
|
|
].includes(extension || "");
|
|
|
|
let blob: Blob;
|
|
let textContent: string | null = null;
|
|
|
|
// TODO: Use llama stack client consistently for all file types
|
|
// Currently using direct fetch for binary files to ensure proper rendering
|
|
if (isBinaryFile) {
|
|
// For binary files, use direct fetch to preserve binary integrity
|
|
const contentResponse = await fetch(`/api/v1/files/${fileId}/content`);
|
|
if (!contentResponse.ok) {
|
|
throw new Error(
|
|
`Failed to fetch content: ${contentResponse.status} ${contentResponse.statusText}`
|
|
);
|
|
}
|
|
const arrayBuffer = await contentResponse.arrayBuffer();
|
|
blob = new Blob([arrayBuffer], { type: mimeType });
|
|
} else {
|
|
// Use llama stack client for text content
|
|
const response = await client.files.content(fileId);
|
|
|
|
if (typeof response === "string") {
|
|
blob = new Blob([response], { type: mimeType });
|
|
textContent = response;
|
|
} else if (response instanceof Blob) {
|
|
blob = response;
|
|
} else if (response instanceof ArrayBuffer) {
|
|
blob = new Blob([response], { type: mimeType });
|
|
} else {
|
|
// Handle other response types (convert to JSON)
|
|
const jsonString = JSON.stringify(response, null, 2);
|
|
blob = new Blob([jsonString], { type: "application/json" });
|
|
textContent = jsonString;
|
|
}
|
|
}
|
|
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
setFileContentUrl(blobUrl);
|
|
|
|
// Keep text content for copy functionality and CSV/JSON viewers
|
|
if (
|
|
textContent &&
|
|
(isTextFile(mimeType) || extension === "csv" || extension === "json")
|
|
) {
|
|
setFileContent(textContent);
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to load file content:", err);
|
|
|
|
// Clean up any partially created blob URL on error
|
|
if (fileContentUrl) {
|
|
URL.revokeObjectURL(fileContentUrl);
|
|
setFileContentUrl(null);
|
|
}
|
|
|
|
const errorMessage = err instanceof Error ? err.message : "Unknown error";
|
|
setContentError(
|
|
`Failed to load file content: ${errorMessage}. Please try again or check if the file still exists.`
|
|
);
|
|
} finally {
|
|
setContentLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDownload = async () => {
|
|
if (!file) return;
|
|
|
|
try {
|
|
// Determine MIME type from file extension
|
|
const extension = file.filename.split(".").pop()?.toLowerCase();
|
|
let mimeType = "application/octet-stream";
|
|
|
|
switch (extension) {
|
|
case "pdf":
|
|
mimeType = "application/pdf";
|
|
break;
|
|
case "txt":
|
|
mimeType = "text/plain";
|
|
break;
|
|
case "md":
|
|
mimeType = "text/markdown";
|
|
break;
|
|
case "html":
|
|
mimeType = "text/html";
|
|
break;
|
|
case "csv":
|
|
mimeType = "text/csv";
|
|
break;
|
|
case "json":
|
|
mimeType = "application/json";
|
|
break;
|
|
case "docx":
|
|
mimeType =
|
|
"application/vnd.openxmlformats-officedocument.wordprocessingml.document";
|
|
break;
|
|
case "doc":
|
|
mimeType = "application/msword";
|
|
break;
|
|
}
|
|
|
|
// For binary files (PDF, Word, images), detect to handle properly
|
|
const isBinaryFile = [
|
|
"pdf",
|
|
"docx",
|
|
"doc",
|
|
"png",
|
|
"jpg",
|
|
"jpeg",
|
|
"gif",
|
|
"bmp",
|
|
"webp",
|
|
].includes(extension || "");
|
|
|
|
let downloadUrl: string;
|
|
|
|
// TODO: Use llama stack client consistently for all file types
|
|
// Currently using direct fetch for binary files to ensure proper downloading
|
|
if (isBinaryFile) {
|
|
// For binary files, use direct fetch to preserve binary integrity
|
|
const contentResponse = await fetch(`/api/v1/files/${fileId}/content`);
|
|
if (!contentResponse.ok) {
|
|
throw new Error(
|
|
`Failed to fetch content: ${contentResponse.status} ${contentResponse.statusText}`
|
|
);
|
|
}
|
|
const arrayBuffer = await contentResponse.arrayBuffer();
|
|
const blob = new Blob([arrayBuffer], { type: mimeType });
|
|
downloadUrl = URL.createObjectURL(blob);
|
|
} else {
|
|
// Use llama stack client for text content
|
|
const response = await client.files.content(fileId);
|
|
|
|
if (typeof response === "string") {
|
|
const blob = new Blob([response], { type: mimeType });
|
|
downloadUrl = URL.createObjectURL(blob);
|
|
} else if (response instanceof Blob) {
|
|
downloadUrl = URL.createObjectURL(response);
|
|
} else {
|
|
const blob = new Blob([JSON.stringify(response, null, 2)], {
|
|
type: "application/json",
|
|
});
|
|
downloadUrl = URL.createObjectURL(blob);
|
|
}
|
|
}
|
|
|
|
// Trigger download
|
|
const link = document.createElement("a");
|
|
link.href = downloadUrl;
|
|
link.download = file.filename;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(downloadUrl);
|
|
} catch (err) {
|
|
console.error("Failed to download file:", err);
|
|
setContentError("Failed to download file. Please try again.");
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!file) return;
|
|
|
|
if (
|
|
!confirm(
|
|
`Are you sure you want to delete "${file.filename}"? This action cannot be undone.`
|
|
)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsDeleting(true);
|
|
await client.files.delete(fileId);
|
|
router.push("/logs/files");
|
|
} catch (err) {
|
|
console.error("Failed to delete file:", err);
|
|
setContentError("Failed to delete file. Please try again.");
|
|
} finally {
|
|
setIsDeleting(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <DetailLoadingView />;
|
|
}
|
|
|
|
if (error) {
|
|
return <DetailErrorView title="File Details" id={fileId} error={error} />;
|
|
}
|
|
|
|
if (!file) {
|
|
return <DetailNotFoundView title="File Details" id={fileId} />;
|
|
}
|
|
|
|
const isExpired = file.expires_at && file.expires_at * 1000 < Date.now();
|
|
const fileExtension = file.filename.split(".").pop()?.toLowerCase();
|
|
const fileIcon = getFileTypeIcon(fileExtension);
|
|
const isCSVFile = fileExtension === "csv";
|
|
const isJsonFile = fileExtension === "json";
|
|
|
|
// Security: File type whitelist for preview
|
|
// In local development, be permissive but still maintain reasonable security
|
|
const SAFE_PREVIEW_EXTENSIONS = [
|
|
"txt",
|
|
"plain",
|
|
"csv",
|
|
"json",
|
|
"pdf",
|
|
"html",
|
|
"htm",
|
|
"docx",
|
|
"doc",
|
|
"md",
|
|
"markdown",
|
|
"xml",
|
|
"log",
|
|
];
|
|
const canPreview =
|
|
!fileExtension || SAFE_PREVIEW_EXTENSIONS.includes(fileExtension);
|
|
|
|
const mainContent = (
|
|
<div className="space-y-6" data-main-content>
|
|
{/* File Header */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="text-2xl">{fileIcon}</div>
|
|
<div>
|
|
<CardTitle className="text-xl">{file.filename}</CardTitle>
|
|
<div className="flex items-center gap-4 mt-2 text-sm text-muted-foreground">
|
|
<span>{formatFileSize(file.bytes)}</span>
|
|
<span>•</span>
|
|
<span>
|
|
{file.filename.split(".").pop()?.toUpperCase() || "Unknown"}
|
|
</span>
|
|
<span>•</span>
|
|
<span>{formatPurpose(file.purpose)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={handleDownload}>
|
|
<Download className="h-4 w-4 mr-2" />
|
|
Download
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleDelete}
|
|
disabled={isDeleting}
|
|
>
|
|
<Trash2 className="h-4 w-4 mr-2" />
|
|
{isDeleting ? "Deleting..." : "Delete"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
|
|
{/* File Content Preview */}
|
|
{canPreview && (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
|
<FileText className="h-5 w-5" />
|
|
Content Preview
|
|
</CardTitle>
|
|
{!fileContentUrl && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleLoadContent}
|
|
disabled={contentLoading}
|
|
>
|
|
{contentLoading ? "Loading..." : "Load Content"}
|
|
</Button>
|
|
)}
|
|
{fileContentUrl && (
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => window.open(fileContentUrl, "_blank")}
|
|
>
|
|
Open in New Tab
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
const link = document.createElement("a");
|
|
link.href = fileContentUrl;
|
|
link.download = file.filename;
|
|
link.click();
|
|
}}
|
|
>
|
|
Download
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
{contentError && (
|
|
<CardContent>
|
|
<div className="p-4 border border-red-200 rounded-lg bg-red-50 dark:bg-red-900/20 dark:border-red-800">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h4 className="font-semibold text-red-800 dark:text-red-300 mb-1">
|
|
Content Error
|
|
</h4>
|
|
<p className="text-sm text-red-600 dark:text-red-400">
|
|
{contentError}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setContentError(null)}
|
|
className="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
|
|
>
|
|
Dismiss
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
)}
|
|
{sizeWarning && (
|
|
<CardContent>
|
|
<div className="p-4 border border-orange-200 rounded-lg bg-orange-50 dark:bg-orange-900/20 dark:border-orange-800">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h4 className="font-semibold text-orange-800 dark:text-orange-300 mb-1">
|
|
Large File Warning
|
|
</h4>
|
|
<p className="text-sm text-orange-600 dark:text-orange-400">
|
|
{sizeWarning}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setSizeWarning(null)}
|
|
className="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-orange-300"
|
|
>
|
|
Dismiss
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
)}
|
|
{fileContentUrl && (
|
|
<CardContent>
|
|
<div className="w-full">
|
|
{isCSVFile && fileContent ? (
|
|
// CSV files: Use custom CSV viewer
|
|
<CSVViewer content={fileContent} />
|
|
) : isJsonFile && fileContent ? (
|
|
// JSON files: Use custom JSON viewer
|
|
<JsonViewer content={fileContent} />
|
|
) : (
|
|
// Other files: Use iframe preview
|
|
<div className="relative">
|
|
{fileContent && (
|
|
<div className="absolute top-2 right-2 z-10">
|
|
<CopyButton
|
|
content={fileContent}
|
|
copyMessage="Copied file content to clipboard!"
|
|
/>
|
|
</div>
|
|
)}
|
|
<iframe
|
|
key={fileContentUrl} // Force iframe reload when URL changes
|
|
src={fileContentUrl}
|
|
className="w-full h-[600px] border rounded-lg bg-white dark:bg-gray-900"
|
|
title="File Preview"
|
|
onError={() => {
|
|
console.warn(
|
|
"Iframe failed to load content, this may be a browser security restriction"
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
)}
|
|
|
|
{/* Additional Information */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>File Information</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<div>
|
|
<span className="font-medium">File ID:</span>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<code className="bg-muted px-2 py-1 rounded text-sm font-mono">
|
|
{file.id}
|
|
</code>
|
|
<CopyButton
|
|
content={file.id}
|
|
copyMessage="Copied file ID to clipboard!"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{file.expires_at && (
|
|
<div>
|
|
<span className="font-medium">Status:</span>
|
|
<div className="mt-1">
|
|
<span
|
|
className={`inline-block px-2 py-1 rounded text-sm ${
|
|
isExpired
|
|
? "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-300"
|
|
: "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300"
|
|
}`}
|
|
>
|
|
{isExpired ? "Expired" : "Active"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
|
|
const sidebar = (
|
|
<div className="space-y-4">
|
|
{/* Navigation */}
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => router.push("/logs/files")}
|
|
className="w-full justify-start p-0"
|
|
>
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Back to Files
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Properties */}
|
|
<PropertiesCard>
|
|
<PropertyItem label="ID" value={file.id} />
|
|
<PropertyItem label="Filename" value={file.filename} />
|
|
<PropertyItem label="Size" value={formatFileSize(file.bytes)} />
|
|
<PropertyItem label="Purpose" value={formatPurpose(file.purpose)} />
|
|
<PropertyItem
|
|
label="Created"
|
|
value={formatTimestamp(file.created_at)}
|
|
/>
|
|
{file.expires_at && (
|
|
<PropertyItem
|
|
label="Expires"
|
|
value={
|
|
<span className={isExpired ? "text-destructive" : ""}>
|
|
{formatTimestamp(file.expires_at)}
|
|
</span>
|
|
}
|
|
/>
|
|
)}
|
|
</PropertiesCard>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<DetailLayout
|
|
title="File Details"
|
|
mainContent={mainContent}
|
|
sidebar={sidebar}
|
|
/>
|
|
);
|
|
}
|