refactor(webviews): chat history tab with pagination

vscode/src/chat/chat-view/ChatHistoryManager.ts

@@ -46,10 +46,13 @@ class ChatHistoryManager implements vscode.Disposable {
         authStatus: AuthenticatedAuthStatus,
         chat: SerializedChatTranscript
     ): Promise<void> {
-        const history = localStorage.getChatHistory(authStatus)
-        history.chat[chat.id] = chat
-        await localStorage.setChatHistory(authStatus, history)
-        this.changeNotifications.next()
+        // Don't save empty chats
+        if (chat.interactions.length > 0) {
+            const history = localStorage.getChatHistory(authStatus)
+            history.chat[chat.id] = chat
+            await localStorage.setChatHistory(authStatus, history)
+            this.changeNotifications.next()
+        }
     }
 
     public async importChatHistory(

vscode/test/e2e/chat-history.test.ts

@@ -14,7 +14,7 @@ test.extend<ExpectedV2Events>({
         'cody.chat-question:executed',
         'cody.chatResponse:noCode',
     ],
-})('restore chat from sidebar history view', async ({ page, sidebar }) => {
+})('restore and delete chat from sidebar history view', async ({ page, sidebar }) => {
     await sidebarSignin(page, sidebar)
 
     const sidebarChat = getChatSidebarPanel(page)
@@ -30,45 +30,18 @@ test.extend<ExpectedV2Events>({
 
     await sidebarTabHistoryButton.click()
 
-    const newHistoryItem = sidebarChat.getByRole('button', { name: 'Hey' })
-    await expect(newHistoryItem).toBeVisible()
-    await newHistoryItem.click()
-})
-
-test.extend<ExpectedV2Events>({
-    // list of events we expect this test to log, add to this list as needed
-    expectedV2Events: [
-        'cody.extension:installed',
-        'cody.auth.login:clicked',
-        'cody.auth.login:firstEver',
-        'cody.auth.login.token:clicked',
-        'cody.auth:connected',
-        'cody.chat-question:submitted',
-        'cody.chat-question:executed',
-        'cody.chatResponse:noCode',
-    ],
-})('delete chat from sidebar history view', async ({ page, sidebar }) => {
-    await sidebarSignin(page, sidebar)
-
-    const sidebarChat = getChatSidebarPanel(page)
-
-    const sidebarTabHistoryButton = sidebarChat.getByTestId('tab-history')
-
-    // Ensure the chat view is ready before we start typing
-    await expect(sidebarTabHistoryButton).toBeVisible()
+    await expect(sidebarChat.getByRole('button', { name: 'Export' })).toBeVisible()
+    await expect(sidebarChat.getByRole('button', { name: 'Delete all' })).toBeVisible()
+    await sidebarChat.getByRole('button', { name: 'Delete all' }).click()
+    await expect(sidebarChat.getByRole('button', { name: 'Delete all chats' })).toBeVisible()
+    await sidebarChat.getByRole('button', { name: 'Cancel' }).click()
+    await expect(sidebarChat.getByRole('button', { name: 'Delete all chats' })).not.toBeVisible()
 
-    const chatInput = getChatInputs(sidebarChat).first()
-    await chatInput.fill('Hey')
-    await chatInput.press('Enter')
-
-    await sidebarTabHistoryButton.click()
-
-    const newHistoryItem = sidebarChat.getByRole('button', { name: 'Hey' })
+    const newHistoryItem = sidebarChat.getByRole('option', { name: 'Hey' })
     await expect(newHistoryItem).toBeVisible()
-
-    const deleteButton = sidebarChat.getByRole('button', { name: 'Delete chat' })
-    await expect(deleteButton).toBeVisible()
+    const deleteButton = sidebarChat.getByLabel('delete-history-button')
     await deleteButton.click()
 
     await expect(newHistoryItem).not.toBeVisible()
+    await expect(sidebarChat.getByText('You have no chat history')).toBeVisible()
 })

vscode/webviews/App.story.tsx

@@ -19,7 +19,7 @@ export const Simple: StoryObj<typeof meta> = {
     render: () => <App vscodeAPI={dummyVSCodeAPI} />,
 }
 
-const dummyVSCodeAPI: VSCodeWrapper = {
+export const dummyVSCodeAPI: VSCodeWrapper = {
     onMessage: cb => {
         // Send initial message so that the component is fully rendered.
         cb({

vscode/webviews/tabs/HistoryTab.module.css

@@ -1,28 +1,8 @@
-
-h4{
+h4 {
     border-bottom: 1px solid var(--vscode-editorWidget-border);
 }
 
 .history-row {
     display: flex;
     flex-direction: row;
 }
-
-.history-item {
-    cursor: pointer;;
-}
-
-.history-item:hover {
-    cursor: pointer;
-    color: var(--vscode-list-highlightForeground);
-}
-
-.history-delete-btn {
-    opacity: 0;
-    transition: opacity 0.2s ease;
-}
-
-.history-row:hover .history-delete-btn {
-    opacity: 1;
-}
-

vscode/webviews/tabs/HistoryTab.story.tsx

@@ -1,5 +1,6 @@
-import { CodyIDE } from '@sourcegraph/cody-shared'
+import type { UserLocalHistory } from '@sourcegraph/cody-shared'
 import type { Meta, StoryObj } from '@storybook/react'
+import { dummyVSCodeAPI } from '../App.story'
 import { VSCodeStandaloneComponent } from '../storybook/VSCodeStoryDecorator'
 import { HistoryTabWithData } from './HistoryTab'
 
@@ -20,8 +21,7 @@ type Story = StoryObj<typeof HistoryTabWithData>
 
 export const Empty: Story = {
     args: {
-        IDE: CodyIDE.VSCode,
-        setView: () => {},
+        vscodeAPI: dummyVSCodeAPI,
         chats: [],
     },
 }
@@ -37,7 +37,7 @@ export const SingleDay: Story = {
                         assistantMessage: { speaker: 'assistant', text: 'Hello' },
                     },
                 ],
-                lastInteractionTimestamp: new Date().toISOString(),
+                lastInteractionTimestamp: new Date(Date.now() - 86400000).toISOString(),
             },
         ],
     },
@@ -69,3 +69,41 @@ export const MultiDay: Story = {
         ],
     },
 }
+
+export const Paginated: Story = {
+    args: {
+        chats: getMockedChatData(50),
+    },
+}
+
+function getMockedChatData(items: number): UserLocalHistory['chat'][string][] {
+    const mockedChatData: UserLocalHistory['chat'][string][] = []
+
+    for (let i = 3; i <= items; i++) {
+        const numInteractions = Math.floor(Math.random() * 3) + 1 // 1-3 interactions
+        const interactions = []
+        const lastTimestamp = Date.now() - Math.floor(Math.random() * 7) * 86400000 // Randomly within the last 7 days
+
+        for (let j = 0; j < numInteractions; j++) {
+            const humanMessageText = `Question about topic ${i}-${j + 1}`
+            interactions.push({
+                humanMessage: {
+                    speaker: 'human' as const,
+                    text: humanMessageText,
+                },
+                assistantMessage: {
+                    speaker: 'assistant' as const,
+                    text: `Answer to question ${i}-${j + 1}`,
+                },
+            })
+        }
+
+        mockedChatData.push({
+            id: String(i),
+            interactions: interactions,
+            lastInteractionTimestamp: new Date(lastTimestamp).toISOString(),
+        })
+    }
+
+    return mockedChatData
+}

vscode/webviews/tabs/HistoryTab.test.tsx

@@ -1,20 +1,27 @@
-import { CodyIDE } from '@sourcegraph/cody-shared'
 import { render, screen } from '@testing-library/react'
 import { describe, expect, test, vi } from 'vitest'
+import { dummyVSCodeAPI } from '../App.story'
 import { AppWrapperForTest } from '../AppWrapperForTest'
 import { HistoryTabWithData } from './HistoryTab'
 
 describe('HistoryTabWithData', () => {
     test('renders empty state when there are no non-empty chats', () => {
-        const mockSetView = vi.fn()
+        const handleStartNewChat = vi.fn()
         const emptyChats = [
             { id: '1', interactions: [], lastInteractionTimestamp: new Date().toISOString() },
             { id: '2', interactions: [], lastInteractionTimestamp: new Date().toISOString() },
         ]
 
-        render(<HistoryTabWithData IDE={CodyIDE.VSCode} setView={mockSetView} chats={emptyChats} />, {
-            wrapper: AppWrapperForTest,
-        })
+        render(
+            <HistoryTabWithData
+                vscodeAPI={dummyVSCodeAPI}
+                handleStartNewChat={handleStartNewChat}
+                chats={emptyChats}
+            />,
+            {
+                wrapper: AppWrapperForTest,
+            }
+        )
 
         expect(screen.getByText('You have no chat history')).toBeInTheDocument()
         expect(screen.getByText('Start a new chat')).toBeInTheDocument()