diff --git a/packages/instantsearch.js/src/connectors/chat/__tests__/connectChat-test.ts b/packages/instantsearch.js/src/connectors/chat/__tests__/connectChat-test.ts index c6664be037..97ce79da3c 100644 --- a/packages/instantsearch.js/src/connectors/chat/__tests__/connectChat-test.ts +++ b/packages/instantsearch.js/src/connectors/chat/__tests__/connectChat-test.ts @@ -183,6 +183,47 @@ describe('connectChat', () => { }), }); }); + + it('uses custom `type` as key in getRenderState', () => { + const render = jest.fn(); + const makeWidget = connectChat(render); + const widget = makeWidget({ type: 'customChat', agentId: 'agentId' }); + + const helper = algoliasearchHelper(createSearchClient(), ''); + + const instantSearchInstance: Pick< + InstantSearch, + 'client' | 'getUiState' + > = { + client: createSearchClient(), + getUiState: () => ({ indexName: {} }), + }; + const parent: Pick = { + getIndexId: () => 'indexName', + setIndexUiState: () => {}, + }; + + const result = widget.getRenderState( + { + // @ts-expect-error + searchBox: {}, + }, + createInitOptions({ + helper, + state: helper.state, + instantSearchInstance: instantSearchInstance as InstantSearch, + parent: parent as IndexWidget, + }) + ); + + expect(result).toHaveProperty('customChat'); + // @ts-expect-error access dynamic key + expect(result.customChat).toEqual( + expect.objectContaining({ + widgetParams: expect.objectContaining({ type: 'customChat' }), + }) + ); + }); }); it('renders during init and render', () => { diff --git a/packages/instantsearch.js/src/connectors/chat/connectChat.ts b/packages/instantsearch.js/src/connectors/chat/connectChat.ts index a895454cb3..89875f0e47 100644 --- a/packages/instantsearch.js/src/connectors/chat/connectChat.ts +++ b/packages/instantsearch.js/src/connectors/chat/connectChat.ts @@ -117,12 +117,18 @@ export type ChatConnectorParams = ( * Configuration for client-side tools. */ tools?: Record>; + /** + * Identifier of this type of chat widget. This is used for the key in renderState. + * @default 'chat' + */ + type?: string; }; export type ChatWidgetDescription = { $$type: 'ais.chat'; renderState: ChatRenderState; indexRenderState: { + // In IndexRenderState, the key is always 'chat', but in the widgetParams you can customize it with the `type` parameter chat: WidgetRenderState< ChatRenderState, ChatConnectorParams @@ -146,7 +152,12 @@ export default (function connectChat( ) => { warning(false, 'Chat is not yet stable and will change in the future.'); - const { resume = false, tools = {}, ...options } = widgetParams || {}; + const { + resume = false, + tools = {}, + type = 'chat', + ...options + } = widgetParams || {}; let _chatInstance: Chat; let input = ''; @@ -320,7 +331,8 @@ export default (function connectChat( ): IndexRenderState & ChatWidgetDescription['indexRenderState'] { return { ...renderState, - chat: this.getWidgetRenderState(renderOptions), + // Type is casted to 'chat' here, because in the IndexRenderState the key is always 'chat' + [type as 'chat']: this.getWidgetRenderState(renderOptions), }; },