code7-leia 0.2.37 → 1.0.0

package/src/components/FileArea/components/Search/styles.tsx

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

package/src/components/FileArea/components/Spinner/index.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import cc from 'classcat';
-
-import * as S from './styles';
-
-import { SpinnerProps } from '../../../../interface/Table'
-
-const Spinner: React.FC<SpinnerProps> = ({ color = 'neutral-3', size = 'md', className }) => {
-  return (
-    <S.SpinnerWrapper
-      color={color}
-      className={cc([`spinner--${size}`, className])}
-    >
-      <span />
-      <span />
-      <span />
-      <span />
-    </S.SpinnerWrapper>
-  );
-};
-
-export default Spinner;

package/src/components/FileArea/components/Spinner/styles.tsx

@@ -1,59 +0,0 @@
-import styled from 'styled-components';
-
-export const SpinnerWrapper = styled.span`
-  display: inline-block;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &.spinner--sm {
-    width: 24px;
-    height: 24px;
-  }
-
-  &.spinner--md {
-    width: 32px;
-    height: 32px;
-  }
-
-  &.spinner--lg {
-    width: 60px;
-    height: 60px;
-  }
-
-  span {
-    box-sizing: border-box;
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    margin: 8px;
-    border: 4px solid #fff;
-    border-radius: 50%;
-    animation: rotateSpinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: ${(props) => `var(--${props.color})`} transparent transparent
-      transparent;
-  }
-
-  & span:nth-child(1) {
-    animation-delay: -0.45s;
-  }
-
-  & span:nth-child(2) {
-    animation-delay: -0.3s;
-  }
-
-  & span:nth-child(3) {
-    animation-delay: -0.15s;
-  }
-
-  @keyframes rotateSpinner {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;

package/src/components/FileArea/components/Table/index.tsx

@@ -1,34 +0,0 @@
-import React, { forwardRef, Ref } from 'react';
-import PropTypes from 'prop-types';
-import cc from 'classcat';
-
-import * as S from './styles';
-import Spinner from '../Spinner';
-
-import { TableProps } from '../../../../interface/Table'
-
-const Table = forwardRef(
-  ({ size = 'medium', children, isloading = false, className = '', ...props }: TableProps, ref: Ref<HTMLTableElement>) => {
-    return (
-      <S.TableWrapper className={className}>
-        {isloading ? (
-          <S.TableLoadingWrapper>
-            <Spinner />
-          </S.TableLoadingWrapper>
-        ) : null}
-        <S.Table className={cc([size])} ref={ref} {...props}>
-          {children}
-        </S.Table>
-      </S.TableWrapper>
-    );
-  }
-);
-
-Table.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  isloading: PropTypes.bool,
-};
-
-export default Table;

package/src/components/FileArea/components/Table/styles.tsx

@@ -1,60 +0,0 @@
-import styled from 'styled-components';
-
-export const TableWrapper = styled.div`
-  width: 100%;
-  height: max-content;
-  min-height: 50px;
-  position: relative;
-`;
-
-export const Table = styled.table`
-  font-size: 14px;
-  line-height: 143%;
-  color: black;
-  width: 100%;
-  border-collapse: collapse;
-  border-radius: 4px;
-
-  th {
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 143%;
-    letter-spacing: 0.018em;
-    color: #5A5D68;
-    text-align: left;
-    padding: 8px;
-    border: 1px #dadce3 solid;
-  }
-
-  thead tr {
-    background: #dadce3;
-  }
-
-  tbody tr {
-    border: 1px solid #dadce3;
-  }
-
-  &.small td {
-    padding: 4px;
-  }
-
-  &.medium td {
-    padding: 8px;
-  }
-
-  &.large td {
-    padding: 16px;
-  }
-`;
-
-export const TableLoadingWrapper = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #f3f5f961;
-`;

package/src/components/FileArea/index.tsx

@@ -1,281 +0,0 @@
-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 { SharedPropsProvider, useSharedProps } from '../../contexts/SharedPropsProvider';
-import { deleteFilesAction, getFilesAction, uploadFilesAction, trainingAction } from '../../store/modules/actions';
-
-export const FileArea = () => {
-  const { id, language, propTags, token, env, readonly } = useSharedProps();
-  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 (
-    <SharedPropsProvider readonly={readonly} id={id} language={language} token={token} env={env} propTags={{ tags: [] }} personas={[{name: '', description: ''}]}>
-      <S.Container>
-        {renderFiles()}
-      </S.Container>
-    </SharedPropsProvider>
-  );
-};

package/src/components/FileArea/styles.tsx

@@ -1,183 +0,0 @@
-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;
-      }
-    }
-  }
-
-`