Merge pull request #216 from l3vels/fix/ui

Fix/UI
l3vels · Oct 9, 2023 · ced239a · ced239a
2 parents eef6b97 + 6b0ee89
commit ced239a
Show file tree

Hide file tree

Showing 16 changed files with 160 additions and 37 deletions.
diff --git a/apps/ui/.env.develop b/apps/ui/.env.develop
@@ -4,7 +4,7 @@ REACT_APP_ACCOUNT_SERVICES_URL=https://api-dev.l3vels.xyz
 REACT_APP_AI_SERVICES_URL=https://api-dev.l3vels.xyz
 # REACT_APP_AI_SERVICES_URL=http://localhost:4000
 
-REACT__APP_DOMAIN_NAME=https://dev.l3agi.com
+REACT_APP_DOMAIN_NAME=https://dev.l3agi.com
 
 REACT_APP_SENTRY_DNS=
 REACT_APP_SENTRY_WEBPACK_AUTH_TOKEN=

diff --git a/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx b/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx
@@ -15,6 +15,7 @@ import Show from '@l3-lib/ui-core/dist/icons/Show'
 import { useContext } from 'react'
 import { LayoutContext } from 'contexts'
 import { useLocation } from 'react-router-dom'
+import { isMacOS } from 'utils/isMac'
 
 export const openLinkTab = (url: string) => {
   window.open(url, '_blank')
@@ -28,7 +29,7 @@ const HeaderButtons = () => {
     <StyledButtonsWrapper>
       {location.pathname.includes('/chat') && (
         <Tooltip
-          content={() => <span>Focus: cmd+SHIFT+F</span>}
+          content={() => <span>Focus: {isMacOS ? 'cmd+Shift+F' : 'Ctrl+Shift+F'}</span>}
           position={Tooltip.positions.BOTTOM}
           tooltipSize='small'
         >

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatHistory.tsx b/apps/ui/src/modals/AIChatModal/components/ChatHistory.tsx
@@ -131,8 +131,6 @@ const StyledRoot = styled.div`
 const StyledMessages = styled.main`
   // flex-grow: 1;
   width: 100%;
-  max-width: 900px;
-  margin-left: 100px;
 
   display: flex;
   /* overflow-y: auto; */

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/AiMessageMarkdown.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/AiMessageMarkdown.tsx
@@ -4,6 +4,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import remarkGfm from 'remark-gfm'
 import { useModal } from 'hooks'
+import { memo } from 'react'
 
 const YOUTUBE_REGEX = /^https:\/\/www\.youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)&/
 const IMAGE_REGEX = /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i
@@ -89,7 +90,7 @@ const AiMessageMarkdown = ({ children }: { children: any }) => {
   )
 }
 
-export default AiMessageMarkdown
+export default memo(AiMessageMarkdown)
 
 const StyledReactMarkdown = styled(ReactMarkdown)`
   color: ${({ theme }) => theme.typography.contentPrimary};

diff --git a/apps/ui/src/pages/Agents/AgentForm/AgentForm.tsx b/apps/ui/src/pages/Agents/AgentForm/AgentForm.tsx
@@ -1,3 +1,4 @@
+import { useState, useRef } from 'react'
 import styled from 'styled-components'
 
 import Typography from '@l3-lib/ui-core/dist/Typography'
@@ -11,12 +12,22 @@ import AgentSlider from './components/AgentSlider'
 import { useAgentForm } from './useAgentForm'
 import AgentDropdown from './components/AgentDropdown'
 import TypographyPrimary from 'components/Typography/Primary'
+import ShowAdvancedButton from './components/ShowAdvancedButton'
 
 type AgentFormProps = {
   formik: any
 }
 
 const AgentForm = ({ formik }: AgentFormProps) => {
+  const advancedRef = useRef(null as any)
+  const scrollToAdvancedRef = () => {
+    if (advancedRef) {
+      setTimeout(function () {
+        advancedRef.current?.scrollIntoView({ behavior: 'smooth' })
+      }, 1)
+    }
+  }
+
   const { setFieldValue, values } = formik
   const {
     agent_datasources,
@@ -26,8 +37,11 @@ const AgentForm = ({ formik }: AgentFormProps) => {
     agent_is_memory,
     agent_tools,
     agent_greeting,
+    agent_text,
   } = values
 
+  const [showAdvanced, setShowAdvanced] = useState(agent_text?.length > 0 ? true : false)
+
   const onTextareaChange = (field: string, value: string) => {
     formik.setFieldValue(field, value)
   }
@@ -96,20 +110,6 @@ const AgentForm = ({ formik }: AgentFormProps) => {
             />
           </StyledTextareaWrapper>
 
-          <CustomField formik={formik} formikField={'agent_goals'} placeholder={'Goal'} />
-
-          <CustomField
-            formik={formik}
-            formikField={'agent_instructions'}
-            placeholder={'Instruction'}
-          />
-
-          <CustomField
-            formik={formik}
-            formikField={'agent_constraints'}
-            placeholder={'Constraint'}
-          />
-
           <StyledCombinedFields>
             <AgentDropdown
               label={'Mode Provider'}
@@ -143,6 +143,46 @@ const AgentForm = ({ formik }: AgentFormProps) => {
               onChange={() => setFieldValue('agent_is_memory', !agent_is_memory)}
             />
           </StyledCheckboxWrapper>
+
+          <CustomField formik={formik} formikField={'agent_goals'} placeholder={'Goal'} />
+
+          <CustomField
+            formik={formik}
+            formikField={'agent_instructions'}
+            placeholder={'Instruction'}
+          />
+
+          <CustomField
+            formik={formik}
+            formikField={'agent_constraints'}
+            placeholder={'Constraint'}
+          />
+
+          <ShowAdvancedButton
+            isShow={showAdvanced}
+            onClick={() => {
+              setShowAdvanced(!showAdvanced)
+              scrollToAdvancedRef()
+            }}
+          />
+
+          {showAdvanced && (
+            <StyledTextareaWrapper>
+              {/* <TypographyPrimary
+                value='Advanced text'
+                type={Typography.types.LABEL}
+                size={Typography.sizes.md}
+              /> */}
+              <Textarea
+                hint=''
+                placeholder='text'
+                value={agent_text}
+                name='agent_text'
+                onChange={(value: string) => onTextareaChange('agent_text', value)}
+              />
+              <div ref={advancedRef} />
+            </StyledTextareaWrapper>
+          )}
         </StyledInputWrapper>
       </StyledForm>
     </StyledRoot>

diff --git a/apps/ui/src/pages/Agents/AgentForm/CreateAgentForm.tsx b/apps/ui/src/pages/Agents/AgentForm/CreateAgentForm.tsx
@@ -35,7 +35,7 @@ const CreateAgentForm = () => {
           </div>
 
           <StyledButtonWrapper>
-            <BackButton customOnClick={() => navigate('/agents/create-agent-template')} />
+            <BackButton />
 
             <ButtonPrimary
               onClick={formik?.handleSubmit}

diff --git a/apps/ui/src/pages/Agents/AgentForm/CreateAgentTempate.tsx b/apps/ui/src/pages/Agents/AgentForm/CreateAgentTempate.tsx
@@ -41,7 +41,7 @@ const CreateAgentTemplate = () => {
         </div>
 
         <StyledButtonWrapper>
-          <BackButton customOnClick={() => navigate('/chat')} />
+          <BackButton />
         </StyledButtonWrapper>
       </StyledHeaderGroup>
 

diff --git a/apps/ui/src/pages/Agents/AgentForm/components/ShowAdvancedButton.tsx b/apps/ui/src/pages/Agents/AgentForm/components/ShowAdvancedButton.tsx
@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+import NavigationChevronUp from '@l3-lib/ui-core/dist/icons/NavigationChevronUp'
+import NavigationChevronDown from '@l3-lib/ui-core/dist/icons/NavigationChevronDown'
+
+import Typography from '@l3-lib/ui-core/dist/Typography'
+import TypographyPrimary from 'components/Typography/Primary'
+
+const ShowAdvancedButton = ({ onClick, isShow }: { onClick: () => void; isShow: boolean }) => {
+  return (
+    <StyledAdvancedButton onClick={onClick}>
+      <TypographyPrimary
+        value='Advanced Options'
+        type={Typography.types.LABEL}
+        size={Typography.sizes.md}
+      />
+      {isShow ? <StyledNavigationChevronDown /> : <StyledNavigationChevronUp />}
+    </StyledAdvancedButton>
+  )
+}
+export default ShowAdvancedButton
+
+const StyledAdvancedButton = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  gap: 5px;
+`
+
+const StyledNavigationChevronUp = styled(NavigationChevronUp)`
+  path {
+    color: ${({ theme }) => theme.body.iconColor};
+  }
+`
+const StyledNavigationChevronDown = styled(NavigationChevronDown)`
+  path {
+    color: ${({ theme }) => theme.body.iconColor};
+  }
+`
diff --git a/apps/ui/src/pages/Agents/useAgents.ts b/apps/ui/src/pages/Agents/useAgents.ts
@@ -45,6 +45,7 @@ export const useAgents = () => {
     agent_greeting: '',
     agent_model_provider: 'OpenAI',
     agent_is_memory: true,
+    agent_text: '',
   }
 
   if (agentById) {
@@ -64,6 +65,7 @@ export const useAgents = () => {
       agent_model_provider: agentById.configs?.model_provider,
       agent_suggestions: agentById.configs?.suggestions,
       agent_greeting: agentById.configs?.greeting,
+      agent_text: agentById.configs?.text,
     }
   }
 
@@ -86,6 +88,7 @@ export const useAgents = () => {
         is_memory: values.agent_is_memory,
         suggestions: values.agent_suggestions,
         greeting: values.agent_greeting,
+        text: values.agent_text,
       }
       const newAgent = await createAgentService(agentInput)
       await refetchAgents()

diff --git a/apps/ui/src/pages/Agents/useEditAgent.ts b/apps/ui/src/pages/Agents/useEditAgent.ts
@@ -39,6 +39,7 @@ export const useEditAgent = () => {
     agent_model_provider: agentById?.configs?.model_provider,
     agent_suggestions: agentById?.configs?.suggestions,
     agent_greeting: agentById?.configs?.greeting,
+    agent_text: agentById?.configs?.text || '',
   }
 
   const handleSubmit = async (values: any) => {
@@ -60,6 +61,7 @@ export const useEditAgent = () => {
       model_provider: values.agent_model_provider,
       suggestions: values.agent_suggestions,
       greeting: values.agent_greeting,
+      text: values.agent_text,
     }
 
     await updateAgent(agentId || '', {

diff --git a/apps/ui/src/pages/TeamOfAgents/TeamOfAgentsForm/CreateTeamOfAgentsForm.tsx b/apps/ui/src/pages/TeamOfAgents/TeamOfAgentsForm/CreateTeamOfAgentsForm.tsx
@@ -36,7 +36,7 @@ const CreateTeamOfAgentsForm = () => {
             </div>
 
             <StyledButtonWrapper>
-              <BackButton customOnClick={() => navigate('/chat')} />
+              <BackButton />
 
               <ButtonPrimary
                 onClick={() => handleSubmit(formik?.values)}

diff --git a/apps/ui/src/providers/LayoutProvider.tsx b/apps/ui/src/providers/LayoutProvider.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 
 import { LayoutContext } from 'contexts'
+import { isMacOS } from 'utils/isMac'
 // import { useLocation } from 'react-router-dom'
 
 export const LayoutProvider = ({ children }: any) => {
@@ -18,9 +19,9 @@ export const LayoutProvider = ({ children }: any) => {
     setExpand(!expand)
   }
 
-  // Use the useHotkeys hook to define your keyboard shortcut
-  useHotkeys('cmd+shift+f', commandFunction)
-  useHotkeys('ctrl+shift+f', commandFunction)
+  const keyboardShortcut = isMacOS ? 'cmd+shift+f' : 'ctrl+shift+f'
+
+  useHotkeys(keyboardShortcut, commandFunction)
 
   useEffect(() => {
     if (expand) {

diff --git a/apps/ui/src/routes/ChatRouteLayout.tsx b/apps/ui/src/routes/ChatRouteLayout.tsx
@@ -77,6 +77,24 @@ const ChatRouteLayout = () => {
   //   }
   // }, [])
 
+  useEffect(() => {
+    if (!teamId && !chatId && !agentId) {
+      if (teamOfAgentsArray?.length > 0) {
+        navigate(`/chat?team=${teamOfAgentsArray?.[0].id}`)
+      } else if (agentsData?.length > 0) {
+        navigate(`/chat?agent=${agentsData?.[0].agent.id}`)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [teamOfAgentsArray, agentsData])
+
+  useEffect(() => {
+    if (!expand) {
+      setShowChats(false)
+      setShowInfo(false)
+    }
+  }, [expand])
+
   if (!user && !chatId) return <Navigate to='/' />
 
   return (
@@ -96,11 +114,17 @@ const ChatRouteLayout = () => {
             onMouseEnter={() => setShowInfo(true)}
           />
         )}
-        <StyledLeftColumn
-          isHidden={expand && !showChats && location.pathname.includes('/chat')}
-          onMouseLeave={() => setShowChats(false)}
-          onMouseEnter={() => setShowChats(true)}
-        >
+
+        {(showInfo || showChats) && (
+          <StyledMiddleArea
+            onMouseEnter={() => {
+              setShowChats(false)
+              setShowInfo(false)
+            }}
+          />
+        )}
+
+        <StyledLeftColumn isHidden={expand && !showChats && location.pathname.includes('/chat')}>
           {user && (
             <>
               <ListHeader title='Team' onAddClick={() => navigate('/team-of-agents/create-team')} />
@@ -234,10 +258,7 @@ const ChatRouteLayout = () => {
           )}
         </StyledMainWrapper>
 
-        <StyledRightColumn
-          isHidden={(!showInfo && expand) || !location.pathname.includes('/chat')}
-          onMouseLeave={() => setShowInfo(false)}
-        >
+        <StyledRightColumn isHidden={(!showInfo && expand) || !location.pathname.includes('/chat')}>
           <ChatMembers agentById={agentById || chatById?.agent} teamOfAgents={teamOfAgents} />
         </StyledRightColumn>
       </StyledContainer>
@@ -306,7 +327,7 @@ const StyledRightColumn = styled.div<{ isHidden?: boolean }>`
   height: 100%;
   min-width: 320px;
 
-  max-height: calc(100vh - 205px);
+  max-height: calc(100vh - 230px);
 
   margin-top: 30px;
   padding-right: 10px;
@@ -331,6 +352,7 @@ const StyledMainWrapper = styled.div`
 const StyledChatWrapper = styled.div<{ isHidden: boolean }>`
   height: 100%;
   width: 100%;
+
   ${props =>
     props.isHidden &&
     css`
@@ -344,15 +366,14 @@ const StyledOutletWrapper = styled.div`
   max-width: 1500px;
 `
 const StyledShowButton = styled.div<{ isRight?: boolean }>`
-  height: 100%;
+  height: 100vh;
   width: calc(20% - 120px);
 
   cursor: pointer;
 
   position: absolute;
   z-index: 10000;
   left: 0;
-  max-height: calc(100vh - 185px);
 
   ${props =>
     props.isRight &&
@@ -361,3 +382,13 @@ const StyledShowButton = styled.div<{ isRight?: boolean }>`
       margin-left: auto;
     `}
 `
+const StyledMiddleArea = styled.div`
+  height: 100%;
+  width: calc(0% + 800px);
+
+  cursor: pointer;
+
+  position: absolute;
+  z-index: 10000;
+  /* left: 0; */
+`