feat(getHelp): improve chip and feedbacks

- we remove line-per-line feedbacks to enhance the students' learning experience
- we add suggestion chips that might suggest the feedback given is wrong or inaccurate
- fix the custom prompt sending when creating threads due to change in API
- previously they require the role name to be user, now it's system

Author: bivanalhar

app/services/course/assessment/answer/live_feedback/thread_service.rb

@@ -33,11 +33,11 @@ def initialize(user, course, question)
   end
 
   def extend_thread_object_with_custom_prompt
-    return unless @custom_prompt
+    return if @custom_prompt.blank?
 
-    @thread_object.merge({
+    @thread_object = @thread_object.merge({
       message: {
-        role: 'user',
+        role: 'system',
         content: (@custom_prompt.length >= 500) ? "#{@custom_prompt[0...495]}..." : @custom_prompt
       }
     })

client/app/bundles/course/assessment/submission/actions/answers/index.js

@@ -214,14 +214,12 @@ const handleFeedbackOKResponse = ({
   noFeedbackMessage,
 }) => {
   const overallContent = response.data?.data?.message.content ?? null;
-  const feedbackFiles = response.data?.data?.message.files ?? [];
   const success = response.data?.success;
-  if (success && (overallContent || feedbackFiles.length)) {
+  if (success && overallContent) {
     dispatch(
       getLiveFeedbackFromCodaveri({
         answerId,
         overallContent,
-        feedbackFiles,
       }),
     );
   } else {

client/app/bundles/course/assessment/submission/components/GetHelpChatPage/ConversationArea.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
 import { Typography } from '@mui/material';
 
 import LoadingEllipsis from 'lib/components/core/LoadingEllipsis';
@@ -13,20 +12,11 @@ import { ChatSender } from '../../types';
 import MarkdownText from '../MarkdownText';
 
 interface ConversationAreaProps {
-  onFeedbackClick: (linenum: number, filename?: string) => void;
   answerId: number;
 }
 
 const ConversationArea: FC<ConversationAreaProps> = (props) => {
-  const { onFeedbackClick, answerId } = props;
-
-  const { control } = useFormContext();
-  const currentAnswer = useWatch({ control });
-
-  const files = currentAnswer[answerId]
-    ? currentAnswer[answerId].files_attributes ||
-      currentAnswer[`${answerId}`].files_attributes
-    : [];
+  const { answerId } = props;
 
   const dispatch = useAppDispatch();
   const liveFeedbackChats = useAppSelector((state) =>
@@ -61,51 +51,18 @@ const ConversationArea: FC<ConversationAreaProps> = (props) => {
     >
       {liveFeedbackChats.chats.map((chat, index) => {
         const isStudent = chat.sender === ChatSender.student;
-        const allMessages = [...chat.message];
-        if (allMessages.length === 0) return null;
-
-        const firstMessage = allMessages[0];
-        const nextMessages = allMessages.slice(1, allMessages.length);
+        const message = chat.message;
 
         return (
           <div
-            key={`${firstMessage} ${chat.createdAt}`}
+            key={`${message} ${chat.createdAt}`}
             className={`flex ${justifyPosition(isStudent, chat.isError)}`}
             id={`chat-${answerId}-${index}`}
           >
             <div
               className={`flex flex-col rounded-lg ${isStudent ? 'bg-blue-200' : 'bg-gray-200'} max-w-[70%] pt-3 pl-3 pr-3 pb-2 m-2 w-fit text-wrap break-words space-y-1`}
             >
-              {chat.lineContent && chat.lineNumber && (
-                <div
-                  className={`flex flex-col ${chat.lineNumber && 'cursor-pointer'} rounded-lg bg-gray-50 hover:bg-gray-100 p-3 w-full text-wrap break-words`}
-                  onClick={() => {
-                    if (chat.lineNumber) {
-                      onFeedbackClick(chat.lineNumber, chat.filename);
-                    }
-                  }}
-                >
-                  <Typography
-                    className="flex flex-col whitespace-pre-wrap ml-1"
-                    variant="body2"
-                  >
-                    {files.length === 1
-                      ? t(translations.lineNumber, {
-                          lineNumber: chat.lineNumber,
-                        })
-                      : t(translations.fileNameAndLineNumber, {
-                          filename: chat.filename ?? '',
-                          lineNumber: chat.lineNumber,
-                        })}
-                  </Typography>
-                  <MarkdownText content={`${chat.lineContent}`} />
-                </div>
-              )}
-
-              <MarkdownText content={`${firstMessage}`} />
-              {nextMessages.map((nextMessage) => (
-                <MarkdownText key={nextMessage} content={`${nextMessage}`} />
-              ))}
+              <MarkdownText content={`${message}`} />
               {!chat.isError && (
                 <Typography
                   className="flex flex-col text-gray-400 text-right"

client/app/bundles/course/assessment/submission/components/GetHelpChatPage/index.tsx

@@ -13,13 +13,12 @@ import Header from './Header';
 import SuggestionChips from './SuggestionChips';
 
 interface GetHelpChatPageProps {
-  onFeedbackClick: (linenum: number, filename?: string) => void;
   answerId: number | null;
   questionId: number;
 }
 
 const GetHelpChatPage: FC<GetHelpChatPageProps> = (props) => {
-  const { onFeedbackClick, answerId, questionId } = props;
+  const { answerId, questionId } = props;
 
   const scrollableRef = useRef<HTMLDivElement>(null);
 
@@ -69,10 +68,7 @@ const GetHelpChatPage: FC<GetHelpChatPageProps> = (props) => {
       <Divider />
 
       <div ref={scrollableRef} className="flex-1 overflow-auto mt-1">
-        <ConversationArea
-          answerId={answerId}
-          onFeedbackClick={onFeedbackClick}
-        />
+        <ConversationArea answerId={answerId} />
       </div>
 
       <div className="relative flex flex-row items-center">

client/app/bundles/course/assessment/submission/components/answers/Programming/index.jsx

@@ -100,17 +100,6 @@ const Programming = (props) => {
 
   const editorRef = useRef(null);
 
-  const focusEditorOnFeedbackLine = (linenum, filename) => {
-    if (filename) {
-      setDisplayFileName(filename);
-    }
-
-    editorRef.current?.editor?.gotoLine(linenum, 0);
-    editorRef.current?.editor?.selection?.setAnchor(linenum - 1, 0);
-    editorRef.current?.editor?.selection?.moveCursorTo(linenum - 1, 0);
-    editorRef.current?.editor?.focus();
-  };
-
   const feedbackFiles = useAppSelector(
     (state) =>
       state.assessments.submission.liveFeedback?.feedbackByQuestion?.[
@@ -154,11 +143,7 @@ const Programming = (props) => {
         </div>
         {isLiveFeedbackChatOpen && isAttempting && (
           <div className="absolute h-[100%] flex w-1/2 whitespace-nowrap right-0">
-            <GetHelpChatPage
-              answerId={answerId}
-              onFeedbackClick={focusEditorOnFeedbackLine}
-              questionId={question.id}
-            />
+            <GetHelpChatPage answerId={answerId} questionId={question.id} />
           </div>
         )}
       </div>

client/app/bundles/course/assessment/submission/reducers/liveFeedbackChats/index.ts

@@ -14,13 +14,14 @@ import {
   modifyLocalStorageValue,
   setLocalStorageValue,
 } from '../../localStorage/liveFeedbackChat/operations';
-import { suggestionsTranslations } from '../../suggestionTranslations';
+import {
+  suggestionFixesTranslations,
+  suggestionsTranslations,
+} from '../../suggestionTranslations';
 import {
   AnswerFile,
   ChatSender,
   ChatShape,
-  FeedbackLine,
-  FeedbackShape,
   LiveFeedbackChatData,
   Suggestion,
 } from '../../types';
@@ -38,9 +39,17 @@ const initialState: LiveFeedbackChatState = {
   liveFeedbackChatUrl: '',
 };
 
-const sampleSuggestions = (): Suggestion[] => {
+const sampleSuggestions = (
+  isIncludingSuggestionFixes: boolean,
+): Suggestion[] => {
   const suggestions = Object.values(suggestionsTranslations);
-  const chosenSuggestions = shuffle(suggestions).slice(0, 3);
+  const suggestionFixes = Object.values(suggestionFixesTranslations);
+
+  const chosenSuggestions = isIncludingSuggestionFixes
+    ? shuffle(suggestions)
+        .slice(0, 2)
+        .concat(shuffle(suggestionFixes).slice(0, 1))
+    : shuffle(suggestions).slice(0, 3);
 
   return chosenSuggestions.map((suggestion) => {
     return {
@@ -50,46 +59,6 @@ const sampleSuggestions = (): Suggestion[] => {
   });
 };
 
-const sortAndCombineFeedbacks = (
-  feedbackLines: {
-    path: string;
-    annotation: FeedbackLine;
-  }[],
-): {
-  path: string;
-  line: number;
-  content: string[];
-}[] => {
-  const processedFeedbackLines: {
-    path: string;
-    line: number;
-    content: string[];
-  }[] = Object.values(
-    feedbackLines.reduce((acc, current) => {
-      if (!acc[(current.path, current.annotation.line)]) {
-        acc[(current.path, current.annotation.line)] = {
-          path: current.path,
-          line: current.annotation.line,
-          content: [current.annotation.content],
-        };
-      } else {
-        acc[(current.path, current.annotation.line)].content = [
-          ...acc[(current.path, current.annotation.line)].content,
-          current.annotation.content,
-        ];
-      }
-
-      return acc;
-    }, {}),
-  );
-
-  processedFeedbackLines
-    .sort((f1, f2) => f1.line - f2.line)
-    .sort((f1, f2) => f1.path.localeCompare(f2.path));
-
-  return processedFeedbackLines;
-};
-
 const defaultValue = (answerId: number): LiveFeedbackChatData => {
   return {
     id: answerId,
@@ -101,7 +70,7 @@ const defaultValue = (answerId: number): LiveFeedbackChatData => {
     isCurrentThreadExpired: false,
     chats: [],
     answerFiles: [],
-    suggestions: sampleSuggestions(),
+    suggestions: sampleSuggestions(false),
   };
 };
 
@@ -230,9 +199,7 @@ export const liveFeedbackChatSlice = createSlice({
             ...liveFeedbackChats.chats,
             {
               sender: ChatSender.student,
-              lineNumber: null,
-              lineContent: null,
-              message: [message],
+              message,
               createdAt: currentTime,
               isError: false,
             },
@@ -276,53 +243,18 @@ export const liveFeedbackChatSlice = createSlice({
       action: PayloadAction<{
         answerId: number;
         overallContent: string | null;
-        feedbackFiles: FeedbackShape[];
       }>,
     ) => {
-      const { answerId, overallContent, feedbackFiles } = action.payload;
+      const { answerId, overallContent } = action.payload;
       const liveFeedbackChats =
         state.liveFeedbackChatPerAnswer.entities[answerId];
 
       if (liveFeedbackChats) {
-        const feedbackLines = feedbackFiles.flatMap((file) =>
-          file.annotations.map((annotation) => ({
-            path: file.path,
-            annotation,
-          })),
-        );
-
-        const sortedAndCombinedFeedbacks =
-          sortAndCombineFeedbacks(feedbackLines);
-
-        const answerLines = liveFeedbackChats.answerFiles.reduce(
-          (acc, current) => {
-            if (!acc[current.filename]) {
-              acc[current.filename] = current.content.split('\n');
-            }
-            return acc;
-          },
-          {},
-        );
-
-        const newChats: ChatShape[] = sortedAndCombinedFeedbacks.map((line) => {
-          return {
-            sender: ChatSender.codaveri,
-            filename: line.path,
-            lineNumber: line.line,
-            lineContent: answerLines[line.path][line.line - 1].trim() ?? null,
-            message: line.content,
-            createdAt: moment(new Date()).format(SHORT_TIME_FORMAT),
-            isError: false,
-          };
-        });
-
         const summaryChat: ChatShape[] = overallContent
           ? [
               {
                 sender: ChatSender.codaveri,
-                lineNumber: null,
-                lineContent: null,
-                message: [overallContent],
+                message: overallContent,
                 createdAt: moment(new Date()).format(SHORT_TIME_FORMAT),
                 isError: false,
               },
@@ -332,8 +264,8 @@ export const liveFeedbackChatSlice = createSlice({
         const changes: Partial<LiveFeedbackChatData> = {
           isRequestingLiveFeedback: false,
           pendingFeedbackToken: null,
-          chats: [...liveFeedbackChats.chats, ...summaryChat, ...newChats],
-          suggestions: sampleSuggestions(),
+          chats: [...liveFeedbackChats.chats, ...summaryChat],
+          suggestions: sampleSuggestions(true),
         };
 
         liveFeedbackChatAdapter.updateOne(state.liveFeedbackChatPerAnswer, {
@@ -358,9 +290,7 @@ export const liveFeedbackChatSlice = createSlice({
       if (liveFeedbackChats) {
         const newChat: ChatShape = {
           sender: ChatSender.codaveri,
-          lineNumber: null,
-          lineContent: null,
-          message: [errorMessage],
+          message: errorMessage,
           createdAt: moment(new Date()).format(SHORT_TIME_FORMAT),
           isError: true,
         };
@@ -369,7 +299,7 @@ export const liveFeedbackChatSlice = createSlice({
           isRequestingLiveFeedback: false,
           pendingFeedbackToken: null,
           chats: [...liveFeedbackChats.chats, newChat],
-          suggestions: sampleSuggestions(),
+          suggestions: sampleSuggestions(true),
         };
 
         liveFeedbackChatAdapter.updateOne(state.liveFeedbackChatPerAnswer, {

client/app/bundles/course/assessment/submission/suggestionTranslations.ts

@@ -22,3 +22,10 @@ export const suggestionsTranslations = defineMessages({
     defaultMessage: 'Where am I wrong?',
   },
 });
+
+export const suggestionFixesTranslations = defineMessages({
+  looksWrong: {
+    id: 'course.assessment.submission.suggestions.looksWrong',
+    defaultMessage: 'Your advice is wrong',
+  },
+});

client/app/bundles/course/assessment/submission/types.ts

@@ -165,9 +165,7 @@ export enum ChatSender {
 export interface ChatShape {
   sender: ChatSender;
   filename?: string;
-  lineNumber: number | null;
-  lineContent: string | null;
-  message: string[];
+  message: string;
   createdAt: string;
   isError: boolean;
 }