'use client';
import { useState } from 'react';
import { ThumbsUp, ThumbsDown } from 'lucide-react';
import { FeedbackModal } from './FeedbackModal';
import type { FeedbackButtonsProps, FeedbackType } from '@/lib/types/feedback';
export function FeedbackButtons({
messageId,
conversationId,
messageContent,
size = 'sm',
className = '',
}: FeedbackButtonsProps) {
const [modalOpen, setModalOpen] = useState(false);
const [feedbackType, setFeedbackType] = useState<FeedbackType>('positive');
const [hasSubmittedPositive, setHasSubmittedPositive] = useState(false);
const [hasSubmittedNegative, setHasSubmittedNegative] = useState(false);
const iconSize = size === 'sm' ? 'w-3.5 h-3.5' : 'w-4 h-4';
const handleFeedbackClick = (type: FeedbackType) => {
setFeedbackType(type);
setModalOpen(true);
};
const handleSuccess = () => {
if (feedbackType === 'positive') {
setHasSubmittedPositive(true);
} else {
setHasSubmittedNegative(true);
}
};
return (
<>
{/* Thumbs Up Button */}
<button
onClick={() => handleFeedbackClick('positive')}
disabled={hasSubmittedPositive}
className={`
opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded
${hasSubmittedPositive
? 'text-green-500 cursor-default'
: 'text-gray-400 hover:text-green-500 hover:bg-gray-700'
}
${className}
`}
title={hasSubmittedPositive ? 'Feedback submitted' : 'Good response'}
aria-label={hasSubmittedPositive ? 'Feedback submitted' : 'Mark as good response'}
>
<ThumbsUp className={iconSize} />
</button>
{/* Thumbs Down Button */}
<button
onClick={() => handleFeedbackClick('negative')}
disabled={hasSubmittedNegative}
className={`
opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded
${hasSubmittedNegative
? 'text-red-500 cursor-default'
: 'text-gray-400 hover:text-red-500 hover:bg-gray-700'
}
${className}
`}
title={hasSubmittedNegative ? 'Feedback submitted' : 'Poor response'}
aria-label={hasSubmittedNegative ? 'Feedback submitted' : 'Mark as poor response'}
>
<ThumbsDown className={iconSize} />
</button>
{/* Feedback Modal */}
<FeedbackModal
isOpen={modalOpen}
onClose={() => setModalOpen(false)}
feedbackType={feedbackType}
messageId={messageId}
conversationId={conversationId}
messageContent={messageContent}
onSuccess={handleSuccess}
/>
</>
);
}
