AI Chat with File Attachments

1'use client';
2 
3import {
4  IconAdjustmentsHorizontal,
5  IconArrowUp,
6  IconBrandFigma,
7  IconCamera,
8  IconCirclePlus,
9  IconClipboard,
10  IconFileUpload,
11  IconHistory,
12  IconLayoutDashboard,
13  IconLink,
14  IconPaperclip,
15  IconPlayerPlay,
16  IconPlus,
17  IconSparkles,
18  IconTemplate,
19  IconX,
20} from '@tabler/icons-react';
21import Image from 'next/image';
22import { useRef, useState } from 'react';
23import { Badge } from '@/components/ui/badge';
24import { Button } from '@/components/ui/button';
25import {
26  DropdownMenu,
27  DropdownMenuContent,
28  DropdownMenuGroup,
29  DropdownMenuItem,
30  DropdownMenuTrigger,
31} from '@/components/ui/dropdown-menu';
32import { Label } from '@/components/ui/label';
33import { Switch } from '@/components/ui/switch';
34import { Textarea } from '@/components/ui/textarea';
35import { cn } from '@/lib/utils';
36 
37interface AttachedFile {
38  id: string;
39  name: string;
40  file: File;
41  preview?: string;
42}
43 
44const ACTIONS = [
45  { id: 'clone-screenshot', icon: IconCamera, label: 'Clone a Screenshot' },
46  { id: 'import-figma', icon: IconBrandFigma, label: 'Import from Figma' },
47  { id: 'upload-project', icon: IconFileUpload, label: 'Upload a Project' },
48  { id: 'landing-page', icon: IconLayoutDashboard, label: 'Landing Page' },
49];
50 
51export default function Ai04({
52  onSubmit,
53}: {
54  onSubmit?: (prompt: string) => void;
55}) {
56  const [prompt, setPrompt] = useState('');
57  const [isDragOver, setIsDragOver] = useState(false);
58  const [attachedFiles, setAttachedFiles] = useState<AttachedFile[]>([]);
59  const fileInputRef = useRef<HTMLInputElement>(null);
60 
61  const [settings, setSettings] = useState({
62    autoComplete: true,
63    streaming: false,
64    showHistory: false,
65  });
66 
67  const generateFileId = () => Math.random().toString(36).substring(7);
68  const processFiles = (files: File[]) => {
69    for (const file of files) {
70      const fileId = generateFileId();
71      const attachedFile: AttachedFile = {
72        id: fileId,
73        name: file.name,
74        file,
75      };
76 
77      if (file.type.startsWith('image/')) {
78        const reader = new FileReader();
79        reader.onload = () => {
80          setAttachedFiles((prev) =>
81            prev.map((f) =>
82              f.id === fileId ? { ...f, preview: reader.result as string } : f
83            )
84          );
85        };
86        reader.readAsDataURL(file);
87      }
88 
89      setAttachedFiles((prev) => [...prev, attachedFile]);
90    }
91  };
92  const submitPrompt = () => {
93    if (prompt.trim() && onSubmit) {
94// … truncated