mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-09-11 22:51:05 +00:00
updated integration page
This commit is contained in:
Mahesh Sanikommmu
parent
ee4e6192ac
commit
1f8ae3f192
3 changed files with 161 additions and 169 deletions
|
|
@ -22,22 +22,24 @@ export function BillingView() {
|
|||
analytics.billingViewed()
|
||||
}, [])
|
||||
|
||||
const { data: memoriesCheck } = fetchMemoriesFeature(autumn as any)
|
||||
|
||||
const memoriesUsed = memoriesCheck?.usage ?? 0
|
||||
const memoriesLimit = memoriesCheck?.included_usage ?? 0
|
||||
|
||||
const { data: connectionsCheck } = fetchConnectionsFeature(autumn as any)
|
||||
|
||||
const connectionsUsed = connectionsCheck?.usage ?? 0
|
||||
|
||||
// Fetch subscription status with React Query
|
||||
const {
|
||||
data: status = {
|
||||
consumer_pro: null,
|
||||
},
|
||||
isLoading: isCheckingStatus,
|
||||
} = fetchSubscriptionStatus(autumn as any)
|
||||
} = fetchSubscriptionStatus(autumn, !autumn.isLoading)
|
||||
|
||||
const { data: memoriesCheck } = fetchMemoriesFeature(
|
||||
autumn,
|
||||
!autumn.isLoading && !isCheckingStatus,
|
||||
)
|
||||
|
||||
const memoriesUsed = memoriesCheck?.usage ?? 0
|
||||
const memoriesLimit = memoriesCheck?.included_usage ?? 0
|
||||
|
||||
const { data: connectionsCheck } = fetchConnectionsFeature(autumn)
|
||||
|
||||
const connectionsUsed = connectionsCheck?.usage ?? 0
|
||||
|
||||
// Handle upgrade
|
||||
const handleUpgrade = async () => {
|
||||
|
|
@ -233,23 +235,20 @@ export function BillingView() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
|
||||
<Button
|
||||
className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white border-0 w-full"
|
||||
disabled={isLoading || isCheckingStatus}
|
||||
onClick={handleUpgrade}
|
||||
size="sm"
|
||||
>
|
||||
{isLoading || isCheckingStatus ? (
|
||||
<>
|
||||
<LoaderIcon className="h-4 w-4 animate-spin mr-2" />
|
||||
Upgrading...
|
||||
</>
|
||||
) : (
|
||||
<div>Upgrade to Pro - $15/month (only for first 100 users)</div>
|
||||
)}
|
||||
</Button>
|
||||
</motion.div>
|
||||
<Button
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white border-0 w-full"
|
||||
disabled={isLoading || isCheckingStatus}
|
||||
onClick={handleUpgrade}
|
||||
>
|
||||
{isLoading || isCheckingStatus ? (
|
||||
<>
|
||||
<LoaderIcon className="h-4 w-4 animate-spin mr-2" />
|
||||
Upgrading...
|
||||
</>
|
||||
) : (
|
||||
<div>Upgrade to Pro - $15/month (only for first 100 users)</div>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
Cancel anytime. No questions asked.
|
||||
|
|
|
|||
|
|
@ -1,38 +1,39 @@
|
|||
import { $fetch } from "@lib/api";
|
||||
import { authClient } from "@lib/auth";
|
||||
import { useAuth } from "@lib/auth-context";
|
||||
import { generateId } from "@lib/generate-id";
|
||||
import { $fetch } from "@lib/api"
|
||||
import { authClient } from "@lib/auth"
|
||||
import { useAuth } from "@lib/auth-context"
|
||||
import { generateId } from "@lib/generate-id"
|
||||
import {
|
||||
ADD_MEMORY_SHORTCUT_URL,
|
||||
SEARCH_MEMORY_SHORTCUT_URL,
|
||||
} from "@repo/lib/constants";
|
||||
} from "@repo/lib/constants"
|
||||
import {
|
||||
fetchConnectionsFeature,
|
||||
fetchConsumerProProduct,
|
||||
} from "@repo/lib/queries";
|
||||
import { Button } from "@repo/ui/components/button";
|
||||
} from "@repo/lib/queries"
|
||||
import { Button } from "@repo/ui/components/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
} from "@repo/ui/components/dialog";
|
||||
import { Skeleton } from "@repo/ui/components/skeleton";
|
||||
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, Copy, Smartphone, Trash2 } from "lucide-react";
|
||||
import { motion } from "motion/react";
|
||||
import Image from "next/image";
|
||||
import { useEffect, useId, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import type { z } from "zod";
|
||||
import { analytics } from "@/lib/analytics";
|
||||
import { useProject } from "@/stores";
|
||||
} from "@repo/ui/components/dialog"
|
||||
import { Skeleton } from "@repo/ui/components/skeleton"
|
||||
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, Copy, Smartphone, Trash2 } from "lucide-react"
|
||||
import { motion } from "motion/react"
|
||||
import Image from "next/image"
|
||||
import { useEffect, useId, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
import type { z } from "zod"
|
||||
import { analytics } from "@/lib/analytics"
|
||||
import { useProject } from "@/stores"
|
||||
import { cn } from "@lib/utils"
|
||||
|
||||
type Connection = z.infer<typeof ConnectionResponseSchema>;
|
||||
type Connection = z.infer<typeof ConnectionResponseSchema>
|
||||
|
||||
const CONNECTORS = {
|
||||
"google-drive": {
|
||||
|
|
@ -50,9 +51,9 @@ const CONNECTORS = {
|
|||
description: "Access your Microsoft Office documents",
|
||||
icon: OneDrive,
|
||||
},
|
||||
} as const;
|
||||
} as const
|
||||
|
||||
type ConnectorProvider = keyof typeof CONNECTORS;
|
||||
type ConnectorProvider = keyof typeof CONNECTORS
|
||||
|
||||
const ChromeIcon = ({ className }: { className?: string }) => (
|
||||
<svg
|
||||
|
|
@ -83,41 +84,41 @@ const ChromeIcon = ({ className }: { className?: string }) => (
|
|||
d="M95.252 47.628h82.479A95.237 95.237 0 0 0 142.87 12.76 95.23 95.23 0 0 0 95.245 0a95.222 95.222 0 0 0-47.623 12.767 95.23 95.23 0 0 0-34.856 34.872l41.24 71.43.011.006a47.62 47.62 0 0 1-.015-47.633 47.61 47.61 0 0 1 41.252-23.815z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
)
|
||||
|
||||
export function IntegrationsView() {
|
||||
const { org } = useAuth();
|
||||
const queryClient = useQueryClient();
|
||||
const { selectedProject } = useProject();
|
||||
const autumn = useCustomer();
|
||||
const [showApiKeyModal, setShowApiKeyModal] = useState(false);
|
||||
const [apiKey, setApiKey] = useState<string>("");
|
||||
const [copied, setCopied] = useState(false);
|
||||
const { org } = useAuth()
|
||||
const queryClient = useQueryClient()
|
||||
const { selectedProject } = useProject()
|
||||
const autumn = useCustomer()
|
||||
const [showApiKeyModal, setShowApiKeyModal] = useState(false)
|
||||
const [apiKey, setApiKey] = useState<string>("")
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [selectedShortcutType, setSelectedShortcutType] = useState<
|
||||
"add" | "search" | null
|
||||
>(null);
|
||||
const apiKeyId = useId();
|
||||
>(null)
|
||||
const apiKeyId = useId()
|
||||
|
||||
const handleUpgrade = async () => {
|
||||
try {
|
||||
await autumn.attach({
|
||||
productId: "consumer_pro",
|
||||
successUrl: "https://app.supermemory.ai/",
|
||||
});
|
||||
window.location.reload();
|
||||
})
|
||||
window.location.reload()
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
console.error(error)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const { data: connectionsCheck } = fetchConnectionsFeature(autumn as any);
|
||||
const connectionsUsed = connectionsCheck?.balance ?? 0;
|
||||
const connectionsLimit = connectionsCheck?.included_usage ?? 0;
|
||||
const { data: connectionsCheck } = fetchConnectionsFeature(autumn)
|
||||
const connectionsUsed = connectionsCheck?.balance ?? 0
|
||||
const connectionsLimit = connectionsCheck?.included_usage ?? 0
|
||||
|
||||
const { data: proCheck } = fetchConsumerProProduct(autumn as any);
|
||||
const isProUser = proCheck?.allowed ?? false;
|
||||
const { data: proCheck } = fetchConsumerProProduct(autumn)
|
||||
const isProUser = proCheck?.allowed ?? false
|
||||
|
||||
const canAddConnection = connectionsUsed < connectionsLimit;
|
||||
const canAddConnection = connectionsUsed < connectionsLimit
|
||||
|
||||
const {
|
||||
data: connections = [],
|
||||
|
|
@ -130,19 +131,17 @@ export function IntegrationsView() {
|
|||
body: {
|
||||
containerTags: [],
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
if (response.error) {
|
||||
throw new Error(
|
||||
response.error?.message || "Failed to load connections",
|
||||
);
|
||||
throw new Error(response.error?.message || "Failed to load connections")
|
||||
}
|
||||
|
||||
return response.data as Connection[];
|
||||
return response.data as Connection[]
|
||||
},
|
||||
staleTime: 30 * 1000,
|
||||
refetchInterval: 60 * 1000,
|
||||
});
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (connectionsError) {
|
||||
|
|
@ -151,16 +150,16 @@ export function IntegrationsView() {
|
|||
connectionsError instanceof Error
|
||||
? connectionsError.message
|
||||
: "Unknown error",
|
||||
});
|
||||
})
|
||||
}
|
||||
}, [connectionsError]);
|
||||
}, [connectionsError])
|
||||
|
||||
const addConnectionMutation = useMutation({
|
||||
mutationFn: async (provider: ConnectorProvider) => {
|
||||
if (!canAddConnection && !isProUser) {
|
||||
throw new Error(
|
||||
"Free plan doesn't include connections. Upgrade to Pro for unlimited connections.",
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
const response = await $fetch("@post/connections/:provider", {
|
||||
|
|
@ -169,47 +168,47 @@ export function IntegrationsView() {
|
|||
redirectUrl: window.location.href,
|
||||
containerTags: [selectedProject],
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
// biome-ignore lint/style/noNonNullAssertion: its fine
|
||||
if ("data" in response && !("error" in response.data!)) {
|
||||
return response.data;
|
||||
return response.data
|
||||
}
|
||||
|
||||
throw new Error(response.error?.message || "Failed to connect");
|
||||
throw new Error(response.error?.message || "Failed to connect")
|
||||
},
|
||||
onSuccess: (data, provider) => {
|
||||
analytics.connectionAdded(provider);
|
||||
analytics.connectionAuthStarted();
|
||||
analytics.connectionAdded(provider)
|
||||
analytics.connectionAuthStarted()
|
||||
if (data?.authLink) {
|
||||
window.location.href = data.authLink;
|
||||
window.location.href = data.authLink
|
||||
}
|
||||
},
|
||||
onError: (error, provider) => {
|
||||
analytics.connectionAuthFailed();
|
||||
analytics.connectionAuthFailed()
|
||||
toast.error(`Failed to connect ${provider}`, {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
})
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const deleteConnectionMutation = useMutation({
|
||||
mutationFn: async (connectionId: string) => {
|
||||
await $fetch(`@delete/connections/${connectionId}`);
|
||||
await $fetch(`@delete/connections/${connectionId}`)
|
||||
},
|
||||
onSuccess: () => {
|
||||
analytics.connectionDeleted();
|
||||
analytics.connectionDeleted()
|
||||
toast.success(
|
||||
"Connection removal has started. supermemory will permanently delete all documents related to the connection in the next few minutes.",
|
||||
);
|
||||
queryClient.invalidateQueries({ queryKey: ["connections"] });
|
||||
)
|
||||
queryClient.invalidateQueries({ queryKey: ["connections"] })
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error("Failed to remove connection", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
})
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const createApiKeyMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
|
|
@ -220,72 +219,72 @@ export function IntegrationsView() {
|
|||
},
|
||||
name: `ios-${generateId().slice(0, 8)}`,
|
||||
prefix: `sm_${org?.id}_`,
|
||||
});
|
||||
return res.key;
|
||||
})
|
||||
return res.key
|
||||
},
|
||||
onSuccess: (apiKey) => {
|
||||
setApiKey(apiKey);
|
||||
setShowApiKeyModal(true);
|
||||
setCopied(false);
|
||||
handleCopyApiKey();
|
||||
setApiKey(apiKey)
|
||||
setShowApiKeyModal(true)
|
||||
setCopied(false)
|
||||
handleCopyApiKey()
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error("Failed to create API key", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
})
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const handleShortcutClick = (shortcutType: "add" | "search") => {
|
||||
setSelectedShortcutType(shortcutType);
|
||||
createApiKeyMutation.mutate();
|
||||
};
|
||||
setSelectedShortcutType(shortcutType)
|
||||
createApiKeyMutation.mutate()
|
||||
}
|
||||
|
||||
const handleCopyApiKey = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(apiKey);
|
||||
setCopied(true);
|
||||
toast.success("API key copied to clipboard!");
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
await navigator.clipboard.writeText(apiKey)
|
||||
setCopied(true)
|
||||
toast.success("API key copied to clipboard!")
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
} catch {
|
||||
toast.error("Failed to copy API key");
|
||||
toast.error("Failed to copy API key")
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const handleOpenShortcut = () => {
|
||||
if (!selectedShortcutType) {
|
||||
toast.error("No shortcut type selected");
|
||||
return;
|
||||
toast.error("No shortcut type selected")
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedShortcutType === "add") {
|
||||
window.open(ADD_MEMORY_SHORTCUT_URL, "_blank");
|
||||
window.open(ADD_MEMORY_SHORTCUT_URL, "_blank")
|
||||
} else if (selectedShortcutType === "search") {
|
||||
window.open(SEARCH_MEMORY_SHORTCUT_URL, "_blank");
|
||||
window.open(SEARCH_MEMORY_SHORTCUT_URL, "_blank")
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const handleDialogClose = (open: boolean) => {
|
||||
setShowApiKeyModal(open);
|
||||
setShowApiKeyModal(open)
|
||||
if (!open) {
|
||||
// Reset state when dialog closes
|
||||
setSelectedShortcutType(null);
|
||||
setApiKey("");
|
||||
setCopied(false);
|
||||
setSelectedShortcutType(null)
|
||||
setApiKey("")
|
||||
setCopied(false)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4 sm:space-y-4 custom-scrollbar">
|
||||
<div className="space-y-2 sm:space-y-4 custom-scrollbar">
|
||||
{/* iOS Shortcuts */}
|
||||
<div className="bg-card border border-border rounded-xl overflow-hidden">
|
||||
<div className="p-4 sm:p-5">
|
||||
<div className="flex items-start gap-3 mb-3">
|
||||
<div className="p-2 bg-blue-500/20 rounded-lg flex-shrink-0">
|
||||
<Smartphone className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
||||
<div className="p-2 rounded-lg flex-shrink-0 bg-muted/70">
|
||||
<Smartphone className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-foreground font-semibold text-base mb-1">
|
||||
<h3 className="text-foreground font-semibold text-base">
|
||||
Apple shortcuts
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||||
|
|
@ -296,9 +295,10 @@ export function IntegrationsView() {
|
|||
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1 bg-blue-500/10 hover:bg-blue-500/20 text-blue-600 dark:text-blue-400 border-blue-500/30"
|
||||
className="flex-1 bg-muted/50 border-none"
|
||||
onClick={() => handleShortcutClick("add")}
|
||||
disabled={createApiKeyMutation.isPending}
|
||||
size="lg"
|
||||
>
|
||||
<Image
|
||||
src="/images/ios-shortcuts.png"
|
||||
|
|
@ -312,9 +312,10 @@ export function IntegrationsView() {
|
|||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1 bg-blue-500/10 hover:bg-blue-500/20 text-blue-600 dark:text-blue-400 border-blue-500/30"
|
||||
className="flex-1 bg-muted/50 border-none"
|
||||
onClick={() => handleShortcutClick("search")}
|
||||
disabled={createApiKeyMutation.isPending}
|
||||
size="lg"
|
||||
>
|
||||
<Image
|
||||
src="/images/ios-shortcuts.png"
|
||||
|
|
@ -334,15 +335,15 @@ export function IntegrationsView() {
|
|||
<div className="bg-card border border-border rounded-xl overflow-hidden opacity-75">
|
||||
<div className="p-4 sm:p-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="p-2 bg-orange-500/20 rounded-lg flex-shrink-0">
|
||||
<div className="p-2 rounded-lg flex-shrink-0 bg-muted/70">
|
||||
<ChromeIcon className="h-5 w-5 text-orange-600 dark:text-orange-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-1">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-2">
|
||||
<h3 className="text-foreground font-semibold text-base">
|
||||
Chrome Extension
|
||||
</h3>
|
||||
<div className="px-2 py-1 bg-orange-500/20 text-orange-600 dark:text-orange-400 text-xs rounded-full flex-shrink-0 w-fit">
|
||||
<div className="px-2 py-1 bg-muted/70 text-xs rounded-full flex-shrink-0 w-fit">
|
||||
Coming Soon
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -357,8 +358,8 @@ export function IntegrationsView() {
|
|||
{/* Connections Section */}
|
||||
<div className="bg-card border border-border rounded-xl overflow-hidden">
|
||||
<div className="p-4 sm:p-5">
|
||||
<div className="flex items-start gap-3 mb-3">
|
||||
<div className="p-2 bg-green-500/20 rounded-lg flex-shrink-0">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="p-2 rounded-lg flex-shrink-0 bg-muted/70">
|
||||
<svg
|
||||
className="h-5 w-5 text-green-600 dark:text-green-400"
|
||||
fill="none"
|
||||
|
|
@ -375,43 +376,35 @@ export function IntegrationsView() {
|
|||
</svg>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-foreground font-semibold text-base mb-1">
|
||||
<h3 className="text-foreground font-semibold text-base">
|
||||
Connections
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed mb-2">
|
||||
Connect your accounts to sync document.
|
||||
</p>
|
||||
{!isProUser && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Connections require a Pro subscription
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Show upgrade prompt for free users */}
|
||||
{!isProUser && (
|
||||
<motion.div
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg mb-3"
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
>
|
||||
<p className="text-sm text-yellow-600 dark:text-yellow-400 mb-2">
|
||||
🔌 Connections are a Pro feature
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mb-3">
|
||||
Connect Google Drive, Notion, OneDrive and more to automatically
|
||||
sync your documents.
|
||||
</p>
|
||||
<div className="flex p-4 bg-muted/80 rounded-lg mb-2 justify-between items-center">
|
||||
<div>
|
||||
<p className="text-sm mb-1">🔌 Connections are a Pro feature</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Connect Google Drive, Notion, OneDrive to automatically
|
||||
sync your documents.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-600 dark:text-yellow-400 border-yellow-500/30 w-full sm:w-auto"
|
||||
className="bg-[#267ffa] hover:bg-[#267ffa]/90 text-white border-0 w-full sm:w-auto rounded-full"
|
||||
onClick={handleUpgrade}
|
||||
size="sm"
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
>
|
||||
Upgrade to Pro
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* All Connections with Status */}
|
||||
|
|
@ -430,13 +423,13 @@ export function IntegrationsView() {
|
|||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className={cn("space-y-2", !isProUser && "opacity-50 pointer-events-none cursor-not-allowed")}>
|
||||
{Object.entries(CONNECTORS).map(([provider, config], index) => {
|
||||
const Icon = config.icon;
|
||||
const Icon = config.icon
|
||||
const connection = connections.find(
|
||||
(conn) => conn.provider === provider,
|
||||
);
|
||||
const isConnected = !!connection;
|
||||
)
|
||||
const isConnected = !!connection
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
|
|
@ -462,14 +455,14 @@ export function IntegrationsView() {
|
|||
</p>
|
||||
{isConnected ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full" />
|
||||
<span className="text-xs text-green-600 dark:text-green-400 font-medium">
|
||||
Connected
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="hidden sm:flex items-center gap-1">
|
||||
<div className="w-2 h-2 bg-muted-foreground rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-muted-foreground rounded-full" />
|
||||
<span className="text-xs text-muted-foreground font-medium">
|
||||
Disconnected
|
||||
</span>
|
||||
|
|
@ -509,7 +502,7 @@ export function IntegrationsView() {
|
|||
) : (
|
||||
<div className="flex items-center justify-between gap-2 w-full sm:w-auto">
|
||||
<div className="sm:hidden flex items-center gap-1">
|
||||
<div className="w-2 h-2 bg-muted-foreground rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-muted-foreground rounded-full" />
|
||||
<span className="text-xs text-muted-foreground font-medium">
|
||||
Disconnected
|
||||
</span>
|
||||
|
|
@ -520,12 +513,12 @@ export function IntegrationsView() {
|
|||
className="flex-shrink-0"
|
||||
>
|
||||
<Button
|
||||
className="bg-blue-500/20 hover:bg-blue-500/30 text-blue-600 dark:text-blue-400 border-blue-500/30 min-w-[80px]"
|
||||
className=" text-white border-0 min-w-[80px]"
|
||||
disabled={addConnectionMutation.isPending}
|
||||
onClick={() => {
|
||||
addConnectionMutation.mutate(
|
||||
provider as ConnectorProvider,
|
||||
);
|
||||
)
|
||||
}}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
|
|
@ -540,7 +533,7 @@ export function IntegrationsView() {
|
|||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -555,7 +548,7 @@ export function IntegrationsView() {
|
|||
href="https://x.com/supermemoryai"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-orange-600 dark:text-orange-400 hover:text-orange-500 underline"
|
||||
className="text-[#267ffa] hover:text-[#267ffa]/90 underline"
|
||||
>
|
||||
X
|
||||
</a>
|
||||
|
|
@ -665,5 +658,5 @@ export function IntegrationsView() {
|
|||
</DialogPortal>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -238,10 +238,10 @@ export function ProfileView() {
|
|||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white border-0"
|
||||
className="w-full bg-[#267ffa] hover:bg-[#267ffa]/90 text-white border-0"
|
||||
disabled={isLoading || isCheckingStatus}
|
||||
onClick={handleUpgrade}
|
||||
size="sm"
|
||||
size="lg"
|
||||
>
|
||||
{isLoading || isCheckingStatus ? (
|
||||
<>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue