Spaces:

MCP-1st-Birthday
/

Vault.MCP

Sleeping

App Files Files Community

bigwolfe commited on 29 days ago

Commit

c5b6c1c

1 Parent(s): c8b68ff

Update MCP server and widget - getting close to working!

Browse files

Files changed (2) hide show

backend/src/mcp/server.py +32 -21
frontend/src/widget.tsx +93 -14

backend/src/mcp/server.py CHANGED Viewed

@@ -45,28 +45,39 @@ auth_service = AuthService()
 @mcp.resource("ui://widget/note.html", mime_type="text/html+skybridge")
 def widget_resource() -> str:
     """Return the widget HTML bundle."""
-    print("!!! WIDGET RESOURCE ACCESSED (SMOKE TEST) !!!", flush=True)
-    return """<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Smoke Test</title>
-    <style>body { background: #222; color: #0f0; font-family: monospace; padding: 20px; }</style>
-</head>
-<body>
-    <h1>Widget Smoke Test</h1>
-    <p>If you see this, the pipeline is working.</p>
-    <pre id="output"></pre>
-    <script>
-        const output = document.getElementById('output');
-        output.textContent = 'Window.openai: ' + (window.openai ? 'Present' : 'Missing');
-        if (window.openai && window.openai.toolOutput) {
-            output.textContent += '\\nData: ' + JSON.stringify(window.openai.toolOutput, null, 2);
-        }
-    </script>
-</body>
-</html>"""
 def _current_user_id() -> str:

 @mcp.resource("ui://widget/note.html", mime_type="text/html+skybridge")
 def widget_resource() -> str:
     """Return the widget HTML bundle."""
+    # Locate widget.html relative to project root
+    # In Docker: /app/frontend/dist/widget.html
+    # Local: frontend/dist/widget.html
+    # We use PROJECT_ROOT from config
+    widget_path = PROJECT_ROOT / "frontend" / "dist" / "widget.html"
+    logger.info(f"Reading widget from: {widget_path}")
+    if not widget_path.exists():
+        logger.error(f"Widget path does not exist: {widget_path}")
+        return "Widget build not found. Please run 'npm run build' in frontend directory."
+    try:
+        html_content = widget_path.read_text(encoding="utf-8")
+        logger.info(f"Widget content length: {len(html_content)}")
+        if not html_content.strip():
+            logger.error("Widget file is empty!")
+            return "Widget build file is empty."
+        # Replace relative asset paths with absolute URLs for ChatGPT iframe
+        config = get_config()
+        base_url = config.hf_space_url.rstrip("/")
+        logger.info(f"Injecting base URL: {base_url}")
+        # Vite builds usually output /assets/...
+        html_content = html_content.replace('src="/assets/', f'src="{base_url}/assets/')
+        html_content = html_content.replace('href="/assets/', f'href="{base_url}/assets/')
+        return html_content
+    except Exception as e:
+        logger.exception(f"Failed to read widget file: {e}")
+        return f"Server error reading widget: {e}"
 def _current_user_id() -> str:

frontend/src/widget.tsx CHANGED Viewed

@@ -1,11 +1,11 @@
 import React, { useEffect, useState, Component, type ErrorInfo } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-// import { NoteViewer } from '@/components/NoteViewer';
-// import { SearchWidget } from '@/components/SearchWidget';
-// import type { Note } from '@/types/note';
-// import type { SearchResult } from '@/types/search';
-import { AlertTriangle } from 'lucide-react';
 // Mock window.openai for development
 if (!window.openai) {
@@ -54,20 +54,99 @@ class WidgetErrorBoundary extends Component<{ children: React.ReactNode }, { has
 }
 const WidgetApp = () => {
-  const [debugInfo, setDebugInfo] = useState<string>("Initializing...");
   useEffect(() => {
-    console.log("Widget mounted");
-    const toolOutput = window.openai?.toolOutput;
-    setDebugInfo(`Tool Output: ${JSON.stringify(toolOutput, null, 2)}`);
   }, []);
   return (
-    <div className="dark min-h-screen bg-background text-foreground flex flex-col p-4">
-        <h1 className="text-2xl font-bold text-green-500">Widget Hello World</h1>
-        <pre className="bg-muted p-4 rounded mt-4 overflow-auto text-xs font-mono">
-            {debugInfo}
-        </pre>
     </div>
   );
 };

 import React, { useEffect, useState, Component, type ErrorInfo } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import { NoteViewer } from '@/components/NoteViewer';
+import { SearchWidget } from '@/components/SearchWidget';
+import type { Note } from '@/types/note';
+import type { SearchResult } => '@/types/search';
+import { Loader2, AlertTriangle } from 'lucide-react';
 // Mock window.openai for development
 if (!window.openai) {
 }
 const WidgetApp = () => {
+  const [view, setView] = useState<'loading' | 'note' | 'search' | 'error'>('loading');
+  const [data, setData] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
   useEffect(() => {
+    // In a real ChatGPT app, toolOutput is injected before script execution or available on load.
+    // We check it here.
+    const toolOutput = window.openai.toolOutput;
+    console.log("Widget loaded with toolOutput:", toolOutput);
+    if (!toolOutput) {
+      // Fallback for dev testing via URL
+      const params = new URLSearchParams(window.location.search);
+      const mockType = params.get('type');
+      if (mockType === 'note') {
+        // Mock note data
+        setView('note');
+        setData({
+          title: "Demo Note",
+          note_path: "demo.md",
+          body: "# Demo Note\n\nThis is a **markdown** note rendered in the widget.",
+          version: 1,
+          size_bytes: 100,
+          created: new Date().toISOString(),
+          updated: new Date().toISOString(),
+          metadata: {}
+        });
+      } else if (mockType === 'search') {
+        setView('search');
+        setData([
+          { title: "Result 1", note_path: "res1.md", snippet: "Found match...", score: 1.0, updated: new Date() }
+        ]);
+      } else {
+        setError("No content data found. (window.openai.toolOutput is empty)");
+        setView('error');
+      }
+      return;
+    }
+    // Detect content type based on shape
+    if (toolOutput.note) {
+      setView('note');
+      setData(toolOutput.note);
+    } else if (toolOutput.results) {
+      setView('search');
+      setData(toolOutput.results);
+    } else {
+      // Fallback: try to guess or show raw
+      console.warn("Unknown tool output format", toolOutput);
+      setError("Unknown content format.");
+      setView('error');
+    }
   }, []);
+  const handleWikilinkClick = (linkText: string) => {
+    console.log("Clicked wikilink in widget:", linkText);
+    alert(`Navigation to "${linkText}" requested. (Widget navigation pending implementation)`);
+  };
+  const handleNoteSelect = (path: string) => {
+     console.log("Selected note from search:", path);
+     alert(`Opening "${path}"... (Widget navigation pending implementation)`);
+  };
   return (
+    <div className="dark min-h-screen bg-background text-foreground flex flex-col">
+        {view === 'loading' && (
+          <div className="flex-1 flex items-center justify-center">
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+          </div>
+        )}
+        {view === 'error' && (
+          <div className="p-4 text-destructive">
+            <h2 className="font-bold">Error</h2>
+            <p>{error}</p>
+          </div>
+        )}
+        {view === 'note' && data && (
+          <NoteViewer
+            note={data as Note}
+            backlinks={[]} // Backlinks usually fetched separately, omit for V1 widget
+            onWikilinkClick={handleWikilinkClick}
+          />
+        )}
+        {view === 'search' && data && (
+          <SearchWidget
+            results={data as SearchResult[]}
+            onSelectNote={handleNoteSelect}
+          />
+        )}
     </div>
   );
 };