Refactor code structure for improved readability and maintainability

Cataldir · Cataldir · commit 82f2689e9e0d · 2025-09-26T14:09:42.000-03:00
diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
     "react-icons": "^5.5.0"
-  }
+  },
+  "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
 }
diff --git a/src/avatar/app/avatar.py b/src/avatar/app/avatar.py
@@ -18,8 +18,8 @@
 DEFAULT_CREDENTIAL = DefaultAzureCredential()
 GPT4_KEY = os.getenv("GPT4O_KEY", "")
 GPT4_URL = os.getenv("GPT4O_URL", "")
-MODEL_URL: str = os.environ.get("GPT4_URL", "")
-MODEL_KEY: str = os.environ.get("GPT4_KEY", "")
+MODEL_URL: str = os.environ.get("AZURE_MODEL_URL", "")
+MODEL_KEY: str = os.environ.get("AZURE_MODEL_KEY", "")
 COSMOS_ENDPOINT = os.getenv("COSMOS_ENDPOINT", "")
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 
diff --git a/src/essays/app/demo/evaluate_essays.py b/src/essays/app/demo/evaluate_essays.py
@@ -37,6 +37,7 @@ class TransliterationChatManager(GroupChatManager):
     This custom manager coordinates the interaction between translation and review agents,
     determines when to terminate the chat, and selects the next agent to act based on the chat history.
     """
+
     async def filter_results(self, chat_history: ChatHistory) -> MessageResult:
         """
         Extracts the latest transliteration and review results from the chat history and composes a combined response.
@@ -123,18 +124,15 @@ async def select_next_agent(self, chat_history: ChatHistory, participant_descrip
             StringResult: The name of the next agent to act.
         """
         agents = list(participant_descriptions.keys())
-        # Se não há mensagens de agentes ainda (apenas user), começa com transliteração
         if not chat_history.messages or (
             len(chat_history.messages) == 1 and chat_history.messages[0].role == AuthorRole.USER
         ):
             return StringResult(result=agents[0], reason="Primeira rodada: transliteração.")
-        # Determina se o último respondente foi o reviewer pelo conteúdo
         last_msg = chat_history.messages[-1]
         last_agent = getattr(last_msg, 'name', '')
         is_reviewer = False
         if "TranslationReviewerAgent" in last_agent:
             is_reviewer = True
-        # Busca pelo score na última avaliação
         score = None
         aprovacao = "reexecutar"
         if is_reviewer:
diff --git a/src/essays/app/main.py b/src/essays/app/main.py
@@ -165,6 +165,7 @@ async def list_essays_endpoint() -> JSONResponse:
         message="Successfully retrieved question data.",
         content=items,
     )
+    print(response_body)
     return JSONResponse(status_code=status.HTTP_200_OK, content=jsonable_encoder(response_body))
 
 
diff --git a/src/frontend/components/Avatar/Avatar.tsx b/src/frontend/components/Avatar/Avatar.tsx
@@ -279,14 +279,12 @@ const AvatarChat: React.FC = () => {
       setError(null);
       setAvatarVideoStream(null); // Reset video stream
       try {
-        // Store language, gender, and voice in a ref for global access
-
         configRef.current.gender = selectedCase?.profile?.gender || "male";
-        configRef.current.language = selectedCase?.profile?.language || "pt-BR";
+        configRef.current.language = selectedCase?.profile?.language || "en-US";
         configRef.current.voice = selectedCase?.profile?.voice || (
           (selectedCase?.profile?.gender || "male") === "feminino"
-            ? "pt-BR-FranciscaNeural"
-            : "pt-BR-AntonioNeural"
+            ? "en-US-AvaMultilingualNeural"
+            : "en-US-AndrewMultilingualNeural"
         );
 
         const { language, voice } = configRef.current;
@@ -428,7 +426,6 @@ const AvatarChat: React.FC = () => {
           </div>
         )}
 
-        {/* Chat History Panel */}
         {chatHistory.length > 0 && (
           <div className="mt-6 w-full max-w-4xl mx-auto bg-white dark:bg-boxdark rounded-xl shadow-md p-4 max-h-[30vh] overflow-y-auto">
             <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3 border-b pb-2">Conversation History</h3>
diff --git a/src/frontend/components/Essays/EssaySubmission.tsx b/src/frontend/components/Essays/EssaySubmission.tsx
@@ -2,11 +2,20 @@
 import React, { useState, useRef } from "react";
 import { FaUpload, FaFileAlt, FaHistory, FaSpinner } from "react-icons/fa";
 import { essaysEngine } from "@/utils/api";
+import { v4 as uuidv4 } from 'uuid';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
+// Backend /assemblies returns Swarm objects: { id, topic_name, agents }
+// We adapt to what the UI needs by adding friendly name/description fields.
 interface EssayCase {
   id: string;
-  name: string;
-  description: string;
+  topic_name: string; // original backend field used as the display label
+  agents: any[];
+  name?: string; // derived (topic_name)
+  description?: string; // currently not provided by backend
+  content?: string; // reference text / prompt body
+  explanation?: string; // instructions / rubric
 }
 
 interface Evaluation {
@@ -36,33 +45,85 @@ const EssaySubmission: React.FC = () => {
   const [loadingCases, setLoadingCases] = useState(true);
   const [loadingHistory, setLoadingHistory] = useState(true);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [essayLookup, setEssayLookup] = useState<Record<string, any>>({});
 
-  // Load available essay cases
+  // Load available essay cases (assemblies)
   React.useEffect(() => {
     setLoadingCases(true);
     essaysEngine.get("/assemblies")
       .then(res => {
-        // Failsafe: ensure data is an array
-        const content = Array.isArray(res.data?.content) ? res.data.content : [];
-        setCases(content);
+        const raw = Array.isArray(res.data?.content) ? res.data.content : [];
+        const mapped: EssayCase[] = raw.map((r: any) => ({
+          id: r.id,
+          topic_name: r.topic_name,
+            // Provide fallbacks so UI never breaks
+          agents: r.agents || [],
+          name: r.topic_name,
+          description: r.description || ""
+        }));
+        if (mapped.length === 0) {
+          // Fallback: try to derive cases from existing essays if assemblies not seeded yet
+          return essaysEngine.get('/essays').then(er => {
+            const essays = Array.isArray(er.data?.content) ? er.data.content : [];
+            const essayCases: EssayCase[] = essays.map((e: any) => ({
+              id: e.id,
+              topic_name: e.topic || e.theme || e.id,
+              agents: [],
+              name: e.topic || e.theme || e.id,
+              description: e.explanation || '',
+              content: e.content,
+              explanation: e.explanation
+            }));
+            setCases(essayCases);
+            const lookup: Record<string, any> = {};
+            essays.forEach((e: any) => { lookup[e.id] = e; });
+            setEssayLookup(lookup);
+          }).catch(fallbackErr => {
+            console.error('Fallback /essays fetch failed:', fallbackErr);
+            setCases([]);
+          });
+        }
+        setCases(mapped);
+      })
+      .catch(err => {
+        console.error('Failed loading /assemblies:', err);
+        setCases([]);
       })
-      .catch(() => setCases([]))
       .finally(() => setLoadingCases(false));
   }, []);
 
-  // Load submission history
+  // Load submission history (using /resources now, since submissions are stored as resources)
   React.useEffect(() => {
     setLoadingHistory(true);
-    essaysEngine.get("/essays")
+    essaysEngine.get("/resources")
       .then(res => {
-        // Failsafe: ensure data is an array
         const content = Array.isArray(res.data?.content) ? res.data.content : [];
-        setHistory(content);
+        const mapped: Submission[] = content.map((r: any) => ({
+          id: r.id,
+          essayText: r.content,
+          description: Array.isArray(r.objective) ? r.objective.slice(1).join(' ') : '',
+          submittedAt: r.submittedAt || '', // backend currently does not send this
+          essayFileName: undefined,
+          evaluations: []
+        }));
+        setHistory(mapped);
       })
       .catch(() => setHistory([]))
       .finally(() => setLoadingHistory(false));
   }, []);
 
+  // Independently load essays to enrich lookup for markdown reference/instructions
+  React.useEffect(() => {
+    essaysEngine.get('/essays')
+      .then(res => {
+        const items = Array.isArray(res.data?.content) ? res.data.content : [];
+        const lookup: Record<string, any> = {};
+        items.forEach((e: any) => { lookup[e.id] = e; });
+        setEssayLookup(lookup);
+      })
+      .catch(err => console.warn('Could not load essays for reference text:', err));
+  }, []);
+
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
       setEssayFile(e.target.files[0]);
@@ -74,16 +135,38 @@ const EssaySubmission: React.FC = () => {
     if (!selectedCase || (!essayText && !essayFile)) return;
     setSubmitting(true);
     setEvaluations([]);
-    const formData = new FormData();
-    formData.append("caseId", selectedCase.id);
-    formData.append("description", description);
-    if (essayText) formData.append("essayText", essayText);
-    if (essayFile) formData.append("essayFile", essayFile);
-    const res = await essaysEngine.post("/essays", formData);
-    const data = res.data;
-    setEvaluations(data.evaluations || []);
-    setHistory(h => [data.content, ...h]);
-    setSubmitting(false);
+
+    // NOTE: Backend /resources expects: id, objective (List[str]), content?, essay_id, url?.
+    // We treat a submission as a Resource referencing the selectedCase (assembly) id.
+    const resourcePayload = {
+      id: uuidv4(),
+      objective: description ? ["student_submission", description] : ["student_submission"],
+      content: essayText || (essayFile ? `(uploaded file: ${essayFile.name})` : ''),
+      essay_id: selectedCase.id,
+      url: undefined
+    };
+
+    try {
+      const res = await essaysEngine.post("/resources", resourcePayload);
+      // We don't receive evaluations from this endpoint; keep empty for now.
+      const submission: Submission = {
+        id: resourcePayload.id,
+        essayText: resourcePayload.content,
+        essayFileName: essayFile?.name,
+        description: description,
+        submittedAt: new Date().toISOString(),
+        evaluations: []
+      };
+      setHistory(h => [submission, ...h]);
+      // Clear form
+      setEssayText('');
+      setEssayFile(null);
+      setDescription('');
+    } catch (err) {
+      console.error('Failed to submit resource', err);
+    } finally {
+      setSubmitting(false);
+    }
   };
 
   if (loadingCases) {
@@ -120,12 +203,31 @@ const EssaySubmission: React.FC = () => {
           >
             <option value="">-- 🚀 Choose your challenge --</option>
             {cases.map(ca => (
-              <option key={ca.id} value={ca.id}>📝 {ca.name || "Untitled"}</option>
+              <option key={ca.id} value={ca.id}>📝 {ca.name || ca.topic_name || "Untitled"}</option>
             ))}
           </select>
         )}
-        {selectedCase && <div className="mt-2 text-cyan-700 text-base italic">{selectedCase.description || "No description."}</div>}
       </div>
+      {selectedCase && (
+        <div className="mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="rounded-2xl border-2 border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/40 p-4 overflow-y-auto max-h-[360px] prose prose-sm md:prose-base dark:prose-invert">
+            <h3 className="text-lg font-bold mb-2">📄 Reference Text</h3>
+            <div className="break-words">
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                { (essayLookup[selectedCase.id]?.content) || selectedCase.content || 'No reference text available.' }
+              </ReactMarkdown>
+            </div>
+          </div>
+          <div className="rounded-2xl border-2 border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/40 p-4 overflow-y-auto max-h-[360px] prose prose-sm md:prose-base dark:prose-invert">
+            <h3 className="text-lg font-bold mb-2">🧭 Instructions / Rubric</h3>
+            <div className="break-words">
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                { (essayLookup[selectedCase.id]?.explanation) || selectedCase.explanation || selectedCase.description || 'No instructions available.' }
+              </ReactMarkdown>
+            </div>
+          </div>
+        </div>
+      )}
       {/* Essay submission form */}
       <form onSubmit={handleSubmit} className="bg-white dark:bg-boxdark rounded-2xl shadow-lg p-8 mb-8 flex flex-col gap-6 border-2 border-cyan-100 dark:border-cyan-800">
         <label className="font-semibold flex items-center gap-2 text-green-700">
diff --git a/src/frontend/components/Forms/Essays.tsx b/src/frontend/components/Forms/Essays.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { Essay } from "@/types/essays";
 import { essaysEngine } from "@/utils/api";
-import { FaPen, FaFileAlt, FaListAlt } from "react-icons/fa";
+import { FaPen, FaFileAlt, FaListAlt, FaBell } from "react-icons/fa";
 import { v4 as uuidv4 } from 'uuid';
 
 const EssayForm: React.FC<{ essayData?: Essay; onSuccess?: () => void }> = ({ essayData, onSuccess }) => {
@@ -50,14 +50,24 @@ const EssayForm: React.FC<{ essayData?: Essay; onSuccess?: () => void }> = ({ es
         className="w-full rounded-2xl border-2 border-cyan-200 focus:border-green-400 focus:ring-2 focus:ring-green-200 px-4 py-3 text-lg transition-all duration-200 bg-cyan-50 dark:bg-cyan-900 placeholder:text-cyan-400 focus:bg-white dark:focus:bg-boxdark"
         placeholder="Essay topic"
       />
+      <label className="flex items-center gap-2 text-cyan-700 font-bold">
+        <FaBell /> Theme
+      </label>
+      <input
+        type="text"
+        value={form.theme}
+        onChange={e => setForm({ ...form, theme: e.target.value })}
+        className="w-full rounded-2xl border-2 border-cyan-200 focus:border-green-400 focus:ring-2 focus:ring-green-200 px-4 py-3 text-lg transition-all duration-200 bg-cyan-50 dark:bg-cyan-900 placeholder:text-cyan-400 focus:bg-white dark:focus:bg-boxdark"
+        placeholder="Theme that should be considered by the LLM when writing the essay correction (optional)"
+      />
       <label className="flex items-center gap-2 text-blue-700 font-bold">
         <FaFileAlt /> Content
       </label>
       <textarea
         value={form.content}
         onChange={e => setForm({ ...form, content: e.target.value })}
         className="w-full rounded-2xl border-2 border-blue-200 focus:border-yellow-400 focus:ring-2 focus:ring-yellow-200 px-4 py-3 text-lg transition-all duration-200 bg-blue-50 dark:bg-blue-900 placeholder:text-blue-400 focus:bg-white dark:focus:bg-boxdark resize-y min-h-[48px] max-h-[320px]"
-        placeholder="Essay content"
+        placeholder="Content to be presented by the student to write the essay, and by the LLM to correct it"
         rows={3}
       />
       <label className="flex items-center gap-2 text-green-700 font-bold">
@@ -67,7 +77,7 @@ const EssayForm: React.FC<{ essayData?: Essay; onSuccess?: () => void }> = ({ es
         value={form.explanation}
         onChange={e => setForm({ ...form, explanation: e.target.value })}
         className="w-full rounded-2xl border-2 border-green-200 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-200 px-4 py-3 text-lg transition-all duration-200 bg-green-50 dark:bg-green-900 placeholder:text-green-400 focus:bg-white dark:focus:bg-boxdark resize-y min-h-[48px] max-h-[320px]"
-        placeholder="Essay explanation (optional)"
+        placeholder="Explanation of the essay correction criteria to be used by the student and the LLM (optional)"
         rows={2}
       />
       {status && <p className="mt-2 text-center text-sm text-gray-700 dark:text-gray-300">{status}</p>}
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -23,7 +23,9 @@
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18",
     "react-icons": "^5.5.0",
-    "react-modal": "^3.16.1"
+    "react-markdown": "^10.1.0",
+    "react-modal": "^3.16.1",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@types/node": "22.5.0",
diff --git a/src/frontend/types/essays.ts b/src/frontend/types/essays.ts
@@ -1,6 +1,7 @@
 export type Essay = {
   id?: string;
   topic: string;
+  theme?: string;
   content: string;
   explanation?: string;
 };
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"dependencies": {`
`3`	`3`	`"react-icons": "^5.5.0"`
`4`		`- }`
	`4`	`+ },`
	`5`	`+ "packageManager": "[email protected]+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -165,6 +165,7 @@ async def list_essays_endpoint() -> JSONResponse:`
`165`	`165`	`message="Successfully retrieved question data.",`
`166`	`166`	`content=items,`
`167`	`167`	`)`
	`168`	`+ print(response_body)`
`168`	`169`	`return JSONResponse(status_code=status.HTTP_200_OK, content=jsonable_encoder(response_body))`
`169`	`170`
`170`	`171`