fix(VLE): Show notes launcher and chatbot toggle in tabbed mode

src/app/chatbot/chatbot-launcher/chatbot-launcher.component.html

@@ -0,0 +1,3 @@
+<button matIconButton matTooltip="AI Assistant" (click)="emitToggleChatbot()">
+  <mat-icon>auto_awesome</mat-icon>
+</button>

src/app/chatbot/chatbot-launcher/chatbot-launcher.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChatbotLauncherComponent } from './chatbot-launcher.component';
+
+describe('ChatbotLauncherComponent', () => {
+  let component: ChatbotLauncherComponent;
+  let fixture: ComponentFixture<ChatbotLauncherComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChatbotLauncherComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChatbotLauncherComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chatbot/chatbot-launcher/chatbot-launcher.component.ts

@@ -0,0 +1,17 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+  selector: 'chatbot-launcher',
+  imports: [MatButtonModule, MatIconModule, MatTooltipModule],
+  templateUrl: './chatbot-launcher.component.html'
+})
+export class ChatbotLauncherComponent {
+  @Output() toggleChatbot = new EventEmitter<void>();
+
+  protected emitToggleChatbot(): void {
+    this.toggleChatbot.emit();
+  }
+}

src/assets/wise5/directives/group-tabs/group-tabs.component.html

@@ -1,10 +1,20 @@
-<mat-tab-group
-  [selectedIndex]="selectedTabIndex"
-  (focusChange)="goToGroupTab($event.index)"
-  animationDuration="0ms"
-  class="app-bg-bg"
->
-  @for (node of groupNodes; track node.id) {
-    <mat-tab [label]="node.title" [disabled]="node.disabled" />
-  }
-</mat-tab-group>
+<div class="flex justify-between gap-2">
+  <mat-tab-group
+    [selectedIndex]="selectedTabIndex"
+    (focusChange)="goToGroupTab($event.index)"
+    animationDuration="0ms"
+    class="flex-shrink w-full min-w-0"
+  >
+    @for (node of groupNodes; track node.id) {
+      <mat-tab [label]="node.title" [disabled]="node.disabled" />
+    }
+  </mat-tab-group>
+  <div class="flex">
+    @if (notebookConfig?.itemTypes.note.enabled) {
+      <notebook-launcher [notebookConfig]="notebookConfig" />
+    }
+    @if (chatbotEnabled) {
+      <chatbot-launcher (toggleChatbot)="emitToggleChatbot()" />
+    }
+  </div>
+</div>

src/assets/wise5/directives/group-tabs/group-tabs.component.ts

@@ -1,10 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { NodeStatusService } from '../../services/nodeStatusService';
 import { StudentDataService } from '../../services/studentDataService';
 import { VLEProjectService } from '../../vle/vleProjectService';
 import { NodeService } from '../../services/nodeService';
 import { MatTabsModule } from '@angular/material/tabs';
+import { NotebookLauncherComponent } from '../../../../app/notebook/notebook-launcher/notebook-launcher.component';
+import { ChatbotLauncherComponent } from '../../../../app/chatbot/chatbot-launcher/chatbot-launcher.component';
 
 class GroupNode {
   id: string;
@@ -14,12 +16,15 @@ class GroupNode {
 }
 
 @Component({
-  imports: [MatTabsModule],
+  imports: [ChatbotLauncherComponent, MatTabsModule, NotebookLauncherComponent],
   selector: 'group-tabs',
   templateUrl: './group-tabs.component.html'
 })
 export class GroupTabsComponent implements OnInit {
+  @Input() chatbotEnabled: boolean;
+  @Output() toggleChatbot = new EventEmitter<void>();
   protected groupNodes: GroupNode[] = [];
+  @Input() notebookConfig: any;
   protected selectedTabIndex: number;
   private subscriptions: Subscription = new Subscription();
 
@@ -68,4 +73,8 @@ export class GroupTabsComponent implements OnInit {
     const groupStartNodeId = this.groupNodes[groupTabIndex].startId;
     this.nodeService.setCurrentNode(groupStartNodeId);
   }
+
+  protected emitToggleChatbot(): void {
+    this.toggleChatbot.emit();
+  }
 }

src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html

@@ -77,9 +77,7 @@
       <notebook-launcher [notebookConfig]="notebookConfig" />
     }
     @if (chatbotEnabled) {
-      <button matIconButton matTooltip="AI Assistant" (click)="emitToggleChatbot()">
-        <mat-icon>auto_awesome</mat-icon>
-      </button>
+      <chatbot-launcher (toggleChatbot)="emitToggleChatbot()" />
     }
   </div>
 </div>

src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.ts

@@ -14,10 +14,12 @@ import { ProjectService } from '../../../../services/projectService';
 import { StudentDataService } from '../../../../services/studentDataService';
 import { Subscription } from 'rxjs';
 import { NotebookLauncherComponent } from '../../../../../../app/notebook/notebook-launcher/notebook-launcher.component';
+import { ChatbotLauncherComponent } from '../../../../../../app/chatbot/chatbot-launcher/chatbot-launcher.component';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   imports: [
+    ChatbotLauncherComponent,
     CommonModule,
     FormsModule,
     MatButtonModule,

src/assets/wise5/vle/vle.component.html

@@ -10,6 +10,7 @@
         (keydown.escape)="chatbotVisible = false"
         [(opened)]="chatbotVisible"
         class="sidebar"
+        [ngClass]="{ 'sidebar-tabbed': projectService.project.theme === 'tab' }"
       >
         <chatbot [config]="chatbotConfig" (closeChatbot)="chatbotVisible = false" />
       </mat-drawer>
@@ -58,12 +59,17 @@
 </ng-template>
 
 <ng-template #tabbedVLETemplate>
+  <group-tabs
+    [notebookConfig]="notebookConfig"
+    [chatbotEnabled]="chatbotEnabled"
+    (toggleChatbot)="chatbotVisible = !chatbotVisible"
+    class="app-bg-bg mat-elevation-z1"
+  />
   <div
     id="content"
     class="vle-content tabbed"
     [ngClass]="{ 'nav-view': layoutState === 'nav', 'node-view': layoutState === 'node' }"
   >
-    <group-tabs />
     <div class="tab-content">
       @if (runEndedAndLocked) {
         <run-ended-and-locked-message />

src/assets/wise5/vle/vle.component.scss

@@ -12,7 +12,7 @@ $tab-bar-height: 48px;
   right: 0;
 }
 
-step-tools {
+step-tools, group-tabs {
   display: block;
   position: fixed;
   left: 0;
@@ -34,32 +34,16 @@ step-tools {
   top: variables.$toolbar-height + variables.$secondary-toolbar-height;
 }
 
-.node-view {
-  &.tabbed {
-    position: absolute;
-    top: variables.$toolbar-height;
-    margin: 0;
-    bottom: 0;
-  }
-}
-
 .tabbed {
-  padding: 0;
+  top: variables.$toolbar-height + variables.$secondary-toolbar-height + 8px;
 }
 
 group-tabs {
-  position: absolute;
-  width: 100%;
+  height: auto;
 }
 
 .tab-content {
-  top: $tab-bar-height + 1;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow-y: auto;
-  padding-bottom: 104px;
+  padding-bottom: 64px;
 }
 
 node, navigation {
@@ -119,4 +103,8 @@ run-ended-and-locked-message {
 
 .sidebar {
   top: variables.$toolbar-height + variables.$secondary-toolbar-height + 2;
+
+  &.sidebar-tabbed {
+    top: variables.$toolbar-height + variables.$secondary-toolbar-height + 8px;
+  }
 }