[Feat] [Dashboard/Frontend] Add configurable port support for Open WebUI iframe

dashboard/frontend/src/pages/PlaygroundPage.tsx

@@ -3,14 +3,26 @@ import styles from './PlaygroundPage.module.css'
 
 const PlaygroundPage: React.FC = () => {
   // Detect OpenWebUI URL based on current hostname
-  // Assumes openwebui and dashboard have matching hostname patterns
   const getOpenWebUIUrl = () => {
     const hostname = window.location.hostname
+    const protocol = window.location.protocol
+
+    // Build-time configurable port (e.g., for All-in-One deployment)
+    const configuredPort = import.meta.env.VITE_OPENWEBUI_PORT
+    if (configuredPort) {
+      return `${protocol}//${hostname}:${configuredPort}`
+    }
+
+    // Assumes openwebui and dashboard have matching hostname patterns
     const openwebuiHost = hostname.replace('dashboard', 'openwebui')
-    return `${window.location.protocol}//${openwebuiHost}`
+    if (openwebuiHost === hostname) {
+      // hostname doesn't contain 'dashboard', cannot determine Open WebUI URL
+      return ''
+    }
+    return `${protocol}//${openwebuiHost}`
   }
 
-  const [openWebUIUrl] = useState(getOpenWebUIUrl())
+  const [openWebUIUrl] = useState(() => getOpenWebUIUrl())
   const [currentUrl, setCurrentUrl] = useState('')
 
   // Auto-load on mount
@@ -30,7 +42,7 @@ const PlaygroundPage: React.FC = () => {
               Test your LLM models and semantic routing with Open WebUI.
             </p>
             <p className={styles.note}>
-              Note: Open WebUI needs to be deployed separately. Check the dashboard README for instructions.
+              If unable to load, please check Open WebUI deployment and port configuration.
             </p>
           </div>
         )}

dashboard/frontend/src/vite-env.d.ts

@@ -1,6 +1,14 @@
 /// <reference types="vite/client" />
 
-declare module '*.module.css' {
-  const classes: { [key: string]: string }
-  export default classes
+interface ImportMetaEnv {
+  readonly VITE_OPENWEBUI_PORT?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
 }