code7-leia 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "code7-leia",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "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 version patch && npm publish"
+    "deploy": "npm run build && npm publish"
   },
   "dependencies": {
     "axios": "^1.6.7",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@types/node": "^22.16.0",
     "@types/react-dom": "^18.2.0",
-    "@types/styled-components": "^5.1.34",
+    "@types/styled-components": "^5.1.36",
     "@vitejs/plugin-react": "5.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/components/EmptyState/styles.tsx

@@ -79,3 +79,7 @@ export const Container = styled.div<ContainerProps>`
     }
   }
 `;
+
+const Table = styled.table`
+  margin-top: 12px;
+`

package/src/components/Modal/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import * as S from './styles';
 import { IoClose } from 'react-icons/io5';
+import Tooltip from '../Tootip';
 
 interface ModalProps {
-  title?: string;
+  title?: React.ReactNode;
   children: React.ReactNode;
   onClose: () => void;
 }
@@ -13,7 +14,7 @@ const Modal = ({ title, children, onClose }: ModalProps) => {
     <S.Overlay>
       <S.Container>
         <S.Header>
-          {title && <h3>{title}</h3>}
+            {title && <>{title}</>}
           <button onClick={onClose}>
             <IoClose />
           </button>

package/src/components/PersonasArea/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { getLanguage } from '../../utils/getLanguage';
-import { FaPlus, FaCopy, FaEdit, FaTrash } from 'react-icons/fa';
+import { FaPlus, FaCopy, FaEdit, FaQuestionCircle, FaTrash } from 'react-icons/fa';
 import Modal from '../Modal';
 import Input from '../TestArea/components/InputTest';
 import TextArea from '../TestArea/components/TextArea';
@@ -10,6 +10,7 @@ import LengthCounter from '../LengthCounter';
 import { useLeia } from '../../contexts/LeiaProvider';
 
 import * as S from './styles';
+import Tooltip from '../Tootip';
 
 interface Persona {
   id: number;
@@ -102,10 +103,29 @@ export const PersonasArea = () => {
     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>
+    )
+  }
+
   return (
     <S.Container>
       <S.Header>
-        <div>
+        <div className='infos'>
           <h2>{t.personas?.title}</h2>
           <p>{t.personas?.description}</p>
         </div>
@@ -113,19 +133,22 @@ export const PersonasArea = () => {
           <FaPlus /> {t.personas?.add}
         </button>
       </S.Header>
-      <Search placeholder={t.search} setFiles={setPersonas} initialFiles={personas}  />
-      <S.List>
-        {filteredPersonas?.map((persona: any) => (
-          <S.Row key={persona.id}>
-            <div className="info">
-              <strong>{persona.name}</strong>
-              <span>{persona.description}</span>
-            </div>
-            {/**
-             * Se tiver o created_at, significa que é uma persona criada pelo usuário
-             * e pode ser editada ou clonada. Caso contrário, é uma persona padrão e não pode ser editada.
-             */}
-            {persona.created_at && (
+      <S.Search>
+        <Search placeholder={t.search} setFiles={setPersonas} initialFiles={personas}  />
+      </S.Search>
+      <S.TableContainer>
+        <tbody>
+          {filteredPersonas?.map((persona: any) => (
+
+            <tr className = "tr-Row" key = {persona.id}>
+              <td>
+                <div className="info">
+                  <p><strong>{persona.name}</strong></p>
+                  <span>{persona.description}</span>
+                </div>
+              </td>
+              <td className='td-actions'>
+                {persona.created_at && (
               <div className="actions">
                 <button onClick={() => openEdit(persona)}>
                   <FaEdit /> {t.edit}
@@ -133,28 +156,34 @@ export const PersonasArea = () => {
                 <button onClick={() => openClone(persona)}>
                   <FaCopy /> {t.clone}
                 </button>
-                <button onClick={() => openDelete(persona)}>
+                <button className="button-delete" onClick={() => openDelete(persona)}>
                   <FaTrash /> {t.delete}
                 </button>
               </div>
             )}
+              </td>
+            </tr>
+
             
-          </S.Row>
-        ))}
-      </S.List>
+          ))}
+        </tbody>
+      </S.TableContainer>
+
 
       {isOpen && (
-        <Modal onClose={() => setIsOpen(false)} title={t.personas?.modalTitle}>
+        <Modal onClose={() => setIsOpen(false)} title={<ModalTitle/>}>
           <S.InputWrapper>
             <Input
               value={form.name}
               placeholder={t.personas?.fields.name}
               onChange={(value: any) => setForm({ ...form, name: value })}
+              maxLength={50}
             />
             <Input
               value={form.description}
               placeholder={t.personas?.fields.description}
               onChange={(value: any) => setForm({ ...form, description: value })}
+              maxLength={200}
             />
           </S.InputWrapper>
           <TextArea

package/src/components/PersonasArea/styles.ts

@@ -18,7 +18,6 @@ export const Header = styled.div`
 
     h2 {
       font-size: 20px;
-      margin: 0;
     }
 
     p {
@@ -48,7 +47,7 @@ export const Header = styled.div`
 
 export const Search = styled.div`
   width: 320px;
-  margin-bottom: 15px;
+  margin-bottom: 12px;
 `;
 
 export const List = styled.div`
@@ -87,7 +86,7 @@ export const Row = styled.div`
     gap: 8px;
 
     button {
-      background: white;
+      background: red;
       border: 1px solid #dcdfe6;
       padding: 6px 10px;
       border-radius: 4px;
@@ -135,3 +134,78 @@ export const InputWrapper = styled.div`
   margin-bottom: 12px;
   max-width: 100%;
 `;
+
+export const TableContainer = styled.table`
+
+.tr-Row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  background: white;
+  padding: 14px;
+  border-radius: 5px;
+  border: 1px solid #dcdfe6;
+  margin-bottom: 2px;
+
+  .info {
+    display: flex;
+    flex-direction: column;
+
+    strong {
+      font-size: 14px;
+    }
+
+    span {
+      font-size: 13px;
+      color: #5a5d68;
+      margin-top: 2px;
+    }
+  }
+
+.actions {
+  display: flex;
+  gap: 8px;
+
+  button {
+    background: #f3f5f9;
+    cursor: pointer;
+    border: 1px solid #dcdfe6;
+    padding: 8px 12px;
+    border-radius: 4px;
+    color: rgb(16, 38, 147);
+
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    font-size: 12px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+
+    &:hover {
+      background: #dadce3;
+    }
+  }
+
+  .button-delete {
+    background: #fae0d2;
+    border: 1px solid #f5c2c2;
+    color: #5b0a1f;
+
+    &:hover {
+      background: #f5bba7;
+    }
+  }
+}
+}
+`;
+
+export const ModalTitleContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;

package/src/components/TestArea/components/InputTest/index.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import * as S from './styles';
 
-interface InputTestProps {
-  placeholder: string;
+interface InputTestProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   onChange: (value: string) => void;
-  value?: string;
 }
 
-const InputTest: React.FC<InputTestProps> = ({ placeholder, onChange, value }) => {
+
+const InputTest: React.FC<InputTestProps> = ({
+  onChange,
+  ...rest
+}) => {
   return (
     <S.Container>
       <S.StyledInput
-        type="text"
-        value={value}
-        onChange={(e: any) => onChange(e.target.value)}
-        placeholder={placeholder}
+        {...rest}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
       />
     </S.Container>
   );

package/src/components/Tootip/index.tsx

@@ -0,0 +1,45 @@
+import React, { ReactElement, ReactNode } from 'react';
+import cc from 'classcat';
+
+import { Container } from './styles';
+
+interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+  render: () => ReactNode;
+  children: ReactElement;
+  position?: 'left' | 'right' | 'top' | 'bottom';
+  theme?: 'light' | 'dark';
+  show?: boolean;
+  className?: string;
+  width?: string;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({
+  position = 'bottom',
+  theme = 'dark',
+  render,
+  children,
+  show = true,
+  className = '',
+  width = '100px',
+  ...rest
+}) => {
+  return (
+    <>
+      {!show ? (
+        children
+      ) : (
+        <Container
+          width={width}
+          className={cc([theme, position, className])}
+          {...rest}
+        >
+          {render && <div className="tooltip-content">{render()}</div>}
+
+          <div className="tooltip-target">{children}</div>
+        </Container>
+      )}
+    </>
+  );
+};
+
+export default Tooltip;

package/src/components/Tootip/styles.ts

@@ -0,0 +1,177 @@
+import styled from 'styled-components';
+
+interface ContainerProps {
+  width?: string;
+}
+
+export const Container = styled.div<ContainerProps>`
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+
+  .tooltip-content {
+    border-radius: 5px;
+    font-size: 13px;
+    display: none;
+    padding: 6px 10px;
+    position: absolute;
+    transition: opacity 0.5s;
+    z-index: 6;
+    width: ${({ width }) => width};
+    line-height: 20px;
+
+    &::after {
+      border-style: solid;
+      border-width: 6px;
+      content: '';
+      position: absolute;
+    }
+  }
+
+  &:hover {
+    .tooltip-content {
+      display: block;
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &.dark {
+    .tooltip-content {
+      background-color: var(--neutral-3);
+      color: #fff;
+      box-shadow: 0px 5px 6px #00000040;
+
+      &::after {
+        border-color: var(--neutral-3) transparent transparent transparent;
+      }
+    }
+  }
+
+  &.light {
+    .tooltip-content {
+      background: #fff;
+      border-radius: 5px;
+      box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.25);
+
+      &::after {
+        border-color: #fff transparent transparent transparent;
+      }
+
+      &::before {
+        content: '';
+        border-style: solid;
+        border-width: 9px;
+        position: absolute;
+        border-color: #d8d8d8 transparent transparent transparent;
+      }
+    }
+  }
+
+  &.top {
+    .tooltip-content {
+      bottom: calc(100% + 10px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.dark .tooltip-content {
+      &::after {
+        top: calc(100%);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    &.light .tooltip-content {
+      &::before,
+      &::after {
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+  }
+
+  &.bottom {
+    .tooltip-content {
+      top: calc(100% + 10px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.dark .tooltip-content {
+      &::after {
+        bottom: calc(100%);
+        left: 50%;
+        transform: translateX(-50%) rotate(180deg);
+      }
+    }
+
+    &.light .tooltip-content {
+      &::before,
+      &::after {
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%) rotate(180deg);
+      }
+    }
+  }
+
+  &.right {
+    .tooltip-content {
+      left: calc(100% + 10px);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &.dark .tooltip-content {
+      &::after {
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%) rotate(90deg);
+      }
+    }
+
+    &.light .tooltip-content {
+      &::before,
+      &::after {
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%) rotate(90deg);
+      }
+    }
+  }
+
+  &.left {
+    .tooltip-content {
+      right: calc(100% + 10px);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &.dark .tooltip-content {
+      &::after {
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%) rotate(270deg);
+      }
+    }
+
+    &.light .tooltip-content {
+      &::before,
+      &::after {
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%) rotate(270deg);
+      }
+    }
+  }
+
+  &.show {
+    .tooltip-content {
+      display: inline-block;
+    }
+  }
+`;

package/src/service/ApiDev.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 export const API_TOKEN = 'API_TOKEN';
 
-const url = 'http://localhost:5000';
+const url = 'https://api-hml.leia.digitalcontact.cloud'
 
 axios.defaults.baseURL = `${url}`;
 

package/src/utils/languages/en.ts

@@ -8,6 +8,7 @@ export const enTranslation: Language = {
   edit: 'Edit',
   clone: 'Clone',
   save: 'Save',
+  delete: 'Delete',
   copyPrefix: 'Copy',
 
   personas: {
@@ -16,6 +17,7 @@ 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.",
 
     fields: {
       name: 'Name',

package/src/utils/languages/es.ts

@@ -7,6 +7,7 @@ export const esTranslation: Language = {
   search: 'Buscar',
   edit: 'Editar',
   clone: 'Clonar',
+  delete: 'Borrar',
   save: 'Guardar',
   copyPrefix: 'Copia',
 
@@ -16,6 +17,7 @@ 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.",
 
     fields: {
       name: 'Nombre',

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

@@ -7,6 +7,7 @@ export const ptTranslation: Language = {
   search: 'Pesquisar',
   edit: 'Editar',
   clone: 'Clonar',
+  delete: 'Excluir',
   save: 'Salvar',
   copyPrefix: 'Cópia',
 
@@ -16,6 +17,7 @@ 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.",
 
     fields: {
       name: 'Nome',