code7-leia 1.0.11 → 1.0.13

package/src/components/MultiSelect/styles.tsx

@@ -0,0 +1,85 @@
+import styled from 'styled-components';
+
+export const MultiSelectWrapper = styled.div`
+  width: 100%;
+  height: 45px;
+  
+`;
+
+export const SelectBox = styled.div`
+  position: relative;
+
+
+  select {
+    width: 100%;
+    font-weight: bold;
+    height: 45px;
+    border-radius: 4px;
+    padding-left: 10px;
+  }
+`;
+
+export const OverSelect = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  color: white;
+  padding-left: 10px;
+
+  
+  input {
+    height: 43px;
+    width: calc(100% - 30px);
+    border: none;
+    margin: 1px;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px #6690ff;
+    }
+
+  }
+
+`;
+
+export const Checkboxes = styled.div`
+  display: none;
+  background: white;
+  position: absolute;
+  width: 95%;
+  z-index: 10;
+
+  label {
+    padding: 10px 5px;
+  }
+`;
+
+export const CheckboxLabel = styled.label`
+  display: block;
+
+  &:hover {
+    background-color: #6690ff;
+  }
+`;
+
+export const SelectedValues = styled.div`
+  position: absolute;
+  top: 9px;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 5px;
+  right: 30px;
+`;
+
+export const SelectedValue = styled.div`
+  background-color: #254EDB;
+  color: white;
+  border-radius: 15px;
+  padding: 5px 10px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  white-space: nowrap;
+`;

package/src/components/PersonasArea/index.tsx

@@ -0,0 +1,196 @@
+import { useState } from 'react';
+import { getLanguage } from '../../utils/getLanguage';
+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 * as S from './styles';
+
+interface Persona {
+  id: number;
+  name: string;
+  description: string;
+  prompt: string;
+  type?: 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 [isOpen, setIsOpen] = useState(false);
+  const [editingPersona, setEditingPersona] = useState<any>(null);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [personaToDelete, setPersonaToDelete] = useState<any>(null);
+
+  const [form, setForm] = useState({
+    name: '',
+    description: '',
+    prompt: '',
+  });
+
+  const openCreate = () => {
+    setEditingPersona(null);
+    setForm({ name: '', description: '', prompt: '' });
+    setIsOpen(true);
+  };
+
+  const openEdit = (persona: any) => {
+    setEditingPersona(persona);
+    setForm({
+      name: persona.name,
+      description: persona.description,
+      prompt: persona.prompt,
+    });
+    setIsOpen(true);
+  };
+
+  const openClone = (persona: any) => {
+    setEditingPersona(null);
+    setForm({
+      name: `${t.copyPrefix} ${persona.name}`,
+      description: persona.description,
+      prompt: persona.prompt,
+    });
+    setIsOpen(true);
+  };
+
+  const handleSave = async () => {
+    try {
+      if (!editingPersona) {
+        const payload = {
+          name: form.name,
+          description: form.description,
+          prompt: form.prompt,
+          type: 'persona',
+        };
+        await createPersona(payload);
+      } else {
+        await updatePersona(editingPersona._id, form);
+      }
+
+      setIsOpen(false);
+    } catch (err) {
+      console.error('Erro ao salvar persona', err);
+    }
+  };
+
+  const openDelete = (persona: any) => {
+    setPersonaToDelete(persona);
+    setIsDeleteOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    try {
+      await deletePersona(personaToDelete._id);
+      setIsDeleteOpen(false);
+      setPersonaToDelete(null);
+    } catch (err) {
+      console.error('Erro ao deletar persona', err);
+    }
+  };
+
+  const filteredPersonas = personas?.filter((p) =>
+    p.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <S.Container>
+      <S.Header>
+        <div>
+          <h2>{t.personas?.title}</h2>
+          <p>{t.personas?.description}</p>
+        </div>
+        <button onClick={openCreate}>
+          <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 && (
+              <div className="actions">
+                <button onClick={() => openEdit(persona)}>
+                  <FaEdit /> {t.edit}
+                </button>
+                <button onClick={() => openClone(persona)}>
+                  <FaCopy /> {t.clone}
+                </button>
+                <button onClick={() => openDelete(persona)}>
+                  <FaTrash /> {t.delete}
+                </button>
+              </div>
+            )}
+            
+          </S.Row>
+        ))}
+      </S.List>
+
+      {isOpen && (
+        <Modal onClose={() => setIsOpen(false)} title={t.personas?.modalTitle}>
+          <S.InputWrapper>
+            <Input
+              value={form.name}
+              placeholder={t.personas?.fields.name}
+              onChange={(value: any) => setForm({ ...form, name: value })}
+            />
+            <Input
+              value={form.description}
+              placeholder={t.personas?.fields.description}
+              onChange={(value: any) => setForm({ ...form, description: value })}
+            />
+          </S.InputWrapper>
+          <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} />
+
+          <S.ModalActions>
+            <button onClick={() => setIsOpen(false)}>{t.buttons.cancel}</button>
+            <button onClick={handleSave}>{t.save}</button>
+          </S.ModalActions>
+        </Modal>
+      )}
+
+      {isDeleteOpen && personaToDelete && (
+        <Modal
+          onClose={() => setIsDeleteOpen(false)}
+          title={t.delete}
+        >
+          <p>
+            {t.personas.modalAlert} <strong>{personaToDelete.name}</strong>?
+          </p>
+
+          <S.ModalActions>
+            <button onClick={() => setIsDeleteOpen(false)}>
+              {t.buttons.cancel}
+            </button>
+            <button onClick={confirmDelete}>
+              {t.buttons.delete}
+            </button>
+          </S.ModalActions>
+        </Modal>
+      )}
+    </S.Container>
+  );
+};

package/src/components/PersonasArea/styles.ts

@@ -0,0 +1,137 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+
+  .infos {
+    display: flex;
+    flex-direction: column;
+    padding: 14px 0;
+
+    h2 {
+      font-size: 20px;
+      margin: 0;
+    }
+
+    p {
+      font-size: 14px;
+      margin-top: 4px;
+      color: #5a5d68;
+    }
+  }
+
+  button {
+    background: #102693;
+    padding: 10px 16px;
+    color: white;
+    border-radius: 4px;
+    height: 40px;
+
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+`;
+
+export const Search = styled.div`
+  width: 320px;
+  margin-bottom: 15px;
+`;
+
+export const List = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 12px;
+`;
+
+export const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  background: #f3f5f9;
+  padding: 14px;
+  border-radius: 5px;
+
+  .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: white;
+      border: 1px solid #dcdfe6;
+      padding: 6px 10px;
+      border-radius: 4px;
+
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      font-size: 13px;
+
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+`;
+
+export const ModalActions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+
+  button {
+    padding: 8px 14px;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+
+  button:first-child {
+    background: #e5e7eb;
+  }
+
+  button:last-child {
+    background: #102693;
+    color: white;
+  }
+`;
+
+export const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 12px;
+  max-width: 100%;
+`;

package/src/components/Select/index.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import * as S from './styles';
+
+interface SelectOption {
+  value: string | number;
+  label: string;
+}
+
+interface SelectProps {
+  options: SelectOption[];
+  onSelect: (value: string) => void;
+  placeholder?: string;
+}
+
+const CustomSelect: React.FC<SelectProps> = ({
+  options,
+  onSelect,
+  placeholder,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedValue, setSelectedValue] = useState<string | number>('');
+
+  const handleSelectOption = (value: string | number) => {
+    const selected = String(value);
+    setSelectedValue(selected);
+    onSelect(selected);
+    setIsOpen(false);
+  };
+
+  return (
+    <S.Container>
+      <div className="custom-select" onClick={() => setIsOpen(!isOpen)}>
+        <div className="selected-option">
+          {selectedValue || placeholder}
+          <span className="arrow">&#9660;</span>
+        </div>
+        {isOpen && (
+          <div className="options">
+            {options?.map?.(option => (
+              <div
+                key={option.value}
+                style={{
+                  background:
+                    option.value === selectedValue ? '#a0b7f5' : undefined,
+                  color: option.value === selectedValue ? 'white' : undefined,
+                }}
+                className="option"
+                onClick={() => handleSelectOption(option.value)}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </S.Container>
+  );
+};
+
+export default CustomSelect;

package/src/components/Select/styles.tsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  position: relative;
+  width: 50%;
+  margin-right: 5px;
+
+  .custom-select {
+    position: relative;
+    width: 100%;
+    cursor: pointer;
+
+    .selected-option {
+      padding: 12px;
+      border-radius: 4px;
+      border: 1px solid #979AA5;
+      height: 45px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+    }
+
+    .options {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      border: 1px solid #979AA5;
+      border-top: none;
+      border-radius: 0 0 4px 4px;
+      background-color: #fff;
+      z-index: 9;
+
+      .option {
+        padding: 12px;
+        cursor: pointer;
+        transition: background-color 0.1s;
+        letter-spacing: 0.5px;
+        font-size: 14px;
+
+        &:hover {
+          background-color: #6690ff;
+          color: white;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import * as S from './styles';
+
+interface InputTestProps {
+  placeholder: string;
+  onChange: (value: string) => void;
+  value?: string;
+}
+
+const InputTest: React.FC<InputTestProps> = ({ placeholder, onChange, value }) => {
+  return (
+    <S.Container>
+      <S.StyledInput
+        type="text"
+        value={value}
+        onChange={(e: any) => onChange(e.target.value)}
+        placeholder={placeholder}
+      />
+    </S.Container>
+  );
+};
+
+export default InputTest;

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  position: relative;
+  width: 100%;
+  margin-right: 5px;
+`;
+
+export const StyledInput = styled.input`
+  padding-left: 10px;
+  padding-right: 40px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  height: 45px;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px #6690ff;
+  }
+`;
+
+export const RecordAudioButton = styled.div`
+  position: absolute;
+  top: 14px;
+  right: 10px;
+  cursor: pointer;
+`;

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

@@ -0,0 +1,97 @@
+import React, { forwardRef, ReactNode } from 'react';
+import cc from 'classcat';
+
+import {
+  Container,
+  LabelWrapper,
+  CustomTextArea,
+  InputWrapper,
+  Helper,
+  Error,
+} from './styles';
+
+type TextAreaProps = {
+  id?: string;
+  label?: string;
+  placeholder?: string;
+  className?: string;
+  description?: string;
+  helper?: string;
+  error?: string;
+  color?: '' | 'danger' | 'success';
+  size?: 'small' | 'medium' | 'large';
+  startIcon?: string | ReactNode;
+  endIcon?: string | ReactNode;
+  disabled?: boolean;
+  marginBottom?: string;
+  rows?: number;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const TextArea: React.FC<TextAreaProps> = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      id,
+      label,
+      description,
+      helper,
+      error,
+      placeholder,
+      className,
+      size = 'medium',
+      color = '',
+      disabled = false,
+      startIcon,
+      endIcon,
+      marginBottom = '3px',
+      rows = 4,
+      ...props
+    },
+    ref
+  ) => {
+    const selfId = id || `input__${Math.random().toString(36).substr(2, 9)}`;
+
+    return (
+      <Container className={className} marginBottom={marginBottom}>
+        {label && (
+          <LabelWrapper htmlFor={selfId}>
+            <span className="label">{label}</span>
+            {description && <span className="description">{description}</span>}
+          </LabelWrapper>
+        )}
+
+        <InputWrapper className={cc({ hasLabel: Boolean(label) })}>
+          <CustomTextArea
+            className={cc([
+              'input',
+              size,
+              color,
+              {
+                error: Boolean(error),
+                'has-start-icon': Boolean(startIcon),
+                'has-end-icon': Boolean(endIcon),
+              },
+            ])}
+            id={selfId}
+            placeholder={placeholder}
+            disabled={disabled}
+            rows={rows}
+            ref={ref}
+            {...props}
+          />
+          {startIcon && (
+            <span className={cc(['icon', 'start-icon'])}>{startIcon}</span>
+          )}
+          {endIcon && (
+            <span className={cc(['icon', 'end-icon'])}>{endIcon}</span>
+          )}
+        </InputWrapper>
+
+        {helper && <Helper className={cc(['helper', color])}>{helper}</Helper>}
+
+        {error && <Error className={cc(['error'])}>{error}</Error>}
+      </Container>
+    );
+  }
+);
+
+export default TextArea;