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

fix x2 attachments

This commit is contained in:
LE Quoc Dat 2025-04-21 18:30:08 +01:00 committed by marko-kraemer
parent 5ea73cbc17
commit 447dfd982b
1 changed files with 61 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/src/app/(dashboard)/agents/[threadId]/page.tsx
View File

@ -111,26 +111,62 @@ function renderMarkdownContent(content: string, handleToolClick: (assistantMessa
const contentMatch = rawXml.match(/<ask[^>]*>([\s\S]*?)<\/ask>/i);
const askContent = contentMatch ? contentMatch[1] : '';
// Render <ask> tag content with attachment UI
// Render <ask> tag content with attachment UI (using the helper)
contentParts.push(
<div key={`ask-${match.index}`} className="space-y-3">
<Markdown className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none break-words [&>:first-child]:mt-0 prose-headings:mt-3">{askContent}</Markdown>
{renderAttachments(attachments, fileViewerHandler)}
</div>
);
} else {
// Render tool button as a clickable element
contentParts.push(
<button
key={toolCallKey}
onClick={() => handleToolClick(messageId, toolName)}
className="inline-flex items-center gap-1.5 py-1 px-2.5 my-1 text-xs text-muted-foreground bg-muted hover:bg-muted/80 rounded-md transition-colors cursor-pointer border border-border"
>
<IconComponent className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
<span className="font-mono text-xs text-foreground">{toolName}</span>
{paramDisplay && <span className="ml-1 text-muted-foreground truncate max-w-[200px]" title={paramDisplay}>{paramDisplay}</span>}
</button>
);
}
lastIndex = xmlRegex.lastIndex;
}
{attachments.length > 0 && (
// Add text after the last tag
if (lastIndex < content.length) {
contentParts.push(
<Markdown key={`md-${lastIndex}`} className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none break-words">{content.substring(lastIndex)}</Markdown>
);
}
return contentParts;
}
// Helper function to render attachments (now deduplicated)
function renderAttachments(attachments: string[], fileViewerHandler?: (filePath?: string) => void) {
if (!attachments || attachments.length === 0) return null;
// Deduplicate attachments using Set for simplicity
const uniqueAttachments = [...new Set(attachments)];
return (
<div className="mt-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{attachments.map((attachment, idx) => {
{uniqueAttachments.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)
// Define file size (placeholder logic)
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`;
`${(attachment.length % 5 + 1).toFixed(2)} KB`; // Use length for pseudo-stable size
// Get file type display
const fileType = extension === 'html' ? 'Code' : 'Text';
@ -159,34 +195,7 @@ function renderMarkdownContent(content: string, handleToolClick: (assistantMessa
})}
</div>
</div>
)}
</div>
);
} else {
// Render tool button as a clickable element
contentParts.push(
<button
key={toolCallKey}
onClick={() => handleToolClick(messageId, toolName)}
className="inline-flex items-center gap-1.5 py-1 px-2.5 my-1 text-xs text-muted-foreground bg-muted hover:bg-muted/80 rounded-md transition-colors cursor-pointer border border-border"
>
<IconComponent className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
<span className="font-mono text-xs text-foreground">{toolName}</span>
{paramDisplay && <span className="ml-1 text-muted-foreground truncate max-w-[200px]" title={paramDisplay}>{paramDisplay}</span>}
</button>
);
}
lastIndex = xmlRegex.lastIndex;
}
// Add text after the last tag
if (lastIndex < content.length) {
contentParts.push(
<Markdown key={`md-${lastIndex}`} className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none break-words">{content.substring(lastIndex)}</Markdown>
);
}
return contentParts;
}
export default function ThreadPage({ params }: { params: Promise<ThreadParams> }) {
@ -1353,50 +1362,8 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
<Markdown className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none [&>:first-child]:mt-0 prose-headings:mt-3">{cleanContent}</Markdown>
)}
{attachments.length > 0 && (
<div className="mt-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{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 (
<button
key={`attachment-${idx}`}
onClick={() => handleOpenFileViewer(attachment)}
className="group flex items-center gap-3 p-4 rounded-md bg-muted/10 hover:bg-muted/20 transition-colors"
>
<div className="flex items-center justify-center">
<File className="h-5 w-5 text-muted-foreground" />
</div>
<div className="flex-1 min-w-0 text-left">
<div className="text-sm font-medium text-foreground truncate">
{filename}
</div>
<div className="text-xs text-muted-foreground flex items-center gap-1">
<span>{fileType}</span>
<span>·</span>
<span>{fileSize}</span>
</div>
</div>
</button>
);
})}
</div>
</div>
)}
{/* Use the helper function to render user attachments */}
{renderAttachments(attachments as string[], handleOpenFileViewer)}
</div>
</div>
</div>