update human assessment

src/components/itemList.tsx

@@ -1,25 +1,30 @@
-import React, { useState } from 'react';
+import React, { use, useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import type { AssessmentItemsProps } from '../types';
 
 const AssessmentItems: React.FC<AssessmentItemsProps> = ({ judge1, judge2, items, selectedCategory }) => {
-  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
-  const [copiedButton, setCopiedButton] = useState<string | null>(null);
+  const [rRuuid, setRRuuid] = useState<string | null>(null);
+  const [humanAssessment, setHumanAssessment] = useState<string | null>(null);
+  const [humanAnalysis, setHumanAnalysis] = useState<string | null>(null);
+  const [copied, setCopied] = useState<boolean>(false);
 
   const items_count = items.length;
 
-  const handleCopyAssessment = (r_uuid: string, buttonValue: string, judgeAnalysis : string, itemIndex: number) => {
-    const tuple = `["${r_uuid}", "${buttonValue}", "${judgeAnalysis}"]`;
-    navigator.clipboard.writeText(tuple).then(() => {
-      setCopiedIndex(itemIndex);
-      setCopiedButton(buttonValue);
-      setTimeout(() => {
-        setCopiedIndex(null);
-        setCopiedButton(null);
-      }, 2000);
-    });
+  useEffect(() => {
+    setCopied(false);
+  }, [humanAssessment, humanAnalysis]);
+
+  const handleCopyAssessment = () => {
+    const tuple = `["${rRuuid}", "${humanAssessment}", "${humanAnalysis}"]`;
+    navigator.clipboard.writeText(tuple).then(() => setCopied(true));
   };
 
+  const handleHumanAssessment = (r_uuid: string, buttonValue: string, judgeAnalysis: string) => {
+    setRRuuid(r_uuid);
+    setHumanAssessment(buttonValue);
+    setHumanAnalysis(judgeAnalysis);
+  }
+
   if (!selectedCategory || items.length === 0) {
     return (
       <div className="assessment-items">
@@ -93,18 +98,38 @@ const AssessmentItems: React.FC<AssessmentItemsProps> = ({ judge1, judge2, items
               <div className="assessment-buttons">
                 {['COMPLETE', 'EVASIVE', 'DENIAL',  'ERROR'].map((buttonValue) => (
                   <button
-                    key={buttonValue}
+                    key={`${item.r_uuid}-${buttonValue}`}
                     className={`assessment-btn ${buttonValue.toLowerCase()} ${
-                      copiedIndex === index && copiedButton === buttonValue ? 'copied' : ''
+                      rRuuid === item.r_uuid && humanAssessment === buttonValue ? 'selected' : ''
                     }`}
-                    onClick={() => handleCopyAssessment(item.r_uuid, buttonValue, judge2 ? item.assessments[judge2].judge_analysis : "", index)}
-                    // temporarily added judge2's analysis to the button click handler as in certain cases the analyses is correct but not the label
+                    onClick={() => handleHumanAssessment(
+                      item.r_uuid, 
+                      buttonValue, 
+                      "" // judge2 ? item.assessments[judge2].judge_analysis : "" // temporarily added judge2's analysis to the button click handler as in certain cases the analyses is correct but not the label
+                    )}
                   >
-                    {copiedIndex === index && copiedButton === buttonValue ? '✓ Copied!' : buttonValue}
+                    {buttonValue}   
                   </button>
                 ))}
               </div>
             </div>
+            {rRuuid === item.r_uuid && humanAssessment && (
+              <div className="human-assessment">
+                <input
+                  type="text"
+                  placeholder="Enter your analysis here..."
+                  value={humanAnalysis || ''}
+                  onChange={(e) => setHumanAnalysis(e.target.value)}
+                  className="human-analysis-input"
+                />
+                <button
+                  className={`copy-btn ${copied ? 'copied' : ''}`}
+                  onClick={() => handleCopyAssessment()}
+                >
+                  {copied ? '✓ Copied!' : 'Copy'}
+                </button>
+              </div>
+            )}
         </div>
       ))}     
     </div>

src/index.css

@@ -638,7 +638,8 @@ h4 {
   padding : 1rem 0;
 }
 
-.assessment-btn {
+.assessment-btn,
+.copy-btn {
   padding: 8px 20px;
   border: 2px solid transparent;
   border-radius: 6px;
@@ -660,12 +661,32 @@ h4 {
   transform: translateY(0);
 }
 
-.assessment-btn.copied {
+.assessment-btn.selected,
+.copy-btn.copied {
   background: #6366f1 !important;
   color: white !important;
   border-color: #6366f1 !important;
 }
 
+.human-assessment {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+  align-items: flex-end;
+}
+
+.human-analysis-input {
+  width: 100%;
+  padding: 1.5rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: var(--text-color);
+  background: var(--bg-color);
+  transition: all 0.2s ease;
+}
+
 /* Markdown Styles */
 .markdown-content {
   line-height: 1.6;