code7-leia 1.0.17 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "code7-leia",
-  "version": "1.0.17",
+  "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,6 +1,6 @@
 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';
@@ -10,7 +10,7 @@ import LengthCounter from '../LengthCounter';
 import { useLeia } from "../../contexts/LeiaProvider";
 
 import * as S from "./styles";
-import Tooltip from "../Tootip";
+import { Alert } from "../Alert";
 
 interface Persona {
   id: number;
@@ -115,25 +115,6 @@ export const PersonasArea = () => {
     );
   }, [personas]);
 
-  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>
-    )
-  }
-
   return (
     <S.Container>
       <S.Header>
@@ -188,7 +169,7 @@ export const PersonasArea = () => {
       </S.TableContainer>
 
       {isOpen && (
-        <Modal onClose={() => setIsOpen(false)} title={<ModalTitle/>}>
+        <Modal onClose={() => setIsOpen(false)} title={t.personas?.modalTitle}>
           <S.InputWrapper>
             <Input
               value={form.name}
@@ -205,13 +186,19 @@ export const PersonasArea = () => {
               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>

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',