fix: update image imports to use custom Image component with base path handling

components/chat-message-display.tsx

@@ -16,7 +16,6 @@ import {
     ThumbsUp,
     X,
 } from "lucide-react"
-import Image from "next/image"
 import type { MutableRefObject } from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import ReactMarkdown from "react-markdown"
@@ -31,6 +30,7 @@ import { ToolCallCard } from "@/components/chat/ToolCallCard"
 import type { DiagramOperation, ToolPartLike } from "@/components/chat/types"
 import type { ValidationState } from "@/components/chat/ValidationCard"
 import { ValidationCard } from "@/components/chat/ValidationCard"
+import Image from "@/components/image-with-basepath"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getApiEndpoint } from "@/lib/base-path"

components/chat-panel.tsx

@@ -8,7 +8,6 @@ import {
     PanelRightOpen,
     Settings,
 } from "lucide-react"
-import Image from "next/image"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import type React from "react"
 import {
@@ -22,6 +21,7 @@ import { flushSync } from "react-dom"
 import { Toaster, toast } from "sonner"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
 import { ChatInput } from "@/components/chat-input"
+import Image from "@/components/image-with-basepath"
 import { ModelConfigDialog } from "@/components/model-config-dialog"
 import { SettingsDialog } from "@/components/settings-dialog"
 import { useDiagram } from "@/contexts/diagram-context"

components/chat/ChatLobby.tsx

@@ -8,9 +8,9 @@ import {
     Trash2,
     X,
 } from "lucide-react"
-import Image from "next/image"
 import { useState } from "react"
 import ExamplePanel from "@/components/chat-example-panel"
+import Image from "@/components/image-with-basepath"
 import {
     AlertDialog,
     AlertDialogAction,

components/chat/ValidationCard.tsx

@@ -10,8 +10,8 @@ import {
     RefreshCw,
     X,
 } from "lucide-react"
-import Image from "next/image"
 import { useState } from "react"
+import Image from "@/components/image-with-basepath"
 import { useDictionary } from "@/hooks/use-dictionary"
 import type { ValidationResult } from "@/lib/diagram-validator"
 

components/file-preview-list.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { FileCode, FileText, Link, Loader2, X } from "lucide-react"
-import Image from "next/image"
 import { useEffect, useRef, useState } from "react"
+import Image from "@/components/image-with-basepath"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 

components/history-dialog.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import Image from "next/image"
 import { useState } from "react"
+import Image from "@/components/image-with-basepath"
 import { Button } from "@/components/ui/button"
 import {
     Dialog,

components/image-with-basepath.tsx

@@ -0,0 +1,11 @@
+import NextImage from "next/image"
+
+export default function Image(props: React.ComponentProps<typeof NextImage>) {
+    const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ""
+    const src =
+        typeof props.src === "string" && !props.src.startsWith("http")
+            ? `${basePath}${props.src}`
+            : props.src
+
+    return <NextImage {...props} src={src} />
+}