Support subdirectory deployment and fix API path handling (#311)

* feat: support subdirectory deployment (NEXT_PUBLIC_BASE_PATH)

* removed unwanted check and fix favicon issue

* Use getAssetUrl for manifest assets to avoid undefined NEXT_PUBLIC_BASE_PATH

* Add validation warning for NEXT_PUBLIC_BASE_PATH format

---------

Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>

components/chat-example-panel.tsx

@@ -9,6 +9,7 @@ import {
     Zap,
 } from "lucide-react"
 import { useDictionary } from "@/hooks/use-dictionary"
+import { getAssetUrl } from "@/lib/base-path"
 
 interface ExampleCardProps {
     icon: React.ReactNode
@@ -79,7 +80,7 @@ export default function ExamplePanel({
         setInput("Replicate this flowchart.")
 
         try {
-            const response = await fetch("/example.png")
+            const response = await fetch(getAssetUrl("/example.png"))
             const blob = await response.blob()
             const file = new File([blob], "example.png", { type: "image/png" })
             setFiles([file])
@@ -92,7 +93,7 @@ export default function ExamplePanel({
         setInput("Replicate this in aws style")
 
         try {
-            const response = await fetch("/architecture.png")
+            const response = await fetch(getAssetUrl("/architecture.png"))
             const blob = await response.blob()
             const file = new File([blob], "architecture.png", {
                 type: "image/png",
@@ -107,7 +108,7 @@ export default function ExamplePanel({
         setInput("Summarize this paper as a diagram")
 
         try {
-            const response = await fetch("/chain-of-thought.txt")
+            const response = await fetch(getAssetUrl("/chain-of-thought.txt"))
             const blob = await response.blob()
             const file = new File([blob], "chain-of-thought.txt", {
                 type: "text/plain",

components/chat-message-display.tsx

@@ -27,6 +27,7 @@ import {
     ReasoningTrigger,
 } from "@/components/ai-elements/reasoning"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { getApiEndpoint } from "@/lib/base-path"
 import {
     applyDiagramOperations,
     convertToLegalXml,
@@ -291,7 +292,7 @@ export function ChatMessageDisplay({
         setFeedback((prev) => ({ ...prev, [messageId]: value }))
 
         try {
-            await fetch("/api/log-feedback", {
+            await fetch(getApiEndpoint("/api/log-feedback"), {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({

components/chat-panel.tsx

@@ -29,6 +29,7 @@ import {
 import { useDiagram } from "@/contexts/diagram-context"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getSelectedAIConfig, useModelConfig } from "@/hooks/use-model-config"
+import { getApiEndpoint } from "@/lib/base-path"
 import { findCachedResponse } from "@/lib/cached-responses"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
@@ -172,7 +173,7 @@ export default function ChatPanel({
 
     // Check config on mount
     useEffect(() => {
-        fetch("/api/config")
+        fetch(getApiEndpoint("/api/config"))
             .then((res) => res.json())
             .then((data) => {
                 setDailyRequestLimit(data.dailyRequestLimit || 0)
@@ -243,7 +244,7 @@ export default function ChatPanel({
         setMessages,
     } = useChat({
         transport: new DefaultChatTransport({
-            api: "/api/chat",
+            api: getApiEndpoint("/api/chat"),
         }),
         async onToolCall({ toolCall }) {
             if (DEBUG) {

components/settings-dialog.tsx

@@ -22,6 +22,7 @@ import {
 } from "@/components/ui/select"
 import { Switch } from "@/components/ui/switch"
 import { useDictionary } from "@/hooks/use-dictionary"
+import { getApiEndpoint } from "@/lib/base-path"
 import { i18n, type Locale } from "@/lib/i18n/config"
 
 const LANGUAGE_LABELS: Record<Locale, string> = {
@@ -77,7 +78,7 @@ function SettingsContent({
         // Only fetch if not cached in localStorage
         if (getStoredAccessCodeRequired() !== null) return
 
-        fetch("/api/config")
+        fetch(getApiEndpoint("/api/config"))
             .then((res) => {
                 if (!res.ok) throw new Error(`HTTP ${res.status}`)
                 return res.json()
@@ -142,12 +143,15 @@ function SettingsContent({
         setIsVerifying(true)
 
         try {
-            const response = await fetch("/api/verify-access-code", {
-                method: "POST",
-                headers: {
-                    "x-access-code": accessCode.trim(),
+            const response = await fetch(
+                getApiEndpoint("/api/verify-access-code"),
+                {
+                    method: "POST",
+                    headers: {
+                        "x-access-code": accessCode.trim(),
+                    },
                 },
-            })
+            )
 
             const data = await response.json()