From f2493f7aead694722ba3d86e413cd41fb0002fff Mon Sep 17 00:00:00 2001 From: marko-kraemer Date: Mon, 21 Apr 2025 14:45:38 +0100 Subject: [PATCH] v1 user msg --- .../(dashboard)/agents/[threadId]/page.tsx | 63 ++++++++++++++++++- frontend/src/components/thread/chat-input.tsx | 2 +- .../components/thread/file-viewer-modal.tsx | 38 +++++------ 3 files changed, 80 insertions(+), 23 deletions(-) diff --git a/frontend/src/app/(dashboard)/agents/[threadId]/page.tsx b/frontend/src/app/(dashboard)/agents/[threadId]/page.tsx index 8260e2d3..cac2ce14 100644 --- a/frontend/src/app/(dashboard)/agents/[threadId]/page.tsx +++ b/frontend/src/app/(dashboard)/agents/[threadId]/page.tsx @@ -1205,10 +1205,71 @@ export default function ThreadPage({ params }: { params: Promise } } })(); + // Extract attachments from the message content + const attachmentsMatch = messageContent.match(/\[Uploaded File: (.*?)\]/g); + const attachments = attachmentsMatch + ? attachmentsMatch.map(match => { + const pathMatch = match.match(/\[Uploaded File: (.*?)\]/); + return pathMatch ? pathMatch[1] : null; + }).filter(Boolean) + : []; + + // Remove attachment info from the message content + const cleanContent = messageContent.replace(/\[Uploaded File: .*?\]/g, '').trim(); + return (
- {messageContent} +
+ {cleanContent && ( + {cleanContent} + )} + + {attachments.length > 0 && ( +
+
+ {attachments.map((attachment, idx) => { + const extension = attachment.split('.').pop()?.toLowerCase(); + const filename = attachment.split('/').pop() || 'file'; + + // Define file size (in a real app, this would come from the backend) + const fileSize = + extension === 'html' ? '52.68 KB' : + attachment.includes('itinerary') ? '4.14 KB' : + attachment.includes('proposal') ? '6.20 KB' : + attachment.includes('todo') ? '1.89 KB' : + attachment.includes('research') ? '3.75 KB' : + `${(Math.random() * 5 + 1).toFixed(2)} KB`; + + // Get file type display + const fileType = extension === 'html' ? 'Code' : 'Text'; + + return ( + + ); + })} +
+
+ )} +
); diff --git a/frontend/src/components/thread/chat-input.tsx b/frontend/src/components/thread/chat-input.tsx index d3a0f3e9..d90ac88e 100644 --- a/frontend/src/components/thread/chat-input.tsx +++ b/frontend/src/components/thread/chat-input.tsx @@ -134,7 +134,7 @@ export function ChatInput({ if (uploadedFiles.length > 0) { const fileInfo = uploadedFiles.map(file => - `[Uploaded file: ${file.name} (${formatFileSize(file.size)}) at ${file.path}]` + `[Uploaded File: ${file.path}]` ).join('\n'); message = message ? `${message}\n\n${fileInfo}` : fileInfo; } diff --git a/frontend/src/components/thread/file-viewer-modal.tsx b/frontend/src/components/thread/file-viewer-modal.tsx index b04bdd32..52b08429 100644 --- a/frontend/src/components/thread/file-viewer-modal.tsx +++ b/frontend/src/components/thread/file-viewer-modal.tsx @@ -620,40 +620,36 @@ export function FileViewerModal({ // Mark the initial path as processed so this doesn't run again setInitialPathProcessed(true); - - // We don't need to open the file here; the file loading useEffect - // combined with the logic below will handle it once files are loaded. - } else if (!open) { // Reset the processed flag when the modal closes console.log('[FILE VIEWER] useEffect[initialFilePath]: Modal closed, resetting initialPathProcessed flag.'); setInitialPathProcessed(false); } - }, [open, initialFilePath, initialPathProcessed, normalizePath, currentPath]); // Dependencies carefully chosen + }, [open, initialFilePath, initialPathProcessed, normalizePath, currentPath]); // Effect to open the initial file *after* the correct directory files are loaded useEffect(() => { // Only run if initial path was processed, files are loaded, and no file is currently selected if (initialPathProcessed && !isLoadingFiles && files.length > 0 && !selectedFilePath && initialFilePath) { - console.log('[FILE VIEWER] useEffect[openInitialFile]: Checking for initial file now that files are loaded.'); + console.log('[FILE VIEWER] useEffect[openInitialFile]: Checking for initial file now that files are loaded.'); + + const fullPath = normalizePath(initialFilePath); + const lastSlashIndex = fullPath.lastIndexOf('/'); + const targetFileName = lastSlashIndex >= 0 ? fullPath.substring(lastSlashIndex + 1) : ''; + + if (targetFileName) { + console.log(`[FILE VIEWER] useEffect[openInitialFile]: Looking for file: ${targetFileName} in current directory: ${currentPath}`); + const targetFile = files.find(f => f.name === targetFileName && f.path === fullPath); - const fullPath = normalizePath(initialFilePath); - const lastSlashIndex = fullPath.lastIndexOf('/'); - const targetFileName = lastSlashIndex >= 0 ? fullPath.substring(lastSlashIndex + 1) : ''; - - if (targetFileName) { - console.log(`[FILE VIEWER] useEffect[openInitialFile]: Looking for file: ${targetFileName} in current directory: ${currentPath}`); - const targetFile = files.find(f => f.name === targetFileName && f.path === fullPath); - - if (targetFile && !targetFile.is_dir) { - console.log(`[FILE VIEWER] useEffect[openInitialFile]: Found initial file, opening: ${targetFile.path}`); - openFile(targetFile); - } else { - console.log(`[FILE VIEWER] useEffect[openInitialFile]: Initial file ${targetFileName} not found in loaded files or is a directory.`); - } + if (targetFile && !targetFile.is_dir) { + console.log(`[FILE VIEWER] useEffect[openInitialFile]: Found initial file, opening: ${targetFile.path}`); + openFile(targetFile); + } else { + console.log(`[FILE VIEWER] useEffect[openInitialFile]: Initial file ${targetFileName} not found in loaded files or is a directory.`); } + } } - }, [initialPathProcessed, isLoadingFiles, files, selectedFilePath, initialFilePath, normalizePath, currentPath, openFile]); // Depends on files being loaded + }, [initialPathProcessed, isLoadingFiles, files, selectedFilePath, initialFilePath, normalizePath, currentPath, openFile]); // --- Render --- // return (