diff options
Diffstat (limited to 'apps/memory-graph-playground')
| -rw-r--r-- | apps/memory-graph-playground/.gitignore | 41 | ||||
| -rw-r--r-- | apps/memory-graph-playground/README.md | 52 | ||||
| -rw-r--r-- | apps/memory-graph-playground/next.config.ts | 8 | ||||
| -rw-r--r-- | apps/memory-graph-playground/package.json | 25 | ||||
| -rw-r--r-- | apps/memory-graph-playground/postcss.config.mjs | 7 | ||||
| -rw-r--r-- | apps/memory-graph-playground/public/file.svg | 1 | ||||
| -rw-r--r-- | apps/memory-graph-playground/public/globe.svg | 1 | ||||
| -rw-r--r-- | apps/memory-graph-playground/public/next.svg | 1 | ||||
| -rw-r--r-- | apps/memory-graph-playground/public/vercel.svg | 1 | ||||
| -rw-r--r-- | apps/memory-graph-playground/public/window.svg | 1 | ||||
| -rw-r--r-- | apps/memory-graph-playground/src/app/api/graph/route.ts | 46 | ||||
| -rw-r--r-- | apps/memory-graph-playground/src/app/favicon.ico | bin | 0 -> 25931 bytes | |||
| -rw-r--r-- | apps/memory-graph-playground/src/app/globals.css | 26 | ||||
| -rw-r--r-- | apps/memory-graph-playground/src/app/layout.tsx | 34 | ||||
| -rw-r--r-- | apps/memory-graph-playground/src/app/page.tsx | 169 | ||||
| -rw-r--r-- | apps/memory-graph-playground/tsconfig.json | 34 |
16 files changed, 447 insertions, 0 deletions
diff --git a/apps/memory-graph-playground/.gitignore b/apps/memory-graph-playground/.gitignore new file mode 100644 index 00000000..5ef6a520 --- /dev/null +++ b/apps/memory-graph-playground/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/apps/memory-graph-playground/README.md b/apps/memory-graph-playground/README.md new file mode 100644 index 00000000..5c143d9b --- /dev/null +++ b/apps/memory-graph-playground/README.md @@ -0,0 +1,52 @@ +# Memory Graph Playground + +A demo app showcasing the `@supermemory/memory-graph` package. + +## Getting Started + +```bash +bun install +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) and enter your Supermemory API key. + +## Usage Example + +```tsx +import { MemoryGraph, type DocumentWithMemories } from '@supermemory/memory-graph' + +function App() { + const [documents, setDocuments] = useState<DocumentWithMemories[]>([]) + + return ( + <MemoryGraph + documents={documents} + isLoading={false} + isLoadingMore={false} + error={null} + hasMore={false} + loadMoreDocuments={() => {}} + totalLoaded={documents.length} + variant="console" + showSpacesSelector={true} + > + <div>No memories found</div> + </MemoryGraph> + ) +} +``` + +## Props + +| Prop | Type | Description | +|------|------|-------------| +| `documents` | `DocumentWithMemories[]` | Array of documents to display | +| `isLoading` | `boolean` | Initial loading state | +| `isLoadingMore` | `boolean` | Loading more documents state | +| `error` | `Error \| null` | Error to display | +| `hasMore` | `boolean` | Whether more documents can be loaded | +| `loadMoreDocuments` | `() => void` | Callback to load more documents | +| `totalLoaded` | `number` | Total number of loaded documents | +| `variant` | `"default" \| "console"` | Visual theme variant | +| `showSpacesSelector` | `boolean` | Show space filter dropdown | diff --git a/apps/memory-graph-playground/next.config.ts b/apps/memory-graph-playground/next.config.ts new file mode 100644 index 00000000..66e15661 --- /dev/null +++ b/apps/memory-graph-playground/next.config.ts @@ -0,0 +1,8 @@ +import type { NextConfig } from "next"; + +const nextConfig: NextConfig = { + /* config options here */ + reactCompiler: true, +}; + +export default nextConfig; diff --git a/apps/memory-graph-playground/package.json b/apps/memory-graph-playground/package.json new file mode 100644 index 00000000..308e2a81 --- /dev/null +++ b/apps/memory-graph-playground/package.json @@ -0,0 +1,25 @@ +{ + "name": "memory-graph-playground", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@supermemory/memory-graph": "workspace:*", + "next": "16.0.3", + "react": "19.2.0", + "react-dom": "19.2.0" + }, + "devDependencies": { + "@tailwindcss/postcss": "^4", + "@types/node": "^20", + "@types/react": "^19", + "@types/react-dom": "^19", + "babel-plugin-react-compiler": "1.0.0", + "tailwindcss": "^4", + "typescript": "^5" + } +} diff --git a/apps/memory-graph-playground/postcss.config.mjs b/apps/memory-graph-playground/postcss.config.mjs new file mode 100644 index 00000000..61e36849 --- /dev/null +++ b/apps/memory-graph-playground/postcss.config.mjs @@ -0,0 +1,7 @@ +const config = { + plugins: { + "@tailwindcss/postcss": {}, + }, +}; + +export default config; diff --git a/apps/memory-graph-playground/public/file.svg b/apps/memory-graph-playground/public/file.svg new file mode 100644 index 00000000..004145cd --- /dev/null +++ b/apps/memory-graph-playground/public/file.svg @@ -0,0 +1 @@ +<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file diff --git a/apps/memory-graph-playground/public/globe.svg b/apps/memory-graph-playground/public/globe.svg new file mode 100644 index 00000000..567f17b0 --- /dev/null +++ b/apps/memory-graph-playground/public/globe.svg @@ -0,0 +1 @@ +<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file diff --git a/apps/memory-graph-playground/public/next.svg b/apps/memory-graph-playground/public/next.svg new file mode 100644 index 00000000..5174b28c --- /dev/null +++ b/apps/memory-graph-playground/public/next.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file diff --git a/apps/memory-graph-playground/public/vercel.svg b/apps/memory-graph-playground/public/vercel.svg new file mode 100644 index 00000000..77053960 --- /dev/null +++ b/apps/memory-graph-playground/public/vercel.svg @@ -0,0 +1 @@ +<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/apps/memory-graph-playground/public/window.svg b/apps/memory-graph-playground/public/window.svg new file mode 100644 index 00000000..b2b2a44f --- /dev/null +++ b/apps/memory-graph-playground/public/window.svg @@ -0,0 +1 @@ +<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file diff --git a/apps/memory-graph-playground/src/app/api/graph/route.ts b/apps/memory-graph-playground/src/app/api/graph/route.ts new file mode 100644 index 00000000..b7901966 --- /dev/null +++ b/apps/memory-graph-playground/src/app/api/graph/route.ts @@ -0,0 +1,46 @@ +import { NextResponse } from 'next/server' + +export async function POST(request: Request) { + try { + const body = await request.json() + const { apiKey, page = 1, limit = 500, sort = 'createdAt', order = 'desc' } = body + + if (!apiKey) { + return NextResponse.json( + { error: 'API key is required' }, + { status: 400 } + ) + } + + const response = await fetch('https://api.supermemory.ai/v3/documents/documents', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${apiKey}`, + }, + body: JSON.stringify({ + page, + limit, + sort, + order, + }), + }) + + if (!response.ok) { + const errorData = await response.json().catch(() => ({})) + return NextResponse.json( + { error: errorData.message || `API error: ${response.status}` }, + { status: response.status } + ) + } + + const data = await response.json() + return NextResponse.json(data) + } catch (error) { + console.error('Graph API error:', error) + return NextResponse.json( + { error: 'Failed to fetch documents' }, + { status: 500 } + ) + } +} diff --git a/apps/memory-graph-playground/src/app/favicon.ico b/apps/memory-graph-playground/src/app/favicon.ico Binary files differnew file mode 100644 index 00000000..718d6fea --- /dev/null +++ b/apps/memory-graph-playground/src/app/favicon.ico diff --git a/apps/memory-graph-playground/src/app/globals.css b/apps/memory-graph-playground/src/app/globals.css new file mode 100644 index 00000000..a2dc41ec --- /dev/null +++ b/apps/memory-graph-playground/src/app/globals.css @@ -0,0 +1,26 @@ +@import "tailwindcss"; + +:root { + --background: #ffffff; + --foreground: #171717; +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-geist-sans); + --font-mono: var(--font-geist-mono); +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #0a0a0a; + --foreground: #ededed; + } +} + +body { + background: var(--background); + color: var(--foreground); + font-family: Arial, Helvetica, sans-serif; +} diff --git a/apps/memory-graph-playground/src/app/layout.tsx b/apps/memory-graph-playground/src/app/layout.tsx new file mode 100644 index 00000000..f7fa87eb --- /dev/null +++ b/apps/memory-graph-playground/src/app/layout.tsx @@ -0,0 +1,34 @@ +import type { Metadata } from "next"; +import { Geist, Geist_Mono } from "next/font/google"; +import "./globals.css"; + +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); + +export const metadata: Metadata = { + title: "Create Next App", + description: "Generated by create next app", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + <html lang="en"> + <body + className={`${geistSans.variable} ${geistMono.variable} antialiased`} + > + {children} + </body> + </html> + ); +} diff --git a/apps/memory-graph-playground/src/app/page.tsx b/apps/memory-graph-playground/src/app/page.tsx new file mode 100644 index 00000000..bf202554 --- /dev/null +++ b/apps/memory-graph-playground/src/app/page.tsx @@ -0,0 +1,169 @@ +"use client" + +import { useState, useCallback } from 'react' +import { MemoryGraph, type DocumentWithMemories } from '@supermemory/memory-graph' + +interface DocumentsResponse { + documents: DocumentWithMemories[] + pagination: { + currentPage: number + limit: number + totalItems: number + totalPages: number + } +} + +export default function Home() { + const [apiKey, setApiKey] = useState('') + const [documents, setDocuments] = useState<DocumentWithMemories[]>([]) + const [isLoading, setIsLoading] = useState(false) + const [isLoadingMore, setIsLoadingMore] = useState(false) + const [error, setError] = useState<Error | null>(null) + const [hasMore, setHasMore] = useState(false) + const [currentPage, setCurrentPage] = useState(0) + const [showGraph, setShowGraph] = useState(false) + + const PAGE_SIZE = 500 + + const fetchDocuments = useCallback(async (page: number, append = false) => { + if (!apiKey) return + + if (page === 1) { + setIsLoading(true) + } else { + setIsLoadingMore(true) + } + setError(null) + + try { + const response = await fetch('/api/graph', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + apiKey, + page, + limit: PAGE_SIZE, + sort: 'createdAt', + order: 'desc', + }), + }) + + if (!response.ok) { + const errorData = await response.json() + throw new Error(errorData.error || 'Failed to fetch documents') + } + + const data: DocumentsResponse = await response.json() + + if (append) { + setDocuments(prev => [...prev, ...data.documents]) + } else { + setDocuments(data.documents) + } + + setCurrentPage(data.pagination.currentPage) + setHasMore(data.pagination.currentPage < data.pagination.totalPages) + setShowGraph(true) + } catch (err) { + setError(err instanceof Error ? err : new Error('Unknown error')) + } finally { + setIsLoading(false) + setIsLoadingMore(false) + } + }, [apiKey]) + + const loadMoreDocuments = useCallback(async () => { + if (hasMore && !isLoadingMore) { + await fetchDocuments(currentPage + 1, true) + } + }, [hasMore, isLoadingMore, currentPage, fetchDocuments]) + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault() + if (apiKey) { + setDocuments([]) + setCurrentPage(0) + fetchDocuments(1) + } + } + + return ( + <div className="flex flex-col h-screen bg-zinc-950"> + {/* Header */} + <header className="shrink-0 border-b border-zinc-800 bg-zinc-900 px-6 py-4"> + <div className="flex items-center justify-between"> + <div> + <h1 className="text-xl font-semibold text-white">Memory Graph Playground</h1> + <p className="text-sm text-zinc-400">Test the @supermemory/memory-graph package</p> + </div> + + <form onSubmit={handleSubmit} className="flex items-center gap-3"> + <input + type="password" + placeholder="Enter your Supermemory API key" + value={apiKey} + onChange={(e) => setApiKey(e.target.value)} + className="w-80 rounded-lg border border-zinc-700 bg-zinc-800 px-4 py-2 text-sm text-white placeholder-zinc-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" + /> + <button + type="submit" + disabled={!apiKey || isLoading} + className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50" + > + {isLoading ? 'Loading...' : 'Load Graph'} + </button> + </form> + </div> + </header> + + {/* Main content */} + <main className="flex-1 overflow-hidden"> + {!showGraph ? ( + <div className="flex h-full items-center justify-center"> + <div className="max-w-md text-center"> + <div className="mb-6 text-6xl"> + <svg className="mx-auto h-16 w-16 text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> + <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /> + </svg> + </div> + <h2 className="mb-2 text-xl font-semibold text-white">Get Started</h2> + <p className="mb-6 text-zinc-400"> + Enter your Supermemory API key above to visualize your memory graph. + </p> + <div className="text-left text-sm text-zinc-500"> + <p className="mb-2 font-medium text-zinc-400">Features to test:</p> + <ul className="list-inside list-disc space-y-1"> + <li>Pan and zoom the graph</li> + <li>Click on nodes to see details</li> + <li>Drag nodes around</li> + <li>Use the space selector to filter</li> + <li>Pagination loads more documents</li> + </ul> + </div> + </div> + </div> + ) : ( + <div className="h-full w-full"> + <MemoryGraph + documents={documents} + isLoading={isLoading} + isLoadingMore={isLoadingMore} + error={error} + hasMore={hasMore} + loadMoreDocuments={loadMoreDocuments} + totalLoaded={documents.length} + variant="console" + showSpacesSelector={true} + > + <div className="flex h-full items-center justify-center"> + <p className="text-zinc-400">No memories found. Add some content to see your graph.</p> + </div> + </MemoryGraph> + </div> + )} + </main> + </div> + ) +} diff --git a/apps/memory-graph-playground/tsconfig.json b/apps/memory-graph-playground/tsconfig.json new file mode 100644 index 00000000..cf9c65d3 --- /dev/null +++ b/apps/memory-graph-playground/tsconfig.json @@ -0,0 +1,34 @@ +{ + "compilerOptions": { + "target": "ES2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "react-jsx", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./src/*"] + } + }, + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + ".next/dev/types/**/*.ts", + "**/*.mts" + ], + "exclude": ["node_modules"] +} |