Skip to main content
Glama
index.tsx3.69 kB
import { useFormContext } from 'react-hook-form'; import { AgentTools } from '@/app/builder/step-settings/agent-settings/agent-tools'; import { FormField } from '@/components/ui/form'; import { Skeleton } from '@/components/ui/skeleton'; import { AgentStructuredOutput } from '@/features/agents/structured-output'; import { AgentPieceProps, isNil, PieceAction, PieceActionSettings, } from '@activepieces/shared'; import { selectGenericFormComponentForProperty, SelectGenericFormComponentForPropertyParams, } from '../../piece-properties/properties-utils'; import { useStepSettingsContext } from '../step-settings-context'; type AgentSettingsProps = { step: PieceAction; flowId: string; readonly: boolean; }; export const AgentSettings = (props: AgentSettingsProps) => { const { pieceModel, updateFormSchema, updatePropertySettingsSchema } = useStepSettingsContext(); const form = useFormContext(); if (isNil(pieceModel)) { return ( <div className="space-y-3"> {Array.from({ length: 5 }).map((_, index) => ( <div className="space-y-2" key={index}> <div className="flex justify-between items-center"> <Skeleton className="w-40 h-4" /> <Skeleton className="size-8" /> </div> <Skeleton className="w-full h-12" /> </div> ))} </div> ); } const actionName = (props.step.settings as PieceActionSettings) .actionName as string; const selectedAction = pieceModel.actions[actionName]; const properties = (({ auth, ...rest }) => rest)(selectedAction.props); return ( <div className="w-full"> <div className="flex flex-col gap-4 w-full"> {Object.keys(properties).map((propertyName) => { return ( <FormField key={propertyName} name={`settings.input.${propertyName}`} control={form.control} render={({ field }) => selectAgentFormComponentForProperty({ field, allowDynamicValues: false, dynamicInputModeToggled: false, markdownVariables: {}, propertyName: propertyName, inputName: `settings.input.${propertyName}`, property: properties[propertyName], useMentionTextInput: true, disabled: props.readonly, form: form, dynamicPropsInfo: { pieceName: props.step.settings.pieceName, pieceVersion: props.step.settings.pieceVersion, actionOrTriggerName: actionName, placedInside: 'stepSettings', updateFormSchema, updatePropertySettingsSchema, }, propertySettings: null, }) } /> ); })} </div> </div> ); }; type selectFormComponentForPropertyParams = SelectGenericFormComponentForPropertyParams; const selectAgentFormComponentForProperty = ( params: selectFormComponentForPropertyParams, ) => { const { propertyName, disabled, field } = params; switch (propertyName) { case AgentPieceProps.AGENT_TOOLS: { return <AgentTools disabled={disabled} toolsField={field} />; } case AgentPieceProps.STRUCTURED_OUTPUT: { return ( <AgentStructuredOutput disabled={disabled} structuredOutputField={field} /> ); } default: { console.log(params.inputName); return selectGenericFormComponentForProperty(params); } } };

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/activepieces/activepieces'

If you have feedback or need assistance with the MCP directory API, please join our Discord server