feat(chat-client): history list and conversation actions (#929)

* feat(chat-client): history list and conversation actions

* chore: support conversation click in test vscode client

* chore: remove tabId from open detailed list params

* chore: removed ts-ignore

* fix: removed tabId from controller

* chore: fix prettier

* chore: removed code used for manual testing

* chore: apply formatting

* chore: remove noon handlers

Author: volodkevych

chat-client/.prettierignore

@@ -4,4 +4,5 @@ node_modules/
 out/
 build/
 **/bin/
-**/obj/
+**/obj/
+CHANGELOG.md

chat-client/src/client/chat.ts

@@ -32,9 +32,12 @@ import {
 import {
     CHAT_REQUEST_METHOD,
     CONTEXT_COMMAND_NOTIFICATION_METHOD,
+    CONVERSATION_CLICK_REQUEST_METHOD,
     CREATE_PROMPT_NOTIFICATION_METHOD,
     ChatParams,
     ContextCommandParams,
+    ConversationClickParams,
+    ConversationClickResult,
     CreatePromptParams,
     FEEDBACK_NOTIFICATION_METHOD,
     FILE_CLICK_NOTIFICATION_METHOD,
@@ -45,7 +48,10 @@ import {
     INFO_LINK_CLICK_NOTIFICATION_METHOD,
     InfoLinkClickParams,
     LINK_CLICK_NOTIFICATION_METHOD,
+    LIST_CONVERSATIONS_REQUEST_METHOD,
     LinkClickParams,
+    ListConversationsParams,
+    ListConversationsResult,
     OPEN_TAB_REQUEST_METHOD,
     OpenTabParams,
     OpenTabResult,
@@ -134,6 +140,12 @@ export const createChat = (
             case CONTEXT_COMMAND_NOTIFICATION_METHOD:
                 mynahApi.sendContextCommands(message.params as ContextCommandParams)
                 break
+            case LIST_CONVERSATIONS_REQUEST_METHOD:
+                mynahApi.listConversations(message.params as ListConversationsResult)
+                break
+            case CONVERSATION_CLICK_REQUEST_METHOD:
+                mynahApi.conversationClicked(message.params as ConversationClickResult)
+                break
             case CHAT_OPTIONS: {
                 const params = (message as ChatOptionsMessage).params
                 if (params?.quickActions?.quickActionsCommandGroups) {
@@ -237,6 +249,12 @@ export const createChat = (
         fileClick: (params: FileClickParams) => {
             sendMessageToClient({ command: FILE_CLICK_NOTIFICATION_METHOD, params: params })
         },
+        listConversations: (params: ListConversationsParams) => {
+            sendMessageToClient({ command: LIST_CONVERSATIONS_REQUEST_METHOD, params })
+        },
+        conversationClick: (params: ConversationClickParams) => {
+            sendMessageToClient({ command: CONVERSATION_CLICK_REQUEST_METHOD, params })
+        },
     }
 
     const messager = new Messager(chatApi)

chat-client/src/client/features/history.ts

@@ -0,0 +1,123 @@
+import { ConversationAction, ConversationItemGroup, ListConversationsResult } from '@aws/language-server-runtimes-types'
+import { ChatItemButton, DetailedList, DetailedListItem, MynahUI, TextBasedFormItem } from '@aws/mynah-ui'
+import { toMynahIcon } from '../utils'
+import { Messager } from '../messager'
+
+export const ChatHistory = {
+    TabBarButtonId: 'history_sheet',
+} as const
+
+interface MynahDetailedList {
+    update: (data: DetailedList) => void
+    close: () => void
+    changeTarget: (direction: 'up' | 'down', snapOnLastAndFirst?: boolean) => void
+    getTargetElementId: () => string | undefined
+}
+
+export class ChatHistoryList {
+    historyDetailedList: MynahDetailedList | undefined
+
+    constructor(
+        private mynahUi: MynahUI,
+        private messager: Messager
+    ) {}
+
+    show(params: ListConversationsResult) {
+        const detailedList = {
+            header: params.header,
+            filterOptions: params.filterOptions?.map(filter => ({
+                ...filter,
+                icon: toMynahIcon(filter.icon),
+            })),
+            list: this.toConversationGroups(params.list),
+        }
+        // set auto focus on the 1st filter option item
+        if (detailedList.filterOptions && detailedList.filterOptions.length > 0) {
+            // we currently support only text-based items
+            ;(detailedList.filterOptions[0] as TextBasedFormItem).autoFocus = true
+        }
+
+        if (this.historyDetailedList) {
+            this.historyDetailedList.update(detailedList)
+        } else {
+            this.historyDetailedList = this.mynahUi.openDetailedList({
+                tabId: '', // TODO: remove after MynahUI is changed to remove the property
+                detailedList: detailedList,
+                events: {
+                    onFilterValueChange: this.onFilterValueChange,
+                    onKeyPress: this.onKeyPress,
+                    onItemSelect: this.onItemSelect,
+                    onActionClick: this.onActionClick,
+                    onClose: this.onClose,
+                },
+            })
+        }
+    }
+
+    close() {
+        this.historyDetailedList?.close()
+    }
+
+    private onFilterValueChange = (filterValues: Record<string, any>) => {
+        this.messager.onListConversations(filterValues)
+    }
+
+    private onItemSelect = (item: DetailedListItem) => {
+        if (!item.id) {
+            throw new Error('Conversation id is not defined')
+        }
+        this.messager.onConversationClick(item.id)
+    }
+
+    private onActionClick = (action: ChatItemButton) => {
+        const conversationAction = this.getConversationAction(action.text)
+        this.messager.onConversationClick(action.id, conversationAction)
+    }
+
+    private onClose = () => {
+        this.historyDetailedList = undefined
+    }
+
+    private onKeyPress = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+            this.close()
+        } else if (e.key === 'Enter') {
+            const targetElementId = this.historyDetailedList?.getTargetElementId()
+            if (targetElementId) {
+                this.onItemSelect({
+                    id: targetElementId,
+                })
+            }
+        } else if (e.key === 'ArrowUp') {
+            this.historyDetailedList?.changeTarget('up')
+        } else if (e.key === 'ArrowDown') {
+            this.historyDetailedList?.changeTarget('down')
+        }
+    }
+
+    private toConversationGroups = (groups: ConversationItemGroup[]) => {
+        return groups.map(group => ({
+            groupName: group.groupName,
+            icon: toMynahIcon(group.icon),
+            children: group.items?.map(item => ({
+                ...item,
+                icon: toMynahIcon(item.icon),
+                actions: item.actions?.map(action => ({
+                    ...action,
+                    icon: toMynahIcon(action.icon),
+                })),
+            })),
+        }))
+    }
+
+    private getConversationAction = (actionText: string | undefined): ConversationAction => {
+        switch (actionText) {
+            case 'Export':
+                return 'export'
+            case 'Delete':
+                return 'delete'
+            default:
+                throw new Error(`Unsupported action: ${actionText}`)
+        }
+    }
+}

chat-client/src/client/messager.ts

@@ -22,12 +22,16 @@ import {
 } from '@aws/chat-client-ui-types'
 import {
     ChatParams,
+    ConversationAction,
+    ConversationClickParams,
     CreatePromptParams,
     FeedbackParams,
     FileClickParams,
+    FilterValue,
     FollowUpClickParams,
     InfoLinkClickParams,
     LinkClickParams,
+    ListConversationsParams,
     OpenTabResult,
     QuickActionParams,
     SourceLinkClickParams,
@@ -78,6 +82,8 @@ export interface OutboundChatApi {
     onOpenTab(result: OpenTabResult | ErrorResult): void
     createPrompt(params: CreatePromptParams): void
     fileClick(params: FileClickParams): void
+    listConversations(params: ListConversationsParams): void
+    conversationClick(params: ConversationClickParams): void
 }
 
 export class Messager {
@@ -185,4 +191,12 @@ export class Messager {
         this.chatApi.telemetry({ ...params, name: FILE_CLICK_TELEMETRY_EVENT })
         this.chatApi.fileClick(params)
     }
+
+    onListConversations = (filter?: Record<string, FilterValue>): void => {
+        this.chatApi.listConversations({ filter })
+    }
+
+    onConversationClick = (conversationId: string, action?: ConversationAction): void => {
+        this.chatApi.conversationClick({ id: conversationId, action })
+    }
 }

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

@@ -4,9 +4,8 @@ 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, MynahUIProps } from '@aws/mynah-ui'
-import { ChatEventHandler, ChatClientAdapter } from '../contracts/chatClientAdapter'
-import { withAdapter } from './withAdapter'
+import { ChatItemType, MynahUI } from '@aws/mynah-ui'
+import { ChatClientAdapter } from '../contracts/chatClientAdapter'
 
 describe('MynahUI', () => {
     let messager: Messager
@@ -45,6 +44,8 @@ describe('MynahUI', () => {
             onOpenTab: sinon.stub(),
             createPrompt: sinon.stub(),
             fileClick: sinon.stub(),
+            listConversations: sinon.stub(),
+            conversationClick: sinon.stub(),
         }
 
         messager = new Messager(outboundChatApi)

chat-client/src/client/mynahUi.ts

@@ -16,10 +16,12 @@ import {
     ChatResult,
     ContextCommand,
     ContextCommandParams,
+    ConversationClickResult,
     FeedbackParams,
     FollowUpClickParams,
     InfoLinkClickParams,
     LinkClickParams,
+    ListConversationsResult,
     OpenTabParams,
     SourceLinkClickParams,
 } from '@aws/language-server-runtimes-types'
@@ -32,6 +34,7 @@ import {
     NotificationType,
     MynahUIProps,
     QuickActionCommand,
+    MynahIcons,
 } from '@aws/mynah-ui'
 import { VoteParams } from '../contracts/telemetry'
 import { Messager } from './messager'
@@ -40,6 +43,7 @@ import { disclaimerAcknowledgeButtonId, disclaimerCard } from './texts/disclaime
 import { ChatClientAdapter, ChatEventHandler } from '../contracts/chatClientAdapter'
 import { withAdapter } from './withAdapter'
 import { toMynahIcon } from './utils'
+import { ChatHistory, ChatHistoryList } from './features/history'
 
 export interface InboundChatApi {
     addChatResponse(params: ChatResult, tabId: string, isPartialResult: boolean): void
@@ -48,6 +52,8 @@ export interface InboundChatApi {
     showError(params: ErrorParams): void
     openTab(params: OpenTabParams): void
     sendContextCommands(params: ContextCommandParams): void
+    listConversations(params: ListConversationsResult): void
+    conversationClicked(params: ConversationClickResult): void
 }
 
 type ContextCommandGroups = MynahUIDataModel['contextCommands']
@@ -328,6 +334,13 @@ export const createMynahUi = (
             }
             return false
         },
+        onTabBarButtonClick: (tabId: string, buttonId: string) => {
+            if (buttonId === ChatHistory.TabBarButtonId) {
+                messager.onListConversations()
+                return
+            }
+            throw new Error(`Unhandled tab bar button id: ${buttonId}`)
+        },
     }
 
     const mynahUiProps: MynahUIProps = {
@@ -343,6 +356,14 @@ export const createMynahUi = (
         config: {
             maxTabs: 10,
             texts: uiComponentsTexts,
+            // TODO: load dynamically from ChatOptions
+            tabBarButtons: [
+                {
+                    id: ChatHistory.TabBarButtonId,
+                    icon: MynahIcons.COMMENT,
+                    description: 'View chat history',
+                },
+            ],
         },
     }
 
@@ -562,13 +583,37 @@ ${params.message}`,
         })
     }
 
+    let chatHistoryList = new ChatHistoryList(mynahUi, messager)
+    const listConversations = (params: ListConversationsResult) => {
+        chatHistoryList.show(params)
+    }
+
+    const conversationClicked = (params: ConversationClickResult) => {
+        if (!params.success) {
+            // TODO: any logging, error for this?
+            return
+        }
+
+        // close history list if conversation item was successfully opened
+        if (!params.action) {
+            chatHistoryList.close()
+            return
+        }
+        // request update conversations list if conversation item was successfully deleted
+        if (params.action === 'delete') {
+            messager.onListConversations()
+        }
+    }
+
     const api = {
         addChatResponse: addChatResponse,
         sendToPrompt: sendToPrompt,
         sendGenericCommand: sendGenericCommand,
         showError: showError,
         openTab: openTab,
         sendContextCommands: sendContextCommands,
+        listConversations: listConversations,
+        conversationClicked: conversationClicked,
     }
 
     return [mynahUi, api]

chat-client/src/contracts/serverContracts.ts

@@ -25,6 +25,10 @@ import {
     CREATE_PROMPT_NOTIFICATION_METHOD,
     FileClickParams,
     FILE_CLICK_NOTIFICATION_METHOD,
+    LIST_CONVERSATIONS_REQUEST_METHOD,
+    ListConversationsParams,
+    CONVERSATION_CLICK_REQUEST_METHOD,
+    ConversationClickParams,
 } from '@aws/language-server-runtimes-types'
 
 export const TELEMETRY = 'telemetry/event'
@@ -45,6 +49,8 @@ export type ServerMessageCommand =
     | typeof OPEN_TAB_REQUEST_METHOD
     | typeof CREATE_PROMPT_NOTIFICATION_METHOD
     | typeof FILE_CLICK_NOTIFICATION_METHOD
+    | typeof LIST_CONVERSATIONS_REQUEST_METHOD
+    | typeof CONVERSATION_CLICK_REQUEST_METHOD
 
 export interface Message {
     command: ServerMessageCommand
@@ -73,3 +79,5 @@ export type ServerMessageParams =
     | OpenTabResult
     | CreatePromptParams
     | FileClickParams
+    | ListConversationsParams
+    | ConversationClickParams