code7-leia 0.1.44 → 0.1.45

package/dist/code7-leia.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"code7-leia.cjs.production.min.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/utils/getLanguage.tsx","../src/components/FileArea/styles.tsx","../src/components/FileArea/components/Table/styles.tsx","../src/components/FileArea/components/Spinner/styles.tsx","../src/components/FileArea/components/Spinner/index.tsx","../src/components/FileArea/components/Table/index.tsx","../src/components/FileArea/components/Search/index.tsx","../src/components/EmptyState/styles.tsx","../src/components/EmptyState/index.tsx","../src/components/FileArea/index.tsx","../src/components/TestArea/styles.tsx","../src/components/TestArea/components/Select/styles.tsx","../src/components/TestArea/components/Select/index.tsx","../src/components/TestArea/components/InputTest/styles.tsx","../src/components/TestArea/components/InputTest/index.tsx","../src/components/TestArea/index.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n  children: ReactNode;\n}\n\ninterface OptionProps {\n  children: ReactNode;\n  onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n`;\n\nexport const DropdownContainer = styled.div`\n  position: absolute;\n  left: 0px;\n  top: 40px;\n  display: flex;\n  flex-direction: column;\n\n  background: #ffffff;\n\n  border: 1px solid #979aa5;\n  box-sizing: border-box;\n  box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n    0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n  border-radius: 4px;\n  padding: 8px;\n  z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n  padding: 8px;\n  font-size: 14px;\n  border-radius: 4px;\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    background-color: var(--primary-800-light);\n    color: white;\n  }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n  children: ReactNode;\n  active?: boolean;\n}\n\ninterface ITabsProps {\n  children: ReactNode;\n  value: string | number;\n  onChange: (e: any) => void;\n  active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n  return (\n    <S.Tab className={cc({ active })} {...rest}>\n      {children}\n    </S.Tab>\n  );\n};\n\nTab.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n    PropTypes.node,\n  ]).isRequired,\n  onChange: PropTypes.func,\n  value: PropTypes.string,\n  active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n  onChange: () => {},\n  value: '',\n  active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n  const children = React.Children.map(childrenProp, (child) => {\n    if (!React.isValidElement(child)) {\n      return null;\n    }\n\n    if (Array.isArray(child.props?.children)) {\n      return React.cloneElement(child as React.ReactElement<any>, {\n        active: child.props?.value === value,\n        value,\n        onChange,\n      });\n    }\n\n    return React.cloneElement(child as React.ReactElement<any>, {\n      active: child.props?.value === value,\n      onClick: () => onChange(child.props?.value),\n    });\n  });\n\n  return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n  children: PropTypes.node.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  onChange: PropTypes.func.isRequired,\n};\n","\nimport { Language } from '../interface/Language'\n\nconst defaultLanguage: Language = {\n  files: 'Files',\n  test: 'Test',\n  fileArea: {\n    description: 'bla bla bla bla bla',\n    fileName: 'File name',\n    presset: 'Presset',\n    actions: 'Actions',\n    search: 'Search',\n    fileUpload: 'File upload',\n    emptyState: {\n      title: 'No data',\n      description: 'bla bla bla bla bla',\n    },\n    modal: {\n      descriptionUpload: 'Drag and drop files here or',\n      chooseFile: 'Choose a file',\n    },\n  },\n  buttons: {\n    cancel: 'Cancel',\n    send: 'Send',\n    delete: 'Delete',\n    test: 'Test',\n  },\n  testArea: {\n    description: 'bla bla bla bla bla',\n    typeSentence: 'Type a sentence',\n    selectPersona: 'Select a Persona',\n    selectPresset: 'Select a presset',\n    emptyState: {\n      title: 'No data for analysis',\n      description: 'Do a search, click the \"Test\" button.',\n    },\n  },\n};\n\nexport const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Language>): Language => {\n  const languages = {\n    en: defaultLanguage,\n    'pt-br': {\n      files: 'Arquivos',\n      test: 'Teste',\n      fileArea: {\n        ...defaultLanguage.fileArea,\n        fileName: 'Nome do arquivo',\n        presset: 'Presset',\n        actions: 'Ações',\n        search: 'Pesquisar',\n        fileUpload: 'Upload de arquivo',\n        emptyState: {\n          ...defaultLanguage.fileArea.emptyState,\n          title: 'Sem dados',\n        },\n        modal: {\n          ...defaultLanguage.fileArea.modal,\n          descriptionUpload: 'Arraste e solte os arquivos aqui ou',\n          chooseFile: 'Escolha um arquivo',\n        },\n      },\n      buttons: {\n        ...defaultLanguage.buttons,\n        cancel: 'Cancelar',\n        send: 'Enviar',\n        delete: 'Excluir',\n        test: 'Testar',\n      },\n      testArea: {\n        ...defaultLanguage.testArea,\n        description: 'Digite uma frase para testar a inteligência artificial.',\n        typeSentence: 'Digite uma frase',\n        selectPersona: 'Selecione uma Persona',\n        selectPresset: 'Selecione uma predefinição',\n        emptyState: {\n          ...defaultLanguage.testArea.emptyState,\n          title: 'Sem dados para análise',\n          description: 'Faça uma pesquisa, clique no botão \"Teste\".',\n        },\n      },\n    },\n    es: {\n      ...defaultLanguage,\n      files: 'Archivos',\n      test: 'Prueba',\n      fileArea: {\n        ...defaultLanguage.fileArea,\n        fileName: 'Nombre del archivo',\n        presset: 'Presset',\n        actions: 'Acciones',\n        search: 'Buscar',\n        fileUpload: 'Carga de archivos',\n        emptyState: {\n          ...defaultLanguage.fileArea.emptyState,\n          title: 'Sin datos',\n        },\n        modal: {\n          ...defaultLanguage.fileArea.modal,\n          descriptionUpload: 'Arrastre y suelte los archivos aquí o',\n          chooseFile: 'Elegir un archivo',\n        },\n      },\n      buttons: {\n        ...defaultLanguage.buttons,\n        cancel: 'Cancelar',\n        send: 'Enviar',\n        delete: 'Eliminar',\n        test: 'Probar',\n      },\n      testArea: {\n        ...defaultLanguage.testArea,\n        description: 'bla bla bla bla bla',\n        typeSentence: 'Escribe una oración',\n        selectPersona: 'Seleccionar una Persona',\n        selectPresset: 'Seleccionar una configuración preestablecida',\n        emptyState: {\n          ...defaultLanguage.testArea.emptyState,\n          title: 'Sin datos para el análisis',\n          description: 'Realiza una búsqueda, haz clic en el botón \"Prueba\".',\n        },\n      },\n    },\n  };\n\n  return languages[language] || defaultLanguage;\n};\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n  .tag {\n    padding: 4px 8px 4px 8px;\n    background: #C7F9ED;\n    border-radius: 4px;\n  }\n\n  .tags {\n    display: flex;\n    justify-content: left;\n    gap: 4px;\n  }\n\n  .divDelete {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n  }\n\n  .buttonDelete {\n    color: #5b0a1f;\n    background: #fae0d2;\n    padding: 12px 20px;\n    border-radius: 4px;\n  }\n\n  .buttonDelete:hover {\n      background: #f5bba7;\n  }\n`;\n\nexport const Header = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n\n  .actions {\n    display: flex;\n    justify-content: space-between;\n    padding-bottom: 14px;\n\n    button {\n      background: #102693;\n      padding: 10px 20px;\n      color: white;\n      border-radius: 4px;\n    }\n  }\n\n`\n","import styled from 'styled-components';\n\nexport const TableWrapper = styled.div`\n  width: 100%;\n  height: max-content;\n  min-height: 50px;\n  position: relative;\n`;\n\nexport const Table = styled.table`\n  font-size: 14px;\n  line-height: 143%;\n  color: black;\n  width: 100%;\n  border-collapse: collapse;\n  border-radius: 4px;\n\n  th {\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 143%;\n    letter-spacing: 0.018em;\n    color: #5A5D68;\n    text-align: left;\n    padding: 8px;\n    border-radius: 4px;\n  }\n\n  thead tr {\n    background: #dadce3;\n  }\n\n  tbody tr {\n    border: 1px solid #dadce3;\n  }\n\n  &.small td {\n    padding: 4px;\n  }\n\n  &.medium td {\n    padding: 8px;\n  }\n\n  &.large td {\n    padding: 16px;\n  }\n`;\n\nexport const TableLoadingWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #f3f5f961;\n`;\n","import styled from 'styled-components';\n\nexport const SpinnerWrapper = styled.span`\n  display: inline-block;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &.spinner--sm {\n    width: 24px;\n    height: 24px;\n  }\n\n  &.spinner--md {\n    width: 32px;\n    height: 32px;\n  }\n\n  &.spinner--lg {\n    width: 60px;\n    height: 60px;\n  }\n\n  span {\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: 8px;\n    border: 4px solid #fff;\n    border-radius: 50%;\n    animation: rotateSpinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border-color: ${(props) => `var(--${props.color})`} transparent transparent\n      transparent;\n  }\n\n  & span:nth-child(1) {\n    animation-delay: -0.45s;\n  }\n\n  & span:nth-child(2) {\n    animation-delay: -0.3s;\n  }\n\n  & span:nth-child(3) {\n    animation-delay: -0.15s;\n  }\n\n  @keyframes rotateSpinner {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n","import React from 'react';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\nimport { SpinnerProps } from '../../../../interface/Table'\n\nconst Spinner: React.FC<SpinnerProps> = ({ color = 'neutral-3', size = 'md', className }) => {\n  return (\n    <S.SpinnerWrapper\n      color={color}\n      className={cc([`spinner--${size}`, className])}\n    >\n      <span />\n      <span />\n      <span />\n      <span />\n    </S.SpinnerWrapper>\n  );\n};\n\nexport default Spinner;\n","import React, { forwardRef, Ref } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\nimport Spinner from '../Spinner';\n\nimport { TableProps } from '../../../../interface/Table'\n\nconst Table = forwardRef(\n  ({ size = 'medium', children, isLoading = false, className = '', ...props }: TableProps, ref: Ref<HTMLTableElement>) => {\n    return (\n      <S.TableWrapper className={className}>\n        {isLoading ? (\n          <S.TableLoadingWrapper>\n            <Spinner />\n          </S.TableLoadingWrapper>\n        ) : null}\n        <S.Table className={cc([size])} ref={ref} {...props}>\n          {children}\n        </S.Table>\n      </S.TableWrapper>\n    );\n  }\n);\n\nTable.propTypes = {\n  children: PropTypes.node.isRequired,\n  className: PropTypes.string,\n  size: PropTypes.oneOf(['small', 'medium', 'large']),\n  isLoading: PropTypes.bool,\n};\n\nexport default Table;\n","import React from 'react';\nimport unorm from 'unorm';\nimport { FaSearch } from 'react-icons/fa';\nimport type { FileData } from '../../../../interface/FileData'\n\ninterface SearchInputProps {\n  placeholder: string;\n  initialFiles: FileData[]\n  setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;\n}\n\nconst SearchInput: React.FC<SearchInputProps> = ({ placeholder, setFiles, initialFiles }) => {\n\n  const searchName = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const searchTerm = e.target.value.trim();\n    const normalizedSearchTerm = unorm.nfkd(searchTerm).toLowerCase();\n    \n    const newFiles = initialFiles.filter(file => {\n        const normalizedFileName = unorm.nfkd(file.name).toLowerCase();\n        return normalizedFileName.includes(normalizedSearchTerm);\n    });\n    \n    setFiles(searchTerm !== '' ? newFiles : initialFiles);\n}\n  \n\n  return (\n    <div style={{ position: 'relative', width: '300px' }}>\n      <input\n        type=\"text\"\n        onChange={(e) => searchName(e)}\n        placeholder={placeholder}\n        style={{\n          paddingLeft: '40px',\n          borderRadius: '5px',\n          border: '1px solid #ccc',\n          height: '40px',\n          width: '100%',\n        }}\n      />\n      <div\n        style={{\n          position: 'absolute',\n          top: '10px',\n          left: '10px',\n          pointerEvents: 'none', \n        }}\n      >\n        <FaSearch />\n      </div>\n    </div>\n  );\n};\n\nexport default SearchInput;\n","import styled from 'styled-components';\n\ninterface ContainerProps {\n  hasBorder?: boolean;\n  backgroundColor?: string;\n  backgroundIcon?: string;\n}\n\nexport const Container = styled.div<ContainerProps>`\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 24px 0;\n  height: 193px;\n\n  background: ${({ hasBorder }) =>\n    hasBorder &&\n    `linear-gradient(\n        to right,\n        #dadce3 50%,\n        rgba(255, 255, 255, 0) 0%\n      ),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(to right, #dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%)`};\n  background-position: top, right, bottom, left;\n  background-repeat: repeat-x, repeat-y;\n  background-size: 40px 1px, 1px 40px;\n  background-color: ${({ backgroundColor }) => backgroundColor};\n\n  & .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > .icon {\n      background-color: ${({ backgroundIcon }) => backgroundIcon};\n      border-radius: 16px;\n      width: 145px;\n      height: 145px;\n\n      display: flex;\n      justify-content: center;\n\n      & svg {\n        width: 100%;\n        height: 70%;\n        margin: 20px;\n      }\n    }\n\n    & .description {\n      max-width: 600px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 8px 0 8px 24px;\n\n      .button-add {\n        cursor: pointer;\n      }\n\n      .start-icon {\n        display: flex;\n        align-items: center;\n      }\n    }\n  }\n`;\n","import React, { FC, ReactElement } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './styles';\n\ninterface EmptyStateProps {\n  icon?: string | ReactElement;\n  title?: string;\n  description?: string;\n  activeButton?: boolean;\n  iconButton?: ReactElement;\n  descriptionButton?: string;\n  widthButton?: string;\n  button?: ReactElement;\n  backgroundIcon?: string;\n  backgroundColor?: string;\n  hasBorder?: boolean;\n}\n\nconst EmptyState: FC<EmptyStateProps> = ({\n  icon,\n  title,\n  description,\n  activeButton,\n  iconButton,\n  descriptionButton,\n  widthButton,\n  button,\n  backgroundIcon,\n  backgroundColor,\n  hasBorder,\n  ...rest\n}) => {\n  return (\n    <S.Container\n      backgroundIcon={backgroundIcon}\n      backgroundColor={backgroundColor}\n      hasBorder={hasBorder}\n      {...rest}\n    >\n      <div className=\"content\">\n        <div className=\"icon\">\n          {icon}\n        </div>\n        <div className=\"description\">\n          <h5> {title}</h5>\n\n          <p>{description}</p>\n\n          {activeButton ? (\n            <button>\n              {descriptionButton}\n            </button>\n          ) : null}\n\n          {button}\n        </div>\n      </div>\n    </S.Container>\n  );\n};\n\nEmptyState.propTypes = {\n  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  title: PropTypes.string,\n  description: PropTypes.string,\n  activeButton: PropTypes.bool,\n  iconButton: PropTypes.element,\n  descriptionButton: PropTypes.string,\n  widthButton: PropTypes.string,\n  button: PropTypes.element,\n  backgroundIcon: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  hasBorder: PropTypes.bool,\n};\n\nEmptyState.defaultProps = {\n  icon: '',\n  title: '',\n  description: '',\n  activeButton: false,\n  descriptionButton: '',\n  widthButton: '140px',\n  backgroundIcon: 'var(--neutral-0)',\n  backgroundColor: 'var(--absolute-white)',\n  hasBorder: true,\n};\n\nexport default EmptyState;\n","import React, { useEffect, useState} from 'react';\n\nimport { FaUpload, FaList, FaPlus } from 'react-icons/fa';\n\n// import { formatAxios } from '../../utils/formatAxios'\n\nimport { useLocation } from 'react-router-dom';\n\nimport type { FileData } from '../../interface/FileData'\n\nimport { getLanguage } from '../../utils/getLanguage'\n\nimport * as S from './styles';\nimport Table from './components/Table';\nimport Search from './components/Search';\nimport EmptyState from '../EmptyState';\n\nexport const FileArea = () => {\n  const [files, setFiles] = useState<FileData[]>([]);\n  const [initialFiles, setInitialFiles] = useState<FileData[]>([]);\n  const { pathname } = useLocation();\n  const id = pathname.split('/')[4]\n  const t = getLanguage('pt-br')\n\n  useEffect(() => {\n    setFiles([\n        {\n          \"name\": \"Documentação conceitual Code7_v3\",\n          \"tags\": \"boteria, code7\"\n        },\n        {\n          \"name\": \"PAE_Programa_Apoio_ao_Empregado\",\n          \"tags\": \"pae, vr\"\n        },\n        {\n          \"name\": \"Vidalink\",\n          \"tags\": \"vidalink, vr\"\n        },\n        {\n          \"name\": \"[GUIA PRÁTICO] Como criar o chatbot perfeito\",\n          \"tags\": \"ebook, code7\"\n        }\n      ])\n\n    setInitialFiles([\n      {\n        \"name\": \"Documentação conceitual Code7_v3\",\n        \"tags\": \"boteria, code7\"\n      },\n      {\n        \"name\": \"PAE_Programa_Apoio_ao_Empregado\",\n        \"tags\": \"pae, vr\"\n      },\n      {\n        \"name\": \"Vidalink\",\n        \"tags\": \"vidalink, vr\"\n      },\n      {\n        \"name\": \"[GUIA PRÁTICO] Como criar o chatbot perfeito\",\n        \"tags\": \"ebook, code7\"\n      }\n    ])\n  }, [])\n\n  useEffect(() => {\n    console.log('files, id, t: ', files, id, t)\n  }, [files])\n\n  const presset = (tags: string) => {\n    const tagsSplit = tags.split(',');\n    let html = '';\n\n    html += tagsSplit.map(tag => {\n      return `<p class='tag'>${tag}</p>`;\n    }).join('');\n\n    return html;\n}\n\n  const renderFiles = () => {  \n    return (\n      <S.Container>\n        <S.Header>\n          <div className='infos'>\n            <h2>{t.files}</h2>\n            <p>{t.fileArea.description}</p>\n          </div>\n          <div className='actions'>\n            <Search placeholder={t.fileArea.search} setFiles={setFiles} initialFiles={initialFiles}></Search>\n            <button><FaUpload /> {t.fileArea.fileUpload}</button>\n          </div>\n        </S.Header>\n        {\n          files.length === 0 ? (\n            <EmptyState\n              icon={<FaList></FaList>}\n              title={t.fileArea.emptyState.title}\n              description={t.fileArea.emptyState.description}\n              activeButton\n              iconButton={<FaPlus style={{ width: '15px', height: '15px' }} />}\n              descriptionButton={t.fileArea.modal.chooseFile}\n              widthButton=\"230px\"\n            />\n          ) : <Table>\n                <thead>\n                  <tr>\n                    <th className=\"th_file_name\">\n                      {t.fileArea.fileName}\n                    </th>\n                    <th className=\"th_pressets\">\n                    {t.fileArea.presset}\n                    </th>\n                    <th className=\"th_actions\">\n                    {t.fileArea.actions}\n                    </th>\n                  </tr>\n                </thead>\n\n                <tbody>\n                  {files.map((object) => (\n                    <tr>\n                      <td>{object.name}</td>\n                      <td className='tags' dangerouslySetInnerHTML={{ __html: presset(object.tags) }} />\n                      <td>\n                        <div className='divDelete'>\n                          <button className='buttonDelete'>{t.buttons.delete}</button>\n                        </div>\n                      </td>\n                    </tr>\n                  ))}\n                </tbody>\n              </Table>\n        }\n        \n      </S.Container>\n    );\n  }\n\n  return (\n    <S.Container>\n      {renderFiles()}\n    </S.Container>\n  );\n};","import styled from 'styled-components';\n\nexport const Container = styled.div`\n\n`;\n\nexport const Header = styled.div`\n  display: flex;\n  flex-direction: column;\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n`\n\nexport const Inputs = styled.div`\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n\n  button {\n    background: #102693;\n    padding: 10px 20px;\n    color: white;\n    border-radius: 4px;\n    width: 190px;\n    height: 40px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    svg {\n      width: 23px;\n      height: 23px;\n    }\n  }\n`\n\nexport const Result = styled.div`\n  display: flex;\n  justify-content: left;\n  background: #F3F5F9;\n  padding: 15px;\n  border-radius: 5px;\n  margin-top: 15px;\n\n  .text{\n    margin-left: 5px;\n    font-size: 14px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 5px;\n\n    svg {\n      width: 35px;\n      height: 35px;\n    }\n  }\n\n`","import styled from 'styled-components';\n\nexport const Container = styled.div`\n  position: relative;\n  width: 50%;\n  margin-right: 5px;\n  select {\n    padding: 12px;\n    border-radius: 4px;\n    border: 1px solid #979AA5;\n    width: 100%;\n    height: 40px;\n    \n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px #6690ff;\n    }\n\n    option {\n      background: white;\n      font-size: 14px;\n      color: #5a5d68;\n    }\n\n    option:checked, option:hover {\n      background: #6690ff;\n      font-size: 14px;\n      color: white;\n    }\n  }\n`;\n","import React, { useState } from 'react';\nimport * as S from './styles';\n\ninterface SelectOption {\n  value: string | number;\n  label: string;\n}\n\ninterface SelectProps {\n  options: SelectOption[];\n  onSelect: (value: string | number) => void;\n  placeholder?: string;\n}\n\nconst Select: React.FC<SelectProps> = ({ options, onSelect, placeholder }) => {\n  const [selectedValue, setSelectedValue] = useState<string | number>('');\n\n  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    const selectedOption = event.target.value;\n    setSelectedValue(selectedOption);\n    onSelect(selectedOption);\n  };\n\n  return (\n    <S.Container>\n      <select value={selectedValue} onChange={handleSelectChange}>\n        <option value=\"\" disabled hidden>\n          {placeholder}\n        </option>\n        {options.map(option => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    </S.Container>\n  );\n};\n\nexport default Select;\n","import styled from 'styled-components';\nimport { FaMicrophone } from 'react-icons/fa';\n\nexport const Container = styled.div`\n  position: relative;\n  width: 100%;\n  margin-right: 5px;\n`;\n\nexport const StyledInput = styled.input`\n  padding-left: 10px;\n  padding-right: 40px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  height: 40px;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px #6690ff;\n  }\n`;\n\nexport const RecordAudioButton = styled.div`\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n`;\n\nexport const StyledMicrophoneIcon = styled(FaMicrophone)`\n  pointer-events: none;\n`;\n","import React from 'react';\nimport * as S from './styles';\n\ninterface InputTestProps {\n  placeholder: string;\n  onChange: (value: string) => void;\n  onRecordAudio: () => void;\n}\n\nconst InputTest: React.FC<InputTestProps> = ({ placeholder, onChange, onRecordAudio }) => {\n  return (\n    <S.Container>\n      <S.StyledInput\n        type=\"text\"\n        onChange={(e: any) => onChange(e.target.value)}\n        placeholder={placeholder}\n      />\n      <S.RecordAudioButton onClick={onRecordAudio}>\n        <S.StyledMicrophoneIcon />\n      </S.RecordAudioButton>\n    </S.Container>\n  );\n};\n\nexport default InputTest;\n","import React, { useState } from 'react';\nimport { getLanguage } from '../../utils/getLanguage'\nimport * as S from './styles';\nimport Select from './components/Select'\nimport InputTest from './components/InputTest'\nimport { PiWaveformBold  } from 'react-icons/pi';\nimport { FaList } from 'react-icons/fa';\nimport EmptyState from '../EmptyState';\n// import IconLeia from '../../assets/icon_leia.svg';\nimport { MdPerson2 } from \"react-icons/md\";\n\nexport const TestArea = () => {\n  const t = getLanguage('pt-br')\n  const [results, setResults] = useState({ \"message\": \"\" });\n  const [search, setSearch] = useState('');\n  const tags = [\n      \"pae\",\n      \"boteria\",\n      \"vr\",\n      \"code7\",\n      \"vidalink\"\n    ]\n  const personas = [\n    {\n      \"description\": \"Seriedade e profundidade ao explicar. Usa linguagem acadêmica e é preciso em temas específicos da área.\",\n      \"name\": \"College professor\"\n    },\n    {\n      \"description\": \"Abordagem descontraída, direto ao ponto. Linguagem simples, exemplos práticos para facilitar compreensão rápida.\",\n      \"name\": \"School Teacher\"\n    },\n    {\n      \"description\": \"Estilo descontraído, senso de humor único. Piadas e trocadilhos até em assuntos sérios.\",\n      \"name\": \"Humorist\"\n    },\n    {\n      \"description\": \"Postura centrada, comunicação direta e focada em resultados. Prioriza eficiência e precisão.\",\n      \"name\": \"Military\"\n    },\n    {\n      \"description\": \"Estilo único e carismático. Usa linguagem moderna, compartilha informações cativantes de forma descontraída.\",\n      \"name\": \"Digital Influencer\"\n    }\n  ]\n\n  const optionsPersona = personas.map(persona => {\n    return { label: persona.name, value: persona.description }\n  })\n\n  const optionsPresset = tags.map(tag => {\n    return { label: tag, value: tag }\n  })\n\n  const handleSelect = (value: string | number) => {\n    console.log(value);\n  };\n\n  const handleSearch = (value: string) => {\n    setSearch(value);\n  };\n\n  const handleRecordAudio = () => {\n    console.log('Iniciando gravação de áudio...');\n  };\n\n  const handleTest = () => {\n    console.log('Pesquisa: ', search)\n    setResults({\n      \"message\": \"Você precisa seguir algumas etapas importantes para ter um chatbot perfeito. Primeiro, defina claramente o objetivo do seu chatbot. Em seguida, crie uma mensagem de saudação cativante para atrair a atenção dos usuários. Não se esqueça de pedir feedbacks para melhorar constantemente o desempenho do seu chatbot. Além disso, construa um fluxo de conversa simples e utilize respostas curtas para manter a interação rápida e eficiente. Também é importante incorporar inteligência artificial para tornar o seu chatbot especialista em determinado assunto. Teste o seu bot antes de lançá-lo e personalize-o de acordo com as necessidades dos usuários. Por fim, direcione os usuários para um atendimento humano quando necessário. Seguindo essas dicas, você estará no caminho certo para ter um chatbot perfeito!\"\n    })\n  };\n\n  return (\n    <S.Container>\n        <S.Header>\n          <div className='infos'>\n            <h2>{t.test}</h2>\n            <p>{t.testArea.description}</p>\n          </div>\n        </S.Header>\n        <S.Inputs>\n          <InputTest placeholder={t.testArea.typeSentence} onChange={handleSearch} onRecordAudio={handleRecordAudio} />\n          <Select placeholder={t.testArea.selectPersona} options={optionsPersona} onSelect={handleSelect} />\n          <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={handleSelect} />\n          <button onClick={handleTest}><PiWaveformBold /> {t.buttons.test}</button>\n        </S.Inputs>\n        {\n          results.message === '' ? (\n            <EmptyState\n              icon={<FaList></FaList>}\n              title={t.testArea.emptyState.title}\n              description={t.testArea.emptyState.description}\n              activeButton={false}\n            />\n          ) : <S.Result>\n                <div className='icon'>\n                  <MdPerson2 />\n                </div>\n                <div className='text'>{results.message}</div>\n              </S.Result>\n        }\n    </S.Container>\n  );\n};","import React, { useMemo, Suspense } from 'react';\n\nimport { Route, useLocation, useRouteMatch, useHistory, Switch as SwitchRoute } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nimport { getLanguage } from './utils/getLanguage'\n\nimport { FileArea } from './components/FileArea';\nimport { TestArea } from './components/TestArea';\n\nexport const Leia = (props: Props) => {\n  const match = useRouteMatch();\n  const { pathname } = useLocation();\n  const history = useHistory();\n\n  const t = getLanguage(props.language)\n\n  const activeTab = useMemo(() => {\n    return pathname.split('/')[5] || 'files';\n  }, [pathname]);\n\n  return (\n    <>\n      <Tabs\n        value={activeTab}\n        onChange={(value) => history.push(`${match.url}/${value}`)}\n      >\n        <Tab value=\"files\">{t.files}</Tab>\n        <Tab value=\"test\">{t.test}</Tab>\n      </Tabs>\n      <Suspense fallback={props.loading}>\n        <SwitchRoute>\n          <Route path={`${match.path}`} exact component={FileArea} />\n          <Route path={`${match.path}/files`} component={FileArea} />\n          <Route path={`${match.path}/test`} component={TestArea} />\n        </SwitchRoute>\n      </Suspense>\n    </>\n  );\n};","import type { PropsWithChildren, ReactElement } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n  id: string;\n  activeTab: string;\n  language: \"en\" | \"pt-br\" | \"es\";\n  loading: ReactElement\n}>;\n\nexport function Code7(props: Props) {\n  return <Leia {...props} />;\n}"],"names":["TabsPane","styled","ul","_templateObject","_taggedTemplateLiteralLoose","Tab","li","_templateObject2","_ref","active","children","rest","_objectWithoutPropertiesLoose","_excluded","React","S","className","cc","propTypes","PropTypes","oneOfType","string","element","node","isRequired","onChange","func","value","bool","defaultProps","Tabs","_ref2","childrenProp","_excluded2","Children","map","child","_child$props2","isValidElement","Array","isArray","_child$props","props","cloneElement","_child$props3","onClick","_child$props4","number","defaultLanguage","files","test","fileArea","description","fileName","presset","actions","search","fileUpload","emptyState","title","modal","descriptionUpload","chooseFile","buttons","cancel","send","delete","testArea","typeSentence","selectPersona","selectPresset","getLanguage","language","en","pt-br","_extends","es","Container","div","Header","TableWrapper","Table","table","TableLoadingWrapper","_templateObject3","SpinnerWrapper","span","color","Spinner","_ref$size","size","_ref$color","forwardRef","ref","_ref$isLoading","isLoading","_ref$className","oneOf","SearchInput","setFiles","initialFiles","style","position","width","type","e","searchTerm","target","trim","normalizedSearchTerm","unorm","nfkd","toLowerCase","newFiles","filter","file","name","includes","searchName","placeholder","paddingLeft","borderRadius","border","height","top","left","pointerEvents","FaSearch","hasBorder","backgroundColor","_ref3","backgroundIcon","EmptyState","icon","activeButton","iconButton","descriptionButton","widthButton","button","FileArea","_useState","useState","_useState2","setInitialFiles","id","useLocation","pathname","split","t","useEffect","tags","console","log","Search","FaUpload","length","FaList","FaPlus","object","dangerouslySetInnerHTML","__html","html","tag","join","Inputs","Result","_templateObject4","Select","options","onSelect","setSelectedValue","event","selectedOption","disabled","hidden","option","key","label","StyledInput","input","RecordAudioButton","StyledMicrophoneIcon","FaMicrophone","InputTest","onRecordAudio","TestArea","message","results","setResults","setSearch","optionsPersona","persona","optionsPresset","handleSelect","PiWaveformBold","MdPerson2","Leia","match","useRouteMatch","history","useHistory","activeTab","useMemo","push","url","Suspense","fallback","loading","SwitchRoute","Route","path","exact","component"],"mappings":"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"}
+{"version":3,"file":"code7-leia.cjs.production.min.js","sources":["../src/components/Tabs/styles.tsx","../src/components/Tabs/index.tsx","../src/utils/getLanguage.tsx","../src/components/FileArea/styles.tsx","../src/components/FileArea/components/Table/styles.tsx","../src/components/FileArea/components/Spinner/styles.tsx","../src/components/FileArea/components/Spinner/index.tsx","../src/components/FileArea/components/Table/index.tsx","../src/components/FileArea/components/Search/index.tsx","../src/components/FileArea/components/Modal/styles.tsx","../src/components/FileArea/components/Modal/index.tsx","../src/components/EmptyState/styles.tsx","../src/components/EmptyState/index.tsx","../src/components/Select/styles.tsx","../src/components/Select/index.tsx","../src/components/FileArea/index.tsx","../src/components/TestArea/styles.tsx","../src/components/TestArea/components/InputTest/styles.tsx","../src/components/TestArea/components/InputTest/index.tsx","../src/components/TestArea/index.tsx","../src/Leia.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ReactNode } from 'react';\n\ninterface TabProps {\n  children: ReactNode;\n}\n\ninterface OptionProps {\n  children: ReactNode;\n  onClick: () => void;\n}\n\nexport const TabsPane = styled.ul`\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n`;\n\nexport const Tab = styled.li<TabProps>`\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n`;\n\nexport const DropdownContainer = styled.div`\n  position: absolute;\n  left: 0px;\n  top: 40px;\n  display: flex;\n  flex-direction: column;\n\n  background: #ffffff;\n\n  border: 1px solid #979aa5;\n  box-sizing: border-box;\n  box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),\n    0px 8px 24px -4px rgba(24, 39, 75, 0.08);\n  border-radius: 4px;\n  padding: 8px;\n  z-index: 2;\n`;\n\nexport const Option = styled.div<OptionProps>`\n  padding: 8px;\n  font-size: 14px;\n  border-radius: 4px;\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    background-color: var(--primary-800-light);\n    color: white;\n  }\n`;\n","import React, { ReactNode } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\ninterface TabProps {\n  children: ReactNode;\n  active?: boolean;\n}\n\ninterface ITabsProps {\n  children: ReactNode;\n  value: string | number;\n  onChange: (e: any) => void;\n  active?: boolean;\n}\n\nexport const Tab = ({ active, children, ...rest }: TabProps) => {\n  return (\n    <S.Tab className={cc({ active })} {...rest}>\n      {children}\n    </S.Tab>\n  );\n};\n\nTab.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n    PropTypes.node,\n  ]).isRequired,\n  onChange: PropTypes.func,\n  value: PropTypes.string,\n  active: PropTypes.bool,\n};\n\nTab.defaultProps = {\n  onChange: () => {},\n  value: '',\n  active: false,\n};\n\nexport const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {\n  const children = React.Children.map(childrenProp, (child) => {\n    if (!React.isValidElement(child)) {\n      return null;\n    }\n\n    if (Array.isArray(child.props?.children)) {\n      return React.cloneElement(child as React.ReactElement<any>, {\n        active: child.props?.value === value,\n        value,\n        onChange,\n      });\n    }\n\n    return React.cloneElement(child as React.ReactElement<any>, {\n      active: child.props?.value === value,\n      onClick: () => onChange(child.props?.value),\n    });\n  });\n\n  return <S.TabsPane {...rest}>{children}</S.TabsPane>;\n};\n\nTabs.propTypes = {\n  children: PropTypes.node.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  onChange: PropTypes.func.isRequired,\n};\n","\nimport { Language } from '../interface/Language'\n\nconst defaultLanguage: Language = {\n  files: 'Files',\n  test: 'Test',\n  fileArea: {\n    description: 'bla bla bla bla bla',\n    fileName: 'File name',\n    presset: 'Presset',\n    actions: 'Actions',\n    search: 'Search',\n    fileUpload: 'File upload',\n    emptyState: {\n      title: 'No data',\n      description: 'bla bla bla bla bla',\n    },\n    modal: {\n      descriptionUpload: 'Drag and drop files here or',\n      chooseFile: 'Choose a file',\n      uploadFile: 'Upload a file',\n    },\n  },\n  buttons: {\n    cancel: 'Cancel',\n    send: 'Send',\n    delete: 'Delete',\n    test: 'Test',\n  },\n  testArea: {\n    description: 'bla bla bla bla bla',\n    typeSentence: 'Type a sentence',\n    selectPersona: 'Select a Persona',\n    selectPresset: 'Select a presset',\n    emptyState: {\n      title: 'No data for analysis',\n      description: 'Do a search, click the \"Test\" button.',\n    },\n  },\n};\n\nexport const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Language>): Language => {\n  const languages = {\n    en: defaultLanguage,\n    'pt-br': {\n      files: 'Arquivos',\n      test: 'Teste',\n      fileArea: {\n        ...defaultLanguage.fileArea,\n        fileName: 'Nome do arquivo',\n        presset: 'Presset',\n        actions: 'Ações',\n        search: 'Pesquisar',\n        fileUpload: 'Upload de arquivo',\n        emptyState: {\n          ...defaultLanguage.fileArea.emptyState,\n          title: 'Sem dados',\n        },\n        modal: {\n          ...defaultLanguage.fileArea.modal,\n          descriptionUpload: 'Arraste e solte os arquivos aqui ou',\n          chooseFile: 'Escolha um arquivo',\n          uploadFile: 'Enviar um arquivo',\n        },\n      },\n      buttons: {\n        ...defaultLanguage.buttons,\n        cancel: 'Cancelar',\n        send: 'Enviar',\n        delete: 'Excluir',\n        test: 'Testar',\n      },\n      testArea: {\n        ...defaultLanguage.testArea,\n        description: 'Digite uma frase para testar a inteligência artificial.',\n        typeSentence: 'Digite uma frase',\n        selectPersona: 'Selecione uma Persona',\n        selectPresset: 'Selecione uma predefinição',\n        emptyState: {\n          ...defaultLanguage.testArea.emptyState,\n          title: 'Sem dados para análise',\n          description: 'Faça uma pesquisa, clique no botão \"Teste\".',\n        },\n      },\n    },\n    es: {\n      ...defaultLanguage,\n      files: 'Archivos',\n      test: 'Prueba',\n      fileArea: {\n        ...defaultLanguage.fileArea,\n        fileName: 'Nombre del archivo',\n        presset: 'Presset',\n        actions: 'Acciones',\n        search: 'Buscar',\n        fileUpload: 'Carga de archivos',\n        emptyState: {\n          ...defaultLanguage.fileArea.emptyState,\n          title: 'Sin datos',\n        },\n        modal: {\n          ...defaultLanguage.fileArea.modal,\n          descriptionUpload: 'Arrastre y suelte los archivos aquí o',\n          chooseFile: 'Elegir un archivo',\n        },\n      },\n      buttons: {\n        ...defaultLanguage.buttons,\n        cancel: 'Cancelar',\n        send: 'Enviar',\n        delete: 'Eliminar',\n        test: 'Probar',\n      },\n      testArea: {\n        ...defaultLanguage.testArea,\n        description: 'bla bla bla bla bla',\n        typeSentence: 'Escribe una oración',\n        selectPersona: 'Seleccionar una Persona',\n        selectPresset: 'Seleccionar una configuración preestablecida',\n        emptyState: {\n          ...defaultLanguage.testArea.emptyState,\n          title: 'Sin datos para el análisis',\n          description: 'Realiza una búsqueda, haz clic en el botón \"Prueba\".',\n        },\n      },\n    },\n  };\n\n  return languages[language] || defaultLanguage;\n};\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n  .tag {\n    padding: 4px 8px 4px 8px;\n    background: #C7F9ED;\n    border-radius: 4px;\n  }\n\n  .tags {\n    display: flex;\n    justify-content: left;\n    gap: 4px;\n  }\n\n  .divDelete {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n  }\n\n  .buttonDelete {\n    color: #5b0a1f;\n    background: #fae0d2;\n    padding: 12px 20px;\n    border-radius: 4px;\n  }\n\n  .buttonDelete:hover {\n      background: #f5bba7;\n  }\n`;\n\nexport const Header = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n\n  .actions {\n    display: flex;\n    justify-content: space-between;\n    padding-bottom: 14px;\n\n    button {\n      background: #102693;\n      padding: 10px 20px;\n      color: white;\n      border-radius: 4px;\n    }\n  }\n\n`\n","import styled from 'styled-components';\n\nexport const TableWrapper = styled.div`\n  width: 100%;\n  height: max-content;\n  min-height: 50px;\n  position: relative;\n`;\n\nexport const Table = styled.table`\n  font-size: 14px;\n  line-height: 143%;\n  color: black;\n  width: 100%;\n  border-collapse: collapse;\n  border-radius: 4px;\n\n  th {\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 143%;\n    letter-spacing: 0.018em;\n    color: #5A5D68;\n    text-align: left;\n    padding: 8px;\n    border-radius: 4px;\n  }\n\n  thead tr {\n    background: #dadce3;\n  }\n\n  tbody tr {\n    border: 1px solid #dadce3;\n  }\n\n  &.small td {\n    padding: 4px;\n  }\n\n  &.medium td {\n    padding: 8px;\n  }\n\n  &.large td {\n    padding: 16px;\n  }\n`;\n\nexport const TableLoadingWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #f3f5f961;\n`;\n","import styled from 'styled-components';\n\nexport const SpinnerWrapper = styled.span`\n  display: inline-block;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &.spinner--sm {\n    width: 24px;\n    height: 24px;\n  }\n\n  &.spinner--md {\n    width: 32px;\n    height: 32px;\n  }\n\n  &.spinner--lg {\n    width: 60px;\n    height: 60px;\n  }\n\n  span {\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: 8px;\n    border: 4px solid #fff;\n    border-radius: 50%;\n    animation: rotateSpinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border-color: ${(props) => `var(--${props.color})`} transparent transparent\n      transparent;\n  }\n\n  & span:nth-child(1) {\n    animation-delay: -0.45s;\n  }\n\n  & span:nth-child(2) {\n    animation-delay: -0.3s;\n  }\n\n  & span:nth-child(3) {\n    animation-delay: -0.15s;\n  }\n\n  @keyframes rotateSpinner {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n","import React from 'react';\nimport cc from 'classcat';\n\nimport * as S from './styles';\n\nimport { SpinnerProps } from '../../../../interface/Table'\n\nconst Spinner: React.FC<SpinnerProps> = ({ color = 'neutral-3', size = 'md', className }) => {\n  return (\n    <S.SpinnerWrapper\n      color={color}\n      className={cc([`spinner--${size}`, className])}\n    >\n      <span />\n      <span />\n      <span />\n      <span />\n    </S.SpinnerWrapper>\n  );\n};\n\nexport default Spinner;\n","import React, { forwardRef, Ref } from 'react';\nimport PropTypes from 'prop-types';\nimport cc from 'classcat';\n\nimport * as S from './styles';\nimport Spinner from '../Spinner';\n\nimport { TableProps } from '../../../../interface/Table'\n\nconst Table = forwardRef(\n  ({ size = 'medium', children, isLoading = false, className = '', ...props }: TableProps, ref: Ref<HTMLTableElement>) => {\n    return (\n      <S.TableWrapper className={className}>\n        {isLoading ? (\n          <S.TableLoadingWrapper>\n            <Spinner />\n          </S.TableLoadingWrapper>\n        ) : null}\n        <S.Table className={cc([size])} ref={ref} {...props}>\n          {children}\n        </S.Table>\n      </S.TableWrapper>\n    );\n  }\n);\n\nTable.propTypes = {\n  children: PropTypes.node.isRequired,\n  className: PropTypes.string,\n  size: PropTypes.oneOf(['small', 'medium', 'large']),\n  isLoading: PropTypes.bool,\n};\n\nexport default Table;\n","import React from 'react';\nimport unorm from 'unorm';\nimport { FaSearch } from 'react-icons/fa';\nimport type { FileData } from '../../../../interface/FileData'\n\ninterface SearchInputProps {\n  placeholder: string;\n  initialFiles: FileData[]\n  setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;\n}\n\nconst SearchInput: React.FC<SearchInputProps> = ({ placeholder, setFiles, initialFiles }) => {\n\n  const searchName = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const searchTerm = e.target.value.trim();\n    const normalizedSearchTerm = unorm.nfkd(searchTerm).toLowerCase();\n    \n    const newFiles = initialFiles.filter(file => {\n        const normalizedFileName = unorm.nfkd(file.name).toLowerCase();\n        return normalizedFileName.includes(normalizedSearchTerm);\n    });\n    \n    setFiles(searchTerm !== '' ? newFiles : initialFiles);\n}\n  \n\n  return (\n    <div style={{ position: 'relative', width: '300px' }}>\n      <input\n        type=\"text\"\n        onChange={(e) => searchName(e)}\n        placeholder={placeholder}\n        style={{\n          paddingLeft: '40px',\n          borderRadius: '5px',\n          border: '1px solid #ccc',\n          height: '40px',\n          width: '100%',\n        }}\n      />\n      <div\n        style={{\n          position: 'absolute',\n          top: '10px',\n          left: '10px',\n          pointerEvents: 'none', \n        }}\n      >\n        <FaSearch />\n      </div>\n    </div>\n  );\n};\n\nexport default SearchInput;\n","import styled from 'styled-components';\n\ninterface FullScreenProps {\n  isOpen: number;\n  isFixed: number;\n  zIndex: number;\n}\n\nexport const FullScreen = styled.div<FullScreenProps>`\n  display: ${({ isOpen }) => (isOpen === 1 ? 'flex' : 'none')};\n  cursor: ${({ isFixed }) => (isFixed === 0 ? 'pointer' : 'default')};\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  justify-content: center;\n  align-items: center;\n  z-index: ${({ zIndex }) => zIndex};\n  animation: fadeIn 380ms ease-in-out 1;\n  background-color: #2f3845b8;\n  backdrop-filter: blur(2px);\n\n  @keyframes fadeIn {\n    from {\n      background-color: #2f384521;\n    }\n    to {\n      background-color: #2f3845b8;\n    }\n  }\n`;\n\ninterface ModalProps {\n  maxWidth?: string;\n  maxHeight?: string;\n}\n\nexport const Modal = styled.div<ModalProps>`\n  background-color: #fff;\n  border-radius: 3px;\n  position: relative;\n  cursor: default;\n  width: 100%;\n  max-width: ${({ maxWidth }) => maxWidth};\n  animation: slideIn 350ms cubic-bezier(0.42, 0, 0.21, 1) 1;\n\n  @keyframes slideIn {\n    from {\n      transform: translateY(-120px);\n      opacity: 0;\n    }\n\n    20% {\n      opacity: 0;\n    }\n\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n`;\n\ninterface ModalContainerProps {\n  maxHeight?: string;\n}\n\nexport const ModalContainer = styled.div<ModalContainerProps>`\n  width: 100%;\n  overflow-y: auto;\n  max-height: ${({ maxHeight }) => maxHeight};\n`;\n\nexport const ModalHeader = styled.header`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid #dadce3;\n  padding: var(--spacement-medium);\n`;\n\nexport const ModalTitle = styled.div`\n  font-style: normal;\n  font-weight: normal;\n  font-size: 20px;\n  line-height: 150%;\n  letter-spacing: 0.0075em;\n  color: var(--neutral-4);\n`;\n\nexport const ModalButtonClose = styled.button`\n  outline: none;\n  cursor: pointer;\n\n  :hover {\n    opacity: 0.7;\n  }\n`;\n\ninterface ModalContentWrapperProps {\n  overflowY?: string;\n  maxHeight?: string;\n}\n\nexport const ModalContentWrapper = styled.div<ModalContentWrapperProps>`\n  width: 100%;\n  overflow-y: ${({ overflowY }) => overflowY};\n  max-height: ${({ maxHeight }) => maxHeight};\n  padding: var(--spacement-medium);\n`;\n\nexport const ModalFooterWrapper = styled.div`\n  padding: var(--spacement-medium);\n  background: var(--neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--spacement-medium);\n`;\n","import React, { useEffect, useCallback, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { MdClose } from 'react-icons/md';\n\nimport * as S from './styles';\nimport ModalFooter from './ModalFooter';\nimport ModalContent from './ModalContent';\nimport ModalHeader from './ModalHeader';\nimport ModalTitle from './ModalTitle';\nimport ModalButtonClose from './ModalButtonClose';\n\ninterface ModalProps {\n  isOpen: boolean;\n  style?: React.CSSProperties;\n  maxWidth?: string;\n  maxHeight?: string;\n  className?: string;\n  title?: string | React.ReactElement | React.ComponentType;\n  children: React.ReactNode;\n  onClose?: () => void;\n  contentStyle?: React.CSSProperties;\n  isFixed?: boolean;\n  zIndex?: number;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  isOpen,\n  style,\n  maxWidth,\n  maxHeight,\n  className,\n  title,\n  children,\n  onClose,\n  contentStyle,\n  isFixed,\n  zIndex,\n}) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n\n  const handleKeyUp = useCallback(\n    (e: KeyboardEvent) => {\n      const keys: { [key: number]: () => void } = {\n        // ESC Key\n        27: () => {\n          e.preventDefault();\n          if (!isFixed && onClose) {\n            onClose();\n          }\n          window.removeEventListener('keyup', handleKeyUp, false);\n        },\n      };\n\n      if (keys[e.keyCode] && isOpen) {\n        keys[e.keyCode]();\n      }\n    },\n    [onClose, isOpen, isFixed]\n  );\n\n  const handleOutsideClick = useCallback(\n    (e: MouseEvent) => {\n      if (modalRef.current && modalRef.current.parentNode === e.target) {\n        if (!isFixed && onClose) {\n          onClose();\n        }\n        document.removeEventListener('click', handleOutsideClick, false);\n      }\n    },\n    [onClose, isFixed]\n  );\n\n  useEffect(() => {\n    window.addEventListener('keyup', handleKeyUp, false);\n    document.addEventListener('click', handleOutsideClick, false);\n\n    return () => {\n      window.removeEventListener('keyup', handleKeyUp, false);\n      document.removeEventListener('click', handleOutsideClick, false);\n    };\n  }, [handleKeyUp, handleOutsideClick]);\n\n  return (\n    <S.FullScreen isFixed={isFixed ? 1 : 0} isOpen={isOpen ? 1 : 0} zIndex={zIndex ?? 0}>\n      <S.Modal ref={modalRef} style={style} maxWidth={maxWidth} className={className}>\n        <S.ModalContainer className=\"styleOverlay\" maxHeight={maxHeight} style={contentStyle}>\n            <S.ModalHeader>\n              <S.ModalTitle>{String(title)}</S.ModalTitle>\n              <S.ModalButtonClose type=\"button\" onClick={onClose}>\n                <MdClose color=\"#5A5D68\" size={16} />\n              </S.ModalButtonClose>\n            </S.ModalHeader>\n          {children}\n        </S.ModalContainer>\n      </S.Modal>\n    </S.FullScreen>\n  );\n};\n\nModal.propTypes = {\n  isOpen: PropTypes.bool.isRequired,\n  title: PropTypes.oneOfType([\n    PropTypes.element,\n    PropTypes.string,\n    PropTypes.func,\n  ]),\n  children: PropTypes.node.isRequired,\n  onClose: PropTypes.func,\n  style: PropTypes.objectOf(PropTypes.any),\n  contentStyle: PropTypes.objectOf(PropTypes.any),\n  className: PropTypes.string,\n  maxWidth: PropTypes.string,\n  maxHeight: PropTypes.string,\n  isFixed: PropTypes.bool,\n  zIndex: PropTypes.number,\n};\n\nModal.defaultProps = {\n  title: '',\n  style: {},\n  contentStyle: {},\n  className: '',\n  maxWidth: '360px',\n  maxHeight: 'max-content',\n  isFixed: false,\n  onClose: () => {},\n  zIndex: 9999,\n};\n\nexport { ModalHeader, ModalTitle, ModalButtonClose, ModalContent, ModalFooter };\nexport default Modal;\n","import styled from 'styled-components';\n\ninterface ContainerProps {\n  hasBorder?: boolean;\n  backgroundColor?: string;\n  backgroundIcon?: string;\n}\n\nexport const Container = styled.div<ContainerProps>`\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 24px 0;\n  height: 193px;\n\n  background: ${({ hasBorder }) =>\n    hasBorder &&\n    `linear-gradient(\n        to right,\n        #dadce3 50%,\n        rgba(255, 255, 255, 0) 0%\n      ),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(to right, #dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%)`};\n  background-position: top, right, bottom, left;\n  background-repeat: repeat-x, repeat-y;\n  background-size: 40px 1px, 1px 40px;\n  background-color: ${({ backgroundColor }) => backgroundColor};\n\n  & .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > .icon {\n      background-color: ${({ backgroundIcon }) => backgroundIcon};\n      border-radius: 16px;\n      width: 145px;\n      height: 145px;\n\n      display: flex;\n      justify-content: center;\n\n      & svg {\n        width: 100%;\n        height: 70%;\n        margin: 20px;\n      }\n    }\n\n    & .description {\n      max-width: 600px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 8px 0 8px 24px;\n\n      .button-add {\n        cursor: pointer;\n      }\n\n      .start-icon {\n        display: flex;\n        align-items: center;\n      }\n    }\n  }\n`;\n","import React, { FC, ReactElement } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './styles';\n\ninterface EmptyStateProps {\n  icon?: string | ReactElement;\n  title?: string;\n  description?: string;\n  activeButton?: boolean;\n  iconButton?: ReactElement;\n  descriptionButton?: string;\n  widthButton?: string;\n  button?: ReactElement;\n  backgroundIcon?: string;\n  backgroundColor?: string;\n  hasBorder?: boolean;\n}\n\nconst EmptyState: FC<EmptyStateProps> = ({\n  icon,\n  title,\n  description,\n  activeButton,\n  iconButton,\n  descriptionButton,\n  widthButton,\n  button,\n  backgroundIcon,\n  backgroundColor,\n  hasBorder,\n  ...rest\n}) => {\n  return (\n    <S.Container\n      backgroundIcon={backgroundIcon}\n      backgroundColor={backgroundColor}\n      hasBorder={hasBorder}\n      {...rest}\n    >\n      <div className=\"content\">\n        <div className=\"icon\">\n          {icon}\n        </div>\n        <div className=\"description\">\n          <h5> {title}</h5>\n\n          <p>{description}</p>\n\n          {activeButton ? (\n            <button>\n              {descriptionButton}\n            </button>\n          ) : null}\n\n          {button}\n        </div>\n      </div>\n    </S.Container>\n  );\n};\n\nEmptyState.propTypes = {\n  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  title: PropTypes.string,\n  description: PropTypes.string,\n  activeButton: PropTypes.bool,\n  iconButton: PropTypes.element,\n  descriptionButton: PropTypes.string,\n  widthButton: PropTypes.string,\n  button: PropTypes.element,\n  backgroundIcon: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  hasBorder: PropTypes.bool,\n};\n\nEmptyState.defaultProps = {\n  icon: '',\n  title: '',\n  description: '',\n  activeButton: false,\n  descriptionButton: '',\n  widthButton: '140px',\n  backgroundIcon: 'var(--neutral-0)',\n  backgroundColor: 'var(--absolute-white)',\n  hasBorder: true,\n};\n\nexport default EmptyState;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n  position: relative;\n  width: 50%;\n  margin-right: 5px;\n  select {\n    padding: 12px;\n    border-radius: 4px;\n    border: 1px solid #979AA5;\n    width: 100%;\n    height: 40px;\n    \n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px #6690ff;\n    }\n\n    option {\n      background: white;\n      font-size: 14px;\n      color: #5a5d68;\n    }\n\n    option:checked, option:hover {\n      background: #6690ff;\n      font-size: 14px;\n      color: white;\n    }\n  }\n`;\n","import React, { useState } from 'react';\nimport * as S from './styles';\n\ninterface SelectOption {\n  value: string | number;\n  label: string;\n}\n\ninterface SelectProps {\n  options: SelectOption[];\n  onSelect: (value: string | number) => void;\n  placeholder?: string;\n}\n\nconst Select: React.FC<SelectProps> = ({ options, onSelect, placeholder }) => {\n  const [selectedValue, setSelectedValue] = useState<string | number>('');\n\n  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    const selectedOption = event.target.value;\n    setSelectedValue(selectedOption);\n    onSelect(selectedOption);\n  };\n\n  return (\n    <S.Container>\n      <select value={selectedValue} onChange={handleSelectChange}>\n        <option value=\"\" disabled hidden>\n          {placeholder}\n        </option>\n        {options.map(option => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    </S.Container>\n  );\n};\n\nexport default Select;\n","import React, { useEffect, useState} from 'react';\n\nimport { FaUpload, FaList, FaPlus } from 'react-icons/fa';\n\n// import { formatAxios } from '../../utils/formatAxios'\n\nimport { useLocation } from 'react-router-dom';\n\nimport type { FileData } from '../../interface/FileData'\n\nimport { getLanguage } from '../../utils/getLanguage'\n\nimport * as S from './styles';\nimport Table from './components/Table';\nimport Search from './components/Search';\nimport Modal from './components/Modal'\nimport EmptyState from '../EmptyState';\nimport Select from '../Select'\n\nexport const FileArea = () => {\n  const [files, setFiles] = useState<FileData[]>([]);\n  const [initialFiles, setInitialFiles] = useState<FileData[]>([]);\n  const { pathname } = useLocation();\n  const [modal, setModal] = useState(false)\n  const id = pathname.split('/')[4]\n  const t = getLanguage('pt-br')\n  const tags = [\n    \"pae\",\n    \"boteria\",\n    \"vr\",\n    \"code7\",\n    \"vidalink\"\n  ]\n\n  useEffect(() => {\n    setFiles([\n        {\n          \"name\": \"Documentação conceitual Code7_v3\",\n          \"tags\": \"boteria, code7\"\n        },\n        {\n          \"name\": \"PAE_Programa_Apoio_ao_Empregado\",\n          \"tags\": \"pae, vr\"\n        },\n        {\n          \"name\": \"Vidalink\",\n          \"tags\": \"vidalink, vr\"\n        },\n        {\n          \"name\": \"[GUIA PRÁTICO] Como criar o chatbot perfeito\",\n          \"tags\": \"ebook, code7\"\n        }\n      ])\n\n    setInitialFiles([\n      {\n        \"name\": \"Documentação conceitual Code7_v3\",\n        \"tags\": \"boteria, code7\"\n      },\n      {\n        \"name\": \"PAE_Programa_Apoio_ao_Empregado\",\n        \"tags\": \"pae, vr\"\n      },\n      {\n        \"name\": \"Vidalink\",\n        \"tags\": \"vidalink, vr\"\n      },\n      {\n        \"name\": \"[GUIA PRÁTICO] Como criar o chatbot perfeito\",\n        \"tags\": \"ebook, code7\"\n      }\n    ])\n  }, [])\n\n  useEffect(() => {\n    console.log('files, id, t: ', files, id, t)\n  }, [files])\n\n  const optionsPresset = tags.map(tag => {\n    return { label: tag, value: tag }\n  })\n\n  const presset = (tags: string) => {\n    const tagsSplit = tags.split(',');\n    let html = '';\n\n    html += tagsSplit.map(tag => {\n      return `<p class='tag'>${tag}</p>`;\n    }).join('');\n\n    return html;\n  }\n\n  const handleOpenModal = () => {\n    setModal(!modal)\n  }\n\n  const handleSelect = (value: string | number) => {\n    console.log(value);\n  };\n\n  const renderFiles = () => {  \n    return (\n      <S.Container>\n        <S.Header>\n          <div className='infos'>\n            <h2>{t.files}</h2>\n            <p>{t.fileArea.description}</p>\n          </div>\n          <div className='actions'>\n            <Search placeholder={t.fileArea.search} setFiles={setFiles} initialFiles={initialFiles}></Search>\n            <button onClick={handleOpenModal}><FaUpload /> {t.fileArea.fileUpload}</button>\n          </div>\n        </S.Header>\n        {\n          files.length === 0 ? (\n            <EmptyState\n              icon={<FaList></FaList>}\n              title={t.fileArea.emptyState.title}\n              description={t.fileArea.emptyState.description}\n              activeButton\n              iconButton={<FaPlus style={{ width: '15px', height: '15px' }} />}\n              descriptionButton={t.fileArea.modal.chooseFile}\n              widthButton=\"230px\"\n            />\n          ) : <Table>\n                <thead>\n                  <tr>\n                    <th className=\"th_file_name\">\n                      {t.fileArea.fileName}\n                    </th>\n                    <th className=\"th_pressets\">\n                    {t.fileArea.presset}\n                    </th>\n                    <th className=\"th_actions\">\n                    {t.fileArea.actions}\n                    </th>\n                  </tr>\n                </thead>\n\n                <tbody>\n                  {files.map((object) => (\n                    <tr>\n                      <td>{object.name}</td>\n                      <td className='tags' dangerouslySetInnerHTML={{ __html: presset(object.tags) }} />\n                      <td>\n                        <div className='divDelete'>\n                          <button className='buttonDelete'>{t.buttons.delete}</button>\n                        </div>\n                      </td>\n                    </tr>\n                  ))}\n                </tbody>\n              </Table>\n        }\n        <Modal \n          isOpen={modal}\n          maxWidth=\"1100px\"\n          maxHeight=\"max-content\"\n          onClose={handleOpenModal}\n          title={t.fileArea.modal.uploadFile}\n          >\n            <div>\n              <input type=\"file\" id=\"file\" name=\"file\" />\n              <label htmlFor=\"file\">{t.fileArea.modal.chooseFile}</label>\n              <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={handleSelect} />\n            </div>\n          </Modal>\n      </S.Container>\n    );\n  }\n\n  return (\n    <S.Container>\n      {renderFiles()}\n    </S.Container>\n  );\n};","import styled from 'styled-components';\n\nexport const Container = styled.div`\n\n`;\n\nexport const Header = styled.div`\n  display: flex;\n  flex-direction: column;\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n`\n\nexport const Inputs = styled.div`\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n\n  button {\n    background: #102693;\n    padding: 10px 20px;\n    color: white;\n    border-radius: 4px;\n    width: 190px;\n    height: 40px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    svg {\n      width: 23px;\n      height: 23px;\n    }\n  }\n`\n\nexport const Result = styled.div`\n  display: flex;\n  justify-content: left;\n  background: #F3F5F9;\n  padding: 15px;\n  border-radius: 5px;\n  margin-top: 15px;\n\n  .text{\n    margin-left: 5px;\n    font-size: 14px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 5px;\n\n    svg {\n      width: 35px;\n      height: 35px;\n    }\n  }\n\n`","import styled from 'styled-components';\nimport { FaMicrophone } from 'react-icons/fa';\n\nexport const Container = styled.div`\n  position: relative;\n  width: 100%;\n  margin-right: 5px;\n`;\n\nexport const StyledInput = styled.input`\n  padding-left: 10px;\n  padding-right: 40px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  height: 40px;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px #6690ff;\n  }\n`;\n\nexport const RecordAudioButton = styled.div`\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n`;\n\nexport const StyledMicrophoneIcon = styled(FaMicrophone)`\n  pointer-events: none;\n`;\n","import React from 'react';\nimport * as S from './styles';\n\ninterface InputTestProps {\n  placeholder: string;\n  onChange: (value: string) => void;\n  onRecordAudio: () => void;\n}\n\nconst InputTest: React.FC<InputTestProps> = ({ placeholder, onChange, onRecordAudio }) => {\n  return (\n    <S.Container>\n      <S.StyledInput\n        type=\"text\"\n        onChange={(e: any) => onChange(e.target.value)}\n        placeholder={placeholder}\n      />\n      <S.RecordAudioButton onClick={onRecordAudio}>\n        <S.StyledMicrophoneIcon />\n      </S.RecordAudioButton>\n    </S.Container>\n  );\n};\n\nexport default InputTest;\n","import React, { useState } from 'react';\nimport { getLanguage } from '../../utils/getLanguage'\nimport * as S from './styles';\nimport Select from '../Select'\nimport InputTest from './components/InputTest'\nimport { PiWaveformBold  } from 'react-icons/pi';\nimport { FaList } from 'react-icons/fa';\nimport EmptyState from '../EmptyState';\n// import IconLeia from '../../assets/icon_leia.svg';\nimport { MdPerson2 } from \"react-icons/md\";\n\nexport const TestArea = () => {\n  const t = getLanguage('pt-br')\n  const [results, setResults] = useState({ \"message\": \"\" });\n  const [search, setSearch] = useState('');\n  const tags = [\n      \"pae\",\n      \"boteria\",\n      \"vr\",\n      \"code7\",\n      \"vidalink\"\n    ]\n  const personas = [\n    {\n      \"description\": \"Seriedade e profundidade ao explicar. Usa linguagem acadêmica e é preciso em temas específicos da área.\",\n      \"name\": \"College professor\"\n    },\n    {\n      \"description\": \"Abordagem descontraída, direto ao ponto. Linguagem simples, exemplos práticos para facilitar compreensão rápida.\",\n      \"name\": \"School Teacher\"\n    },\n    {\n      \"description\": \"Estilo descontraído, senso de humor único. Piadas e trocadilhos até em assuntos sérios.\",\n      \"name\": \"Humorist\"\n    },\n    {\n      \"description\": \"Postura centrada, comunicação direta e focada em resultados. Prioriza eficiência e precisão.\",\n      \"name\": \"Military\"\n    },\n    {\n      \"description\": \"Estilo único e carismático. Usa linguagem moderna, compartilha informações cativantes de forma descontraída.\",\n      \"name\": \"Digital Influencer\"\n    }\n  ]\n\n  const optionsPersona = personas.map(persona => {\n    return { label: persona.name, value: persona.description }\n  })\n\n  const optionsPresset = tags.map(tag => {\n    return { label: tag, value: tag }\n  })\n\n  const handleSelect = (value: string | number) => {\n    console.log(value);\n  };\n\n  const handleSearch = (value: string) => {\n    setSearch(value);\n  };\n\n  const handleRecordAudio = () => {\n    console.log('Iniciando gravação de áudio...');\n  };\n\n  const handleTest = () => {\n    console.log('Pesquisa: ', search)\n    setResults({\n      \"message\": \"Você precisa seguir algumas etapas importantes para ter um chatbot perfeito. Primeiro, defina claramente o objetivo do seu chatbot. Em seguida, crie uma mensagem de saudação cativante para atrair a atenção dos usuários. Não se esqueça de pedir feedbacks para melhorar constantemente o desempenho do seu chatbot. Além disso, construa um fluxo de conversa simples e utilize respostas curtas para manter a interação rápida e eficiente. Também é importante incorporar inteligência artificial para tornar o seu chatbot especialista em determinado assunto. Teste o seu bot antes de lançá-lo e personalize-o de acordo com as necessidades dos usuários. Por fim, direcione os usuários para um atendimento humano quando necessário. Seguindo essas dicas, você estará no caminho certo para ter um chatbot perfeito!\"\n    })\n  };\n\n  return (\n    <S.Container>\n        <S.Header>\n          <div className='infos'>\n            <h2>{t.test}</h2>\n            <p>{t.testArea.description}</p>\n          </div>\n        </S.Header>\n        <S.Inputs>\n          <InputTest placeholder={t.testArea.typeSentence} onChange={handleSearch} onRecordAudio={handleRecordAudio} />\n          <Select placeholder={t.testArea.selectPersona} options={optionsPersona} onSelect={handleSelect} />\n          <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={handleSelect} />\n          <button onClick={handleTest}><PiWaveformBold /> {t.buttons.test}</button>\n        </S.Inputs>\n        {\n          results.message === '' ? (\n            <EmptyState\n              icon={<FaList></FaList>}\n              title={t.testArea.emptyState.title}\n              description={t.testArea.emptyState.description}\n              activeButton={false}\n            />\n          ) : <S.Result>\n                <div className='icon'>\n                  <MdPerson2 />\n                </div>\n                <div className='text'>{results.message}</div>\n              </S.Result>\n        }\n    </S.Container>\n  );\n};","import React, { useMemo, Suspense } from 'react';\n\nimport { Route, useLocation, useRouteMatch, useHistory, Switch as SwitchRoute } from 'react-router-dom';\n\nimport type { Props } from './index';\nimport { Tab, Tabs } from './components/Tabs'\n\nimport { getLanguage } from './utils/getLanguage'\n\nimport { FileArea } from './components/FileArea';\nimport { TestArea } from './components/TestArea';\n\nexport const Leia = (props: Props) => {\n  const match = useRouteMatch();\n  const { pathname } = useLocation();\n  const history = useHistory();\n\n  const t = getLanguage(props.language)\n\n  const activeTab = useMemo(() => {\n    return pathname.split('/')[5] || 'files';\n  }, [pathname]);\n\n  return (\n    <>\n      <Tabs\n        value={activeTab}\n        onChange={(value) => history.push(`${match.url}/${value}`)}\n      >\n        <Tab value=\"files\">{t.files}</Tab>\n        <Tab value=\"test\">{t.test}</Tab>\n      </Tabs>\n      <Suspense fallback={props.loading}>\n        <SwitchRoute>\n          <Route path={`${match.path}`} exact component={FileArea} />\n          <Route path={`${match.path}/files`} component={FileArea} />\n          <Route path={`${match.path}/test`} component={TestArea} />\n        </SwitchRoute>\n      </Suspense>\n    </>\n  );\n};","import type { PropsWithChildren, ReactElement } from 'react';\nimport React from 'react';\nimport { Leia } from './Leia';\n\nexport type Props = PropsWithChildren<{\n  id: string;\n  activeTab: string;\n  language: \"en\" | \"pt-br\" | \"es\";\n  loading: ReactElement\n}>;\n\nexport function Code7(props: Props) {\n  return <Leia {...props} />;\n}"],"names":["TabsPane","styled","ul","_templateObject","_taggedTemplateLiteralLoose","Tab","li","_templateObject2","_ref","active","children","rest","_objectWithoutPropertiesLoose","_excluded","React","S","className","cc","propTypes","PropTypes","oneOfType","string","element","node","isRequired","onChange","func","value","bool","defaultProps","Tabs","_ref2","childrenProp","_excluded2","Children","map","child","_child$props2","isValidElement","Array","isArray","_child$props","props","cloneElement","_child$props3","onClick","_child$props4","number","defaultLanguage","files","test","fileArea","description","fileName","presset","actions","search","fileUpload","emptyState","title","modal","descriptionUpload","chooseFile","uploadFile","buttons","cancel","send","delete","testArea","typeSentence","selectPersona","selectPresset","getLanguage","language","en","pt-br","_extends","es","Container","div","Header","TableWrapper","Table","table","TableLoadingWrapper","_templateObject3","SpinnerWrapper","span","color","Spinner","_ref$size","size","_ref$color","forwardRef","ref","_ref$isLoading","isLoading","_ref$className","oneOf","SearchInput","setFiles","initialFiles","style","position","width","type","e","searchTerm","target","trim","normalizedSearchTerm","unorm","nfkd","toLowerCase","newFiles","filter","file","name","includes","searchName","placeholder","paddingLeft","borderRadius","border","height","top","left","pointerEvents","FaSearch","FullScreen","isOpen","isFixed","_ref3","zIndex","Modal","_ref4","maxWidth","ModalContainer","_ref5","maxHeight","ModalHeader","header","_templateObject4","ModalTitle","_templateObject5","ModalButtonClose","button","_templateObject6","onClose","contentStyle","modalRef","useRef","handleKeyUp","useCallback","keys","27","preventDefault","window","removeEventListener","keyCode","handleOutsideClick","current","parentNode","document","useEffect","addEventListener","String","MdClose","objectOf","any","hasBorder","backgroundColor","backgroundIcon","EmptyState","icon","activeButton","iconButton","descriptionButton","widthButton","Select","options","onSelect","_useState","useState","setSelectedValue","event","selectedOption","disabled","hidden","option","key","label","FileArea","_useState2","setInitialFiles","pathname","useLocation","_useState3","setModal","id","split","t","tags","console","log","optionsPresset","tag","handleOpenModal","Search","FaUpload","length","FaList","FaPlus","object","dangerouslySetInnerHTML","__html","join","htmlFor","Inputs","Result","StyledInput","input","RecordAudioButton","StyledMicrophoneIcon","FaMicrophone","InputTest","onRecordAudio","TestArea","message","results","setResults","setSearch","optionsPersona","persona","handleSelect","PiWaveformBold","MdPerson2","Leia","match","useRouteMatch","history","useHistory","activeTab","useMemo","push","url","Suspense","fallback","loading","SwitchRoute","Route","path","exact","component"],"mappings":"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"}

package/dist/code7-leia.esm.js

@@ -1,12 +1,12 @@
-import React, { forwardRef, useState, useEffect, useMemo, Suspense } from 'react';
+import React, { forwardRef, useRef, useCallback, useEffect, useState, useMemo, Suspense } from 'react';
 import { useLocation, useRouteMatch, useHistory, Switch, Route } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import cc from 'classcat';
 import styled from 'styled-components';
 import { FaSearch, FaUpload, FaList, FaPlus, FaMicrophone } from 'react-icons/fa';
 import unorm from 'unorm';
+import { MdClose, MdPerson2 } from 'react-icons/md';
 import { PiWaveformBold } from 'react-icons/pi';
-import { MdPerson2 } from 'react-icons/md';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -119,7 +119,8 @@ var defaultLanguage = {
     },
     modal: {
       descriptionUpload: 'Drag and drop files here or',
-      chooseFile: 'Choose a file'
+      chooseFile: 'Choose a file',
+      uploadFile: 'Upload a file'
     }
   },
   buttons: {
@@ -156,7 +157,8 @@ var getLanguage = function getLanguage(language) {
         }),
         modal: _extends({}, defaultLanguage.fileArea.modal, {
           descriptionUpload: 'Arraste e solte os arquivos aqui ou',
-          chooseFile: 'Escolha um arquivo'
+          chooseFile: 'Escolha um arquivo',
+          uploadFile: 'Enviar um arquivo'
         })
       }),
       buttons: _extends({}, defaultLanguage.buttons, {
@@ -305,8 +307,121 @@ var SearchInput = function SearchInput(_ref) {
   }, React.createElement(FaSearch, null)));
 };
 
-var _templateObject$4;
-var Container$1 = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 24px 0;\n  height: 193px;\n\n  background: ", ";\n  background-position: top, right, bottom, left;\n  background-repeat: repeat-x, repeat-y;\n  background-size: 40px 1px, 1px 40px;\n  background-color: ", ";\n\n  & .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > .icon {\n      background-color: ", ";\n      border-radius: 16px;\n      width: 145px;\n      height: 145px;\n\n      display: flex;\n      justify-content: center;\n\n      & svg {\n        width: 100%;\n        height: 70%;\n        margin: 20px;\n      }\n    }\n\n    & .description {\n      max-width: 600px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 8px 0 8px 24px;\n\n      .button-add {\n        cursor: pointer;\n      }\n\n      .start-icon {\n        display: flex;\n        align-items: center;\n      }\n    }\n  }\n"])), function (_ref) {
+var _templateObject$4, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6;
+var FullScreen = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: ", ";\n  cursor: ", ";\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  justify-content: center;\n  align-items: center;\n  z-index: ", ";\n  animation: fadeIn 380ms ease-in-out 1;\n  background-color: #2f3845b8;\n  backdrop-filter: blur(2px);\n\n  @keyframes fadeIn {\n    from {\n      background-color: #2f384521;\n    }\n    to {\n      background-color: #2f3845b8;\n    }\n  }\n"])), function (_ref) {
+  var isOpen = _ref.isOpen;
+  return isOpen === 1 ? 'flex' : 'none';
+}, function (_ref2) {
+  var isFixed = _ref2.isFixed;
+  return isFixed === 0 ? 'pointer' : 'default';
+}, function (_ref3) {
+  var zIndex = _ref3.zIndex;
+  return zIndex;
+});
+var Modal = /*#__PURE__*/styled.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #fff;\n  border-radius: 3px;\n  position: relative;\n  cursor: default;\n  width: 100%;\n  max-width: ", ";\n  animation: slideIn 350ms cubic-bezier(0.42, 0, 0.21, 1) 1;\n\n  @keyframes slideIn {\n    from {\n      transform: translateY(-120px);\n      opacity: 0;\n    }\n\n    20% {\n      opacity: 0;\n    }\n\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n"])), function (_ref4) {
+  var maxWidth = _ref4.maxWidth;
+  return maxWidth;
+});
+var ModalContainer = /*#__PURE__*/styled.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: auto;\n  max-height: ", ";\n"])), function (_ref5) {
+  var maxHeight = _ref5.maxHeight;
+  return maxHeight;
+});
+var ModalHeader = /*#__PURE__*/styled.header(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid #dadce3;\n  padding: var(--spacement-medium);\n"])));
+var ModalTitle = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 20px;\n  line-height: 150%;\n  letter-spacing: 0.0075em;\n  color: var(--neutral-4);\n"])));
+var ModalButtonClose = /*#__PURE__*/styled.button(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  outline: none;\n  cursor: pointer;\n\n  :hover {\n    opacity: 0.7;\n  }\n"])));
+
+var Modal$1 = function Modal$1(_ref) {
+  var isOpen = _ref.isOpen,
+    style = _ref.style,
+    maxWidth = _ref.maxWidth,
+    maxHeight = _ref.maxHeight,
+    className = _ref.className,
+    title = _ref.title,
+    children = _ref.children,
+    onClose = _ref.onClose,
+    contentStyle = _ref.contentStyle,
+    isFixed = _ref.isFixed,
+    zIndex = _ref.zIndex;
+  var modalRef = useRef(null);
+  var handleKeyUp = useCallback(function (e) {
+    var keys = {
+      // ESC Key
+      27: function _() {
+        e.preventDefault();
+        if (!isFixed && onClose) {
+          onClose();
+        }
+        window.removeEventListener('keyup', handleKeyUp, false);
+      }
+    };
+    if (keys[e.keyCode] && isOpen) {
+      keys[e.keyCode]();
+    }
+  }, [onClose, isOpen, isFixed]);
+  var handleOutsideClick = useCallback(function (e) {
+    if (modalRef.current && modalRef.current.parentNode === e.target) {
+      if (!isFixed && onClose) {
+        onClose();
+      }
+      document.removeEventListener('click', handleOutsideClick, false);
+    }
+  }, [onClose, isFixed]);
+  useEffect(function () {
+    window.addEventListener('keyup', handleKeyUp, false);
+    document.addEventListener('click', handleOutsideClick, false);
+    return function () {
+      window.removeEventListener('keyup', handleKeyUp, false);
+      document.removeEventListener('click', handleOutsideClick, false);
+    };
+  }, [handleKeyUp, handleOutsideClick]);
+  return React.createElement(FullScreen, {
+    isFixed: isFixed ? 1 : 0,
+    isOpen: isOpen ? 1 : 0,
+    zIndex: zIndex != null ? zIndex : 0
+  }, React.createElement(Modal, {
+    ref: modalRef,
+    style: style,
+    maxWidth: maxWidth,
+    className: className
+  }, React.createElement(ModalContainer, {
+    className: "styleOverlay",
+    maxHeight: maxHeight,
+    style: contentStyle
+  }, React.createElement(ModalHeader, null, React.createElement(ModalTitle, null, String(title)), React.createElement(ModalButtonClose, {
+    type: "button",
+    onClick: onClose
+  }, React.createElement(MdClose, {
+    color: "#5A5D68",
+    size: 16
+  }))), children)));
+};
+Modal$1.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  title: /*#__PURE__*/PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.func]),
+  children: PropTypes.node.isRequired,
+  onClose: PropTypes.func,
+  style: /*#__PURE__*/PropTypes.objectOf(PropTypes.any),
+  contentStyle: /*#__PURE__*/PropTypes.objectOf(PropTypes.any),
+  className: PropTypes.string,
+  maxWidth: PropTypes.string,
+  maxHeight: PropTypes.string,
+  isFixed: PropTypes.bool,
+  zIndex: PropTypes.number
+};
+Modal$1.defaultProps = {
+  title: '',
+  style: {},
+  contentStyle: {},
+  className: '',
+  maxWidth: '360px',
+  maxHeight: 'max-content',
+  isFixed: false,
+  onClose: function onClose() {},
+  zIndex: 9999
+};
+
+var _templateObject$5;
+var Container$1 = /*#__PURE__*/styled.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 24px 0;\n  height: 193px;\n\n  background: ", ";\n  background-position: top, right, bottom, left;\n  background-repeat: repeat-x, repeat-y;\n  background-size: 40px 1px, 1px 40px;\n  background-color: ", ";\n\n  & .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > .icon {\n      background-color: ", ";\n      border-radius: 16px;\n      width: 145px;\n      height: 145px;\n\n      display: flex;\n      justify-content: center;\n\n      & svg {\n        width: 100%;\n        height: 70%;\n        margin: 20px;\n      }\n    }\n\n    & .description {\n      max-width: 600px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 8px 0 8px 24px;\n\n      .button-add {\n        cursor: pointer;\n      }\n\n      .start-icon {\n        display: flex;\n        align-items: center;\n      }\n    }\n  }\n"])), function (_ref) {
   var hasBorder = _ref.hasBorder;
   return hasBorder && "linear-gradient(\n        to right,\n        #dadce3 50%,\n        rgba(255, 255, 255, 0) 0%\n      ),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(to right, #dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%)";
 }, function (_ref2) {
@@ -366,6 +481,36 @@ EmptyState.defaultProps = {
   hasBorder: true
 };
 
+var _templateObject$6;
+var Container$2 = /*#__PURE__*/styled.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 50%;\n  margin-right: 5px;\n  select {\n    padding: 12px;\n    border-radius: 4px;\n    border: 1px solid #979AA5;\n    width: 100%;\n    height: 40px;\n    \n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px #6690ff;\n    }\n\n    option {\n      background: white;\n      font-size: 14px;\n      color: #5a5d68;\n    }\n\n    option:checked, option:hover {\n      background: #6690ff;\n      font-size: 14px;\n      color: white;\n    }\n  }\n"])));
+
+var Select = function Select(_ref) {
+  var options = _ref.options,
+    onSelect = _ref.onSelect,
+    placeholder = _ref.placeholder;
+  var _useState = useState(''),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var handleSelectChange = function handleSelectChange(event) {
+    var selectedOption = event.target.value;
+    setSelectedValue(selectedOption);
+    onSelect(selectedOption);
+  };
+  return React.createElement(Container$2, null, React.createElement("select", {
+    value: selectedValue,
+    onChange: handleSelectChange
+  }, React.createElement("option", {
+    value: "",
+    disabled: true,
+    hidden: true
+  }, placeholder), options.map(function (option) {
+    return React.createElement("option", {
+      key: option.value,
+      value: option.value
+    }, option.label);
+  })));
+};
+
 var FileArea = function FileArea() {
   var _useState = useState([]),
     files = _useState[0],
@@ -375,8 +520,12 @@ var FileArea = function FileArea() {
     setInitialFiles = _useState2[1];
   var _useLocation = useLocation(),
     pathname = _useLocation.pathname;
+  var _useState3 = useState(false),
+    modal = _useState3[0],
+    setModal = _useState3[1];
   var id = pathname.split('/')[4];
   var t = getLanguage('pt-br');
+  var tags = ["pae", "boteria", "vr", "code7", "vidalink"];
   useEffect(function () {
     setFiles([{
       "name": "Documentação conceitual Code7_v3",
@@ -408,6 +557,12 @@ var FileArea = function FileArea() {
   useEffect(function () {
     console.log('files, id, t: ', files, id, t);
   }, [files]);
+  var optionsPresset = tags.map(function (tag) {
+    return {
+      label: tag,
+      value: tag
+    };
+  });
   var presset = function presset(tags) {
     var tagsSplit = tags.split(',');
     var html = '';
@@ -416,6 +571,12 @@ var FileArea = function FileArea() {
     }).join('');
     return html;
   };
+  var handleOpenModal = function handleOpenModal() {
+    setModal(!modal);
+  };
+  var handleSelect = function handleSelect(value) {
+    console.log(value);
+  };
   var renderFiles = function renderFiles() {
     return React.createElement(Container, null, React.createElement(Header, null, React.createElement("div", {
       className: 'infos'
@@ -425,7 +586,9 @@ var FileArea = function FileArea() {
       placeholder: t.fileArea.search,
       setFiles: setFiles,
       initialFiles: initialFiles
-    }), React.createElement("button", null, React.createElement(FaUpload, null), " ", t.fileArea.fileUpload))), files.length === 0 ? React.createElement(EmptyState, {
+    }), React.createElement("button", {
+      onClick: handleOpenModal
+    }, React.createElement(FaUpload, null), " ", t.fileArea.fileUpload))), files.length === 0 ? React.createElement(EmptyState, {
       icon: React.createElement(FaList, null),
       title: t.fileArea.emptyState.title,
       description: t.fileArea.emptyState.description,
@@ -455,52 +618,38 @@ var FileArea = function FileArea() {
       }, React.createElement("button", {
         className: 'buttonDelete'
       }, t.buttons["delete"]))));
+    }))), React.createElement(Modal$1, {
+      isOpen: modal,
+      maxWidth: "1100px",
+      maxHeight: "max-content",
+      onClose: handleOpenModal,
+      title: t.fileArea.modal.uploadFile
+    }, React.createElement("div", null, React.createElement("input", {
+      type: "file",
+      id: "file",
+      name: "file"
+    }), React.createElement("label", {
+      htmlFor: "file"
+    }, t.fileArea.modal.chooseFile), React.createElement(Select, {
+      placeholder: t.testArea.selectPresset,
+      options: optionsPresset,
+      onSelect: handleSelect
     }))));
   };
   return React.createElement(Container, null, renderFiles());
 };
 
-var _templateObject$5, _templateObject2$3, _templateObject3$1, _templateObject4;
-var Container$2 = /*#__PURE__*/styled.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\n"])));
-var Header$1 = /*#__PURE__*/styled.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n"])));
-var Inputs = /*#__PURE__*/styled.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n\n  button {\n    background: #102693;\n    padding: 10px 20px;\n    color: white;\n    border-radius: 4px;\n    width: 190px;\n    height: 40px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    svg {\n      width: 23px;\n      height: 23px;\n    }\n  }\n"])));
-var Result = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: left;\n  background: #F3F5F9;\n  padding: 15px;\n  border-radius: 5px;\n  margin-top: 15px;\n\n  .text{\n    margin-left: 5px;\n    font-size: 14px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 5px;\n\n    svg {\n      width: 35px;\n      height: 35px;\n    }\n  }\n\n"])));
-
-var _templateObject$6;
-var Container$3 = /*#__PURE__*/styled.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 50%;\n  margin-right: 5px;\n  select {\n    padding: 12px;\n    border-radius: 4px;\n    border: 1px solid #979AA5;\n    width: 100%;\n    height: 40px;\n    \n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px #6690ff;\n    }\n\n    option {\n      background: white;\n      font-size: 14px;\n      color: #5a5d68;\n    }\n\n    option:checked, option:hover {\n      background: #6690ff;\n      font-size: 14px;\n      color: white;\n    }\n  }\n"])));
-
-var Select = function Select(_ref) {
-  var options = _ref.options,
-    onSelect = _ref.onSelect,
-    placeholder = _ref.placeholder;
-  var _useState = useState(''),
-    selectedValue = _useState[0],
-    setSelectedValue = _useState[1];
-  var handleSelectChange = function handleSelectChange(event) {
-    var selectedOption = event.target.value;
-    setSelectedValue(selectedOption);
-    onSelect(selectedOption);
-  };
-  return React.createElement(Container$3, null, React.createElement("select", {
-    value: selectedValue,
-    onChange: handleSelectChange
-  }, React.createElement("option", {
-    value: "",
-    disabled: true,
-    hidden: true
-  }, placeholder), options.map(function (option) {
-    return React.createElement("option", {
-      key: option.value,
-      value: option.value
-    }, option.label);
-  })));
-};
-
 var _templateObject$7, _templateObject2$4, _templateObject3$2, _templateObject4$1;
-var Container$4 = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  margin-right: 5px;\n"])));
-var StyledInput = /*#__PURE__*/styled.input(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 10px;\n  padding-right: 40px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  height: 40px;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px #6690ff;\n  }\n"])));
-var RecordAudioButton = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n"])));
-var StyledMicrophoneIcon = /*#__PURE__*/styled(FaMicrophone)(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
+var Container$3 = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\n"])));
+var Header$1 = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n"])));
+var Inputs = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n\n  button {\n    background: #102693;\n    padding: 10px 20px;\n    color: white;\n    border-radius: 4px;\n    width: 190px;\n    height: 40px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    svg {\n      width: 23px;\n      height: 23px;\n    }\n  }\n"])));
+var Result = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: left;\n  background: #F3F5F9;\n  padding: 15px;\n  border-radius: 5px;\n  margin-top: 15px;\n\n  .text{\n    margin-left: 5px;\n    font-size: 14px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 5px;\n\n    svg {\n      width: 35px;\n      height: 35px;\n    }\n  }\n\n"])));
+
+var _templateObject$8, _templateObject2$5, _templateObject3$3, _templateObject4$2;
+var Container$4 = /*#__PURE__*/styled.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  margin-right: 5px;\n"])));
+var StyledInput = /*#__PURE__*/styled.input(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 10px;\n  padding-right: 40px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  height: 40px;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px #6690ff;\n  }\n"])));
+var RecordAudioButton = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n"])));
+var StyledMicrophoneIcon = /*#__PURE__*/styled(FaMicrophone)(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
 
 var InputTest = function InputTest(_ref) {
   var placeholder = _ref.placeholder,
@@ -571,7 +720,7 @@ var TestArea = function TestArea() {
       "message": "Você precisa seguir algumas etapas importantes para ter um chatbot perfeito. Primeiro, defina claramente o objetivo do seu chatbot. Em seguida, crie uma mensagem de saudação cativante para atrair a atenção dos usuários. Não se esqueça de pedir feedbacks para melhorar constantemente o desempenho do seu chatbot. Além disso, construa um fluxo de conversa simples e utilize respostas curtas para manter a interação rápida e eficiente. Também é importante incorporar inteligência artificial para tornar o seu chatbot especialista em determinado assunto. Teste o seu bot antes de lançá-lo e personalize-o de acordo com as necessidades dos usuários. Por fim, direcione os usuários para um atendimento humano quando necessário. Seguindo essas dicas, você estará no caminho certo para ter um chatbot perfeito!"
     });
   };
-  return React.createElement(Container$2, null, React.createElement(Header$1, null, React.createElement("div", {
+  return React.createElement(Container$3, null, React.createElement(Header$1, null, React.createElement("div", {
     className: 'infos'
   }, React.createElement("h2", null, t.test), React.createElement("p", null, t.testArea.description))), React.createElement(Inputs, null, React.createElement(InputTest, {
     placeholder: t.testArea.typeSentence,