openclaw/apps/web/app/components/workspace/empty-state.tsx

"use client";

export function EmptyState({
	workspaceExists,
}: {
	workspaceExists: boolean;
}) {
	return (
		<div className="flex flex-col items-center justify-center h-full gap-6 px-8">
			{/* Icon */}
			<div
				className="w-20 h-20 rounded-2xl flex items-center justify-center"
				style={{
					background: "var(--color-surface)",
					border: "1px solid var(--color-border)",
					boxShadow: "var(--shadow-sm)",
				}}
			>
				<svg
					width="40"
					height="40"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="1.5"
					strokeLinecap="round"
					strokeLinejoin="round"
					style={{
						color: "var(--color-text-muted)",
						opacity: 0.5,
					}}
				>
					<rect width="7" height="7" x="3" y="3" rx="1" />
					<rect
						width="7"
						height="7"
						x="14"
						y="3"
						rx="1"
					/>
					<rect
						width="7"
						height="7"
						x="14"
						y="14"
						rx="1"
					/>
					<rect
						width="7"
						height="7"
						x="3"
						y="14"
						rx="1"
					/>
				</svg>
			</div>

			{/* Text */}
			<div className="text-center max-w-md">
				<h2
					className="font-instrument text-2xl tracking-tight mb-2"
					style={{ color: "var(--color-text)" }}
				>
					{workspaceExists
						? "Workspace is empty"
						: "No workspace found"}
				</h2>
				<p
					className="text-sm leading-relaxed"
					style={{ color: "var(--color-text-muted)" }}
				>
					{workspaceExists ? (
						<>
							The Dench workspace exists but has no
							knowledge tree yet. Ask the CRM agent to
							create objects and documents to populate
							it.
						</>
					) : (
						<>
							The Dench workspace directory was not
							found. To initialize it, start a
							conversation with the CRM agent and it
							will create the workspace structure
							automatically.
						</>
					)}
				</p>
			</div>

			{/* Hint */}
			<div
				className="flex items-center gap-2 px-4 py-3 rounded-xl text-sm"
				style={{
					background: "var(--color-surface)",
					border: "1px solid var(--color-border)",
					color: "var(--color-text-muted)",
					boxShadow: "var(--shadow-sm)",
				}}
			>
				<svg
					width="16"
					height="16"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="2"
					strokeLinecap="round"
					strokeLinejoin="round"
					style={{
						color: "var(--color-accent)",
						flexShrink: 0,
					}}
				>
					<circle cx="12" cy="12" r="10" />
					<path d="M12 16v-4" />
					<path d="M12 8h.01" />
				</svg>
				<span>
					Expected location:{" "}
					<code
						className="px-1.5 py-0.5 rounded-md text-xs"
						style={{
							background: "var(--color-surface-hover)",
							border: "1px solid var(--color-border)",
						}}
					>
						~/.openclaw/workspace/dench/
					</code>
				</span>
			</div>

			{/* Back link */}
			<a
				href="/"
				className="flex items-center gap-2 text-sm mt-2"
				style={{ color: "var(--color-accent)" }}
			>
				<svg
					width="16"
					height="16"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="2"
					strokeLinecap="round"
					strokeLinejoin="round"
				>
					<path d="m12 19-7-7 7-7" />
					<path d="M19 12H5" />
				</svg>
				Back to Home
			</a>
		</div>
	);
}