allow music and video

app/api/me/projects/[namespace]/[repoId]/images/route.ts

@@ -39,22 +39,22 @@ export async function POST(
       );
     }
 
-    // Parse the FormData to get the images
+    // Parse the FormData to get the media files
     const formData = await req.formData();
-    const imageFiles = formData.getAll("images") as File[];
+    const mediaFiles = formData.getAll("images") as File[];
 
-    if (!imageFiles || imageFiles.length === 0) {
+    if (!mediaFiles || mediaFiles.length === 0) {
       return NextResponse.json(
         {
           ok: false,
-          error: "At least one image file is required under the 'images' key",
+          error: "At least one media file is required under the 'images' key",
         },
         { status: 400 }
       );
     }
 
     const files: File[] = [];
-    for (const file of imageFiles) {
+    for (const file of mediaFiles) {
       if (!(file instanceof File)) {
         return NextResponse.json(
           {
@@ -65,18 +65,30 @@ export async function POST(
         );
       }
 
-      if (!file.type.startsWith('image/')) {
+      // Check if file is a supported media type
+      const isImage = file.type.startsWith('image/');
+      const isVideo = file.type.startsWith('video/');
+      const isAudio = file.type.startsWith('audio/');
+      
+      if (!isImage && !isVideo && !isAudio) {
         return NextResponse.json(
           {
             ok: false,
-            error: `File ${file.name} is not an image`,
+            error: `File ${file.name} is not a supported media type (image, video, or audio)`,
           },
           { status: 400 }
         );
       }
 
-      // Create File object with images/ folder prefix
-      const fileName = `images/${file.name}`;
+      // Create File object with appropriate folder prefix
+      let folderPrefix = 'images/';
+      if (isVideo) {
+        folderPrefix = 'videos/';
+      } else if (isAudio) {
+        folderPrefix = 'audio/';
+      }
+      
+      const fileName = `${folderPrefix}${file.name}`;
       const processedFile = new File([file], fileName, { type: file.type });
       files.push(processedFile);
     }
@@ -91,21 +103,21 @@ export async function POST(
       repo,
       files,
       accessToken: user.token as string,
-      commitTitle: `Upload ${files.length} image(s)`,
+      commitTitle: `Upload ${files.length} media file(s)`,
     });
 
     return NextResponse.json({ 
       ok: true, 
-      message: `Successfully uploaded ${files.length} image(s) to ${namespace}/${repoId}/images/`,
+      message: `Successfully uploaded ${files.length} media file(s) to ${namespace}/${repoId}/`,
       uploadedFiles: files.map((file) => `https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${file.name}`),
     }, { status: 200 });
 
   } catch (error) {
-    console.error('Error uploading images:', error);
+    console.error('Error uploading media files:', error);
     return NextResponse.json(
       {
         ok: false,
-        error: "Failed to upload images",
+        error: "Failed to upload media files",
       },
       { status: 500 }
     );

app/api/me/projects/[namespace]/[repoId]/route.ts

@@ -105,7 +105,7 @@ export async function GET(
     const htmlFiles: Page[] = [];
     const files: string[] = [];
 
-    const allowedFilesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif"];
+    const allowedFilesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif", "mp4", "webm", "ogg", "avi", "mov", "mp3", "wav", "ogg", "aac", "m4a"];
     
     for await (const fileInfo of listFiles({repo, accessToken: user.token as string})) {
       if (fileInfo.path.endsWith(".html")) {
@@ -126,7 +126,7 @@ export async function GET(
           });
         }
       }
-      if (fileInfo.type === "directory" && fileInfo.path === "images") {
+      if (fileInfo.type === "directory" && ["videos", "images", "audio"].includes(fileInfo.path)) {
         for await (const imageInfo of listFiles({repo, accessToken: user.token as string, path: fileInfo.path})) {
           if (allowedFilesExtensions.includes(imageInfo.path.split(".").pop() || "")) {
             files.push(`https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${imageInfo.path}`);

components/editor/ask-ai/selected-files.tsx

@@ -1,7 +1,8 @@
 import Image from "next/image";
 
 import { Button } from "@/components/ui/button";
-import { Minus } from "lucide-react";
+import { Minus, Video, Music } from "lucide-react";
+import { getFileType } from "./uploader";
 
 export const SelectedFiles = ({
   files,
@@ -21,13 +22,19 @@ export const SelectedFiles = ({
             key={file}
             className="flex items-center relative justify-start gap-2 p-1 bg-neutral-700 rounded-md"
           >
-            <Image
-              src={file}
-              alt="uploaded image"
-              className="size-12 rounded-md object-cover"
-              width={40}
-              height={40}
-            />
+            {getFileType(file) === "image" ? (
+              <Image
+                src={file}
+                alt="uploaded image"
+                className="size-12 rounded-md object-cover"
+                width={40}
+                height={40}
+              />
+            ) : getFileType(file) === "video" ? (
+              <Video className="size-12 rounded-md object-cover" />
+            ) : getFileType(file) === "audio" ? (
+              <Music className="size-12 rounded-md object-cover" />
+            ) : null}
             <Button
               size="iconXsss"
               variant="secondary"

components/editor/ask-ai/uploader.tsx

@@ -6,6 +6,9 @@ import {
   Link,
   Paperclip,
   Upload,
+  Video,
+  Music,
+  FileVideo,
 } from "lucide-react";
 import Image from "next/image";
 
@@ -22,6 +25,18 @@ import { useEditor } from "@/hooks/useEditor";
 import { useAi } from "@/hooks/useAi";
 import { useLoginModal } from "@/components/contexts/login-context";
 
+export const getFileType = (url: string) => {
+  const extension = url.split(".").pop()?.toLowerCase();
+  if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(extension || "")) {
+    return "image";
+  } else if (["mp4", "webm", "ogg", "avi", "mov"].includes(extension || "")) {
+    return "video";
+  } else if (["mp3", "wav", "ogg", "aac", "m4a"].includes(extension || "")) {
+    return "audio";
+  }
+  return "unknown";
+};
+
 export const Uploader = ({ project }: { project: Project | undefined }) => {
   const { user } = useUser();
   const { openLoginModal } = useLoginModal();
@@ -31,6 +46,20 @@ export const Uploader = ({ project }: { project: Project | undefined }) => {
   const [open, setOpen] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const getFileIcon = (url: string) => {
+    const fileType = getFileType(url);
+    switch (fileType) {
+      case "image":
+        return <ImageIcon className="size-4" />;
+      case "video":
+        return <Video className="size-4" />;
+      case "audio":
+        return <Music className="size-4" />;
+      default:
+        return <FileVideo className="size-4" />;
+    }
+  };
+
   if (!user)
     return (
       <Button
@@ -69,63 +98,88 @@ export const Uploader = ({ project }: { project: Project | undefined }) => {
                 🎨
               </div>
               <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
-                🖼️
+                📁
               </div>
               <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
                 💻
               </div>
             </div>
             <p className="text-xl font-semibold text-neutral-950">
-              Add Custom Images
+              Add Media Files
             </p>
             <p className="text-sm text-neutral-500 mt-1.5">
-              Upload images to your project and use them with DeepSite!
+              Upload images, videos, and audio files to your project!
             </p>
           </header>
           <main className="space-y-4 p-5">
             <div>
               <p className="text-xs text-left text-neutral-700 mb-2">
-                Uploaded Images
+                Uploaded Media Files
               </p>
               {files?.length > 0 ? (
                 <div className="grid grid-cols-4 gap-1 flex-wrap max-h-40 overflow-y-auto">
-                  {files.map((file: string) => (
-                    <div
-                      key={file}
-                      className="select-none relative cursor-pointer bg-white rounded-md border-[2px] border-white hover:shadow-2xl transition-all duration-300"
-                      onClick={() =>
-                        setSelectedFiles(
-                          selectedFiles.includes(file)
-                            ? selectedFiles.filter((f) => f !== file)
-                            : [...selectedFiles, file]
-                        )
-                      }
-                    >
-                      <Image
-                        src={file}
-                        alt="uploaded image"
-                        width={56}
-                        height={56}
-                        className="object-cover w-full rounded-sm aspect-square"
-                      />
-                      {selectedFiles.includes(file) && (
-                        <div className="absolute top-0 right-0 h-full w-full flex items-center justify-center bg-black/50 rounded-md">
-                          <CheckCircle className="size-6 text-neutral-100" />
-                        </div>
-                      )}
-                    </div>
-                  ))}
+                  {files.map((file: string) => {
+                    const fileType = getFileType(file);
+                    return (
+                      <div
+                        key={file}
+                        className="select-none relative cursor-pointer bg-white rounded-md border-[2px] border-white hover:shadow-2xl transition-all duration-300"
+                        onClick={() =>
+                          setSelectedFiles(
+                            selectedFiles.includes(file)
+                              ? selectedFiles.filter((f) => f !== file)
+                              : [...selectedFiles, file]
+                          )
+                        }
+                      >
+                        {fileType === "image" ? (
+                          <Image
+                            src={file}
+                            alt="uploaded image"
+                            width={56}
+                            height={56}
+                            className="object-cover w-full rounded-sm aspect-square"
+                          />
+                        ) : fileType === "video" ? (
+                          <div className="w-full h-14 rounded-sm bg-gray-100 flex items-center justify-center relative">
+                            <video
+                              src={file}
+                              className="w-full h-full object-cover rounded-sm"
+                              muted
+                              preload="metadata"
+                            />
+                            <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded-sm">
+                              <Video className="size-4 text-white" />
+                            </div>
+                          </div>
+                        ) : fileType === "audio" ? (
+                          <div className="w-full h-14 rounded-sm bg-gradient-to-br from-purple-100 to-pink-100 flex items-center justify-center">
+                            <Music className="size-6 text-purple-600" />
+                          </div>
+                        ) : (
+                          <div className="w-full h-14 rounded-sm bg-gray-100 flex items-center justify-center">
+                            {getFileIcon(file)}
+                          </div>
+                        )}
+                        {selectedFiles.includes(file) && (
+                          <div className="absolute top-0 right-0 h-full w-full flex items-center justify-center bg-black/50 rounded-md">
+                            <CheckCircle className="size-6 text-neutral-100" />
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
                 </div>
               ) : (
                 <p className="text-sm text-muted-foreground font-mono flex flex-col items-center gap-1 pt-2">
                   <ImageIcon className="size-4" />
-                  No images uploaded yet
+                  No media files uploaded yet
                 </p>
               )}
             </div>
             <div>
               <p className="text-xs text-left text-neutral-700 mb-2">
-                Or import images from your computer
+                Or import media files from your computer
               </p>
               <Button
                 variant="black"
@@ -139,12 +193,12 @@ export const Uploader = ({ project }: { project: Project | undefined }) => {
                       overlay={false}
                       className="ml-2 size-4 animate-spin"
                     />
-                    Uploading image(s)...
+                    Uploading media file(s)...
                   </>
                 ) : (
                   <>
                     <Upload className="size-4" />
-                    Upload Images
+                    Upload Media Files
                   </>
                 )}
               </Button>
@@ -153,7 +207,7 @@ export const Uploader = ({ project }: { project: Project | undefined }) => {
                 type="file"
                 className="hidden"
                 multiple
-                accept="image/*"
+                accept="image/*,video/*,audio/*,.mp3,.mp4,.wav,.aac,.m4a,.ogg,.webm,.avi,.mov"
                 onChange={(e) => uploadFiles(e.target.files, project!)}
               />
             </div>

hooks/useEditor.ts

@@ -191,13 +191,15 @@ export const useEditor = (namespace?: string, repoId?: string) => {
 
   const uploadFilesMutation = useMutation({
     mutationFn: async ({ files, project }: { files: FileList; project: Project }) => {
-      const images = Array.from(files).filter((file) => {
-        return file.type.startsWith("image/");
+      const mediaFiles = Array.from(files).filter((file) => {
+        return file.type.startsWith("image/") || 
+               file.type.startsWith("video/") || 
+               file.type.startsWith("audio/");
       });
 
       const data = new FormData();
-      images.forEach((image) => {
-        data.append("images", image);
+      mediaFiles.forEach((file) => {
+        data.append("images", file); // Keep using "images" key for backward compatibility
       });
 
       const response = await fetch(