Merge pull request #358 from l3vels/fix/ui-changes

Fix/UI changes
l3vels · Nov 29, 2023 · b7cbf8b · b7cbf8b
2 parents f92be7c + 29c00c1
commit b7cbf8b
Show file tree

Hide file tree

Showing 33 changed files with 352 additions and 165 deletions.
diff --git a/apps/server/models/chat.py b/apps/server/models/chat.py
@@ -216,6 +216,7 @@ def get_chats(cls, db, account):
             .outerjoin(AccountModel, ChatModel.creator_account_id == AccountModel.id)
             .outerjoin(TeamModel, ChatModel.team_id == TeamModel.id)
             .outerjoin(AgentModel, ChatModel.agent_id == AgentModel.id)
+            .order_by(ChatModel.created_on.desc())
             .filter(
                 ChatModel.creator_account_id == account.id,
                 or_(

diff --git a/apps/server/utils/configs/default.py b/apps/server/utils/configs/default.py
@@ -3,7 +3,7 @@
     "naming": {
         "home": "Home",
         "agent": "Agent",
-        "team": "Team",
+        "team": "Multi-Agent",
         "datasource": "Knowledge",
         "model": "Model",
         "discovery": "Discovery",

diff --git a/apps/ui/.env.develop b/apps/ui/.env.develop
@@ -14,6 +14,7 @@ REACT_APP_TWITTER_LINK=https://twitter.com/l3velshq
 REACT_APP_YOUTUBE_LINK=https://www.youtube.com/@L3AGI
 
 REACT_APP_YOUTUBE_VIDEO_ID=i84RodECglM
+REACT_APP_YOUTUBE_VIDEO_DATA_SOURCE_ID=Fza4gHP_M3o
 
 REACT_APP_TERMS_LINK=https://github.com/l3vels/L3AGI/blob/main/docs/terms.md
 REACT_APP_PRIVACY=https://github.com/l3vels/L3AGI/blob/main/docs/privacy.md

diff --git a/apps/ui/.env.local b/apps/ui/.env.local
@@ -18,6 +18,8 @@ REACT_APP_TWITTER_LINK=https://twitter.com/l3velshq
 REACT_APP_YOUTUBE_LINK=https://www.youtube.com/@L3AGI
 
 REACT_APP_YOUTUBE_VIDEO_ID=i84RodECglM
+REACT_APP_YOUTUBE_VIDEO_DATA_SOURCE_ID=Fza4gHP_M3o
+
 
 REACT_APP_TERMS_LINK=https://github.com/l3vels/L3AGI/blob/main/docs/terms.md
 REACT_APP_PRIVACY=https://github.com/l3vels/L3AGI/blob/main/docs/privacy.md

diff --git a/apps/ui/.env.production b/apps/ui/.env.production
@@ -15,6 +15,8 @@ REACT_APP_TWITTER_LINK=https://twitter.com/l3velshq
 REACT_APP_YOUTUBE_LINK=https://www.youtube.com/@L3AGI
 
 REACT_APP_YOUTUBE_VIDEO_ID=i84RodECglM
+REACT_APP_YOUTUBE_VIDEO_DATA_SOURCE_ID=Fza4gHP_M3o
+
 
 REACT_APP_TERMS_LINK=https://github.com/l3vels/L3AGI/blob/main/docs/terms.md
 REACT_APP_PRIVACY=https://github.com/l3vels/L3AGI/blob/main/docs/privacy.md

diff --git a/apps/ui/src/@types/vite-env.d.ts b/apps/ui/src/@types/vite-env.d.ts
@@ -18,6 +18,7 @@ interface ImportMetaEnv {
   readonly REACT_APP_TWITTER_LINK: string
   readonly REACT_APP_YOUTUBE_LINK: string
   readonly REACT_APP_YOUTUBE_VIDEO_ID: string
+  readonly REACT_APP_YOUTUBE_VIDEO_DATA_SOURCE_ID: string
   readonly REACT_APP_TERMS_LINK: string
   readonly REACT_APP_PRIVACY: string
   readonly REACT_APP_BASICS_LINK: string

diff --git a/apps/ui/src/Route.tsx b/apps/ui/src/Route.tsx
@@ -93,6 +93,7 @@ import VoiceView from 'plugins/contact/pages/Voice/VoiceView'
 import VoiceModal from 'modals/VoiceModal'
 import ImportContacts from 'plugins/contact/pages/Contact/ImportContacts'
 import CallLogsModal from 'modals/CallLogsModal'
+import VideoModal from 'modals/VideoModal'
 
 const Route = () => {
   const { loading } = useContext(AuthContext)
@@ -379,6 +380,7 @@ const Route = () => {
       <ScheduleRunModal />
       <RunLogsModal />
       <CallLogsModal />
+      <VideoModal />
 
       <CommandMenu
         open={cmdkOpen}

diff --git a/apps/ui/src/assets/images/fitebase.png b/apps/ui/src/assets/images/fitebase.png
diff --git a/apps/ui/src/assets/images/googleAnalytics.png b/apps/ui/src/assets/images/googleAnalytics.png
diff --git a/apps/ui/src/components/DemoButton/DemoButton.tsx b/apps/ui/src/components/DemoButton/DemoButton.tsx
@@ -0,0 +1,16 @@
+import { ButtonTertiary } from 'components/Button/Button'
+
+import Play from '@l3-lib/ui-core/dist/icons/PlayOutline'
+import Typography from '@l3-lib/ui-core/dist/Typography'
+import Button from '@l3-lib/ui-core/dist/Button'
+
+const DemoButton = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <ButtonTertiary onClick={onClick} size={Button.sizes.SMALL}>
+      <Play size={18} color={'#E332E6'} />
+      <Typography customColor={'#E332E6'} value={'Demo'} size={Button.sizes.SMALL} />
+    </ButtonTertiary>
+  )
+}
+
+export default DemoButton
diff --git a/apps/ui/src/components/DemoButton/index.ts b/apps/ui/src/components/DemoButton/index.ts
@@ -0,0 +1 @@
+export { default } from './DemoButton'
diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMembers/ChatMembers.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMembers/ChatMembers.tsx
@@ -80,29 +80,30 @@ const ChatMembers = ({
                 <AgentViewDetailBox agentData={agentById} />
                 <div style={{ height: '200px', width: '100%' }}>
                   {voiceUrl && (
-                    <StyledAudioPlayerWrapper>
-                      <AudioPlayer audioUrl={voiceUrl} />
-                    </StyledAudioPlayerWrapper>
-                  )}
-
-                  <StyledLogsButton
-                    onClick={() =>
-                      openModal({
-                        name: CALL_LOGS_MODAL_NAME,
-                        data: {
-                          chatId: call?.chat_id,
-                        },
-                      })
-                    }
-                  >
-                    <StyledLogsIcon size={32} />
+                    <>
+                      <StyledAudioPlayerWrapper>
+                        <AudioPlayer audioUrl={voiceUrl} />
+                      </StyledAudioPlayerWrapper>{' '}
+                      <StyledLogsButton
+                        onClick={() =>
+                          openModal({
+                            name: CALL_LOGS_MODAL_NAME,
+                            data: {
+                              chatId: call?.chat_id,
+                            },
+                          })
+                        }
+                      >
+                        <StyledLogsIcon size={32} />
 
-                    <TypographyPrimary
-                      value={t('logs')}
-                      type={Typography.types.P}
-                      size={Typography.sizes.sm}
-                    />
-                  </StyledLogsButton>
+                        <TypographyPrimary
+                          value={t('logs')}
+                          type={Typography.types.P}
+                          size={Typography.sizes.sm}
+                        />
+                      </StyledLogsButton>
+                    </>
+                  )}
                 </div>
               </TabPanel>
 

diff --git a/apps/ui/src/modals/VideoModal.tsx b/apps/ui/src/modals/VideoModal.tsx
@@ -0,0 +1,68 @@
+import withRenderModal from 'hocs/withRenderModal'
+
+import Modal from '@l3-lib/ui-core/dist/Modal'
+
+import IconButton from '@l3-lib/ui-core/dist/IconButton'
+import Close from '@l3-lib/ui-core/dist/icons/Close'
+
+import { useModal } from 'hooks'
+import styled from 'styled-components'
+import { StyledButtonWrapper } from './AgentViewModal'
+
+type VideoModalProps = {
+  data: {
+    videoSrc: string
+  }
+}
+
+const VideoModal = ({ data }: VideoModalProps) => {
+  const { closeModal } = useModal()
+
+  const { videoSrc } = data
+
+  return (
+    <StyledModal
+      onClose={() => closeModal('video-modal')}
+      show
+      backgroundColor='dark'
+      hideCloseButton
+    >
+      <StyledModalBody>
+        <StyledIframe
+          width='900'
+          height='600'
+          src={`https://www.youtube.com/embed/${videoSrc}`}
+          title='YouTube video player'
+          frameBorder='0'
+          allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+          allowFullScreen
+        ></StyledIframe>
+      </StyledModalBody>
+
+      <StyledButtonWrapper>
+        <IconButton
+          size={IconButton.sizes.XS}
+          icon={() => <Close />}
+          kind={IconButton.kinds.TERTIARY}
+          onClick={() => closeModal('video-modal')}
+        />
+      </StyledButtonWrapper>
+    </StyledModal>
+  )
+}
+
+export default withRenderModal('video-modal')(VideoModal)
+
+const StyledModalBody = styled.div`
+  padding-top: 10px;
+`
+
+const StyledModal = styled(Modal)`
+  .components-Modal-Modal-module__overlay--OO00T {
+    backdrop-filter: unset;
+  }
+`
+const StyledIframe = styled.iframe`
+  border-radius: 10px;
+  margin: auto;
+`
diff --git a/apps/ui/src/pages/Agents/AgentForm/CreateAgentForm.tsx b/apps/ui/src/pages/Agents/AgentForm/CreateAgentForm.tsx
@@ -21,6 +21,9 @@ import { t } from 'i18next'
 import { StyledFormWrapper } from 'styles/formStyles.css'
 import { useGetAccountModule } from 'utils/useGetAccountModule'
 
+import { StyledCombiner } from 'pages/Datasource/DatasourceForm/CreateDatasourceForm'
+import AgentDemoButton from './components/AgentDemoButton'
+
 const CreateAgentForm = () => {
   const { formik, isLoading } = useCreateAgent()
 
@@ -34,7 +37,11 @@ const CreateAgentForm = () => {
       <StyledSectionWrapper>
         <StyledHeaderGroup className='header_group'>
           <div>
-            <StyledSectionTitle>{`${t('add-agent')}`}</StyledSectionTitle>
+            <StyledCombiner>
+              <StyledSectionTitle>{`${t('add-agent')}`}</StyledSectionTitle>
+
+              <AgentDemoButton />
+            </StyledCombiner>
             {/* <StyledSectionDescription>{`${t('agent-description')}`}</StyledSectionDescription> */}
           </div>
 

diff --git a/apps/ui/src/pages/Agents/AgentForm/CreateAgentTempate.tsx b/apps/ui/src/pages/Agents/AgentForm/CreateAgentTempate.tsx
@@ -20,6 +20,8 @@ import { useAgentTemplatesService } from 'services/discover/useAgentTemplatesSer
 import TypographyPrimary from 'components/Typography/Primary'
 import { useCreateAgent } from '../useCreateAgent'
 import { t } from 'i18next'
+import { StyledCombiner } from 'pages/Datasource/DatasourceForm/CreateDatasourceForm'
+import AgentDemoButton from './components/AgentDemoButton'
 
 const CreateAgentTemplate = () => {
   const { refetchAgent } = useCreateAgent()
@@ -34,7 +36,11 @@ const CreateAgentTemplate = () => {
     <StyledSectionWrapper>
       <StyledHeaderGroup className='header_group'>
         <div>
-          <StyledSectionTitle>{`${t('add-agent')}`}</StyledSectionTitle>
+          <StyledCombiner>
+            <StyledSectionTitle>{`${t('add-agent')}`}</StyledSectionTitle>
+
+            <AgentDemoButton />
+          </StyledCombiner>
           {/* <StyledSectionDescription>
             Here are all your agents, managing tasks and operations.
           </StyledSectionDescription> */}
@@ -96,7 +102,7 @@ const StyledTemplatesWrapper = styled.div`
 
   height: calc(100vh - 225px);
 
-  max-height: 1000px;
+  max-height: 2500px;
   overflow-y: auto;
   padding: 0 20px;
   width: 100%;

diff --git a/apps/ui/src/pages/Agents/AgentForm/EditAgentForm.tsx b/apps/ui/src/pages/Agents/AgentForm/EditAgentForm.tsx
@@ -18,6 +18,8 @@ import ComponentsWrapper from 'components/ComponentsWrapper/ComponentsWrapper'
 import { t } from 'i18next'
 import { StyledFormWrapper } from 'styles/formStyles.css'
 import { useGetAccountModule } from 'utils/useGetAccountModule'
+import { StyledCombiner } from 'pages/Datasource/DatasourceForm/CreateDatasourceForm'
+import AgentDemoButton from './components/AgentDemoButton'
 
 const EditAgentForm = () => {
   const { t } = useTranslation()
@@ -32,10 +34,14 @@ const EditAgentForm = () => {
       <StyledSectionWrapper>
         <StyledHeaderGroup className='header_group'>
           <div>
-            <StyledSectionTitle>{`${t('edit-agent')}`}</StyledSectionTitle>
             {/* <StyledSectionDescription>
               Here are all your agents, managing tasks and operations.
             </StyledSectionDescription> */}
+            <StyledCombiner>
+              <StyledSectionTitle>{`${t('edit-agent')}`}</StyledSectionTitle>
+
+              <AgentDemoButton />
+            </StyledCombiner>
           </div>
 
           <StyledButtonWrapper>

diff --git a/apps/ui/src/pages/Agents/AgentForm/components/AgentDemoButton.tsx b/apps/ui/src/pages/Agents/AgentForm/components/AgentDemoButton.tsx
@@ -0,0 +1,19 @@
+import DemoButton from 'components/DemoButton'
+import { useModal } from 'hooks'
+
+const AgentDemoButton = () => {
+  const { openModal } = useModal()
+
+  return (
+    <DemoButton
+      onClick={() =>
+        openModal({
+          name: 'video-modal',
+          data: { videoSrc: import.meta.env.REACT_APP_YOUTUBE_VIDEO_ID },
+        })
+      }
+    />
+  )
+}
+
+export default AgentDemoButton
diff --git a/apps/ui/src/pages/Agents/AgentView/AgentView.tsx b/apps/ui/src/pages/Agents/AgentView/AgentView.tsx
@@ -61,57 +61,33 @@ const AgentView = ({ agentData }: { agentData?: AgentWithConfigs }) => {
 
           <StyledRightColumn>
             {system_message?.length ? (
-              <AdditionalInfoBox items={[system_message]} title={t('system-message')} />
+              <AdditionalInfoBox items={[system_message]} title={t('system-message')} noCount />
             ) : null}
 
             {tools?.length > 0 && <AgentToolkits tools={tools} />}
 
             {datasources?.length > 0 && <AgentDatasources datasources={datasources} />}
 
-            {goals?.length > 0 && (
-              <AdditionalInfoBox
-                items={goals}
-                title={goals.length === 1 ? `${t('goal')}` : `${goals.length} ${t('goals')}`}
-              />
-            )}
+            {goals?.length > 0 && <AdditionalInfoBox items={goals} title={'goal'} />}
 
             {constraints?.length > 0 && (
-              <AdditionalInfoBox
-                items={constraints}
-                title={
-                  constraints.length === 1
-                    ? `${t('constraint')}`
-                    : `${constraints.length} ${t('constraints')}`
-                }
-              />
+              <AdditionalInfoBox items={constraints} title={'constraint'} />
             )}
 
             {instructions?.length > 0 && (
-              <AdditionalInfoBox
-                items={instructions}
-                title={
-                  instructions.length === 1
-                    ? `${t('instruction')}`
-                    : `${instructions.length} ${t('instructions')}`
-                }
-              />
+              <AdditionalInfoBox items={instructions} title={'instruction'} />
             )}
 
             {suggestions?.length > 0 && (
-              <AdditionalInfoBox
-                items={suggestions}
-                title={
-                  suggestions.length === 1
-                    ? `${t('suggestion')}`
-                    : `${suggestions.length} ${t('suggestions')}`
-                }
-              />
+              <AdditionalInfoBox items={suggestions} title={'suggestion'} />
             )}
 
-            {greeting?.length > 0 && <AdditionalInfoBox items={[greeting]} title={t('greeting')} />}
+            {greeting?.length > 0 && (
+              <AdditionalInfoBox items={[greeting]} title={t('greeting')} noCount />
+            )}
 
             {text?.length > 0 && (
-              <AdditionalInfoBox items={[text]} title={t('base-system-message')} />
+              <AdditionalInfoBox items={[text]} title={t('base-system-message')} noCount />
             )}
           </StyledRightColumn>
         </StyledInnerWrapper>