Adding reset (new) chat button to Cody sidebar (#50679)

Add the reset (new) chat button to the Cody sidebar. This is useful when
users want to reset the conversation entirely.

## Test plan
- The reset button should reset the entire chat and display
recommendations when clicked. When a new prompt it's submitted, the
conversation can't display old messages.
- The reset button should appear only when the chat isn't presenting
errors, isn't loading, and embeddings are available.

![Screenshot 2023-04-15 at 10 47 25
AM](https://user-images.githubusercontent.com/64257673/232228002-6684e121-332e-4dcf-ad8d-58af159ea506.png)

- The reset button shouldn't appear when a loading state is visible.

![Screenshot 2023-04-15 at 10 47 39
AM](https://user-images.githubusercontent.com/64257673/232228000-8f6f3ac3-a078-4cc9-bb38-84337a33f2de.png)

- The reset button shouldn't appear when embeddings aren't available.

![Screenshot 2023-04-15 at 10 46 58
AM](https://user-images.githubusercontent.com/64257673/232228003-6e03dbb6-ca44-487d-bbd2-db29a0f03ba8.png)

- The reset button shouldn't appear when an error is visible.

![Screenshot 2023-04-15 at 10 51 40
AM](https://user-images.githubusercontent.com/64257673/232228459-19f0fc40-245e-41a9-ab4e-c34c08797ac0.png)



## App preview:

- [Web](https://sg-web-paulo-cody-new-chat-button.onrender.com/search)

Check out the [client app preview
documentation](https://docs.sourcegraph.com/dev/how-to/client_pr_previews)
to learn more.

client/web/src/cody/CodyChat.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-import { mdiClose, mdiSend, mdiArrowDown } from '@mdi/js'
+import { mdiClose, mdiSend, mdiArrowDown, mdiReload } from '@mdi/js'
 import classNames from 'classnames'
 import useResizeObserver from 'use-resize-observer'
 
@@ -9,7 +9,7 @@ import { FileLinkProps } from '@sourcegraph/cody-ui/src/chat/ContextFiles'
 import { CodyLogo } from '@sourcegraph/cody-ui/src/icons/CodyLogo'
 import { CODY_TERMS_MARKDOWN } from '@sourcegraph/cody-ui/src/terms'
 import { useQuery } from '@sourcegraph/http-client'
-import { Button, ErrorAlert, Icon, LoadingSpinner, Text, TextArea } from '@sourcegraph/wildcard'
+import { Button, ErrorAlert, Icon, LoadingSpinner, Text, TextArea, Tooltip } from '@sourcegraph/wildcard'
 
 import { RepoEmbeddingExistsQueryResult, RepoEmbeddingExistsQueryVariables } from '../graphql-operations'
 import { REPO_EMBEDDING_EXISTS_QUERY } from '../repo/repoRevisionSidebar/cody/backend'
@@ -24,7 +24,7 @@ interface CodyChatProps {
 }
 
 export const CodyChat = ({ onClose }: CodyChatProps): JSX.Element => {
-    const { onSubmit, messageInProgress, transcript, repo } = useChatStoreState()
+    const { onReset, onSubmit, messageInProgress, transcript, repo } = useChatStoreState()
 
     const codySidebarRef = useRef<HTMLDivElement>(null)
     const [formInput, setFormInput] = useState('')
@@ -66,10 +66,22 @@ export const CodyChat = ({ onClose }: CodyChatProps): JSX.Element => {
         variables: { repoName: repo },
     })
 
+    const shouldShowResetButton =
+        !embeddingExistsLoading && !embeddingExistsError && embeddingExistsData?.repository?.embeddingExists
+
     return (
         <div className={styles.mainWrapper}>
             <div className={styles.codySidebar} ref={codySidebarRef} onScroll={handleScroll}>
                 <div className={styles.codySidebarHeader}>
+                    {shouldShowResetButton && (
+                        <div>
+                            <Tooltip content="Start a new conversation">
+                                <Button variant="icon" aria-label="Start a new conversation" onClick={onReset}>
+                                    <Icon aria-hidden={true} svgPath={mdiReload} />
+                                </Button>
+                            </Tooltip>
+                        </div>
+                    )}
                     <div>
                         <CodyLogo />
                         Ask Cody

client/web/src/stores/codyChat.ts

@@ -10,15 +10,18 @@ import { eventLogger } from '../tracking/eventLogger'
 
 interface CodyChatStore {
     client: Client | null
+    config: ClientInit['config'] | null
     messageInProgress: ChatMessage | null
     transcript: ChatMessage[]
     repo: string
     filePath: string
     setClient: (client: Client | null) => void
+    setConfig: (config: ClientInit['config']) => void
     setMessageInProgress: (message: ChatMessage | null) => void
     setTranscript: (transcript: ChatMessage[]) => void
     initializeClient: (config: Required<ClientInit['config']>) => void
     onSubmit: (text: string) => void
+    onReset: () => void
 }
 
 export const useChatStoreState = create<CodyChatStore>((set, get): CodyChatStore => {
@@ -34,17 +37,26 @@ export const useChatStoreState = create<CodyChatStore>((set, get): CodyChatStore
         }
     }
 
+    const onReset = (): void => {
+        const { initializeClient, config } = get()
+        if (config) {
+            initializeClient(config as Required<ClientInit['config']>)
+        }
+    }
+
     return {
         client: null,
         messageInProgress: null,
+        config: null,
         transcript: [],
         filePath: '',
         repo: '',
         setClient: client => set({ client }),
+        setConfig: config => set({ config }),
         setMessageInProgress: message => set({ messageInProgress: message }),
         setTranscript: transcript => set({ transcript }),
         initializeClient: (config: Required<ClientInit['config']>): void => {
-            set({ messageInProgress: null, transcript: [], repo: config.codebase })
+            set({ messageInProgress: null, transcript: [], repo: config.codebase, config })
             createClient({
                 config,
                 setMessageInProgress: message => set({ messageInProgress: message }),
@@ -60,6 +72,7 @@ export const useChatStoreState = create<CodyChatStore>((set, get): CodyChatStore
         },
 
         onSubmit,
+        onReset,
     }
 })