Merge pull request #919 from PAIR-code/alpha-conditional-survey

Move conditional survey feature out of alpha mode

Author: vivtsai

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`
         <div class="prompt-item-wrapper ${isNested ? 'nested' : ''}">
           <div class="prompt-item-row">
             <div class="prompt-item-editor">${this.renderItemEditor(item)}</div>
             <div class="prompt-item-actions">
+              ${supportsConditions && item.type !== PromptItemType.GROUP
+                ? html`
+                    <pr-icon-button
+                      icon="rule"
+                      color=${hasCondition ? 'primary' : 'neutral'}
+                      variant="default"
+                      size="small"
+                      title=${hasCondition
+                        ? 'Remove display condition'
+                        : 'Add display condition'}
+                      @click=${() => this.toggleCondition(item)}
+                    >
+                    </pr-icon-button>
+                  `
+                : nothing}
               <pr-icon-button
                 icon="arrow_upward"
                 color="neutral"
@@ -246,43 +265,44 @@ export class EditorComponent extends MobxLitElement {
               </pr-icon-button>
             </div>
           </div>
-          ${this.renderPromptItemCondition(item, conditionTargets)}
+          ${hasCondition
+            ? this.renderPromptItemCondition(item, conditionTargets)
+            : nothing}
         </div>
-      `,
-    );
+      `;
+    });
+  }
+
+  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` <div class="prompt-item-condition">${conditionEditor}</div> `;
+    return html`
+      <div class="prompt-item-condition">
+        ${renderConditionEditor({
+          condition: item.condition,
+          targets: conditionTargets,
+          canEdit: this.experimentEditor.canEditStages,
+          onConditionChange,
+        })}
+      </div>
+    `;
   }
 
   private renderTextPromptItemEditor(item: TextPromptItem) {

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

frontend/src/components/stages/condition_editor.ts

@@ -42,10 +42,7 @@ export class ConditionEditor extends MobxLitElement {
     return html`
       <div class="condition-editor ${this.disabled ? 'disabled' : ''}">
         <div class="header">
-          <div class="title">
-            Display Condition
-            <span class="alpha">alpha</span>
-          </div>
+          <div class="title">Display Condition</div>
           ${hasCondition
             ? html`
                 <md-text-button @click=${this.removeCondition}>

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,
     });

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`

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.
  *