"use client"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; import { Textarea } from "@/components/ui/textarea"; import { cn } from "@/lib/utils"; import { SlidersHorizontal, ArrowUp, Figma, Camera, CirclePlus, Clipboard, Upload, History, LayoutDashboard, Link, Paperclip, Play, Plus, Sparkles, LayoutTemplate, X, } from "lucide-react"; import Image from "next/image"; import { useRef, useState } from "react"; interface AttachedFile { id: string; name: string; file: File; preview?: string; } const ACTIONS = [ { id: "clone-screenshot", icon: Camera, label: "Clone a Screenshot" }, { id: "import-figma", icon: Figma, label: "Import from Figma" }, { id: "upload-project", icon: Upload, label: "Upload a Project" }, { id: "landing-page", icon: LayoutDashboard, label: "Landing Page" }, ]; export default function Ai04({ onSubmit, }: { onSubmit?: (prompt: string) => void; }) { const [prompt, setPrompt] = useState(""); const [isDragOver, setIsDragOver] = useState(false); const [attachedFiles, setAttachedFiles] = useState([]); const fileInputRef = useRef(null); const [settings, setSettings] = useState({ autoComplete: true, streaming: false, showHistory: false, }); const generateFileId = () => Math.random().toString(36).substring(7); const processFiles = (files: File[]) => { for (const file of files) { const fileId = generateFileId(); const attachedFile: AttachedFile = { id: fileId, name: file.name, file, }; if (file.type.startsWith("image/")) { const reader = new FileReader(); reader.onload = () => { setAttachedFiles((prev) => prev.map((f) => f.id === fileId ? { ...f, preview: reader.result as string } : f ) ); }; reader.readAsDataURL(file); } setAttachedFiles((prev) => [...prev, attachedFile]); } }; const submitPrompt = () => { if (prompt.trim() && onSubmit) { onSubmit(prompt.trim()); setPrompt(""); } }; const updateSetting = (key: keyof typeof settings, value: boolean) => { setSettings((prev) => ({ ...prev, [key]: value })); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); submitPrompt(); }; const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragOver(true); }; const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); setIsDragOver(false); }; const handleDrop = (e: React.DragEvent) => { e.preventDefault(); setIsDragOver(false); const files = Array.from(e.dataTransfer.files); if (files.length > 0) { processFiles(files); } }; const handleTextareaChange = (e: React.ChangeEvent) => { setPrompt(e.target.value); }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submitPrompt(); } }; const handleFileSelect = (e: React.ChangeEvent) => { const files = Array.from(e.target.files || []); processFiles(files); if (fileInputRef.current) { fileInputRef.current.value = ""; } }; const handleRemoveFile = (fileId: string) => { setAttachedFiles((prev) => prev.filter((file) => file.id !== fileId)); }; return (

Prompt. Refine. Ship.

Build real, working software just by describing it

{attachedFiles.length > 0 && (

{attachedFiles.map((file) => (

{file.preview ? ( {file.name}

) : ( )}

{file.name} ))}

)}

<DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
                    className="ml-[-2px] h-7 w-7 rounded-md"
                    size="icon"
                    type="button"
                    variant="ghost"
                  >
                    <Plus size={16} />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent
                  align="start"
                  className="max-w-xs rounded-2xl p-1.5"
                >
                  <DropdownMenuGroup className="space-y-1">
                    <DropdownMenuItem
                      className="rounded-[calc(1rem-6px)] text-xs"
                      onClick={() => fileInputRef.current?.click()}
                    >
                      <div className="flex items-center gap-2">
                        <Paperclip className="text-muted-foreground" size={16} />
                        <span>Attach Files</span>
                      </div>
                    </DropdownMenuItem>
                    <DropdownMenuItem className="rounded-[calc(1rem-6px)] text-xs">
                      <div className="flex items-center gap-2">
                        <Link className="text-muted-foreground" size={16} />
                        <span>Import from URL</span>
                      </div>
                    </DropdownMenuItem>
                    <DropdownMenuItem className="rounded-[calc(1rem-6px)] text-xs">
                      <div className="flex items-center gap-2">
                        <Clipboard className="text-muted-foreground" size={16} />
                        <span>Paste from Clipboard</span>
                      </div>
                    </DropdownMenuItem>
                    <DropdownMenuItem className="rounded-[calc(1rem-6px)] text-xs">
                      <div className="flex items-center gap-2">
                        <LayoutTemplate className="text-muted-foreground" size={16} />
                        <span>Use Template</span>
                      </div>
                    </DropdownMenuItem>
                  </DropdownMenuGroup>
                </DropdownMenuContent>
              </DropdownMenu>

<DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
                    className="size-7 rounded-md"
                    size="icon"
                    type="button"
                    variant="ghost"
                  >
                    <SlidersHorizontal size={16} />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent
                  align="start"
                  className="w-48 rounded-2xl p-3"
                >
                  <DropdownMenuGroup className="space-y-3">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Sparkles className="text-muted-foreground" size={16} />
                        <Label className="text-xs">Auto-complete</Label>
                      </div>
                      <Switch
                        checked={settings.autoComplete}
                        className="scale-75"
                        onCheckedChange={(value) =>
                          updateSetting("autoComplete", value)
                        }
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Play className="text-muted-foreground" size={16} />
                        <Label className="text-xs">Streaming</Label>
                      </div>
                      <Switch
                        checked={settings.streaming}
                        className="scale-75"
                        onCheckedChange={(value) =>
                          updateSetting("streaming", value)
                        }
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <History className="text-muted-foreground" size={16} />
                        <Label className="text-xs">Show History</Label>
                      </div>
                      <Switch
                        checked={settings.showHistory}
                        className="scale-75"
                        onCheckedChange={(value) =>
                          updateSetting("showHistory", value)
                        }
                      />
                    </div>
                  </DropdownMenuGroup>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>

<div
            className={cn(
              "absolute inset-0 flex items-center justify-center pointer-events-none z-20 rounded-[inherit] border border-border border-dashed bg-muted text-foreground text-sm transition-opacity duration-200",
              isDragOver ? "opacity-100" : "opacity-0"
            )}
          >
            <span className="flex w-full items-center justify-center gap-1 font-medium">
              <CirclePlus className="min-w-4" size={16} />
              Drop files here to add as attachments
            </span>
          </div>
        </form>
      </div>

<div className="max-w-250 mx-auto flex-wrap gap-3 flex min-h-0 shrink-0 items-center justify-center">
        {ACTIONS.map((action) => (
          <Button
            className="gap-2 rounded-full"
            key={action.id}
            size="sm"
            variant="outline"
          >
            <action.icon size={16} />
            {action.label}
          </Button>
        ))}
      </div>
    </div>
  );
}
</article></body></html>

AI Chat with File Attachments