From adf87fa73e6ee2572fd1bc305fa66e1115693001 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Wed, 9 Oct 2024 10:40:04 +0500 Subject: [PATCH 1/3] fix(cutting-off-tooltip): resolved cutting off tooltip at ai-answer --- .../App/SideBar/AiSummary/AiAnswer/index.tsx | 5 +-- .../utils/AiSummaryHighlight/index.tsx | 43 ++++++------------- src/components/common/ToolTip/index.tsx | 4 -- src/utils/colors/index.tsx | 1 + 4 files changed, 15 insertions(+), 38 deletions(-) diff --git a/src/components/App/SideBar/AiSummary/AiAnswer/index.tsx b/src/components/App/SideBar/AiSummary/AiAnswer/index.tsx index bebefd227..14c80410e 100644 --- a/src/components/App/SideBar/AiSummary/AiAnswer/index.tsx +++ b/src/components/App/SideBar/AiSummary/AiAnswer/index.tsx @@ -35,7 +35,6 @@ export const AiAnswer = ({ answer, entities, handleLoaded, hasBeenRendered }: Pr const { setBudget } = useUserStore((s) => s) const [displayedText, setDisplayedText] = useState('') const [highlightedEntities, setHighlightedEntities] = useState(entities) - const [mousePosition, setMousePosition] = useState(0) const [isDescriptionComplete, setIsDescriptionComplete] = useState(true) useEffect(() => { @@ -78,15 +77,13 @@ export const AiAnswer = ({ answer, entities, handleLoaded, hasBeenRendered }: Pr } }, [entities, highlightedEntities]) - const handleMouseMove = (event: React.MouseEvent) => { + const handleMouseMove = () => { setIsDescriptionComplete(false) - setMousePosition(event.clientX) } const responseTextDisplay = highlightAiSummary( displayedText, handleSubmit, - mousePosition, highlightedEntities, isDescriptionComplete, ) diff --git a/src/components/App/SideBar/AiSummary/utils/AiSummaryHighlight/index.tsx b/src/components/App/SideBar/AiSummary/utils/AiSummaryHighlight/index.tsx index 5633a5ef7..60d0e09ea 100644 --- a/src/components/App/SideBar/AiSummary/utils/AiSummaryHighlight/index.tsx +++ b/src/components/App/SideBar/AiSummary/utils/AiSummaryHighlight/index.tsx @@ -1,5 +1,5 @@ +import Tooltip from '@mui/material/Tooltip' import styled, { keyframes } from 'styled-components' -import { Tooltip } from '~/components/common/ToolTip' import { ExtractedEntity } from '~/types' import { colors } from '~/utils' @@ -41,7 +41,6 @@ const Highlight = styled.span<{ animate: boolean }>` export function highlightAiSummary( sDescription: string, handleSubmit: (search: string) => void, - mousePosition: number, entities?: ExtractedEntity[], isDescriptionComplete?: boolean, ) { @@ -59,16 +58,6 @@ export function highlightAiSummary( const parts = sDescription.split(regex) - let positionLeft: string - - if (mousePosition <= 180) { - positionLeft = '145%' - } else if (mousePosition >= 250) { - positionLeft = '10%' - } else { - positionLeft = '50%' - } - return ( <> {parts.map((part, index) => { @@ -78,7 +67,7 @@ export function highlightAiSummary( const uniqueKey = `${entity.entity}-${index}` return ( - + handleSubmit(part)}> {part} @@ -96,23 +85,17 @@ function escapeRegExp(string: string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') } -const StyledTooltip = styled(({ className, positionLeft, ...props }) => ( - -))` - & .tooltip-content { +const StyledTooltip = styled((props) => )` + & .MuiTooltip-tooltip { + background-color: ${colors.BG4}; color: white; + font-family: Barlow; + font-size: 14px; + font-weight: 500; + max-width: 180px; + padding: 10px; + transition: opacity 0.3s; + text-align: start; + white-space: normal; } ` diff --git a/src/components/common/ToolTip/index.tsx b/src/components/common/ToolTip/index.tsx index c468f8650..46f23ad1c 100644 --- a/src/components/common/ToolTip/index.tsx +++ b/src/components/common/ToolTip/index.tsx @@ -14,7 +14,6 @@ interface TooltipProps { minWidth?: string whiteSpace?: string textAlign?: string - mrLeft?: string } const TooltipContainer = styled.div` @@ -35,7 +34,6 @@ const TooltipText = styled.div<{ minWidth?: string whiteSpace?: string textAlign?: string - mrLeft?: string }>` visibility: hidden; width: auto; @@ -86,7 +84,6 @@ export const Tooltip = ({ whiteSpace, position, textAlign, - mrLeft, }: TooltipProps) => ( {children} @@ -98,7 +95,6 @@ export const Tooltip = ({ fontWeight={fontWeight} margin={margin} minWidth={minWidth} - mrLeft={mrLeft} padding={padding} position={position} textAlign={textAlign} diff --git a/src/utils/colors/index.tsx b/src/utils/colors/index.tsx index 2864808b5..8564c1fd1 100644 --- a/src/utils/colors/index.tsx +++ b/src/utils/colors/index.tsx @@ -74,6 +74,7 @@ export const colors = { BG2: 'rgba(22, 23, 29, 1)', BG2_ACTIVE_INPUT: 'rgba(16, 17, 22, 1)', BG3: 'rgba(28, 30, 38, 1)', + BG4: 'rgba(30, 30, 35, 0.9)', GRAY3: 'rgba(186, 193, 198, 1)', GRAY6: '#909BAA', GRAY7: 'rgba(107, 122, 141, 1)', From 6d0e6f7df43892badbedf36767f518ef78f900e7 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Wed, 9 Oct 2024 10:58:28 +0500 Subject: [PATCH 2/3] fix(cutting-off-tooltip): unit test for cutting of tooltip --- .../AiSummary/AiAnswer/__tests__/index.tsx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/components/App/SideBar/AiSummary/AiAnswer/__tests__/index.tsx diff --git a/src/components/App/SideBar/AiSummary/AiAnswer/__tests__/index.tsx b/src/components/App/SideBar/AiSummary/AiAnswer/__tests__/index.tsx new file mode 100644 index 000000000..3da15176f --- /dev/null +++ b/src/components/App/SideBar/AiSummary/AiAnswer/__tests__/index.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import { render, screen, fireEvent, waitFor } from '@testing-library/react' +import { AiAnswer } from '../index' +import { ExtractedEntity } from '~/types/index' + +describe('AiAnswer Component', () => { + const mockHandleLoaded = jest.fn() + + const renderComponent = (answer, entities) => { + render() + } + + it('should display shows tooltip on hover over entity', async () => { + const entities: ExtractedEntity[] = [ + { + entity: 'React', + description: 'A JavaScript library for building user interfaces.', + }, + ] + + renderComponent('Learn about React and its features.', entities) + + await waitFor(() => expect(screen.getByText(/React/)).toBeInTheDocument()) + + const reactEntity = screen.getByText((content, element) => { + return content.startsWith('React') && element.tagName === 'SPAN' + }) + + fireEvent.mouseOver(reactEntity) + + const tooltip = await screen.findByText('A JavaScript library for building user interfaces.') + expect(tooltip).toBeVisible() + }) +}) From b9233ee0a6c5a299921bc3aced843436114f94cc Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Wed, 9 Oct 2024 11:02:01 +0500 Subject: [PATCH 3/3] fix(cutting-off-tooltip): resolved eslint error --- .../App/SideBar/AiSummary/AiAnswer/__tests__/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/App/SideBar/AiSummary/AiAnswer/__tests__/index.tsx b/src/components/App/SideBar/AiSummary/AiAnswer/__tests__/index.tsx index 3da15176f..93dc77b58 100644 --- a/src/components/App/SideBar/AiSummary/AiAnswer/__tests__/index.tsx +++ b/src/components/App/SideBar/AiSummary/AiAnswer/__tests__/index.tsx @@ -22,13 +22,14 @@ describe('AiAnswer Component', () => { await waitFor(() => expect(screen.getByText(/React/)).toBeInTheDocument()) - const reactEntity = screen.getByText((content, element) => { - return content.startsWith('React') && element.tagName === 'SPAN' - }) + const reactEntity = screen.getByText( + (content, element) => content.startsWith('React') && element.tagName === 'SPAN', + ) fireEvent.mouseOver(reactEntity) const tooltip = await screen.findByText('A JavaScript library for building user interfaces.') + expect(tooltip).toBeVisible() }) })