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)",
        }}
      >
        <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="text-lg font-semibold 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-lg text-sm"
        style={{
          background: "var(--color-surface)",
          border: "1px solid var(--color-border)",
          color: "var(--color-text-muted)",
        }}
      >
        <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 text-xs"
            style={{ background: "var(--color-bg)" }}
          >
            ~/.openclaw/workspace/dench/
          </code>
        </span>
      </div>

      {/* Back link */}
      <a
        href="/"
        className="flex items-center gap-2 text-sm mt-2 transition-colors"
        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>
  );
}