webui: support video files as input (#22830)

tools/ui/src/lib/constants/attachment-menu.ts

@@ -52,6 +52,15 @@ export const ATTACHMENT_FILE_ITEMS: AttachmentMenuItem[] = [
 		disabledTooltip: 'Audio files processing requires an audio model',
 		action: AttachmentAction.FILE_UPLOAD
 	},
+	{
+		id: AttachmentMenuItemId.VIDEO,
+		label: 'Video Files',
+		icon: FILE_TYPE_ICONS.video,
+		class: 'video-button',
+		enabledWhen: AttachmentItemEnabledWhen.HAS_VIDEO_MODALITY,
+		disabledTooltip: 'Video files processing requires a video model',
+		action: AttachmentAction.FILE_UPLOAD
+	},
 	{
 		id: AttachmentMenuItemId.TEXT,
 		label: 'Text Files',

tools/ui/src/lib/constants/icons.ts

@@ -8,13 +8,15 @@ import {
 	FileText as FileTextIcon,
 	Image as ImageIcon,
 	Eye as VisionIcon,
-	Mic as AudioIcon
+	Mic as AudioIcon,
+	Video as VideoIcon
 } from '@lucide/svelte';
 import { FileTypeCategory, ModelModality } from '$lib/enums';
 
 export const FILE_TYPE_ICONS = {
 	[FileTypeCategory.IMAGE]: ImageIcon,
 	[FileTypeCategory.AUDIO]: AudioIcon,
+	[FileTypeCategory.VIDEO]: VideoIcon,
 	[FileTypeCategory.TEXT]: FileTextIcon,
 	[FileTypeCategory.PDF]: FileIcon
 } as const;
@@ -23,10 +25,12 @@ export const DEFAULT_FILE_ICON = FileIcon;
 
 export const MODALITY_ICONS = {
 	[ModelModality.VISION]: VisionIcon,
-	[ModelModality.AUDIO]: AudioIcon
+	[ModelModality.AUDIO]: AudioIcon,
+	[ModelModality.VIDEO]: VideoIcon
 } as const;
 
 export const MODALITY_LABELS = {
 	[ModelModality.VISION]: 'Vision',
-	[ModelModality.AUDIO]: 'Audio'
+	[ModelModality.AUDIO]: 'Audio',
+	[ModelModality.VIDEO]: 'Video'
 } as const;

tools/ui/src/lib/constants/supported-file-types.ts

@@ -13,10 +13,12 @@ import {
 	FileTypePdf,
 	FileTypeText,
 	MimeTypeAudio,
+	MimeTypeVideo,
 	MimeTypeImage,
 	MimeTypeApplication,
 	MimeTypeText
 } from '$lib/enums';
+import { FileExtensionVideo, FileTypeVideo } from '$lib/enums/files';
 
 // File type configuration using enums
 export const AUDIO_FILE_TYPES = {
@@ -30,6 +32,17 @@ export const AUDIO_FILE_TYPES = {
 	}
 } as const;
 
+export const VIDEO_FILE_TYPES = {
+	[FileTypeVideo.MP4]: {
+		extensions: [FileExtensionVideo.MP4],
+		mimeTypes: [MimeTypeVideo.MP4]
+	},
+	[FileTypeVideo.OGG]: {
+		extensions: [FileExtensionVideo.OGG],
+		mimeTypes: [MimeTypeVideo.OGG]
+	}
+} as const;
+
 export const IMAGE_FILE_TYPES = {
 	[FileTypeImage.JPEG]: {
 		extensions: [FileExtensionImage.JPG, FileExtensionImage.JPEG],