Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AI Chat - UI Issue: The design of the AI Search Text Area should be consistent with other parts of the website. #1948

Closed
wants to merge 1 commit into from
Closed

AI Chat - UI Issue: The design of the AI Search Text Area should be consistent with other parts of the website. #1948

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions src/components/App/UniverseQuestion/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Flex } from '~/components/common/Flex'

import { TextareaAutosize } from '@mui/base'
import { Button } from '@mui/material'
import { useEffect, useState } from 'react'
import { useEffect, useState, useRef } from 'react'
import ArrowForwardIcon from '~/components/Icons/ArrowForwardIcon'
import ExploreIcon from '~/components/Icons/ExploreIcon'
import HelpIcon from '~/components/Icons/HelpIcon'
Expand All @@ -20,13 +20,20 @@ export const UniverseQuestion = () => {
const setUniverseQuestionIsOpen = useAppStore((s) => s.setUniverseQuestionIsOpen)
const resetAiSummaryAnswer = useAiSummaryStore((s) => s.resetAiSummaryAnswer)
const [displayedSeedQuestions, setDisplayedSeedQuestions] = useState<string[]>([])
const [focus, setFocus] = useState(false)

const textareaRef = useRef<HTMLTextAreaElement>(null)

useEffect(() => {
if (seedQuestions) {
setDisplayedSeedQuestions(shuffleArray(seedQuestions).slice(0, 4))
}
}, [seedQuestions])

useEffect(() => {
textareaRef.current?.focus()
}, [])

const handleSubmitQuestion = async (questionToSubmit: string) => {
if (questionToSubmit) {
resetAiSummaryAnswer()
Expand Down Expand Up @@ -69,9 +76,12 @@ export const UniverseQuestion = () => {
return (
<Wrapper>
Ideas have shapes
<TextAreaWrapper onKeyDown={onEnterPress} py={12} tabIndex={-1}>
<TextAreaWrapper focused={focus} onKeyDown={onEnterPress} py={12} tabIndex={-1}>
<StyledTextarea
ref={textareaRef}
onBlur={() => setFocus(false)}
onChange={(e) => setQuestion(e.target.value)}
onFocus={() => setFocus(true)}
placeholder="What do you want to know?"
value={question}
/>
Expand Down Expand Up @@ -146,15 +156,15 @@ const StyledTextarea = styled(TextareaAutosize).attrs({
}
`

const TextAreaWrapper = styled(Flex)`
const TextAreaWrapper = styled(Flex)<{ focused: boolean }>`
position: relative;
margin-top: 30px;
background: ${colors.BG1};
max-width: 702px;
width: 702px;
color: ${colors.white};
min-height: 150px;
border: 1px solid ${colors.modalShield};
border: 1px solid ${({ focused }) => (focused ? colors.modalShield : 'transparent')};
resize: none;
outline: none;
border-radius: 12px;
Expand Down
Loading