From 1a9f47b1bcb6668e3e90e1d72cf289afc7547ea4 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Mon, 4 Nov 2024 16:33:00 +0100
Subject: [PATCH] chore: modified query sources and removed tooltip

---
 .../src/components/DocsGPTWidget.tsx          |  4 +-
 .../src/components/QuerySources.tsx           | 65 ++-----------------
 2 files changed, 9 insertions(+), 60 deletions(-)

diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index c59377e7..1354e4e8 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -454,7 +454,9 @@ export const DocsGPTWidget = ({
             else if (data.type === 'source') {           
               const updatedQueries = [...queries];
               updatedQueries[updatedQueries.length - 1].sources = data.source;
-              setQueries(updatedQueries);         
+              setQueries(updatedQueries);    
+              console.log("SOURCE:", data);
+                   
 
             }
             else {
diff --git a/extensions/react-widget/src/components/QuerySources.tsx b/extensions/react-widget/src/components/QuerySources.tsx
index d322c48d..504bb917 100644
--- a/extensions/react-widget/src/components/QuerySources.tsx
+++ b/extensions/react-widget/src/components/QuerySources.tsx
@@ -1,25 +1,26 @@
-import React, { useState } from 'react';
 import {Query, THEME} from "../types/index"
 import styled from 'styled-components';
 import { ExternalLinkIcon, FileTextIcon } from '@radix-ui/react-icons'
 
 
 const SourcesWrapper = styled.div`
-margin-bottom: 1rem;
+padding: 12px;
+margin-left: 4px;
+margin-bottom: 0.75rem;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 `
 
 const SourcesHeader = styled.div`
-  margin: 0.5rem 0;
+  margin: 0.3rem 0;
   display: flex;
   align-items: center;
   gap: 0.75rem;
 `
 
 const SourcesTitle = styled.p`
-  font-size: 1rem;
+  font-size: 0.75rem;
   font-weight: 600;
   color: ${props => props.theme.text};
 `
@@ -39,7 +40,6 @@ const SourcesGrid = styled.div`
 `
 
 const SourceItem = styled.div`
-height: 7rem; 
 cursor: pointer;
 display: flex;
 flex-direction: column;
@@ -56,17 +56,7 @@ transform: background-color .2s, color .2s;
 }
 `
 
-const SourceText = styled.p`
-  height: 3rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-font-size:  0.75rem;
-line-height: 1rem;
-color: ${props => props.theme.text};
-`
-
 const SourceLink = styled.div`
-  margin-top: 0.875rem;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -76,7 +66,6 @@ const SourceLink = styled.div`
 `
 
 const SourceLinkText = styled.p`
-  margin-top: 0.125rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -84,45 +73,16 @@ const SourceLinkText = styled.p`
   line-height: 1rem;
 `
 
-const Tooltip = styled.div`
-  position: absolute;
-  left: 50%;
-  z-index: 30;
-  max-height: 12rem;
-  width: 10rem;
-  transform: translateX(-50%) translateY(3px);
-  border-radius: 0.75rem;
-  background-color: ${props => props.theme.bg};
-  padding: 1rem;
-  color: ${props => props.theme.text};
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-
-  @media (min-width: 640px) {
-    width: 14rem;
-  }
-`
-
-const TooltipText = styled.p`
-  max-height: 10.25rem;
-  overflow-y: auto;
-  word-break: break-word;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-`
-
 type TQuerySources = {
   sources:  Pick<Query, "sources">["sources"],
   theme?: THEME
 }
 
 const QuerySources = ({sources, theme}:TQuerySources) => {
-  const [activeTooltip, setActiveTooltip] = useState<number | null>(null)
-
   return (
     <SourcesWrapper>
       <SourcesHeader>
-      <FileTextIcon width={24} height={24} color={`${theme === 'light' ? "#000" : "#fff"}`}/>
+      <FileTextIcon width={15} height={15} color={`${theme === 'light' ? "#000" : "#fff"}`}/>
         <SourcesTitle>Sources</SourcesTitle>
       </SourcesHeader>
 
@@ -130,10 +90,7 @@ const QuerySources = ({sources, theme}:TQuerySources) => {
         {sources?.slice(0, 3)?.map((source, index) => (
           <SourceItem
             key={index}
-            onMouseEnter={() => setActiveTooltip(index)}
-            onMouseLeave={() => setActiveTooltip(null)}
           >
-            <SourceText>{source.text}</SourceText>
             <SourceLink
               onClick={() =>
                 source.source && source.source !== 'local'
@@ -146,16 +103,6 @@ const QuerySources = ({sources, theme}:TQuerySources) => {
                 {source.source && source.source !== 'local' ? source.source : source.title}
               </SourceLinkText>
             </SourceLink>
-            {activeTooltip === index && (
-              <Tooltip
-                onMouseEnter={() => setActiveTooltip(index)}
-                onMouseLeave={() => setActiveTooltip(null)}
-              >
-                <TooltipText>
-                  {source.text}
-                </TooltipText>
-              </Tooltip>
-            )}
           </SourceItem>
         ))}
       </SourcesGrid>