code7-leia 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "code7-leia",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "author": "code7-xlab",
   "license": "MIT",
   "main": "dist/index.es.js",
@@ -18,7 +18,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "deploy": "npm run build && npm publish"
+    "deploy": "npm run build && npm version patch && npm publish"
   },
   "dependencies": {
     "axios": "^1.6.7",

package/src/components/PersonasArea/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from "react";
 import { getLanguage } from '../../utils/getLanguage';
 import { FaPlus, FaCopy, FaEdit, FaQuestionCircle, FaTrash } from 'react-icons/fa';
 import Modal from '../Modal';
@@ -7,10 +7,10 @@ import TextArea from '../TestArea/components/TextArea';
 import Search from '../FileArea/components/Search';
 import LengthCounter from '../LengthCounter';
 
-import { useLeia } from '../../contexts/LeiaProvider';
+import { useLeia } from "../../contexts/LeiaProvider";
 
-import * as S from './styles';
-import Tooltip from '../Tootip';
+import * as S from "./styles";
+import Tooltip from "../Tootip";
 
 interface Persona {
   id: number;
@@ -18,29 +18,36 @@ interface Persona {
   description: string;
   prompt: string;
   type?: string;
+  created_at?: string;
 }
 
 export const PersonasArea = () => {
   const { language } = useLeia();
   const t = getLanguage(language);
-  const [_,setPersonas] = useState<Persona[]>([]);
   const { createPersona, personas, updatePersona, deletePersona } = useLeia();
 
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState("");
   const [isOpen, setIsOpen] = useState(false);
   const [editingPersona, setEditingPersona] = useState<any>(null);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [personaToDelete, setPersonaToDelete] = useState<any>(null);
+  const [_, setPersonas] = useState<Persona[]>([]);
+  const [filteredPersonas, setFilteredPersonas] = useState<any>([]);
 
   const [form, setForm] = useState({
-    name: '',
-    description: '',
-    prompt: '',
+    name: "",
+    description: "",
+    prompt: "",
   });
 
+  const isFormValid =
+    form.name.trim() !== "" &&
+    form.description.trim() !== "" &&
+    form.prompt.trim() !== "";
+
   const openCreate = () => {
     setEditingPersona(null);
-    setForm({ name: '', description: '', prompt: '' });
+    setForm({ name: "", description: "", prompt: "" });
     setIsOpen(true);
   };
 
@@ -65,13 +72,14 @@ export const PersonasArea = () => {
   };
 
   const handleSave = async () => {
+    if (!isFormValid) return;
     try {
       if (!editingPersona) {
         const payload = {
           name: form.name,
           description: form.description,
           prompt: form.prompt,
-          type: 'persona',
+          type: "persona",
         };
         await createPersona(payload);
       } else {
@@ -80,7 +88,7 @@ export const PersonasArea = () => {
 
       setIsOpen(false);
     } catch (err) {
-      console.error('Erro ao salvar persona', err);
+      console.error("Erro ao salvar persona", err);
     }
   };
 
@@ -95,13 +103,17 @@ export const PersonasArea = () => {
       setIsDeleteOpen(false);
       setPersonaToDelete(null);
     } catch (err) {
-      console.error('Erro ao deletar persona', err);
+      console.error("Erro ao deletar persona", err);
     }
   };
 
-  const filteredPersonas = personas?.filter((p) =>
-    p.name.toLowerCase().includes(search.toLowerCase())
-  );
+  useEffect(() => {
+    setFilteredPersonas(
+      personas?.filter((p) =>
+        p.name.toLowerCase().includes(search.toLowerCase()),
+      ),
+    );
+  }, [personas]);
 
   const ModalTitle = () => {
     return (
@@ -125,7 +137,7 @@ export const PersonasArea = () => {
   return (
     <S.Container>
       <S.Header>
-        <div className='infos'>
+        <div className="infos">
           <h2>{t.personas?.title}</h2>
           <p>{t.personas?.description}</p>
         </div>
@@ -134,42 +146,47 @@ export const PersonasArea = () => {
         </button>
       </S.Header>
       <S.Search>
-        <Search placeholder={t.search} setFiles={setPersonas} initialFiles={personas}  />
+        <Search
+          placeholder={t.search}
+          setFiles={setFilteredPersonas}
+          initialFiles={personas}
+        />
       </S.Search>
       <S.TableContainer>
         <tbody>
           {filteredPersonas?.map((persona: any) => (
-
-            <tr className = "tr-Row" key = {persona.id}>
+            <tr className="tr-Row" key={persona.id}>
               <td>
                 <div className="info">
-                  <p><strong>{persona.name}</strong></p>
+                  <p>
+                    <strong>{persona.name}</strong>
+                  </p>
                   <span>{persona.description}</span>
                 </div>
               </td>
-              <td className='td-actions'>
+              <td className="td-actions">
                 {persona.created_at && (
-              <div className="actions">
-                <button onClick={() => openEdit(persona)}>
-                  <FaEdit /> {t.edit}
-                </button>
-                <button onClick={() => openClone(persona)}>
-                  <FaCopy /> {t.clone}
-                </button>
-                <button className="button-delete" onClick={() => openDelete(persona)}>
-                  <FaTrash /> {t.delete}
-                </button>
-              </div>
-            )}
+                  <div className="actions">
+                    <button onClick={() => openEdit(persona)}>
+                      <FaEdit /> {t.edit}
+                    </button>
+                    <button onClick={() => openClone(persona)}>
+                      <FaCopy /> {t.clone}
+                    </button>
+                    <button
+                      className="button-delete"
+                      onClick={() => openDelete(persona)}
+                    >
+                      <FaTrash /> {t.delete}
+                    </button>
+                  </div>
+                )}
               </td>
             </tr>
-
-            
           ))}
         </tbody>
       </S.TableContainer>
 
-
       {isOpen && (
         <Modal onClose={() => setIsOpen(false)} title={<ModalTitle/>}>
           <S.InputWrapper>
@@ -182,7 +199,9 @@ export const PersonasArea = () => {
             <Input
               value={form.description}
               placeholder={t.personas?.fields.description}
-              onChange={(value: any) => setForm({ ...form, description: value })}
+              onChange={(value: any) =>
+                setForm({ ...form, description: value })
+              }
               maxLength={200}
             />
           </S.InputWrapper>
@@ -196,16 +215,22 @@ export const PersonasArea = () => {
 
           <S.ModalActions>
             <button onClick={() => setIsOpen(false)}>{t.buttons.cancel}</button>
-            <button onClick={handleSave}>{t.save}</button>
+            <button
+              onClick={handleSave}
+              disabled={!isFormValid}
+              style={{
+                opacity: isFormValid ? 1 : 0.5,
+                cursor: isFormValid ? "pointer" : "not-allowed",
+              }}
+            >
+              {t.save}
+            </button>
           </S.ModalActions>
         </Modal>
       )}
 
       {isDeleteOpen && personaToDelete && (
-        <Modal
-          onClose={() => setIsDeleteOpen(false)}
-          title={t.delete}
-        >
+        <Modal onClose={() => setIsDeleteOpen(false)} title={t.delete}>
           <p>
             {t.personas.modalAlert} <strong>{personaToDelete.name}</strong>?
           </p>
@@ -214,9 +239,7 @@ export const PersonasArea = () => {
             <button onClick={() => setIsDeleteOpen(false)}>
               {t.buttons.cancel}
             </button>
-            <button onClick={confirmDelete}>
-              {t.buttons.delete}
-            </button>
+            <button onClick={confirmDelete}>{t.buttons.delete}</button>
           </S.ModalActions>
         </Modal>
       )}