code7-leia 0.2.20 → 0.2.22

package/dist/components/TestArea/components/TextArea/index.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+declare type TextAreaProps = {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    description?: string;
+    helper?: string;
+    error?: string;
+    color?: '' | 'danger' | 'success';
+    size?: 'small' | 'medium' | 'large';
+    startIcon?: string | ReactNode;
+    endIcon?: string | ReactNode;
+    disabled?: boolean;
+    marginBottom?: string;
+    rows?: number;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const TextArea: React.FC<TextAreaProps>;
+export default TextArea;

package/dist/components/TestArea/components/TextArea/styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type ContainerProps = {
+    marginBottom?: string;
+};
+export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerProps>>;
+export declare const InputWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const LabelWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
+export declare const CustomTextArea: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>>;
+export declare const Helper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Error: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export {};

package/dist/contexts/SharedPropsProvider.d.ts

@@ -10,6 +10,7 @@ interface Props {
         description: string;
     }];
     token: string;
+    env: string;
     children?: React.ReactNode;
 }
 export declare const useSharedProps: () => Props;

package/dist/interface/Language.d.ts

@@ -33,6 +33,7 @@ declare type Buttons = {
 declare type TestArea = {
     description: string;
     typeSentence: string;
+    typePrompt: string;
     selectPersona: string;
     selectPresset: string;
     emptyState: {

package/dist/service/ApiHml.d.ts

@@ -0,0 +1,3 @@
+export declare const API_TOKEN = "API_TOKEN";
+declare const _default: import("axios").AxiosInstance;
+export default _default;

package/dist/store/modules/actions.d.ts

@@ -1,8 +1,9 @@
-export declare const getFilesAction: (id: string, token: string) => {
+export declare const getFilesAction: (id: string, token: string, env: string) => {
     type: string;
     payload: {
         id: string;
         token: string;
+        env: string;
     };
 };
 export declare const getFilesActionSuccess: ({ files }: any) => {
@@ -11,13 +12,14 @@ export declare const getFilesActionSuccess: ({ files }: any) => {
         files: any;
     };
 };
-export declare const deleteFilesAction: (name: string, id: string, language: string, token: string) => {
+export declare const deleteFilesAction: (name: string, id: string, language: string, token: string, env: string) => {
     type: string;
     payload: {
         name: string;
         id: string;
         language: string;
         token: string;
+        env: string;
     };
 };
 export declare const deleteFilesActionSuccess: ({ files }: any) => {
@@ -26,7 +28,7 @@ export declare const deleteFilesActionSuccess: ({ files }: any) => {
         files: any;
     };
 };
-export declare const uploadFilesAction: (file: any, id: string, pressets: string[], language: string, token: string) => {
+export declare const uploadFilesAction: (file: any, id: string, pressets: string[], language: string, token: string, env: string) => {
     type: string;
     payload: {
         file: any;
@@ -34,6 +36,7 @@ export declare const uploadFilesAction: (file: any, id: string, pressets: string
         pressets: string[];
         language: string;
         token: string;
+        env: string;
     };
 };
 export declare const uploadFilesActionSuccess: ({ files }: any) => {
@@ -42,23 +45,26 @@ export declare const uploadFilesActionSuccess: ({ files }: any) => {
         files: any;
     };
 };
-export declare const trainingAction: (id: string, pressets: string[], language: string, token: string) => {
+export declare const trainingAction: (id: string, pressets: string[], language: string, token: string, env: string) => {
     type: string;
     payload: {
         id: string;
         pressets: string[];
         language: string;
         token: string;
+        env: string;
     };
 };
-export declare const testAction: (question: string, profile: string, presset: string, files_directory: string, token: string) => {
+export declare const testAction: (question: string, prompt: string, profile: string, presset: string, files_directory: string, token: string, env: string) => {
     type: string;
     payload: {
         question: string;
+        prompt: string;
         profile: string;
         presset: string;
         files_directory: string;
         token: string;
+        env: string;
     };
 };
 export declare const testActionSuccess: ({ message }: any) => {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.20",
+  "version": "0.2.22",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/Leia.tsx

@@ -22,7 +22,7 @@ export const Leia = (props: Props) => {
   }, [pathname]);
 
   return (
-      <SharedPropsProvider propTags={{ tags: [] }} personas={[{name: '', description: ''}]} {...props}>
+      <SharedPropsProvider propTags={{ tags: [] }} env='' personas={[{name: '', description: ''}]} {...props}>
         <>
           <Tabs
             value={activeTab}

package/src/components/FileArea/index.tsx

@@ -23,7 +23,7 @@ import { SharedPropsProvider, useSharedProps } from '../../contexts/SharedPropsP
 import { deleteFilesAction, getFilesAction, uploadFilesAction, trainingAction } from '../../store/modules/actions';
 
 export const FileArea = () => {
-  const { id, language, propTags, token } = useSharedProps();
+  const { id, language, propTags, token, env } = useSharedProps();
   const [files, setFiles] = useState<FileData[]>([]);
   const [initialFiles, setInitialFiles] = useState<FileData[]>([]);
   const [uploadFile, setUploadFile] = useState<{ content: ArrayBuffer | string; properties: File }>();
@@ -40,7 +40,7 @@ export const FileArea = () => {
   const tags = propTags ? propTags.tags : [];
 
   useEffect(() => {
-    dispatch(getFilesAction(id, token))
+    dispatch(getFilesAction(id, token, env))
   }, [id])
 
   useEffect(() => {
@@ -108,19 +108,19 @@ export const FileArea = () => {
   }
 
   const deleteFile = () => {
-    dispatch(deleteFilesAction(fileDelete, id, language, token))
+    dispatch(deleteFilesAction(fileDelete, id, language, token, env))
     setModalDelete(false)
   }
 
   const handleUploadFile = () => {
-    dispatch(uploadFilesAction(uploadFile, id, presset, language, token))
+    dispatch(uploadFilesAction(uploadFile, id, presset, language, token, env))
     setModal(false)
     setUploadFile(undefined)
     setPresset([])
   };
 
   const handleTrain = () => {
-    dispatch(trainingAction(id, presset, language, token))
+    dispatch(trainingAction(id, presset, language, token, env))
     setModalTraining(false)
     setPresset([])
   };
@@ -272,7 +272,7 @@ export const FileArea = () => {
   }
 
   return (
-    <SharedPropsProvider id={id} language={language} token={token} propTags={{ tags: [] }} personas={[{name: '', description: ''}]}>
+    <SharedPropsProvider id={id} language={language} token={token} env={env} propTags={{ tags: [] }} personas={[{name: '', description: ''}]}>
       <S.Container>
         {renderFiles()}
       </S.Container>

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

@@ -0,0 +1,97 @@
+import React, { forwardRef, ReactNode } from 'react';
+import cc from 'classcat';
+
+import {
+  Container,
+  LabelWrapper,
+  CustomTextArea,
+  InputWrapper,
+  Helper,
+  Error,
+} from './styles';
+
+type TextAreaProps = {
+  id?: string;
+  label?: string;
+  placeholder?: string;
+  className?: string;
+  description?: string;
+  helper?: string;
+  error?: string;
+  color?: '' | 'danger' | 'success';
+  size?: 'small' | 'medium' | 'large';
+  startIcon?: string | ReactNode;
+  endIcon?: string | ReactNode;
+  disabled?: boolean;
+  marginBottom?: string;
+  rows?: number;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const TextArea: React.FC<TextAreaProps> = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      id,
+      label,
+      description,
+      helper,
+      error,
+      placeholder,
+      className,
+      size = 'medium',
+      color = '',
+      disabled = false,
+      startIcon,
+      endIcon,
+      marginBottom = '3px',
+      rows = 4,
+      ...props
+    },
+    ref
+  ) => {
+    const selfId = id || `input__${Math.random().toString(36).substr(2, 9)}`;
+
+    return (
+      <Container className={className} marginBottom={marginBottom}>
+        {label && (
+          <LabelWrapper htmlFor={selfId}>
+            <span className="label">{label}</span>
+            {description && <span className="description">{description}</span>}
+          </LabelWrapper>
+        )}
+
+        <InputWrapper className={cc({ hasLabel: Boolean(label) })}>
+          <CustomTextArea
+            className={cc([
+              'input',
+              size,
+              color,
+              {
+                error: Boolean(error),
+                'has-start-icon': Boolean(startIcon),
+                'has-end-icon': Boolean(endIcon),
+              },
+            ])}
+            id={selfId}
+            placeholder={placeholder}
+            disabled={disabled}
+            rows={rows}
+            ref={ref}
+            {...props}
+          />
+          {startIcon && (
+            <span className={cc(['icon', 'start-icon'])}>{startIcon}</span>
+          )}
+          {endIcon && (
+            <span className={cc(['icon', 'end-icon'])}>{endIcon}</span>
+          )}
+        </InputWrapper>
+
+        {helper && <Helper className={cc(['helper', color])}>{helper}</Helper>}
+
+        {error && <Error className={cc(['error'])}>{error}</Error>}
+      </Container>
+    );
+  }
+);
+
+export default TextArea;

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

@@ -0,0 +1,169 @@
+import styled from 'styled-components';
+
+type ContainerProps = {
+  marginBottom?: string;
+};
+
+export const Container = styled.div<ContainerProps>`
+  display: flex;
+  flex-flow: column;
+  margin-bottom: ${({ marginBottom }) => marginBottom};
+`;
+
+export const InputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  .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 {
+    min-height: 32px;
+  }
+
+  &.medium {
+    min-height: 40px;
+  }
+
+  &.large {
+    min-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

@@ -3,6 +3,7 @@ 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';
@@ -12,11 +13,12 @@ import { useDispatch, useSelector } from 'react-redux';
 import { testAction } from '../../store/modules/actions';
 
 export const TestArea = () => {
-  const { id, language, personas, propTags, token } = useSharedProps();
+  const { id, language, personas, propTags, token, env } = useSharedProps();
   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();
@@ -43,8 +45,12 @@ export const TestArea = () => {
     setSearch(value);
   };
 
+  const handlePrompt = (value: string) => {
+    setPrompt(value);
+  };
+
   const handleTest = () => {
-    dispatch(testAction(search, profile, presset, id, token))
+    dispatch(testAction(search, prompt, profile, presset, id, token, env))
   };
 
   const returnTest = () => {  
@@ -60,6 +66,7 @@ export const TestArea = () => {
         <S.Inputs>
           <InputTest placeholder={t.testArea.typeSentence} onChange={handleSearch} />
           <Select placeholder={t.testArea.selectPersona} options={optionsPersona} onSelect={handleSelectPersona} />
+          {profile === "Custom" && <TextArea className="textarea-message" label="Prompt" placeholder={t.testArea.typePrompt} value={prompt} onChange={(e) => { handlePrompt(e.target.value); }} />}
           <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={handleSelectPresset} />
           <button onClick={handleTest}><PiWaveformBold /> {t.buttons.test}</button>
         </S.Inputs>
@@ -83,7 +90,7 @@ export const TestArea = () => {
   }
 
   return (
-    <SharedPropsProvider id={id} token={token} language={language} propTags={{ tags: [] }} personas={[{name: '', description: ''}]}>
+    <SharedPropsProvider id={id} token={token} language={language} env={env} propTags={{ tags: [] }} personas={[{name: '', description: ''}]}>
       <S.Container>
         {returnTest()}
       </S.Container>

package/src/contexts/SharedPropsProvider.tsx

@@ -7,6 +7,7 @@ interface Props {
   propTags: { tags: [] }
   personas: [{ name: string, description: string }];
   token: string;
+  env: string;
   children?: React.ReactNode;
 }
 

package/src/interface/Language.ts

@@ -35,6 +35,7 @@ type Buttons = {
 type TestArea = {
   description: string;
   typeSentence: string;
+  typePrompt: string;
   selectPersona: string;
   selectPresset: string;
   emptyState: {

package/src/service/ApiHml.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/store/modules/actions.ts

@@ -1,9 +1,9 @@
 import types from './types'
 
-export const getFilesAction = (id: string, token: string) => {
+export const getFilesAction = (id: string, token: string, env: string) => {
     return {
         type: types.GET_FILES_REQUEST,
-        payload: { id, token }
+        payload: { id, token, env }
     }
 }
 
@@ -14,10 +14,10 @@ export const getFilesActionSuccess = ({ files }: any) => {
     }
 }
 
-export const deleteFilesAction = (name: string, id: string, language: string, token: string) => {
+export const deleteFilesAction = (name: string, id: string, language: string, token: string, env: string) => {
     return {
         type: types.DELETE_FILES_REQUEST,
-        payload: { name, id, language, token }
+        payload: { name, id, language, token, env }
     }
 }
 
@@ -28,10 +28,10 @@ export const deleteFilesActionSuccess = ({ files }: any) => {
     }
 }
 
-export const uploadFilesAction = (file: any, id: string, pressets: string[], language: string, token: string) => {
+export const uploadFilesAction = (file: any, id: string, pressets: string[], language: string, token: string, env: string) => {
     return {
         type: types.UPLOAD_FILES_REQUEST,
-        payload: { file, id, pressets, language, token }
+        payload: { file, id, pressets, language, token, env }
     }
 }
 
@@ -42,17 +42,17 @@ export const uploadFilesActionSuccess = ({ files }: any) => {
     }
 }
 
-export const trainingAction = (id: string, pressets: string[], language: string, token: string) => {
+export const trainingAction = (id: string, pressets: string[], language: string, token: string, env: string) => {
     return {
         type: types.TRAINING_REQUEST,
-        payload: { id, pressets, language, token }
+        payload: { id, pressets, language, token, env }
     }
 }
 
-export const testAction = (question: string, profile: string, presset: string, files_directory: string, token: string) => {
+export const testAction = (question: string, prompt:string, profile: string, presset: string, files_directory: string, token: string, env: string) => {
     return {
         type: types.TEST_REQUEST,
-        payload: { question, profile, presset, files_directory, token }
+        payload: { question, prompt, profile, presset, files_directory, token, env }
     }
 }