Function ImageViewer

webview-ui/src/components/common/ImageViewer.tsx:23–315

({
	imageUri,
	imagePath,
	alt = "Generated image",
	showControls = true,
	className = "",
}: ImageViewerProps)

}

export function ImageViewer({
	imageUri,
	imagePath,
	alt = "Generated image",
	showControls = true,
	className = "",
}: ImageViewerProps) {
	const [showModal, setShowModal] = useState(false)
	const [zoomLevel, setZoomLevel] = useState(1)
	const [copyFeedback, setCopyFeedback] = useState(false)
	const [isHovering, setIsHovering] = useState(false)
	const [isDragging, setIsDragging] = useState(false)
	const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 })
	const [imageError, setImageError] = useState<string | null>(null)
	const { copyWithFeedback } = useCopyToClipboard()
	const { t } = useAppTranslation()

	/**
	 * Opens a modal with the image for zooming
	 */
	const handleZoom = async (e: React.MouseEvent) => {
		e.stopPropagation()
		setShowModal(true)
		setZoomLevel(1)
		setDragPosition({ x: 0, y: 0 })
	}

	/**
	 * Copies the image path to clipboard
	 */
	const handleCopy = async (e: React.MouseEvent) => {
		e.stopPropagation()

		try {
			// Copy the file path if available
			if (imagePath) {
				await copyWithFeedback(imagePath, e)
				// Show feedback
				setCopyFeedback(true)
				setTimeout(() => setCopyFeedback(false), 2000)
			}
		} catch (err) {
			console.error("Error copying:", err instanceof Error ? err.message : String(err))
		}
	}

	/**
	 * Saves the image as a file
	 */
	const handleSave = async (e: React.MouseEvent) => {
		e.stopPropagation()

		try {
			// Request VSCode to save the image
			vscode.postMessage({
				type: "saveImage",
				dataUri: imageUri,
			})