fix(intent): prevent unnecessary AI calls for filter-only interactions

- only trigger AI interpretation when intent text is present
- allow filter selections to directly drive product suggestions
- stabilise handleAsk flow (no conditional hook usage)
- improve UX consistency between typed and structured intent

Author: Herve Tribouilloy

vite_project/package-lock.json

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

vite_project/package.json

@@ -4,6 +4,7 @@ import {SystemStateProvider} from "./state/System/SystemStateProvider.tsx";
 import {IntentLookup} from "./components/IntentLookup.tsx";
 import {TranslationStateProvider} from "./state/Translation/TranslationStateProvider.tsx";
 import {SpinnerOverlay} from "./components/global/SpinnerOverlay.tsx";
+import {IntentStateProvider} from "./state/Intent/IntentStateProvider.tsx";
 
 type Props = {
     host: HTMLElement;
@@ -16,11 +17,13 @@ export const IntentDiscoveryWidgetWrapper = ({ host }: Props) => {
     if (error) return <ErrorState error={error}  />
 
     return  <SystemStateProvider config={config.integrations} store={config.storeCode}>
-        <TranslationStateProvider translations={config.translations}>
-            <div className="intent-widget-container">
-                {loading ? <SpinnerOverlay /> : <IntentLookup config={config} />}
-            </div>
-        </TranslationStateProvider>
-    </SystemStateProvider>
+                <IntentStateProvider>
+                    <TranslationStateProvider translations={config.translations}>
+                        <div className="intent-widget-container">
+                            {loading ? <SpinnerOverlay /> : <IntentLookup config={config} />}
+                        </div>
+                    </TranslationStateProvider>
+                </IntentStateProvider>
+            </SystemStateProvider>
 };
 

vite_project/src/IntentDiscoveryWidgetWrapper.tsx

@@ -6,25 +6,23 @@ import { useTranslationState } from "../../state/Translation/useTranslationState
 import type { IntentDiscoveryDataConfig } from "../../domain/intent-discovery.types.ts";
 import type { MagentoAggregation } from "../../hooks/infra/useProductAttributeLayer.tsx";
 import { useInteractionState } from "../../state/Interaction/useInteractionState.ts";
-import {useSystemState} from "../../state/System/useSystemState.ts";
 import {NoResult} from "../global/NoResult.tsx";
+import {useIntentState} from "../../state/Intent/useIntentState.ts";
 
 type Props = {
     isDisabled: boolean
     aggregations: MagentoAggregation[]
-    filteredAggregations: MagentoAggregation[]
     config: IntentDiscoveryDataConfig
 }
 
 export const AttributeSelectorLayer = ({
     isDisabled,
     aggregations,
-    filteredAggregations,
     config
 }: Props) => {
     const { setActiveAttribute } = useInteractionState();
     const [showAll, setShowAll] = useState(false);
-    const {intentState} = useSystemState()
+    const {intentState} = useIntentState()
     const { interactionState } = useInteractionState()
 
     const allAttributes = useIntentAttributes(aggregations, config)

vite_project/src/components/AttributeLayer/AttributeSelectorLayer.tsx

@@ -5,24 +5,36 @@ import {decodeHtmlEntities} from "../../lib/string.ts";
 type AttributeTileProps = {
     attr: MagentoAggregation;
     isSelected: boolean;
-    value?: string;
+    value?: string[];
     onClick: () => void;
 };
 
-export const AttributeTile = ({ attr, isSelected, value, onClick }: AttributeTileProps) => (
-    <div
-        className="choice-tile"
-        data-intent-card={attr.attribute_code}
-        data-intent-active={isSelected}
-        data-intent-activated={value !== ''}
-        onClick={onClick}
-    >
-        <span className={`choice-tile__label ${isSelected ? 'choice-tile__label--selected' : ''}`}>
-            {attr.label}
-        </span>
+export const AttributeTile = ({ attr, isSelected, value, onClick }: AttributeTileProps) => {
+    const visible = value && value.slice(0, 1) || []
+    const remaining = value && visible && value?.length - visible.length || 0
 
-        {value && <span className="choice-tile__info">{decodeHtmlEntities(value)}</span>}
+    return (
+        <div
+            className="choice-tile"
+            data-intent-card={attr.attribute_code}
+            data-intent-active={isSelected}
+            data-intent-activated={value && value?.length > 0}
+            onClick={onClick}
+        >
+            <span className={`choice-tile__label ${isSelected ? 'choice-tile__label--selected' : ''}`}>
+                {attr.label}
+            </span>
 
-        <Icon attribute_code={attr.attribute_code} />
-    </div>
-);
+            {value && <span className="choice-tile__info">
+            {visible.map(v => (
+                <span key={v} className="badge">{decodeHtmlEntities(v)}</span>
+            ))}
+                {remaining > 0 && (
+                    <span className="badge badge--more">+{remaining}</span>
+                )}
+            </span>}
+
+            <Icon attribute_code={attr.attribute_code}/>
+        </div>
+    )
+}

vite_project/src/components/AttributeLayer/AttributeTile.tsx

@@ -1,9 +1,9 @@
 import { unescapeHtml } from "../../lib/string.ts";
 import { useFindAttributeOptionsByCode } from "../../hooks/domain/useFindAttributeOptionsByCode.tsx";
 import type {MagentoAggregationOption, MagentoProducts} from "../../hooks/infra/useProductAttributeLayer.tsx";
-import {useSystemState} from "../../state/System/useSystemState.ts";
 import {useInteractionState} from "../../state/Interaction/useInteractionState.ts";
 import {activity} from "../../activity";
+import {useIntentState} from "../../state/Intent/useIntentState.ts";
 
 interface StepFinderProps {
     optionCode: string
@@ -13,8 +13,7 @@ interface StepFinderProps {
 export const StepFinder: React.FC<StepFinderProps> = ({ optionCode, attributeLayerData }: StepFinderProps) => {
     const { setActiveAttribute, setFocusedOption } = useInteractionState()
     const { attributeData } = useFindAttributeOptionsByCode(optionCode, attributeLayerData)
-    const { setPreference } = useSystemState()
-    const {intentState} = useSystemState()
+    const { setPreference, intentState } = useIntentState()
 
     const handleOnClick = async (option: MagentoAggregationOption) => {
         setActiveAttribute(optionCode);

vite_project/src/components/FinderWidget/StepFinder.tsx

@@ -6,13 +6,13 @@ import {useAskAi} from "../../hooks/domain/useAiInterpretation.tsx";
 import {AttributeSelectorLayer} from "../AttributeLayer/AttributeSelectorLayer.tsx";
 import {IntentExplanation} from "../AttributeLayer/IntentExplanation.tsx";
 import {SearchSpinnerOverlay} from "../global/SearchSpinnerOverlay.tsx";
+import {useIntentState} from "../../state/Intent/useIntentState.ts";
 
 type Props = {
     config: IntentDiscoveryDataConfig
     intent: IntentControllerState
     searchPossible: boolean
     aggregations: MagentoAggregation[],
-    filteredAggregations: MagentoAggregation[],
     disabled: boolean
 }
 
@@ -21,17 +21,25 @@ export const AttributeLayer = ({
        intent,
        searchPossible,
        aggregations,
-       filteredAggregations,
        disabled
     }: Props) => {
     const [loading, setLoading] = useState(false);
+    const { setIntentStatus } = useIntentState()
 
-    const handleAsk = useAskAi({
+    const askAi = useAskAi({
         intent,
         aggregations,
         config,
         setLoading
-    });
+    })
+
+    const handleAsk = () => {
+        if (intent.text?.trim()) {
+            askAi()
+        } else {
+            setIntentStatus("readyToSearch")
+        }
+    }
 
     if (loading) return <SearchSpinnerOverlay />
 
@@ -45,7 +53,6 @@ export const AttributeLayer = ({
                 <AttributeSelectorLayer
                     isDisabled={disabled}
                     aggregations={aggregations}
-                    filteredAggregations={filteredAggregations}
                     config={config}
                 />
             </div>

vite_project/src/components/IntentDiscovery/AttributeLayer.tsx

@@ -8,10 +8,10 @@ import {IntentDiscoveryOptions} from "./IntentDiscoveryOptions.tsx";
 import {ProductRecommendations} from "./ProductRecommendations.tsx";
 import type {MagentoProducts} from "../../hooks/infra/useProductAttributeLayer.tsx";
 import {useIntentSearch} from "../../hooks/domain/useIntentSearch.tsx";
-import {useSystemState} from "../../state/System/useSystemState.ts";
 import {SpinnerOverlay} from "../global/SpinnerOverlay.tsx";
 import {ErrorState} from "../global/ErrorState.tsx";
 import {useFindFilteredAttributeLayer} from "../../hooks/domain/useFindFilteredAttributeLayer.tsx";
+import {useIntentState} from "../../state/Intent/useIntentState.ts";
 
 export interface Props {
     config: IntentDiscoveryDataConfig
@@ -37,7 +37,7 @@ export const IntentDiscoveryLayout = ({ config, categoryData, attributeLayerData
         config
     )
 
-    const { intentState } = useSystemState()
+    const { intentState } = useIntentState()
 
     if (attributeFilteredLayerLoading) return <SpinnerOverlay />
     if (attributeFilteredLayerError) return <ErrorState error={attributeFilteredLayerError} />
@@ -53,7 +53,6 @@ export const IntentDiscoveryLayout = ({ config, categoryData, attributeLayerData
                         intent={intent}
                         searchPossible={searchPossible}
                         aggregations={attributeLayerData?.aggregations}
-                        filteredAggregations={attributeFilteredLayerData?.aggregations}
                         disabled={isSearching}
                     />
                     <IntentDiscoveryOptions

vite_project/src/components/IntentDiscovery/IntentDiscoveryLayout.tsx

@@ -21,25 +21,23 @@ export function isAttributeSelected(
     return false;
 }
 
-export function renderPreferenceValue(
+export function getSelectedValues(
     attributeCode: string,
     aggregations: MagentoAggregation[],
     intent?: IntentRecord
-): string {
+): string[] {
     const scores = intent?.attributeScore?.[attributeCode];
-    if (!scores) return "";
+    if (!scores) return [];
 
     const aggregation = aggregations.find(a => a.attribute_code === attributeCode);
 
     return Object.entries(scores)
-        .map(([val, score]) => {
+        .map(([val]) => {
             const option = aggregation?.options.find(o => String(o.value) === String(val));
             const label = option?.label ?? val;
-            const count = option?.count ?? score;
 
-            return `${label} (${count})`;
+            return label;
         })
-        .join(", ");
 }
 
 export function getSelectedAttributes(
@@ -76,8 +74,8 @@ export function useSelectedPreferences(
         return valid ? String(valid.value) : null;
     };
 
-    const displayFor = (code: string): string => {
-        return renderPreferenceValue(code, aggregations, intent);
+    const displayFor = (code: string): string[] => {
+        return getSelectedValues(code, aggregations, intent);
     };
 
     return { selected, valueFor, displayFor };

vite_project/src/components/SelectionsSummary/selectedPreferencesUtils.ts

@@ -2,8 +2,6 @@ import {formatPrice} from "../../lib/price.ts";
 import type {EnrichedSuggestion} from "../../types/infra/magento/product.types.ts";
 
 export const SuggestionCard: React.FC<{ suggestion: EnrichedSuggestion }> = ({ suggestion }) => {
-    console.log('SuggestionCard', suggestion)
-
     const content = (
         <>
             <a