I'm building a portfolio website with React + TypeScript and Redux. I have a chat assistant component that should only appear after a user clicks an "Start" button (which sets app.ready to true in Redux state).
However, when the explore button is clicked, the entire screen goes white.
my component are,
const ChatAssistant = () => {
const [isExpanded, setIsExpanded] = useState(false)
const [showOptions, setShowOptions] = useState(false)
const [showMessage, setShowMessage] = useState(false)
const [showButtons, setShowButtons] = useState(false)
const app = useSelector((state: RootState) => state.app)
const handleToggle = () => {
setIsExpanded(!isExpanded)
if (isExpanded) {
setShowOptions(false)
setShowMessage(false)
setShowButtons(false)
}
}
// Trigger animations when chatbox opens in portfolio
useEffect(() => {
if (isExpanded) {
setTimeout(() => setShowMessage(true), 300)
setTimeout(() => setShowButtons(true), 1500)
} else {
setShowMessage(false)
setShowButtons(false)
}
}, [isExpanded])
const handleYes = () => {
setShowButtons(false)
setTimeout(() => {
setShowOptions(true)
setTimeout(() => setShowButtons(true), 300)
}, 200)
}
const handleNo = () => {
setIsExpanded(false)
setShowOptions(false)
}
// Only show after explore button is clicked
if (!app.ready) {
return null
}
return (
<div className={styles.chatAssistant}>
{/* Component JSX */}
</div>
)
}
