code7-leia 1.0.14 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "code7-leia",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "author": "code7-xlab",
   "license": "MIT",
   "main": "dist/index.es.js",
@@ -18,8 +18,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "deploy": "npm run build && npm version patch && npm publish",
-    "deploy-gio": "npm run build && npm publish"
+    "deploy": "npm run build && npm publish"
   },
   "dependencies": {
     "axios": "^1.6.7",
@@ -40,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/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,7 +10,7 @@ import LengthCounter from '../LengthCounter';
 import { useLeia } from '../../contexts/LeiaProvider';
 
 import * as S from './styles';
-import Table from '../FileArea/components/Table';
+import Tooltip from '../Tootip';
 
 interface Persona {
   id: number;
@@ -103,6 +103,25 @@ 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>
@@ -152,7 +171,7 @@ export const PersonasArea = () => {
 
 
       {isOpen && (
-        <Modal onClose={() => setIsOpen(false)} title={t.personas?.modalTitle}>
+        <Modal onClose={() => setIsOpen(false)} title={<ModalTitle/>}>
           <S.InputWrapper>
             <Input
               value={form.name}

package/src/components/PersonasArea/styles.ts

@@ -203,3 +203,9 @@ export const TableContainer = styled.table`
 }
 }
 `;
+
+export const ModalTitleContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;

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/utils/languages/en.ts

@@ -17,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

@@ -17,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

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