On hover - render description of the entity

src/components/App/SideBar/AiSummary/utils/AiSummaryHighlight/index.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
+import { Tooltip } from '~/components/common/ToolTip'
+import { ExtractedEntity } from '~/types'
 import { colors } from '~/utils'
-import { ExtractedEntity } from '~/types/index'
 
 export function highlightAiSummary(
   sDescription: string,
@@ -25,18 +26,21 @@ export function highlightAiSummary(
   return (
     <>
       {parts.map((part) => {
-        if (regex.test(part) && !highlighted.has(part.toLowerCase())) {
+        const entity = entities.find((e) => e.entity.toLowerCase() === part.toLowerCase())
+
+        if (entity && !highlighted.has(part.toLowerCase())) {
           highlighted.add(part.toLowerCase())
 
           return (
-            <Highlight
-              key={part}
-              onClick={() => {
-                handleSubmit(part)
-              }}
-            >
-              {part}
-            </Highlight>
+            <StyledTooltip key={part} content={entity.description}>
+              <Highlight
+                onClick={() => {
+                  handleSubmit(part)
+                }}
+              >
+                {part}
+              </Highlight>
+            </StyledTooltip>
           )
         }
 
@@ -60,3 +64,24 @@ const Highlight = styled.span`
     cursor: pointer;
   }
 `
+
+const StyledTooltip = styled(({ className, ...props }) => (
+  <Tooltip
+    {...props}
+    backgroundColor={colors.BG2}
+    borderRadius="6px"
+    className={className}
+    color="white"
+    fontSize="12px"
+    fontWeight="500"
+    minWidth="160px"
+    padding="10px"
+    position="top"
+    textAlign="start"
+    whiteSpace="normal"
+  />
+))`
+  & .tooltip-content {
+    color: white;
+  }
+`

src/components/App/index.tsx

@@ -1,6 +1,7 @@
 import { Leva } from 'leva'
 import { lazy, Suspense, useCallback, useEffect } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
+import { useSearchParams } from 'react-router-dom'
 import 'react-toastify/dist/ReactToastify.css'
 import { Socket } from 'socket.io-client'
 import styled from 'styled-components'
@@ -34,7 +35,6 @@
 import { Helper } from './Helper'
 import { SecondarySideBar } from './SecondarySidebar'
 import { Toasts } from './Toasts'
-import { useSearchParams } from 'react-router-dom'
 
 const Wrapper = styled(Flex)`
   height: 100%;
@@ -128,7 +128,7 @@
 
   const handleAiSummaryAnswer = useCallback(
     (data: AiSummaryAnswerResponse) => {
       console.log(data)
 
       if (data.question && getKeyExist(data.question)) {
         setAiSummaryAnswer(data.question, { answer: data.answer, answerLoading: false })

src/components/common/ToolTip/index.tsx

@@ -4,6 +4,16 @@ interface TooltipProps {
   content: string
   children: React.ReactNode
   margin?: string
+  backgroundColor?: string
+  color?: string
+  padding?: string
+  fontSize?: string
+  fontWeight?: string
+  borderRadius?: string
+  position?: string
+  minWidth?: string
+  whiteSpace?: string
+  textAlign?: string
 }
 
 const TooltipContainer = styled.div`
@@ -12,37 +22,78 @@ const TooltipContainer = styled.div`
   align-items: center;
 `
 
-const TooltipText = styled.div<{ margin?: string }>`
+const TooltipText = styled.div<{
+  margin?: string
+  backgroundColor?: string
+  color?: string
+  padding?: string
+  fontSize?: string
+  fontWeight?: string
+  borderRadius?: string
+  position?: string
+  minWidth?: string
+  whiteSpace?: string
+  textAlign?: string
+}>`
   visibility: hidden;
   width: auto;
-  background-color: white;
-  color: black;
-  text-align: center;
-  border-radius: 4px;
-  padding: 5px 8px;
+  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};
+  color: ${({ color }) => color || 'black'};
+  text-align: ${({ textAlign }) => textAlign || 'center'};
+  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'};
   opacity: 0;
   transition: opacity 0.3s;
-  white-space: nowrap;
+  white-space: ${({ whiteSpace }) => whiteSpace || 'nowrap'};
   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,
+  padding,
+  fontSize,
+  fontWeight,
+  borderRadius,
+  minWidth,
+  whiteSpace,
+  position,
+  textAlign,
+}: 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}
+      textAlign={textAlign}
+      whiteSpace={whiteSpace}
+    >
+      {content}
+    </TooltipText>
   </TooltipContainer>
 )