File size: 3,631 Bytes
faee5d2 6421be3 faee5d2 6421be3 faee5d2 |
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
"use client";
import { Button } from "@/components/ui/button";
import { Download, RotateCcw, MessageCircle } from "lucide-react";
import { useState } from "react";
import { HistoryItem, HistoryPart } from "@/lib/types";
interface ImageResultDisplayProps {
imageUrl: string;
description: string | null;
onReset: () => void;
conversationHistory?: HistoryItem[];
}
export function ImageResultDisplay({
imageUrl,
description,
onReset,
conversationHistory = [],
}: ImageResultDisplayProps) {
const [showHistory, setShowHistory] = useState(false);
const handleDownload = () => {
// Create a temporary link element
const link = document.createElement("a");
link.href = imageUrl;
link.download = `gemini-image-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const toggleHistory = () => {
setShowHistory(!showHistory);
};
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold">Generated Image</h2>
<div className="space-x-2">
<Button variant="outline" size="sm" onClick={handleDownload}>
<Download className="w-4 h-4 mr-2" />
Download
</Button>
{conversationHistory.length > 0 && (
<Button variant="outline" size="sm" onClick={toggleHistory}>
<MessageCircle className="w-4 h-4 mr-2" />
{showHistory ? "Hide History" : "Show History"}
</Button>
)}
<Button variant="outline" size="sm" onClick={onReset}>
<RotateCcw className="w-4 h-4 mr-2" />
Create New Image
</Button>
</div>
</div>
<div className="rounded-lg overflow-hidden bg-muted p-2">
<img
src={imageUrl}
alt="Generated"
className="max-w-[640px] h-auto mx-auto"
/>
</div>
{description && (
<div className="p-4 rounded-lg bg-muted">
<h3 className="text-sm font-medium mb-2">Description</h3>
<p className="text-sm text-muted-foreground">{description}</p>
</div>
)}
{showHistory && conversationHistory.length > 0 && (
<div className="p-4 rounded-lg">
<h3 className="text-sm font-medium mb-4">Conversation History</h3>
<div className="space-y-4">
{conversationHistory.map((item, index) => (
<div key={index} className={`p-3 rounded-lg bg-secondary`}>
<p
className={`text-sm font-medium mb-2 ${
item.role === "user" ? "text-foreground" : "text-primary"
}`}
>
{item.role === "user" ? "You" : "Gemini"}
</p>
<div className="space-y-2">
{item.parts.map((part: HistoryPart, partIndex) => (
<div key={partIndex}>
{part.text && <p className="text-sm">{part.text}</p>}
{part.image && (
<div className="mt-2 overflow-hidden rounded-md">
<img
src={part.image}
alt={`${item.role} image`}
className="max-w-64 h-auto object-contain"
/>
</div>
)}
</div>
))}
</div>
</div>
))}
</div>
</div>
)}
</div>
);
}
|