Merge pull request #7 from reactedge/refactor/widget-state-flow

refactor(widget): simplify state and hooks to support scalable interpretation flow

Author: digitalrisedorset

vite_project/src/IntentDiscoveryWidgetWrapper.tsx

@@ -17,7 +17,7 @@ export const IntentDiscoveryWidgetWrapper = ({ host }: Props) => {
     if (error) return <ErrorState error={error}  />
 
     return  <SystemStateProvider config={config.integrations} store={config.storeCode}>
-                <IntentStateProvider>
+                <IntentStateProvider config={config.data}>
                     <TranslationStateProvider translations={config.translations}>
                         <div className="intent-widget-container">
                             {loading ? <SpinnerOverlay /> : <IntentLookup config={config} />}

vite_project/src/components/AttributeLayer/AttributeSelectorLayer.tsx

@@ -4,43 +4,44 @@ import { useIntentAttributes } from "../../hooks/domain/useIntentAttributes.tsx"
 import { AttributeTile } from "./AttributeTile.tsx";
 import { useTranslationState } from "../../state/Translation/useTranslationState.ts";
 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 {NoResult} from "../global/NoResult.tsx";
 import {useIntentState} from "../../state/Intent/useIntentState.ts";
+import type {MagentoLayeredNavigation} from "../../hooks/domain/useLayeredNavigation.tsx";
+import type {MergedAttribute} from "../../hooks/infra/useMagentoLayeredData.tsx";
 
 type Props = {
-    isDisabled: boolean
-    aggregations: MagentoAggregation[]
+    attributeLayerData: MagentoLayeredNavigation
     config: IntentDiscoveryDataConfig
 }
 
 export const AttributeSelectorLayer = ({
-    isDisabled,
-    aggregations,
+    attributeLayerData,
     config
 }: Props) => {
     const { setActiveAttribute } = useInteractionState();
     const [showAll, setShowAll] = useState(false);
     const {intentState} = useIntentState()
     const { interactionState } = useInteractionState()
 
-    const allAttributes = useIntentAttributes(aggregations, config)
+    const allAttributes = useIntentAttributes(attributeLayerData.attributes as MergedAttribute[], config)
     const visibleAttributes = showAll ? allAttributes : allAttributes.slice(0, 3);
     const { displayFor } =
-        useSelectedPreferences(aggregations, intentState);
+        useSelectedPreferences(attributeLayerData.attributes as MergedAttribute[], intentState);
     const { t } = useTranslationState()
 
     const isAttributeSelected = (code: string) => {
         return interactionState?.navigation.activeAttribute === code;
     }
 
-    if (!aggregations?.length) return <NoResult />;
+    const isDisabled = intentState.status === "suggestionProcessing"
+
+    if (!attributeLayerData?.totalCount) return <NoResult />;
 
     return (
         <div className={`step-finder ${isDisabled ? 'step-finder--disabled' : ''}`}>
             {visibleAttributes.map((attr) => {
-                const code = attr.attribute_code;
+                const code = attr.code;
                 const isSelected = isAttributeSelected(code);
 
                 return (

vite_project/src/components/AttributeLayer/AttributeTile.tsx

@@ -1,9 +1,9 @@
-import type {MagentoAggregation} from "../../hooks/infra/useProductAttributeLayer.tsx";
 import {Icon} from "./Icon.tsx";
 import {decodeHtmlEntities} from "../../lib/string.ts";
+import type {MergedAttribute} from "../../hooks/infra/useMagentoLayeredData.tsx";
 
 type AttributeTileProps = {
-    attr: MagentoAggregation;
+    attr: MergedAttribute;
     isSelected: boolean;
     value?: string[];
     onClick: () => void;
@@ -16,7 +16,7 @@ export const AttributeTile = ({ attr, isSelected, value, onClick }: AttributeTil
     return (
         <div
             className="choice-tile"
-            data-intent-card={attr.attribute_code}
+            data-intent-card={attr.code}
             data-intent-active={isSelected}
             data-intent-activated={value && value?.length > 0}
             onClick={onClick}
@@ -34,7 +34,7 @@ export const AttributeTile = ({ attr, isSelected, value, onClick }: AttributeTil
                 )}
             </span>}
 
-            <Icon attribute_code={attr.attribute_code}/>
+            <Icon attribute_code={attr.code}/>
         </div>
     )
 }

vite_project/src/components/AttributeLayer/IntentExplanation.tsx

@@ -1,37 +1,50 @@
 import {useTranslationState} from "../../state/Translation/useTranslationState.ts";
+import {IntentReadiness} from "../IntentDiscovery/IntentReadiness.tsx";
+import {useIntentState} from "../../state/Intent/useIntentState.ts";
+import type {IntentControllerState} from "../../domain/intent.types.ts";
+import type {MagentoLayeredNavigation} from "../../hooks/domain/useLayeredNavigation.tsx";
 
 type IntentExplanationProps = {
+    attributeLayerData: MagentoLayeredNavigation
+    intent: IntentControllerState
     remainingChars: number;
-    searchPossible: boolean;
     onAsk: () => void;
 };
 
 export const IntentExplanation = ({
-   remainingChars,
-   searchPossible,
-   onAsk
+    attributeLayerData,
+    intent,
+    remainingChars,
+    onAsk
 }: IntentExplanationProps) => {
     const { t } = useTranslationState();
+    const { intentState, getAiReadiness } = useIntentState()
+    const coveragePct = getAiReadiness(attributeLayerData)
+    const canInterpretOrSuggest =
+        intentState.intentInterpretationReady || coveragePct === 100;
 
-    return (
-        <div className="intent-explanations">
-            <button
-                onClick={onAsk}
-                className="filter-apply-button"
-                disabled={remainingChars > 0 && !searchPossible}
-            >
-                {t("Suggest Products")}
-            </button>
+    const intentStarted = !!intent?.text?.trim()
 
-            <div className={`intent-ai-threshold ${remainingChars === 0 ? "ready" : ""}`}>
-                {remainingChars > 0
-                    ? t("Add %s+ characters in the text intent or refine your preferences", remainingChars)
-                    : t("AI ready to interpret your request")}
+    return (
+        <>
+            <div className="intent-explanations">
+                <button
+                    onClick={onAsk}
+                    className="filter-apply-button"
+                    disabled={!canInterpretOrSuggest}
+                >
+                    {t("Suggest Products")}
+                </button>
+                <label className="intent-subtitle">
+                    {t("Describe what you're looking for")}
+                </label>
             </div>
-
-            <label className="intent-subtitle">
-                {t("Describe what you're looking for")}
-            </label>
-        </div>
+            <IntentReadiness
+                attributeLayerData={attributeLayerData}
+                intentStarted={intentStarted}
+                remainingChars={remainingChars}
+                canInterpretOrSuggest={canInterpretOrSuggest}
+            />
+        </>
     );
 };

vite_project/src/components/FinderWidget/StepFinder.tsx

@@ -1,24 +1,27 @@
 import { unescapeHtml } from "../../lib/string.ts";
 import { useFindAttributeOptionsByCode } from "../../hooks/domain/useFindAttributeOptionsByCode.tsx";
-import type {MagentoAggregationOption, MagentoProducts} from "../../hooks/infra/useProductAttributeLayer.tsx";
 import {useInteractionState} from "../../state/Interaction/useInteractionState.ts";
 import {activity} from "../../activity";
 import {useIntentState} from "../../state/Intent/useIntentState.ts";
+import type {MagentoLayeredNavigation} from "../../hooks/domain/useLayeredNavigation.tsx";
+import type {MergedAttributeOption} from "../../hooks/infra/useMagentoLayeredData.tsx";
 
 interface StepFinderProps {
     optionCode: string
-    attributeLayerData: MagentoProducts
+    attributeLayerData: MagentoLayeredNavigation
 }
 
 export const StepFinder: React.FC<StepFinderProps> = ({ optionCode, attributeLayerData }: StepFinderProps) => {
     const { setActiveAttribute, setFocusedOption } = useInteractionState()
     const { attributeData } = useFindAttributeOptionsByCode(optionCode, attributeLayerData)
     const { setPreference, intentState } = useIntentState()
+    //const { dispatch } = useIntentState()
 
-    const handleOnClick = async (option: MagentoAggregationOption) => {
+    const handleOnClick = async (option: MergedAttributeOption) => {
         setActiveAttribute(optionCode);
         setPreference(optionCode, option.value)
         setFocusedOption(option.value)
+        //dispatch( { type : "FILTER_CHANGED", attributeLayerData})
 
         activity('intent-discovery-option', 'Intent Option Selection', {intentState, optionCode, value: option.value});
     };
@@ -28,13 +31,13 @@ export const StepFinder: React.FC<StepFinderProps> = ({ optionCode, attributeLay
 
     return (
             <div className="step-finder">
-                {attributeData?.options.map((option: MagentoAggregationOption) => (
+                {attributeData?.options.map((option: MergedAttributeOption) => (
                     <label
                         key={option.value}
                         className="choice-tile"
                         data-intent-option={option.label}
                         data-intent-selected={isOptionSelected(option.value)}
-                        data-intent-count={option.count}
+                        data-intent-count={option.filteredCount}
                     >
                         <input
                             type="radio"
@@ -46,7 +49,7 @@ export const StepFinder: React.FC<StepFinderProps> = ({ optionCode, attributeLay
                         />
 
                         <span className={`choice-tile__label ${isOptionSelected(option.value) ? 'choice-tile__label--active' : ''}`}>
-                            {unescapeHtml(option.label)} ({option.count})
+                            {unescapeHtml(option.label)} ({option.filteredCount})
                         </span>
                     </label>
                 ))}

vite_project/src/components/FinderWidget/StepPriceFinder.tsx

@@ -1,9 +1,10 @@
 import {useFindAttributeOptionsByCode} from "../../hooks/domain/useFindAttributeOptionsByCode.tsx";
 import {formatRange} from "../../lib/price.ts";
-import type {MagentoAggregationOption, MagentoProducts} from "../../hooks/infra/useProductAttributeLayer.tsx";
+import type {MagentoLayeredNavigation} from "../../hooks/domain/useLayeredNavigation.tsx";
+import type {MergedAttributeOption} from "../../hooks/infra/useMagentoLayeredData.tsx";
 
 interface StepFinderProps {
-    attributeLayerData: MagentoProducts
+    attributeLayerData: MagentoLayeredNavigation
 }
 
 export const StepPriceFinder = ({attributeLayerData}: StepFinderProps) => {
@@ -16,7 +17,7 @@ export const StepPriceFinder = ({attributeLayerData}: StepFinderProps) => {
 
     return (
         <div className="step-finder">
-            {attributeData?.options.map((option: MagentoAggregationOption) => (
+            {attributeData?.options.map((option: MergedAttributeOption) => (
                 <label
                     key={option.value}
                     className="choice-tile"

vite_project/src/components/IntentDiscovery/AttributeLayer.tsx

@@ -1,60 +1,89 @@
-import { useState} from "react";
+import {useEffect, useRef, useState} from "react";
 import type {IntentDiscoveryDataConfig} from "../../domain/intent-discovery.types.ts";
-import type {MagentoAggregation} from "../../hooks/infra/useProductAttributeLayer.tsx";
 import type {IntentControllerState} from "../../domain/intent.types.ts";
 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";
+import {useAnalyseSearch} from "../../hooks/domain/useAnalyseSearch.tsx";
+import type {CategoryData} from "../../types/infra/magento/category.types.ts";
+import type {MagentoLayeredNavigation} from "../../hooks/domain/useLayeredNavigation.tsx";
 
 type Props = {
     config: IntentDiscoveryDataConfig
     intent: IntentControllerState
-    searchPossible: boolean
-    aggregations: MagentoAggregation[],
-    disabled: boolean
+    attributeLayerData: MagentoLayeredNavigation,
+    categoryData: CategoryData
 }
 
 export const AttributeLayer = ({
-       config,
-       intent,
-       searchPossible,
-       aggregations,
-       disabled
-    }: Props) => {
+   config,
+   intent,
+   attributeLayerData,
+   categoryData
+}: Props) => {
     const [loading, setLoading] = useState(false);
-    const { setIntentStatus } = useIntentState()
+    const { dispatch, intentState } = useIntentState()
 
     const askAi = useAskAi({
         intent,
-        aggregations,
+        attributeLayerData,
         config,
         setLoading
     })
 
-    const handleAsk = () => {
-        if (intent.text?.trim()) {
-            askAi()
-        } else {
-            setIntentStatus("readyToSearch")
+    const askAiRecommendations = useAnalyseSearch({
+        attributeLayerData,
+        categoryData,
+        intentState
+    });
+
+    useEffect(() => {
+        if (intentState.status === "readyToRecommend") {
+            askAiRecommendations()
+        }
+    }, [intentState.status])
+
+    const prevRemaining = useRef<number | null>(null);
+
+    useEffect(() => {
+        const prev = prevRemaining.current;
+        const current = intent.remainingChars;
+
+        const crossedThreshold =
+            prev !== null &&
+            prev > 0 &&
+            current <= 0;
+
+        if (crossedThreshold) {
+            dispatch({ type: "INTERPRETATION_READY" });
         }
+
+        prevRemaining.current = current;
+    }, [intent.remainingChars, intent.text]);
+
+    const handleAsk = () => {
+        dispatch({ type: "INTERPRETATION_READY" })
+        askAi()
     }
 
     if (loading) return <SearchSpinnerOverlay />
 
     return (
             <div className="finder">
                 <IntentExplanation
+                    attributeLayerData={attributeLayerData}
+                    intent={intent}
                     remainingChars={intent.remainingChars}
-                    searchPossible={searchPossible}
                     onAsk={handleAsk}
                 />
                 <AttributeSelectorLayer
-                    isDisabled={disabled}
-                    aggregations={aggregations}
+                    attributeLayerData={attributeLayerData}
                     config={config}
                 />
             </div>
     );
 };
+
+