code7-leia 0.1.96 → 0.1.98

package/src/components/FileArea/index.tsx

@@ -17,10 +17,10 @@ import EmptyState from '../EmptyState';
 import Select from '../Select'
 import AreaUpload from './components/AreaUpload';
 import { SharedPropsProvider, useSharedProps } from '../../contexts/SharedPropsProvider';
-import { deleteFilesAction, getFilesAction } from '../../store/modules/Files/Files.actions';
+import { deleteFilesAction, getFilesAction } from '../../store/modules/actions';
 
 export const FileArea = () => {
-  const { id, language, propTags } = useSharedProps();
+  const { id, language, propTags, personas } = useSharedProps();
   const [files, setFiles] = useState<FileData[]>([]);
   const [initialFiles, setInitialFiles] = useState<FileData[]>([]);
   const [uploadFile, setUploadFile] = useState<{ content: ArrayBuffer | string; properties: File }>();
@@ -183,7 +183,7 @@ export const FileArea = () => {
   }
 
   return (
-    <SharedPropsProvider id={id} language={language} propTags={{ tags: [] }}>
+    <SharedPropsProvider id={id} language={language} propTags={{ tags: [] }} personas={personas}>
       <S.Container>
         {renderFiles()}
       </S.Container>

package/src/components/Select/index.tsx

@@ -8,7 +8,7 @@ interface SelectOption {
 
 interface SelectProps {
   options: SelectOption[];
-  onSelect: (value: string | number) => void;
+  onSelect: (value: string) => void;
   placeholder?: string;
 }
 

package/src/components/TestArea/index.tsx

@@ -6,42 +6,20 @@ 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 { SharedPropsProvider, useSharedProps } from '../../contexts/SharedPropsProvider';
 import { MdPerson2 } from "react-icons/md";
+import { useDispatch, useSelector } from 'react-redux';
+import { testAction } from 'src/store/modules/actions';
 
 export const TestArea = () => {
-  const t = getLanguage('pt-br')
-  const [results, setResults] = useState({ "message": "" });
+  const { id, language, personas, propTags } = useSharedProps();
+  const t = getLanguage(language)
+  const results = useSelector((state: any) => state.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 [profile, setProfile] = useState('');
+  const [presset, setPresset] = useState('');
+  const dispatch = useDispatch();
+  const tags = propTags ? propTags.tags : [];
 
   const optionsPersona = personas.map(persona => {
     return { label: persona.name, value: persona.description }
@@ -51,12 +29,15 @@ export const TestArea = () => {
     return { label: tag, value: tag }
   })
 
-  const handleSelect = (value: string | number) => {
-    console.log(value);
+  const handleSelectPersona = (value: string) => {
+    setProfile(value);
+  };
+
+  const handleSelectPresset = (value: string) => {
+    setPresset(value);
   };
 
   const handleSearch = (value: string) => {
-    console.log(search)
     setSearch(value);
   };
 
@@ -65,40 +46,40 @@ export const TestArea = () => {
   };
 
   const handleTest = () => {
-    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!"
-    })
+    dispatch(testAction(search, profile, presset, id))
   };
 
   return (
-    <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>
+    <SharedPropsProvider id={id} language={language} propTags={{ tags: [] }} personas={personas}>
+      <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={handleSelectPersona} />
+            <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={handleSelectPresset} />
+            <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>
+    </SharedPropsProvider>
   );
 };

package/src/contexts/SharedPropsProvider.tsx

@@ -5,6 +5,7 @@ interface Props {
   id: string;
   language: "en" | "pt-br" | "es";
   propTags: { tags: [] }
+  personas: [{ name: string, description: string }]
   children?: React.ReactNode;
 }
 
@@ -25,6 +26,7 @@ export const useSharedProps = () => {
 export const SharedPropsProvider: React.FC<Props> = ({ children, ...props }) => {
   const { id } = props;
   const [tags, setTags] = useState<any>(null);
+  const [personas, setPersonas] = useState<any>(null);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -41,12 +43,28 @@ export const SharedPropsProvider: React.FC<Props> = ({ children, ...props }) =>
       }
     };
 
+    const personas = async () => {
+      try {
+        const { data } = await api.get(`/personas`);
+
+        if (data) {
+          setPersonas(data);
+        } else {
+          console.error('Erro ao fazer a solicitação');
+        }
+      } catch (error) {
+        console.error('Erro ao fazer a solicitação:', error);
+      }
+    };
+
     fetchData();
+    personas();
   }, [id]);
 
   const sharedProps = {
     ...props,
     propTags: tags,
+    personas,
   };
 
   return (

package/src/store/index.ts

@@ -1,13 +1,13 @@
 import { createStore, applyMiddleware } from 'redux';
 import createSagaMiddleware from 'redux-saga';
-import FilesReducer from './modules/Files/Files.reducer';
-import FilesSagas from './modules/Files/Files.sagas';
+import Reducer from './modules/reducer';
+import Sagas from './modules/sagas';
 
 const sagaMiddleware = createSagaMiddleware();
 
-const store = createStore(FilesReducer, applyMiddleware(sagaMiddleware));
+const store = createStore(Reducer, applyMiddleware(sagaMiddleware));
 
-sagaMiddleware.run(FilesSagas);
+sagaMiddleware.run(Sagas);
 
 export default store;
 

package/src/store/modules/{Files/Files.actions.ts → actions.ts}

@@ -1,4 +1,4 @@
-import types from './Files.types'
+import types from './types'
 
 export const getFilesAction = (id: string) => {
     return {
@@ -26,4 +26,18 @@ export const deleteFilesActionSuccess = ({ files }: any) => {
         type: types.DELETE_FILES_SUCCESS,
         payload: { files }
     }
+}
+
+export const testAction = (question: string, profile: string, presset: string, files_directory: string) => {
+    return {
+        type: types.TEST_REQUEST,
+        payload: { question, profile, presset, files_directory }
+    }
+}
+
+export const testActionSuccess = ({ message }: any) => {
+    return {
+        type: types.TEST_SUCCESS,
+        payload: { message }
+    }
 }

package/src/store/modules/{Files/Files.reducer.ts → reducer.ts}

@@ -1,8 +1,9 @@
 import { produce } from 'immer';
-import types from './Files.types'
+import types from './types'
 
 const INITIAL_STATE = {
-    files: []
+    files: [],
+    message: ''
 }
 
 export default function filesReducer(state = INITIAL_STATE, action: any) {
@@ -14,6 +15,9 @@ export default function filesReducer(state = INITIAL_STATE, action: any) {
             case types.DELETE_FILES_SUCCESS:
                 draft.files = action.payload.files;
                 break;
+            case types.TEST_SUCCESS:
+                draft.message = action.payload.message;
+                break;
             default:
                 return action.payload;
         }

package/src/store/modules/{Files/Files.sagas.ts → sagas.ts}

@@ -1,7 +1,7 @@
 import { takeLatest, all, put, call } from 'redux-saga/effects';
-import api from '../../../service/Api'
-import Types from './Files.types'
-import { getFilesActionSuccess, deleteFilesActionSuccess } from './Files.actions'
+import api from '../../service/Api'
+import Types from './types'
+import { getFilesActionSuccess, deleteFilesActionSuccess, testActionSuccess } from './actions'
 
 export function* getFilesSaga(action: any) {
   try {
@@ -20,13 +20,24 @@ export function* deleteFilesSaga(action: any) {
     const { data } = yield call(api.get, `/files/${id}`);
     yield put(deleteFilesActionSuccess({ files: data.files }));
   } catch (error) {
-    console.log('-----------getFiles.error------------------->', error);
+    console.log('-----------deleteFilesSaga.error------------------->', error);
+  }
+}
+
+export function* testSaga(action: any) {
+  try {
+    const { question, profile, presset, files_directory } = action.payload
+    const { data } = yield call(api.post, `/ask`, { question, profile, presset, files_directory });
+    yield put(testActionSuccess({ message: data.message }));
+  } catch (error) {
+    console.log('-----------testSaga.error------------------->', error);
   }
 }
 
 export default function* filesSagas() {
   yield all([
     takeLatest(Types.GET_FILES_REQUEST, getFilesSaga),
-    takeLatest(Types.DELETE_FILES_REQUEST, deleteFilesSaga)
+    takeLatest(Types.DELETE_FILES_REQUEST, deleteFilesSaga),
+    takeLatest(Types.TEST_REQUEST, testSaga)
   ]);
 }

package/src/store/modules/{Files/Files.types.ts → types.ts}

@@ -2,7 +2,9 @@ const Types = {
   GET_FILES_REQUEST: '@files/GET_FILES_REQUEST',
   GET_FILES_SUCCESS: '@files/GET_FILES_SUCCESS',
   DELETE_FILES_REQUEST: '@files/DELETE_FILES_REQUEST',
-  DELETE_FILES_SUCCESS: '@files/DELETE_FILES_SUCCESS'
+  DELETE_FILES_SUCCESS: '@files/DELETE_FILES_SUCCESS',
+  TEST_REQUEST: '@files/TEST_REQUEST',
+  TEST_SUCCESS: '@files/TEST_SUCCESS'
 };
 
 export default Types;