mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-08-28 05:25:33 +00:00
feat: Unify connections into the Add Memory modal; redesign disconnect dialog (#900)
- Consolidate Drive/Notion/OneDrive management into the Add Memory → Connect tab and remove the standalone `view=connections` page (deleted `connections-detail.tsx`; redirected the Integrations tile and onboarding spotlight to `?add=connect`). - Replace the duplicated provider tile row when connections exist with a single `+ Add a connection` dropdown styled to match the home-page space selector. - Rebuild the disconnect dialog as a single-decision flow: keep-memories is the default, with an inline `(optional)` checkbox to also delete imported memories — primary button label/color flips to red when opted in. - Memory-of-day card now deep-links the source document via `?doc=<id>` instead of just routing to the memories list. - Refactored the Pro paywall on the connections surface into a focused, contained card matching the rest of the dashboard's visual language.
This commit is contained in:
MaheshtheDev
parent
805cf3cb93
commit
9584d98d6b
7 changed files with 387 additions and 745 deletions
|
|
@ -229,7 +229,7 @@ function buildSpotlightCatalog(
|
|||
pro: true,
|
||||
onOpen: () => {
|
||||
track("connections")
|
||||
void router.push("/?view=connections")
|
||||
void router.push("/?add=connect")
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ import { XBookmarksDetailView } from "@/components/onboarding/x-bookmarks-detail
|
|||
import { ChromeDetail } from "@/components/integrations/chrome-detail"
|
||||
import { ShortcutsDetail } from "@/components/integrations/shortcuts-detail"
|
||||
import { RaycastDetail } from "@/components/integrations/raycast-detail"
|
||||
import { ConnectionsDetail } from "@/components/integrations/connections-detail"
|
||||
import { PluginsDetail } from "@/components/integrations/plugins-detail"
|
||||
import { AnimatedGradientBackground } from "@/components/animated-gradient-background"
|
||||
import { AddDocumentModal } from "@/components/add-document"
|
||||
|
|
@ -628,12 +627,6 @@ export default function NewPage() {
|
|||
>
|
||||
<RaycastDetail />
|
||||
</DetailWrapper>
|
||||
) : viewMode === "connections" ? (
|
||||
<DetailWrapper
|
||||
onBack={() => void setViewMode("integrations")}
|
||||
>
|
||||
<ConnectionsDetail />
|
||||
</DetailWrapper>
|
||||
) : viewMode === "import" ? (
|
||||
<XBookmarksDetailView
|
||||
onBack={() => void setViewMode("integrations")}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,22 @@ import type { ConnectionResponseSchema } from "@repo/validation/api"
|
|||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { GoogleDrive, Notion, OneDrive } from "@ui/assets/icons"
|
||||
import { useCustomer } from "autumn-js/react"
|
||||
import { Check, ChevronDown, Loader, Trash2, Zap } from "lucide-react"
|
||||
import {
|
||||
Check,
|
||||
ChevronDown,
|
||||
Clock,
|
||||
FolderOpen,
|
||||
Loader,
|
||||
Trash2,
|
||||
Zap,
|
||||
} from "lucide-react"
|
||||
import { useEffect, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
import type { z } from "zod"
|
||||
import { dmSansClassName } from "@/lib/fonts"
|
||||
import { dmSans125ClassName, dmSansClassName } from "@/lib/fonts"
|
||||
import { cn } from "@lib/utils"
|
||||
import { DEFAULT_PROJECT_ID } from "@lib/constants"
|
||||
import type { Project } from "@lib/types"
|
||||
import { Button } from "@ui/components/button"
|
||||
import {
|
||||
DropdownMenu,
|
||||
|
|
@ -37,26 +47,178 @@ const CONNECTORS: Record<
|
|||
{
|
||||
title: string
|
||||
description: string
|
||||
documentLabel: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
> = {
|
||||
"google-drive": {
|
||||
title: "Google Drive",
|
||||
description: "Connect your Google docs, sheets and slides",
|
||||
documentLabel: "documents",
|
||||
icon: GoogleDrive,
|
||||
},
|
||||
notion: {
|
||||
title: "Notion",
|
||||
description: "Import your Notion pages and databases",
|
||||
documentLabel: "pages",
|
||||
icon: Notion,
|
||||
},
|
||||
onedrive: {
|
||||
title: "OneDrive",
|
||||
description: "Access your Microsoft Office documents",
|
||||
documentLabel: "documents",
|
||||
icon: OneDrive,
|
||||
},
|
||||
} as const
|
||||
|
||||
function formatRelativeTime(date: string | null | undefined): string {
|
||||
if (!date) return "Never"
|
||||
const d = new Date(date)
|
||||
const diffMs = Date.now() - d.getTime()
|
||||
const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
|
||||
const diffDays = Math.floor(diffHours / 24)
|
||||
if (diffHours < 1) return "Just now"
|
||||
if (diffHours < 24) return `${diffHours}h ago`
|
||||
if (diffDays === 1) return "Yesterday"
|
||||
if (diffDays < 7) return `${diffDays} days ago`
|
||||
return d.toLocaleDateString()
|
||||
}
|
||||
|
||||
function ConnectionRow({
|
||||
connection,
|
||||
onDelete,
|
||||
isDeleting,
|
||||
projects,
|
||||
}: {
|
||||
connection: Connection
|
||||
onDelete: () => void
|
||||
isDeleting: boolean
|
||||
projects: Project[]
|
||||
}) {
|
||||
const config = CONNECTORS[connection.provider as ConnectorProvider]
|
||||
if (!config) return null
|
||||
|
||||
const Icon = config.icon
|
||||
const isConnected =
|
||||
!connection.expiresAt || new Date(connection.expiresAt) > new Date()
|
||||
|
||||
const getProjectName = (tag: string): string => {
|
||||
if (tag === DEFAULT_PROJECT_ID) return "Default"
|
||||
return (
|
||||
projects.find((p) => p.containerTag === tag)?.name ??
|
||||
tag.replace(/^sm_project_/, "").replace(/_/g, " ")
|
||||
)
|
||||
}
|
||||
|
||||
const documentCount = (connection.metadata?.documentCount as number) ?? 0
|
||||
const containerTags = (
|
||||
connection as Connection & { containerTags?: string[] }
|
||||
).containerTags
|
||||
const projectName = containerTags?.[0]
|
||||
? getProjectName(containerTags[0])
|
||||
: null
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"bg-[#14161A] border border-[rgba(82,89,102,0.2)] rounded-[12px] px-4 py-3",
|
||||
"shadow-[0px_1px_2px_0px_rgba(0,43,87,0.1)]",
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-4">
|
||||
<Icon className="size-6 shrink-0" />
|
||||
<div className="flex-1 flex flex-col gap-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"font-medium text-[16px] text-[#FAFAFA]",
|
||||
)}
|
||||
>
|
||||
{config.title}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"size-[7px] rounded-full",
|
||||
isConnected ? "bg-[#00AC3F]" : "bg-[#737373]",
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"text-[14px]",
|
||||
isConnected ? "text-[#00AC3F]" : "text-[#737373]",
|
||||
)}
|
||||
>
|
||||
{isConnected ? "Connected" : "Disconnected"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={cn(dmSans125ClassName(), "text-[14px] text-[#737373]")}
|
||||
>
|
||||
{connection.email || "Unknown"}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDelete}
|
||||
disabled={isDeleting}
|
||||
className="text-[#737373] hover:text-red-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Trash2 className="size-[22px]" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 pt-2.5 border-t border-[rgba(82,89,102,0.12)]">
|
||||
<div className="flex items-center gap-2 flex-1 flex-wrap">
|
||||
{projectName && (
|
||||
<div className="flex items-center gap-1">
|
||||
<FolderOpen className="size-3 text-[#4B5563]" />
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"text-[12px] text-[#737373] capitalize",
|
||||
)}
|
||||
>
|
||||
{projectName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="size-3 text-[#4B5563]" />
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"text-[12px] text-[#737373]",
|
||||
)}
|
||||
>
|
||||
{formatRelativeTime(connection.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-1 shrink-0">
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"text-[14px] font-semibold text-[#FAFAFA]",
|
||||
)}
|
||||
>
|
||||
{documentCount}
|
||||
</span>
|
||||
<span
|
||||
className={cn(dmSans125ClassName(), "text-[12px] text-[#737373]")}
|
||||
>
|
||||
{config.documentLabel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface ConnectContentProps {
|
||||
selectedProject: string
|
||||
}
|
||||
|
|
@ -75,6 +237,9 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) {
|
|||
connection: Connection | null
|
||||
}>({ open: false, connection: null })
|
||||
|
||||
const projects = (queryClient.getQueryData<Project[]>(["projects"]) ||
|
||||
[]) as Project[]
|
||||
|
||||
const handleUpgrade = async () => {
|
||||
setIsUpgrading(true)
|
||||
try {
|
||||
|
|
@ -190,7 +355,7 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) {
|
|||
onSuccess: (_data, variables) => {
|
||||
toast.success(
|
||||
variables.deleteDocuments
|
||||
? "Connection removal has started. supermemory will permanently delete all documents related to the connection in the next few minutes."
|
||||
? "Connection removal has started. Documents will be permanently deleted in the next few minutes."
|
||||
: "Connection removed. Your memories have been kept.",
|
||||
)
|
||||
setRemoveDialog({ open: false, connection: null })
|
||||
|
|
@ -211,128 +376,28 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) {
|
|||
})
|
||||
}
|
||||
|
||||
const handleDisconnect = (connection: Connection) => {
|
||||
setRemoveDialog({ open: true, connection })
|
||||
}
|
||||
|
||||
const hasConnections = connections.length > 0
|
||||
|
||||
// Helper function to format connection subtext safely
|
||||
const getConnectionSubtext = (connection: Connection): string => {
|
||||
if (connection.email) {
|
||||
return connection.email
|
||||
}
|
||||
|
||||
return "Connected"
|
||||
}
|
||||
const isAnyConnecting =
|
||||
connectingProvider !== null || addConnectionMutation.isPending
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col pt-4 space-y-4">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<p className="text-[16px] font-semibold">Supermemory Connections</p>
|
||||
<span className="bg-[#4BA0FA] text-black text-[12px] font-bold px-1 py-[3px] rounded-[3px]">
|
||||
PRO
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Connector section - conditional layout based on hasConnections */}
|
||||
{hasConnections ? (
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{Object.entries(CONNECTORS).map(([provider, config]) => {
|
||||
const Icon = config.icon
|
||||
const isConnecting =
|
||||
connectingProvider === provider ||
|
||||
(addConnectionMutation.isPending &&
|
||||
addConnectionMutation.variables?.provider === provider)
|
||||
|
||||
if (provider === "google-drive") {
|
||||
return (
|
||||
<div
|
||||
key={provider}
|
||||
className="bg-[#14161A] border border-[rgba(82,89,102,0.2)] rounded-[12px] flex overflow-hidden"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleConnect("google-drive")}
|
||||
disabled={
|
||||
!isProUser ||
|
||||
isConnecting ||
|
||||
addConnectionMutation.isPending
|
||||
}
|
||||
className="flex-1 py-3 flex items-center justify-center gap-2 hover:bg-[#1B1F24] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Icon className="w-6 h-6 text-[#737373]" />
|
||||
<p className="text-[14px] font-medium">{config.title}</p>
|
||||
{isConnecting && (
|
||||
<Loader className="h-4 w-4 animate-spin text-[#4BA0FA]" />
|
||||
)}
|
||||
</button>
|
||||
<div className="w-px bg-[rgba(82,89,102,0.4)] self-stretch my-2" />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="w-8 flex items-center justify-center hover:bg-[#1B1F24] transition-colors"
|
||||
>
|
||||
<ChevronDown className="w-3 h-3 text-[#737373]" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-40">
|
||||
{(
|
||||
Object.entries(GDRIVE_SCOPE_LABELS) as [
|
||||
GDriveSyncScope,
|
||||
string,
|
||||
][]
|
||||
).map(([scope, label]) => (
|
||||
<DropdownMenuItem
|
||||
key={scope}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setGdriveSyncScope(scope)
|
||||
}}
|
||||
className="flex items-center justify-between"
|
||||
>
|
||||
{label}
|
||||
{gdriveSyncScope === scope && (
|
||||
<Check className="w-3 h-3 text-[#4BA0FA]" />
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={provider}
|
||||
type="button"
|
||||
onClick={() => handleConnect(provider as ConnectorProvider)}
|
||||
disabled={
|
||||
!isProUser || isConnecting || addConnectionMutation.isPending
|
||||
}
|
||||
className="bg-[#14161A] border border-[rgba(82,89,102,0.2)] rounded-[12px] px-4 py-3 flex items-center justify-center gap-2 hover:bg-[#1B1F24] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Icon className="w-6 h-6 text-[#737373]" />
|
||||
<p className="text-[14px] font-medium text-center">
|
||||
{config.title}
|
||||
</p>
|
||||
{isConnecting && (
|
||||
<Loader className="h-4 w-4 animate-spin text-[#4BA0FA]" />
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
{/* Top header — only when empty; once connected, the Add CTA moves into the list header below */}
|
||||
{!hasConnections && (
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<p className="text-[16px] font-semibold">Add a connection</p>
|
||||
<span className="bg-[#4BA0FA] text-black text-[12px] font-bold px-1 py-[3px] rounded-[3px]">
|
||||
PRO
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
)}
|
||||
|
||||
{/* Provider rows — only on empty state. Each is a labelled, descriptive CTA. */}
|
||||
{!hasConnections && (
|
||||
<div className="space-y-3">
|
||||
{Object.entries(CONNECTORS).map(([provider, config]) => {
|
||||
const Icon = config.icon
|
||||
const connection = connections.find(
|
||||
(conn) => conn.provider === provider,
|
||||
)
|
||||
const isConnected = !!connection
|
||||
const isConnecting =
|
||||
connectingProvider === provider ||
|
||||
(addConnectionMutation.isPending &&
|
||||
|
|
@ -346,33 +411,14 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) {
|
|||
<div className="flex items-center gap-3 flex-1">
|
||||
<Icon className="w-6 h-6 text-[#737373]" />
|
||||
<div className="space-y-[6px] flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-[16px] font-medium">{config.title}</p>
|
||||
{isConnected && (
|
||||
<span className="text-[12px] text-[#4BA0FA] font-medium">
|
||||
{connection.metadata?.syncInProgress
|
||||
? "Syncing..."
|
||||
: "Connected"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[16px] font-medium">{config.title}</p>
|
||||
<p className="text-[16px] text-[#737373]">
|
||||
{config.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{isConnected ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDisconnect(connection)}
|
||||
disabled={deleteConnectionMutation.isPending}
|
||||
className="text-[#737373] hover:text-white hover:bg-[#1B1F24] h-8 w-8 p-0"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
) : provider === "google-drive" ? (
|
||||
{provider === "google-drive" ? (
|
||||
<div className="flex items-center rounded-md overflow-hidden">
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -450,56 +496,150 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Connected list panel - only when hasConnections */}
|
||||
{/* Connected list - rich rows with status / project / last sync / doc count */}
|
||||
{hasConnections && (
|
||||
<div className="bg-[#14161A] border border-[rgba(82,89,102,0.2)] rounded-[12px] shadow-inside-out px-4 py-4 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[16px] font-semibold">
|
||||
Connected to Supermemory
|
||||
</p>
|
||||
{connectionsLimit > 0 && (
|
||||
<p className="text-[12px] text-[#737373]">
|
||||
{connections.length}/{connectionsLimit} connections used
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{connections.map((connection) => {
|
||||
const config =
|
||||
CONNECTORS[connection.provider as ConnectorProvider]
|
||||
if (!config) return null
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between gap-3 px-1">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-[16px] font-semibold">
|
||||
Connected to Supermemory
|
||||
</p>
|
||||
<span className="bg-[#4BA0FA] text-black text-[10px] font-bold px-1 py-[2px] rounded-[3px]">
|
||||
PRO
|
||||
</span>
|
||||
</div>
|
||||
{connectionsLimit > 0 && (
|
||||
<p className="text-[12px] text-[#737373]">
|
||||
{connections.length}/{connectionsLimit} connections used
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
const Icon = config.icon
|
||||
const subtext = getConnectionSubtext(connection)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={connection.id}
|
||||
className="flex items-center justify-between gap-3"
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!isProUser || isAnyConnecting}
|
||||
className="flex items-center gap-1.5 bg-[#4BA0FA] text-black hover:bg-[#4BA0FA]/90 disabled:opacity-50 disabled:cursor-not-allowed text-[13px] font-medium rounded-full h-8 px-3 transition-colors shrink-0"
|
||||
>
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
<Icon className="w-6 h-6 text-[#737373]" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-[16px] font-medium truncate">
|
||||
{config.title}
|
||||
</p>
|
||||
<p className="text-[14px] text-[#737373] truncate">
|
||||
{subtext}
|
||||
</p>
|
||||
</div>
|
||||
{isAnyConnecting ? (
|
||||
<Loader className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<span>+ Add a connection</span>
|
||||
<ChevronDown className="size-3" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className={cn(
|
||||
"min-w-[260px] p-1.5 rounded-xl border border-[#2E3033] shadow-[0px_1.5px_20px_0px_rgba(0,0,0,0.65)]",
|
||||
dmSansClassName(),
|
||||
)}
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(180deg, #0A0E14 0%, #05070A 100%)",
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="px-3 py-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-[#737373] font-medium">
|
||||
Choose a service
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setConnectingProvider("google-drive")
|
||||
addConnectionMutation.mutate({
|
||||
provider: "google-drive",
|
||||
syncScope: "scoped",
|
||||
})
|
||||
}}
|
||||
className="flex items-start gap-2.5 px-3 py-2.5 rounded-md cursor-pointer text-white opacity-60 hover:opacity-100 hover:bg-[#293952]/40 focus:bg-[#293952]/40 focus:opacity-100"
|
||||
>
|
||||
<GoogleDrive className="size-5 mt-0.5 shrink-0" />
|
||||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<span className="text-[14px] font-medium text-[#FAFAFA] leading-tight">
|
||||
Google Drive
|
||||
</span>
|
||||
<span className="text-[11px] text-[#737373] leading-tight">
|
||||
Pick specific files & folders
|
||||
</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setConnectingProvider("google-drive")
|
||||
addConnectionMutation.mutate({
|
||||
provider: "google-drive",
|
||||
syncScope: "full",
|
||||
})
|
||||
}}
|
||||
className="flex items-start gap-2.5 px-3 py-2.5 rounded-md cursor-pointer text-white opacity-60 hover:opacity-100 hover:bg-[#293952]/40 focus:bg-[#293952]/40 focus:opacity-100"
|
||||
>
|
||||
<GoogleDrive className="size-5 mt-0.5 shrink-0" />
|
||||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<span className="text-[14px] font-medium text-[#FAFAFA] leading-tight">
|
||||
Google Drive
|
||||
</span>
|
||||
<span className="text-[11px] text-[#737373] leading-tight">
|
||||
Sync entire drive
|
||||
</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setConnectingProvider("notion")
|
||||
addConnectionMutation.mutate({ provider: "notion" })
|
||||
}}
|
||||
className="flex items-start gap-2.5 px-3 py-2.5 rounded-md cursor-pointer text-white opacity-60 hover:opacity-100 hover:bg-[#293952]/40 focus:bg-[#293952]/40 focus:opacity-100"
|
||||
>
|
||||
<Notion className="size-5 mt-0.5 shrink-0" />
|
||||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<span className="text-[14px] font-medium text-[#FAFAFA] leading-tight">
|
||||
Notion
|
||||
</span>
|
||||
<span className="text-[11px] text-[#737373] leading-tight">
|
||||
Pages and databases
|
||||
</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setConnectingProvider("onedrive")
|
||||
addConnectionMutation.mutate({ provider: "onedrive" })
|
||||
}}
|
||||
className="flex items-start gap-2.5 px-3 py-2.5 rounded-md cursor-pointer text-white opacity-60 hover:opacity-100 hover:bg-[#293952]/40 focus:bg-[#293952]/40 focus:opacity-100"
|
||||
>
|
||||
<OneDrive className="size-5 mt-0.5 shrink-0" />
|
||||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<span className="text-[14px] font-medium text-[#FAFAFA] leading-tight">
|
||||
OneDrive
|
||||
</span>
|
||||
<span className="text-[11px] text-[#737373] leading-tight">
|
||||
Office documents
|
||||
</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDisconnect(connection)}
|
||||
disabled={deleteConnectionMutation.isPending}
|
||||
className="text-[#737373] hover:text-white hover:bg-[#1B1F24] h-8 w-8 p-0 shrink-0"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
{connections.map((connection) => (
|
||||
<ConnectionRow
|
||||
key={connection.id}
|
||||
connection={connection}
|
||||
projects={projects}
|
||||
onDelete={() => setRemoveDialog({ open: true, connection })}
|
||||
isDeleting={deleteConnectionMutation.isPending}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -568,6 +708,7 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) {
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<RemoveConnectionDialog
|
||||
open={removeDialog.open}
|
||||
onOpenChange={(open) => {
|
||||
|
|
|
|||
|
|
@ -389,10 +389,14 @@ function MemoryOfDayCard({ data }: { data: MemoryOfDay }) {
|
|||
|
||||
if (!memory) return null
|
||||
|
||||
const href = data.sourceDocumentId
|
||||
? `/?view=list&doc=${encodeURIComponent(data.sourceDocumentId)}`
|
||||
: "/?view=list"
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push("/?view=list")}
|
||||
onClick={() => router.push(href)}
|
||||
className={cn(
|
||||
"group w-full h-full text-left bg-[#0B1017] border border-[rgba(255,255,255,0.05)] rounded-[18px] p-3 flex flex-col justify-between hover:border-[rgba(255,255,255,0.10)] transition-colors cursor-pointer",
|
||||
dmSansClassName(),
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@ import { analytics } from "@/lib/analytics"
|
|||
import Image from "next/image"
|
||||
import { IntegrationGridCard } from "@/components/integrations/integration-grid-card"
|
||||
import { useViewMode } from "@/lib/view-mode-context"
|
||||
import type { ViewParamValue } from "@/lib/search-params"
|
||||
import { addDocumentParam, type ViewParamValue } from "@/lib/search-params"
|
||||
import { useQueryState } from "nuqs"
|
||||
|
||||
type Connection = z.infer<typeof ConnectionResponseSchema>
|
||||
|
||||
|
|
@ -166,6 +167,7 @@ const CARD_GROUPS: Array<{ label: string; ids: CardId[] }> = [
|
|||
|
||||
export function IntegrationsView() {
|
||||
const { setViewMode } = useViewMode()
|
||||
const [, setAddDoc] = useQueryState("add", addDocumentParam)
|
||||
const { org } = useAuth()
|
||||
const autumn = useCustomer()
|
||||
const hasProProduct = hasActivePlan(autumn.customer?.products, "api_pro")
|
||||
|
|
@ -290,6 +292,8 @@ export function IntegrationsView() {
|
|||
analytics.onboardingChromeExtensionClicked({
|
||||
source: "integrations",
|
||||
})
|
||||
} else if (card.id === "connections") {
|
||||
void setAddDoc("connect")
|
||||
} else {
|
||||
void setViewMode(card.id as ViewParamValue)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,442 +0,0 @@
|
|||
"use client"
|
||||
|
||||
import { dmSans125ClassName } from "@/lib/fonts"
|
||||
import { cn } from "@lib/utils"
|
||||
import { $fetch } from "@lib/api"
|
||||
import { hasActivePlan } from "@lib/queries"
|
||||
import { GoogleDrive, Notion, OneDrive } from "@ui/assets/icons"
|
||||
import { useCustomer } from "autumn-js/react"
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { Check, Clock, FolderOpen, Plus, Trash2, Zap } from "lucide-react"
|
||||
import { useEffect, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
import { useQueryState } from "nuqs"
|
||||
import type { ConnectionResponseSchema } from "@repo/validation/api"
|
||||
import type { z } from "zod"
|
||||
import { analytics } from "@/lib/analytics"
|
||||
import { AddDocumentModal } from "@/components/add-document"
|
||||
import { RemoveConnectionDialog } from "@/components/remove-connection-dialog"
|
||||
import { addDocumentParam } from "@/lib/search-params"
|
||||
import { DEFAULT_PROJECT_ID } from "@lib/constants"
|
||||
import type { Project } from "@lib/types"
|
||||
|
||||
type Connection = z.infer<typeof ConnectionResponseSchema>
|
||||
|
||||
const CONNECTORS = {
|
||||
"google-drive": {
|
||||
title: "Google Drive",
|
||||
icon: GoogleDrive,
|
||||
documentLabel: "documents",
|
||||
},
|
||||
notion: { title: "Notion", icon: Notion, documentLabel: "pages" },
|
||||
onedrive: { title: "OneDrive", icon: OneDrive, documentLabel: "documents" },
|
||||
} as const
|
||||
|
||||
type ConnectorProvider = keyof typeof CONNECTORS
|
||||
|
||||
function ConnectionRow({
|
||||
connection,
|
||||
onDelete,
|
||||
isDeleting,
|
||||
disabled,
|
||||
projects,
|
||||
}: {
|
||||
connection: Connection
|
||||
onDelete: () => void
|
||||
isDeleting: boolean
|
||||
disabled?: boolean
|
||||
projects: Project[]
|
||||
}) {
|
||||
const config = CONNECTORS[connection.provider as ConnectorProvider]
|
||||
if (!config) return null
|
||||
|
||||
const Icon = config.icon
|
||||
const isConnected =
|
||||
!connection.expiresAt || new Date(connection.expiresAt) > new Date()
|
||||
|
||||
const formatRelativeTime = (date: string | null | undefined) => {
|
||||
if (!date) return "Never"
|
||||
const d = new Date(date)
|
||||
const diffMs = Date.now() - d.getTime()
|
||||
const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
|
||||
const diffDays = Math.floor(diffHours / 24)
|
||||
if (diffHours < 1) return "Just now"
|
||||
if (diffHours < 24) return `${diffHours}h ago`
|
||||
if (diffDays === 1) return "Yesterday"
|
||||
if (diffDays < 7) return `${diffDays} days ago`
|
||||
return d.toLocaleDateString()
|
||||
}
|
||||
|
||||
const getProjectName = (tag: string): string => {
|
||||
if (tag === DEFAULT_PROJECT_ID) return "Default"
|
||||
return (
|
||||
projects.find((p) => p.containerTag === tag)?.name ??
|
||||
tag.replace(/^sm_project_/, "").replace(/_/g, " ")
|
||||
)
|
||||
}
|
||||
|
||||
const documentCount = (connection.metadata?.documentCount as number) ?? 0
|
||||
const containerTags = (
|
||||
connection as Connection & { containerTags?: string[] }
|
||||
).containerTags
|
||||
const projectName = containerTags?.[0]
|
||||
? getProjectName(containerTags[0])
|
||||
: null
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"bg-[#14161A] border border-[rgba(82,89,102,0.2)] rounded-[12px] px-4 py-3",
|
||||
"shadow-[0px_1px_2px_0px_rgba(0,43,87,0.1)]",
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-4">
|
||||
<Icon className="size-6 shrink-0" />
|
||||
<div className="flex-1 flex flex-col gap-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"font-medium text-[16px] text-[#FAFAFA]",
|
||||
)}
|
||||
>
|
||||
{config.title}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"size-[7px] rounded-full",
|
||||
isConnected ? "bg-[#00AC3F]" : "bg-[#737373]",
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"text-[14px]",
|
||||
isConnected ? "text-[#00AC3F]" : "text-[#737373]",
|
||||
)}
|
||||
>
|
||||
{isConnected ? "Connected" : "Disconnected"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={cn(dmSans125ClassName(), "text-[14px] text-[#737373]")}
|
||||
>
|
||||
{connection.email || "Unknown"}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDelete}
|
||||
disabled={isDeleting || disabled}
|
||||
className="text-[#737373] hover:text-red-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Trash2 className="size-[22px]" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 pt-2.5 border-t border-[rgba(82,89,102,0.12)]">
|
||||
<div className="flex items-center gap-2 flex-1 flex-wrap">
|
||||
{projectName && (
|
||||
<div className="flex items-center gap-1">
|
||||
<FolderOpen className="size-3 text-[#4B5563]" />
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"text-[12px] text-[#737373] capitalize",
|
||||
)}
|
||||
>
|
||||
{projectName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="size-3 text-[#4B5563]" />
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"text-[12px] text-[#737373]",
|
||||
)}
|
||||
>
|
||||
{formatRelativeTime(connection.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-1 shrink-0">
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"text-[14px] font-semibold text-[#FAFAFA]",
|
||||
)}
|
||||
>
|
||||
{documentCount}
|
||||
</span>
|
||||
<span
|
||||
className={cn(dmSans125ClassName(), "text-[12px] text-[#737373]")}
|
||||
>
|
||||
{config.documentLabel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function ConnectionsDetail() {
|
||||
const queryClient = useQueryClient()
|
||||
const autumn = useCustomer()
|
||||
const [isAddDocumentOpen, setIsAddDocumentOpen] = useState(false)
|
||||
const [removeDialog, setRemoveDialog] = useState<{
|
||||
open: boolean
|
||||
connection: Connection | null
|
||||
}>({ open: false, connection: null })
|
||||
const [, setAddDoc] = useQueryState("add", addDocumentParam)
|
||||
|
||||
const projects = (queryClient.getQueryData<Project[]>(["projects"]) ||
|
||||
[]) as Project[]
|
||||
|
||||
const hasProProduct = hasActivePlan(autumn.customer?.products, "api_pro")
|
||||
|
||||
const connectionsFeature = autumn.customer?.features?.connections
|
||||
const connectionsUsed = connectionsFeature?.usage ?? 0
|
||||
const connectionsLimit = connectionsFeature?.included_usage ?? 10
|
||||
const canAddConnection = connectionsUsed < connectionsLimit
|
||||
|
||||
const {
|
||||
data: connections = [],
|
||||
isLoading: isLoadingConnections,
|
||||
error: connectionsError,
|
||||
} = useQuery({
|
||||
queryKey: ["connections"],
|
||||
queryFn: async () => {
|
||||
const response = await $fetch("@post/connections/list", {
|
||||
body: { containerTags: [] },
|
||||
})
|
||||
if (response.error)
|
||||
throw new Error(response.error?.message || "Failed to load connections")
|
||||
return response.data as Connection[]
|
||||
},
|
||||
staleTime: 30 * 1000,
|
||||
refetchInterval: 60 * 1000,
|
||||
enabled: hasProProduct,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (connectionsError) {
|
||||
toast.error("Failed to load connections", {
|
||||
description:
|
||||
connectionsError instanceof Error
|
||||
? connectionsError.message
|
||||
: "Unknown error",
|
||||
})
|
||||
}
|
||||
}, [connectionsError])
|
||||
|
||||
const deleteConnectionMutation = useMutation({
|
||||
mutationFn: async ({
|
||||
connectionId,
|
||||
deleteDocuments,
|
||||
}: {
|
||||
connectionId: string
|
||||
deleteDocuments: boolean
|
||||
}) => {
|
||||
await $fetch(`@delete/connections/${connectionId}`, {
|
||||
query: { deleteDocuments },
|
||||
})
|
||||
return { deleteDocuments }
|
||||
},
|
||||
onSuccess: (_data, variables) => {
|
||||
analytics.connectionDeleted()
|
||||
toast.success(
|
||||
variables.deleteDocuments
|
||||
? "Connection removal has started. Documents will be permanently deleted in the next few minutes."
|
||||
: "Connection removed. Your memories have been kept.",
|
||||
)
|
||||
setRemoveDialog({ open: false, connection: null })
|
||||
queryClient.invalidateQueries({ queryKey: ["connections"] })
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error("Failed to remove connection", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
const handleUpgrade = async () => {
|
||||
try {
|
||||
await autumn.attach({
|
||||
productId: "api_pro",
|
||||
successUrl: "https://app.supermemory.ai/?view=integrations",
|
||||
})
|
||||
window.location.reload()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
const isLoading = autumn.isLoading
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"bg-[#14161A] rounded-[14px] p-6 relative overflow-hidden",
|
||||
"shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]",
|
||||
)}
|
||||
>
|
||||
{!hasProProduct && !isLoading && (
|
||||
<>
|
||||
<div className="absolute inset-0 bg-[#14161A]/80 backdrop-blur-sm z-5" />
|
||||
<div className="absolute inset-0 flex items-center justify-center z-10">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<Zap className="size-6 text-[#737373]" />
|
||||
<p
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"text-[14px] text-[#737373] text-center max-w-[220px]",
|
||||
)}
|
||||
>
|
||||
Connect Google Drive, Notion, and OneDrive to import your
|
||||
knowledge
|
||||
</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
{[
|
||||
"Unlimited memories",
|
||||
"10 connections",
|
||||
"Advanced search",
|
||||
"Priority support",
|
||||
].map((text) => (
|
||||
<div key={text} className="flex items-center gap-2">
|
||||
<Check className="size-4 shrink-0 text-[#4BA0FA]" />
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"text-[14px] text-white",
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleUpgrade}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2",
|
||||
"bg-[#4BA0FA] hover:bg-[#4BA0FA]/90 text-white",
|
||||
"rounded-full h-10 px-6 font-medium text-sm transition-colors cursor-pointer",
|
||||
dmSans125ClassName(),
|
||||
)}
|
||||
>
|
||||
Upgrade to Pro
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col gap-4",
|
||||
!hasProProduct && !isLoading && "opacity-30 pointer-events-none",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"font-semibold text-[16px] text-[#FAFAFA]",
|
||||
)}
|
||||
>
|
||||
Connected to Supermemory
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
dmSans125ClassName(),
|
||||
"font-semibold text-[16px] text-[#737373]",
|
||||
)}
|
||||
>
|
||||
{connections.length}/{connectionsLimit} connections used
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isLoadingConnections ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="size-6 border-2 border-[#737373] border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
) : connections.length > 0 ? (
|
||||
connections.map((connection) => (
|
||||
<ConnectionRow
|
||||
key={connection.id}
|
||||
connection={connection}
|
||||
onDelete={() => setRemoveDialog({ open: true, connection })}
|
||||
isDeleting={deleteConnectionMutation.isPending}
|
||||
disabled={!hasProProduct}
|
||||
projects={projects}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<Zap className="size-6 text-[#737373] mb-2" />
|
||||
<p
|
||||
className={cn(dmSans125ClassName(), "text-[14px] text-[#737373]")}
|
||||
>
|
||||
No connections yet
|
||||
</p>
|
||||
<p
|
||||
className={cn(dmSans125ClassName(), "text-[12px] text-[#737373]")}
|
||||
>
|
||||
Connect a service below to import your knowledge
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AddDocumentModal
|
||||
isOpen={isAddDocumentOpen}
|
||||
onClose={() => setIsAddDocumentOpen(false)}
|
||||
/>
|
||||
|
||||
<RemoveConnectionDialog
|
||||
open={removeDialog.open}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setRemoveDialog({ open: false, connection: null })
|
||||
}}
|
||||
provider={removeDialog.connection?.provider}
|
||||
documentCount={
|
||||
(removeDialog.connection?.metadata?.documentCount as number) ?? 0
|
||||
}
|
||||
onConfirm={(deleteDocuments) => {
|
||||
if (removeDialog.connection) {
|
||||
deleteConnectionMutation.mutate({
|
||||
connectionId: removeDialog.connection.id,
|
||||
deleteDocuments,
|
||||
})
|
||||
}
|
||||
}}
|
||||
isDeleting={deleteConnectionMutation.isPending}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAddDoc("connect")}
|
||||
disabled={!hasProProduct || !canAddConnection}
|
||||
className={cn(
|
||||
"relative flex items-center justify-center gap-2",
|
||||
"bg-[#0D121A] rounded-full h-11 px-4 w-full",
|
||||
"cursor-pointer transition-opacity hover:opacity-80",
|
||||
"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.7)]",
|
||||
"disabled:opacity-50 disabled:cursor-not-allowed",
|
||||
dmSans125ClassName(),
|
||||
)}
|
||||
>
|
||||
<Plus className="size-[10px] text-[#FAFAFA]" />
|
||||
<span className="text-[14px] text-[#FAFAFA] font-medium">
|
||||
Connect knowledge bases
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import { cn } from "@lib/utils"
|
|||
import { dmSans125ClassName, dmSansClassName } from "@/lib/fonts"
|
||||
import { Loader2, XIcon } from "lucide-react"
|
||||
import { Button } from "@ui/components/button"
|
||||
import { Checkbox } from "@ui/components/checkbox"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import {
|
||||
Dialog,
|
||||
|
|
@ -42,12 +43,15 @@ export function RemoveConnectionDialog({
|
|||
onConfirm,
|
||||
isDeleting,
|
||||
}: RemoveConnectionDialogProps) {
|
||||
const [action, setAction] = useState<"keep" | "delete">("keep")
|
||||
const [alsoDelete, setAlsoDelete] = useState(false)
|
||||
const displayName =
|
||||
providerName || (provider ? PROVIDER_LABELS[provider] : "this connection")
|
||||
|
||||
const memoryNoun = documentCount === 1 ? "memory" : "memories"
|
||||
const hasMemories = documentCount > 0
|
||||
|
||||
const handleConfirm = () => {
|
||||
onConfirm(action === "delete")
|
||||
onConfirm(alsoDelete)
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -56,13 +60,13 @@ export function RemoveConnectionDialog({
|
|||
onOpenChange={(o) => {
|
||||
if (!isDeleting) {
|
||||
onOpenChange(o)
|
||||
if (!o) setAction("keep")
|
||||
if (!o) setAlsoDelete(false)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
className={cn(
|
||||
"w-[90%]! max-w-[500px]! border-none bg-[#1B1F24] flex flex-col p-4 gap-4 rounded-[22px]",
|
||||
"w-[90%]! max-w-[480px]! border-none bg-[#1B1F24] flex flex-col p-5 gap-4 rounded-[22px]",
|
||||
dmSansClassName(),
|
||||
)}
|
||||
style={{
|
||||
|
|
@ -71,35 +75,16 @@ export function RemoveConnectionDialog({
|
|||
}}
|
||||
showCloseButton={false}
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<div className="pl-1 space-y-1 flex-1">
|
||||
<DialogTitle
|
||||
className={cn(
|
||||
"font-semibold text-[#fafafa]",
|
||||
dmSans125ClassName(),
|
||||
)}
|
||||
>
|
||||
Remove connection
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-[#737373] font-medium text-[16px] leading-[1.35]">
|
||||
What would you like to do with the{" "}
|
||||
{documentCount > 0 ? (
|
||||
<>
|
||||
<span className="text-[#fafafa] font-medium">
|
||||
{documentCount}
|
||||
</span>{" "}
|
||||
memories from{" "}
|
||||
</>
|
||||
) : (
|
||||
<>memories from </>
|
||||
)}
|
||||
<span className="text-[#fafafa] font-medium">
|
||||
{displayName}
|
||||
</span>
|
||||
?
|
||||
</DialogDescription>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex justify-between items-center gap-4">
|
||||
<DialogTitle
|
||||
className={cn(
|
||||
"font-semibold text-[#fafafa] flex-1",
|
||||
dmSans125ClassName(),
|
||||
)}
|
||||
>
|
||||
Disconnect {displayName}?
|
||||
</DialogTitle>
|
||||
<DialogPrimitive.Close
|
||||
disabled={isDeleting}
|
||||
className="bg-[#0D121A] w-7 h-7 flex items-center justify-center focus:ring-ring rounded-full transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 border border-[rgba(115,115,115,0.2)] shrink-0"
|
||||
|
|
@ -112,79 +97,37 @@ export function RemoveConnectionDialog({
|
|||
</DialogPrimitive.Close>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAction("keep")}
|
||||
className={cn(
|
||||
"flex items-center gap-3 p-3 rounded-[12px] cursor-pointer transition-colors w-full text-left",
|
||||
action === "keep"
|
||||
? "bg-[#14161A] border border-[rgba(82,89,102,0.3)]"
|
||||
: "bg-[#14161A]/50 border border-transparent hover:border-[rgba(82,89,102,0.2)]",
|
||||
)}
|
||||
style={{
|
||||
boxShadow:
|
||||
action === "keep"
|
||||
? "0px 1px 2px 0px rgba(0,43,87,0.1), inset 0px 0px 0px 1px rgba(43,49,67,0.08), inset 0px 1px 1px 0px rgba(0,0,0,0.08)"
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"w-4 h-4 rounded-full border-2 flex items-center justify-center shrink-0",
|
||||
action === "keep" ? "border-blue-500" : "border-[#737373]",
|
||||
)}
|
||||
>
|
||||
{action === "keep" && (
|
||||
<div className="w-2 h-2 rounded-full bg-blue-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[#fafafa] text-sm font-medium">
|
||||
Remove connection only
|
||||
</span>
|
||||
<span className="text-[#737373] text-xs">
|
||||
Disconnect the integration but keep all imported memories
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<DialogDescription className="text-[#737373] text-[14px] leading-[1.45]">
|
||||
{hasMemories ? (
|
||||
<>
|
||||
Sync stops. Your{" "}
|
||||
<span className="text-[#fafafa] font-medium">
|
||||
{documentCount} {memoryNoun}
|
||||
</span>{" "}
|
||||
stay in Supermemory.
|
||||
</>
|
||||
) : (
|
||||
<>Sync stops. No memories were imported from this connection.</>
|
||||
)}
|
||||
</DialogDescription>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAction("delete")}
|
||||
className={cn(
|
||||
"flex items-center gap-3 p-3 rounded-[12px] cursor-pointer transition-colors w-full text-left",
|
||||
action === "delete"
|
||||
? "bg-[#14161A] border border-[rgba(220,38,38,0.3)]"
|
||||
: "bg-[#14161A]/50 border border-transparent hover:border-[rgba(82,89,102,0.2)]",
|
||||
)}
|
||||
style={{
|
||||
boxShadow:
|
||||
action === "delete"
|
||||
? "0px 1px 2px 0px rgba(87,0,0,0.1), inset 0px 0px 0px 1px rgba(67,43,43,0.08), inset 0px 1px 1px 0px rgba(0,0,0,0.08)"
|
||||
: "none",
|
||||
}}
|
||||
{hasMemories && (
|
||||
<label
|
||||
htmlFor="also-delete-memories"
|
||||
className="flex items-center gap-2.5 cursor-pointer text-[13px] py-1 select-none"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"w-4 h-4 rounded-full border-2 flex items-center justify-center shrink-0",
|
||||
action === "delete" ? "border-red-500" : "border-[#737373]",
|
||||
)}
|
||||
>
|
||||
{action === "delete" && (
|
||||
<div className="w-2 h-2 rounded-full bg-red-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[#fafafa] text-sm font-medium">
|
||||
Remove connection and memories
|
||||
</span>
|
||||
<span className="text-[#737373] text-xs">
|
||||
Permanently delete all memories imported from this connection
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<Checkbox
|
||||
id="also-delete-memories"
|
||||
checked={alsoDelete}
|
||||
onCheckedChange={(checked) => setAlsoDelete(checked === true)}
|
||||
disabled={isDeleting}
|
||||
/>
|
||||
<span className="text-[#B5B8BD]">
|
||||
Also delete the {documentCount} imported {memoryNoun}{" "}
|
||||
<span className="text-[#737373] italic">(optional)</span>
|
||||
</span>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-end gap-2 pt-1">
|
||||
<Button
|
||||
|
|
@ -192,7 +135,7 @@ export function RemoveConnectionDialog({
|
|||
disabled={isDeleting}
|
||||
onClick={() => {
|
||||
onOpenChange(false)
|
||||
setAction("keep")
|
||||
setAlsoDelete(false)
|
||||
}}
|
||||
className="text-[#737373] cursor-pointer rounded-full"
|
||||
>
|
||||
|
|
@ -203,19 +146,18 @@ export function RemoveConnectionDialog({
|
|||
disabled={isDeleting}
|
||||
onClick={handleConfirm}
|
||||
className={cn(
|
||||
action === "delete" &&
|
||||
"bg-red-600! hover:bg-red-700! text-white",
|
||||
alsoDelete && "bg-red-600! hover:bg-red-700! text-white",
|
||||
)}
|
||||
>
|
||||
{isDeleting ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Removing...
|
||||
Disconnecting...
|
||||
</>
|
||||
) : action === "delete" ? (
|
||||
"Remove & delete memories"
|
||||
) : alsoDelete ? (
|
||||
`Disconnect and delete ${memoryNoun}`
|
||||
) : (
|
||||
"Remove connection"
|
||||
"Disconnect"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue