Merge pull request #1805 from stakwork/feature/follow-up

feat: add follow up question

src/components/App/AppBar/index.tsx

@@ -23,7 +23,7 @@ export const AppBar = () => {
             </Text>
           )}
         </>
-        <Text className="subtitle"> Second Brain</Text>
+        <Text className="subtitle">Second Brain</Text>
       </TitleWrapper>
       <Stats />
     </Header>

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

@@ -0,0 +1,70 @@
+import { FormProvider, useForm } from 'react-hook-form'
+import styled from 'styled-components'
+import SearchIcon from '~/components/Icons/SearchIcon'
+import { SearchBar } from '~/components/SearchBar'
+import { Flex } from '~/components/common/Flex'
+import { useDataStore } from '~/stores/useDataStore'
+import { useUserStore } from '~/stores/useUserStore'
+import { colors } from '~/utils'
+
+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 handleSubmit = form.handleSubmit(({ search }) => {
+    fetchData(setBudget, setAbortRequests, search)
+    reset({ search: '' })
+  })
+
+  return (
+    <AiSearchWrapper>
+      <FormProvider {...form}>
+        <Search>
+          <SearchBar onSubmit={handleSubmit} placeholder="Ask follow-up" />
+          <InputButton
+            data-testid="search-ai_action_icon"
+            onClick={() => {
+              handleSubmit()
+            }}
+          >
+            <SearchIcon />
+          </InputButton>
+        </Search>
+      </FormProvider>
+    </AiSearchWrapper>
+  )
+}
+
+const AiSearchWrapper = styled(Flex)`
+  position: sticky;
+  bottom: 0;
+  padding: 12px;
+  border-top: 1px solid ${colors.black};
+`
+
+const Search = styled(Flex).attrs({
+  direction: 'row',
+  justify: 'center',
+  align: 'center',
+})`
+  flex-grow: 1;
+`
+
+const InputButton = styled(Flex).attrs({
+  align: 'center',
+  justify: 'center',
+  p: 5,
+})`
+  font-size: 32px;
+  color: ${colors.mainBottomIcons};
+  cursor: pointer;
+  transition-duration: 0.2s;
+  margin-left: -42px;
+  z-index: 2;
+
+  &:hover {
+    /* background-color: ${colors.gray200}; */
+  }
+`

src/components/App/SideBar/index.tsx

@@ -1,5 +1,6 @@
 import { Slide } from '@mui/material'
 import clsx from 'clsx'
+import { isEmpty } from 'lodash'
 import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
@@ -22,8 +23,8 @@ import { useDataStore, useFilteredNodes } from '~/stores/useDataStore'
 import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
 import { useSelectedNode, useUpdateSelectedNode } from '~/stores/useGraphStore'
 import { colors } from '~/utils/colors'
+import { AiSearch } from './AiSearch'
 import { AiSummaryDetails } from './AiSummary/AiSummaryDetail'
-import { AiSummarySkeleton } from './AiSummary/AiSummarySkeleton'
 import { LatestView } from './Latest'
 import { EpisodeSkeleton } from './Relevance/EpisodeSkeleton'
 import { SideBarSubView } from './SidebarSubView'
@@ -44,17 +45,14 @@ 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, aiSummaryAnswers } = useAiSummaryStore((s) => s)
+  const { aiSummaryAnswers } = useAiSummaryStore((s) => s)
   const setSelectedNode = useUpdateSelectedNode()
 
   const filteredNodes = useFilteredNodes()
 
   const { setSidebarOpen, currentSearch: searchTerm, clearSearch, searchFormValue } = useAppStore((s) => s)
 
-  const [trendingTopicsFeatureFlag, chatInterfaceFeatureFlag] = useFeatureFlagStore((s) => [
-    s.trendingTopicsFeatureFlag,
-    s.chatInterfaceFeatureFlag,
-  ])
+  const [trendingTopicsFeatureFlag] = useFeatureFlagStore((s) => [s.trendingTopicsFeatureFlag])
 
   const { setValue, watch } = useFormContext()
   const componentRef = useRef<HTMLDivElement | null>(null)
@@ -121,7 +119,6 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ onSubmit, subViewOpen
   return (
     <Wrapper ref={ref} id="sidebar-wrapper">
       <TitlePlaceholder />
-
       <SearchWrapper className={clsx({ 'has-shadow': isScrolled })}>
         <SearchFilterIconWrapper>
           <Search>
@@ -201,19 +198,14 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ onSubmit, subViewOpen
           </TrendingWrapper>
         )}
         <Flex>
-          {chatInterfaceFeatureFlag &&
-            (aiSummaryIsLoading ? (
-              <AiSummarySkeleton />
-            ) : (
-              <>
-                {Object.keys(aiSummaryAnswers).map((i: string) => (
-                  <AiSummaryDetails key={i} question={i} response={aiSummaryAnswers[i]} />
-                ))}
-              </>
-            ))}
+          {Object.keys(aiSummaryAnswers).map((i: string) => (
+            <AiSummaryDetails key={i} question={i} response={aiSummaryAnswers[i]} />
+          ))}
+
           {isLoading ? <EpisodeSkeleton /> : <LatestView isSearchResult={!!searchTerm} />}
         </Flex>
       </ScrollWrapper>
+      {!isEmpty(aiSummaryAnswers) ? <AiSearch /> : null}
     </Wrapper>
   )
 })

src/components/App/UniverseQuestion/index.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react'
 import ArrowForwardIcon from '~/components/Icons/ArrowForwardIcon'
 import ExploreIcon from '~/components/Icons/ExploreIcon'
 import { getAboutData } from '~/network/fetchSourcesData'
+import { useAiSummaryStore } from '~/stores/useAiSummaryStore'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
 import { useUserStore } from '~/stores/useUserStore'
@@ -18,6 +19,7 @@ export const UniverseQuestion = () => {
   const { fetchData, setAbortRequests } = useDataStore((s) => s)
   const [setBudget] = useUserStore((s) => [s.setBudget])
   const setUniverseQuestionIsOpen = useAppStore((s) => s.setUniverseQuestionIsOpen)
+  const resetAiSummaryAnswer = useAiSummaryStore((s) => s.resetAiSummaryAnswer)
 
   useEffect(() => {
     const fetchSeedQuestions = async () => {
@@ -37,6 +39,7 @@ export const UniverseQuestion = () => {
 
   const handleSubmitQuestion = async (questionToSubmit: string) => {
     if (questionToSubmit) {
+      resetAiSummaryAnswer()
       setUniverseQuestionIsOpen()
     }
 

src/components/SearchBar/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
 import { useFormContext } from 'react-hook-form'
 import styled, { css } from 'styled-components'
 import { colors } from '~/utils/colors'
 
 type Props = {
   loading?: boolean
   onSubmit?: () => void
+  placeholder?: string
 }
 
 const Input = styled.input.attrs(() => ({
@@ -58,7 +58,7 @@ const Input = styled.input.attrs(() => ({
     `}
 `
 
-export const SearchBar = ({ loading, onSubmit }: Props) => {
+export const SearchBar = ({ loading, onSubmit, placeholder = 'Search' }: Props) => {
   const { register, watch } = useFormContext()
 
   const typing = watch('search')
@@ -78,7 +78,7 @@ export const SearchBar = ({ loading, onSubmit }: Props) => {
           onSubmit?.()
         }
       }}
-      placeholder="Search"
+      placeholder={placeholder}
       type="text"
     />
   )

src/stores/useAiSummaryStore/index.ts

@@ -7,24 +7,20 @@ type AIAnswer = {
 }
 
 export type AiSummaryStore = {
-  aiSummaryIsLoading: boolean
   aiSummaryAnswers: AIAnswer
   setAiSummaryAnswer: (key: string, answer: AIEntity) => void
-  setAiSummaryIsLoading: (status: boolean) => void
+  resetAiSummaryAnswer: () => void
   getAiSummaryAnswer: (key: string) => string
   getKeyExist: (key: string) => boolean
 }
 
 const defaultData = {
-  aiSummaryRequest: '',
-  aiSummaryIsLoading: false,
   aiSummaryAnswers: {},
 }
 
 export const useAiSummaryStore = create<AiSummaryStore>()(
   devtools((set, get) => ({
     ...defaultData,
-    setAiSummaryIsLoading: (status) => set({ aiSummaryIsLoading: status }),
     setAiSummaryAnswer: (key, answer) => {
       const summaryAnswers = get().aiSummaryAnswers
 
@@ -34,6 +30,9 @@ export const useAiSummaryStore = create<AiSummaryStore>()(
 
       set({ aiSummaryAnswers: clone })
     },
+    resetAiSummaryAnswer: () => {
+      set({ aiSummaryAnswers: {} })
+    },
     getAiSummaryAnswer: (key) => {
       const summaryAnswers = get().aiSummaryAnswers