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`
-
- Display Condition - alpha -
+
Display Condition
${hasCondition ? html` diff --git a/frontend/src/components/stages/survey_editor.ts b/frontend/src/components/stages/survey_editor.ts index 07512e743..b0d8c7a16 100644 --- a/frontend/src/components/stages/survey_editor.ts +++ b/frontend/src/components/stages/survey_editor.ts @@ -223,7 +223,6 @@ export class SurveyEditor extends MobxLitElement { return renderConditionEditor({ condition: question.condition, targets, - showAlphaFeatures: this.authService.showAlphaFeatures, canEdit: this.experimentEditor.canEditStages, onConditionChange, }); diff --git a/frontend/src/shared/condition_editor.utils.ts b/frontend/src/shared/condition_editor.utils.ts index 15b2e469a..5c9ccaa4b 100644 --- a/frontend/src/shared/condition_editor.utils.ts +++ b/frontend/src/shared/condition_editor.utils.ts @@ -7,20 +7,17 @@ import '../components/stages/condition_editor'; export interface RenderConditionEditorOptions { condition: Condition | undefined; targets: ConditionTarget[]; - showAlphaFeatures: boolean | undefined; canEdit: boolean; onConditionChange: (condition: Condition | undefined) => void; } /** * Render a condition editor with standard checks. - * Returns nothing if alpha features are disabled or there are no valid targets. + * Returns nothing if there are no valid targets. */ export function renderConditionEditor(options: RenderConditionEditorOptions) { - const {condition, targets, showAlphaFeatures, canEdit, onConditionChange} = - options; + const {condition, targets, canEdit, onConditionChange} = options; - if (!showAlphaFeatures) return nothing; // Treats undefined as false if (targets.length === 0) return nothing; return html` diff --git a/utils/src/utils/condition.utils.ts b/utils/src/utils/condition.utils.ts index dd976dfcd..831438675 100644 --- a/utils/src/utils/condition.utils.ts +++ b/utils/src/utils/condition.utils.ts @@ -313,10 +313,6 @@ export function getConditionTargetsFromStages( return targets; } -// ============================================================================ -// Condition Sanitization Utilities -// ============================================================================ - /** * Sanitize survey question conditions to ensure they only reference valid targets. *