src/components/panels/AgentConfig.tsx

import { useLocalStorage } from "react-use";
import agentsJson from "../../../agents.json";

export default function AgentConfig() {
  const [cfg, setCfg] = useLocalStorage("agentsConfig", agentsJson);

  const updateModel = (id: string, model: string) => {
    setCfg(
      (cfg as any[]).map((a) =>
        a.id === id
          ? {
              ...a,
              model,
            }
          : a
      )
    );
  };

  return (
    <div className="h-full overflow-auto bg-gray-900 text-gray-200 p-4">
      <h2 className="text-lg font-semibold mb-4">Configuração de Agentes</h2>
      {(cfg as any[]).map((a: any) => (
        <div key={a.id} className="mb-6">
          <h3 className="font-medium">{a.name}</h3>
          <label className="block mt-2">
            <span>Modelo</span>
            <select
              value={a.model}
              onChange={(e) => updateModel(a.id, e.target.value)}
              className="mt-1 block w-full bg-gray-800 p-2 rounded text-white"
            >
              <option value="deepsite">DeepSeek (grátis)</option>
              <option value="gpt-4o-mini">ChatGPT 4O</option>
              <option value="text-bison-001">Gemini</option>
              <option value="claude-3.7">Claude 3.7</option>
            </select>
          </label>
        </div>
      ))}
    </div>
  );
}