fix: upload image with local fs storage

src/app/api/v1/settings/upload/route.ts

@@ -30,7 +30,12 @@ export const POST = defineHandler({
   }
 
   const store = (await getFlow(baseRegistry)).getStorage();
-  const url = await store.put(`images/${file.name}`, Buffer.from(await file.arrayBuffer()), false);
+  let url = await store.put(`images/${file.name}`, Buffer.from(await file.arrayBuffer()), false);
+
+  // FIXME: remove magic check
+  if (store.identifier === 'rag.document-storage.fs') {
+    url = `/assets/images/${file.name}`
+  }
 
   return NextResponse.json({
     url: url

src/app/assets/[...path]/route.ts

@@ -0,0 +1,30 @@
+import type { RouteProps } from '@/lib/next/types';
+import { baseRegistry } from '@/rag-spec/base';
+import { getFlow } from '@/rag-spec/createFlow';
+import mime from 'mime';
+import { notFound } from 'next/navigation';
+import { type NextRequest, NextResponse } from 'next/server';
+
+export async function GET (req: NextRequest, { params }: RouteProps<{ path: string[] }>) {
+  const flow = await getFlow(baseRegistry);
+  const storage = flow.getStorage('rag.document-storage.fs');
+
+  if (!storage.available()) {
+    notFound();
+  }
+
+  const name = params.path.join('/');
+
+  try {
+    const buffer = await storage.get(name);
+    const contentType = mime.getType(name);
+
+    return new NextResponse(buffer, {
+      headers: contentType ? { 'Content-Type': contentType } : {},
+    });
+  } catch (e) {
+    notFound();
+  }
+}
+
+export const dynamic = 'force-static';

src/components/image-uploader.tsx

@@ -34,9 +34,10 @@ const ImageUploader = React.forwardRef<HTMLInputElement, ImageUploaderProps>(
       if (!image) return;
       setLoading(true);
 
-      await updateSettingImage(image, onChange);
-
-      setLoading(false);
+      await updateSettingImage(image, onChange)
+        .finally(() => {
+          setLoading(false);
+        });
     };
 
     const handleInputChange = async (event: React.ChangeEvent<HTMLInputElement>) => {

src/core/schema/setting.ts

@@ -29,11 +29,14 @@ export const reCaptchas = z.enum(['', 'v3', 'enterprise']);
 export const maxExampleQuestions = 5;
 export const maxHomepageFooterLinks = 5;
 
+const assetUrl = (message: string) =>
+  z.string().url(message).or(z.string().regex(/^\/assets\//, message));
+
 export const WebsiteSetting = z.object({
   title: z.string().min(1, 'title must has at latest 1 character').max(20, 'title must has at most 20 characters'),
   description: z.string().max(200, 'description must has at most 200 characters'),
-  logo_in_light_mode: z.string().url('logo_in_light_mode should be a correct URL of image'),
-  logo_in_dark_mode: z.string().url('logo_in_dark_mode should be a correct URL of image'),
+  logo_in_light_mode: assetUrl('logo_in_light_mode should be a correct URL of image'),
+  logo_in_dark_mode: assetUrl('logo_in_dark_mode should be a correct URL of image'),
   language: language,
   homepage: z.object({
     title: z.string().min(1, 'homepage title must has at latest 1 character').max(50, 'homepage title must has at most 20 characters'),
@@ -42,9 +45,9 @@ export const WebsiteSetting = z.object({
     footer_links: z.array(z.object({ text: z.string().min(1), href: z.string().min(1) })).optional(),
   }),
   social: z.object({
-    twitter: z.string().url('twitter should be a correct URL').optional(),
-    github: z.string().url('github should be a correct URL').optional(),
-    discord: z.string().url('discord should be a correct URL').optional(),
+    twitter: assetUrl('twitter should be a correct URL').optional(),
+    github: assetUrl('github should be a correct URL').optional(),
+    discord: assetUrl('discord should be a correct URL').optional(),
   }).optional(),
 });
 
@@ -89,9 +92,7 @@ export const CustomJsSetting = z.object({
   button_label: z.string({
     required_error: 'Button label is required',
   }),
-  button_img_src: z
-    .string()
-    .url('Button Image Src should be a correct URL of image')
+  button_img_src: assetUrl('Button Image Src should be a correct URL of image')
     .optional(),
   example_questions: z
     .array(z.object({ text: z.string().min(1) }))
@@ -100,9 +101,7 @@ export const CustomJsSetting = z.object({
       `example questions must has at most ${maxExampleQuestions} questions`
     )
     .optional(),
-  logo_src: z
-    .string()
-    .url('Logo Src should be a correct URL of image')
+  logo_src: assetUrl('Logo Src should be a correct URL of image')
     .optional(),
   widget_title: z.string().min(1, 'title must has at latest 1 character').max(50, 'title must has at most 50 characters').optional(),
   widget_input_placeholder: z.string().min(1, 'input placeholder must has at latest 1 character').max(50, 'input placeholder must has at most 50 characters').optional(),