update

frontend/README.md

@@ -71,8 +71,3 @@ Yes, you can!
 To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
 
 Read more here: [Setting up a custom domain](https://docs.lovable.dev/tips-tricks/custom-domain#step-by-step-guide)
-
-
-TODO:
-
-make it that the think messege is by default colapsed and can be exapnded. implement that in a creative modern way. and make the thinking animation more noticable. also messeges after a certain msg variation are belong to that specific variention so when we switch between varietions other messages that belongs to that variention needs to be changed too. also i had to regenrate to make it the first varietion and then again to second varietion. but thats not how it needs to be. every messege is by default the first varietion. so if we regenerate the message it becomes second varietion.

frontend/src/components/chat/ChatBubble.tsx

@@ -8,27 +8,10 @@ import { Avatar, AvatarFallback } from "../ui/avatar";
 import { ChatMessage } from "./ChatMessage";
 import { ThinkingAnimation } from "./ThinkingAnimation";
 import { toast } from '../ui/sonner';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
-
-interface MessageVariation {
-  id: string;
-  content: string;
-  timestamp: Date;
-}
-
-interface Message {
-  id: string;
-  content: string;
-  sender: "user" | "system";
-  timestamp: Date;
-  isLoading?: boolean;
-  error?: boolean;
-  result?: any;
-  variations?: MessageVariation[];
-  activeVariation?: string;
-}
+import { MessageActions } from "./MessageActions";
+import { MessageVariationControls } from "./MessageVariationControls";
+import { DeleteMessageDialog } from "./DeleteMessageDialog";
+import { MessageVariation, Message } from "@/types/chat";
 
 interface ChatBubbleProps {
   message: Message;
@@ -49,9 +32,8 @@ export const ChatBubble = ({
 }: ChatBubbleProps) => {
   const [copied, setCopied] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const isWelcomeMessage = message.id === "welcomems"
+  const isWelcomeMessage = message.id === "welcomems";
   const isSystem = message.sender === "system";
-  const showCopyButton = true;
   const hasVariations = isSystem && message.variations && message.variations.length > 0;
   
   // If the message has variations, display the active one or the first one
@@ -60,7 +42,9 @@ export const ChatBubble = ({
     : message.content;
   
   const copyToClipboard = () => {
-    navigator.clipboard.writeText(displayContent);
+    // Strip thinking content before copying
+    const cleanContent = displayContent.replace(/<think>[\s\S]*?<\/think>/g, '').trim();
+    navigator.clipboard.writeText(cleanContent);
     setCopied(true);
     toast.success('Copied to clipboard!');
     setTimeout(() => setCopied(false), 2000);
@@ -73,43 +57,11 @@ export const ChatBubble = ({
     }
   };
 
-  const handleSelectVariation = (variationId: string) => {
-    if (onSelectVariation) {
-      onSelectVariation(message.id, variationId);
-    }
-  };
-
-  // Function to get the current variation index and navigate through variations
-  const navigateVariations = (direction: 'prev' | 'next') => {
-    if (!hasVariations || !message.variations || message.variations.length <= 1) return;
-    
-    const currentIndex = message.activeVariation 
-      ? message.variations.findIndex(v => v.id === message.activeVariation)
-      : 0;
-      
-    let newIndex;
-    if (direction === 'prev') {
-      newIndex = (currentIndex - 1 + message.variations.length) % message.variations.length;
-    } else {
-      newIndex = (currentIndex + 1) % message.variations.length;
-    }
-    
-    handleSelectVariation(message.variations[newIndex].id);
-  };
-
-  // Get current variation index for display
-  const getCurrentVariationIndex = () => {
-    if (!hasVariations || !message.variations) return 0;
-    return message.activeVariation 
-      ? message.variations.findIndex(v => v.id === message.activeVariation) + 1
-      : 1;
-  };
-
   return (
     <>
       <div
         className={cn(
-          "group flex w-full animate-slide-in mb-4",
+          "group flex w-full animate-slide-in mb-2",
           isSystem ? "justify-start" : "justify-end"
         )}
       >
@@ -146,134 +98,46 @@ export const ChatBubble = ({
             </div>
             
             {/* Chat bubble footer */}
-            <div className="flex flex-row chat-bubble-footer justify-between">
+            <div className="flex flex-row chat-bubble-footer justify-between items-center mt-1">
               {/* Time */}
               <div className={cn(
-                "text-xs text-muted-foreground mt-1",
+                "text-xs text-muted-foreground",
                 isSystem ? "text-left" : "text-right"
               )}>
                 {format(message.timestamp, "h:mm a")}
               </div>
-              {/* Controls */}
-              {!isWelcomeMessage && <div className="controls flex gap-1">
-                {/* Variation Navigation */}
-                {hasVariations && message.variations && message.variations.length > 1 && (
-                  <div className="flex items-center mt-1 opacity-0 group-hover:opacity-100 transition-opacity bg-background/50 rounded-md border">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => navigateVariations('prev')}
-                      disabled={message.variations.length <= 1}
-                      className="h-6 px-1"
-                    >
-                      <ChevronLeft className="h-3 w-3" />
-                    </Button>
-                    <span className="text-xs px-1">
-                      {getCurrentVariationIndex()}/{message.variations.length}
-                    </span>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => navigateVariations('next')}
-                      disabled={message.variations.length <= 1}
-                      className="h-6 px-1"
-                    >
-                      <ChevronRight className="h-3 w-3" />
-                    </Button>
-                  </div>
-                )}
               
-                {/* Retry button for failed messages */}
-                {message.error && onRetry && (
-                  <div className="flex mt-1">
-                    <Button
-                      variant="secondary"
-                      size="sm"
-                      onClick={() => onRetry(message.id)}
-                      className="text-xs flex items-center gap-1.5 text-muted-foreground hover:border border-financial-accent/30 bg-background/50 backdrop-blur-sm"
-                    >
-                      <RefreshCcw className="h-3 w-3" />
-                      Retry
-                    </Button>
-                  </div>
-                )}
-                
-                {/* Regenerate button for system messages */}
-                {isSystem && !message.isLoading && onRegenerate && (
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <div className="flex mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                          <Button
-                            variant="link"
-                            size="sm"
-                            onClick={() => onRegenerate(message.id)}
-                          >
-                            <RotateCcw className="h-3 w-3" />
-                          </Button>
-                        </div>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Generate variation</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                )}
-                
-                {/* Delete button */}
-                {onDelete && !message.isLoading && (
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <div className="flex mt-1 opacity-0 group-hover:opacity-100">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => setDeleteDialogOpen(true)}
-                            className="text-xs flex items-center gap-1.5 text-muted-foreground hover:text-destructive hover:bg-background/50 backdrop-blur-sm"
-                          >
-                            <Trash2 className="h-3 w-3" />
-                          </Button>
-                        </div>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Delete message</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                )}
+              {/* Controls */}
+              {!isWelcomeMessage && (
+                <div className="controls flex gap-1 items-center">
+                  {/* Variation controls */}
+                  {hasVariations && message.variations && message.variations.length > 1 && (
+                    <MessageVariationControls 
+                      message={message}
+                      onSelectVariation={onSelectVariation}
+                    />
+                  )}
                 
-                {/* Copy */}
-                {showCopyButton && !message.isLoading && (
-                  <div className="relative top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <Button variant="link" size="sm" onClick={copyToClipboard}>
-                      {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-                    </Button>
-                  </div>
-                )}
-              </div>}
+                  <MessageActions 
+                    message={message}
+                    onRetry={onRetry}
+                    onRegenerate={onRegenerate}
+                    onDelete={() => setDeleteDialogOpen(true)}
+                    onCopy={copyToClipboard}
+                    copied={copied}
+                  />
+                </div>
+              )}
             </div>
           </div>
         </div>
       </div>
       
-      {/* Delete confirmation dialog */}
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete Message</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to delete this message? This action cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteMessageDialog 
+        isOpen={deleteDialogOpen} 
+        onOpenChange={setDeleteDialogOpen}
+        onDelete={handleDelete}
+      />
     </>
   );
 };

frontend/src/components/chat/ChatInterface.tsx

@@ -7,7 +7,7 @@ import { ChatBubble } from "@/components/chat/ChatBubble";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 import { storage, STORAGE_KEYS } from "@/lib/storage";
-import { Message, Chat } from "@/types/chat";
+import { Message, Chat, MessageVariation } from "@/types/chat";
 import { ProfileModal } from "../modals/ProfileModal";
 import { ChatSidebar } from "./ChatSidebar";
 import { ChatInputArea } from "./ChatInputArea";
@@ -195,6 +195,28 @@ export const ChatInterface = ({ onOpenSettings, onOpenSources }: ChatInterfacePr
       isLoading: true
     };
 
+    // Find the active variation if we're replying to a message that has variations
+    let parentVariationId: string | undefined;
+    let parentMessageId: string | undefined;
+    
+    // Find the last system message that might have variations
+    const lastMessages = [...activeChat.messages].reverse();
+    for (const msg of lastMessages) {
+      if (msg.sender === "system" && msg.variations && msg.variations.length > 0 && msg.activeVariation) {
+        parentMessageId = msg.id;
+        parentVariationId = msg.activeVariation;
+        break;
+      }
+    }
+    
+    // If responding to a variation, link these messages to that variation
+    if (parentMessageId && parentVariationId) {
+      userMessage.parentMessageId = parentMessageId;
+      userMessage.variationId = parentVariationId;
+      loadingMessage.parentMessageId = parentMessageId;
+      loadingMessage.variationId = parentVariationId;
+    }
+
     // Update active chat with new messages
     const updatedChat = {
       ...activeChat,
@@ -207,14 +229,51 @@ export const ChatInterface = ({ onOpenSettings, onOpenSources }: ChatInterfacePr
     setIsLoading(true);
 
     try {
-      // Prepare chat history for the API
-      const chatHistory: APIMessage[] = updatedChat.messages
-        .filter(msg => !msg.isLoading && msg.content) // filter out loading messages
-        .slice(0, -1) // exclude the loading message we just added
-        .map(msg => ({
+      // Prepare chat history for the API based on the active variation path
+      const chatHistory: APIMessage[] = [];
+      
+      // Build chat history based on the active variation path
+      const getMessagesForHistory = (messages: Message[]): Message[] => {
+        const result: Message[] = [];
+        
+        for (const msg of messages) {
+          if (msg.isLoading) continue;
+          
+          // If this is a system message with variations, use the active variation content
+          if (msg.sender === "system" && msg.variations && msg.variations.length > 0 && msg.activeVariation) {
+            const activeVar = msg.variations.find(v => v.id === msg.activeVariation);
+            if (activeVar) {
+              // Add the message with the active variation content
+              result.push({
+                ...msg,
+                content: activeVar.content
+              });
+            }
+          } else {
+            // Add regular messages
+            result.push(msg);
+          }
+        }
+        
+        return result;
+      };
+      
+      // Get messages following the active variation path
+      const historyMessages = getMessagesForHistory(updatedChat.messages.slice(0, -2));
+      
+      // Convert to API format
+      for (const msg of historyMessages) {
+        if (!msg.content) continue;
+        
+        // Strip thinking content from messages before sending to API
+        const cleanedContent = msg.content.replace(/<think>[\s\S]*?<\/think>/g, '').trim();
+        if (!cleanedContent) continue;
+        
+        chatHistory.push({
           role: msg.sender === "user" ? "user" : "assistant",
-          content: msg.content
-        }));
+          content: cleanedContent
+        });
+      }
 
       const response = await apiService.queryRulings({
         query: userMessage.content,
@@ -228,7 +287,9 @@ export const ChatInterface = ({ onOpenSettings, onOpenSources }: ChatInterfacePr
             ...msg,
             content: response.answer,
             isLoading: false,
-            result: response.retrieved_sources
+            result: response.retrieved_sources,
+            variations: [{ id: loadingMessage.id + "-original", content: response.answer, timestamp: new Date() }],
+            activeVariation: loadingMessage.id + "-original"
           }
           : msg
       );
@@ -405,9 +466,15 @@ export const ChatInterface = ({ onOpenSettings, onOpenSources }: ChatInterfacePr
     const variationId = generateId();
     const now = new Date();
     
-    // Prepare the updated message with a loading variation
-    const variations = message.variations || [];
-    const existingVariations = variations.map(v => ({ ...v }));
+    // Get existing variations or initialize if none exist
+    let existingVariations = message.variations || [];
+    
+    // If there are no variations yet, add the original content as the first variation
+    if (existingVariations.length === 0) {
+      existingVariations = [
+        { id: message.id + "-original", content: message.content, timestamp: message.timestamp }
+      ];
+    }
     
     // Create a new variations array with the loading state
     const updatedVariations = [
@@ -424,23 +491,30 @@ export const ChatInterface = ({ onOpenSettings, onOpenSources }: ChatInterfacePr
       activeVariation: variationId
     };
     
+    // Find and remove any messages that were children of the previous variation
+    // We'll preserve the core tree but remove messages specific to other variations
+    const messagesToKeep = updatedMessages.slice(0, messageIndex + 1);
+    
     const updatedChat = {
       ...activeChat,
-      messages: updatedMessages
+      messages: messagesToKeep
     };
     
     setActiveChat(updatedChat);
     setIsLoading(true);
     
-    // Prepare chat history for the API
-    // Include only the messages up to the user message that triggered the original response
+    // Prepare chat history for the API - strip thinking content
     const chatHistory: APIMessage[] = activeChat.messages
       .slice(0, userMessageIndex)
       .filter(msg => !msg.isLoading && msg.content)
-      .map(msg => ({
-        role: msg.sender === "user" ? "user" : "assistant",
-        content: msg.content
-      }));
+      .map(msg => {
+        // Strip thinking content from messages
+        const cleanedContent = msg.content.replace(/<think>[\s\S]*?<\/think>/g, '').trim();
+        return {
+          role: msg.sender === "user" ? "user" : "assistant",
+          content: cleanedContent
+        };
+      });
     
     // Send the API request
     apiService.queryRulings({
@@ -455,7 +529,7 @@ export const ChatInterface = ({ onOpenSettings, onOpenSources }: ChatInterfacePr
             : v
         );
         
-        const finalMessages = [...updatedMessages];
+        const finalMessages = [...messagesToKeep];
         finalMessages[messageIndex] = {
           ...finalMessages[messageIndex],
           variations: finalVariations,
@@ -515,16 +589,26 @@ export const ChatInterface = ({ onOpenSettings, onOpenSources }: ChatInterfacePr
     const messageIndex = activeChat.messages.findIndex(msg => msg.id === messageId);
     if (messageIndex < 0) return;
     
-    // Set the active variation
+    // Update the active variation for this message
     const updatedMessages = [...activeChat.messages];
     updatedMessages[messageIndex] = {
       ...updatedMessages[messageIndex],
       activeVariation: variationId
     };
     
+    // Keep messages up to and including the varied message
+    const baseMessages = updatedMessages.slice(0, messageIndex + 1);
+    
+    // Find any existing messages that belong to this variation
+    const childMessages = activeChat.messages
+      .filter(msg => msg.parentMessageId === messageId && msg.variationId === variationId);
+    
+    // Combine to get the complete message list
+    const finalMessages = [...baseMessages, ...childMessages];
+    
     const updatedChat = {
       ...activeChat,
-      messages: updatedMessages
+      messages: finalMessages
     };
     
     setActiveChat(updatedChat);
@@ -723,3 +807,5 @@ export const ChatInterface = ({ onOpenSettings, onOpenSources }: ChatInterfacePr
     </>
   );
 };
+
+export default ChatInterface;

frontend/src/components/chat/ChatMessage.tsx

@@ -1,11 +1,12 @@
 
-// src/components/ChatMessage.tsx
+// src/components/chat/ChatMessage.tsx
 import React, { useState, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import { cn } from '@/lib/utils'
-import { toast } from '../ui/sonner'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible'
+import { ChevronDown, Brain } from 'lucide-react'
 
 interface ChatMessageProps {
   content: string
@@ -16,34 +17,44 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
   content,
   className,
 }) => {
+  // Extract thinking content and actual response
+  const { processedContent, thinkingBlocks } = useMemo(() => {
+    const blocks: { id: number; content: string }[] = [];
+    let thinkBlockCounter = 0;
 
-  // Process thinking tags
-  const processedContent = useMemo(() => {
-    // Replace <think>...</think> tags with a special format
-    const contentWithProcessedThinking = content.replace(
+    // Extract thinking content between <think> tags
+    const contentWithoutThinking = content.replace(
       /<think>([\s\S]*?)<\/think>/g,
       (_, thinkContent) => {
-        return `<div class="think-block">${thinkContent}</div>`;
+        blocks.push({ 
+          id: thinkBlockCounter++, 
+          content: thinkContent.trim() 
+        });
+        return ''; // Remove thinking content from the main message
       }
     );
 
-    // Continue processing source tags as before
-    return contentWithProcessedThinking.replace(
+    // Continue processing source tags
+    const processedText = contentWithoutThinking.replace(
       /<source\s+path=["'](.+?)["']\s*\/>/g,
       (_match, path) => {
         const filename = path
           .split('/')
           .pop()!
           .replace(/\.[^/.]+$/, '')
-        // embed your ExternalLink SVG inline so you get the icon
         return `<a href="${path}" target="_blank" class="inline-flex items-center text-xs font-medium mx-0.5 rounded-sm px-1 bg-financial-accent/10 text-financial-accent border border-financial-accent/20 hover:bg-financial-accent/20 transition-colors">
             ${filename}
             <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
               <path stroke-linecap="round" stroke-linejoin="round" d="M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6m0 0v6m0-6L10 14"/>
             </svg>
-          </a>`
+          </a>`;
       }
     );
+
+    return { 
+      processedContent: processedText.trim(), 
+      thinkingBlocks: blocks 
+    };
   }, [content]);
 
   return (
@@ -53,30 +64,64 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
         className
       )}
     >
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeRaw]}
-        components={{
-          // style your normal links if you like
-          a: ({ href, children, node, ...props }) =>
-            href && href.endsWith('.md') ? (
-              <a
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-                {...props}
-              >
-                {children}
-              </a>
-            ) : (
-              <a href={href} {...props}>
-                {children}
-              </a>
-            ),
-        }}
-      >
-        {processedContent}
-      </ReactMarkdown>
+      {/* First render the thinking blocks if any */}
+      {thinkingBlocks.length > 0 && (
+        <Collapsible 
+          className="think-collapsible my-3 rounded-lg bg-financial-accent/5 mb-4"
+          defaultOpen={false}
+        >
+          <CollapsibleTrigger className="flex items-center gap-2 w-full p-2 text-left hover:bg-financial-accent/10 rounded-t-lg">
+            <div className="flex items-center gap-2 w-full">
+              <div className="thinking-brain-small relative">
+                <Brain className="h-4 w-4 text-financial-accent" />
+              </div>
+              <span className="text-xs font-medium text-financial-accent">Thoughts</span>
+              <ChevronDown className="h-4 w-4 text-financial-accent/70 transition-transform duration-200 ml-auto" />
+            </div>
+          </CollapsibleTrigger>
+          
+          <CollapsibleContent>
+            <div className="think-block p-3 text-sm text-muted-foreground bg-financial-accent/5">
+              {thinkingBlocks.map((block, index) => (
+                <ReactMarkdown 
+                  key={`thinking-${block.id}`}
+                  remarkPlugins={[remarkGfm]} 
+                  rehypePlugins={[rehypeRaw]}
+                >
+                  {block.content}
+                </ReactMarkdown>
+              ))}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+
+      {/* Then render the actual response content */}
+      {processedContent && (
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeRaw]}
+          components={{
+            a: ({ href, children, node, ...props }) =>
+              href && href.endsWith('.md') ? (
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  {...props}
+                >
+                  {children}
+                </a>
+              ) : (
+                <a href={href} {...props}>
+                  {children}
+                </a>
+              ),
+          }}
+        >
+          {processedContent}
+        </ReactMarkdown>
+      )}
     </div>
   )
 }

frontend/src/components/chat/DeleteMessageDialog.tsx

@@ -0,0 +1,46 @@
+
+import React from 'react';
+import { 
+  AlertDialog, 
+  AlertDialogAction, 
+  AlertDialogCancel, 
+  AlertDialogContent, 
+  AlertDialogDescription, 
+  AlertDialogFooter, 
+  AlertDialogHeader, 
+  AlertDialogTitle 
+} from "@/components/ui/alert-dialog";
+
+interface DeleteMessageDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onDelete: () => void;
+}
+
+export const DeleteMessageDialog: React.FC<DeleteMessageDialogProps> = ({
+  isOpen,
+  onOpenChange,
+  onDelete
+}) => {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Message</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete this message? This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction 
+            onClick={onDelete} 
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

frontend/src/components/chat/MessageActions.tsx

@@ -0,0 +1,99 @@
+
+import React from 'react';
+import { RefreshCcw, Copy, Check, Trash2, RotateCcw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Message } from "@/types/chat";
+
+interface MessageActionsProps {
+  message: Message;
+  onRetry?: (messageId: string) => void;
+  onRegenerate?: (messageId: string) => void;
+  onDelete?: () => void;
+  onCopy?: () => void;
+  copied?: boolean;
+}
+
+export const MessageActions: React.FC<MessageActionsProps> = ({
+  message,
+  onRetry,
+  onRegenerate,
+  onDelete,
+  onCopy,
+  copied = false
+}) => {
+  const isSystem = message.sender === "system";
+  
+  return (
+    <>
+      {/* Retry button for failed messages */}
+      {message.error && onRetry && (
+        <div className="flex">
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => onRetry(message.id)}
+            className="text-xs flex items-center gap-1.5 text-muted-foreground hover:border border-financial-accent/30 bg-background/50 backdrop-blur-sm"
+          >
+            <RefreshCcw className="h-3 w-3" />
+            Retry
+          </Button>
+        </div>
+      )}
+      
+      {/* Regenerate button for system messages */}
+      {isSystem && !message.isLoading && onRegenerate && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex opacity-0 group-hover:opacity-100 transition-opacity">
+                <Button
+                  variant="link"
+                  size="sm"
+                  onClick={() => onRegenerate(message.id)}
+                >
+                  <RotateCcw className="h-3 w-3" />
+                </Button>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Generate variation</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+      
+      {/* Delete button */}
+      {onDelete && !message.isLoading && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex opacity-0 group-hover:opacity-100">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onDelete}
+                  className="text-xs flex items-center gap-1.5 text-muted-foreground hover:text-destructive hover:bg-background/50 backdrop-blur-sm"
+                >
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Delete message</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+      
+      {/* Copy button */}
+      {onCopy && !message.isLoading && (
+        <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+          <Button variant="link" size="sm" onClick={onCopy}>
+            {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};

frontend/src/components/chat/MessageVariationControls.tsx

@@ -0,0 +1,68 @@
+
+import React from 'react';
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Message } from "@/types/chat";
+
+interface MessageVariationControlsProps {
+  message: Message;
+  onSelectVariation?: (messageId: string, variationId: string) => void;
+}
+
+export const MessageVariationControls: React.FC<MessageVariationControlsProps> = ({
+  message,
+  onSelectVariation
+}) => {
+  if (!message.variations || message.variations.length <= 1 || !onSelectVariation) {
+    return null;
+  }
+  
+  // Function to get the current variation index and navigate through variations
+  const navigateVariations = (direction: 'prev' | 'next') => {
+    const currentIndex = message.activeVariation 
+      ? message.variations!.findIndex(v => v.id === message.activeVariation)
+      : 0;
+      
+    let newIndex;
+    if (direction === 'prev') {
+      newIndex = (currentIndex - 1 + message.variations!.length) % message.variations!.length;
+    } else {
+      newIndex = (currentIndex + 1) % message.variations!.length;
+    }
+    
+    onSelectVariation(message.id, message.variations![newIndex].id);
+  };
+
+  // Get current variation index for display
+  const getCurrentVariationIndex = () => {
+    return message.activeVariation 
+      ? message.variations!.findIndex(v => v.id === message.activeVariation) + 1
+      : 1;
+  };
+  
+  return (
+    <div className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity bg-background/50 rounded-md border shadow-sm">
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => navigateVariations('prev')}
+        className="h-6 w-6 p-0 flex items-center justify-center"
+        aria-label="Previous variation"
+      >
+        <ChevronLeft className="h-3 w-3" />
+      </Button>
+      <span className="text-xs px-1.5 font-medium">
+        {getCurrentVariationIndex()}/{message.variations.length}
+      </span>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => navigateVariations('next')}
+        className="h-6 w-6 p-0 flex items-center justify-center"
+        aria-label="Next variation"
+      >
+        <ChevronRight className="h-3 w-3" />
+      </Button>
+    </div>
+  );
+};

frontend/src/components/chat/ThinkingAnimation.tsx

@@ -1,49 +1,36 @@
 
+import { Brain } from "lucide-react";
 import { useState, useEffect } from "react";
 
 export const ThinkingAnimation = () => {
   const [dots, setDots] = useState(0);
-  
+
   useEffect(() => {
     const interval = setInterval(() => {
       setDots((prev) => (prev + 1) % 4);
     }, 400);
-    
+
     return () => clearInterval(interval);
   }, []);
-  
+
   return (
-    <div className="flex flex-col items-start gap-2 px-4 py-3">
-      <div className="thinking-brain">
-        <svg viewBox="0 0 24 24" width="24" height="24" className="thinking-brain-svg">
-          <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2h5Z" 
-            className="fill-financial-accent/20 stroke-financial-accent stroke-[1.5]" />
-          <path d="M12 4.5A2.5 2.5 0 0 1 14.5 2h5A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 12 19.5v-15Z" 
-            className="fill-financial-accent/10 stroke-financial-accent stroke-[1.5]" />
-          <path d="M6 12h4" className="stroke-financial-accent stroke-[1.5]" />
-          <path d="M14 12h4" className="stroke-financial-accent stroke-[1.5]" />
-          <path d="M13.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
-          <path d="M16.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
-          <path d="M13.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
-          <path d="M16.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
-          <path d="M9.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
-          <path d="M6.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
-          <path d="M9.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
-          <path d="M6.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
-        </svg>
-        <div className="thinking-waves">
-          <span></span>
-          <span></span>
-          <span></span>
+    <div className="flex items-center gap-2 px-4 py-1">
+      <div className="thinking-brain-svg relative flex items-center justify-center">
+        <Brain className="h-4 w-4 text-financial-accent" />
+        <div className="thinking-waves-enhanced flex items-center justify-center absolute inset-0">
+          <span className="block absolute border-4 border-financial-accent/20 bg-financial-accent/20 rounded-full animate-[ripple_1.5s_ease-out_infinite]"></span>
+          <span className="block absolute border-4 border-financial-accent/30 bg-financial-accent/20 rounded-full animate-[ripple_1.5s_ease-out_0.4s_infinite]"></span>
+          <span className="block absolute border-4 border-financial-accent/40 bg-financial-accent/20 rounded-full animate-[ripple_1.5s_ease-out_0.8s_infinite]"></span>
         </div>
       </div>
-      <span className="text-sm font-medium text-muted-foreground flex items-center">
+
+      <span className="text-sm font-medium text-financial-accent flex items-center">
         Thinking
         <span className="thinking-dots-container ml-2">
           {Array(3).fill(0).map((_, i) => (
-            <span 
-              key={i} 
-              className={`thinking-dot ${i <= dots ? 'thinking-dot-active' : ''}`}
+            <span
+              key={i}
+              className={`thinking-dot ${i <= dots ? 'thinking-dot-active bg-financial-accent' : 'bg-financial-accent/30'}`}
             ></span>
           ))}
         </span>

frontend/src/index.css

@@ -200,7 +200,8 @@
 .message-bubble-user {
   border-top-right-radius: 4px;
 }
-/* Thinking animation */
+
+/* Thinking animation - Enhanced */
 .thinking-brain {
   position: relative;
   width: 32px;
@@ -211,12 +212,20 @@
   justify-content: center;
 }
 
-.thinking-brain-svg {
-  z-index: 10;
+.thinking-brain-small {
   position: relative;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thinking-brain-svg {
+  z-index: 2;
 }
 
-.thinking-waves {
+.thinking-waves-enhanced {
   position: absolute;
   top: 0;
   left: 0;
@@ -225,29 +234,30 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 1;
 }
 
-.thinking-waves span {
+.thinking-waves-enhanced span {
   position: absolute;
-  border: 1px solid var(--financial-accent, #7C3AED);
+  border: 1.5px solid var(--financial-accent, #7C3AED);
   border-radius: 50%;
   opacity: 0;
-  animation: thinking-wave 2s ease-out infinite;
+  animation: thinking-wave 2.5s ease-out infinite;
 }
 
-.thinking-waves span:nth-child(1) {
+.thinking-waves-enhanced span:nth-child(1) {
   width: 100%;
   height: 100%;
   animation-delay: 0s;
 }
 
-.thinking-waves span:nth-child(2) {
+.thinking-waves-enhanced span:nth-child(2) {
   width: 80%;
   height: 80%;
   animation-delay: 0.3s;
 }
 
-.thinking-waves span:nth-child(3) {
+.thinking-waves-enhanced span:nth-child(3) {
   width: 60%;
   height: 60%;
   animation-delay: 0.6s;
@@ -256,13 +266,13 @@
 @keyframes thinking-wave {
   0% {
     transform: scale(0.5);
-    opacity: 0.1;
+    opacity: 0.3;
   }
   50% {
-    opacity: 0.3;
+    opacity: 0.7;
   }
   100% {
-    transform: scale(1.2);
+    transform: scale(1.4);
     opacity: 0;
   }
 }
@@ -286,6 +296,27 @@
   opacity: 1;
 }
 
+/* Collapsible thinking block */
+.think-collapsible {
+  @apply bg-financial-accent/5 dark:bg-financial-accent/10 rounded-md overflow-hidden;
+  transition: all 0.3s ease;
+  border-left: 3px solid var(--financial-accent, #7C3AED);
+  background: linear-gradient(to right, rgba(124, 58, 237, 0.05), transparent);
+}
+
+.think-collapsible:hover {
+  background: linear-gradient(to right, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.02));
+}
+
+.think-header {
+  @apply px-3 py-2 text-financial-accent;
+}
+
+.think-block {
+  @apply bg-financial-accent/5 dark:bg-financial-accent/10 p-3 rounded-md text-muted-foreground;
+  position: relative;
+}
+
 /* Variations UI */
 .variations-container {
   margin-top: 0.5rem;
@@ -441,7 +472,10 @@ pre code {
 /* Chat bubble styles */
 .thinking-dot {
   @apply inline-block rounded-full bg-financial-accent;
-  opacity: 0.7;
+}
+
+.thinking-dot-active {
+  @apply animate-pulse;
 }
 
 @keyframes pulse {
@@ -466,7 +500,7 @@ pre code {
 
 /* Think tag styling */
 .think-block {
-  @apply bg-stone-50/70 dark:bg-stone-900/50 border-l-4 border-financial-accent/50 p-3 my-2 rounded-md italic text-muted-foreground;
+  @apply bg-stone-50/70 dark:bg-stone-900/50 p-3 my-2 rounded-md italic text-muted-foreground;
   position: relative;
   overflow: hidden;
   backdrop-filter: blur(6px);
@@ -480,7 +514,6 @@ pre code {
   height: 100%;
   width: 4px;
   background: linear-gradient(to bottom, theme('colors.financial.accent'), theme('colors.financial.light-accent'));
-  animation: pulse-border 2s infinite alternate;
 }
 
 .think-block::after {
@@ -489,7 +522,7 @@ pre code {
   right: 10px;
   bottom: 5px;
   opacity: 0.2;
-  font-size: 1.5rem;
+  font-size: 2rem;
 }
 
 /* Message variations styling */
@@ -529,4 +562,4 @@ pre code {
   100% {
     box-shadow: 0 0 0 0 rgba(var(--accent), 0);
   }
-}
+}

frontend/src/types/chat.ts

@@ -1,4 +1,11 @@
 
+export interface MessageVariation {
+  id: string;
+  content: string;
+  timestamp: Date;
+  childMessages?: Message[]; // Messages that belong to this variation
+}
+
 export interface Message {
   id: string;
   content: string;
@@ -7,8 +14,10 @@ export interface Message {
   isLoading?: boolean;
   error?: boolean;
   result?: any;
-  variations?: { id: string, content: string, timestamp: Date }[];
+  variations?: MessageVariation[];
   activeVariation?: string;
+  parentMessageId?: string; // Link to parent message if this is a child message
+  variationId?: string; // Link to the variation it belongs to
 }
 
 export interface Chat {