From 703df486f9ebf2d81deee97f936efcde1c971146 Mon Sep 17 00:00:00 2001
From: akhisud3195 <akhileshs.s4@gmail.com>
Date: Wed, 7 May 2025 20:35:50 +0530
Subject: [PATCH] Reduce size of instructions and examples font in agents

---
 .../app/lib/components/editable-field.tsx     |   6 +-
 .../[projectId]/entities/agent_config.tsx     | 732 +++++++++---------
 2 files changed, 389 insertions(+), 349 deletions(-)

diff --git a/apps/rowboat/app/lib/components/editable-field.tsx b/apps/rowboat/app/lib/components/editable-field.tsx
index 80b97b8e..9a91e5e3 100644
--- a/apps/rowboat/app/lib/components/editable-field.tsx
+++ b/apps/rowboat/app/lib/components/editable-field.tsx
@@ -235,16 +235,16 @@ export function EditableField({
             >
                 {value ? (
                     <>
-                        {markdown && <div className="max-h-[420px] overflow-y-auto">
+                        {markdown && <div>
                             <MarkdownContent content={value} atValues={mentionsAtValues} />
                         </div>}
-                        {!markdown && <div className={`${multiline ? 'whitespace-pre-wrap max-h-[420px] overflow-y-auto' : 'flex items-center'}`}>
+                        {!markdown && <div className={multiline ? 'whitespace-pre-wrap' : 'flex items-center'}>
                             <MarkdownContent content={value} atValues={mentionsAtValues} />
                         </div>}
                     </>
                 ) : (
                     <>
-                        {markdown && <div className="max-h-[420px] overflow-y-auto text-gray-400">
+                        {markdown && <div className="text-gray-400">
                             <MarkdownContent content={placeholder} atValues={mentionsAtValues} />
                         </div>}
                         {!markdown && <span className="text-gray-400">{placeholder}</span>}
diff --git a/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx b/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
index 5b3d7ac4..9f57c993 100644
--- a/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
+++ b/apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
@@ -29,6 +29,9 @@ const sectionHeaderStyles = "text-xs font-medium uppercase tracking-wider text-g
 // Common textarea styles
 const textareaStyles = "rounded-lg p-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 focus:shadow-inner focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 placeholder:text-gray-400 dark:placeholder:text-gray-500";
 
+// Add this type definition after the imports
+type TabType = 'configurations' | 'instructions' | 'examples';
+
 export function AgentConfig({
     projectId,
     workflow,
@@ -59,6 +62,7 @@ export function AgentConfig({
     const { showPreview } = usePreviewModal();
     const [localName, setLocalName] = useState(agent.name);
     const [nameError, setNameError] = useState<string | null>(null);
+    const [activeTab, setActiveTab] = useState<TabType>('configurations');
     
     useEffect(() => {
         setLocalName(agent.name);
@@ -126,369 +130,405 @@ export function AgentConfig({
                 </div>
             }
         >
-            <div className="flex flex-col gap-6 p-4">
-                {!agent.locked && (
-                    <div className="space-y-4">
-                        <div className="space-y-2">
-                            <label className={sectionHeaderStyles}>
-                                Name
-                            </label>
-                            <div className={clsx(
-                                "border rounded-lg focus-within:ring-2",
-                                nameError 
-                                    ? "border-red-500 focus-within:ring-red-500/20" 
-                                    : "border-gray-200 dark:border-gray-700 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
-                            )}>
-                                <Textarea
-                                    value={agent.name}
-                                    useValidation={true}
-                                    updateOnBlur={true}
-                                    validate={(value) => {
-                                        const error = validateAgentName(value, agent.name, usedAgentNames);
-                                        setNameError(error);
-                                        return { valid: !error, errorMessage: error || undefined };
-                                    }}
-                                    onValidatedChange={(value) => {
-                                        handleUpdate({
-                                            ...agent,
-                                            name: value
-                                        });
-                                    }}
-                                    placeholder="Enter agent name..."
-                                    className="w-full text-sm bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-4 py-3"
-                                    autoResize
-                                />
-                            </div>
-                            {nameError && (
-                                <p className="text-sm text-red-500">{nameError}</p>
+            <div className="flex flex-col gap-6 p-4 h-[calc(100vh-100px)] min-h-0 flex-1">
+                {/* Tabs */}
+                <div className="flex border-b border-gray-200 dark:border-gray-700">
+                    {(['configurations', 'instructions', 'examples'] as TabType[]).map((tab) => (
+                        <button
+                            key={tab}
+                            onClick={() => setActiveTab(tab)}
+                            className={clsx(
+                                "px-4 py-2 text-sm font-medium transition-colors relative",
+                                activeTab === tab
+                                    ? "text-indigo-600 dark:text-indigo-400 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-indigo-500 dark:after:bg-indigo-400"
+                                    : "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
                             )}
-                        </div>
-                    </div>
-                )}
-
-                <div className="space-y-4">
-                    <div className="space-y-2">
-                        <label className={sectionHeaderStyles}>
-                            Description
-                        </label>
-                        <Textarea
-                            value={agent.description || ""}
-                            onChange={(e) => {
-                                handleUpdate({
-                                    ...agent,
-                                    description: e.target.value
-                                });
-                            }}
-                            placeholder="Enter a description for this agent"
-                            className={textareaStyles}
-                            autoResize
-                        />
-                    </div>
-                </div>
-                
-                <div className="space-y-4">
-                    <div className="flex items-center">
-                        <label className={sectionHeaderStyles}>
-                            Agent Type
-                        </label>
-                        <div className="relative ml-2 group">
-                            <Info 
-                                className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer transition-colors"
-                            />
-                            <div className="absolute bottom-full left-0 mb-2 p-3 w-80 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs invisible group-hover:visible z-50">
-                                <div className="mb-1 font-medium">Agent Types</div>
-                                Conversation agents&apos; responses are user-facing. You can use conversation agents for multi-turn conversations with users.
-                                <br />
-                                <br />
-                                Task agents&apos; responses are internal and available to other agents. You can use them to build pipelines and DAGs within workflows. E.g. Conversation Agent {'->'} Task Agent {'->'} Task Agent.
-                                <div className="absolute h-2 w-2 bg-white dark:bg-gray-800 transform rotate-45 -bottom-1 left-4 border-r border-b border-gray-200 dark:border-gray-700"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <CustomDropdown
-                        value={agent.outputVisibility}
-                        options={[
-                            { key: "user_facing", label: "Conversation Agent" },
-                            { key: "internal", label: "Task Agent" }
-                        ]}
-                        onChange={(value) => handleUpdate({
-                            ...agent,
-                            outputVisibility: value as z.infer<typeof WorkflowAgent>['outputVisibility']
-                        })}
-                    />
-                </div>
-
-                <div className="space-y-4">
-                    <div className="flex items-center justify-between">
-                        <label className={sectionHeaderStyles}>
-                            Instructions
-                        </label>
-                        <CustomButton
-                            variant="primary"
-                            size="sm"
-                            onClick={() => setShowGenerateModal(true)}
-                            startContent={<Sparkles className="w-4 h-4" />}
                         >
-                            Generate
-                        </CustomButton>
-                    </div>
-                    <EditableField
-                        key="instructions"
-                        value={agent.instructions}
-                        onChange={(value) => {
-                            handleUpdate({
-                                ...agent,
-                                instructions: value
-                            });
-                        }}
-                        markdown
-                        multiline
-                        mentions
-                        mentionsAtValues={atMentions}
-                        showSaveButton={true}
-                        showDiscardButton={true}
-                        className="border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
-                    />
+                            {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                        </button>
+                    ))}
                 </div>
 
-                <div className="space-y-4">
-                    <label className={sectionHeaderStyles}>
-                        Examples
-                    </label>
-                    <EditableField
-                        key="examples"
-                        value={agent.examples || ""}
-                        onChange={(value) => {
-                            handleUpdate({
-                                ...agent,
-                                examples: value
-                            });
-                        }}
-                        placeholder="Enter examples for this agent"
-                        markdown
-                        multiline
-                        mentions
-                        mentionsAtValues={atMentions}
-                        showSaveButton={true}
-                        showDiscardButton={true}
-                        className="border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
-                    />
-                </div>
-
-                {useRag && (
-                    <div className="space-y-4">
-                        <label className={sectionHeaderStyles}>
-                            RAG
-                        </label>
-                        <div className="flex flex-col gap-3">
-                            <div>
-                                <Select
-                                    variant="bordered"
-                                    placeholder="Add data source"
-                                    size="sm"
-                                    className="w-64"
-                                    onSelectionChange={(keys) => {
-                                        const key = keys.currentKey as string;
-                                        if (key) {
-                                            handleUpdate({
-                                                ...agent,
-                                                ragDataSources: [...(agent.ragDataSources || []), key]
-                                            });
-                                        }
-                                    }}
-                                    startContent={<PlusIcon className="w-4 h-4 text-gray-500" />}
-                                >
-                                    {dataSources
-                                        .filter((ds) => !(agent.ragDataSources || []).includes(ds._id))
-                                        .map((ds) => (
-                                            <SelectItem key={ds._id}>
-                                                {ds.name}
-                                            </SelectItem>
-                                        ))
-                                    }
-                                </Select>
-                            </div>
-
-                            <div className="flex flex-col gap-2">
-                                {(agent.ragDataSources || []).map((source) => {
-                                    const ds = dataSources.find((ds) => ds._id === source);
-                                    return (
-                                        <div 
-                                            key={source}
-                                            className="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
-                                        >
-                                            <div className="flex items-center gap-3">
-                                                <div className="flex items-center justify-center w-8 h-8 rounded-md bg-indigo-50 dark:bg-indigo-900/20">
-                                                    <svg 
-                                                        className="w-4 h-4 text-indigo-600 dark:text-indigo-400" 
-                                                        fill="none" 
-                                                        viewBox="0 0 24 24" 
-                                                        stroke="currentColor"
-                                                    >
-                                                        <path 
-                                                            strokeLinecap="round" 
-                                                            strokeLinejoin="round" 
-                                                            strokeWidth={2} 
-                                                            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" 
-                                                    />
-                                                    </svg>
-                                                </div>
-                                                <div className="flex flex-col">
-                                                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                                                        {ds?.name || "Unknown"}
-                                                    </span>
-                                                    <span className="text-xs text-gray-500 dark:text-gray-400">
-                                                        Data Source
-                                                    </span>
-                                                </div>
-                                            </div>
-                                            <CustomButton
-                                                variant="tertiary"
-                                                size="sm"
-                                                className="text-gray-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
-                                                onClick={() => {
-                                                    const newSources = agent.ragDataSources?.filter((s) => s !== source);
+                {/* Tab Content */}
+                <div className="mt-4 flex-1 flex flex-col min-h-0 h-0">
+                    {activeTab === 'configurations' && (
+                        <div className="space-y-6">
+                            {!agent.locked && (
+                                <div className="space-y-4">
+                                    <div className="space-y-2">
+                                        <label className={sectionHeaderStyles}>
+                                            Name
+                                        </label>
+                                        <div className={clsx(
+                                            "border rounded-lg focus-within:ring-2",
+                                            nameError 
+                                                ? "border-red-500 focus-within:ring-red-500/20" 
+                                                : "border-gray-200 dark:border-gray-700 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
+                                        )}>
+                                            <Textarea
+                                                value={agent.name}
+                                                useValidation={true}
+                                                updateOnBlur={true}
+                                                validate={(value) => {
+                                                    const error = validateAgentName(value, agent.name, usedAgentNames);
+                                                    setNameError(error);
+                                                    return { valid: !error, errorMessage: error || undefined };
+                                                }}
+                                                onValidatedChange={(value) => {
                                                     handleUpdate({
                                                         ...agent,
-                                                        ragDataSources: newSources
+                                                        name: value
                                                     });
                                                 }}
-                                                startContent={<Trash2 className="w-4 h-4" />}
-                                            >
-                                                Remove
-                                            </CustomButton>
+                                                placeholder="Enter agent name..."
+                                                className="w-full text-sm bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-4 py-3"
+                                                autoResize
+                                            />
                                         </div>
-                                    );
-                                })}
-                            </div>
-
-                            {agent.ragDataSources !== undefined && agent.ragDataSources.length > 0 && (
-                                <>
-                                    <div className="mt-4">
-                                        <button
-                                            onClick={() => setIsAdvancedConfigOpen(!isAdvancedConfigOpen)}
-                                            className="flex items-center gap-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
-                                        >
-                                            {isAdvancedConfigOpen ? 
-                                                <ChevronDown className="w-4 h-4 text-gray-400" /> : 
-                                                <ChevronRight className="w-4 h-4 text-gray-400" />
-                                            }
-                                            Advanced RAG configuration
-                                        </button>
-                                        
-                                        {isAdvancedConfigOpen && (
-                                            <div className="mt-3 ml-4 p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
-                                                <div className="grid gap-6">
-                                                    <div className="space-y-2">
-                                                        <label className={sectionHeaderStyles}>
-                                                            Return type
-                                                        </label>
-                                                        <div className="flex gap-4">
-                                                            {["chunks", "content"].map((type) => (
-                                                                <button
-                                                                    key={type}
-                                                                    onClick={() => handleUpdate({
-                                                                        ...agent,
-                                                                        ragReturnType: type as z.infer<typeof WorkflowAgent>['ragReturnType']
-                                                                    })}
-                                                                    className={clsx(
-                                                                        "px-4 py-2 rounded-lg text-sm font-medium transition-colors",
-                                                                        agent.ragReturnType === type
-                                                                            ? "bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 border-2 border-indigo-200 dark:border-indigo-800"
-                                                                            : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
-                                                                    )}
-                                                                >
-                                                                    {type.charAt(0).toUpperCase() + type.slice(1)}
-                                                                </button>
-                                                            ))}
-                                                        </div>
-                                                    </div>
-
-                                                    <div className="space-y-2">
-                                                        <label className={sectionHeaderStyles}>
-                                                            Number of matches
-                                                        </label>
-                                                        <div className="flex items-center gap-3">
-                                                            <input
-                                                                type="number"
-                                                                min="1"
-                                                                max="20"
-                                                                className="w-24 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 focus:border-indigo-500 dark:focus:border-indigo-400"
-                                                                value={agent.ragK}
-                                                                onChange={(e) => handleUpdate({
-                                                                    ...agent,
-                                                                    ragK: parseInt(e.target.value)
-                                                                })}
-                                                            />
-                                                            <span className="text-sm text-gray-500 dark:text-gray-400">
-                                                                matches
-                                                            </span>
-                                                        </div>
-                                                        <p className="text-xs text-gray-500 dark:text-gray-400">
-                                                            Number of relevant chunks to retrieve (1-20)
-                                                        </p>
-                                                    </div>
-                                                </div>
-                                            </div>
+                                        {nameError && (
+                                            <p className="text-sm text-red-500">{nameError}</p>
                                         )}
                                     </div>
-                                </>
+                                </div>
+                            )}
+
+                            <div className="space-y-4">
+                                <div className="space-y-2">
+                                    <label className={sectionHeaderStyles}>
+                                        Description
+                                    </label>
+                                    <Textarea
+                                        value={agent.description || ""}
+                                        onChange={(e) => {
+                                            handleUpdate({
+                                                ...agent,
+                                                description: e.target.value
+                                            });
+                                        }}
+                                        placeholder="Enter a description for this agent"
+                                        className={textareaStyles}
+                                        autoResize
+                                    />
+                                </div>
+                            </div>
+                            
+                            <div className="space-y-4">
+                                <div className="flex items-center">
+                                    <label className={sectionHeaderStyles}>
+                                        Agent Type
+                                    </label>
+                                    <div className="relative ml-2 group">
+                                        <Info 
+                                            className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer transition-colors"
+                                        />
+                                        <div className="absolute bottom-full left-0 mb-2 p-3 w-80 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs invisible group-hover:visible z-50">
+                                            <div className="mb-1 font-medium">Agent Types</div>
+                                            Conversation agents&apos; responses are user-facing. You can use conversation agents for multi-turn conversations with users.
+                                            <br />
+                                            <br />
+                                            Task agents&apos; responses are internal and available to other agents. You can use them to build pipelines and DAGs within workflows. E.g. Conversation Agent {'->'} Task Agent {'->'} Task Agent.
+                                            <div className="absolute h-2 w-2 bg-white dark:bg-gray-800 transform rotate-45 -bottom-1 left-4 border-r border-b border-gray-200 dark:border-gray-700"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <CustomDropdown
+                                    value={agent.outputVisibility}
+                                    options={[
+                                        { key: "user_facing", label: "Conversation Agent" },
+                                        { key: "internal", label: "Task Agent" }
+                                    ]}
+                                    onChange={(value) => handleUpdate({
+                                        ...agent,
+                                        outputVisibility: value as z.infer<typeof WorkflowAgent>['outputVisibility']
+                                    })}
+                                />
+                            </div>
+
+                            {useRag && (
+                                <div className="space-y-4">
+                                    <label className={sectionHeaderStyles}>
+                                        RAG
+                                    </label>
+                                    <div className="flex flex-col gap-3">
+                                        <div>
+                                            <Select
+                                                variant="bordered"
+                                                placeholder="Add data source"
+                                                size="sm"
+                                                className="w-64"
+                                                onSelectionChange={(keys) => {
+                                                    const key = keys.currentKey as string;
+                                                    if (key) {
+                                                        handleUpdate({
+                                                            ...agent,
+                                                            ragDataSources: [...(agent.ragDataSources || []), key]
+                                                        });
+                                                    }
+                                                }}
+                                                startContent={<PlusIcon className="w-4 h-4 text-gray-500" />}
+                                            >
+                                                {dataSources
+                                                    .filter((ds) => !(agent.ragDataSources || []).includes(ds._id))
+                                                    .map((ds) => (
+                                                        <SelectItem key={ds._id}>
+                                                            {ds.name}
+                                                        </SelectItem>
+                                                    ))
+                                                }
+                                            </Select>
+                                        </div>
+
+                                        <div className="flex flex-col gap-2">
+                                            {(agent.ragDataSources || []).map((source) => {
+                                                const ds = dataSources.find((ds) => ds._id === source);
+                                                return (
+                                                    <div 
+                                                        key={source}
+                                                        className="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
+                                                    >
+                                                        <div className="flex items-center gap-3">
+                                                            <div className="flex items-center justify-center w-8 h-8 rounded-md bg-indigo-50 dark:bg-indigo-900/20">
+                                                                <svg 
+                                                                    className="w-4 h-4 text-indigo-600 dark:text-indigo-400" 
+                                                                    fill="none" 
+                                                                    viewBox="0 0 24 24" 
+                                                                    stroke="currentColor"
+                                                                >
+                                                                    <path 
+                                                                        strokeLinecap="round" 
+                                                                        strokeLinejoin="round" 
+                                                                        strokeWidth={2} 
+                                                                        d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" 
+                                                                    />
+                                                                </svg>
+                                                            </div>
+                                                            <div className="flex flex-col">
+                                                                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                                                    {ds?.name || "Unknown"}
+                                                                </span>
+                                                                <span className="text-xs text-gray-500 dark:text-gray-400">
+                                                                    Data Source
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                        <CustomButton
+                                                            variant="tertiary"
+                                                            size="sm"
+                                                            className="text-gray-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
+                                                            onClick={() => {
+                                                                const newSources = agent.ragDataSources?.filter((s) => s !== source);
+                                                                handleUpdate({
+                                                                    ...agent,
+                                                                    ragDataSources: newSources
+                                                                });
+                                                            }}
+                                                            startContent={<Trash2 className="w-4 h-4" />}
+                                                        >
+                                                            Remove
+                                                        </CustomButton>
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+
+                                        {agent.ragDataSources !== undefined && agent.ragDataSources.length > 0 && (
+                                            <>
+                                                <div className="mt-4">
+                                                    <button
+                                                        onClick={() => setIsAdvancedConfigOpen(!isAdvancedConfigOpen)}
+                                                        className="flex items-center gap-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+                                                    >
+                                                        {isAdvancedConfigOpen ? 
+                                                            <ChevronDown className="w-4 h-4 text-gray-400" /> : 
+                                                            <ChevronRight className="w-4 h-4 text-gray-400" />
+                                                        }
+                                                        Advanced RAG configuration
+                                                    </button>
+                                                    
+                                                    {isAdvancedConfigOpen && (
+                                                        <div className="mt-3 ml-4 p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
+                                                            <div className="grid gap-6">
+                                                                <div className="space-y-2">
+                                                                    <label className={sectionHeaderStyles}>
+                                                                        Return type
+                                                                    </label>
+                                                                    <div className="flex gap-4">
+                                                                        {["chunks", "content"].map((type) => (
+                                                                            <button
+                                                                                key={type}
+                                                                                onClick={() => handleUpdate({
+                                                                                    ...agent,
+                                                                                    ragReturnType: type as z.infer<typeof WorkflowAgent>['ragReturnType']
+                                                                                })}
+                                                                                className={clsx(
+                                                                                    "px-4 py-2 rounded-lg text-sm font-medium transition-colors",
+                                                                                    agent.ragReturnType === type
+                                                                                        ? "bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 border-2 border-indigo-200 dark:border-indigo-800"
+                                                                                        : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
+                                                                                )}
+                                                                            >
+                                                                                {type.charAt(0).toUpperCase() + type.slice(1)}
+                                                                            </button>
+                                                                        ))}
+                                                                    </div>
+                                                                </div>
+
+                                                                <div className="space-y-2">
+                                                                    <label className={sectionHeaderStyles}>
+                                                                        Number of matches
+                                                                    </label>
+                                                                    <div className="flex items-center gap-3">
+                                                                        <input
+                                                                            type="number"
+                                                                            min="1"
+                                                                            max="20"
+                                                                            className="w-24 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 focus:border-indigo-500 dark:focus:border-indigo-400"
+                                                                            value={agent.ragK}
+                                                                            onChange={(e) => handleUpdate({
+                                                                                ...agent,
+                                                                                ragK: parseInt(e.target.value)
+                                                                            })}
+                                                                        />
+                                                                        <span className="text-sm text-gray-500 dark:text-gray-400">
+                                                                            matches
+                                                                        </span>
+                                                                    </div>
+                                                                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                                                                        Number of relevant chunks to retrieve (1-20)
+                                                                    </p>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </>
+                                        )}
+                                    </div>
+                                </div>
+                            )}
+
+                            <div className="space-y-4">
+                                <div className="flex items-center">
+                                    <label className={sectionHeaderStyles}>
+                                        Model
+                                    </label>
+                                    <div className="relative ml-2 group">
+                                        <Info 
+                                            className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer transition-colors"
+                                        />
+                                        <div className="absolute bottom-full left-0 mb-2 p-3 w-80 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs invisible group-hover:visible z-50">
+                                            <div className="mb-1 font-medium">Model Configuration</div>
+                                            Set this according to the PROVIDER_BASE_URL you have set in your .env file (such as your LiteLLM, gateway). 
+                                            <br />
+                                            <br />
+                                            E.g. LiteLLM&apos;s naming convention is like: &apos;claude-3-7-sonnet-latest&apos;, but you may have set alias model names or might be using a different provider like openrouter, openai etc. 
+                                            <br />
+                                            <br />
+                                            By default, the model is set to gpt-4.1, assuming your OpenAI API key is set in PROVIDER_API_KEY and PROVIDER_BASE_URL is not set.
+                                            <div className="absolute h-2 w-2 bg-white dark:bg-gray-800 transform rotate-45 -bottom-1 left-4 border-r border-b border-gray-200 dark:border-gray-700"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <Input
+                                    value={agent.model}
+                                    onChange={(e) => handleUpdate({
+                                        ...agent,
+                                        model: e.target.value as z.infer<typeof WorkflowAgent>['model']
+                                    })}
+                                />
+                            </div>
+
+                            {USE_TRANSFER_CONTROL_OPTIONS && (
+                                <div className="space-y-4">
+                                    <label className={sectionHeaderStyles}>
+                                        Conversation control after turn
+                                    </label>
+                                    <CustomDropdown
+                                        value={agent.controlType}
+                                        options={[
+                                            { key: "retain", label: "Retain control" },
+                                            { key: "relinquish_to_parent", label: "Relinquish to parent" },
+                                            { key: "relinquish_to_start", label: "Relinquish to 'start' agent" }
+                                        ]}
+                                        onChange={(value) => handleUpdate({
+                                            ...agent,
+                                            controlType: value as z.infer<typeof WorkflowAgent>['controlType']
+                                        })}
+                                    />
+                                </div>
                             )}
                         </div>
-                    </div>
-                )}
+                    )}
 
-                <div className="space-y-4">
-                    <div className="flex items-center">
-                        <label className={sectionHeaderStyles}>
-                            Model
-                        </label>
-                        <div className="relative ml-2 group">
-                            <Info 
-                                className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer transition-colors"
-                            />
-                            <div className="absolute bottom-full left-0 mb-2 p-3 w-80 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs invisible group-hover:visible z-50">
-                                <div className="mb-1 font-medium">Model Configuration</div>
-                                Set this according to the PROVIDER_BASE_URL you have set in your .env file (such as your LiteLLM, gateway). 
-                                <br />
-                                <br />
-                                E.g. LiteLLM&apos;s naming convention is like: &apos;claude-3-7-sonnet-latest&apos;, but you may have set alias model names or might be using a different provider like openrouter, openai etc. 
-                                <br />
-                                <br />
-                                By default, the model is set to gpt-4.1, assuming your OpenAI API key is set in PROVIDER_API_KEY and PROVIDER_BASE_URL is not set.
-                                <div className="absolute h-2 w-2 bg-white dark:bg-gray-800 transform rotate-45 -bottom-1 left-4 border-r border-b border-gray-200 dark:border-gray-700"></div>
+                    {activeTab === 'instructions' && (
+                        <div className="flex flex-col flex-1 min-h-0 h-0">
+                            <div className="flex items-center justify-between mb-4">
+                                <label className={sectionHeaderStyles}>
+                                    Instructions
+                                </label>
+                                <CustomButton
+                                    variant="primary"
+                                    size="sm"
+                                    onClick={() => setShowGenerateModal(true)}
+                                    startContent={<Sparkles className="w-4 h-4" />}
+                                >
+                                    Generate
+                                </CustomButton>
+                            </div>
+                            <div className="flex-1 min-h-0 h-0">
+                                <div className="text-sm h-full">
+                                    <EditableField
+                                        key="instructions"
+                                        value={agent.instructions}
+                                        onChange={(value) => {
+                                            handleUpdate({
+                                                ...agent,
+                                                instructions: value
+                                            });
+                                        }}
+                                        markdown
+                                        multiline
+                                        mentions
+                                        mentionsAtValues={atMentions}
+                                        showSaveButton={true}
+                                        showDiscardButton={true}
+                                        className="h-full min-h-0 border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20 overflow-auto"
+                                    />
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <Input
-                        value={agent.model}
-                        onChange={(e) => handleUpdate({
-                            ...agent,
-                            model: e.target.value as z.infer<typeof WorkflowAgent>['model']
-                        })}
-                    />
-                </div>
+                    )}
 
-                {USE_TRANSFER_CONTROL_OPTIONS && (
-                    <div className="space-y-4">
-                        <label className={sectionHeaderStyles}>
-                            Conversation control after turn
-                        </label>
-                        <CustomDropdown
-                            value={agent.controlType}
-                            options={[
-                                { key: "retain", label: "Retain control" },
-                                { key: "relinquish_to_parent", label: "Relinquish to parent" },
-                                { key: "relinquish_to_start", label: "Relinquish to 'start' agent" }
-                            ]}
-                            onChange={(value) => handleUpdate({
-                                ...agent,
-                                controlType: value as z.infer<typeof WorkflowAgent>['controlType']
-                            })}
-                        />
-                    </div>
-                )}
-                
+                    {activeTab === 'examples' && (
+                        <div className="flex flex-col flex-1 min-h-0 h-0">
+                            <label className={clsx(sectionHeaderStyles, "mb-4")}> 
+                                Examples
+                            </label>
+                            <div className="flex-1 min-h-0 h-0">
+                                <div className="text-sm h-full">
+                                    <EditableField
+                                        key="examples"
+                                        value={agent.examples || ""}
+                                        onChange={(value) => {
+                                            handleUpdate({
+                                                ...agent,
+                                                examples: value
+                                            });
+                                        }}
+                                        placeholder="Enter examples for this agent"
+                                        markdown
+                                        multiline
+                                        mentions
+                                        mentionsAtValues={atMentions}
+                                        showSaveButton={true}
+                                        showDiscardButton={true}
+                                        className="h-full min-h-0 border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20 overflow-auto"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
 
                 <PreviewModalProvider>
                     <GenerateInstructionsModal