feat: query sources in widget

extensions/react-widget/src/components/DocsGPTWidget.tsx

@@ -351,7 +351,7 @@ const Hero = ({ title, description, theme }: { title: string, description: strin
 
 export const DocsGPTWidget = ({
   apiHost = 'https://gptcloud.arc53.com',
-  apiKey = '82962c9a-aa77-4152-94e5-a4f84fd44c6a',
+  apiKey = '0d7407f7-a843-42fb-ad83-dd4a213a935d',
   avatar = 'https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png',
   title = 'Get AI assistance',
   description = 'DocsGPT\'s AI Chatbot is here to help',
@@ -536,7 +536,7 @@ export const DocsGPTWidget = ({
                       query.response ? (
                         <MessageBubble onMouseOver={() => { isBubbleHovered.current = true }} type='ANSWER'>
                           {showSources && query.sources && (
-                            <QuerySources sources={query.sources} theme={theme}/>
+                            <QuerySources sources={query.sources}/>
                           )}
                           <Message
                             type='ANSWER'

extensions/react-widget/src/components/QuerySources.tsx

@@ -1,6 +1,6 @@
-import {Query, THEME} from "../types/index"
+import {Query} from "../types/index"
 import styled from 'styled-components';
-import { ExternalLinkIcon, FileTextIcon } from '@radix-ui/react-icons'
+import { ExternalLinkIcon } from '@radix-ui/react-icons'
 
 
 const SourcesWrapper = styled.div`
@@ -12,19 +12,6 @@ flex-direction: column;
 overflow: hidden;
 `
 
-const SourcesHeader = styled.div`
-  margin: 0.3rem 0;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-`
-
-const SourcesTitle = styled.p`
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: ${props => props.theme.text};
-`
-
 const SourcesGrid = styled.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -57,12 +44,12 @@ transform: background-color .2s, color .2s;
 }
 `
 
-const SourceLink = styled.div`
+const SourceLink = styled.div<{$hasExternalSource: boolean}>`
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 0.375rem;
-  text-decoration: underline;
+  text-decoration: ${({$hasExternalSource}) => ($hasExternalSource? "underline": "none")};
   text-underline-offset: 2px;
 `
 
@@ -76,16 +63,11 @@ const SourceLinkText = styled.p`
 
 type TQuerySources = {
   sources:  Pick<Query, "sources">["sources"],
-  theme?: THEME
 }
 
-const QuerySources = ({sources, theme}:TQuerySources) => {
+const QuerySources = ({sources}:TQuerySources) => {
   return (
     <SourcesWrapper>
-      <SourcesHeader>
-      <FileTextIcon width={15} height={15} color={`${theme === 'light' ? "#000" : "#fff"}`}/>
-        <SourcesTitle>Sources</SourcesTitle>
-      </SourcesHeader>
 
       <SourcesGrid>
         {sources?.slice(0, 3)?.map((source, index) => (
@@ -93,6 +75,7 @@ const QuerySources = ({sources, theme}:TQuerySources) => {
             key={index}
           >
             <SourceLink
+            $hasExternalSource={!!source.source && source.source !== "local"}
               onClick={() =>
                 source.source && source.source !== 'local'
                   ? window.open(source.source, '_blank', 'noopener,noreferrer')