diff --git a/frontend/src/components/experiment_builder/structured_prompt_editor.ts b/frontend/src/components/experiment_builder/structured_prompt_editor.ts
index 6bf7bd1f9..10cf5c752 100644
--- a/frontend/src/components/experiment_builder/structured_prompt_editor.ts
+++ b/frontend/src/components/experiment_builder/structured_prompt_editor.ts
@@ -8,25 +8,26 @@ import {CSSResultGroup, html, nothing, TemplateResult} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import {core} from '../../core/core';
-import {AuthService} from '../../services/auth.service';
import {ExperimentEditor} from '../../services/experiment.editor';
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';
@@ -36,7 +37,6 @@ import {styles} from './structured_prompt_editor.scss';
export class EditorComponent extends MobxLitElement {
static override styles: CSSResultGroup = [styles];
- private readonly authService = core.getService(AuthService);
private readonly experimentEditor = core.getService(ExperimentEditor);
@property() prompt: PromptItem[] = [];
@@ -213,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,
- showAlphaFeatures: this.authService.showAlphaFeatures,
- 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) {
diff --git a/frontend/src/components/stages/condition_editor.scss b/frontend/src/components/stages/condition_editor.scss
index 788530bb7..a17c27e2d 100644
--- a/frontend/src/components/stages/condition_editor.scss
+++ b/frontend/src/components/stages/condition_editor.scss
@@ -5,10 +5,6 @@
display: block;
}
-.alpha {
- @include common.mode-tag;
-}
-
.condition-editor {
padding: common.$spacing-small;
border: 1px solid var(--md-sys-color-outline-variant);
diff --git a/frontend/src/components/stages/condition_editor.ts b/frontend/src/components/stages/condition_editor.ts
index 69f245154..85988626c 100644
--- a/frontend/src/components/stages/condition_editor.ts
+++ b/frontend/src/components/stages/condition_editor.ts
@@ -42,10 +42,7 @@ export class ConditionEditor extends MobxLitElement {
return html`