Merge branch 'organize-activity-advanced-authoring-using-tabs' into ai-summary-override-default-system-prompt

~ Conflicts:
~	src/messages.xlf

Author: hirokiterashima

src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts

@@ -12,8 +12,11 @@ export abstract class EditAdvancedComponentComponent {
   protected aiEnabled: boolean;
   component: Component;
   componentContent: ComponentContent;
+  protected selectedTabIndex: number = 0;
+
   @Input() componentId: string;
   @Input() nodeId: string;
+  @Input() tab: string = 'general';
 
   private componentServiceLookupService = inject(ComponentServiceLookupService);
 
@@ -40,6 +43,15 @@ export abstract class EditAdvancedComponentComponent {
       }
     }
     this.teacherProjectService.uiChanged();
+
+    switch (this.tab) {
+      case 'visibility':
+        this.selectedTabIndex = 1;
+        break;
+      default:
+        this.selectedTabIndex = 0;
+        break;
+    }
   }
 
   setShowSubmitButtonValue(show: boolean = false): void {

src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.spec.ts

@@ -20,9 +20,12 @@ describe('EditComponentAdvancedComponent', () => {
         {
           provide: MAT_DIALOG_DATA,
           useValue: {
-            content: { type: 'ShowMyWork' },
-            id: 'component1',
-            nodeId: 'node1'
+            component: {
+              content: { type: 'ShowMyWork' },
+              id: 'component1',
+              nodeId: 'node1'
+            },
+            tab: 'general'
           }
         },
         {

src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts

@@ -26,18 +26,22 @@ export class EditComponentAdvancedComponent {
   private componentRef: ComponentRef<WISEComponent>;
   constructor(
     private applicationRef: ApplicationRef,
-    @Inject(MAT_DIALOG_DATA) protected component: WISEComponent,
+    @Inject(MAT_DIALOG_DATA) protected data: { component: WISEComponent; tab?: string },
     private injector: EnvironmentInjector
   ) {}
 
   ngAfterViewInit(): void {
-    this.componentRef = createComponent(components[this.component.content.type].authoringAdvanced, {
-      hostElement: this.componentElementRef.nativeElement,
-      environmentInjector: this.injector
-    });
+    this.componentRef = createComponent(
+      components[this.data.component.content.type].authoringAdvanced,
+      {
+        hostElement: this.componentElementRef.nativeElement,
+        environmentInjector: this.injector
+      }
+    );
     Object.assign(this.componentRef.instance, {
-      nodeId: this.component.nodeId,
-      componentId: this.component.id
+      nodeId: this.data.component.nodeId,
+      componentId: this.data.component.id,
+      tab: this.data.tab
     });
     this.applicationRef.attachView(this.componentRef.hostView);
   }

src/assets/wise5/authoringTool/components/edit-component-advanced-button/edit-component-advanced-button.component.ts

@@ -20,7 +20,7 @@ export class EditComponentAdvancedButtonComponent {
 
   protected showComponentAdvancedAuthoring(): void {
     this.dialog.open(EditComponentAdvancedComponent, {
-      data: new WiseComponent(this.componentContent, this.nodeId),
+      data: { component: new WiseComponent(this.componentContent, this.nodeId), tab: 'general' },
       width: '80%'
     });
   }

src/assets/wise5/authoringTool/components/visibility-constraint-icon/visibility-constraint-icon.component.ts

@@ -0,0 +1,36 @@
+import { Component, inject, Input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component';
+import { Component as WiseComponent } from '../../../common/Component';
+import { ComponentContent } from '../../../common/ComponentContent';
+
+@Component({
+  imports: [MatButtonModule, MatIconModule, MatTooltipModule],
+  selector: 'visibility-constraint-icon',
+  template: `<button
+    mat-icon-button
+    (click)="openVisibilityConstraintAuthoring()"
+    [matTooltip]="tooltip"
+    matTooltipPosition="above"
+  >
+    <mat-icon>visibility_off</mat-icon>
+  </button>`
+})
+export class VisibilityConstraintIconComponent {
+  private dialog = inject(MatDialog);
+
+  @Input() componentContent: ComponentContent;
+  @Input() nodeId: string;
+
+  protected tooltip = $localize`This activity is displayed to the student when certain conditions are met. Click to view and edit the conditions.`;
+
+  protected openVisibilityConstraintAuthoring(): void {
+    this.dialog.open(EditComponentAdvancedComponent, {
+      data: { component: new WiseComponent(this.componentContent, this.nodeId), tab: 'visibility' },
+      width: '80%'
+    });
+  }
+}

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html

@@ -49,6 +49,9 @@
               <span class="heavy">{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</span>
             </div>
             <toggle-component-tag [component]="component" />
+            @if (hasVisibilityConstraint(component)) {
+              <visibility-constraint-icon [componentContent]="component" [nodeId]="nodeId" />
+            }
             <span class="flex grow"></span>
             <div class="text flex justify-end items-center">
               @if (component.id === editingComponentId) {

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts

@@ -27,6 +27,7 @@ import { ComponentAuthoringComponent } from '../../components/component-authorin
 import { RouterModule } from '@angular/router';
 import { EditComponentAdvancedButtonComponent } from '../../components/edit-component-advanced-button/edit-component-advanced-button.component';
 import { ToggleComponentTagComponent } from '../../components/toggle-component-tag/toggle-component-tag.component';
+import { VisibilityConstraintIconComponent } from '../../components/visibility-constraint-icon/visibility-constraint-icon.component';
 
 @Component({
   imports: [
@@ -47,7 +48,8 @@ import { ToggleComponentTagComponent } from '../../components/toggle-component-t
     MatTooltipModule,
     RouterModule,
     TeacherNodeIconComponent,
-    ToggleComponentTagComponent
+    ToggleComponentTagComponent,
+    VisibilityConstraintIconComponent
   ],
   styleUrl: './node-authoring.component.scss',
   templateUrl: './node-authoring.component.html'
@@ -227,6 +229,10 @@ export class NodeAuthoringComponent implements OnInit {
     return this.componentTypeService.getComponentTypeLabel(componentType);
   }
 
+  protected hasVisibilityConstraint(component: ComponentContent): boolean {
+    return component.constraints?.length > 0;
+  }
+
   private setShowSaveButtonForAllComponents(node: Node, showSaveButton: boolean): void {
     node.components
       .filter((component) =>

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.ts

@@ -100,9 +100,6 @@ export class ComponentSummaryComponent {
       (this.COMPONENTS_WITH_SUMMARY.includes(this.component.type) ||
         this.showScoreSummary ||
         this.hasIdeaRubricData);
-    if (this.component.type === 'OpenResponse') {
-      this.showSummary &&= this.aiEnabled;
-    }
   }
 
   private setSource(): void {

src/assets/wise5/components/aiChat/ai-chat-student-message/ai-chat-student-message.component.html

@@ -6,7 +6,7 @@
     i18n-aria-label
     >account_circle</mat-icon
   >
-  <div class="flex justify-end flex-grow">
+  <div class="flex justify-end flex-1">
     <div class="response-text selected-bg-bg">
       <div class="mat-small secondary-text poster">{{ displayNames }}</div>
       <div [innerHtml]="message.content"></div>

src/assets/wise5/components/aiChat/aiChatService.ts

@@ -17,9 +17,10 @@ export class AiChatService extends ComponentService {
   createComponent(): any {
     const component: any = super.createComponent();
     component.type = 'AiChat';
-    component.computerAvatarSettings = this.computerAvatarService.getDefaultComputerAvatarSettings();
+    component.computerAvatarSettings =
+      this.computerAvatarService.getDefaultComputerAvatarSettings();
     component.isComputerAvatarEnabled = false;
-    component.model = 'gpt-4';
+    component.model = 'gpt-5.4-mini';
     component.systemPrompt = '';
     return component;
   }