Merge pull request #1826 from stakwork/feature/ui-updates

feat: remove latest on ai chat, fix ui issues

src/components/App/ActionsToolbar/UniverseQuestionControl/index.tsx

@@ -31,7 +31,7 @@ const StyledButton = styled(Button)`
     margin-right: 8px;
 
     .MuiButton-startIcon {
-      margin-left: 0;
+      margin-left: 2px;
       color: ${colors.white};
     }
   }

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

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+
+type Props = {
+  answer: string
+}
+
+const Wrapper = styled(Flex).attrs({
+  direction: 'column',
+})`
+  padding: 1.5rem;
+  gap: 1rem;
+`
+
+const SummaryText = styled(Text)`
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 19.6px;
+`
+
+export const AiAnswer = ({ answer }: Props) => {
+  const [displayedText, setDisplayedText] = useState('')
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout
+
+    if (!answer) {
+      return
+    }
+
+    if (displayedText.length < answer.length) {
+      timeoutId = setTimeout(() => {
+        setDisplayedText(answer.slice(0, displayedText.length + 1))
+      }, 10)
+
+      // eslint-disable-next-line consistent-return
+      return () => clearTimeout(timeoutId)
+    }
+  }, [answer, displayedText])
+
+  return (
+    <Wrapper>
+      <SummaryText>{displayedText}</SummaryText>
+    </Wrapper>
+  )
+}

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

@@ -68,7 +68,18 @@ const Heading = styled(Flex)`
 const QuestionWrapper = styled(Flex)`
   color: ${colors.GRAY3};
   padding: 12px 0;
-  border-bottom: 1px solid ${colors.black};
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  font-size: 14px;
+  cursor: pointer;
+  line-height: 1.4;
+
+  &:hover {
+    color: ${colors.white};
+    .icon {
+      color: ${colors.white};
+    }
+  }
+
   .icon {
     font-size: 20px;
     color: ${colors.GRAY7};
@@ -78,5 +89,5 @@ const QuestionWrapper = styled(Flex)`
 
 const SectionWrapper = styled(Flex)`
   padding: 24px;
-  border-top: 1px solid ${colors.black};
+  border-top: 1px solid rgba(0, 0, 0, 0.3);
 `

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

@@ -69,7 +69,7 @@ const _AiSources = ({ sourceIds }: Props) => {
           } = adaptedNode || {}
 
           return (
-            <Episode
+            <StyledEpisode
               // eslint-disable-next-line react/no-array-index-key
               key={index.toString()}
               boostCount={boost || 0}
@@ -91,17 +91,17 @@ const _AiSources = ({ sourceIds }: Props) => {
           )
         })}
 
-        <LoadMoreWrapper align="center" background="BG1" direction="row" justify="flex-end">
-          {currentNodes.length > 3 ? (
+        {currentNodes.length > 3 ? (
+          <LoadMoreWrapper align="center" background="BG1" direction="row" justify="flex-end">
             <Button
               endIcon={showAll ? <ChevronDownIcon /> : <ChevronUpIcon />}
               onClick={handleLoadMoreClick}
               size="medium"
             >
               {showAll ? 'Hide' : 'Show all'}
             </Button>
-          ) : null}
-        </LoadMoreWrapper>
+          </LoadMoreWrapper>
+        ) : null}
       </ScrollView>
     </SectionWrapper>
   )
@@ -118,6 +118,7 @@ const Heading = styled(Flex)`
     font-weight: 600;
     color: ${colors.white};
     font-size: 14px;
+    padding: 24px 24px 0;
 
     .heading__icon {
       margin-right: 12px;
@@ -133,6 +134,11 @@ const Heading = styled(Flex)`
 `
 
 const SectionWrapper = styled(Flex)`
-  padding: 24px;
-  border-top: 1px solid ${colors.black};
+  border-top: 1px solid rgba(0, 0, 0, 0.3);
+`
+
+const StyledEpisode = styled(Episode)`
+  &:first-child {
+    border-top: none;
+  }
 `

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

@@ -15,7 +15,6 @@ const EpisodeWrapper = styled(Flex).attrs({
 })<EpisodeWrapperProps>`
   padding: 24px;
   cursor: pointer;
-  border-top: 1px solid #101317;
   background: ${colors.BG1};
 
   .type-image {

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

@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { AIEntity } from '~/types'
+import { EpisodeSkeleton } from '../Relevance/EpisodeSkeleton'
+import { AiAnswer } from './AiAnswer'
+import { AiQuestions } from './AiQuestions'
+import { AiSources } from './AiSources'
+import { AiSummarySkeleton } from './AiSummarySkeleton'
+
+type Props = {
+  question: string
+  response: AIEntity
+}
+
+const Title = styled(Text)`
+  font-size: 20px;
+  font-weight: 600;
+  padding: 24px 24px 0;
+`
+
+export const AiSummary = ({ question, response }: Props) => (
+  <Wrapper>
+    <Title>{question}</Title>
+    {response.answerLoading ? <AiSummarySkeleton /> : <AiAnswer answer={response.answer || ''} />}
+    {response.sourcesLoading ? <EpisodeSkeleton count={1} /> : <AiSources sourceIds={response.sources || []} />}
+    {response.questionsLoading ? <EpisodeSkeleton count={1} /> : <AiQuestions questions={response.questions || []} />}
+  </Wrapper>
+)
+
+const Wrapper = styled(Flex).attrs({
+  direction: 'column',
+})`
+  border-top: 1px solid #101317;
+`

src/components/App/SideBar/index.tsx

@@ -1,8 +1,8 @@
 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 { useNavigate } from 'react-router-dom'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import { SelectWithPopover } from '~/components/App/SideBar/Dropdown'
@@ -16,21 +16,20 @@ 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 { useAiSummaryStore, useHasAiChats } 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 { useSchemaStore } from '~/stores/useSchemaStore'
 import { colors } from '~/utils/colors'
 import { AiSearch } from './AiSearch'
-import { AiSummaryDetails } from './AiSummary/AiSummaryDetail'
+import { AiSummary } from './AiSummary'
 import { LatestView } from './Latest'
 import { EpisodeSkeleton } from './Relevance/EpisodeSkeleton'
 import { SideBarSubView } from './SidebarSubView'
 import { Tab } from './Tab'
 import { Trending } from './Trending'
-import { useNavigate } from 'react-router-dom'
-import { useSchemaStore } from '~/stores/useSchemaStore'
 
 export const MENU_WIDTH = 390
 
@@ -115,6 +114,8 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ subViewOpen }, ref) =
 
   const navigate = useNavigate()
 
+  const hasAiChats = useHasAiChats()
+
   return (
     <Wrapper ref={ref} id="sidebar-wrapper">
       <TitlePlaceholder />
@@ -194,20 +195,20 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ subViewOpen }, ref) =
         </CollapseButton>
       )}
       <ScrollWrapper ref={componentRef}>
-        {!searchTerm && trendingTopicsFeatureFlag && (
+        {!searchTerm && !hasAiChats && trendingTopicsFeatureFlag && (
           <TrendingWrapper>
             <Trending />
           </TrendingWrapper>
         )}
         <Flex>
           {Object.keys(aiSummaryAnswers).map((i: string) => (
-            <AiSummaryDetails key={i} question={i} response={aiSummaryAnswers[i]} />
+            <AiSummary key={i} question={i} response={aiSummaryAnswers[i]} />
           ))}
 
-          {isLoading ? <EpisodeSkeleton /> : <LatestView isSearchResult={!!searchTerm} />}
+          {isLoading ? <EpisodeSkeleton /> : <LatestView isSearchResult={!!searchTerm || hasAiChats} />}
         </Flex>
       </ScrollWrapper>
-      {!isEmpty(aiSummaryAnswers) ? <AiSearch /> : null}
+      {hasAiChats ? <AiSearch /> : null}
     </Wrapper>
   )
 })

src/components/SearchBar/index.tsx

@@ -59,7 +59,7 @@ const Input = styled.input.attrs(() => ({
     `}
 `
 
-export const SearchBar = ({ loading, placeholder = 'Search' }: Props) => {
+export const SearchBar = ({ loading, placeholder = 'Search', onSubmit }: Props) => {
   const { register, watch } = useFormContext()
 
   const typing = watch('search')
@@ -77,6 +77,12 @@ export const SearchBar = ({ loading, placeholder = 'Search' }: Props) => {
             return
           }
 
+          if (onSubmit) {
+            onSubmit()
+
+            return
+          }
+
           const encodedQuery = typing.replace(/\s+/g, '+')
 
           navigate(`/search?q=${encodedQuery}`)

src/stores/useAiSummaryStore/index.ts

@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash'
 import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
 import { AIEntity } from '~/types'
@@ -53,3 +54,5 @@ export const useAiSummaryStore = create<AiSummaryStore>()(
     },
   })),
 )
+
+export const useHasAiChats = () => useAiSummaryStore((s) => !isEmpty(s.aiSummaryAnswers))

src/stores/useDataStore/index.ts

@@ -140,10 +140,12 @@ export const useDataStore = create<DataStore>()(
       const { setAiSummaryAnswer, aiRefId } = useAiSummaryStore.getState()
       let ai = { ai_summary: String(!!AISearchQuery) }
 
-      if (!currentPage) {
-        set({ isFetching: true })
-      } else {
-        set({ isLoadingNew: true })
+      if (!AISearchQuery) {
+        if (!currentPage) {
+          set({ isFetching: true })
+        } else {
+          set({ isLoadingNew: true })
+        }
       }
 
       if (AISearchQuery) {