Merge pull request #1627 from AnishSarkar22/fix/models

fix: UI changes

Author: MODSetter

surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CheckCircle2, ChevronDown, ChevronUp, Loader2, Server, XCircle } from "lucide-react";
+import { CheckCircle2, ChevronDown, ChevronUp, Info, Loader2, XCircle } from "lucide-react";
 import { type FC, useRef, useState } from "react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -136,9 +136,9 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
-				<Server className="h-4 w-4 shrink-0" />
-				<AlertDescription className="text-[10px] sm:text-xs">
+			<Alert>
+				<Info />
+				<AlertDescription>
 					Connect to a Model Context Protocol server. Each MCP server is added as a separate
 					connector.
 				</AlertDescription>

surfsense_web/components/layout/ui/playground/PlaygroundSidebar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronRight, History, KeyRound, LayoutGrid } from "lucide-react";
+import { ArrowRight, ChevronRight, History, KeyRound, LayoutGrid, Unplug } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
@@ -216,6 +216,17 @@ export function PlaygroundSidebar({ workspaceId, className }: PlaygroundSidebarP
 					))}
 				</div>
 			</nav>
+			<div className="shrink-0 border-t p-2">
+				<Link
+					href={`/dashboard/${workspaceId}/connectors`}
+					prefetch
+					className="group inline-flex h-auto w-full items-center justify-start gap-3 rounded-md bg-transparent px-3 py-2.5 text-left text-sm font-medium text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:outline-none"
+				>
+					<Unplug className="h-4 w-4 shrink-0" />
+					<span className="min-w-0 truncate">Add external connectors</span>
+					<ArrowRight className="ml-auto hidden h-4 w-4 shrink-0 -rotate-45 group-hover:block" />
+				</Link>
+			</div>
 		</aside>
 	);
 }