From ce3a86616b68ff80796113fe4b7792c532218815 Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Thu, 22 Jan 2026 14:45:55 -0800
Subject: [PATCH 1/3] fix(VLE): Show notes launcher and chatbot toggle in
 tabbed mode

---
 .../chatbot-launcher.component.html           |  3 ++
 .../chatbot-launcher.component.scss           |  0
 .../chatbot-launcher.component.spec.ts        | 22 ++++++++++++++
 .../chatbot-launcher.component.ts             | 18 +++++++++++
 .../group-tabs/group-tabs.component.html      | 30 ++++++++++++-------
 .../group-tabs/group-tabs.component.ts        | 13 ++++++--
 .../stepTools/step-tools.component.html       |  4 +--
 .../stepTools/step-tools.component.ts         |  2 ++
 src/assets/wise5/vle/vle.component.html       |  8 ++++-
 src/assets/wise5/vle/vle.component.scss       | 28 +++++------------
 10 files changed, 92 insertions(+), 36 deletions(-)
 create mode 100644 src/app/chatbot/chatbot-launcher/chatbot-launcher.component.html
 create mode 100644 src/app/chatbot/chatbot-launcher/chatbot-launcher.component.scss
 create mode 100644 src/app/chatbot/chatbot-launcher/chatbot-launcher.component.spec.ts
 create mode 100644 src/app/chatbot/chatbot-launcher/chatbot-launcher.component.ts

diff --git a/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.html b/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.html
new file mode 100644
index 00000000000..bf67f9dae7f
--- /dev/null
+++ b/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>
diff --git a/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.scss b/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.spec.ts b/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.spec.ts
new file mode 100644
index 00000000000..6d231ef3548
--- /dev/null
+++ b/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.spec.ts
@@ -0,0 +1,22 @@
+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();
+  });
+});
diff --git a/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.ts b/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.ts
new file mode 100644
index 00000000000..443616fa89f
--- /dev/null
+++ b/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.ts
@@ -0,0 +1,18 @@
+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',
+  styleUrl: './chatbot-launcher.component.scss'
+})
+export class ChatbotLauncherComponent {
+  @Output() toggleChatbot = new EventEmitter<void>();
+
+  emitToggleChatbot(): void {
+    this.toggleChatbot.emit();
+  }
+}
diff --git a/src/assets/wise5/directives/group-tabs/group-tabs.component.html b/src/assets/wise5/directives/group-tabs/group-tabs.component.html
index 70c880376f1..8e758b2f1e4 100644
--- a/src/assets/wise5/directives/group-tabs/group-tabs.component.html
+++ b/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 gap-2">
+  <mat-tab-group
+    [selectedIndex]="selectedTabIndex"
+    (focusChange)="goToGroupTab($event.index)"
+    animationDuration="0ms"
+    class="flex-grow"
+  >
+    @for (node of groupNodes; track node.id) {
+      <mat-tab [label]="node.title" [disabled]="node.disabled" />
+    }
+  </mat-tab-group>
+  <div>
+    @if (notebookConfig?.itemTypes.note.enabled) {
+      <notebook-launcher [notebookConfig]="notebookConfig" />
+    }
+    @if (chatbotEnabled) {
+      <chatbot-launcher (toggleChatbot)="emitToggleChatbot()" />
+    }
+  </div>
+</div>
diff --git a/src/assets/wise5/directives/group-tabs/group-tabs.component.ts b/src/assets/wise5/directives/group-tabs/group-tabs.component.ts
index 9c33e3275aa..54cf50c99e3 100644
--- a/src/assets/wise5/directives/group-tabs/group-tabs.component.ts
+++ b/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();
+  }
 }
diff --git a/src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html b/src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html
index d7a195810e9..a6b823e7bf4 100644
--- a/src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html
+++ b/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>
diff --git a/src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.ts b/src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.ts
index 52520237b2d..9348d58b98e 100644
--- a/src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.ts
+++ b/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,
diff --git a/src/assets/wise5/vle/vle.component.html b/src/assets/wise5/vle/vle.component.html
index ca7676c76af..3303720ec91 100644
--- a/src/assets/wise5/vle/vle.component.html
+++ b/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 />
diff --git a/src/assets/wise5/vle/vle.component.scss b/src/assets/wise5/vle/vle.component.scss
index ead5498b6a6..74b96cf0cd7 100644
--- a/src/assets/wise5/vle/vle.component.scss
+++ b/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;
+  }
 }

From 78de1d29bdf871137d7b94d1981a54dacbddbfab Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Fri, 23 Jan 2026 12:03:16 -0800
Subject: [PATCH 2/3] Ensure tabs can't hide notes and chatbot buttons

---
 .../wise5/directives/group-tabs/group-tabs.component.html   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/assets/wise5/directives/group-tabs/group-tabs.component.html b/src/assets/wise5/directives/group-tabs/group-tabs.component.html
index 8e758b2f1e4..34d76b943f5 100644
--- a/src/assets/wise5/directives/group-tabs/group-tabs.component.html
+++ b/src/assets/wise5/directives/group-tabs/group-tabs.component.html
@@ -1,15 +1,15 @@
-<div class="flex gap-2">
+<div class="flex justify-between gap-2">
   <mat-tab-group
     [selectedIndex]="selectedTabIndex"
     (focusChange)="goToGroupTab($event.index)"
     animationDuration="0ms"
-    class="flex-grow"
+    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>
+  <div class="flex">
     @if (notebookConfig?.itemTypes.note.enabled) {
       <notebook-launcher [notebookConfig]="notebookConfig" />
     }

From bd3f2e446ee3b4a6ac6ded0efcd52a73116c2650 Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Fri, 23 Jan 2026 12:05:20 -0800
Subject: [PATCH 3/3] Clean up and remove unsued file

---
 .../chatbot/chatbot-launcher/chatbot-launcher.component.scss | 0
 .../chatbot-launcher/chatbot-launcher.component.spec.ts      | 1 -
 .../chatbot/chatbot-launcher/chatbot-launcher.component.ts   | 5 ++---
 3 files changed, 2 insertions(+), 4 deletions(-)
 delete mode 100644 src/app/chatbot/chatbot-launcher/chatbot-launcher.component.scss

diff --git a/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.scss b/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.spec.ts b/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.spec.ts
index 6d231ef3548..83deeb79d83 100644
--- a/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.spec.ts
+++ b/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ChatbotLauncherComponent } from './chatbot-launcher.component';
 
 describe('ChatbotLauncherComponent', () => {
diff --git a/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.ts b/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.ts
index 443616fa89f..2fa022fcb3f 100644
--- a/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.ts
+++ b/src/app/chatbot/chatbot-launcher/chatbot-launcher.component.ts
@@ -6,13 +6,12 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 @Component({
   selector: 'chatbot-launcher',
   imports: [MatButtonModule, MatIconModule, MatTooltipModule],
-  templateUrl: './chatbot-launcher.component.html',
-  styleUrl: './chatbot-launcher.component.scss'
+  templateUrl: './chatbot-launcher.component.html'
 })
 export class ChatbotLauncherComponent {
   @Output() toggleChatbot = new EventEmitter<void>();
 
-  emitToggleChatbot(): void {
+  protected emitToggleChatbot(): void {
     this.toggleChatbot.emit();
   }
 }