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

reduced gap and size, added copy button

This commit is contained in:
Krishav Raj Singh 2025-07-07 22:07:23 +05:30
parent 6347543efe
commit f12a35ce39
2 changed files with 115 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/components/thread/content/ThreadContent.tsx
View File

@ -18,7 +18,44 @@ import { KortixLogo } from '@/components/sidebar/kortix-logo';
import { AgentLoader } from './loader';
import { parseXmlToolCalls, isNewXmlFormat, extractToolNameFromStream } from '@/components/thread/tool-views/xml-parser';
import { parseToolResult } from '@/components/thread/tool-views/tool-result-parser';
import Feedback from '@/components/thread/feedback-modal';
import MessageActions from '@/components/thread/message-actions';
// Utility function to extract clean markdown content with formatting preserved
function extractCleanMarkdownContent(content: string): string {
if (!content) return '';
let processedContent = content;
// Extract text from new format <function_calls><invoke name="ask"><parameter name="text">...</parameter></invoke></function_calls>
const newFormatAskRegex = /<function_calls>[\s\S]*?<invoke\s+name=["']ask["']>[\s\S]*?<parameter\s+name=["']text["']>([\s\S]*?)<\/parameter>[\s\S]*?<\/invoke>[\s\S]*?<\/function_calls>/gi;
const newFormatMatches = [...processedContent.matchAll(newFormatAskRegex)];
for (const match of newFormatMatches) {
const askText = match[1].trim();
processedContent = processedContent.replace(match[0], askText);
}
// Extract text from old format <ask>...</ask>
const oldFormatAskRegex = /<ask[^>]*>([\s\S]*?)<\/ask>/gi;
const oldFormatMatches = [...processedContent.matchAll(oldFormatAskRegex)];
for (const match of oldFormatMatches) {
const askText = match[1].trim();
processedContent = processedContent.replace(match[0], askText);
}
// Remove remaining <function_calls> blocks
processedContent = processedContent.replace(/<function_calls>[\s\S]*?<\/function_calls>/gi, '');
// Remove other individual XML tool call tags (but not ask, since we handled those)
processedContent = processedContent.replace(/<(?!inform\b)([a-zA-Z\-_]+)(?:\s+[^>]*)?>(?:[\s\S]*?)<\/\1>|<(?!inform\b)([a-zA-Z\-_]+)(?:\s+[^>]*)?\/>/g, '');
// Clean up extra whitespace and newlines while preserving markdown structure
return processedContent
.replace(/\n\s*\n\s*\n/g, '\n\n') // Replace multiple newlines with double newlines
.replace(/^\s+|\s+$/g, '') // Trim leading/trailing whitespace
.trim();
}
// Define the set of tags whose raw XML should be hidden during streaming
const HIDE_STREAMING_XML_TAGS = new Set([
@ -410,6 +447,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
type: 'user' | 'assistant_group';
messages: UnifiedMessage[];
key: string;
processedContent?: string;
};
const groupedMessages: MessageGroup[] = [];
let currentGroup: MessageGroup | null = null;
@ -685,6 +723,9 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
const elements: React.ReactNode[] = [];
let assistantMessageCount = 0; // Move this outside the loop
// Collect processed content for the Feedback component
const processedContentParts: string[] = [];
group.messages.forEach((message, msgIndex) => {
if (message.type === 'assistant') {
const parsedContent = safeJsonParse<ParsedContent>(message.content, {});
@ -692,6 +733,12 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
if (!parsedContent.content) return;
// Extract clean content for copying
const cleanContent = extractCleanMarkdownContent(parsedContent.content);
if (cleanContent) {
processedContentParts.push(cleanContent);
}
const renderedContent = renderMarkdownContent(
parsedContent.content,
handleToolClick,
@ -714,6 +761,10 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
}
});
// Store the processed content for the Feedback component
const processedContent = processedContentParts.join('\n\n');
group.processedContent = processedContent;
return elements;
})()}
@ -900,11 +951,25 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
const messageId = firstAssistant?.message_id;
if (!messageId) return null;
// Check if this group is currently streaming
const isCurrentlyStreaming = (() => {
const isLastGroup = groupIndex === finalGroupedMessages.length - 1;
const hasStreamingContent = streamingTextContent || streamingToolCall;
return isLastGroup && hasStreamingContent;
})();
// Don't show actions for streaming messages
if (isCurrentlyStreaming) return null;
// Get the processed content that was stored during rendering
const processedContent = group.processedContent;
return (
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
<Feedback messageId={messageId} initialFeedback={firstAssistant?.user_feedback ?? null} />
<MessageActions
messageId={messageId}
initialFeedback={firstAssistant?.user_feedback ?? null}
processedContent={processedContent}
/>
</div>
);
})()}

60
frontend/src/components/thread/feedback-modal.tsx → frontend/src/components/thread/message-actions.tsx
View File

@ -1,17 +1,18 @@
import { Dialog, DialogTitle, DialogHeader, DialogContent, DialogTrigger, DialogFooter, DialogClose } from "@/components/ui/dialog";
import { Dialog, DialogTitle, DialogHeader, DialogContent, DialogFooter, DialogClose } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { ThumbsDown, ThumbsUp } from "lucide-react";
import { useState } from "react";
import { ThumbsDown, ThumbsUp, Copy } from "lucide-react";
import { memo, useState } from "react";
import { Textarea } from "../ui/textarea";
import { toast } from "sonner";
import { backendApi } from '@/lib/api-client';
interface FeedbackProps {
interface MessageActionsProps {
messageId: string;
initialFeedback?: boolean | null;
processedContent?: string;
}
export default function Feedback({ messageId, initialFeedback = null }: FeedbackProps) {
export default memo(function MessageActions({ messageId, initialFeedback = null, processedContent }: MessageActionsProps) {
const [open, setOpen] = useState(false);
const [submittedFeedback, setSubmittedFeedback] = useState<boolean | null>(initialFeedback);
const [feedback, setFeedback] = useState('');
@ -23,6 +24,20 @@ export default function Feedback({ messageId, initialFeedback = null }: Feedback
setOpen(true);
};
const handleCopy = async () => {
try {
if (processedContent) {
await navigator.clipboard.writeText(processedContent);
toast.success('Response copied to clipboard');
} else {
toast.error('No content to copy');
}
} catch (error) {
console.error('Failed to copy to clipboard:', error);
toast.error('Failed to copy to clipboard');
}
};
const handleSubmit = async () => {
if (currentSelection === null) return;
@ -53,26 +68,45 @@ export default function Feedback({ messageId, initialFeedback = null }: Feedback
const handleOpenChange = (newOpen: boolean) => {
setOpen(newOpen);
if (!newOpen) {
// Reset form state when closing without submitting
setFeedback('');
setCurrentSelection(null);
}
};
return (
<div className="flex items-center p-0">
<div className="flex items-center gap-1 ml-auto justify-end pr-8">
<button
className="h-5 w-5 p-0"
onClick={() => handleClick(true)}
className="h-4 w-4 p-0 rounded-sm hover:bg-muted/50 transition-colors flex items-center justify-center"
onClick={handleCopy}
title="Copy response"
>
<ThumbsUp className={`h-4 w-4 ${submittedFeedback === true ? 'fill-current' : ''}`} />
<Copy className="h-3 w-3 text-muted-foreground hover:text-foreground" />
<span className="sr-only">Copy response</span>
</button>
<button
className="h-4 w-4 p-0 rounded-sm hover:bg-muted/50 transition-colors flex items-center justify-center"
onClick={() => handleClick(true)}
title="Good response"
>
<ThumbsUp className={`h-3 w-3 transition-colors ${
submittedFeedback === true
? 'fill-current'
: 'text-muted-foreground hover:text-foreground'
}`} />
<span className="sr-only">Good response</span>
</button>
<button
className="h-6 w-6 p-0"
className="h-4 w-4 p-0 rounded-sm hover:bg-muted/50 transition-colors flex items-center justify-center"
onClick={() => handleClick(false)}
title="Bad response"
>
<ThumbsDown className={`h-4 w-4 ${submittedFeedback === false ? 'fill-current' : ''}`} />
<ThumbsDown className={`h-3 w-3 transition-colors ${
submittedFeedback === false
? 'fill-current'
: 'text-muted-foreground hover:text-foreground'
}`} />
<span className="sr-only">Bad response</span>
</button>
@ -109,4 +143,4 @@ export default function Feedback({ messageId, initialFeedback = null }: Feedback
</Dialog>
</div>
);
}
});