Skip to content

Commit

Permalink
Merge pull request #1800 from sophieturner0/seed-questions-chat-inter…
Browse files Browse the repository at this point in the history 
…face

Update Add Seed Questions to Search Interface
  • Loading branch information
@Rassl
Rassl authored Jul 12, 2024
2 parents cfed745 + 45af57f commit a1007dc
Show file tree
Hide file tree
Showing 6 changed files with 108 additions and 41 deletions.
11 changes: 2 additions & 9 deletions public/svg-icons/ArrowForwardIcon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/svg-icons/HelpIcon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
96 changes: 77 additions & 19 deletions src/components/App/UniverseQuestion/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Button } from '@mui/material'
import { useEffect, useState } from 'react'
import ArrowForwardIcon from '~/components/Icons/ArrowForwardIcon'
import ExploreIcon from '~/components/Icons/ExploreIcon'
import HelpIcon from '~/components/Icons/HelpIcon'
import { getAboutData } from '~/network/fetchSourcesData'
import { useAiSummaryStore } from '~/stores/useAiSummaryStore'
import { useAppStore } from '~/stores/useAppStore'
Expand All @@ -27,7 +28,9 @@ export const UniverseQuestion = () => {
const response = await getAboutData()

if (response.seed_questions) {
setSeedQuestions(response.seed_questions)
const shuffledQuestions = shuffleArray(response.seed_questions)

setSeedQuestions(shuffledQuestions)
}
} catch (error) {
console.error('Error fetching seed questions:', error)
Expand Down Expand Up @@ -60,50 +63,80 @@ export const UniverseQuestion = () => {
await handleSubmitQuestion(seedQuestion)
}

const shuffleArray = (inputArray: string[]) => {
const array = [...inputArray]
let i = array.length - 1

while (i > 0) {
const j = Math.floor(Math.random() * (i + 1))

;[array[i], array[j]] = [array[j], array[i]]
i -= 1
}

return array
}

const displayedSeedQuestions = seedQuestions.slice(0, 4)

const isValidText = !!question && question.trim().length > 0

return (
<Wrapper>
Ideas have shape
Ideas have shapes
<TextAreaWrapper onKeyDown={onEnterPress} py={12} tabIndex={-1}>
<StyledTextarea
minRows={5}
onChange={(e) => setQuestion(e.target.value)}
placeholder="Enter your question"
placeholder="What do you want to know?"
value={question}
/>
<StyledButton
color="secondary"
endIcon={<ArrowForwardIcon />}
disabled={!isValidText}
onClick={() => handleSubmitQuestion(question)}
variant="contained"
>
Search
{isValidText ? (
<>
Search <ArrowForwardIcon />
</>
) : (
<ArrowForwardIcon />
)}
</StyledButton>
</TextAreaWrapper>
{seedQuestions.length > 0 && (
{displayedSeedQuestions.length > 0 && (
<SeedQuestionsWrapper>
{seedQuestions.map((seedQuestion) => (
{displayedSeedQuestions.map((seedQuestion) => (
<SeedQuestion key={seedQuestion} onClick={() => handleSeedQuestionClick(seedQuestion)}>
<HelpIcon />
{seedQuestion}
</SeedQuestion>
))}
</SeedQuestionsWrapper>
)}
<CloseButton onClick={setUniverseQuestionIsOpen} startIcon={<ExploreIcon />}>
Explore graph
Explore Graph
</CloseButton>
</Wrapper>
)
}

const StyledTextarea = styled(TextareaAutosize)`
const StyledTextarea = styled(TextareaAutosize).attrs({
minRows: 5,
})`
background: ${colors.BG1};
max-width: 702px;
width: 702px;
color: ${colors.white};
padding: 16px 8px;
border: none;
border: 1px solid ${colors.modalShield};
resize: none;
outline: none;
border-radius: 12px;
font-family: 'Barlow';
font-size: 16px;
font-weight: 400;
box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.5);
&:-moz-placeholder, /* Firefox 18- */
Expand Down Expand Up @@ -134,15 +167,27 @@ const Wrapper = styled(Flex)`
font-style: normal;
font-weight: 700;
line-height: 16px;
font-family: 'Barlow';
`

const StyledButton = styled(Button)`
&& {
position: absolute;
bottom: 20px;
right: 20px;
bottom: 26px;
right: 14px;
height: 32px;
border-radius: 16px;
min-width: 32px;
padding: 2px;
}
&&.MuiButton-root {
padding: 10px;
}
svg {
width: 12px;
height: 12px;
}
`

Expand All @@ -167,17 +212,30 @@ const SeedQuestionsWrapper = styled.div`
const SeedQuestion = styled.div`
background: ${colors.BG1};
color: ${colors.white};
padding: 15px 20px;
padding: 15px 12px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
justify-content: flex-start;
text-align: left;
font-family: Barlow;
font-size: 13px;
font-weight: 500;
font-size: 14px;
font-weight: 400;
gap: 10px;
&:hover {
background: ${colors.DROPDOWN_SELECTED};
background: ${colors.SEEDQUESTION_HOVER};
}
&:active {
background: ${colors.SEEDQUESTION};
}
svg {
width: 20px;
height: 20px;
}
path {
fill: ${colors.modalWhiteOverlayBg};
}
`
18 changes: 5 additions & 13 deletions src/components/Icons/ArrowForwardIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,11 @@
import React from 'react'

const ArrowForwardIcon: 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">
<g id="arrow_forward">
<mask id="mask0_8513_325" 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_8513_325)">
<path
id="arrow_forward_2"
d="M12.4702 9.56277H3.9375C3.77789 9.56277 3.64424 9.50892 3.53655 9.40123C3.42885 9.29355 3.375 9.1599 3.375 9.00028C3.375 8.84067 3.42885 8.70702 3.53655 8.59933C3.64424 8.49165 3.77789 8.4378 3.9375 8.4378H12.4702L8.59326 4.56087C8.48172 4.44933 8.42667 4.3188 8.42812 4.16929C8.42956 4.01977 8.48846 3.88683 8.60481 3.7705C8.72114 3.66185 8.85287 3.6056 8.99998 3.60175C9.14709 3.5979 9.27882 3.65415 9.39516 3.7705L14.1504 8.52578C14.2206 8.59597 14.2701 8.67 14.299 8.74789C14.3278 8.82577 14.3423 8.9099 14.3423 9.00028C14.3423 9.09067 14.3278 9.1748 14.299 9.25268C14.2701 9.33057 14.2206 9.4046 14.1504 9.47479L9.39516 14.2301C9.29132 14.3339 9.16272 14.387 9.00936 14.3894C8.85599 14.3918 8.72114 14.3387 8.60481 14.2301C8.48846 14.1137 8.43028 13.9801 8.43028 13.8291C8.43028 13.6782 8.48846 13.5445 8.60481 13.4282L12.4702 9.56277Z"
fill="currentColor"
/>
</g>
</g>
<svg width="1em" height="1em" viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.47019 6.56248H0.9375C0.777887 6.56248 0.644237 6.50863 0.53655 6.40094C0.42885 6.29326 0.375 6.15961 0.375 5.99999C0.375 5.84038 0.42885 5.70673 0.53655 5.59904C0.644237 5.49136 0.777887 5.43751 0.9375 5.43751H9.47019L5.59326 1.56058C5.48172 1.44904 5.42667 1.31851 5.42812 1.169C5.42956 1.01948 5.48846 0.886545 5.60481 0.770208C5.72114 0.661558 5.85287 0.605308 5.99998 0.601458C6.14709 0.597608 6.27882 0.653858 6.39516 0.770208L11.1504 5.52549C11.2206 5.59568 11.2701 5.66971 11.299 5.7476C11.3278 5.82548 11.3423 5.90961 11.3423 5.99999C11.3423 6.09038 11.3278 6.17451 11.299 6.25239C11.2701 6.33028 11.2206 6.40431 11.1504 6.4745L6.39516 11.2298C6.29132 11.3336 6.16272 11.3868 6.00936 11.3892C5.85599 11.3916 5.72114 11.3384 5.60481 11.2298C5.48846 11.1134 5.43028 10.9798 5.43028 10.8288C5.43028 10.6779 5.48846 10.5442 5.60481 10.4279L9.47019 6.56248Z"
fill="currentColor"
/>
</svg>
)

Expand Down
19 changes: 19 additions & 0 deletions src/components/Icons/HelpIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* eslint-disable */
import React from 'react';

const HelpIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
<svg
width="1em"
height="1em"
viewBox="0 0 18 18"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.95833 14.0013C9.25 14.0013 9.49653 13.9006 9.69792 13.6992C9.89931 13.4978 10 13.2513 10 12.9596C10 12.668 9.89931 12.4214 9.69792 12.2201C9.49653 12.0187 9.25 11.918 8.95833 11.918C8.66667 11.918 8.42014 12.0187 8.21875 12.2201C8.01736 12.4214 7.91667 12.668 7.91667 12.9596C7.91667 13.2513 8.01736 13.4978 8.21875 13.6992C8.42014 13.9006 8.66667 14.0013 8.95833 14.0013ZM9 17.3346C7.84722 17.3346 6.76389 17.1159 5.75 16.6784C4.73611 16.2409 3.85417 15.6471 3.10417 14.8971C2.35417 14.1471 1.76042 13.2652 1.32292 12.2513C0.885416 11.2374 0.666666 10.1541 0.666666 9.0013C0.666666 7.84852 0.885416 6.76519 1.32292 5.7513C1.76042 4.73741 2.35417 3.85547 3.10417 3.10547C3.85417 2.35547 4.73611 1.76172 5.75 1.32422C6.76389 0.886719 7.84722 0.667969 9 0.667969C10.1528 0.667969 11.2361 0.886719 12.25 1.32422C13.2639 1.76172 14.1458 2.35547 14.8958 3.10547C15.6458 3.85547 16.2396 4.73741 16.6771 5.7513C17.1146 6.76519 17.3333 7.84852 17.3333 9.0013C17.3333 10.1541 17.1146 11.2374 16.6771 12.2513C16.2396 13.2652 15.6458 14.1471 14.8958 14.8971C14.1458 15.6471 13.2639 16.2409 12.25 16.6784C11.2361 17.1159 10.1528 17.3346 9 17.3346ZM9.08333 5.41797C9.43056 5.41797 9.73264 5.52908 9.98958 5.7513C10.2465 5.97352 10.375 6.2513 10.375 6.58464C10.375 6.89019 10.2812 7.16102 10.0937 7.39714C9.90625 7.63325 9.69444 7.85547 9.45833 8.0638C9.13889 8.34158 8.85764 8.64714 8.61458 8.98047C8.37153 9.3138 8.25 9.6888 8.25 10.1055C8.25 10.2999 8.32292 10.4631 8.46875 10.5951C8.61458 10.727 8.78472 10.793 8.97917 10.793C9.1875 10.793 9.36458 10.7235 9.51042 10.5846C9.65625 10.4457 9.75 10.2721 9.79167 10.0638C9.84722 9.77214 9.97222 9.51172 10.1667 9.28255C10.3611 9.05339 10.5694 8.83464 10.7917 8.6263C11.1111 8.32075 11.3854 7.98741 11.6146 7.6263C11.8437 7.26519 11.9583 6.86241 11.9583 6.41797C11.9583 5.70964 11.6701 5.12977 11.0937 4.67839C10.5174 4.227 9.84722 4.0013 9.08333 4.0013C8.55555 4.0013 8.05208 4.11241 7.57292 4.33464C7.09375 4.55686 6.72917 4.89714 6.47917 5.35547C6.38194 5.52214 6.35069 5.69922 6.38542 5.88672C6.42014 6.07422 6.51389 6.21658 6.66667 6.3138C6.86111 6.42491 7.0625 6.45964 7.27083 6.41797C7.47917 6.3763 7.65278 6.25825 7.79167 6.0638C7.94444 5.85547 8.13542 5.69575 8.36458 5.58464C8.59375 5.47352 8.83333 5.41797 9.08333 5.41797Z"
fill="currentColor"
/>
</svg>
);

export default HelpIcon;
2 changes: 2 additions & 0 deletions src/utils/colors/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,8 @@ export const colors = {
TOPIC: 'rgba(255, 255, 255, 0.85)',
THING: 'rgba(150, 39, 119, 1)',
SUCESS: 'rgba(73, 201, 152, 1)',
SEEDQUESTION: 'rgba(47, 58, 89, 1)',
SEEDQUESTION_HOVER: 'rgba(38, 42, 58, 1)',
} as const

export type ColorName = keyof typeof colors

0 comments on commit a1007dc

Please sign in to comment.