From 689864ad3bfccfa07779dc86f0040ffd71c1c5d6 Mon Sep 17 00:00:00 2001 From: levanion Date: Thu, 5 Oct 2023 10:14:58 +0400 Subject: [PATCH 1/8] fix: Focus button icon --- apps/ui/src/components/HeaderButtons/HeaderButtons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx b/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx index e180063f9..9de9136b8 100644 --- a/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx +++ b/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx @@ -30,7 +30,7 @@ const HeaderButtons = () => { tooltipSize='small' > onChangeLayout(!expand)}> - {expand ? : } + {expand ? : } From 3e6527c3f78ea9c74b69685b0bbbf450c9baf98d Mon Sep 17 00:00:00 2001 From: levanion Date: Thu, 5 Oct 2023 10:28:03 +0400 Subject: [PATCH 2/8] fix: Chat columns position --- apps/ui/src/routes/ChatRouteLayout.tsx | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/apps/ui/src/routes/ChatRouteLayout.tsx b/apps/ui/src/routes/ChatRouteLayout.tsx index 4f630100e..a483cef46 100644 --- a/apps/ui/src/routes/ChatRouteLayout.tsx +++ b/apps/ui/src/routes/ChatRouteLayout.tsx @@ -248,8 +248,16 @@ const StyledContainer = styled.div` justify-content: center; width: 100%; overflow: hidden; + + position: relative; ` const StyledLeftColumn = styled.div<{ right?: boolean; isHidden?: boolean }>` + position: absolute; + left: 0; + z-index: 10000; + + backdrop-filter: blur(100px); + overflow-y: auto; display: flex; flex-direction: column; @@ -263,7 +271,7 @@ const StyledLeftColumn = styled.div<{ right?: boolean; isHidden?: boolean }>` max-height: calc(100vh - 185px); - margin-top: 30px; + margin-top: 10px; transition: margin-left 0.3s ease-in-out; @@ -279,15 +287,21 @@ const StyledLeftColumn = styled.div<{ right?: boolean; isHidden?: boolean }>` `} ` 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,7 +310,7 @@ const StyledRightColumn = styled.div<{ isHidden?: boolean }>` ${props => props.isHidden && css` - margin-right: -500px; + margin-right: -320px; overflow: hidden; cursor: pointer; :hover { @@ -306,7 +320,7 @@ const StyledRightColumn = styled.div<{ isHidden?: boolean }>` ` const StyledMainWrapper = styled.div` - margin-top: 30px; + /* margin-top: 30px; */ display: flex; justify-content: center; From 8cb8e4b4b93bf8be9fd4c39bfb108e1c0458e4d3 Mon Sep 17 00:00:00 2001 From: levanion Date: Thu, 5 Oct 2023 12:14:45 +0400 Subject: [PATCH 3/8] fix: Focus button only on chat --- .../HeaderButtons/HeaderButtons.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx b/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx index 9de9136b8..1f0cd8149 100644 --- a/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx +++ b/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx @@ -14,6 +14,7 @@ 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') @@ -21,18 +22,21 @@ export const openLinkTab = (url: string) => { const HeaderButtons = () => { const { expand, onChangeLayout } = useContext(LayoutContext) + const location = useLocation() return ( - Focus Mode} - position={Tooltip.positions.BOTTOM} - tooltipSize='small' - > - onChangeLayout(!expand)}> - {expand ? : } - - + {location.pathname.includes('/chat') && ( + Focus Mode} + position={Tooltip.positions.BOTTOM} + tooltipSize='small' + > + onChangeLayout(!expand)}> + {expand ? : } + + + )} Twitter} From 42136a32027544438dfb8e1454397175604ebdd7 Mon Sep 17 00:00:00 2001 From: levanion Date: Thu, 5 Oct 2023 12:18:05 +0400 Subject: [PATCH 4/8] fix: Customer chat card design --- apps/ui/src/components/ChatCards/CustomerChatCard.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/ui/src/components/ChatCards/CustomerChatCard.tsx b/apps/ui/src/components/ChatCards/CustomerChatCard.tsx index 203a01181..47ef283c8 100644 --- 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 ( - {/* */} + {onDeleteClick && ( } size={IconButton.sizes.SMALL} kind={IconButton.kinds.TERTIARY} From 05683f689b0afa731d8edf1e90a355908f2231b5 Mon Sep 17 00:00:00 2001 From: levanion Date: Thu, 5 Oct 2023 12:22:48 +0400 Subject: [PATCH 5/8] fix: Chat left column border --- apps/ui/src/routes/ChatRouteLayout.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/ui/src/routes/ChatRouteLayout.tsx b/apps/ui/src/routes/ChatRouteLayout.tsx index a483cef46..b5fdf7be0 100644 --- a/apps/ui/src/routes/ChatRouteLayout.tsx +++ b/apps/ui/src/routes/ChatRouteLayout.tsx @@ -252,6 +252,10 @@ const StyledContainer = styled.div` 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; @@ -281,9 +285,6 @@ const StyledLeftColumn = styled.div<{ right?: boolean; isHidden?: boolean }>` margin-left: -500px; overflow: hidden; cursor: pointer; - :hover { - background: rgba(255, 255, 255, 0.1); - } `} ` const StyledRightColumn = styled.div<{ isHidden?: boolean }>` @@ -313,9 +314,6 @@ const StyledRightColumn = styled.div<{ isHidden?: boolean }>` margin-right: -320px; overflow: hidden; cursor: pointer; - :hover { - background: rgba(255, 255, 255, 0.1); - } `} ` From f5983af66e4044aa76c8270903292c3042b4defc Mon Sep 17 00:00:00 2001 From: levanion Date: Thu, 5 Oct 2023 12:32:51 +0400 Subject: [PATCH 6/8] fix: ShowButton width --- apps/ui/src/routes/ChatRouteLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/ui/src/routes/ChatRouteLayout.tsx b/apps/ui/src/routes/ChatRouteLayout.tsx index b5fdf7be0..002cd3a53 100644 --- a/apps/ui/src/routes/ChatRouteLayout.tsx +++ b/apps/ui/src/routes/ChatRouteLayout.tsx @@ -341,7 +341,7 @@ const StyledOutletWrapper = styled.div` ` const StyledShowButton = styled.div<{ isRight?: boolean }>` height: 100%; - width: 9%; + width: calc(20% - 120px); cursor: pointer; From 50082dcc8d0bcd75df89c6a9e0067bb217cf9566 Mon Sep 17 00:00:00 2001 From: levanion Date: Thu, 5 Oct 2023 13:33:10 +0400 Subject: [PATCH 7/8] feat: chat Focus cmd keys --- .../ui/src/components/HeaderButtons/HeaderButtons.tsx | 2 +- apps/ui/src/providers/LayoutProvider.tsx | 11 +++++++++++ apps/ui/src/routes/ChatRouteLayout.tsx | 5 +++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx b/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx index 1f0cd8149..0ab1678f0 100644 --- a/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx +++ b/apps/ui/src/components/HeaderButtons/HeaderButtons.tsx @@ -28,7 +28,7 @@ const HeaderButtons = () => { {location.pathname.includes('/chat') && ( Focus Mode} + content={() => Focus: cmd+SHIFT+F} position={Tooltip.positions.BOTTOM} tooltipSize='small' > diff --git a/apps/ui/src/providers/LayoutProvider.tsx b/apps/ui/src/providers/LayoutProvider.tsx index ff40bd114..a879a52e0 100644 --- 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 index 002cd3a53..68f6e6d1f 100644 --- a/apps/ui/src/routes/ChatRouteLayout.tsx +++ b/apps/ui/src/routes/ChatRouteLayout.tsx @@ -77,6 +77,11 @@ const ChatRouteLayout = () => { // } // }, []) + useEffect(() => { + setShowChats(!expand) + setShowInfo(!expand) + }, [expand]) + if (!user && !chatId) return return ( From 1610c4d2d7bc6f2ed3cf575cbfc2078c80d1c62b Mon Sep 17 00:00:00 2001 From: levanion Date: Thu, 5 Oct 2023 13:42:56 +0400 Subject: [PATCH 8/8] fix: reduced chat left column width --- apps/ui/src/routes/ChatRouteLayout.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/apps/ui/src/routes/ChatRouteLayout.tsx b/apps/ui/src/routes/ChatRouteLayout.tsx index 68f6e6d1f..2d7fcc00b 100644 --- a/apps/ui/src/routes/ChatRouteLayout.tsx +++ b/apps/ui/src/routes/ChatRouteLayout.tsx @@ -77,11 +77,6 @@ const ChatRouteLayout = () => { // } // }, []) - useEffect(() => { - setShowChats(!expand) - setShowInfo(!expand) - }, [expand]) - if (!user && !chatId) return return ( @@ -276,7 +271,7 @@ const StyledLeftColumn = styled.div<{ right?: boolean; isHidden?: boolean }>` padding-left: 100px; height: 100%; - min-width: 500px; + min-width: 450px; max-height: calc(100vh - 185px); @@ -287,7 +282,7 @@ const StyledLeftColumn = styled.div<{ right?: boolean; isHidden?: boolean }>` ${props => props.isHidden && css` - margin-left: -500px; + margin-left: -450px; overflow: hidden; cursor: pointer; `}