reduced gap and size, added copy button

frontend/src/components/thread/content/ThreadContent.tsx

@@ -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>
                                                         );
                                                     })()}

frontend/src/components/thread/message-actions.tsx

@@ -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 { ThumbsDown, ThumbsUp, Copy } from "lucide-react";
-import { useState } from "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" 
+        className="h-4 w-4 p-0 rounded-sm hover:bg-muted/50 transition-colors flex items-center justify-center" 
-        onClick={() => handleClick(true)}
+        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>
   );
-}
+});