Optional comment in QA page

api/main.py

@@ -103,13 +103,14 @@ def human(id):
 def ratings():
     session_id = request.json.get('sessionId')
     settings = request.json.get('settings', {})
+    comment = (request.json.get('comment') or '').strip() or None  # only save strings if not empty
     score = request.json.get('score')
 
     if not session_id or score is None:
         return Response('{"error": "missing params}', 400, mimetype='application/json')
 
     with make_session() as s:
-        s.add(Rating(session_id=session_id, score=score, settings=json.dumps(settings)))
+        s.add(Rating(session_id=session_id, score=score, settings=json.dumps(settings), comment=comment))
         s.commit()
 
     return jsonify({'status': 'ok'})

web/src/pages/qa.tsx

@@ -22,6 +22,7 @@ const MAX_FOLLOWUPS = 4;
 export const saveRatings = async (
   sessionId: string,
   score: number,
+  comment: string | null,
   settings: LLMSettings
 ): Promise<any> =>
   fetch(API_URL + "/ratings", {
@@ -29,7 +30,7 @@ export const saveRatings = async (
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify({ sessionId, settings, score }),
+    body: JSON.stringify({ sessionId, settings, score, comment }),
   }).then((r) => r.json());
 
 const Rater = ({
@@ -41,8 +42,10 @@ const Rater = ({
   sessionId: string;
   reset: () => void;
 }) => {
+  const [comment, setComment] = useState<string | null>(null);
+
   const onRate = async (rate: number) => {
-    const res = await saveRatings(sessionId, rate, settings);
+    const res = await saveRatings(sessionId, rate, comment, settings);
     if (!res.error) reset();
   };
 
@@ -58,6 +61,10 @@ const Rater = ({
         ))}
         <span>Good</span>
       </div>
+      <textarea
+        placeholder="Add any comments here"
+        onChange={(e) => setComment(e.target.value)}
+      ></textarea>
     </div>
   );
 };

web/src/styles/globals.css

@@ -65,3 +65,8 @@ ol {
   width: 2.5em;
   margin: 0.5em;
 }
+
+.rate-container textarea {
+  width: 100%;
+  border: black solid 1px;
+}