From 4e40fa3e4782e2c3a3326e5fcabab013bfd36816 Mon Sep 17 00:00:00 2001
From: 0xbbjoker <0xbbjoker@proton.me>
Date: Mon, 8 Sep 2025 13:34:13 +0200
Subject: [PATCH] fix: knowledge panel loading

---
 package.json                      |  2 +-
 src/frontend/ui/knowledge-tab.tsx | 47 +++++++++++++++++++++++--------
 src/routes.ts                     | 43 ++++++++++++++++++++--------
 3 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index b771b51..1288390 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@elizaos/plugin-knowledge",
   "description": "Plugin for Knowledge",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
diff --git a/src/frontend/ui/knowledge-tab.tsx b/src/frontend/ui/knowledge-tab.tsx
index 5198f69..04f5895 100644
--- a/src/frontend/ui/knowledge-tab.tsx
+++ b/src/frontend/ui/knowledge-tab.tsx
@@ -26,6 +26,16 @@ import { Card } from './card';
 import { Input } from './input';
 import { MemoryGraph } from './memory-graph';
 
+// Declare global window extension for TypeScript
+declare global {
+  interface Window {
+    ELIZA_CONFIG?: {
+      agentId: string;
+      apiBase: string;
+    };
+  }
+}
+
 // Local utility function instead of importing from client
 const cn = (...classes: (string | undefined | null | false)[]) => {
   return classes.filter(Boolean).join(' ');
@@ -238,18 +248,28 @@ const getCorrectMimeType = (file: File): string => {
   return file.type || 'application/octet-stream';
 };
 
+// Get the API base path from the injected configuration
+const getApiBase = () => {
+  // Check if we have the ELIZA_CONFIG from the server
+  if (window.ELIZA_CONFIG?.apiBase) {
+    return window.ELIZA_CONFIG.apiBase;
+  }
+  return '/api';
+};
+
 const apiClient = {
   getKnowledgeDocuments: async (
     agentId: UUID,
     options?: { limit?: number; before?: number; includeEmbedding?: boolean }
   ) => {
     const params = new URLSearchParams();
-    params.append('agentId', agentId);
+    // Don't append agentId to params if it's already in the URL path
     if (options?.limit) params.append('limit', options.limit.toString());
     if (options?.before) params.append('before', options.before.toString());
     if (options?.includeEmbedding) params.append('includeEmbedding', 'true');
 
-    const response = await fetch(`/api/documents?${params.toString()}`);
+    const apiBase = getApiBase();
+    const response = await fetch(`${apiBase}/documents?${params.toString()}`);
     if (!response.ok) {
       const errorText = await response.text();
       throw new Error(`Failed to fetch knowledge documents: ${response.status} ${errorText}`);
@@ -273,7 +293,8 @@ const apiClient = {
     if (options?.documentId) params.append('documentId', options.documentId);
     if (options?.documentsOnly) params.append('documentsOnly', 'true');
 
-    const response = await fetch(`/api/knowledges?${params.toString()}`);
+    const apiBase = getApiBase();
+    const response = await fetch(`${apiBase}/knowledges?${params.toString()}`);
     if (!response.ok) {
       const errorText = await response.text();
       throw new Error(`Failed to fetch knowledge chunks: ${response.status} ${errorText}`);
@@ -285,7 +306,8 @@ const apiClient = {
     const params = new URLSearchParams();
     params.append('agentId', agentId);
 
-    const response = await fetch(`/api/documents/${knowledgeId}?${params.toString()}`, {
+    const apiBase = getApiBase();
+    const response = await fetch(`${apiBase}/documents/${knowledgeId}?${params.toString()}`, {
       method: 'DELETE',
     });
     if (!response.ok) {
@@ -307,7 +329,8 @@ const apiClient = {
     }
     formData.append('agentId', agentId);
 
-    const response = await fetch(`/api/documents`, {
+    const apiBase = getApiBase();
+    const response = await fetch(`${apiBase}/documents`, {
       method: 'POST',
       body: formData,
     });
@@ -330,7 +353,8 @@ const apiClient = {
     params.append('threshold', threshold.toString());
     params.append('limit', limit.toString());
 
-    const response = await fetch(`/api/search?${params.toString()}`);
+    const apiBase = getApiBase();
+    const response = await fetch(`${apiBase}/search?${params.toString()}`);
     if (!response.ok) {
       const errorText = await response.text();
       throw new Error(`Failed to search knowledge: ${response.status} ${errorText}`);
@@ -673,7 +697,8 @@ export function KnowledgeTab({ agentId }: { agentId: UUID }) {
     setUrlError(null);
 
     try {
-      const result = await fetch(`/api/documents`, {
+      const apiBase = getApiBase();
+      const result = await fetch(`${apiBase}/documents`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -729,7 +754,8 @@ export function KnowledgeTab({ agentId }: { agentId: UUID }) {
       }
       formData.append('agentId', agentId);
 
-      const response = await fetch('/api/documents', {
+      const apiBase = getApiBase();
+      const response = await fetch(`${apiBase}/documents`, {
         method: 'POST',
         body: formData,
       });
@@ -1124,9 +1150,8 @@ export function KnowledgeTab({ agentId }: { agentId: UUID }) {
   return (
     <div className="flex flex-col h-full">
       <div
-        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between border-b gap-3 ${
-          isDocumentFocused ? 'p-6 pb-4' : 'p-4'
-        }`}
+        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between border-b gap-3 ${isDocumentFocused ? 'p-6 pb-4' : 'p-4'
+          }`}
       >
         <div className="flex flex-col gap-1">
           <h2 className="text-lg font-semibold">Knowledge</h2>
diff --git a/src/routes.ts b/src/routes.ts
index b4d48e1..7b9e0db 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -513,6 +513,14 @@ async function knowledgePanelHandler(req: any, res: any, runtime: IAgentRuntime)
 
   logger.debug(`[Document Processor] 🌐 Serving knowledge panel for agent ${agentId}`);
 
+  // Extract the plugin API base path from the request path
+  // Request path will be like: /api/agents/[uuid]/plugins/knowledge/display
+  // We need: /api/agents/[uuid]/plugins/knowledge
+  const requestPath = req.originalUrl || req.url || req.path;
+  const pluginBasePath = requestPath.replace(/\/display.*$/, '');
+
+  logger.debug(`[Document Processor] 🌐 Plugin base path: ${pluginBasePath}`);
+
   try {
     const currentDir = path.dirname(new URL(import.meta.url).pathname);
     // Serve the main index.html from Vite's build output
@@ -522,17 +530,22 @@ async function knowledgePanelHandler(req: any, res: any, runtime: IAgentRuntime)
 
     if (fs.existsSync(frontendPath)) {
       const html = await fs.promises.readFile(frontendPath, 'utf8');
-      // Inject config into existing HTML
-      const injectedHtml = html.replace(
+      // Inject config into existing HTML with the correct API base path
+      // Also fix relative asset paths to use absolute paths
+      let injectedHtml = html.replace(
         '<head>',
         `<head>
           <script>
             window.ELIZA_CONFIG = {
               agentId: '${agentId}',
-              apiBase: '/api'
+              apiBase: '${pluginBasePath}'
             };
           </script>`
       );
+
+      // Fix relative asset paths to be absolute
+      injectedHtml = injectedHtml.replace(/src="\.\/assets\//g, `src="${pluginBasePath}/assets/`);
+      injectedHtml = injectedHtml.replace(/href="\.\/assets\//g, `href="${pluginBasePath}/assets/`);
       res.writeHead(200, { 'Content-Type': 'text/html' });
       res.end(injectedHtml);
     } else {
@@ -577,10 +590,10 @@ async function knowledgePanelHandler(req: any, res: any, runtime: IAgentRuntime)
     <script>
       window.ELIZA_CONFIG = {
         agentId: '${agentId}',
-        apiBase: '/api'
+        apiBase: '${pluginBasePath}'
       };
     </script>
-    <link rel="stylesheet" href="./assets/${cssFile}">
+    <link rel="stylesheet" href="${pluginBasePath}/assets/${cssFile}">
     <style>
         body { font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 20px; }
         .container { max-width: 1200px; margin: 0 auto; }
@@ -593,7 +606,7 @@ async function knowledgePanelHandler(req: any, res: any, runtime: IAgentRuntime)
             <div class="loading">Loading Knowledge Library...</div>
         </div>
     </div>
-    <script type="module" src="./assets/${jsFile}"></script>
+    <script type="module" src="${pluginBasePath}/assets/${jsFile}"></script>
 </body>
 </html>`;
       res.writeHead(200, { 'Content-Type': 'text/html' });
@@ -608,16 +621,24 @@ async function knowledgePanelHandler(req: any, res: any, runtime: IAgentRuntime)
 // Generic handler to serve static assets from the dist/assets directory
 async function frontendAssetHandler(req: any, res: any, runtime: IAgentRuntime) {
   try {
-    logger.debug(`[Document Processor] 🌐 Asset request: ${req.path}`);
+    // Use originalUrl or url first, fallback to path
+    const fullPath = req.originalUrl || req.url || req.path;
+    logger.debug(`[Document Processor] 🌐 Asset request: ${fullPath}`);
     const currentDir = path.dirname(new URL(import.meta.url).pathname);
 
-    const assetRequestPath = req.path; // This is the full path, e.g., /api/agents/X/plugins/knowledge/assets/file.js
+    // The path will be like: /api/agents/X/plugins/knowledge/assets/file.js
+    // We need to extract everything after '/assets/'
     const assetsMarker = '/assets/';
-    const assetsStartIndex = assetRequestPath.indexOf(assetsMarker);
+    const assetsStartIndex = fullPath.lastIndexOf(assetsMarker); // Use lastIndexOf to get the last occurrence
 
     let assetName = null;
     if (assetsStartIndex !== -1) {
-      assetName = assetRequestPath.substring(assetsStartIndex + assetsMarker.length);
+      assetName = fullPath.substring(assetsStartIndex + assetsMarker.length);
+      // Remove any query parameters if present
+      const queryIndex = assetName.indexOf('?');
+      if (queryIndex !== -1) {
+        assetName = assetName.substring(0, queryIndex);
+      }
     }
 
     if (!assetName || assetName.includes('..')) {
@@ -626,7 +647,7 @@ async function frontendAssetHandler(req: any, res: any, runtime: IAgentRuntime)
         res,
         400,
         'BAD_REQUEST',
-        `Invalid asset name: '${assetName}' from path ${assetRequestPath}`
+        `Invalid asset name: '${assetName}' from path ${fullPath}`
       );
     }