fix(opentrons-ai-client): Navigate to landing page when refreshing ch…

…at page (#16810)

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

# Overview

Before the app would just show an empty chat screen when refreshed. Now
it will navigate to the landing page

<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->

## Test Plan and Hands on Testing

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->

## Review requests

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions.
-->

## Risk assessment

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->

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)