Support rating of LLM outputs

src/commons/sideContent/SideContentAutograder.tsx

@@ -8,6 +8,7 @@ import ControlButton from '../ControlButton';
 import { WorkspaceLocation } from '../workspace/WorkspaceTypes';
 import SideContentResultCard from './SideContentResultCard';
 import SideContentTestcaseCard from './SideContentTestcaseCard';
+import StarRating from './StarRating';
 
 export type SideContentAutograderProps = DispatchProps & StateProps & OwnProps;
 
@@ -31,6 +32,7 @@ type OwnProps = {
 const SideContentAutograder: React.FunctionComponent<SideContentAutograderProps> = props => {
   const [showsTestcases, setTestcasesShown] = React.useState<boolean>(true);
   const [showsResults, setResultsShown] = React.useState<boolean>(true);
+  const [userRating, setUserRating] = React.useState<number | null>(null);
 
   const { testcases, autogradingResults, handleTestcaseEval, workspaceLocation } = props;
 
@@ -96,6 +98,10 @@ const SideContentAutograder: React.FunctionComponent<SideContentAutograderProps>
       <Collapse isOpen={showsTestcases} keepChildrenMounted={true}>
         {testcaseCards}
       </Collapse>
+      <div className="star-rating-section">
+        <div className="star-rating-label">Rate the Quality of the Answer:</div>
+        <StarRating value={userRating || 0} onChange={setUserRating} />
+      </div>
       {collapseButton('Autograder Results', showsResults, toggleResults)}
       <Collapse isOpen={showsResults} keepChildrenMounted={true}>
         {resultCards}

src/commons/sideContent/StarRating.tsx

@@ -0,0 +1,31 @@
+import { Icon } from '@blueprintjs/core';
+import React from 'react';
+
+interface StarRatingProps {
+  value: number;
+  onChange: (rating: number) => void;
+}
+
+const StarRating: React.FC<StarRatingProps> = ({ value, onChange }) => {
+  const maxStars = 5;
+
+  const handleStarClick = (selectedValue: number) => {
+    if (onChange) {
+      onChange(selectedValue);
+    }
+  };
+
+  return (
+    <div className="star-rating">
+      {[...Array(maxStars)].map((_, index) => (
+        <Icon
+          key={index}
+          icon={value >= index + 1 ? 'star' : 'star-empty'}
+          onClick={() => handleStarClick(index + 1)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default StarRating;