Merge pull request #5 from reactedge/feat/intent-state-refactor

Refactor Intent Discovery state model and stabilize UX flow

Author: digitalrisedorset

vite_project/index.html

@@ -6,7 +6,7 @@
     <script type="module" src="./src/widget.ts"></script>
 
     <script>
-        window.ReactEdgeIntent = window.ReactEdgeIntent || {
+        /*window.ReactEdgeIntent = window.ReactEdgeIntent || {
             emit: (signal) => {
                 window.dispatchEvent(
                     new CustomEvent("reactedge:intent", { detail: signal })
@@ -22,7 +22,7 @@
                     }
                 })
             );
-        }
+        }*/
     </script>
 
     <div style="padding:20px; border:1px solid #ccc; margin-top:20px;">

vite_project/package-lock.json

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

vite_project/package.json

@@ -3,21 +3,18 @@ import {ErrorState} from "./components/global/ErrorState.tsx";
 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";
 
 type Props = {
     host: HTMLElement;
 };
 
-function SearchOverlay() {
-    return null;
-}
-
 export const IntentDiscoveryWidgetWrapper = ({ host }: Props) => {
     const {config, error, loading} = useWidgetConfig(host);
 
     if (!config) return null;
     if (error) return <ErrorState error={error}  />
-    if (loading) return <SearchOverlay />
+    if (loading) return <SpinnerOverlay />
 
     return  <SystemStateProvider config={config.integrations} store={config.storeCode}>
                 <TranslationStateProvider translations={config.translations}>

vite_project/src/IntentDiscoveryWidgetWrapper.tsx

@@ -1,12 +1,13 @@
-import {useActiveAttributeState} from "../../state/ActiveAttribute/useActiveAttributeState.ts";
+import { useSelectedPreferences } from "../SelectionsSummary/selectedPreferencesUtils.ts";
+import { useState } from "react";
+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 {useSystemState} from "../../state/System/useSystemState.ts";
-import {useSelectedPreferences} from "../SelectionsSummary/selectedPreferencesUtils.ts";
-import {useState} from "react";
-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 {NoResult} from "../global/NoResult.tsx";
 
 type Props = {
     isDisabled: boolean
@@ -15,25 +16,25 @@ type Props = {
 }
 
 export const AttributeSelectorLayer = ({
-       isDisabled,
-       aggregations,
-       config
-   }: Props) => {
-    const { intentState } = useSystemState()
-    const { setActiveAttributeCode } = useActiveAttributeState();
+    isDisabled,
+    aggregations,
+    config
+}: Props) => {
+    const { setActiveAttribute } = useInteractionState();
     const [showAll, setShowAll] = useState(false);
+    const {intentState} = useSystemState()
 
     const allAttributes = useIntentAttributes(aggregations, config)
     const visibleAttributes = showAll ? allAttributes : allAttributes.slice(0, 3);
-    const { valueFor: prefValue } =
+    const { displayFor } =
         useSelectedPreferences(aggregations, intentState);
-    const {t} = useTranslationState()
+    const { t } = useTranslationState()
 
     const isAttributeSelected = (code: string) =>
         code in (intentState?.attributeScore ?? {}) ||
         (code === 'price' && Object.keys(intentState?.priceAffinity ?? {}).length > 0);
 
-    if (!aggregations?.length) return null;
+    if (!aggregations?.length) return <NoResult />;
 
     return (
         <div className={`step-finder ${isDisabled ? 'step-finder--disabled' : ''}`}>
@@ -46,8 +47,8 @@ export const AttributeSelectorLayer = ({
                         key={code}
                         attr={attr}
                         isSelected={isSelected}
-                        value={prefValue(code)}
-                        onClick={() => setActiveAttributeCode(code)}
+                        value={displayFor(code)}
+                        onClick={() => setActiveAttribute(code)}
                     />
                 );
             })}

vite_project/src/components/AttributeLayer/AttributeSelectorLayer.tsx

@@ -15,10 +15,6 @@ export const IntentExplanation = ({
 
     return (
         <div className="intent-explanations">
-            <label className="intent-subtitle">
-                {t("Describe what you're looking for")}
-            </label>
-
             <button
                 onClick={onAsk}
                 className="filter-apply-button"
@@ -32,6 +28,10 @@ export const IntentExplanation = ({
                     ? t("Add %s+ characters in the text intent or refine your preferences", remainingChars)
                     : t("AI ready to interpret your request")}
             </div>
+
+            <label className="intent-subtitle">
+                {t("Describe what you're looking for")}
+            </label>
         </div>
     );
 };

vite_project/src/components/AttributeLayer/IntentExplanation.tsx

@@ -1,50 +1,31 @@
 import { unescapeHtml } from "../../lib/string.ts";
 import { useFindAttributeOptionsByCode } from "../../hooks/domain/useFindAttributeOptionsByCode.tsx";
-import { useOptionPreferenceState } from "../../state/OptionPreference/useOptionPreferenceState.ts";
-import { useActiveAttributeState } from "../../state/ActiveAttribute/useActiveAttributeState.ts";
 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";
 
-
 interface StepFinderProps {
     optionCode: string
     attributeLayerData: MagentoProducts
 }
 
 export const StepFinder: React.FC<StepFinderProps> = ({ optionCode, attributeLayerData }: StepFinderProps) => {
-    const { optionState, toggleOptionSelection } = useOptionPreferenceState()
-    const { setActiveAttributeCode } = useActiveAttributeState()
+    const { setActiveAttribute, setFocusedOption } = useInteractionState()
     const { attributeData } = useFindAttributeOptionsByCode(optionCode, attributeLayerData)
+    const { setPreference } = useSystemState()
+    const {intentState} = useSystemState()
 
-    // find the currently selected value for this option code
-    const currentSelection = optionState.optionSelection.find(sel => sel.code === optionCode);
-
-    const onChange = async (option: MagentoAggregationOption) => {
-        setActiveAttributeCode(optionCode);
-        const action = toggleOptionSelection(optionCode, attributeData.label, option.value, option.label);
+    const handleOnClick = async (option: MagentoAggregationOption) => {
+        setActiveAttribute(optionCode);
+        setPreference(optionCode, option.value)
+        setFocusedOption(option.value)
 
-        activity('select-options', `Select ${optionCode}`, action);
-
-        if (action === 'select') {
-            window.ReactEdgeIntent.emit({
-                type: 'filter_select',
-                attribute: optionCode,
-                value: option.value
-            });
-        } else {
-            window.ReactEdgeIntent.emit({
-                type: 'filter_deselect',
-                attribute: optionCode,
-                value: option.value
-            });
-        }
+        activity('intent-discovery-option', 'Intent Option Selection', {intentState, optionCode, value: option.value});
     };
 
-    // check if current option value is selected (handles both single and multiple selections)
-    const isOptionSelected = (optionValue: string): boolean => {
-        if (!currentSelection) return false;
-        return currentSelection.value === optionValue;
-    };
+    const selectedMap = intentState.attributeScore?.[optionCode] || {};
+    const isOptionSelected = (value: string) => value in selectedMap;
 
     return (
             <div className="step-finder">
@@ -59,8 +40,10 @@ export const StepFinder: React.FC<StepFinderProps> = ({ optionCode, attributeLay
                         <input
                             type="radio"
                             name="preference"
+                            checked={isOptionSelected(option.value)}
                             value={option.value}
-                            onChange={() => onChange(option)}
+                            onClick={() => handleOnClick(option)}
+                            readOnly
                         />
 
                         <span className={`choice-tile__label ${isOptionSelected(option.value) ? 'choice-tile__label--active' : ''}`}>

vite_project/src/components/FinderWidget/ResultMatch.tsx

@@ -1,4 +1,3 @@
-import {useOptionPreferenceState} from "../../state/OptionPreference/useOptionPreferenceState.ts";
 import {useFindAttributeOptionsByCode} from "../../hooks/domain/useFindAttributeOptionsByCode.tsx";
 import {formatRange} from "../../lib/price.ts";
 import type {MagentoAggregationOption, MagentoProducts} from "../../hooks/infra/useProductAttributeLayer.tsx";
@@ -9,14 +8,10 @@ interface StepFinderProps {
 
 export const StepPriceFinder = ({attributeLayerData}: StepFinderProps) => {
     const option = 'price'
-    const {setOptionSelection, setActiveOptionCode} = useOptionPreferenceState()
     const {attributeData} = useFindAttributeOptionsByCode(option, attributeLayerData)
 
-    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const input = e.target;
-
-        setActiveOptionCode('result');
-        setOptionSelection(option, attributeData.label, input.value, input.value);
+    const onChange = () => {
+        //
     };
 
     return (

vite_project/src/components/FinderWidget/StepFinder.tsx

@@ -4,10 +4,10 @@ import {useSystemState} from "../../state/System/useSystemState.ts";
 import type {MagentoAggregation} from "../../hooks/infra/useProductAttributeLayer.tsx";
 import type {IntentControllerState} from "../../domain/intent.types.ts";
 import {useOptionLabelMap} from "../../hooks/domain/useOptionLabelMap.ts";
-import {SpinnerOverlay} from "../SpinnerOverlay.tsx";
 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";
 
 type Props = {
     config: IntentDiscoveryDataConfig
@@ -24,9 +24,10 @@ export const AttributeLayer = ({
        aggregations,
        disabled
     }: Props) => {
-    const { intentState, setIntentText, setIntentStatus, setPreference, intentApiClient } = useSystemState()
+    const { setIntentText, setIntentStatus, setPreference, intentEngine, intentState } = useSystemState()
     const optionLabelMap = useOptionLabelMap(aggregations);
     const [loading, setLoading] = useState(false);
+    const intentApiClient = intentEngine.getApiClient()
 
     const handleAsk = useAskAi({
         intentState,
@@ -41,7 +42,7 @@ export const AttributeLayer = ({
         setLoading
     });
 
-    if (loading) return <SpinnerOverlay />
+    if (loading) return <SearchSpinnerOverlay />
 
     return (
             <div className="finder">