From 0e5ffb877201063910529e963e42ceaa9b9091bb Mon Sep 17 00:00:00 2001 From: Paulo Almeida <64257673+almeidapaulooliveira@users.noreply.github.com> Date: Mon, 17 Apr 2023 11:21:38 -0300 Subject: [PATCH] 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 | 18 +++++++++++++++--- client/web/src/stores/codyChat.ts | 15 ++++++++++++++- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/client/web/src/cody/CodyChat.tsx b/client/web/src/cody/CodyChat.tsx index 55f1c39be70..e014a36977a 100644 --- a/client/web/src/cody/CodyChat.tsx +++ b/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(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 (
+ {shouldShowResetButton && ( +
+ + + +
+ )}
Ask Cody diff --git a/client/web/src/stores/codyChat.ts b/client/web/src/stores/codyChat.ts index 743ef862998..a799a01d932 100644 --- a/client/web/src/stores/codyChat.ts +++ b/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) => void onSubmit: (text: string) => void + onReset: () => void } export const useChatStoreState = create((set, get): CodyChatStore => { @@ -34,17 +37,26 @@ export const useChatStoreState = create((set, get): CodyChatStore } } + const onReset = (): void => { + const { initializeClient, config } = get() + if (config) { + initializeClient(config as Required) + } + } + 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): 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((set, get): CodyChatStore }, onSubmit, + onReset, } })