diff --git a/frontend/src/components/experiment_builder/structured_prompt_editor.ts b/frontend/src/components/experiment_builder/structured_prompt_editor.ts index 571f27370..10cf5c752 100644 --- a/frontend/src/components/experiment_builder/structured_prompt_editor.ts +++ b/frontend/src/components/experiment_builder/structured_prompt_editor.ts @@ -13,19 +13,21 @@ import {renderConditionEditor} from '../../shared/condition_editor.utils'; import { Condition, + ConditionOperator, ConditionTarget, + createConditionGroup, + createDefaultPromptItemGroup, + createDefaultStageContextPromptItem, + createShuffleConfig, + getConditionTargetsFromStages, PromptItem, - PromptItemType, PromptItemGroup, + PromptItemType, + SeedStrategy, + ShuffleConfig, StageContextPromptItem, StageKind, TextPromptItem, - createDefaultStageContextPromptItem, - createDefaultPromptItemGroup, - getConditionTargetsFromStages, - ShuffleConfig, - SeedStrategy, - createShuffleConfig, } from '@deliberation-lab/utils'; import {styles} from './structured_prompt_editor.scss'; @@ -211,13 +213,32 @@ export class EditorComponent extends MobxLitElement { } const conditionTargets = this.getConditionTargets(); + const supportsConditions = + this.supportsConditions() && conditionTargets.length > 0; + + return items.map((item, index) => { + const hasCondition = item.condition !== undefined; - return items.map( - (item, index) => html` + return html`
${this.renderItemEditor(item)}
+ ${supportsConditions && item.type !== PromptItemType.GROUP + ? html` + this.toggleCondition(item)} + > + + ` + : nothing}
- ${this.renderPromptItemCondition(item, conditionTargets)} + ${hasCondition + ? this.renderPromptItemCondition(item, conditionTargets) + : nothing}
- `, - ); + `; + }); + } + + private toggleCondition(item: PromptItem) { + if (item.condition !== undefined) { + // Remove condition + this.updatePromptItem(item, {condition: undefined}); + } else { + // Add an empty condition group - user will add conditions via the editor + this.updatePromptItem(item, { + condition: createConditionGroup(ConditionOperator.AND, []), + }); + } } private renderPromptItemCondition( item: PromptItem, conditionTargets: ConditionTarget[], ) { - // Don't show condition editor for GROUP items (they contain other items that can have conditions) - if (item.type === PromptItemType.GROUP) { - return nothing; - } - - // Conditions are only supported for private chat stages (not group chat) - if (!this.supportsConditions()) { - return nothing; - } - const onConditionChange = (condition: Condition | undefined) => { this.updatePromptItem(item, {condition}); }; - const conditionEditor = renderConditionEditor({ - condition: item.condition, - targets: conditionTargets, - canEdit: this.experimentEditor.canEditStages, - onConditionChange, - }); - - if (conditionEditor === nothing) { - return nothing; - } - - return html`
${conditionEditor}
`; + return html` +
+ ${renderConditionEditor({ + condition: item.condition, + targets: conditionTargets, + canEdit: this.experimentEditor.canEditStages, + onConditionChange, + })} +
+ `; } private renderTextPromptItemEditor(item: TextPromptItem) {