feat(intent-discovery): add evaluation state and UI blocking during AI recommendations

Introduce an evaluation phase while AI recommendations are being computed.

- Add `EvaluationOverlay` to display feedback while recommendations are evaluated
- Lift `isEvaluating` state to `IntentDiscovery` parent component
- Disable `AttributeLayer` interactions during evaluation
- Propagate `searchLoading` from `useAnalyseSearch` to control evaluation state
- Refactor `useAnalyseSearch` to orchestrate product + AI queries safely
- Add `enabled` guard to `useAiRecommendations` to prevent unnecessary calls
- Simplify hook structure and remove legacy mock implementation
- Minor styling improvement with `.step-finder--disabled` to visually block interaction

This improves UX during the AI recommendation phase and stabilizes the
recommendation pipeline for the demo.

Author: Herve Tribouilloy

vite_project/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "widget-intent-discovery",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

vite_project/package.json

@@ -1,5 +1,4 @@
 import {useState} from "react";
-import type {MagentoCategory} from "../types/infra/magento/category.types.ts";
 import {useActiveAttributeState} from "../state/ActiveAttribute/useActiveAttributeState.ts";
 import {useSelectedPreferences} from "./selectedPreferencesUtils";
 import type {IntentDiscoveryDataConfig} from "../domain/intent-discovery.types.ts";
@@ -8,11 +7,11 @@ import type {MagentoAggregation, MagentoProducts} from "../hooks/infra/useProduc
 
 type Props = {
     config: IntentDiscoveryDataConfig;
-    categoryData: MagentoCategory;
     attributeLayerData: MagentoProducts
+    disabled: boolean
 };
 
-export const AttributeLayer = ({ config, attributeLayerData }: Props) => {
+export const AttributeLayer = ({ config, attributeLayerData, disabled }: Props) => {
     const { setActiveAttributeCode } = useActiveAttributeState();
     const {intentState} = useSystemState()
     const { valueFor: prefValue } =
@@ -42,10 +41,9 @@ export const AttributeLayer = ({ config, attributeLayerData }: Props) => {
 
     return (
         <>
-            {/*<SelectedPreferences categoryData={categoryData} intent={intent} />*/}
             <div className="finder">
                 <h2 className="finder__title">Need help choosing?</h2>
-                <div className="step-finder">
+                <div className={`step-finder ${disabled ? 'step-finder--disabled' : ''}`}>
                     {visibleAttributes.map((attr: MagentoAggregation) => (
                         <div
                             key={attr.attribute_code}

vite_project/src/components/AttributeLayer.tsx

@@ -0,0 +1,10 @@
+import {Spinner} from "./global/Spinner.tsx";
+
+export const EvaluationOverlay = () => {
+    return (
+        <div className="intent-evaluation-overlay">
+            <Spinner />
+            <p>Evaluating your preferences…</p>
+        </div>
+    )
+}

vite_project/src/components/EvaluationOverlay.tsx

@@ -10,6 +10,7 @@ import {IntentDiscoveryOptions} from "./IntentDiscoveryOptions.tsx";
 import {ProductRecommendations} from "./ProductRecommendations.tsx";
 import {activity} from "../activity";
 import {useIntentDecision} from "../hooks/domain/useIntentDecision.tsx";
+import {EvaluationOverlay} from "./EvaluationOverlay.tsx";
 
 export interface Props {
     config: IntentDiscoveryDataConfig
@@ -23,6 +24,7 @@ export const IntentDiscovery = ({ config, categoryData }: Props) => {
 
     const [showRightColumn, setShowRightColumn] = useState(false)
     const { shouldSearch } = useIntentDecision(attributeLayerData, config)
+    const [isEvaluating, setIsEvaluating] = useState(false)
 
     useEffect(() => {
         if (!attributeLayerData?.aggregations) return
@@ -37,18 +39,13 @@ export const IntentDiscovery = ({ config, categoryData }: Props) => {
 
     return (
         <>
-            {shouldSearch && (
-                <div className="intent-evaluation-overlay">
-                    <Spinner />
-                    <p>Evaluating your preferences…</p>
-                </div>
-            )}
+            {isEvaluating && <EvaluationOverlay />}
             <div className={showRightColumn ? "re-intent-layout re-intent-layout--two" : "re-intent-layout"}>
                 <div className="re-intent-col re-intent-col--left">
                     <AttributeLayer
                         config={config}
-                        categoryData={categoryData}
                         attributeLayerData={attributeLayerData}
+                        disabled={isEvaluating}
                     />
                     <IntentDiscoveryOptions
                         config={config}
@@ -63,6 +60,7 @@ export const IntentDiscovery = ({ config, categoryData }: Props) => {
                         attributeLayerData={attributeLayerData}
                         onVisibilityChange={setShowRightColumn}
                         shouldSearch={shouldSearch}
+                        setIsEvaluating={setIsEvaluating}
                     />
                 </div>
             </div>

vite_project/src/components/IntentDiscovery.tsx

@@ -10,13 +10,15 @@ export interface Props {
     attributeLayerData: MagentoProducts
     onVisibilityChange?: (visible: boolean) => void
     shouldSearch: boolean
+    setIsEvaluating: (status: boolean) => void
 }
 
 export const ProductRecommendations = ({
    categoryData,
    attributeLayerData,
    onVisibilityChange,
-   shouldSearch
+   shouldSearch,
+   setIsEvaluating
 }: Props) => {
     const { aiRecommendation, searchLoading, error } =
         useAnalyseSearch(
@@ -31,6 +33,10 @@ export const ProductRecommendations = ({
         onVisibilityChange?.(hasSuggestions)
     }, [hasSuggestions, onVisibilityChange])
 
+    useEffect(() => {
+        setIsEvaluating(searchLoading);
+    }, [searchLoading]);
+
     if (!shouldSearch) return null;
     if (searchLoading) return <Spinner />;
     if (!aiRecommendation?.suggestions?.length) return null;

vite_project/src/components/ProductRecommendations.tsx

@@ -1,14 +1,14 @@
 import {useAiRecommendations} from "../infra/useAiRecommendations.tsx";
 import type {MagentoAggregation} from "../infra/useProductAttributeLayer.tsx";
-import {useEffect, useState} from "react";
 import type {MagentoCategory} from "../../types/infra/magento/category.types.ts";
 import {useFindProducts} from "./useFindProducts.tsx";
 
 export function useAnalyseSearch(
     aggregations: MagentoAggregation[] | undefined,
     categoryData: MagentoCategory,
-    enabled: boolean
+    enabled: boolean,
 ) {
+
     const {
         productData,
         productLoading,
@@ -19,72 +19,13 @@ export function useAnalyseSearch(
         data: aiRecommendation,
         loading: aiLoading,
         error: aiError,
-    } = useAiRecommendations(aggregations, productData);
+    } = useAiRecommendations(aggregations, productData, enabled);
+
+    const searchLoading = productLoading || aiLoading;
 
     return {
         aiRecommendation,
-        searchLoading: productLoading || aiLoading,
+        searchLoading,
         error: productError ?? aiError,
     };
-}
-
-export interface MockRecommendation {
-    sku: string
-    name: string
-    score: number
-}
-
-export interface MockAnalyseResult {
-    productData: MockRecommendation[]
-    message?: string
-}
-
-export function useAnalyseSearchMock(attributeData: MagentoAggregation[]) {
-    const [data, setData] = useState<MockAnalyseResult | null>(null)
-
-    useEffect(() => {
-        if (!attributeData?.length) {
-            setData(null)
-            return
-        }
-
-        // simple scoring heuristic
-        const sizeAgg = attributeData.find(a => a.attribute_code === "size")
-        const colourAgg = attributeData.find(a => a.attribute_code === "color")
-
-        const sizeSignals = sizeAgg?.options?.filter(o => o.count > 0).length ?? 0
-        const colourSignals = colourAgg?.options?.filter(o => o.count > 0).length ?? 0
-
-        const mockProducts: MockRecommendation[] = [
-            {
-                sku: "MOCK-1",
-                name: "Slim Fit Cotton Shirt",
-                score: sizeSignals * 2 + colourSignals
-            },
-            {
-                sku: "MOCK-2",
-                name: "Relaxed Fit Linen Shirt",
-                score: sizeSignals + colourSignals * 2
-            }
-        ]
-
-        const sorted = mockProducts.sort((a, b) => b.score - a.score)
-
-        setData({
-            productData: sorted,
-            message:
-                sorted[0].score > 2
-                    ? "Based on your filters, these may match your intent."
-                    : "You might want to refine your selection."
-        })
-
-    }, [attributeData])
-
-    return {
-        productData: data?.productData ?? [],
-        message: data?.message,
-        productLoading: false,
-        productError: null,
-        refetch: () => {}
-    }
 }

vite_project/src/hooks/domain/useAnalyseSearch.tsx

@@ -29,7 +29,8 @@ export interface AiRecommendationResponse {
 
 export function useAiRecommendations(
     attributeData: MagentoAggregation[] | undefined,
-    productData: GraphqlProduct[] | undefined
+    productData: GraphqlProduct[] | undefined,
+    enabled: boolean
 ) {
     const { intentState } = useSystemState()
 
@@ -40,7 +41,7 @@ export function useAiRecommendations(
     const { intentApiClient } = useSystemState();
 
     const load = useCallback(async () => {
-        if (!intentState || !attributeData?.length || !productData?.length) return
+        if (!intentState || !attributeData?.length || !productData?.length || !enabled) return
 
         setLoading(true)
         setError(null)

vite_project/src/hooks/infra/useAiRecommendations.tsx

@@ -176,4 +176,9 @@
     justify-content: center;
     z-index: 10;
     font-size: 16px;
+}
+
+.step-finder--disabled {
+    opacity: 0.5;
+    pointer-events: none;
 }