code7-leia 0.2.361 → 1.0.1

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

@@ -1,121 +0,0 @@
-import styled from 'styled-components';
-
-interface FullScreenProps {
-  isopen: number;
-  isfixed: number;
-  zindex: number;
-}
-
-export const FullScreen = styled.div<FullScreenProps>`
-  display: ${({ isopen }) => (isopen === 1 ? 'flex' : 'none')};
-  cursor: ${({ isfixed }) => (isfixed === 0 ? 'pointer' : 'default')};
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  justify-content: center;
-  align-items: center;
-  z-index: ${({ zindex }) => zindex};
-  animation: fadeIn 380ms ease-in-out 1;
-  background-color: #2f3845b8;
-  backdrop-filter: blur(2px);
-
-  @keyframes fadeIn {
-    from {
-      background-color: #2f384521;
-    }
-    to {
-      background-color: #2f3845b8;
-    }
-  }
-`;
-
-interface ModalProps {
-  maxwidth?: string;
-  maxheight?: string;
-}
-
-export const Modal = styled.div<ModalProps>`
-  background-color: #fff;
-  border-radius: 3px;
-  position: relative;
-  cursor: default;
-  width: 100%;
-  max-width: ${({ maxwidth }) => maxwidth};
-  animation: slideIn 350ms cubic-bezier(0.42, 0, 0.21, 1) 1;
-
-  @keyframes slideIn {
-    from {
-      transform: translateY(-120px);
-      opacity: 0;
-    }
-
-    20% {
-      opacity: 0;
-    }
-
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-`;
-
-interface ModalContainerProps {
-  maxheight?: string;
-}
-
-export const ModalContainer = styled.div<ModalContainerProps>`
-  width: 100%;
-  overflow-y: auto;
-  max-height: ${({ maxheight }) => maxheight};
-`;
-
-export const ModalHeader = styled.header`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #dadce3;
-  padding: var(--spacement-medium);
-`;
-
-export const ModalTitle = styled.div`
-  font-style: normal;
-  font-weight: normal;
-  font-size: 20px;
-  line-height: 150%;
-  letter-spacing: 0.0075em;
-  color: var(--neutral-4);
-`;
-
-export const ModalButtonClose = styled.button`
-  outline: none;
-  cursor: pointer;
-
-  :hover {
-    opacity: 0.7;
-  }
-`;
-
-interface ModalContentWrapperProps {
-  overflowy?: string;
-  maxheight?: string;
-}
-
-export const ModalContentWrapper = styled.div<ModalContentWrapperProps>`
-  width: 100%;
-  overflow-y: ${({ overflowy }) => overflowy};
-  max-height: ${({ maxheight }) => maxheight};
-  padding: var(--spacement-medium);
-`;
-
-export const ModalFooterWrapper = styled.div`
-  padding: var(--spacement-medium);
-  background: var(--neutral-0);
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacement-medium);
-`;

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

@@ -1,44 +0,0 @@
-import React from 'react';
-import unorm from 'unorm';
-import { FaSearch } from 'react-icons/fa';
-import { InputContainer, Input, IconContainer } from './styles';
-import type { FileData } from '../../../../interface/FileData';
-
-interface SearchInputProps {
-  placeholder: string;
-  initialFiles: FileData[];
-  setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
-}
-
-const SearchInput: React.FC<SearchInputProps> = ({
-  placeholder,
-  setFiles,
-  initialFiles,
-}) => {
-  const searchName = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const searchTerm = e.target.value.trim();
-    const normalizedSearchTerm = unorm.nfkd(searchTerm).toLowerCase();
-
-    const newFiles = initialFiles.filter((file) => {
-      const normalizedFileName = unorm.nfkd(file.name).toLowerCase();
-      return normalizedFileName.includes(normalizedSearchTerm);
-    });
-
-    setFiles(searchTerm !== '' ? newFiles : initialFiles);
-  };
-
-  return (
-    <InputContainer>
-      <Input
-        type="text"
-        onChange={(e: any) => searchName(e)}
-        placeholder={placeholder}
-      />
-      <IconContainer>
-        <FaSearch />
-      </IconContainer>
-    </InputContainer>
-  );
-};
-
-export default SearchInput;

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>
-  );
-};