code7-leia 1.0.10 → 1.0.13

package/src/components/TestArea/components/TextArea/styles.tsx

@@ -0,0 +1,173 @@
+import styled from 'styled-components';
+
+type ContainerProps = {
+  marginBottom?: string;
+};
+
+export const Container = styled.div<ContainerProps>`
+  display: flex;
+  flex-flow: column;
+  margin-bottom: ${({ marginBottom }) => marginBottom};
+  max-width: 100%;
+`;
+
+export const InputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-right: 5px;
+  width: 725px;
+  max-width: 100%;
+
+  .icon {
+    position: absolute;
+    color: #5a5d68;
+
+    &.start-icon {
+      left: 12px;
+    }
+    &.end-icon {
+      right: 12px;
+    }
+  }
+
+  & .pass-view {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    padding: 14px;
+    font-size: 1rem;
+    color: #5a5d68;
+  }
+`;
+
+export const LabelWrapper = styled.label`
+  margin-bottom: 8px;
+
+  .label {
+    display: block;
+    color: #5a5d68;
+
+    font-style: normal;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 114%;
+    letter-spacing: -0.02em;
+  }
+
+  .description {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 0.625rem;
+    line-height: 120%;
+    color: #5a5d68;
+    display: block;
+  }
+`;
+
+export const CustomTextArea = styled.textarea`
+  font-family: 'Monospace', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  text-align: left;
+  letter-spacing: -0.02em;
+  resize: vertical;
+  padding: 8px 12px;
+
+  border-radius: 4px;
+  border: 1px solid #979aa5;
+  color: #5a5d68 !important;
+  width: 100%;
+
+  background: #ffffff;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
+    border 0.2s ease-in-out;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px #6690ff;
+  }
+
+  &:hover {
+    border: 1px solid #102693;
+  }
+  &:active {
+    border: 1px solid #102693;
+  }
+  &:disabled {
+    border: 1px solid #dadce3;
+    background: #f3f5f9;
+    color: #dadce3;
+  }
+
+  &.small {
+    height: 32px;
+  }
+
+  &.medium {
+    height: 120px;
+  }
+
+  &.large {
+    height: 48px;
+    font-size: 1rem;
+  }
+
+  &.success {
+    background: #e3f8cc;
+    border: 1px solid #19660a;
+    color: #19660a;
+  }
+
+  &.danger {
+    background: #fae0d2;
+    border: 1px solid #871821;
+    color: #871821;
+  }
+
+  &.error {
+    background: #fae0d2;
+    border: 1px solid #871821;
+    color: #871821;
+  }
+
+  &.has-start-icon {
+    padding-left: 40px;
+  }
+  &.has-end-icon {
+    padding-right: 40px;
+  }
+`;
+
+export const Helper = styled.div`
+  &.helper {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 0.625rem;
+    line-height: 120%;
+    color: #5a5d68;
+    display: block;
+    margin-top: 4px;
+
+    &.success {
+      color: #19660a;
+    }
+
+    &.danger {
+      color: #871821;
+    }
+  }
+`;
+
+export const Error = styled.div`
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.625rem;
+  line-height: 120%;
+  display: block;
+  margin-top: 4px;
+  color: #871821;
+`;

package/src/components/TestArea/index.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { getLanguage } from '../../utils/getLanguage'
+import * as S from './styles';
+import Select from '../Select'
+import InputTest from './components/InputTest'
+import TextArea from './components/TextArea'
+import { PiWaveformBold  } from 'react-icons/pi';
+import { FaList } from 'react-icons/fa';
+import EmptyState from '../EmptyState';
+import { useLeia } from '../../contexts/LeiaProvider';
+import { MdPerson2 } from "react-icons/md";
+import { useDispatch, useSelector } from 'react-redux';
+import { testAction } from '../../store/modules/actions';
+
+export const TestArea = () => {
+  const { id, language, personas, propTags, token, env, readonly } = useLeia();
+  const t = getLanguage(language)
+  const results = useSelector((state: any) => state.message);
+  const isloading = useSelector((state: any) => state.isloading);
+  const [search, setSearch] = useState('');
+  const [prompt, setPrompt] = useState('');
+  const [profile, setProfile] = useState('');
+  const [presset, setPresset] = useState('');
+  const dispatch = useDispatch();
+  const tags = propTags ? propTags.tags : [];
+
+
+  const optionsPersona = personas && personas.map(persona => {
+    return { label: persona.name, value: persona.name }
+  })
+
+  const optionsPresset = tags.map(tag => {
+    return { label: tag, value: tag }
+  })
+
+  const handleSelectPersona = (value: string) => {
+    setProfile(value);
+  };
+
+  const handleSelectPresset = (value: string) => {
+    setPresset(value);
+  };
+
+  const handleSearch = (value: string) => {
+    setSearch(value);
+  };
+
+  const handlePrompt = (value: string) => {
+    setPrompt(value);
+  };
+
+  const handleTest = () => {
+    dispatch(testAction(search, prompt, profile, presset, id, token, env))
+  };
+
+  const returnTest = () => {  
+    return (
+      <S.Container isloading={isloading}>
+        <div id='loading' />
+        <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} />
+          <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>
+        <S.Inputs>
+          {profile === "Custom" && <TextArea className="textarea-message" placeholder={t.testArea.typePrompt} value={prompt} onChange={(e) => { handlePrompt(e.target.value); }} />}
+        </S.Inputs>
+        {
+          !results ? (
+            <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}</div>
+              </S.Result>
+        }
+      </S.Container>
+    )
+  }
+
+  return (
+    <S.Container>
+      {returnTest()}
+    </S.Container>
+  );
+};

package/src/components/TestArea/styles.tsx

@@ -0,0 +1,112 @@
+import styled, { css } from 'styled-components';
+
+interface ContainerProps {
+  isloading?: boolean;
+}
+
+
+export const Container = styled.div<ContainerProps>`
+  ${(props) =>
+    props.isloading &&
+    css`
+      #loading {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgb(151,154,165, 0.7);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+      }
+
+      #loading::after {
+        content: "";
+        border: 4px solid #f3f3f3; /* Cor do símbolo de carregamento */
+        border-top: 4px solid #5a5d68; /* Cor do símbolo de carregamento */
+        border-radius: 50%;
+        width: 13px;
+        height: 13px;
+        animation: spin 1s linear infinite;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `}
+
+`;
+
+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: inline-flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  width: 725px;
+  margin-right: 500px;
+
+  button {
+    background: #102693;
+    padding: 10px 20px;
+    color: white;
+    border-radius: 4px;
+    width: 190px;
+    height: 45px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    svg {
+      width: 23px;
+      height: 23px;
+    }
+  }
+`
+
+export const Result = styled.div`
+  display: flex;
+  justify-content: left;
+  background: #F3F5F9;
+  padding: 15px;
+  border-radius: 5px;
+  margin-top: 15px;
+
+  .text{
+    margin-left: 5px;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 5px;
+
+    svg {
+      width: 35px;
+      height: 35px;
+    }
+  }
+
+`

package/src/contexts/LeiaProvider.tsx

@@ -0,0 +1,133 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { Provider } from "react-redux";
+
+import { ContainerToast } from "../components/CustomToast";
+import { getApi } from "../utils/getApi";
+import store from "../store";
+
+export interface LeiaProviderProps {
+  id: string;
+  language: "en" | "pt-br" | "es";  
+  readonly?: boolean;
+  token: string;
+  env: string;
+  children?: React.ReactNode;
+}
+
+interface LeiaContextProps extends Omit<LeiaProviderProps, 'children'> {
+  propTags: { tags: [] };
+  personas: [{ name: string; description: string }];
+  createPersona: (data: any) => Promise<any>;
+  updatePersona: (id: string, data: any) => Promise<any>;
+  deletePersona: (id: string) => Promise<any>;
+}
+
+const LeiaContext = createContext<LeiaContextProps | undefined>(
+  undefined
+);
+
+export const useLeia = () => {
+  const context = useContext(LeiaContext);
+  if (!context) {
+    throw new Error(
+      "useLeia deve ser usado dentro de um LeiaProvider"
+    );
+  }
+  return context;
+};
+
+export const LeiaProvider: React.FC<LeiaProviderProps> = ({
+  children,
+  ...props
+}) => {
+  const { id, language, token, env } = props;
+  const [tags, setTags] = useState<any>(null);
+  const [personas, setPersonas] = useState<any>(null);
+  const api = getApi(env);
+  
+  const createPersona = async (data: any) => {
+    try {
+      const response = await api.post(`/personas?token=${token}`, data);
+      setPersonas((prev: any) => [...prev, { ...data, _id: response?.data?.id, created_at: new Date() }]);
+      return response.data;
+    } catch (error) {
+      console.error("Erro ao criar persona:", error);
+      throw error;
+    }
+  }
+
+  const updatePersona = async (id: string, data: any) => {
+    try {
+      await api.put(`/personas/${id}?token=${token}`, data);
+      setPersonas((prev: any) =>
+        prev.map((persona: any) =>
+          persona._id === id ? { ...persona, ...data } : persona
+        )
+      );
+    } catch (error) {
+      console.error("Erro ao atualizar persona:", error);
+      throw error;
+    }
+  }
+
+  const deletePersona = async (id: string) => {
+    try {
+      await api.delete(`/personas/${id}?token=${token}`);
+      setPersonas((prev: any) => prev.filter((persona: any) => persona._id !== id));
+    } catch (error) {
+      console.error("Erro ao deletar persona:", error);
+      throw error;
+    }
+  }
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const { data } = await api.get(`/tags/${id}`);
+
+        if (data) {
+          setTags(data);
+        } else {
+          console.error("Erro ao fazer a solicitação");
+        }
+      } catch (error) {
+        console.error("Erro ao fazer a solicitação:", error);
+      }
+    };
+
+    const personas = async () => {
+      try {
+        const { data } = await api.get(`/personas?language=${language}&token=${token}`);
+
+        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 values = {
+    ...props,
+    propTags: tags,
+    personas,
+    createPersona,
+    updatePersona,
+    deletePersona,
+  };
+
+  return (
+    <Provider store={store}>
+      <LeiaContext.Provider value={values}>
+        {children}
+        <ContainerToast />
+      </LeiaContext.Provider>
+    </Provider>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,6 @@
+import { LeiaProvider } from "./contexts/LeiaProvider";
+import { FileArea } from "./components/FileArea";
+import { TestArea } from "./components/TestArea";
+import { PersonasArea } from "./components/PersonasArea";
+
+export { LeiaProvider, FileArea, TestArea, PersonasArea };

package/src/interface/FileData.ts

@@ -0,0 +1,11 @@
+export interface tag {
+  name: string,
+  trained: boolean
+}
+
+export interface FileData {
+  name: string,
+  tags: [tag]
+  trained: boolean,
+  link: string,
+}

package/src/interface/Language.ts

@@ -0,0 +1,95 @@
+type FileArea = {
+  description: string;
+  status: string;
+  fileName: string;
+  presset: string;
+  actions: string;
+  search: string;
+  fileUpload: string;
+  training: string;
+  emptyState: {
+    title: string;
+    description: string;
+  };
+  modal: {
+    descriptionUpload: string;
+    chooseFile: string;
+    uploadFile: string;
+    deleteFileTitle: string;
+    deleteFile: string;
+    trainingTitle: string;
+    trainingDescription: string
+  };
+};
+
+type Buttons = {
+  cancel: string;
+  send: string;
+  delete: string;
+  test: string;
+  addNewPresset: string;
+  addPresset: string;
+  training: string;
+};
+
+type TestArea = {
+  description: string;
+  typeSentence: string;
+  typePrompt: string;
+  selectPersona: string;
+  selectPresset: string;
+  emptyState: {
+    title: string;
+    description: string;
+  };
+};
+
+type Toast = {
+  deleteFile: {
+    success: {
+      title: String,
+      description: String
+    },
+    fail: {
+      title: String,
+      description: String
+    }
+  },
+  uploadFile: {
+    success: {
+      title: String,
+      description: String
+    },
+    fail: {
+      title: String,
+      description: String
+    }
+  },
+  Test: {
+    fail: {
+      title: String,
+      description: String
+    }
+  },
+  Train: {
+    fail: {
+      title: String,
+      description: String
+    },
+    success: {
+      title: String,
+      description: String
+    }
+  }
+}
+
+export type Language = any | {
+  files: string;
+  test: string;
+  fileArea: FileArea;
+  buttons: Buttons;
+  testArea: TestArea;
+  toast: Toast;
+  personas: any;
+  copyPrefix: string;
+};

package/src/interface/Table.ts

@@ -0,0 +1,12 @@
+export interface TableProps {
+  children: React.ReactNode;
+  className?: string;
+  size?: 'small' | 'medium' | 'large';
+  isloading?: boolean;
+}
+
+export interface SpinnerProps {
+  color?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}

package/src/service/Api.ts

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const API_TOKEN = 'API_TOKEN';
+
+const url = 'https://api.leia.digitalcontact.cloud';
+
+axios.defaults.baseURL = `${url}`;
+
+export default axios.create();

package/src/service/ApiDev.ts

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const API_TOKEN = 'API_TOKEN';
+
+const url = 'http://localhost:5000';
+
+axios.defaults.baseURL = `${url}`;
+
+export default axios.create();

package/src/service/ApiHml.ts

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const API_TOKEN = 'API_TOKEN';
+
+const url = 'https://api-hml.leia.digitalcontact.cloud';
+
+axios.defaults.baseURL = `${url}`;
+
+export default axios.create();

package/src/store/index.ts

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