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) {