code7-leia 1.0.10 → 1.0.13

package/src/components/FileArea/index.tsx

@@ -0,0 +1,279 @@
+import React, { useEffect, useState} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { renderToString } from 'react-dom/server';
+
+import { FaUpload, FaList, FaCheck, FaFile } from 'react-icons/fa';
+import { GiWeightLiftingUp } from "react-icons/gi";
+import { TiDelete } from "react-icons/ti";
+
+import type { FileData, tag } from '../../interface/FileData'
+
+import { getLanguage } from '../../utils/getLanguage'
+
+import * as S from './styles';
+import Table from './components/Table';
+import Search from './components/Search';
+import Modal from './components/Modal'
+import ModalFooter from './components/Modal/ModalFooter'
+import ModalContent from './components/Modal/ModalContent'
+import EmptyState from '../EmptyState';
+import MultiSelect from '../MultiSelect';
+import AreaUpload from './components/AreaUpload';
+import { useLeia } from '../../contexts/LeiaProvider';
+import { deleteFilesAction, getFilesAction, uploadFilesAction, trainingAction } from '../../store/modules/actions';
+
+export const FileArea = () => {
+  const { id, language, propTags, token, env, readonly } = useLeia();
+  const [files, setFiles] = useState<FileData[]>([]);
+  const [initialFiles, setInitialFiles] = useState<FileData[]>([]);
+  const [uploadFile, setUploadFile] = useState<{ content: ArrayBuffer | string; properties: File }>();
+  const [modal, setModal] = useState(false)
+  const [modalDelete, setModalDelete] = useState(false)
+  const [modalTraining, setModalTraining] = useState(false)
+  const [fileDelete, setFileDelete] = useState('')
+  const [optionsPresset, setOptionsPresset] = useState<{ label: any; value: any; }[]>([])
+  const [presset, setPresset] = useState<string[]>([]);
+  const t = getLanguage(language)
+  const dispatch = useDispatch();
+  const initFiles = useSelector((state: any) => state.files);
+  const isloading = useSelector((state: any) => state.isloading);
+  const tags = propTags ? propTags.tags : [];
+
+  useEffect(() => {
+    dispatch(getFilesAction(id, token, env))
+  }, [id])
+
+  useEffect(() => {
+    if(tags.length > 0){
+      const options = tags.map((tag: any) => {
+        return { label: tag, value: tag }
+      })
+      setOptionsPresset(options)
+    }else if(optionsPresset.length > 0){
+      setOptionsPresset([])
+    }
+    
+  }, [tags])
+
+  useEffect(() => {
+    if(!modal){
+      const options = tags.map((tag: any) => {
+        return { label: tag, value: tag }
+      })
+      setOptionsPresset(options)
+    }
+  }, [modal])
+
+  useEffect(() => {
+    if(!!initFiles){
+      setFiles(initFiles)
+      setInitialFiles(initFiles)
+    }
+  }, [initFiles])
+
+  const pressetTag = (tags: [tag]) => {
+    let html = '';
+  
+    html += tags.map(tag => {
+      const checkIcon = tag.trained ? '' : renderToString(<TiDelete size={14} />);
+      const tagClass = tag.trained ? 'trained' : '';
+      return `<p class='tag ${tagClass}'>${tag.name} ${checkIcon}</p>`;
+    }).join('');
+  
+    return html;
+  }
+
+  const handleOpenModal = () => {
+    if(modal){
+      setUploadFile(undefined)
+      setPresset([])
+    }
+    setModal(!modal)
+  }
+
+  const handleOpenModalDelete = (name: string) => {
+    setFileDelete(name)
+    setModalDelete(!modalDelete)
+  }
+
+  const handleOpenModalTraining = (tags?: [tag]) => {
+    let pressets: string[] = [] 
+    tags?.map((tag) => {
+      if(!tag.trained){
+        pressets.push(tag.name)
+      }
+    })
+    setPresset(pressets)
+    setModalTraining(!modalTraining)
+  }
+
+  const deleteFile = () => {
+    dispatch(deleteFilesAction(fileDelete, id, language, token, env))
+    setModalDelete(false)
+  }
+
+  const handleUploadFile = () => {
+    dispatch(uploadFilesAction(uploadFile, id, presset, language, token, env))
+    setModal(false)
+    setUploadFile(undefined)
+    setPresset([])
+  };
+
+  const handleTrain = () => {
+    dispatch(trainingAction(id, presset, language, token, env))
+    setModalTraining(false)
+    setPresset([])
+  };
+
+  const viewFile = (link: string, name: string) => {
+    if(link){
+      const checkIcon = renderToString(<FaFile size={14} />);
+      return `<a href='${link}' target='_blank'>${checkIcon}</a> ${name}`;
+    }
+    return name
+  };
+
+  const renderFiles = () => {  
+    return (
+      <S.Container isloading={isloading}>
+        <div id='loading' />
+        <S.Header>
+          <div className='infos'>
+            <h2>{t.files}</h2>
+            <p>{t.fileArea.description}</p>
+          </div>
+          <div className='actions'>
+            <Search placeholder={t.fileArea.search} setFiles={setFiles} initialFiles={initialFiles}></Search>
+            <div>            
+              <button id='button-upload' disabled={readonly} onClick={handleOpenModal}><FaUpload size={14} /> {t.fileArea.fileUpload}</button>
+              <button disabled={readonly} onClick={() => handleOpenModalTraining(undefined)} ><GiWeightLiftingUp size={14} /> {t.fileArea.training}</button>
+            </div>
+          </div>
+        </S.Header>
+        {
+          files.length === 0 ? (
+            <EmptyState
+              icon={<FaList></FaList>}
+              title={t.fileArea.emptyState.title}
+              description={t.fileArea.emptyState.description}
+              iconButton={<button id='button-upload' disabled={readonly} onClick={handleOpenModal}><FaUpload size={14} /> {t.fileArea.fileUpload}</button>}
+              descriptionButton={t.fileArea.fileUpload}
+              widthButton="230px"
+            />
+          ) : <Table>
+                <thead>
+                  <tr>
+                    <th key="th_file_name" className="th_file_name">
+                      {t.fileArea.fileName}
+                    </th>
+                    <th key="th_file_name" className="th_status">
+                      {t.fileArea.status}
+                    </th>
+                    <th key="th_pressets" className="th_pressets">
+                    {t.fileArea.presset}
+                    </th>
+                    <th key="th_actions" className="th_actions">
+                    {t.fileArea.actions}
+                    </th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  {files.map((object) => (
+                    <tr>
+                      <td dangerouslySetInnerHTML={{ __html: viewFile(object.link, object.name) }} />
+                      <td>{object.trained ? <FaCheck size={14}  style={{ color: 'green' }} /> : <TiDelete size={14}  style={{ color: 'red' }} />}</td>
+                      <td className='tags' dangerouslySetInnerHTML={{ __html: pressetTag(object.tags) }} />
+                      <td>
+                        <div className='divDelete'>
+                          <button className='buttonTraining' disabled={readonly} onClick={() => handleOpenModalTraining(object.tags)}>{t.buttons.training}</button>
+                          <button className='buttonDelete' disabled={readonly} onClick={() => handleOpenModalDelete(object.name)}>{t.buttons.delete}</button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+        }
+        <Modal
+          isopen={modal}
+          maxwidth="600px"
+          maxheight="max-content"
+          onClose={handleOpenModal}
+          title={t.fileArea.modal.uploadFile}
+          >
+            <ModalContent>
+              <div className='choose-file'>
+              <AreaUpload
+                setFile={setUploadFile}
+                file={uploadFile?.properties.name}
+              />
+              </div>
+              <div className='presset'>
+                <p>{t.fileArea.presset}</p>
+                <MultiSelect setOptions={setOptionsPresset} options={optionsPresset} presset={presset} setPresset={setPresset} modal={modal} language={language} hasAddNewOptions={true} />
+              </div>              
+            </ModalContent>
+            <ModalFooter>
+              <button className='button cancel' onClick={handleOpenModal}>
+                {t.buttons.cancel}
+              </button>
+              <button onClick={() => handleUploadFile()} className='button send' type="submit" form="form-tts">
+                {t.buttons.send}
+              </button>
+            </ModalFooter>
+            
+        </Modal>
+        <Modal
+        isopen={modalDelete}
+        maxwidth="600px"
+        maxheight="max-content"
+        onClose={() => handleOpenModalDelete('')}
+        title={t.fileArea.modal.deleteFileTitle}
+        >
+          <ModalContent>
+            <p id='warning'>{t.fileArea.modal.deleteFile}</p>
+          </ModalContent>
+          <ModalFooter>
+            <button className='button cancel' onClick={() => handleOpenModalDelete('')}>
+              {t.buttons.cancel}
+            </button>
+            <button className='button delete' type="submit" form="form-tts" onClick={deleteFile}>
+              {t.buttons.delete}
+            </button>
+          </ModalFooter>
+        </Modal>
+        <Modal
+          isopen={modalTraining}
+          maxwidth="600px"
+          maxheight="max-content"
+          onClose={() => handleOpenModalTraining(undefined)}
+          title={t.fileArea.modal.trainingTitle}
+          >
+            <ModalContent>
+              <p id='info'>{t.fileArea.modal.trainingDescription}</p>
+              <div className='presset'>
+                <p>{t.fileArea.presset}</p>
+                <MultiSelect setOptions={setOptionsPresset} options={optionsPresset} presset={presset} setPresset={setPresset} modal={modal} language={language} hasAddNewOptions={false} />
+              </div>
+            </ModalContent>
+            <ModalFooter>
+              <button className='button cancel' onClick={() => handleOpenModalTraining(undefined)}>
+                {t.buttons.cancel}
+              </button>
+              <button onClick={() => handleTrain()} className='button send' type="submit" form="form-tts">
+                {t.buttons.send}
+              </button>
+            </ModalFooter>
+            
+        </Modal>
+      </S.Container>
+    );
+  } 
+
+  return (    
+    <S.Container>
+      {renderFiles()}
+    </S.Container>    
+  );
+};

package/src/components/FileArea/styles.tsx

@@ -0,0 +1,183 @@
+import styled, { css } from 'styled-components';
+
+interface ContainerProps {
+  isloading?: boolean;
+}
+
+export const Container = styled.div<ContainerProps>`
+  ${(props) =>
+    props.isloading &&
+    css`
+      #loading {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgb(151,154,165, 0.7);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+      }
+
+      #loading::after {
+        content: "";
+        border: 4px solid #f3f3f3; /* Cor do símbolo de carregamento */
+        border-top: 4px solid #5a5d68; /* Cor do símbolo de carregamento */
+        border-radius: 50%;
+        width: 13px;
+        height: 13px;
+        animation: spin 1s linear infinite;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `}
+
+
+  .tag {
+    padding: 4px 8px 4px 8px;
+    background: #C7F9ED;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .tags {
+    display: flex;
+    justify-content: left;
+    gap: 4px;
+  }
+
+  .divDelete {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+  }
+
+  .buttonDelete {
+    color: #5b0a1f;
+    background: #fae0d2;
+    padding: 12px 20px;
+    border-radius: 4px;
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.7;
+      }
+  }
+
+  .buttonDelete:hover {
+      background: #f5bba7;
+  }
+
+  .buttonTraining {
+    color: #023906;
+    background: #e3f8cc;
+    padding: 12px 20px;
+    border-radius: 4px;
+    margin-right: 10px;
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.7;
+      }
+  }
+
+  .buttonTraining:hover {
+      background: #90d665;
+  }
+
+  .button {
+    padding: 8px 16px 8px 16px;
+    border-radius: 4px;
+    gap: 10px;
+  }
+
+  .cancel {
+    background: #F3F5F9;
+    color: #5A5D68;
+  }
+
+  .send {
+    background: #102693;
+    color: white;
+  }
+
+  .delete {
+    background: #871821;
+    color: white;
+  }
+
+  .presset {
+    padding-top: 10px;
+    display: flex;
+    flex-direction: column;
+
+    p {
+      font-size: 14px;
+      font-weight: 600;
+      padding: 4px 0;
+    }
+  }
+
+  #warning {
+    padding: 10px;
+    background: #FAE0D2;
+    color: #871821;
+  }
+
+  #info {
+    padding: 10px;
+    background: #c7f9ed;
+    color: #00344e;
+  }
+
+`;
+
+export const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  #button-upload {
+    margin-right: 10px;
+  }
+
+  .infos {
+    display: flex;
+    flex-direction: column;
+    padding: 14px 0;
+
+    h2 {
+      font-size: 20px
+    }
+
+    p {
+      font-size: 14px
+    }
+  }
+
+  .actions {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 14px;
+
+    button {
+      background: #102693;
+      padding: 10px 20px;
+      color: white;
+      border-radius: 4px;
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.7;
+      }
+    }
+  }
+
+`

package/src/components/LengthCounter/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import cc from 'classcat';
+
+import * as S from './styles';
+
+type LengthCounterProps = {
+  value?: string;
+  maxLength: number;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const LengthCounter: React.FC<LengthCounterProps> = ({
+  value = '',
+  maxLength,
+  ...rest
+}) => {
+  const sanitizeValue = value?.replace?.(/{(.*?)}/g, '');
+  const length = sanitizeValue?.length || 0;
+
+  return (
+    <S.Container
+      className={cc({ error: length > maxLength })}
+      {...rest}
+    >
+      {`${length}/${maxLength}`}
+    </S.Container>
+  );
+};
+
+export default LengthCounter;

package/src/components/LengthCounter/styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Container = styled.span`
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 400;
+
+  &.error {
+    color: var(--semantic-red-400-light);
+  }
+`;

package/src/components/Modal/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import * as S from './styles';
+import { IoClose } from 'react-icons/io5';
+
+interface ModalProps {
+  title?: string;
+  children: React.ReactNode;
+  onClose: () => void;
+}
+
+const Modal = ({ title, children, onClose }: ModalProps) => {
+  return (
+    <S.Overlay>
+      <S.Container>
+        <S.Header>
+          {title && <h3>{title}</h3>}
+          <button onClick={onClose}>
+            <IoClose />
+          </button>
+        </S.Header>
+
+        <S.Content>
+          {children}
+        </S.Content>
+      </S.Container>
+    </S.Overlay>
+  );
+};
+
+export default Modal;

package/src/components/Modal/styles.ts

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+export const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background-color: rgba(151, 154, 165, 0.7);
+  z-index: 9999;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Container = styled.div`
+  background: #ffffff;
+  width: 650px;
+  max-width: 95%;
+  border-radius: 5px;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 14px 16px;
+  border-bottom: 1px solid #dcdfe6;
+
+  h3 {
+    font-size: 16px;
+    margin: 0;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+`;
+
+export const Content = styled.div`
+  padding: 16px;
+`;

package/src/components/MultiSelect/index.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import * as S from './styles';
+import { getLanguage } from '../../utils/getLanguage'
+import { Language } from '../../interface/Language';
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+interface MultiSelectProps {
+  options: Option[];
+  presset: string[];
+  setPresset: React.Dispatch<React.SetStateAction<string[]>>;
+  setOptions: React.Dispatch<React.SetStateAction<Option[]>>;
+  modal: boolean;
+  hasAddNewOptions: boolean;
+  language: keyof Record<'en' | 'pt-br' | 'es', Language>;
+}
+
+const MultiSelect: React.FC<MultiSelectProps> = ({ options, presset, setPresset, setOptions, modal, language, hasAddNewOptions }) => {
+  const [expanded, setExpanded] = useState(false);
+  const [newOption, setNewOption] = useState('');
+  const t = getLanguage(language)
+
+  useEffect(() => {
+    setExpanded(false)
+  }, [modal])
+
+  const handleCheckboxChange = (value: string) => {
+    setPresset(prevPresset => {
+      if (prevPresset.includes(value)) {
+        return prevPresset.filter(val => val !== value);
+      } else {
+        return [...prevPresset, value];
+      }
+    });
+  }
+
+  const showCheckboxes = () => {
+    setExpanded(!expanded);
+  }
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewOption(event.target.value);
+  }
+
+  const handleInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && hasAddNewOptions) {
+      event.preventDefault();
+      const trimmedOption = newOption.trim();
+      if (trimmedOption !== '' && !options.some(option => option.value === trimmedOption)) {
+        setOptions(prevOptions => [...prevOptions, { label: trimmedOption, value: trimmedOption }]);
+        setPresset(prevPresset => [...prevPresset, trimmedOption]);
+      }
+      setNewOption('');
+    }
+  }
+
+  return (
+    <form>
+      <S.MultiSelectWrapper>
+        <S.SelectBox onClick={showCheckboxes}>
+          <select>
+            {options.map((option, index) => (
+              <option key={index} value={option.value}>{option.label}</option>
+            ))}
+          </select>
+          <S.OverSelect>
+            <S.SelectedValues>
+              {presset.map((value, index) => (
+                <S.SelectedValue key={index}>{value}</S.SelectedValue>
+              ))}
+            </S.SelectedValues>
+            <input
+              type="text"
+              placeholder={hasAddNewOptions ? t.buttons.addNewPresset : t.buttons.addPresset}
+              value={newOption}
+              onChange={handleInputChange}
+              onKeyPress={handleInputKeyPress}
+            />
+          </S.OverSelect>
+        </S.SelectBox>
+        <S.Checkboxes style={{ display: expanded ? 'block' : 'none' }}>
+          {options.map((option, index) => (
+            <S.CheckboxLabel key={index} htmlFor={option.value}>
+              <input
+                type="checkbox"
+                id={option.value}
+                checked={presset.includes(option.value)}
+                onChange={() => handleCheckboxChange(option.value)}
+              />
+              {option.label}
+            </S.CheckboxLabel>
+          ))}
+        </S.Checkboxes>
+      </S.MultiSelectWrapper>
+    </form>
+  );
+}
+
+export default MultiSelect;