constants.tsx

/*
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import { AgentType } from './types';

const CpuChipIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V8.25a2.25 2.25 0 0 0-2.25-2.25H8.25a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25Z" />
  </svg>
);

const QueueListIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
  </svg>
);

const ParallelIcon = (props: React.SVGProps<SVGSVGElement>) => (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5" />
    </svg>
);

const LoopIcon = (props: React.SVGProps<SVGSVGElement>) => (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3" />
    </svg>
);


export const AGENT_TYPE_DETAILS: Record<AgentType, { colorClass: string; colorValue: string; icon: React.ReactNode; label: string }> = {
    [AgentType.LLM]: {
        colorClass: 'bg-sky-600',
        colorValue: '#0284c7',
        icon: <CpuChipIcon className="h-6 w-6 text-white" />,
        label: 'LLM Agent'
    },
    [AgentType.SEQUENTIAL]: {
        colorClass: 'bg-amber-600',
        colorValue: '#d97706',
        icon: <QueueListIcon className="h-6 w-6 text-white" />,
        label: 'Sequential'
    },
    [AgentType.PARALLEL]: {
        colorClass: 'bg-teal-600',
        colorValue: '#0d9488',
        icon: <ParallelIcon className="h-6 w-6 text-white" />,
        label: 'Parallel'
    },
    [AgentType.LOOP]: {
        colorClass: 'bg-indigo-600',
        colorValue: '#4f46e5',
        icon: <LoopIcon className="h-6 w-6 text-white" />,
        label: 'Loop'
    }
};

export const DEFAULT_AGENT_CODE = `
var styleGuideChecker = LlmAgent.builder()
    .name("style-guide-checker")
    .description("Checks code against a specific style guide.")
    .instruction("Check if the code {generated_code} adheres to PEP8. Respond with YES or NO.")
    .model("gemini-2.0-flash")
    .build();

var codeGenerator = LlmAgent.builder()
    .name("code-generator")
    .description("Writes and refines code based on a request and feedback.")
    .instruction("""
        Your role is to write a Python function based on the user's request.
        On the first turn, write the initial version of the code.
        On subsequent turns, you will receive feedback on your code.
        Your task is to refine the code based on this feedback.
        
        Previous feedback (if any):
        {feedback?}
        """)
    .model("gemini-2.0-flash")
    .outputKey("generated_code")
    .build();

var codeReviewer = LlmAgent.builder()
    .name("code-reviewer")
    .description("Reviews code and decides if it's complete or needs more work.")
    .instruction("""
        Your role is to act as a senior code reviewer.
        Analyze the provided Python code for correctness, style, and potential bugs.
        Use the style-guide-checker tool to verify style compliance.
        
        Code to review:
        {generated_code}
        
        If the code is perfect and meets the user's request,
        you MUST reply with just one single word: EXIT
        Don't add any introduction or commentary. Just reply with EXIT.
        
        Otherwise, provide constructive feedback for the \`code-generator\` to improve the code.
        """
    )
    .model("gemini-2.0-flash")
    .outputKey("feedback")
    .tools(AgentTool.from(styleGuideChecker))
    .build();

var codeRefinerLoop = LoopAgent.builder()
    .name("code-refiner-loop")
    .description("Iteratively generates and reviews code until it is correct.")
    .subAgents(
        codeGenerator,
        codeReviewer
    )
    .maxIterations(10)
    .build();

var finalPresenter = LlmAgent.builder()
    .name("final-presenter")
    .description("Presents the final, accepted code to the user.")
    .instruction("""
        The code has been successfully generated and reviewed.
        Present the final version of the code to the user in a clear format.
        
        Final Code:
        {generated_code}
        """)
    .model("gemini-2.0-flash")
    .build();

return SequentialAgent.builder()
    .name("code-refiner-assistant")
    .description("Manages the full code generation and refinement process.")
    .subAgents(
        codeRefinerLoop,
        finalPresenter)
    .build();
`;