Cody: Improve chat history

client/cody-ui/src/chat/Transcript.tsx

@@ -76,6 +76,11 @@ export const Transcript: React.FunctionComponent<
                     top: transcriptContainerRef.current.scrollHeight,
                 })
             }
+
+            // scroll to the end when messages are loaded
+            transcriptContainerRef.current.scrollTo({
+                top: transcriptContainerRef.current.scrollHeight,
+            })
         }
     }, [transcript, transcriptContainerRef])
 

client/cody/CHANGELOG.md

@@ -8,6 +8,17 @@ Starting from `0.2.0`, Cody is using `major.EVEN_NUMBER.patch` for release versi
 
 ### Added
 
+- Add delete button for removing individual history [pull/52904](https://github.com/sourcegraph/sourcegraph/pull/52904)
+- Load the recent ongoing chat on reload of window [pull/52904](https://github.com/sourcegraph/sourcegraph/pull/52904)
+
+### Fixed
+
+- Fix the loading of files and scroll chat to the end while restoring the history [pull/52904](https://github.com/sourcegraph/sourcegraph/pull/52904)
+
+### Changed
+
+- Save the current ongoing conversation to the chat history [pull/52904](https://github.com/sourcegraph/sourcegraph/pull/52904)
+
 ### Fixed
 
 - Open file paths from Cody's responses in a workspace with the correct protocol. [pull/53103](https://github.com/sourcegraph/sourcegraph/pull/53103)

client/cody/package.json

@@ -285,6 +285,10 @@
         "command": "cody.delete-access-token",
         "title": "Cody: Sign out"
       },
+      {
+        "command": "cody.clear-chat-history",
+        "title": "Cody: Clear chat history"
+      },
       {
         "command": "cody.manual-completions",
         "title": "Cody: Open Completions Panel"

client/cody/src/chat/ChatViewProvider.ts

@@ -157,15 +157,13 @@ export class ChatViewProvider implements vscode.WebviewViewProvider, vscode.Disp
 
     /**
      * Restores a session from a chatID
-     * We delete the loaded session from our in-memory chatHistory (to hide it from the history view)
-     * but don't modify the localStorage as no data changes when a session is restored
      */
     public async restoreSession(chatID: string): Promise<void> {
         await this.saveTranscriptToChatHistory()
         this.cancelCompletion()
         this.currentChatID = chatID
         this.transcript = Transcript.fromJSON(this.chatHistory[chatID])
-        delete this.chatHistory[chatID]
+        await this.transcript.toJSON()
         this.sendTranscript()
         this.sendChatHistory()
     }
@@ -179,6 +177,7 @@ export class ChatViewProvider implements vscode.WebviewViewProvider, vscode.Disp
                 this.publishConfig()
                 this.sendTranscript()
                 this.sendChatHistory()
+                await this.loadRecentChat()
                 break
             case 'submit':
                 await this.onHumanMessageSubmitted(message.text, message.submitType)
@@ -217,6 +216,9 @@ export class ChatViewProvider implements vscode.WebviewViewProvider, vscode.Disp
             case 'restoreHistory':
                 await this.restoreSession(message.chatID)
                 break
+            case 'deleteHistory':
+                await this.deleteHistory(message.chatID)
+                break
             case 'links':
                 void this.openExternalLinks(message.value)
                 break
@@ -333,6 +335,7 @@ export class ChatViewProvider implements vscode.WebviewViewProvider, vscode.Disp
         this.cancelCompletionCallback = null
         this.sendTranscript()
         void this.saveTranscriptToChatHistory()
+        this.sendChatHistory()
         void vscode.commands.executeCommand('setContext', 'cody.reply.pending', false)
         this.logEmbeddingsSearchErrors()
     }
@@ -577,6 +580,15 @@ export class ChatViewProvider implements vscode.WebviewViewProvider, vscode.Disp
         this.setWebviewView('login')
     }
 
+    /**
+     * Delete history from current chat history and local storage
+     */
+    private async deleteHistory(chatID: string): Promise<void> {
+        delete this.chatHistory[chatID]
+        await this.localStorage.deleteChatHistory(chatID)
+        this.sendChatHistory()
+    }
+
     /**
      * Loads chat history from local storage
      */
@@ -588,6 +600,21 @@ export class ChatViewProvider implements vscode.WebviewViewProvider, vscode.Disp
         }
     }
 
+    /**
+     * Loads the most recent chat
+     */
+    private async loadRecentChat(): Promise<void> {
+        const localHistory = this.localStorage.getChatHistory()
+        if (localHistory) {
+            const chats = localHistory.chat
+            const sortedChats = Object.entries(chats).sort(
+                (a, b) => +new Date(b[1].lastInteractionTimestamp) - +new Date(a[1].lastInteractionTimestamp)
+            )
+            const chatID = sortedChats[0][0]
+            await this.restoreSession(chatID)
+        }
+    }
+
     /**
      * Sends chat history to webview
      */

client/cody/src/chat/protocol.ts

@@ -17,6 +17,7 @@ export type WebviewMessage =
     | { command: 'removeToken' }
     | { command: 'removeHistory' }
     | { command: 'restoreHistory'; chatID: string }
+    | { command: 'deleteHistory'; chatID: string }
     | { command: 'links'; value: string }
     | { command: 'openFile'; filePath: string }
     | { command: 'edit'; text: string }

client/cody/src/main.ts

@@ -175,6 +175,9 @@ const register = async (
         vscode.commands.registerCommand('cody.delete-access-token', async () => {
             await chatProvider.logout()
         }),
+        vscode.commands.registerCommand('cody.clear-chat-history', async () => {
+            await chatProvider.clearHistory()
+        }),
         // Commands
         vscode.commands.registerCommand('cody.welcome', () =>
             vscode.commands.executeCommand('workbench.action.openWalkthrough', 'sourcegraph.cody-ai#welcome', false)

client/cody/src/services/LocalStorageProvider.ts

@@ -70,6 +70,18 @@ export class LocalStorage {
         }
     }
 
+    public async deleteChatHistory(chatID: string): Promise<void> {
+        const userHistory = this.getChatHistory()
+        if (userHistory) {
+            try {
+                delete userHistory.chat[chatID]
+                await this.storage.update(this.KEY_LOCAL_HISTORY, { ...userHistory })
+            } catch (error) {
+                console.error(error)
+            }
+        }
+    }
+
     public async removeChatHistory(): Promise<void> {
         try {
             await this.storage.update(this.KEY_LOCAL_HISTORY, null)

client/cody/test/e2e/history.test.ts

@@ -20,6 +20,17 @@ test('checks for the chat history and new session', async ({ page, sidebar }) =>
     await page.click('[aria-label="Cody: Chat History"]')
     await expect(sidebar.getByText('Chat History')).toBeVisible()
 
+    // start a new chat session and check history
+
     await page.click('[aria-label="Cody: Start a New Chat Session"]')
     await expect(sidebar.getByText("Hello! I'm Cody. I can write code and answer questions for you.")).toBeVisible()
+
+    await sidebar.getByRole('textbox', { name: 'Text area' }).fill('Hello')
+    await sidebar.locator('vscode-button').getByRole('img').click()
+    await expect(sidebar.getByText('Hello')).toBeVisible()
+    await page.getByRole('button', { name: 'Cody: Chat History' }).click()
+    await sidebar.locator('vscode-button').filter({ hasText: 'Hello' }).click()
+    await page.getByRole('button', { name: 'Cody: Chat History' }).click()
+    await sidebar.locator('vscode-button').filter({ hasText: 'Hello' }).locator('i').click()
+    await expect(sidebar.getByText('Hello')).not.toBeVisible()
 })

client/cody/test/integration/helpers.ts

@@ -35,6 +35,7 @@ export async function beforeIntegrationTest(): Promise<void> {
 export async function afterIntegrationTest(): Promise<void> {
     await ensureExecuteCommand('cody.delete-access-token')
     await ensureExecuteCommand('cody.interactive.clear')
+    await ensureExecuteCommand('cody.clear-chat-history')
 }
 
 // executeCommand specifies ...any[] https://code.visualstudio.com/api/references/vscode-api#commands

client/cody/webviews/UserHistory.module.css

@@ -22,6 +22,7 @@
 
 .item-button {
     display: block;
+    position: relative;
     padding-top: .5rem;
     padding-bottom: .5rem;
 }
@@ -37,6 +38,17 @@
     margin-bottom: .25rem;
 }
 
+.item-delete {
+    position: absolute;
+    right: 0.25rem;
+    top: 0.5rem;
+    visibility: hidden;
+}
+
+.item-button:hover .item-delete {
+    visibility: visible;
+}
+
 .item-last-message {
     /* Show a few lines of text and then an ellipsis */
     display: -webkit-box;

client/cody/webviews/UserHistory.tsx

@@ -27,13 +27,25 @@ export const UserHistory: React.FunctionComponent<React.PropsWithChildren<Histor
     setView,
     vscodeAPI,
 }) => {
+    const onDeleteHistoryItemClick = useCallback(
+        (event: React.MouseEvent<HTMLElement, MouseEvent>, chatID: string) => {
+            event.stopPropagation()
+            if (userHistory) {
+                delete userHistory[chatID]
+                setUserHistory({ ...userHistory })
+                vscodeAPI.postMessage({ command: 'deleteHistory', chatID })
+            }
+        },
+        [userHistory, setUserHistory, vscodeAPI]
+    )
+
     const onRemoveHistoryClick = useCallback(() => {
         if (userHistory) {
             vscodeAPI.postMessage({ command: 'removeHistory' })
             setUserHistory(null)
             setInputHistory([])
         }
-    }, [setInputHistory, setUserHistory, userHistory, vscodeAPI])
+    }, [setInputHistory, userHistory, setUserHistory, vscodeAPI])
 
     function restoreMetadata(chatID: string): void {
         vscodeAPI.postMessage({ command: 'restoreHistory', chatID })
@@ -50,7 +62,7 @@ export const UserHistory: React.FunctionComponent<React.PropsWithChildren<Histor
                             className={styles.clearButton}
                             type="button"
                             onClick={onRemoveHistoryClick}
-                            disabled={userHistory === null}
+                            disabled={!userHistory || !Object.keys(userHistory).length}
                         >
                             Clear History
                         </VSCodeButton>
@@ -64,8 +76,7 @@ export const UserHistory: React.FunctionComponent<React.PropsWithChildren<Histor
                                     +new Date(b[1].lastInteractionTimestamp) - +new Date(a[1].lastInteractionTimestamp)
                             )
                             .map(chat => {
-                                const lastMessage =
-                                    chat[1].interactions[chat[1].interactions.length - 1].assistantMessage
+                                const lastMessage = chat[1].interactions[chat[1].interactions.length - 1].humanMessage
                                 if (!lastMessage?.displayText) {
                                     return null
                                 }
@@ -79,6 +90,17 @@ export const UserHistory: React.FunctionComponent<React.PropsWithChildren<Histor
                                     >
                                         <div className={styles.itemButtonInnerContainer}>
                                             <div className={styles.itemDate}>{new Date(chat[0]).toLocaleString()}</div>
+                                            <div className={styles.itemDelete}>
+                                                <VSCodeButton
+                                                    appearance="icon"
+                                                    type="button"
+                                                    onClick={event => {
+                                                        onDeleteHistoryItemClick(event, chat[0])
+                                                    }}
+                                                >
+                                                    <i className="codicon codicon-trash" />
+                                                </VSCodeButton>
+                                            </div>
                                             <div className={styles.itemLastMessage}>{lastMessage.displayText}</div>
                                         </div>
                                     </VSCodeButton>