feat(components): add image preview, picker, and clear controls to AIToolbar

src/components/ai-toolbar.tsx

@@ -1,6 +1,9 @@
+import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Card } from "@/components/ui/card";
+import { ImagePicker } from "@/components/image-picker";
+import { X } from "lucide-react";
 
 interface AIToolbarProps {
 	isAuthenticated: boolean;
@@ -8,6 +11,9 @@ interface AIToolbarProps {
 	aiPrompt: string;
 	setAiPrompt: (prompt: string) => void;
 	aiLoading: boolean;
+	imagePreview: string | null;
+	onImageSelect: (file: File) => void;
+	onImageClear: () => void;
 	onAiCreate: () => void;
 	onAiSummarize: () => void;
 	summary: string | null;
@@ -20,6 +26,9 @@ export const AIToolbar = ({
 	aiPrompt,
 	setAiPrompt,
 	aiLoading,
+	imagePreview,
+	onImageSelect,
+	onImageClear,
 	onAiCreate,
 	onAiSummarize,
 	summary,
@@ -39,12 +48,36 @@ export const AIToolbar = ({
 								<Textarea
 									className="wrap-anywhere field-sizing-content resize-none w-full min-h-[2.5rem] max-h-64 overflow-y-auto sm:overflow-y-visible px-3 py-2 scroll-p-8 placeholder:italic"
 									style={{ clipPath: "inset(0 round 1rem)" }}
-									placeholder="Describe event for AI to create"
+									placeholder="Describe event or attach an image for AI to create"
 									value={aiPrompt}
 									onChange={(e) => setAiPrompt(e.target.value)}
 								/>
+								{imagePreview && (
+									<div className="relative mt-2 inline-block">
+										<Image
+											src={imagePreview}
+											alt="Attached event flyer"
+											className="h-20 rounded-md object-cover border"
+											width={80}
+											height={80}
+										/>
+										<Button
+											variant="destructive"
+											size="icon"
+											className="absolute -top-2 -right-2 h-5 w-5"
+											onClick={onImageClear}
+											aria-label="Remove image"
+										>
+											<X className="h-3 w-3" />
+										</Button>
+									</div>
+								)}
 							</div>
 							<div className="flex flex-row gap-2 pt-1">
+								<ImagePicker
+									onFileSelect={onImageSelect}
+									disabled={aiLoading}
+								/>
 								<Button onClick={onAiCreate} disabled={aiLoading}>
 									{aiLoading ? "Thinking..." : "AI Create"}
 								</Button>