fix: address PR #6150 review feedback

- Consolidate duplicate getMimeType functions into shared utilities
- Remove duplicate MediaThumbnails component, enhance Thumbnails to support video
- Add JSDoc comments to VideoContentBlock interface
- Convert inline styles to Tailwind classes in ChatRow
- Add robust error handling for video processing
- Create centralized media configuration for accepted file types
- Ensure consistent test naming conventions
- Fix ESLint warnings

Author: hannesrudolph

src/api/transform/gemini-format.ts

@@ -1,7 +1,17 @@
 import { Anthropic } from "@anthropic-ai/sdk"
 import { Content, Part } from "@google/genai"
 
-// Extended type to support video content blocks that aren't in the standard Anthropic SDK
+/**
+ * Extended content block type to support video content that isn't in the standard Anthropic SDK.
+ * This interface extends the standard Anthropic content blocks to include video support for Gemini models.
+ *
+ * @interface VideoContentBlock
+ * @property {string} type - Must be "video" to identify this as a video content block
+ * @property {Object} source - The video source information
+ * @property {string} source.type - Must be "base64" for base64-encoded video data
+ * @property {string} source.data - The base64-encoded video data
+ * @property {string} source.media_type - The MIME type of the video (e.g., "video/mp4", "video/webm")
+ */
 interface VideoContentBlock {
 	type: "video"
 	source: {
@@ -11,6 +21,10 @@ interface VideoContentBlock {
 	}
 }
 
+/**
+ * Extended content block parameter type that includes both standard Anthropic content blocks
+ * and our custom video content block for Gemini model support.
+ */
 type ExtendedContentBlockParam = Anthropic.ContentBlockParam | VideoContentBlock
 
 export function convertAnthropicContentToGemini(content: string | ExtendedContentBlockParam[]): Part[] {
@@ -28,11 +42,39 @@ export function convertAnthropicContentToGemini(content: string | ExtendedConten
 				}
 
 				return { inlineData: { data: block.source.data, mimeType: block.source.media_type } }
-			case "video":
+			case "video": {
 				if (block.source.type !== "base64") {
-					throw new Error("Unsupported video source type")
+					throw new Error("Unsupported video source type. Only base64 encoded videos are supported.")
 				}
+
+				// Validate video MIME type
+				const supportedVideoTypes = ["video/mp4", "video/webm", "video/ogg", "video/quicktime"]
+				if (!supportedVideoTypes.includes(block.source.media_type)) {
+					throw new Error(
+						`Unsupported video format: ${block.source.media_type}. Supported formats: ${supportedVideoTypes.join(", ")}`,
+					)
+				}
+
+				// Check if video data exists
+				if (!block.source.data || block.source.data.trim() === "") {
+					throw new Error("Video data is empty or missing")
+				}
+
+				// Validate base64 format
+				try {
+					// Basic validation - check if it's valid base64
+					const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/
+					if (!base64Regex.test(block.source.data.replace(/\s/g, ""))) {
+						throw new Error("Invalid base64 format for video data")
+					}
+				} catch (e) {
+					throw new Error(
+						`Failed to validate video data: ${e instanceof Error ? e.message : "Unknown error"}`,
+					)
+				}
+
 				return { inlineData: { data: block.source.data, mimeType: block.source.media_type } }
+			}
 			case "tool_use":
 				return {
 					functionCall: {

src/integrations/misc/process-images.ts

@@ -1,6 +1,6 @@
 import * as vscode from "vscode"
 import fs from "fs/promises"
-import * as path from "path"
+import { getMimeType } from "../../shared/utils/media"
 
 export async function selectImages(): Promise<string[]> {
 	const options: vscode.OpenDialogOptions = {
@@ -23,23 +23,11 @@ export async function selectImages(): Promise<string[]> {
 			const buffer = await fs.readFile(imagePath)
 			const base64 = buffer.toString("base64")
 			const mimeType = getMimeType(imagePath)
+			if (!mimeType) {
+				throw new Error(`Unsupported file type: ${imagePath}`)
+			}
 			const dataUrl = `data:${mimeType};base64,${base64}`
 			return dataUrl
 		}),
 	)
 }
-
-function getMimeType(filePath: string): string {
-	const ext = path.extname(filePath).toLowerCase()
-	switch (ext) {
-		case ".png":
-			return "image/png"
-		case ".jpeg":
-		case ".jpg":
-			return "image/jpeg"
-		case ".webp":
-			return "image/webp"
-		default:
-			throw new Error(`Unsupported file type: ${ext}`)
-	}
-}

src/shared/utils/media.ts

@@ -0,0 +1,54 @@
+import * as path from "path"
+
+/**
+ * Get MIME type from either a file path or a data URI
+ * @param input - Either a file path or a data URI
+ * @returns The MIME type or null if not found
+ */
+export function getMimeType(input: string): string | null {
+	// Check if it's a data URI
+	if (input.startsWith("data:")) {
+		const match = input.match(/^data:(.*?);/)
+		return match ? match[1] : null
+	}
+
+	// Otherwise, treat it as a file path
+	const ext = path.extname(input).toLowerCase()
+	switch (ext) {
+		case ".png":
+			return "image/png"
+		case ".jpeg":
+		case ".jpg":
+			return "image/jpeg"
+		case ".webp":
+			return "image/webp"
+		case ".mp4":
+			return "video/mp4"
+		case ".webm":
+			return "video/webm"
+		case ".ogg":
+			return "video/ogg"
+		case ".mov":
+			return "video/quicktime"
+		default:
+			return null
+	}
+}
+
+/**
+ * Check if a MIME type represents a video
+ * @param mimeType - The MIME type to check
+ * @returns True if it's a video MIME type
+ */
+export function isVideoMimeType(mimeType: string | null): boolean {
+	return mimeType?.startsWith("video/") ?? false
+}
+
+/**
+ * Check if a MIME type represents an image
+ * @param mimeType - The MIME type to check
+ * @returns True if it's an image MIME type
+ */
+export function isImageMimeType(mimeType: string | null): boolean {
+	return mimeType?.startsWith("image/") ?? false
+}