Spaces:
Running
Running
File size: 2,224 Bytes
978caa8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
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>
);
};
|