feat(playground): enhance schema form and artifacts library UI

- Replaced required/optional text with Badge component in schema form for better visual distinction.
- Updated EmptyState in artifacts library to include a more informative and visually appealing layout with an icon and description.

surfsense_web/app/dashboard/[workspace_id]/playground/components/schema-form.tsx

@@ -2,6 +2,7 @@
 
 import { ChevronDown } from "lucide-react";
 import { useMemo, useState } from "react";
+import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -133,7 +134,12 @@ function FieldRow({
 				<Label htmlFor={`field-${field.name}`} className="text-sm font-medium">
 					{field.title}
 				</Label>
-				{field.required && <span className="text-xs text-destructive">required</span>}
+				<Badge
+					variant={field.required ? "destructive" : "secondary"}
+					className="px-1.5 py-0 text-[10px]"
+				>
+					{field.required ? "required" : "optional"}
+				</Badge>
 			</div>
 			{field.description && (
 				<p className="text-xs text-muted-foreground">{field.description}</p>

surfsense_web/features/artifacts-library/ui/artifacts-library.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useSetAtom } from "jotai";
-import { RefreshCw, TriangleAlert } from "lucide-react";
+import { Boxes, RefreshCw, TriangleAlert } from "lucide-react";
 import { useMemo, useState } from "react";
 import { openReportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { MobileReportPanel } from "@/components/report-panel/report-panel";
@@ -46,8 +46,15 @@ function ErrorState({ onRetry }: { onRetry: () => void }) {
 
 function EmptyState() {
 	return (
-		<div className="flex items-center justify-center py-20 text-center">
-			<p className="font-medium text-foreground">No artifacts yet</p>
+		<div className="rounded-lg border border-dashed border-border/60 bg-muted/20 px-6 py-12 text-center">
+			<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
+				<Boxes className="h-6 w-6" aria-hidden />
+			</div>
+			<h3 className="mt-4 text-base font-semibold text-foreground">No artifacts yet</h3>
+			<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
+				Artifacts collect the reports, resumes, podcasts, presentations, and images SurfSense
+				creates for this workspace. Generated deliverables from your chats will appear here.
+			</p>
 		</div>
 	);
 }

surfsense_web/public/connectors/web.svg

@@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.25"/><path d="M2.75 12h18.5"/><ellipse cx="12" cy="12" rx="4.1" ry="9.25"/><path d="M5 6.4h14M5 17.6h14"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+	<g fill="none" stroke-width="3">
+		<path fill="#8fbffa" d="M3 24a21 21 0 1 0 42 0a21 21 0 1 0-42 0" />
+		<path stroke="#2859c5" stroke-linejoin="round" d="M3 24a21 21 0 1 0 42 0a21 21 0 1 0-42 0" />
+		<path stroke="#2859c5" stroke-linejoin="round" d="M15 24a9 21 0 1 1 18 0a9 21 0 1 1-18 0" />
+		<path stroke="#2859c5" stroke-linecap="round" stroke-linejoin="round" d="M4.5 31h39m-39-14h39" />
+	</g>
+</svg>