code7-leia 0.1.31 → 0.1.40

package/src/components/TestArea/index.tsx

@@ -1,10 +1,104 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { getLanguage } from '../../utils/getLanguage'
+import * as S from './styles';
+import Select from './components/Select'
+import InputTest from './components/InputTest'
+import { PiWaveformBold  } from 'react-icons/pi';
+import { FaList } from 'react-icons/fa';
+import EmptyState from '../EmptyState';
+// import IconLeia from '../../assets/icon_leia.svg';
+import { MdPerson2 } from "react-icons/md";
 
 export const TestArea = () => {
+  const t = getLanguage('pt-br')
+  const [results, setResults] = useState({ "message": "" });
+  const [search, setSearch] = useState('');
+  const tags = [
+      "pae",
+      "boteria",
+      "vr",
+      "code7",
+      "vidalink"
+    ]
+  const personas = [
+    {
+      "description": "Seriedade e profundidade ao explicar. Usa linguagem acadêmica e é preciso em temas específicos da área.",
+      "name": "College professor"
+    },
+    {
+      "description": "Abordagem descontraída, direto ao ponto. Linguagem simples, exemplos práticos para facilitar compreensão rápida.",
+      "name": "School Teacher"
+    },
+    {
+      "description": "Estilo descontraído, senso de humor único. Piadas e trocadilhos até em assuntos sérios.",
+      "name": "Humorist"
+    },
+    {
+      "description": "Postura centrada, comunicação direta e focada em resultados. Prioriza eficiência e precisão.",
+      "name": "Military"
+    },
+    {
+      "description": "Estilo único e carismático. Usa linguagem moderna, compartilha informações cativantes de forma descontraída.",
+      "name": "Digital Influencer"
+    }
+  ]
+
+  const optionsPersona = personas.map(persona => {
+    return { label: persona.name, value: persona.description }
+  })
+
+  const optionsPresset = tags.map(tag => {
+    return { label: tag, value: tag }
+  })
+
+  const handleSelect = (value: string | number) => {
+    console.log(value);
+  };
+
+  const handleSearch = (value: string) => {
+    setSearch(value);
+  };
+
+  const handleRecordAudio = () => {
+    console.log('Iniciando gravação de áudio...');
+  };
+
+  const handleTest = () => {
+    console.log('Pesquisa: ', search)
+    setResults({
+      "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 (
-    <div>
-      <p>Teste Area</p>
-      
-    </div>
+    <S.Container>
+        <S.Header>
+          <div className='infos'>
+            <h2>{t.test}</h2>
+            <p>{t.testArea.description}</p>
+          </div>
+        </S.Header>
+        <S.Inputs>
+          <InputTest placeholder={t.testArea.typeSentence} onChange={handleSearch} onRecordAudio={handleRecordAudio} />
+          <Select placeholder={t.testArea.selectPersona} options={optionsPersona} onSelect={handleSelect} />
+          <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={handleSelect} />
+          <button onClick={handleTest}><PiWaveformBold /> {t.buttons.test}</button>
+        </S.Inputs>
+        {
+          results.message === '' ? (
+            <EmptyState
+              icon={<FaList></FaList>}
+              title={t.testArea.emptyState.title}
+              description={t.testArea.emptyState.description}
+              activeButton={false}
+            />
+          ) : <S.Result>
+                <div className='icon'>
+                  <MdPerson2 />
+                </div>
+                <div className='text'>{results.message}</div>
+              </S.Result>
+        }
+    </S.Container>
   );
 };

package/src/components/TestArea/styles.tsx

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+
+`;
+
+export const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  .infos {
+    display: flex;
+    flex-direction: column;
+    padding: 14px 0;
+
+    h2 {
+      font-size: 20px
+    }
+
+    p {
+      font-size: 14px
+    }
+  }
+`
+
+export const Inputs = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  button {
+    background: #102693;
+    padding: 10px 20px;
+    color: white;
+    border-radius: 4px;
+  }
+`
+
+export const Result = styled.div`
+  display: flex;
+  justify-content: left;
+  background: #DADCE3;
+  margin: 5px;
+
+  .text{
+    margin-left: 5px;
+  }
+
+`

package/src/types/image.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}

package/src/assets/icon_search.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.75 14.0312L11.875 10.1562C12.5625 9.09375 13 7.84375 13 6.5C13 2.9375 10.0625 0 6.5 0C2.90625 0 0 2.9375 0 6.5C0 10.0938 2.90625 13 6.5 13C7.8125 13 9.0625 12.5938 10.125 11.9062L14 15.7812C14.2812 16.0938 14.75 16.0938 15.0625 15.7812L15.75 15.0938C16.0625 14.7812 16.0625 14.3125 15.75 14.0312ZM2.5 6.5C2.5 4.3125 4.28125 2.5 6.5 2.5C8.6875 2.5 10.5 4.3125 10.5 6.5C10.5 8.71875 8.6875 10.5 6.5 10.5C4.28125 10.5 2.5 8.71875 2.5 6.5Z" fill="#5A5D68"/>
-</svg>