feat: support base64 image in frontend

app/src/components/plugins/file.tsx

@@ -1,5 +1,5 @@
 import { Download, Eye, File } from "lucide-react";
-import { saveAsFile, saveBlobAsFile } from "@/utils/dom.ts";
+import { saveAsFile, saveBlobAsFile, saveImageAsFile } from "@/utils/dom.ts";
 import { useMemo } from "react";
 import { Button } from "@/components/ui/button.tsx";
 import FileViewer from "@/components/FileViewer.tsx";
@@ -15,11 +15,16 @@ import FileViewer from "@/components/FileViewer.tsx";
 export function parseFile(data: string, acceptDownload?: boolean) {
   const filename = data.split("\n")[0].replace("[[", "").replace("]]", "");
   const content = data.replace(`[[${filename}]]\n`, "");
+
   const image = useMemo(() => {
     // get image url from content (like: https://i.imgur.com/xxxxx.png)
-    const match = content
-      .toLowerCase()
-      .match(/(https?:\/\/.*\.(?:png|jpg|jpeg|gif))/);
+    const match = content.match(/(https?:\/\/.*\.(?:png|jpg|jpeg|gif))/);
+    return match ? match[0] : "";
+  }, [filename, content]);
+
+  const b64image = useMemo(() => {
+    // get base64 image from content (like: data:image/png;base64,xxxxx)
+    const match = content.match(/(data:image\/.*;base64,.*=)/);
     return match ? match[0] : "";
   }, [filename, content]);
 
@@ -38,12 +43,16 @@ export function parseFile(data: string, acceptDownload?: boolean) {
         <File className={`mr-1`} />
         <span className={`name`}>{filename}</span>
         <div className={`grow`} />
-        {image ? (
+        {image || b64image ? (
           <Button
             variant={`ghost`}
             size={`icon`}
             className={`download-action p-0 h-4 w-4`}
             onClick={async () => {
+              if (b64image) {
+                saveImageAsFile(filename, b64image);
+                return;
+              }
               const res = await fetch(image);
               saveBlobAsFile(filename, await res.blob());
             }}
@@ -57,6 +66,7 @@ export function parseFile(data: string, acceptDownload?: boolean) {
         )}
       </div>
       {image && <img src={image} className={`file-image`} alt={""} />}
+      {b64image && <img src={b64image} className={`file-image`} alt={""} />}
     </div>
   );
 }

utils/config.go

@@ -50,6 +50,9 @@ func RegisterStaticRoute(engine *gin.Engine) {
 	// static files are in ~/app/dist
 
 	if !viper.GetBool("serve_static") {
+		engine.NoRoute(func(c *gin.Context) {
+			c.JSON(404, gin.H{"status": false, "message": "not found or method not allowed"})
+		})
 		return
 	}