From cacade4c65878877c5c7433281299e3a5f9a2541 Mon Sep 17 00:00:00 2001
From: Paul Jankowski <33367713+8bittitan@users.noreply.github.com>
Date: Thu, 15 Jun 2023 10:44:00 -0400
Subject: [PATCH] feat (api): Adds ability for click insights events to be
 triggered (#1916)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 <francoischalifour@users.noreply.github.com>

* Inline creating insights event parameters


---------

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
---
 bundlesize.config.json                        |  4 +--
 .../docsearch-react/src/DocSearchModal.tsx    | 34 +++++++++++++++++--
 .../docsearch-react/src/types/DocSearchHit.ts |  1 +
 .../src/types/DocSearchState.ts               | 17 ++++++++++
 packages/docsearch-react/src/types/index.ts   |  1 +
 5 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 packages/docsearch-react/src/types/DocSearchState.ts

diff --git a/bundlesize.config.json b/bundlesize.config.json
index da7ea1e93..f9358873d 100644
--- a/bundlesize.config.json
+++ b/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"
     }
   ]
 }
diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx
index a09e7096e..11ba041f6 100644
--- a/packages/docsearch-react/src/DocSearchModal.tsx
+++ b/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();
diff --git a/packages/docsearch-react/src/types/DocSearchHit.ts b/packages/docsearch-react/src/types/DocSearchHit.ts
index 8661fe82c..ed9282e5b 100644
--- a/packages/docsearch-react/src/types/DocSearchHit.ts
+++ b/packages/docsearch-react/src/types/DocSearchHit.ts
@@ -84,4 +84,5 @@ export declare type DocSearchHit = {
     appId: string;
     apiKey: string;
   };
+  __autocomplete_id?: number;
 };
diff --git a/packages/docsearch-react/src/types/DocSearchState.ts b/packages/docsearch-react/src/types/DocSearchState.ts
new file mode 100644
index 000000000..a5eb9c45f
--- /dev/null
+++ b/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;
+}
diff --git a/packages/docsearch-react/src/types/index.ts b/packages/docsearch-react/src/types/index.ts
index 93285bd19..37ac8f9ac 100644
--- a/packages/docsearch-react/src/types/index.ts
+++ b/packages/docsearch-react/src/types/index.ts
@@ -1,3 +1,4 @@
 export * from './DocSearchHit';
+export * from './DocSearchState';
 export * from './InternalDocSearchHit';
 export * from './StoredDocSearchHit';