feat: limit video to 30s and image to 2.5mb (#60)

<img width="902" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/a81e8509-09ce-41cb-86ec-6f09608c44fc">
<img width="773" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/ddd2abe5-3032-4371-8183-1a13a38fc108">

components/chat/ImageSelector.tsx

@@ -9,7 +9,7 @@ import Loading from '../ui/Loading';
 import toast from 'react-hot-toast';
 import {
   generateVideoThumbnails,
-  getVideoCover,
+  getVideoDurationFromVideoFile,
 } from '@rajesh896/video-thumbnails-generator';
 import { ChatWithMessages } from '@/lib/db/types';
 import { dbPostCreateChat } from '@/lib/db/functions';
@@ -69,6 +69,18 @@ const ImageSelector: React.FC<ImageSelectorProps> = () => {
       reader.readAsDataURL(files[0]);
       reader.onload = async () => {
         const file = files[0];
+        if (file.type === 'video/mp4') {
+          const duration = await getVideoDurationFromVideoFile(file);
+          if (duration > 30) {
+            setUploading(false);
+            toast.error('Video duration must be less than 30 seconds');
+            return;
+          }
+        } else if (file.size > 2.5 * 1024 * 1024) {
+          setUploading(false);
+          toast.error('Image size must be less than 2.5MB');
+          return;
+        }
         const resp = await upload(file);
         if (!resp) {
           return;