@streamoid/catalogix-chat 0.2.10 → 0.2.11

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/CatalogixChat.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 
 // src/api.ts
 var _config = {
@@ -2435,17 +2435,19 @@ function CreateStore({
 }
 
 // src/MapAttributes/index.tsx
-import { useState as useState7, useMemo as useMemo5, useCallback as useCallback5 } from "react";
+import React7, { useState as useState7, useMemo as useMemo5, useCallback as useCallback5, useTransition, useEffect as useEffect5 } from "react";
 import {
   Check as Check2,
   X,
   ChevronRight as ChevronRight2,
+  ChevronDown as ChevronDown2,
   Pencil as Pencil2,
   Search as Search3,
   ArrowRight,
   ArrowLeft as ArrowLeft2,
   Send,
-  AlertTriangle
+  AlertTriangle,
+  Loader2 as Loader25
 } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 function getAllAttributes(mpAttributes) {
@@ -2462,7 +2464,7 @@ function hasIncompleteLovValues(item, valuesOntologyAttributes, uniqueValues) {
   }
   return false;
 }
-function AttributeRow({
+var AttributeRow = React7.memo(function AttributeRow2({
   item,
   index,
   allAttributes,
@@ -2595,7 +2597,38 @@ function AttributeRow({
       )
     ] })
   ] });
-}
+});
+var ValueRow = React7.memo(function ValueRow2({
+  raw,
+  mapped,
+  options,
+  itemIndex,
+  attribute,
+  onValueChange
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx21("span", { className: "text-xs text-muted-foreground truncate min-w-0 flex-1", children: raw }),
+    /* @__PURE__ */ jsx21(ArrowRight, { className: "size-3 shrink-0 text-muted-foreground/50" }),
+    /* @__PURE__ */ jsxs10(
+      Select,
+      {
+        value: mapped || "__unmapped__",
+        onValueChange: (v) => {
+          const val = v === "__skip__" ? null : v;
+          onValueChange(itemIndex, attribute, raw, val);
+        },
+        children: [
+          /* @__PURE__ */ jsx21(SelectTrigger, { className: "h-7 w-[140px] text-xs", children: /* @__PURE__ */ jsx21(SelectValue, { placeholder: "Select..." }) }),
+          /* @__PURE__ */ jsxs10(SelectContent, { children: [
+            /* @__PURE__ */ jsx21(SelectItem, { value: "__unmapped__", children: /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "Select..." }) }),
+            /* @__PURE__ */ jsx21(SelectItem, { value: "__skip__", children: /* @__PURE__ */ jsx21("span", { className: "italic text-muted-foreground", children: "Skip" }) }),
+            options.map((v) => /* @__PURE__ */ jsx21(SelectItem, { value: v, children: v }, v))
+          ] })
+        ]
+      }
+    )
+  ] });
+});
 function ValueMappingPanel({
   data,
   valuesOntologyAttributes,
@@ -2603,6 +2636,7 @@ function ValueMappingPanel({
   lovOptions,
   onValueChange
 }) {
+  const [expandedIndex, setExpandedIndex] = useState7(null);
   const lovItems = useMemo5(() => {
     const items = [];
     data.forEach((item, itemIndex) => {
@@ -2634,63 +2668,62 @@ function ValueMappingPanel({
     });
     return items;
   }, [data, valuesOntologyAttributes, uniqueValues]);
+  useEffect5(() => {
+    const first = lovItems.findIndex((i) => i.mappedCount < i.totalCount);
+    setExpandedIndex(first >= 0 ? first : 0);
+  }, [lovItems.length]);
   if (lovItems.length === 0) {
     return /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center py-6 text-xs text-muted-foreground", children: "No value mapping required." });
   }
-  return /* @__PURE__ */ jsx21("div", { className: "divide-y divide-border/50", children: lovItems.map((item, idx) => /* @__PURE__ */ jsxs10("div", { className: "py-2.5 space-y-1.5", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx21("span", { className: "text-xs font-medium", children: item.feedCol }),
-      /* @__PURE__ */ jsx21(ChevronRight2, { className: "size-3 text-muted-foreground" }),
-      /* @__PURE__ */ jsx21("span", { className: "text-xs text-muted-foreground", children: item.attribute }),
+  return /* @__PURE__ */ jsx21("div", { className: "divide-y divide-border/50", children: lovItems.map((item, idx) => {
+    const isExpanded = expandedIndex === idx;
+    const isComplete = item.mappedCount >= item.totalCount;
+    const options = lovOptions[item.attribute] ?? [...new Set(
+      Object.values(item.mappedValues).filter(Boolean)
+    )];
+    return /* @__PURE__ */ jsxs10("div", { className: "py-1", children: [
       /* @__PURE__ */ jsxs10(
-        "span",
+        "button",
         {
-          className: cn(
-            "ml-auto text-[11px] tabular-nums",
-            item.mappedCount >= item.totalCount ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground"
-          ),
+          type: "button",
+          onClick: () => setExpandedIndex(isExpanded ? null : idx),
+          className: "w-full flex items-center gap-1.5 py-1.5 hover:bg-muted/50 rounded-sm px-1 -mx-1 transition-colors",
           children: [
-            item.mappedCount,
-            "/",
-            item.totalCount
+            isExpanded ? /* @__PURE__ */ jsx21(ChevronDown2, { className: "size-3 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx21(ChevronRight2, { className: "size-3 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx21("span", { className: "text-xs font-medium truncate", children: item.feedCol }),
+            /* @__PURE__ */ jsx21(ArrowRight, { className: "size-3 shrink-0 text-muted-foreground/50" }),
+            /* @__PURE__ */ jsx21("span", { className: "text-xs text-muted-foreground truncate", children: item.attribute }),
+            /* @__PURE__ */ jsxs10(
+              "span",
+              {
+                className: cn(
+                  "ml-auto text-[11px] tabular-nums shrink-0",
+                  isComplete ? "text-emerald-600 dark:text-emerald-400" : "text-amber-600 dark:text-amber-400"
+                ),
+                children: [
+                  item.mappedCount,
+                  "/",
+                  item.totalCount
+                ]
+              }
+            )
           ]
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsx21("div", { className: "space-y-1", children: item.rawValues.map((raw) => {
-      const mapped = item.mappedValues[raw];
-      const options = lovOptions[item.attribute] ?? [...new Set(
-        Object.values(item.mappedValues).filter(Boolean)
-      )];
-      return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx21("span", { className: "text-xs text-muted-foreground truncate min-w-0 flex-1", children: raw }),
-        /* @__PURE__ */ jsx21(ArrowRight, { className: "size-3 shrink-0 text-muted-foreground/50" }),
-        /* @__PURE__ */ jsxs10(
-          Select,
-          {
-            value: mapped || "__unmapped__",
-            onValueChange: (v) => {
-              const val = v === "__skip__" ? null : v;
-              onValueChange(
-                item.itemIndex,
-                item.attribute,
-                raw,
-                val
-              );
-            },
-            children: [
-              /* @__PURE__ */ jsx21(SelectTrigger, { className: "h-7 w-[140px] text-xs", children: /* @__PURE__ */ jsx21(SelectValue, { placeholder: "Select..." }) }),
-              /* @__PURE__ */ jsxs10(SelectContent, { children: [
-                /* @__PURE__ */ jsx21(SelectItem, { value: "__unmapped__", children: /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "Select..." }) }),
-                /* @__PURE__ */ jsx21(SelectItem, { value: "__skip__", children: /* @__PURE__ */ jsx21("span", { className: "italic text-muted-foreground", children: "Skip" }) }),
-                options.map((v) => /* @__PURE__ */ jsx21(SelectItem, { value: v, children: v }, v))
-              ] })
-            ]
-          }
-        )
-      ] }, raw);
-    }) })
-  ] }, idx)) });
+      ),
+      isExpanded && /* @__PURE__ */ jsx21("div", { className: "space-y-1 pl-4 pb-1.5 pt-1", children: item.rawValues.map((raw) => /* @__PURE__ */ jsx21(
+        ValueRow,
+        {
+          raw,
+          mapped: item.mappedValues[raw],
+          options,
+          itemIndex: item.itemIndex,
+          attribute: item.attribute,
+          onValueChange
+        },
+        raw
+      )) })
+    ] }, idx);
+  }) });
 }
 function MapAttributesChat({
   mappingData: initialData,
@@ -2705,6 +2738,8 @@ function MapAttributesChat({
     () => initialData.map((item) => ({ ...item }))
   );
   const [step, setStep] = useState7("attributes");
+  const [isPending, startTransition] = useTransition();
+  const [isSaving, setIsSaving] = useState7(false);
   const allAttributes = useMemo5(
     () => getAllAttributes(mpAttributes),
     [mpAttributes]
@@ -2804,23 +2839,31 @@ function MapAttributesChat({
   }, []);
   const handleValueChange = useCallback5(
     (itemIndex, attribute, rawValue, mappedValue) => {
-      setData((prev) => {
-        const next = [...prev];
-        const item = { ...next[itemIndex] };
-        const attrValues = { ...item.mappedValues[attribute] || {} };
-        attrValues[rawValue] = mappedValue;
-        item.mappedValues = {
-          ...item.mappedValues,
-          [attribute]: attrValues
-        };
-        next[itemIndex] = item;
-        return next;
+      startTransition(() => {
+        setData((prev) => {
+          const next = [...prev];
+          const item = { ...next[itemIndex] };
+          const attrValues = { ...item.mappedValues[attribute] || {} };
+          attrValues[rawValue] = mappedValue;
+          item.mappedValues = {
+            ...item.mappedValues,
+            [attribute]: attrValues
+          };
+          next[itemIndex] = item;
+          return next;
+        });
       });
     },
     []
   );
+  const handleGoToValues = useCallback5(() => {
+    startTransition(() => setStep("values"));
+  }, []);
   const handleSubmit = useCallback5(() => {
-    onSubmit(data);
+    setIsSaving(true);
+    requestAnimationFrame(() => {
+      onSubmit(data);
+    });
   }, [data, onSubmit]);
   if (submitted) {
     return /* @__PURE__ */ jsxs10("div", { className: "rounded-lg border border-border bg-muted/20 p-3 flex items-start gap-3", children: [
@@ -2877,30 +2920,33 @@ function MapAttributesChat({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx21("div", { className: "px-4 overflow-y-auto flex-1 min-h-0", children: step === "attributes" ? /* @__PURE__ */ jsx21("div", { className: "divide-y divide-border/50", children: sortedIndices.map((idx) => /* @__PURE__ */ jsx21(
-      AttributeRow,
-      {
-        item: data[idx],
-        index: idx,
-        allAttributes,
-        needsValueAttention: lovAttentionSet.has(idx),
-        onMap: handleMap,
-        onConfirm: handleConfirm,
-        onIgnore: handleIgnore,
-        onEdit: handleEdit,
-        onUnmap: handleUnmap
-      },
-      idx
-    )) }) : /* @__PURE__ */ jsx21(
-      ValueMappingPanel,
-      {
-        data,
-        valuesOntologyAttributes,
-        uniqueValues,
-        lovOptions,
-        onValueChange: handleValueChange
-      }
-    ) }),
+    /* @__PURE__ */ jsxs10("div", { className: "px-4 overflow-y-auto flex-1 min-h-0 relative", children: [
+      isPending && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]", children: /* @__PURE__ */ jsx21(Loader25, { className: "size-5 animate-spin text-muted-foreground" }) }),
+      step === "attributes" ? /* @__PURE__ */ jsx21("div", { className: "divide-y divide-border/50", children: sortedIndices.map((idx) => /* @__PURE__ */ jsx21(
+        AttributeRow,
+        {
+          item: data[idx],
+          index: idx,
+          allAttributes,
+          needsValueAttention: lovAttentionSet.has(idx),
+          onMap: handleMap,
+          onConfirm: handleConfirm,
+          onIgnore: handleIgnore,
+          onEdit: handleEdit,
+          onUnmap: handleUnmap
+        },
+        idx
+      )) }) : /* @__PURE__ */ jsx21(
+        ValueMappingPanel,
+        {
+          data,
+          valuesOntologyAttributes,
+          uniqueValues,
+          lovOptions,
+          onValueChange: handleValueChange
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs10("div", { className: "flex justify-end gap-2 px-4 py-2 flex-shrink-0 border-t border-border/50", children: [
       step === "values" && /* @__PURE__ */ jsxs10(
         Button,
@@ -2920,12 +2966,12 @@ function MapAttributesChat({
         {
           variant: "ghost",
           size: "sm",
-          onClick: () => setStep("values"),
-          disabled: progress.done < progress.total,
+          onClick: handleGoToValues,
+          disabled: progress.done < progress.total || isPending,
           className: "h-7 text-xs",
           children: [
-            "Map Values",
-            /* @__PURE__ */ jsx21(ArrowRight, { className: "ml-1 size-3" })
+            isPending ? /* @__PURE__ */ jsx21(Loader25, { className: "mr-1 size-3 animate-spin" }) : /* @__PURE__ */ jsx21(ArrowRight, { className: "ml-1 size-3" }),
+            isPending ? "Loading..." : "Map Values"
           ]
         }
       ),
@@ -2934,11 +2980,11 @@ function MapAttributesChat({
         {
           size: "sm",
           onClick: handleSubmit,
-          disabled: progress.done < progress.total || hasLovAttributes && !allValuesComplete,
+          disabled: progress.done < progress.total || hasLovAttributes && !allValuesComplete || isSaving,
           className: "h-7 text-xs bg-primary text-primary-foreground shadow-none hover:bg-primary/90",
           children: [
-            /* @__PURE__ */ jsx21(Send, { className: "mr-1 size-3" }),
-            "Save Mapping"
+            isSaving ? /* @__PURE__ */ jsx21(Loader25, { className: "mr-1 size-3 animate-spin" }) : /* @__PURE__ */ jsx21(Send, { className: "mr-1 size-3" }),
+            isSaving ? "Saving..." : "Save Mapping"
           ]
         }
       )
@@ -2947,8 +2993,8 @@ function MapAttributesChat({
 }
 
 // src/Automations/ProductAutomation.tsx
-import { useState as useState9, useEffect as useEffect5, useCallback as useCallback7, useRef as useRef5 } from "react";
-import { ArrowLeft as ArrowLeft3, Search as Search4, Loader2 as Loader26, ChevronDown as ChevronDown2, Play } from "lucide-react";
+import { useState as useState9, useEffect as useEffect6, useCallback as useCallback7, useRef as useRef5 } from "react";
+import { ArrowLeft as ArrowLeft3, Search as Search4, Loader2 as Loader27, ChevronDown as ChevronDown3, Play } from "lucide-react";
 
 // src/Automations/api.ts
 async function fetchAutomationList(storeId, tag, includeGroupings = false) {
@@ -3075,7 +3121,7 @@ function parseLovResponse(response, curl, configs) {
 
 // src/Automations/SchemaFieldRenderer.tsx
 import { useCallback as useCallback6, useState as useState8 } from "react";
-import { Check as Check3, ChevronsUpDown as ChevronsUpDown2, Loader2 as Loader25, X as X2 } from "lucide-react";
+import { Check as Check3, ChevronsUpDown as ChevronsUpDown2, Loader2 as Loader26, X as X2 } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 function SchemaFieldRenderer({
   schema,
@@ -3273,7 +3319,7 @@ function SingleSelectField({
     ] }),
     item.description && /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground", children: item.description }),
     loading ? /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx22(Loader25, { className: "size-4 animate-spin" }),
+      /* @__PURE__ */ jsx22(Loader26, { className: "size-4 animate-spin" }),
       "Loading options..."
     ] }) : /* @__PURE__ */ jsxs11(
       Select,
@@ -3313,7 +3359,7 @@ function MultiSelectField({
     ] }),
     item.description && /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground", children: item.description }),
     loading ? /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx22(Loader25, { className: "size-4 animate-spin" }),
+      /* @__PURE__ */ jsx22(Loader26, { className: "size-4 animate-spin" }),
       "Loading options..."
     ] }) : /* @__PURE__ */ jsxs11(Popover, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx22(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(
@@ -3443,7 +3489,7 @@ function ProductAutomation({
   const loadingOptionsRef = useRef5(loadingOptions);
   loadingOptionsRef.current = loadingOptions;
   const productsCount = selectedProducts.includes("all") ? excludedProducts.length === 0 ? totalProducts : totalProducts - excludedProducts.length : productsCountProp;
-  useEffect5(() => {
+  useEffect6(() => {
     setLoading(true);
     fetchAutomationList(storeId, "product", true).then((data) => {
       const groups = {};
@@ -3459,7 +3505,7 @@ function ProductAutomation({
       if (sorted.length > 0) setExpandedGroups([sorted[0]]);
     }).catch(console.error).finally(() => setLoading(false));
   }, [storeId]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!selected) {
       setSchema([]);
       setConfigs({});
@@ -3478,7 +3524,7 @@ function ProductAutomation({
       configsRef.current = defaults;
     }).catch(console.error).finally(() => setSchemaLoading(false));
   }, [selected, storeId]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (schema.length === 0) return;
     const flatItems = schema.flatMap((s) => s.mapping_parameters ?? [s]);
     for (const item of flatItems) {
@@ -3628,7 +3674,7 @@ function ProductAutomation({
             children: [
               group,
               /* @__PURE__ */ jsx23(
-                ChevronDown2,
+                ChevronDown3,
                 {
                   className: cn(
                     "size-4 transition-transform",
@@ -3690,7 +3736,7 @@ function ProductAutomation({
           disabled: !isRunAllowed() || applying,
           className: "flex-1",
           children: applying ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
-            /* @__PURE__ */ jsx23(Loader26, { className: "size-4 animate-spin" }),
+            /* @__PURE__ */ jsx23(Loader27, { className: "size-4 animate-spin" }),
             "Applying..."
           ] }) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
             /* @__PURE__ */ jsx23(Play, { className: "size-4" }),
@@ -3734,7 +3780,7 @@ function formatTimeSaved(totalSeconds) {
 }
 
 // src/Automations/StoreAutomation.tsx
-import { useState as useState10, useEffect as useEffect6, useCallback as useCallback8, useRef as useRef6 } from "react";
+import { useState as useState10, useEffect as useEffect7, useCallback as useCallback8, useRef as useRef6 } from "react";
 import { ArrowLeft as ArrowLeft4, Settings } from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 function StoreAutomation({
@@ -3748,7 +3794,7 @@ function StoreAutomation({
   const [automations, setAutomations] = useState10([]);
   const [selectedConfigs, setSelectedConfigs] = useState10({ ...enabledAutomations });
   const [selectedAutomation, setSelectedAutomation] = useState10(null);
-  useEffect6(() => {
+  useEffect7(() => {
     setLoading(true);
     fetchAutomationList(storeId, "default").then((data) => {
       setAutomations(
@@ -3887,7 +3933,7 @@ function AutomationConfigEditor({
   configsRef.current = configs;
   const optionsRef = useRef6(options);
   optionsRef.current = options;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!automation.isEnabled) return;
     setSchemaLoading(true);
     fetchAutomationSchema(storeId, automation.automation, "default").then((items) => {
@@ -3902,7 +3948,7 @@ function AutomationConfigEditor({
       }
     }).catch(console.error).finally(() => setSchemaLoading(false));
   }, [storeId, automation, initialConfigs]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (schema.length === 0) return;
     for (const item of schema) {
       if (!item.curl) continue;
@@ -4031,7 +4077,7 @@ function CatalogixChat(props) {
   const filters = uiProps.filters ?? {};
   const selectedPageRange = uiProps.selectedPageRange ?? [];
   const enabledAutomations = uiProps.enabledAutomations ?? {};
-  useEffect7(() => {
+  useEffect8(() => {
     configureApi({ catalogixBaseUrl });
   }, [catalogixBaseUrl]);
   if (section === "select_products") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/catalogix-chat",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "Catalogix chat components for the Streamoid chat host — store creation, product selection, automations",
   "type": "module",
   "main": "./dist/index.js",