Refactor frontend part 7 (#2846)

* Improve useRef type arguments for HTML elements

* Use named imports for React hooks

* Refactor MobileWorkspace

* Replace if statements with optional invocation
* Move constant `SideContentTab`s out of FC body

* Simplify classnames call

* 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.

* Deduplicate dependencies

* Create `useTokens` hook

* Update default throw behavior for `useTokens`

* Render SICP chatbot only when logged in

* Fix overloaded types for `useTokens`

Done following default behavior change.

* Use `useTokens` where applicable

* Refactor SICP chatbox

* Use `useTokens`
* Move API call to separate file
* Update React import to default import

* Refactor SICP chatbox further

* Update imports
* Create and use ChatMessage type alias

* Reorganize SICP chatbot files

* 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

* 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`

* 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

* Fix whitespace issue

* Fix filename capitalization

* Remove duplicated badge code

* Fix double request

* Block chat input when loading response

Author: RichDom2185

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}

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
+};

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

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) {

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}

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}

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;
+};

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;
     }

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}

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