feat(chat-client): implement export conversation flow (#944)

* Added Chat Export functionality to go from Chat Client to Language Server. Q Chat server is controlling the UX flow and contains business logic for export functionality. Using new protocol methods to implement Export feature flow feat: protocol extensions for chat tab actions and export features language-server-runtimes#433.
* Export feature is conditionally enabled by Q chat server if client signals support for initializationOptions?.aws?.awsClientCapabilities?.window?.showSaveFileDialog feature.
* Extension must implement aws/showSaveFileDialog protocol and set awsClientCapabilities?.window?.showSaveFileDialog flag to true.
* Update Sample VSCode extension with implementation of Show Save File dialog and added support.
* Updated Runtimes dependencies to latest version.

Author: viktorsaws

app/aws-lsp-codewhisperer-runtimes/package.json

@@ -13,7 +13,7 @@
         "test": "node scripts/test-runner.js"
     },
     "dependencies": {
-        "@aws/language-server-runtimes": "^0.2.56",
+        "@aws/language-server-runtimes": "^0.2.61",
         "@aws/lsp-codewhisperer": "*",
         "copyfiles": "^2.4.1",
         "cross-env": "^7.0.3",

chat-client/package.json

@@ -21,8 +21,8 @@
         "package": "webpack"
     },
     "dependencies": {
-        "@aws/chat-client-ui-types": "^0.1.13",
-        "@aws/language-server-runtimes-types": "^0.1.11",
+        "@aws/chat-client-ui-types": "^0.1.15",
+        "@aws/language-server-runtimes-types": "^0.1.13",
         "@aws/mynah-ui": "^4.30.1"
     },
     "devDependencies": {

chat-client/src/client/chat.test.ts

@@ -2,9 +2,10 @@ import { injectJSDOM } from '../test/jsDomInjector'
 // This needs to be run before all other imports so that mynah ui gets loaded inside of jsdom
 injectJSDOM()
 
-import { ERROR_MESSAGE, GENERIC_COMMAND, SEND_TO_PROMPT } from '@aws/chat-client-ui-types'
+import { CHAT_OPTIONS, ERROR_MESSAGE, GENERIC_COMMAND, SEND_TO_PROMPT } from '@aws/chat-client-ui-types'
 import {
     CHAT_REQUEST_METHOD,
+    GET_SERIALIZED_CHAT_REQUEST_METHOD,
     OPEN_TAB_REQUEST_METHOD,
     READY_NOTIFICATION_METHOD,
     TAB_ADD_NOTIFICATION_METHOD,
@@ -41,6 +42,8 @@ describe('Chat', () => {
 
     beforeEach(() => {
         sandbox.stub(TabFactory, 'generateUniqueId').returns(initialTabId)
+        sandbox.stub(TabFactory.prototype, 'enableHistory')
+        sandbox.stub(TabFactory.prototype, 'enableExport')
 
         clientApi = {
             postMessage: sandbox.stub(),
@@ -296,6 +299,69 @@ describe('Chat', () => {
         assert.notCalled(updateStoreStub)
     })
 
+    describe('chatOptions', () => {
+        it('enables history and export features support', () => {
+            const chatOptionsRequest = createInboundEvent({
+                command: CHAT_OPTIONS,
+                params: {
+                    history: true,
+                    export: true,
+                },
+            })
+            window.dispatchEvent(chatOptionsRequest)
+
+            // @ts-ignore
+            assert.called(TabFactory.prototype.enableHistory)
+            // @ts-ignore
+            assert.called(TabFactory.prototype.enableExport)
+        })
+
+        it('does not enable history and export features support if flags are falsy', () => {
+            const chatOptionsRequest = createInboundEvent({
+                command: CHAT_OPTIONS,
+                params: {
+                    history: false,
+                    export: false,
+                },
+            })
+            window.dispatchEvent(chatOptionsRequest)
+
+            // @ts-ignore
+            assert.notCalled(TabFactory.prototype.enableHistory)
+            // @ts-ignore
+            assert.notCalled(TabFactory.prototype.enableExport)
+        })
+    })
+
+    describe('onGetSerializedChat', () => {
+        it('getSerializedChat requestId was propagated from inbound to outbound message', () => {
+            const requestId = 'request-1234'
+            const tabId = mynahUi.updateStore('', {})
+
+            const setSerializedChatEvent = createInboundEvent({
+                command: GET_SERIALIZED_CHAT_REQUEST_METHOD,
+                params: {
+                    tabId: tabId,
+                    format: 'markdown',
+                },
+                requestId: requestId,
+            })
+            window.dispatchEvent(setSerializedChatEvent)
+
+            // Verify that postMessage was called with the correct requestId
+            assert.calledWithExactly(clientApi.postMessage, {
+                requestId,
+                command: GET_SERIALIZED_CHAT_REQUEST_METHOD,
+                params: {
+                    success: true,
+                    result: sinon.match({
+                        content: sinon.match.string,
+                    }),
+                },
+            })
+        })
+    })
+
     function createInboundEvent(params: any) {
         const event = new CustomEvent('message') as any
         event.data = params

chat-client/src/client/chat.ts

@@ -45,6 +45,9 @@ import {
     FeedbackParams,
     FileClickParams,
     FollowUpClickParams,
+    GET_SERIALIZED_CHAT_REQUEST_METHOD,
+    GetSerializedChatParams,
+    GetSerializedChatResult,
     INFO_LINK_CLICK_NOTIFICATION_METHOD,
     InfoLinkClickParams,
     LINK_CLICK_NOTIFICATION_METHOD,
@@ -61,9 +64,11 @@ import {
     SOURCE_LINK_CLICK_NOTIFICATION_METHOD,
     SourceLinkClickParams,
     TAB_ADD_NOTIFICATION_METHOD,
+    TAB_BAR_ACTION_REQUEST_METHOD,
     TAB_CHANGE_NOTIFICATION_METHOD,
     TAB_REMOVE_NOTIFICATION_METHOD,
     TabAddParams,
+    TabBarActionParams,
     TabChangeParams,
     TabRemoveParams,
 } from '@aws/language-server-runtimes-types'
@@ -146,6 +151,8 @@ export const createChat = (
             case CONVERSATION_CLICK_REQUEST_METHOD:
                 mynahApi.conversationClicked(message.params as ConversationClickResult)
                 break
+            case GET_SERIALIZED_CHAT_REQUEST_METHOD:
+                mynahApi.getSerializedChat(message.requestId, message.params as GetSerializedChatParams)
             case CHAT_OPTIONS: {
                 const params = (message as ChatOptionsMessage).params
                 if (params?.quickActions?.quickActionsCommandGroups) {
@@ -158,10 +165,15 @@ export const createChat = (
                     }))
                     tabFactory.updateQuickActionCommands(quickActionCommandGroups)
                 }
+
                 if (params?.history) {
                     tabFactory.enableHistory()
                 }
 
+                if (params?.export) {
+                    tabFactory.enableExport()
+                }
+
                 const allExistingTabs: MynahUITabStoreModel = mynahUi.getAllTabs()
                 for (const tabId in allExistingTabs) {
                     mynahUi.updateStore(tabId, tabFactory.getDefaultTabData())
@@ -260,6 +272,30 @@ export const createChat = (
         conversationClick: (params: ConversationClickParams) => {
             sendMessageToClient({ command: CONVERSATION_CLICK_REQUEST_METHOD, params })
         },
+        tabBarAction: (params: TabBarActionParams) => {
+            sendMessageToClient({ command: TAB_BAR_ACTION_REQUEST_METHOD, params })
+        },
+        onGetSerializedChat: (requestId: string, params: GetSerializedChatResult | ErrorResult) => {
+            if ('content' in params) {
+                sendMessageToClient({
+                    requestId: requestId,
+                    command: GET_SERIALIZED_CHAT_REQUEST_METHOD,
+                    params: {
+                        success: true,
+                        result: params as GetSerializedChatResult,
+                    },
+                })
+            } else {
+                sendMessageToClient({
+                    requestId: requestId,
+                    command: GET_SERIALIZED_CHAT_REQUEST_METHOD,
+                    params: {
+                        success: false,
+                        error: params as ErrorResult,
+                    },
+                })
+            }
+        },
     }
 
     const messager = new Messager(chatApi)

chat-client/src/client/messager.ts

@@ -29,13 +29,15 @@ import {
     FileClickParams,
     FilterValue,
     FollowUpClickParams,
+    GetSerializedChatResult,
     InfoLinkClickParams,
     LinkClickParams,
     ListConversationsParams,
     OpenTabResult,
     QuickActionParams,
     SourceLinkClickParams,
     TabAddParams,
+    TabBarActionParams,
     TabChangeParams,
     TabRemoveParams,
 } from '@aws/language-server-runtimes-types'
@@ -83,6 +85,8 @@ export interface OutboundChatApi {
     fileClick(params: FileClickParams): void
     listConversations(params: ListConversationsParams): void
     conversationClick(params: ConversationClickParams): void
+    tabBarAction(params: TabBarActionParams): void
+    onGetSerializedChat(requestId: string, result: GetSerializedChatResult | ErrorResult): void
 }
 
 export class Messager {
@@ -197,4 +201,12 @@ export class Messager {
     onConversationClick = (conversationId: string, action?: ConversationAction): void => {
         this.chatApi.conversationClick({ id: conversationId, action })
     }
+
+    onTabBarAction = (params: TabBarActionParams): void => {
+        this.chatApi.tabBarAction(params)
+    }
+
+    onGetSerializedChat = (requestId: string, result: GetSerializedChatResult | ErrorResult): void => {
+        this.chatApi.onGetSerializedChat(requestId, result)
+    }
 }

chat-client/src/client/mynahUi.test.ts

@@ -4,9 +4,10 @@ import { assert } from 'sinon'
 import { createMynahUi, InboundChatApi, handleChatPrompt, DEFAULT_HELP_PROMPT } from './mynahUi'
 import { Messager, OutboundChatApi } from './messager'
 import { TabFactory } from './tabs/tabFactory'
-import { ChatItemType, MynahUI } from '@aws/mynah-ui'
+import { ChatItemType, MynahUI, NotificationType } from '@aws/mynah-ui'
 import { ChatClientAdapter } from '../contracts/chatClientAdapter'
 import { ChatMessage } from '@aws/language-server-runtimes-types'
+import { ChatHistory } from './features/history'
 
 describe('MynahUI', () => {
     let messager: Messager
@@ -23,6 +24,8 @@ describe('MynahUI', () => {
     let onQuickActionSpy: sinon.SinonSpy
     let onOpenTabSpy: sinon.SinonSpy
     let selectTabSpy: sinon.SinonSpy
+    let serializeChatStub: sinon.SinonStub
+    let notifySpy: sinon.SinonSpy
     const requestId = '1234'
 
     beforeEach(() => {
@@ -48,6 +51,8 @@ describe('MynahUI', () => {
             fileClick: sinon.stub(),
             listConversations: sinon.stub(),
             conversationClick: sinon.stub(),
+            tabBarAction: sinon.stub(),
+            onGetSerializedChat: sinon.stub(),
         }
 
         messager = new Messager(outboundChatApi)
@@ -66,6 +71,8 @@ describe('MynahUI', () => {
         updateStoreSpy = sinon.spy(mynahUi, 'updateStore')
         addChatItemSpy = sinon.spy(mynahUi, 'addChatItem')
         selectTabSpy = sinon.spy(mynahUi, 'selectTab')
+        serializeChatStub = sinon.stub(mynahUi, 'serializeChat')
+        notifySpy = sinon.spy(mynahUi, 'notify')
     })
 
     afterEach(() => {
@@ -120,7 +127,7 @@ describe('MynahUI', () => {
     })
 
     describe('openTab', () => {
-        it('should create a new tab  with welcome messages if tabId not passed and previous messages not passed', () => {
+        it('should create a new tab with welcome messages if tabId not passed and previous messages not passed', () => {
             createTabStub.resetHistory()
 
             inboundChatApi.openTab(requestId, {})
@@ -275,8 +282,31 @@ describe('MynahUI', () => {
         })
     })
 
+    describe('onTabBarButtonClick', () => {
+        it('should list conversations when Chat History button is clicked', () => {
+            const listConversationsSpy = sinon.spy(messager, 'onListConversations')
+
+            // @ts-ignore
+            mynahUi.props.onTabBarButtonClick('tab-123', ChatHistory.TabBarButtonId)
+
+            sinon.assert.calledOnce(listConversationsSpy)
+        })
+
+        it('should export conversation when Export button is clicked', () => {
+            const listConversationsSpy = sinon.spy(messager, 'onTabBarAction')
+
+            // @ts-ignore
+            mynahUi.props.onTabBarButtonClick('tab-123', 'export')
+
+            sinon.assert.calledOnceWithExactly(listConversationsSpy, {
+                tabId: 'tab-123',
+                action: 'export',
+            })
+        })
+    })
+
     describe('conversationClicked result', () => {
-        it('should list conversarions if successfully deleted conversation', () => {
+        it('should list conversations if successfully deleted conversation', () => {
             const listConversationsSpy = sinon.spy(messager, 'onListConversations')
 
             // Successful conversation deletion
@@ -301,6 +331,40 @@ describe('MynahUI', () => {
             sinon.assert.neverCalledWith(listConversationsSpy)
         })
     })
+
+    describe('getSerializedChat', () => {
+        it('should return serialized chat content for supported formats', () => {
+            const onGetSerializedChatSpy = sinon.spy(messager, 'onGetSerializedChat')
+            serializeChatStub.returns('Test Serialized Chat')
+
+            inboundChatApi.getSerializedChat(requestId, {
+                format: 'markdown',
+                tabId: 'tab-1',
+            })
+
+            sinon.assert.calledWith(onGetSerializedChatSpy, requestId, { content: 'Test Serialized Chat' })
+        })
+
+        it('should show an error if requested format is not supported', () => {
+            const onGetSerializedChatSpy = sinon.spy(messager, 'onGetSerializedChat')
+            serializeChatStub.returns('Test Serialized Chat')
+
+            inboundChatApi.getSerializedChat(requestId, {
+                // @ts-ignore
+                format: 'unsupported-format',
+                tabId: 'tab-1',
+            })
+
+            sinon.assert.calledWith(onGetSerializedChatSpy, requestId, {
+                type: 'InvalidRequest',
+                message: 'Failed to get serialized chat content, unsupported-format is not supported',
+            })
+            sinon.assert.calledWith(notifySpy, {
+                content: `Failed to export chat`,
+                type: NotificationType.ERROR,
+            })
+        })
+    })
 })
 
 describe('withAdapter', () => {