mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-08-28 05:25:33 +00:00
484 lines
14 KiB
TypeScript
484 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { useAuth } from "@lib/auth-context"
|
|
import { useSession } from "@lib/auth"
|
|
import { cn } from "@lib/utils"
|
|
import { dmSans125ClassName } from "@/lib/fonts"
|
|
import { ArrowRight, XCircle } from "lucide-react"
|
|
import Image from "next/image"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import { Suspense, useEffect, useMemo, useState } from "react"
|
|
|
|
import { PENDING_CONNECT_URL_KEY } from "@/lib/constants"
|
|
|
|
const API_URL =
|
|
process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"
|
|
|
|
function isValidLocalhostCallback(callback: string): boolean {
|
|
try {
|
|
const url = new URL(callback)
|
|
const isLocalhost =
|
|
url.hostname === "localhost" || url.hostname === "127.0.0.1"
|
|
const isHttp = url.protocol === "http:"
|
|
const isCallbackPath = url.pathname === "/callback"
|
|
return isLocalhost && isHttp && isCallbackPath
|
|
} catch {
|
|
return false
|
|
}
|
|
}
|
|
|
|
interface PluginInfo {
|
|
name: string
|
|
description: string
|
|
features: string[]
|
|
icon: string
|
|
}
|
|
|
|
const PLUGIN_INFO: Record<string, PluginInfo> = {
|
|
claude_code: {
|
|
name: "Claude Code",
|
|
description:
|
|
"Persistent memory for Claude Code. Remembers your coding context, patterns, and decisions across sessions.",
|
|
features: [
|
|
"Auto-recalls relevant context at session start",
|
|
"Captures important observations from tool usage",
|
|
"Builds persistent user profile from interactions",
|
|
],
|
|
icon: "/images/plugins/claude-code.svg",
|
|
},
|
|
opencode: {
|
|
name: "OpenCode",
|
|
description:
|
|
"Memory layer for OpenCode. Enhances your coding assistant with long-term memory capabilities.",
|
|
features: [
|
|
"Semantic search across previous sessions",
|
|
"Auto-capture of coding decisions",
|
|
"Context injection before each prompt",
|
|
],
|
|
icon: "/images/plugins/opencode.svg",
|
|
},
|
|
openclaw: {
|
|
name: "OpenClaw",
|
|
description:
|
|
"Multi-platform memory for OpenClaw. Works across Telegram, WhatsApp, Discord, Slack and more.",
|
|
features: [
|
|
"Cross-channel memory persistence",
|
|
"Automatic conversation capture",
|
|
"User profile building across platforms",
|
|
],
|
|
icon: "/images/plugins/openclaw.svg",
|
|
},
|
|
hermes: {
|
|
name: "Hermes",
|
|
description: "Memory layer for Hermes agent",
|
|
features: [
|
|
"Semantic search across previous sessions",
|
|
"Auto-capture of conversation context",
|
|
"Builds persistent user profile from interactions",
|
|
],
|
|
icon: "/images/plugins/hermes.svg",
|
|
},
|
|
cursor: {
|
|
name: "Cursor",
|
|
description:
|
|
"Memory layer for Cursor. Enhances your AI coding assistant with persistent context.",
|
|
features: [
|
|
"Remembers coding patterns across sessions",
|
|
"Auto-capture of project decisions",
|
|
"Context-aware suggestions",
|
|
],
|
|
icon: "/images/plugins/cursor.png",
|
|
},
|
|
codex: {
|
|
name: "OpenAI Codex",
|
|
description:
|
|
"Persistent memory for OpenAI Codex CLI. Remembers your coding context, patterns, and decisions across sessions.",
|
|
features: [
|
|
"Auto-recalls relevant context before each prompt",
|
|
"Captures coding decisions and patterns automatically",
|
|
"Builds persistent user profile across projects",
|
|
],
|
|
icon: "/images/plugins/codex.png",
|
|
},
|
|
}
|
|
|
|
const MULTI_PLUGIN_FEATURES = [
|
|
"Share one persistent memory layer across selected coding agents.",
|
|
"Recall project context, coding decisions, and prior sessions.",
|
|
"Connect every selected plugin with one approval.",
|
|
]
|
|
|
|
function isKnownPlugin(value: string): boolean {
|
|
return Object.hasOwn(PLUGIN_INFO, value)
|
|
}
|
|
|
|
function getPluginName(client: string): string {
|
|
return PLUGIN_INFO[client]?.name ?? "External Tool"
|
|
}
|
|
|
|
function formatPluginNames(clients: string[]): string {
|
|
const names = clients.map((id) => getPluginName(id))
|
|
if (names.length === 0) return "External Tool"
|
|
if (names.length === 1) return names[0] ?? "External Tool"
|
|
if (names.length === 2) {
|
|
return `${names[0] ?? "External Tool"} and ${names[1] ?? "External Tool"}`
|
|
}
|
|
|
|
return `${names.slice(0, -1).join(", ")}, and ${names.at(-1) ?? "External Tool"}`
|
|
}
|
|
|
|
function encodeBase64UrlJson(value: Record<string, string>): string {
|
|
return btoa(JSON.stringify(value))
|
|
.replace(/\+/g, "-")
|
|
.replace(/\//g, "_")
|
|
.replace(/=+$/g, "")
|
|
}
|
|
|
|
function PluginLogoStack({ clients }: { clients: string[] }) {
|
|
if (clients.length === 0) {
|
|
return (
|
|
<div className="flex size-10 items-center justify-center rounded-lg border border-[#1E293B] bg-[#080B0F]">
|
|
<ArrowRight className="size-5 text-[#4BA0FA]" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-center">
|
|
{clients.map((id, index) => {
|
|
const plugin = PLUGIN_INFO[id]
|
|
return (
|
|
<div
|
|
className="-ml-2 flex size-10 items-center justify-center rounded-lg border border-[#1E293B] bg-[#080B0F] p-2 first:ml-0"
|
|
key={`${id}-${index}`}
|
|
style={{ zIndex: clients.length - index }}
|
|
title={plugin?.name ?? id}
|
|
>
|
|
{plugin ? (
|
|
<Image
|
|
alt={plugin.name}
|
|
className="size-6 object-contain"
|
|
height={24}
|
|
src={plugin.icon}
|
|
width={24}
|
|
/>
|
|
) : (
|
|
<ArrowRight className="size-5 text-[#4BA0FA]" />
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
type Status = "loading" | "creating" | "success" | "error"
|
|
|
|
const pageWrapperClass =
|
|
"flex items-center justify-center min-h-screen bg-background p-4"
|
|
const cardClass = cn(
|
|
"bg-[#14161A] rounded-[14px] p-6 w-full max-w-[400px]",
|
|
"shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]",
|
|
)
|
|
|
|
function AuthConnectContent() {
|
|
const params = useSearchParams()
|
|
const router = useRouter()
|
|
const { data: session, isPending } = useSession()
|
|
const { org, organizations, isRestoring } = useAuth()
|
|
const [status, setStatus] = useState<Status>("loading")
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const callback = params.get("callback")
|
|
const client = params.get("client")
|
|
const clientsParam = params.get("clients")
|
|
const hasClientList = params.has("clients")
|
|
const rawRequestedClients = useMemo(
|
|
() =>
|
|
(clientsParam !== null ? clientsParam.split(",") : client ? [client] : [])
|
|
.map((value) => value.trim())
|
|
.filter(Boolean),
|
|
[client, clientsParam],
|
|
)
|
|
const requestedClients = useMemo(
|
|
() => Array.from(new Set(rawRequestedClients.filter(isKnownPlugin))),
|
|
[rawRequestedClients],
|
|
)
|
|
const invalidClients = useMemo(
|
|
() => rawRequestedClients.filter((value) => !isKnownPlugin(value)),
|
|
[rawRequestedClients],
|
|
)
|
|
const validClient = requestedClients[0] ?? null
|
|
const displayName = formatPluginNames(requestedClients)
|
|
const pluginInfo =
|
|
requestedClients.length === 1 && validClient
|
|
? PLUGIN_INFO[validClient]
|
|
: null
|
|
|
|
// Redirect new users (logged in but no organization) to onboarding.
|
|
// Store the current connect URL so onboarding can redirect back here.
|
|
const shouldRedirectToOnboarding =
|
|
!isPending &&
|
|
!isRestoring &&
|
|
!!session &&
|
|
Array.isArray(organizations) &&
|
|
organizations.length === 0
|
|
|
|
useEffect(() => {
|
|
if (isPending || isRestoring) return
|
|
if (!session) return
|
|
if (organizations === null) return // orgs query still pending
|
|
if (organizations.length > 0) return // has orgs, nothing to do
|
|
|
|
try {
|
|
sessionStorage.setItem(PENDING_CONNECT_URL_KEY, window.location.href)
|
|
} catch (e) {
|
|
console.warn("Failed to access sessionStorage for pending connect URL", e)
|
|
}
|
|
router.replace("/onboarding")
|
|
}, [isPending, isRestoring, session, organizations, router])
|
|
|
|
async function handleConnect() {
|
|
if (!callback) {
|
|
setStatus("error")
|
|
setError("Missing callback parameter.")
|
|
return
|
|
}
|
|
if (!isValidLocalhostCallback(callback)) {
|
|
setStatus("error")
|
|
setError("Invalid callback URL.")
|
|
return
|
|
}
|
|
if (invalidClients.length > 0) {
|
|
setStatus("error")
|
|
setError(`Unsupported plugin requested: ${invalidClients.join(", ")}.`)
|
|
return
|
|
}
|
|
if (requestedClients.length === 0) {
|
|
setStatus("error")
|
|
setError("Invalid or missing client.")
|
|
return
|
|
}
|
|
if (!session || !org) {
|
|
setStatus("error")
|
|
setError(
|
|
"Your account is not fully set up yet. Please complete onboarding first.",
|
|
)
|
|
return
|
|
}
|
|
|
|
try {
|
|
setStatus("creating")
|
|
const fetchParams = new URLSearchParams({ callback })
|
|
fetchParams.set("client", requestedClients[0] ?? "")
|
|
|
|
const res = await fetch(`${API_URL}/v3/auth/key?${fetchParams}`, {
|
|
credentials: "include",
|
|
})
|
|
|
|
if (!res.ok) {
|
|
const errorData = (await res.json().catch(() => ({}))) as {
|
|
message?: string
|
|
}
|
|
throw new Error(errorData.message || "Failed to get API key")
|
|
}
|
|
|
|
const data = (await res.json()) as { key: string }
|
|
setStatus("success")
|
|
|
|
const redirectUrl = new URL(callback)
|
|
if (hasClientList) {
|
|
redirectUrl.searchParams.set(
|
|
"keys",
|
|
encodeBase64UrlJson(
|
|
Object.fromEntries(
|
|
requestedClients.map((requestedClient) => [
|
|
requestedClient,
|
|
data.key,
|
|
]),
|
|
),
|
|
),
|
|
)
|
|
} else {
|
|
redirectUrl.searchParams.set("apikey", data.key)
|
|
}
|
|
redirectUrl.searchParams.set("api_url", API_URL)
|
|
window.location.href = redirectUrl.toString()
|
|
} catch (err) {
|
|
console.error("Failed to get API key:", err)
|
|
setStatus("error")
|
|
setError(err instanceof Error ? err.message : "Failed to get API key")
|
|
}
|
|
}
|
|
|
|
// Show a spinner while session/org data is loading or while we're about
|
|
// to redirect to onboarding (prevents a brief flash of the connect card).
|
|
const isAuthLoading = isPending || isRestoring || organizations === null
|
|
|
|
useEffect(() => {
|
|
if (status !== "loading") return
|
|
if (rawRequestedClients.length === 0) {
|
|
setStatus("error")
|
|
setError("Invalid or missing client.")
|
|
return
|
|
}
|
|
if (invalidClients.length > 0) {
|
|
setStatus("error")
|
|
setError(`Unsupported plugin requested: ${invalidClients.join(", ")}.`)
|
|
}
|
|
}, [invalidClients, rawRequestedClients.length, status])
|
|
|
|
if (isAuthLoading || shouldRedirectToOnboarding) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen bg-background">
|
|
<div className="size-6 border-2 border-[#4BA0FA] border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (status === "loading") {
|
|
return (
|
|
<div className={pageWrapperClass}>
|
|
<div className={cardClass}>
|
|
<div className="flex flex-col items-center gap-5">
|
|
<PluginLogoStack clients={requestedClients} />
|
|
<div className="text-center">
|
|
<h2
|
|
className={dmSans125ClassName(
|
|
"font-semibold text-[18px] text-[#FAFAFA]",
|
|
)}
|
|
>
|
|
Connect {displayName}
|
|
</h2>
|
|
<p
|
|
className={dmSans125ClassName(
|
|
"text-[13px] text-[#737373] mt-1",
|
|
)}
|
|
>
|
|
{pluginInfo?.description ??
|
|
(requestedClients.length > 1
|
|
? "Use one Supermemory account across these plugins."
|
|
: `Use your Supermemory account with ${displayName}.`)}
|
|
</p>
|
|
</div>
|
|
|
|
<ul className="w-full space-y-2.5">
|
|
{(pluginInfo?.features ?? MULTI_PLUGIN_FEATURES).map(
|
|
(feature) => (
|
|
<li key={feature} className="flex items-start gap-2.5">
|
|
<ArrowRight className="mt-0.5 size-3.5 shrink-0 text-[#4BA0FA]" />
|
|
<span
|
|
className={dmSans125ClassName(
|
|
"text-[13px] text-[#8B8B8B]",
|
|
)}
|
|
>
|
|
{feature}
|
|
</span>
|
|
</li>
|
|
),
|
|
)}
|
|
</ul>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={handleConnect}
|
|
className={cn(
|
|
"relative w-full h-11 rounded-[10px] flex items-center justify-center",
|
|
"text-[#FAFAFA] font-medium text-[14px]",
|
|
"shadow-[0px_2px_10px_rgba(5,1,0,0.2)]",
|
|
"cursor-pointer transition-opacity hover:opacity-90",
|
|
dmSans125ClassName(),
|
|
)}
|
|
style={{
|
|
background:
|
|
"linear-gradient(182.37deg, #0ff0d2 -91.53%, #5bd3fb -67.8%, #1e0ff0 95.17%)",
|
|
boxShadow:
|
|
"1px 1px 2px 0px #1A88FF inset, 0 2px 10px 0 rgba(5, 1, 0, 0.20)",
|
|
}}
|
|
>
|
|
Approve Connection
|
|
<div className="absolute inset-0 pointer-events-none rounded-[inherit] shadow-[inset_1px_1px_2px_1px_#1A88FF]" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
if (status === "error") {
|
|
return (
|
|
<div className={pageWrapperClass}>
|
|
<div className={cardClass}>
|
|
<div className="flex flex-col items-center gap-4 text-center">
|
|
<XCircle className="size-10 text-red-400" />
|
|
<div>
|
|
<h2
|
|
className={dmSans125ClassName(
|
|
"font-semibold text-[18px] text-[#FAFAFA]",
|
|
)}
|
|
>
|
|
Connection failed
|
|
</h2>
|
|
<p
|
|
className={dmSans125ClassName(
|
|
"text-[13px] text-[#737373] mt-1",
|
|
)}
|
|
>
|
|
{error}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 w-full">
|
|
<button
|
|
type="button"
|
|
onClick={() => void handleConnect()}
|
|
className={cn(
|
|
"w-full flex items-center justify-center gap-2 rounded-full h-10 px-4",
|
|
"bg-[#0D121A] border border-[#1E293B] text-[#FAFAFA]",
|
|
"text-[13px] font-medium cursor-pointer transition-colors hover:bg-[#1E293B]",
|
|
dmSans125ClassName(),
|
|
)}
|
|
>
|
|
Try again
|
|
</button>
|
|
<a
|
|
href="https://app.supermemory.ai"
|
|
className={dmSans125ClassName(
|
|
"text-[12px] text-[#737373] hover:text-[#FAFAFA] transition-colors",
|
|
)}
|
|
>
|
|
Go to app
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen bg-background">
|
|
<div className="flex flex-col items-center gap-3">
|
|
<div className="size-6 border-2 border-[#4BA0FA] border-t-transparent rounded-full animate-spin" />
|
|
<p className={dmSans125ClassName("text-sm text-[#737373]")}>
|
|
{status === "creating" && `Connecting ${displayName}…`}
|
|
{status === "success" &&
|
|
`Success! Redirecting back to ${displayName}…`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function AuthConnectPage() {
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<div className="flex items-center justify-center min-h-screen bg-background">
|
|
<div className="size-6 border-2 border-[#4BA0FA] border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
}
|
|
>
|
|
<AuthConnectContent />
|
|
</Suspense>
|
|
)
|
|
}
|