frontend/src/components/views/chat/vision.tsx

import * as React from "react";
import { Spin } from "antd";

interface VisionProps {
  vncUrl?: string | null;
  lastScreenshot?: string | null;
  isLoading?: boolean;
}

export default function Vision({ vncUrl, lastScreenshot, isLoading }: VisionProps) {
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full w-full">
        <Spin size="large" tip="Loading Vision Stream..." />
      </div>
    );
  }

  if (vncUrl) {
    return (
      <div className="h-full w-full bg-black relative">
        <iframe
          src={vncUrl}
          className="absolute top-0 left-0 w-full h-full border-none"
          title="VNC Vision Stream"
          allow="clipboard-read; clipboard-write"
        />
      </div>
    );
  }

  if (lastScreenshot) {
    return (
      <div className="flex items-center justify-center h-full w-full bg-gray-900 overflow-hidden">
        <img
          src={`data:image/png;base64,${lastScreenshot}`}
          alt="Latest Screenshot"
          className="max-w-full max-h-full object-contain"
        />
      </div>
    );
  }

  return (
    <div className="flex items-center justify-center h-full w-full text-secondary">
      <div className="text-center">
        <div className="text-xl mb-2">No Vision Stream Available</div>
        <div className="text-sm opacity-70">
          Start a task to see the agent's visual interactions.
        </div>
      </div>
    </div>
  );
}