code7-leia 1.0.16 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "code7-leia",
-  "version": "1.0.16",
+  "version": "1.0.20",
   "author": "code7-xlab",
   "license": "MIT",
   "main": "dist/index.es.js",

package/src/components/Alert/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import * as S from './styles';
+import {
+  FaCheckCircle,
+  FaExclamationTriangle,
+  FaTimesCircle,
+  FaInfoCircle,
+} from 'react-icons/fa';
+
+import { BsFillInfoSquareFill } from "react-icons/bs";
+
+type AlertStatus = 'success' | 'warning' | 'error' | 'info';
+
+interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  status?: AlertStatus;
+  title?: React.ReactNode;
+  message?: React.ReactNode | string[];
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+const icons = {
+  success: <FaCheckCircle />,
+  warning: <FaExclamationTriangle />,
+  error: <FaTimesCircle />,
+  info: <BsFillInfoSquareFill />,
+};
+
+export const Alert: React.FC<AlertProps> = ({
+  status = 'info',
+  title,
+  message,
+  icon,
+  children,
+  ...rest
+}) => {
+  const renderMessage = () => {
+    if (Array.isArray(message)) {
+      return message.map((m, i) => <p key={i}>- {m}</p>);
+    }
+    return message ? <p>{message}</p> : null;
+  };
+
+  return (
+    <S.Container status={status} {...rest}>
+      <S.Content>
+        <S.Header>
+          <S.Icon>{icon || icons[status]}</S.Icon>
+          {title && <strong>{title}</strong>}
+        </S.Header>
+        <div>         
+          {renderMessage()}
+          {children}
+        </div>
+      </S.Content>
+    </S.Container>
+  );
+};

package/src/components/Alert/styles.tsx

@@ -0,0 +1,63 @@
+import styled, { css } from 'styled-components';
+
+type AlertStatus = 'success' | 'warning' | 'error' | 'info';
+
+const statusStyles = {
+  success: css`
+    background: var(--semantic-green-100-light);
+    border-color: var(--semantic-green-600-light);
+    color: var(--semantic-green-600-light);
+  `,
+  warning: css`
+    background: var(--semantic-orange-100-light);
+    border-color: var(--semantic-orange-600-light);
+    color: var(--semantic-orange-600-light);
+  `,
+  error: css`
+    background: var(--semantic-red-100-light);
+    border-color: var(--semantic-red-600-light);
+    color: var(--semantic-red-600-light);
+  `,
+  info: css`
+    background: var(--semantic-cyan-100-light);
+    border-color: var(--semantic-cyan-600-light);
+    color: var(--semantic-cyan-600-light);
+  `,
+};
+
+export const Container = styled.div<{ status: AlertStatus }>`
+  padding: 16px 24px;
+  border: 1px solid;
+  border-radius: var(--radius-small);
+  margin-bottom: 14px;
+
+  ${({ status }) => statusStyles[status]}
+  p {
+    font-size: 14px;
+    margin: 4px 0;
+  }
+`;
+
+export const Content = styled.div`
+  display: flex;
+  gap: 12px;
+  flex-direction: column;
+`;
+
+export const Header = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const Icon = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+

package/src/components/PersonasArea/index.tsx

@@ -1,16 +1,16 @@
-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 { FaPlus, FaCopy, FaEdit, FaTrash } from 'react-icons/fa';
 import Modal from '../Modal';
 import Input from '../TestArea/components/InputTest';
 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 { Alert } from "../Alert";
 
 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,37 +103,22 @@ 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())
-  );
-
-  const ModalTitle = () => {
-    return (
-      <S.ModalTitleContainer className='modal-title'>
-        <h3>{t.personas?.modalTitle}</h3>
-        <Tooltip
-          position="right"
-          width={'200px'}
-          render={() =>
-           t.personas?.modalTooltip
-          }
-        >
-          <>
-          <FaQuestionCircle  color = "#8D9CA1" size={16}/>
-          </>
-        </Tooltip>
-      </S.ModalTitleContainer>
-    )
-  }
+  useEffect(() => {
+    setFilteredPersonas(
+      personas?.filter((p) =>
+        p.name.toLowerCase().includes(search.toLowerCase()),
+      ),
+    );
+  }, [personas]);
 
   return (
     <S.Container>
       <S.Header>
-        <div className='infos'>
+        <div className="infos">
           <h2>{t.personas?.title}</h2>
           <p>{t.personas?.description}</p>
         </div>
@@ -134,44 +127,49 @@ 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/>}>
+        <Modal onClose={() => setIsOpen(false)} title={t.personas?.modalTitle}>
           <S.InputWrapper>
             <Input
               value={form.name}
@@ -182,30 +180,44 @@ 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>
-          <TextArea
-            label={t.personas?.fields.prompt}
-            maxLength={10000}
-            value={form.prompt}
-            onChange={(e: any) => setForm({ ...form, prompt: e.target.value })}
+          <div className="textarea-wrapper">
+            <TextArea
+              label={t.personas?.fields.prompt}
+              maxLength={10000}
+              value={form.prompt}
+              onChange={(e: any) => setForm({ ...form, prompt: e.target.value })}
+            />
+            <LengthCounter value={form.prompt} maxLength={10000} />
+          </div>
+          <Alert
+            title={t.personas?.alertTitle}
+            message={t.personas?.alertMessage}
           />
-          <LengthCounter value={form.prompt} maxLength={10000} />
 
           <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 +226,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>
       )}

package/src/components/PersonasArea/styles.ts

@@ -3,6 +3,10 @@ import styled from 'styled-components';
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
+
+  .textarea-wrapper{
+    margin-bottom: 12px;
+  }
 `;
 
 export const Header = styled.div`
@@ -204,8 +208,5 @@ export const TableContainer = styled.table`
 }
 `;
 
-export const ModalTitleContainer = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
+
+

package/src/utils/languages/en.ts

@@ -17,7 +17,8 @@ export const enTranslation: Language = {
     add: 'Add persona',
     modalTitle: 'Persona',
     modalAlert: 'Are you sure you want to delete',
-    modalTooltip: "The AI will behave exactly as described in this prompt. Anything it says from here on is the responsibility of the user.",
+    alertTitle: 'Important',
+    alertMessage: "The AI-generated responses are based on the guidelines in this prompt; defining their content is the user's responsibility.",
 
     fields: {
       name: 'Name',

package/src/utils/languages/es.ts

@@ -17,7 +17,8 @@ export const esTranslation: Language = {
     add: 'Agregar persona',
     modalTitle: 'Persona',
     modalAlert: '¿Seguro que deseas eliminar',
-    modalTooltip: "La IA se comportará exactamente según este prompt. Todo lo que diga a partir de aquí es responsabilidad del usuario.",
+    alertTitle: 'Importante',
+    alertMessage: "Las respuestas generadas por IA se basan en las pautas de este mensaje; definir su contenido es responsabilidad del usuario.",
 
     fields: {
       name: 'Nombre',

package/src/utils/languages/pt-br.ts

@@ -17,7 +17,8 @@ export const ptTranslation: Language = {
     add: 'Adicionar persona',
     modalTitle: 'Persona',
     modalAlert: 'Quer mesmo deletar',
-    modalTooltip: "A IA vai se comportar exatamente como este prompt descreve. Tudo o que ela disser a partir disso é responsabilidade do usuário.",
+    alertTitle: 'Importante',
+    alertMessage: "As respostas geradas pela IA são baseadas nas orientações deste prompt, sendo responsabilidade do usuário a definição de seu conteúdo.",
 
     fields: {
       name: 'Nome',