From f337e05905d908df0895bd3bc49b5386d5eeae34 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sun, 18 Jun 2023 16:19:22 +0800
Subject: [PATCH 01/22] Improve useRef type arguments for HTML elements

---
 src/commons/workspace/Workspace.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index b15423a4cd..1ee25bf16d 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -34,11 +34,11 @@ type StateProps = {
 
 const Workspace: React.FC<WorkspaceProps> = props => {
   const sideBarResizable = React.useRef<Resizable | null>(null);
-  const contentContainerDiv = React.useRef<HTMLDivElement | null>(null);
-  const editorDividerDiv = React.useRef<HTMLDivElement | null>(null);
+  const contentContainerDiv = React.useRef<HTMLDivElement>(null);
+  const editorDividerDiv = React.useRef<HTMLDivElement>(null);
   const leftParentResizable = React.useRef<Resizable | null>(null);
   const maxDividerHeight = React.useRef<number | null>(null);
-  const sideDividerDiv = React.useRef<HTMLDivElement | null>(null);
+  const sideDividerDiv = React.useRef<HTMLDivElement>(null);
   const [contentContainerWidth] = useDimensions(contentContainerDiv);
   const [expandedSideBarWidth, setExpandedSideBarWidth] = React.useState(200);
   const [isSideBarExpanded, setIsSideBarExpanded] = React.useState(true);

From 17b9bff793797c0e709cc20c1a4122dff3a61b2c Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sun, 18 Jun 2023 16:22:51 +0800
Subject: [PATCH 02/22] Use named imports for React hooks

---
 .../mobileWorkspace/MobileWorkspace.tsx       | 22 +++++++++----------
 src/commons/workspace/Workspace.tsx           | 20 ++++++++---------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/commons/mobileWorkspace/MobileWorkspace.tsx b/src/commons/mobileWorkspace/MobileWorkspace.tsx
index 42d20b7979..5c8242bb74 100644
--- a/src/commons/mobileWorkspace/MobileWorkspace.tsx
+++ b/src/commons/mobileWorkspace/MobileWorkspace.tsx
@@ -1,7 +1,7 @@
 import { FocusStyleManager } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Ace } from 'ace-builds';
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { DraggableEvent } from 'react-draggable';
 import { useMediaQuery } from 'react-responsive';
 
@@ -30,16 +30,16 @@ export type MobileWorkspaceProps = {
 const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   const isAndroid = /Android/.test(navigator.userAgent);
   const isPortrait = useMediaQuery({ orientation: 'portrait' });
-  const [draggableReplPosition, setDraggableReplPosition] = React.useState({ x: 0, y: 0 });
+  const [draggableReplPosition, setDraggableReplPosition] = useState({ x: 0, y: 0 });
 
   // For disabling draggable Repl when in stepper tab
-  const [isDraggableReplDisabled, setIsDraggableReplDisabled] = React.useState(false);
+  const [isDraggableReplDisabled, setIsDraggableReplDisabled] = useState(false);
 
   // Get rid of the focus border on blueprint components
   FocusStyleManager.onlyShowFocusOnTabs();
 
   // Handles the panel height when the mobile top controlbar is rendered in the Assessment Workspace
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.mobileSideContentProps.workspaceLocation === 'assessment') {
       document.documentElement.style.setProperty(
         '--mobile-panel-height',
@@ -59,7 +59,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
    * soft keyboard on Android devices. This is due to the viewport height changing when the soft
    * keyboard is up on Android devices. IOS devices are not affected.
    */
-  React.useEffect(() => {
+  useEffect(() => {
     if (isPortrait && isAndroid) {
       document.documentElement.style.setProperty('overflow', 'auto');
       const metaViewport = document.querySelector('meta[name=viewport]');
@@ -83,7 +83,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
     };
   }, [isPortrait, isAndroid]);
 
-  const [targetKeyboardInput, setTargetKeyboardInput] = React.useState<Ace.Editor | null>(null);
+  const [targetKeyboardInput, setTargetKeyboardInput] = useState<Ace.Editor | null>(null);
 
   const clearTargetKeyboardInput = () => setTargetKeyboardInput(null);
 
@@ -184,7 +184,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   };
 
   const handleEditorEval = props.editorContainerProps?.handleEditorEval;
-  const handleTabChangeForRepl = React.useCallback(
+  const handleTabChangeForRepl = useCallback(
     (newTabId: SideContentType, prevTabId: SideContentType) => {
       // Evaluate program upon pressing the run tab.
       if (newTabId === SideContentType.mobileEditorRun) {
@@ -223,7 +223,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   );
 
   const onChange = props.mobileSideContentProps.onChange;
-  const onSideContentTabChange = React.useCallback(
+  const onSideContentTabChange = useCallback(
     (
       newTabId: SideContentType,
       prevTabId: SideContentType,
@@ -238,7 +238,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   // Convert sidebar tabs with a side content tab ID into side content tabs.
   const sideBarTabs: SideContentTab[] = props.sideBarProps.tabs.filter(tab => tab.id !== undefined);
 
-  const mobileEditorTab: SideContentTab = React.useMemo(
+  const mobileEditorTab: SideContentTab = useMemo(
     () => ({
       label: 'Editor',
       iconName: IconNames.EDIT,
@@ -248,7 +248,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
     []
   );
 
-  const mobileRunTab: SideContentTab = React.useMemo(
+  const mobileRunTab: SideContentTab = useMemo(
     () => ({
       label: 'Run',
       iconName: IconNames.PLAY,
@@ -258,7 +258,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
     []
   );
 
-  const updatedMobileSideContentProps = React.useCallback(() => {
+  const updatedMobileSideContentProps = useCallback(() => {
     return {
       ...props.mobileSideContentProps,
       onChange: onSideContentTabChange,
diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index 1ee25bf16d..c169707656 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -1,7 +1,7 @@
 import { FocusStyleManager } from '@blueprintjs/core';
 import { Enable, NumberSize, Resizable, ResizableProps, ResizeCallback } from 're-resizable';
 import { Direction } from 're-resizable/lib/resizer';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import ControlBar, { ControlBarProps } from '../controlBar/ControlBar';
 import EditorContainer, { EditorContainerProps } from '../editor/EditorContainer';
@@ -33,15 +33,15 @@ type StateProps = {
 };
 
 const Workspace: React.FC<WorkspaceProps> = props => {
-  const sideBarResizable = React.useRef<Resizable | null>(null);
-  const contentContainerDiv = React.useRef<HTMLDivElement>(null);
-  const editorDividerDiv = React.useRef<HTMLDivElement>(null);
-  const leftParentResizable = React.useRef<Resizable | null>(null);
-  const maxDividerHeight = React.useRef<number | null>(null);
-  const sideDividerDiv = React.useRef<HTMLDivElement>(null);
+  const sideBarResizable = useRef<Resizable | null>(null);
+  const contentContainerDiv = useRef<HTMLDivElement>(null);
+  const editorDividerDiv = useRef<HTMLDivElement>(null);
+  const leftParentResizable = useRef<Resizable | null>(null);
+  const maxDividerHeight = useRef<number | null>(null);
+  const sideDividerDiv = useRef<HTMLDivElement>(null);
   const [contentContainerWidth] = useDimensions(contentContainerDiv);
-  const [expandedSideBarWidth, setExpandedSideBarWidth] = React.useState(200);
-  const [isSideBarExpanded, setIsSideBarExpanded] = React.useState(true);
+  const [expandedSideBarWidth, setExpandedSideBarWidth] = useState(200);
+  const [isSideBarExpanded, setIsSideBarExpanded] = useState(true);
 
   const sideBarCollapsedWidth = 40;
 
@@ -50,7 +50,7 @@ const Workspace: React.FC<WorkspaceProps> = props => {
 
   FocusStyleManager.onlyShowFocusOnTabs();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.sideContentIsResizeable && maxDividerHeight.current === null) {
       maxDividerHeight.current = sideDividerDiv.current!.clientHeight;
     }

From 8324d10547f06a13de9e8de7469713eca2e65120 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sun, 18 Jun 2023 16:32:06 +0800
Subject: [PATCH 03/22] Refactor MobileWorkspace

* Replace if statements with optional invocation
* Move constant `SideContentTab`s out of FC body
---
 .../mobileWorkspace/MobileWorkspace.tsx       | 98 +++++++------------
 1 file changed, 36 insertions(+), 62 deletions(-)

diff --git a/src/commons/mobileWorkspace/MobileWorkspace.tsx b/src/commons/mobileWorkspace/MobileWorkspace.tsx
index 5c8242bb74..1416e41f81 100644
--- a/src/commons/mobileWorkspace/MobileWorkspace.tsx
+++ b/src/commons/mobileWorkspace/MobileWorkspace.tsx
@@ -1,7 +1,7 @@
 import { FocusStyleManager } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Ace } from 'ace-builds';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { DraggableEvent } from 'react-draggable';
 import { useMediaQuery } from 'react-responsive';
 
@@ -88,45 +88,33 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   const clearTargetKeyboardInput = () => setTargetKeyboardInput(null);
 
   const enableMobileKeyboardForEditor = (props: EditorContainerProps): EditorContainerProps => {
-    const onFocus = (event: any, editor?: Ace.Editor) => {
-      if (props.onFocus) {
-        props.onFocus(event, editor);
-      }
-      if (!editor) {
-        return;
-      }
-      setTargetKeyboardInput(editor);
-    };
-    const onBlur = (event: any, editor?: Ace.Editor) => {
-      if (props.onBlur) {
-        props.onBlur(event, editor);
-      }
-      clearTargetKeyboardInput();
-    };
     return {
       ...props,
-      onFocus,
-      onBlur
+      onFocus: (event, editor?) => {
+        props.onFocus?.(event, editor);
+        if (!editor) {
+          return;
+        }
+        setTargetKeyboardInput(editor);
+      },
+      onBlur: (event, editor?) => {
+        props.onBlur?.(event, editor);
+        clearTargetKeyboardInput();
+      }
     };
   };
 
   const enableMobileKeyboardForRepl = (props: ReplProps): ReplProps => {
-    const onFocus = (editor: Ace.Editor) => {
-      if (props.onFocus) {
-        props.onFocus(editor);
-      }
-      setTargetKeyboardInput(editor);
-    };
-    const onBlur = () => {
-      if (props.onBlur) {
-        props.onBlur();
-      }
-      clearTargetKeyboardInput();
-    };
     return {
       ...props,
-      onFocus,
-      onBlur
+      onFocus: editor => {
+        props.onFocus?.(editor);
+        setTargetKeyboardInput(editor);
+      },
+      onBlur: () => {
+        props.onBlur?.();
+        clearTargetKeyboardInput();
+      }
     };
   };
 
@@ -188,9 +176,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
     (newTabId: SideContentType, prevTabId: SideContentType) => {
       // Evaluate program upon pressing the run tab.
       if (newTabId === SideContentType.mobileEditorRun) {
-        if (handleEditorEval) {
-          handleEditorEval();
-        }
+        handleEditorEval?.();
       }
 
       // Show the REPL upon pressing the run tab if the previous tab is not listed below.
@@ -238,26 +224,6 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   // Convert sidebar tabs with a side content tab ID into side content tabs.
   const sideBarTabs: SideContentTab[] = props.sideBarProps.tabs.filter(tab => tab.id !== undefined);
 
-  const mobileEditorTab: SideContentTab = useMemo(
-    () => ({
-      label: 'Editor',
-      iconName: IconNames.EDIT,
-      body: null,
-      id: SideContentType.mobileEditor
-    }),
-    []
-  );
-
-  const mobileRunTab: SideContentTab = useMemo(
-    () => ({
-      label: 'Run',
-      iconName: IconNames.PLAY,
-      body: null,
-      id: SideContentType.mobileEditorRun
-    }),
-    []
-  );
-
   const updatedMobileSideContentProps = useCallback(() => {
     return {
       ...props.mobileSideContentProps,
@@ -274,13 +240,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
         ]
       }
     };
-  }, [
-    onSideContentTabChange,
-    mobileEditorTab,
-    mobileRunTab,
-    props.mobileSideContentProps,
-    sideBarTabs
-  ]);
+  }, [onSideContentTabChange, props.mobileSideContentProps, sideBarTabs]);
 
   const inAssessmentWorkspace = props.mobileSideContentProps.workspaceLocation === 'assessment';
 
@@ -315,3 +275,17 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
 };
 
 export default MobileWorkspace;
+
+const mobileEditorTab: SideContentTab = {
+  label: 'Editor',
+  iconName: IconNames.EDIT,
+  body: null,
+  id: SideContentType.mobileEditor
+};
+
+const mobileRunTab: SideContentTab = {
+  label: 'Run',
+  iconName: IconNames.PLAY,
+  body: null,
+  id: SideContentType.mobileEditorRun
+};

From 4059f273512d26b909883a6fa02293b91ea935ac Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Mon, 18 Mar 2024 13:26:18 +0800
Subject: [PATCH 04/22] Simplify classnames call

---
 src/pages/playground/Playground.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index 68439dbd32..6429e96fcb 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -1043,12 +1043,12 @@ const Playground: React.FC<PlaygroundProps> = props => {
   };
 
   return isMobileBreakpoint ? (
-    <div className={classNames('Playground', Classes.DARK, isGreen ? 'GreenScreen' : undefined)}>
+    <div className={classNames('Playground', Classes.DARK, isGreen && 'GreenScreen')}>
       <MobileWorkspace {...mobileWorkspaceProps} />
     </div>
   ) : (
     <HotKeys
-      className={classNames('Playground', Classes.DARK, isGreen ? 'GreenScreen' : undefined)}
+      className={classNames('Playground', Classes.DARK, isGreen && 'GreenScreen')}
       keyMap={keyMap}
       handlers={handlers}
     >

From 1581227449cc87a23a2f050042b1ad9ac901ece0 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Mon, 18 Mar 2024 13:38:22 +0800
Subject: [PATCH 05/22] Remove unnecessary braces around string attributes

Only done for non-UI (non-message/label) strings as these UI strings
will be pulled out for internationalization in the future.
---
 .../EditingWorkspaceSideContentTextAreaContent.tsx          | 2 +-
 src/commons/navigationBar/NavigationBar.tsx                 | 2 +-
 .../sideContent/content/SideContentFaceapiDisplay.tsx       | 4 ++--
 src/commons/sourceRecorder/SourceRecorderTable.tsx          | 2 +-
 src/features/cseMachine/CseMachineLayout.tsx                | 2 +-
 src/features/cseMachine/components/ControlItemComponent.tsx | 2 +-
 src/features/cseMachine/components/StashItemComponent.tsx   | 2 +-
 src/features/cseMachine/components/values/FnValue.tsx       | 4 ++--
 src/features/cseMachine/components/values/GlobalFnValue.tsx | 4 ++--
 src/features/dataVisualizer/drawable/ArrayDrawable.tsx      | 6 +++---
 .../adminPanel/subcomponents/AddStoriesUserPanel.tsx        | 2 +-
 src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx | 2 +-
 .../adminPanel/subcomponents/NotificationConfigPanel.tsx    | 2 +-
 .../assessmentConfigPanel/AssessmentConfigPanel.tsx         | 2 +-
 .../subcomponents/userConfigPanel/UserConfigPanel.tsx       | 2 +-
 src/pages/academy/dashboard/Dashboard.tsx                   | 2 +-
 .../chapterSimulator/ChapterSimulatorTextLoader.tsx         | 2 +-
 src/pages/academy/groundControl/GroundControl.tsx           | 2 +-
 src/pages/academy/notiPreference/NotiPreference.tsx         | 2 +-
 19 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentTextAreaContent.tsx b/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentTextAreaContent.tsx
index e737cbeb93..fae6f33720 100644
--- a/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentTextAreaContent.tsx
+++ b/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentTextAreaContent.tsx
@@ -57,7 +57,7 @@ export const TextAreaContent: React.FC<TextAreaContentProps> = props => {
   const makeEditingTextarea = () => (
     <Textarea
       autoFocus={true}
-      className={'editing-textarea'}
+      className="editing-textarea"
       onChange={handleEditAssessment}
       onBlur={saveEditAssessment}
       value={fieldValue}
diff --git a/src/commons/navigationBar/NavigationBar.tsx b/src/commons/navigationBar/NavigationBar.tsx
index df8c4ebdb9..0bf1c6ddfe 100644
--- a/src/commons/navigationBar/NavigationBar.tsx
+++ b/src/commons/navigationBar/NavigationBar.tsx
@@ -245,7 +245,7 @@ const NavigationBar: React.FC = () => {
           position={Position.BOTTOM_RIGHT}
           interactionKind="hover"
           content={desktopNavbarLeftPopoverContent}
-          popoverClassName={'desktop-navbar-popover'}
+          popoverClassName="desktop-navbar-popover"
           disabled={!enableDesktopPopover}
         >
           <NavLink
diff --git a/src/commons/sideContent/content/SideContentFaceapiDisplay.tsx b/src/commons/sideContent/content/SideContentFaceapiDisplay.tsx
index bdead31ee4..ecdede9192 100644
--- a/src/commons/sideContent/content/SideContentFaceapiDisplay.tsx
+++ b/src/commons/sideContent/content/SideContentFaceapiDisplay.tsx
@@ -21,7 +21,7 @@ const SideContentFaceapiDisplay: React.FC = () => {
     <div className="sa-video-header">
       <div className="sa-video-header-element">
         <Button
-          className={'sa-live-video-button'}
+          className="sa-live-video-button"
           style={{ height: 20 }}
           icon={IconNames.CAMERA}
           onClick={takePhoto}
@@ -35,7 +35,7 @@ const SideContentFaceapiDisplay: React.FC = () => {
       <Divider />
       <div className="sa-video-header-element">
         <Button
-          className={'sa-still-image-button'}
+          className="sa-still-image-button"
           style={{ height: 20 }}
           icon={IconNames.RESET}
           onClick={resetPhoto}
diff --git a/src/commons/sourceRecorder/SourceRecorderTable.tsx b/src/commons/sourceRecorder/SourceRecorderTable.tsx
index 4298b5f481..cd4d33171b 100644
--- a/src/commons/sourceRecorder/SourceRecorderTable.tsx
+++ b/src/commons/sourceRecorder/SourceRecorderTable.tsx
@@ -169,7 +169,7 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
         <div className="SourcecastTable">
           <div className="ag-grid-parent">
             <AgGridReact
-              domLayout={'autoHeight'}
+              domLayout="autoHeight"
               columnDefs={this.state.columnDefs}
               defaultColDef={this.defaultColumnDefs}
               onGridReady={this.onGridReady}
diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index 3f6b5ef13d..44888655b4 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -424,7 +424,7 @@ export class Layout {
       return Layout.prevLayout;
     } else {
       const layout = (
-        <div className={'sa-cse-machine'} data-testid="sa-cse-machine">
+        <div className="sa-cse-machine" data-testid="sa-cse-machine">
           <div
             id="scroll-container"
             ref={Layout.scrollContainerRef}
diff --git a/src/features/cseMachine/components/ControlItemComponent.tsx b/src/features/cseMachine/components/ControlItemComponent.tsx
index f6f6a50cc2..272671dd2d 100644
--- a/src/features/cseMachine/components/ControlItemComponent.tsx
+++ b/src/features/cseMachine/components/ControlItemComponent.tsx
@@ -123,7 +123,7 @@ export class ControlItemComponent extends Visible implements IHoverable {
           <Tag
             {...ShapeDefaultProps}
             stroke="black"
-            fill={'black'}
+            fill="black"
             opacity={ControlStashConfig.TooltipOpacity}
           />
           <Text
diff --git a/src/features/cseMachine/components/StashItemComponent.tsx b/src/features/cseMachine/components/StashItemComponent.tsx
index 3587b35d54..d1b0265da9 100644
--- a/src/features/cseMachine/components/StashItemComponent.tsx
+++ b/src/features/cseMachine/components/StashItemComponent.tsx
@@ -123,7 +123,7 @@ export class StashItemComponent extends Visible implements IHoverable {
           <Tag
             {...ShapeDefaultProps}
             stroke="black"
-            fill={'black'}
+            fill="black"
             opacity={ControlStashConfig.TooltipOpacity}
           />
           <Text
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index 507291f622..745bfa9c16 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -160,7 +160,7 @@ export class FnValue extends Value implements IHoverable {
             visible={true}
             ref={this.labelRef}
           >
-            <KonvaTag stroke="black" fill={'white'} opacity={Config.FnTooltipOpacity} />
+            <KonvaTag stroke="black" fill="white" opacity={Config.FnTooltipOpacity} />
             <KonvaText
               text={this.exportTooltip}
               fontFamily={Config.FontFamily}
@@ -177,7 +177,7 @@ export class FnValue extends Value implements IHoverable {
             visible={false}
             ref={this.labelRef}
           >
-            <KonvaTag stroke="black" fill={'black'} opacity={Config.FnTooltipOpacity} />
+            <KonvaTag stroke="black" fill="black" opacity={Config.FnTooltipOpacity} />
             <KonvaText
               text={this.tooltip}
               fontFamily={Config.FontFamily}
diff --git a/src/features/cseMachine/components/values/GlobalFnValue.tsx b/src/features/cseMachine/components/values/GlobalFnValue.tsx
index c3934a88e6..1ce26f1292 100644
--- a/src/features/cseMachine/components/values/GlobalFnValue.tsx
+++ b/src/features/cseMachine/components/values/GlobalFnValue.tsx
@@ -187,7 +187,7 @@ export class GlobalFnValue extends Value implements IHoverable {
             visible={true}
             ref={this.labelRef}
           >
-            <KonvaTag stroke="black" fill={'white'} opacity={Config.FnTooltipOpacity} />
+            <KonvaTag stroke="black" fill="white" opacity={Config.FnTooltipOpacity} />
             <KonvaText
               text={this.exportTooltip}
               fontFamily={Config.FontFamily}
@@ -204,7 +204,7 @@ export class GlobalFnValue extends Value implements IHoverable {
             visible={false}
             ref={this.labelRef}
           >
-            <KonvaTag stroke="black" fill={'black'} opacity={Config.FnTooltipOpacity} />
+            <KonvaTag stroke="black" fill="black" opacity={Config.FnTooltipOpacity} />
             <KonvaText
               text={this.tooltip}
               fontFamily={Config.FontFamily}
diff --git a/src/features/dataVisualizer/drawable/ArrayDrawable.tsx b/src/features/dataVisualizer/drawable/ArrayDrawable.tsx
index 494004da84..8f37d7d716 100644
--- a/src/features/dataVisualizer/drawable/ArrayDrawable.tsx
+++ b/src/features/dataVisualizer/drawable/ArrayDrawable.tsx
@@ -27,12 +27,12 @@ class ArrayDrawable extends React.PureComponent<ArrayProps> {
           <Text
             key={'' + nodeValue + index}
             text={textToDisplay}
-            align={'center'}
+            align="center"
             width={Config.BoxWidth}
             x={Config.BoxWidth * index}
             y={Math.floor((Config.BoxHeight - 1.2 * 12) / 2)}
             fontStyle={textValue === undefined ? 'italic' : 'normal'}
-            fill={'white'}
+            fill="white"
             preventDefault={false}
           />
         );
@@ -55,7 +55,7 @@ class ArrayDrawable extends React.PureComponent<ArrayProps> {
           height={Config.BoxHeight}
           strokeWidth={Config.StrokeWidth}
           stroke={Config.Stroke}
-          fill={'#17181A'}
+          fill="#17181A"
           preventDefault={false}
         />
         {/* Vertical lines in the box */}
diff --git a/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx b/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx
index 96752de472..06a3adbbdf 100644
--- a/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx
@@ -65,7 +65,7 @@ const AddStoriesUserPanel: React.FC<Props> = props => {
   const grid = (
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
-        domLayout={'autoHeight'}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
diff --git a/src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx b/src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx
index 13637fbf66..f13fb7534c 100644
--- a/src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx
@@ -65,7 +65,7 @@ const AddUserPanel: React.FC<Props> = props => {
   const grid = (
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
-        domLayout={'autoHeight'}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
diff --git a/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx
index 008531d606..6c5a469a71 100644
--- a/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx
@@ -191,7 +191,7 @@ const NotificationConfigPanel = () => {
   const grid = (
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
-        domLayout={'autoHeight'}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
diff --git a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
index 0871fb53af..7fbced953b 100644
--- a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
@@ -232,7 +232,7 @@ const AssessmentConfigPanel: React.FC<Props> = ({
   const grid = (
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
-        domLayout={'autoHeight'}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
diff --git a/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx
index f0a65b5bfb..b292121b35 100644
--- a/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx
@@ -79,7 +79,7 @@ const UserConfigPanel: React.FC<Props> = props => {
   const grid = (
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
-        domLayout={'autoHeight'}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
diff --git a/src/pages/academy/dashboard/Dashboard.tsx b/src/pages/academy/dashboard/Dashboard.tsx
index c3c0dacbf6..15b3a55c17 100644
--- a/src/pages/academy/dashboard/Dashboard.tsx
+++ b/src/pages/academy/dashboard/Dashboard.tsx
@@ -44,7 +44,7 @@ const Dashboard: React.FC = () => {
     <div className="Dashboard">
       <div className="Grid ag-grid-parent ag-theme-balham">
         <AgGridReact
-          domLayout={'autoHeight'}
+          domLayout="autoHeight"
           columnDefs={columnDefs}
           defaultColDef={defaultColumnDefs}
           onGridReady={onGridReady}
diff --git a/src/pages/academy/gameSimulator/subcomponents/chapterSimulator/ChapterSimulatorTextLoader.tsx b/src/pages/academy/gameSimulator/subcomponents/chapterSimulator/ChapterSimulatorTextLoader.tsx
index b5a7c64c03..22e321de2c 100644
--- a/src/pages/academy/gameSimulator/subcomponents/chapterSimulator/ChapterSimulatorTextLoader.tsx
+++ b/src/pages/academy/gameSimulator/subcomponents/chapterSimulator/ChapterSimulatorTextLoader.tsx
@@ -46,7 +46,7 @@ const ChapterSimulatorTextLoader: React.FC<StorageProps> = ({ storageName, s3Txt
           </option>
         ))}
       </select>
-      <Button icon={'download'} onClick={() => window.open(toTxtPath(chosenFilename))} />
+      <Button icon="download" onClick={() => window.open(toTxtPath(chosenFilename))} />
     </>
   );
 
diff --git a/src/pages/academy/groundControl/GroundControl.tsx b/src/pages/academy/groundControl/GroundControl.tsx
index 375bbe6bc3..063c6f0f3e 100644
--- a/src/pages/academy/groundControl/GroundControl.tsx
+++ b/src/pages/academy/groundControl/GroundControl.tsx
@@ -167,7 +167,7 @@ class GroundControl extends React.Component<GroundControlProps, State> {
     const grid = (
       <div className="Grid ag-grid-parent ag-theme-balham">
         <AgGridReact
-          domLayout={'autoHeight'}
+          domLayout="autoHeight"
           columnDefs={this.columnDefs}
           defaultColDef={this.defaultColumnDefs}
           onGridReady={this.onGridReady}
diff --git a/src/pages/academy/notiPreference/NotiPreference.tsx b/src/pages/academy/notiPreference/NotiPreference.tsx
index 2476be1eb1..a03d62b8c0 100644
--- a/src/pages/academy/notiPreference/NotiPreference.tsx
+++ b/src/pages/academy/notiPreference/NotiPreference.tsx
@@ -154,7 +154,7 @@ const NotiPreference: React.FC = () => {
       <H1>Notifications</H1>
       <div className="Grid ag-grid-parent ag-theme-balham">
         <AgGridReact
-          domLayout={'autoHeight'}
+          domLayout="autoHeight"
           columnDefs={columnDefs}
           defaultColDef={defaultColumnDefs}
           onGridReady={onGridReady}

From eb3f2ad5991bea0ab442b054bf8ecc87614b1e15 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Wed, 27 Mar 2024 00:14:04 +0800
Subject: [PATCH 06/22] Deduplicate dependencies

---
 yarn.lock | 45 ++++-----------------------------------------
 1 file changed, 4 insertions(+), 41 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 65d0690604..9f728f2a74 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -287,12 +287,7 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.19.4", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9":
-  version "7.23.9"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
-  integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
-
-"@babel/parser@^7.24.0":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.19.4", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.24.0":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.0.tgz#26a3d1ff49031c53a97d03b604375f028746a9ac"
   integrity sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==
@@ -1131,14 +1126,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.23.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
-  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
-"@babel/runtime@^7.12.0", "@babel/runtime@^7.18.3":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
   integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
@@ -1154,23 +1142,7 @@
     "@babel/parser" "^7.23.9"
     "@babel/types" "^7.23.9"
 
-"@babel/traverse@^7.23.9", "@babel/traverse@^7.7.2":
-  version "7.23.9"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.9.tgz#2f9d6aead6b564669394c5ce0f9302bb65b9d950"
-  integrity sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==
-  dependencies:
-    "@babel/code-frame" "^7.23.5"
-    "@babel/generator" "^7.23.6"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.23.9"
-    "@babel/types" "^7.23.9"
-    debug "^4.3.1"
-    globals "^11.1.0"
-
-"@babel/traverse@^7.4.5":
+"@babel/traverse@^7.23.9", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.0.tgz#4a408fbf364ff73135c714a2ab46a5eab2831b1e"
   integrity sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==
@@ -1186,16 +1158,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.23.9", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
-  version "7.23.9"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.9.tgz#1dd7b59a9a2b5c87f8b41e52770b5ecbf492e002"
-  integrity sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==
-  dependencies:
-    "@babel/helper-string-parser" "^7.23.4"
-    "@babel/helper-validator-identifier" "^7.22.20"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.24.0":
+"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.23.9", "@babel/types@^7.24.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
   integrity sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==

From 69691323437fbafa171eaa33dfed72a855c1f755 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 12:09:03 +0800
Subject: [PATCH 07/22] Create `useTokens` hook

---
 src/commons/utils/Hooks.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/commons/utils/Hooks.ts b/src/commons/utils/Hooks.ts
index 2b306e8b3a..ac60c0a3e5 100644
--- a/src/commons/utils/Hooks.ts
+++ b/src/commons/utils/Hooks.ts
@@ -7,6 +7,7 @@ import {
 import { useMediaQuery } from 'react-responsive';
 
 import { OverallState } from '../application/ApplicationTypes';
+import { Tokens } from '../application/types/SessionTypes';
 import Constants from './Constants';
 import { readLocalStorage, setLocalStorage } from './LocalStorageHelper';
 
@@ -135,3 +136,23 @@ export const useSession = () => {
     isLoggedIn
   };
 };
+
+// Overload for useTokens
+type UseTokens = {
+  (): Partial<Tokens>;
+  (options: { throwWhenEmpty: true }): Tokens;
+  (options: { throwWhenEmpty: false }): Partial<Tokens>;
+};
+
+/**
+ * Returns the access token and refresh token from the session.
+ * @param throwWhenEmpty (optional) If true, throws an error if no tokens are found.
+ */
+export const useTokens: UseTokens = ({ throwWhenEmpty = false } = {}) => {
+  const accessToken = useTypedSelector(state => state.session.accessToken);
+  const refreshToken = useTypedSelector(state => state.session.refreshToken);
+  if (throwWhenEmpty && (!accessToken || !refreshToken)) {
+    throw new Error('No access token or refresh token found');
+  }
+  return { accessToken, refreshToken } as Tokens;
+};

From 2563d2ef9313a8a9b34e8b30b01749575a123561 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 12:10:21 +0800
Subject: [PATCH 08/22] Update default throw behavior for `useTokens`

---
 src/commons/utils/Hooks.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/commons/utils/Hooks.ts b/src/commons/utils/Hooks.ts
index ac60c0a3e5..affb0189b9 100644
--- a/src/commons/utils/Hooks.ts
+++ b/src/commons/utils/Hooks.ts
@@ -148,7 +148,7 @@ type UseTokens = {
  * Returns the access token and refresh token from the session.
  * @param throwWhenEmpty (optional) If true, throws an error if no tokens are found.
  */
-export const useTokens: UseTokens = ({ throwWhenEmpty = false } = {}) => {
+export const useTokens: UseTokens = ({ throwWhenEmpty = true } = {}) => {
   const accessToken = useTypedSelector(state => state.session.accessToken);
   const refreshToken = useTypedSelector(state => state.session.refreshToken);
   if (throwWhenEmpty && (!accessToken || !refreshToken)) {

From 95647b86bfb0b3d12bac88aa917fca666ee458b0 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 12:11:28 +0800
Subject: [PATCH 09/22] Render SICP chatbot only when logged in

---
 src/pages/sicp/Sicp.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/sicp/Sicp.tsx b/src/pages/sicp/Sicp.tsx
index c0e0960305..01d26d5e9f 100644
--- a/src/pages/sicp/Sicp.tsx
+++ b/src/pages/sicp/Sicp.tsx
@@ -7,6 +7,7 @@ import { useDispatch } from 'react-redux';
 import { useLocation, useNavigate, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import Constants from 'src/commons/utils/Constants';
+import { useSession } from 'src/commons/utils/Hooks';
 import { setLocalStorage } from 'src/commons/utils/LocalStorageHelper';
 import { resetWorkspace, toggleUsingSubst } from 'src/commons/workspace/WorkspaceActions';
 import { parseArr, ParseJsonError } from 'src/features/sicp/parser/ParseJson';
@@ -43,6 +44,7 @@ const Sicp: React.FC = () => {
   const refs = React.useRef({});
   const navigate = useNavigate();
   const location = useLocation();
+  const { isLoggedIn } = useSession();
 
   function getSection() {
     return location.pathname.replace('/sicpjs/', ''); // To discard the '/sicpjs/'
@@ -197,7 +199,7 @@ const Sicp: React.FC = () => {
           )}
         </CodeSnippetContext.Provider>
       </SicpErrorBoundary>
-      <Chatbot getSection={getSection} getText={getText} />
+      {isLoggedIn && <Chatbot getSection={getSection} getText={getText} />}
     </div>
   );
 };

From e678868f08c3d92f5a5cddbaffa9aeb71ba958fd Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 12:12:16 +0800
Subject: [PATCH 10/22] Fix overloaded types for `useTokens`

Done following default behavior change.
---
 src/commons/utils/Hooks.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/commons/utils/Hooks.ts b/src/commons/utils/Hooks.ts
index affb0189b9..226a2c9210 100644
--- a/src/commons/utils/Hooks.ts
+++ b/src/commons/utils/Hooks.ts
@@ -139,7 +139,7 @@ export const useSession = () => {
 
 // Overload for useTokens
 type UseTokens = {
-  (): Partial<Tokens>;
+  (): Tokens;
   (options: { throwWhenEmpty: true }): Tokens;
   (options: { throwWhenEmpty: false }): Partial<Tokens>;
 };

From dfeb9da5443bd44ab89150b6c1c1ec3129cd9862 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 12:31:01 +0800
Subject: [PATCH 11/22] Use `useTokens` where applicable

---
 .../configureControls/ExportScoreLeaderboardButton.tsx      | 6 ++----
 .../configureControls/ExportVoteLeaderboardButton.tsx       | 6 ++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/pages/academy/groundControl/configureControls/ExportScoreLeaderboardButton.tsx b/src/pages/academy/groundControl/configureControls/ExportScoreLeaderboardButton.tsx
index 76c00fceda..f0a375fec6 100644
--- a/src/pages/academy/groundControl/configureControls/ExportScoreLeaderboardButton.tsx
+++ b/src/pages/academy/groundControl/configureControls/ExportScoreLeaderboardButton.tsx
@@ -1,17 +1,15 @@
 import { IconNames } from '@blueprintjs/icons';
 import { createGrid, GridOptions } from 'ag-grid-community';
-import { Tokens } from 'src/commons/application/types/SessionTypes';
 import ControlButton from 'src/commons/ControlButton';
 import { getScoreLeaderboard } from 'src/commons/sagas/RequestsSaga';
-import { useSession } from 'src/commons/utils/Hooks';
+import { useTokens } from 'src/commons/utils/Hooks';
 
 type Props = {
   assessmentId: number;
 };
 
 const ExportScoreLeaderboardButton: React.FC<Props> = ({ assessmentId }) => {
-  const { accessToken, refreshToken } = useSession();
-  const tokens = { accessToken, refreshToken } as Tokens;
+  const tokens = useTokens();
 
   // onClick handler for fetching score leaderboard, putting it into a grid and exporting data
   const exportScoreLeaderboardToCsv = async () => {
diff --git a/src/pages/academy/groundControl/configureControls/ExportVoteLeaderboardButton.tsx b/src/pages/academy/groundControl/configureControls/ExportVoteLeaderboardButton.tsx
index b0cc8cf286..912a91c5c6 100644
--- a/src/pages/academy/groundControl/configureControls/ExportVoteLeaderboardButton.tsx
+++ b/src/pages/academy/groundControl/configureControls/ExportVoteLeaderboardButton.tsx
@@ -1,17 +1,15 @@
 import { IconNames } from '@blueprintjs/icons';
 import { createGrid, GridOptions } from 'ag-grid-community';
-import { Tokens } from 'src/commons/application/types/SessionTypes';
 import ControlButton from 'src/commons/ControlButton';
 import { getPopularVoteLeaderboard } from 'src/commons/sagas/RequestsSaga';
-import { useSession } from 'src/commons/utils/Hooks';
+import { useTokens } from 'src/commons/utils/Hooks';
 
 type Props = {
   assessmentId: number;
 };
 
 const ExportVoteLeaderboardButton: React.FC<Props> = ({ assessmentId }) => {
-  const { accessToken, refreshToken } = useSession();
-  const tokens = { accessToken, refreshToken } as Tokens;
+  const tokens = useTokens({ throwWhenEmpty: true });
 
   // onClick handler for fetching popular vote leaderboard, putting it into a grid and exporting data
   const exportPopularVoteLeaderboardToCsv = async () => {

From 06b21ab6ee445eac2cbb56bd299ac6d093e8bc6b Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 12:31:44 +0800
Subject: [PATCH 12/22] Refactor SICP chatbox

* Use `useTokens`
* Move API call to separate file
* Update React import to default import
---
 src/commons/sagas/RequestsSaga.ts             | 22 ------------------
 src/features/sicp/api.ts                      | 23 +++++++++++++++++++
 .../sicp/subcomponents/chatbot/ChatBox.tsx    |  9 ++++----
 3 files changed, 27 insertions(+), 27 deletions(-)
 create mode 100644 src/features/sicp/api.ts

diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
index 50e95e8626..d99b0fca05 100644
--- a/src/commons/sagas/RequestsSaga.ts
+++ b/src/commons/sagas/RequestsSaga.ts
@@ -1614,28 +1614,6 @@ export async function deleteDevice(device: Pick<Device, 'id'>, tokens?: Tokens):
   return true;
 }
 
-/**
- * POST /chat
- */
-
-export async function chat(
-  tokens: Tokens,
-  payload: { role: string; content: string }[]
-): Promise<string> {
-  const response = await request(`chat`, 'POST', {
-    ...tokens,
-    body: { json: payload }
-  });
-  if (!response) {
-    throw new Error('Unknown error occurred.');
-  }
-  if (!response.ok) {
-    const message = await response.text();
-    throw new Error(`Failed to chat to louis: ${message}`);
-  }
-  return response.text();
-}
-
 function fillTokens(tokens?: Tokens): Tokens {
   tokens = tokens || getTokensFromStore();
   if (!tokens) {
diff --git a/src/features/sicp/api.ts b/src/features/sicp/api.ts
new file mode 100644
index 0000000000..610660d479
--- /dev/null
+++ b/src/features/sicp/api.ts
@@ -0,0 +1,23 @@
+import { Tokens } from 'src/commons/application/types/SessionTypes';
+import { request } from 'src/commons/utils/RequestHelper';
+
+/**
+ * POST /chat
+ */
+export async function chat(
+  tokens: Tokens,
+  payload: { role: string; content: string }[]
+): Promise<string> {
+  const response = await request(`chat`, 'POST', {
+    ...tokens,
+    body: { json: payload }
+  });
+  if (!response) {
+    throw new Error('Unknown error occurred.');
+  }
+  if (!response.ok) {
+    const message = await response.text();
+    throw new Error(`Failed to chat to louis: ${message}`);
+  }
+  return response.text();
+}
diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index c55337142b..21e9c483b2 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -1,11 +1,11 @@
 import { Button } from '@blueprintjs/core';
-import * as React from 'react';
+import React from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { useSession } from 'src/commons/utils/Hooks';
+import { useTokens } from 'src/commons/utils/Hooks';
+import { chat } from 'src/features/sicp/api';
 import { SourceTheme } from 'src/features/sicp/SourceTheme';
 import classes from 'src/styles/Chatbot.module.scss';
 
-import { chat } from '../../../../commons/sagas/RequestsSaga';
 import SICPNotes from './SicpNotes';
 
 type Props = {
@@ -22,7 +22,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
   const [userInput, setUserInput] = React.useState('');
   const [contentHistory, setContentHistory] = React.useState<Array<string>>([]);
   const [roleHistory, setRoleHistory] = React.useState<Array<string>>([]);
-  const { accessToken, refreshToken } = useSession();
+  const tokens = useTokens();
 
   const handleUserInput = (event: React.ChangeEvent<HTMLInputElement>) => {
     setUserInput(event.target.value);
@@ -75,7 +75,6 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
       payload.push({ role: roleHistory[i], content: contentHistory[i] });
     }
     payload.push({ role: 'user', content: _userInput });
-    const tokens = { accessToken: accessToken!, refreshToken: refreshToken! };
     chat(tokens, payload)
       .then(text => {
         const keptContentHistory =

From e296979f090e32d4a848d38848a5794658da33a3 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 12:35:57 +0800
Subject: [PATCH 13/22] Refactor SICP chatbox further

* Update imports
* Create and use ChatMessage type alias
---
 .../sicp/subcomponents/chatbot/ChatBox.tsx    | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index 21e9c483b2..cd818226c0 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@blueprintjs/core';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { useTokens } from 'src/commons/utils/Hooks';
 import { chat } from 'src/features/sicp/api';
@@ -13,15 +13,19 @@ type Props = {
   getText: () => string;
 };
 
+type ChatMessage = { role: 'user' | 'bot'; content: string[] };
+const initialMessage: ChatMessage = {
+  content: ['Ask me something about this paragraph!'],
+  role: 'bot'
+};
+
 const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
-  const chatRef = React.useRef<HTMLDivElement | null>(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [messages, setMessages] = React.useState<{ role: 'user' | 'bot'; content: string[] }[]>([
-    { content: ['Ask me something about this paragraph!'], role: 'bot' }
-  ]);
-  const [userInput, setUserInput] = React.useState('');
-  const [contentHistory, setContentHistory] = React.useState<Array<string>>([]);
-  const [roleHistory, setRoleHistory] = React.useState<Array<string>>([]);
+  const chatRef = useRef<HTMLDivElement>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>([initialMessage]);
+  const [userInput, setUserInput] = useState('');
+  const [contentHistory, setContentHistory] = useState<Array<string>>([]);
+  const [roleHistory, setRoleHistory] = useState<Array<string>>([]);
   const tokens = useTokens();
 
   const handleUserInput = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -132,7 +136,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     scrollToBottom();
   }, [messages, isLoading]);
 

From ebc015d6ae88aecfd6ac6b5d1cce313b99c5256b Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 12:40:47 +0800
Subject: [PATCH 14/22] Reorganize SICP chatbot files

---
 src/features/sicp/{ => chatCompletion}/api.ts    | 0
 src/pages/sicp/subcomponents/chatbot/ChatBox.tsx | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/features/sicp/{ => chatCompletion}/api.ts (100%)

diff --git a/src/features/sicp/api.ts b/src/features/sicp/chatCompletion/api.ts
similarity index 100%
rename from src/features/sicp/api.ts
rename to src/features/sicp/chatCompletion/api.ts
diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index cd818226c0..6b68157937 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -2,7 +2,7 @@ import { Button } from '@blueprintjs/core';
 import React, { useEffect, useRef, useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { useTokens } from 'src/commons/utils/Hooks';
-import { chat } from 'src/features/sicp/api';
+import { chat } from 'src/features/sicp/chatCompletion/api';
 import { SourceTheme } from 'src/features/sicp/SourceTheme';
 import classes from 'src/styles/Chatbot.module.scss';
 

From 85f914a0d8289c018e835c52c78016f691b5e506 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 13:06:32 +0800
Subject: [PATCH 15/22] Refactor chat completion logic

* Use dependency injection in prompt builder
* Refactor prompt builder logic
* Refactor prompt builder to separate file
* Create type definitions
* Move, type, rename SICP section summaries
* Improve typing
---
 .../sicp/chatCompletion/chatCompletion.ts     | 22 +++++++++++++
 .../sicp/chatCompletion/sicpNotes.ts}         |  6 ++--
 src/pages/sicp/Sicp.tsx                       |  4 ++-
 .../sicp/subcomponents/chatbot/ChatBox.tsx    | 31 ++-----------------
 .../sicp/subcomponents/chatbot/Chatbot.tsx    |  3 +-
 5 files changed, 34 insertions(+), 32 deletions(-)
 create mode 100644 src/features/sicp/chatCompletion/chatCompletion.ts
 rename src/{pages/sicp/subcomponents/chatbot/SicpNotes.ts => features/sicp/chatCompletion/sicpNotes.ts} (99%)

diff --git a/src/features/sicp/chatCompletion/chatCompletion.ts b/src/features/sicp/chatCompletion/chatCompletion.ts
new file mode 100644
index 0000000000..a7a8183276
--- /dev/null
+++ b/src/features/sicp/chatCompletion/chatCompletion.ts
@@ -0,0 +1,22 @@
+import sicpNotes from './SicpNotes';
+
+const promptPrefix =
+  'You are a competent tutor, assisting a student who is learning computer science following the textbook "Structure and Interpretation of Computer Programs,' +
+  'JavaScript edition". The student request is about a paragraph of the book. The request may be a follow-up request to a request that was posed to you' +
+  'previously.\n' +
+  'What follows are:\n' +
+  '(1) the summary of section (2) the full paragraph. Please answer the student request,' +
+  'not the requests of the history. If the student request is not related to the book, ask them to ask questions that are related to the book. Do not say that I provide you text.\n\n';
+
+const queryPrefix = '\n(2) Here is the paragraph:\n';
+
+export type SicpSection = `${number}` | `${number}.${number}` | `${number}.${number}.${number}`;
+export const buildPrompt = <T extends SicpSection>(section: T, query: string) => {
+  const sectionSummary = sicpNotes[section as SicpSection];
+  const sectionPrefix =
+    sectionSummary === undefined
+      ? '\n(1) There is no section summary for this section. Please answer the question based on the following paragraph.\n'
+      : '\n(1) Here is the summary of this section:\n' + sectionSummary;
+
+  return promptPrefix + sectionPrefix + queryPrefix + query;
+};
diff --git a/src/pages/sicp/subcomponents/chatbot/SicpNotes.ts b/src/features/sicp/chatCompletion/sicpNotes.ts
similarity index 99%
rename from src/pages/sicp/subcomponents/chatbot/SicpNotes.ts
rename to src/features/sicp/chatCompletion/sicpNotes.ts
index 8d780bb485..ee463f22e1 100644
--- a/src/pages/sicp/subcomponents/chatbot/SicpNotes.ts
+++ b/src/features/sicp/chatCompletion/sicpNotes.ts
@@ -1,3 +1,5 @@
+import { SicpSection } from './chatCompletion';
+
 const summary1 =
   '1. Building Abstractions with Functions' +
   '\n1. **Introduction to Programming Concepts:**' +
@@ -1144,7 +1146,7 @@ const summary3_5_5 =
 
 //...
 
-const SICPNotes = {
+const sicpNotes: Partial<Record<SicpSection, string>> = {
   '1': summary1,
   '1.1': summary1_1,
   '1.1.1': summary1_1_1,
@@ -1219,4 +1221,4 @@ const SICPNotes = {
   //...
 };
 
-export default SICPNotes;
+export default sicpNotes;
diff --git a/src/pages/sicp/Sicp.tsx b/src/pages/sicp/Sicp.tsx
index 01d26d5e9f..1419ea43f1 100644
--- a/src/pages/sicp/Sicp.tsx
+++ b/src/pages/sicp/Sicp.tsx
@@ -10,6 +10,7 @@ import Constants from 'src/commons/utils/Constants';
 import { useSession } from 'src/commons/utils/Hooks';
 import { setLocalStorage } from 'src/commons/utils/LocalStorageHelper';
 import { resetWorkspace, toggleUsingSubst } from 'src/commons/workspace/WorkspaceActions';
+import { SicpSection } from 'src/features/sicp/chatCompletion/chatCompletion';
 import { parseArr, ParseJsonError } from 'src/features/sicp/parser/ParseJson';
 import { getNext, getPrev } from 'src/features/sicp/TableOfContentsHelper';
 import {
@@ -47,7 +48,8 @@ const Sicp: React.FC = () => {
   const { isLoggedIn } = useSession();
 
   function getSection() {
-    return location.pathname.replace('/sicpjs/', ''); // To discard the '/sicpjs/'
+    // To discard the '/sicpjs/'
+    return location.pathname.replace('/sicpjs/', '') as SicpSection;
   }
 
   const getText = () => {
diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index 6b68157937..29ab3ecac6 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -3,13 +3,12 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { useTokens } from 'src/commons/utils/Hooks';
 import { chat } from 'src/features/sicp/chatCompletion/api';
+import { buildPrompt, SicpSection } from 'src/features/sicp/chatCompletion/chatCompletion';
 import { SourceTheme } from 'src/features/sicp/SourceTheme';
 import classes from 'src/styles/Chatbot.module.scss';
 
-import SICPNotes from './SicpNotes';
-
 type Props = {
-  getSection: () => string;
+  getSection: () => SicpSection;
   getText: () => string;
 };
 
@@ -37,30 +36,6 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
     return temp.split('```');
   };
 
-  const text = () => {
-    return '\n(2) Here is the paragraph:\n' + getText();
-  };
-
-  const section = () => {
-    const sectionNumber = getSection();
-    return parseInt(sectionNumber.charAt(0), 10) > 3
-      ? '\n(1) There is no section summary for this section. Please answer the question based on the following paragraph\n'
-      : '\n(1) Here is the summary of this section:\n' + SICPNotes[getSection()];
-  };
-
-  function getPrompt() {
-    const prompt =
-      'You are a competent tutor, assisting a student who is learning computer science following the textbook "Structure and Interpretation of Computer Programs,' +
-      'JavaScript edition". The student request is about a paragraph of the book. The request may be a follow-up request to a request that was posed to you' +
-      'previously.\n' +
-      'What follows are:\n' +
-      '(1) the summary of section (2) the full paragraph. Please answer the student request,' +
-      'not the requests of the history. If the student request is not related to the book, ask them to ask questions that are related to the book. Donot say that I provide you text\n\n' +
-      section() +
-      text();
-    return prompt;
-  }
-
   const sendMessage = async () => {
     if (userInput.trim() === '') {
       return;
@@ -73,7 +48,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
     setMessages([...messages, { role: 'user', content: blocks }]);
     setIsLoading(true);
 
-    const prompt = getPrompt();
+    const prompt = buildPrompt(getSection(), getText());
     const payload: { role: string; content: string }[] = [{ role: 'system', content: prompt }];
     for (let i = 0; i < contentHistory.length; i++) {
       payload.push({ role: roleHistory[i], content: contentHistory[i] });
diff --git a/src/pages/sicp/subcomponents/chatbot/Chatbot.tsx b/src/pages/sicp/subcomponents/chatbot/Chatbot.tsx
index d2f5a1fc22..840256c2d2 100644
--- a/src/pages/sicp/subcomponents/chatbot/Chatbot.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/Chatbot.tsx
@@ -2,12 +2,13 @@ import { AnchorButton, Icon } from '@blueprintjs/core';
 import * as React from 'react';
 import logo from 'src/assets/SA.jpg';
 import { useSession } from 'src/commons/utils/Hooks';
+import { SicpSection } from 'src/features/sicp/chatCompletion/chatCompletion';
 import classes from 'src/styles/Chatbot.module.scss';
 
 import ChatBox from './ChatBox';
 
 type Props = {
-  getSection: () => string;
+  getSection: () => SicpSection;
   getText: () => string;
 };
 

From b8cf72b65fe3eac92ddaf5994d3cd3f566c2a207 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 13:51:06 +0800
Subject: [PATCH 16/22] Refactor SICP chat box component

* Remove unnecessary template literal
* Refactor constants out of component
* Create type definitions
* Create `CONTEXT_SIZE` constant to replace magic numbers
* Refactor logic to use `CONTEXT_SIZE` constant
* Remove unnecessary state variables
* Refactor payload generation
* Move fetching logic from event handler to effect callback instead
* Rename `cleanMessage` to `resetChat`
---
 .../sicp/subcomponents/chatbot/ChatBox.tsx    | 87 ++++++++++---------
 1 file changed, 47 insertions(+), 40 deletions(-)

diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index 29ab3ecac6..31376c3364 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -17,75 +17,82 @@ const initialMessage: ChatMessage = {
   content: ['Ask me something about this paragraph!'],
   role: 'bot'
 };
+const botErrorMessage: ChatMessage = {
+  content: ['Sorry, I am down with a cold, please try again later.'],
+  role: 'bot'
+};
+
+type Payload = { role: 'user' | 'assistant' | 'system'; content: string }[];
+/** At most CONTEXT_SIZE messages are passed for chat completion. */
+const CONTEXT_SIZE = 20;
 
 const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
   const chatRef = useRef<HTMLDivElement>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [messages, setMessages] = useState<ChatMessage[]>([initialMessage]);
   const [userInput, setUserInput] = useState('');
-  const [contentHistory, setContentHistory] = useState<Array<string>>([]);
-  const [roleHistory, setRoleHistory] = useState<Array<string>>([]);
   const tokens = useTokens();
 
   const handleUserInput = (event: React.ChangeEvent<HTMLInputElement>) => {
     setUserInput(event.target.value);
   };
 
-  // To get code snippets
-  const codeBlocks = (temp: string) => {
-    return temp.split('```');
-  };
+  // TODO: Reimplement
+  // // To get code snippets
+  // const codeBlocks = (temp: string) => {
+  //   return temp.split('```');
+  // };
 
   const sendMessage = async () => {
     if (userInput.trim() === '') {
       return;
     }
-    // clean the input immediately after the user sends the message so that the user would not feel the lag
-    const _userInput = userInput;
-    const _messages = messages;
     setUserInput('');
-    const blocks = codeBlocks(_userInput);
-    setMessages([...messages, { role: 'user', content: blocks }]);
+    setMessages(prev => [...prev, { role: 'user', content: [userInput] }]);
+  };
+
+  // Watch whenever a new message comes in
+  useEffect(() => {
+    if (messages.length === 0) {
+      return;
+    }
+
+    const lastMessage = messages[messages.length - 1];
+    if (lastMessage.role === 'bot') {
+      // Bot has responded
+      return;
+    }
+
+    // User just sent a message
     setIsLoading(true);
 
+    // Bot needs to respond, send payload to chat completion
     const prompt = buildPrompt(getSection(), getText());
-    const payload: { role: string; content: string }[] = [{ role: 'system', content: prompt }];
-    for (let i = 0; i < contentHistory.length; i++) {
-      payload.push({ role: roleHistory[i], content: contentHistory[i] });
-    }
-    payload.push({ role: 'user', content: _userInput });
+    const payload: Payload = [
+      { role: 'system', content: prompt },
+      ...messages.slice(-CONTEXT_SIZE).map(message => {
+        const role = message.role === 'user' ? 'user' : 'assistant';
+        const content = message.content.join('\n');
+        const segment: Payload[number] = { role, content };
+        return segment;
+      })
+    ];
+
     chat(tokens, payload)
       .then(text => {
-        const keptContentHistory =
-          contentHistory.length >= 20 ? contentHistory.slice(2) : contentHistory;
-        const keptRoleHistory = roleHistory.length >= 20 ? roleHistory.slice(2) : roleHistory;
-        setContentHistory([...keptContentHistory, _userInput, text]);
-        setRoleHistory([...keptRoleHistory, 'user', 'assistant']);
-        setMessages([
-          ..._messages,
-          { role: 'user', content: blocks },
-          {
-            role: 'bot',
-            content: [text + '\n\nThe answer is generated by GPT-4 and may not be correct.']
-          }
-        ]);
+        // TODO: + '\n\nThe answer is generated by GPT-4 and may not be correct.'
+        setMessages(prev => [...prev, { role: 'bot', content: [text] }]);
       })
       .catch(e => {
-        setMessages([
-          ..._messages,
-          { role: 'user', content: blocks },
-          { content: [`Sorry, I am down with a cold, please try again later.`], role: 'bot' }
-        ]);
+        setMessages(prev => [...prev, botErrorMessage]);
       })
       .finally(() => {
         setIsLoading(false);
       });
-  };
+  }, [getSection, getText, messages, tokens]);
 
-  const cleanMessage = () => {
-    setMessages([{ content: ['Ask me something about this paragraph!'], role: 'bot' }]);
-    setContentHistory([]);
-    setRoleHistory([]);
+  const resetChat = () => {
+    setMessages([initialMessage]);
   };
 
   const renderMessageContent = (message: string | string[]) => {
@@ -145,7 +152,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
         <Button className={classes['button-send']} onClick={sendMessage}>
           Send
         </Button>
-        <Button className={classes['button-clean']} onClick={cleanMessage}>
+        <Button className={classes['button-clean']} onClick={resetChat}>
           Clean
         </Button>
       </div>

From cc0052f6cfe3d0485b1f10e2bcd21f326a14956e Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 14:12:14 +0800
Subject: [PATCH 17/22] Decouple rendering logic from chat completion logic

* Only store string content in `ChatMessage` type
* Move rendering function outside component to prevent unnecessary recreation
* Update render function signature
* Restore GPT-generated output warning for bot messages
* Refactor render function logic
* Fix React render warnings
* Add TODOs for full Markdown/stories-like parsing

Also uses non-greedy regex to match and split code blocks:

* Only match JavaScript code blocks
* Fix false matches
* Supports multiple code blocks in a single message
---
 .../sicp/subcomponents/chatbot/ChatBox.tsx    | 61 +++++++++----------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index 31376c3364..1523b79b83 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -12,13 +12,13 @@ type Props = {
   getText: () => string;
 };
 
-type ChatMessage = { role: 'user' | 'bot'; content: string[] };
+type ChatMessage = { role: 'user' | 'bot'; content: string };
 const initialMessage: ChatMessage = {
-  content: ['Ask me something about this paragraph!'],
+  content: 'Ask me something about this paragraph!',
   role: 'bot'
 };
 const botErrorMessage: ChatMessage = {
-  content: ['Sorry, I am down with a cold, please try again later.'],
+  content: 'Sorry, I am down with a cold, please try again later.',
   role: 'bot'
 };
 
@@ -37,18 +37,12 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
     setUserInput(event.target.value);
   };
 
-  // TODO: Reimplement
-  // // To get code snippets
-  // const codeBlocks = (temp: string) => {
-  //   return temp.split('```');
-  // };
-
   const sendMessage = async () => {
     if (userInput.trim() === '') {
       return;
     }
     setUserInput('');
-    setMessages(prev => [...prev, { role: 'user', content: [userInput] }]);
+    setMessages(prev => [...prev, { role: 'user', content: userInput }]);
   };
 
   // Watch whenever a new message comes in
@@ -72,16 +66,14 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
       { role: 'system', content: prompt },
       ...messages.slice(-CONTEXT_SIZE).map(message => {
         const role = message.role === 'user' ? 'user' : 'assistant';
-        const content = message.content.join('\n');
-        const segment: Payload[number] = { role, content };
+        const segment: Payload[number] = { role, content: message.content };
         return segment;
       })
     ];
 
     chat(tokens, payload)
       .then(text => {
-        // TODO: + '\n\nThe answer is generated by GPT-4 and may not be correct.'
-        setMessages(prev => [...prev, { role: 'bot', content: [text] }]);
+        setMessages(prev => [...prev, { role: 'bot', content: text }]);
       })
       .catch(e => {
         setMessages(prev => [...prev, botErrorMessage]);
@@ -95,23 +87,6 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
     setMessages([initialMessage]);
   };
 
-  const renderMessageContent = (message: string | string[]) => {
-    if (!Array.isArray(message)) {
-      return message;
-    }
-
-    return message.map((block, index) =>
-      // Assume that only javascript code snippets will appear
-      block.substring(0, 10) === 'javascript' ? (
-        <SyntaxHighlighter language="javascript" style={SourceTheme} key={index}>
-          {block.substring(11, block.length)}
-        </SyntaxHighlighter>
-      ) : (
-        block
-      )
-    );
-  };
-
   const keyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
       sendMessage();
@@ -135,7 +110,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
             className={classes[`${message.role}`]}
             style={{ whiteSpace: 'pre-line' }}
           >
-            {renderMessageContent(message.content)}
+            {renderMessageContent(message)}
           </div>
         ))}
         {isLoading && <p>loading...</p>}
@@ -160,4 +135,26 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
   );
 };
 
+const renderMessageContent = (message: ChatMessage) => {
+  let contentToRender = message.content;
+  if (message.role === 'bot') {
+    contentToRender += '\n\nThe answer is generated by GPT-4 and may not be correct.';
+  }
+  // TODO: Parse full Markdown, make snippets runnable
+  if (!contentToRender.includes('```javascript')) {
+    return contentToRender;
+  }
+  const renderableRegex = /```javascript\n([\s\S]*?)\n```/g;
+  const chunks = contentToRender.split(renderableRegex);
+  return chunks.map((chunk, i) => {
+    return renderableRegex.test(chunk) ? (
+      <SyntaxHighlighter language="javascript" style={SourceTheme} key={i}>
+        {chunk}
+      </SyntaxHighlighter>
+    ) : (
+      <React.Fragment key={i}>{chunk}</React.Fragment>
+    );
+  });
+};
+
 export default ChatBox;

From dc5d15c8e47bd24fb073af6a57ad764a80ffc7fe Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 14:28:55 +0800
Subject: [PATCH 18/22] Fix whitespace issue

---
 src/pages/sicp/subcomponents/chatbot/ChatBox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index 1523b79b83..69543f4b62 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -152,7 +152,7 @@ const renderMessageContent = (message: ChatMessage) => {
         {chunk}
       </SyntaxHighlighter>
     ) : (
-      <React.Fragment key={i}>{chunk}</React.Fragment>
+      <React.Fragment key={i}>{chunk.trim()}</React.Fragment>
     );
   });
 };

From 57f97a39771aab7cf467f33b4f0e9554a3ec7d23 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 14:46:25 +0800
Subject: [PATCH 19/22] Fix filename capitalization

---
 src/features/sicp/chatCompletion/chatCompletion.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/sicp/chatCompletion/chatCompletion.ts b/src/features/sicp/chatCompletion/chatCompletion.ts
index a7a8183276..72728c1ff1 100644
--- a/src/features/sicp/chatCompletion/chatCompletion.ts
+++ b/src/features/sicp/chatCompletion/chatCompletion.ts
@@ -1,4 +1,4 @@
-import sicpNotes from './SicpNotes';
+import sicpNotes from './sicpNotes';
 
 const promptPrefix =
   'You are a competent tutor, assisting a student who is learning computer science following the textbook "Structure and Interpretation of Computer Programs,' +

From e54e635870a2318552c8eb69f41816dd979052dd Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 16:59:33 +0800
Subject: [PATCH 20/22] Remove duplicated badge code

---
 .../subcomponents/TeamFormationBadges.tsx     | 28 ++-----------------
 .../subcomponents/TeamFormationTable.tsx      |  2 +-
 2 files changed, 3 insertions(+), 27 deletions(-)

diff --git a/src/pages/academy/teamFormation/subcomponents/TeamFormationBadges.tsx b/src/pages/academy/teamFormation/subcomponents/TeamFormationBadges.tsx
index e5ab93dc01..27a1b304e0 100644
--- a/src/pages/academy/teamFormation/subcomponents/TeamFormationBadges.tsx
+++ b/src/pages/academy/teamFormation/subcomponents/TeamFormationBadges.tsx
@@ -3,31 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import { ColumnFilter } from '@tanstack/react-table';
 import { Badge } from '@tremor/react';
 
-const BADGE_COLORS = {
-  // assessment types
-  missions: 'indigo',
-  quests: 'emerald',
-  paths: 'sky'
-};
-
-export function getBadgeColorFromLabel(label: string) {
-  return BADGE_COLORS[label.toLowerCase()] || 'gray';
-}
-
-type AssessmentTypeBadgeProps = {
-  type: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-};
-
-const AssessmentTypeBadge: React.FC<AssessmentTypeBadgeProps> = ({ type, size = 'sm' }) => {
-  return (
-    <Badge
-      text={size === 'xs' ? type.charAt(0).toUpperCase() : type}
-      size={size}
-      color={getBadgeColorFromLabel(type)}
-    />
-  );
-};
+import { getBadgeColorFromLabel } from '../../grading/subcomponents/GradingBadges';
 
 type FilterBadgeProps = {
   filter: ColumnFilter;
@@ -48,4 +24,4 @@ const FilterBadge: React.FC<FilterBadgeProps> = ({ filter, onRemove }) => {
   );
 };
 
-export { AssessmentTypeBadge, FilterBadge };
+export { FilterBadge };
diff --git a/src/pages/academy/teamFormation/subcomponents/TeamFormationTable.tsx b/src/pages/academy/teamFormation/subcomponents/TeamFormationTable.tsx
index 33dcaf4756..6e5a30c124 100644
--- a/src/pages/academy/teamFormation/subcomponents/TeamFormationTable.tsx
+++ b/src/pages/academy/teamFormation/subcomponents/TeamFormationTable.tsx
@@ -30,7 +30,7 @@ import {
 import React, { useState } from 'react';
 import { TeamFormationOverview } from 'src/features/teamFormation/TeamFormationTypes';
 
-import { AssessmentTypeBadge } from '../../teamFormation/subcomponents/TeamFormationBadges';
+import { AssessmentTypeBadge } from '../../grading/subcomponents/GradingBadges';
 import TeamFormationFilters from '../../teamFormation/subcomponents/TeamFormationFilters';
 import TeamFormationActions from './TeamFormationActions';
 

From 8f50bb2999b5a53a98b9f605761b5c6827a4ca90 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 20:47:31 +0800
Subject: [PATCH 21/22] Fix double request

---
 src/pages/sicp/subcomponents/chatbot/ChatBox.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index 69543f4b62..3eeb8078c6 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -52,8 +52,8 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
     }
 
     const lastMessage = messages[messages.length - 1];
-    if (lastMessage.role === 'bot') {
-      // Bot has responded
+    if (lastMessage.role === 'bot' || isLoading) {
+      // Bot has responded, or user request for the new message already sent
       return;
     }
 
@@ -81,7 +81,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
       .finally(() => {
         setIsLoading(false);
       });
-  }, [getSection, getText, messages, tokens]);
+  }, [getSection, getText, isLoading, messages, tokens]);
 
   const resetChat = () => {
     setMessages([initialMessage]);

From 0106e4032df0196a73e49675440346c7b8acfe22 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 13 Apr 2024 20:58:44 +0800
Subject: [PATCH 22/22] Block chat input when loading response

---
 src/pages/sicp/subcomponents/chatbot/ChatBox.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index 3eeb8078c6..e325655893 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -88,7 +88,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
   };
 
   const keyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' && !isLoading) {
       sendMessage();
     }
   };
@@ -117,14 +117,15 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
       </div>
       <input
         type="text"
+        disabled={isLoading}
         className={classes['user-input']}
-        placeholder="Type your message here..."
+        placeholder={isLoading ? 'Waiting for response...' : 'Type your message here...'}
         value={userInput}
         onChange={handleUserInput}
         onKeyDown={keyDown}
       />
       <div className={classes['button-container']}>
-        <Button className={classes['button-send']} onClick={sendMessage}>
+        <Button disabled={isLoading} className={classes['button-send']} onClick={sendMessage}>
           Send
         </Button>
         <Button className={classes['button-clean']} onClick={resetChat}>