Add ability to attach images to messages

webview-ui/src/components/Thumbnails.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useRef, useLayoutEffect } from "react"
+import { useWindowSize } from "react-use"
+
+interface ThumbnailsProps {
+	images: string[]
+	style?: React.CSSProperties
+	setImages?: React.Dispatch<React.SetStateAction<string[]>>
+	onHeightChange?: (height: number) => void
+}
+
+const Thumbnails: React.FC<ThumbnailsProps> = ({ images, style, setImages, onHeightChange }) => {
+	const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+	const containerRef = useRef<HTMLDivElement>(null)
+	const { width } = useWindowSize()
+
+	useLayoutEffect(() => {
+		if (containerRef.current) {
+			let height = containerRef.current.clientHeight
+			// some browsers return 0 for clientHeight
+			if (!height) {
+				height = containerRef.current.getBoundingClientRect().height
+			}
+			onHeightChange?.(height)
+		}
+		setHoveredIndex(null)
+	}, [images, width, onHeightChange])
+
+	const handleDelete = (index: number) => {
+		setImages?.((prevImages) => prevImages.filter((_, i) => i !== index))
+	}
+
+	const isDeletable = setImages !== undefined
+
+	return (
+		<div
+			ref={containerRef}
+			style={{
+				display: "flex",
+				flexWrap: "wrap",
+				gap: 5,
+				rowGap: 3,
+				...style,
+			}}>
+			{images.map((image, index) => (
+				<div
+					key={index}
+					style={{ position: "relative" }}
+					onMouseEnter={() => setHoveredIndex(index)}
+					onMouseLeave={() => setHoveredIndex(null)}>
+					<img
+						src={`data:image/webp;base64,${image}`}
+						alt={`Thumbnail ${index + 1}`}
+						style={{
+							width: 34,
+							height: 34,
+							objectFit: "cover",
+							borderRadius: 4,
+						}}
+					/>
+					{isDeletable && hoveredIndex === index && (
+						<div
+							onClick={() => handleDelete(index)}
+							style={{
+								position: "absolute",
+								top: -4,
+								right: -4,
+								width: 13,
+								height: 13,
+								borderRadius: "50%",
+								backgroundColor: "var(--vscode-badge-background)",
+								display: "flex",
+								justifyContent: "center",
+								alignItems: "center",
+								cursor: "pointer",
+							}}>
+							<span
+								className="codicon codicon-close"
+								style={{
+									color: "var(--vscode-foreground)",
+									fontSize: 10,
+									fontWeight: "bold",
+								}}></span>
+						</div>
+					)}
+				</div>
+			))}
+		</div>
+	)
+}
+
+export default Thumbnails