[AI Tutor] CT-441: Finish UI refactor #57889

ebeastlake · 2024-04-09T06:07:34Z

This completes a refactor of the AI Tutor code that @Erin007 and @kakiha11 started.

Forgive me for the massive diff 🙈 I have tried to leave comments and screenshots of manually generated diffs where possible. Please feel free to leave specific feedback on things you feel could have been separated out despite the nature of the refactor and ask as many clarifying questions as needed!

In the following PR:

All of the AI Tutor UI is updated to align more closely with what we use for AI TA
We no longer track three separate tutors with a different UI for each; instead, there is one chat interface that uses three different types of questions under the hood
All of the files are moved to apps/src/aiTutor from being split between that folder and apps/src/code-studio/components
All React components are given PascalCase names instead of camelCase
Any code that AITutor was using from the aichat directory has been copied into the aiTutor directory, so the folks working on generative AI are free to do with aichat what they wish

Old UI:

New UI:

Links

Jira ticket: https://codedotorg.atlassian.net/browse/CT-441

Testing story

Since no one is using this until the closed beta, I tested that most things work manually.

This included each of the three buttons (submit, "Why doesn't my code compile?", "Why aren't my tests passing?") posting correctly to Open AI, receiving responses, and persisting the chat history to the database. I also tested that scrolling still works and that the view is appropriately locked down when the tutor is disabled.

I tested some of these things before I got the CSS on the buttons on the bottom correct, so ignore any wonky CSS in the footer (the image above is the source of truth for the footer UI).

Compilation working:

Validation working:

Scrolling still working:

Locked out view:

Deployment strategy

Follow-up work

Privacy

Security

Caching

PR Checklist:

Tests provide adequate coverage
Privacy and Security impacts have been assessed
Code is well-commented
New features are translatable or updates will not break translations
Relevant documentation has been added or updated
User impact is well-understood and desirable
Pull Request is labeled appropriately
Follow-up work items (including potential tech debt) are tracked and linked

ebeastlake · 2024-04-11T04:56:12Z

apps/src/aiTutor/redux/aiTutorRedux.ts

-      };
-      thunkAPI.dispatch(addChatMessage(newMessage));
-    }
+    const newMessage: ChatCompletionMessage = {


Now, every scenario (general chat/compilation/validation) adds its "question" (the inputted question/"Why doesn't my code compile?"/"Why aren't my tests passing?") to state.

ebeastlake · 2024-04-11T06:04:33Z

apps/src/aiTutor/types.ts

  studentInput: string;
-  tutorType: AITutorTypesValue | undefined;
+  studentCode: string;


Added the student code to the ChatContext because I'll now need to include it in the formattedQuestion along with the studentInput, since I'm not using three different system prompts anymore.

ebeastlake · 2024-04-11T06:10:19Z

apps/src/aiTutor/views/AITutorChatWorkspace.tsx

+import {useAppSelector} from '@cdo/apps/util/reduxHooks';
+import Message from './Message';
+
+const AITutorChatWorkspace: React.FunctionComponent = () => {


None of the existing logic in this component changed. I just removed unused logic and unnecessary divs/styling. I renamed these files and restructured them so that the organization of AITutorContainer, AITutorChatWorkspace, and AITutorFooter matches the structure of RubricContainer, RubricContent, and RubricSubmitFooter (the AI TA components). This allowed me to snag their most recent styling :)

Just in case anyone is curious: https://github.com/code-dot-org/code-dot-org/blob/staging/apps/src/templates/rubrics/RubricContainer.jsx

ebeastlake · 2024-04-11T06:14:55Z

apps/src/aiTutor/views/AITutorContainer.tsx

@@ -0,0 +1,79 @@
+import classnames from 'classnames';


This component changed significantly to accommodate the new organization/UI. I also made it draggable because it was helpful for testing. I've pasted the diff between this and the old equivalent, which was aiTutorPanel: https://github.com/code-dot-org/code-dot-org/blob/staging/apps/src/code-studio/components/aiTutor/aiTutorPanel.tsx

ebeastlake · 2024-04-11T06:18:28Z

apps/src/aiTutor/views/AITutorFloatingActionButton.tsx

@@ -39,7 +39,7 @@ const AITutorFloatingActionButton: React.FunctionComponent = () => {
        type="button"
      />
      <Provider store={store}>
-        <AITutorPanel open={isOpen} />
+        <AITutorContainer open={isOpen} closeTutor={handleClick} />


Passing this handler enables a close with an "X" in the upper right-hand corner.

ebeastlake · 2024-04-11T06:23:14Z

apps/src/aiTutor/views/AITutorFooter.tsx

+    state => state.aiTutor.isWaitingForChatResponse
+  );
+
+  const level = useAppSelector(state => state.aiTutor.level);


Most of this logic isn't new, and is borrowed from a previous component called userChatMessageEditor: https://github.com/code-dot-org/code-dot-org/blob/staging/apps/src/code-studio/components/aiTutor/userChatMessageEditor.tsx

Here's the diff...

ebeastlake · 2024-04-11T06:25:11Z

apps/src/aiTutor/views/Message.tsx

@@ -76,6 +79,9 @@ const ChatMessage: React.FunctionComponent<ChatMessageProps> = ({message}) => {

      {isAssistant(message.role) && (
        <div className={style.assistantMessageContainer}>
+          <Typography semanticTag="h5" visualAppearance="heading-xs">
+            AI Tutor ({message.role})


This header distinguishes the AI Tutor chats without a big circular image taking up horizontal bandwidth like we had before.

ebeastlake · 2024-04-11T06:26:07Z

apps/src/aiTutor/views/ai-tutor.module.scss

+@import 'font';
+@import '@cdo/apps/componentLibrary/common/styles/mixins';
+
+.aiTutorContainer {


Most of these CSS changes add the updated AI TA-like UI. I duplicated everything to guarantee we wouldn't break anything with AI TA.

ebeastlake · 2024-04-11T06:34:15Z

apps/src/aiTutor/views/teacherDashboard/AccessControls.tsx

 import {StudentAccessData} from '@cdo/apps/aiTutor/types';

 /**
 * Renders toggles to control student access to AI Tutor.
 */

-interface AITutorTeacherControlsProps {
+interface AccessControlsProps {


I initially started renaming things because I was having trouble with git not detecting case-only changes in filenames when I moved from camelCase to PascalCase on these components (I had to modify my git config and using git mv to get it to pick all of them up). But I left the simpler names in place. Now that these are all scoped to the src/aiTutor directory, it doesn't feel like they all need to be prepended with AITutor.

ebeastlake · 2024-04-11T06:36:01Z

apps/src/aichat/constants.ts

@@ -1,4 +1,3 @@
-export const CHAT_COMPLETION_URL = '/openai/chat_completion';


This endpoint is only used in the chatApi.ts file that aichat folks say they don't want in their directory anymore.

ebeastlake · 2024-04-11T06:37:09Z

apps/src/code-studio/components/aiTutor/ai-tutor.module.scss

Everything now lives in apps/src/aiTutor. Navigating back and forth between apps/src/aiTutor and apps/src/code-studio/components/aiTutor was tough, especially when apps/src/aichat is very similar to apps/src/aiTutor and I was often accidentally opening the wrong copy of a file.

ebeastlake · 2024-04-11T06:39:28Z

apps/src/aiTutor/views/chat-workspace.module.scss

Copied from apps/src/code-studio/components/aiTutor/chat-workspace.module.scss.

fisher-alice · 2024-04-11T20:50:51Z

apps/src/aichat/redux/aichatRedux.ts

@@ -10,7 +10,7 @@ import {
  AI_CUSTOMIZATIONS_LABELS,
 } from '../views/modelCustomization/constants';
 import {initialChatMessages} from '../constants';
-import {getChatCompletionMessage} from '../chatApi';
+import {getChatCompletionMessage} from '../../aiTutor/chatApi';


Hey Emily - will you be calling on getChatCompletionMessage from this file? I see you have it in aiTutorRedux.ts. FWIW - I'm currently working on a PR that is updating this line.

Nice catch, Alice! No, AI Tutor doesn't need this. Your PR will be good to update it after this one.

molly-moen

These changes seem reasonable to me!

bencodeorg · 2024-04-11T22:22:41Z

changes within aichat seem fine to me!

Erin007 and others added 30 commits March 5, 2024 16:04

controller method to fetch single student's AiTutorInteractions

aa332c1

add endpoint to interactionsApi

9528eae

refactor api routes for ai tutor interactions

8a51b60

refactor to more RESTful single route

dcf308a

remove puts

45cd8f9

fix querystring logic and autocorrect ruby linting

2b3f1e0

refactor ai tutor constants

f1286fb

resolve type issues

424ecf5

populate dropdown

cd3ca98

add filters for status, student, and time

bde8c88

resolve merge conflicts

15c5893

add enum for time filters

9b3f650

missed usage of enum

3f1a094

loosen type checking

dd20f0f

use AITutorInteractionStatusValue over string

67fd49d

Merge branch 'staging' into emily/ct-253/view-flagged-chats

2708594

remove errant semicolon

56979a7

remove tutor type selector

0ed114e

update css

31b58fd

replace panel with container

aef6d6d

remove UserChatMessageEditor in favor of AITutorFooter

8decbaa

restructure ai tutor files

36c6b7a

complete conversion to PascalCase

becd261

condense AITutor and ChatWorkspace

3c9212d

rename to tutor tab

5b51f3e

update path to styles

dde7775

get each scenario getting responses

7a6a616

resolve merge conflicts

c4a63bc

rename so PascalCase update takes

130d2e4

move chatApi

160abe5

ebeastlake commented Apr 11, 2024

View reviewed changes

ebeastlake added 2 commits April 10, 2024 22:43

disable footer when tutor shouldn't be rendered

f34f5a7

fix css

f4b337d

ebeastlake commented Apr 11, 2024

View reviewed changes

complete rename of tutorTab

dc82722

ebeastlake commented Apr 11, 2024

View reviewed changes

remove unnecessary puts

8873619

ebeastlake commented Apr 11, 2024

View reviewed changes

ebeastlake marked this pull request as ready for review April 11, 2024 06:41

Merge branch 'staging' into emily/ct-441/finish-ui-refactor

d2891ea

ebeastlake requested review from a team, bencodeorg, sanchitmalhotra126 and fisher-alice April 11, 2024 06:59

Merge branch 'staging' into emily/ct-441/finish-ui-refactor

375ebe2

fisher-alice reviewed Apr 11, 2024

View reviewed changes

molly-moen approved these changes Apr 11, 2024

View reviewed changes

ebeastlake added 2 commits April 11, 2024 16:41

resolve merge conflicts from ken's pr revert

ca5ec9c

update unit test with misspelled assertion

3593da3

ebeastlake merged commit 6c590a1 into staging Apr 12, 2024
2 checks passed

ebeastlake deleted the emily/ct-441/finish-ui-refactor branch April 12, 2024 03:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[AI Tutor] CT-441: Finish UI refactor #57889

[AI Tutor] CT-441: Finish UI refactor #57889

ebeastlake commented Apr 9, 2024 •

edited

ebeastlake Apr 11, 2024

ebeastlake Apr 11, 2024

ebeastlake Apr 11, 2024

ebeastlake Apr 11, 2024

ebeastlake Apr 11, 2024

ebeastlake Apr 11, 2024

ebeastlake Apr 11, 2024

ebeastlake Apr 11, 2024

ebeastlake Apr 11, 2024

ebeastlake Apr 11, 2024 •

edited

ebeastlake Apr 11, 2024 •

edited

ebeastlake Apr 11, 2024

ebeastlake Apr 11, 2024

ebeastlake Apr 11, 2024

fisher-alice Apr 11, 2024

ebeastlake Apr 11, 2024 •

edited

molly-moen left a comment

bencodeorg commented Apr 11, 2024

		@@ -1,4 +1,3 @@
		export const CHAT_COMPLETION_URL = '/openai/chat_completion';

[AI Tutor] CT-441: Finish UI refactor #57889

[AI Tutor] CT-441: Finish UI refactor #57889

Conversation

ebeastlake commented Apr 9, 2024 • edited

Links

Testing story

Deployment strategy

Follow-up work

Privacy

Security

Caching

PR Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ebeastlake Apr 11, 2024 • edited

Choose a reason for hiding this comment

ebeastlake Apr 11, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ebeastlake Apr 11, 2024 • edited

Choose a reason for hiding this comment

molly-moen left a comment

Choose a reason for hiding this comment

bencodeorg commented Apr 11, 2024

ebeastlake commented Apr 9, 2024 •

edited

ebeastlake Apr 11, 2024 •

edited

ebeastlake Apr 11, 2024 •

edited

ebeastlake Apr 11, 2024 •

edited