feat (api): Adds ability for click insights events to be triggered (#1916)

* Adds ability for click insights events to be triggered

* Bump bundlesize

* Cleanup insights click defenition

* Update packages/docsearch-react/src/DocSearchModal.tsx

Co-authored-by: François Chalifour <[email protected]>

* Inline creating insights event parameters


---------

Co-authored-by: François Chalifour <[email protected]>

Author: 8bittitan

bundlesize.config.json

@@ -6,11 +6,11 @@
     },
     {
       "path": "packages/docsearch-react/dist/umd/index.js",
-      "maxSize": "22.47 kB"
+      "maxSize": "22.57 kB"
     },
     {
       "path": "packages/docsearch-js/dist/umd/index.js",
-      "maxSize": "30.33 kB"
+      "maxSize": "30.43 kB"
     }
   ]
 }

packages/docsearch-react/src/DocSearchModal.tsx

@@ -1,5 +1,7 @@
-import type { AutocompleteState } from '@algolia/autocomplete-core';
-import { createAutocomplete } from '@algolia/autocomplete-core';
+import {
+  type AlgoliaInsightsHit,
+  createAutocomplete,
+} from '@algolia/autocomplete-core';
 import React from 'react';
 
 import { MAX_QUERY_SIZE } from './constants';
@@ -14,6 +16,7 @@ import { SearchBox } from './SearchBox';
 import { createStoredSearches } from './stored-searches';
 import type {
   DocSearchHit,
+  DocSearchState,
   InternalDocSearchHit,
   StoredDocSearchHit,
 } from './types';
@@ -66,7 +69,7 @@ export function DocSearchModal({
     ...screenStateTranslations
   } = translations;
   const [state, setState] = React.useState<
-    AutocompleteState<InternalDocSearchHit>
+    DocSearchState<InternalDocSearchHit>
   >({
     query: '',
     collections: [],
@@ -130,6 +133,28 @@ export function DocSearchModal({
     [favoriteSearches, recentSearches, disableUserPersonalization]
   );
 
+  const sendItemClickEvent = React.useCallback(
+    (item: InternalDocSearchHit) => {
+      if (!state.context.algoliaInsightsPlugin || !item.__autocomplete_id)
+        return;
+
+      const insightsItem = item as AlgoliaInsightsHit;
+
+      const insightsClickParams = {
+        eventName: 'Item Selected',
+        index: insightsItem.__autocomplete_indexName,
+        items: [insightsItem],
+        positions: [item.__autocomplete_id],
+        queryID: insightsItem.__autocomplete_queryID,
+      };
+
+      state.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(
+        insightsClickParams
+      );
+    },
+    [state.context.algoliaInsightsPlugin]
+  );
+
   const autocomplete = React.useMemo(
     () =>
       createAutocomplete<
@@ -476,6 +501,9 @@ export function DocSearchModal({
             translations={screenStateTranslations}
             getMissingResultsUrl={getMissingResultsUrl}
             onItemClick={(item, event) => {
+              // If insights is active, send insights click event
+              sendItemClickEvent(item);
+
               saveRecentSearch(item);
               if (!isModifierEvent(event)) {
                 onClose();

packages/docsearch-react/src/types/DocSearchHit.ts

@@ -84,4 +84,5 @@ export declare type DocSearchHit = {
     appId: string;
     apiKey: string;
   };
+  __autocomplete_id?: number;
 };

packages/docsearch-react/src/types/DocSearchState.ts

@@ -0,0 +1,17 @@
+import type {
+  AutocompleteContext,
+  AutocompleteInsightsApi,
+  AutocompleteState,
+  BaseItem,
+} from '@algolia/autocomplete-core';
+
+interface DocSearchContext extends AutocompleteContext {
+  algoliaInsightsPlugin?: {
+    insights: AutocompleteInsightsApi;
+  };
+}
+
+export interface DocSearchState<TItem extends BaseItem>
+  extends AutocompleteState<TItem> {
+  context: DocSearchContext;
+}

packages/docsearch-react/src/types/index.ts

@@ -1,3 +1,4 @@
 export * from './DocSearchHit';
+export * from './DocSearchState';
 export * from './InternalDocSearchHit';
 export * from './StoredDocSearchHit';