feat(didyoumean): allow shifting queryCorrectionMode on the fly

packages/atomic/src/components/search/atomic-did-you-mean/atomic-did-you-mean.tsx

@@ -6,7 +6,7 @@ import {
   buildQueryTrigger,
   QueryTriggerState,
 } from '@coveo/headless';
-import {Component, h, Prop, State} from '@stencil/core';
+import {Component, h, Prop, State, Watch} from '@stencil/core';
 import {
   BindStateToController,
   InitializableComponent,
@@ -69,6 +69,11 @@ export class AtomicDidYouMean implements InitializableComponent {
   @Prop({reflect: true})
   public queryCorrectionMode: 'legacy' | 'next' = 'legacy';
 
+  @Watch('queryCorrectionMode')
+  public updateQueryCorrectionMode() {
+    this.didYouMean.updateQueryCorrectionMode(this.queryCorrectionMode);
+  }
+
   public initialize() {
     this.didYouMean = buildDidYouMean(this.bindings.engine, {
       options: {

packages/headless/src/controllers/core/did-you-mean/headless-core-did-you-mean.test.ts

@@ -3,6 +3,7 @@ import {
   applyDidYouMeanCorrection,
   disableAutomaticQueryCorrection,
   enableDidYouMean,
+  setCorrectionMode,
 } from '../../../features/did-you-mean/did-you-mean-actions';
 import {didYouMeanReducer as didYouMean} from '../../../features/did-you-mean/did-you-mean-slice';
 import {
@@ -66,6 +67,15 @@ describe('did you mean', () => {
     expect(applyDidYouMeanCorrection).toHaveBeenCalledWith('bar');
   });
 
+  it('should allow to update the query correction mode', () => {
+    const initialState = createMockState();
+    initialState.didYouMean.queryCorrectionMode = 'legacy';
+    initDidYouMean({}, initialState);
+    dym.updateQueryCorrectionMode('next');
+
+    expect(engine.dispatch).toHaveBeenCalledWith(setCorrectionMode('next'));
+  });
+
   it('should dispatch disableAutomaticQueryCorrection at initialization when specified', () => {
     initDidYouMean({options: {automaticallyCorrectQuery: false}});
     expect(disableAutomaticQueryCorrection).toHaveBeenCalledTimes(1);

packages/headless/src/controllers/core/did-you-mean/headless-core-did-you-mean.ts

@@ -28,6 +28,8 @@ export interface DidYouMeanProps {
   options?: DidYouMeanOptions;
 }
 
+type QueryCorrectionMode = 'legacy' | 'next';
+
 export interface DidYouMeanOptions {
   /**
    * Whether to automatically apply corrections for queries that would otherwise return no results.
@@ -47,14 +49,25 @@ export interface DidYouMeanOptions {
    *
    * Default value is `legacy`. In the next major version of Headless, the default value will be `next`.
    */
-  queryCorrectionMode?: 'legacy' | 'next';
+  queryCorrectionMode?: QueryCorrectionMode;
 }
 export interface DidYouMean extends Controller {
   /**
    * Apply query correction using the query correction, if any, currently present in the state.
    */
   applyCorrection(): void;
 
+  /**
+   * Update which query correction system to use
+   *
+   * `legacy`: Query correction is powered by the legacy index system. This system relies on an algorithm using solely the index content to compute the suggested terms.
+   * `next`: Query correction is powered by a machine learning system, requiring a valid query suggestion model configured in your Coveo environment to function properly. This system relies on machine learning algorithms to compute the suggested terms.
+   *
+   *  @param queryCorrectionMode - the query correction mode to use
+   *
+   */
+  updateQueryCorrectionMode(queryCorrectionMode: QueryCorrectionMode): void;
+
   /**
    * The state of the `DidYouMean` controller.
    */
@@ -139,6 +152,9 @@ export function buildCoreDidYouMean(
         applyDidYouMeanCorrection(this.state.queryCorrection.correctedQuery)
       );
     },
+    updateQueryCorrectionMode(queryCorrectionMode: QueryCorrectionMode) {
+      dispatch(setCorrectionMode(queryCorrectionMode));
+    },
   };
 }