Merge pull request #17 from ClassConnect-org/dev

Dev

Author: joacoalvarez

src/@types/refine.ts

@@ -0,0 +1,19 @@
+interface Refine {
+  question: string;
+  answer: string;
+  feedback: string;
+  id: string;
+}
+
+interface RefinePayload {
+  question: string;
+  answer: string;
+  id: string;
+}
+
+interface GetRefinesParams {
+  page?: number;
+}
+
+
+export type { Refine, RefinePayload, GetRefinesParams };

src/components/AIChat.tsx

@@ -0,0 +1,331 @@
+import React, { useEffect, useState } from "react";
+import type { Refine } from "../@types/refine";
+import { getRefine, postRefine, deleteChat } from "../services/ai_chat.ts";
+import type { JSX } from "react";
+
+function extractBracedBlockFrom(str: string, startPattern: RegExp): string | null {
+  const match = str.match(startPattern);
+  if (!match) return null;
+  let startIdx = match.index! + match[0].length;
+
+  // Avanza hasta la primera llave de apertura
+  while (str[startIdx] !== '{' && startIdx < str.length) startIdx++;
+  if (str[startIdx] !== '{') return null;
+
+  let open = 1;
+  let i = startIdx + 1;
+  for (; i < str.length; i++) {
+    if (str[i] === '{') open++;
+    if (str[i] === '}') open--;
+    if (open === 0) break;
+  }
+
+  if (open !== 0) return null;
+
+  return str.slice(startIdx, i + 1);
+}
+
+function parseRefineQuestion(raw: string) {
+  const questionMatch = raw.match(/QUESTION:\s*'([^']*)'/);
+  const passageMatch = raw.match(/PASSAGE:\s*'([\s\S]*?)'/);
+  const passage = passageMatch ? passageMatch[1] : "";
+
+  // Usa extractBracedBlockFrom directamente sobre raw
+  const metadata = extractBracedBlockFrom(raw, /METADATA:\s*'/) ?? "";
+
+  return {
+    question: questionMatch ? questionMatch[1] : "",
+    passage,
+    metadata,
+  };
+}
+
+function renderObjectAsTable(obj: any): JSX.Element {
+  return (
+    <table className="min-w-full rounded-md overflow-hidden mb-2 text-base"> 
+      <tbody>
+        {Object.entries(obj).map(([key, value]) => (
+          <tr key={key} className="border-t border-gray-200 last:border-b"> 
+            <td className="px-3 py-2 font-medium capitalize text-gray-700 bg-gray-50 w-1/4 border-r border-gray-200 align-top">
+              {key}
+            </td>
+            <td className="px-3 py-2 bg-white align-top"> 
+              {Array.isArray(value)
+                ? value.map((v, i) =>
+                    typeof v === "object" && v !== null
+                      ? (
+                        <div
+                          key={i}
+                          className={i < value.length - 1 ? "pb-2 mb-2" : ""}
+                        >
+                          {renderObjectAsTable(v)}
+                        </div>
+                      )
+                      : (
+                        <span
+                          key={i}
+                          className={i < value.length - 1 ? "pb-1 mb-1 inline-block" : ""}
+                        >
+                          {String(v)}{i < value.length - 1 ? ', ' : ''}
+                        </span>
+                      )
+                  )
+                : typeof value === "object" && value !== null
+                  ? renderObjectAsTable(value)
+                  : String(value)
+              }
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function formatMetadata(metadata: string) {
+  try {
+    const fixed = metadata
+      .replace(/None/g, 'null')
+      .replace(/'([^']*?)'\s*:/g, (_, key) => `"${key}":`)
+      .replace(/:\s*'([^']*?)'/g, (_, val) => `: "${val}"`);
+    const obj = JSON.parse(fixed);
+
+    // Extrae los campos id, name, email si existen en la metadata raíz o en profile_info
+    const filtered =
+      "profile_info" in obj
+        ? {
+            id: obj.profile_info.id ?? obj.id ?? "",
+            name: obj.profile_info.name ?? obj.name ?? "",
+            email: obj.profile_info.email ?? obj.email ?? "",
+          }
+        : {
+            id: obj.id ?? "",
+            name: obj.name ?? "",
+            email: obj.email ?? "",
+          };
+
+    return (
+      <div className="text-base text-gray-800 space-y-4">
+        {renderObjectAsTable(filtered)}
+      </div>
+    );
+  } catch (err) {
+    console.error("Metadata parse error:", err);
+    return <span>{metadata}</span>;
+  }
+}
+
+const AIChatManagment: React.FC = () => {
+  const [refines, setRefines] = useState<Refine[]>([]);
+  const [expandedRefineId, setExpandedRefineId] = useState<string | null>(null);
+  const [editingRefineId, setEditingRefineId] = useState<string | null>(null);
+  const [editedAnswer, setEditedAnswer] = useState<string>("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [hasNextPage, setHasNextPage] = useState(false);
+
+  const fetchRefines = async () => {
+    // Pide la página actual
+    const refinesPage = await getRefine({ page: currentPage });
+    setRefines(refinesPage);
+
+    // Pide la siguiente página para saber si hay más
+    const nextPage = await getRefine({ page: currentPage + 1 });
+    setHasNextPage(nextPage.length > 0);
+  };
+
+  useEffect(() => {
+    fetchRefines();
+  }, [currentPage]);
+
+  const handleEdit = (refine: Refine) => {
+    setEditingRefineId(refine.id);
+    setEditedAnswer(refine.answer);
+  };
+
+  const handleCancel = () => {
+    setEditingRefineId(null);
+    setEditedAnswer("");
+  };
+
+  const handlePost = async (refine: Refine) => {
+    await postRefine([{
+      question: refine.question,
+      answer: refine.answer,
+      id: refine.id,
+    }]);
+    fetchRefines();
+  };
+
+  const handleSave = (refine: Refine) => {
+    setRefines((prev) =>
+      prev.map((r) =>
+        r.id === refine.id ? { ...r, answer: editedAnswer } : r
+      )
+    );
+    setEditingRefineId(null);
+    setEditedAnswer("");
+  };
+
+  const handleDelete = async (id: string) => {
+    if (window.confirm("Are you sure you want to delete this rule?")) {
+      await deleteChat(id);
+      fetchRefines();
+      if (expandedRefineId === id) {
+        setExpandedRefineId(null);
+      }
+    }
+  };
+
+  const toggleExpandRule = (id: string) => {
+    setExpandedRefineId(expandedRefineId === id ? null : id);
+  };
+
+return (
+  <div className="space-y-4">
+    <div className="space-y-3">
+      {refines.map((refine) => {
+        const { question, metadata } = parseRefineQuestion(refine.question);
+        return (
+          <div key={refine.id} className="border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
+            <div
+              className="p-4 bg-white hover:bg-gray-50 cursor-pointer flex justify-between items-center"
+              onClick={() => toggleExpandRule(refine.id)}
+            >
+            <div>
+              <span className="text-gray-500 text-sm mr-2">User Message:</span>
+              <span className="font-medium text-gray-900">{question}</span>
+            </div>
+              <svg
+                className={`w-5 h-5 text-gray-500 transition-transform ${
+                  expandedRefineId === refine.id ? "transform rotate-180" : ""
+                }`}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 9l-7 7-7-7"
+                />
+              </svg>
+            </div>
+            {expandedRefineId === refine.id && (
+              <div className="p-4 border-t border-gray-200 bg-gray-50 space-y-4">
+                {metadata && (
+                  <div>
+                    <h4 className="font-semibold text-gray-700 mb-2">User</h4> 
+                    {formatMetadata(metadata)}
+                  </div>
+                )}
+                {refine.feedback && (
+                  <div>
+                    <h4 className="font-semibold text-gray-700 mb-2">Feedback</h4>
+                    <div className="mb-2 p-3 bg-white border border-gray-200 rounded-md text-base leading-relaxed">{refine.feedback}</div> 
+                  </div>
+                )}
+                <div>
+                  <h4 className="font-semibold text-gray-700 mb-2">Respuesta IA</h4>
+                  {editingRefineId === refine.id ? (
+                    <textarea
+                      className="w-full p-2 border border-gray-300 rounded text-base"
+                      value={editedAnswer}
+                      onChange={(e) => setEditedAnswer(e.target.value)}
+                      rows={4}
+                    />
+                  ) : (
+                    <div className="p-3 bg-white border border-gray-200 rounded-md text-base leading-relaxed">{refine.answer}</div>
+                  )}
+                </div>
+
+                  <div className="flex space-x-2 pt-2">
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handlePost(refine)
+                      }}
+                      className="px-3 py-1 bg-green-600 hover:bg-green-700 text-white rounded-md text-sm transition-colors shadow-sm cursor-pointer"
+                    >
+                      Accept
+                    </button>
+
+                    {editingRefineId === refine.id ? (
+                      <>
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleSave(refine);
+                          }}
+                          className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm transition-colors shadow-sm cursor-pointer"
+                        >
+                          Save
+                        </button>
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleCancel();
+                          }}
+                          className="px-3 py-1 bg-gray-400 hover:bg-gray-500 text-white rounded-md text-sm transition-colors shadow-sm cursor-pointer"
+                        >
+                          Cancel
+                        </button>
+                      </>
+                    ) : (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleEdit(refine);
+                        }}
+                        className="px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-sm transition-colors shadow-sm cursor-pointer"
+                      >
+                        Modify
+                      </button>
+                    )}
+
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDelete(refine.id);
+                      }}
+                      className="px-3 py-1 bg-red-500 hover:bg-red-600 text-white rounded-md text-sm transition-colors shadow-sm cursor-pointer"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      {/* Paginación */}
+      <div className="flex items-center justify-between border-t border-gray-200">
+        <div className="flex items-center justify-end pt-4">
+          <button
+            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+            disabled={currentPage === 1}
+            className={
+              "px-3 py-1 border border-gray-300 rounded text-sm disabled:opacity-50 hover:bg-gray-50" +
+              (!hasNextPage ? "" : " cursor-pointer")
+            }
+          >
+            Previous
+          </button>
+          <button
+            onClick={() => setCurrentPage(p => p + 1)}
+            disabled={!hasNextPage}
+            className={
+              "px-3 py-1 border border-gray-300 rounded text-sm disabled:opacity-50 hover:bg-gray-50" +
+              (!hasNextPage ? "" : " cursor-pointer")
+            }
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AIChatManagment;

src/components/AdminFormModal.tsx

@@ -31,7 +31,7 @@ const AdminFormModal: React.FC<Props> = ({ onClose, onSubmit }) => {
           </h3>
           <button
             onClick={onClose}
-            className="text-gray-400 hover:text-gray-500"
+            className="text-gray-400 hover:text-gray-500 cursor-pointer"
           >
             <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -77,13 +77,13 @@ const AdminFormModal: React.FC<Props> = ({ onClose, onSubmit }) => {
             <button
               type="button"
               onClick={onClose}
-              className="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              className="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
             >
               Cancel
             </button>
             <button
               type="submit"
-              className="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              className="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
             >
               Create Admin
             </button>

src/components/Admins.tsx

@@ -40,7 +40,7 @@ const AdminsManagementView: React.FC = () => {
           />
           <button
             onClick={() => setShowModal(true)}
-            className="px-4 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700"
+            className="px-4 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600 cursor-pointer"
           >
             New Admin
           </button>