Support local media

Author: ZHallen122

codefox-common/src/common-path.ts

@@ -44,6 +44,14 @@ export const getModelStatusPath = (): string => {
   return modelStatusPath;
 };
 
+//Media Directory
+export const getMediaDir = (): string =>
+  ensureDir(path.join(getRootDir(), 'media'));
+export const getMediaPath = (modelName: string): string =>
+  path.join(getModelsDir(), modelName);
+export const getMediaAvatarsDir = (): string =>
+  ensureDir(path.join(getMediaDir(), 'avatars'));
+
 // Models Directory
 export const getModelsDir = (): string =>
   ensureDir(path.join(getRootDir(), 'models'));

frontend/src/app/api/media/[...path]/route.ts

@@ -0,0 +1,70 @@
+// For App Router: app/api/media/[...path]/route.ts
+import { NextRequest } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+import { getMediaDir } from 'codefox-common';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { path: string[] } }
+) {
+  try {
+    // Get the media directory path
+    const mediaDir = getMediaDir();
+
+    // Construct the full path to the requested file
+    const filePath = path.join(mediaDir, ...params.path);
+
+    // Check if the file exists
+    if (!fs.existsSync(filePath)) {
+      // Log directory contents for debugging
+      try {
+        if (fs.existsSync(mediaDir)) {
+          const avatarsDir = path.join(mediaDir, 'avatars');
+          if (fs.existsSync(avatarsDir)) {
+            console.log(
+              'Avatars directory contents:',
+              fs.readdirSync(avatarsDir)
+            );
+          } else {
+            console.log('Avatars directory does not exist');
+          }
+        } else {
+          console.log('Media directory does not exist');
+        }
+      } catch (err) {
+        console.error('Error reading directory:', err);
+      }
+
+      return new Response('File not found', { status: 404 });
+    }
+
+    // Read the file
+    const fileBuffer = fs.readFileSync(filePath);
+
+    // Determine content type based on file extension
+    const ext = path.extname(filePath).toLowerCase();
+    const contentTypeMap: Record<string, string> = {
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.png': 'image/png',
+      '.webp': 'image/webp',
+      '.gif': 'image/gif',
+    };
+
+    const contentType = contentTypeMap[ext] || 'application/octet-stream';
+
+    // Return the file with appropriate headers
+    return new Response(fileBuffer, {
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'public, max-age=31536000',
+      },
+    });
+  } catch (error) {
+    console.error('Error serving media file:', error);
+    return new Response(`Error serving file: ${error.message}`, {
+      status: 500,
+    });
+  }
+}

frontend/src/components/avatar-uploader.tsx

@@ -8,6 +8,31 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { toast } from 'sonner';
 import { useAuthContext } from '@/providers/AuthProvider';
 
+// Avatar URL normalization helper
+function normalizeAvatarUrl(avatarUrl: string | null | undefined): string {
+  if (!avatarUrl) return '';
+
+  // Check if it's already an absolute URL (S3 case)
+  if (avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://')) {
+    return avatarUrl;
+  }
+
+  // Check if it's a relative media path
+  if (avatarUrl.startsWith('media/')) {
+    // Convert to API route path
+    return `/api/${avatarUrl}`;
+  }
+
+  // Handle paths that might not have the media/ prefix
+  if (avatarUrl.includes('avatars/')) {
+    const parts = avatarUrl.split('avatars/');
+    return `/api/media/avatars/${parts[parts.length - 1]}`;
+  }
+
+  // Return as is for other cases
+  return avatarUrl;
+}
+
 interface AvatarUploaderProps {
   currentAvatarUrl: string;
   avatarFallback: string;
@@ -60,7 +85,9 @@ export const AvatarUploader: React.FC<AvatarUploaderProps> = ({
       });
 
       if (data?.uploadAvatar?.success) {
-        onAvatarChange(data.uploadAvatar.avatarUrl);
+        // Store the original URL from backend
+        const avatarUrl = data.uploadAvatar.avatarUrl;
+        onAvatarChange(avatarUrl);
         toast.success('Avatar updated successfully');
 
         // Refresh the user information in the auth context
@@ -84,8 +111,8 @@ export const AvatarUploader: React.FC<AvatarUploaderProps> = ({
     fileInputRef.current?.click();
   };
 
-  // Use preview URL if available, otherwise use the current avatar URL
-  const displayUrl = previewUrl || currentAvatarUrl;
+  // Use preview URL if available, otherwise use the normalized current avatar URL
+  const displayUrl = previewUrl || normalizeAvatarUrl(currentAvatarUrl);
 
   return (
     <div className="flex flex-col items-center gap-4">

frontend/src/components/user-settings.tsx

@@ -20,6 +20,31 @@ import { useMemo, useState, memo, useEffect } from 'react';
 import { EventEnum } from '../const/EventEnum';
 import { useAuthContext } from '@/providers/AuthProvider';
 
+// Avatar URL normalization helper
+function normalizeAvatarUrl(avatarUrl: string | null | undefined): string {
+  if (!avatarUrl) return '';
+
+  // Check if it's already an absolute URL (S3 case)
+  if (avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://')) {
+    return avatarUrl;
+  }
+
+  // Check if it's a relative media path
+  if (avatarUrl.startsWith('media/')) {
+    // Convert to API route path
+    return `/api/${avatarUrl}`;
+  }
+
+  // Handle paths that might not have the media/ prefix
+  if (avatarUrl.includes('avatars/')) {
+    const parts = avatarUrl.split('avatars/');
+    return `/api/media/avatars/${parts[parts.length - 1]}`;
+  }
+
+  // Return as is for other cases
+  return avatarUrl;
+}
+
 interface UserSettingsProps {
   isSimple: boolean;
 }
@@ -47,6 +72,11 @@ export const UserSettings = ({ isSimple }: UserSettingsProps) => {
     return user?.username || 'Anonymous';
   }, [isLoading, user?.username]);
 
+  // Normalize the avatar URL
+  const normalizedAvatarUrl = useMemo(() => {
+    return normalizeAvatarUrl(user?.avatarUrl);
+  }, [user?.avatarUrl]);
+
   const handleSettingsClick = () => {
     // First navigate using Next.js router
     router.push('/chat?id=setting');
@@ -68,9 +98,9 @@ export const UserSettings = ({ isSimple }: UserSettingsProps) => {
         }`}
       >
         <SmallAvatar className="flex items-center justify-center">
-          {/* Use empty string fallback instead of undefined to avoid React warnings */}
+          {/* Use normalized avatar URL */}
           <AvatarImage
-            src={user?.avatarUrl || ''}
+            src={normalizedAvatarUrl}
             alt="User"
             key={user?.avatarUrl}
           />
@@ -79,7 +109,13 @@ export const UserSettings = ({ isSimple }: UserSettingsProps) => {
         {!isSimple && <span className="truncate">{displayUsername}</span>}
       </Button>
     );
-  }, [avatarFallback, displayUsername, isSimple, user?.avatarUrl]);
+  }, [
+    avatarFallback,
+    displayUsername,
+    isSimple,
+    normalizedAvatarUrl,
+    user?.avatarUrl,
+  ]);
 
   return (
     <DropdownMenu>