Merge pull request #2005 from stakwork/feature/ai-ux-improvement

feat: improvements for ai flow, bug fixes

cypress/e2e/seeLatest/latest.cy.ts

@@ -1,5 +1,5 @@
 describe('See latest button as new node are added', () => {
-  it('See latest as nodes are being added', () => {
+  it.skip('See latest as nodes are being added', () => {
     cy.initialSetup('carol', 300)
 
     // add tweet node
@@ -51,7 +51,7 @@ describe('See latest button as new node are added', () => {
       cy.get('[data-testid="twitter"]').click()
 
       cy.wait('@twitter')
-      //TODO: Get to know if twitter nodes are what is being returned
+      // TODO: Get to know if twitter nodes are what is being returned
 
       // .then((interception) => {
       //   const { query } = interception.request

src/components/App/ActionsToolbar/index.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
+import { useHasAiChatsResponseLoading } from '~/stores/useAiSummaryStore'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
 import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
@@ -14,12 +15,15 @@ export const ActionsToolbar = () => {
   const isLoading = useDataStore((s) => s.isFetching)
   const universeQuestionIsOpen = useAppStore((s) => s.universeQuestionIsOpen)
   const chatInterfaceFeatureFlag = useFeatureFlagStore((s) => s.chatInterfaceFeatureFlag)
+  const newQuestionInProgress = useHasAiChatsResponseLoading()
 
   return (
     <Wrapper align="flex-end" id="actions-toolbar">
       {!isLoading && !universeQuestionIsOpen && <CameraRecenterControl />}
       <Flex align="center" direction="row" mt={16}>
-        {!isLoading && chatInterfaceFeatureFlag && !universeQuestionIsOpen && <UniverseQuestionControl />}
+        {!newQuestionInProgress && !isLoading && chatInterfaceFeatureFlag && !universeQuestionIsOpen && (
+          <UniverseQuestionControl />
+        )}
         {!isLoading && !universeQuestionIsOpen && <GraphViewControl />}
       </Flex>
       <PlayerControl key={selectedNode?.ref_id} />

src/components/App/SideBar/AiSearch/index.tsx

@@ -1,21 +1,21 @@
 import { FormProvider, useForm } from 'react-hook-form'
+import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import SearchIcon from '~/components/Icons/SearchIcon'
 import { SearchBar } from '~/components/SearchBar'
 import { Flex } from '~/components/common/Flex'
+import { useHasAiChatsResponseLoading } from '~/stores/useAiSummaryStore'
 import { useDataStore } from '~/stores/useDataStore'
 import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils'
-import { useHasAiChatsResponse } from '~/stores/useAiSummaryStore'
-import { ClipLoader } from 'react-spinners'
 
 export const AiSearch = () => {
   const form = useForm<{ search: string }>({ mode: 'onChange' })
   const { fetchData, setAbortRequests } = useDataStore((s) => s)
   const { setBudget } = useUserStore((s) => s)
   const { reset } = form
 
-  const isLoading = useHasAiChatsResponse()
+  const isLoading = useHasAiChatsResponseLoading()
 
   const handleSubmit = form.handleSubmit(({ search }) => {
     if (search.trim() === '') {

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

@@ -1,3 +1,4 @@
+import { Slide } from '@mui/material'
 import { memo } from 'react'
 import styled from 'styled-components'
 import PlusIcon from '~/components/Icons/PlusIcon'
@@ -24,28 +25,32 @@ const _AiQuestions = ({ questions }: Props) => {
 
   return questions?.length ? (
     <SectionWrapper>
-      <Heading className="heading" direction="row">
-        <div className="heading__icon">
-          <StackIcon />
-        </div>
-        <HeadingTitle>More on this</HeadingTitle>
-      </Heading>
-      <Flex>
-        {questions.map((i) => (
-          <QuestionWrapper
-            key={i}
-            align="center"
-            direction="row"
-            justify="space-between"
-            onClick={() => handleSubmitQuestion(i)}
-          >
-            <span>{i}</span>
-            <Flex className="icon">
-              <PlusIcon />
-            </Flex>
-          </QuestionWrapper>
-        ))}
-      </Flex>
+      <Slide direction="right" in mountOnEnter>
+        <Heading className="heading" direction="row">
+          <div className="heading__icon">
+            <StackIcon />
+          </div>
+          <HeadingTitle>More on this</HeadingTitle>
+        </Heading>
+      </Slide>
+      <Slide direction="right" in mountOnEnter>
+        <Flex>
+          {questions.map((i) => (
+            <QuestionWrapper
+              key={i}
+              align="center"
+              direction="row"
+              justify="space-between"
+              onClick={() => handleSubmitQuestion(i)}
+            >
+              <span>{i}</span>
+              <Flex className="icon">
+                <PlusIcon />
+              </Flex>
+            </QuestionWrapper>
+          ))}
+        </Flex>
+      </Slide>
     </SectionWrapper>
   ) : null
 }

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

@@ -1,3 +1,4 @@
+import { Slide } from '@mui/material'
 import Button from '@mui/material/Button'
 import { memo, useCallback, useRef, useState } from 'react'
 import styled from 'styled-components'
@@ -41,19 +42,21 @@ const _AiSources = ({ sourceIds }: Props) => {
 
   return (
     <SectionWrapper>
-      <Heading align="center" className="heading" direction="row" justify="space-between">
-        <Flex align="center" direction="row">
-          <div className="heading__icon">
-            <SourcesIcon />
-          </div>
-          <span className="tittle">Sources</span>
-          <span className="heading__count">{sourceIds.length}</span>
-        </Flex>
-        <CollapseButton onClick={handleLoadMoreClick}>
-          {showAll ? 'Hide all' : 'Show all'}
-          {showAll ? <ChevronUpIcon /> : <ChevronDownIcon />}
-        </CollapseButton>
-      </Heading>
+      <Slide direction="right" in mountOnEnter>
+        <Heading align="center" className="heading" direction="row" justify="space-between">
+          <Flex align="center" direction="row">
+            <div className="heading__icon">
+              <SourcesIcon />
+            </div>
+            <span className="tittle">Sources</span>
+            <span className="heading__count">{sourceIds.length}</span>
+          </Flex>
+          <CollapseButton onClick={handleLoadMoreClick}>
+            {showAll ? 'Hide all' : 'Show all'}
+            {showAll ? <ChevronUpIcon /> : <ChevronDownIcon />}
+          </CollapseButton>
+        </Heading>
+      </Slide>
       {showAll && visibleNodes.length > 0 && (
         <ScrollView ref={scrollViewRef} id="search-result-list" shrink={1}>
           {visibleNodes.map((n, index) => {

src/components/App/SideBar/AiView/index.tsx

@@ -0,0 +1,68 @@
+import { Button } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
+import ArrowBackIcon from '~/components/Icons/ArrowBackIcon'
+import { Flex } from '~/components/common/Flex'
+import { useAiSummaryStore } from '~/stores/useAiSummaryStore'
+import { colors } from '~/utils/colors'
+import { AiSearch } from '../AiSearch'
+import { AiSummary } from '../AiSummary'
+
+export const MENU_WIDTH = 390
+
+// eslint-disable-next-line react/display-name
+export const AiView = () => {
+  const { aiSummaryAnswers, resetAiSummaryAnswer, newLoading } = useAiSummaryStore((s) => s)
+
+  const handleCloseAi = () => {
+    resetAiSummaryAnswer()
+    navigate('/')
+  }
+
+  const navigate = useNavigate()
+
+  return (
+    <Wrapper>
+      <Flex align="flex-start">
+        <Flex p={24}>
+          <Button onClick={handleCloseAi} startIcon={<ArrowBackIcon />}>
+            Home
+          </Button>
+        </Flex>
+      </Flex>
+      <ScrollWrapper>
+        <Flex>
+          {Object.keys(aiSummaryAnswers)
+            .filter((key) => aiSummaryAnswers[key].shouldRender)
+            .map((i: string) => (
+              <AiSummary
+                key={i}
+                question={aiSummaryAnswers[i]?.question || ''}
+                refId={i}
+                response={aiSummaryAnswers[i]}
+              />
+            ))}
+          {newLoading && <AiSummary question={newLoading.question || ''} refId="" response={newLoading} />}
+        </Flex>
+      </ScrollWrapper>
+      <AiSearch />
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled(Flex)(({ theme }) => ({
+  position: 'relative',
+  background: colors.BG1,
+  flex: 1,
+  width: '100%',
+  zIndex: 30,
+  [theme.breakpoints.up('sm')]: {
+    width: MENU_WIDTH,
+  },
+}))
+
+const ScrollWrapper = styled(Flex)(() => ({
+  overflow: 'auto',
+  flex: 1,
+  width: '100%',
+}))

src/components/App/SideBar/Latest/__test__/index.tsx

@@ -31,7 +31,7 @@ describe('LatestView Component', () => {
   })
 
   test('renders button correctly when new data added', () => {
-    const { getByText } = render(<LatestView isSearchResult={false} />)
+    const { getByText } = render(<LatestView />)
     const galleryIcon = document.querySelector('.heading__icon') as Node
 
     expect(getByText('Latest')).toBeInTheDocument()
@@ -41,7 +41,7 @@ describe('LatestView Component', () => {
   test('does not show the latest button when there are no nodes', () => {
     mockedUseUserStore.mockReturnValue({ nodeCount: 0, setNodeCount: jest.fn(), setBudget: jest.fn() })
 
-    const { queryByText } = render(<LatestView isSearchResult={false} />)
+    const { queryByText } = render(<LatestView />)
 
     expect(queryByText('See Latest (0)')).toBeNull()
   })
@@ -57,7 +57,7 @@ describe('LatestView Component', () => {
 
     mockedUseUserStore.mockReturnValue({ nodeCount: 5, setNodeCount: setNodeCountMock, setBudget: setBudgetMock })
 
-    const { getByText } = render(<LatestView isSearchResult={false} />)
+    const { getByText } = render(<LatestView />)
 
     fireEvent.click(getByText('See Latest (5)'))
 

src/components/App/SideBar/Latest/index.tsx

@@ -7,14 +7,9 @@ import { Flex } from '~/components/common/Flex'
 import { useDataStore } from '~/stores/useDataStore'
 import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
-import { Relevance } from '../Relevance'
-
-type Props = {
-  isSearchResult: boolean
-}
 
 // eslint-disable-next-line no-underscore-dangle
-const _View = ({ isSearchResult }: Props) => {
+const _View = () => {
   const { nodeCount, setNodeCount, setBudget } = useUserStore((s) => s)
   const { fetchData, setAbortRequests } = useDataStore((s) => s)
 
@@ -29,29 +24,26 @@ const _View = ({ isSearchResult }: Props) => {
 
   return (
     <Wrapper>
-      {!isSearchResult && (
-        <div className="heading-container">
-          <div className="heading">
-            <span className="heading__title">Latest</span>
-            <span className="heading__icon">
-              <BrowseGalleryIcon />
-            </span>
-          </div>
-          {nodeCount ? (
-            <div className="button_container">
-              <ButtonStyled
-                className="button"
-                data-testid="see_latest_button"
-                onClick={getLatest}
-                startIcon={<DownloadIcon />}
-              >
-                {`See Latest (${nodeCount})`}
-              </ButtonStyled>
-            </div>
-          ) : null}
+      <div className="heading-container">
+        <div className="heading">
+          <span className="heading__title">Latest</span>
+          <span className="heading__icon">
+            <BrowseGalleryIcon />
+          </span>
         </div>
-      )}
-      <Relevance isSearchResult={isSearchResult} />
+        {nodeCount ? (
+          <div className="button_container">
+            <ButtonStyled
+              className="button"
+              data-testid="see_latest_button"
+              onClick={getLatest}
+              startIcon={<DownloadIcon />}
+            >
+              {`See Latest (${nodeCount})`}
+            </ButtonStyled>
+          </div>
+        ) : null}
+      </div>
     </Wrapper>
   )
 }