Merge pull request #205 from l3vels/fix/chat-focus

Fix/chat focus
l3vels · Oct 5, 2023 · 120fe8e · 120fe8e
2 parents c44cad4 + 1610c4d
commit 120fe8e
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 25 deletions.
diff --git a/apps/ui/src/components/ChatCards/CustomerChatCard.tsx b/apps/ui/src/components/ChatCards/CustomerChatCard.tsx
@@ -3,6 +3,7 @@ import { StyledAgentWrapper, StyledIconButtonWrapper } from './TeamChatCard'
 
 import IconButton from '@l3-lib/ui-core/dist/IconButton'
 import { StyledDeleteIcon } from 'pages/TeamOfAgents/TeamOfAgentsCard/TeamOfAgentsCard'
+import AvatarGenerator from 'components/AvatarGenerator/AvatarGenerator'
 
 type CustomerChatCardProps = {
   onClick: () => void
@@ -21,13 +22,13 @@ const CustomerChatCard = ({ onClick, picked, name, onDeleteClick }: CustomerChat
 
   return (
     <StyledAgentWrapper onClick={onClick} picked={picked}>
-      {/* <AvatarGenerator name={team?.name} size={30} avatar={team.avatar} /> */}
+      <AvatarGenerator name={name} size={30} />
       <MemberText name={name} />
 
       <StyledIconButtonWrapper className='hiddenButton'>
         {onDeleteClick && (
           <IconButton
-            onClick={onDeleteClick}
+            onClick={handleDelete}
             icon={() => <StyledDeleteIcon />}
             size={IconButton.sizes.SMALL}
             kind={IconButton.kinds.TERTIARY}

diff --git a/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx b/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx
@@ -14,25 +14,29 @@ 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'
+import { useLocation } from 'react-router-dom'
 
 export const openLinkTab = (url: string) => {
   window.open(url, '_blank')
 }
 
 const HeaderButtons = () => {
   const { expand, onChangeLayout } = useContext(LayoutContext)
+  const location = useLocation()
 
   return (
     <StyledButtonsWrapper>
-      <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>
+      {location.pathname.includes('/chat') && (
+        <Tooltip
+          content={() => <span>Focus: cmd+SHIFT+F</span>}
+          position={Tooltip.positions.BOTTOM}
+          tooltipSize='small'
+        >
+          <ButtonTertiary size={'small'} onClick={() => onChangeLayout(!expand)}>
+            {expand ? <Show size={26} /> : <Hide size={26} />}
+          </ButtonTertiary>
+        </Tooltip>
+      )}
 
       <Tooltip
         content={() => <span>Twitter</span>}

diff --git a/apps/ui/src/providers/LayoutProvider.tsx b/apps/ui/src/providers/LayoutProvider.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
+import { useHotkeys } from 'react-hotkeys-hook'
+
 import { LayoutContext } from 'contexts'
 // import { useLocation } from 'react-router-dom'
 
@@ -11,6 +13,15 @@ export const LayoutProvider = ({ children }: any) => {
   //   setExpand(false)
   // }, [location.pathname])
 
+  const commandFunction = () => {
+    // Replace this with your desired functionality
+    setExpand(!expand)
+  }
+
+  // Use the useHotkeys hook to define your keyboard shortcut
+  useHotkeys('cmd+shift+f', commandFunction)
+  useHotkeys('ctrl+shift+f', commandFunction)
+
   useEffect(() => {
     if (expand) {
       localStorage.setItem('expand', 'true')

diff --git a/apps/ui/src/routes/ChatRouteLayout.tsx b/apps/ui/src/routes/ChatRouteLayout.tsx
@@ -248,8 +248,20 @@ const StyledContainer = styled.div`
   justify-content: center;
   width: 100%;
   overflow: hidden;
+
+  position: relative;
 `
 const StyledLeftColumn = styled.div<{ right?: boolean; isHidden?: boolean }>`
+  /* background: ${({ theme }) => theme.body.cardBgColor}; */
+  border: ${({ theme }) => theme.body.secondaryBorder};
+  border-radius: 10px;
+
+  position: absolute;
+  left: 0;
+  z-index: 10000;
+
+  backdrop-filter: blur(100px);
+
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -259,35 +271,38 @@ const StyledLeftColumn = styled.div<{ right?: boolean; isHidden?: boolean }>`
   padding-left: 100px;
 
   height: 100%;
-  min-width: 500px;
+  min-width: 450px;
 
   max-height: calc(100vh - 185px);
 
-  margin-top: 30px;
+  margin-top: 10px;
 
   transition: margin-left 0.3s ease-in-out;
 
   ${props =>
     props.isHidden &&
     css`
-      margin-left: -500px;
+      margin-left: -450px;
       overflow: hidden;
       cursor: pointer;
-      :hover {
-        background: rgba(255, 255, 255, 0.1);
-      }
     `}
 `
 const StyledRightColumn = styled.div<{ isHidden?: boolean }>`
+  position: absolute;
+  right: 0;
+  z-index: 10000;
+
+  backdrop-filter: blur(100px);
+
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
 
   height: 100%;
-  min-width: 500px;
+  min-width: 320px;
 
-  max-height: calc(100vh - 185px);
+  max-height: calc(100vh - 205px);
 
   margin-top: 30px;
   padding-right: 10px;
@@ -296,17 +311,14 @@ const StyledRightColumn = styled.div<{ isHidden?: boolean }>`
   ${props =>
     props.isHidden &&
     css`
-      margin-right: -500px;
+      margin-right: -320px;
       overflow: hidden;
       cursor: pointer;
-      :hover {
-        background: rgba(255, 255, 255, 0.1);
-      }
     `}
 `
 
 const StyledMainWrapper = styled.div`
-  margin-top: 30px;
+  /* margin-top: 30px; */
 
   display: flex;
   justify-content: center;
@@ -329,7 +341,7 @@ const StyledOutletWrapper = styled.div`
 `
 const StyledShowButton = styled.div<{ isRight?: boolean }>`
   height: 100%;
-  width: 9%;
+  width: calc(20% - 120px);
 
   cursor: pointer;