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/mobileWorkspace/MobileWorkspace.tsx b/src/commons/mobileWorkspace/MobileWorkspace.tsx
index 72f53557ec..ee77d7ac4e 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, 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,50 +83,38 @@ 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);
 
   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();
+      }
     };
   };
 
@@ -184,13 +172,11 @@ 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) {
-        if (handleEditorEval) {
-          handleEditorEval();
-        }
+        handleEditorEval?.();
       }
 
       // Show the REPL upon pressing the run tab if the previous tab is not listed below.
@@ -226,7 +212,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   );
 
   const onChange = props.mobileSideContentProps.onChange;
-  const onSideContentTabChange = React.useCallback(
+  const onSideContentTabChange = useCallback(
     (
       newTabId: SideContentType,
       prevTabId: SideContentType,
@@ -241,27 +227,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(
-    () => ({
-      label: 'Editor',
-      iconName: IconNames.EDIT,
-      body: null,
-      id: SideContentType.mobileEditor
-    }),
-    []
-  );
-
-  const mobileRunTab: SideContentTab = React.useMemo(
-    () => ({
-      label: 'Run',
-      iconName: IconNames.PLAY,
-      body: null,
-      id: SideContentType.mobileEditorRun
-    }),
-    []
-  );
-
-  const updatedMobileSideContentProps = React.useCallback(() => {
+  const updatedMobileSideContentProps = useCallback(() => {
     return {
       ...props.mobileSideContentProps,
       onChange: onSideContentTabChange,
@@ -277,13 +243,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
         ]
       }
     };
-  }, [
-    onSideContentTabChange,
-    mobileEditorTab,
-    mobileRunTab,
-    props.mobileSideContentProps,
-    sideBarTabs
-  ]);
+  }, [onSideContentTabChange, props.mobileSideContentProps, sideBarTabs]);
 
   const inAssessmentWorkspace = props.mobileSideContentProps.workspaceLocation === 'assessment';
 
@@ -318,3 +278,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
+};
diff --git a/src/commons/navigationBar/NavigationBar.tsx b/src/commons/navigationBar/NavigationBar.tsx
index dd6947d4b7..205f44cf1d 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/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
index 7b1f048fbe..6c7a1ee68b 100644
--- a/src/commons/sagas/RequestsSaga.ts
+++ b/src/commons/sagas/RequestsSaga.ts
@@ -1660,28 +1660,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/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/commons/utils/Hooks.ts b/src/commons/utils/Hooks.ts
index 2b306e8b3a..226a2c9210 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 = {
+  (): 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 = true } = {}) => {
+  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;
+};
diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index 93fd2ca8c6..dc84c62b6d 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -3,7 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import { useFullscreen } from '@mantine/hooks';
 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';
@@ -35,15 +35,15 @@ 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 leftParentResizable = React.useRef<Resizable | null>(null);
-  const maxDividerHeight = React.useRef<number | null>(null);
-  const sideDividerDiv = React.useRef<HTMLDivElement | null>(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;
 
@@ -52,7 +52,7 @@ const Workspace: React.FC<WorkspaceProps> = props => {
 
   FocusStyleManager.onlyShowFocusOnTabs();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.sideContentIsResizeable && maxDividerHeight.current === null) {
       maxDividerHeight.current = sideDividerDiv.current!.clientHeight;
     }
diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index 1a3aac41f6..4303fa1448 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -490,7 +490,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 5f8331a7e5..fe5e8183a6 100644
--- a/src/features/cseMachine/components/StashItemComponent.tsx
+++ b/src/features/cseMachine/components/StashItemComponent.tsx
@@ -127,7 +127,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 73ab794d41..a3569c8aea 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -168,7 +168,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}
@@ -185,7 +185,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 5bd18587b0..5485b584d7 100644
--- a/src/features/cseMachine/components/values/GlobalFnValue.tsx
+++ b/src/features/cseMachine/components/values/GlobalFnValue.tsx
@@ -162,7 +162,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}
@@ -179,7 +179,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/features/sicp/chatCompletion/api.ts b/src/features/sicp/chatCompletion/api.ts
new file mode 100644
index 0000000000..610660d479
--- /dev/null
+++ b/src/features/sicp/chatCompletion/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/features/sicp/chatCompletion/chatCompletion.ts b/src/features/sicp/chatCompletion/chatCompletion.ts
new file mode 100644
index 0000000000..72728c1ff1
--- /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/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx b/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx
index d1b39c3d20..5ebabb6560 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 3f0f2fb1b9..e6ad189e39 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 8de1d1ed72..650441eeb1 100644
--- a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
@@ -288,7 +288,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 e4dc5f16e7..4fa87efcc8 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 f8608c70a9..2e851621b9 100644
--- a/src/pages/academy/groundControl/GroundControl.tsx
+++ b/src/pages/academy/groundControl/GroundControl.tsx
@@ -232,7 +232,7 @@ const GroundControl: React.FC<Props> = props => {
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
         alwaysShowHorizontalScroll={true}
-        domLayout={'autoHeight'}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
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 () => {
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}
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';
 
diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index 4ae2ae9741..4c7d48ac7c 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -1047,12 +1047,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}
     >
diff --git a/src/pages/sicp/Sicp.tsx b/src/pages/sicp/Sicp.tsx
index c0e0960305..1419ea43f1 100644
--- a/src/pages/sicp/Sicp.tsx
+++ b/src/pages/sicp/Sicp.tsx
@@ -7,8 +7,10 @@ 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 { 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 {
@@ -43,9 +45,11 @@ 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/'
+    // To discard the '/sicpjs/'
+    return location.pathname.replace('/sicpjs/', '') as SicpSection;
   }
 
   const getText = () => {
@@ -197,7 +201,7 @@ const Sicp: React.FC = () => {
           )}
         </CodeSnippetContext.Provider>
       </SicpErrorBoundary>
-      <Chatbot getSection={getSection} getText={getText} />
+      {isLoggedIn && <Chatbot getSection={getSection} getText={getText} />}
     </div>
   );
 };
diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index c55337142b..e325655893 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -1,139 +1,99 @@
 import { Button } from '@blueprintjs/core';
-import * as React from 'react';
+import React, { useEffect, useRef, useState } 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/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 { chat } from '../../../../commons/sagas/RequestsSaga';
-import SICPNotes from './SicpNotes';
-
 type Props = {
-  getSection: () => string;
+  getSection: () => SicpSection;
   getText: () => string;
 };
 
+type ChatMessage = { role: 'user' | 'bot'; content: string };
+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 = 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 { accessToken, refreshToken } = useSession();
+  const chatRef = useRef<HTMLDivElement>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>([initialMessage]);
+  const [userInput, setUserInput] = useState('');
+  const tokens = useTokens();
 
   const handleUserInput = (event: React.ChangeEvent<HTMLInputElement>) => {
     setUserInput(event.target.value);
   };
 
-  // To get code snippets
-  const codeBlocks = (temp: string) => {
-    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;
     }
-    // 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 }]);
-    setIsLoading(true);
+    setMessages(prev => [...prev, { role: 'user', content: userInput }]);
+  };
 
-    const prompt = getPrompt();
-    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] });
+  // Watch whenever a new message comes in
+  useEffect(() => {
+    if (messages.length === 0) {
+      return;
     }
-    payload.push({ role: 'user', content: _userInput });
-    const tokens = { accessToken: accessToken!, refreshToken: refreshToken! };
+
+    const lastMessage = messages[messages.length - 1];
+    if (lastMessage.role === 'bot' || isLoading) {
+      // Bot has responded, or user request for the new message already sent
+      return;
+    }
+
+    // User just sent a message
+    setIsLoading(true);
+
+    // Bot needs to respond, send payload to chat completion
+    const prompt = buildPrompt(getSection(), getText());
+    const payload: Payload = [
+      { role: 'system', content: prompt },
+      ...messages.slice(-CONTEXT_SIZE).map(message => {
+        const role = message.role === 'user' ? 'user' : 'assistant';
+        const segment: Payload[number] = { role, content: message.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.']
-          }
-        ]);
+        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, isLoading, messages, tokens]);
 
-  const cleanMessage = () => {
-    setMessages([{ content: ['Ask me something about this paragraph!'], role: 'bot' }]);
-    setContentHistory([]);
-    setRoleHistory([]);
-  };
-
-  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 resetChat = () => {
+    setMessages([initialMessage]);
   };
 
   const keyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' && !isLoading) {
       sendMessage();
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     scrollToBottom();
   }, [messages, isLoading]);
 
@@ -150,24 +110,25 @@ 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>}
       </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={cleanMessage}>
+        <Button className={classes['button-clean']} onClick={resetChat}>
           Clean
         </Button>
       </div>
@@ -175,4 +136,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.trim()}</React.Fragment>
+    );
+  });
+};
+
 export default ChatBox;
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;
 };