Merge pull request #378 from l3vels/fix/agent-flow

Fix/agent flow
l3vels · Dec 12, 2023 · aeef084 · aeef084
2 parents 5d7d4ae + 618def9
commit aeef084
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 23 deletions.
diff --git a/apps/ui/src/components/TextareaFormik/TextareaFormik.tsx b/apps/ui/src/components/TextareaFormik/TextareaFormik.tsx
@@ -11,6 +11,7 @@ type TextareaProps = {
   value: string
   fieldName: string
   triggerResize?: number
+  minHeight?: number
 }
 
 const TextareaFormik = ({
@@ -19,6 +20,7 @@ const TextareaFormik = ({
   value,
   fieldName,
   triggerResize,
+  minHeight,
   ...props
 }: TextareaProps) => {
   const textareaRef = useRef(null as any)
@@ -41,7 +43,7 @@ const TextareaFormik = ({
   }, [value, triggerResize])
 
   return (
-    <StyledTextareaWrapper>
+    <StyledTextareaWrapper minHeight={minHeight}>
       <TypographyPrimary value={label} type={Typography.types.LABEL} size={Typography.sizes.md} />
       <Textarea
         ref={textareaRef}
@@ -59,7 +61,7 @@ const TextareaFormik = ({
 
 export default TextareaFormik
 
-const StyledTextareaWrapper = styled.div`
+const StyledTextareaWrapper = styled.div<{ minHeight?: number }>`
   font: var(--font-general-label);
   line-height: 22px;
   font-size: 10px;
@@ -78,7 +80,7 @@ const StyledTextareaWrapper = styled.div`
     }
   }
   textarea {
-    min-height: 200px;
+    min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : '200px')};
     max-height: calc(100vh - 400px);
   }
 `
diff --git a/apps/ui/src/i18n/locales/en.json b/apps/ui/src/i18n/locales/en.json
@@ -357,5 +357,6 @@
   "groups": "$t(group)s",
   "integrations": "$t(integration)s",
   "models": "$t(model)s",
-  "type": "Type"
+  "type": "Type",
+  "task": "Task"
 }
diff --git a/apps/ui/src/pages/Agents/AgentForm/AgentForm.tsx b/apps/ui/src/pages/Agents/AgentForm/AgentForm.tsx
@@ -26,7 +26,7 @@ import { StyledFormRoot, StyledFormInputWrapper } from 'styles/formStyles.css'
 import TextareaFormik from 'components/TextareaFormik'
 import { useLocation, useNavigate } from 'react-router-dom'
 import RadioButton from 'share-ui/components/RadioButton/RadioButton'
-import AgentRunners from './components/AgentRunners'
+import AgentRunners, { StyledRunnerFieldsWrapper } from './components/AgentRunners'
 
 type AgentFormProps = {
   formik: any
@@ -434,11 +434,17 @@ const AgentForm = ({ formik, isVoice = true }: AgentFormProps) => {
                   <TypographyPrimary
                     value={`Sentiment Analysis`}
                     type={Typography.types.LABEL}
-                    size={Typography.sizes.md}
+                    size={Typography.sizes.lg}
                   />
 
-                  <StyledCombinedFields>
-                    <FormikTextField label='Task' name={`agent_sentiment_analyzer.task`} />
+                  <StyledRunnerFieldsWrapper>
+                    <TextareaFormik
+                      setFieldValue={setFieldValue}
+                      label={t('task')}
+                      value={agent_sentiment_analyzer.task}
+                      fieldName={'agent_sentiment_analyzer.task'}
+                      minHeight={90}
+                    />
 
                     <AgentDropdown
                       label={t('Runner')}
@@ -447,7 +453,7 @@ const AgentForm = ({ formik, isVoice = true }: AgentFormProps) => {
                       setFieldValue={setFieldValue}
                       options={agentOptions}
                     />
-                  </StyledCombinedFields>
+                  </StyledRunnerFieldsWrapper>
 
                   {/* <AgentDropdown
                     label={'Call Sentiment Analyzer'}
@@ -524,7 +530,7 @@ const StyledInputWrapper = styled.div`
 
   gap: 20px;
   width: 100%;
-  max-width: 800px;
+  max-width: 1000px;
   /* margin: auto; */
   height: 100%;
   /* max-height: 800px; */

diff --git a/apps/ui/src/pages/Agents/AgentForm/components/AgentDropdown.tsx b/apps/ui/src/pages/Agents/AgentForm/components/AgentDropdown.tsx
@@ -105,7 +105,7 @@ export default AgentDropdown
 const StyledWrapper = styled.div<{ isValidationError: boolean }>`
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 10px;
   width: 100%;
   .css-xrcw8y-container {
     border: 3px solid ${({ theme }) => theme.body.textareaBorder};

diff --git a/apps/ui/src/pages/Agents/AgentForm/components/AgentRunners.tsx b/apps/ui/src/pages/Agents/AgentForm/components/AgentRunners.tsx
@@ -12,6 +12,7 @@ import { ButtonSecondary, ButtonTertiary } from 'components/Button/Button'
 import { StyledDeleteIcon } from 'pages/TeamOfAgents/TeamOfAgentsCard/TeamOfAgentsCard'
 import AgentDropdown from './AgentDropdown'
 import { useAgentsService } from 'services/agent/useAgentsService'
+import TextareaFormik from 'components/TextareaFormik'
 
 type AgentRunnersProps = {
   formikField: string
@@ -36,12 +37,18 @@ const AgentRunners = ({ formikField, placeholder }: AgentRunnersProps) => {
           <TypographyPrimary
             value={`${placeholder}s`}
             type={Typography.types.LABEL}
-            size={Typography.sizes.md}
+            size={Typography.sizes.lg}
           />
           {values[formikField]?.map((item: any, index: number) => (
             <>
-              <StyledCustomFieldWrapper key={index}>
-                <FormikTextField label='Task' name={`${formikField}.${index}.task`} />
+              <StyledRunnerFieldsWrapper key={index}>
+                <TextareaFormik
+                  setFieldValue={setFieldValue}
+                  label={t('task')}
+                  value={item.task}
+                  fieldName={`${formikField}.${index}.task`}
+                  minHeight={90}
+                />
 
                 <AgentDropdown
                   label={t('Runner')}
@@ -50,11 +57,10 @@ const AgentRunners = ({ formikField, placeholder }: AgentRunnersProps) => {
                   setFieldValue={setFieldValue}
                   options={agentOptions}
                 />
-
                 <StyledButtonTertiary onClick={() => remove(index)} size={Button.sizes?.SMALL}>
                   <StyledDeleteIcon size={32} />
                 </StyledButtonTertiary>
-              </StyledCustomFieldWrapper>
+              </StyledRunnerFieldsWrapper>
             </>
           ))}
 
@@ -78,18 +84,24 @@ const StyledFieldsWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
-  gap: 5px;
+  gap: 20px;
 `
-const StyledCustomFieldWrapper = styled.div`
-  display: flex;
-  align-items: center;
 
-  gap: 5px;
-`
 const StyledButtonWrapper = styled.div`
   width: fit-content;
 `
 const StyledButtonTertiary = styled(ButtonTertiary)`
   padding: 0 4px;
   margin-bottom: 6px;
+
+  margin-top: 38px;
+  margin-left: -14px;
+  width: 40px;
+`
+export const StyledRunnerFieldsWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 2fr 1fr 0.1fr;
+  gap: 15px;
+
+  width: 100%;
 `
diff --git a/apps/ui/src/share-ui/components/Textarea/Textarea.tsx b/apps/ui/src/share-ui/components/Textarea/Textarea.tsx
@@ -185,7 +185,7 @@ const StyledTextarea = styled.textarea`
   color: ${({ theme }) => theme.textFiled.primary.color};
   outline: 4px solid ${({ theme }) => theme.textFiled.primary.borderColor};
 
-  border-radius: 6px;
+  border-radius: 4px;
 
   &::placeholder {
     /* @include theme-prop(color, text-field-placeholder-color); */