fix(ai-search): on hover render description of the entity

stakwork · Jul 18, 2024 · d442d53 · d442d53
1 parent fdabf04
commit d442d53
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 64 deletions.
diff --git a/src/components/App/SideBar/AiSummary/utils/AiSummaryHighlight/index.tsx b/src/components/App/SideBar/AiSummary/utils/AiSummaryHighlight/index.tsx
@@ -1,21 +1,21 @@
-import { Tooltip, tooltipClasses } from '@mui/material'
 import styled from 'styled-components'
+import { Tooltip } from '~/components/common/ToolTip'
 import { ExtractedEntity } from '~/types'
 import { colors } from '~/utils'
 
 export function highlightAiSummary(
-    sDescription: string,
-    handleSubmit: (search: string) => void,
-    entities?: ExtractedEntity[],
+  sDescription: string,
+  handleSubmit: (search: string) => void,
+  entities?: ExtractedEntity[],
 ) {
   if (!entities || entities.length === 0) {
     return sDescription
   }
 
   const sortedEntities = entities
-      .map((entity) => entity.entity)
-      .filter((entity) => typeof entity === 'string')
-      .sort((a, b) => b.length - a.length)
+    .map((entity) => entity.entity)
+    .filter((entity) => typeof entity === 'string')
+    .sort((a, b) => b.length - a.length)
 
   const escapedTerms = sortedEntities.map((entity) => escapeRegExp(entity))
   const regex = new RegExp(`(${escapedTerms.join('|')})`, 'gi')
@@ -24,44 +24,29 @@ export function highlightAiSummary(
   const highlighted = new Set()
 
   return (
-      <>
-        {parts.map((part) => {
-          const entity = entities.find((e) => e.entity.toLowerCase() === part.toLowerCase())
+    <>
+      {parts.map((part) => {
+        const entity = entities.find((e) => e.entity.toLowerCase() === part.toLowerCase())
 
-          if (entity && !highlighted.has(part.toLowerCase())) {
-            highlighted.add(part.toLowerCase())
+        if (entity && !highlighted.has(part.toLowerCase())) {
+          highlighted.add(part.toLowerCase())
 
-            return (
-                <StyledTooltip
-                    key={part}
-                    arrow
-                    placement="top"
-                    PopperProps={{
-                      modifiers: [
-                        {
-                          name: 'offset',
-                          options: {
-                            offset: [0, -10],
-                          },
-                        },
-                      ],
-                    }}
-                    title={entity.description}
-                >
-                  <Highlight
-                      onClick={() => {
-                        handleSubmit(part)
-                      }}
-                  >
-                    {part}
-                  </Highlight>
-                </StyledTooltip>
-            )
-          }
+          return (
+            <StyledTooltip key={part} content={entity.description} position="top">
+              <Highlight
+                onClick={() => {
+                  handleSubmit(part)
+                }}
+              >
+                {part}
+              </Highlight>
+            </StyledTooltip>
+          )
+        }
 
-          return part
-        })}
-      </>
+        return part
+      })}
+    </>
   )
 }
 
@@ -80,19 +65,33 @@ const Highlight = styled.span`
   }
 `
 
-const StyledTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)`
-  & .${tooltipClasses.tooltip} {
+const StyledTooltip = styled(({ className, ...props }) => (
+  <Tooltip
+    {...props}
+    backgroundColor={colors.BG2}
+    borderRadius="6px"
+    className={className}
+    color="white"
+    fontSize="12px"
+    fontWeight="500"
+    margin="10px"
+    minWidth="160px"
+    padding="10px"
+    position="top"
+    whiteSpace="normal"
+    width="160px"
+  />
+))`
+  & .tooltip-content {
     background-color: ${colors.BG2};
+    color: white;
     width: 160px;
     padding: 10px;
     font-size: 12px;
-    color: white;
-    border-radius: 6px;
-    font-family: Barlow;
     font-weight: 500;
-  }
-
-  & .${tooltipClasses.arrow} {
-    color: ${colors.BG2};
+    border-radius: 6px;
+    white-space: normal; /* Override ellipsis */
+    overflow: visible; /* Override ellipsis */
+    text-overflow: clip; /* Override ellipsis */
   }
 `
diff --git a/src/components/common/ToolTip/index.tsx b/src/components/common/ToolTip/index.tsx
@@ -4,6 +4,16 @@ interface TooltipProps {
   content: string
   children: React.ReactNode
   margin?: string
+  backgroundColor?: string
+  color?: string
+  width?: string
+  padding?: string
+  fontSize?: string
+  fontWeight?: string
+  borderRadius?: string
+  position?: string
+  minWidth?: string
+  whiteSpace?: string
 }
 
 const TooltipContainer = styled.div`
@@ -12,37 +22,79 @@ const TooltipContainer = styled.div`
   align-items: center;
 `
 
-const TooltipText = styled.div<{ margin?: string }>`
+const TooltipText = styled.div<{
+  margin?: string
+  backgroundColor?: string
+  color?: string
+  width?: string
+  padding?: string
+  fontSize?: string
+  fontWeight?: string
+  borderRadius?: string
+  position?: string
+  minWidth?: string
+  whiteSpace?: string
+}>`
   visibility: hidden;
-  width: auto;
-  background-color: white;
-  color: black;
+  width: ${({ width }) => width || 'auto'};
+  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};
+  color: ${({ color }) => color || 'black'};
   text-align: center;
-  border-radius: 4px;
-  padding: 5px 8px;
+  min-width: ${({ minWidth }) => minWidth || 'auto'};
+  border-radius: ${({ borderRadius }) => borderRadius || '4px'};
+  padding: ${({ padding }) => padding || '5px 8px'};
   position: absolute;
   z-index: 1;
-  top: 100%;
+  ${({ position }) => (position === 'top' ? 'bottom: 100%;' : 'top: 100%;')}
   left: 50%;
   transform: translateX(-50%);
-  margin-top: ${({ margin }) => margin || '0px'};
+  margin-top: ${({ margin, position }) => (position === 'top' ? `-${margin || '0px'}` : margin || '0px')};
   opacity: 0;
   transition: opacity 0.3s;
-  white-space: nowrap;
+  white-space: ${({ whiteSpace }) => whiteSpace || 'nowrap'};
+  min-width: ${({ minWidth }) => minWidth || 'auto'};
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 12px;
-  font-weight: 600;
+  font-size: ${({ fontSize }) => fontSize || '12px'};
+  font-weight: ${({ fontWeight }) => fontWeight || '600'};
 
   ${TooltipContainer}:hover & {
     visibility: visible;
     opacity: 1;
   }
 `
 
-export const Tooltip = ({ content, children, margin }: TooltipProps) => (
+export const Tooltip = ({
+  content,
+  children,
+  margin,
+  backgroundColor,
+  color,
+  width,
+  padding,
+  fontSize,
+  fontWeight,
+  borderRadius,
+  minWidth,
+  whiteSpace,
+  position,
+}: TooltipProps) => (
   <TooltipContainer>
     {children}
-    <TooltipText margin={margin}>{content}</TooltipText>
+    <TooltipText
+      backgroundColor={backgroundColor}
+      borderRadius={borderRadius}
+      color={color}
+      fontSize={fontSize}
+      fontWeight={fontWeight}
+      margin={margin}
+      minWidth={minWidth}
+      padding={padding}
+      position={position}
+      whiteSpace={whiteSpace}
+      width={width}
+    >
+      {content}
+    </TooltipText>
   </TooltipContainer>
 )