navigate to landing page when refreshing chat page

opentrons-ai-client/src/pages/Chat/__tests__/Chat.test.tsx

@@ -1,15 +1,25 @@
 import { screen } from '@testing-library/react'
-import { describe, it, vi, beforeEach } from 'vitest'
+import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { PromptGuide } from '../../../molecules/PromptGuide'
 import { ChatFooter } from '../../../molecules/ChatFooter'
 import { Chat } from '../index'
+import type { NavigateFunction } from 'react-router-dom'
 
 vi.mock('../../../molecules/PromptGuide')
 vi.mock('../../../molecules/ChatFooter')
 // Note (kk:05/20/2024) to avoid TypeError: scrollRef.current.scrollIntoView is not a function
 window.HTMLElement.prototype.scrollIntoView = vi.fn()
+const mockNavigate = vi.fn()
+
+vi.mock('react-router-dom', async importOriginal => {
+  const reactRouterDom = await importOriginal<NavigateFunction>()
+  return {
+    ...reactRouterDom,
+    useNavigate: () => mockNavigate,
+  }
+})
 
 const render = (): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(<Chat />, {
@@ -28,6 +38,11 @@ describe('Chat', () => {
     screen.getByText('mock ChatFooter')
   })
 
+  it('should navigate to home if chatData is empty', () => {
+    render()
+    expect(mockNavigate).toHaveBeenCalledWith('/')
+  })
+
   it.skip('should not show the feedback modal when loading the page', () => {
     render()
     screen.getByText('Send feedback to Opentrons')

opentrons-ai-client/src/pages/Chat/index.tsx

@@ -12,6 +12,7 @@ import { ChatDisplay } from '../../molecules/ChatDisplay'
 import { ChatFooter } from '../../molecules/ChatFooter'
 import styled from 'styled-components'
 import { FeedbackModal } from '../../molecules/FeedbackModal'
+import { useNavigate } from 'react-router-dom'
 
 export interface InputType {
   userPrompt: string
@@ -28,6 +29,13 @@ export function Chat(): JSX.Element | null {
   const scrollRef = useRef<HTMLSpanElement | null>(null)
   const [showFeedbackModal] = useAtom(feedbackModalAtom)
   const [scrollToBottom] = useAtom(scrollToBottomAtom)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (chatData.length === 0) {
+      navigate('/')
+    }
+  }, [])
 
   useEffect(() => {
     if (scrollRef.current != null)