Merge pull request #203 from l3vels/feat/focus-mode

Feat: Focus mode
l3vels · Oct 4, 2023 · 0d868e4 · 0d868e4
2 parents 53dd6e8 + a03643a
commit 0d868e4
Show file tree

Hide file tree

Showing 12 changed files with 250 additions and 113 deletions.
diff --git a/apps/ui/src/@types/index.d.ts b/apps/ui/src/@types/index.d.ts
@@ -113,6 +113,8 @@ declare module '@l3-lib/ui-core/dist/icons/Web'
 declare module '@l3-lib/ui-core/dist/icons/StarOutline'
 declare module '@l3-lib/ui-core/dist/icons/ShareOutline'
 declare module '@l3-lib/ui-core/dist/icons/Share'
+declare module '@l3-lib/ui-core/dist/icons/Show'
+declare module '@l3-lib/ui-core/dist/icons/Hide'
 declare module '@l3-lib/ui-core/dist/icons/Link'
 declare module '@l3-lib/ui-core/dist/icons/Download'
 declare module '@l3-lib/ui-core/dist/icons/Team'

diff --git a/apps/ui/src/components/ChatCards/TeamChatCard.tsx b/apps/ui/src/components/ChatCards/TeamChatCard.tsx
@@ -91,7 +91,8 @@ export const StyledAgentWrapper = styled.div<{ picked: boolean }>`
   gap: 5px;
 
   padding: 10px;
-  width: 350px;
+  width: 100%;
+  max-width: 350px;
 
   /* background: rgba(255, 255, 255, 0.1); */
 

diff --git a/apps/ui/src/components/ChatSwitcher/ChatSwitcher.tsx b/apps/ui/src/components/ChatSwitcher/ChatSwitcher.tsx
@@ -201,16 +201,17 @@ const StyledRoot = styled.div<{ collapsed: boolean; theme: DefaultTheme }>`
   position: absolute;
   top: 50%;
   left: 0;
-  z-index: 2147483647;
+  z-index: 2000000;
   transform: translateY(-50%);
   /* background: red; */
   display: flex;
   flex-direction: column;
   justify-content: center;
 
-  height: 80%;
+  /* height: 80%; */
   /* width: 110px; */
-
+  padding-right: 10px;
+  /* margin-left: 20px; */
   @keyframes slideAnimation {
     from {
       left: 0; /* Element slides to the right and is fully visible */
@@ -226,7 +227,7 @@ const StyledRoot = styled.div<{ collapsed: boolean; theme: DefaultTheme }>`
     p.collapsed &&
     css`
       /* width: 10px; */
-      left: -100px;
+      left: -80px;
       overflow: hidden;
       /* animation: slideAnimation 0.2s ease-in-out; */
 

diff --git a/apps/ui/src/components/ChatSwitcher/useChatSwitcher.ts b/apps/ui/src/components/ChatSwitcher/useChatSwitcher.ts
@@ -25,21 +25,21 @@ export const useChatSwitcher = () => {
     }
   }, [])
 
-  useEffect(() => {
-    if (expand) {
-      setShowSwitcher(false)
-    } else {
-      setShowSwitcher(true)
-    }
-  }, [expand])
+  // useEffect(() => {
+  //   if (expand) {
+  //     setShowSwitcher(false)
+  //   } else {
+  //     setShowSwitcher(true)
+  //   }
+  // }, [expand])
 
   const handleMouseLeave = () => {
     const clearHoverTimer = () => {
       clearTimeout(hoverTimeout)
     }
     clearHoverTimer()
 
-    if (window.innerWidth <= 1000 || expand) {
+    if (window.innerWidth <= 1000) {
       setTimeout(() => {
         setShowSwitcher(false)
       }, 1000)

diff --git a/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx b/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx
@@ -10,58 +10,93 @@ import TwitterLogo from 'assets/tools/twitter.png'
 import TypographyPrimary from 'components/Typography/Primary'
 import { ButtonTertiary } from 'components/Button/Button'
 
+import Hide from '@l3-lib/ui-core/dist/icons/Hide'
+import Show from '@l3-lib/ui-core/dist/icons/Show'
+import { useContext } from 'react'
+import { LayoutContext } from 'contexts'
+
 export const openLinkTab = (url: string) => {
   window.open(url, '_blank')
 }
 
 const HeaderButtons = () => {
+  const { expand, onChangeLayout } = useContext(LayoutContext)
+
   return (
     <StyledButtonsWrapper>
-      <ButtonTertiary
-        size={Button.sizes.SMALL}
-        onClick={() => openLinkTab(import.meta.env.REACT_APP_TWITTER_LINK)}
+      <Tooltip
+        content={() => <span>Focus Mode</span>}
+        position={Tooltip.positions.BOTTOM}
+        tooltipSize='small'
+      >
+        <ButtonTertiary size={'small'} onClick={() => onChangeLayout(!expand)}>
+          {expand ? <Hide size={26} /> : <Show size={26} />}
+        </ButtonTertiary>
+      </Tooltip>
+
+      <Tooltip
+        content={() => <span>Twitter</span>}
+        position={Tooltip.positions.BOTTOM}
+        tooltipSize='small'
       >
-        <StyledInnerButtonWrapper>
-          <StyledImageWrapper>
-            <StyledImg src={TwitterLogo} customScale={1} />
-          </StyledImageWrapper>
-          <TypographyPrimary
+        <ButtonTertiary
+          size={Button.sizes.SMALL}
+          onClick={() => openLinkTab(import.meta.env.REACT_APP_TWITTER_LINK)}
+        >
+          <StyledInnerButtonWrapper>
+            <StyledImageWrapper>
+              <StyledImg src={TwitterLogo} customScale={1} />
+            </StyledImageWrapper>
+            {/* <TypographyPrimary
             value='Twitter'
             type={Typography.types.LABEL}
             size={Typography.sizes.sm}
-          />
-        </StyledInnerButtonWrapper>
-      </ButtonTertiary>
+          /> */}
+          </StyledInnerButtonWrapper>
+        </ButtonTertiary>
+      </Tooltip>
 
-      <ButtonTertiary
-        size={Button.sizes.SMALL}
-        onClick={() => openLinkTab(import.meta.env.REACT_APP_DISCORD_LINK)}
+      <Tooltip
+        content={() => <span>Discord</span>}
+        position={Tooltip.positions.BOTTOM}
+        tooltipSize='small'
       >
-        <StyledInnerButtonWrapper>
-          <StyledDiscordIcon size='20' />
-          <TypographyPrimary
+        <ButtonTertiary
+          size={Button.sizes.SMALL}
+          onClick={() => openLinkTab(import.meta.env.REACT_APP_DISCORD_LINK)}
+        >
+          <StyledInnerButtonWrapper>
+            <StyledDiscordIcon size='20' />
+            {/* <TypographyPrimary
             value='Discord'
             type={Typography.types.LABEL}
             size={Typography.sizes.sm}
-          />
-        </StyledInnerButtonWrapper>
-      </ButtonTertiary>
+          /> */}
+          </StyledInnerButtonWrapper>
+        </ButtonTertiary>
+      </Tooltip>
 
-      <ButtonTertiary
-        size={Button.sizes.SMALL}
-        onClick={() => openLinkTab(import.meta.env.REACT_APP_GITHUB_LINK)}
+      <Tooltip
+        content={() => <span>Github</span>}
+        position={Tooltip.positions.BOTTOM}
+        tooltipSize='small'
       >
-        <StyledInnerButtonWrapper>
-          <StyledImageWrapper>
-            <StyledImg src={githubIcon} />
-          </StyledImageWrapper>
-          <TypographyPrimary
+        <ButtonTertiary
+          size={Button.sizes.SMALL}
+          onClick={() => openLinkTab(import.meta.env.REACT_APP_GITHUB_LINK)}
+        >
+          <StyledInnerButtonWrapper>
+            <StyledImageWrapper>
+              <StyledImg src={githubIcon} />
+            </StyledImageWrapper>
+            {/* <TypographyPrimary
             value='Github'
             type={Typography.types.LABEL}
             size={Typography.sizes.sm}
-          />
-        </StyledInnerButtonWrapper>
-      </ButtonTertiary>
+          /> */}
+          </StyledInnerButtonWrapper>
+        </ButtonTertiary>
+      </Tooltip>
     </StyledButtonsWrapper>
   )
 }

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMembers/components/MemberText.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMembers/components/MemberText.tsx
@@ -11,7 +11,7 @@ type MemberTextProps = {
 }
 
 const MemberText = ({ name, role }: MemberTextProps) => {
-  const { shortText: shortName } = textSlicer(name, 20)
+  const { shortText: shortName } = textSlicer(name, 14)
 
   let shortRole
   if (role) {

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMessageList/ChatMessageListV2.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMessageList/ChatMessageListV2.tsx
@@ -253,11 +253,11 @@ const StyledWrapper = styled.div<{ isHidden?: boolean; isReplying?: boolean }>`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  /* align-items: center; */
+  align-items: center;
   gap: 5px;
+
   padding-top: 10px;
   /* margin-right: 50px; */
-
   .visible-reply {
     opacity: 1;
   }
@@ -288,10 +288,11 @@ const StyledLoaderWrapper = styled.div`
   margin-top: 30px;
 
   width: calc(100% - 50px);
-  max-width: 850px;
+  max-width: 800px;
 `
 const StyledReplyMessageContainer = styled.div`
   transition: opacity 1000ms;
+  /* width: 100%; */
   opacity: 0;
   height: 30px;
   max-height: 30px;

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanMessage.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanMessage.tsx
@@ -91,7 +91,7 @@ export const StyledMessageWrapper = styled.div<{ secondary?: boolean }>`
   padding-right: 10px;
   min-width: 400px;
   width: calc(100% - 100px);
-  max-width: 850px;
+  max-width: 800px;
 
   :hover {
     .actions {

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanReply.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanReply.tsx
@@ -54,7 +54,8 @@ export const StyledReplyWrapper = styled.div`
 
   width: calc(100vw - 100px);
 
-  max-width: 850px;
+  max-width: 800px;
+
   height: 20px;
   /* background: red; */
   gap: 10px;

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatV2.tsx b/apps/ui/src/modals/AIChatModal/components/ChatV2.tsx
@@ -34,7 +34,6 @@ import { useAgentByIdService } from 'services/agent/useAgentByIdService'
 
 import { useTeamOfAgentsByIdService } from 'services/team/useTeamOfAgentsByIdService'
 
-import ChatMembers from './ChatMembers'
 import { ChatStatus, TeamOfAgentsType } from 'types'
 import useStopChatService from 'services/chat/useStopChatService'
 import { useConfigsService } from 'services/config/useConfigsService'
@@ -286,10 +285,6 @@ const ChatV2 = () => {
 
   return (
     <StyledWrapper>
-      <StyledMembersWrapper>
-        <ChatMembers agentById={agentById || chatById?.agent} teamOfAgents={teamOfAgents} />
-      </StyledMembersWrapper>
-
       <StyledMessages>
         <StyledChatWrapper>
           <ChatMessageListV2
@@ -461,7 +456,8 @@ const StyledForm = styled.form`
   border-radius: 100px;
   /* cursor: pointer; */
 
-  width: fit-content;
+  width: 100%;
+  max-width: 800px;
   min-height: 48px;
   height: fit-content;
   max-height: 250px;
@@ -503,14 +499,15 @@ const StyledChatFooter = styled.div`
 
   display: flex;
   /* flex-direction: column; */
-  /* justify-content: center; */
+  justify-content: center;
 
   width: 100%;
+  padding: 0 20px;
 `
 
 const StyledButtonGroup = styled.div`
   display: flex;
-  /* justify-content: center; */
+  justify-content: center;
 
   padding: 16px 0;
   width: 100%;
@@ -528,14 +525,14 @@ const StyledChatWrapper = styled.div`
 `
 
 const StyledSuggestionsContainer = styled.div`
+  position: absolute;
   display: flex;
-  width: calc(100vw - 100px);
-
+  width: 100%;
   max-width: 800px;
   align-items: center;
   gap: 12px;
 
-  overflow-y: scroll;
+  overflow-x: auto;
 
   ::-webkit-scrollbar {
     display: none;
@@ -556,10 +553,11 @@ const StyledFileWrapper = styled.div`
 `
 
 const StyledInputWrapper = styled.div<{ secondary?: boolean }>`
-  width: calc(100vw - 700px);
-  max-width: 600px;
-  padding-bottom: 2px;
+  /* width: calc(100vw - 600px);
+  max-width: 600px; */
 
+  padding-bottom: 2px;
+  width: 100%;
   ${p =>
     p.secondary &&
     css`
@@ -575,6 +573,7 @@ const StyledChatInputWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
 `
 const StyledChatBottom = styled.div`
   display: flex;
@@ -583,23 +582,3 @@ const StyledChatBottom = styled.div`
   padding: 0 50px;
   width: 100%;
 `
-const StyledMembersWrapper = styled.div`
-  position: absolute;
-  top: 20px;
-  right: 5px;
-  border-radius: 23px;
-  z-index: 12000000;
-  padding: 10px;
-
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-
-  /* background: rgba(0, 0, 0, 0.3); */
-
-  height: calc(100vh - 240px);
-
-  @media only screen and (max-width: 1400px) {
-    display: none;
-  }
-`
diff --git a/apps/ui/src/providers/LayoutProvider.tsx b/apps/ui/src/providers/LayoutProvider.tsx
@@ -1,15 +1,23 @@
 import React, { useEffect, useState } from 'react'
 
 import { LayoutContext } from 'contexts'
-import { useLocation } from 'react-router-dom'
+// import { useLocation } from 'react-router-dom'
 
 export const LayoutProvider = ({ children }: any) => {
-  const [expand, setExpand] = useState(false)
-  const location = useLocation()
+  const [expand, setExpand] = useState(localStorage.getItem('expand') === 'true' ? true : false)
+  // const location = useLocation()
+
+  // useEffect(() => {
+  //   setExpand(false)
+  // }, [location.pathname])
 
   useEffect(() => {
-    setExpand(false)
-  }, [location.pathname])
+    if (expand) {
+      localStorage.setItem('expand', 'true')
+    } else {
+      localStorage.setItem('expand', 'false')
+    }
+  }, [expand])
 
   const onChangeLayout = () => setExpand(prevValue => !prevValue)