feat: support send video to vision agent (#33)

TODO: generate thumbnail for video



https://github.com/landing-ai/vision-agent-ui/assets/132986242/8b202e6f-4069-422b-82a8-0253a90bab56

components/chat/ChatMessage.tsx

@@ -86,6 +86,11 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
               );
             },
             img(props) {
+              if (props.src?.endsWith('.mp4')) {
+                return (
+                  <video src={props.src} controls width={500} height={500} />
+                );
+              }
               return (
                 <Tooltip>
                   <TooltipTrigger asChild>

lib/aws.ts

@@ -2,7 +2,7 @@ import { createPresignedPost } from '@aws-sdk/s3-presigned-post';
 import { S3Client } from '@aws-sdk/client-s3';
 import { fromEnv } from '@aws-sdk/credential-providers';
 
-const FILE_SIZE_LIMIT = 20971520; // 20MB
+const FILE_SIZE_LIMIT = 104857600; // 100MB
 
 const s3Client = new S3Client({
   region: process.env.AWS_REGION,

lib/hooks/useImageUpload.ts

@@ -8,6 +8,7 @@ const useImageUpload = (
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: {
       'image/*': ['.jpeg', '.png'],
+      'video/mp4': ['.mp4', '.MP4'],
     },
     multiple: false,
     onDrop: onDrop

lib/messageUtils.ts

@@ -19,12 +19,19 @@ export const generateAnswersImageMarkdown = (index: number, url: string) => {
 };
 
 export const generateInputImageMarkdown = (url: string, index = 0) => {
-  const prefix = 'input';
-  return `![${INPUT_PREFIX}-${index}](${url})`;
+  if (url.toLowerCase().endsWith('.mp4')) {
+    const prefix = 'input-video';
+    return `![${INPUT_PREFIX}-${index}](<${url}>)`;
+  } else {
+    const prefix = 'input';
+    return `![${INPUT_PREFIX}-${index}](<${url}>)`;
+  }
 };
 
 export const cleanInputMessage = (content: string) => {
-  return content.replace(/!\[input-.*?\)/g, '');
+  return content
+    .replace(/!\[input-.*?\)/g, '')
+    .replace(/<video[^>]*>.*?<\/video>/g, '');
 };
 
 export const cleanAnswerMessage = (content: string) => {