Files
LocalAGI/webui/react-ui/src/components/agent-form-sections/PromptsGoalsSection.jsx
2025-04-01 14:36:33 +01:00

82 lines
2.1 KiB
JavaScript

import React from 'react';
import FormFieldDefinition from '../common/FormFieldDefinition';
import DynamicPromptForm from '../DynamicPromptForm';
import DynamicPromptForm from '../DynamicPromptForm';
/**
* Prompts & Goals section of the agent form
*
* @param {Object} props Component props
* @param {Object} props.formData Current form data values
* @param {Function} props.handleInputChange Handler for input changes
* @param {boolean} props.isGroupForm Whether the form is for a group
* @param {Object} props.metadata Field metadata from the backend
*/
const PromptsGoalsSection = ({
formData,
handleInputChange,
isGroupForm,
metadata,
onAddPrompt,
onRemovePrompt,
handleDynamicPromptChange
}) => {
// Get fields based on metadata and form context
const getFields = () => {
if (!metadata?.PromptsGoalsSection) {
return [];
}
// If in group form, filter out system_prompt
if (isGroupForm) {
return metadata.PromptsGoalsSection.filter(field => field.name !== 'system_prompt');
}
return metadata.PromptsGoalsSection;
};
// Handle field value changes
const handleFieldChange = (name, value) => {
const field = getFields().find(f => f.name === name);
if (field && field.type === 'checkbox') {
handleInputChange({
target: {
name,
type: 'checkbox',
checked: value === 'true'
}
});
} else {
handleInputChange({
target: {
name,
value
}
});
}
};
return (
<div id="prompts-section">
<h3 className="section-title">Prompts & Goals</h3>
<FormFieldDefinition
fields={getFields()}
values={formData}
onChange={handleFieldChange}
idPrefix="prompts_"
/>
<DynamicPromptForm
prompts={formData.dynamicPrompts || []}
onAddPrompt={onAddPrompt}
onRemovePrompt={onRemovePrompt}
onChange={handleDynamicPromptChange}
fieldGroups={metadata?.dynamicPrompts || []}
/>
</div>
);
};
export default PromptsGoalsSection;