From 21b10552fc6809c92a3b871ce17d8cf652c4c1f2 Mon Sep 17 00:00:00 2001
From: Geoffrey Kwan <geoffreykwan@gmail.com>
Date: Mon, 18 Sep 2023 18:03:16 -0400
Subject: [PATCH] feat(Question Bank): Click question to add to student
 response input (#1416)

Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>
---
 .../edit-question-bank-rules.component.html   | 26 +++++--
 ...edit-question-bank-rules.component.spec.ts | 36 +++++++--
 .../edit-question-bank-rules.component.ts     | 13 +++-
 .../edit-question-bank.component.html         | 29 ++++++-
 .../edit-question-bank.component.scss         |  2 +-
 .../edit-question-bank.component.ts           | 20 ++++-
 .../peer-chat-chat-box.component.html         |  4 +-
 .../peer-chat-chat-box.component.ts           | 39 +++++-----
 .../peer-chat-grading.component.html          |  2 +
 .../peer-chat-message-input.component.html    |  1 +
 .../peer-chat-message-input.component.ts      | 34 +++++---
 .../peer-chat-question-bank/Question.ts       | 10 +++
 .../peer-chat-question-bank/QuestionBank.ts   |  3 +
 .../QuestionBankRule.ts                       |  3 +-
 .../peer-chat-question-bank.component.html    | 64 +++++++++++++--
 .../peer-chat-question-bank.component.scss    | 16 +++-
 .../peer-chat-question-bank.component.spec.ts |  4 +-
 .../peer-chat-question-bank.component.ts      | 20 ++++-
 .../question-bank-helper.ts                   |  8 ++
 .../questionBank.service.ts                   | 13 ++++
 .../peer-chat-show-work.component.html        |  2 +
 .../peer-chat-show-work.component.ts          | 40 ++++++----
 .../peer-chat-student.component.html          |  4 +
 .../peer-chat-student.component.ts            | 34 +++++++-
 .../components/peerChat/peer-chat.module.ts   |  4 +-
 .../components/peerChat/peerChatService.ts    |  2 +-
 src/messages.xlf                              | 77 ++++++++++++++-----
 27 files changed, 407 insertions(+), 103 deletions(-)
 create mode 100644 src/assets/wise5/components/peerChat/peer-chat-question-bank/Question.ts
 create mode 100644 src/assets/wise5/components/peerChat/peer-chat-question-bank/question-bank-helper.ts
 create mode 100644 src/assets/wise5/components/peerChat/peer-chat-question-bank/questionBank.service.ts

diff --git a/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html b/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html
index b09cbbb79d..ee4bac274c 100644
--- a/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html
+++ b/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html
@@ -63,13 +63,25 @@ <h5 fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
                 <mat-label *ngIf="rule.questions.length > 1" i18n
                   >Question #{{ questionIndex + 1 }}</mat-label
                 >
-                <textarea
-                  matInput
-                  [(ngModel)]="rule.questions[questionIndex]"
-                  (ngModelChange)="inputChanged.next($event)"
-                  cdkTextareaAutosize
-                >
-                </textarea>
+                <ng-container *ngIf="version === 2; then version2; else version1"></ng-container>
+                <ng-template #version2>
+                  <textarea
+                    matInput
+                    [(ngModel)]="rule.questions[questionIndex].text"
+                    (ngModelChange)="inputChanged.next($event)"
+                    cdkTextareaAutosize
+                  >
+                  </textarea>
+                </ng-template>
+                <ng-template #version1>
+                  <textarea
+                    matInput
+                    [(ngModel)]="rule.questions[questionIndex]"
+                    (ngModelChange)="inputChanged.next($event)"
+                    cdkTextareaAutosize
+                  >
+                  </textarea>
+                </ng-template>
                 <button
                   mat-icon-button
                   matSuffix
diff --git a/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.spec.ts b/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.spec.ts
index 0127e9bc15..222079648a 100644
--- a/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.spec.ts
+++ b/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.spec.ts
@@ -7,11 +7,12 @@ import { QuestionBankRule } from '../../../assets/wise5/components/peerChat/peer
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
 import { StudentTeacherCommonServicesModule } from '../../student-teacher-common-services.module';
 import { EditQuestionBankRulesComponent } from './edit-question-bank-rules.component';
+import { Question } from '../../../assets/wise5/components/peerChat/peer-chat-question-bank/Question';
 
 let component: EditQuestionBankRulesComponent;
 let fixture: ComponentFixture<EditQuestionBankRulesComponent>;
 let projectService: TeacherProjectService;
-let nodeChangedSpy;
+let nodeChangedSpy: jasmine.Spy;
 
 describe('EditQuestionBankRulesComponent', () => {
   beforeEach(async () => {
@@ -42,19 +43,42 @@ describe('EditQuestionBankRulesComponent', () => {
 
 function addNewFeedbackToRule() {
   describe('addNewFeedbackToRule()', () => {
-    it('should add new question to rule', () => {
-      const rule = new QuestionBankRule({ questions: ['Q1'] });
+    addNewFeedbackToRuleVersion1();
+    addNewFeedbackToRuleVersion2();
+  });
+}
+
+function addNewFeedbackToRuleVersion1() {
+  describe('using question bank content version 1', () => {
+    it('adds new question to rule', () => {
+      component.version = undefined;
+      const rule = new QuestionBankRule({ questions: [] });
       component.addNewFeedbackToRule(rule);
       expect(nodeChangedSpy).toHaveBeenCalled();
-      expect(rule.questions.length).toEqual(2);
-      expect(rule.questions[1]).toEqual('');
+      expect(rule.questions.length).toEqual(1);
+      expect(rule.questions[0]).toEqual('');
+    });
+  });
+}
+
+function addNewFeedbackToRuleVersion2() {
+  describe('using question bank content version 2', () => {
+    it('adds new question to rule', () => {
+      component.version = 2;
+      const rule = new QuestionBankRule({ questions: [] });
+      component.addNewFeedbackToRule(rule);
+      expect(nodeChangedSpy).toHaveBeenCalled();
+      expect(rule.questions.length).toEqual(1);
+      const question = rule.questions[0] as Question;
+      expect(question.hasOwnProperty('id')).toEqual(true);
+      expect(question.text).toEqual('');
     });
   });
 }
 
 function deleteFeedbackInRule() {
   describe('deleteFeedbackInRule()', () => {
-    it('should delete specified feedback', () => {
+    it('deletes specified feedback', () => {
       const rule = new QuestionBankRule({ questions: ['Q1', 'Q2'] });
       spyOn(window, 'confirm').and.returnValue(true);
       component.deleteFeedbackInRule(rule, 0);
diff --git a/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.ts b/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.ts
index da89c75699..8292bafc22 100644
--- a/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.ts
+++ b/src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.ts
@@ -4,6 +4,7 @@ import { generateRandomKey } from '../../../assets/wise5/common/string/string';
 import { EditFeedbackRulesComponent } from '../../../assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component';
 import { QuestionBankRule } from '../../../assets/wise5/components/peerChat/peer-chat-question-bank/QuestionBankRule';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
+import { Question } from '../../../assets/wise5/components/peerChat/peer-chat-question-bank/Question';
 
 @Component({
   selector: 'edit-question-bank-rules',
@@ -20,7 +21,11 @@ export class EditQuestionBankRulesComponent extends EditFeedbackRulesComponent {
   }
 
   protected createNewFeedbackRule(): Partial<QuestionBankRule> {
-    return { id: generateRandomKey(), expression: '', questions: [''] };
+    if (this.version === 2) {
+      return { id: generateRandomKey(), expression: '', questions: [new Question()] };
+    } else {
+      return { id: generateRandomKey(), expression: '', questions: [''] };
+    }
   }
 
   deleteRule(ruleIndex: number): void {
@@ -31,7 +36,11 @@ export class EditQuestionBankRulesComponent extends EditFeedbackRulesComponent {
   }
 
   addNewFeedbackToRule(rule: Partial<QuestionBankRule>): void {
-    (rule.questions as string[]).push('');
+    if (this.version === 2) {
+      (rule.questions as any[]).push(new Question());
+    } else {
+      (rule.questions as string[]).push('');
+    }
     this.projectService.nodeChanged();
   }
 
diff --git a/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.html b/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.html
index 6c9edd1d6e..f176c47c45 100644
--- a/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.html
+++ b/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.html
@@ -10,6 +10,28 @@
     </mat-checkbox>
   </div>
   <div *ngIf="componentContent.questionBank?.enabled">
+    <div class="custom-label">
+      <mat-form-field appearance="fill">
+        <mat-label i18n>Custom Label</mat-label>
+        <input
+          matInput
+          [(ngModel)]="componentContent.questionBank.label"
+          (ngModelChange)="inputChanged.next($event)"
+          placeholder="Question Bank"
+          i18n-placeholder
+        />
+      </mat-form-field>
+    </div>
+    <div *ngIf="componentContent.questionBank.version === 2">
+      <mat-checkbox
+        [(ngModel)]="componentContent.questionBank.clickToUseEnabled"
+        (ngModelChange)="saveChanges()"
+        color="primary"
+        i18n
+      >
+        Student can select questions to use in Peer Chat
+      </mat-checkbox>
+    </div>
     <div class="max-questions">
       <mat-form-field appearance="fill">
         <mat-label i18n>Max Number of Questions</mat-label>
@@ -17,7 +39,7 @@
           matInput
           type="number"
           [(ngModel)]="componentContent.questionBank.maxQuestionsToShow"
-          (ngModelChange)="saveChanges()"
+          (ngModelChange)="inputChanged.next($event)"
         />
       </mat-form-field>
     </div>
@@ -40,7 +62,10 @@
       </edit-component-peer-grouping-tag>
     </div>
     <div class="feedback-rules">
-      <edit-question-bank-rules [feedbackRules]="componentContent.questionBank.rules">
+      <edit-question-bank-rules
+        [feedbackRules]="componentContent.questionBank.rules"
+        [version]="componentContent.questionBank.version"
+      >
       </edit-question-bank-rules>
     </div>
   </div>
diff --git a/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.scss b/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.scss
index 0e40fddad3..5afbc51016 100644
--- a/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.scss
+++ b/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.scss
@@ -12,7 +12,7 @@
   margin-bottom: 16px;
 }
 
-.reference-component, .max-questions {
+.custom-label, .reference-component, .max-questions {
   margin-top: 16px;
 }
 
diff --git a/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.ts b/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.ts
index c4e237d863..75bc47a6af 100644
--- a/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.ts
+++ b/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { QuestionBank } from '../../../assets/wise5/components/peerChat/peer-chat-question-bank/QuestionBank';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
+import { Subject, Subscription, debounceTime, distinctUntilChanged } from 'rxjs';
 
 @Component({
   selector: 'edit-question-bank',
@@ -9,18 +10,31 @@ import { TeacherProjectService } from '../../../assets/wise5/services/teacherPro
   styleUrls: ['./edit-question-bank.component.scss']
 })
 export class EditQuestionBankComponent implements OnInit {
-  allowedReferenceComponentTypes: string[] = ['MultipleChoice', 'OpenResponse'];
+  protected allowedReferenceComponentTypes: string[] = ['MultipleChoice', 'OpenResponse'];
   @Input() componentContent: any;
+  protected inputChanged: Subject<string> = new Subject<string>();
+  private subscriptions: Subscription = new Subscription();
 
   constructor(private projectService: TeacherProjectService) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.subscriptions.add(
+      this.inputChanged.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => {
+        this.projectService.nodeChanged();
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
 
   toggleComponent(event: MatCheckboxChange): void {
     if (this.componentContent.questionBank == null) {
       this.componentContent.questionBank = new QuestionBank({
         referenceComponent: {},
-        rules: []
+        rules: [],
+        version: 2
       });
     }
     this.componentContent.questionBank.enabled = event.checked;
diff --git a/src/assets/wise5/components/peerChat/peer-chat-chat-box/peer-chat-chat-box.component.html b/src/assets/wise5/components/peerChat/peer-chat-chat-box/peer-chat-chat-box.component.html
index 92fc250b4c..f8801f50bb 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-chat-box/peer-chat-chat-box.component.html
+++ b/src/assets/wise5/components/peerChat/peer-chat-chat-box/peer-chat-chat-box.component.html
@@ -11,6 +11,8 @@
   ></peer-chat-messages>
   <peer-chat-message-input
     *ngIf="isEnabled"
-    (onSubmit)="submit.emit($event)"
+    [messageText]="response"
+    (onSubmit)="submitResponse($event)"
+    (responseChangedEvent)="responseChanged($event)"
   ></peer-chat-message-input>
 </mat-card>
diff --git a/src/assets/wise5/components/peerChat/peer-chat-chat-box/peer-chat-chat-box.component.ts b/src/assets/wise5/components/peerChat/peer-chat-chat-box/peer-chat-chat-box.component.ts
index ca0742534d..bf998a1fd3 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-chat-box/peer-chat-chat-box.component.ts
+++ b/src/assets/wise5/components/peerChat/peer-chat-chat-box/peer-chat-chat-box.component.ts
@@ -7,29 +7,17 @@ import { PeerChatMessage } from '../PeerChatMessage';
   styleUrls: ['./peer-chat-chat-box.component.scss']
 })
 export class PeerChatChatBoxComponent implements OnInit {
-  @Input()
-  isEnabled: boolean = true;
-
-  @Input()
-  isGrading: boolean = false;
-
-  @Input()
-  messages: PeerChatMessage[] = [];
-
-  @Input()
-  myWorkgroupId: number;
-
-  @Input()
-  workgroupInfos: any = {};
-
+  @Input() isEnabled: boolean = true;
+  @Input() isGrading: boolean = false;
+  @Input() messages: PeerChatMessage[] = [];
+  @Input() myWorkgroupId: number;
+  @Input() response: string = '';
+  @Input() workgroupInfos: any = {};
   workgroupInfosWithoutTeachers: any[];
 
-  @Output()
-  deleteClickedEvent: EventEmitter<PeerChatMessage> = new EventEmitter<PeerChatMessage>();
-
-  @Output('onSubmit')
-  submit: EventEmitter<string> = new EventEmitter<string>();
-
+  @Output() deleteClickedEvent: EventEmitter<PeerChatMessage> = new EventEmitter<PeerChatMessage>();
+  @Output() responseChangedEvent: EventEmitter<string> = new EventEmitter<string>();
+  @Output('onSubmit') submit: EventEmitter<string> = new EventEmitter<string>();
   @Output()
   undeleteClickedEvent: EventEmitter<PeerChatMessage> = new EventEmitter<PeerChatMessage>();
 
@@ -48,4 +36,13 @@ export class PeerChatChatBoxComponent implements OnInit {
   protected undeleteClicked(peerChatMessage: PeerChatMessage): void {
     this.undeleteClickedEvent.emit(peerChatMessage);
   }
+
+  protected submitResponse(event: string): void {
+    this.submit.emit(event);
+    this.response = '';
+  }
+
+  protected responseChanged(response: string): void {
+    this.responseChangedEvent.emit(response);
+  }
 }
diff --git a/src/assets/wise5/components/peerChat/peer-chat-grading/peer-chat-grading.component.html b/src/assets/wise5/components/peerChat/peer-chat-grading/peer-chat-grading.component.html
index cb96238642..5b8286dae4 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-grading/peer-chat-grading.component.html
+++ b/src/assets/wise5/components/peerChat/peer-chat-grading/peer-chat-grading.component.html
@@ -14,7 +14,9 @@
     >
       <peer-chat-question-bank
         *ngIf="componentContent.questionBank?.enabled"
+        [content]="componentContent"
         [displayedQuestionBankRules]="questionBankRules"
+        [questionIdsUsed]="questionIdsUsed"
       ></peer-chat-question-bank>
     </div>
     <div
diff --git a/src/assets/wise5/components/peerChat/peer-chat-message-input/peer-chat-message-input.component.html b/src/assets/wise5/components/peerChat/peer-chat-message-input/peer-chat-message-input.component.html
index 7a40b7ed2d..7657a701d1 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-message-input/peer-chat-message-input.component.html
+++ b/src/assets/wise5/components/peerChat/peer-chat-message-input/peer-chat-message-input.component.html
@@ -5,6 +5,7 @@
       cdkTextareaAutosize
       placeholder="Add response..."
       i18n-placeholder
+      (focus)="onFocus($event)"
       [(ngModel)]="messageText"
       (ngModelChange)="responseChanged()"
       (keypress)="keyPressed($event)"
diff --git a/src/assets/wise5/components/peerChat/peer-chat-message-input/peer-chat-message-input.component.ts b/src/assets/wise5/components/peerChat/peer-chat-message-input/peer-chat-message-input.component.ts
index e4776090bc..d5598ac865 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-message-input/peer-chat-message-input.component.ts
+++ b/src/assets/wise5/components/peerChat/peer-chat-message-input/peer-chat-message-input.component.ts
@@ -1,23 +1,27 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'peer-chat-message-input',
   templateUrl: './peer-chat-message-input.component.html'
 })
 export class PeerChatMessageInputComponent implements OnInit {
-  @Output('onSubmit')
-  submit: EventEmitter<string> = new EventEmitter<string>();
-
-  isSubmitEnabled: boolean = false;
-  messageText: string;
+  protected isSubmitEnabled: boolean = false;
+  @Input() messageText: string = '';
+  @Output() responseChangedEvent: EventEmitter<string> = new EventEmitter<string>();
+  @Output('onSubmit') submit: EventEmitter<string> = new EventEmitter<string>();
 
   ngOnInit(): void {}
 
-  responseChanged(): void {
-    this.isSubmitEnabled = this.messageText.length > 0;
+  ngOnChanges(): void {
+    this.responseChanged();
+  }
+
+  protected responseChanged(): void {
+    this.isSubmitEnabled = this.messageText?.length > 0;
+    this.responseChangedEvent.emit(this.messageText);
   }
 
-  keyPressed(event: any): void {
+  protected keyPressed(event: any): void {
     if (event.keyCode === 13) {
       event.preventDefault();
       if (this.isSubmitEnabled) {
@@ -26,9 +30,19 @@ export class PeerChatMessageInputComponent implements OnInit {
     }
   }
 
-  submitResponse(): void {
+  protected submitResponse(): void {
     this.submit.emit(this.messageText);
     this.messageText = '';
     this.isSubmitEnabled = false;
   }
+
+  protected onFocus(event: any): void {
+    this.placeCursorAtEndOfMessageText(event);
+  }
+
+  private placeCursorAtEndOfMessageText(event: any): void {
+    const messageLength = this.messageText.length;
+    event.srcElement.selectionStart = messageLength;
+    event.srcElement.selectionEnd = messageLength;
+  }
 }
diff --git a/src/assets/wise5/components/peerChat/peer-chat-question-bank/Question.ts b/src/assets/wise5/components/peerChat/peer-chat-question-bank/Question.ts
new file mode 100644
index 0000000000..0f3e450932
--- /dev/null
+++ b/src/assets/wise5/components/peerChat/peer-chat-question-bank/Question.ts
@@ -0,0 +1,10 @@
+import { generateRandomKey } from '../../../common/string/string';
+
+export class Question {
+  id: string;
+  text: string = '';
+
+  constructor() {
+    this.id = generateRandomKey();
+  }
+}
diff --git a/src/assets/wise5/components/peerChat/peer-chat-question-bank/QuestionBank.ts b/src/assets/wise5/components/peerChat/peer-chat-question-bank/QuestionBank.ts
index 9df43182ba..6b9abc0129 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-question-bank/QuestionBank.ts
+++ b/src/assets/wise5/components/peerChat/peer-chat-question-bank/QuestionBank.ts
@@ -2,6 +2,9 @@ import { ReferenceComponentRules } from '../../common/ReferenceComponentRules';
 import { QuestionBankRule } from './QuestionBankRule';
 
 export class QuestionBank extends ReferenceComponentRules {
+  clickToUseEnabled: boolean;
+  label: string;
   maxQuestionsToShow: number;
   rules: QuestionBankRule[];
+  version: number;
 }
diff --git a/src/assets/wise5/components/peerChat/peer-chat-question-bank/QuestionBankRule.ts b/src/assets/wise5/components/peerChat/peer-chat-question-bank/QuestionBankRule.ts
index faa579c1d1..3c3743ccc7 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-question-bank/QuestionBankRule.ts
+++ b/src/assets/wise5/components/peerChat/peer-chat-question-bank/QuestionBankRule.ts
@@ -1,5 +1,6 @@
 import { FeedbackRule } from '../../common/feedbackRule/FeedbackRule';
+import { Question } from './Question';
 
 export class QuestionBankRule extends FeedbackRule {
-  questions: string[];
+  questions: (string | Question)[];
 }
diff --git a/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.html b/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.html
index a42bf8b3cf..309eb99b1a 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.html
+++ b/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.html
@@ -1,13 +1,65 @@
 <mat-card appearance="outlined" class="mat-elevation-z0 primary-bg">
-  <div class="dark-theme mat-subtitle-2" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
+  <div
+    class="dark-theme mat-subtitle-2"
+    fxLayout="row"
+    fxLayoutAlign="start center"
+    fxLayoutGap="4px"
+  >
     <mat-icon class="mat-30">help</mat-icon>
-    <span i18n>Question Bank</span>
+    <ng-container
+      *ngIf="
+        content.questionBank.label != null && content.questionBank.label !== '';
+        then customLabel;
+        else defaultLabel
+      "
+    ></ng-container>
+    <ng-template #customLabel
+      ><span>{{ content.questionBank.label }}</span></ng-template
+    >
+    <ng-template #defaultLabel><span i18n>Question Bank</span></ng-template>
   </div>
-  <mat-card-content class="app-bg-bg">
+  <div class="questions app-bg-bg">
     <ul>
-      <li *ngFor="let question of questions" class="question">
-        {{ question }}
+      <li *ngFor="let question of questions">
+        <ng-container
+          *ngIf="content.questionBank.version === 2; then version2; else version1"
+        ></ng-container>
+        <ng-template #version2>
+          <ng-container
+            *ngIf="
+              content.questionBank.clickToUseEnabled;
+              then version2ClickToAdd;
+              else version2Default
+            "
+          ></ng-container>
+          <ng-template #version2ClickToAdd>
+            <div fxLayoutAlign="start center" fxLayoutGap="8px">
+              <button
+                mat-stroked-button
+                class="question-button"
+                (click)="useQuestion(question)"
+                matTooltip="Add to chat"
+                matTooltipPosition="after"
+                i18n-matTooltip
+              >
+                {{ question.text }}
+              </button>
+              <div class="question-used-indicator">
+                <ng-container *ngIf="questionIdsUsed.includes(question.id)">
+                  <mat-icon class="secondary-text"> check_circle </mat-icon>
+                  <span class="cdk-visually-hidden" i18n>Used in chat</span>
+                </ng-container>
+              </div>
+            </div>
+          </ng-template>
+          <ng-template #version2Default>
+            {{ question.text }}
+          </ng-template>
+        </ng-template>
+        <ng-template #version1>
+          {{ question }}
+        </ng-template>
       </li>
     </ul>
-  </mat-card-content>
+  </div>
 </mat-card>
diff --git a/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.scss b/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.scss
index d259810936..6f1fee0760 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.scss
+++ b/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.scss
@@ -4,19 +4,22 @@
   padding: 8px;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
-mat-card-content {
+.questions {
   margin-top: 8px;
   padding: 8px;
   border-radius: $button-border-radius;
   overflow: auto;
 }
 
-.question {
-  font-style: italic;
+.question-button {
+  text-transform: none;
+  text-align: start;
+  min-height: 36px;
+  height: auto;
 }
 
 ul {
+  margin: 0;
   padding: 0;
   list-style-type: none;
 }
@@ -28,3 +31,8 @@ li {
     margin-bottom: 0;
   }
 }
+
+.question-used-indicator {
+  width: 40px;
+  height: 24px;
+}
\ No newline at end of file
diff --git a/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.spec.ts b/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.spec.ts
index 5a6831226c..109573dc5d 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.spec.ts
+++ b/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.spec.ts
@@ -12,6 +12,7 @@ import { of } from 'rxjs';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { QuestionBankService } from './questionBank.service';
 
 let component: PeerChatQuestionBankComponent;
 let fixture: ComponentFixture<PeerChatQuestionBankComponent>;
@@ -32,7 +33,8 @@ describe('PeerChatQuestionBankComponent', () => {
         MatIconModule,
         StudentTeacherCommonServicesModule
       ],
-      declarations: [PeerChatQuestionBankComponent]
+      declarations: [PeerChatQuestionBankComponent],
+      providers: [QuestionBankService]
     }).compileComponents();
     fixture = TestBed.createComponent(PeerChatQuestionBankComponent);
     peerGroupService = TestBed.inject(PeerGroupService);
diff --git a/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.ts b/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.ts
index a816d8d082..0a502bc9a6 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.ts
+++ b/src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.ts
@@ -13,6 +13,8 @@ import { concatMap, map } from 'rxjs/operators';
 import { PeerGroup } from '../PeerGroup';
 import { QuestionBankContent } from './QuestionBankContent';
 import { copy } from '../../../common/object/object';
+import { Question } from './Question';
+import { QuestionBankService } from './questionBank.service';
 import { ConstraintService } from '../../../services/constraintService';
 
 @Component({
@@ -24,12 +26,15 @@ export class PeerChatQuestionBankComponent implements OnInit {
   @Input() content: QuestionBankContent;
   @Input() displayedQuestionBankRules: QuestionBankRule[];
   @Output() displayedQuestionBankRulesChange = new EventEmitter<QuestionBankRule[]>();
-  questions: string[];
+  @Input() questionIdsUsed: string[] = [];
+  questions: (string | Question)[];
+  @Output() useQuestionEvent = new EventEmitter<string>();
 
   constructor(
     private constraintService: ConstraintService,
     private peerGroupService: PeerGroupService,
-    private projectService: ProjectService
+    private projectService: ProjectService,
+    private questionBankService: QuestionBankService
   ) {}
 
   ngOnInit(): void {
@@ -46,6 +51,13 @@ export class PeerChatQuestionBankComponent implements OnInit {
     } else {
       this.setQuestions(this.displayedQuestionBankRules);
     }
+    this.subscribeToQuestionUsed();
+  }
+
+  private subscribeToQuestionUsed(): void {
+    this.questionBankService.questionUsed$.subscribe((question: Question) => {
+      this.questionIdsUsed.push(question.id);
+    });
   }
 
   private evaluatePeerGroup(referenceComponent: WISEComponent): void {
@@ -133,4 +145,8 @@ export class PeerChatQuestionBankComponent implements OnInit {
   private setQuestions(rules: QuestionBankRule[]): void {
     this.questions = rules.flatMap((rule) => rule.questions);
   }
+
+  protected useQuestion(question: string): void {
+    this.useQuestionEvent.emit(question);
+  }
 }
diff --git a/src/assets/wise5/components/peerChat/peer-chat-question-bank/question-bank-helper.ts b/src/assets/wise5/components/peerChat/peer-chat-question-bank/question-bank-helper.ts
new file mode 100644
index 0000000000..0ecbdf3f6f
--- /dev/null
+++ b/src/assets/wise5/components/peerChat/peer-chat-question-bank/question-bank-helper.ts
@@ -0,0 +1,8 @@
+export function getQuestionIdsUsed(componentStates: any[], workgroupId: number): string[] {
+  return componentStates
+    .filter(
+      (componentState) =>
+        componentState.workgroupId === workgroupId && componentState.studentData.questionId != null
+    )
+    .map((componentState) => componentState.studentData.questionId);
+}
diff --git a/src/assets/wise5/components/peerChat/peer-chat-question-bank/questionBank.service.ts b/src/assets/wise5/components/peerChat/peer-chat-question-bank/questionBank.service.ts
new file mode 100644
index 0000000000..8a3f233ce1
--- /dev/null
+++ b/src/assets/wise5/components/peerChat/peer-chat-question-bank/questionBank.service.ts
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { Question } from './Question';
+
+@Injectable()
+export class QuestionBankService {
+  private questionUsedSource: Subject<Question> = new Subject<Question>();
+  public questionUsed$: Observable<Question> = this.questionUsedSource.asObservable();
+
+  questionUsed(question: Question): void {
+    this.questionUsedSource.next(question);
+  }
+}
diff --git a/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.html b/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.html
index 75f8c1ebe6..3d9722efad 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.html
+++ b/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.html
@@ -9,7 +9,9 @@
     >
       <peer-chat-question-bank
         *ngIf="componentContent.questionBank?.enabled"
+        [content]="componentContent"
         [displayedQuestionBankRules]="questionBankRules"
+        [questionIdsUsed]="questionIdsUsed"
       ></peer-chat-question-bank>
     </div>
     <div fxFlex fxFlex.gt-md="60" fxFlexOrder="2" fxFlexOrder.gt-md="1">
diff --git a/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.ts b/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.ts
index b0ccdb3629..b8aada63f2 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.ts
+++ b/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.ts
@@ -12,6 +12,7 @@ import { NodeService } from '../../../services/nodeService';
 import { FeedbackRule } from '../../common/feedbackRule/FeedbackRule';
 import { QuestionBankRule } from '../peer-chat-question-bank/QuestionBankRule';
 import { forkJoin, Observable } from 'rxjs';
+import { getQuestionIdsUsed } from '../peer-chat-question-bank/question-bank-helper';
 
 @Component({
   selector: 'peer-chat-show-work',
@@ -25,6 +26,7 @@ export class PeerChatShowWorkComponent extends ComponentShowWorkDirective {
   peerChatWorkgroupInfos: any = {};
   peerGroup: PeerGroup;
   questionBankRules: QuestionBankRule[];
+  questionIdsUsed: string[] = [];
   requestTimeout: number = 10000;
 
   @Input() workgroupId: number;
@@ -99,25 +101,35 @@ export class PeerChatShowWorkComponent extends ComponentShowWorkDirective {
   private setPeerChatMessages(componentStates: any[]): void {
     this.peerChatMessages = [];
     this.peerChatService.setPeerChatMessages(this.peerChatMessages, componentStates);
-    this.dynamicPrompt = this.getDynamicPrompt(componentStates);
-    this.questionBankRules = this.getQuestionBankRule(componentStates);
+    this.dynamicPrompt = this.getDynamicPrompt(componentStates, this.workgroupId);
+    this.questionBankRules = this.getQuestionBankRule(componentStates, this.workgroupId);
+    this.questionIdsUsed = getQuestionIdsUsed(componentStates, this.workgroupId);
   }
 
-  private getDynamicPrompt(componentStates: any[]): FeedbackRule {
-    for (let c = componentStates.length - 1; c >= 0; c--) {
-      const dynamicPrompt = componentStates[c].studentData.dynamicPrompt;
-      if (dynamicPrompt != null) {
-        return dynamicPrompt;
-      }
-    }
-    return null;
+  private getDynamicPrompt(componentStates: any[], workgroupId: number): FeedbackRule {
+    return this.getLatestStudentDataFieldForWorkgroup(
+      componentStates,
+      workgroupId,
+      'dynamicPrompt'
+    );
+  }
+
+  private getQuestionBankRule(componentStates: any[], workgroupId: number): QuestionBankRule[] {
+    return this.getLatestStudentDataFieldForWorkgroup(componentStates, workgroupId, 'questionBank');
   }
 
-  private getQuestionBankRule(componentStates: any[]): QuestionBankRule[] {
+  private getLatestStudentDataFieldForWorkgroup(
+    componentStates: any[],
+    workgroupId: number,
+    fieldName: string
+  ): any {
     for (let c = componentStates.length - 1; c >= 0; c--) {
-      const questionBank = componentStates[c].studentData.questionBank;
-      if (questionBank != null) {
-        return questionBank;
+      const componentState = componentStates[c];
+      if (
+        componentState.workgroupId === workgroupId &&
+        componentState.studentData[fieldName] != null
+      ) {
+        return componentState.studentData[fieldName];
       }
     }
     return null;
diff --git a/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.html b/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.html
index fe2d3afaa8..db585e5f0e 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.html
+++ b/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.html
@@ -22,14 +22,18 @@
         *ngIf="questionBankContent.questionBank?.enabled"
         [content]="questionBankContent"
         [(displayedQuestionBankRules)]="displayedQuestionBankRules"
+        (useQuestionEvent)="useQuestion($event)"
+        [questionIdsUsed]="questionIdsUsed"
       ></peer-chat-question-bank>
     </div>
     <div fxFlex fxFlex.gt-sm="60" fxFlexOrder="2" fxFlexOrder.gt-sm="1">
       <peer-chat-chat-box
         [messages]="peerChatMessages"
         [myWorkgroupId]="myWorkgroupId"
+        [response]="response"
         [workgroupInfos]="peerChatWorkgroupInfos"
         (onSubmit)="submitStudentResponse($event)"
+        (responseChangedEvent)="responseChanged($event)"
       ></peer-chat-chat-box>
     </div>
   </div>
diff --git a/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts b/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts
index b02bab5d04..c8f610ec3c 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts
+++ b/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts
@@ -20,6 +20,9 @@ import { PeerChatComponent } from '../PeerChatComponent';
 import { PeerChatMessage } from '../PeerChatMessage';
 import { PeerChatService } from '../peerChatService';
 import { PeerGroup } from '../PeerGroup';
+import { Question } from '../peer-chat-question-bank/Question';
+import { QuestionBankService } from '../peer-chat-question-bank/questionBank.service';
+import { getQuestionIdsUsed } from '../peer-chat-question-bank/question-bank-helper';
 
 @Component({
   selector: 'peer-chat-student',
@@ -37,9 +40,11 @@ export class PeerChatStudentComponent extends ComponentStudent {
   peerChatWorkgroupIds: number[] = [];
   peerChatWorkgroupInfos: any = {};
   peerGroup: PeerGroup;
+  question: Question;
   questionBankContent: QuestionBankContent;
+  questionIdsUsed: string[] = [];
   requestTimeout: number = 10000;
-  response: string;
+  response: string = '';
 
   constructor(
     protected annotationService: AnnotationService,
@@ -52,6 +57,7 @@ export class PeerChatStudentComponent extends ComponentStudent {
     private notificationService: NotificationService,
     private peerChatService: PeerChatService,
     private peerGroupService: PeerGroupService,
+    private questionBankService: QuestionBankService,
     protected studentAssetService: StudentAssetService,
     protected studentDataService: StudentDataService,
     private studentWebSocketService: StudentWebSocketService
@@ -118,6 +124,7 @@ export class PeerChatStudentComponent extends ComponentStudent {
             ]).subscribe(([componentStates, annotations]) => {
               this.setPeerChatMessages(componentStates);
               this.peerChatService.processIsDeletedAnnotations(annotations, this.peerChatMessages);
+              this.questionIdsUsed = getQuestionIdsUsed(componentStates, this.myWorkgroupId);
             });
           }
         },
@@ -176,6 +183,10 @@ export class PeerChatStudentComponent extends ComponentStudent {
       response: this.response,
       submitCounter: this.submitCounter
     };
+    if (this.question != null) {
+      componentState.studentData.questionId = this.question.id;
+      this.questionBankService.questionUsed(this.question);
+    }
     if (this.dynamicPrompt != null) {
       componentState.studentData.dynamicPrompt = this.dynamicPrompt;
     }
@@ -197,6 +208,8 @@ export class PeerChatStudentComponent extends ComponentStudent {
         action
       );
     });
+    this.response = '';
+    this.question = null;
     return promise;
   }
 
@@ -270,4 +283,23 @@ export class PeerChatStudentComponent extends ComponentStudent {
   onDynamicPromptChanged(feedbackRule: FeedbackRule): void {
     this.dynamicPrompt = feedbackRule;
   }
+
+  protected useQuestion(question: Question): void {
+    if (
+      this.response === '' ||
+      confirm(
+        $localize`Are you sure you want to replace the current text in your response input box with this text?`
+      )
+    ) {
+      this.question = question;
+      this.response = question.text;
+    }
+  }
+
+  protected responseChanged(response: string): void {
+    this.response = response;
+    if (response.length < 2) {
+      this.question = null;
+    }
+  }
 }
diff --git a/src/assets/wise5/components/peerChat/peer-chat.module.ts b/src/assets/wise5/components/peerChat/peer-chat.module.ts
index c0740bbedb..54e3490a9c 100644
--- a/src/assets/wise5/components/peerChat/peer-chat.module.ts
+++ b/src/assets/wise5/components/peerChat/peer-chat.module.ts
@@ -6,6 +6,7 @@ import { PeerChatMessagesComponent } from './peer-chat-messages/peer-chat-messag
 import { PeerChatQuestionBankComponent } from './peer-chat-question-bank/peer-chat-question-bank.component';
 import { PeerChatMembersComponent } from './peer-chat-members/peer-chat-members.component';
 import { StudentTeacherCommonModule } from '../../../../app/student-teacher-common.module';
+import { QuestionBankService } from './peer-chat-question-bank/questionBank.service';
 
 @NgModule({
   declarations: [
@@ -24,6 +25,7 @@ import { StudentTeacherCommonModule } from '../../../../app/student-teacher-comm
     PeerChatMessageInputComponent,
     PeerChatMessagesComponent,
     PeerChatQuestionBankComponent
-  ]
+  ],
+  providers: [QuestionBankService]
 })
 export class PeerChatModule {}
diff --git a/src/assets/wise5/components/peerChat/peerChatService.ts b/src/assets/wise5/components/peerChat/peerChatService.ts
index 15c6fe7af9..82547b04a7 100644
--- a/src/assets/wise5/components/peerChat/peerChatService.ts
+++ b/src/assets/wise5/components/peerChat/peerChatService.ts
@@ -1,4 +1,4 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ConfigService } from '../../services/configService';
diff --git a/src/messages.xlf b/src/messages.xlf
index 8670db27dc..d59f9cbd0e 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -1184,7 +1184,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html</context>
-          <context context-type="linenumber">102</context>
+          <context context-type="linenumber">114</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html</context>
@@ -1199,7 +1199,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html</context>
-          <context context-type="linenumber">113</context>
+          <context context-type="linenumber">125</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html</context>
@@ -1214,7 +1214,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html</context>
-          <context context-type="linenumber">123</context>
+          <context context-type="linenumber">135</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html</context>
@@ -1229,7 +1229,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html</context>
-          <context context-type="linenumber">138</context>
+          <context context-type="linenumber">150</context>
         </context-group>
       </trans-unit>
       <trans-unit id="703814089292012107" datatype="html">
@@ -1254,7 +1254,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank/edit-question-bank.component.html</context>
-          <context context-type="linenumber">30</context>
+          <context context-type="linenumber">52</context>
         </context-group>
       </trans-unit>
       <trans-unit id="865b518ad09c5909b84301e6fd1443519f02795c" datatype="html">
@@ -1310,35 +1310,35 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Delete question</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html</context>
-          <context context-type="linenumber">77</context>
+          <context context-type="linenumber">89</context>
         </context-group>
       </trans-unit>
       <trans-unit id="567f8db555f6ade1b92a70eb9eb1255b4c4e05ea" datatype="html">
         <source>Add new question</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html</context>
-          <context context-type="linenumber">88</context>
+          <context context-type="linenumber">100</context>
         </context-group>
       </trans-unit>
       <trans-unit id="cc5683cb2acba6dff5d3498acc29fbb9d8af3622" datatype="html">
         <source><x id="START_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="&lt;mat-icon&gt;"/>add_circle<x id="CLOSE_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="&lt;/mat-icon&gt;"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.html</context>
-          <context context-type="linenumber">94</context>
+          <context context-type="linenumber">106</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5572453036493787415" datatype="html">
         <source>Are you sure you want to delete this question rule?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.ts</context>
-          <context context-type="linenumber">27</context>
+          <context context-type="linenumber">32</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2774207815872923451" datatype="html">
         <source>Are you sure you want to delete this question?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank-rules/edit-question-bank-rules.component.ts</context>
-          <context context-type="linenumber">39</context>
+          <context context-type="linenumber">48</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e1c75fb9f9b69b490d00a4a741fabfb52080d9b1" datatype="html">
@@ -1348,11 +1348,36 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">8,10</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="2078bbaa8fdb0d6ea414fd06ee2f4802e426fd4c" datatype="html">
+        <source>Custom Label</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank/edit-question-bank.component.html</context>
+          <context context-type="linenumber">15</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="69890220efa72f501c096cd863f5f9dcf16fd321" datatype="html">
+        <source>Question Bank</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank/edit-question-bank.component.html</context>
+          <context context-type="linenumber">20</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.html</context>
+          <context context-type="linenumber">19</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="514cc7de9c98f15069ad4e2e9ed5632bbf69516e" datatype="html">
+        <source> Student can select questions to use in Peer Chat </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank/edit-question-bank.component.html</context>
+          <context context-type="linenumber">31,33</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="896589cbf4473a405f00a4068706375829758d92" datatype="html">
         <source>Max Number of Questions</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-question-bank/edit-question-bank.component.html</context>
-          <context context-type="linenumber">15</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e8c21747e8604f974b3ed6ecf6089306b7cc0aae" datatype="html">
@@ -9885,7 +9910,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
             )"/>. Be careful not to overwrite each other&apos;s work!</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.ts</context>
-          <context context-type="linenumber">36,38</context>
+          <context context-type="linenumber">37,39</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5763042719559545946" datatype="html">
@@ -19713,11 +19738,11 @@ If this problem continues, let your teacher know and move on to the next activit
         <source> This Peer Chat activity is not yet available. Please check back later or wait for a notification to return. </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/peerChat/peer-chat-grading/peer-chat-grading.component.html</context>
-          <context context-type="linenumber">38,41</context>
+          <context context-type="linenumber">40,43</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.html</context>
-          <context context-type="linenumber">25,28</context>
+          <context context-type="linenumber">27,30</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.html</context>
@@ -19735,7 +19760,7 @@ If this problem continues, let your teacher know and move on to the next activit
         <source> Send </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/peerChat/peer-chat-message-input/peer-chat-message-input.component.html</context>
-          <context context-type="linenumber">20,22</context>
+          <context context-type="linenumber">21,23</context>
         </context-group>
       </trans-unit>
       <trans-unit id="81a5df0547de12ef2c96486e6618669b3bdd704f" datatype="html">
@@ -19752,18 +19777,32 @@ If this problem continues, let your teacher know and move on to the next activit
           <context context-type="linenumber">38</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="69890220efa72f501c096cd863f5f9dcf16fd321" datatype="html">
-        <source>Question Bank</source>
+      <trans-unit id="1626c029c15e27660f33c247cda2b22cdbaf42b1" datatype="html">
+        <source>Add to chat</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.html</context>
-          <context context-type="linenumber">4</context>
+          <context context-type="linenumber">41</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="4a01d2b686a9af6d84795b6925eb442375af818d" datatype="html">
+        <source>Used in chat</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/peerChat/peer-chat-question-bank/peer-chat-question-bank.component.html</context>
+          <context context-type="linenumber">50</context>
         </context-group>
       </trans-unit>
       <trans-unit id="225777916942997365" datatype="html">
         <source>You have new chat messages</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts</context>
-          <context context-type="linenumber">228</context>
+          <context context-type="linenumber">241</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="8602610569031787041" datatype="html">
+        <source>Are you sure you want to replace the current text in your response input box with this text?</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts</context>
+          <context context-type="linenumber">291</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6310961320545154131" datatype="html">