feat(intent-discovery): trigger AI interpretation and refine filters from Ask action

- Ask button now triggers AI intent interpretation
- Returned filters automatically update layered navigation preferences
- AI readiness threshold displayed in UI
- Added telemetry for interpretation events

Author: Herve Tribouilloy

node-backend/src/controller/intent-handler.ts

@@ -74,4 +74,40 @@ export class IntentHandler {
         )
     }
 
+    dummy = async (
+        req: Request,
+        res: Response
+    ): Promise<void> => {
+        try {
+            const { intent } = req.body
+            const text: string = intent?.text ?? ""
+
+            const filters: Record<string, string> = {}
+
+            await new Promise(resolve => setTimeout(resolve, 500))
+
+            filters.color = "58"
+            /*filters.climate = "202"
+
+            if (text.includes("red")) {
+                filters.color = "red"
+            }
+
+            if (text.includes("jacket")) {
+                filters.category = "jackets"
+            }
+
+            if (text.includes("hiking")) {
+                filters.activity = "hiking"
+            }*/
+
+            res.json({filters})
+
+        } catch (err) {
+            console.error(err)
+            res.status(500).json({
+                error: "Server error"
+            })
+        }
+    }
 }

node-backend/src/routes/intentRouter.ts

@@ -20,6 +20,8 @@ export const setupIntentRoutes = (app: Application) => {
 
     router.post("/interpret", intentHandlerController.validateIntentInput)
 
+    router.post("/dummy", intentHandlerController.dummy)
+
     router.options('*', options);
 
     app.use(config.route.intentPrefix, router)

vite_project/package-lock.json

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

vite_project/package.json

@@ -33,6 +33,7 @@
     },
     "ai": {
       "enabled": true,
+      "activationThreshold": 5,
       "matchThreshold": 30,
       "minIntentScore": 4,
       "maxProductsForAnalysis": 40

vite_project/public/cdn/default.json

@@ -33,6 +33,7 @@
     },
     "ai": {
       "enabled": true,
+      "activationThreshold": 30,
       "matchThreshold": 30,
       "minIntentScore": 4,
       "maxProductsForAnalysis": 40
@@ -44,7 +45,10 @@
     "Tell us what matters most for your purchase": "Décrivez ce qui compte le plus pour votre achat",
     "View all": "Afficher tout",
     "Show less": "Afficher moins",
-    "AI suggestions": "Suggestions de l’IA"
+    "AI suggestions": "Suggestions de l’IA",
+    "AI can be activated in %s more characters": "L’IA pourra s’activer dans %s caractères",
+    "AI ready to interpret your request": "L’IA est prête à interpréter votre demande",
+    "Searching your best match…": "Recherche des produits les plus adaptés à votre demande…"
   },
   "integrations": {
     "require": ["magentoGraphql", "intentApi"]

vite_project/public/cdn/magento_fr_store.json

@@ -22,7 +22,7 @@ export const AttributeLayer = ({
     const { setActiveAttributeCode } = useActiveAttributeState();
     const {intentState} = useSystemState()
     const { valueFor: prefValue } =
-        useSelectedPreferences(attributeLayerData, intentState);
+        useSelectedPreferences(attributeLayerData?.aggregations, intentState);
     const {t} = useTranslationState()
 
     const [showAll, setShowAll] = useState(false);

vite_project/src/components/EvaluationOverlay.tsx

@@ -2,7 +2,7 @@ import type {IntentDiscoveryDataConfig} from "../../domain/intent-discovery.type
 import type {CategoryData} from "../../types/infra/magento/category.types.ts";
 import {useIntentLayoutState} from "../../hooks/domain/useIntentLayoutState.tsx";
 import {useIntentController} from "../../hooks/domain/useIntentController.tsx";
-import {EvaluationOverlay} from "../EvaluationOverlay.tsx";
+import {SearchOverlay} from "../SearchOverlay.tsx";
 import {IntentMessage} from "./IntentMessage.tsx";
 import {AttributeLayer} from "./AttributeLayer.tsx";
 import {IntentDiscoveryOptions} from "./IntentDiscoveryOptions.tsx";
@@ -19,15 +19,15 @@ export const IntentDiscoveryLayout = ({ config, categoryData, attributeLayerData
     const {
         showRightColumn,
         setShowRightColumn,
-        isEvaluating,
-        setIsEvaluating
+        isSearching,
+        setIsSearching
     } = useIntentLayoutState()
 
-    const { intent} = useIntentController(attributeLayerData, config)
+    const { intent } = useIntentController(attributeLayerData, config)
 
     return (
         <div className="intent-widget">
-            {isEvaluating && <EvaluationOverlay/>}
+            {isSearching && <SearchOverlay />}
             <div className={showRightColumn ? "re-intent-layout re-intent-layout--two" : "re-intent-layout"}>
                 <div className="re-intent-col re-intent-col--left">
                     <IntentMessage
@@ -38,7 +38,7 @@ export const IntentDiscoveryLayout = ({ config, categoryData, attributeLayerData
                     <AttributeLayer
                         config={config}
                         attributeLayerData={attributeLayerData}
-                        disabled={isEvaluating}
+                        disabled={isSearching}
                     />
                     <IntentDiscoveryOptions
                         config={config}
@@ -49,11 +49,11 @@ export const IntentDiscoveryLayout = ({ config, categoryData, attributeLayerData
 
                 <div className="re-intent-col re-intent-col--right">
                     <ProductRecommendations
+                        config={config}
                         categoryData={categoryData}
                         attributeLayerData={attributeLayerData}
                         search={{
-                            shouldRun: intent.shouldSearch,
-                            setIsEvaluating
+                            setIsSearching
                         }}
                         onVisibilityChange={setShowRightColumn}
                     />

vite_project/src/components/IntentDiscovery/AttributeLayer.tsx

@@ -1,26 +1,60 @@
-import {useEvaluateMessageIntent} from "../../hooks/domain/useEvaluateMessageIntent.tsx";
 import type {MagentoProducts} from "../../hooks/infra/useProductAttributeLayer.tsx";
-import {Spinner} from "../global/Spinner.tsx";
-import {ErrorState} from "../global/ErrorState.tsx";
 import type {IntentDiscoveryDataConfig} from "../../domain/intent-discovery.types.ts";
 import {useTranslationState} from "../../state/Translation/useTranslationState.ts";
 import type {IntentControllerState} from "../../domain/intent.types.ts";
+import {activity} from "../../activity";
+import {buildAiInterpretationPayload} from "../../lib/ai-recommendations.ts";
+import {useSystemState} from "../../state/System/useSystemState.ts";
+import {useOptionLabelMap} from "../../hooks/domain/useOptionLabelMap.ts";
 
 type Props = {
     config: IntentDiscoveryDataConfig,
     intent: IntentControllerState,
     attributeLayerData: MagentoProducts
 };
-export const IntentMessage = ({config, intent, attributeLayerData}: Props) => {
-    const { evaluationLoading, evaluationError } = useEvaluateMessageIntent(
-        config,
-        intent,
-        attributeLayerData?.aggregations
-    )
+export const IntentMessage = ({intent, attributeLayerData}: Props) => {
+    const { intentState, setIntentText, setPreference, intentApiClient } = useSystemState()
+    const optionLabelMap = useOptionLabelMap(attributeLayerData?.aggregations);
+
     const {t} = useTranslationState()
 
-    if (evaluationLoading) return <Spinner />
-    if (evaluationError) return <ErrorState error={evaluationError} />
+    const handleAsk = async () => {
+        try {
+            const payload = buildAiInterpretationPayload(
+                intentState,
+                attributeLayerData?.aggregations,
+                intent.text,
+                optionLabelMap
+            )
+
+            const json = await intentApiClient.interpret(payload)
+            //const json = await intentApiClient.dummy(payload)
+
+            activity('ai-interpretation', 'AI interpretation API ran', json)
+
+            if (json?.filters) {
+                setIntentText(intent.text)
+
+                for (const [attribute, value] of Object.entries(json?.filters)) {
+                    setPreference(attribute, value)
+                }
+            }
+
+            activity(
+                'intent-evaluated',
+                'Intent evaluated and search triggered'
+            )
+
+        } catch (err) {
+
+            activity(
+                'intent-error',
+                'Intent evaluation failed',
+                { error: err }
+            )
+
+        }
+    }
 
     return (
         <div className="finder">
@@ -33,10 +67,17 @@ export const IntentMessage = ({config, intent, attributeLayerData}: Props) => {
                     onChange={(e) => intent.setIntent(e.target.value)}
                     className="intent-input"
                 />
+                <button
+                    className="intent-input-button"
+                    onClick={handleAsk}
+                    disabled={intent.remainingChars > 0}
+                >
+                    Ask
+                </button>
                 <div className={`intent-ai-threshold ${intent.remainingChars === 0 ? "ready" : ""}`}>
                     {intent.remainingChars > 0
-                        ? `AI activates in ${intent.remainingChars} more characters`
-                        : "AI ready — interpreting request"}
+                        ? t("AI can be activated in %s more characters", intent.remainingChars)
+                        : t("AI ready to interpret your request")}
                 </div>
             </div>
         </div>