Merge pull request #1780 from stakwork/feat/ai_summary_v1

Feat/ai summary v1

src/components/App/SideBar/AiSummary/AiSummaryDetail/index.tsx

@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { colors } from '~/utils/colors'
+
+type Props = {
+  question: string
+  answer: string
+}
+
+const AiSummaryDetailsWrapper = styled(Flex).attrs({
+  direction: 'column',
+})`
+  padding: 1.5rem;
+  border-top: 1px solid #101317;
+  background: ${colors.BG1};
+  gap: 1rem;
+`
+
+const Title = styled(Text)`
+  font-size: 20px;
+  font-weight: 600;
+`
+
+const SummaryText = styled(Text)`
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 19.6px;
+`
+
+export const AiSummaryDetails = ({ question, answer }: Props) => (
+  <AiSummaryDetailsWrapper>
+    <Title>{question}</Title>
+    <SummaryText>{answer}</SummaryText>
+  </AiSummaryDetailsWrapper>
+)

src/components/App/SideBar/AiSummary/AiSummarySkeleton/index.tsx

@@ -0,0 +1,83 @@
+import { Skeleton } from '@mui/material'
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { FlexboxProps } from '~/components/common/Flex/flexbox'
+import { Text } from '~/components/common/Text'
+import AiSummaryIcon from '~/components/Icons/AiSummaryIcon'
+import { colors } from '~/utils/colors'
+
+type EpisodeWrapperProps = FlexboxProps & {
+  isSelected?: boolean
+}
+
+const EpisodeWrapper = styled(Flex).attrs({
+  direction: 'column',
+})<EpisodeWrapperProps>`
+  padding: 24px;
+  cursor: pointer;
+  border-top: 1px solid #101317;
+  background: ${colors.BG1};
+
+  .type-image {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+`
+
+const StyledSkeleton = styled(Skeleton)`
+  && {
+    background: #353a46;
+    border-radius: 0.5rem;
+  }
+`
+
+const SkeletonWrapper = styled(Flex)`
+  gap: 1.1875rem;
+  margin-top: 1rem;
+`
+
+const IconWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  margin-right: 0.5rem;
+`
+
+const Title = styled(Text)`
+  font-weight: 600;
+  font-size: 0.9375rem;
+`
+
+const height = 8
+
+const fullWidth = 332
+
+export const AiSummarySkeleton = () => (
+  <>
+    <EpisodeWrapper>
+      <Flex direction="column">
+        <Flex direction="row">
+          <IconWrapper>
+            <AiSummaryIcon />
+          </IconWrapper>
+
+          <Title>Answer</Title>
+        </Flex>
+        <SkeletonWrapper grow={1} shrink={1}>
+          <StyledSkeleton height={height} variant="rectangular" width={fullWidth} />
+
+          <StyledSkeleton height={height} variant="rectangular" width={fullWidth} />
+
+          <StyledSkeleton height={height} variant="rectangular" width={fullWidth} />
+
+          <StyledSkeleton height={height} variant="rectangular" width={fullWidth} />
+
+          <StyledSkeleton height={height} variant="rectangular" width={180} />
+        </SkeletonWrapper>
+      </Flex>
+    </EpisodeWrapper>
+  </>
+)

src/components/App/SideBar/index.tsx

@@ -6,21 +6,24 @@ import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import { SelectWithPopover } from '~/components/App/SideBar/Dropdown'
 import { FilterSearch } from '~/components/App/SideBar/FilterSearch'
+import { Flex } from '~/components/common/Flex'
+import { FetchLoaderText } from '~/components/common/Loader'
 import ChevronLeftIcon from '~/components/Icons/ChevronLeftIcon'
 import ClearIcon from '~/components/Icons/ClearIcon'
 import SearchFilterCloseIcon from '~/components/Icons/SearchFilterCloseIcon'
 import SearchFilterIcon from '~/components/Icons/SearchFilterIcon'
 import SearchIcon from '~/components/Icons/SearchIcon'
 import { SchemaExtended } from '~/components/ModalsContainer/BlueprintModal/types'
 import { SearchBar } from '~/components/SearchBar'
-import { Flex } from '~/components/common/Flex'
-import { FetchLoaderText } from '~/components/common/Loader'
 import { getSchemaAll } from '~/network/fetchSourcesData'
+import { useAiSummaryStore } from '~/stores/useAiSummaryStore'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore, useFilteredNodes } from '~/stores/useDataStore'
 import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
 import { useSelectedNode, useUpdateSelectedNode } from '~/stores/useGraphStore'
 import { colors } from '~/utils/colors'
+import { AiSummaryDetails } from './AiSummary/AiSummaryDetail'
+import { AiSummarySkeleton } from './AiSummary/AiSummarySkeleton'
 import { LatestView } from './Latest'
 import { EpisodeSkeleton } from './Relevance/EpisodeSkeleton'
 import { SideBarSubView } from './SidebarSubView'
@@ -41,6 +44,7 @@ type ContentProp = {
 // eslint-disable-next-line react/display-name
 const Content = forwardRef<HTMLDivElement, ContentProp>(({ onSubmit, subViewOpen }, ref) => {
   const { isFetching: isLoading, setSidebarFilter, setFilters } = useDataStore((s) => s)
+  const { aiSummaryIsLoading, getAiSummaryAnswer } = useAiSummaryStore((s) => s)
   const setSelectedNode = useUpdateSelectedNode()
 
   const filteredNodes = useFilteredNodes()
@@ -192,7 +196,15 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ onSubmit, subViewOpen
             <Trending onSubmit={onSubmit} />
           </TrendingWrapper>
         )}
-        <Flex>{isLoading ? <EpisodeSkeleton /> : <LatestView isSearchResult={!!searchTerm} />}</Flex>
+        <Flex>
+          {searchTerm &&
+            (aiSummaryIsLoading ? (
+              <AiSummarySkeleton />
+            ) : (
+              <AiSummaryDetails answer={getAiSummaryAnswer(searchTerm)} question={searchTerm} />
+            ))}
+          {isLoading ? <EpisodeSkeleton /> : <LatestView isSearchResult={!!searchTerm} />}
+        </Flex>
       </ScrollWrapper>
     </Wrapper>
   )

src/components/App/index.tsx

@@ -11,12 +11,14 @@ import { Overlay } from '~/components/Universe/Overlay' // Import Overlay direct
 import { Preloader } from '~/components/Universe/Preloader' // Import Preloader directly
 import { isDevelopment } from '~/constants'
 import { useSocket } from '~/hooks/useSockets'
+import { useAiSummaryStore } from '~/stores/useAiSummaryStore'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
 import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
 import { useUpdateSelectedNode } from '~/stores/useGraphStore'
 import { useTeachStore } from '~/stores/useTeachStore'
 import { useUserStore } from '~/stores/useUserStore'
+import { AiSummaryAnswerResponse } from '~/types'
 import { colors } from '~/utils/colors'
 import { updateBudget } from '~/utils/setBudget'
 import version from '~/utils/versionHelper'
@@ -62,6 +64,8 @@ export const App = () => {
 
   const { fetchData, setCategoryFilter, setAbortRequests, addNewNode, filters } = useDataStore((s) => s)
 
+  const { setAiSummaryIsLoading, setAiSummaryAnswer, getKeyExist } = useAiSummaryStore((s) => s)
+
   const setSelectedNode = useUpdateSelectedNode()
 
   const [realtimeGraphFeatureFlag] = useFeatureFlagStore((s) => [s.realtimeGraphFeatureFlag])
@@ -98,6 +102,16 @@ export const App = () => {
     setNodeCount('INCREMENT')
   }, [setNodeCount])
 
+  const handleAiSummaryAnswer = useCallback(
+    (data: AiSummaryAnswerResponse) => {
+      if (searchTerm && data.question === searchTerm && getKeyExist(data.question)) {
+        setAiSummaryAnswer(data.question, data.answer)
+        setAiSummaryIsLoading(false)
+      }
+    },
+    [searchTerm, setAiSummaryAnswer, setAiSummaryIsLoading, getKeyExist],
+  )
+
   const handleNewNodeCreated = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (data: any) => {
@@ -118,6 +132,9 @@ export const App = () => {
 
       socket.on('newnode', handleNewNode)
 
+      // subscribe to ai_summary
+      socket.on('askquestionhook', handleAiSummaryAnswer)
+
       if (realtimeGraphFeatureFlag) {
         socket.on('new_node_created', handleNewNodeCreated)
       }
@@ -128,7 +145,7 @@ export const App = () => {
         socket.off()
       }
     }
-  }, [socket, handleNewNode, handleNewNodeCreated, realtimeGraphFeatureFlag])
+  }, [socket, handleNewNode, handleNewNodeCreated, realtimeGraphFeatureFlag, handleAiSummaryAnswer])
 
   return (
     <>

src/components/Icons/AddCircleIcon.tsx

@@ -1,13 +1,19 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddCircleIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M7.37516 8.625V11.3334C7.37516 11.5104 7.43508 11.6589 7.55491 11.7786C7.67476 11.8984 7.82326 11.9583 8.00041 11.9583C8.17758 11.9583 8.32599 11.8984 8.44564 11.7786C8.5653 11.6589 8.62512 11.5104 8.62512 11.3334V8.625H11.3335C11.5106 8.625 11.659 8.56508 11.7788 8.44525C11.8986 8.3254 11.9585 8.1769 11.9585 7.99975C11.9585 7.82258 11.8986 7.67417 11.7788 7.55452C11.659 7.43487 11.5106 7.37504 11.3335 7.37504H8.62512V4.66669C8.62512 4.4896 8.56521 4.34117 8.44537 4.22137C8.32553 4.1016 8.17702 4.04171 7.99987 4.04171C7.82271 4.04171 7.6743 4.1016 7.55464 4.22137C7.43499 4.34117 7.37516 4.4896 7.37516 4.66669V7.37504H4.66681C4.48973 7.37504 4.3413 7.43496 4.22152 7.55479C4.10173 7.67464 4.04183 7.82314 4.04183 8.00029C4.04183 8.17746 4.10173 8.32587 4.22152 8.44552C4.3413 8.56517 4.48973 8.625 4.66681 8.625H7.37516ZM8.00154 15.9167C6.90659 15.9167 5.8774 15.7089 4.91395 15.2933C3.9505 14.8778 3.11243 14.3138 2.39975 13.6015C1.68705 12.8891 1.12284 12.0514 0.7071 11.0884C0.291364 10.1253 0.0834961 9.09636 0.0834961 8.00142C0.0834961 6.90647 0.291274 5.87728 0.70683 4.91383C1.12239 3.95037 1.68634 3.11231 2.3987 2.39963C3.11108 1.68693 3.94878 1.12272 4.91181 0.706979C5.87482 0.291243 6.9038 0.083374 7.99875 0.083374C9.09369 0.083374 10.1229 0.291153 11.0863 0.706708C12.0498 1.12226 12.8879 1.68622 13.6005 2.39858C14.3132 3.11096 14.8774 3.94866 15.2932 4.91169C15.7089 5.8747 15.9168 6.90368 15.9168 7.99863C15.9168 9.09357 15.709 10.1228 15.2935 11.0862C14.8779 12.0497 14.3139 12.8877 13.6016 13.6004C12.8892 14.3131 12.0515 14.8773 11.0885 15.2931C10.1255 15.7088 9.09648 15.9167 8.00154 15.9167ZM8.00014 14.6667C9.86125 14.6667 11.4376 14.0209 12.7293 12.7292C14.021 11.4375 14.6668 9.86113 14.6668 8.00002C14.6668 6.13891 14.021 4.56252 12.7293 3.27085C11.4376 1.97919 9.86125 1.33335 8.00014 1.33335C6.13903 1.33335 4.56264 1.97919 3.27098 3.27085C1.97931 4.56252 1.33348 6.13891 1.33348 8.00002C1.33348 9.86113 1.97931 11.4375 3.27098 12.7292C4.56264 14.0209 6.13903 14.6667 8.00014 14.6667Z"
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default AddCircleIcon
+export default AddCircleIcon;

src/components/Icons/AddContentIcon.tsx

@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_1259_25" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1259_25"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_25)">
@@ -13,6 +26,6 @@ const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default AddContentIcon
+export default AddContentIcon;

src/components/Icons/AddLinkIcon.tsx

@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddLinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="add_link">
-      <mask id="mask0_2659_52" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+      <mask
+        id="mask0_2659_52"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_2659_52)">
@@ -16,6 +29,6 @@ const AddLinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default AddLinkIcon
+export default AddLinkIcon;

src/components/Icons/AddSourceIcon.tsx

@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_1259_27" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1259_27"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_27)">
@@ -13,6 +26,6 @@ const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default AddSourceIcon
+export default AddSourceIcon;

src/components/Icons/AiSummaryIcon.tsx

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import React from 'react'
+
+const AiSummaryIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.28729 0.918723C7.41428 0.105284 8.58572 0.105284 8.71271 0.918723L8.76054 1.22508C9.2444 4.32436 11.6757 6.75568 14.775 7.23954L15.0814 7.28737C15.8948 7.41436 15.8948 8.5858 15.0814 8.71279L14.775 8.76062C11.6757 9.24448 9.2444 11.6758 8.76054 14.7751L8.71271 15.0814C8.58572 15.8949 7.41428 15.8949 7.28729 15.0814L7.23946 14.7751C6.7556 11.6758 4.32428 9.24448 1.225 8.76062L0.918643 8.71279C0.105204 8.5858 0.105204 7.41436 0.918642 7.28737L1.225 7.23954C4.32428 6.75568 6.7556 4.32436 7.23946 1.22508L7.28729 0.918723Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default AiSummaryIcon