frontend/src/components/chat/MessageActions.tsx

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>
      )}
    </>
  );
};