Added a level-specific prompt field to AI Tutor section of levelbuilder

apps/src/aiTutor/levelEditors/AITutorFields.tsx

@@ -0,0 +1,80 @@
+import React, {useState} from 'react';
+import moduleStyles from '@cdo/apps/lab2/levelEditors/aichatSettings/edit-aichat-settings.module.scss';
+import Checkbox from '@cdo/apps/componentLibrary/checkbox/Checkbox';
+import {generalChatSystemPrompt} from '../constants';
+
+interface AITutorFieldsProps {
+  isAvailable: boolean;
+  levelbuilderPrompt: string;
+}
+
+const AITutorFields: React.FunctionComponent<AITutorFieldsProps> = ({
+  isAvailable,
+  levelbuilderPrompt,
+}) => {
+  const [aiTutorAvailable, setAiTutorAvailable] =
+    useState<boolean>(isAvailable);
+  const [levelSpecificPrompt, setlevelSpecificPrompt] =
+    useState<string>(levelbuilderPrompt);
+
+  return (
+    <div>
+      <input
+        type="hidden"
+        id="level_ai_tutor_available"
+        name="level[ai_tutor_available]"
+        value={aiTutorAvailable.toString()}
+      />
+
+      <div className={moduleStyles.fieldSection}>
+        <div className={moduleStyles.fieldRow}>
+          <label
+            htmlFor="aiTutorAvailableCheckbox"
+            className={moduleStyles.inlineLabel}
+          >
+            Enable AI Tutor on Level
+          </label>
+          <Checkbox
+            name="aiTutorAvailableCheckbox"
+            checked={aiTutorAvailable || false}
+            onChange={e => {
+              setAiTutorAvailable(!aiTutorAvailable);
+            }}
+          />
+        </div>
+        <br />
+
+        <input
+          type="hidden"
+          id="level_ai_tutor_level_specific_prompt"
+          name="level[ai_tutor_level_specific_prompt]"
+          value={levelSpecificPrompt}
+        />
+        {aiTutorAvailable && (
+          <div className={moduleStyles.fieldRow}>
+            <div className={moduleStyles['field-value']}>
+              <label htmlFor="levelPrompt">Level-Specific Prompt</label>
+              <p>
+                Enter a prompt specific to this level to be added with the
+                default AI Tutor system prompt:
+                <br />"{generalChatSystemPrompt}"
+              </p>
+              <textarea
+                id="levelPrompt"
+                value={levelSpecificPrompt || ''}
+                className={moduleStyles.textarea}
+                placeholder={`Enter a prompt specific to this level`}
+                rows={3}
+                onChange={e => {
+                  setlevelSpecificPrompt(e.target.value);
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AITutorFields;

apps/src/aiTutor/redux/aiTutorRedux.ts

@@ -78,6 +78,9 @@ export const askAITutor = createAsyncThunk(
     } else {
       systemPrompt = generalChatSystemPrompt;
     }
+    if (aiTutorState.aiTutor.level?.levelSpecificPrompt) {
+      systemPrompt += '\n' + aiTutorState.aiTutor.level?.levelSpecificPrompt;
+    }
 
     const levelInstructions = instructionsState.instructions.longInstructions;
 

apps/src/aiTutor/types.ts

@@ -62,6 +62,7 @@ export interface Level {
   type: string;
   hasValidation: boolean;
   isProjectBacked: boolean;
+  levelSpecificPrompt?: string;
   aiTutorAvailable: boolean;
   isAssessment: boolean;
 }

apps/src/sites/studio/pages/levels/editors/fields/_ai_tutor_fields.js

@@ -0,0 +1,21 @@
+import $ from 'jquery';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import getScriptData from '@cdo/apps/util/getScriptData';
+import AITutorFields from '@cdo/apps/aiTutor/levelEditors/AITutorFields';
+
+$(document).ready(function () {
+  const isAvailable = getScriptData('aitutoravailable');
+  const aitutorlevelspecificprompt = getScriptData(
+    'aitutorlevelspecificprompt'
+  );
+  console.log('aitutorlevelspecificprompt', aitutorlevelspecificprompt);
+
+  ReactDOM.render(
+    <AITutorFields
+      isAvailable={isAvailable}
+      levelbuilderPrompt={aitutorlevelspecificprompt}
+    />,
+    document.getElementById('ai-tutor-container')
+  );
+});

apps/src/sites/studio/pages/levels/show.js

@@ -70,6 +70,7 @@ function initPage() {
       isProjectBacked,
       aiTutorAvailable,
       isAssessment,
+      levelSpecificPrompt,
     } = aiTutorData;
     const level = {
       id: levelId,
@@ -78,6 +79,7 @@ function initPage() {
       isProjectBacked,
       aiTutorAvailable,
       isAssessment,
+      levelSpecificPrompt,
     };
     getStore().dispatch(setLevel(level));
     getStore().dispatch(setScriptId(aiTutorData.scriptId));

apps/webpackEntryPoints.js

@@ -130,6 +130,7 @@ const INTERNAL_ENTRIES = {
   'levels/editors/_craft': './src/sites/studio/pages/levels/editors/_craft.js',
   'levels/editors/_dsl': './src/sites/studio/pages/levels/editors/_dsl.js',
   'levels/editors/fields/_aichat_settings': './src/sites/studio/pages/levels/editors/fields/_aichat_settings.js',
+  'levels/editors/fields/_ai_tutor_fields': './src/sites/studio/pages/levels/editors/fields/_ai_tutor_fields.js',
   'levels/editors/fields/_animation': './src/sites/studio/pages/levels/editors/fields/_animation.js',
   'levels/editors/fields/_bubble_choice_sublevel': './src/sites/studio/pages/levels/editors/fields/_bubble_choice_sublevel.js',
   'levels/editors/fields/_blockly': './src/sites/studio/pages/levels/editors/fields/_blockly.js',

dashboard/app/models/levels/level.rb

@@ -94,6 +94,7 @@ class Level < ApplicationRecord
     thumbnail_url
     start_libraries
     ai_tutor_available
+    ai_tutor_level_specific_prompt
   )
 
   # Fix STI routing http://stackoverflow.com/a/9463495

dashboard/app/views/levels/editors/_javalab.html.haml

@@ -4,7 +4,7 @@
 = render partial: 'levels/editors/fields/bubble_choice_sublevel', locals: {f: f}
 = render partial: 'levels/editors/fields/special_level_types', locals: {f: f}
 = render partial: 'levels/editors/fields/csa_fields', locals: {f: f}
-= render partial: 'levels/editors/fields/aitutor_fields', locals: {f: f}
+= render partial: 'levels/editors/fields/ai_tutor_fields', locals: {f: f}
 = render partial: 'levels/editors/fields/sharing', locals: {f: f}
 = render partial: 'levels/editors/fields/callouts', locals: {f: f}
 = render partial: 'levels/editors/fields/audit_log', locals: {f: f}

dashboard/app/views/levels/editors/fields/_ai_tutor_fields.html.haml

@@ -0,0 +1,7 @@
+%h1.control-legend{data: {toggle: "collapse", target: "#ai-tutor-container"}}
+  AI Tutor
+#ai-tutor-container.in.collapse
+
+- content_for :body_scripts do
+  %script{src: webpack_asset_path('js/levels/editors/fields/_ai_tutor_fields.js'),
+        data: {aitutoravailable: (@level.properties["ai_tutor_available"] || true).to_json, aitutorlevelspecificprompt: (@level.properties["ai_tutor_level_specific_prompt"] || '').to_json}}

dashboard/app/views/levels/show.html.haml

@@ -16,7 +16,7 @@
 
 - if @script_level
   - level_data = { redirect_script_url: @redirect_unit_url, script_name: @script_level.script&.name, course_name: @script_level.script&.unit_group&.name, level_name: @level.name, tts_autoplay_enabled: @tts_autoplay_enabled, code_review_enabled: @code_review_enabled_for_level, show_unversioned_redirect_warning: @show_unversioned_redirect_warning}
-  - ai_tutor_data = {levelId: @level&.id, scriptId: @script_level.script&.id, type: @level&.type, hasValidation: !!@level&.properties["encrypted_validation"], isProjectBacked: !!@level&.properties["project_template_level_name"], aiTutorAvailable: @level&.ai_tutor_available?, isAssessment: @script_level&.assessment}
+  - ai_tutor_data = {levelId: @level&.id, scriptId: @script_level.script&.id, type: @level&.type, hasValidation: !!@level&.properties["encrypted_validation"], isAssessment: @script_level&.assessment, isProjectBacked: !!@level&.properties["project_template_level_name"], aiTutorAvailable: @level&.ai_tutor_available?, levelSpecificPrompt: @level&.ai_tutor_level_specific_prompt}
   %link{href: asset_path('css/levels.css'), rel: 'stylesheet', type: 'text/css'}
   %script{ src: webpack_asset_path('js/levels/show.js'), data: { aiTutorData: ai_tutor_data.to_json, level: level_data.to_json, rubricData: @rubric_data&.to_json }}
   -# Mount point for RedirectDialog React component.