added connections as well to integrations view

2026-09-06 08:16:03 +00:00 · 2025-08-24 23:02:20 -07:00 · 2025-08-24 23:02:20 -07:00 · da3f99b071
commit da3f99b071
parent 5fa5378176
4 changed files with 359 additions and 7 deletions
--- a/apps/web/components/menu.tsx
+++ b/apps/web/components/menu.tsx
@ -9,7 +9,7 @@ import { Button } from "@repo/ui/components/button";
 import { HeadingH2Bold } from "@repo/ui/text/heading/heading-h2-bold";
 import { GlassMenuEffect } from "@ui/other/glass-effect";
 import { useCustomer } from "autumn-js/react";
-import { MessageSquareMore, Plus, User, X } from "lucide-react";
+import { MessageSquareMore, Plus, Puzzle, User, X } from "lucide-react";
 import { AnimatePresence, LayoutGroup, motion } from "motion/react";
 import { useEffect, useState } from "react";
 import { Drawer } from "vaul";
@ -19,6 +19,7 @@ import { useChatOpen } from "@/stores";
 import { ProjectSelector } from "./project-selector";
 import { useTour } from "./tour";
 import { AddMemoryExpandedView, AddMemoryView } from "./views/add-memory";
+import { IntegrationsView } from "./views/integrations";
 import { MCPView } from "./views/mcp";
 import { ProfileView } from "./views/profile";

@ -41,7 +42,7 @@ const MCPIcon = ({ className }: { className?: string }) => {
 function Menu({ id }: { id?: string }) {
 	const [isHovered, setIsHovered] = useState(false);
 	const [expandedView, setExpandedView] = useState<
-		"addUrl" | "mcp" | "projects" | "profile" | null
+		"addUrl" | "mcp" | "projects" | "profile" | "integrations" | null
 	>(null);
 	const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 	const [isCollapsing, setIsCollapsing] = useState(false);
@ -52,12 +53,12 @@ function Menu({ id }: { id?: string }) {
 	const autumn = useCustomer();
 	const { setIsOpen } = useChatOpen();

-	const { data: memoriesCheck } = fetchMemoriesFeature(autumn as any);
+	const { data: memoriesCheck } = fetchMemoriesFeature(autumn);

 	const memoriesUsed = memoriesCheck?.usage ?? 0;
 	const memoriesLimit = memoriesCheck?.included_usage ?? 0;

-	const { data: proCheck } = fetchConsumerProProduct(autumn as any);
+	const { data: proCheck } = fetchConsumerProProduct(autumn);

 	useEffect(() => {
 		if (memoriesCheck) {
@ -79,6 +80,7 @@ function Menu({ id }: { id?: string }) {
 		addUrl: TOUR_STEP_IDS.MENU_ADD_MEMORY,
 		projects: TOUR_STEP_IDS.MENU_PROJECTS,
 		mcp: TOUR_STEP_IDS.MENU_MCP,
+		integrations: "", // No tour ID for integrations yet
 	};

 	const menuItems = [
@ -94,6 +96,12 @@ function Menu({ id }: { id?: string }) {
 			key: "chat" as const,
 			disabled: false,
 		},
+		{
+			icon: Puzzle,
+			text: "Integrations",
+			key: "integrations" as const,
+			disabled: false,
+		},
 		{
 			icon: MCPIcon,
 			text: "MCP",
@ -109,7 +117,7 @@ function Menu({ id }: { id?: string }) {
 	];

 	const handleMenuItemClick = (
-		key: "chat" | "addUrl" | "mcp" | "projects" | "profile",
+		key: "chat" | "addUrl" | "mcp" | "projects" | "profile" | "integrations",
 	) => {
 		if (key === "chat") {
 			setIsOpen(true);
@ -365,6 +373,7 @@ function Menu({ id }: { id?: string }) {
 												<HeadingH2Bold className="text-white">
 													{expandedView === "mcp" && "Model Context Protocol"}
 													{expandedView === "profile" && "Profile"}
+													{expandedView === "integrations" && "Integrations"}
 												</HeadingH2Bold>
 												<motion.div
 													animate={{ opacity: 1, scale: 1 }}
@ -399,6 +408,9 @@ function Menu({ id }: { id?: string }) {
 											>
 												{expandedView === "mcp" && <MCPView />}
 												{expandedView === "profile" && <ProfileView />}
+												{expandedView === "integrations" && (
+													<IntegrationsView />
+												)}
 											</motion.div>
 										</motion.div>
 									)}
@ -530,7 +542,8 @@ function Menu({ id }: { id?: string }) {
 																	handleMenuItemClick(item.key);
 																	if (
 																		item.key !== "mcp" &&
-																		item.key !== "profile"
+																		item.key !== "profile" &&
+																		item.key !== "integrations"
 																	) {
 																		setIsMobileMenuOpen(false);
 																	}
@ -590,6 +603,8 @@ function Menu({ id }: { id?: string }) {
 															{expandedView === "mcp" &&
 																"Model Context Protocol"}
 															{expandedView === "profile" && "Profile"}
+															{expandedView === "integrations" &&
+																"Integrations"}
 														</HeadingH2Bold>
 														<Button
 															className="text-white/70 hover:text-white transition-colors duration-200"
@ -609,6 +624,9 @@ function Menu({ id }: { id?: string }) {
 														)}
 														{expandedView === "mcp" && <MCPView />}
 														{expandedView === "profile" && <ProfileView />}
+														{expandedView === "integrations" && (
+															<IntegrationsView />
+														)}
 													</div>
 												</div>
 											</motion.div>
--- a/apps/web/components/views/integrations.tsx
+++ b/apps/web/components/views/integrations.tsx
@ -0,0 +1,325 @@
+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";
+import { Button } from "@repo/ui/components/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogPortal,
+} from "@repo/ui/components/dialog";
+import { useMutation } from "@tanstack/react-query";
+import { Check, Copy, Smartphone, X } from "lucide-react";
+import Image from "next/image";
+import { useId, useState } from "react";
+import { toast } from "sonner";
+
+const ChromeIcon = ({ className }: { className?: string }) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		preserveAspectRatio="xMidYMid"
+		viewBox="0 0 190.5 190.5"
+		className={className}
+	>
+		<title>Google Chrome Icon</title>
+		<path
+			fill="#fff"
+			d="M95.252 142.873c26.304 0 47.627-21.324 47.627-47.628s-21.323-47.628-47.627-47.628-47.627 21.324-47.627 47.628 21.323 47.628 47.627 47.628z"
+		/>
+		<path
+			fill="#229342"
+			d="m54.005 119.07-41.24-71.43a95.227 95.227 0 0 0-.003 95.25 95.234 95.234 0 0 0 82.496 47.61l41.24-71.43v-.011a47.613 47.613 0 0 1-17.428 17.443 47.62 47.62 0 0 1-47.632.007 47.62 47.62 0 0 1-17.433-17.437z"
+		/>
+		<path
+			fill="#fbc116"
+			d="m136.495 119.067-41.239 71.43a95.229 95.229 0 0 0 82.489-47.622A95.24 95.24 0 0 0 190.5 95.248a95.237 95.237 0 0 0-12.772-47.623H95.249l-.01.007a47.62 47.62 0 0 1 23.819 6.372 47.618 47.618 0 0 1 17.439 17.431 47.62 47.62 0 0 1-.001 47.633z"
+		/>
+		<path
+			fill="#1a73e8"
+			d="M95.252 132.961c20.824 0 37.705-16.881 37.705-37.706S116.076 57.55 95.252 57.55 57.547 74.431 57.547 95.255s16.881 37.706 37.705 37.706z"
+		/>
+		<path
+			fill="#e33b2e"
+			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 [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();
+
+	const createApiKeyMutation = useMutation({
+		mutationFn: async () => {
+			const res = await authClient.apiKey.create({
+				metadata: {
+					organizationId: org?.id,
+					type: "ios-shortcut",
+				},
+				name: `ios-${generateId().slice(0, 8)}`,
+				prefix: `sm_${org?.id}_`,
+			});
+			return res.key;
+		},
+		onSuccess: (apiKey) => {
+			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();
+	};
+
+	const handleCopyApiKey = async () => {
+		try {
+			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");
+		}
+	};
+
+	const handleOpenShortcut = () => {
+		if (!selectedShortcutType) {
+			toast.error("No shortcut type selected");
+			return;
+		}
+
+		if (selectedShortcutType === "add") {
+			window.open(ADD_MEMORY_SHORTCUT_URL, "_blank");
+		} else if (selectedShortcutType === "search") {
+			window.open(SEARCH_MEMORY_SHORTCUT_URL, "_blank");
+		}
+	};
+
+	const handleDialogClose = (open: boolean) => {
+		setShowApiKeyModal(open);
+		if (!open) {
+			// Reset state when dialog closes
+			setSelectedShortcutType(null);
+			setApiKey("");
+			setCopied(false);
+		}
+	};
+
+	return (
+		<div className="space-y-4">
+			{/* iOS Shortcuts */}
+			<div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
+				<div className="p-4">
+					<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-400" />
+						</div>
+						<div className="flex-1 min-w-0">
+							<h3 className="text-white font-semibold text-base mb-1">
+								iOS Shortcuts
+							</h3>
+							<p className="text-white/70 text-sm leading-relaxed">
+								Add memories directly from iOS
+							</p>
+						</div>
+					</div>
+					<div className="flex flex-col sm:flex-row gap-2">
+						<Button
+							variant="ghost"
+							className="flex-1 text-white hover:bg-blue-500/10 bg-[#171F59]/75 "
+							onClick={() => handleShortcutClick("add")}
+							disabled={createApiKeyMutation.isPending}
+						>
+							<Image
+								src="/images/ios-shortcuts.png"
+								alt="iOS Shortcuts"
+								width={20}
+								height={20}
+							/>
+							{createApiKeyMutation.isPending
+								? "Creating..."
+								: "Add Memory Shortcut"}
+						</Button>
+						<Button
+							variant="ghost"
+							className="flex-1 text-white  hover:bg-blue-500/10 bg-[#171F59]/75"
+							onClick={() => handleShortcutClick("search")}
+							disabled={createApiKeyMutation.isPending}
+						>
+							<Image
+								src="/images/ios-shortcuts.png"
+								alt="iOS Shortcuts"
+								width={20}
+								height={20}
+							/>
+							{createApiKeyMutation.isPending
+								? "Creating..."
+								: "Search Memory Shortcut"}
+						</Button>
+					</div>
+				</div>
+			</div>
+
+			{/* Chrome Extension */}
+			<div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden opacity-75">
+				<div className="p-4">
+					<div className="flex items-start gap-3">
+						<div className="p-2 bg-orange-500/20 rounded-lg flex-shrink-0">
+							<ChromeIcon className="h-5 w-5 text-orange-400" />
+						</div>
+						<div className="flex-1 min-w-0">
+							<div className="flex items-center gap-2 mb-1">
+								<h3 className="text-white font-semibold text-base">
+									Chrome Extension
+								</h3>
+								<div className="px-2 py-1 bg-orange-500/20 text-orange-400 text-xs rounded-full flex-shrink-0">
+									Coming Soon
+								</div>
+							</div>
+							<p className="text-white/70 text-sm leading-relaxed">
+								Save web content with one click
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div className="p-3">
+				<p className="text-white/70 text-sm leading-relaxed">
+					More integrations are coming soon! Have a suggestion? Share it with us
+					on{" "}
+					<a
+						href="https://x.com/supermemoryai"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-orange-500 hover:text-orange-400 text-sm underline"
+					>
+						X
+					</a>
+					.
+				</p>
+			</div>
+
+			{/* API Key Modal */}
+			<Dialog open={showApiKeyModal} onOpenChange={handleDialogClose}>
+				<DialogPortal>
+					<DialogContent className="bg-[#0f1419] border-white/10 text-white md:max-w-md z-[100]">
+						<DialogHeader>
+							<DialogTitle className="text-white text-lg font-semibold">
+								Setup{" "}
+								{selectedShortcutType === "add"
+									? "Add Memory"
+									: selectedShortcutType === "search"
+										? "Search Memory"
+										: "iOS"}{" "}
+								Shortcut
+							</DialogTitle>
+						</DialogHeader>
+
+						<div className="space-y-4">
+							{/* API Key Section */}
+							<div className="space-y-2">
+								<label
+									htmlFor={apiKeyId}
+									className="text-sm font-medium text-white/80"
+								>
+									Your API Key
+								</label>
+								<div className="flex items-center gap-2">
+									<input
+										id={apiKeyId}
+										type="text"
+										value={apiKey}
+										readOnly
+										className="flex-1 bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white font-mono"
+									/>
+									<Button
+										size="sm"
+										variant="ghost"
+										onClick={handleCopyApiKey}
+										className="text-white/70 hover:text-white hover:bg-white/10"
+									>
+										{copied ? (
+											<Check className="h-4 w-4 text-green-400" />
+										) : (
+											<Copy className="h-4 w-4" />
+										)}
+									</Button>
+								</div>
+							</div>
+
+							{/* Steps */}
+							<div className="space-y-3">
+								<h4 className="text-sm font-medium text-white/80">
+									Follow these steps:
+								</h4>
+								<div className="space-y-2">
+									<div className="flex items-start gap-3">
+										<div className="flex-shrink-0 w-6 h-6 bg-blue-500/20 text-blue-400 rounded-full flex items-center justify-center text-xs font-medium">
+											1
+										</div>
+										<p className="text-sm text-white/70">
+											Click "Add to Shortcuts" below to open the shortcut
+										</p>
+									</div>
+									<div className="flex items-start gap-3">
+										<div className="flex-shrink-0 w-6 h-6 bg-blue-500/20 text-blue-400 rounded-full flex items-center justify-center text-xs font-medium">
+											2
+										</div>
+										<p className="text-sm text-white/70">
+											Paste your API key when prompted
+										</p>
+									</div>
+									<div className="flex items-start gap-3">
+										<div className="flex-shrink-0 w-6 h-6 bg-blue-500/20 text-blue-400 rounded-full flex items-center justify-center text-xs font-medium">
+											3
+										</div>
+										<p className="text-sm text-white/70">
+											Start using your shortcut!
+										</p>
+									</div>
+								</div>
+							</div>
+
+							<div className="flex gap-2 pt-2">
+								<Button
+									onClick={handleOpenShortcut}
+									className="flex-1 bg-blue-600 hover:bg-blue-700 text-white"
+									disabled={!selectedShortcutType}
+								>
+									<Image
+										src="/images/ios-shortcuts.png"
+										alt="iOS Shortcuts"
+										width={16}
+										height={16}
+										className="mr-2"
+									/>
+									Add to Shortcuts
+								</Button>
+							</div>
+						</div>
+					</DialogContent>
+				</DialogPortal>
+			</Dialog>
+		</div>
+	);
+}
--- a/apps/web/public/images/ios-shortcuts.png
+++ b/apps/web/public/images/ios-shortcuts.png
--- a/packages/lib/constants.ts
+++ b/packages/lib/constants.ts
@ -1,4 +1,13 @@
 const BIG_DIMENSIONS_NEW = 1536
 const DEFAULT_PROJECT_ID = "sm_project_default"
+const SEARCH_MEMORY_SHORTCUT_URL =
+	"https://www.icloud.com/shortcuts/f2b5c544372844a38ab4c6900e2a88de"
+const ADD_MEMORY_SHORTCUT_URL =
+	"https://www.icloud.com/shortcuts/ec33b029b2c7481d89eda7640dbb7688"

-export { BIG_DIMENSIONS_NEW, DEFAULT_PROJECT_ID }
+export {
+	BIG_DIMENSIONS_NEW,
+	DEFAULT_PROJECT_ID,
+	SEARCH_MEMORY_SHORTCUT_URL,
+	ADD_MEMORY_SHORTCUT_URL,
+}